@react-md/core 1.0.0-next.11 → 1.0.0-next.12

package/src/typography/Typography.tsx

@@ -1,154 +1,14 @@
-import { cnb } from "cnbuilder";
 import {
   forwardRef,
   type ElementType,
   type HTMLAttributes,
   type ReactElement,
 } from "react";
-import { cssUtils, type TextCssUtilsOptions } from "../cssUtils.js";
-
-/**
- * A union of all the material design provided typography styles. When used with
- * the Typography component, this will generate the correct typography className
- * to apply and determine what component to be rendered as if none was provided.
- *
- * @remarks \@since 4.0.0
- */
-export type TypographyType =
-  | "headline-1"
-  | "headline-2"
-  | "headline-3"
-  | "headline-4"
-  | "headline-5"
-  | "headline-6"
-  | "subtitle-1"
-  | "subtitle-2"
-  | "body-1"
-  | "body-2"
-  | "caption"
-  | "overline";
-
-/** @remarks \@since 6.0.0 */
-export interface TypographyClassNameOptions extends TextCssUtilsOptions {
-  className?: string;
-
-  /**
-   * @see {@link TypographyType}
-   * @defaultValue `"body-1"`
-   */
-  type?: TypographyType;
-}
-
-/** @remarks \@since 6.0.0 */
-export type NullableTypographyClassNameOptions = Omit<
-  TypographyClassNameOptions,
-  "type"
-> & {
-  /**
-   * When using the {@link typography} class name utility, the `type` can be set
-   * to `null` to inherit font.
-   *
-   * @see {@link TypographyType}
-   * @defaultValue `"body-1"`
-   */
-  type?: TypographyType | null;
-};
-
-/**
- * Get a typography class name based on different typography options. This is
- * only useful if you are unable to use the {@link Typography} component for
- * some reason.
- *
- * @example
- * Simple Example
- * ```ts
- * import { typography } from "@react-md/core";
- *
- * function Example() {
- *   return (
- *     <>
- *       <h1 className={typography({ type: "headline-1" })} />
- *       <h2 className={typography({ type: "headline-2" })} />
- *       <h3 className={typography({ type: "headline-3" })} />
- *       <h4 className={typography({ type: "headline-4" })} />
- *       <h5 className={typography({ type: "headline-5" })} />
- *       <h6 className={typography({ type: "headline-6" })} />
- *       <h5 className={typography({ type: "subtitle-1" })} />
- *       <h6 className={typography({ type: "subtitle-2" })} />
- *       <p className={typography()} />
- *       <p className={typography({ type "body-1" })} />
- *       <p className={typography({ type "body-1" })} />
- *       <caption className={typography({ type: "caption" })} />
- *       <span className={typography({ type: "overline" })} />
- *     </>
- *   );
- * }
- * ```
- *
- * @example
- * Applying Additional Styles
- * ```ts
- * import { typography } from "@react-md/core";
- *
- * function Example() {
- *   return (
- *     <>
- *       <h1
- *         // only maintain the default margin-bottom
- *         className={typography({
- *           type: "headline-1",
- *           margin: "bottom",
- *         })}
- *        />
- *
- *       <h2
- *         // remove all default margin
- *         className={typography({
- *           type: "headline-2",
- *           margin: "none",
- *         })}
- *       />
- *
- *       <h3
- *         // only maintain the default margin-top
- *         className={typography({
- *           type: "headline-3",
- *           margin: "top",
- *         })}
- *       />
- *
- *       <p
- *         // center the text, set to bold, and only maintain default margin-bottom
- *         className={typography({
- *           type "subtitle-1",
- *           align: "center",
- *           margin: "bottom",
- *         })}
- *       />
- *     </>
- *   );
- * }
- * ```
- *
- * @see {@link Typography}
- * @param options - An optional object of options used to create the typography
- * class name.
- * @returns a typography class name string
- * @remarks \@since 6.0.0
- */
-export function typography(
-  options: NullableTypographyClassNameOptions = {}
-): string {
-  const { type = "body-1" } = options;
-
-  // using `&&` instead of `bem` since the latest version of typescript does not
-  // support setting the same object key (empty string)
-  return cnb(
-    "rmd-typography",
-    type && `rmd-typography--${type}`,
-    cssUtils(options)
-  );
-}
+import {
+  typography,
+  type TypographyClassNameOptions,
+  type TypographyType,
+} from "./typographyStyles.js";
 
 /**
  * A union of the default supported elements that the `Typography` component can

package/src/typography/__tests__/TextContainer.tsx

@@ -2,8 +2,9 @@ import { describe, expect, it } from "@jest/globals";
 import { createRef } from "react";
 import { render, screen } from "../../test-utils/index.js";
 
-import { textContainer, TextContainer } from "../TextContainer.js";
+import { TextContainer } from "../TextContainer.js";
 import { Typography } from "../Typography.js";
+import { textContainer } from "../textContainerStyles.js";
 
 describe("TextContainer", () => {
   it("should render correctly and apply the correct class names", () => {

package/src/typography/__tests__/Typography.tsx

@@ -2,7 +2,8 @@ import { describe, expect, it } from "@jest/globals";
 import { type HTMLAttributes, type ReactElement } from "react";
 import { render, screen } from "../../test-utils/index.js";
 
-import { typography, Typography, type TypographyType } from "../Typography.js";
+import { Typography } from "../Typography.js";
+import { typography, type TypographyType } from "../typographyStyles.js";
 
 describe("Typography", () => {
   it("should default to rendering as a paragraph and body-1 styles", () => {

package/src/typography/textContainerStyles.ts

@@ -0,0 +1,53 @@
+import { cnb } from "cnbuilder";
+import { bem } from "../utils/bem.js";
+
+declare module "react" {
+  interface CSSProperties {
+    "--rmd-line-length"?: string | number;
+    "--rmd-text-container-padding"?: string | number;
+  }
+}
+
+const styles = bem("rmd-text-container");
+
+/**
+ * @remarks \@since 6.0.0
+ */
+export interface TextContainerClassNameOptions {
+  /**
+   * An optional className to merge with typography text container styles.
+   */
+  className?: string;
+}
+
+/**
+ * @example
+ * Simple Example
+ * ```tsx
+ * import { textContainer, Typography } from "@react-md/core";
+ *
+ * function Example() {
+ *   return (
+ *     <main className={textContainer()}>
+ *       <Typography type="headline-1">Heading</Typography>
+ *       <Typography>
+ *         Pretend this is a giant paragraph of text that wraps multiple lines.
+ *       </Typography>
+ *       <Typography>
+ *         Pretend this is another giant paragraph of text that wraps multiple
+ *         lines.
+ *       </Typography>
+ *     </main>
+ *   ):
+ * }
+ * ```
+ *
+ * @remarks \@since 6.0.0
+ */
+export function textContainer(
+  options: TextContainerClassNameOptions = {}
+): string {
+  const { className } = options;
+
+  return cnb(styles(), className);
+}

