@webiny/admin-ui 6.4.0-beta.2 → 6.4.0-beta.4

package/ColorPicker/ColorPicker.stories.js.map

@@ -1 +1 @@
-{"version":3,"file":"ColorPicker/ColorPicker.stories.js","sources":["../../src/ColorPicker/ColorPicker.stories.tsx"],"sourcesContent":["import React, { useState, useEffect } from \"react\";\nimport type { Meta, StoryObj } from \"@storybook/react-webpack5\";\nimport { ColorPicker } from \"./ColorPicker.js\";\n\nconst meta: Meta<typeof ColorPicker> = {\n    title: \"Components/Form/ColorPicker\",\n    component: ColorPicker,\n    argTypes: {\n        onChange: { action: \"onChange\" },\n        disabled: {\n            control: \"boolean\",\n            defaultValue: false\n        }\n    },\n    parameters: {\n        layout: \"padded\"\n    },\n    render: args => {\n        const [value, setValue] = useState(args.value);\n        return <ColorPicker {...args} value={value} onChange={setValue} />;\n    }\n};\n\nexport default meta;\ntype Story = StoryObj<typeof ColorPicker>;\n\nexport const Default: Story = {};\n\nexport const WithLabel: Story = {\n    args: {\n        ...Default.args,\n        label: \"Any field label\"\n    }\n};\n\nexport const WithLabelRequired: Story = {\n    args: {\n        ...Default.args,\n        label: \"Any field label\",\n        required: true\n    }\n};\n\nexport const WithDescription: Story = {\n    args: {\n        ...Default.args,\n        description: \"Provide the required information for processing your request.\"\n    }\n};\n\nexport const WithNotes: Story = {\n    args: {\n        ...Default.args,\n        note: \"Note: Ensure your selection or input is accurate before proceeding.\"\n    }\n};\n\nexport const WithErrors: Story = {\n    args: {\n        ...Default.args,\n        validation: {\n            isValid: false,\n            message: \"This field is required.\"\n        }\n    }\n};\n\nexport const Disabled: Story = {\n    args: {\n        ...Default.args,\n        label: \"Any field label\",\n        disabled: true\n    }\n};\n\nexport const FullExample: Story = {\n    args: {\n        ...Default.args,\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 Documentation: Story = {\n    render: args => {\n        const [value, setValue] = useState(args.value || \"\");\n        const [validation, setValidation] = useState({ isValid: true, message: \"\" });\n\n        // Update value when args.value changes\n        useEffect(() => {\n            setValue(args.value || \"\");\n        }, [args.value]);\n\n        const handleChange = (newValue: string) => {\n            setValue(newValue);\n\n            // Simple required validation\n            if (args.required && (!newValue || newValue.trim() === \"\")) {\n                setValidation({ isValid: false, message: \"Please select a color\" });\n            } else {\n                setValidation({ isValid: true, message: \"\" });\n            }\n        };\n\n        // Validate on required change or value change\n        useEffect(() => {\n            if (args.required && (!value || value.trim() === \"\")) {\n                setValidation({ isValid: false, message: \"Please select a color\" });\n            } else {\n                setValidation({ isValid: true, message: \"\" });\n            }\n        }, [args.required, value]);\n\n        return (\n            <ColorPicker\n                {...args}\n                value={value}\n                onChange={handleChange}\n                validation={validation}\n                required={args.required}\n            />\n        );\n    },\n    args: {\n        label: \"Brand Color\",\n        required: true,\n        disabled: false,\n        description: \"Select your primary brand color\",\n        note: \"Note: Choose a color that aligns with your brand identity\",\n        value: \"#4285F4\",\n        validation: undefined\n    },\n    argTypes: {\n        label: {\n            description: \"Label text for the color picker\",\n            control: \"text\"\n        },\n        required: {\n            description: \"Makes the field required when set to true\",\n            control: \"boolean\"\n        },\n        disabled: {\n            description: \"Disables the color picker when set to true\",\n            control: \"boolean\"\n        },\n        description: {\n            description: \"Additional description text below the field\",\n            control: \"text\"\n        },\n        note: {\n            description: \"Additional note text below the field\",\n            control: \"text\"\n        },\n        value: {\n            description: \"The selected color value (hex, RGB, or named color)\",\n            control: \"color\"\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: \"Function called when the color changes\"\n        }\n    }\n};\n"],"names":["meta","ColorPicker","args","value","setValue","useState","Default","WithLabel","WithLabelRequired","WithDescription","WithNotes","WithErrors","Disabled","FullExample","Documentation","validation","setValidation","useEffect","handleChange","newValue","undefined"],"mappings":"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"}
+{"version":3,"file":"ColorPicker/ColorPicker.stories.js","sources":["../../src/ColorPicker/ColorPicker.stories.tsx"],"sourcesContent":["import React, { useState, useEffect } from \"react\";\nimport type { Meta, StoryObj } from \"@storybook/react\";\nimport { ColorPicker } from \"./ColorPicker.js\";\n\nconst meta: Meta<typeof ColorPicker> = {\n    title: \"Components/Form/ColorPicker\",\n    component: ColorPicker,\n    argTypes: {\n        onChange: { action: \"onChange\" },\n        disabled: {\n            control: \"boolean\",\n            defaultValue: false\n        }\n    },\n    parameters: {\n        layout: \"padded\"\n    },\n    render: args => {\n        const [value, setValue] = useState(args.value);\n        return <ColorPicker {...args} value={value} onChange={setValue} />;\n    }\n};\n\nexport default meta;\ntype Story = StoryObj<typeof ColorPicker>;\n\nexport const Default: Story = {};\n\nexport const WithLabel: Story = {\n    args: {\n        ...Default.args,\n        label: \"Any field label\"\n    }\n};\n\nexport const WithLabelRequired: Story = {\n    args: {\n        ...Default.args,\n        label: \"Any field label\",\n        required: true\n    }\n};\n\nexport const WithDescription: Story = {\n    args: {\n        ...Default.args,\n        description: \"Provide the required information for processing your request.\"\n    }\n};\n\nexport const WithNotes: Story = {\n    args: {\n        ...Default.args,\n        note: \"Note: Ensure your selection or input is accurate before proceeding.\"\n    }\n};\n\nexport const WithErrors: Story = {\n    args: {\n        ...Default.args,\n        validation: {\n            isValid: false,\n            message: \"This field is required.\"\n        }\n    }\n};\n\nexport const Disabled: Story = {\n    args: {\n        ...Default.args,\n        label: \"Any field label\",\n        disabled: true\n    }\n};\n\nexport const FullExample: Story = {\n    args: {\n        ...Default.args,\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 Documentation: Story = {\n    render: args => {\n        const [value, setValue] = useState(args.value || \"\");\n        const [validation, setValidation] = useState({ isValid: true, message: \"\" });\n\n        // Update value when args.value changes\n        useEffect(() => {\n            setValue(args.value || \"\");\n        }, [args.value]);\n\n        const handleChange = (newValue: string) => {\n            setValue(newValue);\n\n            // Simple required validation\n            if (args.required && (!newValue || newValue.trim() === \"\")) {\n                setValidation({ isValid: false, message: \"Please select a color\" });\n            } else {\n                setValidation({ isValid: true, message: \"\" });\n            }\n        };\n\n        // Validate on required change or value change\n        useEffect(() => {\n            if (args.required && (!value || value.trim() === \"\")) {\n                setValidation({ isValid: false, message: \"Please select a color\" });\n            } else {\n                setValidation({ isValid: true, message: \"\" });\n            }\n        }, [args.required, value]);\n\n        return (\n            <ColorPicker\n                {...args}\n                value={value}\n                onChange={handleChange}\n                validation={validation}\n                required={args.required}\n            />\n        );\n    },\n    args: {\n        label: \"Brand Color\",\n        required: true,\n        disabled: false,\n        description: \"Select your primary brand color\",\n        note: \"Note: Choose a color that aligns with your brand identity\",\n        value: \"#4285F4\",\n        validation: undefined\n    },\n    argTypes: {\n        label: {\n            description: \"Label text for the color picker\",\n            control: \"text\"\n        },\n        required: {\n            description: \"Makes the field required when set to true\",\n            control: \"boolean\"\n        },\n        disabled: {\n            description: \"Disables the color picker when set to true\",\n            control: \"boolean\"\n        },\n        description: {\n            description: \"Additional description text below the field\",\n            control: \"text\"\n        },\n        note: {\n            description: \"Additional note text below the field\",\n            control: \"text\"\n        },\n        value: {\n            description: \"The selected color value (hex, RGB, or named color)\",\n            control: \"color\"\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: \"Function called when the color changes\"\n        }\n    }\n};\n"],"names":["meta","ColorPicker","args","value","setValue","useState","Default","WithLabel","WithLabelRequired","WithDescription","WithNotes","WithErrors","Disabled","FullExample","Documentation","validation","setValidation","useEffect","handleChange","newValue","undefined"],"mappings":";;AAIA,MAAMA,OAAiC;IACnC,OAAO;IACP,WAAWC;IACX,UAAU;QACN,UAAU;YAAE,QAAQ;QAAW;QAC/B,UAAU;YACN,SAAS;YACT,cAAc;QAClB;IACJ;IACA,YAAY;QACR,QAAQ;IACZ;IACA,QAAQC,CAAAA;QACJ,MAAM,CAACC,OAAOC,SAAS,GAAGC,SAASH,KAAK,KAAK;QAC7C,OAAO,WAAP,GAAO,oBAACD,aAAWA;YAAE,GAAGC,IAAI;YAAE,OAAOC;YAAO,UAAUC;;IAC1D;AACJ;AAEA,4BAAeJ;AAGR,MAAMM,UAAiB,CAAC;AAExB,MAAMC,YAAmB;IAC5B,MAAM;QACF,GAAGD,QAAQ,IAAI;QACf,OAAO;IACX;AACJ;AAEO,MAAME,oBAA2B;IACpC,MAAM;QACF,GAAGF,QAAQ,IAAI;QACf,OAAO;QACP,UAAU;IACd;AACJ;AAEO,MAAMG,kBAAyB;IAClC,MAAM;QACF,GAAGH,QAAQ,IAAI;QACf,aAAa;IACjB;AACJ;AAEO,MAAMI,YAAmB;IAC5B,MAAM;QACF,GAAGJ,QAAQ,IAAI;QACf,MAAM;IACV;AACJ;AAEO,MAAMK,aAAoB;IAC7B,MAAM;QACF,GAAGL,QAAQ,IAAI;QACf,YAAY;YACR,SAAS;YACT,SAAS;QACb;IACJ;AACJ;AAEO,MAAMM,WAAkB;IAC3B,MAAM;QACF,GAAGN,QAAQ,IAAI;QACf,OAAO;QACP,UAAU;IACd;AACJ;AAEO,MAAMO,cAAqB;IAC9B,MAAM;QACF,GAAGP,QAAQ,IAAI;QACf,OAAO;QACP,UAAU;QACV,aAAa;QACb,MAAM;QACN,YAAY;YACR,SAAS;YACT,SAAS;QACb;IACJ;AACJ;AAEO,MAAMQ,gBAAuB;IAChC,QAAQZ,CAAAA;QACJ,MAAM,CAACC,OAAOC,SAAS,GAAGC,SAASH,KAAK,KAAK,IAAI;QACjD,MAAM,CAACa,YAAYC,cAAc,GAAGX,SAAS;YAAE,SAAS;YAAM,SAAS;QAAG;QAG1EY,UAAU;YACNb,SAASF,KAAK,KAAK,IAAI;QAC3B,GAAG;YAACA,KAAK,KAAK;SAAC;QAEf,MAAMgB,eAAe,CAACC;YAClBf,SAASe;YAGLjB,KAAK,QAAQ,IAAK,EAACiB,YAAYA,AAAoB,OAApBA,SAAS,IAAI,EAAQ,IACpDH,cAAc;gBAAE,SAAS;gBAAO,SAAS;YAAwB,KAEjEA,cAAc;gBAAE,SAAS;gBAAM,SAAS;YAAG;QAEnD;QAGAC,UAAU;YACFf,KAAK,QAAQ,IAAK,EAACC,SAASA,AAAiB,OAAjBA,MAAM,IAAI,EAAQ,IAC9Ca,cAAc;gBAAE,SAAS;gBAAO,SAAS;YAAwB,KAEjEA,cAAc;gBAAE,SAAS;gBAAM,SAAS;YAAG;QAEnD,GAAG;YAACd,KAAK,QAAQ;YAAEC;SAAM;QAEzB,OAAO,WAAP,GACI,oBAACF,aAAWA;YACP,GAAGC,IAAI;YACR,OAAOC;YACP,UAAUe;YACV,YAAYH;YACZ,UAAUb,KAAK,QAAQ;;IAGnC;IACA,MAAM;QACF,OAAO;QACP,UAAU;QACV,UAAU;QACV,aAAa;QACb,MAAM;QACN,OAAO;QACP,YAAYkB;IAChB;IACA,UAAU;QACN,OAAO;YACH,aAAa;YACb,SAAS;QACb;QACA,UAAU;YACN,aAAa;YACb,SAAS;QACb;QACA,UAAU;YACN,aAAa;YACb,SAAS;QACb;QACA,aAAa;YACT,aAAa;YACb,SAAS;QACb;QACA,MAAM;YACF,aAAa;YACb,SAAS;QACb;QACA,OAAO;YACH,aAAa;YACb,SAAS;QACb;QACA,YAAY;YACR,aACI;QACR;QACA,UAAU;YACN,aAAa;QACjB;IACJ;AACJ"}

package/ColorPicker/primitives/ColorPickerPrimitive.stories.d.ts

@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from "@storybook/react-webpack5";
+import type { Meta, StoryObj } from "@storybook/react";
 import { ColorPickerPrimitive } from "./ColorPickerPrimitive.js";
 declare const meta: Meta<typeof ColorPickerPrimitive>;
 export default meta;

package/ColorPicker/primitives/ColorPickerPrimitive.stories.js.map

