@zidsa/zidmui 2.0.3 → 2.1.0

package/dist/react/cjs/stories/css/Table.stories.js

@@ -0,0 +1,171 @@
+"use strict";
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
+const jsxRuntime = require("react/jsx-runtime");
+;/* empty css                   */
+const sampleData = [
+  { id: 1, name: "John Doe", email: "john@example.com", status: "Active", role: "Admin" },
+  { id: 2, name: "Jane Smith", email: "jane@example.com", status: "Pending", role: "User" },
+  { id: 3, name: "Bob Johnson", email: "bob@example.com", status: "Inactive", role: "User" },
+  { id: 4, name: "Alice Brown", email: "alice@example.com", status: "Active", role: "Editor" },
+  { id: 5, name: "Charlie Wilson", email: "charlie@example.com", status: "Active", role: "User" }
+];
+const meta = {
+  title: "CSS Styles/Components/Table",
+  parameters: {
+    layout: "padded"
+  },
+  tags: ["autodocs"]
+};
+const Variants = {
+  render: () => /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", flexDirection: "column", gap: "48px" }, children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+      /* @__PURE__ */ jsxRuntime.jsx("h3", { style: { marginBottom: "16px", fontFamily: "var(--zid-font-family)" }, children: "Default" }),
+      /* @__PURE__ */ jsxRuntime.jsxs("table", { className: "zid-table", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("thead", { className: "zid-table__head", children: /* @__PURE__ */ jsxRuntime.jsxs("tr", { className: "zid-table__row", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("th", { className: "zid-table__cell", children: "ID" }),
+          /* @__PURE__ */ jsxRuntime.jsx("th", { className: "zid-table__cell", children: "Name" }),
+          /* @__PURE__ */ jsxRuntime.jsx("th", { className: "zid-table__cell", children: "Email" }),
+          /* @__PURE__ */ jsxRuntime.jsx("th", { className: "zid-table__cell", children: "Status" })
+        ] }) }),
+        /* @__PURE__ */ jsxRuntime.jsx("tbody", { className: "zid-table__body", children: sampleData.slice(0, 4).map((row) => /* @__PURE__ */ jsxRuntime.jsxs("tr", { className: "zid-table__row", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("td", { className: "zid-table__cell", children: row.id }),
+          /* @__PURE__ */ jsxRuntime.jsx("td", { className: "zid-table__cell", children: row.name }),
+          /* @__PURE__ */ jsxRuntime.jsx("td", { className: "zid-table__cell", children: row.email }),
+          /* @__PURE__ */ jsxRuntime.jsx("td", { className: "zid-table__cell", children: row.status })
+        ] }, row.id)) })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+      /* @__PURE__ */ jsxRuntime.jsx("h3", { style: { marginBottom: "16px", fontFamily: "var(--zid-font-family)" }, children: "Striped" }),
+      /* @__PURE__ */ jsxRuntime.jsxs("table", { className: "zid-table zid-table--striped", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("thead", { className: "zid-table__head", children: /* @__PURE__ */ jsxRuntime.jsxs("tr", { className: "zid-table__row", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("th", { className: "zid-table__cell", children: "ID" }),
+          /* @__PURE__ */ jsxRuntime.jsx("th", { className: "zid-table__cell", children: "Name" }),
+          /* @__PURE__ */ jsxRuntime.jsx("th", { className: "zid-table__cell", children: "Email" }),
+          /* @__PURE__ */ jsxRuntime.jsx("th", { className: "zid-table__cell", children: "Status" })
+        ] }) }),
+        /* @__PURE__ */ jsxRuntime.jsx("tbody", { className: "zid-table__body", children: sampleData.slice(0, 4).map((row) => /* @__PURE__ */ jsxRuntime.jsxs("tr", { className: "zid-table__row", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("td", { className: "zid-table__cell", children: row.id }),
+          /* @__PURE__ */ jsxRuntime.jsx("td", { className: "zid-table__cell", children: row.name }),
+          /* @__PURE__ */ jsxRuntime.jsx("td", { className: "zid-table__cell", children: row.email }),
+          /* @__PURE__ */ jsxRuntime.jsx("td", { className: "zid-table__cell", children: row.status })
+        ] }, row.id)) })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+      /* @__PURE__ */ jsxRuntime.jsx("h3", { style: { marginBottom: "16px", fontFamily: "var(--zid-font-family)" }, children: "Bordered" }),
+      /* @__PURE__ */ jsxRuntime.jsxs("table", { className: "zid-table zid-table--bordered", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("thead", { className: "zid-table__head", children: /* @__PURE__ */ jsxRuntime.jsxs("tr", { className: "zid-table__row", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("th", { className: "zid-table__cell", children: "ID" }),
+          /* @__PURE__ */ jsxRuntime.jsx("th", { className: "zid-table__cell", children: "Name" }),
+          /* @__PURE__ */ jsxRuntime.jsx("th", { className: "zid-table__cell", children: "Email" }),
+          /* @__PURE__ */ jsxRuntime.jsx("th", { className: "zid-table__cell", children: "Status" })
+        ] }) }),
+        /* @__PURE__ */ jsxRuntime.jsx("tbody", { className: "zid-table__body", children: sampleData.slice(0, 4).map((row) => /* @__PURE__ */ jsxRuntime.jsxs("tr", { className: "zid-table__row", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("td", { className: "zid-table__cell", children: row.id }),
+          /* @__PURE__ */ jsxRuntime.jsx("td", { className: "zid-table__cell", children: row.name }),
+          /* @__PURE__ */ jsxRuntime.jsx("td", { className: "zid-table__cell", children: row.email }),
+          /* @__PURE__ */ jsxRuntime.jsx("td", { className: "zid-table__cell", children: row.status })
+        ] }, row.id)) })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+      /* @__PURE__ */ jsxRuntime.jsx("h3", { style: { marginBottom: "16px", fontFamily: "var(--zid-font-family)" }, children: "Hoverable" }),
+      /* @__PURE__ */ jsxRuntime.jsxs("table", { className: "zid-table zid-table--hoverable", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("thead", { className: "zid-table__head", children: /* @__PURE__ */ jsxRuntime.jsxs("tr", { className: "zid-table__row", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("th", { className: "zid-table__cell", children: "ID" }),
+          /* @__PURE__ */ jsxRuntime.jsx("th", { className: "zid-table__cell", children: "Name" }),
+          /* @__PURE__ */ jsxRuntime.jsx("th", { className: "zid-table__cell", children: "Email" }),
+          /* @__PURE__ */ jsxRuntime.jsx("th", { className: "zid-table__cell", children: "Status" })
+        ] }) }),
+        /* @__PURE__ */ jsxRuntime.jsx("tbody", { className: "zid-table__body", children: sampleData.slice(0, 4).map((row) => /* @__PURE__ */ jsxRuntime.jsxs("tr", { className: "zid-table__row", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("td", { className: "zid-table__cell", children: row.id }),
+          /* @__PURE__ */ jsxRuntime.jsx("td", { className: "zid-table__cell", children: row.name }),
+          /* @__PURE__ */ jsxRuntime.jsx("td", { className: "zid-table__cell", children: row.email }),
+          /* @__PURE__ */ jsxRuntime.jsx("td", { className: "zid-table__cell", children: row.status })
+        ] }, row.id)) })
+      ] })
+    ] })
+  ] })
+};
+const statusMap = {
+  "Active": /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "zid-status zid-status--success zid-status--sm", children: [
+    /* @__PURE__ */ jsxRuntime.jsx("span", { className: "zid-status__dot" }),
+    "Active"
+  ] }),
+  "Pending": /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "zid-status zid-status--warning zid-status--sm", children: [
+    /* @__PURE__ */ jsxRuntime.jsx("span", { className: "zid-status__dot" }),
+    "Pending"
+  ] }),
+  "Inactive": /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "zid-status zid-status--error zid-status--sm", children: [
+    /* @__PURE__ */ jsxRuntime.jsx("span", { className: "zid-status__dot" }),
+    "Inactive"
+  ] })
+};
+const WithStatusBadges = {
+  render: () => /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", flexDirection: "column", gap: "16px" }, children: [
+    /* @__PURE__ */ jsxRuntime.jsx("h3", { style: { marginBottom: "8px", fontFamily: "var(--zid-font-family)" }, children: "With Status Badges" }),
+    /* @__PURE__ */ jsxRuntime.jsxs("table", { className: "zid-table zid-table--hoverable", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("thead", { className: "zid-table__head", children: /* @__PURE__ */ jsxRuntime.jsxs("tr", { className: "zid-table__row", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("th", { className: "zid-table__cell", children: "ID" }),
+        /* @__PURE__ */ jsxRuntime.jsx("th", { className: "zid-table__cell", children: "Name" }),
+        /* @__PURE__ */ jsxRuntime.jsx("th", { className: "zid-table__cell", children: "Email" }),
+        /* @__PURE__ */ jsxRuntime.jsx("th", { className: "zid-table__cell", children: "Role" }),
+        /* @__PURE__ */ jsxRuntime.jsx("th", { className: "zid-table__cell", children: "Status" })
+      ] }) }),
+      /* @__PURE__ */ jsxRuntime.jsx("tbody", { className: "zid-table__body", children: sampleData.map((row) => /* @__PURE__ */ jsxRuntime.jsxs("tr", { className: "zid-table__row", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("td", { className: "zid-table__cell", children: row.id }),
+        /* @__PURE__ */ jsxRuntime.jsx("td", { className: "zid-table__cell", children: row.name }),
+        /* @__PURE__ */ jsxRuntime.jsx("td", { className: "zid-table__cell", children: row.email }),
+        /* @__PURE__ */ jsxRuntime.jsx("td", { className: "zid-table__cell", children: row.role }),
+        /* @__PURE__ */ jsxRuntime.jsx("td", { className: "zid-table__cell", children: statusMap[row.status] })
+      ] }, row.id)) })
+    ] })
+  ] })
+};
+const WithActions = {
+  render: () => /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", flexDirection: "column", gap: "16px" }, children: [
+    /* @__PURE__ */ jsxRuntime.jsx("h3", { style: { marginBottom: "8px", fontFamily: "var(--zid-font-family)" }, children: "With Action Buttons" }),
+    /* @__PURE__ */ jsxRuntime.jsxs("table", { className: "zid-table zid-table--hoverable", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("thead", { className: "zid-table__head", children: /* @__PURE__ */ jsxRuntime.jsxs("tr", { className: "zid-table__row", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("th", { className: "zid-table__cell", children: "ID" }),
+        /* @__PURE__ */ jsxRuntime.jsx("th", { className: "zid-table__cell", children: "Name" }),
+        /* @__PURE__ */ jsxRuntime.jsx("th", { className: "zid-table__cell", children: "Email" }),
+        /* @__PURE__ */ jsxRuntime.jsx("th", { className: "zid-table__cell", children: "Actions" })
+      ] }) }),
+      /* @__PURE__ */ jsxRuntime.jsx("tbody", { className: "zid-table__body", children: sampleData.map((row) => /* @__PURE__ */ jsxRuntime.jsxs("tr", { className: "zid-table__row", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("td", { className: "zid-table__cell", children: row.id }),
+        /* @__PURE__ */ jsxRuntime.jsx("td", { className: "zid-table__cell", children: row.name }),
+        /* @__PURE__ */ jsxRuntime.jsx("td", { className: "zid-table__cell", children: row.email }),
+        /* @__PURE__ */ jsxRuntime.jsx("td", { className: "zid-table__cell", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", gap: "8px" }, children: [
+          /* @__PURE__ */ jsxRuntime.jsx("button", { className: "zid-button zid-button--text zid-button--primary zid-button--sm", children: "Edit" }),
+          /* @__PURE__ */ jsxRuntime.jsx("button", { className: "zid-button zid-button--text zid-button--error zid-button--sm", children: "Delete" })
+        ] }) })
+      ] }, row.id)) })
+    ] })
+  ] })
+};
+const EmptyState = {
+  render: () => /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", flexDirection: "column", gap: "16px" }, children: [
+    /* @__PURE__ */ jsxRuntime.jsx("h3", { style: { marginBottom: "8px", fontFamily: "var(--zid-font-family)" }, children: "Empty State" }),
+    /* @__PURE__ */ jsxRuntime.jsxs("table", { className: "zid-table", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("thead", { className: "zid-table__head", children: /* @__PURE__ */ jsxRuntime.jsxs("tr", { className: "zid-table__row", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("th", { className: "zid-table__cell", children: "ID" }),
+        /* @__PURE__ */ jsxRuntime.jsx("th", { className: "zid-table__cell", children: "Name" }),
+        /* @__PURE__ */ jsxRuntime.jsx("th", { className: "zid-table__cell", children: "Email" }),
+        /* @__PURE__ */ jsxRuntime.jsx("th", { className: "zid-table__cell", children: "Status" })
+      ] }) }),
+      /* @__PURE__ */ jsxRuntime.jsx("tbody", { className: "zid-table__body", children: /* @__PURE__ */ jsxRuntime.jsx("tr", { className: "zid-table__row", children: /* @__PURE__ */ jsxRuntime.jsx("td", { className: "zid-table__cell", colSpan: 4, style: { textAlign: "center", padding: "48px" }, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { color: "var(--zid-text-secondary)", fontFamily: "var(--zid-font-family)" }, children: [
+        /* @__PURE__ */ jsxRuntime.jsx("div", { style: { fontSize: "48px", marginBottom: "16px" }, children: "📭" }),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { style: { fontSize: "16px", fontWeight: 500, marginBottom: "8px" }, children: "No data found" }),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { style: { fontSize: "14px" }, children: "Try adjusting your search or filters" })
+      ] }) }) }) })
+    ] })
+  ] })
+};
+exports.EmptyState = EmptyState;
+exports.Variants = Variants;
+exports.WithActions = WithActions;
+exports.WithStatusBadges = WithStatusBadges;
+exports.default = meta;
+//# sourceMappingURL=Table.stories.js.map

