@kennycorrea/ui 0.5.0 → 0.6.0

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # Changelog
 
+## 0.6.0 — 2026-10-07
+
+### Added
+- **`RichText`**: a Tiptap editor (StarterKit) under a Radix `Toolbar`. Marks (bold, italic,
+  strikethrough) are a multiple `ToggleGroup`, blocks (heading, bulleted, numbered list) a single
+  one, so the toolbar is one tab stop with arrow keys. `value`/`onChange` speak HTML; also
+  `placeholder`, `disabled`, `invalid`, `rows`, `aria-label`/`aria-labelledby`, and a ref
+  exposing `{ editor, focus }`.
+  Styled as a Themes `TextArea` (surface, size 2) from public tokens — border, focus ring,
+  background, invalid and disabled states — in `.ui-richtext*` in `tokens.css`.
+- `UiStrings` gains `formatting`, `bold`, `italic`, `strike`, `heading`, `bulletList`,
+  `orderedList` (English defaults; hosts should translate them).
+
+### Requires
+- `tokens.css` imported; the editor is unstyled without it.
+
 ## 0.5.0 — 2026-10-06
 
 ### Added

package/dist/atoms/RichText/RichText.d.ts

@@ -0,0 +1,31 @@
+import { type Editor } from '@tiptap/react';
+export interface RichTextProps {
+    /** HTML. Later changes from outside replace the document. */
+    value?: string;
+    /** Called with the document as HTML on every edit. */
+    onChange?: (html: string) => void;
+    placeholder?: string;
+    disabled?: boolean;
+    invalid?: boolean;
+    /** Minimum editable height in rows of text, like `Textarea`'s `rows`. */
+    rows?: number;
+    /** Accessible name of the editing surface. */
+    'aria-label'?: string;
+    'aria-labelledby'?: string;
+    id?: string;
+    className?: string;
+}
+/** Imperative access for hosts that need to focus or drive the editor directly. */
+export interface RichTextHandle {
+    editor: Editor | null;
+    focus: () => void;
+}
+/**
+ * Tiptap's editing surface under a Radix Toolbar, dressed as a Themes `TextArea`.
+ *
+ * Radix has no rich-text canvas, so the container borrows the TextArea's look from Themes'
+ * public tokens (`.ui-richtext*` in `tokens.css`) rather than its classes — a Themes release
+ * can rename `.rt-TextAreaRoot` without breaking this. Marks are a multiple ToggleGroup, block
+ * types a single one, so the whole toolbar is one tab stop with arrow-key navigation.
+ */
+export declare const RichText: import("react").ForwardRefExoticComponent<RichTextProps & import("react").RefAttributes<RichTextHandle>>;

package/dist/atoms/RichText/RichText.js

