@lerianstudio/sindarian-ui 2.0.0-beta.25 → 2.0.0-beta.27

package/dist/esm/enterprise/data-table/column-size.js

@@ -1,97 +1 @@
-/**
- * The column sizing a ColumnDef actually DECLARED, or `undefined` when it
- * declared none. This is VirtualizedTable's reading: flex rows honour all
- * three, so `size`, `minSize` and `maxSize` all PIN. DataTable's `<th>`/`<td>`
- * path reads the same declaration through {@link readPreferredColumnSize},
- * which drops the ceiling CSS auto table layout cannot enforce.
- *
- * Reading the raw `columnDef` is only honest because both tables pass
- * `defaultColumn: { size: undefined, minSize: undefined, maxSize: undefined }`
- * to `useReactTable`. TanStack builds every columnDef as
- * `{ ...featureDefaults, ...table.options.defaultColumn, ...userDef }`, so
- * those three overrides blank out the `defaultColumnSizing` the ColumnSizing
- * feature would otherwise stamp on every column (150 / 20 / MAX_SAFE_INTEGER).
- * Without them a column asking for nothing reports `size: 150` and a column
- * asking for exactly 150 is indistinguishable from it. `column.getSize()` is
- * unaffected: it falls back to `defaultColumnSizing` with `??`, so column
- * offsets and the table's total size are byte-identical either way.
- *
- * Width comes from `getSize()` rather than the raw `size` so it lands already
- * clamped by the column's own min/max.
- */
-export function readDeclaredColumnSize(column) {
-    const { size, minSize, maxSize } = column.columnDef;
-    const width = size === undefined ? undefined : column.getSize();
-    if (width === undefined && minSize === undefined && maxSize === undefined) {
-        return undefined;
-    }
-    return { width, minWidth: minSize, maxWidth: maxSize };
-}
-/**
- * A GROUP header cell is exactly as wide as the leaf columns it spans, so it
- * can only be pinned when every one of them is: a group whose leaves are
- * partly sized has no honest fixed width, and keeps its colSpan flex share so
- * the header rule still tracks the cells beneath it. Reading the group's own
- * ColumnDef instead would size the header against a declaration its body cells
- * never see.
- *
- * Every dimension the leaves agree on carries up, CEILING INCLUDED. This is
- * VirtualizedTable's path, where flex rows honour `maxSize` on a leaf — so a
- * group of capped leaves whose header carried no `maxWidth` was free to grow
- * past every column it names, which is the same header-vs-cells drift the
- * width sum exists to prevent. Each dimension is decided on its own: a group
- * can be uncapped and still have a floor.
- */
-export function readDeclaredGroupSize(leaves) {
-    if (leaves.length === 0)
-        return undefined;
-    const sizes = leaves.map(readDeclaredColumnSize);
-    const width = sum(sizes, 'width');
-    const minWidth = sum(sizes, 'minWidth');
-    const maxWidth = sum(sizes, 'maxWidth');
-    if (width === undefined && minWidth === undefined && maxWidth === undefined) {
-        return undefined;
-    }
-    return { width, minWidth, maxWidth };
-}
-/**
- * The total of one dimension, or `undefined` unless EVERY leaf declared it. One
- * leaf short and the group has no honest total: an unsized leaf flexes, an
- * unfloored one can shrink, and an uncapped one grows without limit.
- */
-function sum(sizes, key) {
-    let total = 0;
-    for (const size of sizes) {
-        const value = size?.[key];
-        if (value === undefined)
-            return undefined;
-        total += value;
-    }
-    return total;
-}
-/**
- * The same declaration as {@link readDeclaredColumnSize}, minus `maxWidth`.
- *
- * DataTable renders real `<th>`/`<td>` under CSS AUTO table layout, where
- * Chrome and Firefox ignore `max-width` on a cell. Emitting it would advertise
- * a ceiling that never holds, so this path keeps only what the layout obeys:
- * `size` as a PREFERRED width and `minSize` as a floor. A column that must not
- * grow past a width belongs in VirtualizedTable.
- */
-export function readPreferredColumnSize(column) {
-    const { width, minWidth } = readDeclaredColumnSize(column) ?? {};
-    if (width === undefined && minWidth === undefined) {
-        return undefined;
-    }
-    return { width, minWidth };
-}
-/**
- * Blanks out the `defaultColumnSizing` TanStack stamps onto every ColumnDef, so
- * `columnDef.size` / `minSize` / `maxSize` mean "the consumer asked for this"
- * and nothing else. Both tables pass it to `useReactTable`.
- */
-export const UNSIZED_DEFAULT_COLUMN = {
-    size: undefined,
-    minSize: undefined,
-    maxSize: undefined
-};
+export function readDeclaredColumnSize(i){const{size:n,minSize:e,maxSize:t}=i.columnDef;const d=n===void 0?void 0:i.getSize();if(d===void 0&&e===void 0&&t===void 0){return void 0}return{width:d,minWidth:e,maxWidth:t}}export function readDeclaredGroupSize(i){if(i.length===0)return void 0;const n=i.map(readDeclaredColumnSize);const e=u(n,"width");const t=u(n,"minWidth");const d=u(n,"maxWidth");if(e===void 0&&t===void 0&&d===void 0){return void 0}return{width:e,minWidth:t,maxWidth:d}}function u(i,n){let e=0;for(const t of i){const d=t?.[n];if(d===void 0)return void 0;e+=d}return e}export function readPreferredColumnSize(i){const{width:n,minWidth:e}=readDeclaredColumnSize(i)??{};if(n===void 0&&e===void 0){return void 0}return{width:n,minWidth:e}}export const UNSIZED_DEFAULT_COLUMN={size:void 0,minSize:void 0,maxSize:void 0};

package/dist/esm/enterprise/data-table/index.js

