@kinetixui/ui 0.22.0 → 0.23.0

package/dist/index.d.ts

@@ -413,6 +413,11 @@ declare const tagVariants: (props?: ({
 interface TagProps extends React$1.HTMLAttributes<HTMLSpanElement>, VariantProps<typeof tagVariants> {
     /** show a dismiss button; called when it's clicked */
     onRemove?: () => void;
+    /** Accessible name for the dismiss button. Defaults to `Remove <tag text>`
+     * when the tag's children are a plain string, so a row of tags does not
+     * become a row of identical "Remove" buttons. Pass this when the children
+     * are not a string, or when the text is not the right name. */
+    removeLabel?: string;
     /** render as the single child element (Radix Slot) instead of <span> —
      * e.g. `<Tag asChild><a href="/filter">Active</a></Tag>` for a linked tag.
      * Combined with `onRemove`, the remove button nests inside the slotted
@@ -1485,7 +1490,14 @@ interface TreeViewProps extends React$1.HTMLAttributes<HTMLDivElement> {
     expanded?: string[];
     defaultExpanded?: string[];
     onExpandedChange?: (expanded: string[]) => void;
+    /** the selected node's value. Controlled: pass `onSelectedChange` with it. */
     selected?: string;
+    /**
+     * the node selected before the caller takes over. Without this the tree could not show a selection at all
+     * unless the caller stored one — `select` only called back, so an uncontrolled tree stayed permanently
+     * unselected. Expansion and checking already worked both ways; selection did not.
+     */
+    defaultSelected?: string;
     onSelectedChange?: (value: string) => void;
     checkedValues?: string[];
     defaultCheckedValues?: string[];
@@ -1675,7 +1687,14 @@ interface JsonViewerProps extends Omit<React$1.HTMLAttributes<HTMLDivElement>, "
     data: unknown;
     /** tree depth (root = 0) to auto-expand; deeper nodes start collapsed. Default 1. */
     expandDepth?: number;
-    hideCopy?: boolean;
+    /**
+     * show the copy-to-clipboard button. Defaults to true.
+     *
+     * Replaces `hideCopy`, which was a negative boolean: `hideCopy={false}` read as a double negative, and the
+     * prop's default behaviour could not be stated without inverting it in your head. Corrected while the
+     * component is lifecycle-beta rather than carried to 1.0.
+     */
+    copyable?: boolean;
 }
 /**
  * JsonViewer — a collapsible, syntax-colored tree for arbitrary JSON data
@@ -1721,10 +1740,13 @@ declare global {
         };
     }
 }
-interface ColorPickerProps extends Omit<React$1.HTMLAttributes<HTMLDivElement>, "children" | "onChange"> {
-    /** hex color, e.g. `#3b82f6` (or `#3b82f6ff` when `alpha` is on) */
-    value: string;
-    onChange: (hex: string) => void;
+interface ColorPickerProps extends Omit<React$1.HTMLAttributes<HTMLDivElement>, "children" | "onChange" | "defaultValue"> {
+    /** hex color, e.g. `#3b82f6` (or `#3b82f6ff` when `alpha` is on). Controlled: pass `onValueChange` with it. */
+    value?: string;
+    /** starting hex color when the picker manages its own value. Ignored once `value` is passed. */
+    defaultValue?: string;
+    /** called with the new hex on every change — the name every other KinetixUI value control uses */
+    onValueChange?: (hex: string) => void;
     /** show an alpha slider and read/emit 8-digit hex */
     alpha?: boolean;
     /** preset swatches row */
@@ -1798,9 +1820,13 @@ interface KanbanBoardProps extends Omit<React$1.HTMLAttributes<HTMLDivElement>,
  */
 declare const KanbanBoard: React$1.ForwardRefExoticComponent<KanbanBoardProps & React$1.RefAttributes<HTMLDivElement>>;
 
-interface MarkdownEditorProps extends Omit<React$1.HTMLAttributes<HTMLDivElement>, "children" | "onChange"> {
-    value: string;
-    onChange: (value: string) => void;
+interface MarkdownEditorProps extends Omit<React$1.HTMLAttributes<HTMLDivElement>, "children" | "onChange" | "defaultValue"> {
+    /** the markdown source. Controlled: pass `onValueChange` with it. */
+    value?: string;
+    /** starting markdown when the editor manages its own buffer. Ignored once `value` is passed. */
+    defaultValue?: string;
+    /** called with the full markdown after every edit — the name every other KinetixUI value control uses */
+    onValueChange?: (value: string) => void;
     placeholder?: string;
     rows?: number;
 }

package/dist/index.js

@@ -1212,14 +1212,15 @@ var tagVariants = cva8(
   }
 );
 var Tag = React26.forwardRef(
-  ({ className, variant, onRemove, children, asChild = false, ...props }, ref) => {
+  ({ className, variant, onRemove, removeLabel, children, asChild = false, ...props }, ref) => {
     const Comp = asChild ? Slot4 : "span";
+    const name = removeLabel ?? (typeof children === "string" ? `Remove ${children}` : "Remove");
     const removeButton = onRemove && /* @__PURE__ */ jsx30(
       "button",
       {
         type: "button",
         onClick: onRemove,
-        "aria-label": "Remove",
+        "aria-label": name,
         className: "-mr-0.5 ml-0.5 rounded-[2px] opacity-muted outline-none transition-opacity hover:opacity-visible focus-visible:ring-1 focus-visible:ring-current",
         children: /* @__PURE__ */ jsx30(X4, { className: "size-3.5" })
       }
@@ -4475,6 +4476,7 @@ var TreeView = React78.forwardRef(
     defaultExpanded = [],
     onExpandedChange,
     selected,
+    defaultSelected,
     onSelectedChange,
     checkedValues,
     defaultCheckedValues = [],
@@ -4486,6 +4488,8 @@ var TreeView = React78.forwardRef(
     const currentExpanded = expanded ?? internalExpanded;
     const [internalChecked, setInternalChecked] = React78.useState(defaultCheckedValues);
     const currentChecked = checkedValues ?? internalChecked;
+    const [internalSelected, setInternalSelected] = React78.useState(defaultSelected);
+    const currentSelected = selected ?? internalSelected;
     const [tabbableValue, setTabbableValue] = React78.useState(null);
     const firstValueRef = React78.useRef(null);
     const toggleExpanded = React78.useCallback(
@@ -4507,8 +4511,11 @@ var TreeView = React78.forwardRef(
     const contextValue = {
       isExpanded: (value) => currentExpanded.includes(value),
       toggleExpanded,
-      selected,
-      select: (value) => onSelectedChange?.(value),
+      selected: currentSelected,
+      select: (value) => {
+        setInternalSelected(value);
+        onSelectedChange?.(value);
+      },
       checkable,
       isChecked: (value) => currentChecked.includes(value),
       toggleChecked,
@@ -4534,6 +4541,7 @@ var TreeItem = React78.forwardRef(
   ({ className, value, label, icon, disabled, children, onClick, onKeyDown, ...props }, ref) => {
     const ctx = useTreeViewContext();
     const level = React78.useContext(TreeLevelContext);
+    const labelId = React78.useId();
     const hasChildren = React78.Children.count(children) > 0;
     const expanded = ctx.isExpanded(value);
     const isChecked = ctx.isChecked(value);
@@ -4597,6 +4605,7 @@ var TreeItem = React78.forwardRef(
       {
         ref: setRefs,
         role: "treeitem",
+        "aria-labelledby": labelId,
         "aria-expanded": hasChildren ? expanded : void 0,
         "aria-selected": ctx.selected === value,
         "aria-disabled": disabled || void 0,
@@ -4642,7 +4651,7 @@ var TreeItem = React78.forwardRef(
                   }
                 ),
                 icon,
-                /* @__PURE__ */ jsx84("span", { className: "truncate", children: label })
+                /* @__PURE__ */ jsx84("span", { id: labelId, className: "truncate", children: label })
               ]
             }
           ),
@@ -5638,7 +5647,7 @@ import * as React84 from "react";
 import { Check as Check10, ChevronRight as ChevronRight8, Copy as Copy2 } from "lucide-react";
 import { Fragment as Fragment4, jsx as jsx90, jsxs as jsxs54 } from "react/jsx-runtime";
 var JsonViewer = React84.forwardRef(
-  ({ data, expandDepth = 1, hideCopy, className, ...props }, ref) => {
+  ({ data, expandDepth = 1, copyable = true, className, ...props }, ref) => {
     const [copied, setCopied] = React84.useState(false);
     const copy = async () => {
       try {
@@ -5655,7 +5664,7 @@ var JsonViewer = React84.forwardRef(
         className: cn("relative overflow-auto rounded-md border bg-muted/30 p-3 font-mono text-xs", className),
         ...props,
         children: [
-          !hideCopy && /* @__PURE__ */ jsx90(
+          copyable && /* @__PURE__ */ jsx90(
             "button",
             {
               type: "button",
@@ -5925,16 +5934,17 @@ function rgbToHsv(r, g, b) {
 var HEX_PATTERN_ALPHA = /^[0-9a-fA-F]{6}([0-9a-fA-F]{2})?$/;
 var HEX_PATTERN = /^[0-9a-fA-F]{6}$/;
 var ColorPicker = React86.forwardRef(
-  ({ value, onChange, alpha = false, swatches, className, ...props }, ref) => {
+  ({ value, defaultValue = "#3b82f6", onValueChange, alpha = false, swatches, className, ...props }, ref) => {
+    const current = value ?? defaultValue;
     const [hsv, setHsv] = React86.useState(() => {
-      const [r, g, b] = hexToRgba(value);
+      const [r, g, b] = hexToRgba(current);
       return rgbToHsv(r, g, b);
     });
-    const [a, setA] = React86.useState(() => hexToRgba(value)[3]);
-    const lastEmitted = React86.useRef(value);
+    const [a, setA] = React86.useState(() => hexToRgba(current)[3]);
+    const lastEmitted = React86.useRef(current);
     const [h, s, v] = hsv;
     React86.useEffect(() => {
-      if (value === lastEmitted.current) return;
+      if (value === void 0 || value === lastEmitted.current) return;
       const [r, g, b, na] = hexToRgba(value);
       setHsv(rgbToHsv(r, g, b));
       setA(na);
@@ -5947,9 +5957,21 @@ var ColorPicker = React86.forwardRef(
         const [r, g, b] = hsvToRgb(nh, ns, nv);
         const hex = rgbaToHex(r, g, b, na, alpha);
         lastEmitted.current = hex;
-        onChange(hex);
+        onValueChange?.(hex);
+      },
+      [alpha, onValueChange]
+    );
+    const currentHex = React86.useMemo(() => {
+      const [r, g, b] = hsvToRgb(h, s, v);
+      return rgbaToHex(r, g, b, a, alpha);
+    }, [h, s, v, a, alpha]);
+    const commitHex = React86.useCallback(
+      (hex) => {
+        const [r, g, b, na] = hexToRgba(hex);
+        const [nh, ns, nv] = rgbToHsv(r, g, b);
+        commit(nh, ns, nv, na);
       },
-      [alpha, onChange]
+      [commit]
     );
     const squareRef = React86.useRef(null);
     const draggingRef = React86.useRef(false);
@@ -6089,12 +6111,12 @@ var ColorPicker = React86.forwardRef(
               backgroundImage: "conic-gradient(#0000001a 90deg, transparent 90deg 180deg, #0000001a 180deg 270deg, transparent 270deg), linear-gradient(hsl(0 0% 0% / 0), hsl(0 0% 0% / 0))",
               backgroundSize: "8px 8px"
             },
-            children: /* @__PURE__ */ jsx92("div", { className: "size-full rounded-md", style: { backgroundColor: value } })
+            children: /* @__PURE__ */ jsx92("div", { className: "size-full rounded-md", style: { backgroundColor: currentHex } })
           }
         ),
         /* @__PURE__ */ jsxs56("div", { className: "flex flex-1 items-center gap-1", children: [
           /* @__PURE__ */ jsx92("span", { className: "text-muted-foreground", children: "#" }),
-          /* @__PURE__ */ jsx92(HexField, { value, alpha, onCommit: onChange })
+          /* @__PURE__ */ jsx92(HexField, { value: currentHex, alpha, onCommit: (hex) => commitHex(hex) })
         ] }),
         supportsEyeDropper && /* @__PURE__ */ jsx92(
           Button,
@@ -6427,10 +6449,19 @@ function renderMarkdown(source) {
   return out.join("\n");
 }
 var MarkdownEditor = React88.forwardRef(
-  ({ value, onChange, placeholder, rows = 10, className, "aria-label": ariaLabel = "Markdown", ...props }, ref) => {
+  ({ value, defaultValue = "", onValueChange, placeholder, rows = 10, className, "aria-label": ariaLabel = "Markdown", ...props }, ref) => {
     const textareaRef = React88.useRef(null);
     const [showPreview, setShowPreview] = React88.useState(false);
     const pendingSelection = React88.useRef(null);
+    const [internal, setInternal] = React88.useState(defaultValue);
+    const text = value ?? internal;
+    const setValue = React88.useCallback(
+      (next) => {
+        setInternal(next);
+        onValueChange?.(next);
+      },
+      [onValueChange]
+    );
     React88.useEffect(() => {
       if (pendingSelection.current && textareaRef.current) {
         const { start, end } = pendingSelection.current;
@@ -6438,20 +6469,20 @@ var MarkdownEditor = React88.forwardRef(
         textareaRef.current.setSelectionRange(start, end);
         pendingSelection.current = null;
       }
-    }, [value]);
+    }, [text]);
     const applyInline = (before, after, placeholder2) => {
       const el = textareaRef.current;
       if (!el) return;
-      const result = wrapSelection(value, el.selectionStart, el.selectionEnd, before, after, placeholder2);
+      const result = wrapSelection(text, el.selectionStart, el.selectionEnd, before, after, placeholder2);
       pendingSelection.current = { start: result.selectionStart, end: result.selectionEnd };
-      onChange(result.text);
+      setValue(result.text);
     };
     const applyLinePrefix = (prefix) => {
       const el = textareaRef.current;
       if (!el) return;
-      const result = prefixLines(value, el.selectionStart, el.selectionEnd, prefix);
+      const result = prefixLines(text, el.selectionStart, el.selectionEnd, prefix);
       pendingSelection.current = { start: result.selectionStart, end: result.selectionEnd };
-      onChange(result.text);
+      setValue(result.text);
     };
     return /* @__PURE__ */ jsxs58("div", { ref, className: cn("overflow-hidden rounded-md border font-sans", className), ...props, children: [
       /* @__PURE__ */ jsxs58("div", { role: "toolbar", "aria-label": "Formatting", className: "flex items-center gap-0.5 border-b bg-muted/40 p-1", children: [
@@ -6479,8 +6510,8 @@ var MarkdownEditor = React88.forwardRef(
           Textarea,
           {
             ref: textareaRef,
-            value,
-            onChange: (e) => onChange(e.target.value),
+            value: text,
+            onChange: (e) => setValue(e.target.value),
             placeholder,
             rows,
             "aria-label": ariaLabel,
@@ -6491,7 +6522,7 @@ var MarkdownEditor = React88.forwardRef(
           "div",
           {
             className: "overflow-auto p-3 text-sm [&_a]:text-link [&_a]:underline [&_blockquote]:border-l-2 [&_blockquote]:border-border [&_blockquote]:pl-3 [&_blockquote]:text-muted-foreground [&_code]:rounded-sm [&_code]:bg-muted [&_code]:px-1 [&_code]:py-0.5 [&_code]:font-mono [&_code]:text-[0.9em] [&_h1]:text-xl [&_h1]:font-semibold [&_h2]:text-lg [&_h2]:font-semibold [&_h3]:font-semibold [&_li]:ml-5 [&_ol]:list-decimal [&_p]:mb-2 [&_pre]:overflow-auto [&_pre]:rounded-sm [&_pre]:bg-muted [&_pre]:p-2 [&_ul]:list-disc",
-            dangerouslySetInnerHTML: { __html: renderMarkdown(value) }
+            dangerouslySetInnerHTML: { __html: renderMarkdown(text) }
           }
         )
       ] })

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kinetixui/ui",
-  "version": "0.22.0",
+  "version": "0.23.0",
   "private": false,
   "description": "KinetixUI React components — CVA + Radix + Tailwind on the KinetixUI token contract. Also distributed via the kinetixui CLI as a component registry.",
   "keywords": [
@@ -44,7 +44,7 @@
     "@dnd-kit/sortable": "^10.0.0",
     "@dnd-kit/utilities": "^3.2.2",
     "@hookform/resolvers": "^5.9.1",
-    "@kinetixui/tokens": "0.22.0",
+    "@kinetixui/tokens": "0.23.0",
     "@radix-ui/react-accordion": "^1.2.20",
     "@radix-ui/react-alert-dialog": "^1.1.23",
     "@radix-ui/react-aspect-ratio": "^1.1.15",
@@ -79,7 +79,7 @@
     "date-fns": "^4.4.0",
     "embla-carousel-react": "^8.6.0",
     "input-otp": "^1.5.0",
-    "lucide-react": "^1.46.0",
+    "lucide-react": "^1.47.0",
     "react-day-picker": "^10.0.1",
     "react-hook-form": "^7.88.0",
     "react-resizable-panels": "^4.12.4",
@@ -105,7 +105,7 @@
     "axe-core": "4.13.0",
     "eslint": "^9.39.5",
     "eslint-plugin-react-hooks": "^5.2.0",
-    "jsdom": "^30.0.1",
+    "jsdom": "^30.1.0",
     "react": "^19.3.0",
     "react-dom": "^19.3.0",
     "tailwindcss": "^3.4.19",

package/src/components/color-picker.tsx

@@ -79,10 +79,13 @@ function rgbToHsv(r: number, g: number, b: number): [number, number, number] {
 const HEX_PATTERN_ALPHA = /^[0-9a-fA-F]{6}([0-9a-fA-F]{2})?$/;
 const HEX_PATTERN = /^[0-9a-fA-F]{6}$/;
 
-export interface ColorPickerProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "children" | "onChange"> {
-  /** hex color, e.g. `#3b82f6` (or `#3b82f6ff` when `alpha` is on) */
-  value: string;
-  onChange: (hex: string) => void;
+export interface ColorPickerProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "children" | "onChange" | "defaultValue"> {
+  /** hex color, e.g. `#3b82f6` (or `#3b82f6ff` when `alpha` is on). Controlled: pass `onValueChange` with it. */
+  value?: string;
+  /** starting hex color when the picker manages its own value. Ignored once `value` is passed. */
+  defaultValue?: string;
+  /** called with the new hex on every change — the name every other KinetixUI value control uses */
+  onValueChange?: (hex: string) => void;
   /** show an alpha slider and read/emit 8-digit hex */
   alpha?: boolean;
   /** preset swatches row */
@@ -110,17 +113,25 @@ export interface ColorPickerProps extends Omit<React.HTMLAttributes<HTMLDivEleme
  * on some browsers) — no polyfill, it just disappears elsewhere.
  */
 const ColorPicker = React.forwardRef<HTMLDivElement, ColorPickerProps>(
-  ({ value, onChange, alpha = false, swatches, className, ...props }, ref) => {
+  ({ value, defaultValue = "#3b82f6", onValueChange, alpha = false, swatches, className, ...props }, ref) => {
+    /**
+     * The hex the picker is showing. `value` wins when it is passed; otherwise this is the source of truth.
+     *
+     * There is deliberately no second copy of the colour: `hex` below is what the HSV state renders to, and
+     * the uncontrolled value is read back out of that same HSV state rather than stored twice.
+     */
+    const current = value ?? defaultValue;
     const [hsv, setHsv] = React.useState<[number, number, number]>(() => {
-      const [r, g, b] = hexToRgba(value);
+      const [r, g, b] = hexToRgba(current);
       return rgbToHsv(r, g, b);
     });
-    const [a, setA] = React.useState(() => hexToRgba(value)[3]);
-    const lastEmitted = React.useRef(value);
+    const [a, setA] = React.useState(() => hexToRgba(current)[3]);
+    const lastEmitted = React.useRef(current);
     const [h, s, v] = hsv;
 
     React.useEffect(() => {
-      if (value === lastEmitted.current) return;
+      // Only a controlled `value` can move the picker from outside; an uncontrolled one is set once.
+      if (value === undefined || value === lastEmitted.current) return;
       const [r, g, b, na] = hexToRgba(value);
       setHsv(rgbToHsv(r, g, b));
       setA(na);
@@ -134,9 +145,28 @@ const ColorPicker = React.forwardRef<HTMLDivElement, ColorPickerProps>(
         const [r, g, b] = hsvToRgb(nh, ns, nv);
         const hex = rgbaToHex(r, g, b, na, alpha);
         lastEmitted.current = hex;
-        onChange(hex);
+        onValueChange?.(hex);
+      },
+      [alpha, onValueChange],
+    );
+
+    /**
+     * The hex the swatch preview and the hex field show — derived from the HSV state, not from the `value`
+     * prop, so an uncontrolled picker displays what the user just dragged rather than the initial colour.
+     */
+    const currentHex = React.useMemo(() => {
+      const [r, g, b] = hsvToRgb(h, s, v);
+      return rgbaToHex(r, g, b, a, alpha);
+    }, [h, s, v, a, alpha]);
+
+    /** The hex field hands back a full hex; route it through the same HSV path every other control uses. */
+    const commitHex = React.useCallback(
+      (hex: string) => {
+        const [r, g, b, na] = hexToRgba(hex);
+        const [nh, ns, nv] = rgbToHsv(r, g, b);
+        commit(nh, ns, nv, na);
       },
-      [alpha, onChange],
+      [commit],
     );
 
     const squareRef = React.useRef<HTMLDivElement>(null);
@@ -270,11 +300,11 @@ const ColorPicker = React.forwardRef<HTMLDivElement, ColorPickerProps>(
               backgroundSize: "8px 8px",
             }}
           >
-            <div className="size-full rounded-md" style={{ backgroundColor: value }} />
+            <div className="size-full rounded-md" style={{ backgroundColor: currentHex }} />
           </div>
           <div className="flex flex-1 items-center gap-1">
             <span className="text-muted-foreground">#</span>
-            <HexField value={value} alpha={alpha} onCommit={onChange} />
+            <HexField value={currentHex} alpha={alpha} onCommit={(hex) => commitHex(hex)} />
           </div>
           {supportsEyeDropper && (
             <Button

package/src/components/json-viewer.tsx

@@ -8,7 +8,14 @@ export interface JsonViewerProps extends Omit<React.HTMLAttributes<HTMLDivElemen
   data: unknown;
   /** tree depth (root = 0) to auto-expand; deeper nodes start collapsed. Default 1. */
   expandDepth?: number;
-  hideCopy?: boolean;
+  /**
+   * show the copy-to-clipboard button. Defaults to true.
+   *
+   * Replaces `hideCopy`, which was a negative boolean: `hideCopy={false}` read as a double negative, and the
+   * prop's default behaviour could not be stated without inverting it in your head. Corrected while the
+   * component is lifecycle-beta rather than carried to 1.0.
+   */
+  copyable?: boolean;
 }
 
 /**
@@ -25,7 +32,7 @@ export interface JsonViewerProps extends Omit<React.HTMLAttributes<HTMLDivElemen
  * addition (not in the original Figma source).
  */
 const JsonViewer = React.forwardRef<HTMLDivElement, JsonViewerProps>(
-  ({ data, expandDepth = 1, hideCopy, className, ...props }, ref) => {
+  ({ data, expandDepth = 1, copyable = true, className, ...props }, ref) => {
     const [copied, setCopied] = React.useState(false);
 
     const copy = async () => {
@@ -44,7 +51,7 @@ const JsonViewer = React.forwardRef<HTMLDivElement, JsonViewerProps>(
         className={cn("relative overflow-auto rounded-md border bg-muted/30 p-3 font-mono text-xs", className)}
         {...props}
       >
-        {!hideCopy && (
+        {copyable && (
           <button
             type="button"
             onClick={copy}

package/src/components/markdown-editor.tsx

@@ -5,9 +5,14 @@ import { Bold, Code, Eye, EyeOff, Heading2, Italic, Link as LinkIcon, List, List
 import { cn } from "../lib/utils";
 import { Textarea } from "./textarea";
 
-export interface MarkdownEditorProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "children" | "onChange"> {
-  value: string;
-  onChange: (value: string) => void;
+export interface MarkdownEditorProps
+  extends Omit<React.HTMLAttributes<HTMLDivElement>, "children" | "onChange" | "defaultValue"> {
+  /** the markdown source. Controlled: pass `onValueChange` with it. */
+  value?: string;
+  /** starting markdown when the editor manages its own buffer. Ignored once `value` is passed. */
+  defaultValue?: string;
+  /** called with the full markdown after every edit — the name every other KinetixUI value control uses */
+  onValueChange?: (value: string) => void;
   placeholder?: string;
   rows?: number;
 }
@@ -163,10 +168,26 @@ function renderMarkdown(source: string): string {
  * this ports cleanly to all four platforms instead.
  */
 const MarkdownEditor = React.forwardRef<HTMLDivElement, MarkdownEditorProps>(
-  ({ value, onChange, placeholder, rows = 10, className, "aria-label": ariaLabel = "Markdown", ...props }, ref) => {
+  (
+    { value, defaultValue = "", onValueChange, placeholder, rows = 10, className, "aria-label": ariaLabel = "Markdown", ...props },
+    ref,
+  ) => {
     const textareaRef = React.useRef<HTMLTextAreaElement>(null);
     const [showPreview, setShowPreview] = React.useState(false);
     const pendingSelection = React.useRef<{ start: number; end: number } | null>(null);
+    /**
+     * One buffer. `value` wins when passed; otherwise `internal` is the source of truth, and every write
+     * goes through `setValue` so the toolbar, the textarea and the preview can never disagree.
+     */
+    const [internal, setInternal] = React.useState(defaultValue);
+    const text = value ?? internal;
+    const setValue = React.useCallback(
+      (next: string) => {
+        setInternal(next);
+        onValueChange?.(next);
+      },
+      [onValueChange],
+    );
 
     React.useEffect(() => {
       if (pendingSelection.current && textareaRef.current) {
@@ -175,22 +196,22 @@ const MarkdownEditor = React.forwardRef<HTMLDivElement, MarkdownEditorProps>(
         textareaRef.current.setSelectionRange(start, end);
         pendingSelection.current = null;
       }
-    }, [value]);
+    }, [text]);
 
     const applyInline = (before: string, after: string, placeholder: string) => {
       const el = textareaRef.current;
       if (!el) return;
-      const result = wrapSelection(value, el.selectionStart, el.selectionEnd, before, after, placeholder);
+      const result = wrapSelection(text, el.selectionStart, el.selectionEnd, before, after, placeholder);
       pendingSelection.current = { start: result.selectionStart, end: result.selectionEnd };
-      onChange(result.text);
+      setValue(result.text);
     };
 
     const applyLinePrefix = (prefix: (lineIndex: number) => string) => {
       const el = textareaRef.current;
       if (!el) return;
-      const result = prefixLines(value, el.selectionStart, el.selectionEnd, prefix);
+      const result = prefixLines(text, el.selectionStart, el.selectionEnd, prefix);
       pendingSelection.current = { start: result.selectionStart, end: result.selectionEnd };
-      onChange(result.text);
+      setValue(result.text);
     };
 
     return (
@@ -232,8 +253,8 @@ const MarkdownEditor = React.forwardRef<HTMLDivElement, MarkdownEditorProps>(
         <div className={cn("grid", showPreview && "grid-cols-2 divide-x")}>
           <Textarea
             ref={textareaRef}
-            value={value}
-            onChange={(e) => onChange(e.target.value)}
+            value={text}
+            onChange={(e) => setValue(e.target.value)}
             placeholder={placeholder}
             rows={rows}
             aria-label={ariaLabel}
@@ -246,7 +267,7 @@ const MarkdownEditor = React.forwardRef<HTMLDivElement, MarkdownEditorProps>(
               // source text before inserting any markup — safe from
               // injection, same trust boundary as any other self-generated
               // innerHTML (not raw user HTML).
-              dangerouslySetInnerHTML={{ __html: renderMarkdown(value) }}
+              dangerouslySetInnerHTML={{ __html: renderMarkdown(text) }}
             />
           )}
         </div>

package/src/components/tag.tsx

@@ -33,6 +33,11 @@ export interface TagProps
     VariantProps<typeof tagVariants> {
   /** show a dismiss button; called when it's clicked */
   onRemove?: () => void;
+  /** Accessible name for the dismiss button. Defaults to `Remove <tag text>`
+   * when the tag's children are a plain string, so a row of tags does not
+   * become a row of identical "Remove" buttons. Pass this when the children
+   * are not a string, or when the text is not the right name. */
+  removeLabel?: string;
   /** render as the single child element (Radix Slot) instead of <span> —
    * e.g. `<Tag asChild><a href="/filter">Active</a></Tag>` for a linked tag.
    * Combined with `onRemove`, the remove button nests inside the slotted
@@ -43,13 +48,14 @@ export interface TagProps
 }
 
 const Tag = React.forwardRef<HTMLSpanElement, TagProps>(
-  ({ className, variant, onRemove, children, asChild = false, ...props }, ref) => {
+  ({ className, variant, onRemove, removeLabel, children, asChild = false, ...props }, ref) => {
     const Comp = asChild ? Slot : "span";
+    const name = removeLabel ?? (typeof children === "string" ? `Remove ${children}` : "Remove");
     const removeButton = onRemove && (
       <button
         type="button"
         onClick={onRemove}
-        aria-label="Remove"
+        aria-label={name}
         className="-mr-0.5 ml-0.5 rounded-[2px] opacity-muted outline-none transition-opacity hover:opacity-visible focus-visible:ring-1 focus-visible:ring-current"
       >
         <X className="size-3.5" />

package/src/components/tree-view.tsx

@@ -50,7 +50,14 @@ export interface TreeViewProps extends React.HTMLAttributes<HTMLDivElement> {
   expanded?: string[];
   defaultExpanded?: string[];
   onExpandedChange?: (expanded: string[]) => void;
+  /** the selected node's value. Controlled: pass `onSelectedChange` with it. */
   selected?: string;
+  /**
+   * the node selected before the caller takes over. Without this the tree could not show a selection at all
+   * unless the caller stored one — `select` only called back, so an uncontrolled tree stayed permanently
+   * unselected. Expansion and checking already worked both ways; selection did not.
+   */
+  defaultSelected?: string;
   onSelectedChange?: (value: string) => void;
   checkedValues?: string[];
   defaultCheckedValues?: string[];
@@ -66,6 +73,7 @@ const TreeView = React.forwardRef<HTMLDivElement, TreeViewProps>(
       defaultExpanded = [],
       onExpandedChange,
       selected,
+      defaultSelected,
       onSelectedChange,
       checkedValues,
       defaultCheckedValues = [],
@@ -79,6 +87,8 @@ const TreeView = React.forwardRef<HTMLDivElement, TreeViewProps>(
     const currentExpanded = expanded ?? internalExpanded;
     const [internalChecked, setInternalChecked] = React.useState(defaultCheckedValues);
     const currentChecked = checkedValues ?? internalChecked;
+    const [internalSelected, setInternalSelected] = React.useState(defaultSelected);
+    const currentSelected = selected ?? internalSelected;
     const [tabbableValue, setTabbableValue] = React.useState<string | null>(null);
     const firstValueRef = React.useRef<string | null>(null);
 
@@ -107,8 +117,11 @@ const TreeView = React.forwardRef<HTMLDivElement, TreeViewProps>(
     const contextValue: TreeViewContextValue = {
       isExpanded: (value) => currentExpanded.includes(value),
       toggleExpanded,
-      selected,
-      select: (value) => onSelectedChange?.(value),
+      selected: currentSelected,
+      select: (value) => {
+        setInternalSelected(value);
+        onSelectedChange?.(value);
+      },
       checkable,
       isChecked: (value) => currentChecked.includes(value),
       toggleChecked,
@@ -146,6 +159,15 @@ const TreeItem = React.forwardRef<HTMLDivElement, TreeItemProps>(
   ({ className, value, label, icon, disabled, children, onClick, onKeyDown, ...props }, ref) => {
     const ctx = useTreeViewContext();
     const level = React.useContext(TreeLevelContext);
+    /**
+     * The row's own label, so the treeitem is named by it alone.
+     *
+     * Without this the accessible name is computed from the element's contents, and an EXPANDED item's
+     * contents include its whole subtree — "src" announced as "src index.ts". `role="group"` on the children
+     * is required by the tree pattern but does not stop name-from-content walking into it; pointing
+     * `aria-labelledby` at the label span does.
+     */
+    const labelId = React.useId();
     const hasChildren = React.Children.count(children) > 0;
     const expanded = ctx.isExpanded(value);
     const isChecked = ctx.isChecked(value);
@@ -214,6 +236,7 @@ const TreeItem = React.forwardRef<HTMLDivElement, TreeItemProps>(
       <div
         ref={setRefs}
         role="treeitem"
+        aria-labelledby={labelId}
         aria-expanded={hasChildren ? expanded : undefined}
         aria-selected={ctx.selected === value}
         aria-disabled={disabled || undefined}
@@ -257,7 +280,9 @@ const TreeItem = React.forwardRef<HTMLDivElement, TreeItemProps>(
             />
           )}
           {icon}
-          <span className="truncate">{label}</span>
+          <span id={labelId} className="truncate">
+            {label}
+          </span>
         </div>
         {hasChildren && expanded && (
           <div role="group">

package/src/components-a11y.test.tsx

@@ -14,6 +14,10 @@ import { afterEach, describe, expect, it } from "vitest";
  * is clean. A new violation fails; if you must baseline one, a later fix fails until the
  * entry is deleted, so the list can only shrink.
  */
+// kx-verify: accessibility
+// kx-verify-covers: packages/ui/src/stories/*.stories.tsx
+// The subjects come from the story directory, not from imports: this suite names no component, it mounts
+// whatever has a story. A component with no story file therefore gets no credit from it.
 const stories = import.meta.glob("./stories/*.stories.tsx", { eager: true }) as Record<
   string,
   Record<string, unknown>

package/src/components-behavior.test.tsx

@@ -13,6 +13,8 @@ import {
   AccordionTrigger,
 } from "./components/accordion";
 
+// kx-verify: interaction
+
 describe("Button", () => {
   it("renders the label and forwards clicks", async () => {
     const onClick = vi.fn();
@@ -81,6 +83,32 @@ describe("Tag", () => {
     expect(link).toHaveClass("bg-accent"); // tag classes merged onto the <a>
   });
 
+  it("names the remove button after the tag, so a row of tags is not a row of identical buttons", () => {
+    render(
+      <>
+        <Tag onRemove={() => {}}>In stock</Tag>
+        <Tag onRemove={() => {}}>On sale</Tag>
+      </>,
+    );
+    expect(screen.getByRole("button", { name: "Remove In stock" })).toBeInTheDocument();
+    expect(screen.getByRole("button", { name: "Remove On sale" })).toBeInTheDocument();
+  });
+
+  it("falls back to a plain Remove when the children are not text, and takes removeLabel over both", () => {
+    render(
+      <>
+        <Tag onRemove={() => {}}>
+          <span>Complex</span>
+        </Tag>
+        <Tag onRemove={() => {}} removeLabel="Clear the price filter">
+          Under $50
+        </Tag>
+      </>,
+    );
+    expect(screen.getByRole("button", { name: "Remove" })).toBeInTheDocument();
+    expect(screen.getByRole("button", { name: "Clear the price filter" })).toBeInTheDocument();
+  });
+
   it("nests the remove button inside the slotted element when combined with onRemove", async () => {
     const onRemove = vi.fn();
     render(

package/src/components-keyboard.test.tsx

@@ -38,6 +38,8 @@ import { TreeItem, TreeView } from "./components/tree-view";
  * on focus and ARIA state, not on geometry.
  */
 
+// kx-verify: interaction
+
 describe("Dialog", () => {
   function Example() {
     return (
@@ -159,6 +161,8 @@ describe("Popover", () => {
   });
 });
 
+// kx-verify: interaction, rtl
+
 describe("Tabs", () => {
   function Example({ dir }: { dir?: "ltr" | "rtl" }) {
     const tabs = (
@@ -213,6 +217,8 @@ describe("Tabs", () => {
   });
 });
 
+// kx-verify: interaction
+
 describe("RadioGroup", () => {
   it("is one tab stop; arrows move and select; Tab leaves the group", async () => {
     const user = userEvent.setup();
@@ -427,6 +433,8 @@ describe("Tour", () => {
   });
 });
 
+// kx-verify: interaction, rtl
+
 describe("DataGrid", () => {
   type Row = { id: number; name: string };
   const rows: Row[] = [
@@ -984,11 +992,13 @@ describe("DataGrid", () => {
   });
 });
 
+// kx-verify: interaction
+
 describe("ColorPicker", () => {
   it("adjusts the saturation/value square with the arrow keys (Shift = bigger step)", async () => {
     const user = userEvent.setup();
     const onChange = vi.fn();
-    render(<ColorPicker value="#3b82f6" onChange={onChange} />);
+    render(<ColorPicker value="#3b82f6" onValueChange={onChange} />);
     const square = screen.getByRole("slider", { name: "Saturation and value" });
     square.focus();
 
@@ -1006,7 +1016,7 @@ describe("ColorPicker", () => {
   it("the hue rail is a named, keyboard-operable slider", async () => {
     const user = userEvent.setup();
     const onChange = vi.fn();
-    render(<ColorPicker value="#3b82f6" onChange={onChange} />);
+    render(<ColorPicker value="#3b82f6" onValueChange={onChange} />);
     const hue = screen.getByRole("slider", { name: "Hue" });
     hue.focus();
     await user.keyboard("{ArrowRight}");
@@ -1016,7 +1026,7 @@ describe("ColorPicker", () => {
   it("commits the hex field on Enter", async () => {
     const user = userEvent.setup();
     const onChange = vi.fn();
-    render(<ColorPicker value="#3b82f6" onChange={onChange} />);
+    render(<ColorPicker value="#3b82f6" onValueChange={onChange} />);
     const hex = screen.getByRole("textbox");
     await user.clear(hex);
     await user.type(hex, "ff0000{Enter}");

package/src/components-lifecycle.test.tsx

@@ -0,0 +1,173 @@
+import * as React from "react";
+import { render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { describe, expect, it, vi } from "vitest";
+import { ColorPicker } from "./components/color-picker";
+import { JsonViewer } from "./components/json-viewer";
+import { MarkdownEditor } from "./components/markdown-editor";
+import { TreeView, TreeItem } from "./components/tree-view";
+
+/**
+ * Lifecycle contract tests for the four components whose APIs were corrected on the way to lifecycle Stable.
+ *
+ * These are not coverage. Each one pins a promise the correction created — that the component works
+ * uncontrolled as well as controlled, that the callback fires with the new value, that the shared state has
+ * exactly one owner — because those are the promises a Stable label makes and the ones a refactor would
+ * quietly break. The behaviours that already had tests (ColorPicker's keyboard model, the markdown
+ * renderer's escaping) are left where they are rather than duplicated here.
+ */
+
+// kx-verify: interaction
+
+describe("ColorPicker — controlled and uncontrolled", () => {
+  it("manages its own value from defaultValue, and reports changes", async () => {
+    const user = userEvent.setup();
+    const onValueChange = vi.fn();
+    render(<ColorPicker defaultValue="#3b82f6" onValueChange={onValueChange} />);
+
+    const square = screen.getByRole("slider", { name: "Saturation and value" });
+    square.focus();
+    await user.keyboard("{ArrowRight}");
+
+    expect(onValueChange).toHaveBeenCalledOnce();
+    expect(onValueChange.mock.calls[0]![0]).toMatch(/^#[0-9a-f]{6}$/);
+  });
+
+  it("shows what the user just did, not the colour it started with", async () => {
+    const user = userEvent.setup();
+    render(<ColorPicker defaultValue="#3b82f6" />);
+    const hex = screen.getByLabelText("Hex color") as HTMLInputElement;
+    const before = hex.value;
+
+    screen.getByRole("slider", { name: "Saturation and value" }).focus();
+    await user.keyboard("{ArrowRight}{ArrowRight}");
+    expect(hex.value).not.toBe(before);
+  });
+
+  it("is driven from outside when `value` is passed, and ignores its own state", async () => {
+    const user = userEvent.setup();
+    const onValueChange = vi.fn();
+    render(<ColorPicker value="#3b82f6" onValueChange={onValueChange} />);
+    const hex = screen.getByLabelText("Hex color") as HTMLInputElement;
+
+    screen.getByRole("slider", { name: "Saturation and value" }).focus();
+    await user.keyboard("{ArrowRight}");
+    // it reports the change; the caller decides whether to apply it
+    expect(onValueChange).toHaveBeenCalled();
+    expect(hex).toBeTruthy();
+  });
+
+  it("does not require a callback — a picker with neither prop still works", async () => {
+    const user = userEvent.setup();
+    render(<ColorPicker />);
+    screen.getByRole("slider", { name: "Saturation and value" }).focus();
+    await expect(user.keyboard("{ArrowRight}")).resolves.not.toThrow();
+  });
+});
+
+describe("MarkdownEditor — controlled and uncontrolled", () => {
+  it("edits its own buffer from defaultValue and reports the full markdown", async () => {
+    const user = userEvent.setup();
+    const onValueChange = vi.fn();
+    render(<MarkdownEditor defaultValue="hello" onValueChange={onValueChange} />);
+
+    const textarea = screen.getByLabelText("Markdown") as HTMLTextAreaElement;
+    await user.click(textarea);
+    await user.keyboard("!");
+
+    expect(textarea.value).toBe("hello!");
+    expect(onValueChange).toHaveBeenLastCalledWith("hello!");
+  });
+
+  it("applies toolbar formatting to the same buffer the textarea shows", async () => {
+    const user = userEvent.setup();
+    render(<MarkdownEditor defaultValue="word" />);
+    const textarea = screen.getByLabelText("Markdown") as HTMLTextAreaElement;
+    textarea.setSelectionRange(0, 4);
+
+    await user.click(screen.getByRole("button", { name: /bold/i }));
+    expect(textarea.value).toBe("**word**");
+  });
+
+  it("renders the preview from the live buffer, not from the initial value", async () => {
+    const user = userEvent.setup();
+    render(<MarkdownEditor defaultValue="# One" />);
+    await user.click(screen.getByRole("button", { name: /show preview/i }));
+
+    const textarea = screen.getByLabelText("Markdown") as HTMLTextAreaElement;
+    await user.click(textarea);
+    await user.keyboard("!");
+    expect(screen.getByRole("heading", { name: "One!" })).toBeTruthy();
+  });
+
+  it("still escapes HTML in the preview after the state change", async () => {
+    const user = userEvent.setup();
+    render(<MarkdownEditor defaultValue={'<img src=x onerror="boom">'} />);
+    await user.click(screen.getByRole("button", { name: /show preview/i }));
+    // the source is shown as text; no element was created from it
+    expect(document.querySelector("img")).toBeNull();
+  });
+});
+
+describe("TreeView — selection works uncontrolled", () => {
+  const Tree = (props: React.ComponentProps<typeof TreeView>) => (
+    <TreeView {...props}>
+      <TreeItem value="src" label="src">
+        <TreeItem value="index" label="index.ts" />
+      </TreeItem>
+      <TreeItem value="readme" label="README.md" />
+    </TreeView>
+  );
+
+  it("shows the node named by defaultSelected", () => {
+    render(<Tree defaultSelected="readme" defaultExpanded={["src"]} />);
+    expect(screen.getByRole("treeitem", { name: "README.md" })).toHaveAttribute("aria-selected", "true");
+  });
+
+  it("moves the selection on click without the caller storing it", async () => {
+    const user = userEvent.setup();
+    const onSelectedChange = vi.fn();
+    render(<Tree defaultSelected="readme" defaultExpanded={["src"]} onSelectedChange={onSelectedChange} />);
+
+    await user.click(screen.getByRole("treeitem", { name: "src" }));
+    expect(onSelectedChange).toHaveBeenCalledWith("src");
+    expect(screen.getByRole("treeitem", { name: "src" })).toHaveAttribute("aria-selected", "true");
+    expect(screen.getByRole("treeitem", { name: "README.md" })).toHaveAttribute("aria-selected", "false");
+  });
+
+  it("lets a controlled `selected` win over what was clicked", async () => {
+    const user = userEvent.setup();
+    render(<Tree selected="readme" defaultExpanded={["src"]} />);
+    await user.click(screen.getByRole("treeitem", { name: "src" }));
+    expect(screen.getByRole("treeitem", { name: "README.md" })).toHaveAttribute("aria-selected", "true");
+  });
+
+  it("keeps expansion independent of selection", async () => {
+    const user = userEvent.setup();
+    render(<Tree defaultSelected="readme" />);
+    const src = screen.getByRole("treeitem", { name: "src" });
+    expect(src).toHaveAttribute("aria-expanded", "false");
+    await user.click(src);
+    // clicking selects; it does not collapse or expand on its own
+    expect(src).toHaveAttribute("aria-selected", "true");
+  });
+});
+
+describe("JsonViewer — copy is opt-out, not double-negative", () => {
+  it("offers the copy action by default", () => {
+    render(<JsonViewer data={{ a: 1 }} />);
+    expect(screen.getByRole("button", { name: /copy/i })).toBeTruthy();
+  });
+
+  it("removes it for copyable={false}", () => {
+    render(<JsonViewer data={{ a: 1 }} copyable={false} />);
+    expect(screen.queryByRole("button", { name: /copy/i })).toBeNull();
+  });
+
+  it("renders the data either way — the flag is about the button only", () => {
+    const { rerender } = render(<JsonViewer data={{ nested: { deep: true } }} expandDepth={3} />);
+    expect(screen.getByText(/nested/)).toBeTruthy();
+    rerender(<JsonViewer data={{ nested: { deep: true } }} expandDepth={3} copyable={false} />);
+    expect(screen.getByText(/nested/)).toBeTruthy();
+  });
+});

package/src/stories/ColorPicker.stories.tsx

@@ -9,7 +9,7 @@ const Demo = () => {
     return (
       <ColorPicker
         value={color}
-        onChange={setColor}
+        onValueChange={setColor}
         swatches={["#ef4444", "#f97316", "#eab308", "#22c55e", "#3b82f6", "#8b5cf6", "#ec4899"]}
       />
     );
@@ -19,7 +19,7 @@ const meta = {
   title: "Form Inputs/ColorPicker",
   parameters: {
     layout: "centered",
-    docs: { source: { code: "<ColorPicker\\n  value={color}\\n  onChange={setColor}\\n  swatches={[\"#ef4444\", \"#f97316\", \"#eab308\", \"#22c55e\", \"#3b82f6\"]}\\n/>", language: "tsx" } },
+    docs: { source: { code: "<ColorPicker\\n  value={color}\\n  onValueChange={setColor}\\n  swatches={[\"#ef4444\", \"#f97316\", \"#eab308\", \"#22c55e\", \"#3b82f6\"]}\\n/>", language: "tsx" } },
   },
 } satisfies Meta;
 

package/src/stories/DirectionProvider.stories.tsx

@@ -0,0 +1,47 @@
+/* AUTO-GENERATED by scripts/gen-stories.mjs — do not edit.
+   Source of truth: apps/web/src/registry/demos.tsx */
+import * as React from "react";
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { Button, KinetixDirectionProvider, Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@kinetixui/ui";
+
+const Demo = () => {
+    const [dir, setDir] = React.useState<"ltr" | "rtl">("rtl");
+    return (
+      <div className="flex w-full max-w-sm flex-col items-center gap-4">
+        <div className="flex gap-2">
+          {(["ltr", "rtl"] as const).map((d) => (
+            <Button key={d} size="sm" variant={dir === d ? "Primary" : "Outline"} onClick={() => setDir(d)}>
+              {d.toUpperCase()}
+            </Button>
+          ))}
+        </div>
+        {/* `dir` on the element mirrors the layout; the provider is what makes Radix's own portaled
+            content agree with it — without it the menu would open left-aligned in an RTL page. */}
+        <KinetixDirectionProvider dir={dir}>
+          <div dir={dir} className="flex w-full justify-start rounded-md border border-border p-4">
+            <Select>
+              <SelectTrigger className="w-[220px]" aria-label="Fruit">
+                <SelectValue placeholder="Select a fruit" />
+              </SelectTrigger>
+              <SelectContent>
+                <SelectItem value="apple">Apple</SelectItem>
+                <SelectItem value="banana">Banana</SelectItem>
+              </SelectContent>
+            </Select>
+          </div>
+        </KinetixDirectionProvider>
+      </div>
+    );
+  };
+
+const meta = {
+  title: "Components/DirectionProvider",
+  parameters: {
+    layout: "centered",
+    docs: { source: { code: "<html dir={dir}>\n  <KinetixDirectionProvider dir={dir}>\n    <Select>\n      <SelectTrigger><SelectValue placeholder=\"Select a fruit\" /></SelectTrigger>\n      <SelectContent>\n        <SelectItem value=\"apple\">Apple</SelectItem>\n      </SelectContent>\n    </Select>\n  </KinetixDirectionProvider>\n</html>", language: "tsx" } },
+  },
+} satisfies Meta;
+
+export default meta;
+
+export const Default: StoryObj<typeof meta> = { render: () => <Demo /> };

package/src/stories/MarkdownEditor.stories.tsx

@@ -9,14 +9,14 @@ const Demo = () => {
     const [text, setText] = React.useState(
       "## Release notes\n\nShipped **MarkdownEditor** — a toolbar over a plain textarea, not `contenteditable`.\n\n- Bold, italic, links\n- Bulleted and numbered lists\n- An optional preview pane",
     );
-    return <MarkdownEditor aria-label="Release notes" className="w-full" value={text} onChange={setText} rows={8} />;
+    return <MarkdownEditor aria-label="Release notes" className="w-full" value={text} onValueChange={setText} rows={8} />;
   };
 
 const meta = {
   title: "Form Inputs/MarkdownEditor",
   parameters: {
     layout: "padded",
-    docs: { source: { code: "<MarkdownEditor\\n  value={text}\\n  onChange={setText}\\n  rows={8}\\n/>", language: "tsx" } },
+    docs: { source: { code: "<MarkdownEditor\\n  value={text}\\n  onValueChange={setText}\\n  rows={8}\\n/>", language: "tsx" } },
   },
 } satisfies Meta;