@box-kite/react 0.0.1 → 1.0.0

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.i(s.type),_=s.props,v=(g?_.props:s.props)??{},y=g&&_.label!==void 0?{...v,"aria-label":_.label}:v,b={...u,...e.r(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,36 @@
+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'>;
+    /** CSSProperties */
+    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;

package/components/icon.mjs

@@ -0,0 +1,41 @@
+import { i as e, r as t } from "../react-shared.mjs";
+import { cloneElement as n, forwardRef as r, isValidElement as i } from "react";
+import { Fragment as a, jsxs as o } from "react/jsx-runtime";
+import { useClassNames as s } from "@box-kite/react";
+//#region src/components/icon.tsx
+var c = 6;
+function l(r, l) {
+	let { children: u, label: d, size: f, props: p, style: m, ...h } = r, g = f === void 0 ? void 0 : {
+		width: f,
+		height: f
+	}, { className: _, styles: v } = s({
+		width: c,
+		height: c,
+		...h,
+		...g
+	}, { svg: !0 });
+	if (!i(u)) throw Error("[box-kite] <Icon> takes exactly one element — the icon to style. For SVG of your own, use <Svg> from components/svg.");
+	let y = e(u.type), b = u.props, x = (y ? b.props : u.props) ?? {}, S = y && b.label !== void 0 ? {
+		...x,
+		"aria-label": b.label
+	} : x, C = {
+		...p,
+		...t(d, {
+			...S,
+			...p
+		})
+	}, w = {
+		...y ? { props: {
+			...x,
+			...C
+		} } : C,
+		...m ? { style: m } : void 0,
+		ref: l,
+		className: u.props.className ? `${u.props.className} ${_}` : _
+	};
+	return /* @__PURE__ */ o(a, { children: [v, n(u, w)] });
+}
+var u = r(l);
+u.displayName = "Icon";
+//#endregion
+export { u as default };

package/components/overlay.cjs

@@ -0,0 +1 @@
+"use client";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:`Module`}});const e=require("../platform.cjs"),t=require("../client.cjs"),n=require("../box.cjs");let r=require("react"),i=require("react/jsx-runtime"),a=require("react-dom");var o=2;function s(s,c){let{onPositionChange:l,adjustTranslateX:u=`0px`,adjustTranslateY:d=`0px`,anchor:f,anchorSide:p=`top`,contentRef:m,matchWidth:h=!0,...g}=s,_=(0,r.useRef)(null),[v,y]=(0,r.useState)(),b=t.t(),x=(0,r.useCallback)((e,t)=>{let n=n=>{n.target.contains(e)&&t(e)},r=new AbortController;return document.addEventListener(`scroll`,n,{signal:r.signal,capture:!0}),()=>r.abort()},[]),S=(0,r.useCallback)((e,t)=>{let n=n=>{t(e)},r=new AbortController;return window.addEventListener(`resize`,n,{signal:r.signal,capture:!0}),()=>r.abort()},[]),C=(0,r.useCallback)(t=>{let n=t.getBoundingClientRect(),r=p===`bottom`?n.bottom:n.top,i=Math.round((r+window.scrollY)*o)/o,a=Math.round((n.left+window.scrollX)*o)/o,s=window.scrollX,c=window.scrollY,u=e.o(t);(v?.top!==i||v?.left!==a||v?.windowScrollX!==s||v?.windowScrollY!==c||v?.rtl!==u)&&(l?.({top:i,left:a,windowScrollX:s,windowScrollY:c}),y({top:i,left:a,width:n.width>0?n.width:void 0,windowScrollX:s,windowScrollY:c,rtl:u}))},[p,v,l]);return(0,r.useLayoutEffect)(()=>{let t=e.i(f)??_.current;if(t){C(t);let e=x(t,C),n=S(t,C);return()=>{e(),n()}}},[f,C,x,S]),(0,i.jsxs)(i.Fragment,{children:[!f&&(0,i.jsx)(n.default,{ref:_}),v&&b&&(0,a.createPortal)((0,i.jsx)(n.default,{ref:c,position:`absolute`,top:0,left:0,transition:`none`,props:{dir:v.rtl?`rtl`:`ltr`},style:{transform:`translate3d(calc(${v.left}px + ${u}),calc(${v.top}px + ${d}), 0)`,willChange:`transform`,width:h?v.width:void 0},children:(0,i.jsx)(n.default,{ref:m,...g})}),b)]})}var c=(0,r.forwardRef)(s);c.displayName=`Overlay`,exports.default=c;

