@xenosystem/elements-react 0.0.1

package/dist/controls/Button.js

@@ -0,0 +1,16 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef } from 'react';
+import { XenoElement } from '../XenoElement.js';
+import { sizeAttr, iconPx, cx } from './util.js';
+/**
+ * Ref-forwarding, and it is load-bearing rather than tidy. These buttons anchor things: a popover
+ * positions against the one that opened it, a focus-restore puts focus back on it after a dialog
+ * closes. On React 19 `ref` is an ordinary prop and a plain function component would pass it through;
+ * on React 18 — still inside this package's peer range — `createElement` STRIPS it, so the consumer's
+ * `ref.current` stays null and the anchor silently lands at 0,0. Same reasoning as `RadioRow`.
+ */
+export const Button = forwardRef(function Button({ variant = 'secondary', size = 'md', leadingIcon, trailingIcon, busy = false, enter = false, disabled = false, className, children, type = 'button', ...rest }, ref) {
+    const availability = disabled ? 'disabled' : busy ? 'busy' : 'enabled';
+    const glyph = iconPx(size);
+    return (_jsxs("button", { ref: ref, type: type, className: cx('xeno-btn', className), "data-variant": variant, "data-availability": availability, "data-enter": enter ? '' : undefined, disabled: disabled, "aria-busy": busy || undefined, ...sizeAttr(size), ...rest, children: [leadingIcon && _jsx(XenoElement, { decl: leadingIcon, size: glyph }), children, trailingIcon && _jsx(XenoElement, { decl: trailingIcon, size: glyph })] }));
+});

package/dist/controls/ConfirmButton.d.ts

@@ -0,0 +1,22 @@
+import type { ReactElement } from 'react';
+import type { ElementDeclaration } from '@xenosystem/elements/schema';
+import { type IconButtonProps } from './IconButton.js';
+/**
+ * `<ConfirmButton>` — an {@link IconButton} that, on activate, swaps its glyph to a confirmation (a
+ * check by default) for a beat, then reverts. Generalises the copy→check affordance the CodeBlock
+ * hand-rolls, so any action can acknowledge itself. The confirmed glyph pops in on the overshoot easing;
+ * the swap and `aria-label` update announce success to a screen reader.
+ */
+export interface ConfirmButtonProps extends Omit<IconButtonProps, 'icon'> {
+    /** The resting glyph (e.g. `xeno.copy`). */
+    readonly icon: ElementDeclaration;
+    /** The glyph shown after activating. Default `xeno.check`. */
+    readonly confirmIcon?: ElementDeclaration;
+    /** How long the confirmation shows, ms. Default 1500. */
+    readonly confirmMs?: number;
+    /** `aria-label` while confirmed (e.g. "Copied"). Falls back to the resting label. */
+    readonly confirmLabel?: string;
+    /** Fired when the action is taken (do the copy/etc. here). */
+    readonly onConfirm?: () => void;
+}
+export declare function ConfirmButton({ icon, confirmIcon, confirmMs, confirmLabel, onConfirm, onClick, 'aria-label': ariaLabel, ...rest }: ConfirmButtonProps): ReactElement;

package/dist/controls/ConfirmButton.js

@@ -0,0 +1,22 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useEffect, useRef, useState } from 'react';
+import Check from '@xenosystem/elements/elements/check';
+import { IconButton } from './IconButton.js';
+export function ConfirmButton({ icon, confirmIcon = Check, confirmMs = 1500, confirmLabel, onConfirm, onClick, 'aria-label': ariaLabel, ...rest }) {
+    const [confirmed, setConfirmed] = useState(false);
+    const timer = useRef(null);
+    useEffect(() => () => {
+        if (timer.current)
+            clearTimeout(timer.current);
+    }, []);
+    return (_jsx(IconButton, { icon: confirmed ? confirmIcon : icon, "aria-label": confirmed ? (confirmLabel ?? ariaLabel) : ariaLabel, "data-confirmed": confirmed ? '' : undefined, onClick: (e) => {
+            onClick?.(e);
+            if (e.defaultPrevented)
+                return;
+            onConfirm?.();
+            setConfirmed(true);
+            if (timer.current)
+                clearTimeout(timer.current);
+            timer.current = setTimeout(() => setConfirmed(false), confirmMs);
+        }, ...rest }));
+}

package/dist/controls/IconButton.d.ts

