@dooherceg/tiptap-controlled-editor-with-table 0.0.1

package/dist/components/tiptap-ui/mark-button/mark-button.js

@@ -0,0 +1,74 @@
+import { jsx as t, jsxs as x, Fragment as y } from "react/jsx-runtime";
+import { forwardRef as K, useCallback as S } from "react";
+import { parseShortcutKeys as T } from "../../../lib/tiptap-utils.js";
+import { useTiptapEditor as C } from "../../../hooks/use-tiptap-editor.js";
+import { useMark as N, MARK_SHORTCUT_KEYS as R } from "./use-mark.js";
+import { Button as j } from "../../tiptap-ui-primitive/button/button.js";
+import { Badge as v } from "../../tiptap-ui-primitive/badge/badge.js";
+function A({
+  type: a,
+  shortcutKeys: r = R[a]
+}) {
+  return /* @__PURE__ */ t(v, { children: T({ shortcutKeys: r }) });
+}
+const E = K(
+  ({
+    editor: a,
+    type: r,
+    text: e,
+    hideWhenUnavailable: c = !1,
+    onToggled: u,
+    showShortcut: p = !1,
+    onClick: o,
+    children: m,
+    ...f
+  }, b) => {
+    const { editor: h } = C(a), {
+      isVisible: k,
+      handleMark: i,
+      label: s,
+      canToggle: n,
+      isActive: l,
+      Icon: g,
+      shortcutKeys: M
+    } = N({
+      editor: h,
+      type: r,
+      hideWhenUnavailable: c,
+      onToggled: u
+    }), B = S(
+      (d) => {
+        o?.(d), !d.defaultPrevented && i();
+      },
+      [i, o]
+    );
+    return k ? /* @__PURE__ */ t(
+      j,
+      {
+        type: "button",
+        disabled: !n,
+        "data-style": "ghost",
+        "data-active-state": l ? "on" : "off",
+        "data-disabled": !n,
+        role: "button",
+        tabIndex: -1,
+        "aria-label": s,
+        "aria-pressed": l,
+        tooltip: s,
+        onClick: B,
+        ...f,
+        ref: b,
+        children: m ?? /* @__PURE__ */ x(y, { children: [
+          /* @__PURE__ */ t(g, { className: "tiptap-button-icon" }),
+          e && /* @__PURE__ */ t("span", { className: "tiptap-button-text", children: e }),
+          p && /* @__PURE__ */ t(A, { type: r, shortcutKeys: M })
+        ] })
+      }
+    ) : null;
+  }
+);
+E.displayName = "MarkButton";
+export {
+  E as MarkButton,
+  A as MarkShortcutBadge
+};

package/dist/components/tiptap-ui/mark-button/use-mark.d.ts

