@zidsa/zidmui 1.4.40 → 1.5.0

package/dist/es/stories/AppAlert.stories.js

@@ -0,0 +1,149 @@
+import { jsx, Fragment, jsxs } from "react/jsx-runtime";
+import { Stack, Box } from "@mui/material";
+import { AppAlert, AppAlertButton } from "../components/app-alert.js";
+import { AppTypography } from "../components/app-typography.js";
+const shortTitle = "Cupidatat proident dolor pariatur";
+const shortContent = "Nostrud commodo sunt ipsum dolore incididunt laboris exercitation pariatur duis.";
+const longTitle = "Cupidatat proident dolor pariatur cupidatat proident dolor pariatur cupidatat proident dolor pariatur cupidatat proident dolor pariatur";
+const longContent = "Nostrud commodo sunt ipsum dolore incididunt laboris exercitation pariatur duis qui Lorem pariatur nulla reprehenderit. Nostrud commodo sunt ipsum dolore incididunt laboris exercitation pariatur duis qui Lorem pariatur nulla reprehenderit.";
+const meta = {
+  title: "App Alert",
+  component: AppAlert,
+  parameters: {
+    layout: "centered"
+  },
+  tags: ["autodocs"]
+};
+const Variants = {
+  render: () => {
+    const onClose = () => {
+    };
+    return /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsxs(Stack, { spacing: 2, children: [
+      /* @__PURE__ */ jsx(AppTypography, { variant: "h6", children: "Variants" }),
+      /* @__PURE__ */ jsx(AppAlert, { title: shortTitle }),
+      /* @__PURE__ */ jsx(AppAlert, { title: shortTitle, content: shortContent }),
+      /* @__PURE__ */ jsx(Box, {}),
+      /* @__PURE__ */ jsx(AppAlert, { severity: "error", title: shortTitle }),
+      /* @__PURE__ */ jsx(AppAlert, { severity: "error", title: shortTitle, content: shortContent, onClose }),
+      /* @__PURE__ */ jsx(Box, {}),
+      /* @__PURE__ */ jsx(AppAlert, { severity: "info", title: shortTitle, onClose }),
+      /* @__PURE__ */ jsx(AppAlert, { severity: "info", title: shortTitle, content: shortContent, onClose }),
+      /* @__PURE__ */ jsx(Box, {}),
+      /* @__PURE__ */ jsx(AppAlert, { severity: "warning", title: shortTitle }),
+      /* @__PURE__ */ jsx(
+        AppAlert,
+        {
+          severity: "warning",
+          title: shortTitle,
+          content: shortContent,
+          onClose
+        }
+      ),
+      /* @__PURE__ */ jsx(Box, {}),
+      /* @__PURE__ */ jsx(AppTypography, { variant: "h6", children: "Cases" }),
+      /* @__PURE__ */ jsx(Box, {}),
+      /* @__PURE__ */ jsx(AppTypography, { variant: "h6", children: "Title Only" }),
+      /* @__PURE__ */ jsx(AppAlert, { title: shortTitle }),
+      /* @__PURE__ */ jsx(AppAlert, { title: shortTitle, onClose }),
+      /* @__PURE__ */ jsx(Box, {}),
+      /* @__PURE__ */ jsx(AppAlert, { severity: "warning", title: longTitle }),
+      /* @__PURE__ */ jsx(AppAlert, { severity: "warning", title: longTitle, onClose }),
+      /* @__PURE__ */ jsx(Box, {}),
+      /* @__PURE__ */ jsx(AppTypography, { variant: "h6", children: "Content Only" }),
+      /* @__PURE__ */ jsx(AppAlert, { severity: "info", content: shortContent }),
+      /* @__PURE__ */ jsx(AppAlert, { severity: "info", content: shortContent, onClose }),
+      /* @__PURE__ */ jsx(Box, {}),
+      /* @__PURE__ */ jsx(AppAlert, { severity: "warning", content: longContent }),
+      /* @__PURE__ */ jsx(AppAlert, { severity: "warning", content: longContent, onClose }),
+      /* @__PURE__ */ jsx(Box, {}),
+      /* @__PURE__ */ jsx(AppTypography, { variant: "h6", children: "Short Title and Short Content" }),
+      /* @__PURE__ */ jsx(AppAlert, { severity: "info", title: shortTitle, content: shortContent }),
+      /* @__PURE__ */ jsx(AppAlert, { severity: "info", title: shortTitle, content: shortContent, onClose }),
+      /* @__PURE__ */ jsx(Box, {}),
+      /* @__PURE__ */ jsx(AppTypography, { variant: "h6", children: "Long Title and Short Content" }),
+      /* @__PURE__ */ jsx(AppAlert, { severity: "info", title: longTitle, content: shortContent }),
+      /* @__PURE__ */ jsx(AppAlert, { severity: "info", title: longTitle, content: shortContent, onClose }),
+      /* @__PURE__ */ jsx(Box, {}),
+      /* @__PURE__ */ jsx(AppTypography, { variant: "h6", children: "Short Title and Long Content" }),
+      /* @__PURE__ */ jsx(AppAlert, { severity: "info", title: shortTitle, content: longContent }),
+      /* @__PURE__ */ jsx(AppAlert, { severity: "info", title: shortTitle, content: longContent, onClose }),
+      /* @__PURE__ */ jsx(Box, {}),
+      /* @__PURE__ */ jsx(AppTypography, { variant: "h6", children: "Long Title and Long Content" }),
+      /* @__PURE__ */ jsx(AppAlert, { severity: "info", title: longTitle, content: longContent }),
+      /* @__PURE__ */ jsx(AppAlert, { severity: "info", title: longTitle, content: longContent, onClose }),
+      /* @__PURE__ */ jsx(AppTypography, { variant: "h6", children: "With Actions" }),
+      /* @__PURE__ */ jsx(
+        AppAlert,
+        {
+          severity: "info",
+          title: shortTitle,
+          actions: /* @__PURE__ */ jsx(AppAlertButton, { children: "Button" })
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        AppAlert,
+        {
+          severity: "info",
+          content: shortContent,
+          actions: /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsx(AppAlertButton, { children: "View link" }),
+            /* @__PURE__ */ jsx(AppAlertButton, { variant: "outlined", children: "Edit" })
+          ] })
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        AppAlert,
+        {
+          severity: "info",
+          title: shortTitle,
+          content: shortContent,
+          actions: /* @__PURE__ */ jsx(AppAlertButton, { variant: "outlined", children: "Button" })
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        AppAlert,
+        {
+          severity: "info",
+          title: shortTitle,
+          content: longContent,
+          actions: /* @__PURE__ */ jsx(AppAlertButton, { children: "Button" })
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        AppAlert,
+        {
+          severity: "info",
+          title: longTitle,
+          content: shortContent,
+          actions: /* @__PURE__ */ jsx(AppAlertButton, { variant: "outlined", children: "Button" })
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        AppAlert,
+        {
+          severity: "info",
+          title: longTitle,
+          content: longContent,
+          actions: /* @__PURE__ */ jsx(AppAlertButton, { children: "Button" })
+        }
+      ),
+      /* @__PURE__ */ jsx(Box, {}),
+      /* @__PURE__ */ jsx(AppTypography, { variant: "h6", children: "With Loading" }),
+      /* @__PURE__ */ jsx(
+        AppAlert,
+        {
+          severity: "info",
+          title: longTitle,
+          content: longContent,
+          actions: /* @__PURE__ */ jsx(AppAlertButton, { children: "Button" }),
+          isLoading: true
+        }
+      )
+    ] }) });
+  }
+};
+export {
+  Variants,
+  meta as default
+};
+//# sourceMappingURL=AppAlert.stories.js.map