package/components/overlay.d.ts

@@ -0,0 +1,43 @@
+import { Ref, RefAttributes } from 'react';
+import { BoxProps } from '../box';
+import { ExtractElementFromTag } from '../react/reactTypes';
+import { ComponentsAndVariants } from '@box-kite/core/types';
+import { ElementLike } from '../utils/dom/domUtils';
+/**
+ * A floating layer, rendered into the portal container at the place it is declared: it measures where it
+ * sits, then renders its children into `#box-kite-portal` translated to that spot, so they escape
+ * `overflow: hidden` and every clipped ancestor. It owns no open state, no ARIA and no dismissal — a
+ * layer is not a pattern, and `Tooltip`, `Dropdown` and the DataGrid menu each need a different one.
+ * (This was called `Tooltip` until A3, which is the one thing it is not.)
+ */
+interface OverlayProps {
+    onPositionChange?(position: {
+        top: number;
+        left: number;
+        windowScrollX: number;
+        windowScrollY: number;
+    }): void;
+    adjustTranslateX?: string;
+    adjustTranslateY?: string;
+    /**
+     * Measure this element instead of the layer's own placeholder — right when the layer belongs to an element
+     * next to it rather than to the spot it was declared in. The placeholder is a real box: inside a flex row
+     * it becomes a flex item, so opening the layer shifts everything after it by one `gap`.
+     */
+    anchor?: ElementLike;
+    /** Which edge of the anchor the layer starts from. Default `'top'`. */
+    anchorSide?: 'top' | 'bottom';
+    /**
+     * The content Box, which is the one that animates. `ref` is the positioning wrapper, whose transform
+     * follows the anchor and which therefore transitions nothing on purpose — so a `<Presence>` measuring
+     * an exit has to reach past it.
+     */
+    contentRef?: Ref<HTMLDivElement>;
+    /**
+     * Whether the layer takes the measured width of the anchor. Default true, so a dropdown popup
+     * lines up with its trigger; a tooltip sizes to its own content and turns it off.
+     */
+    matchWidth?: boolean;
+}
+declare const _default: <TTag extends keyof React.JSX.IntrinsicElements = "div", TKey extends keyof ComponentsAndVariants = never>(props: BoxProps<TTag, TKey> & RefAttributes<ExtractElementFromTag<TTag>> & OverlayProps) => React.ReactNode;
+export default _default;

package/components/overlay.mjs

