@webiny/admin-ui 0.0.0-unstable.e53eceafb5 → 0.0.0-unstable.e6f0dc8ca7

package/SegmentedControl/SegmentedControl.mdx

@@ -0,0 +1,123 @@
+import { Canvas, Meta, Controls } from "@storybook/addon-docs/blocks";
+
+import * as SegmentedControlStories from "./SegmentedControl.stories";
+
+<Meta of={SegmentedControlStories} />
+
+# SegmentedControl
+
+A segmented control component that allows users to select a single option from a set of mutually exclusive choices. It's visually similar to a button group where the selected item is highlighted. Unlike tabs, it doesn't have associated content panels.
+
+## Features
+
+- **Radio-like behavior**: Only one item can be selected at a time
+- **Visual variants**: Accent (default) and Ghost styles
+- **Icon support**: Optional icons can be added to items
+- **Sizes**: Small and medium sizes available
+- **Form integration**: Works with form labels, descriptions, and validation
+- **Accessibility**: Built with proper ARIA attributes and keyboard navigation
+
+## Basic Usage
+
+```tsx
+import { SegmentedControl } from "@webiny/admin-ui";
+import { useState } from "react";
+
+const MyComponent = () => {
+  const [value, setValue] = useState("option1");
+
+  return (
+    <SegmentedControl
+      items={[
+        { label: "Option 1", value: "option1" },
+        { label: "Option 2", value: "option2" },
+        { label: "Option 3", value: "option3" }
+      ]}
+      value={value}
+      onChange={setValue}
+    />
+  );
+};
+```
+
+## With Icons
+
+```tsx
+import { SegmentedControl } from "@webiny/admin-ui";
+import { Icon } from "@webiny/admin-ui";
+
+<SegmentedControl
+  items={[
+    { label: "Lock", value: "lock", icon: <Icon name="lock" /> },
+    { label: "Unlock", value: "unlock", icon: <Icon name="lock-open" /> },
+    { label: "Settings", value: "settings", icon: <Icon name="settings" /> }
+  ]}
+  value={value}
+  onChange={setValue}
+/>;
+```
+
+## Variants
+
+### Accent (Default)
+
+The accent variant uses the primary color for the selected state.
+
+### Ghost
+
+The ghost variant is designed for use on dark backgrounds, using a more subtle appearance.
+
+## Form Integration
+
+```tsx
+<SegmentedControl
+  label="Select a plan"
+  description="Choose your subscription plan"
+  required
+  items={plans}
+  value={selectedPlan}
+  onChange={setSelectedPlan}
+  validation={{
+    isValid: false,
+    message: "Please select a plan"
+  }}
+/>
+```
+
+## API
+
+### SegmentedControl Props
+
+| Prop          | Type                           | Default    | Description                     |
+| ------------- | ------------------------------ | ---------- | ------------------------------- |
+| `items`       | `SegmentedControlItemParams[]` | -          | Array of items to display       |
+| `value`       | `string`                       | -          | Currently selected value        |
+| `onChange`    | `(value: string) => void`      | -          | Callback when selection changes |
+| `variant`     | `"accent" \| "ghost"`          | `"accent"` | Visual style variant            |
+| `size`        | `"sm" \| "md"`                 | `"md"`     | Size of the control             |
+| `disabled`    | `boolean`                      | `false`    | Disable all items               |
+| `className`   | `string`                       | -          | Additional CSS class            |
+| `label`       | `string \| React.ReactNode`    | -          | Form label                      |
+| `description` | `string \| React.ReactNode`    | -          | Form description                |
+| `note`        | `string \| React.ReactNode`    | -          | Form note                       |
+| `required`    | `boolean`                      | -          | Show required indicator         |
+| `validation`  | `object`                       | -          | Validation state and message    |
+
+### SegmentedControlItemParams
+
+| Prop       | Type                        | Default | Description                |
+| ---------- | --------------------------- | ------- | -------------------------- |
+| `label`    | `string \| React.ReactNode` | -       | Item label                 |
+| `value`    | `string \| number`          | -       | Item value                 |
+| `disabled` | `boolean`                   | `false` | Disable this specific item |
+| `icon`     | `React.ReactNode`           | -       | Optional icon to display   |
+| `id`       | `string`                    | -       | Optional custom ID         |
+
+## Examples
+
+<Canvas of={SegmentedControlStories.Default} />
+<Canvas of={SegmentedControlStories.VariantLight} />
+<Canvas of={SegmentedControlStories.VariantDimmed} />
+<Canvas of={SegmentedControlStories.VariantGhost} />
+<Canvas of={SegmentedControlStories.WithFormComponent} />
+<Canvas of={SegmentedControlStories.Disabled} />