@@ -1 +1 @@
-{"version":3,"file":"ColorPicker/primitives/ColorPickerPrimitive.stories.js","sources":["../../../src/ColorPicker/primitives/ColorPickerPrimitive.stories.tsx"],"sourcesContent":["import React, { useState } from \"react\";\nimport type { Meta, StoryObj } from \"@storybook/react-webpack5\";\nimport { ColorPickerPrimitive } from \"./ColorPickerPrimitive.js\";\n\nconst meta: Meta<typeof ColorPickerPrimitive> = {\n    title: \"Components/Form Primitives/ColorPicker\",\n    component: ColorPickerPrimitive,\n    argTypes: {\n        onChange: { action: \"onChange\" },\n        onChangeComplete: { action: \"onChangeComplete\" },\n        onOpenChange: { action: \"onOpenChange\" }\n    },\n    parameters: {\n        layout: \"padded\"\n    },\n    render: args => {\n        const [value, setValue] = useState(args.value);\n        return (\n            <div className={\"w-full\"}>\n                <div className={\"flex items-center justify-center mb-4\"}>\n                    <ColorPickerPrimitive\n                        {...args}\n                        value={value}\n                        onChange={value => console.log(\"Value changed:\", value)}\n                        onChangeComplete={value => {\n                            console.log(\"Value change complete:\", value);\n                            setValue(value);\n                        }}\n                    />\n                </div>\n                <div className={\"text-center\"}>\n                    Current selected value: <pre>{value}</pre>\n                </div>\n            </div>\n        );\n    }\n};\n\nexport default meta;\ntype Story = StoryObj<typeof ColorPickerPrimitive>;\n\nexport const Default: Story = {};\n\nexport const MediumSize: Story = {\n    args: {\n        size: \"md\"\n    }\n};\n\nexport const LargeSize: Story = {\n    args: {\n        size: \"lg\"\n    }\n};\n\nexport const ExtraLargeSize: Story = {\n    args: {\n        size: \"xl\"\n    }\n};\n\nexport const PrimaryVariant: Story = {\n    args: {\n        variant: \"primary\"\n    }\n};\n\nexport const PrimaryVariantDisabled: Story = {\n    args: {\n        ...PrimaryVariant.args,\n        disabled: true\n    }\n};\n\nexport const PrimaryVariantInvalid: Story = {\n    args: {\n        ...PrimaryVariant.args,\n        invalid: true\n    }\n};\n\nexport const SecondaryVariant: Story = {\n    args: {\n        variant: \"secondary\"\n    }\n};\n\nexport const SecondaryVariantDisabled: Story = {\n    args: {\n        ...SecondaryVariant.args,\n        disabled: true\n    }\n};\n\nexport const SecondaryVariantInvalid: Story = {\n    args: {\n        ...SecondaryVariant.args,\n        invalid: true\n    }\n};\n\nexport const GhostVariant: Story = {\n    args: {\n        variant: \"ghost\"\n    }\n};\n\nexport const GhostVariantDisabled: Story = {\n    args: {\n        ...GhostVariant.args,\n        disabled: true\n    }\n};\n\nexport const GhostVariantInvalid: Story = {\n    args: {\n        ...GhostVariant.args,\n        invalid: true\n    }\n};\n\nexport const WithDefaultValue: Story = {\n    args: {\n        ...Default.args,\n        value: \"#ff0000\"\n    }\n};\n\nexport const WithStartAlign: Story = {\n    args: {\n        ...Default.args,\n        align: \"start\"\n    }\n};\n\nexport const WithCenterAlign: Story = {\n    args: {\n        ...Default.args,\n        align: \"center\"\n    }\n};\n\nexport const WithEndAlign: Story = {\n    args: {\n        ...Default.args,\n        align: \"end\"\n    }\n};\n"],"names":["meta","ColorPickerPrimitive","args","value","setValue","useState","console","Default","MediumSize","LargeSize","ExtraLargeSize","PrimaryVariant","PrimaryVariantDisabled","PrimaryVariantInvalid","SecondaryVariant","SecondaryVariantDisabled","SecondaryVariantInvalid","GhostVariant","GhostVariantDisabled","GhostVariantInvalid","WithDefaultValue","WithStartAlign","WithCenterAlign","WithEndAlign"],"mappings":";;AAIA,MAAMA,OAA0C;IAC5C,OAAO;IACP,WAAWC;IACX,UAAU;QACN,UAAU;YAAE,QAAQ;QAAW;QAC/B,kBAAkB;YAAE,QAAQ;QAAmB;QAC/C,cAAc;YAAE,QAAQ;QAAe;IAC3C;IACA,YAAY;QACR,QAAQ;IACZ;IACA,QAAQC,CAAAA;QACJ,MAAM,CAACC,OAAOC,SAAS,GAAGC,SAASH,KAAK,KAAK;QAC7C,OAAO,WAAP,GACI,oBAAC;YAAI,WAAW;yBACZ,oBAAC;YAAI,WAAW;yBACZ,oBAACD,sBAAoBA;YAChB,GAAGC,IAAI;YACR,OAAOC;YACP,UAAUA,CAAAA,QAASG,QAAQ,GAAG,CAAC,kBAAkBH;YACjD,kBAAkBA,CAAAA;gBACdG,QAAQ,GAAG,CAAC,0BAA0BH;gBACtCC,SAASD;YACb;2BAGR,oBAAC;YAAI,WAAW;WAAe,0CACH,oBAAC,aAAKA;IAI9C;AACJ;AAEA,qCAAeH;AAGR,MAAMO,UAAiB,CAAC;AAExB,MAAMC,aAAoB;IAC7B,MAAM;QACF,MAAM;IACV;AACJ;AAEO,MAAMC,YAAmB;IAC5B,MAAM;QACF,MAAM;IACV;AACJ;AAEO,MAAMC,iBAAwB;IACjC,MAAM;QACF,MAAM;IACV;AACJ;AAEO,MAAMC,iBAAwB;IACjC,MAAM;QACF,SAAS;IACb;AACJ;AAEO,MAAMC,yBAAgC;IACzC,MAAM;QACF,GAAGD,eAAe,IAAI;QACtB,UAAU;IACd;AACJ;AAEO,MAAME,wBAA+B;IACxC,MAAM;QACF,GAAGF,eAAe,IAAI;QACtB,SAAS;IACb;AACJ;AAEO,MAAMG,mBAA0B;IACnC,MAAM;QACF,SAAS;IACb;AACJ;AAEO,MAAMC,2BAAkC;IAC3C,MAAM;QACF,GAAGD,iBAAiB,IAAI;QACxB,UAAU;IACd;AACJ;AAEO,MAAME,0BAAiC;IAC1C,MAAM;QACF,GAAGF,iBAAiB,IAAI;QACxB,SAAS;IACb;AACJ;AAEO,MAAMG,eAAsB;IAC/B,MAAM;QACF,SAAS;IACb;AACJ;AAEO,MAAMC,uBAA8B;IACvC,MAAM;QACF,GAAGD,aAAa,IAAI;QACpB,UAAU;IACd;AACJ;AAEO,MAAME,sBAA6B;IACtC,MAAM;QACF,GAAGF,aAAa,IAAI;QACpB,SAAS;IACb;AACJ;AAEO,MAAMG,mBAA0B;IACnC,MAAM;QACF,GAAGb,QAAQ,IAAI;QACf,OAAO;IACX;AACJ;AAEO,MAAMc,iBAAwB;IACjC,MAAM;QACF,GAAGd,QAAQ,IAAI;QACf,OAAO;IACX;AACJ;AAEO,MAAMe,kBAAyB;IAClC,MAAM;QACF,GAAGf,QAAQ,IAAI;QACf,OAAO;IACX;AACJ;AAEO,MAAMgB,eAAsB;IAC/B,MAAM;QACF,GAAGhB,QAAQ,IAAI;QACf,OAAO;IACX;AACJ"}
+{"version":3,"file":"ColorPicker/primitives/ColorPickerPrimitive.stories.js","sources":["../../../src/ColorPicker/primitives/ColorPickerPrimitive.stories.tsx"],"sourcesContent":["import React, { useState } from \"react\";\nimport type { Meta, StoryObj } from \"@storybook/react\";\nimport { ColorPickerPrimitive } from \"./ColorPickerPrimitive.js\";\n\nconst meta: Meta<typeof ColorPickerPrimitive> = {\n    title: \"Components/Form Primitives/ColorPicker\",\n    component: ColorPickerPrimitive,\n    argTypes: {\n        onChange: { action: \"onChange\" },\n        onChangeComplete: { action: \"onChangeComplete\" },\n        onOpenChange: { action: \"onOpenChange\" }\n    },\n    parameters: {\n        layout: \"padded\"\n    },\n    render: args => {\n        const [value, setValue] = useState(args.value);\n        return (\n            <div className={\"w-full\"}>\n                <div className={\"flex items-center justify-center mb-4\"}>\n                    <ColorPickerPrimitive\n                        {...args}\n                        value={value}\n                        onChange={value => console.log(\"Value changed:\", value)}\n                        onChangeComplete={value => {\n                            console.log(\"Value change complete:\", value);\n                            setValue(value);\n                        }}\n                    />\n                </div>\n                <div className={\"text-center\"}>\n                    Current selected value: <pre>{value}</pre>\n                </div>\n            </div>\n        );\n    }\n};\n\nexport default meta;\ntype Story = StoryObj<typeof ColorPickerPrimitive>;\n\nexport const Default: Story = {};\n\nexport const MediumSize: Story = {\n    args: {\n        size: \"md\"\n    }\n};\n\nexport const LargeSize: Story = {\n    args: {\n        size: \"lg\"\n    }\n};\n\nexport const ExtraLargeSize: Story = {\n    args: {\n        size: \"xl\"\n    }\n};\n\nexport const PrimaryVariant: Story = {\n    args: {\n        variant: \"primary\"\n    }\n};\n\nexport const PrimaryVariantDisabled: Story = {\n    args: {\n        ...PrimaryVariant.args,\n        disabled: true\n    }\n};\n\nexport const PrimaryVariantInvalid: Story = {\n    args: {\n        ...PrimaryVariant.args,\n        invalid: true\n    }\n};\n\nexport const SecondaryVariant: Story = {\n    args: {\n        variant: \"secondary\"\n    }\n};\n\nexport const SecondaryVariantDisabled: Story = {\n    args: {\n        ...SecondaryVariant.args,\n        disabled: true\n    }\n};\n\nexport const SecondaryVariantInvalid: Story = {\n    args: {\n        ...SecondaryVariant.args,\n        invalid: true\n    }\n};\n\nexport const GhostVariant: Story = {\n    args: {\n        variant: \"ghost\"\n    }\n};\n\nexport const GhostVariantDisabled: Story = {\n    args: {\n        ...GhostVariant.args,\n        disabled: true\n    }\n};\n\nexport const GhostVariantInvalid: Story = {\n    args: {\n        ...GhostVariant.args,\n        invalid: true\n    }\n};\n\nexport const WithDefaultValue: Story = {\n    args: {\n        ...Default.args,\n        value: \"#ff0000\"\n    }\n};\n\nexport const WithStartAlign: Story = {\n    args: {\n        ...Default.args,\n        align: \"start\"\n    }\n};\n\nexport const WithCenterAlign: Story = {\n    args: {\n        ...Default.args,\n        align: \"center\"\n    }\n};\n\nexport const WithEndAlign: Story = {\n    args: {\n        ...Default.args,\n        align: \"end\"\n    }\n};\n"],"names":["meta","ColorPickerPrimitive","args","value","setValue","useState","console","Default","MediumSize","LargeSize","ExtraLargeSize","PrimaryVariant","PrimaryVariantDisabled","PrimaryVariantInvalid","SecondaryVariant","SecondaryVariantDisabled","SecondaryVariantInvalid","GhostVariant","GhostVariantDisabled","GhostVariantInvalid","WithDefaultValue","WithStartAlign","WithCenterAlign","WithEndAlign"],"mappings":";;AAIA,MAAMA,OAA0C;IAC5C,OAAO;IACP,WAAWC;IACX,UAAU;QACN,UAAU;YAAE,QAAQ;QAAW;QAC/B,kBAAkB;YAAE,QAAQ;QAAmB;QAC/C,cAAc;YAAE,QAAQ;QAAe;IAC3C;IACA,YAAY;QACR,QAAQ;IACZ;IACA,QAAQC,CAAAA;QACJ,MAAM,CAACC,OAAOC,SAAS,GAAGC,SAASH,KAAK,KAAK;QAC7C,OAAO,WAAP,GACI,oBAAC;YAAI,WAAW;yBACZ,oBAAC;YAAI,WAAW;yBACZ,oBAACD,sBAAoBA;YAChB,GAAGC,IAAI;YACR,OAAOC;YACP,UAAUA,CAAAA,QAASG,QAAQ,GAAG,CAAC,kBAAkBH;YACjD,kBAAkBA,CAAAA;gBACdG,QAAQ,GAAG,CAAC,0BAA0BH;gBACtCC,SAASD;YACb;2BAGR,oBAAC;YAAI,WAAW;WAAe,0CACH,oBAAC,aAAKA;IAI9C;AACJ;AAEA,qCAAeH;AAGR,MAAMO,UAAiB,CAAC;AAExB,MAAMC,aAAoB;IAC7B,MAAM;QACF,MAAM;IACV;AACJ;AAEO,MAAMC,YAAmB;IAC5B,MAAM;QACF,MAAM;IACV;AACJ;AAEO,MAAMC,iBAAwB;IACjC,MAAM;QACF,MAAM;IACV;AACJ;AAEO,MAAMC,iBAAwB;IACjC,MAAM;QACF,SAAS;IACb;AACJ;AAEO,MAAMC,yBAAgC;IACzC,MAAM;QACF,GAAGD,eAAe,IAAI;QACtB,UAAU;IACd;AACJ;AAEO,MAAME,wBAA+B;IACxC,MAAM;QACF,GAAGF,eAAe,IAAI;QACtB,SAAS;IACb;AACJ;AAEO,MAAMG,mBAA0B;IACnC,MAAM;QACF,SAAS;IACb;AACJ;AAEO,MAAMC,2BAAkC;IAC3C,MAAM;QACF,GAAGD,iBAAiB,IAAI;QACxB,UAAU;IACd;AACJ;AAEO,MAAME,0BAAiC;IAC1C,MAAM;QACF,GAAGF,iBAAiB,IAAI;QACxB,SAAS;IACb;AACJ;AAEO,MAAMG,eAAsB;IAC/B,MAAM;QACF,SAAS;IACb;AACJ;AAEO,MAAMC,uBAA8B;IACvC,MAAM;QACF,GAAGD,aAAa,IAAI;QACpB,UAAU;IACd;AACJ;AAEO,MAAME,sBAA6B;IACtC,MAAM;QACF,GAAGF,aAAa,IAAI;QACpB,SAAS;IACb;AACJ;AAEO,MAAMG,mBAA0B;IACnC,MAAM;QACF,GAAGb,QAAQ,IAAI;QACf,OAAO;IACX;AACJ;AAEO,MAAMc,iBAAwB;IACjC,MAAM;QACF,GAAGd,QAAQ,IAAI;QACf,OAAO;IACX;AACJ;AAEO,MAAMe,kBAAyB;IAClC,MAAM;QACF,GAAGf,QAAQ,IAAI;QACf,OAAO;IACX;AACJ;AAEO,MAAMgB,eAAsB;IAC/B,MAAM;QACF,GAAGhB,QAAQ,IAAI;QACf,OAAO;IACX;AACJ"}

package/DataTable/DataTable.stories.d.ts

