@webiny/admin-ui 0.0.0-unstable.6f45466a1d → 0.0.0-unstable.7be00a75a9

package/DatePicker/primitives/DateRangePicker.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DatePicker/primitives/DateRangePicker.js","sources":["../../../src/DatePicker/primitives/DateRangePicker.tsx"],"sourcesContent":["import React, { useState } from \"react\";\nimport { format } from \"date-fns\";\nimport type { DateRange } from \"react-day-picker\";\nimport { Calendar } from \"~/Calendar/index.js\";\nimport { PopoverPrimitive } from \"~/Popover/index.js\";\nimport type { DateRangePickerProps } from \"../utils/types.js\";\nimport { formatDateForDisplay } from \"../utils/dateHelpers.js\";\nimport { DatePickerTrigger } from \"./components/DatePickerTrigger.js\";\n\nconst toDateStr = (d: Date) => format(d, \"yyyy-MM-dd\");\n\nconst DateRangePicker = ({\n    value,\n    onChange,\n    placeholder,\n    disabled,\n    size,\n    variant,\n    invalid,\n    weekStartsOn,\n    onOpenChange,\n    className,\n    displayFormat\n}: DateRangePickerProps) => {\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 displayValue = formatDateForDisplay(value, \"dateRange\", displayFormat);\n\n    const handleRangeSelect = (range: DateRange | undefined) => {\n        if (onChange) {\n            if (range?.from) {\n                onChange({\n                    from: toDateStr(range.from),\n                    to: range.to ? toDateStr(range.to) : undefined\n                });\n            } else {\n                onChange(undefined);\n            }\n        }\n    };\n\n    const selected: DateRange | undefined = value?.from\n        ? { from: new Date(value.from), to: value.to ? new Date(value.to) : undefined }\n        : undefined;\n\n    return (\n        <div className={className}>\n            <PopoverPrimitive open={open} onOpenChange={handleOpenChange}>\n                <DatePickerTrigger\n                    displayValue={displayValue}\n                    placeholder={placeholder ?? \"Pick a date range\"}\n                    disabled={disabled}\n                    size={size}\n                    variant={variant}\n                    invalid={invalid}\n                />\n                <PopoverPrimitive.Content align=\"start\">\n                    <Calendar\n                        mode=\"range\"\n                        selected={selected}\n                        onSelect={handleRangeSelect}\n                        numberOfMonths={2}\n                        weekStartsOn={weekStartsOn}\n                    />\n                </PopoverPrimitive.Content>\n            </PopoverPrimitive>\n        </div>\n    );\n};\n\nexport { DateRangePicker };\n"],"names":["toDateStr","d","format","DateRangePicker","value","onChange","placeholder","disabled","size","variant","invalid","weekStartsOn","onOpenChange","className","displayFormat","open","setOpen","useState","handleOpenChange","isOpen","displayValue","formatDateForDisplay","handleRangeSelect","range","undefined","selected","Date","PopoverPrimitive","DatePickerTrigger","Calendar"],"mappings":";;;;;;AASA,MAAMA,YAAY,CAACC,IAAYC,OAAOD,GAAG;AAEzC,MAAME,kBAAkB,CAAC,EACrBC,KAAK,EACLC,QAAQ,EACRC,WAAW,EACXC,QAAQ,EACRC,IAAI,EACJC,OAAO,EACPC,OAAO,EACPC,YAAY,EACZC,YAAY,EACZC,SAAS,EACTC,aAAa,EACM;IACnB,MAAM,CAACC,MAAMC,QAAQ,GAAGC,SAAS;IAEjC,MAAMC,mBAAmB,CAACC;QACtBH,QAAQG;QACR,IAAIP,cACAA,aAAaO;IAErB;IAEA,MAAMC,eAAeC,qBAAqBjB,OAAO,aAAaU;IAE9D,MAAMQ,oBAAoB,CAACC;QACvB,IAAIlB,UACIkB,OAAO,OACPlB,SAAS;YACL,MAAML,UAAUuB,MAAM,IAAI;YAC1B,IAAIA,MAAM,EAAE,GAAGvB,UAAUuB,MAAM,EAAE,IAAIC;QACzC,KAEAnB,SAASmB;IAGrB;IAEA,MAAMC,WAAkCrB,OAAO,OACzC;QAAE,MAAM,IAAIsB,KAAKtB,MAAM,IAAI;QAAG,IAAIA,MAAM,EAAE,GAAG,IAAIsB,KAAKtB,MAAM,EAAE,IAAIoB;IAAU,IAC5EA;IAEN,OAAO,WAAP,GACI,oBAAC;QAAI,WAAWX;qBACZ,oBAACc,kBAAgBA;QAAC,MAAMZ;QAAM,cAAcG;qBACxC,oBAACU,mBAAiBA;QACd,cAAcR;QACd,aAAad,eAAe;QAC5B,UAAUC;QACV,MAAMC;QACN,SAASC;QACT,SAASC;sBAEb,oBAACiB,iBAAiB,OAAO;QAAC,OAAM;qBAC5B,oBAACE,UAAQA;QACL,MAAK;QACL,UAAUJ;QACV,UAAUH;QACV,gBAAgB;QAChB,cAAcX;;AAMtC"}

package/DatePicker/primitives/DateTimePicker.d.ts

@@ -0,0 +1,7 @@
+import React from "react";
+import type { DateTimeLocalPickerProps, DateTimeTzPickerProps } from "../utils/types.js";
+type DateTimePickerInternalProps = (DateTimeLocalPickerProps | DateTimeTzPickerProps) & {
+    withTimezone: boolean;
+};
+declare const DateTimePicker: ({ value, onChange, placeholder, disabled, size, variant, invalid, weekStartsOn, onOpenChange, className, withTimezone, displayFormat }: DateTimePickerInternalProps) => React.JSX.Element;
+export { DateTimePicker };

package/DatePicker/primitives/DateTimePicker.js

@@ -0,0 +1,94 @@
+import react, { useState } from "react";
+import { format } from "date-fns";
+import { UTC_TIMEZONES } from "@webiny/utils";
+import { Calendar } from "../../Calendar/index.js";
+import { PopoverPrimitive } from "../../Popover/index.js";
+import { SelectPrimitive } from "../../Select/index.js";
+import { extractTimezone, formatDateForDisplay, formatTimeValue, getLocalTimezone, parseTimeValue, toIsoWithTz } from "../utils/dateHelpers.js";
+import { DatePickerTrigger } from "./components/DatePickerTrigger.js";
+import { TimePicker } from "./components/TimePicker.js";
+const timezoneOptions = UTC_TIMEZONES.map((tz)=>({
+        value: tz.value,
+        label: tz.label
+    }));
+function parseToDate(value) {
+    if (!value) return;
+    const d = new Date(value);
+    if (Number.isNaN(d.getTime())) return;
+    return d;
+}
+const DateTimePicker = ({ value, onChange, placeholder, disabled, size, variant, invalid, weekStartsOn, onOpenChange, className, withTimezone, displayFormat })=>{
+    const [open, setOpen] = useState(false);
+    const existingTz = withTimezone && value ? extractTimezone(value) : void 0;
+    const [timezone, setTimezone] = useState(existingTz || getLocalTimezone());
+    const handleOpenChange = (isOpen)=>{
+        setOpen(isOpen);
+        if (onOpenChange) onOpenChange(isOpen);
+    };
+    const currentDate = parseToDate(value);
+    const displayValue = withTimezone ? formatDateForDisplay(value, "dateTimeTz", displayFormat) : formatDateForDisplay(value, "dateTimeLocal", displayFormat);
+    const timeValue = currentDate ? formatTimeValue(currentDate) : "";
+    const emitChange = (date, tz)=>{
+        if (!onChange) return;
+        withTimezone ? onChange(toIsoWithTz(date, tz || timezone)) : onChange(format(date, "yyyy-MM-dd'T'HH:mm:ss"));
+    };
+    const handleDateSelect = (date)=>{
+        if (!date) return;
+        if (currentDate) date.setHours(currentDate.getHours(), currentDate.getMinutes());
+        emitChange(date);
+    };
+    const handleTimeChange = (time)=>{
+        if (!time) return;
+        const parsed = parseTimeValue(time);
+        if (!parsed) return;
+        const base = currentDate ? new Date(currentDate) : new Date();
+        base.setHours(parsed.hours, parsed.minutes, 0, 0);
+        emitChange(base);
+    };
+    const handleTimezoneChange = (tz)=>{
+        setTimezone(tz);
+        if (currentDate) emitChange(currentDate, tz);
+    };
+    return /*#__PURE__*/ react.createElement("div", {
+        className: className
+    }, /*#__PURE__*/ react.createElement(PopoverPrimitive, {
+        open: open,
+        onOpenChange: handleOpenChange
+    }, /*#__PURE__*/ react.createElement(DatePickerTrigger, {
+        displayValue: displayValue,
+        placeholder: placeholder ?? "Pick date & time",
+        disabled: disabled,
+        size: size,
+        variant: variant,
+        invalid: invalid
+    }), /*#__PURE__*/ react.createElement(PopoverPrimitive.Content, {
+        align: "start"
+    }, /*#__PURE__*/ react.createElement("div", {
+        className: "flex flex-col gap-sm"
+    }, /*#__PURE__*/ react.createElement(Calendar, {
+        mode: "single",
+        selected: currentDate,
+        onSelect: handleDateSelect,
+        weekStartsOn: weekStartsOn
+    }), /*#__PURE__*/ react.createElement("div", {
+        className: "flex gap-sm px-md pb-md"
+    }, /*#__PURE__*/ react.createElement("div", {
+        className: "flex-1"
+    }, /*#__PURE__*/ react.createElement(TimePicker, {
+        value: timeValue,
+        onChange: handleTimeChange,
+        disabled: disabled,
+        size: "md"
+    })), withTimezone && /*#__PURE__*/ react.createElement("div", {
+        className: "flex-1"
+    }, /*#__PURE__*/ react.createElement(SelectPrimitive, {
+        value: timezone,
+        onChange: handleTimezoneChange,
+        options: timezoneOptions,
+        disabled: disabled,
+        size: "md"
+    })))))));
+};
+export { DateTimePicker };
+
+//# sourceMappingURL=DateTimePicker.js.map

