@tangle-network/sandbox-ui 0.2.1 → 0.3.3

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-J4OADEUK.js → chunk-OM6ON27W.js}

@@ -10,12 +10,14 @@ import {
   DropdownMenuTrigger
 } from "./chunk-MCGKDCOR.js";
 import {
-  Badge,
   Skeleton
-} from "./chunk-2UHPE5T7.js";
+} from "./chunk-FRGMMANX.js";
+import {
+  Badge
+} from "./chunk-MXCSSOGH.js";
 import {
   Button
-} from "./chunk-E6FS7R4X.js";
+} from "./chunk-HWLX5NME.js";
 import {
   cn
 } from "./chunk-RQHJBTEU.js";
@@ -110,8 +112,8 @@ import * as React from "react";
 import { Fragment, jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
 var variantStyles = {
   sandbox: {
-    activeNav: "bg-purple-500/10 text-purple-400",
-    userGradient: "from-purple-500 to-violet-500"
+    activeNav: "bg-[var(--accent-surface-soft)] text-[var(--accent-text)]",
+    userGradient: "bg-[image:var(--accent-gradient-strong)]"
   }
 };
 function DefaultLink({
@@ -254,6 +256,9 @@ function DashboardLayout({
   onLogout,
   onSettingsClick,
   settingsHref = "/dashboard/settings",
+  className,
+  sidebarClassName,
+  contentClassName,
   LinkComponent = DefaultLink
 }) {
   const styles = variantStyles[variant];
@@ -300,7 +305,7 @@ function DashboardLayout({
                 "div",
                 {
                   className: cn(
-                    "flex h-8 w-8 items-center justify-center rounded-full bg-gradient-to-r",
+                    "flex h-8 w-8 items-center justify-center rounded-full",
                     styles.userGradient
                   ),
                   children: /* @__PURE__ */ jsx2(UserIcon, { className: "h-4 w-4 text-white", "aria-hidden": "true" })
@@ -344,7 +349,7 @@ function DashboardLayout({
       ] })
     ] })
   ] });
-  return /* @__PURE__ */ jsxs2("div", { className: "flex min-h-screen bg-background", children: [
+  return /* @__PURE__ */ jsxs2("div", { className: cn("flex min-h-screen bg-background", className), children: [
     /* @__PURE__ */ jsxs2("header", { className: "fixed top-0 right-0 left-0 z-40 flex h-16 items-center justify-between border-border border-b bg-card/95 px-4 backdrop-blur-xl md:hidden", children: [
       /* @__PURE__ */ jsx2(Logo, { variant, size: "sm" }),
       /* @__PURE__ */ jsx2(
@@ -372,13 +377,23 @@ function DashboardLayout({
       {
         className: cn(
           "fixed top-16 bottom-0 left-0 z-30 flex w-64 flex-col border-border border-r bg-card/95 backdrop-blur-xl transition-transform duration-200 md:hidden",
+          sidebarClassName,
           mobileMenuOpen ? "translate-x-0" : "-translate-x-full"
         ),
         children: /* @__PURE__ */ jsx2(SidebarContent, {})
       }
     ),
-    /* @__PURE__ */ jsx2("aside", { className: "fixed top-0 bottom-0 left-0 hidden w-64 flex-col border-border border-r bg-card/50 backdrop-blur-xl md:flex", children: /* @__PURE__ */ jsx2(SidebarContent, {}) }),
-    /* @__PURE__ */ jsx2("main", { className: "flex-1 pt-16 md:ml-64 md:pt-0", children: /* @__PURE__ */ jsx2("div", { className: "p-4 md:p-8", children: /* @__PURE__ */ jsx2("div", { className: "mx-auto max-w-6xl", children }) }) })
+    /* @__PURE__ */ jsx2(
+      "aside",
+      {
+        className: cn(
+          "fixed top-0 bottom-0 left-0 hidden w-64 flex-col border-border border-r bg-card/50 backdrop-blur-xl md:flex",
+          sidebarClassName
+        ),
+        children: /* @__PURE__ */ jsx2(SidebarContent, {})
+      }
+    ),
+    /* @__PURE__ */ jsx2("main", { className: cn("flex-1 pt-16 md:ml-64 md:pt-0", contentClassName), children: /* @__PURE__ */ jsx2("div", { className: "p-4 md:p-8", children: /* @__PURE__ */ jsx2("div", { className: "mx-auto max-w-6xl", children }) }) })
   ] });
 }
 

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
 };

package/dist/chunk-TQN3VR4F.js

@@ -0,0 +1,92 @@
+import {
+  cn
+} from "./chunk-RQHJBTEU.js";
+
+// src/primitives/table.tsx
+import * as React from "react";
+import { jsx } from "react/jsx-runtime";
+var Table = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx("div", { className: "relative w-full overflow-auto", children: /* @__PURE__ */ jsx(
+  "table",
+  {
+    ref,
+    className: cn("w-full caption-bottom text-sm", className),
+    ...props
+  }
+) }));
+Table.displayName = "Table";
+var TableHeader = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx("thead", { ref, className: cn("[&_tr]:border-b", className), ...props }));
+TableHeader.displayName = "TableHeader";
+var TableBody = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  "tbody",
+  {
+    ref,
+    className: cn("[&_tr:last-child]:border-0", className),
+    ...props
+  }
+));
+TableBody.displayName = "TableBody";
+var TableFooter = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  "tfoot",
+  {
+    ref,
+    className: cn(
+      "border-t bg-muted/50 font-medium [&>tr]:last:border-b-0",
+      className
+    ),
+    ...props
+  }
+));
+TableFooter.displayName = "TableFooter";
+var TableRow = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  "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 = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  "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 = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  "td",
+  {
+    ref,
+    className: cn("p-4 align-middle [&:has([role=checkbox])]:pr-0", className),
+    ...props
+  }
+));
+TableCell.displayName = "TableCell";
+var TableCaption = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  "caption",
+  {
+    ref,
+    className: cn("mt-4 text-muted-foreground text-sm", className),
+    ...props
+  }
+));
+TableCaption.displayName = "TableCaption";
+
+export {
+  Table,
+  TableHeader,
+  TableBody,
+  TableFooter,
+  TableRow,
+  TableHead,
+  TableCell,
+  TableCaption
+};