@countermeasure-platform/web-components 0.2.0

package/src/react/primitives/spinner.tsx

@@ -0,0 +1,39 @@
+import * as React from 'react'
+
+import { cn } from './utils'
+
+type SpinnerSize = 'sm' | 'md' | 'lg'
+
+interface SpinnerProps extends React.ComponentProps<'span'> {
+  /** Size of the spinner */
+  size?: SpinnerSize
+}
+
+const sizeClasses: Record<SpinnerSize, string> = {
+  sm: 'h-4 w-4 border-2',
+  md: 'h-6 w-6 border-2',
+  lg: 'h-8 w-8 border-[3px]',
+}
+
+function Spinner({ className, size = 'md', ...props }: SpinnerProps) {
+  return (
+    <span
+      data-slot="spinner"
+      role="status"
+      className={cn('inline-flex items-center justify-center', className)}
+      {...props}
+    >
+      <span
+        className={cn(
+          'border-primary/30 border-t-primary animate-spin rounded-full',
+          sizeClasses[size]
+        )}
+        aria-hidden="true"
+      />
+      <span className="sr-only">Loading...</span>
+    </span>
+  )
+}
+
+export { Spinner }
+export type { SpinnerProps, SpinnerSize }

package/src/react/primitives/split-pane.tsx

