@actuate-media/cms-admin 0.63.2 → 0.64.0

package/dist/views/settings/components.js

@@ -3,6 +3,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import * as Dialog from '@radix-ui/react-dialog';
 import { AlertTriangle, Check, Loader2, Lock } from 'lucide-react';
 import { useId } from 'react';
+import { Card, CardContent, CardDescription, CardHeader } from '../../components/ui/Card.js';
 import { adminPortalContainer } from '../../lib/portal-container.js';
 /**
  * The canonical Settings section card: a bordered `bg-card` surface with a
@@ -15,7 +16,7 @@ import { adminPortalContainer } from '../../lib/portal-container.js';
  */
 export function SettingsCard({ title, description, actions, children, className, headingLevel: Heading = 'h3', }) {
     const headingId = useId();
-    return (_jsxs("section", { "aria-labelledby": headingId, className: `border-border bg-card rounded-lg border p-6 ${className ?? ''}`, children: [_jsxs("header", { className: "mb-4 flex items-start justify-between gap-3", children: [_jsxs("div", { className: "min-w-0", children: [_jsx(Heading, { id: headingId, className: "text-foreground text-lg font-medium", children: title }), description && _jsx("p", { className: "text-muted-foreground mt-0.5 text-sm", children: description })] }), actions && _jsx("div", { className: "flex shrink-0 items-center gap-2", children: actions })] }), children] }));
+    return (_jsxs(Card, { padding: "none", "aria-labelledby": headingId, role: "region", className: className, children: [_jsxs(CardHeader, { className: "flex items-start justify-between gap-3", children: [_jsxs("div", { className: "min-w-0", children: [_jsx(Heading, { id: headingId, className: "text-[length:var(--fs-card)] font-semibold text-[var(--txt)]", children: title }), description && _jsx(CardDescription, { children: description })] }), actions && _jsx("div", { className: "flex shrink-0 items-center gap-2", children: actions })] }), _jsx(CardContent, { className: "pt-0 text-[var(--txt)]", children: children })] }));
 }
 /**
  * A sub-section inside a {@link SettingsCard}: a top divider plus a

package/dist/views/settings/components.js.map

@@ -1 +1 @@
-{"version":3,"file":"components.js","sourceRoot":"","sources":["../../../src/views/settings/components.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"components.js","sourceRoot":"","sources":["../../../src/views/settings/components.tsx"],"names":[],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@actuate-media/cms-admin",
-  "version": "0.63.2",
+  "version": "0.64.0",
   "repository": {
     "type": "git",
     "url": "https://github.com/actuate-media/actuatecms.git",
@@ -20,9 +20,14 @@
     },
     "./styles": "./src/styles/tailwind.css",
     "./styles/theme.css": "./src/styles/theme.css",
-    "./styles/precompiled.css": "./dist/actuate-admin.css"
+    "./styles/precompiled.css": "./dist/actuate-admin.css",
+    "./design-system/tokens.css": "./design-system/tokens.css",
+    "./design-system/tokens.json": "./design-system/tokens.json",
+    "./design-system/tokens.scss": "./design-system/tokens.scss",
+    "./design-system/tokens.tailwind.cjs": "./design-system/tokens.tailwind.cjs"
   },
   "files": [
+    "design-system",
     "dist",
     "src/styles",
     "src/**/*.tsx",
@@ -90,7 +95,7 @@
     "tailwindcss": "^4.0.0",
     "typescript": "^5.7.0",
     "vitest": "^4.1.0",
