@webiny/admin-ui 6.2.0-beta.0 → 6.3.0-beta.0

package/RadioGroup/RadioGroup.mdx

@@ -1,6 +1,6 @@
-import { Canvas, Meta, Controls } from '@storybook/addon-docs/blocks';
+import { Canvas, Meta, Controls } from "@storybook/addon-docs/blocks";
 
-import * as RadioGroupStories from './RadioGroup.stories';
+import * as RadioGroupStories from "./RadioGroup.stories";
 
 <Meta of={RadioGroupStories} />
 
@@ -16,8 +16,8 @@ import React, { useState } from "react";
 import { RadioGroup } from "@webiny/admin-ui";
 
 const RadioGroupExample = () => {
-    const [value, setValue] = useState("");
-    const [validation, setValidation] = useState({ isValid: true, message: "" });
+const [value, setValue] = useState("");
+const [validation, setValidation] = useState({ isValid: true, message: "" });
 
     const handleValidation = () => {
         if (!value) {
@@ -53,27 +53,28 @@ const RadioGroupExample = () => {
             onBlur={handleValidation}
         />
     );
+
 };
 
 export default RadioGroupExample;
 
 `} }
-    additionalActions={[
-        {
-            title: 'Open in GitHub',
-            onClick: () => {
-                window.open(
-                    'https://github.com/webiny/webiny-js/blob/feat/new-admin-ui/packages/admin-ui/src/RadioGroup/RadioGroup.tsx',
-                    '_blank'
-                );
-            },
-        }
-    ]}
+additionalActions={[
+{
+title: 'Open in GitHub',
+onClick: () => {
+window.open(
+'https://github.com/webiny/webiny-js/blob/feat/new-admin-ui/packages/admin-ui/src/RadioGroup/RadioGroup.tsx',
+'_blank'
+);
+},
+}
+]}
 />
 
 <Controls of={RadioGroupStories.Documentation} />
 
-> **Note:** While the `required` prop will show the required indicator (*) next to the label, you need to implement the validation logic using the `validation` and `onBlur` props to handle the actual validation behavior.
+> **Note:** While the `required` prop will show the required indicator (\*) next to the label, you need to implement the validation logic using the `validation` and `onBlur` props to handle the actual validation behavior.
 
 ```jsx
 import React, { useState } from "react";
@@ -81,43 +82,43 @@ import React, { useState } from "react";
 import { RadioGroup } from "@webiny/admin-ui";
 
 const RadioGroupExample = () => {
-    const [value, setValue] = useState("");
-    const [validation, setValidation] = useState({ isValid: true, message: "" });
-
-    const handleValidation = () => {
-        if (!value) {
-            setValidation({ isValid: false, message: "This field is required" });
-        } else {
-            setValidation({ isValid: true, message: "" });
+  const [value, setValue] = useState("");
+  const [validation, setValidation] = useState({ isValid: true, message: "" });
+
+  const handleValidation = () => {
+    if (!value) {
+      setValidation({ isValid: false, message: "This field is required" });
+    } else {
+      setValidation({ isValid: true, message: "" });
+    }
+  };
+
+  return (
+    <RadioGroup
+      label="Deployment Option"
+      description="Choose your preferred deployment method"
+      note="This setting will determine how your application is deployed"
+      required={true}
+      items={[
+        {
+          label: "Automatic Deployment",
+          value: "automatic"
+        },
+        {
+          label: "Manual Deployment",
+          value: "manual"
+        },
+        {
+          label: "Scheduled Deployment",
+          value: "scheduled"
         }
-    };
-
-    return (
-        <RadioGroup
-            label="Deployment Option"
-            description="Choose your preferred deployment method"
-            note="This setting will determine how your application is deployed"
-            required={true}
-            items={[
-                {
-                    label: "Automatic Deployment",
-                    value: "automatic"
-                },
-                {
-                    label: "Manual Deployment",
-                    value: "manual"
-                },
-                {
-                    label: "Scheduled Deployment",
-                    value: "scheduled"
-                }
-            ]}
-            value={value}
-            validation={validation}
-            onChange={newValue => setValue(newValue)}
-            onBlur={handleValidation}
-        />
-    );
+      ]}
+      value={value}
+      validation={validation}
+      onChange={newValue => setValue(newValue)}
+      onBlur={handleValidation}
+    />
+  );
 };
 
 export default RadioGroupExample;
@@ -126,23 +127,25 @@ export default RadioGroupExample;
 ## Anatomy
 
 ### General
+
 Radio input enable users to select a single item from a list of offered choices. A radio input group organizes related radio input options together for better clarity and functionality.
 
-<img src="/images/storybook/radio-group/anatomy.png" alt="Anatomy"/>
+<img src="/images/storybook/radio-group/anatomy.png" alt="Anatomy" />
 
 ### Radio input options
+
 Radio inputs can exist in two different states: Selected and Not Selected. When a radio input is used for bulk selection, all other options must be excluded since the very purpose of a radio input is to provide only one selectable option.
-<img src="/images/storybook/radio-group/options.png" alt="Radio input options"/>
+
+<img src="/images/storybook/radio-group/options.png" alt="Radio input options" />
 
 ### States
-<img src="/images/storybook/radio-group/states.png" alt="States"/>
+
+<img src="/images/storybook/radio-group/states.png" alt="States" />
 
 ## Usage
 
 ### Text overflow
-When the radio item text content is too long for the horizontal space available, the content should wrap to form another line aligning the text and checkbox on top.
-
-<img src="/images/storybook/radio-group/text-overflow.png" alt="Text overflow"/>
-
 
+When the radio item text content is too long for the horizontal space available, the content should wrap to form another line aligning the text and checkbox on top.
 
+<img src="/images/storybook/radio-group/text-overflow.png" alt="Text overflow" />

package/RadioGroup/primitives/RadioGroupPrimitive.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","RadioGroup","RadioGroupPrimitives","cn","Radio","useRadioGroup","RadioGroupRoot","className","props","createElement","Root","Object","assign","RadioGroupRenderer","items","changeValue","value","disabled","onValueChange","map","item","id","key","label","RadioGroupPrimitive","vm","DeprecatedRadioGroup"],"sources":["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\n    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"],"mappings":"AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,UAAU,IAAIC,oBAAoB,QAAQ,UAAU;AAC7D,SAASC,EAAE;AACX,SAASC,KAAK;AAEd,SAASC,aAAa;;AAEtB;AACA;AACA;AACA,MAAMC,cAAc,GAAGA,CAAC;EAAEC,SAAS;EAAE,GAAGC;AAA4C,CAAC,KAAK;EACtF,oBACIR,KAAA,CAAAS,aAAA,CAACP,oBAAoB,CAACQ,IAAI,EAAAC,MAAA,CAAAC,MAAA;IACtBL,SAAS,EAAEJ,EAAE,CAAC,8BAA8B,EAAEI,SAAS;EAAE,GACrDC,KAAK,CACZ,CAAC;AAEV,CAAC;;AAED;AACA;AACA;;AA0BA,MAAMK,kBAAkB,GAAGA,CAAC;EAAEC,KAAK;EAAEC,WAAW;EAAEC,KAAK;EAAEC;AAAkC,CAAC,KAAK;EAC7F,oBACIjB,KAAA,CAAAS,aAAA,CAACH,cAAc;IACXU,KAAK,EAAEA,KAAK,IAAI,EAAG;IACnBE,aAAa,EAAEF,KAAK,IAAID,WAAW,CAACC,KAAK,CAAE;IAC3CC,QAAQ,EAAEA;EAAS,GAElBH,KAAK,CAACK,GAAG,CAACC,IAAI,iBACXpB,KAAA,CAAAS,aAAA,CAACL,KAAK;IACFiB,EAAE,EAAED,IAAI,CAACC,EAAG;IACZL,KAAK,EAAEI,IAAI,CAACJ,KAAM;IAClBM,GAAG,EAAEF,IAAI,CAACC,EAAG;IACbE,KAAK,EAAEH,IAAI,CAACG,KAAM;IAClBN,QAAQ,EAAEG,IAAI,CAACH;EAAS,CAC3B,CACJ,CACW,CAAC;AAEzB,CAAC;;AAED;AACA;AACA;AACA,MAAMO,mBAAmB,GAAIhB,KAA+B,IAAK;EAC7D,MAAM;IAAEiB,EAAE;IAAEV;EAAY,CAAC,GAAGV,aAAa,CAACG,KAAK,CAAC;EAChD,oBAAOR,KAAA,CAAAS,aAAA,CAACI,kBAAkB,EAAAF,MAAA,CAAAC,MAAA,KAAKJ,KAAK;IAAEM,KAAK,EAAEW,EAAE,CAACX,KAAM;IAACC,WAAW,EAAEA;EAAY,EAAE,CAAC;AACvF,CAAC;;AAED;AACA;AACA;AACA;AACA;AACA;AACA,MAAMW,oBAAoB,GAAGpB,cAAc;AAE3C,SACIkB,mBAAmB,EACnBX,kBAAkB,EAClBa,oBAAoB","ignoreList":[]}
+{"version":3,"names":["React","RadioGroup","RadioGroupPrimitives","cn","Radio","useRadioGroup","RadioGroupRoot","className","props","createElement","Root","Object","assign","RadioGroupRenderer","items","changeValue","value","disabled","onValueChange","map","item","id","key","label","RadioGroupPrimitive","vm","DeprecatedRadioGroup"],"sources":["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"],"mappings":"AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,UAAU,IAAIC,oBAAoB,QAAQ,UAAU;AAC7D,SAASC,EAAE;AACX,SAASC,KAAK;AAEd,SAASC,aAAa;;AAEtB;AACA;AACA;AACA,MAAMC,cAAc,GAAGA,CAAC;EAAEC,SAAS;EAAE,GAAGC;AAA4C,CAAC,KAAK;EACtF,oBACIR,KAAA,CAAAS,aAAA,CAACP,oBAAoB,CAACQ,IAAI,EAAAC,MAAA,CAAAC,MAAA;IACtBL,SAAS,EAAEJ,EAAE,CAAC,8BAA8B,EAAEI,SAAS;EAAE,GACrDC,KAAK,CACZ,CAAC;AAEV,CAAC;;AAED;AACA;AACA;;AAyBA,MAAMK,kBAAkB,GAAGA,CAAC;EAAEC,KAAK;EAAEC,WAAW;EAAEC,KAAK;EAAEC;AAAkC,CAAC,KAAK;EAC7F,oBACIjB,KAAA,CAAAS,aAAA,CAACH,cAAc;IACXU,KAAK,EAAEA,KAAK,IAAI,EAAG;IACnBE,aAAa,EAAEF,KAAK,IAAID,WAAW,CAACC,KAAK,CAAE;IAC3CC,QAAQ,EAAEA;EAAS,GAElBH,KAAK,CAACK,GAAG,CAACC,IAAI,iBACXpB,KAAA,CAAAS,aAAA,CAACL,KAAK;IACFiB,EAAE,EAAED,IAAI,CAACC,EAAG;IACZL,KAAK,EAAEI,IAAI,CAACJ,KAAM;IAClBM,GAAG,EAAEF,IAAI,CAACC,EAAG;IACbE,KAAK,EAAEH,IAAI,CAACG,KAAM;IAClBN,QAAQ,EAAEG,IAAI,CAACH;EAAS,CAC3B,CACJ,CACW,CAAC;AAEzB,CAAC;;AAED;AACA;AACA;AACA,MAAMO,mBAAmB,GAAIhB,KAA+B,IAAK;EAC7D,MAAM;IAAEiB,EAAE;IAAEV;EAAY,CAAC,GAAGV,aAAa,CAACG,KAAK,CAAC;EAChD,oBAAOR,KAAA,CAAAS,aAAA,CAACI,kBAAkB,EAAAF,MAAA,CAAAC,MAAA,KAAKJ,KAAK;IAAEM,KAAK,EAAEW,EAAE,CAACX,KAAM;IAACC,WAAW,EAAEA;EAAY,EAAE,CAAC;AACvF,CAAC;;AAED;AACA;AACA;AACA;AACA;AACA;AACA,MAAMW,oBAAoB,GAAGpB,cAAc;AAE3C,SACIkB,mBAAmB,EACnBX,kBAAkB,EAClBa,oBAAoB","ignoreList":[]}

package/RangeSlider/RangeSlider.mdx

@@ -1,6 +1,6 @@
-import { Canvas, Meta, Controls } from '@storybook/addon-docs/blocks';
+import { Canvas, Meta, Controls } from "@storybook/addon-docs/blocks";
 
-import * as RangeSliderStories from './RangeSlider.stories';
+import * as RangeSliderStories from "./RangeSlider.stories";
 
 <Meta of={RangeSliderStories} />
 
@@ -15,8 +15,8 @@ import React, { useState } from "react";
 import { RangeSlider } from "@webiny/admin-ui";
 
 const RangeSliderExample = () => {
-    const [values, setValues] = useState([25, 75]);
-    const [validation, setValidation] = useState({ isValid: true, message: "" });
+const [values, setValues] = useState([25, 75]);
+const [validation, setValidation] = useState({ isValid: true, message: "" });
 
     const handleChange = (newValues: number[]) => {
         setValues(newValues);
@@ -46,62 +46,63 @@ const RangeSliderExample = () => {
             />
         </div>
     );
+
 };
 
 export default RangeSliderExample;
 
 ` } }
-        additionalActions={[
-            {
-                title: 'Open in GitHub',
-                onClick: () => {
-                    window.open(
-                        'https://github.com/webiny/webiny-js/blob/feat/new-admin-ui/packages/admin-ui/src/RangeSlider/RangeSlider.tsx',
-                        '_blank'
-                    );
-                },
-            }
-        ]}
+additionalActions={[
+{
+title: 'Open in GitHub',
+onClick: () => {
+window.open(
+'https://github.com/webiny/webiny-js/blob/feat/new-admin-ui/packages/admin-ui/src/RangeSlider/RangeSlider.tsx',
+'_blank'
+);
+},
+}
+]}
 />
 
-<Controls of={RangeSliderStories.Documentation} exclude={["onValuesChange", "onValuesCommit"]}/>
+<Controls of={RangeSliderStories.Documentation} exclude={["onValuesChange", "onValuesCommit"]} />
 
 ```tsx
 import React, { useState } from "react";
 import { RangeSlider } from "@webiny/admin-ui";
 
 const RangeSliderExample = () => {
-    const [values, setValues] = useState([25, 75]);
-    const [validation, setValidation] = useState({ isValid: true, message: "" });
-
-    const handleChange = (newValues: number[]) => {
-        setValues(newValues);
-
-        if (newValues[0] === 0 && newValues[1] === 0) {
-            setValidation({ isValid: false, message: "Please select a range" });
-        } else {
-            setValidation({ isValid: true, message: "" });
-        }
-    };
-
-    return (
-        <div>
-            <RangeSlider
-                label="Price Range"
-                description="Select the minimum and maximum price range"
-                note="Note: The selected range will filter available products"
-                min={0}
-                max={100}
-                step={1}
-                values={values}
-                required={true}
-                onValuesChange={handleChange}
-                showTooltip={true}
-                transformValue={(value) => `$${value}`}
-                validation={validation}
-            />
-        </div>
-    );
+  const [values, setValues] = useState([25, 75]);
+  const [validation, setValidation] = useState({ isValid: true, message: "" });
+
+  const handleChange = (newValues: number[]) => {
+    setValues(newValues);
+
+    if (newValues[0] === 0 && newValues[1] === 0) {
+      setValidation({ isValid: false, message: "Please select a range" });
+    } else {
+      setValidation({ isValid: true, message: "" });
+    }
+  };
+
+  return (
+    <div>
+      <RangeSlider
+        label="Price Range"
+        description="Select the minimum and maximum price range"
+        note="Note: The selected range will filter available products"
+        min={0}
+        max={100}
+        step={1}
+        values={values}
+        required={true}
+        onValuesChange={handleChange}
+        showTooltip={true}
+        transformValue={value => `$${value}`}
+        validation={validation}
+      />
+    </div>
+  );
 };
 
 export default RangeSliderExample;

package/RangeSlider/primitives/RangeSliderPrimitive.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","SliderRoot","SliderThumb","SliderTrack","useRangeSlider","RangeSliderPrimitiveRenderer","tooltipSide","textValues","showTooltip","values","sliderProps","createElement","className","Object","assign","value","textValue","RangeSliderPrimitive","props","transformValue","onValuesChange","onValuesCommit","restProps","vm","changeValues","commitValues","onValueChange","onValueCommit"],"sources":["RangeSliderPrimitive.tsx"],"sourcesContent":["import * as React from \"react\";\nimport type { Slider as SliderPrimitives } from \"radix-ui\";\nimport { SliderRoot, SliderThumb, type SliderThumbProps, SliderTrack } from \"~/Slider/index.js\";\nimport { useRangeSlider } from \"./useRangeSlider.js\";\n\ninterface RangeSliderPrimitiveRootProps\n    extends Omit<SliderPrimitives.SliderProps, \"min\" | \"max\" | \"value\"> {\n    /**\n     * Array of numbers representing the current values of the range slider.\n     */\n    values: number[];\n    /**\n     * Minimum value of the range slider.\n     */\n    min: number;\n    /**\n     * Maximum value of the range slider.\n     */\n    max: number;\n}\n\ninterface RangeSliderPrimitiveThumbProps extends Omit<SliderThumbProps, \"labelValue\"> {\n    textValues: string[];\n}\n\ninterface RangeSliderPrimitiveVm\n    extends RangeSliderPrimitiveRootProps,\n        Omit<RangeSliderPrimitiveThumbProps, \"textValue\"> {\n    textValues: string[];\n}\n\n/**\n * RangeSliderRenderer\n */\n\nconst RangeSliderPrimitiveRenderer = ({\n    tooltipSide,\n    textValues,\n    showTooltip,\n    values,\n    ...sliderProps\n}: RangeSliderPrimitiveVm) => {\n    return (\n        <div className={\"flex h-md w-full\"}>\n            <SliderRoot {...sliderProps} value={values}>\n                <SliderTrack />\n                <SliderThumb\n                    showTooltip={showTooltip}\n                    tooltipSide={tooltipSide}\n                    textValue={textValues[0]}\n                />\n                <SliderThumb\n                    showTooltip={showTooltip}\n                    tooltipSide={tooltipSide}\n                    textValue={textValues[1]}\n                />\n            </SliderRoot>\n        </div>\n    );\n};\n\n/**\n * RangeSlider\n */\ninterface RangeSliderPrimitiveProps\n    extends Omit<\n        SliderPrimitives.SliderProps,\n        \"defaultValue\" | \"value\" | \"onValueChange\" | \"onValueCommit\"\n    > {\n    onValuesChange: (values: number[]) => void;\n    onValuesCommit?: (values: number[]) => void;\n    showTooltip?: boolean;\n    tooltipSide?: \"top\" | \"bottom\";\n    transformValue?: (value: number) => string;\n    values?: number[];\n}\n\nconst RangeSliderPrimitive = (props: RangeSliderPrimitiveProps) => {\n    const { transformValue, onValuesChange, onValuesCommit, ...restProps } = props; // Rename transformValue to _ to avoid ESLint warning\n    const { vm, changeValues, commitValues } = useRangeSlider({\n        ...restProps,\n        transformValue,\n        onValuesChange,\n        onValuesCommit\n    });\n\n    return (\n        <RangeSliderPrimitiveRenderer\n            {...restProps}\n            {...vm}\n            onValueChange={changeValues}\n            onValueCommit={commitValues}\n        />\n    );\n};\n\nexport {\n    RangeSliderPrimitive,\n    RangeSliderPrimitiveRenderer,\n    type RangeSliderPrimitiveProps,\n    type RangeSliderPrimitiveVm\n};\n"],"mappings":"AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAE9B,SAASC,UAAU,EAAEC,WAAW,EAAyBC,WAAW;AACpE,SAASC,cAAc;AA4BvB;AACA;AACA;;AAEA,MAAMC,4BAA4B,GAAGA,CAAC;EAClCC,WAAW;EACXC,UAAU;EACVC,WAAW;EACXC,MAAM;EACN,GAAGC;AACiB,CAAC,KAAK;EAC1B,oBACIV,KAAA,CAAAW,aAAA;IAAKC,SAAS,EAAE;EAAmB,gBAC/BZ,KAAA,CAAAW,aAAA,CAACV,UAAU,EAAAY,MAAA,CAAAC,MAAA,KAAKJ,WAAW;IAAEK,KAAK,EAAEN;EAAO,iBACvCT,KAAA,CAAAW,aAAA,CAACR,WAAW,MAAE,CAAC,eACfH,KAAA,CAAAW,aAAA,CAACT,WAAW;IACRM,WAAW,EAAEA,WAAY;IACzBF,WAAW,EAAEA,WAAY;IACzBU,SAAS,EAAET,UAAU,CAAC,CAAC;EAAE,CAC5B,CAAC,eACFP,KAAA,CAAAW,aAAA,CAACT,WAAW;IACRM,WAAW,EAAEA,WAAY;IACzBF,WAAW,EAAEA,WAAY;IACzBU,SAAS,EAAET,UAAU,CAAC,CAAC;EAAE,CAC5B,CACO,CACX,CAAC;AAEd,CAAC;;AAED;AACA;AACA;;AAcA,MAAMU,oBAAoB,GAAIC,KAAgC,IAAK;EAC/D,MAAM;IAAEC,cAAc;IAAEC,cAAc;IAAEC,cAAc;IAAE,GAAGC;EAAU,CAAC,GAAGJ,KAAK,CAAC,CAAC;EAChF,MAAM;IAAEK,EAAE;IAAEC,YAAY;IAAEC;EAAa,CAAC,GAAGrB,cAAc,CAAC;IACtD,GAAGkB,SAAS;IACZH,cAAc;IACdC,cAAc;IACdC;EACJ,CAAC,CAAC;EAEF,oBACIrB,KAAA,CAAAW,aAAA,CAACN,4BAA4B,EAAAQ,MAAA,CAAAC,MAAA,KACrBQ,SAAS,EACTC,EAAE;IACNG,aAAa,EAAEF,YAAa;IAC5BG,aAAa,EAAEF;EAAa,EAC/B,CAAC;AAEV,CAAC;AAED,SACIR,oBAAoB,EACpBZ,4BAA4B","ignoreList":[]}
+{"version":3,"names":["React","SliderRoot","SliderThumb","SliderTrack","useRangeSlider","RangeSliderPrimitiveRenderer","tooltipSide","textValues","showTooltip","values","sliderProps","createElement","className","Object","assign","value","textValue","RangeSliderPrimitive","props","transformValue","onValuesChange","onValuesCommit","restProps","vm","changeValues","commitValues","onValueChange","onValueCommit"],"sources":["RangeSliderPrimitive.tsx"],"sourcesContent":["import * as React from \"react\";\nimport type { Slider as SliderPrimitives } from \"radix-ui\";\nimport { SliderRoot, SliderThumb, type SliderThumbProps, SliderTrack } from \"~/Slider/index.js\";\nimport { useRangeSlider } from \"./useRangeSlider.js\";\n\ninterface RangeSliderPrimitiveRootProps extends Omit<\n    SliderPrimitives.SliderProps,\n    \"min\" | \"max\" | \"value\"\n> {\n    /**\n     * Array of numbers representing the current values of the range slider.\n     */\n    values: number[];\n    /**\n     * Minimum value of the range slider.\n     */\n    min: number;\n    /**\n     * Maximum value of the range slider.\n     */\n    max: number;\n}\n\ninterface RangeSliderPrimitiveThumbProps extends Omit<SliderThumbProps, \"labelValue\"> {\n    textValues: string[];\n}\n\ninterface RangeSliderPrimitiveVm\n    extends RangeSliderPrimitiveRootProps, Omit<RangeSliderPrimitiveThumbProps, \"textValue\"> {\n    textValues: string[];\n}\n\n/**\n * RangeSliderRenderer\n */\n\nconst RangeSliderPrimitiveRenderer = ({\n    tooltipSide,\n    textValues,\n    showTooltip,\n    values,\n    ...sliderProps\n}: RangeSliderPrimitiveVm) => {\n    return (\n        <div className={\"flex h-md w-full\"}>\n            <SliderRoot {...sliderProps} value={values}>\n                <SliderTrack />\n                <SliderThumb\n                    showTooltip={showTooltip}\n                    tooltipSide={tooltipSide}\n                    textValue={textValues[0]}\n                />\n                <SliderThumb\n                    showTooltip={showTooltip}\n                    tooltipSide={tooltipSide}\n                    textValue={textValues[1]}\n                />\n            </SliderRoot>\n        </div>\n    );\n};\n\n/**\n * RangeSlider\n */\ninterface RangeSliderPrimitiveProps extends Omit<\n    SliderPrimitives.SliderProps,\n    \"defaultValue\" | \"value\" | \"onValueChange\" | \"onValueCommit\"\n> {\n    onValuesChange: (values: number[]) => void;\n    onValuesCommit?: (values: number[]) => void;\n    showTooltip?: boolean;\n    tooltipSide?: \"top\" | \"bottom\";\n    transformValue?: (value: number) => string;\n    values?: number[];\n}\n\nconst RangeSliderPrimitive = (props: RangeSliderPrimitiveProps) => {\n    const { transformValue, onValuesChange, onValuesCommit, ...restProps } = props; // Rename transformValue to _ to avoid ESLint warning\n    const { vm, changeValues, commitValues } = useRangeSlider({\n        ...restProps,\n        transformValue,\n        onValuesChange,\n        onValuesCommit\n    });\n\n    return (\n        <RangeSliderPrimitiveRenderer\n            {...restProps}\n            {...vm}\n            onValueChange={changeValues}\n            onValueCommit={commitValues}\n        />\n    );\n};\n\nexport {\n    RangeSliderPrimitive,\n    RangeSliderPrimitiveRenderer,\n    type RangeSliderPrimitiveProps,\n    type RangeSliderPrimitiveVm\n};\n"],"mappings":"AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAE9B,SAASC,UAAU,EAAEC,WAAW,EAAyBC,WAAW;AACpE,SAASC,cAAc;AA6BvB;AACA;AACA;;AAEA,MAAMC,4BAA4B,GAAGA,CAAC;EAClCC,WAAW;EACXC,UAAU;EACVC,WAAW;EACXC,MAAM;EACN,GAAGC;AACiB,CAAC,KAAK;EAC1B,oBACIV,KAAA,CAAAW,aAAA;IAAKC,SAAS,EAAE;EAAmB,gBAC/BZ,KAAA,CAAAW,aAAA,CAACV,UAAU,EAAAY,MAAA,CAAAC,MAAA,KAAKJ,WAAW;IAAEK,KAAK,EAAEN;EAAO,iBACvCT,KAAA,CAAAW,aAAA,CAACR,WAAW,MAAE,CAAC,eACfH,KAAA,CAAAW,aAAA,CAACT,WAAW;IACRM,WAAW,EAAEA,WAAY;IACzBF,WAAW,EAAEA,WAAY;IACzBU,SAAS,EAAET,UAAU,CAAC,CAAC;EAAE,CAC5B,CAAC,eACFP,KAAA,CAAAW,aAAA,CAACT,WAAW;IACRM,WAAW,EAAEA,WAAY;IACzBF,WAAW,EAAEA,WAAY;IACzBU,SAAS,EAAET,UAAU,CAAC,CAAC;EAAE,CAC5B,CACO,CACX,CAAC;AAEd,CAAC;;AAED;AACA;AACA;;AAaA,MAAMU,oBAAoB,GAAIC,KAAgC,IAAK;EAC/D,MAAM;IAAEC,cAAc;IAAEC,cAAc;IAAEC,cAAc;IAAE,GAAGC;EAAU,CAAC,GAAGJ,KAAK,CAAC,CAAC;EAChF,MAAM;IAAEK,EAAE;IAAEC,YAAY;IAAEC;EAAa,CAAC,GAAGrB,cAAc,CAAC;IACtD,GAAGkB,SAAS;IACZH,cAAc;IACdC,cAAc;IACdC;EACJ,CAAC,CAAC;EAEF,oBACIrB,KAAA,CAAAW,aAAA,CAACN,4BAA4B,EAAAQ,MAAA,CAAAC,MAAA,KACrBQ,SAAS,EACTC,EAAE;IACNG,aAAa,EAAEF,YAAa;IAC5BG,aAAa,EAAEF;EAAa,EAC/B,CAAC;AAEV,CAAC;AAED,SACIR,oBAAoB,EACpBZ,4BAA4B","ignoreList":[]}

package/RangeSlider/primitives/components/RangeSliderValue.d.ts

@@ -2,7 +2,7 @@ import * as React from "react";
 import { type VariantProps } from "../../../utils.js";
 declare const rangeSliderValueVariants: (props?: ({
     disabled?: boolean | null | undefined;
-} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
 interface RangeSliderValueProps extends React.HTMLAttributes<HTMLSpanElement>, VariantProps<typeof rangeSliderValueVariants> {
     value: string;
 }

package/RangeSlider/primitives/components/RangeSliderValue.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","cn","cva","rangeSliderValueVariants","variants","disabled","true","RangeSliderValue","value","className","createElement"],"sources":["RangeSliderValue.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { cn, cva, type VariantProps } from \"~/utils.js\";\n\nconst rangeSliderValueVariants = cva(\"font-normal text-sm leading-none\", {\n    variants: {\n        disabled: {\n            true: \"text-neutral-disabled cursor-not-allowed\"\n        }\n    }\n});\n\ninterface RangeSliderValueProps\n    extends React.HTMLAttributes<HTMLSpanElement>,\n        VariantProps<typeof rangeSliderValueVariants> {\n    value: string;\n}\n\nconst RangeSliderValue = ({ value, disabled, className }: RangeSliderValueProps) => {\n    if (!value) {\n        return null;\n    }\n    return <span className={cn(rangeSliderValueVariants({ disabled }), className)}>{value}</span>;\n};\n\nexport { RangeSliderValue, type RangeSliderValueProps };\n"],"mappings":"AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,EAAE,EAAEC,GAAG;AAEhB,MAAMC,wBAAwB,GAAGD,GAAG,CAAC,kCAAkC,EAAE;EACrEE,QAAQ,EAAE;IACNC,QAAQ,EAAE;MACNC,IAAI,EAAE;IACV;EACJ;AACJ,CAAC,CAAC;AAQF,MAAMC,gBAAgB,GAAGA,CAAC;EAAEC,KAAK;EAAEH,QAAQ;EAAEI;AAAiC,CAAC,KAAK;EAChF,IAAI,CAACD,KAAK,EAAE;IACR,OAAO,IAAI;EACf;EACA,oBAAOR,KAAA,CAAAU,aAAA;IAAMD,SAAS,EAAER,EAAE,CAACE,wBAAwB,CAAC;MAAEE;IAAS,CAAC,CAAC,EAAEI,SAAS;EAAE,GAAED,KAAY,CAAC;AACjG,CAAC;AAED,SAASD,gBAAgB","ignoreList":[]}
+{"version":3,"names":["React","cn","cva","rangeSliderValueVariants","variants","disabled","true","RangeSliderValue","value","className","createElement"],"sources":["RangeSliderValue.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { cn, cva, type VariantProps } from \"~/utils.js\";\n\nconst rangeSliderValueVariants = cva(\"font-normal text-sm leading-none\", {\n    variants: {\n        disabled: {\n            true: \"text-neutral-disabled cursor-not-allowed\"\n        }\n    }\n});\n\ninterface RangeSliderValueProps\n    extends React.HTMLAttributes<HTMLSpanElement>, VariantProps<typeof rangeSliderValueVariants> {\n    value: string;\n}\n\nconst RangeSliderValue = ({ value, disabled, className }: RangeSliderValueProps) => {\n    if (!value) {\n        return null;\n    }\n    return <span className={cn(rangeSliderValueVariants({ disabled }), className)}>{value}</span>;\n};\n\nexport { RangeSliderValue, type RangeSliderValueProps };\n"],"mappings":"AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,EAAE,EAAEC,GAAG;AAEhB,MAAMC,wBAAwB,GAAGD,GAAG,CAAC,kCAAkC,EAAE;EACrEE,QAAQ,EAAE;IACNC,QAAQ,EAAE;MACNC,IAAI,EAAE;IACV;EACJ;AACJ,CAAC,CAAC;AAOF,MAAMC,gBAAgB,GAAGA,CAAC;EAAEC,KAAK;EAAEH,QAAQ;EAAEI;AAAiC,CAAC,KAAK;EAChF,IAAI,CAACD,KAAK,EAAE;IACR,OAAO,IAAI;EACf;EACA,oBAAOR,KAAA,CAAAU,aAAA;IAAMD,SAAS,EAAER,EAAE,CAACE,wBAAwB,CAAC;MAAEE;IAAS,CAAC,CAAC,EAAEI,SAAS;EAAE,GAAED,KAAY,CAAC;AACjG,CAAC;AAED,SAASD,gBAAgB","ignoreList":[]}

package/ScrollArea/ScrollArea.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","ScrollAreaPrimitive","cn","ScrollArea","className","children","onScrollPositionChange","onScroll","props","viewportRef","useRef","useEffect","viewport","current","handleScroll","scrollTop","scrollLeft","scrollHeight","scrollWidth","clientHeight","clientWidth","position","top","left","addEventListener","removeEventListener","createElement","Root","Object","assign","Viewport","ref","ScrollBar","Corner","orientation","ScrollAreaScrollbar","ScrollAreaThumb"],"sources":["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\n    extends Omit<React.ComponentProps<typeof ScrollAreaPrimitive.Root>, \"onScroll\"> {\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"],"mappings":"AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,OAAO,KAAKC,mBAAmB,MAAM,6BAA6B;AAClE,SAASC,EAAE;AAmBX,SAASC,UAAUA,CAAC;EAChBC,SAAS;EACTC,QAAQ;EACRC,sBAAsB;EACtBC,QAAQ;EACR,GAAGC;AACU,CAAC,EAAE;EAChB,MAAMC,WAAW,GAAGT,KAAK,CAACU,MAAM,CAAiB,IAAI,CAAC;EAEtDV,KAAK,CAACW,SAAS,CAAC,MAAM;IAClB,MAAMC,QAAQ,GAAGH,WAAW,CAACI,OAAO;IACpC,IAAI,CAACD,QAAQ,IAAK,CAACN,sBAAsB,IAAI,CAACC,QAAS,EAAE;MACrD;IACJ;;IAEA;IACA,MAAMO,YAAY,GAAGA,CAAA,KAAM;MACvB,MAAM;QAAEC,SAAS;QAAEC,UAAU;QAAEC,YAAY;QAAEC,WAAW;QAAEC,YAAY;QAAEC;MAAY,CAAC,GACjFR,QAAQ;MAEZ,MAAMS,QAAwB,GAAG;QAC7BC,GAAG,EAAEL,YAAY,GAAGE,YAAY,GAAGJ,SAAS,IAAIE,YAAY,GAAGE,YAAY,CAAC,GAAG,CAAC;QAChFI,IAAI,EAAEL,WAAW,GAAGE,WAAW,GAAGJ,UAAU,IAAIE,WAAW,GAAGE,WAAW,CAAC,GAAG,CAAC;QAC9EL,SAAS;QACTC,UAAU;QACVC,YAAY;QACZC,WAAW;QACXC,YAAY;QACZC;MACJ,CAAC;MAEDd,sBAAsB,GAAGe,QAAQ,CAAC;MAClCd,QAAQ,GAAGc,QAAQ,CAAC;IACxB,CAAC;;IAED;IACAP,YAAY,CAAC,CAAC;IAEdF,QAAQ,CAACY,gBAAgB,CAAC,QAAQ,EAAEV,YAAY,CAAC;IACjD,OAAO,MAAMF,QAAQ,CAACa,mBAAmB,CAAC,QAAQ,EAAEX,YAAY,CAAC;EACrE,CAAC,EAAE,CAACR,sBAAsB,EAAEC,QAAQ,CAAC,CAAC;EAEtC,oBACIP,KAAA,CAAA0B,aAAA,CAACzB,mBAAmB,CAAC0B,IAAI,EAAAC,MAAA,CAAAC,MAAA;IACrB,aAAU,aAAa;IACvBzB,SAAS,EAAEF,EAAE,CAAC,UAAU,EAAEE,SAAS;EAAE,GACjCI,KAAK,gBAETR,KAAA,CAAA0B,aAAA,CAACzB,mBAAmB,CAAC6B,QAAQ;IACzBC,GAAG,EAAEtB,WAAY;IACjB,aAAU,sBAAsB;IAChCL,SAAS,EAAC;EAAoJ,GAE7JC,QACyB,CAAC,eAC/BL,KAAA,CAAA0B,aAAA,CAACM,SAAS,MAAE,CAAC,eACbhC,KAAA,CAAA0B,aAAA,CAACzB,mBAAmB,CAACgC,MAAM,MAAE,CACP,CAAC;AAEnC;AAEA,SAASD,SAASA,CAAC;EACf5B,SAAS;EACT8B,WAAW,GAAG,UAAU;EACxB,GAAG1B;AAC+D,CAAC,EAAE;EACrE,oBACIR,KAAA,CAAA0B,aAAA,CAACzB,mBAAmB,CAACkC,mBAAmB,EAAAP,MAAA,CAAAC,MAAA;IACpC,aAAU,uBAAuB;IACjCK,WAAW,EAAEA,WAAY;IACzB9B,SAAS,EAAEF,EAAE,CACT,+CAA+C,EAC/CgC,WAAW,KAAK,UAAU,IAAI,8CAA8C,EAC5EA,WAAW,KAAK,YAAY,IAAI,gDAAgD,EAChF9B,SACJ;EAAE,GACEI,KAAK,gBAETR,KAAA,CAAA0B,aAAA,CAACzB,mBAAmB,CAACmC,eAAe;IAChC,aAAU,mBAAmB;IAC7BhC,SAAS,EAAC;EAAmD,CAChE,CACoC,CAAC;AAElD;AAEA,SAASD,UAAU,EAAE6B,SAAS","ignoreList":[]}
+{"version":3,"names":["React","ScrollAreaPrimitive","cn","ScrollArea","className","children","onScrollPositionChange","onScroll","props","viewportRef","useRef","useEffect","viewport","current","handleScroll","scrollTop","scrollLeft","scrollHeight","scrollWidth","clientHeight","clientWidth","position","top","left","addEventListener","removeEventListener","createElement","Root","Object","assign","Viewport","ref","ScrollBar","Corner","orientation","ScrollAreaScrollbar","ScrollAreaThumb"],"sources":["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"],"mappings":"AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,OAAO,KAAKC,mBAAmB,MAAM,6BAA6B;AAClE,SAASC,EAAE;AAqBX,SAASC,UAAUA,CAAC;EAChBC,SAAS;EACTC,QAAQ;EACRC,sBAAsB;EACtBC,QAAQ;EACR,GAAGC;AACU,CAAC,EAAE;EAChB,MAAMC,WAAW,GAAGT,KAAK,CAACU,MAAM,CAAiB,IAAI,CAAC;EAEtDV,KAAK,CAACW,SAAS,CAAC,MAAM;IAClB,MAAMC,QAAQ,GAAGH,WAAW,CAACI,OAAO;IACpC,IAAI,CAACD,QAAQ,IAAK,CAACN,sBAAsB,IAAI,CAACC,QAAS,EAAE;MACrD;IACJ;;IAEA;IACA,MAAMO,YAAY,GAAGA,CAAA,KAAM;MACvB,MAAM;QAAEC,SAAS;QAAEC,UAAU;QAAEC,YAAY;QAAEC,WAAW;QAAEC,YAAY;QAAEC;MAAY,CAAC,GACjFR,QAAQ;MAEZ,MAAMS,QAAwB,GAAG;QAC7BC,GAAG,EAAEL,YAAY,GAAGE,YAAY,GAAGJ,SAAS,IAAIE,YAAY,GAAGE,YAAY,CAAC,GAAG,CAAC;QAChFI,IAAI,EAAEL,WAAW,GAAGE,WAAW,GAAGJ,UAAU,IAAIE,WAAW,GAAGE,WAAW,CAAC,GAAG,CAAC;QAC9EL,SAAS;QACTC,UAAU;QACVC,YAAY;QACZC,WAAW;QACXC,YAAY;QACZC;MACJ,CAAC;MAEDd,sBAAsB,GAAGe,QAAQ,CAAC;MAClCd,QAAQ,GAAGc,QAAQ,CAAC;IACxB,CAAC;;IAED;IACAP,YAAY,CAAC,CAAC;IAEdF,QAAQ,CAACY,gBAAgB,CAAC,QAAQ,EAAEV,YAAY,CAAC;IACjD,OAAO,MAAMF,QAAQ,CAACa,mBAAmB,CAAC,QAAQ,EAAEX,YAAY,CAAC;EACrE,CAAC,EAAE,CAACR,sBAAsB,EAAEC,QAAQ,CAAC,CAAC;EAEtC,oBACIP,KAAA,CAAA0B,aAAA,CAACzB,mBAAmB,CAAC0B,IAAI,EAAAC,MAAA,CAAAC,MAAA;IACrB,aAAU,aAAa;IACvBzB,SAAS,EAAEF,EAAE,CAAC,UAAU,EAAEE,SAAS;EAAE,GACjCI,KAAK,gBAETR,KAAA,CAAA0B,aAAA,CAACzB,mBAAmB,CAAC6B,QAAQ;IACzBC,GAAG,EAAEtB,WAAY;IACjB,aAAU,sBAAsB;IAChCL,SAAS,EAAC;EAAoJ,GAE7JC,QACyB,CAAC,eAC/BL,KAAA,CAAA0B,aAAA,CAACM,SAAS,MAAE,CAAC,eACbhC,KAAA,CAAA0B,aAAA,CAACzB,mBAAmB,CAACgC,MAAM,MAAE,CACP,CAAC;AAEnC;AAEA,SAASD,SAASA,CAAC;EACf5B,SAAS;EACT8B,WAAW,GAAG,UAAU;EACxB,GAAG1B;AAC+D,CAAC,EAAE;EACrE,oBACIR,KAAA,CAAA0B,aAAA,CAACzB,mBAAmB,CAACkC,mBAAmB,EAAAP,MAAA,CAAAC,MAAA;IACpC,aAAU,uBAAuB;IACjCK,WAAW,EAAEA,WAAY;IACzB9B,SAAS,EAAEF,EAAE,CACT,+CAA+C,EAC/CgC,WAAW,KAAK,UAAU,IAAI,8CAA8C,EAC5EA,WAAW,KAAK,YAAY,IAAI,gDAAgD,EAChF9B,SACJ;EAAE,GACEI,KAAK,gBAETR,KAAA,CAAA0B,aAAA,CAACzB,mBAAmB,CAACmC,eAAe;IAChC,aAAU,mBAAmB;IAC7BhC,SAAS,EAAC;EAAmD,CAChE,CACoC,CAAC;AAElD;AAEA,SAASD,UAAU,EAAE6B,SAAS","ignoreList":[]}

