@box-kite/react 1.0.0 → 2.0.1

package/components/popover.d.ts

@@ -0,0 +1,100 @@
+import { BoxProps } from '../box';
+import { ChangeHandler } from '../react/a11y/useControllableState';
+import { PopoverReason, PopoverTrigger as PopoverLayerTrigger, PopoverTriggerAttributes as PopoverLayerTriggerAttributes } from '../react/popover/usePopoverLayer';
+import { ComponentsAndVariants } from '@box-kite/core/types';
+import { AnchorAlign, AnchorSide } from '../utils/anchor/anchorUtils';
+export type { PopoverReason };
+/** The DOM attributes the trigger has to carry. */
+export type PopoverTriggerAttributes = PopoverLayerTriggerAttributes<'dialog'>;
+/**
+ * What the trigger has to carry: spread it onto the control itself, not a wrapper. The `ref` is what the
+ * popover is anchored to, so it is not optional decoration (see `anchor` on `Overlay`).
+ *
+ * ```tsx
+ * {(trigger) => <Button {...trigger}>Options</Button>}          // a Box component
+ * {(trigger) => <button ref={trigger.ref} {...trigger.props}>}  // a plain element
+ * ```
+ *
+ * It must be a **button**: `popovertarget` is what the browser toggles on, and it only reads it off one.
+ */
+export type PopoverTrigger = PopoverLayerTrigger<'dialog'>;
+type PopoverBoxProps<TKey extends keyof ComponentsAndVariants> = Omit<BoxProps<'div', TKey>, 'open' | 'flip'>;
+interface Props<TKey extends keyof ComponentsAndVariants> extends PopoverBoxProps<TKey> {
+    /** The trigger, handed the ref and props that wire it to the popover. It has to be a button. */
+    trigger: (trigger: PopoverTrigger) => React.ReactNode;
+    /** The panel's content. Rendered whether or not the popover is open — see the note on mounting. */
+    children?: React.ReactNode;
+    /** Controlled open state. Leave it out and the popover owns it. */
+    open?: boolean;
+    /** Whether it starts open, when the popover owns its own state. */
+    defaultOpen?: boolean;
+    /**
+     * Fires with the new state and why it changed — `'trigger'`, `'escape'`, `'outside-pointer'` or
+     * `'imperative'`. A close cannot be refused: the browser has already done it by the time this runs.
+     */
+    onOpenChange?: ChangeHandler<boolean, PopoverReason>;
+    /** The panel's accessible name. `role="dialog"` has none of its own, and a dialog without one is unusable. */
+    label?: string;
+    /** Names the panel after an element already on the page, instead of `label`. */
+    labelledBy?: string;
+    /**
+     * Which side of the trigger the panel sits on — `top`/`bottom` are the block axis, `start`/`end` the
+     * inline one, so a panel beside its trigger mirrors in a right-to-left page. Default `'bottom'`.
+     */
+    side?: AnchorSide;
+    /** Which of the trigger's edges to line the panel up with along the other axis. Default `'center'`. */
+    align?: AnchorAlign;
+    /** The gap between trigger and panel, on the ÷4 spacing scale. Default 2 — 8px. */
+    offset?: number;
+    /** Whether a side with no room may be swapped for its opposite. Default `true`. */
+    flip?: boolean;
+    /** Whether the panel is at least as wide as its trigger. Default `false` — a panel sizes to its content. */
+    matchWidth?: boolean;
+    /**
+     * Whether opening moves focus into the panel. Default `true`, which is what APG asks of a dialog. An
+     * `autofocus` attribute inside wins: the browser applies it first and this only acts on what is left.
+     */
+    autoFocus?: boolean;
+}
+/**
+ * A panel anchored to a trigger, on the platform's own Popover API: the top layer, light dismiss and
+ * focus return are the browser's, and the position is CSS anchor positioning.
+ *
+ * ```tsx
+ * <Popover label="Filters" trigger={(t) => <Button {...t}>Filters</Button>}>
+ *   <Checkbox label="Only mine" />
+ * </Popover>
+ * ```
+ *
+ * **There is no portal.** A top-layer element paints above every stacking context and outside every
+ * clipped ancestor, which is the whole class of bug a portal exists to work around — and because the
+ * panel stays where it was declared in the DOM, it inherits the theme, the custom properties and the text
+ * direction around it, and the tab order runs trigger → panel with nothing to arrange. (Measured against a
+ * `z-index: 9999` sibling, a `transform`ed ancestor and an `overflow: hidden` one.)
+ *
+ * **The panel is always rendered**, and closed means `display: none` from the UA stylesheet. That is what
+ * lets the browser own show and hide — and what makes the exit a plain CSS transition rather than a
+ * `<Presence>`, since nothing unmounts. Content that is expensive to render should be gated by the
+ * consumer: `{open && <Heavy />}`.
+ *
+ * **The panel keeps the side it chose when it opened.** Chrome re-evaluates `position-try-fallbacks` on
+ * scroll for an ordinary positioned element and never for one in the top layer (measured in 152), so a
+ * panel left open while the page scrolls does not flip when its side runs out of room. Every open picks
+ * the right side; it is only a scroll *while* open that this affects. See `Overlay`, which shares it.
+ *
+ * Where the browser has no Popover API the panel is an `Overlay` — a portal — with `useDismiss` and
+ * `useFocusReturn` supplying what the platform otherwise would.
+ *
+ * @a11y `role="dialog"` on the panel, named by `label` or `labelledBy`; the popover attribute supplies no
+ * role at all, and a panel with none is announced as a group of orphaned content.
+ * @a11y The trigger carries `aria-expanded`, `aria-haspopup="dialog"` and `aria-controls`, so the control
+ * says what it operates and what state it is in.
+ * @a11y Focus moves into the panel on open and back to the trigger on close. Nothing is trapped: this is a
+ * non-modal dialog, so Tab leaves it, and the panel follows the trigger in the DOM either way.
+ * @keyboard Enter, Space — On the trigger, toggles the panel.
+ * @keyboard Escape — Closes it and returns focus to the trigger, from anywhere inside.
+ * @keyboard Tab — Moves into the panel from the trigger, and out of the panel to whatever follows it.
+ */
+declare function PopoverImpl<TKey extends keyof ComponentsAndVariants = 'popover'>(props: Props<TKey>): import("react").JSX.Element;
+declare const Popover: typeof PopoverImpl;
+export default Popover;

