@zidsa/zidmui 2.1.8 → 2.3.0-beta.0

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

@@ -1,119 +0,0 @@
-"use strict";
-Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
-const jsxRuntime = require("react/jsx-runtime");
-const material = require("@mui/material");
-const appButton = require("../../components/app-button.js");
-const appTooltip = require("../../components/app-tooltip.js");
-const appTypography = require("../../components/app-typography.js");
-const stackColumn = require("../../components/stack-column.js");
-const stackRow = require("../../components/stack-row.js");
-const useToggle = require("../../hooks/use-toggle.js");
-const meta = {
-  title: "React/App Tooltip",
-  component: appTooltip.AppTooltip,
-  parameters: {
-    layout: "centered"
-  },
-  tags: ["autodocs"],
-  argTypes: {
-    arrow: {
-      control: "boolean"
-    },
-    placement: {
-      control: "select",
-      options: [
-        "auto",
-        "auto-start",
-        "auto-end",
-        "top",
-        "bottom",
-        "left",
-        "right",
-        "top-start",
-        "top-end",
-        "bottom-start",
-        "bottom-end",
-        "right-start",
-        "right-end",
-        "left-start",
-        "left-end"
-      ]
-    },
-    children: {
-      control: "text"
-    }
-  }
-};
-const Variants = {
-  args: {
-    headline: "Total sales over time",
-    description: "Amount spent (subtotal, taxes, shipping, returns, discounts, fees, etc.)",
-    children: /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, {}),
-    placement: "top"
-  },
-  render: (args) => /* @__PURE__ */ jsxRuntime.jsx(AppTooltips, { ...args })
-};
-const AppTooltips = (props) => {
-  const toggle = useToggle.useToggle();
-  const theme = material.useTheme();
-  return /* @__PURE__ */ jsxRuntime.jsxs(stackRow.StackRow, { gap: 4, children: [
-    /* @__PURE__ */ jsxRuntime.jsxs(stackColumn.StackColumn, { gap: 4, children: [
-      /* @__PURE__ */ jsxRuntime.jsx(appTooltip.AppTooltip, { ...props, description: "", children: /* @__PURE__ */ jsxRuntime.jsx(appButton.AppButton, { variant: "outlined", children: "Default" }) }),
-      /* @__PURE__ */ jsxRuntime.jsx(appTooltip.AppTooltip, { disableFocusListener: true, ...props, headline: "", children: /* @__PURE__ */ jsxRuntime.jsx(appButton.AppButton, { variant: "outlined", children: "Hover or touch" }) }),
-      /* @__PURE__ */ jsxRuntime.jsx(appTooltip.AppTooltip, { disableHoverListener: true, ...props, children: /* @__PURE__ */ jsxRuntime.jsx(appButton.AppButton, { variant: "outlined", children: "Focus or touch" }) }),
-      /* @__PURE__ */ jsxRuntime.jsx(appTooltip.AppTooltip, { disableFocusListener: true, disableTouchListener: true, ...props, children: /* @__PURE__ */ jsxRuntime.jsx(appButton.AppButton, { variant: "outlined", children: "Hover" }) }),
-      /* @__PURE__ */ jsxRuntime.jsx(material.ClickAwayListener, { onClickAway: toggle.off, children: /* @__PURE__ */ jsxRuntime.jsx(
-        appTooltip.AppTooltip,
-        {
-          onClose: toggle.off,
-          open: toggle.value,
-          disableFocusListener: true,
-          disableHoverListener: true,
-          disableTouchListener: true,
-          slotProps: {
-            popper: {
-              disablePortal: true
-            }
-          },
-          ...props,
-          children: /* @__PURE__ */ jsxRuntime.jsx(appButton.AppButton, { variant: "outlined", onClick: toggle.on, children: "Click" })
-        }
-      ) })
-    ] }),
-    /* @__PURE__ */ jsxRuntime.jsxs(stackColumn.StackColumn, { gap: 4, children: [
-      /* @__PURE__ */ jsxRuntime.jsx(appTooltip.AppTooltip, { ...props, headline: "This is headline only", description: "", children: /* @__PURE__ */ jsxRuntime.jsx(appButton.AppButton, { variant: "outlined", children: "Headline only" }) }),
-      /* @__PURE__ */ jsxRuntime.jsx(appTooltip.AppTooltip, { ...props, headline: "", description: "This is description only", children: /* @__PURE__ */ jsxRuntime.jsx(appButton.AppButton, { variant: "outlined", children: "Description only" }) }),
-      /* @__PURE__ */ jsxRuntime.jsx(
-        appTooltip.AppTooltip,
-        {
-          ...props,
-          headline: "This is headline and description",
-          description: "This is description",
-          children: /* @__PURE__ */ jsxRuntime.jsx(appButton.AppButton, { variant: "outlined", children: "Headline and description" })
-        }
-      ),
-      /* @__PURE__ */ jsxRuntime.jsx(appTooltip.AppTooltip, { ...props, headline: "This is headline and description", children: /* @__PURE__ */ jsxRuntime.jsx(appButton.AppButton, { variant: "outlined", children: "Headline and description" }) }),
-      /* @__PURE__ */ jsxRuntime.jsx(
-        appTooltip.AppTooltip,
-        {
-          ...props,
-          content: /* @__PURE__ */ jsxRuntime.jsxs(material.Box, { children: [
-            /* @__PURE__ */ jsxRuntime.jsxs(DescriptionTypography, { component: "span", color: theme.palette.colors.green[400], children: [
-              "Total sales =",
-              " "
-            ] }),
-            /* @__PURE__ */ jsxRuntime.jsx(DescriptionTypography, { component: "span", color: theme.palette.colors.primary[400], children: "net sales + additonal fees + duties + shipping charges + taxes" })
-          ] }),
-          children: /* @__PURE__ */ jsxRuntime.jsx(appButton.AppButton, { variant: "outlined", children: "With custom content" })
-        }
-      )
-    ] })
-  ] });
-};
-const DescriptionTypography = material.styled(appTypography.AppTypography)(({ theme }) => ({
-  fontWeight: 400,
-  fontSize: theme.spacing(1.5)
-}));
-exports.Variants = Variants;
-exports.default = meta;
-//# sourceMappingURL=AppTooltip.stories.js.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"AppTooltip.stories.js","sources":["../../../../../src/stories/react/AppTooltip.stories.tsx"],"sourcesContent":["import type { Meta, StoryObj } from '@storybook/react-vite';\n\nimport { Box, ClickAwayListener, styled, useTheme } from '@mui/material';\n\nimport { AppButton } from '~/components/app-button';\nimport { AppTooltip, AppTooltipProps } from '~/components/app-tooltip';\nimport { AppTypography } from '~/components/app-typography';\nimport { StackColumn } from '~/components/stack-column';\nimport { StackRow } from '~/components/stack-row';\nimport { useToggle } from '~/hooks/use-toggle';\n\n//\n//\n\n// Meta\nconst meta = {\n  title: 'React/App Tooltip',\n  component: AppTooltip,\n  parameters: {\n    layout: 'centered',\n  },\n  tags: ['autodocs'],\n  argTypes: {\n    arrow: {\n      control: 'boolean',\n    },\n    placement: {\n      control: 'select',\n      options: [\n        'auto',\n        'auto-start',\n        'auto-end',\n        'top',\n        'bottom',\n        'left',\n        'right',\n        'top-start',\n        'top-end',\n        'bottom-start',\n        'bottom-end',\n        'right-start',\n        'right-end',\n        'left-start',\n        'left-end',\n      ],\n    },\n    children: {\n      control: 'text',\n    },\n  },\n} satisfies Meta<typeof AppTooltip>;\n\nexport default meta;\ntype Story = StoryObj<typeof meta>;\n\n//\n\nexport const Variants: Story = {\n  args: {\n    headline: 'Total sales over time',\n    description: 'Amount spent (subtotal, taxes, shipping, returns, discounts, fees, etc.)',\n    children: <></>,\n    placement: 'top',\n  },\n  render: args => <AppTooltips {...args} />,\n};\n\n//\n\nconst AppTooltips = (props: AppTooltipProps) => {\n  const toggle = useToggle();\n  const theme = useTheme();\n\n  return (\n    <StackRow gap={4}>\n      <StackColumn gap={4}>\n        <AppTooltip {...props} description=\"\">\n          <AppButton variant=\"outlined\">Default</AppButton>\n        </AppTooltip>\n\n        <AppTooltip disableFocusListener {...props} headline=\"\">\n          <AppButton variant=\"outlined\">Hover or touch</AppButton>\n        </AppTooltip>\n\n        <AppTooltip disableHoverListener {...props}>\n          <AppButton variant=\"outlined\">Focus or touch</AppButton>\n        </AppTooltip>\n\n        <AppTooltip disableFocusListener disableTouchListener {...props}>\n          <AppButton variant=\"outlined\">Hover</AppButton>\n        </AppTooltip>\n\n        <ClickAwayListener onClickAway={toggle.off}>\n          <AppTooltip\n            onClose={toggle.off}\n            open={toggle.value}\n            disableFocusListener\n            disableHoverListener\n            disableTouchListener\n            slotProps={{\n              popper: {\n                disablePortal: true,\n              },\n            }}\n            {...props}\n          >\n            <AppButton variant=\"outlined\" onClick={toggle.on}>\n              Click\n            </AppButton>\n          </AppTooltip>\n        </ClickAwayListener>\n      </StackColumn>\n\n      {/*  */}\n\n      <StackColumn gap={4}>\n        <AppTooltip {...props} headline=\"This is headline only\" description=\"\">\n          <AppButton variant=\"outlined\">Headline only</AppButton>\n        </AppTooltip>\n\n        <AppTooltip {...props} headline=\"\" description=\"This is description only\">\n          <AppButton variant=\"outlined\">Description only</AppButton>\n        </AppTooltip>\n\n        <AppTooltip\n          {...props}\n          headline=\"This is headline and description\"\n          description=\"This is description\"\n        >\n          <AppButton variant=\"outlined\">Headline and description</AppButton>\n        </AppTooltip>\n\n        <AppTooltip {...props} headline=\"This is headline and description\">\n          <AppButton variant=\"outlined\">Headline and description</AppButton>\n        </AppTooltip>\n\n        <AppTooltip\n          {...props}\n          content={\n            <Box>\n              <DescriptionTypography component=\"span\" color={theme.palette.colors.green[400]}>\n                Total sales ={' '}\n              </DescriptionTypography>\n              <DescriptionTypography component=\"span\" color={theme.palette.colors.primary[400]}>\n                net sales + additonal fees + duties + shipping charges + taxes\n              </DescriptionTypography>\n            </Box>\n          }\n        >\n          <AppButton variant=\"outlined\">With custom content</AppButton>\n        </AppTooltip>\n      </StackColumn>\n    </StackRow>\n  );\n};\n\n//\n\nconst DescriptionTypography = styled(AppTypography)(({ theme }) => ({\n  fontWeight: 400,\n  fontSize: theme.spacing(1.5),\n}));\n"],"names":["AppTooltip","jsx","Fragment","useToggle","useTheme","jsxs","StackRow","StackColumn","AppButton","ClickAwayListener","Box","styled","AppTypography"],"mappings":"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"}

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

