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:T4a04,'use client' import { IconCalendarEvent, IconClock, IconAdjustmentsAlt, IconFilter2, IconFilterX } from '@tabler/icons-react' import { useCallback, useEffect, useMemo, useState } from 'react' import { DateSelector, formatDateValue, type DateSelectorValue } from '@/components/spaceui/date-selector' import { createFilter, Filters, type Filter, type FilterFieldConfig } from '@/components/spaceui/filters' import { endOfMonth, endOfYear, format, isEqual, startOfDay, startOfMonth, startOfYear, subDays, subMonths, subYears, } from 'date-fns' import { DateRange } from 'react-day-picker' import { cn } from '@/lib/utils' import { Button } from '@/components/ui/button' import { Calendar } from '@/components/ui/calendar' import { Dialog, DialogClose, DialogContent, DialogFooter, DialogHeader, DialogTitle, DialogTrigger, } from '@/components/ui/dialog' import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover' import { ScrollArea } from '@/components/ui/scroll-area' import { Slider } from '@/components/ui/slider' // Type for custom renderer props type CustomRendererProps = { values: unknown[] onChange: (values: unknown[]) => void autoFocus?: boolean } // Modal-based Date Selector Component function CustomModalDateSelector({ values, onChange, autoFocus }: CustomRendererProps) { const value = values?.[0] as DateSelectorValue | undefined const [open, setOpen] = useState(false) const [internalValue, setInternalValue] = useState(value) const formattedValue = value ? formatDateValue(value) : '' const displayText = formattedValue || 'Select a date' useEffect(() => { if (autoFocus) { const timer = setTimeout(() => setOpen(true), 400) return () => clearTimeout(timer) } }, [autoFocus]) useEffect(() => { if (open) { setInternalValue(value) } }, [open, value]) const handleApply = () => { onChange([internalValue]) setOpen(false) } return ( ) } // Custom Date Range Input Component function CustomDateRangeInput({ values, onChange, autoFocus }: CustomRendererProps) { const [date, setDate] = useState( values?.[0] && typeof values[0] === 'string' ? { from: new Date(values[0] as string), to: values[1] && typeof values[1] === 'string' ? new Date(values[1] as string) : undefined, } : undefined, ) const [isOpen, setIsOpen] = useState(false) useEffect(() => { if (autoFocus) { const timer = setTimeout(() => setIsOpen(true), 400) return () => clearTimeout(timer) } }, [autoFocus]) const handleApply = () => { if (date?.from) { const fromStr = date.from.toISOString().split('T')[0] const toStr = date.to ? date.to.toISOString().split('T')[0] : fromStr onChange([fromStr, toStr]) } setIsOpen(false) } const handleCancel = () => { setIsOpen(false) } const handleSelect = (selected: DateRange | undefined) => { setDate(selected) } return ( {date?.from ? ( date.to ? ( <> {format(date.from, 'LLL dd, y')} - {format(date.to, 'LLL dd, y')} ) : ( format(date.from, 'LLL dd, y') ) ) : ( Pick a date range )}

) } // Custom Date Range with Presets Input Component function CustomDateRangeWithPresetsInput({ values, onChange, autoFocus }: CustomRendererProps) { const today = useMemo(() => new Date(), []) const presets = useMemo( () => [ { label: 'Today', range: { from: today, to: today } }, { label: 'Yesterday', range: { from: subDays(today, 1), to: subDays(today, 1) }, }, { label: 'Last 7 days', range: { from: subDays(today, 6), to: today } }, { label: 'Last 30 days', range: { from: subDays(today, 29), to: today } }, { label: 'Month to date', range: { from: startOfMonth(today), to: today }, }, { label: 'Last month', range: { from: startOfMonth(subMonths(today, 1)), to: endOfMonth(subMonths(today, 1)), }, }, { label: 'Year to date', range: { from: startOfYear(today), to: today } }, { label: 'Last year', range: { from: startOfYear(subYears(today, 1)), to: endOfYear(subYears(today, 1)), }, }, ], [today], ) const [month, setMonth] = useState(today) const [date, setDate] = useState( values?.[0] && typeof values[0] === 'string' ? { from: new Date(values[0] as string), to: values[1] && typeof values[1] === 'string' ? new Date(values[1] as string) : undefined, } : undefined, ) const [selectedPreset, setSelectedPreset] = useState(null) const [isOpen, setIsOpen] = useState(false) useEffect(() => { if (autoFocus) { const timer = setTimeout(() => setIsOpen(true), 400) return () => clearTimeout(timer) } }, [autoFocus]) useEffect(() => { const matchedPreset = presets.find( (preset) => isEqual(startOfDay(preset.range.from), startOfDay(date?.from || new Date(0))) && isEqual(startOfDay(preset.range.to), startOfDay(date?.to || new Date(0))), ) setSelectedPreset(matchedPreset?.label || null) }, [date, presets]) const handleApply = () => { if (date?.from) { const fromStr = date.from.toISOString().split('T')[0] const toStr = date.to ? date.to.toISOString().split('T')[0] : fromStr onChange([fromStr, toStr]) } setIsOpen(false) } const handleCancel = () => { setIsOpen(false) } const handleSelect = (selected: DateRange | undefined) => { setDate({ from: selected?.from || undefined, to: selected?.to || undefined, }) setSelectedPreset(null) } const handlePresetSelect = (preset: (typeof presets)[0]) => { setDate(preset.range) setMonth(preset.range.from || today) setSelectedPreset(preset.label) } return ( {date?.from ? ( format(date.from, 'LLL dd, y') + (date.to ? ` - ${format(date.to, 'LLL dd, y')}` : '') ) : ( Pick a date range with presets )}

