@lerianstudio/sindarian-ui 1.2.0-beta.13 → 1.2.0-beta.14

package/dist/esm/enterprise/stat-card/index.d.ts

@@ -0,0 +1,43 @@
+/**
+ * StatCard — a single headline-figure cell of the console.
+ *
+ * A `LedgerPanel` holding a recessive `SectionLabel`, the dominant mono
+ * `Figure`, an optional delta line, an optional inline trend, and optional
+ * secondary `BlotterRow` key/value rows. Drop StatCards into a `LedgerSheet` so
+ * they read as connected hairline-seamed panels rather than floating cards.
+ *
+ *   <StatCard label="Match rate" value="98.4%" delta="+0.6 pts" tone="success" />
+ *   <StatCard label="In flight" value="R$ 129,004" trend={series} trendKey="v" />
+ *
+ * The `tone` escalates the value + delta color to a semantic theme token.
+ *
+ * NOTE (sindarian-x port): the legacy StatCard drew its trend with the
+ * recharts-backed Sparkline. That component is outside the port census, so the
+ * trend here is a dependency-free inline SVG; everything else composes the same
+ * ledger grammar the legacy card did.
+ */
+import type { ReactNode } from 'react';
+export type StatCardTone = 'default' | 'success' | 'warning' | 'destructive';
+export type StatCardRow = {
+    label: ReactNode;
+    value: ReactNode;
+};
+export type StatCardProps = {
+    /** Recessive uppercase heading. */
+    label: string;
+    /** The dominant headline value — rendered in the hero mono figure. */
+    value: ReactNode;
+    /** Optional delta line below the value (e.g. `+0.6 pts`, `-3`). Inherits the tone color. */
+    delta?: ReactNode;
+    /** Semantic escalation for the value + delta color. */
+    tone?: StatCardTone;
+    /** Optional trend series for the inline sparkline. */
+    trend?: ReadonlyArray<Record<string, string | number | null>>;
+    /** Key in each `trend` datum to plot. Defaults to `value`. */
+    trendKey?: string;
+    /** Optional secondary key/value rows. */
+    rows?: StatCardRow[];
+    className?: string;
+};
+export declare function StatCard({ label, value, delta, tone, trend, trendKey, rows, className }: StatCardProps): import("react").JSX.Element;
+//# sourceMappingURL=index.d.ts.map

package/dist/esm/enterprise/stat-card/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/enterprise/stat-card/index.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;GAiBG;AACH,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAQtC,MAAM,MAAM,YAAY,GAAG,SAAS,GAAG,SAAS,GAAG,SAAS,GAAG,aAAa,CAAA;AAoB5E,MAAM,MAAM,WAAW,GAAG;IACxB,KAAK,EAAE,SAAS,CAAA;IAChB,KAAK,EAAE,SAAS,CAAA;CACjB,CAAA;AAED,MAAM,MAAM,aAAa,GAAG;IAC1B,mCAAmC;IACnC,KAAK,EAAE,MAAM,CAAA;IACb,sEAAsE;IACtE,KAAK,EAAE,SAAS,CAAA;IAChB,4FAA4F;IAC5F,KAAK,CAAC,EAAE,SAAS,CAAA;IACjB,uDAAuD;IACvD,IAAI,CAAC,EAAE,YAAY,CAAA;IACnB,sDAAsD;IACtD,KAAK,CAAC,EAAE,aAAa,CAAC,MAAM,CAAC,MAAM,EAAE,MAAM,GAAG,MAAM,GAAG,IAAI,CAAC,CAAC,CAAA;IAC7D,8DAA8D;IAC9D,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,yCAAyC;IACzC,IAAI,CAAC,EAAE,WAAW,EAAE,CAAA;IACpB,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB,CAAA;AAwED,wBAAgB,QAAQ,CAAC,EACvB,KAAK,EACL,KAAK,EACL,KAAK,EACL,IAAgB,EAChB,KAAK,EACL,QAAkB,EAClB,IAAI,EACJ,SAAS,EACV,EAAE,aAAa,+BAgCf"}

package/dist/esm/enterprise/stat-card/index.js

