npm - @zidsa/zidmui - Versions diffs - 2.0.3 → 2.1.0 - Mend

@zidsa/zidmui 2.0.3 → 2.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (297) hide show

package/dist/react/cjs/stories/css/ListItem.stories.js ADDED Viewed

@@ -0,0 +1,166 @@
+"use strict";
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
+const jsxRuntime = require("react/jsx-runtime");
+;/* empty css                   */
+const icons = {
+  inbox: /* @__PURE__ */ jsxRuntime.jsx("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "currentColor", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M20 4H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 14H4V8l8 5 8-5v10zm-8-7L4 6h16l-8 5z" }) }),
+  bookmark: /* @__PURE__ */ jsxRuntime.jsx("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "currentColor", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M17 3H7c-1.1 0-2 .9-2 2v16l7-3 7 3V5c0-1.1-.9-2-2-2z" }) }),
+  settings: /* @__PURE__ */ jsxRuntime.jsx("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "currentColor", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M19.43 12.98c.04-.32.07-.64.07-.98s-.03-.66-.07-.98l2.11-1.65c.19-.15.24-.42.12-.64l-2-3.46c-.12-.22-.39-.3-.61-.22l-2.49 1c-.52-.4-1.08-.73-1.69-.98l-.38-2.65C14.46 2.18 14.25 2 14 2h-4c-.25 0-.46.18-.49.42l-.38 2.65c-.61.25-1.17.59-1.69.98l-2.49-1c-.23-.09-.49 0-.61.22l-2 3.46c-.13.22-.07.49.12.64l2.11 1.65c-.04.32-.07.65-.07.98s.03.66.07.98l-2.11 1.65c-.19.15-.24.42-.12.64l2 3.46c.12.22.39.3.61.22l2.49-1c.52.4 1.08.73 1.69.98l.38 2.65c.03.24.24.42.49.42h4c.25 0 .46-.18.49-.42l.38-2.65c.61-.25 1.17-.59 1.69-.98l2.49 1c.23.09.49 0 .61-.22l2-3.46c.12-.22.07-.49-.12-.64l-2.11-1.65zM12 15.5c-1.93 0-3.5-1.57-3.5-3.5s1.57-3.5 3.5-3.5 3.5 1.57 3.5 3.5-1.57 3.5-3.5 3.5z" }) }),
+  user: /* @__PURE__ */ jsxRuntime.jsx("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "currentColor", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 3c1.66 0 3 1.34 3 3s-1.34 3-3 3-3-1.34-3-3 1.34-3 3-3zm0 14.2c-2.5 0-4.71-1.28-6-3.22.03-1.99 4-3.08 6-3.08 1.99 0 5.97 1.09 6 3.08-1.29 1.94-3.5 3.22-6 3.22z" }) }),
+  folder: /* @__PURE__ */ jsxRuntime.jsx("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "currentColor", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M10 4H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V8c0-1.1-.9-2-2-2h-8l-2-2z" }) })
+};
+const meta = {
+  title: "CSS Styles/Components/ListItem",
+  parameters: {
+    layout: "centered"
+  },
+  tags: ["autodocs"]
+};
+const BasicList = {
+  render: () => /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", flexDirection: "column", gap: "32px", width: "400px" }, children: [
+    /* @__PURE__ */ jsxRuntime.jsx("h3", { style: { marginBottom: "16px", fontFamily: "var(--zid-font-family)" }, children: "Basic List" }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "zid-list", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "zid-list-item", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "zid-list-item__icon", children: icons.inbox }),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "zid-list-item__text", children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "zid-list-item__primary", children: "Inbox" }) })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "zid-list-item", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "zid-list-item__icon", children: icons.bookmark }),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "zid-list-item__text", children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "zid-list-item__primary", children: "Saved" }) })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "zid-list-item", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "zid-list-item__icon", children: icons.settings }),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "zid-list-item__text", children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "zid-list-item__primary", children: "Settings" }) })
+      ] })
+    ] })
+  ] })
+};
+const WithSecondaryText = {
+  render: () => /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", flexDirection: "column", gap: "32px", width: "400px" }, children: [
+    /* @__PURE__ */ jsxRuntime.jsx("h3", { style: { marginBottom: "16px", fontFamily: "var(--zid-font-family)" }, children: "With Secondary Text" }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "zid-list", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "zid-list-item", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "zid-list-item__icon", children: icons.user }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "zid-list-item__text", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "zid-list-item__primary", children: "John Doe" }),
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "zid-list-item__secondary", children: "john.doe@example.com" })
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "zid-list-item", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "zid-list-item__icon", children: icons.user }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "zid-list-item__text", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "zid-list-item__primary", children: "Jane Smith" }),
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "zid-list-item__secondary", children: "jane.smith@example.com" })
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "zid-list-item", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "zid-list-item__icon", children: icons.user }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "zid-list-item__text", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "zid-list-item__primary", children: "Bob Johnson" }),
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "zid-list-item__secondary", children: "bob.johnson@example.com" })
+        ] })
+      ] })
+    ] })
+  ] })
+};
+const ClickableList = {
+  render: () => /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", flexDirection: "column", gap: "32px", width: "400px" }, children: [
+    /* @__PURE__ */ jsxRuntime.jsx("h3", { style: { marginBottom: "16px", fontFamily: "var(--zid-font-family)" }, children: "Clickable List" }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "zid-list", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "zid-list-item zid-list-item--clickable", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "zid-list-item__icon", children: icons.folder }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "zid-list-item__text", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "zid-list-item__primary", children: "Documents" }),
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "zid-list-item__secondary", children: "12 files" })
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "zid-list-item zid-list-item--clickable zid-list-item--selected", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "zid-list-item__icon", children: icons.folder }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "zid-list-item__text", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "zid-list-item__primary", children: "Images" }),
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "zid-list-item__secondary", children: "48 files (selected)" })
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "zid-list-item zid-list-item--clickable", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "zid-list-item__icon", children: icons.folder }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "zid-list-item__text", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "zid-list-item__primary", children: "Videos" }),
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "zid-list-item__secondary", children: "5 files" })
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "zid-list-item zid-list-item--clickable zid-list-item--disabled", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "zid-list-item__icon", children: icons.folder }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "zid-list-item__text", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "zid-list-item__primary", children: "Archived" }),
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "zid-list-item__secondary", children: "Disabled" })
+        ] })
+      ] })
+    ] })
+  ] })
+};
+const WithStatus = {
+  render: () => /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", flexDirection: "column", gap: "32px", width: "400px" }, children: [
+    /* @__PURE__ */ jsxRuntime.jsx("h3", { style: { marginBottom: "16px", fontFamily: "var(--zid-font-family)" }, children: "With Status Badges" }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "zid-list", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "zid-list-item zid-list-item--clickable", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "zid-list-item__icon", children: icons.user }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "zid-list-item__text", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "zid-list-item__primary", children: "Order #1234" }),
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "zid-list-item__secondary", children: "John Doe - $99.99" })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "zid-status zid-status--success zid-status--sm", style: { marginLeft: "auto" }, children: "Completed" })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "zid-list-item zid-list-item--clickable", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "zid-list-item__icon", children: icons.user }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "zid-list-item__text", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "zid-list-item__primary", children: "Order #1235" }),
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "zid-list-item__secondary", children: "Jane Smith - $149.99" })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "zid-status zid-status--warning zid-status--sm", style: { marginLeft: "auto" }, children: "Pending" })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "zid-list-item zid-list-item--clickable", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "zid-list-item__icon", children: icons.user }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "zid-list-item__text", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "zid-list-item__primary", children: "Order #1236" }),
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "zid-list-item__secondary", children: "Bob Johnson - $49.99" })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "zid-status zid-status--error zid-status--sm", style: { marginLeft: "auto" }, children: "Cancelled" })
+      ] })
+    ] })
+  ] })
+};
+const NavigationMenu = {
+  render: () => /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", flexDirection: "column", gap: "16px", width: "280px" }, children: [
+    /* @__PURE__ */ jsxRuntime.jsx("h3", { style: { marginBottom: "8px", fontFamily: "var(--zid-font-family)" }, children: "Navigation Menu" }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "zid-list", style: { background: "var(--zid-bg-paper)", borderRadius: "8px", padding: "8px" }, children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "zid-list-item zid-list-item--clickable zid-list-item--selected", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "zid-list-item__icon", children: icons.inbox }),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "zid-list-item__text", children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "zid-list-item__primary", children: "Dashboard" }) })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "zid-list-item zid-list-item--clickable", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "zid-list-item__icon", children: icons.folder }),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "zid-list-item__text", children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "zid-list-item__primary", children: "Products" }) })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "zid-list-item zid-list-item--clickable", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "zid-list-item__icon", children: icons.user }),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "zid-list-item__text", children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "zid-list-item__primary", children: "Customers" }) })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "zid-list-item zid-list-item--clickable", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "zid-list-item__icon", children: icons.bookmark }),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "zid-list-item__text", children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "zid-list-item__primary", children: "Orders" }) })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsx("div", { style: { height: "1px", background: "var(--zid-divider)", margin: "8px 0" } }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "zid-list-item zid-list-item--clickable", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "zid-list-item__icon", children: icons.settings }),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "zid-list-item__text", children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "zid-list-item__primary", children: "Settings" }) })
+      ] })
+    ] })
+  ] })
+};
+exports.BasicList = BasicList;
+exports.ClickableList = ClickableList;
+exports.NavigationMenu = NavigationMenu;
+exports.WithSecondaryText = WithSecondaryText;
+exports.WithStatus = WithStatus;
+exports.default = meta;
+//# sourceMappingURL=ListItem.stories.js.map

