@webiny/admin-ui 0.0.0-unstable.a4f3e4ea8b → 0.0.0-unstable.a85ef555b2

package/RadioGroup/primitives/RadioGroupPrimitive.js

@@ -7,10 +7,12 @@ const RadioGroupRoot = ({ className, ...props })=>/*#__PURE__*/ __rspack_externa
         className: cn("grid gap-sm-extra py-xs-plus", className),
         ...props
     });
-const RadioGroupRenderer = ({ items, changeValue, value, disabled })=>/*#__PURE__*/ __rspack_external_react.createElement(RadioGroupRoot, {
+const RadioGroupRenderer = ({ items, changeValue, value, disabled, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy })=>/*#__PURE__*/ __rspack_external_react.createElement(RadioGroupRoot, {
         value: value ?? "",
         onValueChange: (value)=>changeValue(value),
-        disabled: disabled
+        disabled: disabled,
+        "aria-label": ariaLabel,
+        "aria-labelledby": ariaLabelledBy
     }, items.map((item)=>/*#__PURE__*/ __rspack_external_react.createElement(Radio, {
             id: item.id,
             value: item.value,

package/RadioGroup/primitives/RadioGroupPrimitive.js.map

@@ -1 +1 @@
-{"version":3,"file":"RadioGroup/primitives/RadioGroupPrimitive.js","sources":["../../../src/RadioGroup/primitives/RadioGroupPrimitive.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { RadioGroup as RadioGroupPrimitives } from \"radix-ui\";\nimport { cn } from \"~/utils.js\";\nimport { Radio } from \"./Radio.js\";\nimport type { RadioItemParams, RadioItemFormatted } from \"../domains/index.js\";\nimport { useRadioGroup } from \"./useRadioGroup.js\";\n\n/**\n * Radio Group Root\n */\nconst RadioGroupRoot = ({ className, ...props }: RadioGroupPrimitives.RadioGroupProps) => {\n    return (\n        <RadioGroupPrimitives.Root\n            className={cn(\"grid gap-sm-extra py-xs-plus\", className)}\n            {...props}\n        />\n    );\n};\n\n/**\n * Radio Group Renderer\n */\ninterface RadioGroupPrimitiveProps extends Omit<\n    RadioGroupPrimitives.RadioGroupProps,\n    \"defaultValue\" | \"onChange\" | \"onValueChange\" | \"value\"\n> {\n    items: RadioItemParams[];\n    /**\n     * Callback triggered when the selected value changes.\n     */\n    onChange?: (value: string) => void;\n    /**\n     * Optional selected item.\n     */\n    value?: string;\n}\n\ninterface RadioGroupVm {\n    items: RadioItemFormatted[];\n}\n\ninterface RadioGroupRendererProps extends Omit<RadioGroupPrimitiveProps, \"onChange\"> {\n    items: RadioItemFormatted[];\n    changeValue: (value: string) => void;\n}\n\nconst RadioGroupRenderer = ({ items, changeValue, value, disabled }: RadioGroupRendererProps) => {\n    return (\n        <RadioGroupRoot\n            value={value ?? \"\"}\n            onValueChange={value => changeValue(value)}\n            disabled={disabled}\n        >\n            {items.map(item => (\n                <Radio\n                    id={item.id}\n                    value={item.value}\n                    key={item.id}\n                    label={item.label}\n                    disabled={item.disabled}\n                />\n            ))}\n        </RadioGroupRoot>\n    );\n};\n\n/**\n * Radio Group Primitive\n */\nconst RadioGroupPrimitive = (props: RadioGroupPrimitiveProps) => {\n    const { vm, changeValue } = useRadioGroup(props);\n    return <RadioGroupRenderer {...props} items={vm.items} changeValue={changeValue} />;\n};\n\n/**\n * @deprecated\n * This component is retained in @webiny/admin-ui and used in  @webiny/ui solely as a compatibility layer.\n * It is marked as deprecated because nesting `Radio` components inside `RadioGroup` is no longer the recommended approach.\n * Instead, we now pass an array of `RadioItemDto` directly to `RadioGroup` for better maintainability.\n */\nconst DeprecatedRadioGroup = RadioGroupRoot;\n\nexport {\n    RadioGroupPrimitive,\n    RadioGroupRenderer,\n    DeprecatedRadioGroup,\n    type RadioGroupPrimitiveProps,\n    type RadioGroupVm\n};\n"],"names":["RadioGroupRoot","className","props","RadioGroupPrimitives","cn","RadioGroupRenderer","items","changeValue","value","disabled","item","Radio","RadioGroupPrimitive","vm","useRadioGroup","DeprecatedRadioGroup"],"mappings":";;;;;AAUA,MAAMA,iBAAiB,CAAC,EAAEC,SAAS,EAAE,GAAGC,OAA6C,GAC1E,WAAP,GACI,sCAACC,WAAAA,IAAyB;QACtB,WAAWC,GAAG,gCAAgCH;QAC7C,GAAGC,KAAK;;AAgCrB,MAAMG,qBAAqB,CAAC,EAAEC,KAAK,EAAEC,WAAW,EAAEC,KAAK,EAAEC,QAAQ,EAA2B,GACjF,WAAP,GACI,sCAACT,gBAAcA;QACX,OAAOQ,SAAS;QAChB,eAAeA,CAAAA,QAASD,YAAYC;QACpC,UAAUC;OAETH,MAAM,GAAG,CAACI,CAAAA,OAAAA,WAAAA,GACP,sCAACC,OAAKA;YACF,IAAID,KAAK,EAAE;YACX,OAAOA,KAAK,KAAK;YACjB,KAAKA,KAAK,EAAE;YACZ,OAAOA,KAAK,KAAK;YACjB,UAAUA,KAAK,QAAQ;;AAU3C,MAAME,sBAAsB,CAACV;IACzB,MAAM,EAAEW,EAAE,EAAEN,WAAW,EAAE,GAAGO,cAAcZ;IAC1C,OAAO,WAAP,GAAO,sCAACG,oBAAkBA;QAAE,GAAGH,KAAK;QAAE,OAAOW,GAAG,KAAK;QAAE,aAAaN;;AACxE;AAQA,MAAMQ,uBAAuBf"}
+{"version":3,"file":"RadioGroup/primitives/RadioGroupPrimitive.js","sources":["../../../src/RadioGroup/primitives/RadioGroupPrimitive.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { RadioGroup as RadioGroupPrimitives } from \"radix-ui\";\nimport { cn } from \"~/utils.js\";\nimport { Radio } from \"./Radio.js\";\nimport type { RadioItemParams, RadioItemFormatted } from \"../domains/index.js\";\nimport { useRadioGroup } from \"./useRadioGroup.js\";\n\n/**\n * Radio Group Root\n */\nconst RadioGroupRoot = ({ className, ...props }: RadioGroupPrimitives.RadioGroupProps) => {\n    return (\n        <RadioGroupPrimitives.Root\n            className={cn(\"grid gap-sm-extra py-xs-plus\", className)}\n            {...props}\n        />\n    );\n};\n\n/**\n * Radio Group Renderer\n */\ninterface RadioGroupPrimitiveProps extends Omit<\n    RadioGroupPrimitives.RadioGroupProps,\n    \"defaultValue\" | \"onChange\" | \"onValueChange\" | \"value\"\n> {\n    items: RadioItemParams[];\n    /**\n     * Callback triggered when the selected value changes.\n     */\n    onChange?: (value: string) => void;\n    /**\n     * Optional selected item.\n     */\n    value?: string;\n}\n\ninterface RadioGroupVm {\n    items: RadioItemFormatted[];\n}\n\ninterface RadioGroupRendererProps extends Omit<RadioGroupPrimitiveProps, \"onChange\"> {\n    items: RadioItemFormatted[];\n    changeValue: (value: string) => void;\n}\n\nconst RadioGroupRenderer = ({\n    items,\n    changeValue,\n    value,\n    disabled,\n    \"aria-label\": ariaLabel,\n    \"aria-labelledby\": ariaLabelledBy\n}: RadioGroupRendererProps) => {\n    return (\n        <RadioGroupRoot\n            value={value ?? \"\"}\n            onValueChange={value => changeValue(value)}\n            disabled={disabled}\n            aria-label={ariaLabel}\n            aria-labelledby={ariaLabelledBy}\n        >\n            {items.map(item => (\n                <Radio\n                    id={item.id}\n                    value={item.value}\n                    key={item.id}\n                    label={item.label}\n                    disabled={item.disabled}\n                />\n            ))}\n        </RadioGroupRoot>\n    );\n};\n\n/**\n * Radio Group Primitive\n */\nconst RadioGroupPrimitive = (props: RadioGroupPrimitiveProps) => {\n    const { vm, changeValue } = useRadioGroup(props);\n    return <RadioGroupRenderer {...props} items={vm.items} changeValue={changeValue} />;\n};\n\n/**\n * @deprecated\n * This component is retained in @webiny/admin-ui and used in  @webiny/ui solely as a compatibility layer.\n * It is marked as deprecated because nesting `Radio` components inside `RadioGroup` is no longer the recommended approach.\n * Instead, we now pass an array of `RadioItemDto` directly to `RadioGroup` for better maintainability.\n */\nconst DeprecatedRadioGroup = RadioGroupRoot;\n\nexport {\n    RadioGroupPrimitive,\n    RadioGroupRenderer,\n    DeprecatedRadioGroup,\n    type RadioGroupPrimitiveProps,\n    type RadioGroupVm\n};\n"],"names":["RadioGroupRoot","className","props","RadioGroupPrimitives","cn","RadioGroupRenderer","items","changeValue","value","disabled","ariaLabel","ariaLabelledBy","item","Radio","RadioGroupPrimitive","vm","useRadioGroup","DeprecatedRadioGroup"],"mappings":";;;;;AAUA,MAAMA,iBAAiB,CAAC,EAAEC,SAAS,EAAE,GAAGC,OAA6C,GAC1E,WAAP,GACI,sCAACC,WAAAA,IAAyB;QACtB,WAAWC,GAAG,gCAAgCH;QAC7C,GAAGC,KAAK;;AAgCrB,MAAMG,qBAAqB,CAAC,EACxBC,KAAK,EACLC,WAAW,EACXC,KAAK,EACLC,QAAQ,EACR,cAAcC,SAAS,EACvB,mBAAmBC,cAAc,EACX,GACf,WAAP,GACI,sCAACX,gBAAcA;QACX,OAAOQ,SAAS;QAChB,eAAeA,CAAAA,QAASD,YAAYC;QACpC,UAAUC;QACV,cAAYC;QACZ,mBAAiBC;OAEhBL,MAAM,GAAG,CAACM,CAAAA,OAAAA,WAAAA,GACP,sCAACC,OAAKA;YACF,IAAID,KAAK,EAAE;YACX,OAAOA,KAAK,KAAK;YACjB,KAAKA,KAAK,EAAE;YACZ,OAAOA,KAAK,KAAK;YACjB,UAAUA,KAAK,QAAQ;;AAU3C,MAAME,sBAAsB,CAACZ;IACzB,MAAM,EAAEa,EAAE,EAAER,WAAW,EAAE,GAAGS,cAAcd;IAC1C,OAAO,WAAP,GAAO,sCAACG,oBAAkBA;QAAE,GAAGH,KAAK;QAAE,OAAOa,GAAG,KAAK;QAAE,aAAaR;;AACxE;AAQA,MAAMU,uBAAuBjB"}

package/RadioGroup/primitives/presenters/RadioGroupPresenter.js

@@ -1,4 +1,4 @@
-import { makeAutoObservable } from "mobx";
+import { makeAutoObservable, observableRef } from "mobx";
 import { RadioItem } from "../../domains/RadioItem.js";
 import { RadioItemFormatter } from "../../domains/RadioItemFormatter.js";
 class RadioGroupPresenter {
@@ -10,7 +10,9 @@ class RadioGroupPresenter {
         this.changeValue = (value)=>{
             this.params?.onValueChange?.(value);
         };
-        makeAutoObservable(this);
+        makeAutoObservable(this, {
+            params: observableRef
+        });
     }
     get vm() {
         return {

package/RadioGroup/primitives/presenters/RadioGroupPresenter.js.map

@@ -1 +1 @@
-{"version":3,"file":"RadioGroup/primitives/presenters/RadioGroupPresenter.js","sources":["../../../../src/RadioGroup/primitives/presenters/RadioGroupPresenter.ts"],"sourcesContent":["import { makeAutoObservable } from \"mobx\";\nimport type { RadioGroupVm } from \"../RadioGroupPrimitive.js\";\nimport { RadioItem } from \"~/RadioGroup/domains/RadioItem.js\";\nimport { RadioItemFormatter } from \"~/RadioGroup/domains/RadioItemFormatter.js\";\nimport type { RadioItemParams } from \"~/RadioGroup/domains/RadioItemParams.js\";\n\ninterface RadioGroupPresenterParams<TValue = string> {\n    items: RadioItemParams[];\n    onValueChange?: (value: TValue) => void;\n}\n\ninterface IRadioGroupPresenter<TValue = string> {\n    vm: RadioGroupVm;\n    init: (props: RadioGroupPresenterParams<TValue>) => void;\n    changeValue: (value: TValue) => void;\n}\n\nclass RadioGroupPresenter<TValue = string> implements IRadioGroupPresenter<TValue> {\n    private params?: RadioGroupPresenterParams<TValue> = undefined;\n\n    constructor() {\n        makeAutoObservable(this);\n    }\n\n    public init = (params: RadioGroupPresenterParams<TValue>) => {\n        this.params = params;\n    };\n\n    get vm() {\n        return {\n            items: this.getRadioItems().map(item => RadioItemFormatter.format(item))\n        };\n    }\n\n    public changeValue = (value: TValue) => {\n        this.params?.onValueChange?.(value);\n    };\n\n    private getRadioItems() {\n        if (!this.params?.items) {\n            return [];\n        }\n\n        return this.params.items.map(item => RadioItem.create(item));\n    }\n}\n\nexport { RadioGroupPresenter, type RadioGroupPresenterParams, type IRadioGroupPresenter };\n"],"names":["RadioGroupPresenter","undefined","params","value","makeAutoObservable","item","RadioItemFormatter","RadioItem"],"mappings":";;;AAiBA,MAAMA;IAGF,aAAc;aAFN,MAAM,GAAuCC;aAM9C,IAAI,GAAG,CAACC;YACX,IAAI,CAAC,MAAM,GAAGA;QAClB;aAQO,WAAW,GAAG,CAACC;YAClB,IAAI,CAAC,MAAM,EAAE,gBAAgBA;QACjC;QAfIC,mBAAmB,IAAI;IAC3B;IAMA,IAAI,KAAK;QACL,OAAO;YACH,OAAO,IAAI,CAAC,aAAa,GAAG,GAAG,CAACC,CAAAA,OAAQC,mBAAmB,MAAM,CAACD;QACtE;IACJ;IAMQ,gBAAgB;QACpB,IAAI,CAAC,IAAI,CAAC,MAAM,EAAE,OACd,OAAO,EAAE;QAGb,OAAO,IAAI,CAAC,MAAM,CAAC,KAAK,CAAC,GAAG,CAACA,CAAAA,OAAQE,UAAU,MAAM,CAACF;IAC1D;AACJ"}
+{"version":3,"file":"RadioGroup/primitives/presenters/RadioGroupPresenter.js","sources":["../../../../src/RadioGroup/primitives/presenters/RadioGroupPresenter.ts"],"sourcesContent":["import { makeAutoObservable } from \"mobx\";\nimport { observableRef } from \"mobx\";\nimport type { RadioGroupVm } from \"../RadioGroupPrimitive.js\";\nimport { RadioItem } from \"~/RadioGroup/domains/RadioItem.js\";\nimport { RadioItemFormatter } from \"~/RadioGroup/domains/RadioItemFormatter.js\";\nimport type { RadioItemParams } from \"~/RadioGroup/domains/RadioItemParams.js\";\n\ninterface RadioGroupPresenterParams<TValue = string> {\n    items: RadioItemParams[];\n    onValueChange?: (value: TValue) => void;\n}\n\ninterface IRadioGroupPresenter<TValue = string> {\n    vm: RadioGroupVm;\n    init: (props: RadioGroupPresenterParams<TValue>) => void;\n    changeValue: (value: TValue) => void;\n}\n\nclass RadioGroupPresenter<TValue = string> implements IRadioGroupPresenter<TValue> {\n    private params?: RadioGroupPresenterParams<TValue> = undefined;\n\n    constructor() {\n        makeAutoObservable<RadioGroupPresenter<TValue>, \"params\">(this, {\n            params: observableRef\n        });\n    }\n\n    public init = (params: RadioGroupPresenterParams<TValue>) => {\n        this.params = params;\n    };\n\n    get vm() {\n        return {\n            items: this.getRadioItems().map(item => RadioItemFormatter.format(item))\n        };\n    }\n\n    public changeValue = (value: TValue) => {\n        this.params?.onValueChange?.(value);\n    };\n\n    private getRadioItems() {\n        if (!this.params?.items) {\n            return [];\n        }\n\n        return this.params.items.map(item => RadioItem.create(item));\n    }\n}\n\nexport { RadioGroupPresenter, type RadioGroupPresenterParams, type IRadioGroupPresenter };\n"],"names":["RadioGroupPresenter","undefined","params","value","makeAutoObservable","observableRef","item","RadioItemFormatter","RadioItem"],"mappings":";;;AAkBA,MAAMA;IAGF,aAAc;aAFN,MAAM,GAAuCC;aAQ9C,IAAI,GAAG,CAACC;YACX,IAAI,CAAC,MAAM,GAAGA;QAClB;aAQO,WAAW,GAAG,CAACC;YAClB,IAAI,CAAC,MAAM,EAAE,gBAAgBA;QACjC;QAjBIC,mBAA0D,IAAI,EAAE;YAC5D,QAAQC;QACZ;IACJ;IAMA,IAAI,KAAK;QACL,OAAO;YACH,OAAO,IAAI,CAAC,aAAa,GAAG,GAAG,CAACC,CAAAA,OAAQC,mBAAmB,MAAM,CAACD;QACtE;IACJ;IAMQ,gBAAgB;QACpB,IAAI,CAAC,IAAI,CAAC,MAAM,EAAE,OACd,OAAO,EAAE;QAGb,OAAO,IAAI,CAAC,MAAM,CAAC,KAAK,CAAC,GAAG,CAACA,CAAAA,OAAQE,UAAU,MAAM,CAACF;IAC1D;AACJ"}

package/RadioGroup/primitives/presenters/RadioGroupPresenter.jsxLabel.test.d.ts

@@ -0,0 +1 @@
+export {};

package/RadioGroup/primitives/presenters/RadioGroupPresenter.jsxLabel.test.js

@@ -0,0 +1,88 @@
+import react from "react";
+import { describe, expect, it, vi } from "vitest";
+import { RadioGroupPresenter } from "./RadioGroupPresenter.js";
+const createCyclicLabel = ()=>{
+    const fiber = {
+        tag: 0
+    };
+    fiber.return = fiber;
+    fiber.child = fiber;
+    const element = react.createElement("span", null, "Card");
+    return {
+        ...element,
+        _owner: fiber
+    };
+};
+describe("RadioGroupPresenter with a React node label", ()=>{
+    it("keeps the label by reference and does not overflow the stack", ()=>{
+        const label = createCyclicLabel();
+        const presenter = new RadioGroupPresenter();
+        const init = ()=>{
+            presenter.init({
+                onValueChange: vi.fn(),
+                items: [
+                    {
+                        value: "a",
+                        label
+                    },
+                    {
+                        value: "b",
+                        label: "Plain"
+                    }
+                ]
+            });
+        };
+        expect(init).not.toThrow();
+        expect(presenter.vm.items).toHaveLength(2);
+        expect(presenter.vm.items[0].label).toBe(label);
+        expect(presenter.vm.items[1].label).toBe("Plain");
+    });
+    it("still reports a value change", ()=>{
+        const onValueChange = vi.fn();
+        const label = createCyclicLabel();
+        const presenter = new RadioGroupPresenter();
+        presenter.init({
+            onValueChange,
+            items: [
+                {
+                    value: "a",
+                    label
+                }
+            ]
+        });
+        presenter.changeValue("a");
+        expect(onValueChange).toHaveBeenCalledWith("a");
+    });
+    it("recomputes the view model when init is called again", ()=>{
+        const first = createCyclicLabel();
+        const second = createCyclicLabel();
+        const presenter = new RadioGroupPresenter();
+        presenter.init({
+            items: [
+                {
+                    value: "a",
+                    label: first
+                }
+            ]
+        });
+        presenter.init({
+            items: [
+                {
+                    value: "a",
+                    label: first
+                },
+                {
+                    value: "b",
+                    label: second
+                }
+            ]
+        });
+        expect(presenter.vm.items.map((item)=>item.value)).toEqual([
+            "a",
+            "b"
+        ]);
+        expect(presenter.vm.items[1].label).toBe(second);
+    });
+});
+
+//# sourceMappingURL=RadioGroupPresenter.jsxLabel.test.js.map

package/RadioGroup/primitives/presenters/RadioGroupPresenter.jsxLabel.test.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"RadioGroup/primitives/presenters/RadioGroupPresenter.jsxLabel.test.js","sources":["../../../../src/RadioGroup/primitives/presenters/RadioGroupPresenter.jsxLabel.test.ts"],"sourcesContent":["import React from \"react\";\nimport { describe } from \"vitest\";\nimport { expect } from \"vitest\";\nimport { it } from \"vitest\";\nimport { vi } from \"vitest\";\nimport { RadioGroupPresenter } from \"./RadioGroupPresenter.js\";\n\n/*\n * A React element created during a render points at its owner fiber, and a fiber points back at\n * its parent and children. A deep observable walks that whole cycle and overflows the stack.\n */\nconst createCyclicLabel = () => {\n    const fiber: Record<string, unknown> = { tag: 0 };\n    fiber.return = fiber;\n    fiber.child = fiber;\n    const element = React.createElement(\"span\", null, \"Card\");\n    return { ...element, _owner: fiber };\n};\n\ndescribe(\"RadioGroupPresenter with a React node label\", () => {\n    it(\"keeps the label by reference and does not overflow the stack\", () => {\n        const label = createCyclicLabel();\n        const presenter = new RadioGroupPresenter();\n\n        const init = () => {\n            presenter.init({\n                onValueChange: vi.fn(),\n                items: [\n                    { value: \"a\", label },\n                    { value: \"b\", label: \"Plain\" }\n                ]\n            });\n        };\n\n        expect(init).not.toThrow();\n        expect(presenter.vm.items).toHaveLength(2);\n        expect(presenter.vm.items[0].label).toBe(label);\n        expect(presenter.vm.items[1].label).toBe(\"Plain\");\n    });\n\n    it(\"still reports a value change\", () => {\n        const onValueChange = vi.fn();\n        const label = createCyclicLabel();\n        const presenter = new RadioGroupPresenter();\n        presenter.init({ onValueChange, items: [{ value: \"a\", label }] });\n\n        presenter.changeValue(\"a\");\n\n        expect(onValueChange).toHaveBeenCalledWith(\"a\");\n    });\n\n    it(\"recomputes the view model when init is called again\", () => {\n        const first = createCyclicLabel();\n        const second = createCyclicLabel();\n        const presenter = new RadioGroupPresenter();\n        presenter.init({ items: [{ value: \"a\", label: first }] });\n        presenter.init({\n            items: [\n                { value: \"a\", label: first },\n                { value: \"b\", label: second }\n            ]\n        });\n\n        expect(presenter.vm.items.map(item => item.value)).toEqual([\"a\", \"b\"]);\n        expect(presenter.vm.items[1].label).toBe(second);\n    });\n});\n"],"names":["createCyclicLabel","fiber","element","React","describe","it","label","presenter","RadioGroupPresenter","init","vi","expect","onValueChange","first","second","item"],"mappings":";;;AAWA,MAAMA,oBAAoB;IACtB,MAAMC,QAAiC;QAAE,KAAK;IAAE;IAChDA,MAAM,MAAM,GAAGA;IACfA,MAAM,KAAK,GAAGA;IACd,MAAMC,UAAUC,MAAAA,aAAmB,CAAC,QAAQ,MAAM;IAClD,OAAO;QAAE,GAAGD,OAAO;QAAE,QAAQD;IAAM;AACvC;AAEAG,SAAS,+CAA+C;IACpDC,GAAG,gEAAgE;QAC/D,MAAMC,QAAQN;QACd,MAAMO,YAAY,IAAIC;QAEtB,MAAMC,OAAO;YACTF,UAAU,IAAI,CAAC;gBACX,eAAeG,GAAG,EAAE;gBACpB,OAAO;oBACH;wBAAE,OAAO;wBAAKJ;oBAAM;oBACpB;wBAAE,OAAO;wBAAK,OAAO;oBAAQ;iBAChC;YACL;QACJ;QAEAK,OAAOF,MAAM,GAAG,CAAC,OAAO;QACxBE,OAAOJ,UAAU,EAAE,CAAC,KAAK,EAAE,YAAY,CAAC;QACxCI,OAAOJ,UAAU,EAAE,CAAC,KAAK,CAAC,EAAE,CAAC,KAAK,EAAE,IAAI,CAACD;QACzCK,OAAOJ,UAAU,EAAE,CAAC,KAAK,CAAC,EAAE,CAAC,KAAK,EAAE,IAAI,CAAC;IAC7C;IAEAF,GAAG,gCAAgC;QAC/B,MAAMO,gBAAgBF,GAAG,EAAE;QAC3B,MAAMJ,QAAQN;QACd,MAAMO,YAAY,IAAIC;QACtBD,UAAU,IAAI,CAAC;YAAEK;YAAe,OAAO;gBAAC;oBAAE,OAAO;oBAAKN;gBAAM;aAAE;QAAC;QAE/DC,UAAU,WAAW,CAAC;QAEtBI,OAAOC,eAAe,oBAAoB,CAAC;IAC/C;IAEAP,GAAG,uDAAuD;QACtD,MAAMQ,QAAQb;QACd,MAAMc,SAASd;QACf,MAAMO,YAAY,IAAIC;QACtBD,UAAU,IAAI,CAAC;YAAE,OAAO;gBAAC;oBAAE,OAAO;oBAAK,OAAOM;gBAAM;aAAE;QAAC;QACvDN,UAAU,IAAI,CAAC;YACX,OAAO;gBACH;oBAAE,OAAO;oBAAK,OAAOM;gBAAM;gBAC3B;oBAAE,OAAO;oBAAK,OAAOC;gBAAO;aAC/B;QACL;QAEAH,OAAOJ,UAAU,EAAE,CAAC,KAAK,CAAC,GAAG,CAACQ,CAAAA,OAAQA,KAAK,KAAK,GAAG,OAAO,CAAC;YAAC;YAAK;SAAI;QACrEJ,OAAOJ,UAAU,EAAE,CAAC,KAAK,CAAC,EAAE,CAAC,KAAK,EAAE,IAAI,CAACO;IAC7C;AACJ"}

package/ScrollArea/ScrollArea.d.ts

@@ -13,7 +13,21 @@ export interface ScrollPosition {
 interface ScrollAreaProps extends Omit<React.ComponentProps<typeof ScrollAreaPrimitive.Root>, "onScroll"> {
     onScrollPositionChange?: (position: ScrollPosition) => void;
     onScroll?: (position: ScrollPosition) => void;
+    /**
+     * Classes for the scrolling element itself. Put the height limit here when the area has to grow
+     * with its content up to a maximum, instead of filling a parent of a known height.
+     */
+    viewportClassName?: string;
+    /**
+     * Native scroll handler for the scrolling element, for callers that need the event itself.
+     * `onScroll` reports positions instead.
+     */
+    onViewportScroll?: React.UIEventHandler<HTMLDivElement>;
+    /**
+     * Ref to the scrolling element, for callers that scroll it themselves.
+     */
+    viewportRef?: React.Ref<HTMLDivElement>;
 }
-declare function ScrollArea({ className, children, onScrollPositionChange, onScroll, ...props }: ScrollAreaProps): React.JSX.Element;
-declare function ScrollBar({ className, orientation, ...props }: React.ComponentProps<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>): React.JSX.Element;
+declare function ScrollArea({ className, children, onScrollPositionChange, onScroll, viewportClassName, onViewportScroll, viewportRef: externalViewportRef, type, ...props }: ScrollAreaProps): React.JSX.Element;
+declare function ScrollBar({ className, orientation, onMouseDown, ...props }: React.ComponentProps<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>): React.JSX.Element;
 export { ScrollArea, ScrollBar };

package/ScrollArea/ScrollArea.js

@@ -1,8 +1,15 @@
 import { cn } from "../utils.js";
 import * as __rspack_external_react from "react";
 import * as __rspack_external__radix_ui_react_scroll_area_bdec1136 from "@radix-ui/react-scroll-area";
-function ScrollArea({ className, children, onScrollPositionChange, onScroll, ...props }) {
+function ScrollArea({ className, children, onScrollPositionChange, onScroll, viewportClassName, onViewportScroll, viewportRef: externalViewportRef, type = "auto", ...props }) {
     const viewportRef = __rspack_external_react.useRef(null);
+    const setViewportRef = __rspack_external_react.useCallback((element)=>{
+        viewportRef.current = element;
+        if ("function" == typeof externalViewportRef) externalViewportRef(element);
+        else if (externalViewportRef) externalViewportRef.current = element;
+    }, [
+        externalViewportRef
+    ]);
     __rspack_external_react.useEffect(()=>{
         const viewport = viewportRef.current;
         if (!viewport || !onScrollPositionChange && !onScroll) return;
@@ -30,19 +37,26 @@ function ScrollArea({ className, children, onScrollPositionChange, onScroll, ...
     ]);
     return /*#__PURE__*/ __rspack_external_react.createElement(__rspack_external__radix_ui_react_scroll_area_bdec1136.Root, {
         "data-slot": "scroll-area",
+        type: type,
         className: cn("relative", className),
         ...props
     }, /*#__PURE__*/ __rspack_external_react.createElement(__rspack_external__radix_ui_react_scroll_area_bdec1136.Viewport, {
-        ref: viewportRef,
+        ref: setViewportRef,
         "data-slot": "scroll-area-viewport",
-        className: "focus-visible:ring-ring/50 size-full rounded-[inherit] transition-[color,box-shadow] outline-none focus-visible:ring-[3px] focus-visible:outline-1"
+        onScroll: onViewportScroll,
+        className: cn("focus-visible:ring-ring/50 size-full rounded-[inherit] transition-[color,box-shadow] outline-none focus-visible:ring-[3px] focus-visible:outline-1", viewportClassName)
     }, children), /*#__PURE__*/ __rspack_external_react.createElement(ScrollBar, null), /*#__PURE__*/ __rspack_external_react.createElement(__rspack_external__radix_ui_react_scroll_area_bdec1136.Corner, null));
 }
-function ScrollBar({ className, orientation = "vertical", ...props }) {
+function ScrollBar({ className, orientation = "vertical", onMouseDown, ...props }) {
+    const handleMouseDown = (event)=>{
+        onMouseDown?.(event);
+        event.preventDefault();
+    };
     return /*#__PURE__*/ __rspack_external_react.createElement(__rspack_external__radix_ui_react_scroll_area_bdec1136.ScrollAreaScrollbar, {
         "data-slot": "scroll-area-scrollbar",
         orientation: orientation,
-        className: cn("flex touch-none transition-colors select-none", "vertical" === orientation && "h-full w-[8px] border-l border-l-transparent", "horizontal" === orientation && "h-[8px] flex-col border-t border-t-transparent", className),
+        onMouseDown: handleMouseDown,
+        className: cn("flex touch-none transition-colors select-none", "vertical" === orientation && "h-full w-[10px] p-[2px]", "horizontal" === orientation && "h-[10px] flex-col p-[2px]", className),
         ...props
     }, /*#__PURE__*/ __rspack_external_react.createElement(__rspack_external__radix_ui_react_scroll_area_bdec1136.ScrollAreaThumb, {
         "data-slot": "scroll-area-thumb",

package/ScrollArea/ScrollArea.js.map

@@ -1 +1 @@
-{"version":3,"file":"ScrollArea/ScrollArea.js","sources":["../../src/ScrollArea/ScrollArea.tsx"],"sourcesContent":["import * as React from \"react\";\nimport * as ScrollAreaPrimitive from \"@radix-ui/react-scroll-area\";\nimport { cn } from \"~/utils.js\";\n\nexport interface ScrollPosition {\n    top: number;\n    left: number;\n    scrollTop: number;\n    scrollLeft: number;\n    scrollHeight: number;\n    scrollWidth: number;\n    clientHeight: number;\n    clientWidth: number;\n}\n\ninterface ScrollAreaProps extends Omit<\n    React.ComponentProps<typeof ScrollAreaPrimitive.Root>,\n    \"onScroll\"\n> {\n    onScrollPositionChange?: (position: ScrollPosition) => void;\n    onScroll?: (position: ScrollPosition) => void;\n}\n\nfunction ScrollArea({\n    className,\n    children,\n    onScrollPositionChange,\n    onScroll,\n    ...props\n}: ScrollAreaProps) {\n    const viewportRef = React.useRef<HTMLDivElement>(null);\n\n    React.useEffect(() => {\n        const viewport = viewportRef.current;\n        if (!viewport || (!onScrollPositionChange && !onScroll)) {\n            return;\n        }\n\n        // The Viewport component itself is the scrollable element.\n        const handleScroll = () => {\n            const { scrollTop, scrollLeft, scrollHeight, scrollWidth, clientHeight, clientWidth } =\n                viewport;\n\n            const position: ScrollPosition = {\n                top: scrollHeight > clientHeight ? scrollTop / (scrollHeight - clientHeight) : 0,\n                left: scrollWidth > clientWidth ? scrollLeft / (scrollWidth - clientWidth) : 0,\n                scrollTop,\n                scrollLeft,\n                scrollHeight,\n                scrollWidth,\n                clientHeight,\n                clientWidth\n            };\n\n            onScrollPositionChange?.(position);\n            onScroll?.(position);\n        };\n\n        // Call handleScroll initially to provide initial position.\n        handleScroll();\n\n        viewport.addEventListener(\"scroll\", handleScroll);\n        return () => viewport.removeEventListener(\"scroll\", handleScroll);\n    }, [onScrollPositionChange, onScroll]);\n\n    return (\n        <ScrollAreaPrimitive.Root\n            data-slot=\"scroll-area\"\n            className={cn(\"relative\", className)}\n            {...props}\n        >\n            <ScrollAreaPrimitive.Viewport\n                ref={viewportRef}\n                data-slot=\"scroll-area-viewport\"\n                className=\"focus-visible:ring-ring/50 size-full rounded-[inherit] transition-[color,box-shadow] outline-none focus-visible:ring-[3px] focus-visible:outline-1\"\n            >\n                {children}\n            </ScrollAreaPrimitive.Viewport>\n            <ScrollBar />\n            <ScrollAreaPrimitive.Corner />\n        </ScrollAreaPrimitive.Root>\n    );\n}\n\nfunction ScrollBar({\n    className,\n    orientation = \"vertical\",\n    ...props\n}: React.ComponentProps<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>) {\n    return (\n        <ScrollAreaPrimitive.ScrollAreaScrollbar\n            data-slot=\"scroll-area-scrollbar\"\n            orientation={orientation}\n            className={cn(\n                \"flex touch-none transition-colors select-none\",\n                orientation === \"vertical\" && \"h-full w-[8px] border-l border-l-transparent\",\n                orientation === \"horizontal\" && \"h-[8px] flex-col border-t border-t-transparent\",\n                className\n            )}\n            {...props}\n        >\n            <ScrollAreaPrimitive.ScrollAreaThumb\n                data-slot=\"scroll-area-thumb\"\n                className=\"bg-neutral-strong/70 relative flex-1 rounded-full\"\n            />\n        </ScrollAreaPrimitive.ScrollAreaScrollbar>\n    );\n}\n\nexport { ScrollArea, ScrollBar };\n"],"names":["ScrollArea","className","children","onScrollPositionChange","onScroll","props","viewportRef","React","viewport","handleScroll","scrollTop","scrollLeft","scrollHeight","scrollWidth","clientHeight","clientWidth","position","ScrollAreaPrimitive","cn","ScrollBar","orientation"],"mappings":";;;AAuBA,SAASA,WAAW,EAChBC,SAAS,EACTC,QAAQ,EACRC,sBAAsB,EACtBC,QAAQ,EACR,GAAGC,OACW;IACd,MAAMC,cAAcC,wBAAAA,MAAY,CAAiB;IAEjDA,wBAAAA,SAAe,CAAC;QACZ,MAAMC,WAAWF,YAAY,OAAO;QACpC,IAAI,CAACE,YAAa,CAACL,0BAA0B,CAACC,UAC1C;QAIJ,MAAMK,eAAe;YACjB,MAAM,EAAEC,SAAS,EAAEC,UAAU,EAAEC,YAAY,EAAEC,WAAW,EAAEC,YAAY,EAAEC,WAAW,EAAE,GACjFP;YAEJ,MAAMQ,WAA2B;gBAC7B,KAAKJ,eAAeE,eAAeJ,YAAaE,CAAAA,eAAeE,YAAW,IAAK;gBAC/E,MAAMD,cAAcE,cAAcJ,aAAcE,CAAAA,cAAcE,WAAU,IAAK;gBAC7EL;gBACAC;gBACAC;gBACAC;gBACAC;gBACAC;YACJ;YAEAZ,yBAAyBa;YACzBZ,WAAWY;QACf;QAGAP;QAEAD,SAAS,gBAAgB,CAAC,UAAUC;QACpC,OAAO,IAAMD,SAAS,mBAAmB,CAAC,UAAUC;IACxD,GAAG;QAACN;QAAwBC;KAAS;IAErC,OAAO,WAAP,GACI,sCAACa,uDAAAA,IAAwB;QACrB,aAAU;QACV,WAAWC,GAAG,YAAYjB;QACzB,GAAGI,KAAK;qBAET,sCAACY,uDAAAA,QAA4B;QACzB,KAAKX;QACL,aAAU;QACV,WAAU;OAETJ,WAAAA,WAAAA,GAEL,sCAACiB,WAASA,OAAAA,WAAAA,GACV,sCAACF,uDAAAA,MAA0B;AAGvC;AAEA,SAASE,UAAU,EACflB,SAAS,EACTmB,cAAc,UAAU,EACxB,GAAGf,OACgE;IACnE,OAAO,WAAP,GACI,sCAACY,uDAAAA,mBAAuC;QACpC,aAAU;QACV,aAAaG;QACb,WAAWF,GACP,iDACAE,AAAgB,eAAhBA,eAA8B,gDAC9BA,AAAgB,iBAAhBA,eAAgC,kDAChCnB;QAEH,GAAGI,KAAK;qBAET,sCAACY,uDAAAA,eAAmC;QAChC,aAAU;QACV,WAAU;;AAI1B"}
+{"version":3,"file":"ScrollArea/ScrollArea.js","sources":["../../src/ScrollArea/ScrollArea.tsx"],"sourcesContent":["import * as React from \"react\";\nimport * as ScrollAreaPrimitive from \"@radix-ui/react-scroll-area\";\nimport { cn } from \"~/utils.js\";\n\nexport interface ScrollPosition {\n    top: number;\n    left: number;\n    scrollTop: number;\n    scrollLeft: number;\n    scrollHeight: number;\n    scrollWidth: number;\n    clientHeight: number;\n    clientWidth: number;\n}\n\ninterface ScrollAreaProps extends Omit<\n    React.ComponentProps<typeof ScrollAreaPrimitive.Root>,\n    \"onScroll\"\n> {\n    onScrollPositionChange?: (position: ScrollPosition) => void;\n    onScroll?: (position: ScrollPosition) => void;\n    /**\n     * Classes for the scrolling element itself. Put the height limit here when the area has to grow\n     * with its content up to a maximum, instead of filling a parent of a known height.\n     */\n    viewportClassName?: string;\n    /**\n     * Native scroll handler for the scrolling element, for callers that need the event itself.\n     * `onScroll` reports positions instead.\n     */\n    onViewportScroll?: React.UIEventHandler<HTMLDivElement>;\n    /**\n     * Ref to the scrolling element, for callers that scroll it themselves.\n     */\n    viewportRef?: React.Ref<HTMLDivElement>;\n}\n\nfunction ScrollArea({\n    className,\n    children,\n    onScrollPositionChange,\n    onScroll,\n    viewportClassName,\n    onViewportScroll,\n    viewportRef: externalViewportRef,\n    /*\n     * Radix would only show the scrollbar once the pointer is inside. Showing it whenever there is\n     * more content is the same rule the rest of the admin follows, a Select included.\n     */\n    type = \"auto\",\n    ...props\n}: ScrollAreaProps) {\n    const viewportRef = React.useRef<HTMLDivElement | null>(null);\n\n    // The internal ref drives the scroll listener below; a caller's ref gets the same element.\n    const setViewportRef = React.useCallback(\n        (element: HTMLDivElement | null) => {\n            viewportRef.current = element;\n            if (typeof externalViewportRef === \"function\") {\n                externalViewportRef(element);\n            } else if (externalViewportRef) {\n                (externalViewportRef as React.MutableRefObject<HTMLDivElement | null>).current =\n                    element;\n            }\n        },\n        [externalViewportRef]\n    );\n\n    React.useEffect(() => {\n        const viewport = viewportRef.current;\n        if (!viewport || (!onScrollPositionChange && !onScroll)) {\n            return;\n        }\n\n        // The Viewport component itself is the scrollable element.\n        const handleScroll = () => {\n            const { scrollTop, scrollLeft, scrollHeight, scrollWidth, clientHeight, clientWidth } =\n                viewport;\n\n            const position: ScrollPosition = {\n                top: scrollHeight > clientHeight ? scrollTop / (scrollHeight - clientHeight) : 0,\n                left: scrollWidth > clientWidth ? scrollLeft / (scrollWidth - clientWidth) : 0,\n                scrollTop,\n                scrollLeft,\n                scrollHeight,\n                scrollWidth,\n                clientHeight,\n                clientWidth\n            };\n\n            onScrollPositionChange?.(position);\n            onScroll?.(position);\n        };\n\n        // Call handleScroll initially to provide initial position.\n        handleScroll();\n\n        viewport.addEventListener(\"scroll\", handleScroll);\n        return () => viewport.removeEventListener(\"scroll\", handleScroll);\n    }, [onScrollPositionChange, onScroll]);\n\n    return (\n        <ScrollAreaPrimitive.Root\n            data-slot=\"scroll-area\"\n            type={type}\n            className={cn(\"relative\", className)}\n            {...props}\n        >\n            <ScrollAreaPrimitive.Viewport\n                ref={setViewportRef}\n                data-slot=\"scroll-area-viewport\"\n                onScroll={onViewportScroll}\n                className={cn(\n                    \"focus-visible:ring-ring/50 size-full rounded-[inherit] transition-[color,box-shadow] outline-none focus-visible:ring-[3px] focus-visible:outline-1\",\n                    viewportClassName\n                )}\n            >\n                {children}\n            </ScrollAreaPrimitive.Viewport>\n            <ScrollBar />\n            <ScrollAreaPrimitive.Corner />\n        </ScrollAreaPrimitive.Root>\n    );\n}\n\nfunction ScrollBar({\n    className,\n    orientation = \"vertical\",\n    onMouseDown,\n    ...props\n}: React.ComponentProps<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>) {\n    const handleMouseDown = (event: React.MouseEvent<HTMLDivElement>) => {\n        onMouseDown?.(event);\n\n        /*\n         * Grabbing a scrollbar must not move focus. An autocomplete closes its list the moment its\n         * input blurs, so without this, dragging the thumb dismisses the list under the pointer.\n         */\n        event.preventDefault();\n    };\n\n    return (\n        <ScrollAreaPrimitive.ScrollAreaScrollbar\n            data-slot=\"scroll-area-scrollbar\"\n            orientation={orientation}\n            onMouseDown={handleMouseDown}\n            className={cn(\n                \"flex touch-none transition-colors select-none\",\n                orientation === \"vertical\" && \"h-full w-[10px] p-[2px]\",\n                orientation === \"horizontal\" && \"h-[10px] flex-col p-[2px]\",\n                className\n            )}\n            {...props}\n        >\n            <ScrollAreaPrimitive.ScrollAreaThumb\n                data-slot=\"scroll-area-thumb\"\n                className=\"bg-neutral-strong/70 relative flex-1 rounded-full\"\n            />\n        </ScrollAreaPrimitive.ScrollAreaScrollbar>\n    );\n}\n\nexport { ScrollArea, ScrollBar };\n"],"names":["ScrollArea","className","children","onScrollPositionChange","onScroll","viewportClassName","onViewportScroll","externalViewportRef","type","props","viewportRef","React","setViewportRef","element","viewport","handleScroll","scrollTop","scrollLeft","scrollHeight","scrollWidth","clientHeight","clientWidth","position","ScrollAreaPrimitive","cn","ScrollBar","orientation","onMouseDown","handleMouseDown","event"],"mappings":";;;AAqCA,SAASA,WAAW,EAChBC,SAAS,EACTC,QAAQ,EACRC,sBAAsB,EACtBC,QAAQ,EACRC,iBAAiB,EACjBC,gBAAgB,EAChB,aAAaC,mBAAmB,EAKhCC,OAAO,MAAM,EACb,GAAGC,OACW;IACd,MAAMC,cAAcC,wBAAAA,MAAY,CAAwB;IAGxD,MAAMC,iBAAiBD,wBAAAA,WAAiB,CACpC,CAACE;QACGH,YAAY,OAAO,GAAGG;QACtB,IAAI,AAA+B,cAA/B,OAAON,qBACPA,oBAAoBM;aACjB,IAAIN,qBACNA,oBAAsE,OAAO,GAC1EM;IAEZ,GACA;QAACN;KAAoB;IAGzBI,wBAAAA,SAAe,CAAC;QACZ,MAAMG,WAAWJ,YAAY,OAAO;QACpC,IAAI,CAACI,YAAa,CAACX,0BAA0B,CAACC,UAC1C;QAIJ,MAAMW,eAAe;YACjB,MAAM,EAAEC,SAAS,EAAEC,UAAU,EAAEC,YAAY,EAAEC,WAAW,EAAEC,YAAY,EAAEC,WAAW,EAAE,GACjFP;YAEJ,MAAMQ,WAA2B;gBAC7B,KAAKJ,eAAeE,eAAeJ,YAAaE,CAAAA,eAAeE,YAAW,IAAK;gBAC/E,MAAMD,cAAcE,cAAcJ,aAAcE,CAAAA,cAAcE,WAAU,IAAK;gBAC7EL;gBACAC;gBACAC;gBACAC;gBACAC;gBACAC;YACJ;YAEAlB,yBAAyBmB;YACzBlB,WAAWkB;QACf;QAGAP;QAEAD,SAAS,gBAAgB,CAAC,UAAUC;QACpC,OAAO,IAAMD,SAAS,mBAAmB,CAAC,UAAUC;IACxD,GAAG;QAACZ;QAAwBC;KAAS;IAErC,OAAO,WAAP,GACI,sCAACmB,uDAAAA,IAAwB;QACrB,aAAU;QACV,MAAMf;QACN,WAAWgB,GAAG,YAAYvB;QACzB,GAAGQ,KAAK;qBAET,sCAACc,uDAAAA,QAA4B;QACzB,KAAKX;QACL,aAAU;QACV,UAAUN;QACV,WAAWkB,GACP,sJACAnB;OAGHH,WAAAA,WAAAA,GAEL,sCAACuB,WAASA,OAAAA,WAAAA,GACV,sCAACF,uDAAAA,MAA0B;AAGvC;AAEA,SAASE,UAAU,EACfxB,SAAS,EACTyB,cAAc,UAAU,EACxBC,WAAW,EACX,GAAGlB,OACgE;IACnE,MAAMmB,kBAAkB,CAACC;QACrBF,cAAcE;QAMdA,MAAM,cAAc;IACxB;IAEA,OAAO,WAAP,GACI,sCAACN,uDAAAA,mBAAuC;QACpC,aAAU;QACV,aAAaG;QACb,aAAaE;QACb,WAAWJ,GACP,iDACAE,AAAgB,eAAhBA,eAA8B,2BAC9BA,AAAgB,iBAAhBA,eAAgC,6BAChCzB;QAEH,GAAGQ,KAAK;qBAET,sCAACc,uDAAAA,eAAmC;QAChC,aAAU;QACV,WAAU;;AAI1B"}

package/Select/primitives/components/SelectContent.js

@@ -1,22 +1,20 @@
 import { Select } from "radix-ui";
 import { cn } from "../../../utils.js";
-import { SelectScrollUpButton } from "./SelectScrollUpButton.js";
-import { SelectScrollDownButton } from "./SelectScrollDownButton.js";
 import * as __rspack_external_react from "react";
 const SelectContent = ({ className, children, ...props })=>/*#__PURE__*/ __rspack_external_react.createElement(Select.Portal, null, /*#__PURE__*/ __rspack_external_react.createElement(Select.Content, {
         className: cn([
-            "relative z-popover max-h-[250px] min-w-56 shadow-lg py-sm overflow-hidden rounded-sm border-sm border-neutral-muted bg-neutral-base text-neutral-strong",
+            "relative z-popover max-h-[250px] min-w-56 shadow-lg overflow-hidden rounded-sm border-sm border-neutral-muted bg-neutral-base text-neutral-strong",
             "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
             "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1"
         ], className),
         position: "popper",
         ...props
-    }, /*#__PURE__*/ __rspack_external_react.createElement(SelectScrollUpButton, null), /*#__PURE__*/ __rspack_external_react.createElement(Select.Viewport, {
+    }, /*#__PURE__*/ __rspack_external_react.createElement(Select.Viewport, {
         className: cn([
-            "py-xs",
+            "py-sm",
             "h-(--radix-select-trigger-height) w-full min-w-(--radix-select-trigger-width)"
         ])
-    }, children), /*#__PURE__*/ __rspack_external_react.createElement(SelectScrollDownButton, null)));
+    }, children)));
 export { SelectContent };
 
 //# sourceMappingURL=SelectContent.js.map

package/Select/primitives/components/SelectContent.js.map

@@ -1 +1 @@
-{"version":3,"file":"Select/primitives/components/SelectContent.js","sources":["../../../../src/Select/primitives/components/SelectContent.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { Select as SelectPrimitives } from \"radix-ui\";\nimport { cn } from \"~/utils.js\";\nimport { SelectScrollUpButton } from \"./SelectScrollUpButton.js\";\nimport { SelectScrollDownButton } from \"./SelectScrollDownButton.js\";\n\ntype SelectContentProps = SelectPrimitives.SelectContentProps;\n\nconst SelectContent = ({ className, children, ...props }: SelectContentProps) => (\n    <SelectPrimitives.Portal>\n        <SelectPrimitives.Content\n            className={cn(\n                [\n                    \"relative z-popover max-h-[250px] min-w-56 shadow-lg py-sm overflow-hidden rounded-sm border-sm border-neutral-muted bg-neutral-base text-neutral-strong\",\n                    \"data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2\",\n                    \"data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1\"\n                ],\n                className\n            )}\n            position={\"popper\"}\n            {...props}\n        >\n            <SelectScrollUpButton />\n            <SelectPrimitives.Viewport\n                className={cn([\n                    \"py-xs\",\n                    \"h-(--radix-select-trigger-height) w-full min-w-(--radix-select-trigger-width)\"\n                ])}\n            >\n                {children}\n            </SelectPrimitives.Viewport>\n            <SelectScrollDownButton />\n        </SelectPrimitives.Content>\n    </SelectPrimitives.Portal>\n);\n\nexport { SelectContent, type SelectContentProps };\n"],"names":["SelectContent","className","children","props","SelectPrimitives","cn","SelectScrollUpButton","SelectScrollDownButton"],"mappings":";;;;;AAQA,MAAMA,gBAAgB,CAAC,EAAEC,SAAS,EAAEC,QAAQ,EAAE,GAAGC,OAA2B,iBACxE,sCAACC,OAAAA,MAAuB,sBACpB,sCAACA,OAAAA,OAAwB;QACrB,WAAWC,GACP;YACI;YACA;YACA;SACH,EACDJ;QAEJ,UAAU;QACT,GAAGE,KAAK;qBAET,sCAACG,sBAAoBA,OAAAA,WAAAA,GACrB,sCAACF,OAAAA,QAAyB;QACtB,WAAWC,GAAG;YACV;YACA;SACH;OAEAH,WAAAA,WAAAA,GAEL,sCAACK,wBAAsBA"}
+{"version":3,"file":"Select/primitives/components/SelectContent.js","sources":["../../../../src/Select/primitives/components/SelectContent.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { Select as SelectPrimitives } from \"radix-ui\";\nimport { cn } from \"~/utils.js\";\n\ntype SelectContentProps = SelectPrimitives.SelectContentProps;\n\nconst SelectContent = ({ className, children, ...props }: SelectContentProps) => (\n    <SelectPrimitives.Portal>\n        <SelectPrimitives.Content\n            className={cn(\n                [\n                    \"relative z-popover max-h-[250px] min-w-56 shadow-lg overflow-hidden rounded-sm border-sm border-neutral-muted bg-neutral-base text-neutral-strong\",\n                    \"data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2\",\n                    \"data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1\"\n                ],\n                className\n            )}\n            position={\"popper\"}\n            {...props}\n        >\n            {/* Two things keep this scrollbar in line with the one in the autocomplete popovers.\n                No scroll buttons, because they come and go with the scroll position, taking the\n                viewport height and the size of the thumb with them. And the padding on the\n                viewport rather than around it, so the scrollbar runs the full height of the list. */}\n            <SelectPrimitives.Viewport\n                className={cn([\n                    \"py-sm\",\n                    \"h-(--radix-select-trigger-height) w-full min-w-(--radix-select-trigger-width)\"\n                ])}\n            >\n                {children}\n            </SelectPrimitives.Viewport>\n        </SelectPrimitives.Content>\n    </SelectPrimitives.Portal>\n);\n\nexport { SelectContent, type SelectContentProps };\n"],"names":["SelectContent","className","children","props","SelectPrimitives","cn"],"mappings":";;;AAMA,MAAMA,gBAAgB,CAAC,EAAEC,SAAS,EAAEC,QAAQ,EAAE,GAAGC,OAA2B,iBACxE,sCAACC,OAAAA,MAAuB,sBACpB,sCAACA,OAAAA,OAAwB;QACrB,WAAWC,GACP;YACI;YACA;YACA;SACH,EACDJ;QAEJ,UAAU;QACT,GAAGE,KAAK;qBAMT,sCAACC,OAAAA,QAAyB;QACtB,WAAWC,GAAG;YACV;YACA;SACH;OAEAH"}

package/Switch/Switch.d.ts

@@ -1,8 +1,8 @@
 import React from "react";
 import type { SwitchPrimitiveProps } from "./primitives/index.js";
-import type { FormComponentProps } from "../FormComponent/index.js";
-type SwitchProps = SwitchPrimitiveProps & FormComponentProps;
-declare const DecoratableSwitch: ({ note, validation, ...props }: SwitchProps) => React.JSX.Element;
+import { type FormComponentProps } from "../FormComponent/index.js";
+type SwitchProps = Omit<SwitchPrimitiveProps, "label"> & FormComponentProps;
+declare const DecoratableSwitch: ({ label, description, hint, note, required, disabled, validation, ...props }: SwitchProps) => React.JSX.Element;
 declare const Switch: typeof DecoratableSwitch & {
     original: typeof DecoratableSwitch;
     originalName: string;
@@ -22,4 +22,4 @@ declare const Switch: typeof DecoratableSwitch & {
         displayName: string;
     }>) => (props: unknown) => React.JSX.Element;
 };
-export { Switch };
+export { Switch, type SwitchProps };

package/Switch/Switch.js

@@ -1,24 +1,38 @@
 import react, { useMemo } from "react";
-import { makeDecoratable } from "../utils.js";
+import { generateId, makeDecoratable } from "../utils.js";
 import { SwitchPrimitive } from "./primitives/index.js";
-import { FormComponentErrorMessage, FormComponentNote } from "../FormComponent/index.js";
-const DecoratableSwitch = ({ note, validation, ...props })=>{
+import { FormComponentDescription, FormComponentErrorMessage, FormComponentLabel, FormComponentNote } from "../FormComponent/index.js";
+const DecoratableSwitch = ({ label, description, hint, note, required, disabled, validation, ...props })=>{
     const { isValid: validationIsValid, message: validationMessage } = validation || {};
+    const id = useMemo(()=>generateId(props.id), [
+        props.id
+    ]);
     const invalid = useMemo(()=>false === validationIsValid, [
         validationIsValid
     ]);
     return /*#__PURE__*/ react.createElement("div", {
         className: "w-full"
-    }, /*#__PURE__*/ react.createElement(SwitchPrimitive, {
+    }, /*#__PURE__*/ react.createElement(FormComponentLabel, {
+        htmlFor: id,
+        text: label,
+        required: required,
+        disabled: disabled,
+        invalid: invalid,
+        hint: hint
+    }), /*#__PURE__*/ react.createElement(FormComponentDescription, {
+        text: description,
+        disabled: disabled
+    }), /*#__PURE__*/ react.createElement(SwitchPrimitive, {
         ...props,
-        disabled: props.disabled
+        id: id,
+        disabled: disabled
     }), /*#__PURE__*/ react.createElement(FormComponentErrorMessage, {
         text: validationMessage,
         invalid: invalid,
-        disabled: props.disabled
+        disabled: disabled
     }), /*#__PURE__*/ react.createElement(FormComponentNote, {
         text: note,
-        disabled: props.disabled
+        disabled: disabled
     }));
 };
 const Switch = makeDecoratable("Switch", DecoratableSwitch);

package/Switch/Switch.js.map

@@ -1 +1 @@
-{"version":3,"file":"Switch/Switch.js","sources":["../../src/Switch/Switch.tsx"],"sourcesContent":["import React, { useMemo } from \"react\";\nimport { makeDecoratable } from \"~/utils.js\";\nimport type { SwitchPrimitiveProps } from \"./primitives/index.js\";\nimport { SwitchPrimitive } from \"./primitives/index.js\";\nimport type { FormComponentProps } from \"~/FormComponent/index.js\";\nimport { FormComponentErrorMessage, FormComponentNote } from \"~/FormComponent/index.js\";\n\ntype SwitchProps = SwitchPrimitiveProps & FormComponentProps;\n\nconst DecoratableSwitch = ({ note, validation, ...props }: SwitchProps) => {\n    const { isValid: validationIsValid, message: validationMessage } = validation || {};\n    const invalid = useMemo(() => validationIsValid === false, [validationIsValid]);\n\n    return (\n        <div className={\"w-full\"}>\n            <SwitchPrimitive {...props} disabled={props.disabled} />\n            <FormComponentErrorMessage\n                text={validationMessage}\n                invalid={invalid}\n                disabled={props.disabled}\n            />\n            <FormComponentNote text={note} disabled={props.disabled} />\n        </div>\n    );\n};\n\nconst Switch = makeDecoratable(\"Switch\", DecoratableSwitch);\n\nexport { Switch };\n"],"names":["DecoratableSwitch","note","validation","props","validationIsValid","validationMessage","invalid","useMemo","SwitchPrimitive","FormComponentErrorMessage","FormComponentNote","Switch","makeDecoratable"],"mappings":";;;;AASA,MAAMA,oBAAoB,CAAC,EAAEC,IAAI,EAAEC,UAAU,EAAE,GAAGC,OAAoB;IAClE,MAAM,EAAE,SAASC,iBAAiB,EAAE,SAASC,iBAAiB,EAAE,GAAGH,cAAc,CAAC;IAClF,MAAMI,UAAUC,QAAQ,IAAMH,AAAsB,UAAtBA,mBAA6B;QAACA;KAAkB;IAE9E,OAAO,WAAP,GACI,oBAAC;QAAI,WAAW;qBACZ,oBAACI,iBAAeA;QAAE,GAAGL,KAAK;QAAE,UAAUA,MAAM,QAAQ;sBACpD,oBAACM,2BAAyBA;QACtB,MAAMJ;QACN,SAASC;QACT,UAAUH,MAAM,QAAQ;sBAE5B,oBAACO,mBAAiBA;QAAC,MAAMT;QAAM,UAAUE,MAAM,QAAQ;;AAGnE;AAEA,MAAMQ,SAASC,gBAAgB,UAAUZ"}
+{"version":3,"file":"Switch/Switch.js","sources":["../../src/Switch/Switch.tsx"],"sourcesContent":["import React, { useMemo } from \"react\";\nimport { generateId, makeDecoratable } from \"~/utils.js\";\nimport type { SwitchPrimitiveProps } from \"./primitives/index.js\";\nimport { SwitchPrimitive } from \"./primitives/index.js\";\nimport {\n    FormComponentDescription,\n    FormComponentErrorMessage,\n    FormComponentLabel,\n    FormComponentNote,\n    type FormComponentProps\n} from \"~/FormComponent/index.js\";\n\ntype SwitchProps = Omit<SwitchPrimitiveProps, \"label\"> & FormComponentProps;\n\nconst DecoratableSwitch = ({\n    label,\n    description,\n    hint,\n    note,\n    required,\n    disabled,\n    validation,\n    ...props\n}: SwitchProps) => {\n    const { isValid: validationIsValid, message: validationMessage } = validation || {};\n    const id = useMemo(() => generateId(props.id), [props.id]);\n    const invalid = useMemo(() => validationIsValid === false, [validationIsValid]);\n\n    return (\n        <div className={\"w-full\"}>\n            <FormComponentLabel\n                htmlFor={id}\n                text={label}\n                required={required}\n                disabled={disabled}\n                invalid={invalid}\n                hint={hint}\n            />\n            <FormComponentDescription text={description} disabled={disabled} />\n            <SwitchPrimitive {...props} id={id} disabled={disabled} />\n            <FormComponentErrorMessage\n                text={validationMessage}\n                invalid={invalid}\n                disabled={disabled}\n            />\n            <FormComponentNote text={note} disabled={disabled} />\n        </div>\n    );\n};\n\nconst Switch = makeDecoratable(\"Switch\", DecoratableSwitch);\n\nexport { Switch, type SwitchProps };\n"],"names":["DecoratableSwitch","label","description","hint","note","required","disabled","validation","props","validationIsValid","validationMessage","id","useMemo","generateId","invalid","FormComponentLabel","FormComponentDescription","SwitchPrimitive","FormComponentErrorMessage","FormComponentNote","Switch","makeDecoratable"],"mappings":";;;;AAcA,MAAMA,oBAAoB,CAAC,EACvBC,KAAK,EACLC,WAAW,EACXC,IAAI,EACJC,IAAI,EACJC,QAAQ,EACRC,QAAQ,EACRC,UAAU,EACV,GAAGC,OACO;IACV,MAAM,EAAE,SAASC,iBAAiB,EAAE,SAASC,iBAAiB,EAAE,GAAGH,cAAc,CAAC;IAClF,MAAMI,KAAKC,QAAQ,IAAMC,WAAWL,MAAM,EAAE,GAAG;QAACA,MAAM,EAAE;KAAC;IACzD,MAAMM,UAAUF,QAAQ,IAAMH,AAAsB,UAAtBA,mBAA6B;QAACA;KAAkB;IAE9E,OAAO,WAAP,GACI,oBAAC;QAAI,WAAW;qBACZ,oBAACM,oBAAkBA;QACf,SAASJ;QACT,MAAMV;QACN,UAAUI;QACV,UAAUC;QACV,SAASQ;QACT,MAAMX;sBAEV,oBAACa,0BAAwBA;QAAC,MAAMd;QAAa,UAAUI;sBACvD,oBAACW,iBAAeA;QAAE,GAAGT,KAAK;QAAE,IAAIG;QAAI,UAAUL;sBAC9C,oBAACY,2BAAyBA;QACtB,MAAMR;QACN,SAASI;QACT,UAAUR;sBAEd,oBAACa,mBAAiBA;QAAC,MAAMf;QAAM,UAAUE;;AAGrD;AAEA,MAAMc,SAASC,gBAAgB,UAAUrB"}

package/Switch/domains/SwitchItemDto.d.ts

@@ -1,7 +1,7 @@
 import type React from "react";
 export interface SwitchItemDto {
     id?: string;
-    label: React.ReactNode;
+    label?: React.ReactNode;
     value?: number | string | boolean;
     checked?: boolean;
     disabled?: boolean;

package/Switch/primitives/SwitchPrimitive.js

@@ -18,7 +18,7 @@ const SwitchRenderer = ({ id, label, changeChecked, description, className, labe
         className: cn(switchVariants({
             labelPosition
         }), className)
-    }, /*#__PURE__*/ __rspack_external_react.createElement(Label, {
+    }, label && /*#__PURE__*/ __rspack_external_react.createElement(Label, {
         htmlFor: id,
         text: label,
         disabled: disabled,
@@ -30,10 +30,11 @@ const SwitchRenderer = ({ id, label, changeChecked, description, className, labe
         id: id,
         checked: checked,
         className: cn([
-            "peer inline-flex h-md w-[26px] mt-xxs shrink-0 cursor-pointer items-center rounded-xxl border-sm transition-colors",
+            "peer inline-flex h-md w-[26px] shrink-0 cursor-pointer items-center rounded-xxl border-sm transition-colors",
             "border-transparent data-[state=checked]:bg-secondary data-[state=unchecked]:bg-neutral-strong",
             "focus-visible:outline-none focus-visible:border-success focus-visible:ring-lg focus-visible:ring-primary-dimmed",
-            "disabled:cursor-not-allowed disabled:bg-neutral-muted disabled:data-[state=checked]:bg-neutral-muted"
+            "disabled:cursor-not-allowed disabled:bg-neutral-muted disabled:data-[state=checked]:bg-neutral-muted",
+            label && "mt-xxs"
         ]),
         disabled: disabled,
         onCheckedChange: changeChecked

package/Switch/primitives/SwitchPrimitive.js.map

@@ -1 +1 @@
-{"version":3,"file":"Switch/primitives/SwitchPrimitive.js","sources":["../../../src/Switch/primitives/SwitchPrimitive.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { Switch as SwitchPrimitives } from \"radix-ui\";\nimport { cn, cva, makeDecoratable, type VariantProps } from \"~/utils.js\";\nimport { Label } from \"~/Label/index.js\";\nimport { useSwitch } from \"./useSwitch.js\";\nimport type { SwitchItemDto, SwitchItemFormatted } from \"../domains/index.js\";\n\n/**\n * Switch Renderer\n */\n\nconst switchVariants = cva(\"inline-flex items-start space-x-sm\", {\n    variants: {\n        labelPosition: {\n            start: \"\",\n            end: \"flex-row-reverse space-x-sm-extra space-x-reverse\"\n        }\n    },\n    defaultVariants: {\n        labelPosition: \"start\"\n    }\n});\n\ntype SwitchPrimitiveProps = Omit<\n    SwitchPrimitives.SwitchProps,\n    \"defaultChecked\" | \"onCheckedChange\" | \"onChange\"\n> &\n    VariantProps<typeof switchVariants> &\n    SwitchItemDto & {\n        onChange?: (checked: boolean) => void;\n    };\n\ntype SwitchPrimitivVm = {\n    item?: SwitchItemFormatted;\n};\n\ntype SwitchRendererProps = Omit<SwitchPrimitiveProps, \"onCheckedChange\"> &\n    NonNullable<SwitchPrimitivVm[\"item\"]> & {\n        changeChecked: (checked: boolean) => void;\n        description?: React.ReactNode;\n    };\n\nconst SwitchRenderer = ({\n    id,\n    label,\n    changeChecked,\n    description,\n    className,\n    labelPosition,\n    disabled,\n    required,\n    checked\n}: SwitchRendererProps) => {\n    return (\n        <div className={cn(switchVariants({ labelPosition }), className)}>\n            <Label\n                htmlFor={id}\n                text={label}\n                disabled={disabled}\n                required={required}\n                hint={description}\n                weight={\"light\"}\n                className={\"text-md\"}\n            />\n            <SwitchPrimitives.Root\n                id={id}\n                checked={checked}\n                className={cn([\n                    \"peer inline-flex h-md w-[26px] mt-xxs shrink-0 cursor-pointer items-center rounded-xxl border-sm transition-colors\",\n                    \"border-transparent data-[state=checked]:bg-secondary data-[state=unchecked]:bg-neutral-strong\",\n                    \"focus-visible:outline-none focus-visible:border-success focus-visible:ring-lg focus-visible:ring-primary-dimmed\",\n                    \"disabled:cursor-not-allowed disabled:bg-neutral-muted disabled:data-[state=checked]:bg-neutral-muted\"\n                ])}\n                disabled={disabled}\n                onCheckedChange={changeChecked}\n            >\n                <SwitchPrimitives.Thumb\n                    className={cn(\n                        \"pointer-events-none block h-sm-plus w-sm-plus rounded-xxl bg-neutral-base shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-sm-extra data-[state=unchecked]:translate-x-xxs\"\n                    )}\n                />\n            </SwitchPrimitives.Root>\n        </div>\n    );\n};\n\n/**\n * Switch\n */\nconst DecoratableSwitchPrimitive = (props: SwitchPrimitiveProps) => {\n    const { vm, changeChecked } = useSwitch(props);\n\n    if (!vm.item) {\n        return null;\n    }\n\n    return <SwitchRenderer {...props} {...vm.item} changeChecked={changeChecked} />;\n};\nconst SwitchPrimitive = makeDecoratable(\"SwitchPrimitive\", DecoratableSwitchPrimitive);\n\nexport { SwitchPrimitive, type SwitchPrimitiveProps, type SwitchPrimitivVm };\n"],"names":["switchVariants","cva","SwitchRenderer","id","label","changeChecked","description","className","labelPosition","disabled","required","checked","cn","Label","SwitchPrimitives","DecoratableSwitchPrimitive","props","vm","useSwitch","SwitchPrimitive","makeDecoratable"],"mappings":";;;;;AAWA,MAAMA,iBAAiBC,IAAI,sCAAsC;IAC7D,UAAU;QACN,eAAe;YACX,OAAO;YACP,KAAK;QACT;IACJ;IACA,iBAAiB;QACb,eAAe;IACnB;AACJ;AAqBA,MAAMC,iBAAiB,CAAC,EACpBC,EAAE,EACFC,KAAK,EACLC,aAAa,EACbC,WAAW,EACXC,SAAS,EACTC,aAAa,EACbC,QAAQ,EACRC,QAAQ,EACRC,OAAO,EACW,GACX,WAAP,GACI,sCAAC;QAAI,WAAWC,GAAGZ,eAAe;YAAEQ;QAAc,IAAID;qBAClD,sCAACM,OAAKA;QACF,SAASV;QACT,MAAMC;QACN,UAAUK;QACV,UAAUC;QACV,MAAMJ;QACN,QAAQ;QACR,WAAW;sBAEf,sCAACQ,OAAAA,IAAqB;QAClB,IAAIX;QACJ,SAASQ;QACT,WAAWC,GAAG;YACV;YACA;YACA;YACA;SACH;QACD,UAAUH;QACV,iBAAiBJ;qBAEjB,sCAACS,OAAAA,KAAsB;QACnB,WAAWF,GACP;;AAWxB,MAAMG,6BAA6B,CAACC;IAChC,MAAM,EAAEC,EAAE,EAAEZ,aAAa,EAAE,GAAGa,UAAUF;IAExC,IAAI,CAACC,GAAG,IAAI,EACR,OAAO;IAGX,OAAO,WAAP,GAAO,sCAACf,gBAAcA;QAAE,GAAGc,KAAK;QAAG,GAAGC,GAAG,IAAI;QAAE,eAAeZ;;AAClE;AACA,MAAMc,kBAAkBC,gBAAgB,mBAAmBL"}
+{"version":3,"file":"Switch/primitives/SwitchPrimitive.js","sources":["../../../src/Switch/primitives/SwitchPrimitive.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { Switch as SwitchPrimitives } from \"radix-ui\";\nimport { cn, cva, makeDecoratable, type VariantProps } from \"~/utils.js\";\nimport { Label } from \"~/Label/index.js\";\nimport { useSwitch } from \"./useSwitch.js\";\nimport type { SwitchItemDto, SwitchItemFormatted } from \"../domains/index.js\";\n\n/**\n * Switch Renderer\n */\n\nconst switchVariants = cva(\"inline-flex items-start space-x-sm\", {\n    variants: {\n        labelPosition: {\n            start: \"\",\n            end: \"flex-row-reverse space-x-sm-extra space-x-reverse\"\n        }\n    },\n    defaultVariants: {\n        labelPosition: \"start\"\n    }\n});\n\ntype SwitchPrimitiveProps = Omit<\n    SwitchPrimitives.SwitchProps,\n    \"defaultChecked\" | \"onCheckedChange\" | \"onChange\"\n> &\n    VariantProps<typeof switchVariants> &\n    SwitchItemDto & {\n        onChange?: (checked: boolean) => void;\n    };\n\ntype SwitchPrimitivVm = {\n    item?: SwitchItemFormatted;\n};\n\ntype SwitchRendererProps = Omit<SwitchPrimitiveProps, \"onCheckedChange\"> &\n    NonNullable<SwitchPrimitivVm[\"item\"]> & {\n        changeChecked: (checked: boolean) => void;\n        description?: React.ReactNode;\n    };\n\nconst SwitchRenderer = ({\n    id,\n    label,\n    changeChecked,\n    description,\n    className,\n    labelPosition,\n    disabled,\n    required,\n    checked\n}: SwitchRendererProps) => {\n    return (\n        <div className={cn(switchVariants({ labelPosition }), className)}>\n            {label && (\n                <Label\n                    htmlFor={id}\n                    text={label}\n                    disabled={disabled}\n                    required={required}\n                    hint={description}\n                    weight={\"light\"}\n                    className={\"text-md\"}\n                />\n            )}\n            <SwitchPrimitives.Root\n                id={id}\n                checked={checked}\n                className={cn([\n                    \"peer inline-flex h-md w-[26px] shrink-0 cursor-pointer items-center rounded-xxl border-sm transition-colors\",\n                    \"border-transparent data-[state=checked]:bg-secondary data-[state=unchecked]:bg-neutral-strong\",\n                    \"focus-visible:outline-none focus-visible:border-success focus-visible:ring-lg focus-visible:ring-primary-dimmed\",\n                    \"disabled:cursor-not-allowed disabled:bg-neutral-muted disabled:data-[state=checked]:bg-neutral-muted\",\n                    // Nudges the switch down to line up with the inline label's text.\n                    label && \"mt-xxs\"\n                ])}\n                disabled={disabled}\n                onCheckedChange={changeChecked}\n            >\n                <SwitchPrimitives.Thumb\n                    className={cn(\n                        \"pointer-events-none block h-sm-plus w-sm-plus rounded-xxl bg-neutral-base shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-sm-extra data-[state=unchecked]:translate-x-xxs\"\n                    )}\n                />\n            </SwitchPrimitives.Root>\n        </div>\n    );\n};\n\n/**\n * Switch\n */\nconst DecoratableSwitchPrimitive = (props: SwitchPrimitiveProps) => {\n    const { vm, changeChecked } = useSwitch(props);\n\n    if (!vm.item) {\n        return null;\n    }\n\n    return <SwitchRenderer {...props} {...vm.item} changeChecked={changeChecked} />;\n};\nconst SwitchPrimitive = makeDecoratable(\"SwitchPrimitive\", DecoratableSwitchPrimitive);\n\nexport { SwitchPrimitive, type SwitchPrimitiveProps, type SwitchPrimitivVm };\n"],"names":["switchVariants","cva","SwitchRenderer","id","label","changeChecked","description","className","labelPosition","disabled","required","checked","cn","Label","SwitchPrimitives","DecoratableSwitchPrimitive","props","vm","useSwitch","SwitchPrimitive","makeDecoratable"],"mappings":";;;;;AAWA,MAAMA,iBAAiBC,IAAI,sCAAsC;IAC7D,UAAU;QACN,eAAe;YACX,OAAO;YACP,KAAK;QACT;IACJ;IACA,iBAAiB;QACb,eAAe;IACnB;AACJ;AAqBA,MAAMC,iBAAiB,CAAC,EACpBC,EAAE,EACFC,KAAK,EACLC,aAAa,EACbC,WAAW,EACXC,SAAS,EACTC,aAAa,EACbC,QAAQ,EACRC,QAAQ,EACRC,OAAO,EACW,GACX,WAAP,GACI,sCAAC;QAAI,WAAWC,GAAGZ,eAAe;YAAEQ;QAAc,IAAID;OACjDH,SAAS,WAATA,GACG,sCAACS,OAAKA;QACF,SAASV;QACT,MAAMC;QACN,UAAUK;QACV,UAAUC;QACV,MAAMJ;QACN,QAAQ;QACR,WAAW;sBAGnB,sCAACQ,OAAAA,IAAqB;QAClB,IAAIX;QACJ,SAASQ;QACT,WAAWC,GAAG;YACV;YACA;YACA;YACA;YAEAR,SAAS;SACZ;QACD,UAAUK;QACV,iBAAiBJ;qBAEjB,sCAACS,OAAAA,KAAsB;QACnB,WAAWF,GACP;;AAWxB,MAAMG,6BAA6B,CAACC;IAChC,MAAM,EAAEC,EAAE,EAAEZ,aAAa,EAAE,GAAGa,UAAUF;IAExC,IAAI,CAACC,GAAG,IAAI,EACR,OAAO;IAGX,OAAO,WAAP,GAAO,sCAACf,gBAAcA;QAAE,GAAGc,KAAK;QAAG,GAAGC,GAAG,IAAI;QAAE,eAAeZ;;AAClE;AACA,MAAMc,kBAAkBC,gBAAgB,mBAAmBL"}

package/Tabs/Tabs.d.ts

@@ -1,15 +1,20 @@
 import React from "react";
 import { Tabs as TabsPrimitive } from "radix-ui";
 import { type VariantProps } from "../utils.js";
-import type { TabProps, tabListVariants } from "./components/index.js";
+import type { TabProps } from "./components/index.js";
+import { tabListVariants } from "./components/index.js";
 interface TabsProps extends Omit<TabsPrimitive.TabsProps, "children"> {
     tabs: React.ReactElement<TabProps>[];
     size?: VariantProps<typeof tabListVariants>["size"];
     spacing?: VariantProps<typeof tabListVariants>["spacing"];
     separator?: VariantProps<typeof tabListVariants>["separator"];
     loading?: boolean;
+    /**
+     * Controls rendered at the end of the tab row, e.g. a filter checkbox or a button.
+     */
+    actions?: React.ReactNode;
 }
-declare const DecoratableTabs: ({ defaultValue: initialValue, size, spacing, separator, loading, tabs: tabComponents, ...props }: TabsProps) => React.JSX.Element;
+declare const DecoratableTabs: ({ defaultValue: initialValue, size, spacing, separator, loading, actions, tabs: tabComponents, ...props }: TabsProps) => React.JSX.Element;
 declare const Tabs: typeof DecoratableTabs & {
     original: typeof DecoratableTabs;
     originalName: string;

package/Tabs/Tabs.js

@@ -1,20 +1,16 @@
 import react, { useMemo, useState } from "react";
 import { Tabs } from "radix-ui";
-import { makeDecoratable, withStaticProps } from "../utils.js";
-import { Content, List, Tab, TabsContext, Trigger } from "./components/index.js";
+import { cn, makeDecoratable, withStaticProps } from "../utils.js";
+import { Content, List, Tab, TabsContext, Trigger, tabListVariants } from "./components/index.js";
 const Root = Tabs.Root;
-const DecoratableTabs = ({ defaultValue: initialValue, size, spacing, separator, loading, tabs: tabComponents, ...props })=>{
+const DecoratableTabs = ({ defaultValue: initialValue, size, spacing, separator, loading, actions, tabs: tabComponents, ...props })=>{
     const [tabs, setTabs] = useState([]);
     const defaultValue = useMemo(()=>initialValue || tabComponents.find((tab)=>!tab.props.disabled && false !== tab.props.visible)?.props.value, [
         initialValue,
         tabComponents
     ]);
-    const triggers = useMemo(()=>/*#__PURE__*/ react.createElement(List, {
-            key: tabs.map((tab)=>tab.id).join(";"),
-            size: size,
-            spacing: spacing,
-            separator: separator
-        }, tabs.map((tab)=>/*#__PURE__*/ react.createElement(Trigger, {
+    const triggers = useMemo(()=>{
+        const triggerList = tabs.map((tab)=>/*#__PURE__*/ react.createElement(Trigger, {
                 "data-testid": tab["data-testid"],
                 disabled: tab.disabled,
                 icon: tab.icon,
@@ -24,12 +20,34 @@ const DecoratableTabs = ({ defaultValue: initialValue, size, spacing, separator,
                 text: tab.trigger,
                 value: tab.value,
                 visible: tab.visible
-            }))), [
+            }));
+        const listKey = tabs.map((tab)=>tab.id).join(";");
+        if (!actions) return /*#__PURE__*/ react.createElement(List, {
+            key: listKey,
+            size: size,
+            spacing: spacing,
+            separator: separator
+        }, triggerList);
+        return /*#__PURE__*/ react.createElement("div", {
+            className: cn(tabListVariants({
+                size,
+                spacing,
+                separator
+            }))
+        }, /*#__PURE__*/ react.createElement(List, {
+            key: listKey,
+            size: size,
+            className: "w-auto"
+        }, triggerList), /*#__PURE__*/ react.createElement("div", {
+            className: "ml-auto flex items-center gap-sm"
+        }, actions));
+    }, [
         tabs,
         size,
         spacing,
         separator,
-        loading
+        loading,
+        actions
     ]);
     const contents = useMemo(()=>tabs.map((tab)=>/*#__PURE__*/ react.createElement(Content, {
                 key: tab.id,

package/Tabs/Tabs.js.map

@@ -1 +1 @@
-{"version":3,"file":"Tabs/Tabs.js","sources":["../../src/Tabs/Tabs.tsx"],"sourcesContent":["import React, { useMemo, useState } from \"react\";\nimport { Tabs as TabsPrimitive } from \"radix-ui\";\nimport { makeDecoratable, type VariantProps, withStaticProps } from \"~/utils.js\";\nimport type { ITabsContext, TabItem, TabProps, tabListVariants } from \"./components/index.js\";\nimport { Content, List, Tab, TabsContext, Trigger } from \"./components/index.js\";\n\nconst Root = TabsPrimitive.Root;\n\ninterface TabsProps extends Omit<TabsPrimitive.TabsProps, \"children\"> {\n    tabs: React.ReactElement<TabProps>[];\n    size?: VariantProps<typeof tabListVariants>[\"size\"];\n    spacing?: VariantProps<typeof tabListVariants>[\"spacing\"];\n    separator?: VariantProps<typeof tabListVariants>[\"separator\"];\n    loading?: boolean;\n}\n\nconst DecoratableTabs = ({\n    defaultValue: initialValue,\n    size,\n    spacing,\n    separator,\n    loading,\n    tabs: tabComponents,\n    ...props\n}: TabsProps) => {\n    const [tabs, setTabs] = useState<TabItem[]>([]);\n\n    const defaultValue = useMemo(() => {\n        return (\n            initialValue ||\n            tabComponents.find(tab => !tab.props.disabled && tab.props.visible !== false)?.props\n                .value\n        );\n    }, [initialValue, tabComponents]);\n\n    const triggers = useMemo(\n        () => (\n            <List\n                key={tabs.map(tab => tab.id).join(\";\")}\n                size={size}\n                spacing={spacing}\n                separator={separator}\n            >\n                {tabs.map(tab => (\n                    <Trigger\n                        data-testid={tab[\"data-testid\"]}\n                        disabled={tab.disabled}\n                        icon={tab.icon}\n                        key={tab.id}\n                        loading={loading}\n                        size={size}\n                        text={tab.trigger}\n                        value={tab.value}\n                        visible={tab.visible}\n                    />\n                ))}\n            </List>\n        ),\n        [tabs, size, spacing, separator, loading]\n    );\n\n    const contents = useMemo(\n        () =>\n            tabs.map(tab => (\n                <Content\n                    key={tab.id}\n                    value={tab.value}\n                    content={tab.content}\n                    spacing={tab.spacing ?? spacing}\n                    className={tab.className}\n                />\n            )),\n        [tabs, spacing]\n    );\n\n    const context: ITabsContext = useMemo(\n        () => ({\n            addTab(props) {\n                setTabs(tabs => {\n                    const existingIndex = tabs.findIndex(tab => tab.value === props.value);\n                    if (existingIndex > -1) {\n                        return [\n                            ...tabs.slice(0, existingIndex),\n                            props,\n                            ...tabs.slice(existingIndex + 1)\n                        ];\n                    }\n                    return [...tabs, props];\n                });\n            },\n            removeTab(id) {\n                setTabs(tabs => tabs.filter(tab => tab.id !== id));\n            }\n        }),\n        [setTabs]\n    );\n\n    return (\n        <Root {...props} defaultValue={defaultValue}>\n            {triggers}\n            {contents}\n            <TabsContext.Provider value={context}>{tabComponents}</TabsContext.Provider>\n        </Root>\n    );\n};\n\nconst BaseTabs = makeDecoratable(\"Tabs\", DecoratableTabs);\n\nconst Tabs = withStaticProps(BaseTabs, {\n    Tab\n});\n\nexport { Tabs, type TabsProps };\n"],"names":["Root","TabsPrimitive","DecoratableTabs","initialValue","size","spacing","separator","loading","tabComponents","props","tabs","setTabs","useState","defaultValue","useMemo","tab","triggers","List","Trigger","contents","Content","context","existingIndex","id","TabsContext","BaseTabs","makeDecoratable","Tabs","withStaticProps","Tab"],"mappings":";;;;AAMA,MAAMA,OAAOC,KAAAA,IAAkB;AAU/B,MAAMC,kBAAkB,CAAC,EACrB,cAAcC,YAAY,EAC1BC,IAAI,EACJC,OAAO,EACPC,SAAS,EACTC,OAAO,EACP,MAAMC,aAAa,EACnB,GAAGC,OACK;IACR,MAAM,CAACC,MAAMC,QAAQ,GAAGC,SAAoB,EAAE;IAE9C,MAAMC,eAAeC,QAAQ,IAErBX,gBACAK,cAAc,IAAI,CAACO,CAAAA,MAAO,CAACA,IAAI,KAAK,CAAC,QAAQ,IAAIA,AAAsB,UAAtBA,IAAI,KAAK,CAAC,OAAO,GAAa,MAC1E,OAEV;QAACZ;QAAcK;KAAc;IAEhC,MAAMQ,WAAWF,QACb,kBACI,oBAACG,MAAIA;YACD,KAAKP,KAAK,GAAG,CAACK,CAAAA,MAAOA,IAAI,EAAE,EAAE,IAAI,CAAC;YAClC,MAAMX;YACN,SAASC;YACT,WAAWC;WAEVI,KAAK,GAAG,CAACK,CAAAA,MAAAA,WAAAA,GACN,oBAACG,SAAOA;gBACJ,eAAaH,GAAG,CAAC,cAAc;gBAC/B,UAAUA,IAAI,QAAQ;gBACtB,MAAMA,IAAI,IAAI;gBACd,KAAKA,IAAI,EAAE;gBACX,SAASR;gBACT,MAAMH;gBACN,MAAMW,IAAI,OAAO;gBACjB,OAAOA,IAAI,KAAK;gBAChB,SAASA,IAAI,OAAO;kBAKpC;QAACL;QAAMN;QAAMC;QAASC;QAAWC;KAAQ;IAG7C,MAAMY,WAAWL,QACb,IACIJ,KAAK,GAAG,CAACK,CAAAA,MAAAA,WAAAA,GACL,oBAACK,SAAOA;gBACJ,KAAKL,IAAI,EAAE;gBACX,OAAOA,IAAI,KAAK;gBAChB,SAASA,IAAI,OAAO;gBACpB,SAASA,IAAI,OAAO,IAAIV;gBACxB,WAAWU,IAAI,SAAS;iBAGpC;QAACL;QAAML;KAAQ;IAGnB,MAAMgB,UAAwBP,QAC1B,IAAO;YACH,QAAOL,KAAK;gBACRE,QAAQD,CAAAA;oBACJ,MAAMY,gBAAgBZ,KAAK,SAAS,CAACK,CAAAA,MAAOA,IAAI,KAAK,KAAKN,MAAM,KAAK;oBACrE,IAAIa,gBAAgB,IAChB,OAAO;2BACAZ,KAAK,KAAK,CAAC,GAAGY;wBACjBb;2BACGC,KAAK,KAAK,CAACY,gBAAgB;qBACjC;oBAEL,OAAO;2BAAIZ;wBAAMD;qBAAM;gBAC3B;YACJ;YACA,WAAUc,EAAE;gBACRZ,QAAQD,CAAAA,OAAQA,KAAK,MAAM,CAACK,CAAAA,MAAOA,IAAI,EAAE,KAAKQ;YAClD;QACJ,IACA;QAACZ;KAAQ;IAGb,OAAO,WAAP,GACI,oBAACX,MAAIA;QAAE,GAAGS,KAAK;QAAE,cAAcI;OAC1BG,UACAG,UAAAA,WAAAA,GACD,oBAACK,YAAY,QAAQ;QAAC,OAAOH;OAAUb;AAGnD;AAEA,MAAMiB,WAAWC,gBAAgB,QAAQxB;AAEzC,MAAMyB,YAAOC,gBAAgBH,UAAU;IACnCI,KAAGA;AACP"}
+{"version":3,"file":"Tabs/Tabs.js","sources":["../../src/Tabs/Tabs.tsx"],"sourcesContent":["import React, { useMemo, useState } from \"react\";\nimport { Tabs as TabsPrimitive } from \"radix-ui\";\nimport { cn, makeDecoratable, type VariantProps, withStaticProps } from \"~/utils.js\";\nimport type { ITabsContext, TabItem, TabProps } from \"./components/index.js\";\nimport { Content, List, Tab, TabsContext, Trigger, tabListVariants } from \"./components/index.js\";\n\nconst Root = TabsPrimitive.Root;\n\ninterface TabsProps extends Omit<TabsPrimitive.TabsProps, \"children\"> {\n    tabs: React.ReactElement<TabProps>[];\n    size?: VariantProps<typeof tabListVariants>[\"size\"];\n    spacing?: VariantProps<typeof tabListVariants>[\"spacing\"];\n    separator?: VariantProps<typeof tabListVariants>[\"separator\"];\n    loading?: boolean;\n    /**\n     * Controls rendered at the end of the tab row, e.g. a filter checkbox or a button.\n     */\n    actions?: React.ReactNode;\n}\n\nconst DecoratableTabs = ({\n    defaultValue: initialValue,\n    size,\n    spacing,\n    separator,\n    loading,\n    actions,\n    tabs: tabComponents,\n    ...props\n}: TabsProps) => {\n    const [tabs, setTabs] = useState<TabItem[]>([]);\n\n    const defaultValue = useMemo(() => {\n        return (\n            initialValue ||\n            tabComponents.find(tab => !tab.props.disabled && tab.props.visible !== false)?.props\n                .value\n        );\n    }, [initialValue, tabComponents]);\n\n    const triggers = useMemo(() => {\n        const triggerList = tabs.map(tab => (\n            <Trigger\n                data-testid={tab[\"data-testid\"]}\n                disabled={tab.disabled}\n                icon={tab.icon}\n                key={tab.id}\n                loading={loading}\n                size={size}\n                text={tab.trigger}\n                value={tab.value}\n                visible={tab.visible}\n            />\n        ));\n        const listKey = tabs.map(tab => tab.id).join(\";\");\n\n        if (!actions) {\n            return (\n                <List key={listKey} size={size} spacing={spacing} separator={separator}>\n                    {triggerList}\n                </List>\n            );\n        }\n\n        // Actions sit outside the tablist, so arrow keys only move between tabs.\n        return (\n            <div className={cn(tabListVariants({ size, spacing, separator }))}>\n                <List key={listKey} size={size} className={\"w-auto\"}>\n                    {triggerList}\n                </List>\n                <div className={\"ml-auto flex items-center gap-sm\"}>{actions}</div>\n            </div>\n        );\n    }, [tabs, size, spacing, separator, loading, actions]);\n\n    const contents = useMemo(\n        () =>\n            tabs.map(tab => (\n                <Content\n                    key={tab.id}\n                    value={tab.value}\n                    content={tab.content}\n                    spacing={tab.spacing ?? spacing}\n                    className={tab.className}\n                />\n            )),\n        [tabs, spacing]\n    );\n\n    const context: ITabsContext = useMemo(\n        () => ({\n            addTab(props) {\n                setTabs(tabs => {\n                    const existingIndex = tabs.findIndex(tab => tab.value === props.value);\n                    if (existingIndex > -1) {\n                        return [\n                            ...tabs.slice(0, existingIndex),\n                            props,\n                            ...tabs.slice(existingIndex + 1)\n                        ];\n                    }\n                    return [...tabs, props];\n                });\n            },\n            removeTab(id) {\n                setTabs(tabs => tabs.filter(tab => tab.id !== id));\n            }\n        }),\n        [setTabs]\n    );\n\n    return (\n        <Root {...props} defaultValue={defaultValue}>\n            {triggers}\n            {contents}\n            <TabsContext.Provider value={context}>{tabComponents}</TabsContext.Provider>\n        </Root>\n    );\n};\n\nconst BaseTabs = makeDecoratable(\"Tabs\", DecoratableTabs);\n\nconst Tabs = withStaticProps(BaseTabs, {\n    Tab\n});\n\nexport { Tabs, type TabsProps };\n"],"names":["Root","TabsPrimitive","DecoratableTabs","initialValue","size","spacing","separator","loading","actions","tabComponents","props","tabs","setTabs","useState","defaultValue","useMemo","tab","triggers","triggerList","Trigger","listKey","List","cn","tabListVariants","contents","Content","context","existingIndex","id","TabsContext","BaseTabs","makeDecoratable","Tabs","withStaticProps","Tab"],"mappings":";;;;AAMA,MAAMA,OAAOC,KAAAA,IAAkB;AAc/B,MAAMC,kBAAkB,CAAC,EACrB,cAAcC,YAAY,EAC1BC,IAAI,EACJC,OAAO,EACPC,SAAS,EACTC,OAAO,EACPC,OAAO,EACP,MAAMC,aAAa,EACnB,GAAGC,OACK;IACR,MAAM,CAACC,MAAMC,QAAQ,GAAGC,SAAoB,EAAE;IAE9C,MAAMC,eAAeC,QAAQ,IAErBZ,gBACAM,cAAc,IAAI,CAACO,CAAAA,MAAO,CAACA,IAAI,KAAK,CAAC,QAAQ,IAAIA,AAAsB,UAAtBA,IAAI,KAAK,CAAC,OAAO,GAAa,MAC1E,OAEV;QAACb;QAAcM;KAAc;IAEhC,MAAMQ,WAAWF,QAAQ;QACrB,MAAMG,cAAcP,KAAK,GAAG,CAACK,CAAAA,MAAAA,WAAAA,GACzB,oBAACG,SAAOA;gBACJ,eAAaH,GAAG,CAAC,cAAc;gBAC/B,UAAUA,IAAI,QAAQ;gBACtB,MAAMA,IAAI,IAAI;gBACd,KAAKA,IAAI,EAAE;gBACX,SAAST;gBACT,MAAMH;gBACN,MAAMY,IAAI,OAAO;gBACjB,OAAOA,IAAI,KAAK;gBAChB,SAASA,IAAI,OAAO;;QAG5B,MAAMI,UAAUT,KAAK,GAAG,CAACK,CAAAA,MAAOA,IAAI,EAAE,EAAE,IAAI,CAAC;QAE7C,IAAI,CAACR,SACD,OAAO,WAAP,GACI,oBAACa,MAAIA;YAAC,KAAKD;YAAS,MAAMhB;YAAM,SAASC;YAAS,WAAWC;WACxDY;QAMb,OAAO,WAAP,GACI,oBAAC;YAAI,WAAWI,GAAGC,gBAAgB;gBAAEnB;gBAAMC;gBAASC;YAAU;yBAC1D,oBAACe,MAAIA;YAAC,KAAKD;YAAS,MAAMhB;YAAM,WAAW;WACtCc,cAAAA,WAAAA,GAEL,oBAAC;YAAI,WAAW;WAAqCV;IAGjE,GAAG;QAACG;QAAMP;QAAMC;QAASC;QAAWC;QAASC;KAAQ;IAErD,MAAMgB,WAAWT,QACb,IACIJ,KAAK,GAAG,CAACK,CAAAA,MAAAA,WAAAA,GACL,oBAACS,SAAOA;gBACJ,KAAKT,IAAI,EAAE;gBACX,OAAOA,IAAI,KAAK;gBAChB,SAASA,IAAI,OAAO;gBACpB,SAASA,IAAI,OAAO,IAAIX;gBACxB,WAAWW,IAAI,SAAS;iBAGpC;QAACL;QAAMN;KAAQ;IAGnB,MAAMqB,UAAwBX,QAC1B,IAAO;YACH,QAAOL,KAAK;gBACRE,QAAQD,CAAAA;oBACJ,MAAMgB,gBAAgBhB,KAAK,SAAS,CAACK,CAAAA,MAAOA,IAAI,KAAK,KAAKN,MAAM,KAAK;oBACrE,IAAIiB,gBAAgB,IAChB,OAAO;2BACAhB,KAAK,KAAK,CAAC,GAAGgB;wBACjBjB;2BACGC,KAAK,KAAK,CAACgB,gBAAgB;qBACjC;oBAEL,OAAO;2BAAIhB;wBAAMD;qBAAM;gBAC3B;YACJ;YACA,WAAUkB,EAAE;gBACRhB,QAAQD,CAAAA,OAAQA,KAAK,MAAM,CAACK,CAAAA,MAAOA,IAAI,EAAE,KAAKY;YAClD;QACJ,IACA;QAAChB;KAAQ;IAGb,OAAO,WAAP,GACI,oBAACZ,MAAIA;QAAE,GAAGU,KAAK;QAAE,cAAcI;OAC1BG,UACAO,UAAAA,WAAAA,GACD,oBAACK,YAAY,QAAQ;QAAC,OAAOH;OAAUjB;AAGnD;AAEA,MAAMqB,WAAWC,gBAAgB,QAAQ7B;AAEzC,MAAM8B,YAAOC,gBAAgBH,UAAU;IACnCI,KAAGA;AACP"}