@zidsa/zidmui 2.0.3 → 2.1.0

package/dist/react/cjs/stories/design/Typography.stories.js

@@ -0,0 +1,116 @@
+"use strict";
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
+const jsxRuntime = require("react/jsx-runtime");
+;/* empty css                   */
+const meta = {
+  title: "Design System/Typography/CSS",
+  parameters: {
+    layout: "fullscreen"
+  }
+};
+const CSSTypography = {
+  render: () => /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { padding: "24px", maxWidth: "900px", fontFamily: "var(--zid-font-family)" }, children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { marginBottom: "32px" }, children: [
+      /* @__PURE__ */ jsxRuntime.jsx("h2", { style: { marginBottom: "8px" }, children: "Typography Scale" }),
+      /* @__PURE__ */ jsxRuntime.jsxs("p", { style: { color: "var(--zid-text-secondary)" }, children: [
+        "Access typography via CSS variables: ",
+        /* @__PURE__ */ jsxRuntime.jsx("code", { children: "var(--zid-font-{property})" })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { marginBottom: "48px" }, children: [
+      /* @__PURE__ */ jsxRuntime.jsx("h3", { style: { marginBottom: "16px" }, children: "Font Family" }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { padding: "20px", background: "var(--zid-base-neutral)", borderRadius: "8px", marginBottom: "16px" }, children: [
+        /* @__PURE__ */ jsxRuntime.jsx("p", { style: { fontSize: "24px", margin: 0 }, children: "IBM Plex Sans Arabic" }),
+        /* @__PURE__ */ jsxRuntime.jsx("p", { style: { fontSize: "14px", color: "var(--zid-text-secondary)", margin: "8px 0 0 0" }, children: "The quick brown fox jumps over the lazy dog" })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsx("pre", { style: { background: "#1f0433", color: "#fff", padding: "16px", borderRadius: "8px", fontSize: "13px", margin: 0 }, children: `font-family: var(--zid-font-family);` })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { marginBottom: "48px" }, children: [
+      /* @__PURE__ */ jsxRuntime.jsx("h3", { style: { marginBottom: "16px" }, children: "Font Sizes" }),
+      /* @__PURE__ */ jsxRuntime.jsx("div", { style: { display: "flex", flexDirection: "column", gap: "16px" }, children: [
+        { name: "4xl (36px)", var: "--zid-font-size-4xl" },
+        { name: "3xl (30px)", var: "--zid-font-size-3xl" },
+        { name: "2xl (24px)", var: "--zid-font-size-2xl" },
+        { name: "xl (20px)", var: "--zid-font-size-xl" },
+        { name: "lg (18px)", var: "--zid-font-size-lg" },
+        { name: "base (16px)", var: "--zid-font-size-base" },
+        { name: "sm (14px)", var: "--zid-font-size-sm" },
+        { name: "xs (12px)", var: "--zid-font-size-xs" }
+      ].map((size) => /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", alignItems: "baseline", gap: "16px", padding: "12px 0", borderBottom: "1px solid var(--zid-divider)" }, children: [
+        /* @__PURE__ */ jsxRuntime.jsx("div", { style: { width: "100px", fontFamily: "monospace", fontSize: "13px", color: "var(--zid-text-secondary)" }, children: size.name }),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { style: { fontSize: `var(${size.var})`, flex: 1 }, children: "Heading Text" })
+      ] }, size.name)) })
+    ] })
+  ] })
+};
+const FontWeights = {
+  render: () => /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { padding: "24px", maxWidth: "900px", fontFamily: "var(--zid-font-family)" }, children: [
+    /* @__PURE__ */ jsxRuntime.jsx("h2", { style: { marginBottom: "24px" }, children: "Font Weights" }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", flexDirection: "column", gap: "16px", marginBottom: "32px" }, children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", alignItems: "center", gap: "16px", padding: "16px", background: "var(--zid-base-neutral)", borderRadius: "8px" }, children: [
+        /* @__PURE__ */ jsxRuntime.jsx("div", { style: { width: "120px", fontFamily: "monospace", fontSize: "13px" }, children: "regular (400)" }),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { style: { fontSize: "24px", fontWeight: "var(--zid-font-weight-regular)", flex: 1 }, children: "The quick brown fox" })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", alignItems: "center", gap: "16px", padding: "16px", background: "var(--zid-base-neutral)", borderRadius: "8px" }, children: [
+        /* @__PURE__ */ jsxRuntime.jsx("div", { style: { width: "120px", fontFamily: "monospace", fontSize: "13px" }, children: "medium (500)" }),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { style: { fontSize: "24px", fontWeight: "var(--zid-font-weight-medium)", flex: 1 }, children: "The quick brown fox" })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", alignItems: "center", gap: "16px", padding: "16px", background: "var(--zid-base-neutral)", borderRadius: "8px" }, children: [
+        /* @__PURE__ */ jsxRuntime.jsx("div", { style: { width: "120px", fontFamily: "monospace", fontSize: "13px" }, children: "semibold (600)" }),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { style: { fontSize: "24px", fontWeight: "var(--zid-font-weight-semibold)", flex: 1 }, children: "The quick brown fox" })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", alignItems: "center", gap: "16px", padding: "16px", background: "var(--zid-base-neutral)", borderRadius: "8px" }, children: [
+        /* @__PURE__ */ jsxRuntime.jsx("div", { style: { width: "120px", fontFamily: "monospace", fontSize: "13px" }, children: "bold (700)" }),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { style: { fontSize: "24px", fontWeight: "var(--zid-font-weight-bold)", flex: 1 }, children: "The quick brown fox" })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsx("pre", { style: { background: "#1f0433", color: "#fff", padding: "16px", borderRadius: "8px", fontSize: "13px" }, children: `font-weight: var(--zid-font-weight-regular);  /* 400 */
+font-weight: var(--zid-font-weight-medium);   /* 500 */
+font-weight: var(--zid-font-weight-semibold); /* 600 */
+font-weight: var(--zid-font-weight-bold);     /* 700 */` })
+  ] })
+};
+const UsageExamples = {
+  render: () => /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { padding: "24px", maxWidth: "900px", fontFamily: "var(--zid-font-family)" }, children: [
+    /* @__PURE__ */ jsxRuntime.jsx("h2", { style: { marginBottom: "24px" }, children: "Usage Examples" }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", flexDirection: "column", gap: "48px" }, children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+        /* @__PURE__ */ jsxRuntime.jsx("h3", { style: { marginBottom: "16px" }, children: "Page Header" }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { padding: "24px", background: "var(--zid-base-neutral)", borderRadius: "8px", marginBottom: "16px" }, children: [
+          /* @__PURE__ */ jsxRuntime.jsx("h1", { style: { fontSize: "var(--zid-font-size-3xl)", fontWeight: "var(--zid-font-weight-bold)", margin: "0 0 8px 0" }, children: "Dashboard Overview" }),
+          /* @__PURE__ */ jsxRuntime.jsx("p", { style: { fontSize: "var(--zid-font-size-base)", color: "var(--zid-text-secondary)", margin: 0 }, children: "Welcome back! Here's what's happening today." })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsx("pre", { style: { background: "#1f0433", color: "#fff", padding: "16px", borderRadius: "8px", fontSize: "13px", margin: 0 }, children: `.page-title {
+  font-size: var(--zid-font-size-3xl);
+  font-weight: var(--zid-font-weight-bold);
+}
+
+.page-subtitle {
+  font-size: var(--zid-font-size-base);
+  color: var(--zid-text-secondary);
+}` })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+        /* @__PURE__ */ jsxRuntime.jsx("h3", { style: { marginBottom: "16px" }, children: "Card Content" }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "zid-card zid-card--elevation-1", style: { padding: "20px", marginBottom: "16px" }, children: [
+          /* @__PURE__ */ jsxRuntime.jsx("h4", { style: { fontSize: "var(--zid-font-size-lg)", fontWeight: "var(--zid-font-weight-semibold)", margin: "0 0 8px 0" }, children: "Card Title" }),
+          /* @__PURE__ */ jsxRuntime.jsx("p", { style: { fontSize: "var(--zid-font-size-sm)", color: "var(--zid-text-secondary)", lineHeight: "var(--zid-line-height-normal)", margin: 0 }, children: "This is the card description with proper typography settings applied." })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsx("pre", { style: { background: "#1f0433", color: "#fff", padding: "16px", borderRadius: "8px", fontSize: "13px", margin: 0 }, children: `.card-title {
+  font-size: var(--zid-font-size-lg);
+  font-weight: var(--zid-font-weight-semibold);
+}
+
+.card-description {
+  font-size: var(--zid-font-size-sm);
+  line-height: var(--zid-line-height-normal);
+}` })
+      ] })
+    ] })
+  ] })
+};
+exports.CSSTypography = CSSTypography;
+exports.FontWeights = FontWeights;
+exports.UsageExamples = UsageExamples;
+exports.default = meta;
+//# sourceMappingURL=Typography.stories.js.map