package/DatePicker/primitives/DateTimePicker.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DatePicker/primitives/DateTimePicker.js","sources":["../../../src/DatePicker/primitives/DateTimePicker.tsx"],"sourcesContent":["import React, { useState } from \"react\";\nimport { format } from \"date-fns\";\nimport { UTC_TIMEZONES } from \"@webiny/utils\";\nimport { Calendar } from \"~/Calendar/index.js\";\nimport { PopoverPrimitive } from \"~/Popover/index.js\";\nimport { SelectPrimitive } from \"~/Select/index.js\";\nimport type { DateTimeLocalPickerProps, DateTimeTzPickerProps } from \"../utils/types.js\";\nimport {\n    extractTimezone,\n    formatDateForDisplay,\n    formatTimeValue,\n    getLocalTimezone,\n    parseTimeValue,\n    toIsoWithTz\n} from \"../utils/dateHelpers.js\";\nimport { DatePickerTrigger } from \"./components/DatePickerTrigger.js\";\nimport { TimePicker } from \"./components/TimePicker.js\";\n\ntype DateTimePickerInternalProps = (DateTimeLocalPickerProps | DateTimeTzPickerProps) & {\n    withTimezone: boolean;\n};\n\nconst timezoneOptions = UTC_TIMEZONES.map(tz => ({ value: tz.value, label: tz.label }));\n\nfunction parseToDate(value: string | undefined): Date | undefined {\n    if (!value) {\n        return undefined;\n    }\n    const d = new Date(value);\n    if (Number.isNaN(d.getTime())) {\n        return undefined;\n    }\n    return d;\n}\n\nconst DateTimePicker = ({\n    value,\n    onChange,\n    placeholder,\n    disabled,\n    size,\n    variant,\n    invalid,\n    weekStartsOn,\n    onOpenChange,\n    className,\n    withTimezone,\n    displayFormat\n}: DateTimePickerInternalProps) => {\n    const [open, setOpen] = useState(false);\n\n    const existingTz = withTimezone && value ? extractTimezone(value as string) : undefined;\n    const [timezone, setTimezone] = useState(existingTz || getLocalTimezone());\n\n    const handleOpenChange = (isOpen: boolean) => {\n        setOpen(isOpen);\n        if (onOpenChange) {\n            onOpenChange(isOpen);\n        }\n    };\n\n    const currentDate = parseToDate(value);\n\n    const displayValue = withTimezone\n        ? formatDateForDisplay(value, \"dateTimeTz\", displayFormat)\n        : formatDateForDisplay(value, \"dateTimeLocal\", displayFormat);\n\n    const timeValue = currentDate ? formatTimeValue(currentDate) : \"\";\n\n    const emitChange = (date: Date, tz?: string) => {\n        if (!onChange) {\n            return;\n        }\n        if (withTimezone) {\n            onChange(toIsoWithTz(date, tz || timezone));\n        } else {\n            onChange(format(date, \"yyyy-MM-dd'T'HH:mm:ss\"));\n        }\n    };\n\n    const handleDateSelect = (date: Date | undefined) => {\n        if (!date) {\n            return;\n        }\n        if (currentDate) {\n            date.setHours(currentDate.getHours(), currentDate.getMinutes());\n        }\n        emitChange(date);\n    };\n\n    const handleTimeChange = (time: string | undefined) => {\n        if (!time) {\n            return;\n        }\n        const parsed = parseTimeValue(time);\n        if (!parsed) {\n            return;\n        }\n        const base = currentDate ? new Date(currentDate) : new Date();\n        base.setHours(parsed.hours, parsed.minutes, 0, 0);\n        emitChange(base);\n    };\n\n    const handleTimezoneChange = (tz: string) => {\n        setTimezone(tz);\n        if (currentDate) {\n            emitChange(currentDate, tz);\n        }\n    };\n\n    return (\n        <div className={className}>\n            <PopoverPrimitive open={open} onOpenChange={handleOpenChange}>\n                <DatePickerTrigger\n                    displayValue={displayValue}\n                    placeholder={placeholder ?? \"Pick date & time\"}\n                    disabled={disabled}\n                    size={size}\n                    variant={variant}\n                    invalid={invalid}\n                />\n                <PopoverPrimitive.Content align=\"start\">\n                    <div className=\"flex flex-col gap-sm\">\n                        <Calendar\n                            mode=\"single\"\n                            selected={currentDate}\n                            onSelect={handleDateSelect}\n                            weekStartsOn={weekStartsOn}\n                        />\n                        <div className=\"flex gap-sm px-md pb-md\">\n                            <div className=\"flex-1\">\n                                <TimePicker\n                                    value={timeValue}\n                                    onChange={handleTimeChange}\n                                    disabled={disabled}\n                                    size=\"md\"\n                                />\n                            </div>\n                            {withTimezone && (\n                                <div className=\"flex-1\">\n                                    <SelectPrimitive\n                                        value={timezone}\n                                        onChange={handleTimezoneChange}\n                                        options={timezoneOptions}\n                                        disabled={disabled}\n                                        size=\"md\"\n                                    />\n                                </div>\n                            )}\n                        </div>\n                    </div>\n                </PopoverPrimitive.Content>\n            </PopoverPrimitive>\n        </div>\n    );\n};\n\nexport { DateTimePicker };\n"],"names":["timezoneOptions","UTC_TIMEZONES","tz","parseToDate","value","d","Date","Number","DateTimePicker","onChange","placeholder","disabled","size","variant","invalid","weekStartsOn","onOpenChange","className","withTimezone","displayFormat","open","setOpen","useState","existingTz","extractTimezone","undefined","timezone","setTimezone","getLocalTimezone","handleOpenChange","isOpen","currentDate","displayValue","formatDateForDisplay","timeValue","formatTimeValue","emitChange","date","toIsoWithTz","format","handleDateSelect","handleTimeChange","time","parsed","parseTimeValue","base","handleTimezoneChange","PopoverPrimitive","DatePickerTrigger","Calendar","TimePicker","SelectPrimitive"],"mappings":";;;;;;;;;AAsBA,MAAMA,kBAAkBC,cAAc,GAAG,CAACC,CAAAA,KAAO;QAAE,OAAOA,GAAG,KAAK;QAAE,OAAOA,GAAG,KAAK;IAAC;AAEpF,SAASC,YAAYC,KAAyB;IAC1C,IAAI,CAACA,OACD;IAEJ,MAAMC,IAAI,IAAIC,KAAKF;IACnB,IAAIG,OAAO,KAAK,CAACF,EAAE,OAAO,KACtB;IAEJ,OAAOA;AACX;AAEA,MAAMG,iBAAiB,CAAC,EACpBJ,KAAK,EACLK,QAAQ,EACRC,WAAW,EACXC,QAAQ,EACRC,IAAI,EACJC,OAAO,EACPC,OAAO,EACPC,YAAY,EACZC,YAAY,EACZC,SAAS,EACTC,YAAY,EACZC,aAAa,EACa;IAC1B,MAAM,CAACC,MAAMC,QAAQ,GAAGC,SAAS;IAEjC,MAAMC,aAAaL,gBAAgBd,QAAQoB,gBAAgBpB,SAAmBqB;IAC9E,MAAM,CAACC,UAAUC,YAAY,GAAGL,SAASC,cAAcK;IAEvD,MAAMC,mBAAmB,CAACC;QACtBT,QAAQS;QACR,IAAId,cACAA,aAAac;IAErB;IAEA,MAAMC,cAAc5B,YAAYC;IAEhC,MAAM4B,eAAed,eACfe,qBAAqB7B,OAAO,cAAce,iBAC1Cc,qBAAqB7B,OAAO,iBAAiBe;IAEnD,MAAMe,YAAYH,cAAcI,gBAAgBJ,eAAe;IAE/D,MAAMK,aAAa,CAACC,MAAYnC;QAC5B,IAAI,CAACO,UACD;QAEAS,eACAT,SAAS6B,YAAYD,MAAMnC,MAAMwB,aAEjCjB,SAAS8B,OAAOF,MAAM;IAE9B;IAEA,MAAMG,mBAAmB,CAACH;QACtB,IAAI,CAACA,MACD;QAEJ,IAAIN,aACAM,KAAK,QAAQ,CAACN,YAAY,QAAQ,IAAIA,YAAY,UAAU;QAEhEK,WAAWC;IACf;IAEA,MAAMI,mBAAmB,CAACC;QACtB,IAAI,CAACA,MACD;QAEJ,MAAMC,SAASC,eAAeF;QAC9B,IAAI,CAACC,QACD;QAEJ,MAAME,OAAOd,cAAc,IAAIzB,KAAKyB,eAAe,IAAIzB;QACvDuC,KAAK,QAAQ,CAACF,OAAO,KAAK,EAAEA,OAAO,OAAO,EAAE,GAAG;QAC/CP,WAAWS;IACf;IAEA,MAAMC,uBAAuB,CAAC5C;QAC1ByB,YAAYzB;QACZ,IAAI6B,aACAK,WAAWL,aAAa7B;IAEhC;IAEA,OAAO,WAAP,GACI,oBAAC;QAAI,WAAWe;qBACZ,oBAAC8B,kBAAgBA;QAAC,MAAM3B;QAAM,cAAcS;qBACxC,oBAACmB,mBAAiBA;QACd,cAAchB;QACd,aAAatB,eAAe;QAC5B,UAAUC;QACV,MAAMC;QACN,SAASC;QACT,SAASC;sBAEb,oBAACiC,iBAAiB,OAAO;QAAC,OAAM;qBAC5B,oBAAC;QAAI,WAAU;qBACX,oBAACE,UAAQA;QACL,MAAK;QACL,UAAUlB;QACV,UAAUS;QACV,cAAczB;sBAElB,oBAAC;QAAI,WAAU;qBACX,oBAAC;QAAI,WAAU;qBACX,oBAACmC,YAAUA;QACP,OAAOhB;QACP,UAAUO;QACV,UAAU9B;QACV,MAAK;SAGZO,gBAAgB,WAAhBA,GACG,oBAAC;QAAI,WAAU;qBACX,oBAACiC,iBAAeA;QACZ,OAAOzB;QACP,UAAUoB;QACV,SAAS9C;QACT,UAAUW;QACV,MAAK;;AAU7C"}

