@elabs-ai/components-ui 4.1.0 → 4.2.0

package/src/components/file-upload/file-upload.tsx

@@ -18,6 +18,7 @@ import {
 import { X, Upload, FileIcon, CheckCircle2, AlertCircle } from "lucide-react";
 import { cn } from "../../lib/cn";
 import { Button } from "../button";
+import { useLocale } from "../locale-provider";
 import { Progress } from "../progress";
 
 // ---------------------------------------------------------------------------
@@ -39,6 +40,42 @@ export interface UploadFile {
   errorMessage?: string;
 }
 
+/** Why `addFiles` (picker OR drag-and-drop) declined a file. */
+export type FileRejectionReason = "accept" | "maxSize" | "maxFiles" | "multiple";
+
+export interface FileRejection {
+  file: File;
+  reason: FileRejectionReason;
+}
+
+/**
+ * Match a file against an `<input accept>`-style pattern list (comma-separated
+ * extensions like `.png`, exact MIME types like `image/png`, or wildcards like
+ * `image/*`). Drag-and-drop delivers files straight from `DataTransfer` — the
+ * browser only enforces `accept` for the native picker dialog, never for a
+ * drop — so this has to be re-applied by hand for the drop path to actually
+ * "respect `accept`".
+ */
+function fileMatchesAccept(file: File, accept: string | undefined): boolean {
+  if (!accept) return true;
+  const patterns = accept
+    .split(",")
+    .map((p) => p.trim().toLowerCase())
+    .filter(Boolean);
+  if (patterns.length === 0) return true;
+  const name = file.name.toLowerCase();
+  const type = file.type.toLowerCase();
+  return patterns.some((pattern) => {
+    if (pattern.startsWith(".")) return name.endsWith(pattern);
+    if (pattern.endsWith("/*")) return type.startsWith(pattern.slice(0, -1));
+    return type === pattern;
+  });
+}
+
+function makeUploadFileId(file: File): string {
+  return `${file.name}-${Date.now()}-${Math.random()}`;
+}
+
 // ---------------------------------------------------------------------------
 // Context
 // ---------------------------------------------------------------------------
@@ -58,6 +95,22 @@ interface FileUploadContextValue {
   inputId: string;
 }
 
+/** Read `accept`/`multiple`/`maxSize`/`maxFiles` off a rejection for a default message. */
+export function describeFileRejection(rejection: FileRejection): string {
+  switch (rejection.reason) {
+    case "accept":
+      return `${rejection.file.name} is not an accepted file type.`;
+    case "maxSize":
+      return `${rejection.file.name} is too large.`;
+    case "maxFiles":
+      return `${rejection.file.name} was not added — the file limit was reached.`;
+    case "multiple":
+      return `${rejection.file.name} was not added — only one file is allowed.`;
+    default:
+      return `${rejection.file.name} was not added.`;
+  }
+}
+
 const FileUploadContext = createContext<FileUploadContextValue | null>(null);
 
 function useFileUpload(): FileUploadContextValue {
@@ -75,6 +128,12 @@ export interface FileUploadProps extends HTMLAttributes<HTMLDivElement> {
   files?: UploadFile[];
   /** Called when files are added or removed. */
   onFilesChange?: (files: UploadFile[]) => void;
+  /**
+   * Called with the files a picker selection OR a drag-and-drop declined —
+   * wrong type (`accept`), over `maxSize`, over `maxFiles`, or extra files
+   * dropped when `multiple` is false — each with its {@link FileRejectionReason}.
+   */
+  onFilesRejected?: (rejections: FileRejection[]) => void;
   /** Accepted MIME types / extensions (forwarded to <input accept>). */
   accept?: string;
   /** Allow multiple files at once. */
@@ -102,6 +161,7 @@ export const FileUpload = forwardRef<HTMLDivElement, FileUploadProps>(function F
   {
     files: filesProp,
     onFilesChange,
+    onFilesRejected,
     accept,
     multiple = false,
     maxSize,
@@ -134,19 +194,45 @@ export const FileUpload = forwardRef<HTMLDivElement, FileUploadProps>(function F
 
   const addFiles = useCallback(
     (incoming: File[]) => {
-      const toAdd = incoming.filter((f) => {
-        if (maxSize && f.size > maxSize) return false;
-        return true;
-      });
+      const rejections: FileRejection[] = [];
+
+      // A drop can deliver more files than the native picker ever would —
+      // `multiple` is only enforced by the browser for the `<input>` dialog,
+      // never for `DataTransfer`, so re-apply it here for the drop path too.
+      let candidates = incoming;
+      if (!multiple && candidates.length > 1) {
+        rejections.push(
+          ...candidates.slice(1).map((file) => ({ file, reason: "multiple" as const })),
+        );
+        candidates = candidates.slice(0, 1);
+      }
+
+      const toAdd: File[] = [];
+      for (const f of candidates) {
+        if (!fileMatchesAccept(f, accept)) {
+          rejections.push({ file: f, reason: "accept" });
+          continue;
+        }
+        if (maxSize && f.size > maxSize) {
+          rejections.push({ file: f, reason: "maxSize" });
+          continue;
+        }
+        toAdd.push(f);
+      }
 
       const next = [...files];
       for (const f of toAdd) {
-        if (maxFiles && next.length >= maxFiles) break;
-        next.push({ id: `${f.name}-${Date.now()}-${Math.random()}`, file: f });
+        if (maxFiles && next.length >= maxFiles) {
+          rejections.push({ file: f, reason: "maxFiles" });
+          continue;
+        }
+        next.push({ id: makeUploadFileId(f), file: f });
       }
+
       commit(next);
+      if (rejections.length > 0) onFilesRejected?.(rejections);
     },
-    [files, maxSize, maxFiles, commit],
+    [files, accept, multiple, maxSize, maxFiles, commit, onFilesRejected],
   );
 
   const removeFile = useCallback(
@@ -256,30 +342,61 @@ export const FileUpload = forwardRef<HTMLDivElement, FileUploadProps>(function F
 // FileUploadDropzone
 // ---------------------------------------------------------------------------
 
-export interface FileUploadDropzoneProps extends HTMLAttributes<HTMLElement> {
-  /** Label for the visually-hidden file picker link (for SR users). */
+export interface FileUploadDropzoneProps extends HTMLAttributes<HTMLDivElement> {
+  /** Label for the default "Browse files" button. */
   browseLabel?: string;
 }
 
 /**
  * FileUploadDropzone — the drag-and-drop target.
  *
- * Uses a `<label>` wrapping the hidden `<input>` so the ENTIRE zone is ONE hit
- * target — no `<div onClick>`.  Keyboard users get the Browse button as a
- * complementary path.
+ * A plain `<div>` drop surface with exactly ONE keyboard-reachable control:
+ *
+ * - Default content: a real `<button>` ("Browse files") is the tab stop; the
+ *   zone itself carries no role and no tab stop, so nothing interactive is
+ *   nested inside another interactive element.
+ * - Custom `children`: there is no inner button, so the zone itself becomes
+ *   the control (`role="button"`, a tab stop, Enter/Space). Custom children
+ *   must then be non-interactive content.
+ *
+ * A pointer click anywhere on the zone also opens the picker — a mouse
+ * convenience on top of the keyboard path above, never the only path.
  */
-export const FileUploadDropzone = forwardRef<HTMLElement, FileUploadDropzoneProps>(
+export const FileUploadDropzone = forwardRef<HTMLDivElement, FileUploadDropzoneProps>(
   function FileUploadDropzone(
-    { className, children, browseLabel = "Browse files", ...props },
+    { className, children, browseLabel, onClick, onKeyDown, ...props },
     ref,
   ) {
-    const { isDragging, disabled, inputId, openPicker } = useFileUpload();
+    const { isDragging, disabled, openPicker } = useFileUpload();
+    const { t } = useLocale();
+    const resolvedBrowseLabel = browseLabel ?? t("ui.fileUpload.browseFiles");
+    // With custom children there is no inner button, so the zone owns the
+    // one keyboard path itself.
+    const isSelfControl = children != null;
 
     return (
-      // label wraps the hidden input — clicking anywhere on the zone opens the picker
-      <label
-        ref={ref as React.Ref<HTMLLabelElement>}
-        htmlFor={inputId}
+      <div
+        ref={ref}
+        role={isSelfControl ? "button" : undefined}
+        tabIndex={isSelfControl && !disabled ? 0 : undefined}
+        // Also on the default (role-less) zone: it marks the dimmed copy as
+        // inactive UI, which WCAG 1.4.3 exempts from contrast — the same
+        // exemption a `<label>` of a disabled control gets.
+        aria-disabled={disabled || undefined}
+        onClick={(e) => {
+          onClick?.(e);
+          if (disabled || e.defaultPrevented) return;
+          openPicker();
+        }}
+        onKeyDown={(e) => {
+          onKeyDown?.(e);
+          if (!isSelfControl || disabled || e.defaultPrevented) return;
+          if (e.target !== e.currentTarget) return;
+          if (e.key === "Enter" || e.key === " ") {
+            e.preventDefault();
+            openPicker();
+          }
+        }}
         data-slot="file-upload-dropzone"
         data-dragging={isDragging || undefined}
         data-disabled={disabled || undefined}
@@ -300,14 +417,18 @@ export const FileUploadDropzone = forwardRef<HTMLElement, FileUploadDropzoneProp
               <Upload className="size-5 text-muted-foreground" aria-hidden="true" />
             </div>
             <div className="flex flex-col items-center gap-1 text-center">
-              <p className="text-sm font-medium text-foreground">Drag & drop files here</p>
-              <p className="text-xs text-muted-foreground">
+              <p className="text-body font-medium text-foreground">
+                {t("ui.fileUpload.dragDropHere")}
+              </p>
+              <p className="text-meta text-muted-foreground">
                 or{" "}
                 <button
                   type="button"
                   disabled={disabled}
                   onClick={(e) => {
-                    e.preventDefault();
+                    // The zone's own click handler opens the picker; stop the
+                    // bubble so one activation opens it exactly once.
+                    e.stopPropagation();
                     openPicker();
                   }}
                   className={cn(
@@ -320,13 +441,13 @@ export const FileUploadDropzone = forwardRef<HTMLElement, FileUploadDropzoneProp
                     "disabled:pointer-events-none disabled:opacity-50",
                   )}
                 >
-                  {browseLabel}
+                  {resolvedBrowseLabel}
                 </button>
               </p>
             </div>
           </>
         )}
-      </label>
+      </div>
     );
   },
 );
@@ -344,6 +465,7 @@ export type FileUploadListProps = HTMLAttributes<HTMLUListElement>;
 export const FileUploadList = forwardRef<HTMLUListElement, FileUploadListProps>(
   function FileUploadList({ className, children, ...props }, ref) {
     const { files } = useFileUpload();
+    const { t } = useLocale();
     if (files.length === 0 && !children) return null;
 
     return (
@@ -355,7 +477,7 @@ export const FileUploadList = forwardRef<HTMLUListElement, FileUploadListProps>(
       <ul
         ref={ref}
         aria-live="polite"
-        aria-label="Selected files"
+        aria-label={t("ui.fileUpload.selectedFiles")}
         data-slot="file-upload-list"
         className={cn("flex flex-col gap-2", className)}
         {...props}
@@ -420,10 +542,10 @@ export const FileUploadItem = forwardRef<HTMLLIElement, FileUploadItemProps>(
       >
         <div className="flex items-center gap-2">
           {statusIcon[resolvedStatus]}
-          <span className="flex-1 min-w-0 truncate text-sm text-foreground">
+          <span className="flex-1 min-w-0 truncate text-body text-foreground">
             {uploadFile.file.name}
           </span>
-          <span className="shrink-0 text-xs tabular-nums text-muted-foreground">
+          <span className="shrink-0 text-meta tabular-nums text-muted-foreground">
             {formatFileSize(uploadFile.file.size)}
           </span>
           <Button
@@ -445,7 +567,7 @@ export const FileUploadItem = forwardRef<HTMLLIElement, FileUploadItemProps>(
           // #124: this is running text (the rejection reason), so it takes the
           // >=4.5:1 ink rung `text-destructive-text` — not the 3:1 mark rung the
           // `statusIcon.error` glyph above correctly keeps.
-          <p role="alert" className="text-xs text-destructive-text">
+          <p role="alert" className="text-meta text-destructive-text">
             {resolvedError}
           </p>
         )}

package/src/components/form/form.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import {
   createContext,
   forwardRef,
@@ -114,7 +116,7 @@ export const FormDescription = forwardRef<
     <p
       ref={ref}
       id={formDescriptionId}
-      className={cn("text-sm text-muted-foreground", className)}
+      className={cn("text-body text-muted-foreground", className)}
       {...props}
     />
   );
@@ -132,7 +134,7 @@ export const FormMessage = forwardRef<HTMLParagraphElement, HTMLAttributes<HTMLP
         className={cn(
           // #124: the error message body is running text — ink rung, not the
           // 3:1 mark rung `text-destructive` guarantees.
-          "text-sm font-medium text-destructive-text animate-in fade-in slide-in-from-top-1 ease-entrance",
+          "text-body font-medium text-destructive-text animate-in fade-in slide-in-from-top-1 ease-entrance",
           className,
         )}
         {...props}

package/src/components/hover-card/hover-card.tsx

@@ -12,6 +12,7 @@ export const HoverCardContent = forwardRef<
   return (
     <HoverCardPrimitive.Content
       ref={ref}
+      data-slot="hover-card-content"
       align={align}
       sideOffset={sideOffset}
       className={cn(

package/src/components/icon-button/icon-button.tsx

@@ -97,7 +97,7 @@ export const IconButton = forwardRef<HTMLButtonElement, IconButtonProps>(functio
             data-slot="icon-button"
             tabIndex={disabled ? 0 : undefined}
             className={cn(
-              "inline-flex rounded-md",
+              "inline-flex rounded-control",
               // While disabled this span IS the focus target (the button is out
               // of the tab order), so it must carry the system's focus ring —
               // without this it falls back to the UA default outline, which is

package/src/components/input/input.tsx

@@ -12,12 +12,16 @@ export const Input = forwardRef<HTMLInputElement, InputProps>(function Input(
       ref={ref}
       type={type}
       className={cn(
-        "flex h-9 w-full rounded-md border border-input bg-background text-foreground px-3 py-1 text-sm shadow-sm transition-[color,background-color,border-color,box-shadow] duration-fast ease-standard",
+        "flex h-control w-full rounded-control border border-input bg-input-background text-foreground px-3 py-1 text-body shadow-input transition-[color,background-color,border-color,box-shadow] duration-fast ease-standard",
         "placeholder:text-muted-foreground",
         "focus-ring focus-visible:ring-offset-1 focus-visible:ring-offset-background",
-        "disabled:cursor-not-allowed disabled:opacity-50 disabled:bg-muted disabled:border-border",
+        // One disabled mechanism (opacity fade), matching every `Button`
+        // variant — `disabled:bg-muted` used to also fire here, stacking a
+        // fill swap on top of the fade (#286); `disabled:border-border` stays,
+        // it is the separate/subtle "not editable" edge, not a fill.
+        "disabled:cursor-not-allowed disabled:opacity-50 disabled:border-border",
         "aria-[invalid=true]:border-destructive aria-[invalid=true]:ring-destructive",
-        "file:border-0 file:bg-transparent file:text-sm file:font-medium",
+        "file:border-0 file:bg-transparent file:text-body file:font-medium",
         className,
       )}
       {...props}

package/src/components/input-group/input-group.tsx

@@ -7,11 +7,11 @@ import { Textarea } from "../textarea";
 
 export const inputGroupVariants = cva(
   cn(
-    "group/input-group relative flex w-full flex-wrap items-center rounded-md transition-[color,box-shadow] duration-fast ease-standard",
+    "group/input-group relative flex w-full flex-wrap items-center rounded-control transition-[color,box-shadow] duration-fast ease-standard",
     // Grow to fit a textarea even when it's nested (e.g. wrapped in a
     // `display:contents` body like PromptInputBody). `:has(>textarea)`
     // misses through that wrapper, so match any descendant textarea.
-    "h-9 has-[textarea]:h-auto",
+    "h-control has-[textarea]:h-auto",
     // The compound indicator is the wrapper's, not the control's — the control
     // is borderless and full-bleed, so a ring around IT would draw inside the
     // well. `focus-ring-static` paints BOTH layers; the only geometry knob is
@@ -29,7 +29,7 @@ export const inputGroupVariants = cva(
       variant: {
         // The form-field look: the strong `--input` boundary is the field's
         // sole structural cue, so it stays on the strong rung.
-        outline: "border border-input shadow-sm",
+        outline: "border border-input shadow-input",
         // The composer look (#194, research 08 §C.1/§D): a soft fill with the
         // focus-within ring carrying focus — NO hard border. Separation comes
         // from the fill (the chat footer already draws its own `border-t`).
@@ -68,7 +68,7 @@ export const InputGroup = forwardRef<HTMLDivElement, InputGroupProps>(function I
 });
 
 export const inputGroupAddonVariants = cva(
-  "flex h-auto cursor-text items-center gap-2 py-1.5 text-sm font-medium text-muted-foreground select-none [&>svg:not([class*='size-'])]:size-4",
+  "flex h-auto cursor-text items-center gap-2 py-1.5 text-body font-medium text-muted-foreground select-none [&>svg:not([class*='size-'])]:size-4",
   {
     variants: {
       align: {
@@ -98,7 +98,7 @@ export const InputGroupAddon = forwardRef<
   );
 });
 
-const inputGroupButtonVariants = cva("flex items-center gap-2 text-sm shadow-none", {
+const inputGroupButtonVariants = cva("flex items-center gap-2 text-body shadow-none", {
   variants: {
     size: {
       xs: "h-6 gap-1 rounded-sm px-2 has-[>svg]:px-2 [&>svg:not([class*='size-'])]:size-3.5",
@@ -137,7 +137,7 @@ export const InputGroupText = forwardRef<HTMLSpanElement, ComponentProps<"span">
       <span
         ref={ref}
         className={cn(
-          "flex items-center gap-2 text-sm text-muted-foreground [&_svg:not([class*='size-'])]:size-4",
+          "flex items-center gap-2 text-body text-muted-foreground [&_svg:not([class*='size-'])]:size-4",
           className,
         )}
         {...props}

package/src/components/input-otp/input-otp.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import { forwardRef, useContext, type ComponentPropsWithoutRef, type ElementRef } from "react";
 import { OTPInput, OTPInputContext } from "input-otp";
 import { Minus } from "lucide-react";
@@ -41,7 +43,7 @@ export const InputOTPSlot = forwardRef<
     <div
       ref={ref}
       className={cn(
-        "relative flex size-9 items-center justify-center border-y border-e border-input text-sm shadow-sm transition-[color,border-color,box-shadow] duration-fast ease-standard first:rounded-s-md first:border-s last:rounded-e-md",
+        "relative flex size-9 items-center justify-center border-y border-e border-input text-body shadow-sm transition-[color,border-color,box-shadow] duration-fast ease-standard first:rounded-s-md first:border-s last:rounded-e-md",
         // The OTP slot IS the field's focus indicator: the real focused element is
         // InputOTP's visually-hidden <input>, and `isActive` is the caret's slot. It
         // therefore carries the compound indicator (#67) — the state is JS-driven, so

package/src/components/keyboard-shortcuts/keyboard-shortcuts.tsx

@@ -101,7 +101,7 @@ export const KeyboardShortcuts = forwardRef<HTMLDivElement, KeyboardShortcutsPro
             </label>
             <Search
               aria-hidden="true"
-              className="pointer-events-none absolute left-2.5 top-1/2 size-4 -translate-y-1/2 text-muted-foreground"
+              className="pointer-events-none absolute start-2.5 top-1/2 size-4 -translate-y-1/2 text-muted-foreground"
             />
             <Input
               id={searchId}
@@ -110,7 +110,7 @@ export const KeyboardShortcuts = forwardRef<HTMLDivElement, KeyboardShortcutsPro
               placeholder={t("ui.keyboardShortcuts.searchPlaceholder")}
               value={query}
               onChange={(event) => setQuery(event.target.value)}
-              className="pl-8"
+              className="ps-8"
             />
           </div>
         )}

package/src/components/label/label.tsx

@@ -10,7 +10,7 @@ export const Label = forwardRef<
     <LabelPrimitive.Root
       ref={ref}
       className={cn(
-        "text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70",
+        "text-body font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70",
         className,
       )}
       {...props}

package/src/components/list-editor/list-editor.test.tsx

@@ -69,6 +69,30 @@ describe("ListEditor", () => {
     expect(onValueChange).toHaveBeenCalledWith(["b", "a"]);
   });
 
+  it("keeps keyboard focus on the moved row's own move-down button after a non-boundary move", async () => {
+    render(<ListEditor defaultValue={["a", "b", "c", "d"]} />);
+    const moveDown = screen.getByRole("button", { name: "Move item 2 down" });
+    moveDown.focus();
+    await userEvent.keyboard("{Enter}");
+    // Row "b" moved from position 2 to position 3 — index-keyed rows would
+    // leave focus sitting on whatever the DOM slot at the old position now
+    // renders (the row that got swapped INTO it), not on the row the user
+    // actually moved.
+    expect(screen.getByRole("button", { name: "Move item 3 down" })).toHaveFocus();
+  });
+
+  it("redirects focus to the complementary button when a move disables the one just pressed", async () => {
+    render(<ListEditor defaultValue={["a", "b", "c"]} />);
+    const moveUp = screen.getByRole("button", { name: "Move item 2 up" });
+    moveUp.focus();
+    await userEvent.keyboard("{Enter}");
+    // "b" is now row 1 (the top) — its own "move up" is now disabled, and a
+    // browser blurs a focused element the moment it goes disabled. Focus
+    // must land on that same row's still-enabled "move down" button instead
+    // of falling through to <body>.
+    expect(screen.getByRole("button", { name: "Move item 1 down" })).toHaveFocus();
+  });
+
   it("hides reorder buttons when reorderable=false", () => {
     render(<ListEditor defaultValue={["a", "b"]} reorderable={false} />);
     // Anchored at the start — "Remove item 1" contains the substring "move