@box-kite/react 2.2.4 → 2.2.6

package/components/dialog.mjs

@@ -1,6 +1,6 @@
 "use client";
-import { c as e, i as t, l as n, n as r } from "../platform.mjs";
-import { i } from "../client.mjs";
+import { i as e } from "../client.mjs";
+import { a as t, l as n, n as r, u as i } from "../platform.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";
@@ -10,14 +10,14 @@ import { createContext as m, useCallback as h, useContext as g, useMemo as _, us
 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(" ");
+function w(t) {
+	let { classNames: n, styleElements: i } = e({ overflow: "hidden" }, !1), o = n.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);
+		let e = r();
+		if (!(!t || !e || !o)) return C += 1, e.classList.add(o), () => {
+			--C, C === 0 && e.classList.remove(o);
 		};
-	}, [e, o]), n;
+	}, [t, o]), i;
 }
 //#endregion
 //#region src/components/dialog.tsx
@@ -41,8 +41,8 @@ function O(e) {
 		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({
+function k(e) {
+	let { role: t, 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 } = e, M = d("dialog"), N = j.id ?? M, [P, F] = c({
 		value: u,
 		defaultValue: f,
 		onChange: p
@@ -75,8 +75,8 @@ function k(t) {
 		dismissible: E,
 		triggerElement: R
 	}), a(() => {
-		let t = e(O);
-		!P || !t || t.focus();
+		let e = n(O);
+		!P || !e || e.focus();
 	}, [P, O]);
 	let q = s((e) => {
 		F((e) => !e, {
@@ -108,7 +108,7 @@ function k(t) {
 				...Y,
 				id: N,
 				props: {
-					role: n,
+					role: t,
 					"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),
@@ -120,36 +120,36 @@ function k(t) {
 	] });
 }
 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";
+	let { dialog: n, isOpen: r, 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());
+		!n || r === o || (s(r), r ? l ? n.showModal() : n.show() : n.close());
 	}, [
+		n,
 		r,
-		i,
 		o,
 		l,
 		s
 	]), a(() => {
-		if (!r) return;
+		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");
+		if (!(!n || !m)) return n.setAttribute("closedby", h), () => n.removeAttribute("closedby");
 	}, [
-		r,
+		n,
 		m,
 		h
 	]), a(() => {
-		if (!i || !r) return;
+		if (!r || !n) return;
 		let e = new AbortController(), t = (t, n) => document.addEventListener(t, n, {
 			signal: e.signal,
 			capture: !0
@@ -157,15 +157,15 @@ 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";
+			i(e, [f]) ? p.current = "trigger" : !i(e, [n]) || j(n, e) ? p.current = "outside-pointer" : p.current = "imperative";
 		}), () => e.abort();
 	}, [
-		i,
 		r,
+		n,
 		f
 	]), u({
-		enabled: i && !l && !m,
-		inside: [r],
+		enabled: r && !l && !m,
+		inside: [n],
 		escapeKey: !0,
 		outsidePointer: !1,
 		onDismiss: (e, t) => c(!1, {
@@ -173,10 +173,10 @@ function A(e) {
 			event: t
 		})
 	}), a(() => {
-		if (!r || !i || !d || m) return;
+		if (!n || !r || !d || m) return;
 		let e = new AbortController();
 		return document.addEventListener("pointerdown", (e) => {
-			n(e, [f]) || n(e, [r]) && !j(r, e) || c(!1, {
+			i(e, [f]) || i(e, [n]) && !j(n, e) || c(!1, {
 				reason: "outside-pointer",
 				event: e
 			});
@@ -185,8 +185,8 @@ function A(e) {
 			capture: !0
 		}), () => e.abort();
 	}, [
+		n,
 		r,
-		i,
 		d,
 		m,
 		f,

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;

package/components/list.mjs

@@ -0,0 +1,391 @@
+import { f as e } from "../react-shared.mjs";
+import { Path as t, Svg as n } from "./svg.mjs";
+import { classNames as r, mergeDeep as i } from "@box-kite/core";
+import { Fragment as a, jsx as o, jsxs as s } from "react/jsx-runtime";
+import { useBoxElement as c } from "@box-kite/react";
+//#region src/components/list/listItemParts.ts
+var l = {
+	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)" } } } }
+}, u = {
+	display: "flex",
+	ai: "center",
+	gap: 3,
+	px: 4,
+	py: 3,
+	minHeight: 14
+}, d = {
+	sm: {
+		gap: 2,
+		py: 2,
+		minHeight: 11
+	},
+	md: {},
+	lg: {
+		gap: 4,
+		py: 4,
+		minHeight: 18
+	}
+}, f = [
+	"css",
+	"before",
+	"after",
+	"nth"
+];
+function p(e, t) {
+	let n = {
+		...e,
+		...t
+	}, r = e;
+	for (let e of f) {
+		let a = t[e];
+		r[e] && a && (n[e] = i(r[e], a));
+	}
+	return n;
+}
+//#endregion
+//#region src/components/list.tsx
+var m = [
+	"h1",
+	"h2",
+	"h3",
+	"h4",
+	"h5",
+	"h6"
+], h = { fontVariantNumeric: "tabular-nums" }, g = {
+	display: "flex",
+	ai: "center",
+	jc: "center",
+	flexShrink: 0
+}, _ = {
+	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"
+	}
+}, v = {
+	display: "flex",
+	ai: "baseline",
+	jc: "space-between",
+	gap: 2,
+	minWidth: 0
+}, y = {
+	flexWrap: "wrap",
+	jc: "start",
+	rowGap: 1
+}, b = {
+	fontSize: 14,
+	lineHeight: 20
+}, x = {
+	"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
+	}
+}, S = {
+	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)" }
+	}
+}, C = {
+	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
+		}
+	}
+}, w = {
+	content: {
+		display: "flex",
+		d: "column",
+		gap: .5,
+		flex1: !0,
+		minWidth: 0
+	},
+	meta: {
+		flexShrink: 0,
+		fontSize: 13,
+		lineHeight: 18,
+		whiteSpace: "nowrap",
+		css: h
+	},
+	end: {
+		display: "flex",
+		d: "column",
+		ai: "end",
+		gap: .5,
+		flexShrink: 0,
+		maxWidth: "1/2",
+		textAlign: "end",
+		css: h
+	},
+	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 T(e, t) {
+	let { props: n, ...r } = e;
+	return c({
+		tag: "ul",
+		component: "list",
+		...r,
+		props: {
+			role: "list",
+			...n
+		}
+	}, t);
+}
+function E(e, t) {
+	let { size: n = "md", wrap: r = !1, selected: i = !1, chevron: f = !1, variant: m, children: h, ...g } = e;
+	return c({
+		tag: "li",
+		component: "list.item",
+		...p({
+			...l,
+			...u,
+			...d[n],
+			...r ? { flexWrap: "wrap" } : {}
+		}, g),
+		variant: [m, { selected: i }],
+		children: f ? /* @__PURE__ */ s(a, { children: [h, /* @__PURE__ */ o(O, {})] }) : h
+	}, t);
+}
+function D(e, r) {
+	return c({
+		tag: "span",
+		component: "list.muted",
+		display: "flex",
+		flexShrink: 0,
+		alignSelf: "center",
+		rtl: { flip: "xAxis" },
+		...e,
+		props: {
+			"aria-hidden": !0,
+			...e.props
+		},
+		children: /* @__PURE__ */ o(n, {
+			viewBox: "0 0 16 16",
+			width: "1rem",
+			fill: "none",
+			stroke: "currentColor",
+			strokeWidth: 1.75,
+			children: /* @__PURE__ */ o(t, {
+				d: "M6 3.5 10.5 8 6 12.5",
+				strokeLinecap: "round",
+				strokeLinejoin: "round"
+			})
+		})
+	}, r);
+}
+var O = e(D, "List.Chevron");
+function k(e, t) {
+	let n = r(e.variant).find((e) => e in _);
+	return c({
+		component: "list.media",
+		...g,
+		...n ? _[n] : {},
+		...e
+	}, t);
+}
+function A(e, t) {
+	let { wrap: n = !1, secondary: r = !1, ...i } = e;
+	return c({
+		...r ? {
+			component: "list.muted",
+			...b
+		} : {},
+		...v,
+		...n ? y : {},
+		...i
+	}, t);
+}
+function j(t, n) {
+	let r = t !== "list.title";
+	return e((e, n) => {
+		let { lines: i, ...a } = e, o = i ? p(x[t], C[i]) : x[t];
+		return c({
+			tag: "span",
+			...r ? { component: "list.muted" } : {},
+			...p(o, a)
+		}, n);
+	}, n);
+}
+function M(e, t) {
+	let { props: n, tag: r, onClick: i, ...a } = e, o = r ?? (n?.href === void 0 ? n?.htmlFor === void 0 ? "button" : "label" : "a");
+	return c({
+		tag: o,
+		component: "list.action",
+		...p(S, a),
+		props: {
+			...o === "button" ? { type: "button" } : {},
+			"data-list-action": "",
+			...n,
+			...i ? { onClick: i } : {}
+		}
+	}, t);
+}
+function N(e, t) {
+	let { label: n, children: r, ...i } = e;
+	return c({
+		minWidth: 0,
+		...i,
+		children: /* @__PURE__ */ s(a, { children: [/* @__PURE__ */ o(P, { children: n }), /* @__PURE__ */ o(F, { children: r })] })
+	}, t);
+}
+function P({ children: e }) {
+	return c({
+		tag: "dt",
+		component: "list.muted",
+		fontSize: 12,
+		lineHeight: 16,
+		children: e
+	});
+}
+function F({ children: e }) {
+	return c({
+		tag: "dd",
+		minWidth: 0,
+		fontSize: 14,
+		lineHeight: 20,
+		css: {
+			overflowWrap: "anywhere",
+			...h
+		},
+		children: e
+	});
+}
+function I(e, t) {
+	let { label: n, level: r, sticky: i = !1, children: l, ...u } = e;
+	return c({
+		tag: "li",
+		...u,
+		children: /* @__PURE__ */ s(a, { children: [/* @__PURE__ */ o(L, {
+			level: r,
+			sticky: i,
+			children: n
+		}), /* @__PURE__ */ o(R, { children: l })] })
+	}, t);
+}
+function L({ level: e, sticky: t, children: n }) {
+	return c({
+		tag: e ? m[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 R({ children: e }) {
+	return c({
+		tag: "ul",
+		props: { role: "list" },
+		children: e
+	});
+}
+function z(t, n, r, i = !1) {
+	return e((e, r) => c({
+		tag: t,
+		...i ? { component: "list.muted" } : {},
+		...p(n, e)
+	}, r), r);
+}
+var B = e(k, "List.Media"), V = z("div", w.content, "List.Content"), H = j("list.overline", "List.Overline"), U = j("list.title", "List.Title"), W = j("list.description", "List.Description"), G = z("span", w.meta, "List.Meta", !0), K = z("div", w.end, "List.End"), q = z("div", w.actions, "List.Actions"), J = z("dl", w.fields, "List.Fields"), Y = e(T, "List");
+Y.Item = e(E, "List.Item"), Y.Media = B, Y.Content = V, Y.Row = e(A, "List.Row"), Y.Overline = H, Y.Title = U, Y.Description = W, Y.Meta = G, Y.End = K, Y.Actions = q, Y.Action = e(M, "List.Action"), Y.Fields = J, Y.Field = e(N, "List.Field"), Y.Group = e(I, "List.Group"), Y.Chevron = O;
+//#endregion
+export { Y as default, p as i, u as n, d as r, l as t };