4b: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"] 4c: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"] 4d:T3383,"use client"; import * as React from "react"; import type { DateField as DateFieldDef } from "@buildnbuzz/form-react"; import { useDataField } from "@buildnbuzz/form-react"; import { format, parse, isValid, startOfDay, addDays, startOfWeek, addWeeks, setHours, setMinutes, setSeconds, getHours, getMinutes, getSeconds, } from "date-fns"; import { IconPlaceholder } from "@/components/icon-placeholder"; import { Calendar as BaseCalendar } from "@/components/ui/calendar"; import { Popover, PopoverContent, PopoverTrigger, } from "@/components/ui/popover"; import { InputGroup, InputGroupAddon, InputGroupButton, InputGroupInput, } from "@/components/ui/input-group"; import { Field, FieldContent, FieldDescription, FieldError, FieldGroup, FieldLabel, } from "@/components/ui/field"; import { cn } from "@/lib/utils"; // --------------------------------------------------------------------------- // UI options // --------------------------------------------------------------------------- interface DatePreset { label: string; value: string | (() => string); } interface DateUi { /** date-fns display format for the calendar trigger. Defaults to `"MM/dd/yyyy"`. */ format?: string; /** date-fns format for manual text input. Defaults to `format`. */ inputFormat?: string; /** Quick-select presets. `true` uses built-in Today/Tomorrow/Next Week. */ presets?: boolean | DatePreset[]; /** Time picker config (only used when `field.withTime` is true). */ timePicker?: | boolean | { /** Minute interval for the time input step. Defaults to `1`. */ interval?: number; /** Use 24-hour format. Defaults to `true`. */ use24hr?: boolean; /** Include seconds. Defaults to `false`. */ includeSeconds?: boolean; }; /** Auto-focus the text input on mount. */ autoFocus?: boolean; /** className applied to ``. */ className?: string; /** Inline width applied to ``. */ width?: string | number; /** Controls required asterisk visibility. */ asterisk?: boolean; } // --------------------------------------------------------------------------- // Helpers // --------------------------------------------------------------------------- const DEFAULT_PRESETS: DatePreset[] = [ { label: "Today", value: () => startOfDay(new Date()).toISOString() }, { label: "Tomorrow", value: () => startOfDay(addDays(new Date(), 1)).toISOString(), }, { label: "Next Week", value: () => startOfWeek(addWeeks(new Date(), 1), { weekStartsOn: 1 }).toISOString(), }, ]; function isoToDate(iso: string | undefined | null): Date | undefined { if (!iso) return undefined; const d = new Date(iso); return isValid(d) ? d : undefined; } function dateToIso(date: Date, withTime: boolean): string { if (withTime) return date.toISOString(); return format(date, "yyyy-MM-dd"); } // --------------------------------------------------------------------------- // DateField // --------------------------------------------------------------------------- export function DateField() { const { fieldApi, field, isDisabled, isReadOnly, isRequired, label, placeholder, description, errors, isInvalid, descriptionId, errorId, ariaDescribedBy, handleBlur, } = useDataField(); const ui = field.ui as DateUi | undefined; const withTime = field.withTime ?? false; const displayFormat = ui?.format ?? "MM/dd/yyyy"; const inputFormat = ui?.inputFormat ?? displayFormat; const timePickerConfig = withTime ? (ui?.timePicker ?? true) : undefined; const includeSeconds = typeof timePickerConfig === "object" ? timePickerConfig.includeSeconds === true : false; const timeInterval = typeof timePickerConfig === "object" && timePickerConfig.interval ? timePickerConfig.interval : 1; const timeStep = includeSeconds ? 1 : timeInterval * 60; const presetsConfig = ui?.presets; const presets: DatePreset[] | null = presetsConfig === true ? DEFAULT_PRESETS : Array.isArray(presetsConfig) ? presetsConfig : null; const minDate = isoToDate(field.minDate); const maxDate = isoToDate(field.maxDate); const storedValue = fieldApi.state.value as string | undefined; const dateValue = isoToDate(storedValue); const [isOpen, setIsOpen] = React.useState(false); const [inputText, setInputText] = React.useState(() => dateValue ? format(dateValue, inputFormat) : "", ); const [lastSynced, setLastSynced] = React.useState( dateValue, ); // Keep inputText in sync when value changes externally if (dateValue?.getTime() !== lastSynced?.getTime()) { setLastSynced(dateValue); const formatted = dateValue ? format(dateValue, inputFormat) : ""; if (formatted !== inputText) setInputText(formatted); } const width = ui?.width; const widthStyle = width ? { width: typeof width === "number" ? `${width}px` : width, flex: "0 1 auto", } : undefined; const clampDate = (date: Date): Date => { if (minDate && date < startOfDay(minDate)) return minDate; if (maxDate && date > startOfDay(maxDate)) return maxDate; return date; }; const preserveTime = (next: Date): Date => { if (!dateValue || !withTime) return next; let d = setHours(next, getHours(dateValue)); d = setMinutes(d, getMinutes(dateValue)); d = setSeconds(d, getSeconds(dateValue)); return d; }; const commit = (date: Date) => { fieldApi.handleChange(dateToIso(date, withTime)); }; const handleDateSelect = (date: Date | undefined) => { if (!date) { fieldApi.handleChange(undefined as unknown as string); return; } commit(clampDate(preserveTime(date))); if (!withTime) setIsOpen(false); }; const handleTimeChange = (e: React.ChangeEvent) => { const [h, m, s] = e.target.value.split(":").map(Number); const base = dateValue ?? new Date(); let next = setHours(base, h || 0); next = setMinutes(next, m || 0); next = setSeconds(next, s || 0); commit(clampDate(next)); }; const handleClear = (e: React.MouseEvent) => { e.stopPropagation(); fieldApi.handleChange(undefined as unknown as string); }; const handlePreset = (preset: DatePreset) => { const iso = typeof preset.value === "function" ? preset.value() : preset.value; const date = isoToDate(iso); if (!date) return; commit(clampDate(preserveTime(date))); if (!withTime) setIsOpen(false); }; const handleInputChange = (e: React.ChangeEvent) => { setInputText(e.target.value); }; const handleInputBlur = () => { handleBlur(); if (!inputText.trim()) { if (!isRequired) fieldApi.handleChange(undefined as unknown as string); return; } const parsed = parse(inputText, inputFormat, new Date()); if (isValid(parsed)) { const clamped = clampDate(preserveTime(parsed)); if (minDate && parsed < startOfDay(minDate)) { setInputText(dateValue ? format(dateValue, inputFormat) : ""); return; } if (maxDate && parsed > startOfDay(maxDate)) { setInputText(dateValue ? format(dateValue, inputFormat) : ""); return; } commit(clamped); } else { setInputText(dateValue ? format(dateValue, inputFormat) : ""); } }; const timeValue = dateValue ? includeSeconds ? format(dateValue, "HH:mm:ss") : format(dateValue, "HH:mm") : ""; const disabledMatchers = [ ...(minDate ? [{ before: startOfDay(minDate) }] : []), ...(maxDate ? [{ after: startOfDay(maxDate) }] : []), ]; const calendarPopover = (

{presets && presets.length > 0 && (

{presets.map((preset, i) => ( handlePreset(preset)} > {preset.label} ))}

)}

); const dateInput = ( {calendarPopover} {!isRequired && !isDisabled && !isReadOnly && dateValue && ( )} ); const content = withTime ? (

Date {dateInput}

Time

) : ( dateInput ); return ( {label && ( {label} {isRequired && ui?.asterisk !== false ? ( * ) : null} )} {content} {description && !isInvalid && ( {description} )} {isInvalid && } ); } 4a:["$","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"}]]}]}]]}],["$","$L4b",null,{"namespace":"@buzzform","registryDependencies":["@buzzform/init","popover","calendar","input","input-group","field"]}]]}],null]}],["$","$L4c",null,{"files":[{"path":"registry/shadcn/fields/date.tsx","content":"$4d","type":"registry:component","target":"components/buzzform/fields/date.tsx"}],"className":"h-[70svh] min-h-80"}]]}]