@lerianstudio/sindarian-ui 1.4.0-beta.8 → 2.0.0-beta.10

package/dist/esm/components/card/account-card/index.js

@@ -23,7 +23,7 @@ export function AccountBalanceCardHeader({ className, ...props }) {
     return (_jsx("div", { "data-slot": "account-balance-card-header", className: cn('flex flex-col', className), ...props }));
 }
 export function AccountBalanceCardTitle({ className, ...props }) {
-    return (_jsx("p", { "data-slot": "account-balance-card-title", className: cn('text-shadcn-600 text-lg font-bold', className), ...props }));
+    return (_jsx("p", { "data-slot": "account-balance-card-title", className: cn('text-foreground text-lg font-bold', className), ...props }));
 }
 export function AccountBalanceCardDeleteButton({ className, ...props }) {
     return (_jsx(IconButton, { variant: "outline", size: "small", rounded: true, "data-slot": "account-balance-card-delete-button", className: cn('absolute top-3 right-3', className), ...props, children: _jsx(Trash, { className: "text-muted-foreground h-4 w-4" }) }));
@@ -35,19 +35,19 @@ export function AccountBalanceCardLoading({ className, ...props }) {
     return (_jsx(Skeleton, { "data-slot": "account-balance-card-loading", className: cn('bg-muted mt-3 h-3 w-full rounded-md', className), ...props }));
 }
 export function AccountBalanceCardEmpty({ className, ...props }) {
-    return (_jsx("p", { "data-slot": "account-balance-card-empty", className: cn('text-shadcn-500 mt-3 text-center text-sm font-normal', className), ...props }));
+    return (_jsx("p", { "data-slot": "account-balance-card-empty", className: cn('text-muted-foreground mt-3 text-center text-sm font-normal', className), ...props }));
 }
 export function AccountBalanceCardInfo({ className, assetCode, value, children: _children, ref, ...props }) {
-    return (_jsxs("div", { ref: ref, "data-slot": "account-balance-card-info", className: cn('text-shadcn-500 mt-3 flex flex-row items-center justify-between text-sm font-normal', className), ...props, children: [_jsx("p", { children: assetCode }), _jsx("p", { children: value })] }));
+    return (_jsxs("div", { ref: ref, "data-slot": "account-balance-card-info", className: cn('text-muted-foreground mt-3 flex flex-row items-center justify-between text-sm font-normal', className), ...props, children: [_jsx("p", { children: assetCode }), _jsx("p", { children: value })] }));
 }
 export function AccountBalanceCardUpdateButton({ className: _className, loading, timestamp, loadingLabel = 'Updating...', updatedInLabel = 'Updated in', updatedLabel = 'Updated', onRefresh, children: _children, ref, ...props }) {
     const _time = useTime({ interval: 1000 * 60 });
     const updated = React.useMemo(() => {
         return !dayjs(timestamp).isBefore(dayjs().subtract(1, 'minute'));
     }, [_time, timestamp]);
-    return (_jsxs("div", { className: "mb-3 flex flex-row items-center justify-end gap-2", children: [_jsxs("p", { className: "text-shadcn-500 text-xs font-medium", children: [loading && loadingLabel, !loading && !updated && updatedInLabel, !loading && updated && updatedLabel] }), !loading && updated && (_jsx(CheckCircle2, { className: "text-system-success h-4 w-4" })), (!updated || loading) && (_jsx(Button, { ref: ref, variant: "link", "data-slot": "account-balance-card-update-button", className: "h-3 p-0", onClick: onRefresh, disabled: loading, ...props, children: _jsx(RefreshCw, { className: cn('size-4', { 'motion-safe:animate-spin': loading }) }) }))] }));
+    return (_jsxs("div", { className: "mb-3 flex flex-row items-center justify-end gap-2", children: [_jsxs("p", { className: "text-muted-foreground text-xs font-medium", children: [loading && loadingLabel, !loading && !updated && updatedInLabel, !loading && updated && updatedLabel] }), !loading && updated && (_jsx(CheckCircle2, { className: "text-system-success-h1a h-4 w-4" })), (!updated || loading) && (_jsx(Button, { ref: ref, variant: "link", "data-slot": "account-balance-card-update-button", className: "h-3 p-0", onClick: onRefresh, disabled: loading, ...props, children: _jsx(RefreshCw, { className: cn('size-4', { 'motion-safe:animate-spin': loading }) }) }))] }));
 }
 export function AccountBalanceCardTrigger({ className, openLabel, closeLabel, children: _children, ...props }) {
     const { open } = React.useContext(AccountBalanceCardContext);
-    return (_jsx(CollapsibleTrigger, { asChild: true, children: _jsx(Button, { variant: "link", "data-slot": "account-balance-card-trigger", className: cn('text-shadcn-600/40 h-4 p-0 text-xs', className), ...props, children: !open ? openLabel : closeLabel }) }));
+    return (_jsx(CollapsibleTrigger, { asChild: true, children: _jsx(Button, { variant: "link", "data-slot": "account-balance-card-trigger", className: cn('text-muted-foreground h-4 p-0 text-xs', className), ...props, children: !open ? openLabel : closeLabel }) }));
 }

package/dist/esm/components/card/basic-card/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/card/basic-card/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAGzB,wBAAgB,SAAS,CAAC,EACxB,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,qBAO7B;AAED,wBAAgB,cAAc,CAAC,EAC7B,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,IAAI,CAAC,qBAO5B;AAED,wBAAgB,gBAAgB,CAAC,EAC/B,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,qBAO7B;AAED,wBAAgB,eAAe,CAAC,EAC9B,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,qBAE7B"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/card/basic-card/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAGzB,wBAAgB,SAAS,CAAC,EACxB,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,qBAO7B;AAED,wBAAgB,cAAc,CAAC,EAC7B,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,IAAI,CAAC,qBAO5B;AAED,wBAAgB,gBAAgB,CAAC,EAC/B,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,qBAU7B;AAED,wBAAgB,eAAe,CAAC,EAC9B,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,qBAE7B"}

package/dist/esm/components/card/basic-card/index.js