package/SegmentedControl/SegmentedControl.stories.d.ts

@@ -0,0 +1,11 @@
+import type { Meta, StoryObj } from "@storybook/react-webpack5";
+import { SegmentedControl } from "./SegmentedControl.js";
+declare const meta: Meta<typeof SegmentedControl>;
+export default meta;
+type Story = StoryObj<typeof SegmentedControl>;
+export declare const Default: Story;
+export declare const VariantLight: Story;
+export declare const VariantDimmed: Story;
+export declare const VariantGhost: Story;
+export declare const WithFormComponent: Story;
+export declare const Disabled: Story;

package/SegmentedControl/SegmentedControl.stories.js

@@ -0,0 +1,164 @@
+import React, { useState } from "react";
+import { SegmentedControl } from "./SegmentedControl.js";
+import { Icon } from "../Icon/index.js";
+import { ReactComponent as LockIcon } from "@webiny/icons/notifications.svg";
+const meta = {
+  title: "Components/Form/SegmentedControl",
+  component: SegmentedControl
+};
+export default meta;
+const items = [{
+  label: "Item",
+  value: "item1"
+}, {
+  label: "Item",
+  value: "item2"
+}, {
+  label: "Item",
+  value: "item3"
+}, {
+  label: "Item",
+  value: "item4"
+}];
+const itemsWithIcons = [{
+  label: "Item 1",
+  value: "item1",
+  icon: /*#__PURE__*/React.createElement(Icon, {
+    icon: /*#__PURE__*/React.createElement(LockIcon, null),
+    label: "Lock"
+  })
+}, {
+  label: "Item 1",
+  value: "item2",
+  icon: /*#__PURE__*/React.createElement(Icon, {
+    icon: /*#__PURE__*/React.createElement(LockIcon, null),
+    label: "Lock"
+  })
+}, {
+  label: "Item 1",
+  value: "item3",
+  icon: /*#__PURE__*/React.createElement(Icon, {
+    icon: /*#__PURE__*/React.createElement(LockIcon, null),
+    label: "Lock"
+  })
+}, {
+  label: "Item 1",
+  value: "item4",
+  icon: /*#__PURE__*/React.createElement(Icon, {
+    icon: /*#__PURE__*/React.createElement(LockIcon, null),
+    label: "Lock"
+  })
+}];
+export const Default = {
+  render: args => {
+    const [value, setValue] = useState(args.value);
+    return /*#__PURE__*/React.createElement(SegmentedControl, Object.assign({}, args, {
+      value: value,
+      onChange: value => setValue(value)
+    }));
+  },
+  args: {
+    items: itemsWithIcons
+  }
+};
+export const VariantLight = {
+  render: () => {
+    const [value, setValue] = useState("item1");
+    return /*#__PURE__*/React.createElement(SegmentedControl, {
+      items: items,
+      value: value,
+      onChange: setValue,
+      variant: "light"
+    });
+  }
+};
+export const VariantDimmed = {
+  render: () => {
+    const [value, setValue] = useState("item1");
+    return /*#__PURE__*/React.createElement(SegmentedControl, {
+      items: items,
+      value: value,
+      onChange: setValue,
+      variant: "dimmed"
+    });
+  }
+};
+export const VariantGhost = {
+  render: () => {
+    const [value, setValue] = useState("item1");
+    return /*#__PURE__*/React.createElement("div", {
+      className: "p-md rounded-md"
+    }, /*#__PURE__*/React.createElement(SegmentedControl, {
+      items: items,
+      value: value,
+      onChange: setValue,
+      variant: "ghost"
+    }));
+  }
+};
+export const WithFormComponent = {
+  render: () => {
+    const [value, setValue] = useState("item1");
+    return /*#__PURE__*/React.createElement("div", {
+      className: "space-y-lg"
+    }, /*#__PURE__*/React.createElement(SegmentedControl, {
+      label: "Select an option",
+      description: "Choose one of the available options",
+      items: items,
+      value: value,
+      onChange: setValue
+    }), /*#__PURE__*/React.createElement(SegmentedControl, {
+      label: "With error",
+      items: items,
+      value: value,
+      onChange: setValue,
+      validation: {
+        isValid: false,
+        message: "This field is required"
+      }
+    }), /*#__PURE__*/React.createElement(SegmentedControl, {
+      label: "Disabled",
+      items: items,
+      value: value,
+      onChange: setValue,
+      disabled: true
+    }));
+  }
+};
+export const Disabled = {
+  render: () => {
+    const [value, setValue] = useState("item1");
+    return /*#__PURE__*/React.createElement("div", {
+      className: "space-y-md"
+    }, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("h3", {
+      className: "text-lg font-semibold mb-sm"
+    }, "Fully Disabled"), /*#__PURE__*/React.createElement(SegmentedControl, {
+      items: items,
+      value: value,
+      onChange: setValue,
+      disabled: true
+    })), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("h3", {
+      className: "text-lg font-semibold mb-sm"
+    }, "Partially Disabled"), /*#__PURE__*/React.createElement(SegmentedControl, {
+      items: [{
+        label: "Item",
+        value: "item1"
+      }, {
+        label: "Item (disabled)",
+        value: "item2",
+        disabled: true
+      }, {
+        label: "Item",
+        value: "item3"
+      }, {
+        label: "Item (disabled)",
+        value: "item4",
+        disabled: true
+      }],
+      value: value,
+      onChange: setValue
+    })));
+  }
+};
+
+//# sourceMappingURL=SegmentedControl.stories.js.map

