mcr-design-systems 1.0.0

package/dist/components/Typography/helper/constants.js

@@ -0,0 +1,35 @@
+const l = {
+  body: ["xs", "sm", "md", "lg"],
+  // 4 sizes, default: md
+  action: ["xs", "sm", "md", "lg"],
+  // 4 sizes, default: md
+  "action-emphasize": ["xs", "sm", "md", "lg"],
+  // 4 sizes, default: md
+  "action-up": ["xs", "sm", "md", "lg"],
+  // 4 sizes, default: md
+  "action-emphasize-up": ["xs", "sm", "md", "lg"],
+  // 4 sizes, default: md
+  heading: ["xs", "sm", "md", "lg", "xl", "2xl"],
+  // 6 sizes, no default needed (handled by specific heading variants)
+  "heading-xs": ["xs", "sm", "md", "lg", "xl", "2xl"],
+  // 6 sizes
+  "heading-sm": ["xs", "sm", "md", "lg", "xl", "2xl"],
+  // 6 sizes
+  "heading-md": ["xs", "sm", "md", "lg", "xl", "2xl"],
+  // 6 sizes
+  "heading-lg": ["xs", "sm", "md", "lg", "xl", "2xl"],
+  // 6 sizes
+  "heading-xl": ["xs", "sm", "md", "lg", "xl", "2xl"],
+  // 6 sizes
+  "heading-2xl": ["xs", "sm", "md", "lg", "xl", "2xl"],
+  // 6 sizes
+  display: ["lg", "xl", "2xl"],
+  // 3 sizes, default: lg (smallest)
+  label: ["xs", "sm", "md", "lg"],
+  // 4 sizes, default: md
+  paragraph: ["xs", "sm", "md", "lg"]
+  // 4 sizes, default: md
+};
+export {
+  l as VARIANT_SIZE_RULES
+};

package/dist/components/Typography/helper/types.d.ts

