@shoplflow/base 0.34.0 → 0.35.1

package/dist/index.cjs

@@ -1758,6 +1758,18 @@ var getWidthAndHeightFromSizeVar = (sizeVar) => {
       `;
   }
 };
+var getIconSizeFromSizeVar = (sizeVar) => {
+  switch (sizeVar) {
+    case "M":
+      return "24px";
+    case "S":
+      return "20px";
+    case "XS":
+      return "12px";
+    default:
+      return "20px";
+  }
+};
 var getStyleByStyleVar2 = (styleVar, color, isHovered) => {
   switch (styleVar) {
     case "PRIMARY":
@@ -1817,14 +1829,15 @@ var StyledIconButton = styled6__default.default.button`
   ${({ sizeVar }) => getWidthAndHeightFromSizeVar(sizeVar)};
   ${({ disabled }) => getDisabledStyle(disabled)};
   & > svg {
-    width: 20px;
-    height: 20px;
+    width: ${({ iconSizeVar }) => getIconSizeFromSizeVar(iconSizeVar)};
+    height: ${({ iconSizeVar }) => getIconSizeFromSizeVar(iconSizeVar)};
   }
 `;
 var IconButton = React3.forwardRef(
   (_a, ref) => {
     var _b = _a, {
       styleVar,
+      iconSizeVar,
       sizeVar,
       disabled,
       children,
@@ -1835,6 +1848,7 @@ var IconButton = React3.forwardRef(
       type = "button"
     } = _b, rest = __objRest(_b, [
       "styleVar",
+      "iconSizeVar",
       "sizeVar",
       "disabled",
       "children",
@@ -1857,6 +1871,7 @@ var IconButton = React3.forwardRef(
       StyledIconButton,
       __spreadProps(__spreadValues({
         styleVar,
+        iconSizeVar,
         sizeVar,
         disabled,
         color,
@@ -6583,12 +6598,12 @@ var Skeleton = ({ styleVar = "rectangle", width = "50px", height = "20px" }) =>
 exports.Skeleton = Skeleton;
 
 // src/components/Slider/Slider.types.ts
-var SLIDER_Z_INDEX = {
+exports.SLIDER_Z_INDEX = {
   THUMB_BUTTON: 10
 };
 
 // src/components/Slider/Slider.styled.ts
-styled6__default.default.div`
+var SliderContainer = styled6__default.default.div`
   position: relative;
   width: 100%;
   padding: 0 12px;
@@ -6601,14 +6616,14 @@ styled6__default.default.div`
       cursor: not-allowed;
     `}
 `;
-styled6__default.default.div`
+var SliderTrack = styled6__default.default.div`
   width: 100%; // SliderContainer의 padding 영역 내에서 100%
   height: 24px;
   position: relative;
   overflow: visible;
   margin: 0;
 `;
-styled6__default.default.div`
+var SelectedTrack = styled6__default.default.div`
   position: absolute;
   height: 100%;
   border-radius: 16px;
@@ -6617,7 +6632,7 @@ styled6__default.default.div`
   left: ${({ startPosition }) => startPosition};
   width: ${({ width }) => width};
 `;
-styled6__default.default.div`
+var StepsContainer = styled6__default.default.div`
   position: absolute;
   top: 0;
   left: 0;
@@ -6627,7 +6642,7 @@ styled6__default.default.div`
   align-items: center;
   pointer-events: none;
 `;
-styled6__default.default.div`
+var Steps = styled6__default.default.div`
   position: absolute;
   width: 8px;
   height: 8px;
@@ -6639,16 +6654,16 @@ styled6__default.default.div`
     height: 16px;
   }
 `;
-styled6__default.default.button`
+var ThumbButton = styled6__default.default.button`
   position: absolute;
   top: 50%;
   transform: translate(-50%, -50%);
   border: none;
   padding: 0;
   outline: none;
-  z-index: ${SLIDER_Z_INDEX.THUMB_BUTTON}; // thumb를 track보다 위에 위치시킴
+  z-index: ${exports.SLIDER_Z_INDEX.THUMB_BUTTON}; // thumb를 track보다 위에 위치시킴
 `;
-styled6__default.default.div`
+var ThumbCircle = styled6__default.default.div`
   width: 16px;
   height: 16px;
   border-radius: 50%;
