@gamecp/ui 0.1.35 → 0.1.37

package/dist/index.mjs

@@ -1,6 +1,6 @@
-import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
-import React5, { forwardRef, useState, useRef, useEffect, useCallback, useMemo, useId } from 'react';
-import { RiArrowDownSLine, RiCloseLine, RiSaveLine, RiCheckLine, RiSearchLine, RiAddLine, RiCodeLine, RiSettings3Line, RiFileCopyLine, RiEyeOffLine, RiEyeLine, RiRefreshLine, RiLoader4Line, RiFilterLine, RiGridFill, RiListUnordered, RiFileCopyFill, RiPauseFill, RiPauseLine, RiRestartFill, RiRestartLine, RiStopFill, RiStopLine, RiPlayFill, RiPlayLine, RiBarChartFill, RiBarChartLine, RiEyeFill, RiPlayCircleFill, RiPlayCircleLine, RiStopCircleFill, RiStopCircleLine, RiDeleteBinFill, RiDeleteBinLine, RiEditFill, RiEditLine, RiErrorWarningLine, RiInformationLine, RiAlertLine, RiShieldLine, RiLeafLine, RiGamepadLine, RiServerLine, RiWifiLine, RiArrowLeftSLine, RiArrowRightSLine } from 'react-icons/ri';
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+import React6, { forwardRef, useState, useRef, useEffect, useCallback, useMemo, useId } from 'react';
+import { RiArrowDownSLine, RiCloseLine, RiSaveLine, RiCheckLine, RiSearchLine, RiAddLine, RiCodeLine, RiSettings3Line, RiFileCopyLine, RiEyeOffLine, RiEyeLine, RiRefreshLine, RiLoader4Line, RiFilterLine, RiGridFill, RiListUnordered, RiErrorWarningLine, RiInformationLine, RiAlertLine, RiShieldLine, RiLeafLine, RiGamepadLine, RiServerLine, RiWifiLine, RiArrowLeftSLine, RiArrowRightSLine, RiFileCopyFill, RiPauseFill, RiPauseLine, RiRestartFill, RiRestartLine, RiStopFill, RiStopLine, RiPlayFill, RiPlayLine, RiBarChartFill, RiBarChartLine, RiEyeFill, RiPlayCircleFill, RiPlayCircleLine, RiStopCircleFill, RiStopCircleLine, RiDeleteBinFill, RiDeleteBinLine, RiEditFill, RiEditLine } from 'react-icons/ri';
 import { createPortal } from 'react-dom';
 import { AnimatePresence, motion } from 'framer-motion';
 import { Tooltip } from 'react-tooltip';
