mcr-design-systems 1.0.0

package/dist/components/MenuItem/index.js

@@ -0,0 +1,74 @@
+import { jsx as a, jsxs as y } from "react/jsx-runtime";
+import * as b from "react";
+import { Item as x, ItemIndicator as k } from "../../node_modules/@radix-ui/react-dropdown-menu/dist/index.js";
+import { cn as m } from "../../shared/utils/cn.js";
+import { dataTestId as v } from "../../shared/utils/dataTestId.js";
+import z from "../Icon/Icon.js";
+import { menuItemVariants as w } from "./helper/variants.js";
+import { Typography as C } from "../Typography/index.js";
+const E = b.forwardRef(
+  ({
+    label: g,
+    disabled: i = !1,
+    icon: l,
+    endIcon: c,
+    shortcut: f,
+    selected: n = !1,
+    showCheckmark: j = !1,
+    className: o,
+    "data-testid": t,
+    onSelect: d,
+    children: p,
+    size: M,
+    variant: R,
+    state: T,
+    customLabel: h,
+    ...u
+  }, N) => {
+    const e = w({ size: M, variant: R, state: T, selected: n }), I = (r, s) => r ? typeof r == "string" ? /* @__PURE__ */ a(z, { name: r, size: 16, className: s }) : typeof r == "function" ? /* @__PURE__ */ a("span", { className: s, children: r(n) }) : /* @__PURE__ */ a("span", { className: s, children: r }) : null;
+    return p ? /* @__PURE__ */ a(
+      x,
+      {
+        ref: N,
+        className: m(e.item(), o),
+        disabled: i,
+        onSelect: d,
+        ...t && v(t),
+        ...u,
+        children: p
+      }
+    ) : /* @__PURE__ */ y(
+      x,
+      {
+        ref: N,
+        className: m(e.item(), o),
+        disabled: i,
+        onSelect: d,
+        ...t && v(t),
+        ...u,
+        children: [
+          j && n && /* @__PURE__ */ a(k, { className: e.indicator(), children: /* @__PURE__ */ a(z, { name: "check", size: 12 }) }),
+          l && /* @__PURE__ */ a("span", { className: e.iconStart(), children: I(l) }),
+          h ? /* @__PURE__ */ a("span", { className: e.label(), children: h }) : /* @__PURE__ */ a(
+            C,
+            {
+              variants: "body",
+              size: "md",
+              className: m(e.label(), "text-left"),
+              children: g
+            }
+          ),
+          /* @__PURE__ */ y("div", { className: e.endContent(), children: [
+            f && /* @__PURE__ */ a("span", { className: e.shortcut(), children: f }),
+            c && /* @__PURE__ */ a("span", { className: e.iconEnd(), children: I(c) })
+          ] })
+        ]
+      }
+    );
+  }
+);
+E.displayName = "MenuItem";
+export {
+  E as MenuItem,
+  E as default
+};

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

@@ -0,0 +1,90 @@
+import { VariantProps } from 'tailwind-variants';
+export declare const popoverVariants: import('tailwind-variants').TVReturnType<{
+    size: {
+        sm: {
+            content: string;
+        };
+        md: {
+            content: string;
+        };
+        lg: {
+            content: string;
+        };
+    };
+    hasIcon: {
+        true: {
+            content: string;
+        };
+        false: {
+            content: string;
+        };
+    };
+}, {
+    content: string[];
+    arrow: string[];
+    header: string[];
+    description: string[];
+    actions: string[];
+    actionButton: string[];
+    secondaryButton: string[];
+    primaryButton: string[];
+}, undefined, {
+    size: {
+        sm: {
+            content: string;
+        };
+        md: {
+            content: string;
+        };
+        lg: {
+            content: string;
+        };
+    };
+    hasIcon: {
+        true: {
+            content: string;
+        };
+        false: {
+            content: string;
+        };
+    };
+}, {
+    content: string[];
+    arrow: string[];
+    header: string[];
+    description: string[];
+    actions: string[];
+    actionButton: string[];
+    secondaryButton: string[];
+    primaryButton: string[];
+}, import('tailwind-variants').TVReturnType<{
+    size: {
+        sm: {
+            content: string;
+        };
+        md: {
+            content: string;
+        };
+        lg: {
+            content: string;
+        };
+    };
+    hasIcon: {
+        true: {
+            content: string;
+        };
+        false: {
+            content: string;
+        };
+    };
+}, {
+    content: string[];
+    arrow: string[];
+    header: string[];
+    description: string[];
+    actions: string[];
+    actionButton: string[];
+    secondaryButton: string[];
+    primaryButton: string[];
+}, undefined, unknown, unknown, undefined>>;
+export type PopoverVariants = VariantProps<typeof popoverVariants>;

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

