tembro 3.1.9 → 3.1.11

package/CHANGELOG.md

@@ -2,6 +2,12 @@
 
 All notable changes to this project will be documented in this file.
 
+## 3.1.11 - 2026-07-16
+
+- Removed the fixed max-width shell from the generated showcase workbench so `tembro init` projects can use the full viewport for component QA.
+- Updated generated showcase grids to align items at the start, preventing cards from stretching to unrelated sibling heights on wide dashboards.
+- Synced the full-width showcase template into the vendored CLI assets used by the published package.
+
 ## 3.1.6 - 2026-07-13
 
 - Fixed duplicate selected indicators in Select options.

package/dist/components/charts/demo.cjs

@@ -0,0 +1 @@
+module.exports = require("../../src/components/charts/demo.cjs")

package/dist/components/charts/demo.d.ts

@@ -0,0 +1,6 @@
+export declare const chartsShowcaseDemoRegistry: {
+    [k: string]: {
+        mock: import("../../showcase").ShowcaseDemoMock;
+        Showcase: (props: import("../../showcase").ShowcaseDemoProps) => import("react").JSX.Element;
+    };
+};

package/dist/components/charts/demo.js

@@ -0,0 +1 @@
+export * from "../../src/components/charts/demo.js"

package/dist/components/data-table/data-table.d.ts

@@ -9,6 +9,7 @@ import { type LoadingStateProps } from "@/components/feedback/loading-state";
 import { type InputSearchProps } from "@/components/ui/input";
 export type DataTableDensity = "compact" | "default" | "comfortable";
 export type DataTableLoadingVariant = "skeleton" | "state";
+export type DataTableMobileLayout = "auto" | "cards" | "scroll";
 export type DataTableVirtualizationRange = {
     startIndex: number;
     endIndex: number;
@@ -78,6 +79,7 @@ export type DataTableProps<TData, TValue = unknown> = Omit<React.ComponentProps<
     onRowSelectionChange?: OnChangeFn<RowSelectionState>;
     enableRowSelection?: boolean | ((row: Row<TData>) => boolean);
     renderMobileCard?: (row: Row<TData>) => React.ReactNode;
+    mobileLayout?: DataTableMobileLayout;
     onRowClick?: (row: Row<TData>) => void;
     onRowDoubleClick?: (row: Row<TData>) => void;
     getRowDisabled?: (row: Row<TData>) => boolean;
@@ -101,5 +103,5 @@ export type DataTableProps<TData, TValue = unknown> = Omit<React.ComponentProps<
     onColumnPinningChange?: OnChangeFn<ColumnPinningState>;
     virtualization?: DataTableVirtualizationConfig | false;
 };
-declare function DataTable<TData, TValue = unknown>({ className, columns, data, title, description, features, search, filters, summary, toolbarActions, rowActions, bulkActions, onRefresh, onExport, refreshLabel, exportLabel, getRowId, isLoading, isError, emptyState, errorState, loadingState, loadingVariant, toolbar, toolbarProps, pagination, sorting, onSortingChange, columnVisibility, onColumnVisibilityChange, rowSelection, onRowSelectionChange, enableRowSelection, renderMobileCard, onRowClick, onRowDoubleClick, getRowDisabled, density, striped, bordered, stickyHeader, skeletonRows, skeletonCellClassName, cellFallback, tableClassName, tableWrapperClassName, headerCellClassName, cellClassName, rowClassName, renderExpandedRow, expanded, onExpandedChange, getRowCanExpand, columnPinning, onColumnPinningChange, virtualization, ...props }: DataTableProps<TData, TValue>): React.JSX.Element;
+declare function DataTable<TData, TValue = unknown>({ className, columns, data, title, description, features, search, filters, summary, toolbarActions, rowActions, bulkActions, onRefresh, onExport, refreshLabel, exportLabel, getRowId, isLoading, isError, emptyState, errorState, loadingState, loadingVariant, toolbar, toolbarProps, pagination, sorting, onSortingChange, columnVisibility, onColumnVisibilityChange, rowSelection, onRowSelectionChange, enableRowSelection, renderMobileCard, mobileLayout, onRowClick, onRowDoubleClick, getRowDisabled, density, striped, bordered, stickyHeader, skeletonRows, skeletonCellClassName, cellFallback, tableClassName, tableWrapperClassName, headerCellClassName, cellClassName, rowClassName, renderExpandedRow, expanded, onExpandedChange, getRowCanExpand, columnPinning, onColumnPinningChange, virtualization, ...props }: DataTableProps<TData, TValue>): React.JSX.Element;
 export { DataTable };

package/dist/showcase/package-meta.d.ts

@@ -1,3 +1,3 @@
-export declare const PACKAGE_LATEST_VERSION = "3.1.9";
+export declare const PACKAGE_LATEST_VERSION = "3.1.11";
 export declare const PACKAGE_LATEST_RELEASE_DATE = "July 15, 2026";
-export declare const PACKAGE_DEPENDENCY_RANGE = "3.1.9";
+export declare const PACKAGE_DEPENDENCY_RANGE = "3.1.11";

package/dist/src/components/charts/demo.cjs

@@ -0,0 +1 @@
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("../../showcase/create-demo.cjs");var t=e.createShowcaseDemoRegistry([e.component(`charts`,`ChartFrame`,`display`,`Chart primitives for dashboard metrics, distribution and trend views.`,`ChartFrame`)]);exports.chartsShowcaseDemoRegistry=t;

package/dist/src/components/charts/demo.js

@@ -0,0 +1,5 @@
+import { component as e, createShowcaseDemoRegistry as t } from "../../showcase/create-demo.js";
+//#region src/components/charts/demo.tsx
+var n = t([e("charts", "ChartFrame", "display", "Chart primitives for dashboard metrics, distribution and trend views.", "ChartFrame")]);
+//#endregion
+export { n as chartsShowcaseDemoRegistry };

package/dist/src/components/data-table/data-table.cjs

