@tangle-network/ui 1.0.0

package/src/primitives/select.tsx

@@ -0,0 +1,158 @@
+"use client";
+
+import * as SelectPrimitive from "@radix-ui/react-select";
+import { Check, ChevronDown, ChevronUp } from "lucide-react";
+import * as React from "react";
+import { cn } from "../lib/utils";
+
+const Select = SelectPrimitive.Root;
+
+const SelectGroup = SelectPrimitive.Group;
+
+const SelectValue = SelectPrimitive.Value;
+
+const SelectTrigger = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.Trigger>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Trigger>
+>(({ className, children, ...props }, ref) => (
+  <SelectPrimitive.Trigger
+    ref={ref}
+    className={cn(
+      "flex h-9 w-full items-center justify-between whitespace-nowrap rounded-md border border-border bg-card px-3 py-2 text-sm shadow-sm placeholder:text-muted-foreground focus:outline-none focus:ring-1 focus:ring-primary disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1",
+      className,
+    )}
+    {...props}
+  >
+    {children}
+    <SelectPrimitive.Icon asChild>
+      <ChevronDown className="h-4 w-4 opacity-50" />
+    </SelectPrimitive.Icon>
+  </SelectPrimitive.Trigger>
+));
+SelectTrigger.displayName = SelectPrimitive.Trigger.displayName;
+
+const SelectScrollUpButton = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.ScrollUpButton>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollUpButton>
+>(({ className, ...props }, ref) => (
+  <SelectPrimitive.ScrollUpButton
+    ref={ref}
+    className={cn(
+      "flex cursor-default items-center justify-center py-1",
+      className,
+    )}
+    {...props}
+  >
+    <ChevronUp className="h-4 w-4" />
+  </SelectPrimitive.ScrollUpButton>
+));
+SelectScrollUpButton.displayName = SelectPrimitive.ScrollUpButton.displayName;
+
+const SelectScrollDownButton = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.ScrollDownButton>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollDownButton>
+>(({ className, ...props }, ref) => (
+  <SelectPrimitive.ScrollDownButton
+    ref={ref}
+    className={cn(
+      "flex cursor-default items-center justify-center py-1",
+      className,
+    )}
+    {...props}
+  >
+    <ChevronDown className="h-4 w-4" />
+  </SelectPrimitive.ScrollDownButton>
+));
+SelectScrollDownButton.displayName =
+  SelectPrimitive.ScrollDownButton.displayName;
+
+const SelectContent = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Content>
+>(({ className, children, position = "popper", ...props }, ref) => (
+  <SelectPrimitive.Portal>
+    <SelectPrimitive.Content
+      ref={ref}
+      className={cn(
+        "data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 relative z-50 max-h-96 min-w-[8rem] overflow-hidden rounded-md border border-border bg-card text-foreground shadow-[var(--shadow-card)] data-[state=closed]:animate-out data-[state=open]:animate-in",
+        position === "popper" &&
+          "data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=bottom]:translate-y-1 data-[side=top]:-translate-y-1",
+        className,
+      )}
+      position={position}
+      {...props}
+    >
+      <SelectScrollUpButton />
+      <SelectPrimitive.Viewport
+        className={cn(
+          "p-1",
+          position === "popper" &&
+            "h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]",
+        )}
+      >
+        {children}
+      </SelectPrimitive.Viewport>
+      <SelectScrollDownButton />
+    </SelectPrimitive.Content>
+  </SelectPrimitive.Portal>
+));
+SelectContent.displayName = SelectPrimitive.Content.displayName;
+
+const SelectLabel = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.Label>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Label>
+>(({ className, ...props }, ref) => (
+  <SelectPrimitive.Label
+    ref={ref}
+    className={cn("px-2 py-1.5 font-semibold text-sm", className)}
+    {...props}
+  />
+));
+SelectLabel.displayName = SelectPrimitive.Label.displayName;
+
+const SelectItem = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.Item>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Item>
+>(({ className, children, ...props }, ref) => (
+  <SelectPrimitive.Item
+    ref={ref}
+    className={cn(
+      "relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pr-8 pl-2 text-sm outline-none focus:bg-muted/50 focus:text-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      className,
+    )}
+    {...props}
+  >
+    <span className="absolute right-2 flex h-3.5 w-3.5 items-center justify-center">
+      <SelectPrimitive.ItemIndicator>
+        <Check className="h-4 w-4" />
+      </SelectPrimitive.ItemIndicator>
+    </span>
+    <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>
+  </SelectPrimitive.Item>
+));
+SelectItem.displayName = SelectPrimitive.Item.displayName;
+
+const SelectSeparator = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.Separator>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Separator>
+>(({ className, ...props }, ref) => (
+  <SelectPrimitive.Separator
+    ref={ref}
+    className={cn("-mx-1 my-1 h-px bg-border", className)}
+    {...props}
+  />
+));
+SelectSeparator.displayName = SelectPrimitive.Separator.displayName;
+
+export {
+  Select,
+  SelectContent,
+  SelectGroup,
+  SelectItem,
+  SelectLabel,
+  SelectScrollDownButton,
+  SelectScrollUpButton,
+  SelectSeparator,
+  SelectTrigger,
+  SelectValue,
+};

