@box-kite/react 1.0.0 → 2.0.1

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;

package/components/tabs.mjs

@@ -0,0 +1,324 @@
+"use client";
+import { u as e } from "../platform.mjs";
+import { n as t } from "../effects.mjs";
+import n from "../box.mjs";
+import { a as r, i } from "../behavior.mjs";
+import { t as a } from "../identity.mjs";
+import { n as o } from "../motion.mjs";
+import { createContext as s, useContext as c, useMemo as l, useRef as u, useState as d } from "react";
+import { jsx as f, jsxs as p } from "react/jsx-runtime";
+//#region src/utils/tabs/tabsUtils.ts
+var m;
+(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 = _;
+})(m ||= {});
+var h = m, g = s(null);
+function _(e) {
+	let t = c(g);
+	if (!t) throw Error(`<${e}> has to be rendered inside a <Tabs>.`);
+	return t;
+}
+function v(e) {
+	let { children: r, value: o, defaultValue: s, onValueChange: c, orientation: u = "horizontal", activation: p = "automatic", loop: m = !0, keepMounted: _ = !1, indicator: v = "static", props: y, ...b } = e, x = a("tabs"), [S, C] = i({
+		value: o,
+		defaultValue: s,
+		onChange: c
+	}), [w, T] = d(), [E, D] = d(!1);
+	t(() => {
+		S !== void 0 && T(S);
+	}, [S]);
+	let O = l(() => ({
+		identifier: x,
+		value: S,
+		orientation: u,
+		activation: p,
+		loop: m,
+		keepMounted: _,
+		indicator: v,
+		indicatorLive: E,
+		setIndicatorLive: D,
+		tabStop: w ?? S,
+		setTabStop: T,
+		select: C,
+		tabId: (e) => `${x}-tab-${h.token(e)}`,
+		panelId: (e) => `${x}-panel-${h.token(e)}`
+	}), [
+		x,
+		S,
+		u,
+		p,
+		m,
+		_,
+		v,
+		E,
+		w,
+		C
+	]);
+	return /* @__PURE__ */ f(g.Provider, {
+		value: O,
+		children: /* @__PURE__ */ f(n, {
+			component: "tabs",
+			...b,
+			variant: [b.variant, { vertical: u === "vertical" }],
+			props: y,
+			children: r
+		})
+	});
+}
+function y(i) {
+	let { children: a, label: o, labelledBy: s, props: c, ...l } = i, { value: m, orientation: g, activation: v, loop: y, indicator: b, tabStop: x, setTabStop: S, setIndicatorLive: C, select: w } = _("Tabs.List"), T = u(null), [E, D] = d(), O = b === "sliding";
+	t(() => {
+		let e = T.current;
+		if (!O || !e) return;
+		let t = () => {
+			let t = h.selectedTab(e), n = t && h.bounds(e, t, g);
+			D((e) => h.sameBounds(e, n) ? e : n);
+		};
+		if (t(), typeof ResizeObserver > "u") return;
+		let n = new ResizeObserver(t);
+		n.observe(e);
+		for (let t of h.tabs(e)) n.observe(t);
+		return () => n.disconnect();
+	}, [
+		O,
+		g,
+		m
+	]);
+	let k = O && E && E.size > 0 ? E : void 0;
+	t(() => {
+		C(k !== void 0);
+	}, [k, C]), t(() => {
+		if (x !== void 0) return;
+		let e = h.edge(h.tabs(T.current), 1), t = e && h.valueOf(e);
+		t !== void 0 && S(t);
+	}, [x, S]);
+	let A = r((t) => {
+		let n = T.current;
+		if (!n || t.defaultPrevented || !h.owns(n, t.target)) return;
+		let r = h.tabs(n), i = h.indexOf(r, t.target);
+		if (i === -1) return;
+		if (v === "manual" && (t.key === "Enter" || t.key === " ")) {
+			let e = h.valueOf(r[i]);
+			if (e === void 0) return;
+			t.preventDefault(), w(e, {
+				reason: "keyboard",
+				event: t
+			});
+			return;
+		}
+		let a = h.moveFor(t.key, g, e(n));
+		if (!a) return;
+		let o = h.target(r, i, a, y);
+		if (!o) return;
+		t.preventDefault(), o.focus();
+		let s = h.valueOf(o);
+		v === "automatic" && s !== void 0 && w(s, {
+			reason: "keyboard",
+			event: t
+		});
+	});
+	return /* @__PURE__ */ p(n, {
+		ref: T,
+		component: "tabs.list",
+		...l,
+		variant: [l.variant, {
+			vertical: g === "vertical",
+			sliding: O
+		}],
+		props: {
+			role: "tablist",
+			"aria-label": o,
+			"aria-labelledby": s,
+			"aria-orientation": g,
+			...c,
+			onKeyDown: A
+		},
+		children: [a, k && /* @__PURE__ */ f(n, {
+			tag: "span",
+			component: "tabs.indicator",
+			variant: { vertical: g === "vertical" },
+			style: g === "vertical" ? {
+				top: `${k.start}px`,
+				height: `${k.size}px`
+			} : {
+				left: `${k.start}px`,
+				width: `${k.size}px`
+			},
+			props: { "aria-hidden": !0 }
+		})]
+	});
+}
+y.displayName = "Tabs.List";
+function b(e) {
+	let { value: t, children: i, disabled: a, props: o, ...s } = e, { value: c, orientation: l, keepMounted: u, indicatorLive: d, tabStop: p, setTabStop: m, select: h, tabId: g, panelId: v } = _("Tabs.Tab"), y = c === t, b = r((e) => h(t, {
+		reason: "click",
+		event: e
+	})), x = r(() => m(t));
+	return /* @__PURE__ */ f(n, {
+		tag: "button",
+		component: "tabs.tab",
+		...s,
+		variant: [s.variant, {
+			vertical: l === "vertical",
+			underline: !d
+		}],
+		disabled: a,
+		id: g(t),
+		props: {
+			type: "button",
+			role: "tab",
+			"aria-selected": y,
+			"aria-controls": y || u ? v(t) : void 0,
+			tabIndex: p === t ? 0 : -1,
+			"data-value": t,
+			...o,
+			onClick: b,
+			onFocus: x
+		},
+		children: i
+	});
+}
+b.displayName = "Tabs.Tab";
+function x(e) {
+	let { children: i, props: a, ...s } = e, { value: c } = _("Tabs.Panels"), l = u(null), [p, m] = d(), [g, v] = d(!1), y = r(() => {
+		let e = l.current;
+		if (!e) return;
+		let t = h.visiblePanel(e)?.offsetHeight;
+		t !== p && (p !== void 0 && t !== void 0 && v(!0), m(t));
+	});
+	return t(() => {
+		let e = l.current;
+		if (!e || (y(), typeof ResizeObserver > "u")) return;
+		let t = h.visiblePanel(e);
+		if (!t) return;
+		let n = new ResizeObserver(y);
+		return n.observe(t), () => n.disconnect();
+	}, [c, y]), t(() => {
+		let e = l.current;
+		if (!e || !g) return;
+		let t = setTimeout(() => v(!1), o.activeDuration(getComputedStyle(e)) + o.SETTLE_FRAME);
+		return () => clearTimeout(t);
+	}, [g, p]), /* @__PURE__ */ f(n, {
+		ref: l,
+		component: "tabs.panels",
+		...s,
+		variant: [s.variant, { resizing: g }],
+		style: {
+			height: p === void 0 ? void 0 : `${p}px`,
+			...s.style
+		},
+		props: a,
+		children: i
+	});
+}
+x.displayName = "Tabs.Panels";
+function S(e) {
+	let { value: t, children: r, props: i, ...a } = e, { value: o, keepMounted: s, tabId: c, panelId: l } = _("Tabs.Panel"), u = o === t;
+	return !u && !s ? null : /* @__PURE__ */ f(n, {
+		component: "tabs.panel",
+		...a,
+		variant: [a.variant, { hidden: !u }],
+		id: l(t),
+		props: {
+			role: "tabpanel",
+			"aria-labelledby": c(t),
+			hidden: !u || void 0,
+			tabIndex: 0,
+			...i
+		},
+		children: r
+	});
+}
+S.displayName = "Tabs.Panel";
+var C = v;
+C.List = y, C.Tab = b, C.Panels = x, C.Panel = S, C.displayName = "Tabs";
+//#endregion
+export { C as default };