package/DatePicker/primitives/MonthPicker.d.ts

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

package/DatePicker/primitives/MonthPicker.js

@@ -0,0 +1,47 @@
+import react, { useState } from "react";
+import { PopoverPrimitive } from "../../Popover/index.js";
+import { formatDateForDisplay, formatMonthValue, parseMonthValue } from "../utils/dateHelpers.js";
+import { DatePickerTrigger } from "./components/DatePickerTrigger.js";
+import { YearStepper } from "./components/YearStepper.js";
+import { MonthGrid } from "./components/MonthGrid.js";
+const MonthPicker = ({ value, onChange, placeholder, disabled, size, variant, invalid, onOpenChange, className, displayFormat })=>{
+    const parsed = value ? parseMonthValue(value) : void 0;
+    const [open, setOpen] = useState(false);
+    const [viewYear, setViewYear] = useState(parsed?.year ?? new Date().getFullYear());
+    const handleOpenChange = (isOpen)=>{
+        setOpen(isOpen);
+        if (onOpenChange) onOpenChange(isOpen);
+    };
+    const displayValue = formatDateForDisplay(value, "month", displayFormat);
+    const handleMonthSelect = (month)=>{
+        if (onChange) onChange(formatMonthValue(viewYear, month));
+        handleOpenChange(false);
+    };
+    const selectedMonths = parsed && parsed.year === viewYear ? [
+        parsed.month
+    ] : [];
+    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 month",
+        disabled: disabled,
+        size: size,
+        variant: variant,
+        invalid: invalid
+    }), /*#__PURE__*/ react.createElement(PopoverPrimitive.Content, {
+        align: "start"
+    }, /*#__PURE__*/ react.createElement(YearStepper, {
+        year: viewYear,
+        onYearChange: setViewYear
+    }), /*#__PURE__*/ react.createElement(MonthGrid, {
+        selectedMonths: selectedMonths,
+        onSelectMonth: handleMonthSelect
+    }))));
+};
+export { MonthPicker };
+
+//# sourceMappingURL=MonthPicker.js.map

package/DatePicker/primitives/MonthPicker.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DatePicker/primitives/MonthPicker.js","sources":["../../../src/DatePicker/primitives/MonthPicker.tsx"],"sourcesContent":["import React, { useState } from \"react\";\nimport { PopoverPrimitive } from \"~/Popover/index.js\";\nimport type { MonthPickerProps } from \"../utils/types.js\";\nimport { formatDateForDisplay, formatMonthValue, parseMonthValue } from \"../utils/dateHelpers.js\";\nimport { DatePickerTrigger } from \"./components/DatePickerTrigger.js\";\nimport { YearStepper } from \"./components/YearStepper.js\";\nimport { MonthGrid } from \"./components/MonthGrid.js\";\n\nconst MonthPicker = ({\n    value,\n    onChange,\n    placeholder,\n    disabled,\n    size,\n    variant,\n    invalid,\n    onOpenChange,\n    className,\n    displayFormat\n}: MonthPickerProps) => {\n    const parsed = value ? parseMonthValue(value) : undefined;\n    const [open, setOpen] = useState(false);\n    const [viewYear, setViewYear] = useState(parsed?.year ?? new Date().getFullYear());\n\n    const handleOpenChange = (isOpen: boolean) => {\n        setOpen(isOpen);\n        if (onOpenChange) {\n            onOpenChange(isOpen);\n        }\n    };\n\n    const displayValue = formatDateForDisplay(value, \"month\", displayFormat);\n\n    const handleMonthSelect = (month: number) => {\n        if (onChange) {\n            onChange(formatMonthValue(viewYear, month));\n        }\n        handleOpenChange(false);\n    };\n\n    const selectedMonths = parsed && parsed.year === viewYear ? [parsed.month] : [];\n\n    return (\n        <div className={className}>\n            <PopoverPrimitive open={open} onOpenChange={handleOpenChange}>\n                <DatePickerTrigger\n                    displayValue={displayValue}\n                    placeholder={placeholder ?? \"Pick a month\"}\n                    disabled={disabled}\n                    size={size}\n                    variant={variant}\n                    invalid={invalid}\n                />\n                <PopoverPrimitive.Content align=\"start\">\n                    <YearStepper year={viewYear} onYearChange={setViewYear} />\n                    <MonthGrid selectedMonths={selectedMonths} onSelectMonth={handleMonthSelect} />\n                </PopoverPrimitive.Content>\n            </PopoverPrimitive>\n        </div>\n    );\n};\n\nexport { MonthPicker };\n"],"names":["MonthPicker","value","onChange","placeholder","disabled","size","variant","invalid","onOpenChange","className","displayFormat","parsed","parseMonthValue","undefined","open","setOpen","useState","viewYear","setViewYear","Date","handleOpenChange","isOpen","displayValue","formatDateForDisplay","handleMonthSelect","month","formatMonthValue","selectedMonths","PopoverPrimitive","DatePickerTrigger","YearStepper","MonthGrid"],"mappings":";;;;;;AAQA,MAAMA,cAAc,CAAC,EACjBC,KAAK,EACLC,QAAQ,EACRC,WAAW,EACXC,QAAQ,EACRC,IAAI,EACJC,OAAO,EACPC,OAAO,EACPC,YAAY,EACZC,SAAS,EACTC,aAAa,EACE;IACf,MAAMC,SAASV,QAAQW,gBAAgBX,SAASY;IAChD,MAAM,CAACC,MAAMC,QAAQ,GAAGC,SAAS;IACjC,MAAM,CAACC,UAAUC,YAAY,GAAGF,SAASL,QAAQ,QAAQ,IAAIQ,OAAO,WAAW;IAE/E,MAAMC,mBAAmB,CAACC;QACtBN,QAAQM;QACR,IAAIb,cACAA,aAAaa;IAErB;IAEA,MAAMC,eAAeC,qBAAqBtB,OAAO,SAASS;IAE1D,MAAMc,oBAAoB,CAACC;QACvB,IAAIvB,UACAA,SAASwB,iBAAiBT,UAAUQ;QAExCL,iBAAiB;IACrB;IAEA,MAAMO,iBAAiBhB,UAAUA,OAAO,IAAI,KAAKM,WAAW;QAACN,OAAO,KAAK;KAAC,GAAG,EAAE;IAE/E,OAAO,WAAP,GACI,oBAAC;QAAI,WAAWF;qBACZ,oBAACmB,kBAAgBA;QAAC,MAAMd;QAAM,cAAcM;qBACxC,oBAACS,mBAAiBA;QACd,cAAcP;QACd,aAAanB,eAAe;QAC5B,UAAUC;QACV,MAAMC;QACN,SAASC;QACT,SAASC;sBAEb,oBAACqB,iBAAiB,OAAO;QAAC,OAAM;qBAC5B,oBAACE,aAAWA;QAAC,MAAMb;QAAU,cAAcC;sBAC3C,oBAACa,WAASA;QAAC,gBAAgBJ;QAAgB,eAAeH;;AAK9E"}

