mcr-design-systems 1.0.0

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

@@ -0,0 +1,57 @@
+export declare const sidebar: import('tailwind-variants').TVReturnType<{
+    collapsed: {
+        true: string;
+        false: string;
+    };
+}, undefined, string[], {
+    collapsed: {
+        true: string;
+        false: string;
+    };
+}, undefined, import('tailwind-variants').TVReturnType<{
+    collapsed: {
+        true: string;
+        false: string;
+    };
+}, undefined, string[], unknown, unknown, undefined>>;
+export declare const sidebarHeader: import('tailwind-variants').TVReturnType<{} | {} | {}, undefined, string[], {} | {}, undefined, import('tailwind-variants').TVReturnType<unknown, undefined, string[], unknown, unknown, undefined>>;
+export declare const sidebarContent: import('tailwind-variants').TVReturnType<{} | {} | {}, undefined, string[], {} | {}, undefined, import('tailwind-variants').TVReturnType<unknown, undefined, string[], unknown, unknown, undefined>>;
+export declare const sidebarFooter: import('tailwind-variants').TVReturnType<{} | {} | {}, undefined, string[], {} | {}, undefined, import('tailwind-variants').TVReturnType<unknown, undefined, string[], unknown, unknown, undefined>>;
+export declare const sidebarSection: import('tailwind-variants').TVReturnType<{} | {} | {}, undefined, string[], {} | {}, undefined, import('tailwind-variants').TVReturnType<unknown, undefined, string[], unknown, unknown, undefined>>;
+export declare const sidebarGroupTitle: import('tailwind-variants').TVReturnType<{} | {} | {}, undefined, string[], {} | {}, undefined, import('tailwind-variants').TVReturnType<unknown, undefined, string[], unknown, unknown, undefined>>;
+export declare const sidebarItem: import('tailwind-variants').TVReturnType<{} | {} | {}, undefined, string[], {} | {}, undefined, import('tailwind-variants').TVReturnType<unknown, undefined, string[], unknown, unknown, undefined>>;
+export declare const sidebarItemContent: import('tailwind-variants').TVReturnType<{
+    active: {
+        true: string[];
+        false: string;
+    };
+    disabled: {
+        true: string;
+        false: string;
+    };
+}, undefined, string[], {
+    active: {
+        true: string[];
+        false: string;
+    };
+    disabled: {
+        true: string;
+        false: string;
+    };
+}, undefined, import('tailwind-variants').TVReturnType<{
+    active: {
+        true: string[];
+        false: string;
+    };
+    disabled: {
+        true: string;
+        false: string;
+    };
+}, undefined, string[], unknown, unknown, undefined>>;
+export declare const sidebarItemIcon: import('tailwind-variants').TVReturnType<{} | {} | {}, undefined, string[], {} | {}, undefined, import('tailwind-variants').TVReturnType<unknown, undefined, string[], unknown, unknown, undefined>>;
+export declare const sidebarItemText: import('tailwind-variants').TVReturnType<{} | {} | {}, undefined, string[], {} | {}, undefined, import('tailwind-variants').TVReturnType<unknown, undefined, string[], unknown, unknown, undefined>>;
+export declare const userInfo: import('tailwind-variants').TVReturnType<{} | {} | {}, undefined, string[], {} | {}, undefined, import('tailwind-variants').TVReturnType<unknown, undefined, string[], unknown, unknown, undefined>>;
+export declare const userAvatar: import('tailwind-variants').TVReturnType<{} | {} | {}, undefined, string[], {} | {}, undefined, import('tailwind-variants').TVReturnType<unknown, undefined, string[], unknown, unknown, undefined>>;
+export declare const userDetails: import('tailwind-variants').TVReturnType<{} | {} | {}, undefined, string[], {} | {}, undefined, import('tailwind-variants').TVReturnType<unknown, undefined, string[], unknown, unknown, undefined>>;
+export declare const userName: import('tailwind-variants').TVReturnType<{} | {} | {}, undefined, string[], {} | {}, undefined, import('tailwind-variants').TVReturnType<unknown, undefined, string[], unknown, unknown, undefined>>;
+export declare const userRole: import('tailwind-variants').TVReturnType<{} | {} | {}, undefined, string[], {} | {}, undefined, import('tailwind-variants').TVReturnType<unknown, undefined, string[], unknown, unknown, undefined>>;

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