@@ -0,0 +1,98 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as Toolbar from '@radix-ui/react-toolbar';
+import { EditorContent, useEditor, useEditorState } from '@tiptap/react';
+import StarterKit from '@tiptap/starter-kit';
+import { forwardRef, useEffect, useImperativeHandle, useRef } from 'react';
+import { useUiStrings } from '../../strings.js';
+import { cn } from '../../utils/cn.js';
+const MARKS = ['bold', 'italic', 'strike'];
+/**
+ * Tiptap's editing surface under a Radix Toolbar, dressed as a Themes `TextArea`.
+ *
+ * Radix has no rich-text canvas, so the container borrows the TextArea's look from Themes'
+ * public tokens (`.ui-richtext*` in `tokens.css`) rather than its classes — a Themes release
+ * can rename `.rt-TextAreaRoot` without breaking this. Marks are a multiple ToggleGroup, block
+ * types a single one, so the whole toolbar is one tab stop with arrow-key navigation.
+ */
+export const RichText = forwardRef(function RichText({ value, onChange, placeholder, disabled = false, invalid = false, rows = 3, id, className, 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledby, }, ref) {
+    const strings = useUiStrings();
+    const attributes = {
+        class: 'ui-richtext-content',
+        role: 'textbox',
+        'aria-multiline': 'true',
+    };
+    if (ariaLabel)
+        attributes['aria-label'] = ariaLabel;
+    if (ariaLabelledby)
+        attributes['aria-labelledby'] = ariaLabelledby;
+    if (invalid)
+        attributes['aria-invalid'] = 'true';
+    if (placeholder)
+        attributes['data-placeholder'] = placeholder;
+    if (id)
+        attributes.id = id;
+    // ProseMirror calls this on every view update, so props that change later still apply.
+    const attributesRef = useRef(attributes);
+    attributesRef.current = attributes;
+    const editor = useEditor({
+        extensions: [StarterKit.configure({ link: false })],
+        content: value ?? '',
+        editable: !disabled,
+        immediatelyRender: false,
+        editorProps: { attributes: () => attributesRef.current },
+        onUpdate: ({ editor: e }) => onChange?.(e.getHTML()),
+    });
+    useImperativeHandle(ref, () => ({ editor, focus: () => editor?.commands.focus() }), [editor]);
+    useEffect(() => {
+        editor?.setEditable(!disabled);
+    }, [editor, disabled]);
+    // Only push an outside value in when it differs, or every keystroke would reset the caret.
+    useEffect(() => {
+        if (editor && value !== undefined && value !== editor.getHTML()) {
+            editor.commands.setContent(value, { emitUpdate: false });
+        }
+    }, [editor, value]);
+    const state = useEditorState({
+        editor,
+        selector: ({ editor: e }) => {
+            if (!e)
+                return { marks: [], block: '', empty: true };
+            return {
+                marks: MARKS.filter((m) => e.isActive(m)),
+                block: e.isActive('heading', { level: 2 })
+                    ? 'h2'
+                    : e.isActive('bulletList')
+                        ? 'bullet'
+                        : e.isActive('orderedList')
+                            ? 'ordered'
+                            : '',
+                empty: e.isEmpty,
+            };
+        },
+    }) ?? { marks: [], block: '', empty: true };
+    const setMarks = (next) => {
+        if (!editor)
+            return;
+        const chain = editor.chain().focus();
+        for (const mark of MARKS) {
+            if (next.includes(mark) !== state.marks.includes(mark))
+                chain.toggleMark(mark);
+        }
+        chain.run();
+    };
+    const setBlock = (next) => {
+        if (!editor)
+            return;
+        // Radix reports '' when the active item is pressed again: toggle that one off.
+        const target = (next || state.block);
+        const chain = editor.chain().focus();
+        if (target === 'h2')
+            chain.toggleHeading({ level: 2 });
+        else if (target === 'bullet')
+            chain.toggleBulletList();
+        else if (target === 'ordered')
+            chain.toggleOrderedList();
+        chain.run();
+    };
+    return (_jsxs("div", { className: cn('ui-richtext', className), "data-disabled": disabled || undefined, "data-invalid": invalid || undefined, "data-empty": state.empty || undefined, style: { ['--ui-richtext-rows']: rows }, children: [_jsxs(Toolbar.Root, { className: "ui-richtext-toolbar", "aria-label": strings.formatting, children: [_jsxs(Toolbar.ToggleGroup, { type: "multiple", className: "ui-richtext-group", value: state.marks, onValueChange: setMarks, disabled: disabled, children: [_jsx(Toolbar.ToggleItem, { className: "ui-richtext-item", value: "bold", "aria-label": strings.bold, children: _jsx("b", { "aria-hidden": true, children: "B" }) }), _jsx(Toolbar.ToggleItem, { className: "ui-richtext-item", value: "italic", "aria-label": strings.italic, children: _jsx("i", { "aria-hidden": true, children: "I" }) }), _jsx(Toolbar.ToggleItem, { className: "ui-richtext-item", value: "strike", "aria-label": strings.strike, children: _jsx("s", { "aria-hidden": true, children: "S" }) })] }), _jsx(Toolbar.Separator, { className: "ui-richtext-separator" }), _jsxs(Toolbar.ToggleGroup, { type: "single", className: "ui-richtext-group", value: state.block, onValueChange: setBlock, disabled: disabled, children: [_jsx(Toolbar.ToggleItem, { className: "ui-richtext-item", value: "h2", "aria-label": strings.heading, children: _jsx("span", { "aria-hidden": true, children: "H" }) }), _jsx(Toolbar.ToggleItem, { className: "ui-richtext-item", value: "bullet", "aria-label": strings.bulletList, children: _jsx("span", { "aria-hidden": true, children: "\u2022" }) }), _jsx(Toolbar.ToggleItem, { className: "ui-richtext-item", value: "ordered", "aria-label": strings.orderedList, children: _jsx("span", { "aria-hidden": true, children: "1." }) })] })] }), _jsx(EditorContent, { editor: editor, className: "ui-richtext-body" })] }));
+});

package/dist/atoms/RichText/index.d.ts

@@ -0,0 +1 @@
+export * from './RichText.js';

package/dist/atoms/RichText/index.js

@@ -0,0 +1 @@
+export * from './RichText.js';

package/dist/atoms/index.d.ts

@@ -10,6 +10,7 @@ export * from './Input/index.js';
 export * from './Label/index.js';
 export * from './Popover/index.js';
 export * from './Progress/index.js';
+export * from './RichText/index.js';
 export * from './Select/index.js';
 export * from './Separator/index.js';
 export * from './Slider/index.js';

package/dist/atoms/index.js

@@ -10,6 +10,7 @@ export * from './Input/index.js';
 export * from './Label/index.js';
 export * from './Popover/index.js';
 export * from './Progress/index.js';
+export * from './RichText/index.js';
 export * from './Select/index.js';
 export * from './Separator/index.js';
 export * from './Slider/index.js';

package/dist/strings.d.ts

