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

package/MultiFilePicker/MultiFilePicker.stories.js.map

@@ -1 +1 @@
-{"version":3,"file":"MultiFilePicker/MultiFilePicker.stories.js","sources":["../../src/MultiFilePicker/MultiFilePicker.stories.tsx"],"sourcesContent":["import React, { useState, useEffect } from \"react\";\nimport type { Meta, StoryObj } from \"@storybook/react-webpack5\";\nimport { type FileItemDto, MultiFilePicker } from \"~/MultiFilePicker/index.js\";\n\nconst getRandomNumber = (min: number, max: number): number =>\n    Math.floor(Math.random() * (max - min + 1)) + min;\n\nconst createFileList = (size: number = 10): FileItemDto[] => {\n    return Array.from({ length: size }, (_, index) => {\n        const width = getRandomNumber(500, 2000); // Random width between 500 and 2000\n        const height = getRandomNumber(500, 2000); // Random height between 500 and 2000\n        const fileSize = getRandomNumber(500000, 5000000); // Random file size between 500KB and 5MB\n\n        return {\n            name: `file-${index + 1}.jpg`,\n            mimeType: \"image/jpeg\",\n            size: fileSize,\n            url: `https://picsum.photos/${width}/${height}`\n        };\n    });\n};\n\nconst meta: Meta<typeof MultiFilePicker> = {\n    title: \"Components/Form/Multi FilePicker\",\n    component: MultiFilePicker,\n    argTypes: {\n        onSelectItem: { action: \"onSelectItem\" },\n        onEditItem: { action: \"onEditItem\" },\n        onRemoveItem: { action: \"onRemoveItem\" },\n        disabled: {\n            control: \"boolean\",\n            defaultValue: false\n        }\n    },\n    parameters: {\n        layout: \"padded\"\n    },\n    render: args => {\n        const [selectedFiles, setSelectedFiles] = useState<FileItemDto[]>([]);\n        return (\n            <MultiFilePicker\n                {...args}\n                values={selectedFiles}\n                onSelectItem={() => setSelectedFiles(createFileList())}\n                onReplaceItem={(_, index) =>\n                    setSelectedFiles(prevState => {\n                        if (!prevState) {\n                            return [];\n                        }\n\n                        return [\n                            ...prevState.slice(0, index),\n                            ...createFileList(1),\n                            ...prevState.slice(index + 1)\n                        ];\n                    })\n                }\n                onRemoveItem={item =>\n                    setSelectedFiles(prevState =>\n                        prevState?.filter(value => value.name !== item?.name)\n                    )\n                }\n                onEditItem={(item, i) => alert(`Editing ${item?.name} at position ${i}`)}\n            />\n        );\n    }\n};\n\nexport default meta;\ntype Story = StoryObj<typeof MultiFilePicker>;\n\nexport const Default: Story = {};\n\nexport const AreaType: Story = {\n    args: {\n        ...Default.args,\n        type: \"area\"\n    }\n};\n\nexport const AreaWithLabel: Story = {\n    args: {\n        ...AreaType.args,\n        label: \"Any field label\"\n    }\n};\n\nexport const AreaWithLabelRequired: Story = {\n    args: {\n        ...AreaType.args,\n        label: \"Any field label\",\n        required: true\n    }\n};\n\nexport const AreaWithDescription: Story = {\n    args: {\n        ...AreaType.args,\n        description: \"Provide the required information for processing your request.\"\n    }\n};\n\nexport const AreaWithNotes: Story = {\n    args: {\n        ...AreaType.args,\n        note: \"Note: Ensure your selection or input is accurate before proceeding.\"\n    }\n};\n\nexport const AreaWithErrors: Story = {\n    args: {\n        ...AreaType.args,\n        validation: {\n            isValid: false,\n            message: \"This field is required.\"\n        }\n    }\n};\n\nexport const AreaDisabled: Story = {\n    args: {\n        ...AreaType.args,\n        label: \"Any field label\",\n        disabled: true\n    }\n};\n\nexport const AreaWithValidateFunction: Story = {\n    args: {\n        ...AreaType.args\n    },\n    render: args => {\n        const [validation, setValidation] = useState<any>({ isValid: true, message: undefined });\n\n        const validate = async () => {\n            setValidation({ isValid: false, message: \"Any custom error message.\" });\n        };\n\n        return <MultiFilePicker {...args} validate={validate} validation={validation} />;\n    }\n};\n\nexport const AreaFullExample: Story = {\n    args: {\n        ...AreaType.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 Compact: Story = {\n    args: {\n        ...Default.args,\n        type: \"compact\"\n    }\n};\n\nexport const CompactWithLabel: Story = {\n    args: {\n        ...Compact.args,\n        label: \"Any field label\"\n    }\n};\n\nexport const CompactWithLabelRequired: Story = {\n    args: {\n        ...Compact.args,\n        label: \"Any field label\",\n        required: true\n    }\n};\n\nexport const CompactWithDescription: Story = {\n    args: {\n        ...Compact.args,\n        description: \"Provide the required information for processing your request.\"\n    }\n};\n\nexport const CompactWithNotes: Story = {\n    args: {\n        ...Compact.args,\n        note: \"Note: Ensure your selection or input is accurate before proceeding.\"\n    }\n};\n\nexport const CompactWithErrors: Story = {\n    args: {\n        ...Compact.args,\n        validation: {\n            isValid: false,\n            message: \"This field is required.\"\n        }\n    }\n};\n\nexport const CompactDisabled: Story = {\n    args: {\n        ...Compact.args,\n        label: \"Any field label\",\n        disabled: true\n    }\n};\n\nexport const CompactWithValidateFunction: Story = {\n    args: {\n        ...Compact.args\n    },\n    render: args => {\n        const [validation, setValidation] = useState<any>({ isValid: true, message: undefined });\n\n        const validate = async () => {\n            setValidation({ isValid: false, message: \"Any custom error message.\" });\n        };\n\n        return <MultiFilePicker {...args} validate={validate} validation={validation} />;\n    }\n};\n\nexport const CompactFullExample: Story = {\n    args: {\n        ...Compact.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 [selectedFiles, setSelectedFiles] = useState<FileItemDto[]>([]);\n        const [validation, setValidation] = useState({ isValid: true, message: \"\" });\n\n        // Update value when args.values changes\n        useEffect(() => {\n            if (!args.values) {\n                setSelectedFiles([]);\n            } else if (Array.isArray(args.values)) {\n                // Convert any string values to FileItemDto format\n                const formattedValues = args.values.map(value => {\n                    if (typeof value === \"string\") {\n                        return {\n                            name: value.split(\"/\").pop() || \"file\",\n                            mimeType: \"image/jpeg\", // Default mime type\n                            size: 0,\n                            url: value\n                        };\n                    }\n                    return value as FileItemDto;\n                });\n                setSelectedFiles(formattedValues);\n            }\n        }, [args.values]);\n\n        const handleSelect = () => {\n            setSelectedFiles(createFileList(3));\n            setValidation({ isValid: true, message: \"\" });\n        };\n\n        const handleReplace = (_: any, index: number) => {\n            setSelectedFiles(prevState => {\n                if (!prevState) {\n                    return [];\n                }\n\n                return [\n                    ...prevState.slice(0, index),\n                    ...createFileList(1),\n                    ...prevState.slice(index + 1)\n                ];\n            });\n            setValidation({ isValid: true, message: \"\" });\n        };\n\n        const handleEdit = (file: any, index: number) => {\n            if (file) {\n                console.log(\"Editing file:\", file, \"at index:\", index);\n                alert(`Editing File: ${file.name} at position ${index}`);\n            }\n        };\n\n        const handleRemove = (file: any, index: number) => {\n            setSelectedFiles(prevState => prevState?.filter((_, i) => i !== index));\n\n            if (args.required && (!selectedFiles || selectedFiles.length <= 1)) {\n                setValidation({ isValid: false, message: \"Please select at least one file\" });\n            }\n        };\n\n        // Validate on required change or value change\n        useEffect(() => {\n            if (args.required && (!selectedFiles || selectedFiles.length === 0)) {\n                setValidation({ isValid: false, message: \"Please select at least one file\" });\n            } else {\n                setValidation({ isValid: true, message: \"\" });\n            }\n        }, [args.required, selectedFiles]);\n\n        return (\n            <MultiFilePicker\n                {...args}\n                values={selectedFiles}\n                onSelectItem={handleSelect}\n                onReplaceItem={handleReplace}\n                onRemoveItem={handleRemove}\n                onEditItem={handleEdit}\n                validation={validation}\n            />\n        );\n    },\n    args: {\n        label: \"Upload Images\",\n        required: true,\n        disabled: false,\n        description: \"Select files to upload (JPG, PNG, PDF)\",\n        note: \"Note: Maximum file size is 5MB per file\",\n        type: \"area\",\n        values: [],\n        validation: undefined,\n        onSelectItem: undefined,\n        onReplaceItem: undefined,\n        onEditItem: undefined,\n        onRemoveItem: undefined\n    },\n    argTypes: {\n        label: {\n            description: \"Label text for the file picker\",\n            control: \"text\",\n            defaultValue: \"Upload Images\"\n        },\n        type: {\n            description: \"The type of file picker to display\",\n            control: \"select\",\n            options: [\"area\", \"compact\"],\n            defaultValue: \"area\"\n        },\n        required: {\n            description: \"Makes the field required when set to true\",\n            control: \"boolean\",\n            defaultValue: true\n        },\n        disabled: {\n            description: \"Disables the field when set to true\",\n            control: \"boolean\",\n            defaultValue: false\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        values: {\n            description: \"Array of selected files\",\n            control: \"object\"\n        },\n        validation: {\n            description:\n                \"Validation state and message. Please refer to the example code for details on usage.\"\n        },\n        onSelectItem: {\n            description:\n                \"Callback when user selects files - Please refer to the example code for details on usage.\",\n            action: \"onSelectItem\"\n        },\n        onReplaceItem: {\n            description:\n                \"Callback when user replaces a file - Please refer to the example code for details on usage.\",\n            action: \"onReplaceItem\"\n        },\n        onEditItem: {\n            description:\n                \"Callback when user edits a file - Please refer to the example code for details on usage.\",\n            action: \"onEditItem\"\n        },\n        onRemoveItem: {\n            description:\n                \"Callback when user removes a file - Please refer to the example code for details on usage.\",\n            action: \"onRemoveItem\"\n        }\n    }\n};\n"],"names":["getRandomNumber","min","max","Math","createFileList","size","Array","_","index","width","height","fileSize","meta","MultiFilePicker","args","selectedFiles","setSelectedFiles","useState","prevState","item","value","i","alert","Default","AreaType","AreaWithLabel","AreaWithLabelRequired","AreaWithDescription","AreaWithNotes","AreaWithErrors","AreaDisabled","AreaWithValidateFunction","validation","setValidation","undefined","validate","AreaFullExample","Compact","CompactWithLabel","CompactWithLabelRequired","CompactWithDescription","CompactWithNotes","CompactWithErrors","CompactDisabled","CompactWithValidateFunction","CompactFullExample","Documentation","useEffect","formattedValues","handleSelect","handleReplace","handleEdit","file","console","handleRemove"],"mappings":"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"}
+{"version":3,"file":"MultiFilePicker/MultiFilePicker.stories.js","sources":["../../src/MultiFilePicker/MultiFilePicker.stories.tsx"],"sourcesContent":["import React, { useState, useEffect } from \"react\";\nimport type { Meta, StoryObj } from \"@storybook/react\";\nimport { type FileItemDto, MultiFilePicker } from \"~/MultiFilePicker/index.js\";\n\nconst getRandomNumber = (min: number, max: number): number =>\n    Math.floor(Math.random() * (max - min + 1)) + min;\n\nconst createFileList = (size: number = 10): FileItemDto[] => {\n    return Array.from({ length: size }, (_, index) => {\n        const width = getRandomNumber(500, 2000); // Random width between 500 and 2000\n        const height = getRandomNumber(500, 2000); // Random height between 500 and 2000\n        const fileSize = getRandomNumber(500000, 5000000); // Random file size between 500KB and 5MB\n\n        return {\n            name: `file-${index + 1}.jpg`,\n            mimeType: \"image/jpeg\",\n            size: fileSize,\n            url: `https://picsum.photos/${width}/${height}`\n        };\n    });\n};\n\nconst meta: Meta<typeof MultiFilePicker> = {\n    title: \"Components/Form/Multi FilePicker\",\n    component: MultiFilePicker,\n    argTypes: {\n        onSelectItem: { action: \"onSelectItem\" },\n        onEditItem: { action: \"onEditItem\" },\n        onRemoveItem: { action: \"onRemoveItem\" },\n        disabled: {\n            control: \"boolean\",\n            defaultValue: false\n        }\n    },\n    parameters: {\n        layout: \"padded\"\n    },\n    render: args => {\n        const [selectedFiles, setSelectedFiles] = useState<FileItemDto[]>([]);\n        return (\n            <MultiFilePicker\n                {...args}\n                values={selectedFiles}\n                onSelectItem={() => setSelectedFiles(createFileList())}\n                onReplaceItem={(_, index) =>\n                    setSelectedFiles(prevState => {\n                        if (!prevState) {\n                            return [];\n                        }\n\n                        return [\n                            ...prevState.slice(0, index),\n                            ...createFileList(1),\n                            ...prevState.slice(index + 1)\n                        ];\n                    })\n                }\n                onRemoveItem={item =>\n                    setSelectedFiles(prevState =>\n                        prevState?.filter(value => value.name !== item?.name)\n                    )\n                }\n                onEditItem={(item, i) => alert(`Editing ${item?.name} at position ${i}`)}\n            />\n        );\n    }\n};\n\nexport default meta;\ntype Story = StoryObj<typeof MultiFilePicker>;\n\nexport const Default: Story = {};\n\nexport const AreaType: Story = {\n    args: {\n        ...Default.args,\n        type: \"area\"\n    }\n};\n\nexport const AreaWithLabel: Story = {\n    args: {\n        ...AreaType.args,\n        label: \"Any field label\"\n    }\n};\n\nexport const AreaWithLabelRequired: Story = {\n    args: {\n        ...AreaType.args,\n        label: \"Any field label\",\n        required: true\n    }\n};\n\nexport const AreaWithDescription: Story = {\n    args: {\n        ...AreaType.args,\n        description: \"Provide the required information for processing your request.\"\n    }\n};\n\nexport const AreaWithNotes: Story = {\n    args: {\n        ...AreaType.args,\n        note: \"Note: Ensure your selection or input is accurate before proceeding.\"\n    }\n};\n\nexport const AreaWithErrors: Story = {\n    args: {\n        ...AreaType.args,\n        validation: {\n            isValid: false,\n            message: \"This field is required.\"\n        }\n    }\n};\n\nexport const AreaDisabled: Story = {\n    args: {\n        ...AreaType.args,\n        label: \"Any field label\",\n        disabled: true\n    }\n};\n\nexport const AreaWithValidateFunction: Story = {\n    args: {\n        ...AreaType.args\n    },\n    render: args => {\n        const [validation, setValidation] = useState<any>({ isValid: true, message: undefined });\n\n        const validate = async () => {\n            setValidation({ isValid: false, message: \"Any custom error message.\" });\n        };\n\n        return <MultiFilePicker {...args} validate={validate} validation={validation} />;\n    }\n};\n\nexport const AreaFullExample: Story = {\n    args: {\n        ...AreaType.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 Compact: Story = {\n    args: {\n        ...Default.args,\n        type: \"compact\"\n    }\n};\n\nexport const CompactWithLabel: Story = {\n    args: {\n        ...Compact.args,\n        label: \"Any field label\"\n    }\n};\n\nexport const CompactWithLabelRequired: Story = {\n    args: {\n        ...Compact.args,\n        label: \"Any field label\",\n        required: true\n    }\n};\n\nexport const CompactWithDescription: Story = {\n    args: {\n        ...Compact.args,\n        description: \"Provide the required information for processing your request.\"\n    }\n};\n\nexport const CompactWithNotes: Story = {\n    args: {\n        ...Compact.args,\n        note: \"Note: Ensure your selection or input is accurate before proceeding.\"\n    }\n};\n\nexport const CompactWithErrors: Story = {\n    args: {\n        ...Compact.args,\n        validation: {\n            isValid: false,\n            message: \"This field is required.\"\n        }\n    }\n};\n\nexport const CompactDisabled: Story = {\n    args: {\n        ...Compact.args,\n        label: \"Any field label\",\n        disabled: true\n    }\n};\n\nexport const CompactWithValidateFunction: Story = {\n    args: {\n        ...Compact.args\n    },\n    render: args => {\n        const [validation, setValidation] = useState<any>({ isValid: true, message: undefined });\n\n        const validate = async () => {\n            setValidation({ isValid: false, message: \"Any custom error message.\" });\n        };\n\n        return <MultiFilePicker {...args} validate={validate} validation={validation} />;\n    }\n};\n\nexport const CompactFullExample: Story = {\n    args: {\n        ...Compact.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 [selectedFiles, setSelectedFiles] = useState<FileItemDto[]>([]);\n        const [validation, setValidation] = useState({ isValid: true, message: \"\" });\n\n        // Update value when args.values changes\n        useEffect(() => {\n            if (!args.values) {\n                setSelectedFiles([]);\n            } else if (Array.isArray(args.values)) {\n                // Convert any string values to FileItemDto format\n                const formattedValues = args.values.map(value => {\n                    if (typeof value === \"string\") {\n                        return {\n                            name: value.split(\"/\").pop() || \"file\",\n                            mimeType: \"image/jpeg\", // Default mime type\n                            size: 0,\n                            url: value\n                        };\n                    }\n                    return value as FileItemDto;\n                });\n                setSelectedFiles(formattedValues);\n            }\n        }, [args.values]);\n\n        const handleSelect = () => {\n            setSelectedFiles(createFileList(3));\n            setValidation({ isValid: true, message: \"\" });\n        };\n\n        const handleReplace = (_: any, index: number) => {\n            setSelectedFiles(prevState => {\n                if (!prevState) {\n                    return [];\n                }\n\n                return [\n                    ...prevState.slice(0, index),\n                    ...createFileList(1),\n                    ...prevState.slice(index + 1)\n                ];\n            });\n            setValidation({ isValid: true, message: \"\" });\n        };\n\n        const handleEdit = (file: any, index: number) => {\n            if (file) {\n                console.log(\"Editing file:\", file, \"at index:\", index);\n                alert(`Editing File: ${file.name} at position ${index}`);\n            }\n        };\n\n        const handleRemove = (file: any, index: number) => {\n            setSelectedFiles(prevState => prevState?.filter((_, i) => i !== index));\n\n            if (args.required && (!selectedFiles || selectedFiles.length <= 1)) {\n                setValidation({ isValid: false, message: \"Please select at least one file\" });\n            }\n        };\n\n        // Validate on required change or value change\n        useEffect(() => {\n            if (args.required && (!selectedFiles || selectedFiles.length === 0)) {\n                setValidation({ isValid: false, message: \"Please select at least one file\" });\n            } else {\n                setValidation({ isValid: true, message: \"\" });\n            }\n        }, [args.required, selectedFiles]);\n\n        return (\n            <MultiFilePicker\n                {...args}\n                values={selectedFiles}\n                onSelectItem={handleSelect}\n                onReplaceItem={handleReplace}\n                onRemoveItem={handleRemove}\n                onEditItem={handleEdit}\n                validation={validation}\n            />\n        );\n    },\n    args: {\n        label: \"Upload Images\",\n        required: true,\n        disabled: false,\n        description: \"Select files to upload (JPG, PNG, PDF)\",\n        note: \"Note: Maximum file size is 5MB per file\",\n        type: \"area\",\n        values: [],\n        validation: undefined,\n        onSelectItem: undefined,\n        onReplaceItem: undefined,\n        onEditItem: undefined,\n        onRemoveItem: undefined\n    },\n    argTypes: {\n        label: {\n            description: \"Label text for the file picker\",\n            control: \"text\",\n            defaultValue: \"Upload Images\"\n        },\n        type: {\n            description: \"The type of file picker to display\",\n            control: \"select\",\n            options: [\"area\", \"compact\"],\n            defaultValue: \"area\"\n        },\n        required: {\n            description: \"Makes the field required when set to true\",\n            control: \"boolean\",\n            defaultValue: true\n        },\n        disabled: {\n            description: \"Disables the field when set to true\",\n            control: \"boolean\",\n            defaultValue: false\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        values: {\n            description: \"Array of selected files\",\n            control: \"object\"\n        },\n        validation: {\n            description:\n                \"Validation state and message. Please refer to the example code for details on usage.\"\n        },\n        onSelectItem: {\n            description:\n                \"Callback when user selects files - Please refer to the example code for details on usage.\",\n            action: \"onSelectItem\"\n        },\n        onReplaceItem: {\n            description:\n                \"Callback when user replaces a file - Please refer to the example code for details on usage.\",\n            action: \"onReplaceItem\"\n        },\n        onEditItem: {\n            description:\n                \"Callback when user edits a file - Please refer to the example code for details on usage.\",\n            action: \"onEditItem\"\n        },\n        onRemoveItem: {\n            description:\n                \"Callback when user removes a file - Please refer to the example code for details on usage.\",\n            action: \"onRemoveItem\"\n        }\n    }\n};\n"],"names":["getRandomNumber","min","max","Math","createFileList","size","Array","_","index","width","height","fileSize","meta","MultiFilePicker","args","selectedFiles","setSelectedFiles","useState","prevState","item","value","i","alert","Default","AreaType","AreaWithLabel","AreaWithLabelRequired","AreaWithDescription","AreaWithNotes","AreaWithErrors","AreaDisabled","AreaWithValidateFunction","validation","setValidation","undefined","validate","AreaFullExample","Compact","CompactWithLabel","CompactWithLabelRequired","CompactWithDescription","CompactWithNotes","CompactWithErrors","CompactDisabled","CompactWithValidateFunction","CompactFullExample","Documentation","useEffect","formattedValues","handleSelect","handleReplace","handleEdit","file","console","handleRemove"],"mappings":"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"}

