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

package/SegmentedControl/SegmentedControlTabs.js

@@ -0,0 +1,71 @@
+import react, { useEffect, useMemo, useState } from "react";
+import { Tabs } from "radix-ui";
+import { cn, withStaticProps } from "../utils.js";
+import { SegmentedControlPrimitive } from "./primitives/index.js";
+import { SegmentedControlTabsContext } from "./SegmentedControlTabsContext.js";
+import { SegmentedControlTab } from "./SegmentedControlTab.js";
+const BaseSegmentedControlTabs = ({ children, variant, defaultValue, className })=>{
+    const [tabs, setTabs] = useState([]);
+    const [activeTab, setActiveTab] = useState(defaultValue ?? "");
+    useEffect(()=>{
+        if (!activeTab && tabs.length > 0) setActiveTab(tabs[0].value);
+    }, [
+        tabs
+    ]);
+    const items = useMemo(()=>tabs.filter((tab)=>false !== tab.visible).map((tab)=>({
+                value: tab.value,
+                label: tab.trigger,
+                icon: tab.icon,
+                disabled: tab.disabled
+            })), [
+        tabs
+    ]);
+    const context = useMemo(()=>({
+            activeTab,
+            setActiveTab,
+            addTab (tab) {
+                setTabs((prev)=>{
+                    const idx = prev.findIndex((t)=>t.value === tab.value);
+                    if (idx > -1) return [
+                        ...prev.slice(0, idx),
+                        tab,
+                        ...prev.slice(idx + 1)
+                    ];
+                    return [
+                        ...prev,
+                        tab
+                    ];
+                });
+            },
+            removeTab (id) {
+                setTabs((prev)=>prev.filter((t)=>t.id !== id));
+            }
+        }), [
+        activeTab,
+        setActiveTab
+    ]);
+    return /*#__PURE__*/ react.createElement(SegmentedControlTabsContext.Provider, {
+        value: context
+    }, /*#__PURE__*/ react.createElement(Tabs.Root, {
+        value: activeTab,
+        onValueChange: setActiveTab,
+        className: className
+    }, /*#__PURE__*/ react.createElement(SegmentedControlPrimitive, {
+        items: items,
+        value: activeTab,
+        onChange: setActiveTab,
+        variant: variant,
+        fullWidth: true
+    }), tabs.map((tab)=>/*#__PURE__*/ react.createElement(Tabs.Content, {
+            key: tab.id,
+            value: tab.value,
+            forceMount: true,
+            className: cn("focus-visible:outline-none", "data-[state=inactive]:hidden")
+        }, tab.content)), children));
+};
+const SegmentedControlTabs = withStaticProps(BaseSegmentedControlTabs, {
+    Tab: SegmentedControlTab
+});
+export { SegmentedControlTabs };
+
+//# sourceMappingURL=SegmentedControlTabs.js.map

