@stackvibe-studio/ui 0.3.0 → 0.3.1

package/dist/index.cjs

@@ -55,11 +55,20 @@ module.exports = __toCommonJS(index_exports);
 // src/components/accordion.tsx
 var import_react = require("react");
 var import_jsx_runtime = require("react/jsx-runtime");
+var radiusClasses = {
+  sm: "rounded-lg",
+  md: "rounded-xl",
+  lg: "rounded-2xl",
+  xl: "rounded-3xl"
+};
 function Accordion({
   items,
   type = "single",
+  variant = "bordered",
+  radius = "lg",
   defaultOpen = [],
-  className = ""
+  className = "",
+  customIcon
 }) {
   const [openIds, setOpenIds] = (0, import_react.useState)(defaultOpen);
   const toggle = (id) => {
@@ -71,54 +80,128 @@ function Accordion({
       );
     }
   };
-  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);
-  }) });
+  const isSeparated = variant === "separated";
+  const isGhost = variant === "ghost";
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    "div",
+    {
+      className: [
+        isSeparated ? "space-y-3" : isGhost ? "divide-y divide-white/10" : "divide-y divide-white/10 border border-white/10 bg-slate-900/60 overflow-hidden shadow-lg backdrop-blur-md",
+        !isSeparated && !isGhost ? radiusClasses[radius] : "",
+        className
+      ].filter(Boolean).join(" "),
+      children: items.map((item) => {
+        const isOpen = openIds.includes(item.id);
+        return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+          "div",
+          {
+            className: [
+              "transition duration-200",
+              isSeparated ? ["border border-white/10 bg-slate-900/60 overflow-hidden shadow-md backdrop-blur-sm", radiusClasses[radius]].join(" ") : ""
+            ].filter(Boolean).join(" "),
+            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 select-none",
+                  "aria-expanded": isOpen,
+                  children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex items-center gap-3", children: [
+                      item.icon && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "text-[var(--primary,#8b5cf6)] shrink-0", children: item.icon }),
+                      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "text-sm font-semibold", children: item.title })
+                    ] }),
+                    customIcon ? customIcon(isOpen) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                      "svg",
+                      {
+                        className: `h-4 w-4 transform text-slate-400 transition-transform duration-200 ${isOpen ? "rotate-180 text-[var(--primary,#8b5cf6)]" : ""}`,
+                        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: "border-t border-white/5 px-5 pb-5 pt-3 text-xs leading-relaxed text-slate-300", children: item.content })
+            ]
+          },
+          item.id
+        );
+      })
+    }
+  );
 }
 
 // src/components/alert.tsx
+var import_react2 = require("react");
 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"
+  info: "border-cyan-500/30 bg-cyan-500/10 text-cyan-100",
+  success: "border-emerald-500/30 bg-emerald-500/10 text-emerald-100",
+  warning: "border-amber-500/30 bg-amber-500/10 text-amber-100",
+  destructive: "border-rose-500/30 bg-rose-500/10 text-rose-100",
+  primary: "border-[var(--primary,#8b5cf6)]/30 bg-[var(--primary,#8b5cf6)]/10 text-slate-100"
 };
-function Alert({ title, variant = "info", className = "", children, ...props }) {
+var defaultIcons = {
+  info: "\u2139",
+  success: "\u2713",
+  warning: "\u26A0",
+  destructive: "\u2715",
+  primary: "\u26A1"
+};
+var radiusClasses2 = {
+  sm: "rounded-lg",
+  md: "rounded-xl",
+  lg: "rounded-2xl",
+  xl: "rounded-3xl"
+};
+function Alert({
+  title,
+  variant = "info",
+  radius = "lg",
+  icon,
+  dismissible = false,
+  onDismiss,
+  className = "",
+  children,
+  ...props
+}) {
+  const [visible, setVisible] = (0, import_react2.useState)(true);
+  if (!visible) return null;
+  const handleDismiss = () => {
+    setVisible(false);
+    onDismiss?.();
+  };
   return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
     "div",
     {
       ...props,
-      className: ["rounded-2xl border p-4 text-sm", variantClasses[variant], className].join(" "),
       role: "alert",
+      className: [
+        "relative flex items-start gap-3 border p-4 text-sm shadow-md backdrop-blur-sm transition-all duration-200",
+        variantClasses[variant],
+        radiusClasses2[radius],
+        className
+      ].filter(Boolean).join(" "),
       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 })
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "flex h-5 w-5 shrink-0 items-center justify-center font-bold", children: icon || defaultIcons[variant] }),
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "flex-1", children: [
+          title && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("p", { className: "mb-1 font-bold tracking-tight", children: title }),
+          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "leading-relaxed opacity-90", children })
+        ] }),
+        dismissible && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+          "button",
+          {
+            type: "button",
+            onClick: handleDismiss,
+            "aria-label": "Dismiss alert",
+            className: "shrink-0 rounded-lg p-1 text-current opacity-60 hover:opacity-100 hover:bg-white/10 transition cursor-pointer",
+            children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("svg", { className: "h-4 w-4", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M6 18L18 6M6 6l12 12" }) })
+          }
+        )
       ]
     }
   );
@@ -127,41 +210,134 @@ function Alert({ title, variant = "info", className = "", children, ...props })
 // 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"
