@tangle-network/ui 11.28.1 → 11.29.0

package/dist/primitives.d.ts

@@ -11,6 +11,9 @@ import { Popover, PopoverAnchor, PopoverClose, PopoverContent, PopoverTrigger }
 import { Slider } from "./primitives/slider.js";
 import { Input, InputProps, Textarea, TextareaProps } from "./primitives/input.js";
 import { HelpText, HelpTextProps } from "./primitives/help-text.js";
+import { Calendar, CalendarDate, CalendarProps, formatCalendarDate, localToday, parseCalendarDate } from "./primitives/calendar.js";
+import { DatePicker, DatePickerProps } from "./primitives/date-picker.js";
+import { TimeSelect, TimeSelectProps } from "./primitives/time-select.js";
 import { Badge, BadgeProps, badgeVariants } from "./primitives/badge.js";
 import { Avatar, AvatarFallback, AvatarImage } from "./primitives/avatar.js";
 import { DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger } from "./primitives/dropdown-menu.js";
@@ -48,4 +51,4 @@ import { Chip, ChipProps } from "./primitives/chip.js";
 import { Metric, MetricProps, MetricStrip, MetricStripProps } from "./primitives/metric-strip.js";
 import { FilterField, FilterFieldProps, Toolbar, ToolbarProps } from "./primitives/toolbar.js";
 import { Logo, LogoProps, TangleKnot } from "@tangle-network/brand";
-export { Alert, AlertDescription, AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogOverlay, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger, type AlertProps, AlertTitle, type AlertTone, ArtifactPane, type ArtifactPaneProps, Avatar, AvatarFallback, AvatarImage, Badge, type BadgeProps, Button, type ButtonProps, CATEGORY_TONES, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, type CardTitleProps, type CategoryTone, Checkbox, Chip, type ChipProps, CodeBlock, type CodeBlockProps, Collapsible, CollapsibleContent, CollapsibleTrigger, ContextMenu, ContextMenuCheckboxItem, ContextMenuContent, ContextMenuGroup, ContextMenuItem, ContextMenuLabel, ContextMenuPortal, ContextMenuRadioGroup, ContextMenuRadioItem, ContextMenuSeparator, ContextMenuShortcut, ContextMenuSub, ContextMenuSubContent, ContextMenuSubTrigger, ContextMenuTrigger, CopyButton, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, DropZone, type DropZoneProps, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, EmptyState, type EmptyStateProps, FilterField, type FilterFieldProps, Heading, type HeadingProps, type HeadingVariant, HelpText, type HelpTextProps, IconTile, type IconTileProps, InlineCode, type InlineCodeProps, Input, type InputProps, Label, Logo, type LogoProps, Metric, type MetricProps, MetricStrip, type MetricStripProps, PageHeader, type PageHeaderProps, PageShell, type PageShellProps, Pagination, type PaginationProps, Popover, PopoverAnchor, PopoverClose, PopoverContent, PopoverTrigger, Progress, SegmentedControl, type SegmentedControlOption, type SegmentedControlProps, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, Separator, Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetOverlay, SheetPortal, SheetTitle, SheetTrigger, SidebarDropZone, type SidebarDropZoneProps, Skeleton, SkeletonCard, SkeletonTable, Slider, StatCard, type StatCardProps, StatusPill, type StatusPillProps, type StatusTone, Switch, TONE_CLASSES, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, type TableProps, TableRow, Tabs, TabsContent, TabsList, TabsTrigger, Tag, type TagProps, TangleKnot, TerminalCursor, TerminalDisplay, TerminalInput, TerminalLine, TextShimmer, type TextShimmerProps, Textarea, type TextareaProps, ThemeToggle, type Toast, ToastContainer, ToastProvider, type Tone, type ToneClasses, Toolbar, type ToolbarProps, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, type UploadFile, UploadProgress, type UploadProgressProps, badgeVariants, buttonVariants, initialsOf, toneFor, useTheme, useToast };
+export { Alert, AlertDescription, AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogOverlay, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger, type AlertProps, AlertTitle, type AlertTone, ArtifactPane, type ArtifactPaneProps, Avatar, AvatarFallback, AvatarImage, Badge, type BadgeProps, Button, type ButtonProps, CATEGORY_TONES, Calendar, type CalendarDate, type CalendarProps, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, type CardTitleProps, type CategoryTone, Checkbox, Chip, type ChipProps, CodeBlock, type CodeBlockProps, Collapsible, CollapsibleContent, CollapsibleTrigger, ContextMenu, ContextMenuCheckboxItem, ContextMenuContent, ContextMenuGroup, ContextMenuItem, ContextMenuLabel, ContextMenuPortal, ContextMenuRadioGroup, ContextMenuRadioItem, ContextMenuSeparator, ContextMenuShortcut, ContextMenuSub, ContextMenuSubContent, ContextMenuSubTrigger, ContextMenuTrigger, CopyButton, DatePicker, type DatePickerProps, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, DropZone, type DropZoneProps, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, EmptyState, type EmptyStateProps, FilterField, type FilterFieldProps, Heading, type HeadingProps, type HeadingVariant, HelpText, type HelpTextProps, IconTile, type IconTileProps, InlineCode, type InlineCodeProps, Input, type InputProps, Label, Logo, type LogoProps, Metric, type MetricProps, MetricStrip, type MetricStripProps, PageHeader, type PageHeaderProps, PageShell, type PageShellProps, Pagination, type PaginationProps, Popover, PopoverAnchor, PopoverClose, PopoverContent, PopoverTrigger, Progress, SegmentedControl, type SegmentedControlOption, type SegmentedControlProps, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, Separator, Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetOverlay, SheetPortal, SheetTitle, SheetTrigger, SidebarDropZone, type SidebarDropZoneProps, Skeleton, SkeletonCard, SkeletonTable, Slider, StatCard, type StatCardProps, StatusPill, type StatusPillProps, type StatusTone, Switch, TONE_CLASSES, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, type TableProps, TableRow, Tabs, TabsContent, TabsList, TabsTrigger, Tag, type TagProps, TangleKnot, TerminalCursor, TerminalDisplay, TerminalInput, TerminalLine, TextShimmer, type TextShimmerProps, Textarea, type TextareaProps, ThemeToggle, TimeSelect, type TimeSelectProps, type Toast, ToastContainer, ToastProvider, type Tone, type ToneClasses, Toolbar, type ToolbarProps, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, type UploadFile, UploadProgress, type UploadProgressProps, badgeVariants, buttonVariants, formatCalendarDate, initialsOf, localToday, parseCalendarDate, toneFor, useTheme, useToast };

