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

package/Tags/primitives/TagsPrimitive.stories.js.map

@@ -1 +1 @@
-{"version":3,"file":"Tags/primitives/TagsPrimitive.stories.js","sources":["../../../src/Tags/primitives/TagsPrimitive.stories.tsx"],"sourcesContent":["import React from \"react\";\nimport type { Meta, StoryObj } from \"@storybook/react-webpack5\";\nimport { ReactComponent as TagIcon } from \"@webiny/icons/tag.svg\";\nimport { TagsPrimitive } from \"./TagsPrimitive.js\";\nimport { Button } from \"~/Button/index.js\";\nimport { Icon } from \"~/Icon/index.js\";\n\nconst meta: Meta<typeof TagsPrimitive> = {\n    title: \"Components/Form Primitives/Tags\",\n    component: TagsPrimitive,\n    argTypes: {\n        onChange: { action: \"onChange\" },\n        onValueInput: { action: \"onValueInput\" },\n        onValueAdd: { action: \"onValueAdd\" },\n        onValueRemove: { action: \"onValueRemove\" },\n        disabled: {\n            control: \"boolean\",\n            defaultValue: false\n        }\n    },\n    parameters: {\n        layout: \"padded\"\n    },\n    render: args => <TagsPrimitive {...args} />\n};\n\nexport default meta;\ntype Story = StoryObj<typeof TagsPrimitive>;\n\nexport const Default: Story = {};\n\nexport const MediumSize: Story = {\n    args: {\n        ...Default.args,\n        size: \"md\"\n    }\n};\n\nexport const LargeSize: Story = {\n    args: {\n        ...Default.args,\n        size: \"lg\"\n    }\n};\n\nexport const ExtraLargeSize: Story = {\n    args: {\n        ...Default.args,\n        size: \"xl\"\n    }\n};\n\nexport const PrimaryVariant: Story = {\n    args: {\n        ...Default.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        placeholder: \"Custom placeholder\"\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        placeholder: \"Custom placeholder\"\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 GhostNegativeVariant: Story = {\n    args: {\n        ...Default.args,\n        variant: \"ghost-negative\",\n        placeholder: \"Custom placeholder\"\n    },\n    decorators: [\n        Story => (\n            <div className=\"bg-neutral-dark text-neutral-light p-xl\">\n                <Story />\n            </div>\n        )\n    ]\n};\n\nexport const GhostNegativeVariantDisabled: Story = {\n    args: {\n        ...GhostNegativeVariant.args,\n        disabled: true\n    },\n    decorators: [\n        Story => (\n            <div className=\"bg-neutral-dark text-neutral-light p-xl\">\n                <Story />\n            </div>\n        )\n    ]\n};\n\nexport const GhostNegativeVariantInvalid: Story = {\n    args: {\n        ...GhostNegativeVariant.args,\n        invalid: true\n    },\n    decorators: [\n        Story => (\n            <div className=\"bg-neutral-dark text-neutral-light p-xl\">\n                <Story />\n            </div>\n        )\n    ]\n};\n\nexport const WithCustomPlaceholder: Story = {\n    args: {\n        ...Default.args,\n        placeholder: \"Custom placeholder\"\n    }\n};\n\nexport const WithStartIcon: Story = {\n    args: {\n        ...Default.args,\n        startIcon: <Icon label={\"Tag\"} icon={<TagIcon />} />\n    }\n};\n\nexport const WithInitialValues: Story = {\n    args: {\n        ...Default.args,\n        value: [\"tag1\", \"tag2\", \"tag3\"]\n    }\n};\n\nexport const WithProtectedValues: Story = {\n    args: {\n        ...Default.args,\n        value: [\"tag1\", \"tag2\", \"tag3\", \"another-tag1\", \"another-tag2\"],\n        protectedValues: [\"tag1\", \"another-tag*\"]\n    }\n};\n\nexport const WithExternalValueControl: Story = {\n    args: {\n        ...Default.args,\n        value: [\"tag1\", \"tag2\", \"tag3\"]\n    },\n    render: args => {\n        const [value, setValue] = React.useState<string[]>(args.value || []);\n\n        return (\n            <div className={\"w-full\"}>\n                <TagsPrimitive {...args} value={value} onChange={setValue} />\n                <div className={\"mt-4 text-center\"}>\n                    <Button text={\"Reset\"} onClick={() => setValue(args.value || [])} />\n                </div>\n                <div className={\"mt-4 text-center\"}>\n                    Current selected values: {value?.join(\",\")}\n                </div>\n            </div>\n        );\n    }\n};\n"],"names":["meta","TagsPrimitive","args","Default","MediumSize","LargeSize","ExtraLargeSize","PrimaryVariant","PrimaryVariantDisabled","PrimaryVariantInvalid","SecondaryVariant","SecondaryVariantDisabled","SecondaryVariantInvalid","GhostVariant","GhostVariantDisabled","GhostVariantInvalid","GhostNegativeVariant","Story","GhostNegativeVariantDisabled","GhostNegativeVariantInvalid","WithCustomPlaceholder","WithStartIcon","Icon","TagIcon","WithInitialValues","WithProtectedValues","WithExternalValueControl","value","setValue","React","Button"],"mappings":"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"}
+{"version":3,"file":"Tags/primitives/TagsPrimitive.stories.js","sources":["../../../src/Tags/primitives/TagsPrimitive.stories.tsx"],"sourcesContent":["import React from \"react\";\nimport type { Meta, StoryObj } from \"@storybook/react\";\nimport { ReactComponent as TagIcon } from \"@webiny/icons/tag.svg\";\nimport { TagsPrimitive } from \"./TagsPrimitive.js\";\nimport { Button } from \"~/Button/index.js\";\nimport { Icon } from \"~/Icon/index.js\";\n\nconst meta: Meta<typeof TagsPrimitive> = {\n    title: \"Components/Form Primitives/Tags\",\n    component: TagsPrimitive,\n    argTypes: {\n        onChange: { action: \"onChange\" },\n        onValueInput: { action: \"onValueInput\" },\n        onValueAdd: { action: \"onValueAdd\" },\n        onValueRemove: { action: \"onValueRemove\" },\n        disabled: {\n            control: \"boolean\",\n            defaultValue: false\n        }\n    },\n    parameters: {\n        layout: \"padded\"\n    },\n    render: args => <TagsPrimitive {...args} />\n};\n\nexport default meta;\ntype Story = StoryObj<typeof TagsPrimitive>;\n\nexport const Default: Story = {};\n\nexport const MediumSize: Story = {\n    args: {\n        ...Default.args,\n        size: \"md\"\n    }\n};\n\nexport const LargeSize: Story = {\n    args: {\n        ...Default.args,\n        size: \"lg\"\n    }\n};\n\nexport const ExtraLargeSize: Story = {\n    args: {\n        ...Default.args,\n        size: \"xl\"\n    }\n};\n\nexport const PrimaryVariant: Story = {\n    args: {\n        ...Default.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        placeholder: \"Custom placeholder\"\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        placeholder: \"Custom placeholder\"\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 GhostNegativeVariant: Story = {\n    args: {\n        ...Default.args,\n        variant: \"ghost-negative\",\n        placeholder: \"Custom placeholder\"\n    },\n    decorators: [\n        Story => (\n            <div className=\"bg-neutral-dark text-neutral-light p-xl\">\n                <Story />\n            </div>\n        )\n    ]\n};\n\nexport const GhostNegativeVariantDisabled: Story = {\n    args: {\n        ...GhostNegativeVariant.args,\n        disabled: true\n    },\n    decorators: [\n        Story => (\n            <div className=\"bg-neutral-dark text-neutral-light p-xl\">\n                <Story />\n            </div>\n        )\n    ]\n};\n\nexport const GhostNegativeVariantInvalid: Story = {\n    args: {\n        ...GhostNegativeVariant.args,\n        invalid: true\n    },\n    decorators: [\n        Story => (\n            <div className=\"bg-neutral-dark text-neutral-light p-xl\">\n                <Story />\n            </div>\n        )\n    ]\n};\n\nexport const WithCustomPlaceholder: Story = {\n    args: {\n        ...Default.args,\n        placeholder: \"Custom placeholder\"\n    }\n};\n\nexport const WithStartIcon: Story = {\n    args: {\n        ...Default.args,\n        startIcon: <Icon label={\"Tag\"} icon={<TagIcon />} />\n    }\n};\n\nexport const WithInitialValues: Story = {\n    args: {\n        ...Default.args,\n        value: [\"tag1\", \"tag2\", \"tag3\"]\n    }\n};\n\nexport const WithProtectedValues: Story = {\n    args: {\n        ...Default.args,\n        value: [\"tag1\", \"tag2\", \"tag3\", \"another-tag1\", \"another-tag2\"],\n        protectedValues: [\"tag1\", \"another-tag*\"]\n    }\n};\n\nexport const WithExternalValueControl: Story = {\n    args: {\n        ...Default.args,\n        value: [\"tag1\", \"tag2\", \"tag3\"]\n    },\n    render: args => {\n        const [value, setValue] = React.useState<string[]>(args.value || []);\n\n        return (\n            <div className={\"w-full\"}>\n                <TagsPrimitive {...args} value={value} onChange={setValue} />\n                <div className={\"mt-4 text-center\"}>\n                    <Button text={\"Reset\"} onClick={() => setValue(args.value || [])} />\n                </div>\n                <div className={\"mt-4 text-center\"}>\n                    Current selected values: {value?.join(\",\")}\n                </div>\n            </div>\n        );\n    }\n};\n"],"names":["meta","TagsPrimitive","args","Default","MediumSize","LargeSize","ExtraLargeSize","PrimaryVariant","PrimaryVariantDisabled","PrimaryVariantInvalid","SecondaryVariant","SecondaryVariantDisabled","SecondaryVariantInvalid","GhostVariant","GhostVariantDisabled","GhostVariantInvalid","GhostNegativeVariant","Story","GhostNegativeVariantDisabled","GhostNegativeVariantInvalid","WithCustomPlaceholder","WithStartIcon","Icon","TagIcon","WithInitialValues","WithProtectedValues","WithExternalValueControl","value","setValue","React","Button"],"mappings":"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"}

package/Text/Text.stories.d.ts

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

package/Text/Text.stories.js.map

