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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (136) hide show
  1. package/dist/components/breadcrumb/index.d.ts.map +1 -1
  2. package/dist/components/breadcrumb/index.js +25 -1
  3. package/dist/components/card/account-card/index.js +5 -5
  4. package/dist/components/card/basic-card/index.d.ts.map +1 -1
  5. package/dist/components/card/basic-card/index.js +2 -2
  6. package/dist/components/card/entity-card/index.js +1 -1
  7. package/dist/components/dialog/confirmation-dialog/index.d.ts.map +1 -1
  8. package/dist/components/dialog/confirmation-dialog/index.js +4 -1
  9. package/dist/components/entity-box/index.d.ts +18 -2
  10. package/dist/components/entity-box/index.d.ts.map +1 -1
  11. package/dist/components/entity-box/index.js +32 -4
  12. package/dist/components/form/file-upload-field/index.d.ts +11 -2
  13. package/dist/components/form/file-upload-field/index.d.ts.map +1 -1
  14. package/dist/components/form/file-upload-field/index.js +8 -3
  15. package/dist/components/form/input-field/index.d.ts +41 -2
  16. package/dist/components/form/input-field/index.d.ts.map +1 -1
  17. package/dist/components/form/input-field/index.js +73 -15
  18. package/dist/components/form/password-field/index.d.ts +5 -1
  19. package/dist/components/form/password-field/index.d.ts.map +1 -1
  20. package/dist/components/form/password-field/index.js +2 -2
  21. package/dist/components/form/select-field/index.d.ts +9 -1
  22. package/dist/components/form/select-field/index.d.ts.map +1 -1
  23. package/dist/components/form/select-field/index.js +2 -2
  24. package/dist/components/page-header/index.js +1 -1
  25. package/dist/components/table/id-table-cell.d.ts +5 -1
  26. package/dist/components/table/id-table-cell.d.ts.map +1 -1
  27. package/dist/components/table/id-table-cell.js +48 -6
  28. package/dist/components/ui/autocomplete/index.d.ts +24 -0
  29. package/dist/components/ui/autocomplete/index.d.ts.map +1 -1
  30. package/dist/components/ui/autocomplete/index.js +24 -0
  31. package/dist/components/ui/badge/index.d.ts +11 -7
  32. package/dist/components/ui/badge/index.d.ts.map +1 -1
  33. package/dist/components/ui/badge/index.js +20 -8
  34. package/dist/components/ui/button/styles.css +31 -1
  35. package/dist/components/ui/calendar/index.d.ts.map +1 -1
  36. package/dist/components/ui/calendar/index.js +7 -1
  37. package/dist/components/ui/copy-field/index.d.ts.map +1 -1
  38. package/dist/components/ui/copy-field/index.js +1 -1
  39. package/dist/components/ui/file-upload/index.d.ts +235 -9
  40. package/dist/components/ui/file-upload/index.d.ts.map +1 -1
  41. package/dist/components/ui/file-upload/index.js +354 -17
  42. package/dist/components/ui/form.d.ts +4 -0
  43. package/dist/components/ui/form.d.ts.map +1 -1
  44. package/dist/components/ui/form.js +48 -6
  45. package/dist/components/ui/input/styles.css +30 -2
  46. package/dist/components/ui/sheet/index.d.ts.map +1 -1
  47. package/dist/components/ui/sheet/index.js +2 -2
  48. package/dist/components/ui/sidebar/index.d.ts +1 -0
  49. package/dist/components/ui/sidebar/index.d.ts.map +1 -1
  50. package/dist/components/ui/sidebar/index.js +1 -0
  51. package/dist/components/ui/sidebar/sidebar-expand-button.d.ts +1 -1
  52. package/dist/components/ui/sidebar/sidebar-expand-button.d.ts.map +1 -1
  53. package/dist/components/ui/sidebar/sidebar-expand-button.js +15 -1
  54. package/dist/components/ui/sidebar/sidebar-item.d.ts +1 -1
  55. package/dist/components/ui/sidebar/sidebar-item.d.ts.map +1 -1
  56. package/dist/components/ui/sidebar/sidebar-item.js +28 -4
  57. package/dist/components/ui/sidebar/sidebar-provider.d.ts +37 -0
  58. package/dist/components/ui/sidebar/sidebar-provider.d.ts.map +1 -1
  59. package/dist/components/ui/sidebar/sidebar-provider.js +125 -4
  60. package/dist/components/ui/sidebar/sidebar-root.d.ts +38 -1
  61. package/dist/components/ui/sidebar/sidebar-root.d.ts.map +1 -1
  62. package/dist/components/ui/sidebar/sidebar-root.js +100 -5
  63. package/dist/components/ui/sidebar/sidebar-trigger.d.ts +18 -0
  64. package/dist/components/ui/sidebar/sidebar-trigger.d.ts.map +1 -0
  65. package/dist/components/ui/sidebar/sidebar-trigger.js +30 -0
  66. package/dist/components/ui/toggle-group/index.d.ts +1 -1
  67. package/dist/components/ui/toggle-group/index.d.ts.map +1 -1
  68. package/dist/components/ui/toggle-group/index.js +73 -4
  69. package/dist/esm/components/breadcrumb/index.d.ts.map +1 -1
  70. package/dist/esm/components/breadcrumb/index.js +25 -1
  71. package/dist/esm/components/card/account-card/index.js +5 -5
  72. package/dist/esm/components/card/basic-card/index.d.ts.map +1 -1
  73. package/dist/esm/components/card/basic-card/index.js +2 -2
  74. package/dist/esm/components/card/entity-card/index.js +1 -1
  75. package/dist/esm/components/dialog/confirmation-dialog/index.d.ts.map +1 -1
  76. package/dist/esm/components/dialog/confirmation-dialog/index.js +4 -1
  77. package/dist/esm/components/entity-box/index.d.ts +18 -2
  78. package/dist/esm/components/entity-box/index.d.ts.map +1 -1
  79. package/dist/esm/components/entity-box/index.js +29 -4
  80. package/dist/esm/components/form/file-upload-field/index.d.ts +11 -2
  81. package/dist/esm/components/form/file-upload-field/index.d.ts.map +1 -1
  82. package/dist/esm/components/form/file-upload-field/index.js +8 -3
  83. package/dist/esm/components/form/input-field/index.d.ts +41 -2
  84. package/dist/esm/components/form/input-field/index.d.ts.map +1 -1
  85. package/dist/esm/components/form/input-field/index.js +73 -15
  86. package/dist/esm/components/form/password-field/index.d.ts +5 -1
  87. package/dist/esm/components/form/password-field/index.d.ts.map +1 -1
  88. package/dist/esm/components/form/password-field/index.js +2 -2
  89. package/dist/esm/components/form/select-field/index.d.ts +9 -1
  90. package/dist/esm/components/form/select-field/index.d.ts.map +1 -1
  91. package/dist/esm/components/form/select-field/index.js +2 -2
  92. package/dist/esm/components/page-header/index.js +1 -1
  93. package/dist/esm/components/table/id-table-cell.d.ts +5 -1
  94. package/dist/esm/components/table/id-table-cell.d.ts.map +1 -1
  95. package/dist/esm/components/table/id-table-cell.js +48 -3
  96. package/dist/esm/components/ui/autocomplete/index.d.ts +24 -0
  97. package/dist/esm/components/ui/autocomplete/index.d.ts.map +1 -1
  98. package/dist/esm/components/ui/autocomplete/index.js +24 -0
  99. package/dist/esm/components/ui/badge/index.d.ts +11 -7
  100. package/dist/esm/components/ui/badge/index.d.ts.map +1 -1
  101. package/dist/esm/components/ui/badge/index.js +20 -8
  102. package/dist/esm/components/ui/calendar/index.d.ts.map +1 -1
  103. package/dist/esm/components/ui/calendar/index.js +8 -2
  104. package/dist/esm/components/ui/copy-field/index.d.ts.map +1 -1
  105. package/dist/esm/components/ui/copy-field/index.js +1 -1
  106. package/dist/esm/components/ui/file-upload/index.d.ts +235 -9
  107. package/dist/esm/components/ui/file-upload/index.d.ts.map +1 -1
  108. package/dist/esm/components/ui/file-upload/index.js +353 -17
  109. package/dist/esm/components/ui/form.d.ts +4 -0
  110. package/dist/esm/components/ui/form.d.ts.map +1 -1
  111. package/dist/esm/components/ui/form.js +48 -6
  112. package/dist/esm/components/ui/sheet/index.d.ts.map +1 -1
  113. package/dist/esm/components/ui/sheet/index.js +2 -2
  114. package/dist/esm/components/ui/sidebar/index.d.ts +1 -0
  115. package/dist/esm/components/ui/sidebar/index.d.ts.map +1 -1
  116. package/dist/esm/components/ui/sidebar/index.js +1 -0
  117. package/dist/esm/components/ui/sidebar/sidebar-expand-button.d.ts +1 -1
  118. package/dist/esm/components/ui/sidebar/sidebar-expand-button.d.ts.map +1 -1
  119. package/dist/esm/components/ui/sidebar/sidebar-expand-button.js +15 -1
  120. package/dist/esm/components/ui/sidebar/sidebar-item.d.ts +1 -1
  121. package/dist/esm/components/ui/sidebar/sidebar-item.d.ts.map +1 -1
  122. package/dist/esm/components/ui/sidebar/sidebar-item.js +28 -4
  123. package/dist/esm/components/ui/sidebar/sidebar-provider.d.ts +37 -0
  124. package/dist/esm/components/ui/sidebar/sidebar-provider.d.ts.map +1 -1
  125. package/dist/esm/components/ui/sidebar/sidebar-provider.js +122 -1
  126. package/dist/esm/components/ui/sidebar/sidebar-root.d.ts +38 -1
  127. package/dist/esm/components/ui/sidebar/sidebar-root.d.ts.map +1 -1
  128. package/dist/esm/components/ui/sidebar/sidebar-root.js +102 -7
  129. package/dist/esm/components/ui/sidebar/sidebar-trigger.d.ts +18 -0
  130. package/dist/esm/components/ui/sidebar/sidebar-trigger.d.ts.map +1 -0
  131. package/dist/esm/components/ui/sidebar/sidebar-trigger.js +26 -0
  132. package/dist/esm/components/ui/toggle-group/index.d.ts +1 -1
  133. package/dist/esm/components/ui/toggle-group/index.d.ts.map +1 -1
  134. package/dist/esm/components/ui/toggle-group/index.js +73 -4
  135. package/dist/globals.css +77 -31
  136. package/package.json +5 -3