package/dist/react/cjs/stories/design/Typography.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Typography.stories.js","sources":["../../../../../src/stories/design/Typography.stories.tsx"],"sourcesContent":["import type { StoryObj } from '@storybook/react-vite';\nimport '../../css/index.css';\n\nconst meta = {\n  title: 'Design System/Typography/CSS',\n  parameters: {\n    layout: 'fullscreen',\n  },\n};\n\nexport default meta;\ntype Story = StoryObj<typeof meta>;\n\nexport const CSSTypography: Story = {\n  render: () => (\n    <div style={{ padding: '24px', maxWidth: '900px', fontFamily: 'var(--zid-font-family)' }}>\n      <div style={{ marginBottom: '32px' }}>\n        <h2 style={{ marginBottom: '8px' }}>Typography Scale</h2>\n        <p style={{ color: 'var(--zid-text-secondary)' }}>Access typography via CSS variables: <code>var(--zid-font-&#123;property&#125;)</code></p>\n      </div>\n\n      <div style={{ marginBottom: '48px' }}>\n        <h3 style={{ marginBottom: '16px' }}>Font Family</h3>\n        <div style={{ padding: '20px', background: 'var(--zid-base-neutral)', borderRadius: '8px', marginBottom: '16px' }}>\n          <p style={{ fontSize: '24px', margin: 0 }}>IBM Plex Sans Arabic</p>\n          <p style={{ fontSize: '14px', color: 'var(--zid-text-secondary)', margin: '8px 0 0 0' }}>The quick brown fox jumps over the lazy dog</p>\n        </div>\n        <pre style={{ background: '#1f0433', color: '#fff', padding: '16px', borderRadius: '8px', fontSize: '13px', margin: 0 }}>\n{`font-family: var(--zid-font-family);`}\n        </pre>\n      </div>\n\n      <div style={{ marginBottom: '48px' }}>\n        <h3 style={{ marginBottom: '16px' }}>Font Sizes</h3>\n        <div style={{ display: 'flex', flexDirection: 'column', gap: '16px' }}>\n          {[\n            { name: '4xl (36px)', var: '--zid-font-size-4xl' },\n            { name: '3xl (30px)', var: '--zid-font-size-3xl' },\n            { name: '2xl (24px)', var: '--zid-font-size-2xl' },\n            { name: 'xl (20px)', var: '--zid-font-size-xl' },\n            { name: 'lg (18px)', var: '--zid-font-size-lg' },\n            { name: 'base (16px)', var: '--zid-font-size-base' },\n            { name: 'sm (14px)', var: '--zid-font-size-sm' },\n            { name: 'xs (12px)', var: '--zid-font-size-xs' },\n          ].map(size => (\n            <div key={size.name} style={{ display: 'flex', alignItems: 'baseline', gap: '16px', padding: '12px 0', borderBottom: '1px solid var(--zid-divider)' }}>\n              <div style={{ width: '100px', fontFamily: 'monospace', fontSize: '13px', color: 'var(--zid-text-secondary)' }}>{size.name}</div>\n              <div style={{ fontSize: `var(${size.var})`, flex: 1 }}>Heading Text</div>\n            </div>\n          ))}\n        </div>\n      </div>\n    </div>\n  ),\n};\n\nexport const FontWeights: Story = {\n  render: () => (\n    <div style={{ padding: '24px', maxWidth: '900px', fontFamily: 'var(--zid-font-family)' }}>\n      <h2 style={{ marginBottom: '24px' }}>Font Weights</h2>\n      <div style={{ display: 'flex', flexDirection: 'column', gap: '16px', marginBottom: '32px' }}>\n        <div style={{ display: 'flex', alignItems: 'center', gap: '16px', padding: '16px', background: 'var(--zid-base-neutral)', borderRadius: '8px' }}>\n          <div style={{ width: '120px', fontFamily: 'monospace', fontSize: '13px' }}>regular (400)</div>\n          <div style={{ fontSize: '24px', fontWeight: 'var(--zid-font-weight-regular)', flex: 1 }}>The quick brown fox</div>\n        </div>\n        <div style={{ display: 'flex', alignItems: 'center', gap: '16px', padding: '16px', background: 'var(--zid-base-neutral)', borderRadius: '8px' }}>\n          <div style={{ width: '120px', fontFamily: 'monospace', fontSize: '13px' }}>medium (500)</div>\n          <div style={{ fontSize: '24px', fontWeight: 'var(--zid-font-weight-medium)', flex: 1 }}>The quick brown fox</div>\n        </div>\n        <div style={{ display: 'flex', alignItems: 'center', gap: '16px', padding: '16px', background: 'var(--zid-base-neutral)', borderRadius: '8px' }}>\n          <div style={{ width: '120px', fontFamily: 'monospace', fontSize: '13px' }}>semibold (600)</div>\n          <div style={{ fontSize: '24px', fontWeight: 'var(--zid-font-weight-semibold)', flex: 1 }}>The quick brown fox</div>\n        </div>\n        <div style={{ display: 'flex', alignItems: 'center', gap: '16px', padding: '16px', background: 'var(--zid-base-neutral)', borderRadius: '8px' }}>\n          <div style={{ width: '120px', fontFamily: 'monospace', fontSize: '13px' }}>bold (700)</div>\n          <div style={{ fontSize: '24px', fontWeight: 'var(--zid-font-weight-bold)', flex: 1 }}>The quick brown fox</div>\n        </div>\n      </div>\n      <pre style={{ background: '#1f0433', color: '#fff', padding: '16px', borderRadius: '8px', fontSize: '13px' }}>\n{`font-weight: var(--zid-font-weight-regular);  /* 400 */\nfont-weight: var(--zid-font-weight-medium);   /* 500 */\nfont-weight: var(--zid-font-weight-semibold); /* 600 */\nfont-weight: var(--zid-font-weight-bold);     /* 700 */`}\n      </pre>\n    </div>\n  ),\n};\n\nexport const UsageExamples: Story = {\n  render: () => (\n    <div style={{ padding: '24px', maxWidth: '900px', fontFamily: 'var(--zid-font-family)' }}>\n      <h2 style={{ marginBottom: '24px' }}>Usage Examples</h2>\n      <div style={{ display: 'flex', flexDirection: 'column', gap: '48px' }}>\n        <div>\n          <h3 style={{ marginBottom: '16px' }}>Page Header</h3>\n          <div style={{ padding: '24px', background: 'var(--zid-base-neutral)', borderRadius: '8px', marginBottom: '16px' }}>\n            <h1 style={{ fontSize: 'var(--zid-font-size-3xl)', fontWeight: 'var(--zid-font-weight-bold)', margin: '0 0 8px 0' }}>Dashboard Overview</h1>\n            <p style={{ fontSize: 'var(--zid-font-size-base)', color: 'var(--zid-text-secondary)', margin: 0 }}>Welcome back! Here's what's happening today.</p>\n          </div>\n          <pre style={{ background: '#1f0433', color: '#fff', padding: '16px', borderRadius: '8px', fontSize: '13px', margin: 0 }}>\n{`.page-title {\n  font-size: var(--zid-font-size-3xl);\n  font-weight: var(--zid-font-weight-bold);\n}\n\n.page-subtitle {\n  font-size: var(--zid-font-size-base);\n  color: var(--zid-text-secondary);\n}`}\n          </pre>\n        </div>\n        <div>\n          <h3 style={{ marginBottom: '16px' }}>Card Content</h3>\n          <div className=\"zid-card zid-card--elevation-1\" style={{ padding: '20px', marginBottom: '16px' }}>\n            <h4 style={{ fontSize: 'var(--zid-font-size-lg)', fontWeight: 'var(--zid-font-weight-semibold)', margin: '0 0 8px 0' }}>Card Title</h4>\n            <p style={{ fontSize: 'var(--zid-font-size-sm)', color: 'var(--zid-text-secondary)', lineHeight: 'var(--zid-line-height-normal)', margin: 0 }}>This is the card description with proper typography settings applied.</p>\n          </div>\n          <pre style={{ background: '#1f0433', color: '#fff', padding: '16px', borderRadius: '8px', fontSize: '13px', margin: 0 }}>\n{`.card-title {\n  font-size: var(--zid-font-size-lg);\n  font-weight: var(--zid-font-weight-semibold);\n}\n\n.card-description {\n  font-size: var(--zid-font-size-sm);\n  line-height: var(--zid-line-height-normal);\n}`}\n          </pre>\n        </div>\n      </div>\n    </div>\n  ),\n};\n"],"names":["jsxs","jsx"],"mappings":"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"}

package/dist/react/cjs/stories/design/spacing/CSS.stories.js

@@ -0,0 +1,61 @@
+"use strict";
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
+const jsxRuntime = require("react/jsx-runtime");
+;/* empty css                      */
+const meta = {
+  title: "Design System/Spacing/CSS",
+  parameters: {
+    layout: "fullscreen"
+  },
+  tags: ["autodocs"]
+};
+const spacingTokens = [
+  { name: "0", px: "0px" },
+  { name: "0-25", px: "2px" },
+  { name: "0-5", px: "4px" },
+  { name: "0-75", px: "6px" },
+  { name: "1", px: "8px" },
+  { name: "1-5", px: "12px" },
+  { name: "2", px: "16px" },
+  { name: "2-5", px: "20px" },
+  { name: "3", px: "24px" },
+  { name: "3-5", px: "28px" },
+  { name: "4", px: "32px" },
+  { name: "5", px: "40px" },
+  { name: "6", px: "48px" },
+  { name: "7", px: "56px" },
+  { name: "8", px: "64px" },
+  { name: "9", px: "72px" },
+  { name: "10", px: "80px" },
+  { name: "11", px: "88px" },
+  { name: "12", px: "96px" }
+];
+const SpacingScale = {
+  render: () => /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { padding: "24px", maxWidth: "900px", fontFamily: "var(--zid-font-family)" }, children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { marginBottom: "32px" }, children: [
+      /* @__PURE__ */ jsxRuntime.jsx("h2", { style: { marginBottom: "8px" }, children: "CSS Spacing Scale" }),
+      /* @__PURE__ */ jsxRuntime.jsxs("p", { style: { color: "var(--zid-text-secondary)", marginBottom: "8px" }, children: [
+        /* @__PURE__ */ jsxRuntime.jsx("strong", { children: "How to use in CSS:" }),
+        " ",
+        /* @__PURE__ */ jsxRuntime.jsx("code", { children: "var(--zid-spacing-{value})" })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", alignItems: "center", gap: "16px", padding: "12px 0", borderBottom: "2px solid var(--zid-divider)", fontWeight: 600, fontSize: "14px" }, children: [
+      /* @__PURE__ */ jsxRuntime.jsx("div", { style: { width: "80px" }, children: "Token" }),
+      /* @__PURE__ */ jsxRuntime.jsx("div", { style: { width: "60px" }, children: "Value" }),
+      /* @__PURE__ */ jsxRuntime.jsx("div", { style: { flex: 1 }, children: "Preview (gap between boxes)" })
+    ] }),
+    spacingTokens.map((token) => /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", alignItems: "center", gap: "16px", padding: "12px 0", borderBottom: "1px solid var(--zid-divider)" }, children: [
+      /* @__PURE__ */ jsxRuntime.jsx("div", { style: { width: "80px", fontFamily: "monospace", fontSize: "14px" }, children: token.name }),
+      /* @__PURE__ */ jsxRuntime.jsx("div", { style: { width: "60px", color: "var(--zid-text-secondary)", fontSize: "14px" }, children: token.px }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { flex: 1, display: "flex", gap: token.px }, children: [
+        /* @__PURE__ */ jsxRuntime.jsx("div", { style: { width: "40px", height: "40px", backgroundColor: "var(--zid-primary-main)", borderRadius: "4px" } }),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { style: { width: "40px", height: "40px", backgroundColor: "var(--zid-primary-main)", borderRadius: "4px" } }),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { style: { width: "40px", height: "40px", backgroundColor: "var(--zid-primary-main)", borderRadius: "4px" } })
+      ] })
+    ] }, token.name))
+  ] })
+};
+exports.SpacingScale = SpacingScale;
+exports.default = meta;
+//# sourceMappingURL=CSS.stories.js.map