@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from "@storybook/react-webpack5";
+import type { Meta, StoryObj } from "@storybook/react";
 import type { DataTableDefaultData } from "./DataTable.js";
 import { DataTable } from "./DataTable.js";
 declare const meta: Meta<typeof DataTable>;

package/DataTable/DataTable.stories.js.map

@@ -1 +1 @@
-{"version":3,"file":"DataTable/DataTable.stories.js","sources":["../../src/DataTable/DataTable.stories.tsx"],"sourcesContent":["import React, { useState, useEffect } from \"react\";\nimport type { Meta, StoryObj } from \"@storybook/react-webpack5\";\nimport type { DataTableColumns, DataTableDefaultData, DataTableSorting } from \"./DataTable.js\";\nimport { DataTable } from \"./DataTable.js\";\nimport { Avatar } from \"~/Avatar/index.js\";\nimport { Text } from \"~/Text/index.js\";\n\nconst meta: Meta<typeof DataTable> = {\n    title: \"Components/DataTable\",\n    component: DataTable,\n    parameters: {\n        layout: \"padded\"\n    }\n};\n\nexport default meta;\ntype Story<T extends Record<string, any> & DataTableDefaultData> = StoryObj<typeof DataTable<T>>;\n\n// Declare the data structure.\ninterface Entry {\n    id: string;\n    name: string;\n    createdBy: string;\n    lastModified: string;\n    status: string;\n}\n\n// Define the columns structure for the table.\nconst columns: DataTableColumns<Entry> = {\n    name: {\n        header: \"Title\"\n    },\n    createdBy: {\n        header: \"Author\"\n    },\n    lastModified: {\n        header: \"Last Modified\"\n    },\n    status: {\n        header: \"Status\"\n    }\n};\n\n// Define the data to display.\nconst data = [\n    {\n        id: \"entry-1\",\n        name: \"Getting Started Guide\",\n        createdBy: \"John Doe\",\n        lastModified: \"1 hour ago\",\n        status: \"Published\"\n    },\n    {\n        id: \"entry-2\",\n        name: \"User Documentation\",\n        createdBy: \"Jane Smith\",\n        lastModified: \"3 days ago\",\n        status: \"Draft\"\n    },\n    {\n        id: \"entry-3\",\n        name: \"API Reference\",\n        createdBy: \"John Doe\",\n        lastModified: \"1 week ago\",\n        status: \"Published\"\n    }\n];\n\nexport const Default: Story<Entry> = {\n    args: {\n        data,\n        columns\n    }\n};\n\nexport const Bordered: Story<Entry> = {\n    args: {\n        ...Default.args,\n        bordered: true\n    }\n};\n\nexport const WithStickyHeader: Story<Entry> = {\n    args: {\n        ...Default.args,\n        stickyHeader: true\n    }\n};\n\nexport const WithSelectableRows: Story<Entry> = {\n    args: Default.args,\n    render: args => {\n        const [selectedRows, setSelectedRows] = useState<Entry[]>([]);\n\n        return (\n            <DataTable\n                {...args}\n                selectedRows={selectedRows}\n                onSelectRow={rows => setSelectedRows(rows)}\n            />\n        );\n    }\n};\n\nexport const WithLoading: Story<Entry> = {\n    args: {\n        columns\n    },\n    render: ({ columns }) => {\n        const [loading, setLoading] = useState(true);\n        const [tableData, setTableData] = useState<Entry[]>([]);\n\n        useEffect(() => {\n            const timer = setTimeout(() => {\n                setTableData(data); // your predefined data\n                setLoading(false);\n            }, 5000);\n\n            return () => clearTimeout(timer);\n        }, []);\n\n        return <DataTable columns={columns} data={tableData} loading={loading} />;\n    }\n};\n\nexport const WithLongColumnContent: Story<Entry> = {\n    args: {\n        ...Default.args,\n        columns: {\n            ...columns,\n            name: {\n                ...columns.name,\n                header: \"Name - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.\"\n            }\n        },\n        data: data.map(entry => ({\n            ...entry,\n            name: `${entry.name} - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla facilisi. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.`\n        }))\n    }\n};\n\nexport const WithCustomCellRenderer: Story<Entry> = {\n    args: {\n        ...Default.args,\n        columns: {\n            ...columns,\n            name: {\n                ...columns.name,\n                cell: (entry: Entry) => {\n                    return (\n                        <div className={\"flex items-center gap-sm-extra\"}>\n                            <Avatar\n                                image={\n                                    <Avatar.Image\n                                        src=\"https://github.com/webiny-bot.png\"\n                                        alt=\"@webiny\"\n                                    />\n                                }\n                                fallback={<Avatar.Fallback>{entry.name.charAt(0)}</Avatar.Fallback>}\n                                size={\"xl\"}\n                            />\n                            <div>\n                                <Text className={\"text-neutral-primary font-semibold\"} as={\"div\"}>\n                                    {entry.name}\n                                </Text>\n                                <Text\n                                    size={\"sm\"}\n                                    className={\"text-neutral-strong\"}\n                                    as={\"div\"}\n                                >{`Last updated: ${entry.lastModified}`}</Text>\n                            </div>\n                        </div>\n                    );\n                }\n            }\n        }\n    }\n};\n\nexport const WithCustomColumnSize: Story<Entry> = {\n    args: {\n        ...Default.args,\n        columns: {\n            ...columns,\n            name: {\n                ...columns.name,\n                size: 200\n            }\n        }\n    }\n};\n\nexport const WithCustomColumnClassName: Story<Entry> = {\n    args: {\n        ...Default.args,\n        columns: {\n            ...columns,\n            lastModified: {\n                ...columns.lastModified,\n                className: \"bg-primary-subtle\"\n            },\n            status: {\n                ...columns.status,\n                className: \"text-right\"\n            }\n        }\n    }\n};\n\nexport const WithSorting: Story<Entry> = {\n    args: {\n        ...Default.args,\n        columns: {\n            ...columns,\n            name: {\n                ...columns.name,\n                enableSorting: true\n            },\n            lastModified: {\n                ...columns.lastModified,\n                enableSorting: true\n            }\n        },\n        sorting: [\n            {\n                id: \"lastModified\",\n                desc: true\n            }\n        ]\n    },\n    render: ({ sorting: argsSorting = [], ...args }) => {\n        const [sorting, setSorting] = useState<DataTableSorting>(argsSorting);\n        return <DataTable {...args} sorting={sorting} onSortingChange={setSorting} />;\n    }\n};\n\n// Add a Documentation story\nexport const Documentation: Story<Entry> = {\n    args: {\n        bordered: true,\n        stickyHeader: true,\n        columns: {\n            name: {\n                header: \"Title\",\n                enableSorting: true\n            },\n            createdBy: {\n                header: \"Author\"\n            },\n            lastModified: {\n                header: \"Last Modified\",\n                enableSorting: true\n            },\n            status: {\n                header: \"Status\"\n            }\n        },\n        data: [\n            {\n                id: \"entry-1\",\n                name: \"Getting Started Guide\",\n                createdBy: \"John Doe\",\n                lastModified: \"1 hour ago\",\n                status: \"Published\"\n            },\n            {\n                id: \"entry-2\",\n                name: \"User Documentation\",\n                createdBy: \"Jane Smith\",\n                lastModified: \"3 days ago\",\n                status: \"Draft\"\n            },\n            {\n                id: \"entry-3\",\n                name: \"API Reference\",\n                createdBy: \"John Doe\",\n                lastModified: \"1 week ago\",\n                status: \"Published\"\n            }\n        ]\n    },\n    render: args => {\n        const [selectedRows, setSelectedRows] = useState<Entry[]>([]);\n        const [sorting, setSorting] = useState<DataTableSorting>([]);\n\n        return (\n            <DataTable\n                {...args}\n                selectedRows={selectedRows}\n                onSelectRow={rows => setSelectedRows(rows)}\n                sorting={sorting}\n                onSortingChange={setSorting}\n            />\n        );\n    },\n    parameters: {\n        docs: {\n            description: {\n                story: \"This example shows a DataTable with selectable rows, sorting, and a sticky header.\"\n            }\n        }\n    },\n    argTypes: {\n        bordered: {\n            description: \"Show or hide borders.\",\n            control: \"boolean\",\n            defaultValue: true\n        },\n        stickyHeader: {\n            description: \"Enable sticky header.\",\n            control: \"boolean\",\n            defaultValue: true\n        },\n        columns: {\n            description: \"Columns definition. Please refer to the code example for details.\",\n            control: false\n        },\n        data: {\n            description:\n                \"Data to display into DataTable body. Please refer to the code example for details.\",\n            control: false\n        }\n    }\n};\n"],"names":["meta","DataTable","columns","data","Default","Bordered","WithStickyHeader","WithSelectableRows","args","selectedRows","setSelectedRows","useState","rows","WithLoading","loading","setLoading","tableData","setTableData","useEffect","timer","setTimeout","clearTimeout","WithLongColumnContent","entry","WithCustomCellRenderer","Avatar","Text","WithCustomColumnSize","WithCustomColumnClassName","WithSorting","argsSorting","sorting","setSorting","Documentation"],"mappings":"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"}
+{"version":3,"file":"DataTable/DataTable.stories.js","sources":["../../src/DataTable/DataTable.stories.tsx"],"sourcesContent":["import React, { useState, useEffect } from \"react\";\nimport type { Meta, StoryObj } from \"@storybook/react\";\nimport type { DataTableColumns, DataTableDefaultData, DataTableSorting } from \"./DataTable.js\";\nimport { DataTable } from \"./DataTable.js\";\nimport { Avatar } from \"~/Avatar/index.js\";\nimport { Text } from \"~/Text/index.js\";\n\nconst meta: Meta<typeof DataTable> = {\n    title: \"Components/DataTable\",\n    component: DataTable,\n    parameters: {\n        layout: \"padded\"\n    }\n};\n\nexport default meta;\ntype Story<T extends Record<string, any> & DataTableDefaultData> = StoryObj<typeof DataTable<T>>;\n\n// Declare the data structure.\ninterface Entry {\n    id: string;\n    name: string;\n    createdBy: string;\n    lastModified: string;\n    status: string;\n}\n\n// Define the columns structure for the table.\nconst columns: DataTableColumns<Entry> = {\n    name: {\n        header: \"Title\"\n    },\n    createdBy: {\n        header: \"Author\"\n    },\n    lastModified: {\n        header: \"Last Modified\"\n    },\n    status: {\n        header: \"Status\"\n    }\n};\n\n// Define the data to display.\nconst data = [\n    {\n        id: \"entry-1\",\n        name: \"Getting Started Guide\",\n        createdBy: \"John Doe\",\n        lastModified: \"1 hour ago\",\n        status: \"Published\"\n    },\n    {\n        id: \"entry-2\",\n        name: \"User Documentation\",\n        createdBy: \"Jane Smith\",\n        lastModified: \"3 days ago\",\n        status: \"Draft\"\n    },\n    {\n        id: \"entry-3\",\n        name: \"API Reference\",\n        createdBy: \"John Doe\",\n        lastModified: \"1 week ago\",\n        status: \"Published\"\n    }\n];\n\nexport const Default: Story<Entry> = {\n    args: {\n        data,\n        columns\n    }\n};\n\nexport const Bordered: Story<Entry> = {\n    args: {\n        ...Default.args,\n        bordered: true\n    }\n};\n\nexport const WithStickyHeader: Story<Entry> = {\n    args: {\n        ...Default.args,\n        stickyHeader: true\n    }\n};\n\nexport const WithSelectableRows: Story<Entry> = {\n    args: Default.args,\n    render: args => {\n        const [selectedRows, setSelectedRows] = useState<Entry[]>([]);\n\n        return (\n            <DataTable\n                {...args}\n                selectedRows={selectedRows}\n                onSelectRow={rows => setSelectedRows(rows)}\n            />\n        );\n    }\n};\n\nexport const WithLoading: Story<Entry> = {\n    args: {\n        columns\n    },\n    render: ({ columns }) => {\n        const [loading, setLoading] = useState(true);\n        const [tableData, setTableData] = useState<Entry[]>([]);\n\n        useEffect(() => {\n            const timer = setTimeout(() => {\n                setTableData(data); // your predefined data\n                setLoading(false);\n            }, 5000);\n\n            return () => clearTimeout(timer);\n        }, []);\n\n        return <DataTable columns={columns} data={tableData} loading={loading} />;\n    }\n};\n\nexport const WithLongColumnContent: Story<Entry> = {\n    args: {\n        ...Default.args,\n        columns: {\n            ...columns,\n            name: {\n                ...columns.name,\n                header: \"Name - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.\"\n            }\n        },\n        data: data.map(entry => ({\n            ...entry,\n            name: `${entry.name} - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla facilisi. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.`\n        }))\n    }\n};\n\nexport const WithCustomCellRenderer: Story<Entry> = {\n    args: {\n        ...Default.args,\n        columns: {\n            ...columns,\n            name: {\n                ...columns.name,\n                cell: (entry: Entry) => {\n                    return (\n                        <div className={\"flex items-center gap-sm-extra\"}>\n                            <Avatar\n                                image={\n                                    <Avatar.Image\n                                        src=\"https://github.com/webiny-bot.png\"\n                                        alt=\"@webiny\"\n                                    />\n                                }\n                                fallback={<Avatar.Fallback>{entry.name.charAt(0)}</Avatar.Fallback>}\n                                size={\"xl\"}\n                            />\n                            <div>\n                                <Text className={\"text-neutral-primary font-semibold\"} as={\"div\"}>\n                                    {entry.name}\n                                </Text>\n                                <Text\n                                    size={\"sm\"}\n                                    className={\"text-neutral-strong\"}\n                                    as={\"div\"}\n                                >{`Last updated: ${entry.lastModified}`}</Text>\n                            </div>\n                        </div>\n                    );\n                }\n            }\n        }\n    }\n};\n\nexport const WithCustomColumnSize: Story<Entry> = {\n    args: {\n        ...Default.args,\n        columns: {\n            ...columns,\n            name: {\n                ...columns.name,\n                size: 200\n            }\n        }\n    }\n};\n\nexport const WithCustomColumnClassName: Story<Entry> = {\n    args: {\n        ...Default.args,\n        columns: {\n            ...columns,\n            lastModified: {\n                ...columns.lastModified,\n                className: \"bg-primary-subtle\"\n            },\n            status: {\n                ...columns.status,\n                className: \"text-right\"\n            }\n        }\n    }\n};\n\nexport const WithSorting: Story<Entry> = {\n    args: {\n        ...Default.args,\n        columns: {\n            ...columns,\n            name: {\n                ...columns.name,\n                enableSorting: true\n            },\n            lastModified: {\n                ...columns.lastModified,\n                enableSorting: true\n            }\n        },\n        sorting: [\n            {\n                id: \"lastModified\",\n                desc: true\n            }\n        ]\n    },\n    render: ({ sorting: argsSorting = [], ...args }) => {\n        const [sorting, setSorting] = useState<DataTableSorting>(argsSorting);\n        return <DataTable {...args} sorting={sorting} onSortingChange={setSorting} />;\n    }\n};\n\n// Add a Documentation story\nexport const Documentation: Story<Entry> = {\n    args: {\n        bordered: true,\n        stickyHeader: true,\n        columns: {\n            name: {\n                header: \"Title\",\n                enableSorting: true\n            },\n            createdBy: {\n                header: \"Author\"\n            },\n            lastModified: {\n                header: \"Last Modified\",\n                enableSorting: true\n            },\n            status: {\n                header: \"Status\"\n            }\n        },\n        data: [\n            {\n                id: \"entry-1\",\n                name: \"Getting Started Guide\",\n                createdBy: \"John Doe\",\n                lastModified: \"1 hour ago\",\n                status: \"Published\"\n            },\n            {\n                id: \"entry-2\",\n                name: \"User Documentation\",\n                createdBy: \"Jane Smith\",\n                lastModified: \"3 days ago\",\n                status: \"Draft\"\n            },\n            {\n                id: \"entry-3\",\n                name: \"API Reference\",\n                createdBy: \"John Doe\",\n                lastModified: \"1 week ago\",\n                status: \"Published\"\n            }\n        ]\n    },\n    render: args => {\n        const [selectedRows, setSelectedRows] = useState<Entry[]>([]);\n        const [sorting, setSorting] = useState<DataTableSorting>([]);\n\n        return (\n            <DataTable\n                {...args}\n                selectedRows={selectedRows}\n                onSelectRow={rows => setSelectedRows(rows)}\n                sorting={sorting}\n                onSortingChange={setSorting}\n            />\n        );\n    },\n    parameters: {\n        docs: {\n            description: {\n                story: \"This example shows a DataTable with selectable rows, sorting, and a sticky header.\"\n            }\n        }\n    },\n    argTypes: {\n        bordered: {\n            description: \"Show or hide borders.\",\n            control: \"boolean\",\n            defaultValue: true\n        },\n        stickyHeader: {\n            description: \"Enable sticky header.\",\n            control: \"boolean\",\n            defaultValue: true\n        },\n        columns: {\n            description: \"Columns definition. Please refer to the code example for details.\",\n            control: false\n        },\n        data: {\n            description:\n                \"Data to display into DataTable body. Please refer to the code example for details.\",\n            control: false\n        }\n    }\n};\n"],"names":["meta","DataTable","columns","data","Default","Bordered","WithStickyHeader","WithSelectableRows","args","selectedRows","setSelectedRows","useState","rows","WithLoading","loading","setLoading","tableData","setTableData","useEffect","timer","setTimeout","clearTimeout","WithLongColumnContent","entry","WithCustomCellRenderer","Avatar","Text","WithCustomColumnSize","WithCustomColumnClassName","WithSorting","argsSorting","sorting","setSorting","Documentation"],"mappings":"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"}