@@ -20,6 +20,14 @@ export interface UiStrings {
     select: string;
     /** The accessible name of a toast's close button. */
     dismiss: string;
+    /** RichText's toolbar and the names of its buttons. */
+    formatting: string;
+    bold: string;
+    italic: string;
+    strike: string;
+    heading: string;
+    bulletList: string;
+    orderedList: string;
 }
 /**
  * Feeds the atoms their strings, once, near the root.

package/dist/strings.js

@@ -4,6 +4,13 @@ const DEFAULTS = {
     loading: 'Loading',
     select: 'Choose…',
     dismiss: 'Dismiss',
+    formatting: 'Formatting',
+    bold: 'Bold',
+    italic: 'Italic',
+    strike: 'Strikethrough',
+    heading: 'Heading',
+    bulletList: 'Bulleted list',
+    orderedList: 'Numbered list',
 };
 const StringsContext = createContext(DEFAULTS);
 /**

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kennycorrea/ui",
-  "version": "0.5.0",
+  "version": "0.6.0",
   "description": "Upfront's house component layer: atoms over Radix Themes, the token bridge, and the accent logic.",
   "private": false,
   "type": "module",
@@ -37,6 +37,10 @@
   "dependencies": {
     "@radix-ui/react-slider": "^1.5.0",
     "@radix-ui/react-toast": "^1.2.23",
+    "@radix-ui/react-toolbar": "^1.1.20",
+    "@tiptap/pm": "^3.31.4",
+    "@tiptap/react": "^3.31.4",
+    "@tiptap/starter-kit": "^3.31.4",
     "clsx": "^2.1.1",
     "tailwind-merge": "^3.7.0"
   },

package/tokens.css

@@ -374,3 +374,84 @@
 .ui-slider-thumb[data-disabled],
 .ui-slider-thumb[data-disabled]::after { cursor: var(--cursor-disabled); }
 .ui-slider-thumb[data-disabled]::after { background-color: var(--gray-1); box-shadow: 0 0 0 1px var(--gray-6); }
+
+/*
+ * RichText: Tiptap under a Radix Toolbar, dressed as a Themes TextArea (variant surface,
+ * size 2) from public tokens only, for the same reason as the slider above.
+ */
+.ui-richtext {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  box-sizing: border-box;
+  border-radius: var(--radius-2);
+  background-color: var(--color-surface);
+  box-shadow: inset 0 0 0 1px var(--gray-a7);
+  color: var(--gray-12);
+  font-family: var(--default-font-family);
+  font-size: var(--font-size-2);
+  line-height: var(--line-height-2);
+  letter-spacing: var(--letter-spacing-2);
+  overflow: hidden;
+}
+.ui-richtext:focus-within { outline: 2px solid var(--focus-8); outline-offset: -1px; }
+.ui-richtext[data-invalid] { box-shadow: inset 0 0 0 1px var(--red-a8); }
+.ui-richtext[data-invalid]:focus-within { outline-color: var(--red-8); }
+.ui-richtext[data-disabled] {
+  background-color: var(--gray-a2);
+  box-shadow: inset 0 0 0 1px var(--gray-a6);
+  color: var(--gray-a11);
+  cursor: var(--cursor-disabled);
+}
+
+.ui-richtext-toolbar {
+  display: flex;
+  align-items: center;
+  gap: var(--space-1);
+  padding: var(--space-1);
+  border-bottom: 1px solid var(--gray-a5);
+}
+.ui-richtext-group { display: flex; gap: 2px; }
+.ui-richtext-separator { width: 1px; align-self: stretch; margin: 2px var(--space-1); background-color: var(--gray-a5); }
+.ui-richtext-item {
+  all: unset;
+  box-sizing: border-box;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: var(--space-6);
+  height: var(--space-6);
+  padding: 0 var(--space-1);
+  border-radius: var(--radius-1);
+  color: var(--gray-11);
+  font-size: var(--font-size-2);
+}
+.ui-richtext-item:hover:not([data-disabled]) { background-color: var(--gray-a3); }
+.ui-richtext-item[data-state="on"] { background-color: var(--accent-a4); color: var(--accent-a11); }
+.ui-richtext-item:focus-visible { outline: 2px solid var(--focus-8); outline-offset: -1px; }
+.ui-richtext-item[data-disabled] { color: var(--gray-a8); cursor: var(--cursor-disabled); }
+
+.ui-richtext-body { position: relative; }
+.ui-richtext-content {
+  min-height: calc(var(--ui-richtext-rows, 3) * var(--line-height-2));
+  padding: calc(var(--space-2) - 1px) calc(var(--space-3) - 1px);
+  outline: none;
+  overflow-wrap: break-word;
+}
+.ui-richtext-content > :first-child { margin-top: 0; }
+.ui-richtext-content > :last-child { margin-bottom: 0; }
+.ui-richtext-content p { margin: 0 0 var(--space-2); }
+.ui-richtext-content h2 {
+  margin: var(--space-3) 0 var(--space-2);
+  font-size: var(--font-size-4);
+  line-height: var(--line-height-4);
+  font-weight: var(--font-weight-bold);
+}
+.ui-richtext-content ul,
+.ui-richtext-content ol { margin: 0 0 var(--space-2); padding-left: var(--space-5); }
+.ui-richtext[data-empty] .ui-richtext-content::before {
+  content: attr(data-placeholder);
+  position: absolute;
+  pointer-events: none;
+  color: var(--gray-a10);
+}