@shoplflow/base 0.13.7 → 0.13.8

package/dist/index.d.cts

@@ -484,7 +484,7 @@ declare const buttonStyleVar: {
     readonly GHOST: "GHOST";
 };
 declare type ButtonStyleVar = $Values<typeof buttonStyleVar>;
-declare type ButtonOptionProps<T extends ElementType = 'button'> = Omit<ComponentPropsWithoutRef<T>, 'color' | 'disabled'> & SizeVariantProps<ButtonSizeVar> & StyleVariantProps<ButtonStyleVar> & DisableProps & {
+declare type ButtonOptionProps<T extends ElementType = 'button'> = Omit<ComponentPropsWithoutRef<T>, 'color' | 'disabled'> & SizeVariantProps<ButtonSizeVar> & StyleVariantProps<ButtonStyleVar> & ColorTokenProps & DisableProps & {
     typography?: TypographyTokens;
 };
 declare type ButtonProps<T extends ElementType = 'button'> = PolymorphicComponentProps<T, ButtonOptionProps> & LeftAndRightNodeProps;
@@ -494,39 +494,19 @@ declare type ButtonComponent = <T extends ElementType = 'button'>(props: ButtonP
 
 declare const Button: ButtonComponent;
 
-declare const IconSizeVariants: {
-    readonly XS: "XS";
-    readonly S: "S";
-    readonly M: "M";
-    readonly L: "L";
-    readonly XL: "XL";
-};
-declare type IconSizeVariantsType = $Values<typeof IconSizeVariants>;
-interface IconProps extends IconOptionProps {
-}
-interface IconOptionProps extends SizeVariantProps<IconSizeVariantsType>, IconSourceProps, ColorTokenProps {
-}
-
-declare const Icon: React__default.ForwardRefExoticComponent<IconProps & React__default.RefAttributes<SVGSVGElement>>;
-
-declare const StyledIcon: _emotion_styled.StyledComponent<{
-    theme?: _emotion_react.Theme | undefined;
-    as?: React$1.ElementType<any> | undefined;
-} & IconOptionProps, React$1.SVGProps<SVGSVGElement>, {}>;
-
 declare const iconButtonSizeVar: {
     readonly S: "S";
     readonly M: "M";
 };
 declare type IconButtonSizeVar = $Values<typeof iconButtonSizeVar>;
 declare const iconButtonStyleVar: {
+    readonly PRIMARY: "PRIMARY";
+    readonly SECONDARY: "SECONDARY";
     readonly SOLID: "SOLID";
     readonly GHOST: "GHOST";
 };
 declare type IconButtonStyleVar = $Values<typeof iconButtonStyleVar>;
-declare type IconButtonOptionProps<T extends ElementType = 'button'> = Omit<ComponentPropsWithoutRef<T>, 'color' | 'disabled'> & DisableProps & SizeVariantProps<IconButtonSizeVar> & StyleVariantProps<IconButtonStyleVar> & IconSourceProps & ColorTokenProps & {
-    iconSize?: IconSizeVariantsType;
-};
+declare type IconButtonOptionProps<T extends ElementType = 'button'> = Omit<ComponentPropsWithoutRef<T>, 'color' | 'disabled'> & DisableProps & SizeVariantProps<IconButtonSizeVar> & StyleVariantProps<IconButtonStyleVar> & ChildrenProps & ColorTokenProps;
 declare type IconButtonProps<T extends ElementType = 'button'> = PolymorphicComponentProps<T, IconButtonOptionProps>;
 declare type IconButtonComponent = <T extends ElementType = 'button'>(props: IconButtonProps<T> & {
     ref?: ComponentPropsWithRef<T>['ref'];
@@ -961,6 +941,26 @@ declare const DropdownButtonIcon: _emotion_styled.StyledComponent<{
     theme?: _emotion_react.Theme | undefined;
 } & DropdownButtonProps, {}, {}>;
 
+declare const IconSizeVariants: {
+    readonly XS: "XS";
+    readonly S: "S";
+    readonly M: "M";
+    readonly L: "L";
+    readonly XL: "XL";
+};
+declare type IconSizeVariantsType = $Values<typeof IconSizeVariants>;
+interface IconProps extends IconOptionProps {
+}
+interface IconOptionProps extends SizeVariantProps<IconSizeVariantsType>, IconSourceProps, ColorTokenProps {
+}
+
+declare const Icon: React__default.ForwardRefExoticComponent<IconProps & React__default.RefAttributes<SVGSVGElement>>;
+
+declare const StyledIcon: _emotion_styled.StyledComponent<{
+    theme?: _emotion_react.Theme | undefined;
+    as?: React$1.ElementType<any> | undefined;
+} & IconOptionProps, React$1.SVGProps<SVGSVGElement>, {}>;
+
 interface InputProps extends InputOptionProps, Omit<InputHTMLAttributes<HTMLInputElement>, 'width'>, DisableProps, RightElementProps {
 }
 interface InputOptionProps extends ErrorProps {

package/dist/index.d.ts

@@ -484,7 +484,7 @@ declare const buttonStyleVar: {
     readonly GHOST: "GHOST";
 };
 declare type ButtonStyleVar = $Values<typeof buttonStyleVar>;
-declare type ButtonOptionProps<T extends ElementType = 'button'> = Omit<ComponentPropsWithoutRef<T>, 'color' | 'disabled'> & SizeVariantProps<ButtonSizeVar> & StyleVariantProps<ButtonStyleVar> & DisableProps & {
+declare type ButtonOptionProps<T extends ElementType = 'button'> = Omit<ComponentPropsWithoutRef<T>, 'color' | 'disabled'> & SizeVariantProps<ButtonSizeVar> & StyleVariantProps<ButtonStyleVar> & ColorTokenProps & DisableProps & {
     typography?: TypographyTokens;
 };
 declare type ButtonProps<T extends ElementType = 'button'> = PolymorphicComponentProps<T, ButtonOptionProps> & LeftAndRightNodeProps;
@@ -494,39 +494,19 @@ declare type ButtonComponent = <T extends ElementType = 'button'>(props: ButtonP
 
 declare const Button: ButtonComponent;
 
-declare const IconSizeVariants: {
-    readonly XS: "XS";
-    readonly S: "S";
-    readonly M: "M";
-    readonly L: "L";
-    readonly XL: "XL";
-};
-declare type IconSizeVariantsType = $Values<typeof IconSizeVariants>;
-interface IconProps extends IconOptionProps {
-}
-interface IconOptionProps extends SizeVariantProps<IconSizeVariantsType>, IconSourceProps, ColorTokenProps {
-}
-
-declare const Icon: React__default.ForwardRefExoticComponent<IconProps & React__default.RefAttributes<SVGSVGElement>>;
-
-declare const StyledIcon: _emotion_styled.StyledComponent<{
-    theme?: _emotion_react.Theme | undefined;
-    as?: React$1.ElementType<any> | undefined;
-} & IconOptionProps, React$1.SVGProps<SVGSVGElement>, {}>;
-
 declare const iconButtonSizeVar: {
     readonly S: "S";
     readonly M: "M";
 };
 declare type IconButtonSizeVar = $Values<typeof iconButtonSizeVar>;
 declare const iconButtonStyleVar: {
+    readonly PRIMARY: "PRIMARY";
+    readonly SECONDARY: "SECONDARY";
     readonly SOLID: "SOLID";
     readonly GHOST: "GHOST";
 };
 declare type IconButtonStyleVar = $Values<typeof iconButtonStyleVar>;
-declare type IconButtonOptionProps<T extends ElementType = 'button'> = Omit<ComponentPropsWithoutRef<T>, 'color' | 'disabled'> & DisableProps & SizeVariantProps<IconButtonSizeVar> & StyleVariantProps<IconButtonStyleVar> & IconSourceProps & ColorTokenProps & {
-    iconSize?: IconSizeVariantsType;
-};
+declare type IconButtonOptionProps<T extends ElementType = 'button'> = Omit<ComponentPropsWithoutRef<T>, 'color' | 'disabled'> & DisableProps & SizeVariantProps<IconButtonSizeVar> & StyleVariantProps<IconButtonStyleVar> & ChildrenProps & ColorTokenProps;
 declare type IconButtonProps<T extends ElementType = 'button'> = PolymorphicComponentProps<T, IconButtonOptionProps>;
 declare type IconButtonComponent = <T extends ElementType = 'button'>(props: IconButtonProps<T> & {
     ref?: ComponentPropsWithRef<T>['ref'];
@@ -961,6 +941,26 @@ declare const DropdownButtonIcon: _emotion_styled.StyledComponent<{
     theme?: _emotion_react.Theme | undefined;
 } & DropdownButtonProps, {}, {}>;
 
+declare const IconSizeVariants: {
+    readonly XS: "XS";
+    readonly S: "S";
+    readonly M: "M";
+    readonly L: "L";
+    readonly XL: "XL";
+};
+declare type IconSizeVariantsType = $Values<typeof IconSizeVariants>;
+interface IconProps extends IconOptionProps {
+}
+interface IconOptionProps extends SizeVariantProps<IconSizeVariantsType>, IconSourceProps, ColorTokenProps {
+}
+
+declare const Icon: React__default.ForwardRefExoticComponent<IconProps & React__default.RefAttributes<SVGSVGElement>>;
+
+declare const StyledIcon: _emotion_styled.StyledComponent<{
+    theme?: _emotion_react.Theme | undefined;
+    as?: React$1.ElementType<any> | undefined;
+} & IconOptionProps, React$1.SVGProps<SVGSVGElement>, {}>;
+
 interface InputProps extends InputOptionProps, Omit<InputHTMLAttributes<HTMLInputElement>, 'width'>, DisableProps, RightElementProps {
 }
 interface InputOptionProps extends ErrorProps {

package/dist/index.js

@@ -1084,7 +1084,7 @@ var ChipButton = (_a) => {
   );
 };
 var ChipButton_default = ChipButton;
-var getStyleByStyleVar = (styleVar, disabled) => {
+var getStyleByStyleVar = (styleVar, color, disabled) => {
   switch (styleVar) {
     case "PRIMARY":
       return css`
@@ -1103,11 +1103,14 @@ var getStyleByStyleVar = (styleVar, disabled) => {
         }
       `;
     case "SOLID":
+      if (!color) {
+        throw new Error("Button\uC758 SOLID \uC18D\uC131\uC740 color\uB97C \uD544\uC218\uB85C \uBC1B\uC2B5\uB2C8\uB2E4.");
+      }
       return css`
-        border: 1px solid ${colorTokens.coolgray100};
-        background-color: ${colorTokens.coolgray50};
+        border: 1px solid ${colorTokens[getNextColor(color)]};
+        background-color: ${colorTokens[color]};
         :hover {
-          background-color: ${!disabled && colorTokens.coolgray100};
+          background-color: ${colorTokens[getNextColor(color)]};
         }
       `;
     case "GHOST":
@@ -1154,7 +1157,7 @@ var StyledButton = styled5.button`
   padding: 0 12px;
   border-radius: 6px;
   cursor: pointer;
-  ${({ styleVar, disabled }) => getStyleByStyleVar(styleVar, disabled)};
+  ${({ styleVar, color, disabled }) => getStyleByStyleVar(styleVar, color, disabled)};
   ${({ sizeVar }) => getStyleBySizeVar2(sizeVar)};
   ${({ disabled }) => getDisabledStyle(disabled)};
 `;
@@ -1247,27 +1250,47 @@ var getWidthAndHeightFromSizeVar = (sizeVar) => {
       `;
   }
 };
-var getStyleByStyleVar2 = (styleVar) => {
+var getStyleByStyleVar2 = (styleVar, color) => {
   switch (styleVar) {
+    case "PRIMARY":
+      return css`
+        background: ${colorTokens.primary300};
+        border: 1px solid ${colorTokens.primary400};
+        &:hover {
+          background: ${colorTokens.primary400};
+        }
+      `;
+    case "SECONDARY":
+      return css`
+        background: ${colorTokens.neutral0};
+        border: 1px solid ${colorTokens.neutral350};
+        &:hover {
+          background: ${colorTokens.neutral100};
+        }
+      `;
     case "SOLID":
+      if (!color) {
+        throw new Error("IconButton\uC758 SOLID \uC18D\uC131\uC740 color\uB97C \uD544\uC218\uB85C \uBC1B\uC2B5\uB2C8\uB2E4.");
+      }
       return css`
-        border: 1px solid ${colorTokens.neutral200};
+        border: 1px solid ${colorTokens[getNextColor(color)]};
+        background: ${colorTokens[color]};
         &:hover {
-          background-color: ${colorTokens.neutral100};
+          background: ${colorTokens[getNextColor(color)]};
         }
       `;
     case "GHOST":
       return css`
         border: 1px solid transparent;
         &:hover {
-          background-color: ${colorTokens.neutral400_5};
+          background: ${colorTokens.neutral400_5};
         }
       `;
     default:
       return css`
         border: 1px solid ${colorTokens.neutral200};
         &:hover {
-          background-color: ${colorTokens.neutral100};
+          background: ${colorTokens.neutral100};
         }
       `;
   }
@@ -1278,9 +1301,9 @@ var StyledIconButton = styled5.button`
   border-radius: ${borderRadiusTokens.borderRadius06};
   justify-content: center;
   align-items: center;
-  background-color: ${colorTokens.neutral0};
+  background: ${colorTokens.neutral0};
   cursor: pointer;
-  ${({ styleVar }) => getStyleByStyleVar2(styleVar)};
+  ${({ styleVar, color }) => getStyleByStyleVar2(styleVar, color)};
   ${({ sizeVar }) => getWidthAndHeightFromSizeVar(sizeVar)};
   ${({ disabled }) => getDisabledStyle(disabled)};
   & > svg {
@@ -1288,62 +1311,20 @@ var StyledIconButton = styled5.button`
     height: 20px;
   }
 `;
-
-// src/components/Icon/Icon.types.ts
-var IconSizeVariants = {
-  XS: "XS",
-  S: "S",
-  M: "M",
-  L: "L",
-  XL: "XL"
-};
-
-// src/components/Icon/Icon.styled.ts
-var getIconSize = (size) => {
-  switch (size) {
-    case IconSizeVariants.XS:
-      return "12px";
-    case IconSizeVariants.S:
-      return "20px";
-    case IconSizeVariants.M:
-      return "24px";
-    case IconSizeVariants.L:
-      return "30px";
-    case IconSizeVariants.XL:
-      return "36px";
-    default:
-      return "24px";
-  }
-};
-var StyledIcon = styled5.svg`
-  width: ${({ sizeVar }) => sizeVar && getIconSize(sizeVar)};
-  min-width: ${({ sizeVar }) => sizeVar && getIconSize(sizeVar)};
-  height: ${({ sizeVar }) => sizeVar && getIconSize(sizeVar)};
-  min-height: ${({ sizeVar }) => sizeVar && getIconSize(sizeVar)};
-
-  & > path {
-    fill: ${({ color }) => color && colorTokens[color]};
-  }
-`;
-var Icon = forwardRef((_a, ref) => {
-  var _b = _a, { iconSource } = _b, rest = __objRest(_b, ["iconSource"]);
-  return /* @__PURE__ */ jsx(StyledIcon, __spreadProps(__spreadValues({ as: iconSource, ref }, rest), { "data-shoplflow": "Icon" }));
-});
-var Icon_default = Icon;
 var IconButton = forwardRef(
   (_a, ref) => {
-    var _b = _a, { styleVar, sizeVar, disabled, as, iconSource, color, iconSize } = _b, rest = __objRest(_b, ["styleVar", "sizeVar", "disabled", "as", "iconSource", "color", "iconSize"]);
+    var _b = _a, { styleVar, sizeVar, disabled, children, color } = _b, rest = __objRest(_b, ["styleVar", "sizeVar", "disabled", "children", "color"]);
     return /* @__PURE__ */ jsx(
       StyledIconButton,
       __spreadProps(__spreadValues({
         styleVar,
         sizeVar,
         disabled,
-        as,
+        color,
         ref
       }, rest), {
         "data-shoplflow": "IconButton",
-        children: /* @__PURE__ */ jsx(Icon_default, { iconSource, color, sizeVar: iconSize })
+        children
       })
     );
   }
@@ -1356,6 +1337,8 @@ var iconButtonSizeVar = {
   M: "M"
 };
 var iconButtonStyleVar = {
+  PRIMARY: "PRIMARY",
+  SECONDARY: "SECONDARY",
   SOLID: "SOLID",
   GHOST: "GHOST"
 };
@@ -1644,6 +1627,48 @@ var InputWrapper = styled5.label`
   overflow: hidden;
   ${({ disabled }) => getDisabledStyle(disabled)};
 `;
+
+// src/components/Icon/Icon.types.ts
+var IconSizeVariants = {
+  XS: "XS",
+  S: "S",
+  M: "M",
+  L: "L",
+  XL: "XL"
+};
+
+// src/components/Icon/Icon.styled.ts
+var getIconSize = (size) => {
+  switch (size) {
+    case IconSizeVariants.XS:
+      return "12px";
+    case IconSizeVariants.S:
+      return "20px";
+    case IconSizeVariants.M:
+      return "24px";
+    case IconSizeVariants.L:
+      return "30px";
+    case IconSizeVariants.XL:
+      return "36px";
+    default:
+      return "24px";
+  }
+};
+var StyledIcon = styled5.svg`
+  width: ${({ sizeVar }) => sizeVar && getIconSize(sizeVar)};
+  min-width: ${({ sizeVar }) => sizeVar && getIconSize(sizeVar)};
+  height: ${({ sizeVar }) => sizeVar && getIconSize(sizeVar)};
+  min-height: ${({ sizeVar }) => sizeVar && getIconSize(sizeVar)};
+
+  & > path {
+    fill: ${({ color }) => color && colorTokens[color]};
+  }
+`;
+var Icon = forwardRef((_a, ref) => {
+  var _b = _a, { iconSource } = _b, rest = __objRest(_b, ["iconSource"]);
+  return /* @__PURE__ */ jsx(StyledIcon, __spreadProps(__spreadValues({ as: iconSource, ref }, rest), { "data-shoplflow": "Icon" }));
+});
+var Icon_default = Icon;
 var DropdownButton = forwardRef(
   (_a, ref) => {
     var _b = _a, { width, onClick, sizeVar = "M", placeholder, value, disabled, leftSource } = _b, rest = __objRest(_b, ["width", "onClick", "sizeVar", "placeholder", "value", "disabled", "leftSource"]);
@@ -1942,26 +1967,14 @@ var Input = forwardRef(
           ),
           /* @__PURE__ */ jsxs(RightElementWrapper, { children: [
             maxLength && isFocused && /* @__PURE__ */ jsx(TextCounter_default, { currentLength: String(text).length, maxLength }),
-            isFocused && Boolean(String(text).length > 0) && /* @__PURE__ */ jsx(
-              IconButton_default,
-              {
-                sizeVar: "S",
-                onClick: handleOnClear,
-                styleVar: "GHOST",
-                iconSource: assetFunction("DeleteIcon"),
-                color: "neutral600"
-              }
-            ),
-            initialType === "password" && /* @__PURE__ */ jsx(
-              IconButton_default,
+            isFocused && Boolean(String(text).length > 0) && /* @__PURE__ */ jsx(IconButton_default, { sizeVar: "S", onClick: handleOnClear, styleVar: "GHOST", children: /* @__PURE__ */ jsx(Icon_default, { iconSource: assetFunction("DeleteIcon"), color: "neutral600" }) }),
+            initialType === "password" && /* @__PURE__ */ jsx(IconButton_default, { sizeVar: "S", onClick: handleTogglePasswordType, styleVar: "GHOST", children: /* @__PURE__ */ jsx(
+              Icon_default,
               {
-                sizeVar: "S",
-                onClick: handleTogglePasswordType,
-                styleVar: "GHOST",
                 color: "neutral600",
                 iconSource: assetFunction(type === "password" ? "ViewOffIcon" : "ViewOnIcon")
               }
-            )
+            ) })
           ] })
         ]
       }
@@ -1975,6 +1988,7 @@ var StyledInputButton = styled5.button`
   align-items: center;
   justify-content: space-between;
   width: 100%;
+  background: ${colorTokens.neutral0};
   gap: 4px;
   padding: 4px 4px 4px 12px;
   cursor: pointer;
@@ -2060,17 +2074,7 @@ var InputButton = forwardRef(
         children: /* @__PURE__ */ jsxs(StyledInputButton, __spreadProps(__spreadValues({}, rest), { onClick: handleOnClick, disabled, ref, children: [
           text && text.length > 0 ? /* @__PURE__ */ jsx(Text_default, { typography: "body1_400", color: "neutral700", textOverflow: "ellipsis", lineClamp: 1, children: text }) : /* @__PURE__ */ jsx(Text_default, { typography: "body1_400", color: "neutral350", textOverflow: "ellipsis", lineClamp: 1, children: placeholder }),
           /* @__PURE__ */ jsxs(Stack_default.Horizontal, { align: "center", children: [
-            value && /* @__PURE__ */ jsx(
-              IconButton_default,
-              {
-                sizeVar: "S",
-                onClick: handleOnClear,
-                styleVar: "GHOST",
-                iconSource: assetFunction("DeleteIcon"),
-                color: "neutral600",
-                disabled
-              }
-            ),
+            value && /* @__PURE__ */ jsx(IconButton_default, { sizeVar: "S", onClick: handleOnClear, styleVar: "GHOST", disabled, children: /* @__PURE__ */ jsx(Icon_default, { iconSource: assetFunction("DeleteIcon"), color: "neutral600" }) }),
             rightSource
           ] })
         ] }))