package/dist/react/cjs/stories/design/spacing/CSS.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CSS.stories.js","sources":["../../../../../../src/stories/design/spacing/CSS.stories.tsx"],"sourcesContent":["import type { Meta, StoryObj } from '@storybook/react-vite';\nimport '../../../css/index.css';\n\n//\n//\n\nconst meta = {\n  title: 'Design System/Spacing/CSS',\n  parameters: {\n    layout: 'fullscreen',\n  },\n  tags: ['autodocs'],\n} satisfies Meta;\n\nexport default meta;\ntype Story = StoryObj<typeof meta>;\n\n//\n// CSS Spacing Tokens\n//\n\nconst spacingTokens = [\n  { name: '0', px: '0px' },\n  { name: '0-25', px: '2px' },\n  { name: '0-5', px: '4px' },\n  { name: '0-75', px: '6px' },\n  { name: '1', px: '8px' },\n  { name: '1-5', px: '12px' },\n  { name: '2', px: '16px' },\n  { name: '2-5', px: '20px' },\n  { name: '3', px: '24px' },\n  { name: '3-5', px: '28px' },\n  { name: '4', px: '32px' },\n  { name: '5', px: '40px' },\n  { name: '6', px: '48px' },\n  { name: '7', px: '56px' },\n  { name: '8', px: '64px' },\n  { name: '9', px: '72px' },\n  { name: '10', px: '80px' },\n  { name: '11', px: '88px' },\n  { name: '12', px: '96px' },\n];\n\nexport const SpacingScale: Story = {\n  render: () => (\n    <div style={{ padding: '24px', maxWidth: '900px', fontFamily: 'var(--zid-font-family)' }}>\n      <div style={{ marginBottom: '32px' }}>\n        <h2 style={{ marginBottom: '8px' }}>CSS Spacing Scale</h2>\n        <p style={{ color: 'var(--zid-text-secondary)', marginBottom: '8px' }}>\n          <strong>How to use in CSS:</strong> <code>var(--zid-spacing-&#123;value&#125;)</code>\n        </p>\n      </div>\n      <div style={{ display: 'flex', alignItems: 'center', gap: '16px', padding: '12px 0', borderBottom: '2px solid var(--zid-divider)', fontWeight: 600, fontSize: '14px' }}>\n        <div style={{ width: '80px' }}>Token</div>\n        <div style={{ width: '60px' }}>Value</div>\n        <div style={{ flex: 1 }}>Preview (gap between boxes)</div>\n      </div>\n      {spacingTokens.map(token => (\n        <div key={token.name} style={{ display: 'flex', alignItems: 'center', gap: '16px', padding: '12px 0', borderBottom: '1px solid var(--zid-divider)' }}>\n          <div style={{ width: '80px', fontFamily: 'monospace', fontSize: '14px' }}>{token.name}</div>\n          <div style={{ width: '60px', color: 'var(--zid-text-secondary)', fontSize: '14px' }}>{token.px}</div>\n          <div style={{ flex: 1, display: 'flex', gap: token.px }}>\n            <div style={{ width: '40px', height: '40px', backgroundColor: 'var(--zid-primary-main)', borderRadius: '4px' }}></div>\n            <div style={{ width: '40px', height: '40px', backgroundColor: 'var(--zid-primary-main)', borderRadius: '4px' }}></div>\n            <div style={{ width: '40px', height: '40px', backgroundColor: 'var(--zid-primary-main)', borderRadius: '4px' }}></div>\n          </div>\n        </div>\n      ))}\n    </div>\n  ),\n};\n"],"names":["jsxs","jsx"],"mappings":"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"}

