mcr-design-systems 1.0.0

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

@@ -0,0 +1,81 @@
+export declare const avatar: import('tailwind-variants').TVReturnType<{
+    shape: {
+        circle: string;
+        square: string;
+    };
+    type: {
+        initials: string;
+        image: string;
+    };
+    bordered: {
+        true: string;
+    };
+    overlap: {
+        true: string;
+    };
+}, undefined, "relative flex select-none items-center justify-center overflow-hidden", {
+    shape: {
+        circle: string;
+        square: string;
+    };
+    type: {
+        initials: string;
+        image: string;
+    };
+    bordered: {
+        true: string;
+    };
+    overlap: {
+        true: string;
+    };
+}, undefined, import('tailwind-variants').TVReturnType<{
+    shape: {
+        circle: string;
+        square: string;
+    };
+    type: {
+        initials: string;
+        image: string;
+    };
+    bordered: {
+        true: string;
+    };
+    overlap: {
+        true: string;
+    };
+}, undefined, "relative flex select-none items-center justify-center overflow-hidden", unknown, unknown, undefined>>;
+export declare const sizeSquareRoundedMap: Record<number, string>;
+export declare const presenceBadge: import('tailwind-variants').TVReturnType<{
+    status: {
+        available: string;
+        offline: string;
+        online: string;
+        warning: string;
+        blocked: string;
+        busy: string;
+        error: string;
+        unknown: string;
+    };
+}, undefined, "absolute bottom-0 right-0 flex h-3.5 w-3.5 items-center justify-center rounded-full border-2", {
+    status: {
+        available: string;
+        offline: string;
+        online: string;
+        warning: string;
+        blocked: string;
+        busy: string;
+        error: string;
+        unknown: string;
+    };
+}, undefined, import('tailwind-variants').TVReturnType<{
+    status: {
+        available: string;
+        offline: string;
+        online: string;
+        warning: string;
+        blocked: string;
+        busy: string;
+        error: string;
+        unknown: string;
+    };
+}, undefined, "absolute bottom-0 right-0 flex h-3.5 w-3.5 items-center justify-center rounded-full border-2", unknown, unknown, undefined>>;

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

@@ -0,0 +1,92 @@
+import { tv as e } from "../../../node_modules/tailwind-variants/dist/index.js";
+const s = e({
+  base: "relative flex select-none items-center justify-center overflow-hidden",
+  variants: {
+    shape: {
+      circle: "rounded-full",
+      square: "rounded-md"
+    },
+    type: {
+      initials: "font-semibold uppercase text-fg-brand-rest bg-bg-brand-subtle-rest",
+      image: "border-neutral border"
+    },
+    bordered: {
+      true: " border-neutral border"
+    },
+    overlap: {
+      true: " bg-bg-neutral-rest font-normal text-fg-neutral-subtle"
+    }
+  },
+  defaultVariants: {
+    size: 48,
+    shape: "circle",
+    type: "initials"
+  },
+  compoundVariants: [
+    {
+      shape: "circle",
+      className: "rounded-full"
+    },
+    {
+      size: 10,
+      shape: "square",
+      className: "rounded-xs"
+    },
+    {
+      size: 12,
+      shape: "square",
+      className: "rounded-xs"
+    },
+    {
+      size: 14,
+      shape: "square",
+      className: "rounded-sm"
+    },
+    {
+      size: 16,
+      shape: "square",
+      className: "rounded-sm"
+    },
+    {
+      size: 18,
+      shape: "square",
+      className: "rounded-sm"
+    },
+    {
+      size: 20,
+      shape: "square",
+      className: "rounded-sm"
+    },
+    {
+      size: 22,
+      shape: "square",
+      className: "rounded-sm"
+    },
+    {
+      size: 24,
+      shape: "square",
+      className: "rounded-sm"
+    }
+  ]
+}), a = e({
+  base: "absolute bottom-0 right-0 flex h-3.5 w-3.5 items-center justify-center rounded-full border-2",
+  variants: {
+    status: {
+      available: "border-white text-green-500",
+      offline: "border-white text-gray-400",
+      online: "border-white text-green-500",
+      warning: "border-white text-yellow-500",
+      blocked: "border-white text-red-500",
+      busy: "border-white text-yellow-500",
+      error: "border-white text-red-500",
+      unknown: "border-white text-gray-400"
+    }
+  },
+  defaultVariants: {
+    status: "available"
+  }
+});
+export {
+  s as avatar,
+  a as presenceBadge
+};

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

