@vkzstudio/muza-ui 1.0.35 → 1.0.36

package/dist/components/FileUpload/FileItem.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"FileItem.d.ts","sourceRoot":"","sources":["../../../src/components/FileUpload/FileItem.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AA8C9B,UAAU,iBAAiB;IACzB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,IAAI,CAAC,EAAE,IAAI,GAAG,MAAM,GAAG,IAAI,CAAA;IAC3B,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACtB,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACvB,sEAAsE;IACtE,aAAa,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC/B,QAAQ,EAAE,MAAM,IAAI,CAAA;IACpB,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,IAAI,CAAC,EAAE,IAAI,KAAK,IAAI,CAAA;CAC/C;AAED,UAAU,iBAAkB,SAAQ,iBAAiB;IACnD,MAAM,EAAE,MAAM,CAAA;IACd,IAAI,EAAE,IAAI,CAAA;CACX;AAED,UAAU,gBAAiB,SAAQ,iBAAiB;IAClD,MAAM,EAAE,KAAK,CAAA;IACb,GAAG,EAAE,MAAM,CAAA;IACX,IAAI,EAAE,MAAM,CAAA;IACZ,IAAI,CAAC,EAAE,MAAM,CAAA;CACd;AAED,KAAK,aAAa,GAAG,iBAAiB,GAAG,gBAAgB,CAAA;AAsEzD,eAAO,MAAM,QAAQ,GAAI,OAAO,aAAa,4CAmO5C,CAAA"}
+{"version":3,"file":"FileItem.d.ts","sourceRoot":"","sources":["../../../src/components/FileUpload/FileItem.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AA8C9B,UAAU,iBAAiB;IACzB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,IAAI,CAAC,EAAE,IAAI,GAAG,MAAM,GAAG,IAAI,CAAA;IAC3B,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACtB,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACvB,sEAAsE;IACtE,aAAa,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC/B,QAAQ,EAAE,MAAM,IAAI,CAAA;IACpB,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,IAAI,CAAC,EAAE,IAAI,KAAK,IAAI,CAAA;CAC/C;AAED,UAAU,iBAAkB,SAAQ,iBAAiB;IACnD,MAAM,EAAE,MAAM,CAAA;IACd,IAAI,EAAE,IAAI,CAAA;CACX;AAED,UAAU,gBAAiB,SAAQ,iBAAiB;IAClD,MAAM,EAAE,KAAK,CAAA;IACb,GAAG,EAAE,MAAM,CAAA;IACX,IAAI,EAAE,MAAM,CAAA;IACZ,IAAI,CAAC,EAAE,MAAM,CAAA;CACd;AAED,KAAK,aAAa,GAAG,iBAAiB,GAAG,gBAAgB,CAAA;AAsEzD,eAAO,MAAM,QAAQ,GAAI,OAAO,aAAa,4CAoO5C,CAAA"}

package/dist/components/FileUpload/FileItem.js

@@ -88,7 +88,7 @@ const D = (e, l, i) => {
     secondaryText: g,
     onDelete: y,
     onError: L
-  } = e, m = _(), [v, w] = p.useState(!1), N = e.source === "file" ? e.file.name : e.name, b = e.source === "url" ? (e.type ?? "").startsWith("image/") || A.test(e.name) : e.file.type.startsWith("image/"), T = e.source === "url" ? E.includes(e.type ?? "") || z.test(e.name) : E.includes(e.file.type) || z.test(e.file.name), d = e.source === "file" ? e.file : e.url, C = p.useMemo(() => o ? "disabled" : s ? "error" : typeof i == "number" && i > 0 ? "loading" : "default", [o, s, i]), x = p.useMemo(() => {
+  } = e, m = _(), [v, w] = p.useState(!1), N = e.source === "file" ? e.file.name : e.name, b = e.source === "url" ? (e.type ?? "").startsWith("image/") || A.test(e.name) : e.file.type.startsWith("image/"), T = e.source === "url" ? E.includes(e.type ?? "") || z.test(e.name) : E.includes(e.file.type) || z.test(e.file.name), d = e.source === "file" ? e.file : e.url, C = p.useMemo(() => o ? "disabled" : s ? "error" : typeof i == "number" && i > 0 && i < 100 ? "loading" : "default", [o, s, i]), x = p.useMemo(() => {
     if (b)
       return typeof d == "string" ? d : URL.createObjectURL(d);
   }, [b, d]);

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

@@ -1 +1 @@
-{"version":3,"file":"MultiSelect.d.ts","sourceRoot":"","sources":["../../../src/components/MultiSelect/MultiSelect.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EACZ,KAAK,SAAS,EAMf,MAAM,OAAO,CAAA;AAed;;GAEG;AACH,MAAM,WAAW,iBAAiB;IAChC,6CAA6C;IAC7C,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,yFAAyF;IACzF,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,yDAAyD;IACzD,KAAK,CAAC,EAAE,OAAO,CAAA;IACf,2DAA2D;IAC3D,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,+EAA+E;IAC/E,uBAAuB,CAAC,EAAE,OAAO,CAAA;IACjC,+EAA+E;IAC/E,MAAM,CAAC,EAAE,SAAS,CAAA;IAClB,4DAA4D;IAC5D,MAAM,CAAC,EAAE,SAAS,CAAA;IAClB,oGAAoG;IACpG,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,mDAAmD;IACnD,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,MAAM,GAAG,IAAI,CAAA;IAClC;;;;;;;;;OASG;IACH,OAAO,EAAE,KAAK,CAAC;QACb,KAAK,EAAE,MAAM,CAAA;QACb,KAAK,EAAE,SAAS,CAAA;QAChB,QAAQ,CAAC,EAAE,OAAO,CAAA;QAClB,IAAI,CAAC,EAAE,SAAS,CAAA;KACjB,CAAC,CAAA;IACF,yDAAyD;IACzD,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,kGAAkG;IAClG,sBAAsB,CAAC,EAAE,MAAM,CAAA;IAC/B,8DAA8D;IAC9D,KAAK,CAAC,EAAE,MAAM,EAAE,CAAA;IAChB,uFAAuF;IACvF,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,IAAI,CAAA;IACpC,6EAA6E;IAC7E,UAAU,CAAC,EAAE,SAAS,CAAA;IACtB,gHAAgH;IAChH,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,gHAAgH;IAChH,gBAAgB,CAAC,EAAE,MAAM,CAAA;CAC1B;AAED,eAAO,MAAM,WAAW,6FAqMvB,CAAA"}
+{"version":3,"file":"MultiSelect.d.ts","sourceRoot":"","sources":["../../../src/components/MultiSelect/MultiSelect.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EACZ,KAAK,SAAS,EAMf,MAAM,OAAO,CAAA;AAgBd;;GAEG;AACH,MAAM,WAAW,iBAAiB;IAChC,6CAA6C;IAC7C,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,yFAAyF;IACzF,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,yDAAyD;IACzD,KAAK,CAAC,EAAE,OAAO,CAAA;IACf,2DAA2D;IAC3D,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,+EAA+E;IAC/E,uBAAuB,CAAC,EAAE,OAAO,CAAA;IACjC,+EAA+E;IAC/E,MAAM,CAAC,EAAE,SAAS,CAAA;IAClB,4DAA4D;IAC5D,MAAM,CAAC,EAAE,SAAS,CAAA;IAClB,oGAAoG;IACpG,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,mDAAmD;IACnD,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,MAAM,GAAG,IAAI,CAAA;IAClC;;;;;;;;;OASG;IACH,OAAO,EAAE,KAAK,CAAC;QACb,KAAK,EAAE,MAAM,CAAA;QACb,KAAK,EAAE,SAAS,CAAA;QAChB,QAAQ,CAAC,EAAE,OAAO,CAAA;QAClB,IAAI,CAAC,EAAE,SAAS,CAAA;KACjB,CAAC,CAAA;IACF,yDAAyD;IACzD,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,kGAAkG;IAClG,sBAAsB,CAAC,EAAE,MAAM,CAAA;IAC/B,8DAA8D;IAC9D,KAAK,CAAC,EAAE,MAAM,EAAE,CAAA;IAChB,uFAAuF;IACvF,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,IAAI,CAAA;IACpC,6EAA6E;IAC7E,UAAU,CAAC,EAAE,SAAS,CAAA;IACtB,gHAAgH;IAChH,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,gHAAgH;IAChH,gBAAgB,CAAC,EAAE,MAAM,CAAA;CAC1B;AAED,eAAO,MAAM,WAAW,6FAiNvB,CAAA"}

package/dist/components/MultiSelect/MultiSelect.js

@@ -1,100 +1,121 @@
 import { jsx as r, jsxs as u } from "react/jsx-runtime";
-import f, { forwardRef as $, useId as P, useMemo as T, useRef as _, useEffect as B } from "react";
-import { triggerWrapperVariants as L } from "../Select/utils.js";
-import { useMuzaTranslations as U } from "../../translations/TranslationContext.js";
+import f, { forwardRef as P, useId as _, useMemo as T, useRef as B, useEffect as L } from "react";
+import { triggerWrapperVariants as U } from "../Select/utils.js";
+import { useMuzaTranslations as G } from "../../translations/TranslationContext.js";
 import { Tag as p } from "../Tag/Tag.js";
-import { FormField as G } from "../FormField/FormField.js";
-import { DropdownMenu as H, DropdownMenuTrigger as J, DropdownMenuContent as K, DropdownMenuCheckboxItem as Q } from "../DropdownMenu/DropdownMenu.js";
-import { Typography as X } from "../Typography/Typography.js";
-import { AltArrowUpOutline as Y } from "@solar-icons/react-perf";
-import { cn as Z } from "../../utils/cn.js";
-const ee = $(
+import { FormField as H } from "../FormField/FormField.js";
+import { DropdownMenu as J, DropdownMenuTrigger as K, DropdownMenuContent as Q, DropdownMenuCheckboxItem as X } from "../DropdownMenu/DropdownMenu.js";
+import { Typography as Y } from "../Typography/Typography.js";
+import { Flex as k } from "../Flex/Flex.js";
+import { AltArrowUpOutline as Z } from "@solar-icons/react-perf";
+import { cn as ee } from "../../utils/cn.js";
+const re = P(
   (I, h) => {
-    const z = U(), {
-      label: x,
-      hint: g,
+    const z = G(), {
+      label: g,
+      hint: x,
       error: b,
       options: o,
-      onChange: l,
+      onChange: i,
       value: t,
       disabled: c,
       prefix: d,
-      maxNumberOfVisibleTags: i = 2,
+      maxNumberOfVisibleTags: a = 2,
       size: D,
       placeholder: S,
-      required: v,
+      required: w,
       disableRequiredAsterisk: W,
-      labelExtra: k,
+      labelExtra: j,
       infoTooltip: A,
       collisionPadding: C
-    } = I, w = S ?? z.select.placeholder, N = P(), O = x ? `${N}-label` : void 0, j = g ? `${N}-hint` : void 0, M = T(() => new Map(o.map((e) => [e.value, e.label])), [o]), q = T(() => {
-      const e = t && t.map((n) => M.get(n));
-      return e != null && e.length ? e.length <= i ? /* @__PURE__ */ r("div", { className: "flex flex-1 items-start justify-start gap-xs", children: e.map((n, s) => /* @__PURE__ */ r(p, { variant: "info", className: "max-w-[72px]", children: n }, s)) }) : /* @__PURE__ */ r("div", { className: "flex flex-1 items-center gap-xs", children: [
-        ...e.slice(0, i).map((n, s) => /* @__PURE__ */ r(
-          p,
-          {
-            variant: "info",
-            className: "max-w-[72px] overflow-hidden",
-            children: /* @__PURE__ */ r("span", { className: "truncate", children: n })
-          },
-          s
-        )),
-        /* @__PURE__ */ u(p, { variant: "info", children: [
-          e.length - i,
-          "+"
-        ] }, "more")
-      ] }) : /* @__PURE__ */ r(
-        X,
+    } = I, v = S ?? z.select.placeholder, N = _(), F = g ? `${N}-label` : void 0, O = x ? `${N}-hint` : void 0, y = T(() => new Map(o.map((e) => [e.value, e.label])), [o]), q = T(() => {
+      const e = t && t.map((n) => y.get(n));
+      return e != null && e.length ? e.length <= a ? /* @__PURE__ */ r(
+        k,
+        {
+          gap: "xs",
+          justify: "start",
+          align: "start",
+          flex: 1,
+          className: "min-w-0",
+          children: e.map((n, s) => /* @__PURE__ */ r(p, { variant: "info", className: "min-w-[50px] shrink-1", children: n }, s))
+        }
+      ) : /* @__PURE__ */ r(
+        k,
+        {
+          gap: "xs",
+          justify: "start",
+          align: "start",
+          flex: 1,
+          className: "min-w-0",
+          children: [
+            ...e.slice(0, a).map((n, s) => /* @__PURE__ */ r(
+              p,
+              {
+                variant: "info",
+                className: "min-w-[50px] shrink-1 overflow-hidden",
+                children: /* @__PURE__ */ r("span", { className: "truncate", children: n })
+              },
+              s
+            )),
+            /* @__PURE__ */ u(p, { variant: "info", children: [
+              e.length - a,
+              "+"
+            ] }, "more")
+          ]
+        }
+      ) : /* @__PURE__ */ r(
+        Y,
         {
           size: "input",
           className: "grow-1 fix-y-text truncate text-left text-comp-select-text-placeholder",
           weight: "regular",
           component: "span",
-          children: w
+          children: v
         }
       );
-    }, [t, w, i, M]), [y, E] = f.useState(!1), [R, F] = f.useState(0), m = f.useRef(!1), V = _(null), a = (typeof h == "function" ? null : h) ?? V;
-    return B(() => {
+    }, [t, v, a, y]), [M, E] = f.useState(!1), [R, V] = f.useState(0), m = f.useRef(!1), $ = B(null), l = (typeof h == "function" ? null : h) ?? $;
+    return L(() => {
       const e = () => {
-        a.current && F(a.current.offsetWidth);
+        l.current && V(l.current.offsetWidth);
       };
       e();
       const n = new ResizeObserver(e);
-      return a.current && n.observe(a.current), () => {
+      return l.current && n.observe(l.current), () => {
         n.disconnect();
       };
-    }, [a]), /* @__PURE__ */ r(
-      G,
+    }, [l]), /* @__PURE__ */ r(
+      H,
       {
-        label: x,
-        hint: g,
+        label: g,
+        hint: x,
         error: b,
-        required: v,
+        required: w,
         disableRequiredAsterisk: W,
-        labelId: O,
-        hintId: j,
-        labelExtra: k,
+        labelId: F,
+        hintId: O,
+        labelExtra: j,
         infoTooltip: A,
         children: /* @__PURE__ */ u(
-          H,
+          J,
           {
             onOpenChange: (e) => {
               E(e);
             },
             children: [
-              /* @__PURE__ */ r(J, { disabled: c, asChild: !0, children: /* @__PURE__ */ r(
+              /* @__PURE__ */ r(K, { disabled: c, asChild: !0, children: /* @__PURE__ */ r(
                 "button",
                 {
-                  ref: a,
+                  ref: l,
                   type: "button",
                   role: "input",
                   tabIndex: 0,
                   disabled: c,
-                  "aria-required": v,
-                  className: L({
+                  "aria-required": w,
+                  className: U({
                     size: D,
                     error: b,
-                    expanded: y,
+                    expanded: M,
                     hasIcon: !!d || (t == null ? void 0 : t.length) === 0
                   }),
                   children: /* @__PURE__ */ u("div", { className: "flex min-w-0 flex-1 items-center gap-sm", children: [
@@ -107,11 +128,11 @@ const ee = $(
                     ),
                     q,
                     /* @__PURE__ */ r(
-                      Y,
+                      Z,
                       {
-                        className: Z(
-                          "transition-transform duration-200",
-                          y ? "rotate-0" : "rotate-180"
+                        className: ee(
+                          "shrink-0 transition-transform duration-200",
+                          M ? "rotate-0" : "rotate-180"
                         )
                       }
                     )
@@ -119,7 +140,7 @@ const ee = $(
                 }
               ) }),
               /* @__PURE__ */ r(
-                K,
+                Q,
                 {
                   className: "mt-1",
                   style: {
@@ -130,13 +151,13 @@ const ee = $(
                   },
                   collisionPadding: C,
                   children: o.map((e) => /* @__PURE__ */ r(
-                    Q,
+                    X,
                     {
                       checked: t == null ? void 0 : t.includes(e.value),
                       disabled: e.disabled,
                       icon: e.icon,
                       onCheckedChange: (n) => {
-                        n ? l == null || l([...t || [], e.value]) : l == null || l((t || []).filter((s) => s !== e.value)), m.current = !0;
+                        n ? i == null || i([...t || [], e.value]) : i == null || i((t || []).filter((s) => s !== e.value)), m.current = !0;
                       },
                       children: e.label
                     },
@@ -151,7 +172,7 @@ const ee = $(
     );
   }
 );
-ee.displayName = "MultiSelect";
+re.displayName = "MultiSelect";
 export {
-  ee as MultiSelect
+  re as MultiSelect
 };

package/dist/components/TextEditor/TextEditor.d.ts

@@ -135,6 +135,10 @@ export interface TextEditorProps {
     unstyled?: boolean;
     /** Additional class name for the TipTap editor element */
     editorClassName?: string;
+    /** Maximum character count. Blocks input past this limit and enables the counter when `showCharacterCount` is true. */
+    maxLength?: number;
+    /** Displays a character counter (currentCount/maxLength) in the label row. Requires `maxLength` to be set. @default false */
+    showCharacterCount?: boolean;
 }
 declare const TextEditor: import('react').ForwardRefExoticComponent<TextEditorProps & import('react').RefAttributes<TextEditorRef>>;
 export { TextEditor };

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

@@ -1 +1 @@
-{"version":3,"file":"TextEditor.d.ts","sourceRoot":"","sources":["../../../src/components/TextEditor/TextEditor.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"TextEditor.d.ts","sourceRoot":"","sources":["../../../src/components/TextEditor/TextEditor.tsx"],"names":[],"mappings":"AAAA,OAAO,EAEL,KAAK,SAAS,EAMf,MAAM,OAAO,CAAA;AACd,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,cAAc,CAAA;AAIhD,OAAO,EAAE,KAAK,MAAM,EAA4B,MAAM,eAAe,CAAA;AAWrE,gCAAgC;AAChC,KAAK,WAAW,GAAG,MAAM,GAAG,MAAM,CAAA;AAElC,+BAA+B;AAC/B,KAAK,YAAY,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,CAAA;AAE7B,wCAAwC;AACxC,KAAK,cAAc,GAAG,MAAM,GAAG,QAAQ,GAAG,eAAe,CAAA;AAEzD,6BAA6B;AAC7B,KAAK,QAAQ,GAAG,QAAQ,GAAG,SAAS,CAAA;AAEpC;;;;;;;;;;;;;;;;;GAiBG;AACH,MAAM,WAAW,uBAAuB;IACtC,sDAAsD;IACtD,OAAO,CAAC,EAAE,OAAO,GAAG,WAAW,EAAE,CAAA;IACjC,qDAAqD;IACrD,QAAQ,CAAC,EAAE,OAAO,GAAG,YAAY,EAAE,CAAA;IACnC,yEAAyE;IACzE,UAAU,CAAC,EAAE,OAAO,GAAG,cAAc,EAAE,CAAA;IACvC,wDAAwD;IACxD,KAAK,CAAC,EAAE,OAAO,GAAG,QAAQ,EAAE,CAAA;IAC5B,iFAAiF;IACjF,IAAI,CAAC,EAAE,OAAO,CAAA;IACd,kDAAkD;IAClD,eAAe,CAAC,EAAE,OAAO,CAAA;CAC1B;AAED;;;;;;;;;;;GAWG;AACH,MAAM,WAAW,aAAa;IAC5B,4CAA4C;IAC5C,MAAM,EAAE,MAAM,GAAG,IAAI,CAAA;IACrB,yBAAyB;IACzB,KAAK,EAAE,MAAM,IAAI,CAAA;IACjB,oCAAoC;IACpC,IAAI,EAAE,MAAM,IAAI,CAAA;IAChB,0CAA0C;IAC1C,OAAO,EAAE,MAAM,MAAM,CAAA;IACrB,gDAAgD;IAChD,OAAO,EAAE,MAAM,MAAM,CAAA;IACrB,gDAAgD;IAChD,OAAO,EAAE,MAAM,OAAO,CAAA;IACtB,+CAA+C;IAC/C,UAAU,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAA;CACnC;AAED;;GAEG;AACH,MAAM,WAAW,eAAe;IAC9B,6EAA6E;IAC7E,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,0CAA0C;IAC1C,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB;;;OAGG;IACH,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAA;IACjC,wCAAwC;IACxC,MAAM,CAAC,EAAE,MAAM,IAAI,CAAA;IACnB,wCAAwC;IACxC,OAAO,CAAC,EAAE,MAAM,IAAI,CAAA;IACpB,kDAAkD;IAClD,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,uCAAuC;IACvC,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,6CAA6C;IAC7C,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,8CAA8C;IAC9C,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,oDAAoD;IACpD,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,6CAA6C;IAC7C,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,gGAAgG;IAChG,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,+EAA+E;IAC/E,uBAAuB,CAAC,EAAE,OAAO,CAAA;IACjC,oFAAoF;IACpF,KAAK,CAAC,EAAE,MAAM,GAAG,OAAO,CAAA;IACxB;;;OAGG;IACH,OAAO,CAAC,EAAE,uBAAuB,CAAA;IACjC,4DAA4D;IAC5D,YAAY,CAAC,EAAE,SAAS,CAAA;IACxB;;;;;OAKG;IACH,UAAU,CAAC,EAAE,YAAY,EAAE,CAAA;IAC3B;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,6DAA6D;IAC7D,SAAS,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;IAC3B,+CAA+C;IAC/C,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,iDAAiD;IACjD,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,iDAAiD;IACjD,gBAAgB,CAAC,EAAE,MAAM,CAAA;IACzB,uGAAuG;IACvG,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,0DAA0D;IAC1D,eAAe,CAAC,EAAE,MAAM,CAAA;IACxB,uHAAuH;IACvH,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,6HAA6H;IAC7H,kBAAkB,CAAC,EAAE,OAAO,CAAA;CAC7B;AAwBD,QAAA,MAAM,UAAU,2GA6Qf,CAAA;AAID,OAAO,EAAE,UAAU,EAAE,CAAA"}

package/dist/components/TextEditor/TextEditor.js

@@ -1,17 +1,19 @@
-import { jsx as s, jsxs as k } from "react/jsx-runtime";
-import { forwardRef as O, useEffect as _, useImperativeHandle as $, useRef as I } from "react";
-import { Link as K } from "../../node_modules/@tiptap/extension-link/dist/index.js";
-import { Placeholder as W } from "../../node_modules/@tiptap/extension-placeholder/dist/index.js";
-import { useEditor as q, EditorContent as D } from "../../node_modules/@tiptap/react/dist/index.js";
-import { StarterKit as G } from "../../node_modules/@tiptap/starter-kit/dist/index.js";
-import { cva as J } from "class-variance-authority";
-import { EditorToolbar as Q } from "./EditorToolbar.js";
-import { LinkBubbleMenu as X } from "./LinkBubbleMenu.js";
-import { useLinkEditor as Y } from "./useLinkEditor.js";
-import { useMuzaTranslations as Z } from "../../translations/TranslationContext.js";
-import { FormField as tt } from "../FormField/FormField.js";
-import { cn as b } from "../../utils/cn.js";
-const et = J(
+import { jsxs as p, jsx as l } from "react/jsx-runtime";
+import { forwardRef as D, useState as G, useEffect as u, useImperativeHandle as J, useRef as Q } from "react";
+import { CharacterCount as X } from "../../node_modules/@tiptap/extension-character-count/dist/index.js";
+import { Link as Y } from "../../node_modules/@tiptap/extension-link/dist/index.js";
+import { Placeholder as Z } from "../../node_modules/@tiptap/extension-placeholder/dist/index.js";
+import { useEditor as tt, EditorContent as et } from "../../node_modules/@tiptap/react/dist/index.js";
+import { StarterKit as rt } from "../../node_modules/@tiptap/starter-kit/dist/index.js";
+import { cva as ot } from "class-variance-authority";
+import { EditorToolbar as nt } from "./EditorToolbar.js";
+import { LinkBubbleMenu as it } from "./LinkBubbleMenu.js";
+import { useLinkEditor as st } from "./useLinkEditor.js";
+import { useMuzaTranslations as lt } from "../../translations/TranslationContext.js";
+import { FormField as at } from "../FormField/FormField.js";
+import { cn as x } from "../../utils/cn.js";
+import { typographyVariants as ct } from "../Typography/Typography.js";
+const mt = ot(
   [
     "overflow-hidden rounded-xl border bg-surface-base-secondary transition-colors",
     "focus-within:border-comp-input-stroke-focused",
@@ -23,50 +25,52 @@ const et = J(
       state: {
         default: "border-comp-input-stroke-def hover:border-comp-input-stroke-hover",
         disabled: "cursor-not-allowed border-comp-input-stroke-disabled opacity-60",
-        error: "border-comp-input-stroke-error"
+        error: "border-comp-input-stroke-error-def"
       }
     },
     defaultVariants: {
       state: "default"
     }
   }
-), rt = O(
+), dt = D(
   ({
-    value: i,
-    defaultValue: g,
-    onChange: c,
-    onBlur: y,
-    onFocus: v,
-    placeholder: L = "",
-    label: E,
-    hint: T,
-    infoTooltip: C,
-    disabled: o = !1,
-    readOnly: d = !1,
-    required: M,
+    value: n,
+    defaultValue: v,
+    onChange: d,
+    onBlur: C,
+    onFocus: T,
+    placeholder: E = "",
+    label: L,
+    hint: M,
+    infoTooltip: w,
+    disabled: i = !1,
+    readOnly: f = !1,
+    required: z,
     disableRequiredAsterisk: H,
-    error: l,
-    toolbar: n = {},
-    toolbarExtra: f,
-    extensions: w = [],
-    minHeight: z = 200,
-    maxHeight: a,
-    resizable: P = !0,
-    className: R,
-    contentClassName: U,
+    error: a,
+    toolbar: s = {},
+    toolbarExtra: h,
+    extensions: N = [],
+    minHeight: R = 200,
+    maxHeight: c,
+    resizable: S = !0,
+    className: U,
+    contentClassName: V,
     unstyled: F = !1,
-    editorClassName: N
-  }, S) => {
-    const p = Z(), m = {
-      history: n.history ?? !0,
-      headings: n.headings ?? !0,
-      formatting: n.formatting ?? !0,
-      lists: n.lists ?? !0,
-      link: n.link ?? !0,
-      clearFormatting: n.clearFormatting ?? !0
-    }, V = !!f || Object.values(m).some((e) => e !== !1), t = q({
+    editorClassName: P,
+    maxLength: o,
+    showCharacterCount: j
+  }, A) => {
+    const k = lt(), [B, y] = G(0), m = {
+      history: s.history ?? !0,
+      headings: s.headings ?? !0,
+      formatting: s.formatting ?? !0,
+      lists: s.lists ?? !0,
+      link: s.link ?? !0,
+      clearFormatting: s.clearFormatting ?? !0
+    }, O = !!h || Object.values(m).some((e) => e !== !1), t = tt({
       extensions: [
-        G.configure({
+        rt.configure({
           heading: { levels: [1, 2, 3] },
           bulletList: {
             HTMLAttributes: { class: "list-disc ml-6" }
@@ -76,7 +80,7 @@ const et = J(
           }
         }),
         ...m.link ? [
-          K.configure({
+          Y.configure({
             openOnClick: !1,
             autolink: !0,
             linkOnPaste: !0,
@@ -86,22 +90,23 @@ const et = J(
             }
           })
         ] : [],
-        W.configure({
-          placeholder: ({ editor: e }) => e.state.doc.textContent.length === 0 ? L : ""
+        Z.configure({
+          placeholder: ({ editor: e }) => e.state.doc.textContent.length === 0 ? E : ""
         }),
-        ...w
+        ...o != null ? [X.configure({ limit: o, mode: "textSize" })] : [],
+        ...N
       ],
-      content: i ?? g ?? "",
-      editable: !o && !d,
+      content: n ?? v ?? "",
+      editable: !i && !f,
       onUpdate: ({ editor: e }) => {
-        const x = e.getText().trim(), h = e.getHTML();
-        c == null || c(x.length === 0 ? "" : h);
+        const b = e.getText().trim(), g = e.getHTML();
+        o != null && y(e.storage.characterCount.characters()), d == null || d(b.length === 0 ? "" : g);
       },
-      onBlur: y,
-      onFocus: v,
+      onBlur: C,
+      onFocus: T,
       editorProps: {
         attributes: {
-          class: b(
+          class: x(
             "outline-none text-sm",
             !F && [
               // Headings
@@ -123,7 +128,7 @@ const et = J(
             ],
             // Placeholder (only when the entire editor is empty — controlled via placeholder function)
             "[&_.is-empty]:before:content-[attr(data-placeholder)] [&_.is-empty]:before:text-comp-input-text-placeholder [&_.is-empty]:before:float-left [&_.is-empty]:before:h-0 [&_.is-empty]:before:pointer-events-none",
-            N
+            P
           ),
           // Inline styles needed because Tailwind CSS 4 JIT doesn't apply to dynamically created elements
           style: "width: 100%; min-height: 100%; max-width: none;",
@@ -132,15 +137,17 @@ const et = J(
         }
       }
     });
-    _(() => {
-      if (t && i !== void 0) {
+    u(() => {
+      if (t && n !== void 0) {
         const e = t.getHTML();
-        (i || "<p></p>") !== (e || "<p></p>") && t.commands.setContent(i, !1);
+        (n || "<p></p>") !== (e || "<p></p>") && t.commands.setContent(n, !1);
       }
-    }, [t, i]), _(() => {
-      t && t.setEditable(!o && !d);
-    }, [t, o, d]), $(
-      S,
+    }, [t, n]), u(() => {
+      t && t.setEditable(!i && !f);
+    }, [t, i, f]), u(() => {
+      t && o != null && y(t.storage.characterCount.characters());
+    }, [t, o, n]), J(
+      A,
       () => ({
         editor: t,
         focus: () => t == null ? void 0 : t.commands.focus(),
@@ -152,51 +159,75 @@ const et = J(
       }),
       [t]
     );
-    const r = Y(t), u = I(null), j = o ? "disabled" : l ? "error" : "default", A = typeof l == "string" ? l : void 0, B = {
-      minHeight: `${Math.max(z, 200)}px`,
-      maxHeight: a ? typeof a == "number" ? `${a}px` : a : void 0,
-      resize: P && !o ? "vertical" : "none"
+    const r = st(t), _ = Q(null), $ = i ? "disabled" : a ? "error" : "default", I = typeof a == "string" ? a : void 0, K = `${Math.max(R, 200)}px`, W = j && o != null ? /* @__PURE__ */ p(
+      "span",
+      {
+        className: x(
+          ct({
+            variant: "body",
+            weight: "regular",
+            size: "sm"
+          }),
+          "text-comp-input-text-secondary"
+        ),
+        children: [
+          B,
+          "/",
+          o
+        ]
+      }
+    ) : void 0, q = {
+      minHeight: K,
+      maxHeight: c ? typeof c == "number" ? `${c}px` : c : void 0,
+      resize: S && !i ? "vertical" : "none"
     };
-    return /* @__PURE__ */ s("div", { ref: u, children: /* @__PURE__ */ s(
-      tt,
+    return /* @__PURE__ */ l("div", { ref: _, children: /* @__PURE__ */ l(
+      at,
       {
-        label: E,
-        hint: A || T,
-        error: !!l,
-        required: M,
+        label: L,
+        hint: I || M,
+        error: !!a,
+        required: z,
         disableRequiredAsterisk: H,
-        className: R,
-        infoTooltip: C,
-        children: /* @__PURE__ */ k("div", { className: et({ state: j }), children: [
-          V && /* @__PURE__ */ s(
-            Q,
+        className: U,
+        infoTooltip: w,
+        labelRight: W,
+        children: /* @__PURE__ */ p("div", { className: mt({ state: $ }), children: [
+          O && /* @__PURE__ */ l(
+            nt,
             {
               editor: t,
               toolbarConfig: m,
-              disabled: o,
-              translations: p.textEditor,
+              disabled: i,
+              translations: k.textEditor,
               onLinkClick: r.handleLinkToolbarClick,
-              toolbarExtra: f
+              toolbarExtra: h
             }
           ),
-          /* @__PURE__ */ k(
+          /* @__PURE__ */ p(
             "div",
             {
-              className: b(
-                "relative overflow-auto px-2xl py-xl",
+              className: x(
+                "relative flex flex-col overflow-auto px-2xl py-xl",
                 "mr-[calc(var(--spacing-xl)/2)]",
                 "pr-[calc(var(--spacing-2xl)-var(--spacing-xl)/2)]",
                 // Compensate for scrollbar offset
-                U
+                V
               ),
-              style: B,
+              style: q,
               children: [
-                /* @__PURE__ */ s(D, { editor: t, className: "h-full w-full" }),
-                t && m.link && /* @__PURE__ */ s(
-                  X,
+                /* @__PURE__ */ l(
+                  et,
+                  {
+                    editor: t,
+                    className: "flex w-full flex-1 [&_div]:grow-1"
+                  }
+                ),
+                t && m.link && /* @__PURE__ */ l(
+                  it,
                   {
                     editor: t,
-                    containerRef: u,
+                    containerRef: _,
                     linkUrl: r.linkUrl,
                     isEditingLink: r.isEditingLink,
                     onUrlChange: r.setLinkUrl,
@@ -204,7 +235,7 @@ const et = J(
                     onSave: r.handleSaveLink,
                     onRemove: r.handleRemoveLink,
                     onCancel: r.handleCancelEdit,
-                    translations: p.textEditor
+                    translations: k.textEditor
                   }
                 )
               ]
@@ -215,7 +246,7 @@ const et = J(
     ) });
   }
 );
-rt.displayName = "TextEditor";
+dt.displayName = "TextEditor";
 export {
-  rt as TextEditor
+  dt as TextEditor
 };

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

@@ -4,6 +4,7 @@ declare const meta: Meta<typeof TextEditor>;
 export default meta;
 type Story = StoryObj<typeof TextEditor>;
 export declare const Default: Story;
+export declare const WithCharacterCounter: Story;
 export declare const Controlled: Story;
 export declare const WithFormIntegration: Story;
 export declare const AllStates: Story;

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

@@ -1 +1 @@
-{"version":3,"file":"TextEditor.stories.d.ts","sourceRoot":"","sources":["../../../src/components/TextEditor/TextEditor.stories.tsx"],"names":[],"mappings":"AAQA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAA;AAO3D,OAAO,EACL,UAAU,EAIX,MAAM,SAAS,CAAA;AAEhB,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,UAAU,CAgIjC,CAAA;AAED,eAAe,IAAI,CAAA;AACnB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,UAAU,CAAC,CAAA;AAGxC,eAAO,MAAM,OAAO,EAAE,KAerB,CAAA;AAGD,eAAO,MAAM,UAAU,EAAE,KA4BxB,CAAA;AAGD,eAAO,MAAM,mBAAmB,EAAE,KAmCjC,CAAA;AAGD,eAAO,MAAM,SAAS,EAAE,KA6DvB,CAAA;AAGD,eAAO,MAAM,kBAAkB,EAAE,KAsBhC,CAAA;AAGD,eAAO,MAAM,cAAc,EAAE,KAsB5B,CAAA;AAGD,eAAO,MAAM,gBAAgB,EAAE,KAsC9B,CAAA;AAGD,eAAO,MAAM,YAAY,EAAE,KAmC1B,CAAA;AAGD,eAAO,MAAM,mBAAmB,EAAE,KAsCjC,CAAA;AAqKD;;;;;;;;;;;;;GAaG;AACH,eAAO,MAAM,YAAY,EAAE,KAwD1B,CAAA;AAMD;;;;;;;;;;;;;;;;;GAiBG;AACH,eAAO,MAAM,mBAAmB,EAAE,KA0DjC,CAAA;AAGD,eAAO,MAAM,QAAQ,EAAE,KA6CtB,CAAA;AAGD,eAAO,MAAM,mBAAmB,EAAE,KA0CjC,CAAA"}
+{"version":3,"file":"TextEditor.stories.d.ts","sourceRoot":"","sources":["../../../src/components/TextEditor/TextEditor.stories.tsx"],"names":[],"mappings":"AAQA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAA;AAO3D,OAAO,EACL,UAAU,EAIX,MAAM,SAAS,CAAA;AAEhB,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,UAAU,CAgIjC,CAAA;AAED,eAAe,IAAI,CAAA;AACnB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,UAAU,CAAC,CAAA;AAGxC,eAAO,MAAM,OAAO,EAAE,KAerB,CAAA;AAED,eAAO,MAAM,oBAAoB,EAAE,KAgBlC,CAAA;AAGD,eAAO,MAAM,UAAU,EAAE,KA4BxB,CAAA;AAGD,eAAO,MAAM,mBAAmB,EAAE,KAmCjC,CAAA;AAGD,eAAO,MAAM,SAAS,EAAE,KA6DvB,CAAA;AAGD,eAAO,MAAM,kBAAkB,EAAE,KAsBhC,CAAA;AAGD,eAAO,MAAM,cAAc,EAAE,KAsB5B,CAAA;AAGD,eAAO,MAAM,gBAAgB,EAAE,KAsC9B,CAAA;AAGD,eAAO,MAAM,YAAY,EAAE,KAmC1B,CAAA;AAGD,eAAO,MAAM,mBAAmB,EAAE,KAsCjC,CAAA;AAqKD;;;;;;;;;;;;;GAaG;AACH,eAAO,MAAM,YAAY,EAAE,KAwD1B,CAAA;AAMD;;;;;;;;;;;;;;;;;GAiBG;AACH,eAAO,MAAM,mBAAmB,EAAE,KA0DjC,CAAA;AAGD,eAAO,MAAM,QAAQ,EAAE,KA6CtB,CAAA;AAGD,eAAO,MAAM,mBAAmB,EAAE,KA0CjC,CAAA"}

package/dist/components/Textarea/Textarea.js

@@ -49,7 +49,7 @@ const E = x(
       state: {
         default: "border-comp-input-stroke-def hover:border-comp-input-stroke-hover",
         disabled: "cursor-not-allowed border-comp-input-stroke-disabled bg-comp-input-fill-disabled",
-        error: "border-comp-input-stroke-error"
+        error: "border-comp-input-stroke-error-def"
       }
     },
     defaultVariants: {