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

package/DatePicker/DatePicker.stories.js

@@ -0,0 +1,404 @@
+import react, { useState } from "react";
+import { addDays, nextSaturday } from "date-fns";
+import { DatePicker } from "./DatePicker.js";
+const meta = {
+    title: "Components/Form/DatePicker",
+    component: DatePicker,
+    argTypes: {
+        onChange: {
+            action: "onChange"
+        },
+        type: {
+            control: "select",
+            options: [
+                "date",
+                "time",
+                "dateTimeLocal",
+                "dateTimeTz",
+                "month",
+                "week",
+                "year",
+                "dateRange",
+                "multipleDates",
+                "multipleMonths",
+                "multipleYears"
+            ],
+            defaultValue: "date"
+        },
+        disabled: {
+            control: "boolean",
+            defaultValue: false
+        }
+    },
+    parameters: {
+        layout: "padded"
+    },
+    render: (args)=>{
+        const [value, setValue] = useState();
+        return /*#__PURE__*/ react.createElement(DatePicker, {
+            ...args,
+            value: value,
+            onChange: setValue
+        });
+    }
+};
+const DatePicker_stories = meta;
+const Default = {
+    args: {
+        type: "date"
+    }
+};
+const WithLabel = {
+    args: {
+        type: "date",
+        label: "Any field label"
+    }
+};
+const WithLabelRequired = {
+    args: {
+        type: "date",
+        label: "Any field label",
+        required: true
+    }
+};
+const WithDescription = {
+    args: {
+        type: "date",
+        description: "Provide the required information for processing your request."
+    }
+};
+const WithNotes = {
+    args: {
+        type: "date",
+        note: "Note: Ensure your selection or input is accurate before proceeding."
+    }
+};
+const WithErrors = {
+    args: {
+        type: "date",
+        validation: {
+            isValid: false,
+            message: "This field is required."
+        }
+    }
+};
+const Disabled = {
+    args: {
+        type: "date",
+        label: "Any field label",
+        disabled: true
+    }
+};
+const FullExample = {
+    args: {
+        type: "date",
+        label: "Any field label",
+        required: true,
+        description: "Provide the required information for processing your request.",
+        note: "Note: Ensure your selection or input is accurate before proceeding.",
+        validation: {
+            isValid: false,
+            message: "This field is required."
+        }
+    }
+};
+const WithPresets = {
+    render: (args)=>{
+        const [value, setValue] = useState();
+        const presets = [
+            {
+                label: "Today",
+                value: ()=>new Date()
+            },
+            {
+                label: "Tomorrow",
+                value: ()=>addDays(new Date(), 1)
+            },
+            {
+                label: "In 3 days",
+                value: ()=>addDays(new Date(), 3)
+            },
+            {
+                label: "In a week",
+                value: ()=>addDays(new Date(), 7)
+            },
+            {
+                label: "In 2 weeks",
+                value: ()=>addDays(new Date(), 14)
+            },
+            {
+                label: "Next Saturday",
+                value: ()=>nextSaturday(new Date())
+            }
+        ];
+        return /*#__PURE__*/ react.createElement(DatePicker, {
+            ...args,
+            type: "date",
+            value: value,
+            onChange: setValue,
+            presets: presets
+        });
+    },
+    args: {
+        label: "Pick a date",
+        description: "Choose a date or use a preset."
+    }
+};
+const TypeTime = {
+    render: (args)=>{
+        const [value, setValue] = useState();
+        return /*#__PURE__*/ react.createElement(DatePicker, {
+            ...args,
+            type: "time",
+            value: value,
+            onChange: setValue
+        });
+    },
+    args: {
+        label: "Time"
+    }
+};
+const TypeDateTimeLocal = {
+    render: (args)=>{
+        const [value, setValue] = useState();
+        return /*#__PURE__*/ react.createElement(DatePicker, {
+            ...args,
+            type: "dateTimeLocal",
+            value: value,
+            onChange: setValue
+        });
+    },
+    args: {
+        label: "Date & Time (local)"
+    }
+};
+const TypeDateTimeTz = {
+    render: (args)=>{
+        const [value, setValue] = useState();
+        return /*#__PURE__*/ react.createElement(DatePicker, {
+            ...args,
+            type: "dateTimeTz",
+            value: value,
+            onChange: setValue
+        });
+    },
+    args: {
+        label: "Date & Time (with timezone)"
+    }
+};
+const TypeMonth = {
+    render: (args)=>{
+        const [value, setValue] = useState();
+        return /*#__PURE__*/ react.createElement(DatePicker, {
+            ...args,
+            type: "month",
+            value: value,
+            onChange: setValue
+        });
+    },
+    args: {
+        label: "Month"
+    }
+};
+const TypeWeek = {
+    render: (args)=>{
+        const [value, setValue] = useState();
+        return /*#__PURE__*/ react.createElement(DatePicker, {
+            ...args,
+            type: "week",
+            value: value,
+            onChange: setValue
+        });
+    },
+    args: {
+        label: "Week"
+    }
+};
+const TypeYear = {
+    render: (args)=>{
+        const [value, setValue] = useState();
+        return /*#__PURE__*/ react.createElement(DatePicker, {
+            ...args,
+            type: "year",
+            value: value,
+            onChange: setValue,
+            yearRange: [
+                2015,
+                2035
+            ]
+        });
+    },
+    args: {
+        label: "Year"
+    }
+};
+const TypeDateRange = {
+    render: (args)=>{
+        const [value, setValue] = useState();
+        return /*#__PURE__*/ react.createElement(DatePicker, {
+            ...args,
+            type: "dateRange",
+            value: value,
+            onChange: setValue
+        });
+    },
+    args: {
+        label: "Date Range"
+    }
+};
+const TypeMultipleDates = {
+    render: (args)=>{
+        const [value, setValue] = useState([]);
+        return /*#__PURE__*/ react.createElement(DatePicker, {
+            ...args,
+            type: "multipleDates",
+            value: value,
+            onChange: setValue
+        });
+    },
+    args: {
+        label: "Multiple Dates"
+    }
+};
+const TypeMultipleMonths = {
+    render: (args)=>{
+        const [value, setValue] = useState([]);
+        return /*#__PURE__*/ react.createElement(DatePicker, {
+            ...args,
+            type: "multipleMonths",
+            value: value,
+            onChange: setValue
+        });
+    },
+    args: {
+        label: "Multiple Months"
+    }
+};
+const TypeMultipleYears = {
+    render: (args)=>{
+        const [value, setValue] = useState([]);
+        return /*#__PURE__*/ react.createElement(DatePicker, {
+            ...args,
+            type: "multipleYears",
+            value: value,
+            onChange: setValue,
+            yearRange: [
+                2015,
+                2035
+            ]
+        });
+    },
+    args: {
+        label: "Multiple Years"
+    }
+};
+const formatValue = (value)=>{
+    if (null == value) return "undefined";
+    if (value instanceof Date) return value.toISOString();
+    if (Array.isArray(value)) return JSON.stringify(value.map((v)=>v instanceof Date ? v.toISOString() : v), null, 2);
+    if ("object" == typeof value) return JSON.stringify(value, (_k, v)=>v instanceof Date ? v.toISOString() : v, 2);
+    return String(value);
+};
+const DocumentationInner = (args)=>{
+    const isMultiple = args.type?.startsWith("multiple");
+    const [value, setValue] = useState(isMultiple ? [] : void 0);
+    const [validation, setValidation] = useState({
+        isValid: true,
+        message: ""
+    });
+    const handleChange = (newValue)=>{
+        setValue(newValue);
+        const isEmpty = null == newValue || "" === newValue || Array.isArray(newValue) && 0 === newValue.length;
+        args.required && isEmpty ? setValidation({
+            isValid: false,
+            message: "This field is required"
+        }) : setValidation({
+            isValid: true,
+            message: ""
+        });
+    };
+    return /*#__PURE__*/ react.createElement("div", null, /*#__PURE__*/ react.createElement(DatePicker, {
+        ...args,
+        value: value,
+        onChange: handleChange,
+        validation: validation
+    }), /*#__PURE__*/ react.createElement("div", {
+        className: "mt-md rounded-md border-sm border-neutral-muted bg-neutral-light p-sm"
+    }, /*#__PURE__*/ react.createElement("div", {
+        className: "text-xs font-medium text-neutral-dimmed mb-xs"
+    }, "Current value"), /*#__PURE__*/ react.createElement("pre", {
+        className: "text-sm text-neutral-strong whitespace-pre-wrap m-0"
+    }, formatValue(value))));
+};
+const Documentation = {
+    render: (args)=>/*#__PURE__*/ react.createElement(DocumentationInner, {
+            key: args.type,
+            ...args
+        }),
+    args: {
+        type: "date",
+        label: "Event Date",
+        required: true,
+        disabled: false,
+        description: "Select the date for your event",
+        note: "Note: Choose a date that works for all participants",
+        placeholder: "Pick a date",
+        validation: void 0
+    },
+    argTypes: {
+        type: {
+            description: "The type of date picker variant to render",
+            control: "select",
+            options: [
+                "date",
+                "time",
+                "dateTimeLocal",
+                "dateTimeTz",
+                "month",
+                "week",
+                "year",
+                "dateRange",
+                "multipleDates",
+                "multipleMonths",
+                "multipleYears"
+            ],
+            defaultValue: "date"
+        },
+        label: {
+            description: "Label text displayed above the picker",
+            control: "text"
+        },
+        required: {
+            description: "Makes the field required",
+            control: "boolean",
+            defaultValue: true
+        },
+        disabled: {
+            description: "Disables the date picker",
+            control: "boolean",
+            defaultValue: false
+        },
+        description: {
+            description: "Helper text displayed below the label",
+            control: "text"
+        },
+        note: {
+            description: "Additional note displayed below the picker",
+            control: "text"
+        },
+        placeholder: {
+            description: "Placeholder text shown when no date is selected",
+            control: "text"
+        },
+        validation: {
+            description: "Object containing validation state and message. Please refer to the example code for details on usage."
+        },
+        onChange: {
+            description: "Callback function when the value changes"
+        }
+    }
+};
+export default DatePicker_stories;
+export { Default, Disabled, Documentation, FullExample, TypeDateRange, TypeDateTimeLocal, TypeDateTimeTz, TypeMonth, TypeMultipleDates, TypeMultipleMonths, TypeMultipleYears, TypeTime, TypeWeek, TypeYear, WithDescription, WithErrors, WithLabel, WithLabelRequired, WithNotes, WithPresets };
+
+//# sourceMappingURL=DatePicker.stories.js.map

