@box-kite/react 0.0.1 → 2.0.0

package/components/popover.mjs

@@ -0,0 +1,69 @@
+"use client";
+import e from "../box.mjs";
+import { a as t } from "../behavior.mjs";
+import { t as n } from "../placement.mjs";
+import r from "./overlay.mjs";
+import { t as i } from "../layer.mjs";
+import { Fragment as a, jsx as o, jsxs as s } from "react/jsx-runtime";
+//#region src/components/popover.tsx
+function c(c) {
+	let { trigger: l, children: u, open: d, defaultOpen: f = !1, onOpenChange: p, label: m, labelledBy: h, side: g = "bottom", align: _ = "center", offset: v = 2, flip: y = !0, matchWidth: b = !1, autoFocus: x = !0, props: S, ...C } = c, w = t((e) => {
+		!x || e.contains(document.activeElement) || e.focus();
+	}), { platform: T, isOpen: E, id: D, trigger: O, triggerElement: k, setPanel: A } = i({
+		haspopup: "dialog",
+		idPrefix: "popover",
+		id: C.id,
+		open: d,
+		defaultOpen: f,
+		onOpenChange: p,
+		onOpened: w
+	}), j = n({
+		side: g,
+		align: _,
+		offset: v,
+		flip: y,
+		matchWidth: b,
+		anchor: k
+	}), M = {
+		"aria-label": m,
+		"aria-labelledby": h
+	}, N = C;
+	return T ? /* @__PURE__ */ s(a, { children: [l(O), /* @__PURE__ */ o(e, {
+		ref: A,
+		component: "popover",
+		...N,
+		variant: [N.variant, { topLayer: !0 }],
+		...j.layerProps,
+		id: D,
+		props: {
+			popover: "auto",
+			role: "dialog",
+			...M,
+			tabIndex: -1,
+			...S
+		},
+		children: u
+	})] }) : /* @__PURE__ */ s(a, { children: [l(O), E && /* @__PURE__ */ o(r, {
+		contentRef: A,
+		anchor: k,
+		side: g,
+		align: _,
+		offset: v,
+		flip: y,
+		matchWidth: b,
+		component: "popover",
+		...N,
+		id: D,
+		props: {
+			role: "dialog",
+			...M,
+			tabIndex: -1,
+			...S
+		},
+		children: u
+	})] });
+}
+var l = c;
+l.displayName = "Popover";
+//#endregion
+export { l 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,36 @@
+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.
+ *
+ * @a11y The exit is measured from the element's own `transition-duration`/`animation-duration`, so
+ * `prefers-reduced-motion` — which zeroes `--transitionTime` — removes the node in the same commit
+ * with no opt-in.
+ * @a11y `data-state` is `'open'` or `'closed'` on the child, which is what a CSS exit selects on. A
+ * node on its way out is still in the accessibility tree, so anything hiding it has to say so itself.
+ */
+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/progress.cjs

@@ -0,0 +1 @@
+Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:`Module`}});const e=require("../rolldown-runtime.cjs");let t=require("react/jsx-runtime"),n=require("@box-kite/react");n=e.t(n,1);function r(e){let{value:r,min:i=0,max:a=100,label:o,labelledBy:s,format:c,props:l,...u}=e,d=r===void 0,f=d?i:Math.min(Math.max(r,i),a),p=a<=i?0:Math.round((f-i)/(a-i)*1e4)/100;return(0,t.jsx)(n.default,{component:`progress`,...u,props:{role:`progressbar`,"aria-valuemin":i,"aria-valuemax":a,"aria-valuenow":d?void 0:f,"aria-valuetext":d?void 0:c?.(f),"aria-label":o,"aria-labelledby":s,...l},children:(0,t.jsx)(n.default,{component:`progress.fill`,variant:{indeterminate:d},style:d?void 0:{inlineSize:`${p}%`}})})}r.displayName=`Progress`,exports.default=r;

package/components/progress.d.ts

