@timmbr/ui 1.13.2 → 1.15.0

package/dist/components/RichTextEditor/RichTextEditor.js

@@ -0,0 +1,156 @@
+"use client";
+import { jsx, jsxs } from 'react/jsx-runtime';
+import * as React from 'react';
+import { useEditor, EditorContent } from '@tiptap/react';
+import { cn } from '@timmbr/utils';
+import { resolveMotion } from '../../types/motion.js';
+import { RteContext } from './RichTextEditor.context.js';
+import { proseEditorStyles, editorWrapperVariants } from './RichTextEditor.styles.js';
+import { getEditorExtensions, normalizeHtml } from './RichTextEditor.helpers.js';
+import { RteToolbar } from './subcomponents/RteToolbar.js';
+import { RteCharCount } from './subcomponents/RteCharCount.js';
+import { useGlobalAnimation } from '../../providers/AnimationProvider.js';
+
+function RichTextEditor({
+  value,
+  defaultValue,
+  onChange,
+  onChangeJson,
+  onFocus,
+  onBlur,
+  placeholder,
+  maxCharacters,
+  showCharacterCount = false,
+  showWordCount = false,
+  toolbar = true,
+  toolbarClassName,
+  disabled = false,
+  readOnly = false,
+  className,
+  editorClassName,
+  style,
+  id,
+  motion: motionProp,
+  "aria-label": ariaLabel,
+  "aria-labelledby": ariaLabelledby,
+  "aria-describedby": ariaDescribedby
+}) {
+  const globalMotion = useGlobalAnimation();
+  const { shouldAnimate, motionClass, dataAttributes } = resolveMotion(motionProp, globalMotion);
+  const isControlled = value !== void 0;
+  const lastEmittedHtmlRef = React.useRef(
+    isControlled ? value ?? "" : defaultValue ?? ""
+  );
+  const onChangeRef = React.useRef(onChange);
+  const onChangeJsonRef = React.useRef(onChangeJson);
+  const onFocusRef = React.useRef(onFocus);
+  const onBlurRef = React.useRef(onBlur);
+  React.useEffect(() => {
+    onChangeRef.current = onChange;
+    onChangeJsonRef.current = onChangeJson;
+    onFocusRef.current = onFocus;
+    onBlurRef.current = onBlur;
+  });
+  const [mounted, setMounted] = React.useState(false);
+  React.useEffect(() => {
+    setMounted(true);
+  }, []);
+  const extensions = React.useMemo(
+    () => getEditorExtensions({
+      placeholder,
+      maxCharacters,
+      showCount: showCharacterCount || showWordCount
+    }),
+    // intentionally omit showCharacterCount/showWordCount from deps: extensions are
+    // frozen at mount and cannot be hot-swapped; changing count visibility after mount
+    // requires remounting the editor, which is not a supported use-case.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [placeholder, maxCharacters]
+  );
+  const editor = useEditor({
+    immediatelyRender: false,
+    // SSR safety — defers DOM init to useEffect
+    editable: !disabled && !readOnly,
+    content: isControlled ? value ?? "" : defaultValue ?? "",
+    extensions,
+    onUpdate: ({ editor: e }) => {
+      const html = normalizeHtml(e.getHTML());
+      const json = e.getJSON();
+      lastEmittedHtmlRef.current = html;
+      onChangeRef.current?.(html);
+      onChangeJsonRef.current?.(json);
+    },
+    onFocus: () => {
+      onFocusRef.current?.();
+    },
+    onBlur: () => {
+      onBlurRef.current?.();
+    }
+  });
+  React.useEffect(() => {
+    if (!editor || !isControlled || value === void 0) return;
+    if (value === lastEmittedHtmlRef.current) return;
+    editor.commands.setContent(value, false);
+    lastEmittedHtmlRef.current = value;
+  }, [value, editor]);
+  React.useEffect(() => {
+    if (!editor) return;
+    editor.setEditable(!disabled && !readOnly);
+  }, [editor, disabled, readOnly]);
+  const showCount = showCharacterCount || showWordCount;
+  const contextValue = React.useMemo(
+    () => ({ editor, shouldAnimate, disabled, readOnly }),
+    [editor, shouldAnimate, disabled, readOnly]
+  );
+  return /* @__PURE__ */ jsx(RteContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsxs(
+    "div",
+    {
+      "data-slot": "rte",
+      style,
+      className: cn(
+        editorWrapperVariants({ disabled }),
+        motionClass,
+        className
+      ),
+      ...dataAttributes,
+      children: [
+        toolbar && /* @__PURE__ */ jsx(
+          RteToolbar,
+          {
+            className: cn(
+              shouldAnimate && mounted ? "animate-in fade-in duration-150" : void 0,
+              toolbarClassName
+            )
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          EditorContent,
+          {
+            editor,
+            id,
+            "aria-label": ariaLabel,
+            "aria-labelledby": ariaLabelledby,
+            "aria-describedby": ariaDescribedby,
+            "aria-multiline": "true",
+            "aria-readonly": readOnly || void 0,
+            className: cn(
+              proseEditorStyles,
+              "min-h-[120px] px-4 py-3 flex-1",
+              editorClassName
+            )
+          }
+        ),
+        showCount && /* @__PURE__ */ jsx(
+          RteCharCount,
+          {
+            maxCharacters,
+            showCharacterCount,
+            showWordCount
+          }
+        )
+      ]
+    }
+  ) });
+}
+
+export { RichTextEditor };