package/DatePicker/DatePicker.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DatePicker/DatePicker.stories.js","sources":["../../src/DatePicker/DatePicker.stories.tsx"],"sourcesContent":["import React, { useState } from \"react\";\nimport type { Meta, StoryObj } from \"@storybook/react-webpack5\";\nimport { addDays, nextSaturday } from \"date-fns\";\nimport { DatePicker } from \"./DatePicker.js\";\n\nconst meta: Meta<typeof DatePicker> = {\n    title: \"Components/Form/DatePicker\",\n    component: DatePicker,\n    argTypes: {\n        onChange: { action: \"onChange\" },\n        type: {\n            control: \"select\",\n            options: [\n                \"date\",\n                \"time\",\n                \"dateTimeLocal\",\n                \"dateTimeTz\",\n                \"month\",\n                \"week\",\n                \"year\",\n                \"dateRange\",\n                \"multipleDates\",\n                \"multipleMonths\",\n                \"multipleYears\"\n            ],\n            defaultValue: \"date\"\n        },\n        disabled: {\n            control: \"boolean\",\n            defaultValue: false\n        }\n    },\n    parameters: {\n        layout: \"padded\"\n    },\n    render: args => {\n        const [value, setValue] = useState<any>();\n        return <DatePicker {...args} value={value} onChange={setValue} />;\n    }\n};\n\nexport default meta;\ntype Story = StoryObj<typeof DatePicker>;\n\nexport const Default: Story = {\n    args: {\n        type: \"date\"\n    }\n};\n\nexport const WithLabel: Story = {\n    args: {\n        type: \"date\",\n        label: \"Any field label\"\n    }\n};\n\nexport const WithLabelRequired: Story = {\n    args: {\n        type: \"date\",\n        label: \"Any field label\",\n        required: true\n    }\n};\n\nexport const WithDescription: Story = {\n    args: {\n        type: \"date\",\n        description: \"Provide the required information for processing your request.\"\n    }\n};\n\nexport const WithNotes: Story = {\n    args: {\n        type: \"date\",\n        note: \"Note: Ensure your selection or input is accurate before proceeding.\"\n    }\n};\n\nexport const WithErrors: Story = {\n    args: {\n        type: \"date\",\n        validation: {\n            isValid: false,\n            message: \"This field is required.\"\n        }\n    }\n};\n\nexport const Disabled: Story = {\n    args: {\n        type: \"date\",\n        label: \"Any field label\",\n        disabled: true\n    }\n};\n\nexport const FullExample: Story = {\n    args: {\n        type: \"date\",\n        label: \"Any field label\",\n        required: true,\n        description: \"Provide the required information for processing your request.\",\n        note: \"Note: Ensure your selection or input is accurate before proceeding.\",\n        validation: {\n            isValid: false,\n            message: \"This field is required.\"\n        }\n    }\n};\n\nexport const WithPresets: Story = {\n    render: args => {\n        const [value, setValue] = useState<string | undefined>();\n        const presets = [\n            { label: \"Today\", value: () => new Date() },\n            { label: \"Tomorrow\", value: () => addDays(new Date(), 1) },\n            { label: \"In 3 days\", value: () => addDays(new Date(), 3) },\n            { label: \"In a week\", value: () => addDays(new Date(), 7) },\n            { label: \"In 2 weeks\", value: () => addDays(new Date(), 14) },\n            { label: \"Next Saturday\", value: () => nextSaturday(new Date()) }\n        ];\n        return (\n            <DatePicker {...args} type=\"date\" value={value} onChange={setValue} presets={presets} />\n        );\n    },\n    args: {\n        label: \"Pick a date\",\n        description: \"Choose a date or use a preset.\"\n    }\n};\n\nexport const TypeTime: Story = {\n    render: args => {\n        const [value, setValue] = useState<string | undefined>();\n        return <DatePicker {...args} type=\"time\" value={value} onChange={setValue} />;\n    },\n    args: {\n        label: \"Time\"\n    }\n};\n\nexport const TypeDateTimeLocal: Story = {\n    render: args => {\n        const [value, setValue] = useState<string | undefined>();\n        return <DatePicker {...args} type=\"dateTimeLocal\" value={value} onChange={setValue} />;\n    },\n    args: {\n        label: \"Date & Time (local)\"\n    }\n};\n\nexport const TypeDateTimeTz: Story = {\n    render: args => {\n        const [value, setValue] = useState<string | undefined>();\n        return <DatePicker {...args} type=\"dateTimeTz\" value={value} onChange={setValue} />;\n    },\n    args: {\n        label: \"Date & Time (with timezone)\"\n    }\n};\n\nexport const TypeMonth: Story = {\n    render: args => {\n        const [value, setValue] = useState<string | undefined>();\n        return <DatePicker {...args} type=\"month\" value={value} onChange={setValue} />;\n    },\n    args: {\n        label: \"Month\"\n    }\n};\n\nexport const TypeWeek: Story = {\n    render: args => {\n        const [value, setValue] = useState<string | undefined>();\n        return <DatePicker {...args} type=\"week\" value={value} onChange={setValue} />;\n    },\n    args: {\n        label: \"Week\"\n    }\n};\n\nexport const TypeYear: Story = {\n    render: args => {\n        const [value, setValue] = useState<number | undefined>();\n        return (\n            <DatePicker\n                {...args}\n                type=\"year\"\n                value={value}\n                onChange={setValue}\n                yearRange={[2015, 2035]}\n            />\n        );\n    },\n    args: {\n        label: \"Year\"\n    }\n};\n\nexport const TypeDateRange: Story = {\n    render: args => {\n        const [value, setValue] = useState<{ from?: string; to?: string } | undefined>();\n        return <DatePicker {...args} type=\"dateRange\" value={value} onChange={setValue} />;\n    },\n    args: {\n        label: \"Date Range\"\n    }\n};\n\nexport const TypeMultipleDates: Story = {\n    render: args => {\n        const [value, setValue] = useState<string[]>([]);\n        return <DatePicker {...args} type=\"multipleDates\" value={value} onChange={setValue} />;\n    },\n    args: {\n        label: \"Multiple Dates\"\n    }\n};\n\nexport const TypeMultipleMonths: Story = {\n    render: args => {\n        const [value, setValue] = useState<string[]>([]);\n        return <DatePicker {...args} type=\"multipleMonths\" value={value} onChange={setValue} />;\n    },\n    args: {\n        label: \"Multiple Months\"\n    }\n};\n\nexport const TypeMultipleYears: Story = {\n    render: args => {\n        const [value, setValue] = useState<number[]>([]);\n        return (\n            <DatePicker\n                {...args}\n                type=\"multipleYears\"\n                value={value}\n                onChange={setValue}\n                yearRange={[2015, 2035]}\n            />\n        );\n    },\n    args: {\n        label: \"Multiple Years\"\n    }\n};\n\nconst formatValue = (value: any): string => {\n    if (value === undefined || value === null) {\n        return \"undefined\";\n    }\n    if (value instanceof Date) {\n        return value.toISOString();\n    }\n    if (Array.isArray(value)) {\n        return JSON.stringify(\n            value.map((v: any) => (v instanceof Date ? v.toISOString() : v)),\n            null,\n            2\n        );\n    }\n    if (typeof value === \"object\") {\n        return JSON.stringify(value, (_k, v) => (v instanceof Date ? v.toISOString() : v), 2);\n    }\n    return String(value);\n};\n\nconst DocumentationInner = (args: any) => {\n    const isMultiple = (args.type as string)?.startsWith(\"multiple\");\n    const [value, setValue] = useState<any>(isMultiple ? [] : undefined);\n    const [validation, setValidation] = useState({ isValid: true, message: \"\" });\n\n    const handleChange = (newValue: any) => {\n        setValue(newValue);\n        const isEmpty =\n            newValue === undefined ||\n            newValue === null ||\n            newValue === \"\" ||\n            (Array.isArray(newValue) && newValue.length === 0);\n        if (args.required && isEmpty) {\n            setValidation({ isValid: false, message: \"This field is required\" });\n        } else {\n            setValidation({ isValid: true, message: \"\" });\n        }\n    };\n\n    return (\n        <div>\n            <DatePicker {...args} value={value} onChange={handleChange} validation={validation} />\n            <div className=\"mt-md rounded-md border-sm border-neutral-muted bg-neutral-light p-sm\">\n                <div className=\"text-xs font-medium text-neutral-dimmed mb-xs\">Current value</div>\n                <pre className=\"text-sm text-neutral-strong whitespace-pre-wrap m-0\">\n                    {formatValue(value)}\n                </pre>\n            </div>\n        </div>\n    );\n};\n\nexport const Documentation: Story = {\n    render: args => {\n        return <DocumentationInner key={args.type as string} {...args} />;\n    },\n    args: {\n        type: \"date\",\n        label: \"Event Date\",\n        required: true,\n        disabled: false,\n        description: \"Select the date for your event\",\n        note: \"Note: Choose a date that works for all participants\",\n        placeholder: \"Pick a date\",\n        validation: undefined\n    },\n    argTypes: {\n        type: {\n            description: \"The type of date picker variant to render\",\n            control: \"select\",\n            options: [\n                \"date\",\n                \"time\",\n                \"dateTimeLocal\",\n                \"dateTimeTz\",\n                \"month\",\n                \"week\",\n                \"year\",\n                \"dateRange\",\n                \"multipleDates\",\n                \"multipleMonths\",\n                \"multipleYears\"\n            ],\n            defaultValue: \"date\"\n        },\n        label: {\n            description: \"Label text displayed above the picker\",\n            control: \"text\"\n        },\n        required: {\n            description: \"Makes the field required\",\n            control: \"boolean\",\n            defaultValue: true\n        },\n        disabled: {\n            description: \"Disables the date picker\",\n            control: \"boolean\",\n            defaultValue: false\n        },\n        description: {\n            description: \"Helper text displayed below the label\",\n            control: \"text\"\n        },\n        note: {\n            description: \"Additional note displayed below the picker\",\n            control: \"text\"\n        },\n        placeholder: {\n            description: \"Placeholder text shown when no date is selected\",\n            control: \"text\"\n        },\n        validation: {\n            description:\n                \"Object containing validation state and message. Please refer to the example code for details on usage.\"\n        },\n        onChange: {\n            description: \"Callback function when the value changes\"\n        }\n    }\n};\n"],"names":["meta","DatePicker","args","value","setValue","useState","Default","WithLabel","WithLabelRequired","WithDescription","WithNotes","WithErrors","Disabled","FullExample","WithPresets","presets","Date","addDays","nextSaturday","TypeTime","TypeDateTimeLocal","TypeDateTimeTz","TypeMonth","TypeWeek","TypeYear","TypeDateRange","TypeMultipleDates","TypeMultipleMonths","TypeMultipleYears","formatValue","Array","JSON","v","_k","String","DocumentationInner","isMultiple","undefined","validation","setValidation","handleChange","newValue","isEmpty","Documentation"],"mappings":"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"}

