@a13y/react 0.1.3 → 0.1.5

package/dist/index.js

@@ -1307,7 +1307,7 @@ var AccessibleAccordion = ({
   const headerStyles = {
     width: "100%",
     padding: "16px",
-    backgroundColor: "#fff",
+    backgroundColor: "rgba(128, 128, 128, 0.08)",
     border: "none",
     textAlign: "left",
     fontSize: "16px",
@@ -1316,11 +1316,13 @@ var AccessibleAccordion = ({
     display: "flex",
     justifyContent: "space-between",
     alignItems: "center",
-    transition: "background-color 0.2s"
+    transition: "background-color 0.2s",
+    color: "inherit"
   };
   const contentStyles = {
     padding: "16px",
-    backgroundColor: "#f9fafb"
+    backgroundColor: "rgba(128, 128, 128, 0.05)",
+    color: "inherit"
   };
   const iconStyles = (isOpen) => ({
     transition: "transform 0.2s",
@@ -1355,8 +1357,8 @@ var AccessibleAccordion = ({
               },
               "data-accordion-button": true,
               "data-index": index,
-              onMouseEnter: (e) => !item.disabled && (e.currentTarget.style.backgroundColor = "#f9fafb"),
-              onMouseLeave: (e) => e.currentTarget.style.backgroundColor = "#fff",
+              onMouseEnter: (e) => !item.disabled && (e.currentTarget.style.backgroundColor = "rgba(128, 128, 128, 0.15)"),
+              onMouseLeave: (e) => e.currentTarget.style.backgroundColor = "rgba(128, 128, 128, 0.08)",
               children: [
                 /* @__PURE__ */ jsx("span", { children: item.title }),
                 /* @__PURE__ */ jsx("span", { "aria-hidden": "true", style: iconStyles(isOpen), children: "\u25BC" })
@@ -2029,8 +2031,8 @@ var AccessiblePagination = ({
     minWidth: "40px",
     height: "40px",
     padding: "8px 12px",
-    border: "1px solid #e5e7eb",
-    backgroundColor: "#fff",
+    border: "1px solid #d1d5db",
+    backgroundColor: "#f9fafb",
     borderRadius: "6px",
     fontSize: "14px",
     fontWeight: 500,
@@ -2038,7 +2040,8 @@ var AccessiblePagination = ({
     transition: "all 0.2s",
     display: "flex",
     alignItems: "center",
-    justifyContent: "center"
+    justifyContent: "center",
+    color: "#374151"
   };
   const activeButtonStyles = {
     ...buttonBaseStyles,
@@ -2075,12 +2078,12 @@ var AccessiblePagination = ({
         style: currentPage === 1 ? disabledButtonStyles : buttonBaseStyles,
         onMouseEnter: (e) => {
           if (currentPage !== 1) {
-            e.currentTarget.style.backgroundColor = "#f3f4f6";
+            e.currentTarget.style.backgroundColor = "#e5e7eb";
           }
         },
         onMouseLeave: (e) => {
           if (currentPage !== 1) {
-            e.currentTarget.style.backgroundColor = "#fff";
+            e.currentTarget.style.backgroundColor = "#f9fafb";
           }
         },
         children: "\xAB\xAB"
@@ -2096,12 +2099,12 @@ var AccessiblePagination = ({
         style: currentPage === 1 ? disabledButtonStyles : buttonBaseStyles,
         onMouseEnter: (e) => {
           if (currentPage !== 1) {
-            e.currentTarget.style.backgroundColor = "#f3f4f6";
+            e.currentTarget.style.backgroundColor = "#e5e7eb";
           }
         },
         onMouseLeave: (e) => {
           if (currentPage !== 1) {
-            e.currentTarget.style.backgroundColor = "#fff";
+            e.currentTarget.style.backgroundColor = "#f9fafb";
           }
         },
         children: "\xAB"
@@ -2123,12 +2126,12 @@ var AccessiblePagination = ({
           style: isActive ? activeButtonStyles : buttonBaseStyles,
           onMouseEnter: (e) => {
             if (!isActive) {
-              e.currentTarget.style.backgroundColor = "#f3f4f6";
+              e.currentTarget.style.backgroundColor = "#e5e7eb";
             }
           },
           onMouseLeave: (e) => {
             if (!isActive) {
-              e.currentTarget.style.backgroundColor = "#fff";
+              e.currentTarget.style.backgroundColor = "#f9fafb";
             }
           },
           children: pageNumber
@@ -2145,12 +2148,12 @@ var AccessiblePagination = ({
         style: currentPage === totalPages ? disabledButtonStyles : buttonBaseStyles,
         onMouseEnter: (e) => {
           if (currentPage !== totalPages) {
-            e.currentTarget.style.backgroundColor = "#f3f4f6";
+            e.currentTarget.style.backgroundColor = "#e5e7eb";
           }
         },
         onMouseLeave: (e) => {
           if (currentPage !== totalPages) {
-            e.currentTarget.style.backgroundColor = "#fff";
+            e.currentTarget.style.backgroundColor = "#f9fafb";
           }
         },
         children: "\xBB"
@@ -2166,12 +2169,12 @@ var AccessiblePagination = ({
         style: currentPage === totalPages ? disabledButtonStyles : buttonBaseStyles,
         onMouseEnter: (e) => {
           if (currentPage !== totalPages) {
-            e.currentTarget.style.backgroundColor = "#f3f4f6";
+            e.currentTarget.style.backgroundColor = "#e5e7eb";
           }
         },
         onMouseLeave: (e) => {
           if (currentPage !== totalPages) {
-            e.currentTarget.style.backgroundColor = "#fff";
+            e.currentTarget.style.backgroundColor = "#f9fafb";
           }
         },
         children: "\xBB\xBB"
@@ -2309,7 +2312,8 @@ function AccessibleCombobox({
     display: "block",
     fontWeight: 600,
     fontSize: "14px",
-    marginBottom: "6px"
+    marginBottom: "6px",
+    color: "inherit"
   };
   const inputContainerStyles = {
     position: "relative",
@@ -2321,9 +2325,10 @@ function AccessibleCombobox({
     border: `1px solid ${error ? "#ef4444" : "#e5e7eb"}`,
     borderRadius: "6px",
     fontSize: "14px",
-    backgroundColor: disabled ? "#f9fafb" : "#fff",
+    backgroundColor: "rgba(128, 128, 128, 0.08)",
     cursor: disabled ? "not-allowed" : "pointer",
-    outline: "none"
+    outline: "none",
+    color: "inherit"
   };
   const iconStyles = {
     position: "absolute",
@@ -2341,22 +2346,24 @@ function AccessibleCombobox({
     marginTop: "4px",
     maxHeight: "240px",
     overflowY: "auto",
-    backgroundColor: "#fff",
+    backgroundColor: "#ffffff",
     border: "1px solid #e5e7eb",
     borderRadius: "6px",
     boxShadow: "0 4px 6px rgba(0, 0, 0, 0.1)",
     zIndex: 1e3,
     listStyle: "none",
     margin: 0,
-    padding: "4px"
+    padding: "4px",
+    color: "#1f2937"
   };
   const optionStyles = (isHighlighted, isSelected, isDisabled) => ({
     padding: "10px 12px",
     cursor: isDisabled ? "not-allowed" : "pointer",
-    backgroundColor: isHighlighted ? "#f3f4f6" : isSelected ? "#e5e7eb" : "transparent",
+    backgroundColor: isHighlighted ? "#e5e7eb" : isSelected ? "#f3f4f6" : "transparent",
     borderRadius: "4px",
     fontSize: "14px",
-    opacity: isDisabled ? 0.5 : 1
+    opacity: isDisabled ? 0.5 : 1,
+    color: "#1f2937"
   });
   const errorStyles = {
     marginTop: "6px",
@@ -2603,7 +2610,8 @@ var AccessibleDatePicker = ({
     display: "block",
     fontWeight: 600,
     fontSize: "14px",
-    marginBottom: "6px"
+    marginBottom: "6px",
+    color: "inherit"
   };
   const buttonStyles = {
     width: "100%",
@@ -2611,23 +2619,25 @@ var AccessibleDatePicker = ({
     border: `1px solid ${error ? "#ef4444" : "#e5e7eb"}`,
     borderRadius: "6px",
     fontSize: "14px",
-    backgroundColor: disabled ? "#f9fafb" : "#fff",
+    backgroundColor: "rgba(128, 128, 128, 0.08)",
     cursor: disabled ? "not-allowed" : "pointer",
     textAlign: "left",
-    position: "relative"
+    position: "relative",
+    color: "inherit"
   };
   const calendarStyles = {
     position: "absolute",
     top: "100%",
     left: 0,
     marginTop: "4px",
-    backgroundColor: "#fff",
+    backgroundColor: "#ffffff",
     border: "1px solid #e5e7eb",
     borderRadius: "8px",
     boxShadow: "0 4px 6px rgba(0, 0, 0, 0.1)",
     padding: "16px",
     zIndex: 1e3,
-    minWidth: "280px"
+    minWidth: "280px",
+    color: "#1f2937"
   };
   const headerStyles = {
     display: "flex",
@@ -2639,9 +2649,10 @@ var AccessibleDatePicker = ({
     padding: "6px 12px",
     border: "1px solid #e5e7eb",
     borderRadius: "4px",
-    backgroundColor: "#fff",
+    backgroundColor: "#f3f4f6",
     cursor: "pointer",
-    fontSize: "14px"
+    fontSize: "14px",
+    color: "#1f2937"
   };
   const gridStyles = {
     display: "grid",
@@ -2662,7 +2673,7 @@ var AccessibleDatePicker = ({
     fontSize: "14px",
     cursor: isDisabled ? "not-allowed" : "pointer",
     backgroundColor: isSelected ? "#3b82f6" : isToday ? "#e5e7eb" : "transparent",
-    color: isSelected ? "#fff" : !isCurrentMonth ? "#9ca3af" : isDisabled ? "#d1d5db" : "#1f2937",
+    color: isSelected ? "#ffffff" : !isCurrentMonth ? "#9ca3af" : isDisabled ? "#d1d5db" : "#1f2937",
     fontWeight: isSelected || isToday ? 600 : 400,
     opacity: isDisabled ? 0.5 : 1
   });
@@ -2908,7 +2919,8 @@ function AccessibleTreeView({
       cursor: node.disabled ? "not-allowed" : "pointer",
       backgroundColor: isSelected ? "#e5e7eb" : "transparent",
       borderRadius: "4px",
-      opacity: node.disabled ? 0.5 : 1
+      opacity: node.disabled ? 0.5 : 1,
+      color: "inherit"
     };
     const iconStyles = {
       width: "16px",
@@ -3046,7 +3058,8 @@ function AccessibleTable({
     textAlign: "left",
     borderBottom: "2px solid #e5e7eb",
     fontWeight: 600,
-    backgroundColor: "#f9fafb"
+    backgroundColor: "rgba(128, 128, 128, 0.08)",
+    color: "inherit"
   };
   const sortButtonStyles = {
     background: "none",
@@ -3058,11 +3071,13 @@ function AccessibleTable({
     font: "inherit",
     fontWeight: 600,
     padding: 0,
-    width: "100%"
+    width: "100%",
+    color: "inherit"
   };
   const tdStyles = {
     padding: "12px",
-    borderBottom: "1px solid #e5e7eb"
+    borderBottom: "1px solid #e5e7eb",
+    color: "inherit"
   };
   const rowStyles = (isSelected) => ({
     backgroundColor: isSelected ? "#eff6ff" : "transparent"