package/DatePicker/DatePicker.stories.d.ts

@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from "@storybook/react-webpack5";
+import type { Meta, StoryObj } from "@storybook/react";
 import { DatePicker } from "./DatePicker.js";
 declare const meta: Meta<typeof DatePicker>;
 export default meta;

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":";;;AAKA,MAAMA,OAAgC;IAClC,OAAO;IACP,WAAWC;IACX,UAAU;QACN,UAAU;YAAE,QAAQ;QAAW;QAC/B,MAAM;YACF,SAAS;YACT,SAAS;gBACL;gBACA;gBACA;gBACA;gBACA;gBACA;gBACA;gBACA;gBACA;gBACA;gBACA;aACH;YACD,cAAc;QAClB;QACA,UAAU;YACN,SAAS;YACT,cAAc;QAClB;IACJ;IACA,YAAY;QACR,QAAQ;IACZ;IACA,QAAQC,CAAAA;QACJ,MAAM,CAACC,OAAOC,SAAS,GAAGC;QAC1B,OAAO,WAAP,GAAO,oBAACJ,YAAUA;YAAE,GAAGC,IAAI;YAAE,OAAOC;YAAO,UAAUC;;IACzD;AACJ;AAEA,2BAAeJ;AAGR,MAAMM,UAAiB;IAC1B,MAAM;QACF,MAAM;IACV;AACJ;AAEO,MAAMC,YAAmB;IAC5B,MAAM;QACF,MAAM;QACN,OAAO;IACX;AACJ;AAEO,MAAMC,oBAA2B;IACpC,MAAM;QACF,MAAM;QACN,OAAO;QACP,UAAU;IACd;AACJ;AAEO,MAAMC,kBAAyB;IAClC,MAAM;QACF,MAAM;QACN,aAAa;IACjB;AACJ;AAEO,MAAMC,YAAmB;IAC5B,MAAM;QACF,MAAM;QACN,MAAM;IACV;AACJ;AAEO,MAAMC,aAAoB;IAC7B,MAAM;QACF,MAAM;QACN,YAAY;YACR,SAAS;YACT,SAAS;QACb;IACJ;AACJ;AAEO,MAAMC,WAAkB;IAC3B,MAAM;QACF,MAAM;QACN,OAAO;QACP,UAAU;IACd;AACJ;AAEO,MAAMC,cAAqB;IAC9B,MAAM;QACF,MAAM;QACN,OAAO;QACP,UAAU;QACV,aAAa;QACb,MAAM;QACN,YAAY;YACR,SAAS;YACT,SAAS;QACb;IACJ;AACJ;AAEO,MAAMC,cAAqB;IAC9B,QAAQZ,CAAAA;QACJ,MAAM,CAACC,OAAOC,SAAS,GAAGC;QAC1B,MAAMU,UAAU;YACZ;gBAAE,OAAO;gBAAS,OAAO,IAAM,IAAIC;YAAO;YAC1C;gBAAE,OAAO;gBAAY,OAAO,IAAMC,QAAQ,IAAID,QAAQ;YAAG;YACzD;gBAAE,OAAO;gBAAa,OAAO,IAAMC,QAAQ,IAAID,QAAQ;YAAG;YAC1D;gBAAE,OAAO;gBAAa,OAAO,IAAMC,QAAQ,IAAID,QAAQ;YAAG;YAC1D;gBAAE,OAAO;gBAAc,OAAO,IAAMC,QAAQ,IAAID,QAAQ;YAAI;YAC5D;gBAAE,OAAO;gBAAiB,OAAO,IAAME,aAAa,IAAIF;YAAQ;SACnE;QACD,OAAO,WAAP,GACI,oBAACf,YAAUA;YAAE,GAAGC,IAAI;YAAE,MAAK;YAAO,OAAOC;YAAO,UAAUC;YAAU,SAASW;;IAErF;IACA,MAAM;QACF,OAAO;QACP,aAAa;IACjB;AACJ;AAEO,MAAMI,WAAkB;IAC3B,QAAQjB,CAAAA;QACJ,MAAM,CAACC,OAAOC,SAAS,GAAGC;QAC1B,OAAO,WAAP,GAAO,oBAACJ,YAAUA;YAAE,GAAGC,IAAI;YAAE,MAAK;YAAO,OAAOC;YAAO,UAAUC;;IACrE;IACA,MAAM;QACF,OAAO;IACX;AACJ;AAEO,MAAMgB,oBAA2B;IACpC,QAAQlB,CAAAA;QACJ,MAAM,CAACC,OAAOC,SAAS,GAAGC;QAC1B,OAAO,WAAP,GAAO,oBAACJ,YAAUA;YAAE,GAAGC,IAAI;YAAE,MAAK;YAAgB,OAAOC;YAAO,UAAUC;;IAC9E;IACA,MAAM;QACF,OAAO;IACX;AACJ;AAEO,MAAMiB,iBAAwB;IACjC,QAAQnB,CAAAA;QACJ,MAAM,CAACC,OAAOC,SAAS,GAAGC;QAC1B,OAAO,WAAP,GAAO,oBAACJ,YAAUA;YAAE,GAAGC,IAAI;YAAE,MAAK;YAAa,OAAOC;YAAO,UAAUC;;IAC3E;IACA,MAAM;QACF,OAAO;IACX;AACJ;AAEO,MAAMkB,YAAmB;IAC5B,QAAQpB,CAAAA;QACJ,MAAM,CAACC,OAAOC,SAAS,GAAGC;QAC1B,OAAO,WAAP,GAAO,oBAACJ,YAAUA;YAAE,GAAGC,IAAI;YAAE,MAAK;YAAQ,OAAOC;YAAO,UAAUC;;IACtE;IACA,MAAM;QACF,OAAO;IACX;AACJ;AAEO,MAAMmB,WAAkB;IAC3B,QAAQrB,CAAAA;QACJ,MAAM,CAACC,OAAOC,SAAS,GAAGC;QAC1B,OAAO,WAAP,GAAO,oBAACJ,YAAUA;YAAE,GAAGC,IAAI;YAAE,MAAK;YAAO,OAAOC;YAAO,UAAUC;;IACrE;IACA,MAAM;QACF,OAAO;IACX;AACJ;AAEO,MAAMoB,WAAkB;IAC3B,QAAQtB,CAAAA;QACJ,MAAM,CAACC,OAAOC,SAAS,GAAGC;QAC1B,OAAO,WAAP,GACI,oBAACJ,YAAUA;YACN,GAAGC,IAAI;YACR,MAAK;YACL,OAAOC;YACP,UAAUC;YACV,WAAW;gBAAC;gBAAM;aAAK;;IAGnC;IACA,MAAM;QACF,OAAO;IACX;AACJ;AAEO,MAAMqB,gBAAuB;IAChC,QAAQvB,CAAAA;QACJ,MAAM,CAACC,OAAOC,SAAS,GAAGC;QAC1B,OAAO,WAAP,GAAO,oBAACJ,YAAUA;YAAE,GAAGC,IAAI;YAAE,MAAK;YAAY,OAAOC;YAAO,UAAUC;;IAC1E;IACA,MAAM;QACF,OAAO;IACX;AACJ;AAEO,MAAMsB,oBAA2B;IACpC,QAAQxB,CAAAA;QACJ,MAAM,CAACC,OAAOC,SAAS,GAAGC,SAAmB,EAAE;QAC/C,OAAO,WAAP,GAAO,oBAACJ,YAAUA;YAAE,GAAGC,IAAI;YAAE,MAAK;YAAgB,OAAOC;YAAO,UAAUC;;IAC9E;IACA,MAAM;QACF,OAAO;IACX;AACJ;AAEO,MAAMuB,qBAA4B;IACrC,QAAQzB,CAAAA;QACJ,MAAM,CAACC,OAAOC,SAAS,GAAGC,SAAmB,EAAE;QAC/C,OAAO,WAAP,GAAO,oBAACJ,YAAUA;YAAE,GAAGC,IAAI;YAAE,MAAK;YAAiB,OAAOC;YAAO,UAAUC;;IAC/E;IACA,MAAM;QACF,OAAO;IACX;AACJ;AAEO,MAAMwB,oBAA2B;IACpC,QAAQ1B,CAAAA;QACJ,MAAM,CAACC,OAAOC,SAAS,GAAGC,SAAmB,EAAE;QAC/C,OAAO,WAAP,GACI,oBAACJ,YAAUA;YACN,GAAGC,IAAI;YACR,MAAK;YACL,OAAOC;YACP,UAAUC;YACV,WAAW;gBAAC;gBAAM;aAAK;;IAGnC;IACA,MAAM;QACF,OAAO;IACX;AACJ;AAEA,MAAMyB,cAAc,CAAC1B;IACjB,IAAIA,QAAAA,OACA,OAAO;IAEX,IAAIA,iBAAiBa,MACjB,OAAOb,MAAM,WAAW;IAE5B,IAAI2B,MAAM,OAAO,CAAC3B,QACd,OAAO4B,KAAK,SAAS,CACjB5B,MAAM,GAAG,CAAC,CAAC6B,IAAYA,aAAahB,OAAOgB,EAAE,WAAW,KAAKA,IAC7D,MACA;IAGR,IAAI,AAAiB,YAAjB,OAAO7B,OACP,OAAO4B,KAAK,SAAS,CAAC5B,OAAO,CAAC8B,IAAID,IAAOA,aAAahB,OAAOgB,EAAE,WAAW,KAAKA,GAAI;IAEvF,OAAOE,OAAO/B;AAClB;AAEA,MAAMgC,qBAAqB,CAACjC;IACxB,MAAMkC,aAAclC,KAAK,IAAI,EAAa,WAAW;IACrD,MAAM,CAACC,OAAOC,SAAS,GAAGC,SAAc+B,aAAa,EAAE,GAAGC;IAC1D,MAAM,CAACC,YAAYC,cAAc,GAAGlC,SAAS;QAAE,SAAS;QAAM,SAAS;IAAG;IAE1E,MAAMmC,eAAe,CAACC;QAClBrC,SAASqC;QACT,MAAMC,UACFD,QAAAA,YAEAA,AAAa,OAAbA,YACCX,MAAM,OAAO,CAACW,aAAaA,AAAoB,MAApBA,SAAS,MAAM;QAC3CvC,KAAK,QAAQ,IAAIwC,UACjBH,cAAc;YAAE,SAAS;YAAO,SAAS;QAAyB,KAElEA,cAAc;YAAE,SAAS;YAAM,SAAS;QAAG;IAEnD;IAEA,OAAO,WAAP,GACI,oBAAC,2BACG,oBAACtC,YAAUA;QAAE,GAAGC,IAAI;QAAE,OAAOC;QAAO,UAAUqC;QAAc,YAAYF;sBACxE,oBAAC;QAAI,WAAU;qBACX,oBAAC;QAAI,WAAU;OAAgD,gCAC/D,oBAAC;QAAI,WAAU;OACVT,YAAY1B;AAKjC;AAEO,MAAMwC,gBAAuB;IAChC,QAAQzC,CAAAA,OACG,WAAP,GAAO,oBAACiC,oBAAkBA;YAAC,KAAKjC,KAAK,IAAI;YAAa,GAAGA,IAAI;;IAEjE,MAAM;QACF,MAAM;QACN,OAAO;QACP,UAAU;QACV,UAAU;QACV,aAAa;QACb,MAAM;QACN,aAAa;QACb,YAAYmC;IAChB;IACA,UAAU;QACN,MAAM;YACF,aAAa;YACb,SAAS;YACT,SAAS;gBACL;gBACA;gBACA;gBACA;gBACA;gBACA;gBACA;gBACA;gBACA;gBACA;gBACA;aACH;YACD,cAAc;QAClB;QACA,OAAO;YACH,aAAa;YACb,SAAS;QACb;QACA,UAAU;YACN,aAAa;YACb,SAAS;YACT,cAAc;QAClB;QACA,UAAU;YACN,aAAa;YACb,SAAS;YACT,cAAc;QAClB;QACA,aAAa;YACT,aAAa;YACb,SAAS;QACb;QACA,MAAM;YACF,aAAa;YACb,SAAS;QACb;QACA,aAAa;YACT,aAAa;YACb,SAAS;QACb;QACA,YAAY;YACR,aACI;QACR;QACA,UAAU;YACN,aAAa;QACjB;IACJ;AACJ"}
+{"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                \"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":";;;AAKA,MAAMA,OAAgC;IAClC,OAAO;IACP,WAAWC;IACX,UAAU;QACN,UAAU;YAAE,QAAQ;QAAW;QAC/B,MAAM;YACF,SAAS;YACT,SAAS;gBACL;gBACA;gBACA;gBACA;gBACA;gBACA;gBACA;gBACA;gBACA;gBACA;gBACA;aACH;YACD,cAAc;QAClB;QACA,UAAU;YACN,SAAS;YACT,cAAc;QAClB;IACJ;IACA,YAAY;QACR,QAAQ;IACZ;IACA,QAAQC,CAAAA;QACJ,MAAM,CAACC,OAAOC,SAAS,GAAGC;QAC1B,OAAO,WAAP,GAAO,oBAACJ,YAAUA;YAAE,GAAGC,IAAI;YAAE,OAAOC;YAAO,UAAUC;;IACzD;AACJ;AAEA,2BAAeJ;AAGR,MAAMM,UAAiB;IAC1B,MAAM;QACF,MAAM;IACV;AACJ;AAEO,MAAMC,YAAmB;IAC5B,MAAM;QACF,MAAM;QACN,OAAO;IACX;AACJ;AAEO,MAAMC,oBAA2B;IACpC,MAAM;QACF,MAAM;QACN,OAAO;QACP,UAAU;IACd;AACJ;AAEO,MAAMC,kBAAyB;IAClC,MAAM;QACF,MAAM;QACN,aAAa;IACjB;AACJ;AAEO,MAAMC,YAAmB;IAC5B,MAAM;QACF,MAAM;QACN,MAAM;IACV;AACJ;AAEO,MAAMC,aAAoB;IAC7B,MAAM;QACF,MAAM;QACN,YAAY;YACR,SAAS;YACT,SAAS;QACb;IACJ;AACJ;AAEO,MAAMC,WAAkB;IAC3B,MAAM;QACF,MAAM;QACN,OAAO;QACP,UAAU;IACd;AACJ;AAEO,MAAMC,cAAqB;IAC9B,MAAM;QACF,MAAM;QACN,OAAO;QACP,UAAU;QACV,aAAa;QACb,MAAM;QACN,YAAY;YACR,SAAS;YACT,SAAS;QACb;IACJ;AACJ;AAEO,MAAMC,cAAqB;IAC9B,QAAQZ,CAAAA;QACJ,MAAM,CAACC,OAAOC,SAAS,GAAGC;QAC1B,MAAMU,UAAU;YACZ;gBAAE,OAAO;gBAAS,OAAO,IAAM,IAAIC;YAAO;YAC1C;gBAAE,OAAO;gBAAY,OAAO,IAAMC,QAAQ,IAAID,QAAQ;YAAG;YACzD;gBAAE,OAAO;gBAAa,OAAO,IAAMC,QAAQ,IAAID,QAAQ;YAAG;YAC1D;gBAAE,OAAO;gBAAa,OAAO,IAAMC,QAAQ,IAAID,QAAQ;YAAG;YAC1D;gBAAE,OAAO;gBAAc,OAAO,IAAMC,QAAQ,IAAID,QAAQ;YAAI;YAC5D;gBAAE,OAAO;gBAAiB,OAAO,IAAME,aAAa,IAAIF;YAAQ;SACnE;QACD,OAAO,WAAP,GACI,oBAACf,YAAUA;YAAE,GAAGC,IAAI;YAAE,MAAK;YAAO,OAAOC;YAAO,UAAUC;YAAU,SAASW;;IAErF;IACA,MAAM;QACF,OAAO;QACP,aAAa;IACjB;AACJ;AAEO,MAAMI,WAAkB;IAC3B,QAAQjB,CAAAA;QACJ,MAAM,CAACC,OAAOC,SAAS,GAAGC;QAC1B,OAAO,WAAP,GAAO,oBAACJ,YAAUA;YAAE,GAAGC,IAAI;YAAE,MAAK;YAAO,OAAOC;YAAO,UAAUC;;IACrE;IACA,MAAM;QACF,OAAO;IACX;AACJ;AAEO,MAAMgB,oBAA2B;IACpC,QAAQlB,CAAAA;QACJ,MAAM,CAACC,OAAOC,SAAS,GAAGC;QAC1B,OAAO,WAAP,GAAO,oBAACJ,YAAUA;YAAE,GAAGC,IAAI;YAAE,MAAK;YAAgB,OAAOC;YAAO,UAAUC;;IAC9E;IACA,MAAM;QACF,OAAO;IACX;AACJ;AAEO,MAAMiB,iBAAwB;IACjC,QAAQnB,CAAAA;QACJ,MAAM,CAACC,OAAOC,SAAS,GAAGC;QAC1B,OAAO,WAAP,GAAO,oBAACJ,YAAUA;YAAE,GAAGC,IAAI;YAAE,MAAK;YAAa,OAAOC;YAAO,UAAUC;;IAC3E;IACA,MAAM;QACF,OAAO;IACX;AACJ;AAEO,MAAMkB,YAAmB;IAC5B,QAAQpB,CAAAA;QACJ,MAAM,CAACC,OAAOC,SAAS,GAAGC;QAC1B,OAAO,WAAP,GAAO,oBAACJ,YAAUA;YAAE,GAAGC,IAAI;YAAE,MAAK;YAAQ,OAAOC;YAAO,UAAUC;;IACtE;IACA,MAAM;QACF,OAAO;IACX;AACJ;AAEO,MAAMmB,WAAkB;IAC3B,QAAQrB,CAAAA;QACJ,MAAM,CAACC,OAAOC,SAAS,GAAGC;QAC1B,OAAO,WAAP,GAAO,oBAACJ,YAAUA;YAAE,GAAGC,IAAI;YAAE,MAAK;YAAO,OAAOC;YAAO,UAAUC;;IACrE;IACA,MAAM;QACF,OAAO;IACX;AACJ;AAEO,MAAMoB,WAAkB;IAC3B,QAAQtB,CAAAA;QACJ,MAAM,CAACC,OAAOC,SAAS,GAAGC;QAC1B,OAAO,WAAP,GACI,oBAACJ,YAAUA;YACN,GAAGC,IAAI;YACR,MAAK;YACL,OAAOC;YACP,UAAUC;YACV,WAAW;gBAAC;gBAAM;aAAK;;IAGnC;IACA,MAAM;QACF,OAAO;IACX;AACJ;AAEO,MAAMqB,gBAAuB;IAChC,QAAQvB,CAAAA;QACJ,MAAM,CAACC,OAAOC,SAAS,GAAGC;QAC1B,OAAO,WAAP,GAAO,oBAACJ,YAAUA;YAAE,GAAGC,IAAI;YAAE,MAAK;YAAY,OAAOC;YAAO,UAAUC;;IAC1E;IACA,MAAM;QACF,OAAO;IACX;AACJ;AAEO,MAAMsB,oBAA2B;IACpC,QAAQxB,CAAAA;QACJ,MAAM,CAACC,OAAOC,SAAS,GAAGC,SAAmB,EAAE;QAC/C,OAAO,WAAP,GAAO,oBAACJ,YAAUA;YAAE,GAAGC,IAAI;YAAE,MAAK;YAAgB,OAAOC;YAAO,UAAUC;;IAC9E;IACA,MAAM;QACF,OAAO;IACX;AACJ;AAEO,MAAMuB,qBAA4B;IACrC,QAAQzB,CAAAA;QACJ,MAAM,CAACC,OAAOC,SAAS,GAAGC,SAAmB,EAAE;QAC/C,OAAO,WAAP,GAAO,oBAACJ,YAAUA;YAAE,GAAGC,IAAI;YAAE,MAAK;YAAiB,OAAOC;YAAO,UAAUC;;IAC/E;IACA,MAAM;QACF,OAAO;IACX;AACJ;AAEO,MAAMwB,oBAA2B;IACpC,QAAQ1B,CAAAA;QACJ,MAAM,CAACC,OAAOC,SAAS,GAAGC,SAAmB,EAAE;QAC/C,OAAO,WAAP,GACI,oBAACJ,YAAUA;YACN,GAAGC,IAAI;YACR,MAAK;YACL,OAAOC;YACP,UAAUC;YACV,WAAW;gBAAC;gBAAM;aAAK;;IAGnC;IACA,MAAM;QACF,OAAO;IACX;AACJ;AAEA,MAAMyB,cAAc,CAAC1B;IACjB,IAAIA,QAAAA,OACA,OAAO;IAEX,IAAIA,iBAAiBa,MACjB,OAAOb,MAAM,WAAW;IAE5B,IAAI2B,MAAM,OAAO,CAAC3B,QACd,OAAO4B,KAAK,SAAS,CACjB5B,MAAM,GAAG,CAAC,CAAC6B,IAAYA,aAAahB,OAAOgB,EAAE,WAAW,KAAKA,IAC7D,MACA;IAGR,IAAI,AAAiB,YAAjB,OAAO7B,OACP,OAAO4B,KAAK,SAAS,CAAC5B,OAAO,CAAC8B,IAAID,IAAOA,aAAahB,OAAOgB,EAAE,WAAW,KAAKA,GAAI;IAEvF,OAAOE,OAAO/B;AAClB;AAEA,MAAMgC,qBAAqB,CAACjC;IACxB,MAAMkC,aAAclC,KAAK,IAAI,EAAa,WAAW;IACrD,MAAM,CAACC,OAAOC,SAAS,GAAGC,SAAc+B,aAAa,EAAE,GAAGC;IAC1D,MAAM,CAACC,YAAYC,cAAc,GAAGlC,SAAS;QAAE,SAAS;QAAM,SAAS;IAAG;IAE1E,MAAMmC,eAAe,CAACC;QAClBrC,SAASqC;QACT,MAAMC,UACFD,QAAAA,YAEAA,AAAa,OAAbA,YACCX,MAAM,OAAO,CAACW,aAAaA,AAAoB,MAApBA,SAAS,MAAM;QAC3CvC,KAAK,QAAQ,IAAIwC,UACjBH,cAAc;YAAE,SAAS;YAAO,SAAS;QAAyB,KAElEA,cAAc;YAAE,SAAS;YAAM,SAAS;QAAG;IAEnD;IAEA,OAAO,WAAP,GACI,oBAAC,2BACG,oBAACtC,YAAUA;QAAE,GAAGC,IAAI;QAAE,OAAOC;QAAO,UAAUqC;QAAc,YAAYF;sBACxE,oBAAC;QAAI,WAAU;qBACX,oBAAC;QAAI,WAAU;OAAgD,gCAC/D,oBAAC;QAAI,WAAU;OACVT,YAAY1B;AAKjC;AAEO,MAAMwC,gBAAuB;IAChC,QAAQzC,CAAAA,OACG,WAAP,GAAO,oBAACiC,oBAAkBA;YAAC,KAAKjC,KAAK,IAAI;YAAa,GAAGA,IAAI;;IAEjE,MAAM;QACF,MAAM;QACN,OAAO;QACP,UAAU;QACV,UAAU;QACV,aAAa;QACb,MAAM;QACN,aAAa;QACb,YAAYmC;IAChB;IACA,UAAU;QACN,MAAM;YACF,aAAa;YACb,SAAS;YACT,SAAS;gBACL;gBACA;gBACA;gBACA;gBACA;gBACA;gBACA;gBACA;gBACA;gBACA;gBACA;aACH;YACD,cAAc;QAClB;QACA,OAAO;YACH,aAAa;YACb,SAAS;QACb;QACA,UAAU;YACN,aAAa;YACb,SAAS;YACT,cAAc;QAClB;QACA,UAAU;YACN,aAAa;YACb,SAAS;YACT,cAAc;QAClB;QACA,aAAa;YACT,aAAa;YACb,SAAS;QACb;QACA,MAAM;YACF,aAAa;YACb,SAAS;QACb;QACA,aAAa;YACT,aAAa;YACb,SAAS;QACb;QACA,YAAY;YACR,aACI;QACR;QACA,UAAU;YACN,aAAa;QACjB;IACJ;AACJ"}

