mcr-design-systems 1.0.26 → 1.0.28

package/dist/components/InputBase/index.js

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

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

@@ -34,6 +34,10 @@ export interface InputPasswordProps extends Omit<InputBaseProps, 'type' | 'start
      * Callback when visibility changes
      */
     onVisibilityChange?: (visible: boolean) => void;
+    /**
+     * Custom helper content - allows completely custom layout
+     */
+    customHelperContent?: React.ReactNode;
 }
 declare const InputPassword: React.ForwardRefExoticComponent<InputPasswordProps & React.RefAttributes<HTMLInputElement>>;
 export default InputPassword;

package/dist/components/InputPassword/index.js

@@ -1,61 +1,69 @@
-import { jsxs as x, jsx as e } from "react/jsx-runtime";
-import { forwardRef as y, useState as g } from "react";
-import h from "../InputBase/index.js";
-import I from "../TextField/HelperText.js";
-import v from "../Icon/Icon.js";
-const N = y(
+import { jsxs as v, jsx as e } from "react/jsx-runtime";
+import { forwardRef as I, useState as h } from "react";
+import N from "../InputBase/index.js";
+import c from "../TextField/HelperText.js";
+import V from "../Icon/Icon.js";
+const P = I(
   ({
-    helperText: a,
-    error: i = !1,
-    showHelperIcon: r = !0,
-    helperIconCustom: l,
-    helperTextClassName: d,
-    defaultVisible: m = !1,
+    helperText: i,
+    error: n = !1,
+    showHelperIcon: m = !0,
+    helperIconCustom: u,
+    helperTextClassName: r,
+    defaultVisible: f = !1,
     visible: t,
-    onVisibilityChange: c,
-    className: u,
-    ...s
-  }, f) => {
-    const [p, b] = g(m), o = t !== void 0 ? t : p, w = () => {
-      if (s.disabled)
+    onVisibilityChange: p,
+    customHelperContent: s,
+    className: b,
+    ...a
+  }, w) => {
+    const [g, x] = h(f), o = t !== void 0 ? t : g, y = (l) => {
+      if (l.preventDefault(), l.stopPropagation(), a.disabled)
         return;
-      const n = !o;
-      t === void 0 && b(n), c?.(n);
+      const d = !o;
+      t === void 0 && x(d), p?.(d);
     };
-    return /* @__PURE__ */ x("div", { className: "w-full [&_input[type='password']::-ms-reveal]:hidden [&_input[type='password']::-ms-clear]:hidden", children: [
+    return /* @__PURE__ */ v("div", { className: "w-full [&_input[type='password']::-ms-reveal]:hidden [&_input[type='password']::-ms-clear]:hidden", children: [
       /* @__PURE__ */ e(
-        h,
+        N,
         {
-          ...s,
-          ref: f,
+          ...a,
+          ref: w,
           type: o ? "text" : "password",
-          error: i,
-          className: u,
+          error: n,
+          className: b,
           clearText: !0,
           endAdornment: /* @__PURE__ */ e(
-            v,
+            V,
             {
               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-subtle"}`,
-              onClick: w
+              className: `transition-colors ${a.disabled ? "bg-bg-input-disabled cursor-not-allowed" : "cursor-pointer hover:text-fg-neutral-rest text-fg-neutral-subtle"}`,
+              onClick: y
             }
           )
         }
       ),
-      a && /* @__PURE__ */ e("div", { className: "mt-1", children: /* @__PURE__ */ e(
-        I,
+      s && /* @__PURE__ */ e(
+        c,
         {
-          text: a,
-          error: i,
-          haveIcon: r,
-          iconsCustom: l,
-          className: d
+          customContent: s,
+          className: r
+        }
+      ),
+      !s && i && /* @__PURE__ */ e("div", { className: "mt-1", children: /* @__PURE__ */ e(
+        c,
+        {
+          text: i,
+          error: n,
+          haveIcon: m,
+          iconsCustom: u,
+          className: r
         }
       ) })
     ] });
   }
 );
-N.displayName = "InputPassword";
+P.displayName = "InputPassword";
 export {
-  N as default
+  P as default
 };

package/dist/components/TextField/HelperText.d.ts

@@ -1,4 +1,9 @@
 import { default as React } from 'react';
+export interface RequirementItem {
+    id: string;
+    text: string;
+    isValid: boolean;
+}
 export interface HelpTextProps {
     text?: string;
     error?: boolean;
@@ -6,6 +11,18 @@ export interface HelpTextProps {
     iconsCustom?: React.ReactNode;
     className?: string;
     iconsSize?: number;
+    /**
+     * Custom content mode - allows rendering custom layout
+     */
+    customContent?: React.ReactNode;
+    /**
+     * Requirements list mode - can be used for any type of validation requirements
+     */
+    requirementsList?: {
+        items: RequirementItem[];
+        title?: string;
+        showTitle?: boolean;
+    };
 }
 declare const HelpText: React.FC<HelpTextProps>;
 export default HelpText;

package/dist/components/TextField/HelperText.js

@@ -1,50 +1,100 @@
-import { jsx as e, jsxs as f } from "react/jsx-runtime";
+import { jsx as e, jsxs as i } from "react/jsx-runtime";
 import "react";
 import { Typography as c } from "../Typography/index.js";
-import s from "../Icon/Icon.js";
-const x = ({
-  text: l,
-  error: a = !1,
-  haveIcon: i = !0,
-  iconsCustom: r,
-  className: n,
-  iconsSize: t = 16
-}) => l ? /* @__PURE__ */ e(
-  "div",
-  {
-    className: `self-stretch inline-flex flex-col justify-start items-start ${n || ""}`,
-    children: /* @__PURE__ */ f("div", { className: "self-stretch inline-flex justify-start items-start gap-1", children: [
-      a && (r || /* @__PURE__ */ e(
-        s,
+import n from "../Icon/Icon.js";
+import u from "clsx";
+const j = ({
+  text: f,
+  error: l = !1,
+  haveIcon: d = !0,
+  iconsCustom: m,
+  className: r,
+  iconsSize: t = 16,
+  customContent: o,
+  requirementsList: a
+}) => {
+  if (o)
+    return /* @__PURE__ */ e(
+      "div",
+      {
+        className: `self-stretch inline-flex flex-col justify-start items-start ${r || ""}`,
+        children: o
+      }
+    );
+  if (a) {
+    const { items: x } = a, h = a.showTitle !== !1, p = a.title || "Requirements:";
+    return /* @__PURE__ */ i("div", { className: `mt-1 space-y-1 ${r || ""}`, children: [
+      h && /* @__PURE__ */ i("div", { className: "self-stretch inline-flex justify-start items-start gap-1", children: [
+        /* @__PURE__ */ e(
+          n,
+          {
+            name: "alert-octagon",
+            className: "text-fg-accent-error",
+            variant: "solid",
+            size: typeof t == "number" ? t : 16
+          }
+        ),
+        /* @__PURE__ */ e(
+          c,
+          {
+            variants: "body",
+            size: "sm",
+            color: "fg-accent-error",
+            className: "font-medium",
+            children: p
+          }
+        )
+      ] }),
+      /* @__PURE__ */ e("ul", { className: "list-disc ml-9", children: x.map((s) => /* @__PURE__ */ e(
+        "li",
         {
-          name: "alert-octagon",
-          className: "text-fg-accent-error",
-          variant: "solid",
-          size: typeof t == "number" ? t : 16
-        }
-      )),
-      i && !a && /* @__PURE__ */ e(
-        s,
-        {
-          name: "help-circle",
-          variant: "line",
-          className: "text-fg-neutral-subtle",
-          size: typeof t == "number" ? t : 16
-        }
-      ),
-      /* @__PURE__ */ e("div", { className: "flex-1 justify-start text-left flex flex-wrap items-center gap-0", children: /* @__PURE__ */ e(
-        c,
-        {
-          variants: "body",
-          size: "sm",
-          color: a ? "fg-accent-error" : "fg-neutral-subtle",
-          className: "inline",
-          children: l
-        }
-      ) })
-    ] })
+          className: u("", {
+            "marker:text-fg-accent-success text-fg-accent-success": s.isValid,
+            "marker:text-fg-accent-error text-fg-accent-error": !s.isValid
+          }),
+          children: /* @__PURE__ */ e(c, { variants: "body", size: "sm", className: "text-inherit", children: s.text })
+        },
+        s.id
+      )) })
+    ] });
   }
-) : null;
+  return f ? /* @__PURE__ */ e(
+    "div",
+    {
+      className: `self-stretch inline-flex flex-col justify-start items-start ${r || ""}`,
+      children: /* @__PURE__ */ i("div", { className: "self-stretch inline-flex justify-start items-start gap-1", children: [
+        l && (m || /* @__PURE__ */ e(
+          n,
+          {
+            name: "alert-octagon",
+            className: "text-fg-accent-error",
+            variant: "solid",
+            size: typeof t == "number" ? t : 16
+          }
+        )),
+        d && !l && /* @__PURE__ */ e(
+          n,
+          {
+            name: "help-circle",
+            variant: "line",
+            className: "text-fg-neutral-subtle",
+            size: typeof t == "number" ? t : 16
+          }
+        ),
+        /* @__PURE__ */ e("div", { className: "flex-1 justify-start text-left flex flex-wrap items-center gap-0", children: /* @__PURE__ */ e(
+          c,
+          {
+            variants: "body",
+            size: "sm",
+            color: l ? "fg-accent-error" : "fg-neutral-subtle",
+            className: "inline",
+            children: f
+          }
+        ) })
+      ] })
+    }
+  ) : null;
+};
 export {
-  x as default
+  j as default
 };

package/package.json

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