@boyernick/standard-ui-react 0.1.1-canary.3 → 0.1.1-canary.34

package/src/collapsible.tsx

@@ -4,6 +4,7 @@ import { Collapsible as BaseCollapsible } from "@base-ui/react/collapsible"
 import type { ComponentProps } from "react"
 import { IconChevronDownSmall } from "./icons"
 import { cn } from "./lib/cn"
+import { focusRing } from "./lib/focus"
 import { motion } from "./lib/motion"
 
 export type CollapsibleProps = ComponentProps<typeof BaseCollapsible.Root>
@@ -23,9 +24,10 @@ export const CollapsibleTrigger = ({
 }: CollapsibleTriggerProps) => (
   <BaseCollapsible.Trigger
     className={cn(
-      "group flex h-9 w-full cursor-pointer items-center justify-between gap-2 rounded-md border border-border-secondary bg-surface px-3 text-sm text-fg-primary inset-shadow-outline-top outline-none",
+      "group flex h-9 w-full cursor-pointer items-center justify-between gap-2 rounded-md border border-border-secondary bg-surface px-3 text-sm text-fg-primary inset-shadow-outline-top",
       motion.colors,
-      "hover:bg-background-tertiary outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-offset-1 focus-visible:ring-offset-background-primary focus-visible:ring-ring/20 data-disabled:cursor-not-allowed data-disabled:opacity-50",
+      focusRing,
+      "data-disabled:cursor-not-allowed data-disabled:opacity-50",
       className,
     )}
     {...props}
@@ -56,6 +58,8 @@ export const CollapsiblePanel = ({
     )}
     {...props}
   >
-    <div className="pt-2 leading-relaxed">{children}</div>
+    {/* px-3 matches the trigger's own padding, so the panel copy lines up
+        under the trigger's label instead of starting at the panel edge. */}
+    <div className="px-3 pt-2 leading-relaxed">{children}</div>
   </BaseCollapsible.Panel>
 )

package/src/combobox.tsx

@@ -4,7 +4,9 @@ import { Combobox as BaseCombobox } from "@base-ui/react/combobox"
 import type { ComponentProps, ReactElement } from "react"
 import { IconChevronDownSmall, IconCrossSmall } from "./icons"
 import { cn } from "./lib/cn"
+import { focusRingWithin, focusRingInvalidWithin } from "./lib/focus"
 import { motion } from "./lib/motion"
+import { popupInset, popupItem, popupLabel, popupMessage, popupSurface } from "./lib/popup"
 
 export type ComboboxProps<
   Value,