package/dist/react/cjs/stories/css/ListItem.stories.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"ListItem.stories.js","sources":["../../../../../src/stories/css/ListItem.stories.tsx"],"sourcesContent":["import type { StoryObj } from '@storybook/react-vite';\nimport '../../css/index.css';\n\nconst icons = {\n inbox: (\n <svg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\n <path d=\"M20 4H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 14H4V8l8 5 8-5v10zm-8-7L4 6h16l-8 5z\"/>\n </svg>\n ),\n bookmark: (\n <svg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\n <path d=\"M17 3H7c-1.1 0-2 .9-2 2v16l7-3 7 3V5c0-1.1-.9-2-2-2z\"/>\n </svg>\n ),\n settings: (\n <svg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\n <path d=\"M19.43 12.98c.04-.32.07-.64.07-.98s-.03-.66-.07-.98l2.11-1.65c.19-.15.24-.42.12-.64l-2-3.46c-.12-.22-.39-.3-.61-.22l-2.49 1c-.52-.4-1.08-.73-1.69-.98l-.38-2.65C14.46 2.18 14.25 2 14 2h-4c-.25 0-.46.18-.49.42l-.38 2.65c-.61.25-1.17.59-1.69.98l-2.49-1c-.23-.09-.49 0-.61.22l-2 3.46c-.13.22-.07.49.12.64l2.11 1.65c-.04.32-.07.65-.07.98s.03.66.07.98l-2.11 1.65c-.19.15-.24.42-.12.64l2 3.46c.12.22.39.3.61.22l2.49-1c.52.4 1.08.73 1.69.98l.38 2.65c.03.24.24.42.49.42h4c.25 0 .46-.18.49-.42l.38-2.65c.61-.25 1.17-.59 1.69-.98l2.49 1c.23.09.49 0 .61-.22l2-3.46c.12-.22.07-.49-.12-.64l-2.11-1.65zM12 15.5c-1.93 0-3.5-1.57-3.5-3.5s1.57-3.5 3.5-3.5 3.5 1.57 3.5 3.5-1.57 3.5-3.5 3.5z\"/>\n </svg>\n ),\n user: (\n <svg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\n <path d=\"M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 3c1.66 0 3 1.34 3 3s-1.34 3-3 3-3-1.34-3-3 1.34-3 3-3zm0 14.2c-2.5 0-4.71-1.28-6-3.22.03-1.99 4-3.08 6-3.08 1.99 0 5.97 1.09 6 3.08-1.29 1.94-3.5 3.22-6 3.22z\"/>\n </svg>\n ),\n folder: (\n <svg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\n <path d=\"M10 4H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V8c0-1.1-.9-2-2-2h-8l-2-2z\"/>\n </svg>\n ),\n star: (\n <svg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\n <path d=\"M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z\"/>\n </svg>\n ),\n};\n\nconst meta = {\n title: 'CSS Styles/Components/ListItem',\n parameters: {\n layout: 'centered',\n },\n tags: ['autodocs'],\n};\n\nexport default meta;\ntype Story = StoryObj<typeof meta>;\n\nexport const BasicList: Story = {\n render: () => (\n <div style={{ display: 'flex', flexDirection: 'column', gap: '32px', width: '400px' }}>\n <h3 style={{ marginBottom: '16px', fontFamily: 'var(--zid-font-family)' }}>Basic List</h3>\n <div className=\"zid-list\">\n <div className=\"zid-list-item\">\n <div className=\"zid-list-item__icon\">{icons.inbox}</div>\n <div className=\"zid-list-item__text\"><span className=\"zid-list-item__primary\">Inbox</span></div>\n </div>\n <div className=\"zid-list-item\">\n <div className=\"zid-list-item__icon\">{icons.bookmark}</div>\n <div className=\"zid-list-item__text\"><span className=\"zid-list-item__primary\">Saved</span></div>\n </div>\n <div className=\"zid-list-item\">\n <div className=\"zid-list-item__icon\">{icons.settings}</div>\n <div className=\"zid-list-item__text\"><span className=\"zid-list-item__primary\">Settings</span></div>\n </div>\n </div>\n </div>\n ),\n};\n\nexport const WithSecondaryText: Story = {\n render: () => (\n <div style={{ display: 'flex', flexDirection: 'column', gap: '32px', width: '400px' }}>\n <h3 style={{ marginBottom: '16px', fontFamily: 'var(--zid-font-family)' }}>With Secondary Text</h3>\n <div className=\"zid-list\">\n <div className=\"zid-list-item\">\n <div className=\"zid-list-item__icon\">{icons.user}</div>\n <div className=\"zid-list-item__text\">\n <span className=\"zid-list-item__primary\">John Doe</span>\n <span className=\"zid-list-item__secondary\">john.doe@example.com</span>\n </div>\n </div>\n <div className=\"zid-list-item\">\n <div className=\"zid-list-item__icon\">{icons.user}</div>\n <div className=\"zid-list-item__text\">\n <span className=\"zid-list-item__primary\">Jane Smith</span>\n <span className=\"zid-list-item__secondary\">jane.smith@example.com</span>\n </div>\n </div>\n <div className=\"zid-list-item\">\n <div className=\"zid-list-item__icon\">{icons.user}</div>\n <div className=\"zid-list-item__text\">\n <span className=\"zid-list-item__primary\">Bob Johnson</span>\n <span className=\"zid-list-item__secondary\">bob.johnson@example.com</span>\n </div>\n </div>\n </div>\n </div>\n ),\n};\n\n\nexport const ClickableList: Story = {\n render: () => (\n <div style={{ display: 'flex', flexDirection: 'column', gap: '32px', width: '400px' }}>\n <h3 style={{ marginBottom: '16px', fontFamily: 'var(--zid-font-family)' }}>Clickable List</h3>\n <div className=\"zid-list\">\n <div className=\"zid-list-item zid-list-item--clickable\">\n <div className=\"zid-list-item__icon\">{icons.folder}</div>\n <div className=\"zid-list-item__text\">\n <span className=\"zid-list-item__primary\">Documents</span>\n <span className=\"zid-list-item__secondary\">12 files</span>\n </div>\n </div>\n <div className=\"zid-list-item zid-list-item--clickable zid-list-item--selected\">\n <div className=\"zid-list-item__icon\">{icons.folder}</div>\n <div className=\"zid-list-item__text\">\n <span className=\"zid-list-item__primary\">Images</span>\n <span className=\"zid-list-item__secondary\">48 files (selected)</span>\n </div>\n </div>\n <div className=\"zid-list-item zid-list-item--clickable\">\n <div className=\"zid-list-item__icon\">{icons.folder}</div>\n <div className=\"zid-list-item__text\">\n <span className=\"zid-list-item__primary\">Videos</span>\n <span className=\"zid-list-item__secondary\">5 files</span>\n </div>\n </div>\n <div className=\"zid-list-item zid-list-item--clickable zid-list-item--disabled\">\n <div className=\"zid-list-item__icon\">{icons.folder}</div>\n <div className=\"zid-list-item__text\">\n <span className=\"zid-list-item__primary\">Archived</span>\n <span className=\"zid-list-item__secondary\">Disabled</span>\n </div>\n </div>\n </div>\n </div>\n ),\n};\n\nexport const WithStatus: Story = {\n render: () => (\n <div style={{ display: 'flex', flexDirection: 'column', gap: '32px', width: '400px' }}>\n <h3 style={{ marginBottom: '16px', fontFamily: 'var(--zid-font-family)' }}>With Status Badges</h3>\n <div className=\"zid-list\">\n <div className=\"zid-list-item zid-list-item--clickable\">\n <div className=\"zid-list-item__icon\">{icons.user}</div>\n <div className=\"zid-list-item__text\">\n <span className=\"zid-list-item__primary\">Order #1234</span>\n <span className=\"zid-list-item__secondary\">John Doe - $99.99</span>\n </div>\n <span className=\"zid-status zid-status--success zid-status--sm\" style={{ marginLeft: 'auto' }}>Completed</span>\n </div>\n <div className=\"zid-list-item zid-list-item--clickable\">\n <div className=\"zid-list-item__icon\">{icons.user}</div>\n <div className=\"zid-list-item__text\">\n <span className=\"zid-list-item__primary\">Order #1235</span>\n <span className=\"zid-list-item__secondary\">Jane Smith - $149.99</span>\n </div>\n <span className=\"zid-status zid-status--warning zid-status--sm\" style={{ marginLeft: 'auto' }}>Pending</span>\n </div>\n <div className=\"zid-list-item zid-list-item--clickable\">\n <div className=\"zid-list-item__icon\">{icons.user}</div>\n <div className=\"zid-list-item__text\">\n <span className=\"zid-list-item__primary\">Order #1236</span>\n <span className=\"zid-list-item__secondary\">Bob Johnson - $49.99</span>\n </div>\n <span className=\"zid-status zid-status--error zid-status--sm\" style={{ marginLeft: 'auto' }}>Cancelled</span>\n </div>\n </div>\n </div>\n ),\n};\n\nexport const NavigationMenu: Story = {\n render: () => (\n <div style={{ display: 'flex', flexDirection: 'column', gap: '16px', width: '280px' }}>\n <h3 style={{ marginBottom: '8px', fontFamily: 'var(--zid-font-family)' }}>Navigation Menu</h3>\n <div className=\"zid-list\" style={{ background: 'var(--zid-bg-paper)', borderRadius: '8px', padding: '8px' }}>\n <div className=\"zid-list-item zid-list-item--clickable zid-list-item--selected\">\n <div className=\"zid-list-item__icon\">{icons.inbox}</div>\n <div className=\"zid-list-item__text\"><span className=\"zid-list-item__primary\">Dashboard</span></div>\n </div>\n <div className=\"zid-list-item zid-list-item--clickable\">\n <div className=\"zid-list-item__icon\">{icons.folder}</div>\n <div className=\"zid-list-item__text\"><span className=\"zid-list-item__primary\">Products</span></div>\n </div>\n <div className=\"zid-list-item zid-list-item--clickable\">\n <div className=\"zid-list-item__icon\">{icons.user}</div>\n <div className=\"zid-list-item__text\"><span className=\"zid-list-item__primary\">Customers</span></div>\n </div>\n <div className=\"zid-list-item zid-list-item--clickable\">\n <div className=\"zid-list-item__icon\">{icons.bookmark}</div>\n <div className=\"zid-list-item__text\"><span className=\"zid-list-item__primary\">Orders</span></div>\n </div>\n <div style={{ height: '1px', background: 'var(--zid-divider)', margin: '8px 0' }}></div>\n <div className=\"zid-list-item zid-list-item--clickable\">\n <div className=\"zid-list-item__icon\">{icons.settings}</div>\n <div className=\"zid-list-item__text\"><span className=\"zid-list-item__primary\">Settings</span></div>\n </div>\n </div>\n </div>\n ),\n};\n"],"names":["jsx","jsxs"],"mappings":";;;;AAGA,MAAM,QAAQ;AAAA,EACZ,OACEA,2BAAAA,IAAC,OAAA,EAAI,OAAM,MAAK,QAAO,MAAK,SAAQ,aAAY,MAAK,gBACnD,UAAAA,+BAAC,QAAA,EAAK,GAAE,uHAAqH,GAC/H;AAAA,EAEF,UACEA,2BAAAA,IAAC,OAAA,EAAI,OAAM,MAAK,QAAO,MAAK,SAAQ,aAAY,MAAK,gBACnD,UAAAA,+BAAC,QAAA,EAAK,GAAE,wDAAsD,GAChE;AAAA,EAEF,UACEA,2BAAAA,IAAC,OAAA,EAAI,OAAM,MAAK,QAAO,MAAK,SAAQ,aAAY,MAAK,gBACnD,UAAAA,+BAAC,QAAA,EAAK,GAAE,oqBAAkqB,GAC5qB;AAAA,EAEF,MACEA,2BAAAA,IAAC,OAAA,EAAI,OAAM,MAAK,QAAO,MAAK,SAAQ,aAAY,MAAK,gBACnD,UAAAA,+BAAC,QAAA,EAAK,GAAE,uOAAqO,GAC/O;AAAA,EAEF,QACEA,2BAAAA,IAAC,OAAA,EAAI,OAAM,MAAK,QAAO,MAAK,SAAQ,aAAY,MAAK,gBACnD,UAAAA,+BAAC,QAAA,EAAK,GAAE,+FAA6F,EAAA,CACvG;AAOJ;AAEA,MAAM,OAAO;AAAA,EACX,OAAO;AAAA,EACP,YAAY;AAAA,IACV,QAAQ;AAAA,EAAA;AAAA,EAEV,MAAM,CAAC,UAAU;AACnB;AAKO,MAAM,YAAmB;AAAA,EAC9B,QAAQ,MACNC,2BAAAA,KAAC,OAAA,EAAI,OAAO,EAAE,SAAS,QAAQ,eAAe,UAAU,KAAK,QAAQ,OAAO,WAC1E,UAAA;AAAA,IAAAD,2BAAAA,IAAC,MAAA,EAAG,OAAO,EAAE,cAAc,QAAQ,YAAY,yBAAA,GAA4B,UAAA,aAAA,CAAU;AAAA,IACrFC,2BAAAA,KAAC,OAAA,EAAI,WAAU,YACb,UAAA;AAAA,MAAAA,2BAAAA,KAAC,OAAA,EAAI,WAAU,iBACb,UAAA;AAAA,QAAAD,2BAAAA,IAAC,OAAA,EAAI,WAAU,uBAAuB,UAAA,MAAM,OAAM;AAAA,QAClDA,2BAAAA,IAAC,SAAI,WAAU,uBAAsB,yCAAC,QAAA,EAAK,WAAU,0BAAyB,UAAA,QAAA,CAAK,EAAA,CAAO;AAAA,MAAA,GAC5F;AAAA,MACAC,2BAAAA,KAAC,OAAA,EAAI,WAAU,iBACb,UAAA;AAAA,QAAAD,2BAAAA,IAAC,OAAA,EAAI,WAAU,uBAAuB,UAAA,MAAM,UAAS;AAAA,QACrDA,2BAAAA,IAAC,SAAI,WAAU,uBAAsB,yCAAC,QAAA,EAAK,WAAU,0BAAyB,UAAA,QAAA,CAAK,EAAA,CAAO;AAAA,MAAA,GAC5F;AAAA,MACAC,2BAAAA,KAAC,OAAA,EAAI,WAAU,iBACb,UAAA;AAAA,QAAAD,2BAAAA,IAAC,OAAA,EAAI,WAAU,uBAAuB,UAAA,MAAM,UAAS;AAAA,QACrDA,2BAAAA,IAAC,SAAI,WAAU,uBAAsB,yCAAC,QAAA,EAAK,WAAU,0BAAyB,UAAA,WAAA,CAAQ,EAAA,CAAO;AAAA,MAAA,EAAA,CAC/F;AAAA,IAAA,EAAA,CACF;AAAA,EAAA,EAAA,CACF;AAEJ;AAEO,MAAM,oBAA2B;AAAA,EACtC,QAAQ,MACNC,2BAAAA,KAAC,OAAA,EAAI,OAAO,EAAE,SAAS,QAAQ,eAAe,UAAU,KAAK,QAAQ,OAAO,WAC1E,UAAA;AAAA,IAAAD,2BAAAA,IAAC,MAAA,EAAG,OAAO,EAAE,cAAc,QAAQ,YAAY,yBAAA,GAA4B,UAAA,sBAAA,CAAmB;AAAA,IAC9FC,2BAAAA,KAAC,OAAA,EAAI,WAAU,YACb,UAAA;AAAA,MAAAA,2BAAAA,KAAC,OAAA,EAAI,WAAU,iBACb,UAAA;AAAA,QAAAD,2BAAAA,IAAC,OAAA,EAAI,WAAU,uBAAuB,UAAA,MAAM,MAAK;AAAA,QACjDC,2BAAAA,KAAC,OAAA,EAAI,WAAU,uBACb,UAAA;AAAA,UAAAD,2BAAAA,IAAC,QAAA,EAAK,WAAU,0BAAyB,UAAA,YAAQ;AAAA,UACjDA,2BAAAA,IAAC,QAAA,EAAK,WAAU,4BAA2B,UAAA,uBAAA,CAAoB;AAAA,QAAA,EAAA,CACjE;AAAA,MAAA,GACF;AAAA,MACAC,2BAAAA,KAAC,OAAA,EAAI,WAAU,iBACb,UAAA;AAAA,QAAAD,2BAAAA,IAAC,OAAA,EAAI,WAAU,uBAAuB,UAAA,MAAM,MAAK;AAAA,QACjDC,2BAAAA,KAAC,OAAA,EAAI,WAAU,uBACb,UAAA;AAAA,UAAAD,2BAAAA,IAAC,QAAA,EAAK,WAAU,0BAAyB,UAAA,cAAU;AAAA,UACnDA,2BAAAA,IAAC,QAAA,EAAK,WAAU,4BAA2B,UAAA,yBAAA,CAAsB;AAAA,QAAA,EAAA,CACnE;AAAA,MAAA,GACF;AAAA,MACAC,2BAAAA,KAAC,OAAA,EAAI,WAAU,iBACb,UAAA;AAAA,QAAAD,2BAAAA,IAAC,OAAA,EAAI,WAAU,uBAAuB,UAAA,MAAM,MAAK;AAAA,QACjDC,2BAAAA,KAAC,OAAA,EAAI,WAAU,uBACb,UAAA;AAAA,UAAAD,2BAAAA,IAAC,QAAA,EAAK,WAAU,0BAAyB,UAAA,eAAW;AAAA,UACpDA,2BAAAA,IAAC,QAAA,EAAK,WAAU,4BAA2B,UAAA,0BAAA,CAAuB;AAAA,QAAA,EAAA,CACpE;AAAA,MAAA,EAAA,CACF;AAAA,IAAA,EAAA,CACF;AAAA,EAAA,EAAA,CACF;AAEJ;AAGO,MAAM,gBAAuB;AAAA,EAClC,QAAQ,MACNC,2BAAAA,KAAC,OAAA,EAAI,OAAO,EAAE,SAAS,QAAQ,eAAe,UAAU,KAAK,QAAQ,OAAO,WAC1E,UAAA;AAAA,IAAAD,2BAAAA,IAAC,MAAA,EAAG,OAAO,EAAE,cAAc,QAAQ,YAAY,yBAAA,GAA4B,UAAA,iBAAA,CAAc;AAAA,IACzFC,2BAAAA,KAAC,OAAA,EAAI,WAAU,YACb,UAAA;AAAA,MAAAA,2BAAAA,KAAC,OAAA,EAAI,WAAU,0CACb,UAAA;AAAA,QAAAD,2BAAAA,IAAC,OAAA,EAAI,WAAU,uBAAuB,UAAA,MAAM,QAAO;AAAA,QACnDC,2BAAAA,KAAC,OAAA,EAAI,WAAU,uBACb,UAAA;AAAA,UAAAD,2BAAAA,IAAC,QAAA,EAAK,WAAU,0BAAyB,UAAA,aAAS;AAAA,UAClDA,2BAAAA,IAAC,QAAA,EAAK,WAAU,4BAA2B,UAAA,WAAA,CAAQ;AAAA,QAAA,EAAA,CACrD;AAAA,MAAA,GACF;AAAA,MACAC,2BAAAA,KAAC,OAAA,EAAI,WAAU,kEACb,UAAA;AAAA,QAAAD,2BAAAA,IAAC,OAAA,EAAI,WAAU,uBAAuB,UAAA,MAAM,QAAO;AAAA,QACnDC,2BAAAA,KAAC,OAAA,EAAI,WAAU,uBACb,UAAA;AAAA,UAAAD,2BAAAA,IAAC,QAAA,EAAK,WAAU,0BAAyB,UAAA,UAAM;AAAA,UAC/CA,2BAAAA,IAAC,QAAA,EAAK,WAAU,4BAA2B,UAAA,sBAAA,CAAmB;AAAA,QAAA,EAAA,CAChE;AAAA,MAAA,GACF;AAAA,MACAC,2BAAAA,KAAC,OAAA,EAAI,WAAU,0CACb,UAAA;AAAA,QAAAD,2BAAAA,IAAC,OAAA,EAAI,WAAU,uBAAuB,UAAA,MAAM,QAAO;AAAA,QACnDC,2BAAAA,KAAC,OAAA,EAAI,WAAU,uBACb,UAAA;AAAA,UAAAD,2BAAAA,IAAC,QAAA,EAAK,WAAU,0BAAyB,UAAA,UAAM;AAAA,UAC/CA,2BAAAA,IAAC,QAAA,EAAK,WAAU,4BAA2B,UAAA,UAAA,CAAO;AAAA,QAAA,EAAA,CACpD;AAAA,MAAA,GACF;AAAA,MACAC,2BAAAA,KAAC,OAAA,EAAI,WAAU,kEACb,UAAA;AAAA,QAAAD,2BAAAA,IAAC,OAAA,EAAI,WAAU,uBAAuB,UAAA,MAAM,QAAO;AAAA,QACnDC,2BAAAA,KAAC,OAAA,EAAI,WAAU,uBACb,UAAA;AAAA,UAAAD,2BAAAA,IAAC,QAAA,EAAK,WAAU,0BAAyB,UAAA,YAAQ;AAAA,UACjDA,2BAAAA,IAAC,QAAA,EAAK,WAAU,4BAA2B,UAAA,WAAA,CAAQ;AAAA,QAAA,EAAA,CACrD;AAAA,MAAA,EAAA,CACF;AAAA,IAAA,EAAA,CACF;AAAA,EAAA,EAAA,CACF;AAEJ;AAEO,MAAM,aAAoB;AAAA,EAC/B,QAAQ,MACNC,2BAAAA,KAAC,OAAA,EAAI,OAAO,EAAE,SAAS,QAAQ,eAAe,UAAU,KAAK,QAAQ,OAAO,WAC1E,UAAA;AAAA,IAAAD,2BAAAA,IAAC,MAAA,EAAG,OAAO,EAAE,cAAc,QAAQ,YAAY,yBAAA,GAA4B,UAAA,qBAAA,CAAkB;AAAA,IAC7FC,2BAAAA,KAAC,OAAA,EAAI,WAAU,YACb,UAAA;AAAA,MAAAA,2BAAAA,KAAC,OAAA,EAAI,WAAU,0CACb,UAAA;AAAA,QAAAD,2BAAAA,IAAC,OAAA,EAAI,WAAU,uBAAuB,UAAA,MAAM,MAAK;AAAA,QACjDC,2BAAAA,KAAC,OAAA,EAAI,WAAU,uBACb,UAAA;AAAA,UAAAD,2BAAAA,IAAC,QAAA,EAAK,WAAU,0BAAyB,UAAA,eAAW;AAAA,UACpDA,2BAAAA,IAAC,QAAA,EAAK,WAAU,4BAA2B,UAAA,oBAAA,CAAiB;AAAA,QAAA,GAC9D;AAAA,QACAA,2BAAAA,IAAC,UAAK,WAAU,iDAAgD,OAAO,EAAE,YAAY,OAAA,GAAU,UAAA,YAAA,CAAS;AAAA,MAAA,GAC1G;AAAA,MACAC,2BAAAA,KAAC,OAAA,EAAI,WAAU,0CACb,UAAA;AAAA,QAAAD,2BAAAA,IAAC,OAAA,EAAI,WAAU,uBAAuB,UAAA,MAAM,MAAK;AAAA,QACjDC,2BAAAA,KAAC,OAAA,EAAI,WAAU,uBACb,UAAA;AAAA,UAAAD,2BAAAA,IAAC,QAAA,EAAK,WAAU,0BAAyB,UAAA,eAAW;AAAA,UACpDA,2BAAAA,IAAC,QAAA,EAAK,WAAU,4BAA2B,UAAA,uBAAA,CAAoB;AAAA,QAAA,GACjE;AAAA,QACAA,2BAAAA,IAAC,UAAK,WAAU,iDAAgD,OAAO,EAAE,YAAY,OAAA,GAAU,UAAA,UAAA,CAAO;AAAA,MAAA,GACxG;AAAA,MACAC,2BAAAA,KAAC,OAAA,EAAI,WAAU,0CACb,UAAA;AAAA,QAAAD,2BAAAA,IAAC,OAAA,EAAI,WAAU,uBAAuB,UAAA,MAAM,MAAK;AAAA,QACjDC,2BAAAA,KAAC,OAAA,EAAI,WAAU,uBACb,UAAA;AAAA,UAAAD,2BAAAA,IAAC,QAAA,EAAK,WAAU,0BAAyB,UAAA,eAAW;AAAA,UACpDA,2BAAAA,IAAC,QAAA,EAAK,WAAU,4BAA2B,UAAA,uBAAA,CAAoB;AAAA,QAAA,GACjE;AAAA,QACAA,2BAAAA,IAAC,UAAK,WAAU,+CAA8C,OAAO,EAAE,YAAY,OAAA,GAAU,UAAA,YAAA,CAAS;AAAA,MAAA,EAAA,CACxG;AAAA,IAAA,EAAA,CACF;AAAA,EAAA,EAAA,CACF;AAEJ;AAEO,MAAM,iBAAwB;AAAA,EACnC,QAAQ,MACNC,2BAAAA,KAAC,OAAA,EAAI,OAAO,EAAE,SAAS,QAAQ,eAAe,UAAU,KAAK,QAAQ,OAAO,WAC1E,UAAA;AAAA,IAAAD,2BAAAA,IAAC,MAAA,EAAG,OAAO,EAAE,cAAc,OAAO,YAAY,yBAAA,GAA4B,UAAA,kBAAA,CAAe;AAAA,IACzFC,2BAAAA,KAAC,OAAA,EAAI,WAAU,YAAW,OAAO,EAAE,YAAY,uBAAuB,cAAc,OAAO,SAAS,MAAA,GAClG,UAAA;AAAA,MAAAA,2BAAAA,KAAC,OAAA,EAAI,WAAU,kEACb,UAAA;AAAA,QAAAD,2BAAAA,IAAC,OAAA,EAAI,WAAU,uBAAuB,UAAA,MAAM,OAAM;AAAA,QAClDA,2BAAAA,IAAC,SAAI,WAAU,uBAAsB,yCAAC,QAAA,EAAK,WAAU,0BAAyB,UAAA,YAAA,CAAS,EAAA,CAAO;AAAA,MAAA,GAChG;AAAA,MACAC,2BAAAA,KAAC,OAAA,EAAI,WAAU,0CACb,UAAA;AAAA,QAAAD,2BAAAA,IAAC,OAAA,EAAI,WAAU,uBAAuB,UAAA,MAAM,QAAO;AAAA,QACnDA,2BAAAA,IAAC,SAAI,WAAU,uBAAsB,yCAAC,QAAA,EAAK,WAAU,0BAAyB,UAAA,WAAA,CAAQ,EAAA,CAAO;AAAA,MAAA,GAC/F;AAAA,MACAC,2BAAAA,KAAC,OAAA,EAAI,WAAU,0CACb,UAAA;AAAA,QAAAD,2BAAAA,IAAC,OAAA,EAAI,WAAU,uBAAuB,UAAA,MAAM,MAAK;AAAA,QACjDA,2BAAAA,IAAC,SAAI,WAAU,uBAAsB,yCAAC,QAAA,EAAK,WAAU,0BAAyB,UAAA,YAAA,CAAS,EAAA,CAAO;AAAA,MAAA,GAChG;AAAA,MACAC,2BAAAA,KAAC,OAAA,EAAI,WAAU,0CACb,UAAA;AAAA,QAAAD,2BAAAA,IAAC,OAAA,EAAI,WAAU,uBAAuB,UAAA,MAAM,UAAS;AAAA,QACrDA,2BAAAA,IAAC,SAAI,WAAU,uBAAsB,yCAAC,QAAA,EAAK,WAAU,0BAAyB,UAAA,SAAA,CAAM,EAAA,CAAO;AAAA,MAAA,GAC7F;AAAA,MACAA,2BAAAA,IAAC,OAAA,EAAI,OAAO,EAAE,QAAQ,OAAO,YAAY,sBAAsB,QAAQ,QAAA,EAAQ,CAAG;AAAA,MAClFC,2BAAAA,KAAC,OAAA,EAAI,WAAU,0CACb,UAAA;AAAA,QAAAD,2BAAAA,IAAC,OAAA,EAAI,WAAU,uBAAuB,UAAA,MAAM,UAAS;AAAA,QACrDA,2BAAAA,IAAC,SAAI,WAAU,uBAAsB,yCAAC,QAAA,EAAK,WAAU,0BAAyB,UAAA,WAAA,CAAQ,EAAA,CAAO;AAAA,MAAA,EAAA,CAC/F;AAAA,IAAA,EAAA,CACF;AAAA,EAAA,EAAA,CACF;AAEJ;;;;;;;"}