package/dist/primitives.js

@@ -10,10 +10,13 @@ import { Slider } from "./primitives/slider.js";
 import { HelpText } from "./primitives/help-text.js";
 import { Label } from "./primitives/label.js";
 import { Input, Textarea } from "./primitives/input.js";
+import { Calendar, formatCalendarDate, localToday, parseCalendarDate } from "./primitives/calendar.js";
+import { DatePicker } from "./primitives/date-picker.js";
+import { Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue } from "./primitives/select.js";
+import { TimeSelect } from "./primitives/time-select.js";
 import { Badge, badgeVariants } from "./primitives/badge.js";
 import { Avatar, AvatarFallback, AvatarImage } from "./primitives/avatar.js";
 import { DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger } from "./primitives/dropdown-menu.js";
-import { Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue } from "./primitives/select.js";
 import { Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow } from "./primitives/table.js";
 import { Tabs, TabsContent, TabsList, TabsTrigger } from "./primitives/tabs.js";
 import { SegmentedControl } from "./primitives/segmented-control.js";
@@ -48,4 +51,4 @@ import { IconTile, initialsOf } from "./primitives/icon-tile.js";
 import { Metric, MetricStrip } from "./primitives/metric-strip.js";
 import { FilterField, Toolbar } from "./primitives/toolbar.js";
 import { Logo, TangleKnot } from "@tangle-network/brand";