package/SegmentedControl/SegmentedControl.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","useState","SegmentedControl","Icon","ReactComponent","LockIcon","meta","title","component","items","label","value","itemsWithIcons","icon","createElement","Default","render","args","setValue","Object","assign","onChange","VariantLight","variant","VariantDimmed","VariantGhost","className","WithFormComponent","description","validation","isValid","message","disabled","Disabled"],"sources":["SegmentedControl.stories.tsx"],"sourcesContent":["import React, { useState } from \"react\";\nimport type { Meta, StoryObj } from \"@storybook/react-webpack5\";\nimport { SegmentedControl } from \"./SegmentedControl.js\";\nimport { Icon } from \"~/Icon/index.js\";\nimport { ReactComponent as LockIcon } from \"@webiny/icons/notifications.svg\";\n\nconst meta: Meta<typeof SegmentedControl> = {\n    title: \"Components/Form/SegmentedControl\",\n    component: SegmentedControl\n};\n\nexport default meta;\ntype Story = StoryObj<typeof SegmentedControl>;\n\nconst items = [\n    { label: \"Item\", value: \"item1\" },\n    { label: \"Item\", value: \"item2\" },\n    { label: \"Item\", value: \"item3\" },\n    { label: \"Item\", value: \"item4\" }\n];\n\nconst itemsWithIcons = [\n    { label: \"Item 1\", value: \"item1\", icon: <Icon icon={<LockIcon />} label=\"Lock\" /> },\n    { label: \"Item 1\", value: \"item2\", icon: <Icon icon={<LockIcon />} label=\"Lock\" /> },\n    { label: \"Item 1\", value: \"item3\", icon: <Icon icon={<LockIcon />} label=\"Lock\" /> },\n    { label: \"Item 1\", value: \"item4\", icon: <Icon icon={<LockIcon />} label=\"Lock\" /> }\n];\n\nexport const Default: Story = {\n    render: args => {\n        const [value, setValue] = useState(args.value);\n        return <SegmentedControl {...args} value={value} onChange={value => setValue(value)} />;\n    },\n    args: {\n        items: itemsWithIcons\n    }\n};\n\nexport const VariantLight: Story = {\n    render: () => {\n        const [value, setValue] = useState(\"item1\");\n\n        return <SegmentedControl items={items} value={value} onChange={setValue} variant=\"light\" />;\n    }\n};\n\nexport const VariantDimmed: Story = {\n    render: () => {\n        const [value, setValue] = useState(\"item1\");\n\n        return (\n            <SegmentedControl items={items} value={value} onChange={setValue} variant=\"dimmed\" />\n        );\n    }\n};\n\nexport const VariantGhost: Story = {\n    render: () => {\n        const [value, setValue] = useState(\"item1\");\n\n        return (\n            <div className=\"p-md rounded-md\">\n                <SegmentedControl items={items} value={value} onChange={setValue} variant=\"ghost\" />\n            </div>\n        );\n    }\n};\n\nexport const WithFormComponent: Story = {\n    render: () => {\n        const [value, setValue] = useState(\"item1\");\n\n        return (\n            <div className=\"space-y-lg\">\n                <SegmentedControl\n                    label=\"Select an option\"\n                    description=\"Choose one of the available options\"\n                    items={items}\n                    value={value}\n                    onChange={setValue}\n                />\n                <SegmentedControl\n                    label=\"With error\"\n                    items={items}\n                    value={value}\n                    onChange={setValue}\n                    validation={{\n                        isValid: false,\n                        message: \"This field is required\"\n                    }}\n                />\n                <SegmentedControl\n                    label=\"Disabled\"\n                    items={items}\n                    value={value}\n                    onChange={setValue}\n                    disabled\n                />\n            </div>\n        );\n    }\n};\n\nexport const Disabled: Story = {\n    render: () => {\n        const [value, setValue] = useState(\"item1\");\n\n        return (\n            <div className=\"space-y-md\">\n                <div>\n                    <h3 className=\"text-lg font-semibold mb-sm\">Fully Disabled</h3>\n                    <SegmentedControl items={items} value={value} onChange={setValue} disabled />\n                </div>\n                <div>\n                    <h3 className=\"text-lg font-semibold mb-sm\">Partially Disabled</h3>\n                    <SegmentedControl\n                        items={[\n                            { label: \"Item\", value: \"item1\" },\n                            { label: \"Item (disabled)\", value: \"item2\", disabled: true },\n                            { label: \"Item\", value: \"item3\" },\n                            { label: \"Item (disabled)\", value: \"item4\", disabled: true }\n                        ]}\n                        value={value}\n                        onChange={setValue}\n                    />\n                </div>\n            </div>\n        );\n    }\n};\n"],"mappings":"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","ignoreList":[]}