package/MultiFilePicker/primitives/MultiFilePickerPrimitive.stories.d.ts

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

package/MultiFilePicker/primitives/MultiFilePickerPrimitive.stories.js.map

@@ -1 +1 @@
-{"version":3,"file":"MultiFilePicker/primitives/MultiFilePickerPrimitive.stories.js","sources":["../../../src/MultiFilePicker/primitives/MultiFilePickerPrimitive.stories.tsx"],"sourcesContent":["import React, { useState } from \"react\";\nimport type { Meta, StoryObj } from \"@storybook/react-webpack5\";\nimport { MultiFilePickerPrimitive, type FileItemDto } from \"./MultiFilePickerPrimitive.js\";\n\nconst getRandomNumber = (min: number, max: number): number =>\n    Math.floor(Math.random() * (max - min + 1)) + min;\n\nconst createFileList = (size: number = 10): FileItemDto[] => {\n    return Array.from({ length: size }, (_, index) => {\n        const width = getRandomNumber(500, 2000); // Random width between 500 and 2000\n        const height = getRandomNumber(500, 2000); // Random height between 500 and 2000\n        const fileSize = getRandomNumber(500000, 5000000); // Random file size between 500KB and 5MB\n\n        return {\n            name: `file-${index + 1}.jpg`,\n            mimeType: \"image/jpeg\",\n            size: fileSize,\n            url: `https://picsum.photos/${width}/${height}`\n        };\n    });\n};\n\nconst meta: Meta<typeof MultiFilePickerPrimitive> = {\n    title: \"Components/Form Primitives/Multi FilePicker\",\n    component: MultiFilePickerPrimitive,\n    argTypes: {\n        onSelectItem: { action: \"onSelectItem\" },\n        onReplaceItem: { action: \"onReplaceItem\" },\n        onEditItem: { action: \"onEditItem\" },\n        onRemoveItem: { action: \"onRemoveItem\" },\n        disabled: {\n            control: \"boolean\",\n            defaultValue: false\n        }\n    },\n    parameters: {\n        layout: \"padded\"\n    },\n    render: args => {\n        const [selectedFiles, setSelectedFiles] = useState<FileItemDto[]>([]);\n        return (\n            <MultiFilePickerPrimitive\n                {...args}\n                values={selectedFiles}\n                onSelectItem={() => setSelectedFiles(createFileList())}\n                onReplaceItem={(_, index) =>\n                    setSelectedFiles(prevState => {\n                        if (!prevState) {\n                            return [];\n                        }\n\n                        return [\n                            ...prevState.slice(0, index),\n                            ...createFileList(1),\n                            ...prevState.slice(index + 1)\n                        ];\n                    })\n                }\n                onRemoveItem={item =>\n                    setSelectedFiles(prevState =>\n                        prevState?.filter(value => value.name !== item?.name)\n                    )\n                }\n                onEditItem={(item, i) => alert(`Editing ${item?.name} at position ${i}`)}\n            />\n        );\n    }\n};\n\nexport default meta;\ntype Story = StoryObj<typeof MultiFilePickerPrimitive>;\n\nexport const Default: Story = {\n    args: {\n        label: \"Add gallery files\"\n    }\n};\n\nexport const AreaType: Story = {\n    args: {\n        ...Default.args,\n        type: \"area\"\n    }\n};\n\nexport const AreaPrimaryVariant: Story = {\n    args: {\n        ...AreaType.args,\n        variant: \"primary\"\n    }\n};\n\nexport const AreaPrimaryVariantDisabled: Story = {\n    args: {\n        ...AreaPrimaryVariant.args,\n        disabled: true\n    }\n};\n\nexport const AreaPrimaryVariantInvalid: Story = {\n    args: {\n        ...AreaPrimaryVariant.args,\n        invalid: true\n    }\n};\n\nexport const AreaSecondaryVariant: Story = {\n    args: {\n        ...AreaType.args,\n        variant: \"secondary\"\n    }\n};\n\nexport const AreaSecondaryVariantDisabled: Story = {\n    args: {\n        ...AreaSecondaryVariant.args,\n        disabled: true\n    }\n};\n\nexport const AreaSecondaryVariantInvalid: Story = {\n    args: {\n        ...AreaSecondaryVariant.args,\n        invalid: true\n    }\n};\n\nexport const AreaGhostVariant: Story = {\n    args: {\n        ...AreaType.args,\n        variant: \"ghost\"\n    }\n};\n\nexport const AreaGhostVariantDisabled: Story = {\n    args: {\n        ...AreaGhostVariant.args,\n        disabled: true\n    }\n};\n\nexport const AreaGhostVariantInvalid: Story = {\n    args: {\n        ...AreaGhostVariant.args,\n        invalid: true\n    }\n};\n\nexport const AreaWithImagePreview: Story = {\n    args: {\n        ...AreaType.args,\n        renderFilePreview: props => <MultiFilePickerPrimitive.Preview.Image {...props} />\n    }\n};\n\nexport const AreaWithImagePreviewLight: Story = {\n    args: {\n        ...AreaWithImagePreview.args,\n        renderFilePreview: props => (\n            <MultiFilePickerPrimitive.Preview.Image variant={\"light\"} {...props} />\n        )\n    }\n};\n\nexport const AreaWithImagePreviewBase: Story = {\n    args: {\n        ...AreaWithImagePreview.args,\n        renderFilePreview: props => (\n            <MultiFilePickerPrimitive.Preview.Image variant={\"base\"} {...props} />\n        )\n    }\n};\n\nexport const AreaWithImagePreviewTransparent: Story = {\n    args: {\n        ...AreaWithImagePreview.args,\n        renderFilePreview: props => (\n            <MultiFilePickerPrimitive.Preview.Image variant={\"transparent\"} {...props} />\n        )\n    }\n};\n\nexport const AreaWithRichItemPreview: Story = {\n    args: {\n        ...AreaType.args,\n        renderFilePreview: props => <MultiFilePickerPrimitive.Preview.RichItem {...props} />\n    }\n};\n\nexport const AreaWithRichItemPreviewLight: Story = {\n    args: {\n        ...AreaWithRichItemPreview.args,\n        renderFilePreview: props => (\n            <MultiFilePickerPrimitive.Preview.RichItem variant={\"light\"} {...props} />\n        )\n    }\n};\n\nexport const AreaWithRichItemPreviewBase: Story = {\n    args: {\n        ...AreaWithRichItemPreview.args,\n        renderFilePreview: props => (\n            <MultiFilePickerPrimitive.Preview.RichItem variant={\"base\"} {...props} />\n        )\n    }\n};\n\nexport const AreaWithRichItemPreviewTransparent: Story = {\n    args: {\n        ...AreaWithRichItemPreview.args,\n        renderFilePreview: props => (\n            <MultiFilePickerPrimitive.Preview.RichItem variant={\"transparent\"} {...props} />\n        )\n    }\n};\n\nexport const AreaWithRichItemThumbnailPreview: Story = {\n    args: {\n        ...AreaType.args,\n        renderFilePreview: props => (\n            <MultiFilePickerPrimitive.Preview.RichItem preview={\"thumbnail\"} {...props} />\n        )\n    }\n};\n\nexport const AreaWithRichItemFileTypePreview: Story = {\n    args: {\n        ...AreaType.args,\n        values: [\n            {\n                name: \"export.csv\",\n                url: \"export.csv\",\n                mimeType: \"text/csv\",\n                size: 100000\n            }\n        ],\n        renderFilePreview: props => (\n            <MultiFilePickerPrimitive.Preview.RichItem preview={\"file-type\"} {...props} />\n        )\n    }\n};\n\nexport const AreaWithRichItemFileTypePlaceholder: Story = {\n    args: {\n        ...AreaType.args,\n        renderFilePreview: props => (\n            <MultiFilePickerPrimitive.Preview.RichItem preview={\"placeholder\"} {...props} />\n        )\n    }\n};\n\nexport const AreaWithTextOnlyPreview: Story = {\n    args: {\n        ...AreaType.args,\n        renderFilePreview: props => <MultiFilePickerPrimitive.Preview.TextOnly {...props} />\n    }\n};\n\nexport const AreaWithTextOnlyPreviewLight: Story = {\n    args: {\n        ...AreaWithTextOnlyPreview.args,\n        renderFilePreview: props => (\n            <MultiFilePickerPrimitive.Preview.TextOnly variant={\"light\"} {...props} />\n        )\n    }\n};\n\nexport const AreaWithTextOnlyPreviewBase: Story = {\n    args: {\n        ...AreaWithTextOnlyPreview.args,\n        renderFilePreview: props => (\n            <MultiFilePickerPrimitive.Preview.TextOnly variant={\"base\"} {...props} />\n        )\n    }\n};\n\nexport const AreaWithTextOnlyPreviewTransparent: Story = {\n    args: {\n        ...AreaWithTextOnlyPreview.args,\n        renderFilePreview: props => (\n            <MultiFilePickerPrimitive.Preview.TextOnly variant={\"transparent\"} {...props} />\n        )\n    }\n};\n\nexport const CompactType: Story = {\n    args: {\n        ...Default.args,\n        type: \"compact\"\n    }\n};\n\nexport const CompactPrimaryVariant: Story = {\n    args: {\n        ...CompactType.args,\n        variant: \"primary\"\n    }\n};\n\nexport const CompactPrimaryVariantDisabled: Story = {\n    args: {\n        ...CompactPrimaryVariant.args,\n        disabled: true\n    }\n};\n\nexport const CompactPrimaryVariantInvalid: Story = {\n    args: {\n        ...CompactPrimaryVariant.args,\n        invalid: true\n    }\n};\n\nexport const CompactSecondaryVariant: Story = {\n    args: {\n        ...CompactType.args,\n        variant: \"secondary\"\n    }\n};\n\nexport const CompactSecondaryVariantDisabled: Story = {\n    args: {\n        ...CompactSecondaryVariant.args,\n        disabled: true\n    }\n};\n\nexport const CompactSecondaryVariantInvalid: Story = {\n    args: {\n        ...CompactSecondaryVariant.args,\n        invalid: true\n    }\n};\n\nexport const CompactGhostVariant: Story = {\n    args: {\n        ...CompactType.args,\n        variant: \"ghost\"\n    }\n};\n\nexport const CompactGhostVariantDisabled: Story = {\n    args: {\n        ...CompactGhostVariant.args,\n        disabled: true\n    }\n};\n\nexport const CompactGhostVariantInvalid: Story = {\n    args: {\n        ...CompactGhostVariant.args,\n        invalid: true\n    }\n};\n\nexport const CompactWithTextOnlyPreviewSmall: Story = {\n    args: {\n        ...CompactType.args,\n        values: createFileList(50),\n        renderFilePreview: props => (\n            <MultiFilePickerPrimitive.Preview.TextOnly {...props} small={true} />\n        )\n    }\n};\n"],"names":["getRandomNumber","min","max","Math","createFileList","size","Array","_","index","width","height","fileSize","meta","MultiFilePickerPrimitive","args","selectedFiles","setSelectedFiles","useState","prevState","item","value","i","alert","Default","AreaType","AreaPrimaryVariant","AreaPrimaryVariantDisabled","AreaPrimaryVariantInvalid","AreaSecondaryVariant","AreaSecondaryVariantDisabled","AreaSecondaryVariantInvalid","AreaGhostVariant","AreaGhostVariantDisabled","AreaGhostVariantInvalid","AreaWithImagePreview","props","AreaWithImagePreviewLight","AreaWithImagePreviewBase","AreaWithImagePreviewTransparent","AreaWithRichItemPreview","AreaWithRichItemPreviewLight","AreaWithRichItemPreviewBase","AreaWithRichItemPreviewTransparent","AreaWithRichItemThumbnailPreview","AreaWithRichItemFileTypePreview","AreaWithRichItemFileTypePlaceholder","AreaWithTextOnlyPreview","AreaWithTextOnlyPreviewLight","AreaWithTextOnlyPreviewBase","AreaWithTextOnlyPreviewTransparent","CompactType","CompactPrimaryVariant","CompactPrimaryVariantDisabled","CompactPrimaryVariantInvalid","CompactSecondaryVariant","CompactSecondaryVariantDisabled","CompactSecondaryVariantInvalid","CompactGhostVariant","CompactGhostVariantDisabled","CompactGhostVariantInvalid","CompactWithTextOnlyPreviewSmall"],"mappings":";;AAIA,MAAMA,kBAAkB,CAACC,KAAaC,MAClCC,KAAK,KAAK,CAACA,KAAK,MAAM,KAAMD,CAAAA,MAAMD,MAAM,MAAMA;AAElD,MAAMG,iBAAiB,CAACC,OAAe,EAAE,GAC9BC,MAAM,IAAI,CAAC;QAAE,QAAQD;IAAK,GAAG,CAACE,GAAGC;QACpC,MAAMC,QAAQT,gBAAgB,KAAK;QACnC,MAAMU,SAASV,gBAAgB,KAAK;QACpC,MAAMW,WAAWX,gBAAgB,QAAQ;QAEzC,OAAO;YACH,MAAM,CAAC,KAAK,EAAEQ,QAAQ,EAAE,IAAI,CAAC;YAC7B,UAAU;YACV,MAAMG;YACN,KAAK,CAAC,sBAAsB,EAAEF,MAAM,CAAC,EAAEC,QAAQ;QACnD;IACJ;AAGJ,MAAME,OAA8C;IAChD,OAAO;IACP,WAAWC;IACX,UAAU;QACN,cAAc;YAAE,QAAQ;QAAe;QACvC,eAAe;YAAE,QAAQ;QAAgB;QACzC,YAAY;YAAE,QAAQ;QAAa;QACnC,cAAc;YAAE,QAAQ;QAAe;QACvC,UAAU;YACN,SAAS;YACT,cAAc;QAClB;IACJ;IACA,YAAY;QACR,QAAQ;IACZ;IACA,QAAQC,CAAAA;QACJ,MAAM,CAACC,eAAeC,iBAAiB,GAAGC,SAAwB,EAAE;QACpE,OAAO,WAAP,GACI,oBAACJ,0BAAwBA;YACpB,GAAGC,IAAI;YACR,QAAQC;YACR,cAAc,IAAMC,iBAAiBZ;YACrC,eAAe,CAACG,GAAGC,QACfQ,iBAAiBE,CAAAA;oBACb,IAAI,CAACA,WACD,OAAO,EAAE;oBAGb,OAAO;2BACAA,UAAU,KAAK,CAAC,GAAGV;2BACnBJ,eAAe;2BACfc,UAAU,KAAK,CAACV,QAAQ;qBAC9B;gBACL;YAEJ,cAAcW,CAAAA,OACVH,iBAAiBE,CAAAA,YACbA,WAAW,OAAOE,CAAAA,QAASA,MAAM,IAAI,KAAKD,MAAM;YAGxD,YAAY,CAACA,MAAME,IAAMC,MAAM,CAAC,QAAQ,EAAEH,MAAM,KAAK,aAAa,EAAEE,GAAG;;IAGnF;AACJ;AAEA,yCAAeT;AAGR,MAAMW,UAAiB;IAC1B,MAAM;QACF,OAAO;IACX;AACJ;AAEO,MAAMC,WAAkB;IAC3B,MAAM;QACF,GAAGD,QAAQ,IAAI;QACf,MAAM;IACV;AACJ;AAEO,MAAME,qBAA4B;IACrC,MAAM;QACF,GAAGD,SAAS,IAAI;QAChB,SAAS;IACb;AACJ;AAEO,MAAME,6BAAoC;IAC7C,MAAM;QACF,GAAGD,mBAAmB,IAAI;QAC1B,UAAU;IACd;AACJ;AAEO,MAAME,4BAAmC;IAC5C,MAAM;QACF,GAAGF,mBAAmB,IAAI;QAC1B,SAAS;IACb;AACJ;AAEO,MAAMG,uBAA8B;IACvC,MAAM;QACF,GAAGJ,SAAS,IAAI;QAChB,SAAS;IACb;AACJ;AAEO,MAAMK,+BAAsC;IAC/C,MAAM;QACF,GAAGD,qBAAqB,IAAI;QAC5B,UAAU;IACd;AACJ;AAEO,MAAME,8BAAqC;IAC9C,MAAM;QACF,GAAGF,qBAAqB,IAAI;QAC5B,SAAS;IACb;AACJ;AAEO,MAAMG,mBAA0B;IACnC,MAAM;QACF,GAAGP,SAAS,IAAI;QAChB,SAAS;IACb;AACJ;AAEO,MAAMQ,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,uBAA8B;IACvC,MAAM;QACF,GAAGV,SAAS,IAAI;QAChB,mBAAmBW,CAAAA,QAAAA,WAAAA,GAAS,oBAACtB,yBAAyB,OAAO,CAAC,KAAK,EAAKsB;IAC5E;AACJ;AAEO,MAAMC,4BAAmC;IAC5C,MAAM;QACF,GAAGF,qBAAqB,IAAI;QAC5B,mBAAmBC,CAAAA,QAAAA,WAAAA,GACf,oBAACtB,yBAAyB,OAAO,CAAC,KAAK;gBAAC,SAAS;gBAAU,GAAGsB,KAAK;;IAE3E;AACJ;AAEO,MAAME,2BAAkC;IAC3C,MAAM;QACF,GAAGH,qBAAqB,IAAI;QAC5B,mBAAmBC,CAAAA,QAAAA,WAAAA,GACf,oBAACtB,yBAAyB,OAAO,CAAC,KAAK;gBAAC,SAAS;gBAAS,GAAGsB,KAAK;;IAE1E;AACJ;AAEO,MAAMG,kCAAyC;IAClD,MAAM;QACF,GAAGJ,qBAAqB,IAAI;QAC5B,mBAAmBC,CAAAA,QAAAA,WAAAA,GACf,oBAACtB,yBAAyB,OAAO,CAAC,KAAK;gBAAC,SAAS;gBAAgB,GAAGsB,KAAK;;IAEjF;AACJ;AAEO,MAAMI,0BAAiC;IAC1C,MAAM;QACF,GAAGf,SAAS,IAAI;QAChB,mBAAmBW,CAAAA,QAAAA,WAAAA,GAAS,oBAACtB,yBAAyB,OAAO,CAAC,QAAQ,EAAKsB;IAC/E;AACJ;AAEO,MAAMK,+BAAsC;IAC/C,MAAM;QACF,GAAGD,wBAAwB,IAAI;QAC/B,mBAAmBJ,CAAAA,QAAAA,WAAAA,GACf,oBAACtB,yBAAyB,OAAO,CAAC,QAAQ;gBAAC,SAAS;gBAAU,GAAGsB,KAAK;;IAE9E;AACJ;AAEO,MAAMM,8BAAqC;IAC9C,MAAM;QACF,GAAGF,wBAAwB,IAAI;QAC/B,mBAAmBJ,CAAAA,QAAAA,WAAAA,GACf,oBAACtB,yBAAyB,OAAO,CAAC,QAAQ;gBAAC,SAAS;gBAAS,GAAGsB,KAAK;;IAE7E;AACJ;AAEO,MAAMO,qCAA4C;IACrD,MAAM;QACF,GAAGH,wBAAwB,IAAI;QAC/B,mBAAmBJ,CAAAA,QAAAA,WAAAA,GACf,oBAACtB,yBAAyB,OAAO,CAAC,QAAQ;gBAAC,SAAS;gBAAgB,GAAGsB,KAAK;;IAEpF;AACJ;AAEO,MAAMQ,mCAA0C;IACnD,MAAM;QACF,GAAGnB,SAAS,IAAI;QAChB,mBAAmBW,CAAAA,QAAAA,WAAAA,GACf,oBAACtB,yBAAyB,OAAO,CAAC,QAAQ;gBAAC,SAAS;gBAAc,GAAGsB,KAAK;;IAElF;AACJ;AAEO,MAAMS,kCAAyC;IAClD,MAAM;QACF,GAAGpB,SAAS,IAAI;QAChB,QAAQ;YACJ;gBACI,MAAM;gBACN,KAAK;gBACL,UAAU;gBACV,MAAM;YACV;SACH;QACD,mBAAmBW,CAAAA,QAAAA,WAAAA,GACf,oBAACtB,yBAAyB,OAAO,CAAC,QAAQ;gBAAC,SAAS;gBAAc,GAAGsB,KAAK;;IAElF;AACJ;AAEO,MAAMU,sCAA6C;IACtD,MAAM;QACF,GAAGrB,SAAS,IAAI;QAChB,mBAAmBW,CAAAA,QAAAA,WAAAA,GACf,oBAACtB,yBAAyB,OAAO,CAAC,QAAQ;gBAAC,SAAS;gBAAgB,GAAGsB,KAAK;;IAEpF;AACJ;AAEO,MAAMW,0BAAiC;IAC1C,MAAM;QACF,GAAGtB,SAAS,IAAI;QAChB,mBAAmBW,CAAAA,QAAAA,WAAAA,GAAS,oBAACtB,yBAAyB,OAAO,CAAC,QAAQ,EAAKsB;IAC/E;AACJ;AAEO,MAAMY,+BAAsC;IAC/C,MAAM;QACF,GAAGD,wBAAwB,IAAI;QAC/B,mBAAmBX,CAAAA,QAAAA,WAAAA,GACf,oBAACtB,yBAAyB,OAAO,CAAC,QAAQ;gBAAC,SAAS;gBAAU,GAAGsB,KAAK;;IAE9E;AACJ;AAEO,MAAMa,8BAAqC;IAC9C,MAAM;QACF,GAAGF,wBAAwB,IAAI;QAC/B,mBAAmBX,CAAAA,QAAAA,WAAAA,GACf,oBAACtB,yBAAyB,OAAO,CAAC,QAAQ;gBAAC,SAAS;gBAAS,GAAGsB,KAAK;;IAE7E;AACJ;AAEO,MAAMc,qCAA4C;IACrD,MAAM;QACF,GAAGH,wBAAwB,IAAI;QAC/B,mBAAmBX,CAAAA,QAAAA,WAAAA,GACf,oBAACtB,yBAAyB,OAAO,CAAC,QAAQ;gBAAC,SAAS;gBAAgB,GAAGsB,KAAK;;IAEpF;AACJ;AAEO,MAAMe,cAAqB;IAC9B,MAAM;QACF,GAAG3B,QAAQ,IAAI;QACf,MAAM;IACV;AACJ;AAEO,MAAM4B,wBAA+B;IACxC,MAAM;QACF,GAAGD,YAAY,IAAI;QACnB,SAAS;IACb;AACJ;AAEO,MAAME,gCAAuC;IAChD,MAAM;QACF,GAAGD,sBAAsB,IAAI;QAC7B,UAAU;IACd;AACJ;AAEO,MAAME,+BAAsC;IAC/C,MAAM;QACF,GAAGF,sBAAsB,IAAI;QAC7B,SAAS;IACb;AACJ;AAEO,MAAMG,0BAAiC;IAC1C,MAAM;QACF,GAAGJ,YAAY,IAAI;QACnB,SAAS;IACb;AACJ;AAEO,MAAMK,kCAAyC;IAClD,MAAM;QACF,GAAGD,wBAAwB,IAAI;QAC/B,UAAU;IACd;AACJ;AAEO,MAAME,iCAAwC;IACjD,MAAM;QACF,GAAGF,wBAAwB,IAAI;QAC/B,SAAS;IACb;AACJ;AAEO,MAAMG,sBAA6B;IACtC,MAAM;QACF,GAAGP,YAAY,IAAI;QACnB,SAAS;IACb;AACJ;AAEO,MAAMQ,8BAAqC;IAC9C,MAAM;QACF,GAAGD,oBAAoB,IAAI;QAC3B,UAAU;IACd;AACJ;AAEO,MAAME,6BAAoC;IAC7C,MAAM;QACF,GAAGF,oBAAoB,IAAI;QAC3B,SAAS;IACb;AACJ;AAEO,MAAMG,kCAAyC;IAClD,MAAM;QACF,GAAGV,YAAY,IAAI;QACnB,QAAQ9C,eAAe;QACvB,mBAAmB+B,CAAAA,QAAAA,WAAAA,GACf,oBAACtB,yBAAyB,OAAO,CAAC,QAAQ;gBAAE,GAAGsB,KAAK;gBAAE,OAAO;;IAErE;AACJ"}
+{"version":3,"file":"MultiFilePicker/primitives/MultiFilePickerPrimitive.stories.js","sources":["../../../src/MultiFilePicker/primitives/MultiFilePickerPrimitive.stories.tsx"],"sourcesContent":["import React, { useState } from \"react\";\nimport type { Meta, StoryObj } from \"@storybook/react\";\nimport { MultiFilePickerPrimitive, type FileItemDto } from \"./MultiFilePickerPrimitive.js\";\n\nconst getRandomNumber = (min: number, max: number): number =>\n    Math.floor(Math.random() * (max - min + 1)) + min;\n\nconst createFileList = (size: number = 10): FileItemDto[] => {\n    return Array.from({ length: size }, (_, index) => {\n        const width = getRandomNumber(500, 2000); // Random width between 500 and 2000\n        const height = getRandomNumber(500, 2000); // Random height between 500 and 2000\n        const fileSize = getRandomNumber(500000, 5000000); // Random file size between 500KB and 5MB\n\n        return {\n            name: `file-${index + 1}.jpg`,\n            mimeType: \"image/jpeg\",\n            size: fileSize,\n            url: `https://picsum.photos/${width}/${height}`\n        };\n    });\n};\n\nconst meta: Meta<typeof MultiFilePickerPrimitive> = {\n    title: \"Components/Form Primitives/Multi FilePicker\",\n    component: MultiFilePickerPrimitive,\n    argTypes: {\n        onSelectItem: { action: \"onSelectItem\" },\n        onReplaceItem: { action: \"onReplaceItem\" },\n        onEditItem: { action: \"onEditItem\" },\n        onRemoveItem: { action: \"onRemoveItem\" },\n        disabled: {\n            control: \"boolean\",\n            defaultValue: false\n        }\n    },\n    parameters: {\n        layout: \"padded\"\n    },\n    render: args => {\n        const [selectedFiles, setSelectedFiles] = useState<FileItemDto[]>([]);\n        return (\n            <MultiFilePickerPrimitive\n                {...args}\n                values={selectedFiles}\n                onSelectItem={() => setSelectedFiles(createFileList())}\n                onReplaceItem={(_, index) =>\n                    setSelectedFiles(prevState => {\n                        if (!prevState) {\n                            return [];\n                        }\n\n                        return [\n                            ...prevState.slice(0, index),\n                            ...createFileList(1),\n                            ...prevState.slice(index + 1)\n                        ];\n                    })\n                }\n                onRemoveItem={item =>\n                    setSelectedFiles(prevState =>\n                        prevState?.filter(value => value.name !== item?.name)\n                    )\n                }\n                onEditItem={(item, i) => alert(`Editing ${item?.name} at position ${i}`)}\n            />\n        );\n    }\n};\n\nexport default meta;\ntype Story = StoryObj<typeof MultiFilePickerPrimitive>;\n\nexport const Default: Story = {\n    args: {\n        label: \"Add gallery files\"\n    }\n};\n\nexport const AreaType: Story = {\n    args: {\n        ...Default.args,\n        type: \"area\"\n    }\n};\n\nexport const AreaPrimaryVariant: Story = {\n    args: {\n        ...AreaType.args,\n        variant: \"primary\"\n    }\n};\n\nexport const AreaPrimaryVariantDisabled: Story = {\n    args: {\n        ...AreaPrimaryVariant.args,\n        disabled: true\n    }\n};\n\nexport const AreaPrimaryVariantInvalid: Story = {\n    args: {\n        ...AreaPrimaryVariant.args,\n        invalid: true\n    }\n};\n\nexport const AreaSecondaryVariant: Story = {\n    args: {\n        ...AreaType.args,\n        variant: \"secondary\"\n    }\n};\n\nexport const AreaSecondaryVariantDisabled: Story = {\n    args: {\n        ...AreaSecondaryVariant.args,\n        disabled: true\n    }\n};\n\nexport const AreaSecondaryVariantInvalid: Story = {\n    args: {\n        ...AreaSecondaryVariant.args,\n        invalid: true\n    }\n};\n\nexport const AreaGhostVariant: Story = {\n    args: {\n        ...AreaType.args,\n        variant: \"ghost\"\n    }\n};\n\nexport const AreaGhostVariantDisabled: Story = {\n    args: {\n        ...AreaGhostVariant.args,\n        disabled: true\n    }\n};\n\nexport const AreaGhostVariantInvalid: Story = {\n    args: {\n        ...AreaGhostVariant.args,\n        invalid: true\n    }\n};\n\nexport const AreaWithImagePreview: Story = {\n    args: {\n        ...AreaType.args,\n        renderFilePreview: props => <MultiFilePickerPrimitive.Preview.Image {...props} />\n    }\n};\n\nexport const AreaWithImagePreviewLight: Story = {\n    args: {\n        ...AreaWithImagePreview.args,\n        renderFilePreview: props => (\n            <MultiFilePickerPrimitive.Preview.Image variant={\"light\"} {...props} />\n        )\n    }\n};\n\nexport const AreaWithImagePreviewBase: Story = {\n    args: {\n        ...AreaWithImagePreview.args,\n        renderFilePreview: props => (\n            <MultiFilePickerPrimitive.Preview.Image variant={\"base\"} {...props} />\n        )\n    }\n};\n\nexport const AreaWithImagePreviewTransparent: Story = {\n    args: {\n        ...AreaWithImagePreview.args,\n        renderFilePreview: props => (\n            <MultiFilePickerPrimitive.Preview.Image variant={\"transparent\"} {...props} />\n        )\n    }\n};\n\nexport const AreaWithRichItemPreview: Story = {\n    args: {\n        ...AreaType.args,\n        renderFilePreview: props => <MultiFilePickerPrimitive.Preview.RichItem {...props} />\n    }\n};\n\nexport const AreaWithRichItemPreviewLight: Story = {\n    args: {\n        ...AreaWithRichItemPreview.args,\n        renderFilePreview: props => (\n            <MultiFilePickerPrimitive.Preview.RichItem variant={\"light\"} {...props} />\n        )\n    }\n};\n\nexport const AreaWithRichItemPreviewBase: Story = {\n    args: {\n        ...AreaWithRichItemPreview.args,\n        renderFilePreview: props => (\n            <MultiFilePickerPrimitive.Preview.RichItem variant={\"base\"} {...props} />\n        )\n    }\n};\n\nexport const AreaWithRichItemPreviewTransparent: Story = {\n    args: {\n        ...AreaWithRichItemPreview.args,\n        renderFilePreview: props => (\n            <MultiFilePickerPrimitive.Preview.RichItem variant={\"transparent\"} {...props} />\n        )\n    }\n};\n\nexport const AreaWithRichItemThumbnailPreview: Story = {\n    args: {\n        ...AreaType.args,\n        renderFilePreview: props => (\n            <MultiFilePickerPrimitive.Preview.RichItem preview={\"thumbnail\"} {...props} />\n        )\n    }\n};\n\nexport const AreaWithRichItemFileTypePreview: Story = {\n    args: {\n        ...AreaType.args,\n        values: [\n            {\n                name: \"export.csv\",\n                url: \"export.csv\",\n                mimeType: \"text/csv\",\n                size: 100000\n            }\n        ],\n        renderFilePreview: props => (\n            <MultiFilePickerPrimitive.Preview.RichItem preview={\"file-type\"} {...props} />\n        )\n    }\n};\n\nexport const AreaWithRichItemFileTypePlaceholder: Story = {\n    args: {\n        ...AreaType.args,\n        renderFilePreview: props => (\n            <MultiFilePickerPrimitive.Preview.RichItem preview={\"placeholder\"} {...props} />\n        )\n    }\n};\n\nexport const AreaWithTextOnlyPreview: Story = {\n    args: {\n        ...AreaType.args,\n        renderFilePreview: props => <MultiFilePickerPrimitive.Preview.TextOnly {...props} />\n    }\n};\n\nexport const AreaWithTextOnlyPreviewLight: Story = {\n    args: {\n        ...AreaWithTextOnlyPreview.args,\n        renderFilePreview: props => (\n            <MultiFilePickerPrimitive.Preview.TextOnly variant={\"light\"} {...props} />\n        )\n    }\n};\n\nexport const AreaWithTextOnlyPreviewBase: Story = {\n    args: {\n        ...AreaWithTextOnlyPreview.args,\n        renderFilePreview: props => (\n            <MultiFilePickerPrimitive.Preview.TextOnly variant={\"base\"} {...props} />\n        )\n    }\n};\n\nexport const AreaWithTextOnlyPreviewTransparent: Story = {\n    args: {\n        ...AreaWithTextOnlyPreview.args,\n        renderFilePreview: props => (\n            <MultiFilePickerPrimitive.Preview.TextOnly variant={\"transparent\"} {...props} />\n        )\n    }\n};\n\nexport const CompactType: Story = {\n    args: {\n        ...Default.args,\n        type: \"compact\"\n    }\n};\n\nexport const CompactPrimaryVariant: Story = {\n    args: {\n        ...CompactType.args,\n        variant: \"primary\"\n    }\n};\n\nexport const CompactPrimaryVariantDisabled: Story = {\n    args: {\n        ...CompactPrimaryVariant.args,\n        disabled: true\n    }\n};\n\nexport const CompactPrimaryVariantInvalid: Story = {\n    args: {\n        ...CompactPrimaryVariant.args,\n        invalid: true\n    }\n};\n\nexport const CompactSecondaryVariant: Story = {\n    args: {\n        ...CompactType.args,\n        variant: \"secondary\"\n    }\n};\n\nexport const CompactSecondaryVariantDisabled: Story = {\n    args: {\n        ...CompactSecondaryVariant.args,\n        disabled: true\n    }\n};\n\nexport const CompactSecondaryVariantInvalid: Story = {\n    args: {\n        ...CompactSecondaryVariant.args,\n        invalid: true\n    }\n};\n\nexport const CompactGhostVariant: Story = {\n    args: {\n        ...CompactType.args,\n        variant: \"ghost\"\n    }\n};\n\nexport const CompactGhostVariantDisabled: Story = {\n    args: {\n        ...CompactGhostVariant.args,\n        disabled: true\n    }\n};\n\nexport const CompactGhostVariantInvalid: Story = {\n    args: {\n        ...CompactGhostVariant.args,\n        invalid: true\n    }\n};\n\nexport const CompactWithTextOnlyPreviewSmall: Story = {\n    args: {\n        ...CompactType.args,\n        values: createFileList(50),\n        renderFilePreview: props => (\n            <MultiFilePickerPrimitive.Preview.TextOnly {...props} small={true} />\n        )\n    }\n};\n"],"names":["getRandomNumber","min","max","Math","createFileList","size","Array","_","index","width","height","fileSize","meta","MultiFilePickerPrimitive","args","selectedFiles","setSelectedFiles","useState","prevState","item","value","i","alert","Default","AreaType","AreaPrimaryVariant","AreaPrimaryVariantDisabled","AreaPrimaryVariantInvalid","AreaSecondaryVariant","AreaSecondaryVariantDisabled","AreaSecondaryVariantInvalid","AreaGhostVariant","AreaGhostVariantDisabled","AreaGhostVariantInvalid","AreaWithImagePreview","props","AreaWithImagePreviewLight","AreaWithImagePreviewBase","AreaWithImagePreviewTransparent","AreaWithRichItemPreview","AreaWithRichItemPreviewLight","AreaWithRichItemPreviewBase","AreaWithRichItemPreviewTransparent","AreaWithRichItemThumbnailPreview","AreaWithRichItemFileTypePreview","AreaWithRichItemFileTypePlaceholder","AreaWithTextOnlyPreview","AreaWithTextOnlyPreviewLight","AreaWithTextOnlyPreviewBase","AreaWithTextOnlyPreviewTransparent","CompactType","CompactPrimaryVariant","CompactPrimaryVariantDisabled","CompactPrimaryVariantInvalid","CompactSecondaryVariant","CompactSecondaryVariantDisabled","CompactSecondaryVariantInvalid","CompactGhostVariant","CompactGhostVariantDisabled","CompactGhostVariantInvalid","CompactWithTextOnlyPreviewSmall"],"mappings":"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"}