package/DatePicker/primitives/components/DatePickerTrigger.js

@@ -22,7 +22,7 @@ const DatePickerTriggerInner = /*#__PURE__*/ forwardRef(({ displayValue, placeho
         }), "cursor-pointer justify-between select-none", disabled && "pointer-events-none opacity-50", className),
         ...props
     }, /*#__PURE__*/ react.createElement("span", {
-        className: cn(!displayValue && "text-neutral-dimmed")
+        className: cn("truncate", !displayValue && "text-neutral-dimmed")
     }, displayValue || placeholder || "Select..."), /*#__PURE__*/ react.createElement(Icon, {
         icon: /*#__PURE__*/ react.createElement(IconComponent, null),
         label: iconLabel,

package/DatePicker/primitives/components/DatePickerTrigger.js.map

@@ -1 +1 @@
-{"version":3,"file":"DatePicker/primitives/components/DatePickerTrigger.js","sources":["../../../../src/DatePicker/primitives/components/DatePickerTrigger.tsx"],"sourcesContent":["import React, { forwardRef } from \"react\";\nimport { ReactComponent as CalendarMonthIcon } from \"@webiny/icons/calendar_month.svg\";\nimport { ReactComponent as ScheduleIcon } from \"@webiny/icons/schedule.svg\";\nimport { Icon } from \"~/Icon/index.js\";\nimport { inputVariants, type InputPrimitiveProps } from \"~/Input/index.js\";\nimport { PopoverPrimitive } from \"~/Popover/index.js\";\nimport { cn } from \"~/utils.js\";\n\ninterface DatePickerTriggerProps {\n    displayValue?: string;\n    placeholder?: string;\n    disabled?: boolean;\n    size?: InputPrimitiveProps[\"size\"];\n    variant?: InputPrimitiveProps[\"variant\"];\n    invalid?: InputPrimitiveProps[\"invalid\"];\n    iconType?: \"calendar\" | \"time\";\n}\n\nconst DatePickerTriggerInner = forwardRef<\n    HTMLDivElement,\n    DatePickerTriggerProps & React.HTMLAttributes<HTMLDivElement>\n>(\n    (\n        {\n            displayValue,\n            placeholder,\n            disabled,\n            size,\n            variant,\n            invalid,\n            iconType = \"calendar\",\n            className,\n            ...props\n        },\n        ref\n    ) => {\n        const IconComponent = iconType === \"time\" ? ScheduleIcon : CalendarMonthIcon;\n        const iconLabel = iconType === \"time\" ? \"Time\" : \"Calendar\";\n\n        return (\n            <PopoverPrimitive.Trigger asChild>\n                <div\n                    ref={ref}\n                    role=\"button\"\n                    tabIndex={0}\n                    data-disabled={disabled}\n                    className={cn(\n                        inputVariants({ size, variant, invalid }),\n                        \"cursor-pointer justify-between select-none\",\n                        disabled && \"pointer-events-none opacity-50\",\n                        className\n                    )}\n                    {...props}\n                >\n                    <span className={cn(!displayValue && \"text-neutral-dimmed\")}>\n                        {displayValue || placeholder || \"Select...\"}\n                    </span>\n                    <Icon icon={<IconComponent />} label={iconLabel} size=\"sm\" color=\"inherit\" />\n                </div>\n            </PopoverPrimitive.Trigger>\n        );\n    }\n);\n\nDatePickerTriggerInner.displayName = \"DatePickerTrigger\";\n\nexport { DatePickerTriggerInner as DatePickerTrigger, type DatePickerTriggerProps };\n"],"names":["DatePickerTriggerInner","forwardRef","displayValue","placeholder","disabled","size","variant","invalid","iconType","className","props","ref","IconComponent","ScheduleIcon","CalendarMonthIcon","iconLabel","PopoverPrimitive","cn","inputVariants","Icon"],"mappings":";;;;;;;AAkBA,MAAMA,yBAAyB,WAAHA,GAAGC,WAI3B,CACI,EACIC,YAAY,EACZC,WAAW,EACXC,QAAQ,EACRC,IAAI,EACJC,OAAO,EACPC,OAAO,EACPC,WAAW,UAAU,EACrBC,SAAS,EACT,GAAGC,OACN,EACDC;IAEA,MAAMC,gBAAgBJ,AAAa,WAAbA,WAAsBK,8BAAeC;IAC3D,MAAMC,YAAYP,AAAa,WAAbA,WAAsB,SAAS;IAEjD,OAAO,WAAP,GACI,oBAACQ,iBAAiB,OAAO;QAAC;qBACtB,oBAAC;QACG,KAAKL;QACL,MAAK;QACL,UAAU;QACV,iBAAeP;QACf,WAAWa,GACPC,cAAc;YAAEb;YAAMC;YAASC;QAAQ,IACvC,8CACAH,YAAY,kCACZK;QAEH,GAAGC,KAAK;qBAET,oBAAC;QAAK,WAAWO,GAAG,CAACf,gBAAgB;OAChCA,gBAAgBC,eAAe,4BAEpC,oBAACgB,MAAIA;QAAC,oBAAM,oBAACP,eAAAA;QAAkB,OAAOG;QAAW,MAAK;QAAK,OAAM;;AAIjF;AAGJf,uBAAuB,WAAW,GAAG"}
+{"version":3,"file":"DatePicker/primitives/components/DatePickerTrigger.js","sources":["../../../../src/DatePicker/primitives/components/DatePickerTrigger.tsx"],"sourcesContent":["import React, { forwardRef } from \"react\";\nimport { ReactComponent as CalendarMonthIcon } from \"@webiny/icons/calendar_month.svg\";\nimport { ReactComponent as ScheduleIcon } from \"@webiny/icons/schedule.svg\";\nimport { Icon } from \"~/Icon/index.js\";\nimport { inputVariants, type InputPrimitiveProps } from \"~/Input/index.js\";\nimport { PopoverPrimitive } from \"~/Popover/index.js\";\nimport { cn } from \"~/utils.js\";\n\ninterface DatePickerTriggerProps {\n    displayValue?: string;\n    placeholder?: string;\n    disabled?: boolean;\n    size?: InputPrimitiveProps[\"size\"];\n    variant?: InputPrimitiveProps[\"variant\"];\n    invalid?: InputPrimitiveProps[\"invalid\"];\n    iconType?: \"calendar\" | \"time\";\n}\n\nconst DatePickerTriggerInner = forwardRef<\n    HTMLDivElement,\n    DatePickerTriggerProps & React.HTMLAttributes<HTMLDivElement>\n>(\n    (\n        {\n            displayValue,\n            placeholder,\n            disabled,\n            size,\n            variant,\n            invalid,\n            iconType = \"calendar\",\n            className,\n            ...props\n        },\n        ref\n    ) => {\n        const IconComponent = iconType === \"time\" ? ScheduleIcon : CalendarMonthIcon;\n        const iconLabel = iconType === \"time\" ? \"Time\" : \"Calendar\";\n\n        return (\n            <PopoverPrimitive.Trigger asChild>\n                <div\n                    ref={ref}\n                    role=\"button\"\n                    tabIndex={0}\n                    data-disabled={disabled}\n                    className={cn(\n                        inputVariants({ size, variant, invalid }),\n                        \"cursor-pointer justify-between select-none\",\n                        disabled && \"pointer-events-none opacity-50\",\n                        className\n                    )}\n                    {...props}\n                >\n                    <span className={cn(\"truncate\", !displayValue && \"text-neutral-dimmed\")}>\n                        {displayValue || placeholder || \"Select...\"}\n                    </span>\n                    <Icon icon={<IconComponent />} label={iconLabel} size=\"sm\" color=\"inherit\" />\n                </div>\n            </PopoverPrimitive.Trigger>\n        );\n    }\n);\n\nDatePickerTriggerInner.displayName = \"DatePickerTrigger\";\n\nexport { DatePickerTriggerInner as DatePickerTrigger, type DatePickerTriggerProps };\n"],"names":["DatePickerTriggerInner","forwardRef","displayValue","placeholder","disabled","size","variant","invalid","iconType","className","props","ref","IconComponent","ScheduleIcon","CalendarMonthIcon","iconLabel","PopoverPrimitive","cn","inputVariants","Icon"],"mappings":";;;;;;;AAkBA,MAAMA,yBAAyB,WAAHA,GAAGC,WAI3B,CACI,EACIC,YAAY,EACZC,WAAW,EACXC,QAAQ,EACRC,IAAI,EACJC,OAAO,EACPC,OAAO,EACPC,WAAW,UAAU,EACrBC,SAAS,EACT,GAAGC,OACN,EACDC;IAEA,MAAMC,gBAAgBJ,AAAa,WAAbA,WAAsBK,8BAAeC;IAC3D,MAAMC,YAAYP,AAAa,WAAbA,WAAsB,SAAS;IAEjD,OAAO,WAAP,GACI,oBAACQ,iBAAiB,OAAO;QAAC;qBACtB,oBAAC;QACG,KAAKL;QACL,MAAK;QACL,UAAU;QACV,iBAAeP;QACf,WAAWa,GACPC,cAAc;YAAEb;YAAMC;YAASC;QAAQ,IACvC,8CACAH,YAAY,kCACZK;QAEH,GAAGC,KAAK;qBAET,oBAAC;QAAK,WAAWO,GAAG,YAAY,CAACf,gBAAgB;OAC5CA,gBAAgBC,eAAe,4BAEpC,oBAACgB,MAAIA;QAAC,oBAAM,oBAACP,eAAAA;QAAkB,OAAOG;QAAW,MAAK;QAAK,OAAM;;AAIjF;AAGJf,uBAAuB,WAAW,GAAG"}

package/Dialog/Dialog.stories.d.ts

@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from "@storybook/react-webpack5";
+import type { Meta, StoryObj } from "@storybook/react";
 import { Dialog } from "./Dialog.js";
 declare const meta: Meta<typeof Dialog>;
 export default meta;

package/Dialog/Dialog.stories.js.map

@@ -1 +1 @@
-{"version":3,"file":"Dialog/Dialog.stories.js","sources":["../../src/Dialog/Dialog.stories.tsx"],"sourcesContent":["import React, { useState } from \"react\";\nimport { library } from \"@fortawesome/fontawesome-svg-core\";\nimport { fas } from \"@fortawesome/free-solid-svg-icons\";\nimport type { Meta, StoryObj } from \"@storybook/react-webpack5\";\nimport { Dialog } from \"./Dialog.js\";\nimport { Button } from \"~/Button/index.js\";\nimport { DropdownMenu } from \"~/DropdownMenu/index.js\";\nimport { ReactComponent as NotificationIcon } from \"@webiny/icons/notifications_active.svg\";\nimport { Tabs } from \"~/Tabs/index.js\";\nimport { IconPicker } from \"~/IconPicker/index.js\";\n\nlibrary.add(fas);\n\nconst meta: Meta<typeof Dialog> = {\n    title: \"Components/Dialog\",\n    component: Dialog,\n    argTypes: {}\n};\n\nexport default meta;\n\ntype Story = StoryObj<typeof Dialog>;\n\nexport const Default: Story = {\n    args: {\n        size: \"md\",\n        trigger: <Button variant=\"primary\" text={\"Open\"} />,\n        title: \"Dialog Title\",\n        description: \"A short dialog description.\",\n        info: (\n            <>\n                Learn more about this <a href={\"#\"}>here</a>.\n            </>\n        ),\n        children: (\n            <>\n                The amazing, splendid, and most useful umbrella, resistant to rain and friendly to\n                winds, is something that deserves all admiration. Crafted with perfect textures, it\n                bravely withstands storms and gently shades the rays of the sun. A remarkable\n                innovation, with an ergonomically designed grip most suited to the hand, it remains\n                stable even in the fiercest weather.\n            </>\n        ),\n        onOpenChange: opened => {\n            console.log(`Dialog is ${opened ? \"opened\" : \"closed\"}.`);\n        },\n        actions: (\n            <>\n                <Dialog.CancelAction />\n                <Dialog.ConfirmAction />\n            </>\n        )\n    },\n    argTypes: {}\n};\n\nexport const SizeSmall: Story = {\n    args: {\n        ...Default.args,\n        size: \"sm\"\n    }\n};\n\nexport const SizeMedium: Story = {\n    args: {\n        ...Default.args,\n        size: \"md\"\n    }\n};\n\nexport const SizeLarge: Story = {\n    args: {\n        ...Default.args,\n        size: \"lg\"\n    }\n};\n\nexport const SizeExtraLarge: Story = {\n    args: {\n        ...Default.args,\n        size: \"xl\"\n    }\n};\n\nexport const SizeFullScreen: Story = {\n    args: {\n        ...Default.args,\n        size: \"full\"\n    }\n};\n\nexport const ControlledVisibility: Story = {\n    render: props => {\n        const [open, setOpen] = React.useState(false);\n\n        return (\n            <>\n                <Button variant=\"primary\" text={\"Open\"} onClick={() => setOpen(true)} />\n                <Dialog\n                    {...props}\n                    open={open}\n                    onOpenChange={open => {\n                        if (!open) {\n                            setOpen(false);\n                        }\n                    }}\n                />\n            </>\n        );\n    },\n    args: { ...Default.args, trigger: null }\n};\n\nexport const WithOpenCloseEventHandler: Story = {\n    args: {\n        ...Default.args,\n        onClose: () => {\n            console.log(\"onClose triggered\");\n        },\n        onOpen: () => {\n            console.log(\"onOpen triggered\");\n        }\n    }\n};\n\nexport const WithDropdownMenu: Story = {\n    render: props => {\n        const [open, setOpen] = React.useState(false);\n\n        return (\n            <>\n                <DropdownMenu trigger={<Button variant=\"primary\" text={\"Open\"} />}>\n                    <DropdownMenu.Item\n                        text={\"Open Dialog\"}\n                        content={\"Open Dialog\"}\n                        onClick={() => setOpen(true)}\n                    />\n                </DropdownMenu>\n\n                <Dialog {...props} open={open} onOpenChange={() => setOpen(false)} />\n            </>\n        );\n    },\n    args: { ...Default.args, trigger: null }\n};\n\nexport const WithoutCloseButton: Story = {\n    args: { ...Default.args, showCloseButton: false }\n};\n\nexport const AlertDialog: Story = {\n    args: {\n        ...Default.args,\n        info: null,\n        showCloseButton: false,\n        title: \"Confirm Action\",\n        description: \"Are you sure you want to delete this item?\",\n        children: (\n            <>\n                <p>This action cannot be undone.</p>\n                <p>Deleted items cannot be recovered.</p>\n            </>\n        )\n    }\n};\n\nexport const DropdownMenuInDialog: Story = {\n    args: {\n        ...Default.args,\n        children: (\n            <>\n                <DropdownMenu trigger={<Button variant=\"primary\" text={\"Open\"} />}>\n                    <DropdownMenu.Item text={\"Billing\"} />\n                    <DropdownMenu.Item text={\"Settings\"} />\n                    <DropdownMenu.Item text={\"Keyboard shortcuts\"} />\n                </DropdownMenu>\n            </>\n        )\n    }\n};\n\nexport const DropdownIconPickerInDialog: Story = {\n    args: {\n        ...Default.args\n    },\n    render: args => {\n        const [value, setValue] = useState(\"\");\n        return (\n            <Dialog {...args}>\n                <IconPicker\n                    icons={[\n                        { prefix: \"fas\", name: \"trash-restore-alt\" },\n                        { prefix: \"fas\", name: \"trash-can-arrow-up\" },\n                        { prefix: \"fas\", name: \"naira-sign\" },\n                        { prefix: \"fas\", name: \"cart-arrow-down\" },\n                        { prefix: \"fas\", name: \"walkie-talkie\" },\n                        { prefix: \"fas\", name: \"file-edit\" },\n                        { prefix: \"fas\", name: \"file-pen\" },\n                        { prefix: \"fas\", name: \"receipt\" },\n                        { prefix: \"fas\", name: \"pen-square\" },\n                        { prefix: \"fas\", name: \"pencil-square\" },\n                        { prefix: \"fas\", name: \"square-pen\" },\n                        { prefix: \"fas\", name: \"suitcase-rolling\" },\n                        { prefix: \"fas\", name: \"person-circle-exclamation\" },\n                        { prefix: \"fas\", name: \"chevron-down\" },\n                        { prefix: \"fas\", name: \"battery\" },\n                        { prefix: \"fas\", name: \"battery-5\" },\n                        { prefix: \"fas\", name: \"battery-full\" },\n                        { prefix: \"fas\", name: \"skull-crossbones\" },\n                        { prefix: \"fas\", name: \"code-compare\" },\n                        { prefix: \"fas\", name: \"list-dots\" },\n                        { prefix: \"fas\", name: \"list-ul\" },\n                        { prefix: \"fas\", name: \"school-lock\" },\n                        { prefix: \"fas\", name: \"tower-cell\" },\n                        { prefix: \"fas\", name: \"long-arrow-alt-down\" },\n                        { prefix: \"fas\", name: \"down-long\" },\n                        { prefix: \"fas\", name: \"ranking-star\" },\n                        { prefix: \"fas\", name: \"chess-king\" },\n                        { prefix: \"fas\", name: \"person-harassing\" },\n                        { prefix: \"fas\", name: \"brazilian-real-sign\" },\n                        { prefix: \"fas\", name: \"landmark-alt\" }\n                    ]}\n                    value={value}\n                    onChange={value => {\n                        console.log(\"Selected icon:\", value);\n                        setValue(value);\n                    }}\n                />\n            </Dialog>\n        );\n    }\n};\n\nexport const WithIcon: Story = {\n    args: {\n        ...Default.args,\n        icon: <Dialog.Icon icon={<NotificationIcon />} label={\"Title icon\"} />\n    }\n};\n\nexport const PreventOutsideDismiss: Story = {\n    args: {\n        ...Default.args,\n        dismissible: false\n    }\n};\n\nexport const WithTabs: Story = {\n    args: {\n        ...Default.args,\n        bodyPadding: false,\n        children: (\n            <>\n                <Tabs\n                    separator={true}\n                    spacing={\"lg\"}\n                    tabs={[\n                        <Tabs.Tab\n                            key={\"account\"}\n                            value={\"account\"}\n                            trigger={\"Account\"}\n                            content={\"Make changes to your account here.\"}\n                        />,\n                        <Tabs.Tab\n                            key={\"company\"}\n                            value={\"company\"}\n                            trigger={\"Company\"}\n                            content={\"Make changes to your company info here.\"}\n                        />,\n                        <Tabs.Tab\n                            key={\"security\"}\n                            value={\"security\"}\n                            trigger={\"Security\"}\n                            content={\"Make changes to your security settings here.\"}\n                        />,\n                        <Tabs.Tab\n                            key={\"development\"}\n                            value={\"development\"}\n                            trigger={\"Development\"}\n                            content={\"Make changes to your development settings here.\"}\n                        />\n                    ]}\n                />\n            </>\n        )\n    }\n};\n\nexport const Documentation: Story = {\n    render: args => {\n        const [open, setOpen] = useState(false);\n\n        return (\n            <>\n                <Button variant=\"primary\" text=\"Open Dialog\" onClick={() => setOpen(true)} />\n\n                <Dialog {...args} open={open} onOpenChange={open => setOpen(open)} />\n            </>\n        );\n    },\n    args: {\n        title: \"Dialog Title\",\n        description: \"A short dialog description.\",\n        showCloseButton: true,\n        dismissible: true,\n        bodyPadding: true,\n        info: (\n            <>\n                Learn more about this <a href={\"#\"}>here</a>.\n            </>\n        ),\n        children: (\n            <>\n                This is the dialog content area. You can place any content here including forms,\n                text, images, or other components.\n            </>\n        ),\n        actions: (\n            <>\n                <Dialog.CancelAction />\n                <Dialog.ConfirmAction />\n            </>\n        )\n    },\n    argTypes: {\n        title: {\n            description: \"Title displayed in the header\",\n            control: \"text\"\n        },\n        description: {\n            description: \"Description displayed below the title\",\n            control: \"text\"\n        },\n        size: {\n            description: \"Controls the size of the dialog\",\n            control: \"select\",\n            options: [\"sm\", \"md\", \"lg\", \"xl\", \"full\"]\n        },\n        showCloseButton: {\n            description:\n                \"Show close button, please refer to the 'Without Close Button' example below for details.\",\n            control: \"boolean\",\n            defaultValue: true\n        },\n        dismissible: {\n            description:\n                \"Allow dialog to be dismissed by clicking outside or pressing Escape, please refer to the 'Prevent Outside Dismiss' example below for details.\",\n            control: \"boolean\",\n            defaultValue: true\n        },\n        bodyPadding: {\n            description: \"Add padding to the Dialog body.\",\n            control: \"boolean\",\n            defaultValue: true\n        },\n        info: {\n            description:\n                \"Additional info displayed below the description, please refer to the example below for details.\"\n        },\n        children: {\n            description:\n                \"Content of the dialog, please refer to the 'With Dropdown Menu' and ''With Tabs' example below for details.\"\n        },\n        actions: {\n            description:\n                \"Actions displayed in the footer, please refer to the code example for details.\"\n        }\n    }\n};\n"],"names":["library","fas","meta","Dialog","Default","Button","opened","console","SizeSmall","SizeMedium","SizeLarge","SizeExtraLarge","SizeFullScreen","ControlledVisibility","props","open","setOpen","React","WithOpenCloseEventHandler","WithDropdownMenu","DropdownMenu","WithoutCloseButton","AlertDialog","DropdownMenuInDialog","DropdownIconPickerInDialog","args","value","setValue","useState","IconPicker","WithIcon","NotificationIcon","PreventOutsideDismiss","WithTabs","Tabs","Documentation"],"mappings":"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"}
+{"version":3,"file":"Dialog/Dialog.stories.js","sources":["../../src/Dialog/Dialog.stories.tsx"],"sourcesContent":["import React, { useState } from \"react\";\nimport { library } from \"@fortawesome/fontawesome-svg-core\";\nimport { fas } from \"@fortawesome/free-solid-svg-icons\";\nimport type { Meta, StoryObj } from \"@storybook/react\";\nimport { Dialog } from \"./Dialog.js\";\nimport { Button } from \"~/Button/index.js\";\nimport { DropdownMenu } from \"~/DropdownMenu/index.js\";\nimport { ReactComponent as NotificationIcon } from \"@webiny/icons/notifications_active.svg\";\nimport { Tabs } from \"~/Tabs/index.js\";\nimport { IconPicker } from \"~/IconPicker/index.js\";\n\nlibrary.add(fas);\n\nconst meta: Meta<typeof Dialog> = {\n    title: \"Components/Dialog\",\n    component: Dialog,\n    argTypes: {}\n};\n\nexport default meta;\n\ntype Story = StoryObj<typeof Dialog>;\n\nexport const Default: Story = {\n    args: {\n        size: \"md\",\n        trigger: <Button variant=\"primary\" text={\"Open\"} />,\n        title: \"Dialog Title\",\n        description: \"A short dialog description.\",\n        info: (\n            <>\n                Learn more about this <a href={\"#\"}>here</a>.\n            </>\n        ),\n        children: (\n            <>\n                The amazing, splendid, and most useful umbrella, resistant to rain and friendly to\n                winds, is something that deserves all admiration. Crafted with perfect textures, it\n                bravely withstands storms and gently shades the rays of the sun. A remarkable\n                innovation, with an ergonomically designed grip most suited to the hand, it remains\n                stable even in the fiercest weather.\n            </>\n        ),\n        onOpenChange: opened => {\n            console.log(`Dialog is ${opened ? \"opened\" : \"closed\"}.`);\n        },\n        actions: (\n            <>\n                <Dialog.CancelAction />\n                <Dialog.ConfirmAction />\n            </>\n        )\n    },\n    argTypes: {}\n};\n\nexport const SizeSmall: Story = {\n    args: {\n        ...Default.args,\n        size: \"sm\"\n    }\n};\n\nexport const SizeMedium: Story = {\n    args: {\n        ...Default.args,\n        size: \"md\"\n    }\n};\n\nexport const SizeLarge: Story = {\n    args: {\n        ...Default.args,\n        size: \"lg\"\n    }\n};\n\nexport const SizeExtraLarge: Story = {\n    args: {\n        ...Default.args,\n        size: \"xl\"\n    }\n};\n\nexport const SizeFullScreen: Story = {\n    args: {\n        ...Default.args,\n        size: \"full\"\n    }\n};\n\nexport const ControlledVisibility: Story = {\n    render: props => {\n        const [open, setOpen] = React.useState(false);\n\n        return (\n            <>\n                <Button variant=\"primary\" text={\"Open\"} onClick={() => setOpen(true)} />\n                <Dialog\n                    {...props}\n                    open={open}\n                    onOpenChange={open => {\n                        if (!open) {\n                            setOpen(false);\n                        }\n                    }}\n                />\n            </>\n        );\n    },\n    args: { ...Default.args, trigger: null }\n};\n\nexport const WithOpenCloseEventHandler: Story = {\n    args: {\n        ...Default.args,\n        onClose: () => {\n            console.log(\"onClose triggered\");\n        },\n        onOpen: () => {\n            console.log(\"onOpen triggered\");\n        }\n    }\n};\n\nexport const WithDropdownMenu: Story = {\n    render: props => {\n        const [open, setOpen] = React.useState(false);\n\n        return (\n            <>\n                <DropdownMenu trigger={<Button variant=\"primary\" text={\"Open\"} />}>\n                    <DropdownMenu.Item\n                        text={\"Open Dialog\"}\n                        content={\"Open Dialog\"}\n                        onClick={() => setOpen(true)}\n                    />\n                </DropdownMenu>\n\n                <Dialog {...props} open={open} onOpenChange={() => setOpen(false)} />\n            </>\n        );\n    },\n    args: { ...Default.args, trigger: null }\n};\n\nexport const WithoutCloseButton: Story = {\n    args: { ...Default.args, showCloseButton: false }\n};\n\nexport const AlertDialog: Story = {\n    args: {\n        ...Default.args,\n        info: null,\n        showCloseButton: false,\n        title: \"Confirm Action\",\n        description: \"Are you sure you want to delete this item?\",\n        children: (\n            <>\n                <p>This action cannot be undone.</p>\n                <p>Deleted items cannot be recovered.</p>\n            </>\n        )\n    }\n};\n\nexport const DropdownMenuInDialog: Story = {\n    args: {\n        ...Default.args,\n        children: (\n            <>\n                <DropdownMenu trigger={<Button variant=\"primary\" text={\"Open\"} />}>\n                    <DropdownMenu.Item text={\"Billing\"} />\n                    <DropdownMenu.Item text={\"Settings\"} />\n                    <DropdownMenu.Item text={\"Keyboard shortcuts\"} />\n                </DropdownMenu>\n            </>\n        )\n    }\n};\n\nexport const DropdownIconPickerInDialog: Story = {\n    args: {\n        ...Default.args\n    },\n    render: args => {\n        const [value, setValue] = useState(\"\");\n        return (\n            <Dialog {...args}>\n                <IconPicker\n                    icons={[\n                        { prefix: \"fas\", name: \"trash-restore-alt\" },\n                        { prefix: \"fas\", name: \"trash-can-arrow-up\" },\n                        { prefix: \"fas\", name: \"naira-sign\" },\n                        { prefix: \"fas\", name: \"cart-arrow-down\" },\n                        { prefix: \"fas\", name: \"walkie-talkie\" },\n                        { prefix: \"fas\", name: \"file-edit\" },\n                        { prefix: \"fas\", name: \"file-pen\" },\n                        { prefix: \"fas\", name: \"receipt\" },\n                        { prefix: \"fas\", name: \"pen-square\" },\n                        { prefix: \"fas\", name: \"pencil-square\" },\n                        { prefix: \"fas\", name: \"square-pen\" },\n                        { prefix: \"fas\", name: \"suitcase-rolling\" },\n                        { prefix: \"fas\", name: \"person-circle-exclamation\" },\n                        { prefix: \"fas\", name: \"chevron-down\" },\n                        { prefix: \"fas\", name: \"battery\" },\n                        { prefix: \"fas\", name: \"battery-5\" },\n                        { prefix: \"fas\", name: \"battery-full\" },\n                        { prefix: \"fas\", name: \"skull-crossbones\" },\n                        { prefix: \"fas\", name: \"code-compare\" },\n                        { prefix: \"fas\", name: \"list-dots\" },\n                        { prefix: \"fas\", name: \"list-ul\" },\n                        { prefix: \"fas\", name: \"school-lock\" },\n                        { prefix: \"fas\", name: \"tower-cell\" },\n                        { prefix: \"fas\", name: \"long-arrow-alt-down\" },\n                        { prefix: \"fas\", name: \"down-long\" },\n                        { prefix: \"fas\", name: \"ranking-star\" },\n                        { prefix: \"fas\", name: \"chess-king\" },\n                        { prefix: \"fas\", name: \"person-harassing\" },\n                        { prefix: \"fas\", name: \"brazilian-real-sign\" },\n                        { prefix: \"fas\", name: \"landmark-alt\" }\n                    ]}\n                    value={value}\n                    onChange={value => {\n                        console.log(\"Selected icon:\", value);\n                        setValue(value);\n                    }}\n                />\n            </Dialog>\n        );\n    }\n};\n\nexport const WithIcon: Story = {\n    args: {\n        ...Default.args,\n        icon: <Dialog.Icon icon={<NotificationIcon />} label={\"Title icon\"} />\n    }\n};\n\nexport const PreventOutsideDismiss: Story = {\n    args: {\n        ...Default.args,\n        dismissible: false\n    }\n};\n\nexport const WithTabs: Story = {\n    args: {\n        ...Default.args,\n        bodyPadding: false,\n        children: (\n            <>\n                <Tabs\n                    separator={true}\n                    spacing={\"lg\"}\n                    tabs={[\n                        <Tabs.Tab\n                            key={\"account\"}\n                            value={\"account\"}\n                            trigger={\"Account\"}\n                            content={\"Make changes to your account here.\"}\n                        />,\n                        <Tabs.Tab\n                            key={\"company\"}\n                            value={\"company\"}\n                            trigger={\"Company\"}\n                            content={\"Make changes to your company info here.\"}\n                        />,\n                        <Tabs.Tab\n                            key={\"security\"}\n                            value={\"security\"}\n                            trigger={\"Security\"}\n                            content={\"Make changes to your security settings here.\"}\n                        />,\n                        <Tabs.Tab\n                            key={\"development\"}\n                            value={\"development\"}\n                            trigger={\"Development\"}\n                            content={\"Make changes to your development settings here.\"}\n                        />\n                    ]}\n                />\n            </>\n        )\n    }\n};\n\nexport const Documentation: Story = {\n    render: args => {\n        const [open, setOpen] = useState(false);\n\n        return (\n            <>\n                <Button variant=\"primary\" text=\"Open Dialog\" onClick={() => setOpen(true)} />\n\n                <Dialog {...args} open={open} onOpenChange={open => setOpen(open)} />\n            </>\n        );\n    },\n    args: {\n        title: \"Dialog Title\",\n        description: \"A short dialog description.\",\n        showCloseButton: true,\n        dismissible: true,\n        bodyPadding: true,\n        info: (\n            <>\n                Learn more about this <a href={\"#\"}>here</a>.\n            </>\n        ),\n        children: (\n            <>\n                This is the dialog content area. You can place any content here including forms,\n                text, images, or other components.\n            </>\n        ),\n        actions: (\n            <>\n                <Dialog.CancelAction />\n                <Dialog.ConfirmAction />\n            </>\n        )\n    },\n    argTypes: {\n        title: {\n            description: \"Title displayed in the header\",\n            control: \"text\"\n        },\n        description: {\n            description: \"Description displayed below the title\",\n            control: \"text\"\n        },\n        size: {\n            description: \"Controls the size of the dialog\",\n            control: \"select\",\n            options: [\"sm\", \"md\", \"lg\", \"xl\", \"full\"]\n        },\n        showCloseButton: {\n            description:\n                \"Show close button, please refer to the 'Without Close Button' example below for details.\",\n            control: \"boolean\",\n            defaultValue: true\n        },\n        dismissible: {\n            description:\n                \"Allow dialog to be dismissed by clicking outside or pressing Escape, please refer to the 'Prevent Outside Dismiss' example below for details.\",\n            control: \"boolean\",\n            defaultValue: true\n        },\n        bodyPadding: {\n            description: \"Add padding to the Dialog body.\",\n            control: \"boolean\",\n            defaultValue: true\n        },\n        info: {\n            description:\n                \"Additional info displayed below the description, please refer to the example below for details.\"\n        },\n        children: {\n            description:\n                \"Content of the dialog, please refer to the 'With Dropdown Menu' and ''With Tabs' example below for details.\"\n        },\n        actions: {\n            description:\n                \"Actions displayed in the footer, please refer to the code example for details.\"\n        }\n    }\n};\n"],"names":["library","fas","meta","Dialog","Default","Button","opened","console","SizeSmall","SizeMedium","SizeLarge","SizeExtraLarge","SizeFullScreen","ControlledVisibility","props","open","setOpen","React","WithOpenCloseEventHandler","WithDropdownMenu","DropdownMenu","WithoutCloseButton","AlertDialog","DropdownMenuInDialog","DropdownIconPickerInDialog","args","value","setValue","useState","IconPicker","WithIcon","NotificationIcon","PreventOutsideDismiss","WithTabs","Tabs","Documentation"],"mappings":"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"}

package/DragCursor/DragCursor.d.ts

@@ -0,0 +1,7 @@
+import React from "react";
+export interface DragCursorProps {
+    label: string;
+    icon?: React.ReactNode;
+    isOverSlot?: boolean;
+}
+export declare const DragCursor: ({ label, icon, isOverSlot }: DragCursorProps) => React.JSX.Element;

package/DragCursor/DragCursor.js

@@ -0,0 +1,21 @@
+import react from "react";
+import { Icon } from "../Icon/index.js";
+const DragCursor = ({ label, icon, isOverSlot = false })=>{
+    const containerClass = isOverSlot ? "flex items-center gap-xs px-sm rounded-md border-2 border-accent-default bg-primary-subtle shadow-lg" : "flex items-center gap-xs px-sm rounded-md border-2 border-dotted border-accent-default bg-neutral-subtle shadow-lg";
+    return /*#__PURE__*/ react.createElement("div", {
+        className: containerClass,
+        style: {
+            height: 28
+        }
+    }, icon && /*#__PURE__*/ react.createElement(Icon, {
+        icon: icon,
+        label: label,
+        color: "neutral-strong",
+        size: "sm"
+    }), /*#__PURE__*/ react.createElement("span", {
+        className: "text-sm font-medium whitespace-nowrap text-neutral-primary"
+    }, label));
+};
+export { DragCursor };
+
+//# sourceMappingURL=DragCursor.js.map

package/DragCursor/DragCursor.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DragCursor/DragCursor.js","sources":["../../src/DragCursor/DragCursor.tsx"],"sourcesContent":["import React from \"react\";\nimport { Icon } from \"~/Icon/index.js\";\n\nexport interface DragCursorProps {\n    label: string;\n    icon?: React.ReactNode;\n    isOverSlot?: boolean;\n}\n\nexport const DragCursor = ({ label, icon, isOverSlot = false }: DragCursorProps) => {\n    const containerClass = isOverSlot\n        ? \"flex items-center gap-xs px-sm rounded-md border-2 border-accent-default bg-primary-subtle shadow-lg\"\n        : \"flex items-center gap-xs px-sm rounded-md border-2 border-dotted border-accent-default bg-neutral-subtle shadow-lg\";\n\n    return (\n        <div className={containerClass} style={{ height: 28 }}>\n            {icon && <Icon icon={icon} label={label} color={\"neutral-strong\"} size={\"sm\"} />}\n            <span className={\"text-sm font-medium whitespace-nowrap text-neutral-primary\"}>\n                {label}\n            </span>\n        </div>\n    );\n};\n"],"names":["DragCursor","label","icon","isOverSlot","containerClass","Icon"],"mappings":";;AASO,MAAMA,aAAa,CAAC,EAAEC,KAAK,EAAEC,IAAI,EAAEC,aAAa,KAAK,EAAmB;IAC3E,MAAMC,iBAAiBD,aACjB,yGACA;IAEN,OAAO,WAAP,GACI,oBAAC;QAAI,WAAWC;QAAgB,OAAO;YAAE,QAAQ;QAAG;OAC/CF,QAAQ,WAARA,GAAQ,oBAACG,MAAIA;QAAC,MAAMH;QAAM,OAAOD;QAAO,OAAO;QAAkB,MAAM;sBACxE,oBAAC;QAAK,WAAW;OACZA;AAIjB"}

