tembro 1.0.3 → 2.0.1

package/dist/showcase/families/command/showcase.js

@@ -1,40 +0,0 @@
-import { Input as e } from "../../../components/ui/input/index.js";
-import { Badge as t } from "../../../components/ui/badge/index.js";
-import { jsx as n, jsxs as r } from "react/jsx-runtime";
-//#region src/showcase/families/command/showcase.tsx
-var i = [
-	"Open Button docs",
-	"Open Data table route",
-	"Create template",
-	"Copy install command",
-	"Search blocks"
-];
-function a({ state: a, setState: o }) {
-	let s = i.filter((e) => e.toLowerCase().includes(a.search.toLowerCase()));
-	return /* @__PURE__ */ r("div", {
-		className: "rounded-[22px] border border-[color:var(--aui-surface-border)] bg-[color:var(--aui-surface)] p-4",
-		children: [/* @__PURE__ */ r("div", {
-			className: "flex items-center gap-3 rounded-2xl border border-[color:var(--aui-surface-border)] bg-[color:var(--aui-surface-muted)] px-4 py-3",
-			children: [/* @__PURE__ */ n(e, {
-				value: a.search,
-				onChange: (e) => o({ search: e.target.value }),
-				placeholder: "Type a command...",
-				className: "border-0 px-0 shadow-none ring-0 focus-visible:ring-0"
-			}), /* @__PURE__ */ n(t, {
-				variant: "outline",
-				children: "⌘K"
-			})]
-		}), /* @__PURE__ */ n("div", {
-			className: "mt-4 space-y-3",
-			children: s.map((e) => /* @__PURE__ */ r("div", {
-				className: "flex items-center justify-between rounded-2xl border border-[color:var(--aui-surface-border)] bg-[color:var(--aui-surface-muted)] px-4 py-3 text-sm aui-text-strong",
-				children: [/* @__PURE__ */ n("span", { children: e }), /* @__PURE__ */ n(t, {
-					variant: "secondary",
-					children: "Command"
-				})]
-			}, e))
-		})]
-	});
-}
-//#endregion
-export { a as CommandFamilyShowcase };

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

@@ -1,5 +0,0 @@
-import type { DataTableDemoPreset, DataTableDemoRow, DataTableDemoToolbarAction } from "./types";
-export declare const dataTableDemoRows: DataTableDemoRow[];
-export declare function buildDataTableDemoRows(rowCount: number): DataTableDemoRow[];
-export declare const dataTableToolbarActions: DataTableDemoToolbarAction[];
-export declare const dataTableDemoPresets: DataTableDemoPreset[];

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

@@ -1 +0,0 @@
-Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("./data.cjs"),t=require("./showcase.cjs"),n=require("./mock.cjs");exports.DataTableFamilyShowcase=t.DataTableFamilyShowcase,exports.dataTableDemoRows=e.dataTableDemoRows,exports.dataTableFamilyMock=n.dataTableFamilyMock,exports.dataTableToolbarActions=e.dataTableToolbarActions;

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

@@ -1,4 +0,0 @@
-export { DataTableFamilyShowcase } from "./showcase";
-export { dataTableFamilyMock } from "./mock";
-export { dataTableDemoRows, dataTableToolbarActions } from "./data";
-export type { DataTableDemoRow, DataTableDemoToolbarAction } from "./types";

package/dist/showcase/families/data-table/index.js

@@ -1,4 +0,0 @@
-import { dataTableDemoRows as e, dataTableToolbarActions as t } from "./data.js";
-import { DataTableFamilyShowcase as n } from "./showcase.js";
-import { dataTableFamilyMock as r } from "./mock.js";
-export { n as DataTableFamilyShowcase, e as dataTableDemoRows, r as dataTableFamilyMock, t as dataTableToolbarActions };

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

@@ -1,24 +0,0 @@
-Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});var e={code:`import {
-  DataTable,
-  DataTableBulkActions,
-  DataTableColumnVisibilityMenu,
-  DataTableSortableHeader,
-  createDataTableActionsColumn,
-  createDataTableSelectColumn,
-} from "tembro"
-
-export function Example() {
-  return (
-    <DataTable
-      columns={columns}
-      data={rows}
-      enableRowSelection
-      density="comfortable"
-      striped
-      bordered
-      stickyHeader
-      rowActions={(row) => getActions(row.original)}
-      bulkActions={bulkActions}
-    />
-  )
-}`,highlights:[`Toolbar actions`,`Bulk actions`,`Row click`,`Visibility menu`,`Density`,`Preset-driven views`,`Mobile strategy`,`Pagination`],scenarios:[{title:`Finance operations`,description:`Filter, sort and paginate transactional rows with export-ready actions.`},{title:`Mobile fallback`,description:`Collapse rows into cards while preserving click and selection behaviors.`},{title:`Preset views`,description:`Switch between all rows, finance-only and at-risk tables without rebuilding columns.`},{title:`Bulk handling`,description:`Run row group actions with selection state and clear behavior.`}],metrics:[{label:`Exports`,value:`10+`},{label:`Rows`,value:`6 live`},{label:`Status`,value:`Stable`}]};exports.dataTableFamilyMock=e;

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

@@ -1,2 +0,0 @@
-import type { FamilyDemoMock } from "../types";
-export declare const dataTableFamilyMock: FamilyDemoMock;

package/dist/showcase/families/data-table/mock.js

@@ -1,48 +0,0 @@
-//#region src/showcase/families/data-table/mock.ts
-var e = {
-	code: "import {\n  DataTable,\n  DataTableBulkActions,\n  DataTableColumnVisibilityMenu,\n  DataTableSortableHeader,\n  createDataTableActionsColumn,\n  createDataTableSelectColumn,\n} from \"tembro\"\n\nexport function Example() {\n  return (\n    <DataTable\n      columns={columns}\n      data={rows}\n      enableRowSelection\n      density=\"comfortable\"\n      striped\n      bordered\n      stickyHeader\n      rowActions={(row) => getActions(row.original)}\n      bulkActions={bulkActions}\n    />\n  )\n}",
-	highlights: [
-		"Toolbar actions",
-		"Bulk actions",
-		"Row click",
-		"Visibility menu",
-		"Density",
-		"Preset-driven views",
-		"Mobile strategy",
-		"Pagination"
-	],
-	scenarios: [
-		{
-			title: "Finance operations",
-			description: "Filter, sort and paginate transactional rows with export-ready actions."
-		},
-		{
-			title: "Mobile fallback",
-			description: "Collapse rows into cards while preserving click and selection behaviors."
-		},
-		{
-			title: "Preset views",
-			description: "Switch between all rows, finance-only and at-risk tables without rebuilding columns."
-		},
-		{
-			title: "Bulk handling",
-			description: "Run row group actions with selection state and clear behavior."
-		}
-	],
-	metrics: [
-		{
-			label: "Exports",
-			value: "10+"
-		},
-		{
-			label: "Rows",
-			value: "6 live"
-		},
-		{
-			label: "Status",
-			value: "Stable"
-		}
-	]
-};
-//#endregion
-export { e as dataTableFamilyMock };

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

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

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