@@ -6669,6 +6684,208 @@ styled6__default.default.div`
       }
     `}
 `;
+
+// src/components/Slider/sliderUtils.ts
+var getAdjustedValue = (value, bounds, step) => {
+  const { min, max } = bounds;
+  const snappedValue = Math.round((value - min) / step) * step + min;
+  return Math.max(min, Math.min(max, snappedValue));
+};
+var getPositionPercentage = (index, selectedRange, bounds) => {
+  const { min, max } = bounds;
+  return Math.trunc((selectedRange[index] - min) / (max - min) * 100);
+};
+var getValueFromPercentage = (percentage, bounds, step) => {
+  const { min, max } = bounds;
+  const rawValue = min + percentage / 100 * (max - min);
+  return getAdjustedValue(rawValue, bounds, step);
+};
+var generateSteps = (bounds, step, maxSteps = 21) => {
+  const { min, max } = bounds;
+  const totalSteps = Math.floor((max - min) / step) + 1;
+  const stepInterval = totalSteps > maxSteps ? Math.ceil(totalSteps / maxSteps) : 1;
+  const tickValues = [];
+  for (let i = 0; i < totalSteps; i += stepInterval) {
+    const value = min + i * step;
+    if (value <= max) {
+      tickValues.push(value);
+    }
+  }
+  if (tickValues.length > 0 && tickValues[tickValues.length - 1] !== max) {
+    tickValues.push(max);
+  }
+  return tickValues;
+};
+var validateRange = ({
+  min,
+  max,
+  defaultRange
+}) => {
+  if (defaultRange.min < min || defaultRange.max > max) {
+    throw new Error("defaultRange\uAC00 Slider\uC758 \uC804\uCCB4 \uBC94\uC704\uB97C \uBC97\uC5B4\uB0A9\uB2C8\uB2E4.");
+  }
+  if (defaultRange.min > defaultRange.max) {
+    throw new Error("defaultRange\uAC00 \uC62C\uBC14\uB974\uC9C0 \uC54A\uC2B5\uB2C8\uB2E4. \uB2E4\uC2DC \uD655\uC778\uD574\uC8FC\uC138\uC694.");
+  }
+};
+var validateStep = ({ min, max, step }) => {
+  if (step <= 0) {
+    throw new Error("step\uC740 0\uBCF4\uB2E4 \uCEE4\uC57C \uD569\uB2C8\uB2E4.");
+  }
+  if (step > max || step < min || step > max - min) {
+    throw new Error("step\uC774 Slider\uC758 \uC804\uCCB4 \uBC94\uC704\uB97C \uBC97\uC5B4\uB0A9\uB2C8\uB2E4.");
+  }
+};
+var SliderSteps = ({ bounds, step, maxSteps = 21 }) => {
+  const steps = generateSteps(bounds, step, maxSteps);
+  const { min, max } = bounds;
+  return /* @__PURE__ */ jsxRuntime.jsx(StepsContainer, { children: steps.map((stepValue) => {
+    const position = (stepValue - min) / (max - min) * 100;
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      Steps,
+      {
+        style: {
+          left: `${position}%`
+        }
+      },
+      stepValue
+    );
+  }) });
+};
+var SliderThumbs = ({
+  positions,
+  values,
+  isDisabled,
+  selectedColor,
+  onMouseDown
+}) => {
+  return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: positions.map((position, index) => /* @__PURE__ */ jsxRuntime.jsx(ThumbButton, { style: { left: `${position}%` }, onMouseDown: onMouseDown(index), children: /* @__PURE__ */ jsxRuntime.jsx(
+    exports.Tooltip,
+    {
+      trigger: /* @__PURE__ */ jsxRuntime.jsx(ThumbCircle, { isDisabled, selectedColor }),
+      popper: !isDisabled && /* @__PURE__ */ jsxRuntime.jsx(exports.Tooltip.Content, { content: Math.abs(values[index]).toString() })
+    }
+  ) }, index)) });
+};
+var useSlider = ({ bounds, step, defaultRange, handleRange, isDisabled = false }) => {
+  const { min, max } = bounds;
+  validateRange({ min, max, defaultRange });
+  validateStep({ min, max, step });
+  const [range, setRange] = React3.useState([defaultRange.min, defaultRange.max]);
+  const trackRef = React3.useRef(null);
+  const updateRange = React3.useCallback(
+    (index, newValue) => {
+      setRange((prev) => {
+        const newRange = [...prev];
+        if (index === 0) {
+          newRange[0] = Math.min(newValue, newRange[1]);
+        } else if (index === 1) {
+          newRange[1] = Math.max(newValue, newRange[0]);
+        }
+        return newRange;
+      });
+      handleRange == null ? void 0 : handleRange({ min: range[0], max: range[1] });
+    },
+    [range, handleRange]
+  );
+  const handleMouseDown = React3.useCallback(
+    (index) => (e) => {
+      if (isDisabled) {
+        return;
+      }
+      e.preventDefault();
+      const handleMouseMove = (moveEvent) => {
+        if (!trackRef.current) {
+          return;
+        }
+        const rect = trackRef.current.getBoundingClientRect();
+        const offsetX = moveEvent.clientX - rect.left;
+        const percentage = Math.min(Math.max(offsetX / rect.width * 100, 0), 100);
+        const newValue = getValueFromPercentage(percentage, { min, max }, step);
+        updateRange(index, newValue);
+      };
+      const handleMouseUp = () => {
+        document.removeEventListener("mousemove", handleMouseMove);
+        document.removeEventListener("mouseup", handleMouseUp);
+      };
+      document.addEventListener("mousemove", handleMouseMove);
+      document.addEventListener("mouseup", handleMouseUp);
+    },
+    [isDisabled, min, max, step, updateRange]
+  );
+  const handleClickTrack = React3.useCallback(
+    (e) => {
+      if (isDisabled || !trackRef.current) {
+        return;
+      }
+      const rect = trackRef.current.getBoundingClientRect();
+      const offsetX = e.clientX - rect.left;
+      const percentage = offsetX / rect.width * 100;
+      const newValue = getValueFromPercentage(percentage, { min, max }, step);
+      const distanceToStart = Math.abs(getPositionPercentage(0, range, { min, max }) - percentage);
+      const distanceToEnd = Math.abs(getPositionPercentage(1, range, { min, max }) - percentage);
+      if (distanceToStart <= distanceToEnd) {
+        updateRange(0, newValue);
+      } else {
+        updateRange(1, newValue);
+      }
+    },
+    [isDisabled, min, max, step, range, updateRange]
+  );
+  const startPosition = getPositionPercentage(0, range, { min, max });
+  const endPosition = getPositionPercentage(1, range, { min, max });
+  const width = endPosition - startPosition;
+  return {
+    range,
+    trackRef,
+    handleMouseDown,
+    handleClickTrack,
+    positions: {
+      start: startPosition,
+      end: endPosition,
+      width
+    }
+  };
+};
+var Slider = ({
+  min = 0,
+  max,
+  step = 1,
+  defaultRange = { min: 0, max: 0 },
+  handleRange,
+  isDisabled = false,
+  selectedColor = "shopl300"
+}) => {
+  const { range, trackRef, handleMouseDown, handleClickTrack, positions } = useSlider({
+    bounds: { min, max },
+    step,
+    defaultRange,
+    handleRange,
+    isDisabled
+  });
+  return /* @__PURE__ */ jsxRuntime.jsx(SliderContainer, { isDisabled, children: /* @__PURE__ */ jsxRuntime.jsxs(SliderTrack, { ref: trackRef, onClick: handleClickTrack, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(SliderSteps, { bounds: { min, max }, step, range }),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      SelectedTrack,
+      {
+        selectedColor,
+        startPosition: `calc(${positions.start}% - 12px)`,
+        width: `calc(${positions.width}% + 24px)`
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      SliderThumbs,
+      {
+        positions: [positions.start, positions.end],
+        isDisabled,
+        selectedColor,
+        onMouseDown: handleMouseDown,
+        values: range
+      }
+    )
+  ] }) });
+};
+exports.Slider = Slider;
 var SpaceMarginWrapper = styled6__default.default(framerMotion.motion.div)`
   position: relative;
   display: flex;

package/dist/index.d.cts

@@ -201,6 +201,12 @@ interface SizeVariantProps<Size> {
      */
     sizeVar?: Size;
 }
+interface IconSizeVariantProps<Size> {
+    /**
+     * 아이콘의 크기를 설정합니다.
+     */
+    iconSizeVar?: Size;
+}
 interface StyleVariantProps<Style> {
     /**
      * 컴포넌트의 스타일을 설정합니다.
@@ -637,7 +643,7 @@ declare const IconButtonStyleVariants: {
     readonly GHOST: "GHOST";
 };
 declare type IconButtonStyleVariantType = $Values<typeof IconButtonStyleVariants>;
-declare type IconButtonOptionProps<T extends ElementType = 'button'> = Omit<ComponentPropsWithoutRef<T>, 'color' | 'disabled'> & DisableProps & SizeVariantProps<IconButtonSizeVariantType> & StyleVariantProps<IconButtonStyleVariantType> & ChildrenProps & ColorTokenProps & LoadingProps;
+declare type IconButtonOptionProps<T extends ElementType = 'button'> = Omit<ComponentPropsWithoutRef<T>, 'color' | 'disabled'> & DisableProps & SizeVariantProps<IconButtonSizeVariantType> & IconSizeVariantProps<'XS' | 'S' | 'M'> & StyleVariantProps<IconButtonStyleVariantType> & ChildrenProps & ColorTokenProps & LoadingProps;
 declare type IconButtonProps<T extends ElementType = 'button'> = PolymorphicComponentProps<T, IconButtonOptionProps>;
 declare type IconButtonComponent = <T extends ElementType = 'button'>(props: IconButtonProps<T> & {
     ref?: ComponentPropsWithRef<T>['ref'];
@@ -1576,5 +1582,14 @@ interface SliderProps {
      */
     selectedColor?: ColorTokens;
 }
+declare type SliderBounds = {
+    min: number;
+    max: number;
+};
+declare const SLIDER_Z_INDEX: {
+    readonly THUMB_BUTTON: 10;
+};
+
+declare const Slider: React__default.FC<SliderProps>;
 