@@ -0,0 +1,160 @@
+import * as React from 'react'
+
+import { cn } from './utils'
+
+/* ------------------------------------------------------------------ */
+/* Types                                                               */
+/* ------------------------------------------------------------------ */
+
+export type SplitOrientation = 'horizontal' | 'vertical'
+
+export interface SplitPaneProps extends Omit<React.ComponentProps<'div'>, 'children'> {
+  /** Layout orientation */
+  orientation?: SplitOrientation
+  /** Default size of the first pane as a percentage (0-100) */
+  defaultSize?: number
+  /** Minimum size of each pane in pixels */
+  minSize?: number
+  /** Gutter (divider) width in pixels */
+  gutterSize?: number
+  /** Callback fired during resize with first pane's size percentage */
+  onResize?: (size: number) => void
+  /** The two panes as children */
+  children: [React.ReactNode, React.ReactNode]
+}
+
+/* ------------------------------------------------------------------ */
+/* Component                                                           */
+/* ------------------------------------------------------------------ */
+
+function SplitPane({
+  className,
+  orientation = 'horizontal',
+  defaultSize = 50,
+  minSize = 0,
+  gutterSize = 4,
+  onResize,
+  children,
+  ...props
+}: SplitPaneProps) {
+  const [firstSize, setFirstSize] = React.useState(defaultSize)
+  const containerRef = React.useRef<HTMLDivElement>(null)
+  const isDragging = React.useRef(false)
+
+  const handleMouseDown = React.useCallback(
+    (e: React.MouseEvent) => {
+      e.preventDefault()
+      isDragging.current = true
+
+      const handleMouseMove = (event: MouseEvent) => {
+        if (!isDragging.current || !containerRef.current) return
+
+        const rect = containerRef.current.getBoundingClientRect()
+        let ratio: number
+
+        if (orientation === 'horizontal') {
+          const x = event.clientX - rect.left
+          ratio = rect.width > 0 ? (x / rect.width) * 100 : 50
+        } else {
+          const y = event.clientY - rect.top
+          ratio = rect.height > 0 ? (y / rect.height) * 100 : 50
+        }
+
+        // Enforce min sizes
+        const totalPx = orientation === 'horizontal' ? rect.width : rect.height
+        const minPercent = totalPx > 0 ? (minSize / totalPx) * 100 : 0
+        const clamped = Math.max(minPercent, Math.min(100 - minPercent, ratio))
+
+        setFirstSize(clamped)
+        onResize?.(clamped)
+      }
+
+      const handleMouseUp = () => {
+        isDragging.current = false
+        document.removeEventListener('mousemove', handleMouseMove)
+        document.removeEventListener('mouseup', handleMouseUp)
+      }
+
+      document.addEventListener('mousemove', handleMouseMove)
+      document.addEventListener('mouseup', handleMouseUp)
+    },
+    [orientation, minSize, onResize]
+  )
+
+  const isHorizontal = orientation === 'horizontal'
+  const [first, second] = children
+
+  return (
+    <div
+      ref={containerRef}
+      data-slot="split-pane"
+      className={cn('flex h-full w-full', isHorizontal ? 'flex-row' : 'flex-col', className)}
+      {...props}
+    >
+      {/* First pane */}
+      <div
+        data-slot="split-pane-panel"
+        className="overflow-auto"
+        style={{
+          [isHorizontal ? 'width' : 'height']:
+            `calc(${String(firstSize)}% - ${String(gutterSize / 2)}px)`,
+          flexShrink: 0,
+        }}
+      >
+        {first}
+      </div>
+
+      {/* Gutter */}
+      <div
+        data-slot="split-pane-gutter"
+        className={cn(
+          'shrink-0 bg-border-glass transition-colors hover:bg-primary/40',
+          isHorizontal ? 'cursor-col-resize' : 'cursor-row-resize'
+        )}
+        style={{
+          [isHorizontal ? 'width' : 'height']: `${String(gutterSize)}px`,
+        }}
+        onMouseDown={handleMouseDown}
+        role="separator"
+        aria-orientation={orientation}
+        aria-valuenow={Math.round(firstSize)}
+        aria-valuemin={0}
+        aria-valuemax={100}
+        tabIndex={0}
+        onKeyDown={e => {
+          const step = 2
+          if ((isHorizontal && e.key === 'ArrowLeft') || (!isHorizontal && e.key === 'ArrowUp')) {
+            e.preventDefault()
+            const next = Math.max(0, firstSize - step)
+            setFirstSize(next)
+            onResize?.(next)
+          }
+          if (
+            (isHorizontal && e.key === 'ArrowRight') ||
+            (!isHorizontal && e.key === 'ArrowDown')
+          ) {
+            e.preventDefault()
+            const next = Math.min(100, firstSize + step)
+            setFirstSize(next)
+            onResize?.(next)
+          }
+        }}
+      />
+
+      {/* Second pane */}
+      <div
+        data-slot="split-pane-panel"
+        className="overflow-auto"
+        style={{
+          [isHorizontal ? 'width' : 'height']:
+            `calc(${String(100 - firstSize)}% - ${String(gutterSize / 2)}px)`,
+          flexShrink: 0,
+        }}
+      >
+        {second}
+      </div>
+    </div>
+  )
+}
+
+export { SplitPane }

package/src/react/primitives/stat-card.tsx