@@ -0,0 +1,85 @@
+import { tv as e } from "../../../node_modules/tailwind-variants/dist/index.js";
+const t = e({
+  base: [
+    "flex flex-col h-full bg-bg-surface-level-3",
+    "border-r border-neutral-200"
+  ],
+  variants: {
+    collapsed: {
+      true: "w-16",
+      false: "w-[248px]"
+    }
+  },
+  defaultVariants: {
+    collapsed: !1
+  }
+}), r = e({
+  base: ["flex items-center px-sm py-lg"]
+}), a = e({
+  base: ["flex flex-col flex-1 overflow-y-auto"]
+}), o = e({
+  base: ["flex flex-col justify-end px-sm pb-xl pt-none flex-1"]
+}), l = e({
+  base: ["flex flex-col gap-xs-3"]
+}), n = e({
+  base: ["px-sm pt-xs pb-none"]
+}), b = e({
+  base: ["flex items-center px-xs py-xs-4 ", ""],
+  defaultVariants: {
+    active: !1,
+    disabled: !1
+  }
+}), x = e({
+  base: [
+    "flex items-center gap-xs px-xs py-1.5 flex-1 relative cursor-pointer rounded-md"
+  ],
+  variants: {
+    active: {
+      true: [
+        "bg-bg-selected-rest text-fg-selected-rest",
+        "before:absolute before:left-0 before:top-1/2 before:-translate-y-1/2",
+        "before:w-[2px] before:h-[16px] before:bg-fg-selected-rest",
+        "before:rounded-tr-xs before:rounded-br-xs"
+      ],
+      false: "text-fg-neutral-subtle hover:bg-bg-neutral-subtle"
+    },
+    disabled: {
+      true: "opacity-50 cursor-not-allowed",
+      false: ""
+    }
+  }
+}), f = e({
+  base: ["w-5 h-5 flex-shrink-0"]
+}), c = e({
+  base: ["text-sm leading-5 font-medium"]
+}), i = e({
+  base: [
+    "flex items-center gap-xs px-xs py-xs rounded-xl-3 cursor-pointer",
+    "hover:bg-neutral-100 transition-colors"
+  ]
+}), d = e({
+  base: ["w-12 h-12 flex-shrink-0"]
+}), u = e({
+  base: ["flex flex-col gap-xs-2 flex-1"]
+}), p = e({
+  base: ["text-base leading-6 font-normal text-zinc-950"]
+}), m = e({
+  base: ["text-xs leading-4 font-medium text-zinc-600"]
+});
+export {
+  t as sidebar,
+  a as sidebarContent,
+  o as sidebarFooter,
+  n as sidebarGroupTitle,
+  r as sidebarHeader,
+  b as sidebarItem,
+  x as sidebarItemContent,
+  f as sidebarItemIcon,
+  c as sidebarItemText,
+  l as sidebarSection,
+  d as userAvatar,
+  u as userDetails,
+  i as userInfo,
+  p as userName,
+  m as userRole
+};

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

@@ -0,0 +1,32 @@
+import { default as React } from 'react';
+import { VariantProps } from 'tailwind-variants';
+import { sidebar } from './helper/variants';
+import { IconName } from '../Icon/helper';
+export interface SidebarItemProps {
+    id: string;
+    label: string;
+    icon?: IconName;
+    href?: string;
+    active?: boolean;
+    disabled?: boolean;
+    onClick?: () => void;
+}
+export interface SidebarGroupProps {
+    title: string;
+    items: SidebarItemProps[];
+}
+export interface SidebarUserProps {
+    name: string;
+    role: string;
+    avatar?: string;
+    initials?: string;
+    onClick?: () => void;
+}
+export interface SidebarProps extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof sidebar> {
+    logo?: React.ReactNode;
+    groups: SidebarGroupProps[];
+    user?: SidebarUserProps;
+    onItemClick?: (item: SidebarItemProps) => void;
+}
+export declare const Sidebar: React.FC<SidebarProps>;
+export default Sidebar;