-export { AnnualDatepicker, AnnualDatepickerProps, AsProp, Avatar, AvatarOptionProps, AvatarProps, AvatarSizeVariantType, AvatarSizeVariants, BackDropOptionProps, BackDropProps, BorderRadiusTokens, BoxShadowTokens, Button, ButtonComponent, ButtonOptionProps, ButtonProps, ButtonSizeVariantType, ButtonSizeVariants, ButtonStyleVariantType, ButtonStyleVariants, CHECKBOX_SYMBOL_KEY, Callout, CalloutOptionProps, CalloutProps, CalloutType, CalloutTypes, Checkbox, CheckboxOptionProps, CheckboxProps, CheckboxStyleVariantType, CheckboxStyleVariants, ChipButton, ChipButtonOptionProps, ChipButtonProps, ChipButtonSizeVariantType, ChipButtonSizeVariants, ChipButtonStyleVariantType, ChipButtonStyleVariants, ChipToggle, ChipToggleOptionProps, ChipToggleProps, ChipToggleSizeVariantType, ChipToggleSizeVariants, ChipToggleStyleVariantType, ChipToggleStyleVariants, ColorTokens, DangerouslySetInnerHTML, DayCalendarType, DayDatepicker, DayDatepickerHeaderCustomProps, DayDatepickerOptionProps, DayDatepickerProps, DayDatepickerSizeVariantType, DayDatepickerSizeVariants, DomainType, Dropdown, DropdownButton, DropdownButtonContext, DropdownButtonContextType, DropdownButtonOptionProps, DropdownButtonProps, DropdownButtonSizeVariantType, DropdownButtonSizeVariants, DropdownButtonStyleVariantType, DropdownButtonStyleVariants, DropdownContentProps, DropdownOptionProps, DropdownOptionVariantType, DropdownOptionVariants, DropdownProps, DropdownSizeVariantType, DropdownTriggerButtonProps, FontWeightTokens, Icon, IconButton, IconButtonComponent, IconButtonOptionProps, IconButtonProps, IconButtonSizeVariantType, IconButtonSizeVariants, IconButtonStyleVariantType, IconButtonStyleVariants, IconOptionProps, IconProps, IconSizeVariants, IconSizeVariantsType, Input, InputButton, InputButtonOptionProps, InputButtonProps, InputOptionProps, InputProps, InputSizeVariantType, InputSizeVariants, List, ListContent2ColumnsProps, ListOptionProps, ListProps, ListText2RowsProps, MODAL_FOOTER_KEY, MODAL_HEADER_KEY, Menu, MenuOptionProps, MenuProps, MenuSizeVariantType, MenuSizeVariants, MinusBoxOptionProps, MinusBoxProps, MinusButton, Modal, ModalBodyOptionProps, ModalBodyProps, ModalBottomProps, ModalContainerOptionProps, ModalContainerProps, ModalContext, ModalFooterOptionProps, ModalFooterProps, ModalFooterType, ModalHandlerContext, ModalHeaderOptionProps, ModalHeaderProps, ModalHeaderType, ModalPortal as ModalProvider, ModalSize, ModalSizeType, ModalStateType, ModalTopProps, MonthClickDateInfo, MonthDatepicker, MonthDatepickerProps, MonthDatepickerStyleType, MotionStack, MotionStackComponentType, MotionStackContainer, MotionStackContainerComponentType, NumberCombobox, NumberComboboxErrorType, NumberComboboxInputType, NumberComboboxOptionProps, NumberComboboxProps, NumberComboboxSizeVariantType, NumberComboboxSizeVariants, Pagination, PaginationOptionProps, PaginationProps, PaginationSizeSelectorProps, PolymorphicComponentProps, PolymorphicRef, Popper, PopperOptionProps, PopperPortal, PopperPortalProps, PopperProps, PopperTrigger, PopperTriggerProps, RADIO_SYMBOL_KEY, Radio, RadioOptionProps, RadioProps, RemoveModalProps, ScrollArea, ScrollAreaOptionProps, ScrollAreaProps, ScrollbarRefType, SelectInputButton, SelectInputButtonOptionProps, SelectInputButtonProps, ShoplflowProvider, ShoplflowProviderProps, Skeleton, SkeletonProps, SliderProps, SpacingTokens, SplitButton, SplitButtonContext, SplitButtonContextType, SplitButtonOptionProps, SplitButtonProps, SplitButtonSizeVariantType, SplitButtonSizeVariants, SplitButtonStyleVariantType, SplitButtonStyleVariants, Stack, StackComponentType, StackContainer, StackContainerComponentType, StackContainerGenericProps, StackContainerOptionProps, StackContainerProps, StackGenericProps, StackOptionProps, StackProps, StyledIcon, StyledStack, StyledStackContainer, Switch, SwitchOptionProps, SwitchProps, TREE_SYMBOL_KEY, TabOptionProps, TabProps, TabSizeVariantType, TabSizeVariants, TabStyleVariantType, TabStyleVariants, TabStyledProps, TabTextStyledProps, Tabs, TabsContext, TabsContextType, TabsOptionProps, TabsProps, Tag, TagOptionProps, TagProps, TagSizeVariantType, TagSizeVariants, TagStyleVariantType, TagStyleVariants, Text, Text2Rows, TextArea, TextAreaOptionProps, TextAreaProps, TextOptionProps, TextProps, ToggleButton, ToggleButtonInnerRadioOptionProps, ToggleButtonInnerRadioProps, ToggleButtonOptionProps, ToggleButtonProps, ToggleButtonSizeVariantType, ToggleButtonSizeVariants, Tooltip, TooltipContentProps, TooltipOptionProps, TooltipProps, Tree, TreeItem, TreeItemOptionProps, TreeItemProps, TreeOptionProps, TreeProps, TypographyTokens, WeekClickDateInfo, WeekDatepicker, WeekDatepickerProps, WeekDatepickerStyleType, YearSelectProps, borderRadiusTokens, boxShadowTokens, colorTokens, fontWeightTokens, getDomain, spacingTokens, typographyTokens, useDomain, useDropdownButtonContext, useHandleModal, useModalValue, useSplitButtonContext, useTabs };
+export { AnnualDatepicker, AnnualDatepickerProps, AsProp, Avatar, AvatarOptionProps, AvatarProps, AvatarSizeVariantType, AvatarSizeVariants, BackDropOptionProps, BackDropProps, BorderRadiusTokens, BoxShadowTokens, Button, ButtonComponent, ButtonOptionProps, ButtonProps, ButtonSizeVariantType, ButtonSizeVariants, ButtonStyleVariantType, ButtonStyleVariants, CHECKBOX_SYMBOL_KEY, Callout, CalloutOptionProps, CalloutProps, CalloutType, CalloutTypes, Checkbox, CheckboxOptionProps, CheckboxProps, CheckboxStyleVariantType, CheckboxStyleVariants, ChipButton, ChipButtonOptionProps, ChipButtonProps, ChipButtonSizeVariantType, ChipButtonSizeVariants, ChipButtonStyleVariantType, ChipButtonStyleVariants, ChipToggle, ChipToggleOptionProps, ChipToggleProps, ChipToggleSizeVariantType, ChipToggleSizeVariants, ChipToggleStyleVariantType, ChipToggleStyleVariants, ColorTokens, DangerouslySetInnerHTML, DayCalendarType, DayDatepicker, DayDatepickerHeaderCustomProps, DayDatepickerOptionProps, DayDatepickerProps, DayDatepickerSizeVariantType, DayDatepickerSizeVariants, DomainType, Dropdown, DropdownButton, DropdownButtonContext, DropdownButtonContextType, DropdownButtonOptionProps, DropdownButtonProps, DropdownButtonSizeVariantType, DropdownButtonSizeVariants, DropdownButtonStyleVariantType, DropdownButtonStyleVariants, DropdownContentProps, DropdownOptionProps, DropdownOptionVariantType, DropdownOptionVariants, DropdownProps, DropdownSizeVariantType, DropdownTriggerButtonProps, FontWeightTokens, Icon, IconButton, IconButtonComponent, IconButtonOptionProps, IconButtonProps, IconButtonSizeVariantType, IconButtonSizeVariants, IconButtonStyleVariantType, IconButtonStyleVariants, IconOptionProps, IconProps, IconSizeVariants, IconSizeVariantsType, Input, InputButton, InputButtonOptionProps, InputButtonProps, InputOptionProps, InputProps, InputSizeVariantType, InputSizeVariants, List, ListContent2ColumnsProps, ListOptionProps, ListProps, ListText2RowsProps, MODAL_FOOTER_KEY, MODAL_HEADER_KEY, Menu, MenuOptionProps, MenuProps, MenuSizeVariantType, MenuSizeVariants, MinusBoxOptionProps, MinusBoxProps, MinusButton, Modal, ModalBodyOptionProps, ModalBodyProps, ModalBottomProps, ModalContainerOptionProps, ModalContainerProps, ModalContext, ModalFooterOptionProps, ModalFooterProps, ModalFooterType, ModalHandlerContext, ModalHeaderOptionProps, ModalHeaderProps, ModalHeaderType, ModalPortal as ModalProvider, ModalSize, ModalSizeType, ModalStateType, ModalTopProps, MonthClickDateInfo, MonthDatepicker, MonthDatepickerProps, MonthDatepickerStyleType, MotionStack, MotionStackComponentType, MotionStackContainer, MotionStackContainerComponentType, NumberCombobox, NumberComboboxErrorType, NumberComboboxInputType, NumberComboboxOptionProps, NumberComboboxProps, NumberComboboxSizeVariantType, NumberComboboxSizeVariants, Pagination, PaginationOptionProps, PaginationProps, PaginationSizeSelectorProps, PolymorphicComponentProps, PolymorphicRef, Popper, PopperOptionProps, PopperPortal, PopperPortalProps, PopperProps, PopperTrigger, PopperTriggerProps, RADIO_SYMBOL_KEY, Radio, RadioOptionProps, RadioProps, RemoveModalProps, SLIDER_Z_INDEX, ScrollArea, ScrollAreaOptionProps, ScrollAreaProps, ScrollbarRefType, SelectInputButton, SelectInputButtonOptionProps, SelectInputButtonProps, ShoplflowProvider, ShoplflowProviderProps, Skeleton, SkeletonProps, Slider, SliderBounds, SliderProps, SpacingTokens, SplitButton, SplitButtonContext, SplitButtonContextType, SplitButtonOptionProps, SplitButtonProps, SplitButtonSizeVariantType, SplitButtonSizeVariants, SplitButtonStyleVariantType, SplitButtonStyleVariants, Stack, StackComponentType, StackContainer, StackContainerComponentType, StackContainerGenericProps, StackContainerOptionProps, StackContainerProps, StackGenericProps, StackOptionProps, StackProps, StyledIcon, StyledStack, StyledStackContainer, Switch, SwitchOptionProps, SwitchProps, TREE_SYMBOL_KEY, TabOptionProps, TabProps, TabSizeVariantType, TabSizeVariants, TabStyleVariantType, TabStyleVariants, TabStyledProps, TabTextStyledProps, Tabs, TabsContext, TabsContextType, TabsOptionProps, TabsProps, Tag, TagOptionProps, TagProps, TagSizeVariantType, TagSizeVariants, TagStyleVariantType, TagStyleVariants, Text, Text2Rows, TextArea, TextAreaOptionProps, TextAreaProps, TextOptionProps, TextProps, ToggleButton, ToggleButtonInnerRadioOptionProps, ToggleButtonInnerRadioProps, ToggleButtonOptionProps, ToggleButtonProps, ToggleButtonSizeVariantType, ToggleButtonSizeVariants, Tooltip, TooltipContentProps, TooltipOptionProps, TooltipProps, Tree, TreeItem, TreeItemOptionProps, TreeItemProps, TreeOptionProps, TreeProps, TypographyTokens, WeekClickDateInfo, WeekDatepicker, WeekDatepickerProps, WeekDatepickerStyleType, YearSelectProps, borderRadiusTokens, boxShadowTokens, colorTokens, fontWeightTokens, getDomain, spacingTokens, typographyTokens, useDomain, useDropdownButtonContext, useHandleModal, useModalValue, useSplitButtonContext, useTabs };