package/MultiSelect/MultiSelect.stories.d.ts

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

package/MultiSelect/MultiSelect.stories.js.map

@@ -1 +1 @@
-{"version":3,"file":"MultiSelect/MultiSelect.stories.js","sources":["../../src/MultiSelect/MultiSelect.stories.tsx"],"sourcesContent":["import React, { useState } from \"react\";\nimport type { Meta, StoryObj } from \"@storybook/react-webpack5\";\nimport { MultiSelect } from \"./MultiSelect.js\";\n\nconst defaultOptions = [\n    { label: \"Option 1\", value: \"option-1\" },\n    { label: \"Option 2\", value: \"option-2\" },\n    { label: \"Option 3\", value: \"option-3\" },\n    { label: \"Option 4\", value: \"option-4\" },\n    { label: \"Option 5\", value: \"option-5\" },\n    { label: \"Option 6\", value: \"option-6\" }\n];\n\nconst meta: Meta<typeof MultiSelect> = {\n    title: \"Components/Form/MultiSelect\",\n    component: MultiSelect,\n    parameters: {\n        layout: \"padded\"\n    },\n    render: args => {\n        const [value, setValue] = useState<string[]>(args.value ?? []);\n        return <MultiSelect {...args} value={value} onChange={setValue} />;\n    }\n};\n\nexport default meta;\ntype Story = StoryObj<typeof MultiSelect>;\n\nexport const Default: Story = {\n    args: {\n        options: defaultOptions\n    }\n};\n\nexport const WithLabel: Story = {\n    args: {\n        ...Default.args,\n        label: \"Label\"\n    }\n};\n\nexport const WithPreselected: Story = {\n    args: {\n        ...Default.args,\n        label: \"Label\",\n        value: [\"option-1\", \"option-2\", \"option-3\"]\n    }\n};\n\nexport const WithDescription: Story = {\n    args: {\n        ...Default.args,\n        label: \"Label\",\n        description: \"Select one or more options from the list.\"\n    }\n};\n\nexport const WithErrors: Story = {\n    args: {\n        ...Default.args,\n        label: \"Label\",\n        validation: {\n            isValid: false,\n            message: \"At least one option must be selected.\"\n        }\n    }\n};\n\nexport const Disabled: Story = {\n    args: {\n        ...Default.args,\n        label: \"Label\",\n        disabled: true,\n        value: [\"option-1\", \"option-2\"]\n    }\n};\n\nexport const WithSelectionCount: Story = {\n    args: {\n        ...Default.args,\n        label: \"Label\",\n        value: [\"option-1\", \"option-2\", \"option-3\"],\n        showSelectionCount: true\n    }\n};\n\nexport const FullExample: Story = {\n    args: {\n        label: \"Label\",\n        description: \"Select one or more options from the list.\",\n        note: \"Note: Ensure your selection is accurate before proceeding.\",\n        required: true,\n        options: defaultOptions,\n        value: [\"option-1\", \"option-2\", \"option-3\"],\n        validation: {\n            isValid: false,\n            message: \"At least one option must be selected.\"\n        }\n    }\n};\n"],"names":["defaultOptions","meta","MultiSelect","args","value","setValue","useState","Default","WithLabel","WithPreselected","WithDescription","WithErrors","Disabled","WithSelectionCount","FullExample"],"mappings":";;AAIA,MAAMA,iBAAiB;IACnB;QAAE,OAAO;QAAY,OAAO;IAAW;IACvC;QAAE,OAAO;QAAY,OAAO;IAAW;IACvC;QAAE,OAAO;QAAY,OAAO;IAAW;IACvC;QAAE,OAAO;QAAY,OAAO;IAAW;IACvC;QAAE,OAAO;QAAY,OAAO;IAAW;IACvC;QAAE,OAAO;QAAY,OAAO;IAAW;CAC1C;AAED,MAAMC,OAAiC;IACnC,OAAO;IACP,WAAWC;IACX,YAAY;QACR,QAAQ;IACZ;IACA,QAAQC,CAAAA;QACJ,MAAM,CAACC,OAAOC,SAAS,GAAGC,SAAmBH,KAAK,KAAK,IAAI,EAAE;QAC7D,OAAO,WAAP,GAAO,oBAACD,aAAWA;YAAE,GAAGC,IAAI;YAAE,OAAOC;YAAO,UAAUC;;IAC1D;AACJ;AAEA,4BAAeJ;AAGR,MAAMM,UAAiB;IAC1B,MAAM;QACF,SAASP;IACb;AACJ;AAEO,MAAMQ,YAAmB;IAC5B,MAAM;QACF,GAAGD,QAAQ,IAAI;QACf,OAAO;IACX;AACJ;AAEO,MAAME,kBAAyB;IAClC,MAAM;QACF,GAAGF,QAAQ,IAAI;QACf,OAAO;QACP,OAAO;YAAC;YAAY;YAAY;SAAW;IAC/C;AACJ;AAEO,MAAMG,kBAAyB;IAClC,MAAM;QACF,GAAGH,QAAQ,IAAI;QACf,OAAO;QACP,aAAa;IACjB;AACJ;AAEO,MAAMI,aAAoB;IAC7B,MAAM;QACF,GAAGJ,QAAQ,IAAI;QACf,OAAO;QACP,YAAY;YACR,SAAS;YACT,SAAS;QACb;IACJ;AACJ;AAEO,MAAMK,WAAkB;IAC3B,MAAM;QACF,GAAGL,QAAQ,IAAI;QACf,OAAO;QACP,UAAU;QACV,OAAO;YAAC;YAAY;SAAW;IACnC;AACJ;AAEO,MAAMM,qBAA4B;IACrC,MAAM;QACF,GAAGN,QAAQ,IAAI;QACf,OAAO;QACP,OAAO;YAAC;YAAY;YAAY;SAAW;QAC3C,oBAAoB;IACxB;AACJ;AAEO,MAAMO,cAAqB;IAC9B,MAAM;QACF,OAAO;QACP,aAAa;QACb,MAAM;QACN,UAAU;QACV,SAASd;QACT,OAAO;YAAC;YAAY;YAAY;SAAW;QAC3C,YAAY;YACR,SAAS;YACT,SAAS;QACb;IACJ;AACJ"}
+{"version":3,"file":"MultiSelect/MultiSelect.stories.js","sources":["../../src/MultiSelect/MultiSelect.stories.tsx"],"sourcesContent":["import React, { useState } from \"react\";\nimport type { Meta, StoryObj } from \"@storybook/react\";\nimport { MultiSelect } from \"./MultiSelect.js\";\n\nconst defaultOptions = [\n    { label: \"Option 1\", value: \"option-1\" },\n    { label: \"Option 2\", value: \"option-2\" },\n    { label: \"Option 3\", value: \"option-3\" },\n    { label: \"Option 4\", value: \"option-4\" },\n    { label: \"Option 5\", value: \"option-5\" },\n    { label: \"Option 6\", value: \"option-6\" }\n];\n\nconst meta: Meta<typeof MultiSelect> = {\n    title: \"Components/Form/MultiSelect\",\n    component: MultiSelect,\n    parameters: {\n        layout: \"padded\"\n    },\n    render: args => {\n        const [value, setValue] = useState<string[]>(args.value ?? []);\n        return <MultiSelect {...args} value={value} onChange={setValue} />;\n    }\n};\n\nexport default meta;\ntype Story = StoryObj<typeof MultiSelect>;\n\nexport const Default: Story = {\n    args: {\n        options: defaultOptions\n    }\n};\n\nexport const WithLabel: Story = {\n    args: {\n        ...Default.args,\n        label: \"Label\"\n    }\n};\n\nexport const WithPreselected: Story = {\n    args: {\n        ...Default.args,\n        label: \"Label\",\n        value: [\"option-1\", \"option-2\", \"option-3\"]\n    }\n};\n\nexport const WithDescription: Story = {\n    args: {\n        ...Default.args,\n        label: \"Label\",\n        description: \"Select one or more options from the list.\"\n    }\n};\n\nexport const WithErrors: Story = {\n    args: {\n        ...Default.args,\n        label: \"Label\",\n        validation: {\n            isValid: false,\n            message: \"At least one option must be selected.\"\n        }\n    }\n};\n\nexport const Disabled: Story = {\n    args: {\n        ...Default.args,\n        label: \"Label\",\n        disabled: true,\n        value: [\"option-1\", \"option-2\"]\n    }\n};\n\nexport const WithSelectionCount: Story = {\n    args: {\n        ...Default.args,\n        label: \"Label\",\n        value: [\"option-1\", \"option-2\", \"option-3\"],\n        showSelectionCount: true\n    }\n};\n\nexport const FullExample: Story = {\n    args: {\n        label: \"Label\",\n        description: \"Select one or more options from the list.\",\n        note: \"Note: Ensure your selection is accurate before proceeding.\",\n        required: true,\n        options: defaultOptions,\n        value: [\"option-1\", \"option-2\", \"option-3\"],\n        validation: {\n            isValid: false,\n            message: \"At least one option must be selected.\"\n        }\n    }\n};\n"],"names":["defaultOptions","meta","MultiSelect","args","value","setValue","useState","Default","WithLabel","WithPreselected","WithDescription","WithErrors","Disabled","WithSelectionCount","FullExample"],"mappings":";;AAIA,MAAMA,iBAAiB;IACnB;QAAE,OAAO;QAAY,OAAO;IAAW;IACvC;QAAE,OAAO;QAAY,OAAO;IAAW;IACvC;QAAE,OAAO;QAAY,OAAO;IAAW;IACvC;QAAE,OAAO;QAAY,OAAO;IAAW;IACvC;QAAE,OAAO;QAAY,OAAO;IAAW;IACvC;QAAE,OAAO;QAAY,OAAO;IAAW;CAC1C;AAED,MAAMC,OAAiC;IACnC,OAAO;IACP,WAAWC;IACX,YAAY;QACR,QAAQ;IACZ;IACA,QAAQC,CAAAA;QACJ,MAAM,CAACC,OAAOC,SAAS,GAAGC,SAAmBH,KAAK,KAAK,IAAI,EAAE;QAC7D,OAAO,WAAP,GAAO,oBAACD,aAAWA;YAAE,GAAGC,IAAI;YAAE,OAAOC;YAAO,UAAUC;;IAC1D;AACJ;AAEA,4BAAeJ;AAGR,MAAMM,UAAiB;IAC1B,MAAM;QACF,SAASP;IACb;AACJ;AAEO,MAAMQ,YAAmB;IAC5B,MAAM;QACF,GAAGD,QAAQ,IAAI;QACf,OAAO;IACX;AACJ;AAEO,MAAME,kBAAyB;IAClC,MAAM;QACF,GAAGF,QAAQ,IAAI;QACf,OAAO;QACP,OAAO;YAAC;YAAY;YAAY;SAAW;IAC/C;AACJ;AAEO,MAAMG,kBAAyB;IAClC,MAAM;QACF,GAAGH,QAAQ,IAAI;QACf,OAAO;QACP,aAAa;IACjB;AACJ;AAEO,MAAMI,aAAoB;IAC7B,MAAM;QACF,GAAGJ,QAAQ,IAAI;QACf,OAAO;QACP,YAAY;YACR,SAAS;YACT,SAAS;QACb;IACJ;AACJ;AAEO,MAAMK,WAAkB;IAC3B,MAAM;QACF,GAAGL,QAAQ,IAAI;QACf,OAAO;QACP,UAAU;QACV,OAAO;YAAC;YAAY;SAAW;IACnC;AACJ;AAEO,MAAMM,qBAA4B;IACrC,MAAM;QACF,GAAGN,QAAQ,IAAI;QACf,OAAO;QACP,OAAO;YAAC;YAAY;YAAY;SAAW;QAC3C,oBAAoB;IACxB;AACJ;AAEO,MAAMO,cAAqB;IAC9B,MAAM;QACF,OAAO;QACP,aAAa;QACb,MAAM;QACN,UAAU;QACV,SAASd;QACT,OAAO;YAAC;YAAY;YAAY;SAAW;QAC3C,YAAY;YACR,SAAS;YACT,SAAS;QACb;IACJ;AACJ"}

