mcr-design-systems 1.0.10 → 1.0.13

package/dist/components/Button/index.js

@@ -1,25 +1,26 @@
-import { jsxs as v, jsx as r } from "react/jsx-runtime";
+import { jsxs as T, jsx as n } from "react/jsx-runtime";
 import "react";
-import { button as T } from "./helper/index.js";
-import { cn as O } from "../../shared/utils/cn.js";
-import { dataTestId as S } from "../../shared/utils/dataTestId.js";
+import { button as v } from "./helper/index.js";
+import { cn as w } from "../../shared/utils/cn.js";
+import { dataTestId as L } from "../../shared/utils/dataTestId.js";
 import a from "../Icon/Icon.js";
-import { Typography as j } from "../Typography/index.js";
-function A({
-  variant: o = "primary",
-  size: n = "medium",
+import { Typography as O } from "../Typography/index.js";
+import S from "../Loading/index.js";
+function D({
+  variant: i = "primary",
+  size: s = "medium",
   iconOnly: u = !1,
   leadingIcon: m,
   trailingIcon: c,
-  icon: i,
+  icon: o,
   loading: e = !1,
   className: l,
   children: d,
   disabled: p,
   ...f
 }) {
-  const t = u && !!i, h = () => {
-    switch (n) {
+  const r = u && !!o, h = () => {
+    switch (s) {
       case "xx-small":
         return 16;
       case "x-small":
@@ -33,7 +34,7 @@ function A({
         return 24;
     }
   }, x = () => {
-    switch (n) {
+    switch (s) {
       case "xx-small":
         return "sm";
       case "x-small":
@@ -47,40 +48,32 @@ function A({
       default:
         return "md";
     }
-  }, s = h(), y = e ? /* @__PURE__ */ r(
-    a,
-    {
-      name: "activity-heart",
-      size: s,
-      className: "animate-spin",
-      "aria-hidden": "true"
-    }
-  ) : null, I = m && !e ? /* @__PURE__ */ r(a, { name: m, size: s, "aria-hidden": "true" }) : null, z = c && !e ? /* @__PURE__ */ r(a, { name: c, size: s, "aria-hidden": "true" }) : null, b = t && !e ? /* @__PURE__ */ r(a, { name: i, size: s, "aria-hidden": "true" }) : null;
-  return /* @__PURE__ */ v(
+  }, t = h(), y = e ? /* @__PURE__ */ n(S, { width: t, thickness: t / 5 }) : null, I = m && !e ? /* @__PURE__ */ n(a, { name: m, size: t, "aria-hidden": "true" }) : null, b = c && !e ? /* @__PURE__ */ n(a, { name: c, size: t, "aria-hidden": "true" }) : null, z = r && !e ? /* @__PURE__ */ n(a, { name: o, size: t, "aria-hidden": "true" }) : null;
+  return /* @__PURE__ */ T(
     "button",
     {
-      className: O(
-        T({
-          variant: o,
-          size: n,
-          iconOnly: t,
-          spacing: t ? void 0 : n
+      className: w(
+        v({
+          variant: i,
+          size: s,
+          iconOnly: r,
+          spacing: r ? void 0 : s
         }),
         l
       ),
       disabled: p || e,
-      ...S("button"),
+      ...L("button"),
       ...f,
       children: [
         e && y,
-        !e && !t && I,
-        !e && t && b,
-        !t && /* @__PURE__ */ r(j, { as: "div", variants: "action", size: x(), children: d }),
-        !e && !t && z
+        !e && !r && I,
+        !e && r && z,
+        !r && /* @__PURE__ */ n(O, { as: "div", variants: "action", size: x(), children: d }),
+        !e && !r && b
       ]
     }
   );
 }
 export {
-  A as default
+  D as default
 };

package/dist/components/CheckBox/index.js

@@ -1,62 +1,62 @@
-import { jsxs as n, jsx as e } from "react/jsx-runtime";
-import k, { useRef as I, useEffect as N } from "react";
-import { checkBoxInputContainerVariants as R, checkBoxVariants as z } from "./variants.js";
-import { Typography as p } from "../Typography/index.js";
+import { jsxs as i, jsx as e } from "react/jsx-runtime";
+import b, { useRef as k, useEffect as N } from "react";
+import { checkBoxInputContainerVariants as I, checkBoxVariants as R } from "./variants.js";
+import { Typography as d } from "../Typography/index.js";
 import "clsx";
 import "tailwind-merge";
-import { dataTestId as B } from "../../shared/utils/dataTestId.js";
-import j from "../Icon/Icon.js";
-const w = k.forwardRef(
+import { dataTestId as z } from "../../shared/utils/dataTestId.js";
+import B from "../Icon/Icon.js";
+const j = b.forwardRef(
   ({
     disabled: o,
     label: m,
     helpText: l,
     id: f,
-    checked: r,
+    checked: a,
     onChange: s,
     indeterminate: t,
     onCheckedChange: c,
     checkBoxSize: u = "medium",
     ...h
-  }, i) => {
-    const { id: x } = B("checkbox"), d = I(null);
+  }, n) => {
+    const p = k(null);
     N(() => {
-      const a = d.current || i?.current;
-      a && (a.indeterminate = !!t);
-    }, [t, i]);
-    const g = (a) => {
-      const b = a.target.checked;
-      s && s(a), c && c(b);
-    }, y = () => t ? "minus" : "check", v = () => t || r;
-    return /* @__PURE__ */ n("div", { "data-testid": x, className: "flex items-start gap-2", children: [
-      /* @__PURE__ */ n("div", { className: R({}), children: [
+      const r = p.current || n?.current;
+      r && (r.indeterminate = !!t);
+    }, [t, n]);
+    const x = (r) => {
+      const v = r.target.checked;
+      s && s(r), c && c(v);
+    }, g = () => t ? "minus" : "check", y = () => t || a;
+    return /* @__PURE__ */ i("div", { ...z("checkbox"), className: "flex items-start gap-2", children: [
+      /* @__PURE__ */ i("div", { className: I({}), children: [
         /* @__PURE__ */ e(
           "input",
           {
             ...h,
-            ref: i || d,
-            defaultChecked: r,
+            ref: n || p,
+            defaultChecked: a,
             id: f,
-            value: r ? "on" : "off",
-            checked: s || c ? r : void 0,
-            className: z({ disabled: o, indeterminate: t }),
+            value: a ? "on" : "off",
+            checked: s || c ? a : void 0,
+            className: R({ disabled: o, indeterminate: t }),
             type: "checkbox",
             disabled: o,
-            onChange: g
+            onChange: x
           }
         ),
         /* @__PURE__ */ e(
-          j,
+          B,
           {
-            className: `pointer-events-none absolute left-1/2 top-1/2 z-0 -translate-x-1/2 -translate-y-1/2 transition-opacity text-fg-checkbox ${v() ? "opacity-100" : "opacity-0"}`,
+            className: `pointer-events-none absolute left-1/2 top-1/2 z-0 -translate-x-1/2 -translate-y-1/2 transition-opacity text-fg-checkbox ${y() ? "opacity-100" : "opacity-0"}`,
             size: 16,
-            name: y()
+            name: g()
           }
         )
       ] }),
-      m && /* @__PURE__ */ n("div", { children: [
+      m && /* @__PURE__ */ i("div", { children: [
         /* @__PURE__ */ e(
-          p,
+          d,
           {
             htmlFor: f,
             as: "label",
@@ -67,7 +67,7 @@ const w = k.forwardRef(
           }
         ),
         l && /* @__PURE__ */ e(
-          p,
+          d,
           {
             variants: "paragraph",
             size: u === "medium" ? "sm" : "md",
@@ -79,7 +79,7 @@ const w = k.forwardRef(
     ] });
   }
 );
-w.displayName = "CheckBox";
+j.displayName = "CheckBox";
 export {
-  w as default
+  j as default
 };

package/dist/components/Icon/helper/index.d.ts

@@ -1 +1 @@
-export type IconName = 'activity' | 'activity-heart' | 'alarm-clock' | 'alarm-clock-check' | 'alert-circle' | 'alert-octagon' | 'alert-triangle' | 'align-left' | 'align-right' | 'bell-01' | 'calendar' | 'camera-01' | 'check' | 'check-circle' | 'chevron-down' | 'chevron-left' | 'chevron-left-double' | 'chevron-right' | 'chevron-right-double' | 'chevron-up' | 'circle' | 'download-01' | 'eye' | 'eye-off' | 'filter-funnel-01' | 'help-circle' | 'info-circle' | 'loading-01' | 'minus' | 'plus' | 'search-lg' | 'search-md' | 'user-03' | 'x-circle' | 'x-close';
+export type IconName = 'activity' | 'activity-heart' | 'alarm-clock' | 'alarm-clock-check' | 'alert-circle' | 'alert-octagon' | 'alert-triangle' | 'align-left' | 'align-right' | 'bell-01' | 'calendar' | 'camera-01' | 'check' | 'check-circle' | 'chevron-down' | 'chevron-left' | 'chevron-left-double' | 'chevron-right' | 'chevron-right-double' | 'chevron-up' | 'circle' | 'download-01' | 'eye' | 'eye-off' | 'filter-funnel-01' | 'help-circle' | 'info-circle' | 'loading-01' | 'minus' | 'plus' | 'search-lg' | 'search-md' | 'user-03' | 'x-circle' | 'x-close' | 'refresh-cw_01';

package/dist/components/InputBase/index.js

@@ -1,10 +1,10 @@
-import { jsx as i, jsxs as I } from "react/jsx-runtime";
-import m, { forwardRef as A, useState as D, useMemo as B, useEffect as H, memo as R } from "react";
-import { inputBaseVariants as _, textAreaVariants as F } from "./variants.js";
-import K from "../Icon/Icon.js";
-import { cn as p } from "../../shared/utils/cn.js";
-import { dataTestId as W } from "../../shared/utils/dataTestId.js";
-const q = (n) => {
+import { jsxs as I, jsx as u } from "react/jsx-runtime";
+import r, { forwardRef as D, useState as H, useMemo as B, useEffect as R, memo as _ } from "react";
+import { inputBaseVariants as F, textAreaVariants as K } from "./variants.js";
+import W from "../Icon/Icon.js";
+import { cn as f } from "../../shared/utils/cn.js";
+import { dataTestId as q } from "../../shared/utils/dataTestId.js";
+const A = (n) => {
   switch (n) {
     case "sm":
       return 16;
@@ -15,127 +15,134 @@ const q = (n) => {
     default:
       return 20;
   }
-}, N = A(
+}, N = D(
   ({
     disabled: n,
     readOnly: a,
-    endAdornment: d,
-    className: w,
-    color: T,
-    sizeVariant: f = "md",
-    startAdornment: y,
-    InputComponent: b,
+    endAdornment: l,
+    className: V,
+    color: w,
+    sizeVariant: v = "md",
+    startAdornment: b,
+    InputComponent: y,
     containerProps: z,
-    containerRef: C,
-    width: S,
-    iconsSize: V,
+    containerRef: T,
+    width: C,
+    iconsSize: S,
     error: j,
     clearText: M,
     optionalProps: h,
     // inputSize,
     ...e
   }, k) => {
-    const [L, v] = D(!1), g = V || q(f), c = B(
+    const [L, g] = H(!1), o = S || A(v), m = B(
       () => `inputbase-input-${Math.random().toString(36).substring(2, 9)}`,
       []
-    ), l = B(
+    ), p = B(
       () => `inputbase-textarea-${Math.random().toString(36).substring(2, 9)}`,
       []
     );
-    H(() => {
+    R(() => {
       const t = e.value;
       if (t !== void 0) {
-        v(String(t).length > 0);
+        g(String(t).length > 0);
         return;
       }
-      const s = () => {
-        const r = e.type === "textarea" ? document.getElementById(l) : document.getElementById(c);
-        if (r) {
-          const E = () => {
-            v(r.value.length > 0);
+      const i = () => {
+        const c = e.type === "textarea" ? document.getElementById(p) : document.getElementById(m);
+        if (c) {
+          const x = () => {
+            g(c.value.length > 0);
           };
-          return E(), r.addEventListener("input", E), () => {
-            r.removeEventListener("input", E);
+          return x(), c.addEventListener("input", x), () => {
+            c.removeEventListener("input", x);
           };
         }
-      }, o = s();
-      if (!o) {
-        const r = setTimeout(() => {
-          s();
+      }, d = i();
+      if (!d) {
+        const c = setTimeout(() => {
+          i();
         }, 100);
-        return () => clearTimeout(r);
+        return () => clearTimeout(c);
       }
-      return o;
-    }, [e.type, e.value, c, l]);
-    const x = M && L ? /* @__PURE__ */ i(
-      K,
+      return d;
+    }, [e.type, e.value, m, p]);
+    const E = M && L ? /* @__PURE__ */ u(
+      W,
       {
         name: "x-circle",
         variant: "solid",
-        size: g,
-        className: "cursor-pointer hover:opacity-70 transition-opacity text-fg-neutral-subtle",
+        size: o,
+        className: "cursor-pointer text-fg-neutral-subtle",
         onClick: () => {
-          v(!1);
-          const t = e.type === "textarea" ? document.getElementById(l) : document.getElementById(c);
-          if (t)
+          g(!1);
+          const t = e.type === "textarea" ? document.getElementById(p) : document.getElementById(m);
+          if (t) {
             if (t.value = "", e.onChange) {
-              const s = {
+              const i = {
                 target: t,
                 currentTarget: t,
                 type: "change",
                 bubbles: !0
               };
-              e.onChange(s);
+              e.onChange(i);
             } else {
-              const s = new Event("input", { bubbles: !0 }), o = new Event("change", { bubbles: !0 });
-              t.dispatchEvent(s), t.dispatchEvent(o);
+              const i = new Event("input", { bubbles: !0 }), d = new Event("change", { bubbles: !0 });
+              t.dispatchEvent(i), t.dispatchEvent(d);
             }
+            t?.focus();
+          }
         },
         "aria-label": "Clear text"
       }
-    ) : null, u = x && d ? /* @__PURE__ */ I("div", { className: "flex items-center gap-1", children: [
-      x,
-      d
-    ] }) : x || d, $ = {
+    ) : null, s = E && l ? /* @__PURE__ */ I("div", { className: "flex items-center gap-2", children: [
+      E,
+      r.isValidElement(l) ? r.cloneElement(
+        l,
+        {
+          size: o
+        }
+      ) : l
+    ] }) : E || l, $ = {
       sm: "h-4",
       md: "h-5",
       lg: "h-6"
     };
-    return /* @__PURE__ */ i("div", { className: "relative justify-center items-center", children: /* @__PURE__ */ I(
+    return /* @__PURE__ */ u("div", { className: "relative justify-center items-center", children: /* @__PURE__ */ I(
       "div",
       {
-        ...W("InputBase"),
-        ref: C,
+        ...q("InputBase"),
+        ref: T,
         ...z,
-        className: _({
+        className: F({
           disabled: !!n,
-          className: w,
-          color: T,
-          size: e?.type === "textarea" ? void 0 : f,
+          className: V,
+          color: w,
+          size: e?.type === "textarea" ? void 0 : v,
           readOnly: !!a,
           error: !!j
         }),
-        style: { minWidth: S ?? "100%" },
+        style: { minWidth: C ?? "100%" },
         children: [
-          y && /* @__PURE__ */ i(
+          b && /* @__PURE__ */ u(
             "div",
             {
-              className: p("flex cursor-pointer items-center justify-center", {
+              className: f("flex cursor-pointer items-center justify-center", {
                 "color-icon-disabled": n || a,
                 "cursor-pointer": !n || a
               }),
-              children: m.cloneElement(y, {
+              children: r.cloneElement(b, {
                 // color: disabled || readOnly ? 'disabled' : 'currentColor',
-                size: g
+                size: o
               })
             }
           ),
-          b ? m.cloneElement(
-            b,
+          y ? r.cloneElement(
+            y,
             {
-              id: e?.type === "textarea" ? l : void 0,
-              className: p(
-                e?.type === "textarea" ? F({
+              id: e?.type === "textarea" ? p : void 0,
+              className: f(
+                e?.type === "textarea" ? K({
                   size: h?.sizeTextArea,
                   disabled: !!n,
                   readOnly: !!a
@@ -147,13 +154,13 @@ const q = (n) => {
               ...e
             },
             null
-          ) : /* @__PURE__ */ i(
+          ) : /* @__PURE__ */ u(
             "input",
             {
-              id: e.type === "textarea" ? void 0 : c,
-              className: p(
+              id: e.type === "textarea" ? void 0 : m,
+              className: f(
                 "w-full appearance-none bg-transparent font-sans outline-none",
-                $[f || "md"]
+                $[v || "md"]
               ),
               ref: k,
               disabled: n || a,
@@ -163,20 +170,19 @@ const q = (n) => {
               }
             }
           ),
-          u && /* @__PURE__ */ i(
+          s && /* @__PURE__ */ u(
             "div",
             {
-              className: p("max-h flex items-center justify-center", {
+              className: f("max-h flex items-center justify-center", {
                 "color-icon-disabled": n || a,
                 "cursor-pointer": !n || a
               }),
-              children: m.isValidElement(u) ? m.cloneElement(
-                u,
+              children: r.isValidElement(s) && s.type === "div" ? s : r.isValidElement(s) ? r.cloneElement(
+                s,
                 {
-                  // color: disabled ? 'disabled' : 'default',
-                  size: g
+                  size: o
                 }
-              ) : u
+              ) : s
             }
           )
         ]
@@ -185,7 +191,7 @@ const q = (n) => {
   }
 );
 N.displayName = "InputBase";
-const P = R(N);
+const P = _(N);
 export {
   P as default
 };

package/dist/components/InputPassword/index.js

@@ -5,49 +5,49 @@ import I from "../TextField/HelperText.js";
 import v from "../Icon/Icon.js";
 const N = y(
   ({
-    helperText: o,
-    error: n = !1,
-    showHelperIcon: r = !0,
+    helperText: r,
+    error: a = !1,
+    showHelperIcon: n = !0,
     helperIconCustom: l,
     helperTextClassName: d,
     defaultVisible: m = !1,
-    visible: s,
+    visible: t,
     onVisibilityChange: c,
-    className: f,
-    ...t
-  }, u) => {
-    const [p, w] = g(m), i = s !== void 0 ? s : p, b = () => {
-      if (t.disabled)
+    className: u,
+    ...s
+  }, f) => {
+    const [p, w] = g(m), o = t !== void 0 ? t : p, b = () => {
+      if (s.disabled)
         return;
-      const a = !i;
-      s === void 0 && w(a), c?.(a);
+      const i = !o;
+      t === void 0 && w(i), c?.(i);
     };
     return /* @__PURE__ */ x("div", { className: "w-full [&_input[type='password']::-ms-reveal]:hidden [&_input[type='password']::-ms-clear]:hidden", children: [
       /* @__PURE__ */ e(
         h,
         {
-          ...t,
-          ref: u,
-          type: i ? "text" : "password",
-          error: n,
-          className: f,
+          ...s,
+          ref: f,
+          type: o ? "text" : "password",
+          error: a,
+          className: u,
+          clearText: !0,
           endAdornment: /* @__PURE__ */ e(
             v,
             {
-              name: i ? "eye" : "eye-off",
-              size: 24,
-              className: `transition-colors ${t.disabled ? "bg-bg-input-disabled cursor-not-allowed" : "cursor-pointer hover:text-fg-neutral-rest text-fg-neutral-rest"}`,
+              name: o ? "eye" : "eye-off",
+              className: `transition-colors ${s.disabled ? "bg-bg-input-disabled cursor-not-allowed" : "cursor-pointer hover:text-fg-neutral-rest text-fg-neutral-rest"}`,
               onClick: b
             }
           )
         }
       ),
-      o && /* @__PURE__ */ e("div", { className: "mt-1", children: /* @__PURE__ */ e(
+      r && /* @__PURE__ */ e("div", { className: "mt-1", children: /* @__PURE__ */ e(
         I,
         {
-          text: o,
-          error: n,
-          haveIcon: r,
+          text: r,
+          error: a,
+          haveIcon: n,
           iconsCustom: l,
           className: d
         }

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

@@ -1,6 +1,7 @@
 export interface LoadingProps {
     width?: string | number;
     thickness?: number;
+    className?: string;
 }
-declare const Loading: ({ width, thickness }: LoadingProps) => import("react/jsx-runtime").JSX.Element;
+declare const Loading: ({ width, thickness, className }: LoadingProps) => import("react/jsx-runtime").JSX.Element;
 export default Loading;

package/dist/components/Loading/index.js

@@ -1,22 +1,24 @@
-import { jsx as d } from "react/jsx-runtime";
+import { jsx as i } from "react/jsx-runtime";
 import "clsx";
 import "tailwind-merge";
-import { dataTestId as t } from "../../shared/utils/dataTestId.js";
-const f = ({ width: i = 80, thickness: a = 12 }) => /* @__PURE__ */ d(
+import { dataTestId as o } from "../../shared/utils/dataTestId.js";
+const s = ({ width: a = 80, thickness: r = 12, className: t }) => /* @__PURE__ */ i(
   "div",
   {
-    ...t("Loading"),
-    className: "loading-spinner",
+    ...o("Loading"),
+    className: `loading-spinner ${t ?? ""}`,
     style: {
-      width: i,
+      width: a,
       aspectRatio: "1",
       borderRadius: "50%",
-      background: `radial-gradient(farthest-side, #d4d4d8 94%, #0000) top/${a}px ${a}px no-repeat, conic-gradient(#fff 10%, #d4d4d8)`,
-      WebkitMask: `radial-gradient(farthest-side, #0000 calc(100% - ${a}px), #fff 0)`,
-      animation: "l13 1s infinite linear"
+      background: `radial-gradient(farthest-side, currentColor 94%, #0000) top/${r}px ${r}px no-repeat, conic-gradient(transparent 10%, currentColor)`,
+      WebkitMask: `radial-gradient(farthest-side, #0000 calc(100% - ${r}px), #fff 0)`,
+      animation: "l13 1s infinite linear",
+      color: "inherit"
+      // inherit color from Tailwind class
     }
   }
 );
 export {
-  f as default
+  s as default
 };