@reifydb/ui 0.4.7

package/dist/index.mjs

@@ -0,0 +1,608 @@
+// src/components/badge/badge.tsx
+import { jsx } from "react/jsx-runtime";
+var variantStyles = {
+  active: "font-bold text-primary",
+  inactive: "text-text-secondary",
+  "coming-soon": "text-text-secondary",
+  default: "text-text-primary",
+  signal: "font-bold text-primary",
+  success: "text-[11px] font-medium rounded-full border px-2.5 py-0.5 bg-status-success/15 text-status-success border-status-success/30",
+  danger: "text-[11px] font-medium rounded-full border px-2.5 py-0.5 bg-status-error/15 text-status-error border-status-error/30",
+  warning: "text-[11px] font-medium rounded-full border px-2.5 py-0.5 bg-status-warning/15 text-status-warning border-status-warning/30",
+  error: "text-[11px] font-medium rounded-full border px-2.5 py-0.5 bg-status-error/15 text-status-error border-status-error/30",
+  outline: "text-text-muted"
+};
+function Badge({ variant = "default", children, className = "", onClick }) {
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      className: `inline-flex items-center ${variantStyles[variant]} ${className}`,
+      onClick,
+      children
+    }
+  );
+}
+
+// src/components/button/button.tsx
+import { forwardRef } from "react";
+import { jsx as jsx2 } from "react/jsx-runtime";
+var variantStyles2 = {
+  primary: "bg-primary text-[var(--accent-text,#1a1a1a)] font-semibold border-primary hover:brightness-110 hover:shadow-[0_0_16px_rgba(255,255,255,0.1)]",
+  secondary: "bg-transparent text-text-secondary border-border-default font-medium hover:border-primary hover:text-primary",
+  ghost: "text-text-secondary border-transparent hover:bg-white/[0.04] hover:text-text-primary",
+  danger: "bg-status-error/10 text-status-error border-status-error/30 hover:bg-status-error/20",
+  destructive: "bg-status-error text-white font-semibold border-status-error hover:bg-status-error/90",
+  link: "text-primary border-transparent underline-offset-4 hover:underline"
+};
+var sizeStyles = {
+  sm: "h-8 px-3 text-xs gap-1.5",
+  md: "h-9 px-4 text-sm gap-2",
+  lg: "h-11 px-6 text-sm gap-2",
+  icon: "h-9 w-9 p-0"
+};
+var Button = forwardRef(
+  ({ variant = "primary", size = "md", className = "", children, disabled, ...props }, ref) => {
+    return /* @__PURE__ */ jsx2(
+      "button",
+      {
+        ref,
+        className: `inline-flex items-center justify-center font-medium transition-all duration-200
+          rounded-lg border
+          focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary
+          disabled:pointer-events-none disabled:opacity-50
+          ${variantStyles2[variant]} ${sizeStyles[size]} ${className}`,
+        disabled,
+        ...props,
+        children
+      }
+    );
+  }
+);
+Button.displayName = "Button";
+
+// src/components/card/card.tsx
+import { jsx as jsx3 } from "react/jsx-runtime";
+function Card({ children, className = "" }) {
+  return /* @__PURE__ */ jsx3("div", { className: `glass-card p-6 ${className}`, children });
+}
+function CardHeader({ children, className = "" }) {
+  return /* @__PURE__ */ jsx3("div", { className: `mb-4 ${className}`, children });
+}
+function CardTitle({ children, className = "" }) {
+  return /* @__PURE__ */ jsx3("h3", { className: `text-sm font-medium text-text-primary ${className}`, children });
+}
+function CardDescription({ children, className = "" }) {
+  return /* @__PURE__ */ jsx3("p", { className: `mt-1 text-xs text-text-muted ${className}`, children });
+}
+function CardContent({ children, className = "" }) {
+  return /* @__PURE__ */ jsx3("div", { className, children });
+}
+function CardFooter({ children, className = "" }) {
+  return /* @__PURE__ */ jsx3("div", { className: `pt-4 mt-4 border-t border-white/[0.06] ${className}`, children });
+}
+
+// src/components/chip/chip.tsx
+import { jsx as jsx4 } from "react/jsx-runtime";
+function Chip({ active, onClick, children, className = "" }) {
+  return /* @__PURE__ */ jsx4(
+    "button",
+    {
+      onClick,
+      className: `text-xs font-medium px-3 py-1 rounded-lg border cursor-pointer whitespace-nowrap transition-all ${active ? "text-primary border-primary/30 bg-primary/10" : "text-text-secondary bg-white/[0.04] border-white/[0.08] hover:text-text-primary hover:border-white/[0.12]"} ${className}`,
+      children
+    }
+  );
+}
+
+// src/components/chip-group/chip-group.tsx
+import { jsx as jsx5 } from "react/jsx-runtime";
+function ChipGroup(props) {
+  const { options, className = "" } = props;
+  return /* @__PURE__ */ jsx5("div", { className: `flex items-center gap-2 ${className}`, children: options.map((option) => {
+    const isActive = props.multiple ? props.value.includes(option.value) : props.value === option.value;
+    const handleClick = () => {
+      if (props.multiple) {
+        const next = props.value.includes(option.value) ? props.value.filter((v) => v !== option.value) : [...props.value, option.value];
+        props.onChange(next);
+      } else {
+        props.onChange(option.value);
+      }
+    };
+    return /* @__PURE__ */ jsx5(Chip, { active: isActive, onClick: handleClick, children: option.label }, option.value);
+  }) });
+}
+
+// src/components/code-block/code-block.tsx
+import { useMemo } from "react";
+import Prism from "prismjs";
+import "prismjs/components/prism-json";
+import "prismjs/components/prism-bash";
+import "prismjs/components/prism-python";
+import "prismjs/components/prism-javascript";
+import "prismjs/components/prism-typescript";
+import "prismjs/components/prism-rust";
+
+// src/components/copy-button/copy-button.tsx
+import { useState, useCallback } from "react";
+import { Fragment, jsx as jsx6, jsxs } from "react/jsx-runtime";
+function CopyButton({ text, className = "", label, onCopy }) {
+  const [copied, setCopied] = useState(false);
+  const handleCopy = useCallback(async () => {
+    await navigator.clipboard.writeText(text);
+    setCopied(true);
+    setTimeout(() => setCopied(false), 2e3);
+    onCopy?.();
+  }, [text, onCopy]);
+  return /* @__PURE__ */ jsx6(
+    "button",
+    {
+      onClick: handleCopy,
+      className: `inline-flex items-center gap-1.5 px-2 py-1 text-xs text-text-muted
+        rounded-sm border border-white/[0.08] transition-colors duration-75 hover:bg-white/[0.06] hover:text-text-primary ${className}`,
+      children: copied ? /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx6("svg", { width: "14", height: "14", viewBox: "0 0 16 16", fill: "none", children: /* @__PURE__ */ jsx6("path", { d: "M3 8.5l3 3 7-7", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }) }),
+        label ? "Copied!" : null
+      ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsxs("svg", { width: "14", height: "14", viewBox: "0 0 16 16", fill: "none", children: [
+          /* @__PURE__ */ jsx6("rect", { x: "5", y: "5", width: "8", height: "8", rx: "1.5", stroke: "currentColor", strokeWidth: "1.5" }),
+          /* @__PURE__ */ jsx6("path", { d: "M3 11V3.5A.5.5 0 013.5 3H11", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round" })
+        ] }),
+        label ?? null
+      ] })
+    }
+  );
+}
+
+// src/components/code-block/code-block.tsx
+import { jsx as jsx7, jsxs as jsxs2 } from "react/jsx-runtime";
+function CodeBlock({ code, language = "bash", showCopy = true, className = "" }) {
+  const highlightedHtml = useMemo(() => {
+    if (code.length >= 5e4 || !Prism.languages[language]) return null;
+    return Prism.highlight(code, Prism.languages[language], language);
+  }, [code, language]);
+  return /* @__PURE__ */ jsxs2("div", { className: `group relative bg-code-bg ${className}`, children: [
+    showCopy && /* @__PURE__ */ jsx7("div", { className: "absolute right-2 top-2 opacity-0 transition-opacity group-hover:opacity-100", children: /* @__PURE__ */ jsx7(CopyButton, { text: code }) }),
+    /* @__PURE__ */ jsx7("pre", { className: `language-${language} !bg-code-bg !m-0`, children: highlightedHtml != null ? /* @__PURE__ */ jsx7("code", { className: `language-${language}`, dangerouslySetInnerHTML: { __html: highlightedHtml } }) : /* @__PURE__ */ jsx7("code", { className: `language-${language}`, children: code }) })
+  ] });
+}
+
+// src/components/dialog/dialog.tsx
+import { useEffect, forwardRef as forwardRef2 } from "react";
+import { jsx as jsx8, jsxs as jsxs3 } from "react/jsx-runtime";
+function Dialog({ open, onOpenChange, children }) {
+  useEffect(() => {
+    if (open) {
+      document.body.style.overflow = "hidden";
+    } else {
+      document.body.style.overflow = "unset";
+    }
+    return () => {
+      document.body.style.overflow = "unset";
+    };
+  }, [open]);
+  useEffect(() => {
+    const handleEscape = (e) => {
+      if (e.key === "Escape") onOpenChange(false);
+    };
+    if (open) {
+      document.addEventListener("keydown", handleEscape);
+    }
+    return () => {
+      document.removeEventListener("keydown", handleEscape);
+    };
+  }, [open, onOpenChange]);
+  if (!open) return null;
+  return /* @__PURE__ */ jsxs3("div", { className: "fixed inset-0 z-50 flex items-center justify-center", children: [
+    /* @__PURE__ */ jsx8("div", { className: "fixed inset-0 bg-black/60", onClick: () => onOpenChange(false) }),
+    /* @__PURE__ */ jsx8("div", { className: "relative z-50", children })
+  ] });
+}
+var DialogContent = forwardRef2(
+  ({ className = "", children }, ref) => /* @__PURE__ */ jsx8(
+    "div",
+    {
+      ref,
+      className: `relative w-full max-w-lg mx-4 bg-white/[0.04] backdrop-blur-2xl border border-white/[0.10] rounded-[var(--radius-lg)] shadow-xl ${className}`,
+      onClick: (e) => e.stopPropagation(),
+      children
+    }
+  )
+);
+DialogContent.displayName = "DialogContent";
+function DialogHeader({ children, className = "" }) {
+  return /* @__PURE__ */ jsx8("div", { className: `flex flex-col gap-1.5 p-6 border-b border-white/[0.06] ${className}`, children });
+}
+var DialogTitle = forwardRef2(
+  ({ children, className = "" }, ref) => /* @__PURE__ */ jsx8("h2", { ref, className: `text-base font-semibold text-text-primary ${className}`, children })
+);
+DialogTitle.displayName = "DialogTitle";
+var DialogDescription = forwardRef2(
+  ({ children, className = "" }, ref) => /* @__PURE__ */ jsx8("p", { ref, className: `text-sm text-text-muted ${className}`, children })
+);
+DialogDescription.displayName = "DialogDescription";
+var DialogClose = forwardRef2(
+  ({ className = "", ...props }, ref) => /* @__PURE__ */ jsx8(
+    "button",
+    {
+      ref,
+      className: `absolute right-4 top-4 h-6 w-6 flex items-center justify-center text-text-muted hover:text-text-primary transition-colors ${className}`,
+      "aria-label": "Close",
+      ...props,
+      children: /* @__PURE__ */ jsx8("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", children: /* @__PURE__ */ jsx8("path", { d: "M4 4l8 8M12 4l-8 8", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round" }) })
+    }
+  )
+);
+DialogClose.displayName = "DialogClose";
+function DialogFooter({ children, className = "" }) {
+  return /* @__PURE__ */ jsx8("div", { className: `flex justify-end gap-3 p-6 border-t border-white/[0.06] ${className}`, children });
+}
+
+// src/components/empty-state/empty-state.tsx
+import { jsx as jsx9, jsxs as jsxs4 } from "react/jsx-runtime";
+function EmptyState({ icon, title, description, action }) {
+  return /* @__PURE__ */ jsxs4("div", { className: "flex flex-col items-center justify-center py-12 text-center", children: [
+    icon && /* @__PURE__ */ jsx9("div", { className: "mb-4 text-text-muted", children: icon }),
+    /* @__PURE__ */ jsx9("h3", { className: "text-sm font-medium text-text-primary", children: title }),
+    description && /* @__PURE__ */ jsx9("p", { className: "mt-1 text-sm text-text-muted", children: description }),
+    action && /* @__PURE__ */ jsx9("div", { className: "mt-4", children: action })
+  ] });
+}
+
+// src/components/input/input.tsx
+import { forwardRef as forwardRef3 } from "react";
+import { jsx as jsx10, jsxs as jsxs5 } from "react/jsx-runtime";
+var Input = forwardRef3(
+  ({ label, error, className = "", id, ...props }, ref) => {
+    const inputId = id || label?.toLowerCase().replace(/\s+/g, "-");
+    return /* @__PURE__ */ jsxs5("div", { className: "flex flex-col gap-1.5", children: [
+      label && /* @__PURE__ */ jsx10("label", { htmlFor: inputId, className: "text-sm font-medium text-text-secondary", children: label }),
+      /* @__PURE__ */ jsx10(
+        "input",
+        {
+          ref,
+          id: inputId,
+          className: `h-9 rounded-lg border border-white/[0.08] bg-white/[0.04] px-3 text-sm text-text-primary
+            placeholder:text-text-muted
+            focus:border-primary focus:outline-none focus:ring-2 focus:ring-primary
+            disabled:cursor-not-allowed disabled:opacity-50
+            ${error ? "border-status-error" : ""} ${className}`,
+          ...props
+        }
+      ),
+      error && /* @__PURE__ */ jsx10("p", { className: "text-xs text-status-error", children: error })
+    ] });
+  }
+);
+Input.displayName = "Input";
+
+// src/components/kbd/kbd.tsx
+import { jsx as jsx11 } from "react/jsx-runtime";
+function Kbd({ children, className = "" }) {
+  return /* @__PURE__ */ jsx11(
+    "kbd",
+    {
+      className: `inline-flex h-5 min-w-5 items-center justify-center rounded border border-white/[0.08]
+        bg-white/[0.06] px-1.5 font-mono text-[10px] font-medium text-text-muted ${className}`,
+      children
+    }
+  );
+}
+
+// src/components/loading/loading.tsx
+import { jsx as jsx12, jsxs as jsxs6 } from "react/jsx-runtime";
+function Loading({ text = "Loading", className = "" }) {
+  return /* @__PURE__ */ jsxs6("div", { className: `flex items-center gap-1 text-text-muted text-sm font-mono ${className}`, children: [
+    /* @__PURE__ */ jsx12("span", { children: text }),
+    /* @__PURE__ */ jsxs6("span", { className: "flex gap-0.5", children: [
+      /* @__PURE__ */ jsx12("span", { className: "animate-pulse", style: { animationDelay: "0ms" }, children: "." }),
+      /* @__PURE__ */ jsx12("span", { className: "animate-pulse", style: { animationDelay: "200ms" }, children: "." }),
+      /* @__PURE__ */ jsx12("span", { className: "animate-pulse", style: { animationDelay: "400ms" }, children: "." })
+    ] })
+  ] });
+}
+
+// src/components/modal/modal.tsx
+import { useEffect as useEffect2, useCallback as useCallback2 } from "react";
+import { jsx as jsx13, jsxs as jsxs7 } from "react/jsx-runtime";
+function Modal({ open, onClose, title, children, className = "" }) {
+  const handleKeyDown = useCallback2(
+    (e) => {
+      if (e.key === "Escape") onClose();
+    },
+    [onClose]
+  );
+  useEffect2(() => {
+    if (open) {
+      document.addEventListener("keydown", handleKeyDown);
+      document.body.style.overflow = "hidden";
+    }
+    return () => {
+      document.removeEventListener("keydown", handleKeyDown);
+      document.body.style.overflow = "";
+    };
+  }, [open, handleKeyDown]);
+  if (!open) return null;
+  return /* @__PURE__ */ jsxs7("div", { className: "fixed inset-0 z-50 flex items-center justify-center", children: [
+    /* @__PURE__ */ jsx13("div", { className: "absolute inset-0 bg-black/60", onClick: onClose }),
+    /* @__PURE__ */ jsxs7(
+      "div",
+      {
+        className: `relative w-full max-w-md rounded-[var(--radius-lg)] border border-white/[0.10] bg-white/[0.04] backdrop-blur-2xl p-6 shadow-xl ${className}`,
+        children: [
+          /* @__PURE__ */ jsxs7("div", { className: "mb-4 flex items-center justify-between", children: [
+            /* @__PURE__ */ jsx13("h2", { className: "text-base font-semibold text-text-primary", children: title }),
+            /* @__PURE__ */ jsx13(
+              "button",
+              {
+                onClick: onClose,
+                className: "p-1 text-text-muted transition-colors rounded-sm hover:bg-white/[0.06]",
+                "aria-label": "Close",
+                children: /* @__PURE__ */ jsx13("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", children: /* @__PURE__ */ jsx13("path", { d: "M4 4l8 8M12 4l-8 8", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round" }) })
+              }
+            )
+          ] }),
+          children
+        ]
+      }
+    )
+  ] });
+}
+
+// src/components/nav-tabs/nav-tabs.tsx
+import { jsx as jsx14 } from "react/jsx-runtime";
+var variantStyles3 = {
+  underline: {
+    container: "flex border-b border-white/[0.06] bg-white/[0.04]",
+    item: "px-5 py-2.5 font-mono text-xs uppercase tracking-wider transition-colors border-b-2",
+    active: "border-primary font-bold text-text-primary",
+    inactive: "border-transparent text-text-muted hover:text-text-primary"
+  },
+  pill: {
+    container: "flex items-center gap-1",
+    item: "px-3 py-2 text-sm font-medium transition-colors rounded-lg",
+    active: "bg-white/[0.06] text-text-primary",
+    inactive: "text-text-muted hover:bg-white/[0.04] hover:text-text-primary"
+  }
+};
+function NavTabs({ items, variant = "underline", className = "", renderLink }) {
+  const styles = variantStyles3[variant];
+  return /* @__PURE__ */ jsx14("nav", { className: `${styles.container} ${className}`, children: items.map((item) => {
+    const itemClassName = `${styles.item} ${item.isActive ? styles.active : styles.inactive}`;
+    if (renderLink) {
+      return /* @__PURE__ */ jsx14("span", { children: renderLink({ href: item.href, className: itemClassName, children: item.label }) }, item.href);
+    }
+    return /* @__PURE__ */ jsx14("a", { href: item.href, className: itemClassName, children: item.label }, item.href);
+  }) });
+}
+
+// src/components/section-header/section-header.tsx
+import { jsx as jsx15, jsxs as jsxs8 } from "react/jsx-runtime";
+function SectionHeader({ title, badge, className = "" }) {
+  return /* @__PURE__ */ jsxs8("div", { className: `flex items-center justify-between bg-white/[0.06] px-3 py-2.5 rounded-t-xl ${className}`, children: [
+    /* @__PURE__ */ jsx15("span", { className: "text-xs font-semibold text-text-secondary", children: title }),
+    badge
+  ] });
+}
+
+// src/components/select/select.tsx
+import { forwardRef as forwardRef4 } from "react";
+import { jsx as jsx16, jsxs as jsxs9 } from "react/jsx-runtime";
+var Select = forwardRef4(
+  ({ label, options, className = "", id, ...props }, ref) => {
+    const selectId = id || label?.toLowerCase().replace(/\s+/g, "-");
+    return /* @__PURE__ */ jsxs9("div", { className: "flex flex-col gap-1.5", children: [
+      label && /* @__PURE__ */ jsx16("label", { htmlFor: selectId, className: "text-sm font-medium text-text-secondary", children: label }),
+      /* @__PURE__ */ jsx16(
+        "select",
+        {
+          ref,
+          id: selectId,
+          className: `h-9 rounded-lg border border-white/[0.08] bg-white/[0.04] px-3 text-sm text-text-primary
+            focus:border-primary focus:outline-none focus:ring-2 focus:ring-primary
+            disabled:cursor-not-allowed disabled:opacity-50
+            ${className}`,
+          ...props,
+          children: options.map((opt) => /* @__PURE__ */ jsx16("option", { value: opt.value, children: opt.label }, opt.value))
+        }
+      )
+    ] });
+  }
+);
+Select.displayName = "Select";
+
+// src/components/separator/separator.tsx
+import { jsx as jsx17 } from "react/jsx-runtime";
+function Separator({ className = "" }) {
+  return /* @__PURE__ */ jsx17("div", { className: `mx-1 h-5 w-px shrink-0 bg-white/[0.12] ${className}` });
+}
+
+// src/components/skeleton/skeleton.tsx
+import { jsx as jsx18 } from "react/jsx-runtime";
+function Skeleton({ className = "" }) {
+  return /* @__PURE__ */ jsx18(
+    "div",
+    {
+      className: `rounded-lg bg-white/[0.06] animate-pulse ${className}`
+    }
+  );
+}
+
+// src/components/sparkline/sparkline.tsx
+import { jsx as jsx19 } from "react/jsx-runtime";
+function Sparkline({ trend, className = "" }) {
+  const max = Math.max(...trend);
+  return /* @__PURE__ */ jsx19("div", { className: `flex items-end gap-px h-4 ${className}`, children: trend.map((v, i) => {
+    const h = Math.max(2, Math.round(v / max * 14));
+    const col = v >= 10 ? "bg-status-error" : v >= 7 ? "bg-status-warning" : "bg-text-muted";
+    return /* @__PURE__ */ jsx19("div", { className: `w-[3px] rounded-full ${col}`, style: { height: `${h}px` } }, i);
+  }) });
+}
+
+// src/components/spinner/spinner.tsx
+import { jsx as jsx20, jsxs as jsxs10 } from "react/jsx-runtime";
+var sizeMap = { sm: "h-4 w-4", md: "h-5 w-5", lg: "h-6 w-6" };
+function Spinner({ size = "md", className = "" }) {
+  return /* @__PURE__ */ jsxs10(
+    "svg",
+    {
+      className: `animate-spin text-text-muted ${sizeMap[size]} ${className}`,
+      viewBox: "0 0 24 24",
+      fill: "none",
+      role: "status",
+      "aria-label": "Loading",
+      children: [
+        /* @__PURE__ */ jsx20("circle", { cx: "12", cy: "12", r: "10", stroke: "currentColor", strokeWidth: "2.5", opacity: "0.2" }),
+        /* @__PURE__ */ jsx20(
+          "path",
+          {
+            d: "M12 2a10 10 0 019.95 9",
+            stroke: "currentColor",
+            strokeWidth: "2.5",
+            strokeLinecap: "round"
+          }
+        )
+      ]
+    }
+  );
+}
+
+// src/components/status-bar/status-bar.tsx
+import { jsx as jsx21, jsxs as jsxs11 } from "react/jsx-runtime";
+var dotColors = {
+  success: "bg-status-success",
+  warning: "bg-status-warning",
+  danger: "bg-status-error",
+  idle: "bg-text-muted"
+};
+function StatusBar({ items, trailing, className = "" }) {
+  return /* @__PURE__ */ jsxs11("div", { className: `flex h-7 shrink-0 items-center gap-4 border-t border-white/[0.06] bg-white/[0.04] px-4 ${className}`, children: [
+    items.map((item, i) => /* @__PURE__ */ jsxs11("div", { className: "flex items-center gap-1.5 text-xs text-text-muted", children: [
+      item.dot && /* @__PURE__ */ jsx21("span", { className: `inline-block h-1.5 w-1.5 rounded-full ${dotColors[item.dot]}` }),
+      item.label
+    ] }, i)),
+    trailing && /* @__PURE__ */ jsx21("div", { className: "ml-auto text-xs text-text-muted", children: trailing })
+  ] });
+}
+
+// src/components/table/table.tsx
+import { jsx as jsx22 } from "react/jsx-runtime";
+function Table({ children, className = "" }) {
+  return /* @__PURE__ */ jsx22("div", { className: "w-full overflow-x-auto rounded-xl", children: /* @__PURE__ */ jsx22("table", { className: `w-full text-sm ${className}`, children }) });
+}
+function TableHead({ children }) {
+  return /* @__PURE__ */ jsx22("thead", { className: "border-b border-white/[0.06]", children: /* @__PURE__ */ jsx22("tr", { children }) });
+}
+function TableHeader({ children, className = "", onClick }) {
+  return /* @__PURE__ */ jsx22(
+    "th",
+    {
+      className: `px-4 py-3 text-left text-xs font-medium text-text-muted ${onClick ? "cursor-pointer select-none hover:text-text-primary" : ""} ${className}`,
+      onClick,
+      children
+    }
+  );
+}
+function TableBody({ children }) {
+  return /* @__PURE__ */ jsx22("tbody", { className: "divide-y divide-white/[0.06]", children });
+}
+function TableRow({ children, className = "", onClick }) {
+  return /* @__PURE__ */ jsx22("tr", { className: `hover:bg-white/[0.04] transition-colors ${onClick ? "cursor-pointer" : ""} ${className}`, onClick, children });
+}
+function TableCell({ children, className = "" }) {
+  return /* @__PURE__ */ jsx22("td", { className: `px-4 py-3.5 text-text-secondary ${className}`, children });
+}
+
+// src/components/tabs/tabs.tsx
+import { jsx as jsx23 } from "react/jsx-runtime";
+function Tabs({ tabs, value, onChange, className = "" }) {
+  return /* @__PURE__ */ jsx23("div", { className: `flex gap-1 rounded-[var(--radius-lg)] border border-white/[0.08] bg-white/[0.04] p-1 ${className}`, children: tabs.map((tab) => /* @__PURE__ */ jsx23(
+    "button",
+    {
+      onClick: () => onChange(tab.value),
+      className: `px-3 py-1.5 text-sm font-medium transition-all rounded-md
+            ${value === tab.value ? "bg-white/[0.08] text-text-primary" : "text-text-muted hover:bg-white/[0.04] hover:text-text-primary"}`,
+      children: tab.label
+    },
+    tab.value
+  )) });
+}
+
+// src/components/toggle/toggle.tsx
+import { jsx as jsx24, jsxs as jsxs12 } from "react/jsx-runtime";
+function Toggle({ options, value, onChange, className = "" }) {
+  const [left, right] = options;
+  return /* @__PURE__ */ jsxs12("div", { className: `inline-flex items-center gap-2 text-sm ${className}`, children: [
+    /* @__PURE__ */ jsx24(
+      "span",
+      {
+        className: `cursor-pointer transition-colors ${value === left ? "text-text-primary" : "text-text-muted"}`,
+        onClick: () => onChange(left),
+        children: left
+      }
+    ),
+    /* @__PURE__ */ jsx24(
+      "button",
+      {
+        onClick: () => onChange(value === left ? right : left),
+        className: `relative w-10 h-5 rounded-none transition-colors border-2 border-white/[0.08] ${value === right ? "bg-primary" : "bg-white/[0.04]"}`,
+        children: /* @__PURE__ */ jsx24(
+          "span",
+          {
+            className: `absolute top-0.5 w-4 h-4 rounded-none transition-transform bg-text-primary ${value === right ? "translate-x-5" : "translate-x-0.5"}`
+          }
+        )
+      }
+    ),
+    /* @__PURE__ */ jsx24(
+      "span",
+      {
+        className: `cursor-pointer transition-colors ${value === right ? "text-text-primary" : "text-text-muted"}`,
+        onClick: () => onChange(right),
+        children: right
+      }
+    )
+  ] });
+}
+export {
+  Badge,
+  Button,
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+  Chip,
+  ChipGroup,
+  CodeBlock,
+  CopyButton,
+  Dialog,
+  DialogClose,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  EmptyState,
+  Input,
+  Kbd,
+  Loading,
+  Modal,
+  NavTabs,
+  SectionHeader,
+  Select,
+  Separator,
+  Skeleton,
+  Sparkline,
+  Spinner,
+  StatusBar,
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+  Tabs,
+  Toggle
+};
+//# sourceMappingURL=index.mjs.map