@@ -0,0 +1,45 @@
+import type { ButtonHTMLAttributes } from 'react';
+import type { ElementDeclaration } from '@xenosystem/elements/schema';
+import { type ControlSizeToken } from './util.js';
+import type { ButtonVariant } from './Button.js';
+/**
+ * `<IconButton>` — a square, icon-only control (the single most-duplicated pattern in the chat, found
+ * at 4 sizes × 2 colour families). `aria-label` is REQUIRED because there is no text label. The glyph
+ * is a declaration, drawn by the shared renderer, so it inherits the button's monochrome ink.
+ */
+export interface IconButtonProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'style'> {
+    readonly icon: ElementDeclaration;
+    readonly 'aria-label': string;
+    readonly variant?: ButtonVariant;
+    readonly size?: ControlSizeToken;
+    readonly busy?: boolean;
+    /** Play the entrance animation on mount (fade + slide + scale up). */
+    readonly enter?: boolean;
+    /**
+     * The glyph's px, when the size token's own is not what this control wants.
+     *
+     * Every other metric a control has — height, padding, gap, font — is a CSS variable that a surface
+     * can redefine once at the root. The glyph was the exception: computed in JS from the size token and
+     * therefore the one number a consumer could not reach.
+     *
+     * That gap is what stalled a real adoption. A chat with fifty-one icon buttons drew its glyphs at
+     * 13, 14, 15 and 16 px, and this component could offer only the scale's own 15/16/16/18 — so taking
+     * the component meant taking a restyle of every one of them in the same commit, with no way to tell
+     * afterwards which change someone disliked. A component swap and a resize are two edits and belong
+     * in two commits.
+     *
+     * Not an invitation to drift. The set already holds two deliberate exceptions — the chip's remove ×
+     * and the model picker's are `glyph - 2` — so the honest thing is a named door rather than a rule
+     * that says nobody ever needs one. Omit it and the scale decides, which is what should usually
+     * happen.
+     */
+    readonly iconSize?: number;
+}
+/**
+ * Ref-forwarding, and it is load-bearing rather than tidy. These buttons anchor things: a popover
+ * positions against the one that opened it, a focus-restore puts focus back on it after a dialog
+ * closes. On React 19 `ref` is an ordinary prop and a plain function component would pass it through;
+ * on React 18 — still inside this package's peer range — `createElement` STRIPS it, so the consumer's
+ * `ref.current` stays null and the anchor silently lands at 0,0. Same reasoning as `RadioRow`.
+ */
+export declare const IconButton: import("react").ForwardRefExoticComponent<IconButtonProps & import("react").RefAttributes<HTMLButtonElement>>;

package/dist/controls/IconButton.js

@@ -0,0 +1,15 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef } from 'react';
+import { XenoElement } from '../XenoElement.js';
+import { sizeAttr, iconPx, cx } from './util.js';
+/**
+ * Ref-forwarding, and it is load-bearing rather than tidy. These buttons anchor things: a popover
+ * positions against the one that opened it, a focus-restore puts focus back on it after a dialog
+ * closes. On React 19 `ref` is an ordinary prop and a plain function component would pass it through;
+ * on React 18 — still inside this package's peer range — `createElement` STRIPS it, so the consumer's
+ * `ref.current` stays null and the anchor silently lands at 0,0. Same reasoning as `RadioRow`.
+ */
+export const IconButton = forwardRef(function IconButton({ icon, variant = 'ghost', size = 'md', busy = false, enter = false, iconSize, disabled = false, className, type = 'button', ...rest }, ref) {
+    const availability = disabled ? 'disabled' : busy ? 'busy' : 'enabled';
+    return (_jsx("button", { ref: ref, type: type, className: cx('xeno-btn', 'xeno-icon-btn', className), "data-variant": variant, "data-availability": availability, "data-enter": enter ? '' : undefined, disabled: disabled, "aria-busy": busy || undefined, ...sizeAttr(size), ...rest, children: _jsx(XenoElement, { decl: icon, size: iconSize ?? iconPx(size) }) }));
+});

package/dist/controls/Switch.d.ts

@@ -0,0 +1,11 @@
+import { type ButtonHTMLAttributes, type ReactElement } from 'react';
+/**
+ * `<Switch>` — a track+knob on/off control. Grammar-consistent: the track is a rounded SQUARE
+ * (`radius.md`) and the knob a smaller rounded square (`radius.xs`) — never circles, matching the
+ * chat's locked square switch. Honours `selection` (data-selection / aria-checked) and `availability`.
+ */
+export interface SwitchProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'onChange' | 'children'> {
+    readonly checked: boolean;
+    readonly onCheckedChange?: (checked: boolean) => void;
+}
+export declare function Switch({ checked, onCheckedChange, disabled, className, onClick, ...rest }: SwitchProps): ReactElement;

package/dist/controls/Switch.js