@@ -1 +1 @@
-"use client";Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("../../../_virtual/_rolldown/runtime.cjs"),t=require("../../lib/utils.cjs"),n=require("../ui/button/index.cjs"),r=require("../ui/input/index.cjs"),i=require("../ui/table/index.cjs"),a=require("../feedback/loading-state.cjs"),o=require("../display/data-state.cjs"),ee=require("../../../node_modules/@tanstack/react-virtual/dist/esm/index.cjs"),te=require("./data-table-actions-column.cjs"),ne=require("./data-table-bulk-actions.cjs"),re=require("./data-table-column-visibility-menu.cjs"),ie=require("./data-table-pagination.cjs"),ae=require("./data-table-toolbar.cjs");let s=require("react");s=e.__toESM(s,1);let c=require("react/jsx-runtime"),l=require("@tanstack/react-table");var oe={compact:`h-8 px-2 py-1.5`,default:`h-10 px-2 py-2`,comfortable:`h-12 px-3 py-3`},se={compact:`px-2 py-1.5`,default:`p-2`,comfortable:`px-3 py-3`};function ce(e,t){return typeof t==`function`?t(e):t}function le(e,t){return typeof t==`function`?t(e):t}function ue(e,t){return typeof t==`function`?t(e):t}function de(e){return e==null||e===``}function u({className:e,columns:u,data:d,title:f,description:p,features:m,search:h,filters:g,summary:_,toolbarActions:v,rowActions:y,bulkActions:b,onRefresh:x,onExport:S,refreshLabel:fe=`Refresh`,exportLabel:pe=`Export`,getRowId:me,isLoading:C=!1,isError:he=!1,emptyState:ge,errorState:_e,loadingState:ve,loadingVariant:ye=`skeleton`,toolbar:w,toolbarProps:T,pagination:E,sorting:be,onSortingChange:xe,columnVisibility:Se,onColumnVisibilityChange:Ce,rowSelection:we,onRowSelectionChange:Te,enableRowSelection:Ee,renderMobileCard:D,onRowClick:O,onRowDoubleClick:De,getRowDisabled:Oe,density:k=`default`,striped:A=!1,bordered:j=!1,stickyHeader:M=!1,skeletonRows:ke=6,skeletonCellClassName:Ae,cellFallback:je=`-`,tableClassName:Me,tableWrapperClassName:Ne,headerCellClassName:Pe,cellClassName:Fe,rowClassName:Ie,renderExpandedRow:N,expanded:Le,onExpandedChange:Re,getRowCanExpand:ze,columnPinning:P,onColumnPinningChange:Be,virtualization:F,...Ve}){let He=s.useMemo(()=>{let e=u;return!y||m?.rowActions===!1?e:[...e,te.createDataTableActionsColumn({getActions:y})]},[u,m?.rowActions,y]),I=E===!1?void 0:E,Ue=I?{pageIndex:I.pageIndex,pageSize:I.pageSize}:void 0,L=!!(I&&I.manual!==!1),We=we??{},R=(0,l.useReactTable)({data:d,columns:He,getRowId:me,getCoreRowModel:(0,l.getCoreRowModel)(),getPaginationRowModel:I&&!L?(0,l.getPaginationRowModel)():void 0,manualPagination:L,pageCount:I?.pageCount,state:{sorting:be,columnVisibility:Se,rowSelection:We,pagination:Ue,expanded:Le,...P?{columnPinning:P}:{}},onSortingChange:xe,onColumnVisibilityChange:Ce,onRowSelectionChange:Te,onExpandedChange:Re,onColumnPinningChange:Be,enableRowSelection:Ee,getRowCanExpand:ze,getExpandedRowModel:(0,l.getExpandedRowModel)()}),z=R.getRowModel().rows,Ge=s.useRef(null),B=F===!1?void 0:F,V=!!(B&&B.enabled!==!1&&z.length>0),H=B?.height??480,Ke=B?.onRangeChange,U=ee.useVirtualizer({count:V?z.length:0,getScrollElement:()=>Ge.current,estimateSize:()=>B?.estimateRowHeight??48,getItemKey:e=>z[e]?.id??e,overscan:B?.overscan??8,initialRect:{width:0,height:typeof H==`number`?H:480},onChange(e){if(!Ke)return;let t=e.getVirtualItems();Ke({startIndex:t[0]?.index??-1,endIndex:t.at(-1)?.index??-1})}}),qe=V?U.getVirtualItems():[],W=B?.estimateRowHeight??48,Je=V?Math.min(z.length,Math.ceil((typeof H==`number`?H:480)/W)+(B?.overscan??8)):0,G=qe.length>0?qe:Array.from({length:Je},(e,t)=>({key:z[t]?.id??t,index:t,start:t*W,end:(t+1)*W,size:W,lane:0})),Ye=G[0]?.start??0,Xe=G.length?Math.max(U.getTotalSize()-G[G.length-1].end,0):0,K=R.getSelectedRowModel().rows.map(e=>e.original),Ze=K.length,q=s.useMemo(()=>({table:R,data:d,selectedRows:K}),[d,K,R]),Qe=R.getVisibleLeafColumns(),$e=Math.max(Qe.length,1),et=typeof w==`function`?w(R):w,tt=typeof T==`function`?T(R):T,J=typeof g==`function`?g(q):g,Y=typeof _==`function`?_(q):_,nt=!!(h&&m?.search!==!1),rt=!!(m?.columnVisibility&&R.getAllLeafColumns().some(e=>e.getCanHide())),X=!!(m?.refresh&&x),Z=!!(m?.export&&S),it=!!(m?.bulkActions!==!1&&b?.length),at=rt&&!!(f||p||h||J||Y||v||X||Z),ot=nt&&h?(0,c.jsx)(r.Input,{type:`search`,value:h.value,onValueChange:h.onValueChange,placeholder:h.placeholder??`Search...`,wrapperClassName:h.wrapperClassName??h.className,inputClassName:h.inputClassName,disabled:h.disabled,clearable:h.clearable,clearLabel:h.clearLabel,searchIcon:h.searchIcon}):void 0,st=(0,c.jsxs)(c.Fragment,{children:[typeof v==`function`?v(q):v,at&&(0,c.jsx)(re.DataTableColumnVisibilityMenu,{table:R}),X&&(0,c.jsx)(n.Button,{type:`button`,variant:`outline`,size:`sm`,disabled:C,onClick:()=>x?.(q),children:fe}),Z&&(0,c.jsx)(n.Button,{type:`button`,variant:`outline`,size:`sm`,onClick:()=>S?.(q),children:pe})]}),ct=it?(0,c.jsx)(ne.DataTableBulkActions,{rows:K,actions:b??[],selectedLabel:()=>`Actions`,clearLabel:null,onClearSelection:()=>R.resetRowSelection(),hideWhenEmpty:!1}):void 0,lt=!!(et||tt||f||p||ot||J||Y||v||at||X||Z||ct),ut=!!(I&&!I.hidden),Q=C&&ye===`skeleton`,dt=(e,t)=>t>0?(0,c.jsx)(i.TableRow,{"aria-hidden":`true`,className:`pointer-events-none border-0 hover:bg-transparent`,children:(0,c.jsx)(i.TableCell,{colSpan:$e,className:`border-0 p-0`,style:{height:t}})},e):null,ft=e=>(0,c.jsx)(i.TableRow,{children:(0,c.jsx)(i.TableCell,{colSpan:$e,className:`p-0`,children:e})}),pt=()=>Array.from({length:Math.max(ke,1)},(e,n)=>(0,c.jsx)(i.TableRow,{"aria-hidden":`true`,children:Qe.map(e=>(0,c.jsx)(i.TableCell,{className:t.cn(se[k],j&&`border-r last:border-r-0`),children:(0,c.jsx)(`div`,{className:t.cn(`h-4 w-full max-w-40 animate-pulse rounded-md bg-muted`,n%3==1&&`max-w-24`,n%3==2&&`max-w-32`,Ae)})},`${e.id}-${n}`))},`skeleton-${n}`)),$=Q?null:C?(0,c.jsx)(a.LoadingState,{label:`Loading data...`,...ve}):he?(0,c.jsx)(o.DataState,{status:`error`,title:`Could not load data`,description:`Please try again.`,variant:`plain`,..._e}):z.length===0?(0,c.jsx)(o.DataState,{status:`empty`,variant:`plain`,...ge}):null,mt=(e,n,r)=>{let a=Oe?.(e)??!1;return(0,c.jsxs)(s.Fragment,{children:[(0,c.jsx)(i.TableRow,{ref:r&&B?.measureRows!==!1?U.measureElement:void 0,"data-index":r?.index,"data-state":e.getIsSelected()?`selected`:void 0,"data-striped":A&&n%2==1?`true`:void 0,"data-disabled":a||void 0,className:t.cn(O&&!a&&`cursor-pointer`,!a&&`transition-colors hover:bg-[color:color-mix(in_oklch,var(--primary),transparent_96%)] data-[state=selected]:bg-[color:color-mix(in_oklch,var(--primary),transparent_90%)]`,a&&`pointer-events-none opacity-55`,ce(e,Ie)),onClick:()=>{a||O?.(e)},onDoubleClick:()=>{a||De?.(e)},children:e.getVisibleCells().map(e=>{let n=(0,l.flexRender)(e.column.columnDef.cell,e.getContext());return(0,c.jsx)(i.TableCell,{style:{...e.column.getIsPinned()===`left`?{left:`${e.column.getStart(`left`)}px`,position:`sticky`,zIndex:10}:{},...e.column.getIsPinned()===`right`?{right:`${e.column.getAfter(`right`)}px`,position:`sticky`,zIndex:10}:{}},className:t.cn(se[k],e.column.getIsPinned()&&`bg-card shadow-[1px_0_0_var(--border)]`,j&&`border-r last:border-r-0`,ue(e,Fe)),children:de(n)?je:n},e.id)})}),e.getIsExpanded()&&N?(0,c.jsx)(i.TableRow,{className:`bg-muted/50 hover:bg-muted/50`,children:(0,c.jsx)(i.TableCell,{colSpan:e.getVisibleCells().length,children:N(e)})}):null]},e.id)};return(0,c.jsxs)(`div`,{"data-slot":`data-table`,className:t.cn(`grid gap-3`,e),...Ve,children:[lt&&(et??(0,c.jsx)(ae.DataTableToolbar,{title:f,description:p,search:ot,filters:J,summary:Y,actions:st,selectionActions:ct,selectedCount:Ze,totalCount:I?I.rowCount??d.length:d.length,variant:`plain`,...tt})),D&&(0,c.jsx)(`div`,{className:`grid gap-3 md:hidden`,children:$??(Q?(0,c.jsx)(a.LoadingState,{label:`Loading data...`,...ve}):z.map(e=>(0,c.jsx)(s.Fragment,{children:D(e)},e.id)))}),(0,c.jsxs)(`div`,{"data-slot":`data-table-wrapper`,"data-density":k,"data-striped":A||void 0,"data-bordered":j||void 0,"data-virtualized":V||void 0,className:t.cn(`overflow-hidden rounded-[var(--aui-card-radius,var(--radius-lg))] border border-[color:var(--aui-card-border,var(--border))] bg-card shadow-[var(--aui-card-shadow,0_10px_24px_rgba(15,23,42,0.07))] backdrop-blur`,D&&`hidden md:block`,Ne),children:[(0,c.jsxs)(i.Table,{containerRef:Ge,containerStyle:V?{height:H,overscrollBehavior:`contain`}:void 0,containerClassName:t.cn(`rounded-none border-0 bg-transparent shadow-none ring-0`,V&&`overflow-auto`),className:t.cn(`text-[0.95rem]`,Me),"aria-rowcount":z.length,children:[(0,c.jsx)(i.TableHeader,{className:t.cn((M||V)&&`sticky top-0 z-10 shadow-sm backdrop-blur`),children:R.getHeaderGroups().map(e=>(0,c.jsx)(i.TableRow,{children:e.headers.map(e=>(0,c.jsx)(i.TableHead,{style:{width:e.getSize(),...e.column.getIsPinned()===`left`?{left:`${e.column.getStart(`left`)}px`,position:`sticky`,zIndex:M?20:11}:{},...e.column.getIsPinned()===`right`?{right:`${e.column.getAfter(`right`)}px`,position:`sticky`,zIndex:M?20:11}:{}},className:t.cn(oe[k],`bg-[color:color-mix(in_oklch,var(--card),var(--background)_10%)] text-muted-foreground`,(M||V)&&`bg-[color:color-mix(in_oklch,var(--card),transparent_12%)] backdrop-blur`,e.column.getIsPinned()&&`bg-card shadow-[1px_0_0_var(--border)]`,j&&`border-r last:border-r-0`,le(e,Pe)),children:e.isPlaceholder?null:(0,l.flexRender)(e.column.columnDef.header,e.getContext())},e.id))},e.id))}),(0,c.jsx)(i.TableBody,{children:$?ft($):Q?pt():V?[dt(`virtual-top`,Ye),...G.map(e=>mt(z[e.index],e.index,e)),dt(`virtual-bottom`,Xe)]:z.map((e,t)=>mt(e,t))})]}),ut&&I&&(0,c.jsx)(ie.DataTablePagination,{pageIndex:I.pageIndex,pageSize:I.pageSize,pageCount:I.pageCount,rowCount:I.rowCount,pageSizeOptions:I.pageSizeOptions,showPageSize:I.showPageSize,labels:I.labels,disabled:C,onPageChange:I.onPageChange,onPageSizeChange:I.onPageSizeChange})]})]})}exports.DataTable=u;
+"use client";Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("../../../_virtual/_rolldown/runtime.cjs"),t=require("../../lib/utils.cjs"),n=require("../ui/button/index.cjs"),r=require("../ui/input/index.cjs"),i=require("../ui/table/index.cjs"),a=require("../../hooks/use-is-mobile.cjs"),o=require("../feedback/loading-state.cjs"),s=require("../display/data-state.cjs"),ee=require("../../../node_modules/@tanstack/react-virtual/dist/esm/index.cjs"),te=require("./data-table-actions-column.cjs"),ne=require("./data-table-bulk-actions.cjs"),re=require("./data-table-column-visibility-menu.cjs"),ie=require("./data-table-pagination.cjs"),ae=require("./data-table-toolbar.cjs");let c=require("react");c=e.__toESM(c,1);let l=require("react/jsx-runtime"),u=require("@tanstack/react-table");var oe={compact:`h-8 px-2 py-1.5`,default:`h-10 px-2 py-2`,comfortable:`h-12 px-3 py-3`},se={compact:`px-2 py-1.5`,default:`p-2`,comfortable:`px-3 py-3`};function ce(e,t){return typeof t==`function`?t(e):t}function le(e,t){return typeof t==`function`?t(e):t}function ue(e,t){return typeof t==`function`?t(e):t}function de(e){return e==null||e===``}function fe(e){let t=e.column.columnDef.header;return typeof t==`string`?t:typeof t==`number`?String(t):e.column.id===`actions`?`Actions`:e.column.id}function d({className:e,columns:d,data:f,title:p,description:m,features:h,search:g,filters:_,summary:v,toolbarActions:y,rowActions:b,bulkActions:x,onRefresh:pe,onExport:S,refreshLabel:me=`Refresh`,exportLabel:he=`Export`,getRowId:ge,isLoading:C=!1,isError:_e=!1,emptyState:ve,errorState:ye,loadingState:be,loadingVariant:xe=`skeleton`,toolbar:w,toolbarProps:T,pagination:E,sorting:Se,onSortingChange:Ce,columnVisibility:we,onColumnVisibilityChange:Te,rowSelection:Ee,onRowSelectionChange:De,enableRowSelection:Oe,renderMobileCard:D,mobileLayout:ke=`auto`,onRowClick:O,onRowDoubleClick:Ae,getRowDisabled:k,density:A=`default`,striped:j=!1,bordered:M=!1,stickyHeader:N=!1,skeletonRows:je=6,skeletonCellClassName:Me,cellFallback:P=`-`,tableClassName:Ne,tableWrapperClassName:Pe,headerCellClassName:Fe,cellClassName:Ie,rowClassName:F,renderExpandedRow:Le,expanded:Re,onExpandedChange:ze,getRowCanExpand:Be,columnPinning:Ve,onColumnPinningChange:He,virtualization:Ue,...We}){let Ge=c.useMemo(()=>{let e=d;return!b||h?.rowActions===!1?e:[...e,te.createDataTableActionsColumn({getActions:b})]},[d,h?.rowActions,b]),I=E===!1?void 0:E,Ke=I?{pageIndex:I.pageIndex,pageSize:I.pageSize}:void 0,qe=!!(I&&I.manual!==!1),Je=Ee??{},L=(0,u.useReactTable)({data:f,columns:Ge,getRowId:ge,getCoreRowModel:(0,u.getCoreRowModel)(),getPaginationRowModel:I&&!qe?(0,u.getPaginationRowModel)():void 0,manualPagination:qe,pageCount:I?.pageCount,state:{sorting:Se,columnVisibility:we,rowSelection:Je,pagination:Ke,expanded:Re,...Ve?{columnPinning:Ve}:{}},onSortingChange:Ce,onColumnVisibilityChange:Te,onRowSelectionChange:De,onExpandedChange:ze,onColumnPinningChange:He,enableRowSelection:Oe,getRowCanExpand:Be,getExpandedRowModel:(0,u.getExpandedRowModel)()}),R=L.getRowModel().rows,Ye=c.useRef(null),z=Ue===!1?void 0:Ue,B=!!(z&&z.enabled!==!1&&R.length>0),V=z?.height??480,Xe=z?.onRangeChange,H=ee.useVirtualizer({count:B?R.length:0,getScrollElement:()=>Ye.current,estimateSize:()=>z?.estimateRowHeight??48,getItemKey:e=>R[e]?.id??e,overscan:z?.overscan??8,initialRect:{width:0,height:typeof V==`number`?V:480},onChange(e){if(!Xe)return;let t=e.getVirtualItems();Xe({startIndex:t[0]?.index??-1,endIndex:t.at(-1)?.index??-1})}}),Ze=B?H.getVirtualItems():[],U=z?.estimateRowHeight??48,Qe=B?Math.min(R.length,Math.ceil((typeof V==`number`?V:480)/U)+(z?.overscan??8)):0,W=Ze.length>0?Ze:Array.from({length:Qe},(e,t)=>({key:R[t]?.id??t,index:t,start:t*U,end:(t+1)*U,size:U,lane:0})),$e=W[0]?.start??0,et=W.length?Math.max(H.getTotalSize()-W[W.length-1].end,0):0,G=L.getSelectedRowModel().rows.map(e=>e.original),tt=G.length,K=c.useMemo(()=>({table:L,data:f,selectedRows:G}),[f,G,L]),nt=L.getVisibleLeafColumns(),rt=Math.max(nt.length,1),it=typeof w==`function`?w(L):w,at=typeof T==`function`?T(L):T,q=typeof _==`function`?_(K):_,J=typeof v==`function`?v(K):v,ot=!!(g&&h?.search!==!1),st=!!(h?.columnVisibility&&L.getAllLeafColumns().some(e=>e.getCanHide())),Y=!!(h?.refresh&&pe),X=!!(h?.export&&S),ct=!!(h?.bulkActions!==!1&&x?.length),lt=st&&!!(p||m||g||q||J||y||Y||X),ut=ot&&g?(0,l.jsx)(r.Input,{type:`search`,value:g.value,onValueChange:g.onValueChange,placeholder:g.placeholder??`Search...`,wrapperClassName:g.wrapperClassName??g.className,inputClassName:g.inputClassName,disabled:g.disabled,clearable:g.clearable,clearLabel:g.clearLabel,searchIcon:g.searchIcon}):void 0,dt=(0,l.jsxs)(l.Fragment,{children:[typeof y==`function`?y(K):y,lt&&(0,l.jsx)(re.DataTableColumnVisibilityMenu,{table:L}),Y&&(0,l.jsx)(n.Button,{type:`button`,variant:`outline`,size:`sm`,disabled:C,onClick:()=>pe?.(K),children:me}),X&&(0,l.jsx)(n.Button,{type:`button`,variant:`outline`,size:`sm`,onClick:()=>S?.(K),children:he})]}),ft=ct?(0,l.jsx)(ne.DataTableBulkActions,{rows:G,actions:x??[],selectedLabel:()=>`Actions`,clearLabel:null,onClearSelection:()=>L.resetRowSelection(),hideWhenEmpty:!1}):void 0,pt=!!(it||at||p||m||ut||q||J||y||lt||Y||X||ft),mt=!!(I&&!I.hidden),Z=C&&xe===`skeleton`,ht=a.useIsMobile(),gt=ke!==`scroll`&&ht,_t=(e,t)=>t>0?(0,l.jsx)(i.TableRow,{"aria-hidden":`true`,className:`pointer-events-none border-0 hover:bg-transparent`,children:(0,l.jsx)(i.TableCell,{colSpan:rt,className:`border-0 p-0`,style:{height:t}})},e):null,vt=e=>(0,l.jsx)(i.TableRow,{children:(0,l.jsx)(i.TableCell,{colSpan:rt,className:`p-0`,children:e})}),yt=()=>Array.from({length:Math.max(je,1)},(e,n)=>(0,l.jsx)(i.TableRow,{"aria-hidden":`true`,children:nt.map(e=>(0,l.jsx)(i.TableCell,{className:t.cn(se[A],M&&`border-r last:border-r-0`),children:(0,l.jsx)(`div`,{className:t.cn(`h-4 w-full max-w-40 animate-pulse rounded-md bg-muted`,n%3==1&&`max-w-24`,n%3==2&&`max-w-32`,Me)})},`${e.id}-${n}`))},`skeleton-${n}`)),Q=Z?null:C?(0,l.jsx)(o.LoadingState,{label:`Loading data...`,...be}):_e?(0,l.jsx)(s.DataState,{status:`error`,title:`Could not load data`,description:`Please try again.`,variant:`plain`,...ye}):R.length===0?(0,l.jsx)(s.DataState,{status:`empty`,variant:`plain`,...ve}):null,$=(e,n,r)=>{let a=k?.(e)??!1;return(0,l.jsxs)(c.Fragment,{children:[(0,l.jsx)(i.TableRow,{ref:r&&z?.measureRows!==!1?H.measureElement:void 0,"data-index":r?.index,"data-state":e.getIsSelected()?`selected`:void 0,"data-striped":j&&n%2==1?`true`:void 0,"data-disabled":a||void 0,className:t.cn(O&&!a&&`cursor-pointer`,!a&&`transition-colors hover:bg-[color:color-mix(in_oklch,var(--primary),transparent_96%)] data-[state=selected]:bg-[color:color-mix(in_oklch,var(--primary),transparent_90%)]`,a&&`pointer-events-none opacity-55`,ce(e,F)),onClick:()=>{a||O?.(e)},onDoubleClick:()=>{a||Ae?.(e)},children:e.getVisibleCells().map(e=>{let n=(0,u.flexRender)(e.column.columnDef.cell,e.getContext());return(0,l.jsx)(i.TableCell,{style:{...e.column.getIsPinned()===`left`?{left:`${e.column.getStart(`left`)}px`,position:`sticky`,zIndex:10}:{},...e.column.getIsPinned()===`right`?{right:`${e.column.getAfter(`right`)}px`,position:`sticky`,zIndex:10}:{}},className:t.cn(se[A],e.column.getIsPinned()&&`bg-card shadow-[1px_0_0_var(--border)]`,M&&`border-r last:border-r-0`,ue(e,Ie)),children:de(n)?P:n},e.id)})}),e.getIsExpanded()&&Le?(0,l.jsx)(i.TableRow,{className:`bg-muted/50 hover:bg-muted/50`,children:(0,l.jsx)(i.TableCell,{colSpan:e.getVisibleCells().length,children:Le(e)})}):null]},e.id)},bt=e=>{let n=k?.(e)??!1,r=e.getVisibleCells();return(0,l.jsx)(`article`,{"data-slot":`data-table-mobile-card`,"data-state":e.getIsSelected()?`selected`:void 0,"data-disabled":n||void 0,className:t.cn(`grid gap-3 rounded-[var(--aui-card-radius,var(--radius-lg))] border border-[color:var(--aui-card-border,var(--border))] bg-card p-3 shadow-[var(--aui-card-shadow,0_10px_24px_rgba(15,23,42,0.07))]`,O&&!n&&`cursor-pointer transition-colors hover:bg-[color:color-mix(in_oklch,var(--primary),transparent_96%)]`,n&&`pointer-events-none opacity-55`,ce(e,F)),role:O&&!n?`button`:void 0,tabIndex:O&&!n?0:void 0,onClick:()=>{n||O?.(e)},onKeyDown:t=>{t.target!==t.currentTarget||n||!O||(t.key===`Enter`||t.key===` `)&&(t.preventDefault(),O(e))},children:r.map(e=>{let t=(0,u.flexRender)(e.column.columnDef.cell,e.getContext());return(0,l.jsxs)(`div`,{"data-slot":`data-table-mobile-cell`,className:`grid grid-cols-[minmax(7rem,0.42fr)_minmax(0,1fr)] items-start gap-3 text-sm`,children:[(0,l.jsx)(`span`,{className:`min-w-0 text-xs font-semibold uppercase tracking-wide text-muted-foreground`,children:fe(e)}),(0,l.jsx)(`div`,{className:`min-w-0 text-right text-foreground/92 [&>*]:ml-auto`,children:de(t)?P:t})]},e.id)})},e.id)};return(0,l.jsxs)(`div`,{"data-slot":`data-table`,className:t.cn(`grid gap-3`,e),...We,children:[pt&&(it??(0,l.jsx)(ae.DataTableToolbar,{title:p,description:m,search:ut,filters:q,summary:J,actions:dt,selectionActions:ft,selectedCount:tt,totalCount:I?I.rowCount??f.length:f.length,variant:`plain`,...at})),gt&&(0,l.jsx)(`div`,{className:`grid gap-3`,children:Q??(Z?(0,l.jsx)(o.LoadingState,{label:`Loading data...`,...be}):R.map(e=>(0,l.jsx)(c.Fragment,{children:D?D(e):bt(e)},e.id)))}),!gt&&(0,l.jsxs)(`div`,{"data-slot":`data-table-wrapper`,"data-density":A,"data-striped":j||void 0,"data-bordered":M||void 0,"data-virtualized":B||void 0,className:t.cn(`overflow-hidden rounded-[var(--aui-card-radius,var(--radius-lg))] border border-[color:var(--aui-card-border,var(--border))] bg-card shadow-[var(--aui-card-shadow,0_10px_24px_rgba(15,23,42,0.07))] backdrop-blur`,Pe),children:[(0,l.jsxs)(i.Table,{containerRef:Ye,containerStyle:B?{height:V,overscrollBehavior:`contain`}:void 0,containerClassName:t.cn(`rounded-none border-0 bg-transparent shadow-none ring-0`,B&&`overflow-auto`),className:t.cn(`text-[0.95rem]`,Ne),"aria-rowcount":R.length,children:[(0,l.jsx)(i.TableHeader,{className:t.cn((N||B)&&`sticky top-0 z-10 shadow-sm backdrop-blur`),children:L.getHeaderGroups().map(e=>(0,l.jsx)(i.TableRow,{children:e.headers.map(e=>(0,l.jsx)(i.TableHead,{style:{width:e.getSize(),...e.column.getIsPinned()===`left`?{left:`${e.column.getStart(`left`)}px`,position:`sticky`,zIndex:N?20:11}:{},...e.column.getIsPinned()===`right`?{right:`${e.column.getAfter(`right`)}px`,position:`sticky`,zIndex:N?20:11}:{}},className:t.cn(oe[A],`bg-[color:color-mix(in_oklch,var(--card),var(--background)_10%)] text-muted-foreground`,(N||B)&&`bg-[color:color-mix(in_oklch,var(--card),transparent_12%)] backdrop-blur`,e.column.getIsPinned()&&`bg-card shadow-[1px_0_0_var(--border)]`,M&&`border-r last:border-r-0`,le(e,Fe)),children:e.isPlaceholder?null:(0,u.flexRender)(e.column.columnDef.header,e.getContext())},e.id))},e.id))}),(0,l.jsx)(i.TableBody,{children:Q?vt(Q):Z?yt():B?[_t(`virtual-top`,$e),...W.map(e=>$(R[e.index],e.index,e)),_t(`virtual-bottom`,et)]:R.map((e,t)=>$(e,t))})]}),mt&&I&&(0,l.jsx)(ie.DataTablePagination,{pageIndex:I.pageIndex,pageSize:I.pageSize,pageCount:I.pageCount,rowCount:I.rowCount,pageSizeOptions:I.pageSizeOptions,showPageSize:I.showPageSize,labels:I.labels,disabled:C,onPageChange:I.onPageChange,onPageSizeChange:I.onPageSizeChange})]})]})}exports.DataTable=d;