@@ -0,0 +1,64 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Blotter, BlotterRow } from '../../domain/blotter/index.js';
+import { Figure } from '../../domain/figure/index.js';
+import { LedgerPanel } from '../../domain/ledger-sheet/index.js';
+import { SectionLabel } from '../../domain/section-label/index.js';
+import { cn } from '../../lib/utils.js';
+/** Value/delta color per tone. `default` keeps the high-contrast foreground;
+ *  the rest escalate to a semantic theme token that tracks light/dark. */
+const TONE_VALUE = {
+    default: 'text-foreground',
+    success: 'text-system-success-text',
+    warning: 'text-system-alert-text',
+    destructive: 'text-destructive'
+};
+/** Trend stroke color per tone. Resolved through the `--color-*` wrappers (the
+ *  raw `--chart-N` tokens are bare HSL triples, not usable colors). */
+const TONE_TREND = {
+    default: 'var(--color-chart-1)',
+    success: 'var(--color-system-success)',
+    warning: 'var(--color-system-alert)',
+    destructive: 'var(--color-destructive)'
+};
+const TREND_VIEWBOX_WIDTH = 100;
+const TREND_VIEWBOX_HEIGHT = 40;
+/**
+ * Chrome-less inline trend: no axes, grid, legend or tooltip. Decorative by
+ * construction (`aria-hidden`) — the figure above it carries the meaning.
+ * Renders nothing when fewer than two points are plottable.
+ */
+function TrendSpark({ data, dataKey, color }) {
+    // Drop absent samples BEFORE coercing: Number(null) and Number('') are both
+    // 0, which would draw a phantom dip to the floor where the series simply has
+    // no reading.
+    const points = [];
+    for (const row of data) {
+        const raw = row[dataKey];
+        if (raw === null || raw === undefined || raw === '')
+            continue;
+        const n = Number(raw);
+        if (Number.isFinite(n))
+            points.push(n);
+    }
+    if (points.length < 2)
+        return null;
+    const min = Math.min(...points);
+    const max = Math.max(...points);
+    // A flat series has zero span; pin it to the vertical midline instead of
+    // dividing by zero.
+    const span = max - min;
+    const stepX = TREND_VIEWBOX_WIDTH / (points.length - 1);
+    const coords = points.map((n, i) => {
+        const x = i * stepX;
+        const y = span === 0
+            ? TREND_VIEWBOX_HEIGHT / 2
+            : TREND_VIEWBOX_HEIGHT - ((n - min) / span) * TREND_VIEWBOX_HEIGHT;
+        return `${x.toFixed(2)},${y.toFixed(2)}`;
+    });
+    return (_jsxs("svg", { "aria-hidden": true, role: "presentation", viewBox: `0 0 ${TREND_VIEWBOX_WIDTH} ${TREND_VIEWBOX_HEIGHT}`, preserveAspectRatio: "none", className: "h-10 w-full", children: [_jsx("polygon", { points: `0,${TREND_VIEWBOX_HEIGHT} ${coords.join(' ')} ${TREND_VIEWBOX_WIDTH},${TREND_VIEWBOX_HEIGHT}`, fill: color, fillOpacity: 0.15 }), _jsx("polyline", { points: coords.join(' '), fill: "none", stroke: color, strokeWidth: 1.75, vectorEffect: "non-scaling-stroke" })] }));
+}
+export function StatCard({ label, value, delta, tone = 'default', trend, trendKey = 'value', rows, className }) {
+    const hasTrend = trend !== undefined && trend.length > 0;
+    const hasRows = rows !== undefined && rows.length > 0;
+    return (_jsxs(LedgerPanel, { "data-tone": tone, className: className, children: [_jsx(SectionLabel, { children: label }), _jsxs("div", { className: "space-y-1", children: [_jsx(Figure, { size: "hero", className: cn('block', TONE_VALUE[tone]), children: value }), delta !== undefined ? (_jsx("p", { className: cn('font-mono text-xs tabular-nums', TONE_VALUE[tone]), children: delta })) : null] }), hasTrend ? (_jsx(TrendSpark, { data: trend, dataKey: trendKey, color: TONE_TREND[tone] })) : null, hasRows ? (_jsx(Blotter, { className: "mt-auto", children: rows.map((row, i) => (_jsx(BlotterRow, { label: row.label, value: row.value }, i))) })) : null] }));
+}

package/dist/esm/enterprise/status-badge/index.d.ts

@@ -0,0 +1,31 @@
+import { type BadgeProps } from '../../components/ui/badge/index.js';
+type BadgeVariant = NonNullable<BadgeProps['variant']>;
+/**
+ * Generic lifecycle defaults — extend per-app via the `variantMap` prop.
+ *
+ * The KEYS are the frozen legacy contract (apps merge their own domain statuses
+ * into this map). The VALUES are sindarian-ui Badge variants: sindarian-ui is
+ * senior, so the legacy `muted`/`warning` variants resolve to sindarian-ui's
+ * `inactive`/`alert`.
+ */
+export declare const DEFAULT_STATUS_VARIANTS: Record<string, BadgeVariant>;
+export type StatusBadgeProps = {
+    /** Raw status/severity value (case-insensitive). */
+    status: string | null | undefined;
+    /** Override the displayed label; defaults to a humanized form. */
+    label?: string;
+    /** Shallow-merged over DEFAULT_STATUS_VARIANTS to add/override mappings. */
+    variantMap?: Record<string, BadgeVariant>;
+    /**
+     * Render the non-color severity cue: a leading glyph + an sr-only severity
+     * word, so the badge does not carry meaning by tint alone (WCAG 1.4.1).
+     * Opt-in; defaults to false to keep existing color-only usage unchanged.
+     */
+    withIcon?: boolean;
+    /** Label shown when `status` is empty. */
+    unknownLabel?: string;
+    className?: string;
+};
+export declare function StatusBadge({ status, label, variantMap, withIcon, unknownLabel, className }: StatusBadgeProps): import("react").JSX.Element;
+export {};
+//# sourceMappingURL=index.d.ts.map