@@ -0,0 +1,23 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useState } from 'react';
+import { cx } from './util.js';
+export function Switch({ checked, onCheckedChange, disabled = false, className, onClick, ...rest }) {
+    /**
+     * The knob's throw is a KEYFRAME, and a keyframe plays the moment its rule starts matching — so a
+     * switch that mounts in the "off" state would bounce on page load, unprompted. Arm the motion on the
+     * first render where `checked` actually CHANGES (whoever moved it — the click, or the parent), and
+     * leave it armed; before that the switch is simply drawn in whichever state it was handed.
+     */
+    const [armed, setArmed] = useState(false);
+    const [seen, setSeen] = useState(checked);
+    if (seen !== checked) {
+        setSeen(checked);
+        if (!armed)
+            setArmed(true);
+    }
+    return (_jsx("button", { type: "button", role: "switch", "aria-checked": checked, className: cx('xeno-switch', className), "data-selection": checked ? 'on' : 'off', "data-availability": disabled ? 'disabled' : 'enabled', ...(armed ? { 'data-motion': 'ready' } : {}), disabled: disabled, onClick: (e) => {
+            onClick?.(e);
+            if (!e.defaultPrevented)
+                onCheckedChange?.(!checked);
+        }, ...rest, children: _jsx("span", { className: "xeno-switch-knob", "aria-hidden": "true" }) }));
+}

package/dist/controls/TextInput.d.ts

@@ -0,0 +1,13 @@
+import type { InputHTMLAttributes, ReactElement } from 'react';
+import type { ElementDeclaration } from '@xenosystem/elements/schema';
+import { type ControlSizeToken } from './util.js';
+/**
+ * `<TextInput>` — a single-line field. With `leadingIcon` set to `xeno.search` it is the SearchInput
+ * the chat hand-rolls ~7×. The icon is a declaration drawn by the shared renderer; the field is a bare
+ * native `<input>` so the wrapper owns the box and the input owns the text.
+ */
+export interface TextInputProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'size' | 'style'> {
+    readonly size?: ControlSizeToken;
+    readonly leadingIcon?: ElementDeclaration;
+}
+export declare function TextInput({ size, leadingIcon, disabled, className, ...rest }: TextInputProps): ReactElement;

package/dist/controls/TextInput.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { XenoElement } from '../XenoElement.js';
+import { sizeAttr, iconPx, cx } from './util.js';
+export function TextInput({ size = 'md', leadingIcon, disabled = false, className, ...rest }) {
+    return (_jsxs("div", { className: cx('xeno-input', className), "data-availability": disabled ? 'disabled' : 'enabled', ...sizeAttr(size), children: [leadingIcon && (_jsx("span", { className: "xeno-input-icon", "aria-hidden": "true", children: _jsx(XenoElement, { decl: leadingIcon, size: iconPx(size) }) })), _jsx("input", { className: "xeno-input-field", disabled: disabled, ...rest })] }));
+}

package/dist/controls/Textarea.d.ts

@@ -0,0 +1,8 @@
+import type { ReactElement, TextareaHTMLAttributes } from 'react';
+/**
+ * `<Textarea>` — a multi-line field (card-radius, transparent-ish, focus tightens the border). The base
+ * of the chat composer; the full composer (tool rail + action row) is a Tier-2 container built on top.
+ */
+export interface TextareaProps extends Omit<TextareaHTMLAttributes<HTMLTextAreaElement>, 'style'> {
+}
+export declare function Textarea({ disabled, className, ...rest }: TextareaProps): ReactElement;

package/dist/controls/Textarea.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { cx } from './util.js';
+export function Textarea({ disabled = false, className, ...rest }) {
+    return (_jsx("textarea", { className: cx('xeno-textarea', className), "data-availability": disabled ? 'disabled' : 'enabled', disabled: disabled, ...rest }));
+}

package/dist/controls/ToggleButton.d.ts

@@ -0,0 +1,23 @@
+import { type ButtonHTMLAttributes, type ReactElement, type ReactNode } from 'react';
+import type { ElementDeclaration } from '@xenosystem/elements/schema';
+import { type ControlSizeToken } from './util.js';
+/**
+ * `<ToggleButton>` — a button-shaped on/off control (the chat's skills On/Off, byte-identical in two
+ * files). It honours the `selection` axis via `data-selection` and `aria-pressed` — the SAME axis the
+ * bookmark icon uses. Persistent selection, not a transient press.
+ */
+export interface ToggleButtonProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'style' | 'onChange'> {
+    readonly pressed: boolean;
+    readonly onPressedChange?: (pressed: boolean) => void;
+    readonly size?: ControlSizeToken;
+    readonly leadingIcon?: ElementDeclaration;
+    /** The label when OFF (and the only label, if `pressedChildren` is not given). */
+    readonly children?: ReactNode;
+    /**
+     * The label when ON — `Following` to a `Follow`, `Pinned` to a `Pin`. Give BOTH and the button holds
+     * one width for both: the longer word is what it is sized to, in either state, so pressing it never
+     * makes it jump. Omit it and the one label is used throughout.
+     */
+    readonly pressedChildren?: ReactNode;
+}
+export declare function ToggleButton({ pressed, onPressedChange, size, leadingIcon, disabled, className, children, pressedChildren, onClick, ...rest }: ToggleButtonProps): ReactElement;