package/DatePicker/primitives/MultipleDatesPicker.d.ts

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

package/DatePicker/primitives/MultipleDatesPicker.js

@@ -0,0 +1,60 @@
+import react, { useState } from "react";
+import { format } from "date-fns";
+import { Calendar } from "../../Calendar/index.js";
+import { PopoverPrimitive } from "../../Popover/index.js";
+import { formatDateForDisplay } from "../utils/dateHelpers.js";
+import { DatePickerTrigger } from "./components/DatePickerTrigger.js";
+import { SelectedTagsList } from "./components/SelectedTagsList.js";
+const toDateStr = (d)=>format(d, "yyyy-MM-dd");
+const MultipleDatesPicker = ({ value: valueProp, onChange, placeholder, disabled, size, variant, invalid, weekStartsOn, onOpenChange, className })=>{
+    const value = valueProp ?? [];
+    const [open, setOpen] = useState(false);
+    const handleOpenChange = (isOpen)=>{
+        setOpen(isOpen);
+        if (onOpenChange) onOpenChange(isOpen);
+    };
+    const displayValue = formatDateForDisplay(value, "multipleDates");
+    const selectedDates = value.map((s)=>new Date(s));
+    const handleSelect = (dates)=>{
+        if (onChange) {
+            const sorted = [
+                ...dates ?? []
+            ].sort((a, b)=>a.getTime() - b.getTime());
+            onChange(sorted.map(toDateStr));
+        }
+    };
+    const handleRemove = (key)=>{
+        if (onChange) onChange(value.filter((d)=>d !== key));
+    };
+    const tagItems = value.map((d)=>({
+            key: d,
+            label: format(new Date(d), "MMM d, yyyy")
+        }));
+    return /*#__PURE__*/ react.createElement("div", {
+        className: className
+    }, /*#__PURE__*/ react.createElement(PopoverPrimitive, {
+        open: open,
+        onOpenChange: handleOpenChange
+    }, /*#__PURE__*/ react.createElement(DatePickerTrigger, {
+        displayValue: displayValue,
+        placeholder: placeholder ?? "Pick dates",
+        disabled: disabled,
+        size: size,
+        variant: variant,
+        invalid: invalid
+    }), /*#__PURE__*/ react.createElement(PopoverPrimitive.Content, {
+        align: "start"
+    }, /*#__PURE__*/ react.createElement(Calendar, {
+        mode: "multiple",
+        selected: selectedDates,
+        onSelect: handleSelect,
+        weekStartsOn: weekStartsOn
+    }))), /*#__PURE__*/ react.createElement(SelectedTagsList, {
+        items: tagItems,
+        onRemove: handleRemove,
+        disabled: disabled
+    }));
+};
+export { MultipleDatesPicker };
+
+//# sourceMappingURL=MultipleDatesPicker.js.map

package/DatePicker/primitives/MultipleDatesPicker.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DatePicker/primitives/MultipleDatesPicker.js","sources":["../../../src/DatePicker/primitives/MultipleDatesPicker.tsx"],"sourcesContent":["import React, { useState } from \"react\";\nimport { format } from \"date-fns\";\nimport { Calendar } from \"~/Calendar/index.js\";\nimport { PopoverPrimitive } from \"~/Popover/index.js\";\nimport type { MultipleDatesPickerProps } from \"../utils/types.js\";\nimport { formatDateForDisplay } from \"../utils/dateHelpers.js\";\nimport { DatePickerTrigger } from \"./components/DatePickerTrigger.js\";\nimport { SelectedTagsList } from \"./components/SelectedTagsList.js\";\n\nconst toDateStr = (d: Date) => format(d, \"yyyy-MM-dd\");\n\nconst MultipleDatesPicker = ({\n    value: valueProp,\n    onChange,\n    placeholder,\n    disabled,\n    size,\n    variant,\n    invalid,\n    weekStartsOn,\n    onOpenChange,\n    className\n}: MultipleDatesPickerProps) => {\n    const value = valueProp ?? [];\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 displayValue = formatDateForDisplay(value, \"multipleDates\");\n\n    const selectedDates = value.map(s => new Date(s));\n\n    const handleSelect = (dates: Date[] | undefined) => {\n        if (onChange) {\n            const sorted = [...(dates ?? [])].sort((a, b) => a.getTime() - b.getTime());\n            onChange(sorted.map(toDateStr));\n        }\n    };\n\n    const handleRemove = (key: string) => {\n        if (onChange) {\n            onChange(value.filter(d => d !== key));\n        }\n    };\n\n    const tagItems = value.map(d => ({\n        key: d,\n        label: format(new Date(d), \"MMM d, yyyy\")\n    }));\n\n    return (\n        <div className={className}>\n            <PopoverPrimitive open={open} onOpenChange={handleOpenChange}>\n                <DatePickerTrigger\n                    displayValue={displayValue}\n                    placeholder={placeholder ?? \"Pick dates\"}\n                    disabled={disabled}\n                    size={size}\n                    variant={variant}\n                    invalid={invalid}\n                />\n                <PopoverPrimitive.Content align=\"start\">\n                    <Calendar\n                        mode=\"multiple\"\n                        selected={selectedDates}\n                        onSelect={handleSelect}\n                        weekStartsOn={weekStartsOn}\n                    />\n                </PopoverPrimitive.Content>\n            </PopoverPrimitive>\n            <SelectedTagsList items={tagItems} onRemove={handleRemove} disabled={disabled} />\n        </div>\n    );\n};\n\nexport { MultipleDatesPicker };\n"],"names":["toDateStr","d","format","MultipleDatesPicker","valueProp","onChange","placeholder","disabled","size","variant","invalid","weekStartsOn","onOpenChange","className","value","open","setOpen","useState","handleOpenChange","isOpen","displayValue","formatDateForDisplay","selectedDates","s","Date","handleSelect","dates","sorted","a","b","handleRemove","key","tagItems","PopoverPrimitive","DatePickerTrigger","Calendar","SelectedTagsList"],"mappings":";;;;;;;AASA,MAAMA,YAAY,CAACC,IAAYC,OAAOD,GAAG;AAEzC,MAAME,sBAAsB,CAAC,EACzB,OAAOC,SAAS,EAChBC,QAAQ,EACRC,WAAW,EACXC,QAAQ,EACRC,IAAI,EACJC,OAAO,EACPC,OAAO,EACPC,YAAY,EACZC,YAAY,EACZC,SAAS,EACc;IACvB,MAAMC,QAAQV,aAAa,EAAE;IAC7B,MAAM,CAACW,MAAMC,QAAQ,GAAGC,SAAS;IAEjC,MAAMC,mBAAmB,CAACC;QACtBH,QAAQG;QACR,IAAIP,cACAA,aAAaO;IAErB;IAEA,MAAMC,eAAeC,qBAAqBP,OAAO;IAEjD,MAAMQ,gBAAgBR,MAAM,GAAG,CAACS,CAAAA,IAAK,IAAIC,KAAKD;IAE9C,MAAME,eAAe,CAACC;QAClB,IAAIrB,UAAU;YACV,MAAMsB,SAAS;mBAAKD,SAAS,EAAE;aAAE,CAAC,IAAI,CAAC,CAACE,GAAGC,IAAMD,EAAE,OAAO,KAAKC,EAAE,OAAO;YACxExB,SAASsB,OAAO,GAAG,CAAC3B;QACxB;IACJ;IAEA,MAAM8B,eAAe,CAACC;QAClB,IAAI1B,UACAA,SAASS,MAAM,MAAM,CAACb,CAAAA,IAAKA,MAAM8B;IAEzC;IAEA,MAAMC,WAAWlB,MAAM,GAAG,CAACb,CAAAA,IAAM;YAC7B,KAAKA;YACL,OAAOC,OAAO,IAAIsB,KAAKvB,IAAI;QAC/B;IAEA,OAAO,WAAP,GACI,oBAAC;QAAI,WAAWY;qBACZ,oBAACoB,kBAAgBA;QAAC,MAAMlB;QAAM,cAAcG;qBACxC,oBAACgB,mBAAiBA;QACd,cAAcd;QACd,aAAad,eAAe;QAC5B,UAAUC;QACV,MAAMC;QACN,SAASC;QACT,SAASC;sBAEb,oBAACuB,iBAAiB,OAAO;QAAC,OAAM;qBAC5B,oBAACE,UAAQA;QACL,MAAK;QACL,UAAUb;QACV,UAAUG;QACV,cAAcd;wBAI1B,oBAACyB,kBAAgBA;QAAC,OAAOJ;QAAU,UAAUF;QAAc,UAAUvB;;AAGjF"}

