@gamecp/ui 0.1.0 → 0.1.14

package/dist/index.mjs

@@ -1,15 +1,71 @@
-import React4, { forwardRef, useState, useRef, useEffect } from 'react';
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
-import { RiCheckLine, RiFileCopyLine, RiEyeOffLine, RiEyeLine, RiRefreshLine, RiCloseLine, RiArrowDownSLine } from 'react-icons/ri';
-import NextLink from 'next/link';
+import React4, { forwardRef, useState, useRef, useEffect, useCallback } from 'react';
+import { RiCloseLine, RiCheckLine, RiLoader4Line, RiFileCopyLine, RiEyeOffLine, RiEyeLine, RiRefreshLine, RiSearchLine, RiFilterLine, RiGridFill, RiListUnordered, RiFileCopyFill, RiPauseFill, RiPauseLine, RiRestartFill, RiRestartLine, RiStopFill, RiStopLine, RiPlayFill, RiPlayLine, RiBarChartFill, RiBarChartLine, RiEyeFill, RiPlayCircleFill, RiPlayCircleLine, RiStopCircleFill, RiStopCircleLine, RiDeleteBinFill, RiDeleteBinLine, RiEditFill, RiEditLine, RiArrowDownSLine } from 'react-icons/ri';
 import { createPortal } from 'react-dom';
 import { AnimatePresence, motion } from 'framer-motion';
+import NextLink from 'next/link';
+import { Tooltip } from 'react-tooltip';
+import { useIntlayer } from 'next-intlayer';
 