@@ -1,11 +1,18 @@
1
1
  'use client';
2
2
  import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
3
3
  /**
4
- * FileUpload — a controlled "pick a file, read it to text, hand back the text"
5
- * primitive. The defining job: select one file (by click, keyboard, or
6
- * drag-and-drop), validate it against an accept filter + a byte ceiling, read
7
- * it as UTF-8 via FileReader.readAsText, and emit `{ file, text }`. Binary/DER
8
- * (.pfx/.p12) is explicitly OUT of scope — readAsText only.
4
+ * FileUpload — a controlled "pick a file, hand it back" primitive. The defining
5
+ * job: select one file (by click, keyboard, or drag-and-drop), validate it
6
+ * against an accept filter + a byte ceiling, and emit `{ file, text }`.
7
+ *
8
+ * `readAs` decides whether the bytes are decoded on the way through. `'text'`
9
+ * (the default) reads UTF-8 via FileReader.readAsText, which is what a PEM/CSV
10
+ * host wants. `'none'` hands the `File` over untouched and is the only mode a
11
+ * BINARY file can use: a PDF, XLSX or PFX put through readAsText decodes into
12
+ * replacement-character garbage, and that garbage string is then retained for
13
+ * as long as the host holds the value — 20 MiB of PDF became a useless 20 MiB
14
+ * string, and the host still had to read the file a second time to get at the
15
+ * real bytes.
9
16
  *
10
17
  * The real `<input type="file">` IS the accessible control: it is `sr-only`
11
18
  * (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
26
33
  * a value, so it cannot masquerade as valid. `accept` is validated against
27
34
  * BOTH extension and MIME because the native `accept` attribute is only a
28
35
  * browser hint and is bypassable via drag-drop.
36
+ *
37
+ * A host that already announces the rejection itself — a toast in its own
38
+ * locale, driven off `onError` — silences this one by returning nothing from
39
+ * `labels.error`. Two announcements for one event, in two languages, is the
40
+ * accessibility defect; the wording is not.
29
41
  */
30
42
  import * as React from 'react';
31
43
  import { Upload, X } from 'lucide-react';
@@ -68,8 +80,12 @@ function matchesAccept(file, accept) {
68
80
  return mime === token;
69
81
  });
70
82
  }