+  xs: "h-6 w-6 text-[10px]",
+  sm: "h-8 w-8 text-xs",
+  md: "h-11 w-11 text-sm",
+  lg: "h-14 w-14 text-base",
+  xl: "h-18 w-18 text-lg",
+  "2xl": "h-24 w-24 text-xl"
+};
+var shapeClasses = {
+  circle: "rounded-full",
+  rounded: "rounded-2xl",
+  square: "rounded-lg"
+};
+var statusColors = {
+  online: "bg-emerald-500",
+  offline: "bg-slate-500",
+  busy: "bg-rose-500",
+  away: "bg-amber-500"
 };
-function Avatar({ src, alt = "avatar", fallback = "SV", size = "md", className = "", ...props }) {
-  return src ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+function Avatar({
+  src,
+  alt = "avatar",
+  fallback = "SV",
+  size = "md",
+  shape = "circle",
+  status,
+  className = "",
+  ...props
+}) {
+  const commonShape = shapeClasses[shape];
+  const content = 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(" ")
+      className: ["object-cover ring-1 ring-white/10 shadow-md", sizeClasses[size], commonShape, 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(" "),
+      className: [
+        "flex items-center justify-center bg-[var(--primary,#8b5cf6)]/20 font-bold text-[var(--primary,#c084fc)] ring-1 ring-[var(--primary,#8b5cf6)]/30 shadow-md",
+        sizeClasses[size],
+        commonShape,
+        className
+      ].join(" "),
       children: fallback
     }
   );
+  if (!status) return content;
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "relative inline-block", children: [
+    content,
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+      "span",
+      {
+        className: [
+          "absolute bottom-0 right-0 h-3 w-3 rounded-full ring-2 ring-slate-950",
+          statusColors[status]
+        ].join(" ")
+      }
+    )
+  ] });
 }
 
 // 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"
+  primary: "bg-[var(--primary,#8b5cf6)]/20 text-[var(--primary,#c084fc)] ring-1 ring-[var(--primary,#8b5cf6)]/30",
+  secondary: "bg-[var(--secondary,#22d3ee)]/20 text-[var(--secondary,#22d3ee)] ring-1 ring-[var(--secondary,#22d3ee)]/30",
+  outline: "bg-transparent text-slate-200 ring-1 ring-white/15",
+  destructive: "bg-rose-500/15 text-rose-300 ring-1 ring-rose-500/30",
+  success: "bg-emerald-500/15 text-emerald-300 ring-1 ring-emerald-500/30",
+  warning: "bg-amber-500/15 text-amber-300 ring-1 ring-amber-500/30",
+  glass: "bg-white/10 text-white backdrop-blur-md ring-1 ring-white/20"
+};
+var dotColors = {
+  primary: "bg-[var(--primary,#8b5cf6)]",
+  secondary: "bg-[var(--secondary,#22d3ee)]",
+  outline: "bg-slate-400",
+  destructive: "bg-rose-400",
+  success: "bg-emerald-400",
+  warning: "bg-amber-400",
+  glass: "bg-white"
+};
+var sizes = {
+  sm: "px-2 py-0.5 text-[10px] gap-1",
+  md: "px-2.5 py-1 text-xs gap-1.5",
+  lg: "px-3 py-1.5 text-sm gap-2"
 };
-function Badge({ variant = "primary", className = "", ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+var radiuses = {
+  sm: "rounded-md",
+  md: "rounded-lg",
+  lg: "rounded-xl",
+  full: "rounded-full"
+};
+function Badge({
+  variant = "primary",
+  size = "md",
+  radius = "full",
+  dot = false,
+  leftIcon,
+  rightIcon,
+  children,
+  className = "",
+  ...props
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
     "span",
     {
       ...props,
-      className: ["inline-flex items-center rounded-full px-2.5 py-1 text-xs font-medium", variants[variant], className].join(" ")
+      className: [
+        "inline-flex items-center font-medium select-none",
+        variants[variant],
+        sizes[size],
+        radiuses[radius],
+        className
+      ].filter(Boolean).join(" "),
+      children: [
+        dot && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+          "span",
+          {
+            className: ["h-1.5 w-1.5 rounded-full shrink-0 animate-pulse", dotColors[variant]].join(" ")
+          }
+        ),
+        leftIcon && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "shrink-0", children: leftIcon }),
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { children }),
+        rightIcon && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "shrink-0", children: rightIcon })
+      ]
     }
   );
 }
