@zidsa/zidmui 1.4.40 → 1.5.0

package/dist/cjs/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":["AppInputBase","jsxs","StackColumn","jsx","AppTypography","Divider"],"mappings":"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"}

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

@@ -0,0 +1,79 @@
+"use strict";
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
+const jsxRuntime = require("react/jsx-runtime");
+const material = require("@mui/material");
+const appInputBaseSearch = require("../components/app-input-base-search.js");
+const appTypography = require("../components/app-typography.js");
+const stackColumn = require("../components/stack-column.js");
+const meta = {
+  title: "App Input Base Search",
+  component: appInputBaseSearch.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__ */ 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..." }),
+    /* @__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.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.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
+      }
+    )
+  ] })
+};
+exports.Playground = Playground;
+exports.Variants = Variants;
+exports.default = meta;
+//# sourceMappingURL=AppInputBaseSearch.stories.js.map

package/dist/cjs/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":["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;;;;"}

package/dist/cjs/stories/AppListItem.stories.js

@@ -0,0 +1,123 @@
+"use strict";
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
+const jsxRuntime = require("react/jsx-runtime");
+const material = require("@mui/material");
+const appListItem = require("../components/app-list-item.js");
+const appStatus = require("../components/app-status.js");
+const appTypography = require("../components/app-typography.js");
+const stackColumn = require("../components/stack-column.js");
+const bankLine = require("../icons/buildings/bank-line.js");
+const meta = {
+  title: "App List Item",
+  component: appListItem.AppListItem,
+  parameters: {
+    layout: "centered"
+  },
+  tags: ["autodocs"],
+  argTypes: {
+    textLabel: {
+      control: "text"
+    },
+    textDescription: {
+      control: "text"
+    },
+    textContent: {
+      control: "text"
+    },
+    tooltip: {
+      control: "text"
+    }
+  },
+  args: {
+    textLabel: "List item label",
+    textDescription: "Description text"
+  }
+};
+const Playground = {
+  args: {}
+};
+const Variants = {
+  render: () => /* @__PURE__ */ jsxRuntime.jsxs(stackColumn.StackColumn, { gap: 2, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(appTypography.AppTypography, { variant: "h6", sx: { px: 1 }, children: "Label Only" }),
+    /* @__PURE__ */ jsxRuntime.jsx(Container, { children: /* @__PURE__ */ jsxRuntime.jsx(appListItem.AppListItem, { textLabel: "Sample Label" }) }),
+    /* @__PURE__ */ jsxRuntime.jsx(material.Divider, {}),
+    /* @__PURE__ */ jsxRuntime.jsx(appTypography.AppTypography, { variant: "h6", sx: { px: 1 }, children: "Label and Description" }),
+    /* @__PURE__ */ jsxRuntime.jsx(Container, { children: /* @__PURE__ */ jsxRuntime.jsx(appListItem.AppListItem, { textLabel: "Another Item", textDescription: "This is a description" }) }),
+    /* @__PURE__ */ jsxRuntime.jsx(material.Divider, {}),
+    /* @__PURE__ */ jsxRuntime.jsx(appTypography.AppTypography, { variant: "h6", sx: { px: 1 }, children: "With Icon" }),
+    /* @__PURE__ */ jsxRuntime.jsx(Container, { children: /* @__PURE__ */ jsxRuntime.jsx(
+      appListItem.AppListItem,
+      {
+        textLabel: "List Item with Icon",
+        textDescription: "This is a description",
+        icon: /* @__PURE__ */ jsxRuntime.jsx(bankLine.IconBankLine, {})
+      }
+    ) }),
+    /* @__PURE__ */ jsxRuntime.jsx(material.Divider, {}),
+    /* @__PURE__ */ jsxRuntime.jsx(appTypography.AppTypography, { variant: "h6", sx: { px: 1 }, children: "With Label Suffix" }),
+    /* @__PURE__ */ jsxRuntime.jsx(Container, { children: /* @__PURE__ */ jsxRuntime.jsx(
+      appListItem.AppListItem,
+      {
+        textLabel: "List Item with Label Suffix",
+        textDescription: "This is a description",
+        labelSuffix: /* @__PURE__ */ jsxRuntime.jsx(appStatus.AppStatus, { color: "success", label: "Active", size: "small" })
+      }
+    ) }),
+    /* @__PURE__ */ jsxRuntime.jsx(material.Divider, {}),
+    /* @__PURE__ */ jsxRuntime.jsx(appTypography.AppTypography, { variant: "h6", sx: { px: 1 }, children: "With Text Content" }),
+    /* @__PURE__ */ jsxRuntime.jsx(Container, { children: /* @__PURE__ */ jsxRuntime.jsx(
+      appListItem.AppListItem,
+      {
+        textLabel: "List Item with Text Content",
+        textDescription: "This is a description",
+        textContent: "Some text content here to demonstrate the textContent prop"
+      }
+    ) }),
+    /* @__PURE__ */ jsxRuntime.jsx(material.Divider, {}),
+    /* @__PURE__ */ jsxRuntime.jsx(appTypography.AppTypography, { variant: "h6", sx: { px: 1 }, children: "With Tooltip" }),
+    /* @__PURE__ */ jsxRuntime.jsx(Container, { children: /* @__PURE__ */ jsxRuntime.jsx(
+      appListItem.AppListItem,
+      {
+        textLabel: "List Item with Tooltip",
+        textDescription: "Hover the icon to see the tooltip",
+        tooltip: "This is a helpful tooltip"
+      }
+    ) }),
+    /* @__PURE__ */ jsxRuntime.jsx(material.Divider, {}),
+    /* @__PURE__ */ jsxRuntime.jsx(appTypography.AppTypography, { variant: "h6", sx: { px: 1 }, children: "Full Example" }),
+    /* @__PURE__ */ jsxRuntime.jsx(Container, { children: /* @__PURE__ */ jsxRuntime.jsx(
+      appListItem.AppListItem,
+      {
+        textLabel: "Complete List Item",
+        textDescription: "This item uses all available props",
+        textContent: "Additional content text",
+        icon: /* @__PURE__ */ jsxRuntime.jsx(bankLine.IconBankLine, {}),
+        labelSuffix: /* @__PURE__ */ jsxRuntime.jsx(appStatus.AppStatus, { color: "info", label: "New", size: "small" }),
+        tooltip: "Tooltip with extra info"
+      }
+    ) }),
+    /* @__PURE__ */ jsxRuntime.jsx(material.Divider, {}),
+    /* @__PURE__ */ jsxRuntime.jsx(appTypography.AppTypography, { variant: "h6", sx: { px: 1 }, children: "With Children" }),
+    /* @__PURE__ */ jsxRuntime.jsx(Container, { children: /* @__PURE__ */ jsxRuntime.jsx(
+      appListItem.AppListItem,
+      {
+        textLabel: "List Item with Children",
+        textDescription: "This is a description",
+        textContent: "Some text content",
+        children: "Additional content"
+      }
+    ) })
+  ] })
+};
+const Container = material.styled(material.Box)(({ theme }) => ({
+  padding: theme.spacing(0),
+  border: `1px solid ${theme.palette.divider}`,
+  borderRadius: theme.shape.borderRadius,
+  backgroundColor: theme.palette.colors.base.white,
+  minWidth: 200,
+  maxWidth: 400
+}));
+exports.Playground = Playground;
+exports.Variants = Variants;
+exports.default = meta;
+//# sourceMappingURL=AppListItem.stories.js.map