package/dist/index.d.ts

@@ -201,6 +201,12 @@ interface SizeVariantProps<Size> {
      */
     sizeVar?: Size;
 }
+interface IconSizeVariantProps<Size> {
+    /**
+     * 아이콘의 크기를 설정합니다.
+     */
+    iconSizeVar?: Size;
+}
 interface StyleVariantProps<Style> {
     /**
      * 컴포넌트의 스타일을 설정합니다.
@@ -637,7 +643,7 @@ declare const IconButtonStyleVariants: {
     readonly GHOST: "GHOST";
 };
 declare type IconButtonStyleVariantType = $Values<typeof IconButtonStyleVariants>;
-declare type IconButtonOptionProps<T extends ElementType = 'button'> = Omit<ComponentPropsWithoutRef<T>, 'color' | 'disabled'> & DisableProps & SizeVariantProps<IconButtonSizeVariantType> & StyleVariantProps<IconButtonStyleVariantType> & ChildrenProps & ColorTokenProps & LoadingProps;
+declare type IconButtonOptionProps<T extends ElementType = 'button'> = Omit<ComponentPropsWithoutRef<T>, 'color' | 'disabled'> & DisableProps & SizeVariantProps<IconButtonSizeVariantType> & IconSizeVariantProps<'XS' | 'S' | 'M'> & StyleVariantProps<IconButtonStyleVariantType> & ChildrenProps & ColorTokenProps & LoadingProps;
 declare type IconButtonProps<T extends ElementType = 'button'> = PolymorphicComponentProps<T, IconButtonOptionProps>;
 declare type IconButtonComponent = <T extends ElementType = 'button'>(props: IconButtonProps<T> & {
     ref?: ComponentPropsWithRef<T>['ref'];
@@ -1576,5 +1582,14 @@ interface SliderProps {
      */
     selectedColor?: ColorTokens;
 }
+declare type SliderBounds = {
+    min: number;
+    max: number;
+};
+declare const SLIDER_Z_INDEX: {
+    readonly THUMB_BUTTON: 10;
+};
+
+declare const Slider: React__default.FC<SliderProps>;
 