@@ -4,10 +4,10 @@ export function BasicCard({ className, ...props }) {
     return (_jsx("div", { className: cn('bg-card flex flex-col rounded-lg p-6', className), ...props }));
 }
 export function BasicCardTitle({ className, ...props }) {
-    return (_jsx("h2", { className: cn('text-shadcn-600 mb-4 text-sm font-medium', className), ...props }));
+    return (_jsx("h2", { className: cn('text-foreground mb-4 text-sm font-medium', className), ...props }));
 }
 export function BasicCardContent({ className, ...props }) {
-    return (_jsx("div", { className: cn('text-shadcn-500 mb-6 text-sm font-medium', className), ...props }));
+    return (_jsx("div", { className: cn('text-muted-foreground mb-6 text-sm font-medium', className), ...props }));
 }
 export function BasicCardAction({ className, ...props }) {
     return _jsx("div", { className: cn('flex flex-col', className), ...props });

package/dist/esm/components/card/entity-card/index.js

@@ -30,7 +30,7 @@ export function EntityCardTitle({ className, ...props }) {
     return (_jsx("h3", { "data-slot": "entity-card-title", className: cn('text-foreground text-sm font-semibold', className), ...props }));
 }
 export function EntityCardIcon({ className, ...props }) {
-    return (_jsx("span", { "data-slot": "entity-card-icon", className: cn('text-shadcn-400 size-8 [&>svg]:size-8 [&>svg]:stroke-[1.5]', className), ...props }));
+    return (_jsx("span", { "data-slot": "entity-card-icon", className: cn('text-muted-foreground size-8 [&>svg]:size-8 [&>svg]:stroke-[1.5]', className), ...props }));
 }
 export function EntityCardBadgeList({ className, ...props }) {
     return (_jsx("div", { "data-slot": "entity-card-badge-list", className: cn('flex flex-wrap gap-2', className), ...props }));
@@ -42,11 +42,11 @@ export function EntityCardContent({ className, ...props }) {
     return (_jsx("div", { "data-slot": "entity-card-content", className: cn('flex flex-col gap-2.5', className), ...props }));
 }
 export function EntityCardDescription({ className, ...props }) {
-    return (_jsx("p", { "data-slot": "entity-card-description", className: cn('text-shadcn-400 text-xs font-medium', className), ...props }));
+    return (_jsx("p", { "data-slot": "entity-card-description", className: cn('text-muted-foreground text-xs font-medium', className), ...props }));
 }
 export function EntityCardList({ className, ...props }) {
-    return (_jsx("ul", { "data-slot": "entity-card-list", className: cn('text-shadcn-500 mx-2 list-inside list-disc space-y-1 text-xs font-medium', className), ...props }));
+    return (_jsx("ul", { "data-slot": "entity-card-list", className: cn('text-muted-foreground mx-2 list-inside list-disc space-y-1 text-xs font-medium', className), ...props }));
 }
 export function EntityCardFooter({ className, children, ...props }) {
-    return (_jsxs("div", { "data-slot": "entity-card-footer", className: cn('text-shadcn-400 flex flex-col gap-2 text-xs font-medium', className), ...props, children: [_jsx(Separator, {}), _jsx("div", { className: "[&>svg]:text-muted-foreground flex flex-row items-center gap-2 [&>svg]:size-4 [&>svg]:stroke-[1.5]", children: children })] }));
+    return (_jsxs("div", { "data-slot": "entity-card-footer", className: cn('text-muted-foreground flex flex-col gap-2 text-xs font-medium', className), ...props, children: [_jsx(Separator, {}), _jsx("div", { className: "[&>svg]:text-muted-foreground flex flex-row items-center gap-2 [&>svg]:size-4 [&>svg]:stroke-[1.5]", children: children })] }));
 }

package/dist/esm/components/dialog/confirmation-dialog/index.d.ts

@@ -1,13 +1,12 @@
 import * as React from 'react';
-export type ConfirmationDialogProps = {
+type ConfirmationDialogSharedProps = {
     open: boolean;
     onOpenChange: (open: boolean) => void;
-    title?: string;
-    description?: string;
+    title?: React.ReactNode;
+    description?: React.ReactNode;
     /** @deprecated dead prop, removed in the next major */
     ledgerName?: string;
     variant?: 'default' | 'warning' | 'destructive' | 'success';
-    loading?: boolean;
     /**
      * Awaited. While it is in flight the dialog reports a pending status, both
      * actions are disabled and dismissal is blocked; it closes on resolve. A
@@ -17,8 +16,40 @@ export type ConfirmationDialogProps = {
     onCancel?: () => void;
     confirmLabel?: string;
     cancelLabel?: string;
-    /** Announced to screen readers while a confirm is in flight. */
+};
+/**
+ * ⛔ `loading` IS THE DISCRIMINANT: driving the dialog's busy state from the
+ * outside requires `pendingLabel`, because the announcement region only mounts
+ * when that label exists and a `loading` dialog without one is silently
+ * unannounced.
+ *
+ * The rule is compile-time on purpose. `pendingLabel` had an English default
+ * until it was removed for reading "Processing" aloud over translated copy, and
+ * 73 consumer call sites pass `loading` with no label: every one of them would
+ * have lost its pending announcement on a silent bump, with nothing visible on
+ * screen to betray it.
+ *
+ * A dialog that drives its busy state from `onConfirm` alone is untouched:
+ * `pendingLabel` stays optional there, and omitting it still means the dialog
+ * announces nothing rather than announcing the wrong language.
+ */
+type ConfirmationDialogPendingProps = {
+    loading: boolean;
+    /**
+     * Announced to screen readers while a confirm is in flight.
+     * Caller-supplied and already localized: this string is never visible, so
+     * a default here would read English aloud over a translated dialog. The
+     * visible `confirmLabel` / `cancelLabel` keep their English defaults,
+     * because a caller sees those and overrides them.
+     */
+    pendingLabel: string;
+} | {
+    loading?: undefined;
+    /** As above, and optional while nothing drives the busy state from
+     *  outside: omit it and an awaited `onConfirm` announces nothing. */
     pendingLabel?: string;
 };
+export type ConfirmationDialogProps = ConfirmationDialogSharedProps & ConfirmationDialogPendingProps;
 export declare function ConfirmationDialog({ open, onOpenChange, title, description, variant, loading, onConfirm, onCancel, confirmLabel, cancelLabel, pendingLabel }: ConfirmationDialogProps): React.JSX.Element;
+export {};
 //# sourceMappingURL=index.d.ts.map

package/dist/esm/components/dialog/confirmation-dialog/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/dialog/confirmation-dialog/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAuD9B,MAAM,MAAM,uBAAuB,GAAG;IACpC,IAAI,EAAE,OAAO,CAAA;IACb,YAAY,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAA;IACrC,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,uDAAuD;IACvD,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,OAAO,CAAC,EAAE,SAAS,GAAG,SAAS,GAAG,aAAa,GAAG,SAAS,CAAA;IAC3D,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB;;;;OAIG;IACH,SAAS,CAAC,EAAE,MAAM,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,CAAA;IACtC,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAA;IACrB,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,gEAAgE;IAChE,YAAY,CAAC,EAAE,MAAM,CAAA;CACtB,CAAA;AAED,wBAAgB,kBAAkB,CAAC,EACjC,IAAI,EACJ,YAAY,EACZ,KAAU,EACV,WAAgB,EAChB,OAAmB,EACnB,OAAO,EACP,SAAoB,EACpB,QAAmB,EACnB,YAAY,EACZ,WAAW,EACX,YAA4B,EAC7B,EAAE,uBAAuB,qBAiFzB"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/dialog/confirmation-dialog/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAuD9B,KAAK,6BAA6B,GAAG;IACnC,IAAI,EAAE,OAAO,CAAA;IACb,YAAY,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAA;IACrC,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACvB,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC7B,uDAAuD;IACvD,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,OAAO,CAAC,EAAE,SAAS,GAAG,SAAS,GAAG,aAAa,GAAG,SAAS,CAAA;IAC3D;;;;OAIG;IACH,SAAS,CAAC,EAAE,MAAM,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,CAAA;IACtC,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAA;IACrB,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,WAAW,CAAC,EAAE,MAAM,CAAA;CACrB,CAAA;AAED;;;;;;;;;;;;;;;GAeG;AACH,KAAK,8BAA8B,GAC/B;IACE,OAAO,EAAE,OAAO,CAAA;IAChB;;;;;;OAMG;IACH,YAAY,EAAE,MAAM,CAAA;CACrB,GACD;IACE,OAAO,CAAC,EAAE,SAAS,CAAA;IACnB;yEACqE;IACrE,YAAY,CAAC,EAAE,MAAM,CAAA;CACtB,CAAA;AAEL,MAAM,MAAM,uBAAuB,GAAG,6BAA6B,GACjE,8BAA8B,CAAA;AAEhC,wBAAgB,kBAAkB,CAAC,EACjC,IAAI,EACJ,YAAY,EACZ,KAAY,EACZ,WAAkB,EAClB,OAAmB,EACnB,OAAO,EACP,SAAoB,EACpB,QAAmB,EACnB,YAAY,EACZ,WAAW,EACX,YAAY,EACb,EAAE,uBAAuB,qBAiGzB"}

package/dist/esm/components/dialog/confirmation-dialog/index.js

@@ -25,7 +25,7 @@ const confirmationDialogIconVariants = cva('flex size-10 shrink-0 items-center j
     }
 });
 const ConfirmationDialogIcon = ({ className, variant, ...props }) => (_jsxs("span", { className: cn(confirmationDialogIconVariants({ variant }), className), ...props, children: [variant === 'default' && _jsx(Ban, {}), variant === 'warning' && _jsx(TriangleAlert, {}), variant === 'destructive' && _jsx(Ban, {}), variant === 'success' && _jsx(CheckCircle2, {})] }));
