@tangle-network/ui 1.0.0

package/src/primitives/segmented-control.test.tsx

@@ -0,0 +1,328 @@
+import { describe, it, expect, vi } from "vitest"
+import { render, screen } from "@testing-library/react"
+import userEvent from "@testing-library/user-event"
+import { SegmentedControl, type SegmentedControlOption } from "./segmented-control"
+
+const options: SegmentedControlOption[] = [
+  { value: "all", label: "All" },
+  { value: "personal", label: "Personal" },
+  { value: "team", label: "Team" },
+]
+
+describe("SegmentedControl", () => {
+  it("renders all options as radio buttons", () => {
+    render(
+      <SegmentedControl value="all" onValueChange={vi.fn()} options={options} />,
+    )
+    const radios = screen.getAllByRole("radio")
+    expect(radios).toHaveLength(3)
+    expect(screen.getByText("All")).toBeInTheDocument()
+    expect(screen.getByText("Personal")).toBeInTheDocument()
+    expect(screen.getByText("Team")).toBeInTheDocument()
+  })
+
+  it("marks the active option with aria-checked", () => {
+    render(
+      <SegmentedControl value="personal" onValueChange={vi.fn()} options={options} />,
+    )
+    const personalRadio = screen.getByRole("radio", { name: "Personal" })
+    const allRadio = screen.getByRole("radio", { name: "All" })
+
+    expect(personalRadio).toHaveAttribute("aria-checked", "true")
+    expect(allRadio).toHaveAttribute("aria-checked", "false")
+  })
+
+  it("sets tabIndex 0 on active option and -1 on inactive options", () => {
+    render(
+      <SegmentedControl value="all" onValueChange={vi.fn()} options={options} />,
+    )
+    const radios = screen.getAllByRole("radio")
+    expect(radios[0]).toHaveAttribute("tabindex", "0")
+    expect(radios[1]).toHaveAttribute("tabindex", "-1")
+    expect(radios[2]).toHaveAttribute("tabindex", "-1")
+  })
+
+  it("calls onValueChange when clicking an inactive option", async () => {
+    const user = userEvent.setup()
+    const onChange = vi.fn()
+    render(
+      <SegmentedControl value="all" onValueChange={onChange} options={options} />,
+    )
+
+    await user.click(screen.getByRole("radio", { name: "Team" }))
+    expect(onChange).toHaveBeenCalledWith("team")
+  })
+
+  it("does not call onValueChange when clicking the already-active option", async () => {
+    const user = userEvent.setup()
+    const onChange = vi.fn()
+    render(
+      <SegmentedControl value="all" onValueChange={onChange} options={options} />,
+    )
+
+    await user.click(screen.getByRole("radio", { name: "All" }))
+    expect(onChange).not.toHaveBeenCalled()
+  })
+
+  it("renders adornment when provided", () => {
+    const withAdornment: SegmentedControlOption[] = [
+      { value: "all", label: "All", adornment: <span data-testid="count">42</span> },
+      { value: "personal", label: "Personal" },
+    ]
+    render(
+      <SegmentedControl value="all" onValueChange={vi.fn()} options={withAdornment} />,
+    )
+    expect(screen.getByTestId("count")).toBeInTheDocument()
+    expect(screen.getByText("42")).toBeInTheDocument()
+  })
+
+  // --- Keyboard navigation ---
+
+  it("navigates to next option on ArrowRight", async () => {
+    const user = userEvent.setup()
+    const onChange = vi.fn()
+    render(
+      <SegmentedControl value="all" onValueChange={onChange} options={options} />,
+    )
+
+    screen.getByRole("radio", { name: "All" }).focus()
+    await user.keyboard("{ArrowRight}")
+
+    expect(onChange).toHaveBeenCalledWith("personal")
+  })
+
+  it("moves DOM focus to the target option on arrow key", async () => {
+    const user = userEvent.setup()
+    render(
+      <SegmentedControl value="all" onValueChange={vi.fn()} options={options} />,
+    )
+
+    const personalRadio = screen.getByRole("radio", { name: "Personal" })
+    screen.getByRole("radio", { name: "All" }).focus()
+    await user.keyboard("{ArrowRight}")
+
+    expect(document.activeElement).toBe(personalRadio)
+  })
+
+  it("navigates to previous option on ArrowLeft", async () => {
+    const user = userEvent.setup()
+    const onChange = vi.fn()
+    render(
+      <SegmentedControl value="personal" onValueChange={onChange} options={options} />,
+    )
+
+    screen.getByRole("radio", { name: "Personal" }).focus()
+    await user.keyboard("{ArrowLeft}")
+
+    expect(onChange).toHaveBeenCalledWith("all")
+  })
+
+  it("wraps around on ArrowRight from last option", async () => {
+    const user = userEvent.setup()
+    const onChange = vi.fn()
+    render(
+      <SegmentedControl value="team" onValueChange={onChange} options={options} />,
+    )
+
+    screen.getByRole("radio", { name: "Team" }).focus()
+    await user.keyboard("{ArrowRight}")
+
+    expect(onChange).toHaveBeenCalledWith("all")
+  })
+
+  it("wraps around on ArrowLeft from first option", async () => {
+    const user = userEvent.setup()
+    const onChange = vi.fn()
+    render(
+      <SegmentedControl value="all" onValueChange={onChange} options={options} />,
+    )
+
+    screen.getByRole("radio", { name: "All" }).focus()
+    await user.keyboard("{ArrowLeft}")
+
+    expect(onChange).toHaveBeenCalledWith("team")
+  })
+
+  it("navigates to first option on Home", async () => {
+    const user = userEvent.setup()
+    const onChange = vi.fn()
+    render(
+      <SegmentedControl value="team" onValueChange={onChange} options={options} />,
+    )
+
+    screen.getByRole("radio", { name: "Team" }).focus()
+    await user.keyboard("{Home}")
+
+    expect(onChange).toHaveBeenCalledWith("all")
+  })
+
+  it("navigates to last option on End", async () => {
+    const user = userEvent.setup()
+    const onChange = vi.fn()
+    render(
+      <SegmentedControl value="all" onValueChange={onChange} options={options} />,
+    )
+
+    screen.getByRole("radio", { name: "All" }).focus()
+    await user.keyboard("{End}")
+
+    expect(onChange).toHaveBeenCalledWith("team")
+  })
+
+  it("does not fire onValueChange when Home is pressed on first option", async () => {
+    const user = userEvent.setup()
+    const onChange = vi.fn()
+    render(
+      <SegmentedControl value="all" onValueChange={onChange} options={options} />,
+    )
+
+    screen.getByRole("radio", { name: "All" }).focus()
+    await user.keyboard("{Home}")
+
+    expect(onChange).not.toHaveBeenCalled()
+  })
+
+  it("does not fire onValueChange when End is pressed on last option", async () => {
+    const user = userEvent.setup()
+    const onChange = vi.fn()
+    render(
+      <SegmentedControl value="team" onValueChange={onChange} options={options} />,
+    )
+
+    screen.getByRole("radio", { name: "Team" }).focus()
+    await user.keyboard("{End}")
+
+    expect(onChange).not.toHaveBeenCalled()
+  })
+
+  // --- Edge cases ---
+
+  it("does not crash on keyboard input when options array is empty", async () => {
+    const user = userEvent.setup()
+    const onChange = vi.fn()
+    const { container } = render(
+      <SegmentedControl value="all" onValueChange={onChange} options={[]} />,
+    )
+
+    const radiogroup = container.querySelector("[role='radiogroup']") as HTMLElement
+    radiogroup.focus()
+    await user.keyboard("{ArrowRight}")
+    await user.keyboard("{Home}")
+    await user.keyboard("{End}")
+
+    expect(onChange).not.toHaveBeenCalled()
+  })
+
+  it("gives first option tabIndex 0 when value does not match any option", () => {
+    render(
+      <SegmentedControl value={"unknown" as string} onValueChange={vi.fn()} options={options} />,
+    )
+    const radios = screen.getAllByRole("radio")
+    expect(radios[0]).toHaveAttribute("tabindex", "0")
+    expect(radios[1]).toHaveAttribute("tabindex", "-1")
+    expect(radios[2]).toHaveAttribute("tabindex", "-1")
+  })
+
+  it("navigates from first option when value does not match any option", async () => {
+    const user = userEvent.setup()
+    const onChange = vi.fn()
+    render(
+      <SegmentedControl value={"unknown" as string} onValueChange={onChange} options={options} />,
+    )
+
+    screen.getByRole("radio", { name: "All" }).focus()
+    await user.keyboard("{ArrowRight}")
+
+    expect(onChange).toHaveBeenCalledWith("personal")
+  })
+
+  it("supports ArrowDown as alias for ArrowRight", async () => {
+    const user = userEvent.setup()
+    const onChange = vi.fn()
+    render(
+      <SegmentedControl value="all" onValueChange={onChange} options={options} />,
+    )
+
+    screen.getByRole("radio", { name: "All" }).focus()
+    await user.keyboard("{ArrowDown}")
+
+    expect(onChange).toHaveBeenCalledWith("personal")
+  })
+
+  it("supports ArrowUp as alias for ArrowLeft", async () => {
+    const user = userEvent.setup()
+    const onChange = vi.fn()
+    render(
+      <SegmentedControl value="personal" onValueChange={onChange} options={options} />,
+    )
+
+    screen.getByRole("radio", { name: "Personal" }).focus()
+    await user.keyboard("{ArrowUp}")
+
+    expect(onChange).toHaveBeenCalledWith("all")
+  })
+
+  // --- Variants ---
+
+  it("applies row variant classes by default", () => {
+    render(
+      <SegmentedControl value="all" onValueChange={vi.fn()} options={options} />,
+    )
+    const radiogroup = screen.getByRole("radiogroup")
+    expect(radiogroup.className).toContain("flex-wrap")
+    expect(radiogroup.className).toContain("rounded-lg")
+    expect(radiogroup.className).toContain("bg-card")
+  })
+
+  it("applies tabs variant classes with nowrap", () => {
+    render(
+      <SegmentedControl
+        value="all"
+        onValueChange={vi.fn()}
+        options={options}
+        variant="tabs"
+      />,
+    )
+    const radiogroup = screen.getByRole("radiogroup")
+    expect(radiogroup.className).toContain("flex-nowrap")
+    expect(radiogroup.className).toContain("overflow-x-auto")
+    expect(radiogroup.className).toContain("border-b")
+    expect(radiogroup.className).not.toContain("bg-card")
+  })
+
+  it("passes aria-label to the radiogroup", () => {
+    render(
+      <SegmentedControl
+        value="all"
+        onValueChange={vi.fn()}
+        options={options}
+        aria-label="Scope filter"
+      />,
+    )
+    expect(screen.getByRole("radiogroup")).toHaveAttribute("aria-label", "Scope filter")
+  })
+
+  it("passes aria-labelledby to the radiogroup", () => {
+    render(
+      <SegmentedControl
+        value="all"
+        onValueChange={vi.fn()}
+        options={options}
+        aria-labelledby="heading-id"
+      />,
+    )
+    expect(screen.getByRole("radiogroup")).toHaveAttribute("aria-labelledby", "heading-id")
+  })
+
+  it("passes id to the radiogroup", () => {
+    render(
+      <SegmentedControl
+        value="all"
+        onValueChange={vi.fn()}
+        options={options}
+        id="scope-control"
+      />,
+    )
+    expect(screen.getByRole("radiogroup")).toHaveAttribute("id", "scope-control")
+  })
+})