@@ -0,0 +1,25 @@
+import { default as React, ReactNode } from 'react';
+import { VariantProps } from 'tailwind-variants';
+import { avatar } from './helper/variants';
+export interface AvatarProps extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof avatar> {
+    src?: string;
+    size?: 10 | 12 | 14 | 16 | 18 | 20 | 22 | 24 | 32 | 40 | 48 | 56 | 64 | 72 | 80 | 88 | 128 | 160;
+    shape?: 'circle' | 'square';
+    showPresence?: boolean;
+    presenceStatus?: 'available' | 'offline';
+    alt?: string;
+    firstName?: string;
+    lastName?: string;
+    onUpload?: (file: File) => Promise<void>;
+    onRemove?: () => Promise<void>;
+    isLoading?: boolean;
+    error?: string;
+    isCanEdit?: boolean;
+    disableCache?: boolean;
+    icon?: ReactNode;
+    bordered?: boolean;
+    overlap?: boolean;
+    overlapPrefix?: string;
+}
+declare const Avatar: React.FC<AvatarProps>;
+export default Avatar;

package/dist/components/Avatar/index.js

@@ -0,0 +1,231 @@
+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 O from "../Icon/Icon.js";
+import { cn as x } from "../../shared/utils/cn.js";
+import ae from "../Loading/index.js";
+const d = {
+  10: "text-[4.55px]",
+  12: "text-[5.45px]",
+  14: "text-[6.36px]",
+  16: "text-[7.27px]",
+  18: "text-[8.18px]",
+  20: "text-[9.09px]",
+  22: "text-[10px]",
+  24: "text-[10.91px]",
+  32: "text-[14.55px]",
+  40: "text-[18.18px]",
+  48: "text-[21.82px]",
+  56: "text-[25.45px]",
+  64: "text-[29.09px]",
+  72: "text-[32.73px]",
+  80: "text-[36.36px]",
+  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 = ({
+  src: s = "",
+  size: c = 48,
+  shape: M = "circle",
+  showPresence: $ = !1,
+  presenceStatus: B = "available",
+  alt: F = "",
+  className: G,
+  firstName: g,
+  lastName: v,
+  onUpload: b,
+  onRemove: T,
+  isLoading: E = !1,
+  error: N = "",
+  isCanEdit: W = !0,
+  disableCache: h = !1,
+  icon: j,
+  bordered: J = !1,
+  overlap: Z = !1,
+  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) => {
+    try {
+      const t = await caches.open(_);
+      if (!await t.match(e)) {
+        const o = 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());
+      }
+    } catch {
+    }
+  };
+  x();
+  const q = async (e) => {
+    if (h) return null;
+    try {
+      const n = await (await caches.open(_)).match(e);
+      if (n) {
+        const o = await n.blob();
+        return URL.createObjectURL(o);
+      }
+      return null;
+    } catch {
+      return null;
+    }
+  };
+  A(() => {
+    let e = null;
+    return s && !h ? (Y(s), q(s).then((t) => {
+      t ? (H(t), l(t), e = t) : l(s);
+    })) : l(s || ""), () => {
+      e && URL.revokeObjectURL(e);
+    };
+  }, [s, h]), A(() => {
+    if (!a) {
+      w(!1);
+      return;
+    }
+    const e = new window.Image();
+    return e.src = a, e.onload = () => w(!1), e.onerror = () => {
+      w(!0), m && a !== m && l(m);
+    }, () => {
+      a.startsWith("blob:") && URL.revokeObjectURL(a);
+    };
+  }, [a, m]);
+  const K = () => 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) => {
+    const t = e.target.files?.[0];
+    if (!t) return;
+    if (!P.includes(t.type)) {
+      u(
+        "Please select a valid image file (JPG, JPEG, PNG, or WEBP)"
+      );
+      return;
+    }
+    if (t.size > se) {
+      u("Image is too large, must be no larger than 2 MB.");
+      return;
+    }
+    u("");
+    let n = null;
+    try {
+      n = URL.createObjectURL(t), l(n), await b?.(t);
+    } 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 = {
+    10: "h-[0.625rem] w-[0.625rem]",
+    // 10px
+    12: "h-[0.75rem] w-[0.75rem]",
+    // 12px
+    14: "h-[0.875rem] w-[0.875rem]",
+    // 14px
+    16: "h-[1rem] w-[1rem]",
+    // 16px
+    18: "h-[1.125rem] w-[1.125rem]",
+    // 18px
+    20: "h-[1.25rem] w-[1.25rem]",
+    // 20px
+    22: "h-[1.375rem] w-[1.375rem]",
+    // 22px
+    24: "h-[1.5rem] w-[1.5rem]",
+    // 24px
+    32: "h-[2rem] w-[2rem]",
+    // 32px
+    40: "h-[2.5rem] w-[2.5rem]",
+    // 40px
+    48: "h-[3rem] w-[3rem]",
+    // 48px
+    56: "h-[3.5rem] w-[3.5rem]",
+    // 56px
+    64: "h-[4rem] w-[4rem]",
+    // 64px
+    72: "h-[4.5rem] w-[4.5rem]",
+    // 72px
+    80: "h-[5rem] w-[5rem]",
+    // 80px
+    88: "h-[5.5rem] w-[5.5rem]",
+    // 88px
+    128: "h-[8rem] w-[8rem]",
+    // 128px
+    160: "h-[10rem] w-[10rem]"
+    // 160px
+  };
+  return /* @__PURE__ */ f("div", { "data-testid": ee, 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,
+            // type: previewSrc && !isImageError ? 'image' : 'initials',
+            className: x(k[c ?? 48], G),
+            bordered: a && !I ? !0 : J,
+            overlap: Z
+          }),
+          ...p,
+          children: [
+            a && !I ? /* @__PURE__ */ r(
+              "img",
+              {
+                src: a,
+                alt: F,
+                className: "h-full w-full object-cover"
+              }
+            ) : /* @__PURE__ */ r(
+              "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 })
+              }
+            ),
+            U && !E && /* @__PURE__ */ r(
+              "div",
+              {
+                ref: X,
+                className: "absolute bottom-0 flex w-full cursor-pointer items-center justify-center bg-black-alpha-40",
+                style: { color: "white", height: z ? "100%" : "24px" },
+                onClick: () => a ? L(!0) : S.current?.click(),
+                children: /* @__PURE__ */ r(
+                  O,
+                  {
+                    name: "camera-01",
+                    color: "default"
+                  }
+                )
+              }
+            ),
+            /* @__PURE__ */ r(
+              "input",
+              {
+                ref: S,
+                type: "file",
+                accept: P.join(","),
+                className: "hidden",
+                onChange: Q
+              }
+            ),
+            E && /* @__PURE__ */ r("div", { className: "absolute inset-0 flex items-center justify-center bg-bg-white", children: /* @__PURE__ */ r(ae, { 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" }) }) })
+    ] }),
+    (R || N) && /* @__PURE__ */ f("div", { className: "mt-2 flex items-center gap-1", children: [
+      /* @__PURE__ */ r(O, { name: "circle", color: "error" }),
+      /* @__PURE__ */ r("span", { className: "text-xs text-red-500", children: R || N })
+    ] })
+  ] });
+};
+export {
+  fe as default
+};

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

