@box-kite/react 2.2.3 → 2.2.5

package/components/dialog.cjs

@@ -1 +1 @@
-"use client";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:`Module`}});const e=require("../platform.cjs"),t=require("../client.cjs"),n=require("../effects.cjs"),r=require("../box.cjs"),i=require("../behavior.cjs"),a=require("../identity.cjs"),o=require("./semantics.cjs");let s=require("react"),c=require("react/jsx-runtime");var l=0;function u(r){let{classNames:i,styleElements:a}=t.i({overflow:`hidden`},!1),o=i.slice(1).join(` `);return n.n(()=>{let t=e.n();if(!(!r||!t||!o))return l+=1,t.classList.add(o),()=>{--l,l===0&&t.classList.remove(o)}},[r,o]),a}var d=(0,s.createContext)(null);function f(e){let t=(0,s.useContext)(d);if(!t)throw Error(`<${e}> must be rendered inside a <Dialog>.`);return t}function p(e){return(0,c.jsx)(h,{role:`dialog`,...e})}function m(e){return(0,c.jsx)(h,{role:`alertdialog`,...e,modal:!0,dismissible:!1})}function h(t){let{role:o,trigger:l,children:f,open:p,defaultOpen:m=!1,onOpenChange:h,label:_,labelledBy:v,describedBy:y,modal:b=!0,dismissible:x=!0,lockScroll:S=b,initialFocus:C,props:w,...T}=t,E=a.t(`dialog`),D=T.id??E,[O,k]=i.i({value:p,defaultValue:m,onChange:h}),[A,j]=(0,s.useState)(null),[M,N]=(0,s.useState)(null),[P,F]=(0,s.useState)(!1),[I,L]=(0,s.useState)({title:0,description:0}),R=u(O&&S);i.n({enabled:O,returnTo:M});let z=(0,s.useCallback)(e=>(L(t=>({...t,[e]:t[e]+1})),()=>L(t=>({...t,[e]:t[e]-1}))),[]),B=(0,s.useMemo)(()=>({titleId:`${D}-title`,descriptionId:`${D}-description`,register:z}),[D,z]);g({dialog:A,isOpen:O,domOpen:P,setDomOpen:F,setOpen:k,modal:b,dismissible:x,triggerElement:M}),n.n(()=>{let t=e.c(C);!O||!t||t.focus()},[O,C]);let V=i.a(e=>{k(e=>!e,{reason:`trigger`,event:e})}),H=(0,s.useMemo)(()=>({ref:N,props:{"aria-expanded":O,"aria-haspopup":`dialog`,"aria-controls":O?D:void 0,onClick:V}}),[D,V,O]),U=T;return(0,c.jsxs)(c.Fragment,{children:[R,l?.(H),(0,c.jsx)(d.Provider,{value:B,children:(0,c.jsx)(r.default,{ref:j,tag:`dialog`,component:`dialog`,...U,id:D,props:{role:o,"aria-label":I.title||v?void 0:_,"aria-labelledby":v??(I.title?B.titleId:void 0),"aria-describedby":y??(I.description?B.descriptionId:void 0),...w},children:f})})]})}function g(t){let{dialog:r,isOpen:a,domOpen:o,setDomOpen:c,setOpen:l,modal:u,dismissible:d,triggerElement:f}=t,p=(0,s.useRef)(`imperative`),m=e.i(),h=d?`any`:`closerequest`;n.n(()=>{!r||a===o||(c(a),a?u?r.showModal():r.show():r.close())},[r,a,o,u,c]),n.n(()=>{if(!r)return;let e=new AbortController;return r.addEventListener(`close`,e=>{c(!1),l(!1,{reason:p.current,event:e}),p.current=`imperative`},{signal:e.signal}),()=>e.abort()},[r,c,l]),n.n(()=>{if(!(!r||!m))return r.setAttribute(`closedby`,h),()=>r.removeAttribute(`closedby`)},[r,m,h]),n.n(()=>{if(!a||!r)return;let t=new AbortController,n=(e,n)=>document.addEventListener(e,n,{signal:t.signal,capture:!0});return n(`keydown`,e=>{e.key===`Escape`&&(p.current=`escape`)}),n(`pointerdown`,t=>{e.l(t,[f])?p.current=`trigger`:!e.l(t,[r])||_(r,t)?p.current=`outside-pointer`:p.current=`imperative`}),()=>t.abort()},[a,r,f]),i.r({enabled:a&&!u&&!m,inside:[r],escapeKey:!0,outsidePointer:!1,onDismiss:(e,t)=>l(!1,{reason:`escape`,event:t})}),n.n(()=>{if(!r||!a||!d||m)return;let t=new AbortController;return document.addEventListener(`pointerdown`,t=>{e.l(t,[f])||e.l(t,[r])&&!_(r,t)||l(!1,{reason:`outside-pointer`,event:t})},{signal:t.signal,capture:!0}),()=>t.abort()},[r,a,d,m,f,l])}function _(e,t){let n=e.getBoundingClientRect();return t.clientX<n.left||t.clientX>n.right||t.clientY<n.top||t.clientY>n.bottom}function v(e){let t=f(`Dialog.Title`);return n.n(()=>t.register(`title`),[t]),(0,c.jsx)(o.H2,{id:t.titleId,component:`dialog.title`,...e})}function y(e){let t=f(`Dialog.Description`);return n.n(()=>t.register(`description`),[t]),(0,c.jsx)(o.P,{id:t.descriptionId,component:`dialog.description`,...e})}v.displayName=`Dialog.Title`,y.displayName=`Dialog.Description`;var b={Title:v,Description:y},x=Object.assign(p,b),S=Object.assign(m,b);p.displayName=`Dialog`,m.displayName=`AlertDialog`,exports.AlertDialog=S,exports.default=x;
+"use client";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:`Module`}});const e=require("../client.cjs"),t=require("../platform.cjs"),n=require("../effects.cjs"),r=require("../box.cjs"),i=require("../behavior.cjs"),a=require("../identity.cjs"),o=require("./semantics.cjs");let s=require("react"),c=require("react/jsx-runtime");var l=(0,s.createContext)(null);function u(e){let t=(0,s.useContext)(l);if(!t)throw Error(`<${e}> must be rendered inside a <Dialog>.`);return t}function d(e){return(0,c.jsx)(p,{role:`dialog`,...e})}function f(e){return(0,c.jsx)(p,{role:`alertdialog`,...e,modal:!0,dismissible:!1})}function p(o){let{role:u,trigger:d,children:f,open:p,defaultOpen:h=!1,onOpenChange:g,label:_,labelledBy:v,describedBy:y,modal:b=!0,dismissible:x=!0,lockScroll:S=b,initialFocus:C,props:w,...T}=o,E=a.t(`dialog`),D=T.id??E,[O,k]=i.i({value:p,defaultValue:h,onChange:g}),[A,j]=(0,s.useState)(null),[M,N]=(0,s.useState)(null),[P,F]=(0,s.useState)(!1),[I,L]=(0,s.useState)({title:0,description:0}),R=e.t(O&&S);i.n({enabled:O,returnTo:M});let z=(0,s.useCallback)(e=>(L(t=>({...t,[e]:t[e]+1})),()=>L(t=>({...t,[e]:t[e]-1}))),[]),B=(0,s.useMemo)(()=>({titleId:`${D}-title`,descriptionId:`${D}-description`,register:z}),[D,z]);m({dialog:A,isOpen:O,domOpen:P,setDomOpen:F,setOpen:k,modal:b,dismissible:x,triggerElement:M}),n.n(()=>{let e=t.l(C);!O||!e||e.focus()},[O,C]);let V=i.a(e=>{k(e=>!e,{reason:`trigger`,event:e})}),H=(0,s.useMemo)(()=>({ref:N,props:{"aria-expanded":O,"aria-haspopup":`dialog`,"aria-controls":O?D:void 0,onClick:V}}),[D,V,O]),U=T;return(0,c.jsxs)(c.Fragment,{children:[R,d?.(H),(0,c.jsx)(l.Provider,{value:B,children:(0,c.jsx)(r.default,{ref:j,tag:`dialog`,component:`dialog`,...U,id:D,props:{role:u,"aria-label":I.title||v?void 0:_,"aria-labelledby":v??(I.title?B.titleId:void 0),"aria-describedby":y??(I.description?B.descriptionId:void 0),...w},children:f})})]})}function m(e){let{dialog:r,isOpen:a,domOpen:o,setDomOpen:c,setOpen:l,modal:u,dismissible:d,triggerElement:f}=e,p=(0,s.useRef)(`imperative`),m=t.a(),g=d?`any`:`closerequest`;n.n(()=>{!r||a===o||(c(a),a?u?r.showModal():r.show():r.close())},[r,a,o,u,c]),n.n(()=>{if(!r)return;let e=new AbortController;return r.addEventListener(`close`,e=>{c(!1),l(!1,{reason:p.current,event:e}),p.current=`imperative`},{signal:e.signal}),()=>e.abort()},[r,c,l]),n.n(()=>{if(!(!r||!m))return r.setAttribute(`closedby`,g),()=>r.removeAttribute(`closedby`)},[r,m,g]),n.n(()=>{if(!a||!r)return;let e=new AbortController,n=(t,n)=>document.addEventListener(t,n,{signal:e.signal,capture:!0});return n(`keydown`,e=>{e.key===`Escape`&&(p.current=`escape`)}),n(`pointerdown`,e=>{t.u(e,[f])?p.current=`trigger`:!t.u(e,[r])||h(r,e)?p.current=`outside-pointer`:p.current=`imperative`}),()=>e.abort()},[a,r,f]),i.r({enabled:a&&!u&&!m,inside:[r],escapeKey:!0,outsidePointer:!1,onDismiss:(e,t)=>l(!1,{reason:`escape`,event:t})}),n.n(()=>{if(!r||!a||!d||m)return;let e=new AbortController;return document.addEventListener(`pointerdown`,e=>{t.u(e,[f])||t.u(e,[r])&&!h(r,e)||l(!1,{reason:`outside-pointer`,event:e})},{signal:e.signal,capture:!0}),()=>e.abort()},[r,a,d,m,f,l])}function h(e,t){let n=e.getBoundingClientRect();return t.clientX<n.left||t.clientX>n.right||t.clientY<n.top||t.clientY>n.bottom}function g(e){let t=u(`Dialog.Title`);return n.n(()=>t.register(`title`),[t]),(0,c.jsx)(o.H2,{id:t.titleId,component:`dialog.title`,...e})}function _(e){let t=u(`Dialog.Description`);return n.n(()=>t.register(`description`),[t]),(0,c.jsx)(o.P,{id:t.descriptionId,component:`dialog.description`,...e})}g.displayName=`Dialog.Title`,_.displayName=`Dialog.Description`;var v={Title:g,Description:_},y=Object.assign(d,v),b=Object.assign(f,v);d.displayName=`Dialog`,f.displayName=`AlertDialog`,exports.AlertDialog=b,exports.default=y;