package/dist/react/cjs/stories/css/Table.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Table.stories.js","sources":["../../../../../src/stories/css/Table.stories.tsx"],"sourcesContent":["import type { StoryObj } from '@storybook/react-vite';\nimport type { ReactNode } from 'react';\nimport '../../css/index.css';\n\nconst sampleData = [\n  { id: 1, name: 'John Doe', email: 'john@example.com', status: 'Active', role: 'Admin' },\n  { id: 2, name: 'Jane Smith', email: 'jane@example.com', status: 'Pending', role: 'User' },\n  { id: 3, name: 'Bob Johnson', email: 'bob@example.com', status: 'Inactive', role: 'User' },\n  { id: 4, name: 'Alice Brown', email: 'alice@example.com', status: 'Active', role: 'Editor' },\n  { id: 5, name: 'Charlie Wilson', email: 'charlie@example.com', status: 'Active', role: 'User' },\n];\n\nconst meta = {\n  title: 'CSS Styles/Components/Table',\n  parameters: {\n    layout: 'padded',\n  },\n  tags: ['autodocs'],\n};\n\nexport default meta;\ntype Story = StoryObj<typeof meta>;\n\nexport const Variants: Story = {\n  render: () => (\n    <div style={{ display: 'flex', flexDirection: 'column', gap: '48px' }}>\n      <div>\n        <h3 style={{ marginBottom: '16px', fontFamily: 'var(--zid-font-family)' }}>Default</h3>\n        <table className=\"zid-table\">\n          <thead className=\"zid-table__head\">\n            <tr className=\"zid-table__row\">\n              <th className=\"zid-table__cell\">ID</th>\n              <th className=\"zid-table__cell\">Name</th>\n              <th className=\"zid-table__cell\">Email</th>\n              <th className=\"zid-table__cell\">Status</th>\n            </tr>\n          </thead>\n          <tbody className=\"zid-table__body\">\n            {sampleData.slice(0, 4).map(row => (\n              <tr key={row.id} className=\"zid-table__row\">\n                <td className=\"zid-table__cell\">{row.id}</td>\n                <td className=\"zid-table__cell\">{row.name}</td>\n                <td className=\"zid-table__cell\">{row.email}</td>\n                <td className=\"zid-table__cell\">{row.status}</td>\n              </tr>\n            ))}\n          </tbody>\n        </table>\n      </div>\n\n      <div>\n        <h3 style={{ marginBottom: '16px', fontFamily: 'var(--zid-font-family)' }}>Striped</h3>\n        <table className=\"zid-table zid-table--striped\">\n          <thead className=\"zid-table__head\">\n            <tr className=\"zid-table__row\">\n              <th className=\"zid-table__cell\">ID</th>\n              <th className=\"zid-table__cell\">Name</th>\n              <th className=\"zid-table__cell\">Email</th>\n              <th className=\"zid-table__cell\">Status</th>\n            </tr>\n          </thead>\n          <tbody className=\"zid-table__body\">\n            {sampleData.slice(0, 4).map(row => (\n              <tr key={row.id} className=\"zid-table__row\">\n                <td className=\"zid-table__cell\">{row.id}</td>\n                <td className=\"zid-table__cell\">{row.name}</td>\n                <td className=\"zid-table__cell\">{row.email}</td>\n                <td className=\"zid-table__cell\">{row.status}</td>\n              </tr>\n            ))}\n          </tbody>\n        </table>\n      </div>\n\n      <div>\n        <h3 style={{ marginBottom: '16px', fontFamily: 'var(--zid-font-family)' }}>Bordered</h3>\n        <table className=\"zid-table zid-table--bordered\">\n          <thead className=\"zid-table__head\">\n            <tr className=\"zid-table__row\">\n              <th className=\"zid-table__cell\">ID</th>\n              <th className=\"zid-table__cell\">Name</th>\n              <th className=\"zid-table__cell\">Email</th>\n              <th className=\"zid-table__cell\">Status</th>\n            </tr>\n          </thead>\n          <tbody className=\"zid-table__body\">\n            {sampleData.slice(0, 4).map(row => (\n              <tr key={row.id} className=\"zid-table__row\">\n                <td className=\"zid-table__cell\">{row.id}</td>\n                <td className=\"zid-table__cell\">{row.name}</td>\n                <td className=\"zid-table__cell\">{row.email}</td>\n                <td className=\"zid-table__cell\">{row.status}</td>\n              </tr>\n            ))}\n          </tbody>\n        </table>\n      </div>\n\n      <div>\n        <h3 style={{ marginBottom: '16px', fontFamily: 'var(--zid-font-family)' }}>Hoverable</h3>\n        <table className=\"zid-table zid-table--hoverable\">\n          <thead className=\"zid-table__head\">\n            <tr className=\"zid-table__row\">\n              <th className=\"zid-table__cell\">ID</th>\n              <th className=\"zid-table__cell\">Name</th>\n              <th className=\"zid-table__cell\">Email</th>\n              <th className=\"zid-table__cell\">Status</th>\n            </tr>\n          </thead>\n          <tbody className=\"zid-table__body\">\n            {sampleData.slice(0, 4).map(row => (\n              <tr key={row.id} className=\"zid-table__row\">\n                <td className=\"zid-table__cell\">{row.id}</td>\n                <td className=\"zid-table__cell\">{row.name}</td>\n                <td className=\"zid-table__cell\">{row.email}</td>\n                <td className=\"zid-table__cell\">{row.status}</td>\n              </tr>\n            ))}\n          </tbody>\n        </table>\n      </div>\n    </div>\n  ),\n};\n\n\nconst statusMap: Record<string, ReactNode> = {\n  'Active': <span className=\"zid-status zid-status--success zid-status--sm\"><span className=\"zid-status__dot\"></span>Active</span>,\n  'Pending': <span className=\"zid-status zid-status--warning zid-status--sm\"><span className=\"zid-status__dot\"></span>Pending</span>,\n  'Inactive': <span className=\"zid-status zid-status--error zid-status--sm\"><span className=\"zid-status__dot\"></span>Inactive</span>,\n};\n\nexport const WithStatusBadges: Story = {\n  render: () => (\n    <div style={{ display: 'flex', flexDirection: 'column', gap: '16px' }}>\n      <h3 style={{ marginBottom: '8px', fontFamily: 'var(--zid-font-family)' }}>With Status Badges</h3>\n      <table className=\"zid-table zid-table--hoverable\">\n        <thead className=\"zid-table__head\">\n          <tr className=\"zid-table__row\">\n            <th className=\"zid-table__cell\">ID</th>\n            <th className=\"zid-table__cell\">Name</th>\n            <th className=\"zid-table__cell\">Email</th>\n            <th className=\"zid-table__cell\">Role</th>\n            <th className=\"zid-table__cell\">Status</th>\n          </tr>\n        </thead>\n        <tbody className=\"zid-table__body\">\n          {sampleData.map(row => (\n            <tr key={row.id} className=\"zid-table__row\">\n              <td className=\"zid-table__cell\">{row.id}</td>\n              <td className=\"zid-table__cell\">{row.name}</td>\n              <td className=\"zid-table__cell\">{row.email}</td>\n              <td className=\"zid-table__cell\">{row.role}</td>\n              <td className=\"zid-table__cell\">{statusMap[row.status]}</td>\n            </tr>\n          ))}\n        </tbody>\n      </table>\n    </div>\n  ),\n};\n\nexport const WithActions: Story = {\n  render: () => (\n    <div style={{ display: 'flex', flexDirection: 'column', gap: '16px' }}>\n      <h3 style={{ marginBottom: '8px', fontFamily: 'var(--zid-font-family)' }}>With Action Buttons</h3>\n      <table className=\"zid-table zid-table--hoverable\">\n        <thead className=\"zid-table__head\">\n          <tr className=\"zid-table__row\">\n            <th className=\"zid-table__cell\">ID</th>\n            <th className=\"zid-table__cell\">Name</th>\n            <th className=\"zid-table__cell\">Email</th>\n            <th className=\"zid-table__cell\">Actions</th>\n          </tr>\n        </thead>\n        <tbody className=\"zid-table__body\">\n          {sampleData.map(row => (\n            <tr key={row.id} className=\"zid-table__row\">\n              <td className=\"zid-table__cell\">{row.id}</td>\n              <td className=\"zid-table__cell\">{row.name}</td>\n              <td className=\"zid-table__cell\">{row.email}</td>\n              <td className=\"zid-table__cell\">\n                <div style={{ display: 'flex', gap: '8px' }}>\n                  <button className=\"zid-button zid-button--text zid-button--primary zid-button--sm\">Edit</button>\n                  <button className=\"zid-button zid-button--text zid-button--error zid-button--sm\">Delete</button>\n                </div>\n              </td>\n            </tr>\n          ))}\n        </tbody>\n      </table>\n    </div>\n  ),\n};\n\nexport const EmptyState: Story = {\n  render: () => (\n    <div style={{ display: 'flex', flexDirection: 'column', gap: '16px' }}>\n      <h3 style={{ marginBottom: '8px', fontFamily: 'var(--zid-font-family)' }}>Empty State</h3>\n      <table className=\"zid-table\">\n        <thead className=\"zid-table__head\">\n          <tr className=\"zid-table__row\">\n            <th className=\"zid-table__cell\">ID</th>\n            <th className=\"zid-table__cell\">Name</th>\n            <th className=\"zid-table__cell\">Email</th>\n            <th className=\"zid-table__cell\">Status</th>\n          </tr>\n        </thead>\n        <tbody className=\"zid-table__body\">\n          <tr className=\"zid-table__row\">\n            <td className=\"zid-table__cell\" colSpan={4} style={{ textAlign: 'center', padding: '48px' }}>\n              <div style={{ color: 'var(--zid-text-secondary)', fontFamily: 'var(--zid-font-family)' }}>\n                <div style={{ fontSize: '48px', marginBottom: '16px' }}>📭</div>\n                <div style={{ fontSize: '16px', fontWeight: 500, marginBottom: '8px' }}>No data found</div>\n                <div style={{ fontSize: '14px' }}>Try adjusting your search or filters</div>\n              </div>\n            </td>\n          </tr>\n        </tbody>\n      </table>\n    </div>\n  ),\n};\n"],"names":["jsxs","jsx"],"mappings":"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"}

