@tangle-network/ui 1.0.0

package/src/primitives/empty-state.tsx

@@ -0,0 +1,40 @@
+import * as React from "react";
+import { cn } from "../lib/utils";
+
+export interface EmptyStateProps extends React.HTMLAttributes<HTMLDivElement> {
+  icon?: React.ReactNode;
+  title: string;
+  description?: string;
+  action?: React.ReactNode;
+}
+
+const EmptyState = React.forwardRef<HTMLDivElement, EmptyStateProps>(
+  ({ className, icon, title, description, action, ...props }, ref) => {
+    return (
+      <div
+        ref={ref}
+        className={cn(
+          "flex flex-col items-center justify-center px-4 py-16 text-center",
+          className,
+        )}
+        {...props}
+      >
+        {icon && (
+          <div className="mb-4 rounded-full bg-muted p-4 text-muted-foreground">
+            {icon}
+          </div>
+        )}
+        <h3 className="font-semibold text-lg">{title}</h3>
+        {description && (
+          <p className="mt-2 max-w-sm text-muted-foreground text-sm">
+            {description}
+          </p>
+        )}
+        {action && <div className="mt-6">{action}</div>}
+      </div>
+    );
+  },
+);
+EmptyState.displayName = "EmptyState";
+
+export { EmptyState };

package/src/primitives/index.ts

@@ -0,0 +1,118 @@
+export { Button, buttonVariants } from "./button";
+export type { ButtonProps } from "./button";
+
+export {
+  Card,
+  CardHeader,
+  CardFooter,
+  CardTitle,
+  CardDescription,
+  CardContent,
+} from "./card";
+
+export {
+  Dialog,
+  DialogPortal,
+  DialogOverlay,
+  DialogClose,
+  DialogTrigger,
+  DialogContent,
+  DialogHeader,
+  DialogFooter,
+  DialogTitle,
+  DialogDescription,
+} from "./dialog";
+
+export { Input, Textarea } from "./input";
+export type { InputProps, TextareaProps } from "./input";
+
+export { Badge, badgeVariants } from "./badge";
+export type { BadgeProps } from "./badge";
+
+export { Avatar, AvatarImage, AvatarFallback } from "./avatar";
+
+export {
+  DropdownMenu,
+  DropdownMenuTrigger,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuCheckboxItem,
+  DropdownMenuRadioItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuShortcut,
+  DropdownMenuGroup,
+  DropdownMenuPortal,
+  DropdownMenuSub,
+  DropdownMenuSubContent,
+  DropdownMenuSubTrigger,
+  DropdownMenuRadioGroup,
+} from "./dropdown-menu";
+
+export {
+  Select,
+  SelectContent,
+  SelectGroup,
+  SelectItem,
+  SelectLabel,
+  SelectScrollDownButton,
+  SelectScrollUpButton,
+  SelectSeparator,
+  SelectTrigger,
+  SelectValue,
+} from "./select";
+
+export {
+  Table,
+  TableHeader,
+  TableBody,
+  TableFooter,
+  TableHead,
+  TableRow,
+  TableCell,
+  TableCaption,
+} from "./table";
+
+export { Tabs, TabsList, TabsTrigger, TabsContent } from "./tabs";
+
+export { SegmentedControl } from "./segmented-control";
+export type {
+  SegmentedControlOption,
+  SegmentedControlProps,
+} from "./segmented-control";
+
+export { Progress } from "./progress";
+
+export { Switch } from "./switch";
+
+export { Skeleton, SkeletonCard, SkeletonTable } from "./skeleton";
+
+export { ToastContainer, ToastProvider, useToast } from "./toast";
+export type { Toast } from "./toast";
+
+export { Label } from "./label";
+
+export { EmptyState } from "./empty-state";
+export type { EmptyStateProps } from "./empty-state";
+
+export { StatCard } from "./stat-card";
+export type { StatCardProps } from "./stat-card";
+
+export { Logo, TangleKnot, type LogoProps } from "@tangle-network/brand";
+
+export { TerminalDisplay, TerminalLine, TerminalInput, TerminalCursor } from "./terminal-display";
+
+export { DropZone } from "./drop-zone";
+export type { DropZoneProps } from "./drop-zone";
+
+export { UploadProgress } from "./upload-progress";
+export type { UploadProgressProps, UploadFile } from "./upload-progress";
+
+export { SidebarDropZone } from "./sidebar-drop-zone";
+export type { SidebarDropZoneProps } from "./sidebar-drop-zone";
+
+export { ArtifactPane } from "./artifact-pane";
+export type { ArtifactPaneProps } from "./artifact-pane";
+
+export { CodeBlock, CopyButton, InlineCode } from "./code-block";
+export type { CodeBlockProps, InlineCodeProps } from "./code-block";

