@tangle-network/sandbox-ui 0.2.2 → 0.3.4

package/dist/chunk-MUOL44AE.js

@@ -0,0 +1,121 @@
+import {
+  cn
+} from "./chunk-RQHJBTEU.js";
+
+// src/primitives/input.tsx
+import * as React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+var Input = React.forwardRef(
+  ({ className, type, variant = "default", label, error, hint, id, ...props }, ref) => {
+    const inputId = id ?? label?.toLowerCase().replace(/\s+/g, "-");
+    const variants = {
+      default: "border-input focus:ring-ring",
+      sandbox: "border-[var(--border-accent)] focus:border-[var(--border-accent-hover)] focus:ring-[var(--border-accent)]"
+    };
+    const input = /* @__PURE__ */ jsx(
+      "input",
+      {
+        type,
+        id: inputId,
+        className: cn(
+          "flex h-11 w-full rounded-lg border bg-card/50 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",
+          error ? "border-red-500/50 focus:ring-red-500/20" : variants[variant],
+          className
+        ),
+        ref,
+        ...props
+      }
+    );
+    if (!label && !error && !hint) return input;
+    return /* @__PURE__ */ jsxs("div", { className: "w-full space-y-1.5", children: [
+      label && /* @__PURE__ */ jsx(
+        "label",
+        {
+          htmlFor: inputId,
+          className: "block font-medium text-muted-foreground text-sm",
+          children: label
+        }
+      ),
+      input,
+      error && /* @__PURE__ */ jsx("p", { className: "text-red-400 text-sm", children: error }),
+      hint && !error && /* @__PURE__ */ jsx("p", { className: "text-muted-foreground/70 text-sm", children: hint })
+    ] });
+  }
+);
+Input.displayName = "Input";
+var Textarea = React.forwardRef(
+  ({ 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-[var(--border-accent)] focus:border-[var(--border-accent-hover)] focus:ring-[var(--border-accent)]"
+    };
+    const textarea = /* @__PURE__ */ jsx(
+      "textarea",
+      {
+        id: textareaId,
+        className: cn(
+          "flex min-h-[120px] w-full resize-y rounded-lg border bg-card/50 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-red-500/50 focus:ring-red-500/20" : variants[variant],
+          className
+        ),
+        ref,
+        ...props
+      }
+    );
+    if (!label && !error && !hint) return textarea;
+    return /* @__PURE__ */ jsxs("div", { className: "w-full space-y-1.5", children: [
+      label && /* @__PURE__ */ jsx(
+        "label",
+        {
+          htmlFor: textareaId,
+          className: "block font-medium text-muted-foreground text-sm",
+          children: label
+        }
+      ),
+      textarea,
+      error && /* @__PURE__ */ jsx("p", { className: "text-red-400 text-sm", children: error }),
+      hint && !error && /* @__PURE__ */ jsx("p", { className: "text-muted-foreground/70 text-sm", children: hint })
+    ] });
+  }
+);
+Textarea.displayName = "Textarea";
+
+// src/primitives/empty-state.tsx
+import * as React2 from "react";
+import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+var EmptyState = React2.forwardRef(
+  ({ className, icon, title, description, action, ...props }, ref) => {
+    return /* @__PURE__ */ jsxs2(
+      "div",
+      {
+        ref,
+        className: cn(
+          "flex flex-col items-center justify-center px-4 py-16 text-center",
+          className
+        ),
+        ...props,
+        children: [
+          icon && /* @__PURE__ */ jsx2("div", { className: "mb-4 rounded-full bg-muted p-4 text-muted-foreground", children: icon }),
+          /* @__PURE__ */ jsx2("h3", { className: "font-semibold text-lg", children: title }),
+          description && /* @__PURE__ */ jsx2("p", { className: "mt-2 max-w-sm text-muted-foreground text-sm", children: description }),
+          action && /* @__PURE__ */ jsx2("div", { className: "mt-6", children: action })
+        ]
+      }
+    );
+  }
+);
+EmptyState.displayName = "EmptyState";
+
+export {
+  Input,
+  Textarea,
+  EmptyState
+};

package/dist/chunk-MXCSSOGH.js

