@shoplflow/base 0.35.0 → 0.36.0

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,
@@ -6744,7 +6759,7 @@ var SliderThumbs = ({
   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(
+  return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: positions.map((position, index) => /* @__PURE__ */ jsxRuntime.jsx(ThumbButton, { style: { left: `${position}%` }, onMouseDown: onMouseDown(index), type: "button", children: /* @__PURE__ */ jsxRuntime.jsx(
     exports.Tooltip,
     {
       trigger: /* @__PURE__ */ jsxRuntime.jsx(ThumbCircle, { isDisabled, selectedColor }),
@@ -6767,11 +6782,11 @@ var useSlider = ({ bounds, step, defaultRange, handleRange, isDisabled = false }
         } else if (index === 1) {
           newRange[1] = Math.max(newValue, newRange[0]);
         }
+        handleRange == null ? void 0 : handleRange({ min: newRange[0], max: newRange[1] });
         return newRange;
       });
-      handleRange == null ? void 0 : handleRange({ min: range[0], max: range[1] });
     },
-    [range, handleRange]
+    [handleRange]
   );
   const handleMouseDown = React3.useCallback(
     (index) => (e) => {

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'];

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'];

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,
@@ -6717,7 +6732,7 @@ var SliderThumbs = ({
   selectedColor,
   onMouseDown
 }) => {
-  return /* @__PURE__ */ jsx(Fragment, { children: positions.map((position, index) => /* @__PURE__ */ jsx(ThumbButton, { style: { left: `${position}%` }, onMouseDown: onMouseDown(index), children: /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsx(Fragment, { children: positions.map((position, index) => /* @__PURE__ */ jsx(ThumbButton, { style: { left: `${position}%` }, onMouseDown: onMouseDown(index), type: "button", children: /* @__PURE__ */ jsx(
     Tooltip_default,
     {
       trigger: /* @__PURE__ */ jsx(ThumbCircle, { isDisabled, selectedColor }),
@@ -6740,11 +6755,11 @@ var useSlider = ({ bounds, step, defaultRange, handleRange, isDisabled = false }
         } else if (index === 1) {
           newRange[1] = Math.max(newValue, newRange[0]);
         }
+        handleRange == null ? void 0 : handleRange({ min: newRange[0], max: newRange[1] });
         return newRange;
       });
-      handleRange == null ? void 0 : handleRange({ min: range[0], max: range[1] });
     },
-    [range, handleRange]
+    [handleRange]
   );
   const handleMouseDown = useCallback(
     (index) => (e) => {

package/package.json

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