@shoplflow/base 0.35.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,

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,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@shoplflow/base",
-  "version": "0.35.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": {