@@ -169,43 +345,137 @@ function Badge({ variant = "primary", className = "", ...props }) {
 // src/components/button.tsx
 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"
+  primary: "bg-[var(--primary,#8b5cf6)] text-white hover:brightness-110 shadow-lg shadow-[var(--glow,rgba(139,92,246,0.3))]",
+  secondary: "bg-[var(--secondary,#22d3ee)] text-slate-950 hover:brightness-110 shadow-md shadow-[var(--secondary,#22d3ee)]/20",
+  ghost: "bg-white/5 text-white hover:bg-white/10 hover:text-white",
+  outline: "border border-[var(--primary,#8b5cf6)]/40 bg-transparent text-white hover:bg-[var(--primary,#8b5cf6)]/10",
+  destructive: "bg-rose-600 text-white hover:bg-rose-500 shadow-md shadow-rose-600/30",
+  glass: "border border-white/15 bg-white/10 text-white backdrop-blur-md hover:bg-white/20 shadow-lg",
+  gradient: "bg-gradient-to-r from-[var(--primary,#8b5cf6)] via-[var(--accent,#c084fc)] to-[var(--secondary,#22d3ee)] text-white shadow-xl hover:brightness-110"
 };
 var sizeClasses2 = {
-  sm: "px-3 py-1.5 text-sm",
-  md: "px-4 py-2 text-sm",
-  lg: "px-5 py-3 text-base"
+  xs: "px-2.5 py-1 text-xs gap-1",
+  sm: "px-3 py-1.5 text-xs font-medium gap-1.5",
+  md: "px-4 py-2 text-sm font-medium gap-2",
+  lg: "px-5 py-2.5 text-base font-semibold gap-2.5",
+  xl: "px-6 py-3.5 text-lg font-bold gap-3"
+};
+var radiusClasses3 = {
+  none: "rounded-none",
+  sm: "rounded-md",
+  md: "rounded-xl",
+  lg: "rounded-2xl",
+  xl: "rounded-3xl",
+  full: "rounded-full"
 };
 function Button(props) {
-  const { as = "button", variant = "primary", size = "md", className = "", ...rest } = props;
+  const {
+    as = "button",
+    variant = "primary",
+    size = "md",
+    radius = "md",
+    fullWidth = false,
+    loading = false,
+    loadingText,
+    leftIcon,
+    rightIcon,
+    children,
+    className = "",
+    disabled,
+    ...rest
+  } = props;
+  const isDisabled = disabled || loading;
   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",
+    "inline-flex items-center justify-center font-medium transition-all duration-200 cursor-pointer select-none focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--primary,#8b5cf6)] disabled:opacity-50 disabled:cursor-not-allowed disabled:pointer-events-none",
     variantClasses2[variant],
     sizeClasses2[size],
+    radiusClasses3[radius],
+    fullWidth ? "w-full" : "",
     className
-  ].join(" ");
+  ].filter(Boolean).join(" ");
+  const content = /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_jsx_runtime5.Fragment, { children: [
+    loading && /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+      "svg",
+      {
+        className: "animate-spin h-4 w-4 shrink-0 text-current",
+        xmlns: "http://www.w3.org/2000/svg",
+        fill: "none",
+        viewBox: "0 0 24 24",
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("circle", { className: "opacity-25", cx: "12", cy: "12", r: "10", stroke: "currentColor", strokeWidth: "4" }),
+          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+            "path",
+            {
+              className: "opacity-75",
+              fill: "currentColor",
+              d: "M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
+            }
+          )
+        ]
+      }
+    ),
+    !loading && leftIcon && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "shrink-0", children: leftIcon }),
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { children: loading && loadingText ? loadingText : children }),
+    !loading && rightIcon && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "shrink-0", children: rightIcon })
+  ] });
   if (as === "a") {
     const { href, ...anchorProps } = rest;
-    return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("a", { ...anchorProps, href, className: commonClassName });
+    return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("a", { ...anchorProps, href, className: commonClassName, children: content });
   }
-  const { type = "button", ...buttonProps } = rest;
-  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("button", { ...buttonProps, type, className: commonClassName });
+  const buttonProps = rest;
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("button", { ...buttonProps, disabled: isDisabled, className: commonClassName, children: content });
 }
 
 // src/components/card.tsx
 var import_jsx_runtime6 = require("react/jsx-runtime");
-function Card({ as: Component = "div", className = "", ...props }) {
+var variantStyles = {
+  default: "border border-white/10 bg-[var(--surface,rgba(15,23,42,0.6))] backdrop-blur-md shadow-lg shadow-black/20",
+  glass: "border border-white/15 bg-white/5 backdrop-blur-xl shadow-2xl",
+  gradient: "border border-white/10 bg-gradient-to-br from-[var(--surface,rgba(15,23,42,0.8))] to-[var(--background,rgba(2,6,23,0.9))] shadow-xl",
+  bordered: "border-2 border-[var(--primary,#8b5cf6)]/30 bg-[var(--surface,rgba(15,23,42,0.5))] shadow-md",
+  interactive: "border border-white/10 bg-[var(--surface,rgba(15,23,42,0.6))] backdrop-blur-md shadow-lg transition-all duration-300 hover:-translate-y-1 hover:border-white/20 hover:shadow-2xl cursor-pointer",
+  elevated: "border border-white/10 bg-slate-900/90 shadow-2xl shadow-black/40"
+};
+var radiusStyles = {
+  none: "rounded-none",
+  sm: "rounded-lg",
+  md: "rounded-xl",
+  lg: "rounded-2xl",
+  xl: "rounded-3xl",
+  "2xl": "rounded-[2rem]",
+  "3xl": "rounded-[2.5rem]"
+};
+var paddingStyles = {
+  none: "p-0",
+  sm: "p-3",
+  md: "p-5",
+  lg: "p-7",
+  xl: "p-10"
+};
+function Card({
+  as: Component = "div",
+  variant = "default",
+  radius = "lg",
+  padding = "md",
+  glow = false,
+  className = "",
+  style,
+  ...props
+}) {
   return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
     Component,
     {
       ...props,
+      style: {
+        ...glow ? { boxShadow: "0 0 30px var(--glow, rgba(139, 92, 246, 0.25))" } : {},
+        ...style
+      },
       className: [
-        "rounded-2xl border border-white/10 bg-slate-950/50 p-4 shadow-lg shadow-slate-950/20 backdrop-blur-sm",
+        variantStyles[variant],
+        radiusStyles[radius],
+        paddingStyles[padding],
         className
-      ].join(" ")
+      ].filter(Boolean).join(" ")
     }
   );
 }
