@webiny/admin-ui 0.0.0-unstable.06b2ede40f

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

@@ -0,0 +1,48 @@
+import { RadioGroupPresenter } from "./RadioGroupPresenter";
+describe("RadioGroupPresenter", () => {
+  const onValueChange = jest.fn();
+  it("should return the compatible `vm` based on props", () => {
+    // `items`
+    {
+      const presenter = new RadioGroupPresenter();
+      presenter.init({
+        onValueChange,
+        items: [{
+          value: "value-1",
+          label: "Value 1"
+        }, {
+          value: "value-2",
+          label: "Value 2"
+        }]
+      });
+      expect(presenter.vm.items).toEqual([{
+        id: expect.any(String),
+        value: "value-1",
+        label: "Value 1",
+        disabled: false
+      }, {
+        id: expect.any(String),
+        value: "value-2",
+        label: "Value 2",
+        disabled: false
+      }]);
+    }
+  });
+  it("should call `onValueChange` callback when `changeValue` is called", () => {
+    const presenter = new RadioGroupPresenter();
+    presenter.init({
+      onValueChange,
+      items: [{
+        value: "value-1",
+        label: "Value 1"
+      }, {
+        value: "value-2",
+        label: "Value 2"
+      }]
+    });
+    presenter.changeValue("value-2");
+    expect(onValueChange).toHaveBeenCalledWith("value-2");
+  });
+});
+
+//# sourceMappingURL=RadioGroupPresenter.test.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["RadioGroupPresenter","describe","onValueChange","jest","fn","it","presenter","init","items","value","label","expect","vm","toEqual","id","any","String","disabled","changeValue","toHaveBeenCalledWith"],"sources":["RadioGroupPresenter.test.ts"],"sourcesContent":["import { RadioGroupPresenter } from \"./RadioGroupPresenter\";\n\ndescribe(\"RadioGroupPresenter\", () => {\n    const onValueChange = jest.fn();\n\n    it(\"should return the compatible `vm` based on props\", () => {\n        // `items`\n        {\n            const presenter = new RadioGroupPresenter();\n            presenter.init({\n                onValueChange,\n                items: [\n                    {\n                        value: \"value-1\",\n                        label: \"Value 1\"\n                    },\n                    {\n                        value: \"value-2\",\n                        label: \"Value 2\"\n                    }\n                ]\n            });\n            expect(presenter.vm.items).toEqual([\n                {\n                    id: expect.any(String),\n                    value: \"value-1\",\n                    label: \"Value 1\",\n                    disabled: false\n                },\n                {\n                    id: expect.any(String),\n                    value: \"value-2\",\n                    label: \"Value 2\",\n                    disabled: false\n                }\n            ]);\n        }\n    });\n\n    it(\"should call `onValueChange` callback when `changeValue` is called\", () => {\n        const presenter = new RadioGroupPresenter();\n        presenter.init({\n            onValueChange,\n            items: [\n                {\n                    value: \"value-1\",\n                    label: \"Value 1\"\n                },\n                {\n                    value: \"value-2\",\n                    label: \"Value 2\"\n                }\n            ]\n        });\n        presenter.changeValue(\"value-2\");\n        expect(onValueChange).toHaveBeenCalledWith(\"value-2\");\n    });\n});\n"],"mappings":"AAAA,SAASA,mBAAmB;AAE5BC,QAAQ,CAAC,qBAAqB,EAAE,MAAM;EAClC,MAAMC,aAAa,GAAGC,IAAI,CAACC,EAAE,CAAC,CAAC;EAE/BC,EAAE,CAAC,kDAAkD,EAAE,MAAM;IACzD;IACA;MACI,MAAMC,SAAS,GAAG,IAAIN,mBAAmB,CAAC,CAAC;MAC3CM,SAAS,CAACC,IAAI,CAAC;QACXL,aAAa;QACbM,KAAK,EAAE,CACH;UACIC,KAAK,EAAE,SAAS;UAChBC,KAAK,EAAE;QACX,CAAC,EACD;UACID,KAAK,EAAE,SAAS;UAChBC,KAAK,EAAE;QACX,CAAC;MAET,CAAC,CAAC;MACFC,MAAM,CAACL,SAAS,CAACM,EAAE,CAACJ,KAAK,CAAC,CAACK,OAAO,CAAC,CAC/B;QACIC,EAAE,EAAEH,MAAM,CAACI,GAAG,CAACC,MAAM,CAAC;QACtBP,KAAK,EAAE,SAAS;QAChBC,KAAK,EAAE,SAAS;QAChBO,QAAQ,EAAE;MACd,CAAC,EACD;QACIH,EAAE,EAAEH,MAAM,CAACI,GAAG,CAACC,MAAM,CAAC;QACtBP,KAAK,EAAE,SAAS;QAChBC,KAAK,EAAE,SAAS;QAChBO,QAAQ,EAAE;MACd,CAAC,CACJ,CAAC;IACN;EACJ,CAAC,CAAC;EAEFZ,EAAE,CAAC,mEAAmE,EAAE,MAAM;IAC1E,MAAMC,SAAS,GAAG,IAAIN,mBAAmB,CAAC,CAAC;IAC3CM,SAAS,CAACC,IAAI,CAAC;MACXL,aAAa;MACbM,KAAK,EAAE,CACH;QACIC,KAAK,EAAE,SAAS;QAChBC,KAAK,EAAE;MACX,CAAC,EACD;QACID,KAAK,EAAE,SAAS;QAChBC,KAAK,EAAE;MACX,CAAC;IAET,CAAC,CAAC;IACFJ,SAAS,CAACY,WAAW,CAAC,SAAS,CAAC;IAChCP,MAAM,CAACT,aAAa,CAAC,CAACiB,oBAAoB,CAAC,SAAS,CAAC;EACzD,CAAC,CAAC;AACN,CAAC,CAAC","ignoreList":[]}