package/dist/react/cjs/stories/css/Tooltip.stories.js

@@ -0,0 +1,99 @@
+"use strict";
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
+const jsxRuntime = require("react/jsx-runtime");
+;/* empty css                   */
+const meta = {
+  title: "CSS Styles/Components/Tooltip",
+  parameters: {
+    layout: "centered"
+  },
+  tags: ["autodocs"]
+};
+const Positions = {
+  render: () => /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", flexDirection: "column", gap: "80px", padding: "80px" }, children: [
+    /* @__PURE__ */ jsxRuntime.jsx("div", { style: { display: "flex", justifyContent: "center" }, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "zid-tooltip zid-tooltip--open", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("button", { className: "zid-button zid-button--outlined zid-button--secondary zid-button--md", children: "Top" }),
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "zid-tooltip__content zid-tooltip__content--top", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "zid-tooltip__description", children: "Tooltip on top" }) })
+    ] }) }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", justifyContent: "space-between", alignItems: "center" }, children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "zid-tooltip zid-tooltip--open", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("button", { className: "zid-button zid-button--outlined zid-button--secondary zid-button--md", children: "Left" }),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "zid-tooltip__content zid-tooltip__content--left", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "zid-tooltip__description", children: "Tooltip on left" }) })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "zid-tooltip zid-tooltip--open", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("button", { className: "zid-button zid-button--outlined zid-button--secondary zid-button--md", children: "Right" }),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "zid-tooltip__content zid-tooltip__content--right", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "zid-tooltip__description", children: "Tooltip on right" }) })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { style: { display: "flex", justifyContent: "center" }, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "zid-tooltip zid-tooltip--open", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("button", { className: "zid-button zid-button--outlined zid-button--secondary zid-button--md", children: "Bottom" }),
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "zid-tooltip__content zid-tooltip__content--bottom", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "zid-tooltip__description", children: "Tooltip on bottom" }) })
+    ] }) })
+  ] })
+};
+const WithTitle = {
+  render: () => /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", flexDirection: "column", gap: "32px", padding: "80px" }, children: [
+    /* @__PURE__ */ jsxRuntime.jsx("h3", { style: { marginBottom: "8px", fontFamily: "var(--zid-font-family)" }, children: "Tooltip with Title" }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", gap: "32px", flexWrap: "wrap" }, children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "zid-tooltip zid-tooltip--open", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("button", { className: "zid-button zid-button--outlined zid-button--secondary zid-button--md", children: "With Title" }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "zid-tooltip__content zid-tooltip__content--top zid-tooltip__content--multiline", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "zid-tooltip__title", children: "Tooltip Title" }),
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "zid-tooltip__description", children: "This is a longer description that provides more context about the element." })
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "zid-tooltip zid-tooltip--open", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("button", { className: "zid-button zid-button--outlined zid-button--secondary zid-button--md", children: "Help Info" }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "zid-tooltip__content zid-tooltip__content--top zid-tooltip__content--multiline", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "zid-tooltip__title", children: "Need Help?" }),
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "zid-tooltip__description", children: "Click here to access our help center and documentation." })
+        ] })
+      ] })
+    ] })
+  ] })
+};
+const SimpleTooltips = {
+  render: () => /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", flexDirection: "column", gap: "32px", padding: "60px" }, children: [
+    /* @__PURE__ */ jsxRuntime.jsx("h3", { style: { marginBottom: "8px", fontFamily: "var(--zid-font-family)" }, children: "Simple Tooltips" }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", gap: "32px", flexWrap: "wrap" }, children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "zid-tooltip zid-tooltip--open", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("button", { className: "zid-button zid-button--text zid-button--secondary zid-button--sm", children: "Edit" }),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "zid-tooltip__content zid-tooltip__content--top", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "zid-tooltip__description", children: "Edit item" }) })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "zid-tooltip zid-tooltip--open", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("button", { className: "zid-button zid-button--text zid-button--error zid-button--sm", children: "Delete" }),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "zid-tooltip__content zid-tooltip__content--top", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "zid-tooltip__description", children: "Delete item" }) })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "zid-tooltip zid-tooltip--open", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("button", { className: "zid-button zid-button--text zid-button--secondary zid-button--sm", children: "Copy" }),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "zid-tooltip__content zid-tooltip__content--top", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "zid-tooltip__description", children: "Copy to clipboard" }) })
+      ] })
+    ] })
+  ] })
+};
+const Interactive = {
+  render: () => /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", flexDirection: "column", gap: "32px", padding: "60px" }, children: [
+    /* @__PURE__ */ jsxRuntime.jsx("h3", { style: { marginBottom: "8px", fontFamily: "var(--zid-font-family)" }, children: "Interactive Demo (Hover to show)" }),
+    /* @__PURE__ */ jsxRuntime.jsx("p", { style: { fontFamily: "var(--zid-font-family)", color: "var(--zid-text-secondary)", marginBottom: "16px" }, children: "Hover over the buttons to see tooltips appear" }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", gap: "24px", flexWrap: "wrap" }, children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "zid-tooltip", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("button", { className: "zid-button zid-button--outlined zid-button--secondary zid-button--md", children: "Hover me" }),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "zid-tooltip__content zid-tooltip__content--top", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "zid-tooltip__description", children: "I appear on hover!" }) })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "zid-tooltip", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("button", { className: "zid-button zid-button--outlined zid-button--secondary zid-button--md", children: "Or me" }),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "zid-tooltip__content zid-tooltip__content--bottom", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "zid-tooltip__description", children: "I appear below!" }) })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "zid-tooltip", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("button", { className: "zid-button zid-button--text zid-button--secondary zid-button--md", children: "Me too" }),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "zid-tooltip__content zid-tooltip__content--right", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "zid-tooltip__description", children: "I appear on the right!" }) })
+      ] })
+    ] })
+  ] })
+};
+exports.Interactive = Interactive;
+exports.Positions = Positions;
+exports.SimpleTooltips = SimpleTooltips;
+exports.WithTitle = WithTitle;
+exports.default = meta;
+//# sourceMappingURL=Tooltip.stories.js.map

