@shoplflow/base 0.37.6 → 0.38.0

package/dist/index.cjs

@@ -3564,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) {
@@ -3971,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;
@@ -3984,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, {
@@ -4008,7 +4026,10 @@ var TextArea = React3.forwardRef(
       minHeight = "100px",
       width,
       height,
-      className
+      className,
+      focusedBorderColor = "primary300",
+      leftSource,
+      rightSource
     } = _b, rest = __objRest(_b, [
       "name",
       "maxLength",
@@ -4023,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);
@@ -4071,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,
@@ -4087,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,
@@ -4104,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

@@ -3537,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) {
@@ -3944,7 +3947,7 @@ var InputButton = forwardRef(
   }
 );
 var InputButton_default = InputButton;
-var BottomElementWrapper = styled6.div`
+styled6.div`
   display: flex;
   width: 100%;
   flex-direction: row;
@@ -3957,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, {
@@ -3981,7 +3999,10 @@ var TextArea = forwardRef(
       minHeight = "100px",
       width,
       height,
-      className
+      className,
+      focusedBorderColor = "primary300",
+      leftSource,
+      rightSource
     } = _b, rest = __objRest(_b, [
       "name",
       "maxLength",
@@ -3996,7 +4017,10 @@ var TextArea = forwardRef(
       "minHeight",
       "width",
       "height",
-      "className"
+      "className",
+      "focusedBorderColor",
+      "leftSource",
+      "rightSource"
     ]);
     const [text, setText] = useState("");
     const [isFocused, setIsFocused] = useState(false);
@@ -4044,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,
@@ -4060,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,
@@ -4077,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.6",
+  "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",