@kennycorrea/ui 0.4.0 → 0.6.0

package/CHANGELOG.md

@@ -0,0 +1,43 @@
+# 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
+- **`Slider` `fillFrom`**: fills from a fixed value to the thumb, in either direction, instead of
+  from `min`. Same units as `value`, clamped to [min, max]; nothing is filled when the thumb sits
+  on it. The fill's ends line up with the thumb's centre at every value, using Radix's own
+  in-bounds offset. Built on `@radix-ui/react-slider` and styled from Themes' public tokens
+  (`.ui-slider*` in `tokens.css`), because Themes' slider gives no way to place its range —
+  consumers overriding `.rt-SliderRange` can drop that CSS.
+  Single horizontal left-to-right thumb only: with two thumbs, `orientation="vertical"`,
+  `inverted` or `dir="rtl"` it is ignored with a development warning. Margin props are not
+  supported on this path; wrap it in a `Box`.
+- **`Slider` `marks`**: `{ value, label }[]` drawn as an `aria-hidden` scale above the track,
+  each centred on its value, the first and last growing inwards so neither overflows.
+- Unit tests (Vitest + Testing Library); `npm test` now runs them after lint and types.
+
+### Unchanged
+- Without `fillFrom`, `Slider` is still the Radix Themes slider, rendered exactly as in 0.4.0.
+
+### Requires
+- `tokens.css` imported, as it already must be for toasts — the `fillFrom` path is unstyled
+  without it.
+
+## 0.4.0
+- `Slider` atom over Radix Themes' slider; `label` required.

package/README.md

@@ -204,8 +204,8 @@ blaming the workflow:
   because there is no one there to type a one-time password. That failure reads like a bad
   credential and is not one.
 
-⚠ **`npm test` has to keep existing.** It is lint plus a typecheck rather than unit tests — there
-are no unit tests here — and it is load-bearing for a reason that has nothing to do with quality:
+⚠ **`npm test` has to keep existing.** It is lint, a typecheck and (since 0.5.0) the Vitest suite — and
+it is load-bearing for a reason that has nothing to do with quality:
 without a `test` script the `build` job fails on `Missing script: "test"`, `publish-npm` never
 runs because it needs `build`, and **the release publishes nothing while looking like it worked.**
 That was the state when the workflow was first added.
