@tangle-network/ui 1.0.0

package/src/primitives/stat-card.tsx

@@ -0,0 +1,97 @@
+import * as React from "react";
+import { cn } from "../lib/utils";
+import { Card } from "./card";
+
+export interface StatCardProps extends React.HTMLAttributes<HTMLDivElement> {
+  variant?: "default" | "sandbox";
+  title: string;
+  value: string | number;
+  subtitle?: string;
+  icon?: React.ReactNode;
+  trend?: {
+    value: number;
+    label?: string;
+  };
+}
+
+const StatCard = React.forwardRef<HTMLDivElement, StatCardProps>(
+  (
+    {
+      className,
+      variant = "default",
+      title,
+      value,
+      subtitle,
+      icon,
+      trend,
+      ...props
+    },
+    ref,
+  ) => {
+    const iconColors = {
+      default: "text-muted-foreground",
+      sandbox: "text-[var(--accent-text)]",
+    };
+
+    const trendColors = {
+      positive: "text-[var(--surface-success-text)]",
+      negative: "text-[var(--surface-danger-text)]",
+      neutral: "text-muted-foreground",
+    };
+
+    const trendStatus = trend
+      ? trend.value > 0
+        ? "positive"
+        : trend.value < 0
+          ? "negative"
+          : "neutral"
+      : null;
+
+    return (
+      <Card
+        ref={ref}
+        variant={variant}
+        className={cn("p-6", className)}
+        {...props}
+      >
+        <div className="flex items-start justify-between">
+          <div className="space-y-1">
+            <p className="text-muted-foreground text-sm">{title}</p>
+            <p className="font-bold text-3xl tracking-tight">{value}</p>
+            {subtitle && (
+              <p className="text-muted-foreground opacity-70 text-xs">{subtitle}</p>
+            )}
+            {trend && trendStatus && (
+              <div
+                className={cn(
+                  "flex items-center gap-1 text-sm",
+                  trendColors[trendStatus],
+                )}
+              >
+                {trend.value > 0 ? "↑" : trend.value < 0 ? "↓" : "→"}
+                <span>{Math.abs(trend.value)}%</span>
+                {trend.label && (
+                  <span className="text-muted-foreground">{trend.label}</span>
+                )}
+              </div>
+            )}
+          </div>
+          {icon && (
+            <div
+              className={cn(
+                "rounded-lg bg-muted/50 p-2",
+                variant === "sandbox" && "bg-[var(--accent-surface-soft)]",
+                iconColors[variant],
+              )}
+            >
+              {icon}
+            </div>
+          )}
+        </div>
+      </Card>
+    );
+  },
+);
+StatCard.displayName = "StatCard";
+
+export { StatCard };

package/src/primitives/switch.stories.tsx

