@box-kite/react 0.0.1 → 2.0.0

package/components/dropdown.mjs

@@ -0,0 +1,491 @@
+"use client";
+import { n as e } from "../effects.mjs";
+import t from "../box.mjs";
+import { a as n, i as r, n as i, r as a, t as o } from "../behavior.mjs";
+import { t as s } from "../identity.mjs";
+import c from "./baseSvg.mjs";
+import ee from "./button.mjs";
+import l from "./flex.mjs";
+import u from "./checkbox.mjs";
+import te from "./overlay.mjs";
+import d from "./presence.mjs";
+import f from "./textbox.mjs";
+import { createContext as p, forwardRef as m, memo as h, useCallback as g, useContext as _, useEffect as ne, useMemo as v, useRef as y, useState as re } from "react";
+import { Fragment as ie, jsx as b, jsxs as x } from "react/jsx-runtime";
+//#region src/components/dropdown/dropdownContext.ts
+var ae = p(null);
+function S() {
+	let e = _(ae);
+	if (!e) throw Error("Dropdown sub-components must be used within Dropdown");
+	return e;
+}
+//#endregion
+//#region src/components/dropdown/dropdownRowRenderer.tsx
+var C = {
+	item: "dropdown.item",
+	unselect: "dropdown.unselect",
+	selectAll: "dropdown.selectAll"
+};
+function oe({ row: e, index: n }) {
+	let { valueToUse: r, multiple: i, variant: a, showCheckbox: o, selectRow: s, optionId: c, activeIndex: ee, rowRef: l, isRowDisabled: te } = S(), d = e.kind === "item", f = te(n), p = d ? r.includes(e.element.props.value) : e.kind === "unselect" && r.length === 0, { value: m, onClick: h, children: g, ..._ } = e.element.props, ne = o && i && d;
+	return /* @__PURE__ */ b(t, {
+		ref: l(n),
+		component: C[e.kind],
+		variant: [a, d ? {
+			multiple: i,
+			highlighted: n === ee
+		} : { highlighted: n === ee }],
+		selected: p,
+		..._,
+		id: c(n),
+		children: ne ? /* @__PURE__ */ x(ie, { children: [/* @__PURE__ */ b(u, {
+			readOnly: !0,
+			checked: p,
+			me: 2,
+			props: {
+				tabIndex: -1,
+				"aria-hidden": !0
+			}
+		}), g] }) : g,
+		props: {
+			role: "option",
+			...f ? { "aria-disabled": !0 } : {},
+			..._.props,
+			onClick: f ? void 0 : (e) => {
+				h?.(e), s(n, e);
+			}
+		}
+	});
+}
+var w = h(oe, (e, t) => e.row.element === t.row.element && e.index === t.index);
+//#endregion
+//#region src/components/dropdown/dropdownItems.tsx
+function T(e, t, n) {
+	return e ? {
+		role: "listbox",
+		"aria-labelledby": n,
+		...t ? { "aria-multiselectable": !0 } : {}
+	} : { role: "status" };
+}
+function se(e) {
+	let { presence: n, rows: r, emptyItem: i, triggerRef: a, popupRef: o, listboxId: s, labelledBy: c, itemsProps: ee } = e, { present: l, ref: u, props: d } = n, { multiple: f, variant: p } = S(), [m, h] = re(!1), _ = g((e) => h(e === "top"), []);
+	return /* @__PURE__ */ b(te, {
+		ref: o,
+		anchor: a,
+		side: "bottom",
+		align: "start",
+		offset: .5,
+		onSideChange: _,
+		children: /* @__PURE__ */ x(t, {
+			ref: u,
+			component: "dropdown.items",
+			...ee,
+			variant: [p, {
+				closed: !l && !m,
+				closedUp: !l && m
+			}],
+			id: s,
+			props: {
+				...T(r.length > 0, f, c),
+				...d
+			},
+			children: [r.map((e, t) => /* @__PURE__ */ b(w, {
+				row: e,
+				index: t
+			}, ce(e, t))), r.length === 0 && i && /* @__PURE__ */ b(t, {
+				component: "dropdown.emptyItem",
+				variant: p,
+				...i.props
+			})]
+		})
+	});
+}
+function ce(e, t) {
+	return e.kind === "item" ? e.element.props.value : `${e.kind}-${t}`;
+}
+se.displayName = "DropdownItems";
+//#endregion
+//#region src/components/dropdown/dropdownSearch.tsx
+function le({ id: e, value: t, onValueChange: n, placeholder: r, inputRef: i, comboboxProps: a, onOpen: o }) {
+	let s = g((e) => n(e.target.value), [n]), c = g((e) => {
+		e.stopPropagation(), o(e);
+	}, [o]);
+	return /* @__PURE__ */ b(l, {
+		ai: "center",
+		position: "absolute",
+		inset: 0,
+		p: 3,
+		children: /* @__PURE__ */ b(f, {
+			clean: !0,
+			id: e,
+			value: t,
+			placeholder: r,
+			onChange: s,
+			ref: i,
+			color: "currentColor",
+			width: "fit",
+			props: {
+				role: "combobox",
+				"aria-autocomplete": "list",
+				autoComplete: "off",
+				spellCheck: !1,
+				...a,
+				onClick: c
+			}
+		})
+	});
+}
+//#endregion
+//#region src/components/dropdown/utils.ts
+function ue(e) {
+	if (e == null) return "";
+	if (typeof e == "object") {
+		let t = e.props?.children;
+		return t == null ? "" : typeof t == "object" ? (Array.isArray(t) ? t : [t]).map((e) => ue(e)).join("") : t.toString();
+	}
+	return e.toString();
+}
+//#endregion
+//#region src/components/dropdown.tsx
+function de(e) {
+	return e == null ? [] : Array.isArray(e) ? e : [e];
+}
+function fe(e) {
+	let t = e?.props?.disabled;
+	return (Array.isArray(t) ? t[0] : t) === !0;
+}
+function pe(e) {
+	return e.key.length === 1 && !e.ctrlKey && !e.metaKey && !e.altKey;
+}
+var me = /* @__PURE__ */ new Set([
+	" ",
+	"Home",
+	"End",
+	"ArrowLeft",
+	"ArrowRight"
+]);
+function E(u, te) {
+	let { name: p, defaultValue: m, value: h, defaultOpen: _, multiple: S = !1, isSearchable: C, searchPlaceholder: oe, children: w, hideIcon: T, showCheckbox: ce = !1, label: E, labelProps: D, itemsProps: O, iconProps: he, onValueChange: ge, onChange: _e, props: ve, ...k } = u, A = y(void 0), ye = n((e, t) => {
+		ge?.(S ? e : e[0], t), _e?.(A.current, e);
+	}), be = "value" in u, xe = v(() => be ? de(h) : void 0, [be, h]), [j, M] = r({
+		value: xe,
+		defaultValue: () => de(m),
+		onChange: ye
+	}), [Se, Ce] = re(null), [N, P] = re(!!_), F = y(null), we = g((e) => {
+		F.current = e;
+	}, []), Te = y(null), I = y(null), L = s("dropdown"), Ee = k.id ?? `${L}-trigger`, De = `${L}-listbox`, Oe = `${L}-label`, ke = E != null && E !== !1, Ae = g((e) => `${L}-option-${e}`, [L]), R = n((e = !1) => {
+		P(!1), e || Ce(null);
+	}), z = v(() => (Array.isArray(w) ? w : [w]).flatMap((e) => e).filter(Boolean), [w]), B = v(() => z.filter((e) => e.type?.displayName === "DropdownItem"), [z]), je = v(() => {
+		let e = /* @__PURE__ */ new Map();
+		for (let t of B) e.set(t, ue(t));
+		return e;
+	}, [B]), V = g((e) => je.get(e) ?? ue(e), [je]), Me = C ? Se ?? "" : "", H = v(() => Me ? B.filter((e) => V(e).toLowerCase().includes(Me.toLowerCase())) : B, [
+		Me,
+		B,
+		V
+	]), U = v(() => z.find((e) => e.type?.displayName === "DropdownUnselect"), [z]), W = v(() => z.find((e) => e.type?.displayName === "DropdownSelectAll"), [z]), Ne = v(() => z.find((e) => e.type?.displayName === "DropdownEmptyItem"), [z]), G = v(() => z.find((e) => e.type?.displayName === "DropdownDisplay"), [z]), K = v(() => !C || G ? "" : B.filter((e) => j.includes(e.props.value)).map((e) => V(e)).join(", "), [
+		C,
+		G,
+		B,
+		j,
+		V
+	]), Pe = !!(W && S && H.length > j.length), Fe = !!(U && H.length > 0 && !Pe), q = v(() => {
+		let e = [];
+		Fe && U && e.push({
+			kind: "unselect",
+			element: U
+		}), Pe && W && e.push({
+			kind: "selectAll",
+			element: W
+		});
+		for (let t of H) e.push({
+			kind: "item",
+			element: t
+		});
+		return e;
+	}, [
+		Fe,
+		U,
+		Pe,
+		W,
+		H
+	]), J = g((e) => fe(q[e]?.element), [q]), Ie = g((e) => {
+		let t = q[e];
+		return t ? V(t.element) : "";
+	}, [q, V]), Le = v(() => {
+		if (C && (N || K !== "")) return null;
+		if (G) return typeof G.props.children == "function" ? G.props.children(j, N) : G.props.children;
+		let e = H.filter((e) => j.includes(e.props.value));
+		if (S && e.length > 1) return e.map((e) => V(e)).join(", ");
+		let t = e.at(0);
+		return t?.props.children ?? t?.props.value ?? (S ? null : U?.props.children);
+	}, [
+		S,
+		H,
+		j,
+		U,
+		N,
+		C,
+		K,
+		G,
+		V
+	]), Re = g((e, ...t) => {
+		if (t.length === 0) A.current = void 0, M([], {
+			reason: "clear",
+			event: e
+		});
+		else if (S && t.length > 1) A.current = void 0, M(t.map((e) => e.props.value), {
+			reason: "select-all",
+			event: e
+		});
+		else if (t.length === 1) {
+			let n = t[0];
+			if (A.current = n.props.value, S) {
+				let t = j.filter((e) => e !== n.props.value), r = t.length !== j.length;
+				r || t.push(n.props.value), M(t, {
+					reason: r ? "deselect" : "select",
+					event: e
+				});
+			} else M([n.props.value], {
+				reason: "select",
+				event: e
+			});
+		}
+		e.stopPropagation(), S ? C && setTimeout(() => I.current?.focus(), 0) : R();
+	}, [
+		S,
+		C,
+		j,
+		M,
+		R
+	]), Y = n((e, t) => {
+		let n = q[e];
+		!n || J(e) || (n.kind === "unselect" ? Re(t) : n.kind === "selectAll" ? Re(t, ...B) : Re(t, n.element));
+	}), ze = (e) => {
+		let t = e === "first" ? 1 : -1;
+		for (let n = e === "first" ? 0 : q.length - 1; n >= 0 && n < q.length; n += t) if (!J(n)) return n;
+		return -1;
+	}, X = (e) => {
+		let t = q.findIndex((e) => e.kind === "item" && j.includes(e.element.props.value));
+		return t !== -1 && !J(t) ? t : e === "none" ? -1 : ze(e);
+	}, Z = o({
+		count: q.length,
+		focusItems: !1,
+		defaultActiveIndex: _ ? X("none") : -1,
+		isDisabled: J,
+		textOf: C ? void 0 : Ie,
+		onSelect: Y
+	}), Be = Z.setActiveIndex, Ve = g((e) => Be(-1, {
+		reason: "programmatic",
+		event: e
+	}), [Be]);
+	a({
+		enabled: N,
+		inside: [F, Te],
+		onDismiss: (e) => R(e === "escape")
+	}), i({
+		enabled: N,
+		returnTo: C ? I : F
+	}), ne(() => {
+		N && I.current?.focus();
+	}, [N]);
+	let Q = Z.activeIndex, He = Z.activeItem;
+	e(() => {
+		!N || Q === -1 || He()?.scrollIntoView?.({ block: "nearest" });
+	}, [
+		N,
+		Q,
+		He
+	]);
+	let $ = (e, t) => {
+		P(!0), Z.setActiveIndex(e, {
+			reason: "programmatic",
+			event: t
+		});
+	}, Ue = n((e) => {
+		N ? R() : $(X("none"), e);
+	}), We = n((e) => {
+		N || $(X("none"), e);
+	}), Ge = n((e) => {
+		Ce(e), N || P(!0), Ve();
+	}), Ke = (e) => {
+		let { key: t } = e;
+		if (C) {
+			if (t === "ArrowDown" || t === "ArrowUp") {
+				e.preventDefault(), $(X(t === "ArrowUp" ? "last" : e.altKey ? "none" : "first"), e);
+				return;
+			}
+			t === "Escape" && Ce("");
+			return;
+		}
+		if (t === "ArrowDown" || t === "Enter" || t === " ") {
+			e.preventDefault(), $(X(e.altKey ? "none" : "first"), e);
+			return;
+		}
+		if (t === "ArrowUp") {
+			e.preventDefault(), $(X("last"), e);
+			return;
+		}
+		if (t === "Home" || t === "End") {
+			e.preventDefault(), $(ze(t === "Home" ? "first" : "last"), e);
+			return;
+		}
+		pe(e) && (P(!0), Z.onKeyDown(e));
+	}, qe = n((e) => {
+		if (ve?.onKeyDown?.(e), !e.defaultPrevented) {
+			if (!N) {
+				Ke(e);
+				return;
+			}
+			if (e.key === "Tab") {
+				!S && Z.activeIndex !== -1 && Y(Z.activeIndex, e), R();
+				return;
+			}
+			if (e.altKey && e.key === "ArrowUp") {
+				e.preventDefault(), Z.activeIndex !== -1 && Y(Z.activeIndex, e), R();
+				return;
+			}
+			if (C && me.has(e.key)) {
+				Ve(e);
+				return;
+			}
+			Z.onKeyDown(e);
+		}
+	}), Je = q.length > 0 || !!Ne, Ye = N && Q !== -1 && Je ? Ae(Q) : void 0, Xe = Z.itemProps, Ze = v(() => ({
+		valueToUse: j,
+		multiple: S,
+		variant: k.variant,
+		showCheckbox: ce,
+		selectRow: Y,
+		optionId: Ae,
+		activeIndex: Q,
+		rowRef: (e) => Xe(e).ref,
+		isRowDisabled: J
+	}), [
+		j,
+		S,
+		k.variant,
+		ce,
+		Y,
+		Ae,
+		Q,
+		Xe,
+		J
+	]), Qe = {
+		"aria-expanded": N,
+		"aria-controls": N && Je ? De : void 0,
+		"aria-activedescendant": Ye,
+		"aria-labelledby": ke ? Oe : void 0,
+		...ve,
+		onKeyDown: qe
+	}, $e = j.map((e) => {
+		let t = JSON.stringify(e);
+		return /* @__PURE__ */ b(f, {
+			ref: te,
+			name: p,
+			type: "hidden",
+			value: t ?? ""
+		}, t);
+	}), et = !T && /* @__PURE__ */ b(l, {
+		component: "dropdown.icon",
+		...he,
+		children: /* @__PURE__ */ b(c, {
+			viewBox: "0 0 10 6",
+			width: "0.6rem",
+			rotate: N ? 180 : 0,
+			children: /* @__PURE__ */ b("path", {
+				stroke: "currentColor",
+				strokeLinecap: "round",
+				strokeLinejoin: "round",
+				strokeWidth: "2",
+				d: "m1 1 4 4 4-4"
+			})
+		})
+	}), tt = Je && /* @__PURE__ */ b(d, {
+		present: N,
+		children: (e) => /* @__PURE__ */ b(se, {
+			presence: e,
+			rows: q,
+			emptyItem: Ne,
+			triggerRef: F,
+			popupRef: Te,
+			listboxId: De,
+			labelledBy: ke ? Oe : Ee,
+			itemsProps: O
+		})
+	}), nt = C ? /* @__PURE__ */ x(t, {
+		ref: we,
+		component: "dropdown",
+		props: { onClick: Ue },
+		position: "relative",
+		pe: T ? void 0 : 6,
+		minWidth: N ? 36 : void 0,
+		width: "fit-content",
+		...k,
+		id: void 0,
+		children: [
+			$e,
+			/* @__PURE__ */ b(le, {
+				id: Ee,
+				value: Se ?? K,
+				onValueChange: Ge,
+				placeholder: N ? oe : void 0,
+				inputRef: I,
+				comboboxProps: Qe,
+				onOpen: We
+			}),
+			Le ?? /* @__PURE__ */ b(t, {
+				tag: "span",
+				visibility: "hidden",
+				children: K || "\xA0"
+			}),
+			et
+		]
+	}) : /* @__PURE__ */ x(ee, {
+		ref: we,
+		onClick: Ue,
+		component: "dropdown",
+		type: "button",
+		props: {
+			tabIndex: 0,
+			role: "combobox",
+			...Qe
+		},
+		position: "relative",
+		pe: T ? void 0 : 6,
+		width: "fit-content",
+		...k,
+		id: Ee,
+		children: [
+			$e,
+			Le ?? "\xA0",
+			et
+		]
+	});
+	return /* @__PURE__ */ b(ae.Provider, {
+		value: Ze,
+		children: ke ? /* @__PURE__ */ x(l, {
+			d: "column",
+			gap: 1,
+			width: "fit-content",
+			...D,
+			children: [
+				/* @__PURE__ */ b(t, {
+					tag: "span",
+					id: Oe,
+					children: E
+				}),
+				nt,
+				tt
+			]
+		}) : /* @__PURE__ */ x(ie, { children: [nt, tt] })
+	});
+}
+function D(e) {
+	let t = (e) => null;
+	return t.displayName = e, t;
+}
+var O = m(E);
+O.Item = D("DropdownItem"), O.Unselect = D("DropdownUnselect"), O.SelectAll = D("DropdownSelectAll"), O.EmptyItem = D("DropdownEmptyItem"), O.Display = D("DropdownDisplay"), O.displayName = "Dropdown";
+//#endregion
+export { O as default };