package/dist/react/cjs/stories/design/{Spacing.stories.js → spacing/React.stories.js}

@@ -3,14 +3,14 @@ Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toString
 const jsxRuntime = require("react/jsx-runtime");
 const material = require("@mui/material");
 const React = require("react");
-const stackColumn = require("../../components/stack-column.js");
-const stackRow = require("../../components/stack-row.js");
-const appTooltip = require("../../components/app-tooltip.js");
-const fileCopyLine = require("../../icons/document/file-copy-line.js");
-const checkLine = require("../../icons/system/check-line.js");
-const appTypography = require("../../components/app-typography.js");
+const stackColumn = require("../../../components/stack-column.js");
+const stackRow = require("../../../components/stack-row.js");
+const appTooltip = require("../../../components/app-tooltip.js");
+const fileCopyLine = require("../../../icons/document/file-copy-line.js");
+const checkLine = require("../../../icons/system/check-line.js");
+const appTypography = require("../../../components/app-typography.js");
 const meta = {
-  title: "Design System/Spacing",
+  title: "Design System/Spacing/React",
   parameters: {
     layout: "centered"
   },
@@ -99,4 +99,4 @@ const StackColumnSpacing = {
 exports.StackColumnSpacing = StackColumnSpacing;
 exports.StackRowSpacing = StackRowSpacing;
 exports.default = meta;
-//# sourceMappingURL=Spacing.stories.js.map
+//# sourceMappingURL=React.stories.js.map

package/dist/react/cjs/stories/design/spacing/React.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"React.stories.js","sources":["../../../../../../src/stories/design/spacing/React.stories.tsx"],"sourcesContent":["import type { Meta, StoryObj } from '@storybook/react-vite';\nimport { Box, IconButton } from '@mui/material';\nimport { useState } from 'react';\nimport { StackColumn } from '~/components/stack-column';\nimport { StackRow } from '~/components/stack-row';\nimport { AppTooltip } from '~/components/app-tooltip';\nimport { IconFileCopyLine } from '~/icons/document/file-copy-line';\nimport { IconCheckLine } from '~/icons/system/check-line';\nimport { AppTypography } from '~/components/app-typography';\n\n//\n//\n\nconst meta = {\n  title: 'Design System/Spacing/React',\n  parameters: {\n    layout: 'centered',\n  },\n  tags: ['autodocs'],\n} satisfies Meta;\n\nexport default meta;\ntype Story = StoryObj<typeof meta>;\n\nconst DemoBox = ({ color = '#1976d2' }: { color?: string }) => (\n  <Box\n    sx={{\n      width: 60,\n      height: 60,\n      backgroundColor: color,\n      borderRadius: 1,\n      display: 'flex',\n      alignItems: 'center',\n      justifyContent: 'center',\n      color: 'white',\n      fontSize: '12px',\n      fontWeight: 'bold',\n    }}\n  >\n    Box\n  </Box>\n);\n\nconst CopyButton = ({ value }: { value: number | string }) => {\n  const [copied, setCopied] = useState(false);\n\n  const handleCopy = () => {\n    navigator.clipboard.writeText(`gap={${value}}`);\n    setCopied(true);\n    setTimeout(() => setCopied(false), 2000);\n  };\n\n  return (\n    <AppTooltip description={copied ? 'Copied!' : 'Copy'}>\n      <IconButton size=\"small\" onClick={handleCopy}>\n        {copied ? <IconCheckLine fontSize=\"small\" /> : <IconFileCopyLine fontSize=\"small\" />}\n      </IconButton>\n    </AppTooltip>\n  );\n};\n\nconst spacingValues = [\n  1, 1.25, 1.5, 1.75, 2, 2.25, 2.5, 2.75, 3, 3.25, 3.5, 3.75, 4, 4.25, 4.5, 4.75, 5,\n];\n\nexport const StackRowSpacing: Story = {\n  render: () => (\n    <StackColumn gap={3}>\n      {spacingValues.map(spacing => (\n        <StackColumn key={`row-${spacing}`} gap={0.75}>\n          <StackRow gap={0}>\n            <AppTypography variant=\"subtitle1\" minWidth={60}>\n              Gap: {spacing}\n            </AppTypography>\n            <CopyButton value={spacing} />\n          </StackRow>\n\n          <StackRow gap={spacing}>\n            <DemoBox />\n            <DemoBox />\n            <DemoBox />\n            <DemoBox />\n          </StackRow>\n        </StackColumn>\n      ))}\n    </StackColumn>\n  ),\n};\n\nexport const StackColumnSpacing: Story = {\n  render: () => (\n    <StackColumn gap={3}>\n      {spacingValues.map(spacing => (\n        <StackColumn key={`col-${spacing}`} gap={0.75}>\n          <StackRow gap={0}>\n            <AppTypography variant=\"subtitle1\" minWidth={60}>\n              Gap: {spacing}\n            </AppTypography>\n            <CopyButton value={spacing} />\n          </StackRow>\n          <StackColumn gap={spacing}>\n            <DemoBox color=\"#dc3545\" />\n            <DemoBox color=\"#dc3545\" />\n            <DemoBox color=\"#dc3545\" />\n            <DemoBox color=\"#dc3545\" />\n          </StackColumn>\n        </StackColumn>\n      ))}\n    </StackColumn>\n  ),\n};\n"],"names":["jsx","Box","useState","AppTooltip","IconButton","IconCheckLine","IconFileCopyLine","StackColumn","jsxs","StackRow","AppTypography"],"mappings":"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"}

package/dist/react/cjs/stories/react/AppCheckbox.stories.js

@@ -0,0 +1,67 @@
+"use strict";
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
+const jsxRuntime = require("react/jsx-runtime");
+const React = require("react");
+const appCheckbox = require("../../components/app-checkbox.js");
+const meta = {
+  title: "React/App Checkbox",
+  component: appCheckbox.AppCheckbox,
+  parameters: {
+    layout: "centered"
+  },
+  tags: ["autodocs"],
+  argTypes: {
+    label: {
+      control: "text"
+    },
+    checked: {
+      control: "boolean"
+    },
+    disabled: {
+      control: "boolean"
+    }
+  },
+  args: {
+    label: "Checkbox label",
+    checked: false,
+    disabled: false
+  }
+};
+const Default = {
+  args: {
+    label: "Default checkbox"
+  }
+};
+const Checked = {
+  args: {
+    label: "Checked checkbox",
+    checked: true
+  }
+};
+const Disabled = {
+  args: {
+    label: "Disabled checkbox",
+    disabled: true
+  }
+};
+const DisabledChecked = {
+  args: {
+    label: "Disabled checked",
+    checked: true,
+    disabled: true
+  }
+};
+const InteractiveComponent = () => {
+  const [checked, setChecked] = React.useState(false);
+  return /* @__PURE__ */ jsxRuntime.jsx(appCheckbox.AppCheckbox, { label: "Click me", checked, onChange: (_, value) => setChecked(value) });
+};
+const Interactive = {
+  render: () => /* @__PURE__ */ jsxRuntime.jsx(InteractiveComponent, {})
+};
+exports.Checked = Checked;
+exports.Default = Default;
+exports.Disabled = Disabled;
+exports.DisabledChecked = DisabledChecked;
+exports.Interactive = Interactive;
+exports.default = meta;
+//# sourceMappingURL=AppCheckbox.stories.js.map

package/dist/react/cjs/stories/react/AppCheckbox.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AppCheckbox.stories.js","sources":["../../../../../src/stories/react/AppCheckbox.stories.tsx"],"sourcesContent":["import { useState } from 'react';\n\nimport type { Meta, StoryObj } from '@storybook/react-vite';\nimport { AppCheckbox } from '~/components/app-checkbox';\n\n//\n//\n\n// Meta\nconst meta = {\n  title: 'React/App Checkbox',\n  component: AppCheckbox,\n  parameters: {\n    layout: 'centered',\n  },\n  tags: ['autodocs'],\n  argTypes: {\n    label: {\n      control: 'text',\n    },\n    checked: {\n      control: 'boolean',\n    },\n    disabled: {\n      control: 'boolean',\n    },\n  },\n  args: {\n    label: 'Checkbox label',\n    checked: false,\n    disabled: false,\n  },\n} satisfies Meta<typeof AppCheckbox>;\n\nexport default meta;\ntype Story = StoryObj<typeof meta>;\n\n//\n\nexport const Default: Story = {\n  args: {\n    label: 'Default checkbox',\n  },\n};\n\n//\n\nexport const Checked: Story = {\n  args: {\n    label: 'Checked checkbox',\n    checked: true,\n  },\n};\n\n//\n\nexport const Disabled: Story = {\n  args: {\n    label: 'Disabled checkbox',\n    disabled: true,\n  },\n};\n\n//\n\nexport const DisabledChecked: Story = {\n  args: {\n    label: 'Disabled checked',\n    checked: true,\n    disabled: true,\n  },\n};\n\n//\n\nconst InteractiveComponent = () => {\n  const [checked, setChecked] = useState(false);\n\n  return (\n    <AppCheckbox label=\"Click me\" checked={checked} onChange={(_, value) => setChecked(value)} />\n  );\n};\n\nexport const Interactive: Story = {\n  render: () => <InteractiveComponent />,\n};\n"],"names":["AppCheckbox","useState","jsx"],"mappings":";;;;;AASA,MAAM,OAAO;AAAA,EACX,OAAO;AAAA,EACP,WAAWA,YAAAA;AAAAA,EACX,YAAY;AAAA,IACV,QAAQ;AAAA,EAAA;AAAA,EAEV,MAAM,CAAC,UAAU;AAAA,EACjB,UAAU;AAAA,IACR,OAAO;AAAA,MACL,SAAS;AAAA,IAAA;AAAA,IAEX,SAAS;AAAA,MACP,SAAS;AAAA,IAAA;AAAA,IAEX,UAAU;AAAA,MACR,SAAS;AAAA,IAAA;AAAA,EACX;AAAA,EAEF,MAAM;AAAA,IACJ,OAAO;AAAA,IACP,SAAS;AAAA,IACT,UAAU;AAAA,EAAA;AAEd;AAOO,MAAM,UAAiB;AAAA,EAC5B,MAAM;AAAA,IACJ,OAAO;AAAA,EAAA;AAEX;AAIO,MAAM,UAAiB;AAAA,EAC5B,MAAM;AAAA,IACJ,OAAO;AAAA,IACP,SAAS;AAAA,EAAA;AAEb;AAIO,MAAM,WAAkB;AAAA,EAC7B,MAAM;AAAA,IACJ,OAAO;AAAA,IACP,UAAU;AAAA,EAAA;AAEd;AAIO,MAAM,kBAAyB;AAAA,EACpC,MAAM;AAAA,IACJ,OAAO;AAAA,IACP,SAAS;AAAA,IACT,UAAU;AAAA,EAAA;AAEd;AAIA,MAAM,uBAAuB,MAAM;AACjC,QAAM,CAAC,SAAS,UAAU,IAAIC,MAAAA,SAAS,KAAK;AAE5C,SACEC,2BAAAA,IAACF,YAAAA,aAAA,EAAY,OAAM,YAAW,SAAkB,UAAU,CAAC,GAAG,UAAU,WAAW,KAAK,EAAA,CAAG;AAE/F;AAEO,MAAM,cAAqB;AAAA,EAChC,QAAQ,MAAME,+BAAC,sBAAA,CAAA,CAAqB;AACtC;;;;;;;"}

package/dist/react/cjs/stories/react/AppDialog.stories.js

@@ -0,0 +1,129 @@
+"use strict";
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
+const jsxRuntime = require("react/jsx-runtime");
+const React = require("react");
+const appDialog = require("../../components/app-dialog.js");
+const appButton = require("../../components/app-button.js");
+const appTypography = require("../../components/app-typography.js");
+const meta = {
+  title: "React/App Dialog",
+  component: appDialog.AppDialog,
+  parameters: {
+    layout: "centered"
+  },
+  tags: ["autodocs"],
+  argTypes: {
+    title: {
+      control: "text"
+    },
+    description: {
+      control: "text"
+    },
+    maxWidth: {
+      control: "select",
+      options: ["xs", "sm", "md", "lg", "xl"]
+    },
+    darkerBackdrop: {
+      control: "boolean"
+    }
+  }
+};
+const DefaultComponent = () => {
+  const [open, setOpen] = React.useState(false);
+  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(appButton.AppButton, { onClick: () => setOpen(true), children: "Open Dialog" }),
+    /* @__PURE__ */ jsxRuntime.jsx(appDialog.AppDialog, { open, onClose: () => setOpen(false), children: /* @__PURE__ */ jsxRuntime.jsx(appTypography.AppTypography, { children: "Dialog content goes here." }) })
+  ] });
+};
+const Default = {
+  args: {
+    open: false,
+    children: null
+  },
+  render: () => /* @__PURE__ */ jsxRuntime.jsx(DefaultComponent, {})
+};
+const WithTitleComponent = () => {
+  const [open, setOpen] = React.useState(false);
+  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(appButton.AppButton, { onClick: () => setOpen(true), children: "Open Dialog" }),
+    /* @__PURE__ */ jsxRuntime.jsx(appDialog.AppDialog, { open, onClose: () => setOpen(false), title: "Dialog Title", children: /* @__PURE__ */ jsxRuntime.jsx(appTypography.AppTypography, { children: "Dialog content with title." }) })
+  ] });
+};
+const WithTitle = {
+  args: {
+    open: false,
+    children: null
+  },
+  render: () => /* @__PURE__ */ jsxRuntime.jsx(WithTitleComponent, {})
+};
+const WithTitleAndDescriptionComponent = () => {
+  const [open, setOpen] = React.useState(false);
+  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(appButton.AppButton, { onClick: () => setOpen(true), children: "Open Dialog" }),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      appDialog.AppDialog,
+      {
+        open,
+        onClose: () => setOpen(false),
+        title: "Dialog Title",
+        description: "This is a description that provides more context about the dialog.",
+        children: /* @__PURE__ */ jsxRuntime.jsx(appTypography.AppTypography, { children: "Dialog content with title and description." })
+      }
+    )
+  ] });
+};
+const WithTitleAndDescription = {
+  args: {
+    open: false,
+    children: null
+  },
+  render: () => /* @__PURE__ */ jsxRuntime.jsx(WithTitleAndDescriptionComponent, {})
+};
+const WithActionsComponent = () => {
+  const [open, setOpen] = React.useState(false);
+  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(appButton.AppButton, { onClick: () => setOpen(true), children: "Open Dialog" }),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      appDialog.AppDialog,
+      {
+        open,
+        onClose: () => setOpen(false),
+        title: "Confirm Action",
+        description: "Are you sure you want to proceed?",
+        actions: /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+          /* @__PURE__ */ jsxRuntime.jsx(appButton.AppButton, { variant: "outlined", color: "secondary", onClick: () => setOpen(false), children: "Cancel" }),
+          /* @__PURE__ */ jsxRuntime.jsx(appButton.AppButton, { variant: "contained", color: "primary", onClick: () => setOpen(false), children: "Confirm" })
+        ] }),
+        children: /* @__PURE__ */ jsxRuntime.jsx(appTypography.AppTypography, { children: "This action cannot be undone." })
+      }
+    )
+  ] });
+};
+const WithActions = {
+  args: {
+    open: false,
+    children: null
+  },
+  render: () => /* @__PURE__ */ jsxRuntime.jsx(WithActionsComponent, {})
+};
+const DarkerBackdropComponent = () => {
+  const [open, setOpen] = React.useState(false);
+  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(appButton.AppButton, { onClick: () => setOpen(true), children: "Open Dialog" }),
+    /* @__PURE__ */ jsxRuntime.jsx(appDialog.AppDialog, { open, onClose: () => setOpen(false), title: "Darker Backdrop", darkerBackdrop: true, children: /* @__PURE__ */ jsxRuntime.jsx(appTypography.AppTypography, { children: "This dialog has a darker backdrop." }) })
+  ] });
+};
+const DarkerBackdrop = {
+  args: {
+    open: false,
+    children: null
+  },
+  render: () => /* @__PURE__ */ jsxRuntime.jsx(DarkerBackdropComponent, {})
+};
+exports.DarkerBackdrop = DarkerBackdrop;
+exports.Default = Default;
+exports.WithActions = WithActions;
+exports.WithTitle = WithTitle;
+exports.WithTitleAndDescription = WithTitleAndDescription;
+exports.default = meta;
+//# sourceMappingURL=AppDialog.stories.js.map