@@ -1,342 +1 @@
-'use client';
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-/**
- * DataTable — a typed, generic wrapper over TanStack Table v8.
- *
- * Pairs with CursorPager (server-driven pagination): pass the page's `items`
- * as `data`; this component does no client-side paging or sorting by default.
- * It owns the three render states the list screens need:
- *   - loading  → header + skeleton rows
- *   - empty    → EmptyState (data resolved, zero rows)
- *   - data     → semantic table rows; cells own any links/actions
- *
- * Column heads speak the kit's LABEL_VOICE_CLASS; `headClassName` overrides it
- * per table. An optional `footer` node renders in a `tfoot` for footed totals.
- *
- * Columns are standard TanStack `ColumnDef<T>`; cells receive the row's
- * `original` value, so screens compose money / date / status cells directly in
- * their column `cell` renderers.
- *
- * Declared column sizing (see `./column-size`) does NOT mean the same thing in
- * the kit's two table paths, because their layouts differ:
- *   - DataTable renders real `<th>`/`<td>` under CSS AUTO table layout (the
- *     `Table` primitive sets no `table-fixed`). There, `size` is a PREFERRED
- *     width the browser may exceed to fit content, `minSize` acts as a floor,
- *     and `maxSize` is ignored outright — Chrome and Firefox do not apply
- *     `max-width` to table cells. A column declaring none keeps auto width.
- *   - VirtualizedTable renders flex rows, where all three PIN: `size`,
- *     `minSize` and `maxSize` are honoured exactly as declared.
- * So a column that must not grow past a width belongs in VirtualizedTable, or
- * in a cell renderer that truncates its own content.
- *
- * Row selection is opt-in and controlled: pass `enableRowSelection` plus
- * `rowSelection` / `onRowSelectionChange` (TanStack-native types). When
- * enabled, a checkbox column is prepended — header checkbox selects the
- * page (indeterminate for partial), checkbox-cell clicks never bubble to
- * row-level handlers. With the flag off (the default), nothing changes.
- *
- * Sorting is opt-in and controlled too: pass `enableSorting` plus `sorting` /
- * `onSortingChange`. Rows are never reordered client-side (`manualSorting`, no
- * sorted row model); what the flag buys is `aria-sort` on each sortable `th`.
- * With the flag off (the default), no header carries the attribute.
- *
- * Keyboard navigation is opt-in via `onRowActivate`: when present, rows get
- * a roving tabindex (Tab enters the table once at the anchor row; the next
- * Tab moves to the row's first tabbable child if it has one, otherwise out
- * of the table — no trap), ArrowUp/Down move row focus clamped to the page,
- * Home/End jump to the page edges, Enter activates the row through the
- * callback, and Space toggles selection when `enableRowSelection` is on.
- * Cmd/Ctrl+Enter opens the row's destination in a new tab when the optional
- * `rowHref` builder is provided (window.open with noopener,noreferrer);
- * without it, modified Enter stays a deliberate no-op — never a same-tab
- * activation. Keydown events originating from interactive children (links,
- * buttons, checkboxes, form fields) are never hijacked.
- */
-import { Fragment, useEffect, useMemo, useRef, useState } from 'react';
-import { flexRender, getCoreRowModel, useReactTable } from '@tanstack/react-table';
-import { Table, TableBody, TableCell, TableFooter, TableHead, TableHeader, TableRow } from '../../components/ui/table/index.js';
-import { Skeleton } from '../../components/ui/skeleton/index.js';
-import { LABEL_VOICE_CLASS } from '../../lib/typography.js';
-import { cn } from '../../lib/utils.js';
-import { EmptyState } from '../empty-state/index.js';
-import { readPreferredColumnSize, UNSIZED_DEFAULT_COLUMN } from './column-size.js';
-const SELECTION_COLUMN_ID = '__select__';
-const CHECKBOX_CLASS = 'accent-primary block size-4';
-/** Figure treatment for `meta: { numeric: true }` columns; the alignment half
- * lives in ALIGN_CELL_CLASS so `meta.align` can override one without the other. */
-const NUMERIC_FIGURE_CLASS = 'font-mono tabular-nums';
-/**
- * Body-cell alignment, one class per direction rather than a single string with
- * `text-right` baked in: an explicit `meta.align` has to beat `numeric` by
- * choosing the class, not by out-ordering it — tailwind-merge resolving two
- * conflicting alignment utilities by source order is not a contract worth
- * relying on.
- */
-const ALIGN_CELL_CLASS = {
-    left: 'text-left',
-    center: 'text-center',
-    right: 'text-right'
-};
-/**
- * Keydown events whose target sits inside one of these are never hijacked
- * by the row-level keyboard handler — Space in a checkbox and Enter on an
- * in-cell link keep their native behavior.
- */
-const INTERACTIVE_CHILD_SELECTOR = 'a, button, input, select, textarea, [role="checkbox"]';
-/**
- * Inset focus outline for keyboard-navigable rows. Outline, not Tailwind
- * ring: ring is box-shadow, which renders unreliably on display: table-row.
- * `focus-visible`-gated, so mouse users (and visual baselines) see nothing.
- */
-const ROW_FOCUS_CLASS = 'focus-visible:outline focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-ring';
-function stopPropagation(event) {
-    event.stopPropagation();
-}
-/**
- * ARIA sort state for one header cell. `undefined` (attribute omitted) on a
- * column that cannot sort, which covers both sorting-off tables and columns
- * that opted out, so the attribute never claims a control the user does not
- * have.
- */
-function ariaSortFor(column) {
-    if (!column.getCanSort())
-        return undefined;
-    const sorted = column.getIsSorted();
-    if (sorted === 'asc')
-        return 'ascending';
-    if (sorted === 'desc')
-        return 'descending';
-    return 'none';
-}
-function SelectAllCheckbox({ table }) {
-    const allSelected = table.getIsAllPageRowsSelected();
-    const someSelected = table.getIsSomePageRowsSelected();
-    return (_jsx("input", { type: "checkbox", className: CHECKBOX_CLASS, "aria-label": "Select all rows on this page", checked: allSelected, ref: (el) => {
-            if (el)
-                el.indeterminate = !allSelected && someSelected;
-        }, onChange: table.getToggleAllPageRowsSelectedHandler() }));
-}
-function RowSelectionCheckbox({ row, getLabel }) {
-    return (_jsx("input", { type: "checkbox", className: CHECKBOX_CLASS, "aria-label": getLabel ? getLabel(row.original) : `Select row ${row.id}`, checked: row.getIsSelected(), disabled: !row.getCanSelect(), onChange: row.getToggleSelectedHandler() }));
-}
-function createSelectionColumn(getLabel) {
-    return {
-        id: SELECTION_COLUMN_ID,
-        header: ({ table }) => _jsx(SelectAllCheckbox, { table: table }),
-        cell: ({ row }) => _jsx(RowSelectionCheckbox, { row: row, getLabel: getLabel })
-    };
-}
-export function DataTable({ columns, data, loading = false, skeletonRows = 8, loadingLabel = 'Loading table rows', empty, getRowId, flush = false, density = 'comfortable', enableRowSelection = false, rowSelection, onRowSelectionChange, getRowSelectionLabel, enableSorting = false, sorting, onSortingChange, columnVisibility, onColumnVisibilityChange, onRowActivate, rowHref, className, headClassName, footer }) {
-    const tableColumns = useMemo(() => enableRowSelection
-        ? [createSelectionColumn(getRowSelectionLabel), ...columns]
-        : columns, [columns, enableRowSelection, getRowSelectionLabel]);
-    const table = useReactTable({
-        data,
-        columns: tableColumns,
-        // Keeps `columnDef.size`/`minSize`/`maxSize` meaning "declared" — see
-        // ./column-size. `getSize()` is unaffected; it falls back to the library
-        // defaults itself.
-        defaultColumn: UNSIZED_DEFAULT_COLUMN,
-        getCoreRowModel: getCoreRowModel(),
-        getRowId,
-        enableRowSelection,
-        // Controlled-only, exactly as sindarian-x shipped it: this component holds
-        // no selection state. The `?? {}` is the JS-consumer safety net; the prop
-        // types make the TS path require the controlled pair whenever selection is
-        // enabled, so the dead-checkbox configuration is now unrepresentable.
-        onRowSelectionChange: enableRowSelection ? onRowSelectionChange : undefined,
-        // Controlled-only as well, and deliberately without `getSortedRowModel`:
-        // `manualSorting` tells TanStack the rows arrive in the order the consumer
-        // already chose, so enabling sorting changes what the header ANNOUNCES,
-        // never what the body shows.
-        manualSorting: true,
-        enableSorting,
-        onSortingChange: enableSorting ? onSortingChange : undefined,
-        // ⛔ EACH VISIBILITY ENTRY IS GUARDED ON ITS OWN PROP, NEVER ON THE OTHER.
-        //
-        // TanStack merges options as `{...defaultOptions, ...options}` and state as
-        // `{...internalState, ...options.state}`, both plain spreads — so a key
-        // present and holding `undefined` OVERWRITES what it was meant to leave
-        // alone. `onColumnVisibilityChange: undefined` replaces the feature's own
-        // `makeStateUpdater`, and `setColumnVisibility` reads
-        // `options.onColumnVisibilityChange == null ? void 0 : ...`, so it (and
-        // every `column.toggleVisibility` behind it) becomes a silent no-op.
-        // `columnVisibility: undefined` replaces the table's initial `{}`, so a
-        // consumer reading the slice gets `undefined` instead of an empty object.
-        //
-        // Guarding the UPDATER on the STATE put that `undefined` back for the
-        // union's first arm — state with no updater, which is the shipped console
-        // usage, where a separate dropdown owns the state. A table that passes
-        // neither prop is uncontrolled, exactly as before.
-        ...(onColumnVisibilityChange !== undefined && { onColumnVisibilityChange }),
-        state: {
-            rowSelection: enableRowSelection ? (rowSelection ?? {}) : undefined,
-            sorting: enableSorting ? (sorting ?? []) : undefined,
-            ...(columnVisibility !== undefined && { columnVisibility })
-        }
-    });
-    // Visible, not declared: the skeleton grid and the empty row's colSpan have
-    // to match the header the table actually rendered, and a hidden column is in
-    // `tableColumns` but in no `<th>`.
-    const colCount = table.getVisibleLeafColumns().length;
-    const dataRows = table.getRowModel().rows;
-    const rowCount = dataRows.length;
-    // Compact density overrides only THIS table's cell padding (tailwind-merge
-    // lets the later utility win over TableHead/TableCell's defaults).
-    // Comfortable passes nothing, so the default render is unchanged.
-    const compact = density === 'compact';
-    const headDensityClass = compact ? 'h-8 px-2' : undefined;
-    const cellDensityClass = compact ? 'px-2 py-1.5' : undefined;
-    // --- Roving row focus (active only when onRowActivate is provided) ---
-    const keyboardNav = onRowActivate !== undefined;
-    const [focusedIndex, setFocusedIndex] = useState(0);
-    // ponytail: rowRefs is keyed by render index, while rows are id-keyed
-    // (`key={row.id}`). This holds only because DataTable is server-driven with
-    // no in-place client reorder, and React 19's per-render ref cleanup defuses
-    // stale entries. If client-side reorder is ever added, re-key this Map by
-    // row.id to keep focus targets aligned with their rows.
-    const rowRefs = useRef(new Map());
-    const focusWithinRef = useRef(false);
-    const containerRef = useRef(null);
-    // Render-time clamp: exactly one anchor row (tabIndex=0) even on the
-    // frame where data shrank but state has not caught up yet.
-    const anchorIndex = rowCount > 0 ? Math.min(focusedIndex, rowCount - 1) : 0;
-    // Data changes clamp the anchor but never steal focus: DOM focus moves
-    // only if focus was already inside the table and the focused row vanished
-    // (e.g. page flip removed it). Never autofocus on mount.
-    useEffect(() => {
-        if (!keyboardNav)
-            return;
-        // Clamp the focus target ONCE and drive both the state setter and the
-        // .focus() call from the same value — reading `focusedIndex` separately
-        // after the functional update would use the stale pre-clamp closure value
-        // and try to focus an unmounted row, dropping focus to <body>.
-        const max = Math.max(rowCount - 1, 0);
-        const target = Math.min(focusedIndex, max);
-        setFocusedIndex(target);
-        if (!focusWithinRef.current)
-            return;
-        const active = document.activeElement;
-        if (active && containerRef.current?.contains(active))
-            return;
-        // The target row may have unmounted on a data-shrink frame; walk down to
-        // the nearest existing lower index, falling back to the container, so
-        // focus never escapes the table.
-        for (let i = target; i >= 0; i--) {
-            const rowEl = rowRefs.current.get(i);
-            if (rowEl) {
-                rowEl.focus();
-                return;
-            }
-        }
-        containerRef.current?.focus();
-    }, [keyboardNav, rowCount, focusedIndex, data]);
-    const focusRow = (index) => {
-        rowRefs.current.get(index)?.focus();
-    };
-    const handleRowBlur = (event) => {
-        const next = event.relatedTarget;
-        if (!next || !containerRef.current?.contains(next)) {
-            focusWithinRef.current = false;
-        }
-    };
-    const handleRowKeyDown = (event, row, rowIndex) => {
-        const target = event.target;
-        if (target !== event.currentTarget &&
-            target.closest(INTERACTIVE_CHILD_SELECTOR) !== null) {
-            return;
-        }
-        switch (event.key) {
-            case 'ArrowDown':
-                event.preventDefault();
-                focusRow(Math.min(rowIndex + 1, rowCount - 1));
-                break;
-            case 'ArrowUp':
-                event.preventDefault();
-                focusRow(Math.max(rowIndex - 1, 0));
-                break;
-            case 'Home':
-                event.preventDefault();
-                focusRow(0);
-                break;
-            case 'End':
-                event.preventDefault();
-                focusRow(rowCount - 1);
-                break;
-            case 'Enter':
-                // Modified Enter (Cmd/Ctrl) means "open elsewhere" — a same-tab
-                // activation would destroy the user's context. With rowHref it
-                // opens the row's destination in a new tab; without it (sheet-based
-                // tables), it stays a deliberate no-op.
-                if (event.metaKey || event.ctrlKey) {
-                    if (rowHref) {
-                        window.open(rowHref(row.original), '_blank', 'noopener,noreferrer');
-                    }
-                    break;
-                }
-                onRowActivate?.(row.original);
-                break;
-            case ' ':
-                if (enableRowSelection && row.getCanSelect()) {
-                    event.preventDefault();
-                    row.getToggleSelectedHandler()(event);
-                }
-                break;
-            default:
-                break;
-        }
-    };
-    return (_jsxs("div", { ref: containerRef, 
-        // tabIndex={-1} (keyboard-nav only) makes the container programmatically
-        // focusable so the focus-restoration fallback can land here when every
-        // row has unmounted, keeping focus inside the table rather than on <body>.
-        tabIndex: keyboardNav ? -1 : undefined, className: cn(!flush &&
-            'border-border bg-card text-card-foreground rounded-lg border', className), children: [_jsx("span", { className: "sr-only", role: "status", children: loading
-                    ? loadingLabel
-                    : rowCount === 0
-                        ? 'No rows'
-                        : `${rowCount} rows` }), _jsxs(Table, { "aria-busy": loading ? 'true' : undefined, children: [_jsx(TableHeader, { children: table.getHeaderGroups().map((headerGroup) => (_jsx(TableRow, { className: "hover:bg-transparent", children: headerGroup.headers.map((header) => {
-                                const meta = header.column.columnDef.meta;
-                                return (_jsx(TableHead, { align: meta?.align ?? (meta?.numeric ? 'right' : undefined), "aria-sort": header.isPlaceholder
-                                        ? undefined
-                                        : ariaSortFor(header.column), 
-                                    // Only a column that DECLARED sizing gets an inline width;
-                                    // everything else keeps the auto table layout it has today.
-                                    style: readPreferredColumnSize(header.column), className: cn(LABEL_VOICE_CLASS, headDensityClass, header.column.id === SELECTION_COLUMN_ID && 'w-10', headClassName, meta?.headerClassName), children: header.isPlaceholder
-                                        ? null
-                                        : flexRender(header.column.columnDef.header, header.getContext()) }, header.id));
-                            }) }, headerGroup.id))) }), _jsx(TableBody, { children: loading ? (Array.from({ length: skeletonRows }).map((_, rowIndex) => (_jsx(TableRow, { className: "hover:bg-transparent", children: Array.from({ length: colCount }).map((__, cellIndex) => (_jsx(TableCell, { className: cellDensityClass, children: _jsx(Skeleton, { className: "h-4 w-full max-w-[160px]" }) }, `skeleton-${rowIndex}-${cellIndex}`))) }, `skeleton-${rowIndex}`)))) : rowCount === 0 ? (_jsx(TableRow, { className: "hover:bg-transparent", children: _jsx(TableCell, { colSpan: colCount, className: "p-0", children: _jsx(EmptyState, { title: empty?.title ?? 'Nothing here yet', titleAs: empty?.titleAs, description: empty?.description, icon: empty?.icon, action: empty?.action, 
-                                    // The DataTable renders the ledger register grammar, so its
-                                    // empty surface reads as a ruled page rather than a centered
-                                    // void. Callers can still override via `empty.ruled = false`.
-                                    ruled: empty?.ruled ?? true }) }) })) : (dataRows.map((row, rowIndex) => (_jsx(TableRow, { ref: keyboardNav
-                                ? (el) => {
-                                    if (el)
-                                        rowRefs.current.set(rowIndex, el);
-                                    else
-                                        rowRefs.current.delete(rowIndex);
-                                }
-                                : undefined, tabIndex: keyboardNav ? (rowIndex === anchorIndex ? 0 : -1) : undefined, onFocus: keyboardNav
-                                ? () => {
-                                    focusWithinRef.current = true;
-                                    setFocusedIndex(rowIndex);
-                                }
-                                : undefined, onBlur: keyboardNav ? handleRowBlur : undefined, onKeyDown: keyboardNav
-                                ? (event) => handleRowKeyDown(event, row, rowIndex)
-                                : undefined, className: keyboardNav ? ROW_FOCUS_CLASS : undefined, "data-state": enableRowSelection && row.getIsSelected()
-                                ? 'selected'
-                                : undefined, children: row.getVisibleCells().map((cell) => {
-                                const meta = cell.column.columnDef.meta;
-                                const content = flexRender(cell.column.columnDef.cell, cell.getContext());
-                                // The column owns its `<td>`: render the consumer's cell bare.
-                                // The kit's selection column is built here and carries no
-                                // meta, so it can never take this path.
-                                if (meta?.renderOwnCell) {
-                                    return _jsx(Fragment, { children: content }, cell.id);
-                                }
-                                const align = meta?.align ?? (meta?.numeric ? 'right' : undefined);
-                                return (_jsx(TableCell, { style: readPreferredColumnSize(cell.column), className: cn(meta?.numeric && NUMERIC_FIGURE_CLASS, align && ALIGN_CELL_CLASS[align], cellDensityClass, cell.column.id === SELECTION_COLUMN_ID && 'w-10', meta?.className), onClick: cell.column.id === SELECTION_COLUMN_ID
-                                        ? stopPropagation
-                                        : undefined, children: content }, cell.id));
-                            }) }, row.id)))) }), footer ? _jsx(TableFooter, { children: footer }) : null] })] }));
-}
+"use client";import{jsx as o,jsxs as U}from"react/jsx-runtime";import{Fragment as re,useEffect as oe,useMemo as ae,useRef as k,useState as se}from"react";import{flexRender as v,getCoreRowModel as ce,useReactTable as le}from"@tanstack/react-table";import{Table as ie,TableBody as ue,TableCell as E,TableFooter as de,TableHead as fe,TableHeader as me,TableRow as C}from"../../components/ui/table/index.js";import{Skeleton as ge}from"../../components/ui/skeleton/index.js";import{LABEL_VOICE_CLASS as he}from"../../lib/typography.js";import{cn as D}from"../../lib/utils.js";import{EmptyState as pe}from"../empty-state/index.js";import{readPreferredColumnSize as B,UNSIZED_DEFAULT_COLUMN as Ce}from"./column-size.js";const b="__select__";const K="accent-primary block size-4";const be="font-mono tabular-nums";const Se={left:"text-left",center:"text-center",right:"text-right"};const xe='a, button, input, select, textarea, [role="checkbox"]';const Ne="focus-visible:outline focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-ring";function _e(r){r.stopPropagation()}function ke(r){if(!r.getCanSort())return void 0;const a=r.getIsSorted();if(a==="asc")return"ascending";if(a==="desc")return"descending";return"none"}function Ee({table:r}){const a=r.getIsAllPageRowsSelected();const d=r.getIsSomePageRowsSelected();return o("input",{type:"checkbox",className:K,"aria-label":"Select all rows on this page",checked:a,ref:m=>{if(m)m.indeterminate=!a&&d},onChange:r.getToggleAllPageRowsSelectedHandler()})}function De({row:r,getLabel:a}){return o("input",{type:"checkbox",className:K,"aria-label":a?a(r.original):`Select row ${r.id}`,checked:r.getIsSelected(),disabled:!r.getCanSelect(),onChange:r.getToggleSelectedHandler()})}function Te(r){return{id:b,header:({table:a})=>o(Ee,{table:a}),cell:({row:a})=>o(De,{row:a,getLabel:r})}}export function DataTable({columns:r,data:a,loading:d=false,skeletonRows:m=8,loadingLabel:$="Loading table rows",empty:u,getRowId:j,flush:z=false,density:G="comfortable",enableRowSelection:i=false,rowSelection:V,onRowSelectionChange:W,getRowSelectionLabel:T,enableSorting:S=false,sorting:X,onSortingChange:Z,columnVisibility:A,onColumnVisibilityChange:L,onRowActivate:R,rowHref:y,className:q,headClassName:J,footer:I}){const Q=ae(()=>i?[Te(T),...r]:r,[r,i,T]);const x=le({data:a,columns:Q,defaultColumn:Ce,getCoreRowModel:ce(),getRowId:j,enableRowSelection:i,onRowSelectionChange:i?W:void 0,manualSorting:true,enableSorting:S,onSortingChange:S?Z:void 0,...L!==void 0&&{onColumnVisibilityChange:L},state:{rowSelection:i?V??{}:void 0,sorting:S?X??[]:void 0,...A!==void 0&&{columnVisibility:A}}});const w=x.getVisibleLeafColumns().length;const M=x.getRowModel().rows;const c=M.length;const O=G==="compact";const Y=O?"h-8 px-2":void 0;const F=O?"px-2 py-1.5":void 0;const l=R!==void 0;const[N,H]=se(0);const g=k(new Map);const _=k(false);const h=k(null);const ee=c>0?Math.min(N,c-1):0;oe(()=>{if(!l)return;const n=Math.max(c-1,0);const e=Math.min(N,n);H(e);if(!_.current)return;const t=document.activeElement;if(t&&h.current?.contains(t))return;for(let s=e;s>=0;s--){const f=g.current.get(s);if(f){f.focus();return}}h.current?.focus()},[l,c,N,a]);const p=n=>{g.current.get(n)?.focus()};const ne=n=>{const e=n.relatedTarget;if(!e||!h.current?.contains(e)){_.current=false}};const te=(n,e,t)=>{const s=n.target;if(s!==n.currentTarget&&s.closest(xe)!==null){return}switch(n.key){case"ArrowDown":n.preventDefault();p(Math.min(t+1,c-1));break;case"ArrowUp":n.preventDefault();p(Math.max(t-1,0));break;case"Home":n.preventDefault();p(0);break;case"End":n.preventDefault();p(c-1);break;case"Enter":if(n.metaKey||n.ctrlKey){if(y){window.open(y(e.original),"_blank","noopener,noreferrer")}break}R?.(e.original);break;case" ":if(i&&e.getCanSelect()){n.preventDefault();e.getToggleSelectedHandler()(n)}break;default:break}};return U("div",{ref:h,tabIndex:l?-1:void 0,className:D(!z&&"border-border bg-card text-card-foreground rounded-lg border",q),children:[o("span",{className:"sr-only",role:"status",children:d?$:c===0?"No rows":`${c} rows`}),U(ie,{"aria-busy":d?"true":void 0,children:[o(me,{children:x.getHeaderGroups().map(n=>o(C,{className:"hover:bg-transparent",children:n.headers.map(e=>{const t=e.column.columnDef.meta;return o(fe,{align:t?.align??(t?.numeric?"right":void 0),"aria-sort":e.isPlaceholder?void 0:ke(e.column),style:B(e.column),className:D(he,Y,e.column.id===b&&"w-10",J,t?.headerClassName),children:e.isPlaceholder?null:v(e.column.columnDef.header,e.getContext())},e.id)})},n.id))}),o(ue,{children:d?Array.from({length:m}).map((n,e)=>o(C,{className:"hover:bg-transparent",children:Array.from({length:w}).map((t,s)=>o(E,{className:F,children:o(ge,{className:"h-4 w-full max-w-[160px]"})},`skeleton-${e}-${s}`))},`skeleton-${e}`)):c===0?o(C,{className:"hover:bg-transparent",children:o(E,{colSpan:w,className:"p-0",children:o(pe,{title:u?.title??"Nothing here yet",titleAs:u?.titleAs,description:u?.description,icon:u?.icon,action:u?.action,ruled:u?.ruled??true})})}):M.map((n,e)=>o(C,{ref:l?t=>{if(t)g.current.set(e,t);else g.current.delete(e)}:void 0,tabIndex:l?e===ee?0:-1:void 0,onFocus:l?()=>{_.current=true;H(e)}:void 0,onBlur:l?ne:void 0,onKeyDown:l?t=>te(t,n,e):void 0,className:l?Ne:void 0,"data-state":i&&n.getIsSelected()?"selected":void 0,children:n.getVisibleCells().map(t=>{const s=t.column.columnDef.meta;const f=v(t.column.columnDef.cell,t.getContext());if(s?.renderOwnCell){return o(re,{children:f},t.id)}const P=s?.align??(s?.numeric?"right":void 0);return o(E,{style:B(t.column),className:D(s?.numeric&&be,P&&Se[P],F,t.column.id===b&&"w-10",s?.className),onClick:t.column.id===b?_e:void 0,children:f},t.id)})},n.id))}),I?o(de,{children:I}):null]})]})}

