5f: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/1bpgyrs5qflhu.js","/_next/static/immutable/chunks/0-6vu2ul1h6ld.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"] 60:I[544296,["/_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/1bpgyrs5qflhu.js","/_next/static/immutable/chunks/0-6vu2ul1h6ld.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"],"ItemStyles"] 61:I[8513,["/_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/1bpgyrs5qflhu.js","/_next/static/immutable/chunks/0-6vu2ul1h6ld.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"],"ScrollArea"] 62:I[8513,["/_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/1bpgyrs5qflhu.js","/_next/static/immutable/chunks/0-6vu2ul1h6ld.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"],"ScrollBar"] 63: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/1bpgyrs5qflhu.js","/_next/static/immutable/chunks/0-6vu2ul1h6ld.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"] 64:T15a5,'use client' import { useEffect, useRef, useState } from 'react' import { Calendar } from 'lucide-react' import { CalendarMonth, monthTitle, } from '@/registry/dashboard/components/date-range-picker/calendar-month' import { addDays, fromInputValue, sameMonth, startOfDay, startOfMonth, toInputValue, } from '@/registry/dashboard/components/date-range-picker/dates' import { FooterButton, NavButton, Picker, PickerFooter, PickerInput, type PickerBaseProps, usePickerClose, } from './picker' import { formatDay, label, parseDay, type PickerLabels } from './locale' type DatePickerProps = PickerBaseProps & { value: string onChange: (value: string) => void min?: string max?: string } const keyOffsets: Record = { ArrowLeft: -1, ArrowRight: 1, ArrowUp: -7, ArrowDown: 7, } export function parseDate(text: string, locale?: string) { return parseDay(text, locale) } export function DatePicker({ value, onChange, min, max, placeholder, locale, labels, ...props }: DatePickerProps) { const selected = fromInputValue(value) return ( } text={selected ? formatDay(selected, locale) : ''} label={label(labels, 'chooseDate')} placeholder={placeholder ?? label(labels, 'pickDate')} labels={labels} panelClassName="flex flex-col gap-3 p-3" onClear={() => onChange('')} {...props} > ) } function DatePanel({ locale, labels, value, min, max, onPick, }: { value: string min?: string max?: string onPick: (value: string) => void locale?: string labels?: Partial }) { const close = usePickerClose() const done = (v: string) => { onPick(v) close() } const [today] = useState(() => startOfDay(new Date())) const selected = fromInputValue(value) const minDate = (min && fromInputValue(min)) || undefined const maxDate = (max && fromInputValue(max)) || undefined const allowed = (d: Date) => (!minDate || d >= minDate) && (!maxDate || d <= maxDate) const start = selected ?? (allowed(today) ? today : (minDate ?? maxDate ?? today)) const [view, setView] = useState(() => startOfMonth(start)) const [focused, setFocused] = useState(start) const [focusTick, setFocusTick] = useState(1) const [typed, setTyped] = useState(selected ? toInputValue(selected) : '') const [typedError, setTypedError] = useState(false) const grid = useRef(null) useEffect(() => { if (!focusTick) return grid.current?.querySelector(`[data-date="${focused.getTime()}"]`)?.focus() }, [focusTick, focused, view]) const pick = (date: Date) => allowed(date) && done(toInputValue(date)) const commitTyped = () => { const date = parseDate(typed, locale) if (!date || !allowed(date)) return setTypedError(!!typed.trim()) pick(date) } return ( <> { setTyped(v) setTypedError(false) setFocusTick(0) const date = parseDate(v, locale) if (date && !sameMonth(date, view)) setView(startOfMonth(date)) }} onCommit={commitTyped} onKeyDown={(e) => { if (e.key !== 'ArrowDown') return e.preventDefault() setFocusTick(focusTick + 1) }} />

{}} onKeyDown={(event, date) => { const page = event.key === 'PageUp' ? -1 : event.key === 'PageDown' ? 1 : 0 const offset = keyOffsets[event.key] if (offset === undefined && !page) return event.preventDefault() const next = page ? new Date(date.getFullYear(), date.getMonth() + page, date.getDate()) : addDays(date, offset) setFocused(next) setFocusTick(focusTick + 1) if (!sameMonth(next, view)) setView(startOfMonth(next)) }} header={ <> setView(startOfMonth(view, -1))} /> {monthTitle(view, locale)} setView(startOfMonth(view, 1))} /> } />