package/dist/esm/enterprise/status-badge/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/enterprise/status-badge/index.tsx"],"names":[],"mappings":"AAsBA,OAAO,EAAS,KAAK,UAAU,EAAE,MAAM,uBAAuB,CAAA;AAG9D,KAAK,YAAY,GAAG,WAAW,CAAC,UAAU,CAAC,SAAS,CAAC,CAAC,CAAA;AAEtD;;;;;;;GAOG;AACH,eAAO,MAAM,uBAAuB,EAAE,MAAM,CAAC,MAAM,EAAE,YAAY,CA6BhE,CAAA;AAqDD,MAAM,MAAM,gBAAgB,GAAG;IAC7B,oDAAoD;IACpD,MAAM,EAAE,MAAM,GAAG,IAAI,GAAG,SAAS,CAAA;IACjC,kEAAkE;IAClE,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,4EAA4E;IAC5E,UAAU,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,YAAY,CAAC,CAAA;IACzC;;;;OAIG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,0CAA0C;IAC1C,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB,CAAA;AAED,wBAAgB,WAAW,CAAC,EAC1B,MAAM,EACN,KAAK,EACL,UAAU,EACV,QAAgB,EAChB,YAAwB,EACxB,SAAS,EACV,EAAE,gBAAgB,+BA6BlB"}

package/dist/esm/enterprise/status-badge/index.js