-export { Alert, AlertDescription, AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogOverlay, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger, AlertTitle, ArtifactPane, Avatar, AvatarFallback, AvatarImage, Badge, Button, CATEGORY_TONES, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Checkbox, Chip, CodeBlock, Collapsible, CollapsibleContent, CollapsibleTrigger, ContextMenu, ContextMenuCheckboxItem, ContextMenuContent, ContextMenuGroup, ContextMenuItem, ContextMenuLabel, ContextMenuPortal, ContextMenuRadioGroup, ContextMenuRadioItem, ContextMenuSeparator, ContextMenuShortcut, ContextMenuSub, ContextMenuSubContent, ContextMenuSubTrigger, ContextMenuTrigger, CopyButton, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, DropZone, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, EmptyState, FilterField, Heading, HelpText, IconTile, InlineCode, Input, Label, Logo, Metric, MetricStrip, PageHeader, PageShell, Pagination, Popover, PopoverAnchor, PopoverClose, PopoverContent, PopoverTrigger, Progress, SegmentedControl, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, Separator, Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetOverlay, SheetPortal, SheetTitle, SheetTrigger, SidebarDropZone, Skeleton, SkeletonCard, SkeletonTable, Slider, StatCard, StatusPill, Switch, TONE_CLASSES, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, Tabs, TabsContent, TabsList, TabsTrigger, Tag, TangleKnot, TerminalCursor, TerminalDisplay, TerminalInput, TerminalLine, TextShimmer, Textarea, ThemeToggle, ToastContainer, ToastProvider, Toolbar, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, UploadProgress, badgeVariants, buttonVariants, initialsOf, toneFor, useTheme, useToast };
+export { Alert, AlertDescription, AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogOverlay, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger, AlertTitle, ArtifactPane, Avatar, AvatarFallback, AvatarImage, Badge, Button, CATEGORY_TONES, Calendar, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Checkbox, Chip, CodeBlock, Collapsible, CollapsibleContent, CollapsibleTrigger, ContextMenu, ContextMenuCheckboxItem, ContextMenuContent, ContextMenuGroup, ContextMenuItem, ContextMenuLabel, ContextMenuPortal, ContextMenuRadioGroup, ContextMenuRadioItem, ContextMenuSeparator, ContextMenuShortcut, ContextMenuSub, ContextMenuSubContent, ContextMenuSubTrigger, ContextMenuTrigger, CopyButton, DatePicker, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, DropZone, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, EmptyState, FilterField, Heading, HelpText, IconTile, InlineCode, Input, Label, Logo, Metric, MetricStrip, PageHeader, PageShell, Pagination, Popover, PopoverAnchor, PopoverClose, PopoverContent, PopoverTrigger, Progress, SegmentedControl, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, Separator, Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetOverlay, SheetPortal, SheetTitle, SheetTrigger, SidebarDropZone, Skeleton, SkeletonCard, SkeletonTable, Slider, StatCard, StatusPill, Switch, TONE_CLASSES, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, Tabs, TabsContent, TabsList, TabsTrigger, Tag, TangleKnot, TerminalCursor, TerminalDisplay, TerminalInput, TerminalLine, TextShimmer, Textarea, ThemeToggle, TimeSelect, ToastContainer, ToastProvider, Toolbar, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, UploadProgress, badgeVariants, buttonVariants, formatCalendarDate, initialsOf, localToday, parseCalendarDate, toneFor, useTheme, useToast };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tangle-network/ui",
-  "version": "11.28.1",
+  "version": "11.29.0",
   "description": "Generic React UI components for Tangle products — primitives, chat, run, files, editor, markdown.",
   "type": "module",
   "license": "MIT",
