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

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

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/form/select-field/index.tsx"],"names":[],"mappings":"AAuBA,OAAO,KAAK,EAAE,EAAE,iBAAiB,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAC3D,OAAO,EACL,OAAO,EAEP,WAAW,EAEZ,MAAM,iBAAiB,CAAA;AAExB,KAAK,sBAAsB,CAAC,CAAC,SAAS,WAAW,GAAG,WAAW,IAC7D,iBAAiB,GAAG;IAClB,IAAI,EAAE,MAAM,CAAA;IACZ,KAAK,CAAC,EAAE,SAAS,CAAA;IACjB,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,UAAU,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC5B,WAAW,CAAC,EAAE,SAAS,CAAA;IACvB,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB;qCACiC;IACjC,OAAO,CAAC,EAAE,OAAO,CAAC,CAAC,CAAC,CAAA;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,aAAa,CAAC,EAAE,MAAM,CAAA;CACvB,CAAA;AAEH;;;;;;;;GAQG;AACH,KAAK,oBAAoB,GACrB;IACE,KAAK,EAAE,IAAI,CAAA;IACX;yEACqE;IACrE,KAAK,CAAC,EAAE,MAAM,EAAE,CAAA;IAChB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,IAAI,CAAA;CACrC,GACD;IACE,KAAK,CAAC,EAAE,KAAK,CAAA;IACb;yEACqE;IACrE,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;CACnC,CAAA;AAEL,MAAM,MAAM,gBAAgB,CAAC,CAAC,SAAS,WAAW,GAAG,WAAW,IAC9D,sBAAsB,CAAC,CAAC,CAAC,GAAG,oBAAoB,CAAA;AAWlD,eAAO,MAAM,WAAW,GAAI,CAAC,SAAS,WAAW,GAAG,WAAW,EAAE,kKAiB9D,gBAAgB,CAAC,CAAC,CAAC,sBA6FrB,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/form/select-field/index.tsx"],"names":[],"mappings":"AAuBA,OAAO,KAAK,EAAE,EAAE,iBAAiB,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAC3D,OAAO,EACL,OAAO,EAEP,WAAW,EAEZ,MAAM,iBAAiB,CAAA;AAExB,KAAK,sBAAsB,CAAC,CAAC,SAAS,WAAW,GAAG,WAAW,IAC7D,iBAAiB,GAAG;IAClB,IAAI,EAAE,MAAM,CAAA;IACZ,KAAK,CAAC,EAAE,SAAS,CAAA;IACjB,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,UAAU,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC5B,WAAW,CAAC,EAAE,SAAS,CAAA;IACvB,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB;qCACiC;IACjC,OAAO,CAAC,EAAE,OAAO,CAAC,CAAC,CAAC,CAAA;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,0EAA0E;IAC1E,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB;;;;;OAKG;IACH,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,aAAa,CAAC,EAAE,MAAM,CAAA;CACvB,CAAA;AAEH;;;;;;;;GAQG;AACH,KAAK,oBAAoB,GACrB;IACE,KAAK,EAAE,IAAI,CAAA;IACX;yEACqE;IACrE,KAAK,CAAC,EAAE,MAAM,EAAE,CAAA;IAChB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,IAAI,CAAA;CACrC,GACD;IACE,KAAK,CAAC,EAAE,KAAK,CAAA;IACb;yEACqE;IACrE,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;CACnC,CAAA;AAEL,MAAM,MAAM,gBAAgB,CAAC,CAAC,SAAS,WAAW,GAAG,WAAW,IAC9D,sBAAsB,CAAC,CAAC,CAAC,GAAG,oBAAoB,CAAA;AAWlD,eAAO,MAAM,WAAW,GAAI,CAAC,SAAS,WAAW,GAAG,WAAW,EAAE,6KAkB9D,gBAAgB,CAAC,CAAC,CAAC,sBA6FrB,CAAA"}

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

