@stackvibe-studio/ui 0.1.0 → 0.3.0

package/dist/index.cjs

@@ -1,4 +1,5 @@
 "use strict";
+"use client";
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;
@@ -20,24 +21,143 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 // src/index.ts
 var index_exports = {};
 __export(index_exports, {
+  Accordion: () => Accordion,
+  Alert: () => Alert,
+  Avatar: () => Avatar,
   Badge: () => Badge,
   Button: () => Button,
   Card: () => Card,
+  Checkbox: () => Checkbox,
+  Dialog: () => Dialog,
+  DialogDescription: () => DialogDescription,
+  DialogFooter: () => DialogFooter,
+  DialogHeader: () => DialogHeader,
+  DialogTitle: () => DialogTitle,
+  Drawer: () => Drawer,
+  DrawerHeader: () => DrawerHeader,
+  DrawerTitle: () => DrawerTitle,
+  DropdownMenu: () => DropdownMenu,
   Input: () => Input,
+  Progress: () => Progress,
+  Select: () => Select,
+  Skeleton: () => Skeleton,
+  Switch: () => Switch,
+  Tabs: () => Tabs,
+  Textarea: () => Textarea,
+  Toaster: () => Toaster,
+  Tooltip: () => Tooltip,
   cx: () => cx,
-  themeTokens: () => themeTokens
+  themeTokens: () => themeTokens,
+  toast: () => toast
 });
 module.exports = __toCommonJS(index_exports);
 
-// src/components/badge.tsx
+// src/components/accordion.tsx
+var import_react = require("react");
 var import_jsx_runtime = require("react/jsx-runtime");