package/SegmentedControl/SegmentedControl.mdx

@@ -1,6 +1,6 @@
-import { Canvas, Meta, Controls } from '@storybook/addon-docs/blocks';
+import { Canvas, Meta, Controls } from "@storybook/addon-docs/blocks";
 
-import * as SegmentedControlStories from './SegmentedControl.stories';
+import * as SegmentedControlStories from "./SegmentedControl.stories";
 
 <Meta of={SegmentedControlStories} />
 
@@ -24,19 +24,19 @@ import { SegmentedControl } from "@webiny/admin-ui";
 import { useState } from "react";
 
 const MyComponent = () => {
-    const [value, setValue] = useState("option1");
-
-    return (
-        <SegmentedControl
-            items={[
-                { label: "Option 1", value: "option1" },
-                { label: "Option 2", value: "option2" },
-                { label: "Option 3", value: "option3" }
-            ]}
-            value={value}
-            onChange={setValue}
-        />
-    );
+  const [value, setValue] = useState("option1");
+
+  return (
+    <SegmentedControl
+      items={[
+        { label: "Option 1", value: "option1" },
+        { label: "Option 2", value: "option2" },
+        { label: "Option 3", value: "option3" }
+      ]}
+      value={value}
+      onChange={setValue}
+    />
+  );
 };
 ```
 
@@ -47,38 +47,40 @@ import { SegmentedControl } from "@webiny/admin-ui";
 import { Icon } from "@webiny/admin-ui";
 
 <SegmentedControl
-    items={[
-        { label: "Lock", value: "lock", icon: <Icon name="lock" /> },
-        { label: "Unlock", value: "unlock", icon: <Icon name="lock-open" /> },
-        { label: "Settings", value: "settings", icon: <Icon name="settings" /> }
-    ]}
-    value={value}
-    onChange={setValue}
-/>
+  items={[
+    { label: "Lock", value: "lock", icon: <Icon name="lock" /> },
+    { label: "Unlock", value: "unlock", icon: <Icon name="lock-open" /> },
+    { label: "Settings", value: "settings", icon: <Icon name="settings" /> }
+  ]}
+  value={value}
+  onChange={setValue}
+/>;
 ```
 
 ## Variants
 
 ### Accent (Default)