@@ -1 +1 @@
-{"version":3,"file":"Text/Text.stories.js","sources":["../../src/Text/Text.stories.tsx"],"sourcesContent":["import type { Meta, StoryObj } from \"@storybook/react-webpack5\";\n\nimport { Text } from \"./Text.js\";\n\nconst meta: Meta<typeof Text> = {\n    title: \"Components/Text\",\n    component: Text,\n    argTypes: {\n        size: { control: \"select\", options: [\"sm\", \"md\", \"lg\", \"xl\"] }\n    }\n};\n\nexport default meta;\ntype Story = StoryObj<typeof Text>;\n\nexport const TextXl: Story = {\n    args: {\n        size: \"xl\",\n        children:\n            \"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce tempus tortor eu sapien interdum rhoncus.\"\n    }\n};\n\nexport const TextLg: Story = {\n    args: {\n        size: \"lg\",\n        children:\n            \"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce tempus tortor eu sapien interdum rhoncus.\"\n    }\n};\n\nexport const TextMd: Story = {\n    args: {\n        size: \"md\",\n        children:\n            \"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce tempus tortor eu sapien interdum rhoncus.\"\n    }\n};\n\nexport const TextSm: Story = {\n    args: {\n        size: \"sm\",\n        children:\n            \"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce tempus tortor eu sapien interdum rhoncus.\"\n    }\n};\n\nexport const Documentation: Story = {\n    args: {\n        size: \"md\",\n        children: \"Text component example\"\n    },\n    argTypes: {\n        size: {\n            description: \"The size of the text\",\n            control: \"select\",\n            options: [\"sm\", \"md\", \"lg\", \"xl\"]\n        },\n        children: {\n            description: \"The content of the text\",\n            control: \"text\"\n        }\n    }\n};\n"],"names":["meta","Text","TextXl","TextLg","TextMd","TextSm","Documentation"],"mappings":";AAIA,MAAMA,OAA0B;IAC5B,OAAO;IACP,WAAWC;IACX,UAAU;QACN,MAAM;YAAE,SAAS;YAAU,SAAS;gBAAC;gBAAM;gBAAM;gBAAM;aAAK;QAAC;IACjE;AACJ;AAEA,qBAAeD;AAGR,MAAME,SAAgB;IACzB,MAAM;QACF,MAAM;QACN,UACI;IACR;AACJ;AAEO,MAAMC,SAAgB;IACzB,MAAM;QACF,MAAM;QACN,UACI;IACR;AACJ;AAEO,MAAMC,SAAgB;IACzB,MAAM;QACF,MAAM;QACN,UACI;IACR;AACJ;AAEO,MAAMC,SAAgB;IACzB,MAAM;QACF,MAAM;QACN,UACI;IACR;AACJ;AAEO,MAAMC,gBAAuB;IAChC,MAAM;QACF,MAAM;QACN,UAAU;IACd;IACA,UAAU;QACN,MAAM;YACF,aAAa;YACb,SAAS;YACT,SAAS;gBAAC;gBAAM;gBAAM;gBAAM;aAAK;QACrC;QACA,UAAU;YACN,aAAa;YACb,SAAS;QACb;IACJ;AACJ"}
+{"version":3,"file":"Text/Text.stories.js","sources":["../../src/Text/Text.stories.tsx"],"sourcesContent":["import type { Meta, StoryObj } from \"@storybook/react\";\n\nimport { Text } from \"./Text.js\";\n\nconst meta: Meta<typeof Text> = {\n    title: \"Components/Text\",\n    component: Text,\n    argTypes: {\n        size: { control: \"select\", options: [\"sm\", \"md\", \"lg\", \"xl\"] }\n    }\n};\n\nexport default meta;\ntype Story = StoryObj<typeof Text>;\n\nexport const TextXl: Story = {\n    args: {\n        size: \"xl\",\n        children:\n            \"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce tempus tortor eu sapien interdum rhoncus.\"\n    }\n};\n\nexport const TextLg: Story = {\n    args: {\n        size: \"lg\",\n        children:\n            \"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce tempus tortor eu sapien interdum rhoncus.\"\n    }\n};\n\nexport const TextMd: Story = {\n    args: {\n        size: \"md\",\n        children:\n            \"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce tempus tortor eu sapien interdum rhoncus.\"\n    }\n};\n\nexport const TextSm: Story = {\n    args: {\n        size: \"sm\",\n        children:\n            \"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce tempus tortor eu sapien interdum rhoncus.\"\n    }\n};\n\nexport const Documentation: Story = {\n    args: {\n        size: \"md\",\n        children: \"Text component example\"\n    },\n    argTypes: {\n        size: {\n            description: \"The size of the text\",\n            control: \"select\",\n            options: [\"sm\", \"md\", \"lg\", \"xl\"]\n        },\n        children: {\n            description: \"The content of the text\",\n            control: \"text\"\n        }\n    }\n};\n"],"names":["meta","Text","TextXl","TextLg","TextMd","TextSm","Documentation"],"mappings":";AAIA,MAAMA,OAA0B;IAC5B,OAAO;IACP,WAAWC;IACX,UAAU;QACN,MAAM;YAAE,SAAS;YAAU,SAAS;gBAAC;gBAAM;gBAAM;gBAAM;aAAK;QAAC;IACjE;AACJ;AAEA,qBAAeD;AAGR,MAAME,SAAgB;IACzB,MAAM;QACF,MAAM;QACN,UACI;IACR;AACJ;AAEO,MAAMC,SAAgB;IACzB,MAAM;QACF,MAAM;QACN,UACI;IACR;AACJ;AAEO,MAAMC,SAAgB;IACzB,MAAM;QACF,MAAM;QACN,UACI;IACR;AACJ;AAEO,MAAMC,SAAgB;IACzB,MAAM;QACF,MAAM;QACN,UACI;IACR;AACJ;AAEO,MAAMC,gBAAuB;IAChC,MAAM;QACF,MAAM;QACN,UAAU;IACd;IACA,UAAU;QACN,MAAM;YACF,aAAa;YACb,SAAS;YACT,SAAS;gBAAC;gBAAM;gBAAM;gBAAM;aAAK;QACrC;QACA,UAAU;YACN,aAAa;YACb,SAAS;QACb;IACJ;AACJ"}

package/Textarea/Textarea.stories.d.ts

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

package/Textarea/Textarea.stories.js.map

@@ -1 +1 @@
-{"version":3,"file":"Textarea/Textarea.stories.js","sources":["../../src/Textarea/Textarea.stories.tsx"],"sourcesContent":["import React, { useState } from \"react\";\nimport type { Meta, StoryObj } from \"@storybook/react-webpack5\";\nimport { Textarea } from \"~/Textarea/index.js\";\n\nconst meta: Meta<typeof Textarea> = {\n    title: \"Components/Form/Textarea\",\n    component: Textarea,\n    argTypes: {\n        onChange: { action: \"onChange\" },\n        disabled: {\n            control: \"boolean\",\n            defaultValue: false\n        }\n    },\n    parameters: {\n        layout: \"padded\"\n    }\n};\n\nexport default meta;\ntype Story = StoryObj<typeof Textarea>;\n\nexport const Documentation: Story = {\n    render: args => {\n        const [value, setValue] = useState(\"\");\n\n        return <Textarea {...args} value={value} onChange={newValue => setValue(newValue)} />;\n    },\n    args: {\n        label: \"Message\",\n        description: \"Enter your feedback or message\",\n        note: \"Please be specific and provide relevant details\",\n        placeholder: \"Type your message here...\",\n        required: true,\n        disabled: false,\n        onChange: undefined,\n        validation: {\n            isValid: true,\n            message: \"\"\n        },\n        value: \"\",\n        validate: undefined\n    },\n    argTypes: {\n        size: {\n            description: \"Textarea field size\",\n            control: \"select\",\n            options: [\"md\", \"lg\", \"xl\"],\n            defaultValue: \"lg\"\n        },\n        variant: {\n            description: \"Textarea field style variant\",\n            control: \"select\",\n            options: [\"primary\", \"secondary\", \"ghost\", \"ghost-negative\"],\n            defaultValue: \"primary\"\n        },\n        label: {\n            description: \"Label text for the textarea\",\n            control: \"text\"\n        },\n        description: {\n            description: \"Additional description text below the textarea\",\n            control: \"text\"\n        },\n        note: {\n            description: \"Additional note text below the textarea\",\n            control: \"text\"\n        },\n        placeholder: {\n            description: \"Placeholder text shown when the textarea is empty\",\n            control: \"text\"\n        },\n        required: {\n            description: \"Makes the textarea required when set to true\",\n            control: \"boolean\"\n        },\n        disabled: {\n            description: \"Disables the textarea when set to true\",\n            control: \"boolean\"\n        },\n        validation: {\n            description: \"Object containing validation state and message\",\n            control: \"object\"\n        },\n        value: {\n            description: \"The current value of the textarea\",\n            control: \"text\"\n        },\n        onChange: {\n            description: \"Function called when the textarea value changes\"\n        },\n        validate: {\n            description:\n                \"Custom validation function, please refer to **With Validate Function** section below.\"\n        }\n    }\n};\n\nexport const Default: Story = {};\n\nexport const WithLabel: Story = {\n    args: {\n        label: \"Message\"\n    }\n};\n\nexport const WithLabelRequired: Story = {\n    args: {\n        ...Default.args,\n        label: \"Message\",\n        required: true\n    }\n};\n\nexport const WithDescription: Story = {\n    args: {\n        ...Default.args,\n        description: \"Enter your feedback or message in detail\"\n    }\n};\n\nexport const WithNotes: Story = {\n    args: {\n        ...Default.args,\n        note: \"All messages are reviewed within 24 hours\"\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: \"Message\",\n        disabled: true\n    }\n};\n\nexport const WithValidateFunction: Story = {\n    render: args => {\n        const [value, setValue] = useState(\"\");\n        const [validation, setValidation] = useState({ isValid: true, message: \"\" });\n\n        const validate = async () => {\n            if (!value.trim()) {\n                setValidation({ isValid: false, message: \"This field is required\" });\n            } else if (value.length < 10) {\n                setValidation({\n                    isValid: false,\n                    message: \"Message must be at least 10 characters long\"\n                });\n            } else {\n                setValidation({ isValid: true, message: \"\" });\n            }\n        };\n\n        return (\n            <Textarea\n                {...args}\n                value={value}\n                onChange={newValue => setValue(newValue)}\n                validate={validate}\n                validation={validation}\n            />\n        );\n    },\n    args: {\n        ...Default.args,\n        label: \"Message\",\n        required: true,\n        description: \"Enter a message (minimum 10 characters)\"\n    }\n};\n\nexport const FullExample: Story = {\n    args: {\n        ...Default.args,\n        label: \"Message\",\n        required: true,\n        description: \"Provide the required information for processing your request.\",\n        note: \"Note: Ensure your message is accurate before proceeding.\",\n        validation: {\n            isValid: false,\n            message: \"This field is required.\"\n        }\n    }\n};\n"],"names":["meta","Textarea","Documentation","args","value","setValue","useState","newValue","undefined","Default","WithLabel","WithLabelRequired","WithDescription","WithNotes","WithErrors","Disabled","WithValidateFunction","validation","setValidation","validate","FullExample"],"mappings":"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"}
+{"version":3,"file":"Textarea/Textarea.stories.js","sources":["../../src/Textarea/Textarea.stories.tsx"],"sourcesContent":["import React, { useState } from \"react\";\nimport type { Meta, StoryObj } from \"@storybook/react\";\nimport { Textarea } from \"~/Textarea/index.js\";\n\nconst meta: Meta<typeof Textarea> = {\n    title: \"Components/Form/Textarea\",\n    component: Textarea,\n    argTypes: {\n        onChange: { action: \"onChange\" },\n        disabled: {\n            control: \"boolean\",\n            defaultValue: false\n        }\n    },\n    parameters: {\n        layout: \"padded\"\n    }\n};\n\nexport default meta;\ntype Story = StoryObj<typeof Textarea>;\n\nexport const Documentation: Story = {\n    render: args => {\n        const [value, setValue] = useState(\"\");\n\n        return <Textarea {...args} value={value} onChange={newValue => setValue(newValue)} />;\n    },\n    args: {\n        label: \"Message\",\n        description: \"Enter your feedback or message\",\n        note: \"Please be specific and provide relevant details\",\n        placeholder: \"Type your message here...\",\n        required: true,\n        disabled: false,\n        onChange: undefined,\n        validation: {\n            isValid: true,\n            message: \"\"\n        },\n        value: \"\",\n        validate: undefined\n    },\n    argTypes: {\n        size: {\n            description: \"Textarea field size\",\n            control: \"select\",\n            options: [\"md\", \"lg\", \"xl\"],\n            defaultValue: \"lg\"\n        },\n        variant: {\n            description: \"Textarea field style variant\",\n            control: \"select\",\n            options: [\"primary\", \"secondary\", \"ghost\", \"ghost-negative\"],\n            defaultValue: \"primary\"\n        },\n        label: {\n            description: \"Label text for the textarea\",\n            control: \"text\"\n        },\n        description: {\n            description: \"Additional description text below the textarea\",\n            control: \"text\"\n        },\n        note: {\n            description: \"Additional note text below the textarea\",\n            control: \"text\"\n        },\n        placeholder: {\n            description: \"Placeholder text shown when the textarea is empty\",\n            control: \"text\"\n        },\n        required: {\n            description: \"Makes the textarea required when set to true\",\n            control: \"boolean\"\n        },\n        disabled: {\n            description: \"Disables the textarea when set to true\",\n            control: \"boolean\"\n        },\n        validation: {\n            description: \"Object containing validation state and message\",\n            control: \"object\"\n        },\n        value: {\n            description: \"The current value of the textarea\",\n            control: \"text\"\n        },\n        onChange: {\n            description: \"Function called when the textarea value changes\"\n        },\n        validate: {\n            description:\n                \"Custom validation function, please refer to **With Validate Function** section below.\"\n        }\n    }\n};\n\nexport const Default: Story = {};\n\nexport const WithLabel: Story = {\n    args: {\n        label: \"Message\"\n    }\n};\n\nexport const WithLabelRequired: Story = {\n    args: {\n        ...Default.args,\n        label: \"Message\",\n        required: true\n    }\n};\n\nexport const WithDescription: Story = {\n    args: {\n        ...Default.args,\n        description: \"Enter your feedback or message in detail\"\n    }\n};\n\nexport const WithNotes: Story = {\n    args: {\n        ...Default.args,\n        note: \"All messages are reviewed within 24 hours\"\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: \"Message\",\n        disabled: true\n    }\n};\n\nexport const WithValidateFunction: Story = {\n    render: args => {\n        const [value, setValue] = useState(\"\");\n        const [validation, setValidation] = useState({ isValid: true, message: \"\" });\n\n        const validate = async () => {\n            if (!value.trim()) {\n                setValidation({ isValid: false, message: \"This field is required\" });\n            } else if (value.length < 10) {\n                setValidation({\n                    isValid: false,\n                    message: \"Message must be at least 10 characters long\"\n                });\n            } else {\n                setValidation({ isValid: true, message: \"\" });\n            }\n        };\n\n        return (\n            <Textarea\n                {...args}\n                value={value}\n                onChange={newValue => setValue(newValue)}\n                validate={validate}\n                validation={validation}\n            />\n        );\n    },\n    args: {\n        ...Default.args,\n        label: \"Message\",\n        required: true,\n        description: \"Enter a message (minimum 10 characters)\"\n    }\n};\n\nexport const FullExample: Story = {\n    args: {\n        ...Default.args,\n        label: \"Message\",\n        required: true,\n        description: \"Provide the required information for processing your request.\",\n        note: \"Note: Ensure your message is accurate before proceeding.\",\n        validation: {\n            isValid: false,\n            message: \"This field is required.\"\n        }\n    }\n};\n"],"names":["meta","Textarea","Documentation","args","value","setValue","useState","newValue","undefined","Default","WithLabel","WithLabelRequired","WithDescription","WithNotes","WithErrors","Disabled","WithValidateFunction","validation","setValidation","validate","FullExample"],"mappings":"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"}

