@box-kite/react 0.0.1 → 2.0.0

package/components/slider.mjs

@@ -0,0 +1,250 @@
+"use client";
+import { u as e } from "../platform.mjs";
+import t from "../box.mjs";
+import { a as n, i as r, o as i } from "../behavior.mjs";
+import { useRef as a, useState as o } from "react";
+import { jsx as s, jsxs as c } from "react/jsx-runtime";
+//#region src/utils/slider/sliderUtils.ts
+var l;
+(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 = Infinity;
+		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;
+})(l ||= {});
+var u = l, d = "data-index";
+function f(e, t, n) {
+	return {
+		min: e,
+		max: t,
+		step: n
+	};
+}
+function p(e, t) {
+	return t ? { insetBlockEnd: e } : { insetInlineStart: e };
+}
+function m(e, t, n) {
+	let r = e.length > 1 ? Math.min(...e) : t.min, i = Math.max(...e), a = u.percent(r, t.min, t.max), o = `${Math.round((u.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 h(l) {
+	let { value: h, defaultValue: g, onValueChange: _, onValueCommit: v, min: y = 0, max: b = 100, step: x = 1, largeStep: S = x * 10, orientation: C = "horizontal", disabled: w = !1, label: T, labelledBy: E, thumbLabels: D, format: O, name: k, props: A, ...j } = l, M = a(null), N = a(null), P = a(null), F = a(!1), [I, L] = o(!1), [R, z] = r({
+		value: h,
+		defaultValue: g ?? y,
+		onChange: _
+	}), B = f(y, b, x), V = C === "vertical", H = u.thumbs(R), U = i(R), W = n(v), G = n((e, t) => {
+		z((t) => u.same(u.thumbs(t), e) ? t : u.shaped(t, e), t);
+	}), K = (t) => {
+		let n = N.current;
+		if (!n) return;
+		let r = u.valueAt(n.getBoundingClientRect(), t.clientX, t.clientY, C, e(n));
+		return y + r * (b - y);
+	}, q = (e) => M.current?.querySelectorAll("[role=\"slider\"]")[e], J = n((e) => {
+		if (w || e.button !== 0 || e.defaultPrevented) return;
+		let t = K(e);
+		if (t === void 0) return;
+		let n = u.thumbs(U.current), r = u.nearest(n, t);
+		P.current = r, e.preventDefault(), e.currentTarget.setPointerCapture?.(e.pointerId), q(r)?.focus(), G(u.move(n, r, t, B), {
+			reason: "pointer",
+			event: e
+		});
+	}), Y = n((e) => {
+		let t = P.current;
+		if (t === null) return;
+		let n = K(e);
+		n !== void 0 && (L(!0), G(u.move(u.thumbs(U.current), t, n, B), {
+			reason: "pointer",
+			event: e
+		}));
+	}), X = n((e) => {
+		P.current !== null && (P.current = null, L(!1), e.currentTarget.releasePointerCapture?.(e.pointerId), W(U.current, {
+			reason: "pointer",
+			event: e
+		}));
+	}), Z = n((t) => {
+		if (w || t.defaultPrevented) return;
+		let n = t.target?.closest("[role=\"slider\"]"), r = Number(n?.getAttribute(d) ?? -1);
+		if (!n || r < 0) return;
+		let i = u.moveFor(t.key, e(n));
+		if (!i) return;
+		t.preventDefault(), F.current = !0, L(!0);
+		let a = u.thumbs(U.current);
+		G(u.move(a, r, u.moved(a[r], i, B, S), B), {
+			reason: "keyboard",
+			event: t
+		});
+	}), Q = n((e) => {
+		F.current && (F.current = !1, L(!1), W(U.current, {
+			reason: "keyboard",
+			event: e
+		}));
+	}), $ = H.length > 1;
+	return /* @__PURE__ */ c(t, {
+		ref: M,
+		component: "slider",
+		...j,
+		variant: [j.variant, {
+			vertical: V,
+			disabled: w
+		}],
+		props: {
+			role: $ ? "group" : void 0,
+			"aria-label": $ ? T : void 0,
+			"aria-labelledby": $ ? E : void 0,
+			...A,
+			onPointerDown: J,
+			onPointerMove: Y,
+			onPointerUp: X,
+			onPointerCancel: X,
+			onKeyDown: Z,
+			onKeyUp: Q
+		},
+		children: [
+			/* @__PURE__ */ s(t, {
+				ref: N,
+				component: "slider.track",
+				variant: { vertical: V },
+				children: /* @__PURE__ */ s(t, {
+					component: "slider.fill",
+					variant: {
+						vertical: V,
+						tracking: I
+					},
+					style: m(H, B, V)
+				})
+			}),
+			H.map((e, n) => /* @__PURE__ */ s(t, {
+				component: "slider.thumb",
+				variant: {
+					vertical: V,
+					disabled: w,
+					tracking: I
+				},
+				style: p(u.percentage(e, y, b), V),
+				props: {
+					role: "slider",
+					tabIndex: w ? -1 : 0,
+					"aria-valuemin": y,
+					"aria-valuemax": b,
+					"aria-valuenow": e,
+					"aria-valuetext": O?.(e),
+					"aria-orientation": C,
+					"aria-label": D?.[n] ?? ($ ? void 0 : T),
+					"aria-labelledby": D?.[n] || $ ? void 0 : E,
+					"aria-disabled": w || void 0,
+					[d]: n
+				}
+			}, n)),
+			k !== void 0 && H.map((e, t) => /* @__PURE__ */ s("input", {
+				type: "hidden",
+				name: k,
+				value: e,
+				readOnly: !0
+			}, t))
+		]
+	});
+}
+var g = h;
+g.displayName = "Slider";
+//#endregion
+export { g as default };

package/components/svg.cjs

@@ -0,0 +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,t){let{props:n,...r}=e,i=r,a;for(let e of t)e in i&&((a??={})[e]=i[e],delete i[e]);return{styleProps:i,tagProps:a?{...n,...a}:n}}function o(e,o=[],s){let c=o,l=(0,n.forwardRef)((t,n)=>{let{styleProps:o,tagProps:s}=a(t,c);return(0,r.jsx)(i.default,{tag:e,ref:n,component:e,...o,props:s})});return l.displayName=s??t.a.capitalize(e),t.c(l),l}var s=`http://www.w3.org/2000/svg`,c=[`viewBox`,`preserveAspectRatio`,`width`,`height`];function l(e,n){let{label:o,...l}=e,{styleProps:u,tagProps:d}=a(l,c);return(0,r.jsx)(i.default,{tag:`svg`,ref:n,component:`svg`,...u,props:{xmlns:s,...t.o(o,d),...d}})}var u=t.c((0,n.forwardRef)(l));u.displayName=`Svg`;var d=o(`g`,[`transform`]),f=o(`defs`),p=o(`path`,[`d`,`transform`,`pathLength`]),m=o(`circle`,[`transform`,`pathLength`]),h=o(`ellipse`,[`transform`,`pathLength`]),g=o(`rect`,[`width`,`height`,`transform`,`pathLength`]),_=o(`line`,[`x1`,`y1`,`x2`,`y2`,`transform`,`pathLength`]),v=o(`polyline`,[`points`,`transform`,`pathLength`]),y=o(`polygon`,[`points`,`transform`,`pathLength`]),b=o(`text`,[`x`,`y`,`dx`,`dy`,`textLength`,`lengthAdjust`,`transform`],`SvgText`),x=o(`tspan`,[`x`,`y`,`dx`,`dy`,`textLength`,`lengthAdjust`],`TSpan`),S=o(`linearGradient`,[`x1`,`y1`,`x2`,`y2`,`gradientUnits`,`gradientTransform`,`spreadMethod`]),C=o(`radialGradient`,[`cx`,`cy`,`r`,`fx`,`fy`,`gradientUnits`,`gradientTransform`,`spreadMethod`]),w=o(`stop`,[`offset`,`stopColor`,`stopOpacity`]),T=o(`clipPath`,[`clipPathUnits`,`transform`]),E=o(`mask`,[`maskUnits`,`maskContentUnits`,`x`,`y`,`width`,`height`]),D=o(`use`,[`href`,`width`,`height`,`transform`]),O=o(`symbol`,[`viewBox`,`preserveAspectRatio`,`x`,`y`,`width`,`height`],`SvgSymbol`),k=o(`marker`,[`markerWidth`,`markerHeight`,`refX`,`refY`,`orient`,`markerUnits`,`viewBox`]);exports.Circle=m,exports.ClipPath=T,exports.Defs=f,exports.Ellipse=h,exports.G=d,exports.Line=_,exports.LinearGradient=S,exports.Marker=k,exports.Mask=E,exports.Path=p,exports.Polygon=y,exports.Polyline=v,exports.RadialGradient=C,exports.Rect=g,exports.Stop=w,exports.Svg=u,exports.SvgSymbol=O,exports.SvgText=b,exports.TSpan=x,exports.Use=D;

package/components/svg.d.ts

@@ -0,0 +1,65 @@
+import { RefAttributes } from 'react';
+import { BoxProps } from '../box';
+import { ExtractElementFromTag } from '../react/reactTypes';
+import { ComponentsAndVariants } from '@box-kite/core/types';
+/**
+ * The SVG elements as components, so a drawing is written the way the rest of this library is —
+ * `<Circle cx={28} r={12} />`, never `<Box tag="circle">`. The difficulty is that SVG attribute names and
+ * Box prop names collide silently (a `<path>`'s `d` is Box's flex-direction; Chakra once turned `d` into
+ * `display` this way), so each component names the attributes it owns and lifts them off the style props —
+ * per element, because whether a name is CSS or an attribute is a question about the element.
+ */
+/** A name the element accepts as an attribute. */
+type Attribute<TTag extends keyof React.JSX.IntrinsicElements> = keyof React.JSX.IntrinsicElements[TTag];
+/** Box's props for the tag, minus the names this element claims as attributes, plus those attributes. */
+type SvgElementProps<TTag extends keyof React.JSX.IntrinsicElements, TAttribute extends Attribute<TTag>, TKey extends keyof ComponentsAndVariants> = Omit<BoxProps<TTag, TKey>, 'tag' | TAttribute> & Pick<React.JSX.IntrinsicElements[TTag], TAttribute>;
+type SvgElementType<TTag extends keyof React.JSX.IntrinsicElements, TAttribute extends Attribute<TTag>> = <TKey extends keyof ComponentsAndVariants = never>(props: SvgElementProps<TTag, TAttribute, TKey> & RefAttributes<ExtractElementFromTag<TTag>>) => React.ReactNode;
+interface SvgOwnProps {
+    /** The coordinate system every number inside the drawing is measured in — `"0 0 24 24"`. */
+    viewBox?: string;
+    /** How the drawing is fitted when the box it is given is a different shape. */
+    preserveAspectRatio?: string;
+    /** The `width` attribute: a number in user units, or any CSS length — `"100%"`, `"12rem"`. */
+    width?: string | number;
+    /** The `height` attribute: a number in user units, or any CSS length. */
+    height?: string | number;
+    /** Names the drawing — `role="img"` and this text. Without one the `<svg>` is `aria-hidden`. */
+    label?: string;
+}
+/** The `width`/`height` here are the SVG attributes, not the ÷4 layout props they are on a `<div>`. */
+type Props<TKey extends keyof ComponentsAndVariants = never> = Omit<BoxProps<'svg', TKey>, 'tag' | 'width' | 'height'> & SvgOwnProps;
+/** The root `<svg>`: the coordinate system, the size, and whether a screen reader is told about it. */
+export declare const Svg: (<TKey extends keyof ComponentsAndVariants = never>(props: Props<TKey> & RefAttributes<SVGSVGElement>) => React.ReactNode) & {
+    displayName?: string;
+};
+export type SvgProps = Props & RefAttributes<SVGSVGElement>;
+/**
+ * The rest of the elements, each with the attributes it owns — everything CSS styles on it stays a Box
+ * prop. `transform` is an attribute everywhere, because SVG's version carries its own centre of rotation
+ * (`rotate(-90 48 48)`) and the CSS `rotate` prop cannot say that without a `transformOrigin` we lack.
+ */
+export declare const G: SvgElementType<"g", "transform">;
+export declare const Defs: SvgElementType<"defs", keyof import('react').SVGProps<SVGDefsElement>>;
+export declare const Path: SvgElementType<"path", "transform" | "d" | "pathLength">;
+export declare const Circle: SvgElementType<"circle", "transform" | "pathLength">;
+export declare const Ellipse: SvgElementType<"ellipse", "transform" | "pathLength">;
+export declare const Rect: SvgElementType<"rect", "width" | "height" | "transform" | "pathLength">;
+export declare const Line: SvgElementType<"line", "transform" | "pathLength" | "x1" | "x2" | "y1" | "y2">;
+export declare const Polyline: SvgElementType<"polyline", "transform" | "pathLength" | "points">;
+export declare const Polygon: SvgElementType<"polygon", "transform" | "pathLength" | "points">;
+/**
+ * `SvgText`, not `Text`, which a future HTML text component would want. Its `x`/`y` are attributes: the
+ * CSS geometry properties do not apply to `<text>`, so the Box props of that name would move nothing.
+ */
+export declare const SvgText: SvgElementType<"text", "transform" | "x" | "y" | "dx" | "dy" | "lengthAdjust" | "textLength">;
+export declare const TSpan: SvgElementType<"tspan", "x" | "y" | "dx" | "dy" | "lengthAdjust" | "textLength">;
+export declare const LinearGradient: SvgElementType<"linearGradient", "gradientTransform" | "gradientUnits" | "spreadMethod" | "x1" | "x2" | "y1" | "y2">;
+export declare const RadialGradient: SvgElementType<"radialGradient", "cx" | "cy" | "r" | "fx" | "fy" | "gradientTransform" | "gradientUnits" | "spreadMethod">;
+export declare const Stop: SvgElementType<"stop", "stopColor" | "stopOpacity" | "offset">;
+export declare const ClipPath: SvgElementType<"clipPath", "transform" | "clipPathUnits">;
+export declare const Mask: SvgElementType<"mask", "width" | "height" | "x" | "y" | "maskContentUnits" | "maskUnits">;
+export declare const Use: SvgElementType<"use", "width" | "height" | "transform" | "href">;
+/** `SvgSymbol`, not `Symbol` — the global of that name is not something a module should shadow. */
+export declare const SvgSymbol: SvgElementType<"symbol", "width" | "height" | "x" | "y" | "preserveAspectRatio" | "viewBox">;
+export declare const Marker: SvgElementType<"marker", "markerHeight" | "markerUnits" | "markerWidth" | "orient" | "refX" | "refY" | "viewBox">;
+export {};

package/components/svg.mjs

@@ -0,0 +1,141 @@
+import { a as e, c as t, o as n } from "../react-shared.mjs";
+import { forwardRef as r } from "react";
+import { jsx as i } from "react/jsx-runtime";
+import a from "@box-kite/react";
+//#region src/components/svg.tsx
+function o(e, t) {
+	let { props: n, ...r } = e, i = r, a;
+	for (let e of t) e in i && ((a ??= {})[e] = i[e], delete i[e]);
+	return {
+		styleProps: i,
+		tagProps: a ? {
+			...n,
+			...a
+		} : n
+	};
+}
+function s(n, s = [], c) {
+	let l = s, u = r((e, t) => {
+		let { styleProps: r, tagProps: s } = o(e, l);
+		return /* @__PURE__ */ i(a, {
+			tag: n,
+			ref: t,
+			component: n,
+			...r,
+			props: s
+		});
+	});
+	return u.displayName = c ?? e.capitalize(n), t(u), u;
+}
+var c = "http://www.w3.org/2000/svg", l = [
+	"viewBox",
+	"preserveAspectRatio",
+	"width",
+	"height"
+];
+function u(e, t) {
+	let { label: r, ...s } = e, { styleProps: u, tagProps: d } = o(s, l);
+	return /* @__PURE__ */ i(a, {
+		tag: "svg",
+		ref: t,
+		component: "svg",
+		...u,
+		props: {
+			xmlns: c,
+			...n(r, d),
+			...d
+		}
+	});
+}
+var d = /* @__PURE__ */ t(r(u));
+d.displayName = "Svg";
+var f = /* @__PURE__ */ s("g", ["transform"]), p = /* @__PURE__ */ s("defs"), m = /* @__PURE__ */ s("path", [
+	"d",
+	"transform",
+	"pathLength"
+]), h = /* @__PURE__ */ s("circle", ["transform", "pathLength"]), g = /* @__PURE__ */ s("ellipse", ["transform", "pathLength"]), _ = /* @__PURE__ */ s("rect", [
+	"width",
+	"height",
+	"transform",
+	"pathLength"
+]), v = /* @__PURE__ */ s("line", [
+	"x1",
+	"y1",
+	"x2",
+	"y2",
+	"transform",
+	"pathLength"
+]), y = /* @__PURE__ */ s("polyline", [
+	"points",
+	"transform",
+	"pathLength"
+]), b = /* @__PURE__ */ s("polygon", [
+	"points",
+	"transform",
+	"pathLength"
+]), x = /* @__PURE__ */ s("text", [
+	"x",
+	"y",
+	"dx",
+	"dy",
+	"textLength",
+	"lengthAdjust",
+	"transform"
+], "SvgText"), S = /* @__PURE__ */ s("tspan", [
+	"x",
+	"y",
+	"dx",
+	"dy",
+	"textLength",
+	"lengthAdjust"
+], "TSpan"), C = /* @__PURE__ */ s("linearGradient", [
+	"x1",
+	"y1",
+	"x2",
+	"y2",
+	"gradientUnits",
+	"gradientTransform",
+	"spreadMethod"
+]), w = /* @__PURE__ */ s("radialGradient", [
+	"cx",
+	"cy",
+	"r",
+	"fx",
+	"fy",
+	"gradientUnits",
+	"gradientTransform",
+	"spreadMethod"
+]), T = /* @__PURE__ */ s("stop", [
+	"offset",
+	"stopColor",
+	"stopOpacity"
+]), E = /* @__PURE__ */ s("clipPath", ["clipPathUnits", "transform"]), D = /* @__PURE__ */ s("mask", [
+	"maskUnits",
+	"maskContentUnits",
+	"x",
+	"y",
+	"width",
+	"height"
+]), O = /* @__PURE__ */ s("use", [
+	"href",
+	"width",
+	"height",
+	"transform"
+]), k = /* @__PURE__ */ s("symbol", [
+	"viewBox",
+	"preserveAspectRatio",
+	"x",
+	"y",
+	"width",
+	"height"
+], "SvgSymbol"), A = /* @__PURE__ */ s("marker", [
+	"markerWidth",
+	"markerHeight",
+	"refX",
+	"refY",
+	"orient",
+	"markerUnits",
+	"viewBox"
+]);
+//#endregion
+export { h as Circle, E as ClipPath, p as Defs, g as Ellipse, f as G, v as Line, C as LinearGradient, A as Marker, D as Mask, m as Path, b as Polygon, y as Polyline, w as RadialGradient, _ as Rect, T as Stop, d as Svg, k as SvgSymbol, x as SvgText, S as TSpan, O as Use };

package/components/switch.cjs

@@ -0,0 +1 @@
+"use client";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:`Module`}});const e=require("../behavior.cjs"),t=require("./checkbox.cjs");let n=require("react"),r=require("react/jsx-runtime");function i(n,i){let{props:a,...o}=n,s=e.a(a?.onKeyDown),c=e.a(e=>{s(e),!(e.key!==`Enter`||e.defaultPrevented)&&(e.preventDefault(),e.currentTarget.click())});return(0,r.jsx)(t.default,{ref:i,component:`switch`,...o,props:{...a,role:`switch`,onKeyDown:c}})}var a=(0,n.forwardRef)(i);a.displayName=`Switch`,exports.default=a;