pick(today)} disabled={!allowed(today)}> {label(labels, 'today')} done('')} disabled={!value}> {label(labels, 'clear')} ) } 65:T2242,'use client' import { useEffect, useRef, useState } from 'react' import { CalendarRange } from 'lucide-react' import { cn } from '@/lib/utils' import { CalendarMonth, monthTitle, } from '@/registry/dashboard/components/date-range-picker/calendar-month' import { addDays, fromInputValue, sameMonth, startOfDay, startOfMonth, toInputValue, type DatePreset, } from '@/registry/dashboard/components/date-range-picker/dates' import { parseDate } from './date-picker' import { formatDay, label, type PickerLabels } from './locale' import { FooterButton, NavButton, Picker, PickerFooter, PickerInput, usePickerClose, type PickerBaseProps, } from './picker' type DateRangeFieldProps = PickerBaseProps & { value: string onChange: (value: string) => void min?: string max?: string presets?: DatePreset[] } const keyOffsets: Record = { ArrowLeft: -1, ArrowRight: 1, ArrowUp: -7, ArrowDown: 7, } const rangeText = (start: Date, end: Date, locale?: string) => `${formatDay(start, locale)} – ${formatDay(end, locale)}` export const splitRange = (value: string) => { const [a = '', b = ''] = value.split('/') return [fromInputValue(a), fromInputValue(b)] as const } export function DateRangeField({ value, onChange, min, max, presets, placeholder, locale, labels, ...props }: DateRangeFieldProps) { const [start, end] = splitRange(value) return ( } text={start && end ? rangeText(start, end, locale) : ''} label={label(labels, 'chooseRange')} placeholder={placeholder ?? label(labels, 'pickDates')} labels={labels} panelClassName="flex" onClear={() => onChange('')} {...props} > ) } function RangePanel({ locale, labels, value, min, max, presets, onPick, }: { value: string min?: string max?: string presets?: DatePreset[] onPick: (value: string) => void locale?: string labels?: Partial }) { const close = usePickerClose() const [today] = useState(() => startOfDay(new Date())) const [initialStart, initialEnd] = splitRange(value) const minDate = (min && fromInputValue(min)) || undefined const maxDate = (max && fromInputValue(max)) || undefined const allowed = (d: Date) => (!minDate || d >= minDate) && (!maxDate || d <= maxDate) const [start, setStart] = useState(initialStart) const [end, setEnd] = useState(initialEnd) const [preview, setPreview] = useState(null) const anchor = initialStart ?? (allowed(today) ? today : (minDate ?? today)) const [view, setView] = useState(() => startOfMonth(anchor)) const [focused, setFocused] = useState(anchor) const [focusTick, setFocusTick] = useState(1) const [inputs, setInputs] = useState({ start: initialStart ? toInputValue(initialStart) : '', end: initialEnd ? toInputValue(initialEnd) : '', }) const grid = useRef(null) useEffect(() => { if (!focusTick) return grid.current?.querySelector(`[data-date="${focused.getTime()}"]`)?.focus() }, [focusTick, focused, view]) const commit = (a: Date, b: Date) => { onPick(`${toInputValue(a)}/${toInputValue(b)}`) close() } const show = (a: Date | null, b: Date | null) => { setStart(a) setEnd(b) setInputs({ start: a ? toInputValue(a) : '', end: b ? toInputValue(b) : '' }) } const select = (date: Date) => { if (!allowed(date)) return setFocused(date) if (!start || end) return show(date, null) const [a, b] = date < start ? [date, start] : [start, date] show(a, b) commit(a, b) } const commitInput = (key: 'start' | 'end') => { const date = parseDate(inputs[key], locale) if (!date || !allowed(date)) return show(start, end) const a = key === 'start' ? date : (start ?? date) const b = key === 'end' ? date : (end ?? date) const [s, e] = a <= b ? [a, b] : [b, a] show(s, e) if (!sameMonth(date, view)) setView(startOfMonth(date)) } const month = (offset: number, header: React.ReactNode) => ( { const offsetDays = keyOffsets[event.key] if (offsetDays === undefined) return event.preventDefault() const next = addDays(date, offsetDays) setFocused(next) setFocusTick(focusTick + 1) if (start && !end) setPreview(next) if (!sameMonth(next, view) && !sameMonth(next, startOfMonth(view, 1))) setView(startOfMonth(next, next < view ? 0 : -1)) }} header={header} /> ) const title = (offset: number) => ( {monthTitle(startOfMonth(view, offset), locale)} ) return ( <> {presets?.length ? (

) : null}

{ setInputs({ ...inputs, start: v }) setFocusTick(0) }} onCommit={() => commitInput('start')} /> → { setInputs({ ...inputs, end: v }) setFocusTick(0) }} onCommit={() => commitInput('end')} />