71
- /** Humanize a byte count for the selected-file chip. Binary units, 1 decimal. */
72
- function humanizeSize(bytes) {
83
+ /**
84
+ * Humanize a byte count for the selected-file chip. Binary units, 1 decimal.
85
+ * Exported so a `labels.error` override can format `maxSizeBytes` exactly the
86
+ * way the chip and the default message do, instead of re-deriving binary units.
87
+ */
88
+ export function humanizeSize(bytes) {
73
89
  if (bytes < 1024)
74
90
  return `${bytes} B`;
75
91
  const units = ['KB', 'MB', 'GB'];
@@ -81,8 +97,8 @@ function humanizeSize(bytes) {
81
97
  }
82
98
  return `${size.toFixed(1)} ${units[unit]}`;
83
99
  }
84
- /** A human-readable announcement for each rejection kind. */
85
- function errorMessage(error) {
100
+ /** The default English announcement for each rejection kind. */
101
+ function defaultErrorMessage(error) {
86
102
  switch (error.kind) {
87
103
  case 'too-large':
88
104
  return `File is too large (max ${humanizeSize(error.maxSizeBytes)}).`;
@@ -92,7 +108,7 @@ function errorMessage(error) {
92
108
  return 'Could not read the file.';
93
109
  }
94
110
  }
95
- 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) {
111
+ 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) {
96
112
  const internalRef = React.useRef(null);
97
113
  React.useImperativeHandle(ref, () => internalRef.current);
98
114
  const reactId = React.useId();
@@ -104,12 +120,21 @@ export const FileUpload = React.forwardRef(function FileUpload({ accept, maxSize
104
120
  // component's own validation/read error — a self-detected bad pick must read
105
121
  // as invalid even outside a form.
106
122
  const invalid = ariaInvalid || error !== null;
123
+ // Resolve the announcement BEFORE deciding whether the alert exists: a
124
+ // consumer that returns nothing is opting out of this surface entirely,
125
+ // and an association pointing at an unrendered node is worse than none.
126
+ const resolved = error
127
+ ? labels?.error
128
+ ? labels.error(error)
129
+ : defaultErrorMessage(error)
130
+ : null;
131
+ const errorText = resolved ? resolved : null;
107
132
  // Radix Slot OVERWRITES aria-describedby (it does not merge), so merge the
108
133
  // primitive's own role=alert error id with the FormControl-injected one so
109
134
  // both associations coexist on the input. A plain join, never `cn` —
110
135
  // tailwind-merge treats these as class names and would drop an id that
111
136
  // happens to look like a conflicting utility.
112
- const describedBy = [ariaDescribedby, error ? errorId : undefined]
137
+ const describedBy = [ariaDescribedby, errorText ? errorId : undefined]
113
138
  .filter(Boolean)
114
139
  .join(' ') || undefined;
115
140
  // 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
125
150
  onError?.(validationError);
126
151
  return;
127
152
  }
153
+ // Binary path: no decode, no reader, no retained garbage string. The
154
+ // stale-rejection clear still has to happen here — the alert is this
155
+ // component's own state and a good pick must retire it.
156
+ if (readAs === 'none') {
157
+ readerRef.current = null;
158
+ setError(null);
159
+ onSelect({ file, text: '' });
160
+ return;
161
+ }
128
162
  const reader = new FileReader();
129
163
  readerRef.current = reader;
130
164
  reader.onload = () => {
@@ -154,10 +188,18 @@ export const FileUpload = React.forwardRef(function FileUpload({ accept, maxSize
154
188
  event.target.value = '';
155
189
  handleFile(file);
156
190
  };
191
+ // `preventDefault` FIRST, and unconditionally. Returning before it does
192
+ // not merely refuse the drop: nothing cancels the browser's OWN action for
193
+ // a dropped file, so the window navigates to the file and whatever the
194
+ // page held unsaved is gone. A zone the host turned off has to swallow the
195
+ // drop, never hand it back to the browser. `dropEffect` says so to the
196
+ // cursor while the file is still in the air.
157
197
  const onDragOver = (event) => {
158
- if (disabled)
159
- return;
160
198
  event.preventDefault();
199
+ if (disabled) {
200
+ event.dataTransfer.dropEffect = 'none';
201
+ return;
202
+ }
161
203
  setDragActive(true);
162
204
  };
163
205
  const onDragLeave = (event) => {
@@ -165,10 +207,13 @@ export const FileUpload = React.forwardRef(function FileUpload({ accept, maxSize
165
207
  setDragActive(false);
166
208
  };
167
209
  const onDrop = (event) => {
168
- if (disabled)
169
- return;
170
210
  event.preventDefault();
211
+ // Cleared before the gate, not after, so a host that disables the zone
212
+ // mid-drag does not leave it highlighted for a drag that can no longer
213
+ // land.
171
214
  setDragActive(false);
215
+ if (disabled)
216
+ return;
172
217
  handleFile(event.dataTransfer.files?.[0]);
173
218
  };
174
219
  // Mouse convenience only: clicking the styled zone opens the picker. A
@@ -191,10 +236,301 @@ export const FileUpload = React.forwardRef(function FileUpload({ accept, maxSize
191
236
  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 &&
192
237
  'border-ring ring-ring ring-offset-background ring-2 ring-offset-1', disabled
193
238
  ? 'border-muted bg-muted/30 cursor-not-allowed shadow-none'
194
- : '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) => {
239
+ : '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) => {
195
240
  // Don't bubble to the zone's openPicker and re-open the dialog.
196
241
  event.stopPropagation();
197
242
  clear();
198
- }, 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] }));
243
+ }, 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] }));
199
244
  });
200
245
  FileUpload.displayName = 'FileUpload';
246
+ /** The default English announcement for each rejection kind. */
247
+ function defaultMultipleErrorMessage(error) {
248
+ if (error.kind === 'too-many') {
249
+ return `Too many files (max ${error.maxFiles}). ${error.file.name} was not added.`;
250
+ }
251
+ return defaultErrorMessage(error);
252
+ }
253
+ /** The default zone copy once the cap is reached, in grammatical English. */
254
+ function defaultFullMessage(maxFiles) {
255
+ return maxFiles === 1
256
+ ? 'Maximum of 1 file reached.'
257
+ : `Maximum of ${maxFiles} files reached.`;
258
+ }
259
+ /**
260
+ * MultipleFileUpload: the plural sibling of FileUpload. Pick SEVERAL files,
261
+ * accumulate them across repeated picks, validate each one, cap the total, and
262
+ * hand back `FileUploadResult[]`.
263
+ *
264
+ * A SIBLING COMPONENT, not a `multiple` flag. This library already answers
265
+ * "this one takes many" that way (`Select` / `MultipleSelect`), and FileUpload
266
+ * strips `'multiple'` from its props on purpose: single-file is its contract,
267
+ * not a default it happens to have. A boolean would have forced every prop
268
+ * here into a union that means one thing when the flag is set and another when
269
+ * it is not: `value` as `Result | Result[] | null`, a `maxFiles` that is
270
+ * meaningless in half the configurations, and a remove control whose
271
+ * accessible name is fixed copy in one mode and per-file in the other. The
272
+ * plural props follow the house shape for plural components: `value?: T[]`
273
+ * with `onValueChange?: (values: T[]) => void`.
274
+ *
275
+ * WHERE THE LINE SITS: this component owns SELECTION and nothing after it.
276
+ * Choosing, validating, capping, listing and removing are its job; uploading
277
+ * is not. That split is not squeamishness about scope, it is where the
278
+ * knowledge actually lives. An upload needs an endpoint, an auth scheme, a
279
+ * concurrency policy, a retry policy and, very often, a parent id that does
280
+ * not exist yet when the files are chosen: the motivating host stages evidence
281
+ * files while a form is being filled and can only upload them against the id
282
+ * that its create call returns afterwards. None of that is knowable from
283
+ * inside a library primitive, and a component that guessed would have to be
284
+ * fought rather than used. So the host keeps its own per-file record with
285
+ * status and retry, and this component keeps the part a form can hold and
286
+ * validate: the chosen files. `FileUploadResult[]` is a value; an upload state
287
+ * machine is not.
288
+ *
289
+ * ACCUMULATION is the defining behaviour. A second pick ADDS to the selection
290
+ * rather than replacing it, because a user assembling five documents does it
291
+ * in two or three trips to the file dialog, not one. Everything else follows
292
+ * from that: room is measured against what is already selected, and the batch
293
+ * that overflows the cap still contributes the files that fit.
294
+ *
295
+ * A BATCH SURVIVES ITS OWN CASUALTIES. One file rejected for type, size or a
296
+ * failed read does not discard the rest of the batch, and it does not consume
297
+ * a slot either: validation runs over the WHOLE batch before the cap is
298
+ * applied, so a file that was never eligible cannot cost an eligible one its
299
+ * place, and `'too-many'` always names a file a slot would genuinely have
300
+ * taken. The alternative punishes
301
+ * a user for a mistake in one file by throwing away four good ones, and hands
302
+ * back no way to tell which was which. Every rejection is reported through
303
+ * `onError` and announced together in one `role="alert"`.
304
+ *
305
+ * Accessibility follows the sibling BELOW THE CAP: the real `<input
306
+ * type="file">` is `sr-only` but focusable and labelable, and never
307
+ * `aria-hidden`, so FormControl-injected ARIA and react-hook-form's focus on
308
+ * error both work while the picker is enabled. At the cap that changes, and
309
+ * the paragraph below says how.
310
+ * The file list sits OUTSIDE the click zone, so activating a remove control
311
+ * cannot also reopen the picker, and each remove control is named after its
312
+ * own file: a column of identical "Remove file" buttons tells a screen-reader
313
+ * user nothing about which row they are on.
314
+ *
315
+ * AT THE CAP the picker takes the native `disabled` attribute, and that DOES
316
+ * take it out of the tab order. This is the one state in which the input is
317
+ * not a focus target, and the one state in which focus-on-error cannot land on
318
+ * it, so it is a real cost rather than a free win. The cap has no counterpart
319
+ * in the single-file sibling, so the precedent followed here is
320
+ * `DateRangePicker`'s trigger: a control whose only job is to open a dialog has
321
+ * no state worth keeping focusable, and native `disabled` is what both removes
322
+ * it from the tab order and keeps the dialog shut. The alternative, an enabled
323
+ * picker that opens the file dialog and then refuses every file with
324
+ * `too-many`, is a control that lies about being available. What keeps the cap
325
+ * from being a dead end is the escape hatch: the remove controls answer to
326
+ * `disabled` alone and NEVER to the cap, so they stay focusable and removing
327
+ * one file reopens the picker.
328
+ */
329
+ export const MultipleFileUpload = React.forwardRef(function MultipleFileUpload({ accept, maxSizeBytes, maxFiles, value = [], readAs = 'text', labels, onValueChange, onError, disabled = false, id, className, 'aria-invalid': ariaInvalid, 'aria-required': ariaRequired, 'aria-describedby': ariaDescribedby, 'aria-label': ariaLabel, ...rest }, ref) {
330
+ const internalRef = React.useRef(null);
331
+ React.useImperativeHandle(ref, () => internalRef.current);
332
+ const reactId = React.useId();
333
+ const inputId = id ?? reactId;
334
+ const errorId = `${inputId}-file-upload-error`;
335
+ const [dragActive, setDragActive] = React.useState(false);
336
+ const [errors, setErrors] = React.useState([]);
337
+ // The authoritative base for the next append. Props win on every render, so
338
+ // the host stays in control; the commit below also writes through, so a
339
+ // second batch that settles before the host has re-rendered still appends to
340
+ // the first batch's result instead of overwriting it.
341
+ const valueRef = React.useRef(value);
342
+ React.useEffect(() => {
343
+ valueRef.current = value;
344
+ });
345
+ // Superseding is NOT the contract here the way it is in the single-file
346
+ // sibling — batches accumulate, so an in-flight read is never stale. The
347
+ // readers are tracked for the one case that does have to stop them: an
348
+ // unmount. A read that lands afterwards would settle its batch and commit,
349
+ // calling the host's `onValueChange` for a component that no longer exists.
350
+ const readersRef = React.useRef(new Set());
351
+ React.useEffect(() => () => {
352
+ for (const reader of readersRef.current)
353
+ reader.abort();
354
+ readersRef.current.clear();
355
+ }, []);
356
+ const invalid = ariaInvalid || errors.length > 0;
357
+ // Resolve the announcements BEFORE deciding whether the alert exists: a
358
+ // consumer that returns nothing for every rejection is opting out of this
359
+ // surface, and an association pointing at an unrendered node is worse than
360
+ // none.
361
+ const messages = errors
362
+ .map((failure) => labels?.error
363
+ ? labels.error(failure)
364
+ : defaultMultipleErrorMessage(failure))
365
+ .filter((message) => Boolean(message));
366
+ // A plain join, never `cn`: tailwind-merge treats these as class names and
367
+ // would drop an id that happens to look like a conflicting utility.
368
+ const describedBy = [ariaDescribedby, messages.length > 0 ? errorId : undefined]
369
+ .filter(Boolean)
370
+ .join(' ') || undefined;
371
+ const full = maxFiles !== undefined && value.length >= maxFiles;
372
+ // Removing must stay possible at the cap, so only the PICKER closes.
373
+ const pickerDisabled = disabled || full;
374
+ const roomFor = (selected) => maxFiles === undefined
375
+ ? Number.POSITIVE_INFINITY
376
+ : Math.max(maxFiles - selected, 0);
377
+ // The cap is enforced HERE, at the only place that appends, because only the
378
+ // commit knows the base it lands on. `ingest` measures room too, but for an
379
+ // asynchronous batch it measures it BEFORE any read settles: two overlapping
380
+ // batches both see the pre-commit selection and would each believe they fit.
381
+ const commit = (accepted, rejections) => {
382
+ const room = roomFor(valueRef.current.length);
383
+ const fitting = accepted.slice(0, room);
384
+ const overflow = accepted[room];
385
+ const failures = overflow !== undefined && maxFiles !== undefined
386
+ ? [
387
+ ...rejections,
388
+ { kind: 'too-many', file: overflow.file, maxFiles }
389
+ ]
390
+ : rejections;
391
+ setErrors(failures);
392
+ for (const rejection of failures)
393
+ onError?.(rejection);
394
+ if (fitting.length === 0)
395
+ return;
396
+ const next = [...valueRef.current, ...fitting];
397
+ valueRef.current = next;
398
+ onValueChange(next);
399
+ };
400
+ const ingest = (incoming) => {
401
+ if (incoming.length === 0)
402
+ return;
403
+ const room = roomFor(valueRef.current.length);
404
+ const rejections = [];
405
+ // Validate EVERY file BEFORE the cap is applied. Slicing to the remaining
406
+ // room first would let a file that was never eligible consume a slot a
407
+ // good file could have used — one bad pick costing a good one, which is
408
+ // the opposite of a batch surviving its own casualties — and it would
409
+ // leave every file past the slice window neither validated nor reported.
410
+ // Validation is pure metadata (size and accept), so running it over files
411
+ // that may not fit costs nothing.
412
+ const eligible = [];
413
+ for (const file of incoming) {
414
+ const rejection = validateFile(file, { accept, maxSizeBytes });
415
+ // Continue rather than abort: one bad file must not cost the good ones.
416
+ if (rejection) {
417
+ rejections.push(rejection);
418
+ continue;
419
+ }
420
+ eligible.push(file);
421
+ }
422
+ // The cap then applies to the SURVIVORS. One rejection for the batch,
423
+ // naming the FIRST eligible file that did not fit: naming one already
424
+ // refused for its size or type would blame the cap for the wrong thing,
425
+ // and repeating it per overflowing file buries the actionable part.
426
+ if (eligible.length > room && maxFiles !== undefined) {
427
+ rejections.push({ kind: 'too-many', file: eligible[room], maxFiles });
428
+ }
429
+ const candidates = eligible.slice(0, room);
430
+ // Binary path: no decode, no reader, no retained garbage string.
431
+ if (readAs === 'none') {
432
+ commit(candidates.map((file) => ({ file, text: '' })), rejections);
433
+ return;
434
+ }
435
+ if (candidates.length === 0) {
436
+ commit([], rejections);
437
+ return;
438
+ }
439
+ // Slot-per-candidate so the emitted batch keeps PICK order regardless of
440
+ // the order the reads settle in. A null slot is a read that failed; the
441
+ // batch commits once every read has settled, one way or the other.
442
+ const slots = new Array(candidates.length).fill(null);
443
+ let remaining = candidates.length;
444
+ const settle = () => {
445
+ remaining -= 1;
446
+ if (remaining > 0)
447
+ return;
448
+ const accepted = [];
449
+ const readFailures = [];
450
+ slots.forEach((slot, index) => {
451
+ if (slot)
452
+ accepted.push(slot);
453
+ else
454
+ readFailures.push({ kind: 'read-failed', file: candidates[index] });
455
+ });
456
+ commit(accepted, [...rejections, ...readFailures]);
457
+ };
458
+ candidates.forEach((file, index) => {
459
+ const reader = new FileReader();
460
+ readersRef.current.add(reader);
461
+ // Deliberately no `onabort` handler: an aborted read must NOT settle,
462
+ // or the batch would commit at exactly the moment we are stopping it.
463
+ reader.onload = () => {
464
+ readersRef.current.delete(reader);
465
+ slots[index] = { file, text: String(reader.result ?? '') };
466
+ settle();
467
+ };
468
+ reader.onerror = () => {
469
+ readersRef.current.delete(reader);
470
+ settle();
471
+ };
472
+ reader.readAsText(file);
473
+ });
474
+ };
475
+ const onInputChange = (event) => {
476
+ const files = Array.from(event.target.files ?? []);
477
+ // Release the FileList the moment it has been read, or re-picking the same
478
+ // file is silently a no-op: the browser fires `change` only when the
479
+ // selection DIFFERS from what the input already holds.
480
+ event.target.value = '';
481
+ ingest(files);
482
+ };
483
+ // `preventDefault` FIRST, and unconditionally. Returning before it does
484
+ // not merely refuse the drop: nothing cancels the browser's OWN action for
485
+ // a dropped file, so the window navigates to the file and whatever the
486
+ // page held unsaved is gone. A zone the host turned off has to swallow the
487
+ // drop, never hand it back to the browser. `dropEffect` says so to the
488
+ // cursor while the file is still in the air.
489
+ const onDragOver = (event) => {
490
+ event.preventDefault();
491
+ if (disabled) {
492
+ event.dataTransfer.dropEffect = 'none';
493
+ return;
494
+ }
495
+ setDragActive(true);
496
+ };
497
+ const onDragLeave = (event) => {
498
+ event.preventDefault();
499
+ setDragActive(false);
500
+ };
501
+ const onDrop = (event) => {
502
+ event.preventDefault();
503
+ // Cleared before the gate, not after, so a host that disables the zone
504
+ // mid-drag does not leave it highlighted for a drag that can no longer
505
+ // land.
506
+ setDragActive(false);
507
+ if (disabled)
508
+ return;
509
+ // Deliberately NOT gated on `full`: a drop onto a full zone is answered
510
+ // with the too-many rejection, which says why, instead of nothing at all.
511
+ ingest(Array.from(event.dataTransfer.files ?? []));
512
+ };
513
+ // Mouse convenience only. A click that ORIGINATED on the input already opens
514
+ // the picker natively and bubbles up here, so ignore it or it opens twice.
515
+ const openPicker = (event) => {
516
+ if (pickerDisabled || event.target === internalRef.current)
517
+ return;
518
+ internalRef.current?.click();
519
+ };
520
+ const removeAt = (index) => {
521
+ // By index, not by name: two files can share a filename and identity is
522
+ // what the row actually stands for.
523
+ const next = valueRef.current.filter((_, position) => position !== index);
524
+ valueRef.current = next;
525
+ onValueChange(next);
526
+ };
527
+ 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 &&
528
+ 'border-ring ring-ring ring-offset-background ring-2 ring-offset-1', pickerDisabled
529
+ ? 'border-muted bg-muted/30 cursor-not-allowed shadow-none'
530
+ : 'cursor-pointer'), "aria-invalid": invalid || undefined, children: [_jsx("input", { ref: internalRef, id: inputId, type: "file", multiple: true, accept: accept, disabled: pickerDisabled, 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" }), full && maxFiles !== undefined ? (_jsx("span", { className: "text-muted-foreground", children: labels?.full
531
+ ? labels.full(maxFiles)
532
+ : defaultFullMessage(maxFiles) })) : (_jsxs("span", { className: "text-muted-foreground", children: [_jsx("span", { className: "text-foreground font-medium", children: labels?.action ?? 'Choose files' }), ' ', labels?.hint ?? 'or drag and drop'] }))] }), value.length > 0 ? (_jsx("ul", { className: "space-y-1", children: value.map((entry, index) => (_jsxs("li", { className: "flex items-center gap-3 text-sm", children: [_jsxs("span", { className: "min-w-0 flex-1 truncate", children: [_jsx("span", { className: "text-foreground font-medium", children: entry.file.name }), ' ', _jsx("span", { className: "text-muted-foreground tabular-nums", children: humanizeSize(entry.file.size) })] }), _jsx(IconButton, { type: "button", variant: "plain", size: "small", disabled: disabled, "aria-label": labels?.remove
533
+ ? labels.remove(entry.file)
534
+ : `Remove ${entry.file.name}`, onClick: () => removeAt(index), children: _jsx(X, { className: "size-4", "aria-hidden": "true" }) })] }, `${entry.file.name}-${index}`))) })) : null, messages.length > 0 ? (_jsx("div", { id: errorId, role: "alert", className: "space-y-1", children: messages.map((message, index) => (_jsx("p", { className: "text-system-error-h1a text-xs font-medium", children: message }, index))) })) : null] }));
535
+ });
536
+ MultipleFileUpload.displayName = 'MultipleFileUpload';
@@ -16,7 +16,11 @@ declare const useFormField: () => {
16
16
  formDescriptionId: string;
17
17
  formMessageId: string;
18
18
  required: boolean | undefined;
19
+ described: Record<DescribingSlot, boolean> | undefined;
20
+ onDescribedChange: ((slot: DescribingSlot, rendered: boolean) => void) | undefined;
19
21
  };