package/dist/cjs/stories/AppListItem.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AppListItem.stories.js","sources":["../../../src/stories/AppListItem.stories.tsx"],"sourcesContent":["import type { Meta, StoryObj } from '@storybook/react-vite';\n\nimport { Box, Divider, styled } from '@mui/material';\n\nimport { AppListItem } from '../components/app-list-item';\nimport { AppStatus } from '../components/app-status';\nimport { AppTypography } from '../components/app-typography';\nimport { StackColumn } from '../components/stack-column';\nimport { IconBankLine } from '../icons/buildings/bank-line';\n\n//\n//\n\n// Meta\nconst meta = {\n  title: 'App List Item',\n  component: AppListItem,\n  parameters: {\n    layout: 'centered',\n  },\n  tags: ['autodocs'],\n  argTypes: {\n    textLabel: {\n      control: 'text',\n    },\n    textDescription: {\n      control: 'text',\n    },\n    textContent: {\n      control: 'text',\n    },\n    tooltip: {\n      control: 'text',\n    },\n  },\n  args: {\n    textLabel: 'List item label',\n    textDescription: 'Description text',\n  },\n} satisfies Meta<typeof AppListItem>;\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 gap={2}>\n      <AppTypography variant=\"h6\" sx={{ px: 1 }}>Label Only</AppTypography>\n\n      <Container>\n        <AppListItem textLabel=\"Sample Label\" />\n      </Container>\n\n      <Divider />\n\n      <AppTypography variant=\"h6\" sx={{ px: 1 }}>Label and Description</AppTypography>\n\n      <Container>\n        <AppListItem textLabel=\"Another Item\" textDescription=\"This is a description\" />\n      </Container>\n\n      <Divider />\n\n      <AppTypography variant=\"h6\" sx={{ px: 1 }}>With Icon</AppTypography>\n\n      <Container>\n        <AppListItem\n          textLabel=\"List Item with Icon\"\n          textDescription=\"This is a description\"\n          icon={<IconBankLine />}\n        />\n      </Container>\n\n      <Divider />\n\n      <AppTypography variant=\"h6\" sx={{ px: 1 }}>With Label Suffix</AppTypography>\n\n      <Container>\n        <AppListItem\n          textLabel=\"List Item with Label Suffix\"\n          textDescription=\"This is a description\"\n          labelSuffix={<AppStatus color=\"success\" label=\"Active\" size=\"small\" />}\n        />\n      </Container>\n\n      <Divider />\n\n      <AppTypography variant=\"h6\" sx={{ px: 1 }}>With Text Content</AppTypography>\n\n      <Container>\n        <AppListItem\n          textLabel=\"List Item with Text Content\"\n          textDescription=\"This is a description\"\n          textContent=\"Some text content here to demonstrate the textContent prop\"\n        />\n      </Container>\n\n      <Divider />\n\n      <AppTypography variant=\"h6\" sx={{ px: 1 }}>With Tooltip</AppTypography>\n\n      <Container>\n        <AppListItem\n          textLabel=\"List Item with Tooltip\"\n          textDescription=\"Hover the icon to see the tooltip\"\n          tooltip=\"This is a helpful tooltip\"\n        />\n      </Container>\n\n      <Divider />\n\n      <AppTypography variant=\"h6\" sx={{ px: 1 }}>Full Example</AppTypography>\n\n      <Container>\n        <AppListItem\n          textLabel=\"Complete List Item\"\n          textDescription=\"This item uses all available props\"\n          textContent=\"Additional content text\"\n          icon={<IconBankLine />}\n          labelSuffix={<AppStatus color=\"info\" label=\"New\" size=\"small\" />}\n          tooltip=\"Tooltip with extra info\"\n        />\n      </Container>\n\n      <Divider />\n\n      <AppTypography variant=\"h6\" sx={{ px: 1 }}>With Children</AppTypography>\n\n      <Container>\n        <AppListItem\n          textLabel=\"List Item with Children\"\n          textDescription=\"This is a description\"\n          textContent=\"Some text content\"\n        >\n          Additional content\n        </AppListItem>\n      </Container>\n    </StackColumn>\n  ),\n};\n\nconst Container = styled(Box)(({ theme }) => ({\n  padding: theme.spacing(0),\n  border: `1px solid ${theme.palette.divider}`,\n  borderRadius: theme.shape.borderRadius,\n  backgroundColor: theme.palette.colors.base.white,\n  minWidth: 200,\n  maxWidth: 400,\n}));\n"],"names":["AppListItem","jsxs","StackColumn","jsx","AppTypography","Divider","IconBankLine","AppStatus","styled","Box"],"mappings":"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"}