package/DatePicker/index.d.ts

@@ -0,0 +1,2 @@
+export * from "./DatePicker.js";
+export * from "./primitives/index.js";

package/DatePicker/index.js

@@ -0,0 +1,2 @@
+export * from "./DatePicker.js";
+export * from "./primitives/index.js";

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 }: DateOnlyPickerProps) => React.JSX.Element;
+export { DateOnlyPicker };

package/DatePicker/primitives/DateOnlyPicker.js

@@ -0,0 +1,59 @@
+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 } from "../utils/dateHelpers.js";
+import { DatePickerTrigger } from "./components/DatePickerTrigger.js";
+const DateOnlyPicker = ({ value, onChange, placeholder, disabled, size, variant, invalid, weekStartsOn, onOpenChange, className, presets, displayFormat })=>{
+    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 ? new Date(value) : void 0;
+    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
+    }), 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 { 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 } 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}: 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 ? new Date(value) : 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\"}\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                        />\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","open","setOpen","useState","handleOpenChange","isOpen","handlePresetClick","computeDate","format","displayValue","formatDateForDisplay","selectedDate","Date","undefined","PopoverPrimitive","DatePickerTrigger","Calendar","date","preset","presetDate","Button"],"mappings":";;;;;;;AASA,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,EACK;IAClB,MAAM,CAACC,MAAMC,QAAQ,GAAGC,SAAS;IAEjC,MAAMC,mBAAmB,CAACC;QACtBH,QAAQG;QACR,IAAIR,cACAA,aAAaQ;IAErB;IAEA,MAAMC,oBAAoB,CAACC;QACvB,IAAIjB,UACAA,SAASkB,OAAOD,eAAe;QAEnCH,iBAAiB;IACrB;IAEA,MAAMK,eAAeC,qBAAqBrB,OAAO,QAAQW;IACzD,MAAMW,eAAetB,QAAQ,IAAIuB,KAAKvB,SAASwB;IAE/C,OAAO,WAAP,GACI,oBAAC;QAAI,WAAWf;qBACZ,oBAACgB,kBAAgBA;QAAC,MAAMb;QAAM,cAAcG;qBACxC,oBAACW,mBAAiBA;QACd,cAAcN;QACd,aAAalB,eAAe;QAC5B,UAAUC;QACV,MAAMC;QACN,SAASC;QACT,SAASC;sBAEb,oBAACmB,iBAAiB,OAAO;QAAC,OAAM;qBAC5B,oBAAC;QAAI,WAAWf,SAAS,SAAS,SAASc;qBACvC,oBAACG,UAAQA;QACL,MAAK;QACL,UAAUL;QACV,UAAUM,CAAAA;YACN,IAAI3B,UACAA,SAAS2B,OAAOT,OAAOS,MAAM,gBAAgBJ;YAEjDT,iBAAiB;QACrB;QACA,cAAcR;QAEjBG,WAAWA,QAAQ,MAAM,GAAG,KAAK,WAAL,GACzB,oBAAC;QAAI,WAAU;OACVA,QAAQ,GAAG,CAACmB,CAAAA;QACT,MAAMC,aAAaX,OAAOU,OAAO,KAAK,IAAI;QAC1C,OAAO,WAAP,GACI,oBAACE,QAAMA;YACH,KAAKF,OAAO,KAAK;YACjB,SAAS7B,UAAU8B,aAAa,YAAY;YAC5C,MAAK;YACL,MAAMD,OAAO,KAAK;YAClB,SAAS,IAAMZ,kBAAkBY,OAAO,KAAK;;IAGzD;AAQhC"}