package/dist/src/components/data-table/data-table.js

@@ -3,77 +3,82 @@ import { cn as e } from "../../lib/utils.js";
 import { Button as t } from "../ui/button/index.js";
 import { Input as n } from "../ui/input/index.js";
 import { Table as r, TableBody as i, TableCell as a, TableHead as ee, TableHeader as te, TableRow as o } from "../ui/table/index.js";
+import { useIsMobile as ne } from "../../hooks/use-is-mobile.js";
 import { LoadingState as s } from "../feedback/loading-state.js";
-import { DataState as ne } from "../display/data-state.js";
-import { useVirtualizer as re } from "../../../node_modules/@tanstack/react-virtual/dist/esm/index.js";
-import { createDataTableActionsColumn as ie } from "./data-table-actions-column.js";
-import { DataTableBulkActions as ae } from "./data-table-bulk-actions.js";
-import { DataTableColumnVisibilityMenu as oe } from "./data-table-column-visibility-menu.js";
-import { DataTablePagination as se } from "./data-table-pagination.js";
-import { DataTableToolbar as ce } from "./data-table-toolbar.js";
+import { DataState as re } from "../display/data-state.js";
+import { useVirtualizer as ie } from "../../../node_modules/@tanstack/react-virtual/dist/esm/index.js";
+import { createDataTableActionsColumn as ae } from "./data-table-actions-column.js";
+import { DataTableBulkActions as oe } from "./data-table-bulk-actions.js";
+import { DataTableColumnVisibilityMenu as se } from "./data-table-column-visibility-menu.js";
+import { DataTablePagination as ce } from "./data-table-pagination.js";
+import { DataTableToolbar as le } from "./data-table-toolbar.js";
 import * as c from "react";