-export function ConfirmationDialog({ open, onOpenChange, title = '', description = '', variant = 'default', loading, onConfirm = () => { }, onCancel = () => { }, confirmLabel, cancelLabel, pendingLabel = 'Processing…' }) {
+export function ConfirmationDialog({ open, onOpenChange, title = null, description = null, variant = 'default', loading, onConfirm = () => { }, onCancel = () => { }, confirmLabel, cancelLabel, pendingLabel }) {
     const [pending, setPending] = React.useState(false);
     const busy = Boolean(loading) || pending;
     const handleConfirm = async () => {
@@ -53,5 +53,8 @@ export function ConfirmationDialog({ open, onOpenChange, title = '', description
                 if (busy) {
                     event.preventDefault();
                 }
-            }, children: [_jsxs(AlertDialogHeader, { className: "flex-row items-center", children: [_jsx(ConfirmationDialogIcon, { variant: variant }), _jsxs("div", { className: "flex flex-col gap-4", children: [_jsx(AlertDialogTitle, { children: title }), _jsx(AlertDialogDescription, { children: description })] })] }), _jsx("span", { role: "status", className: "sr-only", children: busy ? pendingLabel : '' }), _jsxs(AlertDialogFooter, { className: "gap-4", children: [_jsx(AlertDialogCancel, { asChild: true, variant: "secondary", children: _jsx(Button, { onClick: onCancel, disabled: busy, variant: "secondary", size: "small", children: cancelLabel ?? 'Cancel' }) }), _jsx(LoadingButton, { loading: busy, onClick: handleConfirm, variant: "primary", size: "small", "data-testid": "confirm", children: confirmLabel ?? 'Confirm' })] })] }) }));
+            }, children: [_jsxs(AlertDialogHeader, { className: "flex-row items-center", children: [_jsx(ConfirmationDialogIcon, { variant: variant }), _jsxs("div", { className: "flex flex-col gap-4", children: [title == null ||
+                                    title === false ||
+                                    title === true ||
+                                    title === '' ? (_jsx(AlertDialogTitle, { className: "sr-only", children: confirmLabel || 'Confirm' })) : (_jsx(AlertDialogTitle, { children: title })), description == null ? null : (_jsx(AlertDialogDescription, { children: description }))] })] }), pendingLabel ? (_jsx("span", { role: "status", className: "sr-only", children: busy ? pendingLabel : '' })) : null, _jsxs(AlertDialogFooter, { className: "gap-4", children: [_jsx(AlertDialogCancel, { asChild: true, variant: "secondary", children: _jsx(Button, { onClick: onCancel, disabled: busy, variant: "secondary", size: "small", children: cancelLabel ?? 'Cancel' }) }), _jsx(LoadingButton, { loading: busy, onClick: handleConfirm, variant: "primary", size: "small", "data-testid": "confirm", children: confirmLabel ?? 'Confirm' })] })] }) }));
 }

package/dist/esm/components/entity-box/index.d.ts

@@ -1,8 +1,24 @@
 import React from 'react';
 import { CollapsibleContentProps, CollapsibleProps, CollapsibleTriggerProps } from '@radix-ui/react-collapsible';
 declare function EntityBox({ className, children, ...props }: React.ComponentProps<'div'>): React.JSX.Element;
