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:T18dd,'use client' import { format } from 'date-fns' import { IconClock } from '@tabler/icons-react' import { useState } from 'react' import { Autocomplete, AutocompleteInput, AutocompleteItem, AutocompleteList, AutocompletePopup, } from '@/components/ui/autocomplete' import { Calendar } from '@/components/ui/calendar' import { Field, FieldLabel } from '@/components/ui/field' const times = Array.from({ length: 96 }, (_, i) => { const hours = String(Math.floor(i / 4)).padStart(2, '0') const minutes = String((i % 4) * 15).padStart(2, '0') return `${hours}:${minutes}` }) function parseTime(value: string): string | null { const trimmed = value.trim() if (!trimmed) { return null } const colonMatch = /^(\d{1,2}):(\d{1,2})$/.exec(trimmed) if (colonMatch) { const hours = Number(colonMatch[1]) const minutes = Number(colonMatch[2]) if (hours > 23 || minutes > 59) { return null } return `${String(hours).padStart(2, '0')}:${String(minutes).padStart(2, '0')}` } const digits = trimmed.replace(/\D/g, '') if (digits.length === 0 || digits.length > 4) { return null } let hours: number let minutes: number if (digits.length <= 2) { hours = Number(digits) minutes = 0 } else if (digits.length === 3) { // HMM → H:MM (215 → 02:15) hours = Number(digits[0]) minutes = Number(digits.slice(1)) } else { // HHMM → HH:MM (2150 → 21:50) hours = Number(digits.slice(0, 2)) minutes = Number(digits.slice(2)) } if (hours > 23 || minutes > 59) { return null } return `${String(hours).padStart(2, '0')}:${String(minutes).padStart(2, '0')}` } /** * Live input formatting from a digit buffer: * - ≤2 digits: as-is * - 3 digits: H:MM (unpadded hour so a 4th digit can still become HHMM) * - 4 digits: HH:mm */ function formatTimeInput(value: string) { const digits = value.replace(/\D/g, '').slice(0, 4) if (digits.length <= 2) { return digits } if (digits.length === 3) { const minutes = Number(digits.slice(1)) if (minutes <= 59) { return `${digits[0]}:${digits.slice(1)}` } return digits } return parseTime(digits) ?? digits } function filterTime(item: string, query: string) { const trimmed = query.trim().toLowerCase() if (!trimmed) { return true } if (item.toLowerCase().startsWith(trimmed)) { return true } const itemDigits = item.replace(/\D/g, '') const queryDigits = trimmed.replace(/\D/g, '') if (!queryDigits) { return false } const itemHour = Number(itemDigits.slice(0, 2)) const itemMinutes = itemDigits.slice(2) // Padded "0615" and unpadded "615" so "61" matches 06:15 while typing toward 615 const itemDigitsUnpadded = `${itemHour}${itemMinutes}` if (itemDigits.startsWith(queryDigits) || itemDigitsUnpadded.startsWith(queryDigits)) { return true } if (queryDigits.length >= 3) { const normalized = parseTime(queryDigits) return normalized === item } const queryHour = Number(queryDigits) if (trimmed.includes(':')) { const minuteQuery = trimmed.split(':')[1]?.replace(/\D/g, '') ?? '' return itemHour === queryHour && (!minuteQuery || itemMinutes.startsWith(minuteQuery)) } if (queryDigits.length === 1) { return itemHour === queryHour || String(itemHour).startsWith(queryDigits) } return queryHour <= 23 && itemHour === queryHour } function applyTime(date: Date, time: string) { const parsed = parseTime(time) if (!parsed) { return date } const hours = Number(parsed.slice(0, 2)) const minutes = Number(parsed.slice(3, 5)) const next = new Date(date) next.setHours(hours, minutes, 0, 0) return next } export default function Demo() { const [date, setDate] = useState(() => { const initial = new Date() initial.setHours(12, 0, 0, 0) return initial }) const [month, setMonth] = useState(() => new Date()) const [time, setTime] = useState('12:00') const [isEditing, setIsEditing] = useState(false) const handleDaySelect = (selectedDate: Date | undefined) => { if (!selectedDate) { setDate(undefined) return } const next = applyTime(selectedDate, time) setDate(next) setMonth(next) } const handleTimeChange = (value: string) => { setIsEditing(true) const next = formatTimeInput(value) setTime(next) // List picks and completed HH:mm only — avoid committing mid-typing ("2:1" → 02:01) if (date && /^\d{2}:\d{2}$/.test(next)) { setDate(applyTime(date, next)) } } const handleTimeBlur = () => { const normalized = parseTime(time) if (normalized) { setTime(normalized) if (date) { setDate(applyTime(date, normalized)) } } else if (date) { setTime(format(date, 'HH:mm')) } setIsEditing(false) } const filterQuery = isEditing ? time : '' const matchingTimes = times.filter((item) => filterTime(item, filterQuery)) return (

Enter time filterTime(item, isEditing ? query : '')} items={times} onValueChange={handleTimeChange} openOnInputClick value={time} > { setIsEditing(false) event.currentTarget.select() }} placeholder="HH:mm" startAddon={

) } 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","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-autocomplete.json","https://www.spaceui.one/r/primitives-calendar.json","https://www.spaceui.one/r/primitives-field.json"]}]]}],null]}],["$","$L4d",null,{"files":[{"path":"src/registry/demo/primitives/calendar/p-calendar-25/index.tsx","content":"$4e","type":"registry:ui","target":"components/spaceui/calendar.tsx"}],"className":"h-[70svh] min-h-80"}]]}]