-export { AnnualDatepicker, AnnualDatepickerProps, AsProp, Avatar, AvatarOptionProps, AvatarProps, AvatarSizeVariantType, AvatarSizeVariants, BackDropOptionProps, BackDropProps, BorderRadiusTokens, BoxShadowTokens, Button, ButtonComponent, ButtonOptionProps, ButtonProps, ButtonSizeVariantType, ButtonSizeVariants, ButtonStyleVariantType, ButtonStyleVariants, CHECKBOX_SYMBOL_KEY, Callout, CalloutOptionProps, CalloutProps, CalloutType, CalloutTypes, Checkbox, CheckboxOptionProps, CheckboxProps, CheckboxStyleVariantType, CheckboxStyleVariants, ChipButton, ChipButtonOptionProps, ChipButtonProps, ChipButtonSizeVariantType, ChipButtonSizeVariants, ChipButtonStyleVariantType, ChipButtonStyleVariants, ChipToggle, ChipToggleOptionProps, ChipToggleProps, ChipToggleSizeVariantType, ChipToggleSizeVariants, ChipToggleStyleVariantType, ChipToggleStyleVariants, ColorTokens, DangerouslySetInnerHTML, DayCalendarType, DayDatepicker, DayDatepickerHeaderCustomProps, DayDatepickerOptionProps, DayDatepickerProps, DayDatepickerSizeVariantType, DayDatepickerSizeVariants, DomainType, Dropdown, DropdownButton, DropdownButtonContext, DropdownButtonContextType, DropdownButtonOptionProps, DropdownButtonProps, DropdownButtonSizeVariantType, DropdownButtonSizeVariants, DropdownButtonStyleVariantType, DropdownButtonStyleVariants, DropdownContentProps, DropdownOptionProps, DropdownOptionVariantType, DropdownOptionVariants, DropdownProps, DropdownSizeVariantType, DropdownTriggerButtonProps, FontWeightTokens, Icon, IconButton, IconButtonComponent, IconButtonOptionProps, IconButtonProps, IconButtonSizeVariantType, IconButtonSizeVariants, IconButtonStyleVariantType, IconButtonStyleVariants, IconOptionProps, IconProps, IconSizeVariants, IconSizeVariantsType, Input, InputButton, InputButtonOptionProps, InputButtonProps, InputOptionProps, InputProps, InputSizeVariantType, InputSizeVariants, List, ListContent2ColumnsProps, ListOptionProps, ListProps, ListText2RowsProps, MODAL_FOOTER_KEY, MODAL_HEADER_KEY, Menu, MenuOptionProps, MenuProps, MenuSizeVariantType, MenuSizeVariants, MinusBoxOptionProps, MinusBoxProps, MinusButton, Modal, ModalBodyOptionProps, ModalBodyProps, ModalBottomProps, ModalContainerOptionProps, ModalContainerProps, ModalContext, ModalFooterOptionProps, ModalFooterProps, ModalFooterType, ModalHandlerContext, ModalHeaderOptionProps, ModalHeaderProps, ModalHeaderType, ModalPortal as ModalProvider, ModalSize, ModalSizeType, ModalStateType, ModalTopProps, MonthClickDateInfo, MonthDatepicker, MonthDatepickerProps, MonthDatepickerStyleType, MotionStack, MotionStackComponentType, MotionStackContainer, MotionStackContainerComponentType, NumberCombobox, NumberComboboxErrorType, NumberComboboxInputType, NumberComboboxOptionProps, NumberComboboxProps, NumberComboboxSizeVariantType, NumberComboboxSizeVariants, Pagination, PaginationOptionProps, PaginationProps, PaginationSizeSelectorProps, PolymorphicComponentProps, PolymorphicRef, Popper, PopperOptionProps, PopperPortal, PopperPortalProps, PopperProps, PopperTrigger, PopperTriggerProps, RADIO_SYMBOL_KEY, Radio, RadioOptionProps, RadioProps, RemoveModalProps, ScrollArea, ScrollAreaOptionProps, ScrollAreaProps, ScrollbarRefType, SelectInputButton, SelectInputButtonOptionProps, SelectInputButtonProps, ShoplflowProvider, ShoplflowProviderProps, Skeleton, SkeletonProps, SliderProps, SpacingTokens, SplitButton, SplitButtonContext, SplitButtonContextType, SplitButtonOptionProps, SplitButtonProps, SplitButtonSizeVariantType, SplitButtonSizeVariants, SplitButtonStyleVariantType, SplitButtonStyleVariants, Stack, StackComponentType, StackContainer, StackContainerComponentType, StackContainerGenericProps, StackContainerOptionProps, StackContainerProps, StackGenericProps, StackOptionProps, StackProps, StyledIcon, StyledStack, StyledStackContainer, Switch, SwitchOptionProps, SwitchProps, TREE_SYMBOL_KEY, TabOptionProps, TabProps, TabSizeVariantType, TabSizeVariants, TabStyleVariantType, TabStyleVariants, TabStyledProps, TabTextStyledProps, Tabs, TabsContext, TabsContextType, TabsOptionProps, TabsProps, Tag, TagOptionProps, TagProps, TagSizeVariantType, TagSizeVariants, TagStyleVariantType, TagStyleVariants, Text, Text2Rows, TextArea, TextAreaOptionProps, TextAreaProps, TextOptionProps, TextProps, ToggleButton, ToggleButtonInnerRadioOptionProps, ToggleButtonInnerRadioProps, ToggleButtonOptionProps, ToggleButtonProps, ToggleButtonSizeVariantType, ToggleButtonSizeVariants, Tooltip, TooltipContentProps, TooltipOptionProps, TooltipProps, Tree, TreeItem, TreeItemOptionProps, TreeItemProps, TreeOptionProps, TreeProps, TypographyTokens, WeekClickDateInfo, WeekDatepicker, WeekDatepickerProps, WeekDatepickerStyleType, YearSelectProps, borderRadiusTokens, boxShadowTokens, colorTokens, fontWeightTokens, getDomain, spacingTokens, typographyTokens, useDomain, useDropdownButtonContext, useHandleModal, useModalValue, useSplitButtonContext, useTabs };
+export { AnnualDatepicker, AnnualDatepickerProps, AsProp, Avatar, AvatarOptionProps, AvatarProps, AvatarSizeVariantType, AvatarSizeVariants, BackDropOptionProps, BackDropProps, BorderRadiusTokens, BoxShadowTokens, Button, ButtonComponent, ButtonOptionProps, ButtonProps, ButtonSizeVariantType, ButtonSizeVariants, ButtonStyleVariantType, ButtonStyleVariants, CHECKBOX_SYMBOL_KEY, Callout, CalloutOptionProps, CalloutProps, CalloutType, CalloutTypes, Checkbox, CheckboxOptionProps, CheckboxProps, CheckboxStyleVariantType, CheckboxStyleVariants, ChipButton, ChipButtonOptionProps, ChipButtonProps, ChipButtonSizeVariantType, ChipButtonSizeVariants, ChipButtonStyleVariantType, ChipButtonStyleVariants, ChipToggle, ChipToggleOptionProps, ChipToggleProps, ChipToggleSizeVariantType, ChipToggleSizeVariants, ChipToggleStyleVariantType, ChipToggleStyleVariants, ColorTokens, DangerouslySetInnerHTML, DayCalendarType, DayDatepicker, DayDatepickerHeaderCustomProps, DayDatepickerOptionProps, DayDatepickerProps, DayDatepickerSizeVariantType, DayDatepickerSizeVariants, DomainType, Dropdown, DropdownButton, DropdownButtonContext, DropdownButtonContextType, DropdownButtonOptionProps, DropdownButtonProps, DropdownButtonSizeVariantType, DropdownButtonSizeVariants, DropdownButtonStyleVariantType, DropdownButtonStyleVariants, DropdownContentProps, DropdownOptionProps, DropdownOptionVariantType, DropdownOptionVariants, DropdownProps, DropdownSizeVariantType, DropdownTriggerButtonProps, FontWeightTokens, Icon, IconButton, IconButtonComponent, IconButtonOptionProps, IconButtonProps, IconButtonSizeVariantType, IconButtonSizeVariants, IconButtonStyleVariantType, IconButtonStyleVariants, IconOptionProps, IconProps, IconSizeVariants, IconSizeVariantsType, Input, InputButton, InputButtonOptionProps, InputButtonProps, InputOptionProps, InputProps, InputSizeVariantType, InputSizeVariants, List, ListContent2ColumnsProps, ListOptionProps, ListProps, ListText2RowsProps, MODAL_FOOTER_KEY, MODAL_HEADER_KEY, Menu, MenuOptionProps, MenuProps, MenuSizeVariantType, MenuSizeVariants, MinusBoxOptionProps, MinusBoxProps, MinusButton, Modal, ModalBodyOptionProps, ModalBodyProps, ModalBottomProps, ModalContainerOptionProps, ModalContainerProps, ModalContext, ModalFooterOptionProps, ModalFooterProps, ModalFooterType, ModalHandlerContext, ModalHeaderOptionProps, ModalHeaderProps, ModalHeaderType, ModalPortal as ModalProvider, ModalSize, ModalSizeType, ModalStateType, ModalTopProps, MonthClickDateInfo, MonthDatepicker, MonthDatepickerProps, MonthDatepickerStyleType, MotionStack, MotionStackComponentType, MotionStackContainer, MotionStackContainerComponentType, NumberCombobox, NumberComboboxErrorType, NumberComboboxInputType, NumberComboboxOptionProps, NumberComboboxProps, NumberComboboxSizeVariantType, NumberComboboxSizeVariants, Pagination, PaginationOptionProps, PaginationProps, PaginationSizeSelectorProps, PolymorphicComponentProps, PolymorphicRef, Popper, PopperOptionProps, PopperPortal, PopperPortalProps, PopperProps, PopperTrigger, PopperTriggerProps, RADIO_SYMBOL_KEY, Radio, RadioOptionProps, RadioProps, RemoveModalProps, SLIDER_Z_INDEX, ScrollArea, ScrollAreaOptionProps, ScrollAreaProps, ScrollbarRefType, SelectInputButton, SelectInputButtonOptionProps, SelectInputButtonProps, ShoplflowProvider, ShoplflowProviderProps, Skeleton, SkeletonProps, Slider, SliderBounds, SliderProps, SpacingTokens, SplitButton, SplitButtonContext, SplitButtonContextType, SplitButtonOptionProps, SplitButtonProps, SplitButtonSizeVariantType, SplitButtonSizeVariants, SplitButtonStyleVariantType, SplitButtonStyleVariants, Stack, StackComponentType, StackContainer, StackContainerComponentType, StackContainerGenericProps, StackContainerOptionProps, StackContainerProps, StackGenericProps, StackOptionProps, StackProps, StyledIcon, StyledStack, StyledStackContainer, Switch, SwitchOptionProps, SwitchProps, TREE_SYMBOL_KEY, TabOptionProps, TabProps, TabSizeVariantType, TabSizeVariants, TabStyleVariantType, TabStyleVariants, TabStyledProps, TabTextStyledProps, Tabs, TabsContext, TabsContextType, TabsOptionProps, TabsProps, Tag, TagOptionProps, TagProps, TagSizeVariantType, TagSizeVariants, TagStyleVariantType, TagStyleVariants, Text, Text2Rows, TextArea, TextAreaOptionProps, TextAreaProps, TextOptionProps, TextProps, ToggleButton, ToggleButtonInnerRadioOptionProps, ToggleButtonInnerRadioProps, ToggleButtonOptionProps, ToggleButtonProps, ToggleButtonSizeVariantType, ToggleButtonSizeVariants, Tooltip, TooltipContentProps, TooltipOptionProps, TooltipProps, Tree, TreeItem, TreeItemOptionProps, TreeItemProps, TreeOptionProps, TreeProps, TypographyTokens, WeekClickDateInfo, WeekDatepicker, WeekDatepickerProps, WeekDatepickerStyleType, YearSelectProps, borderRadiusTokens, boxShadowTokens, colorTokens, fontWeightTokens, getDomain, spacingTokens, typographyTokens, useDomain, useDropdownButtonContext, useHandleModal, useModalValue, useSplitButtonContext, useTabs };

