@ttt-productions/ui-core 0.11.14 → 0.11.16

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ttt-productions/ui-core",
-  "version": "0.11.14",
+  "version": "0.11.16",
   "description": "Shared UI components for TTT Productions projects",
   "repository": {
     "type": "git",
@@ -49,7 +49,8 @@
     "react-dom": ">=19.0.0",
     "react-hook-form": ">=7.0.0",
     "@hookform/resolvers": ">=3.0.0",
-    "@ttt-productions/firebase-helpers": "^0.12.7"
+    "@ttt-productions/firebase-helpers": "^0.12.9",
+    "lucide-react": "^1.30.0"
   },
   "peerDependenciesMeta": {
     "react": {
@@ -63,6 +64,9 @@
     },
     "@hookform/resolvers": {
       "optional": true
+    },
+    "lucide-react": {
+      "optional": true
     }
   },
   "dependencies": {
@@ -88,7 +92,6 @@
     "@radix-ui/react-tooltip": "^1.2.8",
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.1.1",
-    "lucide-react": "^0.562.0",
     "tailwind-merge": "^3.6.0"
   },
   "devDependencies": {
@@ -99,7 +102,8 @@
     "typescript": "^5.8.3",
     "react-hook-form": "^7.69.0",
     "@hookform/resolvers": "^5.2.2",
-    "@ttt-productions/firebase-helpers": "^0.12.7"
+    "@ttt-productions/firebase-helpers": "^0.12.9",
+    "lucide-react": "^1.30.0"
   },
   "author": "DJ (TTT Productions)",
   "license": "MIT"

package/src/react/components/alert-dialog.tsx

@@ -16,7 +16,7 @@ const AlertDialogOverlay = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <AlertDialogPrimitive.Overlay
     className={cn(
-      "fixed inset-0 z-50 bg-black/80  data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
+      "fixed inset-0 z-50 bg-[color:var(--scrim)]  data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
       className
     )}
     {...props}
@@ -34,7 +34,7 @@ const AlertDialogContent = React.forwardRef<
     <AlertDialogPrimitive.Content
       ref={ref}
       className={cn(
-        "fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg [&>*]:min-w-0",
+        "fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 elevation-raised duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg [&>*]:min-w-0",
         className
       )}
       {...props}

package/src/react/components/avatar.tsx

@@ -40,7 +40,7 @@ const AvatarFallback = React.forwardRef<
   <AvatarPrimitive.Fallback
     ref={ref}
     className={cn(
-      "flex h-full w-full items-center justify-center rounded-full bg-white text-primary font-semibold",
+      "flex h-full w-full items-center justify-center rounded-full bg-[color:var(--avatar-fallback)] text-primary font-semibold",
       className
     )}
     {...props}

package/src/react/components/button.tsx

@@ -1,10 +1,11 @@
 "use client"
 
 import * as React from "react"
-import { Slot } from "@radix-ui/react-slot"
+import { Slot, Slottable } from "@radix-ui/react-slot"
 import { cva, type VariantProps } from "class-variance-authority"
 
 import { cn } from "../../lib/utils.js"