-declare function EntityBoxCollapsible({ className, ...props }: CollapsibleProps): React.JSX.Element;
-declare function EntityBoxCollapsibleTrigger(props: CollapsibleTriggerProps): React.JSX.Element;
+declare function EntityBoxCollapsible({ className, open, defaultOpen, onOpenChange, ...props }: CollapsibleProps): React.JSX.Element;
+export type EntityBoxCollapsibleTriggerProps = CollapsibleTriggerProps & {
+    /** Accessible name while the box is closed. */
+    expandLabel?: string;
+    /** Accessible name while the box is open. */
+    collapseLabel?: string;
+};
+/**
+ * ⛔ THIS TRIGGER HAS NO TEXT NODE. It is a `Settings2` glyph inside a Button,
+ * so without an `aria-label` a screen reader announced "button" and nothing
+ * else (SC 4.1.2) — and this is the control that opens the filter panel on
+ * every console list page.
+ *
+ * The name describes the ACTION and Radix's `aria-expanded` carries the state,
+ * so the two halves do not repeat each other. English defaults because no
+ * consumer passes a label today; a translated console overrides both.
+ */
+declare function EntityBoxCollapsibleTrigger({ expandLabel, collapseLabel, 'aria-label': ariaLabel, ...props }: EntityBoxCollapsibleTriggerProps): React.JSX.Element;
 declare function EntityBoxCollapsibleContent({ children, ...props }: CollapsibleContentProps): React.JSX.Element;
 export interface EntityBoxHeaderProps extends React.ComponentProps<'div'> {
     title: string;

package/dist/esm/components/entity-box/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/entity-box/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAczB,OAAO,EACL,uBAAuB,EACvB,gBAAgB,EAChB,uBAAuB,EACxB,MAAM,6BAA6B,CAAA;AAIpC,iBAAS,SAAS,CAAC,EACjB,SAAS,EACT,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,qBAa7B;AAED,iBAAS,oBAAoB,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,gBAAgB,qBAUtE;AAED,iBAAS,2BAA2B,CAAC,KAAK,EAAE,uBAAuB,qBAQlE;AAED,iBAAS,2BAA2B,CAAC,EACnC,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,uBAAuB,qBAOzB;AAED,MAAM,WAAW,oBAAqB,SAAQ,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC;IACvE,KAAK,EAAE,MAAM,CAAA;IACb,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,YAAY,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;IAC9B;;;;;;;OAOG;IACH,EAAE,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAA;CAC/B;AAED,iBAAS,oBAAoB,CAAC,EAC5B,KAAK,EACL,QAAQ,EACR,OAAO,EACP,YAAY,EACZ,SAAS,EACT,EAAE,EAAE,OAAc,EAClB,GAAG,KAAK,EACT,EAAE,oBAAoB,qBAkCtB;AAED,iBAAS,eAAe,CAAC,EACvB,SAAS,EACT,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,qBAU7B;AAED,iBAAS,gBAAgB,CAAC,EACxB,SAAS,EACT,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,qBAa7B;AAED,OAAO,EACL,SAAS,EACT,oBAAoB,EACpB,2BAA2B,EAC3B,2BAA2B,EAC3B,oBAAoB,EACpB,eAAe,EACf,gBAAgB,EACjB,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/entity-box/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAczB,OAAO,EACL,uBAAuB,EACvB,gBAAgB,EAChB,uBAAuB,EACxB,MAAM,6BAA6B,CAAA;AAIpC,iBAAS,SAAS,CAAC,EACjB,SAAS,EACT,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,qBAa7B;AAYD,iBAAS,oBAAoB,CAAC,EAC5B,SAAS,EACT,IAAI,EACJ,WAAW,EACX,YAAY,EACZ,GAAG,KAAK,EACT,EAAE,gBAAgB,qBAoBlB;AAED,MAAM,MAAM,gCAAgC,GAAG,uBAAuB,GAAG;IACvE,+CAA+C;IAC/C,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,6CAA6C;IAC7C,aAAa,CAAC,EAAE,MAAM,CAAA;CACvB,CAAA;AAED;;;;;;;;;GASG;AACH,iBAAS,2BAA2B,CAAC,EACnC,WAAsB,EACtB,aAA0B,EAC1B,YAAY,EAAE,SAAS,EACvB,GAAG,KAAK,EACT,EAAE,gCAAgC,qBAclC;AAED,iBAAS,2BAA2B,CAAC,EACnC,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,uBAAuB,qBAOzB;AAED,MAAM,WAAW,oBAAqB,SAAQ,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC;IACvE,KAAK,EAAE,MAAM,CAAA;IACb,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,YAAY,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;IAC9B;;;;;;;OAOG;IACH,EAAE,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAA;CAC/B;AAED,iBAAS,oBAAoB,CAAC,EAC5B,KAAK,EACL,QAAQ,EACR,OAAO,EACP,YAAY,EACZ,SAAS,EACT,EAAE,EAAE,OAAc,EAClB,GAAG,KAAK,EACT,EAAE,oBAAoB,qBAkCtB;AAED,iBAAS,eAAe,CAAC,EACvB,SAAS,EACT,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,qBAU7B;AAED,iBAAS,gBAAgB,CAAC,EACxB,SAAS,EACT,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,qBAa7B;AAED,OAAO,EACL,SAAS,EACT,oBAAoB,EACpB,2BAA2B,EAC3B,2BAA2B,EAC3B,oBAAoB,EACpB,eAAe,EACf,gBAAgB,EACjB,CAAA"}

package/dist/esm/components/entity-box/index.js

@@ -1,4 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from 'react';
 import { cn } from '../../lib/utils.js';
 import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '../ui/tooltip/index.js';
 import { CircleHelp, Settings2 } from 'lucide-react';
@@ -8,17 +9,41 @@ import { Separator } from '../ui/separator/index.js';
 function EntityBox({ className, children, ...props }) {
     return (_jsx("div", { "data-slot": "entity-box", className: cn('shadow-entity-box bg-card mb-2 flex items-center justify-between rounded-lg p-6', className), ...props, children: children }));
 }
-function EntityBoxCollapsible({ className, ...props }) {
-    return (_jsx(Collapsible, { className: cn('shadow-entity-box bg-card mb-2 flex flex-col rounded-lg', className), ...props }));
+/**
+ * The open state, republished for the trigger.
+ *
+ * Radix keeps it in a context it does not export, and the trigger one element
+ * down needs it to say what activating it will DO. Mirroring it here rather
+ * than forcing every consumer to lift the state: all ten console call sites
+ * render `<EntityBoxCollapsible>` uncontrolled.
+ */
+const EntityBoxCollapsibleContext = React.createContext(false);
+function EntityBoxCollapsible({ className, open, defaultOpen, onOpenChange, ...props }) {
+    const [uncontrolled, setUncontrolled] = React.useState(defaultOpen ?? false);
+    return (_jsx(EntityBoxCollapsibleContext.Provider, { value: open ?? uncontrolled, children: _jsx(Collapsible, { className: cn('shadow-entity-box bg-card mb-2 flex flex-col rounded-lg', className), open: open, defaultOpen: defaultOpen, onOpenChange: (next) => {
+                setUncontrolled(next);
+                onOpenChange?.(next);
+            }, ...props }) }));
 }
-function EntityBoxCollapsibleTrigger(props) {
-    return (_jsx(CollapsibleTrigger, { ...props, asChild: true, children: _jsx(Button, { variant: "secondary", className: "h-[34px] w-[34px] p-2", children: _jsx(Settings2, { size: 16 }) }) }));
+/**
+ * ⛔ THIS TRIGGER HAS NO TEXT NODE. It is a `Settings2` glyph inside a Button,
+ * so without an `aria-label` a screen reader announced "button" and nothing
+ * else (SC 4.1.2) — and this is the control that opens the filter panel on
+ * every console list page.
+ *
+ * The name describes the ACTION and Radix's `aria-expanded` carries the state,
+ * so the two halves do not repeat each other. English defaults because no
+ * consumer passes a label today; a translated console overrides both.
+ */
+function EntityBoxCollapsibleTrigger({ expandLabel = 'Expand', collapseLabel = 'Collapse', 'aria-label': ariaLabel, ...props }) {
+    const open = React.useContext(EntityBoxCollapsibleContext);
+    return (_jsx(CollapsibleTrigger, { ...props, asChild: true, children: _jsx(Button, { variant: "secondary", className: "h-[34px] w-[34px] p-2", "aria-label": ariaLabel ?? (open ? collapseLabel : expandLabel), children: _jsx(Settings2, { size: 16, "aria-hidden": true }) }) }));
 }
 function EntityBoxCollapsibleContent({ children, ...props }) {
     return (_jsxs(CollapsibleContent, { ...props, children: [_jsx(Separator, { orientation: "horizontal" }), _jsx("div", { className: "grid w-full grid-cols-3 p-6", children: children })] }));
 }
 function EntityBoxHeaderTitle({ title, subtitle, tooltip, tooltipWidth, className, as: Heading = 'h2', ...props }) {
-    return (_jsxs("div", { "data-slot": "entity-box-header", className: cn('flex flex-col items-start', className), ...props, children: [_jsxs("div", { className: "flex items-center gap-[10px]", children: [_jsx(Heading, { className: "text-muted-foreground text-lg font-medium", children: title }), tooltip && (_jsx(TooltipProvider, { children: _jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { asChild: true, children: _jsx(CircleHelp, { className: "pointer text-shadcn-400 h-5 w-5" }) }), _jsx(TooltipContent, { side: "right", style: tooltipWidth
+    return (_jsxs("div", { "data-slot": "entity-box-header", className: cn('flex flex-col items-start', className), ...props, children: [_jsxs("div", { className: "flex items-center gap-[10px]", children: [_jsx(Heading, { className: "text-muted-foreground text-lg font-medium", children: title }), tooltip && (_jsx(TooltipProvider, { children: _jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { asChild: true, children: _jsx(CircleHelp, { className: "pointer text-muted-foreground h-5 w-5" }) }), _jsx(TooltipContent, { side: "right", style: tooltipWidth
                                         ? { width: tooltipWidth, maxWidth: tooltipWidth }
                                         : undefined, children: tooltip })] }) }))] }), subtitle && _jsx("p", { className: "text-muted-foreground text-sm", children: subtitle })] }));
 }

package/dist/esm/components/entity-data-table/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/entity-data-table/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,EAAE,KAAK,EAAE,MAAM,aAAa,CAAA;AAEnC,iBAAS,mBAAmB,CAAC,EAC3B,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,KAAK,CAAC,qBAEpC;AAED,iBAAS,qBAAqB,CAAC,EAC7B,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,qBAW7B;AAED,iBAAS,yBAAyB,CAAC,EACjC,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,GAAG,CAAC,qBAQ3B;AAED,MAAM,MAAM,+BAA+B,GAAG,KAAK,CAAC,iBAAiB,GAAG;IACtE,KAAK,EAAE,KAAK,CAAC,SAAS,CAAA;IACtB,KAAK,CAAC,EAAE,OAAO,CAAA;IACf,UAAU,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;CAC7B,CAAA;AAED,eAAO,MAAM,eAAe;;;;CAI3B,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/entity-data-table/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,EAAE,KAAK,EAAE,MAAM,aAAa,CAAA;AAEnC,iBAAS,mBAAmB,CAAC,EAC3B,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,KAAK,CAAC,qBAEpC;AAED,iBAAS,qBAAqB,CAAC,EAC7B,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,qBAW7B;AAED,iBAAS,yBAAyB,CAAC,EACjC,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,GAAG,CAAC,qBAW3B;AAED,MAAM,MAAM,+BAA+B,GAAG,KAAK,CAAC,iBAAiB,GAAG;IACtE,KAAK,EAAE,KAAK,CAAC,SAAS,CAAA;IACtB,KAAK,CAAC,EAAE,OAAO,CAAA;IACf,UAAU,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;CAC7B,CAAA;AAED,eAAO,MAAM,eAAe;;;;CAI3B,CAAA"}

package/dist/esm/components/entity-data-table/index.js

@@ -8,7 +8,7 @@ function EntityDataTableFooter({ className, ...props }) {
     return (_jsx("div", { "data-slot": "data-table-footer", className: cn('flex flex-row items-center justify-between px-6 py-3', className), ...props }));
 }
 function EntityDataTableFooterText({ className, ...props }) {
-    return (_jsx("p", { "data-slot": "data-table-footer-text", className: cn('text-shadcn-400 text-sm leading-8 italic', className), ...props }));
+    return (_jsx("p", { "data-slot": "data-table-footer-text", className: cn('text-muted-foreground text-sm leading-8 italic', className), ...props }));
 }
 export const EntityDataTable = {
     Root: EntityDataTableRoot,

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

@@ -1,6 +1,6 @@
 import { ReactNode } from 'react';
 import { Control, FieldPathByValue, FieldValues } from 'react-hook-form';
-import { type FileUploadResult } from '../../../components/ui/file-upload/index.js';
+import { type FileUploadError, type FileUploadLabels, type FileUploadResult } from '../../../components/ui/file-upload/index.js';
 import { type RenderableLabel } from '../../../components/form/renderable-label.js';
 type FileUploadFieldOwnProps<T extends FieldValues = FieldValues> = {
     control: Control<T>;
@@ -17,6 +17,15 @@ type FileUploadFieldOwnProps<T extends FieldValues = FieldValues> = {
     maxSizeBytes?: number;
     disabled?: boolean;
     className?: string;
+    /**
+     * Override the picker's user-visible copy. Threaded straight to FileUpload;
+     * omitted fields keep the English defaults. Note `labels.error` governs the
+     * PICKER's own size/type/read refusal only — resolver messages still come
+     * from the schema through FormMessage.
+     */
+    labels?: FileUploadLabels;
+    /** Observe size, type, and read failures after the form value is cleared. */
+    onError?: (error: FileUploadError) => void;
     /** Optional escape hatch to also observe the picked File/clear alongside the form's text value. */
     onSelect?: (result: FileUploadResult | null) => void;
 };
@@ -47,6 +56,6 @@ export type FileUploadFieldProps<T extends FieldValues = FieldValues> = FileUplo
  * rejection; on resolver failure the FormMessage announces. Both surfaces are
  * wired.
  */
-export declare const FileUploadField: <T extends FieldValues = FieldValues>({ control, name, label, description, tooltip, required, accept, maxSizeBytes, disabled, className, onSelect, "aria-label": ariaLabelProp }: FileUploadFieldProps<T>) => import("react").JSX.Element;
+export declare const FileUploadField: <T extends FieldValues = FieldValues>({ control, name, label, description, tooltip, required, accept, maxSizeBytes, disabled, className, labels, onError, onSelect, "aria-label": ariaLabelProp }: FileUploadFieldProps<T>) => import("react").JSX.Element;
 export {};
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/form/file-upload-field/index.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,SAAS,EAAY,MAAM,OAAO,CAAA;AAC3C,OAAO,EAAE,OAAO,EAAE,gBAAgB,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAA;AAWxE,OAAO,EAAc,KAAK,gBAAgB,EAAE,MAAM,6BAA6B,CAAA;AAC/E,OAAO,EAEL,KAAK,eAAe,EACrB,MAAM,oCAAoC,CAAA;AAE3C,KAAK,uBAAuB,CAAC,CAAC,SAAS,WAAW,GAAG,WAAW,IAAI;IAClE,OAAO,EAAE,OAAO,CAAC,CAAC,CAAC,CAAA;IACnB;;;;OAIG;IACH,IAAI,EAAE,gBAAgB,CAAC,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC,CAAA;IAC7C,WAAW,CAAC,EAAE,SAAS,CAAA;IACvB,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,mGAAmG;IACnG,QAAQ,CAAC,EAAE,CAAC,MAAM,EAAE,gBAAgB,GAAG,IAAI,KAAK,IAAI,CAAA;CACrD,CAAA;AAED;;;;GAIG;AACH,MAAM,MAAM,oBAAoB,CAAC,CAAC,SAAS,WAAW,GAAG,WAAW,IAClE,uBAAuB,CAAC,CAAC,CAAC,GACxB,CACI;IAAE,KAAK,EAAE,eAAe,CAAC;IAAC,YAAY,CAAC,EAAE,MAAM,CAAA;CAAE,GACjD;IAAE,KAAK,CAAC,EAAE,KAAK,CAAC;IAAC,YAAY,EAAE,MAAM,CAAA;CAAE,CAC1C,CAAA;AAEL;;;;;;;;;;;;;;GAcG;AACH,eAAO,MAAM,eAAe,GAAI,CAAC,SAAS,WAAW,GAAG,WAAW,EAAE,4IAalE,oBAAoB,CAAC,CAAC,CAAC,gCA8EzB,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/form/file-upload-field/index.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,SAAS,EAAY,MAAM,OAAO,CAAA;AAC3C,OAAO,EAAE,OAAO,EAAE,gBAAgB,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAA;AAWxE,OAAO,EAEL,KAAK,eAAe,EACpB,KAAK,gBAAgB,EACrB,KAAK,gBAAgB,EACtB,MAAM,6BAA6B,CAAA;AACpC,OAAO,EAEL,KAAK,eAAe,EACrB,MAAM,oCAAoC,CAAA;AAE3C,KAAK,uBAAuB,CAAC,CAAC,SAAS,WAAW,GAAG,WAAW,IAAI;IAClE,OAAO,EAAE,OAAO,CAAC,CAAC,CAAC,CAAA;IACnB;;;;OAIG;IACH,IAAI,EAAE,gBAAgB,CAAC,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC,CAAA;IAC7C,WAAW,CAAC,EAAE,SAAS,CAAA;IACvB,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB;;;;;OAKG;IACH,MAAM,CAAC,EAAE,gBAAgB,CAAA;IACzB,6EAA6E;IAC7E,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,eAAe,KAAK,IAAI,CAAA;IAC1C,mGAAmG;IACnG,QAAQ,CAAC,EAAE,CAAC,MAAM,EAAE,gBAAgB,GAAG,IAAI,KAAK,IAAI,CAAA;CACrD,CAAA;AAED;;;;GAIG;AACH,MAAM,MAAM,oBAAoB,CAAC,CAAC,SAAS,WAAW,GAAG,WAAW,IAClE,uBAAuB,CAAC,CAAC,CAAC,GACxB,CACI;IAAE,KAAK,EAAE,eAAe,CAAC;IAAC,YAAY,CAAC,EAAE,MAAM,CAAA;CAAE,GACjD;IAAE,KAAK,CAAC,EAAE,KAAK,CAAC;IAAC,YAAY,EAAE,MAAM,CAAA;CAAE,CAC1C,CAAA;AAEL;;;;;;;;;;;;;;GAcG;AACH,eAAO,MAAM,eAAe,GAAI,CAAC,SAAS,WAAW,GAAG,WAAW,EAAE,6JAelE,oBAAoB,CAAC,CAAC,CAAC,gCAoFzB,CAAA"}

package/dist/esm/components/form/file-upload-field/index.js

@@ -19,7 +19,7 @@ import { hasRenderableLabel } from '../../../components/form/renderable-label.js
  * rejection; on resolver failure the FormMessage announces. Both surfaces are
  * wired.
  */
-export const FileUploadField = ({ control, name, label, description, tooltip, required, accept, maxSizeBytes, disabled, className, onSelect, 'aria-label': ariaLabelProp }) => {
+export const FileUploadField = ({ control, name, label, description, tooltip, required, accept, maxSizeBytes, disabled, className, labels, onError, onSelect, 'aria-label': ariaLabelProp }) => {
     const [localValue, setLocalValue] = useState(null);
     const showLabel = hasRenderableLabel(label);
     // An empty or whitespace-only aria-label is worse than none: it names the
@@ -51,10 +51,15 @@ export const FileUploadField = ({ control, name, label, description, tooltip, re
             // value carries nothing else to tell them apart. Fix needs a reset epoch
             // from react-hook-form, or a form value richer than the file text.
             const shown = localValue && field.value === localValue.text ? localValue : null;
-            return (_jsxs(FormItem, { required: required, children: [showLabel && (_jsx(FormLabel, { extra: tooltip ? _jsx(FormTooltip, { children: tooltip }) : undefined, children: label })), _jsx(FormControl, { children: _jsx(FileUpload, { ref: field.ref, name: field.name, onBlur: field.onBlur, "aria-label": ariaLabel, accept: accept, maxSizeBytes: maxSizeBytes, disabled: disabled, className: className, value: shown, onSelect: (result) => {
+            return (_jsxs(FormItem, { required: required, children: [showLabel && (_jsx(FormLabel, { extra: tooltip ? _jsx(FormTooltip, { children: tooltip }) : undefined, children: label })), _jsx(FormControl, { children: _jsx(FileUpload, { ref: field.ref, name: field.name, onBlur: field.onBlur, "aria-label": ariaLabel, labels: labels, accept: accept, maxSizeBytes: maxSizeBytes, disabled: disabled, className: className, value: shown, onSelect: (result) => {
                                 setLocalValue(result);
                                 field.onChange(result?.text ?? '');
                                 onSelect?.(result);
-                            }, onError: () => field.onChange('') }) }), _jsx(FormMessage, {}), description && _jsx(FormDescription, { children: description })] }));
+                            }, onError: (error) => {
+                                setLocalValue(null);
+                                field.onChange('');
+                                onSelect?.(null);
+                                onError?.(error);
+                            } }) }), _jsx(FormMessage, {}), description && _jsx(FormDescription, { children: description })] }));
         } }));
 };

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

@@ -1,9 +1,48 @@
-import { HTMLInputTypeAttribute, ReactNode } from 'react';
+import { type InputRef } from '../../../components/ui/input/index.js';
+import { HTMLInputTypeAttribute, ReactNode, Ref } from 'react';
 import { Control, FieldValues } from 'react-hook-form';
 export type InputFieldProps<T extends FieldValues = FieldValues> = {
     className?: string;
     name: string;
     type?: HTMLInputTypeAttribute;
+    /**
+     * Announce the field's own invalidity. Reaches the rendered control on BOTH
+     * branches, so a field with no `control` — and therefore no react-hook-form
+     * error state — can still tell a screen reader it is invalid.
+     *
+     * ORed with the form's error, never overriding it: `false` here cannot
+     * suppress a live resolver error. Nobody asked to mute a real validation
+     * failure, and on a financial console a muted one is a wrong number reaching
+     * a money path.
+     *
+     * TypeScript exempts hyphenated JSX attributes from excess-property
+     * checking, so passing this used to compile and then vanish.
+     */
+    'aria-invalid'?: boolean;
+    /** Lower bound, forwarded to the single-line control on both branches. */
+    min?: number | string;
+    /** Upper bound, forwarded to the single-line control on both branches. */
+    max?: number | string;
+    /** Increment, forwarded to the single-line control on both branches. */
+    step?: number | string;
+    /** Character ceiling, forwarded on both branches (single-line and textarea). */
+    maxLength?: number;
+    /** Browser autofill hint. `"off"` is the one a money field usually wants. */
+    autoComplete?: React.HTMLInputAutoCompleteAttribute;
+    /** Virtual-keyboard hint, e.g. `"numeric"` or `"decimal"`. Both branches. */
+    inputMode?: React.HTMLAttributes<HTMLElement>['inputMode'];
+    /** Native validation regex. Single-line only — a textarea has no `pattern`. */
+    pattern?: string;
+    /** Focus the control on mount. React focuses the node rather than emitting an attribute. */
+    autoFocus?: boolean;
+    /**
+     * Imperative handle on the rendered control: `focus()`/`blur()` on the
+     * single-line branch, the textarea node on the `textArea` branch (which
+     * satisfies the same shape). COMPOSED with react-hook-form's own ref when
+     * `control` is present, never replacing it — the form keeps the node it
+     * needs for `shouldFocusError`.
+     */
+    ref?: Ref<InputRef>;
     label?: ReactNode;
     tooltip?: string;
     labelExtra?: ReactNode;
@@ -32,5 +71,5 @@ export type InputFieldProps<T extends FieldValues = FieldValues> = {
     '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, value, 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, min, max, step, maxLength, autoComplete, inputMode, pattern, autoFocus, ref, "aria-invalid": ariaInvalid, ...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,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"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/form/input-field/index.tsx"],"names":[],"mappings":"AAUA,OAAO,EAAS,KAAK,QAAQ,EAAE,MAAM,uBAAuB,CAAA;AAC5D,OAAO,EAAE,sBAAsB,EAAE,SAAS,EAAE,GAAG,EAAmB,MAAM,OAAO,CAAA;AAC/E,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;;;;;;;;;;;;OAYG;IACH,cAAc,CAAC,EAAE,OAAO,CAAA;IACxB,0EAA0E;IAC1E,GAAG,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;IACrB,0EAA0E;IAC1E,GAAG,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;IACrB,wEAAwE;IACxE,IAAI,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;IACtB,gFAAgF;IAChF,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,6EAA6E;IAC7E,YAAY,CAAC,EAAE,KAAK,CAAC,8BAA8B,CAAA;IACnD,6EAA6E;IAC7E,SAAS,CAAC,EAAE,KAAK,CAAC,cAAc,CAAC,WAAW,CAAC,CAAC,WAAW,CAAC,CAAA;IAC1D,+EAA+E;IAC/E,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,4FAA4F;IAC5F,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB;;;;;;OAMG;IACH,GAAG,CAAC,EAAE,GAAG,CAAC,QAAQ,CAAC,CAAA;IACnB,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;AA4CD,eAAO,MAAM,UAAU,GAAI,CAAC,SAAS,WAAW,GAAG,WAAW,EAAE,iTA6B7D,eAAe,CAAC,CAAC,CAAC,gCAyHpB,CAAA"}

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

@@ -2,8 +2,59 @@ 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, 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 })] }));
+import { useMemo, useRef } from 'react';
+/**
+ * Fan one node out to several refs. React hands a node to ONE ref, so a
+ * consumer ref and react-hook-form's `field.ref` cannot both be passed
+ * directly — one silently wins. Only used when the consumer actually supplied
+ * a ref, so a field without one keeps `field.ref`'s own identity and React
+ * never re-attaches it.
+ */
+function fanOutRef(...refs) {
+    return (node) => {
+        const cleanups = [];
+        for (const ref of refs) {
+            if (typeof ref === 'function') {
+                const cleanup = ref(node);
+                cleanups.push(typeof cleanup === 'function' ? cleanup : () => ref(null));
+            }
+            else if (ref) {
+                ;
+                ref.current = node;
+                cleanups.push(() => {
+                    ;
+                    ref.current = null;
+                });
+            }
+        }
+        return () => cleanups.forEach((cleanup) => cleanup());
+    };
+}
+export const InputField = ({ className, type, label, tooltip, labelExtra, placeholder, description, startAdornment, endAdornment, required, readOnly, minHeight, maxHeight, textArea, defaultValue, value, onChange, min, max, step, maxLength, autoComplete, inputMode, pattern, autoFocus, ref, 'aria-invalid': ariaInvalid, ...others }) => {
+    // OR with the form's error, expressed through the Slot merge rather than by
+    // reading the form: FormControl already injects `aria-invalid={!!error}`, and
+    // a child prop only wins that merge when the KEY is present. So emit the key
+    // only for an explicit `true`, and let FormControl answer for every other
+    // case. `true || error` is true; `false || error` is whatever the form says,
+    // which is the whole point — an explicit `false` cannot mute a live error.
+    // With no `control` there is no error to OR against, so FormControl injects
+    // `false` and today's behaviour is unchanged.
+    const ariaInvalidProp = ariaInvalid ? { 'aria-invalid': true } : undefined;
+    const formRef = useRef(undefined);
+    const composedRef = useMemo(() => ref ? fanOutRef((node) => formRef.current?.(node), ref) : ref, 
+    // `others.name` belongs here, and leaving it out is not a lint nit.
+    // react-hook-form hands a fresh `field.ref` for every name, and that ref
+    // only receives the element when React reattaches, which it does only when
+    // this callback's identity changes. Memoised on `ref` alone, one identity
+    // survived a name change, the new field never got its element, and
+    // `form.setFocus(newName)` then found nothing to focus and said nothing.
+    [ref, others.name]);
+    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, maxLength: maxLength, autoComplete: autoComplete, inputMode: inputMode, autoFocus: autoFocus, "data-testid": others['data-testid'], ...ariaInvalidProp, ...binding })) : (_jsx(Input, { className: className, type: type, placeholder: placeholder, readOnly: readOnly, startAdornment: startAdornment, endAdornment: endAdornment, 
+                    // Bounds belong to the single-line control only: `min`/`max`/`step`
+                    // mean nothing on a textarea and would render as invalid markup.
+                    min: min, max: max, step: step, maxLength: maxLength, autoComplete: autoComplete, inputMode: inputMode, 
+                    // Single-line only: `<textarea pattern>` is not a thing.
+                    pattern: pattern, autoFocus: autoFocus, "data-testid": others['data-testid'], ...ariaInvalidProp, ...binding })) }), _jsx(FormMessage, {}), description && _jsx(FormDescription, { children: description })] }));
     if (!others.control) {
         return renderItem({
             name: others.name,
@@ -11,7 +62,10 @@ export const InputField = ({ className, type, label, tooltip, labelExtra, placeh
             // 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)
+            onChange: (e) => onChange?.(e),
+            // Nothing else claims the node on this branch, so the consumer ref goes
+            // straight through. Without it there was no node to focus at all.
+            ref: ref
         });
     }
     return (_jsx(FormField, { ...others, name: others.name, 
@@ -19,16 +73,20 @@ export const InputField = ({ className, type, label, tooltip, labelExtra, placeh
         // 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);
-            }
-        }) }));
+        defaultValue: defaultValue, render: ({ field }) => {
+            formRef.current = field.ref;
+            return 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);
+                },
+                ref: (ref ? composedRef : field.ref)
+            });
+        } }));
 };

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