-// src/Button.tsx
+// src/Badge.tsx
+var badgeVariants = {
+  default: "bg-gray-100 text-foreground border-border",
+  primary: "bg-primary-100 text-primary-800 border-primary-200",
+  secondary: "bg-gray-100 text-foreground border-border",
+  success: "bg-success text-success-dark border-success-light",
+  warning: "bg-yellow-100 text-yellow-800 border-yellow-200",
+  error: "bg-red-100 text-red-800 border-red-200",
+  info: "bg-muted text-muted-foreground border-ring",
+  gray: "bg-gray-100 text-foreground border-border",
+  purple: "bg-purple-100 text-purple-800 border-purple-200",
+  pink: "bg-pink-100 text-pink-800 border-pink-200",
+  indigo: "bg-indigo-100 text-indigo-800 border-indigo-200",
+  yellow: "bg-yellow-100 text-yellow-800 border-yellow-200",
+  orange: "bg-orange-100 text-orange-800 border-orange-200",
+  teal: "bg-teal-100 text-teal-800 border-teal-200",
+  cyan: "bg-cyan-100 text-cyan-800 border-cyan-200",
+  lime: "bg-lime-100 text-lime-800 border-lime-200",
+  emerald: "bg-emerald-100 text-emerald-800 border-emerald-200",
+  rose: "bg-rose-100 text-rose-800 border-rose-200",
+  sky: "bg-sky-100 text-sky-800 border-sky-200",
+  violet: "bg-violet-100 text-violet-800 border-violet-200",
+  fuchsia: "bg-fuchsia-100 text-fuchsia-800 border-fuchsia-200",
+  amber: "bg-amber-100 text-amber-800 border-amber-200"
+};
+var badgeSizes = {
+  sm: "px-2 py-0.5 text-xs",
+  md: "px-2.5 py-0.5 text-xs",
+  lg: "px-3 py-1 text-sm"
+};
+function Badge({
+  children,
+  variant = "default",
+  size = "md",
+  className = "",
+  customColors
+}) {
+  const baseClasses = "inline-flex items-center font-medium rounded-full border";
+  const variantClasses5 = variant === "custom" ? "" : badgeVariants[variant];
+  const sizeClasses5 = badgeSizes[size];
+  const customStyles = variant === "custom" && customColors ? {
+    backgroundColor: customColors.background,
+    color: customColors.text,
+    borderColor: customColors.border || customColors.background
+  } : {};
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      className: `${baseClasses} ${variantClasses5} ${sizeClasses5} ${className}`,
+      style: customStyles,
+      children
+    }
+  );
+}
 var variantClasses = {
   primary: "bg-primary text-primary-foreground hover:bg-primary/90 border-transparent",
   secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80 border-transparent",
   destructive: "bg-destructive text-destructive-foreground hover:bg-destructive/90 border-transparent",
+  danger: "bg-red-600 text-white hover:bg-red-700 border-transparent",
   ghost: "bg-transparent hover:bg-muted hover:text-foreground border-transparent",
   link: "bg-transparent text-primary underline-offset-4 hover:underline border-transparent p-0",
   outline: "bg-transparent border-border hover:bg-muted hover:text-foreground"
@@ -88,73 +144,6 @@ var Button = forwardRef(
 );
 Button.displayName = "Button";
 var Button_default = Button;
-var badgeVariants = {
-  default: "bg-gray-100 text-foreground border-border",
-  primary: "bg-primary-100 text-primary-800 border-primary-200",
-  secondary: "bg-gray-100 text-foreground border-border",
-  success: "bg-success text-success-dark border-success-light",
-  warning: "bg-yellow-100 text-yellow-800 border-yellow-200",
-  error: "bg-red-100 text-red-800 border-red-200",
-  info: "bg-muted text-muted-foreground border-ring",
-  gray: "bg-gray-100 text-foreground border-border",
-  purple: "bg-purple-100 text-purple-800 border-purple-200",
-  pink: "bg-pink-100 text-pink-800 border-pink-200",
-  indigo: "bg-indigo-100 text-indigo-800 border-indigo-200",
-  yellow: "bg-yellow-100 text-yellow-800 border-yellow-200",
-  orange: "bg-orange-100 text-orange-800 border-orange-200",
-  teal: "bg-teal-100 text-teal-800 border-teal-200",
-  cyan: "bg-cyan-100 text-cyan-800 border-cyan-200",
-  lime: "bg-lime-100 text-lime-800 border-lime-200",
-  emerald: "bg-emerald-100 text-emerald-800 border-emerald-200",
-  rose: "bg-rose-100 text-rose-800 border-rose-200",
-  sky: "bg-sky-100 text-sky-800 border-sky-200",
-  violet: "bg-violet-100 text-violet-800 border-violet-200",
-  fuchsia: "bg-fuchsia-100 text-fuchsia-800 border-fuchsia-200",
-  amber: "bg-amber-100 text-amber-800 border-amber-200"
-};
-var badgeSizes = {
-  sm: "px-2 py-0.5 text-xs",
-  md: "px-2.5 py-0.5 text-xs",
-  lg: "px-3 py-1 text-sm"
-};
-function Badge({
-  children,
-  variant = "default",
-  size = "md",
-  className = "",
-  customColors
-}) {
-  const baseClasses = "inline-flex items-center font-medium rounded-full border";
-  const variantClasses4 = variant === "custom" ? "" : badgeVariants[variant];
-  const sizeClasses4 = badgeSizes[size];
-  const customStyles = variant === "custom" && customColors ? {
-    backgroundColor: customColors.background,
-    color: customColors.text,
-    borderColor: customColors.border || customColors.background
-  } : {};
-  return /* @__PURE__ */ jsx(
-    "span",
-    {
-      className: `${baseClasses} ${variantClasses4} ${sizeClasses4} ${className}`,
-      style: customStyles,
-      children
-    }
-  );
-}
-var SuccessBadge = (props) => /* @__PURE__ */ jsx(Badge, { ...props, variant: "success" });
-var WarningBadge = (props) => /* @__PURE__ */ jsx(Badge, { ...props, variant: "warning" });
-var ErrorBadge = (props) => /* @__PURE__ */ jsx(Badge, { ...props, variant: "error" });
-var InfoBadge = (props) => /* @__PURE__ */ jsx(Badge, { ...props, variant: "info" });
-var PrimaryBadge = (props) => /* @__PURE__ */ jsx(Badge, { ...props, variant: "primary" });
-var GrayBadge = (props) => /* @__PURE__ */ jsx(Badge, { ...props, variant: "gray" });
-function StatusBadge({
-  isActive,
-  activeText = "Active",
-  inactiveText = "Inactive",
-  ...props
-}) {
-  return /* @__PURE__ */ jsx(Badge, { ...props, variant: isActive ? "success" : "error", children: isActive ? activeText : inactiveText });
-}
 var sizeClasses2 = {
   xs: "w-3 h-3",
   sm: "w-4 h-4",
@@ -260,7 +249,8 @@ function Card({
   contentClassName = "",
   status,
   statusIcon,
-  statusText
+  statusText,
+  id
 }) {
   const [isExpanded, setIsExpanded] = useState(defaultExpanded);
   const baseClasses = [
@@ -290,6 +280,7 @@ function Card({
   return /* @__PURE__ */ jsxs(
     "div",
     {
+      id,
       className: `${baseClasses} ${className}`,
       style,
       onClick: clickable || onClick ? handleClick : void 0,
@@ -343,934 +334,3195 @@ function Card({
     }
   );
 }
-function SimpleCard({
+var sizeClasses3 = {
+  sm: "max-w-md",
+  md: "max-w-2xl",
+  lg: "max-w-4xl",
+  xl: "max-w-6xl",
+  full: "max-w-full mx-4"
+};
+function Modal({
+  isOpen,
+  onClose,
   children,
-  className = "",
-  ...props
-}) {
-  return /* @__PURE__ */ jsx(Card, { className, ...props, children });
-}
-function HeaderCard({
   title,
-  subtitle,
-  description,
-  icon,
-  iconColor,
-  iconSize,
-  actionButton,
-  children,
+  header,
+  blocking = false,
+  size = "md",
   className = "",
-  ...props
+  footer,
+  fullScreen = false,
+  noPadding = false,
+  footerBg = "gray",
+  variant = "default",
+  scrollable = true,
+  "aria-describedby": ariaDescribedBy,
+  customStyles = {}
 }) {
-  return /* @__PURE__ */ jsx(
-    Card,
-    {
-      title,
-      subtitle,
-      description,
-      icon,
-      iconColor,
-      iconSize,
-      actionButton,
-      className,
-      ...props,
-      children
+  const modalContentRef = useRef(null);
+  const previousActiveElementRef = useRef(null);
+  const hasPerformedInitialFocusRef = useRef(false);
+  const getFocusableElements = () => {
+    if (!modalContentRef.current) return [];
+    const focusableSelectors = [
+      "button:not([disabled])",
+      "a[href]",
+      "input:not([disabled])",
+      "select:not([disabled])",
+      "textarea:not([disabled])",
+      '[tabindex]:not([tabindex="-1"])'
+    ].join(", ");
+    return Array.from(
+      modalContentRef.current.querySelectorAll(focusableSelectors)
+    );
+  };
+  useEffect(() => {
+    if (!isOpen) {
+      hasPerformedInitialFocusRef.current = false;
+      return;
     }
-  );
-}
-function StatusCard({
-  status,
-  statusIcon,
-  statusText,
-  children,
-  className = "",
-  ...props
-}) {
-  return /* @__PURE__ */ jsx(
-    Card,
-    {
-      status,
-      statusIcon,
-      statusText,
-      className,
-      ...props,
-      children
+    if (!hasPerformedInitialFocusRef.current) {
+      previousActiveElementRef.current = document.activeElement;
     }
-  );
-}
-function ClickableCard({
-  onClick,
-  children,
-  className = "",
-  ...props
-}) {
-  return /* @__PURE__ */ jsx(Card, { onClick, clickable: true, hover: true, className, ...props, children });
-}
-function AccordionCard({
-  accordion = true,
-  children,
-  className = "",
-  ...props
-}) {
-  return /* @__PURE__ */ jsx(Card, { accordion, className, ...props, children });
-}
-var variantClasses3 = {
-  default: "text-foreground hover:text-primary",
-  primary: "text-primary hover:text-primary/80",
-  muted: "text-muted-foreground hover:text-foreground"
-};
-var Link = forwardRef(
-  ({
-    href,
-    variant = "default",
-    underline = false,
-    external = false,
-    className = "",
-    children,
-    ...props
-  }, ref) => {
-    const classes = [
-      "transition-colors",
-      variantClasses3[variant],
-      underline ? "underline underline-offset-4" : "hover:underline hover:underline-offset-4",
-      className
-    ].filter(Boolean).join(" ");
-    if (external || href.startsWith("http")) {
-      return /* @__PURE__ */ jsx(
-        "a",
-        {
-          ref,
-          href,
-          className: classes,
-          target: "_blank",
-          rel: "noopener noreferrer",
-          ...props,
-          children
+    let timeoutId = null;
+    if (!hasPerformedInitialFocusRef.current) {
+      const focusableElements = getFocusableElements();
+      const firstFocusable = focusableElements[0];
+      timeoutId = setTimeout(() => {
+        const activeElement = document.activeElement;
+        const isHTMLElement = activeElement instanceof HTMLElement;
+        const isUserTyping = activeElement && (activeElement.tagName === "INPUT" || activeElement.tagName === "TEXTAREA" || isHTMLElement && activeElement.isContentEditable);
+        const isFocusInModal = modalContentRef.current?.contains(activeElement);
+        if (!isUserTyping && !isFocusInModal) {
+          if (firstFocusable) {
+            firstFocusable.focus();
+            hasPerformedInitialFocusRef.current = true;
+          } else if (modalContentRef.current) {
+            modalContentRef.current.focus();
+            hasPerformedInitialFocusRef.current = true;
+          }
+        } else if (isFocusInModal) {
+          hasPerformedInitialFocusRef.current = true;
         }
-      );
+      }, 100);
     }
-    return /* @__PURE__ */ jsx(NextLink, { ref, href, className: classes, ...props, children });
-  }
-);
-Link.displayName = "Link";
-var Link_default = Link;
-function FormInput({
-  label,
-  name,
-  type = "text",
-  value,
-  onChange,
-  placeholder,
-  required = false,
-  disabled = false,
-  error,
-  className = "",
-  inputClassName = "",
-  min,
-  max,
-  step,
-  maxLength,
-  autoComplete,
-  description,
-  footerDescription,
-  autoFocus = false,
-  onKeyDown,
-  onBlur,
-  icon,
-  rows = 3,
-  showHidePassword = false,
-  onGeneratePassword,
-  copyable = false,
-  readOnly = false,
-  clearable = true
-}) {
-  const [showPassword, setShowPassword] = useState(false);
-  const [copied, setCopied] = useState(false);
-  const handleCopy = async () => {
-    try {
-      await navigator.clipboard.writeText(String(value));
-      setCopied(true);
-      setTimeout(() => setCopied(false), 2e3);
-    } catch (err) {
-      console.error("Failed to copy:", err);
-    }
-  };
-  const shouldShowIcons = (inputType) => {
-    return inputType !== "checkbox" && inputType !== "textarea";
-  };
-  const getIconConfig = (iconProp) => {
-    if (!iconProp) return { left: null, right: null };
-    if (React4.isValidElement(iconProp)) {
-      return { left: iconProp, right: null };
-    }
-    if (typeof iconProp === "object" && iconProp !== null && ("left" in iconProp || "right" in iconProp)) {
-      return { left: iconProp.left || null, right: iconProp.right || null };
-    }
-    return {
-      left: React4.isValidElement(iconProp) ? iconProp : null,
-      right: null
+    const handleTab = (event) => {
+      if (event.key !== "Tab") return;
+      const focusableElements = getFocusableElements();
+      if (focusableElements.length === 0) return;
+      const firstElement = focusableElements[0];
+      const lastElement = focusableElements[focusableElements.length - 1];
+      if (event.shiftKey) {
+        if (document.activeElement === firstElement) {
+          event.preventDefault();
+          lastElement.focus();
+        }
+      } else {
+        if (document.activeElement === lastElement) {
+          event.preventDefault();
+          firstElement.focus();
+        }
+      }
     };
-  };
-  const renderIcon = (iconNode, position) => {
-    if (!iconNode) return null;
-    const rightPositionClass = position === "right" && type === "number" ? "right-4 pr-3" : position === "right" ? "right-0 pr-3" : "left-0 pl-3";
-    return /* @__PURE__ */ jsx(
-      "div",
-      {
-        className: `absolute inset-y-0 ${rightPositionClass} flex items-center pointer-events-none`,
-        children: /* @__PURE__ */ jsx("div", { className: "text-muted-foreground", children: iconNode })
+    const handleEsc = (event) => {
+      if (event.key === "Escape" && !blocking) {
+        onClose();
       }
-    );
+    };
+    document.addEventListener("keydown", handleTab);
+    document.addEventListener("keydown", handleEsc);
+    document.body.style.overflow = "hidden";
+    return () => {
+      if (timeoutId) {
+        clearTimeout(timeoutId);
+      }
+      document.removeEventListener("keydown", handleTab);
+      document.removeEventListener("keydown", handleEsc);
+      document.body.style.overflow = "unset";
+      if (!isOpen && previousActiveElementRef.current) {
+        previousActiveElementRef.current.focus();
+      }
+    };
+  }, [isOpen, onClose, blocking]);
+  const modalRoot = (() => {
+    if (typeof document === "undefined") return null;
+    let root = document.getElementById("modal-root");
+    if (!root) {
+      root = document.createElement("div");
+      root.id = "modal-root";
+      document.body.appendChild(root);
+    }
+    return root;
+  })();
+  if (!modalRoot) {
+    return null;
+  }
+  const backdropVariants = {
+    hidden: { opacity: 0 },
+    visible: { opacity: 1 }
   };
-  const getInputPaddingClasses = (inputType, iconConfig) => {
-    if (!shouldShowIcons(inputType)) return "";
-    const paddingClasses2 = [];
-    if (iconConfig.left) paddingClasses2.push("pl-10");
-    if (iconConfig.right) {
-      paddingClasses2.push(inputType === "number" ? "pr-12" : "pr-10");
+  const modalVariants = {
+    hidden: {
+      opacity: 0,
+      scale: 0.95,
+      y: 20
+    },
+    visible: {
+      opacity: 1,
+      scale: 1,
+      y: 0,
+      transition: {
+        duration: 0.2,
+        ease: "easeOut"
+      }
+    },
+    exit: {
+      opacity: 0,
+      scale: 0.9,
+      y: 100,
+      // Slide down much further for reverse effect
+      transition: {
+        duration: 0.3,
+        ease: "easeIn"
+      }
     }
-    return paddingClasses2.join(" ");
   };
-  return /* @__PURE__ */ jsx("div", { className: `form-group ${className}`, children: type === "checkbox" ? /* @__PURE__ */ jsxs("div", { className: "flex items-center p-2 space-x-3 h-full", children: [
-    /* @__PURE__ */ jsx(
-      "input",
-      {
-        id: name,
-        name,
-        type: "checkbox",
-        checked: Boolean(value),
-        onChange: (e) => {
-          const newValue = e.target.checked;
-          const syntheticEvent = {
-            target: {
-              name: e.target.name,
-              value: newValue,
-              checked: newValue
+  if (!isOpen) return null;
+  if (variant === "plain") {
+    return createPortal(
+      /* @__PURE__ */ jsx(AnimatePresence, { children: /* @__PURE__ */ jsx(
+        motion.div,
+        {
+          className: `modal-backdrop fixed inset-0 w-screen h-screen flex items-center ${customStyles.backdrop?.includes("justify-") ? customStyles.backdrop : customStyles.backdrop ? `${customStyles.backdrop} justify-center` : "justify-center bg-black/10"} z-[999999] m-0 ${fullScreen ? "p-0" : "p-4"}`,
+          variants: backdropVariants,
+          initial: "hidden",
+          animate: isOpen ? "visible" : "hidden",
+          exit: "hidden",
+          onClick: blocking ? void 0 : onClose,
+          children: /* @__PURE__ */ jsx(
+            motion.div,
+            {
+              ref: modalContentRef,
+              role: "dialog",
+              "aria-modal": "true",
+              "aria-labelledby": title ? "modal-title-plain" : void 0,
+              "aria-describedby": ariaDescribedBy || "modal-content-plain",
+              tabIndex: -1,
+              className: `w-full flex flex-col overflow-hidden relative z-[1000000] ${customStyles.container || "bg-card shadow-xl"} ${fullScreen ? "h-full rounded-none" : `rounded-lg ${className} ${sizeClasses3[size]} max-h-[90vh]`}`,
+              variants: modalVariants,
+              initial: "hidden",
+              animate: isOpen ? "visible" : "exit",
+              exit: "exit",
+              onClick: (e) => e.stopPropagation(),
+              children: /* @__PURE__ */ jsx(
+                "div",
+                {
+                  id: "modal-content-plain",
+                  className: `flex-1 ${customStyles.content || ""}`,
+                  children
+                }
+              )
             },
-            currentTarget: {
-              name: e.target.name,
-              value: newValue,
-              checked: newValue
-            }
-          };
-          onChange(syntheticEvent);
+            "modal-content"
+          )
         },
-        required,
-        disabled,
-        onKeyDown,
-        className: "sr-only",
-        "aria-label": label,
-        "aria-describedby": error ? `${name}-error` : description ? `${name}-description` : void 0,
-        "aria-invalid": error ? "true" : "false"
-      }
-    ),
-    /* @__PURE__ */ jsx(
-      "button",
+        "modal-backdrop"
+      ) }),
+      modalRoot
+    );
+  }
+  return createPortal(
+    /* @__PURE__ */ jsx(AnimatePresence, { children: /* @__PURE__ */ jsx(
+      motion.div,
       {
-        type: "button",
-        onClick: () => {
-          if (!disabled) {
-            const checkbox = document.getElementById(
-              name
-            );
-            if (checkbox) {
-              checkbox.click();
-            }
-          }
-        },
-        disabled,
-        className: `
-              relative inline-flex h-6 w-11 items-center rounded-full transition-colors duration-200 ease-in-out focus:outline-none focus:ring-2 focus:ring-primary focus:ring-offset-2
-              ${Boolean(value) ? "bg-primary" : "bg-muted"}
-              ${disabled ? "opacity-50 cursor-not-allowed" : "cursor-pointer"}
-              ${error ? "ring-2 ring-destructive" : ""}
-            `,
-        "aria-label": `${label}${required ? " (required)" : ""}`,
-        "aria-describedby": name,
-        children: /* @__PURE__ */ jsx(
-          "span",
+        className: `modal-backdrop fixed inset-0 w-screen h-screen bg-black/10 flex items-center ${customStyles.backdrop || "justify-center"} z-[999999] m-0 ${fullScreen ? "p-0" : "p-4"}`,
+        variants: backdropVariants,
+        initial: "hidden",
+        animate: isOpen ? "visible" : "hidden",
+        exit: "hidden",
+        onClick: blocking ? void 0 : onClose,
+        children: /* @__PURE__ */ jsxs(
+          motion.div,
           {
-            className: `
-                inline-block h-4 w-4 transform rounded-full bg-background border border-border transition duration-200 ease-in-out
-                ${Boolean(value) ? "translate-x-6" : "translate-x-1"}
-              `
-          }
-        )
-      }
-    ),
-    /* @__PURE__ */ jsxs("div", { className: "flex flex-col", children: [
-      /* @__PURE__ */ jsxs(
-        "label",
-        {
-          htmlFor: name,
-          className: "text-sm font-medium text-foreground cursor-pointer",
-          onClick: () => {
-            if (!disabled) {
-              const checkbox = document.getElementById(
-                name
-              );
-              if (checkbox) {
-                checkbox.click();
-              }
-            }
+            ref: modalContentRef,
+            role: "dialog",
+            "aria-modal": "true",
+            "aria-labelledby": title ? "modal-title" : void 0,
+            "aria-describedby": ariaDescribedBy || "modal-content",
+            tabIndex: -1,
+            className: `bg-card border border-border shadow-xl w-full flex flex-col overflow-hidden relative z-[1000000] ${fullScreen ? "h-full rounded-none" : `rounded-lg ${customStyles.container || className || sizeClasses3[size]} max-h-[90vh]`}`,
+            variants: modalVariants,
+            initial: "hidden",
+            animate: isOpen ? "visible" : "exit",
+            exit: "exit",
+            onClick: (e) => e.stopPropagation(),
+            children: [
+              header ? /* @__PURE__ */ jsx("div", { className: "flex-shrink-0", children: header }) : title ? /* @__PURE__ */ jsxs(
+                "div",
+                {
+                  className: `px-6 py-4 border-b border-border flex justify-between items-center flex-shrink-0 ${customStyles.header || ""}`,
+                  children: [
+                    /* @__PURE__ */ jsx(
+                      "h2",
+                      {
+                        id: "modal-title",
+                        className: "text-xl font-semibold text-foreground",
+                        children: title
+                      }
+                    ),
+                    /* @__PURE__ */ jsx(
+                      "button",
+                      {
+                        onClick: onClose,
+                        className: "p-2 text-muted-foreground hover:text-foreground hover:bg-muted rounded-full transition-colors",
+                        title: "Close",
+                        "aria-label": "Close modal",
+                        disabled: blocking,
+                        children: /* @__PURE__ */ jsx(RiCloseLine, { className: "w-5 h-5", "aria-hidden": "true" })
+                      }
+                    )
+                  ]
+                }
+              ) : null,
+              /* @__PURE__ */ jsx(
+                "div",
+                {
+                  id: "modal-content",
+                  className: `bg-background text-foreground flex-1 ${scrollable ? "overflow-y-auto" : ""} ${fullScreen || noPadding ? "p-0" : "px-6 py-4"}`,
+                  children
+                }
+              ),
+              footer && /* @__PURE__ */ jsx(
+                "div",
+                {
+                  className: `flex-shrink-0 px-6 py-4 border-t border-border ${footerBg === "white" ? "bg-card" : "bg-muted"} ${customStyles.footer || ""}`,
+                  children: footer
+                }
+              )
+            ]
           },
-          children: [
-            label,
-            required && /* @__PURE__ */ jsx("span", { className: "text-destructive ml-1", "aria-label": "required", children: "*" })
-          ]
-        }
-      ),
-      description && /* @__PURE__ */ jsx(
-        "span",
-        {
-          id: `${name}-description`,
-          className: "text-xs text-muted-foreground",
-          children: description
-        }
-      )
-    ] }),
-    error && /* @__PURE__ */ jsx("div", { id: `${name}-error`, className: "form-error", role: "alert", children: typeof error === "string" ? /* @__PURE__ */ jsx("p", { children: error }) : error })
-  ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
-    label && /* @__PURE__ */ jsxs("label", { htmlFor: name, className: "form-label", children: [
-      label,
-      required && /* @__PURE__ */ jsx("span", { className: "form-label-required", children: "*" })
-    ] }),
-    description && /* @__PURE__ */ jsx("p", { id: `${name}-description`, className: "form-description", children: description }),
-    type === "textarea" ? /* @__PURE__ */ jsx(
-      "textarea",
-      {
-        id: name,
-        name,
-        value,
-        onChange,
-        placeholder,
-        required,
-        disabled,
-        autoFocus,
-        onKeyDown,
-        onBlur,
-        rows,
-        maxLength,
-        "aria-invalid": error ? "true" : "false",
-        "aria-describedby": error ? `${name}-error` : description ? `${name}-description` : void 0,
-        className: `form-input ${error ? "form-input-error" : ""} ${inputClassName}`
-      }
-    ) : type === "color" ? /* @__PURE__ */ jsxs("div", { className: "flex items-center space-x-3", children: [
-      /* @__PURE__ */ jsxs("div", { className: "relative w-10 h-10 border border-input rounded-md overflow-hidden bg-card", children: [
-        /* @__PURE__ */ jsx(
-          "input",
-          {
-            id: name,
-            name,
-            type: "color",
-            value,
-            onChange,
-            required,
-            disabled,
-            className: "absolute inset-0 w-full h-full cursor-pointer opacity-0"
-          }
-        ),
-        /* @__PURE__ */ jsx(
-          "div",
-          {
-            className: "w-full h-full rounded-md",
-            style: { backgroundColor: value }
-          }
+          "modal-content"
         )
-      ] }),
-      /* @__PURE__ */ jsxs("div", { className: "relative", children: [
+      },
+      "modal-backdrop"
+    ) }),
+    modalRoot
+  );
+}
+function ConfirmDialog({ isOpen, options, onConfirm, onCancel }) {
+  const { title, message, confirmText, cancelText = "Cancel", confirmButtonColor = "blue" } = options;
+  const getConfirmVariant = () => {
+    switch (confirmButtonColor) {
+      case "red":
+        return "danger";
+      case "green":
+        return "primary";
+      case "blue":
+      default:
+        return "primary";
+    }
+  };
+  return /* @__PURE__ */ jsx(Modal, { isOpen, onClose: onCancel, title, children: /* @__PURE__ */ jsxs("div", { className: "space-y-4", children: [
+    /* @__PURE__ */ jsx("p", { className: "text-foreground", children: message }),
+    /* @__PURE__ */ jsxs("div", { className: "flex gap-3 justify-end", children: [
+      /* @__PURE__ */ jsx(Button_default, { variant: "secondary", onClick: onCancel, children: cancelText }),
+      /* @__PURE__ */ jsx(Button_default, { variant: getConfirmVariant(), onClick: onConfirm, children: confirmText })
+    ] })
+  ] }) });
+}
+function useConfirmDialog() {
+  const [isOpen, setIsOpen] = useState(false);
+  const [options, setOptions] = useState({
+    title: "",
+    message: "",
+    confirmText: "Confirm"
+  });
+  const [resolver, setResolver] = useState(null);
+  const confirm = (opts) => {
+    setOptions(opts);
+    setIsOpen(true);
+    return new Promise((resolve) => {
+      setResolver(() => resolve);
+    });
+  };
+  const handleConfirm = () => {
+    setIsOpen(false);
+    if (resolver) {
+      resolver(true);
+      setResolver(null);
+    }
+  };
+  const handleCancel = () => {
+    setIsOpen(false);
+    if (resolver) {
+      resolver(false);
+      setResolver(null);
+    }
+  };
+  const dialog = /* @__PURE__ */ jsx(
+    ConfirmDialog,
+    {
+      isOpen,
+      options,
+      onConfirm: handleConfirm,
+      onCancel: handleCancel
+    }
+  );
+  return { confirm, dialog };
+}
+var ConfirmDialog_default = ConfirmDialog;
+var paddingClasses2 = {
+  none: "",
+  sm: "p-4",
+  md: "p-6",
+  lg: "p-8"
+};
+function Container({
+  children,
+  className = "",
+  padding = "md",
+  id
+}) {
+  return /* @__PURE__ */ jsx("div", { id, className: `${paddingClasses2[padding]} ${className}`, children });
+}
+var EmptyState = ({
+  icon: Icon,
+  title,
+  subtitle,
+  action,
+  className = ""
+}) => {
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: `text-center py-12 text-secondary-foreground p-6 lg:p-12 ${className}`,
+      role: "status",
+      "aria-live": "polite",
+      children: [
         /* @__PURE__ */ jsx(
-          "input",
+          Icon,
           {
-            id: `${name}-text`,
-            name: `${name}-text`,
-            type: "text",
-            value,
-            onChange,
-            placeholder,
-            required,
-            disabled,
-            maxLength,
-            autoComplete,
-            autoFocus,
-            onKeyDown,
-            onBlur,
-            className: `form-input max-w-24 ${error ? "form-input-error" : ""} ${getInputPaddingClasses(type, getIconConfig(icon))} ${inputClassName}`,
-            "aria-label": `${label} text input`
+            className: "w-12 h-12 mx-auto mb-3 text-muted-foreground",
+            "aria-hidden": "true"
           }
         ),
-        shouldShowIcons(type) && (() => {
-          const iconConfig = getIconConfig(icon);
-          return /* @__PURE__ */ jsxs(Fragment, { children: [
-            renderIcon(iconConfig.left, "left"),
-            renderIcon(iconConfig.right, "right")
-          ] });
-        })()
-      ] })
-    ] }) : showHidePassword && type === "password" ? /* @__PURE__ */ jsxs("div", { className: "relative", children: [
+        /* @__PURE__ */ jsx("p", { className: "text-sm font-medium mb-1", children: title }),
+        /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground mb-4", children: subtitle }),
+        action && /* @__PURE__ */ jsx("div", { className: "flex justify-center", children: action })
+      ]
+    }
+  );
+};
+var EmptyState_default = EmptyState;
+function useKeyboardNavigation({
+  isOpen,
+  optionsLength,
+  onSelect,
+  onClose,
+  onOpen
+}) {
+  const [focusedIndex, setFocusedIndex] = useState(-1);
+  const resetFocus = useCallback(() => {
+    setFocusedIndex(-1);
+  }, []);
+  const handleKeyDown = useCallback(
+    (e) => {
+      if (!isOpen) {
+        if (e.key === "Enter" || e.key === " " || e.key === "ArrowDown") {
+          e.preventDefault();
+          onOpen?.();
+        }
+        return;
+      }
+      switch (e.key) {
+        case "ArrowDown":
+          e.preventDefault();
+          setFocusedIndex((prev) => prev < optionsLength - 1 ? prev + 1 : 0);
+          break;
+        case "ArrowUp":
+          e.preventDefault();
+          setFocusedIndex((prev) => prev > 0 ? prev - 1 : optionsLength - 1);
+          break;
+        case "Enter":
+          e.preventDefault();
+          if (focusedIndex >= 0 && focusedIndex < optionsLength) {
+            onSelect(focusedIndex);
+          }
+          break;
+        case "Escape":
+          e.preventDefault();
+          onClose();
+          resetFocus();
+          break;
+        case "Tab":
+          onClose();
+          resetFocus();
+          break;
+      }
+    },
+    [isOpen, optionsLength, focusedIndex, onSelect, onClose, onOpen, resetFocus]
+  );
+  return {
+    focusedIndex,
+    handleKeyDown,
+    resetFocus,
+    setFocusedIndex
+  };
+}
+function SmartDropdown({
+  isOpen,
+  onClose,
+  trigger,
+  children,
+  className = "",
+  width = 384,
+  maxHeight = 450,
+  offset = 8,
+  margin = 16,
+  id = "dropdown-listbox",
+  position = "auto"
+}) {
+  const [dropdownPosition, setDropdownPosition] = useState({
+    top: 0,
+    left: 0,
+    right: void 0,
+    width: 0,
+    maxHeight: 0,
+    isAbove: false
+  });
+  const dropdownRef = useRef(null);
+  const triggerRef = useRef(null);
+  const calculateDropdownPosition = useCallback(() => {
+    if (!triggerRef.current) return;
+    const triggerRect = triggerRef.current.getBoundingClientRect();
+    const viewportWidth = window.innerWidth;
+    const viewportHeight = window.innerHeight;
+    const spaceAbove = triggerRect.top - margin;
+    const spaceBelow = viewportHeight - triggerRect.bottom - margin;
+    let calculatedWidth;
+    if (width === "fit-content") {
+      calculatedWidth = triggerRect.width;
+    } else if (width === "auto") {
+      calculatedWidth = triggerRect.width;
+    } else if (typeof width === "number") {
+      calculatedWidth = Math.min(width, viewportWidth - margin * 2);
+    } else {
+      calculatedWidth = triggerRect.width;
+    }
+    const calculatedMaxHeight = Math.min(
+      maxHeight,
+      Math.max(spaceAbove, spaceBelow)
+    );
+    let left = triggerRect.left;
+    let right = void 0;
+    if (position === "top-right" || position === "bottom-right") {
+      left = triggerRect.right - calculatedWidth;
+    } else if (position === "top-left" || position === "bottom-left") {
+      left = triggerRect.left;
+    } else if (position === "top-left-aligned" || position === "bottom-left-aligned") {
+      const availableLeftSpace = triggerRect.left - margin;
+      const dynamicOffset = Math.max(20, availableLeftSpace * 0.2);
+      right = viewportWidth - triggerRect.left + dynamicOffset;
+      left = 0;
+      calculatedWidth = Math.min(
+        calculatedWidth,
+        triggerRect.left - dynamicOffset - margin
+      );
+    } else {
+      if (left + calculatedWidth > viewportWidth - margin) {
+        left = triggerRect.right - calculatedWidth;
+      }
+    }
+    if (left !== void 0 && left < margin) {
+      left = margin;
+    }
+    let top = triggerRect.bottom + offset;
+    let finalMaxHeight = calculatedMaxHeight;
+    let isAbove = false;
+    if (spaceAbove > spaceBelow && top + calculatedMaxHeight > viewportHeight - margin) {
+      isAbove = true;
+      top = triggerRect.top - calculatedMaxHeight - offset;
+      finalMaxHeight = Math.min(calculatedMaxHeight, spaceAbove);
+      if (top < margin) {
+        top = margin;
+        finalMaxHeight = triggerRect.top - margin - offset;
+      }
+    } else {
+      finalMaxHeight = Math.min(calculatedMaxHeight, spaceBelow);
+      if (top + finalMaxHeight > viewportHeight - margin) {
+        top = viewportHeight - margin - finalMaxHeight;
+      }
+    }
+    if (position === "top-right") {
+      left = triggerRect.right - calculatedWidth;
+      top = triggerRect.top - offset;
+      isAbove = true;
+      finalMaxHeight = Math.min(maxHeight, spaceAbove);
+    } else if (position === "top-left") {
+      left = triggerRect.left;
+      top = triggerRect.top - offset;
+      isAbove = true;
+      finalMaxHeight = Math.min(maxHeight, spaceAbove);
+    } else if (position === "bottom-right") {
+      left = triggerRect.right - calculatedWidth;
+      top = triggerRect.bottom + offset;
+      isAbove = false;
+      finalMaxHeight = Math.min(maxHeight, spaceBelow);
+    } else if (position === "bottom-left") {
+      left = triggerRect.left;
+      top = triggerRect.bottom + offset;
+      isAbove = false;
+      finalMaxHeight = Math.min(maxHeight, spaceBelow);
+    } else if (position === "top-left-aligned") {
+      right = viewportWidth - triggerRect.right;
+      left = 0;
+      top = triggerRect.top - offset;
+      isAbove = true;
+      finalMaxHeight = Math.min(maxHeight, spaceAbove);
+    } else if (position === "bottom-left-aligned") {
+      right = viewportWidth - triggerRect.right;
+      left = 0;
+      top = triggerRect.bottom + offset;
+      isAbove = false;
+      finalMaxHeight = Math.min(maxHeight, spaceBelow);
+    }
+    setDropdownPosition({
+      top,
+      left,
+      right,
+      width: calculatedWidth,
+      maxHeight: finalMaxHeight,
+      isAbove
+    });
+  }, [width, maxHeight, margin, offset, position]);
+  useEffect(() => {
+    const handleClickOutside = (event) => {
+      const target = event.target;
+      const isInsideDropdown = dropdownRef.current?.contains(target);
+      const isInsideTrigger = triggerRef.current?.contains(target);
+      if (!isInsideDropdown && !isInsideTrigger) {
+        onClose();
+      }
+    };
+    document.addEventListener("mousedown", handleClickOutside);
+    return () => document.removeEventListener("mousedown", handleClickOutside);
+  }, [onClose]);
+  useEffect(() => {
+    if (isOpen) {
+      calculateDropdownPosition();
+    }
+  }, [isOpen, calculateDropdownPosition]);
+  useEffect(() => {
+    if (!isOpen) return;
+    const handleResize = () => {
+      calculateDropdownPosition();
+    };
+    const handleScroll = () => {
+      calculateDropdownPosition();
+    };
+    window.addEventListener("resize", handleResize);
+    window.addEventListener("scroll", handleScroll, true);
+    return () => {
+      window.removeEventListener("resize", handleResize);
+      window.removeEventListener("scroll", handleScroll, true);
+    };
+  }, [isOpen, calculateDropdownPosition]);
+  useEffect(() => {
+    if (!isOpen || !dropdownRef.current || !triggerRef.current) return;
+    if (dropdownPosition.isAbove) {
+      const adjustPosition = () => {
+        const dropdownRect = dropdownRef.current?.getBoundingClientRect();
+        const triggerRect = triggerRef.current?.getBoundingClientRect();
+        if (!dropdownRect || !triggerRect) return;
+        const actualHeight = dropdownRect.height;
+        const newTop = triggerRect.top - actualHeight - offset;
+        if (newTop !== dropdownPosition.top && newTop >= margin) {
+          setDropdownPosition((prev) => ({
+            ...prev,
+            top: newTop
+          }));
+        }
+      };
+      const resizeObserver = new ResizeObserver(() => {
+        setTimeout(adjustPosition, 0);
+      });
+      resizeObserver.observe(dropdownRef.current);
+      adjustPosition();
+      return () => {
+        resizeObserver.disconnect();
+      };
+    }
+  }, [isOpen, dropdownPosition.isAbove, dropdownPosition.top, offset, margin]);
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref: triggerRef,
+        className: "w-full",
+        role: "combobox",
+        "aria-expanded": isOpen,
+        "aria-haspopup": "listbox",
+        "aria-controls": "dropdown-listbox",
+        children: trigger
+      }
+    ),
+    isOpen && typeof window !== "undefined" && createPortal(
       /* @__PURE__ */ jsx(
-        "input",
+        "div",
         {
-          id: name,
-          name,
-          type: showPassword ? "text" : "password",
-          value,
-          onChange,
-          placeholder,
-          required,
-          disabled: disabled || readOnly,
-          readOnly,
-          maxLength,
-          autoComplete,
-          autoFocus,
-          onKeyDown,
-          onBlur,
-          "aria-invalid": error ? "true" : "false",
-          "aria-describedby": error ? `${name}-error` : description ? `${name}-description` : void 0,
-          className: `form-input ${error ? "form-input-error" : ""} ${readOnly ? "bg-muted cursor-default" : ""} ${copyable ? "pr-20" : "pr-10"} ${getInputPaddingClasses(type, getIconConfig(icon))} ${inputClassName}`
-        }
-      ),
-      shouldShowIcons(type) && (() => {
-        const iconConfig = getIconConfig(icon);
-        return /* @__PURE__ */ jsxs(Fragment, { children: [
-          renderIcon(iconConfig.left, "left"),
-          renderIcon(iconConfig.right, "right")
-        ] });
-      })(),
-      copyable && /* @__PURE__ */ jsx(
-        "button",
-        {
-          type: "button",
-          onClick: handleCopy,
-          className: "absolute inset-y-0 right-8 flex items-center pr-3 text-muted-foreground hover:text-foreground transition-colors duration-200 z-10",
-          "aria-label": `Copy ${label}`,
-          title: copied ? "Copied!" : `Copy ${label}`,
-          children: copied ? /* @__PURE__ */ jsx(RiCheckLine, { className: "w-4 h-4 text-green-500", "aria-hidden": "true" }) : /* @__PURE__ */ jsx(RiFileCopyLine, { className: "w-4 h-4", "aria-hidden": "true" })
-        }
-      ),
-      /* @__PURE__ */ jsx(
-        "button",
-        {
-          type: "button",
-          onClick: () => setShowPassword(!showPassword),
-          className: "absolute inset-y-0 right-0 flex items-center pr-3 text-muted-foreground hover:text-foreground transition-colors duration-200 z-10",
-          "aria-label": showPassword ? "Hide password" : "Show password",
-          title: showPassword ? "Hide password" : "Show password",
-          children: showPassword ? /* @__PURE__ */ jsx(RiEyeOffLine, { className: "w-4 h-4", "aria-hidden": "true" }) : /* @__PURE__ */ jsx(RiEyeLine, { className: "w-4 h-4", "aria-hidden": "true" })
-        }
-      ),
-      onGeneratePassword && !readOnly && /* @__PURE__ */ jsx(
-        "button",
-        {
-          type: "button",
-          onClick: onGeneratePassword,
-          className: `absolute inset-y-0 ${copyable ? "right-16" : "right-8"} flex items-center pr-3 text-muted-foreground hover:text-foreground transition-colors duration-200 z-10`,
-          "aria-label": "Generate new password",
-          title: "Generate new password",
-          children: /* @__PURE__ */ jsx(RiRefreshLine, { className: "w-4 h-4", "aria-hidden": "true" })
-        }
-      )
-    ] }) : /* @__PURE__ */ jsxs("div", { className: "relative group", children: [
-      /* @__PURE__ */ jsx(
-        "input",
-        {
-          id: name,
-          name,
-          type,
-          value,
-          onChange,
-          placeholder,
-          required,
-          disabled: disabled || readOnly,
-          readOnly,
-          min,
-          max,
-          step,
-          maxLength,
-          autoComplete,
-          autoFocus,
-          onKeyDown,
-          onBlur,
-          "aria-invalid": error ? "true" : "false",
-          "aria-describedby": error ? `${name}-error` : description ? `${name}-description` : void 0,
-          className: `form-input ${error ? "form-input-error" : ""} ${readOnly ? "bg-muted cursor-default" : ""} ${copyable ? "pr-10" : ""} ${getInputPaddingClasses(type, getIconConfig(icon))} ${inputClassName}`
-        }
-      ),
-      shouldShowIcons(type) && (() => {
-        const iconConfig = getIconConfig(icon);
-        return /* @__PURE__ */ jsxs(Fragment, { children: [
-          renderIcon(iconConfig.left, "left"),
-          renderIcon(iconConfig.right, "right")
-        ] });
-      })(),
-      copyable && /* @__PURE__ */ jsx(
-        "button",
-        {
-          type: "button",
-          onClick: handleCopy,
-          className: `absolute inset-y-0 right-0 flex items-center pr-3 text-muted-foreground hover:text-foreground transition-all duration-200 z-10`,
-          "aria-label": `Copy ${label}`,
-          title: copied ? "Copied!" : `Copy ${label}`,
-          children: copied ? /* @__PURE__ */ jsx(RiCheckLine, { className: "w-4 h-4 text-green-500", "aria-hidden": "true" }) : /* @__PURE__ */ jsx(RiFileCopyLine, { className: "w-4 h-4", "aria-hidden": "true" })
-        }
-      ),
-      clearable && !copyable && value !== "" && value !== null && value !== void 0 && !disabled && !readOnly && /* @__PURE__ */ jsx(
-        "button",
-        {
-          type: "button",
-          onClick: () => {
-            const syntheticEvent = {
-              target: { name, value: "" }
-            };
-            onChange(syntheticEvent);
+          ref: dropdownRef,
+          id,
+          "data-smart-dropdown": true,
+          role: "listbox",
+          "aria-label": "Dropdown options",
+          className: `fixed z-[1000001] card overflow-hidden`,
+          style: {
+            top: dropdownPosition.top,
+            ...dropdownPosition.left !== void 0 ? { left: dropdownPosition.left } : {},
+            ...dropdownPosition.right !== void 0 ? { right: dropdownPosition.right } : {},
+            width: width === "fit-content" ? "auto" : dropdownPosition.width,
+            maxHeight: dropdownPosition.maxHeight
           },
-          className: `absolute inset-y-0 ${type === "number" ? "right-4" : "right-0"} flex items-center pr-3 text-muted-foreground hover:text-muted-foreground transition-all duration-200 z-10 opacity-0 group-hover:opacity-100`,
-          "aria-label": `Clear ${label}`,
-          title: `Clear ${label}`,
-          children: /* @__PURE__ */ jsx(RiCloseLine, { className: "w-4 h-4", "aria-hidden": "true" })
+          onClick: (e) => {
+            e.stopPropagation();
+          },
+          children: /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: className ? className : "overflow-y-auto",
+              style: { maxHeight: dropdownPosition.maxHeight },
+              children: typeof children === "function" ? children({ isAbove: dropdownPosition.isAbove }) : children
+            }
+          )
         }
-      )
-    ] }),
-    footerDescription && /* @__PURE__ */ jsx("p", { className: "text-xs mt-1", children: footerDescription }),
-    error && /* @__PURE__ */ jsx("div", { id: `${name}-error`, className: "form-error", role: "alert", children: typeof error === "string" ? /* @__PURE__ */ jsx("p", { children: error }) : error })
-  ] }) });
+      ),
+      document.body
+    )
+  ] });
 }
-function Switch({
-  checked,
+function SmartSelect({
+  options,
+  value,
   onChange,
-  disabled = false,
-  label,
-  description,
+  placeholder = "Select option...",
   className = "",
-  size = "md"
+  description,
+  disabled = false,
+  multiple = false,
+  width,
+  searchable = false,
+  keepOpen = false,
+  clearable = true,
+  // API integration props
+  onOpen,
+  onClose,
+  onSearch,
+  isLoading = false
 }) {
-  const toggle = () => {
-    if (!disabled) {
-      onChange(!checked);
+  const [isOpen, setIsOpen] = useState(false);
+  const [triggerWidth, setTriggerWidth] = useState(
+    void 0
+  );
+  const [searchTerm, setSearchTerm] = useState("");
+  const [displayValue, setDisplayValue] = useState("");
+  const inputRef = useRef(null);
+  const buttonRef = useRef(null);
+  const selectedValues = multiple ? value || [] : [value];
+  const selectedOptions = options.filter(
+    (opt) => selectedValues.includes(opt.value)
+  );
+  const hasSelection = multiple ? selectedValues.length > 0 : value && value !== "";
+  const filteredOptions = searchable && searchTerm.trim() ? options.filter(
+    (option) => option.label.toLowerCase().includes(searchTerm.toLowerCase()) || option.value.toLowerCase().includes(searchTerm.toLowerCase()) || option.description?.toLowerCase().includes(searchTerm.toLowerCase())
+  ) : options;
+  const { focusedIndex, handleKeyDown, resetFocus } = useKeyboardNavigation({
+    isOpen,
+    optionsLength: filteredOptions.length,
+    onSelect: (index) => handleSelect(filteredOptions[index].value),
+    onClose: () => setIsOpen(false),
+    onOpen: () => setIsOpen(true)
+  });
+  useEffect(() => {
+    if (selectedOptions.length > 0) {
+      if (multiple) {
+        setDisplayValue(selectedOptions.map((opt) => opt.label).join(", "));
+      } else {
+        setDisplayValue(selectedOptions[0].label);
+      }
+    } else {
+      setDisplayValue("");
+    }
+  }, [selectedOptions, multiple]);
+  const handleSelect = (optionValue) => {
+    if (multiple) {
+      const currentValues = value || [];
+      const newValues = currentValues.includes(optionValue) ? currentValues.filter((v) => v !== optionValue) : [...currentValues, optionValue];
+      onChange(newValues);
+    } else {
+      onChange(optionValue);
+      setSearchTerm("");
+      setIsOpen(false);
     }
   };
-  const sizes = {
-    sm: { track: "w-8 h-4", thumb: "w-3 h-3", translate: "translate-x-4" },
-    md: { track: "w-11 h-6", thumb: "w-5 h-5", translate: "translate-x-5" },
-    lg: { track: "w-14 h-8", thumb: "w-7 h-7", translate: "translate-x-6" }
+  const currentTriggerRef = searchable ? inputRef : buttonRef;
+  useEffect(() => {
+    if (currentTriggerRef.current) {
+      const rect = currentTriggerRef.current.getBoundingClientRect();
+      setTriggerWidth(rect.width);
+    }
+  }, [isOpen, currentTriggerRef]);
+  useEffect(() => {
+    if (!currentTriggerRef.current) return;
+    const resizeObserver = new ResizeObserver(() => {
+      if (currentTriggerRef.current) {
+        const rect = currentTriggerRef.current.getBoundingClientRect();
+        setTriggerWidth(rect.width);
+      }
+    });
+    resizeObserver.observe(currentTriggerRef.current);
+    return () => {
+      resizeObserver.disconnect();
+    };
+  }, [currentTriggerRef]);
+  useEffect(() => {
+    if (isOpen && searchable && inputRef.current) {
+      setTimeout(() => {
+        inputRef.current?.focus();
+      }, 0);
+    } else if (!isOpen) {
+      setSearchTerm("");
+      resetFocus();
+    }
+  }, [isOpen, searchable, resetFocus]);
+  const handleOpen = () => {
+    setIsOpen(true);
+    onOpen?.();
   };
-  const currentSize = sizes[size];
-  return /* @__PURE__ */ jsxs("div", { className: `flex items-start ${className}`, children: [
+  const handleClose = () => {
+    setIsOpen(false);
+    onClose?.();
+  };
+  const handleSearchChange = (search) => {
+    setSearchTerm(search);
+    onSearch?.(search);
+  };
+  return /* @__PURE__ */ jsxs("div", { className: "w-full", "data-smart-select": true, children: [
+    description && /* @__PURE__ */ jsx("p", { className: "form-description", children: description }),
     /* @__PURE__ */ jsx(
-      "button",
+      SmartDropdown,
       {
-        type: "button",
-        role: "switch",
-        "aria-checked": checked,
-        disabled,
-        onClick: toggle,
-        className: `
-          relative inline-flex flex-shrink-0 cursor-pointer rounded-full border-2 border-transparent 
-          transition-colors duration-200 ease-in-out focus:outline-none focus:ring-2 focus:ring-primary focus:ring-offset-2
-          ${checked ? "bg-primary" : "bg-muted"}
-          ${disabled ? "opacity-50 cursor-not-allowed" : ""}
-          ${currentSize.track}
-        `,
-        children: /* @__PURE__ */ jsx(
-          "span",
+        isOpen,
+        onClose: handleClose,
+        width: width !== void 0 ? width : triggerWidth,
+        maxHeight: 200,
+        trigger: searchable ? /* @__PURE__ */ jsxs("div", { className: "relative", children: [
+          /* @__PURE__ */ jsx(
+            "input",
+            {
+              ref: inputRef,
+              type: "text",
+              value: isOpen ? searchTerm : displayValue,
+              onChange: (e) => {
+                if (isOpen) {
+                  handleSearchChange(e.target.value);
+                  resetFocus();
+                }
+              },
+              onFocus: () => !disabled && handleOpen(),
+              onClick: (e) => {
+                e.stopPropagation();
+                !disabled && handleOpen();
+              },
+              onKeyDown: handleKeyDown,
+              placeholder,
+              disabled,
+              role: "combobox",
+              "aria-expanded": isOpen,
+              "aria-haspopup": "listbox",
+              "aria-controls": "dropdown-listbox",
+              "aria-autocomplete": "list",
+              "aria-activedescendant": focusedIndex >= 0 ? `option-${focusedIndex}` : void 0,
+              className: `form-input truncate ${hasSelection ? "pr-12" : "pr-8"} ${disabled ? "opacity-50 cursor-not-allowed" : ""} ${className}`
+            }
+          ),
+          hasSelection && clearable && /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              onClick: (e) => {
+                e.stopPropagation();
+                onChange(multiple ? [] : "");
+              },
+              className: "absolute right-6 top-1/2 transform -translate-y-1/2 w-4 h-4 text-muted-foreground hover:text-muted-foreground transition-colors",
+              "aria-label": "Clear selection",
+              title: "Clear selection",
+              children: /* @__PURE__ */ jsx(RiCloseLine, { className: "w-4 h-4", "aria-hidden": true })
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              onClick: (e) => {
+                e.stopPropagation();
+                !disabled && setIsOpen(!isOpen);
+              },
+              className: `absolute right-2 top-1/2 transform -translate-y-1/2 w-4 h-4 text-muted-foreground hover:text-muted-foreground transition-colors ${disabled ? "opacity-50 cursor-not-allowed" : ""}`,
+              disabled,
+              "aria-label": isOpen ? "Close dropdown" : "Open dropdown",
+              "aria-expanded": isOpen,
+              children: /* @__PURE__ */ jsx(
+                DropDownArrow,
+                {
+                  isOpen,
+                  disabled,
+                  size: "sm",
+                  color: "gray",
+                  "aria-hidden": true
+                }
+              )
+            }
+          )
+        ] }) : /* @__PURE__ */ jsxs("div", { className: "relative group", children: [
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              ref: buttonRef,
+              type: "button",
+              onClick: (e) => {
+                e.stopPropagation();
+                !disabled && (isOpen ? handleClose() : handleOpen());
+              },
+              onKeyDown: handleKeyDown,
+              disabled,
+              role: "combobox",
+              "aria-expanded": isOpen,
+              "aria-haspopup": "listbox",
+              "aria-controls": "dropdown-listbox",
+              "aria-label": placeholder,
+              "aria-activedescendant": focusedIndex >= 0 ? `option-${focusedIndex}` : void 0,
+              className: `form-input flex items-center justify-between text-left ${hasSelection ? "pr-12" : "pr-8"} ${disabled ? "opacity-60 cursor-not-allowed" : ""} ${className}`,
+              children: /* @__PURE__ */ jsx(
+                "span",
+                {
+                  className: `flex items-center gap-2 min-w-0 flex-1 ${selectedOptions.length > 0 ? "" : "text-muted-foreground opacity-60"}`,
+                  children: multiple ? selectedOptions.length > 0 ? (() => {
+                    const displayText = selectedOptions.map((opt) => opt.label).join(", ");
+                    return /* @__PURE__ */ jsxs("span", { className: "flex items-center gap-1 min-w-0 flex-1", children: [
+                      selectedOptions[0].icon && /* @__PURE__ */ jsx("span", { className: "flex-shrink-0", children: selectedOptions[0].icon }),
+                      /* @__PURE__ */ jsx("span", { className: "truncate", children: displayText })
+                    ] });
+                  })() : /* @__PURE__ */ jsx("span", { className: "truncate", children: placeholder }) : selectedOptions[0] ? /* @__PURE__ */ jsxs("span", { className: "flex items-center gap-1 min-w-0 flex-1", children: [
+                    selectedOptions[0].icon && /* @__PURE__ */ jsx("span", { className: "flex-shrink-0", children: selectedOptions[0].icon }),
+                    /* @__PURE__ */ jsx("span", { className: "truncate", children: selectedOptions[0].label })
+                  ] }) : /* @__PURE__ */ jsx("span", { className: "truncate", children: placeholder })
+                }
+              )
+            }
+          ),
+          hasSelection && clearable && /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              onClick: (e) => {
+                e.stopPropagation();
+                onChange(multiple ? [] : "");
+              },
+              className: "absolute right-6 top-1/2 transform -translate-y-1/2 w-4 h-4 text-muted-foreground hover:text-muted-foreground transition-all duration-200 opacity-0 group-hover:opacity-100",
+              "aria-label": "Clear selection",
+              title: "Clear selection",
+              children: /* @__PURE__ */ jsx(RiCloseLine, { className: "w-4 h-4", "aria-hidden": true })
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              onClick: (e) => {
+                e.stopPropagation();
+                !disabled && setIsOpen(!isOpen);
+              },
+              className: `absolute right-2 top-1/2 transform -translate-y-1/2 w-4 h-4 text-muted-foreground hover:text-muted-foreground transition-colors ${disabled ? "opacity-50 cursor-not-allowed" : ""}`,
+              disabled,
+              "aria-label": isOpen ? "Close dropdown" : "Open dropdown",
+              "aria-expanded": isOpen,
+              children: /* @__PURE__ */ jsx(
+                DropDownArrow,
+                {
+                  isOpen,
+                  disabled,
+                  size: "sm",
+                  color: "gray",
+                  "aria-hidden": true
+                }
+              )
+            }
+          )
+        ] }),
+        children: /* @__PURE__ */ jsx("div", { className: "py-2", children: filteredOptions.length > 0 ? filteredOptions.map((option, index) => /* @__PURE__ */ jsxs(
+          "button",
           {
-            "aria-hidden": "true",
-            className: `
-            pointer-events-none inline-block transform rounded-full bg-white shadow ring-0 
-            transition duration-200 ease-in-out
-            ${checked ? currentSize.translate : "translate-x-0"}
-            ${currentSize.thumb}
-          `
-          }
-        )
+            id: `option-${index}`,
+            type: "button",
+            role: "option",
+            "aria-selected": selectedValues.includes(option.value),
+            onMouseDown: (e) => {
+              e.preventDefault();
+              e.stopPropagation();
+              handleSelect(option.value);
+            },
+            className: `w-full px-3 py-2 text-left text-sm hover:bg-accent flex items-center justify-between min-h-[40px] transition-colors ${selectedValues.includes(option.value) ? "bg-accent border-l-2 border-l-ring" : index === focusedIndex ? "bg-muted ring-2 ring-ring" : ""}`,
+            children: [
+              /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 min-w-0 flex-1", children: [
+                option.icon && /* @__PURE__ */ jsx("span", { className: "flex-shrink-0", children: option.icon }),
+                /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1", children: [
+                  /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+                    /* @__PURE__ */ jsx("div", { className: "font-medium text-foreground truncate", children: option.label }),
+                    option.metadata?.isDefault && /* @__PURE__ */ jsx("span", { className: "inline-flex items-center px-1.5 py-0.5 rounded text-xs font-medium success-badge flex-shrink-0", children: "Default" })
+                  ] }),
+                  option.description && /* @__PURE__ */ jsx("div", { className: "text-xs text-muted-foreground truncate", children: option.description }),
+                  option.metadata?.args && option.metadata.args.length > 0 && /* @__PURE__ */ jsxs("div", { className: "mt-1", children: [
+                    /* @__PURE__ */ jsx("div", { className: "text-xs text-secondary-foreground mb-1", children: "Arguments:" }),
+                    /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap gap-1", children: [
+                      option.metadata.args.slice(0, 3).map((arg, argIndex) => /* @__PURE__ */ jsx(
+                        "span",
+                        {
+                          className: "inline-flex items-center px-1.5 py-0.5 rounded text-xs font-mono bg-muted text-muted-foreground",
+                          children: arg
+                        },
+                        argIndex
+                      )),
+                      option.metadata.args.length > 3 && /* @__PURE__ */ jsxs("span", { className: "text-xs text-secondary-foreground", children: [
+                        "+",
+                        option.metadata.args.length - 3,
+                        " more"
+                      ] })
+                    ] })
+                  ] })
+                ] })
+              ] }),
+              multiple ? /* @__PURE__ */ jsx(
+                "input",
+                {
+                  type: "checkbox",
+                  checked: selectedValues.includes(option.value),
+                  onChange: () => {
+                  },
+                  className: "w-4 h-4 text-primary bg-muted border-border rounded focus:ring-primary focus:ring-2"
+                }
+              ) : selectedValues.includes(option.value) && /* @__PURE__ */ jsx(RiCheckLine, { className: "w-4 h-4 text-primary flex-shrink-0" })
+            ]
+          },
+          option.value
+        )) : /* @__PURE__ */ jsx("div", { className: "px-3 py-2 text-sm text-secondary-foreground flex items-center gap-2", children: isLoading ? /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx(RiLoader4Line, { className: "w-4 h-4 animate-spin" }),
+          /* @__PURE__ */ jsx("span", { children: "Loading..." })
+        ] }) : searchTerm.trim() ? /* @__PURE__ */ jsx("span", { children: "No results found" }) : /* @__PURE__ */ jsx("span", { children: "No options available" }) }) })
       }
-    ),
-    (label || description) && /* @__PURE__ */ jsxs("div", { className: "ml-3 text-sm leading-6", children: [
-      label && /* @__PURE__ */ jsx("label", { className: "font-medium text-foreground cursor-pointer", onClick: toggle, children: label }),
-      description && /* @__PURE__ */ jsx("p", { className: "text-muted-foreground", children: description })
-    ] })
+    )
   ] });
 }
