@zidsa/zidmui 2.1.8 → 2.3.0-beta.0

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

@@ -1,71 +0,0 @@
-import { jsxs, jsx } from "react/jsx-runtime";
-import { useState } from "react";
-import { AppPagination } from "../../components/app-pagination.js";
-import { AppTypography } from "../../components/app-typography.js";
-import { StackColumn } from "../../components/stack-column.js";
-const meta = {
-  title: "React/App Pagination",
-  component: AppPagination,
-  parameters: {
-    layout: "centered"
-  },
-  tags: ["autodocs"],
-  argTypes: {
-    count: {
-      control: "number"
-    },
-    page: {
-      control: "number"
-    },
-    size: {
-      control: "select",
-      options: ["medium", "large"]
-    },
-    disabled: {
-      control: "boolean"
-    }
-  },
-  args: {
-    count: 10,
-    page: 1,
-    size: "medium"
-  }
-};
-const Default = {
-  args: {
-    count: 10
-  }
-};
-const SizeMedium = {
-  render: () => /* @__PURE__ */ jsxs(StackColumn, { gap: 2, children: [
-    /* @__PURE__ */ jsx(AppTypography, { variant: "h6", children: "Size Medium" }),
-    /* @__PURE__ */ jsx(AppPagination, {}),
-    /* @__PURE__ */ jsx(AppPagination, { count: 4 }),
-    /* @__PURE__ */ jsx(AppPagination, { count: 10 }),
-    /* @__PURE__ */ jsx(AppPagination, { count: 100 })
-  ] })
-};
-const SizeLarge = {
-  render: () => /* @__PURE__ */ jsxs(StackColumn, { gap: 2, children: [
-    /* @__PURE__ */ jsx(AppTypography, { variant: "h6", children: "Size Large" }),
-    /* @__PURE__ */ jsx(AppPagination, { size: "large" }),
-    /* @__PURE__ */ jsx(AppPagination, { count: 4, size: "large" }),
-    /* @__PURE__ */ jsx(AppPagination, { count: 10, size: "large" }),
-    /* @__PURE__ */ jsx(AppPagination, { count: 100, size: "large" })
-  ] })
-};
-const InteractiveComponent = () => {
-  const [page, setPage] = useState(1);
-  return /* @__PURE__ */ jsx(AppPagination, { count: 10, page, onChange: (_, newPage) => setPage(newPage) });
-};
-const Interactive = {
-  render: () => /* @__PURE__ */ jsx(InteractiveComponent, {})
-};
-export {
-  Default,
-  Interactive,
-  SizeLarge,
-  SizeMedium,
-  meta as default
-};
-//# sourceMappingURL=AppPagination.stories.js.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"AppPagination.stories.js","sources":["../../../../../src/stories/react/AppPagination.stories.tsx"],"sourcesContent":["import { useState } from 'react';\n\nimport type { Meta, StoryObj } from '@storybook/react-vite';\n\nimport { AppPagination } from '~/components/app-pagination';\nimport { AppTypography } from '~/components/app-typography';\nimport { StackColumn } from '~/components/stack-column';\n\n//\n//\n\n// Meta\nconst meta = {\n  title: 'React/App Pagination',\n  component: AppPagination,\n  parameters: {\n    layout: 'centered',\n  },\n  tags: ['autodocs'],\n  argTypes: {\n    count: {\n      control: 'number',\n    },\n    page: {\n      control: 'number',\n    },\n    size: {\n      control: 'select',\n      options: ['medium', 'large'],\n    },\n    disabled: {\n      control: 'boolean',\n    },\n  },\n  args: {\n    count: 10,\n    page: 1,\n    size: 'medium',\n  },\n} satisfies Meta<typeof AppPagination>;\n\nexport default meta;\ntype Story = StoryObj<typeof meta>;\n\n//\n\nexport const Default: Story = {\n  args: {\n    count: 10,\n  },\n};\n\n//\n\nexport const SizeMedium: Story = {\n  render: () => (\n    <StackColumn gap={2}>\n      <AppTypography variant=\"h6\">Size Medium</AppTypography>\n      <AppPagination />\n      <AppPagination count={4} />\n      <AppPagination count={10} />\n      <AppPagination count={100} />\n    </StackColumn>\n  ),\n};\n\n//\n\nexport const SizeLarge: Story = {\n  render: () => (\n    <StackColumn gap={2}>\n      <AppTypography variant=\"h6\">Size Large</AppTypography>\n      <AppPagination size=\"large\" />\n      <AppPagination count={4} size=\"large\" />\n      <AppPagination count={10} size=\"large\" />\n      <AppPagination count={100} size=\"large\" />\n    </StackColumn>\n  ),\n};\n\n//\n\nconst InteractiveComponent = () => {\n  const [page, setPage] = useState(1);\n\n  return <AppPagination count={10} page={page} onChange={(_, newPage) => setPage(newPage)} />;\n};\n\nexport const Interactive: Story = {\n  render: () => <InteractiveComponent />,\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,OAAO;AAAA,MACL,SAAS;AAAA,IAAA;AAAA,IAEX,MAAM;AAAA,MACJ,SAAS;AAAA,IAAA;AAAA,IAEX,MAAM;AAAA,MACJ,SAAS;AAAA,MACT,SAAS,CAAC,UAAU,OAAO;AAAA,IAAA;AAAA,IAE7B,UAAU;AAAA,MACR,SAAS;AAAA,IAAA;AAAA,EACX;AAAA,EAEF,MAAM;AAAA,IACJ,OAAO;AAAA,IACP,MAAM;AAAA,IACN,MAAM;AAAA,EAAA;AAEV;AAOO,MAAM,UAAiB;AAAA,EAC5B,MAAM;AAAA,IACJ,OAAO;AAAA,EAAA;AAEX;AAIO,MAAM,aAAoB;AAAA,EAC/B,QAAQ,MACN,qBAAC,aAAA,EAAY,KAAK,GAChB,UAAA;AAAA,IAAA,oBAAC,eAAA,EAAc,SAAQ,MAAK,UAAA,eAAW;AAAA,wBACtC,eAAA,EAAc;AAAA,IACf,oBAAC,eAAA,EAAc,OAAO,EAAA,CAAG;AAAA,IACzB,oBAAC,eAAA,EAAc,OAAO,GAAA,CAAI;AAAA,IAC1B,oBAAC,eAAA,EAAc,OAAO,IAAA,CAAK;AAAA,EAAA,EAAA,CAC7B;AAEJ;AAIO,MAAM,YAAmB;AAAA,EAC9B,QAAQ,MACN,qBAAC,aAAA,EAAY,KAAK,GAChB,UAAA;AAAA,IAAA,oBAAC,eAAA,EAAc,SAAQ,MAAK,UAAA,cAAU;AAAA,IACtC,oBAAC,eAAA,EAAc,MAAK,QAAA,CAAQ;AAAA,IAC5B,oBAAC,eAAA,EAAc,OAAO,GAAG,MAAK,SAAQ;AAAA,IACtC,oBAAC,eAAA,EAAc,OAAO,IAAI,MAAK,SAAQ;AAAA,IACvC,oBAAC,eAAA,EAAc,OAAO,KAAK,MAAK,QAAA,CAAQ;AAAA,EAAA,EAAA,CAC1C;AAEJ;AAIA,MAAM,uBAAuB,MAAM;AACjC,QAAM,CAAC,MAAM,OAAO,IAAI,SAAS,CAAC;AAElC,SAAO,oBAAC,eAAA,EAAc,OAAO,IAAI,MAAY,UAAU,CAAC,GAAG,YAAY,QAAQ,OAAO,EAAA,CAAG;AAC3F;AAEO,MAAM,cAAqB;AAAA,EAChC,QAAQ,MAAM,oBAAC,sBAAA,CAAA,CAAqB;AACtC;"}

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