package/dist/react/cjs/stories/css/Tooltip.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Tooltip.stories.js","sources":["../../../../../src/stories/css/Tooltip.stories.tsx"],"sourcesContent":["import type { StoryObj } from '@storybook/react-vite';\nimport '../../css/index.css';\n\nconst meta = {\n  title: 'CSS Styles/Components/Tooltip',\n  parameters: {\n    layout: 'centered',\n  },\n  tags: ['autodocs'],\n};\n\nexport default meta;\ntype Story = StoryObj<typeof meta>;\n\nexport const Positions: Story = {\n  render: () => (\n    <div style={{ display: 'flex', flexDirection: 'column', gap: '80px', padding: '80px' }}>\n      <div style={{ display: 'flex', justifyContent: 'center' }}>\n        <div className=\"zid-tooltip zid-tooltip--open\">\n          <button className=\"zid-button zid-button--outlined zid-button--secondary zid-button--md\">Top</button>\n          <div className=\"zid-tooltip__content zid-tooltip__content--top\">\n            <div className=\"zid-tooltip__description\">Tooltip on top</div>\n          </div>\n        </div>\n      </div>\n      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>\n        <div className=\"zid-tooltip zid-tooltip--open\">\n          <button className=\"zid-button zid-button--outlined zid-button--secondary zid-button--md\">Left</button>\n          <div className=\"zid-tooltip__content zid-tooltip__content--left\">\n            <div className=\"zid-tooltip__description\">Tooltip on left</div>\n          </div>\n        </div>\n        <div className=\"zid-tooltip zid-tooltip--open\">\n          <button className=\"zid-button zid-button--outlined zid-button--secondary zid-button--md\">Right</button>\n          <div className=\"zid-tooltip__content zid-tooltip__content--right\">\n            <div className=\"zid-tooltip__description\">Tooltip on right</div>\n          </div>\n        </div>\n      </div>\n      <div style={{ display: 'flex', justifyContent: 'center' }}>\n        <div className=\"zid-tooltip zid-tooltip--open\">\n          <button className=\"zid-button zid-button--outlined zid-button--secondary zid-button--md\">Bottom</button>\n          <div className=\"zid-tooltip__content zid-tooltip__content--bottom\">\n            <div className=\"zid-tooltip__description\">Tooltip on bottom</div>\n          </div>\n        </div>\n      </div>\n    </div>\n  ),\n};\n\nexport const WithTitle: Story = {\n  render: () => (\n    <div style={{ display: 'flex', flexDirection: 'column', gap: '32px', padding: '80px' }}>\n      <h3 style={{ marginBottom: '8px', fontFamily: 'var(--zid-font-family)' }}>Tooltip with Title</h3>\n      <div style={{ display: 'flex', gap: '32px', flexWrap: 'wrap' }}>\n        <div className=\"zid-tooltip zid-tooltip--open\">\n          <button className=\"zid-button zid-button--outlined zid-button--secondary zid-button--md\">With Title</button>\n          <div className=\"zid-tooltip__content zid-tooltip__content--top zid-tooltip__content--multiline\">\n            <div className=\"zid-tooltip__title\">Tooltip Title</div>\n            <div className=\"zid-tooltip__description\">This is a longer description that provides more context about the element.</div>\n          </div>\n        </div>\n        <div className=\"zid-tooltip zid-tooltip--open\">\n          <button className=\"zid-button zid-button--outlined zid-button--secondary zid-button--md\">Help Info</button>\n          <div className=\"zid-tooltip__content zid-tooltip__content--top zid-tooltip__content--multiline\">\n            <div className=\"zid-tooltip__title\">Need Help?</div>\n            <div className=\"zid-tooltip__description\">Click here to access our help center and documentation.</div>\n          </div>\n        </div>\n      </div>\n    </div>\n  ),\n};\n\nexport const SimpleTooltips: Story = {\n  render: () => (\n    <div style={{ display: 'flex', flexDirection: 'column', gap: '32px', padding: '60px' }}>\n      <h3 style={{ marginBottom: '8px', fontFamily: 'var(--zid-font-family)' }}>Simple Tooltips</h3>\n      <div style={{ display: 'flex', gap: '32px', flexWrap: 'wrap' }}>\n        <div className=\"zid-tooltip zid-tooltip--open\">\n          <button className=\"zid-button zid-button--text zid-button--secondary zid-button--sm\">Edit</button>\n          <div className=\"zid-tooltip__content zid-tooltip__content--top\">\n            <div className=\"zid-tooltip__description\">Edit item</div>\n          </div>\n        </div>\n        <div className=\"zid-tooltip zid-tooltip--open\">\n          <button className=\"zid-button zid-button--text zid-button--error zid-button--sm\">Delete</button>\n          <div className=\"zid-tooltip__content zid-tooltip__content--top\">\n            <div className=\"zid-tooltip__description\">Delete item</div>\n          </div>\n        </div>\n        <div className=\"zid-tooltip zid-tooltip--open\">\n          <button className=\"zid-button zid-button--text zid-button--secondary zid-button--sm\">Copy</button>\n          <div className=\"zid-tooltip__content zid-tooltip__content--top\">\n            <div className=\"zid-tooltip__description\">Copy to clipboard</div>\n          </div>\n        </div>\n      </div>\n    </div>\n  ),\n};\n\nexport const Interactive: Story = {\n  render: () => (\n    <div style={{ display: 'flex', flexDirection: 'column', gap: '32px', padding: '60px' }}>\n      <h3 style={{ marginBottom: '8px', fontFamily: 'var(--zid-font-family)' }}>Interactive Demo (Hover to show)</h3>\n      <p style={{ fontFamily: 'var(--zid-font-family)', color: 'var(--zid-text-secondary)', marginBottom: '16px' }}>Hover over the buttons to see tooltips appear</p>\n      <div style={{ display: 'flex', gap: '24px', flexWrap: 'wrap' }}>\n        <div className=\"zid-tooltip\">\n          <button className=\"zid-button zid-button--outlined zid-button--secondary zid-button--md\">Hover me</button>\n          <div className=\"zid-tooltip__content zid-tooltip__content--top\">\n            <div className=\"zid-tooltip__description\">I appear on hover!</div>\n          </div>\n        </div>\n        <div className=\"zid-tooltip\">\n          <button className=\"zid-button zid-button--outlined zid-button--secondary zid-button--md\">Or me</button>\n          <div className=\"zid-tooltip__content zid-tooltip__content--bottom\">\n            <div className=\"zid-tooltip__description\">I appear below!</div>\n          </div>\n        </div>\n        <div className=\"zid-tooltip\">\n          <button className=\"zid-button zid-button--text zid-button--secondary zid-button--md\">Me too</button>\n          <div className=\"zid-tooltip__content zid-tooltip__content--right\">\n            <div className=\"zid-tooltip__description\">I appear on the right!</div>\n          </div>\n        </div>\n      </div>\n    </div>\n  ),\n};\n"],"names":["jsxs","jsx"],"mappings":"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"}