package/RadioGroup/primitives/presenters/index.d.ts

@@ -0,0 +1 @@
+export * from "./RadioGroupPresenter";

package/RadioGroup/primitives/presenters/index.js

@@ -0,0 +1,3 @@
+export * from "./RadioGroupPresenter";
+
+//# sourceMappingURL=index.js.map

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

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

package/RadioGroup/primitives/useRadioGroup.d.ts

@@ -0,0 +1,7 @@
+import type { RadioGroupPrimitiveProps } from "./RadioGroupPrimitive";
+export declare const useRadioGroup: (props: RadioGroupPrimitiveProps) => {
+    vm: {
+        items: import("../domains").RadioItemFormatted[];
+    };
+    changeValue: (value: string) => void;
+};

package/RadioGroup/primitives/useRadioGroup.js

@@ -0,0 +1,27 @@
+import { useEffect, useMemo, useState } from "react";
+import { autorun } from "mobx";
+import { RadioGroupPresenter } from "./presenters/RadioGroupPresenter";
+export const useRadioGroup = props => {
+  const params = useMemo(() => ({
+    items: props.items,
+    onValueChange: props.onChange
+  }), [props.items, props.onChange]);
+  const presenter = useMemo(() => {
+    return new RadioGroupPresenter();
+  }, []);
+  useEffect(() => {
+    presenter.init(params);
+  }, [params]);
+  const [vm, setVm] = useState(presenter.vm);
+  useEffect(() => {
+    return autorun(() => {
+      setVm(presenter.vm);
+    });
+  }, [presenter]);
+  return {
+    vm,
+    changeValue: presenter.changeValue
+  };
+};
+
+//# sourceMappingURL=useRadioGroup.js.map

package/RadioGroup/primitives/useRadioGroup.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["useEffect","useMemo","useState","autorun","RadioGroupPresenter","useRadioGroup","props","params","items","onValueChange","onChange","presenter","init","vm","setVm","changeValue"],"sources":["useRadioGroup.ts"],"sourcesContent":["import { useEffect, useMemo, useState } from \"react\";\nimport { autorun } from \"mobx\";\nimport type { RadioGroupPrimitiveProps } from \"./RadioGroupPrimitive\";\nimport type { RadioGroupPresenterParams } from \"./presenters/RadioGroupPresenter\";\nimport { RadioGroupPresenter } from \"./presenters/RadioGroupPresenter\";\n\nexport const useRadioGroup = (props: RadioGroupPrimitiveProps) => {\n    const params: RadioGroupPresenterParams = useMemo(\n        () => ({\n            items: props.items,\n            onValueChange: props.onChange\n        }),\n        [props.items, props.onChange]\n    );\n\n    const presenter = useMemo(() => {\n        return new RadioGroupPresenter();\n    }, []);\n\n    useEffect(() => {\n        presenter.init(params);\n    }, [params]);\n\n    const [vm, setVm] = useState(presenter.vm);\n\n    useEffect(() => {\n        return autorun(() => {\n            setVm(presenter.vm);\n        });\n    }, [presenter]);\n\n    return { vm, changeValue: presenter.changeValue };\n};\n"],"mappings":"AAAA,SAASA,SAAS,EAAEC,OAAO,EAAEC,QAAQ,QAAQ,OAAO;AACpD,SAASC,OAAO,QAAQ,MAAM;AAG9B,SAASC,mBAAmB;AAE5B,OAAO,MAAMC,aAAa,GAAIC,KAA+B,IAAK;EAC9D,MAAMC,MAAiC,GAAGN,OAAO,CAC7C,OAAO;IACHO,KAAK,EAAEF,KAAK,CAACE,KAAK;IAClBC,aAAa,EAAEH,KAAK,CAACI;EACzB,CAAC,CAAC,EACF,CAACJ,KAAK,CAACE,KAAK,EAAEF,KAAK,CAACI,QAAQ,CAChC,CAAC;EAED,MAAMC,SAAS,GAAGV,OAAO,CAAC,MAAM;IAC5B,OAAO,IAAIG,mBAAmB,CAAC,CAAC;EACpC,CAAC,EAAE,EAAE,CAAC;EAENJ,SAAS,CAAC,MAAM;IACZW,SAAS,CAACC,IAAI,CAACL,MAAM,CAAC;EAC1B,CAAC,EAAE,CAACA,MAAM,CAAC,CAAC;EAEZ,MAAM,CAACM,EAAE,EAAEC,KAAK,CAAC,GAAGZ,QAAQ,CAACS,SAAS,CAACE,EAAE,CAAC;EAE1Cb,SAAS,CAAC,MAAM;IACZ,OAAOG,OAAO,CAAC,MAAM;MACjBW,KAAK,CAACH,SAAS,CAACE,EAAE,CAAC;IACvB,CAAC,CAAC;EACN,CAAC,EAAE,CAACF,SAAS,CAAC,CAAC;EAEf,OAAO;IAAEE,EAAE;IAAEE,WAAW,EAAEJ,SAAS,CAACI;EAAY,CAAC;AACrD,CAAC","ignoreList":[]}

