@mateosuarezdev/react-ui 1.0.14 → 1.0.16

package/dist/index.js

@@ -496,7 +496,7 @@ function Br(e, { target: t = window, event: n = "keydown", enabled: r } = {}) {
     };
   }, [t, n, r]);
 }
-const Vr = "relative shrink-0 select-none transition outline-none duration-200 ease-out focus:ring-border-brand-light flex items-center justify-center cursor-pointer", Kr = {
+const Vr = "relative shrink-0 select-none transition outline-none duration-200 ease-out focus-visible:ring-border-brand-light flex items-center justify-center cursor-pointer", Kr = {
   xs: "text-xs px-1 gap-x-0.5 py-1",
   sm: "text-sm px-2.5 gap-x-1 py-1.5",
   mdsm: "text-sm px-3 gap-x-1.5 py-2.5",
@@ -508,9 +508,9 @@ const Vr = "relative shrink-0 select-none transition outline-none duration-200 e
   iconMd: "text-base p-3",
   iconLg: "text-base p-4"
 }, Xr = {
-  all: "focus:ring-1",
-  desktop: "lg:focus:ring-1",
-  mobile: "focus:ring-1 lg:focus-ring-0",
+  all: "focus-visible:ring-1",
+  desktop: "lg:focus-visible:ring-1",
+  mobile: "focus-visible:ring-1 lg:focus-ring-0",
   none: ""
 }, qr = {
   light: "font-light",
@@ -534,19 +534,19 @@ const Vr = "relative shrink-0 select-none transition outline-none duration-200 e
   12: "rounded-12",
   full: "rounded-full"
 }, Qr = {
-  transparent: "text-base-12 lg:hover:bg-base-4 focus:ring-base-6",
+  transparent: "text-base-12 lg:hover:bg-base-4 focus-visible:ring-base-6",
   transparentinactive: "text-base-11 lg:hover:bg-base-4",
-  brand: "bg-brand text-brand-text lg:hover:bg-brand-hover focus:ring-base-6 border border-transparent",
+  brand: "bg-brand text-brand-text lg:hover:bg-brand-hover focus-visible:ring-base-6 border border-transparent",
   accent: "bg-accent text-accent-text lg:hover:bg-accent-hover",
-  contrast: "bg-base-12 text-base-1 lg:hover:bg-base-11 focus:ring-base-6",
-  solid: "bg-base-3 dark-theme:bg-base-3 lg:hover:bg-base-4 border border-base-4 focus:ring-base-5",
-  solidhybrid: "border border-base-5 dark-theme:border-base-4 dark-theme:bg-base-3 lg:hover:bg-base-4 focus:ring-base-6",
-  outline: "border border-base-6 lg:hover:bg-base-3 focus:ring-base-6",
-  info: "bg-blue-3 text-blue-9 lg:hover:bg-blue-4 lg:active:bg-blue-5 focus:ring-blue-9 border border-transparent",
-  success: "bg-green-4 text-green-9 lg:hover:bg-green-5 lg:active:bg-green-6 focus:ring-green-9 border border-transparent",
-  warning: "bg-yellow-4 text-yellow-9 lg:hover:bg-yellow-5 lg:active:bg-yellow-6 focus:ring-yellow-9 border border-transparent",
-  danger: "bg-red-4 text-red-9 lg:hover:bg-red-5 focus:ring-red-9 border border-transparent",
-  dangersolid: "bg-red-9 text-base-1 dark-theme:text-base-12 lg:hover:bg-red-8 focus:ring-base-6 border border-transparent",
+  contrast: "bg-base-12 text-base-1 lg:hover:bg-base-11 focus-visible:ring-base-6",
+  solid: "bg-base-3 dark-theme:bg-base-3 lg:hover:bg-base-4 border border-base-4 focus-visible:ring-base-5",
+  solidhybrid: "border border-base-5 dark-theme:border-base-4 dark-theme:bg-base-3 lg:hover:bg-base-4 focus-visible:ring-base-6",
+  outline: "border border-base-6 lg:hover:bg-base-3 focus-visible:ring-base-6",
+  info: "bg-blue-3 text-blue-9 lg:hover:bg-blue-4 lg:active:bg-blue-5 focus-visible:ring-blue-9 border border-transparent",
+  success: "bg-green-4 text-green-9 lg:hover:bg-green-5 lg:active:bg-green-6 focus-visible:ring-green-9 border border-transparent",
+  warning: "bg-yellow-4 text-yellow-9 lg:hover:bg-yellow-5 lg:active:bg-yellow-6 focus-visible:ring-yellow-9 border border-transparent",
+  danger: "bg-red-4 text-red-9 lg:hover:bg-red-5 focus-visible:ring-red-9 border border-transparent",
+  dangersolid: "bg-red-9 text-base-1 dark-theme:text-base-12 lg:hover:bg-red-8 focus-visible:ring-base-6 border border-transparent",
   disabled: "bg-base-3 text-base-11 border border-transparent"
 }, Gr = {
   enabled: "",
@@ -3165,7 +3165,7 @@ const Yt = ({ children: e, node: t }) => $n(e, t ?? document.body), bs = ({
         onClick: O,
         className: v(
           "outline-none p-2 rounded-md transition-colors",
-          "hover:bg-base-3 focus:bg-base-3 focus:ring-2 focus:ring-brand",
+          "hover:bg-base-3 focus-visible:bg-base-3 focus-visible:ring-2 focus-visible:ring-brand",
           i
         ),
         children: n
@@ -3577,7 +3577,7 @@ const Ci = () => /* @__PURE__ */ p("div", { children: [
           className: v(
             // Base styles
             "inline-flex items-center justify-center rounded-2 border border-base-4 transition-all duration-200 ease-in-out",
-            "focus:outline-none focus:ring-2 focus:ring-base-5",
+            "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-base-5",
             // Size
             m[l],
             // Disabled state
@@ -3937,7 +3937,7 @@ const Ts = ({
                 },
                 type: I,
                 className: v(
-                  "w-full bg-transparent focus:outline-none",
+                  "w-full bg-transparent focus-visible:outline-none",
                   "placeholder:text-sm text-sm placeholder:text-base-11",
                   c || u ? "pl-9" : "pl-3",
                   {
@@ -4164,7 +4164,7 @@ const Fi = ({
     className: v(
       "w-full text-start first:rounded-t-7 last:rounded-b-7 border-b dark-theme:border-base-4",
       "last:border-none px-3 pr-2.5 py-3 dark-theme:bg-base-3 lg:hover:bg-base-4 max-lg:active:bg-base-4",
-      "transition-colors hover:cursor-pointer flex items-center justify-between outline-none lg:focus:ring-2 focus:ring-base-6",
+      "transition-colors hover:cursor-pointer flex items-center justify-between outline-none lg:focus-visible:ring-2 focus-visible:ring-base-6",
       t ? "bg-base-3 border-base-4" : "border-base-6",
       n
     ),
@@ -5185,7 +5185,7 @@ const Ys = ({
         {
           className: v("rounded-6 px-2 transition cursor-text pr-10", {
             "bg-base-3": n === "solid",
-            "border border-uielborder focus:border-transparent": n === "outline",
+            "border border-uielborder focus-visible:border-transparent": n === "outline",
             "py-3": t === "default",
             "pt-5 pb-2": t === "floating",
             "ring-2 ring-branduielborder": h,
@@ -5371,7 +5371,7 @@ const Ys = ({
                 ref: c,
                 className: v(
                   !r && u && Hs[o],
-                  "bg-base-3 border border-base-4 light-theme:drop-shadow-sm rounded-6 w-full focus:outline-none customscrollbarnohide",
+                  "bg-base-3 border border-base-4 light-theme:drop-shadow-sm rounded-6 w-full focus-visible:outline-none customscrollbarnohide",
                   "placeholder:text-base-11 text-sm",
                   "resize-none",
                   // Prevent manual resizing since we're auto-resizing