package/dist/react/cjs/stories/css/Utilities.stories.js

@@ -0,0 +1,136 @@
+"use strict";
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
+const jsxRuntime = require("react/jsx-runtime");
+;/* empty css                   */
+const meta = {
+  title: "CSS Styles/Utilities",
+  tags: ["autodocs"],
+  parameters: {
+    layout: "fullscreen"
+  }
+};
+const UtilityClasses = {
+  render: () => /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { padding: "32px", maxWidth: "900px", fontFamily: "var(--zid-font-family, system-ui)" }, children: [
+    /* @__PURE__ */ jsxRuntime.jsx("h1", { style: { marginBottom: "8px" }, children: "Utility Classes" }),
+    /* @__PURE__ */ jsxRuntime.jsx("p", { style: { color: "#75727B", marginBottom: "32px" }, children: "Helper classes for common styling needs" }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { marginBottom: "32px" }, children: [
+      /* @__PURE__ */ jsxRuntime.jsx("h2", { style: { marginBottom: "16px" }, children: "Display" }),
+      /* @__PURE__ */ jsxRuntime.jsx("pre", { style: { background: "#1f0433", color: "#fff", padding: "16px", borderRadius: "8px", overflow: "auto", fontSize: "14px" }, children: `.zid-d-flex      /* display: flex */
+.zid-d-block     /* display: block */
+.zid-d-inline    /* display: inline */
+.zid-d-none      /* display: none */
+.zid-d-grid      /* display: grid */` })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { marginBottom: "32px" }, children: [
+      /* @__PURE__ */ jsxRuntime.jsx("h2", { style: { marginBottom: "16px" }, children: "Flexbox" }),
+      /* @__PURE__ */ jsxRuntime.jsx("pre", { style: { background: "#1f0433", color: "#fff", padding: "16px", borderRadius: "8px", overflow: "auto", fontSize: "14px" }, children: `/* Direction */
+.zid-flex-row        /* flex-direction: row */
+.zid-flex-col        /* flex-direction: column */
+
+/* Justify Content */
+.zid-justify-start   /* justify-content: flex-start */
+.zid-justify-end     /* justify-content: flex-end */
+.zid-justify-center  /* justify-content: center */
+.zid-justify-between /* justify-content: space-between */
+.zid-justify-around  /* justify-content: space-around */
+
+/* Align Items */
+.zid-align-start     /* align-items: flex-start */
+.zid-align-end       /* align-items: flex-end */
+.zid-align-center    /* align-items: center */
+.zid-align-stretch   /* align-items: stretch */
+
+/* Flex Wrap */
+.zid-flex-wrap       /* flex-wrap: wrap */
+.zid-flex-nowrap     /* flex-wrap: nowrap */
+
+/* Gap */
+.zid-gap-1           /* gap: 8px */
+.zid-gap-2           /* gap: 16px */
+.zid-gap-3           /* gap: 24px */
+.zid-gap-4           /* gap: 32px */` })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { marginBottom: "32px" }, children: [
+      /* @__PURE__ */ jsxRuntime.jsx("h2", { style: { marginBottom: "16px" }, children: "Spacing (Margin & Padding)" }),
+      /* @__PURE__ */ jsxRuntime.jsx("pre", { style: { background: "#1f0433", color: "#fff", padding: "16px", borderRadius: "8px", overflow: "auto", fontSize: "14px" }, children: `/* Margin - all sides */
+.zid-m-0, .zid-m-1, .zid-m-2, .zid-m-3, .zid-m-4
+
+/* Margin - specific sides */
+.zid-mt-{0-4}   /* margin-top */
+.zid-mr-{0-4}   /* margin-right */
+.zid-mb-{0-4}   /* margin-bottom */
+.zid-ml-{0-4}   /* margin-left */
+.zid-mx-{0-4}   /* margin-left + margin-right */
+.zid-my-{0-4}   /* margin-top + margin-bottom */
+
+/* Padding - all sides */
+.zid-p-0, .zid-p-1, .zid-p-2, .zid-p-3, .zid-p-4
+
+/* Padding - specific sides */
+.zid-pt-{0-4}   /* padding-top */
+.zid-pr-{0-4}   /* padding-right */
+.zid-pb-{0-4}   /* padding-bottom */
+.zid-pl-{0-4}   /* padding-left */
+.zid-px-{0-4}   /* padding-left + padding-right */
+.zid-py-{0-4}   /* padding-top + padding-bottom */` })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { marginBottom: "32px" }, children: [
+      /* @__PURE__ */ jsxRuntime.jsx("h2", { style: { marginBottom: "16px" }, children: "Text" }),
+      /* @__PURE__ */ jsxRuntime.jsx("pre", { style: { background: "#1f0433", color: "#fff", padding: "16px", borderRadius: "8px", overflow: "auto", fontSize: "14px" }, children: `/* Text alignment */
+.zid-text-left
+.zid-text-center
+.zid-text-right
+
+/* Text colors */
+.zid-text-primary
+.zid-text-secondary
+.zid-text-error
+.zid-text-success
+.zid-text-warning
+
+/* Font weight */
+.zid-font-regular
+.zid-font-medium
+.zid-font-bold` })
+    ] })
+  ] })
+};
+const UtilityExamples = {
+  render: () => /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { padding: "32px", maxWidth: "900px", fontFamily: "var(--zid-font-family, system-ui)" }, children: [
+    /* @__PURE__ */ jsxRuntime.jsx("h1", { style: { marginBottom: "8px" }, children: "Utility Examples" }),
+    /* @__PURE__ */ jsxRuntime.jsx("p", { style: { color: "#75727B", marginBottom: "32px" }, children: "Live examples of utility classes" }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { marginBottom: "32px" }, children: [
+      /* @__PURE__ */ jsxRuntime.jsx("h2", { style: { marginBottom: "16px" }, children: "Flexbox Layout" }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "zid-d-flex zid-justify-between zid-align-center zid-gap-2 zid-p-3", style: { background: "var(--zid-base-neutral, #F5F4F6)", borderRadius: "8px" }, children: [
+        /* @__PURE__ */ jsxRuntime.jsx("div", { style: { padding: "16px", background: "var(--zid-primary-main, #AE72FF)", color: "white", borderRadius: "4px" }, children: "Item 1" }),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { style: { padding: "16px", background: "var(--zid-primary-main, #AE72FF)", color: "white", borderRadius: "4px" }, children: "Item 2" }),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { style: { padding: "16px", background: "var(--zid-primary-main, #AE72FF)", color: "white", borderRadius: "4px" }, children: "Item 3" })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsx("pre", { style: { background: "#1f0433", color: "#fff", padding: "12px", borderRadius: "8px", marginTop: "12px", fontSize: "13px" }, children: `<div class="zid-d-flex zid-justify-between zid-align-center zid-gap-2 zid-p-3">
+  <div>Item 1</div>
+  <div>Item 2</div>
+  <div>Item 3</div>
+</div>` })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { marginBottom: "32px" }, children: [
+      /* @__PURE__ */ jsxRuntime.jsx("h2", { style: { marginBottom: "16px" }, children: "Spacing" }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { background: "var(--zid-base-neutral, #F5F4F6)", borderRadius: "8px", padding: "16px" }, children: [
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "zid-mb-2", style: { padding: "12px", background: "var(--zid-color-blue-200, #E9FAFA)", borderRadius: "4px" }, children: "Box with margin-bottom (zid-mb-2)" }),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "zid-p-3", style: { background: "var(--zid-color-green-200, #EFFBEE)", borderRadius: "4px" }, children: "Box with padding (zid-p-3)" })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { marginBottom: "32px" }, children: [
+      /* @__PURE__ */ jsxRuntime.jsx("h2", { style: { marginBottom: "16px" }, children: "Text Colors" }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", flexDirection: "column", gap: "8px" }, children: [
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "zid-text-primary", style: { fontSize: "16px" }, children: "Primary text color" }),
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "zid-text-secondary", style: { fontSize: "16px" }, children: "Secondary text color" }),
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "zid-text-error", style: { fontSize: "16px" }, children: "Error text color" }),
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "zid-text-success", style: { fontSize: "16px" }, children: "Success text color" })
+      ] })
+    ] })
+  ] })
+};
+exports.UtilityClasses = UtilityClasses;
+exports.UtilityExamples = UtilityExamples;
+exports.default = meta;
+//# sourceMappingURL=Utilities.stories.js.map