package/SegmentedControl/SegmentedControl.test.d.ts

@@ -0,0 +1,5 @@
+/**
+ * This is a simple smoke test to verify the SegmentedControl component can be imported
+ * and used without errors.
+ */
+export {};

package/SegmentedControl/SegmentedControl.test.js

@@ -0,0 +1,34 @@
+/**
+ * This is a simple smoke test to verify the SegmentedControl component can be imported
+ * and used without errors.
+ */
+
+import { describe, it, expect } from "vitest";
+import React from "react";
+import { SegmentedControl } from "./SegmentedControl.js";
+describe("SegmentedControl", () => {
+  it("should export the component", () => {
+    expect(SegmentedControl).toBeDefined();
+  });
+  it("should accept required props", () => {
+    const items = [{
+      label: "Item 1",
+      value: "item1"
+    }, {
+      label: "Item 2",
+      value: "item2"
+    }];
+    const props = {
+      items,
+      value: "item1",
+      onChange: () => {}
+    };
+
+    // This should not throw
+    expect(() => {
+      /*#__PURE__*/React.createElement(SegmentedControl, props);
+    }).not.toThrow();
+  });
+});
+
+//# sourceMappingURL=SegmentedControl.test.js.map

package/SegmentedControl/SegmentedControl.test.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["describe","it","expect","React","SegmentedControl","toBeDefined","items","label","value","props","onChange","createElement","not","toThrow"],"sources":["SegmentedControl.test.tsx"],"sourcesContent":["/**\n * This is a simple smoke test to verify the SegmentedControl component can be imported\n * and used without errors.\n */\n\nimport { describe, it, expect } from \"vitest\";\nimport React from \"react\";\nimport { SegmentedControl } from \"./SegmentedControl.js\";\n\ndescribe(\"SegmentedControl\", () => {\n    it(\"should export the component\", () => {\n        expect(SegmentedControl).toBeDefined();\n    });\n\n    it(\"should accept required props\", () => {\n        const items = [\n            { label: \"Item 1\", value: \"item1\" },\n            { label: \"Item 2\", value: \"item2\" }\n        ];\n\n        const props = {\n            items,\n            value: \"item1\",\n            onChange: () => {}\n        };\n\n        // This should not throw\n        expect(() => {\n            React.createElement(SegmentedControl, props);\n        }).not.toThrow();\n    });\n});\n"],"mappings":"AAAA;AACA;AACA;AACA;;AAEA,SAASA,QAAQ,EAAEC,EAAE,EAAEC,MAAM,QAAQ,QAAQ;AAC7C,OAAOC,KAAK,MAAM,OAAO;AACzB,SAASC,gBAAgB;AAEzBJ,QAAQ,CAAC,kBAAkB,EAAE,MAAM;EAC/BC,EAAE,CAAC,6BAA6B,EAAE,MAAM;IACpCC,MAAM,CAACE,gBAAgB,CAAC,CAACC,WAAW,CAAC,CAAC;EAC1C,CAAC,CAAC;EAEFJ,EAAE,CAAC,8BAA8B,EAAE,MAAM;IACrC,MAAMK,KAAK,GAAG,CACV;MAAEC,KAAK,EAAE,QAAQ;MAAEC,KAAK,EAAE;IAAQ,CAAC,EACnC;MAAED,KAAK,EAAE,QAAQ;MAAEC,KAAK,EAAE;IAAQ,CAAC,CACtC;IAED,MAAMC,KAAK,GAAG;MACVH,KAAK;MACLE,KAAK,EAAE,OAAO;MACdE,QAAQ,EAAEA,CAAA,KAAM,CAAC;IACrB,CAAC;;IAED;IACAR,MAAM,CAAC,MAAM;MACT,aAAAC,KAAK,CAACQ,aAAa,CAACP,gBAAgB,EAAEK,KAAK,CAAC;IAChD,CAAC,CAAC,CAACG,GAAG,CAACC,OAAO,CAAC,CAAC;EACpB,CAAC,CAAC;AACN,CAAC,CAAC","ignoreList":[]}