package/dist/esm/enterprise/date-range-picker/index.js

@@ -1,112 +1 @@
-'use client';
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-/**
- * DateRangePicker — a two-segment popover range control.
- *
- * Two labelled trigger segments (from / to) each open the SAME two-month
- * react-day-picker range calendar over the same range selection. The external
- * contract is plain YYYY-MM-DD strings (empty string = unset) so state shapes
- * that speak `date_from`/`date_to` stay untouched. The picker guarantees
- * from <= to (react-day-picker reorders inverted picks);
- * aria-invalid/aria-describedby pass-throughs keep external validation wiring
- * alive. i18n is via plain string/locale props.
- *
- * ONE POPOVER ROOT PER SEGMENT, deliberately. A single `Popover.Root` holds ONE
- * trigger ref and ONE open state, so wrapping the whole two-button row in a
- * single `PopoverTrigger asChild` put Radix's dialog attributes
- * (`aria-haspopup`, `aria-expanded`, `aria-controls`) on a plain, non-focusable
- * `div` — an aria-allowed-attr violation, two buttons advertising the same
- * expanded state, and focus that Radix could drop on `document.body` when the
- * popover closed. Each segment is now a real `PopoverTrigger` button: focusable,
- * correctly named, and the element Radix returns focus to on dismissal.
- */
-import { useEffect, useState } from 'react';
-import { CalendarDays } from 'lucide-react';
-import { enUS } from 'react-day-picker/locale';
-import { Button } from '../../components/ui/button/index.js';
-import { Calendar } from '../../components/ui/calendar/index.js';
-import { Label } from '../../components/ui/label/index.js';
-import { Popover, PopoverContent, PopoverTrigger } from '../../components/ui/popover/index.js';
-import { cn } from '../../lib/utils.js';
-/** Leading YYYY-MM-DD of an ISO date (or date-time) string. */
-const ISO_DAY = /^(\d{4})-(\d{2})-(\d{2})/;
-/**
- * Parse a YYYY-MM-DD day into a LOCAL-midnight Date — the calendar works in
- * local time, so building from parts avoids the UTC shift `new Date(string)`
- * applies to date-only input (which can land the picker a day early).
- * Rejects impossible calendar days (e.g. 2024-02-31, which would roll over).
- */
-function parseDay(value) {
-    const match = ISO_DAY.exec(value);
-    if (!match)
-        return undefined;
-    const year = Number(match[1]);
-    const month = Number(match[2]);
-    const day = Number(match[3]);
-    const parsed = new Date(year, month - 1, day);
-    return parsed.getFullYear() === year &&
-        parsed.getMonth() === month - 1 &&
-        parsed.getDate() === day
-        ? parsed
-        : undefined;
-}
-/** Format a Date back to YYYY-MM-DD in LOCAL time (never via toISOString). */
-function toDayString(value) {
-    if (!value)
-        return '';
-    const year = String(value.getFullYear()).padStart(4, '0');
-    const month = String(value.getMonth() + 1).padStart(2, '0');
-    const day = String(value.getDate()).padStart(2, '0');
-    return `${year}-${month}-${day}`;
-}
-export function DateRangePicker({ value, onValueChange, fromId, toId, fromLabel, toLabel, invalid = false, required = false, errorId, placeholder = 'Any date', ariaLabel = 'Select date range', clearLabel = 'Clear', locale = enUS, disabled = false }) {
-    // Which segment's popover is open, if any. One root per segment means one open
-    // state per segment; holding the identity of the open one here keeps them
-    // mutually exclusive, so clicking "to" while "from" is open swaps the anchor
-    // instead of stacking two calendars.
-    const [openSegment, setOpenSegment] = useState(null);
-    // Suspending the control must FORGET which segment was open, not just hide
-    // it. The `open` prop below already shuts the popover in the same frame
-    // `disabled` flips, but a controlled Radix root never calls `onOpenChange`
-    // for a prop-driven close, so the identity survived: lifting `disabled`
-    // re-satisfied the same condition and the portaled calendar reopened with no
-    // user gesture, pulling focus into it.
-    useEffect(() => {
-        if (disabled)
-            setOpenSegment(null);
-    }, [disabled]);
-    const fromDate = parseDay(value.from);
-    const toDate = parseDay(value.to);
-    const selected = fromDate || toDate ? { from: fromDate, to: toDate } : undefined;
-    // Derived from the RAW strings, not the parsed dates: a value the calendar
-    // cannot parse still needs to be clearable, and gating Clear on `fromDate`
-    // would strand the field holding text the user can no longer remove.
-    const hasValue = value.from !== '' || value.to !== '';
-    const onSelect = (range) => {
-        onValueChange({
-            from: toDayString(range?.from),
-            to: toDayString(range?.to)
-        });
-    };
-    const triggerClass = cn(
-    // border-input-border, not border-input: `--input` is a SURFACE token and
-    // is white in the light theme, so the trigger had no visible edge next to
-    // the Input and Select it sits with. font-sans, not font-mono: the dates are
-    // figures in the body face with tabular figures, like every other figure in
-    // the console.
-    'border-input-border bg-card hover:bg-secondary focus-visible:ring-ring flex h-9 items-center gap-2 rounded-md border px-3 text-left font-sans text-sm tabular-nums transition-colors duration-150 ease-out focus-visible:ring-2 focus-visible:ring-offset-1 focus-visible:outline-none sm:w-40', invalid && 'border-destructive', 
-    // Conditional rather than `disabled:` variants, matching how this file
-    // already applies `border-destructive`: with the prop absent the class
-    // string stays byte-identical to what consumers render today.
-    disabled && 'cursor-not-allowed opacity-50');
-    // The one calendar, rendered inside whichever segment's popover is open. Both
-    // segments read and write the SAME range selection, so which one you opened
-    // changes only the anchor, never the state.
-    const calendar = (_jsxs(_Fragment, { children: [_jsx(Calendar, { mode: "range", numberOfMonths: 2, defaultMonth: fromDate ?? toDate ?? new Date(), selected: selected, onSelect: onSelect, locale: locale }), _jsx("div", { className: "border-border flex items-center justify-end border-t px-3 py-2", children: _jsx(Button, { type: "button", variant: "plain", size: "small", disabled: !hasValue, onClick: () => onValueChange({ from: '', to: '' }), children: clearLabel }) })] }));
-    const renderSegment = (segment, id, label, dateValue) => (_jsxs(Popover, { 
-        // A disabled trigger cannot open a popover, but a surface that suspends
-        // itself WHILE one is open (a filter bar flipping to "show all") would
-        // otherwise leave the portaled calendar on screen with no way back to it.
-        open: !disabled && openSegment === segment, onOpenChange: (next) => setOpenSegment(next ? segment : null), children: [_jsxs("div", { className: "flex flex-col gap-1.5", children: [_jsxs(Label, { htmlFor: id, children: [label, required ? ' *' : ''] }), _jsxs(PopoverTrigger, { type: "button", id: id, className: triggerClass, disabled: disabled, "aria-invalid": invalid || undefined, "aria-describedby": invalid ? errorId : undefined, children: [_jsx(CalendarDays, { className: "text-muted-foreground size-4 shrink-0", "aria-hidden": true }), dateValue ? (_jsx("span", { children: dateValue })) : (_jsx("span", { className: "text-muted-foreground", children: placeholder }))] })] }), _jsx(PopoverContent, { align: "start", className: "w-auto p-0", "aria-label": ariaLabel, children: calendar })] }, segment));
-    return (_jsxs("div", { className: "flex flex-col gap-3 sm:flex-row sm:items-end", children: [renderSegment('from', fromId, fromLabel, value.from), renderSegment('to', toId, toLabel, value.to)] }));
-}
+"use client";import{jsx as r,Fragment as Y,jsxs as i}from"react/jsx-runtime";import{useEffect as $,useState as z}from"react";import{CalendarDays as A}from"lucide-react";import{enUS as B}from"react-day-picker/locale";import{Button as E}from"../../components/ui/button/index.js";import{Calendar as I}from"../../components/ui/calendar/index.js";import{Label as L}from"../../components/ui/label/index.js";import{Popover as R,PopoverContent as T,PopoverTrigger as U}from"../../components/ui/popover/index.js";import{cn as q}from"../../lib/utils.js";const G=/^(\d{4})-(\d{2})-(\d{2})/;function b(e){const t=G.exec(e);if(!t)return void 0;const n=Number(t[1]);const o=Number(t[2]);const d=Number(t[3]);const s=new Date(n,o-1,d);return s.getFullYear()===n&&s.getMonth()===o-1&&s.getDate()===d?s:void 0}function x(e){if(!e)return"";const t=String(e.getFullYear()).padStart(4,"0");const n=String(e.getMonth()+1).padStart(2,"0");const o=String(e.getDate()).padStart(2,"0");return`${t}-${n}-${o}`}export function DateRangePicker({value:e,onValueChange:t,fromId:n,toId:o,fromLabel:d,toLabel:s,invalid:l=false,required:S=false,errorId:y,placeholder:D="Any date",ariaLabel:N="Select date range",clearLabel:w="Clear",locale:C=B,disabled:c=false}){const[j,u]=z(null);$(()=>{if(c)u(null)},[c]);const m=b(e.from);const f=b(e.to);const F=m||f?{from:m,to:f}:void 0;const v=e.from!==""||e.to!=="";const M=a=>{t({from:x(a?.from),to:x(a?.to)})};const O=q("border-input-border bg-card hover:bg-secondary focus-visible:ring-ring flex h-9 items-center gap-2 rounded-md border px-3 text-left font-sans text-sm tabular-nums transition-colors duration-150 ease-out focus-visible:ring-2 focus-visible:ring-offset-1 focus-visible:outline-none sm:w-40",l&&"border-destructive",c&&"cursor-not-allowed opacity-50");const P=i(Y,{children:[r(I,{mode:"range",numberOfMonths:2,defaultMonth:m??f??new Date,selected:F,onSelect:M,locale:C}),r("div",{className:"border-border flex items-center justify-end border-t px-3 py-2",children:r(E,{type:"button",variant:"plain",size:"small",disabled:!v,onClick:()=>t({from:"",to:""}),children:w})})]});const p=(a,g,_,h)=>i(R,{open:!c&&j===a,onOpenChange:k=>u(k?a:null),children:[i("div",{className:"flex flex-col gap-1.5",children:[i(L,{htmlFor:g,children:[_,S?" *":""]}),i(U,{type:"button",id:g,className:O,disabled:c,"aria-invalid":l||void 0,"aria-describedby":l?y:void 0,children:[r(A,{className:"text-muted-foreground size-4 shrink-0","aria-hidden":true}),h?r("span",{children:h}):r("span",{className:"text-muted-foreground",children:D})]})]}),r(T,{align:"start",className:"w-auto p-0","aria-label":N,children:P})]},a);return i("div",{className:"flex flex-col gap-3 sm:flex-row sm:items-end",children:[p("from",n,d,e.from),p("to",o,s,e.to)]})}