@@ -0,0 +1,82 @@
+"use client";
+import { i as e, o as t } from "../platform.mjs";
+import { t as n } from "../client.mjs";
+import r from "../box.mjs";
+import { forwardRef as i, useCallback as a, useLayoutEffect as o, useRef as s, useState as c } from "react";
+import { Fragment as l, jsx as u, jsxs as d } from "react/jsx-runtime";
+import { createPortal as f } from "react-dom";
+//#region src/components/overlay.tsx
+var p = 2;
+function m(i, m) {
+	let { onPositionChange: h, adjustTranslateX: g = "0px", adjustTranslateY: _ = "0px", anchor: v, anchorSide: y = "top", contentRef: b, matchWidth: x = !0, ...S } = i, C = s(null), [w, T] = c(), E = n(), D = a((e, t) => {
+		let n = (n) => {
+			n.target.contains(e) && t(e);
+		}, r = new AbortController();
+		return document.addEventListener("scroll", n, {
+			signal: r.signal,
+			capture: !0
+		}), () => r.abort();
+	}, []), O = a((e, t) => {
+		let n = (n) => {
+			t(e);
+		}, r = new AbortController();
+		return window.addEventListener("resize", n, {
+			signal: r.signal,
+			capture: !0
+		}), () => r.abort();
+	}, []), k = a((e) => {
+		let n = e.getBoundingClientRect(), r = y === "bottom" ? n.bottom : n.top, i = Math.round((r + window.scrollY) * p) / p, a = Math.round((n.left + window.scrollX) * p) / p, o = window.scrollX, s = window.scrollY, c = t(e);
+		(w?.top !== i || w?.left !== a || w?.windowScrollX !== o || w?.windowScrollY !== s || w?.rtl !== c) && (h?.({
+			top: i,
+			left: a,
+			windowScrollX: o,
+			windowScrollY: s
+		}), T({
+			top: i,
+			left: a,
+			width: n.width > 0 ? n.width : void 0,
+			windowScrollX: o,
+			windowScrollY: s,
+			rtl: c
+		}));
+	}, [
+		y,
+		w,
+		h
+	]);
+	return o(() => {
+		let t = e(v) ?? C.current;
+		if (t) {
+			k(t);
+			let e = D(t, k), n = O(t, k);
+			return () => {
+				e(), n();
+			};
+		}
+	}, [
+		v,
+		k,
+		D,
+		O
+	]), /* @__PURE__ */ d(l, { children: [!v && /* @__PURE__ */ u(r, { ref: C }), w && E && f(/* @__PURE__ */ u(r, {
+		ref: m,
+		position: "absolute",
+		top: 0,
+		left: 0,
+		transition: "none",
+		props: { dir: w.rtl ? "rtl" : "ltr" },
+		style: {
+			transform: `translate3d(calc(${w.left}px + ${g}),calc(${w.top}px + ${_}), 0)`,
+			willChange: "transform",
+			width: x ? w.width : void 0
+		},
+		children: /* @__PURE__ */ u(r, {
+			ref: b,
+			...S
+		})
+	}), E)] });
+}
+var h = i(m);
+h.displayName = "Overlay";
+//#endregion
+export { h as default };

package/components/presence.cjs

@@ -0,0 +1 @@
+"use client";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:`Module`}});const e=require("../motion.cjs");let t=require("react/jsx-runtime");function n(n){let r=e.t({present:n.present});return(0,t.jsx)(t.Fragment,{children:r.mounted?n.children(r):null})}n.displayName=`Presence`,exports.default=n;

package/components/presence.d.ts

@@ -0,0 +1,30 @@
+import { Presence as PresenceHandle } from '../react/animation/usePresence';
+interface Props {
+    /** Whether the child should be there. The exit starts the moment this goes false. */
+    present: boolean;
+    /** The subtree, told which way it is going. */
+    children: (presence: PresenceHandle) => React.ReactNode;
+}
+/**
+ * The exit half of the animation story: it keeps rendering its child with `present: false` until the
+ * child's own CSS says its transition is over, and only then lets React remove it. `startingStyle` is the
+ * entrance and needs no JavaScript at all — this is the ~1 KB the other direction costs, because React
+ * unmounts synchronously and there is nothing left to transition.
+ *
+ * ```tsx
+ * <Presence present={open}>
+ *   {({ present, ref, props }) => (
+ *     <Box ref={ref} props={props} opacity={present ? 1 : 0} startingStyle={{ opacity: 0 }} transitionDuration={200} />
+ *   )}
+ * </Presence>
+ * ```
+ *
+ * A render prop rather than a cloned child, for the same reason `Tooltip`'s trigger is one: the child has
+ * to be told which way it is going, and cloning would have to guess where a `data-state` belongs — a Box
+ * takes DOM attributes in a `props` bag, a plain element takes them on top. The `ref` is not decoration
+ * either: whichever element it lands on is the one whose computed style the wait is measured from, so it
+ * belongs on the element that carries the transition.
+ */
+declare function Presence(props: Props): import("react").JSX.Element;
+export default Presence;
+export type { Presence as PresenceHandle, PresenceState } from '../react/animation/usePresence';

package/components/presence.mjs

@@ -0,0 +1,11 @@
+"use client";
+import { t as e } from "../motion.mjs";
+import { Fragment as t, jsx as n } from "react/jsx-runtime";
+//#region src/components/presence.tsx
+function r(r) {
+	let i = e({ present: r.present });
+	return /* @__PURE__ */ n(t, { children: i.mounted ? r.children(i) : null });
+}
+r.displayName = "Presence";
+//#endregion
+export { r as default };

package/components/radioButton.cjs

