51: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"] 52: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"] 53:T3630,'use client'; import { format as formatDate } from 'date-fns'; import { Calendar as CalendarIcon } from 'lucide-react'; import * as React from 'react'; import type { DateRange } from 'react-day-picker'; import { fieldHaloZero, focusRing, focusRingField, openRing, transitionBase } from '@/lib/recipes'; import { cn } from '@/lib/utils'; import { Button } from '@/components/ui/button'; import { Calendar } from '@/components/ui/calendar'; import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle } from '@/components/ui/dialog'; import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover'; import { useLabels, useLocale, usePreset, type DesignSystemLocale } from '@/components/ui/labels-context'; // explicit file path; date-fns 2 has no exports map, so directory imports break Node ESM consumers (vitest, SSR) import de from 'date-fns/locale/de/index.js'; export type { DateRange }; export type DatePickerMode = 'single' | 'range'; export type DatePickerValue = Date | DateRange | undefined; export interface DatePickerPreset { label: string; // A date for single mode or a range for range mode. value: Date | DateRange; } // Token-driven day grid for react-day-picker (the plain Calendar keeps its own look). export const datePickerCalendarClassNames = { months: 'flex flex-col gap-4 sm:flex-row', month: 'flex flex-col gap-3', caption: 'relative flex h-control-md items-center justify-center', caption_label: 'typography-ui-semibold text-foreground', nav: 'flex items-center', nav_button: cn( 'inline-flex h-control-sm w-control-sm items-center justify-center rounded-item bg-transparent p-0 text-icon-subtle transition-colors hover:bg-muted hover:text-icon-default motion-reduce:transition-none', focusRing, ), nav_button_previous: 'absolute left-0', nav_button_next: 'absolute right-0', table: 'w-full border-collapse', head_row: 'flex', head_cell: 'h-calendar-cell w-calendar-cell typography-ui-medium font-normal text-text-subtle', row: 'mt-1 flex w-full', cell: 'relative h-calendar-cell w-calendar-cell p-0 text-center', day: cn( 'inline-flex h-calendar-cell w-calendar-cell items-center justify-center rounded-full p-0 typography-ui text-foreground transition-colors hover:bg-muted motion-reduce:transition-none', focusRing, ), day_selected: 'bg-primary text-primary-foreground hover:bg-primary hover:text-primary-foreground', day_today: 'border border-solid border-border-bold', day_outside: 'text-text-disabled', day_disabled: 'pointer-events-none text-text-disabled opacity-disabled', day_range_start: '', day_range_end: '', day_range_middle: '!rounded-none !bg-background-brand-subtle !text-foreground', day_hidden: 'invisible', }; const isRange = (value: DatePickerValue): value is DateRange => value != null && !(value instanceof Date); const defaultFormat = (date: Date, locale: DesignSystemLocale = 'en') => locale === 'de' ? formatDate(date, 'd. MMM yyyy', { locale: de }) : formatDate(date, 'MMM d, yyyy'); export const formatDatePickerValue = ( value: DatePickerValue, formatValue?: (date: Date) => string, locale: DesignSystemLocale = 'en', ): string | undefined => { const format = formatValue ?? ((date: Date) => defaultFormat(date, locale)); if (value == null) return undefined; if (value instanceof Date) return format(value); if (!value.from) return undefined; return value.to ? `${format(value.from)} - ${format(value.to)}` : `${format(value.from)} -`; }; export interface DatePickerPanelProps { mode?: DatePickerMode; value?: DatePickerValue; onValueChange?: (value: DatePickerValue) => void; presets?: DatePickerPreset[]; // Months shown side by side. Defaults to 2 in range mode, 1 in single mode. numberOfMonths?: number; // Footer buttons. Provide `onApply` to show the Cancel / Apply row. onApply?: () => void; onCancel?: () => void; applyLabel?: string; cancelLabel?: string; disabledDays?: React.ComponentProps['disabled']; fromDate?: Date; toDate?: Date; defaultMonth?: Date; className?: string; } // Figma "_Date picker menu": optional preset list, one or two month grids and an optional action row. const DatePickerPanel = ({ mode = 'single', value, onValueChange, presets, numberOfMonths, onApply, onCancel, applyLabel: applyLabelProp, cancelLabel: cancelLabelProp, disabledDays, fromDate, toDate, defaultMonth, className, }: DatePickerPanelProps) => { const l = useLabels(); const applyLabel = applyLabelProp ?? l.apply; const cancelLabel = cancelLabelProp ?? l.cancel; const months = numberOfMonths ?? (mode === 'range' ? 2 : 1); const calendarProps = mode === 'range' ? ({ mode: 'range', selected: isRange(value) ? value : undefined, onSelect: (next: DateRange | undefined) => onValueChange?.(next) } as const) : ({ mode: 'single', selected: value instanceof Date ? value : undefined, onSelect: (next: Date | undefined) => onValueChange?.(next) } as const); const start = defaultMonth ?? (value instanceof Date ? value : isRange(value) ? value.from : undefined); return (