@@ -1,172 +0,0 @@
-"use strict";
-Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
-const jsxRuntime = require("react/jsx-runtime");
-const appTypography = require("../../components/app-typography.js");
-const stackColumn = require("../../components/stack-column.js");
-const meta = {
-  title: "React/App Typography",
-  component: appTypography.AppTypography,
-  parameters: {
-    layout: "centered"
-  },
-  tags: ["autodocs"],
-  argTypes: {
-    variant: {
-      control: "select",
-      options: [
-        "h1",
-        "h2",
-        "h3",
-        "h4",
-        "h5",
-        "h6",
-        "subtitle1",
-        "subtitle2",
-        "body1",
-        "body2",
-        "caption",
-        "overline"
-      ]
-    },
-    color: {
-      control: "select",
-      options: ["primary", "secondary", "textPrimary", "textSecondary", "error"]
-    },
-    align: {
-      control: "select",
-      options: ["left", "center", "right", "justify"]
-    },
-    tooltip: {
-      control: "text"
-    }
-  }
-};
-const Default = {
-  args: {
-    children: "Default typography text"
-  }
-};
-const Headings = {
-  args: {
-    children: null
-  },
-  render: () => /* @__PURE__ */ jsxRuntime.jsxs(stackColumn.StackColumn, { gap: 2, children: [
-    /* @__PURE__ */ jsxRuntime.jsx(appTypography.AppTypography, { variant: "h1", children: "Heading 1" }),
-    /* @__PURE__ */ jsxRuntime.jsx(appTypography.AppTypography, { variant: "h2", children: "Heading 2" }),
-    /* @__PURE__ */ jsxRuntime.jsx(appTypography.AppTypography, { variant: "h3", children: "Heading 3" }),
-    /* @__PURE__ */ jsxRuntime.jsx(appTypography.AppTypography, { variant: "h4", children: "Heading 4" }),
-    /* @__PURE__ */ jsxRuntime.jsx(appTypography.AppTypography, { variant: "h5", children: "Heading 5" }),
-    /* @__PURE__ */ jsxRuntime.jsx(appTypography.AppTypography, { variant: "h6", children: "Heading 6" })
-  ] })
-};
-const BodyText = {
-  args: {
-    children: null
-  },
-  render: () => /* @__PURE__ */ jsxRuntime.jsxs(stackColumn.StackColumn, { gap: 2, children: [
-    /* @__PURE__ */ jsxRuntime.jsx(appTypography.AppTypography, { variant: "body1", children: "Body 1 - Regular body text" }),
-    /* @__PURE__ */ jsxRuntime.jsx(appTypography.AppTypography, { variant: "body2", children: "Body 2 - Smaller body text" }),
-    /* @__PURE__ */ jsxRuntime.jsx(appTypography.AppTypography, { variant: "subtitle1", children: "Subtitle 1" }),
-    /* @__PURE__ */ jsxRuntime.jsx(appTypography.AppTypography, { variant: "subtitle2", children: "Subtitle 2" }),
-    /* @__PURE__ */ jsxRuntime.jsx(appTypography.AppTypography, { variant: "caption", children: "Caption text" }),
-    /* @__PURE__ */ jsxRuntime.jsx(appTypography.AppTypography, { variant: "overline", children: "Overline text" })
-  ] })
-};
-const WithTooltip = {
-  args: {
-    children: "Hover over me to see the tooltip",
-    tooltip: "This is a helpful tooltip message"
-  }
-};
-const Colors = {
-  args: {
-    children: null
-  },
-  render: () => /* @__PURE__ */ jsxRuntime.jsxs(stackColumn.StackColumn, { gap: 2, children: [
-    /* @__PURE__ */ jsxRuntime.jsx(appTypography.AppTypography, { color: "primary", children: "Primary color" }),
-    /* @__PURE__ */ jsxRuntime.jsx(appTypography.AppTypography, { color: "secondary", children: "Secondary color" }),
-    /* @__PURE__ */ jsxRuntime.jsx(appTypography.AppTypography, { color: "textPrimary", children: "Text Primary" }),
-    /* @__PURE__ */ jsxRuntime.jsx(appTypography.AppTypography, { color: "textSecondary", children: "Text Secondary" }),
-    /* @__PURE__ */ jsxRuntime.jsx(appTypography.AppTypography, { color: "error", children: "Error color" })
-  ] })
-};
-const Alignment = {
-  args: {
-    children: null
-  },
-  render: () => /* @__PURE__ */ jsxRuntime.jsxs(stackColumn.StackColumn, { gap: 2, sx: { width: 300 }, children: [
-    /* @__PURE__ */ jsxRuntime.jsx(appTypography.AppTypography, { align: "left", children: "Left aligned text" }),
-    /* @__PURE__ */ jsxRuntime.jsx(appTypography.AppTypography, { align: "center", children: "Center aligned text" }),
-    /* @__PURE__ */ jsxRuntime.jsx(appTypography.AppTypography, { align: "right", children: "Right aligned text" })
-  ] })
-};
-const ArabicHeadings = {
-  args: {
-    children: null
-  },
-  render: () => /* @__PURE__ */ jsxRuntime.jsxs(stackColumn.StackColumn, { gap: 2, dir: "rtl", children: [
-    /* @__PURE__ */ jsxRuntime.jsx(appTypography.AppTypography, { variant: "h1", children: "العنوان الأول" }),
-    /* @__PURE__ */ jsxRuntime.jsx(appTypography.AppTypography, { variant: "h2", children: "العنوان الثاني" }),
-    /* @__PURE__ */ jsxRuntime.jsx(appTypography.AppTypography, { variant: "h3", children: "العنوان الثالث" }),
-    /* @__PURE__ */ jsxRuntime.jsx(appTypography.AppTypography, { variant: "h4", children: "العنوان الرابع" }),
-    /* @__PURE__ */ jsxRuntime.jsx(appTypography.AppTypography, { variant: "h5", children: "العنوان الخامس" }),
-    /* @__PURE__ */ jsxRuntime.jsx(appTypography.AppTypography, { variant: "h6", children: "العنوان السادس" })
-  ] })
-};
-const ArabicBodyText = {
-  args: {
-    children: null
-  },
-  render: () => /* @__PURE__ */ jsxRuntime.jsxs(stackColumn.StackColumn, { gap: 2, dir: "rtl", children: [
-    /* @__PURE__ */ jsxRuntime.jsx(appTypography.AppTypography, { variant: "body1", children: "النص الأساسي - هذا مثال على النص العربي" }),
-    /* @__PURE__ */ jsxRuntime.jsx(appTypography.AppTypography, { variant: "body2", children: "النص الثانوي - نص أصغر حجماً" }),
-    /* @__PURE__ */ jsxRuntime.jsx(appTypography.AppTypography, { variant: "subtitle1", children: "العنوان الفرعي الأول" }),
-    /* @__PURE__ */ jsxRuntime.jsx(appTypography.AppTypography, { variant: "subtitle2", children: "العنوان الفرعي الثاني" }),
-    /* @__PURE__ */ jsxRuntime.jsx(appTypography.AppTypography, { variant: "caption", children: "نص توضيحي صغير" }),
-    /* @__PURE__ */ jsxRuntime.jsx(appTypography.AppTypography, { variant: "overline", children: "نص علوي" })
-  ] })
-};
-const ArabicWithTooltip = {
-  args: {
-    children: "مرر الماوس هنا لرؤية التلميح",
-    tooltip: "هذه رسالة تلميح مفيدة"
-  }
-};
-const ArabicParagraph = {
-  args: {
-    children: null
-  },
-  render: () => /* @__PURE__ */ jsxRuntime.jsxs(stackColumn.StackColumn, { gap: 2, dir: "rtl", sx: { maxWidth: 500 }, children: [
-    /* @__PURE__ */ jsxRuntime.jsx(appTypography.AppTypography, { variant: "h4", children: "مرحباً بك في منصتنا" }),
-    /* @__PURE__ */ jsxRuntime.jsx(appTypography.AppTypography, { variant: "body1", children: "نحن نقدم لك أفضل الحلول التقنية لإدارة متجرك الإلكتروني. ابدأ رحلتك معنا اليوم واكتشف كيف يمكننا مساعدتك في تحقيق أهدافك التجارية." }),
-    /* @__PURE__ */ jsxRuntime.jsx(appTypography.AppTypography, { variant: "body2", color: "textSecondary", children: "للمزيد من المعلومات، تواصل مع فريق الدعم الفني." })
-  ] })
-};
-const MixedContent = {
-  args: {
-    children: null
-  },
-  render: () => /* @__PURE__ */ jsxRuntime.jsxs(stackColumn.StackColumn, { gap: 3, children: [
-    /* @__PURE__ */ jsxRuntime.jsxs(stackColumn.StackColumn, { gap: 1, children: [
-      /* @__PURE__ */ jsxRuntime.jsx(appTypography.AppTypography, { variant: "h5", children: "English Title" }),
-      /* @__PURE__ */ jsxRuntime.jsx(appTypography.AppTypography, { variant: "body1", children: "This is English content for comparison." })
-    ] }),
-    /* @__PURE__ */ jsxRuntime.jsxs(stackColumn.StackColumn, { gap: 1, dir: "rtl", children: [
-      /* @__PURE__ */ jsxRuntime.jsx(appTypography.AppTypography, { variant: "h5", children: "عنوان عربي" }),
-      /* @__PURE__ */ jsxRuntime.jsx(appTypography.AppTypography, { variant: "body1", children: "هذا محتوى عربي للمقارنة." })
-    ] })
-  ] })
-};
-exports.Alignment = Alignment;
-exports.ArabicBodyText = ArabicBodyText;
-exports.ArabicHeadings = ArabicHeadings;
-exports.ArabicParagraph = ArabicParagraph;
-exports.ArabicWithTooltip = ArabicWithTooltip;
-exports.BodyText = BodyText;
-exports.Colors = Colors;
-exports.Default = Default;
-exports.Headings = Headings;
-exports.MixedContent = MixedContent;
-exports.WithTooltip = WithTooltip;
-exports.default = meta;
-//# sourceMappingURL=AppTypography.stories.js.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"AppTypography.stories.js","sources":["../../../../../src/stories/react/AppTypography.stories.tsx"],"sourcesContent":["import type { Meta, StoryObj } from '@storybook/react-vite';\n\nimport { AppTypography } from '~/components/app-typography';\nimport { StackColumn } from '~/components/stack-column';\n\n//\n//\n\n// Meta\nconst meta = {\n  title: 'React/App Typography',\n  component: AppTypography,\n  parameters: {\n    layout: 'centered',\n  },\n  tags: ['autodocs'],\n  argTypes: {\n    variant: {\n      control: 'select',\n      options: [\n        'h1',\n        'h2',\n        'h3',\n        'h4',\n        'h5',\n        'h6',\n        'subtitle1',\n        'subtitle2',\n        'body1',\n        'body2',\n        'caption',\n        'overline',\n      ],\n    },\n    color: {\n      control: 'select',\n      options: ['primary', 'secondary', 'textPrimary', 'textSecondary', 'error'],\n    },\n    align: {\n      control: 'select',\n      options: ['left', 'center', 'right', 'justify'],\n    },\n    tooltip: {\n      control: 'text',\n    },\n  },\n} satisfies Meta<typeof AppTypography>;\n\nexport default meta;\ntype Story = StoryObj<typeof meta>;\n\n//\n\nexport const Default: Story = {\n  args: {\n    children: 'Default typography text',\n  },\n};\n\n//\n\nexport const Headings: Story = {\n  args: {\n    children: null,\n  },\n  render: () => (\n    <StackColumn gap={2}>\n      <AppTypography variant=\"h1\">Heading 1</AppTypography>\n      <AppTypography variant=\"h2\">Heading 2</AppTypography>\n      <AppTypography variant=\"h3\">Heading 3</AppTypography>\n      <AppTypography variant=\"h4\">Heading 4</AppTypography>\n      <AppTypography variant=\"h5\">Heading 5</AppTypography>\n      <AppTypography variant=\"h6\">Heading 6</AppTypography>\n    </StackColumn>\n  ),\n};\n\n//\n\nexport const BodyText: Story = {\n  args: {\n    children: null,\n  },\n  render: () => (\n    <StackColumn gap={2}>\n      <AppTypography variant=\"body1\">Body 1 - Regular body text</AppTypography>\n      <AppTypography variant=\"body2\">Body 2 - Smaller body text</AppTypography>\n      <AppTypography variant=\"subtitle1\">Subtitle 1</AppTypography>\n      <AppTypography variant=\"subtitle2\">Subtitle 2</AppTypography>\n      <AppTypography variant=\"caption\">Caption text</AppTypography>\n      <AppTypography variant=\"overline\">Overline text</AppTypography>\n    </StackColumn>\n  ),\n};\n\n//\n\nexport const WithTooltip: Story = {\n  args: {\n    children: 'Hover over me to see the tooltip',\n    tooltip: 'This is a helpful tooltip message',\n  },\n};\n\n//\n\nexport const Colors: Story = {\n  args: {\n    children: null,\n  },\n  render: () => (\n    <StackColumn gap={2}>\n      <AppTypography color=\"primary\">Primary color</AppTypography>\n      <AppTypography color=\"secondary\">Secondary color</AppTypography>\n      <AppTypography color=\"textPrimary\">Text Primary</AppTypography>\n      <AppTypography color=\"textSecondary\">Text Secondary</AppTypography>\n      <AppTypography color=\"error\">Error color</AppTypography>\n    </StackColumn>\n  ),\n};\n\n//\n\nexport const Alignment: Story = {\n  args: {\n    children: null,\n  },\n  render: () => (\n    <StackColumn gap={2} sx={{ width: 300 }}>\n      <AppTypography align=\"left\">Left aligned text</AppTypography>\n      <AppTypography align=\"center\">Center aligned text</AppTypography>\n      <AppTypography align=\"right\">Right aligned text</AppTypography>\n    </StackColumn>\n  ),\n};\n\n//\n\nexport const ArabicHeadings: Story = {\n  args: {\n    children: null,\n  },\n  render: () => (\n    <StackColumn gap={2} dir=\"rtl\">\n      <AppTypography variant=\"h1\">العنوان الأول</AppTypography>\n      <AppTypography variant=\"h2\">العنوان الثاني</AppTypography>\n      <AppTypography variant=\"h3\">العنوان الثالث</AppTypography>\n      <AppTypography variant=\"h4\">العنوان الرابع</AppTypography>\n      <AppTypography variant=\"h5\">العنوان الخامس</AppTypography>\n      <AppTypography variant=\"h6\">العنوان السادس</AppTypography>\n    </StackColumn>\n  ),\n};\n\n//\n\nexport const ArabicBodyText: Story = {\n  args: {\n    children: null,\n  },\n  render: () => (\n    <StackColumn gap={2} dir=\"rtl\">\n      <AppTypography variant=\"body1\">النص الأساسي - هذا مثال على النص العربي</AppTypography>\n      <AppTypography variant=\"body2\">النص الثانوي - نص أصغر حجماً</AppTypography>\n      <AppTypography variant=\"subtitle1\">العنوان الفرعي الأول</AppTypography>\n      <AppTypography variant=\"subtitle2\">العنوان الفرعي الثاني</AppTypography>\n      <AppTypography variant=\"caption\">نص توضيحي صغير</AppTypography>\n      <AppTypography variant=\"overline\">نص علوي</AppTypography>\n    </StackColumn>\n  ),\n};\n\n//\n\nexport const ArabicWithTooltip: Story = {\n  args: {\n    children: 'مرر الماوس هنا لرؤية التلميح',\n    tooltip: 'هذه رسالة تلميح مفيدة',\n  },\n};\n\n//\n\nexport const ArabicParagraph: Story = {\n  args: {\n    children: null,\n  },\n  render: () => (\n    <StackColumn gap={2} dir=\"rtl\" sx={{ maxWidth: 500 }}>\n      <AppTypography variant=\"h4\">مرحباً بك في منصتنا</AppTypography>\n      <AppTypography variant=\"body1\">\n        نحن نقدم لك أفضل الحلول التقنية لإدارة متجرك الإلكتروني. ابدأ رحلتك معنا اليوم واكتشف كيف\n        يمكننا مساعدتك في تحقيق أهدافك التجارية.\n      </AppTypography>\n      <AppTypography variant=\"body2\" color=\"textSecondary\">\n        للمزيد من المعلومات، تواصل مع فريق الدعم الفني.\n      </AppTypography>\n    </StackColumn>\n  ),\n};\n\n//\n\nexport const MixedContent: Story = {\n  args: {\n    children: null,\n  },\n  render: () => (\n    <StackColumn gap={3}>\n      <StackColumn gap={1}>\n        <AppTypography variant=\"h5\">English Title</AppTypography>\n        <AppTypography variant=\"body1\">This is English content for comparison.</AppTypography>\n      </StackColumn>\n      <StackColumn gap={1} dir=\"rtl\">\n        <AppTypography variant=\"h5\">عنوان عربي</AppTypography>\n        <AppTypography variant=\"body1\">هذا محتوى عربي للمقارنة.</AppTypography>\n      </StackColumn>\n    </StackColumn>\n  ),\n};\n"],"names":["AppTypography","jsxs","StackColumn","jsx"],"mappings":"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"}

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

