@zidsa/zidmui 2.0.2 → 2.1.0

package/dist/react/es/stories/css/Input.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Input.stories.js","sources":["../../../../../src/stories/css/Input.stories.tsx"],"sourcesContent":["import type { StoryObj } from '@storybook/react-vite';\nimport '../../css/index.css';\n\nconst meta = {\n  title: 'CSS Styles/Components/Input',\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: '24px', width: '400px' }}>\n      <h3 style={{ marginBottom: '16px', fontFamily: 'var(--zid-font-family)' }}>Input Sizes</h3>\n      <div style={{ display: 'flex', flexDirection: 'column', gap: '16px' }}>\n        <div>\n          <label className=\"zid-input-label\">Small</label>\n          <div className=\"zid-input zid-input--sm\">\n            <input type=\"text\" className=\"zid-input__field\" placeholder=\"Small input\" />\n          </div>\n        </div>\n        <div>\n          <label className=\"zid-input-label\">Medium</label>\n          <div className=\"zid-input zid-input--md\">\n            <input type=\"text\" className=\"zid-input__field\" placeholder=\"Medium input\" />\n          </div>\n        </div>\n        <div>\n          <label className=\"zid-input-label\">Large</label>\n          <div className=\"zid-input zid-input--lg\">\n            <input type=\"text\" className=\"zid-input__field\" placeholder=\"Large input\" />\n          </div>\n        </div>\n      </div>\n    </div>\n  ),\n};\n\nexport const States: Story = {\n  render: () => (\n    <div style={{ display: 'flex', flexDirection: 'column', gap: '24px', width: '400px' }}>\n      <h3 style={{ marginBottom: '16px', fontFamily: 'var(--zid-font-family)' }}>Input States</h3>\n      <div style={{ display: 'flex', flexDirection: 'column', gap: '16px' }}>\n        <div>\n          <label className=\"zid-input-label\">Default</label>\n          <div className=\"zid-input zid-input--md\">\n            <input type=\"text\" className=\"zid-input__field\" placeholder=\"Default state\" />\n          </div>\n          <div className=\"zid-input-helper\">This is helper text</div>\n        </div>\n        <div>\n          <label className=\"zid-input-label\">Hover (hover over input)</label>\n          <div className=\"zid-input zid-input--md\">\n            <input type=\"text\" className=\"zid-input__field\" placeholder=\"Hover to see effect\" />\n          </div>\n        </div>\n        <div>\n          <label className=\"zid-input-label\">Focus (click input)</label>\n          <div className=\"zid-input zid-input--md\">\n            <input type=\"text\" className=\"zid-input__field\" placeholder=\"Click to focus\" />\n          </div>\n        </div>\n        <div>\n          <label className=\"zid-input-label zid-input-label--required\">Error</label>\n          <div className=\"zid-input zid-input--md zid-input--error\">\n            <input type=\"text\" className=\"zid-input__field\" placeholder=\"Error state\" />\n          </div>\n          <div className=\"zid-input-helper zid-input-helper--error\">This field has an error</div>\n        </div>\n        <div>\n          <label className=\"zid-input-label\">Disabled</label>\n          <div className=\"zid-input zid-input--md zid-input--disabled\">\n            <input type=\"text\" className=\"zid-input__field\" placeholder=\"Disabled\" disabled />\n          </div>\n          <div className=\"zid-input-helper\">This input is disabled</div>\n        </div>\n      </div>\n    </div>\n  ),\n};\n\n\nexport const WithLabelAndHelper: Story = {\n  render: () => (\n    <div style={{ display: 'flex', flexDirection: 'column', gap: '24px', width: '400px' }}>\n      <h3 style={{ marginBottom: '16px', fontFamily: 'var(--zid-font-family)' }}>With Label & Helper Text</h3>\n      <div style={{ display: 'flex', flexDirection: 'column', gap: '20px' }}>\n        <div>\n          <label className=\"zid-input-label\">Email Address</label>\n          <div className=\"zid-input zid-input--md\">\n            <input type=\"email\" className=\"zid-input__field\" placeholder=\"Enter your email\" />\n          </div>\n          <div className=\"zid-input-helper\">We will never share your email</div>\n        </div>\n        <div>\n          <label className=\"zid-input-label zid-input-label--required\">Password</label>\n          <div className=\"zid-input zid-input--md\">\n            <input type=\"password\" className=\"zid-input__field\" placeholder=\"Enter password\" />\n          </div>\n          <div className=\"zid-input-helper\">Must be at least 8 characters</div>\n        </div>\n        <div>\n          <label className=\"zid-input-label zid-input-label--required\">Username</label>\n          <div className=\"zid-input zid-input--md zid-input--error\">\n            <input type=\"text\" className=\"zid-input__field\" placeholder=\"Enter username\" defaultValue=\"ab\" />\n          </div>\n          <div className=\"zid-input-helper zid-input-helper--error\">Username must be at least 3 characters</div>\n        </div>\n      </div>\n    </div>\n  ),\n};\n\nexport const WithAdornments: Story = {\n  render: () => (\n    <div style={{ display: 'flex', flexDirection: 'column', gap: '24px', width: '400px' }}>\n      <h3 style={{ marginBottom: '16px', fontFamily: 'var(--zid-font-family)' }}>With Adornments</h3>\n      <div style={{ display: 'flex', flexDirection: 'column', gap: '16px' }}>\n        <div>\n          <label className=\"zid-input-label\">Search</label>\n          <div className=\"zid-input zid-input--md\">\n            <span className=\"zid-input__adornment zid-input__adornment--start\">\n              <svg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\n                <path d=\"M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z\"/>\n              </svg>\n            </span>\n            <input type=\"text\" className=\"zid-input__field\" placeholder=\"Search...\" />\n          </div>\n        </div>\n        <div>\n          <label className=\"zid-input-label\">Price</label>\n          <div className=\"zid-input zid-input--md\">\n            <span className=\"zid-input__adornment zid-input__adornment--start zid-input__adornment-text\">$</span>\n            <input type=\"number\" className=\"zid-input__field\" placeholder=\"0.00\" />\n          </div>\n        </div>\n        <div>\n          <label className=\"zid-input-label\">Weight</label>\n          <div className=\"zid-input zid-input--md\">\n            <input type=\"number\" className=\"zid-input__field\" placeholder=\"Enter weight\" />\n            <span className=\"zid-input__adornment zid-input__adornment--end zid-input__adornment-text\">kg</span>\n          </div>\n        </div>\n        <div>\n          <label className=\"zid-input-label\">Website</label>\n          <div className=\"zid-input zid-input--md\">\n            <span className=\"zid-input__adornment zid-input__adornment--start zid-input__adornment-text\">https://</span>\n            <input type=\"text\" className=\"zid-input__field\" placeholder=\"example.com\" />\n          </div>\n        </div>\n        <div>\n          <label className=\"zid-input-label\">Password</label>\n          <div className=\"zid-input zid-input--md\">\n            <input type=\"password\" className=\"zid-input__field\" placeholder=\"Enter password\" />\n            <span className=\"zid-input__adornment zid-input__adornment--end\" style={{ cursor: 'pointer' }}>\n              <svg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\n                <path d=\"M12 4.5C7 4.5 2.73 7.61 1 12c1.73 4.39 6 7.5 11 7.5s9.27-3.11 11-7.5c-1.73-4.39-6-7.5-11-7.5zM12 17c-2.76 0-5-2.24-5-5s2.24-5 5-5 5 2.24 5 5-2.24 5-5 5zm0-8c-1.66 0-3 1.34-3 3s1.34 3 3 3 3-1.34 3-3-1.34-3-3-3z\"/>\n              </svg>\n            </span>\n          </div>\n        </div>\n      </div>\n    </div>\n  ),\n};\n\nexport const InputTypes: Story = {\n  render: () => (\n    <div style={{ display: 'flex', flexDirection: 'column', gap: '24px', width: '400px' }}>\n      <h3 style={{ marginBottom: '16px', fontFamily: 'var(--zid-font-family)' }}>Input Types</h3>\n      <div style={{ display: 'flex', flexDirection: 'column', gap: '16px' }}>\n        <div>\n          <label className=\"zid-input-label\">Text</label>\n          <div className=\"zid-input zid-input--md\">\n            <input type=\"text\" className=\"zid-input__field\" placeholder=\"Enter text\" />\n          </div>\n        </div>\n        <div>\n          <label className=\"zid-input-label\">Email</label>\n          <div className=\"zid-input zid-input--md\">\n            <input type=\"email\" className=\"zid-input__field\" placeholder=\"email@example.com\" />\n          </div>\n        </div>\n        <div>\n          <label className=\"zid-input-label\">Password</label>\n          <div className=\"zid-input zid-input--md\">\n            <input type=\"password\" className=\"zid-input__field\" placeholder=\"Enter password\" />\n          </div>\n        </div>\n        <div>\n          <label className=\"zid-input-label\">Number</label>\n          <div className=\"zid-input zid-input--md\">\n            <input type=\"number\" className=\"zid-input__field\" placeholder=\"0\" />\n          </div>\n        </div>\n        <div>\n          <label className=\"zid-input-label\">Tel</label>\n          <div className=\"zid-input zid-input--md\">\n            <input type=\"tel\" className=\"zid-input__field\" placeholder=\"+1 (555) 000-0000\" />\n          </div>\n        </div>\n        <div>\n          <label className=\"zid-input-label\">URL</label>\n          <div className=\"zid-input zid-input--md\">\n            <input type=\"url\" className=\"zid-input__field\" placeholder=\"https://example.com\" />\n          </div>\n        </div>\n      </div>\n    </div>\n  ),\n};\n"],"names":[],"mappings":"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"}

