feat(react): add UI primitives for source forms (#216)

Introduces four shared UI primitives that the upcoming source-form refactor
relies on, keeping the refactor PR focused on wiring rather than new atoms:

- <FilterTabs> — compact tab selector used by the shared auth section.
- <FloatActions> — sticky bottom action bar for save/cancel on long forms
  (Claude / ElevenLabs-style editing UX).
- <IOSSpinner> — iOS-style blade spinner for subtle inline loading states,
  paired with a new keyframe in globals.css.
- <Textarea> — adds an optional maxRows prop so source-form preview/error
  panels can cap their height without bespoke wrappers.

No consumers updated in this PR; follow-up PRs adopt them.

Co-authored-by: mrzmyr <mrzmyr@users.noreply.github.com>

Author: RhysSullivan

packages/react/src/components/filter-tabs.tsx

@@ -0,0 +1,57 @@
+"use client";
+
+import type { ReactNode } from "react";
+import { Button } from "./button";
+import { cn } from "../lib/utils";
+
+export interface FilterTab<T extends string = string> {
+  label: ReactNode;
+  value: T;
+  count?: number;
+}
+
+interface FilterTabsProps<T extends string = string> {
+  tabs: FilterTab<T>[];
+  value: T;
+  onChange: (value: T) => void;
+}
+
+export function FilterTabs<T extends string = string>({
+  tabs,
+  value,
+  onChange,
+}: FilterTabsProps<T>) {
+  return (
+    <div className="flex flex-wrap items-center gap-1">
+      {tabs.map((tab) => {
+        const isActive = value === tab.value;
+        return (
+          <Button
+            variant="outline"
+            size="sm"
+            key={tab.value}
+            onClick={() => onChange(tab.value)}
+            className={cn(
+              "inline-flex items-center justify-center gap-1.5 rounded-full px-2.5 py-1 text-sm font-medium shadow-none transition-transform duration-100 active:scale-[0.98]",
+              isActive
+                ? "border-border bg-background text-foreground"
+                : "border-transparent bg-transparent text-muted-foreground hover:bg-muted hover:text-foreground",
+            )}
+          >
+            {tab.label}
+            {tab.count !== undefined && (
+              <span
+                className={cn(
+                  "inline-flex h-[18px] min-w-[18px] items-center justify-center rounded-full px-1 text-xs tabular-nums",
+                  isActive ? "bg-muted text-foreground" : "bg-muted/60 text-muted-foreground",
+                )}
+              >
+                {tab.count}
+              </span>
+            )}
+          </Button>
+        );
+      })}
+    </div>
+  );
+}

packages/react/src/components/float-actions.tsx

@@ -0,0 +1,35 @@
+import * as React from "react";
+import { useRouterState } from "@tanstack/react-router";
+
+import { cn } from "../lib/utils";
+import { CardStack } from "./card-stack";
+
+/**
+ * A floating action bar that pins itself to the bottom of the nearest
+ * positioned ancestor (usually a scroll container with `position: relative`).
+ *
+ * Rendered as a `CardStack` so it picks up the card visual — wrap action
+ * buttons as children; they'll be right-aligned inside the card.
+ *
+ * To pin to the bottom even when content is short, the parent should be a
+ * flex column filling the scroll container (so `mt-auto` pushes the actions
+ * down). `sticky bottom-4` also keeps it visible while scrolling long content.
+ *
+ * Hidden while the router is navigating/loading so the actions don't flash
+ * on top of a loading state.
+ */
+function FloatActions({ className, children }: { className?: string; children: React.ReactNode }) {
+  const isLoading = useRouterState({ select: (s) => s.isLoading });
+
+  if (isLoading) {
+    return null;
+  }
+
+  return (
+    <CardStack className={cn("sticky shadow-lg bottom-4 left-0 right-0 mt-auto w-full", className)}>
+      <div className="flex items-center justify-end gap-3 px-4 py-3">{children}</div>
+    </CardStack>
+  );
+}
+
+export { FloatActions };

packages/react/src/components/spinner.tsx

@@ -13,4 +13,36 @@ function Spinner({ className, ...props }: React.ComponentProps<"svg">) {
   );
 }
 
-export { Spinner };
+const IOS_SPINNER_BLADES = 12;
+
+function IOSSpinner({ className, ...props }: React.ComponentProps<"svg">) {
+  return (
+    <svg
+      role="status"
+      aria-label="Loading"
+      viewBox="0 0 24 24"
+      className={cn("size-4 text-muted-foreground", className)}
+      {...props}
+    >
+      {Array.from({ length: IOS_SPINNER_BLADES }).map((_, i) => (
+        <rect
+          key={i}
+          x="11"
+          y="2"
+          width="2"
+          height="6"
+          rx="1"
+          fill="currentColor"
+          transform={`rotate(${(360 / IOS_SPINNER_BLADES) * i} 12 12)`}
+          style={{
+            animation: "ios-spinner-fade 1s linear infinite",
+            animationDelay: `${(i / IOS_SPINNER_BLADES) * 1 - 1}s`,
+            opacity: 0.25,
+          }}
+        />
+      ))}
+    </svg>
+  );
+}
+
+export { Spinner, IOSSpinner };

packages/react/src/components/textarea.tsx

@@ -2,7 +2,11 @@ import * as React from "react";
 
 import { cn } from "../lib/utils";
 
-function Textarea({ className, ...props }: React.ComponentProps<"textarea">) {
+function Textarea({
+  className,
+  maxRows,
+  ...props
+}: React.ComponentProps<"textarea"> & { maxRows?: number }) {
   return (
     // oxlint-disable-next-line react/forbid-elements
     <textarea
@@ -12,6 +16,7 @@ function Textarea({ className, ...props }: React.ComponentProps<"textarea">) {
         className,
       )}
       {...props}
+      style={{ maxHeight: maxRows ? `${maxRows * 1.5}rem` : undefined }}
     />
   );
 }

packages/react/src/styles/globals.css

@@ -159,3 +159,12 @@
   --sidebar-border: hsl(240 3.7% 15.9%);
   --sidebar-ring: hsl(217.2 91.2% 59.8%);
 }
+
+@keyframes ios-spinner-fade {
+  0% {
+    opacity: 1;
+  }
+  100% {
+    opacity: 0.25;
+  }
+}