-var sizeClasses3 = {
-  sm: "max-w-md",
-  md: "max-w-2xl",
-  lg: "max-w-4xl",
-  xl: "max-w-6xl",
-  full: "max-w-full mx-4"
-};
-function Modal({
-  isOpen,
-  onClose,
-  children,
-  title,
-  header,
-  blocking = false,
-  size = "md",
+function Skeleton({ className = "", children }) {
+  return /* @__PURE__ */ jsx("div", { className: `animate-pulse ${className}`, children });
+}
+function SkeletonItem({
   className = "",
-  footer,
-  fullScreen = false,
-  noPadding = false,
-  footerBg = "gray",
-  variant = "default",
-  scrollable = true,
-  "aria-describedby": ariaDescribedBy,
-  customStyles = {}
+  width = "w-full",
+  height = "h-4",
+  rounded = true,
+  animate = true
 }) {
-  const modalContentRef = useRef(null);
-  const previousActiveElementRef = useRef(null);
-  const hasPerformedInitialFocusRef = useRef(false);
-  const getFocusableElements = () => {
-    if (!modalContentRef.current) return [];
-    const focusableSelectors = [
-      "button:not([disabled])",
-      "a[href]",
-      "input:not([disabled])",
-      "select:not([disabled])",
-      "textarea:not([disabled])",
-      '[tabindex]:not([tabindex="-1"])'
-    ].join(", ");
-    return Array.from(
-      modalContentRef.current.querySelectorAll(focusableSelectors)
-    );
-  };
-  useEffect(() => {
-    if (!isOpen) {
-      hasPerformedInitialFocusRef.current = false;
-      return;
+  const isArbitraryHeight = height.includes("[") && height.includes("]");
+  const baseClasses = isArbitraryHeight ? `bg-muted ${width}` : `${height} bg-muted ${width}`;
+  const roundedClasses = rounded ? "rounded" : "";
+  const animateClasses = animate ? "animate-pulse" : "";
+  const style = isArbitraryHeight ? { height: height.replace("h-[", "").replace("]", "") } : {};
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: `${baseClasses} ${roundedClasses} ${animateClasses} ${className}`,
+      style
     }
-    if (!hasPerformedInitialFocusRef.current) {
-      previousActiveElementRef.current = document.activeElement;
+  );
+}
+function SkeletonCard({ className = "", children }) {
+  return /* @__PURE__ */ jsx("div", { className: `card card-padding ${className}`, children });
+}
+function SkeletonTable({
+  rows = 5,
+  columns = 4,
+  className = "",
+  showHeader = true
+}) {
+  return /* @__PURE__ */ jsx("div", { className: `card overflow-hidden ${className}`, children: /* @__PURE__ */ jsx("div", { className: "overflow-x-auto", children: /* @__PURE__ */ jsxs("table", { className: "w-full divide-y divide-border", children: [
+    showHeader && /* @__PURE__ */ jsx("thead", { className: "bg-muted", children: /* @__PURE__ */ jsx("tr", { children: Array.from({ length: columns }).map((_, i) => /* @__PURE__ */ jsx("th", { className: "px-6 py-3 text-left", children: /* @__PURE__ */ jsx(SkeletonItem, { width: "w-24", height: "h-4" }) }, i)) }) }),
+    /* @__PURE__ */ jsx("tbody", { className: "table-body-card", children: Array.from({ length: rows }).map((_, rowIndex) => /* @__PURE__ */ jsx("tr", { children: Array.from({ length: columns }).map((_2, colIndex) => /* @__PURE__ */ jsx("td", { className: "px-6 py-4", children: /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
+      /* @__PURE__ */ jsx(SkeletonItem, { width: "w-full", height: "h-4" }),
+      colIndex === 0 && /* @__PURE__ */ jsx(SkeletonItem, { width: "w-3/4", height: "h-3" })
+    ] }) }, colIndex)) }, rowIndex)) })
+  ] }) }) });
+}
+function SkeletonList({
+  items = 5,
+  className = "",
+  itemHeight = "h-20"
+}) {
+  return /* @__PURE__ */ jsx("div", { className: `space-y-4 ${className}`, children: Array.from({ length: items }).map((_, i) => /* @__PURE__ */ jsx("div", { className: "card card-padding-sm", children: /* @__PURE__ */ jsxs("div", { className: "flex items-center space-x-4", children: [
+    /* @__PURE__ */ jsx(SkeletonItem, { width: "w-12", height: "h-12", rounded: true }),
+    /* @__PURE__ */ jsxs("div", { className: "flex-1 space-y-2", children: [
+      /* @__PURE__ */ jsx(SkeletonItem, { width: "w-1/3", height: "h-4" }),
+      /* @__PURE__ */ jsx(SkeletonItem, { width: "w-1/2", height: "h-3" })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "flex space-x-2", children: [
+      /* @__PURE__ */ jsx(SkeletonItem, { width: "w-16", height: "h-8" }),
+      /* @__PURE__ */ jsx(SkeletonItem, { width: "w-16", height: "h-8" })
+    ] })
+  ] }) }, i)) });
+}
+function SkeletonSearchCard({ className = "" }) {
+  return /* @__PURE__ */ jsx(SkeletonCard, { className, children: /* @__PURE__ */ jsxs("div", { className: "space-y-4", children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex flex-col md:flex-row md:items-center md:justify-between gap-4", children: [
+      /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
+        /* @__PURE__ */ jsx(SkeletonItem, { width: "w-48", height: "h-6" }),
+        /* @__PURE__ */ jsx(SkeletonItem, { width: "w-32", height: "h-4" })
+      ] }),
+      /* @__PURE__ */ jsx("div", { className: "flex gap-3", children: /* @__PURE__ */ jsx(SkeletonItem, { width: "w-32", height: "h-10" }) })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "flex flex-col md:flex-row gap-3", children: [
+      /* @__PURE__ */ jsx(SkeletonItem, { width: "w-full", height: "h-10" }),
+      /* @__PURE__ */ jsx(SkeletonItem, { width: "w-32", height: "h-10" }),
+      /* @__PURE__ */ jsx(SkeletonItem, { width: "w-32", height: "h-10" }),
+      /* @__PURE__ */ jsx(SkeletonItem, { width: "w-10", height: "h-10" })
+    ] })
+  ] }) });
+}
+function SkeletonGameServerCard({
+  className = ""
+}) {
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: `card overflow-hidden h-[380px] flex flex-col ${className}`,
+      children: [
+        /* @__PURE__ */ jsx("div", { className: "relative px-5 py-4 border-b border-border bg-muted overflow-hidden", children: /* @__PURE__ */ jsx("div", { className: "flex items-center space-x-3 relative z-10", children: /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1", children: [
+          /* @__PURE__ */ jsx(SkeletonItem, { width: "w-32", height: "h-6", className: "mb-2" }),
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center space-x-1", children: [
+            /* @__PURE__ */ jsx(SkeletonItem, { width: "w-4", height: "h-4", rounded: true }),
+            /* @__PURE__ */ jsx(SkeletonItem, { width: "w-24", height: "h-4" })
+          ] })
+        ] }) }) }),
+        /* @__PURE__ */ jsxs("div", { className: "relative px-4 py-3 pt-0 flex-grow", children: [
+          /* @__PURE__ */ jsx("div", { className: "relative p-2", children: /* @__PURE__ */ jsxs("div", { className: "grid gap-3 grid-cols-3", children: [
+            /* @__PURE__ */ jsxs("div", { className: "text-center", children: [
+              /* @__PURE__ */ jsx("div", { className: "mx-auto mb-1 w-16 h-16 rounded-full border-4 border-border animate-pulse" }),
+              /* @__PURE__ */ jsx(
+                SkeletonItem,
+                {
+                  width: "w-12",
+                  height: "h-3",
+                  className: "mx-auto mb-1"
+                }
+              ),
+              /* @__PURE__ */ jsx(SkeletonItem, { width: "w-8", height: "h-3", className: "mx-auto" })
+            ] }),
+            /* @__PURE__ */ jsxs("div", { className: "text-center", children: [
+              /* @__PURE__ */ jsx("div", { className: "mx-auto mb-1 w-16 h-16 rounded-full border-4 border-border animate-pulse" }),
+              /* @__PURE__ */ jsx(SkeletonItem, { width: "w-8", height: "h-3", className: "mx-auto mb-1" }),
+              /* @__PURE__ */ jsx(SkeletonItem, { width: "w-6", height: "h-3", className: "mx-auto" })
+            ] }),
+            /* @__PURE__ */ jsxs("div", { className: "text-center", children: [
+              /* @__PURE__ */ jsx("div", { className: "mx-auto mb-1 w-16 h-16 rounded-full border-4 border-border animate-pulse" }),
+              /* @__PURE__ */ jsx(
+                SkeletonItem,
+                {
+                  width: "w-12",
+                  height: "h-3",
+                  className: "mx-auto mb-1"
+                }
+              ),
+              /* @__PURE__ */ jsx(SkeletonItem, { width: "w-8", height: "h-3", className: "mx-auto" })
+            ] })
+          ] }) }),
+          /* @__PURE__ */ jsxs("div", { className: "border-t border-border pt-4 space-y-1", children: [
+            /* @__PURE__ */ jsxs("div", { className: "flex justify-between", children: [
+              /* @__PURE__ */ jsx(SkeletonItem, { width: "w-16", height: "h-3" }),
+              /* @__PURE__ */ jsx(SkeletonItem, { width: "w-20", height: "h-3" })
+            ] }),
+            /* @__PURE__ */ jsxs("div", { className: "flex justify-between", children: [
+              /* @__PURE__ */ jsx(SkeletonItem, { width: "w-12", height: "h-3" }),
+              /* @__PURE__ */ jsx(SkeletonItem, { width: "w-16", height: "h-3" })
+            ] }),
+            /* @__PURE__ */ jsxs("div", { className: "flex justify-between", children: [
+              /* @__PURE__ */ jsx(SkeletonItem, { width: "w-8", height: "h-3" }),
+              /* @__PURE__ */ jsx(SkeletonItem, { width: "w-20", height: "h-3" })
+            ] }),
+            /* @__PURE__ */ jsxs("div", { className: "flex justify-between", children: [
+              /* @__PURE__ */ jsx(SkeletonItem, { width: "w-8", height: "h-3" }),
+              /* @__PURE__ */ jsx(SkeletonItem, { width: "w-16", height: "h-3" })
+            ] }),
+            /* @__PURE__ */ jsxs("div", { className: "flex justify-between", children: [
+              /* @__PURE__ */ jsx(SkeletonItem, { width: "w-8", height: "h-3" }),
+              /* @__PURE__ */ jsx(SkeletonItem, { width: "w-20", height: "h-3" })
+            ] })
+          ] })
+        ] }),
+        /* @__PURE__ */ jsx("div", { className: "px-4 py-3 bg-card border-t border-border", children: /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
+          /* @__PURE__ */ jsx("div", { className: "flex items-center space-x-2", children: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1", children: [
+            /* @__PURE__ */ jsx(SkeletonItem, { width: "w-8", height: "h-8", rounded: true }),
+            /* @__PURE__ */ jsx(SkeletonItem, { width: "w-8", height: "h-8", rounded: true }),
+            /* @__PURE__ */ jsx(SkeletonItem, { width: "w-8", height: "h-8", rounded: true })
+          ] }) }),
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1", children: [
+            /* @__PURE__ */ jsx(SkeletonItem, { width: "w-8", height: "h-8", rounded: true }),
+            /* @__PURE__ */ jsx(SkeletonItem, { width: "w-8", height: "h-8", rounded: true }),
+            /* @__PURE__ */ jsx(SkeletonItem, { width: "w-8", height: "h-8", rounded: true })
+          ] })
+        ] }) })
+      ]
     }