@@ -9,6 +9,10 @@ export type PasswordFieldProps<TFieldValues extends FieldValues = FieldValues, T
     required?: boolean;
     disabled?: boolean;
     'data-testid'?: string;
+    /** Accessible name of the eye button while the password is hidden. */
+    showPasswordLabel?: string;
+    /** Accessible name of the eye button while the password is showing. */
+    hidePasswordLabel?: string;
 };
-export declare function PasswordField<TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>>({ name, label, tooltip, placeholder, control, required, disabled, 'data-testid': dataTestId }: PasswordFieldProps<TFieldValues, TName>): React.JSX.Element;
+export declare function PasswordField<TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>>({ name, label, tooltip, placeholder, control, required, disabled, 'data-testid': dataTestId, showPasswordLabel, hidePasswordLabel }: PasswordFieldProps<TFieldValues, TName>): React.JSX.Element;
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/form/password-field/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,EAAE,OAAO,EAAE,SAAS,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAA;AAajE,MAAM,MAAM,kBAAkB,CAC5B,YAAY,SAAS,WAAW,GAAG,WAAW,EAC9C,KAAK,SAAS,SAAS,CAAC,YAAY,CAAC,GAAG,SAAS,CAAC,YAAY,CAAC,IAC7D;IACF,IAAI,EAAE,KAAK,CAAA;IACX,KAAK,EAAE,MAAM,CAAA;IACb,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,OAAO,EAAE,OAAO,CAAC,YAAY,CAAC,CAAA;IAC9B,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,aAAa,CAAC,EAAE,MAAM,CAAA;CACvB,CAAA;AAED,wBAAgB,aAAa,CAC3B,YAAY,SAAS,WAAW,GAAG,WAAW,EAC9C,KAAK,SAAS,SAAS,CAAC,YAAY,CAAC,GAAG,SAAS,CAAC,YAAY,CAAC,EAC/D,EACA,IAAI,EACJ,KAAK,EACL,OAAO,EACP,WAAW,EACX,OAAO,EACP,QAAgB,EAChB,QAAgB,EAChB,aAAa,EAAE,UAAU,EAC1B,EAAE,kBAAkB,CAAC,YAAY,EAAE,KAAK,CAAC,qBA0CzC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/form/password-field/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,EAAE,OAAO,EAAE,SAAS,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAA;AAajE,MAAM,MAAM,kBAAkB,CAC5B,YAAY,SAAS,WAAW,GAAG,WAAW,EAC9C,KAAK,SAAS,SAAS,CAAC,YAAY,CAAC,GAAG,SAAS,CAAC,YAAY,CAAC,IAC7D;IACF,IAAI,EAAE,KAAK,CAAA;IACX,KAAK,EAAE,MAAM,CAAA;IACb,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,OAAO,EAAE,OAAO,CAAC,YAAY,CAAC,CAAA;IAC9B,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB,sEAAsE;IACtE,iBAAiB,CAAC,EAAE,MAAM,CAAA;IAC1B,uEAAuE;IACvE,iBAAiB,CAAC,EAAE,MAAM,CAAA;CAC3B,CAAA;AAED,wBAAgB,aAAa,CAC3B,YAAY,SAAS,WAAW,GAAG,WAAW,EAC9C,KAAK,SAAS,SAAS,CAAC,YAAY,CAAC,GAAG,SAAS,CAAC,YAAY,CAAC,EAC/D,EACA,IAAI,EACJ,KAAK,EACL,OAAO,EACP,WAAW,EACX,OAAO,EACP,QAAgB,EAChB,QAAgB,EAChB,aAAa,EAAE,UAAU,EACzB,iBAAmC,EACnC,iBAAmC,EACpC,EAAE,kBAAkB,CAAC,YAAY,EAAE,KAAK,CAAC,qBAuDzC"}

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