package/DatePicker/primitives/MultipleMonthsPicker.d.ts

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

package/DatePicker/primitives/MultipleMonthsPicker.js

@@ -0,0 +1,71 @@
+import react, { useState } from "react";
+import { PopoverPrimitive } from "../../Popover/index.js";
+import { formatDateForDisplay, formatMonthValue, parseMonthValue } from "../utils/dateHelpers.js";
+import { MONTH_NAMES_SHORT } from "../utils/constants.js";
+import { DatePickerTrigger } from "./components/DatePickerTrigger.js";
+import { YearStepper } from "./components/YearStepper.js";
+import { MonthGrid } from "./components/MonthGrid.js";
+import { SelectedTagsList } from "./components/SelectedTagsList.js";
+const MultipleMonthsPicker = ({ value: valueProp, onChange, placeholder, disabled, size, variant, invalid, onOpenChange, className })=>{
+    const value = valueProp ?? [];
+    const [open, setOpen] = useState(false);
+    const [viewYear, setViewYear] = useState(new Date().getFullYear());
+    const handleOpenChange = (isOpen)=>{
+        setOpen(isOpen);
+        if (onOpenChange) onOpenChange(isOpen);
+    };
+    const displayValue = formatDateForDisplay(value, "multipleMonths");
+    const handleMonthSelect = (month)=>{
+        if (!onChange) return;
+        const monthValue = formatMonthValue(viewYear, month);
+        if (value.includes(monthValue)) onChange(value.filter((v)=>v !== monthValue));
+        else {
+            const next = [
+                ...value,
+                monthValue
+            ];
+            next.sort();
+            onChange(next);
+        }
+    };
+    const handleRemove = (key)=>{
+        if (onChange) onChange(value.filter((v)=>v !== key));
+    };
+    const selectedMonthsInView = value.map((v)=>parseMonthValue(v)).filter((p)=>void 0 !== p && p.year === viewYear).map((p)=>p.month);
+    const tagItems = value.map((v)=>{
+        const parsed = parseMonthValue(v);
+        const label = parsed ? `${MONTH_NAMES_SHORT[parsed.month]} ${parsed.year}` : v;
+        return {
+            key: v,
+            label
+        };
+    });
+    return /*#__PURE__*/ react.createElement("div", {
+        className: className
+    }, /*#__PURE__*/ react.createElement(PopoverPrimitive, {
+        open: open,
+        onOpenChange: handleOpenChange
+    }, /*#__PURE__*/ react.createElement(DatePickerTrigger, {
+        displayValue: displayValue,
+        placeholder: placeholder ?? "Pick months",
+        disabled: disabled,
+        size: size,
+        variant: variant,
+        invalid: invalid
+    }), /*#__PURE__*/ react.createElement(PopoverPrimitive.Content, {
+        align: "start"
+    }, /*#__PURE__*/ react.createElement(YearStepper, {
+        year: viewYear,
+        onYearChange: setViewYear
+    }), /*#__PURE__*/ react.createElement(MonthGrid, {
+        selectedMonths: selectedMonthsInView,
+        onSelectMonth: handleMonthSelect
+    }))), /*#__PURE__*/ react.createElement(SelectedTagsList, {
+        items: tagItems,
+        onRemove: handleRemove,
+        disabled: disabled
+    }));
+};
+export { MultipleMonthsPicker };
+
+//# sourceMappingURL=MultipleMonthsPicker.js.map

package/DatePicker/primitives/MultipleMonthsPicker.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DatePicker/primitives/MultipleMonthsPicker.js","sources":["../../../src/DatePicker/primitives/MultipleMonthsPicker.tsx"],"sourcesContent":["import React, { useState } from \"react\";\nimport { PopoverPrimitive } from \"~/Popover/index.js\";\nimport type { MultipleMonthsPickerProps } from \"../utils/types.js\";\nimport { formatDateForDisplay, formatMonthValue, parseMonthValue } from \"../utils/dateHelpers.js\";\nimport { MONTH_NAMES_SHORT } from \"../utils/constants.js\";\nimport { DatePickerTrigger } from \"./components/DatePickerTrigger.js\";\nimport { YearStepper } from \"./components/YearStepper.js\";\nimport { MonthGrid } from \"./components/MonthGrid.js\";\nimport { SelectedTagsList } from \"./components/SelectedTagsList.js\";\n\nconst MultipleMonthsPicker = ({\n    value: valueProp,\n    onChange,\n    placeholder,\n    disabled,\n    size,\n    variant,\n    invalid,\n    onOpenChange,\n    className\n}: MultipleMonthsPickerProps) => {\n    const value = valueProp ?? [];\n    const [open, setOpen] = useState(false);\n    const [viewYear, setViewYear] = useState(new Date().getFullYear());\n\n    const handleOpenChange = (isOpen: boolean) => {\n        setOpen(isOpen);\n        if (onOpenChange) {\n            onOpenChange(isOpen);\n        }\n    };\n\n    const displayValue = formatDateForDisplay(value, \"multipleMonths\");\n\n    const handleMonthSelect = (month: number) => {\n        if (!onChange) {\n            return;\n        }\n        const monthValue = formatMonthValue(viewYear, month);\n        if (value.includes(monthValue)) {\n            onChange(value.filter(v => v !== monthValue));\n        } else {\n            const next = [...value, monthValue];\n            next.sort();\n            onChange(next);\n        }\n    };\n\n    const handleRemove = (key: string) => {\n        if (onChange) {\n            onChange(value.filter(v => v !== key));\n        }\n    };\n\n    const selectedMonthsInView = value\n        .map(v => parseMonthValue(v))\n        .filter((p): p is { year: number; month: number } => p !== undefined && p.year === viewYear)\n        .map(p => p.month);\n\n    const tagItems = value.map(v => {\n        const parsed = parseMonthValue(v);\n        const label = parsed ? `${MONTH_NAMES_SHORT[parsed.month]} ${parsed.year}` : v;\n        return { key: v, label };\n    });\n\n    return (\n        <div className={className}>\n            <PopoverPrimitive open={open} onOpenChange={handleOpenChange}>\n                <DatePickerTrigger\n                    displayValue={displayValue}\n                    placeholder={placeholder ?? \"Pick months\"}\n                    disabled={disabled}\n                    size={size}\n                    variant={variant}\n                    invalid={invalid}\n                />\n                <PopoverPrimitive.Content align=\"start\">\n                    <YearStepper year={viewYear} onYearChange={setViewYear} />\n                    <MonthGrid\n                        selectedMonths={selectedMonthsInView}\n                        onSelectMonth={handleMonthSelect}\n                    />\n                </PopoverPrimitive.Content>\n            </PopoverPrimitive>\n            <SelectedTagsList items={tagItems} onRemove={handleRemove} disabled={disabled} />\n        </div>\n    );\n};\n\nexport { MultipleMonthsPicker };\n"],"names":["MultipleMonthsPicker","valueProp","onChange","placeholder","disabled","size","variant","invalid","onOpenChange","className","value","open","setOpen","useState","viewYear","setViewYear","Date","handleOpenChange","isOpen","displayValue","formatDateForDisplay","handleMonthSelect","month","monthValue","formatMonthValue","v","next","handleRemove","key","selectedMonthsInView","parseMonthValue","p","undefined","tagItems","parsed","label","MONTH_NAMES_SHORT","PopoverPrimitive","DatePickerTrigger","YearStepper","MonthGrid","SelectedTagsList"],"mappings":";;;;;;;;AAUA,MAAMA,uBAAuB,CAAC,EAC1B,OAAOC,SAAS,EAChBC,QAAQ,EACRC,WAAW,EACXC,QAAQ,EACRC,IAAI,EACJC,OAAO,EACPC,OAAO,EACPC,YAAY,EACZC,SAAS,EACe;IACxB,MAAMC,QAAQT,aAAa,EAAE;IAC7B,MAAM,CAACU,MAAMC,QAAQ,GAAGC,SAAS;IACjC,MAAM,CAACC,UAAUC,YAAY,GAAGF,SAAS,IAAIG,OAAO,WAAW;IAE/D,MAAMC,mBAAmB,CAACC;QACtBN,QAAQM;QACR,IAAIV,cACAA,aAAaU;IAErB;IAEA,MAAMC,eAAeC,qBAAqBV,OAAO;IAEjD,MAAMW,oBAAoB,CAACC;QACvB,IAAI,CAACpB,UACD;QAEJ,MAAMqB,aAAaC,iBAAiBV,UAAUQ;QAC9C,IAAIZ,MAAM,QAAQ,CAACa,aACfrB,SAASQ,MAAM,MAAM,CAACe,CAAAA,IAAKA,MAAMF;aAC9B;YACH,MAAMG,OAAO;mBAAIhB;gBAAOa;aAAW;YACnCG,KAAK,IAAI;YACTxB,SAASwB;QACb;IACJ;IAEA,MAAMC,eAAe,CAACC;QAClB,IAAI1B,UACAA,SAASQ,MAAM,MAAM,CAACe,CAAAA,IAAKA,MAAMG;IAEzC;IAEA,MAAMC,uBAAuBnB,MACxB,GAAG,CAACe,CAAAA,IAAKK,gBAAgBL,IACzB,MAAM,CAAC,CAACM,IAA4CA,AAAMC,WAAND,KAAmBA,EAAE,IAAI,KAAKjB,UAClF,GAAG,CAACiB,CAAAA,IAAKA,EAAE,KAAK;IAErB,MAAME,WAAWvB,MAAM,GAAG,CAACe,CAAAA;QACvB,MAAMS,SAASJ,gBAAgBL;QAC/B,MAAMU,QAAQD,SAAS,GAAGE,iBAAiB,CAACF,OAAO,KAAK,CAAC,CAAC,CAAC,EAAEA,OAAO,IAAI,EAAE,GAAGT;QAC7E,OAAO;YAAE,KAAKA;YAAGU;QAAM;IAC3B;IAEA,OAAO,WAAP,GACI,oBAAC;QAAI,WAAW1B;qBACZ,oBAAC4B,kBAAgBA;QAAC,MAAM1B;QAAM,cAAcM;qBACxC,oBAACqB,mBAAiBA;QACd,cAAcnB;QACd,aAAahB,eAAe;QAC5B,UAAUC;QACV,MAAMC;QACN,SAASC;QACT,SAASC;sBAEb,oBAAC8B,iBAAiB,OAAO;QAAC,OAAM;qBAC5B,oBAACE,aAAWA;QAAC,MAAMzB;QAAU,cAAcC;sBAC3C,oBAACyB,WAASA;QACN,gBAAgBX;QAChB,eAAeR;wBAI3B,oBAACoB,kBAAgBA;QAAC,OAAOR;QAAU,UAAUN;QAAc,UAAUvB;;AAGjF"}