package/SegmentedControl/SegmentedControlTabs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SegmentedControl/SegmentedControlTabs.js","sources":["../../src/SegmentedControl/SegmentedControlTabs.tsx"],"sourcesContent":["import React, { useEffect, useMemo, useState } from \"react\";\nimport { Tabs } from \"radix-ui\";\nimport { cn, withStaticProps } from \"~/utils.js\";\nimport { SegmentedControlPrimitive } from \"./primitives/index.js\";\nimport type { SegmentedControlPrimitiveProps } from \"./primitives/index.js\";\nimport {\n    SegmentedControlTabsContext,\n    type SegmentedTabItem\n} from \"./SegmentedControlTabsContext.js\";\nimport { SegmentedControlTab } from \"./SegmentedControlTab.js\";\n\nexport interface SegmentedControlTabsProps {\n    children: React.ReactNode;\n    variant?: SegmentedControlPrimitiveProps[\"variant\"];\n    defaultValue?: string;\n    className?: string;\n}\n\nconst BaseSegmentedControlTabs = ({\n    children,\n    variant,\n    defaultValue,\n    className\n}: SegmentedControlTabsProps) => {\n    const [tabs, setTabs] = useState<SegmentedTabItem[]>([]);\n    const [activeTab, setActiveTab] = useState(defaultValue ?? \"\");\n\n    useEffect(() => {\n        if (!activeTab && tabs.length > 0) {\n            setActiveTab(tabs[0].value);\n        }\n    }, [tabs]);\n\n    const items = useMemo(\n        () =>\n            tabs\n                .filter(tab => tab.visible !== false)\n                .map(tab => ({\n                    value: tab.value,\n                    label: tab.trigger,\n                    icon: tab.icon,\n                    disabled: tab.disabled\n                })),\n        [tabs]\n    );\n\n    const context = useMemo(\n        () => ({\n            activeTab,\n            setActiveTab,\n            addTab(tab: SegmentedTabItem) {\n                setTabs(prev => {\n                    const idx = prev.findIndex(t => t.value === tab.value);\n                    if (idx > -1) {\n                        return [...prev.slice(0, idx), tab, ...prev.slice(idx + 1)];\n                    }\n                    return [...prev, tab];\n                });\n            },\n            removeTab(id: string) {\n                setTabs(prev => prev.filter(t => t.id !== id));\n            }\n        }),\n        [activeTab, setActiveTab]\n    );\n\n    return (\n        <SegmentedControlTabsContext.Provider value={context}>\n            <Tabs.Root value={activeTab} onValueChange={setActiveTab} className={className}>\n                <SegmentedControlPrimitive\n                    items={items}\n                    value={activeTab}\n                    onChange={setActiveTab}\n                    variant={variant}\n                    fullWidth\n                />\n                {tabs.map(tab => (\n                    <Tabs.Content\n                        key={tab.id}\n                        value={tab.value}\n                        forceMount\n                        className={cn(\"focus-visible:outline-none\", \"data-[state=inactive]:hidden\")}\n                    >\n                        {tab.content}\n                    </Tabs.Content>\n                ))}\n                {children}\n            </Tabs.Root>\n        </SegmentedControlTabsContext.Provider>\n    );\n};\n\nexport const SegmentedControlTabs = withStaticProps(BaseSegmentedControlTabs, {\n    Tab: SegmentedControlTab\n});\n"],"names":["BaseSegmentedControlTabs","children","variant","defaultValue","className","tabs","setTabs","useState","activeTab","setActiveTab","useEffect","items","useMemo","tab","context","prev","idx","t","id","SegmentedControlTabsContext","Tabs","SegmentedControlPrimitive","cn","SegmentedControlTabs","withStaticProps","SegmentedControlTab"],"mappings":";;;;;;AAkBA,MAAMA,2BAA2B,CAAC,EAC9BC,QAAQ,EACRC,OAAO,EACPC,YAAY,EACZC,SAAS,EACe;IACxB,MAAM,CAACC,MAAMC,QAAQ,GAAGC,SAA6B,EAAE;IACvD,MAAM,CAACC,WAAWC,aAAa,GAAGF,SAASJ,gBAAgB;IAE3DO,UAAU;QACN,IAAI,CAACF,aAAaH,KAAK,MAAM,GAAG,GAC5BI,aAAaJ,IAAI,CAAC,EAAE,CAAC,KAAK;IAElC,GAAG;QAACA;KAAK;IAET,MAAMM,QAAQC,QACV,IACIP,KACK,MAAM,CAACQ,CAAAA,MAAOA,AAAgB,UAAhBA,IAAI,OAAO,EACzB,GAAG,CAACA,CAAAA,MAAQ;gBACT,OAAOA,IAAI,KAAK;gBAChB,OAAOA,IAAI,OAAO;gBAClB,MAAMA,IAAI,IAAI;gBACd,UAAUA,IAAI,QAAQ;YAC1B,KACR;QAACR;KAAK;IAGV,MAAMS,UAAUF,QACZ,IAAO;YACHJ;YACAC;YACA,QAAOI,GAAqB;gBACxBP,QAAQS,CAAAA;oBACJ,MAAMC,MAAMD,KAAK,SAAS,CAACE,CAAAA,IAAKA,EAAE,KAAK,KAAKJ,IAAI,KAAK;oBACrD,IAAIG,MAAM,IACN,OAAO;2BAAID,KAAK,KAAK,CAAC,GAAGC;wBAAMH;2BAAQE,KAAK,KAAK,CAACC,MAAM;qBAAG;oBAE/D,OAAO;2BAAID;wBAAMF;qBAAI;gBACzB;YACJ;YACA,WAAUK,EAAU;gBAChBZ,QAAQS,CAAAA,OAAQA,KAAK,MAAM,CAACE,CAAAA,IAAKA,EAAE,EAAE,KAAKC;YAC9C;QACJ,IACA;QAACV;QAAWC;KAAa;IAG7B,OAAO,WAAP,GACI,oBAACU,4BAA4B,QAAQ;QAAC,OAAOL;qBACzC,oBAACM,KAAK,IAAI;QAAC,OAAOZ;QAAW,eAAeC;QAAc,WAAWL;qBACjE,oBAACiB,2BAAyBA;QACtB,OAAOV;QACP,OAAOH;QACP,UAAUC;QACV,SAASP;QACT;QAEHG,KAAK,GAAG,CAACQ,CAAAA,MAAAA,WAAAA,GACN,oBAACO,KAAK,OAAO;YACT,KAAKP,IAAI,EAAE;YACX,OAAOA,IAAI,KAAK;YAChB;YACA,WAAWS,GAAG,8BAA8B;WAE3CT,IAAI,OAAO,IAGnBZ;AAIjB;AAEO,MAAMsB,uBAAuBC,gBAAgBxB,0BAA0B;IAC1E,KAAKyB;AACT"}

package/SegmentedControl/SegmentedControlTabsContext.d.ts

@@ -0,0 +1,19 @@
+import type React from "react";
+export interface SegmentedTabItem {
+    id: string;
+    value: string;
+    trigger: React.ReactNode;
+    icon?: React.ReactElement;
+    content: React.ReactNode;
+    disabled?: boolean;
+    visible?: boolean;
+}
+interface SegmentedControlTabsContextValue {
+    addTab: (tab: SegmentedTabItem) => void;
+    removeTab: (id: string) => void;
+    activeTab: string;
+    setActiveTab: (tab: string) => void;
+}
+export declare const SegmentedControlTabsContext: React.Context<SegmentedControlTabsContextValue>;
+export declare const useSegmentedTabs: () => SegmentedControlTabsContextValue;
+export {};

package/SegmentedControl/SegmentedControlTabsContext.js

@@ -0,0 +1,11 @@
+import { createContext, useContext } from "react";
+const SegmentedControlTabsContext = createContext({
+    addTab: ()=>void 0,
+    removeTab: ()=>void 0,
+    activeTab: "",
+    setActiveTab: ()=>void 0
+});
+const useSegmentedTabs = ()=>useContext(SegmentedControlTabsContext);
+export { SegmentedControlTabsContext, useSegmentedTabs };
+
+//# sourceMappingURL=SegmentedControlTabsContext.js.map

package/SegmentedControl/SegmentedControlTabsContext.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SegmentedControl/SegmentedControlTabsContext.js","sources":["../../src/SegmentedControl/SegmentedControlTabsContext.ts"],"sourcesContent":["import { createContext, useContext } from \"react\";\nimport type React from \"react\";\n\nexport interface SegmentedTabItem {\n    id: string;\n    value: string;\n    trigger: React.ReactNode;\n    icon?: React.ReactElement;\n    content: React.ReactNode;\n    disabled?: boolean;\n    visible?: boolean;\n}\n\ninterface SegmentedControlTabsContextValue {\n    addTab: (tab: SegmentedTabItem) => void;\n    removeTab: (id: string) => void;\n    activeTab: string;\n    setActiveTab: (tab: string) => void;\n}\n\nexport const SegmentedControlTabsContext = createContext<SegmentedControlTabsContextValue>({\n    addTab: () => undefined,\n    removeTab: () => undefined,\n    activeTab: \"\",\n    setActiveTab: () => undefined\n});\n\nexport const useSegmentedTabs = () => useContext(SegmentedControlTabsContext);\n"],"names":["SegmentedControlTabsContext","createContext","undefined","useSegmentedTabs","useContext"],"mappings":";AAoBO,MAAMA,8BAA8BC,cAAgD;IACvF,QAAQ,IAAMC;IACd,WAAW,IAAMA;IACjB,WAAW;IACX,cAAc,IAAMA;AACxB;AAEO,MAAMC,mBAAmB,IAAMC,WAAWJ"}

