@lerianstudio/sindarian-ui 1.2.0 → 1.3.0-beta.1

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

@@ -0,0 +1,245 @@
+'use client';
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DataTable = DataTable;
+const jsx_runtime_1 = require("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
+ *
+ * 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.
+ *
+ * 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.
+ *
+ * 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.
+ */
+const react_1 = require("react");
+const react_table_1 = require("@tanstack/react-table");
+const table_1 = require("../../components/ui/table");
+const skeleton_1 = require("../../components/ui/skeleton");
+const utils_1 = require("../../lib/utils");
+const empty_state_1 = require("../empty-state");
+const SELECTION_COLUMN_ID = '__select__';
+const CHECKBOX_CLASS = 'accent-primary block size-4';
+/** Right-aligned mono treatment for `meta: { numeric: true }` columns. */
+const NUMERIC_CELL_CLASS = 'text-right font-mono tabular-nums';
+/**
+ * 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();
+}
+function SelectAllCheckbox({ table }) {
+    const allSelected = table.getIsAllPageRowsSelected();
+    const someSelected = table.getIsSomePageRowsSelected();
+    return ((0, jsx_runtime_1.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 ((0, jsx_runtime_1.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 }) => (0, jsx_runtime_1.jsx)(SelectAllCheckbox, { table: table }),
+        cell: ({ row }) => (0, jsx_runtime_1.jsx)(RowSelectionCheckbox, { row: row, getLabel: getLabel })
+    };
+}
+function DataTable({ columns, data, loading = false, skeletonRows = 8, loadingLabel = 'Loading table rows', empty, getRowId, flush = false, density = 'comfortable', enableRowSelection = false, rowSelection, onRowSelectionChange, getRowSelectionLabel, onRowActivate, rowHref, className }) {
+    const tableColumns = (0, react_1.useMemo)(() => enableRowSelection
+        ? [createSelectionColumn(getRowSelectionLabel), ...columns]
+        : columns, [columns, enableRowSelection, getRowSelectionLabel]);
+    const table = (0, react_table_1.useReactTable)({
+        data,
+        columns: tableColumns,
+        getCoreRowModel: (0, react_table_1.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,
+        state: {
+            rowSelection: enableRowSelection ? (rowSelection ?? {}) : undefined
+        }
+    });
+    const colCount = tableColumns.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] = (0, react_1.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 = (0, react_1.useRef)(new Map());
+    const focusWithinRef = (0, react_1.useRef)(false);
+    const containerRef = (0, react_1.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.
+    (0, react_1.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 ((0, jsx_runtime_1.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: (0, utils_1.cn)(!flush &&
+            'border-border bg-card text-card-foreground rounded-lg border', className), children: [(0, jsx_runtime_1.jsx)("span", { className: "sr-only", role: "status", children: loading
+                    ? loadingLabel
+                    : rowCount === 0
+                        ? 'No rows'
+                        : `${rowCount} rows` }), (0, jsx_runtime_1.jsxs)(table_1.Table, { "aria-busy": loading ? 'true' : undefined, children: [(0, jsx_runtime_1.jsx)(table_1.TableHeader, { children: table.getHeaderGroups().map((headerGroup) => ((0, jsx_runtime_1.jsx)(table_1.TableRow, { className: "hover:bg-transparent", children: headerGroup.headers.map((header) => {
+                                const numeric = header.column.columnDef.meta?.numeric;
+                                return ((0, jsx_runtime_1.jsx)(table_1.TableHead, { align: numeric ? 'right' : undefined, className: (0, utils_1.cn)('tracking-wide uppercase', headDensityClass, header.column.id === SELECTION_COLUMN_ID && 'w-10'), children: header.isPlaceholder
+                                        ? null
+                                        : (0, react_table_1.flexRender)(header.column.columnDef.header, header.getContext()) }, header.id));
+                            }) }, headerGroup.id))) }), (0, jsx_runtime_1.jsx)(table_1.TableBody, { children: loading ? (Array.from({ length: skeletonRows }).map((_, rowIndex) => ((0, jsx_runtime_1.jsx)(table_1.TableRow, { className: "hover:bg-transparent", children: Array.from({ length: colCount }).map((__, cellIndex) => ((0, jsx_runtime_1.jsx)(table_1.TableCell, { className: cellDensityClass, children: (0, jsx_runtime_1.jsx)(skeleton_1.Skeleton, { className: "h-4 w-full max-w-[160px]" }) }, `skeleton-${rowIndex}-${cellIndex}`))) }, `skeleton-${rowIndex}`)))) : rowCount === 0 ? ((0, jsx_runtime_1.jsx)(table_1.TableRow, { className: "hover:bg-transparent", children: (0, jsx_runtime_1.jsx)(table_1.TableCell, { colSpan: colCount, className: "p-0", children: (0, jsx_runtime_1.jsx)(empty_state_1.EmptyState, { title: empty?.title ?? 'Nothing here yet', 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) => ((0, jsx_runtime_1.jsx)(table_1.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) => ((0, jsx_runtime_1.jsx)(table_1.TableCell, { className: (0, utils_1.cn)(cell.column.columnDef.meta?.numeric && NUMERIC_CELL_CLASS, cellDensityClass, cell.column.id === SELECTION_COLUMN_ID && 'w-10'), onClick: cell.column.id === SELECTION_COLUMN_ID
+                                    ? stopPropagation
+                                    : undefined, children: (0, react_table_1.flexRender)(cell.column.columnDef.cell, cell.getContext()) }, cell.id))) }, row.id)))) })] })] }));
+}

package/dist/enterprise/date-range-picker/index.d.ts

@@ -0,0 +1,37 @@
+import type { ComponentProps, ReactNode } from 'react';
+import { Calendar } from '../../components/ui/calendar';
+/**
+ * The calendar's locale type, taken straight off the Calendar props so the
+ * public signature stays the react-day-picker/date-fns `Locale` without this
+ * package taking a direct date-fns dependency.
+ */
+type CalendarLocale = ComponentProps<typeof Calendar>['locale'];
+export type DateRangeValue = {
+    /** YYYY-MM-DD or '' when unset. */
+    from: string;
+    /** YYYY-MM-DD or '' when unset. */
+    to: string;
+};
+export type DateRangePickerProps = {
+    value: DateRangeValue;
+    onValueChange: (next: DateRangeValue) => void;
+    /** id (and de-facto testid) of the "from" trigger; the label points at it. */
+    fromId: string;
+    toId: string;
+    fromLabel: ReactNode;
+    toLabel: ReactNode;
+    invalid?: boolean;
+    /** Wired as aria-describedby on both triggers while `invalid` is set. */
+    errorId?: string;
+    /** Trigger placeholder when unset. */
+    placeholder?: string;
+    /** Accessible label for the calendar popover. */
+    ariaLabel?: string;
+    /** Label for the clear button. */
+    clearLabel?: string;
+    /** date-fns locale for the calendar. Defaults to en-US. */
+    locale?: CalendarLocale;
+};
+export declare function DateRangePicker({ value, onValueChange, fromId, toId, fromLabel, toLabel, invalid, errorId, placeholder, ariaLabel, clearLabel, locale }: DateRangePickerProps): import("react").JSX.Element;
+export {};
+//# sourceMappingURL=index.d.ts.map

package/dist/enterprise/date-range-picker/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/enterprise/date-range-picker/index.tsx"],"names":[],"mappings":"AAuBA,OAAO,KAAK,EAAE,cAAc,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAMtD,OAAO,EAAE,QAAQ,EAAE,MAAM,0BAA0B,CAAA;AAUnD;;;;GAIG;AACH,KAAK,cAAc,GAAG,cAAc,CAAC,OAAO,QAAQ,CAAC,CAAC,QAAQ,CAAC,CAAA;AAE/D,MAAM,MAAM,cAAc,GAAG;IAC3B,mCAAmC;IACnC,IAAI,EAAE,MAAM,CAAA;IACZ,mCAAmC;IACnC,EAAE,EAAE,MAAM,CAAA;CACX,CAAA;AAED,MAAM,MAAM,oBAAoB,GAAG;IACjC,KAAK,EAAE,cAAc,CAAA;IACrB,aAAa,EAAE,CAAC,IAAI,EAAE,cAAc,KAAK,IAAI,CAAA;IAC7C,8EAA8E;IAC9E,MAAM,EAAE,MAAM,CAAA;IACd,IAAI,EAAE,MAAM,CAAA;IACZ,SAAS,EAAE,SAAS,CAAA;IACpB,OAAO,EAAE,SAAS,CAAA;IAClB,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,yEAAyE;IACzE,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,sCAAsC;IACtC,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,iDAAiD;IACjD,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,kCAAkC;IAClC,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,2DAA2D;IAC3D,MAAM,CAAC,EAAE,cAAc,CAAA;CACxB,CAAA;AAkCD,wBAAgB,eAAe,CAAC,EAC9B,KAAK,EACL,aAAa,EACb,MAAM,EACN,IAAI,EACJ,SAAS,EACT,OAAO,EACP,OAAe,EACf,OAAO,EACP,WAAwB,EACxB,SAA+B,EAC/B,UAAoB,EACpB,MAAa,EACd,EAAE,oBAAoB,+BAiHtB"}

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

@@ -0,0 +1,92 @@
+'use client';
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DateRangePicker = DateRangePicker;
+const jsx_runtime_1 = require("react/jsx-runtime");
+/**
+ * DateRangePicker — a two-segment popover range control.
+ *
+ * Two labelled mono 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.
+ */
+const react_1 = require("react");
+const lucide_react_1 = require("lucide-react");
+const locale_1 = require("react-day-picker/locale");
+const button_1 = require("../../components/ui/button");
+const calendar_1 = require("../../components/ui/calendar");
+const label_1 = require("../../components/ui/label");
+const popover_1 = require("../../components/ui/popover");
+const typography_1 = require("../../lib/typography");
+const utils_1 = require("../../lib/utils");
+/** 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}`;
+}
+function DateRangePicker({ value, onValueChange, fromId, toId, fromLabel, toLabel, invalid = false, errorId, placeholder = 'Any date', ariaLabel = 'Select date range', clearLabel = 'Clear', locale = locale_1.enUS }) {
+    // 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] = (0, react_1.useState)(null);
+    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 = (0, utils_1.cn)('border-input bg-card hover:bg-secondary focus-visible:ring-ring flex h-9 items-center gap-2 rounded-md border px-3 text-left font-mono 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');
+    // 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 = ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(calendar_1.Calendar, { mode: "range", numberOfMonths: 2, defaultMonth: fromDate ?? toDate ?? new Date(), selected: selected, onSelect: onSelect, locale: locale }), (0, jsx_runtime_1.jsx)("div", { className: "border-border flex items-center justify-end border-t px-3 py-2", children: (0, jsx_runtime_1.jsx)(button_1.Button, { type: "button", variant: "plain", size: "small", disabled: !hasValue, onClick: () => onValueChange({ from: '', to: '' }), children: clearLabel }) })] }));
+    const renderSegment = (segment, id, label, dateValue) => ((0, jsx_runtime_1.jsxs)(popover_1.Popover, { open: openSegment === segment, onOpenChange: (next) => setOpenSegment(next ? segment : null), children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col gap-1.5", children: [(0, jsx_runtime_1.jsx)(label_1.Label, { htmlFor: id, className: typography_1.SECTION_LABEL_CLASS, children: label }), (0, jsx_runtime_1.jsxs)(popover_1.PopoverTrigger, { type: "button", id: id, className: triggerClass, "aria-invalid": invalid || undefined, "aria-describedby": invalid ? errorId : undefined, children: [(0, jsx_runtime_1.jsx)(lucide_react_1.CalendarDays, { className: "text-muted-foreground size-4 shrink-0", "aria-hidden": true }), dateValue ? ((0, jsx_runtime_1.jsx)("span", { children: dateValue })) : ((0, jsx_runtime_1.jsx)("span", { className: "text-muted-foreground font-sans", children: placeholder }))] })] }), (0, jsx_runtime_1.jsx)(popover_1.PopoverContent, { align: "start", className: "w-auto p-0", "aria-label": ariaLabel, children: calendar })] }, segment));
+    return ((0, jsx_runtime_1.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)] }));
+}

package/dist/enterprise/detail-panel/index.d.ts

@@ -0,0 +1,54 @@
+/**
+ * DetailPanel — the console's right-side slide-over for inspecting and editing a
+ * single record without leaving the list behind it. Built on Sheet (a Radix
+ * Dialog) with three structural slots:
+ *
+ *   - a STICKY header: the record title, an optional actions cluster, and a
+ *     close affordance, pinned to the top while the body scrolls;
+ *   - a SCROLLABLE body carrying `children`;
+ *   - an optional STICKY footer for the primary/secondary actions
+ *     (e.g. Cancel / Save), pinned to the bottom.
+ *
+ *   <DetailPanel
+ *     open={open}
+ *     onOpenChange={setOpen}
+ *     title="Transaction txn_8f2a"
+ *     footer={<>
+ *       <SheetClose asChild><Button variant="outline">Cancel</Button></SheetClose>
+ *       <Button onClick={save}>Save</Button>
+ *     </>}
+ *   >
+ *     …long body…
+ *   </DetailPanel>
+ *
+ * Controlled only: drive `open` from props and reflect dismissals via
+ * `onOpenChange`. `side` defaults to "right".
+ */
+import * as React from 'react';
+export type DetailPanelProps = {
+    /** Controlled open state. */
+    open: boolean;
+    /** Reflects every dismissal (overlay, Esc, close button) and programmatic toggle. */
+    onOpenChange: (open: boolean) => void;
+    /** Header title; also the accessible dialog name. */
+    title: React.ReactNode;
+    /** Edge the panel slides in from. Defaults to "right". */
+    side?: 'right' | 'left';
+    /** Optional header actions, placed left of the close button. */
+    actions?: React.ReactNode;
+    /** Optional sticky footer (e.g. Cancel / Save). */
+    footer?: React.ReactNode;
+    /** Accessible label for the close button. Defaults to "Close". */
+    closeLabel?: string;
+    /** Scrollable body content. */
+    children?: React.ReactNode;
+    className?: string;
+};
+/**
+ * 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 declare function DetailPanel({ open, onOpenChange, title, side, actions, footer, closeLabel, children, className }: DetailPanelProps): React.JSX.Element;
+//# sourceMappingURL=index.d.ts.map

package/dist/enterprise/detail-panel/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/enterprise/detail-panel/index.tsx"],"names":[],"mappings":"AAEA;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AACH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAW9B,MAAM,MAAM,gBAAgB,GAAG;IAC7B,6BAA6B;IAC7B,IAAI,EAAE,OAAO,CAAA;IACb,qFAAqF;IACrF,YAAY,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAA;IACrC,qDAAqD;IACrD,KAAK,EAAE,KAAK,CAAC,SAAS,CAAA;IACtB,0DAA0D;IAC1D,IAAI,CAAC,EAAE,OAAO,GAAG,MAAM,CAAA;IACvB,gEAAgE;IAChE,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACzB,mDAAmD;IACnD,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACxB,kEAAkE;IAClE,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,+BAA+B;IAC/B,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC1B,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB,CAAA;AAED;;;;;GAKG;AACH,wBAAgB,WAAW,CAAC,EAC1B,IAAI,EACJ,YAAY,EACZ,KAAK,EACL,IAAc,EACd,OAAO,EACP,MAAM,EACN,UAAoB,EACpB,QAAQ,EACR,SAAS,EACV,EAAE,gBAAgB,qBA4ClB"}

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

@@ -0,0 +1,20 @@
+'use client';
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DetailPanel = DetailPanel;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const lucide_react_1 = require("lucide-react");
+const sheet_1 = require("../../components/ui/sheet");
+const utils_1 = require("../../lib/utils");
+/**
+ * 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.
+ */
+function DetailPanel({ open, onOpenChange, title, side = 'right', actions, footer, closeLabel = 'Close', children, className }) {
+    return ((0, jsx_runtime_1.jsx)(sheet_1.Sheet, { open: open, onOpenChange: onOpenChange, children: (0, jsx_runtime_1.jsxs)(sheet_1.SheetContent, { side: side, className: (0, utils_1.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: [(0, jsx_runtime_1.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: [(0, jsx_runtime_1.jsx)(sheet_1.SheetTitle, { className: "min-w-0 flex-1 truncate text-base font-semibold tracking-tight", children: title }), (0, jsx_runtime_1.jsxs)("div", { className: "flex shrink-0 items-center gap-1.5", children: [actions, (0, jsx_runtime_1.jsx)(sheet_1.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: (0, jsx_runtime_1.jsx)(lucide_react_1.X, { className: "size-4", "aria-hidden": true }) })] })] }), (0, jsx_runtime_1.jsx)("div", { className: "min-h-0 flex-1 overflow-y-auto", children: (0, jsx_runtime_1.jsx)("div", { className: "px-6 py-5", children: children }) }), footer ? ((0, jsx_runtime_1.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] }) }));
+}

package/dist/enterprise/empty-state/index.d.ts

@@ -0,0 +1,32 @@
+/**
+ * EmptyState: centered icon + title + optional description and action, for
+ * "no data yet" and "no results" surfaces. Keep copy short and neutral.
+ *
+ * The `ruled` flag is the "ruled page" presentation hook: instead of the
+ * floating centered card (which reads as a void inside a ledger register), it
+ * renders a quiet, top/left-aligned notation under a hairline rule — so a
+ * sparse register reads as ruled stationery waiting for entries rather than an
+ * empty pane. The icon bubble drops; the title takes the column-head label
+ * voice; the copy aligns to the page baseline. This is the seam a pre-ruled
+ * empty-rows register (built app-side) composes with: the EmptyState sits at
+ * the head of the page and the faint ruled lines fill below it.
+ */
+import type { LucideIcon } from 'lucide-react';
+import type { ReactNode } from 'react';
+export type EmptyStateProps = {
+    /** Lucide icon component. Defaults to Inbox. */
+    icon?: LucideIcon;
+    title: string;
+    description?: string;
+    /** Optional action node (e.g. a Button). */
+    action?: ReactNode;
+    /**
+     * Render as a ruled-page notation rather than a centered card. Use inside a
+     * ledger register so a short/empty result set reads as ruled stationery, not
+     * a void. Pairs with the app-side pre-ruled empty-rows fill. Default off.
+     */
+    ruled?: boolean;
+    className?: string;
+};
+export declare function EmptyState({ icon: Icon, title, description, action, ruled, className }: EmptyStateProps): import("react").JSX.Element;
+//# sourceMappingURL=index.d.ts.map

package/dist/enterprise/empty-state/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/enterprise/empty-state/index.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;GAYG;AACH,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,cAAc,CAAA;AAE9C,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAKtC,MAAM,MAAM,eAAe,GAAG;IAC5B,gDAAgD;IAChD,IAAI,CAAC,EAAE,UAAU,CAAA;IACjB,KAAK,EAAE,MAAM,CAAA;IACb,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,4CAA4C;IAC5C,MAAM,CAAC,EAAE,SAAS,CAAA;IAClB;;;;OAIG;IACH,KAAK,CAAC,EAAE,OAAO,CAAA;IACf,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB,CAAA;AAED,wBAAgB,UAAU,CAAC,EACzB,IAAI,EAAE,IAAY,EAClB,KAAK,EACL,WAAW,EACX,MAAM,EACN,KAAa,EACb,SAAS,EACV,EAAE,eAAe,+BA6CjB"}

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

@@ -0,0 +1,13 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.EmptyState = EmptyState;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const lucide_react_1 = require("lucide-react");
+const typography_1 = require("../../lib/typography");
+const utils_1 = require("../../lib/utils");
+function EmptyState({ icon: Icon = lucide_react_1.Inbox, title, description, action, ruled = false, className }) {
+    if (ruled) {
+        return ((0, jsx_runtime_1.jsxs)("div", { "data-variant": "ruled", className: (0, utils_1.cn)('border-border flex flex-col items-start gap-2 border-t px-3 py-6 text-left', className), children: [(0, jsx_runtime_1.jsxs)("div", { className: "text-muted-foreground flex items-center gap-2", children: [(0, jsx_runtime_1.jsx)(Icon, { className: "size-4", "aria-hidden": true }), (0, jsx_runtime_1.jsx)("span", { className: typography_1.LABEL_VOICE_CLASS, children: title })] }), description ? ((0, jsx_runtime_1.jsx)("p", { className: "text-muted-foreground max-w-prose text-sm", children: description })) : null, action ? (0, jsx_runtime_1.jsx)("div", { className: "mt-1", children: action }) : null] }));
+    }
+    return ((0, jsx_runtime_1.jsxs)("div", { className: (0, utils_1.cn)('flex flex-col items-center justify-center gap-3 px-6 py-16 text-center', className), children: [(0, jsx_runtime_1.jsx)("div", { className: "bg-muted flex size-11 items-center justify-center rounded-full", children: (0, jsx_runtime_1.jsx)(Icon, { className: "text-muted-foreground size-5", "aria-hidden": true }) }), (0, jsx_runtime_1.jsxs)("div", { className: "space-y-1", children: [(0, jsx_runtime_1.jsx)("p", { className: "text-foreground text-sm font-medium", children: title }), description ? ((0, jsx_runtime_1.jsx)("p", { className: "text-muted-foreground mx-auto max-w-sm text-sm", children: description })) : null] }), action ? (0, jsx_runtime_1.jsx)("div", { className: "mt-2", children: action }) : null] }));
+}

package/dist/enterprise/index.d.ts

@@ -0,0 +1,26 @@
+export { AlertBanner } from './alert-banner';
+export type { AlertBannerProps, AlertBannerTone } from './alert-banner';
+export { AppShell } from './app-shell';
+export type { AppShellProps } from './app-shell';
+export { CursorPager } from './cursor-pager';
+export type { CursorPagerProps } from './cursor-pager';
+export { DataTable } from './data-table';
+export type { DataTableProps } from './data-table';
+export { DateRangePicker } from './date-range-picker';
+export type { DateRangePickerProps, DateRangeValue } from './date-range-picker';
+export { DetailPanel } from './detail-panel';
+export type { DetailPanelProps } from './detail-panel';
+export { EmptyState } from './empty-state';
+export type { EmptyStateProps } from './empty-state';
+export { NumberInput } from './number-input';
+export type { NumberInputProps } from './number-input';
+export { SearchInput } from './search-input';
+export type { SearchInputProps } from './search-input';
+export { StatCard } from './stat-card';
+export type { StatCardProps, StatCardRow, StatCardTone } from './stat-card';
+export { DEFAULT_STATUS_VARIANTS, StatusBadge } from './status-badge';
+export type { StatusBadgeProps } from './status-badge';
+export { VirtualizedTable } from './virtualized-table';
+export type { VirtualizedTableProps } from './virtualized-table';
+export { useIsMobile } from './use-is-mobile';
+//# sourceMappingURL=index.d.ts.map

package/dist/enterprise/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/enterprise/index.ts"],"names":[],"mappings":"AAUA,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAA;AAC5C,YAAY,EAAE,gBAAgB,EAAE,eAAe,EAAE,MAAM,gBAAgB,CAAA;AAEvE,OAAO,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAA;AACtC,YAAY,EAAE,aAAa,EAAE,MAAM,aAAa,CAAA;AAEhD,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAA;AAC5C,YAAY,EAAE,gBAAgB,EAAE,MAAM,gBAAgB,CAAA;AAEtD,OAAO,EAAE,SAAS,EAAE,MAAM,cAAc,CAAA;AACxC,YAAY,EAAE,cAAc,EAAE,MAAM,cAAc,CAAA;AAElD,OAAO,EAAE,eAAe,EAAE,MAAM,qBAAqB,CAAA;AACrD,YAAY,EAAE,oBAAoB,EAAE,cAAc,EAAE,MAAM,qBAAqB,CAAA;AAE/E,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAA;AAC5C,YAAY,EAAE,gBAAgB,EAAE,MAAM,gBAAgB,CAAA;AAEtD,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAA;AAC1C,YAAY,EAAE,eAAe,EAAE,MAAM,eAAe,CAAA;AAEpD,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAA;AAC5C,YAAY,EAAE,gBAAgB,EAAE,MAAM,gBAAgB,CAAA;AAEtD,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAA;AAC5C,YAAY,EAAE,gBAAgB,EAAE,MAAM,gBAAgB,CAAA;AAEtD,OAAO,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAA;AACtC,YAAY,EAAE,aAAa,EAAE,WAAW,EAAE,YAAY,EAAE,MAAM,aAAa,CAAA;AAE3E,OAAO,EAAE,uBAAuB,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAA;AACrE,YAAY,EAAE,gBAAgB,EAAE,MAAM,gBAAgB,CAAA;AAEtD,OAAO,EAAE,gBAAgB,EAAE,MAAM,qBAAqB,CAAA;AACtD,YAAY,EAAE,qBAAqB,EAAE,MAAM,qBAAqB,CAAA;AAEhE,OAAO,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAA"}

package/dist/enterprise/index.js

@@ -0,0 +1,39 @@
+"use strict";
+// Owned by lane enterprise — see docs/plans/2026-08-26-sindarian-x-retirement/
+//
+// The composed enterprise layer absorbed from @lerianstudio/sindarian-x@0.15.0.
+// Outer public APIs are byte-compatible with that package; internals are
+// recomposed over sindarian-ui primitives and its design tokens.
+//
+// Names already exported by sindarian-ui are NEVER re-exported here (FC-4):
+// consumers adapt to sindarian-ui's API for Button, Badge, Table*, Sidebar*,
+// EntityBox*, Stepper*, PageHeader, ConfirmationDialog and friends.
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useIsMobile = exports.VirtualizedTable = exports.StatusBadge = exports.DEFAULT_STATUS_VARIANTS = exports.StatCard = exports.SearchInput = exports.NumberInput = exports.EmptyState = exports.DetailPanel = exports.DateRangePicker = exports.DataTable = exports.CursorPager = exports.AppShell = exports.AlertBanner = void 0;
+var alert_banner_1 = require("./alert-banner");
+Object.defineProperty(exports, "AlertBanner", { enumerable: true, get: function () { return alert_banner_1.AlertBanner; } });
+var app_shell_1 = require("./app-shell");
+Object.defineProperty(exports, "AppShell", { enumerable: true, get: function () { return app_shell_1.AppShell; } });
+var cursor_pager_1 = require("./cursor-pager");
+Object.defineProperty(exports, "CursorPager", { enumerable: true, get: function () { return cursor_pager_1.CursorPager; } });
+var data_table_1 = require("./data-table");
+Object.defineProperty(exports, "DataTable", { enumerable: true, get: function () { return data_table_1.DataTable; } });
+var date_range_picker_1 = require("./date-range-picker");
+Object.defineProperty(exports, "DateRangePicker", { enumerable: true, get: function () { return date_range_picker_1.DateRangePicker; } });
+var detail_panel_1 = require("./detail-panel");
+Object.defineProperty(exports, "DetailPanel", { enumerable: true, get: function () { return detail_panel_1.DetailPanel; } });
+var empty_state_1 = require("./empty-state");
+Object.defineProperty(exports, "EmptyState", { enumerable: true, get: function () { return empty_state_1.EmptyState; } });
+var number_input_1 = require("./number-input");
+Object.defineProperty(exports, "NumberInput", { enumerable: true, get: function () { return number_input_1.NumberInput; } });
+var search_input_1 = require("./search-input");
+Object.defineProperty(exports, "SearchInput", { enumerable: true, get: function () { return search_input_1.SearchInput; } });
+var stat_card_1 = require("./stat-card");
+Object.defineProperty(exports, "StatCard", { enumerable: true, get: function () { return stat_card_1.StatCard; } });
+var status_badge_1 = require("./status-badge");
+Object.defineProperty(exports, "DEFAULT_STATUS_VARIANTS", { enumerable: true, get: function () { return status_badge_1.DEFAULT_STATUS_VARIANTS; } });
+Object.defineProperty(exports, "StatusBadge", { enumerable: true, get: function () { return status_badge_1.StatusBadge; } });
+var virtualized_table_1 = require("./virtualized-table");
+Object.defineProperty(exports, "VirtualizedTable", { enumerable: true, get: function () { return virtualized_table_1.VirtualizedTable; } });
+var use_is_mobile_1 = require("./use-is-mobile");
+Object.defineProperty(exports, "useIsMobile", { enumerable: true, get: function () { return use_is_mobile_1.useIsMobile; } });