@stackvibe-studio/ui 0.2.0 → 0.3.0

package/dist/index.js

@@ -1,7 +1,56 @@
 "use client";
 
-// src/components/alert.tsx
+// src/components/accordion.tsx
+import { useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
+function Accordion({
+  items,
+  type = "single",
+  defaultOpen = [],
+  className = ""
+}) {
+  const [openIds, setOpenIds] = 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__ */ 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__ */ jsxs("div", { className: "transition duration-150", children: [
+      /* @__PURE__ */ 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__ */ jsx("span", { children: item.title }),
+            /* @__PURE__ */ 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__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M19 9l-7 7-7-7" })
+              }
+            )
+          ]
+        }
+      ),
+      isOpen && /* @__PURE__ */ 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
+import { jsx as jsx2, jsxs as jsxs2 } from "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",
@@ -9,29 +58,29 @@ var variantClasses = {
   danger: "border-rose-500/40 bg-rose-500/10 text-rose-50"
 };
 function Alert({ title, variant = "info", className = "", children, ...props }) {
-  return /* @__PURE__ */ jsxs(
+  return /* @__PURE__ */ jsxs2(
     "div",
     {
       ...props,
       className: ["rounded-2xl border p-4 text-sm", variantClasses[variant], className].join(" "),
       role: "alert",
       children: [
-        title ? /* @__PURE__ */ jsx("p", { className: "mb-1 font-medium", children: title }) : null,
-        /* @__PURE__ */ jsx("div", { children })
+        title ? /* @__PURE__ */ jsx2("p", { className: "mb-1 font-medium", children: title }) : null,
+        /* @__PURE__ */ jsx2("div", { children })
       ]
     }
   );
 }
 
 // src/components/avatar.tsx
-import { jsx as jsx2 } from "react/jsx-runtime";
+import { jsx as jsx3 } from "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__ */ jsx2(
+  return src ? /* @__PURE__ */ jsx3(
     "img",
     {
       ...props,
@@ -39,7 +88,7 @@ function Avatar({ src, alt = "avatar", fallback = "SV", size = "md", className =
       alt,
       className: ["rounded-full object-cover ring-1 ring-white/10", sizeClasses[size], className].join(" ")
     }
-  ) : /* @__PURE__ */ jsx2(
+  ) : /* @__PURE__ */ jsx3(
     "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(" "),
@@ -49,14 +98,14 @@ function Avatar({ src, alt = "avatar", fallback = "SV", size = "md", className =
 }
 
 // src/components/badge.tsx
-import { jsx as jsx3 } from "react/jsx-runtime";
+import { jsx as jsx4 } from "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__ */ jsx3(
+  return /* @__PURE__ */ jsx4(
     "span",
     {
       ...props,
@@ -66,7 +115,7 @@ function Badge({ variant = "primary", className = "", ...props }) {
 }
 
 // src/components/button.tsx
-import { jsx as jsx4 } from "react/jsx-runtime";
+import { jsx as jsx5 } from "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",
@@ -88,16 +137,16 @@ function Button(props) {
   ].join(" ");
   if (as === "a") {
     const { href, ...anchorProps } = rest;
-    return /* @__PURE__ */ jsx4("a", { ...anchorProps, href, className: commonClassName });
+    return /* @__PURE__ */ jsx5("a", { ...anchorProps, href, className: commonClassName });
   }
   const { type = "button", ...buttonProps } = rest;
-  return /* @__PURE__ */ jsx4("button", { ...buttonProps, type, className: commonClassName });
+  return /* @__PURE__ */ jsx5("button", { ...buttonProps, type, className: commonClassName });
 }
 
 // src/components/card.tsx
-import { jsx as jsx5 } from "react/jsx-runtime";
+import { jsx as jsx6 } from "react/jsx-runtime";
 function Card({ as: Component = "div", className = "", ...props }) {
-  return /* @__PURE__ */ jsx5(
+  return /* @__PURE__ */ jsx6(
     Component,
     {
       ...props,
@@ -110,9 +159,9 @@ function Card({ as: Component = "div", className = "", ...props }) {
 }
 
 // src/components/checkbox.tsx
-import { jsx as jsx6 } from "react/jsx-runtime";
+import { jsx as jsx7 } from "react/jsx-runtime";
 function Checkbox({ className = "", ...props }) {
-  return /* @__PURE__ */ jsx6(
+  return /* @__PURE__ */ jsx7(
     "input",
     {
       ...props,
@@ -122,10 +171,217 @@ function Checkbox({ className = "", ...props }) {
   );
 }
 
+// src/components/dialog.tsx
+import { useEffect, useRef } from "react";
+import { jsx as jsx8, jsxs as jsxs3 } from "react/jsx-runtime";
+function Dialog({ open, onOpenChange, children, className = "" }) {
+  const dialogRef = useRef(null);
+  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__ */ jsx8(
+    "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__ */ jsxs3(
+        "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__ */ jsx8(
+              "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__ */ jsx8("svg", { className: "h-4 w-4", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: /* @__PURE__ */ jsx8("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M6 18L18 6M6 6l12 12" }) })
+              }
+            ),
+            children
+          ]
+        }
+      )
+    }
+  );
+}
+function DialogHeader({ children, className = "" }) {
+  return /* @__PURE__ */ jsx8("div", { className: ["mb-4 space-y-1.5", className].join(" "), children });
+}
+function DialogTitle({ children, className = "" }) {
+  return /* @__PURE__ */ jsx8("h2", { className: ["text-xl font-bold tracking-tight text-white", className].join(" "), children });
+}
+function DialogDescription({ children, className = "" }) {
+  return /* @__PURE__ */ jsx8("p", { className: ["text-sm text-slate-300 leading-relaxed", className].join(" "), children });
+}
+function DialogFooter({ children, className = "" }) {
+  return /* @__PURE__ */ jsx8("div", { className: ["mt-6 flex flex-wrap items-center justify-end gap-3", className].join(" "), children });
+}
+
+// src/components/drawer.tsx
+import { useEffect as useEffect2 } from "react";
+import { jsx as jsx9, jsxs as jsxs4 } from "react/jsx-runtime";
+function Drawer({
+  open,
+  onOpenChange,
+  position = "right",
+  children,
+  className = ""
+}) {
+  useEffect2(() => {
+    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__ */ jsx9(
+    "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__ */ jsxs4(
+        "div",
+        {
+          className: [
+            "fixed bg-slate-900/95 p-6 shadow-2xl text-white overflow-y-auto",
+            positionClasses[position],
+            className
+          ].join(" "),
+          children: [
+            /* @__PURE__ */ jsx9(
+              "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__ */ jsx9("svg", { className: "h-4 w-4", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: /* @__PURE__ */ jsx9("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M6 18L18 6M6 6l12 12" }) })
+              }
+            ),
+            children
+          ]
+        }
+      )
+    }
+  );
+}
+function DrawerHeader({ children, className = "" }) {
+  return /* @__PURE__ */ jsx9("div", { className: ["mb-6 space-y-1.5", className].join(" "), children });
+}
+function DrawerTitle({ children, className = "" }) {
+  return /* @__PURE__ */ jsx9("h2", { className: ["text-xl font-bold tracking-tight text-white", className].join(" "), children });
+}
+
+// src/components/dropdown-menu.tsx
+import { useState as useState2, useRef as useRef2, useEffect as useEffect3 } from "react";
+import { jsx as jsx10, jsxs as jsxs5 } from "react/jsx-runtime";
+function DropdownMenu({
+  trigger,
+  items,
+  align = "right",
+  className = ""
+}) {
+  const [open, setOpen] = useState2(false);
+  const menuRef = useRef2(null);
+  useEffect3(() => {
+    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__ */ jsxs5("div", { ref: menuRef, className: "relative inline-block text-left", children: [
+    /* @__PURE__ */ jsx10("div", { onClick: () => setOpen(!open), className: "cursor-pointer", children: trigger }),
+    open && /* @__PURE__ */ jsx10(
+      "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__ */ jsxs5(
+          "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__ */ jsx10("span", { className: "h-4 w-4 shrink-0", children: item.icon }),
+              /* @__PURE__ */ jsx10("span", { className: "flex-1", children: item.label })
+            ]
+          },
+          item.id
+        ))
+      }
+    )
+  ] });
+}
+
 // src/components/input.tsx
-import { jsx as jsx7 } from "react/jsx-runtime";
+import { jsx as jsx11 } from "react/jsx-runtime";
 function Input({ className = "", ...props }) {
-  return /* @__PURE__ */ jsx7(
+  return /* @__PURE__ */ jsx11(
     "input",
     {
       ...props,
@@ -137,10 +393,58 @@ function Input({ className = "", ...props }) {
   );
 }
 
+// src/components/progress.tsx
+import { jsx as jsx12, jsxs as jsxs6 } from "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__ */ jsxs6("div", { className: ["w-full space-y-1.5", className].join(" "), ...props, children: [
+    showLabel && /* @__PURE__ */ jsxs6("div", { className: "flex justify-between text-xs font-semibold text-slate-300", children: [
+      /* @__PURE__ */ jsx12("span", { children: "Progress" }),
+      /* @__PURE__ */ jsxs6("span", { className: "font-mono", children: [
+        Math.round(percentage),
+        "%"
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx12(
+      "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__ */ jsx12(
+          "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
-import { jsx as jsx8 } from "react/jsx-runtime";
+import { jsx as jsx13 } from "react/jsx-runtime";
 function Select({ className = "", children, ...props }) {
-  return /* @__PURE__ */ jsx8(
+  return /* @__PURE__ */ jsx13(
     "select",
     {
       ...props,
@@ -154,7 +458,7 @@ function Select({ className = "", children, ...props }) {
 }
 
 // src/components/skeleton.tsx
-import { jsx as jsx9 } from "react/jsx-runtime";
+import { jsx as jsx14 } from "react/jsx-runtime";
 var roundedClasses = {
   sm: "rounded-md",
   md: "rounded-xl",
@@ -162,7 +466,7 @@ var roundedClasses = {
   full: "rounded-full"
 };
 function Skeleton({ className = "", rounded = "md", ...props }) {
-  return /* @__PURE__ */ jsx9(
+  return /* @__PURE__ */ jsx14(
     "div",
     {
       ...props,
@@ -172,15 +476,54 @@ function Skeleton({ className = "", rounded = "md", ...props }) {
   );
 }
 
+// src/components/switch.tsx
+import { jsx as jsx15 } from "react/jsx-runtime";
+function Switch({
+  checked,
+  defaultChecked = false,
+  onCheckedChange,
+  disabled = false,
+  className = "",
+  id,
+  "aria-label": ariaLabel
+}) {
+  return /* @__PURE__ */ jsx15(
+    "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__ */ jsx15(
+        "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
-import { useState } from "react";
-import { jsx as jsx10, jsxs as jsxs2 } from "react/jsx-runtime";
+import { useState as useState3 } from "react";
+import { jsx as jsx16, jsxs as jsxs7 } from "react/jsx-runtime";
 function Tabs({ items, defaultTab, className = "" }) {
   const initialTab = defaultTab ?? items[0]?.id ?? "";
-  const [activeTab, setActiveTab] = useState(initialTab);
+  const [activeTab, setActiveTab] = useState3(initialTab);
   const activeItem = items.find((item) => item.id === activeTab) ?? items[0];
-  return /* @__PURE__ */ jsxs2("div", { className, children: [
-    /* @__PURE__ */ jsx10("div", { className: "mb-4 flex flex-wrap gap-2", children: items.map((item) => /* @__PURE__ */ jsx10(
+  return /* @__PURE__ */ jsxs7("div", { className, children: [
+    /* @__PURE__ */ jsx16("div", { className: "mb-4 flex flex-wrap gap-2", children: items.map((item) => /* @__PURE__ */ jsx16(
       "button",
       {
         type: "button",
@@ -193,14 +536,14 @@ function Tabs({ items, defaultTab, className = "" }) {
       },
       item.id
     )) }),
-    /* @__PURE__ */ jsx10("div", { className: "rounded-2xl border border-white/10 bg-slate-950/60 p-4 text-sm text-slate-200", children: activeItem?.content })
+    /* @__PURE__ */ jsx16("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
-import { jsx as jsx11 } from "react/jsx-runtime";
+import { jsx as jsx17 } from "react/jsx-runtime";
 function Textarea({ className = "", ...props }) {
-  return /* @__PURE__ */ jsx11(
+  return /* @__PURE__ */ jsx17(
     "textarea",
     {
       ...props,
@@ -212,6 +555,130 @@ function Textarea({ className = "", ...props }) {
   );
 }
 
+// src/components/toast.tsx
+import { useState as useState4, useEffect as useEffect4 } from "react";
+import { jsx as jsx18, jsxs as jsxs8 } from "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] = useState4([]);
+  useEffect4(() => {
+    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__ */ jsx18("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__ */ jsxs8(
+    "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__ */ jsxs8("div", { className: "space-y-1", children: [
+          t.title && /* @__PURE__ */ jsx18("p", { className: "font-semibold text-xs tracking-wide uppercase text-white", children: t.title }),
+          /* @__PURE__ */ jsx18("p", { className: "text-sm font-medium", children: t.message })
+        ] }),
+        /* @__PURE__ */ jsx18(
+          "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
+import { useState as useState5 } from "react";
+import { jsx as jsx19, jsxs as jsxs9 } from "react/jsx-runtime";
+function Tooltip({
+  content,
+  children,
+  side = "top",
+  className = ""
+}) {
+  const [isVisible, setIsVisible] = useState5(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__ */ jsxs9(
+    "div",
+    {
+      className: "relative inline-flex",
+      onMouseEnter: () => setIsVisible(true),
+      onMouseLeave: () => setIsVisible(false),
+      onFocus: () => setIsVisible(true),
+      onBlur: () => setIsVisible(false),
+      children: [
+        children,
+        isVisible && /* @__PURE__ */ jsx19(
+          "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: {
@@ -229,17 +696,32 @@ var themeTokens = {
 };
 var cx = (...classes) => classes.filter(Boolean).join(" ");
 export {
+  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
 };