@vkzstudio/muza-ui 1.0.9 → 1.0.11

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

@@ -0,0 +1,134 @@
+import { ReactNode } from 'react';
+import { AnyExtension } from '@tiptap/core';
+import { Editor } from '@tiptap/react';
+/** History toolbar item type */
+type HistoryItem = 'undo' | 'redo';
+/** Heading level type (1-3) */
+type HeadingLevel = 1 | 2 | 3;
+/** Text formatting toolbar item type */
+type FormattingItem = 'bold' | 'italic' | 'strikethrough';
+/** List toolbar item type */
+type ListItem = 'bullet' | 'ordered';
+/**
+ * Configuration for the TextEditor toolbar.
+ * Each property can be:
+ * - `true` to show all items in the group
+ * - `false` to hide the entire group
+ * - An array of specific items to show
+ *
+ * @example
+ * // Show only undo (no redo), heading 2 and 3, and bold formatting
+ * const toolbar = {
+ *   history: ['undo'],
+ *   headings: [2, 3],
+ *   formatting: ['bold'],
+ *   lists: false,
+ *   link: true,
+ *   clearFormatting: false,
+ * }
+ */
+export interface TextEditorToolbarConfig {
+    /** Show history buttons (undo/redo). Default: true */
+    history?: boolean | HistoryItem[];
+    /** Show heading buttons (H1/H2/H3). Default: true */
+    headings?: boolean | HeadingLevel[];
+    /** Show formatting buttons (bold/italic/strikethrough). Default: true */
+    formatting?: boolean | FormattingItem[];
+    /** Show list buttons (bullet/ordered). Default: true */
+    lists?: boolean | ListItem[];
+    /** Show link button. When false, link pasting is also disabled. Default: true */
+    link?: boolean;
+    /** Show clear formatting button. Default: true */
+    clearFormatting?: boolean;
+}
+/**
+ * Ref handle for imperative TextEditor control.
+ *
+ * @example
+ * const editorRef = useRef<TextEditorRef>(null)
+ *
+ * // Focus the editor
+ * editorRef.current?.focus()
+ *
+ * // Get content
+ * const html = editorRef.current?.getHTML()
+ */
+export interface TextEditorRef {
+    /** The underlying TipTap editor instance */
+    editor: Editor | null;
+    /** Focuses the editor */
+    focus: () => void;
+    /** Removes focus from the editor */
+    blur: () => void;
+    /** Returns the current content as HTML */
+    getHTML: () => string;
+    /** Returns the current content as plain text */
+    getText: () => string;
+    /** Returns true if the editor has no content */
+    isEmpty: () => boolean;
+    /** Sets the editor content from HTML string */
+    setContent: (html: string) => void;
+}
+/**
+ * Props for the TextEditor component.
+ */
+export interface TextEditorProps {
+    /** Controlled value (HTML string). Use with onChange for controlled mode. */
+    value?: string;
+    /** Initial value for uncontrolled mode */
+    defaultValue?: string;
+    /**
+     * Fires when content changes. Receives empty string when editor is empty,
+     * otherwise HTML content.
+     */
+    onChange?: (html: string) => void;
+    /** Fires when the editor loses focus */
+    onBlur?: () => void;
+    /** Fires when the editor gains focus */
+    onFocus?: () => void;
+    /** Placeholder text shown when editor is empty */
+    placeholder?: string;
+    /** Label displayed above the editor */
+    label?: string;
+    /** Helper text displayed below the editor */
+    hint?: string;
+    /** Tooltip content shown next to the label */
+    infoTooltip?: string;
+    /** Disables editing and applies disabled styling */
+    disabled?: boolean;
+    /** Allows viewing but not editing content */
+    readOnly?: boolean;
+    /** Error state. String shows as error message, boolean only shows error styling. */
+    error?: string | boolean;
+    /**
+     * Toolbar configuration. See TextEditorToolbarConfig for options.
+     * @see TextEditorToolbarConfig
+     */
+    toolbar?: TextEditorToolbarConfig;
+    /** Additional content rendered at the end of the toolbar */
+    toolbarExtra?: ReactNode;
+    /**
+     * Additional TipTap extensions to add to the editor.
+     * @example
+     * import Mention from '@tiptap/extension-mention'
+     * <TextEditor extensions={[Mention.configure({ ... })]} />
+     */
+    extensions?: AnyExtension[];
+    /** Minimum height of the content area. Default: 200 */
+    minHeight?: number | string;
+    /** Maximum height of the content area (enables scrolling) */
+    maxHeight?: number | string;
+    /** Enables vertical resizing. Default: true */
+    resizable?: boolean;
+    /** Additional class name for the root element */
+    className?: string;
+    /** Additional class name for the content area */
+    contentClassName?: string;
+    /** Disables built-in content formatting styles (headings, paragraphs, lists, links). Default: false */
+    unstyled?: boolean;
+    /** Additional class name for the TipTap editor element */
+    editorClassName?: string;
+}
+declare const TextEditor: import('react').ForwardRefExoticComponent<TextEditorProps & import('react').RefAttributes<TextEditorRef>>;
+export { TextEditor };
+//# sourceMappingURL=TextEditor.d.ts.map

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