-    let timeoutId = null;
-    if (!hasPerformedInitialFocusRef.current) {
-      const focusableElements = getFocusableElements();
-      const firstFocusable = focusableElements[0];
-      timeoutId = setTimeout(() => {
-        const activeElement = document.activeElement;
-        const isHTMLElement = activeElement instanceof HTMLElement;
-        const isUserTyping = activeElement && (activeElement.tagName === "INPUT" || activeElement.tagName === "TEXTAREA" || isHTMLElement && activeElement.isContentEditable);
-        const isFocusInModal = modalContentRef.current?.contains(activeElement);
-        if (!isUserTyping && !isFocusInModal) {
-          if (firstFocusable) {
-            firstFocusable.focus();
-            hasPerformedInitialFocusRef.current = true;
-          } else if (modalContentRef.current) {
-            modalContentRef.current.focus();
-            hasPerformedInitialFocusRef.current = true;
+  );
+}
+function SkeletonGameCard({ className = "" }) {
+  return /* @__PURE__ */ jsx("div", { className: `card card-padding-sm ${className}`, children: /* @__PURE__ */ jsxs("div", { className: "flex items-center space-x-4", children: [
+    /* @__PURE__ */ jsx(SkeletonItem, { width: "w-12", height: "h-12", rounded: true }),
+    /* @__PURE__ */ jsxs("div", { className: "flex-1 space-y-2", children: [
+      /* @__PURE__ */ jsx(SkeletonItem, { width: "w-40", height: "h-4" }),
+      /* @__PURE__ */ jsx(SkeletonItem, { width: "w-64", height: "h-3" })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center space-x-2", children: [
+      /* @__PURE__ */ jsx(SkeletonItem, { width: "w-24", height: "h-6", rounded: true }),
+      /* @__PURE__ */ jsx(SkeletonItem, { width: "w-20", height: "h-6", rounded: true })
+    ] })
+  ] }) });
+}
+function SkeletonUserCard({ className = "" }) {
+  return /* @__PURE__ */ jsx("div", { className: `card card-padding-sm ${className}`, children: /* @__PURE__ */ jsxs("div", { className: "flex items-center space-x-4", children: [
+    /* @__PURE__ */ jsx(SkeletonItem, { width: "w-12", height: "h-12", rounded: true }),
+    /* @__PURE__ */ jsxs("div", { className: "flex-1 space-y-2", children: [
+      /* @__PURE__ */ jsx(SkeletonItem, { width: "w-32", height: "h-4" }),
+      /* @__PURE__ */ jsx(SkeletonItem, { width: "w-40", height: "h-3" })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center space-x-2", children: [
+      /* @__PURE__ */ jsx(SkeletonItem, { width: "w-20", height: "h-6", rounded: true }),
+      /* @__PURE__ */ jsx(SkeletonItem, { width: "w-16", height: "h-6", rounded: true })
+    ] })
+  ] }) });
+}
+function SkeletonNodeCard({ className = "" }) {
+  return /* @__PURE__ */ jsxs("div", { className: `card overflow-hidden min-h-[320px] ${className}`, children: [
+    /* @__PURE__ */ jsx("div", { className: "px-4 py-3 border-b border-border bg-muted", children: /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center space-x-3", children: [
+        /* @__PURE__ */ jsx(SkeletonItem, { width: "w-8", height: "h-8" }),
+        /* @__PURE__ */ jsxs("div", { children: [
+          /* @__PURE__ */ jsx(SkeletonItem, { width: "w-32", height: "h-5", className: "mb-1" }),
+          /* @__PURE__ */ jsx(SkeletonItem, { width: "w-24", height: "h-4", className: "mb-1" }),
+          /* @__PURE__ */ jsx(SkeletonItem, { width: "w-20", height: "h-3" })
+        ] })
+      ] }),
+      /* @__PURE__ */ jsx(SkeletonItem, { width: "w-20", height: "h-6", rounded: true })
+    ] }) }),
+    /* @__PURE__ */ jsxs("div", { className: "px-4 py-3", children: [
+      /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-3 gap-4 mb-4", children: [
+        /* @__PURE__ */ jsxs("div", { className: "text-center", children: [
+          /* @__PURE__ */ jsx(
+            SkeletonItem,
+            {
+              width: "w-16",
+              height: "h-16",
+              rounded: true,
+              className: "mx-auto mb-1"
+            }
+          ),
+          /* @__PURE__ */ jsx(SkeletonItem, { width: "w-8", height: "h-3", className: "mx-auto mb-1" }),
+          /* @__PURE__ */ jsx(SkeletonItem, { width: "w-6", height: "h-3", className: "mx-auto" })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "text-center", children: [
+          /* @__PURE__ */ jsx(
+            SkeletonItem,
+            {
+              width: "w-16",
+              height: "h-16",
+              rounded: true,
+              className: "mx-auto mb-1"
+            }
+          ),
+          /* @__PURE__ */ jsx(SkeletonItem, { width: "w-8", height: "h-3", className: "mx-auto mb-1" }),
+          /* @__PURE__ */ jsx(SkeletonItem, { width: "w-6", height: "h-3", className: "mx-auto" })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "text-center", children: [
+          /* @__PURE__ */ jsx(
+            SkeletonItem,
+            {
+              width: "w-16",
+              height: "h-16",
+              rounded: true,
+              className: "mx-auto mb-1"
+            }
+          ),
+          /* @__PURE__ */ jsx(SkeletonItem, { width: "w-12", height: "h-3", className: "mx-auto mb-1" }),
+          /* @__PURE__ */ jsx(SkeletonItem, { width: "w-8", height: "h-3", className: "mx-auto" })
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "bg-muted rounded-lg p-3 mb-4", children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between mb-2", children: [
+          /* @__PURE__ */ jsx(SkeletonItem, { width: "w-24", height: "h-4" }),
+          /* @__PURE__ */ jsx(SkeletonItem, { width: "w-16", height: "h-4" })
+        ] }),
+        /* @__PURE__ */ jsx(
+          SkeletonItem,
+          {
+            width: "w-full",
+            height: "h-2",
+            rounded: true,
+            className: "mb-1"
           }
-        } else if (isFocusInModal) {
-          hasPerformedInitialFocusRef.current = true;
-        }
-      }, 100);
+        ),
+        /* @__PURE__ */ jsx(SkeletonItem, { width: "w-32", height: "h-3" })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "text-xs text-muted-foreground mb-3", children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex justify-between mb-1", children: [
+          /* @__PURE__ */ jsx(SkeletonItem, { width: "w-12", height: "h-3" }),
+          /* @__PURE__ */ jsx(SkeletonItem, { width: "w-16", height: "h-3" })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "flex justify-between", children: [
+          /* @__PURE__ */ jsx(SkeletonItem, { width: "w-16", height: "h-3" }),
+          /* @__PURE__ */ jsx(SkeletonItem, { width: "w-20", height: "h-3" })
+        ] })
+      ] }),
+      /* @__PURE__ */ jsx("div", { className: "flex justify-end items-center pt-3 border-t border-border", children: /* @__PURE__ */ jsxs("div", { className: "flex space-x-2", children: [
+        /* @__PURE__ */ jsx(SkeletonItem, { width: "w-20", height: "h-8", rounded: true }),
+        /* @__PURE__ */ jsx(SkeletonItem, { width: "w-8", height: "h-8", rounded: true }),
+        /* @__PURE__ */ jsx(SkeletonItem, { width: "w-8", height: "h-8", rounded: true })
+      ] }) })
+    ] })
+  ] });
+}
+function SkeletonTenantCard({ className = "" }) {
+  return /* @__PURE__ */ jsx("div", { className: `card card-padding-sm ${className}`, children: /* @__PURE__ */ jsxs("div", { className: "flex items-center space-x-4", children: [
+    /* @__PURE__ */ jsx(SkeletonItem, { width: "w-12", height: "h-12", rounded: true }),
+    /* @__PURE__ */ jsxs("div", { className: "flex-1 space-y-2", children: [
+      /* @__PURE__ */ jsx(SkeletonItem, { width: "w-40", height: "h-4" }),
+      /* @__PURE__ */ jsx(SkeletonItem, { width: "w-56", height: "h-3" })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center space-x-2", children: [
+      /* @__PURE__ */ jsx(SkeletonItem, { width: "w-28", height: "h-6", rounded: true }),
+      /* @__PURE__ */ jsx(SkeletonItem, { width: "w-20", height: "h-6", rounded: true })
+    ] })
+  ] }) });
+}
+function SkeletonStats({ className = "" }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: `grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 ${className}`,
+      children: Array.from({ length: 4 }).map((_, i) => /* @__PURE__ */ jsx("div", { className: "card card-padding", children: /* @__PURE__ */ jsxs("div", { className: "space-y-3", children: [
+        /* @__PURE__ */ jsx(SkeletonItem, { width: "w-24", height: "h-4" }),
+        /* @__PURE__ */ jsx(SkeletonItem, { width: "w-16", height: "h-8" }),
+        /* @__PURE__ */ jsx(SkeletonItem, { width: "w-32", height: "h-3" })
+      ] }) }, i))
     }
-    const handleTab = (event) => {
-      if (event.key !== "Tab") return;
-      const focusableElements = getFocusableElements();
-      if (focusableElements.length === 0) return;
-      const firstElement = focusableElements[0];
-      const lastElement = focusableElements[focusableElements.length - 1];
-      if (event.shiftKey) {
-        if (document.activeElement === firstElement) {
-          event.preventDefault();
-          lastElement.focus();
-        }
-      } else {
-        if (document.activeElement === lastElement) {
-          event.preventDefault();
-          firstElement.focus();
-        }
-      }
-    };
-    const handleEsc = (event) => {
-      if (event.key === "Escape" && !blocking) {
-        onClose();
-      }
-    };
-    document.addEventListener("keydown", handleTab);
-    document.addEventListener("keydown", handleEsc);
-    document.body.style.overflow = "hidden";
-    return () => {
-      if (timeoutId) {
-        clearTimeout(timeoutId);
-      }
-      document.removeEventListener("keydown", handleTab);
-      document.removeEventListener("keydown", handleEsc);
-      document.body.style.overflow = "unset";
-      if (!isOpen && previousActiveElementRef.current) {
-        previousActiveElementRef.current.focus();
-      }
-    };
-  }, [isOpen, onClose, blocking]);
-  const modalRoot = (() => {
-    if (typeof document === "undefined") return null;
-    let root = document.getElementById("modal-root");
-    if (!root) {
-      root = document.createElement("div");
-      root.id = "modal-root";
-      document.body.appendChild(root);
+  );
+}
+function SkeletonRecentActivity({
+  items = 5,
+  className = ""
+}) {
+  return /* @__PURE__ */ jsx("div", { className: `space-y-4 ${className}`, children: Array.from({ length: items }).map((_, i) => /* @__PURE__ */ jsxs("div", { className: "flex items-center space-x-3", children: [
+    /* @__PURE__ */ jsx(SkeletonItem, { width: "w-8", height: "h-8", rounded: true }),
+    /* @__PURE__ */ jsxs("div", { className: "flex-1 space-y-2", children: [
+      /* @__PURE__ */ jsx(SkeletonItem, { width: "w-full", height: "h-4" }),
+      /* @__PURE__ */ jsx(SkeletonItem, { width: "w-1/2", height: "h-3" })
+    ] }),
+    /* @__PURE__ */ jsx(SkeletonItem, { width: "w-20", height: "h-4" })
+  ] }, i)) });
+}
+function SkeletonForm({
+  fields = 4,
+  className = ""
+}) {
+  return /* @__PURE__ */ jsx(SkeletonCard, { className, children: /* @__PURE__ */ jsxs("div", { className: "space-y-6", children: [
+    Array.from({ length: fields }).map((_, i) => /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
+      /* @__PURE__ */ jsx(SkeletonItem, { width: "w-24", height: "h-4" }),
+      /* @__PURE__ */ jsx(SkeletonItem, { width: "w-full", height: "h-10" })
+    ] }, i)),
+    /* @__PURE__ */ jsxs("div", { className: "flex justify-end space-x-3 pt-4", children: [
+      /* @__PURE__ */ jsx(SkeletonItem, { width: "w-20", height: "h-10" }),
+      /* @__PURE__ */ jsx(SkeletonItem, { width: "w-24", height: "h-10" })
+    ] })
+  ] }) });
+}
+function SkeletonGameServerCards({
+  items = 4,
+  className = ""
+}) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: `grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 2xl:grid-cols-4 gap-6 ${className}`,
+      children: Array.from({ length: items }).map((_, i) => /* @__PURE__ */ jsx(SkeletonGameServerCard, {}, i))
     }
-    return root;
-  })();
-  if (!modalRoot) {
-    return null;
-  }
-  const backdropVariants = {
-    hidden: { opacity: 0 },
-    visible: { opacity: 1 }
-  };
-  const modalVariants = {
-    hidden: {
-      opacity: 0,
-      scale: 0.95,
-      y: 20
-    },
-    visible: {
-      opacity: 1,
-      scale: 1,
-      y: 0,
-      transition: {
-        duration: 0.2,
-        ease: "easeOut"
-      }
-    },
-    exit: {
-      opacity: 0,
-      scale: 0.9,
-      y: 100,
-      // Slide down much further for reverse effect
-      transition: {
-        duration: 0.3,
-        ease: "easeIn"
-      }
+  );
+}
+function SkeletonNodeCards({
+  items = 3,
+  className = ""
+}) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: `grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 2xl:grid-cols-4 gap-6 ${className}`,
+      children: Array.from({ length: items }).map((_, i) => /* @__PURE__ */ jsx(SkeletonNodeCard, {}, i))
     }