package/dist/cjs/stories/AppOverflownTextWithTooltip.stories.js

@@ -0,0 +1,41 @@
+"use strict";
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
+const jsxRuntime = require("react/jsx-runtime");
+const material = require("@mui/material");
+const appOverflownTextWithTooltip = require("../components/app-overflown-text-with-tooltip.js");
+const stackColumn = require("../components/stack-column.js");
+const meta = {
+  title: "App Overflown Text With Tooltip",
+  component: appOverflownTextWithTooltip.AppOverflownTextWithTooltip,
+  parameters: {
+    layout: "centered"
+  },
+  tags: ["autodocs"],
+  argTypes: {}
+};
+const Variants = {
+  args: {
+    title: "Sample Label"
+  },
+  render: () => /* @__PURE__ */ jsxRuntime.jsxs(stackColumn.StackColumn, { gap: 2, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(Container, { children: /* @__PURE__ */ jsxRuntime.jsx(appOverflownTextWithTooltip.AppOverflownTextWithTooltip, { title: "This is a very long title that will be truncated" }) }),
+    /* @__PURE__ */ jsxRuntime.jsx(material.Divider, {}),
+    /* @__PURE__ */ jsxRuntime.jsx(Container, { children: /* @__PURE__ */ jsxRuntime.jsx(
+      appOverflownTextWithTooltip.AppOverflownTextWithTooltip,
+      {
+        title: "This is a very very long title that will be truncated and should show tooltip when hovered to see the full text with the rest of the content",
+        twoLines: true
+      }
+    ) })
+  ] })
+};
+const Container = material.styled(material.Box)(({ theme }) => ({
+  padding: theme.spacing(1),
+  border: `1px solid ${theme.palette.divider}`,
+  borderRadius: theme.shape.borderRadius,
+  backgroundColor: theme.palette.colors.base.white,
+  maxWidth: 200
+}));
+exports.Variants = Variants;
+exports.default = meta;
+//# sourceMappingURL=AppOverflownTextWithTooltip.stories.js.map