package/DatePicker/primitives/MultipleYearsPicker.d.ts

@@ -0,0 +1,4 @@
+import React from "react";
+import type { MultipleYearsPickerProps } from "../utils/types.js";
+declare const MultipleYearsPicker: ({ value: valueProp, onChange, placeholder, disabled, size, variant, invalid, yearRange, onOpenChange, className }: MultipleYearsPickerProps) => React.JSX.Element;
+export { MultipleYearsPicker };

package/DatePicker/primitives/MultipleYearsPicker.js

@@ -0,0 +1,60 @@
+import react, { useState } from "react";
+import { PopoverPrimitive } from "../../Popover/index.js";
+import { formatDateForDisplay } from "../utils/dateHelpers.js";
+import { DatePickerTrigger } from "./components/DatePickerTrigger.js";
+import { YearGrid } from "./components/YearGrid.js";
+import { SelectedTagsList } from "./components/SelectedTagsList.js";
+const MultipleYearsPicker = ({ value: valueProp, onChange, placeholder, disabled, size, variant, invalid, yearRange, onOpenChange, className })=>{
+    const value = valueProp ?? [];
+    const [open, setOpen] = useState(false);
+    const handleOpenChange = (isOpen)=>{
+        setOpen(isOpen);
+        if (onOpenChange) onOpenChange(isOpen);
+    };
+    const displayValue = formatDateForDisplay(value, "multipleYears");
+    const handleYearSelect = (year)=>{
+        if (!onChange) return;
+        if (value.includes(year)) onChange(value.filter((v)=>v !== year));
+        else {
+            const next = [
+                ...value,
+                year
+            ];
+            next.sort((a, b)=>a - b);
+            onChange(next);
+        }
+    };
+    const handleRemove = (key)=>{
+        if (onChange) onChange(value.filter((v)=>String(v) !== key));
+    };
+    const tagItems = value.map((y)=>({
+            key: String(y),
+            label: String(y)
+        }));
+    return /*#__PURE__*/ react.createElement("div", {
+        className: className
+    }, /*#__PURE__*/ react.createElement(PopoverPrimitive, {
+        open: open,
+        onOpenChange: handleOpenChange
+    }, /*#__PURE__*/ react.createElement(DatePickerTrigger, {
+        displayValue: displayValue,
+        placeholder: placeholder ?? "Pick years",
+        disabled: disabled,
+        size: size,
+        variant: variant,
+        invalid: invalid
+    }), /*#__PURE__*/ react.createElement(PopoverPrimitive.Content, {
+        align: "start"
+    }, /*#__PURE__*/ react.createElement(YearGrid, {
+        selectedYears: value,
+        onSelectYear: handleYearSelect,
+        yearRange: yearRange
+    }))), /*#__PURE__*/ react.createElement(SelectedTagsList, {
+        items: tagItems,
+        onRemove: handleRemove,
+        disabled: disabled
+    }));
+};
+export { MultipleYearsPicker };
+
+//# sourceMappingURL=MultipleYearsPicker.js.map

package/DatePicker/primitives/MultipleYearsPicker.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DatePicker/primitives/MultipleYearsPicker.js","sources":["../../../src/DatePicker/primitives/MultipleYearsPicker.tsx"],"sourcesContent":["import React, { useState } from \"react\";\nimport { PopoverPrimitive } from \"~/Popover/index.js\";\nimport type { MultipleYearsPickerProps } from \"../utils/types.js\";\nimport { formatDateForDisplay } from \"../utils/dateHelpers.js\";\nimport { DatePickerTrigger } from \"./components/DatePickerTrigger.js\";\nimport { YearGrid } from \"./components/YearGrid.js\";\nimport { SelectedTagsList } from \"./components/SelectedTagsList.js\";\n\nconst MultipleYearsPicker = ({\n    value: valueProp,\n    onChange,\n    placeholder,\n    disabled,\n    size,\n    variant,\n    invalid,\n    yearRange,\n    onOpenChange,\n    className\n}: MultipleYearsPickerProps) => {\n    const value = valueProp ?? [];\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 displayValue = formatDateForDisplay(value, \"multipleYears\");\n\n    const handleYearSelect = (year: number) => {\n        if (!onChange) {\n            return;\n        }\n        if (value.includes(year)) {\n            onChange(value.filter(v => v !== year));\n        } else {\n            const next = [...value, year];\n            next.sort((a, b) => a - b);\n            onChange(next);\n        }\n    };\n\n    const handleRemove = (key: string) => {\n        if (onChange) {\n            onChange(value.filter(v => String(v) !== key));\n        }\n    };\n\n    const tagItems = value.map(y => ({\n        key: String(y),\n        label: String(y)\n    }));\n\n    return (\n        <div className={className}>\n            <PopoverPrimitive open={open} onOpenChange={handleOpenChange}>\n                <DatePickerTrigger\n                    displayValue={displayValue}\n                    placeholder={placeholder ?? \"Pick years\"}\n                    disabled={disabled}\n                    size={size}\n                    variant={variant}\n                    invalid={invalid}\n                />\n                <PopoverPrimitive.Content align=\"start\">\n                    <YearGrid\n                        selectedYears={value}\n                        onSelectYear={handleYearSelect}\n                        yearRange={yearRange}\n                    />\n                </PopoverPrimitive.Content>\n            </PopoverPrimitive>\n            <SelectedTagsList items={tagItems} onRemove={handleRemove} disabled={disabled} />\n        </div>\n    );\n};\n\nexport { MultipleYearsPicker };\n"],"names":["MultipleYearsPicker","valueProp","onChange","placeholder","disabled","size","variant","invalid","yearRange","onOpenChange","className","value","open","setOpen","useState","handleOpenChange","isOpen","displayValue","formatDateForDisplay","handleYearSelect","year","v","next","a","b","handleRemove","key","String","tagItems","y","PopoverPrimitive","DatePickerTrigger","YearGrid","SelectedTagsList"],"mappings":";;;;;;AAQA,MAAMA,sBAAsB,CAAC,EACzB,OAAOC,SAAS,EAChBC,QAAQ,EACRC,WAAW,EACXC,QAAQ,EACRC,IAAI,EACJC,OAAO,EACPC,OAAO,EACPC,SAAS,EACTC,YAAY,EACZC,SAAS,EACc;IACvB,MAAMC,QAAQV,aAAa,EAAE;IAC7B,MAAM,CAACW,MAAMC,QAAQ,GAAGC,SAAS;IAEjC,MAAMC,mBAAmB,CAACC;QACtBH,QAAQG;QACR,IAAIP,cACAA,aAAaO;IAErB;IAEA,MAAMC,eAAeC,qBAAqBP,OAAO;IAEjD,MAAMQ,mBAAmB,CAACC;QACtB,IAAI,CAAClB,UACD;QAEJ,IAAIS,MAAM,QAAQ,CAACS,OACflB,SAASS,MAAM,MAAM,CAACU,CAAAA,IAAKA,MAAMD;aAC9B;YACH,MAAME,OAAO;mBAAIX;gBAAOS;aAAK;YAC7BE,KAAK,IAAI,CAAC,CAACC,GAAGC,IAAMD,IAAIC;YACxBtB,SAASoB;QACb;IACJ;IAEA,MAAMG,eAAe,CAACC;QAClB,IAAIxB,UACAA,SAASS,MAAM,MAAM,CAACU,CAAAA,IAAKM,OAAON,OAAOK;IAEjD;IAEA,MAAME,WAAWjB,MAAM,GAAG,CAACkB,CAAAA,IAAM;YAC7B,KAAKF,OAAOE;YACZ,OAAOF,OAAOE;QAClB;IAEA,OAAO,WAAP,GACI,oBAAC;QAAI,WAAWnB;qBACZ,oBAACoB,kBAAgBA;QAAC,MAAMlB;QAAM,cAAcG;qBACxC,oBAACgB,mBAAiBA;QACd,cAAcd;QACd,aAAad,eAAe;QAC5B,UAAUC;QACV,MAAMC;QACN,SAASC;QACT,SAASC;sBAEb,oBAACuB,iBAAiB,OAAO;QAAC,OAAM;qBAC5B,oBAACE,UAAQA;QACL,eAAerB;QACf,cAAcQ;QACd,WAAWX;wBAIvB,oBAACyB,kBAAgBA;QAAC,OAAOL;QAAU,UAAUH;QAAc,UAAUrB;;AAGjF"}

