@lerianstudio/sindarian-ui 1.4.0-beta.3 → 1.4.0-beta.5

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

@@ -20,6 +20,18 @@ const jsx_runtime_1 = require("react/jsx-runtime");
  * `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
@@ -45,6 +57,7 @@ const skeleton_1 = require("../../components/ui/skeleton");
 const typography_1 = require("../../lib/typography");
 const utils_1 = require("../../lib/utils");
 const empty_state_1 = require("../empty-state");
+const column_size_1 = require("./column-size");
 const SELECTION_COLUMN_ID = '__select__';
 const CHECKBOX_CLASS = 'accent-primary block size-4';
 /** Right-aligned mono treatment for `meta: { numeric: true }` columns. */
@@ -89,6 +102,10 @@ function DataTable({ columns, data, loading = false, skeletonRows = 8, loadingLa
     const table = (0, react_table_1.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: column_size_1.UNSIZED_DEFAULT_COLUMN,
         getCoreRowModel: (0, react_table_1.getCoreRowModel)(),
         getRowId,
         enableRowSelection,
@@ -220,7 +237,10 @@ function DataTable({ columns, data, loading = false, skeletonRows = 8, loadingLa
                         ? '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)(typography_1.LABEL_VOICE_CLASS, headDensityClass, header.column.id === SELECTION_COLUMN_ID && 'w-10', headClassName), children: header.isPlaceholder
+                                return ((0, jsx_runtime_1.jsx)(table_1.TableHead, { align: numeric ? 'right' : undefined, 
+                                    // Only a column that DECLARED sizing gets an inline width;
+                                    // everything else keeps the auto table layout it has today.
+                                    style: (0, column_size_1.readPreferredColumnSize)(header.column), className: (0, utils_1.cn)(typography_1.LABEL_VOICE_CLASS, headDensityClass, header.column.id === SELECTION_COLUMN_ID && 'w-10', headClassName), 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, 
@@ -243,7 +263,7 @@ function DataTable({ columns, data, loading = false, skeletonRows = 8, loadingLa
                                 ? (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
+                                : undefined, children: row.getVisibleCells().map((cell) => ((0, jsx_runtime_1.jsx)(table_1.TableCell, { style: (0, column_size_1.readPreferredColumnSize)(cell.column), 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)))) }), footer ? (0, jsx_runtime_1.jsx)(table_1.TableFooter, { children: footer }) : null] })] }));
 }

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

@@ -21,6 +21,13 @@ export type DateRangePickerProps = {
     fromLabel: ReactNode;
     toLabel: ReactNode;
     invalid?: boolean;
+    /**
+     * Marks the range as mandatory. Renders the library's required marker: the
+     * literal ' *' appended to both labels, exactly as `FormLabel` does. It is
+     * deliberately NOT mirrored as `aria-required` on the triggers: ARIA does not
+     * allow that attribute on `role="button"`.
+     */
+    required?: boolean;
     /** Wired as aria-describedby on both triggers while `invalid` is set. */
     errorId?: string;
     /** Trigger placeholder when unset. */
@@ -32,6 +39,6 @@ export type DateRangePickerProps = {
     /** 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 declare function DateRangePicker({ value, onValueChange, fromId, toId, fromLabel, toLabel, invalid, required, 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

@@ -1 +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"}
+{"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;AASnD;;;;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;;;;;OAKG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,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,QAAgB,EAChB,OAAO,EACP,WAAwB,EACxB,SAA+B,EAC/B,UAAoB,EACpB,MAAa,EACd,EAAE,oBAAoB,+BA8HtB"}

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

@@ -6,7 +6,7 @@ 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
+ * 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
@@ -30,7 +30,6 @@ 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})/;
@@ -63,7 +62,7 @@ function toDayString(value) {
     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 }) {
+function DateRangePicker({ value, onValueChange, fromId, toId, fromLabel, toLabel, invalid = false, required = 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
@@ -82,11 +81,17 @@ function DateRangePicker({ value, onValueChange, fromId, toId, fromLabel, toLabe
             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');
+    const triggerClass = (0, utils_1.cn)(
+    // border-shadcn-400, 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-shadcn-400 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');
     // 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));
+    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.jsxs)(label_1.Label, { htmlFor: id, children: [label, required ? ' *' : ''] }), (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", 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/stat-card/index.d.ts

@@ -1,7 +1,7 @@
 /**
  * StatCard — a single headline-figure cell of the console.
  *
- * A `LedgerPanel` holding a recessive `SectionLabel`, the dominant mono
+ * A `LedgerPanel` holding a recessive `SectionLabel`, the dominant
  * `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.