package/Textarea/TextareaPrimitive.stories.d.ts

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

package/Textarea/TextareaPrimitive.stories.js.map

@@ -1 +1 @@
-{"version":3,"file":"Textarea/TextareaPrimitive.stories.js","sources":["../../src/Textarea/TextareaPrimitive.stories.tsx"],"sourcesContent":["import React from \"react\";\nimport type { Meta, StoryObj } from \"@storybook/react-webpack5\";\nimport { TextareaPrimitive } from \"./TextareaPrimitive.js\";\n\nconst meta: Meta<typeof TextareaPrimitive> = {\n    title: \"Components/Form Primitives/Textarea\",\n    component: TextareaPrimitive,\n    argTypes: {\n        onChange: { action: \"onChange\" },\n        onEnter: { action: \"onEnter\" },\n        onKeyDown: { action: \"onKeyDown\" },\n        rows: {\n            control: {\n                type: \"number\"\n            }\n        }\n    },\n    parameters: {\n        layout: \"padded\"\n    }\n};\n\nexport default meta;\ntype Story = StoryObj<typeof TextareaPrimitive>;\n\nexport const Default: Story = {};\n\nexport const MediumSize: Story = {\n    args: {\n        placeholder: \"Custom placeholder\",\n        size: \"md\"\n    }\n};\n\nexport const LargeSize: Story = {\n    args: {\n        placeholder: \"Custom placeholder\",\n        size: \"lg\"\n    }\n};\n\nexport const ExtraLargeSize: Story = {\n    args: {\n        placeholder: \"Custom placeholder\",\n        size: \"xl\"\n    }\n};\n\nexport const PrimaryVariant: Story = {\n    args: {\n        variant: \"primary\",\n        placeholder: \"Custom placeholder\"\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        placeholder: \"Custom placeholder\"\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        placeholder: \"Custom placeholder\"\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 GhostNegativeVariant: Story = {\n    args: {\n        variant: \"ghost-negative\",\n        placeholder: \"Custom placeholder\"\n    },\n    decorators: [\n        Story => (\n            <div className=\"bg-neutral-dark p-xl\">\n                <Story />\n            </div>\n        )\n    ]\n};\n\nexport const GhostNegativeVariantDisabled: Story = {\n    args: {\n        ...GhostNegativeVariant.args,\n        disabled: true\n    },\n    decorators: [\n        Story => (\n            <div className=\"bg-neutral-dark p-xl\">\n                <Story />\n            </div>\n        )\n    ]\n};\n\nexport const GhostNegativeVariantInvalid: Story = {\n    args: {\n        ...GhostNegativeVariant.args,\n        invalid: true\n    },\n    decorators: [\n        Story => (\n            <div className=\"bg-neutral-dark p-xl\">\n                <Story />\n            </div>\n        )\n    ]\n};\n\nexport const WithForwardEventOnChange: Story = {\n    args: {\n        ...Default.args,\n        forwardEventOnChange: true\n    }\n};\n"],"names":["meta","TextareaPrimitive","Default","MediumSize","LargeSize","ExtraLargeSize","PrimaryVariant","PrimaryVariantDisabled","PrimaryVariantInvalid","SecondaryVariant","SecondaryVariantDisabled","SecondaryVariantInvalid","GhostVariant","GhostVariantDisabled","GhostVariantInvalid","GhostNegativeVariant","Story","GhostNegativeVariantDisabled","GhostNegativeVariantInvalid","WithForwardEventOnChange"],"mappings":";;AAIA,MAAMA,OAAuC;IACzC,OAAO;IACP,WAAWC;IACX,UAAU;QACN,UAAU;YAAE,QAAQ;QAAW;QAC/B,SAAS;YAAE,QAAQ;QAAU;QAC7B,WAAW;YAAE,QAAQ;QAAY;QACjC,MAAM;YACF,SAAS;gBACL,MAAM;YACV;QACJ;IACJ;IACA,YAAY;QACR,QAAQ;IACZ;AACJ;AAEA,kCAAeD;AAGR,MAAME,UAAiB,CAAC;AAExB,MAAMC,aAAoB;IAC7B,MAAM;QACF,aAAa;QACb,MAAM;IACV;AACJ;AAEO,MAAMC,YAAmB;IAC5B,MAAM;QACF,aAAa;QACb,MAAM;IACV;AACJ;AAEO,MAAMC,iBAAwB;IACjC,MAAM;QACF,aAAa;QACb,MAAM;IACV;AACJ;AAEO,MAAMC,iBAAwB;IACjC,MAAM;QACF,SAAS;QACT,aAAa;IACjB;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;QACT,aAAa;IACjB;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;QACT,aAAa;IACjB;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,uBAA8B;IACvC,MAAM;QACF,SAAS;QACT,aAAa;IACjB;IACA,YAAY;QACRC,CAAAA,QAAAA,WAAAA,GACI,oBAAC;gBAAI,WAAU;6BACX,oBAACA,OAAAA;KAGZ;AACL;AAEO,MAAMC,+BAAsC;IAC/C,MAAM;QACF,GAAGF,qBAAqB,IAAI;QAC5B,UAAU;IACd;IACA,YAAY;QACRC,CAAAA,QAAAA,WAAAA,GACI,oBAAC;gBAAI,WAAU;6BACX,oBAACA,OAAAA;KAGZ;AACL;AAEO,MAAME,8BAAqC;IAC9C,MAAM;QACF,GAAGH,qBAAqB,IAAI;QAC5B,SAAS;IACb;IACA,YAAY;QACRC,CAAAA,QAAAA,WAAAA,GACI,oBAAC;gBAAI,WAAU;6BACX,oBAACA,OAAAA;KAGZ;AACL;AAEO,MAAMG,2BAAkC;IAC3C,MAAM;QACF,GAAGjB,QAAQ,IAAI;QACf,sBAAsB;IAC1B;AACJ"}
+{"version":3,"file":"Textarea/TextareaPrimitive.stories.js","sources":["../../src/Textarea/TextareaPrimitive.stories.tsx"],"sourcesContent":["import React from \"react\";\nimport type { Meta, StoryObj } from \"@storybook/react\";\nimport { TextareaPrimitive } from \"./TextareaPrimitive.js\";\n\nconst meta: Meta<typeof TextareaPrimitive> = {\n    title: \"Components/Form Primitives/Textarea\",\n    component: TextareaPrimitive,\n    argTypes: {\n        onChange: { action: \"onChange\" },\n        onEnter: { action: \"onEnter\" },\n        onKeyDown: { action: \"onKeyDown\" },\n        rows: {\n            control: {\n                type: \"number\"\n            }\n        }\n    },\n    parameters: {\n        layout: \"padded\"\n    }\n};\n\nexport default meta;\ntype Story = StoryObj<typeof TextareaPrimitive>;\n\nexport const Default: Story = {};\n\nexport const MediumSize: Story = {\n    args: {\n        placeholder: \"Custom placeholder\",\n        size: \"md\"\n    }\n};\n\nexport const LargeSize: Story = {\n    args: {\n        placeholder: \"Custom placeholder\",\n        size: \"lg\"\n    }\n};\n\nexport const ExtraLargeSize: Story = {\n    args: {\n        placeholder: \"Custom placeholder\",\n        size: \"xl\"\n    }\n};\n\nexport const PrimaryVariant: Story = {\n    args: {\n        variant: \"primary\",\n        placeholder: \"Custom placeholder\"\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        placeholder: \"Custom placeholder\"\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        placeholder: \"Custom placeholder\"\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 GhostNegativeVariant: Story = {\n    args: {\n        variant: \"ghost-negative\",\n        placeholder: \"Custom placeholder\"\n    },\n    decorators: [\n        Story => (\n            <div className=\"bg-neutral-dark p-xl\">\n                <Story />\n            </div>\n        )\n    ]\n};\n\nexport const GhostNegativeVariantDisabled: Story = {\n    args: {\n        ...GhostNegativeVariant.args,\n        disabled: true\n    },\n    decorators: [\n        Story => (\n            <div className=\"bg-neutral-dark p-xl\">\n                <Story />\n            </div>\n        )\n    ]\n};\n\nexport const GhostNegativeVariantInvalid: Story = {\n    args: {\n        ...GhostNegativeVariant.args,\n        invalid: true\n    },\n    decorators: [\n        Story => (\n            <div className=\"bg-neutral-dark p-xl\">\n                <Story />\n            </div>\n        )\n    ]\n};\n\nexport const WithForwardEventOnChange: Story = {\n    args: {\n        ...Default.args,\n        forwardEventOnChange: true\n    }\n};\n"],"names":["meta","TextareaPrimitive","Default","MediumSize","LargeSize","ExtraLargeSize","PrimaryVariant","PrimaryVariantDisabled","PrimaryVariantInvalid","SecondaryVariant","SecondaryVariantDisabled","SecondaryVariantInvalid","GhostVariant","GhostVariantDisabled","GhostVariantInvalid","GhostNegativeVariant","Story","GhostNegativeVariantDisabled","GhostNegativeVariantInvalid","WithForwardEventOnChange"],"mappings":";;AAIA,MAAMA,OAAuC;IACzC,OAAO;IACP,WAAWC;IACX,UAAU;QACN,UAAU;YAAE,QAAQ;QAAW;QAC/B,SAAS;YAAE,QAAQ;QAAU;QAC7B,WAAW;YAAE,QAAQ;QAAY;QACjC,MAAM;YACF,SAAS;gBACL,MAAM;YACV;QACJ;IACJ;IACA,YAAY;QACR,QAAQ;IACZ;AACJ;AAEA,kCAAeD;AAGR,MAAME,UAAiB,CAAC;AAExB,MAAMC,aAAoB;IAC7B,MAAM;QACF,aAAa;QACb,MAAM;IACV;AACJ;AAEO,MAAMC,YAAmB;IAC5B,MAAM;QACF,aAAa;QACb,MAAM;IACV;AACJ;AAEO,MAAMC,iBAAwB;IACjC,MAAM;QACF,aAAa;QACb,MAAM;IACV;AACJ;AAEO,MAAMC,iBAAwB;IACjC,MAAM;QACF,SAAS;QACT,aAAa;IACjB;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;QACT,aAAa;IACjB;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;QACT,aAAa;IACjB;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,uBAA8B;IACvC,MAAM;QACF,SAAS;QACT,aAAa;IACjB;IACA,YAAY;QACRC,CAAAA,QAAAA,WAAAA,GACI,oBAAC;gBAAI,WAAU;6BACX,oBAACA,OAAAA;KAGZ;AACL;AAEO,MAAMC,+BAAsC;IAC/C,MAAM;QACF,GAAGF,qBAAqB,IAAI;QAC5B,UAAU;IACd;IACA,YAAY;QACRC,CAAAA,QAAAA,WAAAA,GACI,oBAAC;gBAAI,WAAU;6BACX,oBAACA,OAAAA;KAGZ;AACL;AAEO,MAAME,8BAAqC;IAC9C,MAAM;QACF,GAAGH,qBAAqB,IAAI;QAC5B,SAAS;IACb;IACA,YAAY;QACRC,CAAAA,QAAAA,WAAAA,GACI,oBAAC;gBAAI,WAAU;6BACX,oBAACA,OAAAA;KAGZ;AACL;AAEO,MAAMG,2BAAkC;IAC3C,MAAM;QACF,GAAGjB,QAAQ,IAAI;QACf,sBAAsB;IAC1B;AACJ"}

