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/1o6_421saitt-.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/1o6_421saitt-.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:T249b,"use client" import * as React from "react" import { addDays, addMonths, addWeeks, endOfMonth, endOfWeek, format, isSameDay, startOfDay, } from "date-fns" import { cn } from "cn" import { Button } from "@/components/ui/button" import { Calendar } from "@/components/ui/calendar" import { Combobox, ComboboxContent, ComboboxItem, ComboboxList, ComboboxSeparator, ComboboxTrigger, } from "@/components/ui/combobox" import { Dialog, DialogClose, DialogContent, DialogFooter, DialogHeader, DialogTitle, } from "@/components/ui/dialog" import { Field } from "@/components/ui/field" import { IconPlaceholder } from "@/app/(create)/components/icon-placeholder" type PresetDateOption = { type: "preset" id: string label: string date: Date searchText: string } type CustomDateAction = { type: "custom" id: "custom-date" label: string searchText: string } type EmptyDateOption = { type: "none" id: "no-date" label: string searchText: string } type DateOption = EmptyDateOption | PresetDateOption | CustomDateAction const noDateOption: EmptyDateOption = { type: "none", id: "no-date", label: "No date", searchText: "No date clear date remove date empty", } const customDateOption: CustomDateAction = { type: "custom", id: "custom-date", label: "Custom date...", searchText: "Custom date custom day calendar picker choose a date manual date", } type DateSelectionValue = | { type: "preset" id: string label: string date: Date } | { type: "custom" label: string date: Date } | null function CalendarGlyph({ className }: { className?: string }) { return ( ) } function CalendarSearchGlyph({ className }: { className?: string }) { return ( ) } function DateTriggerLabel({ value, placeholder, }: { value: DateSelectionValue placeholder: string }) { if (!value) { return ( {placeholder} ) } const displayLabel = value.type === "custom" ? format(value.date, "MMM d") : value.label return ( {displayLabel} ) } function DateOptionRow({ option }: { option: DateOption }) { if (option.type === "none") { return ( {option.label} ) } if (option.type === "custom") { return ( {option.label} ) } return ( {option.label} {format(option.date, "dd/MM/yyyy")} ) } function getUpcomingWeekEnd(today: Date) { const weekEnd = endOfWeek(today, { weekStartsOn: 1 }) return isSameDay(today, weekEnd) ? addWeeks(weekEnd, 1) : weekEnd } function getUpcomingMonthEnd(today: Date) { const monthEnd = endOfMonth(today) return isSameDay(today, monthEnd) ? endOfMonth(addMonths(today, 1)) : monthEnd } function DateSelectionCombobox({ value, onValueChange, }: { value: DateSelectionValue onValueChange: (value: DateSelectionValue) => void }) { const today = React.useMemo(() => startOfDay(new Date()), []) const [pickerOpen, setPickerOpen] = React.useState(false) const [draftDate, setDraftDate] = React.useState( value?.date ?? addDays(today, 1) ) const presetOptions = React.useMemo( () => [ { type: "preset", id: "tomorrow", label: "Tomorrow", date: addDays(today, 1), searchText: "Tomorrow next day due date", }, { type: "preset", id: "end-of-week", label: "End of week", date: getUpcomingWeekEnd(today), searchText: "End of week Sunday week close target", }, { type: "preset", id: "in-one-week", label: "In one week", date: addWeeks(today, 1), searchText: "In one week next week seven days target", }, { type: "preset", id: "end-of-month", label: "End of month", date: getUpcomingMonthEnd(today), searchText: "End of month month close month end target", }, { type: "preset", id: "in-one-month", label: "In one month", date: addMonths(today, 1), searchText: "In one month next month thirty days target", }, ], [today] ) const dateOptions: DateOption[] = [ noDateOption, ...presetOptions, customDateOption, ] const activePreset = value?.type === "preset" ? (presetOptions.find((option) => option.id === value.id) ?? null) : !value ? noDateOption : null React.useEffect(() => { if (!pickerOpen) { return } setDraftDate(value?.date ?? addDays(today, 1)) }, [pickerOpen, today, value]) function handleOptionChange(nextValue: DateOption | null) { if (!nextValue) { return } if (nextValue.type === "none") { onValueChange(null) return } if (nextValue.type === "custom") { requestAnimationFrame(() => setPickerOpen(true)) return } onValueChange({ type: "preset", id: nextValue.id, label: nextValue.label, date: nextValue.date, }) } function handleConfirmCustomDate() { if (!draftDate) { return } onValueChange({ type: "custom", label: format(draftDate, "MMM d"), date: draftDate, }) setPickerOpen(false) } return ( <> item.searchText} autoHighlight > } > {presetOptions.map((option) => ( ))} ) } export function Pattern() { const [startDate, setStartDate] = React.useState(null) return ( ) }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","cn",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/cn","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":"cn"}]]}]}],["$","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"}]]}]}]]}],["$","$L51",null,{"namespace":"@catalogs","registryDependencies":["button","calendar","combobox","dialog","field"]}]]}],null]}],["$","$L52",null,{"files":[{"path":"c-combobox-25.tsx","content":"$53","type":"registry:block","target":"components/examples/c-combobox-25.tsx"}],"className":"h-[70svh] min-h-80"}]]}]