@@ -0,0 +1,104 @@
+import { Editor } from '@tiptap/react';
+export type Mark = "bold" | "italic" | "strike" | "code" | "underline" | "superscript" | "subscript";
+/**
+ * Configuration for the mark functionality
+ */
+export interface UseMarkConfig {
+    /**
+     * The Tiptap editor instance.
+     */
+    editor?: Editor | null;
+    /**
+     * The type of mark to toggle
+     */
+    type: Mark;
+    /**
+     * Whether the button should hide when mark is not available.
+     * @default false
+     */
+    hideWhenUnavailable?: boolean;
+    /**
+     * Callback function called after a successful mark toggle.
+     */
+    onToggled?: () => void;
+}
+export declare const markIcons: {
+    bold: import('react').MemoExoticComponent<({ className, ...props }: React.SVGProps<SVGSVGElement>) => import("react/jsx-runtime").JSX.Element>;
+    italic: import('react').MemoExoticComponent<({ className, ...props }: React.SVGProps<SVGSVGElement>) => import("react/jsx-runtime").JSX.Element>;
+    underline: import('react').MemoExoticComponent<({ className, ...props }: React.SVGProps<SVGSVGElement>) => import("react/jsx-runtime").JSX.Element>;
+    strike: import('react').MemoExoticComponent<({ className, ...props }: React.SVGProps<SVGSVGElement>) => import("react/jsx-runtime").JSX.Element>;
+    code: import('react').MemoExoticComponent<({ className, ...props }: React.SVGProps<SVGSVGElement>) => import("react/jsx-runtime").JSX.Element>;
+    superscript: import('react').MemoExoticComponent<({ className, ...props }: React.SVGProps<SVGSVGElement>) => import("react/jsx-runtime").JSX.Element>;
+    subscript: import('react').MemoExoticComponent<({ className, ...props }: React.SVGProps<SVGSVGElement>) => import("react/jsx-runtime").JSX.Element>;
+};
+export declare const MARK_SHORTCUT_KEYS: Record<Mark, string>;
+/**
+ * Checks if a mark can be toggled in the current editor state
+ */
+export declare function canToggleMark(editor: Editor | null, type: Mark): boolean;
+/**
+ * Checks if a mark is currently active
+ */
+export declare function isMarkActive(editor: Editor | null, type: Mark): boolean;
+/**
+ * Toggles a mark in the editor
+ */
+export declare function toggleMark(editor: Editor | null, type: Mark): boolean;
+/**
+ * Determines if the mark button should be shown
+ */
+export declare function shouldShowButton(props: {
+    editor: Editor | null;
+    type: Mark;
+    hideWhenUnavailable: boolean;
+}): boolean;
+/**
+ * Gets the formatted mark name
+ */
+export declare function getFormattedMarkName(type: Mark): string;
+/**
+ * Custom hook that provides mark functionality for Tiptap editor
+ *
+ * @example
+ * ```tsx
+ * // Simple usage
+ * function MySimpleBoldButton() {
+ *   const { isVisible, handleMark } = useMark({ type: "bold" })
+ *
+ *   if (!isVisible) return null
+ *
+ *   return <button onClick={handleMark}>Bold</button>
+ * }
+ *
+ * // Advanced usage with configuration
+ * function MyAdvancedItalicButton() {
+ *   const { isVisible, handleMark, label, isActive } = useMark({
+ *     editor: myEditor,
+ *     type: "italic",
+ *     hideWhenUnavailable: true,
+ *     onToggled: () => console.log('Mark toggled!')
+ *   })
+ *
+ *   if (!isVisible) return null
+ *
+ *   return (
+ *     <MyButton
+ *       onClick={handleMark}
+ *       aria-pressed={isActive}
+ *       aria-label={label}
+ *     >
+ *       Italic
+ *     </MyButton>
+ *   )
+ * }
+ * ```
+ */
+export declare function useMark(config: UseMarkConfig): {
+    isVisible: boolean;
+    isActive: boolean;
+    handleMark: () => boolean;
+    canToggle: boolean;
+    label: string;
+    shortcutKeys: string;
+    Icon: import('react').MemoExoticComponent<({ className, ...props }: React.SVGProps<SVGSVGElement>) => import("react/jsx-runtime").JSX.Element> | import('react').MemoExoticComponent<({ className, ...props }: React.SVGProps<SVGSVGElement>) => import("react/jsx-runtime").JSX.Element> | import('react').MemoExoticComponent<({ className, ...props }: React.SVGProps<SVGSVGElement>) => import("react/jsx-runtime").JSX.Element> | import('react').MemoExoticComponent<({ className, ...props }: React.SVGProps<SVGSVGElement>) => import("react/jsx-runtime").JSX.Element> | import('react').MemoExoticComponent<({ className, ...props }: React.SVGProps<SVGSVGElement>) => import("react/jsx-runtime").JSX.Element> | import('react').MemoExoticComponent<({ className, ...props }: React.SVGProps<SVGSVGElement>) => import("react/jsx-runtime").JSX.Element> | import('react').MemoExoticComponent<({ className, ...props }: React.SVGProps<SVGSVGElement>) => import("react/jsx-runtime").JSX.Element>;
+};

package/dist/components/tiptap-ui/mark-button/use-mark.js

