@box-kite/react 2.1.0 → 2.2.0

package/components/semantics.cjs

@@ -1 +1 @@
-Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("../rolldown-runtime.cjs"),t=require("../react-shared.cjs");let n=require("react"),r=require("react/jsx-runtime"),i=require("@box-kite/react");i=e.t(i,1);function a(e){let a=(0,n.forwardRef)((t,n)=>(0,r.jsx)(i.default,{tag:e,ref:n,component:e,...t}));return a.displayName=t.a.capitalize(e),a}var o=a(`label`),s=a(`span`),c=a(`article`),l=a(`aside`),u=a(`details`),d=a(`figcaption`),f=a(`figure`),p=a(`footer`),m=a(`header`),h=a(`main`),g=a(`mark`),_=a(`nav`),v=a(`menu`),y=v,b=a(`section`),x=a(`summary`),S=a(`time`),C=a(`p`),w=a(`ul`),T=a(`ol`),E=a(`li`),D=a(`h1`),O=a(`h2`),k=a(`h3`),A=a(`h4`),j=a(`h5`),M=a(`h6`),N=a(`a`),P=a(`img`);exports.Article=c,exports.Aside=l,exports.Details=u,exports.Figcaption=d,exports.Figure=f,exports.Footer=p,exports.H1=D,exports.H2=O,exports.H3=k,exports.H4=A,exports.H5=j,exports.H6=M,exports.Header=m,exports.Img=P,exports.Label=o,exports.Li=E,exports.Link=N,exports.Main=h,exports.Mark=g,exports.Menu=y,exports.MenuList=v,exports.Nav=_,exports.Ol=T,exports.P=C,exports.Section=b,exports.Span=s,exports.Summary=x,exports.Time=S,exports.Ul=w;
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("../react-shared.cjs");let t=require("@box-kite/react");function n(n){return e.f((e,r)=>(0,t.useBoxElement)({tag:n,component:n,...e},r),e.a.capitalize(n))}var r=n(`label`),i=n(`span`),a=n(`article`),o=n(`aside`),s=n(`details`),c=n(`figcaption`),l=n(`figure`),u=n(`footer`),d=n(`header`),f=n(`main`),p=n(`mark`),m=n(`nav`),h=n(`menu`),g=h,_=n(`section`),v=n(`summary`),y=n(`time`),b=n(`p`),x=n(`ul`),S=n(`ol`),C=n(`li`),w=n(`h1`),T=n(`h2`),E=n(`h3`),D=n(`h4`),O=n(`h5`),k=n(`h6`),A=n(`a`),j=n(`img`);exports.Article=a,exports.Aside=o,exports.Details=s,exports.Figcaption=c,exports.Figure=l,exports.Footer=u,exports.H1=w,exports.H2=T,exports.H3=E,exports.H4=D,exports.H5=O,exports.H6=k,exports.Header=d,exports.Img=j,exports.Label=r,exports.Li=C,exports.Link=A,exports.Main=f,exports.Mark=p,exports.Menu=g,exports.MenuList=h,exports.Nav=m,exports.Ol=S,exports.P=b,exports.Section=_,exports.Span=i,exports.Summary=v,exports.Time=y,exports.Ul=x;

package/components/semantics.mjs

@@ -1,17 +1,13 @@
-import { a as e } from "../react-shared.mjs";
-import { forwardRef as t } from "react";
-import { jsx as n } from "react/jsx-runtime";
-import r from "@box-kite/react";
+import { a as e, f as t } from "../react-shared.mjs";
+import { useBoxElement as n } from "@box-kite/react";
 //#region src/components/semantics.tsx