@@ -23,9 +23,9 @@ export type StatCardRow = {
     value: ReactNode;
 };
 export type StatCardProps = {
-    /** Recessive uppercase heading. */
+    /** Recessive heading, rendered through `SectionLabel`'s quiet label voice. */
     label: string;
-    /** The dominant headline value — rendered in the hero mono figure. */
+    /** The dominant headline value — rendered in the hero figure. */
     value: ReactNode;
     /** Optional delta line below the value (e.g. `+0.6 pts`, `-3`). Inherits the tone color. */
     delta?: ReactNode;

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

@@ -1 +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"}
+{"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,8EAA8E;IAC9E,KAAK,EAAE,MAAM,CAAA;IACb,iEAAiE;IACjE,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/enterprise/stat-card/index.js

@@ -63,5 +63,5 @@ function TrendSpark({ data, dataKey, color }) {
 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 ((0, jsx_runtime_1.jsxs)(ledger_sheet_1.LedgerPanel, { "data-tone": tone, className: className, children: [(0, jsx_runtime_1.jsx)(section_label_1.SectionLabel, { children: label }), (0, jsx_runtime_1.jsxs)("div", { className: "space-y-1", children: [(0, jsx_runtime_1.jsx)(figure_1.Figure, { size: "hero", className: (0, utils_1.cn)('block', TONE_VALUE[tone]), children: value }), delta !== undefined ? ((0, jsx_runtime_1.jsx)("p", { className: (0, utils_1.cn)('font-mono text-xs tabular-nums', TONE_VALUE[tone]), children: delta })) : null] }), hasTrend ? ((0, jsx_runtime_1.jsx)(TrendSpark, { data: trend, dataKey: trendKey, color: TONE_TREND[tone] })) : null, hasRows ? ((0, jsx_runtime_1.jsx)(blotter_1.Blotter, { className: "mt-auto", children: rows.map((row, i) => ((0, jsx_runtime_1.jsx)(blotter_1.BlotterRow, { label: row.label, value: row.value }, i))) })) : null] }));
+    return ((0, jsx_runtime_1.jsxs)(ledger_sheet_1.LedgerPanel, { "data-tone": tone, className: className, children: [(0, jsx_runtime_1.jsx)(section_label_1.SectionLabel, { children: label }), (0, jsx_runtime_1.jsxs)("div", { className: "space-y-1", children: [(0, jsx_runtime_1.jsx)(figure_1.Figure, { size: "hero", className: (0, utils_1.cn)('block', TONE_VALUE[tone]), children: value }), delta !== undefined ? ((0, jsx_runtime_1.jsx)("p", { className: (0, utils_1.cn)('text-xs tabular-nums', TONE_VALUE[tone]), children: delta })) : null] }), hasTrend ? ((0, jsx_runtime_1.jsx)(TrendSpark, { data: trend, dataKey: trendKey, color: TONE_TREND[tone] })) : null, hasRows ? ((0, jsx_runtime_1.jsx)(blotter_1.Blotter, { className: "mt-auto", children: rows.map((row, i) => ((0, jsx_runtime_1.jsx)(blotter_1.BlotterRow, { label: row.label, value: row.value }, i))) })) : null] }));
 }

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

@@ -116,5 +116,5 @@ function StatusBadge({ status, label, variantMap, withIcon = false, unknownLabel
     // 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 ((0, jsx_runtime_1.jsxs)(badge_1.Badge, { variant: variant, className: (0, utils_1.cn)('gap-1', className), children: [cue ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(cue.Icon, { "aria-hidden": true, className: "size-3.5 shrink-0" }), (0, jsx_runtime_1.jsxs)("span", { className: "sr-only", children: [cue.word, ": "] })] })) : null, label ?? humanize(status)] }));
+    return ((0, jsx_runtime_1.jsxs)(badge_1.Badge, { variant: variant, className: className, children: [cue ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(cue.Icon, { "aria-hidden": true, className: "size-3.5 shrink-0" }), (0, jsx_runtime_1.jsxs)("span", { className: "sr-only", children: [cue.word, ": "] })] })) : null, label ?? humanize(status)] }));
 }

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