package/dist/controls/ToggleButton.js

@@ -0,0 +1,23 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
+import { XenoElement } from '../XenoElement.js';
+import { sizeAttr, iconPx, cx } from './util.js';
+export function ToggleButton({ pressed, onPressedChange, size = 'md', leadingIcon, disabled = false, className, children, pressedChildren, onClick, ...rest }) {
+    /**
+     * The fill pours in on a KEYFRAME, and a keyframe plays as soon as its rule starts matching — so a
+     * toggle that mounts already pressed would pour itself in on page load. Arm on the first render where
+     * `pressed` actually CHANGES (from the click, or from the parent), and stay armed.
+     */
+    const [armed, setArmed] = useState(false);
+    const [seen, setSeen] = useState(pressed);
+    if (seen !== pressed) {
+        setSeen(pressed);
+        if (!armed)
+            setArmed(true);
+    }
+    return (_jsxs("button", { type: "button", className: cx('xeno-btn', 'xeno-toggle', className), "data-selection": pressed ? 'on' : 'off', "data-availability": disabled ? 'disabled' : 'enabled', ...(armed ? { 'data-motion': 'ready' } : {}), "aria-pressed": pressed, disabled: disabled, ...sizeAttr(size), onClick: (e) => {
+            onClick?.(e);
+            if (!e.defaultPrevented)
+                onPressedChange?.(!pressed);
+        }, ...rest, children: [leadingIcon && (_jsx(XenoElement, { decl: leadingIcon, size: iconPx(size), state: { selection: pressed ? 'on' : 'off' } })), pressedChildren === undefined ? (children) : (_jsxs("span", { className: "xeno-toggle-labels", children: [_jsx("span", { className: "xeno-toggle-label", "data-when": "off", "aria-hidden": pressed || undefined, children: children }), _jsx("span", { className: "xeno-toggle-label", "data-when": "on", "aria-hidden": !pressed || undefined, children: pressedChildren })] }))] }));
+}

package/dist/controls/util.d.ts

@@ -0,0 +1,48 @@
+import { type ControlSizeToken } from '@xenosystem/elements/tokens';
+export type { ControlSizeToken };
+/**
+ * Name the control's size on the element; `size.css` turns that into the four metric variables the
+ * control styles read (`--xeno-h/-padx/-gap/-font`).
+ *
+ * These used to be emitted here as INLINE custom properties. Inline is the one place nothing can
+ * override, so a surface — a product rendering the same controls for touch rather than a mouse — had
+ * no way to reach them. As an attribute they are ambient: a surface redefines the variables once at
+ * the root and every control follows, with nothing changed at any call site.
+ *
+ * The attribute is namespaced so it cannot collide with a host application's own `data-size`.
+ */
+export declare const sizeAttr: (size: ControlSizeToken) => {
+    readonly "data-xeno-size": ControlSizeToken;
+};
+/**
+ * The same metrics as an object, for the rare caller that needs the NUMBERS rather than the styling —
+ * a measurement, a canvas, a layout calculation. Not for styling: use {@link sizeAttr}.
+ */
+export declare const sizeMetrics: (size: ControlSizeToken) => {
+    readonly height: 24;
+    readonly padX: 8;
+    readonly gap: 5;
+    readonly icon: 15;
+    readonly font: 12;
+} | {
+    readonly height: 28;
+    readonly padX: 10;
+    readonly gap: 6;
+    readonly icon: 16;
+    readonly font: 13;
+} | {
+    readonly height: 32;
+    readonly padX: 12;
+    readonly gap: 6;
+    readonly icon: 16;
+    readonly font: 14;
+} | {
+    readonly height: 36;
+    readonly padX: 14;
+    readonly gap: 7;
+    readonly icon: 18;
+    readonly font: 14;
+};
+/** Glyph px for a control size — so a button's leading icon scales with the button. */
+export declare const iconPx: (size: ControlSizeToken) => number;
+export declare const cx: (...parts: (string | false | undefined)[]) => string;

package/dist/controls/util.js