@@ -0,0 +1,84 @@
+import { useState as p, useEffect as b, useCallback as g } from "react";
+import { useTiptapEditor as k } from "../../../hooks/use-tiptap-editor.js";
+import { isMarkInSchema as a, isNodeTypeSelected as h } from "../../../lib/tiptap-utils.js";
+import { BoldIcon as I } from "../../tiptap-icons/bold-icon.js";
+import { Code2Icon as M } from "../../tiptap-icons/code2-icon.js";
+import { ItalicIcon as S } from "../../tiptap-icons/italic-icon.js";
+import { StrikeIcon as E } from "../../tiptap-icons/strike-icon.js";
+import { SubscriptIcon as U } from "../../tiptap-icons/subscript-icon.js";
+import { SuperscriptIcon as v } from "../../tiptap-icons/superscript-icon.js";
+import { UnderlineIcon as T } from "../../tiptap-icons/underline-icon.js";
+const A = {
+  bold: I,
+  italic: S,
+  underline: T,
+  strike: E,
+  code: M,
+  superscript: v,
+  subscript: U
+}, C = {
+  bold: "mod+b",
+  italic: "mod+i",
+  underline: "mod+u",
+  strike: "mod+shift+s",
+  code: "mod+e",
+  superscript: "mod+.",
+  subscript: "mod+,"
+};
+function s(e, t) {
+  return !e || !e.isEditable || !a(t, e) || h(e, ["image"]) ? !1 : e.can().toggleMark(t);
+}
+function K(e, t) {
+  return !e || !e.isEditable ? !1 : e.isActive(t);
+}
+function B(e, t) {
+  return !e || !e.isEditable || !s(e, t) ? !1 : e.chain().focus().toggleMark(t).run();
+}
+function N(e) {
+  const { editor: t, type: r, hideWhenUnavailable: n } = e;
+  return !t || !t.isEditable || !a(r, t) ? !1 : n && !t.isActive("code") ? s(t, r) : !0;
+}
+function R(e) {
+  return e.charAt(0).toUpperCase() + e.slice(1);
+}
+function j(e) {
+  const {
+    editor: t,
+    type: r,
+    hideWhenUnavailable: n = !1,
+    onToggled: c
+  } = e, { editor: o } = k(t), [l, u] = p(!0), f = s(o, r), m = K(o, r);
+  b(() => {
+    if (!o) return;
+    const i = () => {
+      u(N({ editor: o, type: r, hideWhenUnavailable: n }));
+    };
+    return i(), o.on("selectionUpdate", i), () => {
+      o.off("selectionUpdate", i);
+    };
+  }, [o, r, n]);
+  const d = g(() => {
+    if (!o) return !1;
+    const i = B(o, r);
+    return i && c?.(), i;
+  }, [o, r, c]);
+  return {
+    isVisible: l,
+    isActive: m,
+    handleMark: d,
+    canToggle: f,
+    label: R(r),
+    shortcutKeys: C[r],
+    Icon: A[r]
+  };
+}
+export {
+  C as MARK_SHORTCUT_KEYS,
+  s as canToggleMark,
+  R as getFormattedMarkName,
+  K as isMarkActive,
+  A as markIcons,
+  N as shouldShowButton,
+  B as toggleMark,
+  j as useMark
+};

package/dist/components/tiptap-ui/table-actions-toolbar/add-column-after-button.d.ts

@@ -0,0 +1,4 @@
+import { ButtonProps } from '../../tiptap-ui-primitive/button';
+type AddColumnAfterButtonProps = {} & ButtonProps;
+declare const AddColumnAfterButton: ({ onClick }: AddColumnAfterButtonProps) => import("react/jsx-runtime").JSX.Element;
+export default AddColumnAfterButton;

package/dist/components/tiptap-ui/table-actions-toolbar/add-column-after-button.js

@@ -0,0 +1,7 @@
+import { jsx as t } from "react/jsx-runtime";
+import { AddTableColumnAfterIcon as r } from "../../tiptap-icons/add-table-column-after-icon.js";
+import { Button as n } from "../../tiptap-ui-primitive/button/button.js";
+const u = ({ onClick: o }) => /* @__PURE__ */ t(n, { onClick: o, tooltip: "Add Column After", type: "button", children: /* @__PURE__ */ t(r, {}) });
+export {
+  u as default
+};

package/dist/components/tiptap-ui/table-actions-toolbar/add-column-before-button.d.ts

@@ -0,0 +1,4 @@
+import { ButtonProps } from '../../tiptap-ui-primitive/button';
+type AddColumnBeforeButtonProps = {} & ButtonProps;
+declare const AddColumnBeforeButton: ({ onClick }: AddColumnBeforeButtonProps) => import("react/jsx-runtime").JSX.Element;
+export default AddColumnBeforeButton;

package/dist/components/tiptap-ui/table-actions-toolbar/add-column-before-button.js