package/dist/react/es/stories/css/ListItem.stories.js

@@ -0,0 +1,166 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+/* empty css                  */
+const icons = {
+  inbox: /* @__PURE__ */ jsx("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "currentColor", children: /* @__PURE__ */ 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__ */ jsx("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "currentColor", children: /* @__PURE__ */ jsx("path", { d: "M17 3H7c-1.1 0-2 .9-2 2v16l7-3 7 3V5c0-1.1-.9-2-2-2z" }) }),
+  settings: /* @__PURE__ */ jsx("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "currentColor", children: /* @__PURE__ */ 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__ */ jsx("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "currentColor", children: /* @__PURE__ */ 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__ */ jsx("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "currentColor", children: /* @__PURE__ */ 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__ */ jsxs("div", { style: { display: "flex", flexDirection: "column", gap: "32px", width: "400px" }, children: [
+    /* @__PURE__ */ jsx("h3", { style: { marginBottom: "16px", fontFamily: "var(--zid-font-family)" }, children: "Basic List" }),
+    /* @__PURE__ */ jsxs("div", { className: "zid-list", children: [
+      /* @__PURE__ */ jsxs("div", { className: "zid-list-item", children: [
+        /* @__PURE__ */ jsx("div", { className: "zid-list-item__icon", children: icons.inbox }),
+        /* @__PURE__ */ jsx("div", { className: "zid-list-item__text", children: /* @__PURE__ */ jsx("span", { className: "zid-list-item__primary", children: "Inbox" }) })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "zid-list-item", children: [
+        /* @__PURE__ */ jsx("div", { className: "zid-list-item__icon", children: icons.bookmark }),
+        /* @__PURE__ */ jsx("div", { className: "zid-list-item__text", children: /* @__PURE__ */ jsx("span", { className: "zid-list-item__primary", children: "Saved" }) })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "zid-list-item", children: [
+        /* @__PURE__ */ jsx("div", { className: "zid-list-item__icon", children: icons.settings }),
+        /* @__PURE__ */ jsx("div", { className: "zid-list-item__text", children: /* @__PURE__ */ jsx("span", { className: "zid-list-item__primary", children: "Settings" }) })
+      ] })
+    ] })
+  ] })
+};
+const WithSecondaryText = {
+  render: () => /* @__PURE__ */ jsxs("div", { style: { display: "flex", flexDirection: "column", gap: "32px", width: "400px" }, children: [
+    /* @__PURE__ */ jsx("h3", { style: { marginBottom: "16px", fontFamily: "var(--zid-font-family)" }, children: "With Secondary Text" }),
+    /* @__PURE__ */ jsxs("div", { className: "zid-list", children: [
+      /* @__PURE__ */ jsxs("div", { className: "zid-list-item", children: [
+        /* @__PURE__ */ jsx("div", { className: "zid-list-item__icon", children: icons.user }),
+        /* @__PURE__ */ jsxs("div", { className: "zid-list-item__text", children: [
+          /* @__PURE__ */ jsx("span", { className: "zid-list-item__primary", children: "John Doe" }),
+          /* @__PURE__ */ jsx("span", { className: "zid-list-item__secondary", children: "john.doe@example.com" })
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "zid-list-item", children: [
+        /* @__PURE__ */ jsx("div", { className: "zid-list-item__icon", children: icons.user }),
+        /* @__PURE__ */ jsxs("div", { className: "zid-list-item__text", children: [
+          /* @__PURE__ */ jsx("span", { className: "zid-list-item__primary", children: "Jane Smith" }),
+          /* @__PURE__ */ jsx("span", { className: "zid-list-item__secondary", children: "jane.smith@example.com" })
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "zid-list-item", children: [
+        /* @__PURE__ */ jsx("div", { className: "zid-list-item__icon", children: icons.user }),
+        /* @__PURE__ */ jsxs("div", { className: "zid-list-item__text", children: [
+          /* @__PURE__ */ jsx("span", { className: "zid-list-item__primary", children: "Bob Johnson" }),
+          /* @__PURE__ */ jsx("span", { className: "zid-list-item__secondary", children: "bob.johnson@example.com" })
+        ] })
+      ] })
+    ] })
+  ] })
+};
+const ClickableList = {
+  render: () => /* @__PURE__ */ jsxs("div", { style: { display: "flex", flexDirection: "column", gap: "32px", width: "400px" }, children: [
+    /* @__PURE__ */ jsx("h3", { style: { marginBottom: "16px", fontFamily: "var(--zid-font-family)" }, children: "Clickable List" }),
+    /* @__PURE__ */ jsxs("div", { className: "zid-list", children: [
+      /* @__PURE__ */ jsxs("div", { className: "zid-list-item zid-list-item--clickable", children: [
+        /* @__PURE__ */ jsx("div", { className: "zid-list-item__icon", children: icons.folder }),
+        /* @__PURE__ */ jsxs("div", { className: "zid-list-item__text", children: [
+          /* @__PURE__ */ jsx("span", { className: "zid-list-item__primary", children: "Documents" }),
+          /* @__PURE__ */ jsx("span", { className: "zid-list-item__secondary", children: "12 files" })
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "zid-list-item zid-list-item--clickable zid-list-item--selected", children: [
+        /* @__PURE__ */ jsx("div", { className: "zid-list-item__icon", children: icons.folder }),
+        /* @__PURE__ */ jsxs("div", { className: "zid-list-item__text", children: [
+          /* @__PURE__ */ jsx("span", { className: "zid-list-item__primary", children: "Images" }),
+          /* @__PURE__ */ jsx("span", { className: "zid-list-item__secondary", children: "48 files (selected)" })
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "zid-list-item zid-list-item--clickable", children: [
+        /* @__PURE__ */ jsx("div", { className: "zid-list-item__icon", children: icons.folder }),
+        /* @__PURE__ */ jsxs("div", { className: "zid-list-item__text", children: [
+          /* @__PURE__ */ jsx("span", { className: "zid-list-item__primary", children: "Videos" }),
+          /* @__PURE__ */ jsx("span", { className: "zid-list-item__secondary", children: "5 files" })
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "zid-list-item zid-list-item--clickable zid-list-item--disabled", children: [
+        /* @__PURE__ */ jsx("div", { className: "zid-list-item__icon", children: icons.folder }),
+        /* @__PURE__ */ jsxs("div", { className: "zid-list-item__text", children: [
+          /* @__PURE__ */ jsx("span", { className: "zid-list-item__primary", children: "Archived" }),
+          /* @__PURE__ */ jsx("span", { className: "zid-list-item__secondary", children: "Disabled" })
+        ] })
+      ] })
+    ] })
+  ] })
+};
+const WithStatus = {
+  render: () => /* @__PURE__ */ jsxs("div", { style: { display: "flex", flexDirection: "column", gap: "32px", width: "400px" }, children: [
+    /* @__PURE__ */ jsx("h3", { style: { marginBottom: "16px", fontFamily: "var(--zid-font-family)" }, children: "With Status Badges" }),
+    /* @__PURE__ */ jsxs("div", { className: "zid-list", children: [
+      /* @__PURE__ */ jsxs("div", { className: "zid-list-item zid-list-item--clickable", children: [
+        /* @__PURE__ */ jsx("div", { className: "zid-list-item__icon", children: icons.user }),
+        /* @__PURE__ */ jsxs("div", { className: "zid-list-item__text", children: [
+          /* @__PURE__ */ jsx("span", { className: "zid-list-item__primary", children: "Order #1234" }),
+          /* @__PURE__ */ jsx("span", { className: "zid-list-item__secondary", children: "John Doe - $99.99" })
+        ] }),
+        /* @__PURE__ */ jsx("span", { className: "zid-status zid-status--success zid-status--sm", style: { marginLeft: "auto" }, children: "Completed" })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "zid-list-item zid-list-item--clickable", children: [
+        /* @__PURE__ */ jsx("div", { className: "zid-list-item__icon", children: icons.user }),
+        /* @__PURE__ */ jsxs("div", { className: "zid-list-item__text", children: [
+          /* @__PURE__ */ jsx("span", { className: "zid-list-item__primary", children: "Order #1235" }),
+          /* @__PURE__ */ jsx("span", { className: "zid-list-item__secondary", children: "Jane Smith - $149.99" })
+        ] }),
+        /* @__PURE__ */ jsx("span", { className: "zid-status zid-status--warning zid-status--sm", style: { marginLeft: "auto" }, children: "Pending" })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "zid-list-item zid-list-item--clickable", children: [
+        /* @__PURE__ */ jsx("div", { className: "zid-list-item__icon", children: icons.user }),
+        /* @__PURE__ */ jsxs("div", { className: "zid-list-item__text", children: [
+          /* @__PURE__ */ jsx("span", { className: "zid-list-item__primary", children: "Order #1236" }),
+          /* @__PURE__ */ jsx("span", { className: "zid-list-item__secondary", children: "Bob Johnson - $49.99" })
+        ] }),
+        /* @__PURE__ */ jsx("span", { className: "zid-status zid-status--error zid-status--sm", style: { marginLeft: "auto" }, children: "Cancelled" })
+      ] })
+    ] })
+  ] })
+};
+const NavigationMenu = {
+  render: () => /* @__PURE__ */ jsxs("div", { style: { display: "flex", flexDirection: "column", gap: "16px", width: "280px" }, children: [
+    /* @__PURE__ */ jsx("h3", { style: { marginBottom: "8px", fontFamily: "var(--zid-font-family)" }, children: "Navigation Menu" }),
+    /* @__PURE__ */ jsxs("div", { className: "zid-list", style: { background: "var(--zid-bg-paper)", borderRadius: "8px", padding: "8px" }, children: [
+      /* @__PURE__ */ jsxs("div", { className: "zid-list-item zid-list-item--clickable zid-list-item--selected", children: [
+        /* @__PURE__ */ jsx("div", { className: "zid-list-item__icon", children: icons.inbox }),
+        /* @__PURE__ */ jsx("div", { className: "zid-list-item__text", children: /* @__PURE__ */ jsx("span", { className: "zid-list-item__primary", children: "Dashboard" }) })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "zid-list-item zid-list-item--clickable", children: [
+        /* @__PURE__ */ jsx("div", { className: "zid-list-item__icon", children: icons.folder }),
+        /* @__PURE__ */ jsx("div", { className: "zid-list-item__text", children: /* @__PURE__ */ jsx("span", { className: "zid-list-item__primary", children: "Products" }) })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "zid-list-item zid-list-item--clickable", children: [
+        /* @__PURE__ */ jsx("div", { className: "zid-list-item__icon", children: icons.user }),
+        /* @__PURE__ */ jsx("div", { className: "zid-list-item__text", children: /* @__PURE__ */ jsx("span", { className: "zid-list-item__primary", children: "Customers" }) })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "zid-list-item zid-list-item--clickable", children: [
+        /* @__PURE__ */ jsx("div", { className: "zid-list-item__icon", children: icons.bookmark }),
+        /* @__PURE__ */ jsx("div", { className: "zid-list-item__text", children: /* @__PURE__ */ jsx("span", { className: "zid-list-item__primary", children: "Orders" }) })
+      ] }),
+      /* @__PURE__ */ jsx("div", { style: { height: "1px", background: "var(--zid-divider)", margin: "8px 0" } }),
+      /* @__PURE__ */ jsxs("div", { className: "zid-list-item zid-list-item--clickable", children: [
+        /* @__PURE__ */ jsx("div", { className: "zid-list-item__icon", children: icons.settings }),
+        /* @__PURE__ */ jsx("div", { className: "zid-list-item__text", children: /* @__PURE__ */ jsx("span", { className: "zid-list-item__primary", children: "Settings" }) })
+      ] })
+    ] })
+  ] })
+};
+export {
+  BasicList,
+  ClickableList,
+  NavigationMenu,
+  WithSecondaryText,
+  WithStatus,
+  meta as default
+};
+//# sourceMappingURL=ListItem.stories.js.map

package/dist/react/es/stories/css/ListItem.stories.js.map

@@ -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":[],"mappings":"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"}

package/dist/react/es/stories/css/Modal.stories.js

@@ -0,0 +1,121 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+/* empty css                  */
+import { IconCloseLine } from "../../icons/system/close-line.js";
+const meta = {
+  title: "CSS Styles/Components/Modal",
+  parameters: {
+    layout: "centered"
+  },
+  tags: ["autodocs"]
+};
+const Sizes = {
+  render: () => /* @__PURE__ */ jsxs("div", { style: { display: "flex", flexDirection: "column", gap: "32px" }, children: [
+    /* @__PURE__ */ jsx("h3", { style: { marginBottom: "16px", fontFamily: "var(--zid-font-family)" }, children: "Modal Sizes (Static Preview)" }),
+    /* @__PURE__ */ jsxs("div", { style: { display: "flex", flexDirection: "column", gap: "24px" }, children: [
+      /* @__PURE__ */ jsxs("div", { children: [
+        /* @__PURE__ */ jsx("h4", { style: { marginBottom: "8px", fontFamily: "var(--zid-font-family)", fontSize: "14px" }, children: "Small (sm)" }),
+        /* @__PURE__ */ jsx("div", { style: { position: "relative", background: "rgba(0,0,0,0.5)", padding: "24px", borderRadius: "8px" }, children: /* @__PURE__ */ jsxs("div", { className: "zid-modal__content zid-modal__content--sm", style: { position: "relative" }, children: [
+          /* @__PURE__ */ jsxs("div", { className: "zid-modal__header", children: [
+            /* @__PURE__ */ jsx("h2", { className: "zid-modal__title", children: "Small Modal" }),
+            /* @__PURE__ */ jsx("button", { className: "zid-modal__close", children: /* @__PURE__ */ jsx(IconCloseLine, {}) })
+          ] }),
+          /* @__PURE__ */ jsx("div", { className: "zid-modal__body", children: "Small modal content goes here." }),
+          /* @__PURE__ */ jsxs("div", { className: "zid-modal__footer", children: [
+            /* @__PURE__ */ jsx("button", { className: "zid-button zid-button--text zid-button--secondary zid-button--md", children: "Cancel" }),
+            /* @__PURE__ */ jsx("button", { className: "zid-button zid-button--contained zid-button--primary zid-button--md", children: "Confirm" })
+          ] })
+        ] }) })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { children: [
+        /* @__PURE__ */ jsx("h4", { style: { marginBottom: "8px", fontFamily: "var(--zid-font-family)", fontSize: "14px" }, children: "Medium (md)" }),
+        /* @__PURE__ */ jsx("div", { style: { position: "relative", background: "rgba(0,0,0,0.5)", padding: "24px", borderRadius: "8px" }, children: /* @__PURE__ */ jsxs("div", { className: "zid-modal__content zid-modal__content--md", style: { position: "relative" }, children: [
+          /* @__PURE__ */ jsxs("div", { className: "zid-modal__header", children: [
+            /* @__PURE__ */ jsx("h2", { className: "zid-modal__title", children: "Medium Modal" }),
+            /* @__PURE__ */ jsx("button", { className: "zid-modal__close", children: /* @__PURE__ */ jsx(IconCloseLine, {}) })
+          ] }),
+          /* @__PURE__ */ jsx("div", { className: "zid-modal__body", children: "Medium modal content goes here. This is the default size for most use cases." }),
+          /* @__PURE__ */ jsxs("div", { className: "zid-modal__footer", children: [
+            /* @__PURE__ */ jsx("button", { className: "zid-button zid-button--text zid-button--secondary zid-button--md", children: "Cancel" }),
+            /* @__PURE__ */ jsx("button", { className: "zid-button zid-button--contained zid-button--primary zid-button--md", children: "Confirm" })
+          ] })
+        ] }) })
+      ] })
+    ] })
+  ] })
+};
+const WithForm = {
+  render: () => /* @__PURE__ */ jsxs("div", { style: { display: "flex", flexDirection: "column", gap: "16px" }, children: [
+    /* @__PURE__ */ jsx("h3", { style: { marginBottom: "8px", fontFamily: "var(--zid-font-family)" }, children: "Modal with Form" }),
+    /* @__PURE__ */ jsx("div", { style: { position: "relative", background: "rgba(0,0,0,0.5)", padding: "24px", borderRadius: "8px" }, children: /* @__PURE__ */ jsxs("div", { className: "zid-modal__content zid-modal__content--md", style: { position: "relative" }, children: [
+      /* @__PURE__ */ jsxs("div", { className: "zid-modal__header", children: [
+        /* @__PURE__ */ jsx("h2", { className: "zid-modal__title", children: "Create New Item" }),
+        /* @__PURE__ */ jsx("button", { className: "zid-modal__close", children: /* @__PURE__ */ jsx(IconCloseLine, {}) })
+      ] }),
+      /* @__PURE__ */ jsx("div", { className: "zid-modal__body", children: /* @__PURE__ */ jsxs("div", { style: { display: "flex", flexDirection: "column", gap: "16px" }, children: [
+        /* @__PURE__ */ jsxs("div", { children: [
+          /* @__PURE__ */ jsx("label", { className: "zid-input-label zid-input-label--required", children: "Name" }),
+          /* @__PURE__ */ jsx("div", { className: "zid-input zid-input--md", children: /* @__PURE__ */ jsx("input", { type: "text", className: "zid-input__field", placeholder: "Enter name" }) })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { children: [
+          /* @__PURE__ */ jsx("label", { className: "zid-input-label", children: "Description" }),
+          /* @__PURE__ */ jsx("div", { className: "zid-input zid-input--md", children: /* @__PURE__ */ jsx("input", { type: "text", className: "zid-input__field", placeholder: "Enter description" }) })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { children: [
+          /* @__PURE__ */ jsx("label", { className: "zid-input-label zid-input-label--required", children: "Category" }),
+          /* @__PURE__ */ jsxs("div", { className: "zid-select zid-select--md", children: [
+            /* @__PURE__ */ jsxs("select", { className: "zid-select__native", defaultValue: "", children: [
+              /* @__PURE__ */ jsx("option", { value: "", disabled: true, children: "Select category" }),
+              /* @__PURE__ */ jsx("option", { value: "1", children: "Category 1" }),
+              /* @__PURE__ */ jsx("option", { value: "2", children: "Category 2" }),
+              /* @__PURE__ */ jsx("option", { value: "3", children: "Category 3" })
+            ] }),
+            /* @__PURE__ */ jsx("span", { className: "zid-select__icon", children: "▼" })
+          ] })
+        ] })
+      ] }) }),
+      /* @__PURE__ */ jsxs("div", { className: "zid-modal__footer", children: [
+        /* @__PURE__ */ jsx("button", { className: "zid-button zid-button--text zid-button--secondary zid-button--md", children: "Cancel" }),
+        /* @__PURE__ */ jsx("button", { className: "zid-button zid-button--contained zid-button--primary zid-button--md", children: "Create" })
+      ] })
+    ] }) })
+  ] })
+};
+const ConfirmationDialog = {
+  render: () => /* @__PURE__ */ jsxs("div", { style: { display: "flex", flexDirection: "column", gap: "16px" }, children: [
+    /* @__PURE__ */ jsx("h3", { style: { marginBottom: "8px", fontFamily: "var(--zid-font-family)" }, children: "Confirmation Dialog" }),
+    /* @__PURE__ */ jsx("div", { style: { position: "relative", background: "rgba(0,0,0,0.5)", padding: "24px", borderRadius: "8px" }, children: /* @__PURE__ */ jsxs("div", { className: "zid-modal__content zid-modal__content--sm", style: { position: "relative" }, children: [
+      /* @__PURE__ */ jsxs("div", { className: "zid-modal__header", children: [
+        /* @__PURE__ */ jsx("h2", { className: "zid-modal__title", children: "Delete Item?" }),
+        /* @__PURE__ */ jsx("button", { className: "zid-modal__close", children: /* @__PURE__ */ jsx(IconCloseLine, {}) })
+      ] }),
+      /* @__PURE__ */ jsx("div", { className: "zid-modal__body", children: /* @__PURE__ */ 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__ */ jsxs("div", { className: "zid-modal__footer", children: [
+        /* @__PURE__ */ jsx("button", { className: "zid-button zid-button--outlined zid-button--secondary zid-button--md", children: "Cancel" }),
+        /* @__PURE__ */ jsx("button", { className: "zid-button zid-button--contained zid-button--error zid-button--md", children: "Delete" })
+      ] })
+    ] }) })
+  ] })
+};
+const WithoutFooter = {
+  render: () => /* @__PURE__ */ jsxs("div", { style: { display: "flex", flexDirection: "column", gap: "16px" }, children: [
+    /* @__PURE__ */ jsx("h3", { style: { marginBottom: "8px", fontFamily: "var(--zid-font-family)" }, children: "Info Modal (No Footer)" }),
+    /* @__PURE__ */ jsx("div", { style: { position: "relative", background: "rgba(0,0,0,0.5)", padding: "24px", borderRadius: "8px" }, children: /* @__PURE__ */ jsxs("div", { className: "zid-modal__content zid-modal__content--sm", style: { position: "relative" }, children: [
+      /* @__PURE__ */ jsxs("div", { className: "zid-modal__header", children: [
+        /* @__PURE__ */ jsx("h2", { className: "zid-modal__title", children: "Information" }),
+        /* @__PURE__ */ jsx("button", { className: "zid-modal__close", children: /* @__PURE__ */ jsx(IconCloseLine, {}) })
+      ] }),
+      /* @__PURE__ */ jsx("div", { className: "zid-modal__body", children: /* @__PURE__ */ jsxs("div", { className: "zid-alert zid-alert--info", children: [
+        /* @__PURE__ */ jsx("div", { className: "zid-alert__icon", children: /* @__PURE__ */ jsx("svg", { viewBox: "0 0 24 24", fill: "currentColor", children: /* @__PURE__ */ 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__ */ jsx("div", { className: "zid-alert__content", children: /* @__PURE__ */ jsx("div", { className: "zid-alert__message", children: "This is an informational modal without action buttons." }) })
+      ] }) })
+    ] }) })
+  ] })
+};
+export {
+  ConfirmationDialog,
+  Sizes,
+  WithForm,
+  WithoutFooter,
+  meta as default
+};
+//# sourceMappingURL=Modal.stories.js.map

package/dist/react/es/stories/css/Modal.stories.js.map

@@ -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":[],"mappings":";;;AAIA,MAAM,OAAO;AAAA,EACX,OAAO;AAAA,EACP,YAAY;AAAA,IACV,QAAQ;AAAA,EAAA;AAAA,EAEV,MAAM,CAAC,UAAU;AACnB;AAKO,MAAM,QAAe;AAAA,EAC1B,QAAQ,MACN,qBAAC,OAAA,EAAI,OAAO,EAAE,SAAS,QAAQ,eAAe,UAAU,KAAK,OAAA,GAC3D,UAAA;AAAA,IAAA,oBAAC,MAAA,EAAG,OAAO,EAAE,cAAc,QAAQ,YAAY,yBAAA,GAA4B,UAAA,+BAAA,CAA4B;AAAA,IACvG,qBAAC,OAAA,EAAI,OAAO,EAAE,SAAS,QAAQ,eAAe,UAAU,KAAK,OAAA,GAC3D,UAAA;AAAA,MAAA,qBAAC,OAAA,EACC,UAAA;AAAA,QAAA,oBAAC,MAAA,EAAG,OAAO,EAAE,cAAc,OAAO,YAAY,0BAA0B,UAAU,OAAA,GAAU,UAAA,aAAA,CAAU;AAAA,QACtG,oBAAC,SAAI,OAAO,EAAE,UAAU,YAAY,YAAY,mBAAmB,SAAS,QAAQ,cAAc,MAAA,GAChG,+BAAC,OAAA,EAAI,WAAU,6CAA4C,OAAO,EAAE,UAAU,WAAA,GAC5E,UAAA;AAAA,UAAA,qBAAC,OAAA,EAAI,WAAU,qBACb,UAAA;AAAA,YAAA,oBAAC,MAAA,EAAG,WAAU,oBAAmB,UAAA,eAAW;AAAA,gCAC3C,UAAA,EAAO,WAAU,oBAAmB,UAAA,oBAAC,iBAAc,EAAA,CAAE;AAAA,UAAA,GACxD;AAAA,UACA,oBAAC,OAAA,EAAI,WAAU,mBAAkB,UAAA,kCAA8B;AAAA,UAC/D,qBAAC,OAAA,EAAI,WAAU,qBACb,UAAA;AAAA,YAAA,oBAAC,UAAA,EAAO,WAAU,oEAAmE,UAAA,UAAM;AAAA,YAC3F,oBAAC,UAAA,EAAO,WAAU,uEAAsE,UAAA,UAAA,CAAO;AAAA,UAAA,EAAA,CACjG;AAAA,QAAA,EAAA,CACF,EAAA,CACF;AAAA,MAAA,GACF;AAAA,2BACC,OAAA,EACC,UAAA;AAAA,QAAA,oBAAC,MAAA,EAAG,OAAO,EAAE,cAAc,OAAO,YAAY,0BAA0B,UAAU,OAAA,GAAU,UAAA,cAAA,CAAW;AAAA,QACvG,oBAAC,SAAI,OAAO,EAAE,UAAU,YAAY,YAAY,mBAAmB,SAAS,QAAQ,cAAc,MAAA,GAChG,+BAAC,OAAA,EAAI,WAAU,6CAA4C,OAAO,EAAE,UAAU,WAAA,GAC5E,UAAA;AAAA,UAAA,qBAAC,OAAA,EAAI,WAAU,qBACb,UAAA;AAAA,YAAA,oBAAC,MAAA,EAAG,WAAU,oBAAmB,UAAA,gBAAY;AAAA,gCAC5C,UAAA,EAAO,WAAU,oBAAmB,UAAA,oBAAC,iBAAc,EAAA,CAAE;AAAA,UAAA,GACxD;AAAA,UACA,oBAAC,OAAA,EAAI,WAAU,mBAAkB,UAAA,gFAA4E;AAAA,UAC7G,qBAAC,OAAA,EAAI,WAAU,qBACb,UAAA;AAAA,YAAA,oBAAC,UAAA,EAAO,WAAU,oEAAmE,UAAA,UAAM;AAAA,YAC3F,oBAAC,UAAA,EAAO,WAAU,uEAAsE,UAAA,UAAA,CAAO;AAAA,UAAA,EAAA,CACjG;AAAA,QAAA,EAAA,CACF,EAAA,CACF;AAAA,MAAA,EAAA,CACF;AAAA,IAAA,EAAA,CACF;AAAA,EAAA,EAAA,CACF;AAEJ;AAEO,MAAM,WAAkB;AAAA,EAC7B,QAAQ,MACN,qBAAC,OAAA,EAAI,OAAO,EAAE,SAAS,QAAQ,eAAe,UAAU,KAAK,OAAA,GAC3D,UAAA;AAAA,IAAA,oBAAC,MAAA,EAAG,OAAO,EAAE,cAAc,OAAO,YAAY,yBAAA,GAA4B,UAAA,kBAAA,CAAe;AAAA,IACzF,oBAAC,SAAI,OAAO,EAAE,UAAU,YAAY,YAAY,mBAAmB,SAAS,QAAQ,cAAc,MAAA,GAChG,+BAAC,OAAA,EAAI,WAAU,6CAA4C,OAAO,EAAE,UAAU,WAAA,GAC5E,UAAA;AAAA,MAAA,qBAAC,OAAA,EAAI,WAAU,qBACb,UAAA;AAAA,QAAA,oBAAC,MAAA,EAAG,WAAU,oBAAmB,UAAA,mBAAe;AAAA,4BAC/C,UAAA,EAAO,WAAU,oBAAmB,UAAA,oBAAC,iBAAc,EAAA,CAAE;AAAA,MAAA,GACxD;AAAA,MACA,oBAAC,OAAA,EAAI,WAAU,mBACb,+BAAC,OAAA,EAAI,OAAO,EAAE,SAAS,QAAQ,eAAe,UAAU,KAAK,UAC3D,UAAA;AAAA,QAAA,qBAAC,OAAA,EACC,UAAA;AAAA,UAAA,oBAAC,SAAA,EAAM,WAAU,6CAA4C,UAAA,QAAI;AAAA,UACjE,oBAAC,OAAA,EAAI,WAAU,2BACb,UAAA,oBAAC,SAAA,EAAM,MAAK,QAAO,WAAU,oBAAmB,aAAY,aAAA,CAAa,EAAA,CAC3E;AAAA,QAAA,GACF;AAAA,6BACC,OAAA,EACC,UAAA;AAAA,UAAA,oBAAC,SAAA,EAAM,WAAU,mBAAkB,UAAA,eAAW;AAAA,UAC9C,oBAAC,OAAA,EAAI,WAAU,2BACb,UAAA,oBAAC,SAAA,EAAM,MAAK,QAAO,WAAU,oBAAmB,aAAY,oBAAA,CAAoB,EAAA,CAClF;AAAA,QAAA,GACF;AAAA,6BACC,OAAA,EACC,UAAA;AAAA,UAAA,oBAAC,SAAA,EAAM,WAAU,6CAA4C,UAAA,YAAQ;AAAA,UACrE,qBAAC,OAAA,EAAI,WAAU,6BACb,UAAA;AAAA,YAAA,qBAAC,UAAA,EAAO,WAAU,sBAAqB,cAAa,IAClD,UAAA;AAAA,cAAA,oBAAC,UAAA,EAAO,OAAM,IAAG,UAAQ,MAAC,UAAA,mBAAe;AAAA,cACzC,oBAAC,UAAA,EAAO,OAAM,KAAI,UAAA,cAAU;AAAA,cAC5B,oBAAC,UAAA,EAAO,OAAM,KAAI,UAAA,cAAU;AAAA,cAC5B,oBAAC,UAAA,EAAO,OAAM,KAAI,UAAA,aAAA,CAAU;AAAA,YAAA,GAC9B;AAAA,YACA,oBAAC,QAAA,EAAK,WAAU,oBAAmB,UAAA,IAAA,CAAC;AAAA,UAAA,EAAA,CACtC;AAAA,QAAA,EAAA,CACF;AAAA,MAAA,EAAA,CACF,EAAA,CACF;AAAA,MACA,qBAAC,OAAA,EAAI,WAAU,qBACb,UAAA;AAAA,QAAA,oBAAC,UAAA,EAAO,WAAU,oEAAmE,UAAA,UAAM;AAAA,QAC3F,oBAAC,UAAA,EAAO,WAAU,uEAAsE,UAAA,SAAA,CAAM;AAAA,MAAA,EAAA,CAChG;AAAA,IAAA,EAAA,CACF,EAAA,CACF;AAAA,EAAA,EAAA,CACF;AAEJ;AAGO,MAAM,qBAA4B;AAAA,EACvC,QAAQ,MACN,qBAAC,OAAA,EAAI,OAAO,EAAE,SAAS,QAAQ,eAAe,UAAU,KAAK,OAAA,GAC3D,UAAA;AAAA,IAAA,oBAAC,MAAA,EAAG,OAAO,EAAE,cAAc,OAAO,YAAY,yBAAA,GAA4B,UAAA,sBAAA,CAAmB;AAAA,IAC7F,oBAAC,SAAI,OAAO,EAAE,UAAU,YAAY,YAAY,mBAAmB,SAAS,QAAQ,cAAc,MAAA,GAChG,+BAAC,OAAA,EAAI,WAAU,6CAA4C,OAAO,EAAE,UAAU,WAAA,GAC5E,UAAA;AAAA,MAAA,qBAAC,OAAA,EAAI,WAAU,qBACb,UAAA;AAAA,QAAA,oBAAC,MAAA,EAAG,WAAU,oBAAmB,UAAA,gBAAY;AAAA,4BAC5C,UAAA,EAAO,WAAU,oBAAmB,UAAA,oBAAC,iBAAc,EAAA,CAAE;AAAA,MAAA,GACxD;AAAA,0BACC,OAAA,EAAI,WAAU,mBACb,UAAA,oBAAC,OAAE,OAAO,EAAE,YAAY,0BAA0B,OAAO,6BAA6B,QAAQ,EAAA,GAAK,sFAEnG,GACF;AAAA,MACA,qBAAC,OAAA,EAAI,WAAU,qBACb,UAAA;AAAA,QAAA,oBAAC,UAAA,EAAO,WAAU,wEAAuE,UAAA,UAAM;AAAA,QAC/F,oBAAC,UAAA,EAAO,WAAU,qEAAoE,UAAA,SAAA,CAAM;AAAA,MAAA,EAAA,CAC9F;AAAA,IAAA,EAAA,CACF,EAAA,CACF;AAAA,EAAA,EAAA,CACF;AAEJ;AAEO,MAAM,gBAAuB;AAAA,EAClC,QAAQ,MACN,qBAAC,OAAA,EAAI,OAAO,EAAE,SAAS,QAAQ,eAAe,UAAU,KAAK,OAAA,GAC3D,UAAA;AAAA,IAAA,oBAAC,MAAA,EAAG,OAAO,EAAE,cAAc,OAAO,YAAY,yBAAA,GAA4B,UAAA,yBAAA,CAAsB;AAAA,IAChG,oBAAC,SAAI,OAAO,EAAE,UAAU,YAAY,YAAY,mBAAmB,SAAS,QAAQ,cAAc,MAAA,GAChG,+BAAC,OAAA,EAAI,WAAU,6CAA4C,OAAO,EAAE,UAAU,WAAA,GAC5E,UAAA;AAAA,MAAA,qBAAC,OAAA,EAAI,WAAU,qBACb,UAAA;AAAA,QAAA,oBAAC,MAAA,EAAG,WAAU,oBAAmB,UAAA,eAAW;AAAA,4BAC3C,UAAA,EAAO,WAAU,oBAAmB,UAAA,oBAAC,iBAAc,EAAA,CAAE;AAAA,MAAA,GACxD;AAAA,0BACC,OAAA,EAAI,WAAU,mBACb,UAAA,qBAAC,OAAA,EAAI,WAAU,6BACb,UAAA;AAAA,QAAA,oBAAC,OAAA,EAAI,WAAU,mBACb,UAAA,oBAAC,SAAI,SAAQ,aAAY,MAAK,gBAC5B,UAAA,oBAAC,QAAA,EAAK,GAAE,mGAAA,CAAkG,GAC5G,GACF;AAAA,QACA,oBAAC,SAAI,WAAU,sBACb,8BAAC,OAAA,EAAI,WAAU,sBAAqB,UAAA,yDAAA,CAAsD,EAAA,CAC5F;AAAA,MAAA,EAAA,CACF,EAAA,CACF;AAAA,IAAA,EAAA,CACF,EAAA,CACF;AAAA,EAAA,EAAA,CACF;AAEJ;"}

package/dist/react/es/stories/css/Radio.stories.js

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

package/dist/react/es/stories/css/Radio.stories.js.map

@@ -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":[],"mappings":"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"}