@webiny/admin-ui 0.0.0-unstable.a4637c5ce6 → 0.0.0-unstable.a85ef555b2

package/DatePicker/primitives/BirthdayPicker.js

@@ -0,0 +1,355 @@
+import react, { useEffect, useLayoutEffect, useMemo, useRef, useState } from "react";
+import { Popover } from "radix-ui";
+import { ReactComponent } from "@webiny/icons/calendar_month.svg";
+import { ReactComponent as close_svg_ReactComponent } from "@webiny/icons/close.svg";
+import { Icon } from "../../Icon/index.js";
+import { inputVariants } from "../../Input/index.js";
+import { ScrollArea } from "../../ScrollArea/index.js";
+import { useEscapeScrollLock } from "../../hooks/index.js";
+import { cn, cva } from "../../utils.js";
+import { BirthdayPickerCell } from "./BirthdayPickerCell.js";
+import { BirthdayPickerSegments } from "./BirthdayPickerSegments.js";
+import { MONTH_NAMES_FULL } from "../utils/constants.js";
+import { birthdayYears, formatBirthdayValue, isDayDisabled, isMonthDisabled, isYearDisabled, nextBirthdayStep, pad, parseBirthdayValue, pickDay, pickMonth, pickYear } from "../utils/birthdayHelpers.js";
+const STEPS = [
+    "day",
+    "month",
+    "year"
+];
+const STEP_LABELS = {
+    day: "Select a day",
+    month: "Select a month",
+    year: "Select a year"
+};
+const DAYS = Array.from({
+    length: 31
+}, (_, index)=>index + 1);
+const MONTHS = Array.from({
+    length: 12
+}, (_, index)=>index + 1);
+const EXPAND_MS = 250;
+const SLIDE_MS = 300;
+const FADE_OUT_MS = 120;
+const COLLAPSE_MS = 200;
+const cardVariants = cva([
+    "bg-neutral-base border-sm border-neutral-black shadow-lg overflow-hidden",
+    "text-md text-neutral-strong fill-neutral-xstrong",
+    "w-(--radix-popover-trigger-width) min-w-[320px]"
+], {
+    variants: {
+        size: {
+            md: "rounded-md",
+            lg: "rounded-md",
+            xl: "rounded-lg leading-6"
+        }
+    },
+    defaultVariants: {
+        size: "lg"
+    }
+});
+const cardHeaderVariants = cva("flex items-center justify-between gap-sm", {
+    variants: {
+        size: {
+            md: "px-[calc(var(--padding-sm-extra)-(var(--border-width-sm)))]",
+            lg: "px-[calc(var(--padding-sm-extra)-(var(--border-width-sm)))]",
+            xl: "px-[calc(var(--padding-md)-(var(--border-width-sm)))]"
+        }
+    },
+    defaultVariants: {
+        size: "lg"
+    }
+});
+const gridHeight = "h-[calc(6*var(--spacing-xl)+5*var(--spacing-sm)+2*var(--spacing-xs))]";
+const dayGridWidth = "max-w-[calc(6*var(--spacing-xxl)+5*var(--spacing-xs))]";
+const wideGridWidth = "max-w-[calc(5*var(--spacing-3xl)+4*var(--spacing-sm))]";
+const BirthdayPicker = ({ value, onChange, disabled, size, variant, invalid, yearRange, minDate, maxDate, onOpenChange, className })=>{
+    const [open, setOpen] = useState(false);
+    const [phase, setPhase] = useState("collapsed");
+    const [step, setStep] = useState("day");
+    const [draft, setDraft] = useState({});
+    const [barHeight, setBarHeight] = useState(0);
+    const [bodyHeight, setBodyHeight] = useState(0);
+    const barRef = useRef(null);
+    const cardRef = useRef(null);
+    const bodyRef = useRef(null);
+    const panelRefs = useRef({
+        day: null,
+        month: null,
+        year: null
+    });
+    const picked = useRef(new Set());
+    const closeTimer = useRef();
+    const escapeScrollLock = useEscapeScrollLock();
+    const saved = useMemo(()=>parseBirthdayValue(value), [
+        value
+    ]);
+    const years = useMemo(()=>birthdayYears(yearRange, saved.year, {
+            minDate,
+            maxDate
+        }), [
+        yearRange,
+        saved.year,
+        minDate,
+        maxDate
+    ]);
+    const range = useMemo(()=>({
+            years,
+            minDate,
+            maxDate
+        }), [
+        years,
+        minDate,
+        maxDate
+    ]);
+    useEffect(()=>()=>clearTimeout(closeTimer.current), []);
+    const expand = ()=>{
+        if (disabled || open) return;
+        clearTimeout(closeTimer.current);
+        setBarHeight(barRef.current?.offsetHeight ?? 0);
+        setDraft(saved);
+        picked.current = new Set();
+        setStep("day");
+        setPhase("collapsed");
+        setOpen(true);
+        onOpenChange?.(true);
+    };
+    const collapse = ()=>{
+        if ("collapsing" === phase) return;
+        setPhase("collapsing");
+        closeTimer.current = setTimeout(()=>{
+            setOpen(false);
+            setPhase("collapsed");
+            onOpenChange?.(false);
+        }, FADE_OUT_MS + COLLAPSE_MS);
+    };
+    useLayoutEffect(()=>{
+        if (!open || "collapsed" !== phase) return;
+        let second = 0;
+        const first = requestAnimationFrame(()=>{
+            second = requestAnimationFrame(()=>{
+                setBodyHeight(bodyRef.current?.offsetHeight ?? 0);
+                setPhase("expanded");
+            });
+        });
+        return ()=>{
+            cancelAnimationFrame(first);
+            cancelAnimationFrame(second);
+        };
+    }, [
+        open,
+        phase
+    ]);
+    useEffect(()=>{
+        if ("expanded" !== phase) return;
+        const timer = setTimeout(()=>{
+            const rect = cardRef.current?.getBoundingClientRect();
+            if (rect && rect.bottom > window.innerHeight) barRef.current?.scrollIntoView({
+                block: "center",
+                behavior: "smooth"
+            });
+        }, EXPAND_MS);
+        return ()=>clearTimeout(timer);
+    }, [
+        phase
+    ]);
+    useEffect(()=>{
+        if (!open || "expanded" !== phase) return;
+        const panel = panelRefs.current[step];
+        if (!panel) return;
+        const selected = panel.querySelector("[data-selected=true]");
+        const viewport = panel.querySelector("[data-slot=scroll-area-viewport]");
+        if (viewport) if (selected) {
+            const offset = selected.getBoundingClientRect().top - viewport.getBoundingClientRect().top;
+            viewport.scrollTop += offset - viewport.clientHeight / 2 + selected.offsetHeight / 2;
+        } else viewport.scrollTop = 0;
+        const target = selected ?? panel.querySelector("button:enabled");
+        target?.focus({
+            preventScroll: true
+        });
+    }, [
+        open,
+        phase,
+        step
+    ]);
+    const goToStep = (next)=>{
+        setStep(next);
+    };
+    const onPick = (pickedStep, next)=>{
+        setDraft(next);
+        picked.current.add(pickedStep);
+        const nextValue = formatBirthdayValue(next);
+        if (nextValue) onChange?.(nextValue);
+        const nextStep = nextBirthdayStep(next, pickedStep, picked.current);
+        if (nextStep) return void goToStep(nextStep);
+        collapse();
+    };
+    const onPickDay = (day)=>onPick("day", pickDay(draft, day, range));
+    const onPickMonth = (month)=>onPick("month", pickMonth(draft, month, range));
+    const onPickYear = (year)=>onPick("year", pickYear(draft, year));
+    const onBarKeyDown = (event)=>{
+        if (event.target !== event.currentTarget) return;
+        if ("Enter" === event.key || " " === event.key || "ArrowDown" === event.key) {
+            event.preventDefault();
+            expand();
+        }
+    };
+    const expanded = "expanded" === phase;
+    const cardHeight = expanded ? barHeight + bodyHeight : barHeight;
+    const stepIndex = STEPS.indexOf(step);
+    const icons = (interactive)=>/*#__PURE__*/ react.createElement("span", {
+            className: "flex items-center gap-xs shrink-0"
+        }, interactive && value && !disabled ? /*#__PURE__*/ react.createElement("button", {
+            type: "button",
+            "aria-label": "Clear date",
+            className: "flex cursor-pointer rounded-xs outline-none focus-visible:ring-sm focus-visible:ring-primary-dimmed",
+            onClick: (event)=>{
+                event.stopPropagation();
+                onChange?.(void 0);
+            },
+            onKeyDown: (event)=>event.stopPropagation()
+        }, /*#__PURE__*/ react.createElement(Icon, {
+            icon: /*#__PURE__*/ react.createElement(close_svg_ReactComponent, null),
+            label: "Clear",
+            size: "sm",
+            color: "inherit"
+        })) : null, /*#__PURE__*/ react.createElement(Icon, {
+            icon: /*#__PURE__*/ react.createElement(ReactComponent, null),
+            label: "Calendar",
+            size: "sm",
+            color: "inherit"
+        }));
+    const panelProps = (panelStep)=>({
+            ref: (element)=>{
+                panelRefs.current[panelStep] = element;
+            },
+            "aria-hidden": step !== panelStep,
+            "data-step": panelStep
+        });
+    return /*#__PURE__*/ react.createElement("div", {
+        className: className
+    }, /*#__PURE__*/ react.createElement(Popover.Root, {
+        open: open,
+        onOpenChange: (isOpen)=>isOpen ? expand() : collapse()
+    }, /*#__PURE__*/ react.createElement(Popover.Anchor, {
+        asChild: true
+    }, /*#__PURE__*/ react.createElement("div", {
+        ref: barRef,
+        role: "button",
+        tabIndex: disabled ? -1 : 0,
+        "aria-haspopup": "dialog",
+        "aria-expanded": open,
+        "data-disabled": disabled,
+        "data-focused": open,
+        onClick: expand,
+        onKeyDown: onBarKeyDown,
+        className: cn(inputVariants({
+            size,
+            variant,
+            invalid
+        }), "cursor-pointer justify-between select-none min-w-0 overflow-hidden outline-none", disabled && "pointer-events-none")
+    }, /*#__PURE__*/ react.createElement(BirthdayPickerSegments, {
+        parts: saved
+    }), icons(true))), /*#__PURE__*/ react.createElement(Popover.Portal, null, /*#__PURE__*/ react.createElement(Popover.Content, {
+        ref: escapeScrollLock,
+        side: "bottom",
+        align: "start",
+        sideOffset: -barHeight,
+        avoidCollisions: false,
+        onOpenAutoFocus: (event)=>event.preventDefault(),
+        onCloseAutoFocus: (event)=>{
+            event.preventDefault();
+            barRef.current?.focus({
+                preventScroll: true
+            });
+        },
+        className: "z-popover outline-none"
+    }, /*#__PURE__*/ react.createElement("div", {
+        ref: cardRef,
+        role: "dialog",
+        "aria-label": STEP_LABELS[step],
+        "data-phase": phase,
+        className: cn(cardVariants({
+            size
+        }), "collapsing" === phase && "pointer-events-none"),
+        style: {
+            height: cardHeight,
+            transition: "collapsing" === phase ? `height ${COLLAPSE_MS}ms ease-in ${FADE_OUT_MS}ms` : `height ${EXPAND_MS}ms ease-out`
+        }
+    }, /*#__PURE__*/ react.createElement("div", {
+        className: cardHeaderVariants({
+            size
+        }),
+        style: {
+            height: `calc(${barHeight}px - 2 * var(--border-width-sm))`
+        }
+    }, /*#__PURE__*/ react.createElement(BirthdayPickerSegments, {
+        parts: draft,
+        activeStep: step,
+        onStepClick: goToStep
+    }), icons(false)), /*#__PURE__*/ react.createElement("div", {
+        ref: bodyRef
+    }, /*#__PURE__*/ react.createElement("div", {
+        className: "h-px bg-neutral-dimmed origin-center",
+        style: {
+            transform: expanded ? "scaleX(1)" : "scaleX(0)",
+            transition: `transform ${EXPAND_MS}ms ease-out`
+        }
+    }), /*#__PURE__*/ react.createElement("div", {
+        className: "pb-md",
+        style: {
+            opacity: expanded ? 1 : 0,
+            transition: expanded ? `opacity 200ms ease-out ${EXPAND_MS - 100}ms` : `opacity ${FADE_OUT_MS}ms ease-in`
+        }
+    }, /*#__PURE__*/ react.createElement("div", {
+        className: "pt-sm-extra pb-xs text-center text-sm text-neutral-muted",
+        "aria-live": "polite"
+    }, STEP_LABELS[step]), /*#__PURE__*/ react.createElement("div", {
+        className: cn("overflow-hidden", gridHeight)
+    }, /*#__PURE__*/ react.createElement("div", {
+        className: "flex h-full w-[300%]",
+        style: {
+            transform: `translateX(-${100 * stepIndex / 3}%)`,
+            transition: `transform ${SLIDE_MS}ms ease-in-out`
+        }
+    }, /*#__PURE__*/ react.createElement("div", {
+        ...panelProps("day"),
+        className: "w-1/3 h-full px-md py-xs"
+    }, /*#__PURE__*/ react.createElement("div", {
+        className: cn("grid grid-cols-6 gap-x-xs gap-y-sm mx-auto", dayGridWidth)
+    }, DAYS.map((day)=>/*#__PURE__*/ react.createElement(BirthdayPickerCell, {
+            key: day,
+            selected: draft.day === day,
+            disabled: isDayDisabled(day, range),
+            tabbable: "day" === step,
+            onClick: ()=>onPickDay(day)
+        }, pad(day))))), /*#__PURE__*/ react.createElement("div", {
+        ...panelProps("month"),
+        className: "w-1/3 h-full px-md py-xs flex items-center"
+    }, /*#__PURE__*/ react.createElement("div", {
+        className: cn("grid grid-cols-3 gap-x-sm gap-y-md w-full mx-auto", wideGridWidth)
+    }, MONTHS.map((month)=>/*#__PURE__*/ react.createElement(BirthdayPickerCell, {
+            key: month,
+            selected: draft.month === month,
+            disabled: isMonthDisabled(month, draft, range),
+            tabbable: "month" === step,
+            onClick: ()=>onPickMonth(month)
+        }, MONTH_NAMES_FULL[month - 1])))), /*#__PURE__*/ react.createElement("div", {
+        ...panelProps("year"),
+        className: "w-1/3 h-full"
+    }, /*#__PURE__*/ react.createElement(ScrollArea, {
+        className: "h-full"
+    }, /*#__PURE__*/ react.createElement("div", {
+        className: "px-md py-xs"
+    }, /*#__PURE__*/ react.createElement("div", {
+        className: cn("grid grid-cols-5 gap-sm w-full mx-auto", wideGridWidth)
+    }, years.map((year)=>/*#__PURE__*/ react.createElement(BirthdayPickerCell, {
+            key: year,
+            selected: draft.year === year,
+            disabled: isYearDisabled(year, draft, range),
+            tabbable: "year" === step,
+            onClick: ()=>onPickYear(year)
+        }, year)))))))))))))));
+};
+export { BirthdayPicker };
+
+//# sourceMappingURL=BirthdayPicker.js.map