package/DatePicker/primitives/TimeOnlyPicker.d.ts

@@ -0,0 +1,4 @@
+import React from "react";
+import type { TimeOnlyPickerProps } from "../utils/types.js";
+declare const TimeOnlyPicker: ({ value, onChange, disabled, size, variant, invalid, className }: TimeOnlyPickerProps) => React.JSX.Element;
+export { TimeOnlyPicker };

package/DatePicker/primitives/TimeOnlyPicker.js

@@ -0,0 +1,14 @@
+import react from "react";
+import { TimePicker } from "./components/TimePicker.js";
+const TimeOnlyPicker = ({ value, onChange, disabled, size, variant, invalid, className })=>/*#__PURE__*/ react.createElement(TimePicker, {
+        value: value,
+        onChange: onChange,
+        disabled: disabled,
+        size: size,
+        variant: variant,
+        invalid: invalid,
+        className: className
+    });
+export { TimeOnlyPicker };
+
+//# sourceMappingURL=TimeOnlyPicker.js.map

package/DatePicker/primitives/TimeOnlyPicker.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DatePicker/primitives/TimeOnlyPicker.js","sources":["../../../src/DatePicker/primitives/TimeOnlyPicker.tsx"],"sourcesContent":["import React from \"react\";\nimport type { TimeOnlyPickerProps } from \"../utils/types.js\";\nimport { TimePicker } from \"./components/TimePicker.js\";\n\nconst TimeOnlyPicker = ({\n    value,\n    onChange,\n    disabled,\n    size,\n    variant,\n    invalid,\n    className\n}: TimeOnlyPickerProps) => {\n    return (\n        <TimePicker\n            value={value}\n            onChange={onChange}\n            disabled={disabled}\n            size={size}\n            variant={variant}\n            invalid={invalid}\n            className={className}\n        />\n    );\n};\n\nexport { TimeOnlyPicker };\n"],"names":["TimeOnlyPicker","value","onChange","disabled","size","variant","invalid","className","TimePicker"],"mappings":";;AAIA,MAAMA,iBAAiB,CAAC,EACpBC,KAAK,EACLC,QAAQ,EACRC,QAAQ,EACRC,IAAI,EACJC,OAAO,EACPC,OAAO,EACPC,SAAS,EACS,GACX,WAAP,GACI,oBAACC,YAAUA;QACP,OAAOP;QACP,UAAUC;QACV,UAAUC;QACV,MAAMC;QACN,SAASC;QACT,SAASC;QACT,WAAWC"}

package/DatePicker/primitives/WeekPicker.d.ts

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

package/DatePicker/primitives/WeekPicker.js

@@ -0,0 +1,93 @@
+import react, { useMemo, useState } from "react";
+import { eachDayOfInterval, endOfISOWeek, startOfISOWeek } from "date-fns";
+import { Calendar } from "../../Calendar/index.js";
+import { PopoverPrimitive } from "../../Popover/index.js";
+import { formatDateForDisplay, formatWeekValue, parseWeekValue } from "../utils/dateHelpers.js";
+import { DatePickerTrigger } from "./components/DatePickerTrigger.js";
+function weekDatesFromParsed(parsed) {
+    const jan4 = new Date(parsed.year, 0, 4);
+    const weekStart = startOfISOWeek(new Date(jan4.getTime() + (parsed.week - 1) * 604800000));
+    return eachDayOfInterval({
+        start: weekStart,
+        end: endOfISOWeek(weekStart)
+    });
+}
+const WeekPicker = ({ value, onChange, placeholder, disabled, size, variant, invalid, onOpenChange, className, displayFormat })=>{
+    const [open, setOpen] = useState(false);
+    const [hoveredDay, setHoveredDay] = useState();
+    const handleOpenChange = (isOpen)=>{
+        setOpen(isOpen);
+        if (!isOpen) setHoveredDay(void 0);
+        if (onOpenChange) onOpenChange(isOpen);
+    };
+    const displayValue = formatDateForDisplay(value, "week", displayFormat);
+    const parsed = value ? parseWeekValue(value) : void 0;
+    const selectedWeekDays = useMemo(()=>parsed ? weekDatesFromParsed(parsed) : [], [
+        value
+    ]);
+    const hoveredWeekDays = useMemo(()=>{
+        if (!hoveredDay) return [];
+        const start = startOfISOWeek(hoveredDay);
+        return eachDayOfInterval({
+            start,
+            end: endOfISOWeek(start)
+        });
+    }, [
+        hoveredDay
+    ]);
+    const modifiers = useMemo(()=>({
+            selectedWeek: selectedWeekDays,
+            selectedWeekStart: selectedWeekDays.length > 0 ? [
+                selectedWeekDays[0]
+            ] : [],
+            selectedWeekEnd: selectedWeekDays.length > 0 ? [
+                selectedWeekDays[6]
+            ] : [],
+            hoveredWeek: hoveredWeekDays,
+            hoveredWeekStart: hoveredWeekDays.length > 0 ? [
+                hoveredWeekDays[0]
+            ] : [],
+            hoveredWeekEnd: hoveredWeekDays.length > 0 ? [
+                hoveredWeekDays[6]
+            ] : []
+        }), [
+        selectedWeekDays,
+        hoveredWeekDays
+    ]);
+    const modifiersClassNames = useMemo(()=>({
+            selectedWeek: "bg-primary-subtle [&>button]:bg-transparent [&>button]:text-primary-strong [&>button]:rounded-none [&>button]:hover:bg-primary-subtle/70",
+            selectedWeekStart: "[&>button]:bg-primary [&>button]:text-neutral-base [&>button]:rounded-l-sm [&>button]:rounded-r-none [&>button]:hover:bg-primary-strong",
+            selectedWeekEnd: "[&>button]:bg-primary [&>button]:text-neutral-base [&>button]:rounded-r-sm [&>button]:rounded-l-none [&>button]:hover:bg-primary-strong",
+            hoveredWeek: "bg-neutral-light [&>button]:rounded-none",
+            hoveredWeekStart: "[&>button]:rounded-l-sm [&>button]:rounded-r-none",
+            hoveredWeekEnd: "[&>button]:rounded-r-sm [&>button]:rounded-l-none"
+        }), []);
+    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 week",
+        disabled: disabled,
+        size: size,
+        variant: variant,
+        invalid: invalid
+    }), /*#__PURE__*/ react.createElement(PopoverPrimitive.Content, {
+        align: "start"
+    }, /*#__PURE__*/ react.createElement(Calendar, {
+        modifiers: modifiers,
+        modifiersClassNames: modifiersClassNames,
+        onDayClick: (date)=>{
+            if (onChange) onChange(formatWeekValue(date));
+            handleOpenChange(false);
+        },
+        onDayMouseEnter: (day)=>setHoveredDay(day),
+        onDayMouseLeave: ()=>setHoveredDay(void 0),
+        ISOWeek: true
+    }))));
+};
+export { WeekPicker };
+
+//# sourceMappingURL=WeekPicker.js.map