-  };
-  if (!isOpen) return null;
-  if (variant === "plain") {
-    return createPortal(
-      /* @__PURE__ */ jsx(AnimatePresence, { children: /* @__PURE__ */ jsx(
-        motion.div,
-        {
-          className: `modal-backdrop fixed inset-0 w-screen h-screen flex items-center ${customStyles.backdrop?.includes("justify-") ? customStyles.backdrop : customStyles.backdrop ? `${customStyles.backdrop} justify-center` : "justify-center bg-black/10"} z-[999999] m-0 ${fullScreen ? "p-0" : "p-4"}`,
-          variants: backdropVariants,
-          initial: "hidden",
-          animate: isOpen ? "visible" : "hidden",
-          exit: "hidden",
-          onClick: blocking ? void 0 : onClose,
-          children: /* @__PURE__ */ jsx(
-            motion.div,
-            {
-              ref: modalContentRef,
-              role: "dialog",
-              "aria-modal": "true",
-              "aria-labelledby": title ? "modal-title-plain" : void 0,
-              "aria-describedby": ariaDescribedBy || "modal-content-plain",
-              tabIndex: -1,
-              className: `w-full flex flex-col overflow-hidden relative z-[1000000] ${customStyles.container || "bg-card shadow-xl"} ${fullScreen ? "h-full rounded-none" : `rounded-lg ${className} ${sizeClasses3[size]} max-h-[90vh]`}`,
-              variants: modalVariants,
-              initial: "hidden",
-              animate: isOpen ? "visible" : "exit",
-              exit: "exit",
-              onClick: (e) => e.stopPropagation(),
-              children: /* @__PURE__ */ jsx(
-                "div",
-                {
-                  id: "modal-content-plain",
-                  className: `flex-1 ${customStyles.content || ""}`,
-                  children
-                }
-              )
-            },
-            "modal-content"
-          )
-        },
-        "modal-backdrop"
-      ) }),
-      modalRoot
-    );
-  }
-  return createPortal(
-    /* @__PURE__ */ jsx(AnimatePresence, { children: /* @__PURE__ */ jsx(
-      motion.div,
-      {
-        className: `modal-backdrop fixed inset-0 w-screen h-screen bg-black/10 flex items-center ${customStyles.backdrop || "justify-center"} z-[999999] m-0 ${fullScreen ? "p-0" : "p-4"}`,
-        variants: backdropVariants,
-        initial: "hidden",
-        animate: isOpen ? "visible" : "hidden",
-        exit: "hidden",
-        onClick: blocking ? void 0 : onClose,
-        children: /* @__PURE__ */ jsxs(
-          motion.div,
-          {
-            ref: modalContentRef,
-            role: "dialog",
-            "aria-modal": "true",
-            "aria-labelledby": title ? "modal-title" : void 0,
-            "aria-describedby": ariaDescribedBy || "modal-content",
-            tabIndex: -1,
-            className: `bg-card border border-border shadow-xl w-full flex flex-col overflow-hidden relative z-[1000000] ${fullScreen ? "h-full rounded-none" : `rounded-lg ${customStyles.container || className || sizeClasses3[size]} max-h-[90vh]`}`,
-            variants: modalVariants,
-            initial: "hidden",
-            animate: isOpen ? "visible" : "exit",
-            exit: "exit",
-            onClick: (e) => e.stopPropagation(),
-            children: [
-              header ? /* @__PURE__ */ jsx("div", { className: "flex-shrink-0", children: header }) : title ? /* @__PURE__ */ jsxs(
-                "div",
+  );
+}
+function SkeletonNodeTable({
+  items = 3,
+  className = ""
+}) {
+  return /* @__PURE__ */ jsx("div", { className: `space-y-4 ${className}`, children: Array.from({ length: items }).map((_, i) => /* @__PURE__ */ jsxs("div", { className: "card overflow-hidden", children: [
+    /* @__PURE__ */ jsx("div", { className: "px-6 py-4 border-b border-border bg-muted", children: /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center space-x-4", children: [
+        /* @__PURE__ */ jsx(SkeletonItem, { width: "w-8", height: "h-8" }),
+        /* @__PURE__ */ jsxs("div", { children: [
+          /* @__PURE__ */ jsx(SkeletonItem, { width: "w-32", height: "h-5", className: "mb-1" }),
+          /* @__PURE__ */ jsx(SkeletonItem, { width: "w-28", height: "h-4", className: "mb-1" }),
+          /* @__PURE__ */ jsx(SkeletonItem, { width: "w-20", height: "h-3" })
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center space-x-4", children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center", children: [
+          /* @__PURE__ */ jsx(SkeletonItem, { width: "w-6", height: "h-6", className: "mr-2" }),
+          /* @__PURE__ */ jsx(SkeletonItem, { width: "w-16", height: "h-4" })
+        ] }),
+        /* @__PURE__ */ jsx(SkeletonItem, { width: "w-20", height: "h-6", rounded: true })
+      ] })
+    ] }) }),
+    /* @__PURE__ */ jsxs("div", { className: "px-6 py-4", children: [
+      /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-1 lg:grid-cols-4 gap-6", children: [
+        /* @__PURE__ */ jsxs("div", { className: "lg:col-span-2", children: [
+          /* @__PURE__ */ jsx(SkeletonItem, { width: "w-20", height: "h-4", className: "mb-3" }),
+          /* @__PURE__ */ jsx("div", { className: "flex items-start space-x-6", children: Array.from({ length: 3 }).map((_2, chartIndex) => /* @__PURE__ */ jsxs("div", { className: "text-center", children: [
+            /* @__PURE__ */ jsx(
+              SkeletonItem,
+              {
+                width: "w-14",
+                height: "h-14",
+                rounded: true,
+                className: "mx-auto mb-1"
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              SkeletonItem,
+              {
+                width: "w-8",
+                height: "h-3",
+                className: "mx-auto mb-1"
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              SkeletonItem,
+              {
+                width: "w-10",
+                height: "h-3",
+                className: "mx-auto"
+              }
+            )
+          ] }, chartIndex)) })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { children: [
+          /* @__PURE__ */ jsx(SkeletonItem, { width: "w-24", height: "h-4", className: "mb-3" }),
+          /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
+            /* @__PURE__ */ jsx(SkeletonItem, { width: "w-12", height: "h-5" }),
+            /* @__PURE__ */ jsx(SkeletonItem, { width: "w-20", height: "h-3" })
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { children: [
+          /* @__PURE__ */ jsx(SkeletonItem, { width: "w-20", height: "h-4", className: "mb-3" }),
+          /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
+            /* @__PURE__ */ jsxs("div", { className: "flex justify-between", children: [
+              /* @__PURE__ */ jsx(SkeletonItem, { width: "w-12", height: "h-3" }),
+              /* @__PURE__ */ jsx(SkeletonItem, { width: "w-16", height: "h-3" })
+            ] }),
+            /* @__PURE__ */ jsxs("div", { className: "flex justify-between", children: [
+              /* @__PURE__ */ jsx(SkeletonItem, { width: "w-16", height: "h-3" }),
+              /* @__PURE__ */ jsx(SkeletonItem, { width: "w-20", height: "h-3" })
+            ] })
+          ] })
+        ] })
+      ] }),
+      /* @__PURE__ */ jsx("div", { className: "flex justify-end items-center pt-4 border-t border-border mt-4", children: /* @__PURE__ */ jsxs("div", { className: "flex space-x-2", children: [
+        /* @__PURE__ */ jsx(SkeletonItem, { width: "w-16", height: "h-8", rounded: true }),
+        /* @__PURE__ */ jsx(SkeletonItem, { width: "w-8", height: "h-8", rounded: true }),
+        /* @__PURE__ */ jsx(SkeletonItem, { width: "w-8", height: "h-8", rounded: true })
+      ] }) })
+    ] })
+  ] }, i)) });
+}
+function SkeletonGameServerTable({
+  items = 3,
+  className = ""
+}) {
+  return /* @__PURE__ */ jsx("div", { className: `space-y-4 ${className}`, children: Array.from({ length: items }).map((_, i) => /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: "card overflow-hidden min-h-[200px] flex flex-col",
+      children: [
+        /* @__PURE__ */ jsx("div", { className: "relative px-5 py-4 border-b border-border bg-muted overflow-hidden", children: /* @__PURE__ */ jsx("div", { className: "flex items-center space-x-3 relative z-10", children: /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1", children: [
+          /* @__PURE__ */ jsx(SkeletonItem, { width: "w-32", height: "h-6", className: "mb-2" }),
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center space-x-1", children: [
+            /* @__PURE__ */ jsx(SkeletonItem, { width: "w-4", height: "h-4", rounded: true }),
+            /* @__PURE__ */ jsx(SkeletonItem, { width: "w-24", height: "h-4" })
+          ] })
+        ] }) }) }),
+        /* @__PURE__ */ jsx("div", { className: "relative px-4 py-3 pt-0 flex-grow", children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col md:flex-row items-start md:items-center gap-4 md:gap-8", children: [
+          /* @__PURE__ */ jsx("div", { className: "flex-shrink-0 w-full md:w-auto", children: /* @__PURE__ */ jsxs("div", { className: "grid gap-2 grid-cols-3", children: [
+            /* @__PURE__ */ jsxs("div", { className: "text-center", children: [
+              /* @__PURE__ */ jsx("div", { className: "mx-auto mb-1 w-16 h-16 rounded-full border-4 border-border animate-pulse" }),
+              /* @__PURE__ */ jsx(
+                SkeletonItem,
                 {
-                  className: `px-6 py-4 border-b border-border flex justify-between items-center flex-shrink-0 ${customStyles.header || ""}`,
-                  children: [
-                    /* @__PURE__ */ jsx(
-                      "h2",
-                      {
-                        id: "modal-title",
-                        className: "text-xl font-semibold text-foreground",
-                        children: title
-                      }
-                    ),
-                    /* @__PURE__ */ jsx(
-                      "button",
-                      {
-                        onClick: onClose,
-                        className: "p-2 text-muted-foreground hover:text-foreground hover:bg-muted rounded-full transition-colors",
-                        title: "Close",
-                        "aria-label": "Close modal",
-                        disabled: blocking,
-                        children: /* @__PURE__ */ jsx(RiCloseLine, { className: "w-5 h-5", "aria-hidden": "true" })
-                      }
-                    )
-                  ]
+                  width: "w-12",
+                  height: "h-3",
+                  className: "mx-auto mb-1"
                 }
-              ) : null,
+              ),
               /* @__PURE__ */ jsx(
-                "div",
+                SkeletonItem,
                 {
-                  id: "modal-content",
-                  className: `bg-background text-foreground flex-1 ${scrollable ? "overflow-y-auto" : ""} ${fullScreen || noPadding ? "p-0" : "px-6 py-4"}`,
-                  children
+                  width: "w-8",
+                  height: "h-3",
+                  className: "mx-auto"
+                }
+              )
+            ] }),
+            /* @__PURE__ */ jsxs("div", { className: "text-center", children: [
+              /* @__PURE__ */ jsx("div", { className: "mx-auto mb-1 w-16 h-16 rounded-full border-4 border-border animate-pulse" }),
+              /* @__PURE__ */ jsx(
+                SkeletonItem,
+                {
+                  width: "w-8",
+                  height: "h-3",
+                  className: "mx-auto mb-1"
                 }
               ),
-              footer && /* @__PURE__ */ jsx(
-                "div",
+              /* @__PURE__ */ jsx(
+                SkeletonItem,
                 {
-                  className: `flex-shrink-0 px-6 py-4 border-t border-border ${footerBg === "white" ? "bg-card" : "bg-muted"} ${customStyles.footer || ""}`,
-                  children: footer
+                  width: "w-6",
+                  height: "h-3",
+                  className: "mx-auto"
                 }
               )
-            ]
-          },
-          "modal-content"
-        )
-      },
-      "modal-backdrop"
-    ) }),
-    modalRoot
+            ] }),
+            /* @__PURE__ */ jsxs("div", { className: "text-center", children: [
+              /* @__PURE__ */ jsx("div", { className: "mx-auto mb-1 w-16 h-16 rounded-full border-4 border-border animate-pulse" }),
+              /* @__PURE__ */ jsx(
+                SkeletonItem,
+                {
+                  width: "w-12",
+                  height: "h-3",
+                  className: "mx-auto mb-1"
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                SkeletonItem,
+                {
+                  width: "w-8",
+                  height: "h-3",
+                  className: "mx-auto"
+                }
+              )
+            ] })
+          ] }) }),
+          /* @__PURE__ */ jsxs("div", { className: "text-sm text-muted-foreground flex-1 w-full grid grid-cols-1 md:grid-cols-2 gap-x-6 gap-y-1", children: [
+            /* @__PURE__ */ jsxs("div", { className: "flex justify-between", children: [
+              /* @__PURE__ */ jsx(SkeletonItem, { width: "w-16", height: "h-3" }),
+              /* @__PURE__ */ jsx(SkeletonItem, { width: "w-20", height: "h-3" })
+            ] }),
+            /* @__PURE__ */ jsxs("div", { className: "flex justify-between", children: [
+              /* @__PURE__ */ jsx(SkeletonItem, { width: "w-12", height: "h-3" }),
+              /* @__PURE__ */ jsx(SkeletonItem, { width: "w-16", height: "h-3" })
+            ] }),
+            /* @__PURE__ */ jsxs("div", { className: "flex justify-between", children: [
+              /* @__PURE__ */ jsx(SkeletonItem, { width: "w-8", height: "h-3" }),
+              /* @__PURE__ */ jsx(SkeletonItem, { width: "w-20", height: "h-3" })
+            ] }),
+            /* @__PURE__ */ jsxs("div", { className: "flex justify-between", children: [
+              /* @__PURE__ */ jsx(SkeletonItem, { width: "w-8", height: "h-3" }),
+              /* @__PURE__ */ jsx(SkeletonItem, { width: "w-16", height: "h-3" })
+            ] }),
+            /* @__PURE__ */ jsxs("div", { className: "flex justify-between", children: [
+              /* @__PURE__ */ jsx(SkeletonItem, { width: "w-8", height: "h-3" }),
+              /* @__PURE__ */ jsx(SkeletonItem, { width: "w-20", height: "h-3" })
+            ] }),
+            /* @__PURE__ */ jsxs("div", { className: "flex justify-between", children: [
+              /* @__PURE__ */ jsx(SkeletonItem, { width: "w-8", height: "h-3" }),
+              /* @__PURE__ */ jsx(SkeletonItem, { width: "w-16", height: "h-3" })
+            ] })
+          ] })
+        ] }) }),
+        /* @__PURE__ */ jsx("div", { className: "px-4 py-3 bg-card border-t border-border", children: /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
+          /* @__PURE__ */ jsx("div", { className: "flex items-center space-x-2", children: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1", children: [
+            /* @__PURE__ */ jsx(SkeletonItem, { width: "w-8", height: "h-8", rounded: true }),
+            /* @__PURE__ */ jsx(SkeletonItem, { width: "w-8", height: "h-8", rounded: true }),
+            /* @__PURE__ */ jsx(SkeletonItem, { width: "w-8", height: "h-8", rounded: true })
+          ] }) }),
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1", children: [
+            /* @__PURE__ */ jsx(SkeletonItem, { width: "w-8", height: "h-8", rounded: true }),
+            /* @__PURE__ */ jsx(SkeletonItem, { width: "w-8", height: "h-8", rounded: true }),
+            /* @__PURE__ */ jsx(SkeletonItem, { width: "w-8", height: "h-8", rounded: true })
+          ] })
+        ] }) })
+      ]
+    },
+    i
+  )) });
+}
+function SkeletonGamesTable({
+  items = 3,
+  className = ""
+}) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: `overflow-hidden shadow ring-1 ring-black ring-opacity-5 md:rounded-lg ${className}`,
+      children: /* @__PURE__ */ jsxs("table", { className: "min-w-full divide-y divide-gray-300", children: [
+        /* @__PURE__ */ jsx("thead", { className: "bg-muted", children: /* @__PURE__ */ jsxs("tr", { children: [
+          /* @__PURE__ */ jsx("th", { className: "px-6 py-3 text-left text-xs font-medium text-muted-foreground uppercase tracking-wider", children: "Game" }),
+          /* @__PURE__ */ jsx("th", { className: "px-6 py-3 text-left text-xs font-medium text-muted-foreground uppercase tracking-wider", children: "Type" }),
+          /* @__PURE__ */ jsx("th", { className: "px-6 py-3 text-left text-xs font-medium text-muted-foreground uppercase tracking-wider", children: "Port" }),
+          /* @__PURE__ */ jsx("th", { className: "px-6 py-3 text-left text-xs font-medium text-muted-foreground uppercase tracking-wider", children: "Mode" }),
+          /* @__PURE__ */ jsx("th", { className: "px-6 py-3 text-left text-xs font-medium text-muted-foreground uppercase tracking-wider", children: "Status" }),
+          /* @__PURE__ */ jsx("th", { className: "px-6 py-3 text-left text-xs font-medium text-muted-foreground uppercase tracking-wider", children: "Created" }),
+          /* @__PURE__ */ jsx("th", { className: "px-2 py-1 rounded-md bg-muted backdrop-blur-sm text-center text-xs font-medium text-muted-foreground uppercase tracking-wider sticky right-0", children: "Actions" })
+        ] }) }),
+        /* @__PURE__ */ jsx("tbody", { className: "table-body-card", children: Array.from({ length: items }).map((_, i) => /* @__PURE__ */ jsxs("tr", { className: "hover:bg-muted", children: [
+          /* @__PURE__ */ jsx("td", { className: "px-6 py-4 whitespace-nowrap", children: /* @__PURE__ */ jsxs("div", { className: "flex items-center", children: [
+            /* @__PURE__ */ jsx("div", { className: "flex-shrink-0 h-10 w-10", children: /* @__PURE__ */ jsx(SkeletonItem, { width: "w-10", height: "h-10", rounded: true }) }),
+            /* @__PURE__ */ jsxs("div", { className: "ml-4 min-w-0 flex-1", children: [
+              /* @__PURE__ */ jsx(SkeletonItem, { width: "w-32", height: "h-4", className: "mb-1" }),
+              /* @__PURE__ */ jsx(SkeletonItem, { width: "w-48", height: "h-3" })
+            ] })
+          ] }) }),
+          /* @__PURE__ */ jsxs("td", { className: "px-6 py-4 whitespace-nowrap", children: [
+            /* @__PURE__ */ jsx(SkeletonItem, { width: "w-20", height: "h-4", className: "mb-1" }),
+            /* @__PURE__ */ jsx(SkeletonItem, { width: "w-16", height: "h-3" })
+          ] }),
+          /* @__PURE__ */ jsx("td", { className: "px-6 py-4 whitespace-nowrap", children: /* @__PURE__ */ jsxs("div", { className: "flex items-center space-x-2", children: [
+            /* @__PURE__ */ jsx(SkeletonItem, { width: "w-16", height: "h-6", rounded: true }),
+            /* @__PURE__ */ jsx(SkeletonItem, { width: "w-8", height: "h-3" })
+          ] }) }),
+          /* @__PURE__ */ jsxs("td", { className: "px-6 py-4 whitespace-nowrap", children: [
+            /* @__PURE__ */ jsx(
+              SkeletonItem,
+              {
+                width: "w-16",
+                height: "h-6",
+                rounded: true,
+                className: "mb-1"
+              }
+            ),
+            /* @__PURE__ */ jsx(SkeletonItem, { width: "w-24", height: "h-3" })
+          ] }),
+          /* @__PURE__ */ jsx("td", { className: "px-6 py-4 whitespace-nowrap", children: /* @__PURE__ */ jsx(SkeletonItem, { width: "w-16", height: "h-6", rounded: true }) }),
+          /* @__PURE__ */ jsx("td", { className: "px-6 py-4 whitespace-nowrap text-sm text-muted-foreground", children: /* @__PURE__ */ jsx(SkeletonItem, { width: "w-20", height: "h-4" }) }),
+          /* @__PURE__ */ jsx("td", { className: "px-6 py-4 whitespace-nowrap text-right text-sm font-medium sticky right-0 bg-card", children: /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-end space-x-1", children: [
+            /* @__PURE__ */ jsx(SkeletonItem, { width: "w-8", height: "h-8", rounded: true }),
+            /* @__PURE__ */ jsx(SkeletonItem, { width: "w-8", height: "h-8", rounded: true }),
+            /* @__PURE__ */ jsx(SkeletonItem, { width: "w-8", height: "h-8", rounded: true }),
+            /* @__PURE__ */ jsx(SkeletonItem, { width: "w-8", height: "h-8", rounded: true })
+          ] }) })
+        ] }, i)) })
+      ] })
+    }
   );
 }