@@ -1,69 +0,0 @@
-import { jsxs, jsx } from "react/jsx-runtime";
-/* empty css                  */
-import { IconCloseLine } from "../../icons/system/close-line.js";
-const icons = {
-  success: /* @__PURE__ */ jsx("svg", { viewBox: "0 0 24 24", fill: "currentColor", children: /* @__PURE__ */ jsx("path", { d: "M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z" }) }),
-  info: /* @__PURE__ */ jsx("svg", { viewBox: "0 0 24 24", fill: "currentColor", children: /* @__PURE__ */ jsx("path", { d: "M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-6h2v6zm0-8h-2V7h2v2z" }) }),
-  warning: /* @__PURE__ */ jsx("svg", { viewBox: "0 0 24 24", fill: "currentColor", children: /* @__PURE__ */ jsx("path", { d: "M1 21h22L12 2 1 21zm12-3h-2v-2h2v2zm0-4h-2v-4h2v4z" }) }),
-  error: /* @__PURE__ */ jsx("svg", { viewBox: "0 0 24 24", fill: "currentColor", children: /* @__PURE__ */ jsx("path", { d: "M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-2h2v2zm0-4h-2V7h2v6z" }) })
-};
-const meta = {
-  title: "CSS Styles/Components/Alert",
-  parameters: {
-    layout: "centered"
-  },
-  tags: ["autodocs"]
-};
-const WithTitle = {
-  render: () => {
-    return /* @__PURE__ */ jsxs("div", { style: { display: "flex", flexDirection: "column", gap: "24px" }, children: [
-      /* @__PURE__ */ jsx(
-        "h3",
-        {
-          style: {
-            marginBottom: "8px",
-            fontFamily: "var(--zid-font-family)"
-          },
-          children: "Alerts with Title"
-        }
-      ),
-      /* @__PURE__ */ jsxs("div", { className: "zid-alert zid-alert--success", children: [
-        /* @__PURE__ */ jsx("div", { className: "zid-alert__icon", children: icons.success }),
-        /* @__PURE__ */ jsxs("div", { className: "zid-alert__content", children: [
-          /* @__PURE__ */ jsx("div", { className: "zid-alert__title", children: "Success" }),
-          /* @__PURE__ */ jsx("div", { className: "zid-alert__message", children: "Your order has been placed successfully." })
-        ] }),
-        /* @__PURE__ */ jsx("button", { className: "zid-alert__close", "aria-label": "Close", children: /* @__PURE__ */ jsx(IconCloseLine, {}) })
-      ] }),
-      /* @__PURE__ */ jsxs("div", { className: "zid-alert zid-alert--info", children: [
-        /* @__PURE__ */ jsx("div", { className: "zid-alert__icon", children: icons.info }),
-        /* @__PURE__ */ jsxs("div", { className: "zid-alert__content", children: [
-          /* @__PURE__ */ jsx("div", { className: "zid-alert__title", children: "Information" }),
-          /* @__PURE__ */ jsx("div", { className: "zid-alert__message", children: "This alert has a title and a message for more context." })
-        ] }),
-        /* @__PURE__ */ jsx("button", { className: "zid-alert__close", "aria-label": "Close", children: /* @__PURE__ */ jsx(IconCloseLine, {}) })
-      ] }),
-      /* @__PURE__ */ jsxs("div", { className: "zid-alert zid-alert--warning", children: [
-        /* @__PURE__ */ jsx("div", { className: "zid-alert__icon", children: icons.warning }),
-        /* @__PURE__ */ jsxs("div", { className: "zid-alert__content", children: [
-          /* @__PURE__ */ jsx("div", { className: "zid-alert__title", children: "Warning" }),
-          /* @__PURE__ */ jsx("div", { className: "zid-alert__message", children: "Your session will expire in 5 minutes." })
-        ] }),
-        /* @__PURE__ */ jsx("button", { className: "zid-alert__close", "aria-label": "Close", children: /* @__PURE__ */ jsx(IconCloseLine, {}) })
-      ] }),
-      /* @__PURE__ */ jsxs("div", { className: "zid-alert zid-alert--error", children: [
-        /* @__PURE__ */ jsx("div", { className: "zid-alert__icon", children: icons.error }),
-        /* @__PURE__ */ jsxs("div", { className: "zid-alert__content", children: [
-          /* @__PURE__ */ jsx("div", { className: "zid-alert__title", children: "Error" }),
-          /* @__PURE__ */ jsx("div", { className: "zid-alert__message", children: "Failed to save changes. Please try again." })
-        ] }),
-        /* @__PURE__ */ jsx("button", { className: "zid-alert__close", "aria-label": "Close", children: /* @__PURE__ */ jsx(IconCloseLine, {}) })
-      ] })
-    ] });
-  }
-};
-export {
-  WithTitle,
-  meta as default
-};
-//# sourceMappingURL=Alert.stories.js.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"Alert.stories.js","sources":["../../../../../src/stories/css/Alert.stories.tsx"],"sourcesContent":["import type { StoryObj } from '@storybook/react-vite';\nimport '../../css/index.css';\nimport { IconCloseLine } from '~/icons/system/close-line';\n\n//\n//\n\nconst icons = {\n  success: (\n    <svg viewBox=\"0 0 24 24\" fill=\"currentColor\">\n      <path d=\"M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z\" />\n    </svg>\n  ),\n  info: (\n    <svg viewBox=\"0 0 24 24\" fill=\"currentColor\">\n      <path d=\"M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-6h2v6zm0-8h-2V7h2v2z\" />\n    </svg>\n  ),\n  warning: (\n    <svg viewBox=\"0 0 24 24\" fill=\"currentColor\">\n      <path d=\"M1 21h22L12 2 1 21zm12-3h-2v-2h2v2zm0-4h-2v-4h2v4z\" />\n    </svg>\n  ),\n  error: (\n    <svg viewBox=\"0 0 24 24\" fill=\"currentColor\">\n      <path d=\"M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-2h2v2zm0-4h-2V7h2v6z\" />\n    </svg>\n  ),\n};\n\n// Meta\nconst meta = {\n  title: 'CSS Styles/Components/Alert',\n  parameters: {\n    layout: 'centered',\n  },\n  tags: ['autodocs'],\n};\n\nexport default meta;\ntype Story = StoryObj<typeof meta>;\n\n//\n\nexport const WithTitle: Story = {\n  render: () => {\n    return (\n      <div style={{ display: 'flex', flexDirection: 'column', gap: '24px' }}>\n        <h3\n          style={{\n            marginBottom: '8px',\n            fontFamily: 'var(--zid-font-family)',\n          }}\n        >\n          Alerts with Title\n        </h3>\n\n        <div className=\"zid-alert zid-alert--success\">\n          <div className=\"zid-alert__icon\">{icons.success}</div>\n          <div className=\"zid-alert__content\">\n            <div className=\"zid-alert__title\">Success</div>\n            <div className=\"zid-alert__message\">Your order has been placed successfully.</div>\n          </div>\n          <button className=\"zid-alert__close\" aria-label=\"Close\">\n            <IconCloseLine />\n          </button>\n        </div>\n\n        <div className=\"zid-alert zid-alert--info\">\n          <div className=\"zid-alert__icon\">{icons.info}</div>\n          <div className=\"zid-alert__content\">\n            <div className=\"zid-alert__title\">Information</div>\n            <div className=\"zid-alert__message\">\n              This alert has a title and a message for more context.\n            </div>\n          </div>\n          <button className=\"zid-alert__close\" aria-label=\"Close\">\n            <IconCloseLine />\n          </button>\n        </div>\n\n        <div className=\"zid-alert zid-alert--warning\">\n          <div className=\"zid-alert__icon\">{icons.warning}</div>\n          <div className=\"zid-alert__content\">\n            <div className=\"zid-alert__title\">Warning</div>\n            <div className=\"zid-alert__message\">Your session will expire in 5 minutes.</div>\n          </div>\n          <button className=\"zid-alert__close\" aria-label=\"Close\">\n            <IconCloseLine />\n          </button>\n        </div>\n\n        <div className=\"zid-alert zid-alert--error\">\n          <div className=\"zid-alert__icon\">{icons.error}</div>\n          <div className=\"zid-alert__content\">\n            <div className=\"zid-alert__title\">Error</div>\n            <div className=\"zid-alert__message\">Failed to save changes. Please try again.</div>\n          </div>\n          <button className=\"zid-alert__close\" aria-label=\"Close\">\n            <IconCloseLine />\n          </button>\n        </div>\n      </div>\n    );\n  },\n};\n"],"names":[],"mappings":"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"}

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