@@ -0,0 +1 @@
+Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:`Module`}});const e=require("../rolldown-runtime.cjs"),t=require("../react-shared.cjs"),n=require("../forms.cjs");let r=require("react"),i=require("react/jsx-runtime"),a=require("@box-kite/react");a=e.t(a,1);var o=[`name`,`onInput`,`onChange`,`value`,`autoFocus`,`readOnly`,`defaultChecked`];function s(e,r){let{label:s,labelProps:c,...l}=e,u=t.t.buildProps(l,o,{type:`radio`});return(0,i.jsx)(n.n,{label:s,labelProps:c,children:(0,i.jsx)(a.default,{ref:r,tag:`input`,component:`radioButton`,...u})})}var c=(0,r.forwardRef)(s);c.displayName=`RadioButton`,exports.default=c;

package/components/radioButton.d.ts

@@ -0,0 +1,24 @@
+import { RefAttributes } from 'react';
+import { BoxProps, BoxTagProps } from '../box';
+import { OmitTagProps } from '../react/boxProps';
+import { ComponentsAndVariants } from '@box-kite/core/types';
+declare const tagProps: readonly ["name", "onInput", "onChange", "value", "autoFocus", "readOnly", "defaultChecked"];
+type TagPropsType = (typeof tagProps)[number];
+type RadioButtonProps<TKey extends keyof ComponentsAndVariants> = Omit<BoxProps<'input', TKey>, 'tag' | 'props'>;
+type RadioButtonTagProps = OmitTagProps<BoxTagProps<'input'>, TagPropsType | 'type'>;
+interface Props<TKey extends keyof ComponentsAndVariants> extends RadioButtonProps<TKey> {
+    name?: string;
+    props?: RadioButtonTagProps;
+    onInput?: (e: React.ChangeEvent<HTMLInputElement>) => void;
+    onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void;
+    value?: string | number;
+    autoFocus?: boolean;
+    readOnly?: boolean;
+    defaultChecked?: boolean;
+    /** The text beside the radio, rendered inside a `<label>` that wraps the input. */
+    label?: React.ReactNode;
+    /** Styles for the wrapping `<label>`: the row's layout, not the radio's own appearance. */
+    labelProps?: BoxProps<'label'>;
+}
+declare const _default: <TKey extends keyof ComponentsAndVariants = "radioButton">(props: Props<TKey> & RefAttributes<HTMLInputElement>) => React.ReactNode;
+export default _default;

package/components/radioButton.mjs

@@ -0,0 +1,32 @@
+import { t as e } from "../react-shared.mjs";
+import { n as t } from "../forms.mjs";
+import { forwardRef as n } from "react";
+import { jsx as r } from "react/jsx-runtime";
+import i from "@box-kite/react";
+//#region src/components/radioButton.tsx
+var a = [
+	"name",
+	"onInput",
+	"onChange",
+	"value",
+	"autoFocus",
+	"readOnly",
+	"defaultChecked"
+];
+function o(n, o) {
+	let { label: s, labelProps: c, ...l } = n, u = e.buildProps(l, a, { type: "radio" });
+	return /* @__PURE__ */ r(t, {
+		label: s,
+		labelProps: c,
+		children: /* @__PURE__ */ r(i, {
+			ref: o,
+			tag: "input",
+			component: "radioButton",
+			...u
+		})
+	});
+}
+var s = n(o);
+s.displayName = "RadioButton";
+//#endregion
+export { s as default };

package/components/radioGroup.cjs