package/dist/react/cjs/stories/css/Utilities.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Utilities.stories.js","sources":["../../../../../src/stories/css/Utilities.stories.tsx"],"sourcesContent":["import type { StoryObj } from '@storybook/react-vite';\nimport '../../css/index.css';\n\nconst meta = {\n  title: 'CSS Styles/Utilities',\n  tags: ['autodocs'],\n  parameters: {\n    layout: 'fullscreen',\n  },\n};\n\nexport default meta;\ntype Story = StoryObj<typeof meta>;\n\nexport const UtilityClasses: Story = {\n  render: () => (\n    <div style={{ padding: '32px', maxWidth: '900px', fontFamily: 'var(--zid-font-family, system-ui)' }}>\n      <h1 style={{ marginBottom: '8px' }}>Utility Classes</h1>\n      <p style={{ color: '#75727B', marginBottom: '32px' }}>Helper classes for common styling needs</p>\n\n      <div style={{ marginBottom: '32px' }}>\n        <h2 style={{ marginBottom: '16px' }}>Display</h2>\n        <pre style={{ background: '#1f0433', color: '#fff', padding: '16px', borderRadius: '8px', overflow: 'auto', fontSize: '14px' }}>\n{`.zid-d-flex      /* display: flex */\n.zid-d-block     /* display: block */\n.zid-d-inline    /* display: inline */\n.zid-d-none      /* display: none */\n.zid-d-grid      /* display: grid */`}\n        </pre>\n      </div>\n\n      <div style={{ marginBottom: '32px' }}>\n        <h2 style={{ marginBottom: '16px' }}>Flexbox</h2>\n        <pre style={{ background: '#1f0433', color: '#fff', padding: '16px', borderRadius: '8px', overflow: 'auto', fontSize: '14px' }}>\n{`/* Direction */\n.zid-flex-row        /* flex-direction: row */\n.zid-flex-col        /* flex-direction: column */\n\n/* Justify Content */\n.zid-justify-start   /* justify-content: flex-start */\n.zid-justify-end     /* justify-content: flex-end */\n.zid-justify-center  /* justify-content: center */\n.zid-justify-between /* justify-content: space-between */\n.zid-justify-around  /* justify-content: space-around */\n\n/* Align Items */\n.zid-align-start     /* align-items: flex-start */\n.zid-align-end       /* align-items: flex-end */\n.zid-align-center    /* align-items: center */\n.zid-align-stretch   /* align-items: stretch */\n\n/* Flex Wrap */\n.zid-flex-wrap       /* flex-wrap: wrap */\n.zid-flex-nowrap     /* flex-wrap: nowrap */\n\n/* Gap */\n.zid-gap-1           /* gap: 8px */\n.zid-gap-2           /* gap: 16px */\n.zid-gap-3           /* gap: 24px */\n.zid-gap-4           /* gap: 32px */`}\n        </pre>\n      </div>\n\n      <div style={{ marginBottom: '32px' }}>\n        <h2 style={{ marginBottom: '16px' }}>Spacing (Margin & Padding)</h2>\n        <pre style={{ background: '#1f0433', color: '#fff', padding: '16px', borderRadius: '8px', overflow: 'auto', fontSize: '14px' }}>\n{`/* Margin - all sides */\n.zid-m-0, .zid-m-1, .zid-m-2, .zid-m-3, .zid-m-4\n\n/* Margin - specific sides */\n.zid-mt-{0-4}   /* margin-top */\n.zid-mr-{0-4}   /* margin-right */\n.zid-mb-{0-4}   /* margin-bottom */\n.zid-ml-{0-4}   /* margin-left */\n.zid-mx-{0-4}   /* margin-left + margin-right */\n.zid-my-{0-4}   /* margin-top + margin-bottom */\n\n/* Padding - all sides */\n.zid-p-0, .zid-p-1, .zid-p-2, .zid-p-3, .zid-p-4\n\n/* Padding - specific sides */\n.zid-pt-{0-4}   /* padding-top */\n.zid-pr-{0-4}   /* padding-right */\n.zid-pb-{0-4}   /* padding-bottom */\n.zid-pl-{0-4}   /* padding-left */\n.zid-px-{0-4}   /* padding-left + padding-right */\n.zid-py-{0-4}   /* padding-top + padding-bottom */`}\n        </pre>\n      </div>\n\n      <div style={{ marginBottom: '32px' }}>\n        <h2 style={{ marginBottom: '16px' }}>Text</h2>\n        <pre style={{ background: '#1f0433', color: '#fff', padding: '16px', borderRadius: '8px', overflow: 'auto', fontSize: '14px' }}>\n{`/* Text alignment */\n.zid-text-left\n.zid-text-center\n.zid-text-right\n\n/* Text colors */\n.zid-text-primary\n.zid-text-secondary\n.zid-text-error\n.zid-text-success\n.zid-text-warning\n\n/* Font weight */\n.zid-font-regular\n.zid-font-medium\n.zid-font-bold`}\n        </pre>\n      </div>\n    </div>\n  ),\n};\n\nexport const UtilityExamples: Story = {\n  render: () => (\n    <div style={{ padding: '32px', maxWidth: '900px', fontFamily: 'var(--zid-font-family, system-ui)' }}>\n      <h1 style={{ marginBottom: '8px' }}>Utility Examples</h1>\n      <p style={{ color: '#75727B', marginBottom: '32px' }}>Live examples of utility classes</p>\n\n      <div style={{ marginBottom: '32px' }}>\n        <h2 style={{ marginBottom: '16px' }}>Flexbox Layout</h2>\n        <div className=\"zid-d-flex zid-justify-between zid-align-center zid-gap-2 zid-p-3\" style={{ background: 'var(--zid-base-neutral, #F5F4F6)', borderRadius: '8px' }}>\n          <div style={{ padding: '16px', background: 'var(--zid-primary-main, #AE72FF)', color: 'white', borderRadius: '4px' }}>Item 1</div>\n          <div style={{ padding: '16px', background: 'var(--zid-primary-main, #AE72FF)', color: 'white', borderRadius: '4px' }}>Item 2</div>\n          <div style={{ padding: '16px', background: 'var(--zid-primary-main, #AE72FF)', color: 'white', borderRadius: '4px' }}>Item 3</div>\n        </div>\n        <pre style={{ background: '#1f0433', color: '#fff', padding: '12px', borderRadius: '8px', marginTop: '12px', fontSize: '13px' }}>\n{`<div class=\"zid-d-flex zid-justify-between zid-align-center zid-gap-2 zid-p-3\">\n  <div>Item 1</div>\n  <div>Item 2</div>\n  <div>Item 3</div>\n</div>`}\n        </pre>\n      </div>\n\n      <div style={{ marginBottom: '32px' }}>\n        <h2 style={{ marginBottom: '16px' }}>Spacing</h2>\n        <div style={{ background: 'var(--zid-base-neutral, #F5F4F6)', borderRadius: '8px', padding: '16px' }}>\n          <div className=\"zid-mb-2\" style={{ padding: '12px', background: 'var(--zid-color-blue-200, #E9FAFA)', borderRadius: '4px' }}>\n            Box with margin-bottom (zid-mb-2)\n          </div>\n          <div className=\"zid-p-3\" style={{ background: 'var(--zid-color-green-200, #EFFBEE)', borderRadius: '4px' }}>\n            Box with padding (zid-p-3)\n          </div>\n        </div>\n      </div>\n\n      <div style={{ marginBottom: '32px' }}>\n        <h2 style={{ marginBottom: '16px' }}>Text Colors</h2>\n        <div style={{ display: 'flex', flexDirection: 'column', gap: '8px' }}>\n          <span className=\"zid-text-primary\" style={{ fontSize: '16px' }}>Primary text color</span>\n          <span className=\"zid-text-secondary\" style={{ fontSize: '16px' }}>Secondary text color</span>\n          <span className=\"zid-text-error\" style={{ fontSize: '16px' }}>Error text color</span>\n          <span className=\"zid-text-success\" style={{ fontSize: '16px' }}>Success text color</span>\n        </div>\n      </div>\n    </div>\n  ),\n};\n"],"names":["jsxs","jsx"],"mappings":"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"}

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