package/components/textarea.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`,`defaultValue`,`rows`,`cols`,`autoFocus`,`maxLength`,`minLength`,`readOnly`];function s(e,r){let{placeholder:s,...c}=e,{text:l,styles:u}=n.t(s),d=t.t.buildProps(c,o,l===void 0?void 0:{placeholder:l});return(0,i.jsx)(a.default,{ref:r,tag:`textarea`,component:`textarea`,...d,placeholder:u})}var c=(0,r.forwardRef)(s);c.displayName=`Textarea`,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`,`defaultValue`,`rows`,`cols`,`autoFocus`,`maxLength`,`minLength`,`readOnly`];function s(e,r){let{placeholder:s,...c}=e,{text:l,styles:u}=n.t(s),d=t.i.buildProps(c,o,l===void 0?void 0:{placeholder:l});return(0,i.jsx)(a.default,{ref:r,tag:`textarea`,component:`textarea`,...d,placeholder:u})}var c=(0,r.forwardRef)(s);c.displayName=`Textarea`,exports.default=c;

package/components/textarea.d.ts

@@ -8,19 +8,33 @@ type TagPropsType = (typeof tagProps)[number];
 type TextareaProps<TKey extends keyof ComponentsAndVariants> = Omit<BoxProps<'textarea', TKey>, 'tag' | 'props' | 'placeholder'>;
 type TextareaTagProps = OmitTagProps<BoxTagProps<'textarea'>, TagPropsType | 'type'>;
 interface Props<TKey extends keyof ComponentsAndVariants> extends TextareaProps<TKey> {
+    /** What the field submits under, and what a `<label htmlFor>` of your own would point at. */
     name?: string;
+    /** Attributes for the `<textarea>` itself — an `id`, an `aria-label`, `autoComplete`, `wrap`. */
     props?: TextareaTagProps;
+    /** Fires on every keystroke. `onChange` is React's alias for the same event. */
     onInput?: (e: React.ChangeEvent<HTMLTextAreaElement>) => void;
+    /** Fires on every keystroke too — React's `onChange` is the DOM's `input`, not its `change`. */
     onChange?: (e: React.ChangeEvent<HTMLTextAreaElement>) => void;
+    /** A string is the attribute; an object is `::placeholder` styles. Neither one names the field. */
     placeholder?: PlaceholderProp;
+    /** Controlled value. Pair it with `onChange`, or the field cannot be typed into. */
     value?: string;
+    /** The value it starts with when the field owns its own state. */
     defaultValue?: string;
+    /** How many lines tall it starts. `height` is the Box prop for the size it stays. */
     rows?: number;
+    /** How many characters wide it starts — `width` is the prop to reach for instead. */
     cols?: number;
+    /** Focus it on mount. One per page at most — a stolen focus is a lost place in the document. */
     autoFocus?: boolean;
+    /** The most characters the field accepts. The browser both enforces and announces it. */
     maxLength?: number;
+    /** The fewest characters that count as valid. Checked when the form is submitted. */
     minLength?: number;
+    /** Editable to nobody, but still focusable, still read out and still submitted. */
     readOnly?: boolean;
+    /** The form will not submit while it is empty, and a screen reader says so. */
     required?: boolean;
 }
 declare const _default: <TKey extends keyof ComponentsAndVariants = "textarea">(props: Props<TKey> & RefAttributes<HTMLTextAreaElement>) => React.ReactNode;

