admin-ui-starter-kit 0.6.2 → 0.6.5

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

@@ -1,664 +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 a}from"./filter-layout-Bskvgeps.js";import{n as o,o as s,p as c,t as l}from"./section-Dd6X6IKg.js";import{t as u}from"./badge-check-DGmg0_g_.js";import{r as d,t as f}from"./example-Rrx9vj75.js";import{t as p}from"./circle-check-BPhdxh7K.js";import{t as m}from"./circle-x-Dh3sb4UC.js";import{t as h}from"./clock-BApGqXwn.js";import{a as g,i as te,n as ne,o as re,r as _,t as ie}from"./data-view-DqpNNGp5.js";import{t as ae}from"./shopping-bag-DGXTQNOf.js";import{t as v}from"./square-pen-BrZ2OxTe.js";import{t as y}from"./trash-2-Bf5dpRjn.js";import{t as b}from"./truck-CqmeajvP.js";import{t as x}from"./user-B35DABNz.js";import{a as S,d as C}from"./index-o71HAmc3.js";import{t as w}from"./props-table-C6gPyO49.js";import{t as oe}from"./icon-badge-GMIN-bca.js";import{t as se}from"./smart-card-BwSFemlj.js";import{t as ce}from"./customers-DvBxRjHv.js";import{t as le}from"./orders-BFwWtubb.js";import{t as ue}from"./input-CYTQ9nWN.js";import{a as de,i as fe,n as pe,o as me,r as he,s as ge,t as T}from"./cell-renderers-VbI9xEAd.js";import{t as E}from"./page-DvMaeo43.js";var D=e({BasicDefault:()=>M,CellRenderers:()=>U,ComfortableTable:()=>N,DataViewChrome:()=>J,EmptyState:()=>X,FilteredTabbedOrdersTable:()=>H,IndexTableCells:()=>W,PaginationExample:()=>L,RealisticOrdersTable:()=>V,StickyHeaderAndFirstColumn:()=>Y,SurfaceFlatInsideSmartCardTableRendersNoChrome:()=>F,SurfaceGlassHeaderTransparentCleanOutlineNoMutedHeader:()=>P,WithColumnVisibility:()=>K,WithCustomToolbar:()=>q,WithRowSelection:()=>G,WithSortingRowActions:()=>I}),O=t(n(),1),k=C(),A=[{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`}],j=[{accessorKey:`id`,header:`Order`,cell:({getValue:e})=>(0,k.jsxs)(`div`,{className:`flex items-center gap-space-md`,children:[(0,k.jsx)(oe,{icon:ae,size:`small`,shape:`square`,tone:`primary`}),(0,k.jsx)(c,{tag:`span`,size:`inherit`,weight:`semibold`,className:`font-mono`,children:String(e())})]})},{accessorKey:`customer`,header:`Customer`,cell:({row:e})=>(0,k.jsx)(T,{name:e.original.customer})},{accessorKey:`amount`,header:`Amount`,meta:{align:`end`},cell:({getValue:e})=>(0,k.jsx)(c,{tag:`span`,size:`inherit`,weight:`semibold`,className:`tabular-nums`,children:String(e())})},{accessorKey:`status`,header:`Status`,cell:({getValue:e})=>{let t=e();return(0,k.jsx)(s,{variant:t===`paid`?`success`:t===`pending`?`warning`:`error`,dot:!0,children:t})}},{accessorKey:`date`,header:`Date`,cell:({getValue:e})=>(0,k.jsx)(c,{tag:`span`,size:`inherit`,type:`secondary`,className:`tabular-nums`,children:String(e())})}];function M(){return(0,k.jsx)(g,{columns:j,data:A})}function N(){return(0,k.jsx)(g,{columns:j,data:A,size:`default`,rowActions:()=>[{id:`edit`,label:`Edit`,icon:(0,k.jsx)(v,{className:`size-icon`}),onClick:()=>{}},{id:`delete`,label:`Delete`,icon:(0,k.jsx)(y,{className:`size-icon`}),variant:`destructive`,onClick:()=>{}}]})}function P(){return(0,k.jsx)(g,{columns:j,data:A,surface:`glass`,headerTransparent:!0})}function F(){return(0,k.jsx)(se,{padding:`small`,className:`w-full min-w-0 max-w-full overflow-hidden`,children:(0,k.jsx)(g,{columns:j,data:A,surface:`flat`,headerTransparent:!0})})}function I(){return(0,k.jsx)(g,{columns:j,data:A,enableSorting:!0,rowActions:()=>[{id:`edit`,label:`Edit`,icon:(0,k.jsx)(v,{className:`size-icon`}),onClick:()=>{}},{id:`delete`,label:`Delete`,icon:(0,k.jsx)(y,{className:`size-icon`}),variant:`destructive`,onClick:()=>{}}]})}function L(){return(0,k.jsx)(re,{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 R=le.map(e=>({id:e.id,number:e.number,customer:ce.find(t=>t.id===e.customerId)?.name??`—`,totalUsd:e.totalUsd,status:e.status})),_e=[{label:`Paid`,value:`paid`,icon:null},{label:`Pending`,value:`pending`,icon:null},{label:`Shipped`,value:`shipped`,icon:null},{label:`Cancelled`,value:`cancelled`,icon:null}],ve=[...new Set(R.map(e=>e.customer))].map(e=>({label:e,value:e,icon:null})),z=[{key:`q`,label:`Search`,type:r.SEARCH,operator:i.CONTAINS,placeholder:`Search orders or customers…`,icon:(0,k.jsx)(S,{className:`size-icon`}),displayConfig:{display:`always`}},{key:`status`,label:`Status`,pluralLabel:`statuses`,type:r.MULTI_SELECT,operator:i.IN,icon:(0,k.jsx)(u,{className:`size-icon`}),displayConfig:{display:`always`},options:_e},{key:`customer`,label:`Customer`,type:r.MULTI_SELECT,operator:i.IN,icon:(0,k.jsx)(x,{className:`size-icon`}),displayConfig:{display:`collapsed`},options:ve}],ye=[{id:`all`,label:`All`,count:R.length,presets:[]},{id:`open`,label:`Open`,count:R.filter(e=>e.status===`pending`).length,presets:[{key:`status`,value:[`pending`],operator:i.IN}]},{id:`paid`,label:`Paid`,count:R.filter(e=>e.status===`paid`).length,presets:[{key:`status`,value:[`paid`],operator:i.IN}]},{id:`fulfillment`,label:`Fulfillment`,count:R.filter(e=>e.status===`shipped`).length,presets:[{key:`status`,value:[`shipped`],operator:i.IN}]}];function be(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:({getValue:e})=>(0,k.jsx)(c,{tag:`span`,size:`inherit`,weight:`medium`,className:`font-mono`,children:String(e())})},{accessorKey:`customer`,header:`Customer`},{accessorKey:`totalUsd`,header:`Total`,cell:({getValue:e})=>(0,k.jsxs)(c,{tag:`span`,size:`inherit`,className:`tabular-nums`,children:[`$`,e().toLocaleString()]})},{accessorKey:`status`,header:`Status`,cell:({getValue:e})=>{let t=e();return(0,k.jsx)(s,{variant:t===`paid`?`success`:t===`pending`?`warning`:t===`cancelled`?`error`:`info`,dot:!0,children:t})}}];function V(){return(0,k.jsx)(g,{columns:B,data:R,enableSorting:!0,rowActions:()=>[{id:`edit`,label:`Edit`,icon:(0,k.jsx)(v,{className:`size-icon`}),onClick:()=>{}},{id:`delete`,label:`Delete`,icon:(0,k.jsx)(y,{className:`size-icon`}),variant:`destructive`,onClick:()=>{}}]})}function H(){let[e,t]=(0,O.useState)([]),[n,r]=(0,O.useState)({}),i=(0,O.useMemo)(()=>be(R,e),[e]),o=Object.keys(n).length;return(0,k.jsx)(ee,{filters:z,activeFilters:e,onFilterChange:t,children:(0,k.jsx)(E,{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`},...o>0?[{label:`${o} selected`,variant:`info`}]:[]],description:`Tabs, filter state, selection, column controls, sticky header, and compact table density in one surface.`,actions:(0,k.jsxs)(`div`,{className:`flex shrink-0 items-center gap-space-md`,children:[(0,k.jsx)(d,{variant:`secondary`,buttonStyle:`outline`,children:`Export`}),(0,k.jsx)(d,{children:`New order`})]}),actionsClassName:`pt-1`},children:(0,k.jsxs)(`div`,{className:`data-table-integration--surface overflow-hidden rounded-lg border border-border bg-card`,children:[(0,k.jsx)(`div`,{className:`data-table-integration--filters border-b border-border/70 px-surface py-surface`,children:(0,k.jsx)(a,{variant:`compact`,showClearFilters:!0,tabs:ye})}),(0,k.jsx)(g,{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,k.jsx)(v,{className:`size-icon`}),onClick:()=>{}},{id:`delete`,label:`Delete`,icon:(0,k.jsx)(y,{className:`size-icon`}),variant:`destructive`,onClick:()=>{}}],bulkActions:({selectedRowCount:e})=>(0,k.jsx)(d,{variant:`secondary`,buttonStyle:`outline`,disabled:e===0,children:`Archive selected`}),footerContent:(0,k.jsxs)(`div`,{className:`flex flex-col gap-space-sm sm:flex-row sm:items-center sm:justify-between`,children:[(0,k.jsxs)(c,{tag:`span`,size:`xs`,type:`secondary`,children:[i.length,` of `,R.length,` orders`]}),(0,k.jsx)(c,{tag:`span`,size:`xs`,type:`secondary`,children:`Compact density is the library default.`})]})})]})})})}var xe=[{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`}],Se={paid:{label:`Paid`,variant:`success`,icon:p},pending:{label:`Pending`,variant:`warning`,icon:h},shipped:{label:`Shipped`,variant:`info`,icon:b},cancelled:{label:`Cancelled`,variant:`destructive`,icon:m}},Ce=[{accessorKey:`customer`,header:`Customer`,cell:({row:e})=>(0,k.jsx)(T,{name:e.original.customer,imageUrl:e.original.avatarUrl,subtitle:`#${e.original.id}`})},{accessorKey:`status`,header:`Status`,cell:({getValue:e})=>(0,k.jsx)(me,{value:e(),map:Se})},{accessorKey:`total`,header:`Total`,cell:({getValue:e})=>(0,k.jsx)(pe,{value:e(),currency:`USD`,weight:`semibold`})},{accessorKey:`createdAt`,header:`Created`,cell:({getValue:e})=>(0,k.jsx)(he,{value:e()})}];function U(){return(0,k.jsx)(g,{columns:Ce,data:xe})}var we=[{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`]}],Te=[{accessorKey:`name`,header:`User`,cell:({row:e})=>(0,k.jsx)(de,{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,k.jsx)(ge,{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,k.jsx)(fe,{value:e(),secondary:`Synced today`})}];function W(){return(0,k.jsx)(g,{columns:Te,data:we,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,k.jsx)(d,{variant:`secondary`,disabled:e===0,children:`Bulk update`}),maxBodyHeight:320,stickyToolbar:!0})}function G(){let[e,t]=(0,O.useState)({});return(0,k.jsxs)(`div`,{className:`flex w-full min-w-0 max-w-full flex-col gap-space-md overflow-hidden`,children:[(0,k.jsx)(g,{columns:j,data:A,enableRowSelection:!0,rowSelection:e,onRowSelectionChange:t,getRowId:e=>e.id}),(0,k.jsxs)(c,{size:`xs`,type:`secondary`,children:[`selected: `,Object.keys(e).length===0?`—`:Object.keys(e).join(`, `)]})]})}function K(){return(0,k.jsx)(g,{columns:j,data:A,enableSorting:!0,enableColumnVisibility:!0})}function q(){return(0,k.jsx)(g,{columns:j,data:A,enableColumnVisibility:!0,topbarContent:(0,k.jsxs)(`div`,{className:`flex items-center gap-space-md`,children:[(0,k.jsx)(c,{weight:`semibold`,children:`Orders`}),(0,k.jsx)(s,{variant:`secondary`,children:A.length})]})})}function J(){let[e,t]=(0,O.useState)(`all`);return(0,k.jsx)(ne,{header:(0,k.jsxs)(`div`,{className:`space-y-1`,children:[(0,k.jsx)(c,{weight:`semibold`,children:`Orders data view`}),(0,k.jsx)(c,{size:`xs`,type:`secondary`,children:`Controlled chrome around the table; the app owns query state and data fetching.`})]}),toolbar:(0,k.jsx)(_,{search:(0,k.jsx)(ue,{"aria-label":`Search orders`,placeholder:`Search orders...`,className:`w-56`}),views:(0,k.jsx)(te,{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,k.jsx)(d,{variant:`secondary`,children:`Export`})}),footer:(0,k.jsx)(ie,{page:2,pageCount:8,total:`117 orders`,onPageChange:()=>{}}),children:(0,k.jsx)(g,{columns:j,data:A,surface:`flat`})})}function Y(){return(0,k.jsx)(g,{columns:j,data:[...A,...A,...A],stickyHeader:!0,stickyFirstColumn:!0,maxBodyHeight:256})}function X(){return(0,k.jsx)(g,{columns:j,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 { IconBadge } from '@/components/base/display/icon-badge';
-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: ({ getValue }) => (
-			<div className="flex items-center gap-space-md">
-				<IconBadge icon={ShoppingBag} size="small" shape="square" tone="primary" />
-				<Text tag="span" size="inherit" weight="semibold" className="font-mono">
-					{String(getValue())}
-				</Text>
-			</div>
-		),
-	},
-	{
-		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: ({ getValue }) => <Text tag="span" size="inherit" weight="medium" className="font-mono">{String(getValue())}</Text> },
-	{ 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 }) => <AvatarCell name={row.original.customer} imageUrl={row.original.avatarUrl} subtitle={\`#\${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 D||$(`Examples`,!1),M||$(`Examples.BasicDefault`,!0),U||$(`Examples.CellRenderers`,!0),N||$(`Examples.ComfortableTable`,!0),J||$(`Examples.DataViewChrome`,!0),X||$(`Examples.EmptyState`,!0),H||$(`Examples.FilteredTabbedOrdersTable`,!0),W||$(`Examples.IndexTableCells`,!0),L||$(`Examples.PaginationExample`,!0),V||$(`Examples.RealisticOrdersTable`,!0),Y||$(`Examples.StickyHeaderAndFirstColumn`,!0),F||$(`Examples.SurfaceFlatInsideSmartCardTableRendersNoChrome`,!0),P||$(`Examples.SurfaceGlassHeaderTransparentCleanOutlineNoMutedHeader`,!0),K||$(`Examples.WithColumnVisibility`,!0),q||$(`Examples.WithCustomToolbar`,!0),G||$(`Examples.WithRowSelection`,!0),I||$(`Examples.WithSortingRowActions`,!0),(0,k.jsxs)(o,{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,k.jsx)(l,{title:`Overview`,id:`overview`,children:(0,k.jsxs)(t.p,{children:[(0,k.jsx)(t.code,{children:`DataTable<T>`}),` wraps `,(0,k.jsx)(t.code,{children:`@tanstack/react-table`}),` with our typography, density,
-and surface tokens. Pass `,(0,k.jsx)(t.code,{children:`columns`}),` (typed against your row shape) and `,(0,k.jsx)(t.code,{children:`data`}),`,
-optionally enable `,(0,k.jsx)(t.code,{children:`sorting`}),` and supply `,(0,k.jsx)(t.code,{children:`rowActions`}),`. The default table scale is
-compact through `,(0,k.jsx)(t.code,{children:`UIProvider`}),`; use `,(0,k.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.
-Pair with `,(0,k.jsx)(t.code,{children:`Pagination`}),` for the canonical Laravel-paginator shape.`]})}),(0,k.jsxs)(l,{title:`Default`,id:`default`,children:[(0,k.jsx)(f,{name:`BasicDefault`,source:Z,children:(0,k.jsx)(M,{})}),(0,k.jsx)(f,{name:`ComfortableTable`,source:Z,children:(0,k.jsx)(N,{})})]}),(0,k.jsxs)(l,{title:`Surfaces`,id:`surfaces`,children:[(0,k.jsx)(f,{name:`SurfaceGlassHeaderTransparentCleanOutlineNoMutedHeader`,source:Z,children:(0,k.jsx)(P,{})}),(0,k.jsx)(f,{name:`SurfaceFlatInsideSmartCardTableRendersNoChrome`,source:Z,children:(0,k.jsx)(F,{})})]}),(0,k.jsx)(l,{title:`Features`,id:`features`,children:(0,k.jsx)(f,{name:`WithSortingRowActions`,source:Z,children:(0,k.jsx)(I,{})})}),(0,k.jsxs)(l,{title:`Cell renderers`,id:`cell-renderers`,children:[(0,k.jsxs)(t.p,{children:[(0,k.jsx)(t.code,{children:`StatusCell`}),`, `,(0,k.jsx)(t.code,{children:`StatusClusterCell`}),`, `,(0,k.jsx)(t.code,{children:`DateCell`}),`, `,(0,k.jsx)(t.code,{children:`DateMetaCell`}),`,
-`,(0,k.jsx)(t.code,{children:`CurrencyCell`}),`, `,(0,k.jsx)(t.code,{children:`AvatarCell`}),`, and `,(0,k.jsx)(t.code,{children:`ResourceCell`}),` are reusable column-cell
-renderers exported from `,(0,k.jsx)(t.code,{children:`base/table`}),`. Compose them inside your column `,(0,k.jsx)(t.code,{children:`cell`}),`
-function to keep index tables consistent.`]}),(0,k.jsx)(f,{name:`CellRenderers`,source:Z,children:(0,k.jsx)(U,{})}),(0,k.jsx)(f,{name:`IndexTableCells`,source:Z,children:(0,k.jsx)(W,{})})]}),(0,k.jsx)(l,{title:`Selection`,id:`selection`,children:(0,k.jsx)(f,{name:`WithRowSelection`,source:Z,children:(0,k.jsx)(G,{})})}),(0,k.jsxs)(l,{title:`Toolbar`,id:`toolbar`,children:[(0,k.jsx)(f,{name:`WithColumnVisibility`,source:Z,children:(0,k.jsx)(K,{})}),(0,k.jsx)(f,{name:`WithCustomToolbar`,source:Z,children:(0,k.jsx)(q,{})}),(0,k.jsx)(f,{name:`DataViewChrome`,source:Z,children:(0,k.jsx)(J,{})})]}),(0,k.jsxs)(l,{title:`Integrated filters`,id:`integrated-filters`,children:[(0,k.jsxs)(t.p,{children:[`Use `,(0,k.jsx)(t.code,{children:`features/filters`}),` beside `,(0,k.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,k.jsx)(f,{name:`FilteredTabbedOrdersTable`,source:Z,children:(0,k.jsx)(H,{})})]}),(0,k.jsx)(l,{title:`Sticky`,id:`sticky`,children:(0,k.jsx)(f,{name:`StickyHeaderAndFirstColumn`,source:Z,children:(0,k.jsx)(Y,{})})}),(0,k.jsx)(l,{title:`States`,id:`states`,children:(0,k.jsx)(f,{name:`EmptyState`,source:Z,children:(0,k.jsx)(X,{})})}),(0,k.jsx)(l,{title:`Pagination`,id:`pagination`,children:(0,k.jsx)(f,{name:`PaginationExample`,source:Z,children:(0,k.jsx)(L,{})})}),(0,k.jsx)(l,{title:`Realistic usage`,id:`realistic`,children:(0,k.jsx)(f,{name:`RealisticOrdersTable`,source:Z,children:(0,k.jsx)(V,{})})}),(0,k.jsxs)(l,{title:`API`,id:`api`,children:[(0,k.jsx)(w,{component:`DataTable`}),(0,k.jsx)(w,{component:`Pagination`}),(0,k.jsx)(w,{component:`ResourceCell`}),(0,k.jsx)(w,{component:`StatusClusterCell`}),(0,k.jsx)(w,{component:`DateMetaCell`}),(0,k.jsx)(w,{component:`DataViewShell`}),(0,k.jsx)(w,{component:`DataViewToolbar`}),(0,k.jsx)(w,{component:`DataViewPagination`}),(0,k.jsx)(w,{component:`SavedViewTabs`})]})]})}function Ee(e={}){let{wrapper:t}=e.components||{};return t?(0,k.jsx)(t,{...e,children:(0,k.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{Ee as default};