@@ -0,0 +1,47 @@
+import { BoxProps } from '../box';
+import { ComponentsAndVariants } from '@box-kite/core/types';
+export interface ProgressProps<TKey extends keyof ComponentsAndVariants = 'progress'> extends BoxProps<'div', TKey> {
+    /** How far along it is. Leave it out for a task with no measurable end — the bar sweeps and reports nothing. */
+    value?: number;
+    /** The bottom of the range. Default `0`. */
+    min?: number;
+    /** The top of the range, and so what "full" means. Default `100`. */
+    max?: number;
+    /** What the bar is called. A progress bar has to be named — nothing about it is readable otherwise. */
+    label?: string;
+    /** The same, naming an element that already says it. */
+    labelledBy?: string;
+    /** The value as it should be read out: "3 of 10 files", "eleven minutes left". */
+    format?: (value: number) => string;
+}
+/**
+ * How far a task has got.
+ *
+ * ```tsx
+ * <Progress label="Upload" value={62} />
+ * <Progress label="Preparing" />
+ * ```
+ *
+ * **No `value` is the indeterminate bar**, which is a state and not a number: `aria-valuenow` is left off
+ * entirely — the one thing a reader must not be told is a progress that was never measured — and the bar
+ * sweeps instead, stopping under `prefers-reduced-motion` because a named duration is outside what
+ * `--transitionTime` zeroes.
+ *
+ * **The fill is an inline style and everything else is a class**, the exception `Slider` explains: a
+ * percentage that moves with a download is a rule per frame if it goes in a class name. Where the value
+ * is data rather than an animation, a `ProgressRing` from `components/chart` rounds it into a class
+ * instead and pays nothing.
+ *
+ * It renders on a server — no state, no effect, no measurement — so a page can paint a real figure
+ * before any JavaScript arrives.
+ *
+ * @a11y `role="progressbar"` with `aria-valuemin`, `aria-valuemax` and, when there is one, `aria-valuenow`.
+ * @a11y `label` or `labelledBy` is what names it. A bar with neither is a percentage nobody can attach
+ * to anything.
+ * @a11y `format` writes `aria-valuetext`, for a value the number alone does not read as.
+ */
+declare function Progress<TKey extends keyof ComponentsAndVariants = 'progress'>(props: ProgressProps<TKey>): import("react").JSX.Element;
+declare namespace Progress {
+    var displayName: string;
+}
+export default Progress;

package/components/progress.mjs