package/DragCursor/DragCursor.stories.d.ts

@@ -0,0 +1,10 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { DragCursor } from "./DragCursor.js";
+declare const meta: Meta<typeof DragCursor>;
+export default meta;
+type Story = StoryObj<typeof DragCursor>;
+export declare const OnDrag: Story;
+export declare const OnSlot: Story;
+export declare const NoIcon: Story;
+export declare const NoIconOnSlot: Story;
+export declare const AllVariants: Story;

package/DragCursor/DragCursor.stories.js

@@ -0,0 +1,97 @@
+import react from "react";
+import { ReactComponent } from "@webiny/icons/text_fields.svg";
+import { ReactComponent as image_svg_ReactComponent } from "@webiny/icons/image.svg";
+import { ReactComponent as smart_button_svg_ReactComponent } from "@webiny/icons/smart_button.svg";
+import { DragCursor } from "./DragCursor.js";
+const meta = {
+    title: "Components/DragCursor",
+    component: DragCursor,
+    parameters: {
+        layout: "padded"
+    },
+    argTypes: {
+        label: {
+            control: "text"
+        },
+        isOverSlot: {
+            control: "boolean"
+        },
+        icon: {
+            control: false
+        }
+    }
+};
+const DragCursor_stories = meta;
+const OnDrag = {
+    args: {
+        label: "Header",
+        icon: /*#__PURE__*/ react.createElement(ReactComponent, null),
+        isOverSlot: false
+    }
+};
+const OnSlot = {
+    args: {
+        ...OnDrag.args,
+        isOverSlot: true
+    }
+};
+const NoIcon = {
+    args: {
+        label: "Header",
+        isOverSlot: false
+    }
+};
+const NoIconOnSlot = {
+    args: {
+        ...NoIcon.args,
+        isOverSlot: true
+    }
+};
+const AllVariants = {
+    args: OnDrag.args,
+    render: ()=>/*#__PURE__*/ react.createElement("div", {
+            className: "flex flex-col gap-md"
+        }, /*#__PURE__*/ react.createElement("div", {
+            className: "flex items-center gap-md"
+        }, /*#__PURE__*/ react.createElement(DragCursor, {
+            label: "Header",
+            icon: /*#__PURE__*/ react.createElement(ReactComponent, null),
+            isOverSlot: false
+        }), /*#__PURE__*/ react.createElement(DragCursor, {
+            label: "Header",
+            icon: /*#__PURE__*/ react.createElement(ReactComponent, null),
+            isOverSlot: true
+        })), /*#__PURE__*/ react.createElement("div", {
+            className: "flex items-center gap-md"
+        }, /*#__PURE__*/ react.createElement(DragCursor, {
+            label: "Image",
+            icon: /*#__PURE__*/ react.createElement(image_svg_ReactComponent, null),
+            isOverSlot: false
+        }), /*#__PURE__*/ react.createElement(DragCursor, {
+            label: "Image",
+            icon: /*#__PURE__*/ react.createElement(image_svg_ReactComponent, null),
+            isOverSlot: true
+        })), /*#__PURE__*/ react.createElement("div", {
+            className: "flex items-center gap-md"
+        }, /*#__PURE__*/ react.createElement(DragCursor, {
+            label: "Button",
+            icon: /*#__PURE__*/ react.createElement(smart_button_svg_ReactComponent, null),
+            isOverSlot: false
+        }), /*#__PURE__*/ react.createElement(DragCursor, {
+            label: "Button",
+            icon: /*#__PURE__*/ react.createElement(smart_button_svg_ReactComponent, null),
+            isOverSlot: true
+        })), /*#__PURE__*/ react.createElement("div", {
+            className: "flex items-center gap-md"
+        }, /*#__PURE__*/ react.createElement(DragCursor, {
+            label: "No icon",
+            isOverSlot: false
+        }), /*#__PURE__*/ react.createElement(DragCursor, {
+            label: "No icon",
+            isOverSlot: true
+        })))
+};
+export default DragCursor_stories;
+export { AllVariants, NoIcon, NoIconOnSlot, OnDrag, OnSlot };
+
+//# sourceMappingURL=DragCursor.stories.js.map