package/src/primitives/input.stories.tsx

@@ -0,0 +1,113 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import { Input, Textarea } from './input'
+
+const meta: Meta<typeof Input> = {
+  title: 'Primitives/Input',
+  component: Input,
+  parameters: { layout: 'centered', backgrounds: { default: 'dark' } },
+}
+
+export default meta
+type Story = StoryObj<typeof Input>
+
+export const Default: Story = {
+  render: () => <Input placeholder="Enter value..." className="w-72" />,
+}
+
+export const WithLabel: Story = {
+  render: () => (
+    <div className="w-72">
+      <Input label="Sandbox name" placeholder="my-sandbox-01" />
+    </div>
+  ),
+}
+
+export const WithHint: Story = {
+  render: () => (
+    <div className="w-72">
+      <Input
+        label="Memory limit"
+        placeholder="512"
+        hint="Value in megabytes. Max 8192."
+      />
+    </div>
+  ),
+}
+
+export const WithError: Story = {
+  render: () => (
+    <div className="w-72">
+      <Input
+        label="Image tag"
+        defaultValue="latest!!"
+        error="Image tag contains invalid characters."
+      />
+    </div>
+  ),
+}
+
+export const SandboxVariant: Story = {
+  render: () => (
+    <div className="w-72">
+      <Input variant="sandbox" label="API key" placeholder="sk-..." />
+    </div>
+  ),
+}
+
+export const Disabled: Story = {
+  render: () => (
+    <div className="w-72">
+      <Input label="Region" defaultValue="us-east-1" disabled />
+    </div>
+  ),
+}
+
+export const TextareaDefault: Story = {
+  name: 'Textarea / Default',
+  render: () => (
+    <div className="w-72">
+      <Textarea placeholder="Describe the sandbox configuration..." />
+    </div>
+  ),
+}
+
+export const TextareaWithLabelAndHint: Story = {
+  name: 'Textarea / With Label & Hint',
+  render: () => (
+    <div className="w-72">
+      <Textarea
+        label="Startup script"
+        placeholder="#!/bin/bash&#10;npm install"
+        hint="Runs once when the sandbox boots."
+      />
+    </div>
+  ),
+}
+
+export const Overview: Story = {
+  name: 'Overview',
+  render: () => (
+    <div className="flex flex-col gap-6 p-6 w-96">
+      <div className="text-muted-foreground text-xs font-mono uppercase tracking-widest">Input variants</div>
+      <Input label="Sandbox name" placeholder="my-sandbox-01" />
+      <Input
+        variant="sandbox"
+        label="Secret key"
+        placeholder="sk-live-..."
+        hint="Keep this value private."
+      />
+      <Input
+        label="CPU cores"
+        defaultValue="99cores"
+        error="Must be a number between 1 and 32."
+      />
+      <Input label="Region" defaultValue="us-east-1" disabled />
+      <div className="text-muted-foreground text-xs font-mono uppercase tracking-widest mt-2">Textarea</div>
+      <Textarea
+        label="Environment variables"
+        placeholder="NODE_ENV=production&#10;PORT=3000"
+        hint="One variable per line in KEY=VALUE format."
+      />
+    </div>
+  ),
+}

package/src/primitives/input.tsx