package/components/flex.cjs

@@ -0,0 +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);function i(e,t){let{inline:i,...a}=e;return(0,n.jsx)(r.default,{ref:t,display:i?`inline-flex`:`flex`,...a})}var a=(0,t.forwardRef)(i);a.displayName=`Flex`,exports.default=a;

package/components/flex.d.ts

@@ -0,0 +1,6 @@
+import { RefAttributes } from 'react';
+import { BoxProps } from '../box';
+import { ExtractElementFromTag } from '../react/reactTypes';
+import { ComponentsAndVariants } from '@box-kite/core/types';
+declare const _default: <TTag extends keyof React.JSX.IntrinsicElements = "div", TKey extends keyof ComponentsAndVariants = never>(props: BoxProps<TTag, TKey> & RefAttributes<ExtractElementFromTag<TTag>>) => React.ReactNode;
+export default _default;

package/components/flex.mjs

@@ -0,0 +1,16 @@
+import { forwardRef as e } from "react";
+import { jsx as t } from "react/jsx-runtime";
+import n from "@box-kite/react";
+//#region src/components/flex.tsx
+function r(e, r) {
+	let { inline: i, ...a } = e;
+	return /* @__PURE__ */ t(n, {
+		ref: r,
+		display: i ? "inline-flex" : "flex",
+		...a
+	});
+}
+var i = e(r);
+i.displayName = "Flex";
+//#endregion
+export { i as default };