package/DatePicker/primitives/DatePickerPrimitive.d.ts

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

package/DatePicker/primitives/DatePickerPrimitive.js

@@ -0,0 +1,48 @@
+import react from "react";
+import { makeDecoratable } from "../../utils.js";
+import { DateOnlyPicker } from "./DateOnlyPicker.js";
+import { TimeOnlyPicker } from "./TimeOnlyPicker.js";
+import { DateTimePicker } from "./DateTimePicker.js";
+import { MonthPicker } from "./MonthPicker.js";
+import { WeekPicker } from "./WeekPicker.js";
+import { YearPicker } from "./YearPicker.js";
+import { DateRangePicker } from "./DateRangePicker.js";
+import { MultipleDatesPicker } from "./MultipleDatesPicker.js";
+import { MultipleMonthsPicker } from "./MultipleMonthsPicker.js";
+import { MultipleYearsPicker } from "./MultipleYearsPicker.js";
+const DecoratableDatePickerPrimitive = (props)=>{
+    switch(props.type){
+        case "date":
+            return /*#__PURE__*/ react.createElement(DateOnlyPicker, props);
+        case "time":
+            return /*#__PURE__*/ react.createElement(TimeOnlyPicker, props);
+        case "dateTimeLocal":
+            return /*#__PURE__*/ react.createElement(DateTimePicker, {
+                ...props,
+                withTimezone: false
+            });
+        case "dateTimeTz":
+            return /*#__PURE__*/ react.createElement(DateTimePicker, {
+                ...props,
+                withTimezone: true
+            });
+        case "month":
+            return /*#__PURE__*/ react.createElement(MonthPicker, props);
+        case "week":
+            return /*#__PURE__*/ react.createElement(WeekPicker, props);
+        case "year":
+            return /*#__PURE__*/ react.createElement(YearPicker, props);
+        case "dateRange":
+            return /*#__PURE__*/ react.createElement(DateRangePicker, props);
+        case "multipleDates":
+            return /*#__PURE__*/ react.createElement(MultipleDatesPicker, props);
+        case "multipleMonths":
+            return /*#__PURE__*/ react.createElement(MultipleMonthsPicker, props);
+        case "multipleYears":
+            return /*#__PURE__*/ react.createElement(MultipleYearsPicker, props);
+    }
+};
+const DatePickerPrimitive = makeDecoratable("DatePickerPrimitive", DecoratableDatePickerPrimitive);
+export { DatePickerPrimitive };
+
+//# sourceMappingURL=DatePickerPrimitive.js.map