package/dist/esm/enterprise/detail-panel/index.js

@@ -1,17 +1 @@
-'use client';
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { X } from 'lucide-react';
-import { Sheet, SheetClose, SheetContent, SheetTitle } from '../../components/ui/sheet/index.js';
-import { cn } from '../../lib/utils.js';
-/**
- * The slide-over inspector. The header and footer stay pinned; only the body
- * scrolls. Sheet already renders an overlay, focus trap, and Esc/overlay
- * dismissal — we suppress its built-in corner close button (`[&>button.absolute]`)
- * and provide our own inside the header so the layout stays deliberate.
- */
-export function DetailPanel({ open, onOpenChange, title, side = 'right', actions, footer, closeLabel = 'Close', children, className }) {
-    return (_jsx(Sheet, { open: open, onOpenChange: onOpenChange, children: _jsxs(SheetContent, { side: side, className: cn(
-            // Reset Sheet's padding/gap and hide its built-in close button; we
-            // own the three-slot layout and the header close affordance here.
-            'flex flex-col gap-0 overflow-hidden p-0', '[&>button.absolute]:hidden', className), children: [_jsxs("header", { className: "border-border bg-card sticky top-0 z-10 flex shrink-0 items-start justify-between gap-3 border-b px-6 py-4", children: [_jsx(SheetTitle, { className: "min-w-0 flex-1 truncate text-base font-semibold tracking-tight", children: title }), _jsxs("div", { className: "flex shrink-0 items-center gap-1.5", children: [actions, _jsx(SheetClose, { "data-slot": "detail-panel-close", className: "ring-offset-background focus:ring-ring rounded-sm opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:outline-none disabled:pointer-events-none", "aria-label": closeLabel, children: _jsx(X, { className: "size-4", "aria-hidden": true }) })] })] }), _jsx("div", { className: "min-h-0 flex-1 overflow-y-auto", children: _jsx("div", { className: "px-6 py-5", children: children }) }), footer ? (_jsx("footer", { className: "border-border bg-card sticky bottom-0 z-10 flex shrink-0 flex-col-reverse gap-2 border-t px-6 py-4 sm:flex-row sm:justify-end", children: footer })) : null] }) }));
-}
+"use client";import{jsx as e,jsxs as r}from"react/jsx-runtime";import{X as m}from"lucide-react";import{Sheet as h,SheetClose as f,SheetContent as p,SheetTitle as b}from"../../components/ui/sheet/index.js";import{cn as x}from"../../lib/utils.js";export function DetailPanel({open:t,onOpenChange:i,title:n,side:o="right",actions:a,footer:s,closeLabel:l="Close",children:c,className:d}){return e(h,{open:t,onOpenChange:i,children:r(p,{side:o,className:x("flex flex-col gap-0 overflow-hidden p-0","[&>button.absolute]:hidden",d),children:[r("header",{className:"border-border bg-card sticky top-0 z-10 flex shrink-0 items-start justify-between gap-3 border-b px-6 py-4",children:[e(b,{className:"min-w-0 flex-1 truncate text-base font-semibold tracking-tight",children:n}),r("div",{className:"flex shrink-0 items-center gap-1.5",children:[a,e(f,{"data-slot":"detail-panel-close",className:"ring-offset-background focus:ring-ring rounded-sm opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:outline-none disabled:pointer-events-none","aria-label":l,children:e(m,{className:"size-4","aria-hidden":true})})]})]}),e("div",{className:"min-h-0 flex-1 overflow-y-auto",children:e("div",{className:"px-6 py-5",children:c})}),s?e("footer",{className:"border-border bg-card sticky bottom-0 z-10 flex shrink-0 flex-col-reverse gap-2 border-t px-6 py-4 sm:flex-row sm:justify-end",children:s}):null]})})}