@@ -0,0 +1,4 @@
+export type TypographySize = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl';
+export type TypographyVariant = 'display' | 'heading-xs' | 'heading-sm' | 'heading-md' | 'heading-lg' | 'heading-xl' | 'heading-2xl' | 'label' | 'paragraph' | 'body' | 'action' | 'action-emphasize' | 'action-up' | 'action-emphasize-up';
+export type TypographyAs = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'label' | 'p' | 'div' | 'span';
+export type TypographyColor = 'default' | 'white' | 'black' | 'transparent' | 'bg-level-1' | 'bg-level-2' | 'bg-level-3' | 'bg-level-4' | 'bg-level-5' | 'bg-input' | 'bg-input-disabled' | 'bg-tooltip' | 'bg-dialog' | 'bg-card' | 'bg-neutral-rest' | 'bg-neutral-hover' | 'bg-neutral-pressed' | 'bg-neutral-disabled' | 'bg-neutral-subtle' | 'bg-accent-info-rest' | 'bg-accent-info-hover' | 'bg-accent-info-pressed' | 'bg-accent-info-disabled' | 'bg-accent-info-subtle' | 'bg-accent-info-subtle-hover' | 'bg-accent-info-subtle-pressed' | 'bg-accent-info-subtle-disabled' | 'bg-accent-success-rest' | 'bg-accent-success-hover' | 'bg-accent-success-pressed' | 'bg-accent-success-disabled' | 'bg-accent-success-subtle' | 'bg-accent-success-subtle-hover' | 'bg-accent-success-subtle-pressed' | 'bg-accent-success-subtle-disabled' | 'bg-accent-warning-rest' | 'bg-accent-warning-hover' | 'bg-accent-warning-pressed' | 'bg-accent-warning-disabled' | 'bg-accent-warning-subtle' | 'bg-accent-warning-subtle-hover' | 'bg-accent-warning-subtle-pressed' | 'bg-accent-warning-subtle-disabled' | 'bg-accent-error-rest' | 'bg-accent-error-hover' | 'bg-accent-error-pressed' | 'bg-accent-error-disabled' | 'bg-accent-error-subtle' | 'bg-accent-error-subtle-hover' | 'bg-accent-error-subtle-pressed' | 'bg-accent-error-subtle-disabled' | 'bg-accent-yellow-rest' | 'bg-accent-yellow-hover' | 'bg-accent-yellow-pressed' | 'bg-accent-yellow-disabled' | 'bg-accent-yellow-subtle' | 'bg-accent-yellow-subtle-hover' | 'bg-accent-yellow-subtle-pressed' | 'bg-accent-yellow-subtle-disabled' | 'bg-accent-violet-rest' | 'bg-accent-violet-hover' | 'bg-accent-violet-pressed' | 'bg-accent-violet-disabled' | 'bg-accent-violet-subtle' | 'bg-accent-violet-subtle-hover' | 'bg-accent-violet-subtle-disabled' | 'bg-brand-rest' | 'bg-brand-hover' | 'bg-brand-pressed' | 'bg-brand-disabled' | 'bg-brand-disabled-strong' | 'bg-brand-subtle-rest' | 'bg-brand-subtle-hover' | 'bg-brand-subtle-pressed' | 'bg-brand-subtle-disabled' | 'bg-selected-rest' | 'bg-selected-hover' | 'bg-selected-pressed' | 'bg-selected-disabled' | 'bg-selected-bold-rest' | 'bg-selected-bold-hover' | 'bg-selected-bold-pressed' | 'bg-selected-bold-disabled' | 'bg-selected-bold-disabled-strong' | 'bg-table-header' | 'bg-table-body' | 'bg-table-header-overlay' | 'bg-table-header-overlay-hover' | 'bg-table-header-overlay-pressed' | 'bg-table-body-overlay' | 'bg-table-body-overlay-hover' | 'bg-table-body-overlay-pressed' | 'bg-segment-control-container' | 'bg-segment-control-item' | 'bg-segment-control-item-hover' | 'bg-segment-control-item-disabled' | 'bg-segment-control-item-selected' | 'bg-segment-control-item-selected-disabled' | 'bg-neutral-bold-rest' | 'bg-neutral-bold-hover' | 'bg-neutral-bold-pressed' | 'bg-neutral-bold-disabled' | 'bg-neutral-boldest-rest' | 'bg-neutral-boldest-hover' | 'bg-neutral-boldest-pressed' | 'bg-neutral-boldest-disabled' | 'fg-neutral-main' | 'fg-neutral-main-static' | 'fg-neutral-subtle' | 'fg-neutral-subtlest' | 'fg-neutral-disabled' | 'fg-neutral-decoration' | 'fg-neutral-inverse' | 'fg-neutral-inverse-static' | 'fg-accent-info' | 'fg-accent-info-strong' | 'fg-accent-info-disabled' | 'fg-accent-success' | 'fg-accent-success-strong' | 'fg-accent-success-disabled' | 'fg-accent-warning' | 'fg-accent-warning-strong' | 'fg-accent-warning-disabled' | 'fg-accent-error' | 'fg-accent-error-strong' | 'fg-accent-error-disabled' | 'fg-accent-yellow' | 'fg-accent-yellow-strong' | 'fg-accent-yellow-disabled' | 'fg-accent-violet' | 'fg-accent-violet-strong' | 'fg-accent-violet-disabled' | 'fg-link-rest' | 'fg-link-hover' | 'fg-link-pressed' | 'fg-link-disabled' | 'fg-brand-rest' | 'fg-brand-rest-strong' | 'fg-brand-hover' | 'fg-brand-pressed' | 'fg-brand-pressed-strong' | 'fg-brand-disabled' | 'fg-brand-disabled-strong' | 'fg-btn-primary' | 'fg-btn-primary-disabled' | 'fg-checkbox' | 'fg-checkbox-disabled' | 'fg-selected-rest' | 'fg-selected-hover' | 'fg-selected-pressed' | 'fg-selected-pressed-strong' | 'fg-selected-disabled' | 'fg-selected-disabled-strong' | 'fg-selected-bold-rest' | 'fg-focus-ring';