@@ -0,0 +1 @@
+"use client";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:`Module`}});const e=require("../behavior.cjs"),t=require("./flex.cjs"),n=require("./semantics.cjs"),r=require("./radioButton.cjs");let i=require("react"),a=require("react/jsx-runtime");var o=(0,i.createContext)(null);function s(e){return[...e?.querySelectorAll(`input[type="radio"]`)??[]].filter(e=>!e.disabled)}function c(e){return e===`ArrowDown`||e===`ArrowRight`?1:e===`ArrowUp`||e===`ArrowLeft`?-1:0}function l(r){let{label:l,name:u,value:d,defaultValue:f,onChange:p,orientation:m=`vertical`,children:h,props:g,..._}=r,v=e.n(`radiogroup`),y=(0,i.useRef)(null),b=(0,i.useRef)(`click`),[x,S]=e.a({value:d,defaultValue:f,onChange:p}),C=e.o(e=>{let t=c(e.key);if(t===0||e.defaultPrevented)return;let n=s(y.current),r=n.indexOf(document.activeElement);if(r===-1)return;e.preventDefault();let i=n[(r+t+n.length)%n.length];i!==n[r]&&(b.current=`keyboard`,i.focus(),i.click(),b.current=`click`)}),w=`${v}-label`,T=l!=null,E=(0,i.useMemo)(()=>({name:u??v,value:x,select:(e,t)=>S(e,{reason:b.current,event:t})}),[v,u,x,S]);return(0,a.jsx)(o.Provider,{value:E,children:(0,a.jsxs)(t.default,{ref:y,d:m===`horizontal`?`row`:`column`,gap:2,..._,props:{role:`radiogroup`,"aria-labelledby":T?w:void 0,...g,onKeyDown:C},children:[T&&(0,a.jsx)(n.Span,{id:w,children:l}),h]})})}function u(t){let n=(0,i.useContext)(o),{value:s,...c}=t,l=e.o(e=>n?.select(s,e));return n?(0,a.jsx)(r.default,{name:n.name,value:s,checked:n.value===s,onChange:l,...c}):(0,a.jsx)(r.default,{value:s,...c})}u.displayName=`RadioGroup.Item`;var d=l;d.Item=u,d.displayName=`RadioGroup`,exports.default=d;

package/components/radioGroup.d.ts

@@ -0,0 +1,38 @@
+import { Ref, RefAttributes } from 'react';
+import { BoxProps, BoxTagProps } from '../box';
+import { ChangeHandler } from '../react/a11y/useControllableState';
+import { ComponentsAndVariants } from '@box-kite/core/types';
+/** Why the selection changed — `onChange` gets this alongside the event that did it. */
+export type RadioGroupReason = 'click' | 'keyboard';
+type RadioGroupBoxProps<TKey extends keyof ComponentsAndVariants> = Omit<BoxProps<'div', TKey>, 'tag' | 'onChange' | 'children'>;
+interface Props<TKey extends keyof ComponentsAndVariants> extends RadioGroupBoxProps<TKey> {
+    /** The group's name, rendered above it and used as the group's accessible name. */
+    label?: React.ReactNode;
+    /** The `name` every radio in the group submits under. Generated when left out. */
+    name?: string;
+    /** Controlled selection. Leave it out and the group owns it. */
+    value?: string;
+    defaultValue?: string;
+    onChange?: ChangeHandler<string | undefined, RadioGroupReason>;
+    /** Which way the radios stack. Both arrow pairs navigate either way, as APG specifies. */
+    orientation?: 'vertical' | 'horizontal';
+    children?: React.ReactNode;
+}
+interface ItemProps extends Omit<BoxProps<'input', 'radioButton'>, 'tag' | 'props' | 'onChange' | 'checked'> {
+    /** What this radio submits, and what the group reports when it is chosen. */
+    value: string;
+    /** Only for an item rendered outside a group — inside one, the group supplies the name. */
+    name?: string;
+    /** The text beside the radio, rendered inside a label that wraps the input. */
+    label?: React.ReactNode;
+    labelProps?: BoxProps<'label'>;
+    props?: BoxTagProps<'input'>;
+    ref?: Ref<HTMLInputElement>;
+}
+interface RadioGroupType {
+    <TKey extends keyof ComponentsAndVariants = never>(props: Props<TKey>): React.ReactNode;
+    Item: (props: ItemProps & RefAttributes<HTMLInputElement>) => React.ReactNode;
+    displayName?: string;
+}
+declare const RadioGroup: RadioGroupType;
+export default RadioGroup;

package/components/radioGroup.mjs

