@tangle-network/sandbox-ui 0.2.2 → 0.3.3

package/dist/{chunk-SOT2V7TX.js → chunk-TXI4MZAZ.js}

@@ -1,6 +1,6 @@
 import {
   Card
-} from "./chunk-2UHPE5T7.js";
+} from "./chunk-MXCSSOGH.js";
 import {
   cn
 } from "./chunk-RQHJBTEU.js";
@@ -118,89 +118,11 @@ var SelectSeparator = React.forwardRef(({ className, ...props }, ref) => /* @__P
 ));
 SelectSeparator.displayName = SelectPrimitive.Separator.displayName;
 
-// src/primitives/table.tsx
-import * as React2 from "react";
-import { jsx as jsx2 } from "react/jsx-runtime";
-var Table = React2.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx2("div", { className: "relative w-full overflow-auto", children: /* @__PURE__ */ jsx2(
-  "table",
-  {
-    ref,
-    className: cn("w-full caption-bottom text-sm", className),
-    ...props
-  }
-) }));
-Table.displayName = "Table";
-var TableHeader = React2.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx2("thead", { ref, className: cn("[&_tr]:border-b", className), ...props }));
-TableHeader.displayName = "TableHeader";
-var TableBody = React2.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx2(
-  "tbody",
-  {
-    ref,
-    className: cn("[&_tr:last-child]:border-0", className),
-    ...props
-  }
-));
-TableBody.displayName = "TableBody";
-var TableFooter = React2.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx2(
-  "tfoot",
-  {
-    ref,
-    className: cn(
-      "border-t bg-muted/50 font-medium [&>tr]:last:border-b-0",
-      className
-    ),
-    ...props
-  }
-));
-TableFooter.displayName = "TableFooter";
-var TableRow = React2.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx2(
-  "tr",
-  {
-    ref,
-    className: cn(
-      "border-border border-b transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted",
-      className
-    ),
-    ...props
-  }
-));
-TableRow.displayName = "TableRow";
-var TableHead = React2.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx2(
-  "th",
-  {
-    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";
-var TableCell = React2.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx2(
-  "td",
-  {
-    ref,
-    className: cn("p-4 align-middle [&:has([role=checkbox])]:pr-0", className),
-    ...props
-  }
-));
-TableCell.displayName = "TableCell";
-var TableCaption = React2.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx2(
-  "caption",
-  {
-    ref,
-    className: cn("mt-4 text-muted-foreground text-sm", className),
-    ...props
-  }
-));
-TableCaption.displayName = "TableCaption";
-
 // src/primitives/switch.tsx
 import * as SwitchPrimitives from "@radix-ui/react-switch";