package/dist/es/stories/AppAlert.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AppAlert.stories.js","sources":["../../../src/stories/AppAlert.stories.tsx"],"sourcesContent":["import type { Meta, StoryObj } from '@storybook/react-vite';\n\nimport { Box, Stack } from '@mui/material';\n\nimport { AppAlert, AppAlertButton } from '../components/app-alert';\nimport { AppTypography } from '../components/app-typography';\n\n//\n//\n\nconst shortTitle = 'Cupidatat proident dolor pariatur';\nconst shortContent =\n  'Nostrud commodo sunt ipsum dolore incididunt laboris exercitation pariatur duis.';\n\nconst longTitle =\n  'Cupidatat proident dolor pariatur cupidatat proident dolor pariatur cupidatat proident dolor pariatur cupidatat proident dolor pariatur';\nconst longContent =\n  'Nostrud commodo sunt ipsum dolore incididunt laboris exercitation pariatur duis qui Lorem pariatur nulla reprehenderit. Nostrud commodo sunt ipsum dolore incididunt laboris exercitation pariatur duis qui Lorem pariatur nulla reprehenderit.';\n\n// Meta\nconst meta = {\n  title: 'App Alert',\n  component: AppAlert,\n  parameters: {\n    layout: 'centered',\n  },\n  tags: ['autodocs'],\n} satisfies Meta<typeof AppAlert>;\n\nexport default meta;\ntype Story = StoryObj<typeof meta>;\n\n//\n\nexport const Variants: Story = {\n  render: () => {\n    const onClose = () => {};\n\n    return (\n      <>\n        <Stack spacing={2}>\n          <AppTypography variant=\"h6\">Variants</AppTypography>\n\n          <AppAlert title={shortTitle} />\n          <AppAlert title={shortTitle} content={shortContent} />\n\n          <Box />\n\n          <AppAlert severity=\"error\" title={shortTitle} />\n          <AppAlert severity=\"error\" title={shortTitle} content={shortContent} onClose={onClose} />\n\n          <Box />\n\n          <AppAlert severity=\"info\" title={shortTitle} onClose={onClose} />\n          <AppAlert severity=\"info\" title={shortTitle} content={shortContent} onClose={onClose} />\n\n          <Box />\n\n          <AppAlert severity=\"warning\" title={shortTitle} />\n          <AppAlert\n            severity=\"warning\"\n            title={shortTitle}\n            content={shortContent}\n            onClose={onClose}\n          />\n\n          <Box />\n          <AppTypography variant=\"h6\">Cases</AppTypography>\n\n          <Box />\n\n          <AppTypography variant=\"h6\">Title Only</AppTypography>\n\n          <AppAlert title={shortTitle} />\n          <AppAlert title={shortTitle} onClose={onClose} />\n\n          <Box />\n\n          <AppAlert severity=\"warning\" title={longTitle} />\n          <AppAlert severity=\"warning\" title={longTitle} onClose={onClose} />\n\n          <Box />\n\n          <AppTypography variant=\"h6\">Content Only</AppTypography>\n\n          <AppAlert severity=\"info\" content={shortContent} />\n          <AppAlert severity=\"info\" content={shortContent} onClose={onClose} />\n\n          <Box />\n\n          <AppAlert severity=\"warning\" content={longContent} />\n          <AppAlert severity=\"warning\" content={longContent} onClose={onClose} />\n\n          <Box />\n\n          <AppTypography variant=\"h6\">Short Title and Short Content</AppTypography>\n\n          <AppAlert severity=\"info\" title={shortTitle} content={shortContent} />\n          <AppAlert severity=\"info\" title={shortTitle} content={shortContent} onClose={onClose} />\n\n          <Box />\n\n          <AppTypography variant=\"h6\">Long Title and Short Content</AppTypography>\n\n          <AppAlert severity=\"info\" title={longTitle} content={shortContent} />\n          <AppAlert severity=\"info\" title={longTitle} content={shortContent} onClose={onClose} />\n\n          <Box />\n\n          <AppTypography variant=\"h6\">Short Title and Long Content</AppTypography>\n\n          <AppAlert severity=\"info\" title={shortTitle} content={longContent} />\n          <AppAlert severity=\"info\" title={shortTitle} content={longContent} onClose={onClose} />\n\n          <Box />\n\n          <AppTypography variant=\"h6\">Long Title and Long Content</AppTypography>\n\n          <AppAlert severity=\"info\" title={longTitle} content={longContent} />\n          <AppAlert severity=\"info\" title={longTitle} content={longContent} onClose={onClose} />\n\n          <AppTypography variant=\"h6\">With Actions</AppTypography>\n          <AppAlert\n            severity=\"info\"\n            title={shortTitle}\n            actions={<AppAlertButton>Button</AppAlertButton>}\n          />\n          <AppAlert\n            severity=\"info\"\n            content={shortContent}\n            actions={\n              <>\n                <AppAlertButton>View link</AppAlertButton>\n                <AppAlertButton variant=\"outlined\">Edit</AppAlertButton>\n              </>\n            }\n          />\n          <AppAlert\n            severity=\"info\"\n            title={shortTitle}\n            content={shortContent}\n            actions={<AppAlertButton variant=\"outlined\">Button</AppAlertButton>}\n          />\n          <AppAlert\n            severity=\"info\"\n            title={shortTitle}\n            content={longContent}\n            actions={<AppAlertButton>Button</AppAlertButton>}\n          />\n          <AppAlert\n            severity=\"info\"\n            title={longTitle}\n            content={shortContent}\n            actions={<AppAlertButton variant=\"outlined\">Button</AppAlertButton>}\n          />\n          <AppAlert\n            severity=\"info\"\n            title={longTitle}\n            content={longContent}\n            actions={<AppAlertButton>Button</AppAlertButton>}\n          />\n          <Box />\n          <AppTypography variant=\"h6\">With Loading</AppTypography>\n          <AppAlert\n            severity=\"info\"\n            title={longTitle}\n            content={longContent}\n            actions={<AppAlertButton>Button</AppAlertButton>}\n            isLoading\n          />\n        </Stack>\n      </>\n    );\n  },\n};\n\n//\n"],"names":[],"mappings":"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"}