@@ -0,0 +1,79 @@
+"use client";
+import { a as e, n as t, o as n } from "../behavior.mjs";
+import r from "./flex.mjs";
+import { Span as i } from "./semantics.mjs";
+import a from "./radioButton.mjs";
+import { createContext as o, useContext as s, useMemo as c, useRef as l } from "react";
+import { jsx as u, jsxs as d } from "react/jsx-runtime";
+//#region src/components/radioGroup.tsx
+var f = o(null);
+function p(e) {
+	return [...e?.querySelectorAll("input[type=\"radio\"]") ?? []].filter((e) => !e.disabled);
+}
+function m(e) {
+	return e === "ArrowDown" || e === "ArrowRight" ? 1 : e === "ArrowUp" || e === "ArrowLeft" ? -1 : 0;
+}
+function h(a) {
+	let { label: o, name: s, value: h, defaultValue: g, onChange: _, orientation: v = "vertical", children: y, props: b, ...x } = a, S = t("radiogroup"), C = l(null), w = l("click"), [T, E] = e({
+		value: h,
+		defaultValue: g,
+		onChange: _
+	}), D = n((e) => {
+		let t = m(e.key);
+		if (t === 0 || e.defaultPrevented) return;
+		let n = p(C.current), r = n.indexOf(document.activeElement);
+		if (r === -1) return;
+		e.preventDefault();
+		let i = n[(r + t + n.length) % n.length];
+		i !== n[r] && (w.current = "keyboard", i.focus(), i.click(), w.current = "click");
+	}), O = `${S}-label`, k = o != null, A = c(() => ({
+		name: s ?? S,
+		value: T,
+		select: (e, t) => E(e, {
+			reason: w.current,
+			event: t
+		})
+	}), [
+		S,
+		s,
+		T,
+		E
+	]);
+	return /* @__PURE__ */ u(f.Provider, {
+		value: A,
+		children: /* @__PURE__ */ d(r, {
+			ref: C,
+			d: v === "horizontal" ? "row" : "column",
+			gap: 2,
+			...x,
+			props: {
+				role: "radiogroup",
+				"aria-labelledby": k ? O : void 0,
+				...b,
+				onKeyDown: D
+			},
+			children: [k && /* @__PURE__ */ u(i, {
+				id: O,
+				children: o
+			}), y]
+		})
+	});
+}
+function g(e) {
+	let t = s(f), { value: r, ...i } = e, o = n((e) => t?.select(r, e));
+	return t ? /* @__PURE__ */ u(a, {
+		name: t.name,
+		value: r,
+		checked: t.value === r,
+		onChange: o,
+		...i
+	}) : /* @__PURE__ */ u(a, {
+		value: r,
+		...i
+	});
+}
+g.displayName = "RadioGroup.Item";
+var _ = h;
+_.Item = g, _.displayName = "RadioGroup";
+//#endregion
+export { _ as default };

package/components/select.cjs

@@ -0,0 +1 @@
+"use client";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:`Module`}});const e=require("./dropdown.cjs");let t=require("react"),n=require("react/jsx-runtime");function r(r,i){let{data:a,def:o,...s}=r,{valueKey:c,displayKey:l,display:u,selectedDisplay:d,placeholder:f,selectAllText:p,emptyText:m}=o,h=(0,t.useMemo)(()=>{let e=new Map;for(let t of a)e.set(t[c],t);return e},[a,c]);return(0,n.jsxs)(e.default,{ref:i,...s,children:[f&&(0,n.jsx)(e.default.Unselect,{children:f}),p&&(0,n.jsx)(e.default.SelectAll,{children:p}),m&&(0,n.jsx)(e.default.EmptyItem,{children:m}),d&&(0,n.jsx)(e.default.Display,{children:(e,t)=>{let n=e.map(e=>h.get(e)).filter(Boolean);return d(n,t)}}),a.map(t=>{let r=t[c];return(0,n.jsx)(e.default.Item,{value:r,children:u?u(t):String(t[l??c])},r)})]})}var i=(0,t.forwardRef)(r);i.displayName=`Select`,exports.default=i;

package/components/select.d.ts

