@quen-ui/components 1.0.1 → 1.2.0

package/dist/Menu/styles.es.js

@@ -1,7 +1,7 @@
 import styled, { css } from "styled-components";
 import Flex from "../Flex/Flex.es.js";
 const MenuItemStyled = styled.button.withConfig({
-  shouldForwardProp: (prop) => !["disabled", "active", "hover"].includes(prop)
+  shouldForwardProp: (prop) => !["disabled", "active", "hover", "leftContent", "label"].includes(prop)
 }).attrs((props) => ({
   className: props.active ? "quen-ui__menu-item--active" : "quen-ui__menu-item"
 }))`
@@ -16,6 +16,7 @@ const MenuItemStyled = styled.button.withConfig({
   transition: background 0.2s ease;
   background: transparent;
   justify-content: flex-start;
+  text-decoration: none;
 
   color: ${({ theme, disabled }) => disabled ? theme.components.Menu.disabledColor : theme.components.Menu.color};
 
@@ -42,6 +43,7 @@ const MenuItemStyled = styled.button.withConfig({
 
   .quen-ui--menu__item_label {
     width: 100%;
+    text-align: left;
   }
 
   &:hover {

package/dist/Menu/types.d.ts

@@ -1,4 +1,4 @@
-import { default as React } from 'react';
+import { default as React, JSX } from 'react';
 import { TQuenSize } from '../types/size';
 export interface IMenuDefaultItem {
     /** Unique item identifier */
@@ -15,6 +15,9 @@ export interface IMenuDefaultItem {
     disabled?: boolean;
     /** Custom CSS classes */
     className?: string;
+    /** Renders as custom element (e.g., "a" for links) */
+    as?: keyof JSX.IntrinsicElements | React.ElementType;
+    [key: string]: any;
 }
 export type TMenuPropGetItemKey<Item> = (item: Item) => string;
 export type TMenuPropGetItemIcon<Item> = (item: Item) => React.ReactNode;

package/dist/Modal/Modal.cjs.js

@@ -25,7 +25,6 @@ const Modal = ({
   width,
   ...props
 }) => {
-  console.log(open);
   const [state, toggle] = reactTransitionState.useTransitionState({
     timeout: 500,
     unmountOnExit: true,
@@ -51,11 +50,12 @@ const Modal = ({
     };
   }, []);
   React.useEffect(() => {
+    const overflow = document.body.style.overflow;
     if (state.isEnter) {
       document.body.style.overflow = "hidden";
     }
     return () => {
-      document.body.style.overflow = "unset";
+      document.body.style.overflow = overflow;
     };
   }, [state]);
   if (state.isEnter && container) {

package/dist/Modal/Modal.es.js

@@ -24,7 +24,6 @@ const Modal = ({
   width,
   ...props
 }) => {
-  console.log(open);
   const [state, toggle] = useTransitionState({
     timeout: 500,
     unmountOnExit: true,
@@ -50,11 +49,12 @@ const Modal = ({
     };
   }, []);
   useEffect(() => {
+    const overflow = document.body.style.overflow;
     if (state.isEnter) {
       document.body.style.overflow = "hidden";
     }
     return () => {
-      document.body.style.overflow = "unset";
+      document.body.style.overflow = overflow;
     };
   }, [state]);
   if (state.isEnter && container) {

package/dist/Modal/styles.cjs.js

@@ -58,7 +58,9 @@ const ModalStyled = styled.div.withConfig({
           }
         `};
 `;
-const ModalContentStyled = styled.div`
+const ModalContentStyled = styled.div.withConfig({
+  shouldForwardProp: (prop) => !["scrollable"].includes(prop)
+})`
   ${({ scrollable }) => scrollable && styled.css`
       overflow-y: auto;
       max-height: 60vh;

package/dist/Modal/styles.es.js