package/SegmentedControl/domains/SegmentedControlItem.js

@@ -1,36 +1,37 @@
 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;
-  }
+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;
+    }
 }
+export { SegmentedControlItem };
 
 //# sourceMappingURL=SegmentedControlItem.js.map

package/SegmentedControl/domains/SegmentedControlItem.js.map

@@ -1 +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":[]}
+{"version":3,"file":"SegmentedControl/domains/SegmentedControlItem.js","sources":["../../../src/SegmentedControl/domains/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"],"names":["SegmentedControlItem","data","generateId"],"mappings":";AAIO,MAAMA;IAOT,YAAsBC,IAMrB,CAAE;QACC,IAAI,CAAC,GAAG,GAAGA,KAAK,EAAE;QAClB,IAAI,CAAC,MAAM,GAAGA,KAAK,KAAK;QACxB,IAAI,CAAC,MAAM,GAAGA,KAAK,KAAK;QACxB,IAAI,CAAC,SAAS,GAAGA,KAAK,QAAQ;QAC9B,IAAI,CAAC,KAAK,GAAGA,KAAK,IAAI;IAC1B;IAEA,OAAO,OAAOA,IAAgC,EAAE;QAC5C,OAAO,IAAID,qBAAqB;YAC5B,IAAIE,WAAWD,KAAK,EAAE;YACtB,OAAOA,KAAK,KAAK;YACjB,OAAOA,KAAK,KAAK;YACjB,UAAUA,KAAK,QAAQ,IAAI;YAC3B,MAAMA,KAAK,IAAI;QACnB;IACJ;IAEA,IAAI,KAAK;QACL,OAAO,IAAI,CAAC,GAAG;IACnB;IAEA,IAAI,QAAQ;QACR,OAAO,IAAI,CAAC,MAAM;IACtB;IAEA,IAAI,QAAQ;QACR,OAAO,IAAI,CAAC,MAAM;IACtB;IAEA,IAAI,WAAW;QACX,OAAO,IAAI,CAAC,SAAS;IACzB;IAEA,IAAI,OAAO;QACP,OAAO,IAAI,CAAC,KAAK;IACrB;AACJ"}

package/SegmentedControl/domains/SegmentedControlItemFormatted.js

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

package/SegmentedControl/domains/SegmentedControlItemFormatter.js

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

package/SegmentedControl/domains/SegmentedControlItemFormatter.js.map

@@ -1 +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":[]}
+{"version":3,"file":"SegmentedControl/domains/SegmentedControlItemFormatter.js","sources":["../../../src/SegmentedControl/domains/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"],"names":["SegmentedControlItemFormatter","item","String"],"mappings":"AAGO,MAAMA;IACT,OAAO,OAAOC,IAA0B,EAAiC;QACrE,OAAO;YACH,IAAIA,KAAK,EAAE;YACX,OAAOA,KAAK,KAAK;YACjB,OAAOC,OAAOD,KAAK,KAAK;YACxB,UAAUA,KAAK,QAAQ;YACvB,MAAMA,KAAK,IAAI;QACnB;IACJ;AACJ"}

package/SegmentedControl/domains/SegmentedControlItemParams.js

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

package/SegmentedControl/domains/index.js

@@ -2,5 +2,3 @@ export * from "./SegmentedControlItem.js";
 export * from "./SegmentedControlItemParams.js";
 export * from "./SegmentedControlItemFormatted.js";
 export * from "./SegmentedControlItemFormatter.js";
-
-//# sourceMappingURL=index.js.map

package/SegmentedControl/index.d.ts

@@ -1,3 +1,5 @@
 export * from "./SegmentedControl.js";
+export * from "./SegmentedControlTabs.js";
+export { useSegmentedTabs } from "./SegmentedControlTabsContext.js";
 export * from "./primitives/index.js";
 export * from "./domains/index.js";

package/SegmentedControl/index.js

@@ -1,5 +1,5 @@
 export * from "./SegmentedControl.js";
+export * from "./SegmentedControlTabs.js";
 export * from "./primitives/index.js";
 export * from "./domains/index.js";
-
-//# sourceMappingURL=index.js.map
+export { useSegmentedTabs } from "./SegmentedControlTabsContext.js";

package/SegmentedControl/primitives/SegmentedControlPrimitive.d.ts

