allaw-ui 3.8.8 → 3.9.0

package/dist/components/molecules/rangeSlider/RangeSlider.d.ts

@@ -0,0 +1,18 @@
+import React from "react";
+export interface RangeSliderProps {
+    minValue: number;
+    maxValue: number;
+    step?: number;
+    unit?: string;
+    title?: string;
+    description?: string;
+    showRange?: boolean;
+    value?: [number, number];
+    defaultValue?: [number, number];
+    isDisabled?: boolean;
+    onChange?: (value: [number, number]) => void;
+    style?: React.CSSProperties;
+    className?: string;
+}
+declare const RangeSlider: React.FC<RangeSliderProps>;
+export default RangeSlider;

package/dist/components/molecules/rangeSlider/RangeSlider.js

@@ -0,0 +1,190 @@
+import React, { useState, useEffect, useRef, useCallback } from "react";
+import TinyInfo from "../../atoms/typography/TinyInfo";
+import Heading from "../../atoms/typography/Heading";
+import styles from "./rangeSlider.module.css";
+var RangeSlider = function (_a) {
+    var minValue = _a.minValue, maxValue = _a.maxValue, _b = _a.step, step = _b === void 0 ? 1 : _b, _c = _a.unit, unit = _c === void 0 ? "" : _c, title = _a.title, description = _a.description, _d = _a.showRange, showRange = _d === void 0 ? false : _d, value = _a.value, _e = _a.defaultValue, defaultValue = _e === void 0 ? [minValue, maxValue] : _e, _f = _a.isDisabled, isDisabled = _f === void 0 ? false : _f, onChange = _a.onChange, style = _a.style, _g = _a.className, className = _g === void 0 ? "" : _g;
+    var _h = useState(value || defaultValue), internalValue = _h[0], setInternalValue = _h[1];
+    var _j = useState(null), isDragging = _j[0], setIsDragging = _j[1];
+    var _k = useState(null), focusedThumb = _k[0], setFocusedThumb = _k[1];
+    var _l = useState(null), ripplePosition = _l[0], setRipplePosition = _l[1];
+    var trackRef = useRef(null);
+    var thumb1Ref = useRef(null);
+    var thumb2Ref = useRef(null);
+    var isControlled = value !== undefined;
+    var currentValue = isControlled ? value : internalValue;
+    var minVal = currentValue[0], maxVal = currentValue[1];
+    // Clamp value between min and max
+    var clampValue = useCallback(function (val) {
+        return Math.max(minValue, Math.min(maxValue, val));
+    }, [minValue, maxValue]);
+    // Convert pixel position to value
+    var pixelToValue = useCallback(function (pixel) {
+        if (!trackRef.current)
+            return minValue;
+        var rect = trackRef.current.getBoundingClientRect();
+        var percentage = (pixel - rect.left) / rect.width;
+        var rawValue = minValue + percentage * (maxValue - minValue);
+        return Math.round(rawValue / step) * step;
+    }, [minValue, maxValue, step]);
+    // Convert value to percentage
+    var valueToPercentage = useCallback(function (val) {
+        return ((val - minValue) / (maxValue - minValue)) * 100;
+    }, [minValue, maxValue]);
+    // Update value
+    var updateValue = useCallback(function (newValue) {
+        var clampedValue = [
+            clampValue(newValue[0]),
+            clampValue(newValue[1]),
+        ];
+        // Ensure min <= max
+        if (clampedValue[0] > clampedValue[1]) {
+            clampedValue[0] = clampedValue[1];
+        }
+        if (!isControlled) {
+            setInternalValue(clampedValue);
+        }
+        onChange === null || onChange === void 0 ? void 0 : onChange(clampedValue);
+    }, [clampValue, isControlled, onChange]);
+    // Handle track click
+    var handleTrackClick = useCallback(function (event) {
+        var _a;
+        if (isDisabled)
+            return;
+        var clickValue = clampValue(pixelToValue(event.clientX));
+        var distToMin = Math.abs(clickValue - minVal);
+        var distToMax = Math.abs(clickValue - maxVal);
+        // Move closest thumb
+        if (distToMin <= distToMax) {
+            updateValue([clickValue, maxVal]);
+        }
+        else {
+            updateValue([minVal, clickValue]);
+        }
+        // Show ripple effect
+        var rect = (_a = trackRef.current) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect();
+        if (rect) {
+            setRipplePosition({
+                x: event.clientX - rect.left,
+                y: event.clientY - rect.top,
+            });
+            setTimeout(function () { return setRipplePosition(null); }, 600);
+        }
+    }, [isDisabled, pixelToValue, clampValue, minVal, maxVal, updateValue]);
+    // Handle mouse down on thumb
+    var handleThumbMouseDown = useCallback(function (thumbIndex, event) {
+        if (isDisabled)
+            return;
+        event.preventDefault();
+        event.stopPropagation();
+        setIsDragging(thumbIndex);
+        setFocusedThumb(thumbIndex);
+    }, [isDisabled]);
+    // Handle mouse move
+    useEffect(function () {
+        var handleMouseMove = function (event) {
+            if (isDragging === null || isDisabled)
+                return;
+            var newValue = clampValue(pixelToValue(event.clientX));
+            if (isDragging === 0) {
+                updateValue([newValue, maxVal]);
+            }
+            else {
+                updateValue([minVal, newValue]);
+            }
+        };
+        var handleMouseUp = function () {
+            setIsDragging(null);
+        };
+        if (isDragging !== null) {
+            document.addEventListener("mousemove", handleMouseMove);
+            document.addEventListener("mouseup", handleMouseUp);
+        }
+        return function () {
+            document.removeEventListener("mousemove", handleMouseMove);
+            document.removeEventListener("mouseup", handleMouseUp);
+        };
+    }, [
+        isDragging,
+        isDisabled,
+        clampValue,
+        pixelToValue,
+        minVal,
+        maxVal,
+        updateValue,
+    ]);
+    // Handle keyboard navigation
+    var handleKeyDown = useCallback(function (thumbIndex, event) {
+        if (isDisabled)
+            return;
+        var newValue = thumbIndex === 0 ? minVal : maxVal;
+        switch (event.key) {
+            case "ArrowLeft":
+            case "ArrowDown":
+                event.preventDefault();
+                newValue = clampValue(newValue - step);
+                break;
+            case "ArrowRight":
+            case "ArrowUp":
+                event.preventDefault();
+                newValue = clampValue(newValue + step);
+                break;
+            case "Home":
+                event.preventDefault();
+                newValue = minValue;
+                break;
+            case "End":
+                event.preventDefault();
+                newValue = maxValue;
+                break;
+            default:
+                return;
+        }
+        if (thumbIndex === 0) {
+            updateValue([newValue, maxVal]);
+        }
+        else {
+            updateValue([minVal, newValue]);
+        }
+    }, [
+        isDisabled,
+        minVal,
+        maxVal,
+        clampValue,
+        step,
+        minValue,
+        maxValue,
+        updateValue,
+    ]);
+    // Update internal value when controlled value changes
+    useEffect(function () {
+        if (isControlled && value) {
+            setInternalValue(value);
+        }
+    }, [isControlled, value]);
+    var leftPercentage = valueToPercentage(minVal);
+    var rightPercentage = valueToPercentage(maxVal);
+    var activeWidth = rightPercentage - leftPercentage;
+    return (React.createElement("div", { id: "range-slider-main", className: "".concat(styles.rangeSlider, " ").concat(className), style: style },
+        React.createElement("div", { id: "range-slider-header", className: "".concat(styles.titleContainer, " ").concat(styles.flexContainer) },
+            title && (React.createElement("div", { id: "range-slider-title", className: styles.titleWrapper },
+                React.createElement(Heading, { variant: "h6", color: "noir", text: title, align: "left" }))),
+            showRange && (React.createElement("div", { id: "range-slider-values", className: styles.rangeInfo },
+                React.createElement(TinyInfo, { variant: "medium14", color: "dark-grey", text: "".concat(minVal).concat(unit, " - ").concat(maxVal).concat(unit), align: "right" })))),
+        description && (React.createElement("div", { id: "range-slider-description", className: styles.descriptionContainer },
+            React.createElement(TinyInfo, { variant: "medium14", color: "mid-grey", text: description, align: "left", className: styles.description }))),
+        React.createElement("div", { id: "range-slider-controls", className: styles.sliderContainer },
+            React.createElement("div", { id: "range-slider-track", ref: trackRef, className: "".concat(styles.track, " ").concat(isDisabled ? styles.disabled : ""), onClick: handleTrackClick },
+                React.createElement("div", { id: "range-slider-track-inactive", className: styles.trackInactive }),
+                React.createElement("div", { id: "range-slider-track-active", className: styles.trackActive, style: {
+                        left: "".concat(leftPercentage, "%"),
+                        width: "".concat(activeWidth, "%"),
+                    } }),
+                ripplePosition && (React.createElement("div", { id: "range-slider-ripple", className: styles.ripple, style: {
+                        left: ripplePosition.x,
+                        top: ripplePosition.y,
+                    } })),
+                React.createElement("div", { id: "range-slider-thumb-min", ref: thumb1Ref, className: "".concat(styles.thumb, " ").concat(focusedThumb === 0 ? styles.focused : "", " ").concat(isDragging === 0 ? styles.active : ""), style: { left: "".concat(leftPercentage, "%") }, role: "slider", "aria-valuenow": minVal, "aria-valuemin": minValue, "aria-valuemax": maxValue, "aria-label": "Valeur minimale: ".concat(minVal).concat(unit), tabIndex: isDisabled ? -1 : 0, onMouseDown: function (e) { return handleThumbMouseDown(0, e); }, onKeyDown: function (e) { return handleKeyDown(0, e); }, onFocus: function () { return setFocusedThumb(0); }, onBlur: function () { return setFocusedThumb(null); } }),
+                React.createElement("div", { id: "range-slider-thumb-max", ref: thumb2Ref, className: "".concat(styles.thumb, " ").concat(focusedThumb === 1 ? styles.focused : "", " ").concat(isDragging === 1 ? styles.active : ""), style: { left: "".concat(rightPercentage, "%") }, role: "slider", "aria-valuenow": maxVal, "aria-valuemin": minValue, "aria-valuemax": maxValue, "aria-label": "Valeur maximale: ".concat(maxVal).concat(unit), tabIndex: isDisabled ? -1 : 0, onMouseDown: function (e) { return handleThumbMouseDown(1, e); }, onKeyDown: function (e) { return handleKeyDown(1, e); }, onFocus: function () { return setFocusedThumb(1); }, onBlur: function () { return setFocusedThumb(null); } })))));
+};
+export default RangeSlider;