package/DatePicker/primitives/BirthdayPicker.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DatePicker/primitives/BirthdayPicker.js","sources":["../../../src/DatePicker/primitives/BirthdayPicker.tsx"],"sourcesContent":["import React, { useEffect, useLayoutEffect, useMemo, useRef, useState } from \"react\";\nimport { Popover as RadixPopover } from \"radix-ui\";\nimport { ReactComponent as CalendarMonthIcon } from \"@webiny/icons/calendar_month.svg\";\nimport { ReactComponent as CloseIcon } from \"@webiny/icons/close.svg\";\nimport { Icon } from \"~/Icon/index.js\";\nimport { inputVariants } from \"~/Input/index.js\";\nimport { ScrollArea } from \"~/ScrollArea/index.js\";\nimport { useEscapeScrollLock } from \"~/hooks/index.js\";\nimport { cn, cva } from \"~/utils.js\";\nimport type { BirthdayPickerProps } from \"../utils/types.js\";\nimport { BirthdayPickerCell } from \"./BirthdayPickerCell.js\";\nimport { BirthdayPickerSegments } from \"./BirthdayPickerSegments.js\";\nimport { MONTH_NAMES_FULL } from \"../utils/constants.js\";\nimport {\n    type BirthdayParts,\n    type BirthdayStep,\n    type BirthdayRange,\n    birthdayYears,\n    formatBirthdayValue,\n    isDayDisabled,\n    isMonthDisabled,\n    isYearDisabled,\n    nextBirthdayStep,\n    pad,\n    parseBirthdayValue,\n    pickDay,\n    pickMonth,\n    pickYear\n} from \"../utils/birthdayHelpers.js\";\n\ntype Step = BirthdayStep;\n\nconst STEPS: Step[] = [\"day\", \"month\", \"year\"];\n\nconst STEP_LABELS: Record<Step, string> = {\n    day: \"Select a day\",\n    month: \"Select a month\",\n    year: \"Select a year\"\n};\n\nconst DAYS = Array.from({ length: 31 }, (_, index) => index + 1);\nconst MONTHS = Array.from({ length: 12 }, (_, index) => index + 1);\n\n/** Timings, in ms. */\nconst EXPAND_MS = 250;\nconst SLIDE_MS = 300;\nconst FADE_OUT_MS = 120;\nconst COLLAPSE_MS = 200;\n\n/**\n * - `collapsed`: the card is mounted at the bar's height, about to grow (or done shrinking).\n * - `expanded`: the card is at full height with the step grid showing.\n * - `collapsing`: the body fades and the card shrinks back into the bar.\n */\ntype Phase = \"collapsed\" | \"expanded\" | \"collapsing\";\n\n/**\n * The card is the bar, grown: it keeps the focused input's border, its corner radius and, in the\n * header, its horizontal padding, so the date doesn't move when the card opens.\n */\nconst cardVariants = cva(\n    [\n        \"bg-neutral-base border-sm border-neutral-black shadow-lg overflow-hidden\",\n        \"text-md text-neutral-strong fill-neutral-xstrong\",\n        \"w-(--radix-popover-trigger-width) min-w-[320px]\"\n    ],\n    {\n        variants: {\n            size: {\n                md: \"rounded-md\",\n                lg: \"rounded-md\",\n                xl: \"rounded-lg leading-6\"\n            }\n        },\n        defaultVariants: {\n            size: \"lg\"\n        }\n    }\n);\n\nconst cardHeaderVariants = cva(\"flex items-center justify-between gap-sm\", {\n    variants: {\n        size: {\n            md: \"px-[calc(var(--padding-sm-extra)-(var(--border-width-sm)))]\",\n            lg: \"px-[calc(var(--padding-sm-extra)-(var(--border-width-sm)))]\",\n            xl: \"px-[calc(var(--padding-md)-(var(--border-width-sm)))]\"\n        }\n    },\n    defaultVariants: {\n        size: \"lg\"\n    }\n});\n\n/**\n * Every step shares one grid height, the day grid's six rows plus the inset that keeps a cell's\n * focus ring inside the clipped area, so the card keeps its height as the steps slide. Only the\n * year grid scrolls inside it.\n */\nconst gridHeight = \"h-[calc(6*var(--spacing-xl)+5*var(--spacing-sm)+2*var(--spacing-xs))]\";\nconst dayGridWidth = \"max-w-[calc(6*var(--spacing-xxl)+5*var(--spacing-xs))]\";\nconst wideGridWidth = \"max-w-[calc(5*var(--spacing-3xl)+4*var(--spacing-sm))]\";\n\n/**\n * Picks a date one part at a time: a day, then a month, then a year. Each pick moves to the\n * next step. A pick that completes the date commits it, and the last step closes the picker.\n * Meant for dates far in the past, like a date of birth, where paging a calendar month by\n * month is slow.\n *\n * The value is a `YYYY-MM-DD` string, the same as the `date` picker's. Days, months and years\n * that can't make a date between `minDate` and `maxDate` can't be picked.\n */\nconst BirthdayPicker = ({\n    value,\n    onChange,\n    disabled,\n    size,\n    variant,\n    invalid,\n    yearRange,\n    minDate,\n    maxDate,\n    onOpenChange,\n    className\n}: BirthdayPickerProps) => {\n    const [open, setOpen] = useState(false);\n    const [phase, setPhase] = useState<Phase>(\"collapsed\");\n    const [step, setStep] = useState<Step>(\"day\");\n    const [draft, setDraft] = useState<BirthdayParts>({});\n    const [barHeight, setBarHeight] = useState(0);\n    const [bodyHeight, setBodyHeight] = useState(0);\n\n    const barRef = useRef<HTMLDivElement>(null);\n    const cardRef = useRef<HTMLDivElement | null>(null);\n    /** The divider and the step body: what the card adds to the bar's height when it grows. */\n    const bodyRef = useRef<HTMLDivElement | null>(null);\n    const panelRefs = useRef<Record<Step, HTMLDivElement | null>>({\n        day: null,\n        month: null,\n        year: null\n    });\n    /** The steps picked since the card opened. */\n    const picked = useRef<Set<Step>>(new Set());\n    const closeTimer = useRef<ReturnType<typeof setTimeout>>();\n    const escapeScrollLock = useEscapeScrollLock<HTMLDivElement>();\n\n    const saved = useMemo(() => parseBirthdayValue(value), [value]);\n    const years = useMemo(\n        () => birthdayYears(yearRange, saved.year, { minDate, maxDate }),\n        [yearRange, saved.year, minDate, maxDate]\n    );\n    const range = useMemo<BirthdayRange>(\n        () => ({ years, minDate, maxDate }),\n        [years, minDate, maxDate]\n    );\n\n    useEffect(() => () => clearTimeout(closeTimer.current), []);\n\n    const expand = () => {\n        if (disabled || open) {\n            return;\n        }\n        clearTimeout(closeTimer.current);\n        setBarHeight(barRef.current?.offsetHeight ?? 0);\n        setDraft(saved);\n        picked.current = new Set();\n        setStep(\"day\");\n        setPhase(\"collapsed\");\n        setOpen(true);\n        onOpenChange?.(true);\n    };\n\n    const collapse = () => {\n        if (phase === \"collapsing\") {\n            return;\n        }\n        setPhase(\"collapsing\");\n        closeTimer.current = setTimeout(() => {\n            setOpen(false);\n            setPhase(\"collapsed\");\n            onOpenChange?.(false);\n        }, FADE_OUT_MS + COLLAPSE_MS);\n    };\n\n    /**\n     * The card mounts at the bar's height. Wait for the popper to place it before growing,\n     * or the first part of the growth happens off screen. The body is laid out by its own\n     * spacing, so its height is measured here, once it exists, and the card grows by that much.\n     */\n    useLayoutEffect(() => {\n        if (!open || phase !== \"collapsed\") {\n            return;\n        }\n        let second = 0;\n        const first = requestAnimationFrame(() => {\n            second = requestAnimationFrame(() => {\n                setBodyHeight(bodyRef.current?.offsetHeight ?? 0);\n                setPhase(\"expanded\");\n            });\n        });\n        return () => {\n            cancelAnimationFrame(first);\n            cancelAnimationFrame(second);\n        };\n    }, [open, phase]);\n\n    /** A card that grows past the bottom of the viewport brings the field into view. */\n    useEffect(() => {\n        if (phase !== \"expanded\") {\n            return;\n        }\n        const timer = setTimeout(() => {\n            const rect = cardRef.current?.getBoundingClientRect();\n            if (rect && rect.bottom > window.innerHeight) {\n                barRef.current?.scrollIntoView({ block: \"center\", behavior: \"smooth\" });\n            }\n        }, EXPAND_MS);\n        return () => clearTimeout(timer);\n    }, [phase]);\n\n    /**\n     * Entering a step focuses its selected cell (or its first one) so the keyboard picks up\n     * where the pointer would. The year grid also scrolls the selected year into view, or\n     * back to the newest year when none is selected.\n     *\n     * The popover portal mounts its content a render after `open` flips, so this waits for\n     * the card to expand, by which point the panels exist.\n     */\n    useEffect(() => {\n        if (!open || phase !== \"expanded\") {\n            return;\n        }\n        const panel = panelRefs.current[step];\n        if (!panel) {\n            return;\n        }\n        const selected = panel.querySelector<HTMLButtonElement>(\"[data-selected=true]\");\n        const viewport = panel.querySelector<HTMLDivElement>(\"[data-slot=scroll-area-viewport]\");\n        if (viewport) {\n            if (selected) {\n                const offset =\n                    selected.getBoundingClientRect().top - viewport.getBoundingClientRect().top;\n                viewport.scrollTop +=\n                    offset - viewport.clientHeight / 2 + selected.offsetHeight / 2;\n            } else {\n                viewport.scrollTop = 0;\n            }\n        }\n        const target = selected ?? panel.querySelector<HTMLButtonElement>(\"button:enabled\");\n        target?.focus({ preventScroll: true });\n    }, [open, phase, step]);\n\n    const goToStep = (next: Step) => {\n        setStep(next);\n    };\n\n    /**\n     * Any pick that completes the date commits it, so closing the card early never drops a\n     * date the header shows as filled. The header segments let parts be picked out of order.\n     */\n    const onPick = (pickedStep: Step, next: BirthdayParts) => {\n        setDraft(next);\n        picked.current.add(pickedStep);\n        const nextValue = formatBirthdayValue(next);\n        if (nextValue) {\n            onChange?.(nextValue);\n        }\n        const nextStep = nextBirthdayStep(next, pickedStep, picked.current);\n        if (nextStep) {\n            goToStep(nextStep);\n            return;\n        }\n        collapse();\n    };\n\n    const onPickDay = (day: number) => onPick(\"day\", pickDay(draft, day, range));\n\n    const onPickMonth = (month: number) => onPick(\"month\", pickMonth(draft, month, range));\n\n    const onPickYear = (year: number) => onPick(\"year\", pickYear(draft, year));\n\n    const onBarKeyDown = (event: React.KeyboardEvent<HTMLDivElement>) => {\n        if (event.target !== event.currentTarget) {\n            return;\n        }\n        if (event.key === \"Enter\" || event.key === \" \" || event.key === \"ArrowDown\") {\n            event.preventDefault();\n            expand();\n        }\n    };\n\n    const expanded = phase === \"expanded\";\n    const cardHeight = expanded ? barHeight + bodyHeight : barHeight;\n    const stepIndex = STEPS.indexOf(step);\n\n    const icons = (interactive: boolean) => (\n        <span className=\"flex items-center gap-xs shrink-0\">\n            {interactive && value && !disabled ? (\n                <button\n                    type=\"button\"\n                    aria-label=\"Clear date\"\n                    className=\"flex cursor-pointer rounded-xs outline-none focus-visible:ring-sm focus-visible:ring-primary-dimmed\"\n                    onClick={event => {\n                        event.stopPropagation();\n                        onChange?.(undefined);\n                    }}\n                    onKeyDown={event => event.stopPropagation()}\n                >\n                    <Icon icon={<CloseIcon />} label=\"Clear\" size=\"sm\" color=\"inherit\" />\n                </button>\n            ) : null}\n            <Icon icon={<CalendarMonthIcon />} label=\"Calendar\" size=\"sm\" color=\"inherit\" />\n        </span>\n    );\n\n    const panelProps = (panelStep: Step) => ({\n        ref: (element: HTMLDivElement | null) => {\n            panelRefs.current[panelStep] = element;\n        },\n        \"aria-hidden\": step !== panelStep,\n        \"data-step\": panelStep\n    });\n\n    return (\n        <div className={className}>\n            <RadixPopover.Root\n                open={open}\n                onOpenChange={isOpen => (isOpen ? expand() : collapse())}\n            >\n                <RadixPopover.Anchor asChild>\n                    <div\n                        ref={barRef}\n                        role=\"button\"\n                        tabIndex={disabled ? -1 : 0}\n                        aria-haspopup=\"dialog\"\n                        aria-expanded={open}\n                        data-disabled={disabled}\n                        data-focused={open}\n                        onClick={expand}\n                        onKeyDown={onBarKeyDown}\n                        className={cn(\n                            inputVariants({ size, variant, invalid }),\n                            \"cursor-pointer justify-between select-none min-w-0 overflow-hidden outline-none\",\n                            disabled && \"pointer-events-none\"\n                        )}\n                    >\n                        <BirthdayPickerSegments parts={saved} />\n                        {icons(true)}\n                    </div>\n                </RadixPopover.Anchor>\n                <RadixPopover.Portal>\n                    <RadixPopover.Content\n                        ref={escapeScrollLock}\n                        side=\"bottom\"\n                        align=\"start\"\n                        sideOffset={-barHeight}\n                        avoidCollisions={false}\n                        onOpenAutoFocus={event => event.preventDefault()}\n                        onCloseAutoFocus={event => {\n                            event.preventDefault();\n                            barRef.current?.focus({ preventScroll: true });\n                        }}\n                        className=\"z-popover outline-none\"\n                    >\n                        <div\n                            ref={cardRef}\n                            role=\"dialog\"\n                            aria-label={STEP_LABELS[step]}\n                            data-phase={phase}\n                            className={cn(\n                                cardVariants({ size }),\n                                phase === \"collapsing\" && \"pointer-events-none\"\n                            )}\n                            style={{\n                                height: cardHeight,\n                                transition:\n                                    phase === \"collapsing\"\n                                        ? `height ${COLLAPSE_MS}ms ease-in ${FADE_OUT_MS}ms`\n                                        : `height ${EXPAND_MS}ms ease-out`\n                            }}\n                        >\n                            <div\n                                className={cardHeaderVariants({ size })}\n                                style={{\n                                    height: `calc(${barHeight}px - 2 * var(--border-width-sm))`\n                                }}\n                            >\n                                <BirthdayPickerSegments\n                                    parts={draft}\n                                    activeStep={step}\n                                    onStepClick={goToStep}\n                                />\n                                {icons(false)}\n                            </div>\n                            <div ref={bodyRef}>\n                                <div\n                                    className=\"h-px bg-neutral-dimmed origin-center\"\n                                    style={{\n                                        transform: expanded ? \"scaleX(1)\" : \"scaleX(0)\",\n                                        transition: `transform ${EXPAND_MS}ms ease-out`\n                                    }}\n                                />\n                                <div\n                                    className=\"pb-md\"\n                                    style={{\n                                        opacity: expanded ? 1 : 0,\n                                        transition: expanded\n                                            ? `opacity 200ms ease-out ${EXPAND_MS - 100}ms`\n                                            : `opacity ${FADE_OUT_MS}ms ease-in`\n                                    }}\n                                >\n                                    <div\n                                        className=\"pt-sm-extra pb-xs text-center text-sm text-neutral-muted\"\n                                        aria-live=\"polite\"\n                                    >\n                                        {STEP_LABELS[step]}\n                                    </div>\n                                    <div className={cn(\"overflow-hidden\", gridHeight)}>\n                                        <div\n                                            className=\"flex h-full w-[300%]\"\n                                            style={{\n                                                transform: `translateX(-${(stepIndex * 100) / 3}%)`,\n                                                transition: `transform ${SLIDE_MS}ms ease-in-out`\n                                            }}\n                                        >\n                                            <div\n                                                {...panelProps(\"day\")}\n                                                className=\"w-1/3 h-full px-md py-xs\"\n                                            >\n                                                <div\n                                                    className={cn(\n                                                        \"grid grid-cols-6 gap-x-xs gap-y-sm mx-auto\",\n                                                        dayGridWidth\n                                                    )}\n                                                >\n                                                    {DAYS.map(day => (\n                                                        <BirthdayPickerCell\n                                                            key={day}\n                                                            selected={draft.day === day}\n                                                            disabled={isDayDisabled(day, range)}\n                                                            tabbable={step === \"day\"}\n                                                            onClick={() => onPickDay(day)}\n                                                        >\n                                                            {pad(day)}\n                                                        </BirthdayPickerCell>\n                                                    ))}\n                                                </div>\n                                            </div>\n                                            <div\n                                                {...panelProps(\"month\")}\n                                                className=\"w-1/3 h-full px-md py-xs flex items-center\"\n                                            >\n                                                <div\n                                                    className={cn(\n                                                        \"grid grid-cols-3 gap-x-sm gap-y-md w-full mx-auto\",\n                                                        wideGridWidth\n                                                    )}\n                                                >\n                                                    {MONTHS.map(month => (\n                                                        <BirthdayPickerCell\n                                                            key={month}\n                                                            selected={draft.month === month}\n                                                            disabled={isMonthDisabled(\n                                                                month,\n                                                                draft,\n                                                                range\n                                                            )}\n                                                            tabbable={step === \"month\"}\n                                                            onClick={() => onPickMonth(month)}\n                                                        >\n                                                            {MONTH_NAMES_FULL[month - 1]}\n                                                        </BirthdayPickerCell>\n                                                    ))}\n                                                </div>\n                                            </div>\n                                            <div {...panelProps(\"year\")} className=\"w-1/3 h-full\">\n                                                <ScrollArea className=\"h-full\">\n                                                    <div className=\"px-md py-xs\">\n                                                        <div\n                                                            className={cn(\n                                                                \"grid grid-cols-5 gap-sm w-full mx-auto\",\n                                                                wideGridWidth\n                                                            )}\n                                                        >\n                                                            {years.map(year => (\n                                                                <BirthdayPickerCell\n                                                                    key={year}\n                                                                    selected={draft.year === year}\n                                                                    disabled={isYearDisabled(\n                                                                        year,\n                                                                        draft,\n                                                                        range\n                                                                    )}\n                                                                    tabbable={step === \"year\"}\n                                                                    onClick={() => onPickYear(year)}\n                                                                >\n                                                                    {year}\n                                                                </BirthdayPickerCell>\n                                                            ))}\n                                                        </div>\n                                                    </div>\n                                                </ScrollArea>\n                                            </div>\n                                        </div>\n                                    </div>\n                                </div>\n                            </div>\n                        </div>\n                    </RadixPopover.Content>\n                </RadixPopover.Portal>\n            </RadixPopover.Root>\n        </div>\n    );\n};\n\nexport { BirthdayPicker };\n"],"names":["STEPS","STEP_LABELS","DAYS","Array","_","index","MONTHS","EXPAND_MS","SLIDE_MS","FADE_OUT_MS","COLLAPSE_MS","cardVariants","cva","cardHeaderVariants","gridHeight","dayGridWidth","wideGridWidth","BirthdayPicker","value","onChange","disabled","size","variant","invalid","yearRange","minDate","maxDate","onOpenChange","className","open","setOpen","useState","phase","setPhase","step","setStep","draft","setDraft","barHeight","setBarHeight","bodyHeight","setBodyHeight","barRef","useRef","cardRef","bodyRef","panelRefs","picked","Set","closeTimer","escapeScrollLock","useEscapeScrollLock","saved","useMemo","parseBirthdayValue","years","birthdayYears","range","useEffect","clearTimeout","expand","collapse","setTimeout","useLayoutEffect","second","first","requestAnimationFrame","cancelAnimationFrame","timer","rect","window","panel","selected","viewport","offset","target","goToStep","next","onPick","pickedStep","nextValue","formatBirthdayValue","nextStep","nextBirthdayStep","onPickDay","day","pickDay","onPickMonth","month","pickMonth","onPickYear","year","pickYear","onBarKeyDown","event","expanded","cardHeight","stepIndex","icons","interactive","undefined","Icon","CloseIcon","CalendarMonthIcon","panelProps","panelStep","element","RadixPopover","isOpen","cn","inputVariants","BirthdayPickerSegments","BirthdayPickerCell","isDayDisabled","pad","isMonthDisabled","MONTH_NAMES_FULL","ScrollArea","isYearDisabled"],"mappings":"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"}