package/Popover/Popover.stories.d.ts

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

package/Popover/Popover.stories.js.map

@@ -1 +1 @@
-{"version":3,"file":"Popover/Popover.stories.js","sources":["../../src/Popover/Popover.stories.tsx"],"sourcesContent":["import React from \"react\";\nimport type { Meta, StoryObj } from \"@storybook/react-webpack5\";\nimport { Popover } from \"./Popover.js\";\n\nconst meta: Meta<typeof Popover> = {\n    title: \"Components/Popover\",\n    component: Popover,\n    parameters: {\n        layout: \"padded\"\n    },\n    argTypes: {\n        align: {\n            control: \"select\",\n            options: [\"start\", \"center\", \"end\"]\n        },\n        side: {\n            control: \"select\",\n            options: [\"top\", \"bottom\", \"left\", \"right\"]\n        }\n    },\n    decorators: [\n        Story => (\n            <div className=\"bg-[#f4f4f4] flex items-center justify-center w-full h-[300px]\">\n                <Story />\n            </div>\n        )\n    ]\n};\n\nexport default meta;\n\ntype Story = StoryObj<typeof Popover>;\n\nexport const Default: Story = {\n    args: {\n        trigger: <p>Popover trigger</p>,\n        content: (\n            <div className={\"w-[260px]\"}>\n                <strong>Lorem ipsum dolor sit amet</strong>, consectetur adipiscing elit. Morbi\n                lectus leo, dapibus vitae mollis dictum, vulputate eget lorem. Aliquam rutrum auctor\n                tempus.\n            </div>\n        )\n    }\n};\n\nexport const AccentVariant: Story = {\n    args: {\n        ...Default.args,\n        variant: \"accent\"\n    }\n};\n\nexport const WithArrowAccentVariant: Story = {\n    args: {\n        ...AccentVariant.args,\n        arrow: true\n    }\n};\n\nexport const SubtleVariant: Story = {\n    args: {\n        ...Default.args,\n        variant: \"subtle\"\n    },\n    decorators: [\n        Story => (\n            <div className=\"flex items-center justify-center bg-neutral-dark text-neutral-light w-full h-[300px]\">\n                <Story />\n            </div>\n        )\n    ]\n};\n\nexport const WithArrowSubtleVariant: Story = {\n    args: {\n        variant: \"subtle\",\n        trigger: <p>Popover trigger</p>,\n        arrow: true,\n        content: (\n            <div className={\"w-[260px]\"}>\n                <strong>Lorem ipsum dolor sit amet</strong>, consectetur adipiscing elit. Morbi\n                lectus leo, dapibus vitae mollis dictum, vulputate eget lorem. Aliquam rutrum auctor\n                tempus.\n            </div>\n        )\n    },\n    decorators: SubtleVariant.decorators\n};\n\nexport const Documentation: Story = {\n    args: {\n        align: \"center\",\n        side: \"bottom\",\n        variant: \"subtle\",\n        arrow: false,\n        close: false,\n        trigger: <p>Popover trigger</p>,\n        content: (\n            <div className={\"w-[260px]\"}>\n                <strong>Lorem ipsum dolor sit amet</strong>, consectetur adipiscing elit. Morbi\n                lectus leo, dapibus vitae mollis dictum, vulputate eget lorem. Aliquam rutrum auctor\n                tempus.\n            </div>\n        )\n    },\n    argTypes: {\n        trigger: {\n            description:\n                \"The element that triggers the popover when clicked. Please refer to the example code for details.\"\n        },\n        content: {\n            description:\n                \"The content to display inside the popover. Please refer to the example code for details.\"\n        },\n        side: {\n            description: \"The side of the trigger where the popover appears.\",\n            control: \"select\",\n            options: [\"top\", \"right\", \"bottom\", \"left\"]\n        },\n        align: {\n            description: \"The alignment of the popover relative to the trigger.\",\n            control: \"select\",\n            options: [\"start\", \"center\", \"end\"]\n        },\n        variant: {\n            description: \"The visual style variant of the popover.\",\n            control: \"select\",\n            options: [\"accent\", \"subtle\"]\n        },\n        arrow: {\n            description: \"Whether to show an arrow pointing to the trigger.\",\n            control: \"boolean\"\n        },\n        close: {\n            description: \"Whether to show a close button inside the popover.\",\n            control: \"boolean\"\n        }\n    }\n};\n"],"names":["meta","Popover","Story","Default","AccentVariant","WithArrowAccentVariant","SubtleVariant","WithArrowSubtleVariant","Documentation"],"mappings":";;AAIA,MAAMA,OAA6B;IAC/B,OAAO;IACP,WAAWC;IACX,YAAY;QACR,QAAQ;IACZ;IACA,UAAU;QACN,OAAO;YACH,SAAS;YACT,SAAS;gBAAC;gBAAS;gBAAU;aAAM;QACvC;QACA,MAAM;YACF,SAAS;YACT,SAAS;gBAAC;gBAAO;gBAAU;gBAAQ;aAAQ;QAC/C;IACJ;IACA,YAAY;QACRC,CAAAA,QAAAA,WAAAA,GACI,oBAAC;gBAAI,WAAU;6BACX,oBAACA,OAAAA;KAGZ;AACL;AAEA,wBAAeF;AAIR,MAAMG,UAAiB;IAC1B,MAAM;QACF,SAAS,WAAT,GAAS,oBAAC,WAAE;QACZ,SAAS,WAAT,GACI,oBAAC;YAAI,WAAW;yBACZ,oBAAC,gBAAO,+BAAmC;IAKvD;AACJ;AAEO,MAAMC,gBAAuB;IAChC,MAAM;QACF,GAAGD,QAAQ,IAAI;QACf,SAAS;IACb;AACJ;AAEO,MAAME,yBAAgC;IACzC,MAAM;QACF,GAAGD,cAAc,IAAI;QACrB,OAAO;IACX;AACJ;AAEO,MAAME,gBAAuB;IAChC,MAAM;QACF,GAAGH,QAAQ,IAAI;QACf,SAAS;IACb;IACA,YAAY;QACRD,CAAAA,QAAAA,WAAAA,GACI,oBAAC;gBAAI,WAAU;6BACX,oBAACA,OAAAA;KAGZ;AACL;AAEO,MAAMK,yBAAgC;IACzC,MAAM;QACF,SAAS;QACT,SAAS,WAAT,GAAS,oBAAC,WAAE;QACZ,OAAO;QACP,SAAS,WAAT,GACI,oBAAC;YAAI,WAAW;yBACZ,oBAAC,gBAAO,+BAAmC;IAKvD;IACA,YAAYD,cAAc,UAAU;AACxC;AAEO,MAAME,gBAAuB;IAChC,MAAM;QACF,OAAO;QACP,MAAM;QACN,SAAS;QACT,OAAO;QACP,OAAO;QACP,SAAS,WAAT,GAAS,oBAAC,WAAE;QACZ,SAAS,WAAT,GACI,oBAAC;YAAI,WAAW;yBACZ,oBAAC,gBAAO,+BAAmC;IAKvD;IACA,UAAU;QACN,SAAS;YACL,aACI;QACR;QACA,SAAS;YACL,aACI;QACR;QACA,MAAM;YACF,aAAa;YACb,SAAS;YACT,SAAS;gBAAC;gBAAO;gBAAS;gBAAU;aAAO;QAC/C;QACA,OAAO;YACH,aAAa;YACb,SAAS;YACT,SAAS;gBAAC;gBAAS;gBAAU;aAAM;QACvC;QACA,SAAS;YACL,aAAa;YACb,SAAS;YACT,SAAS;gBAAC;gBAAU;aAAS;QACjC;QACA,OAAO;YACH,aAAa;YACb,SAAS;QACb;QACA,OAAO;YACH,aAAa;YACb,SAAS;QACb;IACJ;AACJ"}
+{"version":3,"file":"Popover/Popover.stories.js","sources":["../../src/Popover/Popover.stories.tsx"],"sourcesContent":["import React from \"react\";\nimport type { Meta, StoryObj } from \"@storybook/react\";\nimport { Popover } from \"./Popover.js\";\n\nconst meta: Meta<typeof Popover> = {\n    title: \"Components/Popover\",\n    component: Popover,\n    parameters: {\n        layout: \"padded\"\n    },\n    argTypes: {\n        align: {\n            control: \"select\",\n            options: [\"start\", \"center\", \"end\"]\n        },\n        side: {\n            control: \"select\",\n            options: [\"top\", \"bottom\", \"left\", \"right\"]\n        }\n    },\n    decorators: [\n        Story => (\n            <div className=\"bg-[#f4f4f4] flex items-center justify-center w-full h-[300px]\">\n                <Story />\n            </div>\n        )\n    ]\n};\n\nexport default meta;\n\ntype Story = StoryObj<typeof Popover>;\n\nexport const Default: Story = {\n    args: {\n        trigger: <p>Popover trigger</p>,\n        content: (\n            <div className={\"w-[260px]\"}>\n                <strong>Lorem ipsum dolor sit amet</strong>, consectetur adipiscing elit. Morbi\n                lectus leo, dapibus vitae mollis dictum, vulputate eget lorem. Aliquam rutrum auctor\n                tempus.\n            </div>\n        )\n    }\n};\n\nexport const AccentVariant: Story = {\n    args: {\n        ...Default.args,\n        variant: \"accent\"\n    }\n};\n\nexport const WithArrowAccentVariant: Story = {\n    args: {\n        ...AccentVariant.args,\n        arrow: true\n    }\n};\n\nexport const SubtleVariant: Story = {\n    args: {\n        ...Default.args,\n        variant: \"subtle\"\n    },\n    decorators: [\n        Story => (\n            <div className=\"flex items-center justify-center bg-neutral-dark text-neutral-light w-full h-[300px]\">\n                <Story />\n            </div>\n        )\n    ]\n};\n\nexport const WithArrowSubtleVariant: Story = {\n    args: {\n        variant: \"subtle\",\n        trigger: <p>Popover trigger</p>,\n        arrow: true,\n        content: (\n            <div className={\"w-[260px]\"}>\n                <strong>Lorem ipsum dolor sit amet</strong>, consectetur adipiscing elit. Morbi\n                lectus leo, dapibus vitae mollis dictum, vulputate eget lorem. Aliquam rutrum auctor\n                tempus.\n            </div>\n        )\n    },\n    decorators: SubtleVariant.decorators\n};\n\nexport const Documentation: Story = {\n    args: {\n        align: \"center\",\n        side: \"bottom\",\n        variant: \"subtle\",\n        arrow: false,\n        close: false,\n        trigger: <p>Popover trigger</p>,\n        content: (\n            <div className={\"w-[260px]\"}>\n                <strong>Lorem ipsum dolor sit amet</strong>, consectetur adipiscing elit. Morbi\n                lectus leo, dapibus vitae mollis dictum, vulputate eget lorem. Aliquam rutrum auctor\n                tempus.\n            </div>\n        )\n    },\n    argTypes: {\n        trigger: {\n            description:\n                \"The element that triggers the popover when clicked. Please refer to the example code for details.\"\n        },\n        content: {\n            description:\n                \"The content to display inside the popover. Please refer to the example code for details.\"\n        },\n        side: {\n            description: \"The side of the trigger where the popover appears.\",\n            control: \"select\",\n            options: [\"top\", \"right\", \"bottom\", \"left\"]\n        },\n        align: {\n            description: \"The alignment of the popover relative to the trigger.\",\n            control: \"select\",\n            options: [\"start\", \"center\", \"end\"]\n        },\n        variant: {\n            description: \"The visual style variant of the popover.\",\n            control: \"select\",\n            options: [\"accent\", \"subtle\"]\n        },\n        arrow: {\n            description: \"Whether to show an arrow pointing to the trigger.\",\n            control: \"boolean\"\n        },\n        close: {\n            description: \"Whether to show a close button inside the popover.\",\n            control: \"boolean\"\n        }\n    }\n};\n"],"names":["meta","Popover","Story","Default","AccentVariant","WithArrowAccentVariant","SubtleVariant","WithArrowSubtleVariant","Documentation"],"mappings":";;AAIA,MAAMA,OAA6B;IAC/B,OAAO;IACP,WAAWC;IACX,YAAY;QACR,QAAQ;IACZ;IACA,UAAU;QACN,OAAO;YACH,SAAS;YACT,SAAS;gBAAC;gBAAS;gBAAU;aAAM;QACvC;QACA,MAAM;YACF,SAAS;YACT,SAAS;gBAAC;gBAAO;gBAAU;gBAAQ;aAAQ;QAC/C;IACJ;IACA,YAAY;QACRC,CAAAA,QAAAA,WAAAA,GACI,oBAAC;gBAAI,WAAU;6BACX,oBAACA,OAAAA;KAGZ;AACL;AAEA,wBAAeF;AAIR,MAAMG,UAAiB;IAC1B,MAAM;QACF,SAAS,WAAT,GAAS,oBAAC,WAAE;QACZ,SAAS,WAAT,GACI,oBAAC;YAAI,WAAW;yBACZ,oBAAC,gBAAO,+BAAmC;IAKvD;AACJ;AAEO,MAAMC,gBAAuB;IAChC,MAAM;QACF,GAAGD,QAAQ,IAAI;QACf,SAAS;IACb;AACJ;AAEO,MAAME,yBAAgC;IACzC,MAAM;QACF,GAAGD,cAAc,IAAI;QACrB,OAAO;IACX;AACJ;AAEO,MAAME,gBAAuB;IAChC,MAAM;QACF,GAAGH,QAAQ,IAAI;QACf,SAAS;IACb;IACA,YAAY;QACRD,CAAAA,QAAAA,WAAAA,GACI,oBAAC;gBAAI,WAAU;6BACX,oBAACA,OAAAA;KAGZ;AACL;AAEO,MAAMK,yBAAgC;IACzC,MAAM;QACF,SAAS;QACT,SAAS,WAAT,GAAS,oBAAC,WAAE;QACZ,OAAO;QACP,SAAS,WAAT,GACI,oBAAC;YAAI,WAAW;yBACZ,oBAAC,gBAAO,+BAAmC;IAKvD;IACA,YAAYD,cAAc,UAAU;AACxC;AAEO,MAAME,gBAAuB;IAChC,MAAM;QACF,OAAO;QACP,MAAM;QACN,SAAS;QACT,OAAO;QACP,OAAO;QACP,SAAS,WAAT,GAAS,oBAAC,WAAE;QACZ,SAAS,WAAT,GACI,oBAAC;YAAI,WAAW;yBACZ,oBAAC,gBAAO,+BAAmC;IAKvD;IACA,UAAU;QACN,SAAS;YACL,aACI;QACR;QACA,SAAS;YACL,aACI;QACR;QACA,MAAM;YACF,aAAa;YACb,SAAS;YACT,SAAS;gBAAC;gBAAO;gBAAS;gBAAU;aAAO;QAC/C;QACA,OAAO;YACH,aAAa;YACb,SAAS;YACT,SAAS;gBAAC;gBAAS;gBAAU;aAAM;QACvC;QACA,SAAS;YACL,aAAa;YACb,SAAS;YACT,SAAS;gBAAC;gBAAU;aAAS;QACjC;QACA,OAAO;YACH,aAAa;YACb,SAAS;QACb;QACA,OAAO;YACH,aAAa;YACb,SAAS;QACb;IACJ;AACJ"}

