@vkzstudio/muza-ui 1.0.19 → 1.0.21

package/dist/components/TextEditor/ToolbarButton.js

@@ -1,8 +1,8 @@
 import { jsx as t, jsxs as m } from "react/jsx-runtime";
 import { forwardRef as p } from "react";
 import { cva as u } from "class-variance-authority";
-import { TooltipProvider as b, Tooltip as f, TooltipTrigger as x, TooltipContent as g } from "../Tooltip/Tooltip.js";
-import { cn as h } from "../../utils/cn.js";
+import { cn as b } from "../../utils/cn.js";
+import { TooltipProvider as f, Tooltip as x, TooltipTrigger as g, TooltipContent as h } from "../Tooltip/Tooltip.js";
 const v = u(
   [
     "flex shrink-0 items-center justify-center",
@@ -46,7 +46,7 @@ const v = u(
       {
         type: "button",
         ref: l,
-        className: h(v({ state: o ? "disabled" : e ? "active" : "default", className: s })),
+        className: b(v({ state: o ? "disabled" : e ? "active" : "default", className: s })),
         disabled: o,
         "aria-label": r,
         "aria-pressed": e,
@@ -55,9 +55,9 @@ const v = u(
         children: a
       }
     );
-    return c ? /* @__PURE__ */ t(b, { children: /* @__PURE__ */ m(f, { children: [
-      /* @__PURE__ */ t(x, { asChild: !0, children: i }),
-      /* @__PURE__ */ t(g, { children: d ?? r })
+    return c ? /* @__PURE__ */ t(f, { children: /* @__PURE__ */ m(x, { children: [
+      /* @__PURE__ */ t(g, { asChild: !0, children: i }),
+      /* @__PURE__ */ t(h, { children: d ?? r })
     ] }) }) : i;
   }
 );

package/dist/components/Textarea/Textarea.d.ts

@@ -1,4 +1,4 @@
-import { ComponentProps } from 'react';
+import { ComponentProps, ReactNode } from 'react';
 /** Props for the Textarea component. */
 export interface TextareaProps extends ComponentProps<'textarea'> {
     /** Controls manual resize behavior via drag handle. @default 'none' */
@@ -19,6 +19,12 @@ export interface TextareaProps extends ComponentProps<'textarea'> {
     name?: string;
     /** Automatically grows textarea height to fit content. @default false */
     autoResize?: boolean;
+    /** Extra content rendered inline next to the label (e.g. a tooltip icon). */
+    labelExtra?: ReactNode;
+    /** Tooltip content shown in an info icon next to the label. Overridden by `labelExtra` if both are provided. */
+    infoTooltip?: string;
+    /** Displays a character counter (currentCount/maxLength) in the label row. Requires `maxLength` to be set. @default false */
+    showCharacterCount?: boolean;
 }
 export declare const Textarea: import('react').ForwardRefExoticComponent<Omit<TextareaProps, "ref"> & import('react').RefAttributes<HTMLTextAreaElement>>;
 //# sourceMappingURL=Textarea.d.ts.map

package/dist/components/Textarea/Textarea.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Textarea.d.ts","sourceRoot":"","sources":["../../../src/components/Textarea/Textarea.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,cAAc,EAA6B,MAAM,OAAO,CAAA;AA0CtE,wCAAwC;AACxC,MAAM,WAAW,aAAc,SAAQ,cAAc,CAAC,UAAU,CAAC;IAC/D,uEAAuE;IACvE,MAAM,CAAC,EAAE,MAAM,GAAG,UAAU,GAAG,YAAY,GAAG,MAAM,CAAA;IACpD,+CAA+C;IAC/C,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,6FAA6F;IAC7F,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,mDAAmD;IACnD,KAAK,CAAC,EAAE,OAAO,CAAA;IACf,sFAAsF;IACtF,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,gGAAgG;IAChG,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,+EAA+E;IAC/E,uBAAuB,CAAC,EAAE,OAAO,CAAA;IACjC,0CAA0C;IAC1C,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,yEAAyE;IACzE,UAAU,CAAC,EAAE,OAAO,CAAA;CACrB;AAED,eAAO,MAAM,QAAQ,4HA8DpB,CAAA"}
+{"version":3,"file":"Textarea.d.ts","sourceRoot":"","sources":["../../../src/components/Textarea/Textarea.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,KAAK,cAAc,EACnB,KAAK,SAAS,EAKf,MAAM,OAAO,CAAA;AA0Cd,wCAAwC;AACxC,MAAM,WAAW,aAAc,SAAQ,cAAc,CAAC,UAAU,CAAC;IAC/D,uEAAuE;IACvE,MAAM,CAAC,EAAE,MAAM,GAAG,UAAU,GAAG,YAAY,GAAG,MAAM,CAAA;IACpD,+CAA+C;IAC/C,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,6FAA6F;IAC7F,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,mDAAmD;IACnD,KAAK,CAAC,EAAE,OAAO,CAAA;IACf,sFAAsF;IACtF,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,gGAAgG;IAChG,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,+EAA+E;IAC/E,uBAAuB,CAAC,EAAE,OAAO,CAAA;IACjC,0CAA0C;IAC1C,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,yEAAyE;IACzE,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,6EAA6E;IAC7E,UAAU,CAAC,EAAE,SAAS,CAAA;IACtB,gHAAgH;IAChH,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,6HAA6H;IAC7H,kBAAkB,CAAC,EAAE,OAAO,CAAA;CAC7B;AAED,eAAO,MAAM,QAAQ,4HAqGpB,CAAA"}

package/dist/components/Textarea/Textarea.js

@@ -1,12 +1,12 @@
-import { jsx as s } from "react/jsx-runtime";
-import { forwardRef as z, useId as w, useRef as I } from "react";
-import { cva as k } from "class-variance-authority";
-import { FormField as R } from "../FormField/FormField.js";
-import { cn as F } from "../../utils/cn.js";
-import { typographyVariants as V } from "../Typography/Typography.js";
-const $ = k(
+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 { 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(
   [
-    V({
+    h({
       variant: "body",
       weight: "medium",
       size: "base"
@@ -38,56 +38,89 @@ const $ = k(
       resize: "none"
     }
   }
-), N = z(
+), J = C(
   ({
-    className: d,
-    label: p,
-    hint: c,
-    id: u,
+    className: x,
+    label: b,
+    hint: g,
+    id: y,
     error: o,
-    resize: m,
-    autoResize: a,
-    errorMessage: i,
+    resize: v,
+    autoResize: l,
+    errorMessage: s,
     required: r,
-    disableRequiredAsterisk: f,
-    ...h
-  }, n) => {
-    const x = w(), e = u ?? x, b = `${e}-hint`, y = `${e}-label`, g = I(null), l = (typeof n == "function" ? null : n) ?? g, v = () => {
-      const t = l.current;
+    disableRequiredAsterisk: z,
+    labelExtra: w,
+    infoTooltip: I,
+    showCharacterCount: k,
+    value: n,
+    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(
+      () => 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`);
-    };
-    return /* @__PURE__ */ s(
-      R,
+    }, V = k && a.maxLength != null ? /* @__PURE__ */ A(
+      "span",
       {
-        label: p,
-        hint: o && i ? i : c,
+        className: f(
+          h({
+            variant: "body",
+            weight: "regular",
+            size: "sm"
+          }),
+          "text-comp-input-text-secondary"
+        ),
+        children: [
+          L,
+          "/",
+          a.maxLength
+        ]
+      }
+    ) : void 0;
+    return /* @__PURE__ */ m(
+      D,
+      {
+        label: b,
+        hint: o && s ? s : g,
         error: o,
         required: r,
-        disableRequiredAsterisk: f,
+        disableRequiredAsterisk: z,
         htmlFor: e,
-        labelId: y,
-        hintId: b,
-        children: /* @__PURE__ */ s(
+        labelId: F,
+        hintId: N,
+        labelExtra: w,
+        infoTooltip: I,
+        labelRight: V,
+        children: /* @__PURE__ */ m(
           "textarea",
           {
             "data-slot": "textarea",
-            ref: l,
+            ref: p,
             id: e,
             required: r,
             "aria-required": r,
-            className: F(
-              $({ error: o, resize: m, autoResize: a }),
-              d
+            className: f(
+              E({ error: o, resize: v, autoResize: l }),
+              x
             ),
-            ...h,
-            onInput: a ? v : void 0
+            value: n,
+            defaultValue: d,
+            onChange: (t) => {
+              u || j(t.target.value.length), i == null || i(t);
+            },
+            ...a,
+            onInput: l ? T : void 0
           }
         )
       }
     );
   }
 );
-N.displayName = "Textarea";
+J.displayName = "Textarea";
 export {
-  N as Textarea
+  J as Textarea
 };

package/dist/components/Textarea/Textarea.stories.d.ts

@@ -10,5 +10,6 @@ export declare const Error: Story;
 export declare const Disabled: Story;
 export declare const Required: Story;
 export declare const AutoResize: Story;
+export declare const WithCharacterCounter: Story;
 export declare const ResizableHandles: Story;
 //# sourceMappingURL=Textarea.stories.d.ts.map

package/dist/components/Textarea/Textarea.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Textarea.stories.d.ts","sourceRoot":"","sources":["../../../src/components/Textarea/Textarea.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAA;AAC3D,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAA;AAErC,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,QAAQ,CA8F/B,CAAA;AAED,eAAe,IAAI,CAAA;AACnB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,QAAQ,CAAC,CAAA;AAEtC,eAAO,MAAM,OAAO,EAAE,KAcrB,CAAA;AAED,eAAO,MAAM,gBAAgB,EAAE,KAe9B,CAAA;AAED,eAAO,MAAM,MAAM,EAAE,KAgBpB,CAAA;AAED,eAAO,MAAM,KAAK,EAAE,KAiBnB,CAAA;AAED,eAAO,MAAM,QAAQ,EAAE,KAgBtB,CAAA;AAED,eAAO,MAAM,QAAQ,EAAE,KAgBtB,CAAA;AAED,eAAO,MAAM,UAAU,EAAE,KAiBxB,CAAA;AAED,eAAO,MAAM,gBAAgB,EAAE,KAiB9B,CAAA"}
+{"version":3,"file":"Textarea.stories.d.ts","sourceRoot":"","sources":["../../../src/components/Textarea/Textarea.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAA;AAC3D,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAA;AAErC,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,QAAQ,CAyG/B,CAAA;AAED,eAAe,IAAI,CAAA;AACnB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,QAAQ,CAAC,CAAA;AAEtC,eAAO,MAAM,OAAO,EAAE,KAcrB,CAAA;AAED,eAAO,MAAM,gBAAgB,EAAE,KAgB9B,CAAA;AAED,eAAO,MAAM,MAAM,EAAE,KAgBpB,CAAA;AAED,eAAO,MAAM,KAAK,EAAE,KAiBnB,CAAA;AAED,eAAO,MAAM,QAAQ,EAAE,KAgBtB,CAAA;AAED,eAAO,MAAM,QAAQ,EAAE,KAgBtB,CAAA;AAED,eAAO,MAAM,UAAU,EAAE,KAiBxB,CAAA;AAED,eAAO,MAAM,oBAAoB,EAAE,KAiBlC,CAAA;AAED,eAAO,MAAM,gBAAgB,EAAE,KAiB9B,CAAA"}