@@ -270,3 +270,20 @@ becomes the `aria-label`, because a slider has no visible text of its own.
 ```
 
 Values are arrays, as in Radix: one entry per thumb.
+
+## Slider fill origin and marks — 0.5.0
+
+```tsx
+const marks = [0, 6, 11, 16, 22, 29].map((value) => ({ value, label: String(value) }));
+<Slider label="Budget cycle" min={0} max={29} value={day} onValueChange={setDay}
+  fillFrom={16} marks={marks} />
+```
+
+`fillFrom` fills from that value to the thumb, either way. Themes' slider cannot place its
+range, so with `fillFrom` the atom is built on `@radix-ui/react-slider` and styled by
+`.ui-slider*` in `tokens.css` from Themes' public tokens — no `.rt-*` class is touched.
+Without it, nothing changed. Limits and details: [CHANGELOG.md](CHANGELOG.md); a full example
+is in `examples/BudgetCycleSlider.tsx`.
+
+⚠ `--ui-slider-thumb-size` mirrors Themes' size-2 thumb (`--space-2 + --space-1`). The fill
+and the marks are placed from it, so if Themes ever resizes its thumb, change it there.

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/Slider/Slider.d.ts

@@ -1,10 +1,24 @@
 import { Slider as ThemedSlider } from '@radix-ui/themes';
 import { type ComponentPropsWithoutRef } from 'react';
-export interface SliderProps extends Omit<ComponentPropsWithoutRef<typeof ThemedSlider>, 'size' | 'aria-label'> {
+type ThemedProps = ComponentPropsWithoutRef<typeof ThemedSlider>;
+export interface SliderMark {
+    value: number;
+    label: string;
+}
+export interface SliderProps extends Omit<ThemedProps, 'size' | 'aria-label'> {
     /**
      * Required: a slider has no visible text of its own, so without this a screen reader
      * announces a bare number with nothing to say what it measures.
      */
     label: string;
+    /**
+     * Fill from this value to the thumb instead of from `min`, in either direction — for a scale
+     * with a meaningful middle. Same units as `value`, clamped to [min, max]. Only for one
+     * horizontal left-to-right thumb; anything else ignores it and warns in development.
+     */
+    fillFrom?: number;
+    /** A scale drawn above the track. Decorative: the slider already announces its value. */
+    marks?: SliderMark[];
 }
 export declare const Slider: import("react").ForwardRefExoticComponent<SliderProps & import("react").RefAttributes<HTMLSpanElement>>;
+export {};

package/dist/atoms/Slider/Slider.js

@@ -1,7 +1,74 @@
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as SliderPrimitive from '@radix-ui/react-slider';
 import { Slider as ThemedSlider } from '@radix-ui/themes';
-import { forwardRef } from 'react';
+import { forwardRef, useState } from 'react';
 import { cn } from '../../utils/cn.js';
-export const Slider = forwardRef(function Slider({ label, className, ...props }, ref) {
-    return (_jsx(ThemedSlider, { ref: ref, size: "2", "aria-label": label, className: cn(className), ...props }));
+import { fillEdges, fillStyle, percentOf, thumbCentre } from './geometry.js';
+const MARGIN_KEYS = ['m', 'mx', 'my', 'mt', 'mr', 'mb', 'ml'];
+const isDev = globalThis.process?.env?.NODE_ENV !==
+    'production';
+/** Why `fillFrom` cannot be honoured, or null when it can. */
+function fillFromUnsupported(props, thumbs) {
+    if (thumbs !== 1)
+        return `it needs exactly one thumb, and this slider has ${thumbs}`;
+    if (props.orientation === 'vertical')
+        return 'vertical sliders are not supported';
+    if (props.inverted)
+        return 'inverted sliders are not supported';
+    if (props.dir === 'rtl')
+        return 'right-to-left sliders are not supported';
+    return null;
+}
+export const Slider = forwardRef(function Slider(props, ref) {
+    const { label, fillFrom, marks, className, onValueChange, ...rest } = props;
+    const min = rest.min ?? 0;
+    const max = rest.max ?? 100;
+    // Mirrored so the fill can follow an uncontrolled slider too.
+    const [inner, setInner] = useState(rest.defaultValue ?? [min]);
+    const values = rest.value ?? inner;
+    const handleChange = (next) => {
+        setInner(next);
+        onValueChange?.(next);
+    };
+    const unsupported = fillFrom === undefined ? null : fillFromUnsupported(props, values.length);
+    if (unsupported && isDev)
+        console.warn(`Slider: fillFrom is ignored — ${unsupported}.`);
+    const slider = fillFrom !== undefined && !unsupported ? (_jsx(FillFromSlider, { ref: ref, ...rest, label: label, className: className, values: values, fillFrom: fillFrom, min: min, max: max, onValueChange: handleChange })) : (_jsx(ThemedSlider, { ref: ref, size: "2", "aria-label": label, className: cn(className), ...rest, onValueChange: handleChange }));
+    if (!marks?.length)
+        return slider;
+    return (_jsxs("div", { className: "ui-slider-field", children: [_jsx(SliderMarks, { marks: marks, min: min, max: max }), slider] }));
 });
+/**
+ * Radix Themes draws its range itself and offers no way to place it, so this path is built on the
+ * primitives and styled in `tokens.css` (`.ui-slider*`) from Themes' public tokens — never by
+ * reaching into Themes' own class names.
+ */
+const FillFromSlider = forwardRef(function FillFromSlider({ label, values, fillFrom, min, max, className, color, radius, variant, highContrast, defaultValue: _uncontrolledHandledAbove, tabIndex, ...rest }, ref) {
+    const primitiveProps = {};
+    let droppedMargin = false;
+    for (const [key, val] of Object.entries(rest)) {
+        if (MARGIN_KEYS.includes(key))
+            droppedMargin = true;
+        else
+            primitiveProps[key] = val;
+    }
+    if (droppedMargin && isDev) {
+        console.warn('Slider: margin props are not supported with fillFrom — wrap it in a Box.');
+    }
+    const edges = fillEdges(values[0] ?? min, fillFrom, min, max);
+    return (_jsxs(SliderPrimitive.Root, { ref: ref, ...primitiveProps, value: values, min: min, max: max, "aria-label": label, "data-accent-color": color, "data-radius": radius, "data-variant": variant ?? 'surface', className: cn('ui-slider', highContrast && 'ui-slider-high-contrast', className), children: [_jsx(SliderPrimitive.Track, { className: "ui-slider-track", children: _jsx("span", { className: "ui-slider-fill", "data-fill": "", "data-empty": edges.from === edges.to ? '' : undefined, "data-disabled": rest.disabled ? '' : undefined, style: fillStyle(edges) }) }), _jsx(SliderPrimitive.Thumb, { className: "ui-slider-thumb", "aria-label": label, ...(tabIndex !== undefined ? { tabIndex } : undefined) })] }));
+});
+function SliderMarks({ marks, min, max }) {
+    const sorted = [...marks].sort((a, b) => a.value - b.value);
+    const last = sorted.length - 1;
+    return (_jsx("div", { className: "ui-slider-marks", "aria-hidden": true, children: sorted.map((mark, i) => {
+            const centre = thumbCentre(percentOf(mark.value, min, max));
+            // Centred over its value, except the two ends, which grow inwards so neither overflows.
+            let style = { left: centre, transform: 'translateX(-50%)' };
+            if (last > 0 && i === 0)
+                style = { left: centre };
+            if (last > 0 && i === last)
+                style = { right: `calc(100% - ${centre})` };
+            return (_jsx("span", { "data-mark": mark.value, style: style, children: mark.label }, `${mark.value}-${mark.label}`));
+        }) }));
+}

package/dist/atoms/Slider/geometry.d.ts

@@ -0,0 +1,23 @@
+/**
+ * The same maths Radix's slider uses to place a thumb, so anything we draw on the track lines up
+ * with the thumb's centre. Radix keeps the thumb inside the track by nudging it inwards by up to
+ * half its width at the ends (`getThumbInBoundsOffset`): `+half` at 0%, nothing at 50%, `-half`
+ * at 100%. Written as CSS against `--ui-slider-thumb-size` so no element has to be measured.
+ */
+/** Radix's `convertValueToPercentage`: 0–100, clamped. */
+export declare function percentOf(value: number, min: number, max: number): number;
+/** Distance from the track's left edge to the centre of a thumb sitting at `percent`. */
+export declare function thumbCentre(percent: number): string;
+export interface FillEdges {
+    /** Percent of the lower end, clamped to the track. */
+    from: number;
+    /** Percent of the higher end. Equal to `from` when nothing is filled. */
+    to: number;
+}
+/** The stretch between `fillFrom` and the thumb, whichever is lower to whichever is higher. */
+export declare function fillEdges(value: number, fillFrom: number, min: number, max: number): FillEdges;
+/** Inline position of the fill: left edge at the lower centre, right edge at the higher one. */
+export declare function fillStyle({ from, to }: FillEdges): {
+    left: string;
+    right: string;
+};

package/dist/atoms/Slider/geometry.js

@@ -0,0 +1,27 @@
+/**
+ * The same maths Radix's slider uses to place a thumb, so anything we draw on the track lines up
+ * with the thumb's centre. Radix keeps the thumb inside the track by nudging it inwards by up to
+ * half its width at the ends (`getThumbInBoundsOffset`): `+half` at 0%, nothing at 50%, `-half`
+ * at 100%. Written as CSS against `--ui-slider-thumb-size` so no element has to be measured.
+ */
+const clamp = (n, lo, hi) => Math.min(hi, Math.max(lo, n));
+/** Radix's `convertValueToPercentage`: 0–100, clamped. */
+export function percentOf(value, min, max) {
+    if (max === min)
+        return 0;
+    return clamp(((value - min) / (max - min)) * 100, 0, 100);
+}
+/** Distance from the track's left edge to the centre of a thumb sitting at `percent`. */
+export function thumbCentre(percent) {
+    return `calc(${percent}% + var(--ui-slider-thumb-size) * ${0.5 - percent / 100})`;
+}
+/** The stretch between `fillFrom` and the thumb, whichever is lower to whichever is higher. */
+export function fillEdges(value, fillFrom, min, max) {
+    const a = percentOf(value, min, max);
+    const b = percentOf(fillFrom, min, max);
+    return { from: Math.min(a, b), to: Math.max(a, b) };
+}
+/** Inline position of the fill: left edge at the lower centre, right edge at the higher one. */
+export function fillStyle({ from, to }) {
+    return { left: thumbCentre(from), right: `calc(100% - ${thumbCentre(to)})` };
+}

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.4.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",
@@ -8,7 +8,8 @@
   "files": [
     "dist",
     "tokens.css",
-    "README.md"
+    "README.md",
+    "CHANGELOG.md"
   ],
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",
@@ -25,7 +26,8 @@
     "lint": "biome check .",
     "format": "biome check --write .",
     "prepublishOnly": "npm run build",
-    "test": "biome check . && tsc -p tsconfig.json --noEmit"
+    "test": "biome check . && tsc -p tsconfig.test.json && vitest run",
+    "test:watch": "vitest"
   },
   "peerDependencies": {
     "@radix-ui/themes": "^3.3.0",
@@ -33,18 +35,27 @@
     "react-dom": "^19.0.0"
   },
   "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"
   },
   "devDependencies": {
     "@biomejs/biome": "^2.5.13",
     "@radix-ui/themes": "^3.3.0",
+    "@testing-library/react": "^16.3.3",
+    "@testing-library/user-event": "^14.6.7",
     "@types/react": "^19.2.18",
     "@types/react-dom": "^19.2.7",
+    "jsdom": "^30.1.2",
     "react": "^19.2.8",
     "react-dom": "^19.2.8",
-    "typescript": "~6.0.2"
+    "typescript": "~6.0.2",
+    "vitest": "^5.0.3"
   },
   "publishConfig": {
     "access": "public"

package/tokens.css

@@ -261,3 +261,197 @@
 @media (prefers-reduced-motion: reduce) {
   .ui-toast[data-state] { animation-duration: 1ms; }
 }
+
+/**
+ * Slider with `fillFrom` — built on @radix-ui/react-slider because Radix Themes gives no way to
+ * place its range. Mirrors Themes' size-2 slider using only its public tokens, so a Themes
+ * release cannot break it by renaming a class. Keep `--ui-slider-thumb-size` in step with
+ * Themes' `--slider-thumb-size`: the fill and the marks are positioned from it.
+ */
+.ui-slider-field,
+.ui-slider {
+  --ui-slider-track-size: var(--space-2);
+  --ui-slider-thumb-size: calc(var(--ui-slider-track-size) + var(--space-1));
+}
+.ui-slider-field { display: flex; flex-direction: column; gap: var(--space-2); flex-grow: 1; width: 100%; }
+.ui-slider-marks {
+  position: relative;
+  height: var(--line-height-1);
+  font-size: var(--font-size-1);
+  line-height: var(--line-height-1);
+  color: var(--gray-11);
+}
+.ui-slider-marks > span { position: absolute; top: 0; white-space: nowrap; }
+
+.ui-slider {
+  --ui-slider-thumb-shadow: 0 0 0 1px var(--black-a4);
+  position: relative;
+  display: flex;
+  align-items: center;
+  flex-grow: 1;
+  width: 100%;
+  height: var(--ui-slider-track-size);
+  border-radius: max(
+    calc(var(--radius-factor) * var(--ui-slider-track-size) / 3),
+    calc(var(--radius-factor) * var(--radius-thumb))
+  );
+  user-select: none;
+  touch-action: none;
+}
+.ui-slider-track {
+  position: relative;
+  overflow: hidden;
+  flex-grow: 1;
+  height: var(--ui-slider-track-size);
+  border-radius: inherit;
+  background-color: var(--gray-a3);
+  box-shadow: inset 0 0 0 1px var(--gray-a5);
+}
+.ui-slider-fill {
+  position: absolute;
+  height: 100%;
+  border-radius: inherit;
+  background-color: var(--accent-track);
+  box-shadow: inset 0 0 0 1px var(--gray-a5);
+}
+.ui-slider-fill[data-empty] { visibility: hidden; }
+.ui-slider-high-contrast .ui-slider-fill { background-color: var(--accent-12); }
+
+.ui-slider[data-variant='soft'] .ui-slider-track {
+  background-color: var(--gray-a4);
+  background-image: linear-gradient(var(--white-a1), var(--white-a1));
+  box-shadow: none;
+}
+.ui-slider[data-variant='soft'] .ui-slider-fill {
+  background-color: var(--accent-6);
+  background-image: linear-gradient(var(--accent-a5), var(--accent-a5));
+  box-shadow: none;
+}
+.ui-slider[data-variant='classic'] .ui-slider-track { box-shadow: var(--shadow-1); }
+.ui-slider[data-variant='classic'] .ui-slider-fill {
+  box-shadow: inset 0 0 0 1px var(--accent-a4), inset 0 1.5px 2px 0 var(--black-a2);
+}
+.ui-slider[data-variant='classic'] {
+  --ui-slider-thumb-shadow: 0 0 0 1px var(--black-a3), 0 1px 3px var(--black-a1),
+    0 2px 4px -1px var(--black-a1);
+}
+
+.ui-slider-thumb {
+  display: block;
+  width: var(--ui-slider-thumb-size);
+  height: var(--ui-slider-thumb-size);
+  outline: 0;
+}
+/* A larger hit area, and a visible thumb that slightly overshoots the track, as in Themes. */
+.ui-slider-thumb::before {
+  content: '';
+  position: absolute;
+  z-index: -1;
+  width: calc(var(--ui-slider-thumb-size) * 3);
+  height: calc(var(--ui-slider-thumb-size) * 3);
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+}
+.ui-slider-thumb::after {
+  content: '';
+  position: absolute;
+  inset: calc(-0.25 * var(--ui-slider-track-size));
+  background-color: white;
+  border-radius: max(var(--radius-1), var(--radius-thumb));
+  box-shadow: var(--ui-slider-thumb-shadow);
+  cursor: var(--cursor-slider-thumb);
+}
+.ui-slider-thumb:focus-visible::after {
+  box-shadow: var(--ui-slider-thumb-shadow), 0 0 0 3px var(--accent-3), 0 0 0 5px var(--focus-8);
+}
+.ui-slider-thumb:active { cursor: var(--cursor-slider-thumb-active); }
+
+.ui-slider[data-disabled] { cursor: var(--cursor-disabled); mix-blend-mode: multiply; }
+:is(.dark, .dark-theme) .ui-slider[data-disabled] { mix-blend-mode: screen; }
+.ui-slider-track[data-disabled] { box-shadow: inset 0 0 0 1px var(--gray-a4); }
+.ui-slider-fill[data-disabled] { background: none; box-shadow: none; }
+.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);
+}