@@ -0,0 +1,135 @@
+import { tv as t } from "../../../node_modules/tailwind-variants/dist/index.js";
+const a = t({
+  slots: {
+    content: [
+      "relative",
+      // Add relative positioning for arrow
+      "z-popover",
+      "bg-bg-surface-level-3",
+      // White background from Figma
+      "border border-neutral-strong",
+      // Neutral strong border
+      "rounded-lg",
+      // 8px border radius
+      "shadow-[0px_-5px_12px_0px_rgba(0,0,0,0.12),0px_5px_12px_0px_rgba(0,0,0,0.12)]",
+      // Figma shadow
+      "p-sm-2",
+      // 12px padding as per Figma
+      "outline-none",
+      "data-[state=open]:animate-in data-[state=closed]:animate-out",
+      "data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
+      "data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95",
+      "data-[side=bottom]:slide-in-from-top-2",
+      "data-[side=left]:slide-in-from-right-2",
+      "data-[side=right]:slide-in-from-left-2",
+      "data-[side=top]:slide-in-from-bottom-2"
+    ],
+    arrow: [
+      "absolute",
+      "top-0",
+      "left-1/2",
+      "-translate-x-1/2",
+      "-translate-y-1/2",
+      "w-3",
+      "h-3",
+      "bg-bg-surface-level-3",
+      // Match content background
+      "border-l border-t border-neutral-strong",
+      "rotate-45",
+      "z-10"
+    ],
+    header: [
+      "text-fg-neutral-main",
+      // #171717
+      "font-semibold",
+      "text-sm",
+      // 14px
+      "leading-5",
+      // 20px line height
+      "mb-1"
+      // 4px margin bottom
+    ],
+    description: [
+      "text-fg-neutral-main",
+      // #171717
+      "font-normal",
+      "text-xs",
+      // 12px
+      "leading-4",
+      // 16px line height
+      "mb-2"
+      // 8px margin bottom
+    ],
+    actions: [
+      "flex",
+      "flex-row",
+      "gap-xs",
+      // 8px gap
+      "w-full"
+    ],
+    actionButton: [
+      "flex-1",
+      "h-8",
+      // 32px height
+      "px-xs",
+      // 8px horizontal padding
+      "rounded-lg",
+      "flex",
+      "items-center",
+      "justify-center",
+      "text-xs",
+      // 12px
+      "font-semibold",
+      "leading-4",
+      // 16px line height
+      "transition-colors",
+      "duration-150"
+    ],
+    secondaryButton: [
+      "bg-bg-surface-level-5",
+      // White background
+      "border border-neutral-strong",
+      // Neutral border
+      "text-fg-neutral-main",
+      "hover:bg-bg-neutral-subtle",
+      "shadow-[0px_1px_2px_0px_rgba(0,0,0,0.04)]"
+      // Button shadow
+    ],
+    primaryButton: [
+      "bg-bg-brand-rest",
+      // Orange background
+      "text-white",
+      "hover:bg-bg-brand-hover"
+    ]
+  },
+  variants: {
+    size: {
+      sm: {
+        content: "min-w-[200px] max-w-[240px]"
+      },
+      md: {
+        content: "min-w-[280px] max-w-[320px]"
+      },
+      lg: {
+        content: "min-w-[320px] max-w-[400px]"
+      }
+    },
+    hasIcon: {
+      true: {
+        content: "pl-3"
+        // Keep padding when icon is present
+      },
+      false: {
+        content: "pl-3"
+        // Same padding without icon
+      }
+    }
+  },
+  defaultVariants: {
+    size: "md",
+    hasIcon: !1
+  }
+});
+export {
+  a as popoverVariants
+};

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