@@ -1,145 +0,0 @@
-import { jsxs, jsx } from "react/jsx-runtime";
-import { useState } from "react";
-import { AppRadioGroup } from "../../components/app-radio-group.js";
-import { StackColumn } from "../../components/stack-column.js";
-const meta = {
-  title: "React/App Radio Group",
-  component: AppRadioGroup,
-  parameters: {
-    layout: "centered"
-  },
-  tags: ["autodocs"],
-  argTypes: {
-    label: {
-      control: "text"
-    },
-    radioSize: {
-      control: "select",
-      options: ["small", "medium", "large"]
-    },
-    row: {
-      control: "boolean"
-    },
-    disabled: {
-      control: "boolean"
-    }
-  },
-  args: {
-    name: "radioGroup",
-    label: "Radio Group",
-    radioSize: "medium",
-    row: true,
-    disabled: false,
-    options: [
-      { value: "opt1", label: "Option 1" },
-      { value: "opt2", label: "Option 2" },
-      { value: "opt3", label: "Option 3" }
-    ]
-  }
-};
-const Default = {
-  args: {
-    name: "defaultRadioGroup",
-    label: "Select an option"
-  }
-};
-const Row = {
-  args: {
-    name: "rowRadioGroup",
-    label: "Row Layout",
-    row: true
-  }
-};
-const Column = {
-  args: {
-    name: "columnRadioGroup",
-    label: "Column Layout",
-    row: false
-  }
-};
-const Sizes = {
-  render: () => /* @__PURE__ */ jsxs(StackColumn, { gap: 4, children: [
-    /* @__PURE__ */ jsx(
-      AppRadioGroup,
-      {
-        name: "smallRadio",
-        label: "Small",
-        radioSize: "small",
-        options: [
-          { value: "opt1", label: "Option 1" },
-          { value: "opt2", label: "Option 2" },
-          { value: "opt3", label: "Option 3" }
-        ]
-      }
-    ),
-    /* @__PURE__ */ jsx(
-      AppRadioGroup,
-      {
-        name: "mediumRadio",
-        label: "Medium",
-        radioSize: "medium",
-        options: [
-          { value: "opt1", label: "Option 1" },
-          { value: "opt2", label: "Option 2" },
-          { value: "opt3", label: "Option 3" }
-        ]
-      }
-    ),
-    /* @__PURE__ */ jsx(
-      AppRadioGroup,
-      {
-        name: "largeRadio",
-        label: "Large",
-        radioSize: "large",
-        options: [
-          { value: "opt1", label: "Option 1" },
-          { value: "opt2", label: "Option 2" },
-          { value: "opt3", label: "Option 3" }
-        ]
-      }
-    )
-  ] })
-};
-const Disabled = {
-  args: {
-    name: "disabledRadioGroup",
-    label: "Disabled Radio Group",
-    disabled: true
-  }
-};
-const NoLabel = {
-  args: {
-    name: "noLabelRadioGroup"
-  }
-};
-const InteractiveComponent = () => {
-  const [value, setValue] = useState("opt1");
-  return /* @__PURE__ */ jsx(
-    AppRadioGroup,
-    {
-      name: "interactiveRadioGroup",
-      label: `Selected: ${value}`,
-      value,
-      onChange: (e) => setValue(e.target.value),
-      options: [
-        { value: "opt1", label: "Option 1" },
-        { value: "opt2", label: "Option 2" },
-        { value: "opt3", label: "Option 3" }
-      ]
-    }
-  );
-};
-const Interactive = {
-  render: () => /* @__PURE__ */ jsx(InteractiveComponent, {})
-};
-export {
-  Column,
-  Default,
-  Disabled,
-  Interactive,
-  NoLabel,
-  Row,
-  Sizes,
-  meta as default
-};
-//# sourceMappingURL=AppRadioGroup.stories.js.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"AppRadioGroup.stories.js","sources":["../../../../../src/stories/react/AppRadioGroup.stories.tsx"],"sourcesContent":["import { useState } from 'react';\n\nimport type { Meta, StoryObj } from '@storybook/react-vite';\n\nimport { AppRadioGroup } from '~/components/app-radio-group';\nimport { StackColumn } from '~/components/stack-column';\n\n//\n//\n\n// Meta\nconst meta = {\n  title: 'React/App Radio Group',\n  component: AppRadioGroup,\n  parameters: {\n    layout: 'centered',\n  },\n  tags: ['autodocs'],\n  argTypes: {\n    label: {\n      control: 'text',\n    },\n    radioSize: {\n      control: 'select',\n      options: ['small', 'medium', 'large'],\n    },\n    row: {\n      control: 'boolean',\n    },\n    disabled: {\n      control: 'boolean',\n    },\n  },\n  args: {\n    name: 'radioGroup',\n    label: 'Radio Group',\n    radioSize: 'medium',\n    row: true,\n    disabled: false,\n    options: [\n      { value: 'opt1', label: 'Option 1' },\n      { value: 'opt2', label: 'Option 2' },\n      { value: 'opt3', label: 'Option 3' },\n    ],\n  },\n} satisfies Meta<typeof AppRadioGroup>;\n\nexport default meta;\ntype Story = StoryObj<typeof meta>;\n\n//\n\nexport const Default: Story = {\n  args: {\n    name: 'defaultRadioGroup',\n    label: 'Select an option',\n  },\n};\n\n//\n\nexport const Row: Story = {\n  args: {\n    name: 'rowRadioGroup',\n    label: 'Row Layout',\n    row: true,\n  },\n};\n\n//\n\nexport const Column: Story = {\n  args: {\n    name: 'columnRadioGroup',\n    label: 'Column Layout',\n    row: false,\n  },\n};\n\n//\n\nexport const Sizes: Story = {\n  render: () => (\n    <StackColumn gap={4}>\n      <AppRadioGroup\n        name=\"smallRadio\"\n        label=\"Small\"\n        radioSize=\"small\"\n        options={[\n          { value: 'opt1', label: 'Option 1' },\n          { value: 'opt2', label: 'Option 2' },\n          { value: 'opt3', label: 'Option 3' },\n        ]}\n      />\n      <AppRadioGroup\n        name=\"mediumRadio\"\n        label=\"Medium\"\n        radioSize=\"medium\"\n        options={[\n          { value: 'opt1', label: 'Option 1' },\n          { value: 'opt2', label: 'Option 2' },\n          { value: 'opt3', label: 'Option 3' },\n        ]}\n      />\n      <AppRadioGroup\n        name=\"largeRadio\"\n        label=\"Large\"\n        radioSize=\"large\"\n        options={[\n          { value: 'opt1', label: 'Option 1' },\n          { value: 'opt2', label: 'Option 2' },\n          { value: 'opt3', label: 'Option 3' },\n        ]}\n      />\n    </StackColumn>\n  ),\n};\n\n//\n\nexport const Disabled: Story = {\n  args: {\n    name: 'disabledRadioGroup',\n    label: 'Disabled Radio Group',\n    disabled: true,\n  },\n};\n\n//\n\nexport const NoLabel: Story = {\n  args: {\n    name: 'noLabelRadioGroup',\n  },\n};\n\n//\n\nconst InteractiveComponent = () => {\n  const [value, setValue] = useState('opt1');\n\n  return (\n    <AppRadioGroup\n      name=\"interactiveRadioGroup\"\n      label={`Selected: ${value}`}\n      value={value}\n      onChange={e => setValue(e.target.value)}\n      options={[\n        { value: 'opt1', label: 'Option 1' },\n        { value: 'opt2', label: 'Option 2' },\n        { value: 'opt3', label: 'Option 3' },\n      ]}\n    />\n  );\n};\n\nexport const Interactive: Story = {\n  render: () => <InteractiveComponent />,\n};\n"],"names":[],"mappings":"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"}

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