@@ -114,9 +114,15 @@ const ColorsDisplay = () => {
   return /* @__PURE__ */ jsxRuntime.jsxs(ColorSwatchContainer, { children: [
     /* @__PURE__ */ jsxRuntime.jsxs(material.Box, { children: [
       /* @__PURE__ */ jsxRuntime.jsx(material.Typography, { variant: "h4", sx: { mb: 1 }, children: "Parcel Design System Colors" }),
+      /* @__PURE__ */ jsxRuntime.jsxs(material.Typography, { variant: "body2", color: "text.secondary", sx: { mb: 2 }, children: [
+        /* @__PURE__ */ jsxRuntime.jsx("strong", { children: "How to use in React:" }),
+        " ",
+        /* @__PURE__ */ jsxRuntime.jsx("code", { children: "theme.palette.colors.{name}[shade]" })
+      ] }),
       /* @__PURE__ */ jsxRuntime.jsxs(material.Typography, { variant: "body2", color: "text.secondary", sx: { mb: 4 }, children: [
-        "Access colors via ",
-        /* @__PURE__ */ jsxRuntime.jsx("code", { children: "theme.palette.colors.{colorName}[shade]" })
+        /* @__PURE__ */ jsxRuntime.jsx("strong", { children: "How to use in CSS:" }),
+        " ",
+        /* @__PURE__ */ jsxRuntime.jsx("code", { children: "var(--zid-color-{name}-{shade})" })
       ] })
     ] }),
     colorScales.map(({ name, colors: colors2 }) => /* @__PURE__ */ jsxRuntime.jsx(ColorScaleDisplay, { name, colors: colors2 }, name))

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

@@ -1 +1 @@
-{"version":3,"file":"Colors.stories.js","sources":["../../../../../src/stories/design/Colors.stories.tsx"],"sourcesContent":["import type { Meta, StoryObj } from '@storybook/react-vite';\nimport { useState } from 'react';\n\nimport { Box, Typography, useTheme, styled } from '@mui/material';\n\n//\n//\n\nconst ColorSwatchContainer = styled(Box)({\n  display: 'flex',\n  flexDirection: 'column',\n  gap: '32px',\n  padding: '24px',\n  maxWidth: '1200px',\n});\n\nconst ColorGroupTitle = styled(Typography)(({ theme }) => ({\n  fontSize: theme.spacing(3),\n  fontWeight: 600,\n  marginBottom: theme.spacing(2),\n  textTransform: 'capitalize',\n}));\n\nconst ColorRow = styled(Box)({\n  display: 'flex',\n  flexWrap: 'wrap',\n  gap: '12px',\n});\n\nconst ColorSwatch = styled(Box)<{ bgColor: string; isLight?: boolean }>(({ bgColor, isLight }) => ({\n  width: '100px',\n  height: '80px',\n  backgroundColor: bgColor,\n  borderRadius: '8px',\n  display: 'flex',\n  flexDirection: 'column',\n  justifyContent: 'flex-end',\n  padding: '8px',\n  border: '1px solid rgba(0, 0, 0, 0.1)',\n  color: isLight ? '#0E0217' : '#FFFFFF',\n  fontSize: '11px',\n  fontFamily: 'monospace',\n  cursor: 'pointer',\n  transition: 'transform 0.15s ease, box-shadow 0.15s ease',\n  '&:hover': {\n    transform: 'scale(1.05)',\n    boxShadow: '0 4px 12px rgba(0, 0, 0, 0.15)',\n  },\n  '&:active': {\n    transform: 'scale(0.98)',\n  },\n}));\n\nconst SwatchLabel = styled('span')({\n  fontWeight: 600,\n  marginBottom: '2px',\n});\n\nconst SwatchHex = styled('span')({\n  opacity: 0.8,\n  fontSize: '10px',\n});\n\n//\n//\n\ninterface ColorScale {\n  [key: string]: string;\n}\n\nconst isLightColor = (color: string): boolean => {\n  let r: number, g: number, b: number;\n\n  // Handle rgba format: rgba(255, 255, 255, 0.8)\n  if (color.startsWith('rgba')) {\n    const match = color.match(/rgba?\\((\\d+),\\s*(\\d+),\\s*(\\d+)/);\n\n    if (match) {\n      r = parseInt(match[1], 10);\n      g = parseInt(match[2], 10);\n      b = parseInt(match[3], 10);\n    } else {\n      return true; // Default to light if parsing fails\n    }\n  } else {\n    // Handle hex format: #FFFFFF\n    const hex = color.replace('#', '');\n    r = parseInt(hex.substring(0, 2), 16);\n    g = parseInt(hex.substring(2, 4), 16);\n    b = parseInt(hex.substring(4, 6), 16);\n  }\n\n  const luminance = (0.299 * r + 0.587 * g + 0.114 * b) / 255;\n\n  return luminance > 0.5;\n};\n\nconst ColorScaleDisplay = ({ name, colors }: { name: string; colors: ColorScale }) => {\n  const [copiedKey, setCopiedKey] = useState<string | null>(null);\n\n  const handleCopy = (shade: string, hex: string) => {\n    navigator.clipboard.writeText(hex);\n    setCopiedKey(shade);\n    setTimeout(() => setCopiedKey(null), 1500);\n  };\n\n  return (\n    <Box>\n      <ColorGroupTitle>{name}</ColorGroupTitle>\n      <ColorRow>\n        {Object.entries(colors).map(([shade, hex]) => (\n          <ColorSwatch\n            key={shade}\n            bgColor={hex}\n            isLight={isLightColor(hex)}\n            onClick={() => handleCopy(shade, hex)}\n            title={`Click to copy ${hex}`}\n          >\n            <SwatchLabel>{copiedKey === shade ? 'Copied!' : shade}</SwatchLabel>\n            <SwatchHex>{hex}</SwatchHex>\n          </ColorSwatch>\n        ))}\n      </ColorRow>\n    </Box>\n  );\n};\n\n//\n//\n\nconst ColorsDisplay = () => {\n  const theme = useTheme();\n  const { colors } = theme.palette;\n\n  const colorScales = [\n    { name: 'Primary', colors: colors.primary },\n    { name: 'Secondary', colors: colors.secondary },\n    { name: 'Neutral', colors: colors.neutral },\n    { name: 'Green', colors: colors.green },\n    { name: 'Blue', colors: colors.blue },\n    { name: 'Yellow', colors: colors.yellow },\n    { name: 'Orange', colors: colors.orange },\n    { name: 'Red', colors: colors.red },\n    { name: 'Base', colors: colors.base },\n  ];\n\n  return (\n    <ColorSwatchContainer>\n      <Box>\n        <Typography variant=\"h4\" sx={{ mb: 1 }}>\n          Parcel Design System Colors\n        </Typography>\n        <Typography variant=\"body2\" color=\"text.secondary\" sx={{ mb: 4 }}>\n          Access colors via <code>theme.palette.colors.&#123;colorName&#125;[shade]</code>\n        </Typography>\n      </Box>\n\n      {colorScales.map(({ name, colors }) => (\n        <ColorScaleDisplay key={name} name={name} colors={colors} />\n      ))}\n    </ColorSwatchContainer>\n  );\n};\n\n//\n//\n\nconst meta = {\n  title: 'Design System/Colors',\n  component: ColorsDisplay,\n  parameters: {\n    layout: 'fullscreen',\n  },\n  tags: ['autodocs'],\n} satisfies Meta<typeof ColorsDisplay>;\n\nexport default meta;\ntype Story = StoryObj<typeof meta>;\n\nexport const AllColors: Story = {};\n"],"names":["styled","Box","Typography","useState","jsx","jsxs","useTheme","colors"],"mappings":"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"}
+{"version":3,"file":"Colors.stories.js","sources":["../../../../../src/stories/design/Colors.stories.tsx"],"sourcesContent":["import type { Meta, StoryObj } from '@storybook/react-vite';\nimport { useState } from 'react';\n\nimport { Box, Typography, useTheme, styled } from '@mui/material';\n\n//\n//\n\nconst ColorSwatchContainer = styled(Box)({\n  display: 'flex',\n  flexDirection: 'column',\n  gap: '32px',\n  padding: '24px',\n  maxWidth: '1200px',\n});\n\nconst ColorGroupTitle = styled(Typography)(({ theme }) => ({\n  fontSize: theme.spacing(3),\n  fontWeight: 600,\n  marginBottom: theme.spacing(2),\n  textTransform: 'capitalize',\n}));\n\nconst ColorRow = styled(Box)({\n  display: 'flex',\n  flexWrap: 'wrap',\n  gap: '12px',\n});\n\nconst ColorSwatch = styled(Box)<{ bgColor: string; isLight?: boolean }>(({ bgColor, isLight }) => ({\n  width: '100px',\n  height: '80px',\n  backgroundColor: bgColor,\n  borderRadius: '8px',\n  display: 'flex',\n  flexDirection: 'column',\n  justifyContent: 'flex-end',\n  padding: '8px',\n  border: '1px solid rgba(0, 0, 0, 0.1)',\n  color: isLight ? '#0E0217' : '#FFFFFF',\n  fontSize: '11px',\n  fontFamily: 'monospace',\n  cursor: 'pointer',\n  transition: 'transform 0.15s ease, box-shadow 0.15s ease',\n  '&:hover': {\n    transform: 'scale(1.05)',\n    boxShadow: '0 4px 12px rgba(0, 0, 0, 0.15)',\n  },\n  '&:active': {\n    transform: 'scale(0.98)',\n  },\n}));\n\nconst SwatchLabel = styled('span')({\n  fontWeight: 600,\n  marginBottom: '2px',\n});\n\nconst SwatchHex = styled('span')({\n  opacity: 0.8,\n  fontSize: '10px',\n});\n\n//\n//\n\ninterface ColorScale {\n  [key: string]: string;\n}\n\nconst isLightColor = (color: string): boolean => {\n  let r: number, g: number, b: number;\n\n  // Handle rgba format: rgba(255, 255, 255, 0.8)\n  if (color.startsWith('rgba')) {\n    const match = color.match(/rgba?\\((\\d+),\\s*(\\d+),\\s*(\\d+)/);\n\n    if (match) {\n      r = parseInt(match[1], 10);\n      g = parseInt(match[2], 10);\n      b = parseInt(match[3], 10);\n    } else {\n      return true; // Default to light if parsing fails\n    }\n  } else {\n    // Handle hex format: #FFFFFF\n    const hex = color.replace('#', '');\n    r = parseInt(hex.substring(0, 2), 16);\n    g = parseInt(hex.substring(2, 4), 16);\n    b = parseInt(hex.substring(4, 6), 16);\n  }\n\n  const luminance = (0.299 * r + 0.587 * g + 0.114 * b) / 255;\n\n  return luminance > 0.5;\n};\n\nconst ColorScaleDisplay = ({ name, colors }: { name: string; colors: ColorScale }) => {\n  const [copiedKey, setCopiedKey] = useState<string | null>(null);\n\n  const handleCopy = (shade: string, hex: string) => {\n    navigator.clipboard.writeText(hex);\n    setCopiedKey(shade);\n    setTimeout(() => setCopiedKey(null), 1500);\n  };\n\n  return (\n    <Box>\n      <ColorGroupTitle>{name}</ColorGroupTitle>\n      <ColorRow>\n        {Object.entries(colors).map(([shade, hex]) => (\n          <ColorSwatch\n            key={shade}\n            bgColor={hex}\n            isLight={isLightColor(hex)}\n            onClick={() => handleCopy(shade, hex)}\n            title={`Click to copy ${hex}`}\n          >\n            <SwatchLabel>{copiedKey === shade ? 'Copied!' : shade}</SwatchLabel>\n            <SwatchHex>{hex}</SwatchHex>\n          </ColorSwatch>\n        ))}\n      </ColorRow>\n    </Box>\n  );\n};\n\n//\n//\n\nconst ColorsDisplay = () => {\n  const theme = useTheme();\n  const { colors } = theme.palette;\n\n  const colorScales = [\n    { name: 'Primary', colors: colors.primary },\n    { name: 'Secondary', colors: colors.secondary },\n    { name: 'Neutral', colors: colors.neutral },\n    { name: 'Green', colors: colors.green },\n    { name: 'Blue', colors: colors.blue },\n    { name: 'Yellow', colors: colors.yellow },\n    { name: 'Orange', colors: colors.orange },\n    { name: 'Red', colors: colors.red },\n    { name: 'Base', colors: colors.base },\n  ];\n\n  return (\n    <ColorSwatchContainer>\n      <Box>\n        <Typography variant=\"h4\" sx={{ mb: 1 }}>\n          Parcel Design System Colors\n        </Typography>\n        <Typography variant=\"body2\" color=\"text.secondary\" sx={{ mb: 2 }}>\n          <strong>How to use in React:</strong> <code>theme.palette.colors.&#123;name&#125;[shade]</code>\n        </Typography>\n        <Typography variant=\"body2\" color=\"text.secondary\" sx={{ mb: 4 }}>\n          <strong>How to use in CSS:</strong> <code>var(--zid-color-&#123;name&#125;-&#123;shade&#125;)</code>\n        </Typography>\n      </Box>\n\n      {colorScales.map(({ name, colors }) => (\n        <ColorScaleDisplay key={name} name={name} colors={colors} />\n      ))}\n    </ColorSwatchContainer>\n  );\n};\n\n//\n//\n\nconst meta = {\n  title: 'Design System/Colors',\n  component: ColorsDisplay,\n  parameters: {\n    layout: 'fullscreen',\n  },\n  tags: ['autodocs'],\n} satisfies Meta<typeof ColorsDisplay>;\n\nexport default meta;\ntype Story = StoryObj<typeof meta>;\n\nexport const AllColors: Story = {};\n"],"names":["styled","Box","Typography","useState","jsx","jsxs","useTheme","colors"],"mappings":"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"}