@@ -0,0 +1,12 @@
+import { default as React } from 'react';
+import { AvatarProps } from '../Avatar';
+interface AvatarGroupProps {
+    avatars: Array<Omit<AvatarProps, 'onUpload' | 'onRemove' | 'isCanEdit' | 'size' | 'shape' | 'overlap'>>;
+    maxCount?: number;
+    size?: AvatarProps['size'];
+    shape?: AvatarProps['shape'];
+    overlap?: boolean;
+    className?: string;
+}
+declare const AvatarGroup: React.FC<AvatarGroupProps>;
+export default AvatarGroup;

package/dist/components/AvatarGroup/index.js

@@ -0,0 +1,68 @@
+import { jsxs as a, jsx as n } from "react/jsx-runtime";
+import "react";
+import d from "../Avatar/index.js";
+const $ = ({
+  avatars: e,
+  maxCount: r,
+  size: i,
+  shape: s,
+  overlap: t = !0,
+  className: p = ""
+}) => {
+  const o = r && e.length > r ? e.slice(0, r - 1) : e, c = r && e.length > r ? e.length - (r - 1) : 0;
+  return /* @__PURE__ */ a(
+    "div",
+    {
+      className: `flex items-center ${t ? "pl-2" : ""} ${p}`,
+      "aria-label": "Avatar group",
+      children: [
+        o.map((f, l) => {
+          const h = i ?? 48, g = t && l !== 0 ? `-${Math.round(h * 0.2)}px` : "0px";
+          return /* @__PURE__ */ n(
+            "div",
+            {
+              style: {
+                marginLeft: t && l !== 0 ? g : void 0,
+                zIndex: o.length + l,
+                height: "fit-content"
+              },
+              children: /* @__PURE__ */ n(
+                d,
+                {
+                  bordered: !0,
+                  ...f,
+                  showPresence: !1,
+                  size: h,
+                  shape: s ?? "circle",
+                  isCanEdit: !1
+                }
+              )
+            },
+            l
+          );
+        }),
+        c > 0 && /* @__PURE__ */ n(
+          "div",
+          {
+            style: {
+              zIndex: e.length + 1,
+              marginLeft: t && o.length > 0 ? `-${Math.round((i ?? 48) * 0.2)}px` : void 0
+            },
+            children: /* @__PURE__ */ n(
+              d,
+              {
+                size: i ?? 48,
+                shape: s ?? "circle",
+                overlap: !0,
+                overlapPrefix: `+${c}`
+              }
+            )
+          }
+        )
+      ]
+    }
+  );
+};
+export {
+  $ as default
+};

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