package/dist/cjs/stories/AppOverflownTextWithTooltip.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AppOverflownTextWithTooltip.stories.js","sources":["../../../src/stories/AppOverflownTextWithTooltip.stories.tsx"],"sourcesContent":["import type { Meta, StoryObj } from '@storybook/react-vite';\n\nimport { Box, Divider, styled } from '@mui/material';\n\nimport { AppOverflownTextWithTooltip } from '../components/app-overflown-text-with-tooltip';\nimport { StackColumn } from '../components/stack-column';\n\n//\n//\n\n// Meta\nconst meta = {\n  title: 'App Overflown Text With Tooltip',\n  component: AppOverflownTextWithTooltip,\n  parameters: {\n    layout: 'centered',\n  },\n  tags: ['autodocs'],\n  argTypes: {},\n} satisfies Meta<typeof AppOverflownTextWithTooltip>;\n\nexport default meta;\ntype Story = StoryObj<typeof meta>;\n\n//\n\nexport const Variants: Story = {\n  args: {\n    title: 'Sample Label',\n  },\n  render: () => (\n    <StackColumn gap={2}>\n      <Container>\n        <AppOverflownTextWithTooltip title=\"This is a very long title that will be truncated\" />\n      </Container>\n\n      <Divider />\n\n      <Container>\n        <AppOverflownTextWithTooltip\n          title=\"This is a very very long title that will be truncated and should show tooltip when hovered to see the full text with the rest of the content\"\n          twoLines\n        />\n      </Container>\n    </StackColumn>\n  ),\n};\n\nconst Container = styled(Box)(({ theme }) => ({\n  padding: theme.spacing(1),\n  border: `1px solid ${theme.palette.divider}`,\n  borderRadius: theme.shape.borderRadius,\n  backgroundColor: theme.palette.colors.base.white,\n  maxWidth: 200,\n}));\n"],"names":["AppOverflownTextWithTooltip","jsxs","StackColumn","jsx","Divider","styled","Box"],"mappings":";;;;;;AAWA,MAAM,OAAO;AAAA,EACX,OAAO;AAAA,EACP,WAAWA,4BAAAA;AAAAA,EACX,YAAY;AAAA,IACV,QAAQ;AAAA,EAAA;AAAA,EAEV,MAAM,CAAC,UAAU;AAAA,EACjB,UAAU,CAAA;AACZ;AAOO,MAAM,WAAkB;AAAA,EAC7B,MAAM;AAAA,IACJ,OAAO;AAAA,EAAA;AAAA,EAET,QAAQ,MACNC,2BAAAA,KAACC,YAAAA,aAAA,EAAY,KAAK,GAChB,UAAA;AAAA,IAAAC,+BAAC,WAAA,EACC,UAAAA,2BAAAA,IAACH,4BAAAA,6BAAA,EAA4B,OAAM,oDAAmD,GACxF;AAAA,mCAECI,SAAAA,SAAA,EAAQ;AAAA,mCAER,WAAA,EACC,UAAAD,2BAAAA;AAAAA,MAACH,4BAAAA;AAAAA,MAAA;AAAA,QACC,OAAM;AAAA,QACN,UAAQ;AAAA,MAAA;AAAA,IAAA,EACV,CACF;AAAA,EAAA,EAAA,CACF;AAEJ;AAEA,MAAM,YAAYK,SAAAA,OAAOC,SAAAA,GAAG,EAAE,CAAC,EAAE,aAAa;AAAA,EAC5C,SAAS,MAAM,QAAQ,CAAC;AAAA,EACxB,QAAQ,aAAa,MAAM,QAAQ,OAAO;AAAA,EAC1C,cAAc,MAAM,MAAM;AAAA,EAC1B,iBAAiB,MAAM,QAAQ,OAAO,KAAK;AAAA,EAC3C,UAAU;AACZ,EAAE;;;"}