package/dist/components/molecules/rangeSlider/RangeSlider.stories.d.ts

@@ -0,0 +1,96 @@
+declare namespace _default {
+    export let title: string;
+    export { RangeSlider as component };
+    export let tags: string[];
+    export namespace argTypes {
+        export namespace minValue {
+            namespace control {
+                let type: string;
+            }
+            let description: string;
+        }
+        export namespace maxValue {
+            export namespace control_1 {
+                let type_1: string;
+                export { type_1 as type };
+            }
+            export { control_1 as control };
+            let description_1: string;
+            export { description_1 as description };
+        }
+        export namespace step {
+            export namespace control_2 {
+                let type_2: string;
+                export { type_2 as type };
+            }
+            export { control_2 as control };
+            let description_2: string;
+            export { description_2 as description };
+        }
+        export namespace unit {
+            let control_3: string;
+            export { control_3 as control };
+            let description_3: string;
+            export { description_3 as description };
+        }
+        export namespace title_1 {
+            let control_4: string;
+            export { control_4 as control };
+            let description_4: string;
+            export { description_4 as description };
+        }
+        export { title_1 as title };
+        export namespace description_5 {
+            let control_5: string;
+            export { control_5 as control };
+            let description_6: string;
+            export { description_6 as description };
+        }
+        export { description_5 as description };
+        export namespace showRange {
+            let control_6: string;
+            export { control_6 as control };
+            let description_7: string;
+            export { description_7 as description };
+        }
+        export namespace defaultValue {
+            export namespace control_7 {
+                let type_3: string;
+                export { type_3 as type };
+            }
+            export { control_7 as control };
+            let description_8: string;
+            export { description_8 as description };
+        }
+        export namespace isDisabled {
+            let control_8: string;
+            export { control_8 as control };
+            let description_9: string;
+            export { description_9 as description };
+        }
+        export namespace onChange {
+            export let action: string;
+            let description_10: string;
+            export { description_10 as description };
+        }
+    }
+    export namespace parameters {
+        namespace backgrounds {
+            let _default: string;
+            export { _default as default };
+            export let values: {
+                name: string;
+                value: string;
+            }[];
+        }
+    }
+}
+export default _default;
+export const Default: any;
+export const WithUnit: any;
+export const SimpleRange: any;
+export const WithoutRange: any;
+export const Disabled: any;
+export const LargeRange: any;
+export const DecimalStep: any;
+import RangeSlider from "./RangeSlider";

