@gamecp/ui 0.1.25 → 0.1.27

package/dist/index.d.mts

@@ -200,7 +200,7 @@ declare function Grid({ children, cols, gap, className, }: GridProps): react_jsx
 interface InfoBoxProps {
     title: string;
     children: React__default.ReactNode;
-    variant?: 'default' | 'warning' | 'info' | 'success';
+    variant?: 'default' | 'warning' | 'info' | 'success' | 'danger';
     className?: string;
 }
 declare function InfoBox({ title, children, variant, className }: InfoBoxProps): react_jsx_runtime.JSX.Element;
@@ -265,8 +265,9 @@ interface SwitchProps {
     className?: string;
     size?: 'sm' | 'md' | 'lg';
     variant?: SwitchVariant;
+    labelPosition?: 'left' | 'right';
 }
-declare function Switch({ checked, onChange, disabled, label, description, className, size, variant, }: SwitchProps): react_jsx_runtime.JSX.Element;
+declare function Switch({ checked, onChange, disabled, label, description, className, size, variant, labelPosition, }: SwitchProps): react_jsx_runtime.JSX.Element;
 
 interface SmartDropdownProps {
     isOpen: boolean;

package/dist/index.d.ts

@@ -200,7 +200,7 @@ declare function Grid({ children, cols, gap, className, }: GridProps): react_jsx
 interface InfoBoxProps {
     title: string;
     children: React__default.ReactNode;
-    variant?: 'default' | 'warning' | 'info' | 'success';
+    variant?: 'default' | 'warning' | 'info' | 'success' | 'danger';
     className?: string;
 }
 declare function InfoBox({ title, children, variant, className }: InfoBoxProps): react_jsx_runtime.JSX.Element;
@@ -265,8 +265,9 @@ interface SwitchProps {
     className?: string;
     size?: 'sm' | 'md' | 'lg';
     variant?: SwitchVariant;
+    labelPosition?: 'left' | 'right';
 }
-declare function Switch({ checked, onChange, disabled, label, description, className, size, variant, }: SwitchProps): react_jsx_runtime.JSX.Element;
+declare function Switch({ checked, onChange, disabled, label, description, className, size, variant, labelPosition, }: SwitchProps): react_jsx_runtime.JSX.Element;
 
 interface SmartDropdownProps {
     isOpen: boolean;

package/dist/index.js

@@ -474,7 +474,7 @@ function Modal({
       }
       document.removeEventListener("keydown", handleTab);
       document.removeEventListener("keydown", handleEsc);
-      document.body.style.overflow = "unset";
+      document.body.style.overflow = "";
       if (!isOpen && previousActiveElementRef.current) {
         previousActiveElementRef.current.focus();
       }
@@ -1307,7 +1307,7 @@ function SmartSelect({
               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" : ""}`,
+            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 text-muted-foreground ring-2 ring-ring" : ""}`,
             children: [
               /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2 min-w-0 flex-1", children: [
                 option.icon && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex-shrink-0", children: option.icon }),
@@ -1930,9 +1930,9 @@ function SkeletonGamesTable({
           /* @__PURE__ */ jsxRuntime.jsx("th", { className: "px-6 py-3 text-left text-xs font-medium text-muted-foreground uppercase tracking-wider", children: "Mode" }),
           /* @__PURE__ */ jsxRuntime.jsx("th", { className: "px-6 py-3 text-left text-xs font-medium text-muted-foreground uppercase tracking-wider", children: "Status" }),
           /* @__PURE__ */ jsxRuntime.jsx("th", { className: "px-6 py-3 text-left text-xs font-medium text-muted-foreground uppercase tracking-wider", children: "Created" }),
-          /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("th", { className: "px-2 py-1 rounded-md backdrop-blur-sm text-center text-xs font-medium text-muted-foreground uppercase tracking-wider sticky right-0", children: "Actions" })
         ] }) }),
-        /* @__PURE__ */ jsxRuntime.jsx("tbody", { className: "table-body-card", children: Array.from({ length: items }).map((_, i) => /* @__PURE__ */ jsxRuntime.jsxs("tr", { className: "hover:bg-muted", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("tbody", { className: "table-body-card", children: Array.from({ length: items }).map((_, i) => /* @__PURE__ */ jsxRuntime.jsxs("tr", { className: "hover:bg-muted/50", children: [
           /* @__PURE__ */ jsxRuntime.jsx("td", { className: "px-6 py-4 whitespace-nowrap", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center", children: [
             /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-shrink-0 h-10 w-10", children: /* @__PURE__ */ jsxRuntime.jsx(SkeletonItem, { width: "w-10", height: "h-10", rounded: true }) }),
             /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "ml-4 min-w-0 flex-1", children: [
@@ -2538,17 +2538,12 @@ function Grid({
   };
   return /* @__PURE__ */ jsxRuntime.jsx("div", { className: `grid ${colClasses[cols]} ${gapClasses[gap]} ${className}`, children });
 }
-var variantStyles = {
-  default: "bg-accent border-border text-muted-foreground",
-  warning: "bg-amber/10 border-amber text-amber",
-  info: "bg-info/10 border-info text-info",
-  success: "bg-success/10 border-success text-success"
-};
-var titleStyles = {
-  default: "text-foreground",
-  warning: "text-amber",
-  info: "text-info",
-  success: "text-success"
+var variantConfig = {
+  default: { borderAccent: "gray", titleColor: "text-foreground" },
+  warning: { borderAccent: "amber", titleColor: "text-amber" },
+  info: { borderAccent: "info", titleColor: "text-info" },
+  success: { borderAccent: "success", titleColor: "text-success" },
+  danger: { borderAccent: "danger", titleColor: "text-danger" }
 };
 function InfoBox({
   title,
@@ -2556,10 +2551,19 @@ function InfoBox({
   variant = "default",
   className = ""
 }) {
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `border rounded-md p-4 ${variantStyles[variant]} ${className}`, children: [
-    /* @__PURE__ */ jsxRuntime.jsx("h4", { className: `font-medium mb-2 ${titleStyles[variant]}`, children: title }),
-    /* @__PURE__ */ jsxRuntime.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 })
-  ] });
+  const config = variantConfig[variant] || variantConfig.default;
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    Card,
+    {
+      borderAccent: config.borderAccent,
+      padding: "md",
+      className,
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx("h4", { className: `font-medium mb-2 ${config.titleColor}`, children: title }),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-sm text-muted-foreground 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",
@@ -2667,7 +2671,8 @@ function Switch({
   description,
   className = "",
   size = "md",
-  variant = "default"
+  variant = "default",
+  labelPosition = "right"
 }) {
   const toggle = () => {
     if (!disabled) {
@@ -2682,38 +2687,43 @@ function Switch({
   const variants = {
     default: {
       checked: "bg-primary",
-      unchecked: "bg-muted",
+      unchecked: "bg-input",
       ring: "focus:ring-primary"
     },
     success: {
       checked: "bg-success",
-      unchecked: "bg-muted",
+      unchecked: "bg-input",
       ring: "focus:ring-success"
     },
     danger: {
       checked: "bg-destructive",
-      unchecked: "bg-muted",
+      unchecked: "bg-input",
       ring: "focus:ring-destructive"
     },
     warning: {
       checked: "bg-warning",
-      unchecked: "bg-muted",
+      unchecked: "bg-input",
       ring: "focus:ring-warning"
     },
     info: {
       checked: "bg-info",
-      unchecked: "bg-muted",
+      unchecked: "bg-input",
       ring: "focus:ring-info"
     },
     embedded: {
       checked: "bg-success",
-      unchecked: "bg-gray-300 dark:bg-gray-600",
+      unchecked: "bg-input",
       ring: "focus:ring-success"
     }
   };
   const currentSize = sizes[size];
   const currentVariant = variants[variant];
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `flex items-start ${className}`, children: [
+  const LabelContent = /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `${labelPosition === "left" ? "mr-3 flex-1 text-left" : "ml-3 w-fit"} flex flex-col justify-center gap-1`, children: [
+    label && /* @__PURE__ */ jsxRuntime.jsx("label", { className: "text-sm font-medium text-foreground cursor-pointer", onClick: toggle, children: label }),
+    description && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs text-muted-foreground leading-snug", children: description })
+  ] });
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `flex items-center ${labelPosition === "left" ? "justify-between" : ""} ${className}`, children: [
+    labelPosition === "left" && (label || description) && LabelContent,
     /* @__PURE__ */ jsxRuntime.jsx(
       "button",
       {
@@ -2743,10 +2753,7 @@ function Switch({
         )
       }
     ),
-    (label || description) && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "ml-3 text-sm leading-6", children: [
-      label && /* @__PURE__ */ jsxRuntime.jsx("label", { className: "font-medium text-foreground cursor-pointer", onClick: toggle, children: label }),
-      description && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-muted-foreground", children: description })
-    ] })
+    labelPosition === "right" && (label || description) && LabelContent
   ] });
 }
 var variantClasses4 = {
@@ -2831,7 +2838,7 @@ function DataTableRow({
   onClick,
   hover = true
 }) {
-  const baseClasses = "hover:bg-muted transition-colors duration-150";
+  const baseClasses = "hover:bg-muted/50 transition-colors duration-150";
   const clickableClasses = onClick ? "cursor-pointer" : "";
   const hoverClasses = hover ? baseClasses : "";
   return /* @__PURE__ */ jsxRuntime.jsx(
@@ -2952,7 +2959,7 @@ function DataTableActions({
   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" : "";
+  const enhancedClasses = enhanced ? "px-2 py-1" : "";
   return /* @__PURE__ */ jsxRuntime.jsx("div", { className: `${baseClasses} ${enhancedClasses} ${className}`, children });
 }
 function StickyActionsColumn({
@@ -3169,25 +3176,25 @@ function ActionButton({
         return {
           icon: fill ? ri.RiStopCircleFill : ri.RiStopCircleLine,
           label: "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"
+          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 ? ri.RiPlayCircleFill : ri.RiPlayCircleLine,
           label: "Activate",
-          className: "bg-emerald/10  text-emerald hover:bg-emerald/20 hover:text-emerald-700 border border-emerald-200 transition-all duration-300 ease-in-out"
+          className: "bg-emerald/10 text-emerald hover:bg-emerald/20 hover:text-emerald-700 border border-emerald-200 transition-all duration-300 ease-in-out"
         };
       case "view":
         return {
           icon: fill ? ri.RiEyeFill : ri.RiEyeLine,
           label: "View",
-          className: "bg-muted  text-muted-foreground hover:bg-muted hover:text-foreground border border-border transition-all duration-300 ease-in-out"
+          className: "bg-muted text-muted-foreground hover:bg-muted hover:text-foreground border border-border transition-all duration-300 ease-in-out"
         };
       case "metrics":
         return {
           icon: fill ? ri.RiBarChartFill : ri.RiBarChartLine,
           label: "Metrics",
-          className: "bg-purple/10  text-purple-600 hover:bg-purple-100 hover:text-purple-700 border border-purple-200 transition-all duration-300 ease-in-out"
+          className: "bg-purple/10 text-purple hover:bg-purple-100 hover:text-purple-700 border border-purple-200 transition-all duration-300 ease-in-out"
         };
       case "start":
         return {
@@ -3205,7 +3212,7 @@ function ActionButton({
         return {
           icon: fill ? ri.RiRestartFill : ri.RiRestartLine,
           label: "Restart",
-          className: "bg-orange/10  text-orange hover:bg-orange/20 hover:text-orange-700 border border-orange/30 transition-all duration-300 ease-in-out"
+          className: "bg-orange/10 text-orange hover:bg-orange/20 hover:text-orange-700 border border-orange/30 transition-all duration-300 ease-in-out"
         };
       case "pause":
         return {
@@ -3217,23 +3224,23 @@ function ActionButton({
         return {
           icon: fill ? ri.RiFileCopyFill : ri.RiFileCopyLine,
           label: "Clone",
-          className: "bg-indigo/10  text-indigo hover:bg-indigo/20 hover:text-indigo-700 border border-indigo-200 transition-all duration-300 ease-in-out"
+          className: "bg-indigo/10 text-indigo hover:bg-indigo/20 hover:text-indigo-700 border border-indigo-200 transition-all duration-300 ease-in-out"
         };
       default:
         return null;
     }
   };
-  const variantConfig = getVariantConfig();
+  const variantConfig2 = getVariantConfig();
   const variantClasses5 = {
     primary: "btn-primary",
     secondary: "btn-secondary",
     danger: "btn-danger",
     success: "bg-success/10 text-success hover:bg-success/20 hover:text-success border border-success transition-all duration-300 ease-in-out",
     warning: "bg-amber/10 text-amber hover:bg-amber/20 hover:text-amber border border-amber 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/10  text-purple-600 hover:bg-purple-100 hover:text-purple-700 border border-purple-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/10 text-purple hover:bg-purple/20 hover:text-purple-700 border border-purple-200 transition-all duration-300 ease-in-out"
   };
-  let variantClass = variantConfig ? variantConfig.className : variant ? variantClasses5[variant] : "";
+  let variantClass = variantConfig2 ? variantConfig2.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";
@@ -3260,13 +3267,13 @@ function ActionButton({
           }
         )
       }
-    ) : (variantConfig?.icon || IconComponent) && /* @__PURE__ */ jsxRuntime.jsx(
+    ) : (variantConfig2?.icon || IconComponent) && /* @__PURE__ */ jsxRuntime.jsx(
       "div",
       {
         className: `${iconSizes[size]} flex items-center justify-center flex-shrink-0`,
         "aria-hidden": "true",
-        children: variantConfig?.icon ? /* @__PURE__ */ jsxRuntime.jsx(
-          variantConfig.icon,
+        children: variantConfig2?.icon ? /* @__PURE__ */ jsxRuntime.jsx(
+          variantConfig2.icon,
           {
             className: "w-full h-full",
             "aria-hidden": "true"
@@ -3274,11 +3281,11 @@ function ActionButton({
         ) : IconComponent ? /* @__PURE__ */ jsxRuntime.jsx(IconComponent, { className: "w-full h-full", "aria-hidden": "true" }) : null
       }
     ),
-    !iconOnly && (restProps.children ? restProps.children : (variantConfig?.label || label) && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex items-center", children: variantConfig?.label || label }))
+    !iconOnly && (restProps.children ? restProps.children : (variantConfig2?.label || label) && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex items-center", children: variantConfig2?.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 accessibleLabel = title || (iconOnly ? variantConfig2?.label || label : void 0);
+  const buttonAriaLabel = iconOnly && !accessibleLabel ? variantConfig2?.label || label || "Action button" : accessibleLabel;
+  const tooltipContent = title || (iconOnly ? variantConfig2?.label || label : void 0);
   const buttonClassName = `
 
     ${terminalMode ? "btn-terminal" : `btn ${variantClass} ${paddingClasses3} ${heightClasses[size]}  ${className} ${isDisabled ? "opacity-50 cursor-not-allowed" : ""}`}`;