@@ -1,133 +0,0 @@
-import { jsxs, jsx } from "react/jsx-runtime";
-/* empty css                  */
-const meta = {
-  title: "CSS Styles/Components/Button",
-  parameters: {
-    layout: "centered"
-  },
-  tags: ["autodocs"]
-};
-const Variants = {
-  render: () => /* @__PURE__ */ jsxs("div", { style: { display: "flex", flexDirection: "column", gap: "32px" }, children: [
-    /* @__PURE__ */ jsxs("div", { children: [
-      /* @__PURE__ */ jsx("h3", { style: { marginBottom: "16px", fontFamily: "var(--zid-font-family)" }, children: "Contained" }),
-      /* @__PURE__ */ jsxs("div", { style: { display: "flex", gap: "16px", flexWrap: "wrap" }, children: [
-        /* @__PURE__ */ jsx("button", { className: "zid-button zid-button--contained zid-button--primary zid-button--md", children: "Primary" }),
-        /* @__PURE__ */ jsx("button", { className: "zid-button zid-button--contained zid-button--secondary zid-button--md", children: "Secondary" }),
-        /* @__PURE__ */ jsx("button", { className: "zid-button zid-button--contained zid-button--error zid-button--md", children: "Error" }),
-        /* @__PURE__ */ jsx("button", { className: "zid-button zid-button--contained zid-button--primary zid-button--md", disabled: true, children: "Disabled" })
-      ] })
-    ] }),
-    /* @__PURE__ */ jsxs("div", { children: [
-      /* @__PURE__ */ jsx("h3", { style: { marginBottom: "16px", fontFamily: "var(--zid-font-family)" }, children: "Outlined" }),
-      /* @__PURE__ */ jsxs("div", { style: { display: "flex", gap: "16px", flexWrap: "wrap" }, children: [
-        /* @__PURE__ */ jsx("button", { className: "zid-button zid-button--outlined zid-button--primary zid-button--md", children: "Primary" }),
-        /* @__PURE__ */ jsx("button", { className: "zid-button zid-button--outlined zid-button--secondary zid-button--md", children: "Secondary" }),
-        /* @__PURE__ */ jsx("button", { className: "zid-button zid-button--outlined zid-button--error zid-button--md", children: "Error" }),
-        /* @__PURE__ */ jsx("button", { className: "zid-button zid-button--outlined zid-button--primary zid-button--md", disabled: true, children: "Disabled" })
-      ] })
-    ] }),
-    /* @__PURE__ */ jsxs("div", { children: [
-      /* @__PURE__ */ jsx("h3", { style: { marginBottom: "16px", fontFamily: "var(--zid-font-family)" }, children: "Text" }),
-      /* @__PURE__ */ jsxs("div", { style: { display: "flex", gap: "16px", flexWrap: "wrap" }, children: [
-        /* @__PURE__ */ jsx("button", { className: "zid-button zid-button--text zid-button--primary zid-button--md", children: "Primary" }),
-        /* @__PURE__ */ jsx("button", { className: "zid-button zid-button--text zid-button--secondary zid-button--md", children: "Secondary" }),
-        /* @__PURE__ */ jsx("button", { className: "zid-button zid-button--text zid-button--error zid-button--md", children: "Error" }),
-        /* @__PURE__ */ jsx("button", { className: "zid-button zid-button--text zid-button--primary zid-button--md", disabled: true, children: "Disabled" })
-      ] })
-    ] })
-  ] })
-};
-const Sizes = {
-  render: () => /* @__PURE__ */ jsxs("div", { style: { display: "flex", flexDirection: "column", gap: "32px" }, children: [
-    /* @__PURE__ */ jsxs("div", { children: [
-      /* @__PURE__ */ jsx("h3", { style: { marginBottom: "16px", fontFamily: "var(--zid-font-family)" }, children: "Contained Sizes" }),
-      /* @__PURE__ */ jsxs("div", { style: { display: "flex", gap: "16px", alignItems: "center", flexWrap: "wrap" }, children: [
-        /* @__PURE__ */ jsx("button", { className: "zid-button zid-button--contained zid-button--primary zid-button--sm", children: "Small" }),
-        /* @__PURE__ */ jsx("button", { className: "zid-button zid-button--contained zid-button--primary zid-button--md", children: "Medium" }),
-        /* @__PURE__ */ jsx("button", { className: "zid-button zid-button--contained zid-button--primary zid-button--lg", children: "Large" })
-      ] })
-    ] }),
-    /* @__PURE__ */ jsxs("div", { children: [
-      /* @__PURE__ */ jsx("h3", { style: { marginBottom: "16px", fontFamily: "var(--zid-font-family)" }, children: "Outlined Sizes" }),
-      /* @__PURE__ */ jsxs("div", { style: { display: "flex", gap: "16px", alignItems: "center", flexWrap: "wrap" }, children: [
-        /* @__PURE__ */ jsx("button", { className: "zid-button zid-button--outlined zid-button--primary zid-button--sm", children: "Small" }),
-        /* @__PURE__ */ jsx("button", { className: "zid-button zid-button--outlined zid-button--primary zid-button--md", children: "Medium" }),
-        /* @__PURE__ */ jsx("button", { className: "zid-button zid-button--outlined zid-button--primary zid-button--lg", children: "Large" })
-      ] })
-    ] }),
-    /* @__PURE__ */ jsxs("div", { children: [
-      /* @__PURE__ */ jsx("h3", { style: { marginBottom: "16px", fontFamily: "var(--zid-font-family)" }, children: "Text Sizes" }),
-      /* @__PURE__ */ jsxs("div", { style: { display: "flex", gap: "16px", alignItems: "center", flexWrap: "wrap" }, children: [
-        /* @__PURE__ */ jsx("button", { className: "zid-button zid-button--text zid-button--primary zid-button--sm", children: "Small" }),
-        /* @__PURE__ */ jsx("button", { className: "zid-button zid-button--text zid-button--primary zid-button--md", children: "Medium" }),
-        /* @__PURE__ */ jsx("button", { className: "zid-button zid-button--text zid-button--primary zid-button--lg", children: "Large" })
-      ] })
-    ] })
-  ] })
-};
-const States = {
-  render: () => /* @__PURE__ */ jsxs("div", { style: { display: "flex", flexDirection: "column", gap: "32px" }, children: [
-    /* @__PURE__ */ jsxs("div", { children: [
-      /* @__PURE__ */ jsx("h3", { style: { marginBottom: "16px", fontFamily: "var(--zid-font-family)" }, children: "Interactive States (hover to see)" }),
-      /* @__PURE__ */ jsxs("div", { style: { display: "flex", gap: "16px", flexWrap: "wrap" }, children: [
-        /* @__PURE__ */ jsx("button", { className: "zid-button zid-button--contained zid-button--primary zid-button--md", children: "Default" }),
-        /* @__PURE__ */ jsx("button", { className: "zid-button zid-button--contained zid-button--primary zid-button--md", disabled: true, children: "Disabled" })
-      ] })
-    ] }),
-    /* @__PURE__ */ jsxs("div", { children: [
-      /* @__PURE__ */ jsx("h3", { style: { marginBottom: "16px", fontFamily: "var(--zid-font-family)" }, children: "All Colors - Disabled State" }),
-      /* @__PURE__ */ jsxs("div", { style: { display: "flex", gap: "16px", flexWrap: "wrap" }, children: [
-        /* @__PURE__ */ jsx("button", { className: "zid-button zid-button--contained zid-button--primary zid-button--md", disabled: true, children: "Primary" }),
-        /* @__PURE__ */ jsx("button", { className: "zid-button zid-button--outlined zid-button--secondary zid-button--md", disabled: true, children: "Secondary" }),
-        /* @__PURE__ */ jsx("button", { className: "zid-button zid-button--text zid-button--error zid-button--md", disabled: true, children: "Error" })
-      ] })
-    ] })
-  ] })
-};
-const FullWidth = {
-  render: () => /* @__PURE__ */ jsxs("div", { style: { display: "flex", flexDirection: "column", gap: "16px", width: "400px" }, children: [
-    /* @__PURE__ */ jsx("h3", { style: { marginBottom: "8px", fontFamily: "var(--zid-font-family)" }, children: "Full Width Buttons" }),
-    /* @__PURE__ */ jsx("button", { className: "zid-button zid-button--contained zid-button--primary zid-button--md zid-button--full-width", children: "Full Width Primary" }),
-    /* @__PURE__ */ jsx("button", { className: "zid-button zid-button--outlined zid-button--secondary zid-button--md zid-button--full-width", children: "Full Width Secondary" }),
-    /* @__PURE__ */ jsx("button", { className: "zid-button zid-button--text zid-button--error zid-button--md zid-button--full-width", children: "Full Width Error" })
-  ] })
-};
-const IconButton = {
-  render: () => /* @__PURE__ */ jsxs("div", { style: { display: "flex", flexDirection: "column", gap: "32px" }, children: [
-    /* @__PURE__ */ jsxs("div", { children: [
-      /* @__PURE__ */ jsx("h3", { style: { marginBottom: "16px", fontFamily: "var(--zid-font-family)" }, children: "Icon Only Buttons" }),
-      /* @__PURE__ */ jsxs("div", { style: { display: "flex", gap: "16px", alignItems: "center", flexWrap: "wrap" }, children: [
-        /* @__PURE__ */ jsx("button", { className: "zid-button zid-button--contained zid-button--primary zid-button--sm zid-button--icon-only", children: /* @__PURE__ */ jsx("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "currentColor", children: /* @__PURE__ */ jsx("path", { d: "M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z" }) }) }),
-        /* @__PURE__ */ jsx("button", { className: "zid-button zid-button--contained zid-button--primary zid-button--md zid-button--icon-only", children: /* @__PURE__ */ jsx("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "currentColor", children: /* @__PURE__ */ jsx("path", { d: "M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z" }) }) }),
-        /* @__PURE__ */ jsx("button", { className: "zid-button zid-button--contained zid-button--primary zid-button--lg zid-button--icon-only", children: /* @__PURE__ */ jsx("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "currentColor", children: /* @__PURE__ */ jsx("path", { d: "M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z" }) }) })
-      ] })
-    ] }),
-    /* @__PURE__ */ jsxs("div", { children: [
-      /* @__PURE__ */ jsx("h3", { style: { marginBottom: "16px", fontFamily: "var(--zid-font-family)" }, children: "Buttons with Icons" }),
-      /* @__PURE__ */ jsxs("div", { style: { display: "flex", gap: "16px", flexWrap: "wrap" }, children: [
-        /* @__PURE__ */ jsxs("button", { className: "zid-button zid-button--contained zid-button--primary zid-button--md", children: [
-          /* @__PURE__ */ jsx("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "currentColor", children: /* @__PURE__ */ jsx("path", { d: "M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z" }) }),
-          "Add Item"
-        ] }),
-        /* @__PURE__ */ jsxs("button", { className: "zid-button zid-button--outlined zid-button--secondary zid-button--md", children: [
-          /* @__PURE__ */ jsx("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "currentColor", children: /* @__PURE__ */ jsx("path", { d: "M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04c.39-.39.39-1.02 0-1.41l-2.34-2.34c-.39-.39-1.02-.39-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z" }) }),
-          "Edit"
-        ] }),
-        /* @__PURE__ */ jsxs("button", { className: "zid-button zid-button--text zid-button--error zid-button--md", children: [
-          /* @__PURE__ */ jsx("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "currentColor", children: /* @__PURE__ */ jsx("path", { d: "M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z" }) }),
-          "Delete"
-        ] })
-      ] })
-    ] })
-  ] })
-};
-export {
-  FullWidth,
-  IconButton,
-  Sizes,
-  States,
-  Variants,
-  meta as default
-};
-//# sourceMappingURL=Button.stories.js.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"Button.stories.js","sources":["../../../../../src/stories/css/Button.stories.tsx"],"sourcesContent":["import type { StoryObj } from '@storybook/react-vite';\nimport '../../css/index.css';\n\nconst meta = {\n  title: 'CSS Styles/Components/Button',\n  parameters: {\n    layout: 'centered',\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: '32px' }}>\n      <div>\n        <h3 style={{ marginBottom: '16px', fontFamily: 'var(--zid-font-family)' }}>Contained</h3>\n        <div style={{ display: 'flex', gap: '16px', flexWrap: 'wrap' }}>\n          <button className=\"zid-button zid-button--contained zid-button--primary zid-button--md\">Primary</button>\n          <button className=\"zid-button zid-button--contained zid-button--secondary zid-button--md\">Secondary</button>\n          <button className=\"zid-button zid-button--contained zid-button--error zid-button--md\">Error</button>\n          <button className=\"zid-button zid-button--contained zid-button--primary zid-button--md\" disabled>Disabled</button>\n        </div>\n      </div>\n\n      <div>\n        <h3 style={{ marginBottom: '16px', fontFamily: 'var(--zid-font-family)' }}>Outlined</h3>\n        <div style={{ display: 'flex', gap: '16px', flexWrap: 'wrap' }}>\n          <button className=\"zid-button zid-button--outlined zid-button--primary zid-button--md\">Primary</button>\n          <button className=\"zid-button zid-button--outlined zid-button--secondary zid-button--md\">Secondary</button>\n          <button className=\"zid-button zid-button--outlined zid-button--error zid-button--md\">Error</button>\n          <button className=\"zid-button zid-button--outlined zid-button--primary zid-button--md\" disabled>Disabled</button>\n        </div>\n      </div>\n\n      <div>\n        <h3 style={{ marginBottom: '16px', fontFamily: 'var(--zid-font-family)' }}>Text</h3>\n        <div style={{ display: 'flex', gap: '16px', flexWrap: 'wrap' }}>\n          <button className=\"zid-button zid-button--text zid-button--primary zid-button--md\">Primary</button>\n          <button className=\"zid-button zid-button--text zid-button--secondary zid-button--md\">Secondary</button>\n          <button className=\"zid-button zid-button--text zid-button--error zid-button--md\">Error</button>\n          <button className=\"zid-button zid-button--text zid-button--primary zid-button--md\" disabled>Disabled</button>\n        </div>\n      </div>\n    </div>\n  ),\n};\n\nexport const Sizes: Story = {\n  render: () => (\n    <div style={{ display: 'flex', flexDirection: 'column', gap: '32px' }}>\n      <div>\n        <h3 style={{ marginBottom: '16px', fontFamily: 'var(--zid-font-family)' }}>Contained Sizes</h3>\n        <div style={{ display: 'flex', gap: '16px', alignItems: 'center', flexWrap: 'wrap' }}>\n          <button className=\"zid-button zid-button--contained zid-button--primary zid-button--sm\">Small</button>\n          <button className=\"zid-button zid-button--contained zid-button--primary zid-button--md\">Medium</button>\n          <button className=\"zid-button zid-button--contained zid-button--primary zid-button--lg\">Large</button>\n        </div>\n      </div>\n\n      <div>\n        <h3 style={{ marginBottom: '16px', fontFamily: 'var(--zid-font-family)' }}>Outlined Sizes</h3>\n        <div style={{ display: 'flex', gap: '16px', alignItems: 'center', flexWrap: 'wrap' }}>\n          <button className=\"zid-button zid-button--outlined zid-button--primary zid-button--sm\">Small</button>\n          <button className=\"zid-button zid-button--outlined zid-button--primary zid-button--md\">Medium</button>\n          <button className=\"zid-button zid-button--outlined zid-button--primary zid-button--lg\">Large</button>\n        </div>\n      </div>\n\n      <div>\n        <h3 style={{ marginBottom: '16px', fontFamily: 'var(--zid-font-family)' }}>Text Sizes</h3>\n        <div style={{ display: 'flex', gap: '16px', alignItems: 'center', flexWrap: 'wrap' }}>\n          <button className=\"zid-button zid-button--text zid-button--primary zid-button--sm\">Small</button>\n          <button className=\"zid-button zid-button--text zid-button--primary zid-button--md\">Medium</button>\n          <button className=\"zid-button zid-button--text zid-button--primary zid-button--lg\">Large</button>\n        </div>\n      </div>\n    </div>\n  ),\n};\n\n\nexport const States: Story = {\n  render: () => (\n    <div style={{ display: 'flex', flexDirection: 'column', gap: '32px' }}>\n      <div>\n        <h3 style={{ marginBottom: '16px', fontFamily: 'var(--zid-font-family)' }}>Interactive States (hover to see)</h3>\n        <div style={{ display: 'flex', gap: '16px', flexWrap: 'wrap' }}>\n          <button className=\"zid-button zid-button--contained zid-button--primary zid-button--md\">Default</button>\n          <button className=\"zid-button zid-button--contained zid-button--primary zid-button--md\" disabled>Disabled</button>\n        </div>\n      </div>\n\n      <div>\n        <h3 style={{ marginBottom: '16px', fontFamily: 'var(--zid-font-family)' }}>All Colors - Disabled State</h3>\n        <div style={{ display: 'flex', gap: '16px', flexWrap: 'wrap' }}>\n          <button className=\"zid-button zid-button--contained zid-button--primary zid-button--md\" disabled>Primary</button>\n          <button className=\"zid-button zid-button--outlined zid-button--secondary zid-button--md\" disabled>Secondary</button>\n          <button className=\"zid-button zid-button--text zid-button--error zid-button--md\" disabled>Error</button>\n        </div>\n      </div>\n    </div>\n  ),\n};\n\nexport const FullWidth: Story = {\n  render: () => (\n    <div style={{ display: 'flex', flexDirection: 'column', gap: '16px', width: '400px' }}>\n      <h3 style={{ marginBottom: '8px', fontFamily: 'var(--zid-font-family)' }}>Full Width Buttons</h3>\n      <button className=\"zid-button zid-button--contained zid-button--primary zid-button--md zid-button--full-width\">\n        Full Width Primary\n      </button>\n      <button className=\"zid-button zid-button--outlined zid-button--secondary zid-button--md zid-button--full-width\">\n        Full Width Secondary\n      </button>\n      <button className=\"zid-button zid-button--text zid-button--error zid-button--md zid-button--full-width\">\n        Full Width Error\n      </button>\n    </div>\n  ),\n};\n\nexport const IconButton: Story = {\n  render: () => (\n    <div style={{ display: 'flex', flexDirection: 'column', gap: '32px' }}>\n      <div>\n        <h3 style={{ marginBottom: '16px', fontFamily: 'var(--zid-font-family)' }}>Icon Only Buttons</h3>\n        <div style={{ display: 'flex', gap: '16px', alignItems: 'center', flexWrap: 'wrap' }}>\n          <button className=\"zid-button zid-button--contained zid-button--primary zid-button--sm zid-button--icon-only\">\n            <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\n              <path d=\"M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z\"/>\n            </svg>\n          </button>\n          <button className=\"zid-button zid-button--contained zid-button--primary zid-button--md zid-button--icon-only\">\n            <svg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\n              <path d=\"M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z\"/>\n            </svg>\n          </button>\n          <button className=\"zid-button zid-button--contained zid-button--primary zid-button--lg zid-button--icon-only\">\n            <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\n              <path d=\"M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z\"/>\n            </svg>\n          </button>\n        </div>\n      </div>\n\n      <div>\n        <h3 style={{ marginBottom: '16px', fontFamily: 'var(--zid-font-family)' }}>Buttons with Icons</h3>\n        <div style={{ display: 'flex', gap: '16px', flexWrap: 'wrap' }}>\n          <button className=\"zid-button zid-button--contained zid-button--primary zid-button--md\">\n            <svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\n              <path d=\"M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z\"/>\n            </svg>\n            Add Item\n          </button>\n          <button className=\"zid-button zid-button--outlined zid-button--secondary zid-button--md\">\n            <svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\n              <path d=\"M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04c.39-.39.39-1.02 0-1.41l-2.34-2.34c-.39-.39-1.02-.39-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z\"/>\n            </svg>\n            Edit\n          </button>\n          <button className=\"zid-button zid-button--text zid-button--error zid-button--md\">\n            <svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\n              <path d=\"M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z\"/>\n            </svg>\n            Delete\n          </button>\n        </div>\n      </div>\n    </div>\n  ),\n};\n"],"names":[],"mappings":"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"}