-import { Fragment as le, jsx as l, jsxs as u } from "react/jsx-runtime";
-import { flexRender as d, getCoreRowModel as ue, getExpandedRowModel as de, getPaginationRowModel as fe, useReactTable as pe } from "@tanstack/react-table";
+import { Fragment as ue, jsx as l, jsxs as u } from "react/jsx-runtime";
+import { flexRender as d, getCoreRowModel as de, getExpandedRowModel as fe, getPaginationRowModel as pe, useReactTable as me } from "@tanstack/react-table";
 //#region src/components/data-table/data-table.tsx
-var me = {
+var he = {
 	compact: "h-8 px-2 py-1.5",
 	default: "h-10 px-2 py-2",
 	comfortable: "h-12 px-3 py-3"
-}, he = {
+}, ge = {
 	compact: "px-2 py-1.5",
 	default: "p-2",
 	comfortable: "px-3 py-3"
 };
-function ge(e, t) {
-	return typeof t == "function" ? t(e) : t;
-}
 function _e(e, t) {
 	return typeof t == "function" ? t(e) : t;
 }
 function ve(e, t) {
 	return typeof t == "function" ? t(e) : t;
 }
-function ye(e) {
+function ye(e, t) {
+	return typeof t == "function" ? t(e) : t;
+}
+function be(e) {
 	return e == null || e === "";
 }
-function be({ className: be, columns: xe, data: f, title: p, description: m, features: h, search: g, filters: _, summary: v, toolbarActions: y, rowActions: b, bulkActions: Se, onRefresh: Ce, onExport: x, refreshLabel: we = "Refresh", exportLabel: Te = "Export", getRowId: Ee, isLoading: S = !1, isError: De = !1, emptyState: Oe, errorState: ke, loadingState: C, loadingVariant: Ae = "skeleton", toolbar: w, toolbarProps: T, pagination: E, sorting: je, onSortingChange: Me, columnVisibility: Ne, onColumnVisibilityChange: Pe, rowSelection: Fe, onRowSelectionChange: Ie, enableRowSelection: Le, renderMobileCard: D, onRowClick: O, onRowDoubleClick: Re, getRowDisabled: ze, density: k = "default", striped: A = !1, bordered: j = !1, stickyHeader: M = !1, skeletonRows: Be = 6, skeletonCellClassName: Ve, cellFallback: He = "-", tableClassName: Ue, tableWrapperClassName: We, headerCellClassName: Ge, cellClassName: Ke, rowClassName: qe, renderExpandedRow: N, expanded: Je, onExpandedChange: Ye, getRowCanExpand: Xe, columnPinning: P, onColumnPinningChange: Ze, virtualization: F, ...Qe }) {
-	let $e = c.useMemo(() => {
-		let e = xe;
-		return !b || h?.rowActions === !1 ? e : [...e, ie({ getActions: b })];
+function xe(e) {
+	let t = e.column.columnDef.header;
+	return typeof t == "string" ? t : typeof t == "number" ? String(t) : e.column.id === "actions" ? "Actions" : e.column.id;
+}
+function Se({ className: Se, columns: Ce, data: f, title: p, description: m, features: h, search: g, filters: _, summary: v, toolbarActions: y, rowActions: b, bulkActions: we, onRefresh: Te, onExport: x, refreshLabel: Ee = "Refresh", exportLabel: De = "Export", getRowId: Oe, isLoading: S = !1, isError: ke = !1, emptyState: Ae, errorState: je, loadingState: C, loadingVariant: Me = "skeleton", toolbar: w, toolbarProps: T, pagination: E, sorting: Ne, onSortingChange: Pe, columnVisibility: Fe, onColumnVisibilityChange: Ie, rowSelection: Le, onRowSelectionChange: Re, enableRowSelection: ze, renderMobileCard: D, mobileLayout: Be = "auto", onRowClick: O, onRowDoubleClick: Ve, getRowDisabled: k, density: A = "default", striped: j = !1, bordered: M = !1, stickyHeader: N = !1, skeletonRows: He = 6, skeletonCellClassName: Ue, cellFallback: P = "-", tableClassName: We, tableWrapperClassName: Ge, headerCellClassName: Ke, cellClassName: qe, rowClassName: F, renderExpandedRow: Je, expanded: Ye, onExpandedChange: Xe, getRowCanExpand: Ze, columnPinning: Qe, onColumnPinningChange: $e, virtualization: et, ...tt }) {
+	let nt = c.useMemo(() => {
+		let e = Ce;
+		return !b || h?.rowActions === !1 ? e : [...e, ae({ getActions: b })];
 	}, [
-		xe,
+		Ce,
 		h?.rowActions,
 		b
-	]), I = E === !1 ? void 0 : E, et = I ? {
+	]), I = E === !1 ? void 0 : E, rt = I ? {
 		pageIndex: I.pageIndex,
 		pageSize: I.pageSize
-	} : void 0, tt = !!(I && I.manual !== !1), nt = Fe ?? {}, L = pe({
+	} : void 0, it = !!(I && I.manual !== !1), at = Le ?? {}, L = me({
 		data: f,
-		columns: $e,
-		getRowId: Ee,
-		getCoreRowModel: ue(),
-		getPaginationRowModel: I && !tt ? fe() : void 0,
-		manualPagination: tt,
+		columns: nt,
+		getRowId: Oe,
+		getCoreRowModel: de(),
+		getPaginationRowModel: I && !it ? pe() : void 0,
+		manualPagination: it,
 		pageCount: I?.pageCount,
 		state: {
-			sorting: je,
-			columnVisibility: Ne,
-			rowSelection: nt,
-			pagination: et,
-			expanded: Je,
-			...P ? { columnPinning: P } : {}
+			sorting: Ne,
+			columnVisibility: Fe,
+			rowSelection: at,
+			pagination: rt,
+			expanded: Ye,
+			...Qe ? { columnPinning: Qe } : {}
 		},
-		onSortingChange: Me,
-		onColumnVisibilityChange: Pe,
-		onRowSelectionChange: Ie,
-		onExpandedChange: Ye,
-		onColumnPinningChange: Ze,
-		enableRowSelection: Le,
-		getRowCanExpand: Xe,
-		getExpandedRowModel: de()
-	}), R = L.getRowModel().rows, rt = c.useRef(null), z = F === !1 ? void 0 : F, B = !!(z && z.enabled !== !1 && R.length > 0), V = z?.height ?? 480, it = z?.onRangeChange, H = re({
+		onSortingChange: Pe,
+		onColumnVisibilityChange: Ie,
+		onRowSelectionChange: Re,
+		onExpandedChange: Xe,
+		onColumnPinningChange: $e,
+		enableRowSelection: ze,
+		getRowCanExpand: Ze,
+		getExpandedRowModel: fe()
+	}), R = L.getRowModel().rows, ot = c.useRef(null), z = et === !1 ? void 0 : et, B = !!(z && z.enabled !== !1 && R.length > 0), V = z?.height ?? 480, st = z?.onRangeChange, H = ie({
 		count: B ? R.length : 0,
-		getScrollElement: () => rt.current,
+		getScrollElement: () => ot.current,
 		estimateSize: () => z?.estimateRowHeight ?? 48,
 		getItemKey: (e) => R[e]?.id ?? e,
 		overscan: z?.overscan ?? 8,
@@ -82,21 +87,21 @@ function be({ className: be, columns: xe, data: f, title: p, description: m, fea
 			height: typeof V == "number" ? V : 480
 		},
 		onChange(e) {
-			if (!it) return;
+			if (!st) return;
 			let t = e.getVirtualItems();
-			it({
+			st({
 				startIndex: t[0]?.index ?? -1,
 				endIndex: t.at(-1)?.index ?? -1
 			});
 		}
-	}), at = B ? H.getVirtualItems() : [], U = z?.estimateRowHeight ?? 48, ot = B ? Math.min(R.length, Math.ceil((typeof V == "number" ? V : 480) / U) + (z?.overscan ?? 8)) : 0, W = at.length > 0 ? at : Array.from({ length: ot }, (e, t) => ({
+	}), ct = B ? H.getVirtualItems() : [], U = z?.estimateRowHeight ?? 48, lt = B ? Math.min(R.length, Math.ceil((typeof V == "number" ? V : 480) / U) + (z?.overscan ?? 8)) : 0, W = ct.length > 0 ? ct : Array.from({ length: lt }, (e, t) => ({
 		key: R[t]?.id ?? t,
 		index: t,
 		start: t * U,
 		end: (t + 1) * U,
 		size: U,
 		lane: 0
-	})), st = W[0]?.start ?? 0, ct = W.length ? Math.max(H.getTotalSize() - W[W.length - 1].end, 0) : 0, G = L.getSelectedRowModel().rows.map((e) => e.original), lt = G.length, K = c.useMemo(() => ({
+	})), ut = W[0]?.start ?? 0, dt = W.length ? Math.max(H.getTotalSize() - W[W.length - 1].end, 0) : 0, G = L.getSelectedRowModel().rows.map((e) => e.original), ft = G.length, K = c.useMemo(() => ({
 		table: L,
 		data: f,
 		selectedRows: G
@@ -104,7 +109,7 @@ function be({ className: be, columns: xe, data: f, title: p, description: m, fea
 		f,
 		G,
 		L
-	]), ut = L.getVisibleLeafColumns(), q = Math.max(ut.length, 1), dt = typeof w == "function" ? w(L) : w, ft = typeof T == "function" ? T(L) : T, J = typeof _ == "function" ? _(K) : _, Y = typeof v == "function" ? v(K) : v, pt = !!(g && h?.search !== !1), mt = !!(h?.columnVisibility && L.getAllLeafColumns().some((e) => e.getCanHide())), X = !!(h?.refresh && Ce), Z = !!(h?.export && x), ht = !!(h?.bulkActions !== !1 && Se?.length), gt = mt && !!(p || m || g || J || Y || y || X || Z), _t = pt && g ? /* @__PURE__ */ l(n, {
+	]), pt = L.getVisibleLeafColumns(), mt = Math.max(pt.length, 1), ht = typeof w == "function" ? w(L) : w, gt = typeof T == "function" ? T(L) : T, q = typeof _ == "function" ? _(K) : _, J = typeof v == "function" ? v(K) : v, _t = !!(g && h?.search !== !1), vt = !!(h?.columnVisibility && L.getAllLeafColumns().some((e) => e.getCanHide())), Y = !!(h?.refresh && Te), X = !!(h?.export && x), yt = !!(h?.bulkActions !== !1 && we?.length), bt = vt && !!(p || m || g || q || J || y || Y || X), xt = _t && g ? /* @__PURE__ */ l(n, {
 		type: "search",
 		value: g.value,
 		onValueChange: g.onValueChange,
@@ -115,76 +120,76 @@ function be({ className: be, columns: xe, data: f, title: p, description: m, fea
 		clearable: g.clearable,
 		clearLabel: g.clearLabel,
 		searchIcon: g.searchIcon
-	}) : void 0, vt = /* @__PURE__ */ u(le, { children: [
+	}) : void 0, St = /* @__PURE__ */ u(ue, { children: [
 		typeof y == "function" ? y(K) : y,
-		gt && /* @__PURE__ */ l(oe, { table: L }),
-		X && /* @__PURE__ */ l(t, {
+		bt && /* @__PURE__ */ l(se, { table: L }),
+		Y && /* @__PURE__ */ l(t, {
 			type: "button",
 			variant: "outline",
 			size: "sm",
 			disabled: S,
-			onClick: () => Ce?.(K),
-			children: we
+			onClick: () => Te?.(K),
+			children: Ee
 		}),
-		Z && /* @__PURE__ */ l(t, {
+		X && /* @__PURE__ */ l(t, {
 			type: "button",
 			variant: "outline",
 			size: "sm",
 			onClick: () => x?.(K),
-			children: Te
+			children: De
 		})
-	] }), yt = ht ? /* @__PURE__ */ l(ae, {
+	] }), Ct = yt ? /* @__PURE__ */ l(oe, {
 		rows: G,
-		actions: Se ?? [],
+		actions: we ?? [],
 		selectedLabel: () => "Actions",
 		clearLabel: null,
 		onClearSelection: () => L.resetRowSelection(),
 		hideWhenEmpty: !1
-	}) : void 0, bt = !!(dt || ft || p || m || _t || J || Y || y || gt || X || Z || yt), xt = !!(I && !I.hidden), Q = S && Ae === "skeleton", St = (e, t) => t > 0 ? /* @__PURE__ */ l(o, {
+	}) : void 0, wt = !!(ht || gt || p || m || xt || q || J || y || bt || Y || X || Ct), Tt = !!(I && !I.hidden), Z = S && Me === "skeleton", Et = ne(), Q = Be !== "scroll" && Et, Dt = (e, t) => t > 0 ? /* @__PURE__ */ l(o, {
 		"aria-hidden": "true",
 		className: "pointer-events-none border-0 hover:bg-transparent",
 		children: /* @__PURE__ */ l(a, {
-			colSpan: q,
+			colSpan: mt,
 			className: "border-0 p-0",
 			style: { height: t }
 		})
-	}, e) : null, Ct = (e) => /* @__PURE__ */ l(o, { children: /* @__PURE__ */ l(a, {
-		colSpan: q,
+	}, e) : null, Ot = (e) => /* @__PURE__ */ l(o, { children: /* @__PURE__ */ l(a, {
+		colSpan: mt,
 		className: "p-0",
 		children: e
-	}) }), wt = () => Array.from({ length: Math.max(Be, 1) }, (t, n) => /* @__PURE__ */ l(o, {
+	}) }), kt = () => Array.from({ length: Math.max(He, 1) }, (t, n) => /* @__PURE__ */ l(o, {
 		"aria-hidden": "true",
-		children: ut.map((t) => /* @__PURE__ */ l(a, {
-			className: e(he[k], j && "border-r last:border-r-0"),
-			children: /* @__PURE__ */ l("div", { className: e("h-4 w-full max-w-40 animate-pulse rounded-md bg-muted", n % 3 == 1 && "max-w-24", n % 3 == 2 && "max-w-32", Ve) })
+		children: pt.map((t) => /* @__PURE__ */ l(a, {
+			className: e(ge[A], M && "border-r last:border-r-0"),
+			children: /* @__PURE__ */ l("div", { className: e("h-4 w-full max-w-40 animate-pulse rounded-md bg-muted", n % 3 == 1 && "max-w-24", n % 3 == 2 && "max-w-32", Ue) })
 		}, `${t.id}-${n}`))
-	}, `skeleton-${n}`)), $ = Q ? null : S ? /* @__PURE__ */ l(s, {
+	}, `skeleton-${n}`)), $ = Z ? null : S ? /* @__PURE__ */ l(s, {
 		label: "Loading data...",
 		...C
-	}) : De ? /* @__PURE__ */ l(ne, {
+	}) : ke ? /* @__PURE__ */ l(re, {
 		status: "error",
 		title: "Could not load data",
 		description: "Please try again.",
 		variant: "plain",
-		...ke
-	}) : R.length === 0 ? /* @__PURE__ */ l(ne, {
+		...je
+	}) : R.length === 0 ? /* @__PURE__ */ l(re, {
 		status: "empty",
 		variant: "plain",
-		...Oe
-	}) : null, Tt = (t, n, r) => {
-		let i = ze?.(t) ?? !1;
+		...Ae
+	}) : null, At = (t, n, r) => {
+		let i = k?.(t) ?? !1;
 		return /* @__PURE__ */ u(c.Fragment, { children: [/* @__PURE__ */ l(o, {
 			ref: r && z?.measureRows !== !1 ? H.measureElement : void 0,
 			"data-index": r?.index,
 			"data-state": t.getIsSelected() ? "selected" : void 0,
-			"data-striped": A && n % 2 == 1 ? "true" : void 0,
+			"data-striped": j && n % 2 == 1 ? "true" : void 0,
 			"data-disabled": i || void 0,
-			className: e(O && !i && "cursor-pointer", !i && "transition-colors hover:bg-[color:color-mix(in_oklch,var(--primary),transparent_96%)] data-[state=selected]:bg-[color:color-mix(in_oklch,var(--primary),transparent_90%)]", i && "pointer-events-none opacity-55", ge(t, qe)),
+			className: e(O && !i && "cursor-pointer", !i && "transition-colors hover:bg-[color:color-mix(in_oklch,var(--primary),transparent_96%)] data-[state=selected]:bg-[color:color-mix(in_oklch,var(--primary),transparent_90%)]", i && "pointer-events-none opacity-55", _e(t, F)),
 			onClick: () => {
 				i || O?.(t);
 			},
 			onDoubleClick: () => {
-				i || Re?.(t);
+				i || Ve?.(t);
 			},
 			children: t.getVisibleCells().map((t) => {
 				let n = d(t.column.columnDef.cell, t.getContext());
@@ -201,84 +206,114 @@ function be({ className: be, columns: xe, data: f, title: p, description: m, fea
 							zIndex: 10
 						} : {}
 					},
-					className: e(he[k], t.column.getIsPinned() && "bg-card shadow-[1px_0_0_var(--border)]", j && "border-r last:border-r-0", ve(t, Ke)),
-					children: ye(n) ? He : n
+					className: e(ge[A], t.column.getIsPinned() && "bg-card shadow-[1px_0_0_var(--border)]", M && "border-r last:border-r-0", ye(t, qe)),
+					children: be(n) ? P : n
 				}, t.id);
 			})
-		}), t.getIsExpanded() && N ? /* @__PURE__ */ l(o, {
+		}), t.getIsExpanded() && Je ? /* @__PURE__ */ l(o, {
 			className: "bg-muted/50 hover:bg-muted/50",
 			children: /* @__PURE__ */ l(a, {
 				colSpan: t.getVisibleCells().length,
-				children: N(t)
+				children: Je(t)
 			})
 		}) : null] }, t.id);
+	}, jt = (t) => {
+		let n = k?.(t) ?? !1, r = t.getVisibleCells();
+		return /* @__PURE__ */ l("article", {
+			"data-slot": "data-table-mobile-card",
+			"data-state": t.getIsSelected() ? "selected" : void 0,
+			"data-disabled": n || void 0,
+			className: e("grid gap-3 rounded-[var(--aui-card-radius,var(--radius-lg))] border border-[color:var(--aui-card-border,var(--border))] bg-card p-3 shadow-[var(--aui-card-shadow,0_10px_24px_rgba(15,23,42,0.07))]", O && !n && "cursor-pointer transition-colors hover:bg-[color:color-mix(in_oklch,var(--primary),transparent_96%)]", n && "pointer-events-none opacity-55", _e(t, F)),
+			role: O && !n ? "button" : void 0,
+			tabIndex: O && !n ? 0 : void 0,
+			onClick: () => {
+				n || O?.(t);
+			},
+			onKeyDown: (e) => {
+				e.target !== e.currentTarget || n || !O || (e.key === "Enter" || e.key === " ") && (e.preventDefault(), O(t));
+			},
+			children: r.map((e) => {
+				let t = d(e.column.columnDef.cell, e.getContext());
+				return /* @__PURE__ */ u("div", {
+					"data-slot": "data-table-mobile-cell",
+					className: "grid grid-cols-[minmax(7rem,0.42fr)_minmax(0,1fr)] items-start gap-3 text-sm",
+					children: [/* @__PURE__ */ l("span", {
+						className: "min-w-0 text-xs font-semibold uppercase tracking-wide text-muted-foreground",
+						children: xe(e)
+					}), /* @__PURE__ */ l("div", {
+						className: "min-w-0 text-right text-foreground/92 [&>*]:ml-auto",
+						children: be(t) ? P : t
+					})]
+				}, e.id);
+			})
+		}, t.id);
 	};
 	return /* @__PURE__ */ u("div", {
 		"data-slot": "data-table",
-		className: e("grid gap-3", be),
-		...Qe,
+		className: e("grid gap-3", Se),
+		...tt,
 		children: [
-			bt && (dt ?? /* @__PURE__ */ l(ce, {
+			wt && (ht ?? /* @__PURE__ */ l(le, {
 				title: p,
 				description: m,
-				search: _t,
-				filters: J,
-				summary: Y,
-				actions: vt,
-				selectionActions: yt,
-				selectedCount: lt,
+				search: xt,
+				filters: q,
+				summary: J,
+				actions: St,
+				selectionActions: Ct,
+				selectedCount: ft,
 				totalCount: I ? I.rowCount ?? f.length : f.length,
 				variant: "plain",
-				...ft
+				...gt
 			})),
-			D && /* @__PURE__ */ l("div", {
-				className: "grid gap-3 md:hidden",
-				children: $ ?? (Q ? /* @__PURE__ */ l(s, {
+			Q && /* @__PURE__ */ l("div", {
+				className: "grid gap-3",
+				children: $ ?? (Z ? /* @__PURE__ */ l(s, {
 					label: "Loading data...",
 					...C
-				}) : R.map((e) => /* @__PURE__ */ l(c.Fragment, { children: D(e) }, e.id)))
+				}) : R.map((e) => /* @__PURE__ */ l(c.Fragment, { children: D ? D(e) : jt(e) }, e.id)))
 			}),
-			/* @__PURE__ */ u("div", {
+			!Q && /* @__PURE__ */ u("div", {
 				"data-slot": "data-table-wrapper",
-				"data-density": k,
-				"data-striped": A || void 0,
-				"data-bordered": j || void 0,
+				"data-density": A,
+				"data-striped": j || void 0,
+				"data-bordered": M || void 0,
 				"data-virtualized": B || void 0,
-				className: e("overflow-hidden rounded-[var(--aui-card-radius,var(--radius-lg))] border border-[color:var(--aui-card-border,var(--border))] bg-card shadow-[var(--aui-card-shadow,0_10px_24px_rgba(15,23,42,0.07))] backdrop-blur", D && "hidden md:block", We),
+				className: e("overflow-hidden rounded-[var(--aui-card-radius,var(--radius-lg))] border border-[color:var(--aui-card-border,var(--border))] bg-card shadow-[var(--aui-card-shadow,0_10px_24px_rgba(15,23,42,0.07))] backdrop-blur", Ge),
 				children: [/* @__PURE__ */ u(r, {
-					containerRef: rt,
+					containerRef: ot,
 					containerStyle: B ? {
 						height: V,
 						overscrollBehavior: "contain"
 					} : void 0,
 					containerClassName: e("rounded-none border-0 bg-transparent shadow-none ring-0", B && "overflow-auto"),
-					className: e("text-[0.95rem]", Ue),
+					className: e("text-[0.95rem]", We),
 					"aria-rowcount": R.length,
 					children: [/* @__PURE__ */ l(te, {
-						className: e((M || B) && "sticky top-0 z-10 shadow-sm backdrop-blur"),
+						className: e((N || B) && "sticky top-0 z-10 shadow-sm backdrop-blur"),
 						children: L.getHeaderGroups().map((t) => /* @__PURE__ */ l(o, { children: t.headers.map((t) => /* @__PURE__ */ l(ee, {
 							style: {
 								width: t.getSize(),
 								...t.column.getIsPinned() === "left" ? {
 									left: `${t.column.getStart("left")}px`,
 									position: "sticky",
-									zIndex: M ? 20 : 11
+									zIndex: N ? 20 : 11
 								} : {},
 								...t.column.getIsPinned() === "right" ? {
 									right: `${t.column.getAfter("right")}px`,
 									position: "sticky",
-									zIndex: M ? 20 : 11
+									zIndex: N ? 20 : 11
 								} : {}
 							},
-							className: e(me[k], "bg-[color:color-mix(in_oklch,var(--card),var(--background)_10%)] text-muted-foreground", (M || B) && "bg-[color:color-mix(in_oklch,var(--card),transparent_12%)] backdrop-blur", t.column.getIsPinned() && "bg-card shadow-[1px_0_0_var(--border)]", j && "border-r last:border-r-0", _e(t, Ge)),
+							className: e(he[A], "bg-[color:color-mix(in_oklch,var(--card),var(--background)_10%)] text-muted-foreground", (N || B) && "bg-[color:color-mix(in_oklch,var(--card),transparent_12%)] backdrop-blur", t.column.getIsPinned() && "bg-card shadow-[1px_0_0_var(--border)]", M && "border-r last:border-r-0", ve(t, Ke)),
 							children: t.isPlaceholder ? null : d(t.column.columnDef.header, t.getContext())
 						}, t.id)) }, t.id))
-					}), /* @__PURE__ */ l(i, { children: $ ? Ct($) : Q ? wt() : B ? [
-						St("virtual-top", st),
-						...W.map((e) => Tt(R[e.index], e.index, e)),
-						St("virtual-bottom", ct)
-					] : R.map((e, t) => Tt(e, t)) })]
-				}), xt && I && /* @__PURE__ */ l(se, {
+					}), /* @__PURE__ */ l(i, { children: $ ? Ot($) : Z ? kt() : B ? [
+						Dt("virtual-top", ut),
+						...W.map((e) => At(R[e.index], e.index, e)),
+						Dt("virtual-bottom", dt)
+					] : R.map((e, t) => At(e, t)) })]
+				}), Tt && I && /* @__PURE__ */ l(ce, {
 					pageIndex: I.pageIndex,
 					pageSize: I.pageSize,
 					pageCount: I.pageCount,
@@ -295,4 +330,4 @@ function be({ className: be, columns: xe, data: f, title: p, description: m, fea
 	});
 }
 //#endregion
-export { be as DataTable };
+export { Se as DataTable };

package/dist/src/components/display/kanban.cjs

@@ -1 +1 @@
-"use client";Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("../../../_virtual/_rolldown/runtime.cjs"),t=require("../../lib/utils.cjs"),n=require("../ui/card/index.cjs"),r=require("../../../node_modules/@dnd-kit/helpers/dist/index.cjs"),i=require("../../../node_modules/@dnd-kit/react/index.cjs"),a=require("../../../node_modules/@dnd-kit/dom/sortable.cjs"),o=require("../../../node_modules/@dnd-kit/react/sortable.cjs");let s=require("react");s=e.__toESM(s,1);let c=require("lucide-react"),l=require("react/jsx-runtime");var u=`tembro-kanban-card:`,d=`tembro-kanban-column:`;function f(e){return`${u}${e}`}function p(e){return`${d}${e}`}function m(e){return e.startsWith(u)?e.slice(19):e}function h(e){let t=e===void 0?``:String(e);return t.startsWith(d)?t.slice(21):t}function g(e){return new Map(e.flatMap(e=>e.cards.map(e=>[f(e.key),e])))}function _(e,t){let n=g(e),i=r.move(Object.fromEntries(e.map(e=>[p(e.key),e.cards.map(e=>f(e.key))])),t);return e.map(e=>({...e,cards:(i[p(e.key)]??[]).map(e=>n.get(String(e))).filter(e=>!!e)}))}var v=s.forwardRef(function({label:e,disabled:t},n){return(0,l.jsx)(`button`,{ref:n,type:`button`,className:`inline-flex size-8 shrink-0 touch-none items-center justify-center rounded-md text-muted-foreground outline-none transition-colors hover:bg-muted hover:text-foreground focus-visible:ring-2 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-45`,"aria-label":e,disabled:t,onClick:e=>e.stopPropagation(),children:(0,l.jsx)(c.GripVerticalIcon,{className:`size-4`,"aria-hidden":`true`})})});function y({card:e,handle:t}){return(0,l.jsxs)(n.Card,{className:`transition-colors hover:bg-muted/40`,children:[(0,l.jsx)(n.CardHeader,{className:`p-3 pb-1`,children:(0,l.jsxs)(`div`,{className:`flex items-start justify-between gap-2`,children:[(0,l.jsx)(n.CardTitle,{className:`text-sm`,children:e.title}),(0,l.jsxs)(`div`,{className:`flex items-center gap-1`,children:[e.extra,t]})]})}),e.description||e.meta?(0,l.jsxs)(n.CardContent,{className:`grid gap-2 p-3 pt-0 text-xs text-muted-foreground`,children:[e.description,e.meta?(0,l.jsx)(`div`,{children:e.meta}):null]}):null]})}function b({card:e,column:n,index:r,boardDisabled:i,renderCard:a,onCardClick:s,dragHandleLabel:c,cardClassName:u}){let d=i||n.disabled===!0||e.disabled===!0,{ref:m,handleRef:h,isDragging:g,isDropTarget:_}=o.useSortable({id:f(e.key),index:r,group:p(n.key),type:`tembro-kanban-card`,accept:`tembro-kanban-card`,disabled:d,data:{cardKey:e.key,columnKey:n.key},transition:{duration:180,easing:`cubic-bezier(0.2, 0, 0, 1)`,idle:!0}}),b=(0,l.jsx)(v,{ref:h,label:c?.(e,n)??`Move ${String(e.title)}`,disabled:d}),x={index:r,isDragging:g,isDropTarget:_,handle:b};return(0,l.jsx)(`article`,{ref:m,"data-slot":`kanban-card`,"data-dragging":g||void 0,"data-drop-target":_||void 0,"data-disabled":d||void 0,role:s&&!d?`button`:void 0,tabIndex:s&&!d?0:void 0,"aria-label":typeof e.title==`string`?e.title:void 0,className:t.cn(`rounded-lg outline-none transition-[opacity,box-shadow]`,s&&!d&&`cursor-pointer focus-visible:ring-2 focus-visible:ring-ring`,_&&`ring-2 ring-primary/30`,g&&`opacity-30`,d&&`opacity-55`,u),onClick:()=>{d||s?.(e,n)},onKeyDown:t=>{t.target!==t.currentTarget||d||!s||(t.key===`Enter`||t.key===` `)&&(t.preventDefault(),s(e,n))},children:a?.(e,n,x)??(0,l.jsx)(y,{card:e,handle:b})})}function x({column:e,boardDisabled:n,renderCard:r,onCardClick:a,dragHandleLabel:o,emptyColumn:s,columnClassName:c,cardClassName:u}){let{ref:d,isDropTarget:f}=i.useDroppable({id:p(e.key),type:`tembro-kanban-column`,accept:`tembro-kanban-card`,disabled:n||e.disabled===!0,collisionPriority:1,data:{columnKey:e.key}});return(0,l.jsxs)(`section`,{ref:d,"data-slot":`kanban-column`,"data-drop-target":f||void 0,"data-disabled":e.disabled||void 0,"aria-label":typeof e.title==`string`?e.title:void 0,className:t.cn(`grid min-h-40 content-start gap-3 rounded-lg border bg-muted/35 p-3 transition-[border-color,background-color,box-shadow]`,f&&`border-primary/60 bg-primary/5 ring-2 ring-primary/15`,e.disabled&&`opacity-60`,c),children:[(0,l.jsxs)(`div`,{className:`flex items-start justify-between gap-3`,children:[(0,l.jsxs)(`div`,{className:`grid gap-0.5`,children:[(0,l.jsx)(`h3`,{className:`text-sm font-semibold text-foreground`,children:e.title}),e.description?(0,l.jsx)(`p`,{className:`text-xs text-muted-foreground`,children:e.description}):null]}),(0,l.jsx)(`div`,{className:`rounded-full bg-background px-2 py-0.5 text-xs text-muted-foreground`,children:e.count??e.cards.length})]}),(0,l.jsx)(`div`,{className:`grid min-h-16 content-start gap-2`,children:e.cards.length===0?(0,l.jsxs)(`div`,{className:`grid min-h-20 place-items-center rounded-lg border border-dashed p-3 text-center text-xs text-muted-foreground`,children:[(0,l.jsx)(`span`,{children:s}),(0,l.jsx)(`span`,{className:`sr-only`,children:`No cards yet.`})]}):e.cards.map((t,i)=>(0,l.jsx)(b,{card:t,column:e,index:i,boardDisabled:n,renderCard:r,onCardClick:a,dragHandleLabel:o,cardClassName:u},t.key))})]})}function S({columns:e,defaultColumns:n=[],onColumnsChange:r,onCardMove:o,renderCard:c,onCardClick:u,disabled:d=!1,emptyColumn:p=`Drop cards here.`,dragHandleLabel:g,columnClassName:v,cardClassName:b,overlayClassName:S,className:C,"aria-label":w=`Kanban board`,...T}){let[E,D]=s.useState(()=>n),[O,k]=s.useState(null),[A,j]=s.useState(null),M=s.useRef(null),N=e??E,P=O??N,F=e!==void 0;function I(e){let t=e.operation.source;if(!t)return;let n=String(t.id);M.current=N,k(N),j(n)}function L(e){let t=e.operation.source;if(!t||!a.isSortable(t))return;let n=_(M.current??N,e);M.current=n,k(n)}function R(e){let t=e.operation.source;if(j(null),e.canceled||!t||!a.isSortable(t)){M.current=null,k(null);return}let n=M.current??_(N,e),i=m(String(t.id)),s=h(t.initialGroup),c=h(t.group),l=N.find(e=>e.key===s),u=n.find(e=>e.key===c),d=l?.cards.find(e=>e.key===i);if(M.current=null,k(null),!d||!l||!u)return;let f={card:d,fromColumn:l,toColumn:u,fromIndex:t.initialIndex,toIndex:t.index};F||D(n),r?.(n,f),o?.(f)}let z=A?P.flatMap(e=>e.cards.map(t=>({card:t,column:e}))).find(({card:e})=>f(e.key)===A):void 0;return(0,l.jsxs)(i.DragDropProvider,{onDragStart:I,onDragOver:L,onDragEnd:R,children:[(0,l.jsx)(`div`,{...T,role:`group`,"aria-label":w,"data-slot":`kanban-board`,className:t.cn(`grid auto-cols-[minmax(280px,1fr)] grid-flow-col gap-4 overflow-x-auto pb-2`,C),children:P.map(e=>(0,l.jsx)(x,{column:e,boardDisabled:d,renderCard:c,onCardClick:u,dragHandleLabel:g,emptyColumn:p,columnClassName:v,cardClassName:b},e.key))}),(0,l.jsx)(i.DragOverlay,{children:z?(0,l.jsx)(`div`,{className:t.cn(`min-w-64 rotate-1 opacity-95 shadow-2xl`,S),children:c?.(z.card,z.column,{index:z.column.cards.findIndex(e=>e.key===z.card.key),isDragging:!0,isDropTarget:!1,handle:null})??(0,l.jsx)(y,{card:z.card,handle:null})}):null})]})}exports.KanbanBoard=S;
+"use client";Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("../../../_virtual/_rolldown/runtime.cjs"),t=require("../../lib/utils.cjs"),n=require("../ui/card/index.cjs"),r=require("../../../node_modules/@dnd-kit/helpers/dist/index.cjs"),i=require("../../../node_modules/@dnd-kit/react/index.cjs"),a=require("../../../node_modules/@dnd-kit/dom/sortable.cjs"),o=require("../../../node_modules/@dnd-kit/react/sortable.cjs");let s=require("react");s=e.__toESM(s,1);let c=require("lucide-react"),l=require("react/jsx-runtime");var u=`tembro-kanban-card:`,d=`tembro-kanban-column:`;function f(e){return`${u}${e}`}function p(e){return`${d}${e}`}function m(e){return e.startsWith(u)?e.slice(19):e}function h(e){let t=e===void 0?``:String(e);return t.startsWith(d)?t.slice(21):t}function g(e){return new Map(e.flatMap(e=>e.cards.map(e=>[f(e.key),e])))}function _(e,t){let n=g(e),i=r.move(Object.fromEntries(e.map(e=>[p(e.key),e.cards.map(e=>f(e.key))])),t);return e.map(e=>({...e,cards:(i[p(e.key)]??[]).map(e=>n.get(String(e))).filter(e=>!!e)}))}var v=s.forwardRef(function({label:e,disabled:t},n){return(0,l.jsx)(`button`,{ref:n,type:`button`,className:`inline-flex size-8 shrink-0 touch-none items-center justify-center rounded-md text-muted-foreground outline-none transition-colors hover:bg-muted hover:text-foreground focus-visible:ring-2 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-45`,"aria-label":e,disabled:t,onClick:e=>e.stopPropagation(),children:(0,l.jsx)(c.GripVerticalIcon,{className:`size-4`,"aria-hidden":`true`})})});function y({card:e,handle:t}){return(0,l.jsxs)(n.Card,{className:`transition-colors hover:bg-muted/40`,children:[(0,l.jsx)(n.CardHeader,{className:`p-3 pb-1`,children:(0,l.jsxs)(`div`,{className:`flex items-start justify-between gap-2`,children:[(0,l.jsx)(n.CardTitle,{className:`text-sm`,children:e.title}),(0,l.jsxs)(`div`,{className:`flex items-center gap-1`,children:[e.extra,t]})]})}),e.description||e.meta?(0,l.jsxs)(n.CardContent,{className:`grid gap-2 p-3 pt-0 text-xs text-muted-foreground`,children:[e.description,e.meta?(0,l.jsx)(`div`,{children:e.meta}):null]}):null]})}function b({card:e,column:n,index:r,boardDisabled:i,renderCard:a,onCardClick:s,dragHandleLabel:c,cardClassName:u}){let d=i||n.disabled===!0||e.disabled===!0,{ref:m,handleRef:h,isDragging:g,isDropTarget:_}=o.useSortable({id:f(e.key),index:r,group:p(n.key),type:`tembro-kanban-card`,accept:`tembro-kanban-card`,disabled:d,data:{cardKey:e.key,columnKey:n.key},transition:{duration:180,easing:`cubic-bezier(0.2, 0, 0, 1)`,idle:!0}}),b=(0,l.jsx)(v,{ref:h,label:c?.(e,n)??`Move ${String(e.title)}`,disabled:d}),x={index:r,isDragging:g,isDropTarget:_,handle:b};return(0,l.jsx)(`article`,{ref:m,"data-slot":`kanban-card`,"data-dragging":g||void 0,"data-drop-target":_||void 0,"data-disabled":d||void 0,role:s&&!d?`button`:void 0,tabIndex:s&&!d?0:void 0,"aria-label":typeof e.title==`string`?e.title:void 0,className:t.cn(`rounded-lg outline-none transition-[opacity,box-shadow]`,s&&!d&&`cursor-pointer focus-visible:ring-2 focus-visible:ring-ring`,_&&`ring-2 ring-primary/30`,g&&`opacity-30`,d&&`opacity-55`,u),onClick:()=>{d||s?.(e,n)},onKeyDown:t=>{t.target!==t.currentTarget||d||!s||(t.key===`Enter`||t.key===` `)&&(t.preventDefault(),s(e,n))},children:a?.(e,n,x)??(0,l.jsx)(y,{card:e,handle:b})})}function x({column:e,boardDisabled:n,renderCard:r,onCardClick:a,dragHandleLabel:o,emptyColumn:s,columnClassName:c,cardClassName:u}){let{ref:d,isDropTarget:f}=i.useDroppable({id:p(e.key),type:`tembro-kanban-column`,accept:`tembro-kanban-card`,disabled:n||e.disabled===!0,collisionPriority:1,data:{columnKey:e.key}});return(0,l.jsxs)(`section`,{ref:d,"data-slot":`kanban-column`,"data-drop-target":f||void 0,"data-disabled":e.disabled||void 0,"aria-label":typeof e.title==`string`?e.title:void 0,className:t.cn(`grid min-h-40 content-start gap-3 rounded-lg border bg-muted/35 p-3 transition-[border-color,background-color,box-shadow]`,f&&`border-primary/60 bg-primary/5 ring-2 ring-primary/15`,e.disabled&&`opacity-60`,c),children:[(0,l.jsxs)(`div`,{className:`flex items-start justify-between gap-3`,children:[(0,l.jsxs)(`div`,{className:`grid gap-0.5`,children:[(0,l.jsx)(`h3`,{className:`text-sm font-semibold text-foreground`,children:e.title}),e.description?(0,l.jsx)(`p`,{className:`text-xs text-muted-foreground`,children:e.description}):null]}),(0,l.jsx)(`div`,{className:`rounded-full bg-background px-2 py-0.5 text-xs text-muted-foreground`,children:e.count??e.cards.length})]}),(0,l.jsx)(`div`,{className:`grid min-h-16 content-start gap-2`,children:e.cards.length===0?(0,l.jsxs)(`div`,{className:`grid min-h-20 place-items-center rounded-lg border border-dashed p-3 text-center text-xs text-muted-foreground`,children:[(0,l.jsx)(`span`,{children:s}),(0,l.jsx)(`span`,{className:`sr-only`,children:`No cards yet.`})]}):e.cards.map((t,i)=>(0,l.jsx)(b,{card:t,column:e,index:i,boardDisabled:n,renderCard:r,onCardClick:a,dragHandleLabel:o,cardClassName:u},t.key))})]})}function S({columns:e,defaultColumns:n=[],onColumnsChange:r,onCardMove:o,renderCard:c,onCardClick:u,disabled:d=!1,emptyColumn:p=`Drop cards here.`,dragHandleLabel:g,columnClassName:v,cardClassName:b,overlayClassName:S,className:C,"aria-label":w=`Kanban board`,...T}){let[E,D]=s.useState(()=>n),[O,k]=s.useState(null),[A,j]=s.useState(null),M=s.useRef(null),N=e??E,P=O??N,F=e!==void 0;function I(e){let t=e.operation.source;if(!t)return;let n=String(t.id);M.current=N,k(N),j(n)}function L(e){let t=e.operation.source;if(!t||!a.isSortable(t))return;let n=_(M.current??N,e);M.current=n,k(n)}function R(e){let t=e.operation.source;if(j(null),e.canceled||!t||!a.isSortable(t)){M.current=null,k(null);return}let n=M.current??_(N,e),i=m(String(t.id)),s=h(t.initialGroup),c=h(t.group),l=N.find(e=>e.key===s),u=n.find(e=>e.key===c),d=l?.cards.find(e=>e.key===i);if(M.current=null,k(null),!d||!l||!u)return;let f={card:d,fromColumn:l,toColumn:u,fromIndex:t.initialIndex,toIndex:t.index};F||D(n),r?.(n,f),o?.(f)}let z=A?P.flatMap(e=>e.cards.map(t=>({card:t,column:e}))).find(({card:e})=>f(e.key)===A):void 0;return(0,l.jsxs)(i.DragDropProvider,{onDragStart:I,onDragOver:L,onDragEnd:R,children:[(0,l.jsx)(`div`,{...T,role:`group`,"aria-label":w,"data-slot":`kanban-board`,className:t.cn(`grid gap-4 sm:auto-cols-[minmax(280px,1fr)] sm:grid-flow-col sm:overflow-x-auto sm:pb-2`,C),children:P.map(e=>(0,l.jsx)(x,{column:e,boardDisabled:d,renderCard:c,onCardClick:u,dragHandleLabel:g,emptyColumn:p,columnClassName:v,cardClassName:b},e.key))}),(0,l.jsx)(i.DragOverlay,{children:z?(0,l.jsx)(`div`,{className:t.cn(`min-w-64 rotate-1 opacity-95 shadow-2xl`,S),children:c?.(z.card,z.column,{index:z.column.cards.findIndex(e=>e.key===z.card.key),isDragging:!0,isDropTarget:!1,handle:null})??(0,l.jsx)(y,{card:z.card,handle:null})}):null})]})}exports.KanbanBoard=S;

package/dist/src/components/display/kanban.js

@@ -213,7 +213,7 @@ function D({ columns: t, defaultColumns: n = [], onColumnsChange: r, onCardMove:
 			role: "group",
 			"aria-label": T,
 			"data-slot": "kanban-board",
-			className: e("grid auto-cols-[minmax(280px,1fr)] grid-flow-col gap-4 overflow-x-auto pb-2", C),
+			className: e("grid gap-4 sm:auto-cols-[minmax(280px,1fr)] sm:grid-flow-col sm:overflow-x-auto sm:pb-2", C),
 			children: I.map((e) => /* @__PURE__ */ p(E, {
 				column: e,
 				boardDisabled: u,