@@ -0,0 +1,85 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import { Switch } from './switch'
+import { Label } from './label'
+
+const meta: Meta<typeof Switch> = {
+  title: 'Primitives/Switch',
+  component: Switch,
+  parameters: { layout: 'centered', backgrounds: { default: 'dark' } },
+}
+
+export default meta
+type Story = StoryObj<typeof Switch>
+
+export const Unchecked: Story = {
+  args: { defaultChecked: false },
+}
+
+export const Checked: Story = {
+  args: { defaultChecked: true },
+}
+
+export const Disabled: Story = {
+  args: { disabled: true },
+}
+
+export const DisabledChecked: Story = {
+  name: 'Disabled (checked)',
+  args: { disabled: true, defaultChecked: true },
+}
+
+export const WithLabel: Story = {
+  render: () => (
+    <div className="flex items-center gap-2">
+      <Switch id="auto-sleep" defaultChecked />
+      <Label htmlFor="auto-sleep">Auto-sleep after 30 min idle</Label>
+    </div>
+  ),
+}
+
+export const Overview: Story = {
+  name: 'Overview',
+  render: () => (
+    <div className="flex flex-col gap-6 p-6 w-80">
+      <div className="text-muted-foreground text-xs font-mono uppercase tracking-widest">States</div>
+      <div className="flex flex-col gap-4">
+        <div className="flex items-center justify-between">
+          <span className="text-sm text-muted-foreground">Off</span>
+          <Switch />
+        </div>
+        <div className="flex items-center justify-between">
+          <span className="text-sm text-muted-foreground">On</span>
+          <Switch defaultChecked />
+        </div>
+        <div className="flex items-center justify-between">
+          <span className="text-sm text-muted-foreground">Disabled off</span>
+          <Switch disabled />
+        </div>
+        <div className="flex items-center justify-between">
+          <span className="text-sm text-muted-foreground">Disabled on</span>
+          <Switch disabled defaultChecked />
+        </div>
+      </div>
+
+      <div className="text-muted-foreground text-xs font-mono uppercase tracking-widest mt-2">Settings panel</div>
+      <div className="rounded-xl border border-border bg-card p-4 flex flex-col gap-4">
+        {[
+          { id: 'auto-sleep', label: 'Auto-sleep after idle', checked: true },
+          { id: 'public-access', label: 'Public network access', checked: false },
+          { id: 'telemetry', label: 'Usage telemetry', checked: true },
+          { id: 'snapshots', label: 'Automatic snapshots', checked: false, disabled: true },
+        ].map(({ id, label, checked, disabled }) => (
+          <div key={id} className="flex items-center justify-between">
+            <Label
+              htmlFor={id}
+              className={disabled ? 'opacity-50' : ''}
+            >
+              {label}
+            </Label>
+            <Switch id={id} defaultChecked={checked} disabled={disabled} />
+          </div>
+        ))}
+      </div>
+    </div>
+  ),
+}

package/src/primitives/switch.tsx

@@ -0,0 +1,28 @@
+"use client";
+
+import * as SwitchPrimitives from "@radix-ui/react-switch";
+import * as React from "react";
+import { cn } from "../lib/utils";
+
+const Switch = React.forwardRef<
+  React.ElementRef<typeof SwitchPrimitives.Root>,
+  React.ComponentPropsWithoutRef<typeof SwitchPrimitives.Root>
+>(({ className, ...props }, ref) => (
+  <SwitchPrimitives.Root
+    className={cn(
+      "peer inline-flex h-5 w-9 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent shadow-sm transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=unchecked]:bg-input",
+      className,
+    )}
+    {...props}
+    ref={ref}
+  >
+    <SwitchPrimitives.Thumb
+      className={cn(
+        "pointer-events-none block h-4 w-4 rounded-full bg-background shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-4 data-[state=unchecked]:translate-x-0",
+      )}
+    />
+  </SwitchPrimitives.Root>
+));
+Switch.displayName = SwitchPrimitives.Root.displayName;
+
+export { Switch };

package/src/primitives/table.stories.tsx

