@raptortrade/ui 0.1.0

package/dist/index.cjs

@@ -0,0 +1,798 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.ts
+var index_exports = {};
+__export(index_exports, {
+  Accordion: () => Accordion,
+  AccordionContent: () => AccordionContent,
+  AccordionItem: () => AccordionItem,
+  AccordionTrigger: () => AccordionTrigger,
+  Badge: () => Badge,
+  Button: () => Button,
+  Card: () => Card,
+  CardContent: () => CardContent,
+  CardDescription: () => CardDescription,
+  CardFooter: () => CardFooter,
+  CardHeader: () => CardHeader,
+  CardTitle: () => CardTitle,
+  Chip: () => Chip,
+  ChipGroup: () => ChipGroup,
+  CodeBlock: () => CodeBlock,
+  CopyButton: () => CopyButton,
+  Dialog: () => Dialog,
+  DialogClose: () => DialogClose,
+  DialogContent: () => DialogContent,
+  DialogDescription: () => DialogDescription,
+  DialogFooter: () => DialogFooter,
+  DialogHeader: () => DialogHeader,
+  DialogTitle: () => DialogTitle,
+  EmptyState: () => EmptyState,
+  Input: () => Input,
+  Kbd: () => Kbd,
+  Loading: () => Loading,
+  Modal: () => Modal,
+  NavTabs: () => NavTabs,
+  SectionHeader: () => SectionHeader,
+  Select: () => Select,
+  Separator: () => Separator,
+  SidePanel: () => SidePanel,
+  Skeleton: () => Skeleton,
+  SkeletonTable: () => SkeletonTable,
+  Sparkline: () => Sparkline,
+  Spinner: () => Spinner,
+  StatusBar: () => StatusBar,
+  Table: () => Table,
+  TableBody: () => TableBody,
+  TableCell: () => TableCell,
+  TableHead: () => TableHead,
+  TableHeader: () => TableHeader,
+  TableRow: () => TableRow,
+  Tabs: () => Tabs,
+  Toggle: () => Toggle
+});
+module.exports = __toCommonJS(index_exports);
+
+// src/components/accordion/accordion.tsx
+var React = __toESM(require("react"), 1);
+var AccordionPrimitive = __toESM(require("@radix-ui/react-accordion"), 1);
+var import_jsx_runtime = require("react/jsx-runtime");
+var Accordion = AccordionPrimitive.Root;
+var AccordionItem = React.forwardRef(({ className = "", ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+  AccordionPrimitive.Item,
+  {
+    ref,
+    className: `border-b border-border-1 ${className}`,
+    ...props
+  }
+));
+AccordionItem.displayName = "AccordionItem";
+var AccordionTrigger = React.forwardRef(({ className = "", children, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(AccordionPrimitive.Header, { className: "flex", children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+  AccordionPrimitive.Trigger,
+  {
+    ref,
+    className: `flex flex-1 items-center justify-between py-4 font-medium transition-all hover:underline [&[data-state=open]>svg]:rotate-180 ${className}`,
+    ...props,
+    children: [
+      children,
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        "svg",
+        {
+          className: "h-4 w-4 shrink-0 transition-transform duration-200",
+          viewBox: "0 0 24 24",
+          fill: "none",
+          stroke: "currentColor",
+          strokeWidth: "2",
+          strokeLinecap: "round",
+          strokeLinejoin: "round",
+          children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "m6 9 6 6 6-6" })
+        }
+      )
+    ]
+  }
+) }));
+AccordionTrigger.displayName = "AccordionTrigger";
+var AccordionContent = React.forwardRef(({ className = "", children, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+  AccordionPrimitive.Content,
+  {
+    ref,
+    className: "overflow-hidden text-sm transition-all data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down",
+    ...props,
+    children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: `pb-4 pt-0 ${className}`, children })
+  }
+));
+AccordionContent.displayName = "AccordionContent";
+
+// src/components/badge/badge.tsx
+var import_jsx_runtime2 = require("react/jsx-runtime");
+var variantStyles = {
+  active: "bg-primary-500 text-white",
+  inactive: "bg-bg-2 text-text-2",
+  "coming-soon": "bg-bg-2 text-text-2",
+  default: "bg-bg-2 text-text-1",
+  signal: "bg-primary-500 text-white",
+  success: "bg-success/15 text-success border-success/30",
+  danger: "bg-danger/15 text-danger border-danger/30",
+  warning: "bg-warning/15 text-warning border-warning/30",
+  error: "bg-danger/15 text-danger border-danger/30",
+  outline: "bg-bg-1 text-text-1 border-border-1"
+};
+function Badge({ variant = "default", children, className = "", onClick }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+    "span",
+    {
+      className: `inline-flex items-center rounded-full border border-border-1 px-2.5 py-0.5 text-[11px] font-medium ${variantStyles[variant]} ${className}`,
+      onClick,
+      children
+    }
+  );
+}
+
+// src/components/button/button.tsx
+var import_react = require("react");
+var import_jsx_runtime3 = require("react/jsx-runtime");
+var variantStyles2 = {
+  primary: "bg-accent-500 text-[var(--accent-text,#111111)] font-semibold border-accent-500 hover:brightness-110 hover:shadow-[0_0_16px_rgba(255,255,255,0.1)]",
+  secondary: "bg-bg-2 text-text-1 border-border-1 font-medium hover:bg-bg-3 hover:border-border-1",
+  ghost: "text-text-2 border-transparent hover:bg-bg-2 hover:text-text-1",
+  danger: "bg-danger/10 text-danger border-danger/30 hover:bg-danger/20",
+  destructive: "bg-danger text-white font-semibold border-danger hover:bg-danger/90",
+  link: "text-primary-500 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 = (0, import_react.forwardRef)(
+  ({ variant = "primary", size = "md", className = "", children, disabled, ...props }, ref) => {
+    return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+      "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-ring
+          disabled:pointer-events-none disabled:opacity-50
+          ${variantStyles2[variant]} ${sizeStyles[size]} ${className}`,
+        disabled,
+        ...props,
+        children
+      }
+    );
+  }
+);
+Button.displayName = "Button";
+
+// src/components/card/card.tsx
+var import_jsx_runtime4 = require("react/jsx-runtime");
+function Card({ children, className = "" }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: `card-modern p-6 ${className}`, children });
+}
+function CardHeader({ children, className = "" }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: `mb-4 ${className}`, children });
+}
+function CardTitle({ children, className = "" }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("h3", { className: `text-sm font-medium text-text-1 ${className}`, children });
+}
+function CardDescription({ children, className = "" }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("p", { className: `mt-1 text-xs text-text-3 ${className}`, children });
+}
+function CardContent({ children, className = "" }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: `pt-4 ${className}`, children });
+}
+function CardFooter({ children, className = "" }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: `pt-4 mt-4 border-t border-border-1 ${className}`, children });
+}
+
+// src/components/chip/chip.tsx
+var import_jsx_runtime5 = require("react/jsx-runtime");
+function Chip({ active, onClick, children, className = "" }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+    "button",
+    {
+      onClick,
+      className: `text-xs font-medium px-3 py-1 rounded-lg border cursor-pointer whitespace-nowrap transition-all ${active ? "text-primary-500 border-primary-500/30 bg-primary-500/10" : "text-text-2 bg-bg-2 border-border-1 hover:text-text-1"} ${className}`,
+      children
+    }
+  );
+}
+
+// src/components/chip-group/chip-group.tsx
+var import_jsx_runtime6 = require("react/jsx-runtime");
+function ChipGroup(props) {
+  const { options, className = "" } = props;
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("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__ */ (0, import_jsx_runtime6.jsx)(Chip, { active: isActive, onClick: handleClick, children: option.label }, option.value);
+  }) });
+}
+
+// src/components/code-block/code-block.tsx
+var import_react3 = require("react");
+var import_prismjs = __toESM(require("prismjs"), 1);
+var import_prism_json = require("prismjs/components/prism-json");
+var import_prism_bash = require("prismjs/components/prism-bash");
+var import_prism_python = require("prismjs/components/prism-python");
+var import_prism_javascript = require("prismjs/components/prism-javascript");
+var import_prism_typescript = require("prismjs/components/prism-typescript");
+var import_prism_rust = require("prismjs/components/prism-rust");
+
+// src/components/copy-button/copy-button.tsx
+var import_react2 = require("react");
+var import_jsx_runtime7 = require("react/jsx-runtime");
+function CopyButton({ text, className = "", label, onCopy }) {
+  const [copied, setCopied] = (0, import_react2.useState)(false);
+  const handleCopy = (0, import_react2.useCallback)(async () => {
+    await navigator.clipboard.writeText(text);
+    setCopied(true);
+    setTimeout(() => setCopied(false), 2e3);
+    onCopy?.();
+  }, [text, onCopy]);
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+    "button",
+    {
+      onClick: handleCopy,
+      className: `inline-flex items-center gap-1.5 px-2 py-1 text-xs text-text-3
+        rounded-sm border border-border-1 transition-colors duration-75 hover:bg-bg-2 hover:text-text-1 ${className}`,
+      children: copied ? /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_jsx_runtime7.Fragment, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("svg", { width: "14", height: "14", viewBox: "0 0 16 16", fill: "none", children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("path", { d: "M3 8.5l3 3 7-7", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }) }),
+        label ? "Copied!" : null
+      ] }) : /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_jsx_runtime7.Fragment, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("svg", { width: "14", height: "14", viewBox: "0 0 16 16", fill: "none", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("rect", { x: "5", y: "5", width: "8", height: "8", rx: "1.5", stroke: "currentColor", strokeWidth: "1.5" }),
+          /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("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
+var import_jsx_runtime8 = require("react/jsx-runtime");
+function CodeBlock({ code, language = "bash", showCopy = true, className = "" }) {
+  const highlightedHtml = (0, import_react3.useMemo)(() => {
+    if (code.length >= 5e4 || !import_prismjs.default.languages[language]) return null;
+    return import_prismjs.default.highlight(code, import_prismjs.default.languages[language], language);
+  }, [code, language]);
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: `group relative bg-code-bg ${className}`, children: [
+    showCopy && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "absolute right-2 top-2 opacity-0 transition-opacity group-hover:opacity-100", children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(CopyButton, { text: code }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("pre", { className: `language-${language} !bg-code-bg !m-0`, children: highlightedHtml != null ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("code", { className: `language-${language}`, dangerouslySetInnerHTML: { __html: highlightedHtml } }) : /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("code", { className: `language-${language}`, children: code }) })
+  ] });
+}
+
+// src/components/dialog/dialog.tsx
+var import_react4 = require("react");
+var import_jsx_runtime9 = require("react/jsx-runtime");
+function Dialog({ open, onOpenChange, children }) {
+  (0, import_react4.useEffect)(() => {
+    if (open) {
+      document.body.style.overflow = "hidden";
+    } else {
+      document.body.style.overflow = "unset";
+    }
+    return () => {
+      document.body.style.overflow = "unset";
+    };
+  }, [open]);
+  (0, import_react4.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__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "fixed inset-0 z-50 flex items-center justify-center", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "fixed inset-0 bg-black/60", onClick: () => onOpenChange(false) }),
+    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "relative z-50", children })
+  ] });
+}
+var DialogContent = (0, import_react4.forwardRef)(
+  ({ className = "", children }, ref) => /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+    "div",
+    {
+      ref,
+      className: `relative w-full max-w-lg mx-4 bg-bg-1 border border-border-1 rounded-lg shadow-xl ${className}`,
+      onClick: (e) => e.stopPropagation(),
+      children
+    }
+  )
+);
+DialogContent.displayName = "DialogContent";
+function DialogHeader({ children, className = "" }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: `flex flex-col gap-1.5 p-6 border-b border-border-1 ${className}`, children });
+}
+var DialogTitle = (0, import_react4.forwardRef)(
+  ({ children, className = "" }, ref) => /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("h2", { ref, className: `text-base font-semibold text-text-1 ${className}`, children })
+);
+DialogTitle.displayName = "DialogTitle";
+var DialogDescription = (0, import_react4.forwardRef)(
+  ({ children, className = "" }, ref) => /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("p", { ref, className: `text-sm text-text-3 ${className}`, children })
+);
+DialogDescription.displayName = "DialogDescription";
+var DialogClose = (0, import_react4.forwardRef)(
+  ({ className = "", ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+    "button",
+    {
+      ref,
+      className: `absolute right-4 top-4 h-6 w-6 flex items-center justify-center text-text-3 hover:text-text-1 transition-colors ${className}`,
+      "aria-label": "Close",
+      ...props,
+      children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("path", { d: "M4 4l8 8M12 4l-8 8", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round" }) })
+    }
+  )
+);
+DialogClose.displayName = "DialogClose";
+function DialogFooter({ children, className = "" }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: `flex justify-end gap-3 p-6 border-t border-border-1 ${className}`, children });
+}
+
+// src/components/empty-state/empty-state.tsx
+var import_jsx_runtime10 = require("react/jsx-runtime");
+function EmptyState({ icon, title, description, action }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "flex flex-col items-center justify-center py-12 text-center", children: [
+    icon && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "mb-4 text-text-3", children: icon }),
+    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("h3", { className: "text-sm font-medium text-text-1", children: title }),
+    description && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("p", { className: "mt-1 text-sm text-text-3", children: description }),
+    action && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "mt-4", children: action })
+  ] });
+}
+
+// src/components/input/input.tsx
+var import_react5 = require("react");
+var import_jsx_runtime11 = require("react/jsx-runtime");
+var Input = (0, import_react5.forwardRef)(
+  ({ label, error, className = "", id, ...props }, ref) => {
+    const inputId = id || label?.toLowerCase().replace(/\s+/g, "-");
+    return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: "flex flex-col gap-1.5", children: [
+      label && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("label", { htmlFor: inputId, className: "text-sm font-medium text-text-2", children: label }),
+      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+        "input",
+        {
+          ref,
+          id: inputId,
+          className: `h-9 rounded-lg border border-border-1 bg-bg-1 px-3 text-sm text-text-1
+            placeholder:text-text-4
+            focus:border-primary-500 focus:outline-none focus:ring-2 focus:ring-primary-ring
+            disabled:cursor-not-allowed disabled:opacity-50
+            ${error ? "border-danger" : ""} ${className}`,
+          ...props
+        }
+      ),
+      error && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("p", { className: "text-xs text-danger", children: error })
+    ] });
+  }
+);
+Input.displayName = "Input";
+
+// src/components/kbd/kbd.tsx
+var import_jsx_runtime12 = require("react/jsx-runtime");
+function Kbd({ children, className = "" }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+    "kbd",
+    {
+      className: `inline-flex h-5 min-w-5 items-center justify-center rounded border border-border-1
+        bg-bg-2 px-1.5 font-mono text-[10px] font-medium text-text-3 ${className}`,
+      children
+    }
+  );
+}
+
+// src/components/loading/loading.tsx
+var import_jsx_runtime13 = require("react/jsx-runtime");
+function Loading({ text = "Loading", className = "" }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: `flex items-center gap-1 text-text-3 text-sm font-mono ${className}`, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { children: text }),
+    /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("span", { className: "flex gap-0.5", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { className: "animate-pulse", style: { animationDelay: "0ms" }, children: "." }),
+      /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { className: "animate-pulse", style: { animationDelay: "200ms" }, children: "." }),
+      /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { className: "animate-pulse", style: { animationDelay: "400ms" }, children: "." })
+    ] })
+  ] });
+}
+
+// src/components/modal/modal.tsx
+var import_react6 = require("react");
+var import_jsx_runtime14 = require("react/jsx-runtime");
+function Modal({ open, onClose, title, children, className = "" }) {
+  const handleKeyDown = (0, import_react6.useCallback)(
+    (e) => {
+      if (e.key === "Escape") onClose();
+    },
+    [onClose]
+  );
+  (0, import_react6.useEffect)(() => {
+    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__ */ (0, import_jsx_runtime14.jsxs)("div", { className: "fixed inset-0 z-50 flex items-center justify-center", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { className: "absolute inset-0 bg-black/60", onClick: onClose }),
+    /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(
+      "div",
+      {
+        className: `relative w-full max-w-md rounded-xl border border-border-1 bg-bg-1 p-6 shadow-xl ${className}`,
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { className: "mb-4 flex items-center justify-between", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("h2", { className: "text-base font-semibold text-text-1", children: title }),
+            /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+              "button",
+              {
+                onClick: onClose,
+                className: "p-1 text-text-3 transition-colors rounded-sm hover:bg-bg-2",
+                "aria-label": "Close",
+                children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("path", { d: "M4 4l8 8M12 4l-8 8", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round" }) })
+              }
+            )
+          ] }),
+          children
+        ]
+      }
+    )
+  ] });
+}
+
+// src/components/nav-tabs/nav-tabs.tsx
+var import_jsx_runtime15 = require("react/jsx-runtime");
+var variantStyles3 = {
+  underline: {
+    container: "flex border-b border-border-2 bg-bg-1",
+    item: "px-5 py-2.5 font-mono text-xs uppercase tracking-wider transition-colors border-b-2",
+    active: "border-primary-500 font-bold text-text-1",
+    inactive: "border-transparent text-text-3 hover:text-text-1"
+  },
+  pill: {
+    container: "flex items-center gap-1",
+    item: "px-3 py-2 text-sm font-medium transition-colors rounded-lg",
+    active: "bg-bg-2 text-text-1",
+    inactive: "text-text-3 hover:bg-bg-2/50 hover:text-text-1"
+  }
+};
+function NavTabs({ items, variant = "underline", className = "", renderLink }) {
+  const styles = variantStyles3[variant];
+  return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("nav", { className: `${styles.container} ${className}`, children: items.map((item) => {
+    const itemClassName = `${styles.item} ${item.isActive ? styles.active : styles.inactive}`;
+    if (renderLink) {
+      return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("span", { children: renderLink({ href: item.href, className: itemClassName, children: item.label }) }, item.href);
+    }
+    return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("a", { href: item.href, className: itemClassName, children: item.label }, item.href);
+  }) });
+}
+
+// src/components/section-header/section-header.tsx
+var import_jsx_runtime16 = require("react/jsx-runtime");
+function SectionHeader({ title, badge, className = "" }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { className: `flex items-center justify-between bg-bg-2 px-3 py-2.5 rounded-t-xl ${className}`, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("span", { className: "text-xs font-semibold text-text-2", children: title }),
+    badge
+  ] });
+}
+
+// src/components/select/select.tsx
+var import_react7 = require("react");
+var import_jsx_runtime17 = require("react/jsx-runtime");
+var Select = (0, import_react7.forwardRef)(
+  ({ label, options, className = "", id, ...props }, ref) => {
+    const selectId = id || label?.toLowerCase().replace(/\s+/g, "-");
+    return /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { className: "flex flex-col gap-1.5", children: [
+      label && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("label", { htmlFor: selectId, className: "text-sm font-medium text-text-2", children: label }),
+      /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+        "select",
+        {
+          ref,
+          id: selectId,
+          className: `h-9 rounded-lg border border-border-1 bg-bg-1 px-3 text-sm text-text-1
+            focus:border-primary-500 focus:outline-none focus:ring-2 focus:ring-primary-ring
+            disabled:cursor-not-allowed disabled:opacity-50
+            ${className}`,
+          ...props,
+          children: options.map((opt) => /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("option", { value: opt.value, children: opt.label }, opt.value))
+        }
+      )
+    ] });
+  }
+);
+Select.displayName = "Select";
+
+// src/components/side-panel/side-panel.tsx
+var import_react8 = require("react");
+var import_jsx_runtime18 = require("react/jsx-runtime");
+function SidePanel({ open, onClose, title, subtitle, children, className = "" }) {
+  const handleKeyDown = (0, import_react8.useCallback)(
+    (e) => {
+      if (e.key === "Escape") onClose();
+    },
+    [onClose]
+  );
+  (0, import_react8.useEffect)(() => {
+    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__ */ (0, import_jsx_runtime18.jsxs)("div", { className: "fixed inset-0 z-50 flex items-center justify-center", onClick: onClose, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { className: "absolute inset-0 bg-black/50" }),
+    /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(
+      "div",
+      {
+        className: `relative bg-bg-1 rounded-lg shadow-xl flex flex-col w-[900px] h-[600px] ${className}`,
+        onClick: (e) => e.stopPropagation(),
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { className: "flex items-center justify-between px-4 py-3 bg-bg-2 rounded-t-lg flex-shrink-0", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { className: "min-w-0", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("h3", { className: "font-semibold text-base truncate", children: title }),
+              subtitle && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("p", { className: "text-xs text-text-3", children: subtitle })
+            ] }),
+            /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(Button, { variant: "ghost", size: "sm", onClick: onClose, className: "flex-shrink-0", children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("path", { d: "M4 4l8 8M12 4l-8 8", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round" }) }) })
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { className: "flex-1 overflow-hidden", children })
+        ]
+      }
+    )
+  ] });
+}
+
+// src/components/separator/separator.tsx
+var import_jsx_runtime19 = require("react/jsx-runtime");
+function Separator({ className = "" }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("div", { className: `mx-1 h-5 w-px shrink-0 bg-border-1 ${className}` });
+}
+
+// src/components/skeleton/skeleton.tsx
+var import_jsx_runtime20 = require("react/jsx-runtime");
+function Skeleton({ className = "" }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+    "div",
+    {
+      className: `rounded-lg bg-bg-2 animate-pulse ${className}`
+    }
+  );
+}
+
+// src/components/skeleton-table/skeleton-table.tsx
+var import_jsx_runtime21 = require("react/jsx-runtime");
+function SkeletonTable({ className = "", rows = 5, cols = 4 }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { className: `w-full ${className}`, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { className: "flex gap-4 mb-4 pb-4 border-b border-border-1", children: Array.from({ length: cols }).map((_, i) => /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(Skeleton, { className: "h-4 flex-1 rounded" }, i)) }),
+    /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { className: "space-y-3", children: Array.from({ length: rows }).map((_, i) => /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { className: "flex gap-4", children: Array.from({ length: cols }).map((_2, j) => /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(Skeleton, { className: "h-4 flex-1 rounded" }, j)) }, i)) })
+  ] });
+}
+
+// src/components/sparkline/sparkline.tsx
+var import_jsx_runtime22 = require("react/jsx-runtime");
+function Sparkline({ trend, className = "" }) {
+  const max = Math.max(...trend);
+  return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("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-danger" : v >= 7 ? "bg-warning" : "bg-text-3";
+    return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { className: `w-[3px] rounded-full ${col}`, style: { height: `${h}px` } }, i);
+  }) });
+}
+
+// src/components/spinner/spinner.tsx
+var import_jsx_runtime23 = require("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__ */ (0, import_jsx_runtime23.jsxs)(
+    "svg",
+    {
+      className: `animate-spin text-text-3 ${sizeMap[size]} ${className}`,
+      viewBox: "0 0 24 24",
+      fill: "none",
+      role: "status",
+      "aria-label": "Loading",
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("circle", { cx: "12", cy: "12", r: "10", stroke: "currentColor", strokeWidth: "2.5", opacity: "0.2" }),
+        /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+          "path",
+          {
+            d: "M12 2a10 10 0 019.95 9",
+            stroke: "currentColor",
+            strokeWidth: "2.5",
+            strokeLinecap: "round"
+          }
+        )
+      ]
+    }
+  );
+}
+
+// src/components/status-bar/status-bar.tsx
+var import_jsx_runtime24 = require("react/jsx-runtime");
+var dotColors = {
+  success: "bg-success",
+  warning: "bg-warning",
+  danger: "bg-danger",
+  idle: "bg-text-4"
+};
+function StatusBar({ items, trailing, className = "" }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { className: `flex h-7 shrink-0 items-center gap-4 border-t border-border-1 bg-bg-0 px-4 ${className}`, children: [
+    items.map((item, i) => /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { className: "flex items-center gap-1.5 text-xs text-text-3", children: [
+      item.dot && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("span", { className: `inline-block h-1.5 w-1.5 rounded-full ${dotColors[item.dot]}` }),
+      item.label
+    ] }, i)),
+    trailing && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: "ml-auto text-xs text-text-3", children: trailing })
+  ] });
+}
+
+// src/components/table/table.tsx
+var import_jsx_runtime25 = require("react/jsx-runtime");
+function Table({ children, className = "" }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { className: "w-full overflow-x-auto rounded-xl", children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("table", { className: `w-full text-sm ${className}`, children }) });
+}
+function TableHead({ children }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("thead", { className: "border-b border-border-1", children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("tr", { children }) });
+}
+function TableHeader({ children, className = "", onClick }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+    "th",
+    {
+      className: `px-4 py-3 text-left text-xs font-medium text-text-3 ${onClick ? "cursor-pointer select-none hover:text-text-1" : ""} ${className}`,
+      onClick,
+      children
+    }
+  );
+}
+function TableBody({ children }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("tbody", { className: "divide-y divide-border-2", children });
+}
+function TableRow({ children, className = "", onClick }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("tr", { className: `hover:bg-bg-2/50 transition-colors ${onClick ? "cursor-pointer" : ""} ${className}`, onClick, children });
+}
+function TableCell({ children, className = "" }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("td", { className: `px-4 py-3.5 text-text-2 ${className}`, children });
+}
+
+// src/components/tabs/tabs.tsx
+var import_jsx_runtime26 = require("react/jsx-runtime");
+function Tabs({ tabs, value, onChange, className = "" }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("div", { className: `flex gap-1 rounded-lg border border-border-1 bg-bg-1 p-1 ${className}`, children: tabs.map((tab) => /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+    "button",
+    {
+      onClick: () => onChange(tab.value),
+      className: `px-3 py-1.5 text-sm font-medium transition-all rounded-md
+            ${value === tab.value ? "bg-bg-3 text-text-1" : "text-text-3 hover:bg-bg-2 hover:text-text-1"}`,
+      children: tab.label
+    },
+    tab.value
+  )) });
+}
+
+// src/components/toggle/toggle.tsx
+var import_jsx_runtime27 = require("react/jsx-runtime");
+function Toggle({ options, value, onChange, className = "" }) {
+  const [left, right] = options;
+  return /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("div", { className: `inline-flex items-center gap-2 text-sm ${className}`, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+      "span",
+      {
+        className: `cursor-pointer transition-colors ${value === left ? "text-text-1" : "text-text-3"}`,
+        onClick: () => onChange(left),
+        children: left
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+      "button",
+      {
+        onClick: () => onChange(value === left ? right : left),
+        className: `relative w-10 h-5 rounded-none transition-colors border-2 border-border-1 ${value === right ? "bg-primary-500" : "bg-bg-1"}`,
+        children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+          "span",
+          {
+            className: `absolute top-0.5 w-4 h-4 rounded-none transition-transform bg-text-1 ${value === right ? "translate-x-5" : "translate-x-0.5"}`
+          }
+        )
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+      "span",
+      {
+        className: `cursor-pointer transition-colors ${value === right ? "text-text-1" : "text-text-3"}`,
+        onClick: () => onChange(right),
+        children: right
+      }
+    )
+  ] });
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Accordion,
+  AccordionContent,
+  AccordionItem,
+  AccordionTrigger,
+  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,
+  SidePanel,
+  Skeleton,
+  SkeletonTable,
+  Sparkline,
+  Spinner,
+  StatusBar,
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+  Tabs,
+  Toggle
+});
+//# sourceMappingURL=index.cjs.map