@shoplflow/base 0.24.21 → 0.24.24

package/dist/index.d.cts

@@ -516,6 +516,7 @@ declare const ButtonStyleVariants: {
 declare type ButtonStyleVariantType = $Values<typeof ButtonStyleVariants>;
 declare type ButtonOptionProps<T extends ElementType = 'button'> = Omit<ComponentPropsWithoutRef<T>, 'color' | 'disabled'> & SizeVariantProps<ButtonSizeVariantType> & StyleVariantProps<ButtonStyleVariantType> & ColorTokenProps & DisableProps & {
     typography?: TypographyTokens;
+    lineClamp?: number;
 };
 declare type ButtonProps<T extends ElementType = 'button'> = PolymorphicComponentProps<T, ButtonOptionProps> & LeftAndRightNodeProps;
 declare type ButtonComponent = <T extends ElementType = 'button'>(props: ButtonProps<T> & {
@@ -761,6 +762,7 @@ interface DropdownButtonProps extends HTMLAttributes<HTMLButtonElement>, Disable
      */
     placeholder?: string;
     value?: ReactNode;
+    isError?: boolean;
     /**
      * width를 설정합니다.
      */
@@ -1205,11 +1207,11 @@ interface TextAreaOptionProps extends DisableProps, ErrorProps {
     /**
      * text area의 높이를 조절해요.
      */
-    height?: number;
+    height?: string;
     /**
      * text area의 최소 높이를 조절해요.
      */
-    minHeight?: number;
+    minHeight?: string;
 }
 declare type TextAreaProps = ComponentPropsWithoutRef<'textarea'> & TextAreaOptionProps;
 

package/dist/index.d.ts

@@ -516,6 +516,7 @@ declare const ButtonStyleVariants: {
 declare type ButtonStyleVariantType = $Values<typeof ButtonStyleVariants>;
 declare type ButtonOptionProps<T extends ElementType = 'button'> = Omit<ComponentPropsWithoutRef<T>, 'color' | 'disabled'> & SizeVariantProps<ButtonSizeVariantType> & StyleVariantProps<ButtonStyleVariantType> & ColorTokenProps & DisableProps & {
     typography?: TypographyTokens;
+    lineClamp?: number;
 };
 declare type ButtonProps<T extends ElementType = 'button'> = PolymorphicComponentProps<T, ButtonOptionProps> & LeftAndRightNodeProps;
 declare type ButtonComponent = <T extends ElementType = 'button'>(props: ButtonProps<T> & {
@@ -761,6 +762,7 @@ interface DropdownButtonProps extends HTMLAttributes<HTMLButtonElement>, Disable
      */
     placeholder?: string;
     value?: ReactNode;
+    isError?: boolean;
     /**
      * width를 설정합니다.
      */
@@ -1205,11 +1207,11 @@ interface TextAreaOptionProps extends DisableProps, ErrorProps {
     /**
      * text area의 높이를 조절해요.
      */
-    height?: number;
+    height?: string;
     /**
      * text area의 최소 높이를 조절해요.
      */
-    minHeight?: number;
+    minHeight?: string;
 }
 declare type TextAreaProps = ComponentPropsWithoutRef<'textarea'> & TextAreaOptionProps;
 

package/dist/index.js

@@ -521,6 +521,7 @@ var setEllipsis = (maxLines) => {
     -webkit-line-clamp: ${maxLines};
     -webkit-box-orient: vertical;
     overflow: hidden;
+    word-break: break-all;
     text-overflow: ellipsis;
   `;
 };
@@ -1373,7 +1374,8 @@ var Button = forwardRef(
       as,
       children,
       leftSource,
-      rightSource
+      rightSource,
+      lineClamp
     } = _b, rest = __objRest(_b, [
       "styleVar",
       "sizeVar",
@@ -1382,7 +1384,8 @@ var Button = forwardRef(
       "as",
       "children",
       "leftSource",
-      "rightSource"
+      "rightSource",
+      "lineClamp"
     ]);
     return /* @__PURE__ */ jsxs(
       StyledButton,
@@ -1401,8 +1404,7 @@ var Button = forwardRef(
           /* @__PURE__ */ jsx(
             Text_default,
             {
-              wordBreak: "keep-all",
-              whiteSpace: "nowrap",
+              lineClamp,
               color: styleVar === "PRIMARY" ? "neutral0" : "neutral700",
               typography: sizeVar === "M" ? "body1_400" : "body2_400",
               children
@@ -1835,11 +1837,24 @@ var getBorderColorByStatus = ({ isFocused, isError, isHovered, disabled }) => {
 var InputWrapper = styled5.label`
   display: flex;
   align-items: center;
-  width: ${({ width }) => width != null ? width : "100%"};
-  height: fit-content;
+  width: ${({ width }) => {
+  var _a;
+  return (_a = `calc(${width} - 2px)`) != null ? _a : "calc(100% - 2px)";
+}};
+  min-width: ${({ minWidth }) => {
+  var _a;
+  return (_a = `calc(${minWidth} - 2px)`) != null ? _a : "fit-content";
+}};
+  height: ${({ height }) => {
+  var _a;
+  return (_a = `calc(${height} - 2px)`) != null ? _a : "fit-content";
+}};
   flex-direction: ${({ direction }) => direction || "row"};
   justify-content: space-between;
-  min-height: ${({ height }) => height != null ? height : "40px"};
+  min-height: ${({ minHeight }) => {
+  var _a;
+  return (_a = `calc(${minHeight} - 2px)`) != null ? _a : "fit-content";
+}};
   margin: 1px;
   gap: 8px;
   box-shadow: 0 0 0 1px ${(props) => getBorderColorByStatus(props)};
@@ -1894,7 +1909,7 @@ var Icon = forwardRef((_a, ref) => {
 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"]);
+    var _b = _a, { width = "100%", onClick, sizeVar = "M", isError, placeholder, value, disabled, leftSource } = _b, rest = __objRest(_b, ["width", "onClick", "sizeVar", "isError", "placeholder", "value", "disabled", "leftSource"]);
     const { isOpen, setIsOpen } = useDropdown();
     const [isHovered, setIsHovered] = useState(false);
     const handleOnClick = (e) => {
@@ -1918,6 +1933,7 @@ var DropdownButton = forwardRef(
         isHovered,
         disabled,
         width,
+        isError,
         height: getDropdownHeightBySizeVar(sizeVar),
         children: /* @__PURE__ */ jsxs(StyledDropdownButton, __spreadProps(__spreadValues({ ref, onClick: handleOnClick, disabled }, rest), { sizeVar, children: [
           leftSource && leftSource,
@@ -2641,7 +2657,7 @@ var Input = forwardRef(
       min,
       max,
       className,
-      width
+      width = "100%"
     } = _b, rest = __objRest(_b, [
       "onFocus",
       "onBlur",
@@ -2767,6 +2783,7 @@ var Input = forwardRef(
         onMouseEnter: handleOnMouseEnter,
         onMouseLeave: handleOnMouseLeave,
         width: getWidth(),
+        height: type === "number" ? "32px" : "40px",
         "data-shoplflow": "input",
         children: [
           /* @__PURE__ */ jsx(
@@ -2911,7 +2928,7 @@ var StyledTextarea = styled5.textarea`
   background-color: transparent;
   resize: none;
   width: 100%;
-  height: ${({ minHeight }) => minHeight ? `${minHeight}px` : "300px"};
+  height: 100%;
   flex: 1;
   word-break: break-all;
   ${({ disabled }) => getDisabledStyle(disabled)};
@@ -2932,8 +2949,9 @@ var TextArea = forwardRef(
       defaultValue,
       onBlur,
       onFocus,
-      minHeight = 100,
+      minHeight = "100px",
       width,
+      height,
       className
     } = _b, rest = __objRest(_b, [
       "name",
@@ -2948,6 +2966,7 @@ var TextArea = forwardRef(
       "onFocus",
       "minHeight",
       "width",
+      "height",
       "className"
     ]);
     const [text, setText] = useState("");
@@ -3007,6 +3026,8 @@ var TextArea = forwardRef(
         direction: "column",
         onMouseEnter: handleOnMouseEnter,
         onMouseLeave: handleOnMouseLeave,
+        height,
+        minHeight,
         width,
         "data-shoplflow": "text-area",
         children: [
@@ -3023,8 +3044,7 @@ var TextArea = forwardRef(
               value,
               ref,
               maxLength,
-              disabled,
-              minHeight
+              disabled
             }, rest)
           ),
           /* @__PURE__ */ jsx(BottomElementWrapper, { children: maxLength && /* @__PURE__ */ jsx(TextCounter_default, { currentLength: String(text).length, maxLength }) })