package/components/form.cjs

@@ -0,0 +1 @@
+"use client";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:`Module`}});const e=require("../box.cjs");let t=require("react"),n=require("react/jsx-runtime");var r;(function(e){function t(e){let t=Array.from(e.elements).reduce((e,t)=>{let n=t.name;return n?(e[n]||(e[n]=[]),e[n].push(t),e):e},{});return Object.entries(t).reduce((e,[t,r])=>{if(r.length===1){let i=r[0];n(e,t,i.type===`checkbox`||i.type===`radio`?i.checked:i.value)}else n(e,t,r.reduce((e,t)=>(t.type===`checkbox`||t.type===`radio`?t.checked&&e.push(t.value):e.push(t.value),e),[]));return e},{})}e.getFormEntries=t;function n(e,t,n){if(t.includes(`.`)){let r=t.split(`.`),i=e;r.forEach((e,t)=>{if(r.length>t+1){let t=e.match(/^(.+)\[(\d)\]$/);if(t){let[,e,n]=t;i[e]=i[e]||[],i[e][n]=i[e][n]||{},i=i[e][n]}else i[e]=i[e]||{},i=i[e]}else i[e]=n})}else e[t]=n}})(r||={});var i=r;function a(r){let{onSubmit:a,props:o}=r,s=(0,t.useRef)(null),c=(0,t.useCallback)(e=>{e.preventDefault();let t=i.getFormEntries(s.current);a(t,e)},[a]),l={...o,onSubmit:c,ref:s};return(0,n.jsx)(e.default,{tag:`form`,...r,props:l})}a.displayName=`Form`,exports.default=a;