@@ -64,7 +64,7 @@ function Badge({
 var variantClasses = {
   primary: "btn-primary",
   secondary: "btn-secondary",
-  danger: "btn-danger",
+  danger: "action-btn-delete",
   success: "action-btn-start",
   warning: "action-btn-pause",
   ghost: "bg-transparent hover:bg-muted hover:text-foreground border-transparent",
@@ -103,38 +103,44 @@ var Button = forwardRef(
         ref,
         className: classes,
         disabled: disabled || isLoading,
+        "aria-busy": isLoading,
         ...props,
         children: [
-          isLoading && /* @__PURE__ */ jsxs(
-            "svg",
-            {
-              className: "animate-spin h-4 w-4",
-              xmlns: "http://www.w3.org/2000/svg",
-              fill: "none",
-              viewBox: "0 0 24 24",
-              children: [
-                /* @__PURE__ */ jsx(
-                  "circle",
-                  {
-                    className: "opacity-25",
-                    cx: "12",
-                    cy: "12",
-                    r: "10",
-                    stroke: "currentColor",
-                    strokeWidth: "4"
-                  }
-                ),
-                /* @__PURE__ */ jsx(
-                  "path",
-                  {
-                    className: "opacity-75",
-                    fill: "currentColor",
-                    d: "M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
-                  }
-                )
-              ]
-            }
-          ),
+          isLoading && /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsxs(
+              "svg",
+              {
+                className: "animate-spin h-4 w-4",
+                xmlns: "http://www.w3.org/2000/svg",
+                fill: "none",
+                viewBox: "0 0 24 24",
+                "aria-hidden": "true",
+                role: "status",
+                children: [
+                  /* @__PURE__ */ jsx(
+                    "circle",
+                    {
+                      className: "opacity-25",
+                      cx: "12",
+                      cy: "12",
+                      r: "10",
+                      stroke: "currentColor",
+                      strokeWidth: "4"
+                    }
+                  ),
+                  /* @__PURE__ */ jsx(
+                    "path",
+                    {
+                      className: "opacity-75",
+                      fill: "currentColor",
+                      d: "M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
+                    }
+                  )
+                ]
+              }
+            ),
+            /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Loading..." })
+          ] }),
           !isLoading && leftIcon && /* @__PURE__ */ jsx("span", { className: "flex-shrink-0", children: leftIcon }),
           children,
           !isLoading && rightIcon && /* @__PURE__ */ jsx("span", { className: "flex-shrink-0", children: rightIcon })
@@ -301,6 +307,13 @@ function Card({
     if (disabled) return;
     onClick?.();
   };
+  const handleKeyDown = (e) => {
+    if (disabled) return;
+    if ((clickable || onClick) && (e.key === "Enter" || e.key === " ")) {
+      e.preventDefault();
+      handleClick();
+    }
+  };
   const handleToggle = () => {
     if (accordion) {
       const newExpanded = !isExpanded;
@@ -314,6 +327,10 @@ function Card({
       className: `${baseClasses} ${className}`,
       style,
       onClick: clickable || onClick ? handleClick : void 0,
+      onKeyDown: clickable || onClick ? handleKeyDown : void 0,
+      role: clickable || onClick ? "button" : void 0,
+      tabIndex: clickable || onClick ? 0 : void 0,
+      "aria-disabled": disabled,
       children: [
         activeHeaderBorder && /* @__PURE__ */ jsx("div", { className: "absolute top-0 left-0 right-0 flex justify-center z-10 pointer-events-none", children: /* @__PURE__ */ jsx(
           "div",
@@ -851,7 +868,7 @@ function Modal({
               header ? /* @__PURE__ */ jsx("div", { className: "flex-shrink-0", children: header }) : title ? /* @__PURE__ */ jsxs(
                 "div",
                 {
-                  className: `px-6 py-4 border-b border-border flex justify-between items-center flex-shrink-0 ${customStyles.header || ""}`,
+                  className: `px-6 py-4 border-b border-border flex justify-between items-center flex-shrink-0 bg-muted ${customStyles.header || ""}`,
                   children: [
                     /* @__PURE__ */ jsx("div", { className: "flex items-center gap-3", children: /* @__PURE__ */ jsx(
                       "h2",
@@ -895,7 +912,7 @@ function Modal({
               footer && /* @__PURE__ */ jsx(
                 "div",
                 {
-                  className: `flex-shrink-0 px-6 py-4 border-t border-border ${footerBg === "white" ? "bg-card" : "bg-muted"} ${customStyles.footer || ""}`,
+                  className: `flex-shrink-0 px-6 py-4 border-t border-border ${footerBg === "gray" ? "bg-card" : "bg-card"} ${customStyles.footer || ""}`,
                   children: footer
                 }
               )
@@ -926,7 +943,7 @@ function ConfirmDialog({ isOpen, options, onConfirm, onCancel }) {
     /* @__PURE__ */ jsx("p", { className: "text-foreground", children: message }),
     /* @__PURE__ */ jsxs("div", { className: "flex gap-3 justify-end", children: [
       /* @__PURE__ */ jsx(Button_default, { variant: "secondary", onClick: onCancel, children: cancelText }),
-      /* @__PURE__ */ jsx(Button_default, { variant: getConfirmVariant(), onClick: onConfirm, children: confirmText })
+      /* @__PURE__ */ jsx(Button_default, { variant: getConfirmVariant(), onClick: onConfirm, autoFocus: true, children: confirmText })
     ] })
   ] }) });
 }
@@ -1018,9 +1035,13 @@ function DropdownItem({
   item,
   selected = false,
   multiple = false,
-  onClick
+  onClick,
+  focused = false,
+  itemId
 }) {
   const { label, description, icon, disabled, variant = "default", example } = item;
+  const resolvedIcon = typeof icon === "function" ? icon(selected) : icon;
+  const resolvedDescription = typeof description === "function" ? description(selected) : description;
   const variantClasses5 = {
     default: "text-foreground hover:bg-muted/50",
     danger: "text-danger hover:bg-danger/10",
@@ -1029,9 +1050,11 @@ function DropdownItem({
   };
   const baseClasses = `
     w-full px-3 py-2 text-left text-sm transition-colors
-    flex items-start gap-3
+    flex items-start gap-3 border-b border-border/30 last:border-b-0
     ${disabled ? "opacity-50 cursor-not-allowed" : "cursor-pointer"}
     ${selected && !multiple ? "bg-primary text-primary-foreground" : variantClasses5[variant]}
+    ${focused && !selected ? "bg-muted/70 ring-2 ring-primary/50 ring-inset" : ""}
+    ${focused && selected ? "brightness-110 ring-2 ring-primary-foreground/30" : ""}
   `;
   return /* @__PURE__ */ jsxs(
     "button",
@@ -1042,6 +1065,9 @@ function DropdownItem({
       className: baseClasses,
       role: "option",
       "aria-selected": selected,
+      "aria-disabled": disabled,
+      id: itemId,
+      tabIndex: -1,
       children: [
         multiple && /* @__PURE__ */ jsx(
           "div",
@@ -1049,16 +1075,16 @@ function DropdownItem({
             className: `
             mt-0.5 w-4 h-4 rounded border flex-shrink-0
             flex items-center justify-center
-            ${selected ? "bg-primary border-primary" : "border-input"}
+            ${selected ? "bg-primary border-primary" : "border-border"}
           `,
             children: selected && /* @__PURE__ */ jsx(RiCheckLine, { className: "w-3 h-3 text-primary-foreground" })
           }
         ),
-        icon && /* @__PURE__ */ jsx("div", { className: `mt-0.5 flex-shrink-0 ${selected && !multiple ? "text-primary-foreground" : "text-muted-foreground"}`, children: icon }),
+        resolvedIcon && /* @__PURE__ */ jsx("div", { className: `mt-0.5 flex-shrink-0 ${selected ? "text-primary-foreground" : "text-muted-foreground"}`, children: resolvedIcon }),
         /* @__PURE__ */ jsxs("div", { className: "flex-1 min-w-0", children: [
-          /* @__PURE__ */ jsx("div", { className: `font-medium ${selected && !multiple ? "text-primary-foreground" : ""}`, children: label }),
-          description && /* @__PURE__ */ jsx("div", { className: `text-xs mt-0.5 ${selected && !multiple ? "text-primary-foreground/80" : "text-muted-foreground"}`, children: description }),
-          example && /* @__PURE__ */ jsx("div", { className: `text-xs mt-0.5 ${selected && !multiple ? "text-primary-foreground/60" : "text-secondary-foreground"}`, children: example })
+          /* @__PURE__ */ jsx("div", { className: `font-medium ${selected ? "text-primary-foreground" : ""}`, children: label }),
+          resolvedDescription && /* @__PURE__ */ jsx("div", { className: `text-xs mt-0.5 ${selected ? "text-primary-foreground" : "text-muted-foreground"}`, children: resolvedDescription }),
+          example && /* @__PURE__ */ jsx("div", { className: `text-xs mt-0.5 ${selected ? "text-primary-foreground/60" : "text-secondary-foreground"}`, children: example })
         ] }),
         selected && !multiple && /* @__PURE__ */ jsx(RiCheckLine, { className: "w-4 h-4 flex-shrink-0 text-primary-foreground" })
       ]
@@ -1090,6 +1116,7 @@ function Dropdown({
 }) {
   const [isOpen, setIsOpen] = useState(false);
   const [calculatedPosition, setCalculatedPosition] = useState(null);
+  const [focusedIndex, setFocusedIndex] = useState(-1);
   const triggerRef = useRef(null);
   const dropdownRef = useRef(null);
   const shouldCloseOnSelect = closeOnSelect ?? !multiple;
@@ -1178,13 +1205,63 @@ function Dropdown({
   useEffect(() => {
     if (!isOpen) return;
     const handleKeyDown = (event) => {
-      if (event.key === "Escape") {
-        setIsOpen(false);
+      if (!items || items.length === 0) {
+        if (event.key === "Escape") {
+          setIsOpen(false);
+        }
+        return;
+      }
+      switch (event.key) {
+        case "ArrowDown":
+          event.preventDefault();
+          setFocusedIndex((prev) => {
+            const nextIndex = prev < items.length - 1 ? prev + 1 : 0;
+            let checkIndex = nextIndex;
+            while (items[checkIndex]?.disabled && checkIndex !== prev) {
+              checkIndex = checkIndex < items.length - 1 ? checkIndex + 1 : 0;
+            }
+            return checkIndex;
+          });
+          break;
+        case "ArrowUp":
+          event.preventDefault();
+          setFocusedIndex((prev) => {
+            const nextIndex = prev > 0 ? prev - 1 : items.length - 1;
+            let checkIndex = nextIndex;
+            while (items[checkIndex]?.disabled && checkIndex !== prev) {
+              checkIndex = checkIndex > 0 ? checkIndex - 1 : items.length - 1;
+            }
+            return checkIndex;
+          });
+          break;
+        case "Home":
+          event.preventDefault();
+          setFocusedIndex(0);
+          break;
+        case "End":
+          event.preventDefault();
+          setFocusedIndex(items.length - 1);
+          break;
+        case "Enter":
+        case " ":
+          event.preventDefault();
+          if (focusedIndex >= 0 && focusedIndex < items.length) {
+            const item = items[focusedIndex];
+            if (!item.disabled) {
+              handleItemSelect(item);
+            }
+          }
+          break;
+        case "Escape":
+          event.preventDefault();
+          setIsOpen(false);
+          setFocusedIndex(-1);
+          break;
       }
     };
     document.addEventListener("keydown", handleKeyDown);
     return () => document.removeEventListener("keydown", handleKeyDown);
-  }, [isOpen]);
+  }, [isOpen, items, focusedIndex]);
   useEffect(() => {
     if (!isOpen) return;
     const handleReposition = () => {
@@ -1226,13 +1303,15 @@ function Dropdown({
       return children;
     }
     if (items) {
-      return /* @__PURE__ */ jsx("div", { className: "py-1", children: items.map((item) => /* @__PURE__ */ jsx(
+      return /* @__PURE__ */ jsx("div", { className: "py-1", children: items.map((item, index) => /* @__PURE__ */ jsx(
         DropdownItem,
         {
           item,
           selected: isItemSelected(item.value),
           multiple,
-          onClick: () => handleItemSelect(item)
+          onClick: () => handleItemSelect(item),
+          focused: focusedIndex === index,
+          itemId: `${id}-option-${index}`
         },
         item.value
       )) });
@@ -1247,9 +1326,18 @@ function Dropdown({
         onClick: handleTriggerClick,
         className: `${disabled ? "opacity-50 cursor-not-allowed" : "cursor-pointer"} ${triggerClassName}`,
         role: "button",
+        tabIndex: disabled ? -1 : 0,
         "aria-expanded": isOpen,
         "aria-haspopup": "listbox",
-        "aria-controls": id,
+        "aria-controls": `${id}-listbox`,
+        "aria-activedescendant": isOpen && focusedIndex >= 0 && items ? `${id}-option-${focusedIndex}` : void 0,
+        onKeyDown: (e) => {
+          if (disabled) return;
+          if (e.key === "Enter" || e.key === " " || e.key === "ArrowDown") {
+            e.preventDefault();
+            setIsOpen(true);
+          }
+        },
         children: trigger
       }
     ),
@@ -1258,8 +1346,10 @@ function Dropdown({
         "div",
         {
           ref: dropdownRef,
-          id,
+          id: `${id}-listbox`,
           role: "listbox",
+          "aria-label": "Options",
+          "aria-multiselectable": multiple,
           className: `fixed z-[1000001] card overflow-hidden animate-dropdown-in ${className}`,
           style: {
             top: calculatedPosition.isAbove ? "auto" : calculatedPosition.top,
@@ -2181,6 +2271,9 @@ function Switch({
       onChange(!checked);
     }
   };
+  const switchId = React6.useId();
+  const labelId = label ? `${switchId}-label` : void 0;
+  const descriptionId = description ? `${switchId}-description` : void 0;
   const sizes = {
     sm: { track: "w-8 h-4", thumb: "w-3 h-3", translate: "translate-x-4" },
     md: { track: "w-11 h-6", thumb: "w-5 h-5", translate: "translate-x-5" },
@@ -2228,12 +2321,13 @@ function Switch({
         label && /* @__PURE__ */ jsx(
           "label",
           {
+            id: labelId,
+            htmlFor: switchId,
             className: "text-sm font-medium text-foreground cursor-pointer",
-            onClick: toggle,
             children: label
           }
         ),
-        description && /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground leading-snug", children: description })
+        description && /* @__PURE__ */ jsx("p", { id: descriptionId, className: "text-xs text-muted-foreground leading-snug", children: description })
       ]
     }
   );
@@ -2246,9 +2340,12 @@ function Switch({
         /* @__PURE__ */ jsx(
           "button",
           {
+            id: switchId,
             type: "button",
             role: "switch",
             "aria-checked": checked,
+            "aria-labelledby": labelId,
+            "aria-describedby": descriptionId,
             disabled,
             onClick: toggle,
             "data-tooltip-id": tooltipId,
@@ -3303,14 +3400,14 @@ function FormInput({
   };
   const getIconConfig = (iconProp) => {
     if (!iconProp) return { left: null, right: null };
-    if (React5.isValidElement(iconProp)) {
+    if (React6.isValidElement(iconProp)) {
       return { left: iconProp, right: null };
     }
     if (typeof iconProp === "object" && iconProp !== null && ("left" in iconProp || "right" in iconProp)) {
       return { left: iconProp.left || null, right: iconProp.right || null };
     }
     return {
-      left: React5.isValidElement(iconProp) ? iconProp : null,
+      left: React6.isValidElement(iconProp) ? iconProp : null,
       right: null
     };
   };
@@ -3916,7 +4013,7 @@ function Notice({
   return /* @__PURE__ */ jsxs(
     "div",
     {
-      className: `relative flex items-start ${gap} ${padding} rounded-lg overflow-hidden ${styles.bg} ${className}`,
+      className: `relative flex items-start ${gap} ${padding} rounded-xl overflow-hidden ${styles.bg} ${className}`,
       children: [
         /* @__PURE__ */ jsx(
           "div",
@@ -4094,6 +4191,7 @@ var LoadingSpinner = ({
             ]
           }
         ),
+        /* @__PURE__ */ jsx("span", { className: "sr-only", children: message }),
         showMessage && /* @__PURE__ */ jsx("div", { className: "space-y-2", children: /* @__PURE__ */ jsx(
           "p",
           {
@@ -4874,11 +4972,20 @@ function DataTableRow({
   const baseClasses = "hover:bg-muted/50 transition-colors duration-150";
   const clickableClasses = onClick ? "cursor-pointer" : "";
   const hoverClasses = hover ? baseClasses : "";
+  const handleKeyDown = (e) => {
+    if (onClick && (e.key === "Enter" || e.key === " ")) {
+      e.preventDefault();
+      onClick();
+    }
+  };
   return /* @__PURE__ */ jsx(
     "tr",
     {
       className: `${hoverClasses} ${clickableClasses} ${className}`,
       onClick,
+      onKeyDown: handleKeyDown,
+      role: onClick ? "button" : void 0,
+      tabIndex: onClick ? 0 : void 0,
       children
     }
   );