@stokelp/ui 2.51.1 → 2.52.0

package/dist/ui.js

@@ -287,7 +287,7 @@ function as({
               }
             ) }) })
           ] }),
-          /* @__PURE__ */ C(Ga, { asChild: !0, children: /* @__PURE__ */ C("button", { children: /* @__PURE__ */ C("svg", { width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ C(
+          /* @__PURE__ */ C(Ga, { disabled: m.readOnly, asChild: !0, children: /* @__PURE__ */ C("button", { children: /* @__PURE__ */ C("svg", { width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ C(
             "path",
             {
               fillRule: "evenodd",
@@ -17826,7 +17826,7 @@ const { withProvider: ep, withContext: H5 } = Q(ua, {
   sm: "600px"
 }, Tp = {
   extend: {
-    disabled: "&:is(:disabled, [disabled], [data-disabled], .PhoneInput--disabled)",
+    disabled: "&:is(:disabled, [disabled], [data-disabled], .PhoneInput--disabled), &:is(:readonly, [readonly], [data-readonly], .PhoneInput--readOnly)",
     checked: "&:where(:checked, [data-checked], [aria-checked=true], [data-state=checked])",
     closed: "&:where([data-state=closed])",
     collapsed: '&:where([aria-collapsed=true], [data-collapsed], [data-state="collapsed"])',
@@ -18408,7 +18408,10 @@ const { withProvider: ep, withContext: H5 } = Q(ua, {
       }
     },
     _focus: {
-      borderColor: "primary.500"
+      borderColor: {
+        base: "primary.500",
+        _disabled: "grey.100"
+      }
     },
     _placeholderShown: {
       color: "grey.400",
@@ -19135,7 +19138,7 @@ const { withProvider: ep, withContext: H5 } = Q(ua, {
         base: "grey.900",
         _disabled: "grey.300"
       },
-      cursor: "pointer",
+      cursor: { base: "pointer", _disabled: "not-allowed" },
       display: "inline-flex",
       outline: 0,
       position: "relative",
@@ -19181,7 +19184,12 @@ const { withProvider: ep, withContext: H5 } = Q(ua, {
     p: "space-8",
     textStyle: "body.md",
     bg: "transparent",
-    color: "secondary.900"
+    color: "secondary.900",
+    _disabled: {
+      cursor: "not-allowed",
+      color: "grey.300",
+      bg: "grey.50"
+    }
   },
   className: "input-addon",
   description: "The styles for the InputAddon component",
@@ -19197,7 +19205,8 @@ const { withProvider: ep, withContext: H5 } = Q(ua, {
     },
     bg: {
       "&:has(> input[disabled], > input[data-disabled])": "grey.50",
-      base: "white"
+      base: "white",
+      _disabled: "grey.50"
     },
     borderWidth: "1px",
     '& [data-recipe="inputAddon"]:first-child': {
@@ -21207,9 +21216,10 @@ const If = Y({
       cursor: "pointer",
       right: "space-48",
       top: "10px",
-      color: {
-        base: "secondary.900",
-        _disabled: "grey.300"
+      color: "secondary.900",
+      _disabled: {
+        color: "grey.300",
+        pointerEvents: "none"
       }
     },
     trigger: {
@@ -21220,6 +21230,13 @@ const If = Y({
       color: {
         base: "secondary.900",
         _disabled: "grey.300"
+      },
+      _disabled: {
+        _focus: {
+          border: "none"
+        },
+        pointerEvents: "none",
+        userSelect: "none"
       }
     },
     item: {
@@ -21270,6 +21287,9 @@ const If = Y({
       width: "full"
     },
     input: {
+      _disabled: {
+        pointerEvents: "none"
+      },
       _placeholderShown: {
         color: {
           base: "grey.400",