package/dist/react/cjs/stories/react/AppDialog.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AppDialog.stories.js","sources":["../../../../../src/stories/react/AppDialog.stories.tsx"],"sourcesContent":["import { useState } from 'react';\n\nimport type { Meta, StoryObj } from '@storybook/react-vite';\n\nimport { AppDialog } from '~/components/app-dialog';\nimport { AppButton } from '~/components/app-button';\nimport { AppTypography } from '~/components/app-typography';\n\n//\n//\n\n// Meta\nconst meta = {\n  title: 'React/App Dialog',\n  component: AppDialog,\n  parameters: {\n    layout: 'centered',\n  },\n  tags: ['autodocs'],\n  argTypes: {\n    title: {\n      control: 'text',\n    },\n    description: {\n      control: 'text',\n    },\n    maxWidth: {\n      control: 'select',\n      options: ['xs', 'sm', 'md', 'lg', 'xl'],\n    },\n    darkerBackdrop: {\n      control: 'boolean',\n    },\n  },\n} satisfies Meta<typeof AppDialog>;\n\nexport default meta;\ntype Story = StoryObj<typeof meta>;\n\n//\n\nconst DefaultComponent = () => {\n  const [open, setOpen] = useState(false);\n\n  return (\n    <>\n      <AppButton onClick={() => setOpen(true)}>Open Dialog</AppButton>\n      <AppDialog open={open} onClose={() => setOpen(false)}>\n        <AppTypography>Dialog content goes here.</AppTypography>\n      </AppDialog>\n    </>\n  );\n};\n\nexport const Default: Story = {\n  args: {\n    open: false,\n    children: null,\n  },\n  render: () => <DefaultComponent />,\n};\n\n//\n\nconst WithTitleComponent = () => {\n  const [open, setOpen] = useState(false);\n\n  return (\n    <>\n      <AppButton onClick={() => setOpen(true)}>Open Dialog</AppButton>\n      <AppDialog open={open} onClose={() => setOpen(false)} title=\"Dialog Title\">\n        <AppTypography>Dialog content with title.</AppTypography>\n      </AppDialog>\n    </>\n  );\n};\n\nexport const WithTitle: Story = {\n  args: {\n    open: false,\n    children: null,\n  },\n  render: () => <WithTitleComponent />,\n};\n\n//\n\nconst WithTitleAndDescriptionComponent = () => {\n  const [open, setOpen] = useState(false);\n\n  return (\n    <>\n      <AppButton onClick={() => setOpen(true)}>Open Dialog</AppButton>\n      <AppDialog\n        open={open}\n        onClose={() => setOpen(false)}\n        title=\"Dialog Title\"\n        description=\"This is a description that provides more context about the dialog.\"\n      >\n        <AppTypography>Dialog content with title and description.</AppTypography>\n      </AppDialog>\n    </>\n  );\n};\n\nexport const WithTitleAndDescription: Story = {\n  args: {\n    open: false,\n    children: null,\n  },\n  render: () => <WithTitleAndDescriptionComponent />,\n};\n\n//\n\nconst WithActionsComponent = () => {\n  const [open, setOpen] = useState(false);\n\n  return (\n    <>\n      <AppButton onClick={() => setOpen(true)}>Open Dialog</AppButton>\n      <AppDialog\n        open={open}\n        onClose={() => setOpen(false)}\n        title=\"Confirm Action\"\n        description=\"Are you sure you want to proceed?\"\n        actions={\n          <>\n            <AppButton variant=\"outlined\" color=\"secondary\" onClick={() => setOpen(false)}>\n              Cancel\n            </AppButton>\n            <AppButton variant=\"contained\" color=\"primary\" onClick={() => setOpen(false)}>\n              Confirm\n            </AppButton>\n          </>\n        }\n      >\n        <AppTypography>This action cannot be undone.</AppTypography>\n      </AppDialog>\n    </>\n  );\n};\n\nexport const WithActions: Story = {\n  args: {\n    open: false,\n    children: null,\n  },\n  render: () => <WithActionsComponent />,\n};\n\n//\n\nconst DarkerBackdropComponent = () => {\n  const [open, setOpen] = useState(false);\n\n  return (\n    <>\n      <AppButton onClick={() => setOpen(true)}>Open Dialog</AppButton>\n      <AppDialog open={open} onClose={() => setOpen(false)} title=\"Darker Backdrop\" darkerBackdrop>\n        <AppTypography>This dialog has a darker backdrop.</AppTypography>\n      </AppDialog>\n    </>\n  );\n};\n\nexport const DarkerBackdrop: Story = {\n  args: {\n    open: false,\n    children: null,\n  },\n  render: () => <DarkerBackdropComponent />,\n};\n"],"names":["AppDialog","useState","jsxs","Fragment","jsx","AppButton","AppTypography"],"mappings":";;;;;;;AAYA,MAAM,OAAO;AAAA,EACX,OAAO;AAAA,EACP,WAAWA,UAAAA;AAAAA,EACX,YAAY;AAAA,IACV,QAAQ;AAAA,EAAA;AAAA,EAEV,MAAM,CAAC,UAAU;AAAA,EACjB,UAAU;AAAA,IACR,OAAO;AAAA,MACL,SAAS;AAAA,IAAA;AAAA,IAEX,aAAa;AAAA,MACX,SAAS;AAAA,IAAA;AAAA,IAEX,UAAU;AAAA,MACR,SAAS;AAAA,MACT,SAAS,CAAC,MAAM,MAAM,MAAM,MAAM,IAAI;AAAA,IAAA;AAAA,IAExC,gBAAgB;AAAA,MACd,SAAS;AAAA,IAAA;AAAA,EACX;AAEJ;AAOA,MAAM,mBAAmB,MAAM;AAC7B,QAAM,CAAC,MAAM,OAAO,IAAIC,MAAAA,SAAS,KAAK;AAEtC,SACEC,2BAAAA,KAAAC,qBAAA,EACE,UAAA;AAAA,IAAAC,+BAACC,UAAAA,aAAU,SAAS,MAAM,QAAQ,IAAI,GAAG,UAAA,eAAW;AAAA,IACpDD,2BAAAA,IAACJ,UAAAA,WAAA,EAAU,MAAY,SAAS,MAAM,QAAQ,KAAK,GACjD,UAAAI,2BAAAA,IAACE,cAAAA,eAAA,EAAc,UAAA,4BAAA,CAAyB,EAAA,CAC1C;AAAA,EAAA,GACF;AAEJ;AAEO,MAAM,UAAiB;AAAA,EAC5B,MAAM;AAAA,IACJ,MAAM;AAAA,IACN,UAAU;AAAA,EAAA;AAAA,EAEZ,QAAQ,MAAMF,+BAAC,kBAAA,CAAA,CAAiB;AAClC;AAIA,MAAM,qBAAqB,MAAM;AAC/B,QAAM,CAAC,MAAM,OAAO,IAAIH,MAAAA,SAAS,KAAK;AAEtC,SACEC,2BAAAA,KAAAC,qBAAA,EACE,UAAA;AAAA,IAAAC,+BAACC,UAAAA,aAAU,SAAS,MAAM,QAAQ,IAAI,GAAG,UAAA,eAAW;AAAA,IACpDD,2BAAAA,IAACJ,UAAAA,WAAA,EAAU,MAAY,SAAS,MAAM,QAAQ,KAAK,GAAG,OAAM,gBAC1D,UAAAI,+BAACE,cAAAA,eAAA,EAAc,wCAA0B,EAAA,CAC3C;AAAA,EAAA,GACF;AAEJ;AAEO,MAAM,YAAmB;AAAA,EAC9B,MAAM;AAAA,IACJ,MAAM;AAAA,IACN,UAAU;AAAA,EAAA;AAAA,EAEZ,QAAQ,MAAMF,+BAAC,oBAAA,CAAA,CAAmB;AACpC;AAIA,MAAM,mCAAmC,MAAM;AAC7C,QAAM,CAAC,MAAM,OAAO,IAAIH,MAAAA,SAAS,KAAK;AAEtC,SACEC,2BAAAA,KAAAC,qBAAA,EACE,UAAA;AAAA,IAAAC,+BAACC,UAAAA,aAAU,SAAS,MAAM,QAAQ,IAAI,GAAG,UAAA,eAAW;AAAA,IACpDD,2BAAAA;AAAAA,MAACJ,UAAAA;AAAAA,MAAA;AAAA,QACC;AAAA,QACA,SAAS,MAAM,QAAQ,KAAK;AAAA,QAC5B,OAAM;AAAA,QACN,aAAY;AAAA,QAEZ,UAAAI,2BAAAA,IAACE,cAAAA,iBAAc,UAAA,6CAAA,CAA0C;AAAA,MAAA;AAAA,IAAA;AAAA,EAC3D,GACF;AAEJ;AAEO,MAAM,0BAAiC;AAAA,EAC5C,MAAM;AAAA,IACJ,MAAM;AAAA,IACN,UAAU;AAAA,EAAA;AAAA,EAEZ,QAAQ,MAAMF,+BAAC,kCAAA,CAAA,CAAiC;AAClD;AAIA,MAAM,uBAAuB,MAAM;AACjC,QAAM,CAAC,MAAM,OAAO,IAAIH,MAAAA,SAAS,KAAK;AAEtC,SACEC,2BAAAA,KAAAC,qBAAA,EACE,UAAA;AAAA,IAAAC,+BAACC,UAAAA,aAAU,SAAS,MAAM,QAAQ,IAAI,GAAG,UAAA,eAAW;AAAA,IACpDD,2BAAAA;AAAAA,MAACJ,UAAAA;AAAAA,MAAA;AAAA,QACC;AAAA,QACA,SAAS,MAAM,QAAQ,KAAK;AAAA,QAC5B,OAAM;AAAA,QACN,aAAY;AAAA,QACZ,SACEE,2BAAAA,KAAAC,qBAAA,EACE,UAAA;AAAA,UAAAC,2BAAAA,IAACC,UAAAA,WAAA,EAAU,SAAQ,YAAW,OAAM,aAAY,SAAS,MAAM,QAAQ,KAAK,GAAG,UAAA,SAAA,CAE/E;AAAA,UACAD,2BAAAA,IAACC,UAAAA,WAAA,EAAU,SAAQ,aAAY,OAAM,WAAU,SAAS,MAAM,QAAQ,KAAK,GAAG,UAAA,UAAA,CAE9E;AAAA,QAAA,GACF;AAAA,QAGF,UAAAD,2BAAAA,IAACE,cAAAA,iBAAc,UAAA,gCAAA,CAA6B;AAAA,MAAA;AAAA,IAAA;AAAA,EAC9C,GACF;AAEJ;AAEO,MAAM,cAAqB;AAAA,EAChC,MAAM;AAAA,IACJ,MAAM;AAAA,IACN,UAAU;AAAA,EAAA;AAAA,EAEZ,QAAQ,MAAMF,+BAAC,sBAAA,CAAA,CAAqB;AACtC;AAIA,MAAM,0BAA0B,MAAM;AACpC,QAAM,CAAC,MAAM,OAAO,IAAIH,MAAAA,SAAS,KAAK;AAEtC,SACEC,2BAAAA,KAAAC,qBAAA,EACE,UAAA;AAAA,IAAAC,+BAACC,UAAAA,aAAU,SAAS,MAAM,QAAQ,IAAI,GAAG,UAAA,eAAW;AAAA,IACpDD,2BAAAA,IAACJ,UAAAA,WAAA,EAAU,MAAY,SAAS,MAAM,QAAQ,KAAK,GAAG,OAAM,mBAAkB,gBAAc,MAC1F,UAAAI,2BAAAA,IAACE,cAAAA,eAAA,EAAc,gDAAkC,EAAA,CACnD;AAAA,EAAA,GACF;AAEJ;AAEO,MAAM,iBAAwB;AAAA,EACnC,MAAM;AAAA,IACJ,MAAM;AAAA,IACN,UAAU;AAAA,EAAA;AAAA,EAEZ,QAAQ,MAAMF,+BAAC,yBAAA,CAAA,CAAwB;AACzC;;;;;;;"}

