mcr-design-systems 1.0.18 → 1.0.20

package/dist/components/Alert/helper/variants.js

@@ -94,7 +94,7 @@ const t = e({
     "flex",
     "flex-row",
     "gap-xs",
-    "items-center",
+    "items-start",
     "justify-center",
     "relative",
     "w-full"

package/dist/components/Dropdown/index.js

@@ -1,4 +1,4 @@
-import { jsxs as m, Fragment as te, jsx as r } from "react/jsx-runtime";
+import { jsxs as f, Fragment as te, jsx as r } from "react/jsx-runtime";
 import * as s from "react";
 import { Root as re, Trigger as ae, Portal as ne, Content as le, Label as L, Separator as T } from "../../node_modules/@radix-ui/react-dropdown-menu/dist/index.js";
 import { useVirtualizer as oe } from "../../node_modules/@tanstack/react-virtual/dist/esm/index.js";
@@ -31,43 +31,43 @@ const ce = s.forwardRef(
     variant: q,
     fullWidth: B,
     state: G,
-    enableVirtualization: h,
+    enableVirtualization: m,
     itemHeight: J = 40,
     maxHeight: K = 300,
-    search: p = !1,
+    search: h = !1,
     searchPlaceholder: O = "Search...",
     onSearchChange: z,
     width: b,
     ...Q
   }, U) => {
-    const n = ie({ size: S, variant: q, fullWidth: B, state: G }), d = s.useMemo(() => h !== void 0 ? h : c === void 0 ? (console.warn(
+    const n = ie({ size: S, variant: q, fullWidth: B, state: G }), d = s.useMemo(() => m !== void 0 ? m : c === void 0 ? (console.warn(
       "Dropdown is not open, virtualization will not be applied. Please ensure the dropdown is open when using virtualization."
-    ), !1) : a.reduce((t, l) => t + ("items" in l ? l.items.length : 1), 0) > 50, [h, a, c]), u = s.useMemo(() => {
+    ), !1) : a.reduce((t, l) => t + ("items" in l ? l.items.length : 1), 0) > 50, [m, a, c]), u = s.useMemo(() => {
       if (!d) return [];
       const e = [];
       let t = 0;
-      return a.forEach((l, f) => {
+      return a.forEach((l, p) => {
         "items" in l ? (l.label && e.push({
           type: "group-label",
           groupLabel: l.label,
           index: t++,
-          key: `group-label-${f}`
+          key: `group-label-${p}`
         }), l.items.forEach((_, ee) => {
           e.push({
             type: "item",
             data: _,
             index: t++,
-            key: `group-${f}-item-${ee}`
+            key: `group-${p}-item-${ee}`
           });
-        }), f < a.length - 1 && e.push({
+        }), p < a.length - 1 && e.push({
           type: "separator",
           index: t++,
-          key: `separator-${f}`
+          key: `separator-${p}`
         })) : e.push({
           type: "item",
           data: l,
           index: t++,
-          key: `item-${f}`
+          key: `item-${p}`
         });
       }), e;
     }, [d, a]), y = s.useRef(null), g = oe({
@@ -124,7 +124,7 @@ const ce = s.forwardRef(
         default:
           return null;
       }
-    }, X = () => H ? /* @__PURE__ */ m("div", { className: n.emptyState(), children: [
+    }, X = () => H ? /* @__PURE__ */ f("div", { className: n.emptyState(), children: [
       /* @__PURE__ */ r(k, { name: "loading-01", size: 16, className: "animate-spin mr-2" }),
       "Loading..."
     ] }) : a.length === 0 ? /* @__PURE__ */ r("div", { className: n.emptyState(), children: Y }) : d && u.length > 0 ? /* @__PURE__ */ r(
@@ -154,11 +154,11 @@ const ce = s.forwardRef(
           ) : null;
         })
       }
-    ) : a.map((e, t) => "items" in e ? /* @__PURE__ */ m(s.Fragment, { children: [
+    ) : a.map((e, t) => "items" in e ? /* @__PURE__ */ f(s.Fragment, { children: [
       e.label && /* @__PURE__ */ r(L, { className: n.label(), children: e.label }),
       e.items.map(v),
       t < a.length - 1 && /* @__PURE__ */ r(T, { className: n.separator() })
-    ] }, `group-${t}`) : v(e)), Z = /* @__PURE__ */ m(te, { children: [
+    ] }, `group-${t}`) : v(e)), Z = /* @__PURE__ */ f(te, { children: [
       /* @__PURE__ */ r(
         "span",
         {
@@ -171,9 +171,9 @@ const ce = s.forwardRef(
       ),
       /* @__PURE__ */ r(k, { name: "chevron-down", size: 16, className: n.chevron() })
     ] });
-    return h && c === void 0 ? (console.error(
+    return m && c === void 0 ? (console.error(
       "Virtualization is enabled but the dropdown is not open. Please ensure the dropdown is open when using virtualization."
-    ), null) : /* @__PURE__ */ m(
+    ), null) : /* @__PURE__ */ f(
       re,
       {
         open: c,
@@ -193,10 +193,10 @@ const ce = s.forwardRef(
               children: F || D || Z
             }
           ),
-          /* @__PURE__ */ r(ne, { children: /* @__PURE__ */ m(
+          /* @__PURE__ */ r(ne, { children: /* @__PURE__ */ f(
             le,
             {
-              className: n.content({ search: p }),
+              className: n.content({ search: h }),
               side: j,
               align: A,
               sideOffset: I,
@@ -205,7 +205,7 @@ const ce = s.forwardRef(
               },
               ...i && R(`${i}-content`),
               children: [
-                p && /* @__PURE__ */ r("div", { className: "px-xs-3 py-xs-3", children: /* @__PURE__ */ r(
+                h && /* @__PURE__ */ r("div", { className: "px-xs-3 py-xs-3", children: /* @__PURE__ */ r(
                   "input",
                   {
                     autoFocus: !0,
@@ -221,11 +221,9 @@ const ce = s.forwardRef(
                   "div",
                   {
                     ref: y,
-                    className: w("overflow-auto", {
-                      "p-xs-3": p
-                    }),
-                    style: { maxHeight: `${K - (p ? 46 : 0)}px` },
-                    "data-search": p ? "true" : "false",
+                    className: w("overflow-auto p-xs-3"),
+                    style: { maxHeight: `${K - (h ? 46 : 0)}px` },
+                    "data-search": h ? "true" : "false",
                     children: X()
                   }
                 )

package/dist/components/MenuItem/helper/variants.js

@@ -34,7 +34,8 @@ const s = e(
         "data-[disabled]:opacity-50",
         "data-[disabled]:cursor-not-allowed",
         "data-[disabled]:pointer-events-none",
-        "data-[disabled]:text-fg-neutral-disabled"
+        "data-[disabled]:text-fg-neutral-disabled",
+        "rounded-sm"
       ],
       indicator: [
         "absolute",

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.20",
   "type": "module",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",