mcr-design-systems 1.0.5 → 1.0.7

package/dist/components/Button/helper/index.js

@@ -64,14 +64,14 @@ const r = e({
       "x-small": ["h-6", "text-xs", "rounded-sm"],
       small: ["h-8", "text-sm", "rounded-md"],
       medium: ["h-10", "text-sm", "rounded-lg"],
-      large: ["h-12", "text-base", "rounded-xl"]
+      large: ["h-12", "text-base", "rounded-lg"]
     },
     spacing: {
-      "xx-small": ["px-xs-2", "gap-xs-4"],
-      "x-small": ["px-xs", "gap-xs-3"],
-      small: ["px-sm-2", "gap-xs-3"],
-      medium: ["px-sm", "gap-xs-3"],
-      large: ["px-md", "gap-xs-3"]
+      "xx-small": ["px-xs-3", "gap-xs-4"],
+      "x-small": ["px-xs-2", "gap-xs-3"],
+      small: ["px-xs", "gap-xs-3"],
+      medium: ["px-sm-2", "gap-xs-3"],
+      large: ["px-sm", "gap-xs-3"]
     },
     iconOnly: {
       true: "px-0 gap-0",

package/dist/components/Button/index.js

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

package/dist/components/Modal/helper/variants.d.ts

@@ -28,7 +28,6 @@ export declare const modal: import('tailwind-variants').TVReturnType<{
     header: string[];
     titleContainer: string[];
     title: string[];
-    subtitle: string[];
     closeButton: string[];
     body: string[];
     footer: string[];
@@ -64,7 +63,6 @@ export declare const modal: import('tailwind-variants').TVReturnType<{
     header: string[];
     titleContainer: string[];
     title: string[];
-    subtitle: string[];
     closeButton: string[];
     body: string[];
     footer: string[];
@@ -100,7 +98,6 @@ export declare const modal: import('tailwind-variants').TVReturnType<{
     header: string[];
     titleContainer: string[];
     title: string[];
-    subtitle: string[];
     closeButton: string[];
     body: string[];
     footer: string[];

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

@@ -0,0 +1,62 @@
+import { tv as e } from "../../../node_modules/tailwind-variants/dist/index.js";
+const l = e({
+  slots: {
+    overlay: [
+      "fixed inset-0 z-modal flex items-center justify-center",
+      "bg-bg-surface-level-4 "
+    ],
+    content: [
+      "relative flex flex-col max-h-[90vh] w-full max-w-full",
+      "bg-bg-dialog shadow-300 rounded-lg border border-dialog",
+      "focus:outline-none"
+    ],
+    header: [
+      "flex items-center justify-between gap-xs px-sm py-sm-2 border-b border-neutral",
+      "shrink-0 h-[64px]"
+    ],
+    titleContainer: ["flex flex-col gap-1 flex-1 min-w-0"],
+    title: ["text-lg font-semibold text-fg-neutral-main leading-tight"],
+    closeButton: ["shrink-0"],
+    body: ["flex-1 overflow-y-auto relative p-4", "scroll-bar"],
+    footer: ["shrink-0 border-t border-neutral px-sm py-sm-2 h-[64px]"],
+    actionsContainer: ["flex items-center justify-end gap-2"],
+    loadingContainer: [
+      "flex flex-col items-center justify-center gap-3 py-8 bg-black/20 absolute w-full h-full z-100 left-0 top-0"
+    ]
+  },
+  variants: {
+    size: {
+      "xx-small": {
+        content: "w-[360px]"
+      },
+      "x-small": {
+        content: "w-[456px]"
+      },
+      small: {
+        content: "w-[552px]"
+      },
+      medium: {
+        content: "w-[744px]"
+      },
+      large: {
+        content: "w-[936px]"
+      }
+    },
+    variant: {
+      default: {},
+      body: {
+        overlay: [
+          "absolute inset-0 bg-black/20 backdrop-blur-none",
+          "flex items-center justify-center"
+        ]
+      }
+    }
+  },
+  defaultVariants: {
+    size: "medium",
+    variant: "default"
+  }
+});
+export {
+  l as modal
+};

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

@@ -78,6 +78,7 @@ export interface ModalProps extends React.HTMLAttributes<HTMLDivElement>, Varian
      */
     footerClassName?: string;
     isProcessing?: boolean;
+    footer?: React.ReactNode;
 }
 /**
  * Modal component for displaying temporary information, forms, or confirmations
@@ -107,4 +108,4 @@ export interface ModalProps extends React.HTMLAttributes<HTMLDivElement>, Varian
  * </Modal>
  * ```
  */
-export default function Modal({ open, onClose, title, subtitle, children, actions, loading, submitting, closable, closeOnBackdropClick, closeOnEscape, size, className, contentClassName, bodyClassName, footerClassName, isProcessing, ...props }: ModalProps): import("react/jsx-runtime").JSX.Element | null;
+export default function Modal({ open, onClose, title, subtitle, children, actions, loading, submitting, closable, closeOnBackdropClick, closeOnEscape, size, className, contentClassName, bodyClassName, footerClassName, isProcessing, footer, ...props }: ModalProps): import("react/jsx-runtime").JSX.Element | null;

package/dist/components/Modal/index.js

@@ -0,0 +1,152 @@
+import { jsx as e, jsxs as n } from "react/jsx-runtime";
+import { useRef as s, useEffect as m } from "react";
+import { modal as J } from "./helper/variants.js";
+import { cn as a } from "../../shared/utils/cn.js";
+import { dataTestId as K } from "../../shared/utils/dataTestId.js";
+import f from "../Button/index.js";
+import k from "../Loading/index.js";
+import { Typography as O } from "../Typography/index.js";
+function $({
+  open: i,
+  onClose: d,
+  title: C,
+  subtitle: N,
+  children: w,
+  actions: r,
+  loading: t = !1,
+  submitting: u = !1,
+  closable: x = !0,
+  closeOnBackdropClick: B = !0,
+  closeOnEscape: h = !0,
+  size: g = "medium",
+  className: E,
+  contentClassName: R,
+  bodyClassName: j,
+  footerClassName: v,
+  isProcessing: o,
+  footer: y,
+  ...L
+}) {
+  const b = s(null), T = s(null), c = s(null), {
+    overlay: z,
+    content: D,
+    header: S,
+    titleContainer: I,
+    title: M,
+    closeButton: V,
+    body: q,
+    footer: p,
+    actionsContainer: A,
+    loadingContainer: F
+  } = J();
+  m(() => {
+    if (!i || !h) return;
+    const l = (H) => {
+      H.key === "Escape" && d();
+    };
+    return document.addEventListener("keydown", l), () => document.removeEventListener("keydown", l);
+  }, [i, h, d]), m(() => {
+    if (!i) return;
+    const l = window.getComputedStyle(document.body).overflow;
+    return document.body.style.overflow = "hidden", () => {
+      document.body.style.overflow = l;
+    };
+  }, [i]), m(() => {
+    t && i && c.current?.scrollTo({ top: 0, behavior: "instant" });
+  }, [t, i, c]);
+  const G = (l) => {
+    B && l.target === b.current && !u && d();
+  };
+  return i ? /* @__PURE__ */ e(
+    "div",
+    {
+      ref: b,
+      className: a(z(), E),
+      onClick: G,
+      ...K("modal"),
+      ...L,
+      children: /* @__PURE__ */ n(
+        "div",
+        {
+          ref: T,
+          className: a(D({ size: g }), R),
+          role: "dialog",
+          "aria-modal": "true",
+          "aria-labelledby": "modal-title",
+          "aria-describedby": N ? "modal-subtitle" : void 0,
+          children: [
+            /* @__PURE__ */ n("div", { className: S(), children: [
+              /* @__PURE__ */ e("div", { className: I(), children: /* @__PURE__ */ e(
+                O,
+                {
+                  id: "modal-title",
+                  variants: "heading-xs",
+                  size: "xs",
+                  className: M(),
+                  children: C
+                }
+              ) }),
+              x && /* @__PURE__ */ e(
+                f,
+                {
+                  variant: "outline",
+                  size: "medium",
+                  iconOnly: !0,
+                  icon: "x-close",
+                  onClick: d,
+                  disabled: u,
+                  className: V(),
+                  "aria-label": "Close modal"
+                }
+              )
+            ] }),
+            /* @__PURE__ */ n(
+              "div",
+              {
+                ref: c,
+                className: a(q(), j, {
+                  "overflow-hidden": t
+                }),
+                children: [
+                  t && /* @__PURE__ */ e("div", { className: F(), children: /* @__PURE__ */ e("div", { className: "w-[44px] h-[44px] p-sm-2 bg-neutral-700 rounded-lg flex items-center justify-center", children: /* @__PURE__ */ e(k, { width: 20, thickness: 3 }) }) }),
+                  w
+                ]
+              }
+            ),
+            r && /* @__PURE__ */ e("div", { className: a(p(), v), children: /* @__PURE__ */ e("div", { className: A(), children: /* @__PURE__ */ n("div", { className: "flex gap-3", children: [
+              /* @__PURE__ */ e(
+                f,
+                {
+                  disabled: r.cancelBtn?.isDisabled || o,
+                  variant: "outline",
+                  onClick: (l) => {
+                    l.stopPropagation(), r.cancelBtn?.onClick?.();
+                  },
+                  children: r.cancelBtn?.label || "Cancel"
+                }
+              ),
+              /* @__PURE__ */ n(
+                f,
+                {
+                  disabled: r.confirmBtn?.isDisabled || o || t,
+                  variant: r?.confirmBtn?.isConfirm ? "danger" : "primary",
+                  onClick: (l) => {
+                    l.stopPropagation(), r.confirmBtn?.onClick?.();
+                  },
+                  children: [
+                    r.confirmBtn?.label || "Confirm",
+                    o && /* @__PURE__ */ e(k, { width: 16, thickness: 2 })
+                  ]
+                }
+              )
+            ] }) }) }),
+            y && /* @__PURE__ */ e("div", { className: a(p(), v), children: y })
+          ]
+        }
+      )
+    }
+  ) : null;
+}
+export {
+  $ as default
+};

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

@@ -180,7 +180,7 @@ export declare const typographyVariants: import('tailwind-variants').TVReturnTyp
         'fg-selected-bold-rest': string;
         'fg-focus-ring': string;
     };
-}, undefined, undefined, {
+}, undefined, "font-primary", {
     variants: {
         display: string;
         'heading-xs': string;
@@ -544,4 +544,4 @@ export declare const typographyVariants: import('tailwind-variants').TVReturnTyp
         'fg-selected-bold-rest': string;
         'fg-focus-ring': string;
     };
-}, undefined, undefined, unknown, unknown, undefined>>;
+}, undefined, "font-primary", unknown, unknown, undefined>>;

package/dist/components/Typography/variants.js

@@ -1,15 +1,16 @@
 import { tv as e } from "../../node_modules/tailwind-variants/dist/index.js";
 const s = e(
   {
+    base: "font-primary",
     variants: {
       variants: {
-        display: "font-semibold",
-        "heading-xs": "font-bold",
-        "heading-sm": "font-bold",
-        "heading-md": "font-bold",
-        "heading-lg": "font-bold",
-        "heading-xl": "font-bold",
-        "heading-2xl": "font-bold",
+        display: "font-bold",
+        "heading-xs": "",
+        "heading-sm": "",
+        "heading-md": "",
+        "heading-lg": "",
+        "heading-xl": "",
+        "heading-2xl": "",
         label: "font-medium",
         paragraph: "font-regular",
         body: "font-regular",
@@ -300,32 +301,32 @@ const s = e(
       {
         variants: "heading-xs",
         size: "xs",
-        className: "text-heading-xs font-heading-xs leading-heading-xs"
+        className: "text-heading-xs font-heading-xs leading-heading-xs font-semibold"
       },
       {
         variants: "heading-sm",
         size: "sm",
-        className: "text-heading-sm font-heading-sm leading-heading-sm"
+        className: "text-heading-sm font-heading-sm leading-heading-sm font-semibold"
       },
       {
         variants: "heading-md",
         size: "md",
-        className: "text-heading-md font-heading-md leading-heading-md"
+        className: "text-heading-md font-heading-md leading-heading-md font-semibold"
       },
       {
         variants: "heading-lg",
         size: "lg",
-        className: "text-heading-lg font-heading-lg leading-heading-lg"
+        className: "text-heading-lg font-heading-lg leading-heading-lg font-bold"
       },
       {
         variants: "heading-xl",
         size: "xl",
-        className: "text-heading-xl font-heading-xl leading-heading-xl"
+        className: "text-heading-xl font-heading-xl leading-heading-xl font-bold"
       },
       {
         variants: "heading-2xl",
         size: "2xl",
-        className: "text-heading-2xl font-heading-2xl leading-heading-2xl"
+        className: "text-heading-2xl font-heading-2xl leading-heading-2xl font-bold"
       },
       // Display variants
       {

package/dist/index.d.ts

@@ -65,5 +65,7 @@ export { default as ProgressBar } from './components/ProgressBar';
 export type { ProgressBarProps, ProgressBarValue, } from './components/ProgressBar';
 export { default as Breadcrumb } from './components/Breadcrumb';
 export type { BreadcrumbProps, BreadcrumbItem, BreadcrumbSeparator, } from './components/Breadcrumb';
+export { default as Modal } from './components/Modal';
+export type { ModalProps } from './components/Modal';
 export * from './tokens';
 export { dataTestId, generateTestId } from './shared/utils';

package/dist/index.js

@@ -34,18 +34,19 @@ import { default as Io } from "./components/Icon/Icon.js";
 import { PIN as wo } from "./components/PIN/index.js";
 import { ProgressBar as Do } from "./components/ProgressBar/index.js";
 import { Breadcrumb as bo } from "./components/Breadcrumb/index.js";
-import { getColorVar as yo, getSemanticColorVar as Ao, getSpacingVar as Go } from "./tokens/index.js";
+import { default as yo } from "./components/Modal/index.js";
+import { getColorVar as Go, getSemanticColorVar as Ro, getSpacingVar as Vo } from "./tokens/index.js";
 import "clsx";
 import "tailwind-merge";
-import { dataTestId as Vo, generateTestId as Mo } from "./shared/utils/dataTestId.js";
-import { alphaColors as zo, baseColors as Fo, colorScales as Ho, ringColors as Lo } from "./tokens/primitives/colors.js";
-import { typography as Yo } from "./tokens/primitives/typography.js";
-import { borderRadius as qo, shadows as Eo, spacing as Jo, transitions as Ko, zIndex as Oo } from "./tokens/primitives/layout.js";
-import { ThemeProvider as Wo } from "./tokens/theme.js";
-import { useTheme as Zo } from "./tokens/hooks.js";
-import { themeUtils as $o } from "./tokens/utils.js";
-import { generateTailwindConfig as rr } from "./tokens/tailwind-config.js";
-import { semanticTokens as tr } from "./tokens/semantic.js";
+import { dataTestId as No, generateTestId as zo } from "./shared/utils/dataTestId.js";
+import { alphaColors as Ho, baseColors as Lo, colorScales as Uo, ringColors as Yo } from "./tokens/primitives/colors.js";
+import { typography as qo } from "./tokens/primitives/typography.js";
+import { borderRadius as Jo, shadows as Ko, spacing as Oo, transitions as Qo, zIndex as Wo } from "./tokens/primitives/layout.js";
+import { ThemeProvider as Zo } from "./tokens/theme.js";
+import { useTheme as $o } from "./tokens/hooks.js";
+import { themeUtils as rr } from "./tokens/utils.js";
+import { generateTailwindConfig as tr } from "./tokens/tailwind-config.js";
+import { semanticTokens as pr } from "./tokens/semantic.js";
 export {
   a as Alert,
   d as Avatar,
@@ -67,6 +68,7 @@ export {
   To as InputPassword,
   u as Loading,
   S as MenuItem,
+  yo as Modal,
   fo as MonthGrid,
   wo as PIN,
   H as PhoneInput,
@@ -78,7 +80,7 @@ export {
   Q as Sidebar,
   K as Switch,
   X as Tabs,
-  Wo as ThemeProvider,
+  Zo as ThemeProvider,
   V as Toast,
   M as ToastAction,
   N as ToastClose,
@@ -89,24 +91,24 @@ export {
   ho as TopNavigationBar,
   k as Typography,
   so as YearGrid,
-  zo as alphaColors,
-  Fo as baseColors,
-  qo as borderRadius,
-  Ho as colorScales,
-  Vo as dataTestId,
-  rr as generateTailwindConfig,
-  Mo as generateTestId,
-  yo as getColorVar,
-  Ao as getSemanticColorVar,
-  Go as getSpacingVar,
-  Lo as ringColors,
-  tr as semanticTokens,
-  Eo as shadows,
-  Jo as spacing,
-  $o as themeUtils,
-  Ko as transitions,
-  Yo as typography,
-  Zo as useTheme,
+  Ho as alphaColors,
+  Lo as baseColors,
+  Jo as borderRadius,
+  Uo as colorScales,
+  No as dataTestId,
+  tr as generateTailwindConfig,
+  zo as generateTestId,
+  Go as getColorVar,
+  Ro as getSemanticColorVar,
+  Vo as getSpacingVar,
+  Yo as ringColors,
+  pr as semanticTokens,
+  Ko as shadows,
+  Oo as spacing,
+  rr as themeUtils,
+  Qo as transitions,
+  qo as typography,
+  $o as useTheme,
   j as useToast,
-  Oo as zIndex
+  Wo as zIndex
 };

package/dist/tailwind.config.js

@@ -1,5 +1,5 @@
 import { generateTailwindConfig as i } from "./tokens/tailwind-config.js";
-const o = i();
+const o = i({});
 export {
   o as default
 };

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

@@ -1,5 +1,9 @@
-export declare const generateTailwindConfig: ({ brand, }: {
+export declare const generateTailwindConfig: ({ brand, font, }: {
     brand: Record<string | number, string>;
+    font?: {
+        primary: string[];
+        secondary: string[];
+    };
 }) => {
     content: string[];
     darkMode: string[];
@@ -105,6 +109,9 @@ export declare const generateTailwindConfig: ({ brand, }: {
             fontFamily: {
                 readonly primary: readonly ["\"Open Sans\"", "sans-serif"];
                 readonly secondary: readonly ["\"Open Sans\"", "sans-serif"];
+            } | {
+                primary: string[];
+                secondary: string[];
             };
             colors: {
                 brand: Record<string | number, string>;

package/dist/tokens/tailwind-config.js

@@ -47,7 +47,8 @@ const i = /* @__PURE__ */ new Map(), u = () => ({
   "3xl": "1536px"
   // 3x Extra large devices
 }), j = ({
-  brand: o
+  brand: o,
+  font: e
 }) => ({
   content: [
     "./index.html",
@@ -68,7 +69,7 @@ const i = /* @__PURE__ */ new Map(), u = () => ({
       fontSize: t.fontSizes,
       lineHeight: t.lineHeights,
       letterSpacing: t.letterSpacing,
-      fontFamily: t.fontFamilies,
+      fontFamily: e || t.fontFamilies,
       // Colors (optimized with caching)
       colors: {
         ...u(),

package/package.json

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