@@ -224,11 +494,16 @@ function Checkbox({ className = "", ...props }) {
 }
 
 // src/components/dialog.tsx
-var import_react2 = require("react");
+var import_react3 = require("react");
+var import_react_dom = require("react-dom");
 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 dialogRef = (0, import_react3.useRef)(null);
+  const [mounted, setMounted] = (0, import_react3.useState)(false);
+  (0, import_react3.useEffect)(() => {
+    setMounted(true);
+  }, []);
+  (0, import_react3.useEffect)(() => {
     const handleKeyDown = (e) => {
       if (e.key === "Escape" && open) {
         onOpenChange(false);
@@ -245,13 +520,13 @@ function Dialog({ open, onOpenChange, children, className = "" }) {
       window.removeEventListener("keydown", handleKeyDown);
     };
   }, [open, onOpenChange]);
-  if (!open) return null;
-  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+  if (!open || !mounted) return null;
+  const content = /* @__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",
+      className: "fixed inset-0 z-[9999] flex items-center justify-center p-4 bg-black/80 backdrop-blur-md transition-opacity duration-200",
       onClick: (e) => {
         if (e.target === e.currentTarget) onOpenChange(false);
       },
@@ -260,7 +535,7 @@ function Dialog({ open, onOpenChange, children, className = "" }) {
         {
           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",
+            "relative w-full max-w-lg rounded-3xl border border-white/10 bg-slate-900/95 p-6 shadow-2xl text-white backdrop-blur-xl transition-transform duration-200",
             className
           ].join(" "),
           children: [
@@ -280,6 +555,7 @@ function Dialog({ open, onOpenChange, children, className = "" }) {
       )
     }
   );
+  return typeof document !== "undefined" ? (0, import_react_dom.createPortal)(content, document.body) : null;
 }
 function DialogHeader({ children, className = "" }) {
   return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: ["mb-4 space-y-1.5", className].join(" "), children });
@@ -295,7 +571,8 @@ function DialogFooter({ children, className = "" }) {
 }
 
 // src/components/drawer.tsx
-var import_react3 = require("react");
+var import_react4 = require("react");
+var import_react_dom2 = require("react-dom");
 var import_jsx_runtime9 = require("react/jsx-runtime");
 function Drawer({
   open,
@@ -304,7 +581,11 @@ function Drawer({
   children,
   className = ""
 }) {
-  (0, import_react3.useEffect)(() => {
+  const [mounted, setMounted] = (0, import_react4.useState)(false);
+  (0, import_react4.useEffect)(() => {
+    setMounted(true);
+  }, []);
+  (0, import_react4.useEffect)(() => {
     const handleKeyDown = (e) => {
       if (e.key === "Escape" && open) onOpenChange(false);
     };
@@ -319,18 +600,18 @@ function Drawer({
       window.removeEventListener("keydown", handleKeyDown);
     };
   }, [open, onOpenChange]);
-  if (!open) return null;
+  if (!open || !mounted) 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"
+    right: "inset-y-0 right-0 w-full max-w-md border-l border-white/10 shadow-2xl",
+    left: "inset-y-0 left-0 w-full max-w-md border-r border-white/10 shadow-2xl",
+    bottom: "inset-x-0 bottom-0 max-h-[85vh] w-full border-t border-white/10 rounded-t-3xl shadow-2xl"
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+  const content = /* @__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",
+      className: "fixed inset-0 z-[9999] bg-black/80 backdrop-blur-sm transition-opacity duration-200",
       onClick: (e) => {
         if (e.target === e.currentTarget) onOpenChange(false);
       },
@@ -338,7 +619,7 @@ function Drawer({
         "div",
         {
           className: [
-            "fixed bg-slate-900/95 p-6 shadow-2xl text-white overflow-y-auto",
+            "fixed z-[10000] bg-slate-900/95 p-6 text-white backdrop-blur-xl overflow-y-auto transition-transform duration-300",
             positionClasses[position],
             className
           ].join(" "),
@@ -359,16 +640,17 @@ function Drawer({
       )
     }
   );
+  return typeof document !== "undefined" ? (0, import_react_dom2.createPortal)(content, document.body) : null;
 }
 function DrawerHeader({ children, className = "" }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: ["mb-6 space-y-1.5", className].join(" "), children });
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: ["mb-4 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_react5 = require("react");
 var import_jsx_runtime10 = require("react/jsx-runtime");
 function DropdownMenu({
   trigger,
@@ -376,9 +658,9 @@ function DropdownMenu({
   align = "right",
   className = ""
 }) {
-  const [open, setOpen] = (0, import_react4.useState)(false);
-  const menuRef = (0, import_react4.useRef)(null);
-  (0, import_react4.useEffect)(() => {
+  const [open, setOpen] = (0, import_react5.useState)(false);
+  const menuRef = (0, import_react5.useRef)(null);
+  (0, import_react5.useEffect)(() => {
     const handleClickOutside = (e) => {
       if (menuRef.current && !menuRef.current.contains(e.target)) {
         setOpen(false);
@@ -398,7 +680,7 @@ function DropdownMenu({
       {
         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",
+          "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 transition-all duration-150",
           align === "right" ? "right-0" : "left-0",
           className
         ].join(" "),
@@ -432,39 +714,97 @@ function DropdownMenu({
 
 // src/components/input.tsx
 var import_jsx_runtime11 = require("react/jsx-runtime");
-function Input({ className = "", ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+var variantStyles2 = {
+  default: "border border-white/10 bg-slate-900/80 text-white placeholder:text-slate-500 focus:border-[var(--primary,#8b5cf6)] focus:ring-2 focus:ring-[var(--primary,#8b5cf6)]/25",
+  filled: "border border-transparent bg-white/5 text-white placeholder:text-slate-500 hover:bg-white/10 focus:bg-slate-900 focus:border-[var(--primary,#8b5cf6)] focus:ring-2 focus:ring-[var(--primary,#8b5cf6)]/25",
+  flushed: "border-0 border-b-2 border-white/15 bg-transparent rounded-none px-0 text-white placeholder:text-slate-500 focus:border-[var(--primary,#8b5cf6)] focus:ring-0"
+};
+var sizeStyles = {
+  sm: "px-3 py-1.5 text-xs",
+  md: "px-3.5 py-2 text-sm",
+  lg: "px-4 py-3 text-base"
+};
+var radiusStyles2 = {
+  none: "rounded-none",
+  sm: "rounded-lg",
+  md: "rounded-xl",
+  lg: "rounded-2xl",
+  full: "rounded-full"
+};
+function Input({
+  variant = "default",
+  size = "md",
+  radius = "md",
+  leftElement,
+  rightElement,
+  error,
+  fullWidth = true,
+  className = "",
+  disabled,
+  ...props
+}) {
+  const isFlushed = variant === "flushed";
+  const inputElement = /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
     "input",
     {
       ...props,
+      disabled,
       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",
+        "w-full transition-all duration-200 outline-none disabled:opacity-50 disabled:cursor-not-allowed",
+        variantStyles2[variant],
+        sizeStyles[size],
+        !isFlushed ? radiusStyles2[radius] : "",
+        leftElement ? "pl-9" : "",
+        rightElement ? "pr-9" : "",
+        error ? "!border-rose-500 !ring-rose-500/30" : "",
         className
-      ].join(" ")
+      ].filter(Boolean).join(" ")
     }
   );
+  if (!leftElement && !rightElement && !error) {
+    return inputElement;
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: ["relative", fullWidth ? "w-full" : "inline-block"].join(" "), children: [
+    leftElement && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: "absolute left-3 top-1/2 -translate-y-1/2 text-slate-400 pointer-events-none flex items-center justify-center", children: leftElement }),
+    inputElement,
+    rightElement && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: "absolute right-3 top-1/2 -translate-y-1/2 text-slate-400 flex items-center justify-center", children: rightElement }),
+    typeof error === "string" && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("p", { className: "mt-1 text-xs text-rose-400", children: error })
+  ] });
 }
 
 // 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",
+  primary: "from-[var(--primary,#8b5cf6)] to-[var(--accent,#c084fc)]",
+  secondary: "from-[var(--secondary,#22d3ee)] to-blue-500",
   success: "from-emerald-500 to-teal-400",
-  warning: "from-amber-500 to-orange-400"
+  warning: "from-amber-500 to-orange-400",
+  destructive: "from-rose-500 to-red-600",
+  gradient: "from-[var(--primary,#8b5cf6)] via-[var(--secondary,#22d3ee)] to-emerald-400"
+};
+var sizeStyles2 = {
+  xs: "h-1",
+  sm: "h-1.5",
+  md: "h-2.5",
+  lg: "h-4",
+  xl: "h-6"
 };
 function Progress({
   value = 0,
   max = 100,
   variant = "primary",
+  size = "md",
+  striped = false,
+  animated = false,
   showLabel = false,
+  label = "Progress",
   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.jsx)("span", { children: label }),
       /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("span", { className: "font-mono", children: [
         Math.round(percentage),
         "%"
@@ -477,14 +817,19 @@ function Progress({
         "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",
+        className: [
+          "relative w-full overflow-hidden rounded-full bg-slate-800 ring-1 ring-white/10 shadow-inner",
+          sizeStyles2[size]
+        ].join(" "),
         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(" "),
+              variantGradients[variant],
+              striped ? "bg-[length:1rem_1rem] bg-[linear-gradient(45deg,rgba(255,255,255,0.15)_25%,transparent_25%,transparent_50%,rgba(255,255,255,0.15)_50%,rgba(255,255,255,0.15)_75%,transparent_75%,transparent)]" : "",
+              animated ? "animate-pulse" : ""
+            ].filter(Boolean).join(" "),
             style: { width: `${percentage}%` }
           }
         )
@@ -495,34 +840,86 @@ function Progress({
 
 // 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
-    }
-  );
+var variantStyles3 = {
+  default: "border border-white/10 bg-slate-900/80 text-white focus:border-[var(--primary,#8b5cf6)] focus:ring-2 focus:ring-[var(--primary,#8b5cf6)]/25",
+  filled: "border border-transparent bg-white/5 text-white hover:bg-white/10 focus:bg-slate-900 focus:border-[var(--primary,#8b5cf6)] focus:ring-2 focus:ring-[var(--primary,#8b5cf6)]/25"
+};
+var sizeStyles3 = {
+  sm: "px-3 py-1.5 text-xs",
+  md: "px-3.5 py-2 text-sm",
+  lg: "px-4 py-3 text-base"
+};
+var radiusStyles3 = {
+  none: "rounded-none",
+  sm: "rounded-lg",
+  md: "rounded-xl",
+  lg: "rounded-2xl",
+  full: "rounded-full"
+};
+function Select({
+  variant = "default",
+  size = "md",
+  radius = "md",
+  error,
+  icon,
+  className = "",
+  children,
+  disabled,
+  ...props
+}) {
+  const selectElement = /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: "relative w-full", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+      "select",
+      {
+        ...props,
+        disabled,
+        className: [
+          "w-full appearance-none transition-all duration-200 outline-none pr-9 cursor-pointer disabled:opacity-50 disabled:cursor-not-allowed",
+          variantStyles3[variant],
+          sizeStyles3[size],
+          radiusStyles3[radius],
+          error ? "!border-rose-500 !ring-rose-500/30" : "",
+          className
+        ].filter(Boolean).join(" "),
+        children
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: "absolute right-3 top-1/2 -translate-y-1/2 pointer-events-none text-slate-400", children: icon || /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("svg", { className: "h-4 w-4 fill-none stroke-current", viewBox: "0 0 24 24", children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M19 9l-7 7-7-7" }) }) })
+  ] });
+  if (!error) return selectElement;
+  return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: "w-full", children: [
+    selectElement,
+    typeof error === "string" && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("p", { className: "mt-1 text-xs text-rose-400", children: error })
+  ] });
 }
 
 // src/components/skeleton.tsx
 var import_jsx_runtime14 = require("react/jsx-runtime");
 var roundedClasses = {
+  none: "rounded-none",
   sm: "rounded-md",
   md: "rounded-xl",
   lg: "rounded-2xl",
+  xl: "rounded-3xl",
   full: "rounded-full"
 };
-function Skeleton({ className = "", rounded = "md", ...props }) {
+function Skeleton({
+  className = "",
+  rounded = "md",
+  animation = "pulse",
+  ...props
+}) {
   return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
     "div",
     {
       ...props,
-      className: ["animate-pulse bg-slate-700/70", roundedClasses[rounded], className].join(" "),
+      className: [
+        "bg-slate-800/80 ring-1 ring-white/5",
+        animation === "pulse" ? "animate-pulse" : "",
+        animation === "shimmer" ? "relative overflow-hidden before:absolute before:inset-0 before:-translate-x-full before:animate-[shimmer_2s_infinite] before:bg-gradient-to-r before:from-transparent before:via-white/10 before:to-transparent" : "",
+        roundedClasses[rounded],
+        className
+      ].filter(Boolean).join(" "),
       "aria-hidden": "true"
     }
   );
@@ -530,15 +927,35 @@ function Skeleton({ className = "", rounded = "md", ...props }) {
 
 // src/components/switch.tsx
 var import_jsx_runtime15 = require("react/jsx-runtime");
+var sizeTrackStyles = {
+  sm: "h-5 w-9",
+  md: "h-6 w-11",
+  lg: "h-7 w-14"
+};
+var sizeThumbStyles = {
+  sm: "h-4 w-4",
+  md: "h-5 w-5",
+  lg: "h-6 w-6"
+};
+var sizeTranslateStyles = {
+  sm: "translate-x-4",
+  md: "translate-x-5",
+  lg: "translate-x-7"
+};
 function Switch({
   checked,
   defaultChecked = false,
   onCheckedChange,
+  size = "md",
+  color,
+  checkedIcon,
+  uncheckedIcon,
   disabled = false,
   className = "",
   id,
   "aria-label": ariaLabel
 }) {
+  const isChecked = checked ?? defaultChecked;
   return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
     "button",
     {
@@ -546,21 +963,25 @@ function Switch({
       role: "switch",
       id,
       "aria-label": ariaLabel,
-      "aria-checked": checked ?? defaultChecked,
+      "aria-checked": isChecked,
       disabled,
-      onClick: () => onCheckedChange?.(!checked),
+      onClick: () => onCheckedChange?.(!isChecked),
+      style: isChecked ? { backgroundColor: color || "var(--primary, #8b5cf6)" } : void 0,
       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",
+        "relative inline-flex 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-[var(--primary,#8b5cf6)] focus-visible:ring-offset-2 focus-visible:ring-offset-slate-950 disabled:cursor-not-allowed disabled:opacity-50",
+        sizeTrackStyles[size],
+        isChecked ? "" : "bg-slate-800",
         className
-      ].join(" "),
+      ].filter(Boolean).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(" ")
+            "pointer-events-none flex items-center justify-center transform rounded-full bg-white shadow-lg ring-0 transition duration-200 ease-in-out text-slate-900",
+            sizeThumbStyles[size],
+            isChecked ? sizeTranslateStyles[size] : "translate-x-0"
+          ].join(" "),
+          children: isChecked ? checkedIcon : uncheckedIcon
         }
       )
     }
@@ -568,47 +989,149 @@ function Switch({
 }
 
 // src/components/tabs.tsx
-var import_react5 = require("react");
+var import_react6 = require("react");
 var import_jsx_runtime16 = require("react/jsx-runtime");
-function Tabs({ items, defaultTab, className = "" }) {
+var sizeStyles4 = {
+  sm: "px-3 py-1 text-xs gap-1.5",
+  md: "px-4 py-2 text-sm gap-2",
+  lg: "px-5 py-2.5 text-base gap-2.5"
+};
+function Tabs({
+  items,
+  defaultTab,
+  variant = "pills",
+  size = "md",
+  fullWidth = false,
+  className = ""
+}) {
   const initialTab = defaultTab ?? items[0]?.id ?? "";
-  const [activeTab, setActiveTab] = (0, import_react5.useState)(initialTab);
+  const [activeTab, setActiveTab] = (0, import_react6.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",
+  const getTabButtonClass = (isActive) => {
+    switch (variant) {
+      case "underline":
+        return [
+          "border-b-2 font-medium transition cursor-pointer flex items-center justify-center",
+          isActive ? "border-[var(--primary,#8b5cf6)] text-white font-bold" : "border-transparent text-slate-400 hover:text-white hover:border-white/20",
+          sizeStyles4[size],
+          fullWidth ? "flex-1" : ""
+        ].join(" ");
+      case "bordered":
+        return [
+          "rounded-xl border font-medium transition cursor-pointer flex items-center justify-center",
+          isActive ? "border-[var(--primary,#8b5cf6)] bg-[var(--primary,#8b5cf6)]/15 text-white shadow-md" : "border-white/10 bg-slate-900/40 text-slate-400 hover:bg-white/5 hover:text-white",
+          sizeStyles4[size],
+          fullWidth ? "flex-1" : ""
+        ].join(" ");
+      case "segmented":
+        return [
+          "rounded-xl font-medium transition cursor-pointer flex items-center justify-center",
+          isActive ? "bg-slate-900 text-white shadow-lg shadow-black/40 font-bold" : "text-slate-400 hover:text-white",
+          sizeStyles4[size],
+          fullWidth ? "flex-1" : ""
+        ].join(" ");
+      case "pills":
+      default:
+        return [
+          "rounded-full font-medium transition cursor-pointer flex items-center justify-center",
+          isActive ? "bg-[var(--primary,#8b5cf6)] text-white shadow-lg shadow-[var(--glow,rgba(139,92,246,0.25))] font-bold" : "bg-white/5 text-slate-300 hover:bg-white/10 hover:text-white",
+          sizeStyles4[size],
+          fullWidth ? "flex-1" : ""
+        ].join(" ");
+    }
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { className: ["w-full space-y-4", className].join(" "), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+      "div",
       {
-        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"
+          "flex flex-wrap gap-2 select-none",
+          variant === "underline" ? "border-b border-white/10 gap-4" : "",
+          variant === "segmented" ? "rounded-2xl border border-white/10 bg-slate-950/80 p-1.5" : ""
         ].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 })
+        children: items.map((item) => {
+          const isActive = item.id === activeItem?.id;
+          return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(
+            "button",
+            {
+              type: "button",
+              onClick: () => setActiveTab(item.id),
+              className: getTabButtonClass(isActive),
+              children: [
+                item.icon && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("span", { className: "shrink-0", children: item.icon }),
+                /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("span", { children: item.label }),
+                item.badge && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("span", { className: "shrink-0", children: item.badge })
+              ]
+            },
+            item.id
+          );
+        })
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { className: "rounded-2xl border border-white/10 bg-[var(--surface,rgba(15,23,42,0.6))] p-5 text-sm text-slate-200 shadow-xl backdrop-blur-md", 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)(
+var variantStyles4 = {
+  default: "border border-white/10 bg-slate-900/80 text-white placeholder:text-slate-500 focus:border-[var(--primary,#8b5cf6)] focus:ring-2 focus:ring-[var(--primary,#8b5cf6)]/25",
+  filled: "border border-transparent bg-white/5 text-white placeholder:text-slate-500 hover:bg-white/10 focus:bg-slate-900 focus:border-[var(--primary,#8b5cf6)] focus:ring-2 focus:ring-[var(--primary,#8b5cf6)]/25"
+};
+var sizeStyles5 = {
+  sm: "px-3 py-1.5 text-xs",
+  md: "px-3.5 py-2.5 text-sm",
+  lg: "px-4 py-3 text-base"
+};
+var radiusStyles4 = {
+  none: "rounded-none",
+  sm: "rounded-lg",
+  md: "rounded-xl",
+  lg: "rounded-2xl",
+  xl: "rounded-3xl"
+};
+var resizeStyles = {
+  none: "resize-none",
+  vertical: "resize-y",
+  horizontal: "resize-x",
+  both: "resize"
+};
+function Textarea({
+  variant = "default",
+  size = "md",
+  radius = "md",
+  resize = "vertical",
+  error,
+  className = "",
+  disabled,
+  ...props
+}) {
+  const textareaElement = /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
     "textarea",
     {
       ...props,
+      disabled,
       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",
+        "w-full transition-all duration-200 outline-none disabled:opacity-50 disabled:cursor-not-allowed",
+        variantStyles4[variant],
+        sizeStyles5[size],
+        radiusStyles4[radius],
+        resizeStyles[resize],
+        error ? "!border-rose-500 !ring-rose-500/30" : "",
         className
-      ].join(" ")
+      ].filter(Boolean).join(" ")
     }
   );
+  if (!error) return textareaElement;
+  return /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { className: "w-full", children: [
+    textareaElement,
+    typeof error === "string" && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("p", { className: "mt-1 text-xs text-rose-400", children: error })
+  ] });
 }
 
 // src/components/toast.tsx
-var import_react6 = require("react");
+var import_react7 = require("react");
+var import_react_dom3 = require("react-dom");
 var import_jsx_runtime18 = require("react/jsx-runtime");
 var toasts = [];
 var listeners = /* @__PURE__ */ new Set();
@@ -641,77 +1164,119 @@ var toast = {
   info(message, title) {
     return toast.show(message, { type: "info", title });
   },
+  warning(message, title) {
+    return toast.show(message, { type: "warning", title });
+  },
   dismiss(id) {
     toasts = toasts.filter((t) => t.id !== id);
     notify();
   }
 };
-function Toaster() {
-  const [activeToasts, setActiveToasts] = (0, import_react6.useState)([]);
-  (0, import_react6.useEffect)(() => {
+var positionStyles = {
+  "bottom-right": "bottom-5 right-5 items-end",
+  "bottom-left": "bottom-5 left-5 items-start",
+  "top-right": "top-5 right-5 items-end",
+  "top-left": "top-5 left-5 items-start",
+  "top-center": "top-5 left-1/2 -translate-x-1/2 items-center",
+  "bottom-center": "bottom-5 left-1/2 -translate-x-1/2 items-center"
+};
+function Toaster({ position = "bottom-right" }) {
+  const [activeToasts, setActiveToasts] = (0, import_react7.useState)([]);
+  const [mounted, setMounted] = (0, import_react7.useState)(false);
+  (0, import_react7.useEffect)(() => {
+    setMounted(true);
     listeners.add(setActiveToasts);
     return () => {
       listeners.delete(setActiveToasts);
     };
   }, []);
-  if (activeToasts.length === 0) return null;
+  if (!mounted || 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"
+    success: "border-emerald-500/40 bg-slate-900/95 text-emerald-100 shadow-emerald-500/15",
+    error: "border-rose-500/40 bg-slate-900/95 text-rose-100 shadow-rose-500/15",
+    info: "border-[var(--primary,#8b5cf6)]/40 bg-slate-900/95 text-slate-100 shadow-[var(--glow,rgba(139,92,246,0.15))]",
+    warning: "border-amber-500/40 bg-slate-900/95 text-amber-100 shadow-amber-500/15"
   };
-  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)(
+  const content = /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
     "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"]
+        "fixed z-[99999] flex flex-col gap-2.5 max-w-sm w-full pointer-events-none transition-all duration-300",
+        positionStyles[position]
       ].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
-  )) });
+      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-2xl backdrop-blur-xl transition-all 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-bold text-xs tracking-wide uppercase text-white", children: t.title }),
+              /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("p", { className: "text-sm font-medium leading-relaxed", children: t.message })
+            ] }),
+            /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+              "button",
+              {
+                type: "button",
+                onClick: () => toast.dismiss(t.id),
+                "aria-label": "Close notification",
+                className: "ml-3 text-slate-400 hover:text-white transition cursor-pointer text-lg leading-none",
+                children: "\xD7"
+              }
+            )
+          ]
+        },
+        t.id
+      ))
+    }
+  );
+  return typeof document !== "undefined" ? (0, import_react_dom3.createPortal)(content, document.body) : null;
 }
 
 // src/components/tooltip.tsx