package/dist/es/stories/AppButton.stories.js

@@ -0,0 +1,93 @@
+import { AppButton } from "../components/app-button.js";
+const meta = {
+  title: "App Button",
+  component: AppButton,
+  parameters: {
+    layout: "centered"
+  },
+  tags: ["autodocs"],
+  argTypes: {
+    size: {
+      control: "select",
+      options: ["large", "medium", "small"]
+    },
+    disabled: {
+      control: "boolean"
+    },
+    tooltip: {
+      control: "text"
+    },
+    tooltipProps: {
+      control: "object"
+    }
+  },
+  args: {
+    size: "large",
+    children: "Text",
+    disabled: false,
+    tooltip: "Tooltip sample",
+    tooltipProps: {
+      placement: "top"
+    }
+  }
+};
+const Primary = {
+  argTypes: {
+    color: {
+      control: "select",
+      options: ["primary"]
+    },
+    variant: {
+      control: "select",
+      options: ["contained"]
+    }
+  },
+  args: {
+    color: "primary",
+    variant: "contained"
+  }
+};
+const Secondary = {
+  argTypes: {
+    variant: {
+      control: "select",
+      options: ["text", "outlined"]
+    }
+  },
+  args: {
+    color: "secondary",
+    variant: "outlined"
+  }
+};
+const Tertiary = {
+  argTypes: {
+    variant: {
+      control: "select",
+      options: ["contained", "outlined"]
+    }
+  },
+  args: {
+    color: "tertiary",
+    variant: "contained"
+  }
+};
+const Error = {
+  argTypes: {
+    variant: {
+      control: "select",
+      options: ["text", "outlined", "contained"]
+    }
+  },
+  args: {
+    color: "error",
+    variant: "contained"
+  }
+};
+export {
+  Error,
+  Primary,
+  Secondary,
+  Tertiary,
+  meta as default
+};
+//# sourceMappingURL=AppButton.stories.js.map