@@ -0,0 +1,116 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+/**
+ * StatusBadge maps a status/severity string to a Badge variant and a humanized
+ * label. Unknown values fall back to a neutral "outline" badge with a
+ * title-cased label, so new server enum values never render raw or crash.
+ *
+ * The variant map is injectable (`variantMap`) and shallow-merges over a
+ * generic lifecycle default, so apps extend it with their own domain statuses
+ * without forking the component.
+ *
+ * INVARIANT (WCAG 1.4.1): the bare badge is color-only — the variant tint is the
+ * sole carrier of severity. That is a non-color-cue failure for a severity badge
+ * (a CRITICAL risk band must read as critical in grayscale and to a color-blind
+ * reader). `withIcon` opts the badge into the non-color canon: a leading
+ * severity GLYPH plus an sr-only severity word, with the tint as reinforcement
+ * only. It is opt-in so existing color-only usage is unaffected.
+ *
+ * Pure display: no directive, no interactivity. A leading lucide glyph is
+ * server-safe, so the component stays RSC-safe for the consuming Next.js app.
+ */
+import { Check, Minus, OctagonX, TriangleAlert } from 'lucide-react';
+import { Badge } from '../../components/ui/badge/index.js';
+import { cn } from '../../lib/utils.js';
+/**
+ * Generic lifecycle defaults — extend per-app via the `variantMap` prop.
+ *
+ * The KEYS are the frozen legacy contract (apps merge their own domain statuses
+ * into this map). The VALUES are sindarian-ui Badge variants: sindarian-ui is
+ * senior, so the legacy `muted`/`warning` variants resolve to sindarian-ui's
+ * `inactive`/`alert`.
+ */
+export const DEFAULT_STATUS_VARIANTS = {
+    DRAFT: 'inactive',
+    ACTIVE: 'success',
+    ENABLED: 'success',
+    INACTIVE: 'inactive',
+    DISABLED: 'inactive',
+    PAUSED: 'alert',
+    ARCHIVED: 'inactive',
+    QUEUED: 'secondary',
+    PENDING: 'alert',
+    PROCESSING: 'alert',
+    RUNNING: 'alert',
+    COMPLETE: 'success',
+    COMPLETED: 'success',
+    SUCCEEDED: 'success',
+    SUCCESS: 'success',
+    FAILED: 'destructive',
+    ERROR: 'destructive',
+    CANCELED: 'inactive',
+    CANCELLED: 'inactive',
+    EXPIRED: 'inactive',
+    OPEN: 'alert',
+    RESOLVED: 'success',
+    REJECTED: 'destructive',
+    CONFIRMED: 'success',
+    LOW: 'inactive',
+    MEDIUM: 'secondary',
+    HIGH: 'alert',
+    CRITICAL: 'destructive'
+};
+/**
+ * Variant → non-color severity cue: a distinct glyph + an sr-only severity word.
+ * This is the load-bearing cue when `withIcon` is set; the Badge's own tint only
+ * reinforces it, so severity survives grayscale and color-vision deficiency.
+ *
+ * A constant lookup keyed on the Badge variant — the variant already encodes the
+ * severity, so the glyph follows the variant rather than re-deriving severity
+ * from the raw status. `secondary` is a neutral bucket (e.g. MEDIUM/QUEUED) and,
+ * like `inactive`, carries the calm dash glyph. The pure color-carrier variants
+ * and the unknown `outline` fallback have no severity semantics, so they render
+ * no glyph.
+ */
+const SEVERITY_CUE = {
+    success: { Icon: Check, word: 'OK' },
+    alert: { Icon: TriangleAlert, word: 'Warning' },
+    destructive: { Icon: OctagonX, word: 'Critical' },
+    inactive: { Icon: Minus, word: 'Neutral' },
+    secondary: { Icon: Minus, word: 'Neutral' }
+};
+/**
+ * Merge a caller's map over the defaults, upper-casing its KEYS.
+ *
+ * Lookup has always upper-cased the incoming `status`, but sindarian-x merged
+ * `variantMap` verbatim — so `{ reconciled: 'success' }` could never match and
+ * fell through to the neutral `outline` badge, silently. That was an unstated
+ * requirement rather than a design choice: lender's own call sites work around
+ * it by hand (`variantMap={{ [reason.toUpperCase()]: 'destructive' }}`).
+ * Normalising here is strictly additive — already-uppercase keys are unchanged.
+ */
+function mergeVariants(variantMap) {
+    if (!variantMap)
+        return DEFAULT_STATUS_VARIANTS;
+    const merged = { ...DEFAULT_STATUS_VARIANTS };
+    for (const [key, variant] of Object.entries(variantMap)) {
+        merged[key.toUpperCase()] = variant;
+    }
+    return merged;
+}
+function humanize(value) {
+    return value
+        .toLowerCase()
+        .split(/[_\s]+/)
+        .map((w) => (w[0] ? w[0].toUpperCase() + w.slice(1) : w))
+        .join(' ');
+}
+export function StatusBadge({ status, label, variantMap, withIcon = false, unknownLabel = 'Unknown', className }) {
+    if (!status) {
+        return (_jsx(Badge, { variant: "outline", className: cn('text-muted-foreground', className), children: label ?? unknownLabel }));
+    }
+    const variant = mergeVariants(variantMap)[status.toUpperCase()] ?? 'outline';
+    // The glyph follows the resolved variant; an unknown/non-severity variant has
+    // no cue, so the badge gracefully renders label-only even with withIcon set.
+    const cue = withIcon ? SEVERITY_CUE[variant] : undefined;
+    return (_jsxs(Badge, { variant: variant, className: cn('gap-1', className), children: [cue ? (_jsxs(_Fragment, { children: [_jsx(cue.Icon, { "aria-hidden": true, className: "size-3.5 shrink-0" }), _jsxs("span", { className: "sr-only", children: [cue.word, ": "] })] })) : null, label ?? humanize(status)] }));
+}

package/dist/esm/enterprise/use-is-mobile.d.ts

@@ -0,0 +1,11 @@
+/**
+ * True while the viewport is narrower than the 768px mobile breakpoint.
+ *
+ * Always false on the FIRST render, server and client alike, so a narrow
+ * viewport can never produce a hydration mismatch; the effect corrects it
+ * before paint. Every reading comes from the media query itself rather than a
+ * mix of `matchMedia` and `window.innerWidth`, so the initial value and the
+ * change events can never disagree at the breakpoint boundary.
+ */
+export declare function useIsMobile(): boolean;
+//# sourceMappingURL=use-is-mobile.d.ts.map

package/dist/esm/enterprise/use-is-mobile.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-is-mobile.d.ts","sourceRoot":"","sources":["../../../src/enterprise/use-is-mobile.ts"],"names":[],"mappings":"AAMA;;;;;;;;GAQG;AACH,wBAAgB,WAAW,YAY1B"}

package/dist/esm/enterprise/use-is-mobile.js

