@fragments-sdk/ui 0.10.0 → 0.11.0

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

@@ -0,0 +1,107 @@
+import * as React from 'react';
+export type EditorFormat = 'bold' | 'italic' | 'strikethrough' | 'link' | 'code' | 'bulletList' | 'orderedList' | 'heading1' | 'heading2' | 'heading3' | 'blockquote' | 'undo' | 'redo';
+export type EditorSaveStatus = 'idle' | 'saving' | 'saved' | 'error';
+export type EditorMode = 'rich' | 'markdown';
+export type EditorSize = 'sm' | 'md' | 'lg';
+export interface EditorProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange' | 'defaultValue'> {
+    children?: React.ReactNode;
+    /** Controlled value */
+    value?: string;
+    /** Default value for uncontrolled usage */
+    defaultValue?: string;
+    /** Called when content changes */
+    onValueChange?: (value: string) => void;
+    /** Placeholder text */
+    placeholder?: string;
+    /** Disable the editor */
+    disabled?: boolean;
+    /** Read-only mode */
+    readOnly?: boolean;
+    /** Which format buttons to show */
+    formats?: EditorFormat[];
+    /** Show default toolbar */
+    toolbar?: boolean;
+    /** Show default status bar */
+    statusBar?: boolean;
+    /** Auto-save callback */
+    onAutoSave?: (value: string) => void;
+    /** Auto-save interval in ms */
+    autoSaveInterval?: number;
+    /** Editor size preset */
+    size?: EditorSize;
+    /** Maximum character count (shows indicator in status bar) */
+    maxLength?: number;
+}
+export interface EditorToolbarProps {
+    children: React.ReactNode;
+    className?: string;
+}
+export interface EditorToolbarGroupProps {
+    children: React.ReactNode;
+    'aria-label'?: string;
+    className?: string;
+}
+export interface EditorToolbarButtonProps {
+    /** Which format this button toggles */
+    format: EditorFormat;
+    className?: string;
+}
+export interface EditorSeparatorProps {
+    className?: string;
+}
+export interface EditorStatusIndicatorProps {
+    /** Override the save status from context */
+    status?: EditorSaveStatus;
+    /** Custom labels per status */
+    labels?: Partial<Record<EditorSaveStatus, string>>;
+    className?: string;
+}
+export interface EditorContentProps {
+    className?: string;
+}
+export interface EditorStatusBarProps {
+    /** Show word count */
+    showWordCount?: boolean;
+    /** Show character count */
+    showCharCount?: boolean;
+    className?: string;
+}
+interface EditorContextValue {
+    value: string;
+    setValue: (v: string) => void;
+    placeholder: string;
+    disabled: boolean;
+    readOnly: boolean;
+    formats: EditorFormat[];
+    editor: any | null;
+    mode: EditorMode;
+    size: EditorSize;
+    maxLength?: number;
+    wordCount: number;
+    charCount: number;
+    toggleFormat: (f: EditorFormat) => void;
+    isFormatActive: (f: EditorFormat) => boolean;
+    saveStatus: EditorSaveStatus;
+    contentRef: React.RefObject<HTMLTextAreaElement | null>;
+}
+declare function useEditorContext(): EditorContextValue;
+declare function EditorRoot({ children, value: controlledValue, defaultValue, onValueChange, placeholder, disabled, readOnly, formats, toolbar, statusBar, onAutoSave, autoSaveInterval, size, maxLength, className, ...htmlProps }: EditorProps): import("react/jsx-runtime").JSX.Element;
+declare function EditorToolbar({ children, className }: EditorToolbarProps): import("react/jsx-runtime").JSX.Element;
+declare function EditorToolbarGroup({ children, 'aria-label': ariaLabel, className }: EditorToolbarGroupProps): import("react/jsx-runtime").JSX.Element;
+declare function EditorToolbarButton({ format, className }: EditorToolbarButtonProps): import("react/jsx-runtime").JSX.Element;
+declare function EditorSeparator({ className }: EditorSeparatorProps): import("react/jsx-runtime").JSX.Element;
+declare function EditorStatusIndicator({ status: statusOverride, labels, className }: EditorStatusIndicatorProps): import("react/jsx-runtime").JSX.Element | null;
+declare function EditorContentArea({ className }: EditorContentProps): import("react/jsx-runtime").JSX.Element;
+declare function EditorStatusBar({ showWordCount, showCharCount, className }: EditorStatusBarProps): import("react/jsx-runtime").JSX.Element;
+export declare const Editor: typeof EditorRoot & {
+    Toolbar: typeof EditorToolbar;
+    ToolbarGroup: typeof EditorToolbarGroup;
+    ToolbarButton: typeof EditorToolbarButton;
+    Separator: typeof EditorSeparator;
+    StatusIndicator: typeof EditorStatusIndicator;
+    Content: typeof EditorContentArea;
+    StatusBar: typeof EditorStatusBar;
+};
+export { EditorRoot, EditorToolbar, EditorToolbarGroup, EditorToolbarButton, EditorSeparator, EditorStatusIndicator, EditorContentArea, EditorStatusBar, };
+export { useEditorContext };
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Editor/index.tsx"],"names":[],"mappings":"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"}

