@zidsa/zidmui 2.0.2 → 2.1.0

package/dist/react/es/stories/react/AppEmptyState.stories.js

@@ -0,0 +1,157 @@
+import { jsxs, jsx, Fragment } from "react/jsx-runtime";
+import { AppEmptyState } from "../../components/app-empty-state.js";
+import { AppButton } from "../../components/app-button.js";
+import { IconErrorWarningLine } from "../../icons/system/error-warning-line.js";
+import { IconLockLine } from "../../icons/system/lock-line.js";
+import { IconStarLine } from "../../icons/system/star-line.js";
+const meta = {
+  title: "React/App Empty State",
+  component: AppEmptyState,
+  parameters: {
+    layout: "centered"
+  },
+  tags: ["autodocs"],
+  argTypes: {
+    size: {
+      control: "select",
+      options: ["standard", "small"]
+    },
+    variant: {
+      control: "select",
+      options: ["default", "error", "warning", "success"]
+    },
+    title: {
+      control: "text"
+    },
+    description: {
+      control: "text"
+    },
+    subDescription: {
+      control: "text"
+    }
+  }
+};
+const Default = {
+  args: {
+    size: "standard",
+    icon: /* @__PURE__ */ jsx(IconStarLine, {}),
+    title: "Empty state title",
+    description: "Some text explaining the state here and a nudge to take a corrective or guiding action",
+    children: /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(AppButton, { color: "secondary", variant: "outlined", children: "Secondary Action" }),
+      /* @__PURE__ */ jsx(AppButton, { variant: "contained", children: "Primary Action" })
+    ] })
+  }
+};
+const PageNotFound = {
+  args: {
+    icon: /* @__PURE__ */ jsx(IconErrorWarningLine, {}),
+    variant: "error",
+    size: "standard",
+    title: "Oops, page not found!",
+    description: "We are very sorry for inconvenience.",
+    children: /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(AppButton, { color: "secondary", variant: "outlined", children: "Secondary Action" }),
+      /* @__PURE__ */ jsx(AppButton, { variant: "contained", children: "Primary Action" })
+    ] })
+  }
+};
+const PageNotFoundWithSubDescription = {
+  args: {
+    icon: /* @__PURE__ */ jsx(IconErrorWarningLine, {}),
+    variant: "error",
+    size: "standard",
+    title: "Oops, page not found!",
+    description: "We are very sorry for inconvenience.",
+    subDescription: "Error Code: 404",
+    children: /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(AppButton, { color: "secondary", variant: "outlined", children: "Secondary Action" }),
+      /* @__PURE__ */ jsx(AppButton, { variant: "contained", children: "Primary Action" })
+    ] })
+  }
+};
+const AccessDenied = {
+  args: {
+    icon: /* @__PURE__ */ jsx(IconLockLine, {}),
+    title: "Access denied",
+    variant: "warning",
+    size: "standard",
+    description: "You don't have permission to access this area or take this action",
+    children: /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(AppButton, { color: "secondary", variant: "outlined", children: "Secondary Action" }),
+      /* @__PURE__ */ jsx(AppButton, { variant: "contained", children: "Primary Action" })
+    ] })
+  }
+};
+const SomethingWentWrong = {
+  args: {
+    icon: /* @__PURE__ */ jsx(IconErrorWarningLine, {}),
+    variant: "error",
+    size: "standard",
+    title: "Something went wrong",
+    description: "The page you are looking for doesn't exist or has been moved.",
+    children: /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(AppButton, { color: "secondary", variant: "outlined", children: "Secondary Action" }),
+      /* @__PURE__ */ jsx(AppButton, { variant: "contained", children: "Primary Action" })
+    ] })
+  }
+};
+const SmallSize = {
+  args: {
+    icon: /* @__PURE__ */ jsx(IconErrorWarningLine, {}),
+    variant: "error",
+    size: "small",
+    title: "Something went wrong",
+    description: "The page you are looking for doesn't exist or has been moved.",
+    children: /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(AppButton, { color: "secondary", variant: "outlined", children: "Secondary Action" }),
+      /* @__PURE__ */ jsx(AppButton, { variant: "contained", children: "Primary Action" })
+    ] })
+  }
+};
+const WithImage = {
+  args: {
+    icon: /* @__PURE__ */ jsx(IconErrorWarningLine, {}),
+    imageUrl: "https://picsum.photos/200/300",
+    variant: "error",
+    size: "standard",
+    title: "Oops, page not found!",
+    description: "We are very sorry for inconvenience.",
+    children: /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(AppButton, { color: "secondary", variant: "outlined", children: "Secondary Action" }),
+      /* @__PURE__ */ jsx(AppButton, { variant: "contained", children: "Primary Action" })
+    ] })
+  }
+};
+const NoDescription = {
+  args: {
+    size: "standard",
+    icon: /* @__PURE__ */ jsx(IconStarLine, {}),
+    title: "Empty state title",
+    children: /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(AppButton, { color: "secondary", variant: "outlined", children: "Secondary Action" }),
+      /* @__PURE__ */ jsx(AppButton, { variant: "contained", children: "Primary Action" })
+    ] })
+  }
+};
+const NoChildren = {
+  args: {
+    size: "standard",
+    icon: /* @__PURE__ */ jsx(IconStarLine, {}),
+    title: "Empty state title",
+    description: "Some text explaining the state here and a nudge to take a corrective or guiding action"
+  }
+};
+export {
+  AccessDenied,
+  Default,
+  NoChildren,
+  NoDescription,
+  PageNotFound,
+  PageNotFoundWithSubDescription,
+  SmallSize,
+  SomethingWentWrong,
+  WithImage,
+  meta as default
+};
+//# sourceMappingURL=AppEmptyState.stories.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"AppEmptyState.stories.js","sources":["../../../../../src/stories/react/AppEmptyState.stories.tsx"],"sourcesContent":["import type { Meta, StoryObj } from '@storybook/react-vite';\n\nimport { AppEmptyState } from '~/components/app-empty-state';\nimport { AppButton } from '~/components/app-button';\nimport { IconErrorWarningLine } from '~/icons/system/error-warning-line';\nimport { IconLockLine } from '~/icons/system/lock-line';\nimport { IconStarLine } from '~/icons/system/star-line';\n\n//\n//\n\n// Meta\nconst meta = {\n  title: 'React/App Empty State',\n  component: AppEmptyState,\n  parameters: {\n    layout: 'centered',\n  },\n  tags: ['autodocs'],\n  argTypes: {\n    size: {\n      control: 'select',\n      options: ['standard', 'small'],\n    },\n    variant: {\n      control: 'select',\n      options: ['default', 'error', 'warning', 'success'],\n    },\n    title: {\n      control: 'text',\n    },\n    description: {\n      control: 'text',\n    },\n    subDescription: {\n      control: 'text',\n    },\n  },\n} satisfies Meta<typeof AppEmptyState>;\n\nexport default meta;\ntype Story = StoryObj<typeof meta>;\n\n//\n\nexport const Default: Story = {\n  args: {\n    size: 'standard',\n    icon: <IconStarLine />,\n    title: 'Empty state title',\n    description:\n      'Some text explaining the state here and a nudge to take a corrective or guiding action',\n    children: (\n      <>\n        <AppButton color=\"secondary\" variant=\"outlined\">\n          Secondary Action\n        </AppButton>\n        <AppButton variant=\"contained\">Primary Action</AppButton>\n      </>\n    ),\n  },\n};\n\n//\n\nexport const PageNotFound: Story = {\n  args: {\n    icon: <IconErrorWarningLine />,\n    variant: 'error',\n    size: 'standard',\n    title: 'Oops, page not found!',\n    description: 'We are very sorry for inconvenience.',\n    children: (\n      <>\n        <AppButton color=\"secondary\" variant=\"outlined\">\n          Secondary Action\n        </AppButton>\n        <AppButton variant=\"contained\">Primary Action</AppButton>\n      </>\n    ),\n  },\n};\n\n//\n\nexport const PageNotFoundWithSubDescription: Story = {\n  args: {\n    icon: <IconErrorWarningLine />,\n    variant: 'error',\n    size: 'standard',\n    title: 'Oops, page not found!',\n    description: 'We are very sorry for inconvenience.',\n    subDescription: 'Error Code: 404',\n    children: (\n      <>\n        <AppButton color=\"secondary\" variant=\"outlined\">\n          Secondary Action\n        </AppButton>\n        <AppButton variant=\"contained\">Primary Action</AppButton>\n      </>\n    ),\n  },\n};\n\n//\n\nexport const AccessDenied: Story = {\n  args: {\n    icon: <IconLockLine />,\n    title: 'Access denied',\n    variant: 'warning',\n    size: 'standard',\n    description: \"You don't have permission to access this area or take this action\",\n    children: (\n      <>\n        <AppButton color=\"secondary\" variant=\"outlined\">\n          Secondary Action\n        </AppButton>\n        <AppButton variant=\"contained\">Primary Action</AppButton>\n      </>\n    ),\n  },\n};\n\n//\n\nexport const SomethingWentWrong: Story = {\n  args: {\n    icon: <IconErrorWarningLine />,\n    variant: 'error',\n    size: 'standard',\n    title: 'Something went wrong',\n    description: \"The page you are looking for doesn't exist or has been moved.\",\n    children: (\n      <>\n        <AppButton color=\"secondary\" variant=\"outlined\">\n          Secondary Action\n        </AppButton>\n        <AppButton variant=\"contained\">Primary Action</AppButton>\n      </>\n    ),\n  },\n};\n\n//\n\nexport const SmallSize: Story = {\n  args: {\n    icon: <IconErrorWarningLine />,\n    variant: 'error',\n    size: 'small',\n    title: 'Something went wrong',\n    description: \"The page you are looking for doesn't exist or has been moved.\",\n    children: (\n      <>\n        <AppButton color=\"secondary\" variant=\"outlined\">\n          Secondary Action\n        </AppButton>\n        <AppButton variant=\"contained\">Primary Action</AppButton>\n      </>\n    ),\n  },\n};\n\n//\n\nexport const WithImage: Story = {\n  args: {\n    icon: <IconErrorWarningLine />,\n    imageUrl: 'https://picsum.photos/200/300',\n    variant: 'error',\n    size: 'standard',\n    title: 'Oops, page not found!',\n    description: 'We are very sorry for inconvenience.',\n    children: (\n      <>\n        <AppButton color=\"secondary\" variant=\"outlined\">\n          Secondary Action\n        </AppButton>\n        <AppButton variant=\"contained\">Primary Action</AppButton>\n      </>\n    ),\n  },\n};\n\n//\n\nexport const NoDescription: Story = {\n  args: {\n    size: 'standard',\n    icon: <IconStarLine />,\n    title: 'Empty state title',\n    children: (\n      <>\n        <AppButton color=\"secondary\" variant=\"outlined\">\n          Secondary Action\n        </AppButton>\n        <AppButton variant=\"contained\">Primary Action</AppButton>\n      </>\n    ),\n  },\n};\n\n//\n\nexport const NoChildren: Story = {\n  args: {\n    size: 'standard',\n    icon: <IconStarLine />,\n    title: 'Empty state title',\n    description:\n      'Some text explaining the state here and a nudge to take a corrective or guiding action',\n  },\n};\n"],"names":[],"mappings":"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"}