@@ -3,14 +3,14 @@ import { FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessa
 import { MultipleSelect, MultipleSelectContent, MultipleSelectTrigger, MultipleSelectValue } from '../../../components/ui/multiple-select/index.js';
 import { Select, SelectContent, SelectEmpty, SelectTrigger, SelectValue } from '../../../components/ui/select/index.js';
 import { cn } from '../../../lib/utils.js';
-export const SelectField = ({ name, label, tooltip, labelExtra, required, placeholder, description, disabled, readOnly, multi, control, value, children, emptyMessage = 'No options found.', onChange, ...others }) => {
+export const SelectField = ({ name, label, tooltip, labelExtra, required, placeholder, description, disabled, readOnly, multi, control, value, children, emptyMessage = 'No options found.', className, onChange, ...others }) => {
     // The props union already pairs `multi` with the callback shape that branch
     // emits, but destructuring an intersection loses that correlation — TS sees
     // two unrelated callbacks. Both branches report through this one seam, each
     // with the payload its own union member declared.
     const emitChange = onChange;
     const renderItem = (field) => {
-        return (_jsxs(FormItem, { required: required, children: [label && (_jsx(FormLabel, { extra: tooltip ? _jsx(FormTooltip, { children: tooltip }) : labelExtra, children: label })), multi ? (_jsxs(MultipleSelect, { onValueChange: (value) => {
+        return (_jsxs(FormItem, { required: required, className: className, children: [label && (_jsx(FormLabel, { extra: tooltip ? _jsx(FormTooltip, { children: tooltip }) : labelExtra, children: label })), multi ? (_jsxs(MultipleSelect, { onValueChange: (value) => {
                         field.onChange(value);
                         emitChange?.(value);
                     }, disabled: disabled, ...field, children: [_jsx(MultipleSelectTrigger, { readOnly: readOnly, children: _jsx(MultipleSelectValue, { placeholder: placeholder }) }), _jsx(MultipleSelectContent, { children: children })] })) : (_jsxs(Select, { onValueChange: (value) => {

package/dist/esm/components/ui/calendar/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/ui/calendar/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,EACL,SAAS,EAET,KAAK,SAAS,EACf,MAAM,kBAAkB,CAAA;AAGzB,OAAO,EAAE,MAAM,EAAkB,MAAM,wBAAwB,CAAA;AAO/D,iBAAS,QAAQ,CAAC,EAChB,SAAS,EACT,UAAU,EACV,eAAsB,EACtB,aAAuB,EACvB,aAAuB,EACvB,UAAU,EACV,UAAU,EACV,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,SAAS,CAAC,GAAG;IAC1C,aAAa,CAAC,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,MAAM,CAAC,CAAC,SAAS,CAAC,CAAA;CAC/D,qBA0JA;AAED,iBAAS,iBAAiB,CAAC,EACzB,SAAS,EACT,GAAG,EACH,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,SAAS,CAAC,qBAqCxC;AAED,OAAO,EAAE,QAAQ,EAAE,iBAAiB,EAAE,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/ui/calendar/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,EACL,SAAS,EAGT,KAAK,SAAS,EACf,MAAM,kBAAkB,CAAA;AAGzB,OAAO,EAAE,MAAM,EAAkB,MAAM,wBAAwB,CAAA;AAO/D,iBAAS,QAAQ,CAAC,EAChB,SAAS,EACT,UAAU,EACV,eAAsB,EACtB,aAAuB,EACvB,aAAuB,EACvB,UAAU,EACV,UAAU,EACV,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,SAAS,CAAC,GAAG;IAC1C,aAAa,CAAC,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,MAAM,CAAC,CAAC,SAAS,CAAC,CAAA;CAC/D,qBAgKA;AAED,iBAAS,iBAAiB,CAAC,EACzB,SAAS,EACT,GAAG,EACH,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,SAAS,CAAC,qBAqCxC;AAED,OAAO,EAAE,QAAQ,EAAE,iBAAiB,EAAE,CAAA"}

package/dist/esm/components/ui/calendar/index.js

@@ -1,14 +1,20 @@
 'use client';
 import { jsx as _jsx } from "react/jsx-runtime";
 import * as React from 'react';
-import { DayPicker, getDefaultClassNames } from 'react-day-picker';
+import { DayPicker, defaultDateLib, getDefaultClassNames } from 'react-day-picker';
 import { cn } from '../../../lib/utils.js';
 import { Button, buttonVariants } from '../../../components/ui/button/index.js';
 import { ChevronLeftIcon, ChevronRightIcon, ChevronDownIcon } from 'lucide-react';
 function Calendar({ className, classNames, showOutsideDays = true, captionLayout = 'label', buttonVariant = 'plain', formatters, components, ...props }) {
     const defaultClassNames = getDefaultClassNames();
     return (_jsx(DayPicker, { showOutsideDays: showOutsideDays, className: cn('bg-background group/calendar p-2 [--cell-radius:var(--radius-md)] [--cell-size:34px] [--nav-size:28px] [[data-slot=card-content]_&]:bg-transparent [[data-slot=popover-content]_&]:bg-transparent', String.raw `rtl:**:[.rdp-button\_next>svg]:rotate-180`, String.raw `rtl:**:[.rdp-button\_previous>svg]:rotate-180`, className), captionLayout: captionLayout, formatters: {
-            formatMonthDropdown: (date) => date.toLocaleString('default', { month: 'short' }),
+            // react-day-picker's own default is dateLib.format(month, 'LLLL'), the
+            // full month name in the locale it was given. Shortening it has to go
+            // through the same dateLib: Date.toLocaleString('default') reads the
+            // runtime locale instead, so the dropdown fell back to English while
+            // the weekdays and the caption around it stayed in the consumer's
+            // language. 'LLL' is the abbreviated form of the same standalone month.
+            formatMonthDropdown: (month, dateLib = defaultDateLib) => dateLib.format(month, 'LLL'),
             ...formatters
         }, classNames: {
             root: cn('w-fit', defaultClassNames.root),

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

@@ -1,9 +1,16 @@
 /**
- * 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
@@ -24,6 +31,11 @@
  * 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.
  */
 import * as React from 'react';
 export type FileUploadResult = {
@@ -42,6 +54,33 @@ export type FileUploadError = {
     kind: 'read-failed';
     file: File;
 };
+/** How the picked file's bytes are handled on the way to `onSelect`. */
+export type FileUploadReadAs = 'text' | 'none';
+/**
+ * Overrides for the fixed English copy. Every field is optional and defaults to
+ * the current value, so a consumer that passes nothing renders exactly as
+ * before. These four strings were the whole of the component's user-visible
+ * text, and none of them was reachable — a pt-BR console rendered an English
+ * affordance and handed a screen reader an English accessible name.
+ */
+export interface FileUploadLabels {
+    /** Emphasised call to action in the empty zone. Defaults to "Choose a file". */
+    action?: string;
+    /** Trailing hint after the action. Defaults to "or drag and drop". */
+    hint?: string;
+    /** Accessible name of the clear button. Defaults to "Remove file". */
+    remove?: string;
+    /**
+     * Copy for the component's own `role="alert"` refusal. Receives the rejection
+     * so the message can interpolate the cap or the accept filter; use the
+     * exported `humanizeSize` to format `maxSizeBytes` the way the chip does.
+     *
+     * Return `null`, `undefined` or `''` to stay SILENT and leave the
+     * announcement to the host's own `onError` handling. Defaults to the
+     * built-in English messages.
+     */
+    error?: (error: FileUploadError) => string | null | undefined;
+}
 export type FileUploadProps = {
     /** Comma-separated accept filter, e.g. ".pem,.key" or "text/plain". Mirrors the native input accept. */
     accept?: string;
@@ -49,7 +88,18 @@ export type FileUploadProps = {
     maxSizeBytes?: number;
     /** Controlled selection. `null` = empty. The host owns state. */
     value?: FileUploadResult | null;
-    /** Fires on accept (with {file,text}) or clear (null). Reads UTF-8 via FileReader.readAsText. */
+    /**
+     * How the accepted file is handed over.
+     * - `'text'` (default): decode as UTF-8 via FileReader.readAsText and emit
+     *   `{ file, text }`. Unchanged behaviour for every existing consumer.
+     * - `'none'`: skip decoding entirely and emit `{ file, text: '' }`. The mode
+     *   for BINARY files (PDF, XLSX, PFX/DER): the host gets the `File` intact
+     *   and `text` carries nothing, so do not read it in this mode.
+     */
+    readAs?: FileUploadReadAs;
+    /** Override the fixed English copy. Omitted fields keep their defaults. */
+    labels?: FileUploadLabels;
+    /** Fires on accept (with the result) or clear (null). See `readAs` for whether `text` is populated. */
     onSelect: (result: FileUploadResult | null) => void;
     /** Fires when a pick is rejected (size/type/read). Optional — the component also shows its own inline error. */
     onError?: (error: FileUploadError) => void;
@@ -60,7 +110,7 @@ export type FileUploadProps = {
     'aria-required'?: boolean;
     'aria-describedby'?: string;
     'aria-label'?: string;
-} & Omit<React.InputHTMLAttributes<HTMLInputElement>, 'type' | 'accept' | 'value' | 'disabled' | 'onChange' | 'onSelect' | 'className' | 'multiple'>;
+} & Omit<React.InputHTMLAttributes<HTMLInputElement>, 'type' | 'accept' | 'value' | 'disabled' | 'onChange' | 'onSelect' | 'className' | 'onError' | 'multiple'>;
 /**
  * Validate a chosen file against an accept filter and a byte ceiling. Exported
  * so hosts can pre-validate before handing a file over. `accept` is matched
@@ -72,6 +122,12 @@ export declare function validateFile(file: File, opts: {
     accept?: string;
     maxSizeBytes?: number;
 }): FileUploadError | null;
+/**
+ * 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.
+ */
+export declare function humanizeSize(bytes: number): string;
 export declare const FileUpload: React.ForwardRefExoticComponent<{
     /** Comma-separated accept filter, e.g. ".pem,.key" or "text/plain". Mirrors the native input accept. */
     accept?: string;
@@ -79,7 +135,18 @@ export declare const FileUpload: React.ForwardRefExoticComponent<{
     maxSizeBytes?: number;
     /** Controlled selection. `null` = empty. The host owns state. */
     value?: FileUploadResult | null;
-    /** Fires on accept (with {file,text}) or clear (null). Reads UTF-8 via FileReader.readAsText. */
+    /**
+     * How the accepted file is handed over.
+     * - `'text'` (default): decode as UTF-8 via FileReader.readAsText and emit
+     *   `{ file, text }`. Unchanged behaviour for every existing consumer.
+     * - `'none'`: skip decoding entirely and emit `{ file, text: '' }`. The mode
+     *   for BINARY files (PDF, XLSX, PFX/DER): the host gets the `File` intact
+     *   and `text` carries nothing, so do not read it in this mode.
+     */
+    readAs?: FileUploadReadAs;
+    /** Override the fixed English copy. Omitted fields keep their defaults. */
+    labels?: FileUploadLabels;
+    /** Fires on accept (with the result) or clear (null). See `readAs` for whether `text` is populated. */
     onSelect: (result: FileUploadResult | null) => void;
     /** Fires when a pick is rejected (size/type/read). Optional — the component also shows its own inline error. */
     onError?: (error: FileUploadError) => void;
@@ -90,5 +157,5 @@ export declare const FileUpload: React.ForwardRefExoticComponent<{
     'aria-required'?: boolean;
     'aria-describedby'?: string;
     'aria-label'?: string;
-} & Omit<React.InputHTMLAttributes<HTMLInputElement>, "className" | "disabled" | "type" | "value" | "onChange" | "onSelect" | "accept" | "multiple"> & React.RefAttributes<HTMLInputElement>>;
+} & Omit<React.InputHTMLAttributes<HTMLInputElement>, "className" | "disabled" | "type" | "value" | "onChange" | "onError" | "onSelect" | "accept" | "multiple"> & React.RefAttributes<HTMLInputElement>>;
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/ui/file-upload/index.tsx"],"names":[],"mappings":"AAEA;;;;;;;;;;;;;;;;;;;;;;;;;;GA0BG;AACH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAM9B,MAAM,MAAM,gBAAgB,GAAG;IAAE,IAAI,EAAE,IAAI,CAAC;IAAC,IAAI,EAAE,MAAM,CAAA;CAAE,CAAA;AAE3D,MAAM,MAAM,eAAe,GACvB;IAAE,IAAI,EAAE,WAAW,CAAC;IAAC,IAAI,EAAE,IAAI,CAAC;IAAC,YAAY,EAAE,MAAM,CAAA;CAAE,GACvD;IAAE,IAAI,EAAE,YAAY,CAAC;IAAC,IAAI,EAAE,IAAI,CAAC;IAAC,MAAM,EAAE,MAAM,CAAA;CAAE,GAClD;IAAE,IAAI,EAAE,aAAa,CAAC;IAAC,IAAI,EAAE,IAAI,CAAA;CAAE,CAAA;AAEvC,MAAM,MAAM,eAAe,GAAG;IAC5B,wGAAwG;IACxG,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,0FAA0F;IAC1F,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,iEAAiE;IACjE,KAAK,CAAC,EAAE,gBAAgB,GAAG,IAAI,CAAA;IAC/B,iGAAiG;IACjG,QAAQ,EAAE,CAAC,MAAM,EAAE,gBAAgB,GAAG,IAAI,KAAK,IAAI,CAAA;IACnD,gHAAgH;IAChH,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,eAAe,KAAK,IAAI,CAAA;IAC1C,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,EAAE,CAAC,EAAE,MAAM,CAAA;IACX,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,cAAc,CAAC,EAAE,OAAO,CAAA;IACxB,eAAe,CAAC,EAAE,OAAO,CAAA;IACzB,kBAAkB,CAAC,EAAE,MAAM,CAAA;IAC3B,YAAY,CAAC,EAAE,MAAM,CAAA;CACtB,GAAG,IAAI,CACN,KAAK,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,EAEzC,MAAM,GACN,QAAQ,GACR,OAAO,GACP,UAAU,GACV,UAAU,GACV,UAAU,GACV,WAAW,GAEX,UAAU,CACb,CAAA;AAED;;;;;;GAMG;AACH,wBAAgB,YAAY,CAC1B,IAAI,EAAE,IAAI,EACV,IAAI,EAAE;IAAE,MAAM,CAAC,EAAE,MAAM,CAAC;IAAC,YAAY,CAAC,EAAE,MAAM,CAAA;CAAE,GAC/C,eAAe,GAAG,IAAI,CASxB;AA8CD,eAAO,MAAM,UAAU;IAhGrB,wGAAwG;aAC/F,MAAM;IACf,0FAA0F;mBAC3E,MAAM;IACrB,iEAAiE;YACzD,gBAAgB,GAAG,IAAI;IAC/B,iGAAiG;cACvF,CAAC,MAAM,EAAE,gBAAgB,GAAG,IAAI,KAAK,IAAI;IACnD,gHAAgH;cACtG,CAAC,KAAK,EAAE,eAAe,KAAK,IAAI;eAC/B,OAAO;SACb,MAAM;gBACC,MAAM;qBACD,OAAO;sBACN,OAAO;yBACJ,MAAM;mBACZ,MAAM;6LA6RtB,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/ui/file-upload/index.tsx"],"names":[],"mappings":"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"}

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

@@ -1,11 +1,18 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "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
@@ -26,6 +33,11 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
  * 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.
  */
 import * as React from 'react';
 import { Upload, X } from 'lucide-react';
@@ -68,8 +80,12 @@ function matchesAccept(file, accept) {
         return mime === token;
     });
 }
-/** Humanize a byte count for the selected-file chip. Binary units, 1 decimal. */
-function humanizeSize(bytes) {
+/**
+ * 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.
+ */
+export function humanizeSize(bytes) {
     if (bytes < 1024)
         return `${bytes} B`;
     const units = ['KB', 'MB', 'GB'];
@@ -81,8 +97,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)}).`;
@@ -92,7 +108,7 @@ function errorMessage(error) {
             return 'Could not read the file.';
     }
 }
-export const 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) {
+export const 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();
@@ -104,12 +120,21 @@ export const FileUpload = React.forwardRef(function FileUpload({ accept, maxSize
     // 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
@@ -125,6 +150,15 @@ export const FileUpload = React.forwardRef(function FileUpload({ accept, maxSize
             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 = () => {
@@ -191,10 +225,10 @@ export const FileUpload = React.forwardRef(function FileUpload({ accept, maxSize
     return (_jsxs("div", { className: cn('space-y-2', className), children: [_jsxs("div", { onClick: openPicker, onDragOver: onDragOver, onDragLeave: onDragLeave, onDrop: onDrop, className: 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: [_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 }), _jsx(Upload, { className: "text-muted-foreground size-4 shrink-0", "aria-hidden": "true" }), value ? (_jsxs(_Fragment, { children: [_jsxs("span", { className: "min-w-0 flex-1 truncate", children: [_jsx("span", { className: "text-foreground font-medium", children: value.file.name }), ' ', _jsx("span", { className: "text-muted-foreground tabular-nums", children: humanizeSize(value.file.size) })] }), _jsx(IconButton, { type: "button", variant: "plain", size: "small", disabled: disabled, "aria-label": "Remove file", onClick: (event) => {
+                    : 'cursor-pointer'), "aria-invalid": invalid || undefined, children: [_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 }), _jsx(Upload, { className: "text-muted-foreground size-4 shrink-0", "aria-hidden": "true" }), value ? (_jsxs(_Fragment, { children: [_jsxs("span", { className: "min-w-0 flex-1 truncate", children: [_jsx("span", { className: "text-foreground font-medium", children: value.file.name }), ' ', _jsx("span", { className: "text-muted-foreground tabular-nums", children: humanizeSize(value.file.size) })] }), _jsx(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: _jsx(X, { className: "size-4", "aria-hidden": "true" }) })] })) : (_jsxs("span", { className: "text-muted-foreground", children: [_jsx("span", { className: "text-foreground font-medium", children: "Choose a file" }), ' ', "or drag and drop"] }))] }), error ? (_jsx("p", { id: errorId, role: "alert", className: "text-system-error-h1a text-xs font-medium", children: errorMessage(error) })) : null] }));
+                                }, children: _jsx(X, { className: "size-4", "aria-hidden": "true" }) })] })) : (_jsxs("span", { className: "text-muted-foreground", children: [_jsx("span", { className: "text-foreground font-medium", children: labels?.action ?? 'Choose a file' }), ' ', labels?.hint ?? 'or drag and drop'] }))] }), errorText ? (_jsx("p", { id: errorId, role: "alert", className: "text-system-error-h1a text-xs font-medium", children: errorText })) : null] }));
 });
 FileUpload.displayName = 'FileUpload';

package/dist/esm/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/esm/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/esm/components/ui/form.js

@@ -23,7 +23,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,
@@ -31,13 +31,37 @@ const useFormField = () => {
         formDescriptionId: `${id}-form-item-description`,
         formMessageId: `${id}-form-item-message`,
         required,
+        described,
+        onDescribedChange,
         ...fieldState
     };
 };
 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 (_jsx(FormItemContext.Provider, { value: { id, required }, children: _jsx("div", { ref: ref, className: 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 (_jsx(FormItemContext.Provider, { value: { id, required, described, onDescribedChange }, children: _jsx("div", { ref: ref, className: cn('space-y-2', className), ...props }) }));
 });
 FormItem.displayName = 'FormItem';
 const FormLabel = React.forwardRef(({ className, extra, children, ...props }, ref) => {
@@ -50,20 +74,38 @@ const FormLabel = React.forwardRef(({ className, extra, children, ...props }, re
 FormLabel.displayName = 'FormLabel';
 export const FormTooltip = ({ children, ...others }) => (_jsx(TooltipProvider, { ...others, children: _jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { asChild: true, children: _jsx(HelpCircle, { className: "text-container-text ml-2 h-4 w-4" }) }), _jsx(TooltipContent, { children: children })] }) }));
 const FormControl = React.forwardRef(({ ...props }, ref) => {
-    const { error, formItemId, formDescriptionId, formMessageId } = useFormField();
-    return (_jsx(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 (_jsx(Slot, { ref: ref, id: formItemId, "aria-describedby": describedBy, "aria-invalid": !!error, ...props }));
 });
 FormControl.displayName = 'FormControl';
 const FormDescription = React.forwardRef(({ className, ...props }, ref) => {
     const { formDescriptionId } = useFormField();
+    useDescribingSlot('description', true);
     return (_jsx("p", { ref: ref, id: formDescriptionId, className: cn('text-muted-foreground text-xs font-medium', className), ...props }));
 });
 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/esm/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/esm/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/esm/components/ui/toggle-group/index.js

@@ -26,12 +26,58 @@ const toggleVariants = cva("hover:bg-muted hover:text-muted-foreground focus-vis
         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 (_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.
@@ -39,13 +85,36 @@ 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: _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: _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 (_jsx(ToggleGroupPrimitive.Item, { "data-slot": "toggle-group-item", "data-variant": context.variant || variant, "data-size": context.size || size, "data-spacing": context.spacing, className: 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 }));
 }
 export { ToggleGroup, ToggleGroupItem };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lerianstudio/sindarian-ui",
-  "version": "2.0.0-beta.1",
+  "version": "2.0.0-beta.2",
   "description": "Sindarian UI - A UI library for Midaz Console",
   "license": "ISC",
   "author": {