@@ -0,0 +1 @@
+{"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

@@ -0,0 +1,240 @@
+import { jsxs as l, jsx as e } from "react/jsx-runtime";
+import { forwardRef as R, useEffect as T, useImperativeHandle as I } from "react";
+import { Link as O } from "../../node_modules/@tiptap/extension-link/dist/index.js";
+import { Placeholder as $ } from "../../node_modules/@tiptap/extension-placeholder/dist/index.js";
+import { useEditor as K, EditorContent as W } from "../../node_modules/@tiptap/react/dist/index.js";
+import { StarterKit as Y } from "../../node_modules/@tiptap/starter-kit/dist/index.js";
+import { cva as q } from "class-variance-authority";
+import { EditorToolbar as D } from "./EditorToolbar.js";
+import { LinkBubbleMenu as G } from "./LinkBubbleMenu.js";
+import { useLinkEditor as J } from "./useLinkEditor.js";
+import { useMuzaTranslations as Q } from "../../translations/TranslationContext.js";
+import { Flex as L } from "../Flex/Flex.js";
+import { Typography as E } from "../Typography/Typography.js";
+import { cn as d } from "../../utils/cn.js";
+import { TooltipProvider as X, Tooltip as Z, TooltipTrigger as tt, TooltipContent as et } from "../Tooltip/Tooltip.js";
+import { InfoCircleBold as rt } from "@solar-icons/react-perf";
+const ot = q(
+  [
+    "overflow-hidden rounded-xl border bg-surface-base-secondary transition-colors",
+    "focus-within:border-comp-texteditor-stroke-focused",
+    "pb-[calc(var(--spacing-xl)/2)]"
+    // Offset scrollbar to make resize handle visible
+  ],
+  {
+    variants: {
+      state: {
+        default: "border-comp-texteditor-stroke-def hover:border-comp-texteditor-stroke-hover",
+        disabled: "cursor-not-allowed border-comp-texteditor-stroke-disabled opacity-60",
+        error: "border-comp-texteditor-stroke-error"
+      }
+    },
+    defaultVariants: {
+      state: "default"
+    }
+  }
+), it = R(
+  ({
+    value: s,
+    defaultValue: C,
+    onChange: p,
+    onBlur: w,
+    onFocus: M,
+    placeholder: z = "",
+    label: x,
+    hint: h,
+    infoTooltip: g,
+    disabled: i = !1,
+    readOnly: f = !1,
+    error: a,
+    toolbar: n = {},
+    toolbarExtra: k,
+    extensions: N = [],
+    minHeight: u = 200,
+    maxHeight: m,
+    resizable: H = !0,
+    className: U,
+    contentClassName: P,
+    unstyled: S = !1,
+    editorClassName: V
+  }, j) => {
+    const y = Q(), c = {
+      history: n.history ?? !0,
+      headings: n.headings ?? !0,
+      formatting: n.formatting ?? !0,
+      lists: n.lists ?? !0,
+      link: n.link ?? !0,
+      clearFormatting: n.clearFormatting ?? !0
+    }, A = !!k || Object.values(c).some((o) => o !== !1), t = K({
+      extensions: [
+        Y.configure({
+          heading: { levels: [1, 2, 3] },
+          bulletList: {
+            HTMLAttributes: { class: "list-disc ml-6" }
+          },
+          orderedList: {
+            HTMLAttributes: { class: "list-decimal ml-6" }
+          }
+        }),
+        ...c.link ? [
+          O.configure({
+            openOnClick: !1,
+            autolink: !0,
+            linkOnPaste: !0,
+            HTMLAttributes: {
+              target: "_blank",
+              rel: "noopener noreferrer"
+            }
+          })
+        ] : [],
+        $.configure({
+          placeholder: z
+        }),
+        ...N
+      ],
+      content: s ?? C ?? "",
+      editable: !i && !f,
+      onUpdate: ({ editor: o }) => {
+        const b = o.getText().trim(), v = o.getHTML();
+        p == null || p(b.length === 0 ? "" : v);
+      },
+      onBlur: w,
+      onFocus: M,
+      editorProps: {
+        attributes: {
+          class: d(
+            "outline-none text-sm",
+            !S && [
+              // Headings
+              "[&_h1]:text-3xl [&_h1]:font-semibold [&_h1]:text-text-dark-primary-def [&_h1]:my-3",
+              "[&_h2]:text-2xl [&_h2]:font-semibold [&_h2]:text-text-dark-primary-def [&_h2]:my-3",
+              "[&_h3]:text-xl [&_h3]:font-semibold [&_h3]:text-text-dark-primary-def [&_h3]:my-3",
+              // Paragraphs
+              "[&_p]:text-text-dark-primary-def [&_p]:my-2",
+              // Text formatting
+              "[&_strong]:text-text-dark-primary-def [&_strong]:font-semibold",
+              "[&_em]:text-text-dark-primary-def",
+              // Links
+              "[&_a]:text-text-brand-def [&_a]:underline",
+              // Lists
+              "[&_ul]:my-2 [&_ul]:ml-6 [&_ul]:list-disc",
+              "[&_ol]:my-2 [&_ol]:ml-6 [&_ol]:list-decimal",
+              "[&_li]:my-1",
+              "[&_hr]:my-3xl [&_hr]:border-stroke-base-secondary"
+            ],
+            // Placeholder (always applied)
+            "[&_.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",
+            V
+          ),
+          // Inline styles needed because Tailwind CSS 4 JIT doesn't apply to dynamically created elements
+          style: "width: 100%; min-height: 100%; max-width: none;",
+          role: "textbox",
+          "aria-multiline": "true"
+        }
+      }
+    });
+    T(() => {
+      if (t && s !== void 0) {
+        const o = t.getHTML();
+        (s || "<p></p>") !== (o || "<p></p>") && t.commands.setContent(s, !1);
+      }
+    }, [t, s]), T(() => {
+      t && t.setEditable(!i && !f);
+    }, [t, i, f]), I(
+      j,
+      () => ({
+        editor: t,
+        focus: () => t == null ? void 0 : t.commands.focus(),
+        blur: () => t == null ? void 0 : t.commands.blur(),
+        getHTML: () => (t == null ? void 0 : t.getHTML()) ?? "",
+        getText: () => (t == null ? void 0 : t.getText()) ?? "",
+        isEmpty: () => (t == null ? void 0 : t.isEmpty) ?? !0,
+        setContent: (o) => t == null ? void 0 : t.commands.setContent(o)
+      }),
+      [t]
+    );
+    const r = J(t), B = i ? "disabled" : a ? "error" : "default", _ = typeof a == "string" ? a : void 0, F = {
+      minHeight: typeof u == "number" ? `${u}px` : u,
+      maxHeight: m ? typeof m == "number" ? `${m}px` : m : void 0,
+      resize: H && !i ? "vertical" : "none"
+    };
+    return /* @__PURE__ */ l(L, { direction: "column", className: d("gap-comp-input-gap", U), children: [
+      x && /* @__PURE__ */ l(L, { align: "center", gap: "2xs", children: [
+        /* @__PURE__ */ e(
+          E,
+          {
+            component: "label",
+            weight: "regular",
+            size: "sm",
+            className: "text-comp-select-text-primary",
+            fixY: !0,
+            children: x
+          }
+        ),
+        g && /* @__PURE__ */ e(X, { children: /* @__PURE__ */ l(Z, { children: [
+          /* @__PURE__ */ e(tt, { asChild: !0, children: /* @__PURE__ */ e(rt, { className: "cursor-help text-comp-info-ico-def hover:text-comp-info-ico-hover" }) }),
+          /* @__PURE__ */ e(et, { children: g })
+        ] }) })
+      ] }),
+      /* @__PURE__ */ l("div", { className: ot({ state: B }), children: [
+        A && /* @__PURE__ */ e(
+          D,
+          {
+            editor: t,
+            toolbarConfig: c,
+            disabled: i,
+            translations: y.textEditor,
+            onLinkClick: r.handleLinkToolbarClick,
+            toolbarExtra: k
+          }
+        ),
+        /* @__PURE__ */ l(
+          "div",
+          {
+            className: d(
+              "relative 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
+              P
+            ),
+            style: F,
+            children: [
+              /* @__PURE__ */ e(W, { editor: t, className: "h-full w-full" }),
+              t && c.link && /* @__PURE__ */ e(
+                G,
+                {
+                  editor: t,
+                  linkUrl: r.linkUrl,
+                  isEditingLink: r.isEditingLink,
+                  onUrlChange: r.setLinkUrl,
+                  onEdit: r.handleOpenLinkEdit,
+                  onSave: r.handleSaveLink,
+                  onRemove: r.handleRemoveLink,
+                  onCancel: r.handleCancelEdit,
+                  translations: y.textEditor
+                }
+              )
+            ]
+          }
+        )
+      ] }),
+      (h || _) && /* @__PURE__ */ e(
+        E,
+        {
+          component: "span",
+          size: "sm",
+          weight: "regular",
+          className: d("text-comp-select-text-secondary", {
+            "text-comp-input-text-error": a
+          }),
+          children: _ || h
+        }
+      )
+    ] });
+  }
+);
+it.displayName = "TextEditor";
+export {
+  it as TextEditor
+};

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

@@ -0,0 +1,51 @@
+import { Meta, StoryObj } from '@storybook/react-vite';
+import { TextEditor } from './index';
+declare const meta: Meta<typeof TextEditor>;
+export default meta;
+type Story = StoryObj<typeof TextEditor>;
+export declare const Default: Story;
+export declare const Controlled: Story;
+export declare const WithFormIntegration: Story;
+export declare const AllStates: Story;
+export declare const WithExampleContent: Story;
+export declare const ReducedToolbar: Story;
+export declare const WithToolbarExtra: Story;
+export declare const CustomSizing: Story;
+export declare const WithCustomHighlight: Story;
+/**
+ * Demonstrates how to extend the TextEditor with TipTap extensions.
+ *
+ * This example uses the Mention extension to allow @-mentions in the editor.
+ * Type @ followed by a name to see the mention suggestions.
+ *
+ * **Note for consumers:** To use the Mention extension, install:
+ * ```bash
+ * npm install @tiptap/extension-mention @tiptap/suggestion tippy.js
+ * ```
+ *
+ * The TextEditor accepts an `extensions` prop, allowing you to add
+ * any TipTap extension to extend its functionality.
+ */
+export declare const WithMentions: Story;
+/**
+ * Demonstrates how to re-create the editor when extensions depend on async data.
+ *
+ * TipTap's `useEditor` creates the editor once on mount. If extensions are built
+ * from data fetched after mount (e.g. mention user lists from an API), the editor
+ * won't pick them up. Use React's `key` prop to force a clean unmount/remount
+ * when the data arrives.
+ *
+ * **Note:** TipTap's `useEditor` accepts a `deps` array, but using it causes a
+ * DOM conflict (`insertBefore` error) because TipTap imperatively removes DOM
+ * nodes that React still references during reconciliation. The `key` approach
+ * avoids this entirely — React does a clean teardown before mounting the new instance.
+ *
+ * **Steps to verify:**
+ * 1. Type some text in the editor
+ * 2. Click "Load mentions" — editor remounts cleanly without errors
+ * 3. Type @ to see the loaded mention suggestions
+ */
+export declare const WithAsyncExtensions: Story;
+export declare const Unstyled: Story;
+export declare const ToolbarButtonStates: Story;
+//# sourceMappingURL=TextEditor.stories.d.ts.map

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

@@ -0,0 +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,CAmKjC,CAAA;AAED,eAAe,IAAI,CAAA;AACnB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,UAAU,CAAC,CAAA;AAGxC,eAAO,MAAM,OAAO,EAAE,KAOrB,CAAA;AAGD,eAAO,MAAM,UAAU,EAAE,KAsBxB,CAAA;AAGD,eAAO,MAAM,mBAAmB,EAAE,KA6BjC,CAAA;AAGD,eAAO,MAAM,SAAS,EAAE,KAqDvB,CAAA;AAGD,eAAO,MAAM,kBAAkB,EAAE,KAchC,CAAA;AAGD,eAAO,MAAM,cAAc,EAAE,KAgB5B,CAAA;AAGD,eAAO,MAAM,gBAAgB,EAAE,KAgC9B,CAAA;AAGD,eAAO,MAAM,YAAY,EAAE,KA8B1B,CAAA;AAGD,eAAO,MAAM,mBAAmB,EAAE,KAgCjC,CAAA;AAqKD;;;;;;;;;;;;;GAaG;AACH,eAAO,MAAM,YAAY,EAAE,KAmD1B,CAAA;AAMD;;;;;;;;;;;;;;;;;GAiBG;AACH,eAAO,MAAM,mBAAmB,EAAE,KAqDjC,CAAA;AAGD,eAAO,MAAM,QAAQ,EAAE,KA6CtB,CAAA;AAGD,eAAO,MAAM,mBAAmB,EAAE,KAkCjC,CAAA"}

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

@@ -0,0 +1,38 @@
+import { ButtonHTMLAttributes, ReactNode } from 'react';
+import { VariantProps } from 'class-variance-authority';
+/** Style variants for the ToolbarButton component */
+declare const toolbarButtonVariants: (props?: ({
+    state?: "default" | "disabled" | "active" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+/**
+ * Props for the ToolbarButton component.
+ */
+export interface ToolbarButtonProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'children'>, VariantProps<typeof toolbarButtonVariants> {
+    /** Icon element to display in the button */
+    icon: ReactNode;
+    /** Whether the button is in active/pressed state */
+    active?: boolean;
+    /** Accessible label for the button (also used as default tooltip) */
+    label: string;
+    /** Custom tooltip content. Falls back to label if not provided. */
+    tooltip?: string;
+    /** Shows tooltip on hover. Default: true */
+    showTooltip?: boolean;
+}
+/**
+ * Icon button for the TextEditor toolbar.
+ *
+ * Displays an icon with tooltip and supports active/disabled states.
+ * Can be used to extend the toolbar via the `toolbarExtra` prop.
+ *
+ * @example
+ * <ToolbarButton
+ *   icon={<MyIcon />}
+ *   label="Custom Action"
+ *   onClick={handleClick}
+ *   active={isActive}
+ * />
+ */
+declare const ToolbarButton: import('react').ForwardRefExoticComponent<ToolbarButtonProps & import('react').RefAttributes<HTMLButtonElement>>;
+export { ToolbarButton, toolbarButtonVariants };
+//# sourceMappingURL=ToolbarButton.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ToolbarButton.d.ts","sourceRoot":"","sources":["../../../src/components/TextEditor/ToolbarButton.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,oBAAoB,EAAE,KAAK,SAAS,EAAc,MAAM,OAAO,CAAA;AAC7E,OAAO,EAAE,KAAK,YAAY,EAAO,MAAM,0BAA0B,CAAA;AASjE,qDAAqD;AACrD,QAAA,MAAM,qBAAqB;;8EA2B1B,CAAA;AAED;;GAEG;AACH,MAAM,WAAW,kBACf,SAAQ,IAAI,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,EAAE,UAAU,CAAC,EAC/D,YAAY,CAAC,OAAO,qBAAqB,CAAC;IAC5C,4CAA4C;IAC5C,IAAI,EAAE,SAAS,CAAA;IACf,oDAAoD;IACpD,MAAM,CAAC,EAAE,OAAO,CAAA;IAChB,qEAAqE;IACrE,KAAK,EAAE,MAAM,CAAA;IACb,mEAAmE;IACnE,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,4CAA4C;IAC5C,WAAW,CAAC,EAAE,OAAO,CAAA;CACtB;AAED;;;;;;;;;;;;;GAaG;AACH,QAAA,MAAM,aAAa,kHA4ClB,CAAA;AAID,OAAO,EAAE,aAAa,EAAE,qBAAqB,EAAE,CAAA"}

package/dist/components/TextEditor/ToolbarButton.js

@@ -0,0 +1,68 @@
+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";
+const v = u(
+  [
+    "flex shrink-0 items-center justify-center",
+    "size-comp-texteditor-ico-bg-size rounded-sm",
+    "[&>svg]:size-icon-xsmall",
+    "cursor-pointer transition-colors",
+    "disabled:cursor-not-allowed"
+  ],
+  {
+    variants: {
+      state: {
+        default: [
+          "bg-comp-texteditor-bg-def text-comp-texteditor-ico-def",
+          "hover:bg-comp-texteditor-bg-hover hover:text-comp-texteditor-ico-hover"
+        ],
+        active: [
+          "bg-comp-texteditor-bg-focused text-comp-texteditor-ico-focused"
+        ],
+        disabled: [
+          "bg-comp-texteditor-bg-disabled text-comp-texteditor-ico-disabled"
+        ]
+      }
+    },
+    defaultVariants: {
+      state: "default"
+    }
+  }
+), T = p(
+  ({
+    className: s,
+    icon: a,
+    active: e,
+    disabled: o,
+    label: r,
+    tooltip: d,
+    showTooltip: c = !0,
+    ...n
+  }, l) => {
+    const i = /* @__PURE__ */ t(
+      "button",
+      {
+        type: "button",
+        ref: l,
+        className: h(v({ state: o ? "disabled" : e ? "active" : "default", className: s })),
+        disabled: o,
+        "aria-label": r,
+        "aria-pressed": e,
+        "aria-disabled": o,
+        ...n,
+        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 })
+    ] }) }) : i;
+  }
+);
+T.displayName = "ToolbarButton";
+export {
+  T as ToolbarButton,
+  v as toolbarButtonVariants
+};

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