@@ -0,0 +1,70 @@
+import { PopoverVariants } from './helper/variants';
+import * as React from 'react';
+export interface PopoverProps extends PopoverVariants {
+    /**
+     * Whether the popover is open
+     */
+    isOpen?: boolean;
+    /**
+     * Callback fired when the popover should close
+     */
+    onClose?: () => void;
+    /**
+     * The element that triggered the popover (for positioning)
+     */
+    anchorEl?: HTMLElement | null;
+    /**
+     * Bounding rect for positioning the popover
+     */
+    boundingClientRect?: DOMRect;
+    /**
+     * Content to display inside the popover
+     */
+    children?: React.ReactNode;
+    /**
+     * Additional CSS class names
+     */
+    className?: string;
+    /**
+     * Test identifier
+     */
+    'data-testid'?: string;
+    /**
+     * Popover placement relative to anchor
+     */
+    placement?: 'top' | 'bottom' | 'left' | 'right' | 'auto';
+    /**
+     * Offset from anchor element in pixels
+     */
+    offset?: number;
+    /**
+     * Optional leading icon
+     */
+    leadingIcon?: React.ReactNode;
+    /**
+     * Header/title text
+     */
+    title?: string;
+    /**
+     * Description text
+     */
+    description?: string;
+    /**
+     * Optional action buttons
+     */
+    actions?: {
+        secondary?: {
+            label: string;
+            onClick: () => void;
+        };
+        primary?: {
+            label: string;
+            onClick: () => void;
+        };
+    };
+    /**
+     * Whether to show the arrow indicator
+     */
+    showArrow?: boolean;
+}
+export declare const Popover: React.ForwardRefExoticComponent<PopoverProps & React.RefAttributes<HTMLDivElement>>;

package/dist/components/Popover/index.js