package/dist/components/Sidebar/index.js

@@ -0,0 +1,125 @@
+import { jsxs as c, jsx as e } from "react/jsx-runtime";
+import "react";
+import { sidebarHeader as f, sidebarContent as p, sidebarFooter as u, sidebar as x, sidebarGroupTitle as I, sidebarSection as S, userAvatar as y, userName as z, userRole as g, userDetails as k, userInfo as w, sidebarItemIcon as C, sidebarItemText as T, sidebarItemContent as j, sidebarItem as A } from "./helper/variants.js";
+import { cn as a } from "../../shared/utils/cn.js";
+import { dataTestId as o } from "../../shared/utils/dataTestId.js";
+import h from "../Icon/Icon.js";
+import { Typography as n } from "../Typography/index.js";
+import G from "../Avatar/index.js";
+const U = ({
+  label: i,
+  icon: r,
+  active: t = !1,
+  disabled: s = !1,
+  onClick: d
+}) => {
+  const { id: l } = o("SidebarItem");
+  return /* @__PURE__ */ e(
+    "div",
+    {
+      className: a(A()),
+      onClick: s ? void 0 : d,
+      role: "button",
+      tabIndex: s ? -1 : 0,
+      "data-testid": l,
+      children: /* @__PURE__ */ c("div", { className: a(j({ active: t, disabled: s })), children: [
+        r && /* @__PURE__ */ e("div", { className: a(C()), children: /* @__PURE__ */ e(h, { name: r, className: "w-full h-full" }) }),
+        /* @__PURE__ */ e(n, { variants: "body", size: "md", className: a(T()), children: i })
+      ] })
+    }
+  );
+}, $ = ({ title: i, items: r, onItemClick: t }) => /* @__PURE__ */ c("div", { className: a(S()), children: [
+  /* @__PURE__ */ e("div", { className: a(I()), children: /* @__PURE__ */ e(
+    n,
+    {
+      variants: "action-up",
+      size: "xs",
+      className: "!text-fg-neutral-subtlest tracking-wide uppercase",
+      children: i
+    }
+  ) }),
+  /* @__PURE__ */ e("div", { className: "flex flex-col gap-none px-none", children: r.map((s) => /* @__PURE__ */ e(
+    U,
+    {
+      ...s,
+      onClick: () => t?.(s)
+    },
+    s.id
+  )) })
+] }), D = ({
+  name: i,
+  role: r,
+  avatar: t,
+  initials: s,
+  onClick: d
+}) => {
+  const { id: l } = o("SidebarUser");
+  return /* @__PURE__ */ c(
+    "div",
+    {
+      className: a(w()),
+      onClick: d,
+      role: "button",
+      tabIndex: 0,
+      "data-testid": l,
+      children: [
+        /* @__PURE__ */ e("div", { className: a(y()), children: /* @__PURE__ */ e(
+          G,
+          {
+            src: t,
+            firstName: s ? void 0 : i.split(" ")[0],
+            lastName: s ? void 0 : i.split(" ")[1],
+            size: 48,
+            shape: "circle"
+          }
+        ) }),
+        /* @__PURE__ */ c("div", { className: a(k()), children: [
+          /* @__PURE__ */ e(n, { variants: "body", size: "lg", className: a(z()), children: i }),
+          /* @__PURE__ */ e(n, { variants: "body", size: "sm", className: a(g()), children: r })
+        ] }),
+        /* @__PURE__ */ e("div", { className: "w-6 h-6 flex-shrink-0", children: /* @__PURE__ */ e(
+          h,
+          {
+            name: "chevron-right",
+            className: "w-full h-full text-fg-neutral-subtle"
+          }
+        ) })
+      ]
+    }
+  );
+}, L = ({
+  logo: i,
+  groups: r,
+  user: t,
+  onItemClick: s,
+  className: d,
+  collapsed: l = !1,
+  ...b
+}) => {
+  const { id: v } = o("Sidebar");
+  return /* @__PURE__ */ c(
+    "div",
+    {
+      className: a(x({ collapsed: l }), d),
+      "data-testid": v,
+      ...b,
+      children: [
+        i && /* @__PURE__ */ e("div", { className: a(f()), children: i }),
+        /* @__PURE__ */ e("div", { className: a(p()), children: r.map((m, N) => /* @__PURE__ */ e(
+          $,
+          {
+            title: m.title,
+            items: m.items,
+            onItemClick: s
+          },
+          `${m.title}-${N}`
+        )) }),
+        t && /* @__PURE__ */ e("div", { className: a(u()), children: /* @__PURE__ */ e(D, { ...t }) })
+      ]
+    }
+  );
+};
+export {
+  L as Sidebar,
+  L as default
+};

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

