@actuate-media/cms-admin 0.63.1 → 0.64.0

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 }

package/src/components/ui/form-control.ts

@@ -0,0 +1,12 @@
+/**
+ * Shared form-control surface styles (`.inp` in the design system handoff).
+ * Imported by Input and Select so geometry stays aligned.
+ */
+export const formControlBase =
+  'w-full rounded-[var(--r-control)] border border-[var(--bdr)] bg-[var(--bg)] px-3 py-[9px] text-[length:var(--fs-body)] text-[var(--txt)] outline-none transition-[border-color] duration-150 placeholder:text-[var(--muted)] focus:border-[var(--acc-m)] focus-visible:border-[var(--acc-m)] disabled:cursor-not-allowed disabled:opacity-50'
+
+export const formControlState = {
+  default: '',
+  invalid: 'border-[var(--err)] focus:border-[var(--err)] focus-visible:border-[var(--err)]',
+  valid: 'border-[var(--suc)] focus:border-[var(--suc)] focus-visible:border-[var(--suc)]',
+} as const

package/src/components/ui/index.ts

@@ -34,5 +34,8 @@ export { Pagination } from './Pagination.js'
 export type { PaginationProps } from './Pagination.js'
 export { SearchInput } from './SearchInput.js'
 export type { SearchInputProps } from './SearchInput.js'
+export { Toggle, toggleTrackVariants, toggleThumbVariants } from './Toggle.js'
+export type { ToggleProps, ToggleVariants } from './Toggle.js'
+export { formControlBase, formControlState } from './form-control.js'
 export { CommandPalette } from './CommandPalette.js'
 export type { CommandPaletteProps } from './CommandPalette.js'

package/src/layout/Header.tsx

@@ -8,6 +8,7 @@ import { CommandPalette } from '../components/CommandPalette.js'
 import { NotificationBell } from '../components/NotificationBell.js'
 import { useTheme } from '../components/ThemeProvider.js'
 import { LocaleSwitcher } from '../components/LocaleSwitcher.js'