+function Accordion({
+  items,
+  type = "single",
+  defaultOpen = [],
+  className = ""
+}) {
+  const [openIds, setOpenIds] = (0, import_react.useState)(defaultOpen);
+  const toggle = (id) => {
+    if (type === "single") {
+      setOpenIds(openIds.includes(id) ? [] : [id]);
+    } else {
+      setOpenIds(
+        openIds.includes(id) ? openIds.filter((item) => item !== id) : [...openIds, id]
+      );
+    }
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: ["divide-y divide-white/10 rounded-2xl border border-white/10 bg-slate-900/60 overflow-hidden", className].join(" "), children: items.map((item) => {
+    const isOpen = openIds.includes(item.id);
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "transition duration-150", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+        "button",
+        {
+          type: "button",
+          onClick: () => toggle(item.id),
+          className: "flex w-full items-center justify-between px-5 py-4 text-left font-medium text-white hover:bg-white/5 transition cursor-pointer",
+          "aria-expanded": isOpen,
+          children: [
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { children: item.title }),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+              "svg",
+              {
+                className: `h-4 w-4 transform text-slate-400 transition-transform duration-200 ${isOpen ? "rotate-180 text-violet-400" : ""}`,
+                fill: "none",
+                viewBox: "0 0 24 24",
+                stroke: "currentColor",
+                children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M19 9l-7 7-7-7" })
+              }
+            )
+          ]
+        }
+      ),
+      isOpen && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "px-5 pb-4 pt-1 text-sm text-slate-300 leading-relaxed border-t border-white/5 animate-in fade-in duration-200", children: item.content })
+    ] }, item.id);
+  }) });
+}
+
+// src/components/alert.tsx
+var import_jsx_runtime2 = require("react/jsx-runtime");
+var variantClasses = {
+  info: "border-cyan-500/40 bg-cyan-500/10 text-cyan-50",
+  success: "border-emerald-500/40 bg-emerald-500/10 text-emerald-50",
+  warning: "border-amber-500/40 bg-amber-500/10 text-amber-50",
+  danger: "border-rose-500/40 bg-rose-500/10 text-rose-50"
+};
+function Alert({ title, variant = "info", className = "", children, ...props }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+    "div",
+    {
+      ...props,
+      className: ["rounded-2xl border p-4 text-sm", variantClasses[variant], className].join(" "),
+      role: "alert",
+      children: [
+        title ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("p", { className: "mb-1 font-medium", children: title }) : null,
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { children })
+      ]
+    }
+  );
+}
+
+// src/components/avatar.tsx
+var import_jsx_runtime3 = require("react/jsx-runtime");
+var sizeClasses = {
+  sm: "h-9 w-9 text-xs",
+  md: "h-12 w-12 text-sm",
+  lg: "h-16 w-16 text-base"
+};
+function Avatar({ src, alt = "avatar", fallback = "SV", size = "md", className = "", ...props }) {
+  return src ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+    "img",
+    {
+      ...props,
+      src,
+      alt,
+      className: ["rounded-full object-cover ring-1 ring-white/10", sizeClasses[size], className].join(" ")
+    }
+  ) : /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+    "div",
+    {
+      className: ["flex items-center justify-center rounded-full bg-violet-500/20 font-semibold text-violet-100 ring-1 ring-violet-400/20", sizeClasses[size], className].join(" "),
+      children: fallback
+    }
+  );
+}
+
+// src/components/badge.tsx
+var import_jsx_runtime4 = require("react/jsx-runtime");
 var variants = {
   primary: "bg-violet-500/20 text-violet-200 ring-1 ring-violet-400/20",
   secondary: "bg-cyan-500/15 text-cyan-200 ring-1 ring-cyan-400/20",
   outline: "bg-transparent text-slate-200 ring-1 ring-white/10"
 };
 function Badge({ variant = "primary", className = "", ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
     "span",
     {
       ...props,
@@ -47,37 +167,38 @@ function Badge({ variant = "primary", className = "", ...props }) {
 }
 
 // src/components/button.tsx
-var import_jsx_runtime2 = require("react/jsx-runtime");
-var variantClasses = {
+var import_jsx_runtime5 = require("react/jsx-runtime");
+var variantClasses2 = {
   primary: "bg-violet-500 text-white hover:bg-violet-400",
   secondary: "bg-cyan-500 text-slate-950 hover:bg-cyan-400",
   ghost: "bg-white/5 text-white hover:bg-white/10",
   outline: "border border-white/15 bg-transparent text-white hover:bg-white/5"
 };
-var sizeClasses = {
+var sizeClasses2 = {
   sm: "px-3 py-1.5 text-sm",
   md: "px-4 py-2 text-sm",
   lg: "px-5 py-3 text-base"
 };
-function Button({ variant = "primary", size = "md", className = "", ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
-    "button",
-    {
-      ...props,
-      className: [
-        "inline-flex items-center justify-center rounded-xl font-medium transition-all duration-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-violet-400",
-        variantClasses[variant],
-        sizeClasses[size],
-        className
-      ].join(" ")
-    }
-  );
+function Button(props) {
+  const { as = "button", variant = "primary", size = "md", className = "", ...rest } = props;
+  const commonClassName = [
+    "inline-flex items-center justify-center rounded-xl font-medium transition-all duration-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-violet-400",
+    variantClasses2[variant],
+    sizeClasses2[size],
+    className
+  ].join(" ");
+  if (as === "a") {
+    const { href, ...anchorProps } = rest;
+    return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("a", { ...anchorProps, href, className: commonClassName });
+  }
+  const { type = "button", ...buttonProps } = rest;
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("button", { ...buttonProps, type, className: commonClassName });
 }
 
 // src/components/card.tsx
-var import_jsx_runtime3 = require("react/jsx-runtime");
+var import_jsx_runtime6 = require("react/jsx-runtime");
 function Card({ as: Component = "div", className = "", ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
     Component,
     {
       ...props,
@@ -89,10 +210,230 @@ function Card({ as: Component = "div", className = "", ...props }) {
   );
 }
 
+// src/components/checkbox.tsx
+var import_jsx_runtime7 = require("react/jsx-runtime");
+function Checkbox({ className = "", ...props }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+    "input",
+    {
+      ...props,
+      type: "checkbox",
+      className: ["h-4 w-4 rounded border border-white/20 bg-slate-900 text-violet-500 focus:ring-violet-400/40", className].join(" ")
+    }
+  );
+}
+
+// src/components/dialog.tsx
+var import_react2 = require("react");
+var import_jsx_runtime8 = require("react/jsx-runtime");
+function Dialog({ open, onOpenChange, children, className = "" }) {
+  const dialogRef = (0, import_react2.useRef)(null);
+  (0, import_react2.useEffect)(() => {
+    const handleKeyDown = (e) => {
+      if (e.key === "Escape" && open) {
+        onOpenChange(false);
+      }
+    };
+    if (open) {
+      document.body.style.overflow = "hidden";
+      window.addEventListener("keydown", handleKeyDown);
+    } else {
+      document.body.style.overflow = "";
+    }
+    return () => {
+      document.body.style.overflow = "";
+      window.removeEventListener("keydown", handleKeyDown);
+    };
+  }, [open, onOpenChange]);
+  if (!open) return null;
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+    "div",
+    {
+      role: "dialog",
+      "aria-modal": "true",
+      className: "fixed inset-0 z-50 flex items-center justify-center p-4 bg-slate-950/80 backdrop-blur-md animate-in fade-in duration-200",
+      onClick: (e) => {
+        if (e.target === e.currentTarget) onOpenChange(false);
+      },
+      children: /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
+        "div",
+        {
+          ref: dialogRef,
+          className: [
+            "relative w-full max-w-lg rounded-3xl border border-white/10 bg-slate-900/95 p-6 shadow-2xl shadow-violet-500/10 text-white animate-in zoom-in-95 duration-200",
+            className
+          ].join(" "),
+          children: [
+            /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+              "button",
+              {
+                type: "button",
+                onClick: () => onOpenChange(false),
+                "aria-label": "Close dialog",
+                className: "absolute right-5 top-5 rounded-xl border border-white/10 bg-white/5 p-1.5 text-slate-400 hover:bg-white/10 hover:text-white transition cursor-pointer",
+                children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("svg", { className: "h-4 w-4", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M6 18L18 6M6 6l12 12" }) })
+              }
+            ),
+            children
+          ]
+        }
+      )
+    }
+  );
+}
+function DialogHeader({ children, className = "" }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: ["mb-4 space-y-1.5", className].join(" "), children });
+}
+function DialogTitle({ children, className = "" }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("h2", { className: ["text-xl font-bold tracking-tight text-white", className].join(" "), children });
+}
+function DialogDescription({ children, className = "" }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("p", { className: ["text-sm text-slate-300 leading-relaxed", className].join(" "), children });
+}
+function DialogFooter({ children, className = "" }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: ["mt-6 flex flex-wrap items-center justify-end gap-3", className].join(" "), children });
+}
+
+// src/components/drawer.tsx
+var import_react3 = require("react");
+var import_jsx_runtime9 = require("react/jsx-runtime");
+function Drawer({
+  open,
+  onOpenChange,
+  position = "right",
+  children,
+  className = ""
+}) {
+  (0, import_react3.useEffect)(() => {
+    const handleKeyDown = (e) => {
+      if (e.key === "Escape" && open) onOpenChange(false);
+    };
+    if (open) {
+      document.body.style.overflow = "hidden";
+      window.addEventListener("keydown", handleKeyDown);
+    } else {
+      document.body.style.overflow = "";
+    }
+    return () => {
+      document.body.style.overflow = "";
+      window.removeEventListener("keydown", handleKeyDown);
+    };
+  }, [open, onOpenChange]);
+  if (!open) return null;
+  const positionClasses = {
+    right: "inset-y-0 right-0 w-full max-w-md border-l border-white/10 animate-in slide-in-from-right duration-300",
+    left: "inset-y-0 left-0 w-full max-w-md border-r border-white/10 animate-in slide-in-from-left duration-300",
+    bottom: "inset-x-0 bottom-0 max-h-[85vh] w-full border-t border-white/10 rounded-t-3xl animate-in slide-in-from-bottom duration-300"
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+    "div",
+    {
+      role: "dialog",
+      "aria-modal": "true",
+      className: "fixed inset-0 z-50 bg-slate-950/80 backdrop-blur-sm animate-in fade-in duration-200",
+      onClick: (e) => {
+        if (e.target === e.currentTarget) onOpenChange(false);
+      },
+      children: /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
+        "div",
+        {
+          className: [
+            "fixed bg-slate-900/95 p-6 shadow-2xl text-white overflow-y-auto",
+            positionClasses[position],
+            className
+          ].join(" "),
+          children: [
+            /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+              "button",
+              {
+                type: "button",
+                onClick: () => onOpenChange(false),
+                "aria-label": "Close drawer",
+                className: "absolute right-5 top-5 rounded-xl border border-white/10 bg-white/5 p-1.5 text-slate-400 hover:bg-white/10 hover:text-white transition cursor-pointer",
+                children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("svg", { className: "h-4 w-4", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M6 18L18 6M6 6l12 12" }) })
+              }
+            ),
+            children
+          ]
+        }
+      )
+    }
+  );
+}
+function DrawerHeader({ children, className = "" }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: ["mb-6 space-y-1.5", className].join(" "), children });
+}
+function DrawerTitle({ children, className = "" }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("h2", { className: ["text-xl font-bold tracking-tight text-white", className].join(" "), children });
+}
+
+// src/components/dropdown-menu.tsx
+var import_react4 = require("react");
+var import_jsx_runtime10 = require("react/jsx-runtime");
+function DropdownMenu({
+  trigger,
+  items,
+  align = "right",
+  className = ""
+}) {
+  const [open, setOpen] = (0, import_react4.useState)(false);
+  const menuRef = (0, import_react4.useRef)(null);
+  (0, import_react4.useEffect)(() => {
+    const handleClickOutside = (e) => {
+      if (menuRef.current && !menuRef.current.contains(e.target)) {
+        setOpen(false);
+      }
+    };
+    if (open) {
+      document.addEventListener("mousedown", handleClickOutside);
+    }
+    return () => {
+      document.removeEventListener("mousedown", handleClickOutside);
+    };
+  }, [open]);
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { ref: menuRef, className: "relative inline-block text-left", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { onClick: () => setOpen(!open), className: "cursor-pointer", children: trigger }),
+    open && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+      "div",
+      {
+        role: "menu",
+        className: [
+          "absolute z-50 mt-2 min-w-[12rem] rounded-2xl border border-white/10 bg-slate-900/95 p-1.5 shadow-2xl backdrop-blur-xl animate-in fade-in zoom-in-95 duration-150",
+          align === "right" ? "right-0" : "left-0",
+          className
+        ].join(" "),
+        children: items.map((item) => /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
+          "button",
+          {
+            type: "button",
+            role: "menuitem",
+            disabled: item.disabled,
+            onClick: () => {
+              if (!item.disabled) {
+                item.onClick?.();
+                setOpen(false);
+              }
+            },
+            className: [
+              "flex w-full items-center gap-2.5 rounded-xl px-3 py-2 text-xs font-medium transition cursor-pointer text-left",
+              item.disabled ? "opacity-40 cursor-not-allowed text-slate-400" : item.destructive ? "text-rose-400 hover:bg-rose-500/10 hover:text-rose-300" : "text-slate-200 hover:bg-white/10 hover:text-white"
+            ].join(" "),
+            children: [
+              item.icon && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: "h-4 w-4 shrink-0", children: item.icon }),
+              /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: "flex-1", children: item.label })
+            ]
+          },
+          item.id
+        ))
+      }
+    )
+  ] });
+}
+
 // src/components/input.tsx