package/DatePicker/primitives/BirthdayPickerCell.d.ts

@@ -0,0 +1,14 @@
+import React from "react";
+interface BirthdayPickerCellProps {
+    selected: boolean;
+    disabled?: boolean;
+    tabbable: boolean;
+    onClick: () => void;
+    children: React.ReactNode;
+}
+/**
+ * One day, month or year in a step's grid. It reads as a button: a ghost one, or a primary one
+ * for the picked value, the same as the month and year grids of the other pickers.
+ */
+declare const BirthdayPickerCell: ({ selected, disabled, tabbable, onClick, children }: BirthdayPickerCellProps) => React.JSX.Element;
+export { BirthdayPickerCell };

package/DatePicker/primitives/BirthdayPickerCell.js

@@ -0,0 +1,19 @@
+import react from "react";
+import { buttonVariants } from "../../Button/index.js";
+import { cn } from "../../utils.js";
+const BirthdayPickerCell = ({ selected, disabled, tabbable, onClick, children })=>/*#__PURE__*/ react.createElement("button", {
+        type: "button",
+        disabled: disabled,
+        "aria-disabled": disabled,
+        "aria-pressed": selected,
+        "data-selected": selected,
+        tabIndex: tabbable && !disabled ? 0 : -1,
+        onClick: onClick,
+        className: cn(buttonVariants({
+            variant: selected ? "primary" : "ghost",
+            size: "md"
+        }), "w-full tabular-nums")
+    }, children);
+export { BirthdayPickerCell };
+
+//# sourceMappingURL=BirthdayPickerCell.js.map