package/ProgressBar/ProgressBar.stories.d.ts

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

package/ProgressBar/ProgressBar.stories.js.map

@@ -1 +1 @@
-{"version":3,"file":"ProgressBar/ProgressBar.stories.js","sources":["../../src/ProgressBar/ProgressBar.stories.tsx"],"sourcesContent":["import React, { useState, useEffect } from \"react\";\nimport type { Meta, StoryObj } from \"@storybook/react-webpack5\";\nimport { ProgressBar } from \"./ProgressBar.js\";\n\nconst meta: Meta<typeof ProgressBar> = {\n    title: \"Components/ProgressBar\",\n    component: ProgressBar,\n    parameters: {\n        layout: \"padded\"\n    }\n};\n\nexport const Documentation: Story = {\n    args: {\n        value: 50\n    },\n    argTypes: {\n        value: {\n            description: \"Current progress value (0-100)\",\n            control: { type: \"number\", min: 0, max: 100 }\n        },\n        max: {\n            description: \"Maximum value for the progress bar. Defaults to 100.\",\n            control: { type: \"number\", min: 1 }\n        },\n        valuePosition: {\n            description:\n                \"Position of the value label relative to the progress bar. Can be 'start', 'end',  or 'both'. Defaults to 'undefined'.\",\n            control: {\n                type: \"select\",\n                options: [\"start\", \"end\", \"both\"]\n            }\n        }\n    }\n};\n\nexport default meta;\ntype Story = StoryObj<typeof ProgressBar>;\n\nexport const Default: Story = {\n    args: {\n        value: 50\n    }\n};\n\nexport const WithCustomMaxValue: Story = {\n    args: {\n        ...Default.args,\n        max: 200\n    }\n};\n\nexport const WithValuePositionStart: Story = {\n    args: {\n        ...Default.args,\n        valuePosition: \"start\"\n    }\n};\n\nexport const WithValuePositionEnd: Story = {\n    args: {\n        ...Default.args,\n        valuePosition: \"end\"\n    }\n};\n\nexport const WithValuePositionBoth: Story = {\n    args: {\n        ...Default.args,\n        valuePosition: \"both\"\n    }\n};\n\nexport const WithGetValueLabel: Story = {\n    args: {\n        ...Default.args,\n        getValueLabel: (value: number) => `${value} mb`\n    }\n};\n\nexport const WithControlledValue: Story = {\n    args: {\n        value: 0\n    },\n    render: args => {\n        const [value, setValue] = useState(args.value);\n\n        useEffect(() => {\n            const interval = setInterval(() => {\n                setValue((prevValue = 0) => {\n                    const value = Number(prevValue);\n\n                    if (value === 100) {\n                        return value;\n                    }\n                    return value + 5;\n                });\n            }, 100);\n\n            return () => clearInterval(interval);\n        }, []);\n\n        return <ProgressBar {...args} value={value} />;\n    }\n};\n"],"names":["meta","ProgressBar","Documentation","Default","WithCustomMaxValue","WithValuePositionStart","WithValuePositionEnd","WithValuePositionBoth","WithGetValueLabel","value","WithControlledValue","args","setValue","useState","useEffect","interval","setInterval","prevValue","Number","clearInterval"],"mappings":";;AAIA,MAAMA,OAAiC;IACnC,OAAO;IACP,WAAWC;IACX,YAAY;QACR,QAAQ;IACZ;AACJ;AAEO,MAAMC,gBAAuB;IAChC,MAAM;QACF,OAAO;IACX;IACA,UAAU;QACN,OAAO;YACH,aAAa;YACb,SAAS;gBAAE,MAAM;gBAAU,KAAK;gBAAG,KAAK;YAAI;QAChD;QACA,KAAK;YACD,aAAa;YACb,SAAS;gBAAE,MAAM;gBAAU,KAAK;YAAE;QACtC;QACA,eAAe;YACX,aACI;YACJ,SAAS;gBACL,MAAM;gBACN,SAAS;oBAAC;oBAAS;oBAAO;iBAAO;YACrC;QACJ;IACJ;AACJ;AAEA,4BAAeF;AAGR,MAAMG,UAAiB;IAC1B,MAAM;QACF,OAAO;IACX;AACJ;AAEO,MAAMC,qBAA4B;IACrC,MAAM;QACF,GAAGD,QAAQ,IAAI;QACf,KAAK;IACT;AACJ;AAEO,MAAME,yBAAgC;IACzC,MAAM;QACF,GAAGF,QAAQ,IAAI;QACf,eAAe;IACnB;AACJ;AAEO,MAAMG,uBAA8B;IACvC,MAAM;QACF,GAAGH,QAAQ,IAAI;QACf,eAAe;IACnB;AACJ;AAEO,MAAMI,wBAA+B;IACxC,MAAM;QACF,GAAGJ,QAAQ,IAAI;QACf,eAAe;IACnB;AACJ;AAEO,MAAMK,oBAA2B;IACpC,MAAM;QACF,GAAGL,QAAQ,IAAI;QACf,eAAe,CAACM,QAAkB,GAAGA,MAAM,GAAG,CAAC;IACnD;AACJ;AAEO,MAAMC,sBAA6B;IACtC,MAAM;QACF,OAAO;IACX;IACA,QAAQC,CAAAA;QACJ,MAAM,CAACF,OAAOG,SAAS,GAAGC,SAASF,KAAK,KAAK;QAE7CG,UAAU;YACN,MAAMC,WAAWC,YAAY;gBACzBJ,SAAS,CAACK,YAAY,CAAC;oBACnB,MAAMR,QAAQS,OAAOD;oBAErB,IAAIR,AAAU,QAAVA,OACA,OAAOA;oBAEX,OAAOA,QAAQ;gBACnB;YACJ,GAAG;YAEH,OAAO,IAAMU,cAAcJ;QAC/B,GAAG,EAAE;QAEL,OAAO,WAAP,GAAO,oBAACd,aAAWA;YAAE,GAAGU,IAAI;YAAE,OAAOF;;IACzC;AACJ"}
+{"version":3,"file":"ProgressBar/ProgressBar.stories.js","sources":["../../src/ProgressBar/ProgressBar.stories.tsx"],"sourcesContent":["import React, { useState, useEffect } from \"react\";\nimport type { Meta, StoryObj } from \"@storybook/react\";\nimport { ProgressBar } from \"./ProgressBar.js\";\n\nconst meta: Meta<typeof ProgressBar> = {\n    title: \"Components/ProgressBar\",\n    component: ProgressBar,\n    parameters: {\n        layout: \"padded\"\n    }\n};\n\nexport const Documentation: Story = {\n    args: {\n        value: 50\n    },\n    argTypes: {\n        value: {\n            description: \"Current progress value (0-100)\",\n            control: { type: \"number\", min: 0, max: 100 }\n        },\n        max: {\n            description: \"Maximum value for the progress bar. Defaults to 100.\",\n            control: { type: \"number\", min: 1 }\n        },\n        valuePosition: {\n            description:\n                \"Position of the value label relative to the progress bar. Can be 'start', 'end',  or 'both'. Defaults to 'undefined'.\",\n            control: {\n                type: \"select\",\n                options: [\"start\", \"end\", \"both\"]\n            }\n        }\n    }\n};\n\nexport default meta;\ntype Story = StoryObj<typeof ProgressBar>;\n\nexport const Default: Story = {\n    args: {\n        value: 50\n    }\n};\n\nexport const WithCustomMaxValue: Story = {\n    args: {\n        ...Default.args,\n        max: 200\n    }\n};\n\nexport const WithValuePositionStart: Story = {\n    args: {\n        ...Default.args,\n        valuePosition: \"start\"\n    }\n};\n\nexport const WithValuePositionEnd: Story = {\n    args: {\n        ...Default.args,\n        valuePosition: \"end\"\n    }\n};\n\nexport const WithValuePositionBoth: Story = {\n    args: {\n        ...Default.args,\n        valuePosition: \"both\"\n    }\n};\n\nexport const WithGetValueLabel: Story = {\n    args: {\n        ...Default.args,\n        getValueLabel: (value: number) => `${value} mb`\n    }\n};\n\nexport const WithControlledValue: Story = {\n    args: {\n        value: 0\n    },\n    render: args => {\n        const [value, setValue] = useState(args.value);\n\n        useEffect(() => {\n            const interval = setInterval(() => {\n                setValue((prevValue = 0) => {\n                    const value = Number(prevValue);\n\n                    if (value === 100) {\n                        return value;\n                    }\n                    return value + 5;\n                });\n            }, 100);\n\n            return () => clearInterval(interval);\n        }, []);\n\n        return <ProgressBar {...args} value={value} />;\n    }\n};\n"],"names":["meta","ProgressBar","Documentation","Default","WithCustomMaxValue","WithValuePositionStart","WithValuePositionEnd","WithValuePositionBoth","WithGetValueLabel","value","WithControlledValue","args","setValue","useState","useEffect","interval","setInterval","prevValue","Number","clearInterval"],"mappings":";;AAIA,MAAMA,OAAiC;IACnC,OAAO;IACP,WAAWC;IACX,YAAY;QACR,QAAQ;IACZ;AACJ;AAEO,MAAMC,gBAAuB;IAChC,MAAM;QACF,OAAO;IACX;IACA,UAAU;QACN,OAAO;YACH,aAAa;YACb,SAAS;gBAAE,MAAM;gBAAU,KAAK;gBAAG,KAAK;YAAI;QAChD;QACA,KAAK;YACD,aAAa;YACb,SAAS;gBAAE,MAAM;gBAAU,KAAK;YAAE;QACtC;QACA,eAAe;YACX,aACI;YACJ,SAAS;gBACL,MAAM;gBACN,SAAS;oBAAC;oBAAS;oBAAO;iBAAO;YACrC;QACJ;IACJ;AACJ;AAEA,4BAAeF;AAGR,MAAMG,UAAiB;IAC1B,MAAM;QACF,OAAO;IACX;AACJ;AAEO,MAAMC,qBAA4B;IACrC,MAAM;QACF,GAAGD,QAAQ,IAAI;QACf,KAAK;IACT;AACJ;AAEO,MAAME,yBAAgC;IACzC,MAAM;QACF,GAAGF,QAAQ,IAAI;QACf,eAAe;IACnB;AACJ;AAEO,MAAMG,uBAA8B;IACvC,MAAM;QACF,GAAGH,QAAQ,IAAI;QACf,eAAe;IACnB;AACJ;AAEO,MAAMI,wBAA+B;IACxC,MAAM;QACF,GAAGJ,QAAQ,IAAI;QACf,eAAe;IACnB;AACJ;AAEO,MAAMK,oBAA2B;IACpC,MAAM;QACF,GAAGL,QAAQ,IAAI;QACf,eAAe,CAACM,QAAkB,GAAGA,MAAM,GAAG,CAAC;IACnD;AACJ;AAEO,MAAMC,sBAA6B;IACtC,MAAM;QACF,OAAO;IACX;IACA,QAAQC,CAAAA;QACJ,MAAM,CAACF,OAAOG,SAAS,GAAGC,SAASF,KAAK,KAAK;QAE7CG,UAAU;YACN,MAAMC,WAAWC,YAAY;gBACzBJ,SAAS,CAACK,YAAY,CAAC;oBACnB,MAAMR,QAAQS,OAAOD;oBAErB,IAAIR,AAAU,QAAVA,OACA,OAAOA;oBAEX,OAAOA,QAAQ;gBACnB;YACJ,GAAG;YAEH,OAAO,IAAMU,cAAcJ;QAC/B,GAAG,EAAE;QAEL,OAAO,WAAP,GAAO,oBAACd,aAAWA;YAAE,GAAGU,IAAI;YAAE,OAAOF;;IACzC;AACJ"}

package/RadioGroup/RadioGroup.stories.d.ts

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

package/RadioGroup/RadioGroup.stories.js.map