@@ -0,0 +1,134 @@
+import { jsxs as a, jsx as t } from "react/jsx-runtime";
+import * as m from "react";
+import { Root as I, Anchor as J, Portal as K, Content as M } from "../../node_modules/@radix-ui/react-popover/dist/index.js";
+import { cn as u } from "../../shared/utils/cn.js";
+import { dataTestId as Q } from "../../shared/utils/dataTestId.js";
+import { popoverVariants as U } from "./helper/variants.js";
+const X = m.forwardRef(
+  ({
+    isOpen: l = !1,
+    onClose: N,
+    anchorEl: n,
+    boundingClientRect: c,
+    children: v,
+    className: x,
+    size: B,
+    placement: p = "auto",
+    offset: P = 8,
+    "data-testid": g,
+    leadingIcon: d,
+    title: f,
+    description: h,
+    actions: r,
+    showArrow: R = !0,
+    ...k
+  }, A) => {
+    const [b, j] = m.useState({ side: "bottom", align: "center" }), {
+      content: D,
+      arrow: H,
+      header: S,
+      description: W,
+      actions: q,
+      actionButton: y,
+      secondaryButton: z,
+      primaryButton: F
+    } = U({ size: B, hasIcon: !!d });
+    if (m.useEffect(() => {
+      if (!l || !n && !c) return;
+      const e = c || n?.getBoundingClientRect();
+      if (!e) return;
+      const w = window.innerWidth, C = window.innerHeight;
+      let o = "bottom", i = "center";
+      if (p !== "auto")
+        o = p;
+      else {
+        const O = C - e.bottom, T = e.top, V = w - e.right, G = e.left;
+        O >= 200 ? o = "bottom" : T >= 200 ? o = "top" : V >= 280 ? o = "right" : G >= 280 ? o = "left" : o = "bottom";
+      }
+      o === "top" || o === "bottom" ? e.left < 100 ? i = "start" : e.right > w - 100 ? i = "end" : i = "center" : e.top < 100 ? i = "start" : e.bottom > C - 100 ? i = "end" : i = "center", j({ side: o, align: i });
+    }, [l, n, c, p]), !l) return null;
+    const s = c || n?.getBoundingClientRect();
+    if (!s)
+      return console.warn("Popover requires either anchorEl or boundingClientRect"), null;
+    const L = f || h || r || d;
+    return /* @__PURE__ */ a(
+      I,
+      {
+        open: l,
+        onOpenChange: (e) => !e && N?.(),
+        children: [
+          /* @__PURE__ */ t(J, { asChild: !0, children: /* @__PURE__ */ t(
+            "div",
+            {
+              style: {
+                position: "fixed",
+                left: s.left,
+                top: s.top,
+                width: s.width,
+                height: s.height,
+                pointerEvents: "none",
+                visibility: "hidden",
+                zIndex: 1
+              }
+            }
+          ) }),
+          /* @__PURE__ */ t(K, { children: /* @__PURE__ */ a(
+            M,
+            {
+              "data-slot": "popover-content",
+              side: b.side,
+              align: b.align,
+              sideOffset: P,
+              className: u(D(), x),
+              onOpenAutoFocus: (e) => e.preventDefault(),
+              onInteractOutside: (e) => {
+                n?.contains(e.target) && e.preventDefault();
+              },
+              ref: A,
+              ...g ? Q(g) : {},
+              ...k,
+              children: [
+                L ? /* @__PURE__ */ a("div", { className: "flex gap-xs", children: [
+                  d && /* @__PURE__ */ t("div", { children: d }),
+                  /* @__PURE__ */ a("div", { children: [
+                    f && /* @__PURE__ */ t("div", { className: S(), children: f && /* @__PURE__ */ t("div", { children: f }) }),
+                    h && /* @__PURE__ */ t("div", { className: W(), children: h }),
+                    r && /* @__PURE__ */ a("div", { className: q(), children: [
+                      r.secondary && /* @__PURE__ */ t(
+                        "button",
+                        {
+                          type: "button",
+                          onClick: r.secondary.onClick,
+                          className: u(y(), z()),
+                          children: r.secondary.label
+                        }
+                      ),
+                      r.primary && /* @__PURE__ */ t(
+                        "button",
+                        {
+                          type: "button",
+                          onClick: r.primary.onClick,
+                          className: u(y(), F()),
+                          children: r.primary.label
+                        }
+                      )
+                    ] }),
+                    v
+                  ] })
+                ] }) : (
+                  // Render custom children only
+                  v
+                ),
+                R && /* @__PURE__ */ t("div", { className: H() })
+              ]
+            }
+          ) })
+        ]
+      }
+    );
+  }
+);
+X.displayName = "Popover";
+export {
+  X as Popover
+};

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

@@ -0,0 +1,10 @@
+import { default as React } from 'react';
+export interface RadioProps extends React.InputHTMLAttributes<HTMLInputElement> {
+    disabled?: boolean;
+    label?: string;
+    helpText?: string;
+    id?: string;
+    radioSize?: 'medium' | 'large';
+}
+declare const Radio: React.ForwardRefExoticComponent<RadioProps & React.RefAttributes<HTMLInputElement>>;
+export default Radio;

package/dist/components/Radio/index.js