22
+ /** The two slots that can describe a control, in the order a reader hears them. */
23
+ type DescribingSlot = 'message' | 'description';
20
24
  export type FormItemProps = React.HTMLAttributes<HTMLDivElement> & {
21
25
  required?: boolean;
22
26
  };
@@ -1 +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"}
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;;;;;;;;;;;;;+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"}
@@ -23,7 +23,7 @@ const useFormField = () => {
23
23
  const fieldState = form && fieldContext.name
24
24
  ? form.getFieldState(fieldContext.name, form.formState)
25
25
  : undefined;
26
- const { id, required } = itemContext;
26
+ const { id, required, described, onDescribedChange } = itemContext;
27
27
  return {
28
28
  id,
29
29
  name: fieldContext.name,
@@ -31,13 +31,37 @@ const useFormField = () => {
31
31
  formDescriptionId: `${id}-form-item-description`,
32
32
  formMessageId: `${id}-form-item-message`,
33
33
  required,
34
+ described,
35
+ onDescribedChange,
34
36
  ...fieldState
35
37
  };
36
38
  };
37
39
  const FormItemContext = React.createContext({});
40
+ /**
41
+ * Announce that this slot is on the page, for as long as it is.
42
+ *
43
+ * `rendered` is a parameter rather than a caller-side condition because
44
+ * `FormMessage` returns null when it has nothing to say, and a hook cannot sit
45
+ * behind that early return.
46
+ */
47
+ function useDescribingSlot(slot, rendered) {
48
+ const { onDescribedChange } = React.useContext(FormItemContext);
49
+ React.useEffect(() => {
50
+ if (!rendered)
51
+ return;
52
+ onDescribedChange?.(slot, true);
53
+ return () => onDescribedChange?.(slot, false);
54
+ }, [onDescribedChange, slot, rendered]);
55
+ }
38
56
  const FormItem = React.forwardRef(({ className, required, ...props }, ref) => {
39
57
  const id = React.useId();
40
- return (_jsx(FormItemContext.Provider, { value: { id, required }, children: _jsx("div", { ref: ref, className: cn('space-y-2', className), ...props }) }));
58
+ const [described, setDescribed] = React.useState({ message: false, description: false });
59
+ // Keeps the object identity when nothing moved, so a slot re-registering
60
+ // does not re-render the item for no reason.
61
+ const onDescribedChange = React.useCallback((slot, rendered) => setDescribed((current) => current[slot] === rendered
62
+ ? current
63
+ : { ...current, [slot]: rendered }), []);
64
+ return (_jsx(FormItemContext.Provider, { value: { id, required, described, onDescribedChange }, children: _jsx("div", { ref: ref, className: cn('space-y-2', className), ...props }) }));
41
65
  });
42
66
  FormItem.displayName = 'FormItem';
43
67
  const FormLabel = React.forwardRef(({ className, extra, children, ...props }, ref) => {
@@ -50,20 +74,38 @@ const FormLabel = React.forwardRef(({ className, extra, children, ...props }, re
50
74
  FormLabel.displayName = 'FormLabel';
51
75
  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 })] }) }));
