50: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"] 51: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"] 52:T1ad2,// Date Range Picker from Hirael // MIT · Mohammad Shehadeh · https://github.com/MohammadShehadeh/hirael 'use client'; import * as React from 'react'; import { CalendarIcon } from 'lucide-react'; import type { DateRange } from 'react-day-picker'; import { cn } from '@/lib/utils'; import { Button } from '@/registry/hirael/bases/radix/ui/button'; import { Calendar } from '@/registry/hirael/bases/radix/ui/calendar'; import { Popover, PopoverContent, PopoverTrigger } from '@/registry/hirael/bases/radix/ui/popover'; export type { DateRange }; interface DateRangePickerContextValue { value: DateRange | undefined; setValue: (value: DateRange | undefined) => void; setOpen: (open: boolean) => void; locale: string; disabled?: boolean; } const DateRangePickerContext = React.createContext(null); const useDateRangePicker = () => { const ctx = React.useContext(DateRangePickerContext); if (!ctx) { throw new Error('DateRangePicker compound parts must be used inside '); } return ctx; }; export interface DateRangePickerProps { value?: DateRange; defaultValue?: DateRange; onValueChange?: (value: DateRange | undefined) => void; open?: boolean; defaultOpen?: boolean; onOpenChange?: (open: boolean) => void; /** BCP 47 tag for the trigger label. Defaults to `en-US` so server and client render the same text. */ locale?: string; disabled?: boolean; children?: React.ReactNode; } const DateRangePicker = ({ value: valueProp, defaultValue, onValueChange, open: openProp, defaultOpen = false, onOpenChange, locale = 'en-US', disabled, children, }: DateRangePickerProps) => { const [internalValue, setInternalValue] = React.useState(defaultValue); const value = valueProp ?? internalValue; const setValue = React.useCallback( (next: DateRange | undefined) => { if (valueProp === undefined) setInternalValue(next); onValueChange?.(next); }, [valueProp, onValueChange], ); const [internalOpen, setInternalOpen] = React.useState(defaultOpen); const open = openProp ?? internalOpen; const setOpen = React.useCallback( (next: boolean) => { if (openProp === undefined) setInternalOpen(next); onOpenChange?.(next); }, [openProp, onOpenChange], ); const ctx = React.useMemo( () => ({ value, setValue, setOpen, locale, disabled }), [value, setValue, setOpen, locale, disabled], ); return ( {children} ); }; interface DateRangePickerTriggerProps extends Omit, 'children'> { placeholder?: string; children?: React.ReactNode; } const DateRangePickerTrigger = ({ placeholder = 'Pick a date range', className, children, ...props }: DateRangePickerTriggerProps) => { const ctx = useDateRangePicker(); const fmt = React.useMemo(() => new Intl.DateTimeFormat(ctx.locale, { dateStyle: 'medium' }), [ctx.locale]); return ( ); }; export interface DateRangePreset { label: string; range: () => DateRange; } const lastDays = (days: number) => () => { const today = new Date(); today.setHours(0, 0, 0, 0); const from = new Date(today); from.setDate(today.getDate() + 1 - days); return { from, to: today }; }; const calendarMonth = (offset: number) => () => { const today = new Date(); return { from: new Date(today.getFullYear(), today.getMonth() + offset, 1), to: new Date(today.getFullYear(), today.getMonth() + offset + 1, 0), }; }; const DEFAULT_PRESETS: DateRangePreset[] = [ { label: 'Today', range: lastDays(1) }, { label: 'Last 7 days', range: lastDays(7) }, { label: 'Last 30 days', range: lastDays(30) }, { label: 'This month', range: calendarMonth(0) }, { label: 'Last month', range: calendarMonth(-1) }, ]; type DateRangePickerContentProps = Omit< React.ComponentProps, 'mode' | 'selected' | 'onSelect' | 'required' > & Pick, 'align'> & { /** Pass `[]` to hide the preset column. */ presets?: DateRangePreset[]; }; /** Takes the calendar's props (`disabled`, `numberOfMonths`, `weekStartsOn`, …). */ const DateRangePickerContent = ({ presets = DEFAULT_PRESETS, numberOfMonths = 2, align = 'start', ...props }: DateRangePickerContentProps) => { const ctx = useDateRangePicker(); return (

{presets.length > 0 && (

{presets.map((preset) => ( ))}

)}

); }; export { DateRangePicker, DateRangePickerTrigger, DateRangePickerContent }; 4f:["$","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","react-day-picker",{"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"}]]}]}]]}],["$","$L50",null,{"namespace":"@hirael","registryDependencies":["button","calendar","popover"]}]]}],null]}],["$","$L51",null,{"files":[{"path":"registry/hirael/bases/radix/components/date-range-picker.tsx","content":"$52","type":"registry:component","target":"components/date-range-picker.tsx"}],"className":"h-[70svh] min-h-80"}]]}]