@box-kite/react 2.2.4 → 2.2.6

package/components/swipeItem.mjs

@@ -0,0 +1,321 @@
+"use client";
+import { f as e } from "../react-shared.mjs";
+import { d as t, s as n, t as r, u as i } from "../platform.mjs";
+import { n as a } from "../effects.mjs";
+import { useBoxElement as o } from "../box.mjs";
+import { a as s, i as c, o as l } from "../behavior.mjs";
+import { n as u } from "../motion.mjs";
+import d, { i as f, n as p, r as m, t as h } from "./list.mjs";
+import { createContext as g, useCallback as ee, useContext as _, useEffect as v, useRef as y, useState as b } from "react";
+import { Fragment as x, jsx as S, jsxs as C } from "react/jsx-runtime";
+//#region src/utils/swipe/swipeUtils.ts
+var w;
+(function(e) {
+	let t = e.SLOP = 8, n = e.FLICK = .4, r = e.FULL_RATIO = .6;
+	function i(e, n) {
+		return Math.max(Math.abs(e), Math.abs(n)) < t ? null : Math.abs(e) > Math.abs(n) ? "swipe" : "scroll";
+	}
+	e.intent = i;
+	function a(e, t) {
+		return (1 - 1 / (e * .55 / t + 1)) * t;
+	}
+	function o(e, t, n, r, i) {
+		let o = e + t, s = o < 0 ? -1 : 1, c = o < 0 ? n.end : n.start, l = Math.abs(o);
+		return c === 0 ? 0 : l <= c ? o : i ? s * Math.min(l, r) : s * (c + a(l - c, Math.max(r, 1)));
+	}
+	e.offsetFor = o;
+	function s(e, n, i, a) {
+		if (!a || e === 0) return null;
+		let o = e > 0 ? "start" : "end", s = n[o];
+		return s === 0 ? null : Math.abs(e) >= Math.max(s + t * 4, i * r) ? o : null;
+	}
+	e.armed = s;
+	function c(e, t, r, i, a) {
+		let o = s(e, r, i, a);
+		if (o) return {
+			open: null,
+			full: o
+		};
+		if (e === 0) return {
+			open: null,
+			full: null
+		};
+		let c = e > 0 ? "start" : "end", l = r[c];
+		return l === 0 ? {
+			open: null,
+			full: null
+		} : Math.abs(t) >= n ? {
+			open: Math.sign(t) === Math.sign(e) ? c : null,
+			full: null
+		} : {
+			open: Math.abs(e) >= l / 2 ? c : null,
+			full: null
+		};
+	}
+	e.settle = c;
+	let l = e.VELOCITY_WINDOW = 100;
+	function u(e, t) {
+		return [...e.filter((e) => t.t - e.t <= l), t];
+	}
+	e.track = u;
+	function d(e) {
+		let t = e[0], n = e[e.length - 1];
+		return !t || !n || n.t - t.t < 16 ? 0 : (n.x - t.x) / (n.t - t.t);
+	}
+	e.velocity = d;
+	function f(e, t) {
+		return e === "start" ? t.start : e === "end" ? -t.end : 0;
+	}
+	e.restOffset = f;
+})(w ||= {});
+var T = w, E = g(null), te = {
+	start: 0,
+	end: 0
+};
+function D(e, p) {
+	let { size: m = "md", wrap: g = !1, selected: _ = !1, chevron: w = !1, startActions: D, endActions: O, fullSwipe: k = !1, open: A, defaultOpen: ie = null, onOpenChange: ae, variant: oe, children: se, props: ce, ...le } = e, j = y(null), M = y(null), N = y(null), P = y(null), F = y(!1), [I, L] = c({
+		value: A,
+		defaultValue: ie,
+		onChange: ae
+	}), [R, z] = b(null), [B, V] = b(null), [H, U] = b({
+		trays: te,
+		width: 0,
+		rtl: !1
+	}), W = l(H), ue = ee((e) => {
+		j.current = e, typeof p == "function" ? p(e) : p && (p.current = e);
+	}, [p]), G = s(() => {
+		let e = (e) => e?.firstElementChild?.offsetWidth ?? 0, n = {
+			trays: {
+				start: D ? e(M.current) : 0,
+				end: O ? e(N.current) : 0
+			},
+			width: j.current?.offsetWidth ?? 0,
+			rtl: t(j.current)
+		}, r = W.current;
+		return (r.trays.start !== n.trays.start || r.trays.end !== n.trays.end || r.width !== n.width || r.rtl !== n.rtl) && U(n), n;
+	});
+	a(() => {
+		I && G();
+	}, [I, G]);
+	let K = s((e) => L(null, e));
+	v(() => {
+		let e = r();
+		if (!I || !e) return;
+		let t = (e) => {
+			i(e, [j]) || K({
+				reason: "outside-pointer",
+				event: e
+			});
+		};
+		return e.addEventListener("pointerdown", t, !0), () => e.removeEventListener("pointerdown", t, !0);
+	}, [I, K]), v(() => {
+		if (!B) return;
+		let e = (B === "start" ? M : N).current, t = j.current?.firstElementChild, n = t && typeof getComputedStyle == "function" ? u.activeDuration(getComputedStyle(t)) : 0, r = setTimeout(() => {
+			V(null), e?.querySelector("[data-swipe-action]")?.click();
+		}, n + u.SETTLE_FRAME);
+		return () => clearTimeout(r);
+	}, [B]);
+	let de = s((e) => {
+		if (F.current = !1, e.button !== 0 || B || !D && !O) return;
+		let { trays: t } = G();
+		P.current = {
+			pointerId: e.pointerId,
+			x: e.clientX,
+			y: e.clientY,
+			rest: T.restOffset(I, t),
+			intent: null,
+			samples: [{
+				t: e.timeStamp,
+				x: e.clientX
+			}]
+		};
+	}), fe = s((e) => {
+		let t = P.current;
+		if (!t || t.pointerId !== e.pointerId || t.intent === "scroll") return;
+		let r = e.clientX - t.x;
+		if (!t.intent) {
+			if (t.intent = T.intent(r, e.clientY - t.y), t.intent !== "swipe") return;
+			e.currentTarget.setPointerCapture?.(e.pointerId), n(e.currentTarget);
+		}
+		let { trays: i, width: a, rtl: o } = W.current;
+		t.samples = T.track(t.samples, {
+			t: e.timeStamp,
+			x: e.clientX
+		}), z(T.offsetFor(t.rest, o ? -r : r, i, a, k));
+	}), q = s((e) => {
+		let t = P.current;
+		if (!t || t.pointerId !== e.pointerId || (P.current = null, t.intent !== "swipe" || R === null)) return;
+		e.currentTarget.releasePointerCapture?.(e.pointerId), F.current = !0;
+		let { trays: n, width: r, rtl: i } = W.current, a = T.velocity(t.samples) * (i ? -1 : 1), o = e.type === "pointercancel" ? {
+			open: I,
+			full: null
+		} : T.settle(R, a, n, r, k);
+		z(null), o.full ? (V(o.full), L(null, {
+			reason: "swipe",
+			event: e
+		})) : L(o.open, {
+			reason: "swipe",
+			event: e
+		});
+	}), pe = s((e) => {
+		if (F.current) {
+			F.current = !1, e.preventDefault(), e.stopPropagation();
+			return;
+		}
+		I && (e.preventDefault(), e.stopPropagation(), K({
+			reason: "outside-pointer",
+			event: e
+		}));
+	}), me = s((e) => {
+		let t = M.current?.contains(e.target) ? "start" : N.current?.contains(e.target) ? "end" : null;
+		t && t !== I && (G(), L(t, {
+			reason: "focus",
+			event: e
+		}));
+	}), he = s((e) => {
+		let t = e.relatedTarget;
+		I && (!t || !j.current?.contains(t)) && K({
+			reason: "focus",
+			event: e
+		});
+	}), ge = s((e) => {
+		e.key !== "Escape" || !I || e.defaultPrevented || (e.preventDefault(), K({
+			reason: "escape",
+			event: e
+		}), j.current?.querySelector("[data-list-action]")?.focus());
+	}), { trays: J, width: Y, rtl: X } = H, Z = R ?? (B ? B === "start" ? Y : -Y : T.restOffset(I, J)), _e = R === null ? B : T.armed(R, J, Y, k), Q = R !== null, $ = (e, t) => /* @__PURE__ */ S(re, {
+		side: e,
+		trayRef: e === "start" ? M : N,
+		width: e === "start" ? Math.max(0, Z) : Math.max(0, -Z),
+		dragging: Q,
+		children: /* @__PURE__ */ S(E.Provider, {
+			value: {
+				side: e,
+				armed: _e === e,
+				close: K
+			},
+			children: t
+		})
+	});
+	return o({
+		tag: "li",
+		component: "list.item",
+		...f({
+			...h,
+			css: {
+				...h.css,
+				overflow: "clip"
+			}
+		}, le),
+		variant: [oe, { selected: _ }],
+		props: {
+			...ce,
+			onFocus: me,
+			onBlur: he,
+			onKeyDown: ge
+		},
+		children: /* @__PURE__ */ C(x, { children: [
+			/* @__PURE__ */ C(ne, {
+				size: m,
+				wrap: g,
+				dragging: Q,
+				translate: Z === 0 ? void 0 : `${Math.round(X ? -Z : Z)}px`,
+				handlers: {
+					onPointerDown: de,
+					onPointerMove: fe,
+					onPointerUp: q,
+					onPointerCancel: q,
+					onClickCapture: pe,
+					onDragStart: (e) => e.preventDefault()
+				},
+				children: [se, w && /* @__PURE__ */ S(d.Chevron, {})]
+			}),
+			D ? $("start", D) : null,
+			O ? $("end", O) : null
+		] })
+	}, ue);
+}
+function ne({ size: e, wrap: t, dragging: n, translate: r, handlers: i, children: a }) {
+	return o({
+		component: "swipeItem.row",
+		...p,
+		...m[e],
+		...t ? { flexWrap: "wrap" } : {},
+		position: "relative",
+		css: { touchAction: "pan-y" },
+		variant: { dragging: n },
+		style: r ? { translate: r } : void 0,
+		props: i,
+		children: a
+	});
+}
+function re({ side: e, trayRef: t, width: n, dragging: r, children: i }) {
+	let a = o({
+		display: "flex",
+		d: e === "end" ? "row-reverse" : "row",
+		position: "absolute",
+		top: 0,
+		bottom: 0,
+		...e === "start" ? { insetStart: 0 } : { insetEnd: 0 },
+		minWidth: "fit",
+		css: { width: "max-content" },
+		children: i
+	});
+	return o({
+		component: "swipeItem.tray",
+		position: "absolute",
+		top: 0,
+		bottom: 0,
+		...e === "start" ? { insetStart: 0 } : { insetEnd: 0 },
+		overflow: "hidden",
+		variant: { dragging: r },
+		style: { width: `${Math.round(n)}px` },
+		children: a
+	}, t);
+}
+function O(e, t) {
+	let { icon: n, onClick: r, closeOnSelect: i = !0, variant: a, children: s, props: c, ...l } = e, u = _(E), d = (e) => {
+		r?.(e), i && !e.defaultPrevented && u?.close({
+			reason: "action",
+			event: e
+		});
+	};
+	return o({
+		tag: "button",
+		component: "swipeItem.action",
+		display: "flex",
+		d: "column",
+		ai: "center",
+		jc: "center",
+		gap: 1,
+		px: 4,
+		minWidth: 18,
+		flexGrow: 1,
+		flexShrink: 0,
+		fontSize: 14,
+		lineHeight: 18,
+		fontWeight: 500,
+		cursor: "pointer",
+		...l,
+		variant: [a, { armed: u?.armed ?? !1 }],
+		props: {
+			type: "button",
+			"data-swipe-action": "",
+			...c,
+			onClick: d
+		},
+		children: n ? /* @__PURE__ */ C(x, { children: [/* @__PURE__ */ S(k, { children: n }), s] }) : s
+	}, t);
+}
+function k({ children: e }) {
+	return o({
+		tag: "span",
+		display: "flex",
+		props: { "aria-hidden": !0 },
+		children: e
+	});
+}
+var A = e(D, "SwipeItem");
+A.Action = e(O, "SwipeItem.Action");
+//#endregion
+export { T as SwipeUtils, A as default };

