@vkzstudio/muza-ui 1.0.35 → 1.0.37

package/dist/components/ReorderableTable/ReorderableTable.js

@@ -1,61 +1,62 @@
-import { jsx as e, jsxs as m } from "react/jsx-runtime";
-import { forwardRef as E } from "react";
-import { motion as n } from "../../node_modules/framer-motion/dist/es/render/components/motion/proxy.js";
-import { ReorderableGroup as D, ReorderableItem as R, ReorderableHandle as j } from "../Reorderable/Reorderable.js";
-import { Reorder as P } from "../Icons/CustomIcons.js";
+import { jsx as e, jsxs as h } from "react/jsx-runtime";
+import { forwardRef as S } from "react";
+import { motion as l } from "../../node_modules/framer-motion/dist/es/render/components/motion/proxy.js";
+import { ReorderableGroup as k, ReorderableItem as w, ReorderableHandle as z } from "../Reorderable/Reorderable.js";
+import { Reorder as G } from "../Icons/CustomIcons.js";
 import { cn as d } from "../../utils/cn.js";
-import { typographyVariants as S, Typography as z } from "../Typography/Typography.js";
-const p = 72, u = 20, G = 24, W = 4, K = ({
-  data: y,
-  onReorder: N,
-  onSync: g,
-  syncDelay: x,
-  onSyncPendingChange: L,
-  onDragStart: _,
-  onDragEnd: v,
-  columns: o,
-  showHeader: I = !1,
-  disabled: b = !1,
-  isRowDisabled: l,
-  className: T,
-  isMovable: s = !0,
-  animateItems: w = !1,
-  layout: A,
+import { typographyVariants as W, Typography as K } from "../Typography/Typography.js";
+const f = 72, N = 20, R = 24, U = 4, F = ({
+  data: g,
+  onReorder: x,
+  onSync: L,
+  syncDelay: v,
+  onSyncPendingChange: _,
+  onDragStart: I,
+  onDragEnd: T,
+  columns: c,
+  showHeader: A = !1,
+  disabled: u = !1,
+  isRowDisabled: m,
+  className: H,
+  isMovable: i = !0,
+  animateItems: O = !1,
+  layout: E,
+  onRowClick: n,
   ...C
-}, H) => /* @__PURE__ */ e("div", { className: "w-full", children: /* @__PURE__ */ m(
+}, j) => /* @__PURE__ */ e("div", { className: "w-full", children: /* @__PURE__ */ h(
   "table",
   {
-    ref: H,
+    ref: j,
     className: d(
       "-my-sm w-full border-separate border-spacing-y-sm",
-      T
+      H
     ),
     ...C,
     children: [
-      I && /* @__PURE__ */ e("thead", { children: /* @__PURE__ */ m("tr", { children: [
-        o.map((i, r) => /* @__PURE__ */ e(
+      A && /* @__PURE__ */ e("thead", { children: /* @__PURE__ */ h("tr", { children: [
+        c.map((o, a) => /* @__PURE__ */ e(
           "th",
           {
             className: d(
-              S({
+              W({
                 size: "sm",
                 uppercase: !0,
                 variant: "body",
                 weight: "medium"
               }),
               "px-comp-table-p text-left text-text-dark-secondary",
-              i.className
+              o.className
             ),
-            children: i.title
+            children: o.title
           },
-          r
+          a
         )),
         /* @__PURE__ */ e(
-          n.th,
+          l.th,
           {
             initial: !1,
             animate: {
-              width: s ? p : u
+              width: i ? f : N
             },
             transition: { duration: 0.3, ease: "easeInOut" },
             className: "overflow-hidden"
@@ -63,57 +64,65 @@ const p = 72, u = 20, G = 24, W = 4, K = ({
         )
       ] }) }),
       /* @__PURE__ */ e(
-        D,
+        k,
         {
-          values: y,
-          onReorder: N,
-          onSync: g,
-          syncDelay: x,
-          onSyncPendingChange: L,
-          onDragStart: _,
-          onDragEnd: v,
-          disabled: b,
-          animatePresence: w,
+          values: g,
+          onReorder: x,
+          onSync: L,
+          syncDelay: v,
+          onSyncPendingChange: _,
+          onDragStart: I,
+          onDragEnd: T,
+          disabled: u,
+          animatePresence: O,
           as: "tbody",
           className: "contents",
-          children: (i) => i.map((r, h) => {
-            const O = (l == null ? void 0 : l(r, h)) ?? !1, t = b || O;
-            return /* @__PURE__ */ m(
-              R,
+          children: (o) => o.map((a, p) => {
+            const D = (m == null ? void 0 : m(a, p)) ?? !1, t = u || D, b = !!n && !t;
+            return /* @__PURE__ */ h(
+              w,
               {
-                value: r,
+                value: a,
                 as: "tr",
-                layout: A,
+                layout: E,
                 disabled: t,
                 dragListenerDisabled: !0,
                 whileDrag: t ? void 0 : { boxShadow: "0 8px 32px 0 rgba(59, 18, 107, 0.2)" },
-                className: "group rounded-2xl",
+                onClick: b ? (r) => {
+                  if (!b) return;
+                  const s = r.target;
+                  s != null && s.closest("[data-reorder-handle]") || n == null || n(a, p);
+                } : void 0,
+                className: d(
+                  "group rounded-2xl",
+                  b && "cursor-pointer"
+                ),
                 children: [
-                  o.map((a, c) => {
-                    const k = c === 0, f = c === o.length - 1;
+                  c.map((r, s) => {
+                    const P = s === 0, y = s === c.length - 1;
                     return /* @__PURE__ */ e(
-                      n.td,
+                      l.td,
                       {
                         initial: !1,
-                        animate: f ? {
-                          paddingRight: s ? G : W
+                        animate: y ? {
+                          paddingRight: i ? R : U
                         } : void 0,
                         transition: { duration: 0.3, ease: "easeInOut" },
                         className: d(
                           "h-comp-table-h-def border-y border-stroke-base-secondary bg-surface-base-secondary align-middle",
-                          f ? "pl-comp-table-p" : "px-comp-table-p",
+                          y ? "pl-comp-table-p" : "px-comp-table-p",
                           {
-                            "rounded-l-xl border-l": k,
+                            "rounded-l-xl border-l": P,
                             "group-focus-within:border-icon-brand-focus group-hover:border-icon-brand-hover": !t
                           },
-                          a.className
+                          r.className
                         ),
-                        children: a.render ? a.render(
-                          r[a.dataKey],
-                          r,
-                          h
+                        children: r.render ? r.render(
+                          a[r.dataKey],
+                          a,
+                          p
                         ) : /* @__PURE__ */ e(
-                          z,
+                          K,
                           {
                             variant: "body",
                             size: "base",
@@ -122,50 +131,52 @@ const p = 72, u = 20, G = 24, W = 4, K = ({
                             className: d(
                               t && "text-text-dark-disabled",
                               {
-                                "line-clamp-1": a.lineClamp === !0 || a.lineClamp === 1,
-                                "line-clamp-2": a.lineClamp === 2
+                                "line-clamp-1": r.lineClamp === !0 || r.lineClamp === 1,
+                                "line-clamp-2": r.lineClamp === 2
                               }
                             ),
-                            children: r[a.dataKey]
+                            children: a[r.dataKey]
                           }
                         )
                       },
-                      c
+                      s
                     );
                   }),
                   /* @__PURE__ */ e(
-                    n.td,
+                    l.td,
                     {
+                      "data-reorder-handle": !0,
                       initial: !1,
                       animate: {
-                        width: s ? p : u
+                        width: i ? f : N
                       },
                       transition: { duration: 0.3, ease: "easeInOut" },
                       className: d(
                         "h-comp-table-h-def min-w-[20px] rounded-r-xl border-y border-r border-stroke-base-secondary bg-surface-base-secondary align-middle",
                         {
-                          "group-focus-within:border-icon-brand-focus group-hover:border-icon-brand-hover": !t
+                          "group-focus-within:border-icon-brand-focus group-hover:border-icon-brand-hover": !t,
+                          "cursor-default": !!n
                         }
                       ),
                       children: /* @__PURE__ */ e(
-                        n.div,
+                        l.div,
                         {
                           initial: !1,
                           animate: {
-                            opacity: s ? 1 : 0,
-                            width: s ? p : 0
+                            opacity: i ? 1 : 0,
+                            width: i ? f : 0
                           },
                           transition: { duration: 0.3, ease: "easeInOut" },
                           className: "flex h-full items-center justify-center overflow-hidden border-l border-stroke-base-secondary",
                           children: /* @__PURE__ */ e(
-                            j,
+                            z,
                             {
-                              disabled: !s || t,
+                              disabled: !i || t,
                               className: d(
                                 "flex h-comp-button-h-sm w-comp-button-w-sm items-center justify-center focus-visible-default",
                                 t ? "text-text-dark-disabled" : "text-text-brand-def"
                               ),
-                              children: /* @__PURE__ */ e(P, { className: "size-icon-default" })
+                              children: /* @__PURE__ */ e(G, { className: "size-icon-default" })
                             }
                           )
                         }
@@ -174,15 +185,15 @@ const p = 72, u = 20, G = 24, W = 4, K = ({
                   )
                 ]
               },
-              r.id
+              a.id
             );
           })
         }
       )
     ]
   }
-) }), U = E(K);
-U.displayName = "ReorderableTable";
+) }), V = S(F);
+V.displayName = "ReorderableTable";
 export {
-  U as ReorderableTable
+  V as ReorderableTable
 };

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

@@ -12,6 +12,7 @@ declare const meta: Meta<typeof ReorderableTable>;
 export default meta;
 type Story = StoryObj<typeof ReorderableTable<IBenefit>>;
 export declare const Default: Story;
+export declare const WithRowClick: Story;
 export declare const WithoutHeader: Story;
 export declare const WithDisabledRow: Story;
 export declare const AnimatedRows: Story;

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

@@ -1 +1 @@
-{"version":3,"file":"ReorderableTable.stories.d.ts","sourceRoot":"","sources":["../../../src/components/ReorderableTable/ReorderableTable.stories.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAA;AAM3D,OAAO,EACL,gBAAgB,EAEjB,MAAM,oBAAoB,CAAA;AAE3B,UAAU,QAAQ;IAChB,EAAE,EAAE,MAAM,CAAA;IACV,IAAI,EAAE,MAAM,CAAA;IACZ,KAAK,EAAE,MAAM,CAAA;IACb,UAAU,EAAE,MAAM,CAAA;IAClB,IAAI,EAAE,MAAM,CAAA;IACZ,MAAM,EAAE,QAAQ,GAAG,UAAU,CAAA;CAC9B;AAyCD,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,gBAAgB,CAiEvC,CAAA;AAED,eAAe,IAAI,CAAA;AACnB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,gBAAgB,CAAC,QAAQ,CAAC,CAAC,CAAA;AAExD,eAAO,MAAM,OAAO,EAAE,KAkHrB,CAAA;AAED,eAAO,MAAM,aAAa,EAAE,KAsG3B,CAAA;AAED,eAAO,MAAM,eAAe,EAAE,KA2G7B,CAAA;AAED,eAAO,MAAM,YAAY,EAAE,KA0H1B,CAAA;AAED,eAAO,MAAM,aAAa,EAAE,KAkG3B,CAAA;AAED,eAAO,MAAM,QAAQ,EAAE,KA4FtB,CAAA"}
+{"version":3,"file":"ReorderableTable.stories.d.ts","sourceRoot":"","sources":["../../../src/components/ReorderableTable/ReorderableTable.stories.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAA;AAc3D,OAAO,EACL,gBAAgB,EAEjB,MAAM,oBAAoB,CAAA;AAE3B,UAAU,QAAQ;IAChB,EAAE,EAAE,MAAM,CAAA;IACV,IAAI,EAAE,MAAM,CAAA;IACZ,KAAK,EAAE,MAAM,CAAA;IACb,UAAU,EAAE,MAAM,CAAA;IAClB,IAAI,EAAE,MAAM,CAAA;IACZ,MAAM,EAAE,QAAQ,GAAG,UAAU,CAAA;CAC9B;AAyCD,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,gBAAgB,CAoEvC,CAAA;AAED,eAAe,IAAI,CAAA;AACnB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,gBAAgB,CAAC,QAAQ,CAAC,CAAC,CAAA;AAExD,eAAO,MAAM,OAAO,EAAE,KAkHrB,CAAA;AAMD,eAAO,MAAM,YAAY,EAAE,KAuL1B,CAAA;AAED,eAAO,MAAM,aAAa,EAAE,KAsG3B,CAAA;AAED,eAAO,MAAM,eAAe,EAAE,KA2G7B,CAAA;AAED,eAAO,MAAM,YAAY,EAAE,KA0H1B,CAAA;AAED,eAAO,MAAM,aAAa,EAAE,KAkG3B,CAAA;AAED,eAAO,MAAM,QAAQ,EAAE,KA4FtB,CAAA"}

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":"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"}

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;