@zidsa/zidmui 2.0.2 → 2.1.0

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

@@ -0,0 +1 @@
+{"version":3,"file":"AppDialogWithFeatures.stories.js","sources":["../../../../../src/stories/react/AppDialogWithFeatures.stories.tsx"],"sourcesContent":["import { useState } from 'react';\n\nimport type { Meta, StoryObj } from '@storybook/react-vite';\n\nimport { AppDialogWithFeatures } from '~/components/app-dialog-with-features';\nimport { AppButton } from '~/components/app-button';\nimport { AppTypography } from '~/components/app-typography';\n\n//\n//\n\n// Meta\nconst meta = {\n  title: 'React/App Dialog With Features',\n  component: AppDialogWithFeatures,\n  parameters: {\n    layout: 'centered',\n  },\n  tags: ['autodocs'],\n  argTypes: {\n    title: {\n      control: 'text',\n    },\n    isLoading: {\n      control: 'boolean',\n    },\n  },\n} satisfies Meta<typeof AppDialogWithFeatures>;\n\nexport default meta;\ntype Story = StoryObj<typeof meta>;\n\n//\n\nconst DefaultComponent = () => {\n  const [open, setOpen] = useState(false);\n  const [search, setSearch] = useState('');\n\n  return (\n    <>\n      <AppButton onClick={() => setOpen(true)}>Open Dialog</AppButton>\n      <AppDialogWithFeatures\n        open={open}\n        onClose={() => setOpen(false)}\n        title=\"Select Item\"\n        search={search}\n        onSearchChange={setSearch}\n      >\n        <AppTypography>Item One</AppTypography>\n        <AppTypography>Item Two</AppTypography>\n        <AppTypography>Item Three</AppTypography>\n        <AppTypography>Item Four</AppTypography>\n      </AppDialogWithFeatures>\n    </>\n  );\n};\n\nexport const Default: Story = {\n  args: {\n    open: false,\n    onClose: () => {},\n    search: '',\n    children: null,\n  },\n  render: () => <DefaultComponent />,\n};\n\n//\n\nconst WithPaginationComponent = () => {\n  const [open, setOpen] = useState(false);\n  const [search, setSearch] = useState('');\n  const [page, setPage] = useState(1);\n\n  return (\n    <>\n      <AppButton onClick={() => setOpen(true)}>Open Dialog</AppButton>\n      <AppDialogWithFeatures\n        open={open}\n        onClose={() => setOpen(false)}\n        title=\"Select Item\"\n        search={search}\n        onSearchChange={setSearch}\n        pagination={{\n          count: 5,\n          page,\n          onChange: (_, newPage) => setPage(newPage),\n        }}\n      >\n        <AppTypography>Item One</AppTypography>\n        <AppTypography>Item Two</AppTypography>\n        <AppTypography>Item Three</AppTypography>\n        <AppTypography>Item Four</AppTypography>\n      </AppDialogWithFeatures>\n    </>\n  );\n};\n\nexport const WithPagination: Story = {\n  args: {\n    open: false,\n    onClose: () => {},\n    search: '',\n    children: null,\n  },\n  render: () => <WithPaginationComponent />,\n};\n\n//\n\nconst LoadingComponent = () => {\n  const [open, setOpen] = useState(false);\n\n  return (\n    <>\n      <AppButton onClick={() => setOpen(true)}>Open Dialog</AppButton>\n      <AppDialogWithFeatures\n        open={open}\n        onClose={() => setOpen(false)}\n        title=\"Loading...\"\n        search=\"\"\n        isLoading\n      >\n        <AppTypography>Content</AppTypography>\n      </AppDialogWithFeatures>\n    </>\n  );\n};\n\nexport const Loading: Story = {\n  args: {\n    open: false,\n    onClose: () => {},\n    search: '',\n    children: null,\n  },\n  render: () => <LoadingComponent />,\n};\n"],"names":["AppDialogWithFeatures","useState","jsxs","Fragment","jsx","AppButton","AppTypography"],"mappings":"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"}

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