@@ -1,68 +0,0 @@
-import { jsxs, jsx } from "react/jsx-runtime";
-import { Stack, Divider } from "@mui/material";
-import { AppStatus } from "../../components/app-status.js";
-const meta = {
-  title: "React/App Status",
-  component: 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__ */ jsxs(Stack, { spacing: 0, gap: 4, children: [
-    /* @__PURE__ */ jsxs(Stack, { direction: "row", spacing: 0, gap: 2, flexWrap: "wrap", justifyContent: "center", children: [
-      /* @__PURE__ */ jsx(AppStatus, { label: "Success", color: "success" }),
-      /* @__PURE__ */ jsx(AppStatus, { label: "Warning", color: "warning" }),
-      /* @__PURE__ */ jsx(AppStatus, { label: "Error", color: "error" }),
-      /* @__PURE__ */ jsx(AppStatus, { label: "Neutral", color: "neutral" }),
-      /* @__PURE__ */ jsx(AppStatus, { label: "Disabled", color: "disabled" }),
-      /* @__PURE__ */ jsx(AppStatus, { label: "Info", color: "info" }),
-      /* @__PURE__ */ jsx(AppStatus, { label: "Orange", color: "orange" }),
-      /* @__PURE__ */ jsx(AppStatus, { label: "Blue", color: "blue" }),
-      /* @__PURE__ */ jsx(AppStatus, { label: "With Tooltip", color: "neutral", tooltip: "Tooltip sample" })
-    ] }),
-    /* @__PURE__ */ jsx(Divider, {}),
-    /* @__PURE__ */ jsxs(Stack, { direction: "row", spacing: 0, gap: 2, flexWrap: "wrap", justifyContent: "center", children: [
-      /* @__PURE__ */ jsx(AppStatus, { label: "Success", color: "success", size: "medium" }),
-      /* @__PURE__ */ jsx(AppStatus, { label: "Warning", color: "warning", size: "medium" }),
-      /* @__PURE__ */ jsx(AppStatus, { label: "Error", color: "error", size: "medium" }),
-      /* @__PURE__ */ jsx(AppStatus, { label: "Neutral", color: "neutral", size: "medium" }),
-      /* @__PURE__ */ jsx(AppStatus, { label: "Disabled", color: "disabled", size: "medium" }),
-      /* @__PURE__ */ jsx(AppStatus, { label: "Info", color: "info", size: "medium" }),
-      /* @__PURE__ */ jsx(AppStatus, { label: "Orange", color: "orange", size: "medium" }),
-      /* @__PURE__ */ jsx(AppStatus, { label: "Blue", color: "blue", size: "medium" }),
-      /* @__PURE__ */ jsx(
-        AppStatus,
-        {
-          label: "With Tooltip size medium",
-          color: "neutral",
-          size: "medium",
-          tooltip: "Tooltip sample"
-        }
-      )
-    ] })
-  ] })
-};
-export {
-  Playground,
-  Variants,
-  meta as default
-};
-//# sourceMappingURL=AppStatus.stories.js.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"AppStatus.stories.js","sources":["../../../../../src/stories/react/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: 'React/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":[],"mappings":";;;AAUA,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,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,MACN,qBAAC,SAAM,SAAS,GAAG,KAAK,GACtB,UAAA;AAAA,IAAA,qBAAC,OAAA,EAAM,WAAU,OAAM,SAAS,GAAG,KAAK,GAAG,UAAS,QAAO,gBAAe,UACxE,UAAA;AAAA,MAAA,oBAAC,WAAA,EAAU,OAAM,WAAU,OAAM,WAAU;AAAA,MAC3C,oBAAC,WAAA,EAAU,OAAM,WAAU,OAAM,WAAU;AAAA,MAC3C,oBAAC,WAAA,EAAU,OAAM,SAAQ,OAAM,SAAQ;AAAA,MACvC,oBAAC,WAAA,EAAU,OAAM,WAAU,OAAM,WAAU;AAAA,MAC3C,oBAAC,WAAA,EAAU,OAAM,YAAW,OAAM,YAAW;AAAA,MAC7C,oBAAC,WAAA,EAAU,OAAM,QAAO,OAAM,QAAO;AAAA,MACrC,oBAAC,WAAA,EAAU,OAAM,UAAS,OAAM,UAAS;AAAA,MACzC,oBAAC,WAAA,EAAU,OAAM,QAAO,OAAM,QAAO;AAAA,0BACpC,WAAA,EAAU,OAAM,gBAAe,OAAM,WAAU,SAAQ,iBAAA,CAAiB;AAAA,IAAA,GAC3E;AAAA,wBAEC,SAAA,EAAQ;AAAA,IAET,qBAAC,OAAA,EAAM,WAAU,OAAM,SAAS,GAAG,KAAK,GAAG,UAAS,QAAO,gBAAe,UACxE,UAAA;AAAA,MAAA,oBAAC,aAAU,OAAM,WAAU,OAAM,WAAU,MAAK,UAAS;AAAA,0BACxD,WAAA,EAAU,OAAM,WAAU,OAAM,WAAU,MAAK,UAAS;AAAA,0BACxD,WAAA,EAAU,OAAM,SAAQ,OAAM,SAAQ,MAAK,UAAS;AAAA,0BACpD,WAAA,EAAU,OAAM,WAAU,OAAM,WAAU,MAAK,UAAS;AAAA,0BACxD,WAAA,EAAU,OAAM,YAAW,OAAM,YAAW,MAAK,UAAS;AAAA,0BAC1D,WAAA,EAAU,OAAM,QAAO,OAAM,QAAO,MAAK,UAAS;AAAA,0BAClD,WAAA,EAAU,OAAM,UAAS,OAAM,UAAS,MAAK,UAAS;AAAA,0BACtD,WAAA,EAAU,OAAM,QAAO,OAAM,QAAO,MAAK,UAAS;AAAA,MACnD;AAAA,QAAC;AAAA,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/react/es/stories/react/AppSwitch.stories.js