@@ -0,0 +1,23 @@
+import { controlSize } from '@xenosystem/elements/tokens';
+/**
+ * Name the control's size on the element; `size.css` turns that into the four metric variables the
+ * control styles read (`--xeno-h/-padx/-gap/-font`).
+ *
+ * These used to be emitted here as INLINE custom properties. Inline is the one place nothing can
+ * override, so a surface — a product rendering the same controls for touch rather than a mouse — had
+ * no way to reach them. As an attribute they are ambient: a surface redefines the variables once at
+ * the root and every control follows, with nothing changed at any call site.
+ *
+ * The attribute is namespaced so it cannot collide with a host application's own `data-size`.
+ */
+export const sizeAttr = (size) => ({
+    'data-xeno-size': size,
+});
+/**
+ * The same metrics as an object, for the rare caller that needs the NUMBERS rather than the styling —
+ * a measurement, a canvas, a layout calculation. Not for styling: use {@link sizeAttr}.
+ */
+export const sizeMetrics = (size) => controlSize[size];
+/** Glyph px for a control size — so a button's leading icon scales with the button. */
+export const iconPx = (size) => controlSize[size].icon;
+export const cx = (...parts) => parts.filter(Boolean).join(' ');

package/dist/forms/Checkbox.d.ts

@@ -0,0 +1,18 @@
+import { type ButtonHTMLAttributes, type ReactElement, type ReactNode } from 'react';
+/**
+ * `<Checkbox>` — a rounded-SQUARE box (never a circle). CSS-first: the `selection` axis drives paint via
+ * `data-selection="off|on|mixed"`, matching `aria-checked`. Checked fills with `--xeno-text` and stamps a
+ * check glyph in `--xeno-on-accent`; indeterminate stamps a minus glyph. An optional label sits to the
+ * right and is part of the button, so clicking the word toggles too. Controlled: owns nothing, reports
+ * the next boolean through `onCheckedChange` (a mixed box resolves to `true` on click).
+ */
+export type CheckboxState = boolean | 'mixed';
+export interface CheckboxProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'onChange' | 'children'> {
+    /** Tri-state: `true`, `false`, or `'mixed'` (indeterminate). */
+    readonly checked: CheckboxState;
+    /** Fires with the next boolean value (mixed → true). */
+    readonly onCheckedChange?: (checked: boolean) => void;
+    /** Optional clickable label rendered to the right of the box. */
+    readonly label?: ReactNode;
+}
+export declare function Checkbox({ checked, onCheckedChange, label, disabled, className, onClick, ...rest }: CheckboxProps): ReactElement;

package/dist/forms/Checkbox.js

@@ -0,0 +1,28 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
+import { XenoElement } from '../XenoElement.js';
+import { cx } from '../controls/util.js';
+import Check from '@xenosystem/elements/elements/check';
+import Minus from '@xenosystem/elements/elements/minus';
+/** Glyph px inside the ~17px box — small enough to breathe within the marker. */
+const GLYPH_PX = 13;
+export function Checkbox({ checked, onCheckedChange, label, disabled = false, className, onClick, ...rest }) {
+    const selection = checked === 'mixed' ? 'mixed' : checked ? 'on' : 'off';
+    /**
+     * The tick DRAWS itself when it appears, and a CSS animation starts the moment its element exists —
+     * so a form that mounts with boxes already ticked would draw every one of them on page load. Arm on
+     * the first render where `checked` actually changes, and leave it armed.
+     */
+    const [armed, setArmed] = useState(false);
+    const [seen, setSeen] = useState(checked);
+    if (seen !== checked) {
+        setSeen(checked);
+        if (!armed)
+            setArmed(true);
+    }
+    return (_jsxs("button", { type: "button", role: "checkbox", "aria-checked": checked === 'mixed' ? 'mixed' : checked, className: cx('xeno-checkbox', className), "data-selection": selection, "data-availability": disabled ? 'disabled' : 'enabled', ...(armed ? { 'data-motion': 'ready' } : {}), disabled: disabled, onClick: (e) => {
+            onClick?.(e);
+            if (!e.defaultPrevented)
+                onCheckedChange?.(checked !== true);
+        }, ...rest, children: [_jsx("span", { className: "xeno-checkbox-box", "aria-hidden": "true", children: checked === 'mixed' ? (_jsx(XenoElement, { decl: Minus, size: GLYPH_PX })) : checked ? (_jsx(XenoElement, { decl: Check, size: GLYPH_PX })) : null }), label !== undefined && _jsx("span", { className: "xeno-checkbox-label", children: label })] }));
+}

package/dist/forms/RadioGroup.d.ts