package/TimeAgo/TimeAgo.d.ts

@@ -0,0 +1,3 @@
+import React from "react";
+import type { TimeAgoProps } from "./types.js";
+export declare function TimeAgo({ datetime, live, opts, locale: _locale, ...rest }: TimeAgoProps): React.JSX.Element;

package/TimeAgo/TimeAgo.js

@@ -0,0 +1,45 @@
+import react, { useEffect, useMemo, useState } from "react";
+import { formatElapsed } from "./formatElapsed.js";
+import { DEFAULT_INTERVALS, getUpdateDelay } from "./getUpdateDelay.js";
+import { getElapsedSeconds } from "./getElapsedSeconds.js";
+import { toISOString } from "./toISOString.js";
+function TimeAgo({ datetime, live = true, opts, locale: _locale, ...rest }) {
+    const [, setTick] = useState(0);
+    const intervals = useMemo(()=>({
+            ...DEFAULT_INTERVALS,
+            ...opts?.updateIntervals
+        }), [
+        opts?.updateIntervals?.underFiveMinutes,
+        opts?.updateIntervals?.underFifteenMinutes,
+        opts?.updateIntervals?.underOneHour
+    ]);
+    useEffect(()=>{
+        if (!live) return;
+        let timer;
+        function schedule() {
+            const elapsed = getElapsedSeconds(datetime, opts?.relativeDate);
+            const delay = getUpdateDelay(elapsed, opts?.minInterval, intervals);
+            if (null === delay) return;
+            timer = setTimeout(()=>{
+                setTick((t)=>t + 1);
+                schedule();
+            }, delay);
+        }
+        schedule();
+        return ()=>clearTimeout(timer);
+    }, [
+        datetime,
+        live,
+        opts?.relativeDate,
+        opts?.minInterval,
+        intervals
+    ]);
+    const seconds = getElapsedSeconds(datetime, opts?.relativeDate);
+    return /*#__PURE__*/ react.createElement("time", {
+        dateTime: toISOString(datetime),
+        ...rest
+    }, formatElapsed(seconds));
+}
+export { TimeAgo };
+
+//# sourceMappingURL=TimeAgo.js.map

package/TimeAgo/TimeAgo.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TimeAgo/TimeAgo.js","sources":["../../src/TimeAgo/TimeAgo.tsx"],"sourcesContent":["import React from \"react\";\nimport { useState, useEffect, useMemo } from \"react\";\nimport type { TimeAgoProps } from \"./types.js\";\nimport { formatElapsed } from \"./formatElapsed.js\";\nimport { DEFAULT_INTERVALS, getUpdateDelay } from \"./getUpdateDelay.js\";\nimport { getElapsedSeconds } from \"./getElapsedSeconds.js\";\nimport { toISOString } from \"./toISOString.js\";\n\nexport function TimeAgo({ datetime, live = true, opts, locale: _locale, ...rest }: TimeAgoProps) {\n    const [, setTick] = useState(0);\n\n    const intervals = useMemo(\n        () => ({ ...DEFAULT_INTERVALS, ...opts?.updateIntervals }),\n        [\n            opts?.updateIntervals?.underFiveMinutes,\n            opts?.updateIntervals?.underFifteenMinutes,\n            opts?.updateIntervals?.underOneHour\n        ]\n    );\n\n    useEffect(() => {\n        if (!live) {\n            return;\n        }\n\n        let timer: ReturnType<typeof setTimeout>;\n\n        function schedule() {\n            const elapsed = getElapsedSeconds(datetime, opts?.relativeDate);\n            const delay = getUpdateDelay(elapsed, opts?.minInterval, intervals);\n            if (delay === null) {\n                return;\n            }\n            timer = setTimeout(() => {\n                setTick(t => t + 1);\n                schedule();\n            }, delay);\n        }\n\n        schedule();\n\n        return () => clearTimeout(timer);\n    }, [datetime, live, opts?.relativeDate, opts?.minInterval, intervals]);\n\n    const seconds = getElapsedSeconds(datetime, opts?.relativeDate);\n\n    return (\n        <time dateTime={toISOString(datetime)} {...rest}>\n            {formatElapsed(seconds)}\n        </time>\n    );\n}\n"],"names":["TimeAgo","datetime","live","opts","_locale","rest","setTick","useState","intervals","useMemo","DEFAULT_INTERVALS","useEffect","timer","schedule","elapsed","getElapsedSeconds","delay","getUpdateDelay","setTimeout","t","clearTimeout","seconds","toISOString","formatElapsed"],"mappings":";;;;;AAQO,SAASA,QAAQ,EAAEC,QAAQ,EAAEC,OAAO,IAAI,EAAEC,IAAI,EAAE,QAAQC,OAAO,EAAE,GAAGC,MAAoB;IAC3F,MAAM,GAAGC,QAAQ,GAAGC,SAAS;IAE7B,MAAMC,YAAYC,QACd,IAAO;YAAE,GAAGC,iBAAiB;YAAE,GAAGP,MAAM,eAAe;QAAC,IACxD;QACIA,MAAM,iBAAiB;QACvBA,MAAM,iBAAiB;QACvBA,MAAM,iBAAiB;KAC1B;IAGLQ,UAAU;QACN,IAAI,CAACT,MACD;QAGJ,IAAIU;QAEJ,SAASC;YACL,MAAMC,UAAUC,kBAAkBd,UAAUE,MAAM;YAClD,MAAMa,QAAQC,eAAeH,SAASX,MAAM,aAAaK;YACzD,IAAIQ,AAAU,SAAVA,OACA;YAEJJ,QAAQM,WAAW;gBACfZ,QAAQa,CAAAA,IAAKA,IAAI;gBACjBN;YACJ,GAAGG;QACP;QAEAH;QAEA,OAAO,IAAMO,aAAaR;IAC9B,GAAG;QAACX;QAAUC;QAAMC,MAAM;QAAcA,MAAM;QAAaK;KAAU;IAErE,MAAMa,UAAUN,kBAAkBd,UAAUE,MAAM;IAElD,OAAO,WAAP,GACI,oBAAC;QAAK,UAAUmB,YAAYrB;QAAY,GAAGI,IAAI;OAC1CkB,cAAcF;AAG3B"}

package/TimeAgo/TimeAgo.stories.d.ts

@@ -0,0 +1,15 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { TimeAgo } from "./TimeAgo.js";
+declare const meta: Meta<typeof TimeAgo>;
+export default meta;
+type Story = StoryObj<typeof TimeAgo>;
+export declare const JustNow: Story;
+export declare const SecondsAgo: Story;
+export declare const MinutesAgo: Story;
+export declare const HoursAgo: Story;
+export declare const DaysAgo: Story;
+export declare const WeeksAgo: Story;
+export declare const MonthsAgo: Story;
+export declare const YearsAgo: Story;
+export declare const ISOString: Story;
+export declare const NotLive: Story;

package/TimeAgo/TimeAgo.stories.js