package/components/popover.mjs

@@ -0,0 +1,69 @@
+"use client";
+import e from "../box.mjs";
+import { a as t } from "../behavior.mjs";
+import { t as n } from "../placement.mjs";
+import r from "./overlay.mjs";
+import { t as i } from "../layer.mjs";
+import { Fragment as a, jsx as o, jsxs as s } from "react/jsx-runtime";
+//#region src/components/popover.tsx
+function c(c) {
+	let { trigger: l, children: u, open: d, defaultOpen: f = !1, onOpenChange: p, label: m, labelledBy: h, side: g = "bottom", align: _ = "center", offset: v = 2, flip: y = !0, matchWidth: b = !1, autoFocus: x = !0, props: S, ...C } = c, w = t((e) => {
+		!x || e.contains(document.activeElement) || e.focus();
+	}), { platform: T, isOpen: E, id: D, trigger: O, triggerElement: k, setPanel: A } = i({
+		haspopup: "dialog",
+		idPrefix: "popover",
+		id: C.id,
+		open: d,
+		defaultOpen: f,
+		onOpenChange: p,
+		onOpened: w
+	}), j = n({
+		side: g,
+		align: _,
+		offset: v,
+		flip: y,
+		matchWidth: b,
+		anchor: k
+	}), M = {
+		"aria-label": m,
+		"aria-labelledby": h
+	}, N = C;
+	return T ? /* @__PURE__ */ s(a, { children: [l(O), /* @__PURE__ */ o(e, {
+		ref: A,
+		component: "popover",
+		...N,
+		variant: [N.variant, { topLayer: !0 }],
+		...j.layerProps,
+		id: D,
+		props: {
+			popover: "auto",
+			role: "dialog",
+			...M,
+			tabIndex: -1,
+			...S
+		},
+		children: u
+	})] }) : /* @__PURE__ */ s(a, { children: [l(O), E && /* @__PURE__ */ o(r, {
+		contentRef: A,
+		anchor: k,
+		side: g,
+		align: _,
+		offset: v,
+		flip: y,
+		matchWidth: b,
+		component: "popover",
+		...N,
+		id: D,
+		props: {
+			role: "dialog",
+			...M,
+			tabIndex: -1,
+			...S
+		},
+		children: u
+	})] });
+}
+var l = c;
+l.displayName = "Popover";
+//#endregion
+export { l as default };

