@zidsa/zidmui 2.0.3 → 2.1.0

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

@@ -0,0 +1,262 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { useState } from "react";
+import { AppInputRadio } from "../../components/app-input-radio.js";
+import { StackColumn } from "../../components/stack-column.js";
+const meta = {
+  title: "React/App Input Radio",
+  component: AppInputRadio,
+  parameters: {
+    layout: "centered"
+  },
+  tags: ["autodocs"],
+  argTypes: {
+    label: {
+      control: "text"
+    },
+    helperText: {
+      control: "text"
+    },
+    size: {
+      control: "select",
+      options: ["small", "medium", "large"]
+    },
+    color: {
+      control: "select",
+      options: ["primary", "error"]
+    },
+    row: {
+      control: "boolean"
+    },
+    disabled: {
+      control: "boolean"
+    },
+    error: {
+      control: "boolean"
+    }
+  },
+  args: {
+    name: "radio",
+    label: "Radio label",
+    helperText: "Select one of the options",
+    size: "medium",
+    color: "primary",
+    row: true,
+    options: [
+      { value: "opt1", label: "Option 1" },
+      { value: "opt2", label: "Option 2" },
+      { value: "opt3", label: "Option 3" }
+    ]
+  }
+};
+const Default = {
+  args: {
+    name: "defaultRadio",
+    label: "Default Radio"
+  }
+};
+const SmallSize = {
+  render: () => /* @__PURE__ */ jsxs(StackColumn, { gap: 4, children: [
+    /* @__PURE__ */ jsx(
+      AppInputRadio,
+      {
+        name: "smallRow",
+        label: "Small Radio - Row",
+        helperText: "Select one of the options",
+        size: "small",
+        row: true,
+        options: [
+          { value: "opt1", label: "Option 1" },
+          { value: "opt2", label: "Option 2" },
+          { value: "opt3", label: "Option 3" }
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      AppInputRadio,
+      {
+        name: "smallColumn",
+        label: "Small Radio - Column",
+        helperText: "Select one of the options",
+        size: "small",
+        row: false,
+        options: [
+          { value: "opt1", label: "Option 1" },
+          { value: "opt2", label: "Option 2" },
+          { value: "opt3", label: "Option 3" }
+        ]
+      }
+    )
+  ] })
+};
+const MediumSize = {
+  render: () => /* @__PURE__ */ jsxs(StackColumn, { gap: 4, children: [
+    /* @__PURE__ */ jsx(
+      AppInputRadio,
+      {
+        name: "mediumRow",
+        label: "Medium Radio - Row",
+        helperText: "Select one of the options",
+        size: "medium",
+        row: true,
+        options: [
+          { value: "opt1", label: "Option 1" },
+          { value: "opt2", label: "Option 2" },
+          { value: "opt3", label: "Option 3" }
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      AppInputRadio,
+      {
+        name: "mediumColumn",
+        label: "Medium Radio - Column",
+        helperText: "Select one of the options",
+        size: "medium",
+        row: false,
+        options: [
+          { value: "opt1", label: "Option 1" },
+          { value: "opt2", label: "Option 2" },
+          { value: "opt3", label: "Option 3" }
+        ]
+      }
+    )
+  ] })
+};
+const LargeSize = {
+  render: () => /* @__PURE__ */ jsxs(StackColumn, { gap: 4, children: [
+    /* @__PURE__ */ jsx(
+      AppInputRadio,
+      {
+        name: "largeRow",
+        label: "Large Radio - Row",
+        helperText: "Select one of the options",
+        size: "large",
+        row: true,
+        options: [
+          { value: "opt1", label: "Option 1" },
+          { value: "opt2", label: "Option 2" },
+          { value: "opt3", label: "Option 3" }
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      AppInputRadio,
+      {
+        name: "largeColumn",
+        label: "Large Radio - Column",
+        helperText: "Select one of the options",
+        size: "large",
+        row: false,
+        options: [
+          { value: "opt1", label: "Option 1" },
+          { value: "opt2", label: "Option 2" },
+          { value: "opt3", label: "Option 3" }
+        ]
+      }
+    )
+  ] })
+};
+const ErrorStates = {
+  render: () => /* @__PURE__ */ jsxs(StackColumn, { gap: 4, children: [
+    /* @__PURE__ */ jsx(
+      AppInputRadio,
+      {
+        name: "errorPrimary",
+        label: "Error Radio - Primary Color",
+        helperText: "Something went wrong!",
+        size: "medium",
+        error: true,
+        row: true,
+        options: [
+          { value: "opt1", label: "Option 1" },
+          { value: "opt2", label: "Option 2" },
+          { value: "opt3", label: "Option 3" }
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      AppInputRadio,
+      {
+        name: "errorColor",
+        label: "Error Radio - Error Color",
+        helperText: "Something went wrong!",
+        size: "medium",
+        color: "error",
+        error: true,
+        row: true,
+        options: [
+          { value: "opt1", label: "Option 1" },
+          { value: "opt2", label: "Option 2" },
+          { value: "opt3", label: "Option 3" }
+        ]
+      }
+    )
+  ] })
+};
+const DisabledStates = {
+  render: () => /* @__PURE__ */ jsxs(StackColumn, { gap: 4, children: [
+    /* @__PURE__ */ jsx(
+      AppInputRadio,
+      {
+        name: "disabledRow",
+        label: "Disabled Radio - Row",
+        helperText: "This input is disabled",
+        size: "large",
+        disabled: true,
+        row: true,
+        options: [
+          { value: "opt1", label: "Option 1" },
+          { value: "opt2", label: "Option 2" },
+          { value: "opt3", label: "Option 3" }
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      AppInputRadio,
+      {
+        name: "disabledSpecific",
+        label: "Disabled Specific Option",
+        helperText: "Option 2 is disabled",
+        size: "large",
+        row: false,
+        options: [
+          { value: "opt1", label: "Option 1" },
+          { value: "opt2", label: "Option 2", disabled: true },
+          { value: "opt3", label: "Option 3" }
+        ]
+      }
+    )
+  ] })
+};
+const InteractiveComponent = () => {
+  const [value, setValue] = useState("opt1");
+  return /* @__PURE__ */ jsx(
+    AppInputRadio,
+    {
+      name: "interactive",
+      label: "Interactive Radio",
+      helperText: `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 {
+  Default,
+  DisabledStates,
+  ErrorStates,
+  Interactive,
+  LargeSize,
+  MediumSize,
+  SmallSize,
+  meta as default
+};
+//# sourceMappingURL=AppInputRadio.stories.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"AppInputRadio.stories.js","sources":["../../../../../src/stories/react/AppInputRadio.stories.tsx"],"sourcesContent":["import { useState } from 'react';\n\nimport type { Meta, StoryObj } from '@storybook/react-vite';\n\nimport { AppInputRadio } from '~/components/app-input-radio';\nimport { StackColumn } from '~/components/stack-column';\n\n//\n//\n\n// Meta\nconst meta = {\n  title: 'React/App Input Radio',\n  component: AppInputRadio,\n  parameters: {\n    layout: 'centered',\n  },\n  tags: ['autodocs'],\n  argTypes: {\n    label: {\n      control: 'text',\n    },\n    helperText: {\n      control: 'text',\n    },\n    size: {\n      control: 'select',\n      options: ['small', 'medium', 'large'],\n    },\n    color: {\n      control: 'select',\n      options: ['primary', 'error'],\n    },\n    row: {\n      control: 'boolean',\n    },\n    disabled: {\n      control: 'boolean',\n    },\n    error: {\n      control: 'boolean',\n    },\n  },\n  args: {\n    name: 'radio',\n    label: 'Radio label',\n    helperText: 'Select one of the options',\n    size: 'medium',\n    color: 'primary',\n    row: true,\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 AppInputRadio>;\n\nexport default meta;\ntype Story = StoryObj<typeof meta>;\n\n//\n\nexport const Default: Story = {\n  args: {\n    name: 'defaultRadio',\n    label: 'Default Radio',\n  },\n};\n\n//\n\nexport const SmallSize: Story = {\n  render: () => (\n    <StackColumn gap={4}>\n      <AppInputRadio\n        name=\"smallRow\"\n        label=\"Small Radio - Row\"\n        helperText=\"Select one of the options\"\n        size=\"small\"\n        row\n        options={[\n          { value: 'opt1', label: 'Option 1' },\n          { value: 'opt2', label: 'Option 2' },\n          { value: 'opt3', label: 'Option 3' },\n        ]}\n      />\n      <AppInputRadio\n        name=\"smallColumn\"\n        label=\"Small Radio - Column\"\n        helperText=\"Select one of the options\"\n        size=\"small\"\n        row={false}\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 MediumSize: Story = {\n  render: () => (\n    <StackColumn gap={4}>\n      <AppInputRadio\n        name=\"mediumRow\"\n        label=\"Medium Radio - Row\"\n        helperText=\"Select one of the options\"\n        size=\"medium\"\n        row\n        options={[\n          { value: 'opt1', label: 'Option 1' },\n          { value: 'opt2', label: 'Option 2' },\n          { value: 'opt3', label: 'Option 3' },\n        ]}\n      />\n      <AppInputRadio\n        name=\"mediumColumn\"\n        label=\"Medium Radio - Column\"\n        helperText=\"Select one of the options\"\n        size=\"medium\"\n        row={false}\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 LargeSize: Story = {\n  render: () => (\n    <StackColumn gap={4}>\n      <AppInputRadio\n        name=\"largeRow\"\n        label=\"Large Radio - Row\"\n        helperText=\"Select one of the options\"\n        size=\"large\"\n        row\n        options={[\n          { value: 'opt1', label: 'Option 1' },\n          { value: 'opt2', label: 'Option 2' },\n          { value: 'opt3', label: 'Option 3' },\n        ]}\n      />\n      <AppInputRadio\n        name=\"largeColumn\"\n        label=\"Large Radio - Column\"\n        helperText=\"Select one of the options\"\n        size=\"large\"\n        row={false}\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 ErrorStates: Story = {\n  render: () => (\n    <StackColumn gap={4}>\n      <AppInputRadio\n        name=\"errorPrimary\"\n        label=\"Error Radio - Primary Color\"\n        helperText=\"Something went wrong!\"\n        size=\"medium\"\n        error\n        row\n        options={[\n          { value: 'opt1', label: 'Option 1' },\n          { value: 'opt2', label: 'Option 2' },\n          { value: 'opt3', label: 'Option 3' },\n        ]}\n      />\n      <AppInputRadio\n        name=\"errorColor\"\n        label=\"Error Radio - Error Color\"\n        helperText=\"Something went wrong!\"\n        size=\"medium\"\n        color=\"error\"\n        error\n        row\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 DisabledStates: Story = {\n  render: () => (\n    <StackColumn gap={4}>\n      <AppInputRadio\n        name=\"disabledRow\"\n        label=\"Disabled Radio - Row\"\n        helperText=\"This input is disabled\"\n        size=\"large\"\n        disabled\n        row\n        options={[\n          { value: 'opt1', label: 'Option 1' },\n          { value: 'opt2', label: 'Option 2' },\n          { value: 'opt3', label: 'Option 3' },\n        ]}\n      />\n      <AppInputRadio\n        name=\"disabledSpecific\"\n        label=\"Disabled Specific Option\"\n        helperText=\"Option 2 is disabled\"\n        size=\"large\"\n        row={false}\n        options={[\n          { value: 'opt1', label: 'Option 1' },\n          { value: 'opt2', label: 'Option 2', disabled: true },\n          { value: 'opt3', label: 'Option 3' },\n        ]}\n      />\n    </StackColumn>\n  ),\n};\n\n//\n\nconst InteractiveComponent = () => {\n  const [value, setValue] = useState('opt1');\n\n  return (\n    <AppInputRadio\n      name=\"interactive\"\n      label=\"Interactive Radio\"\n      helperText={`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/AppInputRadioCard.stories.js

@@ -0,0 +1,126 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import { RadioGroup } from "@mui/material";
+import { AppInputRadioCard } from "../../components/app-input-radio-card.js";
+import { StackColumn } from "../../components/stack-column.js";
+import { IconStarLine } from "../../icons/system/star-line.js";
+const meta = {
+  title: "React/App Input Radio Card",
+  component: AppInputRadioCard,
+  parameters: {
+    layout: "centered"
+  },
+  tags: ["autodocs"],
+  argTypes: {
+    label: {
+      control: "text"
+    },
+    description: {
+      control: "text"
+    },
+    disabled: {
+      control: "boolean"
+    },
+    isLoading: {
+      control: "boolean"
+    }
+  },
+  args: {
+    name: "radioCard",
+    value: "option1",
+    label: "Radio Card Label"
+  }
+};
+const Default = {
+  args: {
+    label: "Only label"
+  }
+};
+const WithDescription = {
+  args: {
+    label: "Label and description",
+    description: "Lorem ipsum dolor sit amet consectetur adipisicing elit."
+  }
+};
+const WithIcon = {
+  args: {
+    label: "With icon",
+    description: "This card has an icon on the right side.",
+    icon: /* @__PURE__ */ jsx(IconStarLine, {})
+  }
+};
+const Loading = {
+  args: {
+    label: "Loading state",
+    description: "This card is in loading state.",
+    isLoading: true
+  }
+};
+const Disabled = {
+  args: {
+    label: "Disabled card",
+    description: "This card is disabled.",
+    disabled: true
+  }
+};
+const RadioCardGroup = {
+  render: () => /* @__PURE__ */ jsx(RadioGroup, { name: "cardGroup", children: /* @__PURE__ */ jsxs(StackColumn, { gap: 3, width: 300, children: [
+    /* @__PURE__ */ jsx(AppInputRadioCard, { name: "cardGroup", value: "opt1", label: "Option 1" }),
+    /* @__PURE__ */ jsx(
+      AppInputRadioCard,
+      {
+        name: "cardGroup",
+        value: "opt2",
+        label: "Option 2",
+        description: "Lorem ipsum dolor sit amet consectetur adipisicing elit."
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      AppInputRadioCard,
+      {
+        name: "cardGroup",
+        value: "opt3",
+        label: "Option 3",
+        description: "Another description here."
+      }
+    )
+  ] }) })
+};
+const InteractiveComponent = () => {
+  const [value, setValue] = useState("opt1");
+  return /* @__PURE__ */ jsx(RadioGroup, { name: "interactiveCardGroup", value, onChange: (e) => setValue(e.target.value), children: /* @__PURE__ */ jsxs(StackColumn, { gap: 3, width: 300, children: [
+    /* @__PURE__ */ jsx(AppInputRadioCard, { name: "interactiveCardGroup", value: "opt1", label: "Option 1" }),
+    /* @__PURE__ */ jsx(
+      AppInputRadioCard,
+      {
+        name: "interactiveCardGroup",
+        value: "opt2",
+        label: "Option 2",
+        description: "Lorem ipsum dolor sit amet."
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      AppInputRadioCard,
+      {
+        name: "interactiveCardGroup",
+        value: "opt3",
+        label: "Option 3",
+        description: "Another option with description."
+      }
+    )
+  ] }) });
+};
+const Interactive = {
+  render: () => /* @__PURE__ */ jsx(InteractiveComponent, {})
+};
+export {
+  Default,
+  Disabled,
+  Interactive,
+  Loading,
+  RadioCardGroup,
+  WithDescription,
+  WithIcon,
+  meta as default
+};
+//# sourceMappingURL=AppInputRadioCard.stories.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"AppInputRadioCard.stories.js","sources":["../../../../../src/stories/react/AppInputRadioCard.stories.tsx"],"sourcesContent":["import { useState } from 'react';\n\nimport type { Meta, StoryObj } from '@storybook/react-vite';\nimport { RadioGroup } from '@mui/material';\n\nimport { AppInputRadioCard } from '~/components/app-input-radio-card';\nimport { StackColumn } from '~/components/stack-column';\nimport { IconStarLine } from '~/icons/system/star-line';\n\n//\n//\n\n// Meta\nconst meta = {\n  title: 'React/App Input Radio Card',\n  component: AppInputRadioCard,\n  parameters: {\n    layout: 'centered',\n  },\n  tags: ['autodocs'],\n  argTypes: {\n    label: {\n      control: 'text',\n    },\n    description: {\n      control: 'text',\n    },\n    disabled: {\n      control: 'boolean',\n    },\n    isLoading: {\n      control: 'boolean',\n    },\n  },\n  args: {\n    name: 'radioCard',\n    value: 'option1',\n    label: 'Radio Card Label',\n  },\n} satisfies Meta<typeof AppInputRadioCard>;\n\nexport default meta;\ntype Story = StoryObj<typeof meta>;\n\n//\n\nexport const Default: Story = {\n  args: {\n    label: 'Only label',\n  },\n};\n\n//\n\nexport const WithDescription: Story = {\n  args: {\n    label: 'Label and description',\n    description: 'Lorem ipsum dolor sit amet consectetur adipisicing elit.',\n  },\n};\n\n//\n\nexport const WithIcon: Story = {\n  args: {\n    label: 'With icon',\n    description: 'This card has an icon on the right side.',\n    icon: <IconStarLine />,\n  },\n};\n\n//\n\nexport const Loading: Story = {\n  args: {\n    label: 'Loading state',\n    description: 'This card is in loading state.',\n    isLoading: true,\n  },\n};\n\n//\n\nexport const Disabled: Story = {\n  args: {\n    label: 'Disabled card',\n    description: 'This card is disabled.',\n    disabled: true,\n  },\n};\n\n//\n\nexport const RadioCardGroup: Story = {\n  render: () => (\n    <RadioGroup name=\"cardGroup\">\n      <StackColumn gap={3} width={300}>\n        <AppInputRadioCard name=\"cardGroup\" value=\"opt1\" label=\"Option 1\" />\n        <AppInputRadioCard\n          name=\"cardGroup\"\n          value=\"opt2\"\n          label=\"Option 2\"\n          description=\"Lorem ipsum dolor sit amet consectetur adipisicing elit.\"\n        />\n        <AppInputRadioCard\n          name=\"cardGroup\"\n          value=\"opt3\"\n          label=\"Option 3\"\n          description=\"Another description here.\"\n        />\n      </StackColumn>\n    </RadioGroup>\n  ),\n};\n\n//\n\nconst InteractiveComponent = () => {\n  const [value, setValue] = useState('opt1');\n\n  return (\n    <RadioGroup name=\"interactiveCardGroup\" value={value} onChange={e => setValue(e.target.value)}>\n      <StackColumn gap={3} width={300}>\n        <AppInputRadioCard name=\"interactiveCardGroup\" value=\"opt1\" label=\"Option 1\" />\n        <AppInputRadioCard\n          name=\"interactiveCardGroup\"\n          value=\"opt2\"\n          label=\"Option 2\"\n          description=\"Lorem ipsum dolor sit amet.\"\n        />\n        <AppInputRadioCard\n          name=\"interactiveCardGroup\"\n          value=\"opt3\"\n          label=\"Option 3\"\n          description=\"Another option with description.\"\n        />\n      </StackColumn>\n    </RadioGroup>\n  );\n};\n\nexport const Interactive: Story = {\n  render: () => <InteractiveComponent />,\n};\n"],"names":[],"mappings":";;;;;;AAaA,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,aAAa;AAAA,MACX,SAAS;AAAA,IAAA;AAAA,IAEX,UAAU;AAAA,MACR,SAAS;AAAA,IAAA;AAAA,IAEX,WAAW;AAAA,MACT,SAAS;AAAA,IAAA;AAAA,EACX;AAAA,EAEF,MAAM;AAAA,IACJ,MAAM;AAAA,IACN,OAAO;AAAA,IACP,OAAO;AAAA,EAAA;AAEX;AAOO,MAAM,UAAiB;AAAA,EAC5B,MAAM;AAAA,IACJ,OAAO;AAAA,EAAA;AAEX;AAIO,MAAM,kBAAyB;AAAA,EACpC,MAAM;AAAA,IACJ,OAAO;AAAA,IACP,aAAa;AAAA,EAAA;AAEjB;AAIO,MAAM,WAAkB;AAAA,EAC7B,MAAM;AAAA,IACJ,OAAO;AAAA,IACP,aAAa;AAAA,IACb,0BAAO,cAAA,CAAA,CAAa;AAAA,EAAA;AAExB;AAIO,MAAM,UAAiB;AAAA,EAC5B,MAAM;AAAA,IACJ,OAAO;AAAA,IACP,aAAa;AAAA,IACb,WAAW;AAAA,EAAA;AAEf;AAIO,MAAM,WAAkB;AAAA,EAC7B,MAAM;AAAA,IACJ,OAAO;AAAA,IACP,aAAa;AAAA,IACb,UAAU;AAAA,EAAA;AAEd;AAIO,MAAM,iBAAwB;AAAA,EACnC,QAAQ,MACN,oBAAC,YAAA,EAAW,MAAK,aACf,UAAA,qBAAC,aAAA,EAAY,KAAK,GAAG,OAAO,KAC1B,UAAA;AAAA,IAAA,oBAAC,qBAAkB,MAAK,aAAY,OAAM,QAAO,OAAM,YAAW;AAAA,IAClE;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,MAAK;AAAA,QACL,OAAM;AAAA,QACN,OAAM;AAAA,QACN,aAAY;AAAA,MAAA;AAAA,IAAA;AAAA,IAEd;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,MAAK;AAAA,QACL,OAAM;AAAA,QACN,OAAM;AAAA,QACN,aAAY;AAAA,MAAA;AAAA,IAAA;AAAA,EACd,EAAA,CACF,EAAA,CACF;AAEJ;AAIA,MAAM,uBAAuB,MAAM;AACjC,QAAM,CAAC,OAAO,QAAQ,IAAI,SAAS,MAAM;AAEzC,6BACG,YAAA,EAAW,MAAK,wBAAuB,OAAc,UAAU,CAAA,MAAK,SAAS,EAAE,OAAO,KAAK,GAC1F,UAAA,qBAAC,eAAY,KAAK,GAAG,OAAO,KAC1B,UAAA;AAAA,IAAA,oBAAC,qBAAkB,MAAK,wBAAuB,OAAM,QAAO,OAAM,YAAW;AAAA,IAC7E;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,MAAK;AAAA,QACL,OAAM;AAAA,QACN,OAAM;AAAA,QACN,aAAY;AAAA,MAAA;AAAA,IAAA;AAAA,IAEd;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,MAAK;AAAA,QACL,OAAM;AAAA,QACN,OAAM;AAAA,QACN,aAAY;AAAA,MAAA;AAAA,IAAA;AAAA,EACd,EAAA,CACF,EAAA,CACF;AAEJ;AAEO,MAAM,cAAqB;AAAA,EAChC,QAAQ,MAAM,oBAAC,sBAAA,CAAA,CAAqB;AACtC;"}

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

@@ -0,0 +1,71 @@
+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

@@ -0,0 +1 @@
+{"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

@@ -0,0 +1,145 @@
+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

@@ -0,0 +1 @@
+{"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":";;;;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,IAEX,WAAW;AAAA,MACT,SAAS;AAAA,MACT,SAAS,CAAC,SAAS,UAAU,OAAO;AAAA,IAAA;AAAA,IAEtC,KAAK;AAAA,MACH,SAAS;AAAA,IAAA;AAAA,IAEX,UAAU;AAAA,MACR,SAAS;AAAA,IAAA;AAAA,EACX;AAAA,EAEF,MAAM;AAAA,IACJ,MAAM;AAAA,IACN,OAAO;AAAA,IACP,WAAW;AAAA,IACX,KAAK;AAAA,IACL,UAAU;AAAA,IACV,SAAS;AAAA,MACP,EAAE,OAAO,QAAQ,OAAO,WAAA;AAAA,MACxB,EAAE,OAAO,QAAQ,OAAO,WAAA;AAAA,MACxB,EAAE,OAAO,QAAQ,OAAO,WAAA;AAAA,IAAW;AAAA,EACrC;AAEJ;AAOO,MAAM,UAAiB;AAAA,EAC5B,MAAM;AAAA,IACJ,MAAM;AAAA,IACN,OAAO;AAAA,EAAA;AAEX;AAIO,MAAM,MAAa;AAAA,EACxB,MAAM;AAAA,IACJ,MAAM;AAAA,IACN,OAAO;AAAA,IACP,KAAK;AAAA,EAAA;AAET;AAIO,MAAM,SAAgB;AAAA,EAC3B,MAAM;AAAA,IACJ,MAAM;AAAA,IACN,OAAO;AAAA,IACP,KAAK;AAAA,EAAA;AAET;AAIO,MAAM,QAAe;AAAA,EAC1B,QAAQ,MACN,qBAAC,aAAA,EAAY,KAAK,GAChB,UAAA;AAAA,IAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,MAAK;AAAA,QACL,OAAM;AAAA,QACN,WAAU;AAAA,QACV,SAAS;AAAA,UACP,EAAE,OAAO,QAAQ,OAAO,WAAA;AAAA,UACxB,EAAE,OAAO,QAAQ,OAAO,WAAA;AAAA,UACxB,EAAE,OAAO,QAAQ,OAAO,WAAA;AAAA,QAAW;AAAA,MACrC;AAAA,IAAA;AAAA,IAEF;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,MAAK;AAAA,QACL,OAAM;AAAA,QACN,WAAU;AAAA,QACV,SAAS;AAAA,UACP,EAAE,OAAO,QAAQ,OAAO,WAAA;AAAA,UACxB,EAAE,OAAO,QAAQ,OAAO,WAAA;AAAA,UACxB,EAAE,OAAO,QAAQ,OAAO,WAAA;AAAA,QAAW;AAAA,MACrC;AAAA,IAAA;AAAA,IAEF;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,MAAK;AAAA,QACL,OAAM;AAAA,QACN,WAAU;AAAA,QACV,SAAS;AAAA,UACP,EAAE,OAAO,QAAQ,OAAO,WAAA;AAAA,UACxB,EAAE,OAAO,QAAQ,OAAO,WAAA;AAAA,UACxB,EAAE,OAAO,QAAQ,OAAO,WAAA;AAAA,QAAW;AAAA,MACrC;AAAA,IAAA;AAAA,EACF,EAAA,CACF;AAEJ;AAIO,MAAM,WAAkB;AAAA,EAC7B,MAAM;AAAA,IACJ,MAAM;AAAA,IACN,OAAO;AAAA,IACP,UAAU;AAAA,EAAA;AAEd;AAIO,MAAM,UAAiB;AAAA,EAC5B,MAAM;AAAA,IACJ,MAAM;AAAA,EAAA;AAEV;AAIA,MAAM,uBAAuB,MAAM;AACjC,QAAM,CAAC,OAAO,QAAQ,IAAI,SAAS,MAAM;AAEzC,SACE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,MAAK;AAAA,MACL,OAAO,aAAa,KAAK;AAAA,MACzB;AAAA,MACA,UAAU,CAAA,MAAK,SAAS,EAAE,OAAO,KAAK;AAAA,MACtC,SAAS;AAAA,QACP,EAAE,OAAO,QAAQ,OAAO,WAAA;AAAA,QACxB,EAAE,OAAO,QAAQ,OAAO,WAAA;AAAA,QACxB,EAAE,OAAO,QAAQ,OAAO,WAAA;AAAA,MAAW;AAAA,IACrC;AAAA,EAAA;AAGN;AAEO,MAAM,cAAqB;AAAA,EAChC,QAAQ,MAAM,oBAAC,sBAAA,CAAA,CAAqB;AACtC;"}