package/components/dialog.mjs

@@ -1,89 +1,77 @@
 "use client";
-import { c as e, i as t, l as n, n as r } from "../platform.mjs";
-import { i } from "../client.mjs";
-import { n as a } from "../effects.mjs";
-import o from "../box.mjs";
-import { a as s, i as c, n as l, r as u } from "../behavior.mjs";
-import { t as d } from "../identity.mjs";
-import { H2 as f, P as p } from "./semantics.mjs";
-import { createContext as m, useCallback as h, useContext as g, useMemo as _, useRef as v, useState as y } from "react";
-import { Fragment as b, jsx as x, jsxs as S } from "react/jsx-runtime";
-//#region src/react/dialog/useScrollLock.ts
-var C = 0;
-function w(e) {
-	let { classNames: t, styleElements: n } = i({ overflow: "hidden" }, !1), o = t.slice(1).join(" ");
-	return a(() => {
-		let t = r();
-		if (!(!e || !t || !o)) return C += 1, t.classList.add(o), () => {
-			--C, C === 0 && t.classList.remove(o);
-		};
-	}, [e, o]), n;
-}
-//#endregion
+import { t as e } from "../client.mjs";
+import { a as t, l as n, u as r } from "../platform.mjs";
+import { n as i } from "../effects.mjs";
+import a from "../box.mjs";
+import { a as o, i as s, n as c, r as l } from "../behavior.mjs";
+import { t as u } from "../identity.mjs";
+import { H2 as d, P as f } from "./semantics.mjs";
+import { createContext as p, useCallback as m, useContext as h, useMemo as g, useRef as _, useState as v } from "react";
+import { Fragment as y, jsx as b, jsxs as x } from "react/jsx-runtime";
 //#region src/components/dialog.tsx