@@ -0,0 +1,22 @@
+import { HTMLAttributes } from 'react';
+/** Props for the ToolbarSeparator component */
+export type ToolbarSeparatorProps = HTMLAttributes<HTMLDivElement>;
+/**
+ * Vertical separator for the TextEditor toolbar.
+ *
+ * Use between toolbar button groups to visually separate different actions.
+ * Can be used in custom toolbar extensions via the `toolbarExtra` prop.
+ *
+ * @example
+ * <TextEditor
+ *   toolbarExtra={
+ *     <>
+ *       <ToolbarSeparator />
+ *       <ToolbarButton icon={<MyIcon />} label="Custom" />
+ *     </>
+ *   }
+ * />
+ */
+declare const ToolbarSeparator: import('react').ForwardRefExoticComponent<ToolbarSeparatorProps & import('react').RefAttributes<HTMLDivElement>>;
+export { ToolbarSeparator };
+//# sourceMappingURL=ToolbarSeparator.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ToolbarSeparator.d.ts","sourceRoot":"","sources":["../../../src/components/TextEditor/ToolbarSeparator.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,cAAc,EAAc,MAAM,OAAO,CAAA;AAGvD,+CAA+C;AAC/C,MAAM,MAAM,qBAAqB,GAAG,cAAc,CAAC,cAAc,CAAC,CAAA;AAElE;;;;;;;;;;;;;;;GAeG;AACH,QAAA,MAAM,gBAAgB,kHAgBrB,CAAA;AAID,OAAO,EAAE,gBAAgB,EAAE,CAAA"}