@@ -0,0 +1,14 @@
+import { default as React } from 'react';
+import { VariantProps } from 'tailwind-variants';
+import { switchContainerVariants } from './variants';
+export interface SwitchProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size' | 'onChange'>, VariantProps<typeof switchContainerVariants> {
+    label?: string;
+    helpText?: string;
+    checked: boolean;
+    onChange: (checked: boolean) => void;
+    disabled?: boolean;
+    className?: string;
+    size?: 'medium' | 'large';
+}
+export declare const Switch: React.ForwardRefExoticComponent<SwitchProps & React.RefAttributes<HTMLInputElement>>;
+export default Switch;

package/dist/components/Switch/index.js

@@ -0,0 +1,102 @@
+import { jsx as t, jsxs as c } from "react/jsx-runtime";
+import p, { forwardRef as k, useState as E } from "react";
+import { switchContainerVariants as F, switchInputVariants as R, switchBackgroundVariants as V, switchThumbVariants as S } from "./variants.js";
+import { Typography as w } from "../Typography/index.js";
+import { cn as j } from "../../shared/utils/cn.js";
+const I = k(
+  ({
+    label: a,
+    checked: n,
+    onChange: m,
+    disabled: e = !1,
+    className: v,
+    helpText: o,
+    id: l,
+    size: u = "medium",
+    ...x
+  }, f) => {
+    const [i, d] = E(!1), r = p.useRef(null);
+    p.useEffect(() => {
+      if (!i) return;
+      const s = (C) => {
+        r && "current" in r && r.current && !r.current.contains(C.target) && d(!1);
+      };
+      return document.addEventListener("mousedown", s), () => {
+        document.removeEventListener("mousedown", s);
+      };
+    }, [i, f]);
+    const N = (s) => {
+      e || m?.(s.target.checked);
+    }, h = () => {
+      e || (y(), m?.(!n));
+    }, y = () => {
+      d(!0);
+    }, g = /* @__PURE__ */ t(
+      "div",
+      {
+        className: j("flex items-center rounded-full w-[30px]", {
+          "ring-2 ring-offset-2 border-fg-focus-ring ring-bg-brand-rest": i && !e
+        }),
+        children: /* @__PURE__ */ c("div", { className: F({ disabled: e, className: v }), children: [
+          /* @__PURE__ */ t(
+            "input",
+            {
+              id: l,
+              ref: f,
+              type: "checkbox",
+              defaultChecked: n,
+              onChange: N,
+              disabled: e,
+              className: R(),
+              ...x
+            }
+          ),
+          /* @__PURE__ */ t(
+            "div",
+            {
+              className: V({
+                checked: n,
+                disabled: e
+              }),
+              ref: r,
+              onClick: h
+            }
+          ),
+          /* @__PURE__ */ t("div", { className: S({ checked: n }) })
+        ] })
+      }
+    );
+    return !a && !o ? g : /* @__PURE__ */ c("div", { className: "flex items-start gap-2", children: [
+      g,
+      a && /* @__PURE__ */ c("div", { className: "flex flex-col gap-y-xs-1 pt-[1px]", children: [
+        /* @__PURE__ */ t(
+          w,
+          {
+            htmlFor: l,
+            as: "label",
+            variants: "body",
+            onClick: h,
+            size: u === "medium" ? "md" : "lg",
+            className: `${e ? "cursor-not-allowed" : "cursor-pointer"}`,
+            color: "fg-neutral-main",
+            children: a
+          }
+        ),
+        o && /* @__PURE__ */ t(
+          w,
+          {
+            variants: "body",
+            size: u === "medium" ? "sm" : "md",
+            color: "fg-neutral-subtle",
+            children: o
+          }
+        )
+      ] })
+    ] });
+  }
+);
+I.displayName = "Switch";
+export {
+  I as Switch,
+  I as default
+};

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

