@raptortrade/ui 0.1.0

package/dist/index.mjs

@@ -0,0 +1,716 @@
+// src/components/accordion/accordion.tsx
+import * as React from "react";
+import * as AccordionPrimitive from "@radix-ui/react-accordion";
+import { jsx, jsxs } from "react/jsx-runtime";
+var Accordion = AccordionPrimitive.Root;
+var AccordionItem = React.forwardRef(({ className = "", ...props }, ref) => /* @__PURE__ */ jsx(
+  AccordionPrimitive.Item,
+  {
+    ref,
+    className: `border-b border-border-1 ${className}`,
+    ...props
+  }
+));
+AccordionItem.displayName = "AccordionItem";
+var AccordionTrigger = React.forwardRef(({ className = "", children, ...props }, ref) => /* @__PURE__ */ jsx(AccordionPrimitive.Header, { className: "flex", children: /* @__PURE__ */ 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__ */ 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__ */ jsx("path", { d: "m6 9 6 6 6-6" })
+        }
+      )
+    ]
+  }
+) }));
+AccordionTrigger.displayName = "AccordionTrigger";
+var AccordionContent = React.forwardRef(({ className = "", children, ...props }, ref) => /* @__PURE__ */ 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__ */ jsx("div", { className: `pb-4 pt-0 ${className}`, children })
+  }
+));
+AccordionContent.displayName = "AccordionContent";
+
+// src/components/badge/badge.tsx
+import { jsx as jsx2 } from "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__ */ jsx2(
+    "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
+import { forwardRef as forwardRef2 } from "react";
+import { jsx as jsx3 } from "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 = forwardRef2(
+  ({ variant = "primary", size = "md", className = "", children, disabled, ...props }, ref) => {
+    return /* @__PURE__ */ jsx3(
+      "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
+import { jsx as jsx4 } from "react/jsx-runtime";
+function Card({ children, className = "" }) {
+  return /* @__PURE__ */ jsx4("div", { className: `card-modern p-6 ${className}`, children });
+}
+function CardHeader({ children, className = "" }) {
+  return /* @__PURE__ */ jsx4("div", { className: `mb-4 ${className}`, children });
+}
+function CardTitle({ children, className = "" }) {
+  return /* @__PURE__ */ jsx4("h3", { className: `text-sm font-medium text-text-1 ${className}`, children });
+}
+function CardDescription({ children, className = "" }) {
+  return /* @__PURE__ */ jsx4("p", { className: `mt-1 text-xs text-text-3 ${className}`, children });
+}
+function CardContent({ children, className = "" }) {
+  return /* @__PURE__ */ jsx4("div", { className: `pt-4 ${className}`, children });
+}
+function CardFooter({ children, className = "" }) {
+  return /* @__PURE__ */ jsx4("div", { className: `pt-4 mt-4 border-t border-border-1 ${className}`, children });
+}
+
+// src/components/chip/chip.tsx
+import { jsx as jsx5 } from "react/jsx-runtime";
+function Chip({ active, onClick, children, className = "" }) {
+  return /* @__PURE__ */ jsx5(
+    "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
+import { jsx as jsx6 } from "react/jsx-runtime";
+function ChipGroup(props) {
+  const { options, className = "" } = props;
+  return /* @__PURE__ */ jsx6("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__ */ jsx6(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 jsx7, jsxs as jsxs2 } 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__ */ jsx7(
+    "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__ */ jsxs2(Fragment, { children: [
+        /* @__PURE__ */ jsx7("svg", { width: "14", height: "14", viewBox: "0 0 16 16", fill: "none", children: /* @__PURE__ */ jsx7("path", { d: "M3 8.5l3 3 7-7", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }) }),
+        label ? "Copied!" : null
+      ] }) : /* @__PURE__ */ jsxs2(Fragment, { children: [
+        /* @__PURE__ */ jsxs2("svg", { width: "14", height: "14", viewBox: "0 0 16 16", fill: "none", children: [
+          /* @__PURE__ */ jsx7("rect", { x: "5", y: "5", width: "8", height: "8", rx: "1.5", stroke: "currentColor", strokeWidth: "1.5" }),
+          /* @__PURE__ */ jsx7("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 jsx8, jsxs as jsxs3 } 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__ */ jsxs3("div", { className: `group relative bg-code-bg ${className}`, children: [
+    showCopy && /* @__PURE__ */ jsx8("div", { className: "absolute right-2 top-2 opacity-0 transition-opacity group-hover:opacity-100", children: /* @__PURE__ */ jsx8(CopyButton, { text: code }) }),
+    /* @__PURE__ */ jsx8("pre", { className: `language-${language} !bg-code-bg !m-0`, children: highlightedHtml != null ? /* @__PURE__ */ jsx8("code", { className: `language-${language}`, dangerouslySetInnerHTML: { __html: highlightedHtml } }) : /* @__PURE__ */ jsx8("code", { className: `language-${language}`, children: code }) })
+  ] });
+}
+
+// src/components/dialog/dialog.tsx
+import { useEffect, forwardRef as forwardRef3 } from "react";
+import { jsx as jsx9, jsxs as jsxs4 } 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__ */ jsxs4("div", { className: "fixed inset-0 z-50 flex items-center justify-center", children: [
+    /* @__PURE__ */ jsx9("div", { className: "fixed inset-0 bg-black/60", onClick: () => onOpenChange(false) }),
+    /* @__PURE__ */ jsx9("div", { className: "relative z-50", children })
+  ] });
+}
+var DialogContent = forwardRef3(
+  ({ className = "", children }, ref) => /* @__PURE__ */ jsx9(
+    "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__ */ jsx9("div", { className: `flex flex-col gap-1.5 p-6 border-b border-border-1 ${className}`, children });
+}
+var DialogTitle = forwardRef3(
+  ({ children, className = "" }, ref) => /* @__PURE__ */ jsx9("h2", { ref, className: `text-base font-semibold text-text-1 ${className}`, children })
+);
+DialogTitle.displayName = "DialogTitle";
+var DialogDescription = forwardRef3(
+  ({ children, className = "" }, ref) => /* @__PURE__ */ jsx9("p", { ref, className: `text-sm text-text-3 ${className}`, children })
+);
+DialogDescription.displayName = "DialogDescription";
+var DialogClose = forwardRef3(
+  ({ className = "", ...props }, ref) => /* @__PURE__ */ jsx9(
+    "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__ */ jsx9("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", children: /* @__PURE__ */ jsx9("path", { d: "M4 4l8 8M12 4l-8 8", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round" }) })
+    }
+  )
+);
+DialogClose.displayName = "DialogClose";
+function DialogFooter({ children, className = "" }) {
+  return /* @__PURE__ */ jsx9("div", { className: `flex justify-end gap-3 p-6 border-t border-border-1 ${className}`, children });
+}
+
+// src/components/empty-state/empty-state.tsx
+import { jsx as jsx10, jsxs as jsxs5 } from "react/jsx-runtime";
+function EmptyState({ icon, title, description, action }) {
+  return /* @__PURE__ */ jsxs5("div", { className: "flex flex-col items-center justify-center py-12 text-center", children: [
+    icon && /* @__PURE__ */ jsx10("div", { className: "mb-4 text-text-3", children: icon }),
+    /* @__PURE__ */ jsx10("h3", { className: "text-sm font-medium text-text-1", children: title }),
+    description && /* @__PURE__ */ jsx10("p", { className: "mt-1 text-sm text-text-3", children: description }),
+    action && /* @__PURE__ */ jsx10("div", { className: "mt-4", children: action })
+  ] });
+}
+
+// src/components/input/input.tsx
+import { forwardRef as forwardRef4 } from "react";
+import { jsx as jsx11, jsxs as jsxs6 } from "react/jsx-runtime";
+var Input = forwardRef4(
+  ({ label, error, className = "", id, ...props }, ref) => {
+    const inputId = id || label?.toLowerCase().replace(/\s+/g, "-");
+    return /* @__PURE__ */ jsxs6("div", { className: "flex flex-col gap-1.5", children: [
+      label && /* @__PURE__ */ jsx11("label", { htmlFor: inputId, className: "text-sm font-medium text-text-2", children: label }),
+      /* @__PURE__ */ jsx11(
+        "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__ */ jsx11("p", { className: "text-xs text-danger", children: error })
+    ] });
+  }
+);
+Input.displayName = "Input";
+
+// src/components/kbd/kbd.tsx
+import { jsx as jsx12 } from "react/jsx-runtime";
+function Kbd({ children, className = "" }) {
+  return /* @__PURE__ */ jsx12(
+    "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
+import { jsx as jsx13, jsxs as jsxs7 } from "react/jsx-runtime";
+function Loading({ text = "Loading", className = "" }) {
+  return /* @__PURE__ */ jsxs7("div", { className: `flex items-center gap-1 text-text-3 text-sm font-mono ${className}`, children: [
+    /* @__PURE__ */ jsx13("span", { children: text }),
+    /* @__PURE__ */ jsxs7("span", { className: "flex gap-0.5", children: [
+      /* @__PURE__ */ jsx13("span", { className: "animate-pulse", style: { animationDelay: "0ms" }, children: "." }),
+      /* @__PURE__ */ jsx13("span", { className: "animate-pulse", style: { animationDelay: "200ms" }, children: "." }),
+      /* @__PURE__ */ jsx13("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 jsx14, jsxs as jsxs8 } 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__ */ jsxs8("div", { className: "fixed inset-0 z-50 flex items-center justify-center", children: [
+    /* @__PURE__ */ jsx14("div", { className: "absolute inset-0 bg-black/60", onClick: onClose }),
+    /* @__PURE__ */ jsxs8(
+      "div",
+      {
+        className: `relative w-full max-w-md rounded-xl border border-border-1 bg-bg-1 p-6 shadow-xl ${className}`,
+        children: [
+          /* @__PURE__ */ jsxs8("div", { className: "mb-4 flex items-center justify-between", children: [
+            /* @__PURE__ */ jsx14("h2", { className: "text-base font-semibold text-text-1", children: title }),
+            /* @__PURE__ */ jsx14(
+              "button",
+              {
+                onClick: onClose,
+                className: "p-1 text-text-3 transition-colors rounded-sm hover:bg-bg-2",
+                "aria-label": "Close",
+                children: /* @__PURE__ */ jsx14("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", children: /* @__PURE__ */ jsx14("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 jsx15 } from "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__ */ jsx15("nav", { className: `${styles.container} ${className}`, children: items.map((item) => {
+    const itemClassName = `${styles.item} ${item.isActive ? styles.active : styles.inactive}`;
+    if (renderLink) {
+      return /* @__PURE__ */ jsx15("span", { children: renderLink({ href: item.href, className: itemClassName, children: item.label }) }, item.href);
+    }
+    return /* @__PURE__ */ jsx15("a", { href: item.href, className: itemClassName, children: item.label }, item.href);
+  }) });
+}
+
+// src/components/section-header/section-header.tsx
+import { jsx as jsx16, jsxs as jsxs9 } from "react/jsx-runtime";
+function SectionHeader({ title, badge, className = "" }) {
+  return /* @__PURE__ */ jsxs9("div", { className: `flex items-center justify-between bg-bg-2 px-3 py-2.5 rounded-t-xl ${className}`, children: [
+    /* @__PURE__ */ jsx16("span", { className: "text-xs font-semibold text-text-2", children: title }),
+    badge
+  ] });
+}
+
+// src/components/select/select.tsx
+import { forwardRef as forwardRef5 } from "react";
+import { jsx as jsx17, jsxs as jsxs10 } from "react/jsx-runtime";
+var Select = forwardRef5(
+  ({ label, options, className = "", id, ...props }, ref) => {
+    const selectId = id || label?.toLowerCase().replace(/\s+/g, "-");
+    return /* @__PURE__ */ jsxs10("div", { className: "flex flex-col gap-1.5", children: [
+      label && /* @__PURE__ */ jsx17("label", { htmlFor: selectId, className: "text-sm font-medium text-text-2", children: label }),
+      /* @__PURE__ */ jsx17(
+        "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__ */ jsx17("option", { value: opt.value, children: opt.label }, opt.value))
+        }
+      )
+    ] });
+  }
+);
+Select.displayName = "Select";
+
+// src/components/side-panel/side-panel.tsx
+import { useEffect as useEffect3, useCallback as useCallback3 } from "react";
+import { jsx as jsx18, jsxs as jsxs11 } from "react/jsx-runtime";
+function SidePanel({ open, onClose, title, subtitle, children, className = "" }) {
+  const handleKeyDown = useCallback3(
+    (e) => {
+      if (e.key === "Escape") onClose();
+    },
+    [onClose]
+  );
+  useEffect3(() => {
+    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__ */ jsxs11("div", { className: "fixed inset-0 z-50 flex items-center justify-center", onClick: onClose, children: [
+    /* @__PURE__ */ jsx18("div", { className: "absolute inset-0 bg-black/50" }),
+    /* @__PURE__ */ jsxs11(
+      "div",
+      {
+        className: `relative bg-bg-1 rounded-lg shadow-xl flex flex-col w-[900px] h-[600px] ${className}`,
+        onClick: (e) => e.stopPropagation(),
+        children: [
+          /* @__PURE__ */ jsxs11("div", { className: "flex items-center justify-between px-4 py-3 bg-bg-2 rounded-t-lg flex-shrink-0", children: [
+            /* @__PURE__ */ jsxs11("div", { className: "min-w-0", children: [
+              /* @__PURE__ */ jsx18("h3", { className: "font-semibold text-base truncate", children: title }),
+              subtitle && /* @__PURE__ */ jsx18("p", { className: "text-xs text-text-3", children: subtitle })
+            ] }),
+            /* @__PURE__ */ jsx18(Button, { variant: "ghost", size: "sm", onClick: onClose, className: "flex-shrink-0", children: /* @__PURE__ */ jsx18("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", children: /* @__PURE__ */ jsx18("path", { d: "M4 4l8 8M12 4l-8 8", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round" }) }) })
+          ] }),
+          /* @__PURE__ */ jsx18("div", { className: "flex-1 overflow-hidden", children })
+        ]
+      }
+    )
+  ] });
+}
+
+// src/components/separator/separator.tsx
+import { jsx as jsx19 } from "react/jsx-runtime";
+function Separator({ className = "" }) {
+  return /* @__PURE__ */ jsx19("div", { className: `mx-1 h-5 w-px shrink-0 bg-border-1 ${className}` });
+}
+
+// src/components/skeleton/skeleton.tsx
+import { jsx as jsx20 } from "react/jsx-runtime";
+function Skeleton({ className = "" }) {
+  return /* @__PURE__ */ jsx20(
+    "div",
+    {
+      className: `rounded-lg bg-bg-2 animate-pulse ${className}`
+    }
+  );
+}
+
+// src/components/skeleton-table/skeleton-table.tsx
+import { jsx as jsx21, jsxs as jsxs12 } from "react/jsx-runtime";
+function SkeletonTable({ className = "", rows = 5, cols = 4 }) {
+  return /* @__PURE__ */ jsxs12("div", { className: `w-full ${className}`, children: [
+    /* @__PURE__ */ jsx21("div", { className: "flex gap-4 mb-4 pb-4 border-b border-border-1", children: Array.from({ length: cols }).map((_, i) => /* @__PURE__ */ jsx21(Skeleton, { className: "h-4 flex-1 rounded" }, i)) }),
+    /* @__PURE__ */ jsx21("div", { className: "space-y-3", children: Array.from({ length: rows }).map((_, i) => /* @__PURE__ */ jsx21("div", { className: "flex gap-4", children: Array.from({ length: cols }).map((_2, j) => /* @__PURE__ */ jsx21(Skeleton, { className: "h-4 flex-1 rounded" }, j)) }, i)) })
+  ] });
+}
+
+// src/components/sparkline/sparkline.tsx
+import { jsx as jsx22 } from "react/jsx-runtime";
+function Sparkline({ trend, className = "" }) {
+  const max = Math.max(...trend);
+  return /* @__PURE__ */ jsx22("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__ */ jsx22("div", { className: `w-[3px] rounded-full ${col}`, style: { height: `${h}px` } }, i);
+  }) });
+}
+
+// src/components/spinner/spinner.tsx
+import { jsx as jsx23, jsxs as jsxs13 } 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__ */ jsxs13(
+    "svg",
+    {
+      className: `animate-spin text-text-3 ${sizeMap[size]} ${className}`,
+      viewBox: "0 0 24 24",
+      fill: "none",
+      role: "status",
+      "aria-label": "Loading",
+      children: [
+        /* @__PURE__ */ jsx23("circle", { cx: "12", cy: "12", r: "10", stroke: "currentColor", strokeWidth: "2.5", opacity: "0.2" }),
+        /* @__PURE__ */ jsx23(
+          "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 jsx24, jsxs as jsxs14 } from "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__ */ jsxs14("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__ */ jsxs14("div", { className: "flex items-center gap-1.5 text-xs text-text-3", children: [
+      item.dot && /* @__PURE__ */ jsx24("span", { className: `inline-block h-1.5 w-1.5 rounded-full ${dotColors[item.dot]}` }),
+      item.label
+    ] }, i)),
+    trailing && /* @__PURE__ */ jsx24("div", { className: "ml-auto text-xs text-text-3", children: trailing })
+  ] });
+}
+
+// src/components/table/table.tsx
+import { jsx as jsx25 } from "react/jsx-runtime";
+function Table({ children, className = "" }) {
+  return /* @__PURE__ */ jsx25("div", { className: "w-full overflow-x-auto rounded-xl", children: /* @__PURE__ */ jsx25("table", { className: `w-full text-sm ${className}`, children }) });
+}
+function TableHead({ children }) {
+  return /* @__PURE__ */ jsx25("thead", { className: "border-b border-border-1", children: /* @__PURE__ */ jsx25("tr", { children }) });
+}
+function TableHeader({ children, className = "", onClick }) {
+  return /* @__PURE__ */ jsx25(
+    "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__ */ jsx25("tbody", { className: "divide-y divide-border-2", children });
+}
+function TableRow({ children, className = "", onClick }) {
+  return /* @__PURE__ */ jsx25("tr", { className: `hover:bg-bg-2/50 transition-colors ${onClick ? "cursor-pointer" : ""} ${className}`, onClick, children });
+}
+function TableCell({ children, className = "" }) {
+  return /* @__PURE__ */ jsx25("td", { className: `px-4 py-3.5 text-text-2 ${className}`, children });
+}
+
+// src/components/tabs/tabs.tsx
+import { jsx as jsx26 } from "react/jsx-runtime";
+function Tabs({ tabs, value, onChange, className = "" }) {
+  return /* @__PURE__ */ jsx26("div", { className: `flex gap-1 rounded-lg border border-border-1 bg-bg-1 p-1 ${className}`, children: tabs.map((tab) => /* @__PURE__ */ jsx26(
+    "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
+import { jsx as jsx27, jsxs as jsxs15 } from "react/jsx-runtime";
+function Toggle({ options, value, onChange, className = "" }) {
+  const [left, right] = options;
+  return /* @__PURE__ */ jsxs15("div", { className: `inline-flex items-center gap-2 text-sm ${className}`, children: [
+    /* @__PURE__ */ jsx27(
+      "span",
+      {
+        className: `cursor-pointer transition-colors ${value === left ? "text-text-1" : "text-text-3"}`,
+        onClick: () => onChange(left),
+        children: left
+      }
+    ),
+    /* @__PURE__ */ jsx27(
+      "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__ */ jsx27(
+          "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__ */ jsx27(
+      "span",
+      {
+        className: `cursor-pointer transition-colors ${value === right ? "text-text-1" : "text-text-3"}`,
+        onClick: () => onChange(right),
+        children: right
+      }
+    )
+  ] });
+}
+export {
+  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.mjs.map