+import { Spinner } from "./spinner.js"
 
 const buttonVariants = cva(
   "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-bold ring-offset-background transition-colors focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50",
@@ -14,9 +15,9 @@ const buttonVariants = cva(
         default:
           "button-default bg-primary text-primary-foreground hover:bg-primary/90 border-2 border-[hsl(var(--brand-primary-deep))]",
         destructive:
-          "bg-destructive text-destructive-foreground hover:bg-destructive/90 border-2 border-[hsl(var(--brand-primary-deep))]",
+          "bg-destructive text-destructive-foreground hover:bg-destructive/90 border-2 border-[hsl(var(--destructive-border))]",
         success:
-          "bg-green-500 text-primary-foreground hover:bg-green-500/90 border-2 border-[hsl(var(--status-success-border))]",
+          "bg-[color:var(--button-success)] text-primary-foreground hover:bg-[color:var(--button-success)]/90 border-2 border-[hsl(var(--status-success-border))]",
         outline:
           "border-2 border-border bg-background hover:bg-accent hover:text-accent-foreground text-foreground",
         secondary:
@@ -44,19 +45,54 @@ export interface ButtonProps
   extends React.ButtonHTMLAttributes<HTMLButtonElement>,
     VariantProps<typeof buttonVariants> {
   asChild?: boolean
+  /**
+   * Async work this button started is in flight. The button disables itself — so
+   * neither a repeat click nor an implicit form resubmit can fire — sets
+   * `aria-busy`, and shows the canonical spinner: an icon button (`size="icon"`)
+   * swaps its icon for it; any other button shows it in place of its `icon`.
+   */
+  pending?: boolean
+  /** Leading icon, rendered before the label. While `pending`, the spinner takes its place. */
+  icon?: React.ReactNode
 }
 
 const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
-  ({ className, variant, size, asChild = false, children, ...props }, ref) => {
-    const Comp = asChild ? Slot : "button"
+  ({ className, variant, size, asChild = false, pending = false, icon, disabled, children, ...props }, ref) => {
+    const shared = {
+      ...props,
+      ...(pending ? { "aria-busy": true, "data-pending": "" } : {}),
+      disabled: disabled || pending || undefined,
+      className: cn(buttonVariants({ variant, size, className })),
+    }
+    const spinner = <Spinner size={size === "lg" ? "sm" : "xs"} />
+    const leading = pending ? spinner : icon
+
+    if (asChild) {
+      // Slot finds the Slottable among its DIRECT children, so the leading slot and the
+      // Slottable must be siblings here — never wrapped in a fragment.
+      return leading ? (
+        <Slot ref={ref} {...shared}>
+          {leading}
+          <Slottable>{children}</Slottable>
+        </Slot>
+      ) : (
+        <Slot ref={ref} {...shared}>
+          {children}
+        </Slot>
+      )
+    }
+
     return (
-      <Comp
-        className={cn(buttonVariants({ variant, size, className }))}
-        ref={ref}
-        {...props}
-      >
-        {children}
-      </Comp>
+      <button ref={ref} {...shared}>
+        {size === "icon" ? (
+          pending ? spinner : children
+        ) : (
+          <>
+            {leading}
+            {children}
+          </>
+        )}
+      </button>
     )
   }
 )

package/src/react/components/card.tsx

@@ -7,7 +7,7 @@ const Card = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElemen
   ({ className, ...props }, ref) => (
     <div
       ref={ref}
-      className={cn("rounded-lg border-2 card-border bg-card text-card-foreground shadow-xs", className)}
+      className={cn("rounded-lg border-2 card-border bg-card text-card-foreground", className)}
       {...props}
     />
   )

package/src/react/components/chunk-error-recovery.tsx

@@ -1,7 +1,7 @@
 "use client";
 
 import * as React from "react";
-import { Loader2 } from "lucide-react";
+import { Spinner } from "./spinner.js";
 
 export interface ChunkErrorRecoveryProps {
   children: React.ReactNode;
@@ -48,7 +48,7 @@ export function ChunkErrorRecovery({
   if (hasError) {
     return (
       <div className="flex flex-col h-screen w-screen items-center justify-center gap-4 bg-background">
-        <Loader2 className="h-10 w-10 animate-spin" />
+        <Spinner size="xl" />
         <p className="text-muted-foreground">{loadingMessage}</p>
       </div>
     );

package/src/react/components/consequence-dialog.tsx

@@ -14,7 +14,7 @@ import { Button } from './button.js';
 import { Textarea } from './textarea.js';
 import { Input } from './input.js';
 import { Label } from './label.js';
-import { Loader2, Zap, Clock, RotateCcw } from 'lucide-react';
+import { Zap, Clock, RotateCcw } from 'lucide-react';
 
 /**
  * The inline required-reason config. The caller OWNS the reason value/onChange (draft state lives at
@@ -71,7 +71,7 @@ export interface ConsequenceDialogProps {
 
   /**
    * Runs on confirm. May be async — while it is pending the dialog STAYS OPEN, both buttons disable,
-   * and a `Loader2` spins in the confirm button. Closes on resolve. If it rejects the dialog
+   * and the confirm button shows its pending spinner. Closes on resolve. If it rejects the dialog
    * stays open so the caller's own surface (error toast, TOTP step-up) can show and the operator can
    * retry or cancel. This component takes no Sentry/monitoring dependency — every error path
    * belongs to the caller's `onConfirm`.
@@ -184,7 +184,6 @@ export function ConsequenceDialog({
           (reason.maxLength === undefined || reason.value.length <= reason.maxLength);
 
   const typedOk = !typedConfirmation ? true : typedValue === typedConfirmation.phrase;
-  const confirmDisabled = pending || !reasonOk || !typedOk;
 
   return (
     <AlertDialog open={actualOpen} onOpenChange={handleOpenChange}>
@@ -263,10 +262,9 @@ export function ConsequenceDialog({
           <Button
             variant={destructive ? 'destructive' : 'default'}
             onClick={handleConfirm}
-            disabled={confirmDisabled}
-            aria-busy={pending}
+            disabled={!reasonOk || !typedOk}
+            pending={pending}
           >
-            {pending ? <Loader2 className="mr-2 spinner-xs" aria-hidden="true" /> : null}
             {confirmLabel}
           </Button>
         </AlertDialogFooter>

package/src/react/components/dialog.tsx

@@ -18,7 +18,7 @@ const DialogOverlay = React.forwardRef<
   <DialogPrimitive.Overlay
     ref={ref}
     className={cn(
-      "fixed inset-0 z-50 bg-black/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
+      "fixed inset-0 z-50 bg-[color:var(--scrim)] data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
       className
     )}
     {...props}
@@ -35,7 +35,7 @@ const DialogContent = React.forwardRef<
     <DialogPrimitive.Content
       ref={ref}
       className={cn(
-        "fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-card p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg",
+        "fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-card p-6 elevation-raised duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg",
         "max-h-[90vh] overflow-y-auto [&>*]:min-w-0",
         className
       )}

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

@@ -2,9 +2,11 @@
 
 import * as React from "react"
 import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu"
+import { Slottable } from "@radix-ui/react-slot"
 import { Check, ChevronRight, Circle } from "lucide-react"
 
 import { cn } from "../../lib/utils.js"
+import { Spinner } from "./spinner.js"
 
 const DropdownMenu = DropdownMenuPrimitive.Root
 const DropdownMenuTrigger = DropdownMenuPrimitive.Trigger
@@ -41,7 +43,7 @@ const DropdownMenuSubContent = React.forwardRef<
   <DropdownMenuPrimitive.SubContent
     ref={ref}
     className={cn(
-      "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+      "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground elevation-raised data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
       className
     )}
     {...props}
@@ -58,7 +60,7 @@ const DropdownMenuContent = React.forwardRef<
       ref={ref}
       sideOffset={sideOffset}
       className={cn(
-        "z-50 min-w-[8rem] overflow-hidden rounded-md border !bg-card p-1 text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+        "z-50 min-w-[8rem] overflow-hidden rounded-md border !bg-card p-1 text-popover-foreground elevation-popover data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
         className
       )}
       {...props}
@@ -71,8 +73,16 @@ const DropdownMenuItem = React.forwardRef<
   React.ElementRef<typeof DropdownMenuPrimitive.Item>,
   React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Item> & {
     inset?: boolean
+    /**
+     * The action this item started is in flight: the item disables itself, sets
+     * `aria-busy`, and shows the spinner in place of its `icon`. Keeping the menu open
+     * meanwhile is the caller's `onSelect` (`event.preventDefault()`, close on settle).
+     */
+    pending?: boolean
+    /** Leading icon. While `pending`, the spinner takes its place. */
+    icon?: React.ReactNode
   }
->(({ className, inset, ...props }, ref) => (
+>(({ className, inset, pending = false, icon, disabled, children, ...props }, ref) => (
   <DropdownMenuPrimitive.Item
     ref={ref}
     className={cn(
@@ -81,7 +91,14 @@ const DropdownMenuItem = React.forwardRef<
       className
     )}
     {...props}
-  />
+    {...(pending ? { "aria-busy": true, "data-pending": "" } : {})}
+    disabled={disabled || pending || undefined}
+  >
+    {/* Direct siblings, never a fragment: under `asChild` Radix Slot finds the Slottable
+        among its direct children and renders the icon/spinner inside the child element. */}
+    {pending ? <Spinner size="xs" /> : icon}
+    <Slottable>{children}</Slottable>
+  </DropdownMenuPrimitive.Item>
 ))
 DropdownMenuItem.displayName = DropdownMenuPrimitive.Item.displayName
 

package/src/react/components/end-of-list-indicator.tsx

@@ -20,7 +20,7 @@ export function EndOfListIndicator({
         className,
       )}
     >
-      {icon ?? <CheckCircle2 className="h-6 w-6 text-emerald-500" />}
+      {icon ?? <CheckCircle2 className="h-6 w-6 text-[color:var(--success-icon)]" />}
       <p className="text-sm">{message}</p>
     </div>
   );

package/src/react/components/input.tsx

@@ -9,7 +9,7 @@ const Input = React.forwardRef<HTMLInputElement, React.ComponentProps<"input">>(
       <input
         type={type}
         className={cn(
-          "flex h-10 w-full rounded-md border-2 border-border bg-background px-3 py-2 text-base ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
+          "flex h-10 w-full rounded-md border-2 border-input bg-background px-3 py-2 text-base ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
           className
         )}
         ref={ref}

package/src/react/components/list-pagination.tsx

@@ -1,5 +1,6 @@
 "use client";
 
+import { useState } from "react";
 import { ChevronLeft, ChevronRight } from "lucide-react";
 import { Button } from "./button.js";
 import { cn } from "../../lib/utils.js";
@@ -43,6 +44,17 @@ export function ListPagination({ pagination, busy = false, className }: ListPagi
   const { currentPage, totalPages, canPreviousPage, canNextPage, goToPreviousPage, goToNextPage } =
     pagination;
 
+  // The control that started the in-flight page shows the spinner. Cleared when `busy`
+  // ends — a render-phase adjustment, so there is no effect and no stale frame.
+  const [clicked, setClicked] = useState<"previous" | "next" | null>(null);
+  const [wasBusy, setWasBusy] = useState(busy);
+  if (busy !== wasBusy) {
+    setWasBusy(busy);
+    if (!busy) setClicked(null);
+  }
+  const previousPending = busy && clicked === "previous";
+  const nextPending = busy && clicked === "next";
+
   // One visibility rule for both flavors. For a known total this is exactly
   // `totalPages > 1`: page state is clamped into `1..totalPages`, so a
   // single-page list has no reachable neighbour in either direction, and a
@@ -56,11 +68,15 @@ export function ListPagination({ pagination, busy = false, className }: ListPagi
       <Button
         variant="outline"
         size="sm"
-        onClick={goToPreviousPage}
+        onClick={() => {
+          setClicked("previous");
+          goToPreviousPage();
+        }}
         disabled={busy || !canPreviousPage}
+        pending={previousPending}
+        icon={<ChevronLeft className="icon-xs" />}
         className="h-11 min-w-11"
       >
-        <ChevronLeft className="icon-xs mr-1" />
         Previous
       </Button>
       <span className="text-counter" role="status">
@@ -69,12 +85,16 @@ export function ListPagination({ pagination, busy = false, className }: ListPagi
       <Button
         variant="outline"
         size="sm"
-        onClick={goToNextPage}
+        onClick={() => {
+          setClicked("next");
+          goToNextPage();
+        }}
         disabled={busy || !canNextPage}
+        pending={nextPending}
         className="h-11 min-w-11"
       >
         Next
-        <ChevronRight className="icon-xs ml-1" />
+        {nextPending ? null : <ChevronRight className="icon-xs" />}
       </Button>
     </div>
   );

package/src/react/components/menubar.tsx

@@ -98,7 +98,7 @@ const MenubarContent = React.forwardRef<
       alignOffset={alignOffset}
       sideOffset={sideOffset}
       className={cn(
-        "z-50 min-w-[12rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+        "z-50 min-w-[12rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground elevation-popover data-[state=open]:animate-in data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
         className
       )}
       {...props}

package/src/react/components/popover.tsx

@@ -19,7 +19,7 @@ const PopoverContent = React.forwardRef<
       align={align}
       sideOffset={sideOffset}
       className={cn(
-        "z-50 w-72 rounded-md border !bg-card p-4 text-popover-foreground shadow-md outline-hidden data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+        "z-50 w-72 rounded-md border !bg-card p-4 text-popover-foreground elevation-popover outline-hidden data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
         className
       )}
       {...props}

package/src/react/components/scroll-to-top-button.tsx

@@ -74,7 +74,7 @@ export function ScrollToTopButton({
       onClick={onClick}
       aria-label={ariaLabel}
       className={cn(
-        "fixed bottom-24 left-1/2 -translate-x-1/2 z-50 rounded-full shadow-lg transition-opacity duration-300",
+        "fixed bottom-24 left-1/2 -translate-x-1/2 z-50 rounded-full elevation-raised transition-opacity duration-300",
         isVisible ? "opacity-100" : "opacity-0 pointer-events-none",
         className,
       )}

package/src/react/components/search-dropdown.tsx

@@ -3,7 +3,8 @@
 import { useState, useRef, useEffect } from 'react';
 import { Input } from './input.js';
 import { Label } from './label.js';
-import { Loader2, X, Search } from 'lucide-react';
+import { X, Search } from 'lucide-react';
+import { Spinner } from './spinner.js';
 import { cn } from "../../lib/utils.js";
 
 export interface SearchDropdownProps<T> {
@@ -173,7 +174,7 @@ export function SearchDropdown<T>({
 
         <div className="absolute right-3 top-1/2 -translate-y-1/2">
           {isLoading ? (
-            <Loader2 className="h-4 w-4 animate-spin text-muted-foreground" />
+            <Spinner size="xs" className="text-muted-foreground" />
           ) : value ? (
             <button
               type="button"
@@ -188,14 +189,14 @@ export function SearchDropdown<T>({
       </div>
 
       {showDropdown && (
-        <div className="absolute z-50 w-full mt-1 bg-popover border rounded-md shadow-lg max-h-60 overflow-auto">
+        <div className="absolute z-50 w-full mt-1 bg-popover border rounded-md elevation-raised max-h-60 overflow-auto">
           {error ? (
             <div className="px-3 py-2 text-sm text-destructive">
               {error}
             </div>
           ) : isLoading ? (
             <div className="px-3 py-2 text-sm text-muted-foreground flex items-center gap-2">
-              <Loader2 className="h-4 w-4 animate-spin" />
+              <Spinner size="xs" />
               Searching...
             </div>
           ) : results.length === 0 ? (

package/src/react/components/select.tsx

@@ -5,6 +5,7 @@ import * as SelectPrimitive from "@radix-ui/react-select"
 import { Check, ChevronDown, ChevronUp } from "lucide-react"
 
 import { cn } from "../../lib/utils.js"
+import { Spinner } from "./spinner.js"
 
 const Select = SelectPrimitive.Root
 const SelectGroup = SelectPrimitive.Group
@@ -12,8 +13,15 @@ const SelectValue = SelectPrimitive.Value
 
 const SelectTrigger = React.forwardRef<
   React.ElementRef<typeof SelectPrimitive.Trigger>,
-  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Trigger>
->(({ className, children, ...props }, ref) => (
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Trigger> & {
+    /**
+     * The change this select started is in flight: the trigger disables itself, sets
+     * `aria-busy`, and shows the spinner in place of its chevron. It keeps showing the
+     * COMMITTED value — the caller changes `value` only once the write lands.
+     */
+    pending?: boolean
+  }
+>(({ className, children, pending = false, disabled, ...props }, ref) => (
   <SelectPrimitive.Trigger
     ref={ref}
     className={cn(
@@ -21,11 +29,17 @@ const SelectTrigger = React.forwardRef<
       className
     )}
     {...props}
+    {...(pending ? { "aria-busy": true, "data-pending": "" } : {})}
+    disabled={disabled || pending || undefined}
   >
     {children}
-    <SelectPrimitive.Icon asChild>
-      <ChevronDown className="h-4 w-4 opacity-50" />
-    </SelectPrimitive.Icon>
+    {pending ? (
+      <Spinner size="xs" />
+    ) : (
+      <SelectPrimitive.Icon asChild>
+        <ChevronDown className="h-4 w-4 opacity-50" />
+      </SelectPrimitive.Icon>
+    )}
   </SelectPrimitive.Trigger>
 ))
 SelectTrigger.displayName = SelectPrimitive.Trigger.displayName
@@ -66,7 +80,7 @@ const SelectContent = React.forwardRef<
     <SelectPrimitive.Content
       ref={ref}
       className={cn(
-        "relative z-50 max-h-96 min-w-[8rem] overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+        "relative z-50 max-h-96 min-w-[8rem] overflow-hidden rounded-md border bg-popover text-popover-foreground elevation-popover data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
         position === "popper" &&
           "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
         className

package/src/react/components/sheet.tsx

@@ -21,7 +21,7 @@ const SheetOverlay = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <SheetPrimitive.Overlay
     className={cn(
-      "fixed inset-0 z-50 bg-black/80  data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
+      "fixed inset-0 z-50 bg-[color:var(--scrim)]  data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
       className
     )}
     {...props}
@@ -31,7 +31,7 @@ const SheetOverlay = React.forwardRef<
 SheetOverlay.displayName = SheetPrimitive.Overlay.displayName
 
 const sheetVariants = cva(
-  "fixed z-50 gap-4 bg-background p-6 shadow-lg transition ease-in-out data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:duration-300 data-[state=open]:duration-500",
+  "fixed z-50 gap-4 bg-background p-6 elevation-raised transition ease-in-out data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:duration-300 data-[state=open]:duration-500",
   {
     variants: {
       side: {

package/src/react/components/spinner.tsx

@@ -0,0 +1,49 @@
+"use client"
+
+import { Loader2 } from "lucide-react"
+
+import { cn } from "../../lib/utils.js"
+
+export type SpinnerSize = "xs" | "sm" | "md" | "lg" | "xl"
+
+export interface SpinnerProps {
+  /** Maps onto the theme-core `spinner-*` classes. Defaults to `xs` (the in-control size). */
+  size?: SpinnerSize
+  /**
+   * Screen-reader text. When set, the spinner becomes a `status` live region that
+   * announces it. Omit it for a spinner inside a control that already carries its
+   * own busy state (`aria-busy`) — the control speaks for it.
+   */
+  label?: string
+  className?: string
+}
+
+const SIZE_CLASS: Record<SpinnerSize, string> = {
+  xs: "spinner-xs",
+  sm: "spinner-sm",
+  md: "spinner-md",
+  lg: "spinner-lg",
+  xl: "spinner-xl",
+}
+
+/**
+ * The ONE loading spinner. Every in-progress indicator renders through this
+ * component (or through a control's `pending` prop, which renders it), so the
+ * spinner's look, size scale, and color rule have one change point. The
+ * theme-core `spinner-*` classes own size, animation, and color — including the
+ * `button .spinner-*` rule that makes an in-button spinner inherit the button's
+ * text color so it is never primary-on-primary.
+ */
+function Spinner({ size = "xs", label, className }: SpinnerProps) {
+  if (!label) {
+    return <Loader2 className={cn(SIZE_CLASS[size], className)} aria-hidden="true" />
+  }
+  return (
+    <span role="status" className={cn("inline-flex items-center justify-center", className)}>
+      <Loader2 className={SIZE_CLASS[size]} aria-hidden="true" />
+      <span className="sr-only">{label}</span>
+    </span>
+  )
+}
+
+export { Spinner }

package/src/react/components/switch.tsx

@@ -4,24 +4,36 @@ import * as React from "react"
 import * as SwitchPrimitives from "@radix-ui/react-switch"
 
 import { cn } from "../../lib/utils.js"
+import { Spinner } from "./spinner.js"
 
 const Switch = React.forwardRef<
   React.ElementRef<typeof SwitchPrimitives.Root>,
-  React.ComponentPropsWithoutRef<typeof SwitchPrimitives.Root>
->(({ className, ...props }, ref) => (
+  React.ComponentPropsWithoutRef<typeof SwitchPrimitives.Root> & {
+    /**
+     * The change this switch started is in flight: the switch disables itself, sets
+     * `aria-busy`, and spins inside its thumb. It keeps showing the COMMITTED state —
+     * the caller flips `checked` only once the write lands.
+     */
+    pending?: boolean
+  }
+>(({ className, pending = false, disabled, ...props }, ref) => (
   <SwitchPrimitives.Root
     className={cn(
       "peer inline-flex h-6 w-11 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=unchecked]:bg-input",
       className
     )}
     {...props}
+    {...(pending ? { "aria-busy": true, "data-pending": "" } : {})}
+    disabled={disabled || pending || undefined}
     ref={ref}
   >
     <SwitchPrimitives.Thumb
       className={cn(
-        "pointer-events-none block h-5 w-5 rounded-full bg-background shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-5 data-[state=unchecked]:translate-x-0"
+        "pointer-events-none flex h-5 w-5 items-center justify-center rounded-full bg-background elevation-raised transition-transform data-[state=checked]:translate-x-5 data-[state=unchecked]:translate-x-0"
       )}
-    />
+    >
+      {pending ? <Spinner size="xs" /> : null}
+    </SwitchPrimitives.Thumb>
   </SwitchPrimitives.Root>
 ))
 Switch.displayName = SwitchPrimitives.Root.displayName

package/src/react/components/table.tsx

@@ -59,7 +59,7 @@ const TableRow = React.forwardRef<
   <tr
     ref={ref}
     className={cn(
-      "border-b transition-colors hover:bg-muted/50 dark:hover:bg-white/10 data-[state=selected]:bg-muted",
+      "border-b transition-colors hover:bg-[color:var(--table-row-hover)] data-[state=selected]:bg-muted",
       className
     )}
     {...props}