@@ -149,7 +149,7 @@
   "peerDependencies": {
     "@hocuspocus/provider": ">=2.15.0 <5.0.0",
     "@nanostores/react": ">=0.8.4 <3.0.0",
-    "@tangle-network/brand": "^1.18.0",
+    "@tangle-network/brand": "^1.19.2",
     "@tiptap/core": ">=3.20.4 <4.0.0",
     "@tiptap/extension-collaboration": ">=3.20.4 <4.0.0",
     "@tiptap/extension-collaboration-caret": ">=3.7.0 <4.0.0",

package/src/lib/control-presentation.ts

@@ -64,10 +64,12 @@ export const controlSizes = {
 // resolves the recessed well inside every canonical/named light/dark scope.
 // An autofill inset shadow coexists with the Tailwind focus ring; never hide
 // autofill with a seconds-long background transition or clear the focus halo.
+// --field-surface lets a context raise its fields: Toolbar sets it to the card
+// surface so filters on the page canvas read as controls, not as holes in it.
 export const fieldPresentation = cn(
   focusField,
   controlMotion,
-  "min-w-0 bg-[var(--bg-input)] text-foreground",
+  "min-w-0 bg-[var(--field-surface,var(--bg-input))] text-foreground",
   "aria-invalid:border-[var(--surface-danger-border)] aria-invalid:hover:border-[var(--surface-danger-border)] aria-invalid:focus:border-[var(--focus-border-danger)] aria-invalid:focus:ring-[var(--focus-halo-danger)]",
   "autofill:shadow-[inset_0_0_0_1000px_var(--bg-input)] autofill:[-webkit-text-fill-color:var(--text-primary)] autofill:caret-[var(--text-primary)]",
 );

package/src/primitives/button.tsx

@@ -46,9 +46,15 @@ const buttonVariants = cva(
   },
 );
 
+// `bare` keeps the shared focus ring, disabled and loading behavior and drops
+// every surface, size and type class. It is for pressable rows, tiles and pills
+// that draw their own layout; anything that reads as a button uses a styled
+// variant and a size.
+const bareButton = `${focusRing} disabled:pointer-events-none disabled:opacity-50 aria-disabled:cursor-not-allowed aria-disabled:opacity-50`;
+
 export interface ButtonProps
   extends React.ButtonHTMLAttributes<HTMLButtonElement> {
-  variant?: "default" | "destructive" | "outline" | "secondary" | "ghost" | "link" | "sandbox" | null;
+  variant?: "default" | "destructive" | "outline" | "secondary" | "ghost" | "link" | "sandbox" | "bare" | null;
   /** sm 32px, default/md 36px (`--control-height`), lg 44px; icon sizes are squares on the same heights. */
   size?: "default" | "md" | "sm" | "lg" | "xl" | "icon" | "icon-sm" | "icon-lg" | "compact" | "touch" | null;
   asChild?: boolean;
@@ -109,7 +115,7 @@ const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
       // Keep slotted content intact: its action name must survive loading too.
       return (
         <Slot
-          className={cn(buttonVariants({ variant, size, className }))}
+          className={variant === "bare" ? cn(bareButton, className) : cn(buttonVariants({ variant, size, className }))}
           ref={ref}
           {...props}
           {...(isDisabled ? disabledHandlers(props) : {})}
@@ -134,7 +140,7 @@ const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
 
     return (
       <button
-        className={cn(buttonVariants({ variant, size, className }))}
+        className={variant === "bare" ? cn(bareButton, className) : cn(buttonVariants({ variant, size, className }))}
         ref={ref}
         {...props}
         disabled={disabled || loading}

package/src/primitives/calendar.tsx

@@ -0,0 +1,242 @@
+"use client";
+
+import { ChevronLeft, ChevronRight } from "lucide-react";
+import * as React from "react";
+import { focusRing } from "../lib/focus";
+import { cn } from "../lib/utils";
+import { Button } from "./button";
+
+/**
+ * Calendar dates are plain `YYYY-MM-DD` strings, the same value a native date
+ * input reports. All arithmetic runs in UTC so a date never shifts with the
+ * viewer's time zone or a daylight-saving boundary.
+ */
+export type CalendarDate = string;
+
+const DATE_PATTERN = /^(\d{4})-(\d{2})-(\d{2})$/;
+const DAY_MS = 86_400_000;
+
+export function parseCalendarDate(value: string | null | undefined): number | null {
+  const match = value ? DATE_PATTERN.exec(value) : null;
+  if (!match) return null;
+  const time = Date.UTC(Number(match[1]), Number(match[2]) - 1, Number(match[3]));
+  const date = new Date(time);
+  // Reject impossible dates such as 2026-02-31 rather than rolling them over.
+  return date.getUTCMonth() === Number(match[2]) - 1 ? time : null;
+}
+
+export function formatCalendarDate(time: number): CalendarDate {
+  const date = new Date(time);
+  const month = String(date.getUTCMonth() + 1).padStart(2, "0");
+  const day = String(date.getUTCDate()).padStart(2, "0");
+  return `${date.getUTCFullYear()}-${month}-${day}`;
+}
+
+/** Today in the viewer's local calendar, as a `YYYY-MM-DD` string. */
+export function localToday(now = new Date()): CalendarDate {
+  return formatCalendarDate(Date.UTC(now.getFullYear(), now.getMonth(), now.getDate()));
+}
+
+function firstOfMonth(time: number): number {
+  const date = new Date(time);
+  return Date.UTC(date.getUTCFullYear(), date.getUTCMonth(), 1);
+}
+
+function addMonths(time: number, delta: number): number {
+  const date = new Date(time);
+  const target = Date.UTC(date.getUTCFullYear(), date.getUTCMonth() + delta, 1);
+  const lastDay = new Date(Date.UTC(date.getUTCFullYear(), date.getUTCMonth() + delta + 1, 0)).getUTCDate();
+  const day = Math.min(date.getUTCDate(), lastDay);
+  return target + (day - 1) * DAY_MS;
+}
+
+export interface CalendarProps {
+  /** The selected date, `YYYY-MM-DD`. */
+  value?: CalendarDate | null;
+  onChange?: (value: CalendarDate) => void;
+  /** The month shown first (any date inside it). Defaults to the value, else today. */
+  defaultMonth?: CalendarDate;
+  /** Earliest and latest selectable dates, inclusive. */
+  min?: CalendarDate;
+  max?: CalendarDate;
+  isDateDisabled?: (value: CalendarDate) => boolean;
+  /** The date marked as today. Pass it to use a workspace time zone instead of the viewer's. */
+  today?: CalendarDate;
+  /** 0 starts weeks on Sunday, 1 on Monday. */
+  weekStartsOn?: 0 | 1;
+  locale?: string;
+  className?: string;
+  "aria-label"?: string;
+}
+
+/**
+ * A month grid that picks one date. Arrow keys move by day and week, Page Up
+ * and Page Down by month, Home and End to the week's ends; Enter or Space picks
+ * the focused date. Six weeks always render so the grid never changes height.
+ */
+const Calendar = React.forwardRef<HTMLDivElement, CalendarProps>(
+  (
+    {
+      value,
+      onChange,
+      defaultMonth,
+      min,
+      max,
+      isDateDisabled,
+      today: todayProp,
+      weekStartsOn = 0,
+      locale,
+      className,
+      "aria-label": ariaLabel,
+    },
+    ref,
+  ) => {
+    const today = parseCalendarDate(todayProp) ?? (parseCalendarDate(localToday()) as number);
+    const selected = parseCalendarDate(value);
+    const minTime = parseCalendarDate(min);
+    const maxTime = parseCalendarDate(max);
+    const [focused, setFocused] = React.useState<number>(
+      () => selected ?? parseCalendarDate(defaultMonth) ?? today,
+    );
+    const viewMonth = firstOfMonth(focused);
+    const gridRef = React.useRef<HTMLDivElement>(null);
+    const moveFocusRef = React.useRef(false);
+
+    React.useEffect(() => {
+      if (selected !== null) setFocused(selected);
+    }, [selected]);
+
+    React.useEffect(() => {
+      if (!moveFocusRef.current) return;
+      moveFocusRef.current = false;
+      gridRef.current?.querySelector<HTMLButtonElement>('[data-focused="true"]')?.focus();
+    }, [focused]);
+
+    const disabled = (time: number) =>
+      (minTime !== null && time < minTime) ||
+      (maxTime !== null && time > maxTime) ||
+      Boolean(isDateDisabled?.(formatCalendarDate(time)));
+
+    const leading = (new Date(viewMonth).getUTCDay() - weekStartsOn + 7) % 7;
+    const start = viewMonth - leading * DAY_MS;
+    const days = Array.from({ length: 42 }, (_, index) => start + index * DAY_MS);
+    const weeks = Array.from({ length: 6 }, (_, row) => days.slice(row * 7, row * 7 + 7));
+
+    const monthLabel = new Intl.DateTimeFormat(locale, { month: "long", year: "numeric", timeZone: "UTC" }).format(viewMonth);
+    const dayLabel = new Intl.DateTimeFormat(locale, { weekday: "long", month: "long", day: "numeric", year: "numeric", timeZone: "UTC" });
+    const weekdayShort = new Intl.DateTimeFormat(locale, { weekday: "short", timeZone: "UTC" });
+    const weekdayLong = new Intl.DateTimeFormat(locale, { weekday: "long", timeZone: "UTC" });
+    const weekdays = days.slice(0, 7);
+
+    const move = (next: number) => {
+      moveFocusRef.current = true;
+      setFocused(next);
+    };
+
+    const onKeyDown = (event: React.KeyboardEvent) => {
+      const weekday = (new Date(focused).getUTCDay() - weekStartsOn + 7) % 7;
+      const steps: Record<string, () => number> = {
+        ArrowLeft: () => focused - DAY_MS,
+        ArrowRight: () => focused + DAY_MS,
+        ArrowUp: () => focused - 7 * DAY_MS,
+        ArrowDown: () => focused + 7 * DAY_MS,
+        PageUp: () => addMonths(focused, event.shiftKey ? -12 : -1),
+        PageDown: () => addMonths(focused, event.shiftKey ? 12 : 1),
+        Home: () => focused - weekday * DAY_MS,
+        End: () => focused + (6 - weekday) * DAY_MS,
+      };
+      const step = steps[event.key];
+      if (!step) return;
+      event.preventDefault();
+      move(step());
+    };
+
+    const pick = (time: number) => {
+      if (disabled(time)) return;
+      setFocused(time);
+      onChange?.(formatCalendarDate(time));
+    };
+
+    return (
+      <div ref={ref} className={cn("w-fit select-none", className)}>
+        <div className="mb-2 flex items-center justify-between gap-2">
+          <Button
+            type="button"
+            variant="ghost"
+            size="icon-sm"
+            aria-label="Previous month"
+            onClick={() => setFocused(addMonths(focused, -1))}
+          >
+            <ChevronLeft />
+          </Button>
+          <div aria-live="polite" className="font-medium text-[length:var(--control-text-md,0.875rem)] text-foreground">
+            {monthLabel}
+          </div>
+          <Button
+            type="button"
+            variant="ghost"
+            size="icon-sm"
+            aria-label="Next month"
+            onClick={() => setFocused(addMonths(focused, 1))}
+          >
+            <ChevronRight />
+          </Button>
+        </div>
+        <div ref={gridRef} role="grid" aria-label={ariaLabel ?? monthLabel} onKeyDown={onKeyDown}>
+          <div role="row" className="grid grid-cols-7">
+            {weekdays.map((time) => (
+              <div
+                key={time}
+                role="columnheader"
+                aria-label={weekdayLong.format(time)}
+                className="flex h-8 items-center justify-center text-[length:var(--font-size-help,0.75rem)] text-muted-foreground"
+              >
+                {weekdayShort.format(time).slice(0, 2)}
+              </div>
+            ))}
+          </div>
+          {weeks.map((week) => (
+            <div key={week[0]} role="row" className="grid grid-cols-7">
+              {week.map((time) => {
+                const outside = firstOfMonth(time) !== viewMonth;
+                const isSelected = selected === time;
+                const isToday = today === time;
+                const isDisabled = disabled(time);
+                return (
+                  <div key={time} role="gridcell" aria-selected={isSelected}>
+                    <button
+                      type="button"
+                      tabIndex={time === focused ? 0 : -1}
+                      data-focused={time === focused}
+                      data-outside={outside || undefined}
+                      data-today={isToday || undefined}
+                      aria-label={dayLabel.format(time)}
+                      aria-current={isToday ? "date" : undefined}
+                      aria-disabled={isDisabled || undefined}
+                      onClick={() => pick(time)}
+                      onFocus={() => { if (time !== focused) setFocused(time); }}
+                      className={cn(
+                        "flex size-[var(--control-height,2.25rem)] items-center justify-center rounded-lg text-[length:var(--control-text-md,0.875rem)] tabular-nums transition-colors",
+                        focusRing,
+                        "hover:bg-muted",
+                        outside && "text-muted-foreground/60",
+                        isToday && !isSelected && "font-semibold text-[var(--accent-text)]",
+                        isSelected && "bg-primary font-medium text-primary-foreground hover:bg-primary/90",
+                        isDisabled && "cursor-not-allowed opacity-40 hover:bg-transparent",
+                      )}
+                    >
+                      {new Date(time).getUTCDate()}
+                    </button>
+                  </div>
+                );
+              })}
+            </div>
+          ))}
+        </div>
+      </div>
+    );
+  },
+);
+Calendar.displayName = "Calendar";
+
+export { Calendar };

package/src/primitives/control-presentation.test.tsx

@@ -12,7 +12,7 @@ afterEach(cleanup);
 
 describe("shared control presentation", () => {
   it("uses the field well, not the border/track alias, with scoped foreground and time-only motion", () => {
-    expect(fieldPresentation).toContain("bg-[var(--bg-input)]");
+    expect(fieldPresentation).toContain("bg-[var(--field-surface,var(--bg-input))]");
     expect(fieldPresentation.split(" ")).not.toContain("bg-input");
     expect(fieldPresentation.split(" ")).not.toContain("bg-card");
     expect(fieldPresentation).toContain("border-border");
@@ -63,6 +63,13 @@ describe("shared control presentation", () => {
     }
   });
 
+  it("lets a file input's selector button take the field's text size", () => {
+    render(<Input type="file" size="lg" aria-label="Upload" />);
+    const classes = screen.getByLabelText("Upload").className.split(" ");
+    expect(classes).toContain("text-[length:var(--control-text-lg,1rem)]");
+    expect(classes.filter((name) => name.startsWith("file:text-"))).toEqual([]);
+  });
+
   it("gives icon buttons squares on the same heights", () => {
     render(<><Button size="icon-sm" aria-label="Small" /><Button size="icon" aria-label="Medium" /><Button size="icon-lg" aria-label="Large" /></>);
     expect(screen.getByLabelText("Small").className).toContain("size-[var(--control-height-sm,2rem)]");
@@ -93,7 +100,7 @@ describe("shared control presentation", () => {
     expect(input.current).toHaveAttribute("aria-invalid", "true");
     expect(input.current!.className).toContain("autofill:shadow-");
     expect(input.current!.className.split(" ")).toContain("bg-card");
-    expect(input.current!.className).not.toContain("bg-[var(--bg-input)]");
+    expect(input.current!.className).not.toContain("bg-[var(--field-surface,var(--bg-input))]");
     expect(textarea.current).toBeDisabled();
     expect(trigger.current).toBe(screen.getByLabelText("Choice"));
     expect(trigger.current).toBeDisabled();

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

@@ -0,0 +1,55 @@
+import * as React from "react";
+import type { Meta, StoryObj } from "@storybook/react";
+import { Button } from "./button";
+import { Calendar } from "./calendar";
+import { DatePicker } from "./date-picker";
+import { Input } from "./input";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "./select";
+import { TimeSelect } from "./time-select";
+import { FilterField, Toolbar } from "./toolbar";
+
+function FilterBar() {
+  const [date, setDate] = React.useState("");
+  const [format, setFormat] = React.useState("all");
+  const [time, setTime] = React.useState("09:30");
+  return (
+    <main className="space-y-8 bg-background p-6 text-foreground" data-date-picker-story>
+      <section>
+        <h2 className="mb-3 font-semibold text-section">On the page canvas, in a Toolbar</h2>
+        <Toolbar
+          search={<Input aria-label="Filter assets" placeholder="Filter assets…" />}
+          filters={<>
+            <FilterField label="Format" htmlFor="format">
+              <Select value={format} onValueChange={setFormat}>
+                <SelectTrigger id="format" className="w-40"><SelectValue /></SelectTrigger>
+                <SelectContent>
+                  <SelectItem value="all">All formats</SelectItem>
+                  <SelectItem value="email">Email</SelectItem>
+                  <SelectItem value="story">Story</SelectItem>
+                </SelectContent>
+              </Select>
+            </FilterField>
+            <FilterField label="Schedule for" htmlFor="schedule">
+              <DatePicker id="schedule" className="w-40" placeholder="Any date" value={date} onChange={setDate} />
+            </FilterField>
+            <FilterField label="At" htmlFor="at">
+              <TimeSelect id="at" className="w-32" value={time} onChange={setTime} />
+            </FilterField>
+          </>}
+          actions={<Button variant="outline">Approve all (4)</Button>}
+        />
+      </section>
+      <section className="max-w-sm space-y-2 rounded-xl border border-border bg-card p-4">
+        <h2 className="font-semibold text-section">In a card, in the field well</h2>
+        <DatePicker aria-label="Due" value="2026-10-08" />
+      </section>
+      <section className="w-fit rounded-xl border border-border bg-card p-3">
+        <Calendar value="2026-10-08" today="2026-10-08" weekStartsOn={1} />
+      </section>
+    </main>
+  );
+}
+
+const meta = { title: "Primitives/Date Picker", component: FilterBar, parameters: { layout: "fullscreen" } } satisfies Meta<typeof FilterBar>;
+export default meta;
+export const InAToolbar: StoryObj<typeof meta> = {};

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

@@ -0,0 +1,146 @@
+import * as React from "react";
+import { cleanup, fireEvent, render, screen, within } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { afterEach, describe, expect, it, vi } from "vitest";
+import { controlHeight } from "../lib/control-presentation";
+import { Button } from "./button";
+import { Calendar, formatCalendarDate, parseCalendarDate } from "./calendar";
+import { DatePicker } from "./date-picker";
+import { Select, SelectTrigger, SelectValue } from "./select";
+import { TimeSelect } from "./time-select";
+import { FilterField, Toolbar } from "./toolbar";
+
+afterEach(cleanup);
+
+describe("calendar dates", () => {
+  it("round-trips YYYY-MM-DD in UTC and rejects impossible dates", () => {
+    const time = parseCalendarDate("2026-03-08");
+    expect(time).toBe(Date.UTC(2026, 2, 8));
+    expect(formatCalendarDate(time!)).toBe("2026-03-08");
+    expect(parseCalendarDate("2026-02-31")).toBeNull();
+    expect(parseCalendarDate("03/08/2026")).toBeNull();
+  });
+});
+
+describe("Calendar", () => {
+  it("renders six weeks, marks today and the selection, and picks a day", async () => {
+    const onChange = vi.fn();
+    render(<Calendar value="2026-10-08" today="2026-10-08" onChange={onChange} locale="en-US" />);
+    const grid = screen.getByRole("grid", { name: "October 2026" });
+    expect(within(grid).getAllByRole("gridcell")).toHaveLength(42);
+    const selected = screen.getByRole("button", { name: "Thursday, October 8, 2026" });
+    expect(selected).toHaveAttribute("aria-current", "date");
+    expect(selected.closest("[role=gridcell]")).toHaveAttribute("aria-selected", "true");
+    await userEvent.click(screen.getByRole("button", { name: "Friday, October 16, 2026" }));
+    expect(onChange).toHaveBeenCalledWith("2026-10-16");
+  });
+
+  it("moves by day, week and month from the keyboard and picks with Enter", async () => {
+    const onChange = vi.fn();
+    render(<Calendar value="2026-10-31" onChange={onChange} locale="en-US" />);
+    const user = userEvent.setup();
+    screen.getByRole("button", { name: "Saturday, October 31, 2026" }).focus();
+    await user.keyboard("{ArrowRight}");
+    expect(screen.getByRole("grid", { name: "November 2026" })).toBeTruthy();
+    expect(document.activeElement).toHaveAccessibleName("Sunday, November 1, 2026");
+    await user.keyboard("{ArrowDown}{PageUp}");
+    expect(document.activeElement).toHaveAccessibleName("Thursday, October 8, 2026");
+    await user.keyboard("{Enter}");
+    expect(onChange).toHaveBeenCalledWith("2026-10-08");
+  });
+
+  it("refuses dates outside min and max", async () => {
+    const onChange = vi.fn();
+    render(<Calendar defaultMonth="2026-10-01" min="2026-10-10" onChange={onChange} locale="en-US" />);
+    const early = screen.getByRole("button", { name: "Friday, October 9, 2026" });
+    expect(early).toHaveAttribute("aria-disabled", "true");
+    await userEvent.click(early);
+    expect(onChange).not.toHaveBeenCalled();
+  });
+
+  it("starts weeks on Monday when asked", () => {
+    render(<Calendar defaultMonth="2026-10-01" weekStartsOn={1} locale="en-US" />);
+    expect(screen.getAllByRole("columnheader")[0]).toHaveAccessibleName("Monday");
+  });
+});
+
+describe("DatePicker", () => {
+  it("shows the date in the locale instead of a mm/dd/yyyy mask, on the control scale", () => {
+    render(<DatePicker aria-label="Schedule for" value="2026-10-08" locale="en-US" />);
+    const trigger = screen.getByRole("button", { name: "Schedule for" });
+    expect(trigger).toHaveTextContent("Oct 8, 2026");
+    expect(trigger.className.split(" ")).toContain(controlHeight.md);
+    expect(trigger).toHaveAttribute("aria-haspopup", "dialog");
+  });
+
+  it("opens a calendar, reports the chosen date and closes", async () => {
+    const onChange = vi.fn();
+    render(<DatePicker aria-label="Schedule for" placeholder="Any date" defaultMonth="2026-10-01" onChange={onChange} locale="en-US" />);
+    const trigger = screen.getByRole("button", { name: "Schedule for" });
+    expect(trigger).toHaveTextContent("Any date");
+    expect(trigger).toHaveAttribute("data-placeholder");
+    await userEvent.click(trigger);
+    await userEvent.click(await screen.findByRole("button", { name: "Tuesday, October 20, 2026" }));
+    expect(onChange).toHaveBeenCalledWith("2026-10-20");
+    expect(screen.queryByRole("grid")).toBeNull();
+  });
+
+  it("clears a chosen date and submits it with a name", async () => {
+    const onChange = vi.fn();
+    const { container } = render(<DatePicker aria-label="Due" name="due" value="2026-10-08" onChange={onChange} locale="en-US" />);
+    expect(container.querySelector('input[type="hidden"][name="due"]')).toHaveValue("2026-10-08");
+    await userEvent.click(screen.getByRole("button", { name: "Due" }));
+    await userEvent.click(await screen.findByRole("button", { name: "Clear" }));
+    expect(onChange).toHaveBeenCalledWith("");
+  });
+});
+
+describe("TimeSelect", () => {
+  it("lists step slots in the locale and keeps an off-step value", () => {
+    render(<TimeSelect aria-label="Time" value="09:07" locale="en-US" step={30} />);
+    const trigger = screen.getByRole("combobox", { name: "Time" });
+    expect(trigger).toHaveTextContent("9:07 AM");
+    expect(trigger.className.split(" ")).toContain(controlHeight.md);
+  });
+
+  it("reports HH:MM when a slot is picked", async () => {
+    // jsdom lacks the layout APIs Radix Select calls while opening.
+    Element.prototype.scrollIntoView ??= vi.fn();
+    Element.prototype.hasPointerCapture ??= vi.fn(() => false);
+    Element.prototype.releasePointerCapture ??= vi.fn();
+    const onChange = vi.fn();
+    render(<TimeSelect aria-label="Time" value="09:00" onChange={onChange} locale="en-US" step={60} />);
+    const trigger = screen.getByRole("combobox", { name: "Time" });
+    trigger.focus();
+    fireEvent.keyDown(trigger, { key: "Enter" });
+    fireEvent.click(await screen.findByRole("option", { name: "10:00 AM" }));
+    expect(onChange).toHaveBeenCalledWith("10:00");
+  });
+});
+
+describe("raised fields in a Toolbar", () => {
+  it("lifts fields inside a Toolbar onto the card surface and leaves others in the well", () => {
+    render(
+      <>
+        <Toolbar data-testid="toolbar" filters={<FilterField label="Format"><Select><SelectTrigger aria-label="Format"><SelectValue /></SelectTrigger></Select></FilterField>} />
+        <Select><SelectTrigger aria-label="Elsewhere"><SelectValue /></SelectTrigger></Select>
+      </>,
+    );
+    expect(screen.getByTestId("toolbar").className).toContain("[--field-surface:hsl(var(--card))]");
+    for (const name of ["Format", "Elsewhere"]) {
+      expect(screen.getByRole("combobox", { name }).className).toContain("bg-[var(--field-surface,var(--bg-input))]");
+    }
+  });
+});
+
+describe("Button bare", () => {
+  it("keeps focus and disabled behavior without surface or size classes", () => {
+    render(<Button variant="bare" className="flex w-full px-4 py-2" disabled>Row</Button>);
+    const row = screen.getByRole("button", { name: "Row" });
+    expect(row).toBeDisabled();
+    expect(row.className).toContain("focus-visible:ring-4");
+    expect(row.className).not.toContain("h-[var(--control-height");
+    expect(row.className).not.toContain("inline-flex");
+    expect(row.className).toContain("px-4");
+  });
+});