package/dist/cjs/stories/AppStatus.stories.js

@@ -0,0 +1,68 @@
+"use strict";
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
+const jsxRuntime = require("react/jsx-runtime");
+const material = require("@mui/material");
+const appStatus = require("../components/app-status.js");
+const meta = {
+  title: "App Status",
+  component: appStatus.AppStatus,
+  parameters: {
+    layout: "centered"
+  },
+  tags: ["autodocs"],
+  argTypes: {
+    color: {
+      control: "select"
+    }
+  }
+};
+const Playground = {
+  args: {
+    color: "success",
+    label: "Text",
+    size: "small",
+    tooltip: "Tooltip sample",
+    tooltipProps: {
+      placement: "top"
+    }
+  }
+};
+const Variants = {
+  render: () => /* @__PURE__ */ jsxRuntime.jsxs(material.Stack, { spacing: 0, gap: 4, children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(material.Stack, { direction: "row", spacing: 0, gap: 2, flexWrap: "wrap", justifyContent: "center", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(appStatus.AppStatus, { label: "Success", color: "success" }),
+      /* @__PURE__ */ jsxRuntime.jsx(appStatus.AppStatus, { label: "Warning", color: "warning" }),
+      /* @__PURE__ */ jsxRuntime.jsx(appStatus.AppStatus, { label: "Error", color: "error" }),
+      /* @__PURE__ */ jsxRuntime.jsx(appStatus.AppStatus, { label: "Neutral", color: "neutral" }),
+      /* @__PURE__ */ jsxRuntime.jsx(appStatus.AppStatus, { label: "Disabled", color: "disabled" }),
+      /* @__PURE__ */ jsxRuntime.jsx(appStatus.AppStatus, { label: "Info", color: "info" }),
+      /* @__PURE__ */ jsxRuntime.jsx(appStatus.AppStatus, { label: "Orange", color: "orange" }),
+      /* @__PURE__ */ jsxRuntime.jsx(appStatus.AppStatus, { label: "Blue", color: "blue" }),
+      /* @__PURE__ */ jsxRuntime.jsx(appStatus.AppStatus, { label: "With Tooltip", color: "neutral", tooltip: "Tooltip sample" })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsx(material.Divider, {}),
+    /* @__PURE__ */ jsxRuntime.jsxs(material.Stack, { direction: "row", spacing: 0, gap: 2, flexWrap: "wrap", justifyContent: "center", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(appStatus.AppStatus, { label: "Success", color: "success", size: "medium" }),
+      /* @__PURE__ */ jsxRuntime.jsx(appStatus.AppStatus, { label: "Warning", color: "warning", size: "medium" }),
+      /* @__PURE__ */ jsxRuntime.jsx(appStatus.AppStatus, { label: "Error", color: "error", size: "medium" }),
+      /* @__PURE__ */ jsxRuntime.jsx(appStatus.AppStatus, { label: "Neutral", color: "neutral", size: "medium" }),
+      /* @__PURE__ */ jsxRuntime.jsx(appStatus.AppStatus, { label: "Disabled", color: "disabled", size: "medium" }),
+      /* @__PURE__ */ jsxRuntime.jsx(appStatus.AppStatus, { label: "Info", color: "info", size: "medium" }),
+      /* @__PURE__ */ jsxRuntime.jsx(appStatus.AppStatus, { label: "Orange", color: "orange", size: "medium" }),
+      /* @__PURE__ */ jsxRuntime.jsx(appStatus.AppStatus, { label: "Blue", color: "blue", size: "medium" }),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        appStatus.AppStatus,
+        {
+          label: "With Tooltip size medium",
+          color: "neutral",
+          size: "medium",
+          tooltip: "Tooltip sample"
+        }
+      )
+    ] })
+  ] })
+};
+exports.Playground = Playground;
+exports.Variants = Variants;
+exports.default = meta;
+//# sourceMappingURL=AppStatus.stories.js.map

