@box-kite/react 0.0.1 → 1.0.0

package/components/dropdown/dropdownContext.d.ts

@@ -0,0 +1,44 @@
+import { BoxProps } from '../../box';
+import { ClassNameType } from '@box-kite/core';
+export interface DropdownItemProps<TVal = unknown> extends BoxProps {
+    value: TVal;
+    onClick?(e: React.MouseEvent): void;
+}
+/**
+ * A row of the open listbox, in the order the keyboard walks them. "Clear" and "Select all" are rows
+ * rather than decorations beside the list, so they carry `role="option"` too. One array up front is what
+ * makes an index mean the same thing to the roving-focus hook, to `aria-activedescendant` and to the markup.
+ */
+export type DropdownRow<TVal = unknown> = {
+    kind: 'unselect';
+    element: React.ReactElement<{
+        props?: object;
+    }>;
+} | {
+    kind: 'selectAll';
+    element: React.ReactElement<{
+        props?: object;
+    }>;
+} | {
+    kind: 'item';
+    element: React.ReactElement<DropdownItemProps<TVal>>;
+};
+export interface DropdownContextValue<TVal = unknown> {
+    valueToUse: TVal[];
+    multiple: boolean;
+    variant: ClassNameType;
+    showCheckbox: boolean;
+    /** Choose the row at `index` — the one path a click and an Enter both take. */
+    selectRow: (index: number, event: React.SyntheticEvent) => void;
+    /** The id `aria-activedescendant` names when the keyboard is on the row at `index`. */
+    optionId: (index: number) => string;
+    /** The row the keyboard is on, or `-1` when it is on none of them. */
+    activeIndex: number;
+    /** Collects a row's element, so the active one can be named and scrolled to. */
+    rowRef: (index: number) => (element: HTMLElement | null) => void;
+    /** Whether a row is a disabled option: skipped by the arrows, and inert to a click. */
+    isRowDisabled: (index: number) => boolean;
+}
+declare const DropdownContext: import('react').Context<DropdownContextValue<any> | null>;
+export declare function useDropdownContext<TVal>(): DropdownContextValue<TVal>;
+export default DropdownContext;

package/components/dropdown/dropdownItems.d.ts

@@ -0,0 +1,22 @@
+import { Ref } from 'react';
+import { BoxStyleProps } from '@box-kite/core/types';
+import { PresenceHandle } from '../presence';
+import { DropdownRow } from './dropdownContext';
+interface Props<TVal> {
+    /** Which way the popup is going, from the `<Presence>` that owns its mount. */
+    presence: PresenceHandle;
+    /** Every row the listbox shows, already in keyboard order. */
+    rows: DropdownRow<TVal>[];
+    emptyItem?: React.ReactElement;
+    /** The shell the popup hangs off: a button in select-only mode, the field's wrapper otherwise. */
+    triggerRef: React.RefObject<HTMLElement | null>;
+    /** The layer element — what the dismissal hook treats as *inside* the popup. */
+    popupRef: Ref<HTMLDivElement>;
+    /** `aria-controls` on the trigger names this. */
+    listboxId: string;
+    /** What names the listbox: the dropdown's own label when it has one, else its trigger. */
+    labelledBy: string;
+    itemsProps?: BoxStyleProps;
+}
+export default function DropdownItems<TVal>(props: Props<TVal>): import("react").JSX.Element;
+export {};

package/components/dropdown/dropdownRowRenderer.d.ts

@@ -0,0 +1,8 @@
+import { DropdownRow } from './dropdownContext';
+interface Props<TVal> {
+    row: DropdownRow<TVal>;
+    /** Position in the listbox — what `aria-activedescendant`, the arrow keys and the ref share. */
+    index: number;
+}
+declare const DropdownRowRenderer: <TVal>(props: Props<TVal>) => React.ReactNode;
+export default DropdownRowRenderer;

package/components/dropdown/dropdownSearch.d.ts