@@ -1,138 +0,0 @@
-import { jsxs, jsx } from "react/jsx-runtime";
-import { AppSwitch } from "../../components/app-switch.js";
-import { AppSwitchGroup } from "../../components/app-switch-group.js";
-import { StackColumn } from "../../components/stack-column.js";
-const meta = {
-  title: "React/App Switch",
-  component: AppSwitch,
-  parameters: {
-    layout: "centered"
-  },
-  tags: ["autodocs"],
-  argTypes: {
-    label: {
-      control: "text"
-    },
-    color: {
-      control: "select",
-      options: ["primary", "error"]
-    },
-    disabled: {
-      control: "boolean"
-    },
-    defaultChecked: {
-      control: "boolean"
-    }
-  },
-  args: {
-    name: "switch",
-    label: "Switch label",
-    color: "primary",
-    disabled: false
-  }
-};
-const Default = {
-  args: {
-    name: "defaultSwitch",
-    label: "Primary Switch"
-  }
-};
-const ErrorColor = {
-  args: {
-    name: "errorSwitch",
-    label: "Error Switch",
-    color: "error"
-  }
-};
-const NoLabel = {
-  render: () => /* @__PURE__ */ jsxs(StackColumn, { direction: "row", gap: 2, children: [
-    /* @__PURE__ */ jsx(AppSwitch, { name: "noLabel1" }),
-    /* @__PURE__ */ jsx(AppSwitch, { name: "noLabel2", color: "error" })
-  ] })
-};
-const Disabled = {
-  render: () => /* @__PURE__ */ jsxs(StackColumn, { gap: 2, children: [
-    /* @__PURE__ */ jsx(AppSwitch, { name: "disabled1", label: "Disabled - Error - Unchecked", color: "error", disabled: true }),
-    /* @__PURE__ */ jsx(
-      AppSwitch,
-      {
-        name: "disabled2",
-        label: "Disabled - Error - Checked",
-        color: "error",
-        defaultChecked: true,
-        disabled: true
-      }
-    ),
-    /* @__PURE__ */ jsx(AppSwitch, { name: "disabled3", label: "Disabled - Primary - Unchecked", disabled: true }),
-    /* @__PURE__ */ jsx(AppSwitch, { name: "disabled4", label: "Disabled - Primary - Checked", defaultChecked: true, disabled: true })
-  ] })
-};
-const SwitchGroup = {
-  render: () => /* @__PURE__ */ jsxs(StackColumn, { gap: 4, children: [
-    /* @__PURE__ */ jsx(
-      AppSwitchGroup,
-      {
-        label: "Assign responsibility",
-        helperText: "Be careful",
-        options: [
-          { name: "group1", label: "Gilad Gray" },
-          { name: "group2", label: "Jason Killian" },
-          { name: "group3", label: "Antoine Llorca" }
-        ]
-      }
-    ),
-    /* @__PURE__ */ jsx(
-      AppSwitchGroup,
-      {
-        label: "Error Assign responsibility",
-        helperText: "Be careful",
-        error: true,
-        formControlProps: { required: true },
-        options: [
-          { name: "errorGroup1", label: "Gilad Gray" },
-          { name: "errorGroup2", label: "Jason Killian" },
-          { name: "errorGroup3", label: "Antoine Llorca" }
-        ]
-      }
-    )
-  ] })
-};
-const DisabledSwitchGroup = {
-  render: () => /* @__PURE__ */ jsxs(StackColumn, { gap: 4, children: [
-    /* @__PURE__ */ jsx(
-      AppSwitchGroup,
-      {
-        label: "Disabled Assign responsibility",
-        helperText: "Be careful",
-        disabled: true,
-        options: [
-          { name: "disabledGroup1", label: "Gilad Gray" },
-          { name: "disabledGroup2", label: "Jason Killian" },
-          { name: "disabledGroup3", label: "Antoine Llorca" }
-        ]
-      }
-    ),
-    /* @__PURE__ */ jsx(
-      AppSwitchGroup,
-      {
-        label: "Some Disabled Assign responsibility",
-        helperText: "Be careful",
-        options: [
-          { name: "someDisabled1", label: "Gilad Gray", disabled: true },
-          { name: "someDisabled2", label: "Jason Killian" },
-          { name: "someDisabled3", label: "Antoine Llorca", disabled: true }
-        ]
-      }
-    )
-  ] })
-};
-export {
-  Default,
-  Disabled,
-  DisabledSwitchGroup,
-  ErrorColor,
-  NoLabel,
-  SwitchGroup,
-  meta as default
-};
-//# sourceMappingURL=AppSwitch.stories.js.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"AppSwitch.stories.js","sources":["../../../../../src/stories/react/AppSwitch.stories.tsx"],"sourcesContent":["import type { Meta, StoryObj } from '@storybook/react-vite';\n\nimport { AppSwitch } from '~/components/app-switch';\nimport { AppSwitchGroup } from '~/components/app-switch-group';\nimport { StackColumn } from '~/components/stack-column';\n\n//\n//\n\n// Meta\nconst meta = {\n  title: 'React/App Switch',\n  component: AppSwitch,\n  parameters: {\n    layout: 'centered',\n  },\n  tags: ['autodocs'],\n  argTypes: {\n    label: {\n      control: 'text',\n    },\n    color: {\n      control: 'select',\n      options: ['primary', 'error'],\n    },\n    disabled: {\n      control: 'boolean',\n    },\n    defaultChecked: {\n      control: 'boolean',\n    },\n  },\n  args: {\n    name: 'switch',\n    label: 'Switch label',\n    color: 'primary',\n    disabled: false,\n  },\n} satisfies Meta<typeof AppSwitch>;\n\nexport default meta;\ntype Story = StoryObj<typeof meta>;\n\n//\n\nexport const Default: Story = {\n  args: {\n    name: 'defaultSwitch',\n    label: 'Primary Switch',\n  },\n};\n\n//\n\nexport const ErrorColor: Story = {\n  args: {\n    name: 'errorSwitch',\n    label: 'Error Switch',\n    color: 'error',\n  },\n};\n\n//\n\nexport const NoLabel: Story = {\n  render: () => (\n    <StackColumn direction=\"row\" gap={2}>\n      <AppSwitch name=\"noLabel1\" />\n      <AppSwitch name=\"noLabel2\" color=\"error\" />\n    </StackColumn>\n  ),\n};\n\n//\n\nexport const Disabled: Story = {\n  render: () => (\n    <StackColumn gap={2}>\n      <AppSwitch name=\"disabled1\" label=\"Disabled - Error - Unchecked\" color=\"error\" disabled />\n      <AppSwitch\n        name=\"disabled2\"\n        label=\"Disabled - Error - Checked\"\n        color=\"error\"\n        defaultChecked\n        disabled\n      />\n      <AppSwitch name=\"disabled3\" label=\"Disabled - Primary - Unchecked\" disabled />\n      <AppSwitch name=\"disabled4\" label=\"Disabled - Primary - Checked\" defaultChecked disabled />\n    </StackColumn>\n  ),\n};\n\n//\n\nexport const SwitchGroup: Story = {\n  render: () => (\n    <StackColumn gap={4}>\n      <AppSwitchGroup\n        label=\"Assign responsibility\"\n        helperText=\"Be careful\"\n        options={[\n          { name: 'group1', label: 'Gilad Gray' },\n          { name: 'group2', label: 'Jason Killian' },\n          { name: 'group3', label: 'Antoine Llorca' },\n        ]}\n      />\n      <AppSwitchGroup\n        label=\"Error Assign responsibility\"\n        helperText=\"Be careful\"\n        error\n        formControlProps={{ required: true }}\n        options={[\n          { name: 'errorGroup1', label: 'Gilad Gray' },\n          { name: 'errorGroup2', label: 'Jason Killian' },\n          { name: 'errorGroup3', label: 'Antoine Llorca' },\n        ]}\n      />\n    </StackColumn>\n  ),\n};\n\n//\n\nexport const DisabledSwitchGroup: Story = {\n  render: () => (\n    <StackColumn gap={4}>\n      <AppSwitchGroup\n        label=\"Disabled Assign responsibility\"\n        helperText=\"Be careful\"\n        disabled\n        options={[\n          { name: 'disabledGroup1', label: 'Gilad Gray' },\n          { name: 'disabledGroup2', label: 'Jason Killian' },\n          { name: 'disabledGroup3', label: 'Antoine Llorca' },\n        ]}\n      />\n      <AppSwitchGroup\n        label=\"Some Disabled Assign responsibility\"\n        helperText=\"Be careful\"\n        options={[\n          { name: 'someDisabled1', label: 'Gilad Gray', disabled: true },\n          { name: 'someDisabled2', label: 'Jason Killian' },\n          { name: 'someDisabled3', label: 'Antoine Llorca', disabled: true },\n        ]}\n      />\n    </StackColumn>\n  ),\n};\n"],"names":[],"mappings":"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"}

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

