@vkzstudio/muza-ui 1.0.21 → 1.0.22

package/dist/components/Textarea/Textarea.js

@@ -1,22 +1,20 @@
-import { jsxs as A, jsx as m } from "react/jsx-runtime";
-import { forwardRef as C, useId as G, useRef as H, useState as U } from "react";
-import { cva as B } from "class-variance-authority";
+import { jsxs as G, jsx as l } from "react/jsx-runtime";
+import { forwardRef as H, useId as U, useRef as W, useState as B } from "react";
+import { cva as h } from "class-variance-authority";
 import { FormField as D } from "../FormField/FormField.js";
-import { cn as f } from "../../utils/cn.js";
-import { typographyVariants as h } from "../Typography/Typography.js";
-const E = B(
+import { cn as x } from "../../utils/cn.js";
+import { typographyVariants as b } from "../Typography/Typography.js";
+const E = h(
   [
-    h({
+    b({
       variant: "body",
       weight: "medium",
       size: "base"
     }),
-    "w-full bg-comp-input-fill-def px-comp-input-p-hor py-xl font-text text-comp-input-text-primary transition-colors",
+    "w-full font-text text-comp-input-text-primary transition-colors outline-none",
     "placeholder:font-regular placeholder:text-comp-input-text-placeholder",
-    "rounded-xl border border-comp-input-stroke-def",
-    "hover:border-comp-input-stroke-hover",
-    "disabled:cursor-not-allowed disabled:border-comp-input-stroke-disabled disabled:bg-comp-input-fill-disabled",
-    "outline-none focus:border-comp-input-stroke-focused"
+    "mr-[calc(var(--spacing-xl)/2)] pt-xl pr-[calc(var(--spacing-comp-input-p-hor)-var(--spacing-xl)/2)] pb-[calc(var(--spacing-xl)/2)] pl-comp-input-p-hor",
+    "disabled:cursor-not-allowed"
   ],
   {
     variants: {
@@ -38,36 +36,57 @@ const E = B(
       resize: "none"
     }
   }
-), J = C(
+), J = h(
+  [
+    "overflow-hidden rounded-xl border border-comp-input-stroke-def bg-comp-input-fill-def transition-colors",
+    "focus-within:border-comp-texteditor-stroke-focused",
+    "pb-[calc(var(--spacing-xl)/2)]",
+    // Offset scrollbar to make resize handle visible
+    "flex"
+  ],
+  {
+    variants: {
+      state: {
+        default: "border-comp-texteditor-stroke-def hover:border-comp-texteditor-stroke-hover",
+        disabled: "cursor-not-allowed border-comp-input-stroke-disabled bg-comp-input-fill-disabled",
+        error: "border-comp-texteditor-stroke-error"
+      }
+    },
+    defaultVariants: {
+      state: "default"
+    }
+  }
+), K = H(
   ({
-    className: x,
-    label: b,
-    hint: g,
-    id: y,
-    error: o,
-    resize: v,
-    autoResize: l,
-    errorMessage: s,
-    required: r,
-    disableRequiredAsterisk: z,
-    labelExtra: w,
-    infoTooltip: I,
-    showCharacterCount: k,
-    value: n,
+    className: g,
+    label: v,
+    hint: y,
+    id: w,
+    error: e,
+    resize: z,
+    autoResize: s,
+    errorMessage: c,
+    required: o,
+    disableRequiredAsterisk: k,
+    labelExtra: I,
+    infoTooltip: N,
+    showCharacterCount: R,
+    value: a,
     defaultValue: d,
-    onChange: i,
-    ...a
-  }, c) => {
-    const R = G(), e = y ?? R, N = `${e}-hint`, F = `${e}-label`, S = H(null), p = (typeof c == "function" ? null : c) ?? S, u = n !== void 0, [$, j] = U(
+    onChange: n,
+    disabled: p,
+    ...i
+  }, u) => {
+    const V = U(), r = w ?? V, F = `${r}-hint`, S = `${r}-label`, $ = W(null), m = (typeof u == "function" ? null : u) ?? $, f = a !== void 0, [j, A] = B(
       () => String(d ?? "").length
-    ), L = u ? String(n).length : $, T = () => {
-      const t = p.current;
-      t && (t.style.height = "auto", t.style.height = `${t.scrollHeight + 2}px`);
-    }, V = k && a.maxLength != null ? /* @__PURE__ */ A(
+    ), L = f ? String(a).length : j, T = () => {
+      const t = m.current;
+      t && (t.style.height = "auto", t.style.height = `${t.scrollHeight}px`);
+    }, C = R && i.maxLength != null ? /* @__PURE__ */ G(
       "span",
       {
-        className: f(
-          h({
+        className: x(
+          b({
             variant: "body",
             weight: "regular",
             size: "sm"
@@ -77,50 +96,51 @@ const E = B(
         children: [
           L,
           "/",
-          a.maxLength
+          i.maxLength
         ]
       }
     ) : void 0;
-    return /* @__PURE__ */ m(
+    return /* @__PURE__ */ l(
       D,
       {
-        label: b,
-        hint: o && s ? s : g,
-        error: o,
-        required: r,
-        disableRequiredAsterisk: z,
-        htmlFor: e,
-        labelId: F,
-        hintId: N,
-        labelExtra: w,
-        infoTooltip: I,
-        labelRight: V,
-        children: /* @__PURE__ */ m(
+        label: v,
+        hint: e && c ? c : y,
+        error: e,
+        required: o,
+        disableRequiredAsterisk: k,
+        htmlFor: r,
+        labelId: S,
+        hintId: F,
+        labelExtra: I,
+        infoTooltip: N,
+        labelRight: C,
+        children: /* @__PURE__ */ l("div", { className: J({ state: p ? "disabled" : e ? "error" : "default" }), children: /* @__PURE__ */ l(
           "textarea",
           {
             "data-slot": "textarea",
-            ref: p,
-            id: e,
-            required: r,
-            "aria-required": r,
-            className: f(
-              E({ error: o, resize: v, autoResize: l }),
-              x
+            ref: m,
+            id: r,
+            required: o,
+            "aria-required": o,
+            className: x(
+              E({ error: e, resize: z, autoResize: s }),
+              g
             ),
-            value: n,
+            value: a,
             defaultValue: d,
             onChange: (t) => {
-              u || j(t.target.value.length), i == null || i(t);
+              f || A(t.target.value.length), n == null || n(t);
             },
-            ...a,
-            onInput: l ? T : void 0
+            disabled: p,
+            ...i,
+            onInput: s ? T : void 0
           }
-        )
+        ) })
       }
     );
   }
 );
-J.displayName = "Textarea";
+K.displayName = "Textarea";
 export {
-  J as Textarea
+  K as Textarea
 };