package/components/switch.d.ts

@@ -0,0 +1,29 @@
+import { RefAttributes } from 'react';
+import { BoxProps, BoxTagProps } from '../box';
+import { OmitTagProps } from '../react/boxProps';
+import { ComponentsAndVariants } from '@box-kite/core/types';
+type SwitchProps<TKey extends keyof ComponentsAndVariants> = Omit<BoxProps<'input', TKey>, 'tag' | 'props' | 'indeterminate'>;
+interface Props<TKey extends keyof ComponentsAndVariants> extends SwitchProps<TKey> {
+    /** What the switch submits under. Needed for a form; a controlled switch can do without one. */
+    name?: string;
+    /** Attributes for the `<input>` itself. `type` is the component's, and `role` is already `switch`. */
+    props?: OmitTagProps<BoxTagProps<'input'>, 'type'>;
+    /** Fires on every keystroke or click. On a checkbox this is the same moment as `onChange`. */
+    onInput?: (e: React.ChangeEvent<HTMLInputElement>) => void;
+    /** Fires when the switch is toggled. `e.target.checked` is the new state. */
+    onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void;
+    /** The value the form submits when it is on. Defaults to `"on"`, as HTML does. */
+    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 toggleable. Unlike `disabled` it stays in the tab order and submits. */
+    readOnly?: boolean;
+    /** The state it starts in when the switch is uncontrolled. Pass `checked` instead to control it. */
+    defaultChecked?: boolean;
+    /** The text beside the switch, rendered inside a label that wraps the input. */
+    label?: React.ReactNode;
+    /** Styles for the wrapping `<label>`: the row's layout, not the track's own appearance. */
+    labelProps?: BoxProps<'label'>;
+}
+declare const _default: <TKey extends keyof ComponentsAndVariants = "switch">(props: Props<TKey> & RefAttributes<HTMLInputElement>) => React.ReactNode;
+export default _default;