@@ -1 +1 @@
-{"version":3,"file":"RadioGroup/RadioGroup.stories.js","sources":["../../src/RadioGroup/RadioGroup.stories.tsx"],"sourcesContent":["import React, { useState } from \"react\";\nimport type { Meta, StoryObj } from \"@storybook/react-webpack5\";\nimport { RadioGroup } from \"./RadioGroup.js\";\n\nconst meta: Meta<typeof RadioGroup> = {\n    title: \"Components/Form/RadioGroup\",\n    component: RadioGroup,\n    argTypes: {\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 <RadioGroup {...args} value={value} onChange={value => setValue(value)} />;\n    }\n};\n\nexport default meta;\ntype Story = StoryObj<typeof RadioGroup>;\n\nexport const Default: Story = {\n    args: {\n        items: [\n            {\n                label: \"Value 1\",\n                value: \"value-1\"\n            },\n            {\n                label: \"Value 2\",\n                value: \"value-2\"\n            },\n            {\n                label: \"Value 3\",\n                value: \"value-3\"\n            }\n        ]\n    }\n};\n\nexport const WithLabel: Story = {\n    args: {\n        ...Default.args,\n        label: \"Any field label\"\n    }\n};\n\nexport const WithRequiredLabel: 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        items: [\n            {\n                label: \"Value 1\",\n                value: \"value-1\",\n                disabled: true\n            },\n            {\n                label: \"Value 2\",\n                value: \"value-2\",\n                disabled: true\n            },\n            {\n                label: \"Value 3\",\n                value: \"value-3\",\n                disabled: true\n            }\n        ]\n    }\n};\n\nexport const FullExample: Story = {\n    args: {\n        ...Default.args,\n        label: \"Select which deploy option do you prefer\",\n        required: true,\n        description:\n            \"Deployment option is simply a way of parsing the data based on your database settings.\",\n        note: \"Note: Ensure your selection or input is accurate before proceeding.\",\n        validation: {\n            isValid: false,\n            message: \"You must select at least one option!\"\n        }\n    }\n};\n\nexport const Documentation: Story = {\n    render: args => {\n        const [value, setValue] = useState(\"\");\n        const [validation, setValidation] = useState({ isValid: true, message: \"\" });\n\n        const handleValidation = () => {\n            if (args.required && !value) {\n                setValidation({ isValid: false, message: \"This field is required\" });\n            } else {\n                setValidation({ isValid: true, message: \"\" });\n            }\n        };\n\n        return (\n            <RadioGroup\n                {...args}\n                value={value}\n                validation={validation}\n                onChange={newValue => setValue(newValue)}\n                onBlur={handleValidation}\n            />\n        );\n    },\n    args: {\n        label: \"Deployment Option\",\n        description: \"Choose your preferred deployment method\",\n        note: \"This setting will determine how your application is deployed\",\n        required: true,\n        disabled: false,\n        items: [\n            {\n                label: \"Automatic Deployment\",\n                value: \"automatic\"\n            },\n            {\n                label: \"Manual Deployment\",\n                value: \"manual\"\n            },\n            {\n                label: \"Scheduled Deployment\",\n                value: \"scheduled\"\n            }\n        ]\n    }\n};\n"],"names":["meta","RadioGroup","args","value","setValue","useState","Default","WithLabel","WithRequiredLabel","WithDescription","WithNotes","WithErrors","Disabled","FullExample","Documentation","validation","setValidation","handleValidation","newValue"],"mappings":";;AAIA,MAAMA,OAAgC;IAClC,OAAO;IACP,WAAWC;IACX,UAAU;QACN,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,YAAUA;YAAE,GAAGC,IAAI;YAAE,OAAOC;YAAO,UAAUA,CAAAA,QAASC,SAASD;;IAC3E;AACJ;AAEA,2BAAeH;AAGR,MAAMM,UAAiB;IAC1B,MAAM;QACF,OAAO;YACH;gBACI,OAAO;gBACP,OAAO;YACX;YACA;gBACI,OAAO;gBACP,OAAO;YACX;YACA;gBACI,OAAO;gBACP,OAAO;YACX;SACH;IACL;AACJ;AAEO,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;QACV,OAAO;YACH;gBACI,OAAO;gBACP,OAAO;gBACP,UAAU;YACd;YACA;gBACI,OAAO;gBACP,OAAO;gBACP,UAAU;YACd;YACA;gBACI,OAAO;gBACP,OAAO;gBACP,UAAU;YACd;SACH;IACL;AACJ;AAEO,MAAMO,cAAqB;IAC9B,MAAM;QACF,GAAGP,QAAQ,IAAI;QACf,OAAO;QACP,UAAU;QACV,aACI;QACJ,MAAM;QACN,YAAY;YACR,SAAS;YACT,SAAS;QACb;IACJ;AACJ;AAEO,MAAMQ,gBAAuB;IAChC,QAAQZ,CAAAA;QACJ,MAAM,CAACC,OAAOC,SAAS,GAAGC,SAAS;QACnC,MAAM,CAACU,YAAYC,cAAc,GAAGX,SAAS;YAAE,SAAS;YAAM,SAAS;QAAG;QAE1E,MAAMY,mBAAmB;YACjBf,KAAK,QAAQ,IAAI,CAACC,QAClBa,cAAc;gBAAE,SAAS;gBAAO,SAAS;YAAyB,KAElEA,cAAc;gBAAE,SAAS;gBAAM,SAAS;YAAG;QAEnD;QAEA,OAAO,WAAP,GACI,oBAACf,YAAUA;YACN,GAAGC,IAAI;YACR,OAAOC;YACP,YAAYY;YACZ,UAAUG,CAAAA,WAAYd,SAASc;YAC/B,QAAQD;;IAGpB;IACA,MAAM;QACF,OAAO;QACP,aAAa;QACb,MAAM;QACN,UAAU;QACV,UAAU;QACV,OAAO;YACH;gBACI,OAAO;gBACP,OAAO;YACX;YACA;gBACI,OAAO;gBACP,OAAO;YACX;YACA;gBACI,OAAO;gBACP,OAAO;YACX;SACH;IACL;AACJ"}
+{"version":3,"file":"RadioGroup/RadioGroup.stories.js","sources":["../../src/RadioGroup/RadioGroup.stories.tsx"],"sourcesContent":["import React, { useState } from \"react\";\nimport type { Meta, StoryObj } from \"@storybook/react\";\nimport { RadioGroup } from \"./RadioGroup.js\";\n\nconst meta: Meta<typeof RadioGroup> = {\n    title: \"Components/Form/RadioGroup\",\n    component: RadioGroup,\n    argTypes: {\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 <RadioGroup {...args} value={value} onChange={value => setValue(value)} />;\n    }\n};\n\nexport default meta;\ntype Story = StoryObj<typeof RadioGroup>;\n\nexport const Default: Story = {\n    args: {\n        items: [\n            {\n                label: \"Value 1\",\n                value: \"value-1\"\n            },\n            {\n                label: \"Value 2\",\n                value: \"value-2\"\n            },\n            {\n                label: \"Value 3\",\n                value: \"value-3\"\n            }\n        ]\n    }\n};\n\nexport const WithLabel: Story = {\n    args: {\n        ...Default.args,\n        label: \"Any field label\"\n    }\n};\n\nexport const WithRequiredLabel: 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        items: [\n            {\n                label: \"Value 1\",\n                value: \"value-1\",\n                disabled: true\n            },\n            {\n                label: \"Value 2\",\n                value: \"value-2\",\n                disabled: true\n            },\n            {\n                label: \"Value 3\",\n                value: \"value-3\",\n                disabled: true\n            }\n        ]\n    }\n};\n\nexport const FullExample: Story = {\n    args: {\n        ...Default.args,\n        label: \"Select which deploy option do you prefer\",\n        required: true,\n        description:\n            \"Deployment option is simply a way of parsing the data based on your database settings.\",\n        note: \"Note: Ensure your selection or input is accurate before proceeding.\",\n        validation: {\n            isValid: false,\n            message: \"You must select at least one option!\"\n        }\n    }\n};\n\nexport const Documentation: Story = {\n    render: args => {\n        const [value, setValue] = useState(\"\");\n        const [validation, setValidation] = useState({ isValid: true, message: \"\" });\n\n        const handleValidation = () => {\n            if (args.required && !value) {\n                setValidation({ isValid: false, message: \"This field is required\" });\n            } else {\n                setValidation({ isValid: true, message: \"\" });\n            }\n        };\n\n        return (\n            <RadioGroup\n                {...args}\n                value={value}\n                validation={validation}\n                onChange={newValue => setValue(newValue)}\n                onBlur={handleValidation}\n            />\n        );\n    },\n    args: {\n        label: \"Deployment Option\",\n        description: \"Choose your preferred deployment method\",\n        note: \"This setting will determine how your application is deployed\",\n        required: true,\n        disabled: false,\n        items: [\n            {\n                label: \"Automatic Deployment\",\n                value: \"automatic\"\n            },\n            {\n                label: \"Manual Deployment\",\n                value: \"manual\"\n            },\n            {\n                label: \"Scheduled Deployment\",\n                value: \"scheduled\"\n            }\n        ]\n    }\n};\n"],"names":["meta","RadioGroup","args","value","setValue","useState","Default","WithLabel","WithRequiredLabel","WithDescription","WithNotes","WithErrors","Disabled","FullExample","Documentation","validation","setValidation","handleValidation","newValue"],"mappings":";;AAIA,MAAMA,OAAgC;IAClC,OAAO;IACP,WAAWC;IACX,UAAU;QACN,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,YAAUA;YAAE,GAAGC,IAAI;YAAE,OAAOC;YAAO,UAAUA,CAAAA,QAASC,SAASD;;IAC3E;AACJ;AAEA,2BAAeH;AAGR,MAAMM,UAAiB;IAC1B,MAAM;QACF,OAAO;YACH;gBACI,OAAO;gBACP,OAAO;YACX;YACA;gBACI,OAAO;gBACP,OAAO;YACX;YACA;gBACI,OAAO;gBACP,OAAO;YACX;SACH;IACL;AACJ;AAEO,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;QACV,OAAO;YACH;gBACI,OAAO;gBACP,OAAO;gBACP,UAAU;YACd;YACA;gBACI,OAAO;gBACP,OAAO;gBACP,UAAU;YACd;YACA;gBACI,OAAO;gBACP,OAAO;gBACP,UAAU;YACd;SACH;IACL;AACJ;AAEO,MAAMO,cAAqB;IAC9B,MAAM;QACF,GAAGP,QAAQ,IAAI;QACf,OAAO;QACP,UAAU;QACV,aACI;QACJ,MAAM;QACN,YAAY;YACR,SAAS;YACT,SAAS;QACb;IACJ;AACJ;AAEO,MAAMQ,gBAAuB;IAChC,QAAQZ,CAAAA;QACJ,MAAM,CAACC,OAAOC,SAAS,GAAGC,SAAS;QACnC,MAAM,CAACU,YAAYC,cAAc,GAAGX,SAAS;YAAE,SAAS;YAAM,SAAS;QAAG;QAE1E,MAAMY,mBAAmB;YACjBf,KAAK,QAAQ,IAAI,CAACC,QAClBa,cAAc;gBAAE,SAAS;gBAAO,SAAS;YAAyB,KAElEA,cAAc;gBAAE,SAAS;gBAAM,SAAS;YAAG;QAEnD;QAEA,OAAO,WAAP,GACI,oBAACf,YAAUA;YACN,GAAGC,IAAI;YACR,OAAOC;YACP,YAAYY;YACZ,UAAUG,CAAAA,WAAYd,SAASc;YAC/B,QAAQD;;IAGpB;IACA,MAAM;QACF,OAAO;QACP,aAAa;QACb,MAAM;QACN,UAAU;QACV,UAAU;QACV,OAAO;YACH;gBACI,OAAO;gBACP,OAAO;YACX;YACA;gBACI,OAAO;gBACP,OAAO;YACX;YACA;gBACI,OAAO;gBACP,OAAO;YACX;SACH;IACL;AACJ"}

package/RadioGroup/primitives/RadioGroupPrimitive.stories.d.ts

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

package/RadioGroup/primitives/RadioGroupPrimitive.stories.js.map

@@ -1 +1 @@
-{"version":3,"file":"RadioGroup/primitives/RadioGroupPrimitive.stories.js","sources":["../../../src/RadioGroup/primitives/RadioGroupPrimitive.stories.tsx"],"sourcesContent":["import React, { useState } from \"react\";\nimport type { Meta, StoryObj } from \"@storybook/react-webpack5\";\nimport { RadioGroupPrimitive } from \"./RadioGroupPrimitive.js\";\nimport { Text } from \"~/Text/index.js\";\nimport { Button } from \"~/Button/index.js\";\n\nconst meta: Meta<typeof RadioGroupPrimitive> = {\n    title: \"Components/Form Primitives/RadioGroup\",\n    component: RadioGroupPrimitive,\n    parameters: {\n        layout: \"padded\"\n    },\n    render: args => {\n        const [value, setValue] = useState(args.value);\n        return (\n            <div className={\"w-full\"}>\n                <RadioGroupPrimitive {...args} value={value} onChange={value => setValue(value)} />\n                <div className={\"mt-4 text-center\"}>\n                    Current selected value: <pre>{value}</pre>\n                </div>\n            </div>\n        );\n    }\n};\n\nexport default meta;\n\ntype Story = StoryObj<typeof RadioGroupPrimitive>;\n\nexport const Default: Story = {\n    args: {\n        items: [\n            {\n                value: \"value-1\",\n                label: \"Value 1\"\n            },\n            {\n                value: \"value-2\",\n                label: \"Value 2\"\n            },\n            {\n                value: \"value-3\",\n                label: \"Value 3\"\n            }\n        ]\n    }\n};\n\nexport const Disabled: Story = {\n    args: {\n        ...Default.args,\n        value: \"value-2\",\n        disabled: true,\n        items: [\n            {\n                value: \"value-1\",\n                label: \"Value 1\"\n            },\n            {\n                value: \"value-2\",\n                label: \"Value 2\"\n            },\n            {\n                value: \"value-3\",\n                label: \"Value 3\"\n            }\n        ]\n    }\n};\n\nexport const WithDefaultOption: Story = {\n    args: {\n        ...Default.args,\n        value: \"value-2\"\n    }\n};\n\nexport const WithDisabledOption: Story = {\n    args: {\n        ...Default.args,\n        items: [\n            {\n                value: \"value-1\",\n                label: \"Value 1\"\n            },\n            {\n                value: \"value-2\",\n                label: \"Value 2\",\n                disabled: true\n            },\n            {\n                value: \"value-3\",\n                label: \"Value 3\"\n            }\n        ]\n    }\n};\n\nexport const WithDefaultDisabledOption: Story = {\n    args: {\n        ...Default.args,\n        value: \"value-2\",\n        items: [\n            {\n                value: \"value-1\",\n                label: \"Value 1\"\n            },\n            {\n                value: \"value-2\",\n                label: \"Value 2\",\n                disabled: true\n            },\n            {\n                value: \"value-3\",\n                label: \"Value 3\"\n            }\n        ]\n    }\n};\n\nexport const WithLongOption: Story = {\n    args: {\n        ...Default.args,\n        items: [\n            {\n                value: \"value-1\",\n                label: \"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer fringilla magna vel massa suscipit mollis. Nunc dui felis, iaculis id tortor ut, hendrerit pulvinar felis.\"\n            },\n            {\n                value: \"value-2\",\n                label: \" Pellentesque erat ipsum, posuere dapibus diam id, accumsan sagittis mi. In eu nibh ut nunc ultricies placerat.\",\n                disabled: true\n            },\n            {\n                value: \"value-3\",\n                label: \"Integer a hendrerit dui. Sed tincidunt vel nibh a finibus.\"\n            }\n        ]\n    }\n};\n\nexport const WithComplexOptions: Story = {\n    args: {\n        ...Default.args,\n        items: [\n            {\n                id: \"value-1\",\n                value: \"value-1\",\n                label: (\n                    <div>\n                        <div>{\"Value 1\"}</div>\n                        <Text size={\"sm\"}>{\"Option description 1\"}</Text>\n                    </div>\n                )\n            },\n            {\n                id: \"value-2\",\n                value: \"value-2\",\n                label: (\n                    <div>\n                        <div>{\"Value 2\"}</div>\n                        <Text size={\"sm\"}>{\"Option description 2\"}</Text>\n                    </div>\n                )\n            },\n            {\n                id: \"value-3\",\n                value: \"value-3\",\n                label: (\n                    <div>\n                        <div>{\"Value 3\"}</div>\n                        <Text size={\"sm\"}>{\"Option description 3\"}</Text>\n                    </div>\n                )\n            }\n        ]\n    }\n};\n\nexport const WithExternalValueControl: Story = {\n    args: {\n        value: \"value-2\",\n        items: [\n            {\n                value: \"value-1\",\n                label: \"Value 1\"\n            },\n            {\n                value: \"value-2\",\n                label: \"Value 2\"\n            },\n            {\n                value: \"value-3\",\n                label: \"Value 3\"\n            }\n        ]\n    },\n    render: args => {\n        const [value, setValue] = useState(args.value);\n        return (\n            <div className={\"w-full\"}>\n                <div>\n                    <RadioGroupPrimitive\n                        {...args}\n                        value={value}\n                        onChange={value => setValue(value)}\n                    />\n                </div>\n                <div className={\"mt-4 text-center\"}>\n                    <Button onClick={() => setValue(args.value)} text={\"Reset\"} />\n                </div>\n                <div className={\"mt-4 text-center\"}>\n                    Current selected value: <pre>{value}</pre>\n                </div>\n            </div>\n        );\n    }\n};\n"],"names":["meta","RadioGroupPrimitive","args","value","setValue","useState","Default","Disabled","WithDefaultOption","WithDisabledOption","WithDefaultDisabledOption","WithLongOption","WithComplexOptions","Text","WithExternalValueControl","Button"],"mappings":"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"}
+{"version":3,"file":"RadioGroup/primitives/RadioGroupPrimitive.stories.js","sources":["../../../src/RadioGroup/primitives/RadioGroupPrimitive.stories.tsx"],"sourcesContent":["import React, { useState } from \"react\";\nimport type { Meta, StoryObj } from \"@storybook/react\";\nimport { RadioGroupPrimitive } from \"./RadioGroupPrimitive.js\";\nimport { Text } from \"~/Text/index.js\";\nimport { Button } from \"~/Button/index.js\";\n\nconst meta: Meta<typeof RadioGroupPrimitive> = {\n    title: \"Components/Form Primitives/RadioGroup\",\n    component: RadioGroupPrimitive,\n    parameters: {\n        layout: \"padded\"\n    },\n    render: args => {\n        const [value, setValue] = useState(args.value);\n        return (\n            <div className={\"w-full\"}>\n                <RadioGroupPrimitive {...args} value={value} onChange={value => setValue(value)} />\n                <div className={\"mt-4 text-center\"}>\n                    Current selected value: <pre>{value}</pre>\n                </div>\n            </div>\n        );\n    }\n};\n\nexport default meta;\n\ntype Story = StoryObj<typeof RadioGroupPrimitive>;\n\nexport const Default: Story = {\n    args: {\n        items: [\n            {\n                value: \"value-1\",\n                label: \"Value 1\"\n            },\n            {\n                value: \"value-2\",\n                label: \"Value 2\"\n            },\n            {\n                value: \"value-3\",\n                label: \"Value 3\"\n            }\n        ]\n    }\n};\n\nexport const Disabled: Story = {\n    args: {\n        ...Default.args,\n        value: \"value-2\",\n        disabled: true,\n        items: [\n            {\n                value: \"value-1\",\n                label: \"Value 1\"\n            },\n            {\n                value: \"value-2\",\n                label: \"Value 2\"\n            },\n            {\n                value: \"value-3\",\n                label: \"Value 3\"\n            }\n        ]\n    }\n};\n\nexport const WithDefaultOption: Story = {\n    args: {\n        ...Default.args,\n        value: \"value-2\"\n    }\n};\n\nexport const WithDisabledOption: Story = {\n    args: {\n        ...Default.args,\n        items: [\n            {\n                value: \"value-1\",\n                label: \"Value 1\"\n            },\n            {\n                value: \"value-2\",\n                label: \"Value 2\",\n                disabled: true\n            },\n            {\n                value: \"value-3\",\n                label: \"Value 3\"\n            }\n        ]\n    }\n};\n\nexport const WithDefaultDisabledOption: Story = {\n    args: {\n        ...Default.args,\n        value: \"value-2\",\n        items: [\n            {\n                value: \"value-1\",\n                label: \"Value 1\"\n            },\n            {\n                value: \"value-2\",\n                label: \"Value 2\",\n                disabled: true\n            },\n            {\n                value: \"value-3\",\n                label: \"Value 3\"\n            }\n        ]\n    }\n};\n\nexport const WithLongOption: Story = {\n    args: {\n        ...Default.args,\n        items: [\n            {\n                value: \"value-1\",\n                label: \"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer fringilla magna vel massa suscipit mollis. Nunc dui felis, iaculis id tortor ut, hendrerit pulvinar felis.\"\n            },\n            {\n                value: \"value-2\",\n                label: \" Pellentesque erat ipsum, posuere dapibus diam id, accumsan sagittis mi. In eu nibh ut nunc ultricies placerat.\",\n                disabled: true\n            },\n            {\n                value: \"value-3\",\n                label: \"Integer a hendrerit dui. Sed tincidunt vel nibh a finibus.\"\n            }\n        ]\n    }\n};\n\nexport const WithComplexOptions: Story = {\n    args: {\n        ...Default.args,\n        items: [\n            {\n                id: \"value-1\",\n                value: \"value-1\",\n                label: (\n                    <div>\n                        <div>{\"Value 1\"}</div>\n                        <Text size={\"sm\"}>{\"Option description 1\"}</Text>\n                    </div>\n                )\n            },\n            {\n                id: \"value-2\",\n                value: \"value-2\",\n                label: (\n                    <div>\n                        <div>{\"Value 2\"}</div>\n                        <Text size={\"sm\"}>{\"Option description 2\"}</Text>\n                    </div>\n                )\n            },\n            {\n                id: \"value-3\",\n                value: \"value-3\",\n                label: (\n                    <div>\n                        <div>{\"Value 3\"}</div>\n                        <Text size={\"sm\"}>{\"Option description 3\"}</Text>\n                    </div>\n                )\n            }\n        ]\n    }\n};\n\nexport const WithExternalValueControl: Story = {\n    args: {\n        value: \"value-2\",\n        items: [\n            {\n                value: \"value-1\",\n                label: \"Value 1\"\n            },\n            {\n                value: \"value-2\",\n                label: \"Value 2\"\n            },\n            {\n                value: \"value-3\",\n                label: \"Value 3\"\n            }\n        ]\n    },\n    render: args => {\n        const [value, setValue] = useState(args.value);\n        return (\n            <div className={\"w-full\"}>\n                <div>\n                    <RadioGroupPrimitive\n                        {...args}\n                        value={value}\n                        onChange={value => setValue(value)}\n                    />\n                </div>\n                <div className={\"mt-4 text-center\"}>\n                    <Button onClick={() => setValue(args.value)} text={\"Reset\"} />\n                </div>\n                <div className={\"mt-4 text-center\"}>\n                    Current selected value: <pre>{value}</pre>\n                </div>\n            </div>\n        );\n    }\n};\n"],"names":["meta","RadioGroupPrimitive","args","value","setValue","useState","Default","Disabled","WithDefaultOption","WithDisabledOption","WithDefaultDisabledOption","WithLongOption","WithComplexOptions","Text","WithExternalValueControl","Button"],"mappings":"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"}

