@webiny/admin-ui 0.0.0-unstable.e53eceafb5 → 0.0.0-unstable.e6f0dc8ca7

package/DataTable/DataTable.stories.d.ts

@@ -1,6 +1,6 @@
-import type { Meta, StoryObj } from "@storybook/react";
-import type { DataTableDefaultData } from "./DataTable";
-import { DataTable } from "./DataTable";
+import type { Meta, StoryObj } from "@storybook/react-webpack5";
+import type { DataTableDefaultData } from "./DataTable.js";
+import { DataTable } from "./DataTable.js";
 declare const meta: Meta<typeof DataTable>;
 export default meta;
 type Story<T extends Record<string, any> & DataTableDefaultData> = StoryObj<typeof DataTable<T>>;

package/DataTable/DataTable.stories.js

@@ -1,7 +1,7 @@
 import React, { useState, useEffect } from "react";
-import { DataTable } from "./DataTable";
-import { Avatar } from "../Avatar";
-import { Text } from "../Text";
+import { DataTable } from "./DataTable.js";
+import { Avatar } from "../Avatar/index.js";
+import { Text } from "../Text/index.js";
 const meta = {
   title: "Components/DataTable",
   component: DataTable,
@@ -125,7 +125,7 @@ export const WithCustomCellRenderer = {
         ...columns.name,
         cell: entry => {
           return /*#__PURE__*/React.createElement("div", {
-            className: "wby-flex wby-items-center wby-gap-sm-extra"
+            className: "flex items-center gap-sm-extra"
           }, /*#__PURE__*/React.createElement(Avatar, {
             image: /*#__PURE__*/React.createElement(Avatar.Image, {
               src: "https://github.com/webiny-bot.png",
@@ -134,11 +134,11 @@ export const WithCustomCellRenderer = {
             fallback: /*#__PURE__*/React.createElement(Avatar.Fallback, null, entry.name.charAt(0)),
             size: "xl"
           }), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Text, {
-            className: "wby-text-neutral-primary wby-font-semibold",
+            className: "text-neutral-primary font-semibold",
             as: "div"
           }, entry.name), /*#__PURE__*/React.createElement(Text, {
             size: "sm",
-            className: "wby-text-neutral-strong",
+            className: "text-neutral-strong",
             as: "div"
           }, `Last updated: ${entry.lastModified}`)));
         }
@@ -165,11 +165,11 @@ export const WithCustomColumnClassName = {
       ...columns,
       lastModified: {
         ...columns.lastModified,
-        className: "wby-bg-primary-subtle"
+        className: "bg-primary-subtle"
       },
       status: {
         ...columns.status,
-        className: "wby-text-right"
+        className: "text-right"
       }
     }
   }

package/DataTable/DataTable.stories.js.map

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

package/DataTable/components/ColumnSorter.d.ts

@@ -1,8 +1,8 @@
 import React from "react";
-import { type VariantProps } from "../../utils";
+import { type VariantProps } from "../../utils.js";
 declare const columnSorterVariants: (props?: ({
     sortable?: boolean | null | undefined;
-} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
 interface ColumnSorterProps extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof columnSorterVariants> {
 }
 declare const ColumnSorter: ({ className, children, sortable, ...props }: ColumnSorterProps) => React.JSX.Element;

package/DataTable/components/ColumnSorter.js

@@ -1,9 +1,9 @@
 import React from "react";
-import { cn, cva } from "../../utils";
-const columnSorterVariants = cva("wby-flex wby-items-center wby-gap-xxs wby-cursor-auto", {
+import { cn, cva } from "../../utils.js";
+const columnSorterVariants = cva("flex items-center gap-xxs cursor-auto", {
   variants: {
     sortable: {
-      true: "wby-cursor-pointer"
+      true: "cursor-pointer"
     }
   }
 });

package/DataTable/components/ColumnSorter.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","cn","cva","columnSorterVariants","variants","sortable","true","ColumnSorter","className","children","props","createElement","Object","assign"],"sources":["ColumnSorter.tsx"],"sourcesContent":["import React from \"react\";\nimport { cn, cva, type VariantProps } from \"~/utils\";\n\nconst columnSorterVariants = cva(\"wby-flex wby-items-center wby-gap-xxs wby-cursor-auto\", {\n    variants: {\n        sortable: {\n            true: \"wby-cursor-pointer\"\n        }\n    }\n});\n\ninterface ColumnSorterProps\n    extends React.HTMLAttributes<HTMLDivElement>,\n        VariantProps<typeof columnSorterVariants> {}\n\nconst ColumnSorter = ({ className, children, sortable, ...props }: ColumnSorterProps) => {\n    return (\n        <div {...props} className={cn(columnSorterVariants({ sortable }), className)}>\n            {children}\n        </div>\n    );\n};\n\nexport { ColumnSorter };\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,EAAE,EAAEC,GAAG;AAEhB,MAAMC,oBAAoB,GAAGD,GAAG,CAAC,uDAAuD,EAAE;EACtFE,QAAQ,EAAE;IACNC,QAAQ,EAAE;MACNC,IAAI,EAAE;IACV;EACJ;AACJ,CAAC,CAAC;AAMF,MAAMC,YAAY,GAAGA,CAAC;EAAEC,SAAS;EAAEC,QAAQ;EAAEJ,QAAQ;EAAE,GAAGK;AAAyB,CAAC,KAAK;EACrF,oBACIV,KAAA,CAAAW,aAAA,QAAAC,MAAA,CAAAC,MAAA,KAASH,KAAK;IAAEF,SAAS,EAAEP,EAAE,CAACE,oBAAoB,CAAC;MAAEE;IAAS,CAAC,CAAC,EAAEG,SAAS;EAAE,IACxEC,QACA,CAAC;AAEd,CAAC;AAED,SAASF,YAAY","ignoreList":[]}
+{"version":3,"names":["React","cn","cva","columnSorterVariants","variants","sortable","true","ColumnSorter","className","children","props","createElement","Object","assign"],"sources":["ColumnSorter.tsx"],"sourcesContent":["import React from \"react\";\nimport { cn, cva, type VariantProps } from \"~/utils.js\";\n\nconst columnSorterVariants = cva(\"flex items-center gap-xxs cursor-auto\", {\n    variants: {\n        sortable: {\n            true: \"cursor-pointer\"\n        }\n    }\n});\n\ninterface ColumnSorterProps\n    extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof columnSorterVariants> {}\n\nconst ColumnSorter = ({ className, children, sortable, ...props }: ColumnSorterProps) => {\n    return (\n        <div {...props} className={cn(columnSorterVariants({ sortable }), className)}>\n            {children}\n        </div>\n    );\n};\n\nexport { ColumnSorter };\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,EAAE,EAAEC,GAAG;AAEhB,MAAMC,oBAAoB,GAAGD,GAAG,CAAC,uCAAuC,EAAE;EACtEE,QAAQ,EAAE;IACNC,QAAQ,EAAE;MACNC,IAAI,EAAE;IACV;EACJ;AACJ,CAAC,CAAC;AAKF,MAAMC,YAAY,GAAGA,CAAC;EAAEC,SAAS;EAAEC,QAAQ;EAAEJ,QAAQ;EAAE,GAAGK;AAAyB,CAAC,KAAK;EACrF,oBACIV,KAAA,CAAAW,aAAA,QAAAC,MAAA,CAAAC,MAAA,KAASH,KAAK;IAAEF,SAAS,EAAEP,EAAE,CAACE,oBAAoB,CAAC;MAAEE;IAAS,CAAC,CAAC,EAAEG,SAAS;EAAE,IACxEC,QACA,CAAC;AAEd,CAAC;AAED,SAASF,YAAY","ignoreList":[]}

package/DataTable/components/ColumnsVisibility.js

@@ -1,8 +1,8 @@
 import React, { useCallback, useMemo } from "react";
 import { ReactComponent as SettingsIcon } from "@webiny/icons/settings.svg";
-import { IconButton } from "../../Button";
-import { Checkbox } from "../../Checkbox";
-import { DropdownMenu } from "../../DropdownMenu";
+import { IconButton } from "../../Button/index.js";
+import { Checkbox } from "../../Checkbox/index.js";
+import { DropdownMenu } from "../../DropdownMenu/index.js";
 export const ColumnsVisibility = props => {
   /**
    * `@tanstack/react-table` does not have a simple method to return the header component.

package/DataTable/components/ColumnsVisibility.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","useCallback","useMemo","ReactComponent","SettingsIcon","IconButton","Checkbox","DropdownMenu","ColumnsVisibility","props","getHeaderName","column","header","columnDef","id","options","columns","filter","getCanHide","map","onChange","toggleVisibility","getValue","getIsVisible","length","createElement","trigger","icon","variant","size","Label","text","option","Item","key","label","checked"],"sources":["ColumnsVisibility.tsx"],"sourcesContent":["import React, { useCallback, useMemo } from \"react\";\nimport { ReactComponent as SettingsIcon } from \"@webiny/icons/settings.svg\";\nimport type { Column } from \"@tanstack/react-table\";\nimport { IconButton } from \"~/Button\";\nimport { Checkbox } from \"~/Checkbox\";\nimport { DropdownMenu } from \"~/DropdownMenu\";\n\ninterface ColumnsVisibilityProps<T> {\n    columns: Column<T>[];\n}\n\ninterface Option {\n    id: string;\n    header: string;\n    onChange: (value?: boolean | undefined) => void;\n    getValue: () => boolean;\n}\n\nexport const ColumnsVisibility = <T,>(props: ColumnsVisibilityProps<T>) => {\n    /**\n     * `@tanstack/react-table` does not have a simple method to return the header component.\n     * The only possible way is to use `flexRenderer`, but this is not working with the current implementation\n     * since we don't have access to the header context.\n     */\n    const getHeaderName = useCallback((column: Column<T>) => {\n        const { header } = column.columnDef;\n\n        if (typeof header === \"string\") {\n            return header;\n        }\n\n        if (typeof header === \"function\") {\n            // @ts-expect-error\n            return header();\n        }\n\n        return column.id;\n    }, []);\n\n    const options: Option[] = useMemo(() => {\n        return props.columns\n            .filter(column => column.getCanHide())\n            .map(column => {\n                return {\n                    id: column.id,\n                    header: getHeaderName(column),\n                    onChange: column.toggleVisibility,\n                    getValue: column.getIsVisible\n                };\n            });\n    }, [props.columns]);\n\n    if (options.length === 0) {\n        return null;\n    }\n\n    return (\n        <DropdownMenu\n            trigger={<IconButton icon={<SettingsIcon />} variant={\"ghost\"} size={\"xs\"} />}\n        >\n            <DropdownMenu.Label text={\"Display columns\"} />\n            {options.map(option => {\n                return (\n                    <DropdownMenu.Item\n                        key={option.id}\n                        text={\n                            <Checkbox\n                                label={option.header}\n                                onChange={option.onChange}\n                                checked={option.getValue()}\n                            />\n                        }\n                    />\n                );\n            })}\n        </DropdownMenu>\n    );\n};\n"],"mappings":"AAAA,OAAOA,KAAK,IAAIC,WAAW,EAAEC,OAAO,QAAQ,OAAO;AACnD,SAASC,cAAc,IAAIC,YAAY,QAAQ,4BAA4B;AAE3E,SAASC,UAAU;AACnB,SAASC,QAAQ;AACjB,SAASC,YAAY;AAarB,OAAO,MAAMC,iBAAiB,GAAQC,KAAgC,IAAK;EACvE;AACJ;AACA;AACA;AACA;EACI,MAAMC,aAAa,GAAGT,WAAW,CAAEU,MAAiB,IAAK;IACrD,MAAM;MAAEC;IAAO,CAAC,GAAGD,MAAM,CAACE,SAAS;IAEnC,IAAI,OAAOD,MAAM,KAAK,QAAQ,EAAE;MAC5B,OAAOA,MAAM;IACjB;IAEA,IAAI,OAAOA,MAAM,KAAK,UAAU,EAAE;MAC9B;MACA,OAAOA,MAAM,CAAC,CAAC;IACnB;IAEA,OAAOD,MAAM,CAACG,EAAE;EACpB,CAAC,EAAE,EAAE,CAAC;EAEN,MAAMC,OAAiB,GAAGb,OAAO,CAAC,MAAM;IACpC,OAAOO,KAAK,CAACO,OAAO,CACfC,MAAM,CAACN,MAAM,IAAIA,MAAM,CAACO,UAAU,CAAC,CAAC,CAAC,CACrCC,GAAG,CAACR,MAAM,IAAI;MACX,OAAO;QACHG,EAAE,EAAEH,MAAM,CAACG,EAAE;QACbF,MAAM,EAAEF,aAAa,CAACC,MAAM,CAAC;QAC7BS,QAAQ,EAAET,MAAM,CAACU,gBAAgB;QACjCC,QAAQ,EAAEX,MAAM,CAACY;MACrB,CAAC;IACL,CAAC,CAAC;EACV,CAAC,EAAE,CAACd,KAAK,CAACO,OAAO,CAAC,CAAC;EAEnB,IAAID,OAAO,CAACS,MAAM,KAAK,CAAC,EAAE;IACtB,OAAO,IAAI;EACf;EAEA,oBACIxB,KAAA,CAAAyB,aAAA,CAAClB,YAAY;IACTmB,OAAO,eAAE1B,KAAA,CAAAyB,aAAA,CAACpB,UAAU;MAACsB,IAAI,eAAE3B,KAAA,CAAAyB,aAAA,CAACrB,YAAY,MAAE,CAAE;MAACwB,OAAO,EAAE,OAAQ;MAACC,IAAI,EAAE;IAAK,CAAE;EAAE,gBAE9E7B,KAAA,CAAAyB,aAAA,CAAClB,YAAY,CAACuB,KAAK;IAACC,IAAI,EAAE;EAAkB,CAAE,CAAC,EAC9ChB,OAAO,CAACI,GAAG,CAACa,MAAM,IAAI;IACnB,oBACIhC,KAAA,CAAAyB,aAAA,CAAClB,YAAY,CAAC0B,IAAI;MACdC,GAAG,EAAEF,MAAM,CAAClB,EAAG;MACfiB,IAAI,eACA/B,KAAA,CAAAyB,aAAA,CAACnB,QAAQ;QACL6B,KAAK,EAAEH,MAAM,CAACpB,MAAO;QACrBQ,QAAQ,EAAEY,MAAM,CAACZ,QAAS;QAC1BgB,OAAO,EAAEJ,MAAM,CAACV,QAAQ,CAAC;MAAE,CAC9B;IACJ,CACJ,CAAC;EAEV,CAAC,CACS,CAAC;AAEvB,CAAC","ignoreList":[]}
+{"version":3,"names":["React","useCallback","useMemo","ReactComponent","SettingsIcon","IconButton","Checkbox","DropdownMenu","ColumnsVisibility","props","getHeaderName","column","header","columnDef","id","options","columns","filter","getCanHide","map","onChange","toggleVisibility","getValue","getIsVisible","length","createElement","trigger","icon","variant","size","Label","text","option","Item","key","label","checked"],"sources":["ColumnsVisibility.tsx"],"sourcesContent":["import React, { useCallback, useMemo } from \"react\";\nimport { ReactComponent as SettingsIcon } from \"@webiny/icons/settings.svg\";\nimport type { Column } from \"@tanstack/react-table\";\nimport { IconButton } from \"~/Button/index.js\";\nimport { Checkbox } from \"~/Checkbox/index.js\";\nimport { DropdownMenu } from \"~/DropdownMenu/index.js\";\n\ninterface ColumnsVisibilityProps<T> {\n    columns: Column<T>[];\n}\n\ninterface Option {\n    id: string;\n    header: string;\n    onChange: (value?: boolean | undefined) => void;\n    getValue: () => boolean;\n}\n\nexport const ColumnsVisibility = <T,>(props: ColumnsVisibilityProps<T>) => {\n    /**\n     * `@tanstack/react-table` does not have a simple method to return the header component.\n     * The only possible way is to use `flexRenderer`, but this is not working with the current implementation\n     * since we don't have access to the header context.\n     */\n    const getHeaderName = useCallback((column: Column<T>) => {\n        const { header } = column.columnDef;\n\n        if (typeof header === \"string\") {\n            return header;\n        }\n\n        if (typeof header === \"function\") {\n            // @ts-expect-error\n            return header();\n        }\n\n        return column.id;\n    }, []);\n\n    const options: Option[] = useMemo(() => {\n        return props.columns\n            .filter(column => column.getCanHide())\n            .map(column => {\n                return {\n                    id: column.id,\n                    header: getHeaderName(column),\n                    onChange: column.toggleVisibility,\n                    getValue: column.getIsVisible\n                };\n            });\n    }, [props.columns]);\n\n    if (options.length === 0) {\n        return null;\n    }\n\n    return (\n        <DropdownMenu\n            trigger={<IconButton icon={<SettingsIcon />} variant={\"ghost\"} size={\"xs\"} />}\n        >\n            <DropdownMenu.Label text={\"Display columns\"} />\n            {options.map(option => {\n                return (\n                    <DropdownMenu.Item\n                        key={option.id}\n                        text={\n                            <Checkbox\n                                label={option.header}\n                                onChange={option.onChange}\n                                checked={option.getValue()}\n                            />\n                        }\n                    />\n                );\n            })}\n        </DropdownMenu>\n    );\n};\n"],"mappings":"AAAA,OAAOA,KAAK,IAAIC,WAAW,EAAEC,OAAO,QAAQ,OAAO;AACnD,SAASC,cAAc,IAAIC,YAAY,QAAQ,4BAA4B;AAE3E,SAASC,UAAU;AACnB,SAASC,QAAQ;AACjB,SAASC,YAAY;AAarB,OAAO,MAAMC,iBAAiB,GAAQC,KAAgC,IAAK;EACvE;AACJ;AACA;AACA;AACA;EACI,MAAMC,aAAa,GAAGT,WAAW,CAAEU,MAAiB,IAAK;IACrD,MAAM;MAAEC;IAAO,CAAC,GAAGD,MAAM,CAACE,SAAS;IAEnC,IAAI,OAAOD,MAAM,KAAK,QAAQ,EAAE;MAC5B,OAAOA,MAAM;IACjB;IAEA,IAAI,OAAOA,MAAM,KAAK,UAAU,EAAE;MAC9B;MACA,OAAOA,MAAM,CAAC,CAAC;IACnB;IAEA,OAAOD,MAAM,CAACG,EAAE;EACpB,CAAC,EAAE,EAAE,CAAC;EAEN,MAAMC,OAAiB,GAAGb,OAAO,CAAC,MAAM;IACpC,OAAOO,KAAK,CAACO,OAAO,CACfC,MAAM,CAACN,MAAM,IAAIA,MAAM,CAACO,UAAU,CAAC,CAAC,CAAC,CACrCC,GAAG,CAACR,MAAM,IAAI;MACX,OAAO;QACHG,EAAE,EAAEH,MAAM,CAACG,EAAE;QACbF,MAAM,EAAEF,aAAa,CAACC,MAAM,CAAC;QAC7BS,QAAQ,EAAET,MAAM,CAACU,gBAAgB;QACjCC,QAAQ,EAAEX,MAAM,CAACY;MACrB,CAAC;IACL,CAAC,CAAC;EACV,CAAC,EAAE,CAACd,KAAK,CAACO,OAAO,CAAC,CAAC;EAEnB,IAAID,OAAO,CAACS,MAAM,KAAK,CAAC,EAAE;IACtB,OAAO,IAAI;EACf;EAEA,oBACIxB,KAAA,CAAAyB,aAAA,CAAClB,YAAY;IACTmB,OAAO,eAAE1B,KAAA,CAAAyB,aAAA,CAACpB,UAAU;MAACsB,IAAI,eAAE3B,KAAA,CAAAyB,aAAA,CAACrB,YAAY,MAAE,CAAE;MAACwB,OAAO,EAAE,OAAQ;MAACC,IAAI,EAAE;IAAK,CAAE;EAAE,gBAE9E7B,KAAA,CAAAyB,aAAA,CAAClB,YAAY,CAACuB,KAAK;IAACC,IAAI,EAAE;EAAkB,CAAE,CAAC,EAC9ChB,OAAO,CAACI,GAAG,CAACa,MAAM,IAAI;IACnB,oBACIhC,KAAA,CAAAyB,aAAA,CAAClB,YAAY,CAAC0B,IAAI;MACdC,GAAG,EAAEF,MAAM,CAAClB,EAAG;MACfiB,IAAI,eACA/B,KAAA,CAAAyB,aAAA,CAACnB,QAAQ;QACL6B,KAAK,EAAEH,MAAM,CAACpB,MAAO;QACrBQ,QAAQ,EAAEY,MAAM,CAACZ,QAAS;QAC1BgB,OAAO,EAAEJ,MAAM,CAACV,QAAQ,CAAC;MAAE,CAC9B;IACJ,CACJ,CAAC;EAEV,CAAC,CACS,CAAC;AAEvB,CAAC","ignoreList":[]}

package/DataTable/components/index.d.ts

@@ -1,2 +1,2 @@
-export * from "./ColumnSorter";
-export * from "./ColumnsVisibility";
+export * from "./ColumnSorter.js";
+export * from "./ColumnsVisibility.js";

package/DataTable/components/index.js

@@ -1,4 +1,4 @@
-export * from "./ColumnSorter";
-export * from "./ColumnsVisibility";
+export * from "./ColumnSorter.js";
+export * from "./ColumnsVisibility.js";
 
 //# sourceMappingURL=index.js.map

package/DataTable/components/index.js.map

@@ -1 +1 @@
-{"version":3,"names":[],"sources":["index.ts"],"sourcesContent":["export * from \"./ColumnSorter\";\nexport * from \"./ColumnsVisibility\";\n"],"mappings":"AAAA;AACA","ignoreList":[]}
+{"version":3,"names":[],"sources":["index.ts"],"sourcesContent":["export * from \"./ColumnSorter.js\";\nexport * from \"./ColumnsVisibility.js\";\n"],"mappings":"AAAA;AACA","ignoreList":[]}

package/DataTable/index.d.ts

@@ -1 +1 @@
-export * from "./DataTable";
+export * from "./DataTable.js";

package/DataTable/index.js

@@ -1,3 +1,3 @@
-export * from "./DataTable";
+export * from "./DataTable.js";
 
 //# sourceMappingURL=index.js.map

package/DataTable/index.js.map

@@ -1 +1 @@
-{"version":3,"names":[],"sources":["index.ts"],"sourcesContent":["export * from \"./DataTable\";\n"],"mappings":"AAAA","ignoreList":[]}
+{"version":3,"names":[],"sources":["index.ts"],"sourcesContent":["export * from \"./DataTable.js\";\n"],"mappings":"AAAA","ignoreList":[]}

package/DatePicker/DatePicker.d.ts

@@ -0,0 +1,24 @@
+import React from "react";
+import type { DatePickerPrimitiveProps } from "./primitives/index.js";
+import type { FormComponentProps } from "../FormComponent/index.js";
+type DatePickerProps = DatePickerPrimitiveProps & FormComponentProps;
+declare const DatePicker: (({ label, description, note, hint, required, disabled, validation, ...props }: DatePickerProps) => React.JSX.Element) & {
+    original: ({ label, description, note, hint, required, disabled, validation, ...props }: DatePickerProps) => React.JSX.Element;
+    originalName: string;
+    displayName: string;
+} & {
+    original: (({ label, description, note, hint, required, disabled, validation, ...props }: DatePickerProps) => React.JSX.Element) & {
+        original: ({ label, description, note, hint, required, disabled, validation, ...props }: DatePickerProps) => React.JSX.Element;
+        originalName: string;
+        displayName: string;
+    };
+    originalName: string;
+    displayName: string;
+} & {
+    createDecorator: (decorator: import("@webiny/react-composition/types.js").ComponentDecorator<(({ label, description, note, hint, required, disabled, validation, ...props }: DatePickerProps) => React.JSX.Element) & {
+        original: ({ label, description, note, hint, required, disabled, validation, ...props }: DatePickerProps) => React.JSX.Element;
+        originalName: string;
+        displayName: string;
+    }>) => (props: unknown) => React.JSX.Element;
+};
+export { DatePicker, type DatePickerProps };

package/{RichTextEditor/RichTextEditor.js → DatePicker/DatePicker.js}

@@ -1,11 +1,12 @@
 import React, { useMemo } from "react";
-import { makeDecoratable } from "../utils";
-import { RichTextEditorPrimitive } from "./RichTextEditorPrimitive";
-import { FormComponentDescription, FormComponentErrorMessage, FormComponentLabel, FormComponentNote } from "../FormComponent";
-const DecoratableRichTextEditor = ({
+import { makeDecoratable } from "../utils.js";
+import { DatePickerPrimitive } from "./primitives/index.js";
+import { FormComponentDescription, FormComponentErrorMessage, FormComponentLabel, FormComponentNote } from "../FormComponent/index.js";
+const DecoratableDatePicker = ({
   label,
   description,
   note,
+  hint,
   required,
   disabled,
   validation,
@@ -17,16 +18,17 @@ const DecoratableRichTextEditor = ({
   } = validation || {};
   const invalid = useMemo(() => validationIsValid === false, [validationIsValid]);
   return /*#__PURE__*/React.createElement("div", {
-    className: "wby-w-full"
+    className: "w-full"
   }, /*#__PURE__*/React.createElement(FormComponentLabel, {
     text: label,
+    hint: hint,
     required: required,
     disabled: disabled,
     invalid: invalid
   }), /*#__PURE__*/React.createElement(FormComponentDescription, {
     text: description,
     disabled: disabled
-  }), /*#__PURE__*/React.createElement(RichTextEditorPrimitive, Object.assign({}, props, {
+  }), /*#__PURE__*/React.createElement(DatePickerPrimitive, Object.assign({}, props, {
     disabled: disabled,
     invalid: invalid
   })), /*#__PURE__*/React.createElement(FormComponentErrorMessage, {
@@ -38,7 +40,7 @@ const DecoratableRichTextEditor = ({
     disabled: disabled
   }));
 };
-const RichTextEditor = makeDecoratable("RichTextEditor", DecoratableRichTextEditor);
-export { RichTextEditor };
+const DatePicker = makeDecoratable("DatePicker", DecoratableDatePicker);
+export { DatePicker };
 
-//# sourceMappingURL=RichTextEditor.js.map
+//# sourceMappingURL=DatePicker.js.map

package/DatePicker/DatePicker.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","useMemo","makeDecoratable","DatePickerPrimitive","FormComponentDescription","FormComponentErrorMessage","FormComponentLabel","FormComponentNote","DecoratableDatePicker","label","description","note","hint","required","disabled","validation","props","isValid","validationIsValid","message","validationMessage","invalid","createElement","className","text","Object","assign","DatePicker"],"sources":["DatePicker.tsx"],"sourcesContent":["import React, { useMemo } from \"react\";\nimport { makeDecoratable } from \"~/utils.js\";\nimport type { DatePickerPrimitiveProps } from \"./primitives/index.js\";\nimport { DatePickerPrimitive } from \"./primitives/index.js\";\nimport type { FormComponentProps } from \"~/FormComponent/index.js\";\nimport {\n    FormComponentDescription,\n    FormComponentErrorMessage,\n    FormComponentLabel,\n    FormComponentNote\n} from \"~/FormComponent/index.js\";\n\ntype DatePickerProps = DatePickerPrimitiveProps & FormComponentProps;\n\nconst DecoratableDatePicker = ({\n    label,\n    description,\n    note,\n    hint,\n    required,\n    disabled,\n    validation,\n    ...props\n}: DatePickerProps) => {\n    const { isValid: validationIsValid, message: validationMessage } = validation || {};\n    const invalid = useMemo(() => validationIsValid === false, [validationIsValid]);\n\n    return (\n        <div className=\"w-full\">\n            <FormComponentLabel\n                text={label}\n                hint={hint}\n                required={required}\n                disabled={disabled}\n                invalid={invalid}\n            />\n            <FormComponentDescription text={description} disabled={disabled} />\n            <DatePickerPrimitive\n                {...(props as DatePickerPrimitiveProps)}\n                disabled={disabled}\n                invalid={invalid}\n            />\n            <FormComponentErrorMessage\n                text={validationMessage}\n                invalid={invalid}\n                disabled={disabled}\n            />\n            <FormComponentNote text={note} disabled={disabled} />\n        </div>\n    );\n};\n\nconst DatePicker = makeDecoratable(\"DatePicker\", DecoratableDatePicker);\n\nexport { DatePicker, type DatePickerProps };\n"],"mappings":"AAAA,OAAOA,KAAK,IAAIC,OAAO,QAAQ,OAAO;AACtC,SAASC,eAAe;AAExB,SAASC,mBAAmB;AAE5B,SACIC,wBAAwB,EACxBC,yBAAyB,EACzBC,kBAAkB,EAClBC,iBAAiB;AAKrB,MAAMC,qBAAqB,GAAGA,CAAC;EAC3BC,KAAK;EACLC,WAAW;EACXC,IAAI;EACJC,IAAI;EACJC,QAAQ;EACRC,QAAQ;EACRC,UAAU;EACV,GAAGC;AACU,CAAC,KAAK;EACnB,MAAM;IAAEC,OAAO,EAAEC,iBAAiB;IAAEC,OAAO,EAAEC;EAAkB,CAAC,GAAGL,UAAU,IAAI,CAAC,CAAC;EACnF,MAAMM,OAAO,GAAGpB,OAAO,CAAC,MAAMiB,iBAAiB,KAAK,KAAK,EAAE,CAACA,iBAAiB,CAAC,CAAC;EAE/E,oBACIlB,KAAA,CAAAsB,aAAA;IAAKC,SAAS,EAAC;EAAQ,gBACnBvB,KAAA,CAAAsB,aAAA,CAAChB,kBAAkB;IACfkB,IAAI,EAAEf,KAAM;IACZG,IAAI,EAAEA,IAAK;IACXC,QAAQ,EAAEA,QAAS;IACnBC,QAAQ,EAAEA,QAAS;IACnBO,OAAO,EAAEA;EAAQ,CACpB,CAAC,eACFrB,KAAA,CAAAsB,aAAA,CAAClB,wBAAwB;IAACoB,IAAI,EAAEd,WAAY;IAACI,QAAQ,EAAEA;EAAS,CAAE,CAAC,eACnEd,KAAA,CAAAsB,aAAA,CAACnB,mBAAmB,EAAAsB,MAAA,CAAAC,MAAA,KACXV,KAAK;IACVF,QAAQ,EAAEA,QAAS;IACnBO,OAAO,EAAEA;EAAQ,EACpB,CAAC,eACFrB,KAAA,CAAAsB,aAAA,CAACjB,yBAAyB;IACtBmB,IAAI,EAAEJ,iBAAkB;IACxBC,OAAO,EAAEA,OAAQ;IACjBP,QAAQ,EAAEA;EAAS,CACtB,CAAC,eACFd,KAAA,CAAAsB,aAAA,CAACf,iBAAiB;IAACiB,IAAI,EAAEb,IAAK;IAACG,QAAQ,EAAEA;EAAS,CAAE,CACnD,CAAC;AAEd,CAAC;AAED,MAAMa,UAAU,GAAGzB,eAAe,CAAC,YAAY,EAAEM,qBAAqB,CAAC;AAEvE,SAASmB,UAAU","ignoreList":[]}

package/DatePicker/DatePicker.mdx

@@ -0,0 +1,153 @@
+import { Canvas, Meta, Controls } from "@storybook/addon-docs/blocks";
+
+import * as DatePickerStories from "./DatePicker.stories";
+
+<Meta of={DatePickerStories} />
+
+# DatePicker
+
+The DatePicker component is a form control for selecting dates, times, months, years, date ranges, and multiple selections. It supports 10 variant types and includes built-in validation support.
+
+## Usage
+
+<Canvas of={DatePickerStories.Documentation} source={ { code: `
+import React, { useState } from "react";
+
+import { DatePicker } from "@webiny/admin-ui";
+
+const DatePickerExample = () => {
+const [value, setValue] = useState(undefined);
+const [validation, setValidation] = useState({ isValid: true, message: "" });
+
+    const handleChange = (newValue) => {
+        setValue(newValue);
+        if (!newValue) {
+            setValidation({ isValid: false, message: "Please select a date" });
+        } else {
+            setValidation({ isValid: true, message: "" });
+        }
+    };
+
+    return (
+        <DatePicker
+            type="date"
+            label="Event Date"
+            required={true}
+            description="Select the date for your event"
+            note="Choose a date that works for all participants"
+            placeholder="Pick a date"
+            value={value}
+            onChange={handleChange}
+            validation={validation}
+        />
+    );
+
+};
+
+export default DatePickerExample;
+
+` } }
+additionalActions={[
+{
+title: 'Open in GitHub',
+onClick: () => {
+window.open(
+'https://github.com/webiny/webiny-js/blob/next/packages/admin-ui/src/DatePicker/DatePicker.tsx',
+'_blank'
+);
+},
+}
+]}
+/>
+
+<Controls of={DatePickerStories.Documentation} />
+
+## Examples
+
+### Date
+
+The default date picker for selecting a single date.
+
+<Canvas of={DatePickerStories.WithLabel} />
+
+### With Presets
+
+Date picker with preset buttons (Today, Tomorrow, In a week, etc.) displayed alongside the calendar.
+
+<Canvas of={DatePickerStories.WithPresets} />
+
+### Time
+
+A time-only picker using a native time input.
+
+<Canvas of={DatePickerStories.TypeTime} />
+
+### Date & Time (local)
+
+Combines a calendar with a time input, storing the value as a local Date object.
+
+<Canvas of={DatePickerStories.TypeDateTimeLocal} />
+
+### Date & Time (with timezone)
+
+Combines a calendar with a time input, storing the value as an ISO string with timezone offset.
+
+<Canvas of={DatePickerStories.TypeDateTimeTz} />
+
+### Month
+
+Select a month and year. Value is stored as `"YYYY-MM"`.
+
+<Canvas of={DatePickerStories.TypeMonth} />
+
+### Week
+
+Select an ISO week. Value is stored as `"YYYY-Www"` (e.g. `"2026-W18"`). The selected week is highlighted as a range on the calendar.
+
+<Canvas of={DatePickerStories.TypeWeek} />
+
+### Year
+
+Select a year from a scrollable grid. Use the `yearRange` prop to control the available range.
+
+<Canvas of={DatePickerStories.TypeYear} />
+
+### Date Range
+
+Select a start and end date using a two-month calendar.
+
+<Canvas of={DatePickerStories.TypeDateRange} />
+
+### Multiple Dates
+
+Select multiple individual dates. Selected dates appear as dismissable tags.
+
+<Canvas of={DatePickerStories.TypeMultipleDates} />
+
+### Multiple Months
+
+Select multiple months. Selected months appear as dismissable tags.
+
+<Canvas of={DatePickerStories.TypeMultipleMonths} />
+
+### Multiple Years
+
+Select multiple years. Selected years appear as dismissable tags.
+
+<Canvas of={DatePickerStories.TypeMultipleYears} />
+
+## Form States
+
+### With Validation Error
+
+<Canvas of={DatePickerStories.WithErrors} />
+
+### Disabled
+
+<Canvas of={DatePickerStories.Disabled} />
+
+### Full Example
+
+Shows all form component features together: label, required indicator, description, validation error, and note.
+
+<Canvas of={DatePickerStories.FullExample} />

package/DatePicker/DatePicker.stories.d.ts

@@ -0,0 +1,25 @@
+import type { Meta, StoryObj } from "@storybook/react-webpack5";
+import { DatePicker } from "./DatePicker.js";
+declare const meta: Meta<typeof DatePicker>;
+export default meta;
+type Story = StoryObj<typeof DatePicker>;
+export declare const Default: Story;
+export declare const WithLabel: Story;
+export declare const WithLabelRequired: Story;
+export declare const WithDescription: Story;
+export declare const WithNotes: Story;
+export declare const WithErrors: Story;
+export declare const Disabled: Story;
+export declare const FullExample: Story;
+export declare const WithPresets: Story;
+export declare const TypeTime: Story;
+export declare const TypeDateTimeLocal: Story;
+export declare const TypeDateTimeTz: Story;
+export declare const TypeMonth: Story;
+export declare const TypeWeek: Story;
+export declare const TypeYear: Story;
+export declare const TypeDateRange: Story;
+export declare const TypeMultipleDates: Story;
+export declare const TypeMultipleMonths: Story;
+export declare const TypeMultipleYears: Story;
+export declare const Documentation: Story;