mcr-design-systems 1.0.0

package/dist/components/Typography/variants.js

@@ -0,0 +1,391 @@
+import { tv as e } from "../../node_modules/tailwind-variants/dist/index.js";
+const s = e({
+  variants: {
+    variants: {
+      display: "font-semibold",
+      "heading-xs": "font-bold",
+      "heading-sm": "font-bold",
+      "heading-md": "font-bold",
+      "heading-lg": "font-bold",
+      "heading-xl": "font-bold",
+      "heading-2xl": "font-bold",
+      label: "font-medium",
+      paragraph: "font-regular",
+      body: "font-regular",
+      action: "font-semibold",
+      "action-emphasize": "font-medium",
+      "action-up": "font-semibold",
+      "action-emphasize-up": "font-medium"
+    },
+    size: {
+      xs: "",
+      sm: "",
+      md: "",
+      lg: "",
+      xl: "",
+      "2xl": ""
+    },
+    color: {
+      default: "!text-fg-neutral-main",
+      white: "!text-fg-white",
+      black: "!text-fg-black",
+      transparent: "!text-fg-transparent",
+      // for bg
+      "bg-level-1": "!text-bg-level-1",
+      "bg-level-2": "!text-bg-level-2",
+      "bg-level-3": "!text-bg-level-3",
+      "bg-level-4": "!text-bg-level-4",
+      "bg-level-5": "!text-bg-level-5",
+      "bg-input": "!text-bg-input",
+      "bg-input-disabled": "!text-bg-input-disabled",
+      "bg-tooltip": "!text-bg-tooltip",
+      "bg-dialog": "!text-bg-dialog",
+      "bg-card": "!text-bg-card",
+      "bg-neutral-rest": "!text-bg-neutral-rest",
+      "bg-neutral-hover": "!text-bg-neutral-hover",
+      "bg-neutral-pressed": "!text-bg-neutral-pressed",
+      "bg-neutral-disabled": "!text-bg-neutral-disabled",
+      "bg-neutral-subtle": "!text-bg-neutral-subtle",
+      "bg-accent-info-rest": "!text-bg-accent-info-rest",
+      "bg-accent-info-hover": "!text-bg-accent-info-hover",
+      "bg-accent-info-pressed": "!text-bg-accent-info-pressed",
+      "bg-accent-info-disabled": "!text-bg-accent-info-disabled",
+      "bg-accent-info-subtle": "!text-bg-accent-info-subtle",
+      "bg-accent-info-subtle-hover": "!text-bg-accent-info-subtle-hover",
+      "bg-accent-info-subtle-pressed": "!text-bg-accent-info-subtle-pressed",
+      "bg-accent-info-subtle-disabled": "!text-bg-accent-info-subtle-disabled",
+      "bg-accent-success-rest": "!text-bg-accent-success-rest",
+      "bg-accent-success-hover": "!text-bg-accent-success-hover",
+      "bg-accent-success-pressed": "!text-bg-accent-success-pressed",
+      "bg-accent-success-disabled": "!text-bg-accent-success-disabled",
+      "bg-accent-success-subtle": "!text-bg-accent-success-subtle",
+      "bg-accent-success-subtle-hover": "!text-bg-accent-success-subtle-hover",
+      "bg-accent-success-subtle-pressed": "!text-bg-accent-success-subtle-pressed",
+      "bg-accent-success-subtle-disabled": "!text-bg-accent-success-subtle-disabled",
+      "bg-accent-warning-rest": "!text-bg-accent-warning-rest",
+      "bg-accent-warning-hover": "!text-bg-accent-warning-hover",
+      "bg-accent-warning-pressed": "!text-bg-accent-warning-pressed",
+      "bg-accent-warning-disabled": "!text-bg-accent-warning-disabled",
+      "bg-accent-warning-subtle": "!text-bg-accent-warning-subtle",
+      "bg-accent-warning-subtle-hover": "!text-bg-accent-warning-subtle-hover",
+      "bg-accent-warning-subtle-pressed": "!text-bg-accent-warning-subtle-pressed",
+      "bg-accent-warning-subtle-disabled": "!text-bg-accent-warning-subtle-disabled",
+      "bg-accent-error-rest": "!text-bg-accent-error-rest",
+      "bg-accent-error-hover": "!text-bg-accent-error-hover",
+      "bg-accent-error-pressed": "!text-bg-accent-error-pressed",
+      "bg-accent-error-disabled": "!text-bg-accent-error-disabled",
+      "bg-accent-error-subtle": "!text-bg-accent-error-subtle",
+      "bg-accent-error-subtle-hover": "!text-bg-accent-error-subtle-hover",
+      "bg-accent-error-subtle-pressed": "!text-bg-accent-error-subtle-pressed",
+      "bg-accent-error-subtle-disabled": "!text-bg-accent-error-subtle-disabled",
+      "bg-accent-yellow-rest": "!text-bg-accent-yellow-rest",
+      "bg-accent-yellow-hover": "!text-bg-accent-yellow-hover",
+      "bg-accent-yellow-pressed": "!text-bg-accent-yellow-pressed",
+      "bg-accent-yellow-disabled": "!text-bg-accent-yellow-disabled",
+      "bg-accent-yellow-subtle": "!text-bg-accent-yellow-subtle",
+      "bg-accent-yellow-subtle-hover": "!text-bg-accent-yellow-subtle-hover",
+      "bg-accent-yellow-subtle-pressed": "!text-bg-accent-yellow-subtle-pressed",
+      "bg-accent-yellow-subtle-disabled": "!text-bg-accent-yellow-subtle-disabled",
+      "bg-accent-violet-rest": "!text-bg-accent-violet-rest",
+      "bg-accent-violet-hover": "!text-bg-accent-violet-hover",
+      "bg-accent-violet-pressed": "!text-bg-accent-violet-pressed",
+      "bg-accent-violet-disabled": "!text-bg-accent-violet-disabled",
+      "bg-accent-violet-subtle": "!text-bg-accent-violet-subtle",
+      "bg-accent-violet-subtle-hover": "!text-bg-accent-violet-subtle-hover",
+      "bg-accent-violet-subtle-disabled": "!text-bg-accent-violet-subtle-disabled",
+      "bg-brand-rest": "!text-bg-brand-rest",
+      "bg-brand-hover": "!text-bg-brand-hover",
+      "bg-brand-pressed": "!text-bg-brand-pressed",
+      "bg-brand-disabled": "!text-bg-brand-disabled",
+      "bg-brand-disabled-strong": "!text-bg-brand-disabled-strong",
+      "bg-brand-subtle-rest": "!text-bg-brand-subtle-rest",
+      "bg-brand-subtle-hover": "!text-bg-brand-subtle-hover",
+      "bg-brand-subtle-pressed": "!text-bg-brand-subtle-pressed",
+      "bg-brand-subtle-disabled": "!text-bg-brand-subtle-disabled",
+      "bg-selected-rest": "!text-bg-selected-rest",
+      "bg-selected-hover": "!text-bg-selected-hover",
+      "bg-selected-pressed": "!text-bg-selected-pressed",
+      "bg-selected-disabled": "!text-bg-selected-disabled",
+      "bg-selected-bold-rest": "!text-bg-selected-bold-rest",
+      "bg-selected-bold-hover": "!text-bg-selected-bold-hover",
+      "bg-selected-bold-pressed": "!text-bg-selected-bold-pressed",
+      "bg-selected-bold-disabled": "!text-bg-selected-bold-disabled",
+      "bg-selected-bold-disabled-strong": "!text-bg-selected-bold-disabled-strong",
+      "bg-table-header": "!text-bg-table-header",
+      "bg-table-body": "!text-bg-table-body",
+      "bg-table-header-overlay": "!text-bg-table-header-overlay",
+      "bg-table-header-overlay-hover": "!text-bg-table-header-overlay-hover",
+      "bg-table-header-overlay-pressed": "!text-bg-table-header-overlay-pressed",
+      "bg-table-body-overlay": "!text-bg-table-body-overlay",
+      "bg-table-body-overlay-hover": "!text-bg-table-body-overlay-hover",
+      "bg-table-body-overlay-pressed": "!text-bg-table-body-overlay-pressed",
+      "bg-segment-control-container": "!text-bg-segment-control-container",
+      "bg-segment-control-item": "!text-bg-segment-control-item",
+      "bg-segment-control-item-hover": "!text-bg-segment-control-item-hover",
+      "bg-segment-control-item-disabled": "!text-bg-segment-control-item-disabled",
+      "bg-segment-control-item-selected": "!text-bg-segment-control-item-selected",
+      "bg-segment-control-item-selected-disabled": "!text-bg-segment-control-item-selected-disabled",
+      "bg-neutral-bold-rest": "!text-bg-neutral-bold-rest",
+      "bg-neutral-bold-hover": "!text-bg-neutral-bold-hover",
+      "bg-neutral-bold-pressed": "!text-bg-neutral-bold-pressed",
+      "bg-neutral-bold-disabled": "!text-bg-neutral-bold-disabled",
+      "bg-neutral-boldest-rest": "!text-bg-neutral-boldest-rest",
+      "bg-neutral-boldest-hover": "!text-bg-neutral-boldest-hover",
+      "bg-neutral-boldest-pressed": "!text-bg-neutral-boldest-pressed",
+      "bg-neutral-boldest-disabled": "!text-bg-neutral-boldest-disabled",
+      // for fg
+      "fg-neutral-main": "!text-fg-neutral-main",
+      "fg-neutral-main-static": "!text-fg-neutral-main-static",
+      "fg-neutral-subtle": "!text-fg-neutral-subtle",
+      "fg-neutral-subtlest": "!text-fg-neutral-subtlest",
+      "fg-neutral-disabled": "!text-fg-neutral-disabled",
+      "fg-neutral-decoration": "!text-fg-neutral-decoration",
+      "fg-neutral-inverse": "!text-fg-neutral-inverse",
+      "fg-neutral-inverse-static": "!text-fg-neutral-inverse-static",
+      "fg-accent-info": "!text-fg-accent-info",
+      "fg-accent-info-strong": "!text-fg-accent-info-strong",
+      "fg-accent-info-disabled": "!text-fg-accent-info-disabled",
+      "fg-accent-success": "!text-fg-accent-success",
+      "fg-accent-success-strong": "!text-fg-accent-success-strong",
+      "fg-accent-success-disabled": "!text-fg-accent-success-disabled",
+      "fg-accent-warning": "!text-fg-accent-warning",
+      "fg-accent-warning-strong": "!text-fg-accent-warning-strong",
+      "fg-accent-warning-disabled": "!text-fg-accent-warning-disabled",
+      "fg-accent-error": "!text-fg-accent-error",
+      "fg-accent-error-strong": "!text-fg-accent-error-strong",
+      "fg-accent-error-disabled": "!text-fg-accent-error-disabled",
+      "fg-accent-yellow": "!text-fg-accent-yellow",
+      "fg-accent-yellow-strong": "!text-fg-accent-yellow-strong",
+      "fg-accent-yellow-disabled": "!text-fg-accent-yellow-disabled",
+      "fg-accent-violet": "!text-fg-accent-violet",
+      "fg-accent-violet-strong": "!text-fg-accent-violet-strong",
+      "fg-accent-violet-disabled": "!text-fg-accent-violet-disabled",
+      "fg-link-rest": "!text-fg-link-rest",
+      "fg-link-hover": "!text-fg-link-hover",
+      "fg-link-pressed": "!text-fg-link-pressed",
+      "fg-link-disabled": "!text-fg-link-disabled",
+      "fg-brand-rest": "!text-fg-brand-rest",
+      "fg-brand-rest-strong": "!text-fg-brand-rest-strong",
+      "fg-brand-hover": "!text-fg-brand-hover",
+      "fg-brand-pressed": "!text-fg-brand-pressed",
+      "fg-brand-pressed-strong": "!text-fg-brand-pressed-strong",
+      "fg-brand-disabled": "!text-fg-brand-disabled",
+      "fg-brand-disabled-strong": "!text-fg-brand-disabled-strong",
+      "fg-btn-primary": "!text-fg-btn-primary",
+      "fg-btn-primary-disabled": "!text-fg-btn-primary-disabled",
+      "fg-checkbox": "!text-fg-checkbox",
+      "fg-checkbox-disabled": "!text-fg-checkbox-disabled",
+      "fg-selected-rest": "!text-fg-selected-rest",
+      "fg-selected-hover": "!text-fg-selected-hover",
+      "fg-selected-pressed": "!text-fg-selected-pressed",
+      "fg-selected-pressed-strong": "!text-fg-selected-pressed-strong",
+      "fg-selected-disabled": "!text-fg-selected-disabled",
+      "fg-selected-disabled-strong": "!text-fg-selected-disabled-strong",
+      "fg-selected-bold-rest": "!text-fg-selected-bold-rest",
+      "fg-focus-ring": "!text-fg-focus-ring"
+    }
+  },
+  defaultVariants: {
+    size: "md",
+    variants: "paragraph"
+  },
+  compoundVariants: [
+    // Body variants
+    {
+      variants: "body",
+      size: "xs",
+      className: "text-base-xs font-base-xs leading-base-xs"
+    },
+    {
+      variants: "body",
+      size: "sm",
+      className: "text-base-sm font-base-sm leading-base-sm"
+    },
+    {
+      variants: "body",
+      size: "md",
+      className: "text-base-md font-base-md leading-base-md"
+    },
+    {
+      variants: "body",
+      size: "lg",
+      className: "text-base-lg font-base-lg leading-base-lg"
+    },
+    // Action variants for lowercase
+    {
+      variants: "action",
+      size: "xs",
+      className: "text-base-xs font-action-xs leading-base-xs"
+    },
+    {
+      variants: "action",
+      size: "sm",
+      className: "text-base-sm font-action-sm leading-base-sm"
+    },
+    {
+      variants: "action",
+      size: "md",
+      className: "text-base-md font-action-md leading-base-md"
+    },
+    {
+      variants: "action",
+      size: "lg",
+      className: "text-base-lg font-action-lg leading-base-lg"
+    },
+    // Action Emphasize variants for lowercase
+    {
+      variants: "action-emphasize",
+      size: "xs",
+      className: "text-base-xs font-body-emphasize-xs leading-base-xs"
+    },
+    {
+      variants: "action-emphasize",
+      size: "sm",
+      className: "text-base-sm font-body-emphasize-sm leading-base-sm"
+    },
+    {
+      variants: "action-emphasize",
+      size: "md",
+      className: "text-base-md font-body-emphasize-md leading-base-md"
+    },
+    {
+      variants: "action-emphasize",
+      size: "lg",
+      className: "text-base-lg font-body-emphasize-lg leading-base-lg"
+    },
+    // Action variants for uppercase
+    {
+      variants: "action-up",
+      size: "xs",
+      className: "text-base-xs font-action-xs uppercase leading-base-xs"
+    },
+    {
+      variants: "action-up",
+      size: "sm",
+      className: "text-base-sm font-action-sm uppercase leading-base-sm"
+    },
+    {
+      variants: "action-up",
+      size: "md",
+      className: "text-base-md font-action-md uppercase leading-base-md"
+    },
+    {
+      variants: "action-up",
+      size: "lg",
+      className: "text-base-lg font-action-lg uppercase leading-base-lg"
+    },
+    // Action Emphasize variants for uppercase
+    {
+      variants: "action-emphasize-up",
+      size: "xs",
+      className: "text-base-xs font-body-emphasize-xs uppercase leading-base-xs"
+    },
+    {
+      variants: "action-emphasize-up",
+      size: "sm",
+      className: "text-base-sm font-body-emphasize-sm uppercase leading-base-sm"
+    },
+    {
+      variants: "action-emphasize-up",
+      size: "md",
+      className: "text-base-md font-body-emphasize-md uppercase leading-base-md"
+    },
+    {
+      variants: "action-emphasize-up",
+      size: "lg",
+      className: "text-base-lg font-body-emphasize-lg uppercase leading-base-lg"
+    },
+    // Heading variants
+    {
+      variants: "heading-xs",
+      size: "xs",
+      className: "text-heading-xs font-heading-xs leading-heading-xs"
+    },
+    {
+      variants: "heading-sm",
+      size: "sm",
+      className: "text-heading-sm font-heading-sm leading-heading-sm"
+    },
+    {
+      variants: "heading-md",
+      size: "md",
+      className: "text-heading-md font-heading-md leading-heading-md"
+    },
+    {
+      variants: "heading-lg",
+      size: "lg",
+      className: "text-heading-lg font-heading-lg leading-heading-lg"
+    },
+    {
+      variants: "heading-xl",
+      size: "xl",
+      className: "text-heading-xl font-heading-xl leading-heading-xl"
+    },
+    {
+      variants: "heading-2xl",
+      size: "2xl",
+      className: "text-heading-2xl font-heading-2xl leading-heading-2xl"
+    },
+    // Display variants
+    {
+      variants: "display",
+      size: "lg",
+      className: "text-display-lg font-display-lg leading-display-lg"
+    },
+    {
+      variants: "display",
+      size: "xl",
+      className: "text-display-xl font-display-xl leading-display-xl"
+    },
+    {
+      variants: "display",
+      size: "2xl",
+      className: "text-display-2xl font-display-2xl leading-display-2xl"
+    },
+    // Label variants
+    {
+      variants: "label",
+      size: "xs",
+      className: "text-base-xs font-action-xs leading-base-xs"
+    },
+    {
+      variants: "label",
+      size: "sm",
+      className: "text-base-sm font-action-sm leading-base-sm"
+    },
+    {
+      variants: "label",
+      size: "md",
+      className: "text-base-md font-action-md leading-base-md"
+    },
+    {
+      variants: "label",
+      size: "lg",
+      className: "text-base-lg font-action-lg leading-base-lg"
+    },
+    // for default
+    {
+      variants: "paragraph",
+      size: "xs",
+      className: "text-base-xs font-action-xs leading-base-xs"
+    },
+    {
+      variants: "paragraph",
+      size: "sm",
+      className: "text-base-sm font-action-sm leading-base-sm"
+    },
+    {
+      variants: "paragraph",
+      size: "md",
+      className: "text-base-md font-action-md leading-base-md"
+    },
+    {
+      variants: "paragraph",
+      size: "lg",
+      className: "text-base-lg font-action-lg leading-base-lg"
+    }
+  ]
+});
+export {
+  s as typographyVariants
+};