package/components/form.d.ts

@@ -0,0 +1,10 @@
+import { BoxProps } from '../box';
+import { OmitTagProps } from '../react/boxProps';
+type BoxTagProps = Required<BoxProps<'form'>>['props'];
+type FormTagProps = OmitTagProps<BoxTagProps, 'onSubmit' | 'ref'>;
+interface Props<T> extends Omit<BoxProps<'form'>, 'props' | 'tag'> {
+    props?: FormTagProps;
+    onSubmit: (obj: T, e: React.ChangeEvent<HTMLFormElement>) => void;
+}
+export default function Form<T>(props: Props<T>): import("react").JSX.Element;
+export {};

package/components/form.mjs

@@ -0,0 +1,58 @@
+"use client";
+import e from "../box.mjs";
+import { useCallback as t, useRef as n } from "react";
+import { jsx as r } from "react/jsx-runtime";
+//#region src/utils/form/formUtils.ts
+var i;
+(function(e) {
+	function t(e) {
+		let t = Array.from(e.elements).reduce((e, t) => {
+			let n = t.name;
+			return n ? (e[n] || (e[n] = []), e[n].push(t), e) : e;
+		}, {});
+		return Object.entries(t).reduce((e, [t, r]) => {
+			if (r.length === 1) {
+				let i = r[0];
+				n(e, t, i.type === "checkbox" || i.type === "radio" ? i.checked : i.value);
+			} else n(e, t, r.reduce((e, t) => (t.type === "checkbox" || t.type === "radio" ? t.checked && e.push(t.value) : e.push(t.value), e), []));
+			return e;
+		}, {});
+	}
+	e.getFormEntries = t;
+	function n(e, t, n) {
+		if (t.includes(".")) {
+			let r = t.split("."), i = e;
+			r.forEach((e, t) => {
+				if (r.length > t + 1) {
+					let t = e.match(/^(.+)\[(\d)\]$/);
+					if (t) {
+						let [, e, n] = t;
+						i[e] = i[e] || [], i[e][n] = i[e][n] || {}, i = i[e][n];
+					} else i[e] = i[e] || {}, i = i[e];
+				} else i[e] = n;
+			});
+		} else e[t] = n;
+	}
+})(i ||= {});
+var a = i;
+//#endregion
+//#region src/components/form.tsx
+function o(i) {
+	let { onSubmit: o, props: s } = i, c = n(null), l = t((e) => {
+		e.preventDefault();
+		let t = a.getFormEntries(c.current);
+		o(t, e);
+	}, [o]), u = {
+		...s,
+		onSubmit: l,
+		ref: c
+	};
+	return /* @__PURE__ */ r(e, {
+		tag: "form",
+		...i,
+		props: u
+	});
+}
+o.displayName = "Form";
+//#endregion
+export { o as default };