package/dist/index.js

@@ -1731,6 +1731,18 @@ var getWidthAndHeightFromSizeVar = (sizeVar) => {
       `;
   }
 };
+var getIconSizeFromSizeVar = (sizeVar) => {
+  switch (sizeVar) {
+    case "M":
+      return "24px";
+    case "S":
+      return "20px";
+    case "XS":
+      return "12px";
+    default:
+      return "20px";
+  }
+};
 var getStyleByStyleVar2 = (styleVar, color, isHovered) => {
   switch (styleVar) {
     case "PRIMARY":
@@ -1790,14 +1802,15 @@ var StyledIconButton = styled6.button`
   ${({ sizeVar }) => getWidthAndHeightFromSizeVar(sizeVar)};
   ${({ disabled }) => getDisabledStyle(disabled)};
   & > svg {
-    width: 20px;
-    height: 20px;
+    width: ${({ iconSizeVar }) => getIconSizeFromSizeVar(iconSizeVar)};
+    height: ${({ iconSizeVar }) => getIconSizeFromSizeVar(iconSizeVar)};
   }
 `;
 var IconButton = forwardRef(
   (_a, ref) => {
     var _b = _a, {
       styleVar,
+      iconSizeVar,
       sizeVar,
       disabled,
       children,
@@ -1808,6 +1821,7 @@ var IconButton = forwardRef(
       type = "button"
     } = _b, rest = __objRest(_b, [
       "styleVar",
+      "iconSizeVar",
       "sizeVar",
       "disabled",
       "children",
@@ -1830,6 +1844,7 @@ var IconButton = forwardRef(
       StyledIconButton,
       __spreadProps(__spreadValues({
         styleVar,
+        iconSizeVar,
         sizeVar,
         disabled,
         color,
@@ -6561,7 +6576,7 @@ var SLIDER_Z_INDEX = {
 };
 
 // src/components/Slider/Slider.styled.ts
-styled6.div`
+var SliderContainer = styled6.div`
   position: relative;
   width: 100%;
   padding: 0 12px;
@@ -6574,14 +6589,14 @@ styled6.div`
       cursor: not-allowed;
     `}
 `;
-styled6.div`
+var SliderTrack = styled6.div`
   width: 100%; // SliderContainer의 padding 영역 내에서 100%
   height: 24px;
   position: relative;
   overflow: visible;
   margin: 0;
 `;
-styled6.div`
+var SelectedTrack = styled6.div`
   position: absolute;
   height: 100%;
   border-radius: 16px;
@@ -6590,7 +6605,7 @@ styled6.div`
   left: ${({ startPosition }) => startPosition};
   width: ${({ width }) => width};
 `;
-styled6.div`
+var StepsContainer = styled6.div`
   position: absolute;
   top: 0;
   left: 0;
@@ -6600,7 +6615,7 @@ styled6.div`
   align-items: center;
   pointer-events: none;
 `;
-styled6.div`
+var Steps = styled6.div`
   position: absolute;
   width: 8px;
   height: 8px;
@@ -6612,7 +6627,7 @@ styled6.div`
     height: 16px;
   }
 `;
-styled6.button`
+var ThumbButton = styled6.button`
   position: absolute;
   top: 50%;
   transform: translate(-50%, -50%);
@@ -6621,7 +6636,7 @@ styled6.button`
   outline: none;
   z-index: ${SLIDER_Z_INDEX.THUMB_BUTTON}; // thumb를 track보다 위에 위치시킴
 `;
-styled6.div`
+var ThumbCircle = styled6.div`
   width: 16px;
   height: 16px;
   border-radius: 50%;
@@ -6642,6 +6657,208 @@ styled6.div`
       }
     `}
 `;