package/DatePicker/primitives/BirthdayPickerCell.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DatePicker/primitives/BirthdayPickerCell.js","sources":["../../../src/DatePicker/primitives/BirthdayPickerCell.tsx"],"sourcesContent":["import React from \"react\";\nimport { buttonVariants } from \"~/Button/index.js\";\nimport { cn } from \"~/utils.js\";\n\ninterface BirthdayPickerCellProps {\n    selected: boolean;\n    disabled?: boolean;\n    tabbable: boolean;\n    onClick: () => void;\n    children: React.ReactNode;\n}\n\n/**\n * One day, month or year in a step's grid. It reads as a button: a ghost one, or a primary one\n * for the picked value, the same as the month and year grids of the other pickers.\n */\nconst BirthdayPickerCell = ({\n    selected,\n    disabled,\n    tabbable,\n    onClick,\n    children\n}: BirthdayPickerCellProps) => (\n    <button\n        type=\"button\"\n        disabled={disabled}\n        aria-disabled={disabled}\n        aria-pressed={selected}\n        data-selected={selected}\n        tabIndex={tabbable && !disabled ? 0 : -1}\n        onClick={onClick}\n        className={cn(\n            buttonVariants({ variant: selected ? \"primary\" : \"ghost\", size: \"md\" }),\n            \"w-full tabular-nums\"\n        )}\n    >\n        {children}\n    </button>\n);\n\nexport { BirthdayPickerCell };\n"],"names":["BirthdayPickerCell","selected","disabled","tabbable","onClick","children","cn","buttonVariants"],"mappings":";;;AAgBA,MAAMA,qBAAqB,CAAC,EACxBC,QAAQ,EACRC,QAAQ,EACRC,QAAQ,EACRC,OAAO,EACPC,QAAQ,EACc,iBACtB,oBAAC;QACG,MAAK;QACL,UAAUH;QACV,iBAAeA;QACf,gBAAcD;QACd,iBAAeA;QACf,UAAUE,YAAY,CAACD,WAAW,IAAI;QACtC,SAASE;QACT,WAAWE,GACPC,eAAe;YAAE,SAASN,WAAW,YAAY;YAAS,MAAM;QAAK,IACrE;OAGHI"}