package/components/switch.mjs

@@ -0,0 +1,25 @@
+"use client";
+import { a as e } from "../behavior.mjs";
+import t from "./checkbox.mjs";
+import { forwardRef as n } from "react";
+import { jsx as r } from "react/jsx-runtime";
+//#region src/components/switch.tsx
+function i(n, i) {
+	let { props: a, ...o } = n, s = e(a?.onKeyDown), c = e((e) => {
+		s(e), !(e.key !== "Enter" || e.defaultPrevented) && (e.preventDefault(), e.currentTarget.click());
+	});
+	return /* @__PURE__ */ r(t, {
+		ref: i,
+		component: "switch",
+		...o,
+		props: {
+			...a,
+			role: "switch",
+			onKeyDown: c
+		}
+	});
+}
+var a = n(i);
+a.displayName = "Switch";
+//#endregion
+export { a as default };

package/components/tabs.cjs

@@ -0,0 +1 @@
+"use client";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:`Module`}});const e=require("../platform.cjs"),t=require("../effects.cjs"),n=require("../box.cjs"),r=require("../behavior.cjs"),i=require("../identity.cjs"),a=require("../motion.cjs");let o=require("react"),s=require("react/jsx-runtime");var c;(function(e){let t=e.TAB_SELECTOR=`[role="tab"]`,n=e.LIST_SELECTOR=`[role="tablist"]`,r=e.PANEL_SELECTOR=`[role="tabpanel"]`;function i(e,t){return t instanceof Element&&t.closest(n)===e}e.owns=i;function a(e){return e?[...e.querySelectorAll(t)].filter(t=>i(e,t)):[]}e.tabs=a;function o(e){return e.hasAttribute(`disabled`)||e.getAttribute(`aria-disabled`)===`true`}e.isDisabled=o;function s(e){return e.dataset.value}e.valueOf=s;function c(e){return e.replace(/[^A-Za-z0-9-]/g,e=>`_${e.codePointAt(0).toString(36)}_`)}e.token=c;function l(e,t,n,r){let i=e.length;if(i===0)return;let a=t<0||t>=i?n>0?-1:i:t;for(let t=0;t<i;t++){if(a+=n,a<0||a>=i){if(!r)return;a=(a%i+i)%i}if(!o(e[a]))return e[a]}}e.step=l;function u(e,t){return l(e,t===1?-1:e.length,t,!1)}e.edge=u;function d(e,t){return t instanceof HTMLElement?e.indexOf(t):-1}e.indexOf=d;function f(e,t,n=!1){if(e===`Home`)return{kind:`edge`,delta:1};if(e===`End`)return{kind:`edge`,delta:-1};let r=t===`vertical`,i=r?`ArrowDown`:n?`ArrowLeft`:`ArrowRight`,a=r?`ArrowUp`:n?`ArrowRight`:`ArrowLeft`;if(e===i)return{kind:`step`,delta:1};if(e===a)return{kind:`step`,delta:-1}}e.moveFor=f;function p(e,t,n,r){return n.kind===`edge`?u(e,n.delta):l(e,t,n.delta,r)}e.target=p;function m(e){if(e)return a(e).find(e=>e.getAttribute(`aria-selected`)===`true`)}e.selectedTab=m;function h(e,t,n){let r=e.getBoundingClientRect(),i=t.getBoundingClientRect();return n===`vertical`?{start:i.top-r.top+e.scrollTop,size:i.height}:{start:i.left-r.left+e.scrollLeft,size:i.width}}e.bounds=h;function g(e,t){return!e||!t?e===t:e.start===t.start&&e.size===t.size}e.sameBounds=g;function _(e){if(e)return[...e.querySelectorAll(r)].find(e=>!e.hasAttribute(`hidden`))}e.visiblePanel=_})(c||={});var l=c,u=(0,o.createContext)(null);function d(e){let t=(0,o.useContext)(u);if(!t)throw Error(`<${e}> has to be rendered inside a <Tabs>.`);return t}function f(e){let{children:a,value:c,defaultValue:d,onValueChange:f,orientation:p=`horizontal`,activation:m=`automatic`,loop:h=!0,keepMounted:g=!1,indicator:_=`static`,props:v,...y}=e,b=i.t(`tabs`),[x,S]=r.i({value:c,defaultValue:d,onChange:f}),[C,w]=(0,o.useState)(),[T,E]=(0,o.useState)(!1);t.n(()=>{x!==void 0&&w(x)},[x]);let D=(0,o.useMemo)(()=>({identifier:b,value:x,orientation:p,activation:m,loop:h,keepMounted:g,indicator:_,indicatorLive:T,setIndicatorLive:E,tabStop:C??x,setTabStop:w,select:S,tabId:e=>`${b}-tab-${l.token(e)}`,panelId:e=>`${b}-panel-${l.token(e)}`}),[b,x,p,m,h,g,_,T,C,S]);return(0,s.jsx)(u.Provider,{value:D,children:(0,s.jsx)(n.default,{component:`tabs`,...y,variant:[y.variant,{vertical:p===`vertical`}],props:v,children:a})})}function p(i){let{children:a,label:c,labelledBy:u,props:f,...p}=i,{value:m,orientation:h,activation:g,loop:_,indicator:v,tabStop:y,setTabStop:b,setIndicatorLive:x,select:S}=d(`Tabs.List`),C=(0,o.useRef)(null),[w,T]=(0,o.useState)(),E=v===`sliding`;t.n(()=>{let e=C.current;if(!E||!e)return;let t=()=>{let t=l.selectedTab(e),n=t&&l.bounds(e,t,h);T(e=>l.sameBounds(e,n)?e:n)};if(t(),typeof ResizeObserver>`u`)return;let n=new ResizeObserver(t);n.observe(e);for(let t of l.tabs(e))n.observe(t);return()=>n.disconnect()},[E,h,m]);let D=E&&w&&w.size>0?w:void 0;t.n(()=>{x(D!==void 0)},[D,x]),t.n(()=>{if(y!==void 0)return;let e=l.edge(l.tabs(C.current),1),t=e&&l.valueOf(e);t!==void 0&&b(t)},[y,b]);let O=r.a(t=>{let n=C.current;if(!n||t.defaultPrevented||!l.owns(n,t.target))return;let r=l.tabs(n),i=l.indexOf(r,t.target);if(i===-1)return;if(g===`manual`&&(t.key===`Enter`||t.key===` `)){let e=l.valueOf(r[i]);if(e===void 0)return;t.preventDefault(),S(e,{reason:`keyboard`,event:t});return}let a=l.moveFor(t.key,h,e.u(n));if(!a)return;let o=l.target(r,i,a,_);if(!o)return;t.preventDefault(),o.focus();let s=l.valueOf(o);g===`automatic`&&s!==void 0&&S(s,{reason:`keyboard`,event:t})});return(0,s.jsxs)(n.default,{ref:C,component:`tabs.list`,...p,variant:[p.variant,{vertical:h===`vertical`,sliding:E}],props:{role:`tablist`,"aria-label":c,"aria-labelledby":u,"aria-orientation":h,...f,onKeyDown:O},children:[a,D&&(0,s.jsx)(n.default,{tag:`span`,component:`tabs.indicator`,variant:{vertical:h===`vertical`},style:h===`vertical`?{top:`${D.start}px`,height:`${D.size}px`}:{left:`${D.start}px`,width:`${D.size}px`},props:{"aria-hidden":!0}})]})}p.displayName=`Tabs.List`;function m(e){let{value:t,children:i,disabled:a,props:o,...c}=e,{value:l,orientation:u,keepMounted:f,indicatorLive:p,tabStop:m,setTabStop:h,select:g,tabId:_,panelId:v}=d(`Tabs.Tab`),y=l===t,b=r.a(e=>g(t,{reason:`click`,event:e})),x=r.a(()=>h(t));return(0,s.jsx)(n.default,{tag:`button`,component:`tabs.tab`,...c,variant:[c.variant,{vertical:u===`vertical`,underline:!p}],disabled:a,id:_(t),props:{type:`button`,role:`tab`,"aria-selected":y,"aria-controls":y||f?v(t):void 0,tabIndex:m===t?0:-1,"data-value":t,...o,onClick:b,onFocus:x},children:i})}m.displayName=`Tabs.Tab`;function h(e){let{children:i,props:c,...u}=e,{value:f}=d(`Tabs.Panels`),p=(0,o.useRef)(null),[m,h]=(0,o.useState)(),[g,_]=(0,o.useState)(!1),v=r.a(()=>{let e=p.current;if(!e)return;let t=l.visiblePanel(e)?.offsetHeight;t!==m&&(m!==void 0&&t!==void 0&&_(!0),h(t))});return t.n(()=>{let e=p.current;if(!e||(v(),typeof ResizeObserver>`u`))return;let t=l.visiblePanel(e);if(!t)return;let n=new ResizeObserver(v);return n.observe(t),()=>n.disconnect()},[f,v]),t.n(()=>{let e=p.current;if(!e||!g)return;let t=setTimeout(()=>_(!1),a.n.activeDuration(getComputedStyle(e))+a.n.SETTLE_FRAME);return()=>clearTimeout(t)},[g,m]),(0,s.jsx)(n.default,{ref:p,component:`tabs.panels`,...u,variant:[u.variant,{resizing:g}],style:{height:m===void 0?void 0:`${m}px`,...u.style},props:c,children:i})}h.displayName=`Tabs.Panels`;function g(e){let{value:t,children:r,props:i,...a}=e,{value:o,keepMounted:c,tabId:l,panelId:u}=d(`Tabs.Panel`),f=o===t;return!f&&!c?null:(0,s.jsx)(n.default,{component:`tabs.panel`,...a,variant:[a.variant,{hidden:!f}],id:u(t),props:{role:`tabpanel`,"aria-labelledby":l(t),hidden:!f||void 0,tabIndex:0,...i},children:r})}g.displayName=`Tabs.Panel`;var _=f;_.List=p,_.Tab=m,_.Panels=h,_.Panel=g,_.displayName=`Tabs`,exports.default=_;