package/dist/react/es/stories/react/AppIconButton.stories.js

@@ -0,0 +1,53 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { AppIconButton } from "../../components/app-icon-button.js";
+import { IconSettingsLine } from "../../icons/system/settings-line.js";
+import { IconDeleteBinLine } from "../../icons/system/delete-bin-line.js";
+import { StackColumn } from "../../components/stack-column.js";
+const meta = {
+  title: "React/App Icon Button",
+  component: AppIconButton,
+  parameters: {
+    layout: "centered"
+  },
+  tags: ["autodocs"]
+};
+const Variants = {
+  render: () => /* @__PURE__ */ jsxs(StackColumn, { gap: 3, children: [
+    /* @__PURE__ */ jsxs(StackColumn, { direction: "row", gap: 2, alignItems: "center", children: [
+      /* @__PURE__ */ jsx(AppIconButton, { color: "primary", size: "large", children: /* @__PURE__ */ jsx(IconSettingsLine, {}) }),
+      /* @__PURE__ */ jsx(AppIconButton, { color: "primary", size: "medium", children: /* @__PURE__ */ jsx(IconSettingsLine, {}) }),
+      /* @__PURE__ */ jsx(AppIconButton, { color: "primary", size: "small", children: /* @__PURE__ */ jsx(IconSettingsLine, {}) }),
+      /* @__PURE__ */ jsx(AppIconButton, { color: "primary", size: "extraSmall", children: /* @__PURE__ */ jsx(IconSettingsLine, {}) })
+    ] }),
+    /* @__PURE__ */ jsxs(StackColumn, { direction: "row", gap: 2, alignItems: "center", children: [
+      /* @__PURE__ */ jsx(AppIconButton, { color: "secondary", size: "large", children: /* @__PURE__ */ jsx(IconSettingsLine, {}) }),
+      /* @__PURE__ */ jsx(AppIconButton, { color: "secondary", size: "medium", children: /* @__PURE__ */ jsx(IconSettingsLine, {}) }),
+      /* @__PURE__ */ jsx(AppIconButton, { color: "secondary", size: "small", children: /* @__PURE__ */ jsx(IconSettingsLine, {}) }),
+      /* @__PURE__ */ jsx(AppIconButton, { color: "secondary", size: "extraSmall", children: /* @__PURE__ */ jsx(IconSettingsLine, {}) })
+    ] }),
+    /* @__PURE__ */ jsxs(StackColumn, { direction: "row", gap: 2, alignItems: "center", children: [
+      /* @__PURE__ */ jsx(AppIconButton, { color: "error", size: "large", children: /* @__PURE__ */ jsx(IconDeleteBinLine, {}) }),
+      /* @__PURE__ */ jsx(AppIconButton, { color: "error", size: "medium", children: /* @__PURE__ */ jsx(IconDeleteBinLine, {}) }),
+      /* @__PURE__ */ jsx(AppIconButton, { color: "error", size: "small", children: /* @__PURE__ */ jsx(IconDeleteBinLine, {}) }),
+      /* @__PURE__ */ jsx(AppIconButton, { color: "error", size: "extraSmall", children: /* @__PURE__ */ jsx(IconDeleteBinLine, {}) })
+    ] }),
+    /* @__PURE__ */ jsxs(StackColumn, { direction: "row", gap: 2, alignItems: "center", children: [
+      /* @__PURE__ */ jsx(AppIconButton, { color: "default", size: "large", children: /* @__PURE__ */ jsx(IconDeleteBinLine, {}) }),
+      /* @__PURE__ */ jsx(AppIconButton, { color: "default", size: "medium", children: /* @__PURE__ */ jsx(IconDeleteBinLine, {}) }),
+      /* @__PURE__ */ jsx(AppIconButton, { color: "default", size: "small", children: /* @__PURE__ */ jsx(IconDeleteBinLine, {}) }),
+      /* @__PURE__ */ jsx(AppIconButton, { color: "default", size: "extraSmall", children: /* @__PURE__ */ jsx(IconDeleteBinLine, {}) })
+    ] }),
+    /* @__PURE__ */ jsxs(StackColumn, { direction: "row", gap: 2, alignItems: "center", children: [
+      /* @__PURE__ */ jsx(AppIconButton, { color: "primary", size: "large", loading: true, children: /* @__PURE__ */ jsx(IconSettingsLine, {}) }),
+      /* @__PURE__ */ jsx(AppIconButton, { color: "primary", size: "medium", loading: true, children: /* @__PURE__ */ jsx(IconSettingsLine, {}) }),
+      /* @__PURE__ */ jsx(AppIconButton, { color: "primary", size: "small", loading: true, children: /* @__PURE__ */ jsx(IconSettingsLine, {}) }),
+      /* @__PURE__ */ jsx(AppIconButton, { color: "primary", size: "extraSmall", loading: true, children: /* @__PURE__ */ jsx(IconSettingsLine, {}) })
+    ] })
+  ] }),
+  args: {}
+};
+export {
+  Variants,
+  meta as default
+};
+//# sourceMappingURL=AppIconButton.stories.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"AppIconButton.stories.js","sources":["../../../../../src/stories/react/AppIconButton.stories.tsx"],"sourcesContent":["import type { Meta, StoryObj } from '@storybook/react-vite';\n\nimport { AppIconButton } from '~/components/app-icon-button';\nimport { IconSettingsLine } from '~/icons/system/settings-line';\nimport { IconDeleteBinLine } from '~/icons/system/delete-bin-line';\nimport { StackColumn } from '~/components/stack-column';\n\n//\n//\n\n// Meta\nconst meta = {\n  title: 'React/App Icon Button',\n  component: AppIconButton,\n  parameters: {\n    layout: 'centered',\n  },\n  tags: ['autodocs'],\n} satisfies Meta<typeof AppIconButton>;\n\nexport default meta;\ntype Story = StoryObj<typeof meta>;\n\n//\n\nexport const Variants: Story = {\n  render: () => (\n    <StackColumn gap={3}>\n      {/* Primary */}\n      <StackColumn direction=\"row\" gap={2} alignItems=\"center\">\n        <AppIconButton color=\"primary\" size=\"large\">\n          <IconSettingsLine />\n        </AppIconButton>\n\n        <AppIconButton color=\"primary\" size=\"medium\">\n          <IconSettingsLine />\n        </AppIconButton>\n\n        <AppIconButton color=\"primary\" size=\"small\">\n          <IconSettingsLine />\n        </AppIconButton>\n\n        <AppIconButton color=\"primary\" size=\"extraSmall\">\n          <IconSettingsLine />\n        </AppIconButton>\n      </StackColumn>\n\n      {/* Secondary */}\n      <StackColumn direction=\"row\" gap={2} alignItems=\"center\">\n        <AppIconButton color=\"secondary\" size=\"large\">\n          <IconSettingsLine />\n        </AppIconButton>\n\n        <AppIconButton color=\"secondary\" size=\"medium\">\n          <IconSettingsLine />\n        </AppIconButton>\n\n        <AppIconButton color=\"secondary\" size=\"small\">\n          <IconSettingsLine />\n        </AppIconButton>\n\n        <AppIconButton color=\"secondary\" size=\"extraSmall\">\n          <IconSettingsLine />\n        </AppIconButton>\n      </StackColumn>\n\n      {/* Error */}\n      <StackColumn direction=\"row\" gap={2} alignItems=\"center\">\n        <AppIconButton color=\"error\" size=\"large\">\n          <IconDeleteBinLine />\n        </AppIconButton>\n\n        <AppIconButton color=\"error\" size=\"medium\">\n          <IconDeleteBinLine />\n        </AppIconButton>\n\n        <AppIconButton color=\"error\" size=\"small\">\n          <IconDeleteBinLine />\n        </AppIconButton>\n\n        <AppIconButton color=\"error\" size=\"extraSmall\">\n          <IconDeleteBinLine />\n        </AppIconButton>\n      </StackColumn>\n\n      {/* Default */}\n      <StackColumn direction=\"row\" gap={2} alignItems=\"center\">\n        <AppIconButton color=\"default\" size=\"large\">\n          <IconDeleteBinLine />\n        </AppIconButton>\n\n        <AppIconButton color=\"default\" size=\"medium\">\n          <IconDeleteBinLine />\n        </AppIconButton>\n\n        <AppIconButton color=\"default\" size=\"small\">\n          <IconDeleteBinLine />\n        </AppIconButton>\n\n        <AppIconButton color=\"default\" size=\"extraSmall\">\n          <IconDeleteBinLine />\n        </AppIconButton>\n      </StackColumn>\n\n      {/* Loading */}\n      <StackColumn direction=\"row\" gap={2} alignItems=\"center\">\n        <AppIconButton color=\"primary\" size=\"large\" loading>\n          <IconSettingsLine />\n        </AppIconButton>\n\n        <AppIconButton color=\"primary\" size=\"medium\" loading>\n          <IconSettingsLine />\n        </AppIconButton>\n\n        <AppIconButton color=\"primary\" size=\"small\" loading>\n          <IconSettingsLine />\n        </AppIconButton>\n\n        <AppIconButton color=\"primary\" size=\"extraSmall\" loading>\n          <IconSettingsLine />\n        </AppIconButton>\n      </StackColumn>\n    </StackColumn>\n  ),\n  args: {},\n};\n"],"names":[],"mappings":"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"}