package/RangeSlider/RangeSlider.stories.d.ts

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

package/RangeSlider/RangeSlider.stories.js.map

@@ -1 +1 @@
-{"version":3,"file":"RangeSlider/RangeSlider.stories.js","sources":["../../src/RangeSlider/RangeSlider.stories.tsx"],"sourcesContent":["import React, { useState, useEffect } from \"react\";\nimport type { Meta, StoryObj } from \"@storybook/react-webpack5\";\nimport { RangeSlider } from \"./RangeSlider.js\";\n\nconst meta: Meta<typeof RangeSlider> = {\n    title: \"Components/Form/RangeSlider\",\n    component: RangeSlider,\n    argTypes: {\n        onValuesChange: { action: \"onValuesChange\" },\n        onValuesCommit: { action: \"onValuesCommit\" },\n        disabled: {\n            control: \"boolean\",\n            defaultValue: false\n        }\n    },\n    parameters: {\n        layout: \"padded\"\n    },\n    render: args => {\n        const [values, setValues] = useState(args.values);\n        return (\n            <RangeSlider {...args} values={values} onValuesChange={values => setValues(values)} />\n        );\n    }\n};\n\nexport default meta;\ntype Story = StoryObj<typeof RangeSlider>;\n\nexport const Default: Story = {\n    args: {\n        label: \"Any field label\"\n    }\n};\n\nexport const WithLabelRequired: Story = {\n    args: {\n        ...Default.args,\n        required: true\n    }\n};\n\nexport const WithDescription: Story = {\n    args: {\n        description: \"Provide the required information for processing your request.\"\n    }\n};\n\nexport const WithNotes: Story = {\n    args: {\n        note: \"Note: Ensure your selection or input is accurate before proceeding.\"\n    }\n};\n\nexport const WithErrors: Story = {\n    args: {\n        validation: {\n            isValid: false,\n            message: \"This field is required.\"\n        }\n    }\n};\n\nexport const Disabled: Story = {\n    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 [values, setValues] = useState(args.values || [25, 75]);\n        const [validation, setValidation] = useState({ isValid: true, message: \"\" });\n\n        // Update values when args.values changes\n        useEffect(() => {\n            setValues(args.values || [25, 75]);\n        }, [args.values]);\n\n        const handleChange = (newValues: number[]) => {\n            setValues(newValues);\n\n            if (args.required && newValues[0] === 0 && newValues[1] === 0) {\n                setValidation({ isValid: false, message: \"Please select a range\" });\n            } else {\n                setValidation({ isValid: true, message: \"\" });\n            }\n        };\n\n        // Validate on required change or values change\n        useEffect(() => {\n            if (args.required && values[0] === 0 && values[1] === 0) {\n                setValidation({ isValid: false, message: \"Please select a range\" });\n            } else {\n                setValidation({ isValid: true, message: \"\" });\n            }\n        }, [args.required, values]);\n\n        return (\n            <RangeSlider\n                {...args}\n                values={values}\n                onValuesChange={handleChange}\n                validation={validation}\n                required={args.required}\n                showTooltip={args.showTooltip}\n                transformValue={args.transformValue}\n            />\n        );\n    },\n    args: {\n        label: \"Price Range\",\n        required: true,\n        disabled: false,\n        description: \"Select the minimum and maximum price range\",\n        note: \"Note: The selected range will filter available products\",\n        min: 0,\n        max: 100,\n        step: 1,\n        values: [25, 75],\n        showTooltip: true,\n        transformValue: (value: number) => `$${value}`,\n        validation: undefined\n    },\n    argTypes: {\n        label: {\n            description: \"Label text for the range slider\",\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 range slider 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        min: {\n            description: \"Minimum value for the range slider\",\n            control: \"number\"\n        },\n        max: {\n            description: \"Maximum value for the range slider\",\n            control: \"number\"\n        },\n        step: {\n            description: \"Step increment for the range slider\",\n            control: \"number\"\n        },\n        values: {\n            description: \"Current values of the range slider [min, max]\",\n            control: \"object\"\n        },\n        showTooltip: {\n            description: \"Whether to show tooltips with the current values\",\n            control: \"boolean\",\n            defaultValue: true\n        },\n        transformValue: {\n            description:\n                \"Function to transform the numeric values to display text. Please refer to the example code for details on usage.\"\n        },\n        validation: {\n            description:\n                \"Object containing validation state and message. Please refer to the example code for details on usage.\"\n        },\n        onValuesChange: {\n            description: \"Function called when the range slider values change\"\n        },\n        onValuesCommit: {\n            description: \"Function called when the range slider values are committed (on release)\"\n        }\n    }\n};\n"],"names":["meta","RangeSlider","args","values","setValues","useState","Default","WithLabelRequired","WithDescription","WithNotes","WithErrors","Disabled","FullExample","Documentation","validation","setValidation","useEffect","handleChange","newValues","value","undefined"],"mappings":"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"}
+{"version":3,"file":"RangeSlider/RangeSlider.stories.js","sources":["../../src/RangeSlider/RangeSlider.stories.tsx"],"sourcesContent":["import React, { useState, useEffect } from \"react\";\nimport type { Meta, StoryObj } from \"@storybook/react\";\nimport { RangeSlider } from \"./RangeSlider.js\";\n\nconst meta: Meta<typeof RangeSlider> = {\n    title: \"Components/Form/RangeSlider\",\n    component: RangeSlider,\n    argTypes: {\n        onValuesChange: { action: \"onValuesChange\" },\n        onValuesCommit: { action: \"onValuesCommit\" },\n        disabled: {\n            control: \"boolean\",\n            defaultValue: false\n        }\n    },\n    parameters: {\n        layout: \"padded\"\n    },\n    render: args => {\n        const [values, setValues] = useState(args.values);\n        return (\n            <RangeSlider {...args} values={values} onValuesChange={values => setValues(values)} />\n        );\n    }\n};\n\nexport default meta;\ntype Story = StoryObj<typeof RangeSlider>;\n\nexport const Default: Story = {\n    args: {\n        label: \"Any field label\"\n    }\n};\n\nexport const WithLabelRequired: Story = {\n    args: {\n        ...Default.args,\n        required: true\n    }\n};\n\nexport const WithDescription: Story = {\n    args: {\n        description: \"Provide the required information for processing your request.\"\n    }\n};\n\nexport const WithNotes: Story = {\n    args: {\n        note: \"Note: Ensure your selection or input is accurate before proceeding.\"\n    }\n};\n\nexport const WithErrors: Story = {\n    args: {\n        validation: {\n            isValid: false,\n            message: \"This field is required.\"\n        }\n    }\n};\n\nexport const Disabled: Story = {\n    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 [values, setValues] = useState(args.values || [25, 75]);\n        const [validation, setValidation] = useState({ isValid: true, message: \"\" });\n\n        // Update values when args.values changes\n        useEffect(() => {\n            setValues(args.values || [25, 75]);\n        }, [args.values]);\n\n        const handleChange = (newValues: number[]) => {\n            setValues(newValues);\n\n            if (args.required && newValues[0] === 0 && newValues[1] === 0) {\n                setValidation({ isValid: false, message: \"Please select a range\" });\n            } else {\n                setValidation({ isValid: true, message: \"\" });\n            }\n        };\n\n        // Validate on required change or values change\n        useEffect(() => {\n            if (args.required && values[0] === 0 && values[1] === 0) {\n                setValidation({ isValid: false, message: \"Please select a range\" });\n            } else {\n                setValidation({ isValid: true, message: \"\" });\n            }\n        }, [args.required, values]);\n\n        return (\n            <RangeSlider\n                {...args}\n                values={values}\n                onValuesChange={handleChange}\n                validation={validation}\n                required={args.required}\n                showTooltip={args.showTooltip}\n                transformValue={args.transformValue}\n            />\n        );\n    },\n    args: {\n        label: \"Price Range\",\n        required: true,\n        disabled: false,\n        description: \"Select the minimum and maximum price range\",\n        note: \"Note: The selected range will filter available products\",\n        min: 0,\n        max: 100,\n        step: 1,\n        values: [25, 75],\n        showTooltip: true,\n        transformValue: (value: number) => `$${value}`,\n        validation: undefined\n    },\n    argTypes: {\n        label: {\n            description: \"Label text for the range slider\",\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 range slider 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        min: {\n            description: \"Minimum value for the range slider\",\n            control: \"number\"\n        },\n        max: {\n            description: \"Maximum value for the range slider\",\n            control: \"number\"\n        },\n        step: {\n            description: \"Step increment for the range slider\",\n            control: \"number\"\n        },\n        values: {\n            description: \"Current values of the range slider [min, max]\",\n            control: \"object\"\n        },\n        showTooltip: {\n            description: \"Whether to show tooltips with the current values\",\n            control: \"boolean\",\n            defaultValue: true\n        },\n        transformValue: {\n            description:\n                \"Function to transform the numeric values to display text. Please refer to the example code for details on usage.\"\n        },\n        validation: {\n            description:\n                \"Object containing validation state and message. Please refer to the example code for details on usage.\"\n        },\n        onValuesChange: {\n            description: \"Function called when the range slider values change\"\n        },\n        onValuesCommit: {\n            description: \"Function called when the range slider values are committed (on release)\"\n        }\n    }\n};\n"],"names":["meta","RangeSlider","args","values","setValues","useState","Default","WithLabelRequired","WithDescription","WithNotes","WithErrors","Disabled","FullExample","Documentation","validation","setValidation","useEffect","handleChange","newValues","value","undefined"],"mappings":"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"}

package/RangeSlider/primitives/RangeSliderPrimitive.stories.d.ts

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

package/RangeSlider/primitives/RangeSliderPrimitive.stories.js.map