package/components/grid.cjs

@@ -0,0 +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);function i(e,t){let{inline:i,...a}=e;return(0,n.jsx)(r.default,{ref:t,display:i?`inline-grid`:`grid`,...a})}var a=(0,t.forwardRef)(i);a.displayName=`Grid`,exports.default=a;

package/components/grid.d.ts

@@ -0,0 +1,6 @@
+import { RefAttributes } from 'react';
+import { BoxProps } from '../box';
+import { ExtractElementFromTag } from '../react/reactTypes';
+import { ComponentsAndVariants } from '@box-kite/core/types';
+declare const _default: <TTag extends keyof React.JSX.IntrinsicElements = "div", TKey extends keyof ComponentsAndVariants = never>(props: BoxProps<TTag, TKey> & RefAttributes<ExtractElementFromTag<TTag>>) => React.ReactNode;
+export default _default;

package/components/grid.mjs

@@ -0,0 +1,16 @@
+import { forwardRef as e } from "react";
+import { jsx as t } from "react/jsx-runtime";
+import n from "@box-kite/react";
+//#region src/components/grid.tsx
+function r(e, r) {
+	let { inline: i, ...a } = e;
+	return /* @__PURE__ */ t(n, {
+		ref: r,
+		display: i ? "inline-grid" : "grid",
+		...a
+	});
+}
+var i = e(r);
+i.displayName = "Grid";
+//#endregion
+export { i as default };