package/DragCursor/DragCursor.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DragCursor/DragCursor.stories.js","sources":["../../src/DragCursor/DragCursor.stories.tsx"],"sourcesContent":["import React from \"react\";\nimport type { Meta, StoryObj } from \"@storybook/react\";\nimport { ReactComponent as TextIcon } from \"@webiny/icons/text_fields.svg\";\nimport { ReactComponent as ImageIcon } from \"@webiny/icons/image.svg\";\nimport { ReactComponent as ButtonIcon } from \"@webiny/icons/smart_button.svg\";\nimport { DragCursor } from \"./DragCursor.js\";\n\nconst meta: Meta<typeof DragCursor> = {\n    title: \"Components/DragCursor\",\n    component: DragCursor,\n    parameters: {\n        layout: \"padded\"\n    },\n    argTypes: {\n        label: { control: \"text\" },\n        isOverSlot: { control: \"boolean\" },\n        icon: { control: false }\n    }\n};\n\nexport default meta;\ntype Story = StoryObj<typeof DragCursor>;\n\nexport const OnDrag: Story = {\n    args: {\n        label: \"Header\",\n        icon: <TextIcon />,\n        isOverSlot: false\n    }\n};\n\nexport const OnSlot: Story = {\n    args: {\n        ...OnDrag.args,\n        isOverSlot: true\n    }\n};\n\nexport const NoIcon: Story = {\n    args: {\n        label: \"Header\",\n        isOverSlot: false\n    }\n};\n\nexport const NoIconOnSlot: Story = {\n    args: {\n        ...NoIcon.args,\n        isOverSlot: true\n    }\n};\n\nexport const AllVariants: Story = {\n    args: OnDrag.args,\n    render: () => (\n        <div className={\"flex flex-col gap-md\"}>\n            <div className={\"flex items-center gap-md\"}>\n                <DragCursor label={\"Header\"} icon={<TextIcon />} isOverSlot={false} />\n                <DragCursor label={\"Header\"} icon={<TextIcon />} isOverSlot={true} />\n            </div>\n            <div className={\"flex items-center gap-md\"}>\n                <DragCursor label={\"Image\"} icon={<ImageIcon />} isOverSlot={false} />\n                <DragCursor label={\"Image\"} icon={<ImageIcon />} isOverSlot={true} />\n            </div>\n            <div className={\"flex items-center gap-md\"}>\n                <DragCursor label={\"Button\"} icon={<ButtonIcon />} isOverSlot={false} />\n                <DragCursor label={\"Button\"} icon={<ButtonIcon />} isOverSlot={true} />\n            </div>\n            <div className={\"flex items-center gap-md\"}>\n                <DragCursor label={\"No icon\"} isOverSlot={false} />\n                <DragCursor label={\"No icon\"} isOverSlot={true} />\n            </div>\n        </div>\n    )\n};\n"],"names":["meta","DragCursor","OnDrag","TextIcon","OnSlot","NoIcon","NoIconOnSlot","AllVariants","ImageIcon","ButtonIcon"],"mappings":";;;;;AAOA,MAAMA,OAAgC;IAClC,OAAO;IACP,WAAWC;IACX,YAAY;QACR,QAAQ;IACZ;IACA,UAAU;QACN,OAAO;YAAE,SAAS;QAAO;QACzB,YAAY;YAAE,SAAS;QAAU;QACjC,MAAM;YAAE,SAAS;QAAM;IAC3B;AACJ;AAEA,2BAAeD;AAGR,MAAME,SAAgB;IACzB,MAAM;QACF,OAAO;QACP,MAAM,WAAN,GAAM,oBAACC,gBAAQA;QACf,YAAY;IAChB;AACJ;AAEO,MAAMC,SAAgB;IACzB,MAAM;QACF,GAAGF,OAAO,IAAI;QACd,YAAY;IAChB;AACJ;AAEO,MAAMG,SAAgB;IACzB,MAAM;QACF,OAAO;QACP,YAAY;IAChB;AACJ;AAEO,MAAMC,eAAsB;IAC/B,MAAM;QACF,GAAGD,OAAO,IAAI;QACd,YAAY;IAChB;AACJ;AAEO,MAAME,cAAqB;IAC9B,MAAML,OAAO,IAAI;IACjB,QAAQ,kBACJ,oBAAC;YAAI,WAAW;yBACZ,oBAAC;YAAI,WAAW;yBACZ,oBAACD,YAAUA;YAAC,OAAO;YAAU,oBAAM,oBAACE,gBAAQA;YAAK,YAAY;0BAC7D,oBAACF,YAAUA;YAAC,OAAO;YAAU,oBAAM,oBAACE,gBAAQA;YAAK,YAAY;2BAEjE,oBAAC;YAAI,WAAW;yBACZ,oBAACF,YAAUA;YAAC,OAAO;YAAS,oBAAM,oBAACO,0BAASA;YAAK,YAAY;0BAC7D,oBAACP,YAAUA;YAAC,OAAO;YAAS,oBAAM,oBAACO,0BAASA;YAAK,YAAY;2BAEjE,oBAAC;YAAI,WAAW;yBACZ,oBAACP,YAAUA;YAAC,OAAO;YAAU,oBAAM,oBAACQ,iCAAUA;YAAK,YAAY;0BAC/D,oBAACR,YAAUA;YAAC,OAAO;YAAU,oBAAM,oBAACQ,iCAAUA;YAAK,YAAY;2BAEnE,oBAAC;YAAI,WAAW;yBACZ,oBAACR,YAAUA;YAAC,OAAO;YAAW,YAAY;0BAC1C,oBAACA,YAAUA;YAAC,OAAO;YAAW,YAAY;;AAI1D"}

package/DragCursor/index.d.ts

@@ -0,0 +1 @@
+export * from "./DragCursor.js";

package/DragCursor/index.js

@@ -0,0 +1 @@
+export * from "./DragCursor.js";

package/Drawer/Drawer.stories.d.ts

@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from "@storybook/react-webpack5";
+import type { Meta, StoryObj } from "@storybook/react";
 import { Drawer } from "./Drawer.js";
 declare const meta: Meta<typeof Drawer>;
 export default meta;