package/DatePicker/primitives/BirthdayPickerSegments.d.ts

@@ -0,0 +1,9 @@
+import React from "react";
+import { type BirthdayParts, type BirthdayStep } from "../utils/birthdayHelpers.js";
+interface BirthdayPickerSegmentsProps {
+    parts: BirthdayParts;
+    activeStep?: BirthdayStep;
+    onStepClick?: (step: BirthdayStep) => void;
+}
+declare const BirthdayPickerSegments: ({ parts, activeStep, onStepClick }: BirthdayPickerSegmentsProps) => React.JSX.Element;
+export { BirthdayPickerSegments };

package/DatePicker/primitives/BirthdayPickerSegments.js

@@ -0,0 +1,43 @@
+import react from "react";
+import { cn } from "../../utils.js";
+import { pad } from "../utils/birthdayHelpers.js";
+const BirthdayPickerSegments = ({ parts, activeStep, onStepClick })=>{
+    const segments = [
+        {
+            step: "day",
+            text: parts.day ? pad(parts.day) : "DD",
+            filled: !!parts.day
+        },
+        {
+            step: "month",
+            text: parts.month ? pad(parts.month) : "MM",
+            filled: !!parts.month
+        },
+        {
+            step: "year",
+            text: parts.year ? String(parts.year) : "YYYY",
+            filled: !!parts.year
+        }
+    ];
+    return /*#__PURE__*/ react.createElement("span", {
+        className: "flex items-center gap-xs tabular-nums whitespace-nowrap"
+    }, segments.map((segment, index)=>{
+        const className = cn("transition-colors", !segment.filled && "text-neutral-dimmed", activeStep === segment.step && "text-accent-primary");
+        return /*#__PURE__*/ react.createElement(react.Fragment, {
+            key: segment.step
+        }, index > 0 ? /*#__PURE__*/ react.createElement("span", {
+            className: "text-neutral-dimmed"
+        }, "/") : null, onStepClick ? /*#__PURE__*/ react.createElement("button", {
+            type: "button",
+            tabIndex: -1,
+            "data-step": segment.step,
+            className: cn(className, "cursor-pointer outline-none"),
+            onClick: ()=>onStepClick(segment.step)
+        }, segment.text) : /*#__PURE__*/ react.createElement("span", {
+            className: className
+        }, segment.text));
+    }));
+};
+export { BirthdayPickerSegments };
+
+//# sourceMappingURL=BirthdayPickerSegments.js.map