-var LoadingSpinner = ({
-  message = "Initializing...",
-  className,
-  showMessage = false
-}) => {
-  const containerClasses = className !== void 0 ? className : "flex items-center justify-center h-screen min-h-screen";
+function SkeletonEnvironmentsList({
+  items = 3,
+  className = ""
+}) {
+  return /* @__PURE__ */ jsx("div", { className: `space-y-4 ${className}`, children: Array.from({ length: items }).map((_, i) => /* @__PURE__ */ jsxs("div", { className: "card p-3", children: [
+    /* @__PURE__ */ jsx("div", { className: "p-4 border-b border-border", children: /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center space-x-3 w-full", children: [
+        /* @__PURE__ */ jsx(SkeletonItem, { width: "w-5", height: "h-5" }),
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between w-full pr-6 md:pr-12", children: [
+          /* @__PURE__ */ jsxs("div", { className: "space-y-1", children: [
+            /* @__PURE__ */ jsxs("div", { className: "flex items-center space-x-2", children: [
+              /* @__PURE__ */ jsx(SkeletonItem, { width: "w-24", height: "h-5" }),
+              /* @__PURE__ */ jsx(SkeletonItem, { width: "w-16", height: "h-5", rounded: true })
+            ] }),
+            /* @__PURE__ */ jsx(SkeletonItem, { width: "w-48", height: "h-3" })
+          ] }),
+          /* @__PURE__ */ jsx("div", { className: "text-xs text-muted-foreground", children: /* @__PURE__ */ jsx(SkeletonItem, { width: "w-20", height: "h-3" }) })
+        ] })
+      ] }),
+      /* @__PURE__ */ jsx("div", { className: "flex items-center space-x-2", children: /* @__PURE__ */ jsx(SkeletonItem, { width: "w-8", height: "h-8", rounded: true }) })
+    ] }) }),
+    /* @__PURE__ */ jsx("div", { className: "p-6", children: Array.from({ length: 2 + i % 3 }).map((_2, varIndex) => /* @__PURE__ */ jsx("div", { className: "mb-4 last:mb-0", children: /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-12 gap-4 items-center", children: [
+      /* @__PURE__ */ jsxs("div", { className: "col-span-5", children: [
+        /* @__PURE__ */ jsx(SkeletonItem, { width: "w-32", height: "h-4", className: "mb-1" }),
+        /* @__PURE__ */ jsx(SkeletonItem, { width: "w-48", height: "h-3" })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "col-span-5 flex items-center space-x-2", children: [
+        /* @__PURE__ */ jsx(SkeletonItem, { width: "w-8", height: "h-8", rounded: true }),
+        /* @__PURE__ */ jsx(SkeletonItem, { width: "w-24", height: "h-4" })
+      ] }),
+      /* @__PURE__ */ jsx("div", { className: "col-span-2 flex justify-end", children: /* @__PURE__ */ jsx(SkeletonItem, { width: "w-8", height: "h-8", rounded: true }) })
+    ] }) }, varIndex)) })
+  ] }, i)) });
+}
+function FormInput({
+  label,
+  name,
+  type = "text",
+  value,
+  onChange,
+  placeholder,
+  required = false,
+  disabled = false,
+  error,
+  className = "",
+  inputClassName = "",
+  min,
+  max,
+  step,
+  maxLength,
+  autoComplete,
+  description,
+  footerDescription,
+  autoFocus = false,
+  onKeyDown,
+  onBlur,
+  icon,
+  options = [],
+  multiSelect = false,
+  selectWidth,
+  searchable = false,
+  clearable = true,
+  rows = 3,
+  showHidePassword = false,
+  onGeneratePassword,
+  isLoading = false,
+  copyable = false,
+  readOnly = false
+}) {
+  const [showPassword, setShowPassword] = useState(false);
+  const [copied, setCopied] = useState(false);
+  const handleCopy = async () => {
+    try {
+      await navigator.clipboard.writeText(String(value));
+      setCopied(true);
+      setTimeout(() => setCopied(false), 2e3);
+    } catch (err) {
+      console.error("Failed to copy:", err);
+    }
+  };
+  const shouldShowIcons = (inputType) => {
+    return inputType !== "checkbox" && inputType !== "textarea";
+  };
+  const getIconConfig = (iconProp) => {
+    if (!iconProp) return { left: null, right: null };
+    if (React4.isValidElement(iconProp)) {
+      return { left: iconProp, right: null };
+    }
+    if (typeof iconProp === "object" && iconProp !== null && ("left" in iconProp || "right" in iconProp)) {
+      return { left: iconProp.left || null, right: iconProp.right || null };
+    }
+    return {
+      left: React4.isValidElement(iconProp) ? iconProp : null,
+      right: null
+    };
+  };
+  const renderIcon = (iconNode, position) => {
+    if (!iconNode) return null;
+    const rightPositionClass = position === "right" && type === "number" ? "right-4 pr-3" : position === "right" ? "right-0 pr-3" : "left-0 pl-3";
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: `absolute inset-y-0 ${rightPositionClass} flex items-center pointer-events-none`,
+        children: /* @__PURE__ */ jsx("div", { className: "text-muted-foreground", children: iconNode })
+      }
+    );
+  };
+  const getInputPaddingClasses = (inputType, iconConfig) => {
+    if (!shouldShowIcons(inputType)) return "";
+    const paddingClasses3 = [];
+    if (iconConfig.left) paddingClasses3.push("pl-10");
+    if (iconConfig.right) {
+      paddingClasses3.push(inputType === "number" ? "pr-12" : "pr-10");
+    }
+    return paddingClasses3.join(" ");
+  };
+  const SkeletonInput = () => {
+    const iconConfig = getIconConfig(icon);
+    const hasLeftIcon = iconConfig.left;
+    const hasRightIcon = iconConfig.right;
+    if (type === "checkbox") {
+      return /* @__PURE__ */ jsxs("div", { className: "flex items-center p-2 space-x-3 h-full", children: [
+        /* @__PURE__ */ jsx("div", { className: "relative inline-flex h-6 w-11 items-center rounded-full bg-muted", children: /* @__PURE__ */ jsx("span", { className: "inline-block h-4 w-4 transform rounded-full bg-white border border-border translate-x-1" }) }),
+        /* @__PURE__ */ jsxs("div", { className: "flex flex-col", children: [
+          /* @__PURE__ */ jsxs("label", { className: "form-label", children: [
+            label,
+            required && /* @__PURE__ */ jsx("span", { className: "text-destructive ml-1", children: "*" })
+          ] }),
+          description && /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground", children: description })
+        ] })
+      ] });
+    }
+    if (type === "textarea") {
+      return /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
+        /* @__PURE__ */ jsxs("label", { className: "form-label", children: [
+          label,
+          required && /* @__PURE__ */ jsx("span", { className: "text-red-500 ml-1", children: "*" })
+        ] }),
+        description && /* @__PURE__ */ jsx("p", { className: "text-sm text-secondary-foreground", children: description }),
+        /* @__PURE__ */ jsx("div", { className: "relative", children: /* @__PURE__ */ jsx(
+          SkeletonItem,
+          {
+            width: "w-full",
+            height: "h-24",
+            className: `rounded-md`
+          }
+        ) }),
+        footerDescription && /* @__PURE__ */ jsx("p", { className: "text-sm text-secondary-foreground", children: footerDescription })
+      ] });
+    }
+    if (type === "color") {
+      return /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
+        /* @__PURE__ */ jsxs("label", { className: "form-label", children: [
+          label,
+          required && /* @__PURE__ */ jsx("span", { className: "text-red-500 ml-1", children: "*" })
+        ] }),
+        description && /* @__PURE__ */ jsx("p", { className: "text-sm text-secondary-foreground", children: description }),
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center space-x-3", children: [
+          /* @__PURE__ */ jsx(SkeletonItem, { width: "w-10", height: "h-10", className: "rounded-md" }),
+          /* @__PURE__ */ jsx("div", { className: "relative", children: /* @__PURE__ */ jsx(SkeletonItem, { width: "w-24", height: "h-10", className: "rounded-md" }) })
+        ] })
+      ] });
+    }
+    return /* @__PURE__ */ jsxs("div", { children: [
+      /* @__PURE__ */ jsxs("label", { className: "form-label", children: [
+        label,
+        required && /* @__PURE__ */ jsx("span", { className: "text-red-500 ml-1", children: "*" })
+      ] }),
+      description && /* @__PURE__ */ jsx("p", { className: "text-sm text-secondary-foreground", children: description }),
+      /* @__PURE__ */ jsxs("div", { className: "relative", children: [
+        /* @__PURE__ */ jsx(
+          SkeletonItem,
+          {
+            width: "w-full",
+            height: "h-10",
+            className: `rounded-md ${hasLeftIcon ? "pl-10" : ""} ${hasRightIcon ? "pr-10" : ""}`
+          }
+        ),
+        hasLeftIcon && /* @__PURE__ */ jsx("div", { className: "absolute inset-y-0 left-0 pl-3 flex items-center", children: /* @__PURE__ */ jsx(SkeletonItem, { width: "w-5", height: "h-5", className: "rounded-full" }) }),
+        hasRightIcon && /* @__PURE__ */ jsx("div", { className: "absolute inset-y-0 right-0 pr-3 flex items-center", children: /* @__PURE__ */ jsx(SkeletonItem, { width: "w-5", height: "h-5", className: "rounded-full" }) })
+      ] }),
+      footerDescription && /* @__PURE__ */ jsx("p", { className: "text-sm text-secondary-foreground", children: footerDescription })
+    ] });
+  };
+  return /* @__PURE__ */ jsx("div", { className: `form-group ${className}`, children: isLoading ? /* @__PURE__ */ jsx(SkeletonInput, {}) : type === "checkbox" ? /* @__PURE__ */ jsxs("div", { className: "flex items-center p-2 space-x-3 h-full", children: [
+    /* @__PURE__ */ jsx(
+      "input",
+      {
+        id: name,
+        name,
+        type: "checkbox",
+        checked: Boolean(value),
+        onChange: (e) => {
+          const newValue = e.target.checked;
+          const syntheticEvent = {
+            target: {
+              name: e.target.name,
+              value: newValue,
+              checked: newValue
+            },
+            currentTarget: {
+              name: e.target.name,
+              value: newValue,
+              checked: newValue
+            }
+          };
+          onChange(syntheticEvent);
+        },
+        required,
+        disabled,
+        onKeyDown,
+        className: "sr-only",
+        "aria-label": label,
+        "aria-describedby": error ? `${name}-error` : description ? `${name}-description` : void 0,
+        "aria-invalid": error ? "true" : "false"
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        onClick: () => {
+          if (!disabled) {
+            const checkbox = document.getElementById(
+              name
+            );
+            if (checkbox) {
+              checkbox.click();
+            }
+          }
+        },
+        disabled,
+        className: `
+              relative inline-flex h-6 w-11 items-center rounded-full transition-colors duration-200 ease-in-out focus:outline-none focus:ring-2 focus:ring-primary focus:ring-offset-2
+              ${Boolean(value) ? "bg-primary" : "bg-muted"}
+              ${disabled ? "opacity-50 cursor-not-allowed" : "cursor-pointer"}
+              ${error ? "ring-2 ring-destructive" : ""}
+            `,
+        "aria-label": `${label}${required ? " (required)" : ""}`,
+        "aria-describedby": name,
+        children: /* @__PURE__ */ jsx(
+          "span",
+          {
+            className: `
+                inline-block h-4 w-4 transform rounded-full bg-background border border-border transition duration-200 ease-in-out
+                ${Boolean(value) ? "translate-x-6" : "translate-x-1"}
+              `
+          }
+        )
+      }
+    ),
+    /* @__PURE__ */ jsxs("div", { className: "flex flex-col", children: [
+      /* @__PURE__ */ jsxs(
+        "label",
+        {
+          htmlFor: name,
+          className: "text-sm font-medium text-foreground cursor-pointer",
+          onClick: () => {
+            if (!disabled) {
+              const checkbox = document.getElementById(
+                name
+              );
+              if (checkbox) {
+                checkbox.click();
+              }
+            }
+          },
+          children: [
+            label,
+            required && /* @__PURE__ */ jsx("span", { className: "text-destructive ml-1", "aria-label": "required", children: "*" })
+          ]
+        }
+      ),
+      description && /* @__PURE__ */ jsx(
+        "span",
+        {
+          id: `${name}-description`,
+          className: "text-xs text-muted-foreground",
+          children: description
+        }
+      )
+    ] }),
+    error && /* @__PURE__ */ jsx("div", { id: `${name}-error`, className: "form-error", role: "alert", children: typeof error === "string" ? /* @__PURE__ */ jsx("p", { children: error }) : error })
+  ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+    label && /* @__PURE__ */ jsxs("label", { htmlFor: name, className: "form-label", children: [
+      label,
+      required && /* @__PURE__ */ jsx("span", { className: "form-label-required", children: "*" })
+    ] }),
+    description && /* @__PURE__ */ jsx("p", { id: `${name}-description`, className: "form-description", children: description }),
+    type === "select" ? /* @__PURE__ */ jsxs("div", { className: "relative", children: [
+      /* @__PURE__ */ jsx(
+        SmartSelect,
+        {
+          value: multiSelect ? Array.isArray(value) ? value : value ? String(value).split(",") : [] : String(value),
+          onChange: multiSelect ? (selectedValue) => {
+            const syntheticEvent = {
+              target: {
+                name,
+                value: Array.isArray(selectedValue) ? selectedValue.join(",") : selectedValue
+              }
+            };
+            onChange(syntheticEvent);
+          } : (selectedValue) => {
+            const syntheticEvent = {
+              target: {
+                name,
+                value: selectedValue
+              }
+            };
+            onChange(syntheticEvent);
+          },
+          options,
+          placeholder: placeholder || "Select an option...",
+          className: `form-input ${error ? "form-input-error" : ""} ${disabled ? "opacity-50 cursor-not-allowed" : ""} ${getInputPaddingClasses(type, getIconConfig(icon))} ${inputClassName}`,
+          multiple: multiSelect,
+          width: selectWidth,
+          searchable,
+          clearable
+        }
+      ),
+      shouldShowIcons(type) && (() => {
+        const iconConfig = getIconConfig(icon);
+        return /* @__PURE__ */ jsxs(Fragment, { children: [
+          renderIcon(iconConfig.left, "left"),
+          renderIcon(iconConfig.right, "right")
+        ] });
+      })()
+    ] }) : type === "textarea" ? /* @__PURE__ */ jsx(
+      "textarea",
+      {
+        id: name,
+        name,
+        value,
+        onChange,
+        placeholder,
+        required,
+        disabled,
+        autoFocus,
+        onKeyDown,
+        onBlur,
+        rows,
+        maxLength,
+        "aria-invalid": error ? "true" : "false",
+        "aria-describedby": error ? `${name}-error` : description ? `${name}-description` : void 0,
+        className: `form-input ${error ? "form-input-error" : ""} ${inputClassName}`
+      }
+    ) : type === "color" ? /* @__PURE__ */ jsxs("div", { className: "flex items-center space-x-3", children: [
+      /* @__PURE__ */ jsxs("div", { className: "relative w-10 h-10 border border-input rounded-md overflow-hidden bg-card", children: [
+        /* @__PURE__ */ jsx(
+          "input",
+          {
+            id: name,
+            name,
+            type: "color",
+            value,
+            onChange,
+            required,
+            disabled,
+            className: "absolute inset-0 w-full h-full cursor-pointer opacity-0"
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: "w-full h-full rounded-md",
+            style: { backgroundColor: value }
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "relative", children: [
+        /* @__PURE__ */ jsx(
+          "input",
+          {
+            id: `${name}-text`,
+            name: `${name}-text`,
+            type: "text",
+            value,
+            onChange,
+            placeholder,
+            required,
+            disabled,
+            maxLength,
+            autoComplete,
+            autoFocus,
+            onKeyDown,
+            onBlur,
+            className: `form-input max-w-24 ${error ? "form-input-error" : ""} ${getInputPaddingClasses(type, getIconConfig(icon))} ${inputClassName}`,
+            "aria-label": `${label} text input`
+          }
+        ),
+        shouldShowIcons(type) && (() => {
+          const iconConfig = getIconConfig(icon);
+          return /* @__PURE__ */ jsxs(Fragment, { children: [
+            renderIcon(iconConfig.left, "left"),
+            renderIcon(iconConfig.right, "right")
+          ] });
+        })()
+      ] })
+    ] }) : showHidePassword && type === "password" ? /* @__PURE__ */ jsxs("div", { className: "relative", children: [
+      /* @__PURE__ */ jsx(
+        "input",
+        {
+          id: name,
+          name,
+          type: showPassword ? "text" : "password",
+          value,
+          onChange,
+          placeholder,
+          required,
+          disabled: disabled || readOnly,
+          readOnly,
+          maxLength,
+          autoComplete,
+          autoFocus,
+          onKeyDown,
+          onBlur,
+          "aria-invalid": error ? "true" : "false",
+          "aria-describedby": error ? `${name}-error` : description ? `${name}-description` : void 0,
+          className: `form-input ${error ? "form-input-error" : ""} ${readOnly ? "bg-muted cursor-default" : ""} ${copyable ? "pr-20" : "pr-10"} ${getInputPaddingClasses(type, getIconConfig(icon))} ${inputClassName}`
+        }
+      ),
+      shouldShowIcons(type) && (() => {
+        const iconConfig = getIconConfig(icon);
+        return /* @__PURE__ */ jsxs(Fragment, { children: [
+          renderIcon(iconConfig.left, "left"),
+          renderIcon(iconConfig.right, "right")
+        ] });
+      })(),
+      copyable && /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          onClick: handleCopy,
+          className: "absolute inset-y-0 right-8 flex items-center pr-3 text-muted-foreground hover:text-foreground transition-colors duration-200 z-10",
+          "aria-label": `Copy ${label}`,
+          title: copied ? "Copied!" : `Copy ${label}`,
+          children: copied ? /* @__PURE__ */ jsx(RiCheckLine, { className: "w-4 h-4 text-green-500", "aria-hidden": "true" }) : /* @__PURE__ */ jsx(RiFileCopyLine, { className: "w-4 h-4", "aria-hidden": "true" })
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          onClick: () => setShowPassword(!showPassword),
+          className: "absolute inset-y-0 right-0 flex items-center pr-3 text-muted-foreground hover:text-foreground transition-colors duration-200 z-10",
+          "aria-label": showPassword ? "Hide password" : "Show password",
+          title: showPassword ? "Hide password" : "Show password",
+          children: showPassword ? /* @__PURE__ */ jsx(RiEyeOffLine, { className: "w-4 h-4", "aria-hidden": "true" }) : /* @__PURE__ */ jsx(RiEyeLine, { className: "w-4 h-4", "aria-hidden": "true" })
+        }
+      ),
+      onGeneratePassword && !readOnly && /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          onClick: onGeneratePassword,
+          className: `absolute inset-y-0 ${copyable ? "right-16" : "right-8"} flex items-center pr-3 text-muted-foreground hover:text-foreground transition-colors duration-200 z-10`,
+          "aria-label": "Generate new password",
+          title: "Generate new password",
+          children: /* @__PURE__ */ jsx(RiRefreshLine, { className: "w-4 h-4", "aria-hidden": "true" })
+        }
+      )
+    ] }) : /* @__PURE__ */ jsxs("div", { className: "relative group", children: [
+      /* @__PURE__ */ jsx(
+        "input",
+        {
+          id: name,
+          name,
+          type,
+          value,
+          onChange,
+          placeholder,
+          required,
+          disabled: disabled || readOnly,
+          readOnly,
+          min,
+          max,
+          step,
+          maxLength,
+          autoComplete,
+          autoFocus,
+          onKeyDown,
+          onBlur,
+          "aria-invalid": error ? "true" : "false",
+          "aria-describedby": error ? `${name}-error` : description ? `${name}-description` : void 0,
+          className: `form-input ${error ? "form-input-error" : ""} ${readOnly ? "bg-muted cursor-default" : ""} ${copyable ? "pr-10" : ""} ${getInputPaddingClasses(type, getIconConfig(icon))} ${inputClassName}`
+        }
+      ),
+      shouldShowIcons(type) && (() => {
+        const iconConfig = getIconConfig(icon);
+        return /* @__PURE__ */ jsxs(Fragment, { children: [
+          renderIcon(iconConfig.left, "left"),
+          renderIcon(iconConfig.right, "right")
+        ] });
+      })(),
+      copyable && /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          onClick: handleCopy,
+          className: `absolute inset-y-0 right-0 flex items-center pr-3 text-muted-foreground hover:text-foreground transition-all duration-200 z-10`,
+          "aria-label": `Copy ${label}`,
+          title: copied ? "Copied!" : `Copy ${label}`,
+          children: copied ? /* @__PURE__ */ jsx(RiCheckLine, { className: "w-4 h-4 text-green-500", "aria-hidden": "true" }) : /* @__PURE__ */ jsx(RiFileCopyLine, { className: "w-4 h-4", "aria-hidden": "true" })
+        }
+      ),
+      clearable && !copyable && value !== "" && value !== null && value !== void 0 && !disabled && !readOnly && /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          onClick: () => {
+            const syntheticEvent = {
+              target: { name, value: "" }
+            };
+            onChange(syntheticEvent);
+          },
+          className: `absolute inset-y-0 ${type === "number" ? "right-4" : "right-0"} flex items-center pr-3 text-muted-foreground hover:text-muted-foreground transition-all duration-200 z-10 opacity-0 group-hover:opacity-100`,
+          "aria-label": `Clear ${label}`,
+          title: `Clear ${label}`,
+          children: /* @__PURE__ */ jsx(RiCloseLine, { className: "w-4 h-4", "aria-hidden": "true" })
+        }
+      )
+    ] }),
+    footerDescription && /* @__PURE__ */ jsx("p", { className: "text-xs mt-1", children: footerDescription }),
+    error && /* @__PURE__ */ jsx("div", { id: `${name}-error`, className: "form-error", role: "alert", children: typeof error === "string" ? /* @__PURE__ */ jsx("p", { children: error }) : error })
+  ] }) });
+}
+function FormSection({
+  title,
+  description,
+  children,
+  className = ""
+}) {
+  return /* @__PURE__ */ jsxs("div", { className: `space-y-4 ${className}`, children: [
+    /* @__PURE__ */ jsxs("div", { children: [
+      /* @__PURE__ */ jsx("h3", { className: "text-lg font-medium ", children: title }),
+      description && /* @__PURE__ */ jsx("p", { className: "mt-1 text-sm text-muted-foreground", children: description })
+    ] }),
+    /* @__PURE__ */ jsx("div", { className: "space-y-4", children })
+  ] });
+}
+function Grid({
+  children,
+  cols = 1,
+  gap = 4,
+  className = ""
+}) {
+  const colClasses = {
+    1: "grid-cols-1",
+    2: "grid-cols-1 md:grid-cols-2",
+    3: "grid-cols-1 md:grid-cols-2 lg:grid-cols-3",
+    4: "grid-cols-1 md:grid-cols-2 lg:grid-cols-4",
+    5: "grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-5",
+    6: "grid-cols-2 md:grid-cols-3 lg:grid-cols-6",
+    12: "grid-cols-12"
+  };
+  const gapClasses = {
+    1: "gap-1",
+    2: "gap-2",
+    3: "gap-3",
+    4: "gap-4",
+    6: "gap-6",
+    8: "gap-8"
+  };
+  return /* @__PURE__ */ jsx("div", { className: `grid ${colClasses[cols]} ${gapClasses[gap]} ${className}`, children });
+}
+var variantStyles = {
+  default: "bg-accent border-border text-muted-foreground",
+  warning: "bg-yellow-50 dark:bg-yellow-900/20 border-yellow-200 dark:border-yellow-800 text-yellow-700 dark:text-yellow-300",
+  info: "bg-blue-50 dark:bg-blue-900/20 border-blue-200 dark:border-blue-800 text-blue-700 dark:text-blue-300",
+  success: "bg-green-50 dark:bg-green-900/20 border-green-200 dark:border-green-800 text-green-700 dark:text-green-300"
+};
+var titleStyles = {
+  default: "text-foreground",
+  warning: "text-yellow-800 dark:text-yellow-200",
+  info: "text-blue-800 dark:text-blue-200",
+  success: "text-green-800 dark:text-green-200"
+};
+function InfoBox({
+  title,
+  children,
+  variant = "default",
+  className = ""
+}) {
+  return /* @__PURE__ */ jsxs("div", { className: `border rounded-md p-4 ${variantStyles[variant]} ${className}`, children: [
+    /* @__PURE__ */ jsx("h4", { className: `font-medium mb-2 ${titleStyles[variant]}`, children: title }),
+    /* @__PURE__ */ jsx("div", { className: "text-sm space-y-1 [&>ul]:list-disc [&>ul]:list-outside [&>ul]:pl-3 [&>ol]:list-decimal [&>ol]:list-outside [&>ol]:pl-4", children })
+  ] });
+}
+var variantClasses3 = {
+  default: "text-foreground hover:text-primary",
+  primary: "text-primary hover:text-primary/80",
+  muted: "text-muted-foreground hover:text-foreground"
+};
+var Link = forwardRef(
+  ({
+    href,
+    variant = "default",
+    underline = false,
+    external = false,
+    className = "",
+    children,
+    ...props
+  }, ref) => {
+    const classes = [
+      "transition-colors",
+      variantClasses3[variant],
+      underline ? "underline underline-offset-4" : "hover:underline hover:underline-offset-4",
+      className
+    ].filter(Boolean).join(" ");
+    if (external || href.startsWith("http")) {
+      return /* @__PURE__ */ jsx(
+        "a",
+        {
+          ref,
+          href,
+          className: classes,
+          target: "_blank",
+          rel: "noopener noreferrer",
+          ...props,
+          children
+        }
+      );
+    }
+    return /* @__PURE__ */ jsx(NextLink, { ref, href, className: classes, ...props, children });
+  }
+);
+Link.displayName = "Link";
+var Link_default = Link;
+var LoadingSpinner = ({
+  message = "Initializing...",
+  className,
+  showMessage = false
+}) => {
+  const containerClasses = className !== void 0 ? className : "flex items-center justify-center h-screen min-h-screen";
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: containerClasses,
+      role: "status",
+      "aria-live": "polite",
+      "aria-label": message,
+      children: /* @__PURE__ */ jsxs("div", { className: "text-center", children: [
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: "flex items-center justify-center space-x-2 mb-6",
+            "aria-hidden": "true",
+            children: [
+              /* @__PURE__ */ jsx("div", { className: "w-1.5 h-12 bg-gradient-to-t from-primary-600 to-primary-400 rounded-full shadow-sm [animation:wave_1.2s_ease-in-out_infinite] [animation-delay:0s]" }),
+              /* @__PURE__ */ jsx("div", { className: "w-1.5 h-8 bg-gradient-to-t from-primary-600 to-primary-400 rounded-full shadow-sm [animation:wave_1.2s_ease-in-out_infinite] [animation-delay:0.2s]" }),
+              /* @__PURE__ */ jsx("div", { className: "w-1.5 h-8 bg-gradient-to-t from-primary-600 to-primary-400 rounded-full shadow-sm [animation:wave_1.2s_ease-in-out_infinite] [animation-delay:0.4s]" }),
+              /* @__PURE__ */ jsx("div", { className: "w-1.5 h-12 bg-gradient-to-t from-primary-600 to-primary-400 rounded-full shadow-sm [animation:wave_1.2s_ease-in-out_infinite] [animation-delay:0.6s]" })
+            ]
+          }
+        ),
+        showMessage && /* @__PURE__ */ jsx("div", { className: "space-y-2", children: /* @__PURE__ */ jsx(
+          "p",
+          {
+            className: "text-sm text-secondary-foreground animate-pulse",
+            "aria-live": "polite",
+            children: message
+          }
+        ) })
+      ] })
+    }
+  );
+};
+var LoadingSpinner_default = LoadingSpinner;
+function PageHeader({
+  icon: Icon,
+  title,
+  subtitle,
+  rightContent,
+  className = ""
+}) {
+  return /* @__PURE__ */ jsx("div", { className: `mb-6 lg:mb-8 ${className}`, children: /* @__PURE__ */ jsxs("div", { className: "header-layout", children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center space-x-3", children: [
+      Icon && /* @__PURE__ */ jsx(Icon, { className: "w-6 h-6 lg:w-8 lg:h-8 flex-shrink-0" }),
+      /* @__PURE__ */ jsxs("div", { className: "min-w-0", children: [
+        /* @__PURE__ */ jsx("h1", { className: "text-xl lg:text-3xl font-bold text-foreground  truncate", children: title }),
+        subtitle && /* @__PURE__ */ jsx("p", { className: "text-sm lg:text-base text-muted-foreground", children: subtitle })
+      ] })
+    ] }),
+    rightContent && /* @__PURE__ */ jsx("div", { className: "flex items-center space-x-2 lg:space-x-3 flex-shrink-0", children: rightContent })
+  ] }) });
+}
+function Switch({
+  checked,
+  onChange,
+  disabled = false,
+  label,
+  description,
+  className = "",
+  size = "md"
+}) {
+  const toggle = () => {
+    if (!disabled) {
+      onChange(!checked);
+    }
+  };
+  const sizes = {
+    sm: { track: "w-8 h-4", thumb: "w-3 h-3", translate: "translate-x-4" },
+    md: { track: "w-11 h-6", thumb: "w-5 h-5", translate: "translate-x-5" },
+    lg: { track: "w-14 h-8", thumb: "w-7 h-7", translate: "translate-x-6" }
+  };
+  const currentSize = sizes[size];
+  return /* @__PURE__ */ jsxs("div", { className: `flex items-start ${className}`, children: [
+    /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        role: "switch",
+        "aria-checked": checked,
+        disabled,
+        onClick: toggle,
+        className: `
+          relative inline-flex flex-shrink-0 cursor-pointer rounded-full border-2 border-transparent 
+          transition-colors duration-200 ease-in-out focus:outline-none focus:ring-2 focus:ring-primary focus:ring-offset-2
+          ${checked ? "bg-primary" : "bg-muted"}
+          ${disabled ? "opacity-50 cursor-not-allowed" : ""}
+          ${currentSize.track}
+        `,
+        children: /* @__PURE__ */ jsx(
+          "span",
+          {
+            "aria-hidden": "true",
+            className: `
+            pointer-events-none inline-block transform rounded-full bg-white shadow ring-0 
+            transition duration-200 ease-in-out
+            ${checked ? currentSize.translate : "translate-x-0"}
+            ${currentSize.thumb}
+          `
+          }
+        )
+      }
+    ),
+    (label || description) && /* @__PURE__ */ jsxs("div", { className: "ml-3 text-sm leading-6", children: [
+      label && /* @__PURE__ */ jsx("label", { className: "font-medium text-foreground cursor-pointer", onClick: toggle, children: label }),
+      description && /* @__PURE__ */ jsx("p", { className: "text-muted-foreground", children: description })
+    ] })
+  ] });
+}
+var variantClasses4 = {
+  default: "text-foreground",
+  muted: "text-muted-foreground",
+  bold: "font-semibold"
+};
+var sizeClasses4 = {
+  xs: "text-xs",
+  sm: "text-sm",
+  base: "text-base",
+  lg: "text-lg",
+  xl: "text-xl",
+  "2xl": "text-2xl",
+  "3xl": "text-3xl"
+};
+function Typography({
+  as: Element = "p",
+  variant = "default",
+  size = "base",
+  children,
+  className = ""
+}) {
+  const classes = `${variantClasses4[variant]} ${sizeClasses4[size]} ${className}`;
+  return /* @__PURE__ */ jsx(Element, { className: classes, children });
+}
+var Spinner = ({
+  size = "md",
+  color = "primary",
+  className = ""
+}) => {
+  const sizeClasses5 = {
+    sm: "h-4 w-4",
+    md: "h-8 w-8",
+    lg: "h-12 w-12",
+    xl: "h-16 w-16"
+  };
+  const colorClasses2 = {
+    primary: "border-primary-600",
+    blue: "border-ring",
+    white: "border-white",
+    current: "border-current"
+  };
+  const baseClasses = "animate-spin rounded-full border-2 border-t-transparent";
+  const sizeClass = sizeClasses5[size];
+  const colorClass = colorClasses2[color];
+  const finalClasses = `${baseClasses} ${sizeClass} ${colorClass} ${className}`.trim();
+  return /* @__PURE__ */ jsx("div", { className: finalClasses });
+};
+var Spinner_default = Spinner;
+function DataTable({
+  children,
+  className = "",
+  containerClassName = "",
+  stickyActions = false
+}) {
+  return /* @__PURE__ */ jsx("div", { className: `card overflow-hidden ${containerClassName}`, children: /* @__PURE__ */ jsx("div", { className: "overflow-x-auto", children: /* @__PURE__ */ jsx(
+    "table",
+    {
+      role: "table",
+      "aria-label": "Data table",
+      className: `w-full divide-y divide-border ${className} ${stickyActions ? "relative" : ""}`,
+      children
+    }
+  ) }) });
+}
+function DataTableHeader({
+  children,
+  className = ""
+}) {
+  return /* @__PURE__ */ jsx("thead", { className: `bg-muted ${className}`, children });
+}
+function DataTableBody({
+  children,
+  className = ""
+}) {
+  return /* @__PURE__ */ jsx("tbody", { className: `table-body-card ${className}`, children });
+}
+function DataTableRow({
+  children,
+  className = "",
+  onClick,
+  hover = true
+}) {
+  const baseClasses = "hover:bg-muted transition-colors duration-150";
+  const clickableClasses = onClick ? "cursor-pointer" : "";
+  const hoverClasses = hover ? baseClasses : "";
+  return /* @__PURE__ */ jsx(
+    "tr",
+    {
+      className: `${hoverClasses} ${clickableClasses} ${className}`,
+      onClick,
+      children
+    }
+  );
+}
+function DataTableHeaderCell({
+  children,
+  className = "",
+  align = "left",
+  padding = "md",
+  sticky,
+  stickyOffset = 0
+}) {
+  const alignClasses = {
+    left: "text-left",
+    center: "text-center",
+    right: "text-right"
+  };
+  const paddingClasses3 = {
+    sm: "px-3 py-2",
+    md: "px-6 py-3",
+    lg: "px-8 py-4"
+  };
+  const stickyClasses = sticky ? `sticky ${sticky === "left" ? "left-0" : "right-0"} z-10` : "";
+  const stickyOffsetClasses = sticky && stickyOffset > 0 ? sticky === "left" ? `left-${stickyOffset}` : `right-${stickyOffset}` : "";
+  const stickyStyling = "";
+  return /* @__PURE__ */ jsx(
+    "th",
+    {
+      scope: "col",
+      className: `${paddingClasses3[padding]} ${alignClasses[align]} text-xs font-medium text-muted-foreground uppercase tracking-wider ${stickyClasses} ${stickyOffsetClasses} ${stickyStyling} ${className}`,
+      children
+    }
+  );
+}
+function DataTableCell({
+  children,
+  className = "",
+  align = "left",
+  padding = "md",
+  sticky,
+  stickyOffset = 0
+}) {
+  const alignClasses = {
+    left: "text-left",
+    center: "text-center",
+    right: "text-right"
+  };
+  const paddingClasses3 = {
+    sm: "px-3 py-2",
+    md: "px-6 py-4",
+    lg: "px-8 py-6"
+  };
+  const stickyClasses = sticky ? `sticky ${sticky === "left" ? "left-0" : "right-0"} z-10` : "";
+  const stickyOffsetClasses = sticky && stickyOffset > 0 ? sticky === "left" ? `left-${stickyOffset}` : `right-${stickyOffset}` : "";
+  const stickyStyling = "";
+  return /* @__PURE__ */ jsx(
+    "td",
+    {
+      className: `${paddingClasses3[padding]} whitespace-nowrap ${alignClasses[align]} text-sm ${stickyClasses} ${stickyOffsetClasses} ${stickyStyling} ${className}`,
+      children
+    }
+  );
+}
+function DataTableEmptyState({
+  icon: Icon,
+  title,
+  description,
+  action,
+  variant = "table"
+}) {
+  const content = /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(Icon, { className: "w-20 h-20 text-primary-500 mx-auto mb-4" }),
+    /* @__PURE__ */ jsx("h3", { className: "text-lg font-medium text-foreground mb-2", children: title }),
+    /* @__PURE__ */ jsx("p", { className: "text-muted-foreground mb-6", children: description }),
+    action && /* @__PURE__ */ jsx("div", { className: "flex justify-center", children: action })
+  ] });
+  if (variant === "div") {
+    return /* @__PURE__ */ jsx("div", { className: "card card-padding text-center lg:p-24", children: content });
+  }
+  return /* @__PURE__ */ jsx("tr", { children: /* @__PURE__ */ jsx("td", { colSpan: 100, className: "px-6 py-12 text-center", children: content }) });
+}
+function DataTableLoadingState({
+  message = "Loading...",
+  rows = 5,
+  columns = 4
+}) {
+  return /* @__PURE__ */ jsxs("div", { className: "card card-padding", children: [
+    /* @__PURE__ */ jsxs("div", { className: "text-center mb-4", children: [
+      /* @__PURE__ */ jsx(Spinner_default, { size: "md", color: "primary", className: "mx-auto mb-2" }),
+      /* @__PURE__ */ jsx("p", { className: "text-muted-foreground", children: message })
+    ] }),
+    /* @__PURE__ */ jsx(SkeletonTable, { rows, columns, showHeader: false })
+  ] });
+}
+function StatusBadge({
+  status,
+  variant = "default"
+}) {
+  const variantClasses5 = {
+    default: "bg-muted text-muted-foreground",
+    success: "bg-success text-success-dark",
+    warning: "bg-yellow-100 text-yellow-800",
+    error: "bg-red-100 text-red-800",
+    info: "bg-primary-100 text-primary-800"
+  };
+  return /* @__PURE__ */ jsx("span", { className: `badge ${variantClasses5[variant]}`, children: status });
+}
+function DataTableActions({
+  children,
+  className = "",
+  enhanced = false
+}) {
+  const baseClasses = "flex items-center justify-end space-x-2 dt-actions";
+  const enhancedClasses = enhanced ? "px-2 py-1 rounded-md bg-card backdrop-blur-sm" : "";
+  return /* @__PURE__ */ jsx("div", { className: `${baseClasses} ${enhancedClasses} ${className}`, children });
+}
+function StickyActionsColumn({
+  children,
+  className = ""
+}) {
   return /* @__PURE__ */ jsx(
     "div",
     {
-      className: containerClasses,
-      role: "status",
-      "aria-live": "polite",
-      "aria-label": message,
-      children: /* @__PURE__ */ jsxs("div", { className: "text-center", children: [
-        /* @__PURE__ */ jsxs(
+      className: `border-l border-border shadow-[-1px_0_3px_-1px_rgba(0,0,0,0.02)] ${className}`,
+      children
+    }
+  );
+}
+function SharedTooltip({
+  id,
+  place = "top",
+  offset = 8,
+  delayShow = 200,
+  delayHide = 100,
+  className = "",
+  style = {},
+  children
+}) {
+  return /* @__PURE__ */ jsx(
+    Tooltip,
+    {
+      id,
+      place,
+      offset,
+      delayShow,
+      delayHide,
+      className: `!bg-popover !text-popover-foreground !border !border-border !shadow-md !text-xs !px-2 !py-1 !rounded-md z-50 ${className}`,
+      style,
+      positionStrategy: "fixed",
+      render: children ? () => /* @__PURE__ */ jsx(Fragment, { children }) : void 0
+    }
+  );
+}
+function CountBadge({
+  count,
+  className = "",
+  size = "sm",
+  variant = "primary"
+}) {
+  const sizeClasses5 = {
+    sm: "text-xs px-1.5 py-0.5 min-w-[18px]",
+    md: "text-sm px-2 py-1 min-w-[20px]",
+    lg: "text-base px-2.5 py-1.5 min-w-[24px]"
+  };
+  const variantClasses5 = {
+    primary: "bg-ring ",
+    secondary: "bg-muted0 ",
+    success: "bg-green-500 ",
+    warning: "bg-yellow-500 ",
+    error: "bg-red-500 "
+  };
+  if (count <= 0) return null;
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      "aria-label": `Count: ${count}`,
+      className: `${sizeClasses5[size]} ${variantClasses5[variant]} rounded-full text-center font-medium ${className}`,
+      children: count
+    }
+  );
+}
+function ClearButton({
+  onClick,
+  className = "",
+  size = "sm",
+  variant = "overlay",
+  tooltipId,
+  tooltipContent = "Clear"
+}) {
+  const sizeClasses5 = {
+    sm: "w-4 h-4",
+    md: "w-5 h-5",
+    lg: "w-6 h-6"
+  };
+  const iconSizeClasses2 = {
+    sm: "w-3 h-3",
+    md: "w-4 h-4",
+    lg: "w-5 h-5"
+  };
+  const variantClasses5 = {
+    overlay: "absolute -top-1 -right-1 bg-red-500  rounded-full flex items-center justify-center hover:bg-red-600 transition-colors cursor-pointer",
+    inline: "bg-red-500  rounded-full flex items-center justify-center hover:bg-red-600 transition-colors",
+    ghost: "text-muted-foreground hover:text-muted-foreground transition-colors"
+  };
+  const baseProps = {
+    onClick: (e) => {
+      e.stopPropagation();
+      onClick(e);
+    },
+    className: `${sizeClasses5[size]} ${variantClasses5[variant]} ${className}`,
+    title: tooltipContent
+  };
+  const tooltipProps = tooltipId ? {
+    "data-tooltip-id": tooltipId,
+    "data-tooltip-content": tooltipContent
+  } : {};
+  const Element = variant === "overlay" ? "span" : "button";
+  return /* @__PURE__ */ jsx(Element, { ...baseProps, ...tooltipProps, children: /* @__PURE__ */ jsx(RiCloseLine, { className: iconSizeClasses2[size] }) });
+}
+function IconButtonWithCount({
+  icon,
+  label,
+  count = 0,
+  onClick,
+  onClear,
+  showLabel = true,
+  className = "",
+  buttonClassName = "",
+  countVariant = "primary",
+  clearVariant = "overlay",
+  tooltipId,
+  tooltipContent,
+  clearTooltipId,
+  clearTooltipContent = "Clear"
+}) {
+  const hasActiveCount = count > 0;
+  const shouldShowLabel = showLabel && !hasActiveCount;
+  return /* @__PURE__ */ jsxs(
+    "button",
+    {
+      onClick,
+      className: `btn-alt btn-md flex items-center space-x-1 relative ${buttonClassName} ${className}`,
+      "data-tooltip-id": tooltipId,
+      "data-tooltip-content": tooltipContent,
+      children: [
+        icon,
+        shouldShowLabel && label && /* @__PURE__ */ jsx("span", { className: "hidden sm:inline", children: label }),
+        hasActiveCount && /* @__PURE__ */ jsx(CountBadge, { count, variant: countVariant }),
+        hasActiveCount && onClear && /* @__PURE__ */ jsx(
+          ClearButton,
+          {
+            onClick: onClear,
+            variant: clearVariant,
+            tooltipId: clearTooltipId,
+            tooltipContent: clearTooltipContent
+          }
+        )
+      ]
+    }
+  );
+}
+function ActionButton({
+  icon: IconComponent,
+  label,
+  onClick,
+  href,
+  disabled = false,
+  size = "md",
+  iconOnly = false,
+  className = "",
+  title,
+  tooltipId,
+  tooltipPlace = "bottom",
+  tooltipOffset = 12,
+  tooltipDelayShow = 200,
+  tooltipDelayHide = 100,
+  type = "button",
+  variant,
+  terminalMode = false,
+  fill = false,
+  loading: externalLoading,
+  // Extract loading prop to prevent it from being passed to DOM
+  loadingIcon: LoadingIconComponent,
+  // Custom loading icon
+  disableLoadingSpin = false,
+  // Disable spin animation for custom loading icons
+  ...restProps
+}) {
+  const [loading, setLoading] = useState(false);
+  const handleClick = useCallback(async () => {
+    if (onClick && !disabled && !loading) {
+      setLoading(true);
+      try {
+        await onClick();
+      } catch (error) {
+        console.error("ActionButton onClick error:", error);
+      } finally {
+        setLoading(false);
+      }
+    }
+  }, [onClick, disabled, loading]);
+  const iconSizes = {
+    sm: terminalMode ? "w-4 h-4" : "w-4 h-4",
+    md: terminalMode ? "w-4 h-4" : "w-4 h-4",
+    lg: terminalMode ? "w-5 h-5" : "w-5 h-5"
+  };
+  const heightClasses = {
+    sm: terminalMode ? "" : "btn-sm",
+    md: terminalMode ? "" : "btn-md",
+    lg: terminalMode ? "" : "btn-lg"
+  };
+  const paddingClasses3 = iconOnly ? terminalMode ? "" : "p-2" : "px-3 py-1.5";
+  const t = useIntlayer("action-button");
+  const getVariantConfig = () => {
+    switch (variant) {
+      case "edit":
+        return {
+          icon: fill ? RiEditFill : RiEditLine,
+          label: t.edit,
+          className: "btn-secondary"
+        };
+      case "delete":
+        return {
+          icon: fill ? RiDeleteBinFill : RiDeleteBinLine,
+          label: t.delete,
+          className: "btn-danger"
+        };
+      case "deactivate":
+        return {
+          icon: fill ? RiStopCircleFill : RiStopCircleLine,
+          label: t.deactivate,
+          className: "bg-slate-50  text-slate-600 hover:bg-slate-100 hover:text-slate-700 border border-slate-200 transition-all duration-300 ease-in-out"
+        };
+      case "activate":
+        return {
+          icon: fill ? RiPlayCircleFill : RiPlayCircleLine,
+          label: t.activate,
+          className: "bg-emerald-50  text-emerald-600 hover:bg-emerald-100 hover:text-emerald-700 border border-emerald-200 transition-all duration-300 ease-in-out"
+        };
+      case "view":
+        return {
+          icon: fill ? RiEyeFill : RiEyeLine,
+          label: t.view,
+          className: "bg-muted  text-muted-foreground hover:bg-gray-100 hover:text-foreground border border-border transition-all duration-300 ease-in-out"
+        };
+      case "metrics":
+        return {
+          icon: fill ? RiBarChartFill : RiBarChartLine,
+          label: t.metrics,
+          className: "bg-purple-50  text-purple-600 hover:bg-purple-100 hover:text-purple-700 border border-purple-200 transition-all duration-300 ease-in-out"
+        };
+      case "start":
+        return {
+          icon: fill ? RiPlayFill : RiPlayLine,
+          label: t.start,
+          className: "bg-green-50  text-green-600 hover:bg-green-100 hover:text-green-700 border border-green-200 transition-all duration-300 ease-in-out"
+        };
+      case "stop":
+        return {
+          icon: fill ? RiStopFill : RiStopLine,
+          label: t.stop,
+          className: "bg-red-50  text-red-600 hover:bg-red-100 hover:text-red-700 border border-red-200 transition-all duration-300 ease-in-out"
+        };
+      case "restart":
+        return {
+          icon: fill ? RiRestartFill : RiRestartLine,
+          label: t.restart,
+          className: "bg-orange-50  text-orange-600 hover:bg-orange-100 hover:text-orange-700 border border-orange-200 transition-all duration-300 ease-in-out"
+        };
+      case "pause":
+        return {
+          icon: fill ? RiPauseFill : RiPauseLine,
+          label: t.pause,
+          className: "bg-yellow-50  text-yellow-600 hover:bg-yellow-100 hover:text-yellow-700 border border-yellow-200 transition-all duration-300 ease-in-out"
+        };
+      case "clone":
+        return {
+          icon: fill ? RiFileCopyFill : RiFileCopyLine,
+          label: t.clone,
+          className: "bg-indigo-50  text-indigo-600 hover:bg-indigo-100 hover:text-indigo-700 border border-indigo-200 transition-all duration-300 ease-in-out"
+        };
+      default:
+        return null;
+    }
+  };
+  const variantConfig = getVariantConfig();
+  const variantClasses5 = {
+    primary: "btn-primary",
+    secondary: "btn-secondary",
+    danger: "btn-danger",
+    success: "bg-green-50  text-green-600 hover:bg-green-100 hover:text-green-700 border border-green-200 transition-all duration-300 ease-in-out",
+    warning: "bg-yellow-50  text-yellow-600 hover:bg-yellow-100 hover:text-yellow-700 border border-yellow-200 transition-all duration-300 ease-in-out",
+    info: "bg-muted  text-muted-foreground hover:bg-primary hover:text-primary-foreground border border-ring transition-all duration-300 ease-in-out",
+    metrics: "bg-purple-50  text-purple-600 hover:bg-purple-100 hover:text-purple-700 border border-purple-200 transition-all duration-300 ease-in-out"
+  };
+  let variantClass = variantConfig ? variantConfig.className : variant ? variantClasses5[variant] : "";
+  if (terminalMode && variantClass) {
+    const hoverMatch = variantClass.match(/hover:text-(\w+)-(\d+)/);
+    const hoverColor = hoverMatch ? `hover:text-${hoverMatch[1]}-${hoverMatch[2]}` : "hover:text-muted-foreground";
+    variantClass = `text-muted-foreground ${hoverColor} transition-colors duration-200`;
+  }
+  const isDisabled = disabled || loading || externalLoading;
+  const buttonContent = /* @__PURE__ */ jsxs(Fragment, { children: [
+    loading || externalLoading ? /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: `${iconSizes[size]} flex items-center justify-center flex-shrink-0 ${terminalMode ? "text-muted-foreground p-0.5" : ""}`,
+        "aria-hidden": "true",
+        children: LoadingIconComponent ? /* @__PURE__ */ jsx(
+          LoadingIconComponent,
+          {
+            className: `w-full h-full ${disableLoadingSpin ? "" : "animate-spin-slow"}`,
+            "aria-hidden": "true"
+          }
+        ) : /* @__PURE__ */ jsx(
           "div",
           {
-            className: "flex items-center justify-center space-x-2 mb-6",
-            "aria-hidden": "true",
-            children: [
-              /* @__PURE__ */ jsx("div", { className: "w-1.5 h-12 bg-gradient-to-t from-primary-600 to-primary-400 rounded-full shadow-sm [animation:wave_1.2s_ease-in-out_infinite] [animation-delay:0s]" }),
-              /* @__PURE__ */ jsx("div", { className: "w-1.5 h-8 bg-gradient-to-t from-primary-600 to-primary-400 rounded-full shadow-sm [animation:wave_1.2s_ease-in-out_infinite] [animation-delay:0.2s]" }),
-              /* @__PURE__ */ jsx("div", { className: "w-1.5 h-8 bg-gradient-to-t from-primary-600 to-primary-400 rounded-full shadow-sm [animation:wave_1.2s_ease-in-out_infinite] [animation-delay:0.4s]" }),
-              /* @__PURE__ */ jsx("div", { className: "w-1.5 h-12 bg-gradient-to-t from-primary-600 to-primary-400 rounded-full shadow-sm [animation:wave_1.2s_ease-in-out_infinite] [animation-delay:0.6s]" })
-            ]
+            className: "w-full h-full border-2 border-current border-t-transparent rounded-full animate-spin",
+            "aria-hidden": "true"
           }
-        ),
-        showMessage && /* @__PURE__ */ jsx("div", { className: "space-y-2", children: /* @__PURE__ */ jsx(
-          "p",
+        )
+      }
+    ) : (variantConfig?.icon || IconComponent) && /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: `${iconSizes[size]} flex items-center justify-center flex-shrink-0`,
+        "aria-hidden": "true",
+        children: variantConfig?.icon ? /* @__PURE__ */ jsx(
+          variantConfig.icon,
           {
-            className: "text-sm text-secondary-foreground animate-pulse",
-            "aria-live": "polite",
-            children: message
+            className: "w-full h-full",
+            "aria-hidden": "true"
           }
-        ) })
-      ] })
-    }
-  );
-};
-var LoadingSpinner_default = LoadingSpinner;
-function PageHeader({
+        ) : IconComponent ? /* @__PURE__ */ jsx(IconComponent, { className: "w-full h-full", "aria-hidden": "true" }) : null
+      }
+    ),
+    !iconOnly && (restProps.children ? restProps.children : (variantConfig?.label || label) && /* @__PURE__ */ jsx("span", { className: "flex items-center", children: variantConfig?.label || label }))
+  ] });
+  const accessibleLabel = title || (iconOnly ? variantConfig?.label || label : void 0);
+  const buttonAriaLabel = iconOnly && !accessibleLabel ? variantConfig?.label || label || "Action button" : accessibleLabel;
+  const tooltipContent = title || (iconOnly ? variantConfig?.label || label : void 0);
+  const buttonClassName = `
+
+    ${terminalMode ? "btn-terminal" : `btn ${variantClass} ${paddingClasses3} ${heightClasses[size]}  ${className} ${isDisabled ? "opacity-50 cursor-not-allowed" : ""}`}`;
+  if (href) {
+    return /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(
+        NextLink,
+        {
+          href,
+          title: typeof title === "string" ? title : void 0,
+          "aria-label": iconOnly ? typeof buttonAriaLabel === "string" ? buttonAriaLabel : void 0 : void 0,
+          onClick: handleClick,
+          className: buttonClassName,
+          "data-tooltip-id": tooltipId,
+          "aria-busy": loading || externalLoading ? "true" : void 0,
+          ...restProps,
+          children: buttonContent
+        }
+      ),
+      tooltipId && /* @__PURE__ */ jsx(
+        SharedTooltip,
+        {
+          id: tooltipId,
+          place: tooltipPlace,
+          offset: tooltipOffset,
+          delayShow: tooltipDelayShow,
+          delayHide: tooltipDelayHide,
+          children: tooltipContent
+        }
+      )
+    ] });
+  }
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      "button",
+      {
+        type,
+        onClick: handleClick,
+        title: typeof title === "string" ? title : void 0,
+        "aria-label": iconOnly ? typeof buttonAriaLabel === "string" ? buttonAriaLabel : void 0 : void 0,
+        className: buttonClassName,
+        "data-tooltip-id": tooltipId,
+        "aria-busy": loading || externalLoading ? "true" : void 0,
+        ...restProps,
+        disabled: isDisabled,
+        children: buttonContent
+      }
+    ),
+    tooltipId && /* @__PURE__ */ jsx(
+      SharedTooltip,
+      {
+        id: tooltipId,
+        place: tooltipPlace,
+        offset: tooltipOffset,
+        delayShow: tooltipDelayShow,
+        delayHide: tooltipDelayHide,
+        children: tooltipContent
+      }
+    )
+  ] });
+}
+function SearchCard({
+  title,
+  count,
+  total,
+  actionButton,
+  children,
+  className = "",
   icon: Icon,
+  description
+}) {
+  return /* @__PURE__ */ jsxs("div", { className: `card p-4 lg:p-6 ${className}`, children: [
+    /* @__PURE__ */ jsx(
+      SearchCardHeader,
+      {
+        title,
+        count,
+        total,
+        actionButton,
+        icon: Icon,
+        description
+      }
+    ),
+    /* @__PURE__ */ jsx(SearchCardContent, { children })
+  ] });
+}
+function SearchCardHeader({
   title,
-  subtitle,
-  rightContent,
-  className = ""
+  count,
+  total,
+  actionButton,
+  icon: Icon,
+  description
 }) {
-  return /* @__PURE__ */ jsx("div", { className: `mb-6 lg:mb-8 ${className}`, children: /* @__PURE__ */ jsxs("div", { className: "header-layout", children: [
-    /* @__PURE__ */ jsxs("div", { className: "flex items-center space-x-3", children: [
-      Icon && /* @__PURE__ */ jsx(Icon, { className: "w-6 h-6 lg:w-8 lg:h-8 flex-shrink-0" }),
+  return /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-4 mb-6", children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center space-x-3 min-w-0 flex-1", children: [
+      Icon && /* @__PURE__ */ jsx(Icon, { className: "w-6 h-6 lg:w-8 lg:h-8 text-foreground flex-shrink-0" }),
       /* @__PURE__ */ jsxs("div", { className: "min-w-0", children: [
-        /* @__PURE__ */ jsx("h1", { className: "text-xl lg:text-3xl font-bold text-foreground  truncate", children: title }),
-        subtitle && /* @__PURE__ */ jsx("p", { className: "text-sm lg:text-base text-muted-foreground", children: subtitle })
+        /* @__PURE__ */ jsx("h2", { className: "text-lg lg:text-2xl font-bold  truncate", children: title }),
+        description && /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground hidden md:block", children: description }),
+        /* @__PURE__ */ jsxs("p", { className: "mt-1 lg:mt-2 text-xs text-secondary-foreground", children: [
+          count,
+          " of ",
+          total,
+          " ",
+          title.toLowerCase()
+        ] })
       ] })
     ] }),
-    rightContent && /* @__PURE__ */ jsx("div", { className: "flex items-center space-x-2 lg:space-x-3 flex-shrink-0", children: rightContent })
-  ] }) });
+    actionButton && /* @__PURE__ */ jsx("div", { className: "flex flex-row gap-2 lg:gap-3 flex-shrink-0", children: actionButton })
+  ] });
 }
