@box-kite/react 2.2.6 → 2.2.7

package/create/src/index.d.ts

@@ -0,0 +1 @@
+export {};

package/create/src/options.d.ts

@@ -0,0 +1,27 @@
+/** The create-vite templates a design can be added to: React, in TypeScript or JavaScript. */
+export declare const TEMPLATES: readonly ["react-ts", "react-compiler-ts", "react", "react-compiler"];
+export type Template = (typeof TEMPLATES)[number];
+export declare const DESIGNS: readonly ["classic", "ember", "azure", "mono"];
+export type Design = (typeof DESIGNS)[number];
+export interface CreateOptions {
+    directory?: string;
+    template?: Template;
+    design?: Design;
+    /** `false` writes the files and leaves the install to the reader. */
+    install: boolean;
+    /** Unset means "ask when there is a terminal to ask in", which is create-vite's own rule. */
+    interactive?: boolean;
+    overwrite: boolean;
+    /** Passed through to create-vite, which swaps Oxlint for ESLint. */
+    eslint?: boolean;
+    help: boolean;
+    version: boolean;
+}
+export declare const isTemplate: (value: string) => value is Template;
+export declare const isDesign: (value: string) => value is Design;
+export declare const isTypeScript: (template: Template) => boolean;
+/** argv after the command name, as options plus whatever was wrong with it: one message per mistake. */
+export declare function parseOptions(argv: readonly string[]): {
+    options: CreateOptions;
+    errors: string[];
+};

package/create/src/options.test.d.ts

@@ -0,0 +1 @@
+export {};

package/create/src/packageManager.d.ts

@@ -0,0 +1,5 @@
+export type PackageManager = 'npm' | 'pnpm' | 'yarn' | 'bun';
+/** The manager that ran `create`, read off the user agent every one of them sets (`pnpm/9.12.0 npm/? node/v22…`). */
+export declare function detectPackageManager(userAgent: string | undefined): PackageManager;
+/** How the reader starts the dev server with it: `npm run dev`, `pnpm dev`. */
+export declare const runCommand: (manager: PackageManager, script: string) => string;

package/create/src/project.d.ts

@@ -0,0 +1,25 @@
+import { Design, Template } from './options';
+/** The files of one language: the app's own `src/` files, and the design file per design. */
+export interface TemplateSet {
+    files: Record<string, string>;
+    designs: Record<Design, string>;
+}
+export interface Templates {
+    ts: TemplateSet;
+    js: TemplateSet;
+    fonts: Record<Design, string[]>;
+}
+export interface ApplyOptions {
+    template: Template;
+    design: Design;
+    /** The range written for `@box-kite/react`, e.g. `^2.2.7`. */
+    boxKiteRange: string;
+    /** The range written for each font package. */
+    fontRange: string;
+}
+/**
+ * Turns a project create-vite has just written into a Box Kite one: the dependencies in `package.json`,
+ * the design as `src/design.tsx`, a `main` that wraps the app in it, and a sample page. Writes files only;
+ * the install is the caller's.
+ */
+export declare function applyBoxKite(directory: string, templates: Templates, options: ApplyOptions): string[];

package/create/src/project.test.d.ts

@@ -0,0 +1 @@
+export {};

package/create/templates/ts/designs/azure.d.ts

@@ -0,0 +1,5 @@
+import { ReactNode } from 'react';
+/** Light or dark follows the system until the reader picks one, and the pick is kept under `storageKey`. */
+export default function Design({ children }: {
+    children: ReactNode;
+}): import("react").JSX.Element;

package/create/templates/ts/designs/ember.d.ts

@@ -0,0 +1,5 @@
+import { ReactNode } from 'react';
+/** Light or dark follows the system until the reader picks one, and the pick is kept under `storageKey`. */
+export default function Design({ children }: {
+    children: ReactNode;
+}): import("react").JSX.Element;

package/create/templates/ts/designs/mono.d.ts

@@ -0,0 +1,5 @@
+import { ReactNode } from 'react';
+/** Light or dark follows the system until the reader picks one, and the pick is kept under `storageKey`. */
+export default function Design({ children }: {
+    children: ReactNode;
+}): import("react").JSX.Element;

package/create/templates/ts/src/App.d.ts

@@ -0,0 +1,2 @@
+/** A page of the components a design reaches, to see the one you pasted in light and dark. */
+export default function App(): import("react").JSX.Element;

package/create/templates/ts/src/design.d.ts

@@ -0,0 +1,5 @@
+import { ReactNode } from 'react';
+/** Light or dark follows the system until the reader picks one, and the pick is kept under `storageKey`. */
+export default function Design({ children }: {
+    children: ReactNode;
+}): import("react").JSX.Element;

package/dataGridList.cjs