@@ -0,0 +1,42 @@
+import { RefAttributes } from 'react';
+import { BoxProps } from '../box';
+import { BoxStyleProps, ComponentsAndVariants } from '@box-kite/core/types';
+interface SelectDef<TRow> {
+    /** Key of TRow to use as the option value */
+    valueKey: keyof TRow & (string | number);
+    /** Key of TRow to display as option text (defaults to valueKey) */
+    displayKey?: keyof TRow;
+    /** Custom render function for each option */
+    display?: (row: TRow) => React.ReactNode;
+    /** Custom render function for the selected value display */
+    selectedDisplay?: (selectedRows: TRow[], isOpen: boolean) => React.ReactNode;
+    /** Placeholder text when nothing is selected */
+    placeholder?: string;
+    /** Text for "Select all" option in multiple mode */
+    selectAllText?: string;
+    /** Text shown when search yields no results */
+    emptyText?: string;
+}
+interface Props<TRow, TVal extends TRow[keyof TRow], TKey extends keyof ComponentsAndVariants = 'dropdown'> extends Omit<BoxProps<'button', TKey>, 'ref' | 'tag'> {
+    data: TRow[];
+    def: SelectDef<TRow>;
+    name?: string;
+    defaultValue?: TVal | TVal[];
+    value?: TVal | TVal[];
+    multiple?: boolean;
+    isSearchable?: boolean;
+    searchPlaceholder?: string;
+    hideIcon?: boolean;
+    showCheckbox?: boolean;
+    /** The select's name, rendered above it — see `label` on `Dropdown`. A combobox needs one. */
+    label?: React.ReactNode;
+    labelProps?: BoxProps<'div'>;
+    itemsProps?: BoxStyleProps;
+    iconProps?: BoxStyleProps;
+    onChange?: (value: TVal | undefined, values: TVal[]) => void;
+}
+interface SelectType {
+    <TRow, TVal extends TRow[keyof TRow] = TRow[keyof TRow]>(props: Props<TRow, TVal> & RefAttributes<HTMLInputElement>): React.ReactNode;
+}
+declare const Select: SelectType;
+export default Select;

package/components/select.mjs

@@ -0,0 +1,36 @@
+"use client";
+import e from "./dropdown.mjs";
+import { forwardRef as t, useMemo as n } from "react";
+import { jsx as r, jsxs as i } from "react/jsx-runtime";
+//#region src/components/select.tsx
+function a(t, a) {
+	let { data: o, def: s, ...c } = t, { valueKey: l, displayKey: u, display: d, selectedDisplay: f, placeholder: p, selectAllText: m, emptyText: h } = s, g = n(() => {
+		let e = /* @__PURE__ */ new Map();
+		for (let t of o) e.set(t[l], t);
+		return e;
+	}, [o, l]);
+	return /* @__PURE__ */ i(e, {
+		ref: a,
+		...c,
+		children: [
+			p && /* @__PURE__ */ r(e.Unselect, { children: p }),
+			m && /* @__PURE__ */ r(e.SelectAll, { children: m }),
+			h && /* @__PURE__ */ r(e.EmptyItem, { children: h }),
+			f && /* @__PURE__ */ r(e.Display, { children: (e, t) => {
+				let n = e.map((e) => g.get(e)).filter(Boolean);
+				return f(n, t);
+			} }),
+			o.map((t) => {
+				let n = t[l];
+				return /* @__PURE__ */ r(e.Item, {
+					value: n,
+					children: d ? d(t) : String(t[u ?? l])
+				}, n);
+			})
+		]
+	});
+}
+var o = t(a);
+o.displayName = "Select";
+//#endregion
+export { o as default };

package/components/semantics.cjs

@@ -0,0 +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.n.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=a(`section`),b=a(`summary`),x=a(`time`),S=a(`p`),C=a(`ul`),w=a(`ol`),T=a(`li`),E=a(`h1`),D=a(`h2`),O=a(`h3`),k=a(`h4`),A=a(`h5`),j=a(`h6`),M=a(`a`),N=a(`img`);exports.Article=c,exports.Aside=l,exports.Details=u,exports.Figcaption=d,exports.Figure=f,exports.Footer=p,exports.H1=E,exports.H2=D,exports.H3=O,exports.H4=k,exports.H5=A,exports.H6=j,exports.Header=m,exports.Img=N,exports.Label=o,exports.Li=T,exports.Link=M,exports.Main=h,exports.Mark=g,exports.Menu=v,exports.Nav=_,exports.Ol=w,exports.P=S,exports.Section=y,exports.Span=s,exports.Summary=b,exports.Time=x,exports.Ul=C;