package/SegmentedControl/domains/SegmentedControlItem.d.ts

@@ -0,0 +1,22 @@
+import type { SegmentedControlItemParams } from "./SegmentedControlItemParams.js";
+import type React from "react";
+export declare class SegmentedControlItem {
+    private readonly _id;
+    private readonly _label;
+    private readonly _value;
+    private readonly _disabled;
+    private readonly _icon?;
+    protected constructor(data: {
+        id: string;
+        label: any;
+        value: string | number;
+        disabled: boolean;
+        icon?: React.ReactNode;
+    });
+    static create(data: SegmentedControlItemParams): SegmentedControlItem;
+    get id(): string;
+    get label(): any;
+    get value(): string | number;
+    get disabled(): boolean;
+    get icon(): React.ReactNode;
+}

package/SegmentedControl/domains/SegmentedControlItem.js

@@ -0,0 +1,36 @@
+import { generateId } from "../../utils.js";
+export class SegmentedControlItem {
+  constructor(data) {
+    this._id = data.id;
+    this._label = data.label;
+    this._value = data.value;
+    this._disabled = data.disabled;
+    this._icon = data.icon;
+  }
+  static create(data) {
+    return new SegmentedControlItem({
+      id: generateId(data.id),
+      label: data.label,
+      value: data.value,
+      disabled: data.disabled ?? false,
+      icon: data.icon
+    });
+  }
+  get id() {
+    return this._id;
+  }
+  get label() {
+    return this._label;
+  }
+  get value() {
+    return this._value;
+  }
+  get disabled() {
+    return this._disabled;
+  }
+  get icon() {
+    return this._icon;
+  }
+}
+
+//# sourceMappingURL=SegmentedControlItem.js.map