@@ -0,0 +1,28 @@
+import { jsx as e } from "react/jsx-runtime";
+import t from "@box-kite/react";
+//#region src/components/progress.tsx
+function n(n) {
+	let { value: r, min: i = 0, max: a = 100, label: o, labelledBy: s, format: c, props: l, ...u } = n, d = r === void 0, f = d ? i : Math.min(Math.max(r, i), a), p = a <= i ? 0 : Math.round((f - i) / (a - i) * 1e4) / 100;
+	return /* @__PURE__ */ e(t, {
+		component: "progress",
+		...u,
+		props: {
+			role: "progressbar",
+			"aria-valuemin": i,
+			"aria-valuemax": a,
+			"aria-valuenow": d ? void 0 : f,
+			"aria-valuetext": d ? void 0 : c?.(f),
+			"aria-label": o,
+			"aria-labelledby": s,
+			...l
+		},
+		children: /* @__PURE__ */ e(t, {
+			component: "progress.fill",
+			variant: { indeterminate: d },
+			style: d ? void 0 : { inlineSize: `${p}%` }
+		})
+	});
+}
+n.displayName = "Progress";
+//#endregion
+export { n 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.i.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,32 @@
+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> {
+    /** The name the radios of one set share — it is what makes them one choice rather than several. */
+    name?: string;
+    /** Attributes for the `<input>` itself. `type` is the component's. */
+    props?: RadioButtonTagProps;
+    /** Fires on every click or keystroke. On a radio this is the same moment as `onChange`. */
+    onInput?: (e: React.ChangeEvent<HTMLInputElement>) => void;
+    /** Fires when this radio becomes the chosen one. A radio never fires it on being cleared. */
+    onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void;
+    /** What the set submits when this option is the chosen one. */
+    value?: string | number;
+    /** Focus it on mount. One per page at most — a stolen focus is a lost place in the document. */
+    autoFocus?: boolean;
+    /** Rendered and read, but not selectable. Unlike `disabled` it stays in the tab order and submits. */
+    readOnly?: boolean;
+    /** Makes this the chosen option to begin with, when the set is uncontrolled. */
+    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 { i 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("../identity.cjs"),n=require("./flex.cjs"),r=require("./semantics.cjs"),i=require("./radioButton.cjs");let a=require("react"),o=require("react/jsx-runtime");var s=(0,a.createContext)(null);function c(e){return[...e?.querySelectorAll(`input[type="radio"]`)??[]].filter(e=>!e.disabled)}function l(e){return e===`ArrowDown`||e===`ArrowRight`?1:e===`ArrowUp`||e===`ArrowLeft`?-1:0}function u(i){let{label:u,name:d,value:f,defaultValue:p,onValueChange:m,onChange:h,orientation:g=`vertical`,children:_,props:v,...y}=i,b=t.t(`radiogroup`),x=(0,a.useRef)(null),S=(0,a.useRef)(`click`),C=e.a((e,t)=>{m?.(e,t),h?.(e,t)}),[w,T]=e.i({value:f,defaultValue:p,onChange:C}),E=e.a(e=>{let t=l(e.key);if(t===0||e.defaultPrevented)return;let n=c(x.current),r=n.indexOf(document.activeElement);if(r===-1)return;e.preventDefault();let i=n[(r+t+n.length)%n.length];i!==n[r]&&(S.current=`keyboard`,i.focus(),i.click(),S.current=`click`)}),D=`${b}-label`,O=u!=null,k=(0,a.useMemo)(()=>({name:d??b,value:w,select:(e,t)=>T(e,{reason:S.current,event:t})}),[b,d,w,T]);return(0,o.jsx)(s.Provider,{value:k,children:(0,o.jsxs)(n.default,{ref:x,component:`radioGroup`,variant:{horizontal:g===`horizontal`},...y,props:{role:`radiogroup`,"aria-labelledby":O?D:void 0,...v,onKeyDown:E},children:[O&&(0,o.jsx)(r.Span,{component:`radioGroup.label`,id:D,children:u}),_]})})}function d(t){let n=(0,a.useContext)(s),{value:r,...c}=t,l=e.a(e=>n?.select(r,e));return n?(0,o.jsx)(i.default,{name:n.name,value:r,checked:n.value===r,onChange:l,...c}):(0,o.jsx)(i.default,{value:r,...c})}d.displayName=`RadioGroup.Item`;var f=u;f.Item=d,f.displayName=`RadioGroup`,exports.default=f;

package/components/radioGroup.d.ts

@@ -0,0 +1,51 @@
+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 — `onValueChange` 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;
+    /** The option chosen to begin with, when the group owns its value. */
+    defaultValue?: string;
+    /** Fires with the new value and why it changed — `'click'` or `'keyboard'`. A group can also hold
+     * nothing, so the value is `string | undefined`. */
+    onValueChange?: ChangeHandler<string | undefined, RadioGroupReason>;
+    /**
+     * The same callback under its old name. Both fire, so either one can be passed.
+     * @deprecated `onValueChange` is what every other component reports a value change under, and a group
+     * is not an `<input>` — this spelling still works and means the same thing.
+     */
+    onChange?: ChangeHandler<string | undefined, RadioGroupReason>;
+    /** Which way the radios stack. Both arrow pairs navigate either way, as APG specifies. */
+    orientation?: 'vertical' | 'horizontal';
+    /** The options: `RadioGroup.Item` elements, or anything else the group should hold. */
+    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;
+    /** Styles for the wrapping `<label>`: the row's layout, not the radio's own appearance. */
+    labelProps?: BoxProps<'label'>;
+    /** Attributes for the `<input>` itself. `type`, `name` and `checked` are the group's. */
+    props?: BoxTagProps<'input'>;
+    /** The `<input>` element, for a caller that has to focus or measure this option. */
+    ref?: Ref<HTMLInputElement>;
+}
+interface RadioGroupType {
+    <TKey extends keyof ComponentsAndVariants = 'radioGroup'>(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,83 @@
+"use client";
+import { a as e, i as t } from "../behavior.mjs";
+import { t as n } from "../identity.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, onValueChange: _, onChange: v, orientation: y = "vertical", children: b, props: x, ...S } = a, C = n("radiogroup"), w = l(null), T = l("click"), E = e((e, t) => {
+		_?.(e, t), v?.(e, t);
+	}), [D, O] = t({
+		value: h,
+		defaultValue: g,
+		onChange: E
+	}), k = e((e) => {
+		let t = m(e.key);
+		if (t === 0 || e.defaultPrevented) return;
+		let n = p(w.current), r = n.indexOf(document.activeElement);
+		if (r === -1) return;
+		e.preventDefault();
+		let i = n[(r + t + n.length) % n.length];
+		i !== n[r] && (T.current = "keyboard", i.focus(), i.click(), T.current = "click");
+	}), A = `${C}-label`, j = o != null, M = c(() => ({
+		name: s ?? C,
+		value: D,
+		select: (e, t) => O(e, {
+			reason: T.current,
+			event: t
+		})
+	}), [
+		C,
+		s,
+		D,
+		O
+	]);
+	return /* @__PURE__ */ u(f.Provider, {
+		value: M,
+		children: /* @__PURE__ */ d(r, {
+			ref: w,
+			component: "radioGroup",
+			variant: { horizontal: y === "horizontal" },
+			...S,
+			props: {
+				role: "radiogroup",
+				"aria-labelledby": j ? A : void 0,
+				...x,
+				onKeyDown: k
+			},
+			children: [j && /* @__PURE__ */ u(i, {
+				component: "radioGroup.label",
+				id: A,
+				children: o
+			}), b]
+		})
+	});
+}
+function g(t) {
+	let n = s(f), { value: r, ...i } = t, o = e((e) => n?.select(r, e));
+	return n ? /* @__PURE__ */ u(a, {
+		name: n.name,
+		value: r,
+		checked: n.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,51 @@
+import { RefAttributes } from 'react';
+import { BoxProps } from '../box';
+import { ChangeHandler } from '../react/a11y/useControllableState';
+import { BoxStyleProps, ComponentsAndVariants } from '@box-kite/core/types';
+import { DropdownValueReason } from './dropdown';
+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;
+    /** Fires with the selection in whatever shape `value` takes, and why it changed — see `Dropdown`. */
+    onValueChange?: ChangeHandler<TVal | TVal[] | undefined, DropdownValueReason>;
+    /**
+     * The older callback, whose first argument is the option *acted on*. Both fire.
+     * @deprecated `onValueChange` is what every component reports a value change under, and it carries the
+     * reason. This spelling still works.
+     */
+    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.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;