-function FormSection({
-  title,
-  description,
+function SearchCardContent({
   children,
   className = ""
 }) {
+  return /* @__PURE__ */ jsx("div", { className, children });
+}
+function SearchInput({
+  placeholder,
+  value,
+  onChange,
+  className = ""
+}) {
+  return /* @__PURE__ */ jsx("div", { className: `flex-1 ${className}`, children: /* @__PURE__ */ jsx(
+    FormInput,
+    {
+      label: "",
+      name: "search",
+      type: "text",
+      value,
+      onChange: (e) => onChange(e.target.value),
+      placeholder,
+      icon: {
+        left: /* @__PURE__ */ jsx(RiSearchLine, { className: "w-4 h-4 text-muted-foreground" })
+      },
+      className: "mb-0"
+    }
+  ) });
+}
+function FilterSelect({
+  value,
+  onChange,
+  options,
+  placeholder,
+  className = "",
+  multiple = false,
+  searchable = true
+}) {
+  return /* @__PURE__ */ jsx(
+    SmartSelect,
+    {
+      value,
+      onChange,
+      options,
+      placeholder,
+      className: `form-input form-input-md ${className}`,
+      keepOpen: multiple,
+      multiple,
+      searchable
+    }
+  );
+}
+function RefreshButton({
+  onClick,
+  isLoading = false,
+  className = ""
+}) {
+  return /* @__PURE__ */ jsx(
+    ActionButton,
+    {
+      icon: RiRefreshLine,
+      onClick,
+      disabled: isLoading,
+      loading: isLoading,
+      iconOnly: true,
+      size: "md",
+      variant: "secondary",
+      tooltipId: "refresh-button-tooltip",
+      title: "Refresh",
+      tooltipPlace: "top",
+      className: `btn-alt ${className}`
+    }
+  );
+}
+function FilterToggleButton({
+  isOpen,
+  onClick,
+  onClear,
+  activeCount = 0,
+  className = ""
+}) {
+  const tooltipText = activeCount > 0 ? `${activeCount} filter${activeCount === 1 ? "" : "s"} active` : "Filters";
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      IconButtonWithCount,
+      {
+        icon: /* @__PURE__ */ jsx(RiFilterLine, { className: "w-4 h-4" }),
+        label: "Filters",
+        count: activeCount,
+        onClick,
+        onClear,
+        className,
+        tooltipId: "filter-button-tooltip",
+        tooltipContent: tooltipText,
+        clearTooltipId: "clear-filters-tooltip",
+        clearTooltipContent: "Clear all filters"
+      }
+    ),
+    /* @__PURE__ */ jsx(SharedTooltip, { id: "filter-button-tooltip" })
+  ] });
+}
+function MobileSearchLayout({
+  searchInput,
+  filters,
+  viewControls,
+  activeFilterCount = 0,
+  onClearFilters,
+  className = "",
+  filterInline = false,
+  searchButton
+}) {
+  const [showFilters, setShowFilters] = useState(false);
+  if (filterInline) {
+    return /* @__PURE__ */ jsxs("div", { className: `space-y-4 ${className}`, children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex gap-2 items-center", children: [
+        /* @__PURE__ */ jsx("div", { className: "flex-1", children: searchInput }),
+        /* @__PURE__ */ jsxs("div", { className: "flex gap-2 items-center", children: [
+          /* @__PURE__ */ jsx("div", { className: "lg:hidden", children: /* @__PURE__ */ jsx(
+            SmartDropdown,
+            {
+              isOpen: showFilters,
+              onClose: () => setShowFilters(false),
+              width: 600,
+              maxHeight: 320,
+              trigger: /* @__PURE__ */ jsx(
+                FilterToggleButton,
+                {
+                  isOpen: showFilters,
+                  onClick: () => setShowFilters(!showFilters),
+                  activeCount: activeFilterCount,
+                  onClear: onClearFilters
+                }
+              ),
+              children: /* @__PURE__ */ jsx("div", { className: "", children: /* @__PURE__ */ jsx("div", { className: "p-6", children: /* @__PURE__ */ jsx("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-4", children: filters }) }) })
+            }
+          ) }),
+          viewControls && viewControls
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "hidden lg:flex lg:flex-col lg:gap-3", children: [
+        /* @__PURE__ */ jsx("div", { className: "flex flex-col lg:flex-row gap-3", children: filters }),
+        searchButton && /* @__PURE__ */ jsx("div", { className: "flex justify-end", children: searchButton })
+      ] }),
+      /* @__PURE__ */ jsx(SharedTooltip, { id: "clear-filters-tooltip" })
+    ] });
+  }
   return /* @__PURE__ */ jsxs("div", { className: `space-y-4 ${className}`, children: [
-    /* @__PURE__ */ jsxs("div", { children: [
-      /* @__PURE__ */ jsx("h3", { className: "text-lg font-medium ", children: title }),
-      description && /* @__PURE__ */ jsx("p", { className: "mt-1 text-sm text-muted-foreground", children: description })
+    /* @__PURE__ */ jsxs("div", { className: "flex gap-2 items-center", children: [
+      /* @__PURE__ */ jsx("div", { className: "flex-1", children: searchInput }),
+      /* @__PURE__ */ jsxs("div", { className: "flex gap-2 items-center", children: [
+        /* @__PURE__ */ jsx(
+          SmartDropdown,
+          {
+            isOpen: showFilters,
+            onClose: () => setShowFilters(false),
+            width: 600,
+            maxHeight: 320,
+            trigger: /* @__PURE__ */ jsx(
+              FilterToggleButton,
+              {
+                isOpen: showFilters,
+                onClick: () => setShowFilters(!showFilters),
+                activeCount: activeFilterCount,
+                onClear: onClearFilters
+              }
+            ),
+            children: /* @__PURE__ */ jsx("div", { className: "", children: /* @__PURE__ */ jsx("div", { className: "p-6", children: /* @__PURE__ */ jsx("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-4", children: filters }) }) })
+          }
+        ),
+        viewControls && viewControls
+      ] })
     ] }),
-    /* @__PURE__ */ jsx("div", { className: "space-y-4", children })
+    /* @__PURE__ */ jsx(SharedTooltip, { id: "clear-filters-tooltip" })
   ] });
 }
-function Grid({
-  children,
-  cols = 1,
-  gap = 4,
+function ViewToggle({
+  currentView,
+  onViewChange,
   className = ""
 }) {
-  const colClasses = {
-    1: "grid-cols-1",
-    2: "grid-cols-1 md:grid-cols-2",
-    3: "grid-cols-1 md:grid-cols-2 lg:grid-cols-3",
-    4: "grid-cols-1 md:grid-cols-2 lg:grid-cols-4",
-    5: "grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-5",
-    6: "grid-cols-2 md:grid-cols-3 lg:grid-cols-6",
-    12: "grid-cols-12"
-  };
-  const gapClasses = {
-    1: "gap-1",
-    2: "gap-2",
-    3: "gap-3",
-    4: "gap-4",
-    6: "gap-6",
-    8: "gap-8"
+  const toggleView = () => {
+    onViewChange(currentView === "cards" ? "list" : "cards");
   };
-  return /* @__PURE__ */ jsx("div", { className: `grid ${colClasses[cols]} ${gapClasses[gap]} ${className}`, children });
-}
-function GridItem({
-  children,
-  span = 1,
-  className = ""
-}) {
-  return /* @__PURE__ */ jsx("div", { className: `col-span-${span} ${className}`, children });
+  return /* @__PURE__ */ jsx(
+    ActionButton,
+    {
+      icon: currentView === "cards" ? RiGridFill : RiListUnordered,
+      onClick: toggleView,
+      iconOnly: true,
+      size: "md",
+      variant: "secondary",
+      tooltipId: "view-toggle-tooltip",
+      title: currentView === "cards" ? "Switch to List View" : "Switch to Card View",
+      tooltipPlace: "top",
+      className: `btn-alt ${className}`
+    }
+  );
 }
 
-export { AccordionCard, Badge, Button_default as Button, Card, ClickableCard, ErrorBadge, FormInput, FormSection, GrayBadge, Grid, GridItem, HeaderCard, InfoBadge, Link_default as Link, LoadingSpinner_default as LoadingSpinner, Modal, PageHeader, PrimaryBadge, SimpleCard, StatusBadge, StatusCard, SuccessBadge, Switch, WarningBadge };
+// src/index.ts
+var VERSION = "0.1.3";
+
+export { ActionButton, Badge, Button_default as Button, Card, ConfirmDialog_default as ConfirmDialog, Container, DataTable, DataTableActions, DataTableBody, DataTableCell, DataTableEmptyState, DataTableHeader, DataTableHeaderCell, DataTableLoadingState, DataTableRow, EmptyState_default as EmptyState, FilterSelect, FilterToggleButton, FormInput, FormSection, Grid, IconButtonWithCount, InfoBox, Link_default as Link, LoadingSpinner_default as LoadingSpinner, MobileSearchLayout, Modal, PageHeader, RefreshButton, SearchCard, SearchCardContent, SearchCardHeader, SearchInput, SharedTooltip, Skeleton, SkeletonCard, SkeletonEnvironmentsList, SkeletonForm, SkeletonGameCard, SkeletonGameServerCard, SkeletonGameServerCards, SkeletonGameServerTable, SkeletonGamesTable, SkeletonItem, SkeletonList, SkeletonNodeCard, SkeletonNodeCards, SkeletonNodeTable, SkeletonRecentActivity, SkeletonSearchCard, SkeletonStats, SkeletonTable, SkeletonTenantCard, SkeletonUserCard, SmartDropdown, SmartSelect, Spinner_default as Spinner, StatusBadge, StickyActionsColumn, Switch, Typography, VERSION, ViewToggle, useConfirmDialog };
 //# sourceMappingURL=index.mjs.map
 //# sourceMappingURL=index.mjs.map