package/src/primitives/sidebar-drop-zone.stories.tsx

@@ -0,0 +1,100 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import { SidebarDropZone } from './sidebar-drop-zone'
+import { FolderOpen } from 'lucide-react'
+
+const meta: Meta<typeof SidebarDropZone> = {
+  title: 'Primitives/SidebarDropZone',
+  component: SidebarDropZone,
+  parameters: { layout: 'centered', backgrounds: { default: 'dark' } },
+  args: {
+    onDrop: (files) => console.log('dropped', files),
+  },
+  decorators: [
+    (Story) => (
+      <div className="w-64 p-4 rounded-xl border border-border bg-background space-y-3">
+        <div className="text-xs text-muted-foreground font-mono uppercase tracking-widest">Workspace Files</div>
+        <div className="space-y-1 text-sm text-foreground">
+          <div className="px-2 py-1 rounded hover:bg-accent">index.ts</div>
+          <div className="px-2 py-1 rounded hover:bg-accent">utils.ts</div>
+          <div className="px-2 py-1 rounded hover:bg-accent">config.json</div>
+        </div>
+        <Story />
+      </div>
+    ),
+  ],
+}
+
+export default meta
+type Story = StoryObj<typeof SidebarDropZone>
+
+export const Persistent: Story = {
+  name: 'Persistent (always visible)',
+  args: {
+    persistent: true,
+    title: 'Drop files here',
+    description: 'Uploads to workspace',
+  },
+}
+
+export const PersistentNoDescription: Story = {
+  name: 'Persistent — title only',
+  args: {
+    persistent: true,
+    title: 'Upload to workspace',
+  },
+}
+
+/** Static drag-over appearance — mirrors what the component renders when dragOver=true */
+export const DragOverPreview: Story = {
+  name: 'Drag-over state (static preview)',
+  render: () => (
+    <div
+      className="rounded-lg border-2 border-dashed p-4 transition-all duration-150"
+      style={{
+        borderColor: 'hsl(var(--ring, 217 91% 60%))',
+        backgroundColor: 'hsl(var(--primary, 217 91% 60%) / 0.08)',
+      }}
+    >
+      <div className="flex flex-col items-center gap-2 text-center">
+        <div className="flex h-8 w-8 items-center justify-center rounded-lg bg-blue-500/15 text-blue-400">
+          <svg xmlns="http://www.w3.org/2000/svg" className="h-4 w-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={2}>
+            <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" />
+            <polyline points="17 8 12 3 7 8" />
+            <line x1="12" y1="3" x2="12" y2="15" />
+          </svg>
+        </div>
+        <p className="text-xs font-medium text-white">Drop files here</p>
+        <p className="text-[10px] text-zinc-400">Uploads to workspace</p>
+      </div>
+    </div>
+  ),
+}
+
+export const CustomIcon: Story = {
+  name: 'Custom Icon',
+  args: {
+    persistent: true,
+    title: 'Add folder',
+    description: 'Drop a folder to sync',
+    icon: <FolderOpen className="h-4 w-4" />,
+  },
+}
+
+export const WithAcceptFilter: Story = {
+  name: 'Accept filter (.pdf, .csv)',
+  args: {
+    persistent: true,
+    accept: '.pdf,.csv',
+    title: 'Drop CSV or PDF',
+    description: 'Only structured data files',
+  },
+}
+
+export const Disabled: Story = {
+  name: 'Disabled',
+  args: {
+    persistent: true,
+    disabled: true,
+    title: 'Uploads disabled',
+  },
+}

package/src/primitives/sidebar-drop-zone.tsx