+
 The accent variant uses the primary color for the selected state.
 
 ### Ghost
+
 The ghost variant is designed for use on dark backgrounds, using a more subtle appearance.
 
 ## Form Integration
 
 ```tsx
 <SegmentedControl
-    label="Select a plan"
-    description="Choose your subscription plan"
-    required
-    items={plans}
-    value={selectedPlan}
-    onChange={setSelectedPlan}
-    validation={{
-        isValid: false,
-        message: "Please select a plan"
-    }}
+  label="Select a plan"
+  description="Choose your subscription plan"
+  required
+  items={plans}
+  value={selectedPlan}
+  onChange={setSelectedPlan}
+  validation={{
+    isValid: false,
+    message: "Please select a plan"
+  }}
 />
 ```
 
@@ -86,38 +88,36 @@ The ghost variant is designed for use on dark backgrounds, using a more subtle a
 
 ### SegmentedControl Props
 
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| `items` | `SegmentedControlItemParams[]` | - | Array of items to display |
-| `value` | `string` | - | Currently selected value |
-| `onChange` | `(value: string) => void` | - | Callback when selection changes |
-| `variant` | `"accent" \| "ghost"` | `"accent"` | Visual style variant |
-| `size` | `"sm" \| "md"` | `"md"` | Size of the control |
-| `disabled` | `boolean` | `false` | Disable all items |
-| `className` | `string` | - | Additional CSS class |
-| `label` | `string \| React.ReactNode` | - | Form label |
-| `description` | `string \| React.ReactNode` | - | Form description |
-| `note` | `string \| React.ReactNode` | - | Form note |
-| `required` | `boolean` | - | Show required indicator |
-| `validation` | `object` | - | Validation state and message |
+| Prop          | Type                           | Default    | Description                     |
+| ------------- | ------------------------------ | ---------- | ------------------------------- |
+| `items`       | `SegmentedControlItemParams[]` | -          | Array of items to display       |
+| `value`       | `string`                       | -          | Currently selected value        |
+| `onChange`    | `(value: string) => void`      | -          | Callback when selection changes |
+| `variant`     | `"accent" \| "ghost"`          | `"accent"` | Visual style variant            |
+| `size`        | `"sm" \| "md"`                 | `"md"`     | Size of the control             |
+| `disabled`    | `boolean`                      | `false`    | Disable all items               |
+| `className`   | `string`                       | -          | Additional CSS class            |
+| `label`       | `string \| React.ReactNode`    | -          | Form label                      |
+| `description` | `string \| React.ReactNode`    | -          | Form description                |
+| `note`        | `string \| React.ReactNode`    | -          | Form note                       |
+| `required`    | `boolean`                      | -          | Show required indicator         |
+| `validation`  | `object`                       | -          | Validation state and message    |
 
 ### SegmentedControlItemParams
 
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| `label` | `string \| React.ReactNode` | - | Item label |
-| `value` | `string \| number` | - | Item value |
-| `disabled` | `boolean` | `false` | Disable this specific item |
-| `icon` | `React.ReactNode` | - | Optional icon to display |
-| `id` | `string` | - | Optional custom ID |
+| Prop       | Type                        | Default | Description                |
+| ---------- | --------------------------- | ------- | -------------------------- |
+| `label`    | `string \| React.ReactNode` | -       | Item label                 |
+| `value`    | `string \| number`          | -       | Item value                 |
+| `disabled` | `boolean`                   | `false` | Disable this specific item |
+| `icon`     | `React.ReactNode`           | -       | Optional icon to display   |
+| `id`       | `string`                    | -       | Optional custom ID         |
 
 ## Examples
 
-<Canvas of={SegmentedControlStories.General} />
-<Canvas of={SegmentedControlStories.VariantAccent} />
+<Canvas of={SegmentedControlStories.Default} />
+<Canvas of={SegmentedControlStories.VariantLight} />
+<Canvas of={SegmentedControlStories.VariantDimmed} />
 <Canvas of={SegmentedControlStories.VariantGhost} />
-<Canvas of={SegmentedControlStories.StatesAccent} />
-<Canvas of={SegmentedControlStories.StatesGhost} />
 <Canvas of={SegmentedControlStories.WithFormComponent} />
 <Canvas of={SegmentedControlStories.Disabled} />
-

package/SegmentedControl/primitives/SegmentedControlPrimitive.d.ts

@@ -6,7 +6,7 @@ import type { SegmentedControlItemParams, SegmentedControlItemFormatted } from "
  */
 declare const segmentedControlItemVariants: (props?: ({
     variant?: "ghost" | "dimmed" | "light" | null | undefined;
-} & import("class-variance-authority/dist/types.js").ClassProp) | undefined) => string;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
 /**
  * Segmented Control Primitive
  */

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\n    extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, \"value\"> {\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":"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","ignoreList":[]}
+{"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":"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","ignoreList":[]}