package/components/tabs.cjs

@@ -1 +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=_;
+"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.d(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.mjs

@@ -1,5 +1,5 @@
 "use client";
-import { u as e } from "../platform.mjs";
+import { d 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";

package/components/timeZoneSelect.cjs

@@ -0,0 +1 @@
+"use client";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:`Module`}});const e=require("../box.cjs"),t=require("../behavior.cjs"),n=require("../dates.cjs"),r=require("../date-environment.cjs"),i=require("./combobox.cjs");let a=require("react"),o=require("react/jsx-runtime");function s(e=n.M(),t=Date.now()){return e.map(e=>{let r=e===`UTC`?0:n.A(e,t),i=e.split(`/`),a=i[i.length-1].replace(/_/g,` `),o=`UTC${r===0?``:n.D(r)}`;return{id:e,city:a,region:i.length>1?i.slice(0,-1).join(`/`).replace(/_/g,` `):``,offset:r,offsetText:o,label:`${a} (${o})`}}).sort((e,t)=>e.offset-t.offset||e.city.localeCompare(t.city))}function c(e,t){let n=t.trim().toLowerCase().replace(/\s+/g,` `);if(!n)return!0;let r=e.offsetText.replace(/:00$/,``).replace(/([+-])0/,`$1`);return`${e.id} ${e.city} ${e.region} ${e.offsetText} ${r} gmt${e.offsetText.slice(3)}`.toLowerCase().replace(/_/g,` `).includes(n)}function l(l){let{value:u,defaultValue:d,onValueChange:f,zones:p,label:m,placeholder:h,name:g,disabled:_,props:v,emptyText:y=`No time zone matches`,...b}=l,x=r.n(),S=(0,a.useMemo)(()=>s(p),[p]),C=(0,a.useMemo)(()=>new Map(S.map(e=>[e.id,e])),[S]),[w,T]=t.i({value:u===void 0?void 0:u&&(n.k(u)??u),defaultValue:d===void 0?x.readerZone:d,onChange:f});return(0,o.jsx)(i.default,{...b,data:S,def:{label:`label`,key:`id`,display:t=>(0,o.jsxs)(e.default,{display:`flex`,jc:`space-between`,gap:4,width:`fit`,children:[(0,o.jsx)(e.default,{tag:`span`,children:t.city}),(0,o.jsxs)(e.default,{tag:`span`,opacity:.7,fontSize:12,css:{fontVariantNumeric:`tabular-nums`},children:[t.region?`${t.region} · `:``,t.offsetText]})]})},value:(w?C.get(w):void 0)??null,onValueChange:(e,t)=>T(e?.id??null,t),filter:(e,t)=>e.filter(e=>c(e,t)),label:m,placeholder:h,name:g,disabled:_,emptyText:y,props:v})}var u=l;u.displayName=`TimeZoneSelect`,exports.default=u;