package/RangeSlider/RangeSlider.d.ts

@@ -0,0 +1,27 @@
+import * as React from "react";
+import type { RangeSliderPrimitiveProps } from "./primitives";
+import type { FormComponentProps } from "../FormComponent";
+type RangeSliderProps = RangeSliderPrimitiveProps & FormComponentProps & {
+    label: React.ReactNode;
+    valueConverter?: (value: number) => string;
+};
+declare const RangeSlider: (({ description, note, validation, ...props }: RangeSliderProps) => React.JSX.Element) & {
+    original: ({ description, note, validation, ...props }: RangeSliderProps) => React.JSX.Element;
+    originalName: string;
+    displayName: string;
+} & {
+    original: (({ description, note, validation, ...props }: RangeSliderProps) => React.JSX.Element) & {
+        original: ({ description, note, validation, ...props }: RangeSliderProps) => React.JSX.Element;
+        originalName: string;
+        displayName: string;
+    };
+    originalName: string;
+    displayName: string;
+} & {
+    createDecorator: (decorator: import("@webiny/react-composition").ComponentDecorator<(({ description, note, validation, ...props }: RangeSliderProps) => React.JSX.Element) & {
+        original: ({ description, note, validation, ...props }: RangeSliderProps) => React.JSX.Element;
+        originalName: string;
+        displayName: string;
+    }>) => (props: unknown) => React.JSX.Element;
+};
+export { RangeSlider, type RangeSliderProps };

package/RangeSlider/RangeSlider.js

@@ -0,0 +1,69 @@
+import * as React from "react";
+import { makeDecoratable } from "../utils";
+import { RangeSliderPrimitiveRenderer, RangeSliderValue, useRangeSlider } from "./primitives";
+import { FormComponentDescription, FormComponentErrorMessage, FormComponentLabel, FormComponentNote } from "../FormComponent";
+const DecoratableRangeSlider = ({
+  description,
+  note,
+  validation,
+  ...props
+}) => {
+  const {
+    isValid: validationIsValid,
+    message: validationMessage
+  } = validation || {};
+  const invalid = React.useMemo(() => validationIsValid === false, [validationIsValid]);
+  const {
+    onValuesChange,
+    onValuesCommit,
+    ...restProps
+  } = props;
+  const {
+    vm,
+    changeValues,
+    commitValues
+  } = useRangeSlider({
+    ...restProps,
+    onValuesChange,
+    onValuesCommit
+  });
+  return /*#__PURE__*/React.createElement("div", {
+    className: "wby-w-full"
+  }, /*#__PURE__*/React.createElement(FormComponentLabel, {
+    text: props.label,
+    required: props.required,
+    disabled: props.disabled,
+    invalid: invalid
+  }), /*#__PURE__*/React.createElement(FormComponentDescription, {
+    text: description,
+    disabled: props.disabled
+  }), /*#__PURE__*/React.createElement("div", {
+    className: "wby-flex wby-flex-row wby-items-center wby-justify-between"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "wby-basis-1/12 wby-pr-xxs"
+  }, /*#__PURE__*/React.createElement(RangeSliderValue, {
+    value: vm.textValues[0],
+    disabled: props.disabled
+  })), /*#__PURE__*/React.createElement("div", {
+    className: "wby-basis-10/12"
+  }, /*#__PURE__*/React.createElement(RangeSliderPrimitiveRenderer, Object.assign({}, restProps, vm, {
+    onValueChange: changeValues,
+    onValueCommit: commitValues
+  }))), /*#__PURE__*/React.createElement("div", {
+    className: "wby-basis-1/12 wby-pl-xxs wby-text-right"
+  }, /*#__PURE__*/React.createElement(RangeSliderValue, {
+    value: vm.textValues[1],
+    disabled: props.disabled
+  }))), /*#__PURE__*/React.createElement(FormComponentErrorMessage, {
+    text: validationMessage,
+    invalid: invalid,
+    disabled: props.disabled
+  }), /*#__PURE__*/React.createElement(FormComponentNote, {
+    text: note,
+    disabled: props.disabled
+  }));
+};
+const RangeSlider = makeDecoratable("RangeSlider", DecoratableRangeSlider);
+export { RangeSlider };
+
+//# sourceMappingURL=RangeSlider.js.map