-function i(i) {
-	let a = t((e, t) => /* @__PURE__ */ n(r, {
-		tag: i,
-		ref: t,
-		component: i,
+function r(r) {
+	return t((e, t) => n({
+		tag: r,
+		component: r,
 		...e
-	}));
-	return a.displayName = e.capitalize(i), a;
+	}, t), e.capitalize(r));
 }
-var a = i("label"), o = i("span"), s = i("article"), c = i("aside"), l = i("details"), u = i("figcaption"), d = i("figure"), f = i("footer"), p = i("header"), m = i("main"), h = i("mark"), g = i("nav"), _ = i("menu"), v = _, y = i("section"), b = i("summary"), x = i("time"), S = i("p"), C = i("ul"), w = i("ol"), T = i("li"), E = i("h1"), D = i("h2"), O = i("h3"), k = i("h4"), A = i("h5"), j = i("h6"), M = i("a"), N = i("img");
+var i = r("label"), a = r("span"), o = r("article"), s = r("aside"), c = r("details"), l = r("figcaption"), u = r("figure"), d = r("footer"), f = r("header"), p = r("main"), m = r("mark"), h = r("nav"), g = r("menu"), _ = g, v = r("section"), y = r("summary"), b = r("time"), x = r("p"), S = r("ul"), C = r("ol"), w = r("li"), T = r("h1"), E = r("h2"), D = r("h3"), O = r("h4"), k = r("h5"), A = r("h6"), j = r("a"), M = r("img");
 //#endregion
-export { s as Article, c as Aside, l as Details, u as Figcaption, d as Figure, f as Footer, E as H1, D as H2, O as H3, k as H4, A as H5, j as H6, p as Header, N as Img, a as Label, T as Li, M as Link, m as Main, h as Mark, v as Menu, _ as MenuList, g as Nav, w as Ol, S as P, y as Section, o as Span, b as Summary, x as Time, C as Ul };
+export { o as Article, s as Aside, c as Details, l as Figcaption, u as Figure, d as Footer, T as H1, E as H2, D as H3, O as H4, k as H5, A as H6, f as Header, M as Img, i as Label, w as Li, j as Link, p as Main, m as Mark, _ as Menu, g as MenuList, h as Nav, C as Ol, x as P, v as Section, a as Span, y as Summary, b as Time, S as Ul };

package/components/svg.cjs

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

package/components/svg.mjs

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

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.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;
+Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:`Module`}});const e=require("../react-shared.cjs"),t=require("../forms.cjs");let n=require("@box-kite/react");var r=[`name`,`onInput`,`onChange`,`value`,`defaultValue`,`rows`,`cols`,`autoFocus`,`maxLength`,`minLength`,`readOnly`];function i(i,a){let{placeholder:o,...s}=i,{text:c,styles:l}=t.t(o),u=e.i.buildProps(s,r,c===void 0?void 0:{placeholder:c});return(0,n.useBoxElement)({tag:`textarea`,component:`textarea`,...u,placeholder:l},a)}var a=e.f(i,`Textarea`);exports.default=a;

package/components/textarea.mjs

@@ -1,10 +1,8 @@
-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";
+import { f as e, i as t } from "../react-shared.mjs";
+import { t as n } from "../forms.mjs";
+import { useBoxElement as r } from "@box-kite/react";
 //#region src/components/textarea.tsx
-var a = [
+var i = [
 	"name",
 	"onInput",
 	"onChange",
@@ -17,17 +15,15 @@ var a = [
 	"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,
+function a(e, a) {
+	let { placeholder: o, ...s } = e, { text: c, styles: l } = n(o), u = t.buildProps(s, i, c === void 0 ? void 0 : { placeholder: c });
+	return r({
 		tag: "textarea",
 		component: "textarea",
-		...d,
-		placeholder: u
-	});
+		...u,
+		placeholder: l
+	}, a);
 }
-var s = n(o);
-s.displayName = "Textarea";
+var o = e(a, "Textarea");
 //#endregion
-export { s as default };
+export { o as default };

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.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;
+Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:`Module`}});const e=require("../react-shared.cjs"),t=require("../forms.cjs");let n=require("@box-kite/react");var r=[`name`,`onInput`,`onChange`,`type`,`step`,`defaultValue`,`autoFocus`,`readOnly`,`required`,`value`,`pattern`];function i(i,a){let{placeholder:o,...s}=i,{text:c,styles:l}=t.t(o),u=e.i.buildProps(s,r,c===void 0?void 0:{placeholder:c});return(0,n.useBoxElement)({tag:`input`,component:`textbox`,...u,placeholder:l},a)}var a=e.f(i,`Textbox`);exports.default=a;

