4e:I[707087,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"RegistryDependencies"] 4f:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"FilesView"] 50:T7c5c,import * as React from "react" import { DndContext, PointerSensor, useDraggable, useDroppable, useSensor, useSensors, type DragEndEvent, type DragMoveEvent, type DragOverEvent, type DragStartEvent, } from "@dnd-kit/core" import { CSS } from "@dnd-kit/utilities" import { Clock, Settings, X } from "lucide-react" import { nanoid } from "nanoid" import { Button } from "@/components/ui/button" import { cn } from "@/lib/utils" export interface TimeSpan { active?: boolean id: string week_day: number start_time: string end_time: string label?: string } export interface AvailabilityProps { value?: TimeSpan[] onValueChange?: (value: TimeSpan[]) => void disabled?: TimeSpan[] days?: number[] showAllDays?: boolean timeIncrements?: number startTime?: number endTime?: number useAmPm?: boolean mergeAdjacent?: boolean slotClassName?: string slotVariant?: "default" | "success" | "destructive" defaultLabel?: string className?: string } const DAYS = [ "Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday", ] function timeToMinutes(time: string) { const [hours, minutes] = time.split(":").map(Number) return hours * 60 + minutes } function minutesToTime(minutes: number) { const hours = Math.floor(minutes / 60) const remainingMinutes = minutes % 60 return `${hours.toString().padStart(2, "0")}:${remainingMinutes .toString() .padStart(2, "0")}` } function formatDisplayTime(time: string, useAmPm: boolean) { if (!useAmPm) return time const [hours, minutes] = time.split(":").map(Number) const period = hours >= 12 ? "PM" : "AM" const displayHours = hours % 12 || 12 return `${displayHours}:${minutes.toString().padStart(2, "0")} ${period}` } function mergeAdjacentSpans(spans: TimeSpan[]): TimeSpan[] { if (spans.length === 0) return spans const byDay = new Map() spans.forEach((span) => { const daySpans = byDay.get(span.week_day) ?? [] daySpans.push(span) byDay.set(span.week_day, daySpans) }) const merged: TimeSpan[] = [] byDay.forEach((daySpans) => { const sorted = [...daySpans].sort( (left, right) => timeToMinutes(left.start_time) - timeToMinutes(right.start_time) ) let current = sorted[0] for (let index = 1; index < sorted.length; index += 1) { const next = sorted[index] if (current.end_time === next.start_time) { current = { ...current, end_time: next.end_time, } } else { merged.push(current) current = next } } merged.push(current) }) return merged } function useCalendarCreation({ containerRef, timeIncrements, startTime, endTime, events, disabledEvents = [], onCreate, dayIndex, isDayDisabled = false, }: { containerRef: React.RefObject timeIncrements: number startTime: number endTime: number events: TimeSpan[] disabledEvents?: TimeSpan[] onCreate: (dayIndex: number, start: number, end: number) => void dayIndex: number isDayDisabled?: boolean }) { const [isCreating, setIsCreating] = React.useState(false) const [creationStart, setCreationStart] = React.useState(null) const [currentMouseY, setCurrentMouseY] = React.useState(null) const totalMinutes = (endTime - startTime) * 60 const startOffset = startTime * 60 const sortedConstraints = React.useMemo(() => { return [...events, ...disabledEvents].sort( (left, right) => timeToMinutes(left.start_time) - timeToMinutes(right.start_time) ) }, [disabledEvents, events]) function getMinutesFromY(y: number) { if (!containerRef.current) return 0 const rect = containerRef.current.getBoundingClientRect() const relativeY = y - rect.top const percentage = Math.max(0, Math.min(1, relativeY / rect.height)) const minutes = percentage * totalMinutes + startOffset return Math.round(minutes / timeIncrements) * timeIncrements } function handlePointerDown(event: React.PointerEvent) { if (isDayDisabled) return if (event.target !== event.currentTarget) return event.preventDefault() containerRef.current?.setPointerCapture(event.pointerId) const startMinutes = getMinutesFromY(event.clientY) const isOverlapping = sortedConstraints.some((constraint) => { const constraintStart = timeToMinutes(constraint.start_time) const constraintEnd = timeToMinutes(constraint.end_time) return startMinutes >= constraintStart && startMinutes < constraintEnd }) if (isOverlapping) return const previousEvent = sortedConstraints .filter( (constraint) => timeToMinutes(constraint.end_time) <= startMinutes ) .pop() const nextEvent = sortedConstraints.find( (constraint) => timeToMinutes(constraint.start_time) >= startMinutes ) const minStartMinutes = previousEvent ? timeToMinutes(previousEvent.end_time) : startOffset const maxEndMinutes = nextEvent ? timeToMinutes(nextEvent.start_time) : endTime * 60 setCreationStart(startMinutes) setCurrentMouseY(startMinutes) setIsCreating(true) function handlePointerMove(pointerEvent: PointerEvent) { const currentMinutes = getMinutesFromY(pointerEvent.clientY) const clampedMinutes = Math.max( minStartMinutes, Math.min(currentMinutes, maxEndMinutes) ) setCurrentMouseY(clampedMinutes) } function handlePointerUp(pointerEvent: PointerEvent) { const currentMinutes = getMinutesFromY(pointerEvent.clientY) let finalStart = Math.min(startMinutes, currentMinutes) let finalEnd = Math.max(startMinutes, currentMinutes) finalStart = Math.max(minStartMinutes, finalStart) finalEnd = Math.min(maxEndMinutes, finalEnd) if (finalEnd - finalStart < timeIncrements) { finalEnd = Math.min(finalStart + timeIncrements, maxEndMinutes) } if (finalEnd - finalStart <= timeIncrements) { finalEnd = Math.min(finalStart + 60, maxEndMinutes) } if (finalEnd > finalStart) { onCreate(dayIndex, finalStart, finalEnd) } setIsCreating(false) setCreationStart(null) setCurrentMouseY(null) containerRef.current?.releasePointerCapture(pointerEvent.pointerId) window.removeEventListener("pointermove", handlePointerMove) window.removeEventListener("pointerup", handlePointerUp) } window.addEventListener("pointermove", handlePointerMove) window.addEventListener("pointerup", handlePointerUp) } return { isCreating, creationStart, currentMouseY, totalMinutes, startOffset, sortedConstraints, handlePointerDown, } } const AvailabilityDragContext = React.createContext<{ activeId: string | null activeSpan: TimeSpan | null overDayIndex: number | null deltaY: number timeIncrements: number isDropValid: boolean } | null>(null) export function Availability({ value = [], onValueChange, disabled = [], days = [0, 1, 2, 3, 4, 5, 6], showAllDays = true, timeIncrements = 30, startTime = 7, endTime = 23, useAmPm = false, mergeAdjacent = true, slotClassName = "bg-muted", slotVariant = "default", defaultLabel = "Available slot", className, }: AvailabilityProps) { const [internalValue, setInternalValue] = React.useState(value) const [activeId, setActiveId] = React.useState(null) const [overDayIndex, setOverDayIndex] = React.useState(null) const [deltaY, setDeltaY] = React.useState(0) const [isDropValid, setIsDropValid] = React.useState(true) const mainContainerRef = React.useRef(null) const renderedDays = React.useMemo(() => { return showAllDays ? [0, 1, 2, 3, 4, 5, 6] : days }, [days, showAllDays]) React.useEffect(() => { setInternalValue(value) }, [value]) function updateValue(newValue: TimeSpan[], shouldMerge = false) { const finalValue = shouldMerge && mergeAdjacent ? mergeAdjacentSpans(newValue) : newValue setInternalValue(finalValue) onValueChange?.(finalValue) } function handleResize( id: string, newStart: string, newEnd: string, isComplete = false ) { updateValue( internalValue.map((span) => { if (span.id === id) { return { ...span, start_time: newStart, end_time: newEnd } } return span }), isComplete ) } function handleCreate( dayIndex: number, startMinutes: number, endMinutes: number ) { const newSpan: TimeSpan = { id: nanoid(), week_day: dayIndex, start_time: minutesToTime(startMinutes), end_time: minutesToTime(endMinutes), active: true, label: defaultLabel, } updateValue([...internalValue, newSpan], true) } function handleDelete(id: string) { updateValue( internalValue.filter((span) => span.id !== id), true ) } function handleMove( id: string, newStart: string, newEnd: string, newDayIndex: number ) { updateValue( internalValue.map((span) => { if (span.id === id) { return { ...span, start_time: newStart, end_time: newEnd, week_day: newDayIndex, } } return span }), true ) } function validatePlacement( span: TimeSpan, targetDayIndex: number, deltaY: number, containerHeight: number ): { isValid: boolean; newStart: number; duration: number } { const totalMinutes = (endTime - startTime) * 60 const pixelsPerMinute = containerHeight / totalMinutes const deltaMinutesRaw = deltaY / pixelsPerMinute const deltaMinutes = Math.round(deltaMinutesRaw / timeIncrements) * timeIncrements const originalStart = timeToMinutes(span.start_time) const duration = timeToMinutes(span.end_time) - originalStart const newStart = originalStart + deltaMinutes const newEnd = newStart + duration const dayStartMinutes = startTime * 60 const dayEndMinutes = endTime * 60 if (newStart < dayStartMinutes || newEnd > dayEndMinutes) { return { isValid: false, newStart, duration } } if (!days.includes(targetDayIndex)) { return { isValid: false, newStart, duration } } const dayEvents = internalValue.filter( (event) => event.week_day === targetDayIndex && event.id !== span.id ) const hasEventOverlap = dayEvents.some((event) => { const eventStart = timeToMinutes(event.start_time) const eventEnd = timeToMinutes(event.end_time) return newStart < eventEnd && newEnd > eventStart }) if (hasEventOverlap) { return { isValid: false, newStart, duration } } const dayDisabled = disabled.filter( (event) => event.week_day === targetDayIndex ) const hasDisabledOverlap = dayDisabled.some((event) => { const eventStart = timeToMinutes(event.start_time) const eventEnd = timeToMinutes(event.end_time) return newStart < eventEnd && newEnd > eventStart }) if (hasDisabledOverlap) { return { isValid: false, newStart, duration } } return { isValid: true, newStart, duration } } const sensors = useSensors( useSensor(PointerSensor, { activationConstraint: { distance: 8, }, }) ) function checkValidity( activeSpanId: string, overId: string | number | undefined, currentDeltaY: number ) { if (!mainContainerRef.current || !overId) { setIsDropValid(false) return } const span = internalValue.find((item) => item.id === activeSpanId) if (!span) return const targetDayIndex = Number.parseInt( overId.toString().replace("day-", ""), 10 ) if (Number.isNaN(targetDayIndex)) { setIsDropValid(false) return } const result = validatePlacement( span, targetDayIndex, currentDeltaY, mainContainerRef.current.clientHeight ) setIsDropValid(result.isValid) } function handleDragStart(event: DragStartEvent) { setActiveId(event.active.id as string) setDeltaY(0) setOverDayIndex(null) setIsDropValid(true) } function handleDragMove(event: DragMoveEvent) { setDeltaY(event.delta.y) checkValidity(event.active.id as string, event.over?.id, event.delta.y) } function handleDragOver(event: DragOverEvent) { if (event.over) { const nextDayIndex = Number.parseInt( event.over.id.toString().replace("day-", ""), 10 ) setOverDayIndex(Number.isNaN(nextDayIndex) ? null : nextDayIndex) } else { setOverDayIndex(null) } checkValidity(event.active.id as string, event.over?.id, event.delta.y) } function handleDragCancel() { setActiveId(null) setOverDayIndex(null) setDeltaY(0) setIsDropValid(true) } function handleDragEnd(event: DragEndEvent) { const { active, delta, over } = event setActiveId(null) setOverDayIndex(null) setDeltaY(0) setIsDropValid(true) const span = internalValue.find((item) => item.id === active.id) if (!span || !mainContainerRef.current || !over) return const targetDayIndex = Number.parseInt( over.id.toString().replace("day-", ""), 10 ) if (Number.isNaN(targetDayIndex)) return const { isValid, newStart, duration } = validatePlacement( span, targetDayIndex, delta.y, mainContainerRef.current.clientHeight ) if (!isValid) return handleMove( span.id, minutesToTime(newStart), minutesToTime(newStart + duration), targetDayIndex ) } const activeSpan = React.useMemo( () => internalValue.find((span) => span.id === activeId) ?? null, [activeId, internalValue] ) return (

{renderedDays.map((dayIndex) => { const isActive = days.includes(dayIndex) return (

{DAYS[dayIndex]}

) })}

{Array.from({ length: endTime - startTime }).map((_, index) => { const hour = startTime + index return (

{formatDisplayTime(`${hour}:00`, useAmPm)}

) })}

{Array.from({ length: endTime - startTime }).map((_, index) => (

))}

{renderedDays.map((dayIndex) => { const isActive = days.includes(dayIndex) return ( event.week_day === dayIndex )} disabledEvents={disabled.filter( (event) => event.week_day === dayIndex )} onCreate={handleCreate} onResize={handleResize} onDelete={handleDelete} useAmPm={useAmPm} isDayDisabled={!isActive} slotClassName={slotClassName} slotVariant={slotVariant} /> ) })}

) } interface DayColumnProps { dayIndex: number startTime: number endTime: number timeIncrements: number events: TimeSpan[] disabledEvents?: TimeSpan[] onCreate: (dayIndex: number, start: number, end: number) => void onResize: ( id: string, start: string, end: string, isComplete?: boolean ) => void onDelete: (id: string) => void useAmPm: boolean isDayDisabled?: boolean slotClassName?: string slotVariant?: "default" | "success" | "destructive" } function DayColumn({ dayIndex, startTime, endTime, timeIncrements, events, disabledEvents = [], onCreate, onResize, onDelete, useAmPm, isDayDisabled = false, slotClassName = "bg-muted", slotVariant = "default", }: DayColumnProps) { const containerRef = React.useRef(null) const [containerHeight, setContainerHeight] = React.useState(0) const context = React.useContext(AvailabilityDragContext) const { setNodeRef } = useDroppable({ id: `day-${dayIndex}`, disabled: isDayDisabled, }) function mergedRef(node: HTMLDivElement | null) { containerRef.current = node setContainerHeight(node?.clientHeight ?? 0) setNodeRef(node) } const { isCreating, creationStart, currentMouseY, totalMinutes, startOffset, sortedConstraints, handlePointerDown, } = useCalendarCreation({ containerRef, timeIncrements, startTime, endTime, events, disabledEvents, onCreate, dayIndex, isDayDisabled, }) const showGhost = context?.activeId && context.overDayIndex === dayIndex && containerHeight > 0 && !isDayDisabled const ghostStyle = React.useMemo(() => { if (!showGhost || !context?.activeSpan || containerHeight <= 0) return null const span = context.activeSpan const pixelsPerMinute = containerHeight / totalMinutes const deltaMinutesRaw = context.deltaY / pixelsPerMinute const deltaMinutes = Math.round(deltaMinutesRaw / timeIncrements) * timeIncrements const originalStart = timeToMinutes(span.start_time) const duration = timeToMinutes(span.end_time) - originalStart const newStart = originalStart + deltaMinutes return { top: `${((newStart - startOffset) / totalMinutes) * 100}%`, height: `${(duration / totalMinutes) * 100}%`, } }, [ context?.activeSpan, context?.deltaY, containerHeight, showGhost, startOffset, timeIncrements, totalMinutes, ]) return (

{isDayDisabled ? (

) : null} {disabledEvents.map((disabledEvent) => { const startMinutes = timeToMinutes(disabledEvent.start_time) const endMinutes = timeToMinutes(disabledEvent.end_time) const duration = endMinutes - startMinutes return (

) })} {ghostStyle ? (

) : null} {events.map((event) => { const otherConstraints = sortedConstraints.filter( (constraint) => constraint.id !== event.id ) const eventStart = timeToMinutes(event.start_time) const eventEnd = timeToMinutes(event.end_time) const previousItem = otherConstraints .filter( (constraint) => timeToMinutes(constraint.end_time) <= eventStart ) .pop() const nextItem = otherConstraints.find( (constraint) => timeToMinutes(constraint.start_time) >= eventEnd ) const minStart = previousItem ? timeToMinutes(previousItem.end_time) : startOffset const maxEnd = nextItem ? timeToMinutes(nextItem.start_time) : endTime * 60 const isDragging = context?.activeId === event.id return ( ) })} {isCreating && creationStart !== null && currentMouseY !== null ? (

) : null}

) } interface DraggableTimeSpanProps { span: TimeSpan startTime: number endTime: number minStart: number maxEnd: number onResize: ( id: string, start: string, end: string, isComplete?: boolean ) => void onDelete: (id: string) => void useAmPm: boolean timeIncrements: number containerRef: React.RefObject isDragging?: boolean isLocked?: boolean slotClassName?: string slotVariant?: "default" | "success" | "destructive" } function DraggableTimeSpan({ span, startTime, endTime, minStart, maxEnd, onResize, onDelete, useAmPm, timeIncrements, containerRef, isDragging, isLocked = false, slotClassName = "bg-muted", slotVariant = "default", }: DraggableTimeSpanProps) { const { attributes, listeners, setNodeRef, transform } = useDraggable({ id: span.id, data: span, disabled: isLocked, }) const startMinutes = timeToMinutes(span.start_time) const endMinutes = timeToMinutes(span.end_time) const totalMinutes = (endTime - startTime) * 60 const startOffset = startTime * 60 const durationMinutes = endMinutes - startMinutes const style: React.CSSProperties = { top: `${((startMinutes - startOffset) / totalMinutes) * 100}%`, height: `${(durationMinutes / totalMinutes) * 100}%`, transform: isDragging && transform ? CSS.Translate.toString(transform) : undefined, zIndex: isDragging ? 40 : 1, opacity: isLocked ? 0.6 : 1, cursor: isDragging ? "grabbing" : undefined, } function handleResizeStart( event: React.PointerEvent, edge: "top" | "bottom" ) { if (isLocked) return event.stopPropagation() event.preventDefault() const target = event.target as HTMLElement target.setPointerCapture(event.pointerId) const initialY = event.clientY const initialStart = startMinutes const initialEnd = endMinutes function handlePointerMove(pointerEvent: PointerEvent) { if (!containerRef.current) return const containerHeight = containerRef.current.clientHeight const pixelsPerMinute = containerHeight / totalMinutes const deltaY = pointerEvent.clientY - initialY const deltaMinutes = Math.round(deltaY / pixelsPerMinute / timeIncrements) * timeIncrements if (deltaMinutes === 0) return let newStart = initialStart let newEnd = initialEnd if (edge === "top") { newStart += deltaMinutes if (newStart < minStart) newStart = minStart if (newStart >= newEnd - timeIncrements) { newStart = newEnd - timeIncrements } } else { newEnd += deltaMinutes if (newEnd > maxEnd) newEnd = maxEnd if (newEnd <= newStart + timeIncrements) { newEnd = newStart + timeIncrements } } onResize(span.id, minutesToTime(newStart), minutesToTime(newEnd), false) } function handlePointerUp(pointerEvent: PointerEvent) { target.releasePointerCapture(pointerEvent.pointerId) if (containerRef.current) { const containerHeight = containerRef.current.clientHeight const pixelsPerMinute = containerHeight / totalMinutes const deltaY = pointerEvent.clientY - initialY const deltaMinutes = Math.round(deltaY / pixelsPerMinute / timeIncrements) * timeIncrements let newStart = initialStart let newEnd = initialEnd if (edge === "top") { newStart += deltaMinutes if (newStart < minStart) newStart = minStart if (newStart >= newEnd - timeIncrements) { newStart = newEnd - timeIncrements } } else { newEnd += deltaMinutes if (newEnd > maxEnd) newEnd = maxEnd if (newEnd <= newStart + timeIncrements) { newEnd = newStart + timeIncrements } } onResize(span.id, minutesToTime(newStart), minutesToTime(newEnd), true) } window.removeEventListener("pointermove", handlePointerMove) window.removeEventListener("pointerup", handlePointerUp) } window.addEventListener("pointermove", handlePointerMove) window.addEventListener("pointerup", handlePointerUp) } const canResize = !isLocked const slotVariantClassName = slotVariant === "success" ? "border-emerald-400/60 bg-emerald-500/15 text-emerald-800 dark:text-emerald-200" : slotVariant === "destructive" ? "border-red-300! bg-red-50! text-red-600! dark:border-red-800/80! dark:bg-red-950/30! dark:text-red-300!" : "" return (

{canResize ? (

handleResizeStart(event, "top")} /> ) : null}

onDelete(span.id) : undefined} /> {canResize ? (

handleResizeStart(event, "bottom")} /> ) : null}

) } function TimeSpanCard({ span, useAmPm, duration, onDelete, }: { span: TimeSpan useAmPm: boolean duration?: number onDelete?: () => void }) { const calculatedDuration = duration ?? (timeToMinutes(span.end_time) - timeToMinutes(span.start_time)) / 60 return (

{span.label ?? "Available slot"}

{formatDisplayTime(span.start_time, useAmPm)}

{calculatedDuration.toFixed(1).replace(".0", "")}h

{onDelete ? ( ) : null}

{!onDelete ? : null}

{formatDisplayTime(span.end_time, useAmPm)}

) } 4d:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[["$","div",null,{"className":"flex shrink-0 items-start gap-3","children":[["$","div",null,{"className":"flex max-h-28 min-w-0 flex-1 flex-wrap items-center gap-2 overflow-y-auto","children":[["$","ul",null,{"className":"flex min-w-0 flex-wrap gap-2","aria-label":"Package dependencies","children":[["$","li","@dnd-kit/core",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/%40dnd-kit%2Fcore","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"@dnd-kit/core"}]]}]}],["$","li","@dnd-kit/utilities",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/%40dnd-kit%2Futilities","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"@dnd-kit/utilities"}]]}]}],["$","li","lucide-react",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/lucide-react","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"lucide-react"}]]}]}],["$","li","nanoid",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/nanoid","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"nanoid"}]]}]}]]}],["$","$L4e",null,{"namespace":"@corr","registryDependencies":["button"]}]]}],null]}],["$","$L4f",null,{"files":[{"path":"registry/corr/components/availability.tsx","content":"$50","type":"registry:component"}],"className":"h-[70svh] min-h-80"}]]}]