-import * as React3 from "react";
-import { jsx as jsx3 } from "react/jsx-runtime";
-var Switch = React3.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx3(
+import * as React2 from "react";
+import { jsx as jsx2 } from "react/jsx-runtime";
+var Switch = React2.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx2(
   SwitchPrimitives.Root,
   {
     className: cn(
@@ -209,7 +131,7 @@ var Switch = React3.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */
     ),
     ...props,
     ref,
-    children: /* @__PURE__ */ jsx3(
+    children: /* @__PURE__ */ jsx2(
       SwitchPrimitives.Thumb,
       {
         className: cn(
@@ -230,8 +152,8 @@ import {
   Info,
   X
 } from "lucide-react";
-import * as React4 from "react";
-import { jsx as jsx4, jsxs as jsxs2 } from "react/jsx-runtime";
+import * as React3 from "react";
+import { jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
 var toastVariants = cva(
   "pointer-events-auto relative flex w-full items-center justify-between gap-3 overflow-hidden rounded-lg border p-4 shadow-lg transition-all",
   {
@@ -272,20 +194,20 @@ function ToastComponent({
       "aria-live": "polite",
       children: [
         /* @__PURE__ */ jsxs2("div", { className: "flex items-start gap-3", children: [
-          /* @__PURE__ */ jsx4(Icon2, { className: "h-5 w-5 shrink-0", "aria-hidden": "true" }),
+          /* @__PURE__ */ jsx3(Icon2, { className: "h-5 w-5 shrink-0", "aria-hidden": "true" }),
           /* @__PURE__ */ jsxs2("div", { className: "flex-1", children: [
-            /* @__PURE__ */ jsx4("p", { className: "font-medium text-sm", children: title }),
-            description && /* @__PURE__ */ jsx4("p", { className: "mt-1 text-sm opacity-80", children: description })
+            /* @__PURE__ */ jsx3("p", { className: "font-medium text-sm", children: title }),
+            description && /* @__PURE__ */ jsx3("p", { className: "mt-1 text-sm opacity-80", children: description })
           ] })
         ] }),
-        /* @__PURE__ */ jsx4(
+        /* @__PURE__ */ jsx3(
           "button",
           {
             type: "button",
             onClick: () => onDismiss(id),
             className: "shrink-0 rounded-md p-1 opacity-70 transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-offset-2",
             "aria-label": "Dismiss notification",
-            children: /* @__PURE__ */ jsx4(X, { className: "h-4 w-4" })
+            children: /* @__PURE__ */ jsx3(X, { className: "h-4 w-4" })
           }
         )
       ]
@@ -293,22 +215,22 @@ function ToastComponent({
   );
 }
 function ToastContainer({ toasts, onDismiss }) {
-  return /* @__PURE__ */ jsx4(
+  return /* @__PURE__ */ jsx3(
     "div",
     {
       className: "fixed right-4 bottom-4 z-50 flex max-w-md flex-col gap-2",
       "aria-label": "Notifications",
-      children: toasts.map((toast) => /* @__PURE__ */ jsx4(ToastComponent, { ...toast, onDismiss }, toast.id))
+      children: toasts.map((toast) => /* @__PURE__ */ jsx3(ToastComponent, { ...toast, onDismiss }, toast.id))
     }
   );
 }
-var ToastContext = React4.createContext(null);
+var ToastContext = React3.createContext(null);
 function ToastProvider({ children }) {
-  const [toasts, setToasts] = React4.useState([]);
-  const dismiss = React4.useCallback((id) => {
+  const [toasts, setToasts] = React3.useState([]);
+  const dismiss = React3.useCallback((id) => {
     setToasts((prev) => prev.filter((t) => t.id !== id));
   }, []);
-  const toast = React4.useCallback(
+  const toast = React3.useCallback(
     (input) => {
       const id = Math.random().toString(36).slice(2);
       const newToast = { id, ...input };
@@ -320,41 +242,41 @@ function ToastProvider({ children }) {
     },
     [dismiss]
   );
-  const success = React4.useCallback(
+  const success = React3.useCallback(
     (title, description) => {
       toast({ title, description, variant: "success" });
     },
     [toast]
   );
-  const error = React4.useCallback(
+  const error = React3.useCallback(
     (title, description) => {
       toast({ title, description, variant: "error" });
     },
     [toast]
   );
-  const warning = React4.useCallback(
+  const warning = React3.useCallback(
     (title, description) => {
       toast({ title, description, variant: "warning" });
     },
     [toast]
   );
-  const info = React4.useCallback(
+  const info = React3.useCallback(
     (title, description) => {
       toast({ title, description, variant: "info" });
     },
     [toast]
   );
-  const value = React4.useMemo(
+  const value = React3.useMemo(
     () => ({ toasts, toast, success, error, warning, info, dismiss }),
     [toasts, toast, success, error, warning, info, dismiss]
   );
   return /* @__PURE__ */ jsxs2(ToastContext.Provider, { value, children: [
     children,
-    /* @__PURE__ */ jsx4(ToastContainer, { toasts, onDismiss: dismiss })
+    /* @__PURE__ */ jsx3(ToastContainer, { toasts, onDismiss: dismiss })
   ] });
 }
 function useToast() {
-  const context = React4.useContext(ToastContext);
+  const context = React3.useContext(ToastContext);
   if (!context) {
     throw new Error("useToast must be used within a ToastProvider");
   }
@@ -364,12 +286,12 @@ function useToast() {
 // src/primitives/label.tsx
 import * as LabelPrimitive from "@radix-ui/react-label";
 import { cva as cva2 } from "class-variance-authority";
-import * as React5 from "react";
-import { jsx as jsx5 } from "react/jsx-runtime";
+import * as React4 from "react";
+import { jsx as jsx4 } from "react/jsx-runtime";
 var labelVariants = cva2(
   "font-medium text-sm leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
 );
-var Label2 = React5.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx5(
+var Label2 = React4.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx4(
   LabelPrimitive.Root,
   {
     ref,
@@ -380,9 +302,9 @@ var Label2 = React5.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */
 Label2.displayName = LabelPrimitive.Root.displayName;
 
 // src/primitives/stat-card.tsx
-import * as React6 from "react";
-import { jsx as jsx6, jsxs as jsxs3 } from "react/jsx-runtime";
-var StatCard = React6.forwardRef(
+import * as React5 from "react";
+import { jsx as jsx5, jsxs as jsxs3 } from "react/jsx-runtime";
+var StatCard = React5.forwardRef(
   ({
     className,
     variant = "default",
@@ -395,7 +317,7 @@ var StatCard = React6.forwardRef(
   }, ref) => {
     const iconColors = {
       default: "text-muted-foreground",
-      sandbox: "text-purple-400"
+      sandbox: "text-[var(--accent-text)]"
     };
     const trendColors = {
       positive: "text-green-400",
@@ -403,7 +325,7 @@ var StatCard = React6.forwardRef(
       neutral: "text-muted-foreground"
     };
     const trendStatus = trend ? trend.value > 0 ? "positive" : trend.value < 0 ? "negative" : "neutral" : null;
-    return /* @__PURE__ */ jsx6(
+    return /* @__PURE__ */ jsx5(
       Card,
       {
         ref,
@@ -412,9 +334,9 @@ var StatCard = React6.forwardRef(
         ...props,
         children: /* @__PURE__ */ jsxs3("div", { className: "flex items-start justify-between", children: [
           /* @__PURE__ */ jsxs3("div", { className: "space-y-1", children: [
-            /* @__PURE__ */ jsx6("p", { className: "text-muted-foreground text-sm", children: title }),
-            /* @__PURE__ */ jsx6("p", { className: "font-bold text-3xl tracking-tight", children: value }),
-            subtitle && /* @__PURE__ */ jsx6("p", { className: "text-muted-foreground/70 text-xs", children: subtitle }),
+            /* @__PURE__ */ jsx5("p", { className: "text-muted-foreground text-sm", children: title }),
+            /* @__PURE__ */ jsx5("p", { className: "font-bold text-3xl tracking-tight", children: value }),
+            subtitle && /* @__PURE__ */ jsx5("p", { className: "text-muted-foreground/70 text-xs", children: subtitle }),
             trend && trendStatus && /* @__PURE__ */ jsxs3(
               "div",
               {
@@ -428,15 +350,19 @@ var StatCard = React6.forwardRef(
                     Math.abs(trend.value),
                     "%"
                   ] }),
-                  trend.label && /* @__PURE__ */ jsx6("span", { className: "text-muted-foreground", children: trend.label })
+                  trend.label && /* @__PURE__ */ jsx5("span", { className: "text-muted-foreground", children: trend.label })
                 ]
               }
             )
           ] }),
-          icon && /* @__PURE__ */ jsx6(
+          icon && /* @__PURE__ */ jsx5(
             "div",
             {
-              className: cn("rounded-lg bg-muted/50 p-2", iconColors[variant]),
+              className: cn(
+                "rounded-lg bg-muted/50 p-2",
+                variant === "sandbox" && "bg-[var(--accent-surface-soft)]",
+                iconColors[variant]
+              ),
               children: icon
             }
           )
@@ -448,10 +374,10 @@ var StatCard = React6.forwardRef(
 StatCard.displayName = "StatCard";
 
 // src/primitives/terminal-display.tsx
-import * as React7 from "react";
+import * as React6 from "react";
 import { useEffect, useRef } from "react";
-import { jsx as jsx7, jsxs as jsxs4 } from "react/jsx-runtime";
-var TerminalDisplay = React7.forwardRef(
+import { jsx as jsx6, jsxs as jsxs4 } from "react/jsx-runtime";
+var TerminalDisplay = React6.forwardRef(
   ({
     className,
     variant = "default",
@@ -470,11 +396,11 @@ var TerminalDisplay = React7.forwardRef(
     }, [autoScroll]);
     const variants = {
       default: "border-border",
-      sandbox: "border-purple-500/20 shadow-lg shadow-purple-500/5"
+      sandbox: "border-[var(--border-accent)] shadow-[var(--shadow-accent)]"
     };
     const dotColors = {
       default: ["bg-red-500", "bg-yellow-500", "bg-green-500"],
-      sandbox: ["bg-red-500", "bg-yellow-500", "bg-purple-500"]
+      sandbox: ["bg-red-500", "bg-yellow-500", "bg-[var(--brand-cool)]"]
     };
     return /* @__PURE__ */ jsxs4(
       "div",
@@ -488,16 +414,16 @@ var TerminalDisplay = React7.forwardRef(
         ...props,
         children: [
           showHeader && /* @__PURE__ */ jsxs4("div", { className: "flex items-center gap-2 border-border/50 border-b bg-card/30 px-4 py-3", children: [
-            /* @__PURE__ */ jsx7("div", { className: "flex gap-1.5", children: dotColors[variant].map((color) => /* @__PURE__ */ jsx7(
+            /* @__PURE__ */ jsx6("div", { className: "flex gap-1.5", children: dotColors[variant].map((color) => /* @__PURE__ */ jsx6(
               "div",
               {
                 className: cn("h-3 w-3 rounded-full", color)
               },
               color
             )) }),
-            /* @__PURE__ */ jsx7("span", { className: "ml-2 text-muted-foreground text-xs", children: title })
+            /* @__PURE__ */ jsx6("span", { className: "ml-2 text-muted-foreground text-xs", children: title })
           ] }),
-          /* @__PURE__ */ jsx7(
+          /* @__PURE__ */ jsx6(
             "div",
             {
               ref: containerRef,
@@ -512,7 +438,7 @@ var TerminalDisplay = React7.forwardRef(
   }
 );
 TerminalDisplay.displayName = "TerminalDisplay";
-var TerminalLine = React7.forwardRef(
+var TerminalLine = React6.forwardRef(
   ({ className, type = "output", prompt = "$", timestamp, children, ...props }, ref) => {
     const typeStyles = {
       input: "text-foreground",
@@ -535,21 +461,21 @@ var TerminalLine = React7.forwardRef(
         ),
         ...props,
         children: [
-          (type === "input" || type === "command") && /* @__PURE__ */ jsx7("span", { className: "shrink-0 select-none text-green-400", children: prompt }),
-          type === "thinking" && /* @__PURE__ */ jsx7("span", { className: "shrink-0 select-none", children: "..." }),
+          (type === "input" || type === "command") && /* @__PURE__ */ jsx6("span", { className: "shrink-0 select-none text-green-400", children: prompt }),
+          type === "thinking" && /* @__PURE__ */ jsx6("span", { className: "shrink-0 select-none", children: "..." }),
           timestamp && /* @__PURE__ */ jsxs4("span", { className: "shrink-0 select-none text-muted-foreground/50", children: [
             "[",
             timestamp,
             "]"
           ] }),
-          /* @__PURE__ */ jsx7("span", { className: "whitespace-pre-wrap break-all", children })
+          /* @__PURE__ */ jsx6("span", { className: "whitespace-pre-wrap break-all", children })
         ]
       }
     );
   }
 );
 TerminalLine.displayName = "TerminalLine";
-var TerminalCursor = React7.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx7(
+var TerminalCursor = React6.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx6(
   "span",
   {
     ref,
@@ -561,9 +487,9 @@ var TerminalCursor = React7.forwardRef(({ className, ...props }, ref) => /* @__P
   }
 ));
 TerminalCursor.displayName = "TerminalCursor";
-var TerminalInput = React7.forwardRef(
+var TerminalInput = React6.forwardRef(
   ({ className, onSubmit, variant = "default", ...props }, ref) => {
-    const [value, setValue] = React7.useState("");
+    const [value, setValue] = React6.useState("");
     const handleKeyDown = (e) => {
       if (e.key === "Enter" && value.trim() && onSubmit) {
         onSubmit(value.trim());
@@ -572,7 +498,7 @@ var TerminalInput = React7.forwardRef(
     };
     const variants = {
       default: "border-border focus-within:border-muted-foreground",
-      sandbox: "border-purple-500/20 focus-within:border-purple-500/50"
+      sandbox: "border-[var(--border-accent)] focus-within:border-[var(--border-accent-hover)]"
     };
     return /* @__PURE__ */ jsxs4(
       "div",
@@ -583,8 +509,8 @@ var TerminalInput = React7.forwardRef(
           className
         ),
         children: [
-          /* @__PURE__ */ jsx7("span", { className: "mr-2 select-none text-green-400", children: "$" }),
-          /* @__PURE__ */ jsx7(
+          /* @__PURE__ */ jsx6("span", { className: "mr-2 select-none text-green-400", children: "$" }),
+          /* @__PURE__ */ jsx6(
             "input",
             {
               ref,
@@ -596,7 +522,7 @@ var TerminalInput = React7.forwardRef(
               ...props
             }
           ),
-          /* @__PURE__ */ jsx7(TerminalCursor, {})
+          /* @__PURE__ */ jsx6(TerminalCursor, {})
         ]
       }
     );
@@ -615,14 +541,6 @@ export {
   SelectLabel,
   SelectItem,
   SelectSeparator,
-  Table,
-  TableHeader,
-  TableBody,
-  TableFooter,
-  TableRow,
-  TableHead,
-  TableCell,
-  TableCaption,
   Switch,
   ToastContainer,
   ToastProvider,