{presets && presets.length > 0 ? (

) : null} )} numberOfMonths={months} showOutsideDays={false} defaultMonth={start} disabled={disabledDays} fromDate={fromDate} toDate={toDate} classNames={datePickerCalendarClassNames} className="p-3" />

{onApply ? (

) : null}

); }; DatePickerPanel.displayName = 'DatePickerPanel'; interface ValueProps { mode?: DatePickerMode; value?: DatePickerValue; defaultValue?: DatePickerValue; onValueChange?: (value: DatePickerValue) => void; } const useDateValue = ({ value, defaultValue, onValueChange }: ValueProps) => { const [inner, setInner] = React.useState(defaultValue); const current = value !== undefined ? value : inner; const set = (next: DatePickerValue) => { setInner(next); onValueChange?.(next); }; return [current, set] as const; }; const isComplete = (mode: DatePickerMode, value: DatePickerValue) => (mode === 'range' ? isRange(value) && Boolean(value.from && value.to) : value instanceof Date); export interface DatePickerProps extends ValueProps, Omit { placeholder?: string; // Text format for the trigger. Receives each date. formatValue?: (date: Date) => string; disabled?: boolean; invalid?: boolean; readOnly?: boolean; // Shows Cancel / Apply: picking only changes a draft until Apply. actions?: boolean; open?: boolean; onOpenChange?: (open: boolean) => void; id?: string; name?: string; className?: string; 'aria-label'?: string; 'aria-labelledby'?: string; 'aria-describedby'?: string; } // Figma "Date picker dropdown": field-like trigger that opens the picker panel in a popover. const DatePicker = React.forwardRef( ( { mode = 'single', value, defaultValue, onValueChange, placeholder: placeholderProp, formatValue, disabled = false, invalid = false, readOnly = false, actions = false, open: openProp, onOpenChange, className, name, ...rest }, ref, ) => { const l = useLabels(); const locale = useLocale(); const zero = usePreset() === 'zero'; const placeholder = placeholderProp ?? l.selectDate; const [selected, setSelected] = useDateValue({ value, defaultValue, onValueChange }); const [draft, setDraft] = React.useState(selected); const [openInner, setOpenInner] = React.useState(false); const open = openProp ?? openInner; const setOpen = (next: boolean) => { if (next) setDraft(selected); setOpenInner(next); onOpenChange?.(next); }; const { presets, numberOfMonths, disabledDays, fromDate, toDate, defaultMonth, ...ariaRest } = rest; const text = formatDatePickerValue(selected, formatValue, locale); const handleChange = (next: DatePickerValue) => { if (actions) { setDraft(next); return; } setSelected(next); if (isComplete(mode, next)) setOpen(false); }; return ( {name ? : null} { setSelected(draft); setOpen(false); } : undefined } onCancel={() => setOpen(false)} /> ); }, ); DatePicker.displayName = 'DatePicker'; export interface DatePickerModalProps extends ValueProps, Omit { open?: boolean; onOpenChange?: (open: boolean) => void; title?: string; description?: string; onApply?: (value: DatePickerValue) => void; } // Figma "Date picker modal": the same panel in a dialog, for small screens. Cancel / Apply always shown. const DatePickerModal = ({ mode = 'single', value, defaultValue, onValueChange, open, onOpenChange, title: titleProp, description, onApply, ...panel }: DatePickerModalProps) => { const l = useLabels(); const title = titleProp ?? l.selectDate; const [selected, setSelected] = useDateValue({ value, defaultValue, onValueChange }); const [draft, setDraft] = React.useState(selected); React.useEffect(() => { if (open) setDraft(selected); // The draft restarts from the committed value each time the dialog opens. // eslint-disable-next-line react-hooks/exhaustive-deps }, [open]); return ( ); }; DatePickerModal.displayName = 'DatePickerModal'; export { DatePicker, DatePickerModal, DatePickerPanel }; 50:["$","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@^2.30.0",{"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@^2.30.0"}]]}]}],["$","li","lucide-react@^0.379.0",{"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@^0.379.0"}]]}]}],["$","li","react-day-picker@^8.9.1",{"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@^8.9.1"}]]}]}]]}],["$","$L51",null,{"namespace":"@getitdone","registryDependencies":["https://zero-design.itdone.de/r/button.json","https://zero-design.itdone.de/r/calendar.json","https://zero-design.itdone.de/r/dialog.json","https://zero-design.itdone.de/r/labels-context.json","https://zero-design.itdone.de/r/popover.json","https://zero-design.itdone.de/r/recipes.json","https://zero-design.itdone.de/r/utils.json","https://zero-design.itdone.de/r/theme.json"]}]]}],null]}],["$","$L52",null,{"files":[{"path":"registry/ui/date-picker.tsx","content":"$53","type":"registry:ui"}],"className":"h-[70svh] min-h-80"}]]}]