{month( 0, <> setView(startOfMonth(view, -1))} /> {title(0)} setView(startOfMonth(view, 1))} /> , )}

{month( 1, <> {title(1)} setView(startOfMonth(view, 1))} /> , )}

{start && end ? rangeText(start, end, locale) : start ? label(labels, 'pickEnd') : label(labels, 'pickStart')}

{start && end && ( commit(start, end)}> {label(labels, 'apply')} )} { onPick('') close() }} disabled={!value} > {label(labels, 'clear')}

) } 66:T1f79,'use client' import { useEffect, useRef, useState } from 'react' import { CalendarClock } from 'lucide-react' import { cn } from '@/lib/utils' import { CalendarMonth, monthTitle, } from '@/registry/dashboard/components/date-range-picker/calendar-month' import { addDays, fromInputValue, sameMonth, startOfDay, startOfMonth, toInputValue, } from '@/registry/dashboard/components/date-range-picker/dates' import { FooterButton, NavButton, Picker, PickerFooter, usePickerClose, type PickerBaseProps, } from './picker' import { formatDay, label, type PickerLabels } from './locale' import { formatTime } from './time-picker' type DateTimePickerProps = PickerBaseProps & { value: string onChange: (value: string) => void step?: number min?: string max?: string } const pad = (n: number) => String(n).padStart(2, '0') const keyOffsets: Record = { ArrowLeft: -1, ArrowRight: 1, ArrowUp: -7, ArrowDown: 7, } export function formatDateTime(value: string, locale?: string) { const [date, time] = value.split('T') const d = fromInputValue(date ?? '') if (!d) return value return time ? `${formatDay(d, locale)}, ${formatTime(time, locale)}` : formatDay(d, locale) } export function DateTimePicker({ value, onChange, step = 15, min, max, placeholder, locale, labels, ...props }: DateTimePickerProps) { return ( } text={value ? formatDateTime(value, locale) : ''} label={label(labels, 'chooseDateTime')} placeholder={placeholder ?? label(labels, 'pickDateTime')} labels={labels} panelClassName="flex flex-col gap-3 p-3" onClear={() => onChange('')} {...props} > ) } function DateTimePanel({ locale, labels, value, step, min, max, onPick, }: { value: string step: number min?: string max?: string onPick: (value: string) => void locale?: string labels?: Partial }) { const close = usePickerClose() const [today] = useState(() => startOfDay(new Date())) const [initialDate, initialTime = ''] = value.split('T') const minDay = min ? fromInputValue(min.slice(0, 10)) : null const maxDay = max ? fromInputValue(max.slice(0, 10)) : null const dayAllowed = (d: Date) => (!minDay || d >= minDay) && (!maxDay || d <= maxDay) const startDay = fromInputValue(initialDate ?? '') ?? (dayAllowed(today) ? today : (minDay ?? today)) const [day, setDay] = useState(fromInputValue(initialDate ?? '')) const [time, setTime] = useState(initialTime) const [view, setView] = useState(() => startOfMonth(startDay)) const [focused, setFocused] = useState(startDay) const [focusTick, setFocusTick] = useState(1) const grid = useRef(null) const list = useRef(null) const slots = Array.from({ length: Math.ceil(1440 / step) }, (_, i) => { const m = i * step return `${pad(Math.floor(m / 60))}:${pad(m % 60)}` }) const stamp = (d: Date, t: string) => `${toInputValue(d)}T${t}` const allowed = (d: Date, t: string) => (!min || stamp(d, t) >= min) && (!max || stamp(d, t) <= max) useEffect(() => { if (!focusTick) return grid.current?.querySelector(`[data-date="${focused.getTime()}"]`)?.focus() }, [focusTick, focused, view]) useEffect(() => { const target = initialTime || slots[Math.floor((9 * 60) / step)] list.current ?.querySelector(`[data-time="${target}"]`) ?.scrollIntoView({ block: 'center' }) // eslint-disable-next-line react-hooks/exhaustive-deps }, []) const finish = (d: Date, t: string) => { onPick(stamp(d, t)) close() } return ( <>

{ setDay(d) setFocused(d) setFocusTick(0) if (time && allowed(d, time)) finish(d, time) }} onHover={() => {}} locale={locale} onKeyDown={(event, date) => { const offset = keyOffsets[event.key] if (offset === undefined) return event.preventDefault() const next = addDays(date, offset) setFocused(next) setFocusTick(focusTick + 1) if (!sameMonth(next, view)) setView(startOfMonth(next)) }} header={ <> setView(startOfMonth(view, -1))} /> {monthTitle(view, locale)} setView(startOfMonth(view, 1))} /> } />