-    "@actuate-media/cms-core": "0.85.1",
+    "@actuate-media/cms-core": "0.85.2",
     "@actuate-media/component-blocks": "0.2.1"
   },
   "scripts": {

package/src/__tests__/layout/primitives.test.ts

@@ -12,8 +12,16 @@ describe('layout primitive tokens', () => {
 
   it('exposes the canonical radius scale', () => {
     expect(tokens.radius.none).toBe(0)
-    expect(tokens.radius.md).toBe(6)
-    expect(tokens.radius.full).toBe(9999)
+    expect(tokens.radius.sm).toBe(6)
+    expect(tokens.radius.md).toBe(8)
+    expect(tokens.radius.lg).toBe(10)
+    expect(tokens.radius.full).toBe(99)
+  })
+
+  it('exposes layout dimensions from the design system', () => {
+    expect(tokens.layout.sidebarWidth).toBe(224)
+    expect(tokens.layout.sidebarWidthCollapsed).toBe(60)
+    expect(tokens.layout.topbarHeight).toBe(56)
   })
 
   it('exposes the canonical breakpoint scale', () => {

package/src/components/EnabledSwitch.tsx

@@ -1,6 +1,6 @@
 'use client'
 
-import * as Switch from '@radix-ui/react-switch'
+import { Toggle } from './ui/Toggle.js'
 
 export interface EnabledSwitchProps {
   checked: boolean
@@ -10,25 +10,7 @@ export interface EnabledSwitchProps {
   'aria-label': string
 }
 
-/**
- * On/off switch with explicit green (on) and red (off) track colors so state
- * is obvious at a glance in admin tables.
- */
-export function EnabledSwitch({
-  checked,
-  onCheckedChange,
-  disabled,
-  'aria-label': ariaLabel,
-}: EnabledSwitchProps) {
-  return (
-    <Switch.Root
-      checked={checked}
-      onCheckedChange={onCheckedChange}
-      disabled={disabled}
-      aria-label={ariaLabel}
-      className="bg-destructive data-[state=checked]:bg-success focus-visible:ring-ring relative inline-flex h-[22px] w-11 shrink-0 rounded-full transition-colors focus-visible:ring-2 focus-visible:outline-none disabled:opacity-50"
-    >
-      <Switch.Thumb className="bg-background block h-[18px] w-[18px] translate-x-0.5 rounded-full shadow-sm transition-transform data-[state=checked]:translate-x-[22px]" />
-    </Switch.Root>
-  )
+/** Enable/disable toggle — design-system track + success green when on. */
+export function EnabledSwitch(props: EnabledSwitchProps) {
+  return <Toggle {...props} variant="enabled" />
 }

package/src/components/ThemeProvider.tsx

@@ -89,7 +89,7 @@ const ThemeContext = createContext<ThemeContextValue>({
   setAccent: () => {},
   density: 'default',
   setDensity: () => {},
-  font: 'DM Sans',
+  font: 'System UI',
   setFont: () => {},
   reduceMotion: false,
   setReduceMotion: () => {},
@@ -126,6 +126,8 @@ function applyColorMode(resolved: 'light' | 'dark') {
   const el = adminRootEl()
   if (!el) return
   el.classList.toggle('dark', resolved === 'dark')
+  // Mirror handoff tokens.css selector so unscoped handoff styles can target the admin root.
+  el.setAttribute('data-theme', resolved)
 }
 
 function applyAccent(accent: string, resolved: 'light' | 'dark') {
@@ -166,7 +168,7 @@ export function ThemeProvider({ children, defaultDarkMode }: ThemeProviderProps)
   const [resolvedTheme, setResolvedTheme] = useState<'light' | 'dark'>('light')
   const [accent, setAccentState] = useState('purple')
   const [density, setDensityState] = useState<SidebarDensity>('default')
-  const [font, setFontState] = useState('DM Sans')
+  const [font, setFontState] = useState('System UI')
   const [reduceMotion, setReduceMotionState] = useState(false)
   const [adminBrand, setAdminBrandState] = useState<AdminBrandCache>(DEFAULT_BRAND)
 
@@ -187,7 +189,7 @@ export function ThemeProvider({ children, defaultDarkMode }: ThemeProviderProps)
 
     const storedAccent = localStorage.getItem(KEY_ACCENT) || 'purple'
     const storedDensity = (localStorage.getItem(KEY_DENSITY) as SidebarDensity | null) || 'default'
-    const storedFont = localStorage.getItem(KEY_FONT) || 'DM Sans'
+    const storedFont = localStorage.getItem(KEY_FONT) || 'System UI'
     const storedMotion = localStorage.getItem(KEY_MOTION) === 'true'
     let storedBrand = DEFAULT_BRAND
     try {

package/src/components/forms/FieldsPanel.tsx

@@ -23,7 +23,7 @@ import {
 } from '@dnd-kit/sortable'
 import { CSS } from '@dnd-kit/utilities'
 import { ChevronDown, GripVertical, Plus, Trash2 } from 'lucide-react'
-import * as Switch from '@radix-ui/react-switch'
+import { Toggle } from '../ui/Toggle.js'
 import { useId, useState } from 'react'
 import type { FormField, FormFieldType } from '../../lib/forms-service.js'
 import { FieldTypeBadge, FormsEmptyState } from './primitives.js'
@@ -353,14 +353,12 @@ function FieldEditor({
         <label htmlFor={reqId} className="text-foreground text-sm font-medium">
           Required
         </label>
-        <Switch.Root
+        <Toggle
           id={reqId}
           checked={field.required}
           onCheckedChange={(v) => onUpdate({ required: v })}
-          className="bg-input-background data-[state=checked]:bg-primary focus-visible:ring-ring relative h-[18px] w-8 shrink-0 rounded-full transition-colors focus-visible:ring-2 focus-visible:outline-none"
-        >
-          <Switch.Thumb className="bg-background block h-3.5 w-3.5 translate-x-0.5 rounded-full shadow-sm transition-transform data-[state=checked]:translate-x-[14px]" />
-        </Switch.Root>
+          aria-labelledby={reqId}
+        />
       </div>
     </div>
   )

package/src/components/forms/NotificationsPanel.tsx

@@ -6,7 +6,7 @@
  * autoresponder). Email delivery uses the configured email adapter when enabled.
  */
 import { useEffect, useState } from 'react'
-import * as Switch from '@radix-ui/react-switch'
+import { Toggle } from '../ui/Toggle.js'
 import { toast } from 'sonner'
 import {
   fetchNotificationSettings,
@@ -210,14 +210,7 @@ function ToggleRow({
         <span className="text-foreground block text-sm font-medium">{label}</span>
         <span className="text-muted-foreground block text-sm">{help}</span>
       </span>
-      <Switch.Root
-        checked={checked}
-        onCheckedChange={onChange}
-        aria-label={label}
-        className="bg-destructive data-[state=checked]:bg-success focus-visible:ring-ring relative h-[18px] w-8 shrink-0 rounded-full transition-colors focus-visible:ring-2 focus-visible:outline-none"
-      >
-        <Switch.Thumb className="bg-background block h-3.5 w-3.5 translate-x-0.5 rounded-full shadow-sm transition-transform data-[state=checked]:translate-x-[14px]" />
-      </Switch.Root>
+      <Toggle checked={checked} onCheckedChange={onChange} aria-label={label} />
     </div>
   )
 }

package/src/components/forms/WebhooksPanel.tsx

@@ -5,7 +5,7 @@
  * (Zapier Catch Hook, Make, custom CRM endpoints) and guides editors through
  * the default Zapier → Webhooks by Zapier → Catch Hook setup.
  */
-import * as Switch from '@radix-ui/react-switch'
+import { Toggle } from '../ui/Toggle.js'
 import { ExternalLink, Loader2, Plus, Trash2, Zap } from 'lucide-react'
 import { useEffect, useState } from 'react'
 import { toast } from 'sonner'
@@ -265,14 +265,12 @@ export function WebhooksPanel({ formId, formSlug }: { formId: string; formSlug:
                 </p>
               </div>
               <div className="flex shrink-0 flex-wrap items-center gap-2">
-                <Switch.Root
+                <Toggle
                   checked={webhook.enabled}
                   onCheckedChange={(v) => void toggleEnabled(webhook, v)}
                   aria-label={`Enable webhook ${webhook.url}`}
-                  className="bg-destructive data-[state=checked]:bg-success focus-visible:ring-ring relative h-[18px] w-8 rounded-full transition-colors focus-visible:ring-2 focus-visible:outline-none"
-                >
-                  <Switch.Thumb className="bg-background block h-3.5 w-3.5 translate-x-0.5 rounded-full shadow-sm transition-transform data-[state=checked]:translate-x-[14px]" />
-                </Switch.Root>
+                  variant="enabled"
+                />
                 <button
                   type="button"
                   className={btnSecondary}

package/src/components/seo/primitives.tsx

@@ -7,6 +7,7 @@
  */
 import type { ReactNode } from 'react'
 import { AlertTriangle, Loader2 } from 'lucide-react'
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '../ui/Card.js'
 import type { SeoGrade, SeoSeverity } from '../../lib/seo-service.js'
 
 // ─── Grade + severity styling ────────────────────────────────────────
@@ -159,18 +160,18 @@ export function SectionCard({
   className?: string
 }) {
   return (
-    <section className={`border-border bg-card rounded-lg border ${className}`}>
+    <Card padding="none" className={className} role="region">
       {(title || action) && (
-        <header className="border-border flex items-center justify-between gap-3 border-b px-4 py-3">
+        <CardHeader className="flex items-center justify-between gap-3">
           <div className="min-w-0">
-            {title && <h3 className="text-foreground text-base font-medium">{title}</h3>}
-            {description && <p className="text-muted-foreground mt-0.5 text-sm">{description}</p>}
+            {title && <CardTitle>{title}</CardTitle>}
+            {description && <CardDescription>{description}</CardDescription>}
           </div>
           {action}
-        </header>
+        </CardHeader>
       )}
-      <div className="p-4">{children}</div>
-    </section>
+      <CardContent className={title || action ? 'pt-0' : ''}>{children}</CardContent>
+    </Card>
   )
 }
 

package/src/components/ui/Button.tsx

@@ -5,7 +5,7 @@ import { cv, type VariantProps } from '../../lib/cv.js'
 
 const button = cv(
   // Base classes apply to every variant.
-  'focus-visible:ring-offset-background inline-flex items-center justify-center gap-2 rounded-[var(--radius)] font-medium transition-colors focus-visible:ring-2 focus-visible:ring-[var(--ring)] focus-visible:ring-offset-2 focus-visible:outline-none disabled:pointer-events-none disabled:opacity-50',
+  'focus-visible:ring-offset-background inline-flex items-center justify-center gap-2 rounded-[var(--r-control)] font-medium transition-colors duration-[var(--motion-fast)] focus-visible:ring-2 focus-visible:ring-[var(--ring)] focus-visible:ring-offset-2 focus-visible:outline-none disabled:pointer-events-none disabled:opacity-50',
   {
     variants: {
       variant: {

package/src/components/ui/Card.tsx

@@ -2,29 +2,31 @@ import { forwardRef, type HTMLAttributes, type ReactNode } from 'react'
 import { cv, type VariantProps } from '../../lib/cv.js'
 
 const card = cv(
-  'rounded-[var(--radius)] border border-[var(--border)] bg-[var(--card)] text-[var(--card-foreground)]',
+  'overflow-hidden rounded-[var(--r)] border border-[var(--bdr)] bg-[var(--card)] text-[var(--txt)]',
   {
     variants: {
       padding: {
         none: 'p-0',
-        sm: 'p-4',
-        md: 'p-6',
-        lg: 'p-8',
+        /** Stat / compact surfaces (`.dstat`). */
+        sm: 'px-4 py-3.5',
+        /** Simple padded panel (`.dcard-b`). */
+        md: 'px-[18px] py-4',
+        lg: 'px-[18px] py-6',
       },
       elevation: {
         flat: 'shadow-none',
-        sm: 'shadow-sm',
-        md: 'shadow-md',
-        lg: 'shadow-lg',
+        resting: 'shadow-[var(--shd)]',
+        elevated: 'shadow-[var(--shd2)]',
       },
     },
-    defaultVariants: { padding: 'md', elevation: 'sm' },
+    defaultVariants: { padding: 'none', elevation: 'resting' },
   },
 )
 
 export type CardVariants = VariantProps<typeof card>
 
-const INTERACTIVE_CLASS = 'transition-shadow hover:shadow-md focus-within:shadow-md'
+const INTERACTIVE_CLASS =
+  'motion-safe:transition-shadow motion-safe:duration-[var(--motion-fast)] hover:shadow-[var(--shd2)] focus-within:shadow-[var(--shd2)]'
 
 export interface CardProps extends HTMLAttributes<HTMLDivElement>, CardVariants {
   /** Apply hover/focus elevation transitions (e.g. for clickable cards). */
@@ -44,12 +46,20 @@ export const Card = forwardRef<HTMLDivElement, CardProps>(function Card(
   )
 })
 
-/**
- * Header slot — sits at the top of a card. Pair with CardTitle / CardDescription.
- */
-export function CardHeader({ className = '', children, ...rest }: HTMLAttributes<HTMLDivElement>) {
+/** Header slot — `.dcard-h` in the design system handoff. */
+export function CardHeader({
+  className = '',
+  bordered = true,
+  children,
+  ...rest
+}: HTMLAttributes<HTMLDivElement> & { bordered?: boolean }) {
   return (
-    <div className={`flex flex-col space-y-1.5 ${className}`} {...rest}>
+    <div
+      className={[bordered ? 'border-b border-[var(--bdr)] px-[18px] py-[14px]' : '', className]
+        .filter(Boolean)
+        .join(' ')}
+      {...rest}
+    >
       {children}
     </div>
   )
@@ -62,7 +72,7 @@ export function CardTitle({
 }: HTMLAttributes<HTMLHeadingElement>) {
   return (
     <h3
-      className={`text-lg leading-tight font-medium tracking-tight text-[var(--card-foreground)] ${className}`}
+      className={`text-[length:var(--fs-card)] font-semibold text-[var(--txt)] ${className}`}
       {...rest}
     >
       {children}
@@ -76,15 +86,19 @@ export function CardDescription({
   ...rest
 }: HTMLAttributes<HTMLParagraphElement>) {
   return (
-    <p className={`text-sm text-[var(--muted-foreground)] ${className}`} {...rest}>
+    <p className={`mt-px text-[length:var(--fs-hint)] text-[var(--muted)] ${className}`} {...rest}>
       {children}
     </p>
   )
 }
 
+/** Body slot — `.dcard-b` in the design system handoff. */
 export function CardContent({ className = '', children, ...rest }: HTMLAttributes<HTMLDivElement>) {
   return (
-    <div className={className} {...rest}>
+    <div
+      className={`px-[18px] py-4 text-[length:var(--fs-body)] leading-[1.55] text-[var(--sub)] ${className}`}
+      {...rest}
+    >
       {children}
     </div>
   )
@@ -92,7 +106,10 @@ export function CardContent({ className = '', children, ...rest }: HTMLAttribute
 
 export function CardFooter({ className = '', children, ...rest }: HTMLAttributes<HTMLDivElement>) {
   return (
-    <div className={`flex items-center justify-end gap-2 pt-4 ${className}`} {...rest}>
+    <div
+      className={`flex items-center justify-end gap-2 border-t border-[var(--bdr)] px-[18px] py-3 ${className}`}
+      {...rest}
+    >
       {children}
     </div>
   )

package/src/components/ui/Input.tsx

@@ -1,24 +1,22 @@
 import { forwardRef, type InputHTMLAttributes } from 'react'
 import { cv, type VariantProps } from '../../lib/cv.js'
+import { formControlBase, formControlState } from './form-control.js'
 
-const input = cv(
-  'focus-visible:ring-offset-background flex w-full rounded-[var(--radius)] border bg-[var(--background)] text-[var(--foreground)] file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-[var(--muted-foreground)] focus-visible:ring-2 focus-visible:ring-[var(--ring)] focus-visible:ring-offset-2 focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50',
-  {
-    variants: {
-      size: {
-        sm: 'h-8 px-2.5 text-xs',
-        md: 'h-9 px-3 text-sm',
-        lg: 'h-10 px-4 text-base',
-      },
-      state: {
-        default: 'border-[var(--border)]',
-        invalid: 'border-[var(--destructive)] focus-visible:ring-[var(--destructive)]',
-        valid: 'border-emerald-500 focus-visible:ring-emerald-500',
-      },
+const input = cv(formControlBase, {
+  variants: {
+    size: {
+      sm: 'py-1.5 text-[length:var(--fs-sub)]',
+      md: '',
+      lg: 'py-2.5 text-[length:var(--fs-body)]',
+    },
+    state: {
+      default: formControlState.default,
+      invalid: formControlState.invalid,
+      valid: formControlState.valid,
     },
-    defaultVariants: { size: 'md', state: 'default' },
   },
-)
+  defaultVariants: { size: 'md', state: 'default' },
+})
 
 export type InputVariants = VariantProps<typeof input>
 
@@ -32,4 +30,4 @@ export const Input = forwardRef<HTMLInputElement, InputProps>(function Input(
   return <input ref={ref} className={input({ size, state, class: className })} {...rest} />
 })
 
-export { input as inputVariants }
+export { input as inputVariants, formControlBase, formControlState }

package/src/components/ui/SearchInput.tsx

@@ -1,5 +1,7 @@
 'use client'
 
+import { inputVariants } from './Input.js'
+
 export interface SearchInputProps {
   value: string
   onChange: (value: string) => void
@@ -10,11 +12,12 @@ export function SearchInput({ value, onChange, placeholder = 'Search...' }: Sear
   return (
     <div className="relative flex-1">
       <svg
-        className="absolute top-1/2 left-3 h-4 w-4 -translate-y-1/2 text-[var(--muted-foreground)]"
+        className="absolute top-1/2 left-3 h-4 w-4 -translate-y-1/2 text-[var(--muted)]"
         fill="none"
         viewBox="0 0 24 24"
         stroke="currentColor"
         strokeWidth={2}
+        aria-hidden
       >
         <path
           strokeLinecap="round"
@@ -27,12 +30,13 @@ export function SearchInput({ value, onChange, placeholder = 'Search...' }: Sear
         value={value}
         onChange={(e) => onChange(e.target.value)}
         placeholder={placeholder}
-        className="w-full rounded-md border border-[var(--border)] bg-[var(--input-background)] py-2 pr-8 pl-9 text-sm outline-none focus:ring-2 focus:ring-[var(--ring)]"
+        className={inputVariants({ class: 'py-2 pr-8 pl-9' })}
       />
       {value && (
         <button
+          type="button"
           onClick={() => onChange('')}
-          className="absolute top-1/2 right-2 -translate-y-1/2 rounded p-0.5 text-[var(--muted-foreground)] hover:text-[var(--foreground)]"
+          className="absolute top-1/2 right-2 -translate-y-1/2 rounded p-0.5 text-[var(--muted)] hover:text-[var(--txt)]"
           aria-label="Clear search"
         >
           <svg
@@ -41,12 +45,13 @@ export function SearchInput({ value, onChange, placeholder = 'Search...' }: Sear
             viewBox="0 0 24 24"
             stroke="currentColor"
             strokeWidth={2}
+            aria-hidden
           >
             <path strokeLinecap="round" strokeLinejoin="round" d="M6 18L18 6M6 6l12 12" />
           </svg>
         </button>
       )}
-      <kbd className="pointer-events-none absolute top-1/2 right-8 hidden -translate-y-1/2 rounded border border-[var(--border)] px-1.5 py-0.5 text-[10px] text-[var(--muted-foreground)] sm:inline-block">
+      <kbd className="pointer-events-none absolute top-1/2 right-8 hidden -translate-y-1/2 rounded border border-[var(--bdr)] px-1.5 py-0.5 text-[10px] text-[var(--muted)] sm:inline-block">
         ⌘K
       </kbd>
     </div>

package/src/components/ui/Select.tsx

@@ -1,25 +1,22 @@
 import { forwardRef, type SelectHTMLAttributes, type ReactNode } from 'react'
 import { cv, type VariantProps } from '../../lib/cv.js'
+import { formControlBase, formControlState } from './form-control.js'
 
-const select = cv(
-  // Shares geometry with Input so they line up in forms.
-  'focus-visible:ring-offset-background flex w-full appearance-none rounded-[var(--radius)] border bg-[var(--background)] pr-8 text-[var(--foreground)] focus-visible:ring-2 focus-visible:ring-[var(--ring)] focus-visible:ring-offset-2 focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50',
-  {
-    variants: {
-      size: {
-        sm: 'h-8 pr-7 pl-2.5 text-xs',
-        md: 'h-9 pr-8 pl-3 text-sm',
-        lg: 'h-10 pr-9 pl-4 text-base',
-      },
-      state: {
-        default: 'border-[var(--border)]',
-        invalid: 'border-[var(--destructive)] focus-visible:ring-[var(--destructive)]',
-        valid: 'border-emerald-500 focus-visible:ring-emerald-500',
-      },
+const select = cv(`${formControlBase} appearance-none pr-8`, {
+  variants: {
+    size: {
+      sm: 'py-1.5 pr-7 pl-3 text-[length:var(--fs-sub)]',
+      md: '',
+      lg: 'py-2.5 pr-9 pl-3',
+    },
+    state: {
+      default: formControlState.default,
+      invalid: formControlState.invalid,
+      valid: formControlState.valid,
     },
-    defaultVariants: { size: 'md', state: 'default' },
   },
-)
+  defaultVariants: { size: 'md', state: 'default' },
+})
 
 export type SelectVariants = VariantProps<typeof select>
 
@@ -39,7 +36,7 @@ export const Select = forwardRef<HTMLSelectElement, SelectProps>(function Select
       </select>
       <svg
         aria-hidden
-        className="pointer-events-none absolute top-1/2 right-2 h-4 w-4 -translate-y-1/2 text-[var(--muted-foreground)]"
+        className="pointer-events-none absolute top-1/2 right-2 h-4 w-4 -translate-y-1/2 text-[var(--muted)]"
         viewBox="0 0 20 20"
         fill="currentColor"
       >

package/src/components/ui/Toggle.tsx

@@ -0,0 +1,85 @@
+'use client'
+
+import * as Switch from '@radix-ui/react-switch'
+import { cv, type VariantProps } from '../../lib/cv.js'
+
+const toggleTrack = cv(
+  'relative inline-flex shrink-0 cursor-pointer rounded-[var(--r-pill)] transition-colors duration-[var(--motion-base)] focus-visible:ring-2 focus-visible:ring-[var(--ring)] focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50',
+  {
+    variants: {
+      variant: {
+        /** Design system default — accent when on. */
+        accent: 'bg-[var(--bdr)] data-[state=checked]:bg-[var(--acc)]',
+        /** Semantic enable/disable — success green when on (tables, script tags). */
+        enabled: 'bg-[var(--bdr)] data-[state=checked]:bg-[var(--suc)]',
+      },
+      size: {
+        /** Matches `.tog-track` in the design system handoff (38×21). */
+        md: 'h-[21px] w-[38px]',
+      },
+    },
+    defaultVariants: {
+      variant: 'accent',
+      size: 'md',
+    },
+  },
+)
+
+const toggleThumb = cv(
+  'pointer-events-none block rounded-full bg-white shadow-[0_1px_3px_rgba(0,0,0,0.2)] transition-transform duration-[var(--motion-base)]',
+  {
+    variants: {
+      size: {
+        md: 'h-4 w-4 translate-x-0.5 data-[state=checked]:translate-x-[17.5px]',
+      },
+    },
+    defaultVariants: {
+      size: 'md',
+    },
+  },
+)
+
+export type ToggleVariants = VariantProps<typeof toggleTrack>
+
+export interface ToggleProps extends ToggleVariants {
+  checked: boolean
+  onCheckedChange: (checked: boolean) => void
+  disabled?: boolean
+  id?: string
+  'aria-label'?: string
+  'aria-labelledby'?: string
+  'aria-describedby'?: string
+}
+
+/**
+ * Design-system toggle (`.tog-track` / `.tog-thumb`). Use `variant="enabled"`
+ * for on/off tables where green communicates active state.
+ */
+export function Toggle({
+  checked,
+  onCheckedChange,
+  disabled,
+  variant,
+  size,
+  id,
+  'aria-label': ariaLabel,
+  'aria-labelledby': ariaLabelledBy,
+  'aria-describedby': ariaDescribedBy,
+}: ToggleProps) {
+  return (
+    <Switch.Root
+      id={id}
+      checked={checked}
+      onCheckedChange={onCheckedChange}
+      disabled={disabled}
+      aria-label={ariaLabel}
+      aria-labelledby={ariaLabelledBy}
+      aria-describedby={ariaDescribedBy}
+      className={toggleTrack({ variant, size })}
+    >
+      <Switch.Thumb className={toggleThumb({ size })} />
+    </Switch.Root>
+  )
+}
+
+export { toggleTrack as toggleTrackVariants, toggleThumb as toggleThumbVariants }