@tangle-network/ui 1.0.0

package/src/primitives/avatar.stories.tsx

@@ -0,0 +1,95 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import { Avatar, AvatarImage, AvatarFallback } from './avatar'
+
+const meta: Meta<typeof Avatar> = {
+  title: 'Primitives/Avatar',
+  component: Avatar,
+  parameters: { layout: 'centered', backgrounds: { default: 'dark' } },
+}
+
+export default meta
+type Story = StoryObj<typeof Avatar>
+
+export const WithImage: Story = {
+  render: () => (
+    <Avatar>
+      <AvatarImage src="https://github.com/shadcn.png" alt="shadcn" />
+      <AvatarFallback>SC</AvatarFallback>
+    </Avatar>
+  ),
+}
+
+export const Fallback: Story = {
+  render: () => (
+    <Avatar>
+      <AvatarImage src="/broken.png" alt="Broken" />
+      <AvatarFallback>JD</AvatarFallback>
+    </Avatar>
+  ),
+}
+
+export const FallbackOnly: Story = {
+  render: () => (
+    <Avatar>
+      <AvatarFallback>AK</AvatarFallback>
+    </Avatar>
+  ),
+}
+
+export const CustomSize: Story = {
+  render: () => (
+    <Avatar className="h-16 w-16">
+      <AvatarFallback className="text-lg">BL</AvatarFallback>
+    </Avatar>
+  ),
+}
+
+export const Overview: Story = {
+  name: 'Overview',
+  render: () => (
+    <div className="flex flex-col gap-6 p-6">
+      <div className="text-muted-foreground text-xs font-mono uppercase tracking-widest">Sizes</div>
+      <div className="flex items-center gap-4">
+        <Avatar className="h-6 w-6">
+          <AvatarFallback className="text-xs">XS</AvatarFallback>
+        </Avatar>
+        <Avatar className="h-8 w-8">
+          <AvatarFallback className="text-xs">SM</AvatarFallback>
+        </Avatar>
+        <Avatar>
+          <AvatarFallback>MD</AvatarFallback>
+        </Avatar>
+        <Avatar className="h-14 w-14">
+          <AvatarFallback>LG</AvatarFallback>
+        </Avatar>
+        <Avatar className="h-20 w-20">
+          <AvatarFallback className="text-xl">XL</AvatarFallback>
+        </Avatar>
+      </div>
+      <div className="text-muted-foreground text-xs font-mono uppercase tracking-widest mt-2">Team</div>
+      <div className="flex items-center gap-3">
+        {[
+          { initials: 'AK', label: 'Alex Kim' },
+          { initials: 'JD', label: 'Jane Doe' },
+          { initials: 'MR', label: 'Marco Rossi' },
+          { initials: 'SP', label: 'Sara Park' },
+        ].map(({ initials, label }) => (
+          <div key={initials} className="flex flex-col items-center gap-1">
+            <Avatar>
+              <AvatarFallback>{initials}</AvatarFallback>
+            </Avatar>
+            <span className="text-muted-foreground text-xs">{label}</span>
+          </div>
+        ))}
+      </div>
+      <div className="text-muted-foreground text-xs font-mono uppercase tracking-widest mt-2">Stacked</div>
+      <div className="flex -space-x-2">
+        {['AK', 'JD', 'MR', 'SP', '+4'].map((label) => (
+          <Avatar key={label} className="border-2 border-background">
+            <AvatarFallback className="text-xs">{label}</AvatarFallback>
+          </Avatar>
+        ))}
+      </div>
+    </div>
+  ),
+}

package/src/primitives/avatar.tsx