package/DatePicker/primitives/DatePickerPrimitive.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DatePicker/primitives/DatePickerPrimitive.js","sources":["../../../src/DatePicker/primitives/DatePickerPrimitive.tsx"],"sourcesContent":["import React from \"react\";\nimport { makeDecoratable } from \"~/utils.js\";\nimport type { DatePickerPrimitiveProps } from \"../utils/types.js\";\nimport { DateOnlyPicker } from \"./DateOnlyPicker.js\";\nimport { TimeOnlyPicker } from \"./TimeOnlyPicker.js\";\nimport { DateTimePicker } from \"./DateTimePicker.js\";\nimport { MonthPicker } from \"./MonthPicker.js\";\nimport { WeekPicker } from \"./WeekPicker.js\";\nimport { YearPicker } from \"./YearPicker.js\";\nimport { DateRangePicker } from \"./DateRangePicker.js\";\nimport { MultipleDatesPicker } from \"./MultipleDatesPicker.js\";\nimport { MultipleMonthsPicker } from \"./MultipleMonthsPicker.js\";\nimport { MultipleYearsPicker } from \"./MultipleYearsPicker.js\";\n\nconst DecoratableDatePickerPrimitive = (props: DatePickerPrimitiveProps) => {\n    switch (props.type) {\n        case \"date\":\n            return <DateOnlyPicker {...props} />;\n        case \"time\":\n            return <TimeOnlyPicker {...props} />;\n        case \"dateTimeLocal\":\n            return <DateTimePicker {...props} withTimezone={false} />;\n        case \"dateTimeTz\":\n            return <DateTimePicker {...props} withTimezone={true} />;\n        case \"month\":\n            return <MonthPicker {...props} />;\n        case \"week\":\n            return <WeekPicker {...props} />;\n        case \"year\":\n            return <YearPicker {...props} />;\n        case \"dateRange\":\n            return <DateRangePicker {...props} />;\n        case \"multipleDates\":\n            return <MultipleDatesPicker {...props} />;\n        case \"multipleMonths\":\n            return <MultipleMonthsPicker {...props} />;\n        case \"multipleYears\":\n            return <MultipleYearsPicker {...props} />;\n    }\n};\n\nconst DatePickerPrimitive = makeDecoratable(\"DatePickerPrimitive\", DecoratableDatePickerPrimitive);\n\nexport { DatePickerPrimitive, type DatePickerPrimitiveProps };\n"],"names":["DecoratableDatePickerPrimitive","props","DateOnlyPicker","TimeOnlyPicker","DateTimePicker","MonthPicker","WeekPicker","YearPicker","DateRangePicker","MultipleDatesPicker","MultipleMonthsPicker","MultipleYearsPicker","DatePickerPrimitive","makeDecoratable"],"mappings":";;;;;;;;;;;;AAcA,MAAMA,iCAAiC,CAACC;IACpC,OAAQA,MAAM,IAAI;QACd,KAAK;YACD,OAAO,WAAP,GAAO,oBAACC,gBAAmBD;QAC/B,KAAK;YACD,OAAO,WAAP,GAAO,oBAACE,gBAAmBF;QAC/B,KAAK;YACD,OAAO,WAAP,GAAO,oBAACG,gBAAcA;gBAAE,GAAGH,KAAK;gBAAE,cAAc;;QACpD,KAAK;YACD,OAAO,WAAP,GAAO,oBAACG,gBAAcA;gBAAE,GAAGH,KAAK;gBAAE,cAAc;;QACpD,KAAK;YACD,OAAO,WAAP,GAAO,oBAACI,aAAgBJ;QAC5B,KAAK;YACD,OAAO,WAAP,GAAO,oBAACK,YAAeL;QAC3B,KAAK;YACD,OAAO,WAAP,GAAO,oBAACM,YAAeN;QAC3B,KAAK;YACD,OAAO,WAAP,GAAO,oBAACO,iBAAoBP;QAChC,KAAK;YACD,OAAO,WAAP,GAAO,oBAACQ,qBAAwBR;QACpC,KAAK;YACD,OAAO,WAAP,GAAO,oBAACS,sBAAyBT;QACrC,KAAK;YACD,OAAO,WAAP,GAAO,oBAACU,qBAAwBV;IACxC;AACJ;AAEA,MAAMW,sBAAsBC,gBAAgB,uBAAuBb"}