package/components/icon.cjs

@@ -0,0 +1 @@
+Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:`Module`}});const e=require("../react-shared.cjs");let t=require("react"),n=require("react/jsx-runtime"),r=require("@box-kite/react");var i=6;function a(a,o){let{children:s,label:c,size:l,props:u,style:d,...f}=a,p=l===void 0?void 0:{width:l,height:l},{className:m,styles:h}=(0,r.useClassNames)({width:i,height:i,...f,...p},{svg:!0});if(!(0,t.isValidElement)(s))throw Error(`[box-kite] <Icon> takes exactly one element — the icon to style. For SVG of your own, use <Svg> from components/svg.`);let g=e.s(s.type),_=s.props,v=(g?_.props:s.props)??{},y=g&&_.label!==void 0?{...v,"aria-label":_.label}:v,b={...u,...e.o(c,{...y,...u})},x={...g?{props:{...v,...b}}:b,...d?{style:d}:void 0,ref:o,className:s.props.className?`${s.props.className} ${m}`:m};return(0,n.jsxs)(n.Fragment,{children:[h,(0,t.cloneElement)(s,x)]})}var o=(0,t.forwardRef)(a);o.displayName=`Icon`,exports.default=o;

package/components/icon.d.ts

@@ -0,0 +1,37 @@
+import { BoxClassNameProps } from '../box';
+import { TagPropsType } from '../react/boxProps';
+import { BoxStyleProps } from '@box-kite/core/types';
+/**
+ * Box props for an icon this library did not draw. An icon set is somebody else's component, and the only
+ * styling channel it offers is the `className` it spreads onto its `<svg>`; `Icon` fills that channel
+ * with a class the engine generated, so an icon takes the props everything else here takes:
+ *
+ * ```tsx
+ * <Icon size={5} color="amber-400" hover={{ color: 'amber-300' }} label="Sunny"><Sun /></Icon>
+ * ```
+ *
+ * **Nothing is passed down as a prop.** The size is in the class, where a CSS declaration outranks the
+ * `width`/`height` attributes a set writes for itself — which is why one component fits every set
+ * without knowing any of their prop names, and why `strokeWidth` can differ on hover. The child must
+ * spread its props onto an `<svg>`. **For SVG you draw yourself, `Svg` and the `components/svg` elements
+ * are Boxes already** and need no adapter.
+ */
+export interface IconProps extends BoxClassNameProps {
+    /** The icon: exactly one element, whose `<svg>` these props are styling. */
+    children: React.ReactElement;
+    /**
+     * Width and height at once, on the ÷4 scale: `size={6}` is the 24px an icon set defaults to, and is the
+     * default here too. It wins over `width`/`height`. Careful when porting — a set's own `size` is in pixels.
+     */
+    size?: BoxStyleProps['width'] & BoxStyleProps['height'];
+    /** Names the icon — `role="img"` and this text. Without one the icon is `aria-hidden`. */
+    label?: string;
+    /** Attributes forwarded to the icon's element, over anything the icon writes for itself. */
+    props?: TagPropsType<'svg'>;
+    /** Inline styles forwarded to the icon's element. Box props are the way to style it; this is for a
+     * value that has to be computed per render, which no class can hold. */
+    style?: React.CSSProperties;
+}
+/** Box props on an icon somebody else renders — see `IconProps`. */
+declare const Icon: import('react').ForwardRefExoticComponent<IconProps & import('react').RefAttributes<SVGSVGElement>>;
+export default Icon;