package/SegmentedControl/domains/SegmentedControlItem.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["generateId","SegmentedControlItem","constructor","data","_id","id","_label","label","_value","value","_disabled","disabled","_icon","icon","create"],"sources":["SegmentedControlItem.ts"],"sourcesContent":["import type { SegmentedControlItemParams } from \"./SegmentedControlItemParams.js\";\nimport { generateId } from \"~/utils.js\";\nimport type React from \"react\";\n\nexport class SegmentedControlItem {\n    private readonly _id: string;\n    private readonly _label: any;\n    private readonly _value: string | number;\n    private readonly _disabled: boolean;\n    private readonly _icon?: React.ReactNode;\n\n    protected constructor(data: {\n        id: string;\n        label: any;\n        value: string | number;\n        disabled: boolean;\n        icon?: React.ReactNode;\n    }) {\n        this._id = data.id;\n        this._label = data.label;\n        this._value = data.value;\n        this._disabled = data.disabled;\n        this._icon = data.icon;\n    }\n\n    static create(data: SegmentedControlItemParams) {\n        return new SegmentedControlItem({\n            id: generateId(data.id),\n            label: data.label,\n            value: data.value,\n            disabled: data.disabled ?? false,\n            icon: data.icon\n        });\n    }\n\n    get id() {\n        return this._id;\n    }\n\n    get label() {\n        return this._label;\n    }\n\n    get value() {\n        return this._value;\n    }\n\n    get disabled() {\n        return this._disabled;\n    }\n\n    get icon() {\n        return this._icon;\n    }\n}\n"],"mappings":"AACA,SAASA,UAAU;AAGnB,OAAO,MAAMC,oBAAoB,CAAC;EAOpBC,WAAWA,CAACC,IAMrB,EAAE;IACC,IAAI,CAACC,GAAG,GAAGD,IAAI,CAACE,EAAE;IAClB,IAAI,CAACC,MAAM,GAAGH,IAAI,CAACI,KAAK;IACxB,IAAI,CAACC,MAAM,GAAGL,IAAI,CAACM,KAAK;IACxB,IAAI,CAACC,SAAS,GAAGP,IAAI,CAACQ,QAAQ;IAC9B,IAAI,CAACC,KAAK,GAAGT,IAAI,CAACU,IAAI;EAC1B;EAEA,OAAOC,MAAMA,CAACX,IAAgC,EAAE;IAC5C,OAAO,IAAIF,oBAAoB,CAAC;MAC5BI,EAAE,EAAEL,UAAU,CAACG,IAAI,CAACE,EAAE,CAAC;MACvBE,KAAK,EAAEJ,IAAI,CAACI,KAAK;MACjBE,KAAK,EAAEN,IAAI,CAACM,KAAK;MACjBE,QAAQ,EAAER,IAAI,CAACQ,QAAQ,IAAI,KAAK;MAChCE,IAAI,EAAEV,IAAI,CAACU;IACf,CAAC,CAAC;EACN;EAEA,IAAIR,EAAEA,CAAA,EAAG;IACL,OAAO,IAAI,CAACD,GAAG;EACnB;EAEA,IAAIG,KAAKA,CAAA,EAAG;IACR,OAAO,IAAI,CAACD,MAAM;EACtB;EAEA,IAAIG,KAAKA,CAAA,EAAG;IACR,OAAO,IAAI,CAACD,MAAM;EACtB;EAEA,IAAIG,QAAQA,CAAA,EAAG;IACX,OAAO,IAAI,CAACD,SAAS;EACzB;EAEA,IAAIG,IAAIA,CAAA,EAAG;IACP,OAAO,IAAI,CAACD,KAAK;EACrB;AACJ","ignoreList":[]}

