admin-ui-starter-kit 0.7.0 → 0.7.1

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

@@ -1,686 +0,0 @@
-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};