package/dist/react/cjs/stories/css/Modal.stories.js ADDED Viewed

@@ -0,0 +1,121 @@
+"use strict";
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
+const jsxRuntime = require("react/jsx-runtime");
+;/* empty css                   */
+const closeLine = require("../../icons/system/close-line.js");
+const meta = {
+  title: "CSS Styles/Components/Modal",
+  parameters: {
+    layout: "centered"
+  },
+  tags: ["autodocs"]
+};
+const Sizes = {
+  render: () => /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", flexDirection: "column", gap: "32px" }, children: [
+    /* @__PURE__ */ jsxRuntime.jsx("h3", { style: { marginBottom: "16px", fontFamily: "var(--zid-font-family)" }, children: "Modal Sizes (Static Preview)" }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", flexDirection: "column", gap: "24px" }, children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+        /* @__PURE__ */ jsxRuntime.jsx("h4", { style: { marginBottom: "8px", fontFamily: "var(--zid-font-family)", fontSize: "14px" }, children: "Small (sm)" }),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { style: { position: "relative", background: "rgba(0,0,0,0.5)", padding: "24px", borderRadius: "8px" }, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "zid-modal__content zid-modal__content--sm", style: { position: "relative" }, children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "zid-modal__header", children: [
+            /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "zid-modal__title", children: "Small Modal" }),
+            /* @__PURE__ */ jsxRuntime.jsx("button", { className: "zid-modal__close", children: /* @__PURE__ */ jsxRuntime.jsx(closeLine.IconCloseLine, {}) })
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "zid-modal__body", children: "Small modal content goes here." }),
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "zid-modal__footer", children: [
+            /* @__PURE__ */ jsxRuntime.jsx("button", { className: "zid-button zid-button--text zid-button--secondary zid-button--md", children: "Cancel" }),
+            /* @__PURE__ */ jsxRuntime.jsx("button", { className: "zid-button zid-button--contained zid-button--primary zid-button--md", children: "Confirm" })
+          ] })
+        ] }) })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+        /* @__PURE__ */ jsxRuntime.jsx("h4", { style: { marginBottom: "8px", fontFamily: "var(--zid-font-family)", fontSize: "14px" }, children: "Medium (md)" }),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { style: { position: "relative", background: "rgba(0,0,0,0.5)", padding: "24px", borderRadius: "8px" }, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "zid-modal__content zid-modal__content--md", style: { position: "relative" }, children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "zid-modal__header", children: [
+            /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "zid-modal__title", children: "Medium Modal" }),
+            /* @__PURE__ */ jsxRuntime.jsx("button", { className: "zid-modal__close", children: /* @__PURE__ */ jsxRuntime.jsx(closeLine.IconCloseLine, {}) })
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "zid-modal__body", children: "Medium modal content goes here. This is the default size for most use cases." }),
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "zid-modal__footer", children: [
+            /* @__PURE__ */ jsxRuntime.jsx("button", { className: "zid-button zid-button--text zid-button--secondary zid-button--md", children: "Cancel" }),
+            /* @__PURE__ */ jsxRuntime.jsx("button", { className: "zid-button zid-button--contained zid-button--primary zid-button--md", children: "Confirm" })
+          ] })
+        ] }) })
+      ] })
+    ] })
+  ] })
+};
+const WithForm = {
+  render: () => /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", flexDirection: "column", gap: "16px" }, children: [
+    /* @__PURE__ */ jsxRuntime.jsx("h3", { style: { marginBottom: "8px", fontFamily: "var(--zid-font-family)" }, children: "Modal with Form" }),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { style: { position: "relative", background: "rgba(0,0,0,0.5)", padding: "24px", borderRadius: "8px" }, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "zid-modal__content zid-modal__content--md", style: { position: "relative" }, children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "zid-modal__header", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "zid-modal__title", children: "Create New Item" }),
+        /* @__PURE__ */ jsxRuntime.jsx("button", { className: "zid-modal__close", children: /* @__PURE__ */ jsxRuntime.jsx(closeLine.IconCloseLine, {}) })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "zid-modal__body", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", flexDirection: "column", gap: "16px" }, children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+          /* @__PURE__ */ jsxRuntime.jsx("label", { className: "zid-input-label zid-input-label--required", children: "Name" }),
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "zid-input zid-input--md", children: /* @__PURE__ */ jsxRuntime.jsx("input", { type: "text", className: "zid-input__field", placeholder: "Enter name" }) })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+          /* @__PURE__ */ jsxRuntime.jsx("label", { className: "zid-input-label", children: "Description" }),
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "zid-input zid-input--md", children: /* @__PURE__ */ jsxRuntime.jsx("input", { type: "text", className: "zid-input__field", placeholder: "Enter description" }) })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+          /* @__PURE__ */ jsxRuntime.jsx("label", { className: "zid-input-label zid-input-label--required", children: "Category" }),
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "zid-select zid-select--md", children: [
+            /* @__PURE__ */ jsxRuntime.jsxs("select", { className: "zid-select__native", defaultValue: "", children: [
+              /* @__PURE__ */ jsxRuntime.jsx("option", { value: "", disabled: true, children: "Select category" }),
+              /* @__PURE__ */ jsxRuntime.jsx("option", { value: "1", children: "Category 1" }),
+              /* @__PURE__ */ jsxRuntime.jsx("option", { value: "2", children: "Category 2" }),
+              /* @__PURE__ */ jsxRuntime.jsx("option", { value: "3", children: "Category 3" })
+            ] }),
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "zid-select__icon", children: "▼" })
+          ] })
+        ] })
+      ] }) }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "zid-modal__footer", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("button", { className: "zid-button zid-button--text zid-button--secondary zid-button--md", children: "Cancel" }),
+        /* @__PURE__ */ jsxRuntime.jsx("button", { className: "zid-button zid-button--contained zid-button--primary zid-button--md", children: "Create" })
+      ] })
+    ] }) })
+  ] })
+};
+const ConfirmationDialog = {
+  render: () => /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", flexDirection: "column", gap: "16px" }, children: [
+    /* @__PURE__ */ jsxRuntime.jsx("h3", { style: { marginBottom: "8px", fontFamily: "var(--zid-font-family)" }, children: "Confirmation Dialog" }),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { style: { position: "relative", background: "rgba(0,0,0,0.5)", padding: "24px", borderRadius: "8px" }, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "zid-modal__content zid-modal__content--sm", style: { position: "relative" }, children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "zid-modal__header", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "zid-modal__title", children: "Delete Item?" }),
+        /* @__PURE__ */ jsxRuntime.jsx("button", { className: "zid-modal__close", children: /* @__PURE__ */ jsxRuntime.jsx(closeLine.IconCloseLine, {}) })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "zid-modal__body", children: /* @__PURE__ */ jsxRuntime.jsx("p", { style: { fontFamily: "var(--zid-font-family)", color: "var(--zid-text-secondary)", margin: 0 }, children: "Are you sure you want to delete this item? This action cannot be undone." }) }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "zid-modal__footer", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("button", { className: "zid-button zid-button--outlined zid-button--secondary zid-button--md", children: "Cancel" }),
+        /* @__PURE__ */ jsxRuntime.jsx("button", { className: "zid-button zid-button--contained zid-button--error zid-button--md", children: "Delete" })
+      ] })
+    ] }) })
+  ] })
+};
+const WithoutFooter = {
+  render: () => /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", flexDirection: "column", gap: "16px" }, children: [
+    /* @__PURE__ */ jsxRuntime.jsx("h3", { style: { marginBottom: "8px", fontFamily: "var(--zid-font-family)" }, children: "Info Modal (No Footer)" }),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { style: { position: "relative", background: "rgba(0,0,0,0.5)", padding: "24px", borderRadius: "8px" }, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "zid-modal__content zid-modal__content--sm", style: { position: "relative" }, children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "zid-modal__header", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "zid-modal__title", children: "Information" }),
+        /* @__PURE__ */ jsxRuntime.jsx("button", { className: "zid-modal__close", children: /* @__PURE__ */ jsxRuntime.jsx(closeLine.IconCloseLine, {}) })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "zid-modal__body", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "zid-alert zid-alert--info", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "zid-alert__icon", children: /* @__PURE__ */ jsxRuntime.jsx("svg", { viewBox: "0 0 24 24", fill: "currentColor", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-6h2v6zm0-8h-2V7h2v2z" }) }) }),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "zid-alert__content", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "zid-alert__message", children: "This is an informational modal without action buttons." }) })
+      ] }) })
+    ] }) })
+  ] })
+};
+exports.ConfirmationDialog = ConfirmationDialog;
+exports.Sizes = Sizes;
+exports.WithForm = WithForm;
+exports.WithoutFooter = WithoutFooter;
+exports.default = meta;
+//# sourceMappingURL=Modal.stories.js.map

