@shoplflow/base 0.33.4 → 0.35.0

package/dist/index.cjs

@@ -6581,6 +6581,296 @@ var Skeleton = ({ styleVar = "rectangle", width = "50px", height = "20px" }) =>
   return /* @__PURE__ */ jsxRuntime.jsx(Container6, { styleVar, width, height, "data-shoplflow": "Skeleton" });
 };
 exports.Skeleton = Skeleton;
+
+// src/components/Slider/Slider.types.ts
+exports.SLIDER_Z_INDEX = {
+  THUMB_BUTTON: 10
+};
+
+// src/components/Slider/Slider.styled.ts
+var SliderContainer = styled6__default.default.div`
+  position: relative;
+  width: 100%;
+  padding: 0 12px;
+  user-select: none;
+  background-color: ${exports.colorTokens.neutral200};
+  border-radius: 16px;
+
+  ${({ isDisabled }) => isDisabled && react$1.css`
+      opacity: 0.5;
+      cursor: not-allowed;
+    `}
+`;
+var SliderTrack = styled6__default.default.div`
+  width: 100%; // SliderContainer의 padding 영역 내에서 100%
+  height: 24px;
+  position: relative;
+  overflow: visible;
+  margin: 0;
+`;
+var SelectedTrack = styled6__default.default.div`
+  position: absolute;
+  height: 100%;
+  border-radius: 16px;
+  background-color: ${({ selectedColor }) => exports.colorTokens[selectedColor]};
+  top: 0;
+  left: ${({ startPosition }) => startPosition};
+  width: ${({ width }) => width};
+`;
+var StepsContainer = styled6__default.default.div`
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  pointer-events: none;
+`;
+var Steps = styled6__default.default.div`
+  position: absolute;
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  background-color: transparent;
+
+  &[data-edge='true'] {
+    width: 16px;
+    height: 16px;
+  }
+`;
+var ThumbButton = styled6__default.default.button`
+  position: absolute;
+  top: 50%;
+  transform: translate(-50%, -50%);
+  border: none;
+  padding: 0;
+  outline: none;
+  z-index: ${exports.SLIDER_Z_INDEX.THUMB_BUTTON}; // thumb를 track보다 위에 위치시킴
+`;
+var ThumbCircle = styled6__default.default.div`
+  width: 16px;
+  height: 16px;
+  border-radius: 50%;
+  border: 0.5px solid transparent; // 자연스러운 transition을 위한 초기 border 설정
+  background-color: ${exports.colorTokens.neutral0};
+  transition:
+    transform 0.15s ease,
+    border 0.15s ease;
+  cursor: ${({ isDisabled }) => isDisabled ? "not-allowed" : "grab"};
+
+  ${({ isDisabled, selectedColor }) => !isDisabled && react$1.css`
+      &:active {
+        border: 3px solid ${exports.colorTokens[selectedColor]};
+      }
+
+      &:hover {
+        border: 3px solid ${exports.colorTokens[selectedColor]};
+      }
+    `}
+`;
+
+// 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

