@quen-ui/components 0.0.14 → 1.0.0

package/dist/Skeleton/styles.es.js

@@ -0,0 +1,59 @@
+import styled, { keyframes, css } from "styled-components";
+import { rgba } from "polished";
+const pulse = keyframes`
+  0% { opacity: 1; }
+  50% { opacity: 0.4; }
+  100% { opacity: 1; }
+`;
+const shimmer = keyframes`
+  0% { background-position: 200% 0; }
+  100% { background-position: -200% 0; }
+`;
+const SkeletonStyled = styled.div.withConfig({
+  shouldForwardProp: (prop) => !["animation", "variant", "width", "height"].includes(prop)
+})`
+  position: relative;
+  overflow: hidden;
+  background: ${({ theme }) => theme.components.Skeleton.background};
+  border-radius: 4px;
+  ${({ width }) => width && css`
+      width: ${typeof width === "number" ? `${width}px` : width};
+    `}
+  ${({ height }) => height && css`
+      height: ${typeof height === "number" ? `${height}px` : height};
+    `}
+
+  ${({ variant }) => variant === "circle" && css`
+      border-radius: 50%;
+    `};
+
+  ${({ variant }) => variant === "text" && css`
+      height: 1em;
+      border-radius: 4px;
+    `};
+
+  ${({ variant }) => variant === "rounded" && css`
+      border-radius: 12px;
+    `};
+  ${({ animation }) => animation === "pulse" && css`
+      animation: ${pulse} 1.5s ease-in-out infinite;
+    `};
+
+  ${({ animation }) => animation === "shimmer" && css`
+      background: ${({ theme }) => css`linear-gradient(
+        90deg,
+       ${theme.components.Skeleton.background} 0%,
+       ${rgba(theme.components.Skeleton.background, 0.3)} 50%,
+      ${theme.components.Skeleton.background} 100%
+      )`};
+      background-size: 200% 100%;
+      animation: ${shimmer} 1.6s linear infinite;
+    `}
+`;
+const SkeletonLineStyled = styled(SkeletonStyled)`
+  height: 1em;
+`;
+export {
+  SkeletonLineStyled,
+  SkeletonStyled
+};

package/dist/Skeleton/types.d.ts

@@ -0,0 +1,74 @@
+import { ReactNode, CSSProperties, ReactElement } from 'react';
+import { TQuenSize } from '../types/size';
+import { IFlexProps } from '../Flex';
+export type TSkeletonAnimation = "pulse" | "shimmer";
+export type TSkeletonVariant = "text" | "circle" | "rect" | "rounded";
+export interface ISkeletonProps {
+    /** Skeleton width */
+    width?: number | string;
+    /** Skeleton height */
+    height?: number | string;
+    /** Skeleton type */
+    variant?: TSkeletonVariant;
+    /** Animation */
+    animation?: TSkeletonAnimation;
+    /** Number of lines for variant="text" */
+    lines?: number;
+    /** Controls the skeleton/content switch */
+    loading?: boolean;
+    /** Content displayed when loading=false. */
+    children?: ReactNode;
+    /** Additional classname */
+    className?: string;
+    /** Additional style */
+    style?: CSSProperties;
+}
+export interface ISkeletonButtonProps extends Omit<ISkeletonProps, "height" | "variant"> {
+    /** Button size */
+    size?: TQuenSize;
+}
+export type TSkeletonListProps = IFlexProps & Pick<ISkeletonProps, "loading"> & {
+    /** Count of elements */
+    count: number;
+    /** Single element skeleton template */
+    skeleton: ReactElement;
+};
+export interface ISkeletonLayoutSchema {
+    /** Avatar(s) in the layout */
+    avatar?: boolean | number | {
+        size: TQuenSize;
+    };
+    /** Heading lines */
+    title?: boolean | number;
+    /** Number of lines of text */
+    text?: number;
+    /** Buttons */
+    button?: boolean | number | {
+        width: number;
+        size: TQuenSize;
+    };
+    /** User node */
+    custom?: ReactNode;
+}
+export interface ISkeletonLayoutProps {
+    /** Layout structure */
+    schema?: ISkeletonLayoutSchema;
+    /** Content after loading */
+    children?: ReactNode;
+    /** Loading status */
+    loading?: boolean;
+    /** Indents */
+    gap?: number | TQuenSize;
+    /** Layout direction */
+    direction?: "row" | "column";
+    /** Additional style */
+    style?: CSSProperties;
+    /** Animation */
+    animation?: TSkeletonAnimation;
+    /** Additional classname */
+    className?: string;
+}
+export interface ISkeletonAvatarProps extends Pick<ISkeletonProps, "loading" | "className" | "style" | "children" | "animation"> {
+    /** Avatar size */
+    size?: TQuenSize;
+}

package/dist/Slider/Slider.cjs.js

