@lerianstudio/sindarian-ui 2.0.0-beta.1 → 2.0.0-beta.2

package/dist/components/ui/file-upload/index.js

@@ -36,13 +36,21 @@ var __importStar = (this && this.__importStar) || (function () {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.FileUpload = void 0;
 exports.validateFile = validateFile;
+exports.humanizeSize = humanizeSize;
 const jsx_runtime_1 = require("react/jsx-runtime");
 /**
- * FileUpload — a controlled "pick a file, read it to text, hand back the text"
- * primitive. The defining job: select one file (by click, keyboard, or
- * drag-and-drop), validate it against an accept filter + a byte ceiling, read
- * it as UTF-8 via FileReader.readAsText, and emit `{ file, text }`. Binary/DER
- * (.pfx/.p12) is explicitly OUT of scope — readAsText only.
+ * FileUpload — a controlled "pick a file, hand it back" primitive. The defining
+ * job: select one file (by click, keyboard, or drag-and-drop), validate it
+ * against an accept filter + a byte ceiling, and emit `{ file, text }`.
+ *
+ * `readAs` decides whether the bytes are decoded on the way through. `'text'`
+ * (the default) reads UTF-8 via FileReader.readAsText, which is what a PEM/CSV
+ * host wants. `'none'` hands the `File` over untouched and is the only mode a
+ * BINARY file can use: a PDF, XLSX or PFX put through readAsText decodes into
+ * replacement-character garbage, and that garbage string is then retained for
+ * as long as the host holds the value — 20 MiB of PDF became a useless 20 MiB
+ * string, and the host still had to read the file a second time to get at the
+ * real bytes.
  *
  * The real `<input type="file">` IS the accessible control: it is `sr-only`
  * (visually hidden) but focusable and labelable — never `aria-hidden`, never
@@ -63,6 +71,11 @@ const jsx_runtime_1 = require("react/jsx-runtime");
  * a value, so it cannot masquerade as valid. `accept` is validated against
  * BOTH extension and MIME because the native `accept` attribute is only a
  * browser hint and is bypassable via drag-drop.
+ *
+ * A host that already announces the rejection itself — a toast in its own
+ * locale, driven off `onError` — silences this one by returning nothing from
+ * `labels.error`. Two announcements for one event, in two languages, is the
+ * accessibility defect; the wording is not.
  */
 const React = __importStar(require("react"));
 const lucide_react_1 = require("lucide-react");
@@ -105,7 +118,11 @@ function matchesAccept(file, accept) {
         return mime === token;
     });
 }
-/** Humanize a byte count for the selected-file chip. Binary units, 1 decimal. */
+/**
+ * Humanize a byte count for the selected-file chip. Binary units, 1 decimal.
+ * Exported so a `labels.error` override can format `maxSizeBytes` exactly the
+ * way the chip and the default message do, instead of re-deriving binary units.
+ */
 function humanizeSize(bytes) {
     if (bytes < 1024)
         return `${bytes} B`;
@@ -118,8 +135,8 @@ function humanizeSize(bytes) {
     }
     return `${size.toFixed(1)} ${units[unit]}`;
 }