package/RangeSlider/RangeSlider.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","makeDecoratable","RangeSliderPrimitiveRenderer","RangeSliderValue","useRangeSlider","FormComponentDescription","FormComponentErrorMessage","FormComponentLabel","FormComponentNote","DecoratableRangeSlider","description","note","validation","props","isValid","validationIsValid","message","validationMessage","invalid","useMemo","onValuesChange","onValuesCommit","restProps","vm","changeValues","commitValues","createElement","className","text","label","required","disabled","value","textValues","Object","assign","onValueChange","onValueCommit","RangeSlider"],"sources":["RangeSlider.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { makeDecoratable } from \"~/utils\";\nimport type { RangeSliderPrimitiveProps } from \"./primitives\";\nimport { RangeSliderPrimitiveRenderer, RangeSliderValue, useRangeSlider } from \"./primitives\";\nimport type { FormComponentProps } from \"~/FormComponent\";\nimport {\n    FormComponentDescription,\n    FormComponentErrorMessage,\n    FormComponentLabel,\n    FormComponentNote\n} from \"~/FormComponent\";\n\ntype RangeSliderProps = RangeSliderPrimitiveProps &\n    FormComponentProps & {\n        label: React.ReactNode;\n        valueConverter?: (value: number) => string;\n    };\n\nconst DecoratableRangeSlider = ({ description, note, validation, ...props }: RangeSliderProps) => {\n    const { isValid: validationIsValid, message: validationMessage } = validation || {};\n    const invalid = React.useMemo(() => validationIsValid === false, [validationIsValid]);\n    const { onValuesChange, onValuesCommit, ...restProps } = props;\n    const { vm, changeValues, commitValues } = useRangeSlider({\n        ...restProps,\n        onValuesChange,\n        onValuesCommit\n    });\n\n    return (\n        <div className={\"wby-w-full\"}>\n            <FormComponentLabel\n                text={props.label}\n                required={props.required}\n                disabled={props.disabled}\n                invalid={invalid}\n            />\n            <FormComponentDescription text={description} disabled={props.disabled} />\n            <div className={\"wby-flex wby-flex-row wby-items-center wby-justify-between\"}>\n                <div className={\"wby-basis-1/12 wby-pr-xxs\"}>\n                    <RangeSliderValue value={vm.textValues[0]} disabled={props.disabled} />\n                </div>\n                <div className={\"wby-basis-10/12\"}>\n                    <RangeSliderPrimitiveRenderer\n                        {...restProps}\n                        {...vm}\n                        onValueChange={changeValues}\n                        onValueCommit={commitValues}\n                    />\n                </div>\n                <div className={\"wby-basis-1/12 wby-pl-xxs wby-text-right\"}>\n                    <RangeSliderValue value={vm.textValues[1]} disabled={props.disabled} />\n                </div>\n            </div>\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 RangeSlider = makeDecoratable(\"RangeSlider\", DecoratableRangeSlider);\n\nexport { RangeSlider, type RangeSliderProps };\n"],"mappings":"AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,eAAe;AAExB,SAASC,4BAA4B,EAAEC,gBAAgB,EAAEC,cAAc;AAEvE,SACIC,wBAAwB,EACxBC,yBAAyB,EACzBC,kBAAkB,EAClBC,iBAAiB;AASrB,MAAMC,sBAAsB,GAAGA,CAAC;EAAEC,WAAW;EAAEC,IAAI;EAAEC,UAAU;EAAE,GAAGC;AAAwB,CAAC,KAAK;EAC9F,MAAM;IAAEC,OAAO,EAAEC,iBAAiB;IAAEC,OAAO,EAAEC;EAAkB,CAAC,GAAGL,UAAU,IAAI,CAAC,CAAC;EACnF,MAAMM,OAAO,GAAGlB,KAAK,CAACmB,OAAO,CAAC,MAAMJ,iBAAiB,KAAK,KAAK,EAAE,CAACA,iBAAiB,CAAC,CAAC;EACrF,MAAM;IAAEK,cAAc;IAAEC,cAAc;IAAE,GAAGC;EAAU,CAAC,GAAGT,KAAK;EAC9D,MAAM;IAAEU,EAAE;IAAEC,YAAY;IAAEC;EAAa,CAAC,GAAGrB,cAAc,CAAC;IACtD,GAAGkB,SAAS;IACZF,cAAc;IACdC;EACJ,CAAC,CAAC;EAEF,oBACIrB,KAAA,CAAA0B,aAAA;IAAKC,SAAS,EAAE;EAAa,gBACzB3B,KAAA,CAAA0B,aAAA,CAACnB,kBAAkB;IACfqB,IAAI,EAAEf,KAAK,CAACgB,KAAM;IAClBC,QAAQ,EAAEjB,KAAK,CAACiB,QAAS;IACzBC,QAAQ,EAAElB,KAAK,CAACkB,QAAS;IACzBb,OAAO,EAAEA;EAAQ,CACpB,CAAC,eACFlB,KAAA,CAAA0B,aAAA,CAACrB,wBAAwB;IAACuB,IAAI,EAAElB,WAAY;IAACqB,QAAQ,EAAElB,KAAK,CAACkB;EAAS,CAAE,CAAC,eACzE/B,KAAA,CAAA0B,aAAA;IAAKC,SAAS,EAAE;EAA6D,gBACzE3B,KAAA,CAAA0B,aAAA;IAAKC,SAAS,EAAE;EAA4B,gBACxC3B,KAAA,CAAA0B,aAAA,CAACvB,gBAAgB;IAAC6B,KAAK,EAAET,EAAE,CAACU,UAAU,CAAC,CAAC,CAAE;IAACF,QAAQ,EAAElB,KAAK,CAACkB;EAAS,CAAE,CACrE,CAAC,eACN/B,KAAA,CAAA0B,aAAA;IAAKC,SAAS,EAAE;EAAkB,gBAC9B3B,KAAA,CAAA0B,aAAA,CAACxB,4BAA4B,EAAAgC,MAAA,CAAAC,MAAA,KACrBb,SAAS,EACTC,EAAE;IACNa,aAAa,EAAEZ,YAAa;IAC5Ba,aAAa,EAAEZ;EAAa,EAC/B,CACA,CAAC,eACNzB,KAAA,CAAA0B,aAAA;IAAKC,SAAS,EAAE;EAA2C,gBACvD3B,KAAA,CAAA0B,aAAA,CAACvB,gBAAgB;IAAC6B,KAAK,EAAET,EAAE,CAACU,UAAU,CAAC,CAAC,CAAE;IAACF,QAAQ,EAAElB,KAAK,CAACkB;EAAS,CAAE,CACrE,CACJ,CAAC,eACN/B,KAAA,CAAA0B,aAAA,CAACpB,yBAAyB;IACtBsB,IAAI,EAAEX,iBAAkB;IACxBC,OAAO,EAAEA,OAAQ;IACjBa,QAAQ,EAAElB,KAAK,CAACkB;EAAS,CAC5B,CAAC,eACF/B,KAAA,CAAA0B,aAAA,CAAClB,iBAAiB;IAACoB,IAAI,EAAEjB,IAAK;IAACoB,QAAQ,EAAElB,KAAK,CAACkB;EAAS,CAAE,CACzD,CAAC;AAEd,CAAC;AAED,MAAMO,WAAW,GAAGrC,eAAe,CAAC,aAAa,EAAEQ,sBAAsB,CAAC;AAE1E,SAAS6B,WAAW","ignoreList":[]}

