colibri-ui 0.8.86 → 0.8.87

package/esm/Typography/index.js

@@ -3,6 +3,14 @@ import React from 'react';
 import clsx from 'clsx';
 import styles from './Typography.module.css';
 
+const getSizeClassNames = size => {
+  if (!size) return [];
+  if (typeof size === "string") return [styles[`size_${size}`]];
+  return Object.entries(size).flatMap(([breakpoint, name]) => {
+    if (!name) return [];
+    return [styles[breakpoint === "base" ? `size_${name}` : `size_${breakpoint}_${name}`]];
+  });
+};
 const Typography = _a => {
   var {
       tag: Component = "span",
@@ -19,8 +27,7 @@ const Typography = _a => {
     style: lines ? Object.assign(Object.assign({}, style), {
       "--typography-lines": lines
     }) : Object.assign({}, style),
-    className: clsx({
-      [styles[`size_${size}`]]: Boolean(size),
+    className: clsx(getSizeClassNames(size), {
       [styles[`font-weight_${fontWeight}`]]: Boolean(fontWeight),
       [styles[`variant_${variant}`]]: Boolean(variant),
       [styles.clamp]: Boolean(lines)

package/esm/Typography/index.props.d.ts

@@ -1,7 +1,15 @@
 import type { CSSProperties } from "react";
+import type { BreakpointName } from "../Theme";
 export type TypographyVariant = "primary" | "secondary" | "tertiary" | "disabled" | "inverse" | "alert" | "success" | "warning" | "info";
 export type TypographyFontWeight = "normal" | "regular" | "medium" | "semibold" | "bold";
 export type TypographySize = "xs" | "s" | "m" | "l" | "text-xs" | "text-sm" | "text-md" | "text-lg" | "heading-sm" | "heading-md" | "heading-lg" | "heading-xl" | "display-sm" | "display-md" | "display-lg" | "display-xl" | "display-s" | "display-m" | "display-l" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6";
+/**
+ * Size per breakpoint, mobile first: `base` applies to every width, each
+ * breakpoint from its width up (`BREAKPOINTS` in Theme).
+ */
+export type TypographyResponsiveSize = {
+    base?: TypographySize;
+} & Partial<Record<BreakpointName, TypographySize>>;
 export type TypographyTag = "span" | "label" | "legend" | "p" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "s";
 export type TypographyProps = {
     className?: string;
@@ -10,7 +18,8 @@ export type TypographyProps = {
     id?: string;
     tag?: TypographyTag;
     variant?: TypographyVariant;
-    size?: TypographySize;
+    /** One size, or sizes per breakpoint: `{ base: "xs", sm: "m" }`. */
+    size?: TypographySize | TypographyResponsiveSize;
     fontWeight?: TypographyFontWeight;
     /** Limits the text to this many lines and ends the last one with an ellipsis. */
     lines?: number;

package/esm/index.d.ts

@@ -87,7 +87,7 @@ export type { TimeSelectProps } from "./TimeSelect/index.props";
 export { Tooltip } from "./Tooltip";
 export type { TooltipProps } from "./Tooltip/index.props";
 export { Typography } from "./Typography";
-export type { TypographyProps } from "./Typography/index.props";
+export type { TypographyProps, TypographyResponsiveSize, } from "./Typography/index.props";
 export { useMediaSizes } from "./hooks/useMediaSizes";
 export { useScrollLock } from "./hooks/useScrollLock";
 export * from "./Icons";

package/index.d.ts

@@ -87,7 +87,7 @@ export type { TimeSelectProps } from "./TimeSelect/index.props";
 export { Tooltip } from "./Tooltip";
 export type { TooltipProps } from "./Tooltip/index.props";
 export { Typography } from "./Typography";
-export type { TypographyProps } from "./Typography/index.props";
+export type { TypographyProps, TypographyResponsiveSize, } from "./Typography/index.props";
 export { useMediaSizes } from "./hooks/useMediaSizes";
 export { useScrollLock } from "./hooks/useScrollLock";
 export * from "./Icons";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "colibri-ui",
-  "version": "0.8.86",
+  "version": "0.8.87",
   "description": "React UI components library",
   "main": "index.js",
   "types": "index.d.ts",