@@ -0,0 +1,282 @@
+"use strict";
+const jsxRuntime = require("react/jsx-runtime");
+const React = require("react");
+const styles = require("./styles.cjs.js");
+const helpers = require("@quen-ui/helpers");
+const Slider = ({
+  value = 0,
+  min = 0,
+  max = 100,
+  step = 1,
+  onChange,
+  showTooltip = true,
+  range,
+  orientation = "horizontal",
+  marks = [],
+  draggableTrack,
+  tooltip,
+  style,
+  className,
+  disabled,
+  color = "violet"
+}) => {
+  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]);
+      }
+    },
+    [range, onChange]
+  );
+  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],
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          styles.SliderTrackStyled,
+          {
+            "data-testid": "slider-track",
+            disabled,
+            ref: trackRef,
+            isVertical: orientation === "vertical",
+            onClick: handleTrackClick
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          styles.SliderProgressStyled,
+          {
+            isRange: range,
+            range: [percentOf(startEndValues[0]), percentOf(startEndValues[1])],
+            "data-testid": "slider-progress",
+            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")
+              }
+            )
+          }
+        ),
+        /* @__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);
+              e.stopPropagation();
+              setByValue(m.value);
+            },
+            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 })
+            ]
+          },
+          m.value
+        )) })
+      ]
+    }
+  );
+};
+module.exports = Slider;

package/dist/Slider/Slider.d.ts

@@ -0,0 +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;
+export default Slider;

package/dist/Slider/Slider.es.js

@@ -0,0 +1,283 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { useRef, useState, useEffect, useCallback } from "react";
+import { SliderContainer, SliderTrackStyled, SliderProgressStyled, SliderTooltipStyled, SliderThumbStyled, SliderMarksWrapperStyled, SliderMarkStyled, SliderDotStyled, SliderLabelStyled } from "./styles.es.js";
+import { cnMerge } from "@quen-ui/helpers";
+const Slider = ({
+  value = 0,
+  min = 0,
+  max = 100,
+  step = 1,
+  onChange,
+  showTooltip = true,
+  range,
+  orientation = "horizontal",
+  marks = [],
+  draggableTrack,
+  tooltip,
+  style,
+  className,
+  disabled,
+  color = "violet"
+}) => {
+  const trackRef = useRef(null);
+  const draggableRef = 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] = useState(
+    initialValue(value)
+  );
+  const [currentHandle, setCurrentHandle] = useState(
+    null
+  );
+  const [isMouseDown, setIsMouseDown] = useState(false);
+  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 = useCallback(
+    (newVal) => {
+      if (newVal[0] !== startEndValues[0] || newVal[1] !== startEndValues[1] || newVal[0] == 0 && newVal[1] == 0) {
+        setStartEndValues(newVal);
+        onChange?.(range ? newVal : newVal[1]);
+      }
+    },
+    [range, onChange]
+  );
+  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__ */ jsxs(
+    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],
+      children: [
+        /* @__PURE__ */ jsx(
+          SliderTrackStyled,
+          {
+            "data-testid": "slider-track",
+            disabled,
+            ref: trackRef,
+            isVertical: orientation === "vertical",
+            onClick: handleTrackClick
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          SliderProgressStyled,
+          {
+            isRange: range,
+            range: [percentOf(startEndValues[0]), percentOf(startEndValues[1])],
+            "data-testid": "slider-progress",
+            disabled,
+            color,
+            onMouseDown: startDragWholeRange,
+            onTouchStart: startDragWholeRange,
+            isVertical: orientation === "vertical"
+          }
+        ),
+        range && /* @__PURE__ */ jsx(
+          SliderTooltipStyled,
+          {
+            isVertical: orientation === "vertical",
+            open: currentHandle === "start",
+            show: showTooltip,
+            text: startEndValues[0],
+            position: orientation === "vertical" ? "right" : "top",
+            value: percentOf(startEndValues[0]),
+            ...tooltip,
+            classNameContent: cnMerge(
+              "quen-ui__slider__tooltip__content",
+              tooltip?.classNameContent
+            ),
+            children: /* @__PURE__ */ jsx(
+              SliderThumbStyled,
+              {
+                disabled,
+                color,
+                isVertical: orientation === "vertical",
+                ...bindEvents("start")
+              }
+            )
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          SliderTooltipStyled,
+          {
+            isVertical: orientation === "vertical",
+            open: currentHandle === "end",
+            show: showTooltip,
+            text: startEndValues[1],
+            position: orientation === "vertical" ? "right" : "top",
+            value: percentOf(startEndValues[1]),
+            ...tooltip,
+            classNameContent: cnMerge(
+              "quen-ui__slider__tooltip__content",
+              tooltip?.classNameContent
+            ),
+            children: /* @__PURE__ */ jsx(
+              SliderThumbStyled,
+              {
+                disabled,
+                color,
+                isVertical: orientation === "vertical",
+                ...bindEvents("end")
+              }
+            )
+          }
+        ),
+        /* @__PURE__ */ jsx(SliderMarksWrapperStyled, { isVertical: orientation === "vertical", children: marks.map((m) => /* @__PURE__ */ jsxs(
+          SliderMarkStyled,
+          {
+            className: m.className,
+            onClick: (e) => {
+              console.log(e);
+              e.stopPropagation();
+              setByValue(m.value);
+            },
+            isVertical: orientation === "vertical",
+            value: percentOf(m.value),
+            style: m.style,
+            children: [
+              /* @__PURE__ */ jsx(SliderDotStyled, {}),
+              m.label && /* @__PURE__ */ jsx(SliderLabelStyled, { isVertical: orientation === "vertical", children: m.label })
+            ]
+          },
+          m.value
+        )) })
+      ]
+    }
+  );
+};
+export {
+  Slider as default
+};