@@ -0,0 +1,64 @@
+import { jsxs as m, jsx as r } from "react/jsx-runtime";
+import f from "react";
+import { radioInputContainerVariants as u, radioVariants as g } from "./variants.js";
+import { Typography as s } from "../Typography/index.js";
+import "clsx";
+import "tailwind-merge";
+import { dataTestId as h } from "../../shared/utils/dataTestId.js";
+const x = f.forwardRef(
+  ({
+    disabled: a,
+    label: o,
+    helpText: e,
+    id: i,
+    checked: d,
+    name: l,
+    radioSize: t = "medium",
+    ...n
+  }, c) => {
+    const { id: p } = h("Radio");
+    return /* @__PURE__ */ m("div", { "data-testid": p, className: "flex items-start gap-2", children: [
+      /* @__PURE__ */ r("div", { className: u({}), children: /* @__PURE__ */ r(
+        "input",
+        {
+          ...n,
+          ref: c,
+          id: i,
+          checked: d,
+          className: g({ disabled: a, size: t }),
+          type: "radio",
+          disabled: a,
+          name: l,
+          tabIndex: a ? -1 : 0
+        }
+      ) }),
+      o && /* @__PURE__ */ m("div", { className: "flex flex-col gap-100 pt-[0.125rem]", children: [
+        /* @__PURE__ */ r(
+          s,
+          {
+            htmlFor: i,
+            as: "label",
+            variants: "body",
+            size: t === "medium" ? "md" : "lg",
+            className: `${a ? "cursor-not-allowed" : "cursor-pointer"}`,
+            color: "fg-neutral-main",
+            children: o
+          }
+        ),
+        e && /* @__PURE__ */ r(
+          s,
+          {
+            variants: "body",
+            size: t === "medium" ? "sm" : "md",
+            color: "fg-neutral-subtle",
+            children: e
+          }
+        )
+      ] })
+    ] });
+  }
+);
+x.displayName = "Radio";
+export {
+  x as default
+};

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

@@ -0,0 +1,41 @@
+export declare const radioInputContainerVariants: import('tailwind-variants').TVReturnType<{
+    size: {
+        medium: string;
+        large: string;
+    };
+}, undefined, "relative flex items-center", {
+    size: {
+        medium: string;
+        large: string;
+    };
+}, undefined, import('tailwind-variants').TVReturnType<{
+    size: {
+        medium: string;
+        large: string;
+    };
+}, undefined, "relative flex items-center", unknown, unknown, undefined>>;
+export declare const radioVariants: import('tailwind-variants').TVReturnType<{
+    size: {
+        medium: string;
+        large: string;
+    };
+    disabled: {
+        true: string;
+    };
+}, undefined, string, {
+    size: {
+        medium: string;
+        large: string;
+    };
+    disabled: {
+        true: string;
+    };
+}, undefined, import('tailwind-variants').TVReturnType<{
+    size: {
+        medium: string;
+        large: string;
+    };
+    disabled: {
+        true: string;
+    };
+}, undefined, string, unknown, unknown, undefined>>;

package/dist/components/Radio/variants.js

@@ -0,0 +1,31 @@
+import { tv as e } from "../../node_modules/tailwind-variants/dist/index.js";
+const a = e({
+  base: "relative flex items-center",
+  variants: {
+    size: {
+      medium: "size-5",
+      large: "size-6"
+    }
+  },
+  defaultVariants: {
+    size: "medium"
+  }
+}), r = " focus:ring-[2px] focus:ring-offset-2 focus:ring-bg-brand-rest focus:outline-none", d = e({
+  base: "before:content[''] border-neutral-strongest peer cursor-pointer appearance-none rounded-full border-2 transition-all transition-colors duration-0 duration-300 checked:border-[6px] checked:border-fg-brand-rest hover:border-fg-brand-rest checked:hover:border-bg-brand-hover" + r,
+  variants: {
+    size: {
+      medium: "h-[18px] w-[18px]",
+      large: "size-5"
+    },
+    disabled: {
+      true: "checked:border-[6px] hover:shadow-none disabled:cursor-not-allowed disabled:border-fg-neutral-disabled disabled:checked:border-fg-brand-disabled"
+    }
+  },
+  defaultVariants: {
+    size: "medium"
+  }
+});
+export {
+  a as radioInputContainerVariants,
+  d as radioVariants
+};