package/SegmentedControl/domains/SegmentedControlItemFormatted.d.ts

@@ -0,0 +1,8 @@
+import type React from "react";
+export interface SegmentedControlItemFormatted {
+    id: string;
+    label: string | React.ReactNode;
+    value: string;
+    disabled: boolean;
+    icon?: React.ReactNode;
+}

package/SegmentedControl/domains/SegmentedControlItemFormatted.js

@@ -0,0 +1,3 @@
+export {};
+
+//# sourceMappingURL=SegmentedControlItemFormatted.js.map

package/SegmentedControl/domains/SegmentedControlItemFormatted.js.map

@@ -0,0 +1 @@
+{"version":3,"names":[],"sources":["SegmentedControlItemFormatted.ts"],"sourcesContent":["import type React from \"react\";\n\nexport interface SegmentedControlItemFormatted {\n    id: string;\n    label: string | React.ReactNode;\n    value: string;\n    disabled: boolean;\n    icon?: React.ReactNode;\n}\n"],"mappings":"","ignoreList":[]}

package/SegmentedControl/domains/SegmentedControlItemFormatter.d.ts

@@ -0,0 +1,5 @@
+import type { SegmentedControlItemFormatted } from "./SegmentedControlItemFormatted.js";
+import type { SegmentedControlItem } from "./SegmentedControlItem.js";
+export declare class SegmentedControlItemFormatter {
+    static format(item: SegmentedControlItem): SegmentedControlItemFormatted;
+}

package/SegmentedControl/domains/SegmentedControlItemFormatter.js

@@ -0,0 +1,13 @@
+export class SegmentedControlItemFormatter {
+  static format(item) {
+    return {
+      id: item.id,
+      label: item.label,
+      value: String(item.value),
+      disabled: item.disabled,
+      icon: item.icon
+    };
+  }
+}
+
+//# sourceMappingURL=SegmentedControlItemFormatter.js.map

package/SegmentedControl/domains/SegmentedControlItemFormatter.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["SegmentedControlItemFormatter","format","item","id","label","value","String","disabled","icon"],"sources":["SegmentedControlItemFormatter.ts"],"sourcesContent":["import type { SegmentedControlItemFormatted } from \"./SegmentedControlItemFormatted.js\";\nimport type { SegmentedControlItem } from \"./SegmentedControlItem.js\";\n\nexport class SegmentedControlItemFormatter {\n    static format(item: SegmentedControlItem): SegmentedControlItemFormatted {\n        return {\n            id: item.id,\n            label: item.label,\n            value: String(item.value),\n            disabled: item.disabled,\n            icon: item.icon\n        };\n    }\n}\n"],"mappings":"AAGA,OAAO,MAAMA,6BAA6B,CAAC;EACvC,OAAOC,MAAMA,CAACC,IAA0B,EAAiC;IACrE,OAAO;MACHC,EAAE,EAAED,IAAI,CAACC,EAAE;MACXC,KAAK,EAAEF,IAAI,CAACE,KAAK;MACjBC,KAAK,EAAEC,MAAM,CAACJ,IAAI,CAACG,KAAK,CAAC;MACzBE,QAAQ,EAAEL,IAAI,CAACK,QAAQ;MACvBC,IAAI,EAAEN,IAAI,CAACM;IACf,CAAC;EACL;AACJ","ignoreList":[]}

package/SegmentedControl/domains/SegmentedControlItemParams.d.ts

@@ -0,0 +1,8 @@
+import type React from "react";
+export interface SegmentedControlItemParams {
+    id?: string;
+    label: string | React.ReactNode;
+    value: string | number;
+    disabled?: boolean;
+    icon?: React.ReactNode;
+}

package/SegmentedControl/domains/SegmentedControlItemParams.js

@@ -0,0 +1,3 @@
+export {};
+
+//# sourceMappingURL=SegmentedControlItemParams.js.map

package/SegmentedControl/domains/SegmentedControlItemParams.js.map