-/** A human-readable announcement for each rejection kind. */
-function errorMessage(error) {
+/** The default English announcement for each rejection kind. */
+function defaultErrorMessage(error) {
     switch (error.kind) {
         case 'too-large':
             return `File is too large (max ${humanizeSize(error.maxSizeBytes)}).`;
@@ -129,7 +146,7 @@ function errorMessage(error) {
             return 'Could not read the file.';
     }
 }
-exports.FileUpload = React.forwardRef(function FileUpload({ accept, maxSizeBytes, value, onSelect, onError, disabled = false, id, className, 'aria-invalid': ariaInvalid, 'aria-required': ariaRequired, 'aria-describedby': ariaDescribedby, 'aria-label': ariaLabel, ...rest }, ref) {
+exports.FileUpload = React.forwardRef(function FileUpload({ accept, maxSizeBytes, value, readAs = 'text', labels, onSelect, onError, disabled = false, id, className, 'aria-invalid': ariaInvalid, 'aria-required': ariaRequired, 'aria-describedby': ariaDescribedby, 'aria-label': ariaLabel, ...rest }, ref) {
     const internalRef = React.useRef(null);
     React.useImperativeHandle(ref, () => internalRef.current);
     const reactId = React.useId();
@@ -141,12 +158,21 @@ exports.FileUpload = React.forwardRef(function FileUpload({ accept, maxSizeBytes
     // component's own validation/read error — a self-detected bad pick must read
     // as invalid even outside a form.
     const invalid = ariaInvalid || error !== null;
+    // Resolve the announcement BEFORE deciding whether the alert exists: a
+    // consumer that returns nothing is opting out of this surface entirely,
+    // and an association pointing at an unrendered node is worse than none.
+    const resolved = error
+        ? labels?.error
+            ? labels.error(error)
+            : defaultErrorMessage(error)
+        : null;
+    const errorText = resolved ? resolved : null;
     // Radix Slot OVERWRITES aria-describedby (it does not merge), so merge the
     // primitive's own role=alert error id with the FormControl-injected one so
     // both associations coexist on the input. A plain join, never `cn` —
     // tailwind-merge treats these as class names and would drop an id that
     // happens to look like a conflicting utility.
-    const describedBy = [ariaDescribedby, error ? errorId : undefined]
+    const describedBy = [ariaDescribedby, errorText ? errorId : undefined]
         .filter(Boolean)
         .join(' ') || undefined;
     // Last-resolved-wins: a slow read for pick A must not overwrite a newer
@@ -162,6 +188,15 @@ exports.FileUpload = React.forwardRef(function FileUpload({ accept, maxSizeBytes
             onError?.(validationError);
             return;
         }
+        // Binary path: no decode, no reader, no retained garbage string. The
+        // stale-rejection clear still has to happen here — the alert is this
+        // component's own state and a good pick must retire it.
+        if (readAs === 'none') {
+            readerRef.current = null;
+            setError(null);
+            onSelect({ file, text: '' });
+            return;
+        }
         const reader = new FileReader();
         readerRef.current = reader;
         reader.onload = () => {
@@ -228,10 +263,10 @@ exports.FileUpload = React.forwardRef(function FileUpload({ accept, maxSizeBytes
     return ((0, jsx_runtime_1.jsxs)("div", { className: (0, utils_1.cn)('space-y-2', className), children: [(0, jsx_runtime_1.jsxs)("div", { onClick: openPicker, onDragOver: onDragOver, onDragLeave: onDragLeave, onDrop: onDrop, className: (0, utils_1.cn)('border-input bg-card focus-within:ring-ring focus-within:ring-offset-background aria-[invalid=true]:border-destructive aria-[invalid=true]:focus-within:ring-destructive flex w-full items-center gap-3 rounded-md border px-3 py-4 text-sm shadow-xs transition-colors focus-within:ring-2 focus-within:ring-offset-1 focus-within:outline-none', dragActive &&
                     'border-ring ring-ring ring-offset-background ring-2 ring-offset-1', disabled
                     ? 'border-muted bg-muted/30 cursor-not-allowed shadow-none'
-                    : 'cursor-pointer'), "aria-invalid": invalid || undefined, children: [(0, jsx_runtime_1.jsx)("input", { ref: internalRef, id: inputId, type: "file", accept: accept, disabled: disabled, className: "sr-only", "aria-invalid": invalid || undefined, "aria-required": ariaRequired || undefined, "aria-describedby": describedBy, "aria-label": ariaLabel, onChange: onInputChange, ...rest }), (0, jsx_runtime_1.jsx)(lucide_react_1.Upload, { className: "text-muted-foreground size-4 shrink-0", "aria-hidden": "true" }), value ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)("span", { className: "min-w-0 flex-1 truncate", children: [(0, jsx_runtime_1.jsx)("span", { className: "text-foreground font-medium", children: value.file.name }), ' ', (0, jsx_runtime_1.jsx)("span", { className: "text-muted-foreground tabular-nums", children: humanizeSize(value.file.size) })] }), (0, jsx_runtime_1.jsx)(icon_button_1.IconButton, { type: "button", variant: "plain", size: "small", disabled: disabled, "aria-label": "Remove file", onClick: (event) => {
+                    : 'cursor-pointer'), "aria-invalid": invalid || undefined, children: [(0, jsx_runtime_1.jsx)("input", { ref: internalRef, id: inputId, type: "file", accept: accept, disabled: disabled, className: "sr-only", "aria-invalid": invalid || undefined, "aria-required": ariaRequired || undefined, "aria-describedby": describedBy, "aria-label": ariaLabel, onChange: onInputChange, ...rest }), (0, jsx_runtime_1.jsx)(lucide_react_1.Upload, { className: "text-muted-foreground size-4 shrink-0", "aria-hidden": "true" }), value ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)("span", { className: "min-w-0 flex-1 truncate", children: [(0, jsx_runtime_1.jsx)("span", { className: "text-foreground font-medium", children: value.file.name }), ' ', (0, jsx_runtime_1.jsx)("span", { className: "text-muted-foreground tabular-nums", children: humanizeSize(value.file.size) })] }), (0, jsx_runtime_1.jsx)(icon_button_1.IconButton, { type: "button", variant: "plain", size: "small", disabled: disabled, "aria-label": labels?.remove?.trim() ? labels.remove : 'Remove file', onClick: (event) => {
                                     // Don't bubble to the zone's openPicker and re-open the dialog.
                                     event.stopPropagation();
                                     clear();
-                                }, children: (0, jsx_runtime_1.jsx)(lucide_react_1.X, { className: "size-4", "aria-hidden": "true" }) })] })) : ((0, jsx_runtime_1.jsxs)("span", { className: "text-muted-foreground", children: [(0, jsx_runtime_1.jsx)("span", { className: "text-foreground font-medium", children: "Choose a file" }), ' ', "or drag and drop"] }))] }), error ? ((0, jsx_runtime_1.jsx)("p", { id: errorId, role: "alert", className: "text-system-error-h1a text-xs font-medium", children: errorMessage(error) })) : null] }));
+                                }, children: (0, jsx_runtime_1.jsx)(lucide_react_1.X, { className: "size-4", "aria-hidden": "true" }) })] })) : ((0, jsx_runtime_1.jsxs)("span", { className: "text-muted-foreground", children: [(0, jsx_runtime_1.jsx)("span", { className: "text-foreground font-medium", children: labels?.action ?? 'Choose a file' }), ' ', labels?.hint ?? 'or drag and drop'] }))] }), errorText ? ((0, jsx_runtime_1.jsx)("p", { id: errorId, role: "alert", className: "text-system-error-h1a text-xs font-medium", children: errorText })) : null] }));
 });
 exports.FileUpload.displayName = 'FileUpload';