-var import_react7 = require("react");
+var import_react8 = require("react");
 var import_jsx_runtime19 = require("react/jsx-runtime");
+var 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"
+};
+var themeClasses = {
+  dark: "border border-white/10 bg-slate-900/95 text-slate-100 shadow-xl",
+  light: "border border-slate-200 bg-white text-slate-900 shadow-xl font-semibold",
+  primary: "border border-[var(--primary,#8b5cf6)]/40 bg-[var(--primary,#8b5cf6)] text-white shadow-lg shadow-[var(--glow,rgba(139,92,246,0.3))]"
+};
 function Tooltip({
   content,
   children,
-  side = "top",
+  side,
+  position = "top",
+  theme = "dark",
+  arrow = true,
+  delay = 100,
   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"
+  const activeSide = side || position;
+  const [isVisible, setIsVisible] = (0, import_react8.useState)(false);
+  const timeoutRef = (0, import_react8.useRef)(null);
+  const show = () => {
+    timeoutRef.current = setTimeout(() => setIsVisible(true), delay);
+  };
+  const hide = () => {
+    if (timeoutRef.current) clearTimeout(timeoutRef.current);
+    setIsVisible(false);
   };
   return /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(
     "div",
     {
       className: "relative inline-flex",
-      onMouseEnter: () => setIsVisible(true),
-      onMouseLeave: () => setIsVisible(false),
-      onFocus: () => setIsVisible(true),
-      onBlur: () => setIsVisible(false),
+      onMouseEnter: show,
+      onMouseLeave: hide,
+      onFocus: show,
+      onBlur: hide,
       children: [
         children,
         isVisible && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
@@ -719,8 +1284,9 @@ function Tooltip({
           {
             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],
+              "absolute z-50 whitespace-nowrap rounded-lg px-2.5 py-1 text-xs font-medium shadow-2xl backdrop-blur-md transition-all duration-150 pointer-events-none",
+              sideClasses[activeSide],
+              themeClasses[theme],
               className
             ].join(" "),
             children: content