package/dist/react/cjs/stories/react/AppDialogWithFeatures.stories.js

@@ -0,0 +1,127 @@
+"use strict";
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
+const jsxRuntime = require("react/jsx-runtime");
+const React = require("react");
+const appDialogWithFeatures = require("../../components/app-dialog-with-features.js");
+const appButton = require("../../components/app-button.js");
+const appTypography = require("../../components/app-typography.js");
+const meta = {
+  title: "React/App Dialog With Features",
+  component: appDialogWithFeatures.AppDialogWithFeatures,
+  parameters: {
+    layout: "centered"
+  },
+  tags: ["autodocs"],
+  argTypes: {
+    title: {
+      control: "text"
+    },
+    isLoading: {
+      control: "boolean"
+    }
+  }
+};
+const DefaultComponent = () => {
+  const [open, setOpen] = React.useState(false);
+  const [search, setSearch] = React.useState("");
+  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(appButton.AppButton, { onClick: () => setOpen(true), children: "Open Dialog" }),
+    /* @__PURE__ */ jsxRuntime.jsxs(
+      appDialogWithFeatures.AppDialogWithFeatures,
+      {
+        open,
+        onClose: () => setOpen(false),
+        title: "Select Item",
+        search,
+        onSearchChange: setSearch,
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx(appTypography.AppTypography, { children: "Item One" }),
+          /* @__PURE__ */ jsxRuntime.jsx(appTypography.AppTypography, { children: "Item Two" }),
+          /* @__PURE__ */ jsxRuntime.jsx(appTypography.AppTypography, { children: "Item Three" }),
+          /* @__PURE__ */ jsxRuntime.jsx(appTypography.AppTypography, { children: "Item Four" })
+        ]
+      }
+    )
+  ] });
+};
+const Default = {
+  args: {
+    open: false,
+    onClose: () => {
+    },
+    search: "",
+    children: null
+  },
+  render: () => /* @__PURE__ */ jsxRuntime.jsx(DefaultComponent, {})
+};
+const WithPaginationComponent = () => {
+  const [open, setOpen] = React.useState(false);
+  const [search, setSearch] = React.useState("");
+  const [page, setPage] = React.useState(1);
+  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(appButton.AppButton, { onClick: () => setOpen(true), children: "Open Dialog" }),
+    /* @__PURE__ */ jsxRuntime.jsxs(
+      appDialogWithFeatures.AppDialogWithFeatures,
+      {
+        open,
+        onClose: () => setOpen(false),
+        title: "Select Item",
+        search,
+        onSearchChange: setSearch,
+        pagination: {
+          count: 5,
+          page,
+          onChange: (_, newPage) => setPage(newPage)
+        },
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx(appTypography.AppTypography, { children: "Item One" }),
+          /* @__PURE__ */ jsxRuntime.jsx(appTypography.AppTypography, { children: "Item Two" }),
+          /* @__PURE__ */ jsxRuntime.jsx(appTypography.AppTypography, { children: "Item Three" }),
+          /* @__PURE__ */ jsxRuntime.jsx(appTypography.AppTypography, { children: "Item Four" })
+        ]
+      }
+    )
+  ] });
+};
+const WithPagination = {
+  args: {
+    open: false,
+    onClose: () => {
+    },
+    search: "",
+    children: null
+  },
+  render: () => /* @__PURE__ */ jsxRuntime.jsx(WithPaginationComponent, {})
+};
+const LoadingComponent = () => {
+  const [open, setOpen] = React.useState(false);
+  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(appButton.AppButton, { onClick: () => setOpen(true), children: "Open Dialog" }),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      appDialogWithFeatures.AppDialogWithFeatures,
+      {
+        open,
+        onClose: () => setOpen(false),
+        title: "Loading...",
+        search: "",
+        isLoading: true,
+        children: /* @__PURE__ */ jsxRuntime.jsx(appTypography.AppTypography, { children: "Content" })
+      }
+    )
+  ] });
+};
+const Loading = {
+  args: {
+    open: false,
+    onClose: () => {
+    },
+    search: "",
+    children: null
+  },
+  render: () => /* @__PURE__ */ jsxRuntime.jsx(LoadingComponent, {})
+};
+exports.Default = Default;
+exports.Loading = Loading;
+exports.WithPagination = WithPagination;
+exports.default = meta;
+//# sourceMappingURL=AppDialogWithFeatures.stories.js.map