@@ -0,0 +1,51 @@
+import type { ButtonHTMLAttributes, HTMLAttributes, ReactElement, ReactNode } from 'react';
+/**
+ * `<RadioRow>` — one selectable row in a radio group. A rounded-SQUARE marker (never a circle) holds a
+ * smaller inner square that scales in when selected. CSS-first: the `selection` axis (`data-selection`)
+ * mirrors `aria-checked`. Usable standalone or, more usually, mapped by {@link RadioGroup}. Controlled:
+ * reports its own `value` up through `onSelect`.
+ */
+export interface RadioRowProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'onChange' | 'children' | 'onSelect'> {
+    /** The value this row represents. */
+    readonly value: string;
+    /** Whether this row is the selected one. */
+    readonly checked: boolean;
+    /** Fires with this row's `value` when chosen. */
+    readonly onSelect?: (value: string) => void;
+    /** Label rendered to the right of the marker. */
+    readonly label?: ReactNode;
+}
+/**
+ * The ref is FORWARDED rather than taken as a plain prop. Accepting `ref` in the props object is React
+ * 19 only; on React 18 — which this package's peer range still allows — `createElement` strips it, so
+ * the group's `refs.current[i]` would stay null and `focus()` after an arrow key would be a silent
+ * no-op: selection would move and focus would not, which is precisely the roving-tabindex contract.
+ */
+export declare const RadioRow: import("react").ForwardRefExoticComponent<RadioRowProps & import("react").RefAttributes<HTMLButtonElement>>;
+/** One choice in a {@link RadioGroup}. */
+export interface RadioOption {
+    readonly value: string;
+    readonly label: ReactNode;
+    readonly disabled?: boolean;
+}
+/**
+ * `<RadioGroup>` — a controlled `role="radiogroup"` that maps `options` to {@link RadioRow}s. Keyboard is
+ * hand-rolled to the WAI-ARIA radio pattern: Arrow keys move selection (and focus) to the next/previous
+ * enabled option and wrap; Home/End jump to the first/last; disabled options are skipped. Roving
+ * tabindex keeps exactly one row in the tab order.
+ */
+export interface RadioGroupProps extends Omit<HTMLAttributes<HTMLDivElement>, 'onChange'> {
+    /** The selected value. */
+    readonly value: string;
+    /** Fires with the newly selected value. */
+    readonly onValueChange?: (value: string) => void;
+    /** The choices, in order. */
+    readonly options: readonly RadioOption[];
+    /** Shared group name, forwarded to each row. */
+    readonly name: string;
+    /** Disable the whole group. */
+    readonly disabled?: boolean;
+    /** Layout axis. */
+    readonly orientation?: 'vertical' | 'horizontal';
+}
+export declare function RadioGroup({ value, onValueChange, options, name, disabled, orientation, className, onKeyDown, ...rest }: RadioGroupProps): ReactElement;

package/dist/forms/RadioGroup.js