@@ -0,0 +1,149 @@
+/**
+ * SidebarDropZone — compact scoped drop zone for sidebar panels and narrow containers.
+ *
+ * Unlike the full-window DropZone, this renders as an inline element
+ * that can be placed inside sidebar panels, file trees, or any container.
+ * Shows a subtle drop target when files are dragged over it.
+ *
+ * Usage:
+ *   <SidebarPanelContent>
+ *     <FileTree ... />
+ *     <SidebarDropZone onDrop={uploadToWorkspace} title="Upload to workspace" />
+ *   </SidebarPanelContent>
+ */
+
+import { useCallback, useRef, useState, type DragEvent, type ReactNode } from "react";
+import { Upload } from "lucide-react";
+import { cn } from "../lib/utils";
+
+export interface SidebarDropZoneProps {
+  /** Called with dropped files */
+  onDrop: (files: File[]) => void;
+  /** Accepted file types (e.g. ".pdf,.csv") */
+  accept?: string;
+  /** Whether drop zone is active */
+  disabled?: boolean;
+  /** Title shown in the drop zone */
+  title?: string;
+  /** Description shown below the title */
+  description?: string;
+  /** Custom icon (replaces default upload icon) */
+  icon?: ReactNode;
+  /** Always visible (not just on drag). Useful as a persistent upload area. */
+  persistent?: boolean;
+  className?: string;
+}
+
+export function SidebarDropZone({
+  onDrop,
+  accept,
+  disabled,
+  title = "Drop files here",
+  description,
+  icon,
+  persistent = false,
+  className,
+}: SidebarDropZoneProps) {
+  const [dragOver, setDragOver] = useState(false);
+  const counter = useRef(0);
+
+  const isAccepted = useCallback(
+    (file: File) => {
+      if (!accept) return true;
+      const extensions = accept.split(",").map((ext) => ext.trim().toLowerCase());
+      const fileName = file.name.toLowerCase();
+      return extensions.some((ext) => fileName.endsWith(ext));
+    },
+    [accept],
+  );
+
+  const handleDragEnter = useCallback(
+    (e: DragEvent) => {
+      e.preventDefault();
+      e.stopPropagation();
+      if (disabled) return;
+      counter.current++;
+      if (e.dataTransfer?.types.includes("Files")) setDragOver(true);
+    },
+    [disabled],
+  );
+
+  const handleDragLeave = useCallback((e: DragEvent) => {
+    e.preventDefault();
+    e.stopPropagation();
+    counter.current--;
+    if (counter.current === 0) setDragOver(false);
+  }, []);
+
+  const handleDragOver = useCallback(
+    (e: DragEvent) => {
+      e.preventDefault();
+      e.stopPropagation();
+      if (!disabled) e.dataTransfer.dropEffect = "copy";
+    },
+    [disabled],
+  );
+
+  const handleDrop = useCallback(
+    (e: DragEvent) => {
+      e.preventDefault();
+      e.stopPropagation();
+      counter.current = 0;
+      setDragOver(false);
+      if (disabled) return;
+
+      const allFiles = Array.from(e.dataTransfer?.files || []);
+      const accepted = accept ? allFiles.filter(isAccepted) : allFiles;
+      if (accepted.length > 0) onDrop(accepted);
+    },
+    [disabled, accept, isAccepted, onDrop],
+  );
+
+  const isVisible = persistent || dragOver;
+
+  return (
+    <div
+      onDragEnter={handleDragEnter}
+      onDragLeave={handleDragLeave}
+      onDragOver={handleDragOver}
+      onDrop={handleDrop}
+      className={cn(
+        "rounded-lg border-2 border-dashed transition-all duration-150",
+        isVisible ? "p-4" : "p-0 border-transparent",
+        dragOver
+          ? "border-[var(--brand-cool,hsl(var(--ring)))] bg-[var(--accent-surface-soft)]"
+          : persistent
+            ? "border-[var(--border-subtle,hsl(var(--border)))] bg-transparent hover:border-[var(--border-default,hsl(var(--border)))] hover:bg-[var(--bg-hover,hsl(var(--accent)))]"
+            : "",
+        disabled && "opacity-50 pointer-events-none",
+        className,
+      )}
+    >
+      {isVisible && (
+        <div className="flex flex-col items-center gap-2 text-center">
+          <div className={cn(
+            "flex h-8 w-8 items-center justify-center rounded-lg transition-colors",
+            dragOver
+              ? "bg-[var(--brand-cool,hsl(var(--primary)))]/15 text-[var(--brand-cool,hsl(var(--primary)))]"
+              : "text-[var(--text-muted,hsl(var(--muted-foreground)))]",
+          )}>
+            {icon ?? <Upload className="h-4 w-4" />}
+          </div>
+          <p className={cn(
+            "text-xs font-medium",
+            dragOver
+              ? "text-[var(--text-primary,hsl(var(--foreground)))]"
+              : "text-[var(--text-muted,hsl(var(--muted-foreground)))]",
+          )}>
+            {title}
+          </p>
+          {description && (
+            <p className="text-[10px] text-[var(--text-muted,hsl(var(--muted-foreground)))]">
+              {description}
+            </p>
+          )}
+        </div>
+      )}
+    </div>
+  );
+}