@@ -0,0 +1,23 @@
+'use client';
+import * as React from 'react';
+const MOBILE_BREAKPOINT = 768;
+/**
+ * True while the viewport is narrower than the 768px mobile breakpoint.
+ *
+ * Always false on the FIRST render, server and client alike, so a narrow
+ * viewport can never produce a hydration mismatch; the effect corrects it
+ * before paint. Every reading comes from the media query itself rather than a
+ * mix of `matchMedia` and `window.innerWidth`, so the initial value and the
+ * change events can never disagree at the breakpoint boundary.
+ */
+export function useIsMobile() {
+    const [isMobile, setIsMobile] = React.useState(false);
+    React.useEffect(() => {
+        const mql = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`);
+        const onChange = () => setIsMobile(mql.matches);
+        onChange();
+        mql.addEventListener('change', onChange);
+        return () => mql.removeEventListener('change', onChange);
+    }, []);
+    return isMobile;
+}

package/dist/esm/enterprise/virtualized-table/index.d.ts

@@ -0,0 +1,26 @@
+import { type ColumnDef } from '@tanstack/react-table';
+export type VirtualizedTableProps<TData> = {
+    /** Same shape as DataTable: standard TanStack `ColumnDef<T>`. */
+    columns: ColumnDef<TData, unknown>[];
+    /** The full dataset, already in memory. Only the visible window renders. */
+    data: TData[];
+    /**
+     * Row height in px, fed to the virtualizer's `estimateSize`. Rows are
+     * rendered at this FIXED height — content taller than `rowHeight` will clip
+     * (cells use `truncate`). Use only for flat, single-line rows; this is not a
+     * variable-height table. Defaults to 40.
+     */
+    rowHeight?: number;
+    /**
+     * Max height of the scroll viewport (the inner overflow container, NOT the
+     * outer wrapper). A `number` is treated as px; a `string` is used verbatim
+     * (e.g. `'60vh'`). Defaults to `480` → `480px`.
+     */
+    maxHeight?: number | string;
+    /** Accessible name announced for the viewport while it is scrollable. */
+    scrollAreaLabel?: string;
+    /** Applied to the outer wrapper (the scroll container's parent). */
+    className?: string;
+};
+export declare function VirtualizedTable<TData>({ columns, data, rowHeight, maxHeight, scrollAreaLabel, className }: VirtualizedTableProps<TData>): import("react").JSX.Element;
+//# sourceMappingURL=index.d.ts.map

package/dist/esm/enterprise/virtualized-table/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/enterprise/virtualized-table/index.tsx"],"names":[],"mappings":"AA+BA,OAAO,EAIL,KAAK,SAAS,EACf,MAAM,uBAAuB,CAAA;AAK9B,MAAM,MAAM,qBAAqB,CAAC,KAAK,IAAI;IACzC,iEAAiE;IACjE,OAAO,EAAE,SAAS,CAAC,KAAK,EAAE,OAAO,CAAC,EAAE,CAAA;IACpC,4EAA4E;IAC5E,IAAI,EAAE,KAAK,EAAE,CAAA;IACb;;;;;OAKG;IACH,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB;;;;OAIG;IACH,SAAS,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;IAC3B,yEAAyE;IACzE,eAAe,CAAC,EAAE,MAAM,CAAA;IACxB,oEAAoE;IACpE,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB,CAAA;AAKD,wBAAgB,gBAAgB,CAAC,KAAK,EAAE,EACtC,OAAO,EACP,IAAI,EACJ,SAAc,EACd,SAAe,EACf,eAAyC,EACzC,SAAS,EACV,EAAE,qBAAqB,CAAC,KAAK,CAAC,+BAiM9B"}

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

@@ -0,0 +1,111 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * VirtualizedTable — a windowed table for very large, flat datasets.
+ *
+ * Mirrors DataTable's column/data API (standard TanStack `ColumnDef<T>`, cells
+ * receive the row's `original`), so screens reuse the exact same column
+ * definitions. The difference is the rendering strategy: where DataTable
+ * renders every row, VirtualizedTable renders only the rows inside (and just
+ * past) the scroll viewport via `@tanstack/react-virtual`. Tens of thousands of
+ * rows stay scroll-smooth because the DOM only ever holds the visible window.
+ *
+ * Layout is div-based (role="table"/"row"/"cell"), not a real `<table>`:
+ * absolute positioning by `virtualItem.start` is incompatible with table
+ * layout, so a windowed table cannot use `<tbody>`. The header is a sibling
+ * above the scroll region: it stays put by layout (it simply sits above an
+ * overflow box), not via `position: sticky`. Inside the scroll container an
+ * inner spacer sized to `getTotalSize()` reserves the full scroll height, and
+ * each virtual row is absolutely positioned within that spacer.
+ *
+ * Rows are fixed-height (= `rowHeight`): cell content taller than `rowHeight`
+ * will clip — cells use `truncate`. This component is for flat, single-line
+ * datasets only; it does NOT measure rows, so it is not suitable for
+ * variable-height content.
+ *
+ * This is deliberately leaner than DataTable: no pagination, selection,
+ * keyboard nav, loading or empty affordances — it is the right tool only when
+ * the whole dataset is already in memory and the row count is the problem.
+ * For server-paged lists, reach for DataTable + CursorPager instead.
+ */
+import { useEffect, useRef, useState } from 'react';
+import { flexRender, getCoreRowModel, useReactTable } from '@tanstack/react-table';
+import { useVirtualizer } from '@tanstack/react-virtual';
+import { cn } from '../../lib/utils.js';
+/** Rows rendered just outside the viewport to keep fast scrolls smooth. */
+const OVERSCAN = 8;
+export function VirtualizedTable({ columns, data, rowHeight = 40, maxHeight = 480, scrollAreaLabel = 'Scrollable table rows', className }) {
+    const scrollRef = useRef(null);
+    const [isScrollable, setIsScrollable] = useState(false);
+    // A number is px; a string is used verbatim (e.g. '60vh').
+    const viewportMaxHeight = typeof maxHeight === 'number' ? `${maxHeight}px` : maxHeight;
+    const table = useReactTable({
+        data,
+        columns,
+        getCoreRowModel: getCoreRowModel()
+    });
+    const rows = table.getRowModel().rows;
+    // Grouped columns (a ColumnDef with nested `columns`) render one header row
+    // per depth level, so the header is not always a single row.
+    const headerGroups = table.getHeaderGroups();
+    const headerRowCount = headerGroups.length;
+    // The table's real column geometry is its LEAF columns: a grouped ColumnDef
+    // contributes one spanning header cell but no column of its own, so counting
+    // top-level defs both under-reports aria-colcount and misplaces every
+    // aria-colindex to its right.
+    const leafColumns = table.getVisibleLeafColumns();
+    const leafPosition = new Map(leafColumns.map((column, i) => [column.id, i]));
+    const virtualizer = useVirtualizer({
+        count: rows.length,
+        getScrollElement: () => scrollRef.current,
+        estimateSize: () => rowHeight,
+        overscan: OVERSCAN
+    });
+    const virtualRows = virtualizer.getVirtualItems();
+    const totalSize = virtualizer.getTotalSize();
+    // `estimateSize` is read through a closure the virtualizer caches per item, so
+    // changing rowHeight leaves every already-measured row at its old size until
+    // the cache is dropped explicitly.
+    useEffect(() => {
+        virtualizer.measure();
+    }, [rowHeight, virtualizer]);
+    useEffect(() => {
+        const viewport = scrollRef.current;
+        if (!viewport)
+            return;
+        const updateScrollability = () => {
+            const nextIsScrollable = viewport.scrollHeight > viewport.clientHeight ||
+                viewport.scrollWidth > viewport.clientWidth;
+            setIsScrollable((current) => current === nextIsScrollable ? current : nextIsScrollable);
+        };
+        updateScrollability();
+        if (typeof ResizeObserver === 'undefined')
+            return;
+        const observer = new ResizeObserver(updateScrollability);
+        observer.observe(viewport);
+        const content = viewport.firstElementChild;
+        if (content)
+            observer.observe(content);
+        return () => observer.disconnect();
+    }, [totalSize, viewportMaxHeight]);
+    return (_jsx("div", { className: cn('border-border bg-card text-card-foreground rounded-lg border', className), children: _jsxs("div", { role: "table", "aria-rowcount": rows.length + headerRowCount, "aria-colcount": leafColumns.length, children: [_jsx("div", { role: "rowgroup", className: "bg-card z-10", children: headerGroups.map((headerGroup, groupIndex) => (_jsx("div", { role: "row", "aria-rowindex": groupIndex + 1, className: "border-border flex border-b", children: headerGroup.headers.map((header) => {
+                            // Anchor the cell on its leftmost leaf column, so a spanning
+                            // group reports the column it actually starts at rather than
+                            // its position among its siblings.
+                            const firstLeaf = header.column.getLeafColumns()[0];
+                            const start = leafPosition.get(firstLeaf?.id ?? header.column.id);
+                            return (_jsx("div", { role: "columnheader", "aria-colindex": (start ?? 0) + 1, "aria-colspan": header.colSpan > 1 ? header.colSpan : undefined, style: { flex: `${header.colSpan} 1 0%` }, 
+                                // Header height is independent of rowHeight: pinning it to a
+                                // small rowHeight (32) clipped the uppercase label against its
+                                // own padding. Padding sizes it; min-h keeps a stable rule.
+                                className: "text-muted-foreground min-h-10 px-4 py-2.5 text-left text-xs font-medium tracking-wide uppercase", children: header.isPlaceholder
+                                    ? null
+                                    : flexRender(header.column.columnDef.header, header.getContext()) }, header.id));
+                        }) }, headerGroup.id))) }), _jsx("div", { ref: scrollRef, role: "rowgroup", "data-testid": "virtualized-table-viewport", "aria-label": isScrollable ? scrollAreaLabel : undefined, tabIndex: isScrollable ? 0 : undefined, className: "focus-visible:ring-ring relative overflow-auto focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-none", style: { maxHeight: viewportMaxHeight }, children: _jsx("div", { role: "presentation", className: "relative w-full", style: { height: totalSize }, children: virtualRows.map((virtualItem) => {
+                            const row = rows[virtualItem.index];
+                            return (_jsx("div", { role: "row", "aria-rowindex": virtualItem.index + headerRowCount + 1, "data-index": virtualItem.index, className: "border-border absolute left-0 flex w-full items-center border-b text-sm", style: {
+                                    height: virtualItem.size,
+                                    transform: `translateY(${virtualItem.start}px)`
+                                }, children: row.getVisibleCells().map((cell, i) => (_jsx("div", { role: "cell", "aria-colindex": i + 1, className: "flex-1 truncate px-4", children: flexRender(cell.column.columnDef.cell, cell.getContext()) }, cell.id))) }, row.id));
+                        }) }) })] }) }));
+}

package/dist/esm/hooks/use-click-away.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+/**
+ * Detects clicks outside of a specified component and triggers a callback function.
+ *
+ * @param ref Component reference
+ * @param onClickAway Callback function to be called when a click is detected outside the component
+ */
+export declare const useClickAway: (ref: React.RefObject<HTMLElement | null>, onClickAway: (event: MouseEvent | TouchEvent) => void) => void;
+//# sourceMappingURL=use-click-away.d.ts.map

package/dist/esm/hooks/use-click-away.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-click-away.d.ts","sourceRoot":"","sources":["../../../src/hooks/use-click-away.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB;;;;;GAKG;AACH,eAAO,MAAM,YAAY,GACvB,KAAK,KAAK,CAAC,SAAS,CAAC,WAAW,GAAG,IAAI,CAAC,EACxC,aAAa,CAAC,KAAK,EAAE,UAAU,GAAG,UAAU,KAAK,IAAI,SAoBtD,CAAA"}

package/dist/esm/hooks/use-click-away.js

@@ -0,0 +1,22 @@
+import React from 'react';
+/**
+ * Detects clicks outside of a specified component and triggers a callback function.
+ *
+ * @param ref Component reference
+ * @param onClickAway Callback function to be called when a click is detected outside the component
+ */
+export const useClickAway = (ref, onClickAway) => {
+    const handleClick = React.useCallback((event) => {
+        if (ref.current && !ref.current.contains(event.target)) {
+            onClickAway(event);
+        }
+    }, [ref, onClickAway]);
+    React.useEffect(() => {
+        document.addEventListener('mousedown', handleClick);
+        document.addEventListener('touchend', handleClick);
+        return () => {
+            document.removeEventListener('mousedown', handleClick);
+            document.removeEventListener('touchend', handleClick);
+        };
+    }, [ref, handleClick]);
+};

package/dist/esm/hooks/use-pagination.d.ts

@@ -0,0 +1,13 @@
+export type UsePaginationProps = {
+    total?: number;
+};
+export declare function usePagination({ total }: UsePaginationProps): {
+    page: number;
+    limit: number;
+    setLimit: (limit: number) => void;
+    setPage: (page: number) => void;
+    nextPage: () => void;
+    previousPage: () => void;
+};
+export type UsePaginationReturn = ReturnType<typeof usePagination>;
+//# sourceMappingURL=use-pagination.d.ts.map

package/dist/esm/hooks/use-pagination.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-pagination.d.ts","sourceRoot":"","sources":["../../../src/hooks/use-pagination.ts"],"names":[],"mappings":"AAEA,MAAM,MAAM,kBAAkB,GAAG;IAC/B,KAAK,CAAC,EAAE,MAAM,CAAA;CACf,CAAA;AAED,wBAAgB,aAAa,CAAC,EAAE,KAAS,EAAE,EAAE,kBAAkB;;;sBA8BpC,MAAM;oBARR,MAAM;;;EAwB9B;AAED,MAAM,MAAM,mBAAmB,GAAG,UAAU,CAAC,OAAO,aAAa,CAAC,CAAA"}

package/dist/esm/hooks/use-pagination.js

@@ -0,0 +1,38 @@
+import { useState } from 'react';
+export function usePagination({ total = 1 }) {
+    const [page, _setPage] = useState(1);
+    const [limit, _setLimit] = useState(10);
+    const totalPages = Math.ceil(total / limit);
+    const nextPage = () => {
+        if (page + 1 > totalPages) {
+            return;
+        }
+        _setPage((page) => page + 1);
+    };
+    const previousPage = () => {
+        if (page - 1 < 1) {
+            return;
+        }
+        _setPage((page) => page - 1);
+    };
+    const setPage = (page) => {
+        if (page < 1 || page > totalPages) {
+            return;
+        }
+        _setPage(page);
+    };
+    const setLimit = (limit) => {
+        if (limit < 1) {
+            return;
+        }
+        _setLimit(limit);
+    };
+    return {
+        page,
+        limit,
+        setLimit,
+        setPage,
+        nextPage,
+        previousPage
+    };
+}

package/dist/esm/hooks/use-stepper.d.ts

@@ -0,0 +1,11 @@
+export type UseStepperProps = {
+    defaultStep?: number;
+    maxSteps?: number;
+};
+export declare const useStepper: ({ defaultStep, maxSteps }: UseStepperProps) => {
+    step: number;
+    setStep: import("react").Dispatch<import("react").SetStateAction<number>>;
+    handleNext: () => void;
+    handlePrevious: () => void;
+};
+//# sourceMappingURL=use-stepper.d.ts.map

package/dist/esm/hooks/use-stepper.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-stepper.d.ts","sourceRoot":"","sources":["../../../src/hooks/use-stepper.ts"],"names":[],"mappings":"AAEA,MAAM,MAAM,eAAe,GAAG;IAC5B,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,QAAQ,CAAC,EAAE,MAAM,CAAA;CAClB,CAAA;AAED,eAAO,MAAM,UAAU,GAAI,2BAGxB,eAAe;;;;;CAyBjB,CAAA"}

package/dist/esm/hooks/use-stepper.js

@@ -0,0 +1,22 @@
+import { useState } from 'react';
+export const useStepper = ({ defaultStep = 0, maxSteps = 2 }) => {
+    const [step, setStep] = useState(defaultStep);
+    const handleNext = () => {
+        if (maxSteps && step >= maxSteps - 1) {
+            return;
+        }
+        setStep((prev) => prev + 1);
+    };
+    const handlePrevious = () => {
+        if (step <= 0) {
+            return;
+        }
+        setStep((prev) => prev - 1);
+    };
+    return {
+        step,
+        setStep,
+        handleNext,
+        handlePrevious
+    };
+};

package/dist/esm/hooks/use-time.d.ts

@@ -0,0 +1,6 @@
+export type UseTimeProps = {
+    interval?: number;
+    onUpdate?: (time: Date) => void;
+};
+export declare const useTime: ({ interval, onUpdate }: UseTimeProps) => Date;
+//# sourceMappingURL=use-time.d.ts.map

package/dist/esm/hooks/use-time.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-time.d.ts","sourceRoot":"","sources":["../../../src/hooks/use-time.ts"],"names":[],"mappings":"AAEA,MAAM,MAAM,YAAY,GAAG;IACzB,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,IAAI,KAAK,IAAI,CAAA;CAChC,CAAA;AAED,eAAO,MAAM,OAAO,GAAI,wBAA+B,YAAY,SAclE,CAAA"}

package/dist/esm/hooks/use-time.js

@@ -0,0 +1,13 @@
+import React from 'react';
+export const useTime = ({ interval = 1000, onUpdate }) => {
+    const [time, setTime] = React.useState(new Date());
+    React.useEffect(() => {
+        const timer = setInterval(() => {
+            const newTime = new Date();
+            setTime(newTime);
+            onUpdate?.(newTime);
+        }, interval);
+        return () => clearInterval(timer);
+    }, [interval, onUpdate]);
+    return time;
+};

package/dist/esm/hooks/use-toast.d.ts

@@ -0,0 +1,31 @@
+import type { ToastActionElement } from '../components/ui/toast/index.js';
+type ToastVariant = 'default' | 'success' | 'warning' | 'destructive';
+type ToasterToast = {
+    id: string | number;
+    title?: React.ReactNode;
+    description?: React.ReactNode;
+    variant?: ToastVariant;
+    action?: ToastActionElement;
+};
+type Toast = Omit<ToasterToast, 'id'>;
+declare function toast({ title, description, variant, ...rest }: Toast): {
+    id: string | number;
+    dismiss: () => string | number;
+    update: (props: Partial<ToasterToast>) => void;
+};
+/**
+ * Backward-compatible hook that wraps Sonner's toast API.
+ *
+ * Returns the same shape as the original Radix-based useToast:
+ * - `toast()` to create a toast
+ * - `dismiss()` to dismiss a toast by id (or all if no id)
+ * - `toasts` array (always empty -- Sonner manages its own state internally)
+ */
+declare function useToast(): {
+    toast: typeof toast;
+    dismiss: (toastId?: string | number) => void;
+    toasts: ToasterToast[];
+};
+export { useToast, toast };
+export type { ToasterToast, Toast, ToastVariant };
+//# sourceMappingURL=use-toast.d.ts.map