package/components/presence.d.ts

@@ -24,6 +24,12 @@ interface Props {
  * takes DOM attributes in a `props` bag, a plain element takes them on top. The `ref` is not decoration
  * either: whichever element it lands on is the one whose computed style the wait is measured from, so it
  * belongs on the element that carries the transition.
+ *
+ * @a11y The exit is measured from the element's own `transition-duration`/`animation-duration`, so
+ * `prefers-reduced-motion` — which zeroes `--transitionTime` — removes the node in the same commit
+ * with no opt-in.
+ * @a11y `data-state` is `'open'` or `'closed'` on the child, which is what a CSS exit selects on. A
+ * node on its way out is still in the accessibility tree, so anything hiding it has to say so itself.
  */
 declare function Presence(props: Props): import("react").JSX.Element;
 export default Presence;

package/components/progress.cjs

@@ -0,0 +1 @@
+Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:`Module`}});const e=require("../rolldown-runtime.cjs");let t=require("react/jsx-runtime"),n=require("@box-kite/react");n=e.t(n,1);function r(e){let{value:r,min:i=0,max:a=100,label:o,labelledBy:s,format:c,props:l,...u}=e,d=r===void 0,f=d?i:Math.min(Math.max(r,i),a),p=a<=i?0:Math.round((f-i)/(a-i)*1e4)/100;return(0,t.jsx)(n.default,{component:`progress`,...u,props:{role:`progressbar`,"aria-valuemin":i,"aria-valuemax":a,"aria-valuenow":d?void 0:f,"aria-valuetext":d?void 0:c?.(f),"aria-label":o,"aria-labelledby":s,...l},children:(0,t.jsx)(n.default,{component:`progress.fill`,variant:{indeterminate:d},style:d?void 0:{inlineSize:`${p}%`}})})}r.displayName=`Progress`,exports.default=r;

package/components/progress.d.ts

@@ -0,0 +1,47 @@
+import { BoxProps } from '../box';
+import { ComponentsAndVariants } from '@box-kite/core/types';
+export interface ProgressProps<TKey extends keyof ComponentsAndVariants = 'progress'> extends BoxProps<'div', TKey> {
+    /** How far along it is. Leave it out for a task with no measurable end — the bar sweeps and reports nothing. */
+    value?: number;
+    /** The bottom of the range. Default `0`. */
+    min?: number;
+    /** The top of the range, and so what "full" means. Default `100`. */
+    max?: number;
+    /** What the bar is called. A progress bar has to be named — nothing about it is readable otherwise. */
+    label?: string;
+    /** The same, naming an element that already says it. */
+    labelledBy?: string;
+    /** The value as it should be read out: "3 of 10 files", "eleven minutes left". */
+    format?: (value: number) => string;
+}
+/**
+ * How far a task has got.
+ *
+ * ```tsx
+ * <Progress label="Upload" value={62} />
+ * <Progress label="Preparing" />
+ * ```
+ *
+ * **No `value` is the indeterminate bar**, which is a state and not a number: `aria-valuenow` is left off
+ * entirely — the one thing a reader must not be told is a progress that was never measured — and the bar
+ * sweeps instead, stopping under `prefers-reduced-motion` because a named duration is outside what
+ * `--transitionTime` zeroes.
+ *
+ * **The fill is an inline style and everything else is a class**, the exception `Slider` explains: a
+ * percentage that moves with a download is a rule per frame if it goes in a class name. Where the value
+ * is data rather than an animation, a `ProgressRing` from `components/chart` rounds it into a class
+ * instead and pays nothing.
+ *
+ * It renders on a server — no state, no effect, no measurement — so a page can paint a real figure
+ * before any JavaScript arrives.
+ *
+ * @a11y `role="progressbar"` with `aria-valuemin`, `aria-valuemax` and, when there is one, `aria-valuenow`.
+ * @a11y `label` or `labelledBy` is what names it. A bar with neither is a percentage nobody can attach
+ * to anything.
+ * @a11y `format` writes `aria-valuetext`, for a value the number alone does not read as.
+ */
+declare function Progress<TKey extends keyof ComponentsAndVariants = 'progress'>(props: ProgressProps<TKey>): import("react").JSX.Element;
+declare namespace Progress {
+    var displayName: string;
+}
+export default Progress;