@@ -0,0 +1,136 @@
+import * as React from "react";
+import { cn } from "../lib/utils";
+
+import { cva, type VariantProps } from "class-variance-authority";
+
+const inputVariants = cva(
+  "flex w-full rounded-lg border bg-card px-4 py-2 text-sm transition-all duration-200 placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-offset-0 disabled:cursor-not-allowed disabled:opacity-50 file:border-0 file:bg-transparent file:font-medium file:text-sm",
+  {
+    variants: {
+      variant: {
+        default: "border-input focus:ring-ring",
+        sandbox: "border-border focus:border-[var(--border-accent-hover)] focus:ring-[var(--border-accent)]",
+        error: "border-[var(--surface-danger-border)] focus:ring-[var(--surface-danger-border)]",
+      },
+      size: {
+        default: "h-11",
+        sm: "h-9 px-3",
+        lg: "h-12 px-5",
+      }
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  }
+);
+
+export interface InputProps
+  extends Omit<React.InputHTMLAttributes<HTMLInputElement>, "size">,
+    VariantProps<typeof inputVariants> {
+  label?: string;
+  error?: string;
+  hint?: string;
+}
+
+const Input = React.forwardRef<HTMLInputElement, InputProps>(
+  (
+    { className, type, variant, size, label, error, hint, id, ...props },
+    ref,
+  ) => {
+    const inputId = id ?? label?.toLowerCase().replace(/\s+/g, "-");
+
+    const input = (
+      <input
+        type={type}
+        id={inputId}
+        className={cn(inputVariants({ variant: error ? "error" : variant, size, className }))}
+        ref={ref}
+        {...props}
+      />
+    );
+
+    if (!label && !error && !hint) return input;
+
+    return (
+      <div className="w-full space-y-1.5">
+        {label && (
+          <label
+            htmlFor={inputId}
+            className="block font-medium text-foreground text-sm"
+          >
+            {label}
+          </label>
+        )}
+        {input}
+        {error && <p className="text-[var(--surface-danger-text)] text-sm font-medium">{error}</p>}
+        {hint && !error && (
+          <p className="text-muted-foreground/70 text-sm">{hint}</p>
+        )}
+      </div>
+    );
+  },
+);
+Input.displayName = "Input";
+
+export interface TextareaProps
+  extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {
+  variant?: "default" | "sandbox";
+  label?: string;
+  error?: string;
+  hint?: string;
+}
+
+const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
+  (
+    { className, variant = "default", label, error, hint, id, ...props },
+    ref,
+  ) => {
+    const textareaId = id ?? label?.toLowerCase().replace(/\s+/g, "-");
+
+    const variants = {
+      default: "border-input focus:ring-ring",
+      sandbox:
+        "border-border focus:border-[var(--border-accent-hover)] focus:ring-[var(--border-accent)]",
+    };
+
+    const textarea = (
+      <textarea
+        id={textareaId}
+        className={cn(
+          "flex min-h-[120px] w-full resize-y rounded-lg border bg-card px-4 py-3 text-sm transition-all duration-200",
+          "placeholder:text-muted-foreground",
+          "focus:outline-none focus:ring-2 focus:ring-offset-0",
+          "disabled:cursor-not-allowed disabled:opacity-50",
+          error ? "border-[var(--surface-danger-border)] focus:ring-[var(--surface-danger-border)]" : variants[variant],
+          className,
+        )}
+        ref={ref}
+        {...props}
+      />
+    );
+
+    if (!label && !error && !hint) return textarea;
+
+    return (
+      <div className="w-full space-y-1.5">
+        {label && (
+          <label
+            htmlFor={textareaId}
+            className="block font-medium text-muted-foreground text-sm"
+          >
+            {label}
+          </label>
+        )}
+        {textarea}
+        {error && <p className="text-[var(--surface-danger-text)] text-sm">{error}</p>}
+        {hint && !error && (
+          <p className="text-muted-foreground/70 text-sm">{hint}</p>
+        )}
+      </div>
+    );
+  },
+);
+Textarea.displayName = "Textarea";
+
+export { Input, Textarea };

package/src/primitives/label.stories.tsx