+import { inputVariants } from '../components/ui/Input.js'
 
 export interface HeaderProps {
   onToggleSidebar: () => void
@@ -51,7 +52,7 @@ export function Header({
 
   return (
     <>
-      <header className="border-border bg-background flex h-14 items-center gap-3 border-b px-4">
+      <header className="border-sidebar-border bg-sidebar flex h-[var(--tbh)] items-center gap-3 border-b px-4">
         <button
           onClick={onToggleSidebar}
           className="hover:bg-accent rounded-lg p-2 transition-colors md:hidden"
@@ -77,7 +78,10 @@ export function Header({
             onKeyDown={(e) => {
               if (e.key === 'Escape') (e.target as HTMLInputElement).blur()
             }}
-            className="border-border bg-input-background text-foreground placeholder:text-muted-foreground focus:ring-ring h-9 w-full max-w-md rounded-lg border py-1.5 pr-14 pl-9 text-sm focus:border-transparent focus:ring-2 focus:outline-none"
+            className={inputVariants({
+              class:
+                'h-9 w-full max-w-md py-1.5 pr-14 pl-9 focus-visible:ring-0 focus-visible:ring-offset-0',
+            })}
           />
           {/* Keyboard hint pill. Hidden on narrow widths to avoid overlap. */}
           <span

package/src/layout/Sidebar.tsx

@@ -253,13 +253,13 @@ export function Sidebar({
 
   return (
     <aside
-      className={`bg-sidebar border-sidebar-border flex h-full flex-col border-r transition-all duration-200 ${
-        collapsed ? 'w-20' : 'w-64'
+      className={`bg-sidebar border-sidebar-border flex h-full flex-col border-r transition-[width] duration-[var(--motion-layout)] ${
+        collapsed ? 'w-[var(--sbw-col)]' : 'w-[var(--sbw)]'
       }`}
     >
       {/* Brand header — no toggle button here anymore; it now lives in the footer. */}
       <div
-        className={`border-sidebar-border flex h-14 shrink-0 items-center border-b px-4 ${
+        className={`border-sidebar-border flex h-[var(--tbh)] shrink-0 items-center border-b px-4 ${
           collapsed ? 'justify-center' : ''
         }`}
       >

package/src/layout/primitives/tokens.ts

@@ -49,13 +49,20 @@ export const tokens = {
 
   radius: {
     none: 0,
-    sm: 2,
-    md: 6,
-    lg: 8,
+    sm: 6,
+    md: 8,
+    lg: 10,
     xl: 12,
-    full: 9999,
+    full: 99,
   } as const satisfies Record<RadiusToken, number>,
 
+  /** Layout dimensions from the design system (px). */
+  layout: {
+    sidebarWidth: 224,
+    sidebarWidthCollapsed: 60,
+    topbarHeight: 56,
+  } as const,
+
   // Breakpoints mirror Tailwind defaults so primitives can compose with
   // utility classes without surprises. Use `matchMedia(`(min-width: …`)` to
   // sync JS-driven layout decisions with these values.

package/src/styles/actuate-tokens.css

@@ -0,0 +1,97 @@
+/*
+ * ActuateCMS design tokens — scoped to the admin root.
+ * Source: design-system/tokens.json (v1.0).
+ * Appearance accent overrides set --acc / --primary at runtime.
+ */
+
+.actuate-admin {
+  /* Surfaces */
+  --bg: #f5f4fa;
+  --sb: #ffffff;
+  --card: #ffffff;
+  --bdr: #e8e6f2;
+
+  /* Text */
+  --txt: #1a1827;
+  --sub: #6b6878;
+  --muted: #b0adbe;
+
+  /* Accent */
+  --acc: #7c3aed;
+  --acc-l: #ede9fe;
+  --acc-m: #c4b5fd;
+
+  /* Semantic */
+  --suc: #059669;
+  --suc-l: #ecfdf5;
+  --warn: #d97706;
+  --warn-l: #fffbeb;
+  --err: #dc2626;
+  --err-l: #fef2f2;
+  --info: #0891b2;
+  --info-l: #e0f7fa;
+
+  /* AI */
+  --ai1: #7c3aed;
+  --ai2: #c026d3;
+  --ai-soft: linear-gradient(135deg, rgba(124, 58, 237, 0.09), rgba(192, 38, 211, 0.07));
+
+  /* Layout */
+  --sbw: 224px;
+  --sbw-col: 60px;
+  --tbh: 56px;
+  --r: 10px;
+  --r-control: 8px;
+  --r-sm: 6px;
+  --r-pill: 99px;
+
+  /* Elevation */
+  --shd: 0 1px 2px rgba(0, 0, 0, 0.05), 0 1px 4px rgba(0, 0, 0, 0.04);
+  --shd2: 0 4px 16px rgba(0, 0, 0, 0.1);
+
+  /* Typography */
+  --font-sans: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+  --font-mono: 'DM Mono', ui-monospace, 'SFMono-Regular', monospace;
+  --fs-page: 21px;
+  --fs-card: 14px;
+  --fs-body: 13px;
+  --fs-sub: 12px;
+  --fs-hint: 11.5px;
+  --fs-label: 10px;
+
+  /* Motion */
+  --motion-fast: 0.12s;
+  --motion-base: 0.18s;
+  --motion-layout: 0.22s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.dark .actuate-admin,
+.actuate-admin.dark,
+.actuate-admin[data-theme='dark'] {
+  --bg: #0d0c18;
+  --sb: #141222;
+  --card: #1c1a2e;
+  --bdr: #2c2a42;
+
+  --txt: #eae8f5;
+  --sub: #8e8ba8;
+  --muted: #504e68;
+
+  --acc: #9d71f0;
+  --acc-l: #231950;
+  --acc-m: #5e3eaa;
+
+  --suc: #10b981;
+  --suc-l: #022c22;
+  --warn: #fbbf24;
+  --warn-l: #1a1000;
+  --err: #f87171;
+  --err-l: #200808;
+  --info: #38bdf8;
+  --info-l: #0a2838;
+
+  --ai-soft: linear-gradient(135deg, rgba(157, 113, 240, 0.16), rgba(192, 38, 211, 0.12));
+
+  --shd: 0 1px 2px rgba(0, 0, 0, 0.3), 0 1px 4px rgba(0, 0, 0, 0.2);
+  --shd2: 0 4px 20px rgba(0, 0, 0, 0.45);
+}