@shoplflow/base 0.37.5 → 0.38.0

package/dist/index.cjs

@@ -2935,12 +2935,15 @@ var getDropdownIconSizeBySizeVar = (size2) => {
       `;
   }
 };
-var getBorderColorByStatus = ({ isFocused, isError, isHovered, disabled }) => {
+var getBorderColorByStatus = ({ isFocused, isError, isHovered, disabled, sizeVar }) => {
   if (!disabled) {
     if (isError) {
       return exports.colorTokens.red300;
     }
     if (isFocused) {
+      if (sizeVar === "L") {
+        return exports.colorTokens.neutral700;
+      }
       return exports.colorTokens.primary300;
     }
     if (isHovered) {
@@ -2949,13 +2952,18 @@ var getBorderColorByStatus = ({ isFocused, isError, isHovered, disabled }) => {
   }
   return exports.colorTokens.neutral300;
 };
-var getButtoWrapperStyleBySizeVar = (sizeVar) => {
+var getButtonWrapperStyleBySizeVar = ({ sizeVar, isFocused }) => {
   switch (sizeVar) {
     case "L":
       return react$1.css`
         background-color: transparent;
-        border-width: 2px;
+        border-width: ${isFocused ? "2px" : "1px"};
+        transition: border-width 0.2s ease-in-out;
         border-radius: 12px;
+
+        &:hover {
+          border-width: 2px;
+        }
       `;
     default:
       return react$1.css`
@@ -2983,16 +2991,16 @@ var StyledDropdownButtonWrapper = styled6__default.default.label`
   max-height: initial;
   min-width: initial;
   max-width: initial;
+  justify-content: space-between;
+  border-style: solid;
+  overflow: hidden;
+  border-color: ${(props) => getBorderColorByStatus(props)};
   ${({ height, width }) => getStyleByType({
   height,
   width
 })};
-  justify-content: space-between;
-  border-color: ${(props) => getBorderColorByStatus(props)};
-  border-style: solid;
-  ${({ sizeVar }) => getButtoWrapperStyleBySizeVar(sizeVar)};
+  ${(props) => getButtonWrapperStyleBySizeVar(props)};
 
-  overflow: hidden;
   ${({ disabled }) => getDisabledStyle2(disabled)};
 `;
 var StyledDropdownButton = styled6__default.default.button`
@@ -3556,12 +3564,15 @@ var assetFunction = (iconName, domainProps) => {
   const ShoplIcon = ShoplAssets__namespace[iconName];
   return domain === "hada" ? HadaIcon : ShoplIcon;
 };
-var getBorderColorByStatus2 = ({ isFocused, isError, isHovered, disabled }) => {
+var getBorderColorByStatus2 = ({ isFocused, isError, isHovered, disabled, focusedBorderColor }) => {
   if (!disabled) {
     if (isError) {
       return exports.colorTokens.red300;
     }
     if (isFocused) {
+      if (focusedBorderColor) {
+        return exports.colorTokens[focusedBorderColor];
+      }
       return exports.colorTokens.primary300;
     }
     if (isHovered) {
@@ -3963,7 +3974,7 @@ var InputButton = React3.forwardRef(
   }
 );
 exports.InputButton = InputButton;
-var BottomElementWrapper = styled6__default.default.div`
+styled6__default.default.div`
   display: flex;
   width: 100%;
   flex-direction: row;
@@ -3976,14 +3987,29 @@ var StyledTextarea = styled6__default.default.textarea`
   background-color: transparent;
   resize: none;
   width: 100%;
-  height: 100%;
   flex: 1;
   word-break: break-all;
+  overflow-y: auto;
   ${({ disabled }) => getDisabledStyle(disabled)};
   &::placeholder {
     color: ${exports.colorTokens.neutral350};
   }
 `;
+var TextAreaContext = React3.createContext(null);
+var useTextArea = () => {
+  const context = React3.useContext(TextAreaContext);
+  if (!context) {
+    throw new Error("useTextArea must be used within a TextAreaProvider");
+  }
+  return context;
+};
+var MaxLength = () => {
+  const { text, maxLength } = useTextArea();
+  if (!maxLength) {
+    return null;
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx(StackContainer, { padding: "0 0 0 4px", children: /* @__PURE__ */ jsxRuntime.jsx(TextCounter_default, { currentLength: String(text).length, maxLength }) });
+};
 var TextArea = React3.forwardRef(
   (_a, ref) => {
     var _b = _a, {
@@ -4000,7 +4026,10 @@ var TextArea = React3.forwardRef(
       minHeight = "100px",
       width,
       height,
-      className
+      className,
+      focusedBorderColor = "primary300",
+      leftSource,
+      rightSource
     } = _b, rest = __objRest(_b, [
       "name",
       "maxLength",
@@ -4015,7 +4044,10 @@ var TextArea = React3.forwardRef(
       "minHeight",
       "width",
       "height",
-      "className"
+      "className",
+      "focusedBorderColor",
+      "leftSource",
+      "rightSource"
     ]);
     const [text, setText] = React3.useState("");
     const [isFocused, setIsFocused] = React3.useState(false);
@@ -4063,7 +4095,11 @@ var TextArea = React3.forwardRef(
       }
     }, [maxLength, value]);
     const uniqueId = React3.useId();
-    return /* @__PURE__ */ jsxRuntime.jsxs(
+    const contextValue = {
+      text,
+      maxLength
+    };
+    return /* @__PURE__ */ jsxRuntime.jsx(TextAreaContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsxRuntime.jsxs(
       InputWrapper,
       {
         htmlFor: uniqueId,
@@ -4079,11 +4115,12 @@ var TextArea = React3.forwardRef(
         width,
         gap: "0",
         "data-shoplflow": "text-area",
+        focusedBorderColor,
         children: [
           /* @__PURE__ */ jsxRuntime.jsx(
             StyledTextarea,
             __spreadValues({
-              className: "body1_400" + (className ? ` ${className}` : ""),
+              className: "paragraph1" + (className ? ` ${className}` : ""),
               placeholder,
               onFocus: handleOnFocus,
               onBlur: handleOnBlur,
@@ -4096,12 +4133,26 @@ var TextArea = React3.forwardRef(
               disabled
             }, rest)
           ),
-          /* @__PURE__ */ jsxRuntime.jsx(BottomElementWrapper, { children: maxLength && /* @__PURE__ */ jsxRuntime.jsx(TextCounter_default, { currentLength: String(text).length, maxLength }) })
+          !leftSource && !rightSource ? /* @__PURE__ */ jsxRuntime.jsx(StackContainer.Horizontal, { padding: "8px", width: "100%", justify: "flex-end", children: /* @__PURE__ */ jsxRuntime.jsx(StackContainer, { children: /* @__PURE__ */ jsxRuntime.jsx(MaxLength, {}) }) }) : /* @__PURE__ */ jsxRuntime.jsxs(
+            StackContainer.Horizontal,
+            {
+              padding: "8px",
+              width: "100%",
+              align: "center",
+              justify: "space-between",
+              style: { visibility: disabled ? "hidden" : "visible" },
+              children: [
+                leftSource,
+                rightSource
+              ]
+            }
+          )
         ]
       }
-    );
+    ) });
   }
 );
+TextArea.MaxLength = MaxLength;
 exports.TextArea = TextArea;
 var StyledSelectInputButton = styled6__default.default.div`
   display: flex;

package/dist/index.d.cts

@@ -1139,23 +1139,42 @@ interface InputButtonOptionProps extends Omit<InputHTMLAttributes<HTMLInputEleme
 declare const InputButton: React__default.ForwardRefExoticComponent<InputButtonProps & React__default.RefAttributes<HTMLInputElement>>;
 
 interface TextAreaOptionProps extends DisableProps, ErrorProps {
+    /**
+     * TextArea의 너비를 설정합니다.
+     */
     width?: string;
     /**
-     * maxLength를 설정해요.
+     * maxLength를 설정합니다.
      */
     maxLength?: number;
     /**
-     * text area의 높이를 조절해요.
+     * TextArea의 높이를 설정합니다.
      */
     height?: string;
     /**
-     * text area의 최소 높이를 조절해요.
+     * TextArea의 최소 높이를 설정합니다.
      */
     minHeight?: string;
+    /**
+     * focused 상태일 때의 border-color를 설정합니다.
+     */
+    focusedBorderColor?: ColorTokens;
+    /**
+     * TextArea Toolbar의 왼쪽 요소를 설정합니다.
+     */
+    leftSource?: ReactElement;
+    /**
+     * TextArea Toolbar의 오른쪽 요소를 설정합니다.
+     */
+    rightSource?: ReactElement;
 }
 declare type TextAreaProps = ComponentPropsWithoutRef<'textarea'> & TextAreaOptionProps;
 
-declare const TextArea: React__default.ForwardRefExoticComponent<Omit<React__default.DetailedHTMLProps<React__default.TextareaHTMLAttributes<HTMLTextAreaElement>, HTMLTextAreaElement>, "ref"> & TextAreaOptionProps & React__default.RefAttributes<HTMLTextAreaElement>>;
+declare const MaxLength: () => react_jsx_runtime.JSX.Element | null;
+declare type TextAreaComponent = React__default.ForwardRefExoticComponent<TextAreaProps & React__default.RefAttributes<HTMLTextAreaElement>> & {
+    MaxLength: typeof MaxLength;
+};
+declare const TextArea: TextAreaComponent;
 
 interface SelectInputButtonProps extends SelectInputButtonOptionProps {
 }

package/dist/index.d.ts

@@ -1139,23 +1139,42 @@ interface InputButtonOptionProps extends Omit<InputHTMLAttributes<HTMLInputEleme
 declare const InputButton: React__default.ForwardRefExoticComponent<InputButtonProps & React__default.RefAttributes<HTMLInputElement>>;
 
 interface TextAreaOptionProps extends DisableProps, ErrorProps {
+    /**
+     * TextArea의 너비를 설정합니다.
+     */
     width?: string;
     /**
-     * maxLength를 설정해요.
+     * maxLength를 설정합니다.
      */
     maxLength?: number;
     /**
-     * text area의 높이를 조절해요.
+     * TextArea의 높이를 설정합니다.
      */
     height?: string;
     /**
-     * text area의 최소 높이를 조절해요.
+     * TextArea의 최소 높이를 설정합니다.
      */
     minHeight?: string;
+    /**
+     * focused 상태일 때의 border-color를 설정합니다.
+     */
+    focusedBorderColor?: ColorTokens;
+    /**
+     * TextArea Toolbar의 왼쪽 요소를 설정합니다.
+     */
+    leftSource?: ReactElement;
+    /**
+     * TextArea Toolbar의 오른쪽 요소를 설정합니다.
+     */
+    rightSource?: ReactElement;
 }
 declare type TextAreaProps = ComponentPropsWithoutRef<'textarea'> & TextAreaOptionProps;
 
-declare const TextArea: React__default.ForwardRefExoticComponent<Omit<React__default.DetailedHTMLProps<React__default.TextareaHTMLAttributes<HTMLTextAreaElement>, HTMLTextAreaElement>, "ref"> & TextAreaOptionProps & React__default.RefAttributes<HTMLTextAreaElement>>;
+declare const MaxLength: () => react_jsx_runtime.JSX.Element | null;
+declare type TextAreaComponent = React__default.ForwardRefExoticComponent<TextAreaProps & React__default.RefAttributes<HTMLTextAreaElement>> & {
+    MaxLength: typeof MaxLength;
+};
+declare const TextArea: TextAreaComponent;
 
 interface SelectInputButtonProps extends SelectInputButtonOptionProps {
 }

package/dist/index.js

@@ -2908,12 +2908,15 @@ var getDropdownIconSizeBySizeVar = (size2) => {
       `;
   }
 };
-var getBorderColorByStatus = ({ isFocused, isError, isHovered, disabled }) => {
+var getBorderColorByStatus = ({ isFocused, isError, isHovered, disabled, sizeVar }) => {
   if (!disabled) {
     if (isError) {
       return colorTokens.red300;
     }
     if (isFocused) {
+      if (sizeVar === "L") {
+        return colorTokens.neutral700;
+      }
       return colorTokens.primary300;
     }
     if (isHovered) {
@@ -2922,13 +2925,18 @@ var getBorderColorByStatus = ({ isFocused, isError, isHovered, disabled }) => {
   }
   return colorTokens.neutral300;
 };
-var getButtoWrapperStyleBySizeVar = (sizeVar) => {
+var getButtonWrapperStyleBySizeVar = ({ sizeVar, isFocused }) => {
   switch (sizeVar) {
     case "L":
       return css`
         background-color: transparent;
-        border-width: 2px;
+        border-width: ${isFocused ? "2px" : "1px"};
+        transition: border-width 0.2s ease-in-out;
         border-radius: 12px;
+
+        &:hover {
+          border-width: 2px;
+        }
       `;
     default:
       return css`
@@ -2956,16 +2964,16 @@ var StyledDropdownButtonWrapper = styled6.label`
   max-height: initial;
   min-width: initial;
   max-width: initial;
+  justify-content: space-between;
+  border-style: solid;
+  overflow: hidden;
+  border-color: ${(props) => getBorderColorByStatus(props)};
   ${({ height, width }) => getStyleByType({
   height,
   width
 })};
-  justify-content: space-between;
-  border-color: ${(props) => getBorderColorByStatus(props)};
-  border-style: solid;
-  ${({ sizeVar }) => getButtoWrapperStyleBySizeVar(sizeVar)};
+  ${(props) => getButtonWrapperStyleBySizeVar(props)};
 
-  overflow: hidden;
   ${({ disabled }) => getDisabledStyle2(disabled)};
 `;
 var StyledDropdownButton = styled6.button`
@@ -3529,12 +3537,15 @@ var assetFunction = (iconName, domainProps) => {
   const ShoplIcon = ShoplAssets[iconName];
   return domain === "hada" ? HadaIcon : ShoplIcon;
 };
-var getBorderColorByStatus2 = ({ isFocused, isError, isHovered, disabled }) => {
+var getBorderColorByStatus2 = ({ isFocused, isError, isHovered, disabled, focusedBorderColor }) => {
   if (!disabled) {
     if (isError) {
       return colorTokens.red300;
     }
     if (isFocused) {
+      if (focusedBorderColor) {
+        return colorTokens[focusedBorderColor];
+      }
       return colorTokens.primary300;
     }
     if (isHovered) {
@@ -3936,7 +3947,7 @@ var InputButton = forwardRef(
   }
 );
 var InputButton_default = InputButton;
-var BottomElementWrapper = styled6.div`
+styled6.div`
   display: flex;
   width: 100%;
   flex-direction: row;
@@ -3949,14 +3960,29 @@ var StyledTextarea = styled6.textarea`
   background-color: transparent;
   resize: none;
   width: 100%;
-  height: 100%;
   flex: 1;
   word-break: break-all;
+  overflow-y: auto;
   ${({ disabled }) => getDisabledStyle(disabled)};
   &::placeholder {
     color: ${colorTokens.neutral350};
   }
 `;
+var TextAreaContext = createContext(null);
+var useTextArea = () => {
+  const context = useContext(TextAreaContext);
+  if (!context) {
+    throw new Error("useTextArea must be used within a TextAreaProvider");
+  }
+  return context;
+};
+var MaxLength = () => {
+  const { text, maxLength } = useTextArea();
+  if (!maxLength) {
+    return null;
+  }
+  return /* @__PURE__ */ jsx(StackContainer, { padding: "0 0 0 4px", children: /* @__PURE__ */ jsx(TextCounter_default, { currentLength: String(text).length, maxLength }) });
+};
 var TextArea = forwardRef(
   (_a, ref) => {
     var _b = _a, {
@@ -3973,7 +3999,10 @@ var TextArea = forwardRef(
       minHeight = "100px",
       width,
       height,
-      className
+      className,
+      focusedBorderColor = "primary300",
+      leftSource,
+      rightSource
     } = _b, rest = __objRest(_b, [
       "name",
       "maxLength",
@@ -3988,7 +4017,10 @@ var TextArea = forwardRef(
       "minHeight",
       "width",
       "height",
-      "className"
+      "className",
+      "focusedBorderColor",
+      "leftSource",
+      "rightSource"
     ]);
     const [text, setText] = useState("");
     const [isFocused, setIsFocused] = useState(false);
@@ -4036,7 +4068,11 @@ var TextArea = forwardRef(
       }
     }, [maxLength, value]);
     const uniqueId = useId();
-    return /* @__PURE__ */ jsxs(
+    const contextValue = {
+      text,
+      maxLength
+    };
+    return /* @__PURE__ */ jsx(TextAreaContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsxs(
       InputWrapper,
       {
         htmlFor: uniqueId,
@@ -4052,11 +4088,12 @@ var TextArea = forwardRef(
         width,
         gap: "0",
         "data-shoplflow": "text-area",
+        focusedBorderColor,
         children: [
           /* @__PURE__ */ jsx(
             StyledTextarea,
             __spreadValues({
-              className: "body1_400" + (className ? ` ${className}` : ""),
+              className: "paragraph1" + (className ? ` ${className}` : ""),
               placeholder,
               onFocus: handleOnFocus,
               onBlur: handleOnBlur,
@@ -4069,12 +4106,26 @@ var TextArea = forwardRef(
               disabled
             }, rest)
           ),
-          /* @__PURE__ */ jsx(BottomElementWrapper, { children: maxLength && /* @__PURE__ */ jsx(TextCounter_default, { currentLength: String(text).length, maxLength }) })
+          !leftSource && !rightSource ? /* @__PURE__ */ jsx(StackContainer.Horizontal, { padding: "8px", width: "100%", justify: "flex-end", children: /* @__PURE__ */ jsx(StackContainer, { children: /* @__PURE__ */ jsx(MaxLength, {}) }) }) : /* @__PURE__ */ jsxs(
+            StackContainer.Horizontal,
+            {
+              padding: "8px",
+              width: "100%",
+              align: "center",
+              justify: "space-between",
+              style: { visibility: disabled ? "hidden" : "visible" },
+              children: [
+                leftSource,
+                rightSource
+              ]
+            }
+          )
         ]
       }
-    );
+    ) });
   }
 );
+TextArea.MaxLength = MaxLength;
 var TextArea_default = TextArea;
 var StyledSelectInputButton = styled6.div`
   display: flex;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@shoplflow/base",
-  "version": "0.37.5",
+  "version": "0.38.0",
   "type": "module",
   "license": "Apache-2.0",
   "main": "dist/index.js",
@@ -90,9 +90,9 @@
     "react-datepicker": "^7.3.0",
     "react-dom": "^18.2.0",
     "simplebar-react": "^3.2.6",
-    "@shoplflow/hada-assets": "^0.1.3",
     "@shoplflow/shopl-assets": "^0.12.8",
-    "@shoplflow/utils": "^0.6.5"
+    "@shoplflow/utils": "^0.6.5",
+    "@shoplflow/hada-assets": "^0.1.3"
   },
   "scripts": {
     "type-check": "tsc --noEmit",