@@ -0,0 +1,61 @@
+export declare const switchContainerVariants: import('tailwind-variants').TVReturnType<{
+    disabled: {
+        true: string;
+        false: string;
+    };
+}, undefined, "relative inline-flex h-[18px] w-[30px] cursor-pointer", {
+    disabled: {
+        true: string;
+        false: string;
+    };
+}, undefined, import('tailwind-variants').TVReturnType<{
+    disabled: {
+        true: string;
+        false: string;
+    };
+}, undefined, "relative inline-flex h-[18px] w-[30px] cursor-pointer", unknown, unknown, undefined>>;
+export declare const switchBackgroundVariants: import('tailwind-variants').TVReturnType<{
+    checked: {
+        true: string;
+        false: string;
+    };
+    disabled: {
+        true: string;
+        false: string;
+    };
+}, undefined, "absolute inset-0 rounded-full transition-colors duration-200 ease-in-out focus:outline-none focus:ring-[1px] focus:ring-offset-2 focus:ring-bg-brand-focused", {
+    checked: {
+        true: string;
+        false: string;
+    };
+    disabled: {
+        true: string;
+        false: string;
+    };
+}, undefined, import('tailwind-variants').TVReturnType<{
+    checked: {
+        true: string;
+        false: string;
+    };
+    disabled: {
+        true: string;
+        false: string;
+    };
+}, undefined, "absolute inset-0 rounded-full transition-colors duration-200 ease-in-out focus:outline-none focus:ring-[1px] focus:ring-offset-2 focus:ring-bg-brand-focused", unknown, unknown, undefined>>;
+export declare const switchThumbVariants: import('tailwind-variants').TVReturnType<{
+    checked: {
+        true: string;
+        false: string;
+    };
+}, undefined, "pointer-events-none absolute left-1 top-[50%] inline-block size-3 -translate-y-[50%] transform rounded-full bg-white shadow transition-transform duration-200 ease-in-out", {
+    checked: {
+        true: string;
+        false: string;
+    };
+}, undefined, import('tailwind-variants').TVReturnType<{
+    checked: {
+        true: string;
+        false: string;
+    };
+}, undefined, "pointer-events-none absolute left-1 top-[50%] inline-block size-3 -translate-y-[50%] transform rounded-full bg-white shadow transition-transform duration-200 ease-in-out", unknown, unknown, undefined>>;
+export declare const switchInputVariants: import('tailwind-variants').TVReturnType<{} | {} | {}, undefined, "sr-only", {} | {}, undefined, import('tailwind-variants').TVReturnType<unknown, undefined, "sr-only", unknown, unknown, undefined>>;

package/dist/components/Switch/variants.js

