mcr-design-systems 1.0.29 → 1.0.30

package/dist/components/Avatar/index.js

@@ -1,9 +1,9 @@
 import { jsxs as f, jsx as r } from "react/jsx-runtime";
-import { useState as i, useRef as C, useEffect as A } from "react";
-import { avatar as te, presenceBadge as re } from "./helper/variants.js";
+import { useState as o, useRef as C, useEffect as A } from "react";
+import { avatar as ee, presenceBadge as te } from "./helper/variants.js";
 import O from "../Icon/Icon.js";
 import { cn as x } from "../../shared/utils/cn.js";
-import ae from "../Loading/index.js";
+import re from "../Loading/index.js";
 const d = {
   10: "text-[4.55px]",
   12: "text-[5.45px]",
@@ -23,10 +23,10 @@ const d = {
   88: "text-[40px]",
   128: "text-[58.18px]",
   160: "text-[72.73px]"
-}, se = 2 * 1024 * 1024, P = ["image/jpeg", "image/jpg", "image/png", "image/webp"], _ = "avatar-cache-v1", fe = ({
+}, ae = 2 * 1024 * 1024, P = ["image/jpeg", "image/jpg", "image/png", "image/webp"], M = "avatar-cache-v1", me = ({
   src: s = "",
   size: c = 48,
-  shape: M = "circle",
+  shape: _ = "circle",
   showPresence: $ = !1,
   presenceStatus: B = "available",
   alt: F = "",
@@ -45,32 +45,30 @@ const d = {
   overlapPrefix: y = "",
   ...p
 }) => {
-  const [D, L] = i(!1), [R, u] = i(""), [a, l] = i(s || ""), [m, H] = i(""), [I, w] = i(!1), S = C(null), X = C(null);
-  console.log("Avatar rendered with value:", D);
-  const Y = async (e) => {
+  const [, L] = o(!1), [R, u] = o(""), [a, l] = o(s || ""), [m, D] = o(""), [I, w] = o(!1), S = C(null), H = C(null), X = async (e) => {
     try {
-      const t = await caches.open(_);
+      const t = await caches.open(M);
       if (!await t.match(e)) {
-        const o = await fetch(e, {
+        const i = await fetch(e, {
           mode: "cors",
           method: "GET",
           headers: { "Access-Control-Allow-Origin": "*" }
         });
-        if (!o.ok)
-          throw new Error(`Failed to fetch image: ${o.status}`);
-        await t.put(e, o.clone());
+        if (!i.ok)
+          throw new Error(`Failed to fetch image: ${i.status}`);
+        await t.put(e, i.clone());
       }
     } catch {
     }
   };
   x();
-  const q = async (e) => {
+  const Y = async (e) => {
     if (h) return null;
     try {
-      const n = await (await caches.open(_)).match(e);
+      const n = await (await caches.open(M)).match(e);
       if (n) {
-        const o = await n.blob();
-        return URL.createObjectURL(o);
+        const i = await n.blob();
+        return URL.createObjectURL(i);
       }
       return null;
     } catch {
@@ -79,8 +77,8 @@ const d = {
   };
   A(() => {
     let e = null;
-    return s && !h ? (Y(s), q(s).then((t) => {
-      t ? (H(t), l(t), e = t) : l(s);
+    return s && !h ? (X(s), Y(s).then((t) => {
+      t ? (D(t), l(t), e = t) : l(s);
     })) : l(s || ""), () => {
       e && URL.revokeObjectURL(e);
     };
@@ -96,13 +94,13 @@ const d = {
       a.startsWith("blob:") && URL.revokeObjectURL(a);
     };
   }, [a, m]);
-  const K = () => y || (j ? /* @__PURE__ */ r(
+  const q = () => y || (j ? /* @__PURE__ */ r(
     "span",
     {
       className: `flex h-full w-full items-center justify-center ${d[c ?? 48]}`,
       children: j
     }
-  ) : g || v ? `${g?.[0] || ""}${v?.[0] || ""}`.toUpperCase() : s ? s[0]?.toUpperCase() : ""), Q = async (e) => {
+  ) : g || v ? `${g?.[0] || ""}${v?.[0] || ""}`.toUpperCase() : s ? s[0]?.toUpperCase() : ""), K = async (e) => {
     const t = e.target.files?.[0];
     if (!t) return;
     if (!P.includes(t.type)) {
@@ -111,7 +109,7 @@ const d = {
       );
       return;
     }
-    if (t.size > se) {
+    if (t.size > ae) {
       u("Image is too large, must be no larger than 2 MB.");
       return;
     }
@@ -122,7 +120,7 @@ const d = {
     } finally {
       L(!1), n && URL.revokeObjectURL(n);
     }
-  }, U = W && (b || T) && c >= 24, V = K(), z = c && c >= 24 && c <= 64, { id: ee } = "data-testid" in p ? p : { id: "avatar" }, k = {
+  }, U = W && (b || T) && c >= 24, Q = q(), V = c && c >= 24 && c <= 64, { id: z } = "data-testid" in p ? p : { id: "avatar" }, k = {
     10: "h-[0.625rem] w-[0.625rem]",
     // 10px
     12: "h-[0.75rem] w-[0.75rem]",
@@ -160,13 +158,13 @@ const d = {
     160: "h-[10rem] w-[10rem]"
     // 160px
   };
-  return /* @__PURE__ */ f("div", { "data-testid": ee, className: "relative block w-fit", children: [
+  return /* @__PURE__ */ f("div", { "data-testid": z, className: "relative block w-fit", children: [
     /* @__PURE__ */ f("div", { className: x("w-fit overflow-hidden", k[c ?? 48]), children: [
       /* @__PURE__ */ f(
         "div",
         {
-          className: te({
-            shape: M,
+          className: ee({
+            shape: _,
             // type: previewSrc && !isImageError ? 'image' : 'initials',
             className: x(k[c ?? 48], G),
             bordered: a && !I ? !0 : J,
@@ -185,15 +183,15 @@ const d = {
               "div",
               {
                 className: `flex h-full w-full items-center justify-center ${d[c ?? 48]}`,
-                children: /* @__PURE__ */ r("div", { className: `${d[c ?? 48]} leading-none`, children: V })
+                children: /* @__PURE__ */ r("div", { className: `${d[c ?? 48]} leading-none`, children: Q })
               }
             ),
             U && !E && /* @__PURE__ */ r(
               "div",
               {
-                ref: X,
+                ref: H,
                 className: "absolute bottom-0 flex w-full cursor-pointer items-center justify-center bg-black-alpha-40",
-                style: { color: "white", height: z ? "100%" : "24px" },
+                style: { color: "white", height: V ? "100%" : "24px" },
                 onClick: () => a ? L(!0) : S.current?.click(),
                 children: /* @__PURE__ */ r(
                   O,
@@ -211,14 +209,14 @@ const d = {
                 type: "file",
                 accept: P.join(","),
                 className: "hidden",
-                onChange: Q
+                onChange: K
               }
             ),
-            E && /* @__PURE__ */ r("div", { className: "absolute inset-0 flex items-center justify-center bg-bg-white", children: /* @__PURE__ */ r(ae, { thickness: 4, width: 20 }) })
+            E && /* @__PURE__ */ r("div", { className: "absolute inset-0 flex items-center justify-center bg-bg-white", children: /* @__PURE__ */ r(re, { thickness: 4, width: 20 }) })
           ]
         }
       ),
-      $ && !U && /* @__PURE__ */ r("span", { className: re({ status: B }), children: /* @__PURE__ */ r("svg", { className: "h-2 w-2", fill: "currentColor", viewBox: "0 0 20 20", children: /* @__PURE__ */ r("circle", { cx: "10", cy: "10", r: "10" }) }) })
+      $ && !U && /* @__PURE__ */ r("span", { className: te({ status: B }), children: /* @__PURE__ */ r("svg", { className: "h-2 w-2", fill: "currentColor", viewBox: "0 0 20 20", children: /* @__PURE__ */ r("circle", { cx: "10", cy: "10", r: "10" }) }) })
     ] }),
     (R || N) && /* @__PURE__ */ f("div", { className: "mt-2 flex items-center gap-1", children: [
       /* @__PURE__ */ r(O, { name: "circle", color: "error" }),
@@ -227,5 +225,5 @@ const d = {
   ] });
 };
 export {
-  fe as default
+  me as default
 };

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

@@ -0,0 +1,106 @@
+import { tv as a } from "../../../node_modules/tailwind-variants/dist/index.js";
+const t = a({
+  base: [
+    "bg-bg-card",
+    "border border-card",
+    "rounded-2xl",
+    "overflow-hidden",
+    "w-full",
+    "inline-flex",
+    "flex-col",
+    "justify-start",
+    "items-start"
+  ],
+  variants: {
+    variant: {
+      default: ["bg-bg-card", "border-neutral"],
+      elevated: ["bg-bg-card", "border-neutral", "shadow-300"],
+      outlined: ["bg-transparent", "border-neutral"]
+    }
+  },
+  defaultVariants: {
+    variant: "default"
+  }
+}), s = a({
+  base: [
+    "self-stretch",
+    "min-h-16",
+    "px-sm",
+    "py-sm-2",
+    "border-b",
+    "border-card",
+    "flex",
+    "justify-between",
+    "items-center"
+  ],
+  variants: {
+    gap: {
+      xs: "gap-xs",
+      sm: "gap-sm",
+      md: "gap-md"
+    }
+  },
+  defaultVariants: {
+    gap: "xs"
+  }
+}), r = a({
+  base: [
+    "self-stretch",
+    "flex",
+    "flex-col",
+    "justify-start",
+    "items-start"
+  ],
+  variants: {
+    padding: {
+      none: "p-0",
+      sm: "p-sm-2",
+      md: "p-sm",
+      lg: "p-md"
+    },
+    gap: {
+      none: "",
+      sm: "gap-xs",
+      md: "gap-sm",
+      lg: "gap-md"
+    }
+  },
+  defaultVariants: {
+    padding: "md",
+    gap: "md"
+  }
+}), d = a({
+  base: [
+    "flex-1",
+    "min-h-10",
+    "flex",
+    "flex-col",
+    "justify-center",
+    "items-start",
+    "overflow-hidden"
+  ]
+}), n = a({
+  base: [
+    "flex",
+    "justify-end",
+    "items-center",
+    "flex-shrink-0"
+  ],
+  variants: {
+    gap: {
+      xs: "gap-xs",
+      sm: "gap-sm-2",
+      md: "gap-sm"
+    }
+  },
+  defaultVariants: {
+    gap: "xs"
+  }
+});
+export {
+  r as cardContentVariants,
+  n as cardHeaderActionVariants,
+  d as cardHeaderTitleVariants,
+  s as cardHeaderVariants,
+  t as cardVariants
+};

package/dist/components/Card/index.js

@@ -0,0 +1,58 @@
+import { jsxs as t, jsx as r } from "react/jsx-runtime";
+import "react";
+import { cardHeaderVariants as x, cardHeaderTitleVariants as g, cardHeaderActionVariants as u, cardContentVariants as v, cardVariants as y } from "./helper/variants.js";
+import { cn as N } from "../../shared/utils/cn.js";
+import { dataTestId as h } from "../../shared/utils/dataTestId.js";
+import { Typography as V } from "../Typography/index.js";
+function w({
+  variant: i = "default",
+  title: e,
+  actionButton: s,
+  children: d,
+  className: m,
+  showHeader: c = !0,
+  headerGap: n = "xs",
+  contentPadding: o = "md",
+  contentGap: l = "md",
+  width: a,
+  ...p
+}) {
+  const f = a ? { width: typeof a == "number" ? `${a}px` : a } : {};
+  return /* @__PURE__ */ t(
+    "div",
+    {
+      className: N(y({ variant: i }), m),
+      style: f,
+      ...h("Card"),
+      ...p,
+      children: [
+        c && (e || s) && /* @__PURE__ */ t("div", { className: x({ gap: n }), children: [
+          e && /* @__PURE__ */ r("div", { className: g(), children: /* @__PURE__ */ r(
+            V,
+            {
+              variants: "heading-xs",
+              size: "xs",
+              className: "self-stretch justify-center text-fg-neutral-main",
+              children: e
+            }
+          ) }),
+          s && /* @__PURE__ */ r("div", { className: u({ gap: "xs" }), children: s })
+        ] }),
+        d && /* @__PURE__ */ r(
+          "div",
+          {
+            className: v({
+              padding: o,
+              gap: l
+            }),
+            style: { wordWrap: "break-word", overflowWrap: "break-word" },
+            children: d
+          }
+        )
+      ]
+    }
+  );
+}
+export {
+  w as default
+};

package/dist/index.d.ts

@@ -77,5 +77,7 @@ 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 { default as Card } from './components/Card';
+export type { CardProps } from './components/Card';
 export * from './tokens';
 export { dataTestId, generateTestId } from './shared/utils';

package/dist/index.js

@@ -1,5 +1,5 @@
 import { Alert as a } from "./components/Alert/index.js";
-import { default as f } from "./components/Button/index.js";
+import { default as p } from "./components/Button/index.js";
 import { default as x } from "./components/ButtonFilter/index.js";
 import { default as d } from "./components/Avatar/index.js";
 import { default as l } from "./components/AvatarGroup/index.js";
@@ -7,7 +7,7 @@ import { default as n } from "./components/Loading/index.js";
 import { Box as c } from "./components/Box/index.js";
 import { default as P } from "./components/Divider/index.js";
 import { Popover as I } from "./components/Popover/index.js";
-import { Dropdown as C } from "./components/Dropdown/index.js";
+import { Dropdown as v } from "./components/Dropdown/index.js";
 import { default as b } from "./components/Select/index.js";
 import { MenuItem as w } from "./components/MenuItem/index.js";
 import { Typography as S } from "./components/Typography/index.js";
@@ -23,14 +23,14 @@ import { default as X } from "./components/Tab/index.js";
 import { default as _ } from "./components/Chip/index.js";
 import { Tooltip as oo, TooltipProvider as ro } from "./components/Tooltip/index.js";
 import { default as to, DatePickerHeader as ao } from "./components/DatePicker/index.js";
-import { MonthGrid as fo } from "./components/DatePicker/MonthGrid.js";
+import { MonthGrid as po } from "./components/DatePicker/MonthGrid.js";
 import { YearGrid as xo } from "./components/DatePicker/YearGrid.js";
 import { CalendarGrid as io } from "./components/DatePicker/CalendarGrid.js";
 import { DateRangePicker as uo } from "./components/DatePicker/DateRangePicker.js";
 import { default as To } from "./components/InputPassword/index.js";
 import { default as go } from "./components/InputDatePicker/index.js";
 import { default as ho } from "./components/TextField/index.js";
-import { default as vo } from "./components/InputNumber/index.js";
+import { default as Co } from "./components/InputNumber/index.js";
 import { default as Bo } from "./components/TopNavigationBar/index.js";
 import { default as ko } from "./components/InputBase/index.js";
 import { default as Do } from "./components/CheckBox/index.js";
@@ -40,45 +40,47 @@ import { PIN as Vo } from "./components/PIN/index.js";
 import { ProgressBar as No } from "./components/ProgressBar/index.js";
 import { Breadcrumb as Ho } from "./components/Breadcrumb/index.js";
 import { default as Lo } from "./components/Modal/index.js";
-import { getColorVar as Yo, getSemanticColorVar as jo, getSpacingVar as qo } from "./tokens/index.js";
+import { default as Yo } from "./components/Card/index.js";
+import { getColorVar as qo, getSemanticColorVar as Eo, getSpacingVar as Jo } from "./tokens/index.js";
 import "clsx";
 import "tailwind-merge";
-import { dataTestId as Jo, generateTestId as Ko } from "./shared/utils/dataTestId.js";
-import { alphaColors as Qo, baseColors as Wo, colorScales as Xo, ringColors as Zo } from "./tokens/primitives/colors.js";
-import { typography as $o } from "./tokens/primitives/typography.js";
-import { borderRadius as rr, shadows as er, spacing as tr, transitions as ar, zIndex as pr } from "./tokens/primitives/layout.js";
-import { ThemeProvider as mr } from "./tokens/theme.js";
-import { useTheme as sr } from "./tokens/hooks.js";
-import { themeUtils as ir } from "./tokens/utils.js";
-import { generateTailwindConfig as ur } from "./tokens/tailwind-config.js";
-import { semanticTokens as Tr } from "./tokens/semantic.js";
+import { dataTestId as Oo, generateTestId as Qo } from "./shared/utils/dataTestId.js";
+import { alphaColors as Xo, baseColors as Zo, colorScales as _o, ringColors as $o } from "./tokens/primitives/colors.js";
+import { typography as rr } from "./tokens/primitives/typography.js";
+import { borderRadius as tr, shadows as ar, spacing as fr, transitions as pr, zIndex as mr } from "./tokens/primitives/layout.js";
+import { ThemeProvider as sr } from "./tokens/theme.js";
+import { useTheme as ir } from "./tokens/hooks.js";
+import { themeUtils as ur } from "./tokens/utils.js";
+import { generateTailwindConfig as Tr } from "./tokens/tailwind-config.js";
+import { semanticTokens as gr } from "./tokens/semantic.js";
 export {
   a as Alert,
   d as Avatar,
   l as AvatarGroup,
   c as Box,
   Ho as Breadcrumb,
-  f as Button,
+  p as Button,
   x as ButtonFilter,
   io as CalendarGrid,
+  Yo as Card,
   Do as CheckBox,
   _ as Chip,
   to as DatePicker,
   ao as DatePickerHeader,
   uo as DateRangePicker,
   P as Divider,
-  C as Dropdown,
+  v as Dropdown,
   Go as HelperText,
   yo as Icons,
   A as Image,
   ko as InputBase,
   go as InputDatePicker,
-  vo as InputNumber,
+  Co as InputNumber,
   To as InputPassword,
   n as Loading,
   w as MenuItem,
   Lo as Modal,
-  fo as MonthGrid,
+  po as MonthGrid,
   Vo as PIN,
   z as PhoneInput,
   I as Popover,
@@ -90,7 +92,7 @@ export {
   K as Switch,
   X as Tabs,
   ho as TextField,
-  mr as ThemeProvider,
+  sr as ThemeProvider,
   V as Toast,
   M as ToastAction,
   N as ToastClose,
@@ -101,24 +103,24 @@ export {
   Bo as TopNavigationBar,
   S as Typography,
   xo as YearGrid,
-  Qo as alphaColors,
-  Wo as baseColors,
-  rr as borderRadius,
-  Xo as colorScales,
-  Jo as dataTestId,
-  ur as generateTailwindConfig,
-  Ko as generateTestId,
-  Yo as getColorVar,
-  jo as getSemanticColorVar,
-  qo as getSpacingVar,
-  Zo as ringColors,
-  Tr as semanticTokens,
-  er as shadows,
-  tr as spacing,
-  ir as themeUtils,
-  ar as transitions,
-  $o as typography,
-  sr as useTheme,
+  Xo as alphaColors,
+  Zo as baseColors,
+  tr as borderRadius,
+  _o as colorScales,
+  Oo as dataTestId,
+  Tr as generateTailwindConfig,
+  Qo as generateTestId,
+  qo as getColorVar,
+  Eo as getSemanticColorVar,
+  Jo as getSpacingVar,
+  $o as ringColors,
+  gr as semanticTokens,
+  ar as shadows,
+  fr as spacing,
+  ur as themeUtils,
+  pr as transitions,
+  rr as typography,
+  ir as useTheme,
   j as useToast,
-  pr as zIndex
+  mr as zIndex
 };

package/package.json

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