@stackvibe-studio/ui 0.2.0 → 0.3.1

package/dist/index.cjs

@@ -21,135 +21,469 @@ 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/alert.tsx
+// 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 = "",
+  customIcon
+}) {
+  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]
+      );
+    }
+  };
+  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"
+};
+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", className = "", children, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+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_runtime.jsx)("p", { className: "mb-1 font-medium", children: title }) : null,
-        /* @__PURE__ */ (0, import_jsx_runtime.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" }) })
+          }
+        )
       ]
     }
   );
 }
 
 // src/components/avatar.tsx
-var import_jsx_runtime2 = require("react/jsx-runtime");
+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"
 };
-function Avatar({ src, alt = "avatar", fallback = "SV", size = "md", className = "", ...props }) {
-  return src ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+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",
+  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_runtime2.jsx)(
+  ) : /* @__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_runtime3 = require("react/jsx-runtime");
+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_runtime3.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 })
+      ]
     }
   );
 }
 
 // src/components/button.tsx
-var import_jsx_runtime4 = require("react/jsx-runtime");
+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_runtime4.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_runtime4.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_runtime5 = require("react/jsx-runtime");
-function Card({ as: Component = "div", className = "", ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+var import_jsx_runtime6 = require("react/jsx-runtime");
+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(" ")
     }
   );
 }
 
 // src/components/checkbox.tsx
-var import_jsx_runtime6 = require("react/jsx-runtime");
+var import_jsx_runtime7 = require("react/jsx-runtime");
 function Checkbox({ className = "", ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
     "input",
     {
       ...props,
@@ -159,92 +493,806 @@ function Checkbox({ className = "", ...props }) {
   );
 }
 
-// src/components/input.tsx
-var import_jsx_runtime7 = require("react/jsx-runtime");
-function Input({ className = "", ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
-    "input",
+// src/components/dialog.tsx
+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_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);
+      }
+    };
+    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 || !mounted) return null;
+  const content = /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+    "div",
     {
-      ...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(" ")
+      role: "dialog",
+      "aria-modal": "true",
+      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);
+      },
+      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 text-white backdrop-blur-xl transition-transform 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
+          ]
+        }
+      )
     }
   );
+  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 });
+}
+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/select.tsx
-var import_jsx_runtime8 = require("react/jsx-runtime");
-function Select({ className = "", children, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
-    "select",
+// src/components/drawer.tsx
+var import_react4 = require("react");
+var import_react_dom2 = require("react-dom");
+var import_jsx_runtime9 = require("react/jsx-runtime");
+function Drawer({
+  open,
+  onOpenChange,
+  position = "right",
+  children,
+  className = ""
+}) {
+  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);
+    };
+    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 || !mounted) return null;
+  const positionClasses = {
+    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"
+  };
+  const content = /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+    "div",
+    {
+      role: "dialog",
+      "aria-modal": "true",
+      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);
+      },
+      children: /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
+        "div",
+        {
+          className: [
+            "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(" "),
+          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
+          ]
+        }
+      )
+    }
+  );
+  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-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_react5 = require("react");
+var import_jsx_runtime10 = require("react/jsx-runtime");
+function DropdownMenu({
+  trigger,
+  items,
+  align = "right",
+  className = ""
+}) {
+  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);
+      }
+    };
+    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 transition-all 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_runtime11 = require("react/jsx-runtime");
+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 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(" "),
-      children
+      ].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-[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",
+  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: label }),
+      /* @__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 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],
+              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}%` }
+          }
+        )
+      }
+    )
+  ] });
+}
+
+// src/components/select.tsx
+var import_jsx_runtime13 = require("react/jsx-runtime");
+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_runtime9 = require("react/jsx-runtime");
+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 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+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"
     }
   );
 }
 
+// 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",
+    {
+      type: "button",
+      role: "switch",
+      id,
+      "aria-label": ariaLabel,
+      "aria-checked": isChecked,
+      disabled,
+      onClick: () => onCheckedChange?.(!isChecked),
+      style: isChecked ? { backgroundColor: color || "var(--primary, #8b5cf6)" } : void 0,
+      className: [
+        "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
+      ].filter(Boolean).join(" "),
+      children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+        "span",
+        {
+          className: [
+            "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
+        }
+      )
+    }
+  );
+}
+
 // src/components/tabs.tsx
-var import_react = require("react");
-var import_jsx_runtime10 = require("react/jsx-runtime");
-function Tabs({ items, defaultTab, className = "" }) {
+var import_react6 = require("react");
+var import_jsx_runtime16 = require("react/jsx-runtime");
+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_react.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_runtime10.jsxs)("div", { className, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "mb-4 flex flex-wrap gap-2", children: items.map((item) => /* @__PURE__ */ (0, import_jsx_runtime10.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_runtime10.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_runtime11 = require("react/jsx-runtime");
-function Textarea({ className = "", ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+var import_jsx_runtime17 = require("react/jsx-runtime");
+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_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();
+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 });
+  },
+  warning(message, title) {
+    return toast.show(message, { type: "warning", title });
+  },
+  dismiss(id) {
+    toasts = toasts.filter((t) => t.id !== id);
+    notify();
+  }
+};
+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 (!mounted || activeToasts.length === 0) return null;
+  const typeStyles = {
+    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"
+  };
+  const content = /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+    "div",
+    {
+      className: [
+        "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: 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_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,
+  position = "top",
+  theme = "dark",
+  arrow = true,
+  delay = 100,
+  className = ""
+}) {
+  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: show,
+      onMouseLeave: hide,
+      onFocus: show,
+      onBlur: hide,
+      children: [
+        children,
+        isVisible && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+          "div",
+          {
+            role: "tooltip",
+            className: [
+              "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
+          }
+        )
+      ]
     }
   );
 }
@@ -267,17 +1315,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
 });