package/components/tabs.d.ts

@@ -0,0 +1,87 @@
+import { BoxProps } from '../box';
+import { ChangeHandler } from '../react/a11y/useControllableState';
+import { ComponentsAndVariants } from '@box-kite/core/types';
+import { TabsOrientation } from '../utils/tabs/tabsUtils';
+export type { TabsOrientation };
+/** Why the selection changed — a press on a tab, or the keyboard. */
+export type TabsReason = 'click' | 'keyboard';
+/**
+ * When a tab becomes the selected one. `automatic` is APG's default and what a reader expects: moving to a
+ * tab shows its panel. `manual` moves focus alone and waits for Enter or Space — which is what a panel too
+ * expensive to render on the way past needs.
+ */
+export type TabsActivation = 'automatic' | 'manual';
+/**
+ * Which indicator marks the selected tab. `static` is the tab's own border, which needs no JavaScript
+ * and is what a prerendered page paints. `sliding` is one element for the whole list that travels
+ * between tabs — measured, so the static one stays until the widget has run.
+ */
+export type TabsIndicator = 'static' | 'sliding';
+type TabsBoxProps<TKey extends keyof ComponentsAndVariants> = Omit<BoxProps<'div', TKey>, 'onChange'>;
+export interface TabsProps<TKey extends keyof ComponentsAndVariants = 'tabs'> extends TabsBoxProps<TKey> {
+    /** The tabs and their panels: a `Tabs.List` of `Tabs.Tab`, then one `Tabs.Panel` per tab. */
+    children?: React.ReactNode;
+    /** Controlled selection. Leave it out and the widget owns it. */
+    value?: string;
+    /** Which tab starts selected. Left out, nothing is selected and no panel is shown until one is chosen. */
+    defaultValue?: string;
+    /** Fires with the newly selected tab and why it changed — `'click'` or `'keyboard'`. */
+    onValueChange?: ChangeHandler<string | undefined, TabsReason>;
+    /** Which way the tabs run. Horizontal is the reading axis, so its arrows mirror in a right-to-left page. */
+    orientation?: TabsOrientation;
+    /** Whether moving to a tab selects it. Default `'automatic'`, which is what APG asks for. */
+    activation?: TabsActivation;
+    /** Whether the arrows wrap around at the ends. Default `true`. */
+    loop?: boolean;
+    /**
+     * Which indicator marks the selected tab: the tab's own border (`'static'`, the default) or one
+     * element travelling between them (`'sliding'`), which animates because it is the same element.
+     */
+    indicator?: TabsIndicator;
+    /**
+     * Render every panel rather than only the selected one, hiding the rest. What a panel holding a
+     * half-filled form needs, since an unmounted panel loses its state.
+     */
+    keepMounted?: boolean;
+}
+export interface TabsListProps<TKey extends keyof ComponentsAndVariants = 'tabs.list'> extends BoxProps<'div', TKey> {
+    /** The tabs. */
+    children?: React.ReactNode;
+    /** The list's accessible name. A tablist has none of its own, and one page can hold several. */
+    label?: string;
+    /** Names the list after an element already on the page, instead of `label`. */
+    labelledBy?: string;
+}
+/** Every Box prop, on the `<button>` that is one tab. */
+export interface TabsTabProps<TKey extends keyof ComponentsAndVariants = 'tabs.tab'> extends Omit<BoxProps<'button', TKey>, 'disabled'> {
+    /** Which panel this tab shows, and what the widget reports when it is chosen. */
+    value: string;
+    /** The tab's label. */
+    children?: React.ReactNode;
+    /**
+     * Not selectable, and stepped over by the arrows — unlike a disabled `Menu.Item`, which APG asks stay
+     * reachable. Selection follows focus here, so a tab focus could reach and selection could not would
+     * leave the widget with no state to be in.
+     */
+    disabled?: boolean;
+}
+export interface TabsPanelsProps<TKey extends keyof ComponentsAndVariants = 'tabs.panels'> extends BoxProps<'div', TKey> {
+    /** The panels. */
+    children?: React.ReactNode;
+}
+export interface TabsPanelProps<TKey extends keyof ComponentsAndVariants = 'tabs.panel'> extends BoxProps<'div', TKey> {
+    /** The tab this panel belongs to. */
+    value: string;
+    /** The panel's content. */
+    children?: React.ReactNode;
+}
+interface TabsType {
+    <TKey extends keyof ComponentsAndVariants = 'tabs'>(props: TabsProps<TKey>): React.ReactNode;
+    List: <TKey extends keyof ComponentsAndVariants = 'tabs.list'>(props: TabsListProps<TKey>) => React.ReactNode;
+    Tab: <TKey extends keyof ComponentsAndVariants = 'tabs.tab'>(props: TabsTabProps<TKey>) => React.ReactNode;
+    Panels: <TKey extends keyof ComponentsAndVariants = 'tabs.panels'>(props: TabsPanelsProps<TKey>) => React.ReactNode;
+    Panel: <TKey extends keyof ComponentsAndVariants = 'tabs.panel'>(props: TabsPanelProps<TKey>) => React.ReactNode;
+    displayName?: string;
+}
+declare const Tabs: TabsType;
+export default Tabs;