package/components/progress.mjs

@@ -0,0 +1,28 @@
+import { jsx as e } from "react/jsx-runtime";
+import t from "@box-kite/react";
+//#region src/components/progress.tsx
+function n(n) {
+	let { value: r, min: i = 0, max: a = 100, label: o, labelledBy: s, format: c, props: l, ...u } = n, d = r === void 0, f = d ? i : Math.min(Math.max(r, i), a), p = a <= i ? 0 : Math.round((f - i) / (a - i) * 1e4) / 100;
+	return /* @__PURE__ */ e(t, {
+		component: "progress",
+		...u,
+		props: {
+			role: "progressbar",
+			"aria-valuemin": i,
+			"aria-valuemax": a,
+			"aria-valuenow": d ? void 0 : f,
+			"aria-valuetext": d ? void 0 : c?.(f),
+			"aria-label": o,
+			"aria-labelledby": s,
+			...l
+		},
+		children: /* @__PURE__ */ e(t, {
+			component: "progress.fill",
+			variant: { indeterminate: d },
+			style: d ? void 0 : { inlineSize: `${p}%` }
+		})
+	});
+}
+n.displayName = "Progress";
+//#endregion
+export { n as default };

package/components/radioButton.cjs

@@ -1 +1 @@
-Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:`Module`}});const e=require("../rolldown-runtime.cjs"),t=require("../react-shared.cjs"),n=require("../forms.cjs");let r=require("react"),i=require("react/jsx-runtime"),a=require("@box-kite/react");a=e.t(a,1);var o=[`name`,`onInput`,`onChange`,`value`,`autoFocus`,`readOnly`,`defaultChecked`];function s(e,r){let{label:s,labelProps:c,...l}=e,u=t.t.buildProps(l,o,{type:`radio`});return(0,i.jsx)(n.n,{label:s,labelProps:c,children:(0,i.jsx)(a.default,{ref:r,tag:`input`,component:`radioButton`,...u})})}var c=(0,r.forwardRef)(s);c.displayName=`RadioButton`,exports.default=c;
+Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:`Module`}});const e=require("../rolldown-runtime.cjs"),t=require("../react-shared.cjs"),n=require("../forms.cjs");let r=require("react"),i=require("react/jsx-runtime"),a=require("@box-kite/react");a=e.t(a,1);var o=[`name`,`onInput`,`onChange`,`value`,`autoFocus`,`readOnly`,`defaultChecked`];function s(e,r){let{label:s,labelProps:c,...l}=e,u=t.i.buildProps(l,o,{type:`radio`});return(0,i.jsx)(n.n,{label:s,labelProps:c,children:(0,i.jsx)(a.default,{ref:r,tag:`input`,component:`radioButton`,...u})})}var c=(0,r.forwardRef)(s);c.displayName=`RadioButton`,exports.default=c;

package/components/radioButton.d.ts