@@ -0,0 +1,7 @@
+import { jsx as o } from "react/jsx-runtime";
+import { AddTableColumnBeforeIcon as r } from "../../tiptap-icons/add-table-column-before-icon.js";
+import { Button as e } from "../../tiptap-ui-primitive/button/button.js";
+const u = ({ onClick: t }) => /* @__PURE__ */ o(e, { onClick: t, tooltip: "Add Column Before", type: "button", children: /* @__PURE__ */ o(r, {}) });
+export {
+  u as default
+};

package/dist/components/tiptap-ui/table-actions-toolbar/add-row-after-button.d.ts

@@ -0,0 +1,4 @@
+import { ButtonProps } from '../../tiptap-ui-primitive/button';
+type AddRowAfterButtonProps = {} & ButtonProps;
+declare const AddRowAfterButton: ({ onClick }: AddRowAfterButtonProps) => import("react/jsx-runtime").JSX.Element;
+export default AddRowAfterButton;

package/dist/components/tiptap-ui/table-actions-toolbar/add-row-after-button.js

@@ -0,0 +1,7 @@
+import { jsx as t } from "react/jsx-runtime";
+import { AddTableRowAfterIcon as r } from "../../tiptap-icons/add-table-row-after-icon.js";
+import { Button as e } from "../../tiptap-ui-primitive/button/button.js";
+const m = ({ onClick: o }) => /* @__PURE__ */ t(e, { onClick: o, tooltip: "Add Row After", type: "button", children: /* @__PURE__ */ t(r, {}) });
+export {
+  m as default
+};

package/dist/components/tiptap-ui/table-actions-toolbar/add-row-before-button.d.ts

@@ -0,0 +1,4 @@
+import { ButtonProps } from '../../tiptap-ui-primitive/button';
+type AddRowBeforeButtonProps = {} & ButtonProps;
+declare const AddRowBeforeButton: ({ onClick }: AddRowBeforeButtonProps) => import("react/jsx-runtime").JSX.Element;
+export default AddRowBeforeButton;

package/dist/components/tiptap-ui/table-actions-toolbar/add-row-before-button.js

@@ -0,0 +1,7 @@
+import { jsx as o } from "react/jsx-runtime";
+import { AddTableRowBeforeIcon as r } from "../../tiptap-icons/add-table-row-before-icon.js";
+import { Button as e } from "../../tiptap-ui-primitive/button/button.js";
+const m = ({ onClick: t }) => /* @__PURE__ */ o(e, { onClick: t, tooltip: "Add Row Before", type: "button", children: /* @__PURE__ */ o(r, {}) });
+export {
+  m as default
+};

package/dist/components/tiptap-ui/table-actions-toolbar/delete-column-button.d.ts

@@ -0,0 +1,4 @@
+import { ButtonProps } from '../../tiptap-ui-primitive/button';
+type DeleteColumnButtonProps = {} & ButtonProps;
+declare const DeleteColumnButton: ({ onClick }: DeleteColumnButtonProps) => import("react/jsx-runtime").JSX.Element;
+export default DeleteColumnButton;

package/dist/components/tiptap-ui/table-actions-toolbar/delete-column-button.js

@@ -0,0 +1,7 @@
+import { jsx as t } from "react/jsx-runtime";
+import { DeleteTableColumnIcon as e } from "../../tiptap-icons/delete-table-column-icon.js";
+import { Button as l } from "../../tiptap-ui-primitive/button/button.js";
+const u = ({ onClick: o }) => /* @__PURE__ */ t(l, { onClick: o, tooltip: "Delete Column", type: "button", children: /* @__PURE__ */ t(e, {}) });
+export {
+  u as default
+};

package/dist/components/tiptap-ui/table-actions-toolbar/delete-row-button.d.ts

@@ -0,0 +1,4 @@
+import { ButtonProps } from '../../tiptap-ui-primitive/button';
+type DeleteRowButtonProps = {} & ButtonProps;
+declare const DeleteRowButton: ({ onClick }: DeleteRowButtonProps) => import("react/jsx-runtime").JSX.Element;
+export default DeleteRowButton;

package/dist/components/tiptap-ui/table-actions-toolbar/delete-row-button.js