@@ -1 +1 @@
-const e=require("./box.cjs"),t=require("./components/svg.cjs"),n=require("./components/button.cjs"),r=require("./components/visuallyHidden.cjs"),i=require("./components/flex.cjs"),a=require("./components/checkbox.cjs"),o=require("./components/textbox.cjs"),s=require("./components/semantics.cjs"),c=require("./components/dataGrid.cjs"),l=require("./components/dialog.cjs"),u=require("./components/list.cjs"),d=require("./components/radioButton.cjs"),f=require("./components/skeleton.cjs"),p=require("./dataGridListLayout.cjs");let m=require("react"),h=require("react/jsx-runtime");function g(e){let{cell:t}=e,{AggregateCell:n}=t.column;return n?(0,h.jsx)(n,{cell:t}):(0,h.jsx)(h.Fragment,{children:t.value??`—`})}g.displayName=`DataGridListAggregate`;function _(t){let{grid:r,shown:a}=t,{list:o,pagination:s,aggregation:l}=r,u=r.componentName,d=r.localeText,f=s.state,m=l.hasFooter?l.footerCells.value.filter(e=>e.column.aggregate):[];return(0,h.jsxs)(h.Fragment,{children:[m.length>0&&(0,h.jsxs)(e.default,{bgColor:`currentColor/3`,px:4,py:3,children:[(0,h.jsx)(e.default,{fontWeight:600,fontSize:14,mb:1,children:l.footerLabel}),(0,h.jsx)(e.default,{tag:`dl`,display:`grid`,gridTemplateColumns:2,columnGap:4,rowGap:2,m:0,children:m.map(t=>(0,h.jsxs)(e.default,{minWidth:0,children:[(0,h.jsx)(e.default,{tag:`dt`,component:`list.muted`,fontSize:12,lineHeight:16,children:t.column.header??String(t.column.key)}),(0,h.jsx)(e.default,{tag:`dd`,m:0,fontSize:14,lineHeight:20,fontWeight:600,children:(0,h.jsx)(g,{cell:t})})]},t.column.key))})]}),f?(0,h.jsx)(i.default,{component:`list.muted`,d:`column`,gap:2,ai:`center`,px:4,py:4,fontSize:13,css:{fontVariantNumeric:`tabular-nums`},children:(0,h.jsxs)(i.default,{ai:`center`,jc:`space-between`,gap:3,width:`fit`,children:[(0,h.jsx)(n.default,{type:`button`,component:`${u}.list.button`,...p.t.ICON_BUTTON,borderRadius:3,disabled:!s.canGoPrev,onClick:s.prevPage,props:{"aria-label":d.previousPage},children:(0,h.jsx)(c.f,{width:`18px`,height:`18px`,rotate:90,rtl:{rotate:-90}})}),(0,h.jsx)(e.default,{textAlign:`center`,children:d.pageRowRange(s.startItem,s.endItem,s.totalItems)}),(0,h.jsx)(n.default,{type:`button`,component:`${u}.list.button`,...p.t.ICON_BUTTON,borderRadius:3,disabled:!s.canGoNext,onClick:s.nextPage,props:{"aria-label":d.nextPage},children:(0,h.jsx)(c.f,{width:`18px`,height:`18px`,rotate:-90,rtl:{rotate:90}})})]})}):(o.hasMore||a!==void 0)&&(0,h.jsxs)(i.default,{component:`list.muted`,d:`column`,gap:2,ai:`center`,px:4,py:4,fontSize:13,css:{fontVariantNumeric:`tabular-nums`},children:[o.hasMore&&(0,h.jsx)(n.default,{type:`button`,component:`${u}.list.button`,width:`fit`,height:11,borderRadius:3,fontSize:15,fontWeight:500,color:`indigo-600`,cursor:`pointer`,theme:{dark:{color:`indigo-300`}},onClick:o.showMore,children:d.showMore(o.nextBatch)}),a!==void 0&&(0,h.jsx)(e.default,{children:d.shownCount(a,r.source.enabled?r.totalRowCount:r.filterStats.filtered)})]})]})}_.displayName=`DataGridListFooter`;function v(e){let{row:t}=e,{grid:n}=t,r=t.cells.flatMap(e=>e.aggregate?[e.aggregate]:[]),i=t.placeholder?``:String(t.groupValue);return(0,h.jsxs)(u.default.Item,{size:`sm`,bgColor:`currentColor/3`,ps:4+Math.min(t.depth,3)*4,props:{"aria-busy":t.placeholder||void 0},children:[n.list.selecting&&t.selectable&&(0,h.jsx)(u.default.Actions,{children:(0,h.jsx)(a.default,{variant:`datagrid`,checked:t.selected,indeterminate:t.indeterminate,onChange:t.toggleSelectAll,props:{"aria-label":n.localeText.selectGroupRows(i)}})}),(0,h.jsx)(c.f,{width:`16px`,height:`16px`,flexShrink:0,rotate:t.expanded?0:-90,rtl:{rotate:t.expanded?0:90}}),(0,h.jsxs)(u.default.Content,{children:[(0,h.jsx)(u.default.Title,{lines:1,fontSize:14,fontWeight:600,children:(0,h.jsx)(u.default.Action,{onClick:()=>t.toggleRow(),props:{"aria-expanded":t.expanded},children:i})}),r.length>0&&(0,h.jsx)(u.default.Row,{secondary:!0,wrap:!0,columnGap:4,fontSize:13,css:{fontVariantNumeric:`tabular-nums`},children:r.map(e=>(0,h.jsxs)(s.Span,{display:`inline-flex`,gap:1,children:[(0,h.jsx)(s.Span,{children:e.column.header??String(e.column.key)}),(0,h.jsx)(s.Span,{fontWeight:600,children:(0,h.jsx)(g,{cell:e})})]},e.column.key))})]}),(0,h.jsx)(u.default.Meta,{px:2,borderRadius:999,fontSize:12,fontWeight:600,lineHeight:20,bgColor:`currentColor/10`,alignSelf:`center`,children:t.count})]})}v.displayName=`DataGridListGroup`;var y=(0,m.memo)(v);function b(e){let{row:t,column:n}=e,r=t.cells.find(e=>e.column===n);if(!r)return null;if(n.Cell)return(0,h.jsx)(n.Cell,{cell:r});let{value:i}=r;if(typeof i==`boolean`)return(0,h.jsx)(h.Fragment,{children:i?r.grid.localeText.booleanTrue:r.grid.localeText.booleanFalse});let a=c.u(n,i);return a&&i!=null&&i!==``?(0,h.jsx)(c.l,{value:i,format:a}):(0,h.jsx)(h.Fragment,{children:i==null||i===``?`—`:String(i)})}b.displayName=`DataGridListValue`;function x(t){let{row:r,index:i,position:o,setSize:l}=t,{grid:d}=r,{list:m}=d,{title:g,kicker:_,subtitle:v,end:y,fields:x}=m.layout.value,{selecting:S}=m,C=m.recordViewEnabled&&!r.placeholder,w=c.p(r)?r:void 0,T=d.props.def.rowDetail,E=d.localeText,D={"aria-posinset":o,"aria-setsize":l};if(r.placeholder)return(0,h.jsx)(u.default.Item,{props:{...D,"aria-busy":!0},children:(0,h.jsx)(f.default,{lines:2,flex1:!0})});let O=g?(0,h.jsx)(b,{row:r,column:g}):E.unnamedRow(r.rowIndex+1),k=g?String(r.cells.find(e=>e.column===g)?.value??``):``,A=m.checkboxId(r.key);return(0,h.jsxs)(u.default.Item,{ai:`start`,selected:!!d.props.def.rowSelection&&r.selected,chevron:C&&!S,ps:w?4+Math.min(w.level,3)*4:void 0,props:{...D,"data-list-key":String(r.key)},children:[S&&(0,h.jsx)(u.default.Actions,{width:6,jc:`center`,alignSelf:`center`,children:(0,h.jsx)(a.default,{id:A,variant:`datagrid`,checked:r.selected,indeterminate:r.indeterminate,onChange:r.toggleSelection})}),(0,h.jsxs)(u.default.Content,{children:[_&&(0,h.jsx)(u.default.Overline,{lines:1,children:(0,h.jsx)(b,{row:r,column:_})}),(0,h.jsxs)(u.default.Row,{ai:`start`,gap:3,children:[(0,h.jsxs)(u.default.Row,{jc:`start`,ai:`center`,gap:1,flex1:!0,children:[w?.hasChildren&&(0,h.jsx)(u.default.Actions,{ms:-2,children:(0,h.jsx)(n.default,{type:`button`,component:`${d.componentName}.list.toggle`,...p.t.ICON_BUTTON,width:8,height:8,onClick:w.toggleTree,props:{"aria-expanded":w.treeExpanded,"aria-label":(w.treeExpanded?E.collapseTreeRow:E.expandTreeRow)(k||E.unnamedRow(r.rowIndex+1))},children:(0,h.jsx)(c.f,{width:`16px`,height:`16px`,rotate:w.treeExpanded?0:-90,rtl:{rotate:w.treeExpanded?0:90}})})}),(0,h.jsx)(u.default.Title,{lines:1,flex1:!0,fontWeight:600,children:S?(0,h.jsx)(u.default.Action,{props:{htmlFor:A},children:O}):C?(0,h.jsx)(u.default.Action,{props:{"aria-haspopup":`dialog`},onClick:()=>m.openRecord(r,i),children:O}):O})]}),y&&(0,h.jsxs)(u.default.End,{fontSize:16,fontWeight:600,lineHeight:22,...p.t.TRUNCATE,children:[(0,h.jsx)(b,{row:r,column:y}),(0,h.jsx)(u.default.Meta,{fontWeight:400,...p.t.LABEL,children:y.header??String(y.key)})]})]}),v.length>0&&(0,h.jsx)(u.default.Description,{lines:1,children:v.map((e,t)=>(0,h.jsxs)(s.Span,{children:[t>0&&` · `,(0,h.jsx)(b,{row:r,column:e})]},e.key))}),x.length>0&&(0,h.jsx)(u.default.Fields,{mt:2,css:{gridTemplateColumns:`repeat(2, minmax(0, 1fr))`},children:x.map(t=>(0,h.jsx)(u.default.Field,{label:t.header??String(t.key),children:(0,h.jsx)(e.default,{...p.t.TRUNCATE,children:(0,h.jsx)(b,{row:r,column:t})})},t.key))}),T&&(0,h.jsxs)(h.Fragment,{children:[(0,h.jsx)(u.default.Actions,{alignSelf:`start`,mt:1,ms:-2,children:(0,h.jsxs)(n.default,{type:`button`,component:`${d.componentName}.list.toggle`,display:`inline-flex`,ai:`center`,gap:1,minHeight:8,px:2,borderRadius:2,fontSize:13,fontWeight:500,cursor:`pointer`,onClick:r.toggleDetail,props:{"aria-expanded":r.expanded},children:[(0,h.jsx)(c.f,{width:`14px`,height:`14px`,rotate:r.expanded?0:-90,rtl:{rotate:r.expanded?0:90}}),E.details]})}),r.expanded&&(0,h.jsx)(u.default.Actions,{display:`block`,mt:2,children:(0,h.jsx)(e.default,{component:`${d.componentName}.list.detail`,p:3,borderRadius:2,fontSize:14,children:T.content(r.data)})})]})]})]})}x.displayName=`DataGridListItem`;var S=(0,m.memo)(x);function C(e){return(0,h.jsx)(t.Svg,{viewBox:`0 0 24 24`,width:`1.25rem`,fill:`none`,stroke:`currentColor`,strokeWidth:2,...e,children:(0,h.jsx)(t.Path,{d:`M6 6l12 12M18 6L6 18`,strokeLinecap:`round`})})}var w=80;function T(t){let{grid:r,open:a,onOpen:o,onClose:s,title:c,trigger:u,actions:d,footer:f,tall:g,bodyProps:_,bodyRef:v,onKeyDown:y,children:b}=t,x=r.componentName,S=`${x}.list.sheet.line`,T=(0,m.useRef)(null),E=(0,m.useCallback)(e=>{let t=e.currentTarget.closest(`dialog`);e.button!==0||!t||e.target.closest(`button`)||(T.current={id:e.pointerId,y:e.clientY,dy:0,dialog:t},e.currentTarget.setPointerCapture(e.pointerId))},[]),D=(0,m.useCallback)(e=>{let t=T.current;if(!t||t.id!==e.pointerId)return;let{dialog:n}=t;t.dy=Math.max(0,e.clientY-t.y),n.style.transition=`none`,n.style.translate=`0 ${t.dy}px`},[]),O=(0,m.useCallback)(()=>{let e=T.current;if(T.current=null,!e)return;let{dialog:t}=e;t.style.transition=``,t.style.translate=``,e.dy>w&&s()},[s]);return(0,h.jsxs)(l.default,{component:`${x}.list.sheet`,display:`flex`,d:`column`,css:g?{minHeight:`min(32rem, calc(100dvh - 2rem))`}:void 0,open:a,onOpenChange:e=>e?o?.():s(),trigger:u,props:{onKeyDown:y},children:[(0,h.jsxs)(i.default,{d:`column`,flexShrink:0,css:{touchAction:`none`},props:{onPointerDown:E,onPointerMove:D,onPointerUp:O,onPointerCancel:O},children:[(0,h.jsx)(e.default,{width:9,height:1.25,mt:2,mx:`auto`,borderRadius:999,bgColor:`gray-300`,theme:{dark:{bgColor:`gray-600`}},props:{"aria-hidden":!0}}),(0,h.jsxs)(i.default,{component:`${S}`,ai:`center`,gap:2,ps:4,pe:2,py:2,bb:1,children:[(0,h.jsx)(l.default.Title,{flex1:!0,minWidth:0,m:0,fontSize:17,fontWeight:600,lineHeight:24,...p.t.TRUNCATE,children:c}),d,(0,h.jsx)(n.default,{type:`button`,component:`${x}.list.sheet.button`,...p.t.ICON_BUTTON,onClick:s,props:{"aria-label":r.localeText.close},children:(0,h.jsx)(C,{})})]})]}),(0,h.jsx)(e.default,{ref:v,flex1:!0,overflowY:`auto`,px:4,py:2,css:{overscrollBehavior:`contain`,touchAction:`pan-y`},props:_,children:b}),f&&(0,h.jsx)(i.default,{component:S,gap:3,flexShrink:0,px:4,pt:3,pb:4,bt:1,children:f})]})}T.displayName=`DataGridListSheet`;var E=60;function D({cell:t,index:r}){let{grid:a,column:o}=t,s=a.componentName,l=String(o.header??o.key),{editing:u}=t,d=(0,m.useRef)(null),f=(0,m.useRef)(!1);return(0,m.useEffect)(()=>{f.current&&!u&&d.current?.focus(),f.current=u},[u]),(0,h.jsxs)(e.default,{component:`${s}.list.sheet.line`,py:3,bb:1,children:[(0,h.jsx)(e.default,{tag:`dt`,component:`list.muted`,fontSize:13,lineHeight:18,children:l}),(0,h.jsxs)(e.default,{tag:`dd`,display:`flex`,ai:`center`,gap:2,m:0,fontSize:16,lineHeight:24,css:{fontVariantNumeric:`tabular-nums`,overflowWrap:`anywhere`},children:[u?(0,h.jsx)(i.default,{component:`${s}.list.sheet.input`,...p.t.INPUT,flex1:!0,ai:`center`,px:1,children:(0,h.jsx)(c.d,{cell:t,row:-1,columnIndex:r})}):(0,h.jsx)(e.default,{flex1:!0,minWidth:0,children:(0,h.jsx)(b,{row:t.row,column:o})}),t.editable&&!u&&(0,h.jsx)(n.default,{ref:d,type:`button`,component:`${s}.list.sheet.button`,...p.t.SHEET_BUTTON,height:10,onClick:()=>t.beginEdit(),props:{"aria-label":a.localeText.editCell(l)},children:a.localeText.edit})]})]})}function O(t){let{grid:r}=t,{list:o}=r,l=r.componentName,u=r.localeText,d=o.record,f=o.recordPosition,{title:g}=o.layout.value,_=(0,m.useRef)(null),v=(0,m.useRef)(null),y=d?.key;(0,m.useEffect)(()=>{v.current?.scrollTo?.({top:0})},[y]);let x=(0,m.useCallback)(()=>{let e=o.record?.key;r.edits.cancel(),o.closeRecord(),requestAnimationFrame(()=>{let t=r.sizingElement?.querySelectorAll(`[data-list-key]`)??[];Array.from(t).find(t=>t.dataset.listKey===String(e))?.querySelector(`[data-list-action]`)?.focus()})},[r,o]),S=(0,m.useCallback)(e=>{r.edits.isOpen&&r.edits.commit(),r.edits.isOpen||o.stepRecord(e)},[r,o]),C=e=>{_.current=e.pointerType===`touch`?{x:e.clientX,y:e.clientY}:null},w=e=>{let t=_.current;if(_.current=null,!t)return;let n=e.clientX-t.x,i=e.clientY-t.y;Math.abs(n)<E||Math.abs(n)<Math.abs(i)*1.5||S(n<0===r.isRtl?-1:1)},O=e=>{if(e.target.closest(`input,select,textarea,[role="combobox"]`))return;let t=r.isRtl?`ArrowLeft`:`ArrowRight`,n=r.isRtl?`ArrowRight`:`ArrowLeft`;(e.key===t||e.key===n)&&(e.preventDefault(),S(e.key===t?1:-1))},k=d&&f&&(0,h.jsxs)(i.default,{ai:`center`,gap:.5,flexShrink:0,children:[(0,h.jsx)(n.default,{type:`button`,component:`${l}.list.sheet.button`,...p.t.ICON_BUTTON,disabled:!o.hasPreviousRecord,onClick:()=>S(-1),props:{"aria-label":u.previousRow},children:(0,h.jsx)(c.f,{width:`18px`,height:`18px`,rotate:90,rtl:{rotate:-90}})}),(0,h.jsx)(e.default,{fontSize:13,color:`gray-500`,textWrap:`nowrap`,css:{fontVariantNumeric:`tabular-nums`},props:{"aria-live":`polite`},children:u.recordPosition(f.position,f.total)}),(0,h.jsx)(n.default,{type:`button`,component:`${l}.list.sheet.button`,...p.t.ICON_BUTTON,disabled:!o.hasNextRecord,onClick:()=>S(1),props:{"aria-label":u.nextRow},children:(0,h.jsx)(c.f,{width:`18px`,height:`18px`,rotate:-90,rtl:{rotate:90}})})]}),A=r.props.def.rowDetail;return(0,h.jsx)(T,{grid:r,open:!!d,onClose:x,tall:!0,title:d&&g?(0,h.jsx)(b,{row:d,column:g}):``,actions:k,onKeyDown:O,bodyRef:v,bodyProps:{onPointerDown:C,onPointerUp:w},children:d&&(0,h.jsxs)(h.Fragment,{children:[r.props.def.rowSelection&&(0,h.jsx)(e.default,{py:3,children:(0,h.jsx)(a.default,{variant:`datagrid`,checked:d.selected,onChange:d.toggleSelection,label:u.selectRow(d.rowIndex+1),labelProps:{display:`flex`,ai:`center`,gap:3,fontSize:15}})}),(0,h.jsx)(e.default,{tag:`dl`,m:0,children:o.recordColumns.map(e=>{let t=d.cells.findIndex(t=>t.column===e);return t===-1?null:(0,h.jsx)(D,{cell:d.cells[t],index:t},e.key)})}),A&&(0,h.jsxs)(i.default,{d:`column`,gap:2,py:3,children:[(0,h.jsx)(s.H3,{m:0,fontSize:14,fontWeight:600,children:u.details}),A.content(d.data)]})]})})}O.displayName=`DataGridListRecord`;function k(t){let{grid:r}=t,a=r.componentName,o=r.localeText,s=r.selectedRows.size;return!r.props.def.rowSelection||s===0?null:(0,h.jsxs)(i.default,{component:`${a}.list.selectionBar`,position:`sticky`,bottom:0,zIndex:2,ai:`center`,gap:2,px:4,py:2,fontSize:14,fontWeight:500,children:[(0,h.jsx)(e.default,{flex1:!0,minWidth:0,textWrap:`nowrap`,css:{fontVariantNumeric:`tabular-nums`},children:o.selectedRows(s)}),!r.allRowsSelected&&(0,h.jsx)(n.default,{type:`button`,minHeight:10,px:3,borderRadius:2,fontSize:14,fontWeight:500,cursor:`pointer`,active:{bgColor:`white/15`},theme:{dark:{active:{bgColor:`black/10`}}},onClick:r.toggleSelectAllRows,children:o.selectAll}),(0,h.jsx)(n.default,{type:`button`,minHeight:10,px:3,borderRadius:2,fontSize:14,fontWeight:500,cursor:`pointer`,active:{bgColor:`white/15`},theme:{dark:{active:{bgColor:`black/10`}}},onClick:r.clearSelection,children:o.clearSelection})]})}k.displayName=`DataGridListSelectionBar`;function A(e){return(0,h.jsx)(t.Svg,{viewBox:`0 0 24 24`,width:`1rem`,fill:`none`,stroke:`currentColor`,strokeWidth:2,...e,children:(0,h.jsx)(t.Path,{d:`M4 6h16M7 12h10M10 18h4`,strokeLinecap:`round`})})}var j=8,M=[{value:`eq`,label:`=`},{value:`ne`,label:`≠`},{value:`gt`,label:`>`},{value:`gte`,label:`≥`},{value:`lt`,label:`<`},{value:`lte`,label:`≤`},{value:`between`,label:`↔`}];function N({column:e}){let{currentFilter:t}=e,n=e.grid.componentName,r=e.grid.localeText,[i,a]=(0,m.useState)(t?.type===`text`?t.value:``),{debounce:s}=c.s(t,e=>c.c.textMatches(i,e),e=>a(e?.type===`text`?e.value:``));return(0,h.jsx)(o.default,{component:`${n}.list.sheet.input`,...p.t.INPUT,type:`search`,value:i,placeholder:e.filterConfig?.placeholder??r.filterPlaceholder,onChange:t=>{let n=t.target.value;a(n),s(`value`,()=>e.setTextFilter(n))},props:{"aria-label":r.filterColumn(String(e.header??e.key))}})}function P({column:t}){let{currentFilter:n}=t,r=t.grid.componentName,a=t.grid.localeText,s=String(t.header??t.key),l=t.filterConfig,[u,d]=(0,m.useState)(()=>c.c.numberDraft(n)),f=(0,m.useRef)(u),g=(0,m.useCallback)(e=>{f.current=e,d(e)},[]),{debounce:_,cancel:v}=c.s(n,e=>c.c.numberMatches(u,e),e=>g(c.c.numberDraft(e))),y=(e,n)=>{g({...f.current,...e});let r=()=>t.setNumberFilter(f.current.operator,f.current.value,f.current.valueTo);n?_(`value`,r):(v(),r())},b=(e,t,n,i)=>(0,h.jsx)(o.default,{component:`${r}.list.sheet.input`,...p.t.INPUT,type:`number`,value:e,step:l?.step,placeholder:n,onChange:e=>y({[i]:e.target.value},!0),props:{"aria-label":t,inputMode:`decimal`,min:l?.min,max:l?.max}});return(0,h.jsxs)(i.default,{gap:2,ai:`center`,children:[(0,h.jsx)(e.default,{tag:`select`,component:`${r}.list.sheet.input`,...p.t.INPUT,width:18,flexShrink:0,props:{value:u.operator,"aria-label":a.filterComparison(s),onChange:e=>y({operator:e.target.value},!1)},children:M.map(e=>(0,h.jsx)(`option`,{value:e.value,children:e.label},e.value))}),b(u.value,u.operator===`between`?a.filterFrom(s):a.filterColumn(s),u.operator===`between`?a.filterFromPlaceholder:l?.placeholder??a.filterValuePlaceholder,`value`),u.operator===`between`&&b(u.valueTo,a.filterTo(s),a.filterToPlaceholder,`valueTo`)]})}function F({column:e}){let t=c.m(!0);return t?(0,h.jsx)(t.ListDateFilter,{column:e}):null}function I({column:e}){let{currentFilter:t}=e,r=e.grid.componentName,s=e.grid.localeText,c=t?.type===`multiselect`?t.values:[],l=e.filterOptions,[u,d]=(0,m.useState)(``),f=t=>{e.setMultiselectFilter(c.includes(t)?c.filter(e=>e!==t):[...c,t])};if(l.length<=j)return(0,h.jsx)(i.default,{flexWrap:`wrap`,gap:2,children:l.map(e=>(0,h.jsx)(n.default,{type:`button`,component:`${r}.list.sheet.chip`,display:`inline-flex`,ai:`center`,minHeight:10,px:3.5,borderRadius:999,fontSize:14,cursor:`pointer`,onClick:()=>f(e.value),props:{"aria-pressed":c.includes(e.value)},children:e.label},String(e.value)))});let g=u.trim().toLocaleLowerCase(),_=g?l.filter(e=>e.label.toLocaleLowerCase().includes(g)):l;return(0,h.jsxs)(i.default,{d:`column`,gap:2,children:[(0,h.jsx)(o.default,{component:`${r}.list.sheet.input`,...p.t.INPUT,type:`search`,value:u,placeholder:s.filterSelectSearchPlaceholder,onChange:e=>d(e.target.value),props:{"aria-label":s.filterColumn(String(e.header??e.key))}}),(0,h.jsx)(i.default,{d:`column`,maxHeight:64,overflowY:`auto`,children:_.map(e=>(0,h.jsx)(a.default,{checked:c.includes(e.value),onChange:()=>f(e.value),label:e.label,labelProps:{component:`${r}.list.sheet.line`,display:`flex`,ai:`center`,gap:3,minHeight:12,fontSize:16,bb:1}},String(e.value)))})]})}function L(e){let{column:t}=e;switch(t.filterConfig?.type){case void 0:return null;case`number`:return(0,h.jsx)(P,{column:t});case`multiselect`:return(0,h.jsx)(I,{column:t});case`date`:return(0,h.jsx)(F,{column:t});default:return(0,h.jsx)(N,{column:t})}}L.displayName=`DataGridListFilter`;function R(t){let{grid:r}=t,{list:a}=r,o=r.componentName,c=r.localeText,l=a.activeFilters.length,u=a.filterableColumns;return u.length===0?null:(0,h.jsx)(T,{grid:r,open:a.sheet===`filter`,onOpen:()=>a.openSheet(`filter`),onClose:()=>a.openSheet(null),title:c.filters,trigger:({ref:t,props:{onClick:r,...i}})=>(0,h.jsxs)(n.default,{type:`button`,component:`${o}.list.toolbar.button`,variant:{active:l>0},...p.t.PILL,ref:t,onClick:r,props:{...i,"aria-label":c.filtersLabel(l)},children:[(0,h.jsx)(A,{}),c.filters,l>0&&(0,h.jsx)(e.default,{tag:`span`,minWidth:5,height:5,px:1.5,borderRadius:999,bgColor:`indigo-600`,color:`white`,fontSize:12,fontWeight:600,lineHeight:20,textAlign:`center`,props:{"aria-hidden":!0},children:l})]}),footer:(0,h.jsxs)(h.Fragment,{children:[l>0&&(0,h.jsx)(n.default,{type:`button`,component:`${o}.list.sheet.button`,...p.t.SHEET_BUTTON,onClick:r.clearColumnFilters,children:c.clearFilters}),(0,h.jsx)(n.default,{type:`button`,component:`${o}.list.sheet.primary`,...p.t.SHEET_BUTTON,flex1:!0,fontWeight:600,onClick:()=>a.openSheet(null),children:c.showRows(r.filterStats.filtered)})]}),children:u.map(e=>(0,h.jsxs)(i.default,{component:`${o}.list.sheet.line`,d:`column`,gap:2,py:3,bb:1,children:[(0,h.jsx)(s.H3,{m:0,fontSize:14,fontWeight:600,children:e.header??String(e.key)}),(0,h.jsx)(L,{column:e})]},e.key))})}R.displayName=`DataGridListFilterSheet`;function z(e){let{grid:t}=e,{list:r}=t,a=t.componentName,o=t.localeText,s=r.sortedColumn,l=t.sortDirection===`DESC`,u=`${t.identifier}-sort`,f={component:`${a}.list.sheet.line`,display:`flex`,ai:`center`,gap:3,minHeight:12,fontSize:16,cursor:`pointer`,bb:1};return(0,h.jsxs)(T,{grid:t,open:r.sheet===`sort`,onClose:()=>r.openSheet(null),title:o.sortBy,onOpen:()=>r.openSheet(`sort`),trigger:({ref:e,props:{onClick:t,...r}})=>(0,h.jsxs)(n.default,{type:`button`,component:`${a}.list.toolbar.button`,variant:{active:!!s},...p.t.PILL,ref:e,onClick:t,props:r,children:[(0,h.jsx)(c.o,{width:`16px`,height:`16px`,fill:`currentColor`,rotate:l?180:0}),s?o.sortedBy(String(s.header??s.key),l):o.sortBy]}),footer:(0,h.jsxs)(h.Fragment,{children:[s&&(0,h.jsx)(n.default,{type:`button`,component:`${a}.list.sheet.button`,...p.t.SHEET_BUTTON,onClick:()=>t.setSortColumn(s.key,void 0),children:o.clearSort}),(0,h.jsx)(n.default,{type:`button`,component:`${a}.list.sheet.primary`,...p.t.SHEET_BUTTON,flex1:!0,fontWeight:600,onClick:()=>r.openSheet(null),children:o.close})]}),children:[(0,h.jsx)(i.default,{tag:`fieldset`,d:`column`,b:0,m:0,p:0,props:{"aria-label":o.sortBy},children:r.sortableColumns.map(e=>(0,h.jsx)(d.default,{name:u,checked:s===e,onChange:()=>t.setSortColumn(e.key,l&&s?`DESC`:`ASC`),label:e.header??String(e.key),labelProps:f},e.key))}),s&&(0,h.jsx)(i.default,{tag:`fieldset`,d:`column`,b:0,m:0,p:0,pt:4,props:{"aria-label":`${o.sortBy}: ${s.header??s.key}`},children:[`ASC`,`DESC`].map(e=>(0,h.jsx)(d.default,{name:`${u}-direction`,checked:t.sortDirection===e,onChange:()=>t.setSortColumn(s.key,e),label:e===`ASC`?o.ascending:o.descending,labelProps:f},e))})]})}z.displayName=`DataGridListSortSheet`;function B({grid:e}){let t=e.componentName,[r,a]=(0,m.useState)(e.globalFilterValue),{debounce:s,cancel:l}=c.s(e.globalFilterValue,e=>e===r,a);return(0,h.jsxs)(i.default,{position:`relative`,ai:`center`,children:[(0,h.jsx)(i.default,{position:`absolute`,insetStart:3.5,pointerEvents:`none`,color:`gray-500`,props:{"aria-hidden":!0},children:(0,h.jsx)(c.r,{fill:`currentColor`,width:`16px`})}),(0,h.jsx)(o.default,{component:`${t}.list.toolbar.search`,width:`fit`,height:11,ps:10,pe:10,b:0,borderRadius:3,fontSize:16,type:`search`,value:r,placeholder:e.localeText.searchPlaceholder,onChange:t=>{let n=t.target.value;a(n),s(`value`,()=>e.filter.setGlobalFilter(n))},props:{"aria-label":e.localeText.searchPlaceholder,enterKeyHint:`search`}}),r&&(0,h.jsx)(n.default,{type:`button`,component:`${t}.list.sheet.button`,display:`inline-flex`,ai:`center`,jc:`center`,width:7,height:7,borderRadius:999,cursor:`pointer`,position:`absolute`,insetEnd:2,onClick:()=>{l(),a(``),e.filter.setGlobalFilter(``)},props:{"aria-label":e.localeText.clearSearch},children:(0,h.jsx)(C,{width:`16px`})})]})}function V(t){let{grid:a}=t,{list:o}=a,{def:s}=a.props,l=a.componentName,u=a.localeText,{filtered:d,total:f}=a.filterStats,m=o.activeFilters,g=o.sortableColumns.length>0;return(0,h.jsxs)(i.default,{component:`${l}.list.toolbar`,d:`column`,gap:3,px:4,pt:4,pb:3,children:[(0,h.jsxs)(i.default,{ai:`center`,gap:3,flexWrap:`wrap`,children:[(0,h.jsxs)(i.default,{d:`column`,flex1:!0,minWidth:0,children:[s.title&&(0,h.jsx)(e.default,{id:a.titleId,fontSize:17,fontWeight:600,lineHeight:24,children:s.title}),(0,h.jsx)(e.default,{component:`${l}.list.toolbar.count`,fontSize:13,css:{fontVariantNumeric:`tabular-nums`},children:u.rowCount(d,f)})]}),s.topBar&&(0,h.jsxs)(i.default,{ai:`center`,gap:2,flexWrap:`wrap`,children:[(0,h.jsx)(c.n,{grid:a}),(0,h.jsx)(c.t,{grid:a})]})]}),s.globalFilter&&(0,h.jsx)(B,{grid:a}),(0,h.jsxs)(i.default,{gap:2,overflowX:`auto`,scrollbarWidth:`none`,mx:-4,px:4,children:[g&&(0,h.jsx)(z,{grid:a}),(0,h.jsx)(R,{grid:a}),s.rowSelection&&(0,h.jsx)(n.default,{type:`button`,component:`${l}.list.toolbar.button`,...p.t.PILL,variant:{active:o.selecting},onClick:()=>o.setSelecting(!o.selecting),props:{"aria-pressed":o.selecting},children:u.selectRows})]}),m.length>0&&(0,h.jsx)(i.default,{gap:2,overflowX:`auto`,scrollbarWidth:`none`,mx:-4,px:4,children:m.map(t=>(0,h.jsxs)(e.default,{tag:`span`,component:`${l}.list.toolbar.chip`,display:`inline-flex`,ai:`center`,gap:1,flexShrink:0,height:8,ps:3,pe:1,borderRadius:999,fontSize:13,textWrap:`nowrap`,children:[(0,h.jsxs)(e.default,{tag:`span`,fontWeight:500,children:[t.label,`:`]}),(0,h.jsx)(e.default,{tag:`span`,children:t.value}),(0,h.jsx)(n.default,{type:`button`,component:`${l}.list.sheet.button`,display:`inline-flex`,ai:`center`,jc:`center`,width:7,height:7,borderRadius:999,cursor:`pointer`,onClick:()=>t.column.clearFilter(),props:{"aria-label":u.clearFilter(t.label)},children:(0,h.jsx)(C,{width:`14px`})})]},t.column.key))}),s.topBarContent&&(0,h.jsx)(e.default,{children:s.topBarContent}),(0,h.jsx)(r.default,{props:{role:`status`},children:a.hasActiveFilters?u.rowCount(d,f):``})]})}V.displayName=`DataGridListToolbar`;function H(t){let{grid:n}=t,{list:r,source:a}=n,o=n.componentName,s=r.visibleItems,l=n.props.loading||a.isLoading,d=n.groupColumns.size===0&&!n.tree.enabled,f=a.enabled?n.totalRowCount:n.filterStats.filtered,{queryVersion:p}=a;return(0,m.useEffect)(()=>{a.enabled&&a.request(0,Math.max(s.length,1))},[a,p,s.length,n.page,n.pageSize,n.expansionVersion]),(0,h.jsxs)(i.default,{component:`${o}.list`,d:`column`,children:[(0,h.jsx)(V,{grid:n}),(0,h.jsx)(c.i,{grid:n}),l&&(0,h.jsx)(c.a,{grid:n}),s.length===0?(0,h.jsx)(e.default,{component:`list.muted`,px:4,py:10,textAlign:`center`,children:n.props.def.noDataComponent??(l?n.localeText.loadingRows:n.localeText.noRows)}):(0,h.jsx)(u.default,{props:{"aria-labelledby":n.props.def.title?n.titleId:void 0,"aria-busy":l||void 0},children:s.map(({row:e,index:t},r)=>e.kind===`group`?(0,h.jsx)(y,{row:e,version:n.rowVersion(e,t)},e.key):(0,h.jsx)(S,{row:e,index:t,position:d?r+1:void 0,setSize:d?f:void 0,version:n.rowVersion(e,t)},e.key))}),(0,h.jsx)(_,{grid:n,shown:d?s.length:void 0}),(0,h.jsx)(k,{grid:n}),(0,h.jsx)(O,{grid:n})]})}H.displayName=`DataGridList`,exports.default=H;
+const e=require("./box.cjs"),t=require("./components/svg.cjs"),n=require("./components/button.cjs"),r=require("./components/visuallyHidden.cjs"),i=require("./components/flex.cjs"),a=require("./components/checkbox.cjs"),o=require("./components/textbox.cjs"),s=require("./components/semantics.cjs"),c=require("./components/dataGrid.cjs"),l=require("./components/dialog.cjs"),u=require("./components/list.cjs"),d=require("./components/radioButton.cjs"),f=require("./components/skeleton.cjs"),p=require("./dataGridListLayout.cjs");let m=require("react"),h=require("react/jsx-runtime");function g(e){let{cell:t}=e,{AggregateCell:n}=t.column;return n?(0,h.jsx)(n,{cell:t}):(0,h.jsx)(h.Fragment,{children:t.value??`—`})}g.displayName=`DataGridListAggregate`;function _(t){let{grid:r,shown:a}=t,{list:o,pagination:s,aggregation:l}=r,u=r.componentName,d=r.localeText,f=s.state,m=l.hasFooter?l.footerCells.value.filter(e=>e.column.aggregate):[];return(0,h.jsxs)(h.Fragment,{children:[m.length>0&&(0,h.jsxs)(e.default,{bgColor:`currentColor/3`,px:4,py:3,children:[(0,h.jsx)(e.default,{fontWeight:600,fontSize:14,mb:1,children:l.footerLabel}),(0,h.jsx)(e.default,{tag:`dl`,display:`grid`,gridTemplateColumns:2,columnGap:4,rowGap:2,m:0,children:m.map(t=>(0,h.jsxs)(e.default,{minWidth:0,children:[(0,h.jsx)(e.default,{tag:`dt`,component:`list.muted`,fontSize:12,lineHeight:16,children:t.column.header??String(t.column.key)}),(0,h.jsx)(e.default,{tag:`dd`,m:0,fontSize:14,lineHeight:20,fontWeight:600,children:(0,h.jsx)(g,{cell:t})})]},t.column.key))})]}),f?(0,h.jsx)(i.default,{component:`list.muted`,d:`column`,gap:2,ai:`center`,px:4,py:4,fontSize:13,css:{fontVariantNumeric:`tabular-nums`},children:(0,h.jsxs)(i.default,{ai:`center`,jc:`space-between`,gap:3,width:`fit`,children:[(0,h.jsx)(n.default,{type:`button`,component:`${u}.list.button`,...p.t.ICON_BUTTON,borderRadius:3,disabled:!s.canGoPrev,onClick:s.prevPage,props:{"aria-label":d.previousPage},children:(0,h.jsx)(c.f,{width:`18px`,height:`18px`,rotate:90,rtl:{rotate:-90}})}),(0,h.jsx)(e.default,{textAlign:`center`,children:d.pageRowRange(s.startItem,s.endItem,s.totalItems)}),(0,h.jsx)(n.default,{type:`button`,component:`${u}.list.button`,...p.t.ICON_BUTTON,borderRadius:3,disabled:!s.canGoNext,onClick:s.nextPage,props:{"aria-label":d.nextPage},children:(0,h.jsx)(c.f,{width:`18px`,height:`18px`,rotate:-90,rtl:{rotate:90}})})]})}):(o.hasMore||a!==void 0)&&(0,h.jsxs)(i.default,{component:`list.muted`,d:`column`,gap:2,ai:`center`,px:4,py:4,fontSize:13,css:{fontVariantNumeric:`tabular-nums`},children:[o.hasMore&&(0,h.jsx)(n.default,{type:`button`,component:`${u}.list.button`,width:`fit`,height:11,borderRadius:3,fontSize:15,fontWeight:500,color:`accent-600`,cursor:`pointer`,theme:{dark:{color:`accent-300`}},onClick:o.showMore,children:d.showMore(o.nextBatch)}),a!==void 0&&(0,h.jsx)(e.default,{children:d.shownCount(a,r.source.enabled?r.totalRowCount:r.filterStats.filtered)})]})]})}_.displayName=`DataGridListFooter`;function v(e){let{row:t}=e,{grid:n}=t,r=t.cells.flatMap(e=>e.aggregate?[e.aggregate]:[]),i=t.placeholder?``:String(t.groupValue);return(0,h.jsxs)(u.default.Item,{size:`sm`,bgColor:`currentColor/3`,ps:4+Math.min(t.depth,3)*4,props:{"aria-busy":t.placeholder||void 0},children:[n.list.selecting&&t.selectable&&(0,h.jsx)(u.default.Actions,{children:(0,h.jsx)(a.default,{variant:`datagrid`,checked:t.selected,indeterminate:t.indeterminate,onChange:t.toggleSelectAll,props:{"aria-label":n.localeText.selectGroupRows(i)}})}),(0,h.jsx)(c.f,{width:`16px`,height:`16px`,flexShrink:0,rotate:t.expanded?0:-90,rtl:{rotate:t.expanded?0:90}}),(0,h.jsxs)(u.default.Content,{children:[(0,h.jsx)(u.default.Title,{lines:1,fontSize:14,fontWeight:600,children:(0,h.jsx)(u.default.Action,{onClick:()=>t.toggleRow(),props:{"aria-expanded":t.expanded},children:i})}),r.length>0&&(0,h.jsx)(u.default.Row,{secondary:!0,wrap:!0,columnGap:4,fontSize:13,css:{fontVariantNumeric:`tabular-nums`},children:r.map(e=>(0,h.jsxs)(s.Span,{display:`inline-flex`,gap:1,children:[(0,h.jsx)(s.Span,{children:e.column.header??String(e.column.key)}),(0,h.jsx)(s.Span,{fontWeight:600,children:(0,h.jsx)(g,{cell:e})})]},e.column.key))})]}),(0,h.jsx)(u.default.Meta,{px:2,borderRadius:999,fontSize:12,fontWeight:600,lineHeight:20,bgColor:`currentColor/10`,alignSelf:`center`,children:t.count})]})}v.displayName=`DataGridListGroup`;var y=(0,m.memo)(v);function b(e){let{row:t,column:n}=e,r=t.cells.find(e=>e.column===n);if(!r)return null;if(n.Cell)return(0,h.jsx)(n.Cell,{cell:r});let{value:i}=r;if(typeof i==`boolean`)return(0,h.jsx)(h.Fragment,{children:i?r.grid.localeText.booleanTrue:r.grid.localeText.booleanFalse});let a=c.u(n,i);return a&&i!=null&&i!==``?(0,h.jsx)(c.l,{value:i,format:a}):(0,h.jsx)(h.Fragment,{children:i==null||i===``?`—`:String(i)})}b.displayName=`DataGridListValue`;function x(t){let{row:r,index:i,position:o,setSize:l}=t,{grid:d}=r,{list:m}=d,{title:g,kicker:_,subtitle:v,end:y,fields:x}=m.layout.value,{selecting:S}=m,C=m.recordViewEnabled&&!r.placeholder,w=c.p(r)?r:void 0,T=d.props.def.rowDetail,E=d.localeText,D={"aria-posinset":o,"aria-setsize":l};if(r.placeholder)return(0,h.jsx)(u.default.Item,{props:{...D,"aria-busy":!0},children:(0,h.jsx)(f.default,{lines:2,flex1:!0})});let O=g?(0,h.jsx)(b,{row:r,column:g}):E.unnamedRow(r.rowIndex+1),k=g?String(r.cells.find(e=>e.column===g)?.value??``):``,A=m.checkboxId(r.key);return(0,h.jsxs)(u.default.Item,{ai:`start`,selected:!!d.props.def.rowSelection&&r.selected,chevron:C&&!S,ps:w?4+Math.min(w.level,3)*4:void 0,props:{...D,"data-list-key":String(r.key)},children:[S&&(0,h.jsx)(u.default.Actions,{width:6,jc:`center`,alignSelf:`center`,children:(0,h.jsx)(a.default,{id:A,variant:`datagrid`,checked:r.selected,indeterminate:r.indeterminate,onChange:r.toggleSelection})}),(0,h.jsxs)(u.default.Content,{children:[_&&(0,h.jsx)(u.default.Overline,{lines:1,children:(0,h.jsx)(b,{row:r,column:_})}),(0,h.jsxs)(u.default.Row,{ai:`start`,gap:3,children:[(0,h.jsxs)(u.default.Row,{jc:`start`,ai:`center`,gap:1,flex1:!0,children:[w?.hasChildren&&(0,h.jsx)(u.default.Actions,{ms:-2,children:(0,h.jsx)(n.default,{type:`button`,component:`${d.componentName}.list.toggle`,...p.t.ICON_BUTTON,width:8,height:8,onClick:w.toggleTree,props:{"aria-expanded":w.treeExpanded,"aria-label":(w.treeExpanded?E.collapseTreeRow:E.expandTreeRow)(k||E.unnamedRow(r.rowIndex+1))},children:(0,h.jsx)(c.f,{width:`16px`,height:`16px`,rotate:w.treeExpanded?0:-90,rtl:{rotate:w.treeExpanded?0:90}})})}),(0,h.jsx)(u.default.Title,{lines:1,flex1:!0,fontWeight:600,children:S?(0,h.jsx)(u.default.Action,{props:{htmlFor:A},children:O}):C?(0,h.jsx)(u.default.Action,{props:{"aria-haspopup":`dialog`},onClick:()=>m.openRecord(r,i),children:O}):O})]}),y&&(0,h.jsxs)(u.default.End,{fontSize:16,fontWeight:600,lineHeight:22,...p.t.TRUNCATE,children:[(0,h.jsx)(b,{row:r,column:y}),(0,h.jsx)(u.default.Meta,{fontWeight:400,...p.t.LABEL,children:y.header??String(y.key)})]})]}),v.length>0&&(0,h.jsx)(u.default.Description,{lines:1,children:v.map((e,t)=>(0,h.jsxs)(s.Span,{children:[t>0&&` · `,(0,h.jsx)(b,{row:r,column:e})]},e.key))}),x.length>0&&(0,h.jsx)(u.default.Fields,{mt:2,css:{gridTemplateColumns:`repeat(2, minmax(0, 1fr))`},children:x.map(t=>(0,h.jsx)(u.default.Field,{label:t.header??String(t.key),children:(0,h.jsx)(e.default,{...p.t.TRUNCATE,children:(0,h.jsx)(b,{row:r,column:t})})},t.key))}),T&&(0,h.jsxs)(h.Fragment,{children:[(0,h.jsx)(u.default.Actions,{alignSelf:`start`,mt:1,ms:-2,children:(0,h.jsxs)(n.default,{type:`button`,component:`${d.componentName}.list.toggle`,display:`inline-flex`,ai:`center`,gap:1,minHeight:8,px:2,borderRadius:2,fontSize:13,fontWeight:500,cursor:`pointer`,onClick:r.toggleDetail,props:{"aria-expanded":r.expanded},children:[(0,h.jsx)(c.f,{width:`14px`,height:`14px`,rotate:r.expanded?0:-90,rtl:{rotate:r.expanded?0:90}}),E.details]})}),r.expanded&&(0,h.jsx)(u.default.Actions,{display:`block`,mt:2,children:(0,h.jsx)(e.default,{component:`${d.componentName}.list.detail`,p:3,borderRadius:2,fontSize:14,children:T.content(r.data)})})]})]})]})}x.displayName=`DataGridListItem`;var S=(0,m.memo)(x);function C(e){return(0,h.jsx)(t.Svg,{viewBox:`0 0 24 24`,width:`1.25rem`,fill:`none`,stroke:`currentColor`,strokeWidth:2,...e,children:(0,h.jsx)(t.Path,{d:`M6 6l12 12M18 6L6 18`,strokeLinecap:`round`})})}var w=80;function T(t){let{grid:r,open:a,onOpen:o,onClose:s,title:c,trigger:u,actions:d,footer:f,tall:g,bodyProps:_,bodyRef:v,onKeyDown:y,children:b}=t,x=r.componentName,S=`${x}.list.sheet.line`,T=(0,m.useRef)(null),E=(0,m.useCallback)(e=>{let t=e.currentTarget.closest(`dialog`);e.button!==0||!t||e.target.closest(`button`)||(T.current={id:e.pointerId,y:e.clientY,dy:0,dialog:t},e.currentTarget.setPointerCapture(e.pointerId))},[]),D=(0,m.useCallback)(e=>{let t=T.current;if(!t||t.id!==e.pointerId)return;let{dialog:n}=t;t.dy=Math.max(0,e.clientY-t.y),n.style.transition=`none`,n.style.translate=`0 ${t.dy}px`},[]),O=(0,m.useCallback)(()=>{let e=T.current;if(T.current=null,!e)return;let{dialog:t}=e;t.style.transition=``,t.style.translate=``,e.dy>w&&s()},[s]);return(0,h.jsxs)(l.default,{component:`${x}.list.sheet`,display:`flex`,d:`column`,css:g?{minHeight:`min(32rem, calc(100dvh - 2rem))`}:void 0,open:a,onOpenChange:e=>e?o?.():s(),trigger:u,props:{onKeyDown:y},children:[(0,h.jsxs)(i.default,{d:`column`,flexShrink:0,css:{touchAction:`none`},props:{onPointerDown:E,onPointerMove:D,onPointerUp:O,onPointerCancel:O},children:[(0,h.jsx)(e.default,{width:9,height:1.25,mt:2,mx:`auto`,borderRadius:999,bgColor:`base-300`,theme:{dark:{bgColor:`base-600`}},props:{"aria-hidden":!0}}),(0,h.jsxs)(i.default,{component:`${S}`,ai:`center`,gap:2,ps:4,pe:2,py:2,bb:1,children:[(0,h.jsx)(l.default.Title,{flex1:!0,minWidth:0,m:0,fontSize:17,fontWeight:600,lineHeight:24,...p.t.TRUNCATE,children:c}),d,(0,h.jsx)(n.default,{type:`button`,component:`${x}.list.sheet.button`,...p.t.ICON_BUTTON,onClick:s,props:{"aria-label":r.localeText.close},children:(0,h.jsx)(C,{})})]})]}),(0,h.jsx)(e.default,{ref:v,flex1:!0,overflowY:`auto`,px:4,py:2,css:{overscrollBehavior:`contain`,touchAction:`pan-y`},props:_,children:b}),f&&(0,h.jsx)(i.default,{component:S,gap:3,flexShrink:0,px:4,pt:3,pb:4,bt:1,children:f})]})}T.displayName=`DataGridListSheet`;var E=60;function D({cell:t,index:r}){let{grid:a,column:o}=t,s=a.componentName,l=String(o.header??o.key),{editing:u}=t,d=(0,m.useRef)(null),f=(0,m.useRef)(!1);return(0,m.useEffect)(()=>{f.current&&!u&&d.current?.focus(),f.current=u},[u]),(0,h.jsxs)(e.default,{component:`${s}.list.sheet.line`,py:3,bb:1,children:[(0,h.jsx)(e.default,{tag:`dt`,component:`list.muted`,fontSize:13,lineHeight:18,children:l}),(0,h.jsxs)(e.default,{tag:`dd`,display:`flex`,ai:`center`,gap:2,m:0,fontSize:16,lineHeight:24,css:{fontVariantNumeric:`tabular-nums`,overflowWrap:`anywhere`},children:[u?(0,h.jsx)(i.default,{component:`${s}.list.sheet.input`,...p.t.INPUT,flex1:!0,ai:`center`,px:1,children:(0,h.jsx)(c.d,{cell:t,row:-1,columnIndex:r})}):(0,h.jsx)(e.default,{flex1:!0,minWidth:0,children:(0,h.jsx)(b,{row:t.row,column:o})}),t.editable&&!u&&(0,h.jsx)(n.default,{ref:d,type:`button`,component:`${s}.list.sheet.button`,...p.t.SHEET_BUTTON,height:10,onClick:()=>t.beginEdit(),props:{"aria-label":a.localeText.editCell(l)},children:a.localeText.edit})]})]})}function O(t){let{grid:r}=t,{list:o}=r,l=r.componentName,u=r.localeText,d=o.record,f=o.recordPosition,{title:g}=o.layout.value,_=(0,m.useRef)(null),v=(0,m.useRef)(null),y=d?.key;(0,m.useEffect)(()=>{v.current?.scrollTo?.({top:0})},[y]);let x=(0,m.useCallback)(()=>{let e=o.record?.key;r.edits.cancel(),o.closeRecord(),requestAnimationFrame(()=>{let t=r.sizingElement?.querySelectorAll(`[data-list-key]`)??[];Array.from(t).find(t=>t.dataset.listKey===String(e))?.querySelector(`[data-list-action]`)?.focus()})},[r,o]),S=(0,m.useCallback)(e=>{r.edits.isOpen&&r.edits.commit(),r.edits.isOpen||o.stepRecord(e)},[r,o]),C=e=>{_.current=e.pointerType===`touch`?{x:e.clientX,y:e.clientY}:null},w=e=>{let t=_.current;if(_.current=null,!t)return;let n=e.clientX-t.x,i=e.clientY-t.y;Math.abs(n)<E||Math.abs(n)<Math.abs(i)*1.5||S(n<0===r.isRtl?-1:1)},O=e=>{if(e.target.closest(`input,select,textarea,[role="combobox"]`))return;let t=r.isRtl?`ArrowLeft`:`ArrowRight`,n=r.isRtl?`ArrowRight`:`ArrowLeft`;(e.key===t||e.key===n)&&(e.preventDefault(),S(e.key===t?1:-1))},k=d&&f&&(0,h.jsxs)(i.default,{ai:`center`,gap:.5,flexShrink:0,children:[(0,h.jsx)(n.default,{type:`button`,component:`${l}.list.sheet.button`,...p.t.ICON_BUTTON,disabled:!o.hasPreviousRecord,onClick:()=>S(-1),props:{"aria-label":u.previousRow},children:(0,h.jsx)(c.f,{width:`18px`,height:`18px`,rotate:90,rtl:{rotate:-90}})}),(0,h.jsx)(e.default,{fontSize:13,color:`base-500`,textWrap:`nowrap`,css:{fontVariantNumeric:`tabular-nums`},props:{"aria-live":`polite`},children:u.recordPosition(f.position,f.total)}),(0,h.jsx)(n.default,{type:`button`,component:`${l}.list.sheet.button`,...p.t.ICON_BUTTON,disabled:!o.hasNextRecord,onClick:()=>S(1),props:{"aria-label":u.nextRow},children:(0,h.jsx)(c.f,{width:`18px`,height:`18px`,rotate:-90,rtl:{rotate:90}})})]}),A=r.props.def.rowDetail;return(0,h.jsx)(T,{grid:r,open:!!d,onClose:x,tall:!0,title:d&&g?(0,h.jsx)(b,{row:d,column:g}):``,actions:k,onKeyDown:O,bodyRef:v,bodyProps:{onPointerDown:C,onPointerUp:w},children:d&&(0,h.jsxs)(h.Fragment,{children:[r.props.def.rowSelection&&(0,h.jsx)(e.default,{py:3,children:(0,h.jsx)(a.default,{variant:`datagrid`,checked:d.selected,onChange:d.toggleSelection,label:u.selectRow(d.rowIndex+1),labelProps:{display:`flex`,ai:`center`,gap:3,fontSize:15}})}),(0,h.jsx)(e.default,{tag:`dl`,m:0,children:o.recordColumns.map(e=>{let t=d.cells.findIndex(t=>t.column===e);return t===-1?null:(0,h.jsx)(D,{cell:d.cells[t],index:t},e.key)})}),A&&(0,h.jsxs)(i.default,{d:`column`,gap:2,py:3,children:[(0,h.jsx)(s.H3,{m:0,fontSize:14,fontWeight:600,children:u.details}),A.content(d.data)]})]})})}O.displayName=`DataGridListRecord`;function k(t){let{grid:r}=t,a=r.componentName,o=r.localeText,s=r.selectedRows.size;return!r.props.def.rowSelection||s===0?null:(0,h.jsxs)(i.default,{component:`${a}.list.selectionBar`,position:`sticky`,bottom:0,zIndex:2,ai:`center`,gap:2,px:4,py:2,fontSize:14,fontWeight:500,children:[(0,h.jsx)(e.default,{flex1:!0,minWidth:0,textWrap:`nowrap`,css:{fontVariantNumeric:`tabular-nums`},children:o.selectedRows(s)}),!r.allRowsSelected&&(0,h.jsx)(n.default,{type:`button`,minHeight:10,px:3,borderRadius:2,fontSize:14,fontWeight:500,cursor:`pointer`,active:{bgColor:`white/15`},theme:{dark:{active:{bgColor:`black/10`}}},onClick:r.toggleSelectAllRows,children:o.selectAll}),(0,h.jsx)(n.default,{type:`button`,minHeight:10,px:3,borderRadius:2,fontSize:14,fontWeight:500,cursor:`pointer`,active:{bgColor:`white/15`},theme:{dark:{active:{bgColor:`black/10`}}},onClick:r.clearSelection,children:o.clearSelection})]})}k.displayName=`DataGridListSelectionBar`;function A(e){return(0,h.jsx)(t.Svg,{viewBox:`0 0 24 24`,width:`1rem`,fill:`none`,stroke:`currentColor`,strokeWidth:2,...e,children:(0,h.jsx)(t.Path,{d:`M4 6h16M7 12h10M10 18h4`,strokeLinecap:`round`})})}var j=8,M=[{value:`eq`,label:`=`},{value:`ne`,label:`≠`},{value:`gt`,label:`>`},{value:`gte`,label:`≥`},{value:`lt`,label:`<`},{value:`lte`,label:`≤`},{value:`between`,label:`↔`}];function N({column:e}){let{currentFilter:t}=e,n=e.grid.componentName,r=e.grid.localeText,[i,a]=(0,m.useState)(t?.type===`text`?t.value:``),{debounce:s}=c.s(t,e=>c.c.textMatches(i,e),e=>a(e?.type===`text`?e.value:``));return(0,h.jsx)(o.default,{component:`${n}.list.sheet.input`,...p.t.INPUT,type:`search`,value:i,placeholder:e.filterConfig?.placeholder??r.filterPlaceholder,onChange:t=>{let n=t.target.value;a(n),s(`value`,()=>e.setTextFilter(n))},props:{"aria-label":r.filterColumn(String(e.header??e.key))}})}function P({column:t}){let{currentFilter:n}=t,r=t.grid.componentName,a=t.grid.localeText,s=String(t.header??t.key),l=t.filterConfig,[u,d]=(0,m.useState)(()=>c.c.numberDraft(n)),f=(0,m.useRef)(u),g=(0,m.useCallback)(e=>{f.current=e,d(e)},[]),{debounce:_,cancel:v}=c.s(n,e=>c.c.numberMatches(u,e),e=>g(c.c.numberDraft(e))),y=(e,n)=>{g({...f.current,...e});let r=()=>t.setNumberFilter(f.current.operator,f.current.value,f.current.valueTo);n?_(`value`,r):(v(),r())},b=(e,t,n,i)=>(0,h.jsx)(o.default,{component:`${r}.list.sheet.input`,...p.t.INPUT,type:`number`,value:e,step:l?.step,placeholder:n,onChange:e=>y({[i]:e.target.value},!0),props:{"aria-label":t,inputMode:`decimal`,min:l?.min,max:l?.max}});return(0,h.jsxs)(i.default,{gap:2,ai:`center`,children:[(0,h.jsx)(e.default,{tag:`select`,component:`${r}.list.sheet.input`,...p.t.INPUT,width:18,flexShrink:0,props:{value:u.operator,"aria-label":a.filterComparison(s),onChange:e=>y({operator:e.target.value},!1)},children:M.map(e=>(0,h.jsx)(`option`,{value:e.value,children:e.label},e.value))}),b(u.value,u.operator===`between`?a.filterFrom(s):a.filterColumn(s),u.operator===`between`?a.filterFromPlaceholder:l?.placeholder??a.filterValuePlaceholder,`value`),u.operator===`between`&&b(u.valueTo,a.filterTo(s),a.filterToPlaceholder,`valueTo`)]})}function F({column:e}){let t=c.m(!0);return t?(0,h.jsx)(t.ListDateFilter,{column:e}):null}function I({column:e}){let{currentFilter:t}=e,r=e.grid.componentName,s=e.grid.localeText,c=t?.type===`multiselect`?t.values:[],l=e.filterOptions,[u,d]=(0,m.useState)(``),f=t=>{e.setMultiselectFilter(c.includes(t)?c.filter(e=>e!==t):[...c,t])};if(l.length<=j)return(0,h.jsx)(i.default,{flexWrap:`wrap`,gap:2,children:l.map(e=>(0,h.jsx)(n.default,{type:`button`,component:`${r}.list.sheet.chip`,display:`inline-flex`,ai:`center`,minHeight:10,px:3.5,borderRadius:999,fontSize:14,cursor:`pointer`,onClick:()=>f(e.value),props:{"aria-pressed":c.includes(e.value)},children:e.label},String(e.value)))});let g=u.trim().toLocaleLowerCase(),_=g?l.filter(e=>e.label.toLocaleLowerCase().includes(g)):l;return(0,h.jsxs)(i.default,{d:`column`,gap:2,children:[(0,h.jsx)(o.default,{component:`${r}.list.sheet.input`,...p.t.INPUT,type:`search`,value:u,placeholder:s.filterSelectSearchPlaceholder,onChange:e=>d(e.target.value),props:{"aria-label":s.filterColumn(String(e.header??e.key))}}),(0,h.jsx)(i.default,{d:`column`,maxHeight:64,overflowY:`auto`,children:_.map(e=>(0,h.jsx)(a.default,{checked:c.includes(e.value),onChange:()=>f(e.value),label:e.label,labelProps:{component:`${r}.list.sheet.line`,display:`flex`,ai:`center`,gap:3,minHeight:12,fontSize:16,bb:1}},String(e.value)))})]})}function L(e){let{column:t}=e;switch(t.filterConfig?.type){case void 0:return null;case`number`:return(0,h.jsx)(P,{column:t});case`multiselect`:return(0,h.jsx)(I,{column:t});case`date`:return(0,h.jsx)(F,{column:t});default:return(0,h.jsx)(N,{column:t})}}L.displayName=`DataGridListFilter`;function R(t){let{grid:r}=t,{list:a}=r,o=r.componentName,c=r.localeText,l=a.activeFilters.length,u=a.filterableColumns;return u.length===0?null:(0,h.jsx)(T,{grid:r,open:a.sheet===`filter`,onOpen:()=>a.openSheet(`filter`),onClose:()=>a.openSheet(null),title:c.filters,trigger:({ref:t,props:{onClick:r,...i}})=>(0,h.jsxs)(n.default,{type:`button`,component:`${o}.list.toolbar.button`,variant:{active:l>0},...p.t.PILL,ref:t,onClick:r,props:{...i,"aria-label":c.filtersLabel(l)},children:[(0,h.jsx)(A,{}),c.filters,l>0&&(0,h.jsx)(e.default,{tag:`span`,minWidth:5,height:5,px:1.5,borderRadius:999,bgColor:`accent-600`,color:`white`,fontSize:12,fontWeight:600,lineHeight:20,textAlign:`center`,props:{"aria-hidden":!0},children:l})]}),footer:(0,h.jsxs)(h.Fragment,{children:[l>0&&(0,h.jsx)(n.default,{type:`button`,component:`${o}.list.sheet.button`,...p.t.SHEET_BUTTON,onClick:r.clearColumnFilters,children:c.clearFilters}),(0,h.jsx)(n.default,{type:`button`,component:`${o}.list.sheet.primary`,...p.t.SHEET_BUTTON,flex1:!0,fontWeight:600,onClick:()=>a.openSheet(null),children:c.showRows(r.filterStats.filtered)})]}),children:u.map(e=>(0,h.jsxs)(i.default,{component:`${o}.list.sheet.line`,d:`column`,gap:2,py:3,bb:1,children:[(0,h.jsx)(s.H3,{m:0,fontSize:14,fontWeight:600,children:e.header??String(e.key)}),(0,h.jsx)(L,{column:e})]},e.key))})}R.displayName=`DataGridListFilterSheet`;function z(e){let{grid:t}=e,{list:r}=t,a=t.componentName,o=t.localeText,s=r.sortedColumn,l=t.sortDirection===`DESC`,u=`${t.identifier}-sort`,f={component:`${a}.list.sheet.line`,display:`flex`,ai:`center`,gap:3,minHeight:12,fontSize:16,cursor:`pointer`,bb:1};return(0,h.jsxs)(T,{grid:t,open:r.sheet===`sort`,onClose:()=>r.openSheet(null),title:o.sortBy,onOpen:()=>r.openSheet(`sort`),trigger:({ref:e,props:{onClick:t,...r}})=>(0,h.jsxs)(n.default,{type:`button`,component:`${a}.list.toolbar.button`,variant:{active:!!s},...p.t.PILL,ref:e,onClick:t,props:r,children:[(0,h.jsx)(c.o,{width:`16px`,height:`16px`,fill:`currentColor`,rotate:l?180:0}),s?o.sortedBy(String(s.header??s.key),l):o.sortBy]}),footer:(0,h.jsxs)(h.Fragment,{children:[s&&(0,h.jsx)(n.default,{type:`button`,component:`${a}.list.sheet.button`,...p.t.SHEET_BUTTON,onClick:()=>t.setSortColumn(s.key,void 0),children:o.clearSort}),(0,h.jsx)(n.default,{type:`button`,component:`${a}.list.sheet.primary`,...p.t.SHEET_BUTTON,flex1:!0,fontWeight:600,onClick:()=>r.openSheet(null),children:o.close})]}),children:[(0,h.jsx)(i.default,{tag:`fieldset`,d:`column`,b:0,m:0,p:0,props:{"aria-label":o.sortBy},children:r.sortableColumns.map(e=>(0,h.jsx)(d.default,{name:u,checked:s===e,onChange:()=>t.setSortColumn(e.key,l&&s?`DESC`:`ASC`),label:e.header??String(e.key),labelProps:f},e.key))}),s&&(0,h.jsx)(i.default,{tag:`fieldset`,d:`column`,b:0,m:0,p:0,pt:4,props:{"aria-label":`${o.sortBy}: ${s.header??s.key}`},children:[`ASC`,`DESC`].map(e=>(0,h.jsx)(d.default,{name:`${u}-direction`,checked:t.sortDirection===e,onChange:()=>t.setSortColumn(s.key,e),label:e===`ASC`?o.ascending:o.descending,labelProps:f},e))})]})}z.displayName=`DataGridListSortSheet`;function B({grid:e}){let t=e.componentName,[r,a]=(0,m.useState)(e.globalFilterValue),{debounce:s,cancel:l}=c.s(e.globalFilterValue,e=>e===r,a);return(0,h.jsxs)(i.default,{position:`relative`,ai:`center`,children:[(0,h.jsx)(i.default,{position:`absolute`,insetStart:3.5,pointerEvents:`none`,color:`base-500`,props:{"aria-hidden":!0},children:(0,h.jsx)(c.r,{fill:`currentColor`,width:`16px`})}),(0,h.jsx)(o.default,{component:`${t}.list.toolbar.search`,width:`fit`,height:11,ps:10,pe:10,b:0,borderRadius:3,fontSize:16,type:`search`,value:r,placeholder:e.localeText.searchPlaceholder,onChange:t=>{let n=t.target.value;a(n),s(`value`,()=>e.filter.setGlobalFilter(n))},props:{"aria-label":e.localeText.searchPlaceholder,enterKeyHint:`search`}}),r&&(0,h.jsx)(n.default,{type:`button`,component:`${t}.list.sheet.button`,display:`inline-flex`,ai:`center`,jc:`center`,width:7,height:7,borderRadius:999,cursor:`pointer`,position:`absolute`,insetEnd:2,onClick:()=>{l(),a(``),e.filter.setGlobalFilter(``)},props:{"aria-label":e.localeText.clearSearch},children:(0,h.jsx)(C,{width:`16px`})})]})}function V(t){let{grid:a}=t,{list:o}=a,{def:s}=a.props,l=a.componentName,u=a.localeText,{filtered:d,total:f}=a.filterStats,m=o.activeFilters,g=o.sortableColumns.length>0;return(0,h.jsxs)(i.default,{component:`${l}.list.toolbar`,d:`column`,gap:3,px:4,pt:4,pb:3,children:[(0,h.jsxs)(i.default,{ai:`center`,gap:3,flexWrap:`wrap`,children:[(0,h.jsxs)(i.default,{d:`column`,flex1:!0,minWidth:0,children:[s.title&&(0,h.jsx)(e.default,{id:a.titleId,fontSize:17,fontWeight:600,lineHeight:24,children:s.title}),(0,h.jsx)(e.default,{component:`${l}.list.toolbar.count`,fontSize:13,css:{fontVariantNumeric:`tabular-nums`},children:u.rowCount(d,f)})]}),s.topBar&&(0,h.jsxs)(i.default,{ai:`center`,gap:2,flexWrap:`wrap`,children:[(0,h.jsx)(c.n,{grid:a}),(0,h.jsx)(c.t,{grid:a})]})]}),s.globalFilter&&(0,h.jsx)(B,{grid:a}),(0,h.jsxs)(i.default,{gap:2,overflowX:`auto`,scrollbarWidth:`none`,mx:-4,px:4,children:[g&&(0,h.jsx)(z,{grid:a}),(0,h.jsx)(R,{grid:a}),s.rowSelection&&(0,h.jsx)(n.default,{type:`button`,component:`${l}.list.toolbar.button`,...p.t.PILL,variant:{active:o.selecting},onClick:()=>o.setSelecting(!o.selecting),props:{"aria-pressed":o.selecting},children:u.selectRows})]}),m.length>0&&(0,h.jsx)(i.default,{gap:2,overflowX:`auto`,scrollbarWidth:`none`,mx:-4,px:4,children:m.map(t=>(0,h.jsxs)(e.default,{tag:`span`,component:`${l}.list.toolbar.chip`,display:`inline-flex`,ai:`center`,gap:1,flexShrink:0,height:8,ps:3,pe:1,borderRadius:999,fontSize:13,textWrap:`nowrap`,children:[(0,h.jsxs)(e.default,{tag:`span`,fontWeight:500,children:[t.label,`:`]}),(0,h.jsx)(e.default,{tag:`span`,children:t.value}),(0,h.jsx)(n.default,{type:`button`,component:`${l}.list.sheet.button`,display:`inline-flex`,ai:`center`,jc:`center`,width:7,height:7,borderRadius:999,cursor:`pointer`,onClick:()=>t.column.clearFilter(),props:{"aria-label":u.clearFilter(t.label)},children:(0,h.jsx)(C,{width:`14px`})})]},t.column.key))}),s.topBarContent&&(0,h.jsx)(e.default,{children:s.topBarContent}),(0,h.jsx)(r.default,{props:{role:`status`},children:a.hasActiveFilters?u.rowCount(d,f):``})]})}V.displayName=`DataGridListToolbar`;function H(t){let{grid:n}=t,{list:r,source:a}=n,o=n.componentName,s=r.visibleItems,l=n.props.loading||a.isLoading,d=n.groupColumns.size===0&&!n.tree.enabled,f=a.enabled?n.totalRowCount:n.filterStats.filtered,{queryVersion:p}=a;return(0,m.useEffect)(()=>{a.enabled&&a.request(0,Math.max(s.length,1))},[a,p,s.length,n.page,n.pageSize,n.expansionVersion]),(0,h.jsxs)(i.default,{component:`${o}.list`,d:`column`,children:[(0,h.jsx)(V,{grid:n}),(0,h.jsx)(c.i,{grid:n}),l&&(0,h.jsx)(c.a,{grid:n}),s.length===0?(0,h.jsx)(e.default,{component:`list.muted`,px:4,py:10,textAlign:`center`,children:n.props.def.noDataComponent??(l?n.localeText.loadingRows:n.localeText.noRows)}):(0,h.jsx)(u.default,{props:{"aria-labelledby":n.props.def.title?n.titleId:void 0,"aria-busy":l||void 0},children:s.map(({row:e,index:t},r)=>e.kind===`group`?(0,h.jsx)(y,{row:e,version:n.rowVersion(e,t)},e.key):(0,h.jsx)(S,{row:e,index:t,position:d?r+1:void 0,setSize:d?f:void 0,version:n.rowVersion(e,t)},e.key))}),(0,h.jsx)(_,{grid:n,shown:d?s.length:void 0}),(0,h.jsx)(k,{grid:n}),(0,h.jsx)(O,{grid:n})]})}H.displayName=`DataGridList`,exports.default=H;