@@ -4,7 +4,7 @@ import { FormControl, FormField, FormItem, FormLabel, FormMessage, FormTooltip }
 import { Input, InputAdornment } from '../../../components/ui/input/index.js';
 import { Eye, EyeOff } from 'lucide-react';
 import { IconButton } from '../../../components/ui/icon-button/index.js';
-export function PasswordField({ name, label, tooltip, placeholder, control, required = false, disabled = false, 'data-testid': dataTestId }) {
+export function PasswordField({ name, label, tooltip, placeholder, control, required = false, disabled = false, 'data-testid': dataTestId, showPasswordLabel = 'Show password', hidePasswordLabel = 'Hide password' }) {
     const [show, setShow] = React.useState(false);
-    return (_jsx(FormField, { control: control, name: name, render: ({ field }) => (_jsxs(FormItem, { required: required, children: [_jsx(FormLabel, { extra: tooltip ? _jsx(FormTooltip, { children: tooltip }) : undefined, children: label }), _jsx(FormControl, { children: _jsx(Input, { ...field, type: show ? 'text' : 'password', placeholder: placeholder, endAdornment: _jsx(InputAdornment, { position: "end", children: _jsx(IconButton, { type: "button", variant: "outline", rounded: true, onClick: () => setShow(!show), children: show ? _jsx(EyeOff, {}) : _jsx(Eye, {}) }) }), disabled: disabled, className: "pr-10", "data-testid": dataTestId }) }), _jsx(FormMessage, {})] })) }));
+    return (_jsx(FormField, { control: control, name: name, render: ({ field }) => (_jsxs(FormItem, { required: required, children: [_jsx(FormLabel, { extra: tooltip ? _jsx(FormTooltip, { children: tooltip }) : undefined, children: label }), _jsx(FormControl, { children: _jsx(Input, { ...field, type: show ? 'text' : 'password', placeholder: placeholder, endAdornment: _jsx(InputAdornment, { position: "end", children: _jsx(IconButton, { type: "button", variant: "outline", rounded: true, "aria-label": show ? hidePasswordLabel : showPasswordLabel, onClick: () => setShow(!show), children: show ? _jsx(EyeOff, { "aria-hidden": true }) : _jsx(Eye, { "aria-hidden": true }) }) }), disabled: disabled, className: "pr-10", "data-testid": dataTestId }) }), _jsx(FormMessage, {})] })) }));
 }

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

@@ -13,7 +13,15 @@ type SelectFieldSharedProps<T extends FieldValues = FieldValues> = PropsWithChil
      *  with `value` + `onChange`. */
     control?: Control<T>;
     required?: boolean;
+    /** Copy for the "nothing to pick" row. Defaults to "No options found." */
     emptyMessage?: string;
+    /**
+     * Placed on the field's own root box, merged with its spacing rather than
+     * replacing it. The root is the element a parent grid positions, so
+     * without this a consumer had to wrap the field in a spare div just to
+     * span a column.
+     */
+    className?: string;
     'data-testid'?: string;
 };
 /**
@@ -39,6 +47,6 @@ type SelectFieldModeProps = {
     onChange?: (value: string) => void;
 };
 export type SelectFieldProps<T extends FieldValues = FieldValues> = SelectFieldSharedProps<T> & SelectFieldModeProps;
-export declare const SelectField: <T extends FieldValues = FieldValues>({ name, label, tooltip, labelExtra, required, placeholder, description, disabled, readOnly, multi, control, value, children, emptyMessage, onChange, ...others }: SelectFieldProps<T>) => React.JSX.Element;
+export declare const SelectField: <T extends FieldValues = FieldValues>({ name, label, tooltip, labelExtra, required, placeholder, description, disabled, readOnly, multi, control, value, children, emptyMessage, className, onChange, ...others }: SelectFieldProps<T>) => React.JSX.Element;
 export {};
 //# sourceMappingURL=index.d.ts.map