@vkzstudio/muza-ui 1.9.2 → 1.9.3

package/dist/components/Input/Input.js

@@ -37,7 +37,7 @@ const Y = M(
     weight: "medium",
     fixY: !0
   }),
-  "flex-1 bg-transparent outline-0 text-comp-input-text-primary transition-colors",
+  "autofill-field flex-1 bg-transparent outline-0 text-comp-input-text-primary transition-colors",
   "placeholder:text-comp-input-text-placeholder",
   "placeholder:font-regular",
   "disabled:cursor-not-allowed",

package/dist/components/PhoneInput/PhoneInput.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"PhoneInput.d.ts","sourceRoot":"","sources":["../../../src/components/PhoneInput/PhoneInput.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,KAAK,wBAAwB,EAC7B,KAAK,SAAS,EAMf,MAAM,OAAO,CAAA;AACd,OAAO,EAAE,KAAK,YAAY,EAAO,MAAM,0BAA0B,CAAA;AACjE,OAAO,EACL,KAAK,WAAW,EAChB,KAAK,aAAa,EAGnB,MAAM,2BAA2B,CAAA;AAOlC;;GAEG;AACH,MAAM,WAAW,oBAAoB;IACnC,qFAAqF;IACrF,UAAU,EAAE,MAAM,CAAA;IAClB,4DAA4D;IAC5D,OAAO,EAAE,aAAa,CAAA;CACvB;AAKD,QAAA,MAAM,oBAAoB;;;8EAyBzB,CAAA;AAcD;;;;;;;;;;;;GAYG;AACH,MAAM,WAAW,eACf,SAAQ,IAAI,CACR,wBAAwB,CAAC,OAAO,CAAC,EACjC,MAAM,GAAG,MAAM,GAAG,QAAQ,GAAG,OAAO,GAAG,cAAc,GAAG,UAAU,CACnE,EACD,YAAY,CAAC,OAAO,oBAAoB,CAAC;IAC3C,2CAA2C;IAC3C,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,qDAAqD;IACrD,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,sDAAsD;IACtD,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,MAAM,GAAG,IAAI,CAAA;IAClC,4DAA4D;IAC5D,KAAK,CAAC,EAAE,OAAO,CAAA;IACf;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,kEAAkE;IAClE,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB;;;OAGG;IACH,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,IAAI,EAAE,oBAAoB,KAAK,IAAI,CAAA;IAC9D,8EAA8E;IAC9E,cAAc,CAAC,EAAE,MAAM,CAAA;IACvB;;;;OAIG;IACH,SAAS,CAAC,EAAE,WAAW,EAAE,CAAA;IACzB;;;OAGG;IACH,uBAAuB,CAAC,EAAE,OAAO,CAAA;IACjC,6FAA6F;IAC7F,UAAU,CAAC,EAAE,SAAS,CAAA;IACtB,sGAAsG;IACtG,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB;;;OAGG;IACH,wBAAwB,CAAC,EAAE,MAAM,CAAA;IACjC;;;OAGG;IACH,iBAAiB,CAAC,EAAE,MAAM,CAAA;IAC1B;;;OAGG;IACH,aAAa,CAAC,EAAE,MAAM,CAAA;CACvB;AAED,eAAO,MAAM,UAAU,8GA6HtB,CAAA"}
+{"version":3,"file":"PhoneInput.d.ts","sourceRoot":"","sources":["../../../src/components/PhoneInput/PhoneInput.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,KAAK,wBAAwB,EAC7B,KAAK,SAAS,EAMf,MAAM,OAAO,CAAA;AACd,OAAO,EAAE,KAAK,YAAY,EAAO,MAAM,0BAA0B,CAAA;AACjE,OAAO,EACL,KAAK,WAAW,EAChB,KAAK,aAAa,EAGnB,MAAM,2BAA2B,CAAA;AAOlC;;GAEG;AACH,MAAM,WAAW,oBAAoB;IACnC,qFAAqF;IACrF,UAAU,EAAE,MAAM,CAAA;IAClB,4DAA4D;IAC5D,OAAO,EAAE,aAAa,CAAA;CACvB;AAKD,QAAA,MAAM,oBAAoB;;;8EAyBzB,CAAA;AAsBD;;;;;;;;;;;;GAYG;AACH,MAAM,WAAW,eACf,SAAQ,IAAI,CACR,wBAAwB,CAAC,OAAO,CAAC,EACjC,MAAM,GAAG,MAAM,GAAG,QAAQ,GAAG,OAAO,GAAG,cAAc,GAAG,UAAU,CACnE,EACD,YAAY,CAAC,OAAO,oBAAoB,CAAC;IAC3C,2CAA2C;IAC3C,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,qDAAqD;IACrD,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,sDAAsD;IACtD,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,MAAM,GAAG,IAAI,CAAA;IAClC,4DAA4D;IAC5D,KAAK,CAAC,EAAE,OAAO,CAAA;IACf;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,kEAAkE;IAClE,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB;;;OAGG;IACH,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,IAAI,EAAE,oBAAoB,KAAK,IAAI,CAAA;IAC9D,8EAA8E;IAC9E,cAAc,CAAC,EAAE,MAAM,CAAA;IACvB;;;;OAIG;IACH,SAAS,CAAC,EAAE,WAAW,EAAE,CAAA;IACzB;;;OAGG;IACH,uBAAuB,CAAC,EAAE,OAAO,CAAA;IACjC,6FAA6F;IAC7F,UAAU,CAAC,EAAE,SAAS,CAAA;IACtB,sGAAsG;IACtG,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB;;;OAGG;IACH,wBAAwB,CAAC,EAAE,MAAM,CAAA;IACjC;;;OAGG;IACH,iBAAiB,CAAC,EAAE,MAAM,CAAA;IAC1B;;;OAGG;IACH,aAAa,CAAC,EAAE,MAAM,CAAA;CACvB;AAED,eAAO,MAAM,UAAU,8GA6HtB,CAAA"}

package/dist/components/PhoneInput/PhoneInput.js

@@ -1,13 +1,13 @@
-import { jsx as u, jsxs as W } from "react/jsx-runtime";
-import { forwardRef as Y, useId as B, useRef as G, useState as H, useEffect as J } from "react";
-import { cva as K } from "class-variance-authority";
-import { usePhoneInput as O, defaultCountries as Q } from "react-international-phone";
-import { useMuzaTranslations as U } from "../../translations/TranslationContext.js";
+import { jsx as p, jsxs as W } from "react/jsx-runtime";
+import { forwardRef as B, useId as G, useRef as H, useState as J, useEffect as K } from "react";
+import { cva as O } from "class-variance-authority";
+import { usePhoneInput as Q, defaultCountries as U } from "react-international-phone";
+import { useMuzaTranslations as X } from "../../translations/TranslationContext.js";
 import { cn as v } from "../../utils/cn.js";
-import { FormField as X } from "../FormField/FormField.js";
+import { FormField as Y } from "../FormField/FormField.js";
 import { typographyVariants as Z } from "../Typography/Typography.js";
 import { CountrySelector as _ } from "./CountrySelector.js";
-const q = K(
+const q = O(
   [
     "group flex items-center",
     "rounded-full border border-comp-input-stroke-def bg-comp-input-fill-def transition-colors",
@@ -32,43 +32,51 @@ const q = K(
       error: !1
     }
   }
-), ee = (t) => v(
-  Z({
-    size: t === "xs" || t === "sm" ? "input" : "base",
-    weight: "medium",
-    fixY: !0
-  }),
-  "h-full min-w-0 flex-1 bg-transparent px-comp-input-p-hor text-comp-input-text-primary outline-0 transition-colors",
-  "placeholder:font-regular placeholder:text-comp-input-text-placeholder",
-  "disabled:cursor-not-allowed"
-), te = Y(
+), ee = (o) => {
+  const e = o === "xs" || o === "sm";
+  return v(
+    Z({
+      size: e ? "input" : "base",
+      weight: "medium"
+    }),
+    // This input fills the field's height, so the browser paints the autofill
+    // highlight across the whole segment. `fixY` would nudge that painted box
+    // down along with the text, past the wrapper's rounded bottom edge, so the
+    // baseline correction is applied as padding and the outer end is rounded to
+    // follow the pill.
+    e ? "fix-y-box-1" : "fix-y-box",
+    "autofill-field h-full min-w-0 flex-1 rounded-r-full bg-transparent px-comp-input-p-hor text-comp-input-text-primary outline-0 transition-colors",
+    "placeholder:font-regular placeholder:text-comp-input-text-placeholder",
+    "disabled:cursor-not-allowed"
+  );
+}, te = B(
   ({
-    className: t,
-    label: p,
-    hint: c,
-    size: d,
-    error: o,
+    className: o,
+    label: e,
+    hint: d,
+    size: c,
+    error: r,
     value: m,
     defaultValue: C,
     onChange: i,
     defaultCountry: V = "cz",
-    countries: h = Q,
-    disabled: f,
-    required: l,
+    countries: f = U,
+    disabled: h,
+    required: s,
     disableRequiredAsterisk: w,
     labelExtra: P,
     infoTooltip: R,
     id: k,
     countrySelectorAriaLabel: N,
-    searchPlaceholder: z,
-    noResultsText: F,
+    searchPlaceholder: S,
+    noResultsText: z,
     ...b
-  }, e) => {
-    const s = U(), S = B(), r = k ?? S, y = c ? `${r}-hint` : void 0, x = p ? `${r}-label` : void 0, n = G(null), I = m !== void 0, [j, A] = H(C ?? ""), L = I ? m : j, { inputValue: M, country: T, setCountry: $, handlePhoneValueChange: D } = O({
+  }, t) => {
+    const u = X(), F = G(), n = k ?? F, x = d ? `${n}-hint` : void 0, y = e ? `${n}-label` : void 0, l = H(null), I = m !== void 0, [j, A] = J(C ?? ""), L = I ? m : j, { inputValue: M, country: T, setCountry: $, handlePhoneValueChange: D } = Q({
       defaultCountry: V,
       value: L,
-      countries: h,
-      inputRef: n,
+      countries: f,
+      inputRef: l,
       // Keep the dial code out of the number field — it lives in the country
       // selector segment. `phone` in onChange is still full E.164.
       disableDialCodeAndPrefix: !0,
@@ -83,54 +91,54 @@ const q = K(
         });
       }
     });
-    return J(() => {
-      e && (typeof e == "function" ? e(n.current) : e.current = n.current);
-    }, [e]), /* @__PURE__ */ u(
-      X,
+    return K(() => {
+      t && (typeof t == "function" ? t(l.current) : t.current = l.current);
+    }, [t]), /* @__PURE__ */ p(
+      Y,
       {
-        label: p,
-        hint: c,
-        error: o,
-        required: l,
+        label: e,
+        hint: d,
+        error: r,
+        required: s,
         disableRequiredAsterisk: w,
-        htmlFor: r,
-        labelId: x,
-        hintId: y,
+        htmlFor: n,
+        labelId: y,
+        hintId: x,
         labelExtra: P,
         infoTooltip: R,
-        children: /* @__PURE__ */ W("div", { className: v(q({ size: d, error: o }), t), children: [
-          /* @__PURE__ */ u(
+        children: /* @__PURE__ */ W("div", { className: v(q({ size: c, error: r }), o), children: [
+          /* @__PURE__ */ p(
             _,
             {
               selectedCountry: T.iso2,
               onCountryChange: (a) => $(a),
-              countries: h,
-              disabled: f,
-              error: o,
-              ariaLabel: N ?? s.phoneInput.countrySelectorAriaLabel,
-              searchPlaceholder: z ?? s.phoneInput.searchPlaceholder,
-              noResultsText: F ?? s.phoneInput.noResults
+              countries: f,
+              disabled: h,
+              error: r,
+              ariaLabel: N ?? u.phoneInput.countrySelectorAriaLabel,
+              searchPlaceholder: S ?? u.phoneInput.searchPlaceholder,
+              noResultsText: z ?? u.phoneInput.noResults
             }
           ),
-          /* @__PURE__ */ u(
+          /* @__PURE__ */ p(
             "input",
             {
               ...b,
-              ref: n,
-              id: r,
+              ref: l,
+              id: n,
               type: "tel",
               inputMode: "tel",
               autoComplete: b.autoComplete ?? "tel",
               "data-slot": "phone-input",
               value: M,
               onChange: D,
-              disabled: f,
-              required: l,
-              "aria-describedby": y,
-              "aria-labelledby": x,
-              "aria-invalid": o,
-              "aria-required": l,
-              className: ee(d)
+              disabled: h,
+              required: s,
+              "aria-describedby": x,
+              "aria-labelledby": y,
+              "aria-invalid": r,
+              "aria-required": s,
+              className: ee(c)
             }
           )
         ] })

package/dist/components/Textarea/Textarea.js

@@ -11,7 +11,7 @@ const E = x(
       weight: "medium",
       size: "base"
     }),
-    "w-full font-text text-comp-input-text-primary transition-colors outline-none",
+    "w-full font-text text-comp-input-text-primary autofill-field transition-colors outline-none",
     "placeholder:font-regular placeholder:text-comp-input-text-placeholder",
     "mr-[calc(var(--spacing-xl)/2)] pt-xl pr-[calc(var(--spacing-comp-input-p-hor)-var(--spacing-xl)/2)] pb-[calc(var(--spacing-xl)/2)] pl-comp-input-p-hor",
     "disabled:cursor-not-allowed"