@@ -1,6 +1,16 @@
 import { type ColumnDef } from '@tanstack/react-table';
 export type VirtualizedTableProps<TData> = {
-    /** Same shape as DataTable: standard TanStack `ColumnDef<T>`. */
+    /**
+     * Same shape as DataTable: standard TanStack `ColumnDef<T>`. A column that
+     * declares none keeps its equal share of the row.
+     *
+     * Declared sizing does NOT mean the same thing in the kit's two table paths.
+     * Here, flex rows PIN all three: `size`, `minSize` and `maxSize` are honoured
+     * exactly as declared. DataTable renders real `<th>`/`<td>` under CSS auto
+     * table layout, where `size` is only a PREFERRED width, `minSize` a floor,
+     * and `maxSize` is ignored outright. A column that must not grow past a width
+     * belongs here.
+     */
     columns: ColumnDef<TData, unknown>[];
     /** The full dataset, already in memory. Only the visible window renders. */
     data: TData[];
@@ -21,6 +31,12 @@ export type VirtualizedTableProps<TData> = {
     scrollAreaLabel?: string;
     /** Applied to the outer wrapper (the scroll container's parent). */
     className?: string;
+    /**
+     * Extra classes merged onto every header cell, after the kit label voice —
+     * the same seam DataTable exposes, so a screen that switches between the two
+     * render paths quiets both column heads with one prop instead of one.
+     */
+    headClassName?: string;
 };
-export declare function VirtualizedTable<TData>({ columns, data, rowHeight, maxHeight, scrollAreaLabel, className }: VirtualizedTableProps<TData>): import("react").JSX.Element;
+export declare function VirtualizedTable<TData>({ columns, data, rowHeight, maxHeight, scrollAreaLabel, className, headClassName }: VirtualizedTableProps<TData>): import("react").JSX.Element;
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +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"}
+{"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;AAW9B,MAAM,MAAM,qBAAqB,CAAC,KAAK,IAAI;IACzC;;;;;;;;;;OAUG;IACH,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;IAClB;;;;OAIG;IACH,aAAa,CAAC,EAAE,MAAM,CAAA;CACvB,CAAA;AAKD,wBAAgB,gBAAgB,CAAC,KAAK,EAAE,EACtC,OAAO,EACP,IAAI,EACJ,SAAc,EACd,SAAe,EACf,eAAyC,EACzC,SAAS,EACT,aAAa,EACd,EAAE,qBAAqB,CAAC,KAAK,CAAC,+BAkO9B"}

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

@@ -34,10 +34,12 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const react_table_1 = require("@tanstack/react-table");
 const react_virtual_1 = require("@tanstack/react-virtual");
+const typography_1 = require("../../lib/typography");
 const utils_1 = require("../../lib/utils");
+const column_size_1 = require("../data-table/column-size");
 /** Rows rendered just outside the viewport to keep fast scrolls smooth. */
 const OVERSCAN = 8;
-function VirtualizedTable({ columns, data, rowHeight = 40, maxHeight = 480, scrollAreaLabel = 'Scrollable table rows', className }) {
+function VirtualizedTable({ columns, data, rowHeight = 40, maxHeight = 480, scrollAreaLabel = 'Scrollable table rows', className, headClassName }) {
     const scrollRef = (0, react_1.useRef)(null);
     const [isScrollable, setIsScrollable] = (0, react_1.useState)(false);
     // A number is px; a string is used verbatim (e.g. '60vh').
@@ -45,6 +47,10 @@ function VirtualizedTable({ columns, data, rowHeight = 40, maxHeight = 480, scro
     const table = (0, react_table_1.useReactTable)({
         data,
         columns,
+        // Keeps `columnDef.size`/`minSize`/`maxSize` meaning "declared" — see
+        // ../data-table/column-size. `getSize()` is unaffected; it falls back to
+        // the library defaults itself.
+        defaultColumn: column_size_1.UNSIZED_DEFAULT_COLUMN,
         getCoreRowModel: (0, react_table_1.getCoreRowModel)()
     });
     const rows = table.getRowModel().rows;
@@ -97,11 +103,23 @@ function VirtualizedTable({ columns, data, rowHeight = 40, maxHeight = 480, scro
                             // its position among its siblings.
                             const firstLeaf = header.column.getLeafColumns()[0];
                             const start = leafPosition.get(firstLeaf?.id ?? header.column.id);
-                            return ((0, jsx_runtime_1.jsx)("div", { role: "columnheader", "aria-colindex": (start ?? 0) + 1, "aria-colspan": header.colSpan > 1 ? header.colSpan : undefined, style: { flex: `${header.colSpan} 1 0%` }, 
+                            // A group header spans leaf columns whose body cells carry
+                            // their own widths, so its size comes from those leaves, not
+                            // from the group def (which declares nothing). A leaf header
+                            // reads its own column, as before.
+                            const size = header.subHeaders.length > 0
+                                ? (0, column_size_1.readDeclaredGroupSize)(header.column.getLeafColumns())
+                                : (0, column_size_1.readDeclaredColumnSize)(header.column);
+                            return ((0, jsx_runtime_1.jsx)("div", { role: "columnheader", "aria-colindex": (start ?? 0) + 1, "aria-colspan": header.colSpan > 1 ? header.colSpan : undefined, 
+                                // A declared width must not be flexed away; without one the
+                                // cell keeps its colSpan share of the row, as before.
+                                style: size?.width === undefined
+                                    ? { flex: `${header.colSpan} 1 0%`, ...size }
+                                    : { flex: '0 0 auto', ...size }, 
                                 // 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
+                                className: (0, utils_1.cn)('min-h-10 px-4 py-2.5 text-left', typography_1.LABEL_VOICE_CLASS, headClassName), children: header.isPlaceholder
                                     ? null
                                     : (0, react_table_1.flexRender)(header.column.columnDef.header, header.getContext()) }, header.id));
                         }) }, headerGroup.id))) }), (0, jsx_runtime_1.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: (0, jsx_runtime_1.jsx)("div", { role: "presentation", className: "relative w-full", style: { height: totalSize }, children: virtualRows.map((virtualItem) => {
@@ -109,6 +127,15 @@ function VirtualizedTable({ columns, data, rowHeight = 40, maxHeight = 480, scro
                             return ((0, jsx_runtime_1.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) => ((0, jsx_runtime_1.jsx)("div", { role: "cell", "aria-colindex": i + 1, className: "flex-1 truncate px-4", children: (0, react_table_1.flexRender)(cell.column.columnDef.cell, cell.getContext()) }, cell.id))) }, row.id));
+                                }, children: row.getVisibleCells().map((cell, i) => {
+                                    const size = (0, column_size_1.readDeclaredColumnSize)(cell.column);
+                                    return ((0, jsx_runtime_1.jsx)("div", { role: "cell", "aria-colindex": i + 1, 
+                                        // An inline `flex` beats the class, so a sized column
+                                        // stops flexing while every other column renders
+                                        // exactly as it did before.
+                                        style: size?.width === undefined
+                                            ? size
+                                            : { flex: '0 0 auto', ...size }, className: "flex-1 truncate px-4", children: (0, react_table_1.flexRender)(cell.column.columnDef.cell, cell.getContext()) }, cell.id));
+                                }) }, row.id));
                         }) }) })] }) }));
 }

package/dist/esm/components/form/date-picker-field/index.d.ts

@@ -1,6 +1,13 @@
+import { Calendar } from '../../../components/ui/calendar/index.js';
 import * as React from 'react';
-import { ReactNode } from 'react';
+import { ComponentProps, ReactNode } from 'react';
 import { Control, FieldValues } from 'react-hook-form';
+/**
+ * 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 DatePickerFieldProps<T extends FieldValues = FieldValues> = {
     name: string;
     label?: ReactNode;
@@ -16,6 +23,9 @@ export type DatePickerFieldProps<T extends FieldValues = FieldValues> = {
     align?: 'start' | 'center' | 'end';
     'data-testid'?: string;
     valueAsString?: boolean;
+    /** date-fns locale for the calendar. Defaults to en-US. */
+    locale?: CalendarLocale;
 };
-export declare const DatePickerField: <T extends FieldValues = FieldValues>({ name, label, tooltip, labelExtra, description, placeholder, disabled, readOnly, control, required, dateFormat, align, valueAsString, ...others }: DatePickerFieldProps<T>) => React.JSX.Element;
+export declare const DatePickerField: <T extends FieldValues = FieldValues>({ name, label, tooltip, labelExtra, description, placeholder, disabled, readOnly, control, required, dateFormat, align, valueAsString, locale, ...others }: DatePickerFieldProps<T>) => React.JSX.Element;
+export {};
 //# sourceMappingURL=index.d.ts.map

