wip

apps/website/components/ui/Card.tsx

@@ -9,7 +9,7 @@ interface CardProps {
 export default function Card({ children, className = '', onClick }: CardProps) {
   return (
     <div
-      className={`rounded-lg bg-iron-gray p-6 shadow-card border border-charcoal-outline hover:shadow-glow transition-shadow duration-200 ${className}`}
+      className={`rounded-lg bg-iron-gray p-6 shadow-card border border-charcoal-outline duration-200 ${className}`}
       onClick={onClick}
     >
       {children}

apps/website/components/ui/DurationField.tsx

@@ -0,0 +1,71 @@
+'use client';
+
+import Input from '@/components/ui/Input';
+
+interface DurationFieldProps {
+  label: string;
+  value: number | '';
+  onChange: (value: number | '') => void;
+  helperText?: string;
+  required?: boolean;
+  disabled?: boolean;
+  unit?: 'minutes' | 'laps';
+  error?: string;
+}
+
+export default function DurationField({
+  label,
+  value,
+  onChange,
+  helperText,
+  required,
+  disabled,
+  unit = 'minutes',
+  error,
+}: DurationFieldProps) {
+  const handleChange = (raw: string) => {
+    if (raw.trim() === '') {
+      onChange('');
+      return;
+    }
+
+    const parsed = parseInt(raw, 10);
+    if (Number.isNaN(parsed) || parsed <= 0) {
+      onChange('');
+      return;
+    }
+
+    onChange(parsed);
+  };
+
+  const unitLabel = unit === 'laps' ? 'laps' : 'min';
+
+  return (
+    <div className="space-y-1">
+      <label className="block text-sm font-medium text-gray-300">
+        {label}
+        {required && <span className="text-warning-amber ml-1">*</span>}
+      </label>
+      <div className="flex items-center gap-2">
+        <div className="flex-1">
+          <Input
+            type="number"
+            value={value === '' ? '' : String(value)}
+            onChange={(e) => handleChange(e.target.value)}
+            disabled={disabled}
+            min={1}
+            className="pr-16"
+            error={!!error}
+          />
+        </div>
+        <span className="text-xs text-gray-400 -ml-14">{unitLabel}</span>
+      </div>
+      {helperText && (
+        <p className="text-xs text-gray-500">{helperText}</p>
+      )}
+      {error && (
+        <p className="text-xs text-warning-amber mt-1">{error}</p>
+      )}
+    </div>
+  );
+}

apps/website/components/ui/PresetCard.tsx

@@ -0,0 +1,122 @@
+'use client';
+
+import type { MouseEventHandler, ReactNode } from 'react';
+import Card from './Card';
+
+interface PresetCardStat {
+  label: string;
+  value: string;
+}
+
+export interface PresetCardProps {
+  title: string;
+  subtitle?: string;
+  primaryTag?: string;
+  description?: string;
+  stats?: PresetCardStat[];
+  selected?: boolean;
+  disabled?: boolean;
+  onSelect?: () => void;
+  className?: string;
+  children?: ReactNode;
+}
+
+export default function PresetCard({
+  title,
+  subtitle,
+  primaryTag,
+  description,
+  stats,
+  selected,
+  disabled,
+  onSelect,
+  className = '',
+  children,
+}: PresetCardProps) {
+  const isInteractive = typeof onSelect === 'function' && !disabled;
+
+  const handleClick: MouseEventHandler<HTMLButtonElement | HTMLDivElement> = (event) => {
+    if (!isInteractive) {
+      return;
+    }
+    event.preventDefault();
+    onSelect?.();
+  };
+
+  const baseBorder = selected ? 'border-primary-blue' : 'border-charcoal-outline';
+  const baseBg = selected ? 'bg-primary-blue/10' : 'bg-iron-gray';
+  const baseRing = selected ? 'ring-2 ring-primary-blue/40' : '';
+  const disabledClasses = disabled ? 'opacity-60 cursor-not-allowed' : '';
+  const hoverClasses = isInteractive && !disabled ? 'hover:bg-iron-gray/80 hover:scale-[1.01]' : '';
+
+  const content = (
+    <div className="flex h-full flex-col gap-3">
+      <div className="flex items-start justify-between gap-3">
+        <div>
+          <div className="text-sm font-semibold text-white">{title}</div>
+          {subtitle && (
+            <div className="mt-0.5 text-xs text-gray-400">{subtitle}</div>
+          )}
+        </div>
+        <div className="flex flex-col items-end gap-1">
+          {primaryTag && (
+            <span className="inline-flex rounded-full bg-primary-blue/15 px-2 py-0.5 text-[10px] font-medium uppercase tracking-wide text-primary-blue">
+              {primaryTag}
+            </span>
+          )}
+          {selected && (
+            <span className="inline-flex items-center gap-1 rounded-full bg-primary-blue/10 px-2 py-0.5 text-[10px] font-medium text-primary-blue">
+              <span className="h-1.5 w-1.5 rounded-full bg-primary-blue" />
+              Selected
+            </span>
+          )}
+        </div>
+      </div>
+
+      {description && (
+        <p className="text-xs text-gray-300">{description}</p>
+      )}
+
+      {children}
+
+      {stats && stats.length > 0 && (
+        <div className="mt-1 border-t border-charcoal-outline/70 pt-2">
+          <dl className="grid grid-cols-1 gap-2 text-[11px] text-gray-400 sm:grid-cols-3">
+            {stats.map((stat) => (
+              <div key={stat.label} className="space-y-0.5">
+                <dt className="font-medium text-gray-500">{stat.label}</dt>
+                <dd className="text-xs text-gray-200">{stat.value}</dd>
+              </div>
+            ))}
+          </dl>
+        </div>
+      )}
+    </div>
+  );
+
+  const commonClasses = `${baseBorder} ${baseBg} ${baseRing} ${hoverClasses} ${disabledClasses} ${className}`;
+
+  if (isInteractive) {
+    return (
+      <button
+        type="button"
+        onClick={handleClick as MouseEventHandler<HTMLButtonElement>}
+        disabled={disabled}
+        className={`group block w-full rounded-lg text-left text-sm shadow-card outline-none transition-all duration-150 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-blue ${commonClasses}`}
+      >
+        <div className="p-4">
+          {content}
+        </div>
+      </button>
+    );
+  }
+
+  return (
+    <Card
+      className={commonClasses}
+      onClick={handleClick as MouseEventHandler<HTMLDivElement>}
+    >
+      {content}
+    </Card>
+  );
+}

apps/website/components/ui/RangeField.tsx

@@ -0,0 +1,130 @@
+'use client';
+
+import Input from '@/components/ui/Input';
+
+interface RangeFieldProps {
+  label: string;
+  value: number;
+  min: number;
+  max: number;
+  step?: number;
+  onChange: (value: number) => void;
+  helperText?: string;
+  error?: string;
+  disabled?: boolean;
+  /**
+   * Optional unit label, defaults to "min".
+   */
+  unitLabel?: string;
+  /**
+   * Optional override for the right-hand range hint.
+   */
+  rangeHint?: string;
+}
+
+export default function RangeField({
+  label,
+  value,
+  min,
+  max,
+  step = 1,
+  onChange,
+  helperText,
+  error,
+  disabled,
+  unitLabel = 'min',
+  rangeHint,
+}: RangeFieldProps) {
+  const clampedValue = Number.isFinite(value)
+    ? Math.min(Math.max(value, min), max)
+    : min;
+
+  const handleSliderChange = (raw: string) => {
+    const parsed = parseInt(raw, 10);
+    if (Number.isNaN(parsed)) {
+      return;
+    }
+    const next = Math.min(Math.max(parsed, min), max);
+    onChange(next);
+  };
+
+  const handleNumberChange = (raw: string) => {
+    if (raw.trim() === '') {
+      // Allow the field to clear without jumping the slider;
+      // keep the previous value until the user types a number.
+      return;
+    }
+    const parsed = parseInt(raw, 10);
+    if (Number.isNaN(parsed)) {
+      return;
+    }
+    const next = Math.min(Math.max(parsed, min), max);
+    onChange(next);
+  };
+
+  const rangePercent =
+    ((clampedValue - min) / Math.max(max - min, 1)) * 100;
+
+  const effectiveRangeHint =
+    rangeHint ??
+    (min === 0
+      ? `Up to ${max} ${unitLabel}`
+      : `${min}–${max} ${unitLabel}`);
+
+  return (
+    <div className="space-y-2">
+      <div className="flex items-baseline justify-between gap-2">
+        <label className="block text-sm font-medium text-gray-300">
+          {label}
+        </label>
+        <p className="text-[11px] text-gray-500">
+          {effectiveRangeHint}
+        </p>
+      </div>
+
+      <div className="space-y-2">
+        <div className="relative">
+          <div className="pointer-events-none absolute inset-y-0 left-0 right-0 rounded-full bg-charcoal-outline/60" />
+          <div
+            className="pointer-events-none absolute inset-y-0 left-0 rounded-full bg-primary-blue"
+            style={{ width: `${rangePercent}%` }}
+          />
+          <input
+            type="range"
+            min={min}
+            max={max}
+            step={step}
+            value={clampedValue}
+            onChange={(e) => handleSliderChange(e.target.value)}
+            disabled={disabled}
+            className="relative z-10 h-2 w-full appearance-none bg-transparent focus:outline-none accent-primary-blue"
+          />
+        </div>
+
+        <div className="flex items-center gap-2">
+          <div className="max-w-[96px]">
+            <Input
+              type="number"
+              value={Number.isFinite(value) ? String(clampedValue) : ''}
+              onChange={(e) => handleNumberChange(e.target.value)}
+              min={min}
+              max={max}
+              step={step}
+              disabled={disabled}
+              className="px-3 py-2 text-sm"
+              error={!!error}
+            />
+          </div>
+          <span className="text-xs text-gray-400">{unitLabel}</span>
+        </div>
+      </div>
+
+      {helperText && (
+        <p className="text-xs text-gray-500">{helperText}</p>
+      )}
+      {error && (
+        <p className="text-xs text-warning-amber mt-1">{error}</p>
+      )}
+    </div>
+  );
+}

apps/website/components/ui/SegmentedControl.tsx

@@ -0,0 +1,68 @@
+'use client';
+
+import { ButtonHTMLAttributes } from 'react';
+
+interface SegmentedControlOption {
+  value: string;
+  label: string;
+  description?: string;
+  disabled?: boolean;
+}
+
+interface SegmentedControlProps {
+  options: SegmentedControlOption[];
+  value: string;
+  onChange?: (value: string) => void;
+}
+
+export default function SegmentedControl({
+  options,
+  value,
+  onChange,
+}: SegmentedControlProps) {
+  const handleSelect = (optionValue: string, optionDisabled?: boolean) => {
+    if (!onChange || optionDisabled) return;
+    if (optionValue === value) return;
+    onChange(optionValue);
+  };
+
+  return (
+    <div className="inline-flex w-full flex-wrap gap-2 rounded-full bg-iron-gray/60 px-1 py-1">
+      {options.map((option) => {
+        const isSelected = option.value === value;
+        const baseClasses =
+          'flex-1 min-w-[140px] px-3 py-1.5 text-xs font-medium rounded-full transition-colors text-left';
+        const selectedClasses = isSelected
+          ? 'bg-primary-blue text-white'
+          : 'text-gray-300 hover:text-white hover:bg-charcoal-outline/80';
+        const disabledClasses = option.disabled
+          ? 'opacity-50 cursor-not-allowed hover:bg-transparent hover:text-gray-300'
+          : '';
+
+        const buttonProps: ButtonHTMLAttributes<HTMLButtonElement> = {
+          type: 'button',
+          onClick: () => handleSelect(option.value, option.disabled),
+          'aria-pressed': isSelected,
+          disabled: option.disabled,
+        };
+
+        return (
+          <button
+            key={option.value}
+            {...buttonProps}
+            className={`${baseClasses} ${selectedClasses} ${disabledClasses}`}
+          >
+            <div className="flex flex-col items-start">
+              <span>{option.label}</span>
+              {option.description && (
+                <span className="mt-0.5 text-[10px] text-gray-400">
+                  {option.description}
+                </span>
+              )}
+            </div>
+          </button>
+        );
+      })}
+    </div>
+  );
+}