@nation-a/ui 0.15.2 → 0.16.0

package/dist/index.js

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