package/dist/react/cjs/stories/css/Modal.stories.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"Modal.stories.js","sources":["../../../../../src/stories/css/Modal.stories.tsx"],"sourcesContent":["import type { StoryObj } from '@storybook/react-vite';\nimport '../../css/index.css';\nimport { IconCloseLine } from '~/icons/system/close-line';\n\nconst meta = {\n title: 'CSS Styles/Components/Modal',\n parameters: {\n layout: 'centered',\n },\n tags: ['autodocs'],\n};\n\nexport default meta;\ntype Story = StoryObj<typeof meta>;\n\nexport const Sizes: Story = {\n render: () => (\n <div style={{ display: 'flex', flexDirection: 'column', gap: '32px' }}>\n <h3 style={{ marginBottom: '16px', fontFamily: 'var(--zid-font-family)' }}>Modal Sizes (Static Preview)</h3>\n <div style={{ display: 'flex', flexDirection: 'column', gap: '24px' }}>\n <div>\n <h4 style={{ marginBottom: '8px', fontFamily: 'var(--zid-font-family)', fontSize: '14px' }}>Small (sm)</h4>\n <div style={{ position: 'relative', background: 'rgba(0,0,0,0.5)', padding: '24px', borderRadius: '8px' }}>\n <div className=\"zid-modal__content zid-modal__content--sm\" style={{ position: 'relative' }}>\n <div className=\"zid-modal__header\">\n <h2 className=\"zid-modal__title\">Small Modal</h2>\n <button className=\"zid-modal__close\"><IconCloseLine /></button>\n </div>\n <div className=\"zid-modal__body\">Small modal content goes here.</div>\n <div className=\"zid-modal__footer\">\n <button className=\"zid-button zid-button--text zid-button--secondary zid-button--md\">Cancel</button>\n <button className=\"zid-button zid-button--contained zid-button--primary zid-button--md\">Confirm</button>\n </div>\n </div>\n </div>\n </div>\n <div>\n <h4 style={{ marginBottom: '8px', fontFamily: 'var(--zid-font-family)', fontSize: '14px' }}>Medium (md)</h4>\n <div style={{ position: 'relative', background: 'rgba(0,0,0,0.5)', padding: '24px', borderRadius: '8px' }}>\n <div className=\"zid-modal__content zid-modal__content--md\" style={{ position: 'relative' }}>\n <div className=\"zid-modal__header\">\n <h2 className=\"zid-modal__title\">Medium Modal</h2>\n <button className=\"zid-modal__close\"><IconCloseLine /></button>\n </div>\n <div className=\"zid-modal__body\">Medium modal content goes here. This is the default size for most use cases.</div>\n <div className=\"zid-modal__footer\">\n <button className=\"zid-button zid-button--text zid-button--secondary zid-button--md\">Cancel</button>\n <button className=\"zid-button zid-button--contained zid-button--primary zid-button--md\">Confirm</button>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n ),\n};\n\nexport const WithForm: Story = {\n render: () => (\n <div style={{ display: 'flex', flexDirection: 'column', gap: '16px' }}>\n <h3 style={{ marginBottom: '8px', fontFamily: 'var(--zid-font-family)' }}>Modal with Form</h3>\n <div style={{ position: 'relative', background: 'rgba(0,0,0,0.5)', padding: '24px', borderRadius: '8px' }}>\n <div className=\"zid-modal__content zid-modal__content--md\" style={{ position: 'relative' }}>\n <div className=\"zid-modal__header\">\n <h2 className=\"zid-modal__title\">Create New Item</h2>\n <button className=\"zid-modal__close\"><IconCloseLine /></button>\n </div>\n <div className=\"zid-modal__body\">\n <div style={{ display: 'flex', flexDirection: 'column', gap: '16px' }}>\n <div>\n <label className=\"zid-input-label zid-input-label--required\">Name</label>\n <div className=\"zid-input zid-input--md\">\n <input type=\"text\" className=\"zid-input__field\" placeholder=\"Enter name\" />\n </div>\n </div>\n <div>\n <label className=\"zid-input-label\">Description</label>\n <div className=\"zid-input zid-input--md\">\n <input type=\"text\" className=\"zid-input__field\" placeholder=\"Enter description\" />\n </div>\n </div>\n <div>\n <label className=\"zid-input-label zid-input-label--required\">Category</label>\n <div className=\"zid-select zid-select--md\">\n <select className=\"zid-select__native\" defaultValue=\"\">\n <option value=\"\" disabled>Select category</option>\n <option value=\"1\">Category 1</option>\n <option value=\"2\">Category 2</option>\n <option value=\"3\">Category 3</option>\n </select>\n <span className=\"zid-select__icon\">▼</span>\n </div>\n </div>\n </div>\n </div>\n <div className=\"zid-modal__footer\">\n <button className=\"zid-button zid-button--text zid-button--secondary zid-button--md\">Cancel</button>\n <button className=\"zid-button zid-button--contained zid-button--primary zid-button--md\">Create</button>\n </div>\n </div>\n </div>\n </div>\n ),\n};\n\n\nexport const ConfirmationDialog: Story = {\n render: () => (\n <div style={{ display: 'flex', flexDirection: 'column', gap: '16px' }}>\n <h3 style={{ marginBottom: '8px', fontFamily: 'var(--zid-font-family)' }}>Confirmation Dialog</h3>\n <div style={{ position: 'relative', background: 'rgba(0,0,0,0.5)', padding: '24px', borderRadius: '8px' }}>\n <div className=\"zid-modal__content zid-modal__content--sm\" style={{ position: 'relative' }}>\n <div className=\"zid-modal__header\">\n <h2 className=\"zid-modal__title\">Delete Item?</h2>\n <button className=\"zid-modal__close\"><IconCloseLine /></button>\n </div>\n <div className=\"zid-modal__body\">\n <p style={{ fontFamily: 'var(--zid-font-family)', color: 'var(--zid-text-secondary)', margin: 0 }}>\n Are you sure you want to delete this item? This action cannot be undone.\n </p>\n </div>\n <div className=\"zid-modal__footer\">\n <button className=\"zid-button zid-button--outlined zid-button--secondary zid-button--md\">Cancel</button>\n <button className=\"zid-button zid-button--contained zid-button--error zid-button--md\">Delete</button>\n </div>\n </div>\n </div>\n </div>\n ),\n};\n\nexport const WithoutFooter: Story = {\n render: () => (\n <div style={{ display: 'flex', flexDirection: 'column', gap: '16px' }}>\n <h3 style={{ marginBottom: '8px', fontFamily: 'var(--zid-font-family)' }}>Info Modal (No Footer)</h3>\n <div style={{ position: 'relative', background: 'rgba(0,0,0,0.5)', padding: '24px', borderRadius: '8px' }}>\n <div className=\"zid-modal__content zid-modal__content--sm\" style={{ position: 'relative' }}>\n <div className=\"zid-modal__header\">\n <h2 className=\"zid-modal__title\">Information</h2>\n <button className=\"zid-modal__close\"><IconCloseLine /></button>\n </div>\n <div className=\"zid-modal__body\">\n <div className=\"zid-alert zid-alert--info\">\n <div className=\"zid-alert__icon\">\n <svg viewBox=\"0 0 24 24\" fill=\"currentColor\">\n <path d=\"M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-6h2v6zm0-8h-2V7h2v2z\"/>\n </svg>\n </div>\n <div className=\"zid-alert__content\">\n <div className=\"zid-alert__message\">This is an informational modal without action buttons.</div>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n ),\n};\n"],"names":["jsxs","jsx","IconCloseLine"],"mappings":"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"}