package/components/timeZoneSelect.d.ts

@@ -0,0 +1,52 @@
+import { BoxProps } from '../box';
+import { ChangeHandler } from '../react/a11y/useControllableState';
+import { ZoneOption } from '../utils/date/zoneOptions';
+import { ComboboxValueReason } from './combobox';
+export type { ZoneOption };
+type TimeZoneSelectBoxProps = Omit<BoxProps<'div', 'combobox'>, 'ref' | 'tag' | 'children' | 'defaultValue' | 'onChange' | 'disabled' | 'placeholder' | 'open' | 'props'>;
+export interface TimeZoneSelectProps extends TimeZoneSelectBoxProps {
+    /** The chosen IANA zone (`Europe/Chisinau`, `UTC`), or `null`. Controlled. */
+    value?: string | null;
+    /** The zone it starts with when it owns its state. Default the reader's own. */
+    defaultValue?: string | null;
+    /** Fires with the zone's IANA name. */
+    onValueChange?: ChangeHandler<string | null, ComboboxValueReason>;
+    /** Only these zones, in IANA names. Default every zone the runtime knows, UTC first. */
+    zones?: readonly string[];
+    /** The select's visible name. */
+    label?: React.ReactNode;
+    /** The field's placeholder. Not a name — it is gone on the first keystroke. */
+    placeholder?: string;
+    /** What the zone posts under in a form. */
+    name?: string;
+    /** Not editable and not openable, but still read out. */
+    disabled?: boolean;
+    /** Attributes for the `<input>` itself — an `aria-label`, an `id`. */
+    props?: Record<string, unknown>;
+    /** What the list says when nothing matches. Default `'No time zone matches'`. */
+    emptyText?: React.ReactNode;
+}
+/**
+ * Picks a time zone by place, region or offset — `chis`, `europe` and `+3` all find Chisinau — out of every zone
+ * the runtime knows, each with the offset it is at now.
+ *
+ * ```tsx
+ * const [zone, setZone] = useState('Europe/Chisinau');
+ * <TimeZoneSelect label="Time zone" value={zone} onValueChange={setZone} />
+ * <DateField type="datetime" zone={zone} label="Meeting" />
+ * ```
+ *
+ * It is a `Combobox` over the runtime's own list (`Intl.supportedValuesOf('timeZone')`), so it ships no zone
+ * database, and the value is the IANA name every date component and every server takes.
+ *
+ * @pattern https://www.w3.org/WAI/ARIA/apg/patterns/combobox/
+ * @a11y The APG editable combobox: `role="combobox"` on the field, a `role="listbox"` of options, the active one
+ * named by `aria-activedescendant`. A thousand-odd options are windowed, so it opens in one frame.
+ * @keyboard A printable character — Searches by place, region, IANA name or offset.
+ * @keyboard Down / Up — Opens, or moves through what the search left.
+ * @keyboard Enter — Chooses the highlighted zone.
+ * @keyboard Escape — Closes the list, then clears what was typed.
+ */
+declare function TimeZoneSelectImpl(props: TimeZoneSelectProps): import("react").JSX.Element;
+declare const TimeZoneSelect: typeof TimeZoneSelectImpl;
+export default TimeZoneSelect;