52
76
  const FormControl = React.forwardRef(({ ...props }, ref) => {
53
- const { error, formItemId, formDescriptionId, formMessageId } = useFormField();
54
- return (_jsx(Slot, { ref: ref, id: formItemId, "aria-describedby": !error
55
- ? `${formDescriptionId}`
56
- : `${formDescriptionId} ${formMessageId}`, "aria-invalid": !!error, ...props }));
77
+ const { error, formItemId, formDescriptionId, formMessageId, described } = useFormField();
78
+ // Only ids that resolve. A screen reader drops a dangling IDREF silently, so
79
+ // the barrier this removes is diagnostic rather than operational: a form with
80
+ // thirteen broken associations is a form where a real one cannot be spotted.
81
+ //
82
+ // Message first: a reader hears the error before the hint. `undefined` when
83
+ // both slots are empty, which drops the attribute — and, because Radix Slot
84
+ // OVERWRITES rather than merges, still lets the wrapped element carry its own
85
+ // (`ui/file-upload` merges the injected id with its own error id that way).
86
+ const describedBy = [
87
+ described?.message ? formMessageId : undefined,
88
+ described?.description ? formDescriptionId : undefined
89
+ ]
90
+ .filter(Boolean)
91
+ .join(' ') || undefined;
92
+ return (_jsx(Slot, { ref: ref, id: formItemId, "aria-describedby": describedBy, "aria-invalid": !!error, ...props }));
57
93
  });
