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

package/DatePicker/DatePicker.stories.js.map

@@ -1 +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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"}
+{"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\";\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                \"birthday\",\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\n/**\n * Picks a date one step at a time: a day, then a month, then a year (newest first). Built for\n * dates far in the past, like a date of birth. The value is a `YYYY-MM-DD` string.\n */\nexport const TypeBirthday: Story = {\n    render: args => {\n        const [value, setValue] = useState<string | undefined>(\"1990-02-09\");\n        return (\n            <div className=\"flex flex-col gap-md max-w-[480px]\">\n                <DatePicker {...args} type=\"birthday\" value={value} onChange={setValue} />\n                <span className=\"text-sm text-neutral-muted\">Value: {value ?? \"(empty)\"}</span>\n            </div>\n        );\n    },\n    args: {\n        label: \"Date of birth\"\n    }\n};\n\n/**\n * With `minDate` and `maxDate`, years run from the latest allowed one down to the earliest,\n * and days and months that can't make an allowed date are dimmed. Here: 18 to 100 years old.\n */\nexport const TypeBirthdayWithLimits: Story = {\n    render: args => {\n        const [value, setValue] = useState<string | undefined>();\n        const today = new Date();\n        const [minDate] = useState(\n            () => new Date(today.getFullYear() - 100, today.getMonth(), today.getDate())\n        );\n        const [maxDate] = useState(\n            () => new Date(today.getFullYear() - 18, today.getMonth(), today.getDate())\n        );\n        return (\n            <div className=\"flex flex-col gap-md max-w-[480px]\">\n                <DatePicker\n                    {...args}\n                    type=\"birthday\"\n                    value={value}\n                    onChange={setValue}\n                    minDate={minDate}\n                    maxDate={maxDate}\n                />\n                <span className=\"text-sm text-neutral-muted\">Value: {value ?? \"(empty)\"}</span>\n            </div>\n        );\n    },\n    args: {\n        label: \"Date of birth\",\n        description: \"You must be 18 or older.\"\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","TypeBirthday","TypeBirthdayWithLimits","today","minDate","maxDate","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/primitives/BirthdayPicker.d.ts

@@ -0,0 +1,13 @@
+import React from "react";
+import type { BirthdayPickerProps } from "../utils/types.js";
+/**
+ * Picks a date one part at a time: a day, then a month, then a year. Each pick moves to the
+ * next step. A pick that completes the date commits it, and the last step closes the picker.
+ * Meant for dates far in the past, like a date of birth, where paging a calendar month by
+ * month is slow.
+ *
+ * The value is a `YYYY-MM-DD` string, the same as the `date` picker's. Days, months and years
+ * that can't make a date between `minDate` and `maxDate` can't be picked.
+ */
+declare const BirthdayPicker: ({ value, onChange, disabled, size, variant, invalid, yearRange, minDate, maxDate, onOpenChange, className }: BirthdayPickerProps) => React.JSX.Element;
+export { BirthdayPicker };

package/DatePicker/primitives/BirthdayPicker.js

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

package/DatePicker/primitives/BirthdayPicker.js.map

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

package/DatePicker/primitives/BirthdayPickerCell.d.ts

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

package/DatePicker/primitives/BirthdayPickerCell.js

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

package/DatePicker/primitives/BirthdayPickerCell.js.map

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

package/DatePicker/primitives/BirthdayPickerSegments.d.ts

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

package/DatePicker/primitives/BirthdayPickerSegments.js

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