package/dist/components/TextEditor/ToolbarSeparator.js

@@ -0,0 +1,23 @@
+import { jsx as e } from "react/jsx-runtime";
+import { forwardRef as t } from "react";
+import { cn as i } from "../../utils/cn.js";
+const p = t(
+  ({ className: r, ...o }, a) => /* @__PURE__ */ e(
+    "div",
+    {
+      ref: a,
+      className: i(
+        "w-px bg-stroke-base-secondary",
+        "h-comp-texteditor-ico-bg-size",
+        r
+      ),
+      role: "separator",
+      "aria-orientation": "vertical",
+      ...o
+    }
+  )
+);
+p.displayName = "ToolbarSeparator";
+export {
+  p as ToolbarSeparator
+};

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

@@ -0,0 +1,4 @@
+export { TextEditor, type TextEditorProps, type TextEditorRef, type TextEditorToolbarConfig, } from './TextEditor';
+export { ToolbarButton, toolbarButtonVariants, type ToolbarButtonProps, } from './ToolbarButton';
+export { ToolbarSeparator, type ToolbarSeparatorProps, } from './ToolbarSeparator';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/TextEditor/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,UAAU,EACV,KAAK,eAAe,EACpB,KAAK,aAAa,EAClB,KAAK,uBAAuB,GAC7B,MAAM,cAAc,CAAA;AACrB,OAAO,EACL,aAAa,EACb,qBAAqB,EACrB,KAAK,kBAAkB,GACxB,MAAM,iBAAiB,CAAA;AACxB,OAAO,EACL,gBAAgB,EAChB,KAAK,qBAAqB,GAC3B,MAAM,oBAAoB,CAAA"}

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