@@ -0,0 +1,140 @@
+import * as React from 'react'
+import { cva } from 'class-variance-authority'
+
+import { cn } from './utils'
+
+/* ------------------------------------------------------------------ */
+/*  Types                                                              */
+/* ------------------------------------------------------------------ */
+
+export type TrendDirection = 'up' | 'down' | 'neutral'
+
+export interface TrendConfig {
+  direction: TrendDirection
+  value: string
+  label?: string
+}
+
+/* ------------------------------------------------------------------ */
+/*  Trend styling                                                      */
+/* ------------------------------------------------------------------ */
+
+const trendVariants = cva('inline-flex items-center gap-1 text-xs font-medium', {
+  variants: {
+    direction: {
+      up: 'text-accent-emerald',
+      down: 'text-accent-rose',
+      neutral: 'text-foreground-muted',
+    },
+  },
+  defaultVariants: {
+    direction: 'neutral',
+  },
+})
+
+/* ------------------------------------------------------------------ */
+/*  Trend arrow icons                                                  */
+/* ------------------------------------------------------------------ */
+
+function TrendArrow({ direction }: { direction: TrendDirection }) {
+  const iconClass = 'size-3.5'
+  if (direction === 'up') {
+    return (
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        viewBox="0 0 24 24"
+        fill="none"
+        stroke="currentColor"
+        strokeWidth={2}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        className={iconClass}
+      >
+        <path d="m18 15-6-6-6 6" />
+      </svg>
+    )
+  }
+  if (direction === 'down') {
+    return (
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        viewBox="0 0 24 24"
+        fill="none"
+        stroke="currentColor"
+        strokeWidth={2}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        className={iconClass}
+      >
+        <path d="m6 9 6 6 6-6" />
+      </svg>
+    )
+  }
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth={2}
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      className={iconClass}
+    >
+      <path d="M5 12h14" />
+    </svg>
+  )
+}
+
+/* ------------------------------------------------------------------ */
+/*  StatCard                                                           */
+/* ------------------------------------------------------------------ */
+
+export interface StatCardProps extends React.ComponentProps<'div'> {
+  label: string
+  value: string | number
+  trend?: TrendConfig
+  icon?: React.ReactNode
+}
+
+function StatCard({ className, label, value, trend, icon, ...props }: StatCardProps) {
+  return (
+    <div
+      data-slot="stat-card"
+      className={cn(
+        'flex flex-col gap-2 rounded-xl border border-border-glass bg-glass p-5 backdrop-blur-[20px]',
+        'transition-all duration-300 hover:shadow-glow',
+        className
+      )}
+      {...props}
+    >
+      {/* Header */}
+      <div className="flex items-center justify-between">
+        <span className="text-xs font-medium tracking-wide text-foreground-secondary">{label}</span>
+        {icon !== undefined && icon !== null && (
+          <span aria-hidden="true" className="text-foreground-muted [&_svg]:size-4">
+            {icon}
+          </span>
+        )}
+      </div>
+
+      {/* Value */}
+      <div className="text-2xl font-bold tabular-nums tracking-tight text-foreground">
+        {typeof value === 'number' ? String(value) : value}
+      </div>
+
+      {/* Trend */}
+      {trend !== undefined && (
+        <div className={trendVariants({ direction: trend.direction })}>
+          <TrendArrow direction={trend.direction} />
+          <span>{trend.value}</span>
+          {trend.label !== undefined && (
+            <span className="text-foreground-muted">{trend.label}</span>
+          )}
+        </div>
+      )}
+    </div>
+  )
+}
+
+export { StatCard, trendVariants }

package/src/react/primitives/status-bar.tsx