@@ -0,0 +1,157 @@
+"use strict";
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
+const jsxRuntime = require("react/jsx-runtime");
+const appEmptyState = require("../../components/app-empty-state.js");
+const appButton = require("../../components/app-button.js");
+const errorWarningLine = require("../../icons/system/error-warning-line.js");
+const lockLine = require("../../icons/system/lock-line.js");
+const starLine = require("../../icons/system/star-line.js");
+const meta = {
+  title: "React/App Empty State",
+  component: appEmptyState.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__ */ jsxRuntime.jsx(starLine.IconStarLine, {}),
+    title: "Empty state title",
+    description: "Some text explaining the state here and a nudge to take a corrective or guiding action",
+    children: /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx(appButton.AppButton, { color: "secondary", variant: "outlined", children: "Secondary Action" }),
+      /* @__PURE__ */ jsxRuntime.jsx(appButton.AppButton, { variant: "contained", children: "Primary Action" })
+    ] })
+  }
+};
+const PageNotFound = {
+  args: {
+    icon: /* @__PURE__ */ jsxRuntime.jsx(errorWarningLine.IconErrorWarningLine, {}),
+    variant: "error",
+    size: "standard",
+    title: "Oops, page not found!",
+    description: "We are very sorry for inconvenience.",
+    children: /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx(appButton.AppButton, { color: "secondary", variant: "outlined", children: "Secondary Action" }),
+      /* @__PURE__ */ jsxRuntime.jsx(appButton.AppButton, { variant: "contained", children: "Primary Action" })
+    ] })
+  }
+};
+const PageNotFoundWithSubDescription = {
+  args: {
+    icon: /* @__PURE__ */ jsxRuntime.jsx(errorWarningLine.IconErrorWarningLine, {}),
+    variant: "error",
+    size: "standard",
+    title: "Oops, page not found!",
+    description: "We are very sorry for inconvenience.",
+    subDescription: "Error Code: 404",
+    children: /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx(appButton.AppButton, { color: "secondary", variant: "outlined", children: "Secondary Action" }),
+      /* @__PURE__ */ jsxRuntime.jsx(appButton.AppButton, { variant: "contained", children: "Primary Action" })
+    ] })
+  }
+};
+const AccessDenied = {
+  args: {
+    icon: /* @__PURE__ */ jsxRuntime.jsx(lockLine.IconLockLine, {}),
+    title: "Access denied",
+    variant: "warning",
+    size: "standard",
+    description: "You don't have permission to access this area or take this action",
+    children: /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx(appButton.AppButton, { color: "secondary", variant: "outlined", children: "Secondary Action" }),
+      /* @__PURE__ */ jsxRuntime.jsx(appButton.AppButton, { variant: "contained", children: "Primary Action" })
+    ] })
+  }
+};
+const SomethingWentWrong = {
+  args: {
+    icon: /* @__PURE__ */ jsxRuntime.jsx(errorWarningLine.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__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx(appButton.AppButton, { color: "secondary", variant: "outlined", children: "Secondary Action" }),
+      /* @__PURE__ */ jsxRuntime.jsx(appButton.AppButton, { variant: "contained", children: "Primary Action" })
+    ] })
+  }
+};
+const SmallSize = {
+  args: {
+    icon: /* @__PURE__ */ jsxRuntime.jsx(errorWarningLine.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__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx(appButton.AppButton, { color: "secondary", variant: "outlined", children: "Secondary Action" }),
+      /* @__PURE__ */ jsxRuntime.jsx(appButton.AppButton, { variant: "contained", children: "Primary Action" })
+    ] })
+  }
+};
+const WithImage = {
+  args: {
+    icon: /* @__PURE__ */ jsxRuntime.jsx(errorWarningLine.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__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx(appButton.AppButton, { color: "secondary", variant: "outlined", children: "Secondary Action" }),
+      /* @__PURE__ */ jsxRuntime.jsx(appButton.AppButton, { variant: "contained", children: "Primary Action" })
+    ] })
+  }
+};
+const NoDescription = {
+  args: {
+    size: "standard",
+    icon: /* @__PURE__ */ jsxRuntime.jsx(starLine.IconStarLine, {}),
+    title: "Empty state title",
+    children: /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx(appButton.AppButton, { color: "secondary", variant: "outlined", children: "Secondary Action" }),
+      /* @__PURE__ */ jsxRuntime.jsx(appButton.AppButton, { variant: "contained", children: "Primary Action" })
+    ] })
+  }
+};
+const NoChildren = {
+  args: {
+    size: "standard",
+    icon: /* @__PURE__ */ jsxRuntime.jsx(starLine.IconStarLine, {}),
+    title: "Empty state title",
+    description: "Some text explaining the state here and a nudge to take a corrective or guiding action"
+  }
+};
+exports.AccessDenied = AccessDenied;
+exports.Default = Default;
+exports.NoChildren = NoChildren;
+exports.NoDescription = NoDescription;
+exports.PageNotFound = PageNotFound;
+exports.PageNotFoundWithSubDescription = PageNotFoundWithSubDescription;
+exports.SmallSize = SmallSize;
+exports.SomethingWentWrong = SomethingWentWrong;
+exports.WithImage = WithImage;
+exports.default = meta;
+//# sourceMappingURL=AppEmptyState.stories.js.map