package/src/primitives/skeleton.stories.tsx

@@ -0,0 +1,79 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import { Skeleton, SkeletonCard, SkeletonTable } from './skeleton'
+
+const meta: Meta = {
+  title: 'Primitives/Skeleton',
+  parameters: { layout: 'centered', backgrounds: { default: 'dark' } },
+}
+
+export default meta
+type Story = StoryObj
+
+export const Base: Story = {
+  render: () => <Skeleton className="h-4 w-48" />,
+}
+
+export const Card: Story = {
+  render: () => <SkeletonCard className="w-72" />,
+}
+
+export const Table: Story = {
+  render: () => (
+    <div className="w-[520px] rounded-xl border border-border bg-card p-4">
+      <SkeletonTable rows={4} />
+    </div>
+  ),
+}
+
+export const AvatarRow: Story = {
+  name: 'Avatar + text row',
+  render: () => (
+    <div className="flex items-center gap-3 w-72">
+      <Skeleton className="h-10 w-10 rounded-full shrink-0" />
+      <div className="flex flex-col gap-2 flex-1">
+        <Skeleton className="h-4 w-3/4" />
+        <Skeleton className="h-3 w-1/2" />
+      </div>
+    </div>
+  ),
+}
+
+export const Overview: Story = {
+  name: 'Overview',
+  render: () => (
+    <div className="flex flex-col gap-8 p-6 w-[560px]">
+      <div className="text-muted-foreground text-xs font-mono uppercase tracking-widest">Inline elements</div>
+      <div className="flex flex-col gap-2">
+        <Skeleton className="h-5 w-3/4" />
+        <Skeleton className="h-4 w-full" />
+        <Skeleton className="h-4 w-5/6" />
+        <Skeleton className="h-4 w-2/3" />
+      </div>
+
+      <div className="text-muted-foreground text-xs font-mono uppercase tracking-widest">Team list</div>
+      <div className="flex flex-col gap-3">
+        {[1, 2, 3].map((i) => (
+          <div key={i} className="flex items-center gap-3">
+            <Skeleton className="h-9 w-9 rounded-full shrink-0" />
+            <div className="flex flex-col gap-1.5 flex-1">
+              <Skeleton className="h-4 w-40" />
+              <Skeleton className="h-3 w-28" />
+            </div>
+            <Skeleton className="h-6 w-16 rounded-full" />
+          </div>
+        ))}
+      </div>
+
+      <div className="text-muted-foreground text-xs font-mono uppercase tracking-widest">Cards</div>
+      <div className="flex gap-4">
+        <SkeletonCard className="flex-1" />
+        <SkeletonCard className="flex-1" />
+      </div>
+
+      <div className="text-muted-foreground text-xs font-mono uppercase tracking-widest">Table</div>
+      <div className="rounded-xl border border-border bg-card p-4">
+        <SkeletonTable rows={3} />
+      </div>
+    </div>
+  ),
+}

package/src/primitives/skeleton.tsx