{label(labels, 'time')}

{day && time ? formatDateTime(stamp(day, time), locale) : day ? label(labels, 'pickTimeNext') : time ? label(labels, 'pickDayNext') : label(labels, 'pickDayTime')}

{ const now = new Date() const n = Math.ceil((now.getHours() * 60 + now.getMinutes()) / step) * step const t = `${pad(Math.floor(Math.min(n, 1439) / 60))}:${pad(Math.min(n, 1439) % 60)}` finish(startOfDay(now), t) }} > {label(labels, 'now')} { onPick('') close() }} disabled={!value} > {label(labels, 'clear')}

) } 67:Td95,import dayjs from 'dayjs' import customParseFormat from 'dayjs/plugin/customParseFormat' import localizedFormat from 'dayjs/plugin/localizedFormat' dayjs.extend(customParseFormat) dayjs.extend(localizedFormat) export { dayjs } export const pickerLabels = { today: 'Today', now: 'Now', thisMonth: 'This month', clear: 'Clear', apply: 'Apply', time: 'Time', start: 'Start', end: 'End', startDate: 'Start date', endDate: 'End date', typeDate: 'Type a date, e.g. {example}', typeTime: 'Type a time, e.g. {example}', pickDate: 'Pick a date', pickTime: 'Pick a time', pickMonth: 'Pick a month', pickDates: 'Pick dates', pickDateTime: 'Pick a date and time', pickStart: 'Pick the start date', pickEnd: 'Now pick the end date', pickDayTime: 'Pick a day and a time', pickTimeNext: 'Now pick a time', pickDayNext: 'Now pick a day', use: 'Use {time}', noTimes: 'No matching times', previousMonth: 'Previous month', nextMonth: 'Next month', previousYear: 'Previous year', nextYear: 'Next year', chooseDate: 'Choose a date', chooseTime: 'Choose a time', chooseMonth: 'Choose a month', chooseRange: 'Choose a date range', chooseDateTime: 'Choose a date and time', clearValue: 'Clear', } export type PickerLabels = typeof pickerLabels export const label = ( labels: Partial | undefined, key: keyof PickerLabels, vars: Record = {}, ) => (labels?.[key] ?? pickerLabels[key]).replace(/\{(\w+)\}/g, (_, k: string) => vars[k] ?? '') const DATE_INPUTS = [ 'YYYY-MM-DD', 'D/M/YYYY', 'DD/MM/YYYY', 'M/D/YYYY', 'MM/DD/YYYY', 'D.M.YYYY', 'D MMM YYYY', 'D MMMM YYYY', 'MMM D YYYY', 'MMM D, YYYY', 'MMMM D YYYY', 'MMMM D, YYYY', ] const TIME_INPUTS = [ 'H:mm', 'HH:mm', 'h:mm a', 'h:mma', 'h a', 'ha', 'hmm a', 'hmma', 'HHmm', 'Hmm', 'H', ] export function parseDay(text: string, locale?: string): Date | null { const t = text.trim() if (!t) return null for (const format of DATE_INPUTS) { const d = locale ? dayjs(t, format, locale, true) : dayjs(t, format, true) if (d.isValid()) return d.startOf('day').toDate() } return null } export function parseClock(text: string, locale?: string): string | null { const t = text .trim() .toLowerCase() .replace(/\.(?=m)/g, '') .replace(/([ap])$/, '$1m') if (!t) return null for (const format of TIME_INPUTS) { const d = locale ? dayjs(t, format, locale, true) : dayjs(t, format, true) if (d.isValid()) return d.format('HH:mm') } return null } export const formatDay = (date: Date, locale?: string) => (locale ? dayjs(date).locale(locale) : dayjs(date)).format('ll') export const formatClock = (hhmm: string, locale?: string) => { const d = dayjs(hhmm, 'HH:mm', true) return d.isValid() ? (locale ? d.locale(locale) : d).format('LT') : hhmm } export const formatMonthYear = (date: Date, locale?: string) => (locale ? dayjs(date).locale(locale) : dayjs(date)).format('MMM YYYY') export const monthName = (date: Date, locale?: string) => (locale ? dayjs(date).locale(locale) : dayjs(date)).format('MMMM YYYY') export const shortMonths = (locale?: string) => Array.from({ length: 12 }, (_, i) => (locale ? dayjs().locale(locale) : dayjs()).month(i).format('MMM'), ) export const fullMonth = (year: number, month: number, locale?: string) => (locale ? dayjs().locale(locale) : dayjs()).year(year).month(month).format('MMMM YYYY') 68:T1269,'use client' import { useEffect, useRef, useState } from 'react' import { CalendarDays } from 'lucide-react' import { cn } from '@/lib/utils' import { FooterButton, NavButton, Picker, PickerFooter, type PickerBaseProps, usePickerClose, } from './picker' import { formatMonthYear, fullMonth, label, shortMonths, type PickerLabels } from './locale' type MonthPickerProps = PickerBaseProps & { value: string onChange: (value: string) => void min?: string max?: string } const pad = (n: number) => String(n).padStart(2, '0') const key = (year: number, month: number) => `${year}-${pad(month + 1)}` export function formatMonth(value: string, locale?: string) { const [y, m] = value.split('-').map(Number) return y && m ? formatMonthYear(new Date(y, m - 1, 1), locale) : value } export function MonthPicker({ value, onChange, min, max, placeholder, locale, labels, ...props }: MonthPickerProps) { return ( } text={value ? formatMonth(value, locale) : ''} label={label(labels, 'chooseMonth')} placeholder={placeholder ?? label(labels, 'pickMonth')} labels={labels} panelClassName="flex w-64 flex-col gap-3 p-3" onClear={() => onChange('')} {...props} > ) } function MonthPanel({ locale, labels, value, min, max, onPick, }: { value: string min?: string max?: string onPick: (value: string) => void locale?: string labels?: Partial }) { const close = usePickerClose() const months = shortMonths(locale) const done = (v: string) => { onPick(v) close() } const [now] = useState(() => new Date()) const thisMonth = key(now.getFullYear(), now.getMonth()) const [y, m] = value.split('-').map(Number) const [year, setYear] = useState(y || now.getFullYear()) const [focused, setFocused] = useState(m ? m - 1 : now.getMonth()) const grid = useRef(null) useEffect(() => { grid.current?.querySelector(`[data-month="${focused}"]`)?.focus() }, [focused, year]) const allowed = (k: string) => (!min || k >= min) && (!max || k <= max) const pick = (k: string) => allowed(k) && done(k) return ( <>

setYear(year - 1)} /> {year} setYear(year + 1)} />