package/dist/react/cjs/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":["AppEmptyState","IconStarLine","jsxs","Fragment","jsx","AppButton","IconErrorWarningLine","IconLockLine"],"mappings":"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"}

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

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

package/dist/react/cjs/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":["AppIconButton","jsxs","StackColumn","jsx","IconSettingsLine","IconDeleteBinLine"],"mappings":"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"}

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

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

package/dist/react/cjs/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":["AppInputBase","jsxs","StackColumn","jsx","AppTypography","Divider"],"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":["AppInputBase","jsxs","StackColumn","jsx","AppTypography","Divider"],"mappings":";;;;;;;AAYA,MAAM,OAAO;AAAA,EACX,OAAO;AAAA,EACP,WAAWA,aAAAA;AAAAA,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,WAAW;AAAA,MACT,SAAS;AAAA,IAAA;AAAA,IAEX,OAAO;AAAA,MACL,SAAS;AAAA,IAAA;AAAA,IAEX,aAAa;AAAA,MACX,SAAS;AAAA,IAAA;AAAA,IAEX,YAAY;AAAA,MACV,SAAS;AAAA,IAAA;AAAA,IAEX,oBAAoB;AAAA,MAClB,SAAS;AAAA,IAAA;AAAA,IAEX,kBAAkB;AAAA,MAChB,SAAS;AAAA,IAAA;AAAA,EACX;AAAA,EAEF,MAAM;AAAA,IACJ,MAAM;AAAA,IACN,OAAO;AAAA,IACP,aAAa;AAAA,IACb,UAAU;AAAA,IACV,OAAO;AAAA,IACP,WAAW;AAAA,EAAA;AAEf;AAOO,MAAM,aAAoB;AAAA,EAC/B,MAAM,CAAA;AACR;AAIO,MAAM,WAAkB;AAAA,EAC7B,QAAQ,MACNC,2BAAAA,KAACC,YAAAA,aAAA,EAAY,IAAI,EAAE,YAAY,QAAA,GAAW,SAAS,GAAG,KAAK,GAAG,OAAO,KACnE,UAAA;AAAA,IAAAD,2BAAAA,KAACC,YAAAA,aAAA,EAAY,KAAK,GAChB,UAAA;AAAA,MAAAC,2BAAAA,IAACC,cAAAA,eAAA,EAAc,SAAQ,MAAK,UAAA,SAAK;AAAA,qCAEhCJ,aAAAA,cAAA,EAAa;AAAA,MACdG,2BAAAA,IAACH,aAAAA,cAAA,EAAa,OAAM,YAAA,CAAY;AAAA,MAChCG,2BAAAA,IAACH,aAAAA,cAAA,EAAa,OAAM,aAAY,aAAY,uBAAsB;AAAA,qCACjEA,aAAAA,cAAA,EAAa,OAAM,aAAY,aAAY,uBAAsB,MAAK,QAAA,CAAQ;AAAA,IAAA,GACjF;AAAA,mCAECK,SAAAA,SAAA,EAAQ;AAAA,IAETJ,2BAAAA,KAACC,YAAAA,aAAA,EAAY,KAAK,GAChB,UAAA;AAAA,MAAAC,2BAAAA,IAACC,cAAAA,eAAA,EAAc,SAAQ,MAAK,UAAA,UAAM;AAAA,MAElCD,2BAAAA;AAAAA,QAACH,aAAAA;AAAAA,QAAA;AAAA,UACC,OAAM;AAAA,UACN,aAAY;AAAA,UACZ,OAAK;AAAA,UACL,YAAW;AAAA,QAAA;AAAA,MAAA;AAAA,qCAEZA,aAAAA,cAAA,EAAa,OAAM,YAAW,aAAY,eAAc,UAAQ,KAAA,CAAC;AAAA,IAAA,GACpE;AAAA,mCAECK,SAAAA,SAAA,EAAQ;AAAA,IAETJ,2BAAAA,KAACC,YAAAA,aAAA,EAAY,KAAK,GAChB,UAAA;AAAA,MAAAC,2BAAAA,IAACC,cAAAA,eAAA,EAAc,SAAQ,MAAK,UAAA,cAAU;AAAA,qCAErCJ,aAAAA,cAAA,EAAa,OAAM,SAAQ,aAAY,QAAO,oBAAmB,KAAI;AAAA,qCACrEA,aAAAA,cAAA,EAAa,OAAM,SAAQ,aAAY,QAAO,kBAAiB,KAAI;AAAA,qCACnEA,aAAAA,cAAA,EAAa,OAAM,UAAS,aAAY,KAAI,kBAAiB,MAAK;AAAA,MACnEG,2BAAAA;AAAAA,QAACH,aAAAA;AAAAA,QAAA;AAAA,UACC,OAAM;AAAA,UACN,aAAY;AAAA,UACZ,kBAAiB;AAAA,UACjB,uBAAuB,EAAE,iBAAiB,EAAE,OAAO,YAAU;AAAA,QAAE;AAAA,MAAA;AAAA,IACjE,GACF;AAAA,mCAECK,SAAAA,SAAA,EAAQ;AAAA,IAETJ,2BAAAA,KAACC,YAAAA,aAAA,EAAY,KAAK,GAChB,UAAA;AAAA,MAAAC,2BAAAA,IAACC,cAAAA,eAAA,EAAc,SAAQ,MAAK,UAAA,aAAS;AAAA,MAErCD,2BAAAA;AAAAA,QAACH,aAAAA;AAAAA,QAAA;AAAA,UACC,OAAM;AAAA,UACN,aAAY;AAAA,UACZ,kBAAiB;AAAA,UACjB,WAAS;AAAA,QAAA;AAAA,MAAA;AAAA,IACX,GACF;AAAA,mCAECK,SAAAA,SAAA,EAAQ;AAAA,IAETJ,2BAAAA,KAACC,YAAAA,aAAA,EAAY,KAAK,GAChB,UAAA;AAAA,MAAAC,2BAAAA,IAACC,cAAAA,eAAA,EAAc,SAAQ,MAAK,UAAA,OAAG;AAAA,MAE/BD,2BAAAA,IAACH,aAAAA,cAAA,EAAa,KAAI,OAAM,OAAM,gBAAe;AAAA,qCAC5CA,aAAAA,cAAA,EAAa,KAAI,OAAM,OAAM,gBAAe,aAAY,gBAAe;AAAA,MACxEG,2BAAAA;AAAAA,QAACH,aAAAA;AAAAA,QAAA;AAAA,UACC,KAAI;AAAA,UACJ,OAAM;AAAA,UACN,aAAY;AAAA,UACZ,MAAK;AAAA,UACL,OAAK;AAAA,QAAA;AAAA,MAAA;AAAA,MAEPG,2BAAAA;AAAAA,QAACH,aAAAA;AAAAA,QAAA;AAAA,UACC,KAAI;AAAA,UACJ,OAAM;AAAA,UACN,aAAY;AAAA,UACZ,oBAAmB;AAAA,QAAA;AAAA,MAAA;AAAA,MAErBG,2BAAAA;AAAAA,QAACH,aAAAA;AAAAA,QAAA;AAAA,UACC,KAAI;AAAA,UACJ,OAAM;AAAA,UACN,aAAY;AAAA,UACZ,kBAAiB;AAAA,QAAA;AAAA,MAAA;AAAA,MAEnBG,2BAAAA;AAAAA,QAACH,aAAAA;AAAAA,QAAA;AAAA,UACC,KAAI;AAAA,UACJ,OAAM;AAAA,UACN,aAAY;AAAA,UACZ,kBAAiB;AAAA,UACjB,WAAS;AAAA,QAAA;AAAA,MAAA;AAAA,IACX,EAAA,CACF;AAAA,EAAA,EAAA,CACF;AAEJ;;;;"}

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

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