package/dist/components/molecules/rangeSlider/RangeSlider.stories.js

@@ -0,0 +1,162 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+import React from "react";
+import { action } from "@storybook/addon-actions";
+import RangeSlider from "./RangeSlider";
+import "../../../styles/global.css";
+export default {
+    title: "Components/Molecules/RangeSlider",
+    component: RangeSlider,
+    tags: ["autodocs"],
+    argTypes: {
+        minValue: {
+            control: { type: "number" },
+            description: "Valeur minimale du slider",
+        },
+        maxValue: {
+            control: { type: "number" },
+            description: "Valeur maximale du slider",
+        },
+        step: {
+            control: { type: "number" },
+            description: "Pas d'incrémentation",
+        },
+        unit: {
+            control: "text",
+            description: "Unité à afficher après les valeurs",
+        },
+        title: {
+            control: "text",
+            description: "Titre du slider",
+        },
+        description: {
+            control: "text",
+            description: "Description du slider",
+        },
+        showRange: {
+            control: "boolean",
+            description: "Affiche les valeurs min et max sous le slider",
+        },
+        defaultValue: {
+            control: { type: "object" },
+            description: "Valeur par défaut [min, max]",
+        },
+        isDisabled: {
+            control: "boolean",
+            description: "Désactive le slider",
+        },
+        onChange: {
+            action: "changed",
+            description: "Callback appelé quand la valeur change",
+        },
+    },
+    parameters: {
+        backgrounds: {
+            default: "light",
+            values: [
+                { name: "light", value: "#ffffff" },
+                { name: "grey", value: "#728ea7" },
+                { name: "figma", value: "#404040" },
+                { name: "dark", value: "#171e25" },
+            ],
+        },
+    },
+};
+var Template = function (args) { return React.createElement(RangeSlider, __assign({}, args)); };
+export var Default = Template.bind({});
+Default.args = {
+    title: "Age de vos contacts",
+    description: "Sélectionnez l'âge minimum et maximum des contacts à afficher",
+    minValue: 0,
+    maxValue: 120,
+    step: 1,
+    unit: "",
+    defaultValue: [0, 120],
+    showRange: true,
+    isDisabled: false,
+    onChange: action("Range changed"),
+};
+export var WithUnit = Template.bind({});
+WithUnit.args = {
+    title: "Budget mensuel",
+    description: "Définissez votre budget minimum et maximum",
+    minValue: 0,
+    maxValue: 5000,
+    step: 50,
+    unit: "€",
+    defaultValue: [500, 3000],
+    showRange: true,
+    isDisabled: false,
+    onChange: action("Range changed"),
+};
+export var SimpleRange = Template.bind({});
+SimpleRange.args = {
+    minValue: 0,
+    maxValue: 100,
+    step: 5,
+    unit: "%",
+    defaultValue: [20, 80],
+    showRange: true,
+    isDisabled: false,
+    onChange: action("Range changed"),
+};
+export var WithoutRange = Template.bind({});
+WithoutRange.args = {
+    title: "Sélection de plage",
+    description: "Choisissez vos valeurs préférées",
+    minValue: 1,
+    maxValue: 10,
+    step: 1,
+    defaultValue: [3, 7],
+    showRange: false,
+    isDisabled: false,
+    onChange: action("Range changed"),
+};
+export var Disabled = Template.bind({});
+Disabled.args = {
+    title: "Slider désactivé",
+    description: "Ce slider est en lecture seule",
+    minValue: 0,
+    maxValue: 100,
+    step: 1,
+    unit: "%",
+    defaultValue: [25, 75],
+    showRange: true,
+    isDisabled: true,
+    onChange: action("Range changed"),
+};
+export var LargeRange = Template.bind({});
+LargeRange.args = {
+    title: "Années d'expérience",
+    description: "Indiquez la plage d'expérience souhaitée",
+    minValue: 0,
+    maxValue: 50,
+    step: 1,
+    unit: " ans",
+    defaultValue: [2, 15],
+    showRange: true,
+    isDisabled: false,
+    onChange: action("Range changed"),
+};
+export var DecimalStep = Template.bind({});
+DecimalStep.args = {
+    title: "Note moyenne",
+    description: "Sélectionnez la plage de notes",
+    minValue: 0,
+    maxValue: 5,
+    step: 0.5,
+    unit: "/5",
+    defaultValue: [2.5, 4.5],
+    showRange: true,
+    isDisabled: false,
+    onChange: action("Range changed"),
+};