58
94
  FormControl.displayName = 'FormControl';
59
95
  const FormDescription = React.forwardRef(({ className, ...props }, ref) => {
60
96
  const { formDescriptionId } = useFormField();
97
+ useDescribingSlot('description', true);
61
98
  return (_jsx("p", { ref: ref, id: formDescriptionId, className: cn('text-muted-foreground text-xs font-medium', className), ...props }));
62
99
  });
63
100
  FormDescription.displayName = 'FormDescription';
64
101
  const FormMessage = React.forwardRef(({ className, children, ...props }, ref) => {
65
102
  const { error, formMessageId } = useFormField();
66
103
  const body = error ? String(error?.message) : children;
104
+ // Registered on `body`, not on `error`: a message given plain children
105
+ // renders copy that the control has to point at too. The old expression only
106
+ // added the message id when react-hook-form reported an error, so a
107
+ // standalone message was rendered and never associated.
108
+ useDescribingSlot('message', Boolean(body));
67
109
  if (!body) {
68
110
  return null;
69
111
  }
@@ -1 +1 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/ui/sheet/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,KAAK,cAAc,MAAM,wBAAwB,CAAA;AACxD,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAA;AAIjE,iBAAS,KAAK,CAAC,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,cAAc,CAAC,IAAI,CAAC,qBAE5E;AAED,iBAAS,YAAY,CAAC,EACpB,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,cAAc,CAAC,OAAO,CAAC,qBAErD;AAED,iBAAS,UAAU,CAAC,EAClB,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,cAAc,CAAC,KAAK,CAAC,qBAEnD;AAED,iBAAS,WAAW,CAAC,EACnB,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,cAAc,CAAC,MAAM,CAAC,qBAEpD;AAED,iBAAS,YAAY,CAAC,EACpB,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,cAAc,CAAC,OAAO,CAAC,qBAWrD;AAED,QAAA,MAAM,aAAa;;8EAiBlB,CAAA;AAED,KAAK,iBAAiB,GAAG,KAAK,CAAC,cAAc,CAAC,OAAO,cAAc,CAAC,OAAO,CAAC,GAC1E,YAAY,CAAC,OAAO,aAAa,CAAC,CAAA;AAEpC,iBAAS,YAAY,CAAC,EACpB,IAAc,EACd,SAAS,EACT,QAAQ,EACR,iBAAiB,EACjB,GAAG,KAAK,EACT,EAAE,iBAAiB,qBAsCnB;AAED,iBAAS,WAAW,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,qBAWxE;AAED,iBAAS,WAAW,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,qBAWxE;AAED,iBAAS,UAAU,CAAC,EAClB,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,cAAc,CAAC,KAAK,CAAC,qBAWnD;AAED,iBAAS,gBAAgB,CAAC,EACxB,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,cAAc,CAAC,WAAW,CAAC,qBAQzD;AAED,OAAO,EACL,KAAK,EACL,WAAW,EACX,YAAY,EACZ,YAAY,EACZ,UAAU,EACV,YAAY,EACZ,WAAW,EACX,WAAW,EACX,UAAU,EACV,gBAAgB,EACjB,CAAA"}
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/ui/sheet/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,KAAK,cAAc,MAAM,wBAAwB,CAAA;AACxD,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAA;AAIjE,iBAAS,KAAK,CAAC,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,cAAc,CAAC,IAAI,CAAC,qBAE5E;AAED,iBAAS,YAAY,CAAC,EACpB,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,cAAc,CAAC,OAAO,CAAC,qBAErD;AAED,iBAAS,UAAU,CAAC,EAClB,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,cAAc,CAAC,KAAK,CAAC,qBAEnD;AAED,iBAAS,WAAW,CAAC,EACnB,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,cAAc,CAAC,MAAM,CAAC,qBAEpD;AAED,iBAAS,YAAY,CAAC,EACpB,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,cAAc,CAAC,OAAO,CAAC,qBAWrD;AAED,QAAA,MAAM,aAAa;;8EAiBlB,CAAA;AAED,KAAK,iBAAiB,GAAG,KAAK,CAAC,cAAc,CAAC,OAAO,cAAc,CAAC,OAAO,CAAC,GAC1E,YAAY,CAAC,OAAO,aAAa,CAAC,CAAA;AAEpC,iBAAS,YAAY,CAAC,EACpB,IAAc,EACd,SAAS,EACT,QAAQ,EACR,iBAAiB,EACjB,GAAG,KAAK,EACT,EAAE,iBAAiB,qBA6CnB;AAED,iBAAS,WAAW,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,qBAWxE;AAED,iBAAS,WAAW,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,qBAWxE;AAED,iBAAS,UAAU,CAAC,EAClB,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,cAAc,CAAC,KAAK,CAAC,qBAWnD;AAED,iBAAS,gBAAgB,CAAC,EACxB,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,cAAc,CAAC,WAAW,CAAC,qBAQzD;AAED,OAAO,EACL,KAAK,EACL,WAAW,EACX,YAAY,EACZ,YAAY,EACZ,UAAU,EACV,YAAY,EACZ,WAAW,EACX,WAAW,EACX,UAAU,EACV,gBAAgB,EACjB,CAAA"}
@@ -42,7 +42,7 @@ function SheetContent({ side = 'right', className, children, onInteractOutside,
42
42
  }
43
43
  onInteractOutside?.(event);
44
44
  }, [onInteractOutside]);
45
- return (_jsxs(SheetPortal, { children: [_jsx(SheetOverlay, {}), _jsxs(SheetPrimitive.Content, { "data-slot": "sheet-content", className: cn('flex max-h-screen flex-col overflow-x-auto px-8 pb-0', sheetVariants({ side }), className), onInteractOutside: handleInteractOutside, ...props, children: [children, _jsxs(SheetPrimitive.Close, { className: "data-[state=open]:bg-secondary absolute top-7 right-4 rounded-sm opacity-70 transition-opacity hover:opacity-100 focus:outline-hidden disabled:pointer-events-none", children: [_jsx(X, { className: "h-6 w-6" }), _jsx("span", { className: "sr-only", children: "Close" })] })] })] }));
45
+ return (_jsxs(SheetPortal, { children: [_jsx(SheetOverlay, {}), _jsxs(SheetPrimitive.Content, { "data-slot": "sheet-content", className: cn('flex max-h-screen flex-col overflow-x-auto px-8 pb-0', sheetVariants({ side }), className), onInteractOutside: handleInteractOutside, ...props, children: [children, _jsxs(SheetPrimitive.Close, { className: "data-[state=open]:bg-secondary ring-offset-background focus-visible:ring-ring absolute top-7 right-4 rounded-sm opacity-70 transition-opacity hover:opacity-100 focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-hidden disabled:pointer-events-none", children: [_jsx(X, { className: "h-6 w-6" }), _jsx("span", { className: "sr-only", children: "Close" })] })] })] }));
46
46
  }