package/dist/react/cjs/stories/css/Radio.stories.js ADDED Viewed

@@ -0,0 +1,118 @@
+"use strict";
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
+const jsxRuntime = require("react/jsx-runtime");
+;/* empty css                   */
+const meta = {
+  title: "CSS Styles/Components/Radio",
+  parameters: {
+    layout: "centered"
+  },
+  tags: ["autodocs"]
+};
+const States = {
+  render: () => /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", flexDirection: "column", gap: "32px" }, children: [
+    /* @__PURE__ */ jsxRuntime.jsx("h3", { style: { marginBottom: "16px", fontFamily: "var(--zid-font-family)" }, children: "Radio States" }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", gap: "24px", flexWrap: "wrap" }, children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("label", { className: "zid-radio", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("input", { type: "radio", className: "zid-radio__input", name: "state-demo" }),
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "zid-radio__circle" }),
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "zid-radio__label", children: "Unchecked" })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsxs("label", { className: "zid-radio", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("input", { type: "radio", className: "zid-radio__input", name: "state-demo", defaultChecked: true }),
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "zid-radio__circle" }),
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "zid-radio__label", children: "Checked" })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsxs("label", { className: "zid-radio zid-radio--disabled", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("input", { type: "radio", className: "zid-radio__input", name: "state-demo-2", disabled: true }),
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "zid-radio__circle" }),
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "zid-radio__label", children: "Disabled" })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsxs("label", { className: "zid-radio zid-radio--disabled", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("input", { type: "radio", className: "zid-radio__input", name: "state-demo-3", defaultChecked: true, disabled: true }),
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "zid-radio__circle" }),
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "zid-radio__label", children: "Disabled Checked" })
+      ] })
+    ] })
+  ] })
+};
+const RadioGroup = {
+  render: () => /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", flexDirection: "column", gap: "32px", width: "300px" }, children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+      /* @__PURE__ */ jsxRuntime.jsx("h3", { style: { marginBottom: "16px", fontFamily: "var(--zid-font-family)" }, children: "Radio Group - Vertical" }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "zid-radio-group", style: { display: "flex", flexDirection: "column", gap: "12px" }, children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("label", { className: "zid-radio", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("input", { type: "radio", className: "zid-radio__input", name: "group-demo", defaultChecked: true }),
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "zid-radio__circle" }),
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "zid-radio__label", children: "Option 1" })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsxs("label", { className: "zid-radio", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("input", { type: "radio", className: "zid-radio__input", name: "group-demo" }),
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "zid-radio__circle" }),
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "zid-radio__label", children: "Option 2" })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsxs("label", { className: "zid-radio", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("input", { type: "radio", className: "zid-radio__input", name: "group-demo" }),
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "zid-radio__circle" }),
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "zid-radio__label", children: "Option 3" })
+        ] })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+      /* @__PURE__ */ jsxRuntime.jsx("h3", { style: { marginBottom: "16px", fontFamily: "var(--zid-font-family)" }, children: "Radio Group - Horizontal" }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "zid-radio-group", style: { display: "flex", gap: "24px", flexWrap: "wrap" }, children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("label", { className: "zid-radio", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("input", { type: "radio", className: "zid-radio__input", name: "group-demo-h", defaultChecked: true }),
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "zid-radio__circle" }),
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "zid-radio__label", children: "Small" })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsxs("label", { className: "zid-radio", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("input", { type: "radio", className: "zid-radio__input", name: "group-demo-h" }),
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "zid-radio__circle" }),
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "zid-radio__label", children: "Medium" })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsxs("label", { className: "zid-radio", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("input", { type: "radio", className: "zid-radio__input", name: "group-demo-h" }),
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "zid-radio__circle" }),
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "zid-radio__label", children: "Large" })
+        ] })
+      ] })
+    ] })
+  ] })
+};
+const WithHelperText = {
+  render: () => /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", flexDirection: "column", gap: "24px", width: "400px" }, children: [
+    /* @__PURE__ */ jsxRuntime.jsx("h3", { style: { marginBottom: "8px", fontFamily: "var(--zid-font-family)" }, children: "With Helper Text" }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", flexDirection: "column", gap: "16px" }, children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("label", { className: "zid-radio", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("input", { type: "radio", className: "zid-radio__input", name: "helper-demo", defaultChecked: true }),
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "zid-radio__circle" }),
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "zid-radio__label", children: "Standard Shipping" })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "zid-input-helper", style: { marginLeft: "28px" }, children: "Free delivery in 5-7 business days" })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("label", { className: "zid-radio", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("input", { type: "radio", className: "zid-radio__input", name: "helper-demo" }),
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "zid-radio__circle" }),
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "zid-radio__label", children: "Express Shipping" })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "zid-input-helper", style: { marginLeft: "28px" }, children: "$9.99 - Delivery in 2-3 business days" })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("label", { className: "zid-radio", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("input", { type: "radio", className: "zid-radio__input", name: "helper-demo" }),
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "zid-radio__circle" }),
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "zid-radio__label", children: "Priority Shipping" })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "zid-input-helper", style: { marginLeft: "28px" }, children: "$19.99 - Next day delivery" })
+      ] })
+    ] })
+  ] })
+};
+exports.RadioGroup = RadioGroup;
+exports.States = States;
+exports.WithHelperText = WithHelperText;
+exports.default = meta;
+//# sourceMappingURL=Radio.stories.js.map