@@ -0,0 +1,55 @@
+import { cn } from "../lib/utils";
+
+function Skeleton({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) {
+  return (
+    <div
+      className={cn("animate-pulse rounded-lg bg-muted/50", className)}
+      {...props}
+    />
+  );
+}
+
+function SkeletonCard({ className }: { className?: string }) {
+  return (
+    <div
+      className={cn(
+        "space-y-4 rounded-xl border border-border bg-card p-6",
+        className,
+      )}
+    >
+      <Skeleton className="h-4 w-3/4" />
+      <Skeleton className="h-4 w-1/2" />
+      <div className="space-y-2 pt-4">
+        <Skeleton className="h-3 w-full" />
+        <Skeleton className="h-3 w-5/6" />
+        <Skeleton className="h-3 w-4/6" />
+      </div>
+    </div>
+  );
+}
+
+function SkeletonTable({ rows = 5 }: { rows?: number }) {
+  return (
+    <div className="space-y-3">
+      <div className="flex gap-4 border-border border-b pb-2">
+        <Skeleton className="h-4 w-1/4" />
+        <Skeleton className="h-4 w-1/4" />
+        <Skeleton className="h-4 w-1/4" />
+        <Skeleton className="h-4 w-1/4" />
+      </div>
+      {Array.from({ length: rows }).map((_, i) => (
+        <div key={i} className="flex gap-4">
+          <Skeleton className="h-4 w-1/4" />
+          <Skeleton className="h-4 w-1/4" />
+          <Skeleton className="h-4 w-1/4" />
+          <Skeleton className="h-4 w-1/4" />
+        </div>
+      ))}
+    </div>
+  );
+}
+
+export { Skeleton, SkeletonCard, SkeletonTable };

package/src/primitives/stat-card.stories.tsx

@@ -0,0 +1,137 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import { Activity, Cpu, DollarSign, HardDrive, Terminal, Users, Zap } from 'lucide-react'
+import { StatCard } from './stat-card'
+
+const meta: Meta<typeof StatCard> = {
+  title: 'Primitives/StatCard',
+  component: StatCard,
+  parameters: { layout: 'centered', backgrounds: { default: 'dark' } },
+}
+
+export default meta
+type Story = StoryObj<typeof StatCard>
+
+export const Default: Story = {
+  args: {
+    title: 'Active Sessions',
+    value: 24,
+    subtitle: 'across 3 regions',
+    icon: <Terminal className="h-5 w-5" />,
+  },
+}
+
+export const SandboxVariant: Story = {
+  name: 'Sandbox Variant',
+  args: {
+    variant: 'sandbox',
+    title: 'Active Sessions',
+    value: 24,
+    subtitle: 'across 3 regions',
+    icon: <Terminal className="h-5 w-5" />,
+    trend: { value: 12, label: 'vs last hour' },
+  },
+}
+
+export const CpuUsage: Story = {
+  name: 'CPU Usage',
+  args: {
+    title: 'Avg CPU Usage',
+    value: '68%',
+    subtitle: 'p95: 94%',
+    icon: <Cpu className="h-5 w-5" />,
+    trend: { value: -4, label: 'vs yesterday' },
+  },
+}
+
+export const MemoryUsage: Story = {
+  name: 'Memory Usage',
+  args: {
+    title: 'Memory Allocated',
+    value: '12.4 GB',
+    subtitle: 'of 32 GB pool',
+    icon: <HardDrive className="h-5 w-5" />,
+    trend: { value: 8, label: 'vs last hour' },
+  },
+}
+
+export const MonthlyCost: Story = {
+  name: 'Monthly Cost',
+  args: {
+    title: 'Estimated Cost',
+    value: '$142.80',
+    subtitle: 'current billing cycle',
+    icon: <DollarSign className="h-5 w-5" />,
+    trend: { value: 0, label: 'vs last month' },
+  },
+}
+
+export const TrendPositive: Story = {
+  name: 'Trend — Positive',
+  args: {
+    title: 'Sessions Today',
+    value: 1284,
+    icon: <Activity className="h-5 w-5" />,
+    trend: { value: 23, label: 'vs yesterday' },
+  },
+}
+
+export const TrendNegative: Story = {
+  name: 'Trend — Negative',
+  args: {
+    title: 'Error Rate',
+    value: '1.2%',
+    icon: <Zap className="h-5 w-5" />,
+    trend: { value: -18, label: 'vs last week' },
+  },
+}
+
+export const InfraGrid: Story = {
+  name: 'Infrastructure Grid',
+  render: () => (
+    <div className="grid grid-cols-2 gap-4 w-[640px]">
+      <StatCard
+        title="Active Sessions"
+        value={24}
+        subtitle="across 3 regions"
+        icon={<Terminal className="h-5 w-5" />}
+        trend={{ value: 12, label: 'vs last hour' }}
+      />
+      <StatCard
+        title="CPU Usage"
+        value="68%"
+        subtitle="p95: 94%"
+        icon={<Cpu className="h-5 w-5" />}
+        trend={{ value: -4, label: 'vs yesterday' }}
+      />
+      <StatCard
+        title="Memory Allocated"
+        value="12.4 GB"
+        subtitle="of 32 GB pool"
+        icon={<HardDrive className="h-5 w-5" />}
+        trend={{ value: 8, label: 'vs last hour' }}
+      />
+      <StatCard
+        variant="sandbox"
+        title="Estimated Cost"
+        value="$142.80"
+        subtitle="current billing cycle"
+        icon={<DollarSign className="h-5 w-5" />}
+        trend={{ value: 3, label: 'vs last month' }}
+      />
+      <StatCard
+        title="Unique Users"
+        value={312}
+        subtitle="last 30 days"
+        icon={<Users className="h-5 w-5" />}
+        trend={{ value: 19, label: 'MoM' }}
+      />
+      <StatCard
+        title="Avg Startup Time"
+        value="840ms"
+        subtitle="p99: 1.4s"
+        icon={<Zap className="h-5 w-5" />}
+        trend={{ value: -11, label: 'vs last week' }}
+      />
+    </div>
+  ),
+}