{months.map((name, i) => { const k = key(year, i) const on = k === value return ( ) })}

pick(thisMonth)} disabled={!allowed(thisMonth)}> {label(labels, 'thisMonth')} done('')} disabled={!value}> {label(labels, 'clear')} ) } 69:T1c82,'use client' import { createContext, useContext, useEffect, useLayoutEffect, useRef, useState } from 'react' import { X } from 'lucide-react' import { cn } from '@/lib/utils' import { label as labelOf, type PickerLabels } from './locale' export type PickerBaseProps = { id?: string placeholder?: string disabled?: boolean invalid?: boolean describedBy?: string clearable?: boolean className?: string locale?: string labels?: Partial } const CloseContext = createContext<() => void>(() => {}) export const usePickerClose = () => useContext(CloseContext) type PickerProps = PickerBaseProps & { icon: React.ReactNode text?: string label: string panelClassName?: string onClear?: () => void children: React.ReactNode } export function Picker({ id, icon, text, label, placeholder, disabled, invalid, describedBy, clearable = true, className, panelClassName, onClear, children, labels, }: PickerProps) { const [open, setOpen] = useState(false) const [place, setPlace] = useState<{ top: number; left: number } | null>(null) const root = useRef(null) const trigger = useRef(null) const panel = useRef(null) const close = () => { setOpen(false) trigger.current?.focus() } useLayoutEffect(() => { if (!open) return const update = () => { if (!panel.current || !trigger.current) return const t = trigger.current.getBoundingClientRect() const p = panel.current.getBoundingClientRect() const gap = 6 const below = window.innerHeight - t.bottom - gap const above = t.top - gap const up = below < p.height && above > below const left = Math.max(8, Math.min(t.left, window.innerWidth - p.width - 8)) setPlace({ top: Math.max(8, up ? t.top - gap - p.height : t.bottom + gap), left }) } update() window.addEventListener('scroll', update, true) window.addEventListener('resize', update) return () => { window.removeEventListener('scroll', update, true) window.removeEventListener('resize', update) } }, [open]) useEffect(() => { if (!open) return const onPointer = (event: PointerEvent) => { if (!root.current?.contains(event.target as Node)) setOpen(false) } document.addEventListener('pointerdown', onPointer) return () => document.removeEventListener('pointerdown', onPointer) }, [open]) const showClear = clearable && !!text && !disabled && !!onClear return (

{ if (event.key !== 'Escape' || !open) return event.stopPropagation() setOpen(false) trigger.current?.focus() }} > {showClear && ( )} {open && ( )}

) } export function NavButton({ direction, label, onClick, }: { direction: -1 | 1 label: string onClick: () => void }) { return ( ) } export function PickerInput({ value, placeholder, label, invalid, autoFocus, onChange, onCommit, onKeyDown, inputRef, }: { value: string placeholder: string label: string invalid?: boolean autoFocus?: boolean onChange: (value: string) => void onCommit: () => void onKeyDown?: (event: React.KeyboardEvent) => void inputRef?: React.Ref }) { return ( onChange(e.target.value)} onKeyDown={(e) => { if (e.key === 'Enter') { e.preventDefault() onCommit() } onKeyDown?.(e) }} className="h-8 w-full min-w-0 rounded-lg border border-input bg-card px-2.5 text-sm tabular-nums outline-none placeholder:text-muted-foreground focus:border-ring aria-invalid:border-destructive" /> ) } export function PickerFooter({ children }: { children: React.ReactNode }) { return

{children}

} export function FooterButton({ children, onClick, disabled, }: { children: React.ReactNode onClick: () => void disabled?: boolean }) { return ( ) } 6a:T1bb1,'use client' import { useEffect, useRef, useState } from 'react' import { Clock } from 'lucide-react' import { cn } from '@/lib/utils' import { FooterButton, Picker, PickerFooter, PickerInput, type PickerBaseProps, usePickerClose, } from './picker' import { formatClock, label, parseClock, type PickerLabels } from './locale' type TimePickerProps = PickerBaseProps & { value: string onChange: (value: string) => void step?: number min?: string max?: string } const pad = (n: number) => String(n).padStart(2, '0') const minutesOf = (t: string) => { const [h, m] = t.split(':').map(Number) return h * 60 + m } const fromMinutes = (n: number) => `${pad(Math.floor(n / 60))}:${pad(n % 60)}` export function formatTime(hhmm: string, locale?: string) { return formatClock(hhmm, locale) } export function parseTime(text: string, locale?: string) { const viaDayjs = parseClock(text, locale) if (viaDayjs) return viaDayjs const t = text.trim().toLowerCase().replace(/\s+/g, '').replace(/\./g, '') if (!t) return null const match = /^(\d{1,2})(?::(\d{2}))?(a|p|am|pm)?$/.exec(t) ?? /^(\d{1,2})(\d{2})(a|p|am|pm)?$/.exec(t) if (!match) return null let h = Number(match[1]) const m = Number(match[2] ?? 0) const meridiem = match[3]?.[0] if (meridiem) { if (h < 1 || h > 12) return null h = (h % 12) + (meridiem === 'p' ? 12 : 0) } if (h > 23 || m > 59) return null return `${pad(h)}:${pad(m)}` } export function TimePicker({ value, onChange, step = 15, min, max, placeholder, locale, labels, ...props }: TimePickerProps) { return ( } text={value ? formatTime(value, locale) : ''} label={label(labels, 'chooseTime')} placeholder={placeholder ?? label(labels, 'pickTime')} labels={labels} panelClassName="flex w-56 flex-col gap-2 p-2" onClear={() => onChange('')} {...props} > ) } function TimePanel({ locale, labels, value, step, min, max, onPick, }: { value: string step: number min?: string max?: string onPick: (value: string) => void locale?: string labels?: Partial }) { const close = usePickerClose() const done = (v: string) => { onPick(v) close() } const [typed, setTyped] = useState('') const [typedError, setTypedError] = useState(false) const [now] = useState(() => { const d = new Date() const n = Math.round((d.getHours() * 60 + d.getMinutes()) / step) * step return fromMinutes(Math.min(n, 1440 - step)) }) const list = useRef(null) const input = useRef(null) const allowed = (t: string) => (!min || t >= min) && (!max || t <= max) const slots = Array.from({ length: Math.ceil(1440 / step) }, (_, i) => fromMinutes(i * step), ).filter(allowed) const q = typed.trim().toLowerCase().replace(/\s/g, '') const exact = parseTime(typed, locale) const shown = q ? slots.filter( (s) => formatTime(s, locale).toLowerCase().replace(/\s/g, '').startsWith(q) || s.startsWith(q), ) : slots const [anchor] = useState(() => { const target = minutesOf(value || now) return slots.reduce( (best, s) => Math.abs(minutesOf(s) - target) < Math.abs(minutesOf(best) - target) ? s : best, slots[0], ) }) useEffect(() => { list.current ?.querySelector(`[data-time="${anchor}"]`) ?.scrollIntoView({ block: 'center' }) }, [anchor]) const pick = (t: string) => (allowed(t) ? done(t) : setTypedError(true)) const focusSlot = (index: number) => { const buttons = list.current?.querySelectorAll('button') if (!buttons?.length) return buttons[Math.max(0, Math.min(buttons.length - 1, index))].focus() } return ( <> { setTyped(v) setTypedError(false) }} onCommit={() => { const t = exact ?? shown[0] if (t) pick(t) else setTypedError(true) }} onKeyDown={(e) => { if (e.key !== 'ArrowDown') return e.preventDefault() const index = shown.indexOf(value || anchor) focusSlot(index >= 0 ? index : 0) }} /> {exact && !shown.includes(exact) && allowed(exact) && ( )} pick(now)} disabled={!allowed(now)}> {label(labels, 'now')} done('')} disabled={!value}> {label(labels, 'clear')} ) } 5e:["$","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","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"}]]}]}],["$","li","dayjs",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/dayjs","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":"dayjs"}]]}]}]]}],["$","$L5f",null,{"namespace":"@tomei","registryDependencies":["https://tomei.zubeyr.dev/ui/r/date-range-picker.json"]}]]}],["$","$L60",null,{"children":["$","div",null,{"className":"@container","children":["$","div",null,{"className":"grid grid-cols-1 gap-4 @xl:grid-cols-2","children":[["$","div",null,{"className":"flex flex-col border rounded-md","children":[["$","p",null,{"className":"text-sm font-medium border-b p-2","children":"Light Mode"}],["$","div",null,{"children":["$","$L61",null,{"type":"always","className":"h-80 px-2","children":[["$","div",null,{"className":"gap-2 pb-8 flex flex-col pt-4","children":[["$","div","shadow-overlay",{"className":"items-start gap-1 grid grid-cols-2 text-sm","children":[["$","div",null,{"className":"hover:bg-muted/50 py-2","children":["$","p",null,{"className":"text-foreground/80 text-sm","children":["--","shadow-overlay",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":"0 16px 40px rgb(0 0 0 / 0.12), 0 0 0 1px rgb(0 0 0 / 0.08)"}]]}]]}],["$","$L62",null,{"orientation":"horizontal"}]]}]}]]}],["$","div",null,{"className":"flex flex-col border rounded-md","children":[["$","p",null,{"className":"text-sm font-medium border-b p-2","children":"Dark Mode"}],["$","div",null,{"children":["$","$L61",null,{"type":"always","className":"h-80 px-2","children":[["$","div",null,{"className":"gap-2 pb-8 flex flex-col pt-4","children":[["$","div","shadow-overlay",{"className":"items-start gap-1 grid grid-cols-2 text-sm","children":[["$","div",null,{"className":"hover:bg-muted/50 py-2","children":["$","p",null,{"className":"text-foreground/80 text-sm","children":["--","shadow-overlay",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":"0 16px 40px rgb(0 0 0 / 0.5), 0 0 0 1px #0e0e0e"}]]}]]}],["$","$L62",null,{"orientation":"horizontal"}]]}]}]]}],null,null]}]}]}]]}],["$","$L63",null,{"files":[{"path":"registry/dashboard/components/date-picker/date-picker.tsx","content":"$64","type":"registry:component","target":"components/dashboard/date-picker/date-picker.tsx"},{"path":"registry/dashboard/components/date-picker/date-range-field.tsx","content":"$65","type":"registry:component","target":"components/dashboard/date-picker/date-range-field.tsx"},{"path":"registry/dashboard/components/date-picker/date-time-picker.tsx","content":"$66","type":"registry:component","target":"components/dashboard/date-picker/date-time-picker.tsx"},{"path":"registry/dashboard/components/date-picker/locale.ts","content":"$67","type":"registry:component","target":"components/dashboard/date-picker/locale.ts"},{"path":"registry/dashboard/components/date-picker/month-picker.tsx","content":"$68","type":"registry:component","target":"components/dashboard/date-picker/month-picker.tsx"},{"path":"registry/dashboard/components/date-picker/picker.tsx","content":"$69","type":"registry:component","target":"components/dashboard/date-picker/picker.tsx"},{"path":"registry/dashboard/components/date-picker/time-picker.tsx","content":"$6a","type":"registry:component","target":"components/dashboard/date-picker/time-picker.tsx"}],"className":"h-[70svh] min-h-80"}]]}]