@@ -56,7 +56,9 @@ const ModalStyled = styled.div.withConfig({
           }
         `};
 `;
-const ModalContentStyled = styled.div`
+const ModalContentStyled = styled.div.withConfig({
+  shouldForwardProp: (prop) => !["scrollable"].includes(prop)
+})`
   ${({ scrollable }) => scrollable && css`
       overflow-y: auto;
       max-height: 60vh;

package/dist/Select/Select.cjs.js

@@ -8,7 +8,6 @@ const useSelect = require("./useSelect.cjs.js");
 const helpers = require("./helpers.cjs.js");
 const Tag = require("../Tag/Tag.cjs.js");
 const iconArrowBottom = require("../assets/icon-arrow-bottom.svg.cjs.js");
-const Flex = require("../Flex/Flex.cjs.js");
 const iconClose = require("../assets/icon-close.svg.cjs.js");
 const SelectComponent = (props) => {
   const {
@@ -62,6 +61,7 @@ const SelectComponent = (props) => {
       error,
       size,
       required,
+      rightContent,
       ...otherProps,
       children: [
         /* @__PURE__ */ jsxRuntime.jsx(styles.SelectDropDownStyles, { zIndex }),
@@ -80,10 +80,7 @@ const SelectComponent = (props) => {
             menuItemSelectedIcon: null,
             loading,
             prefix: leftContent,
-            suffixIcon: /* @__PURE__ */ jsxRuntime.jsxs(Flex, { gap: 4, align: "center", children: [
-              rightContent,
-              /* @__PURE__ */ jsxRuntime.jsx(iconArrowBottom, { className: "icon-arrow" })
-            ] }),
+            suffixIcon: /* @__PURE__ */ jsxRuntime.jsx(iconArrowBottom, { className: "icon-arrow" }),
             labelRender: (props2) => /* @__PURE__ */ jsxRuntime.jsx(Text, { size, children: props2.label }),
             open,
             disabled,

package/dist/Select/Select.es.js

@@ -7,7 +7,6 @@ import { useSelect } from "./useSelect.es.js";
 import { withDefaultGetters } from "./helpers.es.js";
 import Tag from "../Tag/Tag.es.js";
 import SvgIconArrowBottom from "../assets/icon-arrow-bottom.svg.es.js";
-import Flex from "../Flex/Flex.es.js";
 import SvgIconClose from "../assets/icon-close.svg.es.js";
 const SelectComponent = (props) => {
   const {
@@ -61,6 +60,7 @@ const SelectComponent = (props) => {
       error,
       size,
       required,
+      rightContent,
       ...otherProps,
       children: [
         /* @__PURE__ */ jsx(SelectDropDownStyles, { zIndex }),
@@ -79,10 +79,7 @@ const SelectComponent = (props) => {
             menuItemSelectedIcon: null,
             loading,
             prefix: leftContent,
-            suffixIcon: /* @__PURE__ */ jsxs(Flex, { gap: 4, align: "center", children: [
-              rightContent,
-              /* @__PURE__ */ jsx(SvgIconArrowBottom, { className: "icon-arrow" })
-            ] }),
+            suffixIcon: /* @__PURE__ */ jsx(SvgIconArrowBottom, { className: "icon-arrow" }),
             labelRender: (props2) => /* @__PURE__ */ jsx(Text, { size, children: props2.label }),
             open,
             disabled,

package/dist/Select/helpers.d.ts

@@ -14,7 +14,9 @@ export declare function withDefaultGetters<ITEM>(props: TSelectProps<ITEM>): {
     required?: boolean;
     error?: string | boolean;
     leftContent?: import('react').ReactNode;
+    leftContentVariant?: "icon" | "text" | "addon";
     rightContent?: import('react').ReactNode;
+    rightContentVariant?: "icon" | "text" | "addon";
     id?: string;
     className?: string;
     style?: import('react').CSSProperties;
@@ -48,7 +50,9 @@ export declare function withDefaultGetters<ITEM>(props: TSelectProps<ITEM>): {
     required?: boolean;
     error?: string | boolean;
     leftContent?: import('react').ReactNode;
+    leftContentVariant?: "icon" | "text" | "addon";
     rightContent?: import('react').ReactNode;
+    rightContentVariant?: "icon" | "text" | "addon";
     id?: string;
     className?: string;
     style?: import('react').CSSProperties;
@@ -82,7 +86,9 @@ export declare function withDefaultGetters<ITEM>(props: TSelectProps<ITEM>): {
     required?: boolean;
     error?: string | boolean;
     leftContent?: import('react').ReactNode;
+    leftContentVariant?: "icon" | "text" | "addon";
     rightContent?: import('react').ReactNode;
+    rightContentVariant?: "icon" | "text" | "addon";
     id?: string;
     className?: string;
     style?: import('react').CSSProperties;
@@ -116,7 +122,9 @@ export declare function withDefaultGetters<ITEM>(props: TSelectProps<ITEM>): {
     required?: boolean;
     error?: string | boolean;
     leftContent?: import('react').ReactNode;
+    leftContentVariant?: "icon" | "text" | "addon";
     rightContent?: import('react').ReactNode;
+    rightContentVariant?: "icon" | "text" | "addon";
     id?: string;
     className?: string;
     style?: import('react').CSSProperties;

package/dist/Select/styles.d.ts

@@ -2,7 +2,7 @@ export declare const SelectWrapper: import('styled-components/dist/types').IStyl
     children?: import('react').ReactNode | undefined;
 }, {
     zIndex?: number;
-}>> & string & Omit<({ label, className, size, id, required, style, error, disabled, children, leftContent, rightContent, ...props }: import('react').PropsWithChildren<import('../InputBase').IInputBaseProps>) => import("react/jsx-runtime").JSX.Element, keyof import('react').Component<any, {}, any>>;
+}>> & string & Omit<({ label, className, size, id, required, style, error, disabled, children, leftContent, rightContent, leftContentVariant, rightContentVariant, ...props }: import('react').PropsWithChildren<import('../InputBase').IInputBaseProps>) => import("react/jsx-runtime").JSX.Element, keyof import('react').Component<any, {}, any>>;
 export declare const SelectDropDownStyles: import('react').NamedExoticComponent<import('styled-components').ExecutionProps & {
     zIndex?: number;
 }>;

package/dist/Select/useSelect.d.ts

@@ -14,7 +14,9 @@ export declare function useSelect<ITEM>(props: TSelectProps<ITEM> & Required<Pic
     required?: boolean;
     error?: string | boolean;
     leftContent?: import('react').ReactNode;
+    leftContentVariant?: "icon" | "text" | "addon";
     rightContent?: import('react').ReactNode;
+    rightContentVariant?: "icon" | "text" | "addon";
     id?: string;
     className?: string;
     style?: import('react').CSSProperties;
@@ -51,7 +53,9 @@ export declare function useSelect<ITEM>(props: TSelectProps<ITEM> & Required<Pic
     required?: boolean;
     error?: string | boolean;
     leftContent?: import('react').ReactNode;
+    leftContentVariant?: "icon" | "text" | "addon";
     rightContent?: import('react').ReactNode;
+    rightContentVariant?: "icon" | "text" | "addon";
     id?: string;
     className?: string;
     style?: import('react').CSSProperties;
@@ -88,7 +92,9 @@ export declare function useSelect<ITEM>(props: TSelectProps<ITEM> & Required<Pic
     required?: boolean;
     error?: string | boolean;
     leftContent?: import('react').ReactNode;
+    leftContentVariant?: "icon" | "text" | "addon";
     rightContent?: import('react').ReactNode;
+    rightContentVariant?: "icon" | "text" | "addon";
     id?: string;
     className?: string;
     style?: import('react').CSSProperties;
@@ -125,7 +131,9 @@ export declare function useSelect<ITEM>(props: TSelectProps<ITEM> & Required<Pic
     required?: boolean;
     error?: string | boolean;
     leftContent?: import('react').ReactNode;
+    leftContentVariant?: "icon" | "text" | "addon";
     rightContent?: import('react').ReactNode;
+    rightContentVariant?: "icon" | "text" | "addon";
     id?: string;
     className?: string;
     style?: import('react').CSSProperties;

package/dist/Slider/Slider.cjs.js

@@ -3,271 +3,169 @@ const jsxRuntime = require("react/jsx-runtime");
 const React = require("react");
 const styles = require("./styles.cjs.js");
 const helpers = require("@quen-ui/helpers");
+const useSlider = require("./useSlider.cjs.js");
 const Slider = ({
-  value = 0,
   min = 0,
   max = 100,
   step = 1,
-  onChange,
-  showTooltip = true,
-  range,
+  range = false,
   orientation = "horizontal",
   marks = [],
-  draggableTrack,
+  disabled = false,
+  showTooltip = true,
+  draggableTrack = false,
+  color = "violet",
   tooltip,
   style,
   className,
-  disabled,
-  color = "violet"
+  value,
+  onChange
 }) => {
-  const trackRef = React.useRef(null);
-  const draggableRef = React.useRef(false);
-  const initialValue = (_value) => {
-    if (!range) {
-      return Array.isArray(_value) ? _value : [_value ?? min, _value ?? min];
-    }
-    return Array.isArray(_value) ? _value : [min, max];
-  };
-  const [startEndValues, setStartEndValues] = React.useState(
-    initialValue(value)
-  );
-  const [currentHandle, setCurrentHandle] = React.useState(
-    null
-  );
-  const [isMouseDown, setIsMouseDown] = React.useState(false);
-  React.useEffect(() => {
-    setStartEndValues(initialValue(value));
-  }, [value]);
-  const clamp = (val) => Math.min(max, Math.max(min, val));
-  const snap = (raw) => {
-    return clamp(Math.round(raw / step) * step);
-  };
-  const percentOf = (v) => (v - min) / (max - min) * 100;
-  const updateValue = React.useCallback(
-    (newVal) => {
-      if (newVal[0] !== startEndValues[0] || newVal[1] !== startEndValues[1] || newVal[0] == 0 && newVal[1] == 0) {
-        setStartEndValues(newVal);
-        onChange?.(range ? newVal : newVal[1]);
-      }
+  const {
+    values,
+    trackRef,
+    percentStart,
+    percentEnd,
+    onPointerDownThumb,
+    onPointerDownTrack,
+    onKeyDown,
+    isDragging
+  } = useSlider.useSlider({
+    value,
+    min,
+    max,
+    step,
+    onChange,
+    range,
+    disabled,
+    orientation,
+    draggableTrack
+  });
+  const [isActive, setIsActive] = React.useState(false);
+  const renderThumb = React.useCallback(
+    (target, currentValue, percent) => {
+      const valText = `${target === "start" ? "From" : "To"} ${currentValue}`;
+      const isVert = orientation === "vertical";
+      return /* @__PURE__ */ jsxRuntime.jsxs(
+        "div",
+        {
+          style: {
+            position: "absolute",
+            zIndex: 2,
+            overflow: "visible",
+            [isVert ? "top" : "left"]: isVert ? `${100 - percent}%` : `${percent}%`,
+            [isVert ? "left" : "top"]: "50%",
+            transform: "translate(-50%, -50%)"
+          },
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsx(
+              styles.SliderTooltipStyled,
+              {
+                isVertical: isVert,
+                open: isActive,
+                show: showTooltip,
+                text: currentValue,
+                position: isVert ? "right" : "top",
+                value: percent,
+                ...tooltip,
+                classNameContent: helpers.cnMerge(
+                  "quen-ui__slider__tooltip__content",
+                  tooltip?.classNameContent
+                ),
+                children: null
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              styles.SliderThumbStyled,
+              {
+                role: "slider",
+                tabIndex: disabled ? -1 : 0,
+                "aria-disabled": disabled,
+                "aria-orientation": orientation,
+                "aria-valuemin": min,
+                "aria-valuemax": max,
+                "aria-valuenow": currentValue,
+                "aria-valuetext": valText,
+                "aria-label": range ? valText : "Slider value",
+                disabled,
+                color,
+                isVertical: isVert,
+                onPointerDown: (e) => {
+                  setIsActive(true);
+                  onPointerDownThumb(target, e);
+                },
+                onPointerUp: () => setIsActive(false),
+                onMouseEnter: () => setIsActive(true),
+                onMouseLeave: () => !isDragging && setIsActive(false),
+                onFocus: () => setIsActive(true),
+                onBlur: () => !isDragging && setIsActive(false),
+                onKeyDown: (e) => onKeyDown(target, e)
+              }
+            )
+          ]
+        },
+        target
+      );
     },
-    [range, onChange]
+    [
+      orientation,
+      showTooltip,
+      tooltip,
+      disabled,
+      min,
+      max,
+      color,
+      range,
+      isDragging,
+      isActive,
+      onPointerDownThumb,
+      onKeyDown
+    ]
   );
-  const setByValue = (raw, target) => {
-    const snapped = snap(raw);
-    let next = [0, 0];
-    if (target === "end") {
-      next = [startEndValues[0], snapped];
-    } else if (target === "start") {
-      next = [snapped, startEndValues[1]];
-    } else if (!range) {
-      next = [snapped, snapped];
-    } else if (range) {
-      const distanceToStart = Math.abs(snapped - startEndValues[0]);
-      const distanceToEnd = Math.abs(snapped - startEndValues[1]);
-      next = distanceToStart <= distanceToEnd ? [snapped, startEndValues[1]] : [startEndValues[0], snapped];
-    }
-    if (next[0] > next[1]) {
-      next = [next[1], next[0]];
-    }
-    updateValue(next);
-  };
-  const handleTrackClick = (e) => {
-    if (!trackRef.current || draggableRef.current) return;
-    const rect = trackRef.current.getBoundingClientRect();
-    const startClient = "touches" in e ? e.touches[0] : e;
-    const ratio = orientation === "vertical" ? 1 - (startClient.clientY - rect.top) / rect.height : (startClient.clientX - rect.left) / rect.width;
-    const raw = min + ratio * (max - min);
-    setByValue(raw);
-  };
-  const handleMove = (e, target) => {
-    if (!trackRef.current) return;
-    const rect = trackRef.current.getBoundingClientRect();
-    const client = "touches" in e ? e.touches[0] : e;
-    let ratio = orientation === "vertical" ? 1 - (client.clientY - rect.top) / rect.height : (client.clientX - rect.left) / rect.width;
-    ratio = Math.min(1, Math.max(0, ratio));
-    const rawValue = min + ratio * (max - min);
-    setByValue(rawValue, target);
-  };
-  const bindEvents = (target) => ({
-    onMouseDown: (e) => {
-      e.preventDefault();
-      setCurrentHandle(target);
-      setIsMouseDown(true);
-      const move = (ev) => handleMove(ev, target);
-      const up = () => {
-        setCurrentHandle(null);
-        setIsMouseDown(false);
-        document.removeEventListener("mousemove", move);
-        document.removeEventListener("mouseup", up, { capture: true });
-      };
-      document.addEventListener("mousemove", move);
-      document.addEventListener("mouseup", up, { capture: true });
-    },
-    onTouchStart: () => {
-      setCurrentHandle(target);
-      setIsMouseDown(true);
-      const move = (ev) => handleMove(ev, target);
-      const up = () => {
-        setCurrentHandle(null);
-        setIsMouseDown(false);
-        document.removeEventListener("touchmove", move);
-        document.removeEventListener("touchend", up);
-      };
-      document.addEventListener("touchmove", move);
-      document.addEventListener("touchend", up);
-    },
-    onMouseMove: () => {
-      setCurrentHandle(target);
-    },
-    onMouseLeave: () => {
-      if (!isMouseDown) {
-        setCurrentHandle(null);
-      }
-    }
-  });
-  const startDragWholeRange = (e) => {
-    if (!draggableTrack || !range || !trackRef.current) {
-      handleTrackClick(e);
-    } else {
-      const rect = trackRef.current.getBoundingClientRect();
-      const startClient = "touches" in e ? e.touches[0] : e;
-      const startRatio = orientation === "vertical" ? 1 - (startClient.clientY - rect.top) / rect.height : (startClient.clientX - rect.left) / rect.width;
-      const startValue = min + startRatio * (max - min);
-      const rangeSize = startEndValues[1] - startEndValues[0];
-      const offsetInsideRange = startValue - startEndValues[0];
-      const move = (ev) => {
-        const client = "touches" in ev ? ev.touches[0] : ev;
-        let ratio = orientation === "vertical" ? 1 - (client.clientY - rect.top) / rect.height : (client.clientX - rect.left) / rect.width;
-        ratio = Math.min(1, Math.max(0, ratio));
-        const rawValue = min + ratio * (max - min);
-        let newStart = rawValue - offsetInsideRange;
-        let newEnd = newStart + rangeSize;
-        if (newStart < min) {
-          newStart = min;
-          newEnd = min + rangeSize;
-        }
-        if (newEnd > max) {
-          newStart = max - rangeSize;
-        }
-        const snappedStart = snap(newStart);
-        const snappedEnd = snap(snappedStart + rangeSize);
-        const next = [snappedStart, snappedEnd];
-        updateValue(next);
-      };
-      const stop = () => {
-        document.removeEventListener("mousemove", move);
-        document.removeEventListener("mouseup", stop);
-        document.removeEventListener("touchmove", move);
-        document.removeEventListener("touchend", stop);
-        setTimeout(() => {
-          draggableRef.current = false;
-        }, 500);
-      };
-      document.addEventListener("mousemove", move);
-      document.addEventListener("mouseup", stop);
-      document.addEventListener("touchmove", move);
-      document.addEventListener("touchend", stop);
-    }
-  };
   return /* @__PURE__ */ jsxRuntime.jsxs(
     styles.SliderContainer,
     {
       disabled,
       style,
       className,
-      role: "slider",
-      "aria-label": "slider",
-      "aria-orientation": orientation,
-      "aria-disabled": disabled,
-      "aria-valuemax": max,
-      "aria-valuemin": min,
-      "aria-valuenow": startEndValues[0],
+      role: "group",
+      "aria-label": "Slider",
       children: [
         /* @__PURE__ */ jsxRuntime.jsx(
           styles.SliderTrackStyled,
           {
-            "data-testid": "slider-track",
-            disabled,
             ref: trackRef,
+            disabled,
             isVertical: orientation === "vertical",
-            onClick: handleTrackClick
+            onPointerDown: onPointerDownTrack
           }
         ),
         /* @__PURE__ */ jsxRuntime.jsx(
           styles.SliderProgressStyled,
           {
             isRange: range,
-            range: [percentOf(startEndValues[0]), percentOf(startEndValues[1])],
-            "data-testid": "slider-progress",
+            range: [percentStart, percentEnd],
             disabled,
             color,
-            onMouseDown: startDragWholeRange,
-            onTouchStart: startDragWholeRange,
             isVertical: orientation === "vertical"
           }
         ),
-        range && /* @__PURE__ */ jsxRuntime.jsx(
-          styles.SliderTooltipStyled,
-          {
-            isVertical: orientation === "vertical",
-            open: currentHandle === "start",
-            show: showTooltip,
-            text: startEndValues[0],
-            position: orientation === "vertical" ? "right" : "top",
-            value: percentOf(startEndValues[0]),
-            ...tooltip,
-            classNameContent: helpers.cnMerge(
-              "quen-ui__slider__tooltip__content",
-              tooltip?.classNameContent
-            ),
-            children: /* @__PURE__ */ jsxRuntime.jsx(
-              styles.SliderThumbStyled,
-              {
-                disabled,
-                color,
-                isVertical: orientation === "vertical",
-                ...bindEvents("start")
-              }
-            )
-          }
-        ),
-        /* @__PURE__ */ jsxRuntime.jsx(
-          styles.SliderTooltipStyled,
-          {
-            isVertical: orientation === "vertical",
-            open: currentHandle === "end",
-            show: showTooltip,
-            text: startEndValues[1],
-            position: orientation === "vertical" ? "right" : "top",
-            value: percentOf(startEndValues[1]),
-            ...tooltip,
-            classNameContent: helpers.cnMerge(
-              "quen-ui__slider__tooltip__content",
-              tooltip?.classNameContent
-            ),
-            children: /* @__PURE__ */ jsxRuntime.jsx(
-              styles.SliderThumbStyled,
-              {
-                disabled,
-                color,
-                isVertical: orientation === "vertical",
-                ...bindEvents("end")
-              }
-            )
-          }
-        ),
+        range ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+          renderThumb("start", values[0], percentStart),
+          renderThumb("end", values[1], percentEnd)
+        ] }) : renderThumb("end", values[1], percentEnd),
         /* @__PURE__ */ jsxRuntime.jsx(styles.SliderMarksWrapperStyled, { isVertical: orientation === "vertical", children: marks.map((m) => /* @__PURE__ */ jsxRuntime.jsxs(
           styles.SliderMarkStyled,
           {
             className: m.className,
-            onClick: (e) => {
-              console.log(e);
+            style: m.style,
+            isVertical: orientation === "vertical",
+            value: (m.value - min) / (max - min) * 100,
+            onPointerDown: (e) => {
+              if (disabled) return;
               e.stopPropagation();
-              setByValue(m.value);
+              onPointerDownTrack(e);
             },
-            isVertical: orientation === "vertical",
-            value: percentOf(m.value),
-            style: m.style,
             children: [
               /* @__PURE__ */ jsxRuntime.jsx(styles.SliderDotStyled, {}),
               m.label && /* @__PURE__ */ jsxRuntime.jsx(styles.SliderLabelStyled, { isVertical: orientation === "vertical", children: m.label })

package/dist/Slider/Slider.d.ts

@@ -1,3 +1,3 @@
 import { ISliderProps } from './types';
-declare const Slider: ({ value, min, max, step, onChange, showTooltip, range, orientation, marks, draggableTrack, tooltip, style, className, disabled, color }: ISliderProps) => import("react/jsx-runtime").JSX.Element;
+declare const Slider: ({ min, max, step, range, orientation, marks, disabled, showTooltip, draggableTrack, color, tooltip, style, className, value, onChange }: ISliderProps) => import("react/jsx-runtime").JSX.Element;
 export default Slider;