@@ -0,0 +1,170 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import { Badge } from './badge'
+import {
+  Table,
+  TableBody,
+  TableCaption,
+  TableCell,
+  TableFooter,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from './table'
+
+const meta: Meta = {
+  title: 'Primitives/Table',
+  parameters: { layout: 'centered', backgrounds: { default: 'dark' } },
+}
+
+export default meta
+type Story = StoryObj
+
+type SessionStatus = 'running' | 'stopped' | 'creating' | 'warm'
+
+const sessions: {
+  id: string
+  image: string
+  region: string
+  status: SessionStatus
+  cpu: string
+  memory: string
+  started: string
+  duration: string
+}[] = [
+  {
+    id: 'sess_01j9x8k2m4n3p',
+    image: 'node:20-alpine',
+    region: 'us-east-1',
+    status: 'running',
+    cpu: '42%',
+    memory: '256 MB',
+    started: '14:02:11',
+    duration: '47m',
+  },
+  {
+    id: 'sess_01j9x7r9a1b2c',
+    image: 'python:3.12-slim',
+    region: 'us-east-1',
+    status: 'running',
+    cpu: '8%',
+    memory: '128 MB',
+    started: '13:55:44',
+    duration: '54m',
+  },
+  {
+    id: 'sess_01j9x6q8z0y1x',
+    image: 'golang:1.22-alpine',
+    region: 'eu-central-1',
+    status: 'warm',
+    cpu: '0%',
+    memory: '64 MB',
+    started: '13:40:02',
+    duration: '1h 9m',
+  },
+  {
+    id: 'sess_01j9x5p7w9v0u',
+    image: 'node:20-alpine',
+    region: 'us-west-2',
+    status: 'creating',
+    cpu: '—',
+    memory: '—',
+    started: '14:49:58',
+    duration: '< 1s',
+  },
+  {
+    id: 'sess_01j9x4o6v8u9t',
+    image: 'rust:1.77-slim',
+    region: 'us-east-1',
+    status: 'stopped',
+    cpu: '0%',
+    memory: '0 MB',
+    started: '11:22:30',
+    duration: '3h 27m',
+  },
+]
+
+export const SessionsTable: Story = {
+  name: 'Sessions Table',
+  render: () => (
+    <div className="w-[900px] rounded-xl border border-border bg-card">
+      <Table>
+        <TableHeader>
+          <TableRow>
+            <TableHead>Session ID</TableHead>
+            <TableHead>Image</TableHead>
+            <TableHead>Region</TableHead>
+            <TableHead>Status</TableHead>
+            <TableHead>CPU</TableHead>
+            <TableHead>Memory</TableHead>
+            <TableHead>Started</TableHead>
+            <TableHead>Duration</TableHead>
+          </TableRow>
+        </TableHeader>
+        <TableBody>
+          {sessions.map((s) => (
+            <TableRow key={s.id}>
+              <TableCell className="font-mono text-xs text-muted-foreground">{s.id}</TableCell>
+              <TableCell className="font-mono text-xs">{s.image}</TableCell>
+              <TableCell className="text-xs text-muted-foreground">{s.region}</TableCell>
+              <TableCell>
+                <Badge variant={s.status} dot>
+                  {s.status.charAt(0).toUpperCase() + s.status.slice(1)}
+                </Badge>
+              </TableCell>
+              <TableCell className="text-xs tabular-nums">{s.cpu}</TableCell>
+              <TableCell className="text-xs tabular-nums">{s.memory}</TableCell>
+              <TableCell className="font-mono text-xs text-muted-foreground">{s.started}</TableCell>
+              <TableCell className="text-xs tabular-nums">{s.duration}</TableCell>
+            </TableRow>
+          ))}
+        </TableBody>
+        <TableFooter>
+          <TableRow>
+            <TableCell colSpan={3} className="text-xs text-muted-foreground">
+              {sessions.length} sessions
+            </TableCell>
+            <TableCell className="text-xs">
+              <span className="text-green-400 font-medium">2 running</span>
+              {' · '}
+              <span className="text-muted-foreground">1 warm · 1 creating · 1 stopped</span>
+            </TableCell>
+            <TableCell colSpan={4} />
+          </TableRow>
+        </TableFooter>
+      </Table>
+    </div>
+  ),
+}
+
+export const SimpleTable: Story = {
+  name: 'Simple Table',
+  render: () => (
+    <div className="w-[480px] rounded-xl border border-border bg-card">
+      <Table>
+        <TableCaption>Recent billing activity</TableCaption>
+        <TableHeader>
+          <TableRow>
+            <TableHead>Date</TableHead>
+            <TableHead>Sessions</TableHead>
+            <TableHead className="text-right">Cost</TableHead>
+          </TableRow>
+        </TableHeader>
+        <TableBody>
+          {[
+            { date: '2026-03-29', sessions: 312, cost: '$4.82' },
+            { date: '2026-03-28', sessions: 287, cost: '$4.43' },
+            { date: '2026-03-27', sessions: 401, cost: '$6.19' },
+            { date: '2026-03-26', sessions: 198, cost: '$3.06' },
+            { date: '2026-03-25', sessions: 223, cost: '$3.44' },
+          ].map((row) => (
+            <TableRow key={row.date}>
+              <TableCell className="font-mono text-xs text-muted-foreground">{row.date}</TableCell>
+              <TableCell className="tabular-nums text-xs">{row.sessions}</TableCell>
+              <TableCell className="text-right tabular-nums text-xs font-medium">{row.cost}</TableCell>
+            </TableRow>
+          ))}
+        </TableBody>
+      </Table>
+    </div>
+  ),
+}

package/src/primitives/table.tsx

@@ -0,0 +1,116 @@
+import * as React from "react";
+import { cn } from "../lib/utils";
+
+const Table = React.forwardRef<
+  HTMLTableElement,
+  React.HTMLAttributes<HTMLTableElement>
+>(({ className, ...props }, ref) => (
+  <div className="relative w-full overflow-auto">
+    <table
+      ref={ref}
+      className={cn("w-full caption-bottom text-sm", className)}
+      {...props}
+    />
+  </div>
+));
+Table.displayName = "Table";
+
+const TableHeader = React.forwardRef<
+  HTMLTableSectionElement,
+  React.HTMLAttributes<HTMLTableSectionElement>
+>(({ className, ...props }, ref) => (
+  <thead ref={ref} className={cn("[&_tr]:border-b", className)} {...props} />
+));
+TableHeader.displayName = "TableHeader";
+
+const TableBody = React.forwardRef<
+  HTMLTableSectionElement,
+  React.HTMLAttributes<HTMLTableSectionElement>
+>(({ className, ...props }, ref) => (
+  <tbody
+    ref={ref}
+    className={cn("[&_tr:last-child]:border-0", className)}
+    {...props}
+  />
+));
+TableBody.displayName = "TableBody";
+
+const TableFooter = React.forwardRef<
+  HTMLTableSectionElement,
+  React.HTMLAttributes<HTMLTableSectionElement>
+>(({ className, ...props }, ref) => (
+  <tfoot
+    ref={ref}
+    className={cn(
+      "border-t bg-card font-medium [&>tr]:last:border-b-0",
+      className,
+    )}
+    {...props}
+  />
+));
+TableFooter.displayName = "TableFooter";
+
+const TableRow = React.forwardRef<
+  HTMLTableRowElement,
+  React.HTMLAttributes<HTMLTableRowElement>
+>(({ className, ...props }, ref) => (
+  <tr
+    ref={ref}
+    className={cn(
+      "border-border border-b transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted/50",
+      className,
+    )}
+    {...props}
+  />
+));
+TableRow.displayName = "TableRow";
+
+const TableHead = React.forwardRef<
+  HTMLTableCellElement,
+  React.ThHTMLAttributes<HTMLTableCellElement>
+>(({ className, ...props }, ref) => (
+  <th
+    ref={ref}
+    className={cn(
+      "h-12 px-4 text-left align-middle font-medium text-muted-foreground [&:has([role=checkbox])]:pr-0",
+      className,
+    )}
+    {...props}
+  />
+));
+TableHead.displayName = "TableHead";
+
+const TableCell = React.forwardRef<
+  HTMLTableCellElement,
+  React.TdHTMLAttributes<HTMLTableCellElement>
+>(({ className, ...props }, ref) => (
+  <td
+    ref={ref}
+    className={cn("p-4 align-middle [&:has([role=checkbox])]:pr-0", className)}
+    {...props}
+  />
+));
+TableCell.displayName = "TableCell";
+
+const TableCaption = React.forwardRef<
+  HTMLTableCaptionElement,
+  React.HTMLAttributes<HTMLTableCaptionElement>
+>(({ className, ...props }, ref) => (
+  <caption
+    ref={ref}
+    className={cn("mt-4 text-muted-foreground text-sm", className)}
+    {...props}
+  />
+));
+TableCaption.displayName = "TableCaption";
+
+export {
+  Table,
+  TableHeader,
+  TableBody,
+  TableFooter,
+  TableHead,
+  TableRow,
+  TableCell,
+  TableCaption,
+};

package/src/primitives/tabs.stories.tsx

@@ -0,0 +1,180 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import { Tabs, TabsList, TabsTrigger, TabsContent } from './tabs'
+
+const meta: Meta = {
+  title: 'Primitives/Tabs',
+  parameters: { layout: 'centered', backgrounds: { default: 'dark' } },
+}
+
+export default meta
+type Story = StoryObj
+
+export const Default: Story = {
+  render: () => (
+    <Tabs defaultValue="overview" className="w-96">
+      <TabsList>
+        <TabsTrigger value="overview">Overview</TabsTrigger>
+        <TabsTrigger value="logs">Logs</TabsTrigger>
+        <TabsTrigger value="metrics">Metrics</TabsTrigger>
+      </TabsList>
+      <TabsContent value="overview">
+        <p className="text-sm text-muted-foreground">Sandbox is running. Uptime: 4h 12m.</p>
+      </TabsContent>
+      <TabsContent value="logs">
+        <p className="text-sm text-muted-foreground font-mono">stdout: server listening on :3000</p>
+      </TabsContent>
+      <TabsContent value="metrics">
+        <p className="text-sm text-muted-foreground">CPU: 14% · Memory: 312 MB / 512 MB</p>
+      </TabsContent>
+    </Tabs>
+  ),
+}
+
+export const Pills: Story = {
+  render: () => (
+    <Tabs defaultValue="all" className="w-96">
+      <TabsList variant="pills">
+        <TabsTrigger value="all" variant="pills">All</TabsTrigger>
+        <TabsTrigger value="running" variant="pills">Running</TabsTrigger>
+        <TabsTrigger value="stopped" variant="pills">Stopped</TabsTrigger>
+        <TabsTrigger value="deleted" variant="pills">Deleted</TabsTrigger>
+      </TabsList>
+      <TabsContent value="all">
+        <p className="text-sm text-muted-foreground">Showing all 12 sandboxes.</p>
+      </TabsContent>
+      <TabsContent value="running">
+        <p className="text-sm text-muted-foreground">3 sandboxes currently running.</p>
+      </TabsContent>
+      <TabsContent value="stopped">
+        <p className="text-sm text-muted-foreground">7 sandboxes stopped.</p>
+      </TabsContent>
+      <TabsContent value="deleted">
+        <p className="text-sm text-muted-foreground">2 sandboxes deleted.</p>
+      </TabsContent>
+    </Tabs>
+  ),
+}
+
+export const Underline: Story = {
+  render: () => (
+    <Tabs defaultValue="settings" className="w-96">
+      <TabsList variant="underline">
+        <TabsTrigger value="settings" variant="underline">Settings</TabsTrigger>
+        <TabsTrigger value="env" variant="underline">Environment</TabsTrigger>
+        <TabsTrigger value="secrets" variant="underline">Secrets</TabsTrigger>
+        <TabsTrigger value="networking" variant="underline">Networking</TabsTrigger>
+      </TabsList>
+      <TabsContent value="settings">
+        <p className="text-sm text-muted-foreground">General sandbox settings.</p>
+      </TabsContent>
+      <TabsContent value="env">
+        <p className="text-sm text-muted-foreground font-mono">NODE_ENV=production</p>
+      </TabsContent>
+      <TabsContent value="secrets">
+        <p className="text-sm text-muted-foreground">3 secrets configured.</p>
+      </TabsContent>
+      <TabsContent value="networking">
+        <p className="text-sm text-muted-foreground">Port 3000 exposed publicly.</p>
+      </TabsContent>
+    </Tabs>
+  ),
+}
+
+export const WithDisabledTab: Story = {
+  name: 'With Disabled Tab',
+  render: () => (
+    <Tabs defaultValue="overview" className="w-96">
+      <TabsList>
+        <TabsTrigger value="overview">Overview</TabsTrigger>
+        <TabsTrigger value="logs">Logs</TabsTrigger>
+        <TabsTrigger value="billing" disabled>Billing</TabsTrigger>
+      </TabsList>
+      <TabsContent value="overview">
+        <p className="text-sm text-muted-foreground">Sandbox overview.</p>
+      </TabsContent>
+      <TabsContent value="logs">
+        <p className="text-sm text-muted-foreground font-mono">No recent log output.</p>
+      </TabsContent>
+    </Tabs>
+  ),
+}
+
+export const Overview: Story = {
+  name: 'Overview',
+  render: () => (
+    <div className="flex flex-col gap-10 p-6 w-[480px]">
+      <div>
+        <div className="text-muted-foreground text-xs font-mono uppercase tracking-widest mb-4">Default (segmented)</div>
+        <Tabs defaultValue="overview">
+          <TabsList>
+            <TabsTrigger value="overview">Overview</TabsTrigger>
+            <TabsTrigger value="logs">Logs</TabsTrigger>
+            <TabsTrigger value="metrics">Metrics</TabsTrigger>
+            <TabsTrigger value="config">Config</TabsTrigger>
+          </TabsList>
+          <TabsContent value="overview">
+            <div className="rounded-lg border border-border bg-card p-4 text-sm text-muted-foreground">
+              Status: Running · Region: us-east-1 · Uptime: 4h 12m
+            </div>
+          </TabsContent>
+          <TabsContent value="logs">
+            <div className="rounded-lg border border-border bg-card p-4 font-mono text-sm text-muted-foreground">
+              [INFO] server listening on :3000<br />
+              [INFO] connected to database
+            </div>
+          </TabsContent>
+          <TabsContent value="metrics">
+            <div className="rounded-lg border border-border bg-card p-4 text-sm text-muted-foreground">
+              CPU: 14% · Memory: 312 MB / 512 MB · Net I/O: 1.2 MB/s
+            </div>
+          </TabsContent>
+          <TabsContent value="config">
+            <div className="rounded-lg border border-border bg-card p-4 font-mono text-sm text-muted-foreground">
+              image: ubuntu:22.04 · cpu: 2 · memory: 512
+            </div>
+          </TabsContent>
+        </Tabs>
+      </div>
+
+      <div>
+        <div className="text-muted-foreground text-xs font-mono uppercase tracking-widest mb-4">Pills</div>
+        <Tabs defaultValue="all">
+          <TabsList variant="pills">
+            <TabsTrigger value="all" variant="pills">All</TabsTrigger>
+            <TabsTrigger value="running" variant="pills">Running</TabsTrigger>
+            <TabsTrigger value="stopped" variant="pills">Stopped</TabsTrigger>
+          </TabsList>
+          <TabsContent value="all">
+            <p className="text-sm text-muted-foreground mt-2">Showing all 12 sandboxes.</p>
+          </TabsContent>
+          <TabsContent value="running">
+            <p className="text-sm text-muted-foreground mt-2">3 sandboxes running.</p>
+          </TabsContent>
+          <TabsContent value="stopped">
+            <p className="text-sm text-muted-foreground mt-2">7 sandboxes stopped.</p>
+          </TabsContent>
+        </Tabs>
+      </div>
+
+      <div>
+        <div className="text-muted-foreground text-xs font-mono uppercase tracking-widest mb-4">Underline</div>
+        <Tabs defaultValue="settings">
+          <TabsList variant="underline">
+            <TabsTrigger value="settings" variant="underline">Settings</TabsTrigger>
+            <TabsTrigger value="env" variant="underline">Environment</TabsTrigger>
+            <TabsTrigger value="secrets" variant="underline">Secrets</TabsTrigger>
+          </TabsList>
+          <TabsContent value="settings">
+            <p className="text-sm text-muted-foreground">General sandbox settings.</p>
+          </TabsContent>
+          <TabsContent value="env">
+            <p className="text-sm text-muted-foreground font-mono">NODE_ENV=production</p>
+          </TabsContent>
+          <TabsContent value="secrets">
+            <p className="text-sm text-muted-foreground">3 secrets configured.</p>
+          </TabsContent>
+        </Tabs>
+      </div>
+    </div>
+  ),
+}