package/dist/components/RichTextEditor/RichTextEditor.styles.d.ts

@@ -0,0 +1,10 @@
+export declare const editorWrapperVariants: (props?: ({
+    disabled?: boolean | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export declare const toolbarVariants: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+export declare const charCountVariants: (props?: ({
+    overLimit?: boolean | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export declare const proseEditorStyles: string;
+export declare const proseViewerStyles: string;
+//# sourceMappingURL=RichTextEditor.styles.d.ts.map

package/dist/components/RichTextEditor/RichTextEditor.styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"RichTextEditor.styles.d.ts","sourceRoot":"","sources":["../../../src/components/RichTextEditor/RichTextEditor.styles.ts"],"names":[],"mappings":"AAKA,eAAO,MAAM,qBAAqB;;8EAejC,CAAC;AAIF,eAAO,MAAM,eAAe,oFAE3B,CAAC;AAIF,eAAO,MAAM,iBAAiB;;8EAW7B,CAAC;AAKF,eAAO,MAAM,iBAAiB,QAgC7B,CAAC;AAKF,eAAO,MAAM,iBAAiB,QAyB7B,CAAC"}

package/dist/components/RichTextEditor/RichTextEditor.styles.js

@@ -0,0 +1,95 @@
+import { cva } from 'class-variance-authority';
+import { cn } from '@timmbr/utils';
+
+const editorWrapperVariants = cva(
+  [
+    "flex flex-col w-full rounded-md border border-border bg-card text-foreground font-sans",
+    "transition-shadow duration-150",
+    "focus-within:ring-2 focus-within:ring-ring focus-within:ring-offset-1"
+  ],
+  {
+    variants: {
+      disabled: {
+        true: "opacity-50 pointer-events-none select-none",
+        false: ""
+      }
+    },
+    defaultVariants: { disabled: false }
+  }
+);
+const toolbarVariants = cva(
+  "flex items-center flex-wrap gap-0.5 px-2 py-1.5 border-b border-border bg-card rounded-t-[2px]"
+);
+const charCountVariants = cva(
+  "flex items-center justify-end gap-3 px-3 py-1.5 border-t border-border text-caption text-muted-foreground select-none rounded-b-[2px]",
+  {
+    variants: {
+      overLimit: {
+        true: "text-destructive",
+        false: ""
+      }
+    },
+    defaultVariants: { overLimit: false }
+  }
+);
+const proseEditorStyles = cn(
+  // Editor focus reset
+  "[&_.ProseMirror]:outline-none",
+  "[&_.ProseMirror]:cursor-text",
+  // Paragraph
+  "[&_.ProseMirror_p]:text-body-1 [&_.ProseMirror_p]:text-foreground [&_.ProseMirror_p]:my-2 [&_.ProseMirror_p]:leading-relaxed",
+  // Headings — DS display font + scale
+  "[&_.ProseMirror_h2]:font-display [&_.ProseMirror_h2]:text-h2 [&_.ProseMirror_h2]:font-normal [&_.ProseMirror_h2]:text-foreground [&_.ProseMirror_h2]:my-4 [&_.ProseMirror_h2]:leading-tight",
+  "[&_.ProseMirror_h3]:font-display [&_.ProseMirror_h3]:text-h3 [&_.ProseMirror_h3]:font-normal [&_.ProseMirror_h3]:text-foreground [&_.ProseMirror_h3]:my-3 [&_.ProseMirror_h3]:leading-tight",
+  // Lists
+  "[&_.ProseMirror_ul]:list-disc [&_.ProseMirror_ul]:pl-6 [&_.ProseMirror_ul]:my-2",
+  "[&_.ProseMirror_ol]:list-decimal [&_.ProseMirror_ol]:pl-6 [&_.ProseMirror_ol]:my-2",
+  "[&_.ProseMirror_li]:text-body-1 [&_.ProseMirror_li]:text-foreground [&_.ProseMirror_li]:mb-1",
+  "[&_.ProseMirror_li_p]:my-0",
+  // Blockquote
+  "[&_.ProseMirror_blockquote]:border-l-4 [&_.ProseMirror_blockquote]:border-primary [&_.ProseMirror_blockquote]:pl-4 [&_.ProseMirror_blockquote]:italic [&_.ProseMirror_blockquote]:text-muted-foreground [&_.ProseMirror_blockquote]:my-3",
+  // Inline marks
+  "[&_.ProseMirror_strong]:font-semibold",
+  "[&_.ProseMirror_em]:italic",
+  "[&_.ProseMirror_u]:underline [&_.ProseMirror_u]:underline-offset-2",
+  "[&_.ProseMirror_s]:line-through",
+  // Links
+  "[&_.ProseMirror_a]:text-primary [&_.ProseMirror_a]:underline [&_.ProseMirror_a]:underline-offset-2 [&_.ProseMirror_a]:cursor-pointer [&_.ProseMirror_a]:transition-opacity [&_.ProseMirror_a:hover]:opacity-80",
+  // Horizontal rule
+  "[&_.ProseMirror_hr]:border-t [&_.ProseMirror_hr]:border-border [&_.ProseMirror_hr]:my-6",
+  // Placeholder via TipTap's .is-empty class on the paragraph node
+  "[&_.ProseMirror_p.is-empty:first-child::before]:content-[attr(data-placeholder)] [&_.ProseMirror_p.is-empty:first-child::before]:text-muted-foreground [&_.ProseMirror_p.is-empty:first-child::before]:pointer-events-none [&_.ProseMirror_p.is-empty:first-child::before]:float-left [&_.ProseMirror_p.is-empty:first-child::before]:h-0",
+  // Selected text
+  "[&_.ProseMirror_::selection]:bg-primary/20",
+  // First/last margin reset so the editor doesn't have extra outer gap
+  "[&_.ProseMirror_>*:first-child]:mt-0",
+  "[&_.ProseMirror_>*:last-child]:mb-0"
+);
+const proseViewerStyles = cn(
+  // Paragraph
+  "[&_p]:text-body-1 [&_p]:text-foreground [&_p]:my-2 [&_p]:leading-relaxed",
+  // Headings
+  "[&_h2]:font-display [&_h2]:text-h2 [&_h2]:font-normal [&_h2]:text-foreground [&_h2]:my-4 [&_h2]:leading-tight",
+  "[&_h3]:font-display [&_h3]:text-h3 [&_h3]:font-normal [&_h3]:text-foreground [&_h3]:my-3 [&_h3]:leading-tight",
+  // Lists
+  "[&_ul]:list-disc [&_ul]:pl-6 [&_ul]:my-2",
+  "[&_ol]:list-decimal [&_ol]:pl-6 [&_ol]:my-2",
+  "[&_li]:text-body-1 [&_li]:text-foreground [&_li]:mb-1",
+  "[&_li_p]:my-0",
+  // Blockquote
+  "[&_blockquote]:border-l-4 [&_blockquote]:border-primary [&_blockquote]:pl-4 [&_blockquote]:italic [&_blockquote]:text-muted-foreground [&_blockquote]:my-3",
+  // Inline marks
+  "[&_strong]:font-semibold",
+  "[&_em]:italic",
+  "[&_u]:underline [&_u]:underline-offset-2",
+  "[&_s]:line-through",
+  // Links
+  "[&_a]:text-primary [&_a]:underline [&_a]:underline-offset-2 [&_a]:cursor-pointer [&_a]:transition-opacity [&_a:hover]:opacity-80",
+  // Horizontal rule
+  "[&_hr]:border-t [&_hr]:border-border [&_hr]:my-6",
+  // First/last margin reset
+  "[&_>*:first-child]:mt-0",
+  "[&_>*:last-child]:mb-0"
+);
+
+export { charCountVariants, editorWrapperVariants, proseEditorStyles, proseViewerStyles, toolbarVariants };

package/dist/components/RichTextEditor/RichTextEditor.types.d.ts

@@ -0,0 +1,73 @@
+import type * as React from 'react';
+import type { Editor, JSONContent } from '@tiptap/core';
+import type { MotionProps } from '../../types/motion';
+export interface RichTextEditorProps extends MotionProps {
+    /** Controlled HTML string value */
+    value?: string;
+    /** Uncontrolled initial HTML string */
+    defaultValue?: string;
+    /** Called with the HTML string on every content change */
+    onChange?: (html: string) => void;
+    /** Called with TipTap's JSON document on every content change */
+    onChangeJson?: (json: JSONContent) => void;
+    onFocus?: () => void;
+    onBlur?: () => void;
+    placeholder?: string;
+    /** Hard character limit; enables the CharacterCount extension limit */
+    maxCharacters?: number;
+    /** Show character count footer */
+    showCharacterCount?: boolean;
+    /** Show word count in the footer */
+    showWordCount?: boolean;
+    /** Show the toolbar — default true */
+    toolbar?: boolean;
+    toolbarClassName?: string;
+    disabled?: boolean;
+    readOnly?: boolean;
+    className?: string;
+    editorClassName?: string;
+    style?: React.CSSProperties;
+    id?: string;
+    'aria-label'?: string;
+    'aria-labelledby'?: string;
+    'aria-describedby'?: string;
+}
+export interface RichTextContentProps {
+    /** Raw HTML string to render */
+    content: string;
+    className?: string;
+    style?: React.CSSProperties;
+}
+export interface RichTextJsonContentProps {
+    /** TipTap JSONContent document to render */
+    content: JSONContent;
+    className?: string;
+    style?: React.CSSProperties;
+}
+export interface RteContextValue {
+    editor: Editor | null;
+    shouldAnimate: boolean;
+    disabled: boolean;
+    readOnly: boolean;
+}
+export interface RteToolbarButtonProps {
+    /** Tooltip label and aria-label */
+    label: string;
+    icon: React.ReactNode;
+    onClick: () => void;
+    isActive?: boolean;
+    disabled?: boolean;
+    className?: string;
+}
+export interface RteToolbarGroupProps {
+    children: React.ReactNode;
+    /** Show leading vertical divider — default true */
+    showLeadingDivider?: boolean;
+}
+export interface RteCharCountProps {
+    maxCharacters?: number;
+    showCharacterCount?: boolean;
+    showWordCount?: boolean;
+    className?: string;
+}
+//# sourceMappingURL=RichTextEditor.types.d.ts.map

package/dist/components/RichTextEditor/RichTextEditor.types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"RichTextEditor.types.d.ts","sourceRoot":"","sources":["../../../src/components/RichTextEditor/RichTextEditor.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,KAAK,MAAM,OAAO,CAAC;AACpC,OAAO,KAAK,EAAE,MAAM,EAAE,WAAW,EAAE,MAAM,cAAc,CAAC;AACxD,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,oBAAoB,CAAC;AAEtD,MAAM,WAAW,mBAAoB,SAAQ,WAAW;IACtD,mCAAmC;IACnC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,uCAAuC;IACvC,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,0DAA0D;IAC1D,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,iEAAiE;IACjE,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,WAAW,KAAK,IAAI,CAAC;IAC3C,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,uEAAuE;IACvE,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,kCAAkC;IAClC,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B,oCAAoC;IACpC,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,sCAAsC;IACtC,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAC5B,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,kBAAkB,CAAC,EAAE,MAAM,CAAC;CAC7B;AAED,MAAM,WAAW,oBAAoB;IACnC,gCAAgC;IAChC,OAAO,EAAE,MAAM,CAAC;IAChB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;CAC7B;AAED,MAAM,WAAW,wBAAwB;IACvC,4CAA4C;IAC5C,OAAO,EAAE,WAAW,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;CAC7B;AAED,MAAM,WAAW,eAAe;IAC9B,MAAM,EAAE,MAAM,GAAG,IAAI,CAAC;IACtB,aAAa,EAAE,OAAO,CAAC;IACvB,QAAQ,EAAE,OAAO,CAAC;IAClB,QAAQ,EAAE,OAAO,CAAC;CACnB;AAED,MAAM,WAAW,qBAAqB;IACpC,mCAAmC;IACnC,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,KAAK,CAAC,SAAS,CAAC;IACtB,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,MAAM,WAAW,oBAAoB;IACnC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,mDAAmD;IACnD,kBAAkB,CAAC,EAAE,OAAO,CAAC;CAC9B;AAED,MAAM,WAAW,iBAAiB;IAChC,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB"}

package/dist/components/RichTextEditor/RichTextJsonContent.d.ts

@@ -0,0 +1,9 @@
+import * as React from 'react';
+import type { RichTextJsonContentProps } from './RichTextEditor.types';
+/**
+ * SSR-safe viewer for TipTap JSONContent.
+ * Uses generateHTML from @tiptap/core — a pure function with no browser dependency.
+ * Falls back silently on malformed input.
+ */
+export declare function RichTextJsonContent({ content, className, style }: RichTextJsonContentProps): React.JSX.Element | null;
+//# sourceMappingURL=RichTextJsonContent.d.ts.map

package/dist/components/RichTextEditor/RichTextJsonContent.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"RichTextJsonContent.d.ts","sourceRoot":"","sources":["../../../src/components/RichTextEditor/RichTextJsonContent.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAM/B,OAAO,KAAK,EAAE,wBAAwB,EAAE,MAAM,wBAAwB,CAAC;AAEvE;;;;GAIG;AACH,wBAAgB,mBAAmB,CAAC,EAAE,OAAO,EAAE,SAAS,EAAE,KAAK,EAAE,EAAE,wBAAwB,4BAqB1F"}

package/dist/components/RichTextEditor/RichTextJsonContent.js

@@ -0,0 +1,27 @@
+import { jsx } from 'react/jsx-runtime';
+import { generateHTML } from '@tiptap/core';
+import { cn } from '@timmbr/utils';
+import { proseViewerStyles } from './RichTextEditor.styles.js';
+import { getViewerExtensions } from './RichTextEditor.helpers.js';
+
+function RichTextJsonContent({ content, className, style }) {
+  if (!content) return null;
+  let html = "";
+  try {
+    html = generateHTML(content, getViewerExtensions());
+  } catch {
+    return null;
+  }
+  if (!html) return null;
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-slot": "rte-json-content",
+      className: cn(proseViewerStyles, className),
+      style,
+      dangerouslySetInnerHTML: { __html: html }
+    }
+  );
+}
+
+export { RichTextJsonContent };

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

@@ -0,0 +1,14 @@
+export * from './RichTextEditor';
+export * from './RichTextContent';
+export * from './RichTextJsonContent';
+export * from './RichTextEditor.types';
+export * from './RichTextEditor.styles';
+export * from './RichTextEditor.helpers';
+export * from './RichTextEditor.context';
+export * from './subcomponents/RteToolbar';
+export * from './subcomponents/RteToolbarButton';
+export * from './subcomponents/RteToolbarGroup';
+export * from './subcomponents/RteLinkPopover';
+export * from './subcomponents/RteEmojiPicker';
+export * from './subcomponents/RteCharCount';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/RichTextEditor/index.ts"],"names":[],"mappings":"AAAA,cAAc,kBAAkB,CAAC;AACjC,cAAc,mBAAmB,CAAC;AAClC,cAAc,uBAAuB,CAAC;AACtC,cAAc,wBAAwB,CAAC;AACvC,cAAc,yBAAyB,CAAC;AACxC,cAAc,0BAA0B,CAAC;AACzC,cAAc,0BAA0B,CAAC;AACzC,cAAc,4BAA4B,CAAC;AAC3C,cAAc,kCAAkC,CAAC;AACjD,cAAc,iCAAiC,CAAC;AAChD,cAAc,gCAAgC,CAAC;AAC/C,cAAc,gCAAgC,CAAC;AAC/C,cAAc,8BAA8B,CAAC"}

package/dist/components/RichTextEditor/subcomponents/RteCharCount.d.ts

@@ -0,0 +1,4 @@
+import * as React from 'react';
+import type { RteCharCountProps } from '../RichTextEditor.types';
+export declare function RteCharCount({ maxCharacters, showCharacterCount, showWordCount, className, }: RteCharCountProps): React.JSX.Element | null;
+//# sourceMappingURL=RteCharCount.d.ts.map

package/dist/components/RichTextEditor/subcomponents/RteCharCount.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"RteCharCount.d.ts","sourceRoot":"","sources":["../../../../src/components/RichTextEditor/subcomponents/RteCharCount.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,yBAAyB,CAAC;AAOjE,wBAAgB,YAAY,CAAC,EAC3B,aAAa,EACb,kBAAyB,EACzB,aAAqB,EACrB,SAAS,GACV,EAAE,iBAAiB,4BA0BnB"}

package/dist/components/RichTextEditor/subcomponents/RteCharCount.js

@@ -0,0 +1,37 @@
+"use client";
+import { jsxs } from 'react/jsx-runtime';
+import { cn } from '@timmbr/utils';
+import { useRteContext } from '../RichTextEditor.context.js';
+import { charCountVariants } from '../RichTextEditor.styles.js';
+
+function RteCharCount({
+  maxCharacters,
+  showCharacterCount = true,
+  showWordCount = false,
+  className
+}) {
+  const { editor } = useRteContext();
+  if (!editor) return null;
+  const storage = editor.storage.characterCount;
+  const charCount = storage?.characters?.() ?? 0;
+  const wordCount = storage?.words?.() ?? 0;
+  const isOverLimit = maxCharacters !== void 0 && charCount > maxCharacters;
+  return /* @__PURE__ */ jsxs("div", { className: cn(charCountVariants({ overLimit: isOverLimit }), className), children: [
+    showWordCount && /* @__PURE__ */ jsxs("span", { children: [
+      wordCount,
+      " ",
+      wordCount === 1 ? "word" : "words"
+    ] }),
+    showCharacterCount && /* @__PURE__ */ jsxs("span", { children: [
+      charCount,
+      maxCharacters !== void 0 && /* @__PURE__ */ jsxs("span", { className: "text-muted-foreground", children: [
+        " / ",
+        maxCharacters
+      ] }),
+      " ",
+      "chars"
+    ] })
+  ] });
+}
+
+export { RteCharCount };

package/dist/components/RichTextEditor/subcomponents/RteEmojiPicker.d.ts

@@ -0,0 +1,3 @@
+import * as React from 'react';
+export declare function RteEmojiPicker(): React.JSX.Element;
+//# sourceMappingURL=RteEmojiPicker.d.ts.map

package/dist/components/RichTextEditor/subcomponents/RteEmojiPicker.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"RteEmojiPicker.d.ts","sourceRoot":"","sources":["../../../../src/components/RichTextEditor/subcomponents/RteEmojiPicker.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAqL/B,wBAAgB,cAAc,sBA0H7B"}