package/dist/react/es/stories/react/AppInputBase.stories.js

@@ -53,82 +53,101 @@ const Playground = {
   args: {}
 };
 const Variants = {
-  render: () => /* @__PURE__ */ jsxs(StackColumn, { sx: { background: "white" }, padding: 10, gap: 4, children: [
-    /* @__PURE__ */ jsx(AppTypography, { variant: "h6", children: "Basic" }),
-    /* @__PURE__ */ jsx(AppInputBase, {}),
-    /* @__PURE__ */ jsx(AppInputBase, { label: "User name" }),
-    /* @__PURE__ */ jsx(AppInputBase, { label: "User name", placeholder: "Enter your username" }),
-    /* @__PURE__ */ jsx(AppInputBase, { label: "User name", placeholder: "Enter your username", size: "small" }),
+  render: () => /* @__PURE__ */ jsxs(StackColumn, { sx: { background: "white" }, padding: 4, gap: 3, width: 400, children: [
+    /* @__PURE__ */ jsxs(StackColumn, { gap: 2, children: [
+      /* @__PURE__ */ jsx(AppTypography, { variant: "h6", children: "Basic" }),
+      /* @__PURE__ */ jsx(AppInputBase, {}),
+      /* @__PURE__ */ jsx(AppInputBase, { label: "User name" }),
+      /* @__PURE__ */ jsx(AppInputBase, { label: "User name", placeholder: "Enter your username" }),
+      /* @__PURE__ */ jsx(AppInputBase, { label: "User name", placeholder: "Enter your username", size: "small" })
+    ] }),
     /* @__PURE__ */ jsx(Divider, {}),
-    /* @__PURE__ */ jsx(AppTypography, { variant: "h6", children: "States" }),
-    /* @__PURE__ */ jsx(
-      AppInputBase,
-      {
-        label: "Error",
-        placeholder: "Invalid input",
-        error: true,
-        helperText: "This field is required"
-      }
-    ),
-    /* @__PURE__ */ jsx(AppInputBase, { label: "Disabled", placeholder: "Cannot edit", disabled: true }),
+    /* @__PURE__ */ jsxs(StackColumn, { gap: 2, children: [
+      /* @__PURE__ */ jsx(AppTypography, { variant: "h6", children: "States" }),
+      /* @__PURE__ */ jsx(
+        AppInputBase,
+        {
+          label: "Error",
+          placeholder: "Invalid input",
+          error: true,
+          helperText: "This field is required"
+        }
+      ),
+      /* @__PURE__ */ jsx(AppInputBase, { label: "Disabled", placeholder: "Cannot edit", disabled: true })
+    ] }),
     /* @__PURE__ */ jsx(Divider, {}),
-    /* @__PURE__ */ jsx(AppTypography, { variant: "h6", children: "Adornments" }),
-    /* @__PURE__ */ jsx(AppInputBase, { label: "Price", placeholder: "0.00", startAdornmentText: "$" }),
-    /* @__PURE__ */ jsx(AppInputBase, { label: "Price", placeholder: "0.00", endAdornmentText: "$" }),
-    /* @__PURE__ */ jsx(AppInputBase, { label: "Weight", placeholder: "0", endAdornmentText: "Kg" }),
-    /* @__PURE__ */ jsx(
-      AppInputBase,
-      {
-        label: "Price",
-        placeholder: "0.00",
-        endAdornmentText: "SAR",
-        endAdornmentTextProps: { typographyProps: { color: "primary" } }
-      }
-    ),
+    /* @__PURE__ */ jsxs(StackColumn, { gap: 2, children: [
+      /* @__PURE__ */ jsx(AppTypography, { variant: "h6", children: "Adornments" }),
+      /* @__PURE__ */ jsx(AppInputBase, { label: "Price", placeholder: "0.00", startAdornmentText: "$" }),
+      /* @__PURE__ */ jsx(AppInputBase, { label: "Price", placeholder: "0.00", endAdornmentText: "$" }),
+      /* @__PURE__ */ jsx(AppInputBase, { label: "Weight", placeholder: "0", endAdornmentText: "Kg" }),
+      /* @__PURE__ */ jsx(
+        AppInputBase,
+        {
+          label: "Price",
+          placeholder: "0.00",
+          endAdornmentText: "SAR",
+          endAdornmentTextProps: { typographyProps: { color: "primary" } }
+        }
+      )
+    ] }),
     /* @__PURE__ */ jsx(Divider, {}),
-    /* @__PURE__ */ jsx(AppTypography, { variant: "h6", children: "Multiline" }),
-    /* @__PURE__ */ jsx(
-      AppInputBase,
-      {
-        label: "Description",
-        placeholder: "Enter a detailed description...",
-        endAdornmentText: "Kg",
-        multiline: true
-      }
-    ),
+    /* @__PURE__ */ jsxs(StackColumn, { gap: 2, children: [
+      /* @__PURE__ */ jsx(AppTypography, { variant: "h6", children: "Multiline" }),
+      /* @__PURE__ */ jsx(
+        AppInputBase,
+        {
+          label: "Description",
+          placeholder: "Enter a detailed description...",
+          endAdornmentText: "Kg",
+          multiline: true
+        }
+      )
+    ] }),
     /* @__PURE__ */ jsx(Divider, {}),
-    /* @__PURE__ */ jsx(AppTypography, { variant: "h6", children: "RTL" }),
-    /* @__PURE__ */ jsx(AppInputBase, { dir: "rtl", label: "اسم المستخدم" }),
-    /* @__PURE__ */ jsx(AppInputBase, { dir: "rtl", label: "اسم المستخدم", placeholder: "اسم المستخدم" }),
-    /* @__PURE__ */ jsx(AppInputBase, { dir: "rtl", label: "اسم المستخدم", placeholder: "اسم المستخدم", size: "small", error: true }),
-    /* @__PURE__ */ jsx(
-      AppInputBase,
-      {
-        dir: "rtl",
-        label: "اسم المستخدم",
-        placeholder: "اسم المستخدم",
-        startAdornmentText: "$"
-      }
-    ),
-    /* @__PURE__ */ jsx(
-      AppInputBase,
-      {
-        dir: "rtl",
-        label: "اسم المستخدم",
-        placeholder: "اسم المستخدم",
-        endAdornmentText: "Kg"
-      }
-    ),
-    /* @__PURE__ */ jsx(
-      AppInputBase,
-      {
-        dir: "rtl",
-        label: "الوصف",
-        placeholder: "هذا النص طويل جداً جداً جداً جداً للاختبار",
-        endAdornmentText: "Kg",
-        multiline: true
-      }
-    )
+    /* @__PURE__ */ jsxs(StackColumn, { gap: 2, children: [
+      /* @__PURE__ */ jsx(AppTypography, { variant: "h6", children: "RTL" }),
+      /* @__PURE__ */ jsx(AppInputBase, { dir: "rtl", label: "اسم المستخدم" }),
+      /* @__PURE__ */ jsx(AppInputBase, { dir: "rtl", label: "اسم المستخدم", placeholder: "اسم المستخدم" }),
+      /* @__PURE__ */ jsx(
+        AppInputBase,
+        {
+          dir: "rtl",
+          label: "اسم المستخدم",
+          placeholder: "اسم المستخدم",
+          size: "small",
+          error: true
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        AppInputBase,
+        {
+          dir: "rtl",
+          label: "اسم المستخدم",
+          placeholder: "اسم المستخدم",
+          startAdornmentText: "$"
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        AppInputBase,
+        {
+          dir: "rtl",
+          label: "اسم المستخدم",
+          placeholder: "اسم المستخدم",
+          endAdornmentText: "Kg"
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        AppInputBase,
+        {
+          dir: "rtl",
+          label: "الوصف",
+          placeholder: "هذا النص طويل جداً جداً جداً جداً للاختبار",
+          endAdornmentText: "Kg",
+          multiline: true
+        }
+      )
+    ] })
   ] })
 };
 export {

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

@@ -1 +1 @@
-{"version":3,"file":"AppInputBase.stories.js","sources":["../../../../../src/stories/react/AppInputBase.stories.tsx"],"sourcesContent":["import type { Meta, StoryObj } from '@storybook/react-vite';\n\nimport { Divider } from '@mui/material';\n\nimport { AppInputBase } from '~/components/app-input-base';\nimport { AppTypography } from '~/components/app-typography';\nimport { StackColumn } from '~/components/stack-column';\n\n//\n//\n\n// Meta\nconst meta = {\n  title: 'React/App Input Base',\n  component: AppInputBase,\n  parameters: {\n    layout: 'centered',\n  },\n  tags: ['autodocs'],\n  argTypes: {\n    size: {\n      control: 'select',\n      options: ['medium', 'small'],\n    },\n    disabled: {\n      control: 'boolean',\n    },\n    error: {\n      control: 'boolean',\n    },\n    multiline: {\n      control: 'boolean',\n    },\n    label: {\n      control: 'text',\n    },\n    placeholder: {\n      control: 'text',\n    },\n    helperText: {\n      control: 'text',\n    },\n    startAdornmentText: {\n      control: 'text',\n    },\n    endAdornmentText: {\n      control: 'text',\n    },\n  },\n  args: {\n    size: 'medium',\n    label: 'Label',\n    placeholder: 'Placeholder text',\n    disabled: false,\n    error: false,\n    multiline: false,\n  },\n} satisfies Meta<typeof AppInputBase>;\n\nexport default meta;\ntype Story = StoryObj<typeof meta>;\n\n//\n\nexport const Playground: Story = {\n  args: {},\n};\n\n//\n\nexport const Variants: Story = {\n  render: () => (\n    <StackColumn sx={{ background: 'white' }} padding={10} gap={4}>\n      <AppTypography variant=\"h6\">Basic</AppTypography>\n\n      <AppInputBase />\n      <AppInputBase label=\"User name\" />\n      <AppInputBase label=\"User name\" placeholder=\"Enter your username\" />\n      <AppInputBase label=\"User name\" placeholder=\"Enter your username\" size=\"small\" />\n\n      <Divider />\n\n      <AppTypography variant=\"h6\">States</AppTypography>\n\n      <AppInputBase\n        label=\"Error\"\n        placeholder=\"Invalid input\"\n        error\n        helperText=\"This field is required\"\n      />\n      <AppInputBase label=\"Disabled\" placeholder=\"Cannot edit\" disabled />\n\n      <Divider />\n\n      <AppTypography variant=\"h6\">Adornments</AppTypography>\n\n      <AppInputBase label=\"Price\" placeholder=\"0.00\" startAdornmentText=\"$\" />\n      <AppInputBase label=\"Price\" placeholder=\"0.00\" endAdornmentText=\"$\" />\n      <AppInputBase label=\"Weight\" placeholder=\"0\" endAdornmentText=\"Kg\" />\n      <AppInputBase\n        label=\"Price\"\n        placeholder=\"0.00\"\n        endAdornmentText=\"SAR\"\n        endAdornmentTextProps={{ typographyProps: { color: 'primary' } }}\n      />\n\n      <Divider />\n\n      <AppTypography variant=\"h6\">Multiline</AppTypography>\n\n      <AppInputBase\n        label=\"Description\"\n        placeholder=\"Enter a detailed description...\"\n        endAdornmentText=\"Kg\"\n        multiline\n      />\n\n      <Divider />\n\n      <AppTypography variant=\"h6\">RTL</AppTypography>\n\n      <AppInputBase dir=\"rtl\" label=\"اسم المستخدم\" />\n      <AppInputBase dir=\"rtl\" label=\"اسم المستخدم\" placeholder=\"اسم المستخدم\" />\n      <AppInputBase dir=\"rtl\" label=\"اسم المستخدم\" placeholder=\"اسم المستخدم\" size=\"small\" error />\n      <AppInputBase\n        dir=\"rtl\"\n        label=\"اسم المستخدم\"\n        placeholder=\"اسم المستخدم\"\n        startAdornmentText=\"$\"\n      />\n      <AppInputBase\n        dir=\"rtl\"\n        label=\"اسم المستخدم\"\n        placeholder=\"اسم المستخدم\"\n        endAdornmentText=\"Kg\"\n      />\n      <AppInputBase\n        dir=\"rtl\"\n        label=\"الوصف\"\n        placeholder=\"هذا النص طويل جداً جداً جداً جداً للاختبار\"\n        endAdornmentText=\"Kg\"\n        multiline\n      />\n    </StackColumn>\n  ),\n};\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"AppInputBase.stories.js","sources":["../../../../../src/stories/react/AppInputBase.stories.tsx"],"sourcesContent":["import type { Meta, StoryObj } from '@storybook/react-vite';\n\nimport { Divider } from '@mui/material';\n\nimport { AppInputBase } from '~/components/app-input-base';\nimport { AppTypography } from '~/components/app-typography';\nimport { StackColumn } from '~/components/stack-column';\n\n//\n//\n\n// Meta\nconst meta = {\n  title: 'React/App Input Base',\n  component: AppInputBase,\n  parameters: {\n    layout: 'centered',\n  },\n  tags: ['autodocs'],\n  argTypes: {\n    size: {\n      control: 'select',\n      options: ['medium', 'small'],\n    },\n    disabled: {\n      control: 'boolean',\n    },\n    error: {\n      control: 'boolean',\n    },\n    multiline: {\n      control: 'boolean',\n    },\n    label: {\n      control: 'text',\n    },\n    placeholder: {\n      control: 'text',\n    },\n    helperText: {\n      control: 'text',\n    },\n    startAdornmentText: {\n      control: 'text',\n    },\n    endAdornmentText: {\n      control: 'text',\n    },\n  },\n  args: {\n    size: 'medium',\n    label: 'Label',\n    placeholder: 'Placeholder text',\n    disabled: false,\n    error: false,\n    multiline: false,\n  },\n} satisfies Meta<typeof AppInputBase>;\n\nexport default meta;\ntype Story = StoryObj<typeof meta>;\n\n//\n\nexport const Playground: Story = {\n  args: {},\n};\n\n//\n\nexport const Variants: Story = {\n  render: () => (\n    <StackColumn sx={{ background: 'white' }} padding={4} gap={3} width={400}>\n      <StackColumn gap={2}>\n        <AppTypography variant=\"h6\">Basic</AppTypography>\n\n        <AppInputBase />\n        <AppInputBase label=\"User name\" />\n        <AppInputBase label=\"User name\" placeholder=\"Enter your username\" />\n        <AppInputBase label=\"User name\" placeholder=\"Enter your username\" size=\"small\" />\n      </StackColumn>\n\n      <Divider />\n\n      <StackColumn gap={2}>\n        <AppTypography variant=\"h6\">States</AppTypography>\n\n        <AppInputBase\n          label=\"Error\"\n          placeholder=\"Invalid input\"\n          error\n          helperText=\"This field is required\"\n        />\n        <AppInputBase label=\"Disabled\" placeholder=\"Cannot edit\" disabled />\n      </StackColumn>\n\n      <Divider />\n\n      <StackColumn gap={2}>\n        <AppTypography variant=\"h6\">Adornments</AppTypography>\n\n        <AppInputBase label=\"Price\" placeholder=\"0.00\" startAdornmentText=\"$\" />\n        <AppInputBase label=\"Price\" placeholder=\"0.00\" endAdornmentText=\"$\" />\n        <AppInputBase label=\"Weight\" placeholder=\"0\" endAdornmentText=\"Kg\" />\n        <AppInputBase\n          label=\"Price\"\n          placeholder=\"0.00\"\n          endAdornmentText=\"SAR\"\n          endAdornmentTextProps={{ typographyProps: { color: 'primary' } }}\n        />\n      </StackColumn>\n\n      <Divider />\n\n      <StackColumn gap={2}>\n        <AppTypography variant=\"h6\">Multiline</AppTypography>\n\n        <AppInputBase\n          label=\"Description\"\n          placeholder=\"Enter a detailed description...\"\n          endAdornmentText=\"Kg\"\n          multiline\n        />\n      </StackColumn>\n\n      <Divider />\n\n      <StackColumn gap={2}>\n        <AppTypography variant=\"h6\">RTL</AppTypography>\n\n        <AppInputBase dir=\"rtl\" label=\"اسم المستخدم\" />\n        <AppInputBase dir=\"rtl\" label=\"اسم المستخدم\" placeholder=\"اسم المستخدم\" />\n        <AppInputBase\n          dir=\"rtl\"\n          label=\"اسم المستخدم\"\n          placeholder=\"اسم المستخدم\"\n          size=\"small\"\n          error\n        />\n        <AppInputBase\n          dir=\"rtl\"\n          label=\"اسم المستخدم\"\n          placeholder=\"اسم المستخدم\"\n          startAdornmentText=\"$\"\n        />\n        <AppInputBase\n          dir=\"rtl\"\n          label=\"اسم المستخدم\"\n          placeholder=\"اسم المستخدم\"\n          endAdornmentText=\"Kg\"\n        />\n        <AppInputBase\n          dir=\"rtl\"\n          label=\"الوصف\"\n          placeholder=\"هذا النص طويل جداً جداً جداً جداً للاختبار\"\n          endAdornmentText=\"Kg\"\n          multiline\n        />\n      </StackColumn>\n    </StackColumn>\n  ),\n};\n"],"names":[],"mappings":"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"}

package/dist/react/es/stories/react/AppInputBaseSearch.stories.js

@@ -40,35 +40,43 @@ const Playground = {
   args: {}
 };
 const Variants = {
-  render: () => /* @__PURE__ */ jsxs(StackColumn, { sx: { background: "white" }, padding: 10, gap: 4, children: [
-    /* @__PURE__ */ jsx(AppTypography, { variant: "h6", children: "Basic" }),
-    /* @__PURE__ */ jsx(AppInputBaseSearch, { name: "search" }),
-    /* @__PURE__ */ jsx(AppInputBaseSearch, { name: "search", label: "Search" }),
-    /* @__PURE__ */ jsx(AppInputBaseSearch, { name: "search", label: "Search", placeholder: "Search for..." }),
+  render: () => /* @__PURE__ */ jsxs(StackColumn, { sx: { background: "white" }, padding: 4, gap: 4, width: 400, children: [
+    /* @__PURE__ */ jsxs(StackColumn, { children: [
+      /* @__PURE__ */ jsx(AppTypography, { variant: "h6", children: "Basic" }),
+      /* @__PURE__ */ jsx(AppInputBaseSearch, { name: "search" }),
+      /* @__PURE__ */ jsx(AppInputBaseSearch, { name: "search", label: "Search" }),
+      /* @__PURE__ */ jsx(AppInputBaseSearch, { name: "search", label: "Search", placeholder: "Search for..." })
+    ] }),
     /* @__PURE__ */ jsx(Divider, {}),
-    /* @__PURE__ */ jsx(AppTypography, { variant: "h6", children: "Sizes" }),
-    /* @__PURE__ */ jsx(AppInputBaseSearch, { name: "search", label: "Medium", placeholder: "Search for..." }),
-    /* @__PURE__ */ jsx(AppInputBaseSearch, { name: "search", label: "Small", placeholder: "Search for...", size: "small" }),
+    /* @__PURE__ */ jsxs(StackColumn, { children: [
+      /* @__PURE__ */ jsx(AppTypography, { variant: "h6", children: "Sizes" }),
+      /* @__PURE__ */ jsx(AppInputBaseSearch, { name: "search", label: "Medium", placeholder: "Search for..." }),
+      /* @__PURE__ */ jsx(AppInputBaseSearch, { name: "search", label: "Small", placeholder: "Search for...", size: "small" })
+    ] }),
     /* @__PURE__ */ jsx(Divider, {}),
-    /* @__PURE__ */ jsx(AppTypography, { variant: "h6", children: "States" }),
-    /* @__PURE__ */ jsx(AppInputBaseSearch, { name: "search", label: "Error", placeholder: "Search for...", error: true }),
-    /* @__PURE__ */ jsx(AppInputBaseSearch, { name: "search", label: "Disabled", placeholder: "Search for...", disabled: true }),
+    /* @__PURE__ */ jsxs(StackColumn, { children: [
+      /* @__PURE__ */ jsx(AppTypography, { variant: "h6", children: "States" }),
+      /* @__PURE__ */ jsx(AppInputBaseSearch, { name: "search", label: "Error", placeholder: "Search for...", error: true }),
+      /* @__PURE__ */ jsx(AppInputBaseSearch, { name: "search", label: "Disabled", placeholder: "Search for...", disabled: true })
+    ] }),
     /* @__PURE__ */ jsx(Divider, {}),
-    /* @__PURE__ */ jsx(AppTypography, { variant: "h6", children: "RTL" }),
-    /* @__PURE__ */ jsx(AppInputBaseSearch, { name: "search", dir: "rtl" }),
-    /* @__PURE__ */ jsx(AppInputBaseSearch, { name: "search", dir: "rtl", label: "بحث" }),
-    /* @__PURE__ */ jsx(AppInputBaseSearch, { name: "search", dir: "rtl", label: "بحث", placeholder: "ابحث عن..." }),
-    /* @__PURE__ */ jsx(
-      AppInputBaseSearch,
-      {
-        name: "search",
-        dir: "rtl",
-        label: "بحث",
-        placeholder: "ابحث عن...",
-        size: "small",
-        error: true
-      }
-    )
+    /* @__PURE__ */ jsxs(StackColumn, { children: [
+      /* @__PURE__ */ jsx(AppTypography, { variant: "h6", children: "RTL" }),
+      /* @__PURE__ */ jsx(AppInputBaseSearch, { name: "search", dir: "rtl" }),
+      /* @__PURE__ */ jsx(AppInputBaseSearch, { name: "search", dir: "rtl", label: "بحث" }),
+      /* @__PURE__ */ jsx(AppInputBaseSearch, { name: "search", dir: "rtl", label: "بحث", placeholder: "ابحث عن..." }),
+      /* @__PURE__ */ jsx(
+        AppInputBaseSearch,
+        {
+          name: "search",
+          dir: "rtl",
+          label: "بحث",
+          placeholder: "ابحث عن...",
+          size: "small",
+          error: true
+        }
+      )
+    ] })
   ] })
 };
 export {

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

@@ -1 +1 @@
-{"version":3,"file":"AppInputBaseSearch.stories.js","sources":["../../../../../src/stories/react/AppInputBaseSearch.stories.tsx"],"sourcesContent":["import type { Meta, StoryObj } from '@storybook/react-vite';\n\nimport { Divider } from '@mui/material';\n\nimport { AppInputBaseSearch } from '~/components/app-input-base-search';\nimport { AppTypography } from '~/components/app-typography';\nimport { StackColumn } from '~/components/stack-column';\n\n//\n//\n\n// Meta\nconst meta = {\n  title: 'React/App Input Base Search',\n  component: AppInputBaseSearch,\n  parameters: {\n    layout: 'centered',\n  },\n  tags: ['autodocs'],\n  argTypes: {\n    size: {\n      control: 'select',\n      options: ['medium', 'small'],\n    },\n    disabled: {\n      control: 'boolean',\n    },\n    error: {\n      control: 'boolean',\n    },\n    label: {\n      control: 'text',\n    },\n    placeholder: {\n      control: 'text',\n    },\n  },\n  args: {\n    name: 'search',\n    label: 'Search',\n    placeholder: 'Search for...',\n    disabled: false,\n    error: false,\n  },\n} satisfies Meta<typeof AppInputBaseSearch>;\n\nexport default meta;\ntype Story = StoryObj<typeof meta>;\n\n//\n\nexport const Playground: Story = {\n  args: {},\n};\n\n//\n\nexport const Variants: Story = {\n  render: () => (\n    <StackColumn sx={{ background: 'white' }} padding={10} gap={4}>\n      <AppTypography variant=\"h6\">Basic</AppTypography>\n\n      <AppInputBaseSearch name=\"search\" />\n      <AppInputBaseSearch name=\"search\" label=\"Search\" />\n      <AppInputBaseSearch name=\"search\" label=\"Search\" placeholder=\"Search for...\" />\n\n      <Divider />\n\n      <AppTypography variant=\"h6\">Sizes</AppTypography>\n\n      <AppInputBaseSearch name=\"search\" label=\"Medium\" placeholder=\"Search for...\" />\n      <AppInputBaseSearch name=\"search\" label=\"Small\" placeholder=\"Search for...\" size=\"small\" />\n\n      <Divider />\n\n      <AppTypography variant=\"h6\">States</AppTypography>\n\n      <AppInputBaseSearch name=\"search\" label=\"Error\" placeholder=\"Search for...\" error />\n      <AppInputBaseSearch name=\"search\" label=\"Disabled\" placeholder=\"Search for...\" disabled />\n\n      <Divider />\n\n      <AppTypography variant=\"h6\">RTL</AppTypography>\n\n      <AppInputBaseSearch name=\"search\" dir=\"rtl\" />\n      <AppInputBaseSearch name=\"search\" dir=\"rtl\" label=\"بحث\" />\n      <AppInputBaseSearch name=\"search\" dir=\"rtl\" label=\"بحث\" placeholder=\"ابحث عن...\" />\n      <AppInputBaseSearch\n        name=\"search\"\n        dir=\"rtl\"\n        label=\"بحث\"\n        placeholder=\"ابحث عن...\"\n        size=\"small\"\n        error\n      />\n    </StackColumn>\n  ),\n};\n"],"names":[],"mappings":";;;;;AAYA,MAAM,OAAO;AAAA,EACX,OAAO;AAAA,EACP,WAAW;AAAA,EACX,YAAY;AAAA,IACV,QAAQ;AAAA,EAAA;AAAA,EAEV,MAAM,CAAC,UAAU;AAAA,EACjB,UAAU;AAAA,IACR,MAAM;AAAA,MACJ,SAAS;AAAA,MACT,SAAS,CAAC,UAAU,OAAO;AAAA,IAAA;AAAA,IAE7B,UAAU;AAAA,MACR,SAAS;AAAA,IAAA;AAAA,IAEX,OAAO;AAAA,MACL,SAAS;AAAA,IAAA;AAAA,IAEX,OAAO;AAAA,MACL,SAAS;AAAA,IAAA;AAAA,IAEX,aAAa;AAAA,MACX,SAAS;AAAA,IAAA;AAAA,EACX;AAAA,EAEF,MAAM;AAAA,IACJ,MAAM;AAAA,IACN,OAAO;AAAA,IACP,aAAa;AAAA,IACb,UAAU;AAAA,IACV,OAAO;AAAA,EAAA;AAEX;AAOO,MAAM,aAAoB;AAAA,EAC/B,MAAM,CAAA;AACR;AAIO,MAAM,WAAkB;AAAA,EAC7B,QAAQ,MACN,qBAAC,aAAA,EAAY,IAAI,EAAE,YAAY,QAAA,GAAW,SAAS,IAAI,KAAK,GAC1D,UAAA;AAAA,IAAA,oBAAC,eAAA,EAAc,SAAQ,MAAK,UAAA,SAAK;AAAA,IAEjC,oBAAC,oBAAA,EAAmB,MAAK,SAAA,CAAS;AAAA,IAClC,oBAAC,oBAAA,EAAmB,MAAK,UAAS,OAAM,UAAS;AAAA,wBAChD,oBAAA,EAAmB,MAAK,UAAS,OAAM,UAAS,aAAY,iBAAgB;AAAA,wBAE5E,SAAA,EAAQ;AAAA,IAET,oBAAC,eAAA,EAAc,SAAQ,MAAK,UAAA,SAAK;AAAA,wBAEhC,oBAAA,EAAmB,MAAK,UAAS,OAAM,UAAS,aAAY,iBAAgB;AAAA,IAC7E,oBAAC,sBAAmB,MAAK,UAAS,OAAM,SAAQ,aAAY,iBAAgB,MAAK,QAAA,CAAQ;AAAA,wBAExF,SAAA,EAAQ;AAAA,IAET,oBAAC,eAAA,EAAc,SAAQ,MAAK,UAAA,UAAM;AAAA,IAElC,oBAAC,sBAAmB,MAAK,UAAS,OAAM,SAAQ,aAAY,iBAAgB,OAAK,KAAA,CAAC;AAAA,IAClF,oBAAC,sBAAmB,MAAK,UAAS,OAAM,YAAW,aAAY,iBAAgB,UAAQ,KAAA,CAAC;AAAA,wBAEvF,SAAA,EAAQ;AAAA,IAET,oBAAC,eAAA,EAAc,SAAQ,MAAK,UAAA,OAAG;AAAA,IAE/B,oBAAC,oBAAA,EAAmB,MAAK,UAAS,KAAI,OAAM;AAAA,wBAC3C,oBAAA,EAAmB,MAAK,UAAS,KAAI,OAAM,OAAM,OAAM;AAAA,IACxD,oBAAC,sBAAmB,MAAK,UAAS,KAAI,OAAM,OAAM,OAAM,aAAY,aAAA,CAAa;AAAA,IACjF;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,MAAK;AAAA,QACL,KAAI;AAAA,QACJ,OAAM;AAAA,QACN,aAAY;AAAA,QACZ,MAAK;AAAA,QACL,OAAK;AAAA,MAAA;AAAA,IAAA;AAAA,EACP,EAAA,CACF;AAEJ;"}
+{"version":3,"file":"AppInputBaseSearch.stories.js","sources":["../../../../../src/stories/react/AppInputBaseSearch.stories.tsx"],"sourcesContent":["import type { Meta, StoryObj } from '@storybook/react-vite';\n\nimport { Divider } from '@mui/material';\n\nimport { AppInputBaseSearch } from '~/components/app-input-base-search';\nimport { AppTypography } from '~/components/app-typography';\nimport { StackColumn } from '~/components/stack-column';\n\n//\n//\n\n// Meta\nconst meta = {\n  title: 'React/App Input Base Search',\n  component: AppInputBaseSearch,\n  parameters: {\n    layout: 'centered',\n  },\n  tags: ['autodocs'],\n  argTypes: {\n    size: {\n      control: 'select',\n      options: ['medium', 'small'],\n    },\n    disabled: {\n      control: 'boolean',\n    },\n    error: {\n      control: 'boolean',\n    },\n    label: {\n      control: 'text',\n    },\n    placeholder: {\n      control: 'text',\n    },\n  },\n  args: {\n    name: 'search',\n    label: 'Search',\n    placeholder: 'Search for...',\n    disabled: false,\n    error: false,\n  },\n} satisfies Meta<typeof AppInputBaseSearch>;\n\nexport default meta;\ntype Story = StoryObj<typeof meta>;\n\n//\n\nexport const Playground: Story = {\n  args: {},\n};\n\n//\n\nexport const Variants: Story = {\n  render: () => (\n    <StackColumn sx={{ background: 'white' }} padding={4} gap={4} width={400}>\n      <StackColumn>\n        <AppTypography variant=\"h6\">Basic</AppTypography>\n\n        <AppInputBaseSearch name=\"search\" />\n        <AppInputBaseSearch name=\"search\" label=\"Search\" />\n        <AppInputBaseSearch name=\"search\" label=\"Search\" placeholder=\"Search for...\" />\n      </StackColumn>\n\n      <Divider />\n\n      <StackColumn>\n        <AppTypography variant=\"h6\">Sizes</AppTypography>\n\n        <AppInputBaseSearch name=\"search\" label=\"Medium\" placeholder=\"Search for...\" />\n        <AppInputBaseSearch name=\"search\" label=\"Small\" placeholder=\"Search for...\" size=\"small\" />\n      </StackColumn>\n\n      <Divider />\n\n      <StackColumn>\n        <AppTypography variant=\"h6\">States</AppTypography>\n\n        <AppInputBaseSearch name=\"search\" label=\"Error\" placeholder=\"Search for...\" error />\n        <AppInputBaseSearch name=\"search\" label=\"Disabled\" placeholder=\"Search for...\" disabled />\n      </StackColumn>\n\n      <Divider />\n\n      <StackColumn>\n        <AppTypography variant=\"h6\">RTL</AppTypography>\n\n        <AppInputBaseSearch name=\"search\" dir=\"rtl\" />\n        <AppInputBaseSearch name=\"search\" dir=\"rtl\" label=\"بحث\" />\n        <AppInputBaseSearch name=\"search\" dir=\"rtl\" label=\"بحث\" placeholder=\"ابحث عن...\" />\n        <AppInputBaseSearch\n          name=\"search\"\n          dir=\"rtl\"\n          label=\"بحث\"\n          placeholder=\"ابحث عن...\"\n          size=\"small\"\n          error\n        />\n      </StackColumn>\n    </StackColumn>\n  ),\n};\n"],"names":[],"mappings":";;;;;AAYA,MAAM,OAAO;AAAA,EACX,OAAO;AAAA,EACP,WAAW;AAAA,EACX,YAAY;AAAA,IACV,QAAQ;AAAA,EAAA;AAAA,EAEV,MAAM,CAAC,UAAU;AAAA,EACjB,UAAU;AAAA,IACR,MAAM;AAAA,MACJ,SAAS;AAAA,MACT,SAAS,CAAC,UAAU,OAAO;AAAA,IAAA;AAAA,IAE7B,UAAU;AAAA,MACR,SAAS;AAAA,IAAA;AAAA,IAEX,OAAO;AAAA,MACL,SAAS;AAAA,IAAA;AAAA,IAEX,OAAO;AAAA,MACL,SAAS;AAAA,IAAA;AAAA,IAEX,aAAa;AAAA,MACX,SAAS;AAAA,IAAA;AAAA,EACX;AAAA,EAEF,MAAM;AAAA,IACJ,MAAM;AAAA,IACN,OAAO;AAAA,IACP,aAAa;AAAA,IACb,UAAU;AAAA,IACV,OAAO;AAAA,EAAA;AAEX;AAOO,MAAM,aAAoB;AAAA,EAC/B,MAAM,CAAA;AACR;AAIO,MAAM,WAAkB;AAAA,EAC7B,QAAQ,MACN,qBAAC,aAAA,EAAY,IAAI,EAAE,YAAY,QAAA,GAAW,SAAS,GAAG,KAAK,GAAG,OAAO,KACnE,UAAA;AAAA,IAAA,qBAAC,aAAA,EACC,UAAA;AAAA,MAAA,oBAAC,eAAA,EAAc,SAAQ,MAAK,UAAA,SAAK;AAAA,MAEjC,oBAAC,oBAAA,EAAmB,MAAK,SAAA,CAAS;AAAA,MAClC,oBAAC,oBAAA,EAAmB,MAAK,UAAS,OAAM,UAAS;AAAA,0BAChD,oBAAA,EAAmB,MAAK,UAAS,OAAM,UAAS,aAAY,gBAAA,CAAgB;AAAA,IAAA,GAC/E;AAAA,wBAEC,SAAA,EAAQ;AAAA,yBAER,aAAA,EACC,UAAA;AAAA,MAAA,oBAAC,eAAA,EAAc,SAAQ,MAAK,UAAA,SAAK;AAAA,0BAEhC,oBAAA,EAAmB,MAAK,UAAS,OAAM,UAAS,aAAY,iBAAgB;AAAA,MAC7E,oBAAC,sBAAmB,MAAK,UAAS,OAAM,SAAQ,aAAY,iBAAgB,MAAK,QAAA,CAAQ;AAAA,IAAA,GAC3F;AAAA,wBAEC,SAAA,EAAQ;AAAA,yBAER,aAAA,EACC,UAAA;AAAA,MAAA,oBAAC,eAAA,EAAc,SAAQ,MAAK,UAAA,UAAM;AAAA,MAElC,oBAAC,sBAAmB,MAAK,UAAS,OAAM,SAAQ,aAAY,iBAAgB,OAAK,KAAA,CAAC;AAAA,MAClF,oBAAC,sBAAmB,MAAK,UAAS,OAAM,YAAW,aAAY,iBAAgB,UAAQ,KAAA,CAAC;AAAA,IAAA,GAC1F;AAAA,wBAEC,SAAA,EAAQ;AAAA,yBAER,aAAA,EACC,UAAA;AAAA,MAAA,oBAAC,eAAA,EAAc,SAAQ,MAAK,UAAA,OAAG;AAAA,MAE/B,oBAAC,oBAAA,EAAmB,MAAK,UAAS,KAAI,OAAM;AAAA,0BAC3C,oBAAA,EAAmB,MAAK,UAAS,KAAI,OAAM,OAAM,OAAM;AAAA,MACxD,oBAAC,sBAAmB,MAAK,UAAS,KAAI,OAAM,OAAM,OAAM,aAAY,aAAA,CAAa;AAAA,MACjF;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,MAAK;AAAA,UACL,KAAI;AAAA,UACJ,OAAM;AAAA,UACN,aAAY;AAAA,UACZ,MAAK;AAAA,UACL,OAAK;AAAA,QAAA;AAAA,MAAA;AAAA,IACP,EAAA,CACF;AAAA,EAAA,EAAA,CACF;AAEJ;"}