package/DatePicker/primitives/BirthdayPickerSegments.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DatePicker/primitives/BirthdayPickerSegments.js","sources":["../../../src/DatePicker/primitives/BirthdayPickerSegments.tsx"],"sourcesContent":["import React from \"react\";\nimport { cn } from \"~/utils.js\";\nimport { type BirthdayParts, type BirthdayStep, pad } from \"../utils/birthdayHelpers.js\";\n\ninterface BirthdayPickerSegmentsProps {\n    parts: BirthdayParts;\n    activeStep?: BirthdayStep;\n    onStepClick?: (step: BirthdayStep) => void;\n}\n\nconst BirthdayPickerSegments = ({\n    parts,\n    activeStep,\n    onStepClick\n}: BirthdayPickerSegmentsProps) => {\n    const segments: Array<{ step: BirthdayStep; text: string; filled: boolean }> = [\n        { step: \"day\", text: parts.day ? pad(parts.day) : \"DD\", filled: !!parts.day },\n        { step: \"month\", text: parts.month ? pad(parts.month) : \"MM\", filled: !!parts.month },\n        { step: \"year\", text: parts.year ? String(parts.year) : \"YYYY\", filled: !!parts.year }\n    ];\n\n    return (\n        <span className=\"flex items-center gap-xs tabular-nums whitespace-nowrap\">\n            {segments.map((segment, index) => {\n                // A filled part takes the input's value colour; an empty one reads as its placeholder.\n                const className = cn(\n                    \"transition-colors\",\n                    !segment.filled && \"text-neutral-dimmed\",\n                    activeStep === segment.step && \"text-accent-primary\"\n                );\n                return (\n                    <React.Fragment key={segment.step}>\n                        {index > 0 ? <span className=\"text-neutral-dimmed\">/</span> : null}\n                        {onStepClick ? (\n                            <button\n                                type=\"button\"\n                                tabIndex={-1}\n                                data-step={segment.step}\n                                className={cn(className, \"cursor-pointer outline-none\")}\n                                onClick={() => onStepClick(segment.step)}\n                            >\n                                {segment.text}\n                            </button>\n                        ) : (\n                            <span className={className}>{segment.text}</span>\n                        )}\n                    </React.Fragment>\n                );\n            })}\n        </span>\n    );\n};\n\nexport { BirthdayPickerSegments };\n"],"names":["BirthdayPickerSegments","parts","activeStep","onStepClick","segments","pad","String","segment","index","className","cn","React"],"mappings":";;;AAUA,MAAMA,yBAAyB,CAAC,EAC5BC,KAAK,EACLC,UAAU,EACVC,WAAW,EACe;IAC1B,MAAMC,WAAyE;QAC3E;YAAE,MAAM;YAAO,MAAMH,MAAM,GAAG,GAAGI,IAAIJ,MAAM,GAAG,IAAI;YAAM,QAAQ,CAAC,CAACA,MAAM,GAAG;QAAC;QAC5E;YAAE,MAAM;YAAS,MAAMA,MAAM,KAAK,GAAGI,IAAIJ,MAAM,KAAK,IAAI;YAAM,QAAQ,CAAC,CAACA,MAAM,KAAK;QAAC;QACpF;YAAE,MAAM;YAAQ,MAAMA,MAAM,IAAI,GAAGK,OAAOL,MAAM,IAAI,IAAI;YAAQ,QAAQ,CAAC,CAACA,MAAM,IAAI;QAAC;KACxF;IAED,OAAO,WAAP,GACI,oBAAC;QAAK,WAAU;OACXG,SAAS,GAAG,CAAC,CAACG,SAASC;QAEpB,MAAMC,YAAYC,GACd,qBACA,CAACH,QAAQ,MAAM,IAAI,uBACnBL,eAAeK,QAAQ,IAAI,IAAI;QAEnC,OAAO,WAAP,GACI,oBAACI,MAAAA,QAAc;YAAC,KAAKJ,QAAQ,IAAI;WAC5BC,QAAQ,IAAI,WAAJ,GAAI,oBAAC;YAAK,WAAU;WAAsB,OAAW,MAC7DL,cAAc,WAAdA,GACG,oBAAC;YACG,MAAK;YACL,UAAU;YACV,aAAWI,QAAQ,IAAI;YACvB,WAAWG,GAAGD,WAAW;YACzB,SAAS,IAAMN,YAAYI,QAAQ,IAAI;WAEtCA,QAAQ,IAAI,kBAGjB,oBAAC;YAAK,WAAWE;WAAYF,QAAQ,IAAI;IAIzD;AAGZ"}

