@box-kite/react 2.2.15 → 2.2.16

package/components/overlay.mjs

@@ -1,53 +1,53 @@
 "use client";
-import { c as e, d as t, p as n } from "../platform.mjs";
-import { t as r } from "../client.mjs";
-import { n as i } from "../effects.mjs";
-import a from "../box.mjs";
-import { t as o } from "../placement.mjs";
-import { n as s } from "../layer.mjs";
-import { forwardRef as c, useCallback as l, useRef as u, useState as d } from "react";
-import { Fragment as f, jsx as p, jsxs as m } from "react/jsx-runtime";
-import { createPortal as h } from "react-dom";
+import { c as e, f as t, l as n, m as r } from "../platform.mjs";
+import { t as i } from "../client.mjs";
+import { n as a } from "../effects.mjs";
+import o from "../box.mjs";
+import { t as s } from "../placement.mjs";
+import { n as c } from "../layer.mjs";
+import { forwardRef as l, useCallback as u, useRef as d, useState as f } from "react";
+import { Fragment as p, jsx as m, jsxs as h } from "react/jsx-runtime";
+import { createPortal as g } from "react-dom";
 //#region src/components/overlay.tsx
-function g(c, g) {
-	let { side: _ = "bottom", align: v = "center", offset: y = 0, flip: b = !0, onSideChange: x, anchor: S, contentRef: C, matchWidth: w = !0, ...T } = c, [E, D] = d(null), [O, k] = d(!1), A = u(null), j = s(), M = u(null), N = r(!j), P = o({
-		side: _,
-		align: v,
-		offset: y,
-		flip: b,
-		matchWidth: w,
-		anchor: S ?? E,
-		trackSide: !!x
+function _(l, _) {
+	let { side: v = "bottom", align: y = "center", offset: b = 0, flip: x = !0, onSideChange: S, anchor: C, contentRef: w, matchWidth: T = !0, ...E } = l, [D, O] = f(null), [k, A] = f(!1), j = d(null), M = c(), N = d(null), P = i(!M), F = s({
+		side: v,
+		align: y,
+		offset: b,
+		flip: x,
+		matchWidth: T,
+		anchor: C ?? D,
+		trackSide: !!S
 	});
-	i(() => {
-		let t = M.current;
-		!j || !e() || !t || !t.isConnected || t.matches(":popover-open") || t.showPopover();
-	}), i(() => {
-		if (j) return;
-		let e = t(S) ?? E;
-		k(!!e && n(e));
+	a(() => {
+		let t = N.current;
+		!M || !e() || !t || !t.isConnected || t.matches(":popover-open") || t.showPopover();
+	}), a(() => {
+		if (M) return;
+		let e = t(C) ?? D;
+		A(!!e && r(e));
 	}, [
-		S,
-		E,
-		j
-	]), i(() => {
-		A.current !== P.side && (A.current = P.side, x?.(P.side));
+		C,
+		D,
+		M
+	]), a(() => {
+		j.current !== F.side && (j.current = F.side, S?.(F.side));
 	});
-	let F = P.layerProps.ref, I = l((e) => {
-		F?.(e), M.current = e, typeof g == "function" ? g(e) : g && (g.current = e);
-	}, [F, g]), L = /* @__PURE__ */ p(a, {
-		...P.layerProps,
-		ref: I,
+	let I = F.layerProps.ref, L = u((e) => {
+		I?.(e), N.current = e, n(_, e);
+	}, [I, _]), R = /* @__PURE__ */ m(o, {
+		...F.layerProps,
+		ref: L,
 		transition: "none",
-		props: j ? { popover: "manual" } : { dir: O ? "rtl" : "ltr" },
-		children: /* @__PURE__ */ p(a, {
-			ref: C,
-			...T
+		props: M ? { popover: "manual" } : { dir: k ? "rtl" : "ltr" },
+		children: /* @__PURE__ */ m(o, {
+			ref: w,
+			...E
 		})
 	});
-	return /* @__PURE__ */ m(f, { children: [!S && /* @__PURE__ */ p(a, { ref: D }), j ? L : N && h(L, N)] });
+	return /* @__PURE__ */ h(p, { children: [!C && /* @__PURE__ */ m(o, { ref: O }), M ? R : P && g(R, P)] });
 }
-var _ = c(g);
-_.displayName = "Overlay";
+var v = l(_);
+v.displayName = "Overlay";
 //#endregion
-export { _ as default };
+export { v as default };

package/components/popover.cjs

@@ -1 +1 @@
-"use client";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:`Module`}});const e=require("../box.cjs"),t=require("../behavior.cjs"),n=require("../placement.cjs"),r=require("../layer.cjs"),i=require("./overlay.cjs");let a=require("react/jsx-runtime");function o(o){let{trigger:s,children:c,open:l,defaultOpen:u=!1,onOpenChange:d,label:f,labelledBy:p,side:m=`bottom`,align:h=`center`,offset:g=2,flip:_=!0,matchWidth:v=!1,autoFocus:y=!0,props:b,...x}=o,S=t.a(e=>{!y||e.contains(document.activeElement)||e.focus()}),{platform:C,isOpen:w,id:T,trigger:E,triggerElement:D,setPanel:O}=r.t({haspopup:`dialog`,idPrefix:`popover`,id:x.id,interaction:{component:`popover`,type:`openChange`},open:l,defaultOpen:u,onOpenChange:d,onOpened:S}),k=n.t({side:m,align:h,offset:g,flip:_,matchWidth:v,anchor:D}),A={"aria-label":f,"aria-labelledby":p},j=x;return C?(0,a.jsxs)(a.Fragment,{children:[s(E),(0,a.jsx)(e.default,{ref:O,component:`popover`,...j,variant:[j.variant,{topLayer:!0}],...k.layerProps,id:T,props:{popover:`auto`,role:`dialog`,...A,tabIndex:-1,...b},children:c})]}):(0,a.jsxs)(a.Fragment,{children:[s(E),w&&(0,a.jsx)(i.default,{contentRef:O,anchor:D,side:m,align:h,offset:g,flip:_,matchWidth:v,component:`popover`,...j,id:T,props:{role:`dialog`,...A,tabIndex:-1,...b},children:c})]})}var s=o;s.displayName=`Popover`,exports.default=s;
+"use client";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:`Module`}});const e=require("../react-shared.cjs"),t=require("../platform.cjs"),n=require("../box.cjs"),r=require("../behavior.cjs"),i=require("../placement.cjs"),a=require("../layer.cjs"),o=require("./overlay.cjs");let s=require("react"),c=require("react/jsx-runtime");function l(e,l){let{trigger:u,children:d,open:f,defaultOpen:p=!1,onOpenChange:m,label:h,labelledBy:g,side:_=`bottom`,align:v=`center`,offset:y=2,flip:b=!0,matchWidth:x=!1,autoFocus:S=!0,props:C,...w}=e,T=r.a(e=>{!S||e.contains(document.activeElement)||e.focus()}),{platform:E,isOpen:D,id:O,trigger:k,triggerElement:A,setPanel:j}=a.t({haspopup:`dialog`,idPrefix:`popover`,id:w.id,interaction:{component:`popover`,type:`openChange`},open:f,defaultOpen:p,onOpenChange:m,onOpened:T}),M=i.t({side:_,align:v,offset:y,flip:b,matchWidth:x,anchor:A}),N=(0,s.useCallback)(e=>{j(e),t.l(l,e)},[j,l]),P={"aria-label":h,"aria-labelledby":g},F=w;return E?(0,c.jsxs)(c.Fragment,{children:[u(k),(0,c.jsx)(n.default,{ref:N,component:`popover`,...F,variant:[F.variant,{topLayer:!0}],...M.layerProps,id:O,props:{popover:`auto`,role:`dialog`,...P,tabIndex:-1,...C},children:d})]}):(0,c.jsxs)(c.Fragment,{children:[u(k),D&&(0,c.jsx)(o.default,{contentRef:N,anchor:A,side:_,align:v,offset:y,flip:b,matchWidth:x,component:`popover`,...F,id:O,props:{role:`dialog`,...P,tabIndex:-1,...C},children:d})]})}var u=e.f(l,`Popover`);exports.default=u;

package/components/popover.d.ts

@@ -56,45 +56,5 @@ interface Props<TKey extends keyof ComponentsAndVariants> extends PopoverBoxProp
      */
     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;
+declare const Popover: <TKey extends keyof ComponentsAndVariants = "popover">(props: Props<TKey>) => React.ReactNode;
 export default Popover;

package/components/popover.mjs

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

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

package/components/radioGroup.mjs

@@ -1,88 +1,92 @@
 "use client";
-import { a as e } from "../behavior.mjs";
-import { t } from "../identity.mjs";
-import { a as n } from "../reporting.mjs";
-import r from "./flex.mjs";
-import { Span as i } from "./semantics.mjs";
-import a from "./radioButton.mjs";
-import { createContext as o, useContext as s, useMemo as c, useRef as l } from "react";
-import { jsx as u, jsxs as d } from "react/jsx-runtime";
+import { f as e } from "../react-shared.mjs";
+import { l as t } from "../platform.mjs";
+import { a as n } from "../behavior.mjs";
+import { t as r } from "../identity.mjs";
+import { a as i } from "../reporting.mjs";
+import a from "./flex.mjs";
+import { Span as o } from "./semantics.mjs";
+import s from "./radioButton.mjs";
+import { createContext as c, useCallback as l, useContext as u, useMemo as d, useRef as f } from "react";
+import { jsx as p, jsxs as m } from "react/jsx-runtime";
 //#region src/components/radioGroup.tsx
-var f = o(null);
-function p(e) {
+var h = c(null);
+function g(e) {
 	return [...e?.querySelectorAll("input[type=\"radio\"]") ?? []].filter((e) => !e.disabled);
 }
-function m(e) {
+function _(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, onValueChange: _, onChange: v, orientation: y = "vertical", children: b, props: x, ...S } = a, C = t("radiogroup"), w = l(null), T = l("click"), E = e((e, t) => {
-		_?.(e, t), v?.(e, t);
-	}), [D, O] = n({
-		value: h,
-		defaultValue: g,
-		onChange: E,
+function v(e, s) {
+	let { label: c, name: u, value: v, defaultValue: y, onValueChange: b, onChange: x, orientation: S = "vertical", children: C, props: w, ...T } = e, E = r("radiogroup"), D = f(null), O = l((e) => {
+		D.current = e, t(s, e);
+	}, [s]), k = f("click"), A = n((e, t) => {
+		b?.(e, t), x?.(e, t);
+	}), [j, M] = i({
+		value: v,
+		defaultValue: y,
+		onChange: A,
 		interaction: {
 			component: "radioGroup",
 			type: "valueChange"
 		}
-	}), k = e((e) => {
-		let t = m(e.key);
+	}), N = n((e) => {
+		let t = _(e.key);
 		if (t === 0 || e.defaultPrevented) return;
-		let n = p(w.current), r = n.indexOf(document.activeElement);
+		let n = g(D.current), r = n.indexOf(document.activeElement);
 		if (r === -1) return;
 		e.preventDefault();
 		let i = n[(r + t + n.length) % n.length];
-		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,
+		i !== n[r] && (k.current = "keyboard", i.focus(), i.click(), k.current = "click");
+	}), P = `${E}-label`, F = c != null, I = d(() => ({
+		name: u ?? E,
+		value: j,
+		select: (e, t) => M(e, {
+			reason: k.current,
 			event: t
 		})
 	}), [
-		C,
-		s,
-		D,
-		O
+		E,
+		u,
+		j,
+		M
 	]);
-	return /* @__PURE__ */ u(f.Provider, {
-		value: M,
-		children: /* @__PURE__ */ d(r, {
-			ref: w,
+	return /* @__PURE__ */ p(h.Provider, {
+		value: I,
+		children: /* @__PURE__ */ m(a, {
+			ref: O,
 			component: "radioGroup",
-			variant: { horizontal: y === "horizontal" },
-			...S,
+			variant: { horizontal: S === "horizontal" },
+			...T,
 			props: {
 				role: "radiogroup",
-				"aria-labelledby": j ? A : void 0,
-				...x,
-				onKeyDown: k
+				"aria-labelledby": F ? P : void 0,
+				...w,
+				onKeyDown: N
 			},
-			children: [j && /* @__PURE__ */ u(i, {
+			children: [F && /* @__PURE__ */ p(o, {
 				component: "radioGroup.label",
-				id: A,
-				children: o
-			}), b]
+				id: P,
+				children: c
+			}), C]
 		})
 	});
 }
-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,
+function y(e) {
+	let t = u(h), { value: r, ...i } = e, a = n((e) => t?.select(r, e));
+	return t ? /* @__PURE__ */ p(s, {
+		name: t.name,
 		value: r,
-		checked: n.value === r,
-		onChange: o,
+		checked: t.value === r,
+		onChange: a,
 		...i
-	}) : /* @__PURE__ */ u(a, {
+	}) : /* @__PURE__ */ p(s, {
 		value: r,
 		...i
 	});
 }
-g.displayName = "RadioGroup.Item";
-var _ = h;
-_.Item = g, _.displayName = "RadioGroup";
+y.displayName = "RadioGroup.Item";
+var b = e(v, "RadioGroup");
+b.Item = y, b.displayName = "RadioGroup";
 //#endregion
-export { _ as default };
+export { b as default };

package/components/slider.cjs

@@ -1 +1 @@
-"use client";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:`Module`}});const e=require("../platform.cjs"),t=require("../box.cjs"),n=require("../behavior.cjs"),r=require("../reporting.cjs");let i=require("react"),a=require("react/jsx-runtime");var o;(function(e){function t(e){let t=String(Math.abs(e));if(t.includes(`e`))return 12;let n=t.indexOf(`.`);return n===-1?0:t.length-n-1}e.decimals=t;function n(e,t){return Number(e.toFixed(Math.min(t,15)))}function r(e,t,n){return Math.min(Math.max(e,t),n)}e.clamp=r;function i(e,i){let{min:a,max:o,step:s}=i,c=r(e,a,o);return s>0?r(n(a+Math.round((c-a)/s)*s,t(s)+t(a)),a,o):c}e.snap=i;function a(e,t,n){return n<=t?0:(r(e,t,n)-t)*(100/(n-t))}e.percent=a;function o(e,t,n){return`${Math.round(a(e,t,n)*100)/100}%`}e.percentage=o;function s(e){return typeof e==`number`?[e]:[...e]}e.thumbs=s;function c(e,t){return typeof e==`number`?t[0]:[...t]}e.shaped=c;function l(e,t,n,a){let o=t>0?e[t-1]:a.min,s=t<e.length-1?e[t+1]:a.max,c=[...e];return c[t]=r(i(n,a),o,s),c}e.move=l;function u(e,t){return e.length===t.length&&e.every((e,n)=>e===t[n])}e.same=u;function d(e,t){let n=0,r=1/0;return e.forEach((e,i)=>{let a=Math.abs(e-t);a<=r&&(n=i,r=a)}),n}e.nearest=d;function f(e,t,n,r,i){let a=r===`vertical`?e.height===0?0:(e.bottom-n)/e.height:e.width===0?0:i?(e.right-t)/e.width:(t-e.left)/e.width;return Math.min(Math.max(a,0),1)}e.valueAt=f;function p(e,t=!1){if(e===`Home`)return{kind:`edge`,delta:-1};if(e===`End`)return{kind:`edge`,delta:1};if(e===`PageUp`)return{kind:`page`,delta:1};if(e===`PageDown`)return{kind:`page`,delta:-1};if(e===`ArrowUp`)return{kind:`step`,delta:1};if(e===`ArrowDown`)return{kind:`step`,delta:-1};if(e===`ArrowRight`)return{kind:`step`,delta:t?-1:1};if(e===`ArrowLeft`)return{kind:`step`,delta:t?1:-1}}e.moveFor=p;function m(e,t,n,r){if(t.kind===`edge`)return t.delta>0?n.max:n.min;let i=t.kind===`page`?r:n.step;return e+t.delta*i}e.moved=m})(o||={});var s=o,c=`data-index`;function l(e,t,n){return{min:e,max:t,step:n}}function u(e,t){return t?{insetBlockEnd:e}:{insetInlineStart:e}}function d(e,t,n){let r=e.length>1?Math.min(...e):t.min,i=Math.max(...e),a=s.percent(r,t.min,t.max),o=`${Math.round((s.percent(i,t.min,t.max)-a)*100)/100}%`;return n?{insetBlockEnd:`${Math.round(a*100)/100}%`,blockSize:o}:{insetInlineStart:`${Math.round(a*100)/100}%`,inlineSize:o}}function f(o){let{value:f,defaultValue:p,onValueChange:m,onValueCommit:h,min:g=0,max:_=100,step:v=1,largeStep:y=v*10,orientation:b=`horizontal`,disabled:x=!1,label:S,labelledBy:C,thumbLabels:w,format:T,name:E,props:D,...O}=o,k=(0,i.useRef)(null),A=(0,i.useRef)(null),j=(0,i.useRef)(null),M=(0,i.useRef)(!1),[N,P]=(0,i.useState)(!1),[F,I]=n.i({value:f,defaultValue:p??g,onChange:m}),L=l(g,_,v),R=b===`vertical`,z=s.thumbs(F),B=n.o(F),V=r.r(h,`slider`,`valueCommit`),H=n.a((e,t)=>{I(t=>s.same(s.thumbs(t),e)?t:s.shaped(t,e),t)}),U=t=>{let n=A.current;if(!n)return;let r=s.valueAt(n.getBoundingClientRect(),t.clientX,t.clientY,b,e.p(n));return g+r*(_-g)},W=e=>k.current?.querySelectorAll(`[role="slider"]`)[e],G=n.a(e=>{if(x||e.button!==0||e.defaultPrevented)return;let t=U(e);if(t===void 0)return;let n=s.thumbs(B.current),r=s.nearest(n,t);j.current=r,e.preventDefault(),e.currentTarget.setPointerCapture?.(e.pointerId),W(r)?.focus(),H(s.move(n,r,t,L),{reason:`pointer`,event:e})}),K=n.a(e=>{let t=j.current;if(t===null)return;let n=U(e);n!==void 0&&(P(!0),H(s.move(s.thumbs(B.current),t,n,L),{reason:`pointer`,event:e}))}),q=n.a(e=>{j.current!==null&&(j.current=null,P(!1),e.currentTarget.releasePointerCapture?.(e.pointerId),V(B.current,{reason:`pointer`,event:e}))}),J=n.a(t=>{if(x||t.defaultPrevented)return;let n=t.target?.closest(`[role="slider"]`),r=Number(n?.getAttribute(c)??-1);if(!n||r<0)return;let i=s.moveFor(t.key,e.p(n));if(!i)return;t.preventDefault(),M.current=!0,P(!0);let a=s.thumbs(B.current);H(s.move(a,r,s.moved(a[r],i,L,y),L),{reason:`keyboard`,event:t})}),Y=n.a(e=>{M.current&&(M.current=!1,P(!1),V(B.current,{reason:`keyboard`,event:e}))}),X=z.length>1;return(0,a.jsxs)(t.default,{ref:k,component:`slider`,...O,variant:[O.variant,{vertical:R,disabled:x}],props:{role:X?`group`:void 0,"aria-label":X?S:void 0,"aria-labelledby":X?C:void 0,...D,onPointerDown:G,onPointerMove:K,onPointerUp:q,onPointerCancel:q,onKeyDown:J,onKeyUp:Y},children:[(0,a.jsx)(t.default,{ref:A,component:`slider.track`,variant:{vertical:R},children:(0,a.jsx)(t.default,{component:`slider.fill`,variant:{vertical:R,tracking:N},style:d(z,L,R)})}),z.map((e,n)=>(0,a.jsx)(t.default,{component:`slider.thumb`,variant:{vertical:R,disabled:x,tracking:N},style:u(s.percentage(e,g,_),R),props:{role:`slider`,tabIndex:x?-1:0,"aria-valuemin":g,"aria-valuemax":_,"aria-valuenow":e,"aria-valuetext":T?.(e),"aria-orientation":b,"aria-label":w?.[n]??(X?void 0:S),"aria-labelledby":w?.[n]||X?void 0:C,"aria-disabled":x||void 0,[c]:n}},n)),E!==void 0&&z.map((e,t)=>(0,a.jsx)(`input`,{type:`hidden`,name:E,value:e,readOnly:!0},t))]})}var p=f;p.displayName=`Slider`,exports.default=p;
+"use client";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:`Module`}});const e=require("../react-shared.cjs"),t=require("../platform.cjs"),n=require("../box.cjs"),r=require("../behavior.cjs"),i=require("../reporting.cjs");let a=require("react"),o=require("react/jsx-runtime");var s;(function(e){function t(e){let t=String(Math.abs(e));if(t.includes(`e`))return 12;let n=t.indexOf(`.`);return n===-1?0:t.length-n-1}e.decimals=t;function n(e,t){return Number(e.toFixed(Math.min(t,15)))}function r(e,t,n){return Math.min(Math.max(e,t),n)}e.clamp=r;function i(e,i){let{min:a,max:o,step:s}=i,c=r(e,a,o);return s>0?r(n(a+Math.round((c-a)/s)*s,t(s)+t(a)),a,o):c}e.snap=i;function a(e,t,n){return n<=t?0:(r(e,t,n)-t)*(100/(n-t))}e.percent=a;function o(e,t,n){return`${Math.round(a(e,t,n)*100)/100}%`}e.percentage=o;function s(e){return typeof e==`number`?[e]:[...e]}e.thumbs=s;function c(e,t){return typeof e==`number`?t[0]:[...t]}e.shaped=c;function l(e,t,n,a){let o=t>0?e[t-1]:a.min,s=t<e.length-1?e[t+1]:a.max,c=[...e];return c[t]=r(i(n,a),o,s),c}e.move=l;function u(e,t){return e.length===t.length&&e.every((e,n)=>e===t[n])}e.same=u;function d(e,t){let n=0,r=1/0;return e.forEach((e,i)=>{let a=Math.abs(e-t);a<=r&&(n=i,r=a)}),n}e.nearest=d;function f(e,t,n,r,i){let a=r===`vertical`?e.height===0?0:(e.bottom-n)/e.height:e.width===0?0:i?(e.right-t)/e.width:(t-e.left)/e.width;return Math.min(Math.max(a,0),1)}e.valueAt=f;function p(e,t=!1){if(e===`Home`)return{kind:`edge`,delta:-1};if(e===`End`)return{kind:`edge`,delta:1};if(e===`PageUp`)return{kind:`page`,delta:1};if(e===`PageDown`)return{kind:`page`,delta:-1};if(e===`ArrowUp`)return{kind:`step`,delta:1};if(e===`ArrowDown`)return{kind:`step`,delta:-1};if(e===`ArrowRight`)return{kind:`step`,delta:t?-1:1};if(e===`ArrowLeft`)return{kind:`step`,delta:t?1:-1}}e.moveFor=p;function m(e,t,n,r){if(t.kind===`edge`)return t.delta>0?n.max:n.min;let i=t.kind===`page`?r:n.step;return e+t.delta*i}e.moved=m})(s||={});var c=s,l=`data-index`;function u(e,t,n){return{min:e,max:t,step:n}}function d(e,t){return t?{insetBlockEnd:e}:{insetInlineStart:e}}function f(e,t,n){let r=e.length>1?Math.min(...e):t.min,i=Math.max(...e),a=c.percent(r,t.min,t.max),o=`${Math.round((c.percent(i,t.min,t.max)-a)*100)/100}%`;return n?{insetBlockEnd:`${Math.round(a*100)/100}%`,blockSize:o}:{insetInlineStart:`${Math.round(a*100)/100}%`,inlineSize:o}}function p(e,s){let{value:p,defaultValue:m,onValueChange:h,onValueCommit:g,min:_=0,max:v=100,step:y=1,largeStep:b=y*10,orientation:x=`horizontal`,disabled:S=!1,label:C,labelledBy:w,thumbLabels:T,format:E,name:D,props:O,...k}=e,A=(0,a.useRef)(null),j=(0,a.useCallback)(e=>{A.current=e,t.l(s,e)},[s]),M=(0,a.useRef)(null),N=(0,a.useRef)(null),P=(0,a.useRef)(!1),[F,I]=(0,a.useState)(!1),[L,R]=r.i({value:p,defaultValue:m??_,onChange:h}),z=u(_,v,y),B=x===`vertical`,V=c.thumbs(L),H=r.o(L),U=i.r(g,`slider`,`valueCommit`),W=r.a((e,t)=>{R(t=>c.same(c.thumbs(t),e)?t:c.shaped(t,e),t)}),G=e=>{let n=M.current;if(!n)return;let r=c.valueAt(n.getBoundingClientRect(),e.clientX,e.clientY,x,t.m(n));return _+r*(v-_)},K=e=>A.current?.querySelectorAll(`[role="slider"]`)[e],q=r.a(e=>{if(S||e.button!==0||e.defaultPrevented)return;let t=G(e);if(t===void 0)return;let n=c.thumbs(H.current),r=c.nearest(n,t);N.current=r,e.preventDefault(),e.currentTarget.setPointerCapture?.(e.pointerId),K(r)?.focus(),W(c.move(n,r,t,z),{reason:`pointer`,event:e})}),J=r.a(e=>{let t=N.current;if(t===null)return;let n=G(e);n!==void 0&&(I(!0),W(c.move(c.thumbs(H.current),t,n,z),{reason:`pointer`,event:e}))}),Y=r.a(e=>{N.current!==null&&(N.current=null,I(!1),e.currentTarget.releasePointerCapture?.(e.pointerId),U(H.current,{reason:`pointer`,event:e}))}),X=r.a(e=>{if(S||e.defaultPrevented)return;let n=e.target?.closest(`[role="slider"]`),r=Number(n?.getAttribute(l)??-1);if(!n||r<0)return;let i=c.moveFor(e.key,t.m(n));if(!i)return;e.preventDefault(),P.current=!0,I(!0);let a=c.thumbs(H.current);W(c.move(a,r,c.moved(a[r],i,z,b),z),{reason:`keyboard`,event:e})}),Z=r.a(e=>{P.current&&(P.current=!1,I(!1),U(H.current,{reason:`keyboard`,event:e}))}),Q=V.length>1;return(0,o.jsxs)(n.default,{ref:j,component:`slider`,...k,variant:[k.variant,{vertical:B,disabled:S}],props:{role:Q?`group`:void 0,"aria-label":Q?C:void 0,"aria-labelledby":Q?w:void 0,...O,onPointerDown:q,onPointerMove:J,onPointerUp:Y,onPointerCancel:Y,onKeyDown:X,onKeyUp:Z},children:[(0,o.jsx)(n.default,{ref:M,component:`slider.track`,variant:{vertical:B},children:(0,o.jsx)(n.default,{component:`slider.fill`,variant:{vertical:B,tracking:F},style:f(V,z,B)})}),V.map((e,t)=>(0,o.jsx)(n.default,{component:`slider.thumb`,variant:{vertical:B,disabled:S,tracking:F},style:d(c.percentage(e,_,v),B),props:{role:`slider`,tabIndex:S?-1:0,"aria-valuemin":_,"aria-valuemax":v,"aria-valuenow":e,"aria-valuetext":E?.(e),"aria-orientation":x,"aria-label":T?.[t]??(Q?void 0:C),"aria-labelledby":T?.[t]||Q?void 0:w,"aria-disabled":S||void 0,[l]:t}},t)),D!==void 0&&V.map((e,t)=>(0,o.jsx)(`input`,{type:`hidden`,name:D,value:e,readOnly:!0},t))]})}var m=e.f(p,`Slider`);exports.default=m;

package/components/slider.d.ts

@@ -40,59 +40,5 @@ export interface SliderProps<TKey extends keyof ComponentsAndVariants = 'slider'
     /** What the value submits under. One hidden input per thumb, so a range posts two values of that name. */
     name?: string;
 }
-/**
- * A value chosen by dragging a thumb along a track.
- * Pattern: https://www.w3.org/WAI/ARIA/apg/patterns/slider/ and .../slider-multithumb/
- *
- * ```tsx
- * <Slider label="Volume" defaultValue={40} onValueChange={(value) => setVolume(value)} />
- * <Slider label="Price" defaultValue={[20, 80]} thumbLabels={['Lowest', 'Highest']} />
- * ```
- *
- * **A number in is a number out.** `defaultValue={40}` makes a one-thumb slider whose `onValueChange`
- * hands back a `number`; `defaultValue={[20, 80]}` makes a range whose handler takes a `number[]`. The
- * number of thumbs is the value's own shape, so there is no second prop saying which kind this is.
- *
- * **This is not `<input type="range">`, and that is the one place the platform loses.** A range input
- * cannot hold two thumbs, and its track and thumb are vendor pseudo-elements (`::-webkit-slider-thumb`)
- * that no typed prop can reach — so a styled one is a rewrite of the parts, at which point the native
- * element is only the keyboard. `name` still submits: a hidden input per thumb, so a form posts the
- * value whether or not JavaScript ran the drag.
- *
- * **The position is an inline style, deliberately.** Everything a slider paints is a shared class except
- * where its thumbs are — that is a per-frame value, and a class for it would be a rule per frame of a
- * drag, never freed. It is the exception `useAnchorPosition`'s anchor name and the travelling tab
- * indicator already take, and the reason a `ProgressRing` can round its fraction into a class where this
- * cannot: nobody drags a ring.
- *
- * **It mirrors for free.** The fill and the thumbs are placed with `inset-inline-start`, so a
- * right-to-left page draws the minimum on the right with no second stylesheet. The half that is not free
- * is the keyboard, which is why the sideways arrows swap and Up and Down never do.
- *
- * **A press travels; a nudge does not.** A press on the track is the one move the eye has to follow, so
- * the thumb animates the whole way. Every other move — a drag, an arrow key, a held arrow — is the
- * `tracking` variant instead: 60ms `ease-out` on both the thumb and the fill, which must both carry it
- * or they come apart (#144). Short rather than *off*, because off is exact and steps — a 1-in-100 slider
- * moves 3.2px at a time on a 320px track. **Eased out rather than linear or eased**: a repeat restarts
- * the transition every 33ms, so only its first half is ever seen, and on this curve that half is the
- * straight part — it glides while the key is held and still decelerates on the last transition, the one
- * allowed to finish. Measured against linear, which rode **1.4 steps** behind the value and stopped at
- * full speed, this rides 0.9 behind and lands at 0.6 of cruising (#146).
- *
- * @pattern https://www.w3.org/WAI/ARIA/apg/patterns/slider/
- * @a11y Each thumb is a `role="slider"` carrying `aria-valuemin`, `aria-valuemax`, `aria-valuenow` and
- * `aria-orientation`; `format` writes `aria-valuetext` for a value a bare number does not read as.
- * @a11y A thumb has to be named, so `label` names the one on a single slider — and on a range it names
- * the `role="group"` around the thumbs, where `thumbLabels` names them one at a time.
- * @a11y `disabled` is `aria-disabled` rather than the attribute: a slider a reader cannot reach is a
- * value they cannot read, and a div takes no `disabled` anyway.
- * @keyboard Tab — Every thumb is its own tab stop, so a range is two of them.
- * @keyboard Right / Up — One step towards the maximum. In a right-to-left page Left is the increase, and
- * Up never changes: the block axis has no reading order.
- * @keyboard Left / Down — One step towards the minimum.
- * @keyboard PageUp / PageDown — `largeStep`, ten steps unless it says otherwise.
- * @keyboard Home / End — The minimum and the maximum themselves, on or off the step grid.
- */
-declare function SliderImpl<TKey extends keyof ComponentsAndVariants = 'slider', TValue extends SliderValue = number>(props: SliderProps<TKey, TValue>): import("react").JSX.Element;
-declare const Slider: typeof SliderImpl;
+declare const Slider: <TKey extends keyof ComponentsAndVariants = "slider", TValue extends SliderValue = number>(props: SliderProps<TKey, TValue>) => React.ReactNode;
 export default Slider;