@@ -7,13 +7,21 @@ type TagPropsType = (typeof tagProps)[number];
 type RadioButtonProps<TKey extends keyof ComponentsAndVariants> = Omit<BoxProps<'input', TKey>, 'tag' | 'props'>;
 type RadioButtonTagProps = OmitTagProps<BoxTagProps<'input'>, TagPropsType | 'type'>;
 interface Props<TKey extends keyof ComponentsAndVariants> extends RadioButtonProps<TKey> {
+    /** The name the radios of one set share — it is what makes them one choice rather than several. */
     name?: string;
+    /** Attributes for the `<input>` itself. `type` is the component's. */
     props?: RadioButtonTagProps;
+    /** Fires on every click or keystroke. On a radio this is the same moment as `onChange`. */
     onInput?: (e: React.ChangeEvent<HTMLInputElement>) => void;
+    /** Fires when this radio becomes the chosen one. A radio never fires it on being cleared. */
     onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void;
+    /** What the set submits when this option is the chosen one. */
     value?: string | number;
+    /** Focus it on mount. One per page at most — a stolen focus is a lost place in the document. */
     autoFocus?: boolean;
+    /** Rendered and read, but not selectable. Unlike `disabled` it stays in the tab order and submits. */
     readOnly?: boolean;
+    /** Makes this the chosen option to begin with, when the set is uncontrolled. */
     defaultChecked?: boolean;
     /** The text beside the radio, rendered inside a `<label>` that wraps the input. */
     label?: React.ReactNode;

package/components/radioButton.mjs

@@ -1,4 +1,4 @@
-import { t as e } from "../react-shared.mjs";
+import { i as e } from "../react-shared.mjs";
 import { n as t } from "../forms.mjs";
 import { forwardRef as n } from "react";
 import { jsx as r } from "react/jsx-runtime";

package/components/radioGroup.cjs

@@ -1 +1 @@
-"use client";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:`Module`}});const e=require("../behavior.cjs"),t=require("./flex.cjs"),n=require("./semantics.cjs"),r=require("./radioButton.cjs");let i=require("react"),a=require("react/jsx-runtime");var o=(0,i.createContext)(null);function s(e){return[...e?.querySelectorAll(`input[type="radio"]`)??[]].filter(e=>!e.disabled)}function c(e){return e===`ArrowDown`||e===`ArrowRight`?1:e===`ArrowUp`||e===`ArrowLeft`?-1:0}function l(r){let{label:l,name:u,value:d,defaultValue:f,onChange:p,orientation:m=`vertical`,children:h,props:g,..._}=r,v=e.n(`radiogroup`),y=(0,i.useRef)(null),b=(0,i.useRef)(`click`),[x,S]=e.a({value:d,defaultValue:f,onChange:p}),C=e.o(e=>{let t=c(e.key);if(t===0||e.defaultPrevented)return;let n=s(y.current),r=n.indexOf(document.activeElement);if(r===-1)return;e.preventDefault();let i=n[(r+t+n.length)%n.length];i!==n[r]&&(b.current=`keyboard`,i.focus(),i.click(),b.current=`click`)}),w=`${v}-label`,T=l!=null,E=(0,i.useMemo)(()=>({name:u??v,value:x,select:(e,t)=>S(e,{reason:b.current,event:t})}),[v,u,x,S]);return(0,a.jsx)(o.Provider,{value:E,children:(0,a.jsxs)(t.default,{ref:y,d:m===`horizontal`?`row`:`column`,gap:2,..._,props:{role:`radiogroup`,"aria-labelledby":T?w:void 0,...g,onKeyDown:C},children:[T&&(0,a.jsx)(n.Span,{id:w,children:l}),h]})})}function u(t){let n=(0,i.useContext)(o),{value:s,...c}=t,l=e.o(e=>n?.select(s,e));return n?(0,a.jsx)(r.default,{name:n.name,value:s,checked:n.value===s,onChange:l,...c}):(0,a.jsx)(r.default,{value:s,...c})}u.displayName=`RadioGroup.Item`;var d=l;d.Item=u,d.displayName=`RadioGroup`,exports.default=d;
+"use client";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:`Module`}});const e=require("../behavior.cjs"),t=require("../identity.cjs"),n=require("./flex.cjs"),r=require("./semantics.cjs"),i=require("./radioButton.cjs");let a=require("react"),o=require("react/jsx-runtime");var s=(0,a.createContext)(null);function c(e){return[...e?.querySelectorAll(`input[type="radio"]`)??[]].filter(e=>!e.disabled)}function l(e){return e===`ArrowDown`||e===`ArrowRight`?1:e===`ArrowUp`||e===`ArrowLeft`?-1:0}function u(i){let{label:u,name:d,value:f,defaultValue:p,onValueChange:m,onChange:h,orientation:g=`vertical`,children:_,props:v,...y}=i,b=t.t(`radiogroup`),x=(0,a.useRef)(null),S=(0,a.useRef)(`click`),C=e.a((e,t)=>{m?.(e,t),h?.(e,t)}),[w,T]=e.i({value:f,defaultValue:p,onChange:C}),E=e.a(e=>{let t=l(e.key);if(t===0||e.defaultPrevented)return;let n=c(x.current),r=n.indexOf(document.activeElement);if(r===-1)return;e.preventDefault();let i=n[(r+t+n.length)%n.length];i!==n[r]&&(S.current=`keyboard`,i.focus(),i.click(),S.current=`click`)}),D=`${b}-label`,O=u!=null,k=(0,a.useMemo)(()=>({name:d??b,value:w,select:(e,t)=>T(e,{reason:S.current,event:t})}),[b,d,w,T]);return(0,o.jsx)(s.Provider,{value:k,children:(0,o.jsxs)(n.default,{ref:x,component:`radioGroup`,variant:{horizontal:g===`horizontal`},...y,props:{role:`radiogroup`,"aria-labelledby":O?D:void 0,...v,onKeyDown:E},children:[O&&(0,o.jsx)(r.Span,{component:`radioGroup.label`,id:D,children:u}),_]})})}function d(t){let n=(0,a.useContext)(s),{value:r,...c}=t,l=e.a(e=>n?.select(r,e));return n?(0,o.jsx)(i.default,{name:n.name,value:r,checked:n.value===r,onChange:l,...c}):(0,o.jsx)(i.default,{value:r,...c})}d.displayName=`RadioGroup.Item`;var f=u;f.Item=d,f.displayName=`RadioGroup`,exports.default=f;