package/components/timeZoneSelect.mjs

@@ -0,0 +1,74 @@
+"use client";
+import e from "../box.mjs";
+import { i as t } from "../behavior.mjs";
+import { A as n, D as r, M as i, k as a } from "../dates.mjs";
+import { n as o } from "../date-environment.mjs";
+import s from "./combobox.mjs";
+import { useMemo as c } from "react";
+import { jsx as l, jsxs as u } from "react/jsx-runtime";
+//#region src/utils/date/zoneOptions.ts
+function d(e = i(), t = Date.now()) {
+	return e.map((e) => {
+		let i = e === "UTC" ? 0 : n(e, t), a = e.split("/"), o = a[a.length - 1].replace(/_/g, " "), s = `UTC${i === 0 ? "" : r(i)}`;
+		return {
+			id: e,
+			city: o,
+			region: a.length > 1 ? a.slice(0, -1).join("/").replace(/_/g, " ") : "",
+			offset: i,
+			offsetText: s,
+			label: `${o} (${s})`
+		};
+	}).sort((e, t) => e.offset - t.offset || e.city.localeCompare(t.city));
+}
+function f(e, t) {
+	let n = t.trim().toLowerCase().replace(/\s+/g, " ");
+	if (!n) return !0;
+	let r = e.offsetText.replace(/:00$/, "").replace(/([+-])0/, "$1");
+	return `${e.id} ${e.city} ${e.region} ${e.offsetText} ${r} gmt${e.offsetText.slice(3)}`.toLowerCase().replace(/_/g, " ").includes(n);
+}
+//#endregion
+//#region src/components/timeZoneSelect.tsx
+function p(n) {
+	let { value: r, defaultValue: i, onValueChange: p, zones: m, label: h, placeholder: g, name: _, disabled: v, props: y, emptyText: b = "No time zone matches", ...x } = n, S = o(), C = c(() => d(m), [m]), w = c(() => new Map(C.map((e) => [e.id, e])), [C]), [T, E] = t({
+		value: r === void 0 ? void 0 : r && (a(r) ?? r),
+		defaultValue: i === void 0 ? S.readerZone : i,
+		onChange: p
+	});
+	return /* @__PURE__ */ l(s, {
+		...x,
+		data: C,
+		def: {
+			label: "label",
+			key: "id",
+			display: (t) => /* @__PURE__ */ u(e, {
+				display: "flex",
+				jc: "space-between",
+				gap: 4,
+				width: "fit",
+				children: [/* @__PURE__ */ l(e, {
+					tag: "span",
+					children: t.city
+				}), /* @__PURE__ */ u(e, {
+					tag: "span",
+					opacity: .7,
+					fontSize: 12,
+					css: { fontVariantNumeric: "tabular-nums" },
+					children: [t.region ? `${t.region} · ` : "", t.offsetText]
+				})]
+			})
+		},
+		value: (T ? w.get(T) : void 0) ?? null,
+		onValueChange: (e, t) => E(e?.id ?? null, t),
+		filter: (e, t) => e.filter((e) => f(e, t)),
+		label: h,
+		placeholder: g,
+		name: _,
+		disabled: v,
+		emptyText: b,
+		props: y
+	});
+}
+var m = p;
+m.displayName = "TimeZoneSelect";
+//#endregion
+export { m as default };