@@ -0,0 +1 @@
+{"version":3,"names":[],"sources":["SegmentedControlItemParams.ts"],"sourcesContent":["import type React from \"react\";\n\nexport interface SegmentedControlItemParams {\n    id?: string;\n    label: string | React.ReactNode;\n    value: string | number;\n    disabled?: boolean;\n    icon?: React.ReactNode;\n}\n"],"mappings":"","ignoreList":[]}

package/SegmentedControl/domains/index.d.ts

@@ -0,0 +1,4 @@
+export * from "./SegmentedControlItem.js";
+export * from "./SegmentedControlItemParams.js";
+export * from "./SegmentedControlItemFormatted.js";
+export * from "./SegmentedControlItemFormatter.js";

package/SegmentedControl/domains/index.js

@@ -0,0 +1,6 @@
+export * from "./SegmentedControlItem.js";
+export * from "./SegmentedControlItemParams.js";
+export * from "./SegmentedControlItemFormatted.js";
+export * from "./SegmentedControlItemFormatter.js";
+
+//# sourceMappingURL=index.js.map

package/SegmentedControl/domains/index.js.map

@@ -0,0 +1 @@
+{"version":3,"names":[],"sources":["index.ts"],"sourcesContent":["export * from \"./SegmentedControlItem.js\";\nexport * from \"./SegmentedControlItemParams.js\";\nexport * from \"./SegmentedControlItemFormatted.js\";\nexport * from \"./SegmentedControlItemFormatter.js\";\n"],"mappings":"AAAA;AACA;AACA;AACA","ignoreList":[]}

package/SegmentedControl/index.d.ts

@@ -0,0 +1,3 @@
+export * from "./SegmentedControl.js";
+export * from "./primitives/index.js";
+export * from "./domains/index.js";

package/SegmentedControl/index.js

@@ -0,0 +1,5 @@
+export * from "./SegmentedControl.js";
+export * from "./primitives/index.js";
+export * from "./domains/index.js";
+
+//# sourceMappingURL=index.js.map

package/SegmentedControl/index.js.map

@@ -0,0 +1 @@
+{"version":3,"names":[],"sources":["index.ts"],"sourcesContent":["export * from \"./SegmentedControl.js\";\nexport * from \"./primitives/index.js\";\nexport * from \"./domains/index.js\";\n"],"mappings":"AAAA;AACA;AACA","ignoreList":[]}

package/SegmentedControl/primitives/SegmentedControlPrimitive.d.ts

@@ -0,0 +1,48 @@
+import * as React from "react";
+import { type VariantProps } from "../../utils.js";
+import type { SegmentedControlItemParams, SegmentedControlItemFormatted } from "../domains/index.js";
+/**
+ * Segmented Control Item Button
+ */
+declare const segmentedControlItemVariants: (props?: ({
+    variant?: "ghost" | "dimmed" | "light" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+/**
+ * Segmented Control Primitive
+ */
+interface SegmentedControlPrimitiveProps {
+    items: SegmentedControlItemParams[];
+    /**
+     * Callback triggered when the selected value changes.
+     */
+    onChange?: (value: string) => void;
+    /**
+     * The selected value.
+     */
+    value?: string;
+    /**
+     * Visual style variant.
+     */
+    variant?: VariantProps<typeof segmentedControlItemVariants>["variant"];
+    /**
+     * Additional class name.
+     */
+    className?: string;
+    /**
+     * Disabled state for all items.
+     */
+    disabled?: boolean;
+}
+interface SegmentedControlVm {
+    items: SegmentedControlItemFormatted[];
+}
+interface SegmentedControlRendererProps extends SegmentedControlPrimitiveProps {
+    items: SegmentedControlItemFormatted[];
+    changeValue: (value: string) => void;
+}
+declare const SegmentedControlRenderer: ({ items, changeValue, value, variant, className, disabled }: SegmentedControlRendererProps) => React.JSX.Element;
+/**
+ * Segmented Control Primitive Component
+ */
+declare const SegmentedControlPrimitive: (props: SegmentedControlPrimitiveProps) => React.JSX.Element;
+export { SegmentedControlPrimitive, SegmentedControlRenderer, type SegmentedControlPrimitiveProps, type SegmentedControlVm };