@@ -0,0 +1,71 @@
+import "react";
+import { TimeAgo } from "./TimeAgo.js";
+const meta = {
+    title: "Components/TimeAgo",
+    component: TimeAgo
+};
+const TimeAgo_stories = meta;
+const JustNow = {
+    args: {
+        datetime: new Date()
+    }
+};
+const SecondsAgo = {
+    name: "Seconds ago",
+    args: {
+        datetime: new Date(Date.now() - 45000)
+    }
+};
+const MinutesAgo = {
+    name: "Minutes ago",
+    args: {
+        datetime: new Date(Date.now() - 900000)
+    }
+};
+const HoursAgo = {
+    name: "Hours ago",
+    args: {
+        datetime: new Date(Date.now() - 10800000)
+    }
+};
+const DaysAgo = {
+    name: "Days ago",
+    args: {
+        datetime: new Date(Date.now() - 432000000)
+    }
+};
+const WeeksAgo = {
+    name: "Weeks ago",
+    args: {
+        datetime: new Date(Date.now() - 1814400000)
+    }
+};
+const MonthsAgo = {
+    name: "Months ago",
+    args: {
+        datetime: new Date(Date.now() - 10368000000)
+    }
+};
+const YearsAgo = {
+    name: "Years ago",
+    args: {
+        datetime: new Date(Date.now() - 63072000000)
+    }
+};
+const ISOString = {
+    name: "From ISO string",
+    args: {
+        datetime: "2024-01-15T12:00:00Z"
+    }
+};
+const NotLive = {
+    name: "Live updates disabled",
+    args: {
+        datetime: new Date(),
+        live: false
+    }
+};
+export default TimeAgo_stories;
+export { DaysAgo, HoursAgo, ISOString, JustNow, MinutesAgo, MonthsAgo, NotLive, SecondsAgo, WeeksAgo, YearsAgo };
+
+//# sourceMappingURL=TimeAgo.stories.js.map

package/TimeAgo/TimeAgo.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TimeAgo/TimeAgo.stories.js","sources":["../../src/TimeAgo/TimeAgo.stories.tsx"],"sourcesContent":["import React from \"react\";\nimport type { Meta, StoryObj } from \"@storybook/react\";\nimport { TimeAgo } from \"./TimeAgo.js\";\n\nconst meta: Meta<typeof TimeAgo> = {\n    title: \"Components/TimeAgo\",\n    component: TimeAgo\n};\n\nexport default meta;\n\ntype Story = StoryObj<typeof TimeAgo>;\n\nexport const JustNow: Story = {\n    args: {\n        datetime: new Date()\n    }\n};\n\nexport const SecondsAgo: Story = {\n    name: \"Seconds ago\",\n    args: {\n        datetime: new Date(Date.now() - 45 * 1000)\n    }\n};\n\nexport const MinutesAgo: Story = {\n    name: \"Minutes ago\",\n    args: {\n        datetime: new Date(Date.now() - 15 * 60 * 1000)\n    }\n};\n\nexport const HoursAgo: Story = {\n    name: \"Hours ago\",\n    args: {\n        datetime: new Date(Date.now() - 3 * 60 * 60 * 1000)\n    }\n};\n\nexport const DaysAgo: Story = {\n    name: \"Days ago\",\n    args: {\n        datetime: new Date(Date.now() - 5 * 24 * 60 * 60 * 1000)\n    }\n};\n\nexport const WeeksAgo: Story = {\n    name: \"Weeks ago\",\n    args: {\n        datetime: new Date(Date.now() - 3 * 7 * 24 * 60 * 60 * 1000)\n    }\n};\n\nexport const MonthsAgo: Story = {\n    name: \"Months ago\",\n    args: {\n        datetime: new Date(Date.now() - 4 * 30 * 24 * 60 * 60 * 1000)\n    }\n};\n\nexport const YearsAgo: Story = {\n    name: \"Years ago\",\n    args: {\n        datetime: new Date(Date.now() - 2 * 365 * 24 * 60 * 60 * 1000)\n    }\n};\n\nexport const ISOString: Story = {\n    name: \"From ISO string\",\n    args: {\n        datetime: \"2024-01-15T12:00:00Z\"\n    }\n};\n\nexport const NotLive: Story = {\n    name: \"Live updates disabled\",\n    args: {\n        datetime: new Date(),\n        live: false\n    }\n};\n"],"names":["meta","TimeAgo","JustNow","Date","SecondsAgo","MinutesAgo","HoursAgo","DaysAgo","WeeksAgo","MonthsAgo","YearsAgo","ISOString","NotLive"],"mappings":";;AAIA,MAAMA,OAA6B;IAC/B,OAAO;IACP,WAAWC;AACf;AAEA,wBAAeD;AAIR,MAAME,UAAiB;IAC1B,MAAM;QACF,UAAU,IAAIC;IAClB;AACJ;AAEO,MAAMC,aAAoB;IAC7B,MAAM;IACN,MAAM;QACF,UAAU,IAAID,KAAKA,KAAK,GAAG,KAAK;IACpC;AACJ;AAEO,MAAME,aAAoB;IAC7B,MAAM;IACN,MAAM;QACF,UAAU,IAAIF,KAAKA,KAAK,GAAG,KAAK;IACpC;AACJ;AAEO,MAAMG,WAAkB;IAC3B,MAAM;IACN,MAAM;QACF,UAAU,IAAIH,KAAKA,KAAK,GAAG,KAAK;IACpC;AACJ;AAEO,MAAMI,UAAiB;IAC1B,MAAM;IACN,MAAM;QACF,UAAU,IAAIJ,KAAKA,KAAK,GAAG,KAAK;IACpC;AACJ;AAEO,MAAMK,WAAkB;IAC3B,MAAM;IACN,MAAM;QACF,UAAU,IAAIL,KAAKA,KAAK,GAAG,KAAK;IACpC;AACJ;AAEO,MAAMM,YAAmB;IAC5B,MAAM;IACN,MAAM;QACF,UAAU,IAAIN,KAAKA,KAAK,GAAG,KAAK;IACpC;AACJ;AAEO,MAAMO,WAAkB;IAC3B,MAAM;IACN,MAAM;QACF,UAAU,IAAIP,KAAKA,KAAK,GAAG,KAAK;IACpC;AACJ;AAEO,MAAMQ,YAAmB;IAC5B,MAAM;IACN,MAAM;QACF,UAAU;IACd;AACJ;AAEO,MAAMC,UAAiB;IAC1B,MAAM;IACN,MAAM;QACF,UAAU,IAAIT;QACd,MAAM;IACV;AACJ"}

package/TimeAgo/formatElapsed.d.ts

@@ -0,0 +1 @@
+export declare function formatElapsed(seconds: number): string;

package/TimeAgo/formatElapsed.js

@@ -0,0 +1,27 @@
+const MINUTE = 60;
+const HOUR = 3600;
+const DAY = 86400;
+const WEEK = 604800;
+const MONTH = 2592000;
+const YEAR = 31536000;
+function formatElapsed(seconds) {
+    const abs = Math.abs(seconds);
+    const suffix = seconds < 0 ? "from now" : "ago";
+    if (abs < 30) return "just now";
+    if (abs < MINUTE) return `${abs} seconds ${suffix}`;
+    if (abs < 2 * MINUTE) return `1 minute ${suffix}`;
+    if (abs < HOUR) return `${Math.floor(abs / MINUTE)} minutes ${suffix}`;
+    if (abs < 2 * HOUR) return `1 hour ${suffix}`;
+    if (abs < DAY) return `${Math.floor(abs / HOUR)} hours ${suffix}`;
+    if (abs < 2 * DAY) return `1 day ${suffix}`;
+    if (abs < WEEK) return `${Math.floor(abs / DAY)} days ${suffix}`;
+    if (abs < 2 * WEEK) return `1 week ${suffix}`;
+    if (abs < MONTH) return `${Math.floor(abs / WEEK)} weeks ${suffix}`;
+    if (abs < 2 * MONTH) return `1 month ${suffix}`;
+    if (abs < YEAR) return `${Math.floor(abs / MONTH)} months ${suffix}`;
+    if (abs < 2 * YEAR) return `1 year ${suffix}`;
+    return `${Math.floor(abs / YEAR)} years ${suffix}`;
+}
+export { formatElapsed };
+
+//# sourceMappingURL=formatElapsed.js.map

package/TimeAgo/formatElapsed.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TimeAgo/formatElapsed.js","sources":["../../src/TimeAgo/formatElapsed.ts"],"sourcesContent":["const MINUTE = 60;\nconst HOUR = 3600;\nconst DAY = 86400;\nconst WEEK = 604800;\nconst MONTH = 2_592_000;\nconst YEAR = 31_536_000;\n\nexport function formatElapsed(seconds: number): string {\n    const abs = Math.abs(seconds);\n    const suffix = seconds < 0 ? \"from now\" : \"ago\";\n\n    if (abs < 30) {\n        return \"just now\";\n    }\n    if (abs < MINUTE) {\n        return `${abs} seconds ${suffix}`;\n    }\n    if (abs < 2 * MINUTE) {\n        return `1 minute ${suffix}`;\n    }\n    if (abs < HOUR) {\n        return `${Math.floor(abs / MINUTE)} minutes ${suffix}`;\n    }\n    if (abs < 2 * HOUR) {\n        return `1 hour ${suffix}`;\n    }\n    if (abs < DAY) {\n        return `${Math.floor(abs / HOUR)} hours ${suffix}`;\n    }\n    if (abs < 2 * DAY) {\n        return `1 day ${suffix}`;\n    }\n    if (abs < WEEK) {\n        return `${Math.floor(abs / DAY)} days ${suffix}`;\n    }\n    if (abs < 2 * WEEK) {\n        return `1 week ${suffix}`;\n    }\n    if (abs < MONTH) {\n        return `${Math.floor(abs / WEEK)} weeks ${suffix}`;\n    }\n    if (abs < 2 * MONTH) {\n        return `1 month ${suffix}`;\n    }\n    if (abs < YEAR) {\n        return `${Math.floor(abs / MONTH)} months ${suffix}`;\n    }\n    if (abs < 2 * YEAR) {\n        return `1 year ${suffix}`;\n    }\n    return `${Math.floor(abs / YEAR)} years ${suffix}`;\n}\n"],"names":["MINUTE","HOUR","DAY","WEEK","MONTH","YEAR","formatElapsed","seconds","abs","Math","suffix"],"mappings":"AAAA,MAAMA,SAAS;AACf,MAAMC,OAAO;AACb,MAAMC,MAAM;AACZ,MAAMC,OAAO;AACb,MAAMC,QAAQ;AACd,MAAMC,OAAO;AAEN,SAASC,cAAcC,OAAe;IACzC,MAAMC,MAAMC,KAAK,GAAG,CAACF;IACrB,MAAMG,SAASH,UAAU,IAAI,aAAa;IAE1C,IAAIC,MAAM,IACN,OAAO;IAEX,IAAIA,MAAMR,QACN,OAAO,GAAGQ,IAAI,SAAS,EAAEE,QAAQ;IAErC,IAAIF,MAAM,IAAIR,QACV,OAAO,CAAC,SAAS,EAAEU,QAAQ;IAE/B,IAAIF,MAAMP,MACN,OAAO,GAAGQ,KAAK,KAAK,CAACD,MAAMR,QAAQ,SAAS,EAAEU,QAAQ;IAE1D,IAAIF,MAAM,IAAIP,MACV,OAAO,CAAC,OAAO,EAAES,QAAQ;IAE7B,IAAIF,MAAMN,KACN,OAAO,GAAGO,KAAK,KAAK,CAACD,MAAMP,MAAM,OAAO,EAAES,QAAQ;IAEtD,IAAIF,MAAM,IAAIN,KACV,OAAO,CAAC,MAAM,EAAEQ,QAAQ;IAE5B,IAAIF,MAAML,MACN,OAAO,GAAGM,KAAK,KAAK,CAACD,MAAMN,KAAK,MAAM,EAAEQ,QAAQ;IAEpD,IAAIF,MAAM,IAAIL,MACV,OAAO,CAAC,OAAO,EAAEO,QAAQ;IAE7B,IAAIF,MAAMJ,OACN,OAAO,GAAGK,KAAK,KAAK,CAACD,MAAML,MAAM,OAAO,EAAEO,QAAQ;IAEtD,IAAIF,MAAM,IAAIJ,OACV,OAAO,CAAC,QAAQ,EAAEM,QAAQ;IAE9B,IAAIF,MAAMH,MACN,OAAO,GAAGI,KAAK,KAAK,CAACD,MAAMJ,OAAO,QAAQ,EAAEM,QAAQ;IAExD,IAAIF,MAAM,IAAIH,MACV,OAAO,CAAC,OAAO,EAAEK,QAAQ;IAE7B,OAAO,GAAGD,KAAK,KAAK,CAACD,MAAMH,MAAM,OAAO,EAAEK,QAAQ;AACtD"}