package/dist/index.d.ts

@@ -0,0 +1,38 @@
+export { Alert } from './components/Alert';
+export type { AlertProps } from './components/Alert';
+export { default as Button } from './components/Button';
+export { default as Input } from './components/Input';
+export { default as Avatar } from './components/Avatar';
+export type { AvatarProps } from './components/Avatar';
+export { default as AvatarGroup } from './components/AvatarGroup';
+export { default as Loading } from './components/Loading';
+export type { LoadingProps } from './components/Loading';
+export { default as Box } from './components/Box';
+export type { BoxProps } from './components/Box';
+export { Popover } from './components/Popover';
+export type { PopoverProps } from './components/Popover';
+export { default as Dropdown } from './components/Dropdown';
+export type { DropdownProps } from './components/Dropdown';
+export { default as MenuItem } from './components/MenuItem';
+export type { MenuItemProps } from './components/MenuItem';
+export { Typography } from './components/Typography';
+export type { TypographyProps } from './components/Typography';
+export { Toast, ToastProvider as RadixToastProvider, ToastViewport, ToastAction, ToastClose, } from './components/Toast';
+export { ToastProvider } from './components/Toast/ToastProvider';
+export { useToast } from './components/Toast/hooks';
+export type { ToastProps } from './components/Toast';
+export type { ToastProviderProps } from './components/Toast/ToastProvider';
+export type { RadioProps } from './components/Radio';
+export { default as Radio } from './components/Radio';
+export type { SwitchProps } from './components/Switch';
+export { default as Switch } from './components/Switch';
+export { default as Sidebar } from './components/Sidebar';
+export type { SidebarProps, SidebarItemProps, SidebarGroupProps, SidebarUserProps, } from './components/Sidebar';
+export { default as Tabs } from './components/Tab';
+export type { TabProviderProps, TabListProps, TabProps, TabPanelProps, TabItem, } from './components/Tab';
+export { Tooltip, TooltipProvider } from './components/Tooltip';
+export type { TooltipProps } from './components/Tooltip';
+export { Icons } from './components/Icon';
+export type { IconProps, IconName } from './components/Icon';
+export * from './tokens';
+export { dataTestId, generateTestId } from './shared/utils';