package/src/primitives/segmented-control.tsx

@@ -0,0 +1,154 @@
+"use client"
+
+declare const process: { env: { NODE_ENV?: string } } | undefined
+
+import * as React from "react"
+import { cn } from "../lib/utils"
+
+/**
+ * Visually lightweight segmented control for single-value selection.
+ *
+ * Uses role="radiogroup" / role="radio" because this is a value-selector
+ * with no associated panels — not a tab interface. Arrow keys navigate
+ * between options (with wrapping), Home/End jump to first/last.
+ *
+ * **Accessibility:** Provide either `aria-label` or `aria-labelledby` — the
+ * ARIA spec requires every radiogroup to have an accessible name. A dev-mode
+ * console warning fires when both are omitted.
+ *
+ * Design rules baked into the default variant:
+ *   - Only the SELECTED segment shows a surface colour + accent text.
+ *   - Unselected segments have NO background — they're plain-text labels
+ *     that darken on hover. This keeps the selected segment as the
+ *     single visual anchor instead of the whole group competing with
+ *     itself.
+ */
+export interface SegmentedControlOption<T extends string = string> {
+  value: T
+  label: React.ReactNode
+  /** Rendered right of the label, typically a count or status pill. */
+  adornment?: React.ReactNode
+}
+
+export interface SegmentedControlProps<T extends string = string>
+  extends Pick<React.HTMLAttributes<HTMLDivElement>, "id" | "className" | "aria-label" | "aria-labelledby"> {
+  value: T
+  onValueChange: (value: T) => void
+  options: SegmentedControlOption<T>[]
+  /**
+   * Layout:
+   *   - "row"   — horizontal pill bar (default, fits in a header region)
+   *   - "tabs"  — horizontal with a bottom border so the selected pill
+   *              reads as a classic tab (used on the Team page)
+   */
+  variant?: "row" | "tabs"
+}
+
+export function SegmentedControl<T extends string = string>({
+  value,
+  onValueChange,
+  options,
+  variant = "row",
+  className,
+  ...rest
+}: SegmentedControlProps<T>) {
+  if (
+    typeof process !== "undefined" &&
+    process?.env?.NODE_ENV !== "production" &&
+    !rest["aria-label"] &&
+    !rest["aria-labelledby"]
+  ) {
+    console.warn(
+      '[SegmentedControl] role="radiogroup" requires either aria-label or aria-labelledby for accessibility.',
+    )
+  }
+
+  const optionRefs = React.useRef<Map<string, HTMLButtonElement>>(new Map())
+
+  const hasMatch = options.some((o) => o.value === value)
+
+  const handleKeyDown = (e: React.KeyboardEvent) => {
+    if (options.length === 0) return
+    // When no option matches value, start navigation from the first option
+    let idx = options.findIndex((o) => o.value === value)
+    if (idx === -1) idx = 0
+    let next: number | undefined
+    if (e.key === "ArrowRight" || e.key === "ArrowDown") next = (idx + 1) % options.length
+    else if (e.key === "ArrowLeft" || e.key === "ArrowUp") next = (idx - 1 + options.length) % options.length
+    else if (e.key === "Home") next = 0
+    else if (e.key === "End") next = options.length - 1
+    if (next !== undefined) {
+      e.preventDefault()
+      if (options[next].value !== value) {
+        onValueChange(options[next].value)
+      }
+      optionRefs.current.get(options[next].value)?.focus()
+    }
+  }
+
+  return (
+    <div
+      role="radiogroup"
+      id={rest.id}
+      aria-label={rest["aria-label"]}
+      aria-labelledby={rest["aria-labelledby"]}
+      onKeyDown={handleKeyDown}
+      className={cn(
+        "flex gap-1",
+        variant === "row" &&
+          "flex-wrap items-center rounded-lg border border-border bg-card p-1",
+        variant === "tabs" &&
+          "flex-nowrap items-end border-b border-border pb-0 overflow-x-auto",
+        className,
+      )}
+    >
+      {options.map((option, i) => {
+        const active = option.value === value
+        const focusable = active || (!hasMatch && i === 0)
+        return (
+          <button
+            key={option.value}
+            ref={(el) => {
+              if (el) optionRefs.current.set(option.value, el)
+              else optionRefs.current.delete(option.value)
+            }}
+            type="button"
+            role="radio"
+            aria-checked={active}
+            tabIndex={focusable ? 0 : -1}
+            onClick={() => {
+              if (!active) onValueChange(option.value)
+            }}
+            className={cn(
+              "relative inline-flex items-center gap-2 whitespace-nowrap text-sm transition-colors",
+              variant === "row" && "rounded-md px-3 py-1.5",
+              variant === "tabs" && "rounded-none border-b-2 -mb-px px-4 py-2",
+              // Active styling is the ONLY styled state — unselected
+              // segments stay transparent on purpose so they don't
+              // compete visually with the selection.
+              active
+                ? variant === "row"
+                  ? "border border-transparent bg-[var(--accent-surface)] text-[var(--accent-text)] font-semibold"
+                  : "border-[var(--accent-text)] text-[var(--accent-text)] font-semibold"
+                : variant === "row"
+                  ? "border border-transparent text-muted-foreground hover:text-foreground"
+                  : "border-transparent text-muted-foreground hover:text-foreground",
+            )}
+          >
+            <span>{option.label}</span>
+            {option.adornment && (
+              <span
+                className={cn(
+                  "text-xs",
+                  active ? "text-[var(--accent-text)]/80" : "text-muted-foreground",
+                )}
+              >
+                {option.adornment}
+              </span>
+            )}
+          </button>
+        )
+      })}
+    </div>
+  )
+}