package/dist/cjs/stories/AppStatus.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AppStatus.stories.js","sources":["../../../src/stories/AppStatus.stories.tsx"],"sourcesContent":["import type { Meta, StoryObj } from '@storybook/react-vite';\n\nimport { Divider, Stack } from '@mui/material';\n\nimport { AppStatus } from '../components/app-status';\n\n//\n//\n\n// Meta\nconst meta = {\n  title: 'App Status',\n  component: AppStatus,\n  parameters: {\n    layout: 'centered',\n  },\n  tags: ['autodocs'],\n  argTypes: {\n    color: {\n      control: 'select',\n    },\n  },\n} satisfies Meta<typeof AppStatus>;\n\nexport default meta;\ntype Story = StoryObj<typeof meta>;\n\n//\n\nexport const Playground: Story = {\n  args: {\n    color: 'success',\n    label: 'Text',\n    size: 'small',\n    tooltip: 'Tooltip sample',\n    tooltipProps: {\n      placement: 'top',\n    },\n  },\n};\n\nexport const Variants: Story = {\n  render: () => (\n    <Stack spacing={0} gap={4}>\n      <Stack direction=\"row\" spacing={0} gap={2} flexWrap=\"wrap\" justifyContent=\"center\">\n        <AppStatus label=\"Success\" color=\"success\" />\n        <AppStatus label=\"Warning\" color=\"warning\" />\n        <AppStatus label=\"Error\" color=\"error\" />\n        <AppStatus label=\"Neutral\" color=\"neutral\" />\n        <AppStatus label=\"Disabled\" color=\"disabled\" />\n        <AppStatus label=\"Info\" color=\"info\" />\n        <AppStatus label=\"Orange\" color=\"orange\" />\n        <AppStatus label=\"Blue\" color=\"blue\" />\n        <AppStatus label=\"With Tooltip\" color=\"neutral\" tooltip=\"Tooltip sample\" />\n      </Stack>\n\n      <Divider />\n\n      <Stack direction=\"row\" spacing={0} gap={2} flexWrap=\"wrap\" justifyContent=\"center\">\n        <AppStatus label=\"Success\" color=\"success\" size=\"medium\" />\n        <AppStatus label=\"Warning\" color=\"warning\" size=\"medium\" />\n        <AppStatus label=\"Error\" color=\"error\" size=\"medium\" />\n        <AppStatus label=\"Neutral\" color=\"neutral\" size=\"medium\" />\n        <AppStatus label=\"Disabled\" color=\"disabled\" size=\"medium\" />\n        <AppStatus label=\"Info\" color=\"info\" size=\"medium\" />\n        <AppStatus label=\"Orange\" color=\"orange\" size=\"medium\" />\n        <AppStatus label=\"Blue\" color=\"blue\" size=\"medium\" />\n        <AppStatus\n          label=\"With Tooltip size medium\"\n          color=\"neutral\"\n          size=\"medium\"\n          tooltip=\"Tooltip sample\"\n        />\n      </Stack>\n    </Stack>\n  ),\n};\n"],"names":["AppStatus","jsxs","Stack","jsx","Divider"],"mappings":";;;;;AAUA,MAAM,OAAO;AAAA,EACX,OAAO;AAAA,EACP,WAAWA,UAAAA;AAAAA,EACX,YAAY;AAAA,IACV,QAAQ;AAAA,EAAA;AAAA,EAEV,MAAM,CAAC,UAAU;AAAA,EACjB,UAAU;AAAA,IACR,OAAO;AAAA,MACL,SAAS;AAAA,IAAA;AAAA,EACX;AAEJ;AAOO,MAAM,aAAoB;AAAA,EAC/B,MAAM;AAAA,IACJ,OAAO;AAAA,IACP,OAAO;AAAA,IACP,MAAM;AAAA,IACN,SAAS;AAAA,IACT,cAAc;AAAA,MACZ,WAAW;AAAA,IAAA;AAAA,EACb;AAEJ;AAEO,MAAM,WAAkB;AAAA,EAC7B,QAAQ,MACNC,2BAAAA,KAACC,kBAAM,SAAS,GAAG,KAAK,GACtB,UAAA;AAAA,IAAAD,2BAAAA,KAACC,SAAAA,OAAA,EAAM,WAAU,OAAM,SAAS,GAAG,KAAK,GAAG,UAAS,QAAO,gBAAe,UACxE,UAAA;AAAA,MAAAC,2BAAAA,IAACH,UAAAA,WAAA,EAAU,OAAM,WAAU,OAAM,WAAU;AAAA,MAC3CG,2BAAAA,IAACH,UAAAA,WAAA,EAAU,OAAM,WAAU,OAAM,WAAU;AAAA,MAC3CG,2BAAAA,IAACH,UAAAA,WAAA,EAAU,OAAM,SAAQ,OAAM,SAAQ;AAAA,MACvCG,2BAAAA,IAACH,UAAAA,WAAA,EAAU,OAAM,WAAU,OAAM,WAAU;AAAA,MAC3CG,2BAAAA,IAACH,UAAAA,WAAA,EAAU,OAAM,YAAW,OAAM,YAAW;AAAA,MAC7CG,2BAAAA,IAACH,UAAAA,WAAA,EAAU,OAAM,QAAO,OAAM,QAAO;AAAA,MACrCG,2BAAAA,IAACH,UAAAA,WAAA,EAAU,OAAM,UAAS,OAAM,UAAS;AAAA,MACzCG,2BAAAA,IAACH,UAAAA,WAAA,EAAU,OAAM,QAAO,OAAM,QAAO;AAAA,qCACpCA,UAAAA,WAAA,EAAU,OAAM,gBAAe,OAAM,WAAU,SAAQ,iBAAA,CAAiB;AAAA,IAAA,GAC3E;AAAA,mCAECI,SAAAA,SAAA,EAAQ;AAAA,IAETH,2BAAAA,KAACC,SAAAA,OAAA,EAAM,WAAU,OAAM,SAAS,GAAG,KAAK,GAAG,UAAS,QAAO,gBAAe,UACxE,UAAA;AAAA,MAAAC,+BAACH,UAAAA,aAAU,OAAM,WAAU,OAAM,WAAU,MAAK,UAAS;AAAA,qCACxDA,UAAAA,WAAA,EAAU,OAAM,WAAU,OAAM,WAAU,MAAK,UAAS;AAAA,qCACxDA,UAAAA,WAAA,EAAU,OAAM,SAAQ,OAAM,SAAQ,MAAK,UAAS;AAAA,qCACpDA,UAAAA,WAAA,EAAU,OAAM,WAAU,OAAM,WAAU,MAAK,UAAS;AAAA,qCACxDA,UAAAA,WAAA,EAAU,OAAM,YAAW,OAAM,YAAW,MAAK,UAAS;AAAA,qCAC1DA,UAAAA,WAAA,EAAU,OAAM,QAAO,OAAM,QAAO,MAAK,UAAS;AAAA,qCAClDA,UAAAA,WAAA,EAAU,OAAM,UAAS,OAAM,UAAS,MAAK,UAAS;AAAA,qCACtDA,UAAAA,WAAA,EAAU,OAAM,QAAO,OAAM,QAAO,MAAK,UAAS;AAAA,MACnDG,2BAAAA;AAAAA,QAACH,UAAAA;AAAAA,QAAA;AAAA,UACC,OAAM;AAAA,UACN,OAAM;AAAA,UACN,MAAK;AAAA,UACL,SAAQ;AAAA,QAAA;AAAA,MAAA;AAAA,IACV,EAAA,CACF;AAAA,EAAA,EAAA,CACF;AAEJ;;;;"}

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

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

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

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