package/DatePicker/primitives/DateRangePicker.d.ts

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

package/DatePicker/primitives/DateRangePicker.js

@@ -0,0 +1,49 @@
+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";
+const toDateStr = (d)=>format(d, "yyyy-MM-dd");
+const DateRangePicker = ({ value, onChange, placeholder, disabled, size, variant, invalid, weekStartsOn, onOpenChange, className, displayFormat })=>{
+    const [open, setOpen] = useState(false);
+    const handleOpenChange = (isOpen)=>{
+        setOpen(isOpen);
+        if (onOpenChange) onOpenChange(isOpen);
+    };
+    const displayValue = formatDateForDisplay(value, "dateRange", displayFormat);
+    const handleRangeSelect = (range)=>{
+        if (onChange) range?.from ? onChange({
+            from: toDateStr(range.from),
+            to: range.to ? toDateStr(range.to) : void 0
+        }) : onChange(void 0);
+    };
+    const selected = value?.from ? {
+        from: new Date(value.from),
+        to: value.to ? new Date(value.to) : void 0
+    } : void 0;
+    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 range",
+        disabled: disabled,
+        size: size,
+        variant: variant,
+        invalid: invalid
+    }), /*#__PURE__*/ react.createElement(PopoverPrimitive.Content, {
+        align: "start"
+    }, /*#__PURE__*/ react.createElement(Calendar, {
+        mode: "range",
+        selected: selected,
+        onSelect: handleRangeSelect,
+        numberOfMonths: 2,
+        weekStartsOn: weekStartsOn
+    }))));
+};
+export { DateRangePicker };
+
+//# sourceMappingURL=DateRangePicker.js.map