{presets.map((preset, index) => ( ))}

) } // Custom DateTime Input Component function CustomDateTimeInput({ values, onChange, autoFocus }: CustomRendererProps) { const today = new Date() const [date, setDate] = useState( values?.[0] && typeof values[0] === 'string' ? new Date(values[0] as string) : undefined, ) const [time, setTime] = useState( values?.[0] && typeof values[0] === 'string' ? new Date(values[0] as string).toTimeString().slice(0, 5) : '10:00', ) const [isOpen, setIsOpen] = useState(false) useEffect(() => { if (autoFocus) { const timer = setTimeout(() => setIsOpen(true), 400) return () => clearTimeout(timer) } }, [autoFocus]) const timeSlots = [ { time: '09:00', available: false }, { time: '09:30', available: false }, { time: '10:00', available: true }, { time: '10:30', available: true }, { time: '11:00', available: true }, { time: '11:30', available: true }, { time: '12:00', available: false }, { time: '12:30', available: true }, { time: '13:00', available: true }, { time: '13:30', available: true }, { time: '14:00', available: true }, { time: '14:30', available: false }, { time: '15:00', available: false }, { time: '15:30', available: true }, { time: '16:00', available: true }, { time: '16:30', available: true }, { time: '17:00', available: true }, { time: '17:30', available: true }, { time: '18:00', available: true }, { time: '18:30', available: true }, { time: '19:00', available: true }, { time: '19:30', available: true }, { time: '20:00', available: true }, { time: '20:30', available: true }, { time: '21:00', available: true }, { time: '21:30', available: true }, { time: '22:00', available: true }, { time: '22:30', available: true }, { time: '23:00', available: true }, { time: '23:30', available: true }, ] const handleApply = () => { if (date && time) { const dateTime = new Date(date) const [hours, minutes] = time.split(':').map(Number) dateTime.setHours(hours, minutes, 0, 0) onChange([dateTime.toISOString()]) } setIsOpen(false) } const handleCancel = () => { setIsOpen(false) } return ( {date ? format(date, 'PPP') + (time ? ` - ${time}` : '') : Pick a date and time}

{ if (newDate) { setDate(newDate) setTime(undefined) } }} className="p-2 sm:pe-5" disabled={[{ before: today }]} />