-var T = m(null);
-function E(e) {
-	let t = g(T);
+var S = p(null);
+function C(e) {
+	let t = h(S);
 	if (!t) throw Error(`<${e}> must be rendered inside a <Dialog>.`);
 	return t;
 }
-function D(e) {
-	return /* @__PURE__ */ x(k, {
+function w(e) {
+	return /* @__PURE__ */ b(E, {
 		role: "dialog",
 		...e
 	});
 }
-function O(e) {
-	return /* @__PURE__ */ x(k, {
+function T(e) {
+	return /* @__PURE__ */ b(E, {
 		role: "alertdialog",
 		...e,
 		modal: !0,
 		dismissible: !1
 	});
 }
-function k(t) {
-	let { role: n, trigger: r, children: i, open: u, defaultOpen: f = !1, onOpenChange: p, label: m, labelledBy: g, describedBy: v, modal: C = !0, dismissible: E = !0, lockScroll: D = C, initialFocus: O, props: k, ...j } = t, M = d("dialog"), N = j.id ?? M, [P, F] = c({
-		value: u,
-		defaultValue: f,
-		onChange: p
-	}), [I, L] = y(null), [R, z] = y(null), [B, V] = y(!1), [H, U] = y({
+function E(t) {
+	let { role: r, trigger: l, children: d, open: f, defaultOpen: p = !1, onOpenChange: h, label: _, labelledBy: C, describedBy: w, modal: T = !0, dismissible: E = !0, lockScroll: O = T, initialFocus: k, props: A, ...j } = t, M = u("dialog"), N = j.id ?? M, [P, F] = s({
+		value: f,
+		defaultValue: p,
+		onChange: h
+	}), [I, L] = v(null), [R, z] = v(null), [B, V] = v(!1), [H, U] = v({
 		title: 0,
 		description: 0
-	}), W = w(P && D);
-	l({
+	}), W = e(P && O);
+	c({
 		enabled: P,
 		returnTo: R
 	});
-	let G = h((e) => (U((t) => ({
+	let G = m((e) => (U((t) => ({
 		...t,
 		[e]: t[e] + 1
 	})), () => U((t) => ({
 		...t,
 		[e]: t[e] - 1
-	}))), []), K = _(() => ({
+	}))), []), K = g(() => ({
 		titleId: `${N}-title`,
 		descriptionId: `${N}-description`,
 		register: G
 	}), [N, G]);
-	A({
+	D({
 		dialog: I,
 		isOpen: P,
 		domOpen: B,
 		setDomOpen: V,
 		setOpen: F,
-		modal: C,
+		modal: T,
 		dismissible: E,
 		triggerElement: R
-	}), a(() => {
-		let t = e(O);
-		!P || !t || t.focus();
-	}, [P, O]);
-	let q = s((e) => {
+	}), i(() => {
+		let e = n(k);
+		!P || !e || e.focus();
+	}, [P, k]);
+	let q = o((e) => {
 		F((e) => !e, {
 			reason: "trigger",
 			event: e
 		});
-	}), J = _(() => ({
+	}), J = g(() => ({
 		ref: z,
 		props: {
 			"aria-expanded": P,
@@ -96,60 +84,60 @@ function k(t) {
 		q,
 		P
 	]), Y = j;
-	return /* @__PURE__ */ S(b, { children: [
+	return /* @__PURE__ */ x(y, { children: [
 		W,
-		r?.(J),
-		/* @__PURE__ */ x(T.Provider, {
+		l?.(J),
+		/* @__PURE__ */ b(S.Provider, {
 			value: K,
-			children: /* @__PURE__ */ x(o, {
+			children: /* @__PURE__ */ b(a, {
 				ref: L,
 				tag: "dialog",
 				component: "dialog",
 				...Y,
 				id: N,
 				props: {
-					role: n,
-					"aria-label": H.title || g ? void 0 : m,
-					"aria-labelledby": g ?? (H.title ? K.titleId : void 0),
-					"aria-describedby": v ?? (H.description ? K.descriptionId : void 0),
-					...k
+					role: r,
+					"aria-label": H.title || C ? void 0 : _,
+					"aria-labelledby": C ?? (H.title ? K.titleId : void 0),
+					"aria-describedby": w ?? (H.description ? K.descriptionId : void 0),
+					...A
 				},
-				children: i
+				children: d
 			})
 		})
 	] });
 }
-function A(e) {
-	let { dialog: r, isOpen: i, domOpen: o, setDomOpen: s, setOpen: c, modal: l, dismissible: d, triggerElement: f } = e, p = v("imperative"), m = t(), h = d ? "any" : "closerequest";
-	a(() => {
-		!r || i === o || (s(i), i ? l ? r.showModal() : r.show() : r.close());
+function D(e) {
+	let { dialog: n, isOpen: a, domOpen: o, setDomOpen: s, setOpen: c, modal: u, dismissible: d, triggerElement: f } = e, p = _("imperative"), m = t(), h = d ? "any" : "closerequest";
+	i(() => {
+		!n || a === o || (s(a), a ? u ? n.showModal() : n.show() : n.close());
 	}, [
-		r,
-		i,
+		n,
+		a,
 		o,
-		l,
+		u,
 		s
-	]), a(() => {
-		if (!r) return;
+	]), i(() => {
+		if (!n) return;
 		let e = new AbortController();
-		return r.addEventListener("close", (e) => {
+		return n.addEventListener("close", (e) => {
 			s(!1), c(!1, {
 				reason: p.current,
 				event: e
 			}), p.current = "imperative";
 		}, { signal: e.signal }), () => e.abort();
 	}, [
-		r,
+		n,
 		s,
 		c
-	]), a(() => {
-		if (!(!r || !m)) return r.setAttribute("closedby", h), () => r.removeAttribute("closedby");
+	]), i(() => {
+		if (!(!n || !m)) return n.setAttribute("closedby", h), () => n.removeAttribute("closedby");
 	}, [
-		r,
+		n,
 		m,
 		h
-	]), a(() => {
-		if (!i || !r) return;
+	]), i(() => {
+		if (!a || !n) return;
 		let e = new AbortController(), t = (t, n) => document.addEventListener(t, n, {
 			signal: e.signal,
 			capture: !0
@@ -157,26 +145,26 @@ function A(e) {
 		return t("keydown", (e) => {
 			e.key === "Escape" && (p.current = "escape");
 		}), t("pointerdown", (e) => {
-			n(e, [f]) ? p.current = "trigger" : !n(e, [r]) || j(r, e) ? p.current = "outside-pointer" : p.current = "imperative";
+			r(e, [f]) ? p.current = "trigger" : !r(e, [n]) || O(n, e) ? p.current = "outside-pointer" : p.current = "imperative";
 		}), () => e.abort();
 	}, [
-		i,
-		r,
+		a,
+		n,
 		f
-	]), u({
-		enabled: i && !l && !m,
-		inside: [r],
+	]), l({
+		enabled: a && !u && !m,
+		inside: [n],
 		escapeKey: !0,
 		outsidePointer: !1,
 		onDismiss: (e, t) => c(!1, {
 			reason: "escape",
 			event: t
 		})
-	}), a(() => {
-		if (!r || !i || !d || m) return;
+	}), i(() => {
+		if (!n || !a || !d || m) return;
 		let e = new AbortController();
 		return document.addEventListener("pointerdown", (e) => {
-			n(e, [f]) || n(e, [r]) && !j(r, e) || c(!1, {
+			r(e, [f]) || r(e, [n]) && !O(n, e) || c(!1, {
 				reason: "outside-pointer",
 				event: e
 			});
@@ -185,39 +173,39 @@ function A(e) {
 			capture: !0
 		}), () => e.abort();
 	}, [
-		r,
-		i,
+		n,
+		a,
 		d,
 		m,
 		f,
 		c
 	]);
 }
-function j(e, t) {
+function O(e, t) {
 	let n = e.getBoundingClientRect();
 	return t.clientX < n.left || t.clientX > n.right || t.clientY < n.top || t.clientY > n.bottom;
 }
-function M(e) {
-	let t = E("Dialog.Title");
-	return a(() => t.register("title"), [t]), /* @__PURE__ */ x(f, {
+function k(e) {
+	let t = C("Dialog.Title");
+	return i(() => t.register("title"), [t]), /* @__PURE__ */ b(d, {
 		id: t.titleId,
 		component: "dialog.title",
 		...e
 	});
 }
-function N(e) {
-	let t = E("Dialog.Description");
-	return a(() => t.register("description"), [t]), /* @__PURE__ */ x(p, {
+function A(e) {
+	let t = C("Dialog.Description");
+	return i(() => t.register("description"), [t]), /* @__PURE__ */ b(f, {
 		id: t.descriptionId,
 		component: "dialog.description",
 		...e
 	});
 }
-M.displayName = "Dialog.Title", N.displayName = "Dialog.Description";
-var P = {
-	Title: M,
-	Description: N
-}, F = Object.assign(D, P), I = Object.assign(O, P);
-D.displayName = "Dialog", O.displayName = "AlertDialog";
+k.displayName = "Dialog.Title", A.displayName = "Dialog.Description";
+var j = {
+	Title: k,
+	Description: A
+}, M = Object.assign(w, j), N = Object.assign(T, j);
+w.displayName = "Dialog", T.displayName = "AlertDialog";
 //#endregion
-export { I as AlertDialog, F as default };
+export { N as AlertDialog, M as default };

package/components/list/listItemParts.d.ts

@@ -0,0 +1,9 @@
+import { BoxComponentStyles } from '@box-kite/core/types';
+/** How an item's spacing is set: `md` by default, `sm` for a dense list, `lg` for one with room to breathe. */
+export type ListItemSize = 'sm' | 'md' | 'lg';
+export declare const ITEM_FRAME: BoxComponentStyles;
+/** The row an item lays its parts out in. */
+export declare const ITEM_ROW: BoxComponentStyles;
+export declare const ITEM_SIZES: Record<ListItemSize, BoxComponentStyles>;
+/** A part's defaults under the props it was given. */
+export declare function withDefaults<T extends object>(defaults: BoxComponentStyles, props: T): T;

package/components/list.cjs

@@ -0,0 +1 @@
+Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:`Module`}});const e=require("../react-shared.cjs"),t=require("./svg.cjs");let n=require("@box-kite/core"),r=require("react/jsx-runtime"),i=require("@box-kite/react");var a={position:`relative`,css:{borderRadius:`var(--list-item-radius, 0)`},before:{position:`absolute`,top:0,insetEnd:0,css:{insetInlineStart:`var(--list-divider-inset, 0px)`,height:`1px`}},after:{position:`absolute`,inset:0,pointerEvents:`none`,css:{border:`var(--list-item-frame, none)`,borderRadius:`inherit`}},nth:{first:{before:{css:{display:`var(--list-first-divider, none)`}}}}},o={display:`flex`,ai:`center`,gap:3,px:4,py:3,minHeight:14},s={sm:{gap:2,py:2,minHeight:11},md:{},lg:{gap:4,py:4,minHeight:18}},c=[`css`,`before`,`after`,`nth`];function l(e,t){let r={...e,...t},i=e;for(let e of c){let a=t[e];i[e]&&a&&(r[e]=(0,n.mergeDeep)(i[e],a))}return r}var u=[`h1`,`h2`,`h3`,`h4`,`h5`,`h6`],d={fontVariantNumeric:`tabular-nums`},f={display:`flex`,ai:`center`,jc:`center`,flexShrink:0},p={icon:{width:10,height:10,borderRadius:2},avatar:{width:10,height:10,borderRadius:999,overflow:`hidden`,fontSize:14,fontWeight:600},image:{width:16,height:16,borderRadius:2,overflow:`hidden`}},m={display:`flex`,ai:`baseline`,jc:`space-between`,gap:2,minWidth:0},h={flexWrap:`wrap`,jc:`start`,rowGap:1},g={fontSize:14,lineHeight:20},_={"list.title":{display:`block`,minWidth:0,fontSize:16,lineHeight:22,fontWeight:500},"list.description":{display:`block`,minWidth:0,fontSize:14,lineHeight:20},"list.overline":{display:`block`,minWidth:0,fontSize:12,lineHeight:16,fontWeight:500}},v={color:`currentColor`,textDecoration:`none`,cursor:`pointer`,css:{display:`inherit`,font:`inherit`,textAlign:`inherit`,overflow:`inherit`,textOverflow:`inherit`,WebkitLineClamp:`inherit`,WebkitBoxOrient:`inherit`},after:{position:`absolute`,inset:0,css:{borderRadius:`var(--list-item-radius, 0)`}}},y={1:{overflow:`hidden`,textOverflow:`ellipsis`,whiteSpace:`nowrap`},2:{overflow:`hidden`,css:{display:`-webkit-box`,WebkitBoxOrient:`vertical`,WebkitLineClamp:2}},3:{overflow:`hidden`,css:{display:`-webkit-box`,WebkitBoxOrient:`vertical`,WebkitLineClamp:3}}},b={content:{display:`flex`,d:`column`,gap:.5,flex1:!0,minWidth:0},meta:{flexShrink:0,fontSize:13,lineHeight:18,whiteSpace:`nowrap`,css:d},end:{display:`flex`,d:`column`,ai:`end`,gap:.5,flexShrink:0,maxWidth:`1/2`,textAlign:`end`,css:d},actions:{display:`flex`,ai:`center`,gap:1,flexShrink:0,position:`relative`,zIndex:1},fields:{display:`grid`,columnGap:4,rowGap:2,mt:1,css:{gridTemplateColumns:`repeat(auto-fill, minmax(min(8rem, 100%), 1fr))`}}};function x(e,t){let{props:n,...r}=e;return(0,i.useBoxElement)({tag:`ul`,component:`list`,...r,props:{role:`list`,...n}},t)}function S(e,t){let{size:n=`md`,wrap:c=!1,selected:u=!1,chevron:d=!1,variant:f,children:p,...m}=e;return(0,i.useBoxElement)({tag:`li`,component:`list.item`,...l({...a,...o,...s[n],...c?{flexWrap:`wrap`}:{}},m),variant:[f,{selected:u}],children:d?(0,r.jsxs)(r.Fragment,{children:[p,(0,r.jsx)(w,{})]}):p},t)}function C(e,n){return(0,i.useBoxElement)({tag:`span`,component:`list.muted`,display:`flex`,flexShrink:0,alignSelf:`center`,rtl:{flip:`xAxis`},...e,props:{"aria-hidden":!0,...e.props},children:(0,r.jsx)(t.Svg,{viewBox:`0 0 16 16`,width:`1rem`,fill:`none`,stroke:`currentColor`,strokeWidth:1.75,children:(0,r.jsx)(t.Path,{d:`M6 3.5 10.5 8 6 12.5`,strokeLinecap:`round`,strokeLinejoin:`round`})})},n)}var w=e.f(C,`List.Chevron`);function T(e,t){let r=(0,n.classNames)(e.variant).find(e=>e in p);return(0,i.useBoxElement)({component:`list.media`,...f,...r?p[r]:{},...e},t)}function E(e,t){let{wrap:n=!1,secondary:r=!1,...a}=e;return(0,i.useBoxElement)({...r?{component:`list.muted`,...g}:{},...m,...n?h:{},...a},t)}function D(t,n){let r=t!==`list.title`;return e.f((e,n)=>{let{lines:a,...o}=e,s=a?l(_[t],y[a]):_[t];return(0,i.useBoxElement)({tag:`span`,...r?{component:`list.muted`}:{},...l(s,o)},n)},n)}function O(e,t){let{props:n,tag:r,onClick:a,...o}=e,s=r??(n?.href===void 0?n?.htmlFor===void 0?`button`:`label`:`a`);return(0,i.useBoxElement)({tag:s,component:`list.action`,...l(v,o),props:{...s===`button`?{type:`button`}:{},"data-list-action":``,...n,...a?{onClick:a}:{}}},t)}function k(e,t){let{label:n,children:a,...o}=e;return(0,i.useBoxElement)({minWidth:0,...o,children:(0,r.jsxs)(r.Fragment,{children:[(0,r.jsx)(A,{children:n}),(0,r.jsx)(j,{children:a})]})},t)}function A({children:e}){return(0,i.useBoxElement)({tag:`dt`,component:`list.muted`,fontSize:12,lineHeight:16,children:e})}function j({children:e}){return(0,i.useBoxElement)({tag:`dd`,minWidth:0,fontSize:14,lineHeight:20,css:{overflowWrap:`anywhere`,...d},children:e})}function M(e,t){let{label:n,level:a,sticky:o=!1,children:s,...c}=e;return(0,i.useBoxElement)({tag:`li`,...c,children:(0,r.jsxs)(r.Fragment,{children:[(0,r.jsx)(N,{level:a,sticky:o,children:n}),(0,r.jsx)(P,{children:s})]})},t)}function N({level:e,sticky:t,children:n}){return(0,i.useBoxElement)({tag:e?u[e-1]:`div`,component:`list.label`,px:4,py:1.5,fontSize:13,lineHeight:18,fontWeight:600,...t?{position:`sticky`,zIndex:2,css:{top:`var(--list-sticky-top, 0)`}}:{},children:n})}function P({children:e}){return(0,i.useBoxElement)({tag:`ul`,props:{role:`list`},children:e})}function F(t,n,r,a=!1){return e.f((e,r)=>(0,i.useBoxElement)({tag:t,...a?{component:`list.muted`}:{},...l(n,e)},r),r)}var I=e.f(T,`List.Media`),L=F(`div`,b.content,`List.Content`),R=D(`list.overline`,`List.Overline`),z=D(`list.title`,`List.Title`),B=D(`list.description`,`List.Description`),V=F(`span`,b.meta,`List.Meta`,!0),H=F(`div`,b.end,`List.End`),U=F(`div`,b.actions,`List.Actions`),W=F(`dl`,b.fields,`List.Fields`),G=e.f(x,`List`);G.Item=e.f(S,`List.Item`),G.Media=I,G.Content=L,G.Row=e.f(E,`List.Row`),G.Overline=R,G.Title=z,G.Description=B,G.Meta=V,G.End=H,G.Actions=U,G.Action=e.f(O,`List.Action`),G.Fields=W,G.Field=e.f(k,`List.Field`),G.Group=e.f(M,`List.Group`),G.Chevron=w,exports.default=G,exports.i=l,exports.n=o,exports.r=s,exports.t=a;

package/components/list.d.ts

@@ -0,0 +1,118 @@
+import { RefAttributes } from 'react';
+import { BoxProps, BoxTagProps } from '../box';
+import { ExtractElementFromTag } from '../react/reactTypes';
+import { ComponentsAndVariants } from '@box-kite/core/types';
+import { ListItemSize } from './list/listItemParts';
+export type { ListItemSize };
+/** How many lines a text part runs to: `1` ends in an ellipsis, `2` and `3` are clamped. Unset, it wraps. */
+export type ListLines = 1 | 2 | 3;
+/** Which heading a group's label is. It says where the group sits in the page's outline, nothing more. */
+export type ListGroupLevel = 1 | 2 | 3 | 4 | 5 | 6;
+type Part<TTag extends keyof React.JSX.IntrinsicElements, TKey extends keyof ComponentsAndVariants> = BoxProps<TTag, TKey> & RefAttributes<ExtractElementFromTag<TTag>>;
+export interface ListProps<TKey extends keyof ComponentsAndVariants = 'list'> extends Omit<BoxProps<'ul', TKey>, 'tag'> {
+    /** The items: `List.Item`s, and `List.Group`s for sections. */
+    children?: React.ReactNode;
+    /** `ol` when the order means something — steps, a ranking. Default `ul`. */
+    tag?: 'ul' | 'ol';
+}
+export interface ListItemProps<TKey extends keyof ComponentsAndVariants = 'list.item'> extends BoxProps<'li', TKey> {
+    /** The item's parts: `List.Media`, `List.Content`, `List.End`, `List.Actions` — or anything at all, in one row. */
+    children?: React.ReactNode;
+    /** The item's spacing. Default `md`, at least 56px tall; `sm` is 44px, still a finger's width; `lg` is 72px. */
+    size?: ListItemSize;
+    /** Lets the item's parts wrap onto a second line when they do not fit, instead of squeezing. */
+    wrap?: boolean;
+    /** Tints the item as chosen. The state a reader hears belongs on the control that chose it — a checkbox, `aria-pressed`. */
+    selected?: boolean;
+    /** Ends the item with a chevron: pressing it goes somewhere with more. Decoration, so `aria-hidden`. */
+    chevron?: boolean;
+}
+/** A slot or a plain part: every Box prop, and what goes in it. `List.Media` takes `variant` `icon`, `avatar` or `image`. */
+export interface ListPartProps<TKey extends keyof ComponentsAndVariants = never> extends BoxProps<'div', TKey> {
+    /** What goes in it. */
+    children?: React.ReactNode;
+}
+export interface ListRowProps<TKey extends keyof ComponentsAndVariants = never> extends BoxProps<'div', TKey> {
+    /** What sits side by side: a title and its time, a status and a count. The first takes the room, the last sits at the end. */
+    children?: React.ReactNode;
+    /** Lets the row's parts wrap onto a new line — a set of tags — instead of pushing the last to the end. */
+    wrap?: boolean;
+    /** The quieter line under the main one: smaller and muted. */
+    secondary?: boolean;
+}
+export interface ListTextProps<TKey extends keyof ComponentsAndVariants = never> extends BoxProps<'span', TKey> {
+    /** The text. */
+    children?: React.ReactNode;
+    /** How many lines it runs to before it stops: `1` ends in an ellipsis, `2` and `3` are clamped. Unset, it wraps. */
+    lines?: ListLines;
+}
+/** A `List.Title`: the item's name, and where its `List.Action` goes. */
+export type ListTitleProps<TKey extends keyof ComponentsAndVariants = never> = ListTextProps<TKey>;
+/** A `List.Description`: muted supporting text under the title. */
+export type ListDescriptionProps<TKey extends keyof ComponentsAndVariants = never> = ListTextProps<TKey>;
+/** A `List.Overline`: a small line above the title — an id, a date, a category. */
+export type ListOverlineProps<TKey extends keyof ComponentsAndVariants = never> = ListTextProps<TKey>;
+/** A button's attributes, plus the two that turn the action into a link or a label. */
+export type ListActionTagProps = BoxTagProps<'button'> & Pick<React.AnchorHTMLAttributes<HTMLAnchorElement>, 'href' | 'target' | 'rel' | 'download' | 'hrefLang' | 'referrerPolicy'> & Pick<React.LabelHTMLAttributes<HTMLLabelElement>, 'htmlFor'>;
+export interface ListActionProps<TKey extends keyof ComponentsAndVariants = 'list.action'> extends Omit<BoxProps<'button', TKey>, 'props' | 'tag'> {
+    /** What the action is called: the item's title, and nothing else, since it is the name a reader hears. */
+    children?: React.ReactNode;
+    /** The element's attributes. An `href` makes it an `<a>`, an `htmlFor` a `<label>`; neither, a `<button type="button">`. */
+    props?: ListActionTagProps;
+    /** The element, when what `props` holds does not already say: `a` with no `href` is a placeholder link. */
+    tag?: 'button' | 'a' | 'label';
+    /** Fires on a press anywhere on the item — and on Enter, and on Space for a button. */
+    onClick?: (event: React.MouseEvent<HTMLElement>) => void;
+}
+export interface ListFieldProps<TKey extends keyof ComponentsAndVariants = never> extends BoxProps<'div', TKey> {
+    /** What the value is: the `<dt>`. */
+    label: React.ReactNode;
+    /** The value: the `<dd>`. */
+    children?: React.ReactNode;
+}
+export interface ListGroupProps<TKey extends keyof ComponentsAndVariants = never> extends BoxProps<'li', TKey> {
+    /** What the items have in common: "Today", "A", "Unread". */
+    label: React.ReactNode;
+    /** The group's items. */
+    children?: React.ReactNode;
+    /** Makes the label a heading of this level, so a screen reader can jump between groups. Unset, it is plain text. */
+    level?: ListGroupLevel;
+    /** Keeps the label at the top of the screen while its items scroll under it, until the next group's pushes it off. */
+    sticky?: boolean;
+}
+interface ListType {
+    <TKey extends keyof ComponentsAndVariants = 'list'>(props: ListProps<TKey> & RefAttributes<HTMLUListElement>): React.ReactNode;
+    /** One thing in the list: a flex row of `Media`, `Content`, `End` and `Actions`. */
+    Item: <TKey extends keyof ComponentsAndVariants = 'list.item'>(props: ListItemProps<TKey> & RefAttributes<HTMLLIElement>) => React.ReactNode;
+    /** The leading slot: an icon, an avatar, a thumbnail. `variant` is `icon`, `avatar` or `image`. */
+    Media: <TKey extends keyof ComponentsAndVariants = 'list.media'>(props: Part<'div', TKey>) => React.ReactNode;
+    /** The middle, taking the room: a column of rows and text. */
+    Content: <TKey extends keyof ComponentsAndVariants = never>(props: Part<'div', TKey>) => React.ReactNode;
+    /** A row of parts inside the content — the main line, or a `secondary` one. */
+    Row: <TKey extends keyof ComponentsAndVariants = never>(props: ListRowProps<TKey> & RefAttributes<HTMLDivElement>) => React.ReactNode;
+    /** A small line above the title. */
+    Overline: <TKey extends keyof ComponentsAndVariants = never>(props: ListOverlineProps<TKey> & RefAttributes<HTMLSpanElement>) => React.ReactNode;
+    /** The item's name. */
+    Title: <TKey extends keyof ComponentsAndVariants = never>(props: ListTitleProps<TKey> & RefAttributes<HTMLSpanElement>) => React.ReactNode;
+    /** Muted supporting text. */
+    Description: <TKey extends keyof ComponentsAndVariants = never>(props: ListDescriptionProps<TKey> & RefAttributes<HTMLSpanElement>) => React.ReactNode;
+    /** A small value that never wraps: a time, a count. */
+    Meta: <TKey extends keyof ComponentsAndVariants = never>(props: Part<'span', TKey>) => React.ReactNode;
+    /** The trailing slot: a value and its label, stacked and aligned to the end. */
+    End: <TKey extends keyof ComponentsAndVariants = never>(props: Part<'div', TKey>) => React.ReactNode;
+    /** Controls of the item's own, above the action that covers it. */
+    Actions: <TKey extends keyof ComponentsAndVariants = never>(props: Part<'div', TKey>) => React.ReactNode;
+    /** The item's primary action, covering the whole item. */
+    Action: <TKey extends keyof ComponentsAndVariants = 'list.action'>(props: ListActionProps<TKey> & RefAttributes<HTMLButtonElement>) => React.ReactNode;
+    /** A `<dl>` of `List.Field`s, as many to a line as fit. */
+    Fields: <TKey extends keyof ComponentsAndVariants = never>(props: Part<'dl', TKey>) => React.ReactNode;
+    /** One labelled value. */
+    Field: <TKey extends keyof ComponentsAndVariants = never>(props: ListFieldProps<TKey> & RefAttributes<HTMLDivElement>) => React.ReactNode;
+    /** The chevron `chevron` ends an item with, for an item drawn by something else — a `SwipeItem` has the prop too. */
+    Chevron: <TKey extends keyof ComponentsAndVariants = never>(props: Part<'span', TKey>) => React.ReactNode;
+    /** A labelled section of items. */
+    Group: <TKey extends keyof ComponentsAndVariants = never>(props: ListGroupProps<TKey> & RefAttributes<HTMLLIElement>) => React.ReactNode;
+    displayName?: string;
+}
+declare const List: ListType;
+export default List;