package/dist/index.js

@@ -0,0 +1,78 @@
+import { Alert as a } from "./components/Alert/index.js";
+import { default as f } from "./components/Button/index.js";
+import { default as s } from "./components/Input/index.js";
+import { default as i } from "./components/Avatar/index.js";
+import { default as l } from "./components/AvatarGroup/index.js";
+import { default as T } from "./components/Loading/index.js";
+import { Box as g } from "./components/Box/index.js";
+import { Popover as h } from "./components/Popover/index.js";
+import { Dropdown as C } from "./components/Dropdown/index.js";
+import { MenuItem as P } from "./components/MenuItem/index.js";
+import { Typography as S } from "./components/Typography/index.js";
+import { ToastProvider as y, Toast as A, ToastAction as V, ToastClose as R, ToastViewport as B } from "./components/Toast/index.js";
+import { ToastProvider as z } from "./components/Toast/ToastProvider.js";
+import { useToast as G } from "./components/Toast/hooks.js";
+import { default as M } from "./components/Radio/index.js";
+import { Switch as j } from "./components/Switch/index.js";
+import { Sidebar as E } from "./components/Sidebar/index.js";
+import { default as H } from "./components/Tab/index.js";
+import { Tooltip as K, TooltipProvider as N } from "./components/Tooltip/index.js";
+import { default as Q } from "./components/Icon/Icon.js";
+import { getColorVar as X, getSemanticColorVar as Y, getSpacingVar as Z } from "./tokens/index.js";
+import "clsx";
+import "tailwind-merge";
+import { dataTestId as $, generateTestId as oo } from "./shared/utils/dataTestId.js";
+import { alphaColors as eo, baseColors as to, colorScales as ao } from "./tokens/primitives/colors.js";
+import { typography as fo } from "./tokens/primitives/typography.js";
+import { borderRadius as so, shadows as xo, spacing as io, transitions as lo, zIndex as no } from "./tokens/primitives/layout.js";
+import { ThemeProvider as uo } from "./tokens/theme.js";
+import { useTheme as co } from "./tokens/hooks.js";
+import { themeUtils as vo } from "./tokens/utils.js";
+import { generateTailwindConfig as Io } from "./tokens/tailwind-config.js";
+import { semanticTokens as wo } from "./tokens/semantic.js";
+export {
+  a as Alert,
+  i as Avatar,
+  l as AvatarGroup,
+  g as Box,
+  f as Button,
+  C as Dropdown,
+  Q as Icons,
+  s as Input,
+  T as Loading,
+  P as MenuItem,
+  h as Popover,
+  M as Radio,
+  y as RadixToastProvider,
+  E as Sidebar,
+  j as Switch,
+  H as Tabs,
+  uo as ThemeProvider,
+  A as Toast,
+  V as ToastAction,
+  R as ToastClose,
+  z as ToastProvider,
+  B as ToastViewport,
+  K as Tooltip,
+  N as TooltipProvider,
+  S as Typography,
+  eo as alphaColors,
+  to as baseColors,
+  so as borderRadius,
+  ao as colorScales,
+  $ as dataTestId,
+  Io as generateTailwindConfig,
+  oo as generateTestId,
+  X as getColorVar,
+  Y as getSemanticColorVar,
+  Z as getSpacingVar,
+  wo as semanticTokens,
+  xo as shadows,
+  io as spacing,
+  vo as themeUtils,
+  lo as transitions,
+  fo as typography,
+  co as useTheme,
+  G as useToast,
+  no as zIndex
+};