fix(components): refactor to use design system

web/src/components/ui/segmented.tsx

@@ -1,80 +0,0 @@
-import { cn } from "@/lib/utils";
-
-export function Segmented<T extends string>({
-  className,
-  onChange,
-  options,
-  size = "sm",
-  value,
-}: SegmentedProps<T>) {
-  return (
-    <div
-      role="radiogroup"
-      className={cn(
-        "inline-flex border border-border bg-background/30",
-        className,
-      )}
-    >
-      {options.map((opt) => {
-        const active = opt.value === value;
-
-        return (
-          <button
-            key={opt.value}
-            type="button"
-            role="radio"
-            aria-checked={active}
-            onClick={() => onChange(opt.value)}
-            className={cn(
-              "font-mondwest tracking-[0.1em] uppercase",
-              "transition-colors cursor-pointer whitespace-nowrap",
-              "border-r border-border last:border-r-0",
-              "focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-foreground/30",
-              size === "sm" && "h-7 px-2.5 text-[0.65rem]",
-              size === "md" && "h-8 px-3 text-xs",
-              active
-                ? "bg-foreground/90 text-background"
-                : "text-muted-foreground hover:bg-foreground/10 hover:text-foreground",
-            )}
-          >
-            {opt.label}
-          </button>
-        );
-      })}
-    </div>
-  );
-}
-
-export function FilterGroup({
-  children,
-  className,
-  label,
-}: FilterGroupProps) {
-  return (
-    <div className={cn("flex items-center gap-2", className)}>
-      <span className="font-mondwest text-[0.65rem] tracking-[0.12em] uppercase text-muted-foreground/70">
-        {label}
-      </span>
-      {children}
-    </div>
-  );
-}
-
-interface FilterGroupProps {
-  children: React.ReactNode;
-  className?: string;
-  label: string;
-}
-
-interface SegmentedOption<T extends string> {
-  label: string;
-  value: T;
-}
-
-interface SegmentedProps<T extends string> {
-  className?: string;
-  onChange: (value: T) => void;
-  options: SegmentedOption<T>[];
-  size?: "sm" | "md";
-  value: T;
-}

web/src/components/ui/switch.tsx

@@ -1,40 +0,0 @@
-import { cn } from "@/lib/utils";
-
-export function Switch({
-  checked,
-  onCheckedChange,
-  className,
-  disabled,
-  id,
-}: {
-  checked: boolean;
-  onCheckedChange: (v: boolean) => void;
-  className?: string;
-  disabled?: boolean;
-  id?: string;
-}) {
-  return (
-    <button
-      type="button"
-      id={id}
-      role="switch"
-      aria-checked={checked}
-      disabled={disabled}
-      className={cn(
-        "peer inline-flex h-5 w-9 shrink-0 cursor-pointer items-center border border-border transition-colors",
-        "focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-foreground/30",
-        "disabled:cursor-not-allowed disabled:opacity-50",
-        checked ? "bg-foreground/15 border-foreground/30" : "bg-background",
-        className,
-      )}
-      onClick={() => onCheckedChange(!checked)}
-    >
-      <span
-        className={cn(
-          "pointer-events-none block h-3.5 w-3.5 transition-transform",
-          checked ? "translate-x-4 bg-foreground" : "translate-x-0.5 bg-muted-foreground",
-        )}
-      />
-    </button>
-  );
-}

web/src/components/ui/tabs.tsx

@@ -1,51 +0,0 @@
-import { useState } from "react";
-import { cn } from "@/lib/utils";
-
-export function Tabs({
-  defaultValue,
-  children,
-  className,
-}: {
-  defaultValue: string;
-  children: (active: string, setActive: (v: string) => void) => React.ReactNode;
-  className?: string;
-}) {
-  const [active, setActive] = useState(defaultValue);
-  return <div className={cn("flex flex-col gap-4", className)}>{children(active, setActive)}</div>;
-}
-
-export function TabsList({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) {
-  return (
-    <div
-      className={cn(
-        "inline-flex h-9 items-center justify-start border-b border-border text-muted-foreground",
-        className,
-      )}
-      {...props}
-    />
-  );
-}
-
-export function TabsTrigger({
-  active,
-  value,
-  onClick,
-  className,
-  ...props
-}: React.ButtonHTMLAttributes<HTMLButtonElement> & { active: boolean; value: string }) {
-  return (
-    <button
-      type="button"
-      className={cn(
-        "relative inline-flex items-center justify-center whitespace-nowrap px-3 py-1.5 font-mondwest text-xs tracking-[0.1em] uppercase transition-all cursor-pointer",
-        "focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring",
-        active
-          ? "text-foreground after:absolute after:bottom-0 after:left-0 after:right-0 after:h-px after:bg-foreground"
-          : "hover:text-foreground",
-        className,
-      )}
-      onClick={onClick}
-      {...props}
-    />
-  );
-}