@@ -0,0 +1,84 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import { Label } from './label'
+import { Input } from './input'
+import { Switch } from './switch'
+
+const meta: Meta<typeof Label> = {
+  title: 'Primitives/Label',
+  component: Label,
+  parameters: { layout: 'centered', backgrounds: { default: 'dark' } },
+  args: { children: 'Field label' },
+}
+
+export default meta
+type Story = StoryObj<typeof Label>
+
+export const Default: Story = {}
+
+export const WithInput: Story = {
+  render: () => (
+    <div className="flex flex-col gap-1.5 w-64">
+      <Label htmlFor="sandbox-name">Sandbox name</Label>
+      <Input id="sandbox-name" placeholder="my-sandbox-01" />
+    </div>
+  ),
+}
+
+export const WithSwitch: Story = {
+  render: () => (
+    <div className="flex items-center gap-2">
+      <Switch id="auto-sleep" />
+      <Label htmlFor="auto-sleep">Enable auto-sleep</Label>
+    </div>
+  ),
+}
+
+export const DisabledPeer: Story = {
+  name: 'Disabled (peer state)',
+  render: () => (
+    <div className="flex items-center gap-2">
+      <Switch id="auto-sleep-disabled" disabled />
+      <Label htmlFor="auto-sleep-disabled" className="peer">
+        Enable auto-sleep
+      </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">Standalone</div>
+      <Label>Standalone label</Label>
+
+      <div className="text-muted-foreground text-xs font-mono uppercase tracking-widest">Paired with input</div>
+      <div className="flex flex-col gap-1.5">
+        <Label htmlFor="overview-name">Sandbox name</Label>
+        <Input id="overview-name" placeholder="my-sandbox-01" />
+      </div>
+      <div className="flex flex-col gap-1.5">
+        <Label htmlFor="overview-image">Container image</Label>
+        <Input id="overview-image" placeholder="ubuntu:22.04" />
+      </div>
+
+      <div className="text-muted-foreground text-xs font-mono uppercase tracking-widest">Paired with switch</div>
+      <div className="flex flex-col gap-3">
+        <div className="flex items-center gap-2">
+          <Switch id="overview-sleep" defaultChecked />
+          <Label htmlFor="overview-sleep">Auto-sleep after idle</Label>
+        </div>
+        <div className="flex items-center gap-2">
+          <Switch id="overview-telemetry" />
+          <Label htmlFor="overview-telemetry">Send usage telemetry</Label>
+        </div>
+        <div className="flex items-center gap-2">
+          <Switch id="overview-disabled" disabled />
+          <Label htmlFor="overview-disabled" className="opacity-50">
+            Public access (requires upgrade)
+          </Label>
+        </div>
+      </div>
+    </div>
+  ),
+}

package/src/primitives/label.tsx

@@ -0,0 +1,24 @@
+"use client";
+
+import * as LabelPrimitive from "@radix-ui/react-label";
+import { cva, type VariantProps } from "class-variance-authority";
+import * as React from "react";
+import { cn } from "../lib/utils";
+
+const labelVariants = cva(
+  "font-medium text-sm leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70",
+);
+
+const Label = React.forwardRef<
+  React.ElementRef<typeof LabelPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root>
+>(({ className, ...props }, ref) => (
+  <LabelPrimitive.Root
+    ref={ref}
+    className={cn(labelVariants(), className)}
+    {...props}
+  />
+));
+Label.displayName = LabelPrimitive.Root.displayName;
+
+export { Label };

package/src/primitives/progress.stories.tsx