package/dist/react/cjs/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":["AppInputBaseSearch","jsxs","StackColumn","jsx","AppTypography","Divider"],"mappings":";;;;;;;AAYA,MAAM,OAAO;AAAA,EACX,OAAO;AAAA,EACP,WAAWA,mBAAAA;AAAAA,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,MACNC,2BAAAA,KAACC,yBAAA,EAAY,IAAI,EAAE,YAAY,QAAA,GAAW,SAAS,IAAI,KAAK,GAC1D,UAAA;AAAA,IAAAC,2BAAAA,IAACC,cAAAA,eAAA,EAAc,SAAQ,MAAK,UAAA,SAAK;AAAA,IAEjCD,2BAAAA,IAACH,mBAAAA,oBAAA,EAAmB,MAAK,SAAA,CAAS;AAAA,IAClCG,2BAAAA,IAACH,mBAAAA,oBAAA,EAAmB,MAAK,UAAS,OAAM,UAAS;AAAA,mCAChDA,mBAAAA,oBAAA,EAAmB,MAAK,UAAS,OAAM,UAAS,aAAY,iBAAgB;AAAA,mCAE5EK,SAAAA,SAAA,EAAQ;AAAA,IAETF,2BAAAA,IAACC,cAAAA,eAAA,EAAc,SAAQ,MAAK,UAAA,SAAK;AAAA,mCAEhCJ,mBAAAA,oBAAA,EAAmB,MAAK,UAAS,OAAM,UAAS,aAAY,iBAAgB;AAAA,IAC7EG,2BAAAA,IAACH,mBAAAA,sBAAmB,MAAK,UAAS,OAAM,SAAQ,aAAY,iBAAgB,MAAK,QAAA,CAAQ;AAAA,mCAExFK,SAAAA,SAAA,EAAQ;AAAA,IAETF,2BAAAA,IAACC,cAAAA,eAAA,EAAc,SAAQ,MAAK,UAAA,UAAM;AAAA,IAElCD,2BAAAA,IAACH,mBAAAA,sBAAmB,MAAK,UAAS,OAAM,SAAQ,aAAY,iBAAgB,OAAK,KAAA,CAAC;AAAA,IAClFG,2BAAAA,IAACH,mBAAAA,sBAAmB,MAAK,UAAS,OAAM,YAAW,aAAY,iBAAgB,UAAQ,KAAA,CAAC;AAAA,mCAEvFK,SAAAA,SAAA,EAAQ;AAAA,IAETF,2BAAAA,IAACC,cAAAA,eAAA,EAAc,SAAQ,MAAK,UAAA,OAAG;AAAA,IAE/BD,2BAAAA,IAACH,mBAAAA,oBAAA,EAAmB,MAAK,UAAS,KAAI,OAAM;AAAA,mCAC3CA,mBAAAA,oBAAA,EAAmB,MAAK,UAAS,KAAI,OAAM,OAAM,OAAM;AAAA,IACxDG,2BAAAA,IAACH,mBAAAA,sBAAmB,MAAK,UAAS,KAAI,OAAM,OAAM,OAAM,aAAY,aAAA,CAAa;AAAA,IACjFG,2BAAAA;AAAAA,MAACH,mBAAAA;AAAAA,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":["AppInputBaseSearch","jsxs","StackColumn","jsx","AppTypography","Divider"],"mappings":"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"}