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:T2ff6,"use client"; import { CopyIcon, PlusIcon, SearchIcon, XIcon } from "lucide-react"; import { useId, useState } from "react"; import { Button } from "@/registry/default/ui/button"; import { Checkbox } from "@/registry/default/ui/checkbox"; import { CheckboxGroup } from "@/registry/default/ui/checkbox-group"; import { Combobox, ComboboxEmpty, ComboboxInput, ComboboxItem, ComboboxList, ComboboxPopup, ComboboxTrigger, ComboboxValue, } from "@/registry/default/ui/combobox"; import { Group, GroupSeparator, GroupText } from "@/registry/default/ui/group"; import { Label } from "@/registry/default/ui/label"; import { Popover, PopoverPopup, PopoverTrigger, } from "@/registry/default/ui/popover"; import { Switch } from "@/registry/default/ui/switch"; import { Tooltip, TooltipPopup, TooltipProvider, TooltipTrigger, } from "@/registry/default/ui/tooltip"; const days = [ "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday", "Sunday", ] as const; type Day = (typeof days)[number]; type TimeRange = { id: number; start: string; end: string; }; const timeOptions = Array.from({ length: 96 }, (_, i) => { const hours = Math.floor(i / 4); const minutes = (i % 4) * 15; const period = hours < 12 ? "AM" : "PM"; const displayHours = hours % 12 === 0 ? 12 : hours % 12; return `${displayHours}:${minutes.toString().padStart(2, "0")} ${period}`; }); const startTimeOptions = timeOptions.slice(0, -1); const timeIndex = (time: string) => timeOptions.indexOf(time); let rangeId = 0; const createRange = (start: string, end: string): TimeRange => ({ end, id: ++rangeId, start, }); const defaultAvailability: Record = { Friday: [createRange("9:00 AM", "5:00 PM")], Monday: [createRange("9:00 AM", "5:00 PM")], Saturday: [], Sunday: [], Thursday: [createRange("9:00 AM", "5:00 PM")], Tuesday: [ createRange("9:00 AM", "1:00 PM"), createRange("3:00 PM", "5:00 PM"), ], Wednesday: [createRange("9:00 AM", "5:00 PM")], }; function TimeCombobox({ ariaLabel, id, items, onChange, value, }: { ariaLabel: string; id: string; items: string[]; onChange: (time: string) => void; value: string; }) { return ( { if (typeof time === "string") { onChange(time); } }} value={value} > } >

} />

No times found. {(time: string) => ( {time} )} ); } function CopyTimesPopover({ day, disabled, onCopy, }: { day: Day; disabled: boolean; onCopy: (targets: Day[]) => void; }) { const [open, setOpen] = useState(false); const [selectedDays, setSelectedDays] = useState([]); return ( { setOpen(nextOpen); if (nextOpen) { setSelectedDays([]); } }} open={open} > } /> } > Copy to other days

Copy times to

{days .filter((target) => target !== day) .map((target) => ( {target} ))}

); } export default function Particle() { const id = useId(); const [availability, setAvailability] = useState>(defaultAvailability); const setDayRanges = (day: Day, ranges: TimeRange[]) => { setAvailability((prev) => ({ ...prev, [day]: ranges })); }; const toggleDay = (day: Day, enabled: boolean) => { setDayRanges(day, enabled ? [createRange("9:00 AM", "5:00 PM")] : []); }; const addRange = (day: Day) => { const ranges = availability[day]; const lastRange = ranges[ranges.length - 1]; if (!lastRange) { setDayRanges(day, [createRange("9:00 AM", "5:00 PM")]); return; } const startIndex = Math.min( timeIndex(lastRange.end) + 4, timeOptions.length - 2, ); const endIndex = Math.min(startIndex + 4, timeOptions.length - 1); setDayRanges(day, [ ...ranges, createRange(timeOptions[startIndex] ?? "", timeOptions[endIndex] ?? ""), ]); }; const removeRange = (day: Day, id: number) => { setDayRanges( day, availability[day].filter((range) => range.id !== id), ); }; const updateStart = (day: Day, id: number, start: string) => { setDayRanges( day, availability[day].map((range) => { if (range.id !== id) return range; const end = timeIndex(start) >= timeIndex(range.end) ? (timeOptions[ Math.min(timeIndex(start) + 4, timeOptions.length - 1) ] ?? range.end) : range.end; return { ...range, end, start }; }), ); }; const updateEnd = (day: Day, id: number, end: string) => { setDayRanges( day, availability[day].map((range) => range.id === id ? { ...range, end } : range, ), ); }; const copyTo = (source: Day, targets: Day[]) => { setAvailability((prev) => { const next = { ...prev }; for (const target of targets) { next[target] = prev[source].map((range) => createRange(range.start, range.end), ); } return next; }); }; return (

{days.map((day) => { const ranges = availability[day]; const lastRange = ranges[ranges.length - 1]; const addDisabled = lastRange ? timeIndex(lastRange.end) >= timeOptions.length - 2 : false; return (

0} onCheckedChange={(checked) => toggleDay(day, checked)} /> {day}

{ranges.length === 0 ? (

Unavailable

) : ( ranges.map((range) => { const startId = `${id}-start-${range.id}`; const endId = `${id}-end-${range.id}`; return (

}> From updateStart(day, range.id, start) } value={range.start} /> }> To updateEnd(day, range.id, end)} value={range.end} /> removeRange(day, range.id)} size="icon-sm" variant="ghost" /> } > Delete range

); }) )}

addRange(day)} size="icon-sm" variant="ghost" /> } > Add range copyTo(day, targets)} />

); })}

); } 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","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"}]]}]}]]}],["$","$L4e",null,{"namespace":"@coss","registryDependencies":["@coss/button","@coss/checkbox","@coss/checkbox-group","@coss/combobox","@coss/group","@coss/label","@coss/popover","@coss/switch","@coss/tooltip"]}]]}],null]}],["$","$L4f",null,{"files":[{"path":"registry/default/particles/p-switch-9.tsx","content":"$50","type":"registry:block"}],"className":"h-[70svh] min-h-80"}]]}]