@tangle-network/ui 11.28.2 → 11.30.0

package/dist/primitives/time-select.js

@@ -0,0 +1,51 @@
+"use client";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "./select.js";
+import * as React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/primitives/time-select.tsx
+const TIME_PATTERN = /^([01]\d|2[0-3]):([0-5]\d)$/;
+/**
+* A time of day as a Select on the control scale: the day in `step`-minute
+* slots, labelled in the viewer's locale (9:30 AM, 21:30). A value between
+* slots stays listed so the current time is never lost.
+*/
+const TimeSelect = React.forwardRef(({ value, onChange, step = 15, placeholder = "Pick a time", size = "md", disabled, locale, id, name, className, ...aria }, ref) => {
+	const format = React.useMemo(() => new Intl.DateTimeFormat(locale, {
+		hour: "numeric",
+		minute: "2-digit",
+		timeZone: "UTC"
+	}), [locale]);
+	const options = React.useMemo(() => {
+		const values = [];
+		for (let minutes = 0; minutes < 1440; minutes += Math.max(1, step)) values.push(`${String(Math.floor(minutes / 60)).padStart(2, "0")}:${String(minutes % 60).padStart(2, "0")}`);
+		if (value && TIME_PATTERN.test(value) && !values.includes(value)) values.push(value);
+		return values.sort();
+	}, [step, value]);
+	const label = (time) => {
+		const [hours, minutes] = time.split(":").map(Number);
+		return format.format(Date.UTC(1970, 0, 1, hours, minutes));
+	};
+	return /* @__PURE__ */ jsxs(Select, {
+		value: value && TIME_PATTERN.test(value) ? value : void 0,
+		onValueChange: onChange,
+		disabled,
+		name,
+		children: [/* @__PURE__ */ jsx(SelectTrigger, {
+			ref,
+			id,
+			size,
+			className,
+			...aria,
+			children: /* @__PURE__ */ jsx(SelectValue, { placeholder })
+		}), /* @__PURE__ */ jsx(SelectContent, {
+			className: "max-h-72",
+			children: options.map((time) => /* @__PURE__ */ jsx(SelectItem, {
+				value: time,
+				children: label(time)
+			}, time))
+		})]
+	});
+});
+TimeSelect.displayName = "TimeSelect";
+//#endregion
+export { TimeSelect };

package/dist/primitives/toolbar.js

@@ -4,7 +4,7 @@ import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/primitives/toolbar.tsx
 const Toolbar = React.forwardRef(({ className, search, filters, actions, ...props }, ref) => /* @__PURE__ */ jsxs("div", {
 	ref,
-	className: cn("mb-4 flex flex-col gap-3 lg:flex-row lg:items-center", className),
+	className: cn("mb-4 flex flex-col gap-3 lg:flex-row lg:items-center [--field-surface:hsl(var(--card))]", className),
 	...props,
 	children: [
 		search && /* @__PURE__ */ jsx("div", {

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";
@@ -21,6 +24,7 @@ import { SegmentedControl, SegmentedControlOption, SegmentedControlProps } from
 import { Progress } from "./primitives/progress.js";
 import { Switch } from "./primitives/switch.js";
 import { Checkbox } from "./primitives/checkbox.js";
+import { RadioGroup, RadioGroupItem } from "./primitives/radio-group.js";
 import { Separator } from "./primitives/separator.js";
 import { Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetOverlay, SheetPortal, SheetTitle, SheetTrigger } from "./primitives/sheet.js";
 import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "./primitives/tooltip.js";
@@ -48,4 +52,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, RadioGroup, RadioGroupItem, 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,16 +10,20 @@ 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";
 import { Progress } from "./primitives/progress.js";
 import { Switch } from "./primitives/switch.js";
 import { Checkbox } from "./primitives/checkbox.js";
+import { RadioGroup, RadioGroupItem } from "./primitives/radio-group.js";
 import { Separator } from "./primitives/separator.js";
 import { Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetOverlay, SheetPortal, SheetTitle, SheetTrigger } from "./primitives/sheet.js";
 import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "./primitives/tooltip.js";
@@ -48,4 +52,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, RadioGroup, RadioGroupItem, 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.2",
+  "version": "11.30.0",
   "description": "Generic React UI components for Tangle products — primitives, chat, run, files, editor, markdown.",
   "type": "module",
   "license": "MIT",
@@ -126,6 +126,7 @@
     "@radix-ui/react-label": "^2.1.15",
     "@radix-ui/react-popover": "^1.1.23",
     "@radix-ui/react-progress": "^1.1.16",
+    "@radix-ui/react-radio-group": "^1.4.8",
     "@radix-ui/react-select": "^2.3.7",
     "@radix-ui/react-separator": "^1.1.15",
     "@radix-ui/react-slider": "^1.4.7",
@@ -149,7 +150,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");
@@ -100,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> = {};