package/components/textbox.mjs

@@ -1,10 +1,8 @@
-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";
+import { f as e, i as t } from "../react-shared.mjs";
+import { t as n } from "../forms.mjs";
+import { useBoxElement as r } from "@box-kite/react";
 //#region src/components/textbox.tsx
-var a = [
+var i = [
 	"name",
 	"onInput",
 	"onChange",
@@ -17,17 +15,15 @@ var a = [
 	"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,
+function a(e, a) {
+	let { placeholder: o, ...s } = e, { text: c, styles: l } = n(o), u = t.buildProps(s, i, c === void 0 ? void 0 : { placeholder: c });
+	return r({
 		tag: "input",
 		component: "textbox",
-		...d,
-		placeholder: u
-	});
+		...u,
+		placeholder: l
+	}, a);
 }
-var s = n(o);
-s.displayName = "Textbox";
+var o = e(a, "Textbox");
 //#endregion
-export { s as default };
+export { o 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("../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;
+"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;

package/components/toaster.mjs

@@ -3,10 +3,11 @@ import { a as e, t } from "../platform.mjs";
 import { t as n } from "../client.mjs";
 import { n as r } from "../effects.mjs";
 import i from "../box.mjs";
-import { t as a } from "../motion.mjs";
-import { useCallback as o, useRef as s, useState as c } from "react";
-import { jsx as l, jsxs as u } from "react/jsx-runtime";
-import { createPortal as d } from "react-dom";
+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 { useSyncExternalStore as f } from "use-sync-external-store/shim";
 //#region src/utils/toast/toastStore.ts
 var p = {
@@ -159,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: o, closeLabel: s } = e, { mounted: c, ref: d, props: f } = a({ present: t.open });
+	let { toast: t, store: n, fromTop: a, closeLabel: s } = e, { mounted: c, ref: l, props: f } = o({ present: t.open });
 	if (r(() => {
 		c || n.remove(t.id);
 	}, [
@@ -170,12 +171,12 @@ function S(e) {
 	let p = t.action, m = () => {
 		p?.onClick(), p?.closeOnClick !== !1 && n.dismiss(t.id, "action");
 	};
-	return /* @__PURE__ */ u(i, {
-		ref: d,
+	return /* @__PURE__ */ d(i, {
+		ref: l,
 		component: "toaster.toast",
 		variant: {
 			[t.kind]: t.kind !== "default",
-			fromTop: o
+			fromTop: a
 		},
 		props: {
 			...t.kind === "error" ? { role: "alert" } : {},
@@ -183,15 +184,15 @@ function S(e) {
 			...f
 		},
 		children: [
-			/* @__PURE__ */ l(i, {
+			/* @__PURE__ */ u(i, {
 				component: "toaster.message",
 				children: t.message
 			}),
-			t.description !== void 0 && /* @__PURE__ */ l(i, {
+			t.description !== void 0 && /* @__PURE__ */ u(i, {
 				component: "toaster.description",
 				children: t.description
 			}),
-			p && /* @__PURE__ */ l(i, {
+			p && /* @__PURE__ */ u(i, {
 				tag: "button",
 				component: "toaster.action",
 				props: {
@@ -200,7 +201,7 @@ function S(e) {
 				},
 				children: p.label
 			}),
-			t.dismissible && /* @__PURE__ */ l(i, {
+			t.dismissible && /* @__PURE__ */ u(i, {
 				tag: "button",
 				component: "toaster.close",
 				props: {
@@ -212,53 +213,51 @@ function S(e) {
 		]
 	});
 }
-function C(a) {
-	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 } = a, D = f(w.subscribe, w.getSnapshot, w.getServerSnapshot), [O, k] = c(!0), A = n(!O), j = s(null), M = s(null), N = s({
+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({
 		hovered: !1,
 		focused: !1,
 		hidden: !1
-	}), P = o(() => {
-		let { hovered: e, focused: t, hidden: n } = N.current;
+	}), N = s(() => {
+		let { hovered: e, focused: t, hidden: n } = M.current;
 		e || t || n ? w.pause() : w.resume();
 	}, [w]);
-	r(() => {
-		e() || k(!1);
-	}, []), r(() => w.setLimit(m), [w, m]), r(() => w.setDefaultDuration(h), [w, h]), r(() => {
-		let t = j.current;
+	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();
 	}), r(() => {
 		let e = t();
 		if (!e) return;
 		let n = new AbortController();
 		return e.addEventListener("visibilitychange", () => {
-			N.current.hidden = e.hidden, P();
+			M.current.hidden = e.hidden, N();
 		}, { signal: n.signal }), () => n.abort();
-	}, [P]), r(() => {
+	}, [N]), r(() => {
 		let e = t();
 		if (!C || !e) return;
 		let n = new AbortController();
 		return e.addEventListener("keydown", (t) => {
-			!x(t, C) || !j.current || (t.preventDefault(), M.current = e.activeElement, j.current.focus());
+			!x(t, C) || !A.current || (t.preventDefault(), j.current = e.activeElement, A.current.focus());
 		}, { signal: n.signal }), () => n.abort();
 	}, [C]);
-	let F = (e) => !!e && !!j.current?.contains(e), I = () => {
-		N.current.hovered = !0, P();
+	let P = (e) => !!e && !!A.current?.contains(e), F = () => {
+		M.current.hovered = !0, N();
+	}, I = (e) => {
+		P(e.relatedTarget) || (M.current.hovered = !1, N());
 	}, L = (e) => {
-		F(e.relatedTarget) || (N.current.hovered = !1, P());
+		M.current.focused = !0, N(), P(e.relatedTarget) || (j.current = e.relatedTarget);
 	}, R = (e) => {
-		N.current.focused = !0, P(), F(e.relatedTarget) || (M.current = e.relatedTarget);
+		P(e.relatedTarget) || (M.current.focused = !1, N());
 	}, z = (e) => {
-		F(e.relatedTarget) || (N.current.focused = !1, P());
-	}, B = (e) => {
 		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) ? j.current?.focus() : M.current?.focus();
-	}, V = p.startsWith("top"), H = D.toasts.filter((e) => e.visible), U = V ? [...H].reverse() : H, W = D.overflow > 0 && /* @__PURE__ */ l(i, {
+		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, {
 		component: "toaster.overflow",
 		children: y(D.overflow)
-	}), G = /* @__PURE__ */ u(i, {
+	}), W = /* @__PURE__ */ d(i, {
 		tag: "section",
-		ref: j,
+		ref: A,
 		component: "toaster",
 		...E,
 		variant: [E.variant, { [b[p]]: !0 }],
@@ -270,24 +269,24 @@ function C(a) {
 			"aria-label": g,
 			tabIndex: -1,
 			...T,
-			onPointerOver: I,
-			onPointerOut: L,
-			onFocus: R,
-			onBlur: z,
-			onKeyDown: B
+			onPointerOver: F,
+			onPointerOut: I,
+			onFocus: L,
+			onBlur: R,
+			onKeyDown: z
 		},
 		children: [
-			!V && W,
-			U.map((e) => /* @__PURE__ */ l(S, {
+			!B && U,
+			H.map((e) => /* @__PURE__ */ u(S, {
 				toast: e,
 				store: w,
-				fromTop: V,
+				fromTop: B,
 				closeLabel: v
 			}, e.id)),
-			V && W
+			B && U
 		]
 	});
-	return O ? G : A ? d(G, A) : null;
+	return O ? W : k ? l(W, k) : null;
 }
 var w = C;
 w.displayName = "Toaster";

package/components/visuallyHidden.cjs

@@ -1 +1 @@
-Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:`Module`}});const e=require("../rolldown-runtime.cjs");let t=require("react"),n=require("react/jsx-runtime"),r=require("@box-kite/react");r=e.t(r,1);var i=.25;function a(e,t){return(0,n.jsx)(r.default,{ref:t,position:`absolute`,width:i,height:i,p:0,b:0,overflow:`hidden`,whiteSpace:`nowrap`,clipPath:`inset(50%)`,...e})}var o=(0,t.forwardRef)(a);o.displayName=`VisuallyHidden`,exports.default=o;
+Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:`Module`}});const e=require("../react-shared.cjs");let t=require("@box-kite/react");var n=.25;function r(e,r){return(0,t.useBoxElement)({position:`absolute`,width:n,height:n,p:0,b:0,overflow:`hidden`,whiteSpace:`nowrap`,clipPath:`inset(50%)`,...e},r)}var i=e.f(r,`VisuallyHidden`);exports.default=i;

package/components/visuallyHidden.mjs

@@ -1,23 +1,20 @@
-import { forwardRef as e } from "react";
-import { jsx as t } from "react/jsx-runtime";
-import n from "@box-kite/react";
+import { f as e } from "../react-shared.mjs";
+import { useBoxElement as t } from "@box-kite/react";
 //#region src/components/visuallyHidden.tsx
-var r = .25;
-function i(e, i) {
-	return /* @__PURE__ */ t(n, {
-		ref: i,
+var n = .25;
+function r(e, r) {
+	return t({
 		position: "absolute",
-		width: r,
-		height: r,
+		width: n,
+		height: n,
 		p: 0,
 		b: 0,
 		overflow: "hidden",
 		whiteSpace: "nowrap",
 		clipPath: "inset(50%)",
 		...e
-	});
+	}, r);
 }
-var a = e(i);
-a.displayName = "VisuallyHidden";
+var i = e(r, "VisuallyHidden");
 //#endregion
-export { a as default };
+export { i as default };

package/docs/mcp.md

@@ -9,7 +9,7 @@ npx @box-kite/mcp
 ```
 
 No key, no network, no state. Everything it answers with was built into it from the library's own
-repository at the version you install, including the styling engine itself.
+repository at the version you install, including the styling engine itself. Node 22 or newer.
 
 ## Install
 
@@ -43,16 +43,17 @@ claude mcp add box-kite -- npx -y @box-kite/mcp
 ## Why `check_styles` exists
 
 Box Kite accepts a closed set of values per prop, and **a value it does not accept produces no rule
-and no class name** — silently, by design, because a typo must not emit a broken declaration. That is
-the right behaviour and it is invisible, so the only honest way to answer "does `bgColor="blue-550"`
-work" is to hand it to the engine:
+and no class name**, by design, because a typo must not emit a broken declaration. A development
+build warns in the console once the page renders; a production one says nothing at all. The way to
+answer "does `bgColor="blue-550"` work" before anything renders is to hand it to the engine:
 
 ```
-check_styles { "props": { "p": 4, "bgColor": "blue-550", "fontSize": 14, "href": "/about" } }
+check_styles { "props": { "p": 4, "bgColor": "blue-550", "fontSize": 14, "lineHeight": 1.5, "href": "/about" } }
 
 ✅ `p` → `.p-4{padding:1rem}`
 ❌ `bgColor` does not accept "blue-550" — no rule and no class name were written.
 ✅ `fontSize` → `.fontSize-14{font-size:0.875rem}`
+⚠️ `lineHeight` → `.lineHeight-1\.5{line-height:1.5px}` — lineHeight={1.5} is a 1.5px line: lineHeight is direct pixels, …
 ⚠️ `href` an HTML attribute, not a style prop. It goes in `props={{ "href": … }}`.
 ```