package/components/toaster.cjs

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

package/components/toaster.mjs

@@ -1,13 +1,13 @@
 "use client";
-import { a as e, t } from "../platform.mjs";
-import { t as n } from "../client.mjs";
+import { t as e } from "../client.mjs";
+import { o as t, t as n } from "../platform.mjs";
 import { n as r } from "../effects.mjs";
 import i from "../box.mjs";
 import { n as a } from "../layer.mjs";
 import { t as o } from "../motion.mjs";
 import { useCallback as s, useRef as c } from "react";
-import { createPortal as l } from "react-dom";
-import { jsx as u, jsxs as d } from "react/jsx-runtime";
+import { jsx as l, jsxs as u } from "react/jsx-runtime";
+import { createPortal as d } from "react-dom";
 import { useSyncExternalStore as f } from "use-sync-external-store/shim";
 //#region src/utils/toast/toastStore.ts
 var p = {
@@ -160,7 +160,7 @@ function x(e, t) {
 	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 S(e) {
-	let { toast: t, store: n, fromTop: a, closeLabel: s } = e, { mounted: c, ref: l, props: f } = o({ present: t.open });
+	let { toast: t, store: n, fromTop: a, closeLabel: s } = e, { mounted: c, ref: d, props: f } = o({ present: t.open });
 	if (r(() => {
 		c || n.remove(t.id);
 	}, [
@@ -171,8 +171,8 @@ function S(e) {
 	let p = t.action, m = () => {
 		p?.onClick(), p?.closeOnClick !== !1 && n.dismiss(t.id, "action");
 	};
-	return /* @__PURE__ */ d(i, {
-		ref: l,
+	return /* @__PURE__ */ u(i, {
+		ref: d,
 		component: "toaster.toast",
 		variant: {
 			[t.kind]: t.kind !== "default",
@@ -184,15 +184,15 @@ function S(e) {
 			...f
 		},
 		children: [
-			/* @__PURE__ */ u(i, {
+			/* @__PURE__ */ l(i, {
 				component: "toaster.message",
 				children: t.message
 			}),
-			t.description !== void 0 && /* @__PURE__ */ u(i, {
+			t.description !== void 0 && /* @__PURE__ */ l(i, {
 				component: "toaster.description",
 				children: t.description
 			}),
-			p && /* @__PURE__ */ u(i, {
+			p && /* @__PURE__ */ l(i, {
 				tag: "button",
 				component: "toaster.action",
 				props: {
@@ -201,7 +201,7 @@ function S(e) {
 				},
 				children: p.label
 			}),
-			t.dismissible && /* @__PURE__ */ u(i, {
+			t.dismissible && /* @__PURE__ */ l(i, {
 				tag: "button",
 				component: "toaster.close",
 				props: {
@@ -214,7 +214,7 @@ function S(e) {
 	});
 }
 function C(o) {
-	let { position: p = "bottom-end", limit: m = 3, duration: h = 5e3, label: g = "Notifications", closeLabel: v = "Close", overflowLabel: y = (e) => `+${e} more`, hotkey: C = "F6", store: w = _, props: T, ...E } = o, D = f(w.subscribe, w.getSnapshot, w.getServerSnapshot), O = a(), k = n(!O), A = c(null), j = c(null), M = c({
+	let { position: p = "bottom-end", limit: m = 3, duration: h = 5e3, label: g = "Notifications", closeLabel: v = "Close", overflowLabel: y = (e) => `+${e} more`, hotkey: C = "F6", store: w = _, props: T, ...E } = o, D = f(w.subscribe, w.getSnapshot, w.getServerSnapshot), O = a(), k = e(!O), A = c(null), j = c(null), M = c({
 		hovered: !1,
 		focused: !1,
 		hidden: !1
@@ -223,22 +223,22 @@ function C(o) {
 		e || t || n ? w.pause() : w.resume();
 	}, [w]);
 	r(() => w.setLimit(m), [w, m]), r(() => w.setDefaultDuration(h), [w, h]), r(() => {
-		let t = A.current;
-		!O || !e() || !t || !t.isConnected || t.matches(":popover-open") || t.showPopover();
+		let e = A.current;
+		!O || !t() || !e || !e.isConnected || e.matches(":popover-open") || e.showPopover();
 	}), r(() => {
-		let e = t();
+		let e = n();
 		if (!e) return;
-		let n = new AbortController();
+		let t = new AbortController();
 		return e.addEventListener("visibilitychange", () => {
 			M.current.hidden = e.hidden, N();
-		}, { signal: n.signal }), () => n.abort();
+		}, { signal: t.signal }), () => t.abort();
 	}, [N]), r(() => {
-		let e = t();
+		let e = n();
 		if (!C || !e) return;
-		let n = new AbortController();
+		let t = new AbortController();
 		return e.addEventListener("keydown", (t) => {
 			!x(t, C) || !A.current || (t.preventDefault(), j.current = e.activeElement, A.current.focus());
-		}, { signal: n.signal }), () => n.abort();
+		}, { signal: t.signal }), () => t.abort();
 	}, [C]);
 	let P = (e) => !!e && !!A.current?.contains(e), F = () => {
 		M.current.hovered = !0, N();
@@ -252,10 +252,10 @@ function C(o) {
 		if (e.key !== "Escape") return;
 		let t = (e.target.closest?.("[data-toast-id]"))?.getAttribute("data-toast-id");
 		t && w.dismiss(t, "close"), w.getSnapshot().toasts.some((e) => e.open) ? A.current?.focus() : j.current?.focus();
-	}, B = p.startsWith("top"), V = D.toasts.filter((e) => e.visible), H = B ? [...V].reverse() : V, U = D.overflow > 0 && /* @__PURE__ */ u(i, {
+	}, B = p.startsWith("top"), V = D.toasts.filter((e) => e.visible), H = B ? [...V].reverse() : V, U = D.overflow > 0 && /* @__PURE__ */ l(i, {
 		component: "toaster.overflow",
 		children: y(D.overflow)
-	}), W = /* @__PURE__ */ d(i, {
+	}), W = /* @__PURE__ */ u(i, {
 		tag: "section",
 		ref: A,
 		component: "toaster",
@@ -277,7 +277,7 @@ function C(o) {
 		},
 		children: [
 			!B && U,
-			H.map((e) => /* @__PURE__ */ u(S, {
+			H.map((e) => /* @__PURE__ */ l(S, {
 				toast: e,
 				store: w,
 				fromTop: B,
@@ -286,7 +286,7 @@ function C(o) {
 			B && U
 		]
 	});
-	return O ? W : k ? l(W, k) : null;
+	return O ? W : k ? d(W, k) : null;
 }
 var w = C;
 w.displayName = "Toaster";