@@ -0,0 +1,47 @@
+import * as AvatarPrimitive from "@radix-ui/react-avatar";
+import * as React from "react";
+import { cn } from "../lib/utils";
+
+const Avatar = React.forwardRef<
+  React.ElementRef<typeof AvatarPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Root>
+>(({ className, ...props }, ref) => (
+  <AvatarPrimitive.Root
+    ref={ref}
+    className={cn(
+      "relative flex h-10 w-10 shrink-0 overflow-hidden rounded-full",
+      className,
+    )}
+    {...props}
+  />
+));
+Avatar.displayName = AvatarPrimitive.Root.displayName;
+
+const AvatarImage = React.forwardRef<
+  React.ElementRef<typeof AvatarPrimitive.Image>,
+  React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Image>
+>(({ className, ...props }, ref) => (
+  <AvatarPrimitive.Image
+    ref={ref}
+    className={cn("aspect-square h-full w-full", className)}
+    {...props}
+  />
+));
+AvatarImage.displayName = AvatarPrimitive.Image.displayName;
+
+const AvatarFallback = React.forwardRef<
+  React.ElementRef<typeof AvatarPrimitive.Fallback>,
+  React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Fallback>
+>(({ className, ...props }, ref) => (
+  <AvatarPrimitive.Fallback
+    ref={ref}
+    className={cn(
+      "flex h-full w-full items-center justify-center rounded-full bg-muted font-medium text-sm",
+      className,
+    )}
+    {...props}
+  />
+));
+AvatarFallback.displayName = AvatarPrimitive.Fallback.displayName;
+
+export { Avatar, AvatarImage, AvatarFallback };

package/src/primitives/badge.stories.tsx

@@ -0,0 +1,57 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import { Badge } from './badge'
+
+const meta: Meta<typeof Badge> = {
+  title: 'Primitives/Badge',
+  component: Badge,
+  parameters: { layout: 'centered' },
+  args: { children: 'Label' },
+}
+
+export default meta
+type Story = StoryObj<typeof Badge>
+
+export const Default: Story = { args: { variant: 'default' } }
+export const Secondary: Story = { args: { variant: 'secondary', children: 'Secondary' } }
+export const Outline: Story = { args: { variant: 'outline', children: 'Outline' } }
+export const Sandbox: Story = { args: { variant: 'sandbox', children: 'Sandbox' } }
+export const Success: Story = { args: { variant: 'success', children: 'Success' } }
+export const Warning: Story = { args: { variant: 'warning', children: 'Warning' } }
+export const Error: Story = { args: { variant: 'error', children: 'Error' } }
+export const Info: Story = { args: { variant: 'info', children: 'Info' } }
+
+// Status variants
+export const Running: Story = { args: { variant: 'running', dot: true, children: 'Running' } }
+export const Creating: Story = { args: { variant: 'creating', dot: true, children: 'Creating' } }
+export const Stopped: Story = { args: { variant: 'stopped', dot: true, children: 'Stopped' } }
+export const Warm: Story = { args: { variant: 'warm', dot: true, children: 'Warm' } }
+export const Cold: Story = { args: { variant: 'cold', dot: true, children: 'Cold' } }
+export const Deleted: Story = { args: { variant: 'deleted', dot: true, children: 'Deleted' } }
+
+export const AllVariants: Story = {
+  name: 'All Variants',
+  render: () => (
+    <div className="flex flex-col gap-4 p-6">
+      <div className="text-muted-foreground text-xs font-mono uppercase tracking-widest">Semantic</div>
+      <div className="flex flex-wrap gap-2">
+        <Badge variant="default">Default</Badge>
+        <Badge variant="secondary">Secondary</Badge>
+        <Badge variant="outline">Outline</Badge>
+        <Badge variant="sandbox">Sandbox</Badge>
+        <Badge variant="success">Success</Badge>
+        <Badge variant="warning">Warning</Badge>
+        <Badge variant="error">Error</Badge>
+        <Badge variant="info">Info</Badge>
+      </div>
+      <div className="text-muted-foreground text-xs font-mono uppercase tracking-widest mt-2">Operational Status</div>
+      <div className="flex flex-wrap gap-2">
+        <Badge variant="running" dot>Running</Badge>
+        <Badge variant="creating" dot>Creating</Badge>
+        <Badge variant="stopped" dot>Stopped</Badge>
+        <Badge variant="warm" dot>Warm</Badge>
+        <Badge variant="cold" dot>Cold</Badge>
+        <Badge variant="deleted" dot>Deleted</Badge>
+      </div>
+    </div>
+  ),
+}

package/src/primitives/badge.tsx