@@ -1540,4 +1540,50 @@ declare type SkeletonProps = {
 
 declare const Skeleton: ({ styleVar, width, height }: SkeletonProps) => react_jsx_runtime.JSX.Element;
 
-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, 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 };
+interface SliderProps {
+    /**
+     * 선택 가능한 최소값
+     */
+    min: number;
+    /**
+     * 선택 가능한 최대값
+     */
+    max: number;
+    /**
+     * 증분 단위
+     */
+    step?: number;
+    /**
+     * 초기 선택 범위
+     */
+    defaultRange?: {
+        min: number;
+        max: number;
+    };
+    /**
+     * 선택 범위가 변경될 때 실행할 함수
+     */
+    handleRange?: (range: {
+        min: number;
+        max: number;
+    }) => void;
+    /**
+     * 비활성화 여부
+     */
+    isDisabled?: boolean;
+    /**
+     * 선택된 범위에 적용될 색상
+     */
+    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, 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

@@ -1540,4 +1540,50 @@ declare type SkeletonProps = {
 
 declare const Skeleton: ({ styleVar, width, height }: SkeletonProps) => react_jsx_runtime.JSX.Element;
 
-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, 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 };
+interface SliderProps {
+    /**
+     * 선택 가능한 최소값
+     */
+    min: number;
+    /**
+     * 선택 가능한 최대값
+     */
+    max: number;
+    /**
+     * 증분 단위
+     */
+    step?: number;
+    /**
+     * 초기 선택 범위
+     */
+    defaultRange?: {
+        min: number;
+        max: number;
+    };
+    /**
+     * 선택 범위가 변경될 때 실행할 함수
+     */
+    handleRange?: (range: {
+        min: number;
+        max: number;
+    }) => void;
+    /**
+     * 비활성화 여부
+     */
+    isDisabled?: boolean;
+    /**
+     * 선택된 범위에 적용될 색상
+     */
+    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, 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

@@ -6554,6 +6554,296 @@ var Skeleton = ({ styleVar = "rectangle", width = "50px", height = "20px" }) =>
   return /* @__PURE__ */ jsx(Container6, { styleVar, width, height, "data-shoplflow": "Skeleton" });
 };
 var Skeleton_default = Skeleton;
+
+// src/components/Slider/Slider.types.ts
+var SLIDER_Z_INDEX = {
+  THUMB_BUTTON: 10
+};
+
+// src/components/Slider/Slider.styled.ts
+var SliderContainer = styled6.div`
+  position: relative;
+  width: 100%;
+  padding: 0 12px;
+  user-select: none;
+  background-color: ${colorTokens.neutral200};
+  border-radius: 16px;
+
+  ${({ isDisabled }) => isDisabled && css`
+      opacity: 0.5;
+      cursor: not-allowed;
+    `}
+`;
+var SliderTrack = styled6.div`
+  width: 100%; // SliderContainer의 padding 영역 내에서 100%
+  height: 24px;
+  position: relative;
+  overflow: visible;
+  margin: 0;
+`;
+var SelectedTrack = styled6.div`
+  position: absolute;
+  height: 100%;
+  border-radius: 16px;
+  background-color: ${({ selectedColor }) => colorTokens[selectedColor]};
+  top: 0;
+  left: ${({ startPosition }) => startPosition};
+  width: ${({ width }) => width};
+`;
+var StepsContainer = styled6.div`
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  pointer-events: none;
+`;
+var Steps = styled6.div`
+  position: absolute;
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  background-color: transparent;
+
+  &[data-edge='true'] {
+    width: 16px;
+    height: 16px;
+  }
+`;
+var ThumbButton = styled6.button`
+  position: absolute;
+  top: 50%;
+  transform: translate(-50%, -50%);
+  border: none;
+  padding: 0;
+  outline: none;
+  z-index: ${SLIDER_Z_INDEX.THUMB_BUTTON}; // thumb를 track보다 위에 위치시킴
+`;
+var ThumbCircle = styled6.div`
+  width: 16px;
+  height: 16px;
+  border-radius: 50%;
+  border: 0.5px solid transparent; // 자연스러운 transition을 위한 초기 border 설정
+  background-color: ${colorTokens.neutral0};
+  transition:
+    transform 0.15s ease,
+    border 0.15s ease;
+  cursor: ${({ isDisabled }) => isDisabled ? "not-allowed" : "grab"};
+
+  ${({ isDisabled, selectedColor }) => !isDisabled && css`
+      &:active {
+        border: 3px solid ${colorTokens[selectedColor]};
+      }
+
+      &:hover {
+        border: 3px solid ${colorTokens[selectedColor]};
+      }
+    `}
+`;
+
+// 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;
@@ -6608,4 +6898,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.33.4",
+  "version": "0.35.0",
   "type": "module",
   "license": "Apache-2.0",
   "main": "dist/index.js",