tembro 1.0.3 → 2.0.1

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

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