package/dist/esm/components/form/date-picker-field/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/form/date-picker-field/index.tsx"],"names":[],"mappings":"AAqBA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AACjC,OAAO,EAAE,OAAO,EAAE,WAAW,EAAQ,MAAM,iBAAiB,CAAA;AAE5D,MAAM,MAAM,oBAAoB,CAAC,CAAC,SAAS,WAAW,GAAG,WAAW,IAAI;IACtE,IAAI,EAAE,MAAM,CAAA;IACZ,KAAK,CAAC,EAAE,SAAS,CAAA;IACjB,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,UAAU,CAAC,EAAE,SAAS,CAAA;IACtB,WAAW,CAAC,EAAE,SAAS,CAAA;IACvB,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,OAAO,EAAE,OAAO,CAAC,CAAC,CAAC,CAAA;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,KAAK,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,KAAK,CAAA;IAClC,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB,aAAa,CAAC,EAAE,OAAO,CAAA;CACxB,CAAA;AAED,eAAO,MAAM,eAAe,GAAI,CAAC,SAAS,WAAW,GAAG,WAAW,EAAE,oJAelE,oBAAoB,CAAC,CAAC,CAAC,sBA4FzB,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/form/date-picker-field/index.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,QAAQ,EAAE,MAAM,0BAA0B,CAAA;AAkBnD,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,EAAE,cAAc,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAEjD,OAAO,EAAE,OAAO,EAAE,WAAW,EAAQ,MAAM,iBAAiB,CAAA;AAE5D;;;;GAIG;AACH,KAAK,cAAc,GAAG,cAAc,CAAC,OAAO,QAAQ,CAAC,CAAC,QAAQ,CAAC,CAAA;AAE/D,MAAM,MAAM,oBAAoB,CAAC,CAAC,SAAS,WAAW,GAAG,WAAW,IAAI;IACtE,IAAI,EAAE,MAAM,CAAA;IACZ,KAAK,CAAC,EAAE,SAAS,CAAA;IACjB,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,UAAU,CAAC,EAAE,SAAS,CAAA;IACtB,WAAW,CAAC,EAAE,SAAS,CAAA;IACvB,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,OAAO,EAAE,OAAO,CAAC,CAAC,CAAC,CAAA;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,KAAK,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,KAAK,CAAA;IAClC,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB,aAAa,CAAC,EAAE,OAAO,CAAA;IACvB,2DAA2D;IAC3D,MAAM,CAAC,EAAE,cAAc,CAAA;CACxB,CAAA;AAED,eAAO,MAAM,eAAe,GAAI,CAAC,SAAS,WAAW,GAAG,WAAW,EAAE,4JAgBlE,oBAAoB,CAAC,CAAC,CAAC,sBAiGzB,CAAA"}

package/dist/esm/components/form/date-picker-field/index.js

@@ -8,7 +8,8 @@ import { cn } from '../../../lib/utils.js';
 import dayjs from 'dayjs';
 import { CalendarIcon } from 'lucide-react';
 import * as React from 'react';