+
+// src/components/Slider/sliderUtils.ts
+var getAdjustedValue = (value, bounds, step) => {
+  const { min, max } = bounds;
+  const snappedValue = Math.round((value - min) / step) * step + min;
+  return Math.max(min, Math.min(max, snappedValue));
+};
+var getPositionPercentage = (index, selectedRange, bounds) => {
+  const { min, max } = bounds;
+  return Math.trunc((selectedRange[index] - min) / (max - min) * 100);
+};
+var getValueFromPercentage = (percentage, bounds, step) => {
+  const { min, max } = bounds;
+  const rawValue = min + percentage / 100 * (max - min);
+  return getAdjustedValue(rawValue, bounds, step);
+};
+var generateSteps = (bounds, step, maxSteps = 21) => {
+  const { min, max } = bounds;
+  const totalSteps = Math.floor((max - min) / step) + 1;
+  const stepInterval = totalSteps > maxSteps ? Math.ceil(totalSteps / maxSteps) : 1;
+  const tickValues = [];
+  for (let i = 0; i < totalSteps; i += stepInterval) {
+    const value = min + i * step;
+    if (value <= max) {
+      tickValues.push(value);
+    }
+  }
+  if (tickValues.length > 0 && tickValues[tickValues.length - 1] !== max) {
+    tickValues.push(max);
+  }
+  return tickValues;
+};
+var validateRange = ({
+  min,
+  max,
+  defaultRange
+}) => {
+  if (defaultRange.min < min || defaultRange.max > max) {
+    throw new Error("defaultRange\uAC00 Slider\uC758 \uC804\uCCB4 \uBC94\uC704\uB97C \uBC97\uC5B4\uB0A9\uB2C8\uB2E4.");
+  }
+  if (defaultRange.min > defaultRange.max) {
+    throw new Error("defaultRange\uAC00 \uC62C\uBC14\uB974\uC9C0 \uC54A\uC2B5\uB2C8\uB2E4. \uB2E4\uC2DC \uD655\uC778\uD574\uC8FC\uC138\uC694.");
+  }
+};
+var validateStep = ({ min, max, step }) => {
+  if (step <= 0) {
+    throw new Error("step\uC740 0\uBCF4\uB2E4 \uCEE4\uC57C \uD569\uB2C8\uB2E4.");
+  }
+  if (step > max || step < min || step > max - min) {
+    throw new Error("step\uC774 Slider\uC758 \uC804\uCCB4 \uBC94\uC704\uB97C \uBC97\uC5B4\uB0A9\uB2C8\uB2E4.");
+  }
+};
+var SliderSteps = ({ bounds, step, maxSteps = 21 }) => {
+  const steps = generateSteps(bounds, step, maxSteps);
+  const { min, max } = bounds;
+  return /* @__PURE__ */ jsx(StepsContainer, { children: steps.map((stepValue) => {
+    const position = (stepValue - min) / (max - min) * 100;
+    return /* @__PURE__ */ jsx(
+      Steps,
+      {
+        style: {
+          left: `${position}%`
+        }
+      },
+      stepValue
+    );
+  }) });
+};
+var SliderThumbs = ({
+  positions,
+  values,
+  isDisabled,
+  selectedColor,
+  onMouseDown
+}) => {
+  return /* @__PURE__ */ jsx(Fragment, { children: positions.map((position, index) => /* @__PURE__ */ jsx(ThumbButton, { style: { left: `${position}%` }, onMouseDown: onMouseDown(index), children: /* @__PURE__ */ jsx(
+    Tooltip_default,
+    {
+      trigger: /* @__PURE__ */ jsx(ThumbCircle, { isDisabled, selectedColor }),
+      popper: !isDisabled && /* @__PURE__ */ jsx(Tooltip_default.Content, { content: Math.abs(values[index]).toString() })
+    }
+  ) }, index)) });
+};
+var useSlider = ({ bounds, step, defaultRange, handleRange, isDisabled = false }) => {
+  const { min, max } = bounds;
+  validateRange({ min, max, defaultRange });
+  validateStep({ min, max, step });
+  const [range, setRange] = useState([defaultRange.min, defaultRange.max]);
+  const trackRef = useRef(null);
+  const updateRange = useCallback(
+    (index, newValue) => {
+      setRange((prev) => {
+        const newRange = [...prev];
+        if (index === 0) {
+          newRange[0] = Math.min(newValue, newRange[1]);
+        } else if (index === 1) {
+          newRange[1] = Math.max(newValue, newRange[0]);
+        }
+        return newRange;
+      });
+      handleRange == null ? void 0 : handleRange({ min: range[0], max: range[1] });
+    },
+    [range, handleRange]
+  );
+  const handleMouseDown = useCallback(
+    (index) => (e) => {
+      if (isDisabled) {
+        return;
+      }
+      e.preventDefault();
+      const handleMouseMove = (moveEvent) => {
+        if (!trackRef.current) {
+          return;
+        }
+        const rect = trackRef.current.getBoundingClientRect();
+        const offsetX = moveEvent.clientX - rect.left;
+        const percentage = Math.min(Math.max(offsetX / rect.width * 100, 0), 100);
+        const newValue = getValueFromPercentage(percentage, { min, max }, step);
+        updateRange(index, newValue);
+      };
+      const handleMouseUp = () => {
+        document.removeEventListener("mousemove", handleMouseMove);
+        document.removeEventListener("mouseup", handleMouseUp);
+      };
+      document.addEventListener("mousemove", handleMouseMove);
+      document.addEventListener("mouseup", handleMouseUp);
+    },
+    [isDisabled, min, max, step, updateRange]
+  );
+  const handleClickTrack = useCallback(
+    (e) => {
+      if (isDisabled || !trackRef.current) {
+        return;
+      }
+      const rect = trackRef.current.getBoundingClientRect();
+      const offsetX = e.clientX - rect.left;
+      const percentage = offsetX / rect.width * 100;
+      const newValue = getValueFromPercentage(percentage, { min, max }, step);
+      const distanceToStart = Math.abs(getPositionPercentage(0, range, { min, max }) - percentage);
+      const distanceToEnd = Math.abs(getPositionPercentage(1, range, { min, max }) - percentage);
+      if (distanceToStart <= distanceToEnd) {
+        updateRange(0, newValue);
+      } else {
+        updateRange(1, newValue);
+      }
+    },
+    [isDisabled, min, max, step, range, updateRange]
+  );
+  const startPosition = getPositionPercentage(0, range, { min, max });
+  const endPosition = getPositionPercentage(1, range, { min, max });
+  const width = endPosition - startPosition;
+  return {
+    range,
+    trackRef,
+    handleMouseDown,
+    handleClickTrack,
+    positions: {
+      start: startPosition,
+      end: endPosition,
+      width
+    }
+  };
+};
+var Slider = ({
+  min = 0,
+  max,
+  step = 1,
+  defaultRange = { min: 0, max: 0 },
+  handleRange,
+  isDisabled = false,
+  selectedColor = "shopl300"
+}) => {
+  const { range, trackRef, handleMouseDown, handleClickTrack, positions } = useSlider({
+    bounds: { min, max },
+    step,
+    defaultRange,
+    handleRange,
+    isDisabled
+  });
+  return /* @__PURE__ */ jsx(SliderContainer, { isDisabled, children: /* @__PURE__ */ jsxs(SliderTrack, { ref: trackRef, onClick: handleClickTrack, children: [
+    /* @__PURE__ */ jsx(SliderSteps, { bounds: { min, max }, step, range }),
+    /* @__PURE__ */ jsx(
+      SelectedTrack,
+      {
+        selectedColor,
+        startPosition: `calc(${positions.start}% - 12px)`,
+        width: `calc(${positions.width}% + 24px)`
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      SliderThumbs,
+      {
+        positions: [positions.start, positions.end],
+        isDisabled,
+        selectedColor,
+        onMouseDown: handleMouseDown,
+        values: range
+      }
+    )
+  ] }) });
+};
+var Slider_default = Slider;
 var SpaceMarginWrapper = styled6(motion.div)`
   position: relative;
   display: flex;
@@ -6696,4 +6913,4 @@ classnames/index.js:
   *)
 */
 
-export { AnnualDatepicker_default as AnnualDatepicker, Avatar_default as Avatar, AvatarSizeVariants, Button_default as Button, ButtonSizeVariants, ButtonStyleVariants, CHECKBOX_SYMBOL_KEY, Callout_default as Callout, CalloutTypes, Checkbox_default as Checkbox, CheckboxStyleVariants, ChipButton_default as ChipButton, ChipButtonSizeVariants, ChipButtonStyleVariants, ChipToggle_default as ChipToggle, ChipToggleSizeVariants, ChipToggleStyleVariants, DayDatepicker_default as DayDatepicker, DayDatepickerSizeVariants, Dropdown_default as Dropdown, DropdownButton_default as DropdownButton, DropdownButtonContext, DropdownButtonSizeVariants, DropdownButtonStyleVariants, DropdownOptionVariants, Icon_default as Icon, IconButton_default as IconButton, IconButtonSizeVariants, IconButtonStyleVariants, IconSizeVariants, Input_default as Input, InputButton_default as InputButton, InputSizeVariants, List_default as List, MODAL_FOOTER_KEY, MODAL_HEADER_KEY, Menu_default as Menu, MenuSizeVariants, MinusButton_default as MinusButton, Modal, ModalContext, ModalHandlerContext, ModalPortal_default as ModalProvider, ModalSize, MonthDatepicker_default as MonthDatepicker, MotionStack, MotionStackContainer, NumberCombobox_default as NumberCombobox, NumberComboboxSizeVariants, Pagination_default as Pagination, Popper_default as Popper, PopperPortal, PopperTrigger, RADIO_SYMBOL_KEY, Radio_default as Radio, ScrollArea_default as ScrollArea, SelectInputButton_default as SelectInputButton, ShoplflowProvider_default as ShoplflowProvider, Skeleton_default as Skeleton, SplitButton_default as SplitButton, SplitButtonContext, SplitButtonSizeVariants, SplitButtonStyleVariants, Stack_default as Stack, StackContainer_default as StackContainer, StyledIcon, StyledStack, StyledStackContainer, Switch_default as Switch, TREE_SYMBOL_KEY, TabSizeVariants, TabStyleVariants, Tabs_default as Tabs, TabsContext, Tag_default as Tag, TagSizeVariants, TagStyleVariants, Text_default as Text, Text2Rows, TextArea_default as TextArea, ToggleButton_default as ToggleButton, ToggleButtonSizeVariants, Tooltip_default as Tooltip, Tree_default as Tree, TreeItem, WeekDatepicker_default as WeekDatepicker, borderRadiusTokens, boxShadowTokens, colorTokens, fontWeightTokens, getDomain, spacingTokens, typographyTokens, useDomain, useDropdownButtonContext, useHandleModal, useModalValue, useSplitButtonContext, useTabs };
+export { AnnualDatepicker_default as AnnualDatepicker, Avatar_default as Avatar, AvatarSizeVariants, Button_default as Button, ButtonSizeVariants, ButtonStyleVariants, CHECKBOX_SYMBOL_KEY, Callout_default as Callout, CalloutTypes, Checkbox_default as Checkbox, CheckboxStyleVariants, ChipButton_default as ChipButton, ChipButtonSizeVariants, ChipButtonStyleVariants, ChipToggle_default as ChipToggle, ChipToggleSizeVariants, ChipToggleStyleVariants, DayDatepicker_default as DayDatepicker, DayDatepickerSizeVariants, Dropdown_default as Dropdown, DropdownButton_default as DropdownButton, DropdownButtonContext, DropdownButtonSizeVariants, DropdownButtonStyleVariants, DropdownOptionVariants, Icon_default as Icon, IconButton_default as IconButton, IconButtonSizeVariants, IconButtonStyleVariants, IconSizeVariants, Input_default as Input, InputButton_default as InputButton, InputSizeVariants, List_default as List, MODAL_FOOTER_KEY, MODAL_HEADER_KEY, Menu_default as Menu, MenuSizeVariants, MinusButton_default as MinusButton, Modal, ModalContext, ModalHandlerContext, ModalPortal_default as ModalProvider, ModalSize, MonthDatepicker_default as MonthDatepicker, MotionStack, MotionStackContainer, NumberCombobox_default as NumberCombobox, NumberComboboxSizeVariants, Pagination_default as Pagination, Popper_default as Popper, PopperPortal, PopperTrigger, RADIO_SYMBOL_KEY, Radio_default as Radio, SLIDER_Z_INDEX, ScrollArea_default as ScrollArea, SelectInputButton_default as SelectInputButton, ShoplflowProvider_default as ShoplflowProvider, Skeleton_default as Skeleton, Slider_default as Slider, SplitButton_default as SplitButton, SplitButtonContext, SplitButtonSizeVariants, SplitButtonStyleVariants, Stack_default as Stack, StackContainer_default as StackContainer, StyledIcon, StyledStack, StyledStackContainer, Switch_default as Switch, TREE_SYMBOL_KEY, TabSizeVariants, TabStyleVariants, Tabs_default as Tabs, TabsContext, Tag_default as Tag, TagSizeVariants, TagStyleVariants, Text_default as Text, Text2Rows, TextArea_default as TextArea, ToggleButton_default as ToggleButton, ToggleButtonSizeVariants, Tooltip_default as Tooltip, Tree_default as Tree, TreeItem, WeekDatepicker_default as WeekDatepicker, borderRadiusTokens, boxShadowTokens, colorTokens, fontWeightTokens, getDomain, spacingTokens, typographyTokens, useDomain, useDropdownButtonContext, useHandleModal, useModalValue, useSplitButtonContext, useTabs };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@shoplflow/base",
-  "version": "0.34.0",
+  "version": "0.35.1",
   "type": "module",
   "license": "Apache-2.0",
   "main": "dist/index.js",
@@ -91,7 +91,7 @@
     "react-dom": "^18.2.0",
     "simplebar-react": "^3.2.6",
     "@shoplflow/hada-assets": "^0.1.3",
-    "@shoplflow/shopl-assets": "^0.12.2",
+    "@shoplflow/shopl-assets": "^0.12.3",
     "@shoplflow/utils": "^0.6.5"
   },
   "scripts": {