@box-kite/react 0.0.1 → 2.0.0

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

@@ -0,0 +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.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

@@ -0,0 +1,41 @@
+import { RefAttributes } from 'react';
+import { BoxProps, BoxTagProps } from '../box';
+import { OmitTagProps } from '../react/boxProps';
+import { PlaceholderProp } from '../react/forms/placeholderProp';
+import { ComponentsAndVariants } from '@box-kite/core/types';
+declare const tagProps: readonly ["name", "onInput", "onChange", "value", "defaultValue", "rows", "cols", "autoFocus", "maxLength", "minLength", "readOnly"];
+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;
+export default _default;

package/components/textarea.mjs

@@ -0,0 +1,33 @@
+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";
+import i from "@box-kite/react";
+//#region src/components/textarea.tsx
+var a = [
+	"name",
+	"onInput",
+	"onChange",
+	"value",
+	"defaultValue",
+	"rows",
+	"cols",
+	"autoFocus",
+	"maxLength",
+	"minLength",
+	"readOnly"
+];
+function o(n, o) {
+	let { placeholder: s, ...c } = n, { text: l, styles: u } = t(s), d = e.buildProps(c, a, l === void 0 ? void 0 : { placeholder: l });
+	return /* @__PURE__ */ r(i, {
+		ref: o,
+		tag: "textarea",
+		component: "textarea",
+		...d,
+		placeholder: u
+	});
+}
+var s = n(o);
+s.displayName = "Textarea";
+//#endregion
+export { s as default };

package/components/textbox.cjs

@@ -0,0 +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.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

@@ -0,0 +1,38 @@
+import { RefAttributes } from 'react';
+import { BoxProps, BoxTagProps } from '../box';
+import { OmitTagProps } from '../react/boxProps';
+import { PlaceholderProp } from '../react/forms/placeholderProp';
+import { ComponentsAndVariants } from '@box-kite/core/types';
+declare const tagProps: readonly ["name", "onInput", "onChange", "type", "step", "defaultValue", "autoFocus", "readOnly", "required", "value", "pattern"];
+type TagPropsType = (typeof tagProps)[number];
+type TextareaProps<TKey extends keyof ComponentsAndVariants> = Omit<BoxProps<'input', TKey>, 'tag' | 'props' | 'placeholder'>;
+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;
+export default _default;

package/components/textbox.mjs

@@ -0,0 +1,33 @@
+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";
+import i from "@box-kite/react";
+//#region src/components/textbox.tsx
+var a = [
+	"name",
+	"onInput",
+	"onChange",
+	"type",
+	"step",
+	"defaultValue",
+	"autoFocus",
+	"readOnly",
+	"required",
+	"value",
+	"pattern"
+];
+function o(n, o) {
+	let { placeholder: s, ...c } = n, { text: l, styles: u } = t(s), d = e.buildProps(c, a, l === void 0 ? void 0 : { placeholder: l });
+	return /* @__PURE__ */ r(i, {
+		ref: o,
+		tag: "input",
+		component: "textbox",
+		...d,
+		placeholder: u
+	});
+}
+var s = n(o);
+s.displayName = "Textbox";
+//#endregion
+export { s as default };

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;