@@ -76,10 +78,9 @@ export const ComboboxInputGroup = ({
 }: ComboboxInputGroupProps) => (
   <BaseCombobox.InputGroup
     className={cn(
-      "relative flex min-h-9 w-full items-center rounded-md border border-border-secondary bg-surface inset-shadow-outline-top outline-none transition-[color,box-shadow]",
-      "has-[[data-popup-open]]:bg-background-tertiary/60",
-      "focus-within:border-ring focus-within:ring-[3px] focus-within:ring-offset-1 focus-within:ring-offset-background-primary focus-within:ring-ring/20",
-      "aria-invalid:border-destructive aria-invalid:focus-within:border-destructive aria-invalid:focus-within:ring-destructive/20",
+      "relative flex min-h-9 w-full items-center rounded-md border border-border-secondary bg-surface inset-shadow-outline-top transition-[color,box-shadow]",
+      focusRingWithin,
+      focusRingInvalidWithin,
       "has-[[aria-invalid=true]]:border-destructive has-[[aria-invalid=true]]:focus-within:border-destructive has-[[aria-invalid=true]]:focus-within:ring-destructive/20",
       "has-[:disabled]:opacity-50",
       className,
@@ -139,7 +140,7 @@ export const ComboboxClear = ({
     {...props}
   >
     {children ?? (
-      <IconCrossSmall size={14} className="size-3.5" aria-hidden />
+      <IconCrossSmall size={16} className="size-4" aria-hidden />
     )}
   </BaseCombobox.Clear>
 )
@@ -160,7 +161,7 @@ export const ComboboxBackdrop = ({
 )
 
 export const ComboboxPositioner = ({
-  sideOffset = 4,
+  sideOffset = 6,
   className,
   ...props
 }: ComboboxPositionerProps) => (
@@ -174,7 +175,8 @@ export const ComboboxPositioner = ({
 export const ComboboxPopup = ({ className, ...props }: ComboboxPopupProps) => (
   <BaseCombobox.Popup
     className={cn(
-      "z-50 max-h-[min(24rem,var(--available-height))] w-[var(--anchor-width)] overflow-hidden rounded-md border border-border-primary bg-surface shadow-md outline-none",
+      "z-50 max-h-[min(24rem,var(--available-height))] w-[var(--anchor-width)] overflow-hidden",
+      popupSurface,
       motion.popupAnchor,
       className,
     )}
@@ -199,7 +201,7 @@ export const ComboboxArrow = ({ className, ...props }: ComboboxArrowProps) => (
 
 export const ComboboxList = ({ className, ...props }: ComboboxListProps) => (
   <BaseCombobox.List
-    className={cn("max-h-[inherit] overflow-y-auto p-1 outline-none", className)}
+    className={cn("max-h-[inherit] overflow-y-auto outline-none", popupInset, className)}
     {...props}
   />
 )
@@ -207,7 +209,7 @@ export const ComboboxList = ({ className, ...props }: ComboboxListProps) => (
 export const ComboboxItem = ({ className, ...props }: ComboboxItemProps) => (
   <BaseCombobox.Item
     className={cn(
-      "flex min-h-8 cursor-default items-center gap-2 rounded-xs px-2.5 py-1.5 text-sm text-fg-primary outline-none select-none",
+      popupItem,
       motion.colors,
       "data-disabled:cursor-not-allowed data-disabled:opacity-50 data-highlighted:bg-background-tertiary data-highlighted:text-fg-primary",
       className,
@@ -238,14 +240,14 @@ export const ComboboxItemIndicator = ({
 
 export const ComboboxEmpty = ({ className, ...props }: ComboboxEmptyProps) => (
   <BaseCombobox.Empty
-    className={cn("px-2.5 py-2 text-sm text-fg-tertiary empty:hidden", className)}
+    className={cn(cn(popupMessage, "empty:hidden"), className)}
     {...props}
   />
 )
 
 export const ComboboxStatus = ({ className, ...props }: ComboboxStatusProps) => (
   <BaseCombobox.Status
-    className={cn("px-2.5 py-2 text-sm text-fg-tertiary", className)}
+    className={cn(popupMessage, className)}
     {...props}
   />
 )
@@ -259,7 +261,7 @@ export const ComboboxGroupLabel = ({
   ...props
 }: ComboboxGroupLabelProps) => (
   <BaseCombobox.GroupLabel
-    className={cn("px-2.5 py-1.5 text-xs text-fg-tertiary", className)}
+    className={cn(popupLabel, className)}
     {...props}
   />
 )
@@ -291,7 +293,7 @@ export const ComboboxChips = ({ className, ...props }: ComboboxChipsProps) => (
 export const ComboboxChip = ({ className, ...props }: ComboboxChipProps) => (
   <BaseCombobox.Chip
     className={cn(
-      "inline-flex h-6 items-center gap-1 rounded-xs bg-background-tertiary px-1.5 text-xs text-fg-primary",
+      "inline-flex h-6 items-center gap-1 rounded-xs bg-background-tertiary px-1.5 text-xs-strong text-fg-primary",
       className,
     )}
     {...props}
@@ -305,13 +307,13 @@ export const ComboboxChipRemove = ({
 }: ComboboxChipRemoveProps) => (
   <BaseCombobox.ChipRemove
     className={cn(
-      "inline-flex size-3.5 cursor-pointer items-center justify-center text-fg-tertiary outline-none hover:text-fg-primary focus-visible:outline-none",
+      "inline-flex size-3.5 cursor-pointer items-center justify-center text-fg-primary outline-none focus-visible:outline-none",
       className,
     )}
     {...props}
   >
     {children ?? (
-      <IconCrossSmall size={12} className="size-3" aria-hidden />
+      <IconCrossSmall size={14} className="size-3.5" aria-hidden />
     )}
   </BaseCombobox.ChipRemove>
 )

package/src/command.tsx

@@ -4,8 +4,10 @@ import { Dialog as BaseDialog } from "@base-ui/react/dialog"
 import {
   createContext,
   useContext,
+  useEffect,
   useId,
   useMemo,
+  useRef,
   type ButtonHTMLAttributes,
   type ComponentProps,
   type HTMLAttributes,
@@ -13,7 +15,9 @@ import {
   type ReactNode,
 } from "react"
 import { IconCrossSmall, IconMagnifyingGlass } from "./icons"
+import { filterGroupVariants, filterItemVariants } from "./filter-group"
 import { cn } from "./lib/cn"
+import { focusRing } from "./lib/focus"
 import { motion } from "./lib/motion"
 
 type CommandContextValue = {
@@ -49,7 +53,9 @@ export type CommandClearProps = ButtonHTMLAttributes<HTMLButtonElement>
 export type CommandCloseProps = ComponentProps<typeof BaseDialog.Close>
 export type CommandDividerProps = HTMLAttributes<HTMLDivElement>
 export type CommandContentProps = HTMLAttributes<HTMLDivElement>
+/** @deprecated Use FilterGroup for new filter controls. */
 export type CommandFiltersProps = HTMLAttributes<HTMLUListElement>
+/** @deprecated Use FilterItem for new filter controls. */
 export type CommandFilterProps = ButtonHTMLAttributes<HTMLButtonElement> & {
   selected?: boolean
 }
@@ -108,7 +114,7 @@ export const CommandBackdrop = ({
 export const CommandPopup = ({ className, ...props }: CommandPopupProps) => (
   <BaseDialog.Popup
     className={cn(
-      "fixed top-1/2 left-1/2 z-50 flex h-[min(80vh,32rem)] w-full max-w-xl -translate-x-1/2 -translate-y-1/2 flex-col overflow-hidden rounded-2xl border border-border-primary bg-surface-raised shadow-xl outline-none max-sm:max-w-[calc(100vw-2rem)]",
+      "fixed top-1/2 left-1/2 z-50 flex h-[min(80vh,32rem)] w-[calc(100vw-2rem)] max-w-3xl -translate-x-1/2 -translate-y-1/2 flex-col overflow-hidden rounded-2xl bg-surface-raised shadow-ambient outline-none",
       motion.popupCenter,
       className,
     )}
@@ -147,7 +153,6 @@ export const CommandInput = ({
       aria-activedescendant={activeOptionId}
       className={cn(
         "h-9 min-w-0 flex-1 cursor-text rounded-md bg-transparent px-2.5 text-base text-fg-primary outline-none placeholder:text-fg-quaternary",
-        "focus-visible:bg-background-tertiary/60 focus-visible:ring-[3px] focus-visible:ring-offset-1 focus-visible:ring-offset-background-primary focus-visible:ring-ring/20",
         "[&::-webkit-search-cancel-button]:appearance-none [&::-webkit-search-decoration]:appearance-none",
         className,
       )}
@@ -174,9 +179,10 @@ export const CommandClear = ({
   <button
     type="button"
     className={cn(
-      "cursor-pointer rounded-full px-3 py-1.5 text-sm text-fg-quaternary outline-none",
+      "inline-flex h-8 cursor-pointer items-center rounded-full border border-transparent px-3 text-sm text-fg-quaternary",
       motion.colors,
-      "hover:bg-background-tertiary hover:text-fg-primary focus-visible:ring-[3px] focus-visible:ring-offset-1 focus-visible:ring-offset-background-primary focus-visible:ring-ring/20 data-[active=true]:text-fg-primary",
+      focusRing,
+      "hover:bg-background-tertiary hover:text-fg-primary data-[active=true]:text-fg-primary",
       className,
     )}
     {...props}
@@ -203,9 +209,10 @@ export const CommandClose = ({
 }: CommandCloseProps) => (
   <BaseDialog.Close
     className={cn(
-      "inline-flex size-9 shrink-0 cursor-pointer items-center justify-center rounded-full text-fg-primary outline-none",
+      "inline-flex size-9 shrink-0 cursor-pointer items-center justify-center rounded-full border border-transparent text-fg-primary",
       motion.colors,
-      "hover:bg-background-tertiary focus-visible:ring-[3px] focus-visible:ring-offset-1 focus-visible:ring-offset-background-primary focus-visible:ring-ring/20",
+      focusRing,
+      "hover:bg-background-tertiary",
       className,
     )}
     aria-label={props["aria-label"] ?? "Close"}
@@ -223,7 +230,7 @@ export const CommandContent = ({
 }: CommandContentProps) => (
   <div
     className={cn(
-      "flex min-h-0 flex-1 flex-col gap-3 overflow-x-visible overflow-y-auto overscroll-contain px-4 pt-1 pb-5",
+      "flex min-h-0 flex-1 flex-col gap-3 overflow-hidden px-4 pt-1 pb-5",
       className,
     )}
     {...props}
@@ -237,7 +244,8 @@ export const CommandFilters = ({
   <ul
     role="list"
     className={cn(
-      "flex shrink-0 flex-wrap justify-start gap-1.5 py-1.5",
+      filterGroupVariants({ variant: "pill" }),
+      "w-full shrink-0 justify-start py-1.5",
       className,
     )}
     {...props}
@@ -255,11 +263,10 @@ export const CommandFilter = ({
       type="button"
       aria-pressed={selected}
       data-selected={selected || undefined}
+      data-pressed={selected || undefined}
       className={cn(
-        "cursor-pointer rounded-full px-4 py-2 text-sm text-fg-quaternary outline-none",
+        filterItemVariants({ variant: "pill", size: "md" }),
         motion.colors,
-        "hover:text-fg-primary focus-visible:ring-[3px] focus-visible:ring-offset-1 focus-visible:ring-offset-background-primary focus-visible:ring-ring/20",
-        "data-selected:bg-background-tertiary data-selected:text-fg-primary",
         className,
       )}
       {...props}
@@ -277,7 +284,7 @@ export const CommandList = ({ className, ...props }: CommandListProps) => {
       id={listboxId}
       role="listbox"
       className={cn(
-        "grid min-h-0 flex-1 content-start gap-0 overflow-visible overscroll-contain py-0.5",
+        "grid min-h-0 flex-1 content-start gap-0 overflow-y-auto overscroll-contain p-1",
         className,
       )}
       {...props}
@@ -295,12 +302,21 @@ export const CommandItem = ({
   onClick,
   ...props
 }: CommandItemProps) => {
+  const ref = useRef<HTMLAnchorElement & HTMLButtonElement>(null)
+
+  // Keyboard selection moves the highlight without moving focus, so nothing
+  // scrolls the list on its own. `nearest` only acts when the row is actually
+  // out of view, which leaves hover-driven selection alone.
+  useEffect(() => {
+    if (selected) ref.current?.scrollIntoView({ block: "nearest" })
+  }, [selected])
+
   const itemClassName = cn(
-    "flex h-15 min-h-15 w-full cursor-pointer items-center justify-between gap-4 rounded-lg px-4 text-left text-sm font-medium text-fg-primary outline-none select-none",
+    "flex h-15 min-h-15 w-full cursor-pointer items-center justify-between gap-4 rounded-lg border border-transparent px-4 text-left text-sm font-medium text-fg-primary select-none",
     motion.colors,
     "hover:bg-background-tertiary data-selected:bg-background-tertiary",
     "data-disabled:cursor-not-allowed data-disabled:opacity-50",
-    "focus-visible:ring-[3px] focus-visible:ring-offset-1 focus-visible:ring-offset-background-primary focus-visible:ring-ring/20",
+    focusRing,
     className,
   )
 
@@ -308,6 +324,7 @@ export const CommandItem = ({
     <li role="presentation" className="m-0">
       {href ? (
         <a
+          ref={ref}
           id={id}
           href={disabled ? undefined : href}
           role="option"
@@ -323,6 +340,7 @@ export const CommandItem = ({
         </a>
       ) : (
         <button
+          ref={ref}
           id={id}
           type="button"
           role="option"
@@ -369,6 +387,15 @@ export const CommandTitle = ({ className, children }: CommandTitleProps) => (
   <span className={cn("min-w-0 truncate", className)}>{children}</span>
 )
 
+export type CommandMetaProps = HTMLAttributes<HTMLSpanElement>
+
+export const CommandMeta = ({ className, ...props }: CommandMetaProps) => (
+  <span
+    className={cn("shrink-0 text-xs font-normal text-fg-tertiary", className)}
+    {...props}
+  />
+)
+
 export const CommandDialogTitle = ({
   className,
   ...props

package/src/context-menu.tsx

@@ -5,6 +5,7 @@ import type { ComponentProps } from "react"
 import { IconCheckmark1, IconChevronRightSmall } from "./icons"
 import { cn } from "./lib/cn"
 import { motion } from "./lib/motion"
+import { popupInset, popupItem, popupLabel, popupSurface } from "./lib/popup"
 
 export type ContextMenuProps = ComponentProps<typeof BaseContextMenu.Root>
 export type ContextMenuTriggerProps = ComponentProps<
@@ -53,7 +54,7 @@ export type ContextMenuSubmenuTriggerProps = ComponentProps<
 >
 
 const itemClassName = cn(
-  "flex min-h-8 cursor-default items-center gap-2 rounded-xs px-2.5 py-1.5 text-sm text-fg-primary outline-none select-none",
+  popupItem,
   motion.colors,
   "data-disabled:cursor-not-allowed data-disabled:opacity-50 data-highlighted:bg-background-tertiary",
 )
@@ -100,7 +101,9 @@ export const ContextMenuPopup = ({
 }: ContextMenuPopupProps) => (
   <BaseContextMenu.Popup
     className={cn(
-      "z-50 min-w-40 overflow-hidden rounded-md border border-border-primary bg-surface p-1 shadow-md outline-none",
+      "z-50 min-w-40 overflow-hidden",
+      popupSurface,
+      popupInset,
       motion.popupAnchor,
       className,
     )}
@@ -165,7 +168,7 @@ export const ContextMenuGroupLabel = ({
   ...props
 }: ContextMenuGroupLabelProps) => (
   <BaseContextMenu.GroupLabel
-    className={cn("px-2.5 py-1.5 text-xs text-fg-tertiary", className)}
+    className={cn(popupLabel, className)}
     {...props}
   />
 )

package/src/date-picker.tsx

@@ -0,0 +1,174 @@
+"use client"
+
+import { useState, type ReactNode } from "react"
+import type { DateRange, PropsBase } from "react-day-picker"
+import { Button } from "./button"
+import { Calendar } from "./calendar"
+import { IconCalendar1 } from "./icons"
+import { cn } from "./lib/cn"
+import {
+  Popover,
+  PopoverPopup,
+  PopoverPortal,
+  PopoverPositioner,
+  PopoverTrigger,
+} from "./popover"
+
+const dateFormatter = new Intl.DateTimeFormat("en-US", {
+  month: "short",
+  day: "numeric",
+  year: "numeric",
+})
+
+const formatDate = (date: Date) => dateFormatter.format(date)
+
+type DatePickerBaseProps = {
+  /** Options forwarded to Calendar, excluding its selection mode. */
+  calendarProps?: Omit<PropsBase, "mode" | "required">
+  /** Classes applied to the trigger button. */
+  className?: string
+  /** Disables the trigger button. */
+  disabled?: boolean
+  /** Placeholder shown when no date is selected. */
+  placeholder?: string
+}
+
+export type DatePickerSingleProps = DatePickerBaseProps & {
+  mode?: "single"
+  selected?: Date
+  onSelect?: (date: Date | undefined) => void
+}
+
+export type DatePickerRangeProps = DatePickerBaseProps & {
+  mode: "range"
+  selected?: DateRange
+  onSelect?: (range: DateRange | undefined) => void
+}
+
+export type DatePickerProps = DatePickerSingleProps | DatePickerRangeProps
+
+const DatePickerTrigger = ({
+  className,
+  disabled,
+  empty,
+  label,
+}: {
+  className?: string
+  disabled?: boolean
+  empty: boolean
+  label: string
+}) => (
+  <PopoverTrigger
+    render={
+      <Button
+        type="button"
+        // Default md height, so the trigger lines up with every other field
+        // in a form rather than sitting 4px short of them.
+        size="md"
+        variant="outline"
+        disabled={disabled}
+        prefix={<IconCalendar1 aria-hidden />}
+        // The outline button fills on hover, which is right for a button and
+        // wrong here: this reads as a field, and fields in the system keep
+        // their surface. The border and the popover carry the state.
+        className={cn("w-56 justify-start hover:bg-surface", className)}
+      />
+    }
+  >
+    <span
+      className={cn(
+        "min-w-0 flex-1 truncate text-left",
+        empty && "text-fg-tertiary",
+      )}
+    >
+      {label}
+    </span>
+  </PopoverTrigger>
+)
+
+const DatePickerPopup = ({ children }: { children: ReactNode }) => (
+  <PopoverPortal>
+    <PopoverPositioner align="start" sideOffset={6}>
+      <PopoverPopup className="w-auto gap-0 p-0">{children}</PopoverPopup>
+    </PopoverPositioner>
+  </PopoverPortal>
+)
+
+const SingleDatePicker = ({
+  calendarProps,
+  className,
+  disabled,
+  onSelect,
+  placeholder = "Pick a date",
+  selected,
+}: DatePickerSingleProps) => {
+  const [open, setOpen] = useState(false)
+
+  const handleSelect = (date: Date | undefined) => {
+    onSelect?.(date)
+    if (date) setOpen(false)
+  }
+
+  return (
+    <Popover open={open} onOpenChange={setOpen}>
+      <DatePickerTrigger
+        className={className}
+        disabled={disabled}
+        empty={!selected}
+        label={selected ? formatDate(selected) : placeholder}
+      />
+      <DatePickerPopup>
+        <Calendar
+          {...calendarProps}
+          className={cn("border-0", calendarProps?.className)}
+          mode="single"
+          selected={selected}
+          onSelect={handleSelect}
+        />
+      </DatePickerPopup>
+    </Popover>
+  )
+}
+
+const RangeDatePicker = ({
+  calendarProps,
+  className,
+  disabled,
+  onSelect,
+  placeholder = "Pick a date range",
+  selected,
+}: DatePickerRangeProps) => {
+  const [open, setOpen] = useState(false)
+  const label = selected?.from
+    ? selected.to
+      ? `${formatDate(selected.from)} – ${formatDate(selected.to)}`
+      : `${formatDate(selected.from)} – Select end date`
+    : placeholder
+
+  return (
+    <Popover open={open} onOpenChange={setOpen}>
+      <DatePickerTrigger
+        className={className}
+        disabled={disabled}
+        empty={!selected?.from}
+        label={label}
+      />
+      <DatePickerPopup>
+        <Calendar
+          {...calendarProps}
+          className={cn("border-0", calendarProps?.className)}
+          mode="range"
+          selected={selected}
+          onSelect={onSelect}
+        />
+      </DatePickerPopup>
+    </Popover>
+  )
+}
+
+export const DatePicker = (props: DatePickerProps) =>
+  props.mode === "range" ? (
+    <RangeDatePicker {...props} />
+  ) : (
+    <SingleDatePicker {...props} />
+  )

package/src/dialog.tsx

@@ -2,6 +2,7 @@
 
 import { Dialog as BaseDialog } from "@base-ui/react/dialog"
 import type { ComponentProps, HTMLAttributes } from "react"
+import { useRef } from "react"
 import { cn } from "./lib/cn"
 import { motion } from "./lib/motion"
 
@@ -41,16 +42,38 @@ export const DialogBackdrop = ({
   />
 )
 
-export const DialogPopup = ({ className, ...props }: DialogPopupProps) => (
-  <BaseDialog.Popup
-    className={cn(
-      "fixed top-1/2 left-1/2 z-50 flex w-full max-w-md -translate-x-1/2 -translate-y-1/2 flex-col gap-6 rounded-xl border border-border-primary bg-surface-raised p-5 shadow-md outline-none max-sm:max-w-[calc(100vw-2rem)]",
-      motion.popupCenter,
-      className,
-    )}
-    {...props}
-  />
-)
+export const DialogPopup = ({
+  className,
+  initialFocus,
+  ref,
+  ...props
+}: DialogPopupProps) => {
+  const popupRef = useRef<HTMLDivElement | null>(null)
+
+  const setRef = (node: HTMLDivElement | null) => {
+    popupRef.current = node
+    if (typeof ref === "function") ref(node)
+    else if (ref) ref.current = node
+  }
+
+  return (
+    <BaseDialog.Popup
+      ref={setRef}
+      // Base UI focuses the first tabbable element by default. In a dialog long
+      // enough to scroll that is usually the action at the bottom, and focusing
+      // it scrolls the body to the end before the reader has seen the start —
+      // so the popup takes focus itself, which is what its `tabindex="-1"` is
+      // for. Callers can still name their own target.
+      initialFocus={initialFocus ?? popupRef}
+      className={cn(
+        "fixed top-1/2 left-1/2 z-50 flex w-full max-w-md -translate-x-1/2 -translate-y-1/2 flex-col gap-6 rounded-xl border border-border-primary bg-surface-raised p-5 shadow-md outline-none max-h-[calc(100dvh-2rem)] overflow-y-auto max-sm:max-w-[calc(100vw-2rem)]",
+        motion.popupCenter,
+        className,
+      )}
+      {...props}
+    />
+  )
+}
 
 export const DialogTitle = ({ className, ...props }: DialogTitleProps) => (
   <BaseDialog.Title

package/src/empty.tsx

@@ -10,7 +10,7 @@ export type EmptyActionsProps = ComponentProps<"div">;
 export const Empty = ({ className, ...props }: EmptyProps) => (
   <div
     className={cn(
-      "flex min-h-48 flex-col items-center justify-center gap-3 rounded-xl border border-dashed border-border-primary bg-surface p-8 text-center",
+      "flex min-h-48 flex-col items-center justify-center rounded-xl border border-dashed border-border-primary bg-surface p-8 text-center",
       className,
     )}
     {...props}
@@ -20,7 +20,7 @@ export const Empty = ({ className, ...props }: EmptyProps) => (
 export const EmptyIcon = ({ className, ...props }: EmptyIconProps) => (
   <div
     className={cn(
-      "flex size-10 items-center justify-center rounded-lg bg-background-tertiary text-fg-secondary [&_svg]:size-5",
+      "mb-4 flex size-10 items-center justify-center rounded-lg bg-background-tertiary text-fg-secondary [&_svg]:size-5",
       className,
     )}
     {...props}
@@ -36,7 +36,7 @@ export const EmptyDescription = ({
   ...props
 }: EmptyDescriptionProps) => (
   <p
-    className={cn("max-w-sm text-sm text-fg-secondary", className)}
+    className={cn("mt-1 max-w-sm text-sm text-fg-secondary", className)}
     {...props}
   />
 );
@@ -44,7 +44,7 @@ export const EmptyDescription = ({
 export const EmptyActions = ({ className, ...props }: EmptyActionsProps) => (
   <div
     className={cn(
-      "mt-1 flex flex-wrap items-center justify-center gap-2",
+      "mt-4 flex flex-wrap items-center justify-center gap-2",
       className,
     )}
     {...props}

package/src/field.tsx

@@ -3,6 +3,7 @@
 import { Field as BaseField } from "@base-ui/react/field"
 import type { ComponentProps } from "react"
 import { cn } from "./lib/cn"
+import { focusRing, focusRingInvalid } from "./lib/focus"
 
 export type FieldProps = ComponentProps<typeof BaseField.Root>
 export type FieldLabelProps = ComponentProps<typeof BaseField.Label>
@@ -49,10 +50,10 @@ export const FieldError = ({ className, ...props }: FieldErrorProps) => (
 export const FieldControl = ({ className, ...props }: FieldControlProps) => (
   <BaseField.Control
     className={cn(
-      "text-sm flex h-9 w-full cursor-text rounded-md border border-border-secondary bg-surface px-3 text-fg-primary inset-shadow-outline-top outline-none transition-[color,box-shadow] duration-[var(--duration-sm)] ease-enter placeholder:text-fg-quaternary",
-      "focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-offset-1 focus-visible:ring-offset-background-primary focus-visible:ring-ring/20",
+      "text-sm flex h-9 w-full cursor-text rounded-md border border-border-secondary bg-surface px-3 text-fg-primary inset-shadow-outline-top transition-[color,box-shadow] duration-[var(--duration-sm)] ease-enter placeholder:text-fg-quaternary",
+      focusRing,
+      focusRingInvalid,
       "data-invalid:border-destructive data-invalid:focus-visible:border-destructive data-invalid:focus-visible:ring-destructive/20",
-      "aria-invalid:border-destructive aria-invalid:focus-visible:border-destructive aria-invalid:focus-visible:ring-destructive/20",
       "data-disabled:cursor-not-allowed data-disabled:opacity-50",
       className,
     )}