package/dist/components/Editor/index.js

@@ -0,0 +1,531 @@
+import { jsx, jsxs, Fragment } from "react/jsx-runtime";
+import * as React from "react";
+import styles from "./Editor.module.scss.js";
+import { ArrowClockwise, ArrowCounterClockwise, Quotes, TextHThree, TextHTwo, TextHOne, ListNumbers, ListBullets, Code, LinkSimple, TextStrikethrough, TextItalic, TextB } from "@phosphor-icons/react";
+import { KEYBOARD_SHORTCUTS } from "../../utils/keyboard-shortcuts.js";
+let _useEditor = null;
+let _EditorContent = null;
+let _StarterKit = null;
+let _LinkExtension = null;
+let _tiptapLoaded = false;
+let _tiptapFailed = false;
+function loadTipTapDeps() {
+  if (_tiptapLoaded) return;
+  _tiptapLoaded = true;
+  try {
+    const tiptapReact = require("@tiptap/react");
+    const starterKit = require("@tiptap/starter-kit");
+    const linkExt = require("@tiptap/extension-link");
+    _useEditor = tiptapReact.useEditor;
+    _EditorContent = tiptapReact.EditorContent;
+    _StarterKit = starterKit.default ?? starterKit.StarterKit ?? starterKit;
+    _LinkExtension = linkExt.default ?? linkExt.Link ?? linkExt;
+  } catch {
+    _tiptapFailed = true;
+  }
+}
+const FORMAT_META = {
+  bold: { icon: TextB, label: "Bold", shortcut: KEYBOARD_SHORTCUTS.EDITOR_BOLD.label },
+  italic: { icon: TextItalic, label: "Italic", shortcut: KEYBOARD_SHORTCUTS.EDITOR_ITALIC.label },
+  strikethrough: { icon: TextStrikethrough, label: "Strikethrough", shortcut: KEYBOARD_SHORTCUTS.EDITOR_STRIKETHROUGH.label },
+  link: { icon: LinkSimple, label: "Link", shortcut: KEYBOARD_SHORTCUTS.EDITOR_LINK.label },
+  code: { icon: Code, label: "Code", shortcut: KEYBOARD_SHORTCUTS.EDITOR_CODE.label },
+  bulletList: { icon: ListBullets, label: "Bullet list", shortcut: KEYBOARD_SHORTCUTS.EDITOR_BULLET_LIST.label },
+  orderedList: { icon: ListNumbers, label: "Ordered list", shortcut: KEYBOARD_SHORTCUTS.EDITOR_ORDERED_LIST.label },
+  heading1: { icon: TextHOne, label: "Heading 1", shortcut: KEYBOARD_SHORTCUTS.EDITOR_HEADING1.label },
+  heading2: { icon: TextHTwo, label: "Heading 2", shortcut: KEYBOARD_SHORTCUTS.EDITOR_HEADING2.label },
+  heading3: { icon: TextHThree, label: "Heading 3", shortcut: KEYBOARD_SHORTCUTS.EDITOR_HEADING3.label },
+  blockquote: { icon: Quotes, label: "Blockquote", shortcut: KEYBOARD_SHORTCUTS.EDITOR_BLOCKQUOTE.label },
+  undo: { icon: ArrowCounterClockwise, label: "Undo", shortcut: KEYBOARD_SHORTCUTS.EDITOR_UNDO.label },
+  redo: { icon: ArrowClockwise, label: "Redo", shortcut: KEYBOARD_SHORTCUTS.EDITOR_REDO.label }
+};
+const DEFAULT_FORMATS = ["bold", "italic", "strikethrough", "link", "code", "bulletList"];
+const ACTION_FORMATS = /* @__PURE__ */ new Set(["undo", "redo"]);
+const DEFAULT_STATUS_LABELS = {
+  idle: "",
+  saving: "SAVING...",
+  saved: "AUTO-SAVED",
+  error: "SAVE FAILED"
+};
+function getSelection(textarea) {
+  return {
+    start: textarea.selectionStart,
+    end: textarea.selectionEnd,
+    text: textarea.value.substring(textarea.selectionStart, textarea.selectionEnd)
+  };
+}
+function wrapSelection(textarea, prefix, suffix, setValue) {
+  const sel = getSelection(textarea);
+  const before = textarea.value.substring(0, sel.start);
+  const after = textarea.value.substring(sel.end);
+  const wrapped = `${prefix}${sel.text || "text"}${suffix}`;
+  const newValue = `${before}${wrapped}${after}`;
+  setValue(newValue);
+  requestAnimationFrame(() => {
+    textarea.focus();
+    const newStart = sel.start + prefix.length;
+    const newEnd = newStart + (sel.text || "text").length;
+    textarea.setSelectionRange(newStart, newEnd);
+  });
+}
+function applyMarkdownFormat(format, textarea, setValue) {
+  switch (format) {
+    case "bold":
+      wrapSelection(textarea, "**", "**", setValue);
+      break;
+    case "italic":
+      wrapSelection(textarea, "*", "*", setValue);
+      break;
+    case "strikethrough":
+      wrapSelection(textarea, "~~", "~~", setValue);
+      break;
+    case "code":
+      wrapSelection(textarea, "`", "`", setValue);
+      break;
+    case "link": {
+      const sel = getSelection(textarea);
+      const linkText = sel.text || "link text";
+      const before = textarea.value.substring(0, sel.start);
+      const after = textarea.value.substring(sel.end);
+      const newValue = `${before}[${linkText}](url)${after}`;
+      setValue(newValue);
+      requestAnimationFrame(() => {
+        textarea.focus();
+        const urlStart = sel.start + linkText.length + 3;
+        textarea.setSelectionRange(urlStart, urlStart + 3);
+      });
+      break;
+    }
+    case "bulletList": {
+      const sel = getSelection(textarea);
+      const before = textarea.value.substring(0, sel.start);
+      const after = textarea.value.substring(sel.end);
+      const lines = (sel.text || "item").split("\n");
+      const bulleted = lines.map((l) => `- ${l}`).join("\n");
+      const newValue = `${before}${bulleted}${after}`;
+      setValue(newValue);
+      break;
+    }
+    case "orderedList": {
+      const sel = getSelection(textarea);
+      const before = textarea.value.substring(0, sel.start);
+      const after = textarea.value.substring(sel.end);
+      const lines = (sel.text || "item").split("\n");
+      const numbered = lines.map((l, i) => `${i + 1}. ${l}`).join("\n");
+      const newValue = `${before}${numbered}${after}`;
+      setValue(newValue);
+      break;
+    }
+    case "heading1":
+      wrapSelection(textarea, "# ", "", setValue);
+      break;
+    case "heading2":
+      wrapSelection(textarea, "## ", "", setValue);
+      break;
+    case "heading3":
+      wrapSelection(textarea, "### ", "", setValue);
+      break;
+    case "blockquote": {
+      const sel = getSelection(textarea);
+      const before = textarea.value.substring(0, sel.start);
+      const after = textarea.value.substring(sel.end);
+      const lines = (sel.text || "quote").split("\n");
+      const quoted = lines.map((l) => `> ${l}`).join("\n");
+      const newValue = `${before}${quoted}${after}`;
+      setValue(newValue);
+      break;
+    }
+  }
+}
+const EditorContext = React.createContext(null);
+function useEditorContext() {
+  const context = React.useContext(EditorContext);
+  if (!context) {
+    throw new Error("Editor compound components must be used within an Editor");
+  }
+  return context;
+}
+function useControllableState(controlledValue, defaultValue, onChange) {
+  const [uncontrolledValue, setUncontrolledValue] = React.useState(defaultValue);
+  const isControlled = controlledValue !== void 0;
+  const value = isControlled ? controlledValue : uncontrolledValue;
+  const setValue = React.useCallback(
+    (newValue) => {
+      if (!isControlled) {
+        setUncontrolledValue(newValue);
+      }
+      onChange == null ? void 0 : onChange(newValue);
+    },
+    [isControlled, onChange]
+  );
+  return [value, setValue];
+}
+function countWords(text) {
+  const trimmed = text.trim();
+  if (!trimmed) return 0;
+  return trimmed.split(/\s+/).length;
+}
+function EditorRoot({
+  children,
+  value: controlledValue,
+  defaultValue = "",
+  onValueChange,
+  placeholder = "Start typing...",
+  disabled = false,
+  readOnly = false,
+  formats = DEFAULT_FORMATS,
+  toolbar = true,
+  statusBar = true,
+  onAutoSave,
+  autoSaveInterval = 3e4,
+  size = "md",
+  maxLength,
+  className,
+  ...htmlProps
+}) {
+  const contentRef = React.useRef(null);
+  const [value, setValue] = useControllableState(
+    controlledValue,
+    defaultValue,
+    onValueChange
+  );
+  const [saveStatus, setSaveStatus] = React.useState("idle");
+  loadTipTapDeps();
+  const hasTipTap = !_tiptapFailed && _useEditor && _EditorContent && _StarterKit;
+  const mode = hasTipTap ? "rich" : "markdown";
+  const tiptapEditor = hasTipTap ? (
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    _useEditor({
+      extensions: [
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        _StarterKit.configure({
+          heading: { levels: [1, 2, 3] },
+          blockquote: {},
+          codeBlock: false,
+          horizontalRule: false,
+          hardBreak: false
+        }),
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        _LinkExtension.configure({
+          openOnClick: false,
+          HTMLAttributes: { rel: "noopener noreferrer", target: "_blank" }
+        })
+      ],
+      editorProps: {
+        attributes: {
+          role: "textbox",
+          "aria-label": placeholder,
+          "aria-multiline": "true"
+        }
+      },
+      content: defaultValue || controlledValue || "",
+      editable: !disabled && !readOnly,
+      onUpdate: ({ editor: e }) => {
+        const html = e.getHTML();
+        setValue(html);
+      }
+    })
+  ) : null;
+  React.useEffect(() => {
+    if (tiptapEditor && controlledValue !== void 0) {
+      const currentContent = tiptapEditor.getHTML();
+      if (currentContent !== controlledValue) {
+        tiptapEditor.commands.setContent(controlledValue, false);
+      }
+    }
+  }, [controlledValue, tiptapEditor]);
+  React.useEffect(() => {
+    if (tiptapEditor) {
+      tiptapEditor.setEditable(!disabled && !readOnly);
+    }
+  }, [tiptapEditor, disabled, readOnly]);
+  React.useEffect(() => {
+    if (!onAutoSave || !value) return;
+    const timer = setTimeout(() => {
+      setSaveStatus("saving");
+      try {
+        onAutoSave(value);
+        setSaveStatus("saved");
+      } catch {
+        setSaveStatus("error");
+      }
+    }, autoSaveInterval);
+    return () => clearTimeout(timer);
+  }, [value, onAutoSave, autoSaveInterval]);
+  const toggleFormat = React.useCallback(
+    (format) => {
+      if (disabled || readOnly) return;
+      if (tiptapEditor) {
+        switch (format) {
+          case "bold":
+            tiptapEditor.chain().focus().toggleBold().run();
+            break;
+          case "italic":
+            tiptapEditor.chain().focus().toggleItalic().run();
+            break;
+          case "strikethrough":
+            tiptapEditor.chain().focus().toggleStrike().run();
+            break;
+          case "code":
+            tiptapEditor.chain().focus().toggleCode().run();
+            break;
+          case "bulletList":
+            tiptapEditor.chain().focus().toggleBulletList().run();
+            break;
+          case "orderedList":
+            tiptapEditor.chain().focus().toggleOrderedList().run();
+            break;
+          case "heading1":
+            tiptapEditor.chain().focus().toggleHeading({ level: 1 }).run();
+            break;
+          case "heading2":
+            tiptapEditor.chain().focus().toggleHeading({ level: 2 }).run();
+            break;
+          case "heading3":
+            tiptapEditor.chain().focus().toggleHeading({ level: 3 }).run();
+            break;
+          case "blockquote":
+            tiptapEditor.chain().focus().toggleBlockquote().run();
+            break;
+          case "undo":
+            tiptapEditor.chain().focus().undo().run();
+            break;
+          case "redo":
+            tiptapEditor.chain().focus().redo().run();
+            break;
+          case "link": {
+            const previousUrl = tiptapEditor.getAttributes("link").href;
+            if (previousUrl) {
+              tiptapEditor.chain().focus().unsetLink().run();
+            } else {
+              const url = window.prompt("Enter URL");
+              if (url) {
+                tiptapEditor.chain().focus().setLink({ href: url }).run();
+              }
+            }
+            break;
+          }
+        }
+      } else if (contentRef.current) {
+        applyMarkdownFormat(format, contentRef.current, setValue);
+      }
+    },
+    [disabled, readOnly, tiptapEditor, setValue]
+  );
+  const isFormatActive = React.useCallback(
+    (format) => {
+      if (!tiptapEditor) return false;
+      switch (format) {
+        case "bold":
+          return tiptapEditor.isActive("bold");
+        case "italic":
+          return tiptapEditor.isActive("italic");
+        case "strikethrough":
+          return tiptapEditor.isActive("strike");
+        case "code":
+          return tiptapEditor.isActive("code");
+        case "bulletList":
+          return tiptapEditor.isActive("bulletList");
+        case "orderedList":
+          return tiptapEditor.isActive("orderedList");
+        case "heading1":
+          return tiptapEditor.isActive("heading", { level: 1 });
+        case "heading2":
+          return tiptapEditor.isActive("heading", { level: 2 });
+        case "heading3":
+          return tiptapEditor.isActive("heading", { level: 3 });
+        case "blockquote":
+          return tiptapEditor.isActive("blockquote");
+        case "link":
+          return tiptapEditor.isActive("link");
+        case "undo":
+        case "redo":
+          return false;
+        // Actions don't have active state
+        default:
+          return false;
+      }
+    },
+    [tiptapEditor]
+  );
+  const wordCount = React.useMemo(() => {
+    var _a;
+    if (tiptapEditor) {
+      const text = ((_a = tiptapEditor.getText) == null ? void 0 : _a.call(tiptapEditor)) ?? "";
+      return countWords(text);
+    }
+    return countWords(value);
+  }, [value, tiptapEditor]);
+  const charCount = React.useMemo(() => {
+    var _a;
+    if (tiptapEditor) {
+      return (((_a = tiptapEditor.getText) == null ? void 0 : _a.call(tiptapEditor)) ?? "").length;
+    }
+    return value.length;
+  }, [value, tiptapEditor]);
+  const contextValue = {
+    value,
+    setValue,
+    placeholder,
+    disabled,
+    readOnly,
+    formats,
+    editor: tiptapEditor,
+    mode,
+    size,
+    maxLength,
+    wordCount,
+    charCount,
+    toggleFormat,
+    isFormatActive,
+    saveStatus,
+    contentRef
+  };
+  const classes = [
+    styles.editor,
+    disabled && styles.disabled,
+    readOnly && styles.readOnly,
+    className
+  ].filter(Boolean).join(" ");
+  const hasCustomChildren = children !== void 0;
+  return /* @__PURE__ */ jsx(EditorContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx(
+    "div",
+    {
+      ...htmlProps,
+      className: classes,
+      "data-disabled": disabled || void 0,
+      "data-readonly": readOnly || void 0,
+      "data-size": size,
+      children: hasCustomChildren ? children : /* @__PURE__ */ jsxs(Fragment, { children: [
+        toolbar && /* @__PURE__ */ jsx(EditorToolbar, { children: /* @__PURE__ */ jsx(EditorToolbarGroup, { "aria-label": "Text formatting", children: formats.map((f) => /* @__PURE__ */ jsx(EditorToolbarButton, { format: f }, f)) }) }),
+        /* @__PURE__ */ jsx(EditorContentArea, {}),
+        statusBar && /* @__PURE__ */ jsx(EditorStatusBar, { showWordCount: true, showCharCount: true })
+      ] })
+    }
+  ) });
+}
+function EditorToolbar({ children, className }) {
+  const classes = [styles.toolbar, className].filter(Boolean).join(" ");
+  return /* @__PURE__ */ jsx("div", { className: classes, role: "toolbar", "aria-label": "Editor formatting", children });
+}
+function EditorToolbarGroup({ children, "aria-label": ariaLabel, className }) {
+  const classes = [styles.toolbarGroup, className].filter(Boolean).join(" ");
+  return /* @__PURE__ */ jsx("div", { className: classes, role: "group", "aria-label": ariaLabel, children });
+}
+function EditorToolbarButton({ format, className }) {
+  const { toggleFormat, isFormatActive, disabled, readOnly, editor, mode } = useEditorContext();
+  const meta = FORMAT_META[format];
+  const isAction = ACTION_FORMATS.has(format);
+  const active = isAction ? false : isFormatActive(format);
+  const IconComponent = meta.icon;
+  let isDisabled = disabled || readOnly;
+  if (isAction && !isDisabled) {
+    if (mode === "markdown") {
+      isDisabled = true;
+    } else if (editor) {
+      isDisabled = format === "undo" ? !editor.can().undo() : !editor.can().redo();
+    }
+  }
+  const classes = [
+    styles.toolbarButton,
+    active && styles.toolbarButtonActive,
+    className
+  ].filter(Boolean).join(" ");
+  return /* @__PURE__ */ jsx(
+    "button",
+    {
+      type: "button",
+      className: classes,
+      onClick: () => toggleFormat(format),
+      disabled: isDisabled,
+      "aria-label": meta.label,
+      title: `${meta.label} (${meta.shortcut})`,
+      ...isAction ? {} : { "aria-pressed": active },
+      children: /* @__PURE__ */ jsx(IconComponent, { size: 16, weight: active ? "bold" : "regular" })
+    }
+  );
+}
+function EditorSeparator({ className }) {
+  const classes = [styles.separator, className].filter(Boolean).join(" ");
+  return /* @__PURE__ */ jsx("div", { className: classes, role: "separator", "aria-orientation": "vertical" });
+}
+function EditorStatusIndicator({ status: statusOverride, labels, className }) {
+  const { saveStatus } = useEditorContext();
+  const status = statusOverride ?? saveStatus;
+  const mergedLabels = { ...DEFAULT_STATUS_LABELS, ...labels };
+  const label = mergedLabels[status];
+  if (!label) return null;
+  const classes = [
+    styles.statusIndicator,
+    status === "error" && styles.statusError,
+    className
+  ].filter(Boolean).join(" ");
+  return /* @__PURE__ */ jsx("span", { className: classes, "aria-live": "polite", role: "status", children: label });
+}
+function EditorContentArea({ className }) {
+  const { value, setValue, placeholder, disabled, readOnly, editor, mode, contentRef } = useEditorContext();
+  if (mode === "rich" && editor && _EditorContent) {
+    const TipTapContent = _EditorContent;
+    const classes2 = [styles.content, styles.contentRich, className].filter(Boolean).join(" ");
+    return /* @__PURE__ */ jsx("div", { className: classes2, "data-placeholder": placeholder, children: /* @__PURE__ */ jsx(TipTapContent, { editor }) });
+  }
+  const classes = [styles.content, className].filter(Boolean).join(" ");
+  return /* @__PURE__ */ jsx("div", { className: classes, children: /* @__PURE__ */ jsx(
+    "textarea",
+    {
+      ref: contentRef,
+      className: styles.contentTextarea,
+      value,
+      onChange: (e) => setValue(e.target.value),
+      placeholder,
+      disabled,
+      readOnly,
+      "aria-label": placeholder
+    }
+  ) });
+}
+function EditorStatusBar({ showWordCount = true, showCharCount = true, className }) {
+  const { wordCount, charCount, maxLength } = useEditorContext();
+  const classes = [styles.statusBar, className].filter(Boolean).join(" ");
+  const isOverLimit = maxLength !== void 0 && charCount > maxLength;
+  const isNearLimit = maxLength !== void 0 && !isOverLimit && charCount >= maxLength * 0.9;
+  const charLimitClasses = [
+    styles.statusBarItem,
+    isNearLimit && styles.statusBarItemWarning,
+    isOverLimit && styles.statusBarItemError
+  ].filter(Boolean).join(" ");
+  return /* @__PURE__ */ jsxs("div", { className: classes, "aria-label": "Editor statistics", children: [
+    /* @__PURE__ */ jsx("div", { className: styles.statusBarLeft }),
+    /* @__PURE__ */ jsxs("div", { className: styles.statusBarRight, children: [
+      showWordCount && /* @__PURE__ */ jsxs("span", { className: styles.statusBarItem, children: [
+        wordCount,
+        " ",
+        wordCount === 1 ? "Word" : "Words"
+      ] }),
+      showWordCount && showCharCount && /* @__PURE__ */ jsx(EditorSeparator, {}),
+      showCharCount && /* @__PURE__ */ jsx("span", { className: charLimitClasses, children: maxLength !== void 0 ? `${charCount} / ${maxLength}` : `${charCount} ${charCount === 1 ? "Character" : "Characters"}` })
+    ] })
+  ] });
+}
+const Editor = Object.assign(EditorRoot, {
+  Toolbar: EditorToolbar,
+  ToolbarGroup: EditorToolbarGroup,
+  ToolbarButton: EditorToolbarButton,
+  Separator: EditorSeparator,
+  StatusIndicator: EditorStatusIndicator,
+  Content: EditorContentArea,
+  StatusBar: EditorStatusBar
+});
+export {
+  Editor,
+  EditorContentArea,
+  EditorRoot,
+  EditorSeparator,
+  EditorStatusBar,
+  EditorStatusIndicator,
+  EditorToolbar,
+  EditorToolbarButton,
+  EditorToolbarGroup,
+  useEditorContext
+};
+//# sourceMappingURL=index.js.map