4c: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/3upr08c9vtj8w.js","/_next/static/immutable/chunks/2rwy6tq861e-y.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/2hlz_ivp-qrnh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2zoahorp76dll.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1d0aij627lbx2.js","/_next/static/immutable/chunks/1ud4fi_ghnsx-.js"],"RegistryDependencies"] 4d: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/3upr08c9vtj8w.js","/_next/static/immutable/chunks/2rwy6tq861e-y.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/2hlz_ivp-qrnh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2zoahorp76dll.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1d0aij627lbx2.js","/_next/static/immutable/chunks/1ud4fi_ghnsx-.js"],"FilesView"] 4e:T2c9a,'use client' import { IconCopy, IconPlus, IconSearch, IconX } from '@tabler/icons-react' import { useId, useState } from 'react' import { Button } from '@/components/ui/button' import { Checkbox } from '@/components/ui/checkbox' import { CheckboxGroup } from '@/components/ui/checkbox-group' import { Combobox, ComboboxEmpty, ComboboxInput, ComboboxItem, ComboboxList, ComboboxPopup, ComboboxTrigger, ComboboxValue, } from '@/components/ui/combobox' import { Group, GroupSeparator, GroupText } from '@/components/ui/group' import { Label } from '@/components/ui/label' import { Popover, PopoverPopup, PopoverTrigger } from '@/components/ui/popover' import { Switch } from '@/components/ui/switch' import { Tooltip, TooltipPopup, TooltipProvider, TooltipTrigger } from '@/components/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 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 Demo() { 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)} />

) })}

) } 4b:["$","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","@tabler/icons-react",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/%40tabler%2Ficons-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":"@tabler/icons-react"}]]}]}],["$","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"}]]}]}]]}],["$","$L4c",null,{"namespace":"@spaceui","registryDependencies":["https://www.spaceui.one/r/primitives-button.json","https://www.spaceui.one/r/primitives-checkbox.json","https://www.spaceui.one/r/primitives-checkbox-group.json","https://www.spaceui.one/r/primitives-combobox.json","https://www.spaceui.one/r/primitives-group.json","https://www.spaceui.one/r/primitives-label.json","https://www.spaceui.one/r/primitives-popover.json","https://www.spaceui.one/r/primitives-switch.json","https://www.spaceui.one/r/primitives-tooltip.json"]}]]}],null]}],["$","$L4d",null,{"files":[{"path":"src/registry/demo/primitives/switch/p-switch-08/index.tsx","content":"$4e","type":"registry:ui","target":"components/spaceui/switch.tsx"}],"className":"h-[70svh] min-h-80"}]]}]