@@ -0,0 +1,93 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import { Progress } from './progress'
+
+const meta: Meta<typeof Progress> = {
+  title: 'Primitives/Progress',
+  component: Progress,
+  parameters: { layout: 'centered', backgrounds: { default: 'dark' } },
+  args: { value: 60 },
+}
+
+export default meta
+type Story = StoryObj<typeof Progress>
+
+export const Default: Story = {
+  render: () => <Progress value={60} className="w-80" />,
+}
+
+export const SandboxVariant: Story = {
+  name: 'Sandbox variant',
+  render: () => <Progress value={60} variant="sandbox" className="w-80" />,
+}
+
+export const WithValue: Story = {
+  name: 'With value label',
+  render: () => (
+    <div className="pt-6 w-80">
+      <Progress value={73} showValue />
+    </div>
+  ),
+}
+
+export const SandboxWithValue: Story = {
+  name: 'Sandbox with value label',
+  render: () => (
+    <div className="pt-6 w-80">
+      <Progress value={73} variant="sandbox" showValue />
+    </div>
+  ),
+}
+
+export const Empty: Story = {
+  render: () => <Progress value={0} className="w-80" />,
+}
+
+export const Full: Story = {
+  render: () => <Progress value={100} className="w-80" />,
+}
+
+export const Overview: Story = {
+  name: 'Overview',
+  render: () => (
+    <div className="flex flex-col gap-8 p-6 w-96">
+      <div className="text-muted-foreground text-xs font-mono uppercase tracking-widest">Default variant</div>
+      <div className="flex flex-col gap-4">
+        {[0, 25, 50, 75, 100].map((v) => (
+          <div key={v} className="flex items-center gap-3">
+            <span className="text-muted-foreground text-xs w-8 text-right">{v}%</span>
+            <Progress value={v} className="flex-1" />
+          </div>
+        ))}
+      </div>
+
+      <div className="text-muted-foreground text-xs font-mono uppercase tracking-widest">Sandbox variant</div>
+      <div className="flex flex-col gap-4">
+        {[0, 25, 50, 75, 100].map((v) => (
+          <div key={v} className="flex items-center gap-3">
+            <span className="text-muted-foreground text-xs w-8 text-right">{v}%</span>
+            <Progress value={v} variant="sandbox" className="flex-1" />
+          </div>
+        ))}
+      </div>
+
+      <div className="text-muted-foreground text-xs font-mono uppercase tracking-widest">Sandbox task list</div>
+      <div className="rounded-xl border border-border bg-card p-4 flex flex-col gap-4">
+        {[
+          { label: 'Pulling image', value: 100 },
+          { label: 'Provisioning volume', value: 100 },
+          { label: 'Starting runtime', value: 68 },
+          { label: 'Installing packages', value: 12 },
+          { label: 'Applying config', value: 0 },
+        ].map(({ label, value }) => (
+          <div key={label} className="flex flex-col gap-1.5">
+            <div className="flex justify-between">
+              <span className="text-sm">{label}</span>
+              <span className="text-muted-foreground text-xs">{value}%</span>
+            </div>
+            <Progress value={value} variant="sandbox" />
+          </div>
+        ))}
+      </div>
+    </div>
+  ),
+}

package/src/primitives/progress.tsx

@@ -0,0 +1,50 @@
+import * as ProgressPrimitive from "@radix-ui/react-progress";
+import * as React from "react";
+import { cn } from "../lib/utils";
+
+const Progress = React.forwardRef<
+  React.ElementRef<typeof ProgressPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof ProgressPrimitive.Root> & {
+    variant?: "default" | "sandbox";
+    showValue?: boolean;
+  }
+>(
+  (
+    { className, value, variant = "default", showValue = false, ...props },
+    ref,
+  ) => {
+    const indicatorVariants = {
+      default: "bg-primary",
+      sandbox: "bg-[image:var(--accent-gradient-strong)]",
+    };
+
+    return (
+      <div className="relative">
+        <ProgressPrimitive.Root
+          ref={ref}
+          className={cn(
+            "relative h-2 w-full overflow-hidden rounded-full bg-muted",
+            className,
+          )}
+          {...props}
+        >
+          <ProgressPrimitive.Indicator
+            className={cn(
+              "h-full w-full flex-1 transition-all duration-300 ease-out",
+              indicatorVariants[variant],
+            )}
+            style={{ transform: `translateX(-${100 - (value || 0)}%)` }}
+          />
+        </ProgressPrimitive.Root>
+        {showValue && (
+          <span className="absolute -top-6 right-0 text-muted-foreground text-xs">
+            {value}%
+          </span>
+        )}
+      </div>
+    );
+  },
+);
+Progress.displayName = ProgressPrimitive.Root.displayName;
+
+export { Progress };