{date ? format(date, 'EEEE, d') : 'Pick a date'}

{timeSlots.map(({ time: timeSlot, available }) => ( ))}

) } // Custom Slider Range Input Component function CustomSliderRangeInput({ values, onChange, autoFocus }: CustomRendererProps) { const [range, setRange] = useState( values?.[0] && typeof values[0] === 'object' && values[0] !== null && 'min' in values[0] && 'max' in values[0] ? [(values[0] as { min: number; max: number }).min, (values[0] as { min: number; max: number }).max] : [0, 100], ) const [isOpen, setIsOpen] = useState(false) useEffect(() => { if (autoFocus) { const timer = setTimeout(() => setIsOpen(true), 400) return () => clearTimeout(timer) } }, [autoFocus]) const handleApply = () => { onChange([{ min: range[0], max: range[1] }]) setIsOpen(false) } const handleCancel = () => { setIsOpen(false) } return ( }> {range[0]} - {range[1]}

setRange(value as number[])} max={100} min={0} step={1} className="w-[200px]" />

0 100

) } export default function Demo() { const [filters, setFilters] = useState([createFilter('customDateRange', 'between', [])]) const [lastAddedValues, setLastAddedValues] = useState(null) const fields: FilterFieldConfig[] = [ { key: 'modalDateSelector', label: 'Modal Date Selector', icon: , type: 'custom', operators: [ { value: 'is', label: 'is' }, { value: 'is_not', label: 'is not' }, ], customRenderer: ({ values, onChange }) => ( ), }, { key: 'customDateRange', label: 'Date Range', icon: , type: 'custom', operators: [ { value: 'between', label: 'between' }, { value: 'not_between', label: 'not between' }, ], customRenderer: ({ values, onChange }) => ( ), }, { key: 'customDateRangePresets', label: 'Date Range Presets', icon: , type: 'custom', operators: [ { value: 'between', label: 'between' }, { value: 'not_between', label: 'not between' }, ], customRenderer: ({ values, onChange }) => ( ), }, { key: 'customDateTime', label: 'Date & Time', icon: , type: 'custom', operators: [ { value: 'is', label: 'is' }, { value: 'before', label: 'before' }, { value: 'after', label: 'after' }, ], customRenderer: ({ values, onChange }) => ( ), }, { key: 'customSliderRange', label: 'Slider Range', icon: , type: 'custom', className: 'w-36', operators: [ { value: 'between', label: 'between' }, { value: 'not_between', label: 'not between' }, ], customRenderer: ({ values, onChange }) => ( ), }, ] const handleFiltersChange = useCallback( (newFilters: Filter[]) => { // Check if a filter was added by comparing IDs const added = newFilters.find((nf) => !filters.some((f) => f.id === nf.id)) if (added) { setLastAddedValues(added.values) } setFilters(newFilters) }, [filters], ) return (

} />

{filters.length > 0 && ( )}

) } 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","date-fns",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/date-fns","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":"date-fns"}]]}]}],["$","li","react-day-picker",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/react-day-picker","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":"react-day-picker"}]]}]}]]}],["$","$L4c",null,{"namespace":"@spaceui","registryDependencies":["https://www.spaceui.one/r/components-spaceui-date-selector.json","https://www.spaceui.one/r/components-spaceui-filters.json","https://www.spaceui.one/r/lib-utils.json","https://www.spaceui.one/r/primitives-button.json","https://www.spaceui.one/r/primitives-calendar.json","https://www.spaceui.one/r/primitives-dialog.json","https://www.spaceui.one/r/primitives-popover.json","https://www.spaceui.one/r/primitives-scroll-area.json","https://www.spaceui.one/r/primitives-slider.json"]}]]}],null]}],["$","$L4d",null,{"files":[{"path":"src/registry/demo/components/spaceui/filters/c-filters-06/index.tsx","content":"$4e","type":"registry:component","target":"components/spaceui/filters.tsx"}],"className":"h-[70svh] min-h-80"}]]}]