package/dataGridList.mjs

@@ -126,9 +126,9 @@ function L(t) {
 			borderRadius: 3,
 			fontSize: 15,
 			fontWeight: 500,
-			color: "indigo-600",
+			color: "accent-600",
 			cursor: "pointer",
-			theme: { dark: { color: "indigo-300" } },
+			theme: { dark: { color: "accent-300" } },
 			onClick: o.showMore,
 			children: u.showMore(o.nextBatch)
 		}), i !== void 0 && /* @__PURE__ */ P(e, { children: u.shownCount(i, n.source.enabled ? n.totalRowCount : n.filterStats.filtered) })]
@@ -445,8 +445,8 @@ function H(t) {
 					mt: 2,
 					mx: "auto",
 					borderRadius: 999,
-					bgColor: "gray-300",
-					theme: { dark: { bgColor: "gray-600" } },
+					bgColor: "base-300",
+					theme: { dark: { bgColor: "base-600" } },
 					props: { "aria-hidden": !0 }
 				}), /* @__PURE__ */ F(a, {
 					component: `${v}`,
@@ -614,7 +614,7 @@ function U(t) {
 			}),
 			/* @__PURE__ */ P(e, {
 				fontSize: 13,
-				color: "gray-500",
+				color: "base-500",
 				textWrap: "nowrap",
 				css: { fontVariantNumeric: "tabular-nums" },
 				props: { "aria-live": "polite" },
@@ -960,7 +960,7 @@ function X(t) {
 					height: 5,
 					px: 1.5,
 					borderRadius: 999,
-					bgColor: "indigo-600",
+					bgColor: "accent-600",
 					color: "white",
 					fontSize: 12,
 					fontWeight: 600,
@@ -1096,7 +1096,7 @@ function le({ grid: e }) {
 				position: "absolute",
 				insetStart: 3.5,
 				pointerEvents: "none",
-				color: "gray-500",
+				color: "base-500",
 				props: { "aria-hidden": !0 },
 				children: /* @__PURE__ */ P(b, {
 					fill: "currentColor",

package/docs/props.md

@@ -13,7 +13,7 @@ A prop that is not here does not exist: reach for `css={{ … }}` for a one-off,
 The accent-color CSS property tints the parts of a native control the page does not draw: a checkbox's tick, a radio's dot, a range track, a progress bar. The one way to brand them without `appearance="none"` and a rebuild, and it inherits — set it once on a form.
 
 - Writes: `accent-color`
-- Values: 304 named values, anything else the types allow
+- Values: 326 named values, anything else the types allow
 - Example: `accentColor="sky-500"` → `accent-color: var(--sky-500,oklch(68.5% .169 237.3))`
 
 ### `ai`
@@ -285,15 +285,15 @@ Which box the background is painted inside — and `text`, which clips it to the
 The background-color CSS property sets the background color of an element.
 
 - Writes: `background-color`
-- Values: 304 named values, anything else the types allow
+- Values: 326 named values, anything else the types allow
 - Example: `bgColor="sky-500"` → `background-color: var(--sky-500,oklch(68.5% .169 237.3))`
 
 ### `bgGradient`
 
-A gradient written as a value: the key names the kind and carries its geometry (`linear` a direction or an angle, `radial` a shape, `conic` an angle to start from), `colors` are the stops in order — a palette token, one with an opacity modifier, or a `[colour, position]` pair. `interpolate="oklch"` is what keeps a two-stop gradient out of the grey middle sRGB runs it through. Writes `background-image`, so it and `bgImage` are the same property: use one.
+A gradient written as a value: the key names the kind and carries its geometry (`linear` a direction or an angle, `radial` a shape, `conic` an angle to start from), `colors` are the stops in order — a palette token, one with an opacity modifier, or a `[colour, position]` pair. `interpolate="oklch"` is what keeps a two-stop gradient out of the grey middle sRGB runs it through. Writes `background-image`, so it and `bgImage` are the same property: use one. `'none'` clears it — the only way a variant or a design can take a gradient back off, since `bgGradient` is declared after `bgImage` and wins the property.
 
 - Writes: `background-image`
-- Values: whatever the types allow
+- Values: `none`, anything else the types allow
 - Example: `bgGradient={{ linear: 'r', colors: ['blue-500', 'pink-500'] }}` → `background-image: linear-gradient(to right,var(--blue-500,oklch(62.3% .214 259.8)),var(--pink-500,oklch(65.6% .241 354.3)))`
 
 ### `bgImage`
@@ -333,7 +333,7 @@ Whether a table's cell borders are shared or every cell keeps its own. `collapse
 The border-color shorthand CSS property sets the color of an element's border.
 
 - Writes: `border-color`
-- Values: 304 named values, anything else the types allow
+- Values: 326 named values, anything else the types allow
 - Example: `borderColor="sky-500"` → `border-color: var(--sky-500,oklch(68.5% .169 237.3))`
 
 ### `borderRadius`
@@ -541,7 +541,7 @@ The border-width shorthand CSS property sets the width of an element's top and b
 The caret-color CSS property sets the colour of the insertion caret in a text field or any editable element.
 
 - Writes: `caret-color`
-- Values: 304 named values, anything else the types allow
+- Values: 326 named values, anything else the types allow
 - Example: `caretColor="sky-500"` → `caret-color: var(--sky-500,oklch(68.5% .169 237.3))`
 
 ### `clipPath`
@@ -557,7 +557,7 @@ The clip-path CSS property creates a clipping region that sets what part of an e
 The color CSS property sets the foreground color value of an element's text and text decorations, and sets the currentcolor value.
 
 - Writes: `color`
-- Values: 304 named values, anything else the types allow
+- Values: 326 named values, anything else the types allow
 - Example: `color="sky-500"` → `color: var(--sky-500,oklch(68.5% .169 237.3))`
 
 ### `colorScheme`
@@ -693,7 +693,7 @@ A shadow cast by the element's *shape* rather than its box — the one that foll
 What colour `dropShadow` draws in. Shows nothing on its own.
 
 - Writes: `--boxDropShadowColor`
-- Values: 304 named values, anything else the types allow
+- Values: 326 named values, anything else the types allow
 - Example: `dropShadowColor="sky-500"` → `--boxDropShadowColor: var(--sky-500,oklch(68.5% .169 237.3))`
 
 ### `fieldSizing`
@@ -709,7 +709,7 @@ The field-sizing CSS property lets a form control size itself to its content: `f
 The fill CSS property defines how SVG text content and the interior canvas of SVG shapes are filled or painted. If present, it overrides the element's fill attribute. Takes a colour token, a paint server the document defines (`fill="url(#sky)"` — a `<LinearGradient>` or a pattern) or a variable somebody else declared (`fill="var(--chart-1)"`).
 
 - Writes: `fill`
-- Values: 304 named values, anything else the types allow
+- Values: 326 named values, anything else the types allow
 - Example: `fill="sky-500"` → `fill: var(--sky-500,oklch(68.5% .169 237.3))`
 
 ### `fillOpacity`
@@ -925,7 +925,7 @@ The same ring, drawn inside the border box: an inner hairline that needs no seco
 What colour `insetRing` draws in. `currentColor` otherwise.
 
 - Writes: `--boxInsetRingColor`
-- Values: 304 named values, anything else the types allow
+- Values: 326 named values, anything else the types allow
 - Example: `insetRingColor="sky-500"` → `--boxInsetRingColor: var(--sky-500,oklch(68.5% .169 237.3))`
 
 ### `insetShadow`
@@ -941,7 +941,7 @@ A shadow drawn inside the border box: `xxs`, `xs` or `sm`. Its own layer, so it
 What colour `insetShadow` draws in. Shows nothing on its own.
 
 - Writes: `--boxInsetShadowColor`
-- Values: 304 named values, anything else the types allow
+- Values: 326 named values, anything else the types allow
 - Example: `insetShadowColor="sky-500"` → `--boxInsetShadowColor: var(--sky-500,oklch(68.5% .169 237.3))`
 
 ### `insetStart`
@@ -1018,10 +1018,10 @@ The left CSS property participates in specifying the horizontal position of a po
 
 ### `letterSpacing`
 
-The letter-spacing CSS property sets the horizontal spacing behavior between text characters. This value is added to the natural spacing between characters while rendering the text. Positive values of letter-spacing causes characters to spread farther apart, while negative values of letter-spacing bring characters closer together.
+The letter-spacing CSS property sets the horizontal spacing behavior between text characters. This value is added to the natural spacing between characters while rendering the text. Positive values of letter-spacing causes characters to spread farther apart, while negative values of letter-spacing bring characters closer together. A number is pixels; Tailwind's tracking names (`tighter` … `widest`) are in `em`, so they scale with the text — what a display heading wants.
 
 - Writes: `letter-spacing`
-- Values: a number
+- Values: `tighter` · `tight` · `normal` · `wide` · `wider` · `widest`, a number
 - Example: `letterSpacing={4}` → `letter-spacing: 4px`
 
 ### `lineHeight`
@@ -1189,7 +1189,7 @@ The CSS outline-width property sets the thickness of an element's outline. An ou
 The outline-color CSS property sets the color of an element's outline.
 
 - Writes: `outline-color`
-- Values: 304 named values, anything else the types allow
+- Values: 326 named values, anything else the types allow
 - Example: `outlineColor="sky-500"` → `outline-color: var(--sky-500,oklch(68.5% .169 237.3))`
 
 ### `outlineOffset`
@@ -1421,7 +1421,7 @@ A hard-edged shadow outside the border box, in px — `ring={2}`. Unlike `outlin
 What colour `ring` draws in. `currentColor` otherwise.
 
 - Writes: `--boxRingColor`
-- Values: 304 named values, anything else the types allow
+- Values: 326 named values, anything else the types allow
 - Example: `ringColor="sky-500"` → `--boxRingColor: var(--sky-500,oklch(68.5% .169 237.3))`
 
 ### `rotate`
@@ -1477,7 +1477,7 @@ The scale CSS property lets you specify scale transforms individually and indepe
 The scrollbar-color CSS property sets the color of the scrollbar thumb and track. The value pair is [thumbColor, trackColor].
 
 - Writes: `scrollbar-color`
-- Values: `currentColor,transparent,green,red,blue,gray,black,white,vi,slate-50,slate-100,slate-200,slate-300,slate-400,slate-500,slate-600,slate-700,slate-800,slate-900,slate-950,gray-50,gray-100,gray-200,gray-300,gray-400,gray-500,gray-600,gray-700,gray-800,gray-900,gray-950,zinc-50,zinc-100,zinc-200,zinc-300,zinc-400,zinc-500,zinc-600,zinc-700,zinc-800,zinc-900,zinc-950,neutral-50,neutral-100,neutral-200,neutral-300,neutral-400,neutral-500,neutral-600,neutral-700,neutral-800,neutral-900,neutral-950,stone-50,stone-100,stone-200,stone-300,stone-400,stone-500,stone-600,stone-700,stone-800,stone-900,stone-950,mauve-50,mauve-100,mauve-200,mauve-300,mauve-400,mauve-500,mauve-600,mauve-700,mauve-800,mauve-900,mauve-950,mist-50,mist-100,mist-200,mist-300,mist-400,mist-500,mist-600,mist-700,mist-800,mist-900,mist-950,olive-50,olive-100,olive-200,olive-300,olive-400,olive-500,olive-600,olive-700,olive-800,olive-900,olive-950,taupe-50,taupe-100,taupe-200,taupe-300,taupe-400,taupe-500,taupe-600,taupe-700,taupe-800,taupe-900,taupe-950,red-50,red-100,red-200,red-300,red-400,red-500,red-600,red-700,red-800,red-900,red-950,orange-50,orange-100,orange-200,orange-300,orange-400,orange-500,orange-600,orange-700,orange-800,orange-900,orange-950,amber-50,amber-100,amber-200,amber-300,amber-400,amber-500,amber-600,amber-700,amber-800,amber-900,amber-950,yellow-50,yellow-100,yellow-200,yellow-300,yellow-400,yellow-500,yellow-600,yellow-700,yellow-800,yellow-900,yellow-950,lime-50,lime-100,lime-200,lime-300,lime-400,lime-500,lime-600,lime-700,lime-800,lime-900,lime-950,green-50,green-100,green-200,green-300,green-400,green-500,green-600,green-700,green-800,green-900,green-950,emerald-50,emerald-100,emerald-200,emerald-300,emerald-400,emerald-500,emerald-600,emerald-700,emerald-800,emerald-900,emerald-950,teal-50,teal-100,teal-200,teal-300,teal-400,teal-500,teal-600,teal-700,teal-800,teal-900,teal-950,cyan-50,cyan-100,cyan-200,cyan-300,cyan-400,cyan-500,cyan-600,cyan-700,cyan-800,cyan-900,cyan-950,sky-50,sky-100,sky-200,sky-300,sky-400,sky-500,sky-600,sky-700,sky-800,sky-900,sky-950,blue-50,blue-100,blue-200,blue-300,blue-400,blue-500,blue-600,blue-700,blue-800,blue-900,blue-950,indigo-50,indigo-100,indigo-200,indigo-300,indigo-400,indigo-500,indigo-600,indigo-700,indigo-800,indigo-900,indigo-950,violet-50,violet-100,violet-200,violet-300,violet-400,violet-500,violet-600,violet-700,violet-800,violet-900,violet-950,purple-50,purple-100,purple-200,purple-300,purple-400,purple-500,purple-600,purple-700,purple-800,purple-900,purple-950,fuchsia-50,fuchsia-100,fuchsia-200,fuchsia-300,fuchsia-400,fuchsia-500,fuchsia-600,fuchsia-700,fuchsia-800,fuchsia-900,fuchsia-950,pink-50,pink-100,pink-200,pink-300,pink-400,pink-500,pink-600,pink-700,pink-800,pink-900,pink-950,rose-50,rose-100,rose-200,rose-300,rose-400,rose-500,rose-600,rose-700,rose-800,rose-900,rose-950,none`
+- Values: `currentColor,transparent,green,red,blue,gray,black,white,vi,slate-50,slate-100,slate-200,slate-300,slate-400,slate-500,slate-600,slate-700,slate-800,slate-900,slate-950,gray-50,gray-100,gray-200,gray-300,gray-400,gray-500,gray-600,gray-700,gray-800,gray-900,gray-950,zinc-50,zinc-100,zinc-200,zinc-300,zinc-400,zinc-500,zinc-600,zinc-700,zinc-800,zinc-900,zinc-950,neutral-50,neutral-100,neutral-200,neutral-300,neutral-400,neutral-500,neutral-600,neutral-700,neutral-800,neutral-900,neutral-950,stone-50,stone-100,stone-200,stone-300,stone-400,stone-500,stone-600,stone-700,stone-800,stone-900,stone-950,mauve-50,mauve-100,mauve-200,mauve-300,mauve-400,mauve-500,mauve-600,mauve-700,mauve-800,mauve-900,mauve-950,mist-50,mist-100,mist-200,mist-300,mist-400,mist-500,mist-600,mist-700,mist-800,mist-900,mist-950,olive-50,olive-100,olive-200,olive-300,olive-400,olive-500,olive-600,olive-700,olive-800,olive-900,olive-950,taupe-50,taupe-100,taupe-200,taupe-300,taupe-400,taupe-500,taupe-600,taupe-700,taupe-800,taupe-900,taupe-950,red-50,red-100,red-200,red-300,red-400,red-500,red-600,red-700,red-800,red-900,red-950,orange-50,orange-100,orange-200,orange-300,orange-400,orange-500,orange-600,orange-700,orange-800,orange-900,orange-950,amber-50,amber-100,amber-200,amber-300,amber-400,amber-500,amber-600,amber-700,amber-800,amber-900,amber-950,yellow-50,yellow-100,yellow-200,yellow-300,yellow-400,yellow-500,yellow-600,yellow-700,yellow-800,yellow-900,yellow-950,lime-50,lime-100,lime-200,lime-300,lime-400,lime-500,lime-600,lime-700,lime-800,lime-900,lime-950,green-50,green-100,green-200,green-300,green-400,green-500,green-600,green-700,green-800,green-900,green-950,emerald-50,emerald-100,emerald-200,emerald-300,emerald-400,emerald-500,emerald-600,emerald-700,emerald-800,emerald-900,emerald-950,teal-50,teal-100,teal-200,teal-300,teal-400,teal-500,teal-600,teal-700,teal-800,teal-900,teal-950,cyan-50,cyan-100,cyan-200,cyan-300,cyan-400,cyan-500,cyan-600,cyan-700,cyan-800,cyan-900,cyan-950,sky-50,sky-100,sky-200,sky-300,sky-400,sky-500,sky-600,sky-700,sky-800,sky-900,sky-950,blue-50,blue-100,blue-200,blue-300,blue-400,blue-500,blue-600,blue-700,blue-800,blue-900,blue-950,indigo-50,indigo-100,indigo-200,indigo-300,indigo-400,indigo-500,indigo-600,indigo-700,indigo-800,indigo-900,indigo-950,violet-50,violet-100,violet-200,violet-300,violet-400,violet-500,violet-600,violet-700,violet-800,violet-900,violet-950,purple-50,purple-100,purple-200,purple-300,purple-400,purple-500,purple-600,purple-700,purple-800,purple-900,purple-950,fuchsia-50,fuchsia-100,fuchsia-200,fuchsia-300,fuchsia-400,fuchsia-500,fuchsia-600,fuchsia-700,fuchsia-800,fuchsia-900,fuchsia-950,pink-50,pink-100,pink-200,pink-300,pink-400,pink-500,pink-600,pink-700,pink-800,pink-900,pink-950,rose-50,rose-100,rose-200,rose-300,rose-400,rose-500,rose-600,rose-700,rose-800,rose-900,rose-950,accent-50,accent-100,accent-200,accent-300,accent-400,accent-500,accent-600,accent-700,accent-800,accent-900,accent-950,base-50,base-100,base-200,base-300,base-400,base-500,base-600,base-700,base-800,base-900,base-950,none`
 - Example: `scrollbarColor={['gray-400', 'gray-100']}` → `scrollbar-color: var(--gray-400,oklch(70.7% .022 261.3)) var(--gray-100,oklch(96.7% .003 264.5))`
 
 ### `scrollbarGutter`
@@ -1541,7 +1541,7 @@ The elevation of the box: `xxs` through `xxl` on the elevation scale, or one of
 What colour `shadow` draws in — the scale's own translucent black otherwise. Shows nothing on its own.
 
 - Writes: `--boxShadowColor`
-- Values: 304 named values, anything else the types allow
+- Values: 326 named values, anything else the types allow
 - Example: `shadowColor="sky-500"` → `--boxShadowColor: var(--sky-500,oklch(68.5% .169 237.3))`
 
 ### `shapeRendering`
@@ -1557,7 +1557,7 @@ The shape-rendering CSS property tells the renderer what to trade away when draw
 The stroke CSS property defines the color or SVG paint server used to draw an element's stroke. Takes a colour token, `stroke="url(#sky)"` for a paint server the document defines, or `stroke="var(--chart-1)"` for a variable somebody else declared.
 
 - Writes: `stroke`
-- Values: 304 named values, anything else the types allow
+- Values: 326 named values, anything else the types allow
 - Example: `stroke="sky-500"` → `stroke: var(--sky-500,oklch(68.5% .169 237.3))`
 
 ### `strokeDasharray`
@@ -1669,7 +1669,7 @@ A shadow behind the text rather than the box: `xxs` through `lg`, recoloured by
 What colour `textShadow` draws in. Shows nothing on its own.
 
 - Writes: `--boxTextShadowColor`
-- Values: 304 named values, anything else the types allow
+- Values: 326 named values, anything else the types allow
 - Example: `textShadowColor="sky-500"` → `--boxTextShadowColor: var(--sky-500,oklch(68.5% .169 237.3))`
 
 ### `textTransform`