@shoplflow/base 0.24.21 → 0.24.23

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> & {
@@ -1205,11 +1206,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> & {
@@ -1205,11 +1206,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,12 @@ 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 }) => width != null ? width : "calc(100% - 2px)"};
+  min-width: ${({ minWidth }) => minWidth != null ? minWidth : "fit-content"};
+  height: ${({ height }) => height != null ? height : "fit-content"};
   flex-direction: ${({ direction }) => direction || "row"};
   justify-content: space-between;
-  min-height: ${({ height }) => height != null ? height : "40px"};
+  min-height: ${({ minHeight }) => minHeight != null ? minHeight : "38px"};
   margin: 1px;
   gap: 8px;
   box-shadow: 0 0 0 1px ${(props) => getBorderColorByStatus(props)};
@@ -2911,7 +2914,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 +2935,9 @@ var TextArea = forwardRef(
       defaultValue,
       onBlur,
       onFocus,
-      minHeight = 100,
+      minHeight = "100px",
       width,
+      height,
       className
     } = _b, rest = __objRest(_b, [
       "name",
@@ -2948,6 +2952,7 @@ var TextArea = forwardRef(
       "onFocus",
       "minHeight",
       "width",
+      "height",
       "className"
     ]);
     const [text, setText] = useState("");
@@ -3007,6 +3012,8 @@ var TextArea = forwardRef(
         direction: "column",
         onMouseEnter: handleOnMouseEnter,
         onMouseLeave: handleOnMouseLeave,
+        height,
+        minHeight,
         width,
         "data-shoplflow": "text-area",
         children: [
@@ -3023,8 +3030,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 }) })