@@ -0,0 +1,37 @@
+import { Editor } from '@tiptap/react';
+/**
+ * Return type for the useLinkEditor hook.
+ */
+export interface UseLinkEditorReturn {
+    /** Current URL being edited */
+    linkUrl: string;
+    /** Sets the URL value */
+    setLinkUrl: (url: string) => void;
+    /** Whether the link edit input is visible */
+    isEditingLink: boolean;
+    /** Sets the editing state */
+    setIsEditingLink: (editing: boolean) => void;
+    /** Opens the link edit input with the current link's URL */
+    handleOpenLinkEdit: () => void;
+    /** Saves the current URL to the selected text */
+    handleSaveLink: () => void;
+    /** Removes the link from the selected text */
+    handleRemoveLink: () => void;
+    /** Cancels editing — removes the link if it was newly created with an empty href */
+    handleCancelEdit: () => void;
+    /** Handles toolbar link button click - opens edit for existing links or creates new */
+    handleLinkToolbarClick: () => void;
+}
+/**
+ * Hook for managing link editing state and actions in the TextEditor.
+ *
+ * Handles the link bubble menu interactions including opening the edit input,
+ * saving links, and removing links from selected text.
+ *
+ * @param editor - The TipTap editor instance
+ * @returns Object containing link state and handler functions
+ *
+ * @internal
+ */
+export declare const useLinkEditor: (editor: Editor | null) => UseLinkEditorReturn;
+//# sourceMappingURL=useLinkEditor.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"useLinkEditor.d.ts","sourceRoot":"","sources":["../../../src/components/TextEditor/useLinkEditor.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,eAAe,CAAA;AAE3C;;GAEG;AACH,MAAM,WAAW,mBAAmB;IAClC,+BAA+B;IAC/B,OAAO,EAAE,MAAM,CAAA;IACf,yBAAyB;IACzB,UAAU,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,IAAI,CAAA;IACjC,6CAA6C;IAC7C,aAAa,EAAE,OAAO,CAAA;IACtB,6BAA6B;IAC7B,gBAAgB,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,IAAI,CAAA;IAC5C,4DAA4D;IAC5D,kBAAkB,EAAE,MAAM,IAAI,CAAA;IAC9B,iDAAiD;IACjD,cAAc,EAAE,MAAM,IAAI,CAAA;IAC1B,8CAA8C;IAC9C,gBAAgB,EAAE,MAAM,IAAI,CAAA;IAC5B,oFAAoF;IACpF,gBAAgB,EAAE,MAAM,IAAI,CAAA;IAC5B,uFAAuF;IACvF,sBAAsB,EAAE,MAAM,IAAI,CAAA;CACnC;AAED;;;;;;;;;;GAUG;AACH,eAAO,MAAM,aAAa,GAAI,QAAQ,MAAM,GAAG,IAAI,KAAG,mBAgErD,CAAA"}