package/dist/components/ui/form.d.ts

@@ -16,7 +16,11 @@ declare const useFormField: () => {
     formDescriptionId: string;
     formMessageId: string;
     required: boolean | undefined;
+    described: Record<DescribingSlot, boolean> | undefined;
+    onDescribedChange: ((slot: DescribingSlot, rendered: boolean) => void) | undefined;
 };
+/** The two slots that can describe a control, in the order a reader hears them. */
+type DescribingSlot = 'message' | 'description';
 export type FormItemProps = React.HTMLAttributes<HTMLDivElement> & {
     required?: boolean;
 };

package/dist/components/ui/form.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"form.d.ts","sourceRoot":"","sources":["../../../src/components/ui/form.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,KAAK,cAAc,MAAM,uBAAuB,CAAA;AAEvD,OAAO,EAEL,eAAe,EACf,SAAS,EACT,WAAW,EAGZ,MAAM,iBAAiB,CAAA;AAKxB,OAAO,EAAE,oBAAoB,EAAE,MAAM,yBAAyB,CAAA;AAS9D,QAAA,MAAM,IAAI,4MAAe,CAAA;AAazB,QAAA,MAAM,SAAS,GACb,YAAY,SAAS,WAAW,GAAG,WAAW,EAC9C,KAAK,SAAS,SAAS,CAAC,YAAY,CAAC,GAAG,SAAS,CAAC,YAAY,CAAC,EAC/D,cAEC,eAAe,CAAC,YAAY,EAAE,KAAK,CAAC,sBAMtC,CAAA;AAED,QAAA,MAAM,YAAY;;;;;;;;;;;;CAyBjB,CAAA;AAWD,MAAM,MAAM,aAAa,GAAG,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,GAAG;IACjE,QAAQ,CAAC,EAAE,OAAO,CAAA;CACnB,CAAA;AAED,QAAA,MAAM,QAAQ;eAHD,OAAO;wCAanB,CAAA;AAGD,MAAM,MAAM,cAAc,GAAG,KAAK,CAAC,wBAAwB,CACzD,OAAO,cAAc,CAAC,IAAI,CAC3B,GAAG;IACF,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;CACxB,CAAA;AAED,QAAA,MAAM,SAAS;YAHL,KAAK,CAAC,SAAS;0CA6BvB,CAAA;AAGF,eAAO,MAAM,WAAW,GAAI,yBAAyB,oBAAoB,sBASxE,CAAA;AAED,QAAA,MAAM,WAAW;;gFAmBf,CAAA;AAGF,QAAA,MAAM,eAAe,yHAcnB,CAAA;AAGF,QAAA,MAAM,WAAW,yHAuBf,CAAA;AAGF,OAAO,EACL,YAAY,EACZ,IAAI,EACJ,QAAQ,EACR,SAAS,EACT,WAAW,EACX,eAAe,EACf,WAAW,EACX,SAAS,EACV,CAAA"}
+{"version":3,"file":"form.d.ts","sourceRoot":"","sources":["../../../src/components/ui/form.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,KAAK,cAAc,MAAM,uBAAuB,CAAA;AAEvD,OAAO,EAEL,eAAe,EACf,SAAS,EACT,WAAW,EAGZ,MAAM,iBAAiB,CAAA;AAKxB,OAAO,EAAE,oBAAoB,EAAE,MAAM,yBAAyB,CAAA;AAS9D,QAAA,MAAM,IAAI,4MAAe,CAAA;AAazB,QAAA,MAAM,SAAS,GACb,YAAY,SAAS,WAAW,GAAG,WAAW,EAC9C,KAAK,SAAS,SAAS,CAAC,YAAY,CAAC,GAAG,SAAS,CAAC,YAAY,CAAC,EAC/D,cAEC,eAAe,CAAC,YAAY,EAAE,KAAK,CAAC,sBAMtC,CAAA;AAED,QAAA,MAAM,YAAY;;;;;;;;;;;;;+BA4CW,cAAc,YAAY,OAAO,KAAK,IAAI;CAjBtE,CAAA;AAED,mFAAmF;AACnF,KAAK,cAAc,GAAG,SAAS,GAAG,aAAa,CAAA;AAwC/C,MAAM,MAAM,aAAa,GAAG,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,GAAG;IACjE,QAAQ,CAAC,EAAE,OAAO,CAAA;CACnB,CAAA;AAED,QAAA,MAAM,QAAQ;eAHD,OAAO;wCA8BnB,CAAA;AAGD,MAAM,MAAM,cAAc,GAAG,KAAK,CAAC,wBAAwB,CACzD,OAAO,cAAc,CAAC,IAAI,CAC3B,GAAG;IACF,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;CACxB,CAAA;AAED,QAAA,MAAM,SAAS;YAHL,KAAK,CAAC,SAAS;0CA6BvB,CAAA;AAGF,eAAO,MAAM,WAAW,GAAI,yBAAyB,oBAAoB,sBASxE,CAAA;AAED,QAAA,MAAM,WAAW;;gFAgCf,CAAA;AAGF,QAAA,MAAM,eAAe,yHAgBnB,CAAA;AAGF,QAAA,MAAM,WAAW,yHA6Bf,CAAA;AAGF,OAAO,EACL,YAAY,EACZ,IAAI,EACJ,QAAQ,EACR,SAAS,EACT,WAAW,EACX,eAAe,EACf,WAAW,EACX,SAAS,EACV,CAAA"}

package/dist/components/ui/form.js

@@ -61,7 +61,7 @@ const useFormField = () => {
     const fieldState = form && fieldContext.name
         ? form.getFieldState(fieldContext.name, form.formState)
         : undefined;
-    const { id, required } = itemContext;
+    const { id, required, described, onDescribedChange } = itemContext;
     return {
         id,
         name: fieldContext.name,
@@ -69,14 +69,38 @@ const useFormField = () => {
         formDescriptionId: `${id}-form-item-description`,
         formMessageId: `${id}-form-item-message`,
         required,
+        described,
+        onDescribedChange,
         ...fieldState
     };
 };
 exports.useFormField = useFormField;
 const FormItemContext = React.createContext({});
+/**
+ * Announce that this slot is on the page, for as long as it is.
+ *
+ * `rendered` is a parameter rather than a caller-side condition because
+ * `FormMessage` returns null when it has nothing to say, and a hook cannot sit
+ * behind that early return.
+ */
+function useDescribingSlot(slot, rendered) {
+    const { onDescribedChange } = React.useContext(FormItemContext);
+    React.useEffect(() => {
+        if (!rendered)
+            return;
+        onDescribedChange?.(slot, true);
+        return () => onDescribedChange?.(slot, false);
+    }, [onDescribedChange, slot, rendered]);
+}
 const FormItem = React.forwardRef(({ className, required, ...props }, ref) => {
     const id = React.useId();
-    return ((0, jsx_runtime_1.jsx)(FormItemContext.Provider, { value: { id, required }, children: (0, jsx_runtime_1.jsx)("div", { ref: ref, className: (0, utils_1.cn)('space-y-2', className), ...props }) }));
+    const [described, setDescribed] = React.useState({ message: false, description: false });
+    // Keeps the object identity when nothing moved, so a slot re-registering
+    // does not re-render the item for no reason.
+    const onDescribedChange = React.useCallback((slot, rendered) => setDescribed((current) => current[slot] === rendered
+        ? current
+        : { ...current, [slot]: rendered }), []);
+    return ((0, jsx_runtime_1.jsx)(FormItemContext.Provider, { value: { id, required, described, onDescribedChange }, children: (0, jsx_runtime_1.jsx)("div", { ref: ref, className: (0, utils_1.cn)('space-y-2', className), ...props }) }));
 });
 exports.FormItem = FormItem;
 FormItem.displayName = 'FormItem';
@@ -92,15 +116,28 @@ FormLabel.displayName = 'FormLabel';
 const FormTooltip = ({ children, ...others }) => ((0, jsx_runtime_1.jsx)(tooltip_1.TooltipProvider, { ...others, children: (0, jsx_runtime_1.jsxs)(tooltip_1.Tooltip, { children: [(0, jsx_runtime_1.jsx)(tooltip_1.TooltipTrigger, { asChild: true, children: (0, jsx_runtime_1.jsx)(lucide_react_1.HelpCircle, { className: "text-container-text ml-2 h-4 w-4" }) }), (0, jsx_runtime_1.jsx)(tooltip_1.TooltipContent, { children: children })] }) }));
 exports.FormTooltip = FormTooltip;
 const FormControl = React.forwardRef(({ ...props }, ref) => {
-    const { error, formItemId, formDescriptionId, formMessageId } = useFormField();
-    return ((0, jsx_runtime_1.jsx)(react_slot_1.Slot, { ref: ref, id: formItemId, "aria-describedby": !error
-            ? `${formDescriptionId}`
-            : `${formDescriptionId} ${formMessageId}`, "aria-invalid": !!error, ...props }));
+    const { error, formItemId, formDescriptionId, formMessageId, described } = useFormField();
+    // Only ids that resolve. A screen reader drops a dangling IDREF silently, so
+    // the barrier this removes is diagnostic rather than operational: a form with
+    // thirteen broken associations is a form where a real one cannot be spotted.
+    //
+    // Message first: a reader hears the error before the hint. `undefined` when
+    // both slots are empty, which drops the attribute — and, because Radix Slot
+    // OVERWRITES rather than merges, still lets the wrapped element carry its own
+    // (`ui/file-upload` merges the injected id with its own error id that way).
+    const describedBy = [
+        described?.message ? formMessageId : undefined,
+        described?.description ? formDescriptionId : undefined
+    ]
+        .filter(Boolean)
+        .join(' ') || undefined;
+    return ((0, jsx_runtime_1.jsx)(react_slot_1.Slot, { ref: ref, id: formItemId, "aria-describedby": describedBy, "aria-invalid": !!error, ...props }));
 });
 exports.FormControl = FormControl;
 FormControl.displayName = 'FormControl';
 const FormDescription = React.forwardRef(({ className, ...props }, ref) => {
     const { formDescriptionId } = useFormField();
+    useDescribingSlot('description', true);
     return ((0, jsx_runtime_1.jsx)("p", { ref: ref, id: formDescriptionId, className: (0, utils_1.cn)('text-muted-foreground text-xs font-medium', className), ...props }));
 });
 exports.FormDescription = FormDescription;
@@ -108,6 +145,11 @@ FormDescription.displayName = 'FormDescription';
 const FormMessage = React.forwardRef(({ className, children, ...props }, ref) => {
     const { error, formMessageId } = useFormField();
     const body = error ? String(error?.message) : children;
+    // Registered on `body`, not on `error`: a message given plain children
+    // renders copy that the control has to point at too. The old expression only
+    // added the message id when react-hook-form reported an error, so a
+    // standalone message was rendered and never associated.
+    useDescribingSlot('message', Boolean(body));
     if (!body) {
         return null;
     }

package/dist/components/ui/toggle-group/index.d.ts

@@ -13,6 +13,6 @@ declare const toggleVariants: (props?: ({
 declare function ToggleGroup({ className, variant, size, spacing, children, style, ...props }: React.ComponentProps<typeof ToggleGroupPrimitive.Root> & VariantProps<typeof toggleVariants> & {
     spacing?: number;
 }): React.JSX.Element;
-declare function ToggleGroupItem({ className, children, variant, size, ...props }: React.ComponentProps<typeof ToggleGroupPrimitive.Item> & VariantProps<typeof toggleVariants>): React.JSX.Element;
+declare function ToggleGroupItem({ className, children, variant, size, onFocus, ...props }: React.ComponentProps<typeof ToggleGroupPrimitive.Item> & VariantProps<typeof toggleVariants>): React.JSX.Element;
 export { ToggleGroup, ToggleGroupItem };
 //# sourceMappingURL=index.d.ts.map

package/dist/components/ui/toggle-group/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/ui/toggle-group/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,KAAK,oBAAoB,MAAM,8BAA8B,CAAA;AACpE,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAA;AAIjE;;;;GAIG;AACH,QAAA,MAAM,cAAc;;;8EAoBnB,CAAA;AAYD,iBAAS,WAAW,CAAC,EACnB,SAAS,EACT,OAAO,EACP,IAAI,EACJ,OAAW,EACX,QAAQ,EACR,KAAK,EACL,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,oBAAoB,CAAC,IAAI,CAAC,GACvD,YAAY,CAAC,OAAO,cAAc,CAAC,GAAG;IACpC,OAAO,CAAC,EAAE,MAAM,CAAA;CACjB,qBAwBF;AAED,iBAAS,eAAe,CAAC,EACvB,SAAS,EACT,QAAQ,EACR,OAAO,EACP,IAAI,EACJ,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,oBAAoB,CAAC,IAAI,CAAC,GACvD,YAAY,CAAC,OAAO,cAAc,CAAC,qBAuBpC;AAED,OAAO,EAAE,WAAW,EAAE,eAAe,EAAE,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/ui/toggle-group/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,KAAK,oBAAoB,MAAM,8BAA8B,CAAA;AACpE,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAA;AAIjE;;;;GAIG;AACH,QAAA,MAAM,cAAc;;;8EAoBnB,CAAA;AA4DD,iBAAS,WAAW,CAAC,EACnB,SAAS,EACT,OAAO,EACP,IAAI,EACJ,OAAW,EACX,QAAQ,EACR,KAAK,EACL,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,oBAAoB,CAAC,IAAI,CAAC,GACvD,YAAY,CAAC,OAAO,cAAc,CAAC,GAAG;IACpC,OAAO,CAAC,EAAE,MAAM,CAAA;CACjB,qBA+BF;AAED,iBAAS,eAAe,CAAC,EACvB,SAAS,EACT,QAAQ,EACR,OAAO,EACP,IAAI,EACJ,OAAO,EACP,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,oBAAoB,CAAC,IAAI,CAAC,GACvD,YAAY,CAAC,OAAO,cAAc,CAAC,qBAiDpC;AAED,OAAO,EAAE,WAAW,EAAE,eAAe,EAAE,CAAA"}

package/dist/components/ui/toggle-group/index.js

@@ -63,12 +63,58 @@ const toggleVariants = (0, class_variance_authority_1.cva)("hover:bg-muted hover
         size: 'default'
     }
 });
+const ARROW_KEYS = ['ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight'];
+/**
+ * Is an arrow key down right now?
+ *
+ * This is how an item tells keyboard navigation apart from a pointer press or a
+ * programmatic focus, and it is the seam Radix uses for the same job in its own
+ * `RadioGroup`. It works because `RovingFocusGroup` defers the focus move to a
+ * `setTimeout`: the keydown has already bubbled to `document` and set the flag
+ * by the time the item receives `focus`.
+ *
+ * The distinction is not cosmetic. A pointer press focuses BEFORE the click
+ * lands, so selecting on every focus would turn one click into
+ * select-then-deselect and break mouse selection outright.
+ *
+ * Returns null when disabled, so `type="multiple"` carries no flag to read.
+ */
+function useArrowKeyPressed(enabled) {
+    const arrowKeyPressed = React.useRef(false);
+    React.useEffect(() => {
+        if (!enabled)
+            return;
+        const onKeyDown = (event) => {
+            if (ARROW_KEYS.includes(event.key))
+                arrowKeyPressed.current = true;
+        };
+        const onKeyUp = () => {
+            arrowKeyPressed.current = false;
+        };
+        document.addEventListener('keydown', onKeyDown);
+        document.addEventListener('keyup', onKeyUp);
+        window.addEventListener('blur', onKeyUp);
+        return () => {
+            document.removeEventListener('keydown', onKeyDown);
+            document.removeEventListener('keyup', onKeyUp);
+            window.removeEventListener('blur', onKeyUp);
+            // A group unmounted mid-keystroke never sees the keyup.
+            arrowKeyPressed.current = false;
+        };
+    }, [enabled]);
+    return enabled ? arrowKeyPressed : null;
+}
 const ToggleGroupContext = React.createContext({
     size: 'default',
     variant: 'default',
-    spacing: 0
+    spacing: 0,
+    arrowKeyPressed: null
 });
 function ToggleGroup({ className, variant, size, spacing = 0, children, style, ...props }) {
+    // Read, never destructured: `type` is the discriminant of the Radix props
+    // union, and pulling it out then spreading it back widens the union so the
+    // single/multiple props stop resolving.
+    const arrowKeyPressed = useArrowKeyPressed(props.type === 'single');
     return ((0, jsx_runtime_1.jsx)(ToggleGroupPrimitive.Root, { "data-slot": "toggle-group", "data-variant": variant, "data-size": size, "data-spacing": spacing, 
         // Caller style first: `--gap` is ours and must survive, but everything
         // else the caller passes has to reach the element.
@@ -76,12 +122,35 @@ function ToggleGroup({ className, variant, size, spacing = 0, children, style, .
         // Legacy carried a `data-[spacing=default]:...:shadow-xs` rule here that
         // never matched — `data-spacing` is always a number. Removed rather than
         // activated, so the rendered pixels stay identical to sindarian-x.
-        'group/toggle-group flex w-fit items-center gap-[--spacing(var(--gap))] rounded-md', className), ...props, children: (0, jsx_runtime_1.jsx)(ToggleGroupContext.Provider, { value: { variant, size, spacing }, children: children }) }));
+        'group/toggle-group flex w-fit items-center gap-[--spacing(var(--gap))] rounded-md', className), ...props, children: (0, jsx_runtime_1.jsx)(ToggleGroupContext.Provider, { value: { variant, size, spacing, arrowKeyPressed }, children: children }) }));
 }
-function ToggleGroupItem({ className, children, variant, size, ...props }) {
+function ToggleGroupItem({ className, children, variant, size, onFocus, ...props }) {
     const context = React.useContext(ToggleGroupContext);
+    /**
+     * Selection follows focus, which is what `role="radio"` promises.
+     *
+     * With `type="single"` Radix puts the group on the ARIA radio pattern: the
+     * root is a `radiogroup`, each item a `radio` with `aria-checked`. Under that
+     * pattern an arrow key both moves focus and checks the item it lands on.
+     * Radix only moves focus, so a screen-reader operator used to arrow across
+     * "radio, not checked, 2 of 3" with nothing ever selected.
+     *
+     * `type="multiple"` is a `toolbar` of `aria-pressed` buttons and keeps its
+     * current behavior, where moving focus without pressing is correct: the flag
+     * is null there.
+     *
+     * Clicking the element rather than writing the value keeps a single
+     * activation path, so Radix's own toggle and any caller `onClick` both fire
+     * exactly as they do for a real click.
+     */
+    const handleFocus = (event) => {
+        onFocus?.(event);
+        if (context.arrowKeyPressed?.current) {
+            event.currentTarget.click();
+        }
+    };
     return ((0, jsx_runtime_1.jsx)(ToggleGroupPrimitive.Item, { "data-slot": "toggle-group-item", "data-variant": context.variant || variant, "data-size": context.size || size, "data-spacing": context.spacing, className: (0, utils_1.cn)(toggleVariants({
             variant: context.variant || variant,
             size: context.size || size
-        }), 'w-auto min-w-0 shrink-0 px-3 focus:z-10 focus-visible:z-10', 'data-[spacing=0]:rounded-none data-[spacing=0]:shadow-none data-[spacing=0]:first:rounded-l-md data-[spacing=0]:last:rounded-r-md data-[spacing=0]:data-[variant=outline]:border-l-0 data-[spacing=0]:data-[variant=outline]:first:border-l', className), ...props, children: children }));
+        }), 'w-auto min-w-0 shrink-0 px-3 focus:z-10 focus-visible:z-10', 'data-[spacing=0]:rounded-none data-[spacing=0]:shadow-none data-[spacing=0]:first:rounded-l-md data-[spacing=0]:last:rounded-r-md data-[spacing=0]:data-[variant=outline]:border-l-0 data-[spacing=0]:data-[variant=outline]:first:border-l', className), ...props, onFocus: handleFocus, children: children }));
 }

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)
+            });
+        } }));
 };