-var import_jsx_runtime4 = require("react/jsx-runtime");
+var import_jsx_runtime11 = require("react/jsx-runtime");
 function Input({ className = "", ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
     "input",
     {
       ...props,
@@ -104,6 +445,292 @@ function Input({ className = "", ...props }) {
   );
 }
 
+// src/components/progress.tsx
+var import_jsx_runtime12 = require("react/jsx-runtime");
+var variantGradients = {
+  primary: "from-violet-600 to-indigo-500",
+  secondary: "from-cyan-500 to-blue-500",
+  success: "from-emerald-500 to-teal-400",
+  warning: "from-amber-500 to-orange-400"
+};
+function Progress({
+  value = 0,
+  max = 100,
+  variant = "primary",
+  showLabel = false,
+  className = "",
+  ...props
+}) {
+  const percentage = Math.min(Math.max(value / max * 100, 0), 100);
+  return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: ["w-full space-y-1.5", className].join(" "), ...props, children: [
+    showLabel && /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "flex justify-between text-xs font-semibold text-slate-300", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { children: "Progress" }),
+      /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("span", { className: "font-mono", children: [
+        Math.round(percentage),
+        "%"
+      ] })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+      "div",
+      {
+        role: "progressbar",
+        "aria-valuenow": value,
+        "aria-valuemin": 0,
+        "aria-valuemax": max,
+        className: "relative h-2.5 w-full overflow-hidden rounded-full bg-slate-800 ring-1 ring-white/10",
+        children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+          "div",
+          {
+            className: [
+              "h-full rounded-full bg-gradient-to-r transition-all duration-300 ease-out shadow-sm",
+              variantGradients[variant]
+            ].join(" "),
+            style: { width: `${percentage}%` }
+          }
+        )
+      }
+    )
+  ] });
+}
+
+// src/components/select.tsx
+var import_jsx_runtime13 = require("react/jsx-runtime");
+function Select({ className = "", children, ...props }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+    "select",
+    {
+      ...props,
+      className: [
+        "w-full rounded-xl border border-white/10 bg-slate-900 px-3 py-2 text-sm text-white focus:border-violet-400 focus:outline-none focus:ring-2 focus:ring-violet-400/30",
+        className
+      ].join(" "),
+      children
+    }
+  );
+}
+
+// src/components/skeleton.tsx
+var import_jsx_runtime14 = require("react/jsx-runtime");
+var roundedClasses = {
+  sm: "rounded-md",
+  md: "rounded-xl",
+  lg: "rounded-2xl",
+  full: "rounded-full"
+};
+function Skeleton({ className = "", rounded = "md", ...props }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+    "div",
+    {
+      ...props,
+      className: ["animate-pulse bg-slate-700/70", roundedClasses[rounded], className].join(" "),
+      "aria-hidden": "true"
+    }
+  );
+}
+
+// src/components/switch.tsx
+var import_jsx_runtime15 = require("react/jsx-runtime");
+function Switch({
+  checked,
+  defaultChecked = false,
+  onCheckedChange,
+  disabled = false,
+  className = "",
+  id,
+  "aria-label": ariaLabel
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+    "button",
+    {
+      type: "button",
+      role: "switch",
+      id,
+      "aria-label": ariaLabel,
+      "aria-checked": checked ?? defaultChecked,
+      disabled,
+      onClick: () => onCheckedChange?.(!checked),
+      className: [
+        "relative inline-flex h-6 w-11 shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-violet-400 focus-visible:ring-offset-2 focus-visible:ring-offset-slate-950 disabled:cursor-not-allowed disabled:opacity-50",
+        checked ?? defaultChecked ? "bg-violet-600" : "bg-slate-800",
+        className
+      ].join(" "),
+      children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+        "span",
+        {
+          className: [
+            "pointer-events-none inline-block h-5 w-5 transform rounded-full bg-white shadow-lg ring-0 transition duration-200 ease-in-out",
+            checked ?? defaultChecked ? "translate-x-5" : "translate-x-0"
+          ].join(" ")
+        }
+      )
+    }
+  );
+}
+
+// src/components/tabs.tsx
+var import_react5 = require("react");
+var import_jsx_runtime16 = require("react/jsx-runtime");
+function Tabs({ items, defaultTab, className = "" }) {
+  const initialTab = defaultTab ?? items[0]?.id ?? "";
+  const [activeTab, setActiveTab] = (0, import_react5.useState)(initialTab);
+  const activeItem = items.find((item) => item.id === activeTab) ?? items[0];
+  return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { className, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { className: "mb-4 flex flex-wrap gap-2", children: items.map((item) => /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+      "button",
+      {
+        type: "button",
+        onClick: () => setActiveTab(item.id),
+        className: [
+          "rounded-full px-3 py-1.5 text-sm transition",
+          item.id === activeItem?.id ? "bg-violet-500 text-white shadow-lg shadow-violet-500/20" : "bg-slate-800 text-slate-300 hover:bg-slate-700 hover:text-white"
+        ].join(" "),
+        children: item.label
+      },
+      item.id
+    )) }),
+    /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { className: "rounded-2xl border border-white/10 bg-slate-950/60 p-4 text-sm text-slate-200", children: activeItem?.content })
+  ] });
+}
+
+// src/components/textarea.tsx
+var import_jsx_runtime17 = require("react/jsx-runtime");
+function Textarea({ className = "", ...props }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+    "textarea",
+    {
+      ...props,
+      className: [
+        "w-full rounded-xl border border-white/10 bg-slate-900 px-3 py-2 text-sm text-white placeholder:text-slate-400 focus:border-violet-400 focus:outline-none focus:ring-2 focus:ring-violet-400/30",
+        className
+      ].join(" ")
+    }
+  );
+}
+
+// src/components/toast.tsx
+var import_react6 = require("react");
+var import_jsx_runtime18 = require("react/jsx-runtime");
+var toasts = [];
+var listeners = /* @__PURE__ */ new Set();
+function notify() {
+  listeners.forEach((l) => l([...toasts]));
+}
+var toast = {
+  show(message, options) {
+    const id = Math.random().toString(36).substring(2, 9);
+    const newToast = {
+      id,
+      message,
+      type: options?.type || "info",
+      title: options?.title,
+      duration: options?.duration || 4e3
+    };
+    toasts = [...toasts, newToast];
+    notify();
+    setTimeout(() => {
+      toast.dismiss(id);
+    }, newToast.duration);
+    return id;
+  },
+  success(message, title) {
+    return toast.show(message, { type: "success", title });
+  },
+  error(message, title) {
+    return toast.show(message, { type: "error", title });
+  },
+  info(message, title) {
+    return toast.show(message, { type: "info", title });
+  },
+  dismiss(id) {
+    toasts = toasts.filter((t) => t.id !== id);
+    notify();
+  }
+};
+function Toaster() {
+  const [activeToasts, setActiveToasts] = (0, import_react6.useState)([]);
+  (0, import_react6.useEffect)(() => {
+    listeners.add(setActiveToasts);
+    return () => {
+      listeners.delete(setActiveToasts);
+    };
+  }, []);
+  if (activeToasts.length === 0) return null;
+  const typeStyles = {
+    success: "border-emerald-500/40 bg-slate-900/95 text-emerald-100 shadow-emerald-500/10",
+    error: "border-rose-500/40 bg-slate-900/95 text-rose-100 shadow-rose-500/10",
+    info: "border-cyan-500/40 bg-slate-900/95 text-cyan-100 shadow-cyan-500/10",
+    warning: "border-amber-500/40 bg-slate-900/95 text-amber-100 shadow-amber-500/10"
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { className: "fixed bottom-5 right-5 z-50 flex flex-col gap-2.5 max-w-sm w-full pointer-events-none", children: activeToasts.map((t) => /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(
+    "div",
+    {
+      className: [
+        "pointer-events-auto flex items-start justify-between rounded-2xl border p-4 shadow-xl backdrop-blur-md animate-in slide-in-from-bottom-5 duration-200",
+        typeStyles[t.type || "info"]
+      ].join(" "),
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { className: "space-y-1", children: [
+          t.title && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("p", { className: "font-semibold text-xs tracking-wide uppercase text-white", children: t.title }),
+          /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("p", { className: "text-sm font-medium", children: t.message })
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+          "button",
+          {
+            type: "button",
+            onClick: () => toast.dismiss(t.id),
+            className: "ml-3 text-slate-400 hover:text-white transition cursor-pointer",
+            children: "\xD7"
+          }
+        )
+      ]
+    },
+    t.id
+  )) });
+}
+
+// src/components/tooltip.tsx
+var import_react7 = require("react");
+var import_jsx_runtime19 = require("react/jsx-runtime");
+function Tooltip({
+  content,
+  children,
+  side = "top",
+  className = ""
+}) {
+  const [isVisible, setIsVisible] = (0, import_react7.useState)(false);
+  const sideClasses = {
+    top: "bottom-full left-1/2 -translate-x-1/2 mb-2",
+    bottom: "top-full left-1/2 -translate-x-1/2 mt-2",
+    left: "right-full top-1/2 -translate-y-1/2 mr-2",
+    right: "left-full top-1/2 -translate-y-1/2 ml-2"
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(
+    "div",
+    {
+      className: "relative inline-flex",
+      onMouseEnter: () => setIsVisible(true),
+      onMouseLeave: () => setIsVisible(false),
+      onFocus: () => setIsVisible(true),
+      onBlur: () => setIsVisible(false),
+      children: [
+        children,
+        isVisible && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+          "div",
+          {
+            role: "tooltip",
+            className: [
+              "absolute z-50 whitespace-nowrap rounded-lg border border-white/10 bg-slate-900/95 px-2.5 py-1 text-xs font-medium text-slate-200 shadow-xl backdrop-blur-md animate-in fade-in zoom-in-95 duration-150 pointer-events-none",
+              sideClasses[side],
+              className
+            ].join(" "),
+            children: content
+          }
+        )
+      ]
+    }
+  );
+}
+
 // src/tokens/index.ts
 var themeTokens = {
   colors: {
@@ -122,10 +749,32 @@ var themeTokens = {
 var cx = (...classes) => classes.filter(Boolean).join(" ");
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
+  Accordion,
+  Alert,
+  Avatar,
   Badge,
   Button,
   Card,
+  Checkbox,
+  Dialog,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  Drawer,
+  DrawerHeader,
+  DrawerTitle,
+  DropdownMenu,
   Input,
+  Progress,
+  Select,
+  Skeleton,
+  Switch,
+  Tabs,
+  Textarea,
+  Toaster,
+  Tooltip,
   cx,
-  themeTokens
+  themeTokens,
+  toast
 });