mcr-design-systems 1.0.18 → 1.0.19

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

@@ -49,6 +49,10 @@ export interface PhoneInputProps extends Omit<React.InputHTMLAttributes<HTMLInpu
      * Test identifier
      */
     'data-testid'?: string;
+    /**
+     * Whether the dropdown is open (controlled)
+     */
+    clearText?: boolean;
 }
 /**
  * A phone input component that combines a country selector dropdown with a phone number input field.

package/dist/components/PhoneInput/index.js

@@ -1,27 +1,27 @@
-import { jsxs as l, jsx as s } from "react/jsx-runtime";
+import { jsxs as d, jsx as c } from "react/jsx-runtime";
 import * as n from "react";
-import G from "../../node_modules/libphonenumber-js/examples.mobile.json.js";
-import { cn as b } from "../../shared/utils/cn.js";
-import { COUNTRIES_DATA as Q } from "../../shared/flags/countries-data.js";
-import { FLAG_POSITIONS as W } from "../../shared/flags/flag-positions.js";
-import { FLAG_BASE64 as Y } from "../../shared/flags/base64.js";
-import { phoneInputVariants as q } from "./helper/variants.js";
-import { Dropdown as H } from "../Dropdown/index.js";
+import Y from "../../node_modules/libphonenumber-js/examples.mobile.json.js";
+import { cn as C } from "../../shared/utils/cn.js";
+import { COUNTRIES_DATA as q } from "../../shared/flags/countries-data.js";
+import { FLAG_POSITIONS as H } from "../../shared/flags/flag-positions.js";
+import { FLAG_BASE64 as J } from "../../shared/flags/base64.js";
+import { phoneInputVariants as K } from "./helper/variants.js";
+import { Dropdown as X } from "../Dropdown/index.js";
 import { Typography as v } from "../Typography/index.js";
-import J from "../Icon/Icon.js";
-import K from "./FagDefault.js";
-import { getExampleNumber as X } from "../../node_modules/libphonenumber-js/min/exports/getExampleNumber.js";
-import { AsYouType as Z } from "../../node_modules/libphonenumber-js/min/exports/AsYouType.js";
-const F = ({
+import P from "../Icon/Icon.js";
+import Z from "./FagDefault.js";
+import { getExampleNumber as ee } from "../../node_modules/libphonenumber-js/min/exports/getExampleNumber.js";
+import { AsYouType as te } from "../../node_modules/libphonenumber-js/min/exports/AsYouType.js";
+const D = ({
   countryCode: o
 }) => {
-  const t = W[o];
-  return /* @__PURE__ */ s("div", { className: "w-[30px] h-[20px] overflow-hidden rounded-xs", children: t === void 0 ? /* @__PURE__ */ s(K, {}) : /* @__PURE__ */ s(
+  const t = H[o];
+  return /* @__PURE__ */ c("div", { className: "w-[30px] h-[20px] overflow-hidden rounded-xs", children: t === void 0 ? /* @__PURE__ */ c(Z, {}) : /* @__PURE__ */ c(
     "div",
     {
-      className: b(),
+      className: C(),
       style: {
-        backgroundImage: `url('${Y}')`,
+        backgroundImage: `url('${J}')`,
         backgroundPosition: `${t.x}px ${t.y}px`,
         backgroundSize: "512px 512px",
         width: "32px",
@@ -30,11 +30,11 @@ const F = ({
       }
     }
   ) });
-}, ee = (o) => {
+}, oe = (o) => {
   try {
-    const t = X(
+    const t = ee(
       o.toUpperCase(),
-      G
+      Y
     );
     if (t)
       return t.formatNational();
@@ -44,153 +44,187 @@ const F = ({
     );
   }
   return "Enter phone number";
-}, P = (o, t) => {
+}, F = (o, t) => {
   if (!o || !o.trim()) return "";
   try {
-    const c = new Z(t.toUpperCase()), d = o.replace(/[^\d]/g, "");
-    if (!d) return "";
-    let a = "";
-    for (const f of d)
-      a = c.input(f);
-    return a || d;
+    const a = new te(t.toUpperCase()), l = o.replace(/[^\d]/g, "");
+    if (!l) return "";
+    let s = "";
+    for (const h of l)
+      s = a.input(h);
+    return s || l;
   } catch {
     return o.replace(/[^\d]/g, "") || "";
   }
-}, te = n.forwardRef(
+}, re = n.forwardRef(
   ({
     onCountryChange: o,
     value: t = "",
-    onValueChange: c,
-    placeholder: d,
-    countries: a = Q,
-    showSearch: f = !1,
+    onValueChange: a,
+    placeholder: l,
+    countries: s = q,
+    showSearch: h = !1,
     searchPlaceholder: O = "Search countries",
-    className: D,
-    size: h = "md",
-    "data-testid": R,
-    error: k,
+    className: T,
+    size: u = "md",
+    "data-testid": z,
+    error: R,
+    clearText: k,
     // placeholder = 'Enter phone number',
     ...A
   }, L) => {
-    const [y, z] = n.useState(!1), [T, w] = n.useState(!1), [i, V] = n.useState(
-      t || a[0]?.code || "us"
-    ), [g, S] = n.useState(""), I = n.useRef(null), N = y, x = n.useCallback((e) => {
-      z(e), e || S("");
+    const [y, M] = n.useState(!1), [_, w] = n.useState(!1), [i, $] = n.useState(
+      t || s[0]?.code || "us"
+    ), [g, I] = n.useState(""), N = n.useRef(null), S = y, x = n.useCallback((e) => {
+      M(e), e || I("");
     }, []), m = n.useMemo(
-      () => a.find((e) => e.code === i) || a[0],
-      [a, i]
-    ), _ = n.useMemo(() => d || ee(i), [i, d]), C = q({
-      size: h,
-      opened: N,
-      inputFocused: T
-    }), $ = n.useCallback(
+      () => s.find((e) => e.code === i) || s[0],
+      [s, i]
+    ), B = n.useMemo(() => l || oe(i), [i, l]), b = K({
+      size: u,
+      opened: S,
+      inputFocused: _
+    }), E = n.useCallback(
       (e) => {
-        if (o?.(e), x(!1), V(e.code), t && t.trim()) {
-          const r = P(
+        if (o?.(e), x(!1), $(e.code), t && t.trim()) {
+          const r = F(
             t,
             e.code
           );
-          c?.({
+          a?.({
             formatted: r,
             raw: t,
             country: e
           });
         }
       },
-      [o, x, t, c]
-    ), E = n.useMemo(() => a.filter(
+      [o, x, t, a]
+    ), j = n.useMemo(() => s.filter(
       (e) => e.name.toLowerCase().includes(g.toLowerCase()) || e.code.toLowerCase().includes(g.toLowerCase())
     ).map((e) => ({
       label: e.name,
       value: e.code,
-      icon: /* @__PURE__ */ s(F, { countryCode: e.code }),
+      icon: /* @__PURE__ */ c(D, { countryCode: e.code }),
       startIconSize: "auto",
       endIconSize: "auto",
-      endIcon: /* @__PURE__ */ l(v, { variants: "body", size: "sm", color: "fg-neutral-subtle", children: [
+      endIcon: /* @__PURE__ */ d(v, { variants: "body", size: "sm", color: "fg-neutral-subtlest", children: [
         "+",
         e.dial_code
       ] })
-    })), [a, g]), B = n.useCallback(
+    })), [s, g]), U = k ? /* @__PURE__ */ c(
+      "div",
+      {
+        onMouseDown: (e) => {
+          e.preventDefault(), e.stopPropagation(), setTimeout(() => {
+            a && a({
+              formatted: "",
+              raw: "",
+              country: m
+            });
+          }, 0);
+        },
+        className: "inline-flex items-center justify-center",
+        role: "button",
+        tabIndex: 0,
+        "aria-label": "Clear text",
+        children: /* @__PURE__ */ c(
+          P,
+          {
+            name: "x-circle",
+            variant: "solid",
+            size: {
+              sm: 16,
+              md: 20,
+              lg: 24
+            }[u],
+            className: "cursor-pointer text-fg-neutral-subtle"
+          }
+        )
+      }
+    ) : null, V = n.useCallback(
       (e) => {
-        const r = e.target.value, p = t, M = r.length < p.length;
+        const r = e.target.value, p = t, G = r.length < p.length;
         if (r.length > 20) {
           e.preventDefault();
           return;
         }
         if (/^[0-9\s\-()+ ]*$/.test(r) || r === "") {
-          const u = r.replace(/[^\d]/g, ""), U = p.replace(/[^\d]/g, "");
-          if (M && u === U) {
-            c?.({
+          const f = r.replace(/[^\d]/g, ""), Q = p.replace(/[^\d]/g, "");
+          if (G && f === Q) {
+            a?.({
               formatted: r,
               raw: r.replace(/[^\d]/g, ""),
               country: m
             });
             return;
           }
-          const j = u ? P(u, i) : "";
-          c?.({
-            formatted: j,
-            raw: u,
+          const W = f ? F(f, i) : "";
+          a?.({
+            formatted: W,
+            raw: f,
             country: m
           });
         }
       },
-      [m, c, i, t]
+      [m, a, i, t]
     );
-    return /* @__PURE__ */ l("div", { className: b("flex items-center", D), ref: I, children: [
-      /* @__PURE__ */ s(
-        H,
+    return /* @__PURE__ */ d("div", { className: C("flex items-center", T), ref: N, children: [
+      /* @__PURE__ */ c(
+        X,
         {
           open: y,
           onOpenChange: x,
-          items: E,
+          items: j,
           value: i,
           onValueChange: (e) => {
-            const r = a.find(
+            const r = s.find(
               (p) => p.code === e
             );
-            r && $(r);
+            r && E(r);
           },
           align: "start",
           "data-testid": "align-start-dropdown",
-          search: f,
+          search: h,
           searchPlaceholder: O,
           enableVirtualization: !0,
           onSearchChange: (e) => {
-            S(e);
+            I(e);
           },
-          width: I.current?.clientWidth || "auto",
-          children: /* @__PURE__ */ l("div", { className: C.countryButton(), children: [
-            /* @__PURE__ */ s(F, { countryCode: i }),
-            /* @__PURE__ */ l("div", { className: "flex gap-xs-4", children: [
-              /* @__PURE__ */ l(v, { variants: "body", size: "md", children: [
+          width: N.current?.clientWidth || "auto",
+          children: /* @__PURE__ */ d("div", { className: b.countryButton(), children: [
+            /* @__PURE__ */ c(D, { countryCode: i }),
+            /* @__PURE__ */ d("div", { className: "flex gap-xs-4", children: [
+              /* @__PURE__ */ d(v, { variants: "body", size: "md", children: [
                 "+",
                 m.dial_code
               ] }),
-              /* @__PURE__ */ s(J, { name: N ? "chevron-up" : "chevron-down", size: 16 })
+              /* @__PURE__ */ c(P, { name: S ? "chevron-up" : "chevron-down", size: 16 })
             ] })
           ] })
         }
       ),
-      /* @__PURE__ */ s("div", { className: C.inputContainer({ error: k, size: h }), children: /* @__PURE__ */ s(
-        "input",
-        {
-          ...A,
-          ref: L,
-          className: b(C.input({ size: h })),
-          placeholder: _,
-          value: t,
-          onChange: B,
-          onFocus: () => w(!0),
-          onBlur: () => w(!1),
-          "data-testid": R
-        }
-      ) })
+      /* @__PURE__ */ d("div", { className: b.inputContainer({ error: R, size: u }), children: [
+        /* @__PURE__ */ c(
+          "input",
+          {
+            ...A,
+            ref: L,
+            className: C(b.input({ size: u })),
+            placeholder: B,
+            value: t,
+            onChange: V,
+            onFocus: () => w(!0),
+            onBlur: () => w(!1),
+            "data-testid": z
+          }
+        ),
+        U
+      ] })
     ] });
   }
 );
-te.displayName = "PhoneInput";
+re.displayName = "PhoneInput";
 export {
-  te as PhoneInput,
-  te as default
+  re as PhoneInput,
+  re as default
 };

package/dist/tokens/tailwind-config.d.ts

@@ -117,6 +117,7 @@ export declare const generateTailwindConfig: ({ brand, font, }: {
                 brand: Record<string | number, string>;
             };
             borderColor: Record<string, string>;
+            outline: Record<string, string>;
             borderRadius: {
                 readonly none: "0rem";
                 readonly xs: "0.125rem";

package/dist/tokens/tailwind-config.js

@@ -1,12 +1,12 @@
-import { alphaColors as a, colorScales as m, baseColors as g } from "./primitives/colors.js";
+import { alphaColors as a, colorScales as g, baseColors as d } from "./primitives/colors.js";
 import { typography as t } from "./primitives/typography.js";
-import { zIndex as d, shadows as h, borderRadius as p, spacing as n } from "./primitives/layout.js";
+import { zIndex as h, shadows as p, borderRadius as u, spacing as n } from "./primitives/layout.js";
 import { semanticTokens as f } from "./semantic.js";
-const i = /* @__PURE__ */ new Map(), u = () => ({
+const i = /* @__PURE__ */ new Map(), x = () => ({
   // Base colors
-  ...g,
+  ...d,
   // Color scales
-  ...m,
+  ...g,
   // Alpha colors
   "white-alpha": a.white,
   "black-alpha": a.black,
@@ -17,23 +17,23 @@ const i = /* @__PURE__ */ new Map(), u = () => ({
   const e = `semantic-${o}`;
   if (i.has(e))
     return i.get(e);
-  const r = x(o);
+  const r = b(o);
   return i.set(e, r), r;
-}, x = (o) => {
+}, b = (o) => {
   const e = {};
   try {
     const r = f.light[o];
     if (!r)
       return console.warn(`No tokens found for category: ${o}`), e;
     Object.keys(r).forEach((s) => {
-      const l = o === "border" ? `--color-border-${s}` : `--color-${o}-${s}`;
-      e[s] = `var(${l})`;
+      const m = o === "border" ? `--color-border-${s}` : `--color-${o}-${s}`;
+      e[s] = `var(${m})`;
     });
   } catch (r) {
     console.error(`Error generating semantic colors for ${o}:`, r);
   }
   return e;
-}, b = () => c("border"), C = () => ({
+}, l = () => c("border"), C = () => ({
   sm: "640px",
   // Small devices
   md: "768px",
@@ -72,14 +72,15 @@ const i = /* @__PURE__ */ new Map(), u = () => ({
       fontFamily: e || t.fontFamilies,
       // Colors (optimized with caching)
       colors: {
-        ...u(),
+        ...x(),
         brand: o
       },
-      borderColor: b(),
+      borderColor: l(),
+      outline: l(),
       // Visual Effects
-      borderRadius: p,
-      boxShadow: h,
-      zIndex: d,
+      borderRadius: u,
+      boxShadow: p,
+      zIndex: h,
       // Animation & Transitions
       transitionTimingFunction: {
         "bounce-gentle": "cubic-bezier(0.68, -0.55, 0.265, 1.55)"

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "mcr-design-systems",
   "private": false,
-  "version": "1.0.18",
+  "version": "1.0.19",
   "type": "module",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",