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:T19be,"use client"; import { format } from "date-fns"; import { ClockIcon } from "lucide-react"; import { useState } from "react"; import { Autocomplete, AutocompleteInput, AutocompleteItem, AutocompleteList, AutocompletePopup, } from "@/registry/default/ui/autocomplete"; import { Calendar } from "@/registry/default/ui/calendar"; import { Field, FieldLabel } from "@/registry/default/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 Particle() { 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={

); } 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","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"}]]}]}]]}],["$","$L4e",null,{"namespace":"@coss","registryDependencies":["@coss/calendar","@coss/autocomplete","@coss/field"]}]]}],null]}],["$","$L4f",null,{"files":[{"path":"registry/default/particles/p-calendar-25.tsx","content":"$50","type":"registry:block"}],"className":"h-[70svh] min-h-80"}]]}]