@tangle-network/blueprint-ui 0.1.0

package/src/components/ui/card.tsx

@@ -0,0 +1,34 @@
+import * as React from 'react';
+import { cn } from '../../utils';
+
+function Card({ className, ...props }: React.ComponentProps<'div'>) {
+  return (
+    <div
+      data-slot="card"
+      className={cn('glass-card rounded-xl text-bp-elements-textPrimary', className)}
+      {...props}
+    />
+  );
+}
+
+function CardHeader({ className, ...props }: React.ComponentProps<'div'>) {
+  return <div data-slot="card-header" className={cn('flex flex-col gap-1.5 p-6', className)} {...props} />;
+}
+
+function CardTitle({ className, ...props }: React.ComponentProps<'div'>) {
+  return <div data-slot="card-title" className={cn('leading-none font-semibold font-display', className)} {...props} />;
+}
+
+function CardDescription({ className, ...props }: React.ComponentProps<'div'>) {
+  return <div data-slot="card-description" className={cn('text-bp-elements-textSecondary text-sm', className)} {...props} />;
+}
+
+function CardContent({ className, ...props }: React.ComponentProps<'div'>) {
+  return <div data-slot="card-content" className={cn('px-6 pb-6', className)} {...props} />;
+}
+
+function CardFooter({ className, ...props }: React.ComponentProps<'div'>) {
+  return <div data-slot="card-footer" className={cn('flex items-center px-6 pb-6', className)} {...props} />;
+}
+
+export { Card, CardHeader, CardTitle, CardDescription, CardContent, CardFooter };

package/src/components/ui/dialog.tsx

@@ -0,0 +1,59 @@
+import * as React from 'react';
+import * as DialogPrimitive from '@radix-ui/react-dialog';
+import { cn } from '../../utils';
+
+function Dialog({ ...props }: React.ComponentProps<typeof DialogPrimitive.Root>) {
+  return <DialogPrimitive.Root data-slot="dialog" {...props} />;
+}
+
+function DialogTrigger({ ...props }: React.ComponentProps<typeof DialogPrimitive.Trigger>) {
+  return <DialogPrimitive.Trigger data-slot="dialog-trigger" {...props} />;
+}
+
+function DialogPortal({ ...props }: React.ComponentProps<typeof DialogPrimitive.Portal>) {
+  return <DialogPrimitive.Portal data-slot="dialog-portal" {...props} />;
+}
+
+function DialogOverlay({ className, ...props }: React.ComponentProps<typeof DialogPrimitive.Overlay>) {
+  return <DialogPrimitive.Overlay data-slot="dialog-overlay" className={cn('fixed inset-0 z-50 bg-black/50', className)} {...props} />;
+}
+
+function DialogContent({ className, children, ...props }: React.ComponentProps<typeof DialogPrimitive.Content>) {
+  return (
+    <DialogPortal>
+      <DialogOverlay />
+      <DialogPrimitive.Content
+        data-slot="dialog-content"
+        className={cn(
+          'bg-background fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-xl border border-border p-6 shadow-2xl duration-200 outline-none sm:max-w-lg',
+          className,
+        )}
+        {...props}
+      >
+        {children}
+        <DialogPrimitive.Close className="absolute top-4 right-4 rounded-sm opacity-70 transition-opacity hover:opacity-100 focus:outline-none">
+          <div className="i-ph:x size-4" />
+          <span className="sr-only">Close</span>
+        </DialogPrimitive.Close>
+      </DialogPrimitive.Content>
+    </DialogPortal>
+  );
+}
+
+function DialogHeader({ className, ...props }: React.ComponentProps<'div'>) {
+  return <div data-slot="dialog-header" className={cn('flex flex-col gap-2 text-center sm:text-left', className)} {...props} />;
+}
+
+function DialogFooter({ className, ...props }: React.ComponentProps<'div'>) {
+  return <div data-slot="dialog-footer" className={cn('flex flex-col-reverse gap-2 sm:flex-row sm:justify-end', className)} {...props} />;
+}
+
+function DialogTitle({ className, ...props }: React.ComponentProps<typeof DialogPrimitive.Title>) {
+  return <DialogPrimitive.Title data-slot="dialog-title" className={cn('text-lg leading-none font-semibold', className)} {...props} />;
+}
+
+function DialogDescription({ className, ...props }: React.ComponentProps<typeof DialogPrimitive.Description>) {
+  return <DialogPrimitive.Description data-slot="dialog-description" className={cn('text-muted-foreground text-sm', className)} {...props} />;
+}
+
+export { Dialog, DialogTrigger, DialogContent, DialogHeader, DialogFooter, DialogTitle, DialogDescription };

