@zidsa/zidmui 2.1.1 → 2.1.2

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

@@ -0,0 +1,172 @@
+"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

@@ -0,0 +1 @@
+{"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/react/AppTypography.stories.js

@@ -0,0 +1,172 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { AppTypography } from "../../components/app-typography.js";
+import { StackColumn } from "../../components/stack-column.js";
+const meta = {
+  title: "React/App Typography",
+  component: 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__ */ jsxs(StackColumn, { gap: 2, children: [
+    /* @__PURE__ */ jsx(AppTypography, { variant: "h1", children: "Heading 1" }),
+    /* @__PURE__ */ jsx(AppTypography, { variant: "h2", children: "Heading 2" }),
+    /* @__PURE__ */ jsx(AppTypography, { variant: "h3", children: "Heading 3" }),
+    /* @__PURE__ */ jsx(AppTypography, { variant: "h4", children: "Heading 4" }),
+    /* @__PURE__ */ jsx(AppTypography, { variant: "h5", children: "Heading 5" }),
+    /* @__PURE__ */ jsx(AppTypography, { variant: "h6", children: "Heading 6" })
+  ] })
+};
+const BodyText = {
+  args: {
+    children: null
+  },
+  render: () => /* @__PURE__ */ jsxs(StackColumn, { gap: 2, children: [
+    /* @__PURE__ */ jsx(AppTypography, { variant: "body1", children: "Body 1 - Regular body text" }),
+    /* @__PURE__ */ jsx(AppTypography, { variant: "body2", children: "Body 2 - Smaller body text" }),
+    /* @__PURE__ */ jsx(AppTypography, { variant: "subtitle1", children: "Subtitle 1" }),
+    /* @__PURE__ */ jsx(AppTypography, { variant: "subtitle2", children: "Subtitle 2" }),
+    /* @__PURE__ */ jsx(AppTypography, { variant: "caption", children: "Caption text" }),
+    /* @__PURE__ */ jsx(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__ */ jsxs(StackColumn, { gap: 2, children: [
+    /* @__PURE__ */ jsx(AppTypography, { color: "primary", children: "Primary color" }),
+    /* @__PURE__ */ jsx(AppTypography, { color: "secondary", children: "Secondary color" }),
+    /* @__PURE__ */ jsx(AppTypography, { color: "textPrimary", children: "Text Primary" }),
+    /* @__PURE__ */ jsx(AppTypography, { color: "textSecondary", children: "Text Secondary" }),
+    /* @__PURE__ */ jsx(AppTypography, { color: "error", children: "Error color" })
+  ] })
+};
+const Alignment = {
+  args: {
+    children: null
+  },
+  render: () => /* @__PURE__ */ jsxs(StackColumn, { gap: 2, sx: { width: 300 }, children: [
+    /* @__PURE__ */ jsx(AppTypography, { align: "left", children: "Left aligned text" }),
+    /* @__PURE__ */ jsx(AppTypography, { align: "center", children: "Center aligned text" }),
+    /* @__PURE__ */ jsx(AppTypography, { align: "right", children: "Right aligned text" })
+  ] })
+};
+const ArabicHeadings = {
+  args: {
+    children: null
+  },
+  render: () => /* @__PURE__ */ jsxs(StackColumn, { gap: 2, dir: "rtl", children: [
+    /* @__PURE__ */ jsx(AppTypography, { variant: "h1", children: "العنوان الأول" }),
+    /* @__PURE__ */ jsx(AppTypography, { variant: "h2", children: "العنوان الثاني" }),
+    /* @__PURE__ */ jsx(AppTypography, { variant: "h3", children: "العنوان الثالث" }),
+    /* @__PURE__ */ jsx(AppTypography, { variant: "h4", children: "العنوان الرابع" }),
+    /* @__PURE__ */ jsx(AppTypography, { variant: "h5", children: "العنوان الخامس" }),
+    /* @__PURE__ */ jsx(AppTypography, { variant: "h6", children: "العنوان السادس" })
+  ] })
+};
+const ArabicBodyText = {
+  args: {
+    children: null
+  },
+  render: () => /* @__PURE__ */ jsxs(StackColumn, { gap: 2, dir: "rtl", children: [
+    /* @__PURE__ */ jsx(AppTypography, { variant: "body1", children: "النص الأساسي - هذا مثال على النص العربي" }),
+    /* @__PURE__ */ jsx(AppTypography, { variant: "body2", children: "النص الثانوي - نص أصغر حجماً" }),
+    /* @__PURE__ */ jsx(AppTypography, { variant: "subtitle1", children: "العنوان الفرعي الأول" }),
+    /* @__PURE__ */ jsx(AppTypography, { variant: "subtitle2", children: "العنوان الفرعي الثاني" }),
+    /* @__PURE__ */ jsx(AppTypography, { variant: "caption", children: "نص توضيحي صغير" }),
+    /* @__PURE__ */ jsx(AppTypography, { variant: "overline", children: "نص علوي" })
+  ] })
+};
+const ArabicWithTooltip = {
+  args: {
+    children: "مرر الماوس هنا لرؤية التلميح",
+    tooltip: "هذه رسالة تلميح مفيدة"
+  }
+};
+const ArabicParagraph = {
+  args: {
+    children: null
+  },
+  render: () => /* @__PURE__ */ jsxs(StackColumn, { gap: 2, dir: "rtl", sx: { maxWidth: 500 }, children: [
+    /* @__PURE__ */ jsx(AppTypography, { variant: "h4", children: "مرحباً بك في منصتنا" }),
+    /* @__PURE__ */ jsx(AppTypography, { variant: "body1", children: "نحن نقدم لك أفضل الحلول التقنية لإدارة متجرك الإلكتروني. ابدأ رحلتك معنا اليوم واكتشف كيف يمكننا مساعدتك في تحقيق أهدافك التجارية." }),
+    /* @__PURE__ */ jsx(AppTypography, { variant: "body2", color: "textSecondary", children: "للمزيد من المعلومات، تواصل مع فريق الدعم الفني." })
+  ] })
+};
+const MixedContent = {
+  args: {
+    children: null
+  },
+  render: () => /* @__PURE__ */ jsxs(StackColumn, { gap: 3, children: [
+    /* @__PURE__ */ jsxs(StackColumn, { gap: 1, children: [
+      /* @__PURE__ */ jsx(AppTypography, { variant: "h5", children: "English Title" }),
+      /* @__PURE__ */ jsx(AppTypography, { variant: "body1", children: "This is English content for comparison." })
+    ] }),
+    /* @__PURE__ */ jsxs(StackColumn, { gap: 1, dir: "rtl", children: [
+      /* @__PURE__ */ jsx(AppTypography, { variant: "h5", children: "عنوان عربي" }),
+      /* @__PURE__ */ jsx(AppTypography, { variant: "body1", children: "هذا محتوى عربي للمقارنة." })
+    ] })
+  ] })
+};
+export {
+  Alignment,
+  ArabicBodyText,
+  ArabicHeadings,
+  ArabicParagraph,
+  ArabicWithTooltip,
+  BodyText,
+  Colors,
+  Default,
+  Headings,
+  MixedContent,
+  WithTooltip,
+  meta as default
+};
+//# sourceMappingURL=AppTypography.stories.js.map

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

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

package/dist/react/types/stories/react/AppTypography.stories.d.ts

@@ -0,0 +1,39 @@
+import { StoryObj } from '@storybook/react-vite';
+declare const meta: {
+    title: string;
+    component: import('react').FC<import('../../components/app-typography').AppTypographyProps>;
+    parameters: {
+        layout: string;
+    };
+    tags: string[];
+    argTypes: {
+        variant: {
+            control: "select";
+            options: string[];
+        };
+        color: {
+            control: "select";
+            options: string[];
+        };
+        align: {
+            control: "select";
+            options: string[];
+        };
+        tooltip: {
+            control: "text";
+        };
+    };
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;
+export declare const Headings: Story;
+export declare const BodyText: Story;
+export declare const WithTooltip: Story;
+export declare const Colors: Story;
+export declare const Alignment: Story;
+export declare const ArabicHeadings: Story;
+export declare const ArabicBodyText: Story;
+export declare const ArabicWithTooltip: Story;
+export declare const ArabicParagraph: Story;
+export declare const MixedContent: Story;