@@ -1,100 +0,0 @@
-import { jsx, jsxs } from "react/jsx-runtime";
-import { useState } from "react";
-import { AppTabs, AppTab } from "../../components/app-tabs.js";
-import { IconSettingsLine } from "../../icons/system/settings-line.js";
-const meta = {
-  title: "React/App Tabs",
-  component: AppTabs,
-  parameters: {
-    layout: "centered"
-  },
-  tags: ["autodocs"],
-  argTypes: {
-    value: {
-      control: "number"
-    }
-  }
-};
-const InteractiveComponent = () => {
-  const [value, setValue] = useState(0);
-  return /* @__PURE__ */ jsx(
-    AppTabs,
-    {
-      value,
-      onChange: (_, newValue) => setValue(newValue),
-      tabs: [
-        { key: "tab1", label: "All", chip: { label: "120" } },
-        { key: "tab2", label: "Active", chip: { label: "85", color: "success" } },
-        { key: "tab3", label: "Pending", chip: { label: "25", color: "warning" } }
-      ]
-    }
-  );
-};
-const Interactive = {
-  render: () => /* @__PURE__ */ jsx(InteractiveComponent, {})
-};
-const Default = {
-  args: {
-    value: 0,
-    tabs: [
-      { key: "tab1", label: "Tab One" },
-      { key: "tab2", label: "Tab Two" },
-      { key: "tab3", label: "Tab Three" }
-    ]
-  }
-};
-const WithChip = {
-  args: {
-    value: 0,
-    tabs: [
-      { key: "tab1", label: "All", chip: { label: "120", color: "neutral" } },
-      { key: "tab2", label: "Active", chip: { label: "85", color: "success" } },
-      { key: "tab3", label: "Pending", chip: { label: "25", color: "warning" } },
-      { key: "tab4", label: "Errors", chip: { label: "10", color: "error" } }
-    ]
-  }
-};
-const WithIcon = {
-  args: {
-    value: 0,
-    tabs: [
-      { key: "tab1", label: "Settings", icon: /* @__PURE__ */ jsx(IconSettingsLine, {}) },
-      { key: "tab2", label: "Tab Two" },
-      { key: "tab3", label: "Tab Three" }
-    ]
-  }
-};
-const WithIconAndChip = {
-  args: {
-    value: 0,
-    tabs: [
-      {
-        key: "tab1",
-        label: "Settings",
-        icon: /* @__PURE__ */ jsx(IconSettingsLine, {}),
-        chip: { label: "5", color: "info" }
-      },
-      { key: "tab2", label: "Tab Two", chip: { label: "12", color: "success" } }
-    ]
-  }
-};
-const UsingChildren = {
-  args: {
-    value: 0
-  },
-  render: (args) => /* @__PURE__ */ jsxs(AppTabs, { ...args, children: [
-    /* @__PURE__ */ jsx(AppTab, { label: "First" }),
-    /* @__PURE__ */ jsx(AppTab, { label: "Second", chip: { label: "5", color: "info" } }),
-    /* @__PURE__ */ jsx(AppTab, { label: "Third" })
-  ] })
-};
-export {
-  Default,
-  Interactive,
-  UsingChildren,
-  WithChip,
-  WithIcon,
-  WithIconAndChip,
-  meta as default
-};
-//# sourceMappingURL=AppTabs.stories.js.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"AppTabs.stories.js","sources":["../../../../../src/stories/react/AppTabs.stories.tsx"],"sourcesContent":["import { useState } from 'react';\n\nimport type { Meta, StoryObj } from '@storybook/react-vite';\n\nimport { AppTabs, AppTab } from '~/components/app-tabs';\nimport { IconSettingsLine } from '~/icons/system/settings-line';\n\n//\n//\n\n// Meta\nconst meta = {\n  title: 'React/App Tabs',\n  component: AppTabs,\n  parameters: {\n    layout: 'centered',\n  },\n  tags: ['autodocs'],\n  argTypes: {\n    value: {\n      control: 'number',\n    },\n  },\n} satisfies Meta<typeof AppTabs>;\n\nexport default meta;\ntype Story = StoryObj<typeof meta>;\n\n//\n\n//\n\nconst InteractiveComponent = () => {\n  const [value, setValue] = useState<number>(0);\n\n  return (\n    <AppTabs\n      value={value}\n      onChange={(_, newValue) => setValue(newValue)}\n      tabs={[\n        { key: 'tab1', label: 'All', chip: { label: '120' } },\n        { key: 'tab2', label: 'Active', chip: { label: '85', color: 'success' } },\n        { key: 'tab3', label: 'Pending', chip: { label: '25', color: 'warning' } },\n      ]}\n    />\n  );\n};\n\nexport const Interactive: Story = {\n  render: () => <InteractiveComponent />,\n};\n\n//\n\nexport const Default: Story = {\n  args: {\n    value: 0,\n    tabs: [\n      { key: 'tab1', label: 'Tab One' },\n      { key: 'tab2', label: 'Tab Two' },\n      { key: 'tab3', label: 'Tab Three' },\n    ],\n  },\n};\n\n//\n\nexport const WithChip: Story = {\n  args: {\n    value: 0,\n    tabs: [\n      { key: 'tab1', label: 'All', chip: { label: '120', color: 'neutral' } },\n      { key: 'tab2', label: 'Active', chip: { label: '85', color: 'success' } },\n      { key: 'tab3', label: 'Pending', chip: { label: '25', color: 'warning' } },\n      { key: 'tab4', label: 'Errors', chip: { label: '10', color: 'error' } },\n    ],\n  },\n};\n\n//\n\nexport const WithIcon: Story = {\n  args: {\n    value: 0,\n    tabs: [\n      { key: 'tab1', label: 'Settings', icon: <IconSettingsLine /> },\n      { key: 'tab2', label: 'Tab Two' },\n      { key: 'tab3', label: 'Tab Three' },\n    ],\n  },\n};\n\n//\n\nexport const WithIconAndChip: Story = {\n  args: {\n    value: 0,\n    tabs: [\n      {\n        key: 'tab1',\n        label: 'Settings',\n        icon: <IconSettingsLine />,\n        chip: { label: '5', color: 'info' },\n      },\n      { key: 'tab2', label: 'Tab Two', chip: { label: '12', color: 'success' } },\n    ],\n  },\n};\n\n//\n\nexport const UsingChildren: Story = {\n  args: {\n    value: 0,\n  },\n  render: args => (\n    <AppTabs {...args}>\n      <AppTab label=\"First\" />\n      <AppTab label=\"Second\" chip={{ label: '5', color: 'info' }} />\n      <AppTab label=\"Third\" />\n    </AppTabs>\n  ),\n};\n"],"names":[],"mappings":";;;;AAWA,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,OAAO;AAAA,MACL,SAAS;AAAA,IAAA;AAAA,EACX;AAEJ;AASA,MAAM,uBAAuB,MAAM;AACjC,QAAM,CAAC,OAAO,QAAQ,IAAI,SAAiB,CAAC;AAE5C,SACE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC;AAAA,MACA,UAAU,CAAC,GAAG,aAAa,SAAS,QAAQ;AAAA,MAC5C,MAAM;AAAA,QACJ,EAAE,KAAK,QAAQ,OAAO,OAAO,MAAM,EAAE,OAAO,QAAM;AAAA,QAClD,EAAE,KAAK,QAAQ,OAAO,UAAU,MAAM,EAAE,OAAO,MAAM,OAAO,YAAU;AAAA,QACtE,EAAE,KAAK,QAAQ,OAAO,WAAW,MAAM,EAAE,OAAO,MAAM,OAAO,UAAA,EAAU;AAAA,MAAE;AAAA,IAC3E;AAAA,EAAA;AAGN;AAEO,MAAM,cAAqB;AAAA,EAChC,QAAQ,MAAM,oBAAC,sBAAA,CAAA,CAAqB;AACtC;AAIO,MAAM,UAAiB;AAAA,EAC5B,MAAM;AAAA,IACJ,OAAO;AAAA,IACP,MAAM;AAAA,MACJ,EAAE,KAAK,QAAQ,OAAO,UAAA;AAAA,MACtB,EAAE,KAAK,QAAQ,OAAO,UAAA;AAAA,MACtB,EAAE,KAAK,QAAQ,OAAO,YAAA;AAAA,IAAY;AAAA,EACpC;AAEJ;AAIO,MAAM,WAAkB;AAAA,EAC7B,MAAM;AAAA,IACJ,OAAO;AAAA,IACP,MAAM;AAAA,MACJ,EAAE,KAAK,QAAQ,OAAO,OAAO,MAAM,EAAE,OAAO,OAAO,OAAO,YAAU;AAAA,MACpE,EAAE,KAAK,QAAQ,OAAO,UAAU,MAAM,EAAE,OAAO,MAAM,OAAO,YAAU;AAAA,MACtE,EAAE,KAAK,QAAQ,OAAO,WAAW,MAAM,EAAE,OAAO,MAAM,OAAO,YAAU;AAAA,MACvE,EAAE,KAAK,QAAQ,OAAO,UAAU,MAAM,EAAE,OAAO,MAAM,OAAO,QAAA,EAAQ;AAAA,IAAE;AAAA,EACxE;AAEJ;AAIO,MAAM,WAAkB;AAAA,EAC7B,MAAM;AAAA,IACJ,OAAO;AAAA,IACP,MAAM;AAAA,MACJ,EAAE,KAAK,QAAQ,OAAO,YAAY,MAAM,oBAAC,oBAAiB,EAAA;AAAA,MAC1D,EAAE,KAAK,QAAQ,OAAO,UAAA;AAAA,MACtB,EAAE,KAAK,QAAQ,OAAO,YAAA;AAAA,IAAY;AAAA,EACpC;AAEJ;AAIO,MAAM,kBAAyB;AAAA,EACpC,MAAM;AAAA,IACJ,OAAO;AAAA,IACP,MAAM;AAAA,MACJ;AAAA,QACE,KAAK;AAAA,QACL,OAAO;AAAA,QACP,0BAAO,kBAAA,EAAiB;AAAA,QACxB,MAAM,EAAE,OAAO,KAAK,OAAO,OAAA;AAAA,MAAO;AAAA,MAEpC,EAAE,KAAK,QAAQ,OAAO,WAAW,MAAM,EAAE,OAAO,MAAM,OAAO,UAAA,EAAU;AAAA,IAAE;AAAA,EAC3E;AAEJ;AAIO,MAAM,gBAAuB;AAAA,EAClC,MAAM;AAAA,IACJ,OAAO;AAAA,EAAA;AAAA,EAET,QAAQ,CAAA,SACN,qBAAC,SAAA,EAAS,GAAG,MACX,UAAA;AAAA,IAAA,oBAAC,QAAA,EAAO,OAAM,QAAA,CAAQ;AAAA,IACtB,oBAAC,QAAA,EAAO,OAAM,UAAS,MAAM,EAAE,OAAO,KAAK,OAAO,OAAA,EAAO,CAAG;AAAA,IAC5D,oBAAC,QAAA,EAAO,OAAM,QAAA,CAAQ;AAAA,EAAA,EAAA,CACxB;AAEJ;"}