@@ -0,0 +1,80 @@
+import { tv as e } from "../../node_modules/tailwind-variants/dist/index.js";
+const s = e({
+  base: "relative inline-flex h-[18px] w-[30px] cursor-pointer",
+  variants: {
+    disabled: {
+      true: "cursor-not-allowed opacity-50",
+      false: "cursor-pointer"
+    }
+  },
+  defaultVariants: {
+    disabled: !1
+  }
+}), t = e({
+  base: "absolute inset-0 rounded-full transition-colors duration-200 ease-in-out focus:outline-none focus:ring-[1px] focus:ring-offset-2 focus:ring-bg-brand-focused",
+  variants: {
+    checked: {
+      true: "bg-fg-brand-hover",
+      false: "bg-bg-neutral-boldest-rest"
+    },
+    disabled: {
+      true: "",
+      false: ""
+    }
+  },
+  compoundVariants: [
+    {
+      checked: !0,
+      disabled: !1,
+      className: "bg-fg-brand-rest hover:bg-fg-brand-rest-strong"
+    },
+    {
+      checked: !1,
+      disabled: !1,
+      className: "bg-bg-neutral-boldest-rest hover:bg-fg-brand-rest"
+    },
+    {
+      checked: !0,
+      disabled: !0,
+      className: "bg-bg-brand-disabled"
+    },
+    {
+      checked: !1,
+      disabled: !0,
+      className: "bg-bg-neutral-boldest-disabled"
+    }
+  ],
+  defaultVariants: {
+    checked: !1,
+    disabled: !1
+  }
+}), r = e({
+  base: "pointer-events-none absolute left-1 top-[50%] inline-block size-3 -translate-y-[50%] transform rounded-full bg-white shadow transition-transform duration-200 ease-in-out",
+  variants: {
+    checked: {
+      true: "",
+      false: ""
+    }
+  },
+  compoundVariants: [
+    {
+      checked: !0,
+      className: "translate-x-2.5"
+    },
+    {
+      checked: !1,
+      className: "translate-x-0"
+    }
+  ],
+  defaultVariants: {
+    checked: !1
+  }
+}), n = e({
+  base: "sr-only"
+});
+export {
+  t as switchBackgroundVariants,
+  s as switchContainerVariants,
+  n as switchInputVariants,
+  r as switchThumbVariants
+};

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

@@ -0,0 +1,102 @@
+export declare const tabVariants: import('tailwind-variants').TVReturnType<{
+    size: {
+        sm: string[];
+        md: string[];
+        lg: string[];
+    };
+    state: {
+        default: string[];
+        active: string[];
+        disabled: string[];
+    };
+    variant: {
+        default: string;
+        underlined: string;
+        pills: string[];
+    };
+}, undefined, string[], {
+    size: {
+        sm: string[];
+        md: string[];
+        lg: string[];
+    };
+    state: {
+        default: string[];
+        active: string[];
+        disabled: string[];
+    };
+    variant: {
+        default: string;
+        underlined: string;
+        pills: string[];
+    };
+}, undefined, import('tailwind-variants').TVReturnType<{
+    size: {
+        sm: string[];
+        md: string[];
+        lg: string[];
+    };
+    state: {
+        default: string[];
+        active: string[];
+        disabled: string[];
+    };
+    variant: {
+        default: string;
+        underlined: string;
+        pills: string[];
+    };
+}, undefined, string[], unknown, unknown, undefined>>;
+export declare const tabListVariants: import('tailwind-variants').TVReturnType<{
+    variant: {
+        default: string;
+        underlined: string;
+        pills: string;
+    };
+    size: {
+        sm: string;
+        md: string;
+        lg: string;
+    };
+}, undefined, string[], {
+    variant: {
+        default: string;
+        underlined: string;
+        pills: string;
+    };
+    size: {
+        sm: string;
+        md: string;
+        lg: string;
+    };
+}, undefined, import('tailwind-variants').TVReturnType<{
+    variant: {
+        default: string;
+        underlined: string;
+        pills: string;
+    };
+    size: {
+        sm: string;
+        md: string;
+        lg: string;
+    };
+}, undefined, string[], unknown, unknown, undefined>>;
+export declare const tabPanelVariants: import('tailwind-variants').TVReturnType<{
+    size: {
+        sm: string;
+        md: string;
+        lg: string;
+    };
+}, undefined, string[], {
+    size: {
+        sm: string;
+        md: string;
+        lg: string;
+    };
+}, undefined, import('tailwind-variants').TVReturnType<{
+    size: {
+        sm: string;
+        md: string;
+        lg: string;
+    };
+}, undefined, string[], unknown, unknown, undefined>>;