package/DatePicker/primitives/DateOnlyPicker.d.ts

@@ -0,0 +1,4 @@
+import React from "react";
+import type { DateOnlyPickerProps } from "../utils/types.js";
+declare const DateOnlyPicker: ({ value, onChange, placeholder, disabled, size, variant, invalid, weekStartsOn, onOpenChange, className, presets, displayFormat, minDate, maxDate }: DateOnlyPickerProps) => React.JSX.Element;
+export { DateOnlyPicker };

package/DatePicker/primitives/DateOnlyPicker.js

@@ -0,0 +1,67 @@
+import react, { useState } from "react";
+import { format } from "date-fns";
+import { Button } from "../../Button/index.js";
+import { Calendar } from "../../Calendar/index.js";
+import { PopoverPrimitive } from "../../Popover/index.js";
+import { formatDateForDisplay, parseDateValue } from "../utils/dateHelpers.js";
+import { DatePickerTrigger } from "./components/DatePickerTrigger.js";
+const DateOnlyPicker = ({ value, onChange, placeholder, disabled, size, variant, invalid, weekStartsOn, onOpenChange, className, presets, displayFormat, minDate, maxDate })=>{
+    const [open, setOpen] = useState(false);
+    const handleOpenChange = (isOpen)=>{
+        setOpen(isOpen);
+        if (onOpenChange) onOpenChange(isOpen);
+    };
+    const handlePresetClick = (computeDate)=>{
+        if (onChange) onChange(format(computeDate(), "yyyy-MM-dd"));
+        handleOpenChange(false);
+    };
+    const displayValue = formatDateForDisplay(value, "date", displayFormat);
+    const selectedDate = value ? parseDateValue(value) : void 0;
+    const disabledDays = [];
+    if (minDate) disabledDays.push({
+        before: minDate
+    });
+    if (maxDate) disabledDays.push({
+        after: maxDate
+    });
+    return /*#__PURE__*/ react.createElement("div", {
+        className: className
+    }, /*#__PURE__*/ react.createElement(PopoverPrimitive, {
+        open: open,
+        onOpenChange: handleOpenChange
+    }, /*#__PURE__*/ react.createElement(DatePickerTrigger, {
+        displayValue: displayValue,
+        placeholder: placeholder ?? "Pick a date",
+        disabled: disabled,
+        size: size,
+        variant: variant,
+        invalid: invalid
+    }), /*#__PURE__*/ react.createElement(PopoverPrimitive.Content, {
+        align: "start"
+    }, /*#__PURE__*/ react.createElement("div", {
+        className: presets?.length ? "flex" : void 0
+    }, /*#__PURE__*/ react.createElement(Calendar, {
+        mode: "single",
+        selected: selectedDate,
+        onSelect: (date)=>{
+            if (onChange) onChange(date ? format(date, "yyyy-MM-dd") : void 0);
+            handleOpenChange(false);
+        },
+        weekStartsOn: weekStartsOn,
+        disabled: disabledDays
+    }), presets && presets.length > 0 && /*#__PURE__*/ react.createElement("div", {
+        className: "flex flex-col gap-xs border-l-sm border-neutral-muted p-sm min-w-[130px]"
+    }, presets.map((preset)=>{
+        const presetDate = format(preset.value(), "yyyy-MM-dd");
+        return /*#__PURE__*/ react.createElement(Button, {
+            key: preset.label,
+            variant: value === presetDate ? "primary" : "ghost",
+            size: "sm",
+            text: preset.label,
+            onClick: ()=>handlePresetClick(preset.value)
+        });
+    }))))));
+};
+export { DateOnlyPicker };
+
+//# sourceMappingURL=DateOnlyPicker.js.map