package/DatePicker/primitives/WeekPicker.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DatePicker/primitives/WeekPicker.js","sources":["../../../src/DatePicker/primitives/WeekPicker.tsx"],"sourcesContent":["import React, { useMemo, useState } from \"react\";\nimport { eachDayOfInterval, endOfISOWeek, startOfISOWeek } from \"date-fns\";\nimport { Calendar } from \"~/Calendar/index.js\";\nimport { PopoverPrimitive } from \"~/Popover/index.js\";\nimport type { WeekPickerProps } from \"../utils/types.js\";\nimport { formatDateForDisplay, formatWeekValue, parseWeekValue } from \"../utils/dateHelpers.js\";\nimport { DatePickerTrigger } from \"./components/DatePickerTrigger.js\";\n\nfunction weekDatesFromParsed(parsed: { year: number; week: number }): Date[] {\n    const jan4 = new Date(parsed.year, 0, 4);\n    const weekStart = startOfISOWeek(new Date(jan4.getTime() + (parsed.week - 1) * 7 * 86400000));\n    return eachDayOfInterval({ start: weekStart, end: endOfISOWeek(weekStart) });\n}\n\nconst WeekPicker = ({\n    value,\n    onChange,\n    placeholder,\n    disabled,\n    size,\n    variant,\n    invalid,\n    onOpenChange,\n    className,\n    displayFormat\n}: WeekPickerProps) => {\n    const [open, setOpen] = useState(false);\n    const [hoveredDay, setHoveredDay] = useState<Date | undefined>();\n\n    const handleOpenChange = (isOpen: boolean) => {\n        setOpen(isOpen);\n        if (!isOpen) {\n            setHoveredDay(undefined);\n        }\n        if (onOpenChange) {\n            onOpenChange(isOpen);\n        }\n    };\n\n    const displayValue = formatDateForDisplay(value, \"week\", displayFormat);\n\n    const parsed = value ? parseWeekValue(value) : undefined;\n    const selectedWeekDays = useMemo(() => (parsed ? weekDatesFromParsed(parsed) : []), [value]);\n\n    const hoveredWeekDays = useMemo(() => {\n        if (!hoveredDay) {\n            return [];\n        }\n        const start = startOfISOWeek(hoveredDay);\n        return eachDayOfInterval({ start, end: endOfISOWeek(start) });\n    }, [hoveredDay]);\n\n    const modifiers = useMemo(\n        () => ({\n            selectedWeek: selectedWeekDays,\n            selectedWeekStart: selectedWeekDays.length > 0 ? [selectedWeekDays[0]] : [],\n            selectedWeekEnd: selectedWeekDays.length > 0 ? [selectedWeekDays[6]] : [],\n            hoveredWeek: hoveredWeekDays,\n            hoveredWeekStart: hoveredWeekDays.length > 0 ? [hoveredWeekDays[0]] : [],\n            hoveredWeekEnd: hoveredWeekDays.length > 0 ? [hoveredWeekDays[6]] : []\n        }),\n        [selectedWeekDays, hoveredWeekDays]\n    );\n\n    const modifiersClassNames = useMemo(\n        () => ({\n            selectedWeek:\n                \"bg-primary-subtle [&>button]:bg-transparent [&>button]:text-primary-strong [&>button]:rounded-none [&>button]:hover:bg-primary-subtle/70\",\n            selectedWeekStart:\n                \"[&>button]:bg-primary [&>button]:text-neutral-base [&>button]:rounded-l-sm [&>button]:rounded-r-none [&>button]:hover:bg-primary-strong\",\n            selectedWeekEnd:\n                \"[&>button]:bg-primary [&>button]:text-neutral-base [&>button]:rounded-r-sm [&>button]:rounded-l-none [&>button]:hover:bg-primary-strong\",\n            hoveredWeek: \"bg-neutral-light [&>button]:rounded-none\",\n            hoveredWeekStart: \"[&>button]:rounded-l-sm [&>button]:rounded-r-none\",\n            hoveredWeekEnd: \"[&>button]:rounded-r-sm [&>button]:rounded-l-none\"\n        }),\n        []\n    );\n\n    return (\n        <div className={className}>\n            <PopoverPrimitive open={open} onOpenChange={handleOpenChange}>\n                <DatePickerTrigger\n                    displayValue={displayValue}\n                    placeholder={placeholder ?? \"Pick a week\"}\n                    disabled={disabled}\n                    size={size}\n                    variant={variant}\n                    invalid={invalid}\n                />\n                <PopoverPrimitive.Content align=\"start\">\n                    <Calendar\n                        modifiers={modifiers}\n                        modifiersClassNames={modifiersClassNames}\n                        onDayClick={date => {\n                            if (onChange) {\n                                onChange(formatWeekValue(date));\n                            }\n                            handleOpenChange(false);\n                        }}\n                        onDayMouseEnter={day => setHoveredDay(day)}\n                        onDayMouseLeave={() => setHoveredDay(undefined)}\n                        ISOWeek\n                    />\n                </PopoverPrimitive.Content>\n            </PopoverPrimitive>\n        </div>\n    );\n};\n\nexport { WeekPicker };\n"],"names":["weekDatesFromParsed","parsed","jan4","Date","weekStart","startOfISOWeek","eachDayOfInterval","endOfISOWeek","WeekPicker","value","onChange","placeholder","disabled","size","variant","invalid","onOpenChange","className","displayFormat","open","setOpen","useState","hoveredDay","setHoveredDay","handleOpenChange","isOpen","undefined","displayValue","formatDateForDisplay","parseWeekValue","selectedWeekDays","useMemo","hoveredWeekDays","start","modifiers","modifiersClassNames","PopoverPrimitive","DatePickerTrigger","Calendar","date","formatWeekValue","day"],"mappings":";;;;;;AAQA,SAASA,oBAAoBC,MAAsC;IAC/D,MAAMC,OAAO,IAAIC,KAAKF,OAAO,IAAI,EAAE,GAAG;IACtC,MAAMG,YAAYC,eAAe,IAAIF,KAAKD,KAAK,OAAO,KAAMD,AAAAA,CAAAA,OAAO,IAAI,GAAG,KAAdA;IAC5D,OAAOK,kBAAkB;QAAE,OAAOF;QAAW,KAAKG,aAAaH;IAAW;AAC9E;AAEA,MAAMI,aAAa,CAAC,EAChBC,KAAK,EACLC,QAAQ,EACRC,WAAW,EACXC,QAAQ,EACRC,IAAI,EACJC,OAAO,EACPC,OAAO,EACPC,YAAY,EACZC,SAAS,EACTC,aAAa,EACC;IACd,MAAM,CAACC,MAAMC,QAAQ,GAAGC,SAAS;IACjC,MAAM,CAACC,YAAYC,cAAc,GAAGF;IAEpC,MAAMG,mBAAmB,CAACC;QACtBL,QAAQK;QACR,IAAI,CAACA,QACDF,cAAcG;QAElB,IAAIV,cACAA,aAAaS;IAErB;IAEA,MAAME,eAAeC,qBAAqBnB,OAAO,QAAQS;IAEzD,MAAMjB,SAASQ,QAAQoB,eAAepB,SAASiB;IAC/C,MAAMI,mBAAmBC,QAAQ,IAAO9B,SAASD,oBAAoBC,UAAU,EAAE,EAAG;QAACQ;KAAM;IAE3F,MAAMuB,kBAAkBD,QAAQ;QAC5B,IAAI,CAACT,YACD,OAAO,EAAE;QAEb,MAAMW,QAAQ5B,eAAeiB;QAC7B,OAAOhB,kBAAkB;YAAE2B;YAAO,KAAK1B,aAAa0B;QAAO;IAC/D,GAAG;QAACX;KAAW;IAEf,MAAMY,YAAYH,QACd,IAAO;YACH,cAAcD;YACd,mBAAmBA,iBAAiB,MAAM,GAAG,IAAI;gBAACA,gBAAgB,CAAC,EAAE;aAAC,GAAG,EAAE;YAC3E,iBAAiBA,iBAAiB,MAAM,GAAG,IAAI;gBAACA,gBAAgB,CAAC,EAAE;aAAC,GAAG,EAAE;YACzE,aAAaE;YACb,kBAAkBA,gBAAgB,MAAM,GAAG,IAAI;gBAACA,eAAe,CAAC,EAAE;aAAC,GAAG,EAAE;YACxE,gBAAgBA,gBAAgB,MAAM,GAAG,IAAI;gBAACA,eAAe,CAAC,EAAE;aAAC,GAAG,EAAE;QAC1E,IACA;QAACF;QAAkBE;KAAgB;IAGvC,MAAMG,sBAAsBJ,QACxB,IAAO;YACH,cACI;YACJ,mBACI;YACJ,iBACI;YACJ,aAAa;YACb,kBAAkB;YAClB,gBAAgB;QACpB,IACA,EAAE;IAGN,OAAO,WAAP,GACI,oBAAC;QAAI,WAAWd;qBACZ,oBAACmB,kBAAgBA;QAAC,MAAMjB;QAAM,cAAcK;qBACxC,oBAACa,mBAAiBA;QACd,cAAcV;QACd,aAAahB,eAAe;QAC5B,UAAUC;QACV,MAAMC;QACN,SAASC;QACT,SAASC;sBAEb,oBAACqB,iBAAiB,OAAO;QAAC,OAAM;qBAC5B,oBAACE,UAAQA;QACL,WAAWJ;QACX,qBAAqBC;QACrB,YAAYI,CAAAA;YACR,IAAI7B,UACAA,SAAS8B,gBAAgBD;YAE7Bf,iBAAiB;QACrB;QACA,iBAAiBiB,CAAAA,MAAOlB,cAAckB;QACtC,iBAAiB,IAAMlB,cAAcG;QACrC;;AAMxB"}

package/DatePicker/primitives/YearPicker.d.ts

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