tembro 1.0.0

package/dist/showcase/families/data-table/showcase.cjs

@@ -0,0 +1 @@
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("../../../_virtual/_rolldown/runtime.cjs"),t=require("../../../components/ui/button/index.cjs"),n=require("../../../components/inputs/search-input.cjs"),r=require("../../../components/ui/badge/index.cjs"),i=require("../../../components/overlay/sheet-shell.cjs"),a=require("../../../components/data-table/data-table-actions-column.cjs"),o=require("../../../components/data-table/data-table-bulk-actions.cjs"),s=require("../../../components/data-table/data-table-column-visibility-menu.cjs"),c=require("../../../components/data-table/data-table.cjs"),l=require("../../../components/data-table/data-table-select-column.cjs"),u=require("../../../components/data-table/data-table-sortable-header.cjs"),d=require("../../../components/data-table/data-table-view-presets.cjs"),f=require("./data.cjs");let p=require("react");p=e.__toESM(p,1);let m=require("react/jsx-runtime");function h({state:e,setState:h}){let[g,_]=p.useState({}),[v,y]=p.useState([]),[b,x]=p.useState({}),[S,C]=p.useState(f.dataTableDemoRows[0]?.invoice??``),[w,T]=p.useState(!1),[E,D]=p.useState(!1),[O,k]=p.useState(!1),[A,j]=p.useState(!1),[M,N]=p.useState(`all`),[P,F]=p.useState(`skeleton`),[I,L]=p.useState(`client`),[R,z]=p.useState(3),[B,V]=p.useState(0),H=p.useMemo(()=>{let t=e.search.trim().toLowerCase(),n=f.dataTableDemoRows;return M===`finance`&&(n=n.filter(e=>e.status===`Paid`||e.status===`Review`)),M===`at-risk`&&(n=n.filter(e=>e.status===`Draft`||e.status===`Overdue`)),O?[]:t?n.filter(e=>[e.invoice,e.order,e.customer,e.owner,e.channel,e.status,e.amount,e.items].join(` `).toLowerCase().includes(t)):n},[O,e.search,M]),U=Math.max(Math.ceil(H.length/R),1),W=Math.min(B,Math.max(U-1,0)),G=p.useMemo(()=>H.slice(W*R,W*R+R),[R,W,H]),K=p.useMemo(()=>f.dataTableDemoRows.filter((e,t)=>g[t]),[g]),q=f.dataTableDemoRows.find(e=>e.invoice===S)??G[0],J=H.filter(e=>e.status===`Paid`).reduce((e,t)=>e+t.amountValue,0),Y=E,X=p.useMemo(()=>[l.createDataTableSelectColumn(),{accessorKey:`invoice`,header:({column:e})=>(0,m.jsx)(u.DataTableSortableHeader,{column:e,children:`Invoice`}),cell:({row:e})=>(0,m.jsxs)(`div`,{className:`min-w-[132px]`,children:[(0,m.jsx)(`p`,{className:`aui-text-strong font-medium`,children:e.original.invoice}),(0,m.jsx)(`p`,{className:`aui-text-muted mt-1 text-xs`,children:e.original.order})]})},{accessorKey:`customer`,header:({column:e})=>(0,m.jsx)(u.DataTableSortableHeader,{column:e,children:`Customer`}),cell:({row:e})=>(0,m.jsxs)(`div`,{className:`min-w-[180px]`,children:[(0,m.jsx)(`p`,{className:`aui-text-strong font-medium`,children:e.original.customer}),(0,m.jsxs)(`p`,{className:`aui-text-muted mt-1 text-xs`,children:[e.original.owner,` • `,e.original.channel]})]})},{accessorKey:`status`,header:`Status`,cell:({row:e})=>(0,m.jsx)(r.Badge,{variant:e.original.status===`Paid`?`secondary`:e.original.status===`Review`?`outline`:`destructive`,children:e.original.status})},{accessorKey:`items`,header:({column:e})=>(0,m.jsx)(u.DataTableSortableHeader,{column:e,children:`Items`}),cell:({row:e})=>(0,m.jsx)(`span`,{className:`aui-text-strong font-medium`,children:e.original.items})},{accessorKey:`stock`,header:({column:e})=>(0,m.jsx)(u.DataTableSortableHeader,{column:e,children:`Stock`})},{accessorKey:`amount`,header:({column:e})=>(0,m.jsx)(u.DataTableSortableHeader,{column:e,children:`Amount`}),cell:({row:e})=>(0,m.jsxs)(`div`,{className:`min-w-[116px]`,children:[(0,m.jsx)(`p`,{className:`aui-text-strong font-medium`,children:e.original.amount}),(0,m.jsx)(`p`,{className:`mt-1 text-xs ${e.original.trend===`up`?`text-emerald-600`:e.original.trend===`down`?`text-rose-600`:`aui-text-muted`}`,children:e.original.trend===`up`?`Trending up`:e.original.trend===`down`?`Needs attention`:`Stable`})]})},{accessorKey:`updatedAt`,header:`Updated`,cell:({row:e})=>(0,m.jsxs)(`div`,{children:[(0,m.jsx)(`p`,{className:`aui-text-strong font-medium`,children:e.original.updatedAt}),(0,m.jsx)(`p`,{className:`aui-text-muted mt-1 text-xs`,children:e.original.status===`Draft`?`Editing locked`:`Live sync`})]})},a.createDataTableActionsColumn({getActions:(e,t)=>[{key:`view`,label:`Open detail`,onSelect:()=>{C(t.invoice),T(!0)}},{key:`follow-up`,label:`Create follow-up`,onSelect:()=>h({notes:`Follow-up prepared for ${t.customer}`})},{key:`archive`,label:`Archive`,destructive:!0,onSelect:()=>h({notes:`${t.invoice} marked for archive review`})}]})],[h]);return(0,m.jsxs)(`div`,{className:`space-y-4`,children:[(0,m.jsxs)(`div`,{className:`rounded-[22px] border border-[color:var(--aui-surface-border)] bg-[color:var(--aui-surface)] p-4`,children:[(0,m.jsxs)(`div`,{className:`flex flex-col gap-4 xl:flex-row xl:items-start xl:justify-between`,children:[(0,m.jsxs)(`div`,{className:`space-y-3`,children:[(0,m.jsxs)(`div`,{className:`flex flex-wrap items-center gap-2`,children:[(0,m.jsxs)(r.Badge,{variant:`outline`,children:[K.length,` selected`]}),(0,m.jsx)(r.Badge,{variant:`outline`,children:M===`all`?`All invoices`:M===`finance`?`Finance review`:`At risk`}),(0,m.jsxs)(r.Badge,{variant:`outline`,children:[H.length,` rows`]}),(0,m.jsx)(r.Badge,{variant:`outline`,children:P}),(0,m.jsx)(r.Badge,{variant:`outline`,children:I===`server`?`Manual server-state`:`Client state`})]}),(0,m.jsxs)(`div`,{children:[(0,m.jsx)(`p`,{className:`aui-text-strong text-sm font-medium`,children:`Reusable DataTable flow`}),(0,m.jsx)(`p`,{className:`aui-text-muted mt-1 text-sm leading-6`,children:`Selection, column visibility, mobile cards, manual server-state, detail sheet, disabled rows and pagination in one compact surface.`})]})]}),(0,m.jsxs)(`div`,{className:`flex flex-wrap items-center gap-2`,children:[(0,m.jsx)(t.Button,{variant:I===`client`?`default`:`outline`,size:`sm`,onClick:()=>{L(`client`),D(!1)},children:`Client`}),(0,m.jsx)(t.Button,{variant:I===`server`?`default`:`outline`,size:`sm`,onClick:()=>{L(`server`),D(!1)},children:`Server`}),(0,m.jsx)(t.Button,{variant:e.density===`compact`?`default`:`outline`,size:`sm`,onClick:()=>h({density:`compact`}),children:`Compact`}),(0,m.jsx)(t.Button,{variant:e.density===`comfortable`?`default`:`outline`,size:`sm`,onClick:()=>h({density:`comfortable`}),children:`Comfortable`}),(0,m.jsx)(t.Button,{variant:P===`skeleton`?`default`:`outline`,size:`sm`,onClick:()=>F(e=>e===`skeleton`?`state`:`skeleton`),children:P===`skeleton`?`Skeleton`:`State`}),(0,m.jsx)(t.Button,{variant:E?`default`:`outline`,size:`sm`,onClick:()=>D(e=>!e),children:`Loading`}),(0,m.jsx)(t.Button,{variant:A?`default`:`outline`,size:`sm`,onClick:()=>j(e=>!e),children:`Error`}),(0,m.jsx)(t.Button,{variant:O?`default`:`outline`,size:`sm`,onClick:()=>k(e=>!e),children:`Empty`}),(0,m.jsx)(t.Button,{variant:`outline`,size:`sm`,onClick:()=>{h({search:``}),N(`all`),D(!1),j(!1),k(!1),F(`skeleton`),L(`client`),V(0),_({}),x({}),T(!1)},children:`Reset`})]})]}),(0,m.jsxs)(`div`,{className:`mt-4 flex flex-col gap-3 xl:flex-row xl:items-center xl:justify-between`,children:[(0,m.jsx)(d.DataTableViewPresets,{value:M,onValueChange:e=>{N(e??`all`),V(0)},presets:f.dataTableDemoPresets,size:`sm`}),(0,m.jsx)(`div`,{className:`w-full max-w-[320px]`,children:(0,m.jsx)(n.SearchInput,{value:e.search,onValueChange:e=>h({search:e}),placeholder:`Search invoice, customer, owner...`})})]})]}),(0,m.jsx)(`div`,{className:`rounded-[22px] border border-[color:var(--aui-surface-border)] bg-[color:var(--aui-surface)] p-4`,children:(0,m.jsx)(c.DataTable,{columns:X,data:G,getRowId:e=>e.invoice,rowSelection:g,onRowSelectionChange:_,sorting:v,onSortingChange:y,columnVisibility:b,onColumnVisibilityChange:x,enableRowSelection:!0,density:e.density===`comfortable`?`comfortable`:`compact`,striped:!0,bordered:!0,stickyHeader:!0,isLoading:Y,isError:A,loadingVariant:P,loadingState:{label:I===`server`?`Fetching invoices`:`Loading invoices`,description:I===`server`?`Manual mode simulates server-side filtering, sorting and pagination.`:`Reusable DataTable loading state.`},errorState:{title:`Invoice table failed`,description:`Force error state to inspect resilient UI.`},emptyState:{title:`No rows found`,description:`Current view or search does not match any invoice.`},getRowDisabled:e=>e.original.status===`Draft`,onRowClick:e=>C(e.original.invoice),onRowDoubleClick:e=>{C(e.original.invoice),T(!0),h({notes:`${e.original.invoice} opened from double click`})},renderMobileCard:e=>(0,m.jsxs)(`button`,{type:`button`,onClick:()=>{C(e.original.invoice),T(!0)},className:S===e.original.invoice?`rounded-[20px] aui-surface-strong border-[color:var(--aui-surface-strong)] p-4 text-left`:`rounded-[20px] border border-[color:var(--aui-surface-border)] bg-[color:var(--aui-surface)] p-4 text-left`,children:[(0,m.jsxs)(`div`,{className:`flex items-center justify-between gap-3`,children:[(0,m.jsxs)(`div`,{children:[(0,m.jsx)(`p`,{className:`font-medium`,children:e.original.invoice}),(0,m.jsxs)(`p`,{className:S===e.original.invoice?`mt-1 text-sm text-[color:color-mix(in_oklch,var(--aui-surface-strong-foreground)_72%,transparent)]`:`aui-text-muted mt-1 text-sm`,children:[e.original.customer,` • `,e.original.owner]})]}),(0,m.jsx)(r.Badge,{variant:e.original.status===`Paid`?`secondary`:e.original.status===`Review`?`outline`:`destructive`,children:e.original.status})]}),(0,m.jsxs)(`div`,{className:`mt-4 grid grid-cols-2 gap-3 text-sm`,children:[(0,m.jsxs)(`div`,{children:[(0,m.jsx)(`p`,{className:S===e.original.invoice?`text-[color:color-mix(in_oklch,var(--aui-surface-strong-foreground)_60%,transparent)]`:`aui-text-muted`,children:`Amount`}),(0,m.jsx)(`p`,{className:`mt-1 font-semibold`,children:e.original.amount})]}),(0,m.jsxs)(`div`,{children:[(0,m.jsx)(`p`,{className:S===e.original.invoice?`text-[color:color-mix(in_oklch,var(--aui-surface-strong-foreground)_60%,transparent)]`:`aui-text-muted`,children:`Updated`}),(0,m.jsx)(`p`,{className:`mt-1 font-semibold`,children:e.original.updatedAt})]}),(0,m.jsxs)(`div`,{children:[(0,m.jsx)(`p`,{className:S===e.original.invoice?`text-[color:color-mix(in_oklch,var(--aui-surface-strong-foreground)_60%,transparent)]`:`aui-text-muted`,children:`Items`}),(0,m.jsx)(`p`,{className:`mt-1 font-semibold`,children:e.original.items})]}),(0,m.jsxs)(`div`,{children:[(0,m.jsx)(`p`,{className:S===e.original.invoice?`text-[color:color-mix(in_oklch,var(--aui-surface-strong-foreground)_60%,transparent)]`:`aui-text-muted`,children:`Channel`}),(0,m.jsx)(`p`,{className:`mt-1 font-semibold`,children:e.original.channel})]})]})]},e.id),toolbarProps:n=>({title:`Invoices`,description:`Primary reusable data-table API for finance, ops and admin surfaces.`,search:(0,m.jsxs)(`div`,{className:`flex flex-wrap items-center gap-2`,children:[(0,m.jsx)(r.Badge,{variant:`outline`,children:M===`all`?`All`:M===`finance`?`Finance`:`At risk`}),e.search||M!==`all`?(0,m.jsx)(t.Button,{variant:`ghost`,size:`sm`,onClick:()=>{h({search:``}),N(`all`),V(0)},children:`Clear filters`}):null]}),actions:(0,m.jsxs)(`div`,{className:`flex items-center gap-2`,children:[(0,m.jsx)(s.DataTableColumnVisibilityMenu,{table:n}),f.dataTableToolbarActions.map(e=>(0,m.jsx)(t.Button,{variant:e.variant,size:`sm`,onClick:()=>h({notes:`${e.label} prepared for ${H.length} visible rows`}),children:e.label},e.label))]}),selectionActions:(0,m.jsx)(`div`,{className:`flex flex-wrap items-center gap-2`,children:(0,m.jsx)(o.DataTableBulkActions,{rows:n.getSelectedRowModel().rows.map(e=>e.original),actions:[{key:`export`,label:`Export selected`,onSelect:e=>h({notes:`${e.length} rows prepared for export`})},{key:`archive`,label:`Archive selected`,destructive:!0,onSelect:e=>h({notes:`${e.length} rows sent to archive flow`})}],onClearSelection:()=>_({})})})}),pagination:{manual:!0,pageIndex:W,pageSize:R,rowCount:H.length,pageCount:U,pageSizeOptions:[3,5,10],showPageSize:!0,labels:{rowsPerPage:`Rows per page`,pageInfo:(e,t,n)=>`${e+1} / ${t}${n?` • ${n} rows`:``}`,first:`First`,previous:`Previous`,next:`Next`,last:`Last`,page:e=>`Page ${e}`},onPageChange:V,onPageSizeChange:e=>{z(e),V(0)}}})}),(0,m.jsxs)(`div`,{className:`grid gap-4 lg:grid-cols-[1.3fr_0.7fr]`,children:[(0,m.jsxs)(`div`,{className:`rounded-[22px] border border-[color:var(--aui-surface-border)] bg-[color:var(--aui-surface)] p-4`,children:[(0,m.jsxs)(`div`,{className:`flex flex-wrap items-center gap-2`,children:[(0,m.jsx)(r.Badge,{variant:`outline`,children:`Row click focuses detail`}),(0,m.jsx)(r.Badge,{variant:`outline`,children:`Checkbox stays isolated`}),(0,m.jsx)(r.Badge,{variant:`outline`,children:`Action menu stays isolated`}),(0,m.jsx)(r.Badge,{variant:`outline`,children:`Bulk actions use real selection`})]}),(0,m.jsxs)(`div`,{className:`mt-4 grid gap-3 md:grid-cols-3`,children:[(0,m.jsxs)(`div`,{className:`rounded-[18px] border border-[color:var(--aui-surface-border)] bg-[color:var(--aui-page-bg)] px-4 py-3`,children:[(0,m.jsx)(`p`,{className:`aui-text-muted text-xs uppercase tracking-[0.18em]`,children:`Step 1`}),(0,m.jsx)(`p`,{className:`aui-text-strong mt-2 text-sm font-medium`,children:`Click row body`}),(0,m.jsx)(`p`,{className:`aui-text-subtle mt-2 text-sm leading-6`,children:`Focus shifts to the invoice summary card below without opening unrelated controls.`})]}),(0,m.jsxs)(`div`,{className:`rounded-[18px] border border-[color:var(--aui-surface-border)] bg-[color:var(--aui-page-bg)] px-4 py-3`,children:[(0,m.jsx)(`p`,{className:`aui-text-muted text-xs uppercase tracking-[0.18em]`,children:`Step 2`}),(0,m.jsx)(`p`,{className:`aui-text-strong mt-2 text-sm font-medium`,children:`Use select checkbox`}),(0,m.jsx)(`p`,{className:`aui-text-subtle mt-2 text-sm leading-6`,children:`Selection updates bulk actions only. It does not trigger row focus or open detail.`})]}),(0,m.jsxs)(`div`,{className:`rounded-[18px] border border-[color:var(--aui-surface-border)] bg-[color:var(--aui-page-bg)] px-4 py-3`,children:[(0,m.jsx)(`p`,{className:`aui-text-muted text-xs uppercase tracking-[0.18em]`,children:`Step 3`}),(0,m.jsx)(`p`,{className:`aui-text-strong mt-2 text-sm font-medium`,children:`Open row actions`}),(0,m.jsx)(`p`,{className:`aui-text-subtle mt-2 text-sm leading-6`,children:`Action menu dispatches row-specific commands and keeps parent row click untouched.`})]})]})]}),(0,m.jsxs)(`div`,{className:`rounded-[22px] border border-[color:var(--aui-surface-border)] bg-[color:var(--aui-surface)] p-4`,children:[(0,m.jsx)(`p`,{className:`aui-text-muted text-sm`,children:`Interaction proof`}),(0,m.jsxs)(`div`,{className:`mt-3 space-y-3`,children:[(0,m.jsxs)(`div`,{className:`rounded-[18px] border border-[color:var(--aui-surface-border)] bg-[color:var(--aui-page-bg)] px-4 py-3`,children:[(0,m.jsx)(`p`,{className:`aui-text-strong text-sm font-medium`,children:q?.invoice??`No active invoice`}),(0,m.jsx)(`p`,{className:`aui-text-subtle mt-1 text-sm`,children:`Active focus row`})]}),(0,m.jsxs)(`div`,{className:`rounded-[18px] border border-[color:var(--aui-surface-border)] bg-[color:var(--aui-page-bg)] px-4 py-3`,children:[(0,m.jsxs)(`p`,{className:`aui-text-strong text-sm font-medium`,children:[K.length,` selected`]}),(0,m.jsx)(`p`,{className:`aui-text-subtle mt-1 text-sm`,children:`Selection state stays independent from row detail state.`})]}),(0,m.jsxs)(`div`,{className:`rounded-[18px] border border-[color:var(--aui-surface-border)] bg-[color:var(--aui-page-bg)] px-4 py-3`,children:[(0,m.jsx)(`p`,{className:`aui-text-strong text-sm font-medium`,children:w?`Detail sheet open`:`Detail sheet closed`}),(0,m.jsx)(`p`,{className:`aui-text-subtle mt-1 text-sm`,children:`Double click and menu actions can open the same reusable detail surface.`})]})]})]})]}),(0,m.jsxs)(`div`,{className:`grid gap-4 md:grid-cols-4`,children:[(0,m.jsxs)(`div`,{className:`rounded-[22px] border border-[color:var(--aui-surface-border)] bg-[color:var(--aui-surface)] p-4`,children:[(0,m.jsx)(`p`,{className:`aui-text-muted text-sm`,children:`Focused row`}),(0,m.jsx)(`p`,{className:`aui-text-strong mt-2 text-lg font-semibold`,children:q?.invoice??`No row`}),(0,m.jsx)(`p`,{className:`aui-text-subtle mt-2 text-sm`,children:q?`${q.customer} • ${q.owner} • ${q.channel}`:`Select a row to inspect actions.`})]}),(0,m.jsxs)(`div`,{className:`rounded-[22px] border border-[color:var(--aui-surface-border)] bg-[color:var(--aui-surface)] p-4`,children:[(0,m.jsx)(`p`,{className:`aui-text-muted text-sm`,children:`Selection`}),(0,m.jsxs)(`p`,{className:`aui-text-strong mt-2 text-lg font-semibold`,children:[K.length,` rows active`]}),(0,m.jsx)(`p`,{className:`aui-text-subtle mt-2 text-sm`,children:`Bulk export and archive stay attached to the real selected rows.`})]}),(0,m.jsxs)(`div`,{className:`rounded-[22px] border border-[color:var(--aui-surface-border)] bg-[color:var(--aui-surface)] p-4`,children:[(0,m.jsx)(`p`,{className:`aui-text-muted text-sm`,children:`Finance signal`}),(0,m.jsxs)(`p`,{className:`aui-text-strong mt-2 text-lg font-semibold`,children:[`$`,J.toLocaleString()]}),(0,m.jsx)(`p`,{className:`aui-text-subtle mt-2 text-sm`,children:`Paid invoices total in the current filtered view.`})]}),(0,m.jsxs)(`div`,{className:`rounded-[22px] border border-[color:var(--aui-surface-border)] bg-[color:var(--aui-surface)] p-4`,children:[(0,m.jsx)(`p`,{className:`aui-text-muted text-sm`,children:`Data mode`}),(0,m.jsx)(`p`,{className:`aui-text-strong mt-2 text-lg font-semibold`,children:I===`server`?`Manual server`:`Client only`}),(0,m.jsx)(`p`,{className:`aui-text-subtle mt-2 text-sm`,children:I===`server`?`Query changes pass through simulated fetch state.`:`Filters resolve immediately in memory.`})]})]}),(0,m.jsx)(i.SheetShell,{open:w,onOpenChange:T,side:`right`,title:q?`${q.invoice} detail`:`Invoice detail`,description:`Row click, double click and action menu all converge into one reusable detail surface.`,contentClassName:`sm:max-w-xl`,bodyClassName:`space-y-6`,footer:(0,m.jsxs)(m.Fragment,{children:[(0,m.jsx)(t.Button,{variant:`outline`,onClick:()=>T(!1),children:`Close`}),(0,m.jsx)(t.Button,{onClick:()=>h({notes:`${q?.invoice??`Invoice`} sent to finance review`}),children:`Send to review`})]}),children:q?(0,m.jsxs)(m.Fragment,{children:[(0,m.jsxs)(`div`,{className:`grid gap-4 sm:grid-cols-2`,children:[(0,m.jsxs)(`div`,{className:`rounded-[20px] border border-[color:var(--aui-surface-border)] bg-[color:var(--aui-surface)] p-4`,children:[(0,m.jsx)(`p`,{className:`aui-text-muted text-sm`,children:`Customer`}),(0,m.jsx)(`p`,{className:`aui-text-strong mt-2 text-lg font-semibold`,children:q.customer}),(0,m.jsxs)(`p`,{className:`aui-text-subtle mt-1 text-sm`,children:[q.owner,` • `,q.channel]})]}),(0,m.jsxs)(`div`,{className:`rounded-[20px] border border-[color:var(--aui-surface-border)] bg-[color:var(--aui-surface)] p-4`,children:[(0,m.jsx)(`p`,{className:`aui-text-muted text-sm`,children:`Order value`}),(0,m.jsx)(`p`,{className:`aui-text-strong mt-2 text-lg font-semibold`,children:q.amount}),(0,m.jsx)(`p`,{className:`mt-1 text-sm ${q.trend===`up`?`text-emerald-600`:q.trend===`down`?`text-rose-600`:`aui-text-muted`}`,children:q.trend===`up`?`Revenue is climbing`:q.trend===`down`?`Revenue trend needs attention`:`Revenue is stable`})]})]}),(0,m.jsx)(`div`,{className:`grid gap-3`,children:[[`Status`,q.status],[`Items`,String(q.items)],[`Stock`,String(q.stock)],[`Updated`,q.updatedAt]].map(([e,t])=>(0,m.jsxs)(`div`,{className:`flex items-center justify-between rounded-[18px] border border-[color:var(--aui-surface-border)] bg-[color:var(--aui-surface)] px-4 py-3`,children:[(0,m.jsx)(`span`,{className:`aui-text-muted text-sm`,children:e}),(0,m.jsx)(`span`,{className:`aui-text-strong text-sm font-medium`,children:t})]},e))}),(0,m.jsxs)(`div`,{className:`rounded-[20px] border border-[color:var(--aui-surface-border)] bg-[color:var(--aui-surface)] p-4`,children:[(0,m.jsx)(`p`,{className:`aui-text-muted text-sm`,children:`Interaction coverage`}),(0,m.jsxs)(`div`,{className:`mt-3 flex flex-wrap gap-2`,children:[(0,m.jsx)(r.Badge,{variant:`outline`,children:`Row click`}),(0,m.jsx)(r.Badge,{variant:`outline`,children:`Double click`}),(0,m.jsx)(r.Badge,{variant:`outline`,children:`Action menu`}),(0,m.jsx)(r.Badge,{variant:`outline`,children:`Mobile card`})]}),(0,m.jsx)(`p`,{className:`aui-text-subtle mt-3 text-sm leading-6`,children:`This sheet shows a reusable row-detail pattern. The DataTable stays generic while the surrounding flow remains app-owned.`})]})]}):null})]})}exports.DataTableFamilyShowcase=h;

package/dist/showcase/families/data-table/showcase.d.ts

@@ -0,0 +1,3 @@
+import * as React from "react";
+import type { FamilyDemoProps } from "../types";
+export declare function DataTableFamilyShowcase({ state, setState }: FamilyDemoProps): React.JSX.Element;