@memelabui/ui 0.1.0 → 0.2.0

package/dist/index.js

@@ -1,4 +1,4 @@
-import { forwardRef, useId, useRef, useEffect, useState, useMemo, cloneElement } from 'react';
+import { forwardRef, useId, useRef, useEffect, createContext, useState, useCallback, useMemo, isValidElement, cloneElement, useReducer, useContext } from 'react';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { createPortal } from 'react-dom';
 
@@ -56,6 +56,94 @@ function focusSafely(el) {
   } catch {
   }
 }
+function useClipboard(timeout = 2e3) {
+  const [copied, setCopied] = useState(false);
+  const timerRef = useRef(null);
+  useEffect(() => {
+    return () => {
+      if (timerRef.current !== null) {
+        clearTimeout(timerRef.current);
+      }
+    };
+  }, []);
+  const copy = useCallback(
+    async (text) => {
+      try {
+        await navigator.clipboard.writeText(text);
+      } catch {
+        return;
+      }
+      if (timerRef.current !== null) {
+        clearTimeout(timerRef.current);
+      }
+      setCopied(true);
+      timerRef.current = setTimeout(() => {
+        setCopied(false);
+        timerRef.current = null;
+      }, timeout);
+    },
+    [timeout]
+  );
+  return { copy, copied };
+}
+function useDisclosure(defaultOpen = false) {
+  const [isOpen, setIsOpen] = useState(defaultOpen);
+  const open = useCallback(() => setIsOpen(true), []);
+  const close = useCallback(() => setIsOpen(false), []);
+  const toggle = useCallback(() => setIsOpen((prev) => !prev), []);
+  return { isOpen, open, close, toggle };
+}
+function useMediaQuery(query) {
+  const [matches, setMatches] = useState(() => {
+    if (typeof window === "undefined") return false;
+    return window.matchMedia(query).matches;
+  });
+  useEffect(() => {
+    if (typeof window === "undefined") return;
+    const mediaQueryList = window.matchMedia(query);
+    setMatches(mediaQueryList.matches);
+    const handler = (event) => {
+      setMatches(event.matches);
+    };
+    mediaQueryList.addEventListener("change", handler);
+    return () => {
+      mediaQueryList.removeEventListener("change", handler);
+    };
+  }, [query]);
+  return matches;
+}
+function useDebounce(value, delayMs = 300) {
+  const [debouncedValue, setDebouncedValue] = useState(value);
+  useEffect(() => {
+    const timer = setTimeout(() => {
+      setDebouncedValue(value);
+    }, delayMs);
+    return () => {
+      clearTimeout(timer);
+    };
+  }, [value, delayMs]);
+  return debouncedValue;
+}
+
+// src/tokens/colors.ts
+var colors = {
+  bg: "#0a0a0f",
+  fg: "#f9fafb",
+  surface: {
+    0: "#0a0a0f",
+    50: "#0f0f18",
+    100: "#141420",
+    200: "#1a1a2e",
+    300: "#24243a",
+    400: "#2a2a4a"
+  },
+  primary: { DEFAULT: "#8b5cf6", light: "#a78bfa", dark: "#7c3aed" },
+  accent: { DEFAULT: "#667eea", light: "#8b9cf7", dark: "#4c5fd4" },
+  glow: { purple: "#764ba2", pink: "#f093fb" },
+  success: "#10b981",
+  warning: "#f59e0b",
+  danger: "#f43f5e"
+};
 var base = "inline-flex items-center justify-center gap-2 rounded-xl font-semibold leading-none transition-[transform,background-color,box-shadow,opacity] select-none [-webkit-tap-highlight-color:transparent] active:translate-y-[0.5px] disabled:opacity-60 disabled:pointer-events-none focus-visible:ring-2 focus-visible:ring-primary/40 focus-visible:ring-offset-2 focus-visible:ring-offset-transparent";
 var sizeClass = {
   sm: "px-3 py-2 text-sm",
@@ -63,10 +151,10 @@ var sizeClass = {
   lg: "px-4 py-3 text-base"
 };
 var variantClass = {
-  primary: "bg-gradient-to-r from-violet-600 to-purple-600 text-white shadow-[0_0_25px_rgba(139,92,246,0.35)] hover:shadow-[0_0_35px_rgba(139,92,246,0.5)] hover:scale-[1.02]",
-  success: "bg-emerald-600 text-white shadow-[0_10px_18px_rgba(16,185,129,0.22)] hover:bg-emerald-700",
-  warning: "bg-amber-600 text-white shadow-[0_10px_18px_rgba(245,158,11,0.22)] hover:bg-amber-700",
-  danger: "bg-rose-600 text-white shadow-[0_10px_18px_rgba(244,63,94,0.22)] hover:bg-rose-700",
+  primary: "bg-gradient-to-r from-violet-600 to-purple-600 text-white shadow-glow hover:shadow-glow-lg hover:scale-[1.02]",
+  success: "bg-emerald-600 text-white shadow-lg shadow-emerald-600/20 hover:bg-emerald-700",
+  warning: "bg-amber-600 text-white shadow-lg shadow-amber-600/20 hover:bg-amber-700",
+  danger: "bg-rose-600 text-white shadow-lg shadow-rose-600/20 hover:bg-rose-700",
   secondary: "text-white bg-white/5 ring-1 ring-white/10 hover:bg-white/10 hover:ring-white/20 backdrop-blur-sm",
   ghost: "text-white/70 hover:text-white hover:bg-white/5"
 };
@@ -78,6 +166,7 @@ var Button = forwardRef(function Button2({ variant = "secondary", size = "md", l
       type: type === "submit" ? "submit" : type === "reset" ? "reset" : "button",
       ...props,
       disabled: disabled || loading,
+      ...loading ? { "aria-busy": true } : {},
       className: cn(base, sizeClass[size], variantClass[variant], className),
       children: loading ? /* @__PURE__ */ jsxs("span", { className: "flex items-center justify-center gap-2", children: [
         /* @__PURE__ */ jsx("span", { className: "w-4 h-4 border-2 border-white/30 border-t-white rounded-full animate-spin" }),
@@ -98,9 +187,9 @@ var sizeClass2 = {
 };
 var variantClass2 = {
   primary: "bg-primary text-white shadow-glow hover:brightness-[0.98]",
-  success: "bg-emerald-600 text-white shadow-[0_10px_18px_rgba(16,185,129,0.22)] hover:bg-emerald-700",
-  warning: "bg-amber-600 text-white shadow-[0_10px_18px_rgba(245,158,11,0.22)] hover:bg-amber-700",
-  danger: "bg-rose-600 text-white shadow-[0_10px_18px_rgba(244,63,94,0.22)] hover:bg-rose-700",
+  success: "bg-emerald-600 text-white shadow-lg shadow-emerald-600/20 hover:bg-emerald-700",
+  warning: "bg-amber-600 text-white shadow-lg shadow-amber-600/20 hover:bg-amber-700",
+  danger: "bg-rose-600 text-white shadow-lg shadow-rose-600/20 hover:bg-rose-700",
   secondary: "text-white bg-white/10 shadow-sm ring-1 ring-white/10",
   ghost: "text-white hover:bg-white/10"
 };
@@ -117,69 +206,155 @@ var IconButton = forwardRef(function IconButton2({ icon, variant = "ghost", size
     }
   );
 });
-var inputBase = "w-full rounded-xl px-3 py-2.5 text-sm bg-white/10 text-white shadow-sm outline-none placeholder-white/30 focus:ring-2 focus:ring-primary/40 transition-shadow";
+var inputBase = "w-full rounded-xl px-3 py-2.5 text-sm bg-white/10 text-white shadow-sm outline-none placeholder-white/30 focus-visible:ring-2 focus-visible:ring-primary/40 transition-shadow";
 var Input = forwardRef(function Input2({ hasError, label, error, helperText, className, id: externalId, ...props }, ref) {
   const generatedId = useId();
   const inputId = externalId || generatedId;
   const showError = hasError || !!error;
+  const errorId = error ? `${inputId}-error` : void 0;
+  const helperId = helperText && !error ? `${inputId}-helper` : void 0;
   const input = /* @__PURE__ */ jsx(
     "input",
     {
+      ...props,
       ref,
       id: inputId,
-      ...props,
+      "aria-invalid": showError || void 0,
+      "aria-describedby": errorId || helperId || void 0,
       className: cn(inputBase, showError && "ring-2 ring-rose-500/40 focus:ring-rose-500/40", className)
     }
   );
   if (!label && !error && !helperText) return input;
   return /* @__PURE__ */ jsxs("div", { children: [
-    label && /* @__PURE__ */ jsx("label", { htmlFor: inputId, className: "block text-sm text-white/50 mb-1.5", children: label }),
+    label && /* @__PURE__ */ jsx("label", { htmlFor: inputId, className: "block text-sm text-white/70 mb-1.5", children: label }),
     input,
-    error && /* @__PURE__ */ jsx("p", { className: "text-rose-400 text-xs mt-1", children: error }),
-    helperText && !error && /* @__PURE__ */ jsx("p", { className: "text-white/40 text-xs mt-1", children: helperText })
+    error && /* @__PURE__ */ jsx("p", { id: errorId, className: "text-rose-400 text-xs mt-1", children: error }),
+    helperText && !error && /* @__PURE__ */ jsx("p", { id: helperId, className: "text-white/40 text-xs mt-1", children: helperText })
   ] });
 });
-var selectBase = "w-full rounded-xl px-3 py-2.5 text-sm bg-white/10 text-white shadow-sm outline-none focus:ring-2 focus:ring-primary/40 transition-shadow";
-var Select = forwardRef(function Select2({ hasError, label, error, className, id: externalId, children, ...props }, ref) {
+var inputBase2 = "w-full rounded-xl pl-10 pr-3 py-2.5 text-sm bg-white/10 text-white shadow-sm outline-none placeholder-white/30 focus-visible:ring-2 focus-visible:ring-primary/40 transition-shadow";
+var SearchInput = forwardRef(function SearchInput2({ label, onClear, className, id: externalId, placeholder = "Search...", value, ...props }, ref) {
+  const generatedId = useId();
+  const inputId = externalId || generatedId;
+  const hasValue = value !== void 0 && value !== "";
+  const wrapper = /* @__PURE__ */ jsxs("div", { className: "relative", children: [
+    /* @__PURE__ */ jsx("span", { className: "absolute left-3 top-1/2 -translate-y-1/2 pointer-events-none text-white/40", children: /* @__PURE__ */ jsxs(
+      "svg",
+      {
+        xmlns: "http://www.w3.org/2000/svg",
+        width: "16",
+        height: "16",
+        viewBox: "0 0 24 24",
+        fill: "none",
+        stroke: "currentColor",
+        strokeWidth: "2",
+        strokeLinecap: "round",
+        strokeLinejoin: "round",
+        "aria-hidden": "true",
+        children: [
+          /* @__PURE__ */ jsx("circle", { cx: "11", cy: "11", r: "8" }),
+          /* @__PURE__ */ jsx("line", { x1: "21", y1: "21", x2: "16.65", y2: "16.65" })
+        ]
+      }
+    ) }),
+    /* @__PURE__ */ jsx(
+      "input",
+      {
+        ref,
+        id: inputId,
+        type: "search",
+        value,
+        placeholder,
+        ...props,
+        className: cn(inputBase2, hasValue && "pr-9", className)
+      }
+    ),
+    hasValue && onClear && /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        onClick: onClear,
+        "aria-label": "Clear search",
+        className: "absolute right-3 top-1/2 -translate-y-1/2 text-white/40 hover:text-white transition-colors",
+        children: /* @__PURE__ */ jsxs(
+          "svg",
+          {
+            xmlns: "http://www.w3.org/2000/svg",
+            width: "14",
+            height: "14",
+            viewBox: "0 0 24 24",
+            fill: "none",
+            stroke: "currentColor",
+            strokeWidth: "2",
+            strokeLinecap: "round",
+            strokeLinejoin: "round",
+            "aria-hidden": "true",
+            children: [
+              /* @__PURE__ */ jsx("line", { x1: "18", y1: "6", x2: "6", y2: "18" }),
+              /* @__PURE__ */ jsx("line", { x1: "6", y1: "6", x2: "18", y2: "18" })
+            ]
+          }
+        )
+      }
+    )
+  ] });
+  if (!label) return wrapper;
+  return /* @__PURE__ */ jsxs("div", { children: [
+    /* @__PURE__ */ jsx("label", { htmlFor: inputId, className: "block text-sm text-white/70 mb-1.5", children: label }),
+    wrapper
+  ] });
+});
+var selectBase = "w-full rounded-xl px-3 py-2.5 text-sm bg-white/10 text-white shadow-sm outline-none focus-visible:ring-2 focus-visible:ring-primary/40 transition-shadow";
+var Select = forwardRef(function Select2({ hasError, label, error, helperText, className, id: externalId, children, ...props }, ref) {
   const generatedId = useId();
   const selectId = externalId || generatedId;
   const showError = hasError || !!error;
+  const errorId = error ? `${selectId}-error` : void 0;
+  const helperId = helperText && !error ? `${selectId}-helper` : void 0;
   const select = /* @__PURE__ */ jsx(
     "select",
     {
+      ...props,
       ref,
       id: selectId,
-      ...props,
+      "aria-invalid": showError || void 0,
+      "aria-describedby": errorId || helperId || void 0,
       className: cn(selectBase, showError && "ring-2 ring-rose-500/40 focus:ring-rose-500/40", className),
       children
     }
   );
-  if (!label && !error) return select;
+  if (!label && !error && !helperText) return select;
   return /* @__PURE__ */ jsxs("div", { children: [
-    label && /* @__PURE__ */ jsx("label", { htmlFor: selectId, className: "block text-sm text-white/50 mb-1.5", children: label }),
+    label && /* @__PURE__ */ jsx("label", { htmlFor: selectId, className: "block text-sm text-white/70 mb-1.5", children: label }),
     select,
-    error && /* @__PURE__ */ jsx("p", { className: "text-rose-400 text-xs mt-1", children: error })
+    error && /* @__PURE__ */ jsx("p", { id: errorId, className: "text-rose-400 text-xs mt-1", children: error }),
+    helperText && !error && /* @__PURE__ */ jsx("p", { id: helperId, className: "text-white/40 text-xs mt-1", children: helperText })
   ] });
 });
-var textareaBase = "w-full rounded-xl px-3 py-2.5 text-sm bg-white/10 text-white shadow-sm outline-none placeholder-white/30 focus:ring-2 focus:ring-primary/40 transition-shadow resize-y";
-var Textarea = forwardRef(function Textarea2({ hasError, label, error, className, id: externalId, ...props }, ref) {
+var textareaBase = "w-full rounded-xl px-3 py-2.5 text-sm bg-white/10 text-white shadow-sm outline-none placeholder-white/30 focus-visible:ring-2 focus-visible:ring-primary/40 transition-shadow resize-y";
+var Textarea = forwardRef(function Textarea2({ hasError, label, error, helperText, className, id: externalId, ...props }, ref) {
   const generatedId = useId();
   const textareaId = externalId || generatedId;
   const showError = hasError || !!error;
+  const errorId = error ? `${textareaId}-error` : void 0;
+  const helperId = helperText && !error ? `${textareaId}-helper` : void 0;
   const textarea = /* @__PURE__ */ jsx(
     "textarea",
     {
+      ...props,
       ref,
       id: textareaId,
-      ...props,
+      "aria-invalid": showError || void 0,
+      "aria-describedby": errorId || helperId || void 0,
       className: cn(textareaBase, showError && "ring-2 ring-rose-500/40 focus:ring-rose-500/40", className)
     }
   );
-  if (!label && !error) return textarea;
+  if (!label && !error && !helperText) return textarea;
   return /* @__PURE__ */ jsxs("div", { children: [
-    label && /* @__PURE__ */ jsx("label", { htmlFor: textareaId, className: "block text-sm text-white/50 mb-1.5", children: label }),
+    label && /* @__PURE__ */ jsx("label", { htmlFor: textareaId, className: "block text-sm text-white/70 mb-1.5", children: label }),
     textarea,
-    error && /* @__PURE__ */ jsx("p", { className: "text-rose-400 text-xs mt-1", children: error })
+    error && /* @__PURE__ */ jsx("p", { id: errorId, className: "text-rose-400 text-xs mt-1", children: error }),
+    helperText && !error && /* @__PURE__ */ jsx("p", { id: helperId, className: "text-white/40 text-xs mt-1", children: helperText })
   ] });
 });
 var base3 = "inline-flex items-center justify-center rounded-full font-semibold ring-1 ring-white/10";
@@ -209,11 +384,15 @@ var thumbSize = {
   sm: { base: "w-4 h-4", translate: "translate-x-4" },
   md: { base: "w-5 h-5", translate: "translate-x-5" }
 };
-function Toggle({ checked, onChange, disabled, label, size = "md", "aria-label": ariaLabel }) {
+var Toggle = forwardRef(function Toggle2({ checked, onChange, disabled, label, size = "md", id: externalId, "aria-label": ariaLabel }, ref) {
+  const generatedId = useId();
+  const toggleId = externalId || generatedId;
   return /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
     /* @__PURE__ */ jsx(
       "button",
       {
+        ref,
+        id: toggleId,
         type: "button",
         role: "switch",
         "aria-checked": checked,
@@ -238,20 +417,247 @@ function Toggle({ checked, onChange, disabled, label, size = "md", "aria-label":
         )
       }
     ),
-    label && /* @__PURE__ */ jsx("span", { className: "text-sm text-white/60", children: label })
+    label && /* @__PURE__ */ jsx("label", { htmlFor: toggleId, className: "text-sm text-white/60 cursor-pointer", children: label })
+  ] });
+});
+var Checkbox = forwardRef(function Checkbox2({ label, error, indeterminate, className, id: externalId, disabled, checked, onChange, ...props }, ref) {
+  const generatedId = useId();
+  const inputId = externalId || generatedId;
+  const errorId = error ? `${inputId}-error` : void 0;
+  const internalRef = useRef(null);
+  useEffect(() => {
+    const el = internalRef.current;
+    if (el) {
+      el.indeterminate = indeterminate ?? false;
+    }
+  }, [indeterminate]);
+  const setRefs = (el) => {
+    internalRef.current = el;
+    if (typeof ref === "function") {
+      ref(el);
+    } else if (ref) {
+      ref.current = el;
+    }
+  };
+  return /* @__PURE__ */ jsxs("div", { className: cn("inline-flex flex-col gap-1", className), children: [
+    /* @__PURE__ */ jsxs(
+      "label",
+      {
+        htmlFor: inputId,
+        className: cn(
+          "inline-flex items-center gap-2.5",
+          disabled ? "opacity-50 cursor-not-allowed" : "cursor-pointer"
+        ),
+        children: [
+          /* @__PURE__ */ jsx(
+            "input",
+            {
+              ...props,
+              ref: setRefs,
+              id: inputId,
+              type: "checkbox",
+              checked,
+              onChange,
+              disabled,
+              "aria-invalid": !!error || void 0,
+              "aria-describedby": errorId,
+              className: "sr-only peer"
+            }
+          ),
+          /* @__PURE__ */ jsxs(
+            "span",
+            {
+              className: cn(
+                "relative flex items-center justify-center w-5 h-5 rounded-md",
+                "bg-white/10 border border-white/20",
+                "transition-colors duration-150",
+                "peer-focus-visible:ring-2 peer-focus-visible:ring-primary/40 peer-focus-visible:ring-offset-1 peer-focus-visible:ring-offset-transparent",
+                checked && !indeterminate && "bg-primary border-primary",
+                indeterminate && "bg-primary border-primary"
+              ),
+              "aria-hidden": "true",
+              children: [
+                checked && !indeterminate && /* @__PURE__ */ jsx(
+                  "svg",
+                  {
+                    viewBox: "0 0 12 10",
+                    fill: "none",
+                    stroke: "white",
+                    strokeWidth: "1.8",
+                    strokeLinecap: "round",
+                    strokeLinejoin: "round",
+                    className: "w-3 h-2.5",
+                    children: /* @__PURE__ */ jsx("polyline", { points: "1,5 4.5,8.5 11,1" })
+                  }
+                ),
+                indeterminate && /* @__PURE__ */ jsx(
+                  "svg",
+                  {
+                    viewBox: "0 0 10 2",
+                    fill: "none",
+                    stroke: "white",
+                    strokeWidth: "2",
+                    strokeLinecap: "round",
+                    className: "w-2.5 h-0.5",
+                    children: /* @__PURE__ */ jsx("line", { x1: "0", y1: "1", x2: "10", y2: "1" })
+                  }
+                )
+              ]
+            }
+          ),
+          label && /* @__PURE__ */ jsx("span", { className: "text-sm text-white/80 select-none", children: label })
+        ]
+      }
+    ),
+    error && /* @__PURE__ */ jsx("p", { id: errorId, className: "text-rose-400 text-xs ml-7", children: error })
   ] });
+});
+var RadioGroupContext = createContext(null);
+function useRadioGroup() {
+  const ctx = useContext(RadioGroupContext);
+  if (!ctx) {
+    throw new Error("RadioItem must be used inside a RadioGroup");
+  }
+  return ctx;
+}
+function RadioGroup({
+  value: controlledValue,
+  defaultValue,
+  onValueChange,
+  name: externalName,
+  disabled = false,
+  orientation = "vertical",
+  label,
+  error,
+  children,
+  className
+}) {
+  const groupId = useId();
+  const generatedName = useId();
+  const name = externalName ?? generatedName;
+  const [uncontrolledValue, setUncontrolledValue] = useState(defaultValue);
+  const isControlled = controlledValue !== void 0;
+  const currentValue = isControlled ? controlledValue : uncontrolledValue;
+  const handleChange = useCallback(
+    (val) => {
+      if (!isControlled) setUncontrolledValue(val);
+      onValueChange?.(val);
+    },
+    [isControlled, onValueChange]
+  );
+  const labelId = label ? `${groupId}-label` : void 0;
+  const errorId = error ? `${groupId}-error` : void 0;
+  const ctxValue = useMemo(
+    () => ({ value: currentValue, onChange: handleChange, name, disabled, groupId }),
+    [currentValue, handleChange, name, disabled, groupId]
+  );
+  return /* @__PURE__ */ jsx(RadioGroupContext.Provider, { value: ctxValue, children: /* @__PURE__ */ jsxs(
+    "fieldset",
+    {
+      role: "radiogroup",
+      "aria-labelledby": labelId,
+      "aria-describedby": errorId,
+      "aria-disabled": disabled || void 0,
+      className: cn("border-none p-0 m-0", className),
+      children: [
+        label && /* @__PURE__ */ jsx("legend", { id: labelId, className: "text-sm text-white/50 mb-2 float-none p-0", children: label }),
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: cn(
+              "flex gap-3",
+              orientation === "vertical" ? "flex-col" : "flex-row flex-wrap"
+            ),
+            children
+          }
+        ),
+        error && /* @__PURE__ */ jsx("p", { id: errorId, className: "text-rose-400 text-xs mt-1.5", children: error })
+      ]
+    }
+  ) });
+}
+function RadioItem({ value, disabled: itemDisabled, children, className }) {
+  const { value: groupValue, onChange, name, disabled: groupDisabled, groupId } = useRadioGroup();
+  const inputId = useId();
+  const inputRef = useRef(null);
+  const isDisabled = groupDisabled || itemDisabled;
+  const isSelected = groupValue === value;
+  const handleKeyDown = (e) => {
+    if (e.key !== "ArrowDown" && e.key !== "ArrowUp" && e.key !== "ArrowRight" && e.key !== "ArrowLeft") {
+      return;
+    }
+    e.preventDefault();
+    const fieldset = inputRef.current?.closest("fieldset");
+    if (!fieldset) return;
+    const inputs = Array.from(
+      fieldset.querySelectorAll(`input[type="radio"][name="${name}"]:not(:disabled)`)
+    );
+    const currentIndex = inputs.indexOf(inputRef.current);
+    if (currentIndex === -1) return;
+    const forward = e.key === "ArrowDown" || e.key === "ArrowRight";
+    const nextIndex = forward ? (currentIndex + 1) % inputs.length : (currentIndex - 1 + inputs.length) % inputs.length;
+    const nextInput = inputs[nextIndex];
+    nextInput.focus();
+    onChange(nextInput.value);
+  };
+  return /* @__PURE__ */ jsxs(
+    "label",
+    {
+      htmlFor: inputId,
+      className: cn(
+        "inline-flex items-center gap-2.5",
+        isDisabled ? "opacity-50 cursor-not-allowed" : "cursor-pointer",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsx(
+          "input",
+          {
+            ref: inputRef,
+            id: inputId,
+            type: "radio",
+            name,
+            value,
+            checked: isSelected,
+            disabled: isDisabled,
+            onChange: () => onChange(value),
+            onKeyDown: handleKeyDown,
+            className: "sr-only peer",
+            "aria-describedby": void 0
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "span",
+          {
+            className: cn(
+              "relative flex items-center justify-center w-5 h-5 rounded-full",
+              "bg-white/10 border border-white/20",
+              "transition-colors duration-150",
+              "peer-focus-visible:ring-2 peer-focus-visible:ring-primary/40 peer-focus-visible:ring-offset-1 peer-focus-visible:ring-offset-transparent",
+              isSelected && "border-primary"
+            ),
+            "aria-hidden": "true",
+            children: isSelected && /* @__PURE__ */ jsx("span", { className: "w-2.5 h-2.5 rounded-full bg-primary" })
+          }
+        ),
+        /* @__PURE__ */ jsx("span", { className: "text-sm text-white/80 select-none", children })
+      ]
+    }
+  );
 }
 var sizeClass4 = {
   sm: "h-3 w-3 border",
   md: "h-4 w-4 border-2",
   lg: "h-6 w-6 border-2"
 };
-function Spinner({ className, size = "md" }) {
+function Spinner({ className, size = "md", label }) {
   return /* @__PURE__ */ jsx(
     "span",
     {
       className: cn("inline-block rounded-full border-white/15 border-t-primary animate-spin", sizeClass4[size], className),
-      "aria-hidden": "true"
+      role: label ? "status" : void 0,
+      "aria-hidden": label ? void 0 : "true",
+      "aria-label": label || void 0
     }
   );
 }
@@ -264,14 +670,170 @@ function Skeleton({ className, circle }) {
     }
   );
 }
-function Card({ hoverable, variant = "surface", className, ...props }) {
+var TabsContext = createContext(null);
+function useTabsContext() {
+  const ctx = useContext(TabsContext);
+  if (!ctx) throw new Error("Tabs sub-components must be used inside <Tabs>");
+  return ctx;
+}
+function Tabs({
+  defaultValue = "",
+  value,
+  onValueChange,
+  variant = "underline",
+  children,
+  className
+}) {
+  const baseId = useId();
+  const isControlled = value !== void 0;
+  const [internalValue, setInternalValue] = useState(defaultValue);
+  const activeValue = isControlled ? value ?? "" : internalValue;
+  const setActiveValue = useCallback(
+    (next) => {
+      if (!isControlled) setInternalValue(next);
+      onValueChange?.(next);
+    },
+    [isControlled, onValueChange]
+  );
+  const ctxValue = useMemo(
+    () => ({ activeValue, setActiveValue, variant, baseId }),
+    [activeValue, setActiveValue, variant, baseId]
+  );
+  return /* @__PURE__ */ jsx(TabsContext.Provider, { value: ctxValue, children: /* @__PURE__ */ jsx("div", { className: cn("flex flex-col", className), children }) });
+}
+function TabList({ children, className }) {
+  const { variant } = useTabsContext();
+  const listRef = useRef(null);
+  const handleKeyDown = (e) => {
+    const list = listRef.current;
+    if (!list) return;
+    const tabs = Array.from(list.querySelectorAll('[role="tab"]:not([disabled])'));
+    if (tabs.length === 0) return;
+    const focused = document.activeElement;
+    if (!focused || !list.contains(focused)) return;
+    const currentIndex = tabs.indexOf(focused);
+    let nextIndex = currentIndex;
+    switch (e.key) {
+      case "ArrowRight":
+        e.preventDefault();
+        nextIndex = currentIndex < tabs.length - 1 ? currentIndex + 1 : 0;
+        break;
+      case "ArrowLeft":
+        e.preventDefault();
+        nextIndex = currentIndex > 0 ? currentIndex - 1 : tabs.length - 1;
+        break;
+      case "Home":
+        e.preventDefault();
+        nextIndex = 0;
+        break;
+      case "End":
+        e.preventDefault();
+        nextIndex = tabs.length - 1;
+        break;
+      case "Enter":
+      case " ":
+        e.preventDefault();
+        focused?.click();
+        return;
+      default:
+        return;
+    }
+    tabs[nextIndex]?.focus();
+    tabs[nextIndex]?.click();
+  };
   return /* @__PURE__ */ jsx(
     "div",
     {
+      ref: listRef,
+      role: "tablist",
+      onKeyDown: handleKeyDown,
+      className: cn(
+        "flex",
+        variant === "underline" && "border-b border-white/10",
+        variant === "pill" && "gap-1 p-1 rounded-xl bg-white/5 ring-1 ring-white/10 w-fit",
+        className
+      ),
+      children
+    }
+  );
+}
+function Tab({ value, disabled = false, children, className }) {
+  const { activeValue, setActiveValue, variant, baseId } = useTabsContext();
+  const isActive = activeValue === value;
+  return /* @__PURE__ */ jsx(
+    "button",
+    {
+      type: "button",
+      role: "tab",
+      id: `${baseId}-tab-${value}`,
+      "aria-selected": isActive,
+      "aria-controls": `${baseId}-panel-${value}`,
+      disabled,
+      tabIndex: isActive ? 0 : -1,
+      onClick: () => {
+        if (!disabled) setActiveValue(value);
+      },
+      className: cn(
+        "relative px-4 py-2.5 text-sm font-medium transition-all duration-150 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-1 focus-visible:ring-offset-transparent",
+        // underline variant
+        variant === "underline" && [
+          "border-b-2 -mb-px",
+          isActive ? "border-primary text-white" : "border-transparent text-white/40 hover:text-white/70 hover:border-white/20",
+          disabled && "opacity-40 cursor-not-allowed hover:text-white/40 hover:border-transparent"
+        ],
+        // pill variant
+        variant === "pill" && [
+          "rounded-lg",
+          isActive ? "bg-white/10 text-white shadow-sm" : "text-white/50 hover:text-white/80 hover:bg-white/5",
+          disabled && "opacity-40 cursor-not-allowed hover:bg-transparent hover:text-white/50"
+        ],
+        className
+      ),
+      children
+    }
+  );
+}
+function TabPanel({ value, children, className }) {
+  const { activeValue, baseId } = useTabsContext();
+  if (activeValue !== value) return null;
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      role: "tabpanel",
+      id: `${baseId}-panel-${value}`,
+      "aria-labelledby": `${baseId}-tab-${value}`,
+      tabIndex: 0,
+      className: cn("mt-4 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary", className),
+      children
+    }
+  );
+}
+var Card = forwardRef(function Card2({ hoverable, variant = "surface", className, ...props }, ref) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref,
       ...props,
       className: cn(variant === "glass" ? "glass" : "surface", hoverable && "surface-hover", className)
     }
   );
+});
+var scrollLockCount = 0;
+var savedOverflow = "";
+function lockScroll() {
+  if (typeof document === "undefined") return;
+  if (scrollLockCount === 0) {
+    savedOverflow = document.body.style.overflow;
+    document.body.style.overflow = "hidden";
+  }
+  scrollLockCount++;
+}
+function unlockScroll() {
+  if (typeof document === "undefined") return;
+  scrollLockCount = Math.max(0, scrollLockCount - 1);
+  if (scrollLockCount === 0) {
+    document.body.style.overflow = savedOverflow;
+  }
 }
 function Modal({
   isOpen,
@@ -304,6 +866,11 @@ function Modal({
       if (lastActive?.isConnected) focusSafely(lastActive);
     };
   }, [isOpen]);
+  useEffect(() => {
+    if (!isOpen) return;
+    lockScroll();
+    return () => unlockScroll();
+  }, [isOpen]);
   if (!isOpen) return null;
   return /* @__PURE__ */ jsx(
     "div",
@@ -329,7 +896,7 @@ function Modal({
           ref: dialogRef,
           className: cn(
             "w-full rounded-t-3xl sm:rounded-2xl shadow-xl ring-1 ring-white/10 animate-modal-pop focus:outline-none focus-visible:ring-2 focus-visible:ring-primary",
-            useGlass && "glass bg-[#0f0f18]/80",
+            useGlass && "glass bg-surface-50/80",
             contentClassName
           ),
           onMouseDown: (e) => e.stopPropagation(),
@@ -442,17 +1009,17 @@ function Tooltip({ content, delayMs = 500, placement = "top", className, childre
   const anchorRef = useRef(null);
   const [open, setOpen] = useState(false);
   const [pos, setPos] = useState(null);
-  const contentStr = useMemo(() => {
+  useMemo(() => {
     if (typeof content === "string") return content.trim();
     return "";
   }, [content]);
-  function clearTimer() {
+  const clearTimer = useCallback(() => {
     if (openTimerRef.current !== null) {
       window.clearTimeout(openTimerRef.current);
       openTimerRef.current = null;
     }
-  }
-  function updatePosition() {
+  }, []);
+  const updatePosition = useCallback(() => {
     const el = anchorRef.current;
     if (!el) return;
     const r = el.getBoundingClientRect();
@@ -467,17 +1034,17 @@ function Tooltip({ content, delayMs = 500, placement = "top", className, childre
       top: Math.round(effPlacement === "top" ? topY : bottomY),
       placement: effPlacement
     });
-  }
-  function scheduleOpen() {
+  }, [placement]);
+  const scheduleOpen = useCallback(() => {
     clearTimer();
     openTimerRef.current = window.setTimeout(() => {
       setOpen(true);
     }, Math.max(0, delayMs));
-  }
-  function close() {
+  }, [clearTimer, delayMs]);
+  const close = useCallback(() => {
     clearTimer();
     setOpen(false);
-  }
+  }, [clearTimer]);
   useEffect(() => {
     if (!open) return;
     updatePosition();
@@ -489,45 +1056,52 @@ function Tooltip({ content, delayMs = 500, placement = "top", className, childre
       window.removeEventListener("scroll", onScroll, true);
       window.removeEventListener("resize", onResize);
     };
-  }, [open]);
+  }, [open, updatePosition]);
   useEffect(() => {
     return () => clearTimer();
-  }, []);
+  }, [clearTimer]);
+  if (!isValidElement(children)) return children;
   const child = cloneElement(children, {
     ref: (node) => {
       anchorRef.current = node;
-      const prevRef = children.ref;
+      const childProps = children.props;
+      const prevRef = childProps.ref;
       if (typeof prevRef === "function") prevRef(node);
       else if (prevRef && typeof prevRef === "object") prevRef.current = node;
     },
     onMouseEnter: (e) => {
-      children.props.onMouseEnter?.(e);
+      const childProps = children.props;
+      if (typeof childProps.onMouseEnter === "function") childProps.onMouseEnter(e);
       scheduleOpen();
     },
     onMouseLeave: (e) => {
-      children.props.onMouseLeave?.(e);
+      const childProps = children.props;
+      if (typeof childProps.onMouseLeave === "function") childProps.onMouseLeave(e);
       close();
     },
     onFocus: (e) => {
-      children.props.onFocus?.(e);
+      const childProps = children.props;
+      if (typeof childProps.onFocus === "function") childProps.onFocus(e);
       scheduleOpen();
     },
     onBlur: (e) => {
-      children.props.onBlur?.(e);
+      const childProps = children.props;
+      if (typeof childProps.onBlur === "function") childProps.onBlur(e);
       close();
     },
-    ...contentStr ? { "aria-describedby": tooltipId } : {}
+    ...open ? { "aria-describedby": tooltipId } : {}
   });
   return /* @__PURE__ */ jsxs(Fragment, { children: [
     child,
-    open && content ? createPortal(
+    open && content && typeof document !== "undefined" ? createPortal(
       /* @__PURE__ */ jsx(
         "div",
         {
           id: tooltipId,
           role: "tooltip",
           className: cn(
-            "fixed z-[9999] max-w-[320px] rounded-lg bg-gray-900 px-3 py-2 text-xs leading-snug text-white shadow-xl pointer-events-none",
+            "fixed z-[9999] max-w-[320px] rounded-lg px-3 py-2 text-xs leading-snug shadow-xl pointer-events-none",
+            "bg-surface-100 text-white ring-1 ring-white/10",
             className
           ),
           style: pos ? {
@@ -553,14 +1127,18 @@ function EmptyState({ icon: Icon, title, description, actionLabel, onAction, chi
 }
 function CollapsibleSection({ title, defaultOpen = true, children, right, className }) {
   const [isOpen, setIsOpen] = useState(defaultOpen);
+  const contentId = useId();
+  const titleId = `${contentId}-title`;
   return /* @__PURE__ */ jsxs("div", { className: cn("rounded-xl ring-1 ring-white/10 bg-white/5 overflow-hidden", className), children: [
     /* @__PURE__ */ jsxs(
       "button",
       {
         type: "button",
+        id: titleId,
         onClick: () => setIsOpen((prev) => !prev),
         className: "flex w-full items-center justify-between gap-3 px-4 py-3 text-left hover:bg-white/[0.03] transition-colors",
         "aria-expanded": isOpen,
+        "aria-controls": contentId,
         children: [
           /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
             /* @__PURE__ */ jsx(
@@ -584,6 +1162,9 @@ function CollapsibleSection({ title, defaultOpen = true, children, right, classN
     /* @__PURE__ */ jsx(
       "div",
       {
+        id: contentId,
+        role: "region",
+        "aria-labelledby": titleId,
         className: cn(
           "grid transition-[grid-template-rows] duration-200 ease-out",
           isOpen ? "grid-rows-[1fr]" : "grid-rows-[0fr]"
@@ -593,6 +1174,349 @@ function CollapsibleSection({ title, defaultOpen = true, children, right, classN
     )
   ] });
 }
+var DropdownContext = createContext(null);
+function useDropdownContext(component) {
+  const ctx = useContext(DropdownContext);
+  if (!ctx) {
+    throw new Error(`<${component}> must be rendered inside <Dropdown>`);
+  }
+  return ctx;
+}
+function Dropdown({ children, className }) {
+  const [open, setOpen] = useState(false);
+  const triggerId = useId();
+  const menuId = useId();
+  const triggerRef = useRef(null);
+  const toggleOpen = useCallback(() => setOpen((prev) => !prev), []);
+  const ctxValue = useMemo(
+    () => ({ open, setOpen, toggleOpen, triggerId, menuId, triggerRef }),
+    [open, setOpen, toggleOpen, triggerId, menuId, triggerRef]
+  );
+  return /* @__PURE__ */ jsx(DropdownContext.Provider, { value: ctxValue, children: /* @__PURE__ */ jsx("div", { className: cn("relative inline-block", className), children }) });
+}
+function DropdownTrigger({ children, className }) {
+  const { open, toggleOpen, triggerId, menuId, triggerRef } = useDropdownContext("DropdownTrigger");
+  if (!isValidElement(children)) return children;
+  return cloneElement(children, {
+    id: triggerId,
+    "aria-haspopup": "menu",
+    "aria-expanded": open,
+    "aria-controls": open ? menuId : void 0,
+    className: cn(children.props.className, className),
+    ref: (node) => {
+      triggerRef.current = node;
+      const childRef = children.ref;
+      if (typeof childRef === "function") childRef(node);
+      else if (childRef && typeof childRef === "object") childRef.current = node;
+    },
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    onClick: (e) => {
+      const childProps = children.props;
+      if (typeof childProps.onClick === "function") childProps.onClick(e);
+      toggleOpen();
+    }
+  });
+}
+function DropdownMenu({ children, className, align = "left" }) {
+  const { open, setOpen, menuId, triggerId, triggerRef } = useDropdownContext("DropdownMenu");
+  const menuRef = useRef(null);
+  const [pos, setPos] = useState(null);
+  const [visible, setVisible] = useState(false);
+  const updatePosition = useCallback(() => {
+    const trigger = triggerRef.current;
+    if (!trigger) return;
+    const rect = trigger.getBoundingClientRect();
+    const left = align === "right" ? rect.right : rect.left;
+    setPos({
+      top: Math.round(rect.bottom + 6),
+      left: Math.round(left)
+    });
+  }, [align, triggerRef]);
+  useEffect(() => {
+    if (!open) {
+      setVisible(false);
+      return;
+    }
+    updatePosition();
+    const raf = window.requestAnimationFrame(() => {
+      setVisible(true);
+      const menuEl = menuRef.current;
+      if (!menuEl) return;
+      const items = getFocusableElements(menuEl);
+      focusSafely(items[0] ?? menuEl);
+    });
+    return () => window.cancelAnimationFrame(raf);
+  }, [open, updatePosition]);
+  useEffect(() => {
+    if (!open) return;
+    function handlePointerDown(e) {
+      const target = e.target;
+      if (menuRef.current?.contains(target)) return;
+      if (triggerRef.current?.contains(target)) return;
+      setOpen(false);
+    }
+    document.addEventListener("pointerdown", handlePointerDown, true);
+    return () => document.removeEventListener("pointerdown", handlePointerDown, true);
+  }, [open, setOpen, triggerRef]);
+  useEffect(() => {
+    if (!open) return;
+    const onScroll = () => updatePosition();
+    const onResize = () => updatePosition();
+    window.addEventListener("scroll", onScroll, true);
+    window.addEventListener("resize", onResize);
+    return () => {
+      window.removeEventListener("scroll", onScroll, true);
+      window.removeEventListener("resize", onResize);
+    };
+  }, [open, updatePosition]);
+  if (!open) return null;
+  const panel = /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref: menuRef,
+      id: menuId,
+      role: "menu",
+      "aria-labelledby": triggerId,
+      tabIndex: -1,
+      className: cn(
+        // Base glass panel
+        "fixed z-[9999] min-w-[10rem] py-1",
+        "rounded-xl shadow-xl ring-1 ring-white/10",
+        "bg-surface-50/90 backdrop-blur-md",
+        // Animation
+        "transition-[opacity,transform] duration-150 ease-out",
+        visible ? "opacity-100 translate-y-0" : "opacity-0 -translate-y-1",
+        className
+      ),
+      style: pos ? {
+        top: pos.top,
+        ...align === "right" ? { right: `calc(100vw - ${pos.left}px)` } : { left: pos.left }
+      } : { top: 0, left: 0, visibility: "hidden" },
+      onKeyDown: (e) => {
+        const menuEl = menuRef.current;
+        if (!menuEl) return;
+        if (e.key === "Escape" || e.key === "Tab") {
+          if (e.key === "Escape") {
+            e.preventDefault();
+            e.stopPropagation();
+            focusSafely(triggerRef.current);
+          }
+          setOpen(false);
+          return;
+        }
+        const items = getFocusableElements(menuEl).filter(
+          (el) => el.getAttribute("role") === "menuitem" && el.getAttribute("aria-disabled") !== "true"
+        );
+        if (items.length === 0) return;
+        const active = document.activeElement;
+        const currentIndex = items.findIndex((el) => el === active);
+        if (e.key === "ArrowDown") {
+          e.preventDefault();
+          const next = currentIndex < items.length - 1 ? currentIndex + 1 : 0;
+          focusSafely(items[next]);
+        } else if (e.key === "ArrowUp") {
+          e.preventDefault();
+          const prev = currentIndex > 0 ? currentIndex - 1 : items.length - 1;
+          focusSafely(items[prev]);
+        } else if (e.key === "Home") {
+          e.preventDefault();
+          focusSafely(items[0]);
+        } else if (e.key === "End") {
+          e.preventDefault();
+          focusSafely(items[items.length - 1]);
+        }
+      },
+      children
+    }
+  );
+  if (typeof document === "undefined") return null;
+  return createPortal(panel, document.body);
+}
+function DropdownItem({ onSelect, disabled = false, children, className }) {
+  const { setOpen, triggerRef } = useDropdownContext("DropdownItem");
+  const handleSelect = useCallback(() => {
+    if (disabled) return;
+    setOpen(false);
+    focusSafely(triggerRef.current);
+    onSelect?.();
+  }, [disabled, onSelect, setOpen, triggerRef]);
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      role: "menuitem",
+      tabIndex: disabled ? -1 : 0,
+      "aria-disabled": disabled ? "true" : void 0,
+      className: cn(
+        "flex items-center gap-2 w-full px-3 py-2 text-sm text-left cursor-pointer select-none",
+        "text-white/80 transition-colors duration-100",
+        "focus:outline-none focus-visible:bg-white/10",
+        disabled ? "opacity-40 pointer-events-none cursor-not-allowed" : "hover:bg-white/10 hover:text-white focus-visible:text-white",
+        className
+      ),
+      onClick: handleSelect,
+      onKeyDown: (e) => {
+        if (e.key === "Enter" || e.key === " ") {
+          e.preventDefault();
+          handleSelect();
+        }
+      },
+      children
+    }
+  );
+}
+function DropdownSeparator({ className }) {
+  return /* @__PURE__ */ jsx("div", { role: "separator", className: cn("border-t border-white/10 my-1", className) });
+}
+function matchesAccept(file, accept) {
+  const types = accept.split(",").map((t) => t.trim().toLowerCase());
+  const fileName = file.name.toLowerCase();
+  const mimeType = file.type.toLowerCase();
+  return types.some((t) => {
+    if (t.startsWith(".")) return fileName.endsWith(t);
+    if (t.endsWith("/*")) return mimeType.startsWith(t.slice(0, -1));
+    return mimeType === t;
+  });
+}
+function DropZone({
+  onFilesDropped,
+  accept,
+  maxFiles,
+  maxSize,
+  disabled = false,
+  children,
+  className,
+  "aria-label": ariaLabel = "File drop zone"
+}) {
+  const [isDragging, setIsDragging] = useState(false);
+  const inputRef = useRef(null);
+  const dragCounterRef = useRef(0);
+  const processFiles = useCallback(
+    (fileList) => {
+      if (!fileList || disabled) return;
+      let files = Array.from(fileList);
+      if (accept) {
+        files = files.filter((f) => matchesAccept(f, accept));
+      }
+      if (maxSize !== void 0) {
+        files = files.filter((f) => f.size <= maxSize);
+      }
+      if (maxFiles !== void 0) {
+        files = files.slice(0, maxFiles);
+      }
+      onFilesDropped(files);
+    },
+    [accept, disabled, maxFiles, maxSize, onFilesDropped]
+  );
+  const handleDragEnter = useCallback(
+    (e) => {
+      e.preventDefault();
+      dragCounterRef.current++;
+      if (!disabled) setIsDragging(true);
+    },
+    [disabled]
+  );
+  const handleDragOver = useCallback(
+    (e) => {
+      e.preventDefault();
+    },
+    []
+  );
+  const handleDragLeave = useCallback((e) => {
+    e.preventDefault();
+    dragCounterRef.current--;
+    if (dragCounterRef.current === 0) setIsDragging(false);
+  }, []);
+  const handleDrop = useCallback(
+    (e) => {
+      e.preventDefault();
+      dragCounterRef.current = 0;
+      setIsDragging(false);
+      if (disabled) return;
+      processFiles(e.dataTransfer.files);
+    },
+    [disabled, processFiles]
+  );
+  const handleClick = useCallback(() => {
+    if (!disabled) inputRef.current?.click();
+  }, [disabled]);
+  const handleKeyDown = useCallback(
+    (e) => {
+      if (disabled) return;
+      if (e.key === "Enter" || e.key === " ") {
+        e.preventDefault();
+        inputRef.current?.click();
+      }
+    },
+    [disabled]
+  );
+  const handleInputChange = useCallback(() => {
+    processFiles(inputRef.current?.files ?? null);
+    if (inputRef.current) inputRef.current.value = "";
+  }, [processFiles]);
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      role: "button",
+      tabIndex: disabled ? -1 : 0,
+      "aria-label": ariaLabel,
+      "aria-disabled": disabled,
+      onClick: handleClick,
+      onKeyDown: handleKeyDown,
+      onDragEnter: handleDragEnter,
+      onDragOver: handleDragOver,
+      onDragLeave: handleDragLeave,
+      onDrop: handleDrop,
+      className: cn(
+        "flex flex-col items-center justify-center gap-3 rounded-2xl border-2 border-dashed px-6 py-10 text-center transition-colors cursor-pointer select-none outline-none",
+        "border-white/20 bg-white/5 backdrop-blur-sm",
+        "hover:border-primary/50 hover:bg-white/[0.08]",
+        "focus-visible:ring-2 focus-visible:ring-primary/40 focus-visible:ring-offset-2 focus-visible:ring-offset-transparent",
+        isDragging && "border-primary bg-primary/10",
+        disabled && "pointer-events-none opacity-50",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsx(
+          "input",
+          {
+            ref: inputRef,
+            type: "file",
+            tabIndex: -1,
+            className: "sr-only",
+            accept,
+            multiple: maxFiles !== 1,
+            onChange: handleInputChange,
+            onClick: (e) => e.stopPropagation(),
+            "aria-hidden": "true"
+          }
+        ),
+        children ?? /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx(
+            "svg",
+            {
+              xmlns: "http://www.w3.org/2000/svg",
+              className: "h-10 w-10 text-white/40",
+              fill: "none",
+              viewBox: "0 0 24 24",
+              stroke: "currentColor",
+              strokeWidth: 1.5,
+              "aria-hidden": "true",
+              children: /* @__PURE__ */ jsx(
+                "path",
+                {
+                  strokeLinecap: "round",
+                  strokeLinejoin: "round",
+                  d: "M3 16.5v2.25A2.25 2.25 0 005.25 21h13.5A2.25 2.25 0 0021 18.75V16.5m-13.5-9L12 3m0 0l4.5 4.5M12 3v13.5"
+                }
+              )
+            }
+          ),
+          /* @__PURE__ */ jsx("p", { className: "text-sm text-white/50", children: "Drop files here or click to browse" })
+        ] })
+      ]
+    }
+  );
+}
 var maxWidthClass = {
   sm: "max-w-2xl",
   md: "max-w-4xl",
@@ -605,7 +1529,7 @@ function defaultBackground() {
   return /* @__PURE__ */ jsxs("div", { "aria-hidden": "true", className: "pointer-events-none absolute inset-0 overflow-hidden", children: [
     /* @__PURE__ */ jsx("div", { className: "absolute -top-32 -left-32 h-[600px] w-[600px] rounded-full bg-violet-600/20 blur-[140px]" }),
     /* @__PURE__ */ jsx("div", { className: "absolute top-20 -right-32 h-[500px] w-[500px] rounded-full bg-purple-500/[0.12] blur-[120px]" }),
-    /* @__PURE__ */ jsx("div", { className: "absolute bottom-0 left-1/2 h-[400px] w-[500px] -translate-x-1/2 rounded-full bg-indigo-500/[0.10] blur-[120px]" })
+    /* @__PURE__ */ jsx("div", { className: "absolute bottom-0 left-1/2 h-[400px] w-[500px] -translate-x-1/2 rounded-full bg-accent/[0.10] blur-[120px]" })
   ] });
 }
 function PageShell({
@@ -639,11 +1563,8 @@ function PageShell({
 }
 function Navbar({ logo, children, className, glass = true }) {
   return /* @__PURE__ */ jsx("header", { className: cn("fixed top-0 w-full z-50", glass && "glass", className), children: /* @__PURE__ */ jsxs("div", { className: "max-w-7xl mx-auto px-6 h-16 flex items-center justify-between", children: [
-    /* @__PURE__ */ jsx("div", { className: "flex items-center gap-3", children: logo || /* @__PURE__ */ jsxs(Fragment, { children: [
-      /* @__PURE__ */ jsx("div", { className: "w-9 h-9 rounded-xl animated-gradient" }),
-      /* @__PURE__ */ jsx("span", { className: "text-lg font-bold tracking-tight", children: "MemeLab" })
-    ] }) }),
-    children && /* @__PURE__ */ jsx("div", { className: "flex items-center gap-4", children })
+    /* @__PURE__ */ jsx("div", { className: "flex items-center gap-3", children: logo ?? /* @__PURE__ */ jsx("div", { className: "w-9 h-9 rounded-xl animated-gradient" }) }),
+    children && /* @__PURE__ */ jsx("nav", { "aria-label": "Main navigation", children: /* @__PURE__ */ jsx("div", { className: "flex items-center gap-4", children }) })
   ] }) });
 }
 function Sidebar({ children, collapsed = false, onToggle, className }) {
@@ -681,7 +1602,15 @@ function Sidebar({ children, collapsed = false, onToggle, className }) {
     }
   );
 }
-function DashboardLayout({ children, navbar, sidebar, className }) {
+var maxWidthClass2 = {
+  sm: "max-w-2xl",
+  md: "max-w-4xl",
+  lg: "max-w-5xl",
+  xl: "max-w-7xl",
+  "2xl": "max-w-[92rem]",
+  full: "max-w-full"
+};
+function DashboardLayout({ children, navbar, sidebar, className, mainClassName, maxWidth = "lg" }) {
   return /* @__PURE__ */ jsxs("div", { className: cn("min-h-screen bg-surface relative overflow-hidden", className), children: [
     /* @__PURE__ */ jsxs("div", { "aria-hidden": "true", className: "pointer-events-none fixed inset-0", children: [
       /* @__PURE__ */ jsx("div", { className: "orb orb-purple w-[400px] h-[400px] -top-[150px] -left-[150px] opacity-15" }),
@@ -690,9 +1619,238 @@ function DashboardLayout({ children, navbar, sidebar, className }) {
     navbar,
     /* @__PURE__ */ jsxs("div", { className: cn("flex", navbar && "pt-16"), children: [
       sidebar,
-      /* @__PURE__ */ jsx("main", { className: "flex-1 min-w-0 py-8 px-6", children: /* @__PURE__ */ jsx("div", { className: "max-w-5xl mx-auto", children }) })
+      /* @__PURE__ */ jsx("main", { className: cn("flex-1 min-w-0 py-8 px-6", mainClassName), children: /* @__PURE__ */ jsx("div", { className: cn("mx-auto", maxWidthClass2[maxWidth]), children }) })
     ] })
   ] });
 }
+var ProgressButton = forwardRef(
+  function ProgressButton2({ isLoading, loadingText, children, disabled, className, ...props }, ref) {
+    return /* @__PURE__ */ jsx(
+      Button,
+      {
+        ref,
+        ...props,
+        disabled: disabled || isLoading,
+        "aria-busy": isLoading || void 0,
+        className: cn("relative overflow-hidden", className),
+        children: isLoading ? /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx(
+            "span",
+            {
+              "aria-hidden": "true",
+              className: "absolute inset-0 bg-white/20 animate-[ml-shimmer_2s_ease-in-out_infinite] skew-x-[-20deg] pointer-events-none"
+            }
+          ),
+          /* @__PURE__ */ jsx(Spinner, { size: "sm" }),
+          loadingText ?? children
+        ] }) : children
+      }
+    );
+  }
+);
+function reducer(state, action) {
+  switch (action.type) {
+    case "ADD": {
+      const next = [...state, action.toast];
+      return next.length > action.maxToasts ? next.slice(-action.maxToasts) : next;
+    }
+    case "REMOVE":
+      return state.filter((t) => t.id !== action.id);
+    case "REMOVE_ALL":
+      return [];
+    default:
+      return state;
+  }
+}
+var ToastContext = createContext(null);
+var variantBarColor = {
+  success: "bg-emerald-500",
+  error: "bg-rose-500",
+  warning: "bg-amber-500",
+  info: "bg-primary"
+};
+var variantProgressColor = {
+  success: "bg-emerald-500",
+  error: "bg-rose-500",
+  warning: "bg-amber-500",
+  info: "bg-primary"
+};
+var variantIconLabel = {
+  success: "\u2713",
+  error: "\u2715",
+  warning: "\u26A0",
+  info: "i"
+};
+var variantIconColor = {
+  success: "text-emerald-400",
+  error: "text-rose-400",
+  warning: "text-amber-400",
+  info: "text-primary"
+};
+var positionClass = {
+  "top-right": "top-4 right-4 items-end",
+  "top-center": "top-4 left-1/2 -translate-x-1/2 items-center",
+  "bottom-right": "bottom-4 right-4 items-end",
+  "bottom-center": "bottom-4 left-1/2 -translate-x-1/2 items-center"
+};
+function ToastCard({ toast, onDismiss }) {
+  const duration = toast.duration ?? 5e3;
+  const [visible, setVisible] = useState(false);
+  const [exiting, setExiting] = useState(false);
+  const [started, setStarted] = useState(false);
+  const dismissedRef = useRef(false);
+  const timerRef = useRef(null);
+  const exitTimerRef = useRef(null);
+  useEffect(() => {
+    let innerFrame;
+    const frame = requestAnimationFrame(() => {
+      setVisible(true);
+      innerFrame = requestAnimationFrame(() => setStarted(true));
+    });
+    return () => {
+      cancelAnimationFrame(frame);
+      cancelAnimationFrame(innerFrame);
+    };
+  }, []);
+  useEffect(() => {
+    return () => {
+      if (exitTimerRef.current !== null) clearTimeout(exitTimerRef.current);
+    };
+  }, []);
+  const triggerDismiss = useCallback(() => {
+    if (dismissedRef.current) return;
+    dismissedRef.current = true;
+    if (timerRef.current !== null) clearTimeout(timerRef.current);
+    setExiting(true);
+    exitTimerRef.current = setTimeout(() => onDismiss(toast.id), 280);
+  }, [onDismiss, toast.id]);
+  useEffect(() => {
+    if (duration <= 0) return;
+    timerRef.current = setTimeout(triggerDismiss, duration);
+    return () => {
+      if (timerRef.current !== null) clearTimeout(timerRef.current);
+    };
+  }, [duration, triggerDismiss]);
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      role: "alert",
+      "aria-live": "assertive",
+      "aria-atomic": "true",
+      "data-variant": toast.variant,
+      className: cn(
+        // Base layout
+        "relative flex w-80 max-w-[calc(100vw-2rem)] overflow-hidden rounded-xl shadow-xl",
+        // Glass background
+        "bg-surface-100/95 backdrop-blur-md ring-1 ring-white/10",
+        // Enter / exit transitions
+        "transition-all duration-300",
+        visible && !exiting ? "opacity-100 translate-x-0" : "opacity-0 translate-x-8",
+        exiting && "scale-95"
+      ),
+      children: [
+        /* @__PURE__ */ jsx("span", { "aria-hidden": "true", className: cn("w-[3px] shrink-0 self-stretch", variantBarColor[toast.variant]) }),
+        /* @__PURE__ */ jsxs("div", { className: "flex flex-1 items-start gap-3 px-4 py-3 pr-9", children: [
+          /* @__PURE__ */ jsx(
+            "span",
+            {
+              "aria-hidden": "true",
+              className: cn(
+                "mt-0.5 flex h-5 w-5 shrink-0 items-center justify-center rounded-full text-[11px] font-bold ring-1",
+                variantIconColor[toast.variant],
+                "ring-current/30"
+              ),
+              children: variantIconLabel[toast.variant]
+            }
+          ),
+          /* @__PURE__ */ jsxs("div", { className: "min-w-0", children: [
+            /* @__PURE__ */ jsx("p", { className: "text-sm font-semibold leading-snug text-white", children: toast.title }),
+            toast.description ? /* @__PURE__ */ jsx("p", { className: "mt-0.5 text-xs leading-relaxed text-white/60", children: toast.description }) : null
+          ] })
+        ] }),
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            "aria-label": "Dismiss notification",
+            onClick: triggerDismiss,
+            className: cn(
+              "absolute right-2 top-2 flex h-6 w-6 items-center justify-center rounded-lg",
+              "text-white/40 transition-colors hover:bg-white/10 hover:text-white/80",
+              "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/40"
+            ),
+            children: /* @__PURE__ */ jsx("svg", { width: "10", height: "10", viewBox: "0 0 10 10", fill: "none", "aria-hidden": "true", children: /* @__PURE__ */ jsx("path", { d: "M1 1l8 8M9 1L1 9", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round" }) })
+          }
+        ),
+        duration > 0 && /* @__PURE__ */ jsx(
+          "span",
+          {
+            "aria-hidden": "true",
+            className: cn(
+              "absolute bottom-0 left-0 h-[2px] ease-linear",
+              variantProgressColor[toast.variant],
+              "opacity-60"
+            ),
+            style: {
+              width: started ? "0%" : "100%",
+              transitionProperty: "width",
+              transitionDuration: started ? `${duration}ms` : "0ms"
+            }
+          }
+        )
+      ]
+    }
+  );
+}
+function ToastProvider({ children, position = "top-right", maxToasts = 5 }) {
+  const [toasts, dispatch] = useReducer(reducer, []);
+  const counterRef = useRef(0);
+  const maxToastsRef = useRef(maxToasts);
+  maxToastsRef.current = maxToasts;
+  const toast = useCallback(
+    (options) => {
+      const id = `toast-${++counterRef.current}`;
+      const newToast = {
+        id,
+        variant: options.variant,
+        title: options.title,
+        description: options.description,
+        duration: options.duration ?? 5e3
+      };
+      dispatch({ type: "ADD", toast: newToast, maxToasts: maxToastsRef.current });
+      return id;
+    },
+    []
+  );
+  const dismiss = useCallback((id) => {
+    dispatch({ type: "REMOVE", id });
+  }, []);
+  const dismissAll = useCallback(() => {
+    dispatch({ type: "REMOVE_ALL" });
+  }, []);
+  const value = useMemo(() => ({ toast, dismiss, dismissAll }), [toast, dismiss, dismissAll]);
+  const container = typeof document !== "undefined" ? createPortal(
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        "aria-label": "Notifications",
+        className: cn("fixed z-[9999] flex flex-col gap-3 pointer-events-none", positionClass[position]),
+        children: toasts.map((t) => /* @__PURE__ */ jsx("div", { className: "pointer-events-auto", children: /* @__PURE__ */ jsx(ToastCard, { toast: t, onDismiss: dismiss }) }, t.id))
+      }
+    ),
+    document.body
+  ) : null;
+  return /* @__PURE__ */ jsxs(ToastContext.Provider, { value, children: [
+    children,
+    container
+  ] });
+}
+function useToast() {
+  const ctx = useContext(ToastContext);
+  if (!ctx) {
+    throw new Error("useToast must be used inside <ToastProvider>");
+  }
+  return ctx;
+}
 
-export { Badge, Button, Card, CollapsibleSection, ConfirmDialog, DashboardLayout, EmptyState, IconButton, Input, Modal, Navbar, PageShell, Pill, Select, Sidebar, Skeleton, Spinner, Textarea, Toggle, Tooltip, cn, focusSafely, getFocusableElements };
+export { Badge, Button, Card, Checkbox, CollapsibleSection, ConfirmDialog, DashboardLayout, DropZone, Dropdown, DropdownItem, DropdownMenu, DropdownSeparator, DropdownTrigger, EmptyState, IconButton, Input, Modal, Navbar, PageShell, Pill, ProgressButton, RadioGroup, RadioItem, SearchInput, Select, Sidebar, Skeleton, Spinner, Tab, TabList, TabPanel, Tabs, Textarea, ToastProvider, Toggle, Tooltip, cn, colors, focusSafely, getFocusableElements, useClipboard, useDebounce, useDisclosure, useMediaQuery, useToast };