@@ -0,0 +1,83 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef, useRef, useState } from 'react';
+import { cx } from '../controls/util.js';
+/**
+ * The ref is FORWARDED rather than taken as a plain prop. Accepting `ref` in the props object is React
+ * 19 only; on React 18 — which this package's peer range still allows — `createElement` strips it, so
+ * the group's `refs.current[i]` would stay null and `focus()` after an arrow key would be a silent
+ * no-op: selection would move and focus would not, which is precisely the roving-tabindex contract.
+ */
+export const RadioRow = forwardRef(function RadioRow({ value, checked, onSelect, label, disabled = false, className, onClick, ...rest }, ref) {
+    return (_jsxs("button", { type: "button", role: "radio", "aria-checked": checked, ref: ref, className: cx('xeno-radio', className), "data-selection": checked ? 'on' : 'off', "data-availability": disabled ? 'disabled' : 'enabled', disabled: disabled, onClick: (e) => {
+            onClick?.(e);
+            if (!e.defaultPrevented)
+                onSelect?.(value);
+        }, ...rest, children: [_jsx("span", { className: "xeno-radio-marker", "aria-hidden": "true", children: _jsx("span", { className: "xeno-radio-dot" }) }), label !== undefined && _jsx("span", { className: "xeno-radio-label", children: label })] }));
+});
+export function RadioGroup({ value, onValueChange, options, name, disabled = false, orientation = 'vertical', className, onKeyDown, ...rest }) {
+    const refs = useRef([]);
+    const select = (v) => onValueChange?.(v);
+    // First enabled index reached by stepping `dir` from `start` (exclusive), wrapping; -1 if none.
+    const nextEnabled = (start, dir) => {
+        const n = options.length;
+        for (let step = 1; step <= n; step++) {
+            const j = (((start + dir * step) % n) + n) % n;
+            const opt = options[j];
+            if (opt && opt.disabled !== true)
+                return j;
+        }
+        return -1;
+    };
+    const handleKeyDown = (e) => {
+        onKeyDown?.(e);
+        if (e.defaultPrevented || disabled || options.length === 0)
+            return;
+        const curr = options.findIndex((o) => o.value === value);
+        let target = -1;
+        switch (e.key) {
+            case 'ArrowDown':
+            case 'ArrowRight':
+                target = nextEnabled(curr < 0 ? -1 : curr, 1);
+                break;
+            case 'ArrowUp':
+            case 'ArrowLeft':
+                target = nextEnabled(curr < 0 ? 0 : curr, -1);
+                break;
+            case 'Home':
+                target = nextEnabled(-1, 1);
+                break;
+            case 'End':
+                target = nextEnabled(0, -1);
+                break;
+            default:
+                return;
+        }
+        e.preventDefault();
+        const opt = options[target];
+        if (!opt)
+            return;
+        select(opt.value);
+        refs.current[target]?.focus();
+    };
+    // Roving tabindex: the selected row is tabbable; if nothing is selected, the first enabled row is.
+    const selectedIdx = options.findIndex((o) => o.value === value);
+    const firstEnabled = disabled ? -1 : options.findIndex((o) => o.disabled !== true);
+    const rovingIdx = selectedIdx >= 0 ? selectedIdx : firstEnabled;
+    /**
+     * The mark stamps itself in on a keyframe, which plays as soon as its rule matches — so a group that
+     * mounts with a choice already made would stamp it on page load. Arm on the first render where
+     * `value` genuinely changes. The flag lives on the GROUP rather than the row, which is only safe
+     * because exactly one radio can be on: the sole rule that starts matching when the group arms belongs
+     * to the row that just changed.
+     */
+    const [armed, setArmed] = useState(false);
+    const [seen, setSeen] = useState(value);
+    if (seen !== value) {
+        setSeen(value);
+        if (!armed)
+            setArmed(true);
+    }
+    return (_jsx("div", { role: "radiogroup", "aria-disabled": disabled || undefined, "data-orientation": orientation, "data-availability": disabled ? 'disabled' : 'enabled', ...(armed ? { 'data-motion': 'ready' } : {}), className: cx('xeno-radiogroup', className), onKeyDown: handleKeyDown, ...rest, children: options.map((opt, i) => (_jsx(RadioRow, { value: opt.value, checked: opt.value === value, onSelect: select, label: opt.label, disabled: disabled || opt.disabled === true, name: name, tabIndex: i === rovingIdx ? 0 : -1, ref: (el) => {
+                refs.current[i] = el;
+            } }, opt.value))) }));
+}

package/dist/index.d.ts