@@ -1 +1 @@
-{"version":3,"file":"RangeSlider/primitives/RangeSliderPrimitive.stories.js","sources":["../../../src/RangeSlider/primitives/RangeSliderPrimitive.stories.tsx"],"sourcesContent":["import React, { useState } from \"react\";\nimport type { Meta, StoryObj } from \"@storybook/react-webpack5\";\nimport { RangeSliderPrimitive } from \"./RangeSliderPrimitive.js\";\nimport { Button } from \"~/Button/index.js\";\n\nconst meta: Meta<typeof RangeSliderPrimitive> = {\n    title: \"Components/Form Primitives/RangeSlider\",\n    component: RangeSliderPrimitive,\n    argTypes: {\n        onValuesChange: { action: \"onValuesChange\" },\n        onValuesCommit: { action: \"onValuesCommit\" }\n    },\n    parameters: {\n        layout: \"padded\"\n    },\n    render: args => {\n        const [values, setValues] = useState(args.values);\n        return (\n            <RangeSliderPrimitive\n                {...args}\n                values={values}\n                onValuesChange={values => setValues(values)}\n            />\n        );\n    }\n};\n\nexport default meta;\ntype Story = StoryObj<typeof RangeSliderPrimitive>;\n\nexport const Default: Story = {};\n\nexport const WithDefaultValues: Story = {\n    args: {\n        values: [25, 75]\n    }\n};\n\nexport const WithMinAndMaxValues: Story = {\n    args: {\n        min: 25,\n        max: 75\n    }\n};\n\nexport const WithSteps: Story = {\n    args: {\n        step: 10\n    }\n};\n\nexport const Disabled: Story = {\n    args: {\n        disabled: true,\n        values: [25, 75]\n    }\n};\n\nexport const WithTooltip: Story = {\n    args: {\n        showTooltip: true\n    }\n};\n\nexport const WithTooltipSideTop: Story = {\n    args: {\n        showTooltip: true,\n        tooltipSide: \"top\"\n    }\n};\n\nexport const WithTooltipAndCustomValueTransformer: Story = {\n    args: {\n        showTooltip: true,\n        transformValue: (value: number) => {\n            return `${Math.round(value)}%`;\n        }\n    }\n};\n\nexport const WithExternalValueControl: Story = {\n    args: {\n        showTooltip: true,\n        transformValue: (value: number) => {\n            return `${Math.round(value)}%`;\n        }\n    },\n    render: args => {\n        const defaultValues = args.values ?? [25, 75];\n        const [values, setValues] = useState(defaultValues);\n        return (\n            <div className={\"w-full\"}>\n                <div>\n                    <RangeSliderPrimitive\n                        {...args}\n                        values={values}\n                        onValuesChange={values => setValues(values)}\n                    />\n                </div>\n                <div className={\"mt-4 text-center\"}>\n                    <Button text={\"Reset\"} onClick={() => setValues(defaultValues)} />\n                </div>\n                <div className={\"mt-4 text-center\"}>\n                    Current value: <code>{values.toString()}</code>\n                </div>\n            </div>\n        );\n    }\n};\n"],"names":["meta","RangeSliderPrimitive","args","values","setValues","useState","Default","WithDefaultValues","WithMinAndMaxValues","WithSteps","Disabled","WithTooltip","WithTooltipSideTop","WithTooltipAndCustomValueTransformer","value","Math","WithExternalValueControl","defaultValues","Button"],"mappings":";;;AAKA,MAAMA,OAA0C;IAC5C,OAAO;IACP,WAAWC;IACX,UAAU;QACN,gBAAgB;YAAE,QAAQ;QAAiB;QAC3C,gBAAgB;YAAE,QAAQ;QAAiB;IAC/C;IACA,YAAY;QACR,QAAQ;IACZ;IACA,QAAQC,CAAAA;QACJ,MAAM,CAACC,QAAQC,UAAU,GAAGC,SAASH,KAAK,MAAM;QAChD,OAAO,WAAP,GACI,oBAACD,sBAAoBA;YAChB,GAAGC,IAAI;YACR,QAAQC;YACR,gBAAgBA,CAAAA,SAAUC,UAAUD;;IAGhD;AACJ;AAEA,qCAAeH;AAGR,MAAMM,UAAiB,CAAC;AAExB,MAAMC,oBAA2B;IACpC,MAAM;QACF,QAAQ;YAAC;YAAI;SAAG;IACpB;AACJ;AAEO,MAAMC,sBAA6B;IACtC,MAAM;QACF,KAAK;QACL,KAAK;IACT;AACJ;AAEO,MAAMC,YAAmB;IAC5B,MAAM;QACF,MAAM;IACV;AACJ;AAEO,MAAMC,WAAkB;IAC3B,MAAM;QACF,UAAU;QACV,QAAQ;YAAC;YAAI;SAAG;IACpB;AACJ;AAEO,MAAMC,cAAqB;IAC9B,MAAM;QACF,aAAa;IACjB;AACJ;AAEO,MAAMC,qBAA4B;IACrC,MAAM;QACF,aAAa;QACb,aAAa;IACjB;AACJ;AAEO,MAAMC,uCAA8C;IACvD,MAAM;QACF,aAAa;QACb,gBAAgB,CAACC,QACN,GAAGC,KAAK,KAAK,CAACD,OAAO,CAAC,CAAC;IAEtC;AACJ;AAEO,MAAME,2BAAkC;IAC3C,MAAM;QACF,aAAa;QACb,gBAAgB,CAACF,QACN,GAAGC,KAAK,KAAK,CAACD,OAAO,CAAC,CAAC;IAEtC;IACA,QAAQZ,CAAAA;QACJ,MAAMe,gBAAgBf,KAAK,MAAM,IAAI;YAAC;YAAI;SAAG;QAC7C,MAAM,CAACC,QAAQC,UAAU,GAAGC,SAASY;QACrC,OAAO,WAAP,GACI,oBAAC;YAAI,WAAW;yBACZ,oBAAC,2BACG,oBAAChB,sBAAoBA;YAChB,GAAGC,IAAI;YACR,QAAQC;YACR,gBAAgBA,CAAAA,SAAUC,UAAUD;2BAG5C,oBAAC;YAAI,WAAW;yBACZ,oBAACe,QAAMA;YAAC,MAAM;YAAS,SAAS,IAAMd,UAAUa;2BAEpD,oBAAC;YAAI,WAAW;WAAoB,iCACjB,oBAAC,cAAMd,OAAO,QAAQ;IAIrD;AACJ"}
+{"version":3,"file":"RangeSlider/primitives/RangeSliderPrimitive.stories.js","sources":["../../../src/RangeSlider/primitives/RangeSliderPrimitive.stories.tsx"],"sourcesContent":["import React, { useState } from \"react\";\nimport type { Meta, StoryObj } from \"@storybook/react\";\nimport { RangeSliderPrimitive } from \"./RangeSliderPrimitive.js\";\nimport { Button } from \"~/Button/index.js\";\n\nconst meta: Meta<typeof RangeSliderPrimitive> = {\n    title: \"Components/Form Primitives/RangeSlider\",\n    component: RangeSliderPrimitive,\n    argTypes: {\n        onValuesChange: { action: \"onValuesChange\" },\n        onValuesCommit: { action: \"onValuesCommit\" }\n    },\n    parameters: {\n        layout: \"padded\"\n    },\n    render: args => {\n        const [values, setValues] = useState(args.values);\n        return (\n            <RangeSliderPrimitive\n                {...args}\n                values={values}\n                onValuesChange={values => setValues(values)}\n            />\n        );\n    }\n};\n\nexport default meta;\ntype Story = StoryObj<typeof RangeSliderPrimitive>;\n\nexport const Default: Story = {};\n\nexport const WithDefaultValues: Story = {\n    args: {\n        values: [25, 75]\n    }\n};\n\nexport const WithMinAndMaxValues: Story = {\n    args: {\n        min: 25,\n        max: 75\n    }\n};\n\nexport const WithSteps: Story = {\n    args: {\n        step: 10\n    }\n};\n\nexport const Disabled: Story = {\n    args: {\n        disabled: true,\n        values: [25, 75]\n    }\n};\n\nexport const WithTooltip: Story = {\n    args: {\n        showTooltip: true\n    }\n};\n\nexport const WithTooltipSideTop: Story = {\n    args: {\n        showTooltip: true,\n        tooltipSide: \"top\"\n    }\n};\n\nexport const WithTooltipAndCustomValueTransformer: Story = {\n    args: {\n        showTooltip: true,\n        transformValue: (value: number) => {\n            return `${Math.round(value)}%`;\n        }\n    }\n};\n\nexport const WithExternalValueControl: Story = {\n    args: {\n        showTooltip: true,\n        transformValue: (value: number) => {\n            return `${Math.round(value)}%`;\n        }\n    },\n    render: args => {\n        const defaultValues = args.values ?? [25, 75];\n        const [values, setValues] = useState(defaultValues);\n        return (\n            <div className={\"w-full\"}>\n                <div>\n                    <RangeSliderPrimitive\n                        {...args}\n                        values={values}\n                        onValuesChange={values => setValues(values)}\n                    />\n                </div>\n                <div className={\"mt-4 text-center\"}>\n                    <Button text={\"Reset\"} onClick={() => setValues(defaultValues)} />\n                </div>\n                <div className={\"mt-4 text-center\"}>\n                    Current value: <code>{values.toString()}</code>\n                </div>\n            </div>\n        );\n    }\n};\n"],"names":["meta","RangeSliderPrimitive","args","values","setValues","useState","Default","WithDefaultValues","WithMinAndMaxValues","WithSteps","Disabled","WithTooltip","WithTooltipSideTop","WithTooltipAndCustomValueTransformer","value","Math","WithExternalValueControl","defaultValues","Button"],"mappings":";;;AAKA,MAAMA,OAA0C;IAC5C,OAAO;IACP,WAAWC;IACX,UAAU;QACN,gBAAgB;YAAE,QAAQ;QAAiB;QAC3C,gBAAgB;YAAE,QAAQ;QAAiB;IAC/C;IACA,YAAY;QACR,QAAQ;IACZ;IACA,QAAQC,CAAAA;QACJ,MAAM,CAACC,QAAQC,UAAU,GAAGC,SAASH,KAAK,MAAM;QAChD,OAAO,WAAP,GACI,oBAACD,sBAAoBA;YAChB,GAAGC,IAAI;YACR,QAAQC;YACR,gBAAgBA,CAAAA,SAAUC,UAAUD;;IAGhD;AACJ;AAEA,qCAAeH;AAGR,MAAMM,UAAiB,CAAC;AAExB,MAAMC,oBAA2B;IACpC,MAAM;QACF,QAAQ;YAAC;YAAI;SAAG;IACpB;AACJ;AAEO,MAAMC,sBAA6B;IACtC,MAAM;QACF,KAAK;QACL,KAAK;IACT;AACJ;AAEO,MAAMC,YAAmB;IAC5B,MAAM;QACF,MAAM;IACV;AACJ;AAEO,MAAMC,WAAkB;IAC3B,MAAM;QACF,UAAU;QACV,QAAQ;YAAC;YAAI;SAAG;IACpB;AACJ;AAEO,MAAMC,cAAqB;IAC9B,MAAM;QACF,aAAa;IACjB;AACJ;AAEO,MAAMC,qBAA4B;IACrC,MAAM;QACF,aAAa;QACb,aAAa;IACjB;AACJ;AAEO,MAAMC,uCAA8C;IACvD,MAAM;QACF,aAAa;QACb,gBAAgB,CAACC,QACN,GAAGC,KAAK,KAAK,CAACD,OAAO,CAAC,CAAC;IAEtC;AACJ;AAEO,MAAME,2BAAkC;IAC3C,MAAM;QACF,aAAa;QACb,gBAAgB,CAACF,QACN,GAAGC,KAAK,KAAK,CAACD,OAAO,CAAC,CAAC;IAEtC;IACA,QAAQZ,CAAAA;QACJ,MAAMe,gBAAgBf,KAAK,MAAM,IAAI;YAAC;YAAI;SAAG;QAC7C,MAAM,CAACC,QAAQC,UAAU,GAAGC,SAASY;QACrC,OAAO,WAAP,GACI,oBAAC;YAAI,WAAW;yBACZ,oBAAC,2BACG,oBAAChB,sBAAoBA;YAChB,GAAGC,IAAI;YACR,QAAQC;YACR,gBAAgBA,CAAAA,SAAUC,UAAUD;2BAG5C,oBAAC;YAAI,WAAW;yBACZ,oBAACe,QAAMA;YAAC,MAAM;YAAS,SAAS,IAAMd,UAAUa;2BAEpD,oBAAC;YAAI,WAAW;WAAoB,iCACjB,oBAAC,cAAMd,OAAO,QAAQ;IAIrD;AACJ"}

package/ScrollArea/ScrollArea.stories.d.ts

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

package/ScrollArea/ScrollArea.stories.js.map

@@ -1 +1 @@
-{"version":3,"file":"ScrollArea/ScrollArea.stories.js","sources":["../../src/ScrollArea/ScrollArea.stories.tsx"],"sourcesContent":["import type { Meta, StoryObj } from \"@storybook/react-webpack5\";\nimport { ScrollArea, ScrollBar, ScrollPosition } from \"./ScrollArea.js\";\nimport React from \"react\";\nimport { Heading } from \"~/Heading/index.js\";\nimport { Text } from \"~/Text/index.js\";\nimport { Separator } from \"~/Separator/index.js\";\n\nconst meta: Meta<typeof ScrollArea> = {\n    title: \"Components/ScrollArea\",\n    component: ScrollArea,\n    argTypes: {},\n    decorators: [\n        Story => (\n            <div className=\"w-[700px]\">\n                <Story />\n            </div>\n        )\n    ]\n};\n\nexport default meta;\n\ntype Story = StoryObj<typeof ScrollArea>;\n\nconst tags = Array.from({ length: 50 }).map((_, i, a) => `v1.2.0-beta.${a.length - i}`);\n\nexport const Default: Story = {\n    render: () => {\n        return (\n            <ScrollArea className=\"h-72 w-48 rounded-md border border-neutral-dimmed\">\n                <div className=\"p-4\">\n                    <Heading level={6} className=\"mb-4\">\n                        Tags\n                    </Heading>\n                    {tags.map(tag => (\n                        <div key={tag}>\n                            <Text className=\"text-sm\">{tag}</Text>\n                            <Separator className=\"my-2\" />\n                        </div>\n                    ))}\n                </div>\n            </ScrollArea>\n        );\n    }\n};\n\nexport const HorizontalScrolling: Story = {\n    render: () => {\n        const works = [\n            {\n                artist: \"Ornella Binni\",\n                art: \"https://images.unsplash.com/photo-1465869185982-5a1a7522cbcb?auto=format&fit=crop&w=300&q=80\"\n            },\n            {\n                artist: \"Ornella Binni\",\n                art: \"https://images.unsplash.com/photo-1465869185982-5a1a7522cbcb?auto=format&fit=crop&w=300&q=80\"\n            },\n            {\n                artist: \"Ornella Binni\",\n                art: \"https://images.unsplash.com/photo-1465869185982-5a1a7522cbcb?auto=format&fit=crop&w=300&q=80\"\n            }\n        ];\n\n        return (\n            <ScrollArea className=\"w-96 whitespace-nowrap rounded-md border border-neutral-dimmed\">\n                <div className=\"flex w-max space-x-4 p-4\">\n                    {works.map(artwork => (\n                        <figure key={artwork.artist} className=\"shrink-0\">\n                            <div className=\"overflow-hidden rounded-md\">\n                                <img\n                                    src={artwork.art}\n                                    alt={`Photo by ${artwork.artist}`}\n                                    className=\"aspect-[3/4] h-fit w-fit object-cover\"\n                                    width={300}\n                                    height={400}\n                                />\n                            </div>\n                            <figcaption className=\"pt-2 text-xs text-neutral-strong\">\n                                Photo by{\" \"}\n                                <span className=\"font-semibold text-neutral-primary\">\n                                    {artwork.artist}\n                                </span>\n                            </figcaption>\n                        </figure>\n                    ))}\n                </div>\n                <ScrollBar orientation=\"horizontal\" />\n            </ScrollArea>\n        );\n    }\n};\n\nexport const WithScrollPositionTracking: Story = {\n    render: () => {\n        const [position, setPosition] = React.useState<ScrollPosition | null>(null);\n        const [loadMoreTriggered, setLoadMoreTriggered] = React.useState(false);\n\n        const handleScrollPositionChange = React.useCallback(\n            (pos: ScrollPosition) => {\n                setPosition(pos);\n\n                // Trigger load more when scrolled 90% down.\n                if (pos.top >= 0.9 && !loadMoreTriggered) {\n                    setLoadMoreTriggered(true);\n                    console.log(\"Load more triggered at position:\", pos);\n                } else if (pos.top < 0.9) {\n                    setLoadMoreTriggered(false);\n                }\n            },\n            [loadMoreTriggered]\n        );\n\n        return (\n            <div className=\"space-y-4\">\n                <ScrollArea\n                    className=\"h-72 w-48 rounded-md border border-neutral-dimmed\"\n                    onScrollPositionChange={handleScrollPositionChange}\n                >\n                    <div className=\"p-4\">\n                        <Heading level={6} className=\"mb-4\">\n                            Tags\n                        </Heading>\n                        {tags.map(tag => (\n                            <div key={tag}>\n                                <Text className=\"text-sm\">{tag}</Text>\n                                <Separator className=\"my-2\" />\n                            </div>\n                        ))}\n                    </div>\n                </ScrollArea>\n\n                {position && (\n                    <div className=\"rounded-md border border-neutral-dimmed p-4 space-y-2\">\n                        <Text className=\"font-semibold\">Scroll Position:</Text>\n                        <Text className=\"text-sm\">Top: {(position.top * 100).toFixed(1)}%</Text>\n                        <Text className=\"text-sm\">ScrollTop: {position.scrollTop}px</Text>\n                        <Text className=\"text-sm\">\n                            Load More Triggered: {loadMoreTriggered ? \"Yes\" : \"No\"}\n                        </Text>\n                    </div>\n                )}\n            </div>\n        );\n    }\n};\n"],"names":["meta","ScrollArea","Story","tags","Array","_","i","a","Default","Heading","tag","Text","Separator","HorizontalScrolling","works","artwork","ScrollBar","WithScrollPositionTracking","position","setPosition","React","loadMoreTriggered","setLoadMoreTriggered","handleScrollPositionChange","pos","console"],"mappings":"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"}
+{"version":3,"file":"ScrollArea/ScrollArea.stories.js","sources":["../../src/ScrollArea/ScrollArea.stories.tsx"],"sourcesContent":["import type { Meta, StoryObj } from \"@storybook/react\";\nimport { ScrollArea, ScrollBar, ScrollPosition } from \"./ScrollArea.js\";\nimport React from \"react\";\nimport { Heading } from \"~/Heading/index.js\";\nimport { Text } from \"~/Text/index.js\";\nimport { Separator } from \"~/Separator/index.js\";\n\nconst meta: Meta<typeof ScrollArea> = {\n    title: \"Components/ScrollArea\",\n    component: ScrollArea,\n    argTypes: {},\n    decorators: [\n        Story => (\n            <div className=\"w-[700px]\">\n                <Story />\n            </div>\n        )\n    ]\n};\n\nexport default meta;\n\ntype Story = StoryObj<typeof ScrollArea>;\n\nconst tags = Array.from({ length: 50 }).map((_, i, a) => `v1.2.0-beta.${a.length - i}`);\n\nexport const Default: Story = {\n    render: () => {\n        return (\n            <ScrollArea className=\"h-72 w-48 rounded-md border border-neutral-dimmed\">\n                <div className=\"p-4\">\n                    <Heading level={6} className=\"mb-4\">\n                        Tags\n                    </Heading>\n                    {tags.map(tag => (\n                        <div key={tag}>\n                            <Text className=\"text-sm\">{tag}</Text>\n                            <Separator className=\"my-2\" />\n                        </div>\n                    ))}\n                </div>\n            </ScrollArea>\n        );\n    }\n};\n\nexport const HorizontalScrolling: Story = {\n    render: () => {\n        const works = [\n            {\n                artist: \"Ornella Binni\",\n                art: \"https://images.unsplash.com/photo-1465869185982-5a1a7522cbcb?auto=format&fit=crop&w=300&q=80\"\n            },\n            {\n                artist: \"Ornella Binni\",\n                art: \"https://images.unsplash.com/photo-1465869185982-5a1a7522cbcb?auto=format&fit=crop&w=300&q=80\"\n            },\n            {\n                artist: \"Ornella Binni\",\n                art: \"https://images.unsplash.com/photo-1465869185982-5a1a7522cbcb?auto=format&fit=crop&w=300&q=80\"\n            }\n        ];\n\n        return (\n            <ScrollArea className=\"w-96 whitespace-nowrap rounded-md border border-neutral-dimmed\">\n                <div className=\"flex w-max space-x-4 p-4\">\n                    {works.map(artwork => (\n                        <figure key={artwork.artist} className=\"shrink-0\">\n                            <div className=\"overflow-hidden rounded-md\">\n                                <img\n                                    src={artwork.art}\n                                    alt={`Photo by ${artwork.artist}`}\n                                    className=\"aspect-[3/4] h-fit w-fit object-cover\"\n                                    width={300}\n                                    height={400}\n                                />\n                            </div>\n                            <figcaption className=\"pt-2 text-xs text-neutral-strong\">\n                                Photo by{\" \"}\n                                <span className=\"font-semibold text-neutral-primary\">\n                                    {artwork.artist}\n                                </span>\n                            </figcaption>\n                        </figure>\n                    ))}\n                </div>\n                <ScrollBar orientation=\"horizontal\" />\n            </ScrollArea>\n        );\n    }\n};\n\nexport const WithScrollPositionTracking: Story = {\n    render: () => {\n        const [position, setPosition] = React.useState<ScrollPosition | null>(null);\n        const [loadMoreTriggered, setLoadMoreTriggered] = React.useState(false);\n\n        const handleScrollPositionChange = React.useCallback(\n            (pos: ScrollPosition) => {\n                setPosition(pos);\n\n                // Trigger load more when scrolled 90% down.\n                if (pos.top >= 0.9 && !loadMoreTriggered) {\n                    setLoadMoreTriggered(true);\n                    console.log(\"Load more triggered at position:\", pos);\n                } else if (pos.top < 0.9) {\n                    setLoadMoreTriggered(false);\n                }\n            },\n            [loadMoreTriggered]\n        );\n\n        return (\n            <div className=\"space-y-4\">\n                <ScrollArea\n                    className=\"h-72 w-48 rounded-md border border-neutral-dimmed\"\n                    onScrollPositionChange={handleScrollPositionChange}\n                >\n                    <div className=\"p-4\">\n                        <Heading level={6} className=\"mb-4\">\n                            Tags\n                        </Heading>\n                        {tags.map(tag => (\n                            <div key={tag}>\n                                <Text className=\"text-sm\">{tag}</Text>\n                                <Separator className=\"my-2\" />\n                            </div>\n                        ))}\n                    </div>\n                </ScrollArea>\n\n                {position && (\n                    <div className=\"rounded-md border border-neutral-dimmed p-4 space-y-2\">\n                        <Text className=\"font-semibold\">Scroll Position:</Text>\n                        <Text className=\"text-sm\">Top: {(position.top * 100).toFixed(1)}%</Text>\n                        <Text className=\"text-sm\">ScrollTop: {position.scrollTop}px</Text>\n                        <Text className=\"text-sm\">\n                            Load More Triggered: {loadMoreTriggered ? \"Yes\" : \"No\"}\n                        </Text>\n                    </div>\n                )}\n            </div>\n        );\n    }\n};\n"],"names":["meta","ScrollArea","Story","tags","Array","_","i","a","Default","Heading","tag","Text","Separator","HorizontalScrolling","works","artwork","ScrollBar","WithScrollPositionTracking","position","setPosition","React","loadMoreTriggered","setLoadMoreTriggered","handleScrollPositionChange","pos","console"],"mappings":"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"}

package/SegmentedControl/SegmentedControl.d.ts

@@ -20,5 +20,9 @@ declare const SegmentedControl: (({ label, description, note, hint, required, di
         originalName: string;
         displayName: string;
     }>) => (props: unknown) => React.JSX.Element;
+} & {
+    Tabs: (({ children, variant, defaultValue, className }: import("./SegmentedControlTabs.js").SegmentedControlTabsProps) => React.JSX.Element) & {
+        Tab: (props: import("./SegmentedControlTab.js").SegmentedControlTabProps) => null;
+    };
 };
 export { SegmentedControl, type SegmentedControlProps };

package/SegmentedControl/SegmentedControl.js

@@ -1,5 +1,6 @@
 import react, { useMemo } from "react";
-import { makeDecoratable } from "../utils.js";
+import { makeDecoratable, withStaticProps } from "../utils.js";
+import { SegmentedControlTabs } from "./SegmentedControlTabs.js";
 import { SegmentedControlPrimitive } from "./primitives/index.js";
 import { FormComponentDescription, FormComponentErrorMessage, FormComponentLabel, FormComponentNote } from "../FormComponent/index.js";
 const DecoratableSegmentedControl = ({ label, description, note, hint, required, disabled, validation, ...props })=>{
@@ -32,7 +33,10 @@ const DecoratableSegmentedControl = ({ label, description, note, hint, required,
         disabled: disabled
     }));
 };
-const SegmentedControl = makeDecoratable("SegmentedControl", DecoratableSegmentedControl);
+const BaseSegmentedControl = makeDecoratable("SegmentedControl", DecoratableSegmentedControl);
+const SegmentedControl = withStaticProps(BaseSegmentedControl, {
+    Tabs: SegmentedControlTabs
+});
 export { SegmentedControl };
 
 //# sourceMappingURL=SegmentedControl.js.map