-export const DatePickerField = ({ name, label, tooltip, labelExtra, description, placeholder, disabled, readOnly, control, required, dateFormat = 'MMM DD, YYYY', align = 'start', valueAsString, ...others }) => {
+import { enUS } from 'react-day-picker/locale';
+export const DatePickerField = ({ name, label, tooltip, labelExtra, description, placeholder, disabled, readOnly, control, required, dateFormat = 'MMM DD, YYYY', align = 'start', valueAsString, locale = enUS, ...others }) => {
     const [open, setOpen] = React.useState(false);
     return (_jsx(FormField, { name: name, control: control, render: ({ field }) => {
             const convertFieldValueToDate = (fieldValue) => {
@@ -33,6 +34,10 @@ export const DatePickerField = ({ name, label, tooltip, labelExtra, description,
             const handleSelect = (date) => {
                 field.onChange(convertDateToOutputFormat(date));
             };
-            return (_jsxs(FormItem, { required: required, children: [label && (_jsx(FormLabel, { extra: tooltip ? _jsx(FormTooltip, { children: tooltip }) : labelExtra, children: label })), _jsxs(Popover, { open: open, onOpenChange: setOpen, children: [_jsx(PopoverTrigger, { asChild: true, children: _jsx(FormControl, { children: _jsx(Button, { variant: "outline", disabled: disabled, className: cn('bg-input hover:bg-input border-shadcn-400 text-foreground h-10 w-full justify-start rounded-md px-2.5 font-normal', readOnly && 'pointer-events-none', open && 'ring-ring ring-2 ring-offset-0'), "data-testid": others['data-testid'], icon: _jsx(CalendarIcon, { className: "size-4" }), children: value ? (_jsx("span", { className: "text-foreground flex-1 text-left font-bold", children: dayjs(value).format(dateFormat) })) : (_jsx("span", { className: "text-muted-foreground flex-1 text-left", children: placeholder })) }) }) }), _jsx(PopoverContent, { className: "w-auto p-0", align: align, children: _jsx(Calendar, { mode: "single", defaultMonth: value, selected: value, onSelect: handleSelect, disabled: disabled || readOnly }) })] }), _jsx(FormMessage, {}), description && _jsx(FormDescription, { children: description })] }));
+            return (_jsxs(FormItem, { required: required, children: [label && (_jsx(FormLabel, { extra: tooltip ? _jsx(FormTooltip, { children: tooltip }) : labelExtra, children: label })), _jsxs(Popover, { open: open, onOpenChange: setOpen, children: [_jsx(PopoverTrigger, { asChild: true, children: _jsx(FormControl, { children: _jsx(Button, { variant: "outline", disabled: disabled, className: cn('bg-input hover:bg-input border-shadcn-400 text-foreground h-10 w-full justify-start rounded-md px-2.5 font-normal', readOnly && 'pointer-events-none', open && 'ring-ring ring-2 ring-offset-0'), "data-testid": others['data-testid'], icon: _jsx(CalendarIcon, { className: "size-4" }), children: value ? (_jsx("span", { className: "text-foreground flex-1 text-left font-bold", children: dayjs(value).format(dateFormat) })) : (_jsx("span", { className: "text-muted-foreground flex-1 text-left", children: placeholder })) }) }) }), _jsx(PopoverContent, { className: "w-auto p-0", align: align, children: _jsx(Calendar, { mode: "single", 
+                                    // `required` mirrors the field's own required: a required
+                                    // field is not emptied by a re-click; an optional one keeps
+                                    // react-day-picker's clear gesture.
+                                    required: required, defaultMonth: value, selected: value, onSelect: handleSelect, disabled: disabled || readOnly, locale: locale }) })] }), _jsx(FormMessage, {}), description && _jsx(FormDescription, { children: description })] }));
         } }));
 };

package/dist/esm/components/form/date-range-field/index.d.ts

@@ -1,6 +1,13 @@
+import { Calendar } from '../../../components/ui/calendar/index.js';
 import * as React from 'react';
-import { ReactNode } from 'react';
+import { type ComponentProps, ReactNode } from 'react';
 import { Control, FieldValues } from 'react-hook-form';
+/**
+ * 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 DateRangeFieldProps<T extends FieldValues = FieldValues> = {
     name: string;
     label?: ReactNode;
@@ -15,7 +22,10 @@ export type DateRangeFieldProps<T extends FieldValues = FieldValues> = {
     numberOfMonths?: number;
     dateFormat?: string;
     align?: 'start' | 'center' | 'end';
+    /** date-fns locale for the calendar. Defaults to en-US. */
+    locale?: CalendarLocale;
     'data-testid'?: string;
 };
-export declare const DateRangeField: <T extends FieldValues = FieldValues>({ name, label, tooltip, labelExtra, description, placeholder, disabled, readOnly, control, required, numberOfMonths, dateFormat, align, ...others }: DateRangeFieldProps<T>) => React.JSX.Element;
+export declare const DateRangeField: <T extends FieldValues = FieldValues>({ name, label, tooltip, labelExtra, description, placeholder, disabled, readOnly, control, required, numberOfMonths, dateFormat, align, locale, ...others }: DateRangeFieldProps<T>) => React.JSX.Element;
+export {};
 //# sourceMappingURL=index.d.ts.map

package/dist/esm/components/form/date-range-field/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/form/date-range-field/index.tsx"],"names":[],"mappings":"AAqBA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAEjC,OAAO,EAAE,OAAO,EAAE,WAAW,EAAQ,MAAM,iBAAiB,CAAA;AAE5D,MAAM,MAAM,mBAAmB,CAAC,CAAC,SAAS,WAAW,GAAG,WAAW,IAAI;IACrE,IAAI,EAAE,MAAM,CAAA;IACZ,KAAK,CAAC,EAAE,SAAS,CAAA;IACjB,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,UAAU,CAAC,EAAE,SAAS,CAAA;IACtB,WAAW,CAAC,EAAE,SAAS,CAAA;IACvB,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,OAAO,EAAE,OAAO,CAAC,CAAC,CAAC,CAAA;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,cAAc,CAAC,EAAE,MAAM,CAAA;IACvB,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,KAAK,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,KAAK,CAAA;IAClC,aAAa,CAAC,EAAE,MAAM,CAAA;CACvB,CAAA;AAED,eAAO,MAAM,cAAc,GAAI,CAAC,SAAS,WAAW,GAAG,WAAW,EAAE,qJAejE,mBAAmB,CAAC,CAAC,CAAC,sBA0ExB,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/form/date-range-field/index.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,QAAQ,EAAE,MAAM,0BAA0B,CAAA;AAkBnD,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,EAAE,KAAK,cAAc,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAGtD,OAAO,EAAE,OAAO,EAAE,WAAW,EAAQ,MAAM,iBAAiB,CAAA;AAE5D;;;;GAIG;AACH,KAAK,cAAc,GAAG,cAAc,CAAC,OAAO,QAAQ,CAAC,CAAC,QAAQ,CAAC,CAAA;AAE/D,MAAM,MAAM,mBAAmB,CAAC,CAAC,SAAS,WAAW,GAAG,WAAW,IAAI;IACrE,IAAI,EAAE,MAAM,CAAA;IACZ,KAAK,CAAC,EAAE,SAAS,CAAA;IACjB,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,UAAU,CAAC,EAAE,SAAS,CAAA;IACtB,WAAW,CAAC,EAAE,SAAS,CAAA;IACvB,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,OAAO,EAAE,OAAO,CAAC,CAAC,CAAC,CAAA;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,cAAc,CAAC,EAAE,MAAM,CAAA;IACvB,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,KAAK,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,KAAK,CAAA;IAClC,2DAA2D;IAC3D,MAAM,CAAC,EAAE,cAAc,CAAA;IACvB,aAAa,CAAC,EAAE,MAAM,CAAA;CACvB,CAAA;AAED,eAAO,MAAM,cAAc,GAAI,CAAC,SAAS,WAAW,GAAG,WAAW,EAAE,6JAgBjE,mBAAmB,CAAC,CAAC,CAAC,sBA2ExB,CAAA"}

package/dist/esm/components/form/date-range-field/index.js

@@ -8,10 +8,11 @@ import { cn } from '../../../lib/utils.js';
 import dayjs from 'dayjs';
 import { CalendarIcon } from 'lucide-react';
 import * as React from 'react';
-export const DateRangeField = ({ name, label, tooltip, labelExtra, description, placeholder, disabled, readOnly, control, required, numberOfMonths = 2, dateFormat = 'MMM DD, YYYY', align = 'start', ...others }) => {
+import { enUS } from 'react-day-picker/locale';
+export const DateRangeField = ({ name, label, tooltip, labelExtra, description, placeholder, disabled, readOnly, control, required, numberOfMonths = 2, dateFormat = 'MMM DD, YYYY', align = 'start', locale = enUS, ...others }) => {
     const [open, setOpen] = React.useState(false);
     return (_jsx(FormField, { name: name, control: control, render: ({ field }) => {
             const value = field.value;
-            return (_jsxs(FormItem, { required: required, children: [label && (_jsx(FormLabel, { extra: tooltip ? _jsx(FormTooltip, { children: tooltip }) : labelExtra, children: label })), _jsxs(Popover, { open: open, onOpenChange: setOpen, children: [_jsx(PopoverTrigger, { asChild: true, children: _jsx(FormControl, { children: _jsx(Button, { variant: "outline", disabled: disabled, className: cn('bg-input hover:bg-input border-shadcn-400 text-foreground h-10 w-full justify-start rounded-md px-2.5 font-normal', readOnly && 'pointer-events-none', open && 'ring-ring ring-2 ring-offset-0'), "data-testid": others['data-testid'], icon: _jsx(CalendarIcon, { className: "size-4" }), children: value?.from ? (_jsx("span", { className: "text-foreground flex-1 text-left font-bold", children: value.to ? (_jsxs(_Fragment, { children: [dayjs(value.from).format(dateFormat), " -", ' ', dayjs(value.to).format(dateFormat)] })) : (dayjs(value.from).format(dateFormat)) })) : (_jsx("span", { className: "text-muted-foreground flex-1 text-left", children: placeholder })) }) }) }), _jsx(PopoverContent, { className: "w-auto p-0", align: align, children: _jsx(Calendar, { mode: "range", defaultMonth: value?.from, selected: value, onSelect: field.onChange, numberOfMonths: numberOfMonths, disabled: disabled || readOnly }) })] }), _jsx(FormMessage, {}), description && _jsx(FormDescription, { children: description })] }));
+            return (_jsxs(FormItem, { required: required, children: [label && (_jsx(FormLabel, { extra: tooltip ? _jsx(FormTooltip, { children: tooltip }) : labelExtra, children: label })), _jsxs(Popover, { open: open, onOpenChange: setOpen, children: [_jsx(PopoverTrigger, { asChild: true, children: _jsx(FormControl, { children: _jsx(Button, { variant: "outline", disabled: disabled, className: cn('bg-input hover:bg-input border-shadcn-400 text-foreground h-10 w-full justify-start rounded-md px-2.5 font-normal', readOnly && 'pointer-events-none', open && 'ring-ring ring-2 ring-offset-0'), "data-testid": others['data-testid'], icon: _jsx(CalendarIcon, { className: "size-4" }), children: value?.from ? (_jsx("span", { className: "text-foreground flex-1 text-left font-bold", children: value.to ? (_jsxs(_Fragment, { children: [dayjs(value.from).format(dateFormat), " -", ' ', dayjs(value.to).format(dateFormat)] })) : (dayjs(value.from).format(dateFormat)) })) : (_jsx("span", { className: "text-muted-foreground flex-1 text-left", children: placeholder })) }) }) }), _jsx(PopoverContent, { className: "w-auto p-0", align: align, children: _jsx(Calendar, { mode: "range", defaultMonth: value?.from, selected: value, onSelect: field.onChange, numberOfMonths: numberOfMonths, disabled: disabled || readOnly, locale: locale }) })] }), _jsx(FormMessage, {}), description && _jsx(FormDescription, { children: description })] }));
         } }));
 };

package/dist/esm/components/form/date-time-picker-field/index.d.ts

@@ -1,6 +1,13 @@
+import { Calendar } from '../../../components/ui/calendar/index.js';
 import * as React from 'react';
-import { type ReactNode } from 'react';
+import { type ComponentProps, type ReactNode } from 'react';
 import { Control, FieldValues } from 'react-hook-form';
+/**
+ * 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 DateTimePickerFieldProps<T extends FieldValues = FieldValues> = {
     name: string;
     label?: ReactNode;
@@ -14,10 +21,13 @@ export type DateTimePickerFieldProps<T extends FieldValues = FieldValues> = {
     required?: boolean;
     dateFormat?: string;
     align?: 'start' | 'center' | 'end';
+    /** date-fns locale for the calendar. Defaults to en-US. */
+    locale?: CalendarLocale;
     'data-testid'?: string;
     minDate?: Date;
     maxDate?: Date;
     defaultTime?: string;
 };
-export declare const DateTimePickerField: <T extends FieldValues = FieldValues>({ name, label, tooltip, labelExtra, description, placeholder, disabled, readOnly, control, required, dateFormat, align, minDate, maxDate, defaultTime, ...others }: DateTimePickerFieldProps<T>) => React.JSX.Element;
+export declare const DateTimePickerField: <T extends FieldValues = FieldValues>({ name, label, tooltip, labelExtra, description, placeholder, disabled, readOnly, control, required, dateFormat, align, locale, minDate, maxDate, defaultTime, ...others }: DateTimePickerFieldProps<T>) => React.JSX.Element;
+export {};
 //# sourceMappingURL=index.d.ts.map

package/dist/esm/components/form/date-time-picker-field/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/form/date-time-picker-field/index.tsx"],"names":[],"mappings":"AAsBA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,EAAE,KAAK,SAAS,EAAE,MAAM,OAAO,CAAA;AACtC,OAAO,EAAE,OAAO,EAAE,WAAW,EAAQ,MAAM,iBAAiB,CAAA;AAE5D,MAAM,MAAM,wBAAwB,CAAC,CAAC,SAAS,WAAW,GAAG,WAAW,IAAI;IAC1E,IAAI,EAAE,MAAM,CAAA;IACZ,KAAK,CAAC,EAAE,SAAS,CAAA;IACjB,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,UAAU,CAAC,EAAE,SAAS,CAAA;IACtB,WAAW,CAAC,EAAE,SAAS,CAAA;IACvB,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,OAAO,EAAE,OAAO,CAAC,CAAC,CAAC,CAAA;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,KAAK,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,KAAK,CAAA;IAClC,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB,OAAO,CAAC,EAAE,IAAI,CAAA;IACd,OAAO,CAAC,EAAE,IAAI,CAAA;IACd,WAAW,CAAC,EAAE,MAAM,CAAA;CACrB,CAAA;AAED,eAAO,MAAM,mBAAmB,GAAI,CAAC,SAAS,WAAW,GAAG,WAAW,EAAE,oKAiBtE,wBAAwB,CAAC,CAAC,CAAC,sBAgK7B,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/form/date-time-picker-field/index.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,QAAQ,EAAE,MAAM,0BAA0B,CAAA;AAmBnD,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,EAAE,KAAK,cAAc,EAAE,KAAK,SAAS,EAAE,MAAM,OAAO,CAAA;AAE3D,OAAO,EAAE,OAAO,EAAE,WAAW,EAAQ,MAAM,iBAAiB,CAAA;AAE5D;;;;GAIG;AACH,KAAK,cAAc,GAAG,cAAc,CAAC,OAAO,QAAQ,CAAC,CAAC,QAAQ,CAAC,CAAA;AAE/D,MAAM,MAAM,wBAAwB,CAAC,CAAC,SAAS,WAAW,GAAG,WAAW,IAAI;IAC1E,IAAI,EAAE,MAAM,CAAA;IACZ,KAAK,CAAC,EAAE,SAAS,CAAA;IACjB,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,UAAU,CAAC,EAAE,SAAS,CAAA;IACtB,WAAW,CAAC,EAAE,SAAS,CAAA;IACvB,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,OAAO,EAAE,OAAO,CAAC,CAAC,CAAC,CAAA;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,KAAK,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,KAAK,CAAA;IAClC,2DAA2D;IAC3D,MAAM,CAAC,EAAE,cAAc,CAAA;IACvB,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB,OAAO,CAAC,EAAE,IAAI,CAAA;IACd,OAAO,CAAC,EAAE,IAAI,CAAA;IACd,WAAW,CAAC,EAAE,MAAM,CAAA;CACrB,CAAA;AAED,eAAO,MAAM,mBAAmB,GAAI,CAAC,SAAS,WAAW,GAAG,WAAW,EAAE,4KAkBtE,wBAAwB,CAAC,CAAC,CAAC,sBAiK7B,CAAA"}

package/dist/esm/components/form/date-time-picker-field/index.js

@@ -9,7 +9,8 @@ import { cn } from '../../../lib/utils.js';
 import dayjs from 'dayjs';
 import { CalendarIcon, XIcon } from 'lucide-react';
 import * as React from 'react';
-export const DateTimePickerField = ({ name, label, tooltip, labelExtra, description, placeholder = 'Select date and time...', disabled, readOnly, control, required, dateFormat = 'MMM DD, YYYY HH:mm', align = 'start', minDate, maxDate, defaultTime = '00:00', ...others }) => {
+import { enUS } from 'react-day-picker/locale';
+export const DateTimePickerField = ({ name, label, tooltip, labelExtra, description, placeholder = 'Select date and time...', disabled, readOnly, control, required, dateFormat = 'MMM DD, YYYY HH:mm', align = 'start', locale = enUS, minDate, maxDate, defaultTime = '00:00', ...others }) => {
     const [open, setOpen] = React.useState(false);
     const parseDefaultTime = (time) => {
         const [h, m] = time.split(':').map(Number);
@@ -58,7 +59,7 @@ export const DateTimePickerField = ({ name, label, tooltip, labelExtra, descript
                                                 e.preventDefault();
                                                 handleClear(e);
                                             }
-                                        }, children: _jsx(XIcon, { className: "size-4" }) }))] }), _jsx(PopoverContent, { className: "w-auto p-0", align: align, children: _jsxs("div", { className: "flex flex-col sm:flex-row sm:items-stretch", children: [_jsx(Calendar, { mode: "single", defaultMonth: validCurrent ? validCurrent.toDate() : undefined, selected: validCurrent ? validCurrent.toDate() : undefined, onSelect: handleDateSelect, disabled: (date) => {
+                                        }, children: _jsx(XIcon, { className: "size-4" }) }))] }), _jsx(PopoverContent, { className: "w-auto p-0", align: align, children: _jsxs("div", { className: "flex flex-col sm:flex-row sm:items-stretch", children: [_jsx(Calendar, { mode: "single", defaultMonth: validCurrent ? validCurrent.toDate() : undefined, selected: validCurrent ? validCurrent.toDate() : undefined, onSelect: handleDateSelect, locale: locale, disabled: (date) => {
                                                 if (disabled || readOnly)
                                                     return true;
                                                 if (minDate &&

package/dist/esm/components/form/input-field/index.d.ts

@@ -11,16 +11,26 @@ export type InputFieldProps<T extends FieldValues = FieldValues> = {
     description?: ReactNode;
     startAdornment?: ReactNode;
     endAdornment?: ReactNode;
-    control: Control<T>;
+    /** react-hook-form control. Omit it to drive the field from plain state
+     *  with `value`/`defaultValue` + `onChange`. */
+    control?: Control<T>;
+    /** Controlled value for the no-`control` path. */
+    value?: string;
     disabled?: boolean;
     readOnly?: boolean;
     minHeight?: number;
     maxHeight?: number;
     textArea?: boolean;
     required?: boolean;
+    /**
+     * Seed value. With `control` and no form-level default for this name,
+     * react-hook-form treats the seed as a VALUE rather than a default, so
+     * `formState.isDirty` reads true after `reset()` and after retyping the
+     * seed. Prefer `useForm({ defaultValues })` when dirty tracking matters.
+     */
     defaultValue?: string;
     'data-testid'?: string;
     onChange?: (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => void;
 };
-export declare const InputField: <T extends FieldValues = FieldValues>({ className, type, label, tooltip, labelExtra, placeholder, description, startAdornment, endAdornment, required, readOnly, minHeight, maxHeight, textArea, defaultValue, onChange, ...others }: InputFieldProps<T>) => import("react").JSX.Element;
+export declare const InputField: <T extends FieldValues = FieldValues>({ className, type, label, tooltip, labelExtra, placeholder, description, startAdornment, endAdornment, required, readOnly, minHeight, maxHeight, textArea, defaultValue, value, onChange, ...others }: InputFieldProps<T>) => import("react").JSX.Element;
 //# sourceMappingURL=index.d.ts.map

package/dist/esm/components/form/input-field/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/form/input-field/index.tsx"],"names":[],"mappings":"AAWA,OAAO,EAAE,sBAAsB,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AACzD,OAAO,EAAE,OAAO,EAAE,WAAW,EAAQ,MAAM,iBAAiB,CAAA;AAE5D,MAAM,MAAM,eAAe,CAAC,CAAC,SAAS,WAAW,GAAG,WAAW,IAAI;IACjE,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,IAAI,EAAE,MAAM,CAAA;IACZ,IAAI,CAAC,EAAE,sBAAsB,CAAA;IAC7B,KAAK,CAAC,EAAE,SAAS,CAAA;IACjB,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,UAAU,CAAC,EAAE,SAAS,CAAA;IACtB,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,WAAW,CAAC,EAAE,SAAS,CAAA;IACvB,cAAc,CAAC,EAAE,SAAS,CAAA;IAC1B,YAAY,CAAC,EAAE,SAAS,CAAA;IACxB,OAAO,EAAE,OAAO,CAAC,CAAC,CAAC,CAAA;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB,QAAQ,CAAC,EAAE,CACT,CAAC,EAAE,KAAK,CAAC,WAAW,CAAC,gBAAgB,GAAG,mBAAmB,CAAC,KACzD,IAAI,CAAA;CACV,CAAA;AACD,eAAO,MAAM,UAAU,GAAI,CAAC,SAAS,WAAW,GAAG,WAAW,EAAE,gMAkB7D,eAAe,CAAC,CAAC,CAAC,gCAmDpB,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/form/input-field/index.tsx"],"names":[],"mappings":"AAWA,OAAO,EAAE,sBAAsB,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AACzD,OAAO,EAAE,OAAO,EAAkB,WAAW,EAAQ,MAAM,iBAAiB,CAAA;AAE5E,MAAM,MAAM,eAAe,CAAC,CAAC,SAAS,WAAW,GAAG,WAAW,IAAI;IACjE,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,IAAI,EAAE,MAAM,CAAA;IACZ,IAAI,CAAC,EAAE,sBAAsB,CAAA;IAC7B,KAAK,CAAC,EAAE,SAAS,CAAA;IACjB,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,UAAU,CAAC,EAAE,SAAS,CAAA;IACtB,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,WAAW,CAAC,EAAE,SAAS,CAAA;IACvB,cAAc,CAAC,EAAE,SAAS,CAAA;IAC1B,YAAY,CAAC,EAAE,SAAS,CAAA;IACxB;oDACgD;IAChD,OAAO,CAAC,EAAE,OAAO,CAAC,CAAC,CAAC,CAAA;IACpB,kDAAkD;IAClD,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB;;;;;OAKG;IACH,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB,QAAQ,CAAC,EAAE,CACT,CAAC,EAAE,KAAK,CAAC,WAAW,CAAC,gBAAgB,GAAG,mBAAmB,CAAC,KACzD,IAAI,CAAA;CACV,CAAA;AAeD,eAAO,MAAM,UAAU,GAAI,CAAC,SAAS,WAAW,GAAG,WAAW,EAAE,uMAmB7D,eAAe,CAAC,CAAC,CAAC,gCA2EpB,CAAA"}

package/dist/esm/components/form/input-field/index.js

@@ -2,9 +2,33 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { AutosizeTextarea } from '../../../components/ui/autosize-textarea/index.js';
 import { FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage, FormTooltip } from '../../../components/ui/form.js';
 import { Input } from '../../../components/ui/input/index.js';
-export const InputField = ({ className, type, label, tooltip, labelExtra, placeholder, description, startAdornment, endAdornment, required, readOnly, minHeight, maxHeight, textArea, defaultValue, onChange, ...others }) => {
-    return (_jsx(FormField, { ...others, name: others.name, render: ({ field }) => (_jsxs(FormItem, { required: required, children: [label && (_jsx(FormLabel, { extra: tooltip ? _jsx(FormTooltip, { children: tooltip }) : labelExtra, children: label })), _jsx(FormControl, { children: textArea ? (_jsx(AutosizeTextarea, { className: className, placeholder: placeholder, readOnly: readOnly, minHeight: minHeight, maxHeight: maxHeight, defaultValue: defaultValue, "data-testid": others['data-testid'], ...field, onChange: (e) => {
-                            field.onChange(e);
-                            onChange?.(e);
-                        } })) : (_jsx(Input, { className: className, type: type, placeholder: placeholder, readOnly: readOnly, startAdornment: startAdornment, endAdornment: endAdornment, "data-testid": others['data-testid'], ...field })) }), _jsx(FormMessage, {}), description && _jsx(FormDescription, { children: description })] })) }));
+export const InputField = ({ className, type, label, tooltip, labelExtra, placeholder, description, startAdornment, endAdornment, required, readOnly, minHeight, maxHeight, textArea, defaultValue, value, onChange, ...others }) => {
+    const renderItem = (binding) => (_jsxs(FormItem, { required: required, children: [label && (_jsx(FormLabel, { extra: tooltip ? _jsx(FormTooltip, { children: tooltip }) : labelExtra, children: label })), _jsx(FormControl, { children: textArea ? (_jsx(AutosizeTextarea, { className: className, placeholder: placeholder, readOnly: readOnly, minHeight: minHeight, maxHeight: maxHeight, "data-testid": others['data-testid'], ...binding })) : (_jsx(Input, { className: className, type: type, placeholder: placeholder, readOnly: readOnly, startAdornment: startAdornment, endAdornment: endAdornment, "data-testid": others['data-testid'], ...binding })) }), _jsx(FormMessage, {}), description && _jsx(FormDescription, { children: description })] }));
+    if (!others.control) {
+        return renderItem({
+            name: others.name,
+            disabled: others.disabled,
+            // Controlled when the caller holds the value, uncontrolled when it only
+            // seeds one — supplying both is what React warns about.
+            ...(value !== undefined ? { value } : { defaultValue }),
+            onChange: (e) => onChange?.(e)
+        });
+    }
+    return (_jsx(FormField, { ...others, name: others.name, 
+        // The seed goes through react-hook-form, never straight to the DOM: a
+        // value painted on the box only makes the field LOOK filled while the
+        // form still submits nothing for that name. Controller seeds its own
+        // state from this, so `field.value` carries the seed on both branches.
+        defaultValue: defaultValue, render: ({ field }) => renderItem({
+            ...field,
+            // Controlled from mount. react-hook-form hands `undefined` for any
+            // name the form declares no default for; React then mounts the box
+            // uncontrolled and flips it on the first keystroke, losing that
+            // character.
+            value: field.value ?? '',
+            onChange: (e) => {
+                field.onChange(e);
+                onChange?.(e);
+            }
+        }) }));
 };