52: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"] 53: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"] 54:T17ad,"use client"; import { Calendar03Icon, Tick02Icon } from "@hugeicons/core-free-icons"; import { HugeiconsIcon } from "@hugeicons/react"; import * as stylex from "@stylexjs/stylex"; import { useRef, useState } from "react"; import type { DateRange, PropsBase } from "react-day-picker"; import { Button } from "@/components/primitives/button"; import { Calendar } from "@/components/primitives/calendar"; import { Popover, PopoverContent, PopoverTrigger, } from "@/components/primitives/popover"; import { controlIconSize, stateStyles, typeStyles, } from "@/lib/constella/styles"; import { colors, radii, sizes, space, strokes, } from "@/lib/constella/tokens.stylex"; interface DayRange { from: Date; to: Date; } interface DateRangePreset { label: string; range: DayRange; } const styles = stylex.create({ // A menu's corner, so the presets read as one. content: { borderEndEndRadius: radii.lg, borderEndStartRadius: radii.lg, borderStartEndRadius: radii.lg, borderStartStartRadius: radii.lg, flexDirection: "row", gap: 0, paddingBlockEnd: 0, paddingBlockStart: 0, paddingInlineEnd: 0, paddingInlineStart: 0, width: "auto", }, presets: { borderInlineEndColor: colors.borderSubtle, borderInlineEndStyle: "solid", borderInlineEndWidth: strokes.border, display: "flex", flexDirection: "column", minWidth: sizes.menu, paddingBlockEnd: space.xxs, paddingBlockStart: space.xxs, paddingInlineEnd: space.xxs, paddingInlineStart: space.xxs, }, // A default menu's radio item, its tick on the end. preset: { alignItems: "center", borderBlockEndWidth: 0, borderBlockStartWidth: 0, borderEndEndRadius: radii.md, borderEndStartRadius: radii.md, borderInlineEndWidth: 0, borderInlineStartWidth: 0, borderStartEndRadius: radii.md, borderStartStartRadius: radii.md, color: colors.textPrimary, cursor: "pointer", display: "flex", gap: space.row, justifyContent: "space-between", minHeight: sizes.controlMd, paddingInlineEnd: space.sm, paddingInlineStart: space.sm, textAlign: "start", }, calendar: { paddingBlockEnd: space.md, paddingBlockStart: space.md, paddingInlineEnd: space.md, paddingInlineStart: space.md, }, }); const sameDay = (a: Date, b: Date) => a.toDateString() === b.toDateString(); const sameRange = (a: DayRange, b: DayRange) => sameDay(a.from, b.from) && sameDay(a.to, b.to); /** A button showing a day range, opening presets beside a two-month calendar; a pick closes it. */ function DateRangePicker({ onValueChange, presets, value, ...calendar }: Pick< PropsBase, | "disabled" | "endMonth" | "locale" | "startMonth" | "timeZone" | "weekStartsOn" > & { onValueChange: (range: DayRange) => void; presets?: readonly DateRangePreset[]; value: DayRange; }) { const [open, setOpen] = useState(false); const popup = useRef(null); // The first day picked, until a second one ends the range. const [anchor, setAnchor] = useState(null); const shown: DateRange = anchor === null ? value : { from: anchor, to: anchor }; const pick = (range: DayRange) => { onValueChange(range); setAnchor(null); setOpen(false); }; return ( { setOpen(next); setAnchor(null); }} open={open} > }> {new Intl.DateTimeFormat(calendar.locale?.code ?? "en-US", { timeZone: calendar.timeZone, day: "numeric", month: "short", year: "numeric", }) .formatRange(value.from, value.to) // Node's ICU spaces the dash with thin spaces and browsers' with plain ones, so SSR would mismatch. .replaceAll("\u2009", " ")} openType === "keyboard" || popup.current} ref={popup} sx={styles.content} > {presets === undefined ? null : (

{presets.map((preset) => { const active = sameRange(preset.range, value); return ( ); })}

)} { if (anchor === null) { setAnchor(day); return; } pick( anchor <= day ? { from: anchor, to: day } : { from: day, to: anchor } ); }} selected={shown} {...calendar} sx={styles.calendar} /> ); } export { DateRangePicker }; export type { DateRangePreset, DayRange }; 51:["$","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","@hugeicons/core-free-icons",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/%40hugeicons%2Fcore-free-icons","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":"@hugeicons/core-free-icons"}]]}]}],["$","li","@hugeicons/react",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/%40hugeicons%2Freact","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":"@hugeicons/react"}]]}]}],["$","li","@stylexjs/stylex",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/%40stylexjs%2Fstylex","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":"@stylexjs/stylex"}]]}]}],["$","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"}]]}]}]]}],["$","$L52",null,{"namespace":"@constella","registryDependencies":["https://constella.aayush.cv/r/base.json","https://constella.aayush.cv/r/button.json","https://constella.aayush.cv/r/calendar.json","https://constella.aayush.cv/r/popover.json"]}]]}],null]}],["$","$L53",null,{"files":[{"path":"src/components/primitives/date-range-picker.tsx","content":"$54","type":"registry:component"}],"className":"h-[70svh] min-h-80"}]]}]