package/TimeAgo/getElapsedSeconds.d.ts

@@ -0,0 +1,2 @@
+import type { TDate } from "./types.js";
+export declare function getElapsedSeconds(datetime: TDate, relativeDate?: TDate): number;

package/TimeAgo/getElapsedSeconds.js

@@ -0,0 +1,9 @@
+import { toEpochMs } from "./toEpochMs.js";
+function getElapsedSeconds(datetime, relativeDate) {
+    const now = relativeDate ? Temporal.Instant.fromEpochMilliseconds(toEpochMs(relativeDate)) : Temporal.Now.instant();
+    const past = Temporal.Instant.fromEpochMilliseconds(toEpochMs(datetime));
+    return Math.round(now.since(past).total("second"));
+}
+export { getElapsedSeconds };
+
+//# sourceMappingURL=getElapsedSeconds.js.map

package/TimeAgo/getElapsedSeconds.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TimeAgo/getElapsedSeconds.js","sources":["../../src/TimeAgo/getElapsedSeconds.ts"],"sourcesContent":["import type { TDate } from \"./types.js\";\nimport { toEpochMs } from \"./toEpochMs.js\";\n\nexport function getElapsedSeconds(datetime: TDate, relativeDate?: TDate): number {\n    const now = relativeDate\n        ? Temporal.Instant.fromEpochMilliseconds(toEpochMs(relativeDate))\n        : Temporal.Now.instant();\n    const past = Temporal.Instant.fromEpochMilliseconds(toEpochMs(datetime));\n    return Math.round(now.since(past).total(\"second\"));\n}\n"],"names":["getElapsedSeconds","datetime","relativeDate","now","Temporal","toEpochMs","past","Math"],"mappings":";AAGO,SAASA,kBAAkBC,QAAe,EAAEC,YAAoB;IACnE,MAAMC,MAAMD,eACNE,SAAS,OAAO,CAAC,qBAAqB,CAACC,UAAUH,iBACjDE,SAAS,GAAG,CAAC,OAAO;IAC1B,MAAME,OAAOF,SAAS,OAAO,CAAC,qBAAqB,CAACC,UAAUJ;IAC9D,OAAOM,KAAK,KAAK,CAACJ,IAAI,KAAK,CAACG,MAAM,KAAK,CAAC;AAC5C"}

package/TimeAgo/getUpdateDelay.d.ts

@@ -0,0 +1,3 @@
+import type { UpdateIntervals } from "./types.js";
+export declare const DEFAULT_INTERVALS: Required<UpdateIntervals>;
+export declare function getUpdateDelay(seconds: number, minInterval?: number, intervals?: Required<UpdateIntervals>): number | null;

package/TimeAgo/getUpdateDelay.js

@@ -0,0 +1,24 @@
+const MINUTE = 60;
+const HOUR = 3600;
+const FIVE_MINUTES = 5 * MINUTE;
+const FIFTEEN_MINUTES = 15 * MINUTE;
+const DEFAULT_INTERVALS = {
+    underFiveMinutes: 1000,
+    underFifteenMinutes: 10000,
+    underOneHour: 30000
+};
+function getUpdateDelay(seconds, minInterval, intervals = DEFAULT_INTERVALS) {
+    const abs = Math.abs(seconds);
+    let delay;
+    if (abs < FIVE_MINUTES) delay = intervals.underFiveMinutes;
+    else if (abs < FIFTEEN_MINUTES) delay = intervals.underFifteenMinutes;
+    else {
+        if (!(abs < HOUR)) return null;
+        delay = intervals.underOneHour;
+    }
+    if (minInterval) delay = Math.max(delay, 1000 * minInterval);
+    return delay;
+}
+export { DEFAULT_INTERVALS, getUpdateDelay };
+
+//# sourceMappingURL=getUpdateDelay.js.map

package/TimeAgo/getUpdateDelay.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TimeAgo/getUpdateDelay.js","sources":["../../src/TimeAgo/getUpdateDelay.ts"],"sourcesContent":["import type { UpdateIntervals } from \"./types.js\";\n\nconst MINUTE = 60;\nconst HOUR = 3600;\nconst FIVE_MINUTES = 5 * MINUTE;\nconst FIFTEEN_MINUTES = 15 * MINUTE;\n\nexport const DEFAULT_INTERVALS: Required<UpdateIntervals> = {\n    underFiveMinutes: 1_000,\n    underFifteenMinutes: 10_000,\n    underOneHour: 30_000\n};\n\nexport function getUpdateDelay(\n    seconds: number,\n    minInterval?: number,\n    intervals: Required<UpdateIntervals> = DEFAULT_INTERVALS\n): number | null {\n    const abs = Math.abs(seconds);\n    let delay: number;\n\n    if (abs < FIVE_MINUTES) {\n        delay = intervals.underFiveMinutes;\n    } else if (abs < FIFTEEN_MINUTES) {\n        delay = intervals.underFifteenMinutes;\n    } else if (abs < HOUR) {\n        delay = intervals.underOneHour;\n    } else {\n        return null;\n    }\n\n    if (minInterval) {\n        delay = Math.max(delay, minInterval * 1000);\n    }\n\n    return delay;\n}\n"],"names":["MINUTE","HOUR","FIVE_MINUTES","FIFTEEN_MINUTES","DEFAULT_INTERVALS","getUpdateDelay","seconds","minInterval","intervals","abs","Math","delay"],"mappings":"AAEA,MAAMA,SAAS;AACf,MAAMC,OAAO;AACb,MAAMC,eAAe,IAAIF;AACzB,MAAMG,kBAAkB,KAAKH;AAEtB,MAAMI,oBAA+C;IACxD,kBAAkB;IAClB,qBAAqB;IACrB,cAAc;AAClB;AAEO,SAASC,eACZC,OAAe,EACfC,WAAoB,EACpBC,YAAuCJ,iBAAiB;IAExD,MAAMK,MAAMC,KAAK,GAAG,CAACJ;IACrB,IAAIK;IAEJ,IAAIF,MAAMP,cACNS,QAAQH,UAAU,gBAAgB;SAC/B,IAAIC,MAAMN,iBACbQ,QAAQH,UAAU,mBAAmB;;QAClC,KAAIC,CAAAA,MAAMR,IAAG,GAGhB,OAAO;QAFPU,QAAQH,UAAU,YAAY;;IAKlC,IAAID,aACAI,QAAQD,KAAK,GAAG,CAACC,OAAOJ,AAAc,OAAdA;IAG5B,OAAOI;AACX"}

package/TimeAgo/index.d.ts

@@ -1,3 +1,2 @@
-import TimeAgo from "timeago-react";
-export type { TimeAgoProps, Opts, TDate } from "timeago-react";
-export { TimeAgo };
+export type { TimeAgoProps, Opts, TDate, UpdateIntervals } from "./types.js";
+export { TimeAgo } from "./TimeAgo.js";

package/TimeAgo/index.js

@@ -1 +1 @@
-export { default as TimeAgo } from "timeago-react";
+export { TimeAgo } from "./TimeAgo.js";

package/TimeAgo/toEpochMs.d.ts

@@ -0,0 +1,2 @@
+import type { TDate } from "./types.js";
+export declare function toEpochMs(date: TDate): number;

package/TimeAgo/toEpochMs.js

@@ -0,0 +1,8 @@
+function toEpochMs(date) {
+    if (date instanceof Date) return date.getTime();
+    if ("number" == typeof date) return date;
+    return new Date(date).getTime();
+}
+export { toEpochMs };
+
+//# sourceMappingURL=toEpochMs.js.map

package/TimeAgo/toEpochMs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TimeAgo/toEpochMs.js","sources":["../../src/TimeAgo/toEpochMs.ts"],"sourcesContent":["import type { TDate } from \"./types.js\";\n\nexport function toEpochMs(date: TDate): number {\n    if (date instanceof Date) {\n        return date.getTime();\n    }\n    if (typeof date === \"number\") {\n        return date;\n    }\n    return new Date(date).getTime();\n}\n"],"names":["toEpochMs","date","Date"],"mappings":"AAEO,SAASA,UAAUC,IAAW;IACjC,IAAIA,gBAAgBC,MAChB,OAAOD,KAAK,OAAO;IAEvB,IAAI,AAAgB,YAAhB,OAAOA,MACP,OAAOA;IAEX,OAAO,IAAIC,KAAKD,MAAM,OAAO;AACjC"}

package/TimeAgo/toISOString.d.ts

@@ -0,0 +1,2 @@
+import type { TDate } from "./types.js";
+export declare function toISOString(date: TDate): string;

package/TimeAgo/toISOString.js

@@ -0,0 +1,8 @@
+function toISOString(date) {
+    if (date instanceof Date) return date.toISOString();
+    if ("number" == typeof date) return new Date(date).toISOString();
+    return date;
+}
+export { toISOString };
+
+//# sourceMappingURL=toISOString.js.map

package/TimeAgo/toISOString.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TimeAgo/toISOString.js","sources":["../../src/TimeAgo/toISOString.ts"],"sourcesContent":["import type { TDate } from \"./types.js\";\n\nexport function toISOString(date: TDate): string {\n    if (date instanceof Date) {\n        return date.toISOString();\n    }\n    if (typeof date === \"number\") {\n        return new Date(date).toISOString();\n    }\n    return date;\n}\n"],"names":["toISOString","date","Date"],"mappings":"AAEO,SAASA,YAAYC,IAAW;IACnC,IAAIA,gBAAgBC,MAChB,OAAOD,KAAK,WAAW;IAE3B,IAAI,AAAgB,YAAhB,OAAOA,MACP,OAAO,IAAIC,KAAKD,MAAM,WAAW;IAErC,OAAOA;AACX"}

package/TimeAgo/types.d.ts

@@ -0,0 +1,18 @@
+import type { ComponentProps } from "react";
+export type TDate = Date | string | number;
+export interface UpdateIntervals {
+    readonly underFiveMinutes?: number;
+    readonly underFifteenMinutes?: number;
+    readonly underOneHour?: number;
+}
+export interface Opts {
+    readonly relativeDate?: TDate;
+    readonly minInterval?: number;
+    readonly updateIntervals?: UpdateIntervals;
+}
+export interface TimeAgoProps extends ComponentProps<"time"> {
+    readonly datetime: TDate;
+    readonly live?: boolean;
+    readonly opts?: Opts;
+    readonly locale?: string;
+}

package/Toast/useToast.stories.d.ts

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

package/Toast/useToast.stories.js.map