package/RangeSlider/RangeSlider.mdx

@@ -0,0 +1,108 @@
+import { Canvas, Meta, Controls } from '@storybook/blocks';
+
+import * as RangeSliderStories from './RangeSlider.stories';
+
+<Meta of={RangeSliderStories} />
+
+# Range Slider
+
+The Range Slider component is an interactive input control that allows users to select a range of values by moving two thumbs along a track. It provides a visual and intuitive way for users to define minimum and maximum values within a predefined range.
+
+## Usage
+
+<Canvas of={RangeSliderStories.Documentation} source={ { code: `
+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>
+    );
+};
+
+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'
+                    );
+                },
+            }
+        ]}
+/>
+
+<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>
+    );
+};
+
+export default RangeSliderExample;
+```

package/RangeSlider/RangeSlider.stories.d.ts

@@ -0,0 +1,13 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { RangeSlider } from "./RangeSlider";
+declare const meta: Meta<typeof RangeSlider>;
+export default meta;
+type Story = StoryObj<typeof RangeSlider>;
+export declare const Default: Story;
+export declare const WithLabelRequired: Story;
+export declare const WithDescription: Story;
+export declare const WithNotes: Story;
+export declare const WithErrors: Story;
+export declare const Disabled: Story;
+export declare const FullExample: Story;
+export declare const Documentation: Story;

package/RangeSlider/RangeSlider.stories.js

@@ -0,0 +1,203 @@
+import React, { useState, useEffect } from "react";
+import { RangeSlider } from "./RangeSlider";
+const meta = {
+  title: "Components/Form/RangeSlider",
+  component: RangeSlider,
+  argTypes: {
+    onValuesChange: {
+      action: "onValuesChange"
+    },
+    onValuesCommit: {
+      action: "onValuesCommit"
+    },
+    disabled: {
+      control: "boolean",
+      defaultValue: false
+    }
+  },
+  parameters: {
+    layout: "padded"
+  },
+  render: args => {
+    const [values, setValues] = useState(args.values);
+    return /*#__PURE__*/React.createElement(RangeSlider, Object.assign({}, args, {
+      values: values,
+      onValuesChange: values => setValues(values)
+    }));
+  }
+};
+export default meta;
+export const Default = {
+  args: {
+    label: "Any field label"
+  }
+};
+export const WithLabelRequired = {
+  args: {
+    ...Default.args,
+    required: true
+  }
+};
+export const WithDescription = {
+  args: {
+    description: "Provide the required information for processing your request."
+  }
+};
+export const WithNotes = {
+  args: {
+    note: "Note: Ensure your selection or input is accurate before proceeding."
+  }
+};
+export const WithErrors = {
+  args: {
+    validation: {
+      isValid: false,
+      message: "This field is required."
+    }
+  }
+};
+export const Disabled = {
+  args: {
+    label: "Any field label",
+    disabled: true
+  }
+};
+export const FullExample = {
+  args: {
+    ...Default.args,
+    label: "Any field label",
+    required: true,
+    description: "Provide the required information for processing your request.",
+    note: "Note: Ensure your selection or input is accurate before proceeding.",
+    validation: {
+      isValid: false,
+      message: "This field is required."
+    }
+  }
+};
+export const Documentation = {
+  render: args => {
+    const [values, setValues] = useState(args.values || [25, 75]);
+    const [validation, setValidation] = useState({
+      isValid: true,
+      message: ""
+    });
+
+    // Update values when args.values changes
+    useEffect(() => {
+      setValues(args.values || [25, 75]);
+    }, [args.values]);
+    const handleChange = newValues => {
+      setValues(newValues);
+      if (args.required && newValues[0] === 0 && newValues[1] === 0) {
+        setValidation({
+          isValid: false,
+          message: "Please select a range"
+        });
+      } else {
+        setValidation({
+          isValid: true,
+          message: ""
+        });
+      }
+    };
+
+    // Validate on required change or values change
+    useEffect(() => {
+      if (args.required && values[0] === 0 && values[1] === 0) {
+        setValidation({
+          isValid: false,
+          message: "Please select a range"
+        });
+      } else {
+        setValidation({
+          isValid: true,
+          message: ""
+        });
+      }
+    }, [args.required, values]);
+    return /*#__PURE__*/React.createElement(RangeSlider, Object.assign({}, args, {
+      values: values,
+      onValuesChange: handleChange,
+      validation: validation,
+      required: args.required,
+      showTooltip: args.showTooltip,
+      transformValue: args.transformValue
+    }));
+  },
+  args: {
+    label: "Price Range",
+    required: true,
+    disabled: false,
+    description: "Select the minimum and maximum price range",
+    note: "Note: The selected range will filter available products",
+    min: 0,
+    max: 100,
+    step: 1,
+    values: [25, 75],
+    showTooltip: true,
+    transformValue: value => `$${value}`,
+    validation: undefined
+  },
+  argTypes: {
+    label: {
+      description: "Label text for the range slider",
+      control: "text"
+    },
+    required: {
+      description: "Makes the field required when set to true",
+      control: "boolean"
+    },
+    disabled: {
+      description: "Disables the range slider when set to true",
+      control: "boolean"
+    },
+    description: {
+      description: "Additional description text below the field",
+      control: "text"
+    },
+    note: {
+      description: "Additional note text below the field",
+      control: "text"
+    },
+    min: {
+      description: "Minimum value for the range slider",
+      control: "number"
+    },
+    max: {
+      description: "Maximum value for the range slider",
+      control: "number"
+    },
+    step: {
+      description: "Step increment for the range slider",
+      control: "number"
+    },
+    values: {
+      description: "Current values of the range slider [min, max]",
+      control: "object"
+    },
+    showTooltip: {
+      description: "Whether to show tooltips with the current values",
+      control: "boolean",
+      defaultValue: true
+    },
+    transformValue: {
+      description: "Function to transform the numeric values to display text. Please refer to the example code for details on usage.",
+      control: "none"
+    },
+    validation: {
+      description: "Object containing validation state and message. Please refer to the example code for details on usage.",
+      control: "none"
+    },
+    onValuesChange: {
+      description: "Function called when the range slider values change",
+      control: "none"
+    },
+    onValuesCommit: {
+      description: "Function called when the range slider values are committed (on release)",
+      control: "none"
+    }
+  }
+};
+
+//# sourceMappingURL=RangeSlider.stories.js.map

package/RangeSlider/RangeSlider.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","useState","useEffect","RangeSlider","meta","title","component","argTypes","onValuesChange","action","onValuesCommit","disabled","control","defaultValue","parameters","layout","render","args","values","setValues","createElement","Object","assign","Default","label","WithLabelRequired","required","WithDescription","description","WithNotes","note","WithErrors","validation","isValid","message","Disabled","FullExample","Documentation","setValidation","handleChange","newValues","showTooltip","transformValue","min","max","step","value","undefined"],"sources":["RangeSlider.stories.tsx"],"sourcesContent":["import React, { useState, useEffect } from \"react\";\nimport type { Meta, StoryObj } from \"@storybook/react\";\nimport { RangeSlider } from \"./RangeSlider\";\n\nconst meta: Meta<typeof RangeSlider> = {\n    title: \"Components/Form/RangeSlider\",\n    component: RangeSlider,\n    argTypes: {\n        onValuesChange: { action: \"onValuesChange\" },\n        onValuesCommit: { action: \"onValuesCommit\" },\n        disabled: {\n            control: \"boolean\",\n            defaultValue: false\n        }\n    },\n    parameters: {\n        layout: \"padded\"\n    },\n    render: args => {\n        const [values, setValues] = useState(args.values);\n        return (\n            <RangeSlider {...args} values={values} onValuesChange={values => setValues(values)} />\n        );\n    }\n};\n\nexport default meta;\ntype Story = StoryObj<typeof RangeSlider>;\n\nexport const Default: Story = {\n    args: {\n        label: \"Any field label\"\n    }\n};\n\nexport const WithLabelRequired: Story = {\n    args: {\n        ...Default.args,\n        required: true\n    }\n};\n\nexport const WithDescription: Story = {\n    args: {\n        description: \"Provide the required information for processing your request.\"\n    }\n};\n\nexport const WithNotes: Story = {\n    args: {\n        note: \"Note: Ensure your selection or input is accurate before proceeding.\"\n    }\n};\n\nexport const WithErrors: Story = {\n    args: {\n        validation: {\n            isValid: false,\n            message: \"This field is required.\"\n        }\n    }\n};\n\nexport const Disabled: Story = {\n    args: {\n        label: \"Any field label\",\n        disabled: true\n    }\n};\n\nexport const FullExample: Story = {\n    args: {\n        ...Default.args,\n        label: \"Any field label\",\n        required: true,\n        description: \"Provide the required information for processing your request.\",\n        note: \"Note: Ensure your selection or input is accurate before proceeding.\",\n        validation: {\n            isValid: false,\n            message: \"This field is required.\"\n        }\n    }\n};\n\nexport const Documentation: Story = {\n    render: args => {\n        const [values, setValues] = useState(args.values || [25, 75]);\n        const [validation, setValidation] = useState({ isValid: true, message: \"\" });\n\n        // Update values when args.values changes\n        useEffect(() => {\n            setValues(args.values || [25, 75]);\n        }, [args.values]);\n\n        const handleChange = (newValues: number[]) => {\n            setValues(newValues);\n\n            if (args.required && newValues[0] === 0 && newValues[1] === 0) {\n                setValidation({ isValid: false, message: \"Please select a range\" });\n            } else {\n                setValidation({ isValid: true, message: \"\" });\n            }\n        };\n\n        // Validate on required change or values change\n        useEffect(() => {\n            if (args.required && values[0] === 0 && values[1] === 0) {\n                setValidation({ isValid: false, message: \"Please select a range\" });\n            } else {\n                setValidation({ isValid: true, message: \"\" });\n            }\n        }, [args.required, values]);\n\n        return (\n            <RangeSlider\n                {...args}\n                values={values}\n                onValuesChange={handleChange}\n                validation={validation}\n                required={args.required}\n                showTooltip={args.showTooltip}\n                transformValue={args.transformValue}\n            />\n        );\n    },\n    args: {\n        label: \"Price Range\",\n        required: true,\n        disabled: false,\n        description: \"Select the minimum and maximum price range\",\n        note: \"Note: The selected range will filter available products\",\n        min: 0,\n        max: 100,\n        step: 1,\n        values: [25, 75],\n        showTooltip: true,\n        transformValue: (value: number) => `$${value}`,\n        validation: undefined\n    },\n    argTypes: {\n        label: {\n            description: \"Label text for the range slider\",\n            control: \"text\"\n        },\n        required: {\n            description: \"Makes the field required when set to true\",\n            control: \"boolean\"\n        },\n        disabled: {\n            description: \"Disables the range slider when set to true\",\n            control: \"boolean\"\n        },\n        description: {\n            description: \"Additional description text below the field\",\n            control: \"text\"\n        },\n        note: {\n            description: \"Additional note text below the field\",\n            control: \"text\"\n        },\n        min: {\n            description: \"Minimum value for the range slider\",\n            control: \"number\"\n        },\n        max: {\n            description: \"Maximum value for the range slider\",\n            control: \"number\"\n        },\n        step: {\n            description: \"Step increment for the range slider\",\n            control: \"number\"\n        },\n        values: {\n            description: \"Current values of the range slider [min, max]\",\n            control: \"object\"\n        },\n        showTooltip: {\n            description: \"Whether to show tooltips with the current values\",\n            control: \"boolean\",\n            defaultValue: true\n        },\n        transformValue: {\n            description:\n                \"Function to transform the numeric values to display text. Please refer to the example code for details on usage.\",\n            control: \"none\"\n        },\n        validation: {\n            description:\n                \"Object containing validation state and message. Please refer to the example code for details on usage.\",\n            control: \"none\"\n        },\n        onValuesChange: {\n            description: \"Function called when the range slider values change\",\n            control: \"none\"\n        },\n        onValuesCommit: {\n            description: \"Function called when the range slider values are committed (on release)\",\n            control: \"none\"\n        }\n    }\n};\n"],"mappings":"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","ignoreList":[]}