package/dist/components/molecules/rangeSlider/index.d.ts

@@ -0,0 +1,2 @@
+export { default as RangeSlider } from "./RangeSlider";
+export type { RangeSliderProps } from "./RangeSlider";

package/dist/components/molecules/rangeSlider/index.js

@@ -0,0 +1 @@
+export { default as RangeSlider } from "./RangeSlider";

package/dist/components/molecules/rangeSlider/rangeSlider.module.css

@@ -0,0 +1,265 @@
+.rangeSlider {
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.titleContainer {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  width: 100%;
+}
+
+.title {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  flex: 1;
+  min-width: 250px;
+}
+
+.descriptionContainer {
+  margin-bottom: 8px;
+}
+
+.description {
+  line-height: 1.4;
+}
+
+.sliderContainer {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  padding-left: 0.82rem;
+  padding-right: 0.82rem;
+}
+
+.track {
+  position: relative;
+  width: 100%;
+  height: 44px; /* Touch target minimum */
+  display: flex;
+  align-items: center;
+  cursor: pointer;
+  padding: 20px 0; /* Padding for touch target */
+}
+
+.track.disabled {
+  cursor: not-allowed;
+  opacity: 0.5;
+}
+
+.trackInactive {
+  position: absolute;
+  width: 100%;
+  height: 8px;
+  background-color: #e6edf5; /* --grey-venom */
+  border-radius: 2px;
+  top: 50%;
+  transform: translateY(-50%);
+  border-radius: 4px;
+}
+
+.trackActive {
+  position: absolute;
+  height: 8px;
+  background-color: #25beeb; /* --bleu-allaw */
+  border-radius: 2px;
+  top: 50%;
+  transform: translateY(-50%);
+  transition: background-color 0.05s ease;
+  border-radius: 4px;
+}
+
+.thumb {
+  position: absolute;
+  width: 10px;
+  height: 10px;
+  background-color: #ffffff;
+  border: 2px solid #25beeb; /* --bleu-allaw */
+  border-radius: 50%;
+  cursor: grab;
+  transform: translate(-50%, -50%);
+  top: 50%;
+  transition: all 0.05s ease;
+  z-index: 2;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
+
+  /* Touch target minimum */
+  min-width: 24px;
+  min-height: 24px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.thumb::before {
+  content: "";
+  width: 2px;
+  height: 2px;
+  background-color: #ffffff;
+  border: 2px solid #25beeb;
+  border-radius: 50%;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+}
+
+.thumb:hover {
+  transform: translate(-50%, -50%) scale(1.1);
+}
+
+.thumb:hover::after {
+  content: "";
+  position: absolute;
+  width: 24px;
+  height: 24px;
+  background-color: rgba(37, 190, 235, 0.5); /* --bleu-allaw with opacity */
+  border-radius: 50%;
+  animation: rippleHover 0.3s ease-out;
+  z-index: -1;
+}
+
+.thumb.focused {
+  /* outline: 2px solid #25beeb;
+  outline-offset: 2px; */
+  border: 2px solid #25beeb;
+}
+
+.thumb.active {
+  cursor: grabbing;
+  transform: translate(-50%, -50%) scale(1.1);
+}
+
+.thumb.active::after {
+  content: "";
+  position: absolute;
+  width: 24px;
+  height: 24px;
+  background-color: #1fa3c9; /* --bleu-allaw full opacity */
+  border-radius: 50%;
+  animation: rippleActive 0.3s ease-out;
+  z-index: -1;
+}
+
+.thumb:focus-visible {
+  outline: 2px solid #25beeb;
+  outline-offset: 2px;
+}
+
+.track.disabled .thumb {
+  cursor: not-allowed;
+  border-color: #728ea7; /* --mid-grey */
+}
+
+.track.disabled .thumb::before {
+  border-color: #728ea7; /* --mid-grey */
+}
+
+.track.disabled .thumb:hover {
+  transform: translate(-50%, -50%);
+}
+
+.track.disabled .thumb:hover::after {
+  display: none;
+}
+
+.ripple {
+  position: absolute;
+  width: 20px;
+  height: 20px;
+  background-color: rgba(37, 190, 235, 0.5);
+  border-radius: 50%;
+  transform: translate(-50%, -50%);
+  animation: rippleClick 0.6s ease-out;
+  pointer-events: none;
+  z-index: 1;
+}
+
+.rangeDisplay {
+  margin-top: 4px;
+}
+
+/* Animations */
+@keyframes rippleHover {
+  0% {
+    transform: scale(0);
+    opacity: 1;
+  }
+  100% {
+    transform: scale(1);
+    opacity: 0.5;
+  }
+}
+
+@keyframes rippleActive {
+  0% {
+    transform: scale(0);
+    opacity: 1;
+  }
+  100% {
+    transform: scale(1);
+    opacity: 1;
+  }
+}
+
+@keyframes rippleClick {
+  0% {
+    transform: translate(-50%, -50%) scale(0);
+    opacity: 0.8;
+  }
+  100% {
+    transform: translate(-50%, -50%) scale(1.5);
+    opacity: 0;
+  }
+}
+
+/* Responsive adjustments */
+@media (max-width: 768px) {
+  .thumb {
+    min-width: 20px;
+    min-height: 20px;
+  }
+
+  .track {
+    height: 8px;
+    padding: 24px 0;
+  }
+}
+
+.flexContainer {
+  display: flex;
+  justify-content: space-between;
+}
+
+.rangeInfo {
+  margin-left: auto;
+  align-self: center;
+}
+
+.titleWrapper {
+  flex: 1;
+  min-width: 0;
+  overflow: hidden;
+}
+
+.titleWrapper h1,
+.titleWrapper h2,
+.titleWrapper h3,
+.titleWrapper h4,
+.titleWrapper h5,
+.titleWrapper h6,
+.titleWrapper span {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  width: 100%;
+  display: block;
+}
+
+.rangeInfo {
+  flex-shrink: 0;
+  margin-left: 16px;
+  align-self: center;
+  white-space: nowrap;
+}

package/dist/index.d.ts

@@ -62,6 +62,8 @@ export type { DocumentCardProps } from "./components/molecules/documentCard/Docu
 export { default as EmployeeCard } from "./components/molecules/employeeCard/EmployeeCard";
 export { default as Stepper } from "./components/molecules/stepper/Stepper";
 export type { StepperProps } from "./components/molecules/stepper/Stepper";
+export { default as RangeSlider } from "./components/molecules/rangeSlider/RangeSlider";
+export type { RangeSliderProps } from "./components/molecules/rangeSlider/RangeSlider";
 export { default as Modal } from "./components/molecules/modal/Modal";
 export type { ModalProps } from "./components/molecules/modal/Modal";
 export { default as CheckboxForm } from "./components/molecules/checkboxForm/CheckboxForm";

package/dist/index.js

@@ -71,6 +71,8 @@ export { default as DocumentCard } from "./components/molecules/documentCard/Doc
 export { default as EmployeeCard } from "./components/molecules/employeeCard/EmployeeCard";
 // Stepper
 export { default as Stepper } from "./components/molecules/stepper/Stepper";
+// Range Slider
+export { default as RangeSlider } from "./components/molecules/rangeSlider/RangeSlider";
 // Modal
 export { default as Modal } from "./components/molecules/modal/Modal";
 // CheckboxForm

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "allaw-ui",
-  "version": "3.8.8",
+  "version": "3.9.0",
   "description": "Composants UI pour l'application Allaw",
   "main": "dist/index.js",
   "module": "dist/index.esm.js",