@@ -0,0 +1,110 @@
+import { default as React } from 'react';
+import { VariantProps } from 'tailwind-variants';
+import { IconProps } from '../Icon';
+declare const badge: import('tailwind-variants').TVReturnType<{
+    variant: {
+        neutral: string;
+        info: string;
+        success: string;
+        warning: string;
+        error: string;
+        yellow: string;
+        violet: string;
+        outline: string;
+    };
+    size: {
+        sm: string;
+        md: string;
+    };
+    pill: {
+        true: string;
+        false: string;
+    };
+    emphasize: {
+        true: string;
+        false: string;
+    };
+    disabled: {
+        true: string;
+        false: string;
+    };
+    withIcon: {
+        true: string;
+        false: string;
+    };
+}, undefined, "font-medium inline-flex w-fit select-none items-center", {
+    variant: {
+        neutral: string;
+        info: string;
+        success: string;
+        warning: string;
+        error: string;
+        yellow: string;
+        violet: string;
+        outline: string;
+    };
+    size: {
+        sm: string;
+        md: string;
+    };
+    pill: {
+        true: string;
+        false: string;
+    };
+    emphasize: {
+        true: string;
+        false: string;
+    };
+    disabled: {
+        true: string;
+        false: string;
+    };
+    withIcon: {
+        true: string;
+        false: string;
+    };
+}, undefined, import('tailwind-variants').TVReturnType<{
+    variant: {
+        neutral: string;
+        info: string;
+        success: string;
+        warning: string;
+        error: string;
+        yellow: string;
+        violet: string;
+        outline: string;
+    };
+    size: {
+        sm: string;
+        md: string;
+    };
+    pill: {
+        true: string;
+        false: string;
+    };
+    emphasize: {
+        true: string;
+        false: string;
+    };
+    disabled: {
+        true: string;
+        false: string;
+    };
+    withIcon: {
+        true: string;
+        false: string;
+    };
+}, undefined, "font-medium inline-flex w-fit select-none items-center", unknown, unknown, undefined>>;
+interface BadgeProps extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof badge> {
+    children?: React.ReactNode;
+    icon?: React.ReactNode | ((props: IconProps) => React.ReactNode);
+    iconAriaLabel?: string;
+    'aria-label'?: string;
+    'aria-labelledby'?: string;
+    disabled?: boolean;
+    dataTestIdName?: string;
+    dot?: boolean;
+}
+export type { BadgeProps };
+declare const Badge: React.ForwardRefExoticComponent<BadgeProps & React.RefAttributes<HTMLDivElement>>;
+export default Badge;