@actuate-media/cms-admin 0.63.2 → 0.65.0

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/forms/primitives.tsx

@@ -9,6 +9,7 @@
  */
 import type { ReactNode } from 'react'
 import { AlertTriangle, ChevronLeft, ChevronRight, Loader2 } from 'lucide-react'
+import { StatusBadge, type StatusBadgeTone } from '../ui/StatusBadge.js'
 import type { FormFieldType, FormStatus } from '../../lib/forms-service.js'
 
 // ─── Field-type badges ─────────────────────────────────────────────────────
@@ -70,26 +71,15 @@ export function FieldTypeBadge({ type }: { type: FormFieldType }) {
 
 // ─── Status badges ─────────────────────────────────────────────────────────
 
-const STATUS_META: Record<FormStatus, { label: string; cls: string; dot: string }> = {
-  active: { label: 'Active', cls: 'bg-success/10 text-success', dot: 'bg-success' },
-  draft: { label: 'Draft', cls: 'bg-warning/10 text-warning', dot: 'bg-warning' },
-  archived: {
-    label: 'Archived',
-    cls: 'bg-muted text-muted-foreground',
-    dot: 'bg-muted-foreground',
-  },
+const STATUS_META: Record<FormStatus, { label: string; tone: StatusBadgeTone }> = {
+  active: { label: 'Active', tone: 'success' },
+  draft: { label: 'Draft', tone: 'warning' },
+  archived: { label: 'Archived', tone: 'muted' },
 }
 
 export function FormStatusBadge({ status }: { status: FormStatus }) {
   const meta = STATUS_META[status] ?? STATUS_META.draft
-  return (
-    <span
-      className={`inline-flex items-center gap-1.5 rounded-full px-2.5 py-0.5 text-xs font-medium ${meta.cls}`}
-    >
-      <span className={`h-1.5 w-1.5 rounded-full ${meta.dot}`} aria-hidden />
-      {meta.label}
-    </span>
-  )
+  return <StatusBadge tone={meta.tone}>{meta.label}</StatusBadge>
 }
 
 /** Small red count badge for unread submissions. Hidden when count is 0. */

package/src/components/posts/badges.tsx

@@ -1,6 +1,7 @@
 'use client'
 
 import type { ReactNode } from 'react'
+import { StatusBadge, type StatusBadgeTone } from '../ui/StatusBadge.js'
 import type { PostStatus } from '../../lib/posts-service.js'
 
 /**
@@ -65,32 +66,18 @@ const STATUS_LABEL: Record<PostStatus, string> = {
   ARCHIVED: 'Archived',
 }
 
-const STATUS_PALETTE: Record<PostStatus, string> = {
-  PUBLISHED: 'green',
-  DRAFT: 'gray',
-  SCHEDULED: 'orange',
-  ARCHIVED: 'gray',
-}
-
-const STATUS_GLYPH: Record<PostStatus, string> = {
-  PUBLISHED: '●',
-  DRAFT: '○',
-  SCHEDULED: '◐',
-  ARCHIVED: '◌',
+const STATUS_TONE: Record<PostStatus, StatusBadgeTone> = {
+  PUBLISHED: 'success',
+  DRAFT: 'neutral',
+  SCHEDULED: 'warning',
+  ARCHIVED: 'muted',
 }
 
 export function PostStatusBadge({ status }: { status: PostStatus }) {
-  const p = paletteFor(STATUS_PALETTE[status])
   return (
-    <span
-      className={`inline-flex items-center gap-1.5 rounded-full px-2 py-0.5 text-xs font-medium ${p.bg} ${p.text}`}
-      aria-label={`Status: ${STATUS_LABEL[status]}`}
-    >
-      <span aria-hidden className="text-[10px] leading-none">
-        {STATUS_GLYPH[status]}
-      </span>
+    <StatusBadge tone={STATUS_TONE[status]} aria-label={`Status: ${STATUS_LABEL[status]}`}>
       {STATUS_LABEL[status]}
-    </span>
+    </StatusBadge>
   )
 }
 

package/src/components/seo/RedirectEditorDrawer.tsx

@@ -11,6 +11,7 @@ import {
 } from '../../lib/seo-service.js'
 import { Drawer } from './Drawer.js'
 import { btnPrimary, btnSecondary } from './primitives.js'
+import { Toggle } from '../ui/Toggle.js'
 
 const STATUS_CODES: { value: RedirectStatusCode; label: string }[] = [
   { value: 301, label: '301 — Permanent' },
@@ -197,19 +198,17 @@ export function RedirectEditorDrawer({
         </div>
 
         <div className="border-border space-y-3 rounded-lg border p-4">
-          <label className="flex items-center justify-between gap-3">
+          <div className="flex items-center justify-between gap-3">
             <span className="text-foreground text-sm font-medium">Enabled</span>
-            <input
-              type="checkbox"
-              role="switch"
-              aria-checked={!!form.enabled}
+            <Toggle
               checked={!!form.enabled}
-              onChange={(e) => update({ enabled: e.target.checked })}
-              className="accent-primary h-4 w-4"
+              onCheckedChange={(v) => update({ enabled: v })}
+              variant="enabled"
+              aria-label="Enabled"
             />
-          </label>
+          </div>
           {!isGone && (
-            <label className="flex items-center justify-between gap-3">
+            <div className="flex items-center justify-between gap-3">
               <span className="min-w-0">
                 <span className="text-foreground block text-sm font-medium">
                   Preserve query string
@@ -218,15 +217,12 @@ export function RedirectEditorDrawer({
                   Append the original query params to the destination.
                 </span>
               </span>
-              <input
-                type="checkbox"
-                role="switch"
-                aria-checked={!!form.preserveQuery}
+              <Toggle
                 checked={!!form.preserveQuery}
-                onChange={(e) => update({ preserveQuery: e.target.checked })}
-                className="accent-primary h-4 w-4 shrink-0"
+                onCheckedChange={(v) => update({ preserveQuery: v })}
+                aria-label="Preserve query string"
               />
-            </label>
+            </div>
           )}
         </div>
       </div>

package/src/components/seo/SeoEditorDrawer.tsx

@@ -17,6 +17,7 @@ import { fixBrandVoiceContent } from '../../lib/brand-voice-client.js'
 import { BrandVoiceAlignmentBadge } from '../BrandVoiceAlignmentBadge.js'
 import { Drawer } from './Drawer.js'
 import { SeoLoading, SeoErrorState, btnPrimary, btnSecondary, gradeMeta } from './primitives.js'
+import { Toggle } from '../ui/Toggle.js'
 
 const META_TITLE_MAX = 60
 const META_DESC_MAX = 160
@@ -422,38 +423,32 @@ export function SeoEditorDrawer({
 
           {/* Indexing toggles */}
           <div className="border-border space-y-3 rounded-lg border p-4">
-            <label className="flex items-center justify-between gap-3">
+            <div className="flex items-center justify-between gap-3">
               <span className="min-w-0">
                 <span className="text-foreground block text-sm font-medium">No-index</span>
                 <span className="text-muted-foreground block text-sm">
                   Hide this page from search engines.
                 </span>
               </span>
-              <input
-                type="checkbox"
-                role="switch"
-                aria-checked={!!form.noindex}
+              <Toggle
                 checked={!!form.noindex}
-                onChange={(e) => update({ noindex: e.target.checked })}
-                className="accent-primary h-4 w-4"
+                onCheckedChange={(v) => update({ noindex: v })}
+                aria-label="No-index"
               />
-            </label>
-            <label className="flex items-center justify-between gap-3">
+            </div>
+            <div className="flex items-center justify-between gap-3">
               <span className="min-w-0">
                 <span className="text-foreground block text-sm font-medium">No-follow</span>
                 <span className="text-muted-foreground block text-sm">
                   Tell crawlers not to follow links on this page.
                 </span>
               </span>
-              <input
-                type="checkbox"
-                role="switch"
-                aria-checked={!!form.nofollow}
+              <Toggle
                 checked={!!form.nofollow}
-                onChange={(e) => update({ nofollow: e.target.checked })}
-                className="accent-primary h-4 w-4"
+                onCheckedChange={(v) => update({ nofollow: v })}
+                aria-label="No-follow"
               />
-            </label>
+            </div>
           </div>
 
           {/* llms.txt curation */}
@@ -499,22 +494,19 @@ export function SeoEditorDrawer({
                 placeholder="Defaults to the content type"
               />
             </Field>
-            <label className="flex items-center justify-between gap-3">
+            <div className="flex items-center justify-between gap-3">
               <span className="min-w-0">
                 <span className="text-foreground block text-sm font-medium">Optional</span>
                 <span className="text-muted-foreground block text-sm">
                   Group under “Optional” — agents skip these first when context is tight.
                 </span>
               </span>
-              <input
-                type="checkbox"
-                role="switch"
-                aria-checked={!!form.llmsOptional}
+              <Toggle
                 checked={!!form.llmsOptional}
-                onChange={(e) => update({ llmsOptional: e.target.checked })}
-                className="accent-primary h-4 w-4"
+                onCheckedChange={(v) => update({ llmsOptional: v })}
+                aria-label="Optional in llms.txt"
               />
-            </label>
+            </div>
           </div>
 
           {/* Score summary */}

package/src/components/seo/primitives.tsx

@@ -7,6 +7,8 @@
  */
 import type { ReactNode } from 'react'
 import { AlertTriangle, Loader2 } from 'lucide-react'
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '../ui/Card.js'
+import { StatusBadge, type StatusBadgeTone } from '../ui/StatusBadge.js'
 import type { SeoGrade, SeoSeverity } from '../../lib/seo-service.js'
 
 // ─── Grade + severity styling ────────────────────────────────────────
@@ -72,6 +74,14 @@ export function severityMeta(severity: SeoSeverity): GradeMeta {
 
 // ─── Badges + bars ───────────────────────────────────────────────────
 
+const SEO_TONE: Record<'good' | 'fair' | 'poor' | 'critical' | 'neutral', StatusBadgeTone> = {
+  good: 'success',
+  fair: 'warning',
+  poor: 'danger',
+  critical: 'danger',
+  neutral: 'neutral',
+}
+
 export function SeoStatusBadge({
   label,
   tone,
@@ -79,33 +89,7 @@ export function SeoStatusBadge({
   label: string
   tone: 'good' | 'fair' | 'poor' | 'critical' | 'neutral'
 }) {
-  const cls =
-    tone === 'good'
-      ? 'bg-success/10 text-success'
-      : tone === 'fair'
-        ? 'bg-warning/10 text-warning'
-        : tone === 'poor' || tone === 'critical'
-          ? 'bg-destructive/10 text-destructive'
-          : 'bg-muted text-muted-foreground'
-  return (
-    <span
-      className={`inline-flex items-center gap-1.5 rounded-full px-2.5 py-0.5 text-xs font-medium ${cls}`}
-    >
-      <span
-        className={`h-1.5 w-1.5 rounded-full ${
-          tone === 'good'
-            ? 'bg-success'
-            : tone === 'fair'
-              ? 'bg-warning'
-              : tone === 'neutral'
-                ? 'bg-muted-foreground'
-                : 'bg-destructive'
-        }`}
-        aria-hidden
-      />
-      {label}
-    </span>
-  )
+  return <StatusBadge tone={SEO_TONE[tone]}>{label}</StatusBadge>
 }
 
 /** A horizontal score bar (0-100), coloured by grade. */
@@ -159,18 +143,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/FilterPill.tsx

@@ -0,0 +1,43 @@
+'use client'
+
+import type { ButtonHTMLAttributes, ReactNode } from 'react'
+
+/**
+ * Design-system filter pill (`.pill` / `.pill.act`): bordered card-surface
+ * chip that fills with the accent color when active. Used for status / role /
+ * category filter rows above list views.
+ */
+export interface FilterPillProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'type'> {
+  active?: boolean
+  /** Optional trailing count rendered in tabular numerals. */
+  count?: number
+  children: ReactNode
+}
+
+export function FilterPill({
+  active = false,
+  count,
+  className,
+  children,
+  ...rest
+}: FilterPillProps) {
+  return (
+    <button
+      type="button"
+      aria-pressed={active}
+      className={`inline-flex items-center gap-1.5 rounded-[7px] border px-3 py-1.5 text-[12.5px] font-medium transition-colors duration-[var(--motion-fast)] focus-visible:ring-2 focus-visible:ring-[var(--ring)] focus-visible:outline-none ${
+        active
+          ? 'border-[var(--acc)] bg-[var(--acc)] text-white'
+          : 'border-[var(--bdr)] bg-[var(--card)] text-[var(--sub)] hover:border-[var(--acc-m)] hover:text-[var(--acc)]'
+      } ${className ?? ''}`}
+      {...rest}
+    >
+      {children}
+      {count !== undefined && (
+        <span className={`tabular-nums ${active ? 'text-white/80' : 'text-[var(--muted)]'}`}>
+          {count}
+        </span>
+      )}
+    </button>
+  )
+}

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 }