@@ -0,0 +1,105 @@
+import {
+  cn
+} from "./chunk-RQHJBTEU.js";
+
+// src/primitives/card.tsx
+import * as React from "react";
+import { jsx } from "react/jsx-runtime";
+var Card = React.forwardRef(({ className, variant = "default", hover = false, ...props }, ref) => {
+  const variants = {
+    default: "bg-card border-border",
+    glass: "bg-card/60 backdrop-blur-xl border-border/50",
+    sandbox: "bg-card/80 backdrop-blur-xl border-[var(--border-accent)] shadow-[var(--shadow-accent)]"
+  };
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref,
+      className: cn(
+        "rounded-xl border text-card-foreground transition-all duration-300",
+        variants[variant],
+        hover && "cursor-pointer hover:border-muted-foreground/50 hover:shadow-xl",
+        className
+      ),
+      ...props
+    }
+  );
+});
+Card.displayName = "Card";
+var CardHeader = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  "div",
+  {
+    ref,
+    className: cn("flex flex-col space-y-1.5 p-6", className),
+    ...props
+  }
+));
+CardHeader.displayName = "CardHeader";
+var CardTitle = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  "h3",
+  {
+    ref,
+    className: cn("font-semibold leading-none tracking-tight", className),
+    ...props
+  }
+));
+CardTitle.displayName = "CardTitle";
+var CardDescription = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  "p",
+  {
+    ref,
+    className: cn("text-muted-foreground text-sm", className),
+    ...props
+  }
+));
+CardDescription.displayName = "CardDescription";
+var CardContent = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx("div", { ref, className: cn("p-6 pt-0", className), ...props }));
+CardContent.displayName = "CardContent";
+var CardFooter = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  "div",
+  {
+    ref,
+    className: cn("flex items-center p-6 pt-0", className),
+    ...props
+  }
+));
+CardFooter.displayName = "CardFooter";
+
+// src/primitives/badge.tsx
+import { cva } from "class-variance-authority";
+import { jsx as jsx2 } from "react/jsx-runtime";
+var badgeVariants = cva(
+  "inline-flex items-center rounded-full border px-2.5 py-0.5 font-semibold 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 text-destructive-foreground",
+        outline: "text-foreground",
+        success: "border-green-500/20 border-transparent bg-green-500/10 text-green-400",
+        warning: "border-transparent border-yellow-500/20 bg-yellow-500/10 text-yellow-400",
+        error: "border-red-500/20 border-transparent bg-red-500/10 text-red-400",
+        info: "border-blue-500/20 border-transparent bg-blue-500/10 text-blue-400",
+        sandbox: "border-[var(--border-accent)] bg-[var(--accent-surface-soft)] text-[var(--accent-text)]"
+      }
+    },
+    defaultVariants: {
+      variant: "default"
+    }
+  }
+);
+function Badge({ className, variant, ...props }) {
+  return /* @__PURE__ */ jsx2("div", { className: cn(badgeVariants({ variant }), className), ...props });
+}
+
+export {
+  Card,
+  CardHeader,
+  CardTitle,
+  CardDescription,
+  CardContent,
+  CardFooter,
+  badgeVariants,
+  Badge
+};

package/dist/{chunk-NI2EI43H.js → chunk-PDV7W4NY.js}

