@elabs-ai/components-ui 4.1.0 → 4.2.0

package/src/components/combobox/combobox.tsx

@@ -1,7 +1,10 @@
+"use client";
+
 import { forwardRef, useState, type ComponentPropsWithoutRef } from "react";
 import { defaultFilter } from "cmdk";
 import { Check, ChevronsUpDown, Plus } from "lucide-react";
 import { cn } from "../../lib/cn";
+import { useControllableState } from "../../lib/use-controllable-state";
 import { Button } from "../button";
 import { Popover, PopoverContent, PopoverTrigger } from "../popover";
 import { useLocale } from "../locale-provider";
@@ -20,6 +23,12 @@ export interface ComboboxOption {
 }
 
 export interface ComboboxProps {
+  /**
+   * The option list — every option is mounted in the DOM (cmdk has no built-in
+   * windowing), so this is fine for typical form/menu-sized lists but not for
+   * open-ended data. For thousands of options, use `VirtualSelect` instead,
+   * which windows rendering via `@tanstack/react-virtual`.
+   */
   options: ComboboxOption[];
   value?: string;
   onValueChange?: (value: string) => void;
@@ -97,8 +106,8 @@ export const Combobox = forwardRef<HTMLButtonElement, ComboboxProps>(function Co
     options,
     value,
     onValueChange,
-    placeholder = "Select…",
-    searchPlaceholder = "Search…",
+    placeholder,
+    searchPlaceholder,
     emptyText,
     className,
     disabled = false,
@@ -111,11 +120,11 @@ export const Combobox = forwardRef<HTMLButtonElement, ComboboxProps>(function Co
   ref,
 ) {
   const { t } = useLocale();
+  const resolvedPlaceholder = placeholder ?? t("ui.combobox.placeholder");
+  const resolvedSearchPlaceholder = searchPlaceholder ?? t("ui.combobox.searchPlaceholder");
   const [open, setOpen] = useState(false);
-  const [internal, setInternal] = useState("");
+  const [selected, setValue] = useControllableState(value, "", onValueChange);
   const [search, setSearch] = useState("");
-  const selected = value ?? internal;
-  const setValue = (v: string) => (onValueChange ? onValueChange(v) : setInternal(v));
   const current = options.find((o) => o.value === selected);
 
   const trimmedSearch = search.trim();
@@ -150,30 +159,35 @@ export const Combobox = forwardRef<HTMLButtonElement, ComboboxProps>(function Co
           aria-expanded={open}
           disabled={disabled}
           data-slot="combobox"
-          className={cn("w-56 justify-between font-normal", triggerProps?.className, className)}
+          className={cn("w-full justify-between font-normal", triggerProps?.className, className)}
         >
-          {current ? current.label : selected || placeholder}
+          {current ? current.label : selected || resolvedPlaceholder}
           <ChevronsUpDown className="ms-2 size-4 shrink-0 opacity-50" />
         </Button>
       </PopoverTrigger>
       <PopoverContent
-        className="w-56 p-0"
+        className="w-[var(--radix-popover-trigger-width)] min-w-56 p-0"
         data-slot="combobox-content"
         // Radix Popover.Content renders role="dialog"; without a name axe's
         // aria-dialog-name rule (rightly) flags it. Reuse the trigger's own
         // purpose label when the consumer set one, else fall back to the
         // (already-translatable) search placeholder — no new hardcoded copy.
-        aria-label={ariaLabel ?? searchPlaceholder}
+        aria-label={ariaLabel ?? resolvedSearchPlaceholder}
       >
         <Command filter={allowCustomValue ? customValueFilter : undefined}>
-          <CommandInput placeholder={searchPlaceholder} value={search} onValueChange={setSearch} />
+          <CommandInput
+            placeholder={resolvedSearchPlaceholder}
+            value={search}
+            onValueChange={setSearch}
+          />
           <CommandList>
             <CommandEmpty>{resolvedEmptyText}</CommandEmpty>
             <CommandGroup>
               {options.map((o) => (
                 <CommandItem
                   key={o.value}
-                  value={o.label}
+                  value={o.value}
+                  keywords={[o.label]}
                   onSelect={() => {
                     setValue(o.value === selected ? "" : o.value);
                     setOpen(false);

package/src/components/command/command.test.tsx

@@ -5,6 +5,7 @@ import userEvent from "@testing-library/user-event";
 import {
   Command,
   CommandDialog,
+  CommandEmpty,
   CommandGroup,
   CommandInput,
   CommandItem,
@@ -351,3 +352,17 @@ describe("Command — CommandSeparator a11y (#157)", () => {
     expect(screen.getByRole("listbox")).toBeInTheDocument();
   });
 });
+
+describe("CommandEmpty — merges className instead of replacing it", () => {
+  it("keeps the base py-6/text-center classes alongside a caller className", () => {
+    render(
+      <Command>
+        <CommandList>
+          <CommandEmpty className="custom-empty">No results</CommandEmpty>
+        </CommandList>
+      </Command>,
+    );
+    const empty = screen.getByText("No results");
+    expect(empty).toHaveClass("py-6", "text-center", "custom-empty");
+  });
+});

package/src/components/command/command.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import {
   createContext,
   forwardRef,
@@ -199,7 +201,7 @@ export const CommandInput = forwardRef<
         ref={ref}
         data-slot="command-input"
         className={cn(
-          "flex h-10 w-full rounded-md bg-transparent py-3 text-sm outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50",
+          "flex h-10 w-full rounded-md bg-transparent py-3 text-body outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50",
           className,
         )}
         {...props}
@@ -225,12 +227,12 @@ export const CommandList = forwardRef<
 export const CommandEmpty = forwardRef<
   ElementRef<typeof CommandPrimitive.Empty>,
   ComponentPropsWithoutRef<typeof CommandPrimitive.Empty>
->(function CommandEmpty(props, ref) {
+>(function CommandEmpty({ className, ...props }, ref) {
   return (
     <CommandPrimitive.Empty
       ref={ref}
       data-slot="command-empty"
-      className="py-6 text-center text-sm"
+      className={cn("py-6 text-center text-body", className)}
       {...props}
     />
   );
@@ -245,7 +247,7 @@ export const CommandGroup = forwardRef<
       ref={ref}
       data-slot="command-group"
       className={cn(
-        "overflow-hidden p-1 text-foreground [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground",
+        "overflow-hidden p-1 text-foreground [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-meta [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground",
         className,
       )}
       {...props}
@@ -305,7 +307,7 @@ export const CommandItem = forwardRef<
       ref={ref}
       data-slot="command-item"
       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 data-[selected=true]:bg-accent data-[selected=true]:text-accent-foreground data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 [&_svg]:size-4",
+        "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 data-[selected=true]:bg-accent data-[selected=true]:text-accent-foreground data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 [&_svg]:size-4",
         className,
       )}
       {...props}
@@ -317,7 +319,7 @@ export function CommandShortcut({ className, ...props }: HTMLAttributes<HTMLSpan
   return (
     <span
       data-slot="command-shortcut"
-      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/context-menu/context-menu.tsx

@@ -21,8 +21,9 @@ export const ContextMenuSubTrigger = forwardRef<
   return (
     <ContextMenuPrimitive.SubTrigger
       ref={ref}
+      data-slot="context-menu-sub-trigger"
       className={cn(
-        "flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none transition-colors duration-fast focus:bg-accent data-[state=open]:bg-accent",
+        "flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-body outline-none transition-colors duration-fast focus:bg-accent data-[state=open]:bg-accent",
         inset && "ps-8",
         className,
       )}
@@ -41,6 +42,7 @@ export const ContextMenuSubContent = forwardRef<
   return (
     <ContextMenuPrimitive.SubContent
       ref={ref}
+      data-slot="context-menu-sub-content"
       className={cn(
         "z-50 min-w-[8rem] 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,
@@ -58,8 +60,9 @@ export const ContextMenuContent = forwardRef<
     <ContextMenuPrimitive.Portal>
       <ContextMenuPrimitive.Content
         ref={ref}
+        data-slot="context-menu-content"
         className={cn(
-          "z-50 min-w-[8rem] 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",
+          "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,
         )}
         {...props}
@@ -75,8 +78,9 @@ export const ContextMenuItem = forwardRef<
   return (
     <ContextMenuPrimitive.Item
       ref={ref}
+      data-slot="context-menu-item"
       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 focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:size-4",
+        "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",
         inset && "ps-8",
         className,
       )}
@@ -92,9 +96,10 @@ export const ContextMenuCheckboxItem = forwardRef<
   return (
     <ContextMenuPrimitive.CheckboxItem
       ref={ref}
+      data-slot="context-menu-checkbox-item"
       checked={checked}
       className={cn(
-        "relative flex cursor-default select-none items-center rounded-sm py-1.5 ps-8 pe-2 text-sm outline-none transition-colors duration-fast focus:bg-accent",
+        "relative flex cursor-default select-none items-center rounded-sm py-1.5 ps-8 pe-2 text-body outline-none transition-colors duration-fast focus:bg-accent",
         className,
       )}
       {...props}
@@ -116,8 +121,9 @@ export const ContextMenuRadioItem = forwardRef<
   return (
     <ContextMenuPrimitive.RadioItem
       ref={ref}
+      data-slot="context-menu-radio-item"
       className={cn(
-        "relative flex cursor-default select-none items-center rounded-sm py-1.5 ps-8 pe-2 text-sm outline-none transition-colors duration-fast focus:bg-accent",
+        "relative flex cursor-default select-none items-center rounded-sm py-1.5 ps-8 pe-2 text-body outline-none transition-colors duration-fast focus:bg-accent",
         className,
       )}
       {...props}
@@ -139,8 +145,9 @@ export const ContextMenuLabel = forwardRef<
   return (
     <ContextMenuPrimitive.Label
       ref={ref}
+      data-slot="context-menu-label"
       className={cn(
-        "px-2 py-1.5 text-xs font-semibold text-muted-foreground",
+        "px-2 py-1.5 text-meta font-semibold text-muted-foreground",
         inset && "ps-8",
         className,
       )}
@@ -156,6 +163,7 @@ export const ContextMenuSeparator = forwardRef<
   return (
     <ContextMenuPrimitive.Separator
       ref={ref}
+      data-slot="context-menu-separator"
       className={cn("-mx-1 my-1 h-px bg-border", className)}
       {...props}
     />
@@ -165,7 +173,8 @@ export const ContextMenuSeparator = forwardRef<
 export function ContextMenuShortcut({ className, ...props }: HTMLAttributes<HTMLSpanElement>) {
   return (
     <span
-      className={cn("ms-auto text-xs tracking-widest text-muted-foreground", className)}
+      data-slot="context-menu-shortcut"
+      className={cn("ms-auto text-meta tracking-widest text-muted-foreground", className)}
       {...props}
     />
   );

package/src/components/context-rail/context-rail.tsx

@@ -162,7 +162,7 @@ const COUNT_BADGE_POSITION = "end-0 -top-1 h-4 min-w-4 px-0.5";
 // The rail's own header band. Two jobs, and both are geometry the rail cannot
 // leave to its children:
 //
-// 1. EXPANDED it is `h-14` — the same 56px an app shell's top bar carries
+// 1. EXPANDED it is `h-header` (56px by default) — the same height an app shell's top bar carries
 //    (`AppShell`, and both shipped shell blocks) — and it holds the section
 //    heading AND the switcher in ONE row. Before this, the switcher row (32px,
 //    flush at y=0) and a separately-bordered heading (53px) stacked to 85px, so
@@ -177,7 +177,7 @@ const COUNT_BADGE_POSITION = "end-0 -top-1 h-4 min-w-4 px-0.5";
 //    centres the FIRST icon in the same 56px band as the top bar's controls, so
 //    the two rails' first rows agree.
 const CONTEXT_RAIL_HEADER =
-  "flex h-14 shrink-0 items-center gap-2 border-b border-border-strong px-2 group-data-[collapsible=icon]:h-auto group-data-[collapsible=icon]:flex-col group-data-[collapsible=icon]:items-stretch group-data-[collapsible=icon]:border-b-0 group-data-[collapsible=icon]:px-2 group-data-[collapsible=icon]:pt-3 group-data-[collapsible=icon]:pb-2";
+  "flex h-header shrink-0 items-center gap-2 border-b border-border-strong px-2 group-data-[collapsible=icon]:h-auto group-data-[collapsible=icon]:flex-col group-data-[collapsible=icon]:items-stretch group-data-[collapsible=icon]:border-b-0 group-data-[collapsible=icon]:px-2 group-data-[collapsible=icon]:pt-3 group-data-[collapsible=icon]:pb-2";
 
 function ContextRailSwitcher({
   sections,
@@ -491,10 +491,10 @@ const ContextRailNarrow = forwardRef<HTMLDivElement, ContextRailNarrowProps>(
                     above; this is the visible heading the body sits under. */}
                 <h2
                   data-slot="context-rail-heading"
-                  // `h-14`, matching the wide branch's header band and the app
+                  // `h-header`, matching the wide branch's header band and the app
                   // shell's top bar — the sheet is the same rail at a narrower
                   // width, so its header keeps the same height.
-                  className="flex h-14 shrink-0 items-center truncate border-b border-border-strong px-4 text-title"
+                  className="flex h-header shrink-0 items-center truncate border-b border-border-strong px-4 text-title"
                 >
                   {activeSection.label}
                 </h2>

package/src/components/copyable-value/copyable-value.stories.tsx

@@ -1,11 +1,21 @@
 import type { Meta, StoryObj } from "@storybook/react-vite";
 import { expect, userEvent, within } from "storybook/test";
+import { Toaster } from "../sonner";
 import { CopyableValue } from "./copyable-value";
 
 const meta = {
   title: "Display/CopyableValue",
   component: CopyableValue,
   tags: ["autodocs"],
+  // The copy toast needs a host; apps mount one `<Toaster />` at their root.
+  decorators: [
+    (Story) => (
+      <>
+        <Story />
+        <Toaster />
+      </>
+    ),
+  ],
   parameters: {
     docs: {
       description: {

package/src/components/copyable-value/copyable-value.test.tsx

@@ -11,7 +11,10 @@
 import { describe, expect, it, vi } from "vitest";
 import { render, screen, fireEvent, waitFor } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
-import { CopyableValue } from "./copyable-value";
+import { toast } from "../sonner";
+import { CopyableValue, COPYABLE_VALUE_TOAST_MS } from "./copyable-value";
+
+vi.mock("../sonner", () => ({ toast: vi.fn() }));
 
 /** Install a clipboard stub for one test; returns the writeText spy. */
 function stubClipboard(impl: () => Promise<void> = () => Promise.resolve()) {
@@ -38,6 +41,30 @@ describe("CopyableValue", () => {
     });
   });
 
+  it("shows a one-second toast once the copy succeeds", async () => {
+    vi.mocked(toast).mockClear();
+    stubClipboard();
+    render(<CopyableValue value="42">42</CopyableValue>);
+
+    fireEvent.click(screen.getByRole("button"));
+    await waitFor(() => {
+      expect(toast).toHaveBeenCalledWith("Copied", { duration: COPYABLE_VALUE_TOAST_MS });
+    });
+    expect(COPYABLE_VALUE_TOAST_MS).toBe(1000);
+  });
+
+  it("shows no toast when the copy fails", async () => {
+    vi.mocked(toast).mockClear();
+    stubClipboard(() => Promise.reject(new Error("denied")));
+    render(<CopyableValue value="42">42</CopyableValue>);
+
+    fireEvent.click(screen.getByRole("button"));
+    await waitFor(() => {
+      expect(screen.getByRole("status")).toHaveTextContent("");
+    });
+    expect(toast).not.toHaveBeenCalled();
+  });
+
   it("falls back to the exact value as its own display", () => {
     render(<CopyableValue value="1234" />);
     expect(screen.getByRole("button")).toHaveTextContent("1234");

package/src/components/copyable-value/copyable-value.tsx

@@ -19,6 +19,10 @@ import { forwardRef, type ButtonHTMLAttributes, type ReactNode } from "react";
 import { cn } from "../../lib/cn";
 import { useCopyToClipboard } from "../../lib/use-copy-to-clipboard";
 import { useLocale } from "../locale-provider";
+import { toast } from "../sonner";
+
+/** ms the copy-confirmation toast stays on screen. */
+export const COPYABLE_VALUE_TOAST_MS = 1000;
 
 export interface CopyableValueProps extends Omit<
   ButtonHTMLAttributes<HTMLButtonElement>,
@@ -79,7 +83,14 @@ export const CopyableValue = forwardRef<HTMLButtonElement, CopyableValueProps>(
           onClick={(event) => {
             onClick?.(event);
             if (!event.defaultPrevented) {
-              void copy(value);
+              // The toast is the visible confirmation; it needs an app-mounted
+              // `<Toaster />` and is a silent no-op without one, which is why
+              // the live region below stays as the always-present fallback.
+              void copy(value).then((ok) => {
+                if (ok) {
+                  toast(t("ui.copyableValue.copied"), { duration: COPYABLE_VALUE_TOAST_MS });
+                }
+              });
             }
           }}
         >

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

@@ -5,6 +5,15 @@ const meta = {
   title: "Forms/DatePicker",
   component: DatePicker,
   tags: ["autodocs"],
+  // The trigger fills its container by default (no hard-fixed width) — cap
+  // the docs canvas to a realistic form-field width.
+  decorators: [
+    (Story) => (
+      <div className="w-full max-w-xs">
+        <Story />
+      </div>
+    ),
+  ],
   argTypes: {
     value: {
       description: "Controlled selected date.",

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

@@ -0,0 +1,52 @@
+import { createRef } from "react";
+import { describe, expect, it, vi } from "vitest";
+import { render, screen, within } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { DatePicker } from "./date-picker";
+import { LocaleProvider } from "../locale-provider";
+
+describe("DatePicker", () => {
+  it("forwards the ref to the trigger button", () => {
+    const ref = createRef<HTMLButtonElement>();
+    render(<DatePicker ref={ref} />);
+    expect(ref.current).toBeInstanceOf(HTMLButtonElement);
+    expect(ref.current).toBe(screen.getByRole("button"));
+  });
+
+  it("does not hard-fix the trigger width — fills its container by default", () => {
+    render(<DatePicker />);
+    expect(screen.getByRole("button").className).not.toMatch(/\bw-56\b/);
+  });
+
+  // #reviewed 1.7 — same `value ?? internal` / ternary-setter bug as Combobox:
+  // an uncontrolled DatePicker with an onValueChange listener never updated
+  // its own displayed date.
+  it("updates its own displayed date when uncontrolled even with an onValueChange listener", async () => {
+    const onValueChange = vi.fn();
+    const user = userEvent.setup();
+    render(<DatePicker onValueChange={onValueChange} placeholder="Pick a date" />);
+    const trigger = screen.getByRole("button", { name: /pick a date/i });
+    await user.click(trigger);
+    const grid = await screen.findByRole("grid");
+    const dayButtons = within(grid)
+      .getAllByRole("button")
+      .filter((b) => !/previous|next/i.test(b.getAttribute("aria-label") ?? ""));
+    const firstEnabled = dayButtons.find((b) => !(b as HTMLButtonElement).disabled)!;
+    await user.click(firstEnabled);
+    expect(onValueChange).toHaveBeenCalled();
+    expect(trigger).not.toHaveTextContent("Pick a date");
+  });
+
+  it("formats the displayed date using the active locale", () => {
+    const date = new Date(2024, 0, 15); // Jan 15, 2024
+    render(
+      <LocaleProvider locale="de-DE">
+        <DatePicker value={date} />
+      </LocaleProvider>,
+    );
+    // de-DE "medium" dateStyle renders like "15. Jan. 2024" — distinct from
+    // the en-US default ("Jan 15, 2024").
+    expect(screen.getByRole("button")).toHaveTextContent("2024");
+    expect(screen.getByRole("button").textContent).not.toMatch(/Jan 15, 2024/);
+  });
+});

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

@@ -1,8 +1,10 @@
-import { useState } from "react";
+import { forwardRef } from "react";
 import { Calendar as CalendarIcon } from "lucide-react";
 import { cn } from "../../lib/cn";
+import { useControllableState } from "../../lib/use-controllable-state";
 import { Button } from "../button";
 import { Calendar } from "../calendar";
+import { useLocale } from "../locale-provider";
 import { Popover, PopoverContent, PopoverTrigger } from "../popover";
 
 export interface DatePickerProps {
@@ -13,26 +15,22 @@ export interface DatePickerProps {
 }
 
 /** Single-date picker (Popover + Calendar). Controlled or uncontrolled. */
-export function DatePicker({
-  value,
-  onValueChange,
-  placeholder = "Pick a date",
-  className,
-}: DatePickerProps) {
-  const [internal, setInternal] = useState<Date | undefined>(undefined);
-  const date = value ?? internal;
-  const setDate = (d?: Date) => (onValueChange ? onValueChange(d) : setInternal(d));
-  const label = date
-    ? new Intl.DateTimeFormat(undefined, { dateStyle: "medium" }).format(date)
-    : placeholder;
+export const DatePicker = forwardRef<HTMLButtonElement, DatePickerProps>(function DatePicker(
+  { value, onValueChange, placeholder = "Pick a date", className },
+  ref,
+) {
+  const { formatDate } = useLocale();
+  const [date, setDate] = useControllableState<Date | undefined>(value, undefined, onValueChange);
+  const label = date ? formatDate(date, { dateStyle: "medium" }) : placeholder;
 
   return (
     <Popover>
       <PopoverTrigger asChild>
         <Button
+          ref={ref}
           variant="outline"
           className={cn(
-            "w-56 justify-start gap-2 text-start font-normal",
+            "w-full justify-start gap-2 text-start font-normal",
             !date && "text-muted-foreground",
             className,
           )}
@@ -46,4 +44,4 @@ export function DatePicker({
       </PopoverContent>
     </Popover>
   );
-}
+});

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

@@ -12,6 +12,15 @@ const meta = {
   parameters: {
     layout: "centered",
   },
+  // The trigger fills its container by default (no hard-fixed width) — cap
+  // the docs canvas to a realistic form-field width.
+  decorators: [
+    (Story) => (
+      <div className="w-80">
+        <Story />
+      </div>
+    ),
+  ],
   argTypes: {
     value: {
       description: "Controlled date range `{ from, to }`.",

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

@@ -6,9 +6,12 @@
  * select interaction and accessibility are covered by the Storybook stories
  * (run via `pnpm --filter @elabs-ai/components-docs test-storybook` or the MCP story tests).
  */
+import { useState } from "react";
 import { describe, expect, it } from "vitest";
 import { render, screen } from "@testing-library/react";
-import { DateRangePicker } from "./date-range-picker";
+import userEvent from "@testing-library/user-event";
+import { DateRangePicker, type DateRange } from "./date-range-picker";
+import { LocaleProvider } from "../locale-provider";
 
 describe("DateRangePicker", () => {
   it("renders the placeholder on the trigger when no range is set", () => {
@@ -59,4 +62,76 @@ describe("DateRangePicker", () => {
     const button = screen.getByRole("button");
     expect(button.className).toContain("my-custom-class");
   });
+
+  it("does not hard-fix the trigger width — fills its container by default", () => {
+    render(<DateRangePicker />);
+    expect(screen.getByRole("button").className).not.toMatch(/\bw-72\b/);
+  });
+
+  it("spreads extra props (e.g. data-testid) onto the trigger button", () => {
+    render(<DateRangePicker data-testid="range-trigger" />);
+    expect(screen.getByTestId("range-trigger")).toBeInTheDocument();
+  });
+
+  it("formats the range label using the active locale", () => {
+    const from = new Date(2024, 0, 5);
+    const to = new Date(2024, 0, 20);
+    render(
+      <LocaleProvider locale="de-DE">
+        <DateRangePicker value={{ from, to }} />
+      </LocaleProvider>,
+    );
+    // de-DE renders "5. Jan. 2024" style — distinct from the en-US default.
+    expect(screen.getByRole("button").textContent).not.toMatch(/Jan 5, 2024/);
+  });
+
+  // #reviewed 1.7 — clearing a controlled range to `undefined` must not fall
+  // through to a stale uncontrolled `internal` value: once controlled, the
+  // component must stay controlled for its whole lifetime.
+  it("collapses to a single month below the sm breakpoint (phone-width popover)", async () => {
+    const originalWidth = window.innerWidth;
+    Object.defineProperty(window, "innerWidth", {
+      writable: true,
+      configurable: true,
+      value: 375,
+    });
+    try {
+      const user = userEvent.setup();
+      render(<DateRangePicker />);
+      await user.click(screen.getByRole("button"));
+      const grids = await screen.findAllByRole("grid");
+      expect(grids).toHaveLength(1);
+    } finally {
+      Object.defineProperty(window, "innerWidth", {
+        writable: true,
+        configurable: true,
+        value: originalWidth,
+      });
+    }
+  });
+
+  it("shows the placeholder (not a stale value) when a controlled range is cleared to undefined", async () => {
+    function Harness() {
+      const [range, setRange] = useState<DateRange | undefined>({
+        from: new Date(2024, 0, 5),
+        to: new Date(2024, 0, 20),
+      });
+      return (
+        <>
+          <DateRangePicker value={range} onValueChange={setRange} placeholder="Pick a range" />
+          <button type="button" onClick={() => setRange(undefined)}>
+            Clear
+          </button>
+        </>
+      );
+    }
+    const user = userEvent.setup();
+    render(<Harness />);
+    const trigger = screen.getByRole("button", { name: /–/ });
+    expect(trigger.textContent).not.toBe("Pick a range");
+
+    await user.click(screen.getByRole("button", { name: "Clear" }));
+
+    expect(trigger).toHaveTextContent("Pick a range");
+  });
 });