@@ -0,0 +1,81 @@
+import * as React from 'react'
+
+import { cn } from './utils'
+
+/* ------------------------------------------------------------------ */
+/* StatusBar                                                           */
+/* ------------------------------------------------------------------ */
+
+function StatusBar({ className, children, ...props }: React.ComponentProps<'div'>) {
+  return (
+    <div
+      data-slot="status-bar"
+      className={cn(
+        'flex h-8 items-center justify-between border-t border-border-glass bg-glass px-3 text-xs backdrop-blur-[20px]',
+        className
+      )}
+      {...props}
+    >
+      {children}
+    </div>
+  )
+}
+
+/* ------------------------------------------------------------------ */
+/* StatusBarSection                                                     */
+/* ------------------------------------------------------------------ */
+
+interface StatusBarSectionProps extends React.ComponentProps<'div'> {
+  /** Which slot this section occupies */
+  position?: 'left' | 'center' | 'right'
+}
+
+function StatusBarSection({ className, position = 'left', ...props }: StatusBarSectionProps) {
+  return (
+    <div
+      data-slot="status-bar-section"
+      data-position={position}
+      className={cn(
+        'flex items-center gap-3',
+        position === 'left' && 'mr-auto',
+        position === 'center' && 'mx-auto',
+        position === 'right' && 'ml-auto',
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+/* ------------------------------------------------------------------ */
+/* StatusBarItem                                                       */
+/* ------------------------------------------------------------------ */
+
+function StatusBarItem({ className, ...props }: React.ComponentProps<'div'>) {
+  return (
+    <div
+      data-slot="status-bar-item"
+      className={cn(
+        'flex items-center gap-1.5 text-foreground-secondary transition-colors hover:text-foreground',
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+/* ------------------------------------------------------------------ */
+/* StatusBarSeparator                                                   */
+/* ------------------------------------------------------------------ */
+
+function StatusBarSeparator({ className, ...props }: React.ComponentProps<'div'>) {
+  return (
+    <div
+      data-slot="status-bar-separator"
+      className={cn('h-3.5 w-px bg-border-glass', className)}
+      {...props}
+    />
+  )
+}
+
+export { StatusBar, StatusBarSection, StatusBarItem, StatusBarSeparator }

package/src/react/primitives/stepper.tsx

@@ -0,0 +1,162 @@
+import { CheckIcon, XIcon } from 'lucide-react'
+import * as React from 'react'
+
+import { cn } from './utils'
+
+type StepStatus = 'pending' | 'active' | 'complete' | 'error' | 'disabled'
+
+interface StepperContextValue {
+  orientation: 'horizontal' | 'vertical'
+}
+
+const StepperContext = React.createContext<StepperContextValue>({
+  orientation: 'horizontal',
+})
+
+function Stepper({
+  className,
+  orientation = 'horizontal',
+  children,
+  ...props
+}: React.ComponentProps<'nav'> & {
+  orientation?: 'horizontal' | 'vertical'
+}) {
+  const contextValue = React.useMemo(() => ({ orientation }), [orientation])
+
+  return (
+    <StepperContext.Provider value={contextValue}>
+      <nav data-slot="stepper" aria-label="Progress" className={cn(className)} {...props}>
+        <ol className={cn('flex gap-2', orientation === 'vertical' ? 'flex-col' : 'items-center')}>
+          {children}
+        </ol>
+      </nav>
+    </StepperContext.Provider>
+  )
+}
+
+function StepperItem({
+  className,
+  step,
+  label,
+  description,
+  status = 'pending',
+  isLast = false,
+  icon,
+  onClick,
+  ...props
+}: React.ComponentProps<'li'> & {
+  step: number
+  label: string
+  description?: string
+  status?: StepStatus
+  isLast?: boolean
+  icon?: React.ReactNode
+}) {
+  const { orientation } = React.useContext(StepperContext)
+  const isClickable = status !== 'disabled' && onClick !== undefined
+
+  return (
+    <li
+      data-slot="stepper-item"
+      data-status={status}
+      className={cn(
+        'flex gap-3',
+        orientation === 'horizontal' && 'flex-1 items-center',
+        orientation === 'vertical' && 'relative pb-8 last:pb-0',
+        className
+      )}
+      {...props}
+    >
+      <div
+        className={cn(
+          'flex items-center gap-3',
+          orientation === 'horizontal' && 'flex-col sm:flex-row',
+          orientation === 'vertical' && 'items-start'
+        )}
+      >
+        {/* Step indicator */}
+        <button
+          type="button"
+          disabled={!isClickable}
+          onClick={
+            isClickable
+              ? (onClick as unknown as React.MouseEventHandler<HTMLButtonElement>)
+              : undefined
+          }
+          aria-current={status === 'active' ? 'step' : undefined}
+          className={cn(
+            'relative z-10 flex size-8 shrink-0 items-center justify-center rounded-full border-2 text-sm font-medium transition-all',
+            status === 'pending' &&
+              'border-border-glass bg-surface-secondary text-foreground-secondary',
+            status === 'active' && 'border-primary bg-primary text-primary-foreground shadow-glow',
+            status === 'complete' && 'border-primary bg-primary text-primary-foreground',
+            status === 'error' && 'border-destructive bg-destructive text-destructive-foreground',
+            status === 'disabled' &&
+              'border-border-glass bg-surface-secondary text-foreground-secondary/50 cursor-not-allowed opacity-50',
+            isClickable && 'cursor-pointer hover:shadow-glow'
+          )}
+        >
+          {icon ? (
+            icon
+          ) : status === 'complete' ? (
+            <CheckIcon className="size-4" />
+          ) : status === 'error' ? (
+            <XIcon className="size-4" />
+          ) : (
+            step
+          )}
+        </button>
+
+        {/* Step text */}
+        <div className="flex flex-col">
+          <span
+            className={cn(
+              'text-sm font-medium',
+              status === 'active' && 'text-foreground',
+              status === 'complete' && 'text-foreground',
+              status === 'pending' && 'text-foreground-secondary',
+              status === 'error' && 'text-destructive',
+              status === 'disabled' && 'text-foreground-secondary/50'
+            )}
+          >
+            {label}
+          </span>
+          {description && (
+            <span
+              className={cn(
+                'text-xs',
+                status === 'disabled' ? 'text-foreground-secondary/40' : 'text-foreground-secondary'
+              )}
+            >
+              {description}
+            </span>
+          )}
+        </div>
+      </div>
+
+      {/* Connector line */}
+      {!isLast && orientation === 'horizontal' && (
+        <div
+          data-slot="stepper-connector"
+          aria-hidden="true"
+          className={cn(
+            'mx-2 h-0.5 flex-1 rounded-full transition-colors',
+            status === 'complete' ? 'bg-primary' : 'bg-border-glass'
+          )}
+        />
+      )}
+      {!isLast && orientation === 'vertical' && (
+        <div
+          data-slot="stepper-connector"
+          aria-hidden="true"
+          className={cn(
+            'absolute left-[15px] top-10 h-[calc(100%-2.5rem)] w-0.5 rounded-full transition-colors',
+            status === 'complete' ? 'bg-primary' : 'bg-border-glass'
+          )}
+        />
+      )}
+    </li>
+  )
+}
+
+export { Stepper, StepperItem, type StepStatus }

package/src/react/primitives/switch.tsx

@@ -0,0 +1,47 @@
+/**
+ * Switch Component
+ *
+ * A toggle switch built on Radix UI primitives.
+ * Used for binary settings like Low Effects Mode and Compact Mode.
+ */
+
+import * as React from 'react'
+import * as SwitchPrimitives from '@radix-ui/react-switch'
+import { cn } from './utils'
+
+interface SwitchProps extends React.ComponentPropsWithoutRef<typeof SwitchPrimitives.Root> {
+  /** Size variant */
+  size?: 'default' | 'sm'
+}
+
+const Switch = React.forwardRef<React.ComponentRef<typeof SwitchPrimitives.Root>, SwitchProps>(
+  ({ className, size = 'default', ...props }, ref) => (
+    <SwitchPrimitives.Root
+      className={cn(
+        'peer inline-flex shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors',
+        'focus-visible:ring-ring focus-visible:ring-offset-background focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-none',
+        'disabled:cursor-not-allowed disabled:opacity-50',
+        'data-[state=checked]:bg-primary data-[state=unchecked]:bg-accent',
+        size === 'default' && 'h-6 w-11',
+        size === 'sm' && 'h-5 w-9',
+        className
+      )}
+      {...props}
+      ref={ref}
+    >
+      <SwitchPrimitives.Thumb
+        className={cn(
+          'bg-foreground pointer-events-none block rounded-full shadow-lg ring-0 transition-transform',
+          size === 'default' &&
+            'h-5 w-5 data-[state=checked]:translate-x-5 data-[state=unchecked]:translate-x-0',
+          size === 'sm' &&
+            'h-4 w-4 data-[state=checked]:translate-x-4 data-[state=unchecked]:translate-x-0'
+        )}
+      />
+    </SwitchPrimitives.Root>
+  )
+)
+Switch.displayName = SwitchPrimitives.Root.displayName
+
+export { Switch }
+export type { SwitchProps }