@@ -0,0 +1,97 @@
+import { cva, type VariantProps } from "class-variance-authority";
+import type * as React from "react";
+import { cn } from "../lib/utils";
+
+const badgeVariants = cva(
+  "inline-flex items-center gap-1.5 rounded-full border px-2.5 py-0.5 font-medium text-xs transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
+  {
+    variants: {
+      variant: {
+        default: "border-transparent bg-primary text-primary-foreground",
+        secondary: "border-transparent bg-secondary text-secondary-foreground",
+        destructive: "border-transparent bg-destructive/15 border-destructive/25 text-destructive",
+        outline: "text-foreground border-border",
+        success:
+          "border-[var(--surface-success-border)] bg-[var(--surface-success-bg)] text-[var(--surface-success-text)]",
+        warning:
+          "border-[var(--surface-warning-border)] bg-[var(--surface-warning-bg)] text-[var(--surface-warning-text)]",
+        error:
+          "border-[var(--surface-danger-border)] bg-[var(--surface-danger-bg)] text-[var(--surface-danger-text)]",
+        info:
+          "border-[var(--surface-info-border)] bg-[var(--surface-info-bg)] text-[var(--surface-info-text)]",
+        sandbox:
+          "border-border bg-[var(--accent-surface-soft)] text-[var(--accent-text)]",
+        /* Operational status variants */
+        running:
+          "border-[var(--surface-teal-border)] bg-[var(--surface-teal-bg)] text-[var(--surface-teal-text)]",
+        creating:
+          "border-[var(--surface-violet-border)] bg-[var(--surface-violet-bg)] text-[var(--surface-violet-text)]",
+        stopped:
+          "border-[var(--surface-warning-border)] bg-[var(--surface-warning-bg)] text-[var(--surface-warning-text)]",
+        warm:
+          "border-[var(--surface-orange-border)] bg-[var(--surface-orange-bg)] text-[var(--surface-orange-text)]",
+        cold:
+          "border-[var(--surface-info-border)] bg-[var(--surface-info-bg)] text-[var(--surface-info-text)]",
+        deleted:
+          "border-[var(--surface-neutral-border)] bg-[var(--surface-neutral-bg)] text-[var(--surface-neutral-text)]",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  },
+);
+
+export type BadgeVariant =
+  | "default"
+  | "secondary"
+  | "destructive"
+  | "outline"
+  | "success"
+  | "warning"
+  | "error"
+  | "info"
+  | "sandbox"
+  | "running"
+  | "creating"
+  | "stopped"
+  | "warm"
+  | "cold"
+  | "deleted"
+  | null;
+
+export interface BadgeProps extends VariantProps<typeof badgeVariants> {
+  variant?: BadgeVariant;
+  className?: string;
+  children?: React.ReactNode;
+  dot?: boolean;
+  onClick?: React.MouseEventHandler<HTMLDivElement>;
+  style?: React.CSSProperties;
+  id?: string;
+  role?: React.AriaRole;
+  title?: string;
+  [key: string]: unknown;
+}
+
+const statusDotClass: Record<string, string> = {
+  running: "status-dot status-dot-running",
+  creating: "status-dot status-dot-creating",
+  stopped: "status-dot status-dot-stopped",
+  warm: "status-dot status-dot-warm",
+  cold: "status-dot status-dot-cold",
+  error: "status-dot status-dot-error",
+  deleted: "status-dot status-dot-deleted",
+};
+
+function Badge({ className, variant, dot, children, ...props }: BadgeProps) {
+  const dotClass = dot && variant ? statusDotClass[variant] : null;
+
+  return (
+    <div className={cn(badgeVariants({ variant }), className)} {...props}>
+      {dotClass && <span className={dotClass} aria-hidden />}
+      {children}
+    </div>
+  );
+}
+
+export { Badge, badgeVariants };

package/src/primitives/button.stories.tsx

@@ -0,0 +1,48 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import { Button } from './button'
+
+const meta: Meta<typeof Button> = {
+  title: 'Primitives/Button',
+  component: Button,
+  parameters: { layout: 'centered' },
+  args: { children: 'Button' },
+}
+
+export default meta
+type Story = StoryObj<typeof Button>
+
+export const Default: Story = {}
+export const Sandbox: Story = { args: { variant: 'sandbox', children: 'Get Started' } }
+export const Secondary: Story = { args: { variant: 'secondary' } }
+export const Outline: Story = { args: { variant: 'outline' } }
+export const Ghost: Story = { args: { variant: 'ghost' } }
+export const Destructive: Story = { args: { variant: 'destructive', children: 'Delete' } }
+export const Loading: Story = { args: { loading: true, children: 'Loading...' } }
+
+export const AllSizes: Story = {
+  name: 'All Sizes',
+  render: () => (
+    <div className="flex items-center gap-3">
+      <Button size="sm">Small</Button>
+      <Button>Default</Button>
+      <Button size="lg">Large</Button>
+      <Button size="xl">XLarge</Button>
+    </div>
+  ),
+}
+
+export const AllVariants: Story = {
+  name: 'All Variants',
+  render: () => (
+    <div className="flex flex-col gap-4 p-6">
+      <div className="flex flex-wrap gap-2">
+        <Button variant="default">Default</Button>
+        <Button variant="sandbox">Sandbox</Button>
+        <Button variant="secondary">Secondary</Button>
+        <Button variant="outline">Outline</Button>
+        <Button variant="ghost">Ghost</Button>
+        <Button variant="destructive">Destructive</Button>
+      </div>
+    </div>
+  ),
+}

package/src/primitives/button.tsx

@@ -0,0 +1,115 @@
+import { Slot } from "@radix-ui/react-slot";
+import { cva, type VariantProps } from "class-variance-authority";
+import * as React from "react";
+import { cn } from "../lib/utils";
+
+const buttonVariants = cva(
+  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-lg font-medium text-sm transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
+  {
+    variants: {
+      variant: {
+        default:
+          "bg-primary text-primary-foreground hover:bg-primary/90 active:scale-[0.97] duration-[var(--transition-fast)]",
+        destructive:
+          "bg-destructive text-destructive-foreground hover:bg-destructive/90 active:scale-[0.97] duration-[var(--transition-fast)]",
+        outline:
+          "border border-border bg-card hover:bg-muted active:scale-[0.97] duration-[var(--transition-fast)] text-foreground",
+        secondary:
+          "bg-muted border border-border text-foreground hover:bg-muted/80 active:scale-[0.97] duration-[var(--transition-fast)]",
+        ghost:
+          "hover:bg-muted hover:text-foreground duration-[var(--transition-fast)] text-muted-foreground border border-transparent",
+        link: "text-primary underline-offset-4 hover:underline",
+        sandbox:
+          "bg-[var(--btn-primary-bg)] text-[var(--btn-primary-text)] border border-[var(--border-accent)] hover:bg-[var(--btn-primary-hover)] active:scale-[0.97] duration-[var(--transition-fast)]",
+      },
+      size: {
+        default: "h-[var(--control-height)] px-4 py-2",
+        sm: "h-8 rounded-md px-3 text-xs",
+        lg: "h-11 rounded-lg px-7 text-sm",
+        xl: "h-13 rounded-xl px-9 text-base",
+        icon: "h-[var(--control-height)] w-[var(--control-height)]",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  },
+);
+
+export interface ButtonProps
+  extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+  variant?: "default" | "destructive" | "outline" | "secondary" | "ghost" | "link" | "sandbox" | null;
+  size?: "default" | "sm" | "lg" | "xl" | "icon" | null;
+  asChild?: boolean;
+  loading?: boolean;
+  children?: React.ReactNode;
+}
+
+const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
+  (
+    {
+      className,
+      variant,
+      size,
+      asChild = false,
+      loading = false,
+      disabled,
+      children,
+      ...props
+    },
+    ref,
+  ) => {
+    const Comp = asChild ? Slot : "button";
+
+    // When using asChild, we can't add the loading spinner as it would create multiple children
+    // which breaks Slot's single-child requirement
+    if (asChild) {
+      return (
+        <Comp
+          className={cn(buttonVariants({ variant, size, className }))}
+          ref={ref}
+          {...props}
+        >
+          {children}
+        </Comp>
+      );
+    }
+
+    return (
+      <Comp
+        className={cn(buttonVariants({ variant, size, className }))}
+        ref={ref}
+        disabled={disabled || loading}
+        {...props}
+      >
+        {loading && (
+          <svg
+            className="mr-2 -ml-1 h-4 w-4 animate-spin"
+            fill="none"
+            viewBox="0 0 24 24"
+          >
+            <title>Loading spinner</title>
+            <circle
+              className="opacity-25"
+              cx="12"
+              cy="12"
+              r="10"
+              stroke="currentColor"
+              strokeWidth="4"
+            />
+            <path
+              className="opacity-75"
+              fill="currentColor"
+              d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
+            />
+          </svg>
+        )}
+        {children}
+      </Comp>
+    );
+  },
+);
+Button.displayName = "Button";
+
+export { Button, buttonVariants };

package/src/primitives/card.stories.tsx

@@ -0,0 +1,53 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from './card'
+import { Badge } from './badge'
+
+const meta: Meta<typeof Card> = {
+  title: 'Primitives/Card',
+  component: Card,
+  parameters: { layout: 'centered' },
+}
+
+export default meta
+type Story = StoryObj<typeof Card>
+
+const SampleCard = ({ variant, hover }: { variant?: 'default' | 'glass' | 'sandbox' | 'elevated', hover?: boolean }) => (
+  <Card variant={variant} hover={hover} className="w-72">
+    <CardHeader>
+      <div className="flex items-center justify-between">
+        <CardTitle>Agent Session</CardTitle>
+        <Badge variant="running" dot>Running</Badge>
+      </div>
+      <CardDescription>GPT-4o · Tangle Cloud</CardDescription>
+    </CardHeader>
+    <CardContent>
+      <p className="text-sm text-muted-foreground">
+        Processing 14 tool calls · 3.2k tokens used
+      </p>
+    </CardContent>
+  </Card>
+)
+
+export const Default: Story = { render: () => <SampleCard variant="default" /> }
+export const Elevated: Story = { render: () => <SampleCard variant="elevated" /> }
+export const Glass: Story = {
+  render: () => (
+    <div className="bg-mesh bg-background p-10 rounded-xl">
+      <SampleCard variant="glass" />
+    </div>
+  ),
+}
+export const Sandbox: Story = { render: () => <SampleCard variant="sandbox" /> }
+export const Hoverable: Story = { render: () => <SampleCard variant="default" hover /> }
+
+export const AllVariants: Story = {
+  name: 'All Variants',
+  render: () => (
+    <div className="bg-mesh bg-background p-10 rounded-xl flex flex-wrap gap-4">
+      <SampleCard variant="default" />
+      <SampleCard variant="elevated" />
+      <SampleCard variant="glass" />
+      <SampleCard variant="sandbox" />
+    </div>
+  ),
+}

package/src/primitives/card.tsx

@@ -0,0 +1,98 @@
+import * as React from "react";
+import { cn } from "../lib/utils";
+
+const Card = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement> & {
+    variant?: "default" | "glass" | "sandbox" | "elevated";
+    hover?: boolean;
+  }
+>(({ className, variant = "default", hover = false, ...props }, ref) => {
+  const variants = {
+    default: "bg-card border-border",
+    elevated: "bg-muted/50 border-border shadow-[var(--shadow-card)]",
+    glass: "bg-card/80 backdrop-blur-xl border-border shadow-[var(--shadow-card)]",
+    sandbox: "bg-muted/50 border-primary/20 shadow-[var(--shadow-accent)]",
+  };
+
+  return (
+    <div
+      ref={ref}
+      className={cn(
+        "rounded-[var(--radius-lg)] border text-card-foreground transition-[border-color,box-shadow]",
+        "duration-[var(--transition-default)]",
+        variants[variant],
+        hover &&
+          "cursor-pointer hover:border-primary/30",
+        className,
+      )}
+      {...props}
+    />
+  );
+});
+Card.displayName = "Card";
+
+const CardHeader = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn("flex flex-col space-y-1 p-4", className)}
+    {...props}
+  />
+));
+CardHeader.displayName = "CardHeader";
+
+const CardTitle = React.forwardRef<
+  HTMLHeadingElement,
+  React.HTMLAttributes<HTMLHeadingElement>
+>(({ className, ...props }, ref) => (
+  <h3
+    ref={ref}
+    className={cn("font-semibold leading-none tracking-tight", className)}
+    {...props}
+  />
+));
+CardTitle.displayName = "CardTitle";
+
+const CardDescription = React.forwardRef<
+  HTMLParagraphElement,
+  React.HTMLAttributes<HTMLParagraphElement>
+>(({ className, ...props }, ref) => (
+  <p
+    ref={ref}
+    className={cn("text-muted-foreground text-sm", className)}
+    {...props}
+  />
+));
+CardDescription.displayName = "CardDescription";
+
+const CardContent = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div ref={ref} className={cn("p-4 pt-0", className)} {...props} />
+));
+CardContent.displayName = "CardContent";
+
+const CardFooter = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn("flex items-center p-6 pt-0", className)}
+    {...props}
+  />
+));
+CardFooter.displayName = "CardFooter";
+
+export {
+  Card,
+  CardHeader,
+  CardFooter,
+  CardTitle,
+  CardDescription,
+  CardContent,
+};