package/dist/es/stories/AppButton.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AppButton.stories.js","sources":["../../../src/stories/AppButton.stories.tsx"],"sourcesContent":["import type { Meta, StoryObj } from '@storybook/react-vite';\n\nimport { AppButton } from '../components/app-button';\n\n//\n//\n\n// Meta\nconst meta = {\n  title: 'App Button',\n  component: AppButton,\n  parameters: {\n    layout: 'centered',\n  },\n  tags: ['autodocs'],\n  argTypes: {\n    size: {\n      control: 'select',\n      options: ['large', 'medium', 'small'],\n    },\n    disabled: {\n      control: 'boolean',\n    },\n    tooltip: {\n      control: 'text',\n    },\n    tooltipProps: {\n      control: 'object',\n    },\n  },\n  args: {\n    size: 'large',\n    children: 'Text',\n    disabled: false,\n    tooltip: 'Tooltip sample',\n    tooltipProps: {\n      placement: 'top',\n    },\n  },\n} satisfies Meta<typeof AppButton>;\n\nexport default meta;\ntype Story = StoryObj<typeof meta>;\n\n//\n\nexport const Primary: Story = {\n  argTypes: {\n    color: {\n      control: 'select',\n      options: ['primary'],\n    },\n    variant: {\n      control: 'select',\n      options: ['contained'],\n    },\n  },\n  args: {\n    color: 'primary',\n    variant: 'contained',\n  },\n};\n\n//\n\nexport const Secondary: Story = {\n  argTypes: {\n    variant: {\n      control: 'select',\n      options: ['text', 'outlined'],\n    },\n  },\n  args: {\n    color: 'secondary',\n    variant: 'outlined',\n  },\n};\n\n//\n\nexport const Tertiary: Story = {\n  argTypes: {\n    variant: {\n      control: 'select',\n      options: ['contained', 'outlined'],\n    },\n  },\n  args: {\n    color: 'tertiary',\n    variant: 'contained',\n  },\n};\n\n//\n\nexport const Error: Story = {\n  argTypes: {\n    variant: {\n      control: 'select',\n      options: ['text', 'outlined', 'contained'],\n    },\n  },\n  args: {\n    color: 'error',\n    variant: 'contained',\n  },\n};\n"],"names":[],"mappings":";AAQA,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,SAAS,UAAU,OAAO;AAAA,IAAA;AAAA,IAEtC,UAAU;AAAA,MACR,SAAS;AAAA,IAAA;AAAA,IAEX,SAAS;AAAA,MACP,SAAS;AAAA,IAAA;AAAA,IAEX,cAAc;AAAA,MACZ,SAAS;AAAA,IAAA;AAAA,EACX;AAAA,EAEF,MAAM;AAAA,IACJ,MAAM;AAAA,IACN,UAAU;AAAA,IACV,UAAU;AAAA,IACV,SAAS;AAAA,IACT,cAAc;AAAA,MACZ,WAAW;AAAA,IAAA;AAAA,EACb;AAEJ;AAOO,MAAM,UAAiB;AAAA,EAC5B,UAAU;AAAA,IACR,OAAO;AAAA,MACL,SAAS;AAAA,MACT,SAAS,CAAC,SAAS;AAAA,IAAA;AAAA,IAErB,SAAS;AAAA,MACP,SAAS;AAAA,MACT,SAAS,CAAC,WAAW;AAAA,IAAA;AAAA,EACvB;AAAA,EAEF,MAAM;AAAA,IACJ,OAAO;AAAA,IACP,SAAS;AAAA,EAAA;AAEb;AAIO,MAAM,YAAmB;AAAA,EAC9B,UAAU;AAAA,IACR,SAAS;AAAA,MACP,SAAS;AAAA,MACT,SAAS,CAAC,QAAQ,UAAU;AAAA,IAAA;AAAA,EAC9B;AAAA,EAEF,MAAM;AAAA,IACJ,OAAO;AAAA,IACP,SAAS;AAAA,EAAA;AAEb;AAIO,MAAM,WAAkB;AAAA,EAC7B,UAAU;AAAA,IACR,SAAS;AAAA,MACP,SAAS;AAAA,MACT,SAAS,CAAC,aAAa,UAAU;AAAA,IAAA;AAAA,EACnC;AAAA,EAEF,MAAM;AAAA,IACJ,OAAO;AAAA,IACP,SAAS;AAAA,EAAA;AAEb;AAIO,MAAM,QAAe;AAAA,EAC1B,UAAU;AAAA,IACR,SAAS;AAAA,MACP,SAAS;AAAA,MACT,SAAS,CAAC,QAAQ,YAAY,WAAW;AAAA,IAAA;AAAA,EAC3C;AAAA,EAEF,MAAM;AAAA,IACJ,OAAO;AAAA,IACP,SAAS;AAAA,EAAA;AAEb;"}