package/dist/react/cjs/stories/css/Radio.stories.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"Radio.stories.js","sources":["../../../../../src/stories/css/Radio.stories.tsx"],"sourcesContent":["import type { StoryObj } from '@storybook/react-vite';\nimport '../../css/index.css';\n\nconst meta = {\n title: 'CSS Styles/Components/Radio',\n parameters: {\n layout: 'centered',\n },\n tags: ['autodocs'],\n};\n\nexport default meta;\ntype Story = StoryObj<typeof meta>;\n\nexport const States: Story = {\n render: () => (\n <div style={{ display: 'flex', flexDirection: 'column', gap: '32px' }}>\n <h3 style={{ marginBottom: '16px', fontFamily: 'var(--zid-font-family)' }}>Radio States</h3>\n <div style={{ display: 'flex', gap: '24px', flexWrap: 'wrap' }}>\n <label className=\"zid-radio\">\n <input type=\"radio\" className=\"zid-radio__input\" name=\"state-demo\" />\n <span className=\"zid-radio__circle\"></span>\n <span className=\"zid-radio__label\">Unchecked</span>\n </label>\n <label className=\"zid-radio\">\n <input type=\"radio\" className=\"zid-radio__input\" name=\"state-demo\" defaultChecked />\n <span className=\"zid-radio__circle\"></span>\n <span className=\"zid-radio__label\">Checked</span>\n </label>\n <label className=\"zid-radio zid-radio--disabled\">\n <input type=\"radio\" className=\"zid-radio__input\" name=\"state-demo-2\" disabled />\n <span className=\"zid-radio__circle\"></span>\n <span className=\"zid-radio__label\">Disabled</span>\n </label>\n <label className=\"zid-radio zid-radio--disabled\">\n <input type=\"radio\" className=\"zid-radio__input\" name=\"state-demo-3\" defaultChecked disabled />\n <span className=\"zid-radio__circle\"></span>\n <span className=\"zid-radio__label\">Disabled Checked</span>\n </label>\n </div>\n </div>\n ),\n};\n\nexport const RadioGroup: Story = {\n render: () => (\n <div style={{ display: 'flex', flexDirection: 'column', gap: '32px', width: '300px' }}>\n <div>\n <h3 style={{ marginBottom: '16px', fontFamily: 'var(--zid-font-family)' }}>Radio Group - Vertical</h3>\n <div className=\"zid-radio-group\" style={{ display: 'flex', flexDirection: 'column', gap: '12px' }}>\n <label className=\"zid-radio\">\n <input type=\"radio\" className=\"zid-radio__input\" name=\"group-demo\" defaultChecked />\n <span className=\"zid-radio__circle\"></span>\n <span className=\"zid-radio__label\">Option 1</span>\n </label>\n <label className=\"zid-radio\">\n <input type=\"radio\" className=\"zid-radio__input\" name=\"group-demo\" />\n <span className=\"zid-radio__circle\"></span>\n <span className=\"zid-radio__label\">Option 2</span>\n </label>\n <label className=\"zid-radio\">\n <input type=\"radio\" className=\"zid-radio__input\" name=\"group-demo\" />\n <span className=\"zid-radio__circle\"></span>\n <span className=\"zid-radio__label\">Option 3</span>\n </label>\n </div>\n </div>\n <div>\n <h3 style={{ marginBottom: '16px', fontFamily: 'var(--zid-font-family)' }}>Radio Group - Horizontal</h3>\n <div className=\"zid-radio-group\" style={{ display: 'flex', gap: '24px', flexWrap: 'wrap' }}>\n <label className=\"zid-radio\">\n <input type=\"radio\" className=\"zid-radio__input\" name=\"group-demo-h\" defaultChecked />\n <span className=\"zid-radio__circle\"></span>\n <span className=\"zid-radio__label\">Small</span>\n </label>\n <label className=\"zid-radio\">\n <input type=\"radio\" className=\"zid-radio__input\" name=\"group-demo-h\" />\n <span className=\"zid-radio__circle\"></span>\n <span className=\"zid-radio__label\">Medium</span>\n </label>\n <label className=\"zid-radio\">\n <input type=\"radio\" className=\"zid-radio__input\" name=\"group-demo-h\" />\n <span className=\"zid-radio__circle\"></span>\n <span className=\"zid-radio__label\">Large</span>\n </label>\n </div>\n </div>\n </div>\n ),\n};\n\nexport const WithHelperText: Story = {\n render: () => (\n <div style={{ display: 'flex', flexDirection: 'column', gap: '24px', width: '400px' }}>\n <h3 style={{ marginBottom: '8px', fontFamily: 'var(--zid-font-family)' }}>With Helper Text</h3>\n <div style={{ display: 'flex', flexDirection: 'column', gap: '16px' }}>\n <div>\n <label className=\"zid-radio\">\n <input type=\"radio\" className=\"zid-radio__input\" name=\"helper-demo\" defaultChecked />\n <span className=\"zid-radio__circle\"></span>\n <span className=\"zid-radio__label\">Standard Shipping</span>\n </label>\n <div className=\"zid-input-helper\" style={{ marginLeft: '28px' }}>Free delivery in 5-7 business days</div>\n </div>\n <div>\n <label className=\"zid-radio\">\n <input type=\"radio\" className=\"zid-radio__input\" name=\"helper-demo\" />\n <span className=\"zid-radio__circle\"></span>\n <span className=\"zid-radio__label\">Express Shipping</span>\n </label>\n <div className=\"zid-input-helper\" style={{ marginLeft: '28px' }}>$9.99 - Delivery in 2-3 business days</div>\n </div>\n <div>\n <label className=\"zid-radio\">\n <input type=\"radio\" className=\"zid-radio__input\" name=\"helper-demo\" />\n <span className=\"zid-radio__circle\"></span>\n <span className=\"zid-radio__label\">Priority Shipping</span>\n </label>\n <div className=\"zid-input-helper\" style={{ marginLeft: '28px' }}>$19.99 - Next day delivery</div>\n </div>\n </div>\n </div>\n ),\n};\n"],"names":["jsxs","jsx"],"mappings":";;;;AAGA,MAAM,OAAO;AAAA,EACX,OAAO;AAAA,EACP,YAAY;AAAA,IACV,QAAQ;AAAA,EAAA;AAAA,EAEV,MAAM,CAAC,UAAU;AACnB;AAKO,MAAM,SAAgB;AAAA,EAC3B,QAAQ,MACNA,2BAAAA,KAAC,OAAA,EAAI,OAAO,EAAE,SAAS,QAAQ,eAAe,UAAU,KAAK,OAAA,GAC3D,UAAA;AAAA,IAAAC,2BAAAA,IAAC,MAAA,EAAG,OAAO,EAAE,cAAc,QAAQ,YAAY,yBAAA,GAA4B,UAAA,eAAA,CAAY;AAAA,IACvFD,2BAAAA,KAAC,OAAA,EAAI,OAAO,EAAE,SAAS,QAAQ,KAAK,QAAQ,UAAU,OAAA,GACpD,UAAA;AAAA,MAAAA,2BAAAA,KAAC,SAAA,EAAM,WAAU,aACf,UAAA;AAAA,QAAAC,+BAAC,WAAM,MAAK,SAAQ,WAAU,oBAAmB,MAAK,cAAa;AAAA,QACnEA,2BAAAA,IAAC,QAAA,EAAK,WAAU,oBAAA,CAAoB;AAAA,QACpCA,2BAAAA,IAAC,QAAA,EAAK,WAAU,oBAAmB,UAAA,YAAA,CAAS;AAAA,MAAA,GAC9C;AAAA,MACAD,2BAAAA,KAAC,SAAA,EAAM,WAAU,aACf,UAAA;AAAA,QAAAC,2BAAAA,IAAC,SAAA,EAAM,MAAK,SAAQ,WAAU,oBAAmB,MAAK,cAAa,gBAAc,KAAA,CAAC;AAAA,QAClFA,2BAAAA,IAAC,QAAA,EAAK,WAAU,oBAAA,CAAoB;AAAA,QACpCA,2BAAAA,IAAC,QAAA,EAAK,WAAU,oBAAmB,UAAA,UAAA,CAAO;AAAA,MAAA,GAC5C;AAAA,MACAD,2BAAAA,KAAC,SAAA,EAAM,WAAU,iCACf,UAAA;AAAA,QAAAC,2BAAAA,IAAC,SAAA,EAAM,MAAK,SAAQ,WAAU,oBAAmB,MAAK,gBAAe,UAAQ,KAAA,CAAC;AAAA,QAC9EA,2BAAAA,IAAC,QAAA,EAAK,WAAU,oBAAA,CAAoB;AAAA,QACpCA,2BAAAA,IAAC,QAAA,EAAK,WAAU,oBAAmB,UAAA,WAAA,CAAQ;AAAA,MAAA,GAC7C;AAAA,MACAD,2BAAAA,KAAC,SAAA,EAAM,WAAU,iCACf,UAAA;AAAA,QAAAC,2BAAAA,IAAC,SAAA,EAAM,MAAK,SAAQ,WAAU,oBAAmB,MAAK,gBAAe,gBAAc,MAAC,UAAQ,KAAA,CAAC;AAAA,QAC7FA,2BAAAA,IAAC,QAAA,EAAK,WAAU,oBAAA,CAAoB;AAAA,QACpCA,2BAAAA,IAAC,QAAA,EAAK,WAAU,oBAAmB,UAAA,mBAAA,CAAgB;AAAA,MAAA,EAAA,CACrD;AAAA,IAAA,EAAA,CACF;AAAA,EAAA,EAAA,CACF;AAEJ;AAEO,MAAM,aAAoB;AAAA,EAC/B,QAAQ,MACND,2BAAAA,KAAC,OAAA,EAAI,OAAO,EAAE,SAAS,QAAQ,eAAe,UAAU,KAAK,QAAQ,OAAO,WAC1E,UAAA;AAAA,IAAAA,gCAAC,OAAA,EACC,UAAA;AAAA,MAAAC,2BAAAA,IAAC,MAAA,EAAG,OAAO,EAAE,cAAc,QAAQ,YAAY,yBAAA,GAA4B,UAAA,yBAAA,CAAsB;AAAA,MACjGD,2BAAAA,KAAC,OAAA,EAAI,WAAU,mBAAkB,OAAO,EAAE,SAAS,QAAQ,eAAe,UAAU,KAAK,OAAA,GACvF,UAAA;AAAA,QAAAA,2BAAAA,KAAC,SAAA,EAAM,WAAU,aACf,UAAA;AAAA,UAAAC,2BAAAA,IAAC,SAAA,EAAM,MAAK,SAAQ,WAAU,oBAAmB,MAAK,cAAa,gBAAc,KAAA,CAAC;AAAA,UAClFA,2BAAAA,IAAC,QAAA,EAAK,WAAU,oBAAA,CAAoB;AAAA,UACpCA,2BAAAA,IAAC,QAAA,EAAK,WAAU,oBAAmB,UAAA,WAAA,CAAQ;AAAA,QAAA,GAC7C;AAAA,QACAD,2BAAAA,KAAC,SAAA,EAAM,WAAU,aACf,UAAA;AAAA,UAAAC,+BAAC,WAAM,MAAK,SAAQ,WAAU,oBAAmB,MAAK,cAAa;AAAA,UACnEA,2BAAAA,IAAC,QAAA,EAAK,WAAU,oBAAA,CAAoB;AAAA,UACpCA,2BAAAA,IAAC,QAAA,EAAK,WAAU,oBAAmB,UAAA,WAAA,CAAQ;AAAA,QAAA,GAC7C;AAAA,QACAD,2BAAAA,KAAC,SAAA,EAAM,WAAU,aACf,UAAA;AAAA,UAAAC,+BAAC,WAAM,MAAK,SAAQ,WAAU,oBAAmB,MAAK,cAAa;AAAA,UACnEA,2BAAAA,IAAC,QAAA,EAAK,WAAU,oBAAA,CAAoB;AAAA,UACpCA,2BAAAA,IAAC,QAAA,EAAK,WAAU,oBAAmB,UAAA,WAAA,CAAQ;AAAA,QAAA,EAAA,CAC7C;AAAA,MAAA,EAAA,CACF;AAAA,IAAA,GACF;AAAA,oCACC,OAAA,EACC,UAAA;AAAA,MAAAA,2BAAAA,IAAC,MAAA,EAAG,OAAO,EAAE,cAAc,QAAQ,YAAY,yBAAA,GAA4B,UAAA,2BAAA,CAAwB;AAAA,MACnGD,2BAAAA,KAAC,OAAA,EAAI,WAAU,mBAAkB,OAAO,EAAE,SAAS,QAAQ,KAAK,QAAQ,UAAU,OAAA,GAChF,UAAA;AAAA,QAAAA,2BAAAA,KAAC,SAAA,EAAM,WAAU,aACf,UAAA;AAAA,UAAAC,2BAAAA,IAAC,SAAA,EAAM,MAAK,SAAQ,WAAU,oBAAmB,MAAK,gBAAe,gBAAc,KAAA,CAAC;AAAA,UACpFA,2BAAAA,IAAC,QAAA,EAAK,WAAU,oBAAA,CAAoB;AAAA,UACpCA,2BAAAA,IAAC,QAAA,EAAK,WAAU,oBAAmB,UAAA,QAAA,CAAK;AAAA,QAAA,GAC1C;AAAA,QACAD,2BAAAA,KAAC,SAAA,EAAM,WAAU,aACf,UAAA;AAAA,UAAAC,+BAAC,WAAM,MAAK,SAAQ,WAAU,oBAAmB,MAAK,gBAAe;AAAA,UACrEA,2BAAAA,IAAC,QAAA,EAAK,WAAU,oBAAA,CAAoB;AAAA,UACpCA,2BAAAA,IAAC,QAAA,EAAK,WAAU,oBAAmB,UAAA,SAAA,CAAM;AAAA,QAAA,GAC3C;AAAA,QACAD,2BAAAA,KAAC,SAAA,EAAM,WAAU,aACf,UAAA;AAAA,UAAAC,+BAAC,WAAM,MAAK,SAAQ,WAAU,oBAAmB,MAAK,gBAAe;AAAA,UACrEA,2BAAAA,IAAC,QAAA,EAAK,WAAU,oBAAA,CAAoB;AAAA,UACpCA,2BAAAA,IAAC,QAAA,EAAK,WAAU,oBAAmB,UAAA,QAAA,CAAK;AAAA,QAAA,EAAA,CAC1C;AAAA,MAAA,EAAA,CACF;AAAA,IAAA,EAAA,CACF;AAAA,EAAA,EAAA,CACF;AAEJ;AAEO,MAAM,iBAAwB;AAAA,EACnC,QAAQ,MACND,2BAAAA,KAAC,OAAA,EAAI,OAAO,EAAE,SAAS,QAAQ,eAAe,UAAU,KAAK,QAAQ,OAAO,WAC1E,UAAA;AAAA,IAAAC,2BAAAA,IAAC,MAAA,EAAG,OAAO,EAAE,cAAc,OAAO,YAAY,yBAAA,GAA4B,UAAA,mBAAA,CAAgB;AAAA,IAC1FD,2BAAAA,KAAC,OAAA,EAAI,OAAO,EAAE,SAAS,QAAQ,eAAe,UAAU,KAAK,OAAA,GAC3D,UAAA;AAAA,MAAAA,gCAAC,OAAA,EACC,UAAA;AAAA,QAAAA,2BAAAA,KAAC,SAAA,EAAM,WAAU,aACf,UAAA;AAAA,UAAAC,2BAAAA,IAAC,SAAA,EAAM,MAAK,SAAQ,WAAU,oBAAmB,MAAK,eAAc,gBAAc,KAAA,CAAC;AAAA,UACnFA,2BAAAA,IAAC,QAAA,EAAK,WAAU,oBAAA,CAAoB;AAAA,UACpCA,2BAAAA,IAAC,QAAA,EAAK,WAAU,oBAAmB,UAAA,oBAAA,CAAiB;AAAA,QAAA,GACtD;AAAA,QACAA,2BAAAA,IAAC,SAAI,WAAU,oBAAmB,OAAO,EAAE,YAAY,OAAA,GAAU,UAAA,qCAAA,CAAkC;AAAA,MAAA,GACrG;AAAA,sCACC,OAAA,EACC,UAAA;AAAA,QAAAD,2BAAAA,KAAC,SAAA,EAAM,WAAU,aACf,UAAA;AAAA,UAAAC,+BAAC,WAAM,MAAK,SAAQ,WAAU,oBAAmB,MAAK,eAAc;AAAA,UACpEA,2BAAAA,IAAC,QAAA,EAAK,WAAU,oBAAA,CAAoB;AAAA,UACpCA,2BAAAA,IAAC,QAAA,EAAK,WAAU,oBAAmB,UAAA,mBAAA,CAAgB;AAAA,QAAA,GACrD;AAAA,QACAA,2BAAAA,IAAC,SAAI,WAAU,oBAAmB,OAAO,EAAE,YAAY,OAAA,GAAU,UAAA,wCAAA,CAAqC;AAAA,MAAA,GACxG;AAAA,sCACC,OAAA,EACC,UAAA;AAAA,QAAAD,2BAAAA,KAAC,SAAA,EAAM,WAAU,aACf,UAAA;AAAA,UAAAC,+BAAC,WAAM,MAAK,SAAQ,WAAU,oBAAmB,MAAK,eAAc;AAAA,UACpEA,2BAAAA,IAAC,QAAA,EAAK,WAAU,oBAAA,CAAoB;AAAA,UACpCA,2BAAAA,IAAC,QAAA,EAAK,WAAU,oBAAmB,UAAA,oBAAA,CAAiB;AAAA,QAAA,GACtD;AAAA,QACAA,2BAAAA,IAAC,SAAI,WAAU,oBAAmB,OAAO,EAAE,YAAY,OAAA,GAAU,UAAA,6BAAA,CAA0B;AAAA,MAAA,EAAA,CAC7F;AAAA,IAAA,EAAA,CACF;AAAA,EAAA,EAAA,CACF;AAEJ;;;;;"}