package/components/textarea.mjs

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

package/components/textbox.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`,`type`,`step`,`defaultValue`,`autoFocus`,`readOnly`,`required`,`value`,`pattern`];function s(e,r){let{placeholder:s,...c}=e,{text:l,styles:u}=n.t(s),d=t.t.buildProps(c,o,l===void 0?void 0:{placeholder:l});return(0,i.jsx)(a.default,{ref:r,tag:`input`,component:`textbox`,...d,placeholder:u})}var c=(0,r.forwardRef)(s);c.displayName=`Textbox`,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`,`type`,`step`,`defaultValue`,`autoFocus`,`readOnly`,`required`,`value`,`pattern`];function s(e,r){let{placeholder:s,...c}=e,{text:l,styles:u}=n.t(s),d=t.i.buildProps(c,o,l===void 0?void 0:{placeholder:l});return(0,i.jsx)(a.default,{ref:r,tag:`input`,component:`textbox`,...d,placeholder:u})}var c=(0,r.forwardRef)(s);c.displayName=`Textbox`,exports.default=c;

package/components/textbox.d.ts

@@ -9,17 +9,29 @@ type TextareaProps<TKey extends keyof ComponentsAndVariants> = Omit<BoxProps<'in
 type TextboxTagProps = OmitTagProps<BoxTagProps<'input'>, TagPropsType>;
 type TextboxType = 'date' | 'datetime-local' | 'email' | 'hidden' | 'month' | 'number' | 'password' | 'search' | 'tel' | 'text' | 'time' | 'url' | 'week';
 interface Props<TKey extends keyof ComponentsAndVariants> extends TextareaProps<TKey> {
+    /** What the field submits under, and what a `<label htmlFor>` of your own would point at. */
     name?: string;
+    /** Attributes for the `<input>` itself — an `id`, an `aria-label`, `inputMode`, `autoComplete`. */
     props?: TextboxTagProps;
+    /** Fires on every keystroke. `onChange` is React's alias for the same event. */
     onInput?: (e: React.ChangeEvent<HTMLInputElement>) => void;
+    /** Fires on every keystroke too — React's `onChange` is the DOM's `input`, not its `change`. */
     onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void;
+    /** Which text input this is. It decides the validation, the mobile keyboard and the spinner. */
     type?: TextboxType;
+    /** A string is the attribute; an object is `::placeholder` styles. Neither one names the field. */
     placeholder?: PlaceholderProp;
+    /** Controlled value. Pair it with `onChange`, or the field cannot be typed into. */
     value?: string | number;
+    /** The value it starts with when the field owns its own state. */
     defaultValue?: string | number;
+    /** A regular expression the value has to match for the form to be valid. */
     pattern?: string;
+    /** Focus it on mount. One per page at most — a stolen focus is a lost place in the document. */
     autoFocus?: boolean;
+    /** Editable to nobody, but still focusable, still read out and still submitted. */
     readOnly?: boolean;
+    /** How far a `number` field's spinner and arrow keys move. */
     step?: number | string;
 }
 declare const _default: <TKey extends keyof ComponentsAndVariants = "textbox">(props: Props<TKey> & RefAttributes<HTMLInputElement>) => React.ReactNode;

