mcr-design-systems 1.0.7 → 1.0.9

package/dist/components/Button/index.js

@@ -1,6 +1,6 @@
-import { jsxs as T, jsx as r } from "react/jsx-runtime";
+import { jsxs as v, jsx as r } from "react/jsx-runtime";
 import "react";
-import { button as v } from "./helper/index.js";
+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 a from "../Icon/Icon.js";
@@ -56,11 +56,11 @@ function A({
       "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__ */ T(
+  return /* @__PURE__ */ v(
     "button",
     {
       className: O(
-        v({
+        T({
           variant: o,
           size: n,
           iconOnly: t,
@@ -75,7 +75,7 @@ function A({
         e && y,
         !e && !t && I,
         !e && t && b,
-        !t && /* @__PURE__ */ r(j, { variants: "action", size: x(), children: d }),
+        !t && /* @__PURE__ */ r(j, { as: "div", variants: "action", size: x(), children: d }),
         !e && !t && z
       ]
     }

package/dist/components/Chip/index.js

@@ -1,23 +1,23 @@
-import { jsx as r, jsxs as j } from "react/jsx-runtime";
+import { jsx as l, jsxs as v } from "react/jsx-runtime";
 import h, { useCallback as f } from "react";
-import { cn as v } from "../../shared/utils/cn.js";
+import { cn as S } from "../../shared/utils/cn.js";
 import { dataTestId as V } from "../../shared/utils/dataTestId.js";
 import { Typography as _ } from "../Typography/index.js";
-import p from "../Icon/Icon.js";
+import c from "../Icon/Icon.js";
 import { chipIconVariants as x, chipVariants as I } from "./helper/variants.js";
-const b = h.memo(({ icon: o, size: t, position: m }) => {
-  const { name: n, node: c, "aria-label": e } = o;
-  return /* @__PURE__ */ r(
+const b = h.memo(({ icon: i, size: r, position: e }) => {
+  const { name: n, node: p, "aria-label": m } = i;
+  return /* @__PURE__ */ l(
     "span",
     {
-      className: x({ size: t, position: m }),
-      "aria-label": e,
-      role: e ? "img" : void 0,
-      children: c || n && /* @__PURE__ */ r(
-        p,
+      className: x({ size: r, position: e }),
+      "aria-label": m,
+      role: m ? "img" : void 0,
+      children: p || n && /* @__PURE__ */ l(
+        c,
         {
           name: n,
-          size: t === "x-small" ? 12 : t === "small" || t === "medium" ? 16 : 24
+          size: r === "x-small" ? 12 : r === "small" || r === "medium" ? 16 : 24
         }
       )
     }
@@ -26,91 +26,91 @@ const b = h.memo(({ icon: o, size: t, position: m }) => {
 b.displayName = "ChipIcon";
 const L = h.forwardRef(
   ({
-    children: o,
-    leadingIcon: t,
-    trailingIcon: m,
+    children: i,
+    leadingIcon: r,
+    trailingIcon: e,
     variant: n = "warning",
-    selected: c = !0,
-    state: e = "default",
+    selected: p = !0,
+    state: m = "default",
     size: a = "large",
     className: C,
     disabled: s = !1,
     onClick: d,
-    onRemove: l,
+    onRemove: t,
     dataTestIdName: N = "chip",
-    ...g
-  }, w) => {
-    const y = f(
-      (i) => {
-        !s && e !== "disabled" && d?.(i);
+    ...w
+  }, y) => {
+    const g = f(
+      (o) => {
+        !s && m !== "disabled" && d?.(o);
       },
-      [s, e, d]
-    ), T = f(
-      (i) => {
-        i.stopPropagation(), !s && e !== "disabled" && l?.();
+      [s, m, d]
+    ), k = f(
+      (o) => {
+        o.stopPropagation(), !s && m !== "disabled" && t?.();
       },
-      [s, e, l]
-    ), u = s ? "disabled" : e, { id: k } = V(N), S = v(
+      [s, m, t]
+    ), u = s ? "disabled" : m, T = S(
       I({
         size: a,
         variant: n,
         state: u,
-        selected: c,
+        selected: p,
         className: C
       })
-    );
-    return /* @__PURE__ */ j(
+    ), j = (o) => {
+      switch (o) {
+        case "x-small":
+          return "xs";
+        case "small":
+          return "sm";
+        case "medium":
+          return "sm";
+        case "large":
+          return "md";
+        default:
+          return "md";
+      }
+    };
+    return /* @__PURE__ */ v(
       "button",
       {
-        ref: w,
+        ref: y,
         type: "button",
-        className: S,
+        className: T,
         disabled: s || u === "disabled",
-        onClick: y,
-        "data-testid": k,
-        "aria-pressed": c,
-        ...g,
+        onClick: g,
+        ...V(N),
+        "aria-pressed": p,
+        ...w,
         children: [
-          t && /* @__PURE__ */ r(b, { icon: t, size: a, position: "leading" }),
-          o && /* @__PURE__ */ r(
+          r && /* @__PURE__ */ l(b, { icon: r, size: a, position: "leading" }),
+          i && /* @__PURE__ */ l(
             _,
             {
               variants: "action-emphasize",
-              size: ((i) => {
-                switch (i) {
-                  case "x-small":
-                    return "xs";
-                  case "small":
-                    return "sm";
-                  case "medium":
-                    return "sm";
-                  case "large":
-                    return "md";
-                  default:
-                    return "md";
-                }
-              })(a),
+              size: j(a),
               as: "span",
               className: "font-medium whitespace-nowrap",
-              children: o
+              children: i
             }
           ),
-          m && /* @__PURE__ */ r(
+          e && /* @__PURE__ */ l(
             "span",
             {
               className: x({ size: a, position: "trailing" }),
-              onClick: l ? T : void 0,
-              role: l ? "button" : void 0,
-              tabIndex: l ? 0 : void 0,
-              "aria-label": m["aria-label"] || "Remove",
-              children: m.node || m.name && /* @__PURE__ */ r(
-                p,
+              onClick: t ? k : void 0,
+              role: t ? "button" : void 0,
+              tabIndex: t ? 0 : void 0,
+              "aria-label": e["aria-label"] || "Remove",
+              children: e.node || e.name && /* @__PURE__ */ l(
+                c,
                 {
-                  name: m.name,
+                  name: e.name,
                   size: a === "x-small" ? 12 : a === "small" || a === "medium" ? 16 : 24
                 }
-              ) || l && /* @__PURE__ */ r(
-                p,
+              ) || t && /* @__PURE__ */ l(
+                c,
                 {
                   name: "x-close",
                   size: a === "x-small" ? 12 : a === "small" || a === "medium" ? 16 : 24

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

@@ -3,6 +3,7 @@ import { IconProps } from '../Icon';
 export interface InputBaseProps extends React.InputHTMLAttributes<HTMLInputElement> {
     disabled?: boolean;
     readOnly?: boolean;
+    sizeVariant?: 'sm' | 'md' | 'lg';
     endAdornment?: React.ReactElement<IconProps>;
     color?: 'primary' | 'error';
     startAdornment?: React.ReactElement<IconProps>;
@@ -12,6 +13,7 @@ export interface InputBaseProps extends React.InputHTMLAttributes<HTMLInputEleme
     iconsSize?: number;
     fontSize?: string;
     error?: boolean;
+    clearText?: boolean;
     optionalProps?: {
         textAreaClassName?: string;
         maxIndicatorLength?: number;

package/dist/components/InputBase/index.js

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

package/dist/components/InputBase/variants.d.ts

@@ -1,4 +1,9 @@
 export declare const inputBaseVariants: import('tailwind-variants').TVReturnType<{
+    size: {
+        sm: string;
+        md: string;
+        lg: string;
+    };
     disabled: {
         true: string;
     };
@@ -12,7 +17,12 @@ export declare const inputBaseVariants: import('tailwind-variants').TVReturnType
         primary: string;
         error: string;
     };
-}, undefined, "text-p-medium leading-p-medium flex items-center rounded-lg tracking-p-medium outline-1 focus-within:border-input-active focus-within:outline-2", {
+}, undefined, "text-fg-neutral-main placeholder:text-fg-neutral-subtlest flex items-center gap-1 rounded-lg tracking-p-medium outline-1 focus-within:border-input-active focus-within:outline-2", {
+    size: {
+        sm: string;
+        md: string;
+        lg: string;
+    };
     disabled: {
         true: string;
     };
@@ -27,6 +37,11 @@ export declare const inputBaseVariants: import('tailwind-variants').TVReturnType
         error: string;
     };
 }, undefined, import('tailwind-variants').TVReturnType<{
+    size: {
+        sm: string;
+        md: string;
+        lg: string;
+    };
     disabled: {
         true: string;
     };
@@ -40,7 +55,7 @@ export declare const inputBaseVariants: import('tailwind-variants').TVReturnType
         primary: string;
         error: string;
     };
-}, undefined, "text-p-medium leading-p-medium flex items-center rounded-lg tracking-p-medium outline-1 focus-within:border-input-active focus-within:outline-2", unknown, unknown, undefined>>;
+}, undefined, "text-fg-neutral-main placeholder:text-fg-neutral-subtlest flex items-center gap-1 rounded-lg tracking-p-medium outline-1 focus-within:border-input-active focus-within:outline-2", unknown, unknown, undefined>>;
 export declare const textAreaVariants: import('tailwind-variants').TVReturnType<{
     size: {
         sm: string;

package/dist/components/InputBase/variants.js

@@ -1,12 +1,17 @@
 import { tv as e } from "../../node_modules/tailwind-variants/dist/index.js";
 const a = e({
-  base: "text-p-medium leading-p-medium flex items-center rounded-lg tracking-p-medium outline-1 focus-within:border-input-active focus-within:outline-2",
+  base: "text-fg-neutral-main placeholder:text-fg-neutral-subtlest flex items-center gap-1 rounded-lg tracking-p-medium outline-1 focus-within:border-input-active focus-within:outline-2",
   variants: {
+    size: {
+      sm: "py-xs-2 px-xs h-lg text-base-sm",
+      md: "py-2.5 py- px-sm-2 h-xl text-base-md",
+      lg: "py-sm-2 px-sm h-xl-2 text-base-lg"
+    },
     disabled: {
-      true: "placeholder:text-fg-neutral-disabled bg-bg-surface-level-2 cursor-not-allowed text-fg-neutral-disabled outline-bg-neutral-bold-rest placeholder:bg-fg-neutral-disabled hover:outline-offset-0"
+      true: "placeholder:text-fg-neutral-disabled bg-bg-input-disabled border-input-disabled cursor-not-allowed text-fg-neutral-disabled outline-bg-neutral-bold-rest placeholder:bg-fg-neutral-disabled hover:outline-offset-0"
     },
     readOnly: {
-      true: "placeholder:color-text-disabled bg-bg-surface-level-2 cursor-not-allowed outline-bg-neutral-bold-rest placeholder:bg-fg-neutral-disabled hover:outline-offset-0"
+      true: "placeholder:color-text-disabled bg-bg-input-disabled border-input-disabled cursor-not-allowed outline-bg-neutral-bold-rest placeholder:bg-fg-neutral-disabled hover:outline-offset-0"
     },
     error: {
       true: "outline-fg-accent-error focus-within:outline-fg-accent-error"
@@ -17,9 +22,9 @@ const a = e({
     }
   },
   defaultVariants: {
+    size: "md",
     color: "primary",
     disabled: !1,
-    // size: 'md',
     readOnly: !1,
     error: !1
   },