@@ -28,7 +28,7 @@ DialogOverlay.displayName = DialogPrimitive.Overlay.displayName;
 var DialogContent = React.forwardRef(({ className, children, variant = "default", ...props }, ref) => {
   const variants = {
     default: "border-border",
-    sandbox: "border-purple-500/20 shadow-lg shadow-purple-500/10"
+    sandbox: "border-[var(--border-accent)] shadow-[var(--shadow-accent)]"
   };
   return /* @__PURE__ */ jsxs(DialogPortal, { children: [
     /* @__PURE__ */ jsx(DialogOverlay, {}),
@@ -110,104 +110,18 @@ var DialogDescription = React.forwardRef(({ className, ...props }, ref) => /* @_
 ));
 DialogDescription.displayName = DialogPrimitive.Description.displayName;
 
-// src/primitives/input.tsx
-import * as React2 from "react";
-import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
-var Input = React2.forwardRef(
-  ({ className, type, variant = "default", label, error, hint, id, ...props }, ref) => {
-    const inputId = id ?? label?.toLowerCase().replace(/\s+/g, "-");
-    const variants = {
-      default: "border-input focus:ring-ring",
-      sandbox: "border-purple-500/20 focus:border-purple-500/50 focus:ring-purple-500/20"
-    };
-    const input = /* @__PURE__ */ jsx2(
-      "input",
-      {
-        type,
-        id: inputId,
-        className: cn(
-          "flex h-11 w-full rounded-lg border bg-card/50 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",
-          error ? "border-red-500/50 focus:ring-red-500/20" : variants[variant],
-          className
-        ),
-        ref,
-        ...props
-      }
-    );
-    if (!label && !error && !hint) return input;
-    return /* @__PURE__ */ jsxs2("div", { className: "w-full space-y-1.5", children: [
-      label && /* @__PURE__ */ jsx2(
-        "label",
-        {
-          htmlFor: inputId,
-          className: "block font-medium text-muted-foreground text-sm",
-          children: label
-        }
-      ),
-      input,
-      error && /* @__PURE__ */ jsx2("p", { className: "text-red-400 text-sm", children: error }),
-      hint && !error && /* @__PURE__ */ jsx2("p", { className: "text-muted-foreground/70 text-sm", children: hint })
-    ] });
-  }
-);
-Input.displayName = "Input";
-var Textarea = React2.forwardRef(
-  ({ 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-purple-500/20 focus:border-purple-500/50 focus:ring-purple-500/20"
-    };
-    const textarea = /* @__PURE__ */ jsx2(
-      "textarea",
-      {
-        id: textareaId,
-        className: cn(
-          "flex min-h-[120px] w-full resize-y rounded-lg border bg-card/50 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-red-500/50 focus:ring-red-500/20" : variants[variant],
-          className
-        ),
-        ref,
-        ...props
-      }
-    );
-    if (!label && !error && !hint) return textarea;
-    return /* @__PURE__ */ jsxs2("div", { className: "w-full space-y-1.5", children: [
-      label && /* @__PURE__ */ jsx2(
-        "label",
-        {
-          htmlFor: textareaId,
-          className: "block font-medium text-muted-foreground text-sm",
-          children: label
-        }
-      ),
-      textarea,
-      error && /* @__PURE__ */ jsx2("p", { className: "text-red-400 text-sm", children: error }),
-      hint && !error && /* @__PURE__ */ jsx2("p", { className: "text-muted-foreground/70 text-sm", children: hint })
-    ] });
-  }
-);
-Textarea.displayName = "Textarea";
-
 // src/primitives/tabs.tsx
 import * as TabsPrimitive from "@radix-ui/react-tabs";
-import * as React3 from "react";
-import { jsx as jsx3 } from "react/jsx-runtime";
+import * as React2 from "react";
+import { jsx as jsx2 } from "react/jsx-runtime";
 var Tabs = TabsPrimitive.Root;
-var TabsList = React3.forwardRef(({ className, variant = "default", ...props }, ref) => {
+var TabsList = React2.forwardRef(({ className, variant = "default", ...props }, ref) => {
   const variants = {
     default: "inline-flex h-10 items-center justify-center rounded-lg bg-muted p-1 text-muted-foreground",
     pills: "inline-flex items-center gap-2",
     underline: "inline-flex items-center gap-4 border-b border-border"
   };
-  return /* @__PURE__ */ jsx3(
+  return /* @__PURE__ */ jsx2(
     TabsPrimitive.List,
     {
       ref,
@@ -217,13 +131,13 @@ var TabsList = React3.forwardRef(({ className, variant = "default", ...props },
   );
 });
 TabsList.displayName = TabsPrimitive.List.displayName;
-var TabsTrigger = React3.forwardRef(({ className, variant = "default", ...props }, ref) => {
+var TabsTrigger = React2.forwardRef(({ className, variant = "default", ...props }, ref) => {
   const variants = {
     default: "inline-flex items-center justify-center whitespace-nowrap rounded-md px-3 py-1.5 text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow-sm",
     pills: "inline-flex items-center justify-center whitespace-nowrap rounded-full px-4 py-2 text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-primary data-[state=active]:text-primary-foreground data-[state=inactive]:text-muted-foreground data-[state=inactive]:hover:bg-muted",
     underline: "inline-flex items-center justify-center whitespace-nowrap pb-3 text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 border-b-2 border-transparent data-[state=active]:border-primary data-[state=active]:text-foreground data-[state=inactive]:text-muted-foreground"
   };
-  return /* @__PURE__ */ jsx3(
+  return /* @__PURE__ */ jsx2(
     TabsPrimitive.Trigger,
     {
       ref,
@@ -233,7 +147,7 @@ var TabsTrigger = React3.forwardRef(({ className, variant = "default", ...props
   );
 });
 TabsTrigger.displayName = TabsPrimitive.Trigger.displayName;
-var TabsContent = React3.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx3(
+var TabsContent = React2.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx2(
   TabsPrimitive.Content,
   {
     ref,
@@ -247,32 +161,6 @@ var TabsContent = React3.forwardRef(({ className, ...props }, ref) => /* @__PURE
 ));
 TabsContent.displayName = TabsPrimitive.Content.displayName;
 
-// src/primitives/empty-state.tsx
-import * as React4 from "react";
-import { jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
-var EmptyState = React4.forwardRef(
-  ({ className, icon, title, description, action, ...props }, ref) => {
-    return /* @__PURE__ */ jsxs3(
-      "div",
-      {
-        ref,
-        className: cn(
-          "flex flex-col items-center justify-center px-4 py-16 text-center",
-          className
-        ),
-        ...props,
-        children: [
-          icon && /* @__PURE__ */ jsx4("div", { className: "mb-4 rounded-full bg-muted p-4 text-muted-foreground", children: icon }),
-          /* @__PURE__ */ jsx4("h3", { className: "font-semibold text-lg", children: title }),
-          description && /* @__PURE__ */ jsx4("p", { className: "mt-2 max-w-sm text-muted-foreground text-sm", children: description }),
-          action && /* @__PURE__ */ jsx4("div", { className: "mt-6", children: action })
-        ]
-      }
-    );
-  }
-);
-EmptyState.displayName = "EmptyState";
-
 export {
   Dialog,
   DialogTrigger,
@@ -284,11 +172,8 @@ export {
   DialogFooter,
   DialogTitle,
   DialogDescription,
-  Input,
-  Textarea,
   Tabs,
   TabsList,
   TabsTrigger,
-  TabsContent,
-  EmptyState
+  TabsContent
 };