even-toolkit 0.4.0 → 1.0.0

package/web/components/slider.tsx

@@ -0,0 +1,69 @@
+import { cn } from '../utils/cn';
+import type { ReactNode } from 'react';
+
+interface SliderProps {
+  value: number;
+  onChange: (value: number) => void;
+  min?: number;
+  max?: number;
+  step?: number;
+  leftIcon?: ReactNode;
+  rightIcon?: ReactNode;
+  disabled?: boolean;
+  className?: string;
+}
+
+function Slider({
+  value,
+  onChange,
+  min = 0,
+  max = 100,
+  step = 1,
+  leftIcon,
+  rightIcon,
+  disabled,
+  className,
+}: SliderProps) {
+  const percent = ((value - min) / (max - min)) * 100;
+
+  return (
+    <div
+      className={cn(
+        'flex items-center gap-3',
+        disabled && 'opacity-50 pointer-events-none',
+        className,
+      )}
+    >
+      {leftIcon && <span className="shrink-0 w-6 h-6 text-text-dim">{leftIcon}</span>}
+      <div className="relative flex-1 h-5 flex items-center">
+        {/* Track background */}
+        <div className="absolute inset-x-0 h-1 rounded-full bg-surface-lighter" />
+        {/* Track fill */}
+        <div
+          className="absolute left-0 h-1 rounded-full bg-accent"
+          style={{ width: `${percent}%` }}
+        />
+        {/* Native input (invisible, handles interaction) */}
+        <input
+          type="range"
+          min={min}
+          max={max}
+          step={step}
+          value={value}
+          disabled={disabled}
+          onChange={(e) => onChange(Number(e.target.value))}
+          className="absolute inset-0 w-full h-full opacity-0 cursor-pointer z-10"
+        />
+        {/* Thumb */}
+        <div
+          className="absolute w-5 h-5 rounded-full bg-text-highlight shadow-sm border border-border pointer-events-none -translate-x-1/2"
+          style={{ left: `${percent}%` }}
+        />
+      </div>
+      {rightIcon && <span className="shrink-0 w-6 h-6 text-text-dim">{rightIcon}</span>}
+    </div>
+  );
+}
+
+export { Slider };
+export type { SliderProps };

package/web/components/stat-grid.tsx

@@ -0,0 +1,40 @@
+import { cn } from '../utils/cn';
+
+interface StatItem {
+  label: string;
+  value: string | number;
+  detail?: string;
+}
+
+interface StatGridProps {
+  stats: StatItem[];
+  columns?: 2 | 3 | 4;
+  className?: string;
+}
+
+function StatGrid({ stats, columns = 3, className }: StatGridProps) {
+  return (
+    <div
+      className={cn(
+        'grid gap-3',
+        columns === 2 && 'grid-cols-2',
+        columns === 3 && 'grid-cols-3',
+        columns === 4 && 'grid-cols-4',
+        className,
+      )}
+    >
+      {stats.map((stat, i) => (
+        <div key={i} className="bg-surface rounded-[6px] p-3 text-center">
+          <div className="text-[24px] tracking-[-0.72px] font-normal text-accent tabular-nums">{stat.value}</div>
+          <div className="text-[13px] tracking-[-0.13px] text-text-dim mt-0.5">{stat.label}</div>
+          {stat.detail && (
+            <div className="text-[11px] tracking-[-0.11px] text-text-muted mt-0.5">{stat.detail}</div>
+          )}
+        </div>
+      ))}
+    </div>
+  );
+}
+
+export { StatGrid };
+export type { StatGridProps, StatItem };

package/web/components/status-dot.tsx

@@ -0,0 +1,21 @@
+import { cn } from '../utils/cn';
+
+interface StatusDotProps {
+  connected: boolean;
+  className?: string;
+}
+
+function StatusDot({ connected, className }: StatusDotProps) {
+  return (
+    <span
+      className={cn(
+        'inline-block w-2 h-2 rounded-full',
+        connected ? 'bg-positive animate-pulse-dot' : 'bg-negative',
+        className,
+      )}
+    />
+  );
+}
+
+export { StatusDot };
+export type { StatusDotProps };

package/web/components/status-progress.tsx