package/dist/components/Typography/helper/utils.d.ts

@@ -0,0 +1,15 @@
+import { TypographySize, TypographyVariant, TypographyAs } from './types';
+/**
+ * Validates and returns the appropriate size for a given variant
+ * @param variant - The typography variant
+ * @param size - The requested size
+ * @returns The validated size or default size if invalid
+ */
+export declare const getValidatedSize: (variant: TypographyVariant | undefined, size: TypographySize | undefined) => TypographySize | undefined;
+/**
+ * Determines the appropriate HTML element for a given typography variant
+ * @param variant - The typography variant
+ * @param as - Optional override for the HTML element
+ * @returns The HTML element tag name
+ */
+export declare const getComponent: (variant: TypographyVariant | undefined, as?: TypographyAs) => TypographyAs;

package/dist/components/Typography/helper/utils.js

@@ -0,0 +1,41 @@
+import { VARIANT_SIZE_RULES as t } from "./constants.js";
+const u = (r, e) => {
+  if (!r || !e) return e;
+  const n = t[r];
+  return !n || n.includes(e) ? e : n.length === 4 ? "md" : n.length === 3 ? "lg" : e;
+}, c = (r, e) => {
+  if (e)
+    return e;
+  switch (r) {
+    case "display":
+      return "h1";
+    case "heading-xs":
+      return "h6";
+    case "heading-sm":
+      return "h5";
+    case "heading-md":
+      return "h4";
+    case "heading-lg":
+      return "h3";
+    case "heading-xl":
+      return "h2";
+    case "heading-2xl":
+      return "h1";
+    case "label":
+      return "label";
+    case "paragraph":
+      return "p";
+    case "body":
+      return "p";
+    case "action-emphasize":
+      return "p";
+    case "action":
+      return "p";
+    default:
+      return "p";
+  }
+};
+export {
+  c as getComponent,
+  u as getValidatedSize
+};

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

@@ -0,0 +1,17 @@
+import { VariantProps } from 'tailwind-variants';
+import { typographyVariants } from './variants';
+import { default as React, ReactNode } from 'react';
+import { TypographyColor, TypographySize, TypographyVariant, TypographyAs } from './helper/types';
+export type TypographyVariants = VariantProps<typeof typographyVariants>;
+export interface TypographyProps extends TypographyVariants, Omit<React.HTMLAttributes<HTMLElement>, 'color'> {
+    children?: ReactNode;
+    size?: TypographySize;
+    variants?: TypographyVariant;
+    as?: TypographyAs;
+    htmlFor?: string;
+    color?: TypographyColor;
+}
+export type TypographyRef = HTMLHeadingElement & HTMLParagraphElement & HTMLLabelElement;
+declare const Typography: React.ForwardRefExoticComponent<TypographyProps & React.RefAttributes<TypographyRef>>;
+export { Typography };
+export default Typography;

package/dist/components/Typography/index.js

@@ -0,0 +1,40 @@
+import { jsx as f } from "react/jsx-runtime";
+import { typographyVariants as n } from "./variants.js";
+import { forwardRef as g } from "react";
+import "clsx";
+import "tailwind-merge";
+import { dataTestId as c } from "../../shared/utils/dataTestId.js";
+import { getValidatedSize as l, getComponent as h } from "./helper/utils.js";
+const T = g(
+  ({
+    children: t,
+    size: r,
+    variants: o,
+    className: p,
+    color: a,
+    as: e,
+    ...m
+  }, i) => {
+    const d = l(o, r), s = h(o, e), { id: y } = c("Typography");
+    return /* @__PURE__ */ f(
+      s,
+      {
+        ref: i,
+        "data-testid": y,
+        className: n({
+          size: d,
+          variants: o,
+          className: p,
+          color: a
+        }),
+        ...m,
+        children: t
+      }
+    );
+  }
+);
+T.displayName = "Typography";
+export {
+  T as Typography,
+  T as default
+};