package/dist/es/stories/AppIconWithTooltip.stories.js

@@ -0,0 +1,36 @@
+import { AppIconWithTooltip } from "../components/app-icon-with-tooltip.js";
+const meta = {
+  title: "App Icon With Tooltip",
+  component: AppIconWithTooltip,
+  parameters: {
+    layout: "centered"
+  },
+  tags: ["autodocs"],
+  argTypes: {
+    tooltip: {
+      control: "text"
+    },
+    accessibleAreaWidth: {
+      control: "text"
+    },
+    accessibleAreaHeight: {
+      control: "text"
+    },
+    iconProps: {
+      control: "object"
+    }
+  }
+};
+const Variants = {
+  args: {
+    tooltip: "Tooltip sample",
+    accessibleAreaWidth: "36px",
+    accessibleAreaHeight: "36px",
+    tooltipProps: { enterDelay: 250 }
+  }
+};
+export {
+  Variants,
+  meta as default
+};
+//# sourceMappingURL=AppIconWithTooltip.stories.js.map

package/dist/es/stories/AppIconWithTooltip.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AppIconWithTooltip.stories.js","sources":["../../../src/stories/AppIconWithTooltip.stories.tsx"],"sourcesContent":["import type { Meta, StoryObj } from '@storybook/react-vite';\n\nimport { AppIconWithTooltip } from '../components/app-icon-with-tooltip';\n\n//\n//\n\n// Meta\nconst meta = {\n  title: 'App Icon With Tooltip',\n  component: AppIconWithTooltip,\n  parameters: {\n    layout: 'centered',\n  },\n  tags: ['autodocs'],\n  argTypes: {\n    tooltip: {\n      control: 'text',\n    },\n    accessibleAreaWidth: {\n      control: 'text',\n    },\n    accessibleAreaHeight: {\n      control: 'text',\n    },\n    iconProps: {\n      control: 'object',\n    },\n  },\n} satisfies Meta<typeof AppIconWithTooltip>;\n\nexport default meta;\ntype Story = StoryObj<typeof meta>;\n\n//\n\nexport const Variants: Story = {\n  args: {\n    tooltip: 'Tooltip sample',\n    accessibleAreaWidth: '36px',\n    accessibleAreaHeight: '36px',\n    tooltipProps: { enterDelay: 250 },\n  },\n};\n"],"names":[],"mappings":";AAQA,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,SAAS;AAAA,MACP,SAAS;AAAA,IAAA;AAAA,IAEX,qBAAqB;AAAA,MACnB,SAAS;AAAA,IAAA;AAAA,IAEX,sBAAsB;AAAA,MACpB,SAAS;AAAA,IAAA;AAAA,IAEX,WAAW;AAAA,MACT,SAAS;AAAA,IAAA;AAAA,EACX;AAEJ;AAOO,MAAM,WAAkB;AAAA,EAC7B,MAAM;AAAA,IACJ,SAAS;AAAA,IACT,qBAAqB;AAAA,IACrB,sBAAsB;AAAA,IACtB,cAAc,EAAE,YAAY,IAAA;AAAA,EAAI;AAEpC;"}

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

