admin-ui-starter-kit 0.6.8 → 0.7.0

package/dist/showcase/assets/table-DAil3SVn.js

@@ -0,0 +1,686 @@
+import{n as e,r as t}from"./chunk-QTnfLwEv.js";import{t as n}from"./react-sKtkuLrH.js";import{a as r,i,n as ee,t as te}from"./filter-layout-Dcg6Bnrn.js";import{n as a,o,p as s,t as c}from"./section-DLqBJGPH.js";import{t as l}from"./badge-check-CRkt0WPY.js";import{r as u,t as d}from"./example-DDhaO2UY.js";import{t as ne}from"./circle-check-BdcUhuQ7.js";import{t as f}from"./circle-x-BpB4A5gs.js";import{t as p}from"./clock-B1cuTZnL.js";import{a as m,i as h,n as re,o as g,r as _,t as v}from"./data-view-s5TQvt4f.js";import{t as y}from"./shopping-bag-x4S32KGc.js";import{t as b}from"./square-pen-wg5I0K5c.js";import{t as x}from"./trash-2-DZ5FSAFb.js";import{t as S}from"./truck-B0QFWMMH.js";import{t as C}from"./user-DlFWtE-h.js";import{a as w,d as T}from"./index-DSBghWdd.js";import{t as E}from"./props-table-CzpevabQ.js";import{t as ie}from"./smart-card-BA097ZGN.js";import{t as ae}from"./customers-DvBxRjHv.js";import{t as oe}from"./orders-BFwWtubb.js";import{t as se}from"./input-Bq9vs-9_.js";import{a as D,i as ce,n as le,o as O,r as ue,s as de,t as fe}from"./cell-renderers-BTLGZyvy.js";import{t as pe}from"./page-BFvDdpX3.js";var me=e({BasicDefault:()=>N,CellRenderers:()=>U,ComfortableTable:()=>P,DataViewChrome:()=>J,EmptyState:()=>X,FilteredTabbedOrdersTable:()=>H,IndexTableCells:()=>W,PaginationExample:()=>R,RealisticOrdersTable:()=>V,StickyHeaderAndFirstColumn:()=>Y,SurfaceFlatInsideSmartCardTableRendersNoChrome:()=>I,SurfaceGlassHeaderTransparentCleanOutlineNoMutedHeader:()=>F,WithColumnVisibility:()=>K,WithCustomToolbar:()=>q,WithRowSelection:()=>G,WithSortingRowActions:()=>L}),k=t(n(),1),A=T(),j=[{id:`ORD-001`,customer:`Sarah Smitha`,amount:`2,450 USD`,status:`paid`,date:`Mar 24`},{id:`ORD-002`,customer:`Daniel Smith`,amount:`370 USD`,status:`pending`,date:`Mar 25`},{id:`ORD-003`,customer:`Emma Garcia`,amount:`320 USD`,status:`paid`,date:`Mar 26`},{id:`ORD-004`,customer:`David Williams`,amount:`580 USD`,status:`overdue`,date:`Mar 14`},{id:`ORD-005`,customer:`Nadia Kowalski`,amount:`120 USD`,status:`paid`,date:`Mar 27`}],M=[{accessorKey:`id`,header:`Order`,cell:({row:e,getValue:t})=>(0,A.jsx)(D,{title:String(t()),href:`#/orders/${e.original.id}`,fallback:(0,A.jsx)(y,{className:`size-icon`,"aria-hidden":`true`}),mediaClassName:`size-avatar-sm rounded-md bg-primary/10 text-primary`,titleClassName:`font-mono font-semibold`})},{accessorKey:`customer`,header:`Customer`,cell:({row:e})=>(0,A.jsx)(fe,{name:e.original.customer})},{accessorKey:`amount`,header:`Amount`,meta:{align:`end`},cell:({getValue:e})=>(0,A.jsx)(s,{tag:`span`,size:`inherit`,weight:`semibold`,className:`tabular-nums`,children:String(e())})},{accessorKey:`status`,header:`Status`,cell:({getValue:e})=>{let t=e();return(0,A.jsx)(o,{variant:t===`paid`?`success`:t===`pending`?`warning`:`error`,dot:!0,children:t})}},{accessorKey:`date`,header:`Date`,cell:({getValue:e})=>(0,A.jsx)(s,{tag:`span`,size:`inherit`,type:`secondary`,className:`tabular-nums`,children:String(e())})}];function N(){return(0,A.jsx)(m,{columns:M,data:j})}function P(){return(0,A.jsx)(m,{columns:M,data:j,size:`default`,rowActions:()=>[{id:`edit`,label:`Edit`,icon:(0,A.jsx)(b,{className:`size-icon`}),onClick:()=>{}},{id:`delete`,label:`Delete`,icon:(0,A.jsx)(x,{className:`size-icon`}),variant:`destructive`,onClick:()=>{}}]})}function F(){return(0,A.jsx)(m,{columns:M,data:j,surface:`glass`,headerTransparent:!0})}function I(){return(0,A.jsx)(ie,{padding:`small`,className:`w-full min-w-0 max-w-full overflow-hidden`,children:(0,A.jsx)(m,{columns:M,data:j,surface:`flat`,headerTransparent:!0})})}function L(){return(0,A.jsx)(m,{columns:M,data:j,enableSorting:!0,rowActions:()=>[{id:`edit`,label:`Edit`,icon:(0,A.jsx)(b,{className:`size-icon`}),onClick:()=>{}},{id:`delete`,label:`Delete`,icon:(0,A.jsx)(x,{className:`size-icon`}),variant:`destructive`,onClick:()=>{}}]})}function R(){return(0,A.jsx)(g,{pagination:{current_page:3,last_page:12,per_page:10,total:117,path:`/orders`,prev_page_url:`/orders?page=2`,next_page_url:`/orders?page=4`},onPageChange:()=>{}})}var z=oe.map(e=>({id:e.id,number:e.number,customer:ae.find(t=>t.id===e.customerId)?.name??`—`,totalUsd:e.totalUsd,status:e.status})),he=[{label:`Paid`,value:`paid`,icon:null},{label:`Pending`,value:`pending`,icon:null},{label:`Shipped`,value:`shipped`,icon:null},{label:`Cancelled`,value:`cancelled`,icon:null}],ge=[...new Set(z.map(e=>e.customer))].map(e=>({label:e,value:e,icon:null})),_e=[{key:`q`,label:`Search`,type:r.SEARCH,operator:i.CONTAINS,placeholder:`Search orders or customers…`,icon:(0,A.jsx)(w,{className:`size-icon`}),displayConfig:{display:`always`}},{key:`status`,label:`Status`,pluralLabel:`statuses`,type:r.MULTI_SELECT,operator:i.IN,icon:(0,A.jsx)(l,{className:`size-icon`}),displayConfig:{display:`always`},options:he},{key:`customer`,label:`Customer`,type:r.MULTI_SELECT,operator:i.IN,icon:(0,A.jsx)(C,{className:`size-icon`}),displayConfig:{display:`collapsed`},options:ge}],ve=[{id:`all`,label:`All`,count:z.length,presets:[]},{id:`open`,label:`Open`,count:z.filter(e=>e.status===`pending`).length,presets:[{key:`status`,value:[`pending`],operator:i.IN}]},{id:`paid`,label:`Paid`,count:z.filter(e=>e.status===`paid`).length,presets:[{key:`status`,value:[`paid`],operator:i.IN}]},{id:`fulfillment`,label:`Fulfillment`,count:z.filter(e=>e.status===`shipped`).length,presets:[{key:`status`,value:[`shipped`],operator:i.IN}]}];function ye(e,t){return e.filter(e=>t.every(t=>{if(t.value.length===0)return!0;if(t.key===`q`){let n=t.value.join(` `).trim().toLowerCase();return n?`${e.number} ${e.customer}`.toLowerCase().includes(n):!0}return t.key===`status`?t.value.includes(e.status):t.key===`customer`?t.value.includes(e.customer):!0}))}var B=[{accessorKey:`number`,header:`Order`,cell:({row:e,getValue:t})=>(0,A.jsx)(D,{title:String(t()),href:`#/orders/${e.original.id}`,fallback:(0,A.jsx)(y,{className:`size-icon`,"aria-hidden":`true`}),mediaClassName:`size-avatar-sm rounded-md bg-primary/10 text-primary`,titleClassName:`font-mono font-semibold`})},{accessorKey:`customer`,header:`Customer`},{accessorKey:`totalUsd`,header:`Total`,cell:({getValue:e})=>(0,A.jsxs)(s,{tag:`span`,size:`inherit`,className:`tabular-nums`,children:[`$`,e().toLocaleString()]})},{accessorKey:`status`,header:`Status`,cell:({getValue:e})=>{let t=e();return(0,A.jsx)(o,{variant:t===`paid`?`success`:t===`pending`?`warning`:t===`cancelled`?`error`:`info`,dot:!0,children:t})}}];function V(){return(0,A.jsx)(m,{columns:B,data:z,enableSorting:!0,rowActions:()=>[{id:`edit`,label:`Edit`,icon:(0,A.jsx)(b,{className:`size-icon`}),onClick:()=>{}},{id:`delete`,label:`Delete`,icon:(0,A.jsx)(x,{className:`size-icon`}),variant:`destructive`,onClick:()=>{}}]})}function H(){let[e,t]=(0,k.useState)([]),[n,r]=(0,k.useState)({}),i=(0,k.useMemo)(()=>ye(z,e),[e]),a=Object.keys(n).length;return(0,A.jsx)(ee,{filters:_e,activeFilters:e,onFilterChange:t,children:(0,A.jsx)(pe,{width:`full`,className:`data-table-integration--component rounded-lg border border-border bg-background`,bodyClassName:`min-w-0`,header:{title:`Orders`,headingTag:`h3`,titleBadges:[{label:`${i.length} shown`,variant:`secondary`},...a>0?[{label:`${a} selected`,variant:`info`}]:[]],description:`Tabs, filter state, selection, column controls, sticky header, and compact table density in one surface.`,actions:(0,A.jsxs)(`div`,{className:`flex shrink-0 items-center gap-space-md`,children:[(0,A.jsx)(u,{variant:`secondary`,buttonStyle:`outline`,children:`Export`}),(0,A.jsx)(u,{children:`New order`})]}),actionsClassName:`pt-1`},children:(0,A.jsxs)(`div`,{className:`data-table-integration--surface overflow-hidden rounded-lg border border-border bg-card`,children:[(0,A.jsx)(`div`,{className:`data-table-integration--filters border-b border-border/70 px-surface py-surface`,children:(0,A.jsx)(te,{variant:`compact`,showClearFilters:!0,tabs:ve})}),(0,A.jsx)(m,{columns:B,data:i,surface:`flat`,headerTransparent:!1,enableSorting:!0,enableColumnVisibility:!0,enableRowSelection:!0,rowSelection:n,onRowSelectionChange:r,getRowId:e=>e.id,stickyHeader:!0,maxBodyHeight:360,emptyStateMessage:`No orders match the current view.`,rowActions:()=>[{id:`open`,label:`Open`,icon:(0,A.jsx)(b,{className:`size-icon`}),onClick:()=>{}},{id:`delete`,label:`Delete`,icon:(0,A.jsx)(x,{className:`size-icon`}),variant:`destructive`,onClick:()=>{}}],bulkActions:({selectedRowCount:e})=>(0,A.jsx)(u,{variant:`secondary`,buttonStyle:`outline`,disabled:e===0,children:`Archive selected`}),footerContent:(0,A.jsxs)(`div`,{className:`flex flex-col gap-space-sm sm:flex-row sm:items-center sm:justify-between`,children:[(0,A.jsxs)(s,{tag:`span`,size:`xs`,type:`secondary`,children:[i.length,` of `,z.length,` orders`]}),(0,A.jsx)(s,{tag:`span`,size:`xs`,type:`secondary`,children:`Compact density is the library default.`})]})})]})})})}var be=[{id:`1`,customer:`Sarah Smitha`,avatarUrl:`https://api.dicebear.com/7.x/avataaars/svg?seed=sarah`,createdAt:`2026-04-12`,total:2450,status:`paid`},{id:`2`,customer:`Daniel Smith`,avatarUrl:`https://api.dicebear.com/7.x/avataaars/svg?seed=dan`,createdAt:`2026-04-13`,total:370,status:`pending`},{id:`3`,customer:`Emma Garcia`,avatarUrl:`https://api.dicebear.com/7.x/avataaars/svg?seed=emma`,createdAt:`2026-04-15`,total:1280,status:`shipped`},{id:`4`,customer:`David Williams`,avatarUrl:`https://api.dicebear.com/7.x/avataaars/svg?seed=david`,createdAt:`2026-04-09`,total:580,status:`cancelled`}],xe={paid:{label:`Paid`,variant:`success`,icon:ne},pending:{label:`Pending`,variant:`warning`,icon:p},shipped:{label:`Shipped`,variant:`info`,icon:S},cancelled:{label:`Cancelled`,variant:`destructive`,icon:f}},Se=[{accessorKey:`customer`,header:`Customer`,cell:({row:e})=>(0,A.jsx)(D,{title:e.original.customer,imageUrl:e.original.avatarUrl,subtitle:`#${e.original.id}`,href:`#/customers/${e.original.id}`})},{accessorKey:`status`,header:`Status`,cell:({getValue:e})=>(0,A.jsx)(O,{value:e(),map:xe})},{accessorKey:`total`,header:`Total`,cell:({getValue:e})=>(0,A.jsx)(le,{value:e(),currency:`USD`,weight:`semibold`})},{accessorKey:`createdAt`,header:`Created`,cell:({getValue:e})=>(0,A.jsx)(ue,{value:e()})}];function U(){return(0,A.jsx)(m,{columns:Se,data:be})}var Ce=[{id:`USR-001`,name:`Sarah Smitha`,email:`sarah@example.com`,role:`Owner`,createdAt:`2026-05-14`,statuses:[`active`,`verified`,`twoFactor`]},{id:`USR-002`,name:`Daniel Smith`,email:`daniel@example.com`,role:`Admin`,createdAt:`2026-05-22`,statuses:[`active`,`verified`]},{id:`USR-003`,name:`Emma Garcia`,email:`emma@example.com`,role:`Support`,createdAt:`2026-06-02`,statuses:[`active`]}],we=[{accessorKey:`name`,header:`User`,cell:({row:e})=>(0,A.jsx)(D,{title:e.original.name,subtitle:e.original.email,metadata:[{label:`Role`,value:e.original.role}],href:`#/users/${e.original.id}`})},{id:`status`,header:`Status`,cell:({row:e})=>(0,A.jsx)(de,{items:[{id:`active`,label:`Active`,variant:`success`,hidden:!e.original.statuses.includes(`active`)},{id:`verified`,label:`Verified`,variant:`info`,hidden:!e.original.statuses.includes(`verified`)},{id:`twoFactor`,label:`2FA`,variant:`secondary`,hidden:!e.original.statuses.includes(`twoFactor`)}]})},{accessorKey:`createdAt`,header:`Created`,cell:({getValue:e})=>(0,A.jsx)(ce,{value:e(),secondary:`Synced today`})}];function W(){return(0,A.jsx)(m,{columns:we,data:Ce,enableRowSelection:!0,getRowId:e=>e.id,rowActionsMenuLabel:e=>`Actions for ${e.name}`,rowActions:()=>[{id:`open`,label:`Open`,onClick:()=>{}},{id:`disable`,label:`Disable`,variant:`destructive`,onClick:()=>{}}],bulkActions:({selectedRowCount:e})=>(0,A.jsx)(u,{variant:`secondary`,disabled:e===0,children:`Bulk update`}),maxBodyHeight:320,stickyToolbar:!0})}function G(){let[e,t]=(0,k.useState)({});return(0,A.jsxs)(`div`,{className:`flex w-full min-w-0 max-w-full flex-col gap-space-md overflow-hidden`,children:[(0,A.jsx)(m,{columns:M,data:j,enableRowSelection:!0,rowSelection:e,onRowSelectionChange:t,getRowId:e=>e.id}),(0,A.jsxs)(s,{size:`xs`,type:`secondary`,children:[`selected: `,Object.keys(e).length===0?`—`:Object.keys(e).join(`, `)]})]})}function K(){return(0,A.jsx)(m,{columns:M,data:j,enableSorting:!0,enableColumnVisibility:!0})}function q(){return(0,A.jsx)(m,{columns:M,data:j,enableColumnVisibility:!0,topbarContent:(0,A.jsxs)(`div`,{className:`flex items-center gap-space-md`,children:[(0,A.jsx)(s,{weight:`semibold`,children:`Orders`}),(0,A.jsx)(o,{variant:`secondary`,children:j.length})]})})}function J(){let[e,t]=(0,k.useState)(`all`);return(0,A.jsx)(re,{header:(0,A.jsxs)(`div`,{className:`space-y-1`,children:[(0,A.jsx)(s,{weight:`semibold`,children:`Orders data view`}),(0,A.jsx)(s,{size:`xs`,type:`secondary`,children:`Controlled chrome around the table; the app owns query state and data fetching.`})]}),toolbar:(0,A.jsx)(_,{search:(0,A.jsx)(se,{"aria-label":`Search orders`,placeholder:`Search orders...`,className:`w-56`}),views:(0,A.jsx)(h,{value:e,onValueChange:t,views:[{id:`all`,label:`All`,count:117},{id:`review`,label:`Needs review`,count:8},{id:`drafts`,label:`Drafts`,count:16}]}),actions:(0,A.jsx)(u,{variant:`secondary`,children:`Export`})}),footer:(0,A.jsx)(v,{page:2,pageCount:8,total:`117 orders`,onPageChange:()=>{}}),children:(0,A.jsx)(m,{columns:M,data:j,surface:`flat`})})}function Y(){return(0,A.jsx)(m,{columns:M,data:[...j,...j,...j],stickyHeader:!0,stickyFirstColumn:!0,maxBodyHeight:256})}function X(){return(0,A.jsx)(m,{columns:M,data:[],emptyStateMessage:`No orders match the current filters.`})}var Z=`import { useMemo, useState } from 'react';
+import { type ColumnDef, type RowSelectionState } from '@tanstack/react-table';
+import { BadgeCheck, Edit, Search, Trash2, ShoppingBag, CheckCircle2, Clock, User, XCircle, Truck } from 'lucide-react';
+import {
+	DataTable,
+	StatusCell,
+	StatusClusterCell,
+	DateCell,
+	DateMetaCell,
+	CurrencyCell,
+	AvatarCell,
+	ResourceCell,
+	type StatusCellEntry,
+} from '@/components/base/table';
+import { SmartCard } from '@/components/base/cards';
+import {
+	type ActiveFilter,
+	type FilterConfig,
+	type FilterTab,
+	FilterLayout,
+	FilterOperatorEnum,
+	FilterProvider,
+	FilterType,
+} from '@/components/features/filters';
+import {
+	DataViewPagination,
+	DataViewShell,
+	DataViewToolbar,
+	SavedViewTabs,
+} from '@/components/features/data-view';
+import { Pagination } from '@/components/base/table/pagination';
+import { Badge } from '@/components/base/badge';
+import { Button } from '@/components/base/buttons';
+import { Input } from '@/components/base/forms';
+import { Page } from '@/components/layout/page';
+import { Text } from '@/components/typography';
+import { MOCK_ORDERS, MOCK_CUSTOMERS } from '@/preview/_mocks';
+
+type Order = {
+	id: string;
+	customer: string;
+	amount: string;
+	status: 'paid' | 'pending' | 'overdue';
+	date: string;
+};
+
+const data: Order[] = [
+	{ id: 'ORD-001', customer: 'Sarah Smitha', amount: '2,450 USD', status: 'paid', date: 'Mar 24' },
+	{ id: 'ORD-002', customer: 'Daniel Smith', amount: '370 USD', status: 'pending', date: 'Mar 25' },
+	{ id: 'ORD-003', customer: 'Emma Garcia', amount: '320 USD', status: 'paid', date: 'Mar 26' },
+	{ id: 'ORD-004', customer: 'David Williams', amount: '580 USD', status: 'overdue', date: 'Mar 14' },
+	{ id: 'ORD-005', customer: 'Nadia Kowalski', amount: '120 USD', status: 'paid', date: 'Mar 27' },
+];
+
+const columns: ColumnDef<Order>[] = [
+	{
+		accessorKey: 'id',
+		header: 'Order',
+		cell: ({ row, getValue }) => (
+			<ResourceCell
+				title={String(getValue())}
+				href={\`#/orders/\${row.original.id}\`}
+				fallback={<ShoppingBag className="size-icon" aria-hidden="true" />}
+				mediaClassName="size-avatar-sm rounded-md bg-primary/10 text-primary"
+				titleClassName="font-mono font-semibold"
+			/>
+		),
+	},
+	{
+		accessorKey: 'customer',
+		header: 'Customer',
+		cell: ({ row }) => <AvatarCell name={row.original.customer} />,
+	},
+	{
+		accessorKey: 'amount',
+		header: 'Amount',
+		meta: { align: 'end' },
+		cell: ({ getValue }) => (
+			<Text tag="span" size="inherit" weight="semibold" className="tabular-nums">
+				{String(getValue())}
+			</Text>
+		),
+	},
+	{
+		accessorKey: 'status',
+		header: 'Status',
+		cell: ({ getValue }) => {
+			const v = getValue() as Order['status'];
+			const variant = v === 'paid' ? 'success' : v === 'pending' ? 'warning' : 'error';
+			return <Badge variant={variant} dot>{v}</Badge>;
+		},
+	},
+	{
+		accessorKey: 'date',
+		header: 'Date',
+		cell: ({ getValue }) => (
+			<Text tag="span" size="inherit" type="secondary" className="tabular-nums">
+				{String(getValue())}
+			</Text>
+		),
+	},
+];
+
+export function BasicDefault() {
+	return <DataTable<Order> columns={columns} data={data} />;
+}
+
+export function ComfortableTable() {
+	return (
+		<DataTable<Order>
+			columns={columns}
+			data={data}
+			size="default"
+			rowActions={() => [
+				{ id: 'edit', label: 'Edit', icon: <Edit className="size-icon" />, onClick: () => {} },
+				{ id: 'delete', label: 'Delete', icon: <Trash2 className="size-icon" />, variant: 'destructive', onClick: () => {} },
+			]}
+		/>
+	);
+}
+
+export function SurfaceGlassHeaderTransparentCleanOutlineNoMutedHeader() {
+	return (
+		<DataTable<Order>
+			columns={columns}
+			data={data}
+			surface="glass"
+			headerTransparent
+		/>
+	);
+}
+
+export function SurfaceFlatInsideSmartCardTableRendersNoChrome() {
+	return (
+		<SmartCard padding="small" className="w-full min-w-0 max-w-full overflow-hidden">
+			<DataTable<Order>
+				columns={columns}
+				data={data}
+				surface="flat"
+				headerTransparent
+			/>
+		</SmartCard>
+	);
+}
+
+export function WithSortingRowActions() {
+	return (
+		<DataTable<Order>
+			columns={columns}
+			data={data}
+			enableSorting
+			rowActions={() => [
+				{ id: 'edit', label: 'Edit', icon: <Edit className="size-icon" />, onClick: () => {} },
+				{ id: 'delete', label: 'Delete', icon: <Trash2 className="size-icon" />, variant: 'destructive', onClick: () => {} },
+			]}
+		/>
+	);
+}
+
+export function PaginationExample() {
+	return (
+		<Pagination
+			pagination={{
+				current_page: 3,
+				last_page: 12,
+				per_page: 10,
+				total: 117,
+				path: '/orders',
+				prev_page_url: '/orders?page=2',
+				next_page_url: '/orders?page=4',
+			}}
+			onPageChange={() => {}}
+		/>
+	);
+}
+
+type RealOrder = {
+	id: string;
+	number: string;
+	customer: string;
+	totalUsd: number;
+	status: 'paid' | 'pending' | 'shipped' | 'cancelled';
+};
+
+const realData: RealOrder[] = MOCK_ORDERS.map((o) => ({
+	id: o.id,
+	number: o.number,
+	customer: MOCK_CUSTOMERS.find((c) => c.id === o.customerId)?.name ?? '—',
+	totalUsd: o.totalUsd,
+	status: o.status as RealOrder['status'],
+}));
+
+const orderStatusOptions = [
+	{ label: 'Paid', value: 'paid', icon: null },
+	{ label: 'Pending', value: 'pending', icon: null },
+	{ label: 'Shipped', value: 'shipped', icon: null },
+	{ label: 'Cancelled', value: 'cancelled', icon: null },
+];
+
+const orderCustomerOptions = [...new Set(realData.map((order) => order.customer))]
+	.map((customer) => ({ label: customer, value: customer, icon: null }));
+
+const orderTableFilters: FilterConfig[] = [
+	{
+		key: 'q',
+		label: 'Search',
+		type: FilterType.SEARCH,
+		operator: FilterOperatorEnum.CONTAINS,
+		placeholder: 'Search orders or customers…',
+		icon: <Search className="size-icon" />,
+		displayConfig: { display: 'always' },
+	},
+	{
+		key: 'status',
+		label: 'Status',
+		pluralLabel: 'statuses',
+		type: FilterType.MULTI_SELECT,
+		operator: FilterOperatorEnum.IN,
+		icon: <BadgeCheck className="size-icon" />,
+		displayConfig: { display: 'always' },
+		options: orderStatusOptions,
+	},
+	{
+		key: 'customer',
+		label: 'Customer',
+		type: FilterType.MULTI_SELECT,
+		operator: FilterOperatorEnum.IN,
+		icon: <User className="size-icon" />,
+		displayConfig: { display: 'collapsed' },
+		options: orderCustomerOptions,
+	},
+];
+
+const orderTableTabs: FilterTab[] = [
+	{ id: 'all', label: 'All', count: realData.length, presets: [] },
+	{
+		id: 'open',
+		label: 'Open',
+		count: realData.filter((order) => order.status === 'pending').length,
+		presets: [{ key: 'status', value: ['pending'], operator: FilterOperatorEnum.IN }],
+	},
+	{
+		id: 'paid',
+		label: 'Paid',
+		count: realData.filter((order) => order.status === 'paid').length,
+		presets: [{ key: 'status', value: ['paid'], operator: FilterOperatorEnum.IN }],
+	},
+	{
+		id: 'fulfillment',
+		label: 'Fulfillment',
+		count: realData.filter((order) => order.status === 'shipped').length,
+		presets: [{ key: 'status', value: ['shipped'], operator: FilterOperatorEnum.IN }],
+	},
+];
+
+function filterOrders(rows: RealOrder[], activeFilters: ActiveFilter[]) {
+	return rows.filter((order) => {
+		return activeFilters.every((filter) => {
+			if (filter.value.length === 0) return true;
+			if (filter.key === 'q') {
+				const query = filter.value.join(' ').trim().toLowerCase();
+				if (!query) return true;
+				return \`\${order.number} \${order.customer}\`.toLowerCase().includes(query);
+			}
+			if (filter.key === 'status') {
+				return filter.value.includes(order.status);
+			}
+			if (filter.key === 'customer') {
+				return filter.value.includes(order.customer);
+			}
+			return true;
+		});
+	});
+}
+
+const realColumns: ColumnDef<RealOrder>[] = [
+	{
+		accessorKey: 'number',
+		header: 'Order',
+		cell: ({ row, getValue }) => (
+			<ResourceCell
+				title={String(getValue())}
+				href={\`#/orders/\${row.original.id}\`}
+				fallback={<ShoppingBag className="size-icon" aria-hidden="true" />}
+				mediaClassName="size-avatar-sm rounded-md bg-primary/10 text-primary"
+				titleClassName="font-mono font-semibold"
+			/>
+		),
+	},
+	{ accessorKey: 'customer', header: 'Customer' },
+	{
+		accessorKey: 'totalUsd',
+		header: 'Total',
+		cell: ({ getValue }) => <Text tag="span" size="inherit" className="tabular-nums">\${(getValue() as number).toLocaleString()}</Text>,
+	},
+	{
+		accessorKey: 'status',
+		header: 'Status',
+		cell: ({ getValue }) => {
+			const v = getValue() as RealOrder['status'];
+			const variant = v === 'paid' ? 'success' : v === 'pending' ? 'warning' : v === 'cancelled' ? 'error' : 'info';
+			return <Badge variant={variant} dot>{v}</Badge>;
+		},
+	},
+];
+
+export function RealisticOrdersTable() {
+	return (
+		<DataTable<RealOrder>
+			columns={realColumns}
+			data={realData}
+			enableSorting
+			rowActions={() => [
+				{ id: 'edit', label: 'Edit', icon: <Edit className="size-icon" />, onClick: () => {} },
+				{ id: 'delete', label: 'Delete', icon: <Trash2 className="size-icon" />, variant: 'destructive', onClick: () => {} },
+			]}
+		/>
+	);
+}
+
+export function FilteredTabbedOrdersTable() {
+	const [activeFilters, setActiveFilters] = useState<ActiveFilter[]>([]);
+	const [rowSelection, setRowSelection] = useState<RowSelectionState>({});
+	const filteredRows = useMemo(
+		() => filterOrders(realData, activeFilters),
+		[activeFilters],
+	);
+	const selectedCount = Object.keys(rowSelection).length;
+	const titleBadges = [
+		{ label: \`\${filteredRows.length} shown\`, variant: 'secondary' as const },
+		...(selectedCount > 0
+			? [{ label: \`\${selectedCount} selected\`, variant: 'info' as const }]
+			: []),
+	];
+
+	return (
+		<FilterProvider
+			filters={orderTableFilters}
+			activeFilters={activeFilters}
+			onFilterChange={setActiveFilters}
+		>
+			<Page
+				width="full"
+				className="data-table-integration--component rounded-lg border border-border bg-background"
+				bodyClassName="min-w-0"
+				header={{
+					title: 'Orders',
+					headingTag: 'h3',
+					titleBadges,
+					description: 'Tabs, filter state, selection, column controls, sticky header, and compact table density in one surface.',
+					actions: (
+						<div className="flex shrink-0 items-center gap-space-md">
+							<Button variant="secondary" buttonStyle="outline">Export</Button>
+							<Button>New order</Button>
+						</div>
+					),
+					actionsClassName: 'pt-1',
+				}}
+			>
+				<div className="data-table-integration--surface overflow-hidden rounded-lg border border-border bg-card">
+					<div className="data-table-integration--filters border-b border-border/70 px-surface py-surface">
+						<FilterLayout
+							variant="compact"
+							showClearFilters
+							tabs={orderTableTabs}
+						/>
+					</div>
+					<DataTable<RealOrder>
+						columns={realColumns}
+						data={filteredRows}
+						surface="flat"
+						headerTransparent={false}
+						enableSorting
+						enableColumnVisibility
+						enableRowSelection
+						rowSelection={rowSelection}
+						onRowSelectionChange={setRowSelection}
+						getRowId={(row) => row.id}
+						stickyHeader
+						maxBodyHeight={360}
+						emptyStateMessage="No orders match the current view."
+						rowActions={() => [
+							{ id: 'open', label: 'Open', icon: <Edit className="size-icon" />, onClick: () => {} },
+							{ id: 'delete', label: 'Delete', icon: <Trash2 className="size-icon" />, variant: 'destructive', onClick: () => {} },
+						]}
+						bulkActions={({ selectedRowCount }) => (
+							<Button variant="secondary" buttonStyle="outline" disabled={selectedRowCount === 0}>
+								Archive selected
+							</Button>
+						)}
+						footerContent={
+							<div className="flex flex-col gap-space-sm sm:flex-row sm:items-center sm:justify-between">
+								<Text tag="span" size="xs" type="secondary">
+									{filteredRows.length} of {realData.length} orders
+								</Text>
+								<Text tag="span" size="xs" type="secondary">
+									Compact density is the library default.
+								</Text>
+							</div>
+						}
+					/>
+				</div>
+			</Page>
+		</FilterProvider>
+	);
+}
+
+// ─────────────────────────────────────────────────────────────────────────────
+// Cell renderers (StatusCell, DateCell, CurrencyCell, AvatarCell)
+// ─────────────────────────────────────────────────────────────────────────────
+
+type CellDemoRow = {
+	id: string;
+	customer: string;
+	avatarUrl: string;
+	createdAt: string;
+	total: number;
+	status: 'paid' | 'pending' | 'shipped' | 'cancelled';
+};
+
+const cellDemoData: CellDemoRow[] = [
+	{ id: '1', customer: 'Sarah Smitha', avatarUrl: 'https://api.dicebear.com/7.x/avataaars/svg?seed=sarah', createdAt: '2026-04-12', total: 2450, status: 'paid' },
+	{ id: '2', customer: 'Daniel Smith', avatarUrl: 'https://api.dicebear.com/7.x/avataaars/svg?seed=dan', createdAt: '2026-04-13', total: 370, status: 'pending' },
+	{ id: '3', customer: 'Emma Garcia', avatarUrl: 'https://api.dicebear.com/7.x/avataaars/svg?seed=emma', createdAt: '2026-04-15', total: 1280, status: 'shipped' },
+	{ id: '4', customer: 'David Williams', avatarUrl: 'https://api.dicebear.com/7.x/avataaars/svg?seed=david', createdAt: '2026-04-09', total: 580, status: 'cancelled' },
+];
+
+const STATUS_MAP: Record<CellDemoRow['status'], StatusCellEntry> = {
+	paid: { label: 'Paid', variant: 'success', icon: CheckCircle2 },
+	pending: { label: 'Pending', variant: 'warning', icon: Clock },
+	shipped: { label: 'Shipped', variant: 'info', icon: Truck },
+	cancelled: { label: 'Cancelled', variant: 'destructive', icon: XCircle },
+};
+
+const cellDemoColumns: ColumnDef<CellDemoRow>[] = [
+	{
+		accessorKey: 'customer',
+		header: 'Customer',
+		cell: ({ row }) => (
+			<ResourceCell
+				title={row.original.customer}
+				imageUrl={row.original.avatarUrl}
+				subtitle={\`#\${row.original.id}\`}
+				href={\`#/customers/\${row.original.id}\`}
+			/>
+		),
+	},
+	{
+		accessorKey: 'status',
+		header: 'Status',
+		cell: ({ getValue }) => <StatusCell value={getValue() as CellDemoRow['status']} map={STATUS_MAP} />,
+	},
+	{
+		accessorKey: 'total',
+		header: 'Total',
+		cell: ({ getValue }) => <CurrencyCell value={getValue() as number} currency="USD" weight="semibold" />,
+	},
+	{
+		accessorKey: 'createdAt',
+		header: 'Created',
+		cell: ({ getValue }) => <DateCell value={getValue() as string} />,
+	},
+];
+
+export function CellRenderers() {
+	return <DataTable<CellDemoRow> columns={cellDemoColumns} data={cellDemoData} />;
+}
+
+type IndexUserRow = {
+	id: string;
+	name: string;
+	email: string;
+	role: string;
+	createdAt: string;
+	statuses: Array<'active' | 'verified' | 'twoFactor'>;
+};
+
+const indexUserData: IndexUserRow[] = [
+	{ id: 'USR-001', name: 'Sarah Smitha', email: 'sarah@example.com', role: 'Owner', createdAt: '2026-05-14', statuses: ['active', 'verified', 'twoFactor'] },
+	{ id: 'USR-002', name: 'Daniel Smith', email: 'daniel@example.com', role: 'Admin', createdAt: '2026-05-22', statuses: ['active', 'verified'] },
+	{ id: 'USR-003', name: 'Emma Garcia', email: 'emma@example.com', role: 'Support', createdAt: '2026-06-02', statuses: ['active'] },
+];
+
+const indexUserColumns: ColumnDef<IndexUserRow>[] = [
+	{
+		accessorKey: 'name',
+		header: 'User',
+		cell: ({ row }) => (
+			<ResourceCell
+				title={row.original.name}
+				subtitle={row.original.email}
+				metadata={[{ label: 'Role', value: row.original.role }]}
+				href={\`#/users/\${row.original.id}\`}
+			/>
+		),
+	},
+	{
+		id: 'status',
+		header: 'Status',
+		cell: ({ row }) => (
+			<StatusClusterCell
+				items={[
+					{ id: 'active', label: 'Active', variant: 'success', hidden: !row.original.statuses.includes('active') },
+					{ id: 'verified', label: 'Verified', variant: 'info', hidden: !row.original.statuses.includes('verified') },
+					{ id: 'twoFactor', label: '2FA', variant: 'secondary', hidden: !row.original.statuses.includes('twoFactor') },
+				]}
+			/>
+		),
+	},
+	{
+		accessorKey: 'createdAt',
+		header: 'Created',
+		cell: ({ getValue }) => (
+			<DateMetaCell value={getValue() as string} secondary="Synced today" />
+		),
+	},
+];
+
+export function IndexTableCells() {
+	return (
+		<DataTable<IndexUserRow>
+			columns={indexUserColumns}
+			data={indexUserData}
+			enableRowSelection
+			getRowId={(row) => row.id}
+			rowActionsMenuLabel={(row) => \`Actions for \${row.name}\`}
+			rowActions={() => [
+				{ id: 'open', label: 'Open', onClick: () => {} },
+				{ id: 'disable', label: 'Disable', variant: 'destructive', onClick: () => {} },
+			]}
+			bulkActions={({ selectedRowCount }) => (
+				<Button variant="secondary" disabled={selectedRowCount === 0}>
+					Bulk update
+				</Button>
+			)}
+			maxBodyHeight={320}
+			stickyToolbar
+		/>
+	);
+}
+
+// ─────────────────────────────────────────────────────────────────────────────
+// Row selection (with checkbox column)
+// ─────────────────────────────────────────────────────────────────────────────
+
+export function WithRowSelection() {
+	const [selection, setSelection] = useState<RowSelectionState>({});
+	return (
+		<div className="flex w-full min-w-0 max-w-full flex-col gap-space-md overflow-hidden">
+			<DataTable<Order>
+				columns={columns}
+				data={data}
+				enableRowSelection
+				rowSelection={selection}
+				onRowSelectionChange={setSelection}
+				getRowId={(row) => row.id}
+			/>
+			<Text size="xs" type="secondary">
+				selected: {Object.keys(selection).length === 0 ? '—' : Object.keys(selection).join(', ')}
+			</Text>
+		</div>
+	);
+}
+
+// ─────────────────────────────────────────────────────────────────────────────
+// Column visibility toggle (built-in toolbar)
+// ─────────────────────────────────────────────────────────────────────────────
+
+export function WithColumnVisibility() {
+	return (
+		<DataTable<Order>
+			columns={columns}
+			data={data}
+			enableSorting
+			enableColumnVisibility
+		/>
+	);
+}
+
+// ─────────────────────────────────────────────────────────────────────────────
+// Custom toolbar via topbarContent
+// ─────────────────────────────────────────────────────────────────────────────
+
+export function WithCustomToolbar() {
+	return (
+		<DataTable<Order>
+			columns={columns}
+			data={data}
+			enableColumnVisibility
+			topbarContent={
+				<div className="flex items-center gap-space-md">
+					<Text weight="semibold">Orders</Text>
+					<Badge variant="secondary">{data.length}</Badge>
+				</div>
+			}
+		/>
+	);
+}
+
+export function DataViewChrome() {
+	const [view, setView] = useState('all');
+
+	return (
+		<DataViewShell
+			header={
+				<div className="space-y-1">
+					<Text weight="semibold">Orders data view</Text>
+					<Text size="xs" type="secondary">Controlled chrome around the table; the app owns query state and data fetching.</Text>
+				</div>
+			}
+			toolbar={
+				<DataViewToolbar
+					search={<Input aria-label="Search orders" placeholder="Search orders..." className="w-56" />}
+					views={
+						<SavedViewTabs
+							value={view}
+							onValueChange={setView}
+							views={[
+								{ id: 'all', label: 'All', count: 117 },
+								{ id: 'review', label: 'Needs review', count: 8 },
+								{ id: 'drafts', label: 'Drafts', count: 16 },
+							]}
+						/>
+					}
+					actions={<Button variant="secondary">Export</Button>}
+				/>
+			}
+			footer={
+				<DataViewPagination
+					page={2}
+					pageCount={8}
+					total="117 orders"
+					onPageChange={() => {}}
+				/>
+			}
+		>
+			<DataTable<Order> columns={columns} data={data} surface="flat" />
+		</DataViewShell>
+	);
+}
+
+// ─────────────────────────────────────────────────────────────────────────────
+// Sticky header & first column
+// ─────────────────────────────────────────────────────────────────────────────
+
+export function StickyHeaderAndFirstColumn() {
+	return (
+		<DataTable<Order>
+			columns={columns}
+			data={[...data, ...data, ...data]}
+			stickyHeader
+			stickyFirstColumn
+			maxBodyHeight={256}
+		/>
+	);
+}
+
+// ─────────────────────────────────────────────────────────────────────────────
+// Empty state
+// ─────────────────────────────────────────────────────────────────────────────
+
+export function EmptyState() {
+	return (
+		<DataTable<Order>
+			columns={columns}
+			data={[]}
+			emptyStateMessage="No orders match the current filters."
+		/>
+	);
+}
+`;function Q(e){let t={code:`code`,p:`p`,...e.components};return me||$(`Examples`,!1),N||$(`Examples.BasicDefault`,!0),U||$(`Examples.CellRenderers`,!0),P||$(`Examples.ComfortableTable`,!0),J||$(`Examples.DataViewChrome`,!0),X||$(`Examples.EmptyState`,!0),H||$(`Examples.FilteredTabbedOrdersTable`,!0),W||$(`Examples.IndexTableCells`,!0),R||$(`Examples.PaginationExample`,!0),V||$(`Examples.RealisticOrdersTable`,!0),Y||$(`Examples.StickyHeaderAndFirstColumn`,!0),I||$(`Examples.SurfaceFlatInsideSmartCardTableRendersNoChrome`,!0),F||$(`Examples.SurfaceGlassHeaderTransparentCleanOutlineNoMutedHeader`,!0),K||$(`Examples.WithColumnVisibility`,!0),q||$(`Examples.WithCustomToolbar`,!0),G||$(`Examples.WithRowSelection`,!0),L||$(`Examples.WithSortingRowActions`,!0),(0,A.jsxs)(a,{title:`Table`,description:`DataTable + Pagination — TanStack-React-Table-backed, with sorting, row actions, sticky header, calibrated table rhythm, and three surface chromes.`,layer:`base`,status:`ready`,sourcePath:`src/components/base/table`,children:[(0,A.jsx)(c,{title:`Overview`,id:`overview`,children:(0,A.jsxs)(t.p,{children:[(0,A.jsx)(t.code,{children:`DataTable<T>`}),` wraps `,(0,A.jsx)(t.code,{children:`@tanstack/react-table`}),` with our typography, density,
+and surface tokens. Pass `,(0,A.jsx)(t.code,{children:`columns`}),` (typed against your row shape) and `,(0,A.jsx)(t.code,{children:`data`}),`,
+optionally enable `,(0,A.jsx)(t.code,{children:`sorting`}),` and supply `,(0,A.jsx)(t.code,{children:`rowActions`}),`. The default table scale is
+compact through `,(0,A.jsx)(t.code,{children:`UIProvider`}),`; use `,(0,A.jsx)(t.code,{children:`size="default"`}),` only when a table needs the
+more comfortable row rhythm. Actual cell padding and typography route through
+row, surface, and text variables.
+For index tables, make the first meaningful resource column a link by rendering
+`,(0,A.jsx)(t.code,{children:`<ResourceCell href="...">`}),` or by passing `,(0,A.jsx)(t.code,{children:`renderLink`}),` to `,(0,A.jsx)(t.code,{children:`ResourceCell`}),`; the
+consumer still owns router integration.
+Pair with `,(0,A.jsx)(t.code,{children:`Pagination`}),` for the canonical Laravel-paginator shape.`]})}),(0,A.jsxs)(c,{title:`Default`,id:`default`,children:[(0,A.jsx)(d,{name:`BasicDefault`,source:Z,children:(0,A.jsx)(N,{})}),(0,A.jsx)(d,{name:`ComfortableTable`,source:Z,children:(0,A.jsx)(P,{})})]}),(0,A.jsxs)(c,{title:`Surfaces`,id:`surfaces`,children:[(0,A.jsx)(d,{name:`SurfaceGlassHeaderTransparentCleanOutlineNoMutedHeader`,source:Z,children:(0,A.jsx)(F,{})}),(0,A.jsx)(d,{name:`SurfaceFlatInsideSmartCardTableRendersNoChrome`,source:Z,children:(0,A.jsx)(I,{})})]}),(0,A.jsx)(c,{title:`Features`,id:`features`,children:(0,A.jsx)(d,{name:`WithSortingRowActions`,source:Z,children:(0,A.jsx)(L,{})})}),(0,A.jsxs)(c,{title:`Cell renderers`,id:`cell-renderers`,children:[(0,A.jsxs)(t.p,{children:[(0,A.jsx)(t.code,{children:`StatusCell`}),`, `,(0,A.jsx)(t.code,{children:`StatusClusterCell`}),`, `,(0,A.jsx)(t.code,{children:`DateCell`}),`, `,(0,A.jsx)(t.code,{children:`DateMetaCell`}),`,
+`,(0,A.jsx)(t.code,{children:`CurrencyCell`}),`, `,(0,A.jsx)(t.code,{children:`AvatarCell`}),`, and `,(0,A.jsx)(t.code,{children:`ResourceCell`}),` are reusable column-cell
+renderers exported from `,(0,A.jsx)(t.code,{children:`base/table`}),`. Compose them inside your column `,(0,A.jsx)(t.code,{children:`cell`}),`
+function to keep index tables consistent.`]}),(0,A.jsx)(d,{name:`CellRenderers`,source:Z,children:(0,A.jsx)(U,{})}),(0,A.jsx)(d,{name:`IndexTableCells`,source:Z,children:(0,A.jsx)(W,{})})]}),(0,A.jsx)(c,{title:`Selection`,id:`selection`,children:(0,A.jsx)(d,{name:`WithRowSelection`,source:Z,children:(0,A.jsx)(G,{})})}),(0,A.jsxs)(c,{title:`Toolbar`,id:`toolbar`,children:[(0,A.jsx)(d,{name:`WithColumnVisibility`,source:Z,children:(0,A.jsx)(K,{})}),(0,A.jsx)(d,{name:`WithCustomToolbar`,source:Z,children:(0,A.jsx)(q,{})}),(0,A.jsx)(d,{name:`DataViewChrome`,source:Z,children:(0,A.jsx)(J,{})})]}),(0,A.jsxs)(c,{title:`Integrated filters`,id:`integrated-filters`,children:[(0,A.jsxs)(t.p,{children:[`Use `,(0,A.jsx)(t.code,{children:`features/filters`}),` beside `,(0,A.jsx)(t.code,{children:`DataTable`}),`; do not make the base table own
+query state. This mirrors the consumer shape: tabs and filters update row data,
+while the table owns selection, sorting, sticky header, column controls, and row
+actions.`]}),(0,A.jsx)(d,{name:`FilteredTabbedOrdersTable`,source:Z,children:(0,A.jsx)(H,{})})]}),(0,A.jsx)(c,{title:`Sticky`,id:`sticky`,children:(0,A.jsx)(d,{name:`StickyHeaderAndFirstColumn`,source:Z,children:(0,A.jsx)(Y,{})})}),(0,A.jsx)(c,{title:`States`,id:`states`,children:(0,A.jsx)(d,{name:`EmptyState`,source:Z,children:(0,A.jsx)(X,{})})}),(0,A.jsx)(c,{title:`Pagination`,id:`pagination`,children:(0,A.jsx)(d,{name:`PaginationExample`,source:Z,children:(0,A.jsx)(R,{})})}),(0,A.jsx)(c,{title:`Realistic usage`,id:`realistic`,children:(0,A.jsx)(d,{name:`RealisticOrdersTable`,source:Z,children:(0,A.jsx)(V,{})})}),(0,A.jsxs)(c,{title:`API`,id:`api`,children:[(0,A.jsx)(E,{component:`DataTable`}),(0,A.jsx)(E,{component:`Pagination`}),(0,A.jsx)(E,{component:`ResourceCell`}),(0,A.jsx)(E,{component:`StatusClusterCell`}),(0,A.jsx)(E,{component:`DateMetaCell`}),(0,A.jsx)(E,{component:`DataViewShell`}),(0,A.jsx)(E,{component:`DataViewToolbar`}),(0,A.jsx)(E,{component:`DataViewPagination`}),(0,A.jsx)(E,{component:`SavedViewTabs`})]})]})}function Te(e={}){let{wrapper:t}=e.components||{};return t?(0,A.jsx)(t,{...e,children:(0,A.jsx)(Q,{...e})}):Q(e)}function $(e,t){throw Error(`Expected `+(t?`component`:`object`)+" `"+e+"` to be defined: you likely forgot to import, pass, or provide it.")}export{Te as default};