package/src/typography/typographyStyles.ts

@@ -0,0 +1,145 @@
+import { cnb } from "cnbuilder";
+import { cssUtils, type TextCssUtilsOptions } from "../cssUtils.js";
+
+/**
+ * A union of all the material design provided typography styles. When used with
+ * the Typography component, this will generate the correct typography className
+ * to apply and determine what component to be rendered as if none was provided.
+ *
+ * @remarks \@since 4.0.0
+ */
+export type TypographyType =
+  | "headline-1"
+  | "headline-2"
+  | "headline-3"
+  | "headline-4"
+  | "headline-5"
+  | "headline-6"
+  | "subtitle-1"
+  | "subtitle-2"
+  | "body-1"
+  | "body-2"
+  | "caption"
+  | "overline";
+
+/** @remarks \@since 6.0.0 */
+export interface TypographyClassNameOptions extends TextCssUtilsOptions {
+  className?: string;
+
+  /**
+   * @see {@link TypographyType}
+   * @defaultValue `"body-1"`
+   */
+  type?: TypographyType;
+}
+
+/** @remarks \@since 6.0.0 */
+export type NullableTypographyClassNameOptions = Omit<
+  TypographyClassNameOptions,
+  "type"
+> & {
+  /**
+   * When using the {@link typography} class name utility, the `type` can be set
+   * to `null` to inherit font.
+   *
+   * @see {@link TypographyType}
+   * @defaultValue `"body-1"`
+   */
+  type?: TypographyType | null;
+};
+
+/**
+ * Get a typography class name based on different typography options. This is
+ * only useful if you are unable to use the {@link Typography} component for
+ * some reason.
+ *
+ * @example
+ * Simple Example
+ * ```ts
+ * import { typography } from "@react-md/core";
+ *
+ * function Example() {
+ *   return (
+ *     <>
+ *       <h1 className={typography({ type: "headline-1" })} />
+ *       <h2 className={typography({ type: "headline-2" })} />
+ *       <h3 className={typography({ type: "headline-3" })} />
+ *       <h4 className={typography({ type: "headline-4" })} />
+ *       <h5 className={typography({ type: "headline-5" })} />
+ *       <h6 className={typography({ type: "headline-6" })} />
+ *       <h5 className={typography({ type: "subtitle-1" })} />
+ *       <h6 className={typography({ type: "subtitle-2" })} />
+ *       <p className={typography()} />
+ *       <p className={typography({ type "body-1" })} />
+ *       <p className={typography({ type "body-1" })} />
+ *       <caption className={typography({ type: "caption" })} />
+ *       <span className={typography({ type: "overline" })} />
+ *     </>
+ *   );
+ * }
+ * ```
+ *
+ * @example
+ * Applying Additional Styles
+ * ```ts
+ * import { typography } from "@react-md/core";
+ *
+ * function Example() {
+ *   return (
+ *     <>
+ *       <h1
+ *         // only maintain the default margin-bottom
+ *         className={typography({
+ *           type: "headline-1",
+ *           margin: "bottom",
+ *         })}
+ *        />
+ *
+ *       <h2
+ *         // remove all default margin
+ *         className={typography({
+ *           type: "headline-2",
+ *           margin: "none",
+ *         })}
+ *       />
+ *
+ *       <h3
+ *         // only maintain the default margin-top
+ *         className={typography({
+ *           type: "headline-3",
+ *           margin: "top",
+ *         })}
+ *       />
+ *
+ *       <p
+ *         // center the text, set to bold, and only maintain default margin-bottom
+ *         className={typography({
+ *           type "subtitle-1",
+ *           align: "center",
+ *           margin: "bottom",
+ *         })}
+ *       />
+ *     </>
+ *   );
+ * }
+ * ```
+ *
+ * @see {@link Typography}
+ * @param options - An optional object of options used to create the typography
+ * class name.
+ * @returns a typography class name string
+ * @remarks \@since 6.0.0
+ */
+export function typography(
+  options: NullableTypographyClassNameOptions = {}
+): string {
+  const { type = "body-1" } = options;
+
+  // using `&&` instead of `bem` since the latest version of typescript does not
+  // support setting the same object key (empty string)
+  return cnb(
+    "rmd-typography",
+    type && `rmd-typography--${type}`,
+    cssUtils(options)
+  );
+}

package/tsconfig.types.json

@@ -7,6 +7,6 @@
     "declarationDir": "./dist",
     "emitDeclarationOnly": true
   },
-  "include": ["src/**.ts", "src/**.tsx", "src/test-utils"],
+  "include": ["src/**/*.ts", "src/**/*.tsx"],
   "exclude": ["node_modules", "**/__tests__/**"]
 }