package/components/textbox.mjs

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

package/components/toaster.cjs

@@ -0,0 +1 @@
+"use client";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:`Module`}});const e=require("../platform.cjs"),t=require("../client.cjs"),n=require("../effects.cjs"),r=require("../box.cjs"),i=require("../motion.cjs");let a=require("react"),o=require("react/jsx-runtime"),s=require("react-dom"),c=require("use-sync-external-store/shim");var l={toasts:[],overflow:0},u=0;function d(){return u+=1,`toast-${u}`}function f(e){let t=[],n=l,r=e?.limit??3,i=e?.duration??5e3,a=!1,o=new Set,s=new Map,c=e=>{let t=s.get(e);t?.handle&&clearTimeout(t.handle),s.delete(e)},u=()=>{let e=0;t=t.map(t=>{let n=!t.open||e++<r;return t.visible===n?t:{...t,visible:n}}),n={toasts:t,overflow:Math.max(0,e-r)},f(),o.forEach(e=>e())};function f(){let e=new Set;for(let n of t){if(!n.open||!n.visible||!Number.isFinite(n.duration))continue;e.add(n.id);let t=s.get(n.id)??{handle:null,remaining:n.duration,startedAt:0};s.set(n.id,t),!(a||t.handle)&&(t.startedAt=Date.now(),t.handle=setTimeout(()=>{s.delete(n.id),m(n.id,`timeout`)},t.remaining))}for(let t of[...s.keys()])e.has(t)||c(t)}let p=(e,t)=>t??(e===`loading`?1/0:i);function m(e,n=`imperative`){let r=[];t=t.map(t=>!t.open||e!==void 0&&t.id!==e?t:(r.push(t),c(t.id),{...t,open:!1})),r.length&&(u(),r.forEach(e=>e.onDismiss?.(n)))}function h(e,n,r){let i=!1;t=t.map(t=>{if(t.id!==e)return t;i=!0,c(e);let a=r?.kind??t.kind;return{...t,...r,id:e,message:n,kind:a,duration:r?.duration??(r?.kind?p(a):t.duration),open:!0}}),i&&u()}function g(e,n){let r=n?.id??d();if(n?.id&&t.some(e=>e.id===r))return h(r,e,n),r;let i=n?.kind??`default`;return t=[...t,{id:r,kind:i,message:e,description:n?.description,duration:p(i,n?.duration),action:n?.action,dismissible:n?.dismissible??!0,onDismiss:n?.onDismiss,open:!0,visible:!1}],u(),r}return{subscribe(e){return o.add(e),()=>o.delete(e)},getSnapshot:()=>n,getServerSnapshot:()=>l,add:g,update:h,dismiss:m,remove(e){let n=t.filter(t=>t.id!==e);n.length!==t.length&&(c(e),t=n,u())},setLimit(e){e!==r&&(r=e,u())},setDefaultDuration(e){i=e},pause(){if(!a){a=!0;for(let e of s.values())e.handle&&(clearTimeout(e.handle),e.handle=null,e.remaining=Math.max(0,e.remaining-(Date.now()-e.startedAt)))}},resume(){a&&(a=!1,f())},reset(){for(let e of[...s.keys()])c(e);t=[],n=l,o.forEach(e=>e())}}}var p=f(),m=e=>(t,n)=>p.add(t,{...n,kind:e}),h=Object.assign((e,t)=>p.add(e,t),{success:m(`success`),error:m(`error`),warning:m(`warning`),info:m(`info`),loading:m(`loading`),update:(e,t,n)=>p.update(e,t,n),dismiss:e=>p.dismiss(e,`imperative`),promise(e,t,n){let r=p.add(t.loading,{...n,id:n?.id,kind:`loading`}),i=(e,t)=>typeof e==`function`?e(t):e;return e.then(e=>p.update(r,i(t.success,e),{kind:`success`}),e=>p.update(r,i(t.error,e),{kind:`error`})),e}}),g={"top-start":`topStart`,"top-center":`topCenter`,"top-end":`topEnd`,"bottom-start":`bottomStart`,"bottom-center":`bottomCenter`,"bottom-end":`bottomEnd`};function _(e,t){let n=t.toLowerCase().split(`+`),r=n[n.length-1],i=new Set(n.slice(0,-1));return e.key.toLowerCase()===r&&e.altKey===i.has(`alt`)&&e.ctrlKey===i.has(`ctrl`)&&e.shiftKey===i.has(`shift`)&&e.metaKey===i.has(`meta`)}function v(e){let{toast:t,store:a,fromTop:s,closeLabel:c}=e,{mounted:l,ref:u,props:d}=i.t({present:t.open});if(n.n(()=>{l||a.remove(t.id)},[l,a,t.id]),!l)return null;let f=t.action,p=()=>{f?.onClick(),f?.closeOnClick!==!1&&a.dismiss(t.id,`action`)};return(0,o.jsxs)(r.default,{ref:u,component:`toaster.toast`,variant:{[t.kind]:t.kind!=="default",fromTop:s},props:{...t.kind===`error`?{role:`alert`}:{},"data-toast-id":t.id,...d},children:[(0,o.jsx)(r.default,{component:`toaster.message`,children:t.message}),t.description!==void 0&&(0,o.jsx)(r.default,{component:`toaster.description`,children:t.description}),f&&(0,o.jsx)(r.default,{tag:`button`,component:`toaster.action`,props:{type:`button`,onClick:p},children:f.label}),t.dismissible&&(0,o.jsx)(r.default,{tag:`button`,component:`toaster.close`,props:{type:`button`,"aria-label":c,onClick:()=>a.dismiss(t.id,`close`)}})]})}function y(i){let{position:l=`bottom-end`,limit:u=3,duration:d=5e3,label:f=`Notifications`,closeLabel:m=`Close`,overflowLabel:h=e=>`+${e} more`,hotkey:y=`F6`,store:b=p,props:x,...S}=i,C=(0,c.useSyncExternalStore)(b.subscribe,b.getSnapshot,b.getServerSnapshot),[w,T]=(0,a.useState)(!0),E=t.t(!w),D=(0,a.useRef)(null),O=(0,a.useRef)(null),k=(0,a.useRef)({hovered:!1,focused:!1,hidden:!1}),A=(0,a.useCallback)(()=>{let{hovered:e,focused:t,hidden:n}=k.current;e||t||n?b.pause():b.resume()},[b]);n.n(()=>{e.a()||T(!1)},[]),n.n(()=>b.setLimit(u),[b,u]),n.n(()=>b.setDefaultDuration(d),[b,d]),n.n(()=>{let t=D.current;!w||!e.a()||!t||!t.isConnected||t.matches(`:popover-open`)||t.showPopover()}),n.n(()=>{let t=e.t();if(!t)return;let n=new AbortController;return t.addEventListener(`visibilitychange`,()=>{k.current.hidden=t.hidden,A()},{signal:n.signal}),()=>n.abort()},[A]),n.n(()=>{let t=e.t();if(!y||!t)return;let n=new AbortController;return t.addEventListener(`keydown`,e=>{!_(e,y)||!D.current||(e.preventDefault(),O.current=t.activeElement,D.current.focus())},{signal:n.signal}),()=>n.abort()},[y]);let j=e=>!!e&&!!D.current?.contains(e),M=()=>{k.current.hovered=!0,A()},N=e=>{j(e.relatedTarget)||(k.current.hovered=!1,A())},P=e=>{k.current.focused=!0,A(),j(e.relatedTarget)||(O.current=e.relatedTarget)},F=e=>{j(e.relatedTarget)||(k.current.focused=!1,A())},I=e=>{if(e.key!==`Escape`)return;let t=(e.target.closest?.(`[data-toast-id]`))?.getAttribute(`data-toast-id`);t&&b.dismiss(t,`close`),b.getSnapshot().toasts.some(e=>e.open)?D.current?.focus():O.current?.focus()},L=l.startsWith(`top`),R=C.toasts.filter(e=>e.visible),z=L?[...R].reverse():R,B=C.overflow>0&&(0,o.jsx)(r.default,{component:`toaster.overflow`,children:h(C.overflow)}),V=(0,o.jsxs)(r.default,{tag:`section`,ref:D,component:`toaster`,...S,variant:[S.variant,{[g[l]]:!0}],props:{...w?{popover:`manual`}:{},"aria-live":`polite`,"aria-atomic":`false`,"aria-relevant":`additions text`,"aria-label":f,tabIndex:-1,...x,onPointerOver:M,onPointerOut:N,onFocus:P,onBlur:F,onKeyDown:I},children:[!L&&B,z.map(e=>(0,o.jsx)(v,{toast:e,store:b,fromTop:L,closeLabel:m},e.id)),L&&B]});return w?V:E?(0,s.createPortal)(V,E):null}var b=y;b.displayName=`Toaster`,exports.createToastStore=f,exports.default=b,exports.defaultToastStore=p,exports.toast=h;