@@ -1 +1 @@
-{"version":3,"file":"Toast/useToast.stories.js","sources":["../../src/Toast/useToast.stories.tsx"],"sourcesContent":["import React, { useState } from \"react\";\nimport { ReactComponent as SettingsIcon } from \"@webiny/icons/settings.svg\";\nimport type { Meta, StoryObj } from \"@storybook/react-webpack5\";\nimport { Toast } from \"./Toast.js\";\nimport { useToast, type ShowToastParams } from \"./useToast.js\";\nimport { Button } from \"~/Button/index.js\";\nimport { Icon } from \"~/Icon/index.js\";\n\nconst ToastComponent = (props: ShowToastParams) => {\n    const [lastToast, setLastToast] = useState<string | number>(\"\");\n    const { showToast, hideToast, hideAllToasts } = useToast();\n    return (\n        <>\n            <Button\n                text={\"Show Toast\"}\n                onClick={() => {\n                    const toast = showToast(props);\n                    setLastToast(toast);\n                }}\n            />\n            <Button text={\"Hide latest toast\"} onClick={() => hideToast(lastToast)} />\n            <Button text={\"Hide all toasts\"} onClick={() => hideAllToasts()} />\n        </>\n    );\n};\n\nconst meta: Meta<ShowToastParams> = {\n    title: \"Components/Toast\",\n    component: ToastComponent,\n    parameters: {\n        layout: \"fullscreen\"\n    },\n    argTypes: {\n        variant: { control: \"select\", options: [\"default\", \"subtle\"] }\n    },\n    decorators: [\n        Story => (\n            <div className=\"w-full h-64 flex justify-center items-center gap-sm\">\n                <Story />\n                <Toast.Provider />\n            </div>\n        )\n    ]\n};\n\nexport default meta;\n\ntype Story = StoryObj<ShowToastParams>;\n\nexport const Default: Story = {\n    args: {\n        title: \"New entry created\"\n    }\n};\n\nexport const SubtleVariant: Story = {\n    args: {\n        ...Default.args,\n        variant: \"subtle\"\n    }\n};\n\nexport const WithTitleComponent: Story = {\n    args: {\n        title: <Toast.Title text={\"New entry created\"} />\n    }\n};\n\nexport const WithDescription: Story = {\n    args: {\n        ...Default.args,\n        description: 'Entry \"Article One\" has been successfully created'\n    }\n};\n\nexport const WithDescriptionComponent: Story = {\n    args: {\n        ...Default.args,\n        description: (\n            <Toast.Description text={'Entry \"Article One\" has been successfully created'} />\n        )\n    }\n};\n\nexport const WithActions: Story = {\n    args: {\n        ...Default.args,\n        actions: (\n            <Toast.Actions>\n                <Button\n                    key={\"action-1\"}\n                    text={\"Do the action\"}\n                    onClick={() => console.log(\"doTheAction\")}\n                />\n                <Button\n                    key={\"action-2\"}\n                    text={\"Dismiss\"}\n                    onClick={() => console.log(\"dismiss\")}\n                    variant={\"secondary\"}\n                />\n            </Toast.Actions>\n        )\n    }\n};\n\nexport const WithDescriptionAndActions: Story = {\n    args: {\n        ...Default.args,\n        description: (\n            <Toast.Description text={'Entry \"Article One\" has been successfully created'} />\n        ),\n        actions: (\n            <Toast.Actions>\n                <Button\n                    key={\"action-1\"}\n                    text={\"Do the action\"}\n                    onClick={() => console.log(\"doTheAction\")}\n                />\n                <Button\n                    key={\"action-2\"}\n                    text={\"Dismiss\"}\n                    onClick={() => console.log(\"dismiss\")}\n                    variant={\"secondary\"}\n                />\n            </Toast.Actions>\n        )\n    }\n};\n\nexport const WithCustomIcon: Story = {\n    args: {\n        ...Default.args,\n        icon: <Icon icon={<SettingsIcon />} label={\"Settings\"} />\n    }\n};\n\nexport const WithInfiniteDuration: Story = {\n    args: {\n        ...Default.args,\n        duration: Infinity\n    }\n};\n\nexport const NotDismissible: Story = {\n    args: {\n        ...Default.args,\n        dismissible: false\n    }\n};\n\nexport const withCustomPosition: Story = {\n    args: {\n        ...Default.args,\n        position: \"bottom-right\"\n    }\n};\n\nexport const Documentation: Story = {\n    args: {\n        title: \"New entry created\",\n        description: \"Entry has been successfully created\",\n        variant: \"default\",\n        position: \"top-right\",\n        duration: 6000,\n        dismissible: true,\n        actions: undefined,\n        icon: undefined\n    },\n    argTypes: {\n        title: {\n            description: \"Please refer to the 'With Title Component' example below for details.\"\n        },\n        description: {\n            description:\n                \"Please refer to the 'With Description' and 'With Description Component' examples below for details.\"\n        },\n        variant: {\n            description: \"Variant of the toast.\"\n        },\n        actions: {\n            description: \"Please refer to the 'With Actions' example below for details.\"\n        },\n        icon: {\n            description: \"Please refer to the 'With Custom Icon' example below for details.\"\n        },\n        duration: {\n            description:\n                \"Duration in milliseconds before the toast auto-dismisses. Please refer to the 'With Infinite Duration' example below for details.\",\n            control: \"number\"\n        },\n        dismissible: {\n            description: \"Please refer to the 'Not Dismissible' example below for details.\"\n        },\n        position: {\n            description: \"Please refer to the 'With Custom Position' example below for details.\",\n            control: \"select\",\n            options: [\n                \"top-left\",\n                \"top-right\",\n                \"bottom-left\",\n                \"bottom-right\",\n                \"top-center\",\n                \"bottom-center\"\n            ]\n        }\n    }\n};\n"],"names":["ToastComponent","props","lastToast","setLastToast","useState","showToast","hideToast","hideAllToasts","useToast","Button","toast","meta","Story","Toast","Default","SubtleVariant","WithTitleComponent","WithDescription","WithDescriptionComponent","WithActions","console","WithDescriptionAndActions","WithCustomIcon","Icon","SettingsIcon","WithInfiniteDuration","Infinity","NotDismissible","withCustomPosition","Documentation","undefined"],"mappings":"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"}
+{"version":3,"file":"Toast/useToast.stories.js","sources":["../../src/Toast/useToast.stories.tsx"],"sourcesContent":["import React, { useState } from \"react\";\nimport { ReactComponent as SettingsIcon } from \"@webiny/icons/settings.svg\";\nimport type { Meta, StoryObj } from \"@storybook/react\";\nimport { Toast } from \"./Toast.js\";\nimport { useToast, type ShowToastParams } from \"./useToast.js\";\nimport { Button } from \"~/Button/index.js\";\nimport { Icon } from \"~/Icon/index.js\";\n\nconst ToastComponent = (props: ShowToastParams) => {\n    const [lastToast, setLastToast] = useState<string | number>(\"\");\n    const { showToast, hideToast, hideAllToasts } = useToast();\n    return (\n        <>\n            <Button\n                text={\"Show Toast\"}\n                onClick={() => {\n                    const toast = showToast(props);\n                    setLastToast(toast);\n                }}\n            />\n            <Button text={\"Hide latest toast\"} onClick={() => hideToast(lastToast)} />\n            <Button text={\"Hide all toasts\"} onClick={() => hideAllToasts()} />\n        </>\n    );\n};\n\nconst meta: Meta<ShowToastParams> = {\n    title: \"Components/Toast\",\n    component: ToastComponent,\n    parameters: {\n        layout: \"fullscreen\"\n    },\n    argTypes: {\n        variant: { control: \"select\", options: [\"default\", \"subtle\"] }\n    },\n    decorators: [\n        Story => (\n            <div className=\"w-full h-64 flex justify-center items-center gap-sm\">\n                <Story />\n                <Toast.Provider />\n            </div>\n        )\n    ]\n};\n\nexport default meta;\n\ntype Story = StoryObj<ShowToastParams>;\n\nexport const Default: Story = {\n    args: {\n        title: \"New entry created\"\n    }\n};\n\nexport const SubtleVariant: Story = {\n    args: {\n        ...Default.args,\n        variant: \"subtle\"\n    }\n};\n\nexport const WithTitleComponent: Story = {\n    args: {\n        title: <Toast.Title text={\"New entry created\"} />\n    }\n};\n\nexport const WithDescription: Story = {\n    args: {\n        ...Default.args,\n        description: 'Entry \"Article One\" has been successfully created'\n    }\n};\n\nexport const WithDescriptionComponent: Story = {\n    args: {\n        ...Default.args,\n        description: (\n            <Toast.Description text={'Entry \"Article One\" has been successfully created'} />\n        )\n    }\n};\n\nexport const WithActions: Story = {\n    args: {\n        ...Default.args,\n        actions: (\n            <Toast.Actions>\n                <Button\n                    key={\"action-1\"}\n                    text={\"Do the action\"}\n                    onClick={() => console.log(\"doTheAction\")}\n                />\n                <Button\n                    key={\"action-2\"}\n                    text={\"Dismiss\"}\n                    onClick={() => console.log(\"dismiss\")}\n                    variant={\"secondary\"}\n                />\n            </Toast.Actions>\n        )\n    }\n};\n\nexport const WithDescriptionAndActions: Story = {\n    args: {\n        ...Default.args,\n        description: (\n            <Toast.Description text={'Entry \"Article One\" has been successfully created'} />\n        ),\n        actions: (\n            <Toast.Actions>\n                <Button\n                    key={\"action-1\"}\n                    text={\"Do the action\"}\n                    onClick={() => console.log(\"doTheAction\")}\n                />\n                <Button\n                    key={\"action-2\"}\n                    text={\"Dismiss\"}\n                    onClick={() => console.log(\"dismiss\")}\n                    variant={\"secondary\"}\n                />\n            </Toast.Actions>\n        )\n    }\n};\n\nexport const WithCustomIcon: Story = {\n    args: {\n        ...Default.args,\n        icon: <Icon icon={<SettingsIcon />} label={\"Settings\"} />\n    }\n};\n\nexport const WithInfiniteDuration: Story = {\n    args: {\n        ...Default.args,\n        duration: Infinity\n    }\n};\n\nexport const NotDismissible: Story = {\n    args: {\n        ...Default.args,\n        dismissible: false\n    }\n};\n\nexport const withCustomPosition: Story = {\n    args: {\n        ...Default.args,\n        position: \"bottom-right\"\n    }\n};\n\nexport const Documentation: Story = {\n    args: {\n        title: \"New entry created\",\n        description: \"Entry has been successfully created\",\n        variant: \"default\",\n        position: \"top-right\",\n        duration: 6000,\n        dismissible: true,\n        actions: undefined,\n        icon: undefined\n    },\n    argTypes: {\n        title: {\n            description: \"Please refer to the 'With Title Component' example below for details.\"\n        },\n        description: {\n            description:\n                \"Please refer to the 'With Description' and 'With Description Component' examples below for details.\"\n        },\n        variant: {\n            description: \"Variant of the toast.\"\n        },\n        actions: {\n            description: \"Please refer to the 'With Actions' example below for details.\"\n        },\n        icon: {\n            description: \"Please refer to the 'With Custom Icon' example below for details.\"\n        },\n        duration: {\n            description:\n                \"Duration in milliseconds before the toast auto-dismisses. Please refer to the 'With Infinite Duration' example below for details.\",\n            control: \"number\"\n        },\n        dismissible: {\n            description: \"Please refer to the 'Not Dismissible' example below for details.\"\n        },\n        position: {\n            description: \"Please refer to the 'With Custom Position' example below for details.\",\n            control: \"select\",\n            options: [\n                \"top-left\",\n                \"top-right\",\n                \"bottom-left\",\n                \"bottom-right\",\n                \"top-center\",\n                \"bottom-center\"\n            ]\n        }\n    }\n};\n"],"names":["ToastComponent","props","lastToast","setLastToast","useState","showToast","hideToast","hideAllToasts","useToast","Button","toast","meta","Story","Toast","Default","SubtleVariant","WithTitleComponent","WithDescription","WithDescriptionComponent","WithActions","console","WithDescriptionAndActions","WithCustomIcon","Icon","SettingsIcon","WithInfiniteDuration","Infinity","NotDismissible","withCustomPosition","Documentation","undefined"],"mappings":"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"}