package/src/primitives/select.stories.tsx

@@ -0,0 +1,164 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import {
+  Select,
+  SelectContent,
+  SelectGroup,
+  SelectItem,
+  SelectLabel,
+  SelectSeparator,
+  SelectTrigger,
+  SelectValue,
+} from './select'
+
+const meta: Meta = {
+  title: 'Primitives/Select',
+  parameters: { layout: 'centered', backgrounds: { default: 'dark' } },
+}
+
+export default meta
+type Story = StoryObj
+
+export const Default: Story = {
+  render: () => (
+    <Select>
+      <SelectTrigger className="w-52">
+        <SelectValue placeholder="Select region" />
+      </SelectTrigger>
+      <SelectContent>
+        <SelectItem value="us-east-1">US East (N. Virginia)</SelectItem>
+        <SelectItem value="us-west-2">US West (Oregon)</SelectItem>
+        <SelectItem value="eu-west-1">EU (Ireland)</SelectItem>
+        <SelectItem value="ap-southeast-1">Asia Pacific (Singapore)</SelectItem>
+      </SelectContent>
+    </Select>
+  ),
+}
+
+export const WithGroupsAndSeparator: Story = {
+  name: 'With Groups & Separator',
+  render: () => (
+    <Select>
+      <SelectTrigger className="w-56">
+        <SelectValue placeholder="Select runtime" />
+      </SelectTrigger>
+      <SelectContent>
+        <SelectGroup>
+          <SelectLabel>Node.js</SelectLabel>
+          <SelectItem value="node-18">Node.js 18 LTS</SelectItem>
+          <SelectItem value="node-20">Node.js 20 LTS</SelectItem>
+          <SelectItem value="node-22">Node.js 22</SelectItem>
+        </SelectGroup>
+        <SelectSeparator />
+        <SelectGroup>
+          <SelectLabel>Python</SelectLabel>
+          <SelectItem value="python-310">Python 3.10</SelectItem>
+          <SelectItem value="python-311">Python 3.11</SelectItem>
+          <SelectItem value="python-312">Python 3.12</SelectItem>
+        </SelectGroup>
+        <SelectSeparator />
+        <SelectGroup>
+          <SelectLabel>Go</SelectLabel>
+          <SelectItem value="go-121">Go 1.21</SelectItem>
+          <SelectItem value="go-122">Go 1.22</SelectItem>
+        </SelectGroup>
+      </SelectContent>
+    </Select>
+  ),
+}
+
+export const WithDefaultValue: Story = {
+  name: 'Pre-selected Value',
+  render: () => (
+    <Select defaultValue="us-east-1">
+      <SelectTrigger className="w-52">
+        <SelectValue />
+      </SelectTrigger>
+      <SelectContent>
+        <SelectItem value="us-east-1">US East (N. Virginia)</SelectItem>
+        <SelectItem value="us-west-2">US West (Oregon)</SelectItem>
+        <SelectItem value="eu-west-1">EU (Ireland)</SelectItem>
+      </SelectContent>
+    </Select>
+  ),
+}
+
+export const Disabled: Story = {
+  render: () => (
+    <Select disabled>
+      <SelectTrigger className="w-52">
+        <SelectValue placeholder="Locked to us-east-1" />
+      </SelectTrigger>
+      <SelectContent>
+        <SelectItem value="us-east-1">US East (N. Virginia)</SelectItem>
+      </SelectContent>
+    </Select>
+  ),
+}
+
+export const WithDisabledItem: Story = {
+  name: 'With Disabled Item',
+  render: () => (
+    <Select>
+      <SelectTrigger className="w-52">
+        <SelectValue placeholder="Select tier" />
+      </SelectTrigger>
+      <SelectContent>
+        <SelectItem value="free">Free</SelectItem>
+        <SelectItem value="pro">Pro</SelectItem>
+        <SelectItem value="enterprise" disabled>
+          Enterprise (contact sales)
+        </SelectItem>
+      </SelectContent>
+    </Select>
+  ),
+}
+
+export const Overview: Story = {
+  name: 'Overview',
+  render: () => (
+    <div className="flex flex-col gap-6 p-6 w-72">
+      <div className="text-muted-foreground text-xs font-mono uppercase tracking-widest">Region</div>
+      <Select defaultValue="us-east-1">
+        <SelectTrigger>
+          <SelectValue />
+        </SelectTrigger>
+        <SelectContent>
+          <SelectItem value="us-east-1">US East (N. Virginia)</SelectItem>
+          <SelectItem value="us-west-2">US West (Oregon)</SelectItem>
+          <SelectItem value="eu-west-1">EU (Ireland)</SelectItem>
+          <SelectItem value="ap-southeast-1">Asia Pacific (Singapore)</SelectItem>
+        </SelectContent>
+      </Select>
+
+      <div className="text-muted-foreground text-xs font-mono uppercase tracking-widest">Runtime</div>
+      <Select>
+        <SelectTrigger>
+          <SelectValue placeholder="Select runtime..." />
+        </SelectTrigger>
+        <SelectContent>
+          <SelectGroup>
+            <SelectLabel>Node.js</SelectLabel>
+            <SelectItem value="node-20">Node.js 20 LTS</SelectItem>
+            <SelectItem value="node-22">Node.js 22</SelectItem>
+          </SelectGroup>
+          <SelectSeparator />
+          <SelectGroup>
+            <SelectLabel>Python</SelectLabel>
+            <SelectItem value="python-311">Python 3.11</SelectItem>
+            <SelectItem value="python-312">Python 3.12</SelectItem>
+          </SelectGroup>
+        </SelectContent>
+      </Select>
+
+      <div className="text-muted-foreground text-xs font-mono uppercase tracking-widest">Disabled</div>
+      <Select disabled>
+        <SelectTrigger>
+          <SelectValue placeholder="Locked to current plan" />
+        </SelectTrigger>
+        <SelectContent>
+          <SelectItem value="free">Free</SelectItem>
+        </SelectContent>
+      </Select>
+    </div>
+  ),
+}