@@ -0,0 +1,75 @@
+/**
+ * `@xenosystem/elements-react` — the XENO web renderer (React + SVG).
+ *
+ * - {@link XenoElement} renders any element DECLARATION (icons + stateful glyphs) from data.
+ * - Tier-1 CONTROLS (Button, IconButton, ToggleButton, Switch, TextInput, Textarea) are the first
+ *   non-icon elements — styled from the design tokens, CSS-first, behaviour hand-rolled (Base UI later).
+ * - Tier-2 ELEMENTS (containers, overlays, forms, content, nav, layout, status) compose the controls
+ *   and the renderer into the surfaces a chat/agent product needs.
+ *
+ * Import the styles once:
+ *   `@xenosystem/elements-react/xeno-elements.css`  (theme tokens + element + control + every element style)
+ * or à la carte:
+ *   `@xenosystem/elements-react/xeno-theme.css`  (tokens as CSS vars; scope with a `.xeno` element)
+ *   `@xenosystem/elements-react/controls.css`    (control styles)
+ *
+ * Glyphs are DATA: import each per-id from `@xenosystem/elements/elements/<id>`. No barrel.
+ *
+ * @module
+ */
+export { XenoElement, type XenoElementProps } from './XenoElement.js';
+export { useDialog, type UseDialogOptions, type UseDialogResult } from './useDialog.js';
+export { useTabs, type UseTabsOptions, type UseTabsResult } from './useTabs.js';
+export { useMenu, type UseMenuOptions, type UseMenuResult } from './useMenu.js';
+export { useGooPill, type UseGooPillOptions, type UseGooPillResult, } from './useGooPill.js';
+export { Button, type ButtonProps, type ButtonVariant } from './controls/Button.js';
+export { IconButton, type IconButtonProps } from './controls/IconButton.js';
+export { ConfirmButton, type ConfirmButtonProps } from './controls/ConfirmButton.js';
+export { ToggleButton, type ToggleButtonProps } from './controls/ToggleButton.js';
+export { Switch, type SwitchProps } from './controls/Switch.js';
+export { TextInput, type TextInputProps } from './controls/TextInput.js';
+export { Textarea, type TextareaProps } from './controls/Textarea.js';
+export type { ControlSizeToken } from './controls/util.js';
+export { Card, type CardProps, type CardVariant } from './containers/Card.js';
+export { Panel, type PanelProps } from './containers/Panel.js';
+export { Chip, type ChipProps, type ChipSize } from './containers/Chip.js';
+export { Tile, type TileProps } from './containers/Tile.js';
+export { MessageBubble, type MessageBubbleProps, type MessageRole } from './containers/MessageBubble.js';
+export { Badge, type BadgeProps } from './containers/Badges.js';
+export { StatusPill, type StatusPillProps, type StatusTone } from './containers/Badges.js';
+export { CountBadge, type CountBadgeProps } from './containers/Badges.js';
+export { CitationBadge, type CitationBadgeProps } from './containers/Badges.js';
+export { Avatar, type AvatarProps } from './containers/Avatar.js';
+export { AvatarStack, type AvatarStackProps, type AvatarStackItem } from './containers/Avatar.js';
+export { ListRow, type ListRowProps } from './containers/ListRow.js';
+export { Table, type TableProps, THead, type THeadProps, TBody, type TBodyProps, Tr, type TrProps, Th, type ThProps, Td, type TdProps, type ColumnAlign, } from './containers/Table.js';
+export { DataTable, type DataTableProps, type DataTableColumn } from './containers/DataTable.js';
+export { Popover, type PopoverProps } from './overlays/Popover.js';
+export { Menu, type MenuProps } from './overlays/Menu.js';
+export { MenuItem, type MenuItemProps, type MenuItemVariant } from './overlays/MenuItem.js';
+export { Modal, Sheet, type ModalProps, type SheetProps, type ModalVariant } from './overlays/Modal.js';
+export { Tabs, type TabsProps, type TabItem } from './overlays/Tabs.js';
+export { SegmentedControl, type SegmentedControlProps, type SegmentedOption } from './overlays/SegmentedControl.js';
+export { PillFilter, type PillFilterProps, type PillOption } from './overlays/PillFilter.js';
+export { Tooltip, type TooltipProps, type TooltipSide } from './overlays/Tooltip.js';
+export { PickerField, type PickerFieldProps } from './overlays/PickerField.js';
+export { Reveal, type RevealProps } from './overlays/Reveal.js';
+export { DatePicker, type DatePickerProps, TimePicker, type TimePickerProps } from './overlays/DateTimePicker.js';
+export type { DateParts, MonthParts, TimeValue, Meridiem } from './overlays/DateTimePicker.js';
+export { Checkbox, type CheckboxProps, type CheckboxState } from './forms/Checkbox.js';
+export { RadioGroup, type RadioGroupProps, RadioRow, type RadioRowProps, type RadioOption } from './forms/RadioGroup.js';
+export { CodeBlock, type CodeBlockProps, type CodeBlockOutput, type CodeBlockOutputStatus, } from './content/CodeBlock.js';
+export { SourceCard, type SourceCardProps } from './content/SourceCard.js';
+export { SourcesDisclosure, type SourcesDisclosureProps, type SourceRef } from './content/SourcesDisclosure.js';
+export { ModelPicker, type ModelPickerProps, type ModelOption, type ModelPickerLayout } from './content/ModelPicker.js';
+export { InlineCode, type InlineCodeProps } from './content/InlineCode.js';
+export { Callout, type CalloutProps, type CalloutTone } from './content/Callout.js';
+export { Collapsible, type CollapsibleProps } from './content/Collapsible.js';
+export { Caret, type CaretProps } from './content/Caret.js';
+export { Sidebar, type SidebarProps, type SidebarItem, type SidebarSection } from './nav/Sidebar.js';
+export { ResizablePanel, type ResizablePanelProps, type ResizablePanelSide } from './layout/ResizablePanel.js';
+export { ThinkingCube, type ThinkingCubeProps, type ThinkingCubeState } from './status/ThinkingCube.js';
+export { Spinner, type SpinnerProps } from './status/Spinner.js';
+export { ProgressBar, type ProgressBarProps } from './status/ProgressBar.js';
+export { StepTimeline, type StepTimelineProps, type Step, type StepStatus } from './status/StepTimeline.js';
+export { StatusIndicator, type StatusIndicatorProps, type StatusIndicatorTone } from './status/StatusIndicator.js';