@nation-a/ui 0.15.2 → 0.16.0

package/dist/index.cjs

@@ -19322,8 +19322,7 @@ const navigationRecipe = sva({
       flexDirection: "row",
       justifyContent: "space-around",
       bg: "surface.layer_1",
-      pt: 2,
-      pb: 8
+      py: 2
     },
     trigger: {
       display: "flex",
@@ -19903,6 +19902,7 @@ const Textarea = React.forwardRef(
     ...rest
   }, ref) => {
     const [count, setCount] = React.useState((value == null ? void 0 : value.toString().length) || 0);
+    const [text, setText] = React.useState(value);
     const recipe = inputRecipe({
       variant,
       color: color2,
@@ -19918,8 +19918,8 @@ const Textarea = React.forwardRef(
         if (disabled) return;
         const { value: value2 } = e2.target;
         e2.target.value = value2.slice(0, textLimit);
+        setText(e2.target.value);
         onChange == null ? void 0 : onChange(e2);
-        if (showTextCount) setCount(value2.length);
       },
       [disabled, onChange, textLimit, showTextCount]
     );
@@ -19946,17 +19946,19 @@ const Textarea = React.forwardRef(
       },
       [recipe.label, required, RequiredStar]
     );
-    const TextLengthIndicator = React.useCallback(
-      ({ count: count2, limit }) => {
-        return /* @__PURE__ */ jsxRuntime.jsx("span", { className: recipe.textLengthIndicator, children: `${count2}${limit ? ` / ${limit}` : ""}` });
-      },
-      [recipe.textLengthIndicator]
-    );
+    const TextLengthIndicator = ({ count: count2, limit }) => {
+      return /* @__PURE__ */ jsxRuntime.jsx("span", { className: recipe.textLengthIndicator, children: `${count2}${limit ? ` / ${limit}` : ""}` });
+    };
+    React.useEffect(() => {
+      const textUpdated = value == null ? void 0 : value.toString().slice(0, textLimit);
+      setText(textUpdated);
+      setCount((textUpdated == null ? void 0 : textUpdated.length) || 0);
+    }, [value]);
     return /* @__PURE__ */ jsxRuntime.jsxs(VStack2, { gap: 1, className: "group", "data-disabled": disabled || void 0, css: { width: "100%" }, children: [
       /* @__PURE__ */ jsxRuntime.jsx(Label2, { visible: !!(label && labelPosition === "outside"), children: label }),
       /* @__PURE__ */ jsxRuntime.jsxs(Stack2, { gap: 1, className: cx(recipe.inputContainer, className), onClick: handleContainerClick, css: css2, children: [
         /* @__PURE__ */ jsxRuntime.jsx(Label2, { visible: !!(label && labelPosition === "inside"), children: label }),
-        /* @__PURE__ */ jsxRuntime.jsx("textarea", { ref: inputRef, value, disabled, onChange: handleTextareaChange, ...rest }),
+        /* @__PURE__ */ jsxRuntime.jsx("textarea", { ref: inputRef, value: text, disabled, onChange: handleTextareaChange, ...rest }),
         showTextCount && /* @__PURE__ */ jsxRuntime.jsx(TextLengthIndicator, { count, limit: textLimit })
       ] }),
       description && /* @__PURE__ */ jsxRuntime.jsx(Description2, { children: description })