@@ -5,7 +5,7 @@ import type { SegmentedControlItemParams, SegmentedControlItemFormatted } from "
  * Segmented Control Item Button
  */
 declare const segmentedControlItemVariants: (props?: ({
-    variant?: "ghost" | "dimmed" | "light" | null | undefined;
+    variant?: "dimmed" | "ghost" | "light" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 /**
  * Segmented Control Primitive
@@ -32,6 +32,10 @@ interface SegmentedControlPrimitiveProps {
      * Disabled state for all items.
      */
     disabled?: boolean;
+    /**
+     * Stretch the control to fill its container width, with buttons sharing space equally.
+     */
+    fullWidth?: boolean;
 }
 interface SegmentedControlVm {
     items: SegmentedControlItemFormatted[];
@@ -40,7 +44,7 @@ interface SegmentedControlRendererProps extends SegmentedControlPrimitiveProps {
     items: SegmentedControlItemFormatted[];
     changeValue: (value: string) => void;
 }
-declare const SegmentedControlRenderer: ({ items, changeValue, value, variant, className, disabled }: SegmentedControlRendererProps) => React.JSX.Element;
+declare const SegmentedControlRenderer: ({ items, changeValue, value, variant, className, disabled, fullWidth }: SegmentedControlRendererProps) => React.JSX.Element;
 /**
  * Segmented Control Primitive Component
  */

package/SegmentedControl/primitives/SegmentedControlPrimitive.js

@@ -1,102 +1,93 @@
-import * as React from "react";
 import { cn, cva } from "../../utils.js";
 import { useSegmentedControl } from "./useSegmentedControl.js";
 import { Icon } from "../../Icon/index.js";
-
-/**
- * Segmented Control Item Button
- */
-const segmentedControlItemVariants = cva(["inline-flex items-center justify-center whitespace-nowrap transition-colors cursor-pointer relative rounded-md", "text-md px-sm-extra py-xs [&>svg]:size-md gap-xs", "focus-visible:outline-none focus-visible:ring-md focus-visible:ring-primary-dimmed focus-visible:ring-offset-0", "disabled:opacity-50 disabled:pointer-events-none disabled:cursor-not-allowed"], {
-  variants: {
-    variant: {
-      light: ["text-neutral-strong fill-neutral-xstrong", "data-[state=active]:text-neutral-primary data-[state=active]:fill-neutral-xstrong data-[state=active]:bg-neutral-base/80", "hover:data-[state=inactive]:text-neutral-primary", "hover:data-[state=inactive]:bg-neutral-base/80", "active:data-[state=inactive]:bg-neutral-base/80"],
-      dimmed: ["text-neutral-strong fill-neutral-xstrong", "data-[state=active]:text-neutral-primary data-[state=active]:fill-neutral-xstrong data-[state=active]:bg-neutral-base/80", "hover:data-[state=inactive]:text-neutral-primary", "hover:data-[state=inactive]:bg-neutral-base/80", "active:data-[state=inactive]:bg-neutral-base/80"],
-      ghost: ["text-neutral-strong fill-neutral-xstrong", "data-[state=active]:bg-neutral-dark/5", "hover:data-[state=inactive]:bg-neutral-dark/5", "active:data-[state=inactive]:bg-neutral-dark/5"]
+import * as __rspack_external_react from "react";
+const segmentedControlItemVariants = cva([
+    "inline-flex items-center justify-center whitespace-nowrap transition-colors cursor-pointer relative rounded-md",
+    "text-md px-sm-extra py-xs [&>svg]:size-md gap-xs",
+    "focus-visible:outline-none focus-visible:ring-md focus-visible:ring-primary-dimmed focus-visible:ring-offset-0",
+    "disabled:opacity-50 disabled:pointer-events-none disabled:cursor-not-allowed"
+], {
+    variants: {
+        variant: {
+            light: [
+                "text-neutral-strong fill-neutral-xstrong",
+                "data-[state=active]:text-neutral-primary data-[state=active]:fill-neutral-xstrong data-[state=active]:bg-neutral-base/80",
+                "hover:data-[state=inactive]:text-neutral-primary",
+                "hover:data-[state=inactive]:bg-neutral-base/80",
+                "active:data-[state=inactive]:bg-neutral-base/80"
+            ],
+            dimmed: [
+                "text-neutral-strong fill-neutral-xstrong",
+                "data-[state=active]:text-neutral-primary data-[state=active]:fill-neutral-xstrong data-[state=active]:bg-neutral-base/80",
+                "hover:data-[state=inactive]:text-neutral-primary",
+                "hover:data-[state=inactive]:bg-neutral-base/80",
+                "active:data-[state=inactive]:bg-neutral-base/80"
+            ],
+            ghost: [
+                "text-neutral-strong fill-neutral-xstrong",
+                "data-[state=active]:bg-neutral-dark/5",
+                "hover:data-[state=inactive]:bg-neutral-dark/5",
+                "active:data-[state=inactive]:bg-neutral-dark/5"
+            ]
+        }
+    },
+    defaultVariants: {
+        variant: "light"
     }
-  },
-  defaultVariants: {
-    variant: "light"
-  }
 });
 const segmentedControlRootVariants = cva("inline-flex rounded-md p-xxs gap-xs", {
-  variants: {
-    variant: {
-      light: "bg-neutral-light",
-      dimmed: "bg-neutral-dimmed",
-      ghost: ""
+    variants: {
+        variant: {
+            light: "bg-neutral-light",
+            dimmed: "bg-neutral-dimmed",
+            ghost: ""
+        }
+    },
+    defaultVariants: {
+        variant: "light"
     }
-  },
-  defaultVariants: {
-    variant: "light"
-  }
 });
-const SegmentedControlItemButton = ({
-  item,
-  isActive,
-  onValueChange,
-  variant,
-  className,
-  ...props
-}) => {
-  return /*#__PURE__*/React.createElement("button", Object.assign({
-    type: "button",
-    role: "radio",
-    "aria-checked": isActive,
-    "data-state": isActive ? "active" : "inactive",
-    disabled: item.disabled,
-    onClick: () => onValueChange(item.value),
-    className: cn(segmentedControlItemVariants({
-      variant
-    }), className)
-  }, props), item.icon && /*#__PURE__*/React.createElement(Icon, {
-    icon: item.icon,
-    size: "sm",
-    label: String(item.label),
-    color: "neutral-strong"
-  }), item.label);
-};
-
-/**
- * Segmented Control Primitive
- */
-
-const SegmentedControlRenderer = ({
-  items,
-  changeValue,
-  value,
-  variant = "light",
-  className,
-  disabled
-}) => {
-  return /*#__PURE__*/React.createElement("div", {
-    role: "radiogroup",
-    className: cn(segmentedControlRootVariants({
-      variant
-    }), className)
-  }, items.map(item => /*#__PURE__*/React.createElement(SegmentedControlItemButton, {
-    key: item.id,
-    item: {
-      ...item,
-      disabled: disabled || item.disabled
-    },
-    isActive: value === item.value,
-    onValueChange: changeValue,
-    variant: variant
-  })));
-};
-
-/**
- * Segmented Control Primitive Component
- */
-const SegmentedControlPrimitive = props => {
-  const {
-    vm,
-    changeValue
-  } = useSegmentedControl(props);
-  return /*#__PURE__*/React.createElement(SegmentedControlRenderer, Object.assign({}, props, {
-    items: vm.items,
-    changeValue: changeValue
-  }));
+const SegmentedControlItemButton = ({ item, isActive, onValueChange, variant, className, ...props })=>/*#__PURE__*/ __rspack_external_react.createElement("button", {
+        type: "button",
+        role: "radio",
+        "aria-checked": isActive,
+        "data-state": isActive ? "active" : "inactive",
+        disabled: item.disabled,
+        onClick: ()=>onValueChange(item.value),
+        className: cn(segmentedControlItemVariants({
+            variant
+        }), className),
+        ...props
+    }, item.icon && /*#__PURE__*/ __rspack_external_react.createElement(Icon, {
+        icon: item.icon,
+        size: "sm",
+        label: String(item.label),
+        color: "neutral-strong"
+    }), item.label);
+const SegmentedControlRenderer = ({ items, changeValue, value, variant = "light", className, disabled, fullWidth })=>/*#__PURE__*/ __rspack_external_react.createElement("div", {
+        role: "radiogroup",
+        className: cn(segmentedControlRootVariants({
+            variant
+        }), fullWidth && "flex w-full", className)
+    }, items.map((item)=>/*#__PURE__*/ __rspack_external_react.createElement(SegmentedControlItemButton, {
+            key: item.id,
+            item: {
+                ...item,
+                disabled: disabled || item.disabled
+            },
+            isActive: value === item.value,
+            onValueChange: changeValue,
+            variant: variant,
+            className: fullWidth ? "flex-1" : void 0
+        })));
+const SegmentedControlPrimitive = (props)=>{
+    const { vm, changeValue } = useSegmentedControl(props);
+    return /*#__PURE__*/ __rspack_external_react.createElement(SegmentedControlRenderer, {
+        ...props,
+        items: vm.items,
+        changeValue: changeValue
+    });
 };
 export { SegmentedControlPrimitive, SegmentedControlRenderer };
 

package/SegmentedControl/primitives/SegmentedControlPrimitive.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","cn","cva","useSegmentedControl","Icon","segmentedControlItemVariants","variants","variant","light","dimmed","ghost","defaultVariants","segmentedControlRootVariants","SegmentedControlItemButton","item","isActive","onValueChange","className","props","createElement","Object","assign","type","role","disabled","onClick","value","icon","size","label","String","color","SegmentedControlRenderer","items","changeValue","map","key","id","SegmentedControlPrimitive","vm"],"sources":["SegmentedControlPrimitive.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { cn, cva, type VariantProps } from \"~/utils.js\";\nimport type {\n    SegmentedControlItemParams,\n    SegmentedControlItemFormatted\n} from \"../domains/index.js\";\nimport { useSegmentedControl } from \"./useSegmentedControl.js\";\nimport { Icon } from \"~/Icon/index.js\";\n\n/**\n * Segmented Control Item Button\n */\nconst segmentedControlItemVariants = cva(\n    [\n        \"inline-flex items-center justify-center whitespace-nowrap transition-colors cursor-pointer relative rounded-md\",\n        \"text-md px-sm-extra py-xs [&>svg]:size-md gap-xs\",\n        \"focus-visible:outline-none focus-visible:ring-md focus-visible:ring-primary-dimmed focus-visible:ring-offset-0\",\n        \"disabled:opacity-50 disabled:pointer-events-none disabled:cursor-not-allowed\"\n    ],\n    {\n        variants: {\n            variant: {\n                light: [\n                    \"text-neutral-strong fill-neutral-xstrong\",\n                    \"data-[state=active]:text-neutral-primary data-[state=active]:fill-neutral-xstrong data-[state=active]:bg-neutral-base/80\",\n                    \"hover:data-[state=inactive]:text-neutral-primary\",\n                    \"hover:data-[state=inactive]:bg-neutral-base/80\",\n                    \"active:data-[state=inactive]:bg-neutral-base/80\"\n                ],\n                dimmed: [\n                    \"text-neutral-strong fill-neutral-xstrong\",\n                    \"data-[state=active]:text-neutral-primary data-[state=active]:fill-neutral-xstrong data-[state=active]:bg-neutral-base/80\",\n                    \"hover:data-[state=inactive]:text-neutral-primary\",\n                    \"hover:data-[state=inactive]:bg-neutral-base/80\",\n                    \"active:data-[state=inactive]:bg-neutral-base/80\"\n                ],\n                ghost: [\n                    \"text-neutral-strong fill-neutral-xstrong\",\n                    \"data-[state=active]:bg-neutral-dark/5\",\n                    \"hover:data-[state=inactive]:bg-neutral-dark/5\",\n                    \"active:data-[state=inactive]:bg-neutral-dark/5\"\n                ]\n            }\n        },\n        defaultVariants: {\n            variant: \"light\"\n        }\n    }\n);\n\nconst segmentedControlRootVariants = cva(\"inline-flex rounded-md p-xxs gap-xs\", {\n    variants: {\n        variant: {\n            light: \"bg-neutral-light\",\n            dimmed: \"bg-neutral-dimmed\",\n            ghost: \"\"\n        }\n    },\n    defaultVariants: {\n        variant: \"light\"\n    }\n});\n\ninterface SegmentedControlItemProps extends Omit<\n    React.ButtonHTMLAttributes<HTMLButtonElement>,\n    \"value\"\n> {\n    item: SegmentedControlItemFormatted;\n    isActive: boolean;\n    onValueChange: (value: string) => void;\n    variant?: VariantProps<typeof segmentedControlItemVariants>[\"variant\"];\n}\n\nconst SegmentedControlItemButton = ({\n    item,\n    isActive,\n    onValueChange,\n    variant,\n    className,\n    ...props\n}: SegmentedControlItemProps) => {\n    return (\n        <button\n            type=\"button\"\n            role=\"radio\"\n            aria-checked={isActive}\n            data-state={isActive ? \"active\" : \"inactive\"}\n            disabled={item.disabled}\n            onClick={() => onValueChange(item.value)}\n            className={cn(segmentedControlItemVariants({ variant }), className)}\n            {...props}\n        >\n            {item.icon && (\n                <Icon\n                    icon={item.icon}\n                    size={\"sm\"}\n                    label={String(item.label)}\n                    color={\"neutral-strong\"}\n                />\n            )}\n            {item.label}\n        </button>\n    );\n};\n\n/**\n * Segmented Control Primitive\n */\ninterface SegmentedControlPrimitiveProps {\n    items: SegmentedControlItemParams[];\n    /**\n     * Callback triggered when the selected value changes.\n     */\n    onChange?: (value: string) => void;\n    /**\n     * The selected value.\n     */\n    value?: string;\n    /**\n     * Visual style variant.\n     */\n    variant?: VariantProps<typeof segmentedControlItemVariants>[\"variant\"];\n    /**\n     * Additional class name.\n     */\n    className?: string;\n    /**\n     * Disabled state for all items.\n     */\n    disabled?: boolean;\n}\n\ninterface SegmentedControlVm {\n    items: SegmentedControlItemFormatted[];\n}\n\ninterface SegmentedControlRendererProps extends SegmentedControlPrimitiveProps {\n    items: SegmentedControlItemFormatted[];\n    changeValue: (value: string) => void;\n}\n\nconst SegmentedControlRenderer = ({\n    items,\n    changeValue,\n    value,\n    variant = \"light\",\n    className,\n    disabled\n}: SegmentedControlRendererProps) => {\n    return (\n        <div role=\"radiogroup\" className={cn(segmentedControlRootVariants({ variant }), className)}>\n            {items.map(item => (\n                <SegmentedControlItemButton\n                    key={item.id}\n                    item={{ ...item, disabled: disabled || item.disabled }}\n                    isActive={value === item.value}\n                    onValueChange={changeValue}\n                    variant={variant}\n                />\n            ))}\n        </div>\n    );\n};\n\n/**\n * Segmented Control Primitive Component\n */\nconst SegmentedControlPrimitive = (props: SegmentedControlPrimitiveProps) => {\n    const { vm, changeValue } = useSegmentedControl(props);\n    return <SegmentedControlRenderer {...props} items={vm.items} changeValue={changeValue} />;\n};\n\nexport {\n    SegmentedControlPrimitive,\n    SegmentedControlRenderer,\n    type SegmentedControlPrimitiveProps,\n    type SegmentedControlVm\n};\n"],"mappings":"AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,EAAE,EAAEC,GAAG;AAKhB,SAASC,mBAAmB;AAC5B,SAASC,IAAI;;AAEb;AACA;AACA;AACA,MAAMC,4BAA4B,GAAGH,GAAG,CACpC,CACI,gHAAgH,EAChH,kDAAkD,EAClD,gHAAgH,EAChH,8EAA8E,CACjF,EACD;EACII,QAAQ,EAAE;IACNC,OAAO,EAAE;MACLC,KAAK,EAAE,CACH,0CAA0C,EAC1C,0HAA0H,EAC1H,kDAAkD,EAClD,gDAAgD,EAChD,iDAAiD,CACpD;MACDC,MAAM,EAAE,CACJ,0CAA0C,EAC1C,0HAA0H,EAC1H,kDAAkD,EAClD,gDAAgD,EAChD,iDAAiD,CACpD;MACDC,KAAK,EAAE,CACH,0CAA0C,EAC1C,uCAAuC,EACvC,+CAA+C,EAC/C,gDAAgD;IAExD;EACJ,CAAC;EACDC,eAAe,EAAE;IACbJ,OAAO,EAAE;EACb;AACJ,CACJ,CAAC;AAED,MAAMK,4BAA4B,GAAGV,GAAG,CAAC,qCAAqC,EAAE;EAC5EI,QAAQ,EAAE;IACNC,OAAO,EAAE;MACLC,KAAK,EAAE,kBAAkB;MACzBC,MAAM,EAAE,mBAAmB;MAC3BC,KAAK,EAAE;IACX;EACJ,CAAC;EACDC,eAAe,EAAE;IACbJ,OAAO,EAAE;EACb;AACJ,CAAC,CAAC;AAYF,MAAMM,0BAA0B,GAAGA,CAAC;EAChCC,IAAI;EACJC,QAAQ;EACRC,aAAa;EACbT,OAAO;EACPU,SAAS;EACT,GAAGC;AACoB,CAAC,KAAK;EAC7B,oBACIlB,KAAA,CAAAmB,aAAA,WAAAC,MAAA,CAAAC,MAAA;IACIC,IAAI,EAAC,QAAQ;IACbC,IAAI,EAAC,OAAO;IACZ,gBAAcR,QAAS;IACvB,cAAYA,QAAQ,GAAG,QAAQ,GAAG,UAAW;IAC7CS,QAAQ,EAAEV,IAAI,CAACU,QAAS;IACxBC,OAAO,EAAEA,CAAA,KAAMT,aAAa,CAACF,IAAI,CAACY,KAAK,CAAE;IACzCT,SAAS,EAAEhB,EAAE,CAACI,4BAA4B,CAAC;MAAEE;IAAQ,CAAC,CAAC,EAAEU,SAAS;EAAE,GAChEC,KAAK,GAERJ,IAAI,CAACa,IAAI,iBACN3B,KAAA,CAAAmB,aAAA,CAACf,IAAI;IACDuB,IAAI,EAAEb,IAAI,CAACa,IAAK;IAChBC,IAAI,EAAE,IAAK;IACXC,KAAK,EAAEC,MAAM,CAAChB,IAAI,CAACe,KAAK,CAAE;IAC1BE,KAAK,EAAE;EAAiB,CAC3B,CACJ,EACAjB,IAAI,CAACe,KACF,CAAC;AAEjB,CAAC;;AAED;AACA;AACA;;AAkCA,MAAMG,wBAAwB,GAAGA,CAAC;EAC9BC,KAAK;EACLC,WAAW;EACXR,KAAK;EACLnB,OAAO,GAAG,OAAO;EACjBU,SAAS;EACTO;AAC2B,CAAC,KAAK;EACjC,oBACIxB,KAAA,CAAAmB,aAAA;IAAKI,IAAI,EAAC,YAAY;IAACN,SAAS,EAAEhB,EAAE,CAACW,4BAA4B,CAAC;MAAEL;IAAQ,CAAC,CAAC,EAAEU,SAAS;EAAE,GACtFgB,KAAK,CAACE,GAAG,CAACrB,IAAI,iBACXd,KAAA,CAAAmB,aAAA,CAACN,0BAA0B;IACvBuB,GAAG,EAAEtB,IAAI,CAACuB,EAAG;IACbvB,IAAI,EAAE;MAAE,GAAGA,IAAI;MAAEU,QAAQ,EAAEA,QAAQ,IAAIV,IAAI,CAACU;IAAS,CAAE;IACvDT,QAAQ,EAAEW,KAAK,KAAKZ,IAAI,CAACY,KAAM;IAC/BV,aAAa,EAAEkB,WAAY;IAC3B3B,OAAO,EAAEA;EAAQ,CACpB,CACJ,CACA,CAAC;AAEd,CAAC;;AAED;AACA;AACA;AACA,MAAM+B,yBAAyB,GAAIpB,KAAqC,IAAK;EACzE,MAAM;IAAEqB,EAAE;IAAEL;EAAY,CAAC,GAAG/B,mBAAmB,CAACe,KAAK,CAAC;EACtD,oBAAOlB,KAAA,CAAAmB,aAAA,CAACa,wBAAwB,EAAAZ,MAAA,CAAAC,MAAA,KAAKH,KAAK;IAAEe,KAAK,EAAEM,EAAE,CAACN,KAAM;IAACC,WAAW,EAAEA;EAAY,EAAE,CAAC;AAC7F,CAAC;AAED,SACII,yBAAyB,EACzBN,wBAAwB","ignoreList":[]}
+{"version":3,"file":"SegmentedControl/primitives/SegmentedControlPrimitive.js","sources":["../../../src/SegmentedControl/primitives/SegmentedControlPrimitive.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { cn, cva, type VariantProps } from \"~/utils.js\";\nimport type {\n    SegmentedControlItemParams,\n    SegmentedControlItemFormatted\n} from \"../domains/index.js\";\nimport { useSegmentedControl } from \"./useSegmentedControl.js\";\nimport { Icon } from \"~/Icon/index.js\";\n\n/**\n * Segmented Control Item Button\n */\nconst segmentedControlItemVariants = cva(\n    [\n        \"inline-flex items-center justify-center whitespace-nowrap transition-colors cursor-pointer relative rounded-md\",\n        \"text-md px-sm-extra py-xs [&>svg]:size-md gap-xs\",\n        \"focus-visible:outline-none focus-visible:ring-md focus-visible:ring-primary-dimmed focus-visible:ring-offset-0\",\n        \"disabled:opacity-50 disabled:pointer-events-none disabled:cursor-not-allowed\"\n    ],\n    {\n        variants: {\n            variant: {\n                light: [\n                    \"text-neutral-strong fill-neutral-xstrong\",\n                    \"data-[state=active]:text-neutral-primary data-[state=active]:fill-neutral-xstrong data-[state=active]:bg-neutral-base/80\",\n                    \"hover:data-[state=inactive]:text-neutral-primary\",\n                    \"hover:data-[state=inactive]:bg-neutral-base/80\",\n                    \"active:data-[state=inactive]:bg-neutral-base/80\"\n                ],\n                dimmed: [\n                    \"text-neutral-strong fill-neutral-xstrong\",\n                    \"data-[state=active]:text-neutral-primary data-[state=active]:fill-neutral-xstrong data-[state=active]:bg-neutral-base/80\",\n                    \"hover:data-[state=inactive]:text-neutral-primary\",\n                    \"hover:data-[state=inactive]:bg-neutral-base/80\",\n                    \"active:data-[state=inactive]:bg-neutral-base/80\"\n                ],\n                ghost: [\n                    \"text-neutral-strong fill-neutral-xstrong\",\n                    \"data-[state=active]:bg-neutral-dark/5\",\n                    \"hover:data-[state=inactive]:bg-neutral-dark/5\",\n                    \"active:data-[state=inactive]:bg-neutral-dark/5\"\n                ]\n            }\n        },\n        defaultVariants: {\n            variant: \"light\"\n        }\n    }\n);\n\nconst segmentedControlRootVariants = cva(\"inline-flex rounded-md p-xxs gap-xs\", {\n    variants: {\n        variant: {\n            light: \"bg-neutral-light\",\n            dimmed: \"bg-neutral-dimmed\",\n            ghost: \"\"\n        }\n    },\n    defaultVariants: {\n        variant: \"light\"\n    }\n});\n\ninterface SegmentedControlItemProps extends Omit<\n    React.ButtonHTMLAttributes<HTMLButtonElement>,\n    \"value\"\n> {\n    item: SegmentedControlItemFormatted;\n    isActive: boolean;\n    onValueChange: (value: string) => void;\n    variant?: VariantProps<typeof segmentedControlItemVariants>[\"variant\"];\n}\n\nconst SegmentedControlItemButton = ({\n    item,\n    isActive,\n    onValueChange,\n    variant,\n    className,\n    ...props\n}: SegmentedControlItemProps) => {\n    return (\n        <button\n            type=\"button\"\n            role=\"radio\"\n            aria-checked={isActive}\n            data-state={isActive ? \"active\" : \"inactive\"}\n            disabled={item.disabled}\n            onClick={() => onValueChange(item.value)}\n            className={cn(segmentedControlItemVariants({ variant }), className)}\n            {...props}\n        >\n            {item.icon && (\n                <Icon\n                    icon={item.icon}\n                    size={\"sm\"}\n                    label={String(item.label)}\n                    color={\"neutral-strong\"}\n                />\n            )}\n            {item.label}\n        </button>\n    );\n};\n\n/**\n * Segmented Control Primitive\n */\ninterface SegmentedControlPrimitiveProps {\n    items: SegmentedControlItemParams[];\n    /**\n     * Callback triggered when the selected value changes.\n     */\n    onChange?: (value: string) => void;\n    /**\n     * The selected value.\n     */\n    value?: string;\n    /**\n     * Visual style variant.\n     */\n    variant?: VariantProps<typeof segmentedControlItemVariants>[\"variant\"];\n    /**\n     * Additional class name.\n     */\n    className?: string;\n    /**\n     * Disabled state for all items.\n     */\n    disabled?: boolean;\n    /**\n     * Stretch the control to fill its container width, with buttons sharing space equally.\n     */\n    fullWidth?: boolean;\n}\n\ninterface SegmentedControlVm {\n    items: SegmentedControlItemFormatted[];\n}\n\ninterface SegmentedControlRendererProps extends SegmentedControlPrimitiveProps {\n    items: SegmentedControlItemFormatted[];\n    changeValue: (value: string) => void;\n}\n\nconst SegmentedControlRenderer = ({\n    items,\n    changeValue,\n    value,\n    variant = \"light\",\n    className,\n    disabled,\n    fullWidth\n}: SegmentedControlRendererProps) => {\n    return (\n        <div\n            role=\"radiogroup\"\n            className={cn(\n                segmentedControlRootVariants({ variant }),\n                fullWidth && \"flex w-full\",\n                className\n            )}\n        >\n            {items.map(item => (\n                <SegmentedControlItemButton\n                    key={item.id}\n                    item={{ ...item, disabled: disabled || item.disabled }}\n                    isActive={value === item.value}\n                    onValueChange={changeValue}\n                    variant={variant}\n                    className={fullWidth ? \"flex-1\" : undefined}\n                />\n            ))}\n        </div>\n    );\n};\n\n/**\n * Segmented Control Primitive Component\n */\nconst SegmentedControlPrimitive = (props: SegmentedControlPrimitiveProps) => {\n    const { vm, changeValue } = useSegmentedControl(props);\n    return <SegmentedControlRenderer {...props} items={vm.items} changeValue={changeValue} />;\n};\n\nexport {\n    SegmentedControlPrimitive,\n    SegmentedControlRenderer,\n    type SegmentedControlPrimitiveProps,\n    type SegmentedControlVm\n};\n"],"names":["segmentedControlItemVariants","cva","segmentedControlRootVariants","SegmentedControlItemButton","item","isActive","onValueChange","variant","className","props","cn","Icon","String","SegmentedControlRenderer","items","changeValue","value","disabled","fullWidth","undefined","SegmentedControlPrimitive","vm","useSegmentedControl"],"mappings":";;;;AAYA,MAAMA,+BAA+BC,IACjC;IACI;IACA;IACA;IACA;CACH,EACD;IACI,UAAU;QACN,SAAS;YACL,OAAO;gBACH;gBACA;gBACA;gBACA;gBACA;aACH;YACD,QAAQ;gBACJ;gBACA;gBACA;gBACA;gBACA;aACH;YACD,OAAO;gBACH;gBACA;gBACA;gBACA;aACH;QACL;IACJ;IACA,iBAAiB;QACb,SAAS;IACb;AACJ;AAGJ,MAAMC,+BAA+BD,IAAI,uCAAuC;IAC5E,UAAU;QACN,SAAS;YACL,OAAO;YACP,QAAQ;YACR,OAAO;QACX;IACJ;IACA,iBAAiB;QACb,SAAS;IACb;AACJ;AAYA,MAAME,6BAA6B,CAAC,EAChCC,IAAI,EACJC,QAAQ,EACRC,aAAa,EACbC,OAAO,EACPC,SAAS,EACT,GAAGC,OACqB,GACjB,WAAP,GACI,sCAAC;QACG,MAAK;QACL,MAAK;QACL,gBAAcJ;QACd,cAAYA,WAAW,WAAW;QAClC,UAAUD,KAAK,QAAQ;QACvB,SAAS,IAAME,cAAcF,KAAK,KAAK;QACvC,WAAWM,GAAGV,6BAA6B;YAAEO;QAAQ,IAAIC;QACxD,GAAGC,KAAK;OAERL,KAAK,IAAI,IAAI,WAAJ,GACN,sCAACO,MAAIA;QACD,MAAMP,KAAK,IAAI;QACf,MAAM;QACN,OAAOQ,OAAOR,KAAK,KAAK;QACxB,OAAO;QAGdA,KAAK,KAAK;AA6CvB,MAAMS,2BAA2B,CAAC,EAC9BC,KAAK,EACLC,WAAW,EACXC,KAAK,EACLT,UAAU,OAAO,EACjBC,SAAS,EACTS,QAAQ,EACRC,SAAS,EACmB,GACrB,WAAP,GACI,sCAAC;QACG,MAAK;QACL,WAAWR,GACPR,6BAA6B;YAAEK;QAAQ,IACvCW,aAAa,eACbV;OAGHM,MAAM,GAAG,CAACV,CAAAA,OAAAA,WAAAA,GACP,sCAACD,4BAA0BA;YACvB,KAAKC,KAAK,EAAE;YACZ,MAAM;gBAAE,GAAGA,IAAI;gBAAE,UAAUa,YAAYb,KAAK,QAAQ;YAAC;YACrD,UAAUY,UAAUZ,KAAK,KAAK;YAC9B,eAAeW;YACf,SAASR;YACT,WAAWW,YAAY,WAAWC;;AAUtD,MAAMC,4BAA4B,CAACX;IAC/B,MAAM,EAAEY,EAAE,EAAEN,WAAW,EAAE,GAAGO,oBAAoBb;IAChD,OAAO,WAAP,GAAO,sCAACI,0BAAwBA;QAAE,GAAGJ,KAAK;QAAE,OAAOY,GAAG,KAAK;QAAE,aAAaN;;AAC9E"}

package/SegmentedControl/primitives/SegmentedControlPrimitive.stories.d.ts

@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from "@storybook/react-webpack5";
+import type { Meta, StoryObj } from "@storybook/react";
 import { SegmentedControlPrimitive } from "./SegmentedControlPrimitive.js";
 declare const meta: Meta<typeof SegmentedControlPrimitive>;
 export default meta;
@@ -11,3 +11,4 @@ export declare const VariantDimmed: Story;
 export declare const VariantGhost: Story;
 export declare const Disabled: Story;
 export declare const PartiallyDisabled: Story;
+export declare const FullWidth: Story;