@@ -0,0 +1,7 @@
+import { jsx as t } from "react/jsx-runtime";
+import { DeleteTableRowIcon as e } from "../../tiptap-icons/delete-table-row-icon.js";
+import { Button as r } from "../../tiptap-ui-primitive/button/button.js";
+const p = ({ onClick: o }) => /* @__PURE__ */ t(r, { onClick: o, tooltip: "Delete Row", type: "button", children: /* @__PURE__ */ t(e, {}) });
+export {
+  p as default
+};

package/dist/components/tiptap-ui/table-actions-toolbar/get-table-node-and-pos.d.ts

@@ -0,0 +1,6 @@
+import { Editor } from '@tiptap/react';
+export declare function getTableNodeAndPos(editor: Editor): {
+    node: import('prosemirror-model').Node;
+    pos: number;
+    domElement: Node | null;
+} | null;

package/dist/components/tiptap-ui/table-actions-toolbar/get-table-node-and-pos.js

@@ -0,0 +1,15 @@
+import { findParentNode as t } from "@tiptap/core";
+import "@tiptap/react";
+function l(o) {
+  const e = t((n) => n.type.name === "table")(
+    o.state.selection
+  );
+  return e ? {
+    node: e.node,
+    pos: e.pos,
+    domElement: o.view.nodeDOM(e.pos)
+  } : null;
+}
+export {
+  l as getTableNodeAndPos
+};

package/dist/components/tiptap-ui/table-actions-toolbar/merge-cells-button.d.ts

@@ -0,0 +1,4 @@
+import { ButtonProps } from '../../tiptap-ui-primitive/button';
+type MergeTableCellsButtonProps = {} & ButtonProps;
+declare const MergeTableCellsButton: ({ onClick }: MergeTableCellsButtonProps) => import("react/jsx-runtime").JSX.Element;
+export default MergeTableCellsButton;

package/dist/components/tiptap-ui/table-actions-toolbar/merge-cells-button.js

@@ -0,0 +1,7 @@
+import { jsx as e } from "react/jsx-runtime";
+import { MergeTableCellsIcon as o } from "../../tiptap-icons/merge-table-cells-icon.js";
+import { Button as r } from "../../tiptap-ui-primitive/button/button.js";
+const p = ({ onClick: t }) => /* @__PURE__ */ e(r, { onClick: t, tooltip: "Merge Cells", type: "button", children: /* @__PURE__ */ e(o, {}) });
+export {
+  p as default
+};

package/dist/components/tiptap-ui/table-actions-toolbar/remove-table-button.d.ts

@@ -0,0 +1,4 @@
+import { ButtonProps } from '../../tiptap-ui-primitive/button';
+type RemoveTableButtonProps = {} & ButtonProps;
+declare const RemoveTableButton: ({ onClick }: RemoveTableButtonProps) => import("react/jsx-runtime").JSX.Element;
+export default RemoveTableButton;

package/dist/components/tiptap-ui/table-actions-toolbar/remove-table-button.js

@@ -0,0 +1,7 @@
+import { jsx as o } from "react/jsx-runtime";
+import { RemoveTableIcon as e } from "../../tiptap-icons/remove-table-icon.js";
+import { Button as r } from "../../tiptap-ui-primitive/button/button.js";
+const p = ({ onClick: t }) => /* @__PURE__ */ o(r, { onClick: t, tooltip: "Remove Table", type: "button", children: /* @__PURE__ */ o(e, {}) });
+export {
+  p as default
+};

package/dist/components/tiptap-ui/table-actions-toolbar/split-table-cells-button.d.ts

@@ -0,0 +1,4 @@
+import { ButtonProps } from '../../tiptap-ui-primitive/button';
+type SplitTableCellsButtonProps = {} & ButtonProps;
+declare const SplitTableCellsButton: ({ onClick }: SplitTableCellsButtonProps) => import("react/jsx-runtime").JSX.Element;
+export default SplitTableCellsButton;

package/dist/components/tiptap-ui/table-actions-toolbar/split-table-cells-button.js

@@ -0,0 +1,7 @@
+import { jsx as t } from "react/jsx-runtime";
+import { SplitTableCellsIcon as o } from "../../tiptap-icons/split-table-cells-icon copy.js";
+import { Button as e } from "../../tiptap-ui-primitive/button/button.js";
+const n = ({ onClick: l }) => /* @__PURE__ */ t(e, { onClick: l, tooltip: "Split Cells", type: "button", children: /* @__PURE__ */ t(o, {}) });
+export {
+  n as default
+};