package/components/radioGroup.d.ts

@@ -2,7 +2,7 @@ import { Ref, RefAttributes } from 'react';
 import { BoxProps, BoxTagProps } from '../box';
 import { ChangeHandler } from '../react/a11y/useControllableState';
 import { ComponentsAndVariants } from '@box-kite/core/types';
-/** Why the selection changed — `onChange` gets this alongside the event that did it. */
+/** Why the selection changed — `onValueChange` gets this alongside the event that did it. */
 export type RadioGroupReason = 'click' | 'keyboard';
 type RadioGroupBoxProps<TKey extends keyof ComponentsAndVariants> = Omit<BoxProps<'div', TKey>, 'tag' | 'onChange' | 'children'>;
 interface Props<TKey extends keyof ComponentsAndVariants> extends RadioGroupBoxProps<TKey> {
@@ -12,10 +12,20 @@ interface Props<TKey extends keyof ComponentsAndVariants> extends RadioGroupBoxP
     name?: string;
     /** Controlled selection. Leave it out and the group owns it. */
     value?: string;
+    /** The option chosen to begin with, when the group owns its value. */
     defaultValue?: string;
+    /** Fires with the new value and why it changed — `'click'` or `'keyboard'`. A group can also hold
+     * nothing, so the value is `string | undefined`. */
+    onValueChange?: ChangeHandler<string | undefined, RadioGroupReason>;
+    /**
+     * The same callback under its old name. Both fire, so either one can be passed.
+     * @deprecated `onValueChange` is what every other component reports a value change under, and a group
+     * is not an `<input>` — this spelling still works and means the same thing.
+     */
     onChange?: ChangeHandler<string | undefined, RadioGroupReason>;
     /** Which way the radios stack. Both arrow pairs navigate either way, as APG specifies. */
     orientation?: 'vertical' | 'horizontal';
+    /** The options: `RadioGroup.Item` elements, or anything else the group should hold. */
     children?: React.ReactNode;
 }
 interface ItemProps extends Omit<BoxProps<'input', 'radioButton'>, 'tag' | 'props' | 'onChange' | 'checked'> {
@@ -25,12 +35,15 @@ interface ItemProps extends Omit<BoxProps<'input', 'radioButton'>, 'tag' | 'prop
     name?: string;
     /** The text beside the radio, rendered inside a label that wraps the input. */
     label?: React.ReactNode;
+    /** Styles for the wrapping `<label>`: the row's layout, not the radio's own appearance. */
     labelProps?: BoxProps<'label'>;
+    /** Attributes for the `<input>` itself. `type`, `name` and `checked` are the group's. */
     props?: BoxTagProps<'input'>;
+    /** The `<input>` element, for a caller that has to focus or measure this option. */
     ref?: Ref<HTMLInputElement>;
 }
 interface RadioGroupType {
-    <TKey extends keyof ComponentsAndVariants = never>(props: Props<TKey>): React.ReactNode;
+    <TKey extends keyof ComponentsAndVariants = 'radioGroup'>(props: Props<TKey>): React.ReactNode;
     Item: (props: ItemProps & RefAttributes<HTMLInputElement>) => React.ReactNode;
     displayName?: string;
 }