package/src/components/ui/input.tsx

@@ -0,0 +1,24 @@
+import * as React from 'react';
+import { cn } from '../../utils';
+
+function Input({ className, type, ...props }: React.ComponentProps<'input'>) {
+  return (
+    <input
+      type={type}
+      data-slot="input"
+      className={cn(
+        'h-11 w-full min-w-0 rounded-lg px-3.5 py-2.5 text-base font-body',
+        'bg-bp-elements-background-depth-3 dark:bg-bp-elements-background-depth-4 border border-bp-elements-borderColor text-bp-elements-textPrimary',
+        'placeholder:text-bp-elements-textTertiary',
+        'transition-all duration-200 outline-none',
+        'hover:border-bp-elements-borderColorActive/40',
+        'focus-visible:border-violet-500/40 focus-visible:ring-2 focus-visible:ring-violet-500/10',
+        'disabled:pointer-events-none disabled:opacity-40',
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+export { Input };

package/src/components/ui/select.tsx

@@ -0,0 +1,80 @@
+import * as React from 'react';
+import * as SelectPrimitive from '@radix-ui/react-select';
+import { cn } from '../../utils';
+
+export interface SelectOption {
+  label: string;
+  value: string;
+}
+
+interface SelectProps {
+  value?: string;
+  onValueChange?: (value: string) => void;
+  options: SelectOption[];
+  placeholder?: string;
+  className?: string;
+  disabled?: boolean;
+}
+
+function Select({ value, onValueChange, options, placeholder, className, disabled }: SelectProps) {
+  return (
+    <SelectPrimitive.Root value={value} onValueChange={onValueChange} disabled={disabled}>
+      <SelectPrimitive.Trigger
+        className={cn(
+          'group flex h-11 w-full items-center justify-between rounded-lg px-3.5 py-2.5 text-base font-body',
+          'bg-bp-elements-background-depth-3 dark:bg-bp-elements-background-depth-4 border border-bp-elements-borderColor text-bp-elements-textPrimary',
+          'transition-all duration-200 outline-none',
+          'hover:border-bp-elements-borderColorActive/40',
+          'focus-visible:border-violet-500/40 focus-visible:ring-2 focus-visible:ring-violet-500/10',
+          'disabled:pointer-events-none disabled:opacity-40',
+          'data-[placeholder]:text-bp-elements-textTertiary',
+          className,
+        )}
+      >
+        <SelectPrimitive.Value placeholder={placeholder ?? 'Select...'} />
+        <SelectPrimitive.Icon className="ml-2 shrink-0 text-bp-elements-textTertiary transition-transform duration-200 group-data-[state=open]:rotate-180">
+          <svg width="12" height="12" viewBox="0 0 12 12" fill="none">
+            <path d="M3 4.5L6 7.5L9 4.5" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
+          </svg>
+        </SelectPrimitive.Icon>
+      </SelectPrimitive.Trigger>
+
+      <SelectPrimitive.Portal>
+        <SelectPrimitive.Content
+          position="popper"
+          sideOffset={4}
+          className={cn(
+            'relative z-50 max-h-[min(var(--radix-select-content-available-height),280px)] min-w-[var(--radix-select-trigger-width)] overflow-hidden',
+            'rounded-xl border border-white/[0.06] bg-neutral-900/95 backdrop-blur-xl shadow-2xl shadow-black/40',
+            'data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-[0.98] data-[state=open]:slide-in-from-top-1',
+            'data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-[0.98] data-[state=closed]:slide-out-to-top-1',
+          )}
+        >
+          <SelectPrimitive.Viewport className="p-1.5">
+            {options.map((opt) => (
+              <SelectPrimitive.Item
+                key={opt.value}
+                value={opt.value}
+                className={cn(
+                  'relative flex w-full cursor-pointer items-center rounded-lg px-3 py-2.5 text-sm font-body outline-none select-none',
+                  'text-neutral-300 transition-colors duration-100',
+                  'data-[highlighted]:bg-white/[0.06] data-[highlighted]:text-white',
+                  'data-[state=checked]:text-violet-300',
+                )}
+              >
+                <SelectPrimitive.ItemText>{opt.label}</SelectPrimitive.ItemText>
+                <SelectPrimitive.ItemIndicator className="ml-auto pl-3">
+                  <svg width="14" height="14" viewBox="0 0 14 14" fill="none">
+                    <path d="M3 7.5L5.5 10L11 4" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
+                  </svg>
+                </SelectPrimitive.ItemIndicator>
+              </SelectPrimitive.Item>
+            ))}
+          </SelectPrimitive.Viewport>
+        </SelectPrimitive.Content>
+      </SelectPrimitive.Portal>
+    </SelectPrimitive.Root>
+  );
+}
+
+export { Select };

package/src/components/ui/separator.tsx

@@ -0,0 +1,25 @@
+import * as React from 'react';
+import * as SeparatorPrimitive from '@radix-ui/react-separator';
+import { cn } from '../../utils';
+
+function Separator({
+  className,
+  orientation = 'horizontal',
+  decorative = true,
+  ...props
+}: React.ComponentProps<typeof SeparatorPrimitive.Root>) {
+  return (
+    <SeparatorPrimitive.Root
+      data-slot="separator"
+      decorative={decorative}
+      orientation={orientation}
+      className={cn(
+        'bg-border shrink-0 data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-px',
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+export { Separator };

package/src/components/ui/skeleton.tsx

@@ -0,0 +1,13 @@
+import { cn } from '../../utils';
+
+function Skeleton({ className, ...props }: React.ComponentProps<'div'>) {
+  return (
+    <div
+      data-slot="skeleton"
+      className={cn('bg-accent animate-pulse rounded-md', className)}
+      {...props}
+    />
+  );
+}
+
+export { Skeleton };

package/src/components/ui/table.tsx

@@ -0,0 +1,49 @@
+import * as React from 'react';
+import { cn } from '../../utils';
+
+function Table({ className, ...props }: React.ComponentProps<'table'>) {
+  return (
+    <div data-slot="table-container" className="glass-card rounded-xl overflow-hidden">
+      <div className="relative w-full overflow-auto">
+        <table data-slot="table" className={cn('w-full caption-bottom text-sm', className)} {...props} />
+      </div>
+    </div>
+  );
+}
+
+function TableHeader({ className, ...props }: React.ComponentProps<'thead'>) {
+  return <thead data-slot="table-header" className={cn('border-b border-bp-elements-borderColor', className)} {...props} />;
+}
+
+function TableBody({ className, ...props }: React.ComponentProps<'tbody'>) {
+  return <tbody data-slot="table-body" className={cn('[&_tr:last-child]:border-0', className)} {...props} />;
+}
+
+function TableRow({ className, ...props }: React.ComponentProps<'tr'>) {
+  return (
+    <tr
+      data-slot="table-row"
+      className={cn(
+        'border-b border-bp-elements-dividerColor transition-colors duration-150 hover:bg-bp-elements-item-backgroundHover data-[state=selected]:bg-bp-elements-item-backgroundActive',
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function TableHead({ className, ...props }: React.ComponentProps<'th'>) {
+  return (
+    <th
+      data-slot="table-head"
+      className={cn('h-11 px-4 text-left align-middle font-data text-xs font-semibold uppercase tracking-wider text-bp-elements-textSecondary', className)}
+      {...props}
+    />
+  );
+}
+
+function TableCell({ className, ...props }: React.ComponentProps<'td'>) {
+  return <td data-slot="table-cell" className={cn('px-4 py-3 align-middle', className)} {...props} />;
+}
+
+export { Table, TableHeader, TableBody, TableRow, TableHead, TableCell };

package/src/components/ui/tabs.tsx

@@ -0,0 +1,39 @@
+import * as React from 'react';
+import * as TabsPrimitive from '@radix-ui/react-tabs';
+import { cn } from '../../utils';
+
+function Tabs({ className, ...props }: React.ComponentProps<typeof TabsPrimitive.Root>) {
+  return <TabsPrimitive.Root data-slot="tabs" className={cn('flex flex-col gap-2', className)} {...props} />;
+}
+
+function TabsList({ className, ...props }: React.ComponentProps<typeof TabsPrimitive.List>) {
+  return (
+    <TabsPrimitive.List
+      data-slot="tabs-list"
+      className={cn('glass-card inline-flex h-10 w-fit items-center justify-center rounded-xl p-1 gap-0.5', className)}
+      {...props}
+    />
+  );
+}
+
+function TabsTrigger({ className, ...props }: React.ComponentProps<typeof TabsPrimitive.Trigger>) {
+  return (
+    <TabsPrimitive.Trigger
+      data-slot="tabs-trigger"
+      className={cn(
+        'inline-flex items-center justify-center gap-1.5 rounded-lg px-3 py-1.5 text-sm font-medium font-display whitespace-nowrap transition-all duration-200',
+        'text-bp-elements-textTertiary hover:text-bp-elements-textSecondary',
+        'data-[state=active]:text-violet-700 dark:data-[state=active]:text-violet-400 data-[state=active]:bg-violet-500/10 data-[state=active]:shadow-[0_0_12px_rgba(142,89,255,0.1)]',
+        'disabled:pointer-events-none disabled:opacity-40',
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function TabsContent({ className, ...props }: React.ComponentProps<typeof TabsPrimitive.Content>) {
+  return <TabsPrimitive.Content data-slot="tabs-content" className={cn('flex-1 outline-none', className)} {...props} />;
+}
+
+export { Tabs, TabsList, TabsTrigger, TabsContent };

package/src/components/ui/textarea.tsx

@@ -0,0 +1,23 @@
+import * as React from 'react';
+import { cn } from '../../utils';
+
+function Textarea({ className, ...props }: React.ComponentProps<'textarea'>) {
+  return (
+    <textarea
+      data-slot="textarea"
+      className={cn(
+        'min-h-[80px] w-full rounded-lg px-3.5 py-2.5 text-base font-body resize-y',
+        'bg-bp-elements-background-depth-3 dark:bg-bp-elements-background-depth-4 border border-bp-elements-borderColor text-bp-elements-textPrimary',
+        'placeholder:text-bp-elements-textTertiary',
+        'transition-all duration-200 outline-none',
+        'hover:border-bp-elements-borderColorActive/40',
+        'focus-visible:border-violet-500/40 focus-visible:ring-2 focus-visible:ring-violet-500/10',
+        'disabled:pointer-events-none disabled:opacity-40',
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+export { Textarea };

package/src/components/ui/toggle.tsx

@@ -0,0 +1,35 @@
+import { cn } from '../../utils';
+
+interface ToggleProps {
+  checked: boolean;
+  onChange: (checked: boolean) => void;
+  disabled?: boolean;
+  className?: string;
+}
+
+function Toggle({ checked, onChange, disabled, className }: ToggleProps) {
+  return (
+    <button
+      type="button"
+      role="switch"
+      aria-checked={checked}
+      disabled={disabled}
+      onClick={() => onChange(!checked)}
+      className={cn(
+        'relative w-11 h-6 rounded-full transition-colors',
+        checked ? 'bg-violet-600' : 'bg-bp-elements-background-depth-4',
+        disabled && 'opacity-40 pointer-events-none',
+        className,
+      )}
+    >
+      <span
+        className={cn(
+          'absolute top-0.5 left-0.5 w-5 h-5 rounded-full bg-white transition-transform',
+          checked && 'translate-x-5',
+        )}
+      />
+    </button>
+  );
+}
+
+export { Toggle };

package/src/components.ts

@@ -0,0 +1,51 @@
+/**
+ * @tangle-network/blueprint-ui — shared UI components.
+ *
+ * Separated from index.ts so tree-shaking works cleanly for
+ * consumers that only need hooks/stores/contracts.
+ */
+
+// ── UI Primitives ──
+export { Badge, badgeVariants } from './components/ui/badge';
+export { Button, buttonVariants } from './components/ui/button';
+export { Card, CardHeader, CardTitle, CardDescription, CardContent, CardFooter } from './components/ui/card';
+export {
+  Dialog,
+  DialogTrigger,
+  DialogContent,
+  DialogHeader,
+  DialogFooter,
+  DialogTitle,
+  DialogDescription,
+} from './components/ui/dialog';
+export { Input } from './components/ui/input';
+export type { SelectOption } from './components/ui/select';
+export { Select } from './components/ui/select';
+export { Separator } from './components/ui/separator';
+export { Skeleton } from './components/ui/skeleton';
+export { Table, TableHeader, TableBody, TableRow, TableHead, TableCell } from './components/ui/table';
+export { Tabs, TabsList, TabsTrigger, TabsContent } from './components/ui/tabs';
+export { Textarea } from './components/ui/textarea';
+export { Toggle } from './components/ui/toggle';
+
+// ── Motion ──
+export { AnimatedPage, StaggerContainer, StaggerItem } from './components/motion/AnimatedPage';
+
+// ── Shared ──
+export { Identicon } from './components/shared/Identicon';
+export { TangleLogo } from './components/shared/TangleLogo';
+
+// ── Layout ──
+export { AppDocument } from './components/layout/AppDocument';
+export { AppFooter } from './components/layout/AppFooter';
+export { AppToaster } from './components/layout/AppToaster';
+export { Web3Shell } from './components/layout/Web3Shell';
+export { ChainSwitcher } from './components/layout/ChainSwitcher';
+export { ThemeToggle } from './components/layout/ThemeToggle';
+
+// ── Forms ──
+export { FormField } from './components/forms/FormField';
+export type { FormSection } from './components/forms/BlueprintJobForm';
+export { BlueprintJobForm } from './components/forms/BlueprintJobForm';
+export { FormSummary } from './components/forms/FormSummary';
+export { JobExecutionDialog } from './components/forms/JobExecutionDialog';