package/dist/components/tiptap-ui/table-actions-toolbar/table-actions-toolbar.d.ts

@@ -0,0 +1,2 @@
+declare const TableActions: () => import('react').ReactPortal | null;
+export default TableActions;

package/dist/components/tiptap-ui/table-actions-toolbar/table-actions-toolbar.js

@@ -0,0 +1,75 @@
+import { jsx as o, jsxs as a } from "react/jsx-runtime";
+import { useTiptapEditor as i } from "../../../hooks/use-tiptap-editor.js";
+import { useState as m, useEffect as s } from "react";
+import { createPortal as u } from "react-dom";
+import c from "./add-column-after-button.js";
+import f from "./add-column-before-button.js";
+import p from "./add-row-after-button.js";
+import h from "./add-row-before-button.js";
+import C from "./delete-column-button.js";
+import A from "./delete-row-button.js";
+import { getTableNodeAndPos as b } from "./get-table-node-and-pos.js";
+import B from "./merge-cells-button.js";
+import R from "./remove-table-button.js";
+import T from "./split-table-cells-button.js";
+import { ButtonGroup as w } from "../../tiptap-ui-primitive/button/button.js";
+const Q = () => {
+  const [l, n] = m(null), { editor: e } = i();
+  return s(() => {
+    if (!e) return;
+    const t = () => {
+      const d = e.isActive("table"), r = b(e);
+      n(d && r ? r.domElement : null);
+    };
+    return e.on("selectionUpdate", t), () => {
+      e.off("selectionUpdate", t);
+    };
+  }, [e]), l && u(
+    /* @__PURE__ */ o(
+      "div",
+      {
+        onMouseDown: (t) => t.preventDefault(),
+        onClick: (t) => t.stopPropagation(),
+        style: {
+          position: "absolute",
+          top: -6,
+          left: 0,
+          transform: "translateY(-100%)"
+        },
+        children: /* @__PURE__ */ a(w, { orientation: "horizontal", children: [
+          /* @__PURE__ */ o(f, { onClick: () => {
+            e?.chain().focus().addColumnBefore().run();
+          } }),
+          /* @__PURE__ */ o(c, { onClick: () => {
+            e?.chain().focus().addColumnAfter().run();
+          } }),
+          /* @__PURE__ */ o(p, { onClick: () => {
+            e?.chain().addRowAfter().run();
+          } }),
+          /* @__PURE__ */ o(h, { onClick: () => {
+            e?.chain().addRowBefore().run();
+          } }),
+          /* @__PURE__ */ o(A, { onClick: () => {
+            e?.chain().deleteRow().run();
+          } }),
+          /* @__PURE__ */ o(C, { onClick: () => {
+            e?.chain().deleteColumn().run();
+          } }),
+          /* @__PURE__ */ o(B, { onClick: () => {
+            e?.chain().mergeCells().run();
+          } }),
+          /* @__PURE__ */ o(T, { onClick: () => {
+            e?.chain().splitCell().run();
+          } }),
+          /* @__PURE__ */ o(R, { onClick: () => {
+            e?.chain().deleteTable().run();
+          } })
+        ] })
+      }
+    ),
+    l
+  );
+};
+export {
+  Q as default
+};

package/dist/components/tiptap-ui/text-align-button/index.d.ts

@@ -0,0 +1,2 @@
+export * from './text-align-button';
+export * from './use-text-align';

package/dist/components/tiptap-ui/text-align-button/index.js

@@ -0,0 +1,15 @@
+import { TextAlignButton as n, TextAlignShortcutBadge as i } from "./text-align-button.js";
+import { TEXT_ALIGN_SHORTCUT_KEYS as x, canSetTextAlign as A, hasSetTextAlign as T, isTextAlignActive as g, setTextAlign as o, shouldShowButton as s, textAlignIcons as S, textAlignLabels as r, useTextAlign as u } from "./use-text-align.js";
+export {
+  x as TEXT_ALIGN_SHORTCUT_KEYS,
+  n as TextAlignButton,
+  i as TextAlignShortcutBadge,
+  A as canSetTextAlign,
+  T as hasSetTextAlign,
+  g as isTextAlignActive,
+  o as setTextAlign,
+  s as shouldShowButton,
+  S as textAlignIcons,
+  r as textAlignLabels,
+  u as useTextAlign
+};

