@gamecp/ui 0.1.13 → 0.1.14

package/dist/index.mjs

@@ -1,9 +1,11 @@
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 import React4, { forwardRef, useState, useRef, useEffect, useCallback } from 'react';
-import { RiCloseLine, RiCheckLine, RiLoader4Line, RiFileCopyLine, RiEyeOffLine, RiEyeLine, RiRefreshLine, RiArrowDownSLine } from 'react-icons/ri';
+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/Badge.tsx
 var badgeVariants = {
@@ -1343,6 +1345,632 @@ function SkeletonItem({
     }
   );
 }
+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 })
+          ] })
+        ] }) })
+      ]
+    }
+  );
+}
+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"
+          }
+        ),
+        /* @__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))
+    }
+  );
+}
+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))
+    }
+  );
+}
+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))
+    }
+  );
+}
+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,
+                {
+                  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: "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)) })
+      ] })
+    }
+  );
+}
+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,
@@ -1874,6 +2502,29 @@ function Grid({
   };
   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",
@@ -2052,10 +2703,826 @@ function Typography({
   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: `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: "w-full h-full border-2 border-current border-t-transparent rounded-full animate-spin",
+            "aria-hidden": "true"
+          }
+        )
+      }
+    ) : (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: "w-full h-full",
+            "aria-hidden": "true"
+          }
+        ) : 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,
+  count,
+  total,
+  actionButton,
+  icon: Icon,
+  description
+}) {
+  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("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()
+        ] })
+      ] })
+    ] }),
+    actionButton && /* @__PURE__ */ jsx("div", { className: "flex flex-row gap-2 lg:gap-3 flex-shrink-0", children: actionButton })
+  ] });
+}
+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", { 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(SharedTooltip, { id: "clear-filters-tooltip" })
+  ] });
+}
+function ViewToggle({
+  currentView,
+  onViewChange,
+  className = ""
+}) {
+  const toggleView = () => {
+    onViewChange(currentView === "cards" ? "list" : "cards");
+  };
+  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}`
+    }
+  );
+}
 
 // src/index.ts
 var VERSION = "0.1.3";
 
-export { Badge, Button_default as Button, Card, ConfirmDialog_default as ConfirmDialog, Container, EmptyState_default as EmptyState, FormInput, FormSection, Grid, Link_default as Link, LoadingSpinner_default as LoadingSpinner, Modal, PageHeader, Skeleton, SkeletonItem, SmartDropdown, SmartSelect, Switch, Typography, VERSION, useConfirmDialog };
+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