package/DatePicker/primitives/DateOnlyPicker.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DatePicker/primitives/DateOnlyPicker.js","sources":["../../../src/DatePicker/primitives/DateOnlyPicker.tsx"],"sourcesContent":["import React, { useState } from \"react\";\nimport { format } from \"date-fns\";\nimport type { Matcher } from \"react-day-picker\";\nimport { Button } from \"~/Button/index.js\";\nimport { Calendar } from \"~/Calendar/index.js\";\nimport { PopoverPrimitive } from \"~/Popover/index.js\";\nimport type { DateOnlyPickerProps } from \"../utils/types.js\";\nimport { formatDateForDisplay, parseDateValue } from \"../utils/dateHelpers.js\";\nimport { DatePickerTrigger } from \"./components/DatePickerTrigger.js\";\n\nconst DateOnlyPicker = ({\n    value,\n    onChange,\n    placeholder,\n    disabled,\n    size,\n    variant,\n    invalid,\n    weekStartsOn,\n    onOpenChange,\n    className,\n    presets,\n    displayFormat,\n    minDate,\n    maxDate\n}: DateOnlyPickerProps) => {\n    const [open, setOpen] = useState(false);\n\n    const handleOpenChange = (isOpen: boolean) => {\n        setOpen(isOpen);\n        if (onOpenChange) {\n            onOpenChange(isOpen);\n        }\n    };\n\n    const handlePresetClick = (computeDate: () => Date) => {\n        if (onChange) {\n            onChange(format(computeDate(), \"yyyy-MM-dd\"));\n        }\n        handleOpenChange(false);\n    };\n\n    const displayValue = formatDateForDisplay(value, \"date\", displayFormat);\n    const selectedDate = value ? parseDateValue(value) : undefined;\n\n    // The days outside minDate and maxDate cannot be picked, as in DateTimePicker.\n    const disabledDays: Matcher[] = [];\n    if (minDate) {\n        disabledDays.push({ before: minDate });\n    }\n    if (maxDate) {\n        disabledDays.push({ after: maxDate });\n    }\n\n    return (\n        <div className={className}>\n            <PopoverPrimitive open={open} onOpenChange={handleOpenChange}>\n                <DatePickerTrigger\n                    displayValue={displayValue}\n                    placeholder={placeholder ?? \"Pick a date\"}\n                    disabled={disabled}\n                    size={size}\n                    variant={variant}\n                    invalid={invalid}\n                />\n                <PopoverPrimitive.Content align=\"start\">\n                    <div className={presets?.length ? \"flex\" : undefined}>\n                        <Calendar\n                            mode=\"single\"\n                            selected={selectedDate}\n                            onSelect={date => {\n                                if (onChange) {\n                                    onChange(date ? format(date, \"yyyy-MM-dd\") : undefined);\n                                }\n                                handleOpenChange(false);\n                            }}\n                            weekStartsOn={weekStartsOn}\n                            disabled={disabledDays}\n                        />\n                        {presets && presets.length > 0 && (\n                            <div className=\"flex flex-col gap-xs border-l-sm border-neutral-muted p-sm min-w-[130px]\">\n                                {presets.map(preset => {\n                                    const presetDate = format(preset.value(), \"yyyy-MM-dd\");\n                                    return (\n                                        <Button\n                                            key={preset.label}\n                                            variant={value === presetDate ? \"primary\" : \"ghost\"}\n                                            size=\"sm\"\n                                            text={preset.label}\n                                            onClick={() => handlePresetClick(preset.value)}\n                                        />\n                                    );\n                                })}\n                            </div>\n                        )}\n                    </div>\n                </PopoverPrimitive.Content>\n            </PopoverPrimitive>\n        </div>\n    );\n};\n\nexport { DateOnlyPicker };\n"],"names":["DateOnlyPicker","value","onChange","placeholder","disabled","size","variant","invalid","weekStartsOn","onOpenChange","className","presets","displayFormat","minDate","maxDate","open","setOpen","useState","handleOpenChange","isOpen","handlePresetClick","computeDate","format","displayValue","formatDateForDisplay","selectedDate","parseDateValue","undefined","disabledDays","PopoverPrimitive","DatePickerTrigger","Calendar","date","preset","presetDate","Button"],"mappings":";;;;;;;AAUA,MAAMA,iBAAiB,CAAC,EACpBC,KAAK,EACLC,QAAQ,EACRC,WAAW,EACXC,QAAQ,EACRC,IAAI,EACJC,OAAO,EACPC,OAAO,EACPC,YAAY,EACZC,YAAY,EACZC,SAAS,EACTC,OAAO,EACPC,aAAa,EACbC,OAAO,EACPC,OAAO,EACW;IAClB,MAAM,CAACC,MAAMC,QAAQ,GAAGC,SAAS;IAEjC,MAAMC,mBAAmB,CAACC;QACtBH,QAAQG;QACR,IAAIV,cACAA,aAAaU;IAErB;IAEA,MAAMC,oBAAoB,CAACC;QACvB,IAAInB,UACAA,SAASoB,OAAOD,eAAe;QAEnCH,iBAAiB;IACrB;IAEA,MAAMK,eAAeC,qBAAqBvB,OAAO,QAAQW;IACzD,MAAMa,eAAexB,QAAQyB,eAAezB,SAAS0B;IAGrD,MAAMC,eAA0B,EAAE;IAClC,IAAIf,SACAe,aAAa,IAAI,CAAC;QAAE,QAAQf;IAAQ;IAExC,IAAIC,SACAc,aAAa,IAAI,CAAC;QAAE,OAAOd;IAAQ;IAGvC,OAAO,WAAP,GACI,oBAAC;QAAI,WAAWJ;qBACZ,oBAACmB,kBAAgBA;QAAC,MAAMd;QAAM,cAAcG;qBACxC,oBAACY,mBAAiBA;QACd,cAAcP;QACd,aAAapB,eAAe;QAC5B,UAAUC;QACV,MAAMC;QACN,SAASC;QACT,SAASC;sBAEb,oBAACsB,iBAAiB,OAAO;QAAC,OAAM;qBAC5B,oBAAC;QAAI,WAAWlB,SAAS,SAAS,SAASgB;qBACvC,oBAACI,UAAQA;QACL,MAAK;QACL,UAAUN;QACV,UAAUO,CAAAA;YACN,IAAI9B,UACAA,SAAS8B,OAAOV,OAAOU,MAAM,gBAAgBL;YAEjDT,iBAAiB;QACrB;QACA,cAAcV;QACd,UAAUoB;QAEbjB,WAAWA,QAAQ,MAAM,GAAG,KAAK,WAAL,GACzB,oBAAC;QAAI,WAAU;OACVA,QAAQ,GAAG,CAACsB,CAAAA;QACT,MAAMC,aAAaZ,OAAOW,OAAO,KAAK,IAAI;QAC1C,OAAO,WAAP,GACI,oBAACE,QAAMA;YACH,KAAKF,OAAO,KAAK;YACjB,SAAShC,UAAUiC,aAAa,YAAY;YAC5C,MAAK;YACL,MAAMD,OAAO,KAAK;YAClB,SAAS,IAAMb,kBAAkBa,OAAO,KAAK;;IAGzD;AAQhC"}

package/DatePicker/primitives/DatePickerPrimitive.d.ts

@@ -0,0 +1,23 @@
+import React from "react";
+import type { DatePickerPrimitiveProps } from "../utils/types.js";
+declare const DecoratableDatePickerPrimitive: (props: DatePickerPrimitiveProps) => React.JSX.Element;
+declare const DatePickerPrimitive: typeof DecoratableDatePickerPrimitive & {
+    original: typeof DecoratableDatePickerPrimitive;
+    originalName: string;
+    displayName: string;
+} & {
+    original: typeof DecoratableDatePickerPrimitive & {
+        original: typeof DecoratableDatePickerPrimitive;
+        originalName: string;
+        displayName: string;
+    };
+    originalName: string;
+    displayName: string;
+} & {
+    createDecorator: (decorator: import("@webiny/react-composition/types.js").ComponentDecorator<typeof DecoratableDatePickerPrimitive & {
+        original: typeof DecoratableDatePickerPrimitive;
+        originalName: string;
+        displayName: string;
+    }>) => (props: unknown) => React.JSX.Element;
+};
+export { DatePickerPrimitive, type DatePickerPrimitiveProps };