package/dist/components/tiptap-ui/text-align-button/text-align-button.d.ts

@@ -0,0 +1,30 @@
+import { TextAlign, UseTextAlignConfig } from '.';
+import { ButtonProps } from '../../tiptap-ui-primitive/button';
+type IconProps = React.SVGProps<SVGSVGElement>;
+type IconComponent = ({ className, ...props }: IconProps) => React.ReactElement;
+export interface TextAlignButtonProps extends Omit<ButtonProps, "type">, UseTextAlignConfig {
+    /**
+     * Optional text to display alongside the icon.
+     */
+    text?: string;
+    /**
+     * Optional show shortcut keys in the button.
+     * @default false
+     */
+    showShortcut?: boolean;
+    /**
+     * Optional custom icon component to render instead of the default.
+     */
+    icon?: React.MemoExoticComponent<IconComponent> | React.FC<IconProps>;
+}
+export declare function TextAlignShortcutBadge({ align, shortcutKeys, }: {
+    align: TextAlign;
+    shortcutKeys?: string;
+}): import("react/jsx-runtime").JSX.Element;
+/**
+ * Button component for setting text alignment in a Tiptap editor.
+ *
+ * For custom button implementations, use the `useTextAlign` hook instead.
+ */
+export declare const TextAlignButton: import('react').ForwardRefExoticComponent<TextAlignButtonProps & import('react').RefAttributes<HTMLButtonElement>>;
+export {};

package/dist/components/tiptap-ui/text-align-button/text-align-button.js

@@ -0,0 +1,81 @@
+import { jsx as t, jsxs as B, Fragment as I } from "react/jsx-runtime";
+import { forwardRef as N, useCallback as R } from "react";
+import { parseShortcutKeys as S } from "../../../lib/tiptap-utils.js";
+import { useTiptapEditor as C } from "../../../hooks/use-tiptap-editor.js";
+import { useTextAlign as E, TEXT_ALIGN_SHORTCUT_KEYS as K } from "./use-text-align.js";
+import { Button as _ } from "../../tiptap-ui-primitive/button/button.js";
+import { Badge as j } from "../../tiptap-ui-primitive/badge/badge.js";
+function k({
+  align: o,
+  shortcutKeys: e = K[o]
+}) {
+  return /* @__PURE__ */ t(j, { children: S({ shortcutKeys: e }) });
+}
+const v = N(
+  ({
+    editor: o,
+    align: e,
+    text: r,
+    hideWhenUnavailable: c = !1,
+    onAligned: p,
+    showShortcut: u = !1,
+    onClick: n,
+    icon: m,
+    children: f,
+    ...b
+  }, h) => {
+    const { editor: T } = C(o), {
+      isVisible: g,
+      handleTextAlign: i,
+      label: a,
+      canAlign: s,
+      isActive: l,
+      Icon: x,
+      shortcutKeys: A
+    } = E({
+      editor: T,
+      align: e,
+      hideWhenUnavailable: c,
+      onAligned: p
+    }), y = R(
+      (d) => {
+        n?.(d), !d.defaultPrevented && i();
+      },
+      [i, n]
+    );
+    return g ? /* @__PURE__ */ t(
+      _,
+      {
+        type: "button",
+        disabled: !s,
+        "data-style": "ghost",
+        "data-active-state": l ? "on" : "off",
+        "data-disabled": !s,
+        role: "button",
+        tabIndex: -1,
+        "aria-label": a,
+        "aria-pressed": l,
+        tooltip: a,
+        onClick: y,
+        ...b,
+        ref: h,
+        children: f ?? /* @__PURE__ */ B(I, { children: [
+          /* @__PURE__ */ t(m ?? x, { className: "tiptap-button-icon" }),
+          r && /* @__PURE__ */ t("span", { className: "tiptap-button-text", children: r }),
+          u && /* @__PURE__ */ t(
+            k,
+            {
+              align: e,
+              shortcutKeys: A
+            }
+          )
+        ] })
+      }
+    ) : null;
+  }
+);
+v.displayName = "TextAlignButton";
+export {
+  v as TextAlignButton,
+  k as TextAlignShortcutBadge
+};