@@ -0,0 +1,21 @@
+interface Props {
+    /** The combobox's own id. `aria-labelledby` on the listbox falls back to it. */
+    id: string;
+    /** What the field shows: the query while one is being typed, the value the rest of the time. */
+    value: string;
+    onValueChange: (value: string) => void;
+    /** Only while the listbox is open — a closed field shows the value, not an invitation to type. */
+    placeholder?: string;
+    inputRef: React.RefObject<HTMLInputElement | null>;
+    /** Everything that makes this input the combobox: the ARIA, the keys, the consumer's own props. */
+    comboboxProps: Record<string, unknown>;
+    /** A press on the field opens the listbox. It never closes it — the caret has to be placeable. */
+    onOpen: (event: React.MouseEvent) => void;
+}
+/**
+ * The textbox half of the APG editable combobox, and it *is* the combobox: the role, the ARIA and the
+ * consumer's props live on this input rather than on a wrapper, which is what stops one focusable element
+ * containing another (bug #47). Pattern: https://www.w3.org/WAI/ARIA/apg/patterns/combobox/
+ */
+export default function DropdownSearch({ id, value, onValueChange, placeholder, inputRef, comboboxProps, onOpen }: Props): import("react").JSX.Element;
+export {};

package/components/dropdown/utils.d.ts

@@ -0,0 +1 @@
+export declare function searchItemText(item: React.ReactElement): string;

package/components/dropdown.cjs

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

package/components/dropdown.d.ts

@@ -0,0 +1,47 @@
+import { RefAttributes } from 'react';
+import { BoxProps } from '../box';
+import { BoxStyleProps, ComponentsAndVariants } from '@box-kite/core/types';
+import { DropdownItemProps } from './dropdown/dropdownContext';
+interface Props<TVal, TKey extends keyof ComponentsAndVariants = 'dropdown'> extends Omit<BoxProps<'button', TKey>, 'ref' | 'tag'> {
+    name?: string;
+    defaultValue?: TVal | TVal[];
+    value?: TVal | TVal[];
+    multiple?: boolean;
+    /**
+     * Turn the control into the APG *editable* combobox: a text field that filters the listbox, and a
+     * different pattern rather than a decoration — the field carries the role, the ARIA and your `props`.
+     * Printable keys type instead of jumping, Home/End and left/right move the caret, and Escape closes
+     * the listbox before it clears the field.
+     */
+    isSearchable?: boolean;
+    searchPlaceholder?: string;
+    hideIcon?: boolean;
+    /** Show checkbox for each item in multiple selection mode */
+    showCheckbox?: boolean;
+    /**
+     * The dropdown's name, rendered above it and pointed at by `aria-labelledby`. A combobox is not named by
+     * what it contains — accname does not read a combobox at all, and the trigger text is its *value* — so
+     * without this (or your own `aria-label`) it has no accessible name.
+     */
+    label?: React.ReactNode;
+    /** Styles for the wrapper the label and the trigger share. Only rendered when there is a label. */
+    labelProps?: BoxProps<'div'>;
+    /** BoxProps applied to the opened items container (dropdown.items) */
+    itemsProps?: BoxStyleProps;
+    /** BoxProps applied to the chevron icon container (dropdown.icon) */
+    iconProps?: BoxStyleProps;
+    onChange?: (value: TVal | undefined, values: TVal[]) => void;
+}
+interface DropdownDisplayProps<TVal> extends Omit<BoxProps, 'children'> {
+    children: ((selectedValues: TVal[], isOpen: boolean) => React.ReactNode) | React.ReactNode;
+}
+interface DropdownType {
+    <TVal>(props: Props<TVal> & RefAttributes<HTMLInputElement>): React.ReactNode;
+    Item: <TVal>(props: DropdownItemProps<TVal>) => React.ReactNode;
+    Unselect: (props: BoxProps) => React.ReactNode;
+    SelectAll: (props: BoxProps) => React.ReactNode;
+    EmptyItem: (props: BoxProps) => React.ReactNode;
+    Display: <TVal>(props: DropdownDisplayProps<TVal>) => React.ReactNode;
+}
+declare const Dropdown: DropdownType;
+export default Dropdown;

package/components/dropdown.mjs

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