package/components/radioGroup.mjs

@@ -1,5 +1,6 @@
 "use client";
-import { a as e, n as t, o as n } from "../behavior.mjs";
+import { a as e, i as t } from "../behavior.mjs";
+import { t as n } from "../identity.mjs";
 import r from "./flex.mjs";
 import { Span as i } from "./semantics.mjs";
 import a from "./radioButton.mjs";
@@ -14,57 +15,60 @@ function m(e) {
 	return e === "ArrowDown" || e === "ArrowRight" ? 1 : e === "ArrowUp" || e === "ArrowLeft" ? -1 : 0;
 }
 function h(a) {
-	let { label: o, name: s, value: h, defaultValue: g, onChange: _, orientation: v = "vertical", children: y, props: b, ...x } = a, S = t("radiogroup"), C = l(null), w = l("click"), [T, E] = e({
+	let { label: o, name: s, value: h, defaultValue: g, onValueChange: _, onChange: v, orientation: y = "vertical", children: b, props: x, ...S } = a, C = n("radiogroup"), w = l(null), T = l("click"), E = e((e, t) => {
+		_?.(e, t), v?.(e, t);
+	}), [D, O] = t({
 		value: h,
 		defaultValue: g,
-		onChange: _
-	}), D = n((e) => {
+		onChange: E
+	}), k = e((e) => {
 		let t = m(e.key);
 		if (t === 0 || e.defaultPrevented) return;
-		let n = p(C.current), r = n.indexOf(document.activeElement);
+		let n = p(w.current), r = n.indexOf(document.activeElement);
 		if (r === -1) return;
 		e.preventDefault();
 		let i = n[(r + t + n.length) % n.length];
-		i !== n[r] && (w.current = "keyboard", i.focus(), i.click(), w.current = "click");
-	}), O = `${S}-label`, k = o != null, A = c(() => ({
-		name: s ?? S,
-		value: T,
-		select: (e, t) => E(e, {
-			reason: w.current,
+		i !== n[r] && (T.current = "keyboard", i.focus(), i.click(), T.current = "click");
+	}), A = `${C}-label`, j = o != null, M = c(() => ({
+		name: s ?? C,
+		value: D,
+		select: (e, t) => O(e, {
+			reason: T.current,
 			event: t
 		})
 	}), [
-		S,
+		C,
 		s,
-		T,
-		E
+		D,
+		O
 	]);
 	return /* @__PURE__ */ u(f.Provider, {
-		value: A,
+		value: M,
 		children: /* @__PURE__ */ d(r, {
-			ref: C,
-			d: v === "horizontal" ? "row" : "column",
-			gap: 2,
-			...x,
+			ref: w,
+			component: "radioGroup",
+			variant: { horizontal: y === "horizontal" },
+			...S,
 			props: {
 				role: "radiogroup",
-				"aria-labelledby": k ? O : void 0,
-				...b,
-				onKeyDown: D
+				"aria-labelledby": j ? A : void 0,
+				...x,
+				onKeyDown: k
 			},
-			children: [k && /* @__PURE__ */ u(i, {
-				id: O,
+			children: [j && /* @__PURE__ */ u(i, {
+				component: "radioGroup.label",
+				id: A,
 				children: o
-			}), y]
+			}), b]
 		})
 	});
 }
-function g(e) {
-	let t = s(f), { value: r, ...i } = e, o = n((e) => t?.select(r, e));
-	return t ? /* @__PURE__ */ u(a, {
-		name: t.name,
+function g(t) {
+	let n = s(f), { value: r, ...i } = t, o = e((e) => n?.select(r, e));
+	return n ? /* @__PURE__ */ u(a, {
+		name: n.name,
 		value: r,
-		checked: t.value === r,
+		checked: n.value === r,
 		onChange: o,
 		...i
 	}) : /* @__PURE__ */ u(a, {

package/components/select.d.ts

@@ -1,6 +1,8 @@
 import { RefAttributes } from 'react';
 import { BoxProps } from '../box';
+import { ChangeHandler } from '../react/a11y/useControllableState';
 import { BoxStyleProps, ComponentsAndVariants } from '@box-kite/core/types';
+import { DropdownValueReason } from './dropdown';
 interface SelectDef<TRow> {
     /** Key of TRow to use as the option value */
     valueKey: keyof TRow & (string | number);
@@ -33,6 +35,13 @@ interface Props<TRow, TVal extends TRow[keyof TRow], TKey extends keyof Componen
     labelProps?: BoxProps<'div'>;
     itemsProps?: BoxStyleProps;
     iconProps?: BoxStyleProps;
+    /** Fires with the selection in whatever shape `value` takes, and why it changed — see `Dropdown`. */
+    onValueChange?: ChangeHandler<TVal | TVal[] | undefined, DropdownValueReason>;
+    /**
+     * The older callback, whose first argument is the option *acted on*. Both fire.
+     * @deprecated `onValueChange` is what every component reports a value change under, and it carries the
+     * reason. This spelling still works.
+     */
     onChange?: (value: TVal | undefined, values: TVal[]) => void;
 }
 interface SelectType {

package/components/semantics.cjs

@@ -1 +1 @@
-Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("../rolldown-runtime.cjs"),t=require("../react-shared.cjs");let n=require("react"),r=require("react/jsx-runtime"),i=require("@box-kite/react");i=e.t(i,1);function a(e){let a=(0,n.forwardRef)((t,n)=>(0,r.jsx)(i.default,{tag:e,ref:n,component:e,...t}));return a.displayName=t.n.capitalize(e),a}var o=a(`label`),s=a(`span`),c=a(`article`),l=a(`aside`),u=a(`details`),d=a(`figcaption`),f=a(`figure`),p=a(`footer`),m=a(`header`),h=a(`main`),g=a(`mark`),_=a(`nav`),v=a(`menu`),y=a(`section`),b=a(`summary`),x=a(`time`),S=a(`p`),C=a(`ul`),w=a(`ol`),T=a(`li`),E=a(`h1`),D=a(`h2`),O=a(`h3`),k=a(`h4`),A=a(`h5`),j=a(`h6`),M=a(`a`),N=a(`img`);exports.Article=c,exports.Aside=l,exports.Details=u,exports.Figcaption=d,exports.Figure=f,exports.Footer=p,exports.H1=E,exports.H2=D,exports.H3=O,exports.H4=k,exports.H5=A,exports.H6=j,exports.Header=m,exports.Img=N,exports.Label=o,exports.Li=T,exports.Link=M,exports.Main=h,exports.Mark=g,exports.Menu=v,exports.Nav=_,exports.Ol=w,exports.P=S,exports.Section=y,exports.Span=s,exports.Summary=b,exports.Time=x,exports.Ul=C;
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("../rolldown-runtime.cjs"),t=require("../react-shared.cjs");let n=require("react"),r=require("react/jsx-runtime"),i=require("@box-kite/react");i=e.t(i,1);function a(e){let a=(0,n.forwardRef)((t,n)=>(0,r.jsx)(i.default,{tag:e,ref:n,component:e,...t}));return a.displayName=t.a.capitalize(e),a}var o=a(`label`),s=a(`span`),c=a(`article`),l=a(`aside`),u=a(`details`),d=a(`figcaption`),f=a(`figure`),p=a(`footer`),m=a(`header`),h=a(`main`),g=a(`mark`),_=a(`nav`),v=a(`menu`),y=v,b=a(`section`),x=a(`summary`),S=a(`time`),C=a(`p`),w=a(`ul`),T=a(`ol`),E=a(`li`),D=a(`h1`),O=a(`h2`),k=a(`h3`),A=a(`h4`),j=a(`h5`),M=a(`h6`),N=a(`a`),P=a(`img`);exports.Article=c,exports.Aside=l,exports.Details=u,exports.Figcaption=d,exports.Figure=f,exports.Footer=p,exports.H1=D,exports.H2=O,exports.H3=k,exports.H4=A,exports.H5=j,exports.H6=M,exports.Header=m,exports.Img=P,exports.Label=o,exports.Li=E,exports.Link=N,exports.Main=h,exports.Mark=g,exports.Menu=y,exports.MenuList=v,exports.Nav=_,exports.Ol=T,exports.P=C,exports.Section=b,exports.Span=s,exports.Summary=x,exports.Time=S,exports.Ul=w;