47
47
  function SheetHeader({ className, ...props }) {
48
48
  return (_jsx("div", { "data-slot": "sheet-header", className: cn('mb-4 flex flex-col space-y-2 text-center sm:text-left', className), ...props }));
@@ -54,6 +54,6 @@ function SheetTitle({ className, ...props }) {
54
54
  return (_jsx(SheetPrimitive.Title, { "data-slot": "sheet-title", className: cn('text-muted-foreground mb-2 flex text-xl font-bold', className), ...props }));
55
55
  }
56
56
  function SheetDescription({ className, ...props }) {
57
- return (_jsx(SheetPrimitive.Description, { "data-slot": "sheet-description", className: cn('text-shadcn-500 text-sm font-medium', className), ...props }));
57
+ return (_jsx(SheetPrimitive.Description, { "data-slot": "sheet-description", className: cn('text-muted-foreground text-sm font-medium', className), ...props }));
58
58
  }
59
59
  export { Sheet, SheetPortal, SheetOverlay, SheetTrigger, SheetClose, SheetContent, SheetHeader, SheetFooter, SheetTitle, SheetDescription };
@@ -4,6 +4,7 @@ export * from './sidebar-item-icon-button.js';
4
4
  export * from './sidebar-item-button.js';
5
5
  export * from './sidebar-item.js';
6
6
  export * from './sidebar-expand-button.js';
7
+ export * from './sidebar-trigger.js';
7
8
  export * from './sidebar-back-button.js';
8
9
  export * from './sidebar-provider.js';
9
10
  export * from './sidebar-item-collapsible.js';
@@ -1 +1 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/ui/sidebar/index.tsx"],"names":[],"mappings":"AAAA,cAAc,gBAAgB,CAAA;AAC9B,cAAc,sBAAsB,CAAA;AACpC,cAAc,4BAA4B,CAAA;AAC1C,cAAc,uBAAuB,CAAA;AACrC,cAAc,gBAAgB,CAAA;AAC9B,cAAc,yBAAyB,CAAA;AACvC,cAAc,uBAAuB,CAAA;AACrC,cAAc,oBAAoB,CAAA;AAClC,cAAc,4BAA4B,CAAA;AAC1C,cAAc,kBAAkB,CAAA"}
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/ui/sidebar/index.tsx"],"names":[],"mappings":"AAAA,cAAc,gBAAgB,CAAA;AAC9B,cAAc,sBAAsB,CAAA;AACpC,cAAc,4BAA4B,CAAA;AAC1C,cAAc,uBAAuB,CAAA;AACrC,cAAc,gBAAgB,CAAA;AAC9B,cAAc,yBAAyB,CAAA;AACvC,cAAc,mBAAmB,CAAA;AACjC,cAAc,uBAAuB,CAAA;AACrC,cAAc,oBAAoB,CAAA;AAClC,cAAc,4BAA4B,CAAA;AAC1C,cAAc,kBAAkB,CAAA"}
@@ -4,6 +4,7 @@ export * from './sidebar-item-icon-button.js';
4
4
  export * from './sidebar-item-button.js';
5
5
  export * from './sidebar-item.js';
6
6
  export * from './sidebar-expand-button.js';
7
+ export * from './sidebar-trigger.js';
7
8
  export * from './sidebar-back-button.js';
8
9
  export * from './sidebar-provider.js';
9
10
  export * from './sidebar-item-collapsible.js';
@@ -7,6 +7,6 @@ type SidebarExpandButtonProps = {
7
7
  */
8
8
  tooltip?: string;
9
9
  };
10
- export declare const SidebarExpandButton: ({ tooltip }: SidebarExpandButtonProps) => React.JSX.Element;
10
+ export declare const SidebarExpandButton: ({ tooltip }: SidebarExpandButtonProps) => React.JSX.Element | null;
11
11
  export {};
12
12
  //# sourceMappingURL=sidebar-expand-button.d.ts.map
@@ -1 +1 @@
1
- {"version":3,"file":"sidebar-expand-button.d.ts","sourceRoot":"","sources":["../../../../../src/components/ui/sidebar/sidebar-expand-button.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAA;AAYzB,KAAK,wBAAwB,GAAG;IAC9B;;;;OAIG;IACH,OAAO,CAAC,EAAE,MAAM,CAAA;CACjB,CAAA;AAED,eAAO,MAAM,mBAAmB,GAAI,aAAa,wBAAwB,sBAyDxE,CAAA"}
1
+ {"version":3,"file":"sidebar-expand-button.d.ts","sourceRoot":"","sources":["../../../../../src/components/ui/sidebar/sidebar-expand-button.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAA;AAYzB,KAAK,wBAAwB,GAAG;IAC9B;;;;OAIG;IACH,OAAO,CAAC,EAAE,MAAM,CAAA;CACjB,CAAA;AAED,eAAO,MAAM,mBAAmB,GAAI,aAAa,wBAAwB,6BAwExE,CAAA"}