@@ -0,0 +1,56 @@
+import { cn } from '../utils/cn';
+
+type StepStatus = 'waiting' | 'in-progress' | 'complete' | 'skipped';
+
+interface StatusProgressStep {
+  label: string;
+  status: StepStatus;
+}
+
+interface StatusProgressProps {
+  steps: StatusProgressStep[];
+  className?: string;
+}
+
+function StatusProgress({ steps, className }: StatusProgressProps) {
+  return (
+    <div className={cn('flex flex-col gap-2', className)}>
+      {/* Progress bar segments */}
+      <div className="flex gap-1 h-1">
+        {steps.map((step, i) => (
+          <div
+            key={i}
+            className={cn(
+              'flex-1 rounded-full transition-colors',
+              step.status === 'complete' && 'bg-accent',
+              step.status === 'in-progress' && 'bg-accent animate-pulse',
+              step.status === 'waiting' && 'bg-surface-lighter',
+              step.status === 'skipped' && 'bg-surface-lighter',
+            )}
+          />
+        ))}
+      </div>
+      {/* Labels */}
+      <div className="flex">
+        {steps.map((step, i) => (
+          <div key={i} className="flex-1 text-center">
+            <span
+              className={cn(
+                'text-[11px] tracking-[-0.11px]',
+                step.status === 'complete' && 'text-accent',
+                step.status === 'in-progress' && 'text-text',
+                step.status === 'waiting' && 'text-text-muted',
+                step.status === 'skipped' && 'text-text-muted line-through',
+              )}
+            >
+              {step.label}
+            </span>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}
+
+export { StatusProgress };
+export type { StatusProgressProps, StatusProgressStep, StepStatus };

package/web/components/step-indicator.tsx

@@ -0,0 +1,52 @@
+import { cn } from '../utils/cn';
+
+interface StepIndicatorProps {
+  currentStep: number;
+  totalSteps: number;
+  onPrev?: () => void;
+  onNext?: () => void;
+  prevLabel?: string;
+  nextLabel?: string;
+  className?: string;
+}
+
+function StepIndicator({
+  currentStep,
+  totalSteps,
+  onPrev,
+  onNext,
+  prevLabel = 'Previous',
+  nextLabel,
+  className,
+}: StepIndicatorProps) {
+  const isFirst = currentStep <= 1;
+  const isLast = currentStep >= totalSteps;
+  const resolvedNextLabel = nextLabel ?? (isLast ? 'Finish' : 'Next');
+
+  return (
+    <div className={cn('flex items-center justify-between gap-4', className)}>
+      <button
+        type="button"
+        onClick={onPrev}
+        disabled={isFirst || !onPrev}
+        className="h-9 px-4 rounded-[6px] text-[15px] tracking-[-0.15px] font-normal text-text-dim hover:text-text hover:bg-surface-light transition-colors cursor-pointer disabled:opacity-50 disabled:pointer-events-none"
+      >
+        {prevLabel}
+      </button>
+      <span className="text-[13px] tracking-[-0.13px] text-text-dim tabular-nums">
+        Step {currentStep} of {totalSteps}
+      </span>
+      <button
+        type="button"
+        onClick={onNext}
+        disabled={!onNext}
+        className="h-9 px-4 rounded-[6px] text-[15px] tracking-[-0.15px] font-normal bg-accent text-text-highlight hover:opacity-90 transition-colors cursor-pointer disabled:opacity-50 disabled:pointer-events-none"
+      >
+        {resolvedNextLabel}
+      </button>
+    </div>
+  );
+}
+
+export { StepIndicator };
+export type { StepIndicatorProps };

package/web/components/table.tsx

@@ -0,0 +1,70 @@
+import * as React from 'react';
+import { cn } from '../utils/cn';
+
+const Table = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLTableElement>>(
+  ({ className, ...props }, ref) => (
+    <div ref={ref} className="w-full overflow-x-auto rounded-[6px] bg-surface">
+      <table className={cn('w-full border-collapse text-[15px] tracking-[-0.15px]', className)} {...props} />
+    </div>
+  ),
+);
+Table.displayName = 'Table';
+
+const TableHeader = React.forwardRef<
+  HTMLTableSectionElement,
+  React.HTMLAttributes<HTMLTableSectionElement>
+>(({ className, ...props }, ref) => (
+  <thead ref={ref} className={cn('bg-surface-light/50', className)} {...props} />
+));
+TableHeader.displayName = 'TableHeader';
+
+const TableBody = React.forwardRef<
+  HTMLTableSectionElement,
+  React.HTMLAttributes<HTMLTableSectionElement>
+>(({ className, ...props }, ref) => (
+  <tbody ref={ref} className={cn('', className)} {...props} />
+));
+TableBody.displayName = 'TableBody';
+
+const TableRow = React.forwardRef<HTMLTableRowElement, React.HTMLAttributes<HTMLTableRowElement>>(
+  ({ className, ...props }, ref) => (
+    <tr
+      ref={ref}
+      className={cn(
+        'transition-colors hover:bg-surface-light border-b border-border/50 last:border-0',
+        className,
+      )}
+      {...props}
+    />
+  ),
+);
+TableRow.displayName = 'TableRow';
+
+const TableHead = React.forwardRef<
+  HTMLTableCellElement,
+  React.ThHTMLAttributes<HTMLTableCellElement>
+>(({ className, ...props }, ref) => (
+  <th
+    ref={ref}
+    className={cn(
+      'text-left text-text-dim font-normal px-4 py-3 text-[13px] tracking-[-0.13px] whitespace-nowrap',
+      className,
+    )}
+    {...props}
+  />
+));
+TableHead.displayName = 'TableHead';
+
+const TableCell = React.forwardRef<
+  HTMLTableCellElement,
+  React.TdHTMLAttributes<HTMLTableCellElement>
+>(({ className, ...props }, ref) => (
+  <td
+    ref={ref}
+    className={cn('px-4 py-3 tabular-nums whitespace-nowrap', className)}
+    {...props}
+  />
+));
+TableCell.displayName = 'TableCell';
+
+export { Table, TableHeader, TableBody, TableRow, TableHead, TableCell };

package/web/components/tag.tsx

@@ -0,0 +1,72 @@
+import { cn } from '../utils/cn';
+import type { ReactNode } from 'react';
+
+interface TagProps {
+  label: string;
+  icon?: ReactNode;
+  selected?: boolean;
+  onPress?: () => void;
+  className?: string;
+}
+
+function Tag({ label, icon, selected, onPress, className }: TagProps) {
+  return (
+    <button
+      type="button"
+      onClick={onPress}
+      className={cn(
+        'inline-flex items-center gap-2 px-4 py-2 rounded-[6px] text-[15px] tracking-[-0.15px] font-normal transition-colors cursor-pointer shrink-0',
+        selected
+          ? 'bg-accent text-text-highlight'
+          : 'bg-surface text-text hover:bg-surface-light',
+        className,
+      )}
+    >
+      {icon && <span className="w-5 h-5 shrink-0">{icon}</span>}
+      {label}
+    </button>
+  );
+}
+
+interface TagCarouselProps {
+  children: ReactNode;
+  className?: string;
+}
+
+function TagCarousel({ children, className }: TagCarouselProps) {
+  return (
+    <div className={cn('flex items-center gap-2 overflow-x-auto scrollbar-hide py-2', className)}>
+      {children}
+    </div>
+  );
+}
+
+interface TagCardProps {
+  icon?: ReactNode;
+  title: string;
+  subtitle?: string;
+  onPress?: () => void;
+  className?: string;
+}
+
+function TagCard({ icon, title, subtitle, onPress, className }: TagCardProps) {
+  return (
+    <button
+      type="button"
+      onClick={onPress}
+      className={cn(
+        'flex flex-col items-start justify-between p-4 rounded-[6px] bg-accent-warning min-w-[150px] h-[150px] cursor-pointer transition-colors shrink-0',
+        className,
+      )}
+    >
+      {icon && <span className="w-6 h-6">{icon}</span>}
+      <div>
+        <div className="text-[15px] tracking-[-0.45px] text-text font-normal">{title}</div>
+        {subtitle && <div className="text-[13px] tracking-[-0.13px] text-text-dim mt-0.5">{subtitle}</div>}
+      </div>
+    </button>
+  );
+}
+
+export { Tag, TagCarousel, TagCard };
+export type { TagProps, TagCarouselProps, TagCardProps };

package/web/components/textarea.tsx

@@ -0,0 +1,23 @@
+import * as React from 'react';
+import { cn } from '../utils/cn';
+
+interface TextareaProps extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {}
+
+const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
+  ({ className, rows = 3, ...props }, ref) => (
+    <textarea
+      ref={ref}
+      rows={rows}
+      className={cn(
+        'w-full bg-input-bg text-text rounded-[6px] px-4 py-3 text-[17px] tracking-[-0.17px] outline-none placeholder:text-text-dim transition-colors resize-none',
+        className,
+      )}
+      {...props}
+    />
+  ),
+);
+
+Textarea.displayName = 'Textarea';
+
+export { Textarea };
+export type { TextareaProps };

package/web/components/timeline.tsx

@@ -0,0 +1,52 @@
+import { cn } from '../utils/cn';
+import type { ReactNode } from 'react';
+
+interface TimelineEvent {
+  id: string;
+  icon?: ReactNode;
+  title: string;
+  subtitle?: string;
+  timestamp: string;
+  color?: string;
+}
+
+interface TimelineProps {
+  events: TimelineEvent[];
+  className?: string;
+}
+
+function Timeline({ events, className }: TimelineProps) {
+  return (
+    <div className={cn('relative', className)}>
+      {/* Vertical line */}
+      <div className="absolute left-[11px] top-3 bottom-3 w-[2px] bg-border" />
+
+      {events.map((event, i) => (
+        <div key={event.id} className="relative flex gap-4 pb-4 last:pb-0">
+          {/* Dot */}
+          <div
+            className="relative z-10 shrink-0 w-6 h-6 rounded-full flex items-center justify-center text-[11px]"
+            style={{ backgroundColor: (event.color ?? 'var(--color-accent)') + '20' }}
+          >
+            {event.icon ?? (
+              <span className="w-2 h-2 rounded-full" style={{ backgroundColor: event.color ?? 'var(--color-accent)' }} />
+            )}
+          </div>
+          {/* Content */}
+          <div className="flex-1 min-w-0 pt-0.5">
+            <div className="flex items-baseline justify-between gap-2">
+              <span className="text-[15px] tracking-[-0.15px] text-text">{event.title}</span>
+              <span className="text-[11px] tracking-[-0.11px] text-text-muted shrink-0">{event.timestamp}</span>
+            </div>
+            {event.subtitle && (
+              <div className="text-[13px] tracking-[-0.13px] text-text-dim mt-0.5">{event.subtitle}</div>
+            )}
+          </div>
+        </div>
+      ))}
+    </div>
+  );
+}
+
+export { Timeline };
+export type { TimelineProps, TimelineEvent };

package/web/components/timer-ring.tsx

@@ -0,0 +1,69 @@
+interface TimerRingProps {
+  remaining: number;
+  total: number;
+  size?: number;
+  strokeWidth?: number;
+  formatFn?: (seconds: number) => string;
+  className?: string;
+}
+
+function defaultFormat(seconds: number): string {
+  const m = Math.floor(seconds / 60);
+  const s = seconds % 60;
+  return `${m}:${s.toString().padStart(2, '0')}`;
+}
+
+function TimerRing({
+  remaining,
+  total,
+  size = 160,
+  strokeWidth = 6,
+  formatFn = defaultFormat,
+  className,
+}: TimerRingProps) {
+  const radius = (size - strokeWidth) / 2;
+  const circumference = 2 * Math.PI * radius;
+  const progress = total > 0 ? remaining / total : 0;
+  const offset = circumference * (1 - progress);
+
+  return (
+    <div className={`relative inline-flex items-center justify-center ${className ?? ''}`}>
+      <svg width={size} height={size} className="-rotate-90">
+        <circle
+          cx={size / 2}
+          cy={size / 2}
+          r={radius}
+          fill="none"
+          stroke="currentColor"
+          strokeWidth={strokeWidth}
+          className="text-surface-lighter"
+        />
+        <circle
+          cx={size / 2}
+          cy={size / 2}
+          r={radius}
+          fill="none"
+          stroke="currentColor"
+          strokeWidth={strokeWidth}
+          strokeLinecap="round"
+          strokeDasharray={circumference}
+          strokeDashoffset={offset}
+          className="text-accent timer-ring-circle"
+        />
+      </svg>
+      <div className="absolute inset-0 flex flex-col items-center justify-center">
+        <span className="text-3xl font-bold tabular-nums font-[var(--font-display)]">
+          {formatFn(remaining)}
+        </span>
+        {total > 0 && (
+          <span className="text-xs text-text-muted mt-1">
+            {remaining > 0 ? 'remaining' : 'done!'}
+          </span>
+        )}
+      </div>
+    </div>
+  );
+}
+
+export { TimerRing };
+export type { TimerRingProps };

package/web/components/toast.tsx

@@ -0,0 +1,38 @@
+import { cva, type VariantProps } from 'class-variance-authority';
+import { cn } from '../utils/cn';
+import type { ReactNode } from 'react';
+
+const toastVariants = cva(
+  'flex items-center gap-4 rounded-[6px] px-4 py-3 text-[15px] tracking-[-0.15px] shadow-[0_2px_8px_rgba(0,0,0,0.12)]',
+  {
+    variants: {
+      variant: {
+        info: 'bg-surface text-text',
+        warning: 'bg-accent-warning text-text',
+        error: 'bg-accent-warning text-text',
+        undo: 'bg-surface text-text',
+      },
+    },
+    defaultVariants: {
+      variant: 'info',
+    },
+  },
+);
+
+interface ToastProps extends VariantProps<typeof toastVariants> {
+  message: string;
+  action?: ReactNode;
+  className?: string;
+}
+
+function Toast({ message, variant, action, className }: ToastProps) {
+  return (
+    <div className={cn(toastVariants({ variant, className }))}>
+      <span className="flex-1">{message}</span>
+      {action}
+    </div>
+  );
+}
+
+export { Toast, toastVariants };
+export type { ToastProps };

package/web/components/toggle.tsx

@@ -0,0 +1,58 @@
+import { cn } from '../utils/cn';
+
+interface ToggleProps {
+  checked: boolean;
+  onChange: (checked: boolean) => void;
+  disabled?: boolean;
+  className?: string;
+}
+
+/*
+ * Pixel-art toggle switch using Even Realities SVG design.
+ * Track: pixelated rounded rect, #232323 (on) / #E4E4E4 (off).
+ * Knob: pixelated circle, always white, slides left↔right via CSS transition.
+ * ViewBox: 36×24.
+ */
+
+const TRACK =
+  'M30.75 3H33V4.5H34.5V6.75H36V17.25H34.5V19.5H33V21H30.75V22.5H5.25V21H3V19.5H1.5V17.25H0V6.75H1.5V4.5H3V3H5.25V1.5H30.75V3Z';
+
+const KNOB =
+  'M14.25 19.5H6.75V18H4.5V15.75H3V8.25H4.5V6H6.75V4.5H14.25V6H16.5V8.25H18V15.75H16.5V18H14.25V19.5Z';
+
+function Toggle({ checked, onChange, disabled, className }: ToggleProps) {
+  return (
+    <button
+      type="button"
+      role="switch"
+      aria-checked={checked}
+      disabled={disabled}
+      onClick={() => onChange(!checked)}
+      className={cn(
+        'inline-flex shrink-0 cursor-pointer items-center disabled:opacity-50 disabled:pointer-events-none',
+        className,
+      )}
+    >
+      <svg width={36} height={24} viewBox="0 0 36 24" fill="none">
+        <path
+          d={TRACK}
+          style={{
+            fill: checked ? '#232323' : '#E4E4E4',
+            transition: 'fill 200ms ease',
+          }}
+        />
+        <path
+          d={KNOB}
+          fill="white"
+          style={{
+            transform: checked ? 'translateX(15px)' : 'translateX(0)',
+            transition: 'transform 200ms ease',
+          }}
+        />
+      </svg>
+    </button>
+  );
+}
+
+export { Toggle };
+export type { ToggleProps };