package/RangeSlider/index.d.ts

@@ -0,0 +1,2 @@
+export * from "./RangeSlider";
+export * from "./primitives/RangeSliderPrimitive";

package/RangeSlider/index.js

@@ -0,0 +1,4 @@
+export * from "./RangeSlider";
+export * from "./primitives/RangeSliderPrimitive";
+
+//# sourceMappingURL=index.js.map

package/RangeSlider/index.js.map

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

package/RangeSlider/primitives/RangeSliderPrimitive.d.ts

@@ -0,0 +1,40 @@
+import * as React from "react";
+import type { Slider as SliderPrimitives } from "radix-ui";
+import { type SliderThumbProps } from "../../Slider";
+interface RangeSliderPrimitiveRootProps extends Omit<SliderPrimitives.SliderProps, "min" | "max" | "value"> {
+    /**
+     * Array of numbers representing the current values of the range slider.
+     */
+    values: number[];
+    /**
+     * Minimum value of the range slider.
+     */
+    min: number;
+    /**
+     * Maximum value of the range slider.
+     */
+    max: number;
+}
+interface RangeSliderPrimitiveThumbProps extends Omit<SliderThumbProps, "labelValue"> {
+    textValues: string[];
+}
+interface RangeSliderPrimitiveVm extends RangeSliderPrimitiveRootProps, Omit<RangeSliderPrimitiveThumbProps, "textValue"> {
+    textValues: string[];
+}
+/**
+ * RangeSliderRenderer
+ */
+declare const RangeSliderPrimitiveRenderer: ({ tooltipSide, textValues, showTooltip, values, ...sliderProps }: RangeSliderPrimitiveVm) => React.JSX.Element;
+/**
+ * RangeSlider
+ */
+interface RangeSliderPrimitiveProps extends Omit<SliderPrimitives.SliderProps, "defaultValue" | "value" | "onValueChange" | "onValueCommit"> {
+    onValuesChange: (values: number[]) => void;
+    onValuesCommit?: (values: number[]) => void;
+    showTooltip?: boolean;
+    tooltipSide?: "top" | "bottom";
+    transformValue?: (value: number) => string;
+    values?: number[];
+}
+declare const RangeSliderPrimitive: (props: RangeSliderPrimitiveProps) => React.JSX.Element;
+export { RangeSliderPrimitive, RangeSliderPrimitiveRenderer, type RangeSliderPrimitiveProps, type RangeSliderPrimitiveVm };