@gamecp/ui 0.1.18 → 0.1.20

package/dist/index.d.mts

@@ -3,7 +3,7 @@ import * as React$1 from 'react';
 import React__default, { ButtonHTMLAttributes, ReactNode, AnchorHTMLAttributes } from 'react';
 import { IconType } from 'react-icons';
 
-type BadgeVariant = 'default' | 'primary' | 'secondary' | 'success' | 'warning' | 'error' | 'info' | 'gray' | 'purple' | 'pink' | 'indigo' | 'yellow' | 'orange' | 'teal' | 'cyan' | 'lime' | 'emerald' | 'rose' | 'sky' | 'violet' | 'fuchsia' | 'amber' | 'custom';
+type BadgeVariant = 'default' | 'primary' | 'secondary' | 'success' | 'warning' | 'error' | 'info' | 'gray' | 'purple' | 'pink' | 'indigo' | 'amber' | 'orange' | 'teal' | 'cyan' | 'lime' | 'emerald' | 'rose' | 'sky' | 'violet' | 'fuchsia' | 'amber' | 'custom';
 type BadgeSize = 'sm' | 'md' | 'lg';
 interface BadgeProps {
     children: React__default.ReactNode;
@@ -37,7 +37,7 @@ interface BaseCardProps {
     disabled?: boolean;
 }
 type CardPadding = 'none' | 'sm' | 'md' | 'lg' | 'xl';
-type BorderAccent = 'none' | 'green' | 'blue' | 'red' | 'yellow' | 'purple' | 'orange' | 'gray';
+type BorderAccent = 'none' | 'success' | 'info' | 'danger' | 'amber' | 'purple' | 'orange' | 'gray';
 type CardVariant = 'default' | 'elevated' | 'outlined' | 'filled';
 interface InteractiveCardProps extends BaseCardProps {
     hover?: boolean;
@@ -48,7 +48,7 @@ interface HeaderCardProps extends InteractiveCardProps {
     subtitle?: string;
     description?: string;
     icon?: IconType;
-    iconColor?: 'green' | 'blue' | 'red' | 'yellow' | 'purple' | 'orange' | 'gray' | 'indigo' | 'pink';
+    iconColor?: 'success' | 'info' | 'danger' | 'amber' | 'purple' | 'orange' | 'gray' | 'indigo' | 'pink';
     iconSize?: 'sm' | 'md' | 'lg';
     actionButton?: ReactNode;
     headerClassName?: string;
@@ -72,15 +72,18 @@ interface CardProps extends AccordionCardProps, StatusCardProps {
     minHeight?: string;
     maxHeight?: string;
     id?: string;
+    headerBorder?: string;
+    headerBg?: string;
+    headerStatus?: 'online' | 'offline' | 'maintenance' | 'error' | 'restarting' | 'starting' | 'success' | 'info' | 'updating' | 'unknown';
 }
-declare function Card({ children, className, onClick, disabled, padding, borderAccent, variant, overflow, minHeight, maxHeight, hover, clickable, title, subtitle, description, icon: Icon, iconColor, iconSize, actionButton, headerClassName, accordion, defaultExpanded, onToggle, contentClassName, status, statusIcon, statusText, id, }: CardProps): react_jsx_runtime.JSX.Element;
+declare function Card({ children, className, onClick, disabled, padding, borderAccent, variant, overflow, minHeight, maxHeight, hover, clickable, title, subtitle, description, icon: Icon, iconColor, iconSize, actionButton, headerClassName, accordion, defaultExpanded, onToggle, contentClassName, status, statusIcon, statusText, headerBorder, headerBg, headerStatus, id, }: CardProps): react_jsx_runtime.JSX.Element;
 
 interface ConfirmDialogOptions {
     title: string;
     message: string;
     confirmText: string;
     cancelText?: string;
-    confirmButtonColor?: 'red' | 'blue' | 'green';
+    confirmButtonColor?: 'danger' | 'info' | 'success';
 }
 interface ConfirmDialogProps {
     isOpen: boolean;
@@ -101,7 +104,7 @@ declare function ConfirmDialog({ isOpen, options, onConfirm, onCancel }: Confirm
  *     title: 'Delete Item',
  *     message: 'Are you sure you want to delete this item?',
  *     confirmText: 'Delete',
- *     confirmButtonColor: 'red'
+ *     confirmButtonColor: 'danger'
  *   });
  *
  *   if (confirmed) {
@@ -597,7 +600,7 @@ declare function SharedTooltip({ id, place, offset, delayShow, delayHide, classN
 
 interface SpinnerProps {
     size?: 'sm' | 'md' | 'lg' | 'xl';
-    color?: 'primary' | 'blue' | 'white' | 'current';
+    color?: 'primary' | 'info' | 'white' | 'current';
     className?: string;
 }
 declare const Spinner: React__default.FC<SpinnerProps>;

package/dist/index.d.ts

@@ -3,7 +3,7 @@ import * as React$1 from 'react';
 import React__default, { ButtonHTMLAttributes, ReactNode, AnchorHTMLAttributes } from 'react';
 import { IconType } from 'react-icons';
 
-type BadgeVariant = 'default' | 'primary' | 'secondary' | 'success' | 'warning' | 'error' | 'info' | 'gray' | 'purple' | 'pink' | 'indigo' | 'yellow' | 'orange' | 'teal' | 'cyan' | 'lime' | 'emerald' | 'rose' | 'sky' | 'violet' | 'fuchsia' | 'amber' | 'custom';
+type BadgeVariant = 'default' | 'primary' | 'secondary' | 'success' | 'warning' | 'error' | 'info' | 'gray' | 'purple' | 'pink' | 'indigo' | 'amber' | 'orange' | 'teal' | 'cyan' | 'lime' | 'emerald' | 'rose' | 'sky' | 'violet' | 'fuchsia' | 'amber' | 'custom';
 type BadgeSize = 'sm' | 'md' | 'lg';
 interface BadgeProps {
     children: React__default.ReactNode;
@@ -37,7 +37,7 @@ interface BaseCardProps {
     disabled?: boolean;
 }
 type CardPadding = 'none' | 'sm' | 'md' | 'lg' | 'xl';
-type BorderAccent = 'none' | 'green' | 'blue' | 'red' | 'yellow' | 'purple' | 'orange' | 'gray';
+type BorderAccent = 'none' | 'success' | 'info' | 'danger' | 'amber' | 'purple' | 'orange' | 'gray';
 type CardVariant = 'default' | 'elevated' | 'outlined' | 'filled';
 interface InteractiveCardProps extends BaseCardProps {
     hover?: boolean;
@@ -48,7 +48,7 @@ interface HeaderCardProps extends InteractiveCardProps {
     subtitle?: string;
     description?: string;
     icon?: IconType;
-    iconColor?: 'green' | 'blue' | 'red' | 'yellow' | 'purple' | 'orange' | 'gray' | 'indigo' | 'pink';
+    iconColor?: 'success' | 'info' | 'danger' | 'amber' | 'purple' | 'orange' | 'gray' | 'indigo' | 'pink';
     iconSize?: 'sm' | 'md' | 'lg';
     actionButton?: ReactNode;
     headerClassName?: string;
@@ -72,15 +72,18 @@ interface CardProps extends AccordionCardProps, StatusCardProps {
     minHeight?: string;
     maxHeight?: string;
     id?: string;
+    headerBorder?: string;
+    headerBg?: string;
+    headerStatus?: 'online' | 'offline' | 'maintenance' | 'error' | 'restarting' | 'starting' | 'success' | 'info' | 'updating' | 'unknown';
 }
-declare function Card({ children, className, onClick, disabled, padding, borderAccent, variant, overflow, minHeight, maxHeight, hover, clickable, title, subtitle, description, icon: Icon, iconColor, iconSize, actionButton, headerClassName, accordion, defaultExpanded, onToggle, contentClassName, status, statusIcon, statusText, id, }: CardProps): react_jsx_runtime.JSX.Element;
+declare function Card({ children, className, onClick, disabled, padding, borderAccent, variant, overflow, minHeight, maxHeight, hover, clickable, title, subtitle, description, icon: Icon, iconColor, iconSize, actionButton, headerClassName, accordion, defaultExpanded, onToggle, contentClassName, status, statusIcon, statusText, headerBorder, headerBg, headerStatus, id, }: CardProps): react_jsx_runtime.JSX.Element;
 
 interface ConfirmDialogOptions {
     title: string;
     message: string;
     confirmText: string;
     cancelText?: string;
-    confirmButtonColor?: 'red' | 'blue' | 'green';
+    confirmButtonColor?: 'danger' | 'info' | 'success';
 }
 interface ConfirmDialogProps {
     isOpen: boolean;
@@ -101,7 +104,7 @@ declare function ConfirmDialog({ isOpen, options, onConfirm, onCancel }: Confirm
  *     title: 'Delete Item',
  *     message: 'Are you sure you want to delete this item?',
  *     confirmText: 'Delete',
- *     confirmButtonColor: 'red'
+ *     confirmButtonColor: 'danger'
  *   });
  *
  *   if (confirmed) {
@@ -597,7 +600,7 @@ declare function SharedTooltip({ id, place, offset, delayShow, delayHide, classN
 
 interface SpinnerProps {
     size?: 'sm' | 'md' | 'lg' | 'xl';
-    color?: 'primary' | 'blue' | 'white' | 'current';
+    color?: 'primary' | 'info' | 'white' | 'current';
     className?: string;
 }
 declare const Spinner: React__default.FC<SpinnerProps>;

package/dist/index.js

@@ -16,28 +16,27 @@ var NextLink__default = /*#__PURE__*/_interopDefault(NextLink);
 
 // src/Badge.tsx
 var badgeVariants = {
-  default: "bg-gray-100 text-foreground border-border",
+  default: "bg-muted text-foreground border-border",
   primary: "bg-primary-100 text-primary-800 border-primary-200",
-  secondary: "bg-gray-100 text-foreground border-border",
+  secondary: "bg-muted 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",
+  warning: "bg-amber/20 text-yellow-800 border-amber/30",
+  error: "bg-danger/20 text-danger border-danger/30",
   info: "bg-muted text-muted-foreground border-ring",
-  gray: "bg-gray-100 text-foreground border-border",
+  gray: "bg-muted 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",
+  pink: "bg-pink/20 text-pink border-pink-200",
+  indigo: "bg-indigo/20 text-indigo border-indigo-200",
+  orange: "bg-orange/20 text-orange-800 border-orange/30",
   teal: "bg-teal-100 text-teal-800 border-teal-200",
-  cyan: "bg-cyan-100 text-cyan-800 border-cyan-200",
+  cyan: "bg-cyan/20 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",
+  emerald: "bg-emerald/20 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"
+  amber: "bg-amber/20 text-amber-800 border-amber/30"
 };
 var badgeSizes = {
   sm: "px-2 py-0.5 text-xs",
@@ -72,7 +71,7 @@ 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",
+  danger: "bg-danger text-white hover:bg-danger 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"
@@ -192,13 +191,13 @@ var paddingClasses = {
 };
 var borderAccentClasses = {
   none: "",
-  green: "border-l-4 border-l-green-500",
-  blue: "border-l-4 border-l-ring",
-  red: "border-l-4 border-l-red-500",
-  yellow: "border-l-4 border-l-yellow-500",
-  purple: "border-l-4 border-l-purple-500",
-  orange: "border-l-4 border-l-orange-500",
-  gray: "border-l-4 border-l-gray-500"
+  success: "border-l-4 border-l-success",
+  info: "border-l-4 border-l-info",
+  danger: "border-l-4 border-l-danger",
+  amber: "border-l-4 border-l-amber",
+  purple: "border-l-4 border-l-purple",
+  orange: "border-l-4 border-l-orange",
+  gray: "border-l-4 border-l-gray"
 };
 var variantClasses2 = {
   default: "card",
@@ -207,15 +206,15 @@ var variantClasses2 = {
   filled: "bg-muted rounded-lg border border-border"
 };
 var iconColorClasses = {
-  green: "text-success",
-  blue: "text-primary",
-  red: "text-destructive",
-  yellow: "text-yellow-600",
-  purple: "text-purple-600",
-  orange: "text-orange-600",
+  success: "text-success",
+  info: "text-info",
+  danger: "text-danger",
+  amber: "text-amber",
+  purple: "text-purple",
+  orange: "text-orange",
   gray: "text-muted-foreground",
-  indigo: "text-indigo-600",
-  pink: "text-pink-600"
+  indigo: "text-indigo",
+  pink: "text-pink"
 };
 var iconSizeClasses = {
   sm: "w-4 h-4",
@@ -223,10 +222,10 @@ var iconSizeClasses = {
   lg: "w-8 h-8"
 };
 var statusClasses = {
-  success: "bg-success-light border-success-light",
-  warning: "bg-yellow-50 border-yellow-200",
-  error: "bg-destructive border-destructive",
-  info: "bg-primary border-primary",
+  success: "bg-success/10 border-success",
+  warning: "bg-amber/10 border-amber",
+  error: "bg-danger/10 border-danger",
+  info: "bg-info/10 border-info",
   neutral: "bg-muted border-border"
 };
 function Card({
@@ -246,7 +245,7 @@ function Card({
   subtitle,
   description,
   icon: Icon,
-  iconColor = "blue",
+  iconColor = "info",
   iconSize = "md",
   actionButton,
   headerClassName = "",
@@ -257,14 +256,42 @@ function Card({
   status,
   statusIcon,
   statusText,
+  headerBorder,
+  headerBg,
+  headerStatus,
   id
 }) {
   const [isExpanded, setIsExpanded] = React4.useState(defaultExpanded);
+  const getHeaderStatusClasses = (status2) => {
+    switch (status2) {
+      case "online":
+      case "success":
+        return { border: "bg-success", bg: "status-running-bg-50" };
+      case "offline":
+      case "error":
+        return { border: "bg-destructive", bg: "status-error-bg-50" };
+      case "maintenance":
+      case "starting":
+      case "info":
+        return { border: "bg-warning", bg: "status-starting-bg-50" };
+      case "restarting":
+      case "updating":
+        return { border: "bg-orange", bg: "status-restarting-bg-50" };
+      case "unknown":
+        return { border: "bg-muted-foreground/30", bg: "bg-muted/10" };
+      default:
+        return { border: headerBorder, bg: headerBg };
+    }
+  };
+  const statusClassesMapped = getHeaderStatusClasses(headerStatus);
+  const activeHeaderBorder = statusClassesMapped?.border || headerBorder;
+  const activeHeaderBg = statusClassesMapped?.bg || headerBg;
   const baseClasses = [
     variantClasses2[variant],
     paddingClasses[padding],
     borderAccentClasses[borderAccent],
-    overflow !== "visible" ? `overflow-${overflow}` : "",
+    overflow !== "visible" || activeHeaderBorder ? `overflow-${overflow === "visible" && activeHeaderBorder ? "hidden" : overflow}` : "",
+    activeHeaderBorder ? "relative" : "",
     hover ? "hover:shadow-md transition-shadow" : "",
     clickable || onClick ? "cursor-pointer" : "",
     disabled ? "opacity-50 cursor-not-allowed" : "",
@@ -292,7 +319,8 @@ function Card({
       style,
       onClick: clickable || onClick ? handleClick : void 0,
       children: [
-        (title || subtitle || description || Icon || actionButton || status) && /* @__PURE__ */ jsxRuntime.jsx("div", { className: `${headerClassName}`, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between", children: [
+        activeHeaderBorder && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute top-0 left-0 right-0 flex justify-center z-10 pointer-events-none", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: `h-1.5 w-24 ${activeHeaderBorder} rounded-b-xl shadow-sm` }) }),
+        (title || subtitle || description || Icon || actionButton || status) && /* @__PURE__ */ jsxRuntime.jsx("div", { className: `${activeHeaderBg ? activeHeaderBg + " " : ""}${headerClassName}${activeHeaderBorder ? " pt-6 pb-4 px-4" : ""}`, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between", children: [
           /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center space-x-3 flex-1 min-w-0", children: [
             Icon && /* @__PURE__ */ jsxRuntime.jsx("div", { className: `${iconColorClasses[iconColor]} flex-shrink-0`, children: /* @__PURE__ */ jsxRuntime.jsx(Icon, { className: iconSizeClasses[iconSize] }) }),
             statusIcon && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-shrink-0", children: statusIcon }),
@@ -500,7 +528,7 @@ function Modal({
       /* @__PURE__ */ jsxRuntime.jsx(framerMotion.AnimatePresence, { children: /* @__PURE__ */ jsxRuntime.jsx(
         framerMotion.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"}`,
+          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-50 m-0 ${fullScreen ? "p-0" : "p-4"}`,
           variants: backdropVariants,
           initial: "hidden",
           animate: isOpen ? "visible" : "hidden",
@@ -515,7 +543,7 @@ function Modal({
               "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]`}`,
+              className: `w-full flex flex-col overflow-hidden relative ${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",
@@ -542,7 +570,7 @@ function Modal({
     /* @__PURE__ */ jsxRuntime.jsx(framerMotion.AnimatePresence, { children: /* @__PURE__ */ jsxRuntime.jsx(
       framerMotion.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"}`,
+        className: `modal-backdrop fixed inset-0 w-screen h-screen bg-black/10 flex items-center ${customStyles.backdrop || "justify-center"} z-50 m-0 ${fullScreen ? "p-0" : "p-4"}`,
         variants: backdropVariants,
         initial: "hidden",
         animate: isOpen ? "visible" : "hidden",
@@ -557,7 +585,7 @@ function Modal({
             "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]`}`,
+            className: `bg-card border border-border shadow-xl w-full flex flex-col overflow-hidden relative ${fullScreen ? "h-full rounded-none" : `rounded-lg ${customStyles.container || className || sizeClasses3[size]} max-h-[90vh]`}`,
             variants: modalVariants,
             initial: "hidden",
             animate: isOpen ? "visible" : "exit",
@@ -617,14 +645,14 @@ function Modal({
   );
 }
 function ConfirmDialog({ isOpen, options, onConfirm, onCancel }) {
-  const { title, message, confirmText, cancelText = "Cancel", confirmButtonColor = "blue" } = options;
+  const { title, message, confirmText, cancelText = "Cancel", confirmButtonColor = "info" } = options;
   const getConfirmVariant = () => {
     switch (confirmButtonColor) {
-      case "red":
+      case "danger":
         return "danger";
-      case "green":
+      case "success":
         return "primary";
-      case "blue":
+      case "info":
       default:
         return "primary";
     }
@@ -1893,7 +1921,7 @@ function SkeletonGamesTable({
     "div",
     {
       className: `overflow-hidden shadow ring-1 ring-black ring-opacity-5 md:rounded-lg ${className}`,
-      children: /* @__PURE__ */ jsxRuntime.jsxs("table", { className: "min-w-full divide-y divide-gray-300", children: [
+      children: /* @__PURE__ */ jsxRuntime.jsxs("table", { className: "min-w-full divide-y divide-border", children: [
         /* @__PURE__ */ jsxRuntime.jsx("thead", { className: "bg-muted", children: /* @__PURE__ */ jsxRuntime.jsxs("tr", { children: [
           /* @__PURE__ */ jsxRuntime.jsx("th", { className: "px-6 py-3 text-left text-xs font-medium text-muted-foreground uppercase tracking-wider", children: "Game" }),
           /* @__PURE__ */ jsxRuntime.jsx("th", { className: "px-6 py-3 text-left text-xs font-medium text-muted-foreground uppercase tracking-wider", children: "Type" }),
@@ -2080,7 +2108,7 @@ function FormInput({
       return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-2", children: [
         /* @__PURE__ */ jsxRuntime.jsxs("label", { className: "form-label", children: [
           label,
-          required && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-red-500 ml-1", children: "*" })
+          required && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-danger ml-1", children: "*" })
         ] }),
         description && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-secondary-foreground", children: description }),
         /* @__PURE__ */ jsxRuntime.jsx("div", { className: "relative", children: /* @__PURE__ */ jsxRuntime.jsx(
@@ -2098,7 +2126,7 @@ function FormInput({
       return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-2", children: [
         /* @__PURE__ */ jsxRuntime.jsxs("label", { className: "form-label", children: [
           label,
-          required && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-red-500 ml-1", children: "*" })
+          required && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-danger ml-1", children: "*" })
         ] }),
         description && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-secondary-foreground", children: description }),
         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center space-x-3", children: [
@@ -2110,7 +2138,7 @@ function FormInput({
     return /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
       /* @__PURE__ */ jsxRuntime.jsxs("label", { className: "form-label", children: [
         label,
-        required && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-red-500 ml-1", children: "*" })
+        required && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-danger ml-1", children: "*" })
       ] }),
       description && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-secondary-foreground", children: description }),
       /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative", children: [
@@ -2380,7 +2408,7 @@ function FormInput({
           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__ */ jsxRuntime.jsx(ri.RiCheckLine, { className: "w-4 h-4 text-green-500", "aria-hidden": "true" }) : /* @__PURE__ */ jsxRuntime.jsx(ri.RiFileCopyLine, { className: "w-4 h-4", "aria-hidden": "true" })
+          children: copied ? /* @__PURE__ */ jsxRuntime.jsx(ri.RiCheckLine, { className: "w-4 h-4 text-success", "aria-hidden": "true" }) : /* @__PURE__ */ jsxRuntime.jsx(ri.RiFileCopyLine, { className: "w-4 h-4", "aria-hidden": "true" })
         }
       ),
       /* @__PURE__ */ jsxRuntime.jsx(
@@ -2446,7 +2474,7 @@ function FormInput({
           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__ */ jsxRuntime.jsx(ri.RiCheckLine, { className: "w-4 h-4 text-green-500", "aria-hidden": "true" }) : /* @__PURE__ */ jsxRuntime.jsx(ri.RiFileCopyLine, { className: "w-4 h-4", "aria-hidden": "true" })
+          children: copied ? /* @__PURE__ */ jsxRuntime.jsx(ri.RiCheckLine, { className: "w-4 h-4 text-success", "aria-hidden": "true" }) : /* @__PURE__ */ jsxRuntime.jsx(ri.RiFileCopyLine, { className: "w-4 h-4", "aria-hidden": "true" })
         }
       ),
       clearable && !copyable && value !== "" && value !== null && value !== void 0 && !disabled && !readOnly && /* @__PURE__ */ jsxRuntime.jsx(
@@ -2511,15 +2539,15 @@ function Grid({
 }
 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"
+  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-yellow-800 dark:text-yellow-200",
-  info: "text-blue-800 dark:text-blue-200",
-  success: "text-green-800 dark:text-green-200"
+  warning: "text-amber",
+  info: "text-info",
+  success: "text-success"
 };
 function InfoBox({
   title,
@@ -2723,7 +2751,7 @@ var Spinner = ({
   };
   const colorClasses2 = {
     primary: "border-primary-600",
-    blue: "border-ring",
+    info: "border-info",
     white: "border-white",
     current: "border-current"
   };
@@ -2877,8 +2905,8 @@ function StatusBadge({
   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",
+    warning: "bg-amber/20 text-yellow-800",
+    error: "bg-danger/20 text-danger",
     info: "bg-primary-100 text-primary-800"
   };
   return /* @__PURE__ */ jsxRuntime.jsx("span", { className: `badge ${variantClasses5[variant]}`, children: status });
@@ -2943,9 +2971,9 @@ function CountBadge({
   const variantClasses5 = {
     primary: "bg-ring ",
     secondary: "bg-muted0 ",
-    success: "bg-green-500 ",
-    warning: "bg-yellow-500 ",
-    error: "bg-red-500 "
+    success: "bg-success ",
+    warning: "bg-amber ",
+    error: "bg-danger "
   };
   if (count <= 0) return null;
   return /* @__PURE__ */ jsxRuntime.jsx(
@@ -2976,8 +3004,8 @@ function ClearButton({
     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",
+    overlay: "absolute -top-1 -right-1 bg-danger  rounded-full flex items-center justify-center hover:bg-danger transition-colors cursor-pointer",
+    inline: "bg-danger  rounded-full flex items-center justify-center hover:bg-danger transition-colors",
     ghost: "text-muted-foreground hover:text-muted-foreground transition-colors"
   };
   const baseProps = {
@@ -3113,49 +3141,49 @@ function ActionButton({
         return {
           icon: fill ? ri.RiPlayCircleFill : ri.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"
+          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: 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"
+          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: 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"
+          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"
         };
       case "start":
         return {
           icon: fill ? ri.RiPlayFill : ri.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"
+          className: "bg-success/10 text-success hover:bg-success/20 hover:text-success border border-success transition-all duration-300 ease-in-out"
         };
       case "stop":
         return {
           icon: fill ? ri.RiStopFill : ri.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"
+          className: "bg-danger/10 text-danger hover:bg-danger/20 hover:text-danger border border-danger transition-all duration-300 ease-in-out"
         };
       case "restart":
         return {
           icon: fill ? ri.RiRestartFill : ri.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"
+          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 {
           icon: fill ? ri.RiPauseFill : ri.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"
+          className: "bg-amber/10 text-amber hover:bg-amber/20 hover:text-amber border border-amber transition-all duration-300 ease-in-out"
         };
       case "clone":
         return {
           icon: fill ? ri.RiFileCopyFill : ri.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"
+          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;
@@ -3166,10 +3194,10 @@ function ActionButton({
     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",
+    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-50  text-purple-600 hover:bg-purple-100 hover:text-purple-700 border border-purple-200 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"
   };
   let variantClass = variantConfig ? variantConfig.className : variant ? variantClasses5[variant] : "";
   if (terminalMode && variantClass) {