@@ -0,0 +1,131 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { Divider } from "@mui/material";
+import { AppInputBase } from "../components/app-input-base.js";
+import { AppTypography } from "../components/app-typography.js";
+import { StackColumn } from "../components/stack-column.js";
+const meta = {
+  title: "App Input Base",
+  component: AppInputBase,
+  parameters: {
+    layout: "centered"
+  },
+  tags: ["autodocs"],
+  argTypes: {
+    size: {
+      control: "select",
+      options: ["medium", "small"]
+    },
+    disabled: {
+      control: "boolean"
+    },
+    error: {
+      control: "boolean"
+    },
+    multiline: {
+      control: "boolean"
+    },
+    label: {
+      control: "text"
+    },
+    placeholder: {
+      control: "text"
+    },
+    helperText: {
+      control: "text"
+    },
+    startAdornmentText: {
+      control: "text"
+    },
+    endAdornmentText: {
+      control: "text"
+    }
+  },
+  args: {
+    size: "medium",
+    label: "Label",
+    placeholder: "Placeholder text",
+    disabled: false,
+    error: false,
+    multiline: false
+  }
+};
+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" }),
+    /* @__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__ */ 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__ */ jsx(Divider, {}),
+    /* @__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
+      }
+    )
+  ] })
+};
+export {
+  Playground,
+  Variants,
+  meta as default
+};
+//# sourceMappingURL=AppInputBase.stories.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"AppInputBase.stories.js","sources":["../../../src/stories/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: '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 label=\"Error\" placeholder=\"Invalid input\" error helperText=\"This field is required\" />\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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"}

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

@@ -0,0 +1,79 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { Divider } from "@mui/material";
+import { AppInputBaseSearch } from "../components/app-input-base-search.js";
+import { AppTypography } from "../components/app-typography.js";
+import { StackColumn } from "../components/stack-column.js";
+const meta = {
+  title: "App Input Base Search",
+  component: AppInputBaseSearch,
+  parameters: {
+    layout: "centered"
+  },
+  tags: ["autodocs"],
+  argTypes: {
+    size: {
+      control: "select",
+      options: ["medium", "small"]
+    },
+    disabled: {
+      control: "boolean"
+    },
+    error: {
+      control: "boolean"
+    },
+    label: {
+      control: "text"
+    },
+    placeholder: {
+      control: "text"
+    }
+  },
+  args: {
+    name: "search",
+    label: "Search",
+    placeholder: "Search for...",
+    disabled: false,
+    error: false
+  }
+};
+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..." }),
+    /* @__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__ */ 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__ */ 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
+      }
+    )
+  ] })
+};
+export {
+  Playground,
+  Variants,
+  meta as default
+};
+//# sourceMappingURL=AppInputBaseSearch.stories.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"AppInputBaseSearch.stories.js","sources":["../../../src/stories/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: '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;"}