package/Toggle/Toggle.stories.d.ts

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

package/Toggle/Toggle.stories.js.map

@@ -1 +1 @@
-{"version":3,"file":"Toggle/Toggle.stories.js","sources":["../../src/Toggle/Toggle.stories.tsx"],"sourcesContent":["import React, { useState, useEffect } from \"react\";\nimport type { Meta, StoryObj } from \"@storybook/react-webpack5\";\nimport { ReactComponent as BoldIcon } from \"@webiny/icons/format_bold.svg\";\nimport { Tooltip } from \"~/Tooltip/index.js\";\nimport { Toggle } from \"~/Toggle/index.js\";\n\nconst meta: Meta<typeof Toggle> = {\n    title: \"Components/Form/Toggle\",\n    component: Toggle,\n    parameters: {\n        layout: \"padded\"\n    },\n    argTypes: {\n        disabled: {\n            control: \"boolean\",\n            defaultValue: false\n        }\n    },\n    decorators: [\n        Story => (\n            <Tooltip.Provider>\n                <Story />\n            </Tooltip.Provider>\n        )\n    ],\n    render: args => {\n        const [checked, setChecked] = useState(args.checked);\n        return <Toggle {...args} checked={checked} onChange={value => setChecked(value)} />;\n    }\n};\n\nexport default meta;\ntype Story = StoryObj<typeof Toggle>;\n\nexport const Default: Story = {\n    args: {\n        label: \"Toggle\"\n    }\n};\n\nexport const Checked: Story = {\n    args: {\n        label: \"Toggle\",\n        checked: true\n    }\n};\n\nexport const WithIcon: Story = {\n    args: {\n        label: \"Bold\",\n        icon: <BoldIcon />\n    }\n};\n\nexport const WithIconChecked: Story = {\n    args: {\n        label: \"Bold\",\n        icon: <BoldIcon />,\n        checked: true\n    }\n};\n\nexport const IconOnly: Story = {\n    args: {\n        icon: <BoldIcon />\n    }\n};\n\nexport const IconOnlyChecked: Story = {\n    args: {\n        icon: <BoldIcon />,\n        checked: true\n    }\n};\n\nexport const Outline: Story = {\n    args: {\n        label: \"Toggle\",\n        variant: \"outline\"\n    }\n};\n\nexport const Ghost: Story = {\n    args: {\n        label: \"Toggle\",\n        variant: \"ghost\"\n    }\n};\n\nexport const WithNotes: Story = {\n    args: {\n        label: \"Toggle\",\n        note: \"Note: Ensure your selection or input is accurate before proceeding.\"\n    }\n};\n\nexport const WithErrors: Story = {\n    args: {\n        label: \"Toggle\",\n        validation: {\n            isValid: false,\n            message: \"This field is required.\"\n        }\n    }\n};\n\nexport const Disabled: Story = {\n    args: {\n        label: \"Toggle\",\n        disabled: true\n    }\n};\n\nexport const Documentation: Story = {\n    render: args => {\n        const [checked, setChecked] = useState(args.checked || false);\n        const [validation, setValidation] = useState({ isValid: true, message: \"\" });\n\n        useEffect(() => {\n            setChecked(args.checked || false);\n        }, [args.checked]);\n\n        const handleChange = (isChecked: boolean) => {\n            setChecked(isChecked);\n\n            if (args.required && !isChecked) {\n                setValidation({ isValid: false, message: \"This field is required\" });\n            } else {\n                setValidation({ isValid: true, message: \"\" });\n            }\n        };\n\n        useEffect(() => {\n            if (args.required && !checked) {\n                setValidation({ isValid: false, message: \"This field is required\" });\n            } else {\n                setValidation({ isValid: true, message: \"\" });\n            }\n        }, [args.required, checked]);\n\n        return (\n            <Toggle\n                {...args}\n                checked={checked}\n                onChange={handleChange}\n                validation={validation}\n                required={args.required}\n            />\n        );\n    },\n    args: {\n        label: \"Enable feature\",\n        checked: false,\n        disabled: false,\n        required: true,\n        note: \"Note: This setting can be changed at any time.\",\n        validation: undefined\n    },\n    argTypes: {\n        label: {\n            description: \"Label text displayed inside the toggle button\",\n            control: \"text\"\n        },\n        checked: {\n            description: \"Determines if the toggle is active\",\n            control: \"boolean\"\n        },\n        disabled: {\n            description: \"Disables the toggle when set to true\",\n            control: \"boolean\"\n        },\n        required: {\n            description: \"Makes the toggle required when set to true\",\n            control: \"boolean\"\n        },\n        variant: {\n            description: \"Visual style: primary (default), outline, ghost, ghost-negative\",\n            control: \"select\",\n            options: [\"primary\", \"outline\", \"ghost\", \"ghost-negative\"]\n        },\n        size: {\n            description: \"Size of the toggle button\",\n            control: \"select\",\n            options: [\"sm\", \"md\", \"lg\", \"xl\"]\n        },\n        note: {\n            description: \"Additional note text below the toggle\",\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: \"Function called when the toggle state changes\"\n        }\n    }\n};\n"],"names":["meta","Toggle","Story","Tooltip","args","checked","setChecked","useState","value","Default","Checked","WithIcon","BoldIcon","WithIconChecked","IconOnly","IconOnlyChecked","Outline","Ghost","WithNotes","WithErrors","Disabled","Documentation","validation","setValidation","useEffect","handleChange","isChecked","undefined"],"mappings":"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"}
+{"version":3,"file":"Toggle/Toggle.stories.js","sources":["../../src/Toggle/Toggle.stories.tsx"],"sourcesContent":["import React, { useState, useEffect } from \"react\";\nimport type { Meta, StoryObj } from \"@storybook/react\";\nimport { ReactComponent as BoldIcon } from \"@webiny/icons/format_bold.svg\";\nimport { Tooltip } from \"~/Tooltip/index.js\";\nimport { Toggle } from \"~/Toggle/index.js\";\n\nconst meta: Meta<typeof Toggle> = {\n    title: \"Components/Form/Toggle\",\n    component: Toggle,\n    parameters: {\n        layout: \"padded\"\n    },\n    argTypes: {\n        disabled: {\n            control: \"boolean\",\n            defaultValue: false\n        }\n    },\n    decorators: [\n        Story => (\n            <Tooltip.Provider>\n                <Story />\n            </Tooltip.Provider>\n        )\n    ],\n    render: args => {\n        const [checked, setChecked] = useState(args.checked);\n        return <Toggle {...args} checked={checked} onChange={value => setChecked(value)} />;\n    }\n};\n\nexport default meta;\ntype Story = StoryObj<typeof Toggle>;\n\nexport const Default: Story = {\n    args: {\n        label: \"Toggle\"\n    }\n};\n\nexport const Checked: Story = {\n    args: {\n        label: \"Toggle\",\n        checked: true\n    }\n};\n\nexport const WithIcon: Story = {\n    args: {\n        label: \"Bold\",\n        icon: <BoldIcon />\n    }\n};\n\nexport const WithIconChecked: Story = {\n    args: {\n        label: \"Bold\",\n        icon: <BoldIcon />,\n        checked: true\n    }\n};\n\nexport const IconOnly: Story = {\n    args: {\n        icon: <BoldIcon />\n    }\n};\n\nexport const IconOnlyChecked: Story = {\n    args: {\n        icon: <BoldIcon />,\n        checked: true\n    }\n};\n\nexport const Outline: Story = {\n    args: {\n        label: \"Toggle\",\n        variant: \"outline\"\n    }\n};\n\nexport const Ghost: Story = {\n    args: {\n        label: \"Toggle\",\n        variant: \"ghost\"\n    }\n};\n\nexport const WithNotes: Story = {\n    args: {\n        label: \"Toggle\",\n        note: \"Note: Ensure your selection or input is accurate before proceeding.\"\n    }\n};\n\nexport const WithErrors: Story = {\n    args: {\n        label: \"Toggle\",\n        validation: {\n            isValid: false,\n            message: \"This field is required.\"\n        }\n    }\n};\n\nexport const Disabled: Story = {\n    args: {\n        label: \"Toggle\",\n        disabled: true\n    }\n};\n\nexport const Documentation: Story = {\n    render: args => {\n        const [checked, setChecked] = useState(args.checked || false);\n        const [validation, setValidation] = useState({ isValid: true, message: \"\" });\n\n        useEffect(() => {\n            setChecked(args.checked || false);\n        }, [args.checked]);\n\n        const handleChange = (isChecked: boolean) => {\n            setChecked(isChecked);\n\n            if (args.required && !isChecked) {\n                setValidation({ isValid: false, message: \"This field is required\" });\n            } else {\n                setValidation({ isValid: true, message: \"\" });\n            }\n        };\n\n        useEffect(() => {\n            if (args.required && !checked) {\n                setValidation({ isValid: false, message: \"This field is required\" });\n            } else {\n                setValidation({ isValid: true, message: \"\" });\n            }\n        }, [args.required, checked]);\n\n        return (\n            <Toggle\n                {...args}\n                checked={checked}\n                onChange={handleChange}\n                validation={validation}\n                required={args.required}\n            />\n        );\n    },\n    args: {\n        label: \"Enable feature\",\n        checked: false,\n        disabled: false,\n        required: true,\n        note: \"Note: This setting can be changed at any time.\",\n        validation: undefined\n    },\n    argTypes: {\n        label: {\n            description: \"Label text displayed inside the toggle button\",\n            control: \"text\"\n        },\n        checked: {\n            description: \"Determines if the toggle is active\",\n            control: \"boolean\"\n        },\n        disabled: {\n            description: \"Disables the toggle when set to true\",\n            control: \"boolean\"\n        },\n        required: {\n            description: \"Makes the toggle required when set to true\",\n            control: \"boolean\"\n        },\n        variant: {\n            description: \"Visual style: primary (default), outline, ghost, ghost-negative\",\n            control: \"select\",\n            options: [\"primary\", \"outline\", \"ghost\", \"ghost-negative\"]\n        },\n        size: {\n            description: \"Size of the toggle button\",\n            control: \"select\",\n            options: [\"sm\", \"md\", \"lg\", \"xl\"]\n        },\n        note: {\n            description: \"Additional note text below the toggle\",\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: \"Function called when the toggle state changes\"\n        }\n    }\n};\n"],"names":["meta","Toggle","Story","Tooltip","args","checked","setChecked","useState","value","Default","Checked","WithIcon","BoldIcon","WithIconChecked","IconOnly","IconOnlyChecked","Outline","Ghost","WithNotes","WithErrors","Disabled","Documentation","validation","setValidation","useEffect","handleChange","isChecked","undefined"],"mappings":"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"}

package/Toggle/primitives/TogglePrimitive.stories.d.ts

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