@a13y/react 0.1.3 → 0.1.5

package/dist/components/index.js

@@ -1306,7 +1306,7 @@ var AccessibleAccordion = ({
   const headerStyles = {
     width: "100%",
     padding: "16px",
-    backgroundColor: "#fff",
+    backgroundColor: "rgba(128, 128, 128, 0.08)",
     border: "none",
     textAlign: "left",
     fontSize: "16px",
@@ -1315,11 +1315,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",
@@ -1354,8 +1356,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" })
@@ -2028,8 +2030,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,
@@ -2037,7 +2039,8 @@ var AccessiblePagination = ({
     transition: "all 0.2s",
     display: "flex",
     alignItems: "center",
-    justifyContent: "center"
+    justifyContent: "center",
+    color: "#374151"
   };
   const activeButtonStyles = {
     ...buttonBaseStyles,
@@ -2074,12 +2077,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"
@@ -2095,12 +2098,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"
@@ -2122,12 +2125,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
@@ -2144,12 +2147,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"
@@ -2165,12 +2168,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"
@@ -2308,7 +2311,8 @@ function AccessibleCombobox({
     display: "block",
     fontWeight: 600,
     fontSize: "14px",
-    marginBottom: "6px"
+    marginBottom: "6px",
+    color: "inherit"
   };
   const inputContainerStyles = {
     position: "relative",
@@ -2320,9 +2324,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",
@@ -2340,22 +2345,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",
@@ -2602,7 +2609,8 @@ var AccessibleDatePicker = ({
     display: "block",
     fontWeight: 600,
     fontSize: "14px",
-    marginBottom: "6px"
+    marginBottom: "6px",
+    color: "inherit"
   };
   const buttonStyles = {
     width: "100%",
@@ -2610,23 +2618,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",
@@ -2638,9 +2648,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",
@@ -2661,7 +2672,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
   });
@@ -2907,7 +2918,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",
@@ -3045,7 +3057,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",
@@ -3057,11 +3070,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"