package/dist/esm/enterprise/empty-state/index.js

@@ -1,11 +1 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Inbox } from 'lucide-react';
-import { LABEL_VOICE_CLASS } from '../../lib/typography.js';
-import { cn } from '../../lib/utils.js';
-export function EmptyState({ icon: Icon = Inbox, title, description, action, ruled = false, titleAs, className }) {
-    const Title = titleAs ?? (ruled ? 'span' : 'p');
-    if (ruled) {
-        return (_jsxs("div", { "data-variant": "ruled", className: cn('border-border flex flex-col items-start gap-2 border-t px-3 py-6 text-left', className), children: [_jsxs("div", { className: "text-muted-foreground flex items-center gap-2", children: [_jsx(Icon, { className: "size-4", "aria-hidden": true }), _jsx(Title, { className: LABEL_VOICE_CLASS, children: title })] }), description ? (_jsx("p", { className: "text-muted-foreground max-w-prose text-sm", children: description })) : null, action ? _jsx("div", { className: "mt-1", children: action }) : null] }));
-    }
-    return (_jsxs("div", { className: cn('flex flex-col items-center justify-center gap-3 px-6 py-16 text-center', className), children: [_jsx("div", { className: "bg-muted flex size-11 items-center justify-center rounded-full", children: _jsx(Icon, { className: "text-muted-foreground size-5", "aria-hidden": true }) }), _jsxs("div", { className: "space-y-1", children: [_jsx(Title, { className: "text-foreground text-sm font-medium", children: title }), description ? (_jsx("p", { className: "text-muted-foreground mx-auto max-w-sm text-sm", children: description })) : null] }), action ? _jsx("div", { className: "mt-2", children: action }) : null] }));
-}
+import{jsx as e,jsxs as s}from"react/jsx-runtime";import{Inbox as x}from"lucide-react";import{LABEL_VOICE_CLASS as o}from"../../lib/typography.js";import{cn as i}from"../../lib/utils.js";export function EmptyState({icon:l=x,title:a,description:t,action:r,ruled:m=false,titleAs:c,className:d}){const n=c??(m?"span":"p");if(m){return s("div",{"data-variant":"ruled",className:i("border-border flex flex-col items-start gap-2 border-t px-3 py-6 text-left",d),children:[s("div",{className:"text-muted-foreground flex items-center gap-2",children:[e(l,{className:"size-4","aria-hidden":true}),e(n,{className:o,children:a})]}),t?e("p",{className:"text-muted-foreground max-w-prose text-sm",children:t}):null,r?e("div",{className:"mt-1",children:r}):null]})}return s("div",{className:i("flex flex-col items-center justify-center gap-3 px-6 py-16 text-center",d),children:[e("div",{className:"bg-muted flex size-11 items-center justify-center rounded-full",children:e(l,{className:"text-muted-foreground size-5","aria-hidden":true})}),s("div",{className:"space-y-1",children:[e(n,{className:"text-foreground text-sm font-medium",children:a}),t?e("p",{className:"text-muted-foreground mx-auto max-w-sm text-sm",children:t}):null]}),r?e("div",{className:"mt-2",children:r}):null]})}