package/components/toaster.d.ts

@@ -0,0 +1,106 @@
+import { BoxProps } from '../box';
+import { ComponentsAndVariants } from '@box-kite/core/types';
+import { Toast, ToastAction, ToastDismissReason, ToastKind, ToastOptions, ToastStore } from '../utils/toast/toastStore';
+export { default as createToastStore } from '../utils/toast/toastStore';
+export type { Toast, ToastAction, ToastDismissReason, ToastKind, ToastOptions, ToastStore };
+/** Which corner the stack is pinned to. The inline half is logical, so `start` mirrors with the page. */
+export type ToastPosition = 'top-start' | 'top-center' | 'top-end' | 'bottom-start' | 'bottom-center' | 'bottom-end';
+/** What `toast.promise` is told to say at each of the three moments. A function is handed the result. */
+export interface ToastPromiseMessages<TValue> {
+    loading: React.ReactNode;
+    success: React.ReactNode | ((value: TValue) => React.ReactNode);
+    error: React.ReactNode | ((error: unknown) => React.ReactNode);
+}
+type Content = React.ReactNode;
+type Options = ToastOptions<Content>;
+/** The store `toast()` writes to, and the one `<Toaster>` reads when it is given none of its own. */
+export declare const defaultToastStore: ToastStore<Content>;
+/**
+ * Puts a message on screen, from anywhere — an event handler, a fetch, a module with no React in it. It
+ * returns the id, which is what `toast.dismiss` and a second `toast()` naming the same id act on.
+ *
+ * ```ts
+ * toast.success('Saved', { description: 'Your changes are live.' });
+ * toast.error('Could not save', { action: { label: 'Retry', onClick: save } });
+ * toast.promise(save(), { loading: 'Saving…', success: 'Saved', error: 'Could not save' });
+ * ```
+ *
+ * Nothing is shown until a `<Toaster>` is on the page; a call made before one mounts is queued rather
+ * than lost, because the store holds the toasts and the viewport only draws them.
+ */
+export declare const toast: ((message: Content, options?: Options) => string) & {
+    success: (message: Content, options?: Options) => string;
+    error: (message: Content, options?: Options) => string;
+    warning: (message: Content, options?: Options) => string;
+    info: (message: Content, options?: Options) => string;
+    /** Stays until something dismisses it — a spinner that timed out would leave its work unreported. */
+    loading: (message: Content, options?: Options) => string;
+    /** Changes a toast already on screen. An id that is not there is ignored. */
+    update: (id: string, message: Content, options?: Options) => void;
+    /** Starts the exit for one toast, or for every one of them when given no id. */
+    dismiss: (id?: string) => void;
+    /**
+     * One toast for the whole of an async call: a spinner while it runs, then the result in its place.
+     * The promise is handed back untouched, so it can still be awaited.
+     */
+    promise<TValue>(promise: Promise<TValue>, messages: ToastPromiseMessages<TValue>, options?: Options): Promise<TValue>;
+};
+export interface ToasterProps<TKey extends keyof ComponentsAndVariants = 'toaster'> extends Omit<BoxProps<'div', TKey>, 'position'> {
+    /** Which corner the stack is pinned to. Default `'bottom-end'`. */
+    position?: ToastPosition;
+    /** How many toasts are on screen at once. The rest wait their turn, timers and all. Default `3`. */
+    limit?: number;
+    /** Milliseconds a toast that names no duration of its own stays. Default `5000`. */
+    duration?: number;
+    /** The region's accessible name. `role="region"` has none of its own, and this one is never labelled visually. */
+    label?: string;
+    /** The close button's accessible name. */
+    closeLabel?: string;
+    /** What the counter at the end of the stack says when the limit is holding toasts back. */
+    overflowLabel?(count: number): React.ReactNode;
+    /**
+     * A key that moves focus to the stack from anywhere on the page, since toasts steal none. Default
+     * `'F6'`; `'alt+t'` and the like also work, and `false` turns it off.
+     */
+    hotkey?: string | false;
+    /** A store of your own — for a second, independent stack, or for a test that must not share state. */
+    store?: ToastStore<Content>;
+}
+/**
+ * The viewport every toast is drawn in, and the live region they are announced from. Render one, once,
+ * near the root of the app; everything after that is `toast()`, from wherever the message comes from.
+ *
+ * ```tsx
+ * <Toaster position="bottom-end" />
+ * // anywhere at all, React or not:
+ * toast.success('Saved');
+ * ```
+ *
+ * **It is in the top layer and there is no portal.** The viewport carries `popover="manual"` and is shown
+ * as soon as it mounts, so it paints over every stacking context and out of every clipped or transformed
+ * ancestor — and because it stays where it was declared, it inherits the theme, the custom properties and
+ * the text direction around it. `manual` rather than `auto` because a stack of messages owns no dismissal:
+ * a press outside must reach the page, not close the toasts.
+ *
+ * **A press in the gaps goes through to the page.** The viewport is a corner-sized box that would
+ * otherwise swallow every click in it, so it takes no pointer events at all and the toasts take them back.
+ *
+ * **The limit is a queue, not a cap.** A toast past it waits with its timer unstarted, so nothing expires
+ * that was never on screen, and the counter at the end of the stack says how many are waiting.
+ *
+ * @a11y The viewport is a polite live region that exists from the moment it mounts, **before there is
+ * anything in it** — an `aria-live` element inserted together with its content is not reliably announced.
+ * @a11y An error toast is `role="alert"`, which is assertive; every other kind is announced politely by
+ * the region around it. A toast is never focused on arrival, so nothing is taken away from the keyboard.
+ * @a11y Timers stop while the pointer is over the stack, while anything in it has focus, and while the
+ * tab is in the background — WCAG 2.2.1, and the reason a toast may carry a control at all.
+ * @a11y The accent bar says the kind a second time; it is never the only signal, since the message itself
+ * is what says what happened.
+ * @keyboard F6 — Moves focus to the stack from anywhere on the page. Configurable through `hotkey`.
+ * @keyboard Tab — Through the toasts and their controls, in the order they are on screen.
+ * @keyboard Escape — Dismisses the toast focus is in, and hands focus back to where it came from once
+ * the stack is empty.
+ */
+declare function ToasterImpl<TKey extends keyof ComponentsAndVariants = 'toaster'>(props: ToasterProps<TKey>): import("react").JSX.Element | null;
+declare const Toaster: typeof ToasterImpl;
+export default Toaster;