@elabs-ai/components-ui 4.1.0 → 4.2.0

package/src/components/date-range-picker/date-range-picker.tsx

@@ -1,14 +1,20 @@
 // a2ui.exposed: yes
 "use client";
 
-import { forwardRef, useState } from "react";
+import { forwardRef, type HTMLAttributes } from "react";
 import { Calendar as CalendarIcon } from "lucide-react";
 import type { DateRange } from "react-day-picker";
 import { cn } from "../../lib/cn";
+import { useControllableState } from "../../lib/use-controllable-state";
+import { useIsMobile } from "../../lib/use-mobile";
 import { Button } from "../button";
 import { Calendar } from "../calendar";
+import { useLocale } from "../locale-provider";
 import { Popover, PopoverContent, PopoverTrigger } from "../popover";
 
+/** Below this width, the calendar collapses to a single month (Tailwind `sm`). */
+const NARROW_BREAKPOINT = 640;
+
 export type { DateRange };
 
 export interface DateRangePreset {
@@ -16,7 +22,10 @@ export interface DateRangePreset {
   getRange: () => DateRange;
 }
 
-export interface DateRangePickerProps {
+export interface DateRangePickerProps extends Omit<
+  HTMLAttributes<HTMLButtonElement>,
+  "onSelect" | "children" | "value" | "defaultValue"
+> {
   value?: DateRange;
   defaultValue?: DateRange;
   onValueChange?: (range?: DateRange) => void;
@@ -26,16 +35,6 @@ export interface DateRangePickerProps {
   className?: string;
 }
 
-const fmt = (date: Date) =>
-  new Intl.DateTimeFormat(undefined, { dateStyle: "medium" }).format(date);
-
-function formatRange(range: DateRange | undefined, placeholder: string): string {
-  if (!range) return placeholder;
-  if (range.from && range.to) return `${fmt(range.from)} – ${fmt(range.to)}`;
-  if (range.from) return `${fmt(range.from)} – …`;
-  return placeholder;
-}
-
 /**
  * Date range picker (Popover + Calendar in range mode).
  * Supports optional preset quick-picks, controlled or uncontrolled.
@@ -50,24 +49,31 @@ export const DateRangePicker = forwardRef<HTMLButtonElement, DateRangePickerProp
       numberOfMonths = 2,
       placeholder = "Pick a date range",
       className,
+      ...props
     },
     ref,
   ) {
-    const [internal, setInternal] = useState<DateRange | undefined>(defaultValue);
-
-    const isControlled = value !== undefined;
-    const range = isControlled ? value : internal;
+    const { formatDate } = useLocale();
+    const [range, setRange] = useControllableState<DateRange | undefined>(
+      value,
+      defaultValue,
+      onValueChange,
+    );
 
-    const setRange = (r?: DateRange) => {
-      if (!isControlled) {
-        setInternal(r);
-      }
-      // Always fire the callback so uncontrolled consumers can observe changes
-      onValueChange?.(r);
+    const fmt = (date: Date) => formatDate(date, { dateStyle: "medium" });
+    const formatRange = (r: DateRange | undefined): string => {
+      if (!r) return placeholder;
+      if (r.from && r.to) return `${fmt(r.from)} – ${fmt(r.to)}`;
+      if (r.from) return `${fmt(r.from)} – …`;
+      return placeholder;
     };
 
     const hasRange = Boolean(range?.from);
-    const label = formatRange(range, placeholder);
+    const label = formatRange(range);
+
+    // Below `sm`, two side-by-side months push the popover off-screen (#reviewed).
+    const isNarrow = useIsMobile(NARROW_BREAKPOINT);
+    const monthsToShow = isNarrow ? 1 : numberOfMonths;
 
     return (
       <Popover>
@@ -76,8 +82,9 @@ export const DateRangePicker = forwardRef<HTMLButtonElement, DateRangePickerProp
             ref={ref}
             variant="outline"
             aria-haspopup="dialog"
+            {...props}
             className={cn(
-              "w-72 justify-start gap-2 text-start font-normal",
+              "w-full justify-start gap-2 text-start font-normal",
               !hasRange && "text-muted-foreground",
               className,
             )}
@@ -86,10 +93,14 @@ export const DateRangePicker = forwardRef<HTMLButtonElement, DateRangePickerProp
             {label}
           </Button>
         </PopoverTrigger>
-        <PopoverContent className="w-auto p-0" align="start">
+        <PopoverContent
+          className="w-auto max-w-[calc(100vw-1rem)] p-0"
+          align="start"
+          collisionPadding={8}
+        >
           {presets && presets.length > 0 ? (
             <div className="flex">
-              <div className="flex flex-col gap-1 border-r border-border p-2">
+              <div className="flex flex-col gap-1 border-e border-border p-2">
                 {presets.map((preset) => (
                   <Button
                     key={preset.label}
@@ -104,7 +115,7 @@ export const DateRangePicker = forwardRef<HTMLButtonElement, DateRangePickerProp
               </div>
               <Calendar
                 mode="range"
-                numberOfMonths={numberOfMonths}
+                numberOfMonths={monthsToShow}
                 selected={range}
                 onSelect={setRange}
                 autoFocus
@@ -113,7 +124,7 @@ export const DateRangePicker = forwardRef<HTMLButtonElement, DateRangePickerProp
           ) : (
             <Calendar
               mode="range"
-              numberOfMonths={numberOfMonths}
+              numberOfMonths={monthsToShow}
               selected={range}
               onSelect={setRange}
               autoFocus

package/src/components/descriptions/descriptions.tsx

@@ -3,7 +3,7 @@ import { createContext, forwardRef, use, type HTMLAttributes } from "react";
 import { cva, type VariantProps } from "class-variance-authority";
 import { cn } from "../../lib/cn";
 
-const descriptionsVariants = cva("grid gap-x-6 gap-y-3 text-sm", {
+const descriptionsVariants = cva("grid gap-x-6 gap-y-3 text-body", {
   variants: {
     columns: {
       1: "grid-cols-1",

package/src/components/dialog/dialog.test.tsx

@@ -47,11 +47,16 @@ describe("DialogContent size variants", () => {
     expect(content.className).toContain("max-w-3xl");
   });
 
-  it("size='full' renders max-w-[95vw] and h-[90vh]", () => {
+  it("size='full' renders max-w-[95vw] and h-[90dvh] — dvh, not vh (mobile browser chrome)", () => {
     render(<Wrapper size="full" />);
     const content = screen.getByRole("dialog");
     expect(content.className).toContain("max-w-[95vw]");
-    expect(content.className).toContain("h-[90vh]");
+    expect(content.className).toContain("h-[90dvh]");
+    expect(content.className).toContain("max-h-[90dvh]");
+    // `vh` on mobile Safari/Chrome is measured against the viewport with the
+    // browser chrome collapsed, so a plain `vh` value overflows past what is
+    // actually visible while the address bar is shown.
+    expect(content.className).not.toMatch(/(?<!d)vh\]/);
   });
 });
 
@@ -106,7 +111,7 @@ describe("DialogContent height/scroll regime (#341)", () => {
     // later variant utility, so `full` still lets its body own the scroll.
     expect(content.className).toContain("overflow-hidden");
     expect(content.className).not.toContain("overflow-y-auto");
-    expect(content.className).toContain("max-h-[90vh]");
+    expect(content.className).toContain("max-h-[90dvh]");
     expect(content.className).not.toContain("max-h-[calc(100dvh-2rem)]");
   });
 });

package/src/components/dialog/dialog.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import {
   forwardRef,
   useCallback,
@@ -11,6 +13,7 @@ import {
 import * as DialogPrimitive from "@radix-ui/react-dialog";
 import { cva, type VariantProps } from "class-variance-authority";
 import { cn } from "../../lib/cn";
+import { useLocale } from "../locale-provider";
 import { Heading, Text } from "../typography";
 
 /**
@@ -55,7 +58,11 @@ export const dialogContentVariants = cva(
         sm: "max-w-sm",
         lg: "max-w-lg",
         xl: "max-w-3xl",
-        full: "max-w-[95vw] h-[90vh] max-h-[90vh] overflow-hidden",
+        // `dvh` (dynamic viewport height), not `vh`: on mobile Safari/Chrome
+        // `vh` is measured against the LARGEST viewport (browser chrome
+        // collapsed), so `size="full"` overflows past the visible viewport
+        // while the address bar is showing.
+        full: "max-w-[95vw] h-[90dvh] max-h-[90dvh] overflow-hidden",
       },
     },
     defaultVariants: { size: "lg" },
@@ -76,7 +83,7 @@ export const DialogOverlay = forwardRef<
       ref={ref}
       data-slot="dialog-overlay"
       className={cn(
-        "fixed inset-0 z-50 bg-foreground/50 backdrop-blur-sm",
+        "fixed inset-0 z-50 bg-overlay backdrop-blur-overlay",
         "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
         className,
       )}
@@ -90,6 +97,7 @@ export const DialogContent = forwardRef<
   ComponentPropsWithoutRef<typeof DialogPrimitive.Content> &
     VariantProps<typeof dialogContentVariants>
 >(function DialogContent({ className, children, size, onOpenAutoFocus, ...props }, ref) {
+  const { t } = useLocale();
   const contentRef = useRef<HTMLDivElement | null>(null);
   const setRefs = useCallback(
     (node: HTMLDivElement | null) => {
@@ -150,7 +158,7 @@ export const DialogContent = forwardRef<
         <DialogPrimitive.Close
           data-slot="dialog-close"
           className="absolute end-4 top-4 rounded-md p-1 text-muted-foreground opacity-70 transition-opacity hover:opacity-100 focus-ring"
-          aria-label="Close"
+          aria-label={t("close")}
         >
           <svg
             width="16"
@@ -213,7 +221,7 @@ export const DialogDescription = forwardRef<
     <DialogPrimitive.Description
       ref={ref}
       data-slot="dialog-description"
-      className={cn("text-sm text-muted-foreground", className)}
+      className={cn("text-body text-muted-foreground", className)}
       {...props}
     />
   );

package/src/components/drawer/drawer.tsx

@@ -25,7 +25,8 @@ const DrawerOverlay = forwardRef<
   return (
     <DrawerPrimitive.Overlay
       ref={ref}
-      className={cn("fixed inset-0 z-50 bg-foreground/50", className)}
+      data-slot="drawer-overlay"
+      className={cn("fixed inset-0 z-50 bg-overlay", className)}
       {...props}
     />
   );
@@ -40,13 +41,14 @@ export const DrawerContent = forwardRef<
       <DrawerOverlay />
       <DrawerPrimitive.Content
         ref={ref}
+        data-slot="drawer-content"
         className={cn(
           "fixed inset-x-0 bottom-0 z-50 mt-24 flex h-auto flex-col overscroll-contain rounded-t-xl border bg-card text-card-foreground",
           className,
         )}
         {...props}
       >
-        <div className="mx-auto mt-4 h-1.5 w-12 rounded-full bg-muted" />
+        <div data-slot="drawer-handle" className="mx-auto mt-4 h-1.5 w-12 rounded-full bg-muted" />
         {children}
       </DrawerPrimitive.Content>
     </DrawerPortal>
@@ -54,19 +56,33 @@ export const DrawerContent = forwardRef<
 });
 
 export function DrawerHeader({ className, ...props }: HTMLAttributes<HTMLDivElement>) {
-  return <div className={cn("grid gap-1.5 p-4 text-center sm:text-start", className)} {...props} />;
+  return (
+    <div
+      data-slot="drawer-header"
+      className={cn("grid gap-1.5 p-4 text-center sm:text-start", className)}
+      {...props}
+    />
+  );
 }
 export function DrawerFooter({ className, ...props }: HTMLAttributes<HTMLDivElement>) {
-  return <div className={cn("mt-auto flex flex-col gap-2 p-4", className)} {...props} />;
+  return (
+    <div
+      data-slot="drawer-footer"
+      className={cn("mt-auto flex flex-col gap-2 p-4", className)}
+      {...props}
+    />
+  );
 }
 export const DrawerTitle = forwardRef<
   ElementRef<typeof DrawerPrimitive.Title>,
   ComponentPropsWithoutRef<typeof DrawerPrimitive.Title>
 >(function DrawerTitle({ className, ...props }, ref) {
   return (
+    // `text-title`, matching `DialogTitle` (#286) — was `text-lg font-semibold`.
     <DrawerPrimitive.Title
       ref={ref}
-      className={cn("text-lg font-semibold", className)}
+      data-slot="drawer-title"
+      className={cn("text-title leading-none", className)}
       {...props}
     />
   );
@@ -78,7 +94,8 @@ export const DrawerDescription = forwardRef<
   return (
     <DrawerPrimitive.Description
       ref={ref}
-      className={cn("text-sm text-muted-foreground", className)}
+      data-slot="drawer-description"
+      className={cn("text-body text-muted-foreground", className)}
       {...props}
     />
   );

package/src/components/dropdown-menu/dropdown-menu.tsx

@@ -109,7 +109,7 @@ export const DropdownMenuContent = forwardRef<
         ref={ref}
         sideOffset={sideOffset}
         className={cn(
-          "z-50 min-w-[10rem] overflow-hidden rounded-md bg-popover p-1 text-popover-foreground shadow-ring-md",
+          "z-50 min-w-[12rem] overflow-hidden rounded-md bg-popover p-1 text-popover-foreground shadow-ring-md",
           "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95 data-[state=closed]:zoom-out-95",
           "data-[side=bottom]:slide-in-from-top-2 data-[side=top]:slide-in-from-bottom-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2",
           className,
@@ -128,7 +128,7 @@ export const DropdownMenuItem = forwardRef<
     <DropdownMenuPrimitive.Item
       ref={ref}
       className={cn(
-        "relative flex cursor-default select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none transition-colors duration-fast",
+        "relative flex cursor-default select-none items-center gap-2 rounded-sm px-2 py-1.5 text-body outline-none transition-colors duration-fast",
         "focus:bg-accent focus:text-accent-foreground",
         "data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
         "[&_svg]:size-4 [&_svg]:shrink-0",
@@ -147,7 +147,7 @@ export const DropdownMenuLabel = forwardRef<
   return (
     <DropdownMenuPrimitive.Label
       ref={ref}
-      className={cn("px-2 py-1.5 text-xs font-semibold text-muted-foreground", className)}
+      className={cn("px-2 py-1.5 text-meta font-semibold text-muted-foreground", className)}
       {...props}
     />
   );
@@ -172,7 +172,7 @@ export function DropdownMenuShortcut({
 }: React.HTMLAttributes<HTMLSpanElement>) {
   return (
     <span
-      className={cn("ms-auto text-xs tracking-widest text-muted-foreground", className)}
+      className={cn("ms-auto text-meta tracking-widest text-muted-foreground", className)}
       {...props}
     />
   );

package/src/components/field/field.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import {
   cloneElement,
   forwardRef,

package/src/components/field-row/field-row.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import {
   cloneElement,
   forwardRef,

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

@@ -15,21 +15,28 @@ function makeUploadFile(name = "test.txt", size = 1024): UploadFile {
 }
 
 describe("FileUpload", () => {
-  it("renders the dropzone with a label pointing to the hidden input", () => {
+  it("default dropzone exposes exactly one control: the Browse files button", () => {
     render(
       <FileUpload>
         <FileUploadDropzone />
       </FileUpload>,
     );
-    // The label wraps the input — label's htmlFor matches input's id
-    const label = document.querySelector("label[data-slot='file-upload-dropzone']");
-    expect(label).not.toBeNull();
-    const inputId = label!.getAttribute("for");
-    expect(inputId).toBeTruthy();
-    const input = document.getElementById(inputId!);
-    expect(input).not.toBeNull();
-    expect(input!.tagName.toLowerCase()).toBe("input");
-    expect(input).toHaveAttribute("type", "file");
+    const dropzone = document.querySelector("[data-slot='file-upload-dropzone']")!;
+    // The zone is a plain drop surface — no role, no tab stop — so the inner
+    // button is never nested inside another interactive element (axe
+    // `nested-interactive` / `aria-allowed-role`).
+    expect(dropzone.tagName.toLowerCase()).toBe("div");
+    expect(dropzone).not.toHaveAttribute("role");
+    expect(dropzone).not.toHaveAttribute("tabIndex");
+    expect(screen.getAllByRole("button")).toHaveLength(1);
+
+    const input = document.querySelector("input[type='file']") as HTMLInputElement;
+    const clickSpy = vi.spyOn(input, "click");
+    fireEvent.click(screen.getByRole("button", { name: "Browse files" }));
+    // One activation opens the picker once (the zone's click must not re-fire it).
+    expect(clickSpy).toHaveBeenCalledTimes(1);
+    fireEvent.click(dropzone);
+    expect(clickSpy).toHaveBeenCalledTimes(2);
   });
 
   it("hidden file input has sr-only class (visually hidden but real)", () => {
@@ -156,6 +163,72 @@ describe("FileUpload", () => {
     expect(onFilesChange).toHaveBeenCalledWith([]);
   });
 
+  it("drag-and-drop rejects files that don't match `accept` and reports why", () => {
+    const onFilesChange = vi.fn();
+    const onFilesRejected = vi.fn();
+    render(
+      <FileUpload
+        files={[]}
+        onFilesChange={onFilesChange}
+        onFilesRejected={onFilesRejected}
+        accept=".png"
+      >
+        <FileUploadDropzone />
+      </FileUpload>,
+    );
+    const dropzone = document.querySelector("[data-slot='file-upload-dropzone']")!;
+    const wrongType = new File(["x"], "notes.txt", { type: "text/plain" });
+    fireEvent.drop(dropzone, { dataTransfer: { files: [wrongType] } });
+
+    // A drop bypasses the native <input accept> filter entirely — without
+    // this, a dragged-in .txt would be added even though the picker would
+    // never have offered it.
+    expect(onFilesChange).toHaveBeenCalledWith([]);
+    expect(onFilesRejected).toHaveBeenCalledWith([{ file: wrongType, reason: "accept" }]);
+  });
+
+  it("drag-and-drop of several files when multiple=false keeps only the first, rejects the rest", () => {
+    const onFilesChange = vi.fn();
+    const onFilesRejected = vi.fn();
+    render(
+      <FileUpload files={[]} onFilesChange={onFilesChange} onFilesRejected={onFilesRejected}>
+        <FileUploadDropzone />
+      </FileUpload>,
+    );
+    const dropzone = document.querySelector("[data-slot='file-upload-dropzone']")!;
+    const first = new File(["a"], "a.txt", { type: "text/plain" });
+    const second = new File(["b"], "b.txt", { type: "text/plain" });
+    fireEvent.drop(dropzone, { dataTransfer: { files: [first, second] } });
+
+    // `multiple` is only enforced by the browser for the picker dialog, never
+    // for a raw DataTransfer drop.
+    expect(onFilesChange.mock.calls[0]![0]).toHaveLength(1);
+    expect(onFilesChange.mock.calls[0]![0][0].file.name).toBe("a.txt");
+    expect(onFilesRejected).toHaveBeenCalledWith([{ file: second, reason: "multiple" }]);
+  });
+
+  it("a custom-children dropzone still opens the picker on Enter/Space (keyboard reachable)", () => {
+    render(
+      <FileUpload>
+        <FileUploadDropzone>Drop it here</FileUploadDropzone>
+      </FileUpload>,
+    );
+    // With custom `children` there is no fallback "Browse files" button —
+    // the zone itself must be the one control: a tab stop answering Enter/Space.
+    const dropzone = screen.getByRole("button");
+    expect(dropzone).toHaveTextContent("Drop it here");
+    expect(dropzone).toHaveAttribute("data-slot", "file-upload-dropzone");
+    expect(dropzone).toHaveAttribute("tabIndex", "0");
+
+    const input = document.querySelector("input[type='file']") as HTMLInputElement;
+    const clickSpy = vi.spyOn(input, "click");
+    fireEvent.keyDown(dropzone, { key: "Enter" });
+    expect(clickSpy).toHaveBeenCalledTimes(1);
+
+    fireEvent.keyDown(dropzone, { key: " " });
+    expect(clickSpy).toHaveBeenCalledTimes(2);
+  });
+
   it("disabled prop disables the file input and remove buttons", () => {
     const f = makeUploadFile();
     render(