@react-md/core 1.0.0-next.7 → 1.0.0-next.9

package/dist/typography/Typography.js

@@ -10,24 +10,24 @@ import { cssUtils } from "../cssUtils.js";
  * @example
  * Simple Example
  * ```ts
- * import { getTypographyClassName } from "@react-md/core";
+ * import { typography } from "@react-md/core";
  *
  * function Example() {
  *   return (
  *     <>
- *       <h1 className={getTypographyClassName({ type: "headline-1" })} />
- *       <h2 className={getTypographyClassName({ type: "headline-2" })} />
- *       <h3 className={getTypographyClassName({ type: "headline-3" })} />
- *       <h4 className={getTypographyClassName({ type: "headline-4" })} />
- *       <h5 className={getTypographyClassName({ type: "headline-5" })} />
- *       <h6 className={getTypographyClassName({ type: "headline-6" })} />
- *       <h5 className={getTypographyClassName({ type: "subtitle-1" })} />
- *       <h6 className={getTypographyClassName({ type: "subtitle-2" })} />
- *       <p className={getTypographyClassName()} />
- *       <p className={getTypographyClassName({ type "body-1" })} />
- *       <p className={getTypographyClassName({ type "body-1" })} />
- *       <caption className={getTypographyClassName({ type: "caption" })} />
- *       <span className={getTypographyClassName({ type: "overline" })} />
+ *       <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" })} />
  *     </>
  *   );
  * }
@@ -36,14 +36,14 @@ import { cssUtils } from "../cssUtils.js";
  * @example
  * Applying Additional Styles
  * ```ts
- * import { getTypography } from "@react-md/core";
+ * import { typography } from "@react-md/core";
  *
  * function Example() {
  *   return (
  *     <>
  *       <h1
  *         // only maintain the default margin-bottom
- *         className={getTypographyClassName({
+ *         className={typography({
  *           type: "headline-1",
  *           margin: "bottom",
  *         })}
@@ -51,7 +51,7 @@ import { cssUtils } from "../cssUtils.js";
  *
  *       <h2
  *         // remove all default margin
- *         className={getTypographyClassName({
+ *         className={typography({
  *           type: "headline-2",
  *           margin: "none",
  *         })}
@@ -59,7 +59,7 @@ import { cssUtils } from "../cssUtils.js";
  *
  *       <h3
  *         // only maintain the default margin-top
- *         className={getTypographyClassName({
+ *         className={typography({
  *           type: "headline-3",
  *           margin: "top",
  *         })}
@@ -67,7 +67,7 @@ import { cssUtils } from "../cssUtils.js";
  *
  *       <p
  *         // center the text, set to bold, and only maintain default margin-bottom
- *         className={getTypographyClassName({
+ *         className={typography({
  *           type "subtitle-1",
  *           align: "center",
  *           margin: "bottom",

package/dist/typography/Typography.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/typography/Typography.tsx"],"sourcesContent":["import { cnb } from \"cnbuilder\";\nimport {\n  forwardRef,\n  type ElementType,\n  type HTMLAttributes,\n  type ReactElement,\n} from \"react\";\nimport { cssUtils, type TextCssUtilsOptions } from \"../cssUtils.js\";\n\n/**\n * A union of all the material design provided typography styles. When used with\n * the Typography component, this will generate the correct typography className\n * to apply and determine what component to be rendered as if none was provided.\n *\n * @remarks \\@since 4.0.0\n */\nexport type TypographyType =\n  | \"headline-1\"\n  | \"headline-2\"\n  | \"headline-3\"\n  | \"headline-4\"\n  | \"headline-5\"\n  | \"headline-6\"\n  | \"subtitle-1\"\n  | \"subtitle-2\"\n  | \"body-1\"\n  | \"body-2\"\n  | \"caption\"\n  | \"overline\";\n\n/** @remarks \\@since 6.0.0 */\nexport interface TypographyClassNameOptions extends TextCssUtilsOptions {\n  className?: string;\n\n  /**\n   * @see {@link TypographyType}\n   * @defaultValue `\"body-1\"`\n   */\n  type?: TypographyType;\n}\n\n/** @remarks \\@since 6.0.0 */\nexport type NullableTypographyClassNameOptions = Omit<\n  TypographyClassNameOptions,\n  \"type\"\n> & {\n  /**\n   * When using the {@link typography} class name utility, the `type` can be set\n   * to `null` to inherit font.\n   *\n   * @see {@link TypographyType}\n   * @defaultValue `\"body-1\"`\n   */\n  type?: TypographyType | null;\n};\n\n/**\n * Get a typography class name based on different typography options. This is\n * only useful if you are unable to use the {@link Typography} component for\n * some reason.\n *\n * @example\n * Simple Example\n * ```ts\n * import { getTypographyClassName } from \"@react-md/core\";\n *\n * function Example() {\n *   return (\n *     <>\n *       <h1 className={getTypographyClassName({ type: \"headline-1\" })} />\n *       <h2 className={getTypographyClassName({ type: \"headline-2\" })} />\n *       <h3 className={getTypographyClassName({ type: \"headline-3\" })} />\n *       <h4 className={getTypographyClassName({ type: \"headline-4\" })} />\n *       <h5 className={getTypographyClassName({ type: \"headline-5\" })} />\n *       <h6 className={getTypographyClassName({ type: \"headline-6\" })} />\n *       <h5 className={getTypographyClassName({ type: \"subtitle-1\" })} />\n *       <h6 className={getTypographyClassName({ type: \"subtitle-2\" })} />\n *       <p className={getTypographyClassName()} />\n *       <p className={getTypographyClassName({ type \"body-1\" })} />\n *       <p className={getTypographyClassName({ type \"body-1\" })} />\n *       <caption className={getTypographyClassName({ type: \"caption\" })} />\n *       <span className={getTypographyClassName({ type: \"overline\" })} />\n *     </>\n *   );\n * }\n * ```\n *\n * @example\n * Applying Additional Styles\n * ```ts\n * import { getTypography } from \"@react-md/core\";\n *\n * function Example() {\n *   return (\n *     <>\n *       <h1\n *         // only maintain the default margin-bottom\n *         className={getTypographyClassName({\n *           type: \"headline-1\",\n *           margin: \"bottom\",\n *         })}\n *        />\n *\n *       <h2\n *         // remove all default margin\n *         className={getTypographyClassName({\n *           type: \"headline-2\",\n *           margin: \"none\",\n *         })}\n *       />\n *\n *       <h3\n *         // only maintain the default margin-top\n *         className={getTypographyClassName({\n *           type: \"headline-3\",\n *           margin: \"top\",\n *         })}\n *       />\n *\n *       <p\n *         // center the text, set to bold, and only maintain default margin-bottom\n *         className={getTypographyClassName({\n *           type \"subtitle-1\",\n *           align: \"center\",\n *           margin: \"bottom\",\n *         })}\n *       />\n *     </>\n *   );\n * }\n * ```\n *\n * @see {@link Typography}\n * @param options - An optional object of options used to create the typography\n * class name.\n * @returns a typography class name string\n * @remarks \\@since 6.0.0\n */\nexport function typography(\n  options: NullableTypographyClassNameOptions = {}\n): string {\n  const { type = \"body-1\" } = options;\n\n  // using `&&` instead of `bem` since the latest version of typescript does not\n  // support setting the same object key (empty string)\n  return cnb(\n    \"rmd-typography\",\n    type && `rmd-typography--${type}`,\n    cssUtils(options)\n  );\n}\n\n/**\n * A union of the default supported elements that the `Typography` component can\n * be rendered as. This is mostly used for adding the correct `HTMLAttributes`\n * and enabling the forward ref.\n *\n * @remarks \\@since 4.0.0\n */\nexport type TypographyHTMLElement =\n  | HTMLHeadingElement\n  | HTMLParagraphElement\n  | HTMLSpanElement\n  | HTMLDivElement\n  | HTMLAnchorElement\n  | HTMLBodyElement\n  | HTMLHtmlElement;\n\n/** @remarks \\@since 6.0.0 */\nexport type CustomTypographyComponent = ElementType<\n  HTMLAttributes<TypographyHTMLElement> & { className: string }\n>;\n\n/** @internal */\nfunction getComponent(\n  as: CustomTypographyComponent | undefined,\n  type: TypographyType\n): ElementType {\n  if (as) {\n    return as;\n  }\n\n  switch (type) {\n    case \"headline-1\":\n      return \"h1\";\n    case \"headline-2\":\n      return \"h2\";\n    case \"headline-3\":\n      return \"h3\";\n    case \"headline-4\":\n      return \"h4\";\n    case \"headline-5\":\n      return \"h5\";\n    case \"headline-6\":\n    case \"subtitle-1\":\n    case \"subtitle-2\":\n      return \"h6\";\n    case \"body-1\":\n    case \"body-2\":\n      return \"p\";\n    case \"caption\":\n      return \"caption\";\n    default:\n      return \"span\";\n  }\n}\n\nexport interface TypographyProps\n  extends HTMLAttributes<TypographyHTMLElement>,\n    TypographyClassNameOptions {\n  /**\n   * The component to render as when the children are not a render function. If\n   * this prop is omitted, the component will be determined by the `type` prop\n   * where:\n   *\n   * - `\"headline-1\" -> <h1>`\n   * - `\"headline-2\" -> <h2>`\n   * - `\"headline-3\" -> <h3>`\n   * - `\"headline-4\" -> <h4>`\n   * - `\"headline-5\" -> <h5>`\n   * - `\"headline-6\" -> <h6>`\n   * - `\"subtitle-1\" -> <h5>`\n   * - `\"subtitle-2\" -> <h6>`\n   * - `\"body-1\"     -> <p>`\n   * - `\"body-2\"     -> <p>`\n   * - `\"caption\"    -> <caption>`\n   * - `\"overline\"   -> <span>`\n   */\n  as?: CustomTypographyComponent;\n}\n\n/**\n * **Server Component**\n *\n * Render text with one of the material design typography styles applied and\n * optional styles like font-weight, font-style, text color, etc.\n *\n * @example\n * All Example\n * ```tsx\n * import { Typography } from \"@react-md/core\":\n *\n * export function Example() {\n *   return (\n *    <>\n *      <Typography type=\"headline-1\">Headline 1</Typography>\n *      <Typography type=\"headline-2\">Headline 2</Typography>\n *      <Typography type=\"headline-3\">Headline 3</Typography>\n *      <Typography type=\"headline-4\">Headline 4</Typography>\n *      <Typography type=\"headline-5\">Headline 5</Typography>\n *      <Typography type=\"headline-6\">Headline 6</Typography>\n *      <Typography type=\"subtitle-1\">Subtitle 1</Typography>\n *      <Typography type=\"subtitle-2\">Subtitle 2</Typography>\n *      <Typography>\n *        A paragraph of text.\n *      </Typography>\n *      <Typography type=\"body-1\">\n *        A paragraph of text.\n *      </Typography>\n *      <Typography type=\"body-2\">\n *        Another paragraph of text.\n *      </Typography>\n *      <Typography type=\"caption\" component=\"h5\">\n *        Caption text\n *      </Typography>\n *      <Typography type=\"overline\" component=\"h5\">\n *        Overline text\n *      </Typography>\n *    </>\n *   ):\n * }\n * ```\n */\nexport const Typography = forwardRef<TypographyHTMLElement, TypographyProps>(\n  function Typography(props, ref): ReactElement {\n    const {\n      as,\n      type = \"body-1\",\n      className,\n      margin,\n      fontStyle,\n      fontWeight,\n      textAlign,\n      textColor,\n      textDecoration,\n      textTransform,\n      textOverflow,\n      children,\n      ...remaining\n    } = props;\n\n    const Component = getComponent(as, type);\n    return (\n      <Component\n        {...remaining}\n        ref={ref}\n        className={typography({\n          type,\n          margin,\n          fontStyle,\n          fontWeight,\n          textAlign,\n          textColor,\n          textDecoration,\n          textTransform,\n          textOverflow,\n          className,\n        })}\n      >\n        {children}\n      </Component>\n    );\n  }\n);\n"],"names":["cnb","forwardRef","cssUtils","typography","options","type","getComponent","as","Typography","props","ref","className","margin","fontStyle","fontWeight","textAlign","textColor","textDecoration","textTransform","textOverflow","children","remaining","Component"],"mappings":";AAAA,SAASA,GAAG,QAAQ,YAAY;AAChC,SACEC,UAAU,QAIL,QAAQ;AACf,SAASC,QAAQ,QAAkC,iBAAiB;AAiDpE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAiFC,GACD,OAAO,SAASC,WACdC,UAA8C,CAAC,CAAC;IAEhD,MAAM,EAAEC,OAAO,QAAQ,EAAE,GAAGD;IAE5B,8EAA8E;IAC9E,qDAAqD;IACrD,OAAOJ,IACL,kBACAK,QAAQ,CAAC,gBAAgB,EAAEA,KAAK,CAAC,EACjCH,SAASE;AAEb;AAuBA,cAAc,GACd,SAASE,aACPC,EAAyC,EACzCF,IAAoB;IAEpB,IAAIE,IAAI;QACN,OAAOA;IACT;IAEA,OAAQF;QACN,KAAK;YACH,OAAO;QACT,KAAK;YACH,OAAO;QACT,KAAK;YACH,OAAO;QACT,KAAK;YACH,OAAO;QACT,KAAK;YACH,OAAO;QACT,KAAK;QACL,KAAK;QACL,KAAK;YACH,OAAO;QACT,KAAK;QACL,KAAK;YACH,OAAO;QACT,KAAK;YACH,OAAO;QACT;YACE,OAAO;IACX;AACF;AA0BA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAyCC,GACD,OAAO,MAAMG,2BAAaP,WACxB,SAASO,WAAWC,KAAK,EAAEC,GAAG;IAC5B,MAAM,EACJH,EAAE,EACFF,OAAO,QAAQ,EACfM,SAAS,EACTC,MAAM,EACNC,SAAS,EACTC,UAAU,EACVC,SAAS,EACTC,SAAS,EACTC,cAAc,EACdC,aAAa,EACbC,YAAY,EACZC,QAAQ,EACR,GAAGC,WACJ,GAAGZ;IAEJ,MAAMa,YAAYhB,aAAaC,IAAIF;IACnC,qBACE,KAACiB;QACE,GAAGD,SAAS;QACbX,KAAKA;QACLC,WAAWR,WAAW;YACpBE;YACAO;YACAC;YACAC;YACAC;YACAC;YACAC;YACAC;YACAC;YACAR;QACF;kBAECS;;AAGP,GACA"}
+{"version":3,"sources":["../../src/typography/Typography.tsx"],"sourcesContent":["import { cnb } from \"cnbuilder\";\nimport {\n  forwardRef,\n  type ElementType,\n  type HTMLAttributes,\n  type ReactElement,\n} from \"react\";\nimport { cssUtils, type TextCssUtilsOptions } from \"../cssUtils.js\";\n\n/**\n * A union of all the material design provided typography styles. When used with\n * the Typography component, this will generate the correct typography className\n * to apply and determine what component to be rendered as if none was provided.\n *\n * @remarks \\@since 4.0.0\n */\nexport type TypographyType =\n  | \"headline-1\"\n  | \"headline-2\"\n  | \"headline-3\"\n  | \"headline-4\"\n  | \"headline-5\"\n  | \"headline-6\"\n  | \"subtitle-1\"\n  | \"subtitle-2\"\n  | \"body-1\"\n  | \"body-2\"\n  | \"caption\"\n  | \"overline\";\n\n/** @remarks \\@since 6.0.0 */\nexport interface TypographyClassNameOptions extends TextCssUtilsOptions {\n  className?: string;\n\n  /**\n   * @see {@link TypographyType}\n   * @defaultValue `\"body-1\"`\n   */\n  type?: TypographyType;\n}\n\n/** @remarks \\@since 6.0.0 */\nexport type NullableTypographyClassNameOptions = Omit<\n  TypographyClassNameOptions,\n  \"type\"\n> & {\n  /**\n   * When using the {@link typography} class name utility, the `type` can be set\n   * to `null` to inherit font.\n   *\n   * @see {@link TypographyType}\n   * @defaultValue `\"body-1\"`\n   */\n  type?: TypographyType | null;\n};\n\n/**\n * Get a typography class name based on different typography options. This is\n * only useful if you are unable to use the {@link Typography} component for\n * some reason.\n *\n * @example\n * Simple Example\n * ```ts\n * import { typography } from \"@react-md/core\";\n *\n * function Example() {\n *   return (\n *     <>\n *       <h1 className={typography({ type: \"headline-1\" })} />\n *       <h2 className={typography({ type: \"headline-2\" })} />\n *       <h3 className={typography({ type: \"headline-3\" })} />\n *       <h4 className={typography({ type: \"headline-4\" })} />\n *       <h5 className={typography({ type: \"headline-5\" })} />\n *       <h6 className={typography({ type: \"headline-6\" })} />\n *       <h5 className={typography({ type: \"subtitle-1\" })} />\n *       <h6 className={typography({ type: \"subtitle-2\" })} />\n *       <p className={typography()} />\n *       <p className={typography({ type \"body-1\" })} />\n *       <p className={typography({ type \"body-1\" })} />\n *       <caption className={typography({ type: \"caption\" })} />\n *       <span className={typography({ type: \"overline\" })} />\n *     </>\n *   );\n * }\n * ```\n *\n * @example\n * Applying Additional Styles\n * ```ts\n * import { typography } from \"@react-md/core\";\n *\n * function Example() {\n *   return (\n *     <>\n *       <h1\n *         // only maintain the default margin-bottom\n *         className={typography({\n *           type: \"headline-1\",\n *           margin: \"bottom\",\n *         })}\n *        />\n *\n *       <h2\n *         // remove all default margin\n *         className={typography({\n *           type: \"headline-2\",\n *           margin: \"none\",\n *         })}\n *       />\n *\n *       <h3\n *         // only maintain the default margin-top\n *         className={typography({\n *           type: \"headline-3\",\n *           margin: \"top\",\n *         })}\n *       />\n *\n *       <p\n *         // center the text, set to bold, and only maintain default margin-bottom\n *         className={typography({\n *           type \"subtitle-1\",\n *           align: \"center\",\n *           margin: \"bottom\",\n *         })}\n *       />\n *     </>\n *   );\n * }\n * ```\n *\n * @see {@link Typography}\n * @param options - An optional object of options used to create the typography\n * class name.\n * @returns a typography class name string\n * @remarks \\@since 6.0.0\n */\nexport function typography(\n  options: NullableTypographyClassNameOptions = {}\n): string {\n  const { type = \"body-1\" } = options;\n\n  // using `&&` instead of `bem` since the latest version of typescript does not\n  // support setting the same object key (empty string)\n  return cnb(\n    \"rmd-typography\",\n    type && `rmd-typography--${type}`,\n    cssUtils(options)\n  );\n}\n\n/**\n * A union of the default supported elements that the `Typography` component can\n * be rendered as. This is mostly used for adding the correct `HTMLAttributes`\n * and enabling the forward ref.\n *\n * @remarks \\@since 4.0.0\n */\nexport type TypographyHTMLElement =\n  | HTMLHeadingElement\n  | HTMLParagraphElement\n  | HTMLSpanElement\n  | HTMLDivElement\n  | HTMLAnchorElement\n  | HTMLBodyElement\n  | HTMLHtmlElement;\n\n/** @remarks \\@since 6.0.0 */\nexport type CustomTypographyComponent = ElementType<\n  HTMLAttributes<TypographyHTMLElement> & { className: string }\n>;\n\n/** @internal */\nfunction getComponent(\n  as: CustomTypographyComponent | undefined,\n  type: TypographyType\n): ElementType {\n  if (as) {\n    return as;\n  }\n\n  switch (type) {\n    case \"headline-1\":\n      return \"h1\";\n    case \"headline-2\":\n      return \"h2\";\n    case \"headline-3\":\n      return \"h3\";\n    case \"headline-4\":\n      return \"h4\";\n    case \"headline-5\":\n      return \"h5\";\n    case \"headline-6\":\n    case \"subtitle-1\":\n    case \"subtitle-2\":\n      return \"h6\";\n    case \"body-1\":\n    case \"body-2\":\n      return \"p\";\n    case \"caption\":\n      return \"caption\";\n    default:\n      return \"span\";\n  }\n}\n\nexport interface TypographyProps\n  extends HTMLAttributes<TypographyHTMLElement>,\n    TypographyClassNameOptions {\n  /**\n   * The component to render as when the children are not a render function. If\n   * this prop is omitted, the component will be determined by the `type` prop\n   * where:\n   *\n   * - `\"headline-1\" -> <h1>`\n   * - `\"headline-2\" -> <h2>`\n   * - `\"headline-3\" -> <h3>`\n   * - `\"headline-4\" -> <h4>`\n   * - `\"headline-5\" -> <h5>`\n   * - `\"headline-6\" -> <h6>`\n   * - `\"subtitle-1\" -> <h5>`\n   * - `\"subtitle-2\" -> <h6>`\n   * - `\"body-1\"     -> <p>`\n   * - `\"body-2\"     -> <p>`\n   * - `\"caption\"    -> <caption>`\n   * - `\"overline\"   -> <span>`\n   */\n  as?: CustomTypographyComponent;\n}\n\n/**\n * **Server Component**\n *\n * Render text with one of the material design typography styles applied and\n * optional styles like font-weight, font-style, text color, etc.\n *\n * @example\n * All Example\n * ```tsx\n * import { Typography } from \"@react-md/core\":\n *\n * export function Example() {\n *   return (\n *    <>\n *      <Typography type=\"headline-1\">Headline 1</Typography>\n *      <Typography type=\"headline-2\">Headline 2</Typography>\n *      <Typography type=\"headline-3\">Headline 3</Typography>\n *      <Typography type=\"headline-4\">Headline 4</Typography>\n *      <Typography type=\"headline-5\">Headline 5</Typography>\n *      <Typography type=\"headline-6\">Headline 6</Typography>\n *      <Typography type=\"subtitle-1\">Subtitle 1</Typography>\n *      <Typography type=\"subtitle-2\">Subtitle 2</Typography>\n *      <Typography>\n *        A paragraph of text.\n *      </Typography>\n *      <Typography type=\"body-1\">\n *        A paragraph of text.\n *      </Typography>\n *      <Typography type=\"body-2\">\n *        Another paragraph of text.\n *      </Typography>\n *      <Typography type=\"caption\" component=\"h5\">\n *        Caption text\n *      </Typography>\n *      <Typography type=\"overline\" component=\"h5\">\n *        Overline text\n *      </Typography>\n *    </>\n *   ):\n * }\n * ```\n */\nexport const Typography = forwardRef<TypographyHTMLElement, TypographyProps>(\n  function Typography(props, ref): ReactElement {\n    const {\n      as,\n      type = \"body-1\",\n      className,\n      margin,\n      fontStyle,\n      fontWeight,\n      textAlign,\n      textColor,\n      textDecoration,\n      textTransform,\n      textOverflow,\n      children,\n      ...remaining\n    } = props;\n\n    const Component = getComponent(as, type);\n    return (\n      <Component\n        {...remaining}\n        ref={ref}\n        className={typography({\n          type,\n          margin,\n          fontStyle,\n          fontWeight,\n          textAlign,\n          textColor,\n          textDecoration,\n          textTransform,\n          textOverflow,\n          className,\n        })}\n      >\n        {children}\n      </Component>\n    );\n  }\n);\n"],"names":["cnb","forwardRef","cssUtils","typography","options","type","getComponent","as","Typography","props","ref","className","margin","fontStyle","fontWeight","textAlign","textColor","textDecoration","textTransform","textOverflow","children","remaining","Component"],"mappings":";AAAA,SAASA,GAAG,QAAQ,YAAY;AAChC,SACEC,UAAU,QAIL,QAAQ;AACf,SAASC,QAAQ,QAAkC,iBAAiB;AAiDpE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAiFC,GACD,OAAO,SAASC,WACdC,UAA8C,CAAC,CAAC;IAEhD,MAAM,EAAEC,OAAO,QAAQ,EAAE,GAAGD;IAE5B,8EAA8E;IAC9E,qDAAqD;IACrD,OAAOJ,IACL,kBACAK,QAAQ,CAAC,gBAAgB,EAAEA,KAAK,CAAC,EACjCH,SAASE;AAEb;AAuBA,cAAc,GACd,SAASE,aACPC,EAAyC,EACzCF,IAAoB;IAEpB,IAAIE,IAAI;QACN,OAAOA;IACT;IAEA,OAAQF;QACN,KAAK;YACH,OAAO;QACT,KAAK;YACH,OAAO;QACT,KAAK;YACH,OAAO;QACT,KAAK;YACH,OAAO;QACT,KAAK;YACH,OAAO;QACT,KAAK;QACL,KAAK;QACL,KAAK;YACH,OAAO;QACT,KAAK;QACL,KAAK;YACH,OAAO;QACT,KAAK;YACH,OAAO;QACT;YACE,OAAO;IACX;AACF;AA0BA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAyCC,GACD,OAAO,MAAMG,2BAAaP,WACxB,SAASO,WAAWC,KAAK,EAAEC,GAAG;IAC5B,MAAM,EACJH,EAAE,EACFF,OAAO,QAAQ,EACfM,SAAS,EACTC,MAAM,EACNC,SAAS,EACTC,UAAU,EACVC,SAAS,EACTC,SAAS,EACTC,cAAc,EACdC,aAAa,EACbC,YAAY,EACZC,QAAQ,EACR,GAAGC,WACJ,GAAGZ;IAEJ,MAAMa,YAAYhB,aAAaC,IAAIF;IACnC,qBACE,KAACiB;QACE,GAAGD,SAAS;QACbX,KAAKA;QACLC,WAAWR,WAAW;YACpBE;YACAO;YACAC;YACAC;YACAC;YACAC;YACAC;YACAC;YACAC;YACAR;QACF;kBAECS;;AAGP,GACA"}

package/dist/typography/_typography.scss

@@ -4,6 +4,18 @@
 @use "../utils";
 
 $disable-text-container: false !default;
+$disable-headline-1: false !default;
+$disable-headline-2: false !default;
+$disable-headline-3: false !default;
+$disable-headline-4: false !default;
+$disable-headline-5: false !default;
+$disable-headline-6: false !default;
+$disable-subtitle-1: false !default;
+$disable-subtitle-2: false !default;
+$disable-body-1: false !default;
+$disable-body-2: false !default;
+$disable-caption: false !default;
+$disable-overline: false !default;
 
 /// A small utility function to get the letter spacing based on tracking and
 /// font-size
@@ -216,9 +228,13 @@ $button-recommended-styles: map.merge(
   $base-font-styles,
   (
     font-size: 0.875rem,
-    line-height: 2.25rem,
     font-weight: map.get($font-weights, medium),
     letter-spacing: get-letter-spacing(1.25, 0.875),
+    line-height: 2.25rem,
+    // buttons with multiple lines of text look terrible because of the large
+    // line-height. You normally want to use a different component if the
+    // clickable area has so much content to line-wrap
+    line-wrap: nowrap,
   )
 );
 $button-custom-styles: () !default;
@@ -276,52 +292,76 @@ $typography-variables: (line-length, text-container-padding);
     .rmd-typography {
       @include utils.map-to-styles($base-font-styles);
 
-      &--headline-1 {
-        @include utils.map-to-styles($headline-1-styles);
+      @if not $disable-headline-1 {
+        &--headline-1 {
+          @include utils.map-to-styles($headline-1-styles);
+        }
       }
 
-      &--headline-2 {
-        @include utils.map-to-styles($headline-2-styles);
+      @if not $disable-headline-2 {
+        &--headline-2 {
+          @include utils.map-to-styles($headline-2-styles);
+        }
       }
 
-      &--headline-3 {
-        @include utils.map-to-styles($headline-3-styles);
+      @if not $disable-headline-3 {
+        &--headline-3 {
+          @include utils.map-to-styles($headline-3-styles);
+        }
       }
 
-      &--headline-4 {
-        @include utils.map-to-styles($headline-4-styles);
+      @if not $disable-headline-4 {
+        &--headline-4 {
+          @include utils.map-to-styles($headline-4-styles);
+        }
       }
 
-      &--headline-5 {
-        @include utils.map-to-styles($headline-5-styles);
+      @if not $disable-headline-5 {
+        &--headline-5 {
+          @include utils.map-to-styles($headline-5-styles);
+        }
       }
 
-      &--headline-6 {
-        @include utils.map-to-styles($headline-6-styles);
+      @if not $disable-headline-6 {
+        &--headline-6 {
+          @include utils.map-to-styles($headline-6-styles);
+        }
       }
 
-      &--subtitle-1 {
-        @include utils.map-to-styles($subtitle-1-styles);
+      @if not $disable-subtitle-1 {
+        &--subtitle-1 {
+          @include utils.map-to-styles($subtitle-1-styles);
+        }
       }
 
-      &--subtitle-2 {
-        @include utils.map-to-styles($subtitle-2-styles);
+      @if not $disable-subtitle-2 {
+        &--subtitle-2 {
+          @include utils.map-to-styles($subtitle-2-styles);
+        }
       }
 
-      &--body-1 {
-        @include utils.map-to-styles($body-1-styles);
+      @if not $disable-body-1 {
+        &--body-1 {
+          @include utils.map-to-styles($body-1-styles);
+        }
       }
 
-      &--body-2 {
-        @include utils.map-to-styles($body-2-styles);
+      @if not $disable-body-2 {
+        &--body-2 {
+          @include utils.map-to-styles($body-2-styles);
+        }
       }
 
-      &--caption {
-        @include utils.map-to-styles($caption-styles);
+      @if not $disable-caption {
+        &--caption {
+          @include utils.map-to-styles($caption-styles);
+        }
       }
 
-      &--overline {
-        @include utils.map-to-styles($overline-styles);
+      @if not $disable-overline {
+        &--overline {
+          @include utils.map-to-styles($overline-styles);
+        }
       }
     }
   }

package/dist/useEnsuredState.d.ts

@@ -4,7 +4,7 @@ import type { UseStateInitializer, UseStateSetter } from "./types.js";
  * @internal
  * @remarks \@since 6.0.0
  */
-export interface EnsuredStateOptions<V, Setter extends Dispatch<V> | UseStateSetter<V>> {
+export interface EnsuredStateOptions<V, Setter extends Dispatch<V> | UseStateSetter<V> = UseStateSetter<V>> {
     value?: V;
     setValue?: Setter;
     defaultValue?: UseStateInitializer<V>;

package/dist/useEnsuredState.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/useEnsuredState.ts"],"sourcesContent":["/* eslint-disable react-hooks/rules-of-hooks */\nimport type { Dispatch } from \"react\";\nimport { useState } from \"react\";\nimport type { UseStateInitializer, UseStateSetter } from \"./types.js\";\n\n/**\n * @internal\n * @remarks \\@since 6.0.0\n */\nexport interface EnsuredStateOptions<\n  V,\n  Setter extends Dispatch<V> | UseStateSetter<V>,\n> {\n  value?: V;\n  setValue?: Setter;\n  defaultValue?: UseStateInitializer<V>;\n}\n\n/**\n * This is used to dynamically allow controlling hooks by providing a `value` +\n * `setValue` or defaulting to uncontrolled behavior with local state.\n *\n * @internal\n * @remarks \\@since 6.0.0\n */\nexport function useEnsuredState<\n  V,\n  Setter extends Dispatch<V> | UseStateSetter<V>,\n>(\n  options: EnsuredStateOptions<V, Setter>\n): readonly [value: V, setValue: Setter] {\n  const { value, setValue, defaultValue } = options;\n  if (typeof value !== \"undefined\" && typeof setValue !== \"undefined\") {\n    return [value, setValue];\n  }\n\n  if (typeof value !== \"undefined\" || typeof setValue !== \"undefined\") {\n    throw new Error(\n      \"Both a `value` and `setValue` must be defined for controlled components.\"\n    );\n  }\n\n  if (typeof defaultValue === \"undefined\") {\n    throw new Error(\n      \"A `defaultValue` must be defined for uncontrolled components.\"\n    );\n  }\n\n  return useState(defaultValue) as [value: V, setValue: Setter];\n}\n"],"names":["useState","useEnsuredState","options","value","setValue","defaultValue","Error"],"mappings":"AAAA,6CAA6C,GAE7C,SAASA,QAAQ,QAAQ,QAAQ;AAgBjC;;;;;;CAMC,GACD,OAAO,SAASC,gBAIdC,OAAuC;IAEvC,MAAM,EAAEC,KAAK,EAAEC,QAAQ,EAAEC,YAAY,EAAE,GAAGH;IAC1C,IAAI,OAAOC,UAAU,eAAe,OAAOC,aAAa,aAAa;QACnE,OAAO;YAACD;YAAOC;SAAS;IAC1B;IAEA,IAAI,OAAOD,UAAU,eAAe,OAAOC,aAAa,aAAa;QACnE,MAAM,IAAIE,MACR;IAEJ;IAEA,IAAI,OAAOD,iBAAiB,aAAa;QACvC,MAAM,IAAIC,MACR;IAEJ;IAEA,OAAON,SAASK;AAClB"}
+{"version":3,"sources":["../src/useEnsuredState.ts"],"sourcesContent":["/* eslint-disable react-hooks/rules-of-hooks */\nimport type { Dispatch } from \"react\";\nimport { useState } from \"react\";\nimport type { UseStateInitializer, UseStateSetter } from \"./types.js\";\n\n/**\n * @internal\n * @remarks \\@since 6.0.0\n */\nexport interface EnsuredStateOptions<\n  V,\n  Setter extends Dispatch<V> | UseStateSetter<V> = UseStateSetter<V>,\n> {\n  value?: V;\n  setValue?: Setter;\n  defaultValue?: UseStateInitializer<V>;\n}\n\n/**\n * This is used to dynamically allow controlling hooks by providing a `value` +\n * `setValue` or defaulting to uncontrolled behavior with local state.\n *\n * @internal\n * @remarks \\@since 6.0.0\n */\nexport function useEnsuredState<\n  V,\n  Setter extends Dispatch<V> | UseStateSetter<V>,\n>(\n  options: EnsuredStateOptions<V, Setter>\n): readonly [value: V, setValue: Setter] {\n  const { value, setValue, defaultValue } = options;\n  if (typeof value !== \"undefined\" && typeof setValue !== \"undefined\") {\n    return [value, setValue];\n  }\n\n  if (typeof value !== \"undefined\" || typeof setValue !== \"undefined\") {\n    throw new Error(\n      \"Both a `value` and `setValue` must be defined for controlled components.\"\n    );\n  }\n\n  if (typeof defaultValue === \"undefined\") {\n    throw new Error(\n      \"A `defaultValue` must be defined for uncontrolled components.\"\n    );\n  }\n\n  return useState(defaultValue) as [value: V, setValue: Setter];\n}\n"],"names":["useState","useEnsuredState","options","value","setValue","defaultValue","Error"],"mappings":"AAAA,6CAA6C,GAE7C,SAASA,QAAQ,QAAQ,QAAQ;AAgBjC;;;;;;CAMC,GACD,OAAO,SAASC,gBAIdC,OAAuC;IAEvC,MAAM,EAAEC,KAAK,EAAEC,QAAQ,EAAEC,YAAY,EAAE,GAAGH;IAC1C,IAAI,OAAOC,UAAU,eAAe,OAAOC,aAAa,aAAa;QACnE,OAAO;YAACD;YAAOC;SAAS;IAC1B;IAEA,IAAI,OAAOD,UAAU,eAAe,OAAOC,aAAa,aAAa;QACnE,MAAM,IAAIE,MACR;IAEJ;IAEA,IAAI,OAAOD,iBAAiB,aAAa;QACvC,MAAM,IAAIC,MACR;IAEJ;IAEA,OAAON,SAASK;AAClB"}

package/dist/utils/alphaNumericSort.d.ts

@@ -1,4 +1,4 @@
-import type { TextExtractor } from "../types.js";
+import { type TextExtractor } from "../types.js";
 /**
  * The default `Intl.Collator` that should be used for sorting large lists.
  *

package/dist/utils/alphaNumericSort.js

@@ -1,12 +1,4 @@
-const identity = (item)=>{
-    if (typeof item === "string") {
-        return item;
-    }
-    if (process.env.NODE_ENV !== "production") {
-        throw new Error("A `TextExtractor` must be provided to `alphaNumericSort` for lists that do not contain strings");
-    }
-    return "";
-};
+import { defaultExtractor } from "../searching/utils.js";
 /**
  * The default `Intl.Collator` that should be used for sorting large lists.
  *
@@ -17,7 +9,7 @@ const identity = (item)=>{
     caseFirst: "upper"
 });
 export function alphaNumericSort(list, options = {}) {
-    const { compare = DEFAULT_COLLATOR.compare, extractor = identity, descending = false } = options;
+    const { compare = DEFAULT_COLLATOR.compare, extractor = defaultExtractor("alphaNumericSort"), descending = false } = options;
     const sorted = list.slice();
     sorted.sort((a, b)=>{
         const aValue = extractor(a);

package/dist/utils/alphaNumericSort.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/utils/alphaNumericSort.ts"],"sourcesContent":["import type { TextExtractor } from \"../types.js\";\n\nconst identity = <T>(item: T): string => {\n  if (typeof item === \"string\") {\n    return item;\n  }\n\n  if (process.env.NODE_ENV !== \"production\") {\n    throw new Error(\n      \"A `TextExtractor` must be provided to `alphaNumericSort` for lists that do not contain strings\"\n    );\n  }\n\n  return \"\";\n};\n\n/**\n * The default `Intl.Collator` that should be used for sorting large lists.\n *\n * @see https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/localeCompare#performance\n * @remarks \\@since 6.0.0\n */\nexport const DEFAULT_COLLATOR = new Intl.Collator(\"en-US\", {\n  numeric: true,\n  caseFirst: \"upper\",\n});\n\n/** @remarks \\@since 6.0.0 */\nexport interface AlphaNumericSortOptions<T> {\n  /**\n   * The extractor is only required when the list of items are not strings.\n   *\n   * @example\n   * Simple Example\n   * ```ts\n   * interface Item {\n   *   name: string;\n   * }\n   *\n   * const items: Item[] = [{ name: 'Hello' }, { name: 'World' }];\n   *\n   * `alphaNumericSort(items, {\n   *   extractor: item => item.name,\n   * })`\n   * ```\n   *\n   * @remarks\n   * For javascript developers, this will throw an error in dev mode if an\n   * extractor is not provided for non-string lists.\n   *\n   * @defaultValue `typeof item === \"string\" ? item : \"\"`\n   */\n  extractor?: TextExtractor<T>;\n\n  /**\n   * A custom compare function for sorting the list. This should really only be\n   * provided if the language for your app is not `\"en-US\"` or you'd like to\n   * provide some custom sorting options.\n   *\n   * @example\n   * Custom Compare using Intl.Collator\n   * ```ts\n   * const collator = new Intl.Collator(\"en-US\", {\n   *   numeric: false,\n   *   caseFirst: \"lower\",\n   *   usage: \"search\",\n   * });\n   *\n   * alphaNumericSort(items, {\n   *   compare: collator.compare,\n   * })\n   * ```\n   *\n   * @see https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/Collator/Collator\n   * @defaultValue `new Intl.Collator(\"en-US\", { numeric: true, caseFirst: \"upper\" }).compare`\n   */\n  compare?(a: string, b: string): number;\n\n  /**\n   * Setting this to `true` will return the list in descending order instead of\n   * ascending.\n   *\n   * @defaultValue `false`\n   */\n  descending?: boolean;\n}\n\n/**\n * @example\n * Simple Example\n * ```ts\n * const items = [\"World\", \"Hello\"];\n *\n * const sorted = alphaNumericSort(items);\n * // sorted == [\"Hello\", \"World\"]\n * ```\n *\n * @param list - The list of strings to sort\n * @returns a new sorted list\n */\nexport function alphaNumericSort<T extends string>(\n  list: readonly T[],\n  options?: Omit<AlphaNumericSortOptions<T>, \"extractor\">\n): readonly T[];\n/**\n * @example\n * Simple Example\n * ```ts\n * interface Item {\n *   name: string;\n * }\n *\n * const items: Item[] = [{ name: \"World\" }, { name: \"Hello\" }];\n *\n * const sorted = alphaNumericSort(items, {\n *   extractor: item => item.name,\n * });\n * // sorted == [{ name: \"Hello\" }, { name: \"World\" }]\n * ```\n *\n * @param list - The list of items to sort\n * @returns a new sorted list\n */\nexport function alphaNumericSort<T>(\n  list: readonly T[],\n  options: AlphaNumericSortOptions<T> & { extractor: TextExtractor<T> }\n): readonly T[];\nexport function alphaNumericSort<T>(\n  list: readonly T[],\n  options: AlphaNumericSortOptions<T> = {}\n): readonly T[] {\n  const {\n    compare = DEFAULT_COLLATOR.compare,\n    extractor = identity,\n    descending = false,\n  } = options;\n\n  const sorted = list.slice();\n  sorted.sort((a, b) => {\n    const aValue = extractor(a);\n    const bValue = extractor(b);\n\n    const value1 = descending ? bValue : aValue;\n    const value2 = descending ? aValue : bValue;\n\n    return compare(value1, value2);\n  });\n\n  return sorted;\n}\n"],"names":["identity","item","process","env","NODE_ENV","Error","DEFAULT_COLLATOR","Intl","Collator","numeric","caseFirst","alphaNumericSort","list","options","compare","extractor","descending","sorted","slice","sort","a","b","aValue","bValue","value1","value2"],"mappings":"AAEA,MAAMA,WAAW,CAAIC;IACnB,IAAI,OAAOA,SAAS,UAAU;QAC5B,OAAOA;IACT;IAEA,IAAIC,QAAQC,GAAG,CAACC,QAAQ,KAAK,cAAc;QACzC,MAAM,IAAIC,MACR;IAEJ;IAEA,OAAO;AACT;AAEA;;;;;CAKC,GACD,OAAO,MAAMC,mBAAmB,IAAIC,KAAKC,QAAQ,CAAC,SAAS;IACzDC,SAAS;IACTC,WAAW;AACb,GAAG;AAsGH,OAAO,SAASC,iBACdC,IAAkB,EAClBC,UAAsC,CAAC,CAAC;IAExC,MAAM,EACJC,UAAUR,iBAAiBQ,OAAO,EAClCC,YAAYf,QAAQ,EACpBgB,aAAa,KAAK,EACnB,GAAGH;IAEJ,MAAMI,SAASL,KAAKM,KAAK;IACzBD,OAAOE,IAAI,CAAC,CAACC,GAAGC;QACd,MAAMC,SAASP,UAAUK;QACzB,MAAMG,SAASR,UAAUM;QAEzB,MAAMG,SAASR,aAAaO,SAASD;QACrC,MAAMG,SAAST,aAAaM,SAASC;QAErC,OAAOT,QAAQU,QAAQC;IACzB;IAEA,OAAOR;AACT"}
+{"version":3,"sources":["../../src/utils/alphaNumericSort.ts"],"sourcesContent":["import { defaultExtractor } from \"../searching/utils.js\";\nimport { type TextExtractor } from \"../types.js\";\n\n/**\n * The default `Intl.Collator` that should be used for sorting large lists.\n *\n * @see https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/localeCompare#performance\n * @remarks \\@since 6.0.0\n */\nexport const DEFAULT_COLLATOR = new Intl.Collator(\"en-US\", {\n  numeric: true,\n  caseFirst: \"upper\",\n});\n\n/** @remarks \\@since 6.0.0 */\nexport interface AlphaNumericSortOptions<T> {\n  /**\n   * The extractor is only required when the list of items are not strings.\n   *\n   * @example\n   * Simple Example\n   * ```ts\n   * interface Item {\n   *   name: string;\n   * }\n   *\n   * const items: Item[] = [{ name: 'Hello' }, { name: 'World' }];\n   *\n   * `alphaNumericSort(items, {\n   *   extractor: item => item.name,\n   * })`\n   * ```\n   *\n   * @remarks\n   * For javascript developers, this will throw an error in dev mode if an\n   * extractor is not provided for non-string lists.\n   *\n   * @defaultValue `typeof item === \"string\" ? item : \"\"`\n   */\n  extractor?: TextExtractor<T>;\n\n  /**\n   * A custom compare function for sorting the list. This should really only be\n   * provided if the language for your app is not `\"en-US\"` or you'd like to\n   * provide some custom sorting options.\n   *\n   * @example\n   * Custom Compare using Intl.Collator\n   * ```ts\n   * const collator = new Intl.Collator(\"en-US\", {\n   *   numeric: false,\n   *   caseFirst: \"lower\",\n   *   usage: \"search\",\n   * });\n   *\n   * alphaNumericSort(items, {\n   *   compare: collator.compare,\n   * })\n   * ```\n   *\n   * @see https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/Collator/Collator\n   * @defaultValue `new Intl.Collator(\"en-US\", { numeric: true, caseFirst: \"upper\" }).compare`\n   */\n  compare?(a: string, b: string): number;\n\n  /**\n   * Setting this to `true` will return the list in descending order instead of\n   * ascending.\n   *\n   * @defaultValue `false`\n   */\n  descending?: boolean;\n}\n\n/**\n * @example\n * Simple Example\n * ```ts\n * const items = [\"World\", \"Hello\"];\n *\n * const sorted = alphaNumericSort(items);\n * // sorted == [\"Hello\", \"World\"]\n * ```\n *\n * @param list - The list of strings to sort\n * @returns a new sorted list\n */\nexport function alphaNumericSort<T extends string>(\n  list: readonly T[],\n  options?: Omit<AlphaNumericSortOptions<T>, \"extractor\">\n): readonly T[];\n/**\n * @example\n * Simple Example\n * ```ts\n * interface Item {\n *   name: string;\n * }\n *\n * const items: Item[] = [{ name: \"World\" }, { name: \"Hello\" }];\n *\n * const sorted = alphaNumericSort(items, {\n *   extractor: item => item.name,\n * });\n * // sorted == [{ name: \"Hello\" }, { name: \"World\" }]\n * ```\n *\n * @param list - The list of items to sort\n * @returns a new sorted list\n */\nexport function alphaNumericSort<T>(\n  list: readonly T[],\n  options: AlphaNumericSortOptions<T> & { extractor: TextExtractor<T> }\n): readonly T[];\nexport function alphaNumericSort<T>(\n  list: readonly T[],\n  options: AlphaNumericSortOptions<T> = {}\n): readonly T[] {\n  const {\n    compare = DEFAULT_COLLATOR.compare,\n    extractor = defaultExtractor(\"alphaNumericSort\"),\n    descending = false,\n  } = options;\n\n  const sorted = list.slice();\n  sorted.sort((a, b) => {\n    const aValue = extractor(a);\n    const bValue = extractor(b);\n\n    const value1 = descending ? bValue : aValue;\n    const value2 = descending ? aValue : bValue;\n\n    return compare(value1, value2);\n  });\n\n  return sorted;\n}\n"],"names":["defaultExtractor","DEFAULT_COLLATOR","Intl","Collator","numeric","caseFirst","alphaNumericSort","list","options","compare","extractor","descending","sorted","slice","sort","a","b","aValue","bValue","value1","value2"],"mappings":"AAAA,SAASA,gBAAgB,QAAQ,wBAAwB;AAGzD;;;;;CAKC,GACD,OAAO,MAAMC,mBAAmB,IAAIC,KAAKC,QAAQ,CAAC,SAAS;IACzDC,SAAS;IACTC,WAAW;AACb,GAAG;AAsGH,OAAO,SAASC,iBACdC,IAAkB,EAClBC,UAAsC,CAAC,CAAC;IAExC,MAAM,EACJC,UAAUR,iBAAiBQ,OAAO,EAClCC,YAAYV,iBAAiB,mBAAmB,EAChDW,aAAa,KAAK,EACnB,GAAGH;IAEJ,MAAMI,SAASL,KAAKM,KAAK;IACzBD,OAAOE,IAAI,CAAC,CAACC,GAAGC;QACd,MAAMC,SAASP,UAAUK;QACzB,MAAMG,SAASR,UAAUM;QAEzB,MAAMG,SAASR,aAAaO,SAASD;QACrC,MAAMG,SAAST,aAAaM,SAASC;QAErC,OAAOT,QAAQU,QAAQC;IACzB;IAEA,OAAOR;AACT"}

package/jest.config.ts

@@ -56,6 +56,10 @@ const config: Config = {
     // able to remove this one I start testing the documentation site
     "!<rootDir>/src/**/index.ts",
     "!<rootDir>/src/**/types.ts",
+    // it's hard to verify these since they probably only occur when trying to
+    // use react-dom/server in jsdom?
+    "!<rootDir>/src/test-utils/polyfills/TextEncoder.ts",
+    "!<rootDir>/src/test-utils/polyfills/TextDecoder.ts",
   ],
 
   extensionsToTreatAsEsm: [".ts", ".tsx"],

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@react-md/core",
-  "version": "1.0.0-next.7",
+  "version": "1.0.0-next.9",
   "description": "The core components and functionality for react-md.",
   "type": "module",
   "sass": "./dist/_core.scss",
@@ -55,23 +55,23 @@
   "license": "MIT",
   "dependencies": {
     "cnbuilder": "^3.1.0",
-    "nanoid": "^5.0.4"
+    "nanoid": "^5.0.6"
   },
   "devDependencies": {
     "@jest/globals": "^29.7.0",
     "@jest/types": "^29.6.3",
-    "@swc/cli": "^0.1.63",
-    "@swc/core": "1.3.105",
-    "@swc/jest": "^0.2.31",
+    "@swc/cli": "^0.3.10",
+    "@swc/core": "1.4.2",
+    "@swc/jest": "^0.2.36",
     "@testing-library/dom": "^9.3.4",
-    "@testing-library/jest-dom": "^6.3.0",
-    "@testing-library/react": "^14.1.2",
+    "@testing-library/jest-dom": "^6.4.2",
+    "@testing-library/react": "^14.2.1",
     "@testing-library/user-event": "^14.5.2",
     "@types/lodash": "^4.14.202",
-    "@types/node": "^20.11.6",
-    "@types/react": "^18.2.48",
-    "@types/react-dom": "^18.2.18",
-    "chokidar": "^3.5.3",
+    "@types/node": "^20.11.24",
+    "@types/react": "^18.2.62",
+    "@types/react-dom": "^18.2.19",
+    "chokidar": "^3.6.0",
     "filesize": "^10.1.0",
     "glob": "10.3.10",
     "jest": "^29.7.0",
@@ -80,22 +80,23 @@
     "lodash": "^4.17.21",
     "lz-string": "^1.5.0",
     "npm-run-all": "^4.1.5",
-    "postcss": "^8.4.33",
+    "postcss": "^8.4.35",
     "postcss-scss": "^4.0.9",
-    "stylelint": "^16.2.0",
+    "stylelint": "^16.2.1",
     "stylelint-config-prettier-scss": "^1.0.0",
     "stylelint-config-recommended-scss": "^14.0.0",
     "stylelint-order": "^6.0.4",
+    "stylelint-scss": "^6.2.0",
     "ts-node": "^10.9.2",
     "typescript": "^5.3.3"
   },
   "peerDependencies": {
-    "@jest/globals": "^29.6.1",
-    "@jest/types": "^29.6.1",
-    "@testing-library/dom": "^9.3.1",
-    "@testing-library/jest-dom": "^5.16.5",
-    "@testing-library/react": "^14.0.0",
-    "@testing-library/user-event": "^14.4.3",
+    "@jest/globals": "^29.7.0",
+    "@jest/types": "^29.6.3",
+    "@testing-library/dom": "^9.3.4",
+    "@testing-library/jest-dom": "^6.3.0",
+    "@testing-library/react": "^14.1.2",
+    "@testing-library/user-event": "^14.5.2",
     "react": ">= 18",
     "react-dom": ">= 18"
   },
@@ -132,7 +133,7 @@
     "dev": "npm-run-all --parallel build-esm-watch build-scss-watch build-types-watch",
     "prepare-release": "npm-run-all clean-dist build",
     "build": "npm-run-all build-esm build-scss build-types",
-    "build-esm": "swc src -d ./dist",
+    "build-esm": "swc -d ./dist --strip-leading-paths src",
     "build-esm-watch": "pnpm run build-esm --watch",
     "build-types": "tsc -P tsconfig.types.json",
     "build-types-watch": "pnpm run build-types --watch",

package/src/RootHtml.tsx

@@ -0,0 +1,95 @@
+import {
+  type HTMLAttributes,
+  type HtmlHTMLAttributes,
+  type ReactElement,
+  type ReactNode,
+} from "react";
+import { type PropsWithRef } from "./types.js";
+
+/**
+ * @remarks \@since 6.0.0
+ */
+export interface RootHtmlProps extends HtmlHTMLAttributes<HTMLHtmlElement> {
+  /** @defaultValue `"ltr"` */
+  dir?: string;
+
+  /** @defaultValue `"en"` */
+  lang?: string;
+
+  /**
+   * Any additional props to provide to the `<body>` element and also supports a
+   * `ref` if that is required for some reason. Using a `ref` would make your
+   * root layout a client component though.
+   */
+  bodyProps?: PropsWithRef<HTMLAttributes<HTMLBodyElement>, HTMLBodyElement>;
+
+  /**
+   * Convenience prop to replace `bodyProps={{ className: "custom-class-name" }}`.
+   */
+  bodyClassName?: string;
+
+  /**
+   * Any content to render before the `<body>` tag. This can be useful if you
+   * need to render a custom `<head>` element.
+   */
+  beforeBodyChildren?: ReactNode;
+
+  /**
+   * Any content to render after the `<body>` tag. This can be useful to insert
+   * `<script>` tags for analytics or other external libraries.
+   */
+  afterBodyChildren?: ReactNode;
+}
+
+/**
+ * **Server Component**
+ *
+ * This is mostly for creating the root html for next.js applications that
+ * defaults to setting the `dir="ltr"` and `lang="en"`. Additional props can be
+ * passed to the root `<html>` and `<body>` elements and children can be
+ * rendered before and after the `<body>` if needed.
+ *
+ * @example
+ * Simple Example
+ * ```tsx
+ * // src/app/layout.tsx
+ * import { RootHtml } from "@react-md/core";
+ * import { type ReactElement, type PropsWithChildren } from "react";
+ * import { Roboto_Flex } from "next/font/google";
+ *
+ * const roboto = Roboto_Flex({
+ *   subsets: ["latin"],
+ *   variable: "--roboto",
+ * });
+ *
+ * export default function RootLayout(props: PropsWithChildren): ReactElement {
+ *   const { children } = props;
+ *
+ *   return <RootHtml className={roboto.variable}>{children}</RootHtml>;
+ * }
+ * ```
+ *
+ * @remarks \@since 6.0.0
+ */
+export function RootHtml(props: RootHtmlProps): ReactElement {
+  const {
+    dir = "ltr",
+    lang = "en",
+    children,
+    bodyProps,
+    bodyClassName,
+    beforeBodyChildren,
+    afterBodyChildren,
+    ...remaining
+  } = props;
+
+  return (
+    <html dir={dir} lang={lang} {...remaining}>
+      {beforeBodyChildren}
+      <body {...bodyProps} className={bodyClassName || bodyProps?.className}>
+        {children}
+      </body>
+      {afterBodyChildren}
+    </html>
+  );
+}

package/src/__tests__/RootHtml.node.tsx

@@ -0,0 +1,46 @@
+/** @jest-environment node */
+/* eslint-disable testing-library/render-result-naming-convention */
+
+import { describe, expect, it } from "@jest/globals";
+import { renderToString } from "react-dom/server";
+import { RootHtml } from "../RootHtml.js";
+
+describe("RootHtml", () => {
+  it("should render the html and body elements with the default props", () => {
+    expect(renderToString(<RootHtml />)).toMatchSnapshot();
+  });
+
+  it("should allow a custom bodyClassName", () => {
+    expect(<RootHtml bodyClassName="body-class-name" />).toMatchSnapshot();
+  });
+
+  it("should allow the body className to be set through bodyProps when the bodyClassName prop is not provided", () => {
+    const html1 = renderToString(
+      <RootHtml bodyProps={{ className: "custom-body-class" }} />
+    );
+    const html2 = renderToString(
+      <RootHtml
+        bodyProps={{ className: "custom-body-name" }}
+        bodyClassName="body-class"
+      />
+    );
+
+    expect(html1).toContain("custom-body-class");
+    expect(html1).toMatchSnapshot();
+
+    expect(html2).not.toContain("custom-body-class");
+    expect(html2).toMatchSnapshot();
+  });
+
+  it("should allow the lang to be overwritten", () => {
+    expect(renderToString(<RootHtml lang="da" />)).toMatchSnapshot();
+  });
+
+  it("should allow the dir to be overwritten", () => {
+    expect(renderToString(<RootHtml dir="rtl" />)).toMatchSnapshot();
+  });
+
+  it("should allow the dir and lang to be overwritten", () => {
+    expect(renderToString(<RootHtml lang="ar" dir="rtl" />)).toMatchSnapshot();
+  });
+});

package/src/__tests__/__snapshots__/RootHtml.node.tsx.snap

@@ -0,0 +1,19 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`RootHtml should allow a custom bodyClassName 1`] = `
+<RootHtml
+  bodyClassName="body-class-name"
+/>
+`;
+
+exports[`RootHtml should allow the body className to be set through bodyProps when the bodyClassName prop is not provided 1`] = `"<html dir="ltr" lang="en"><body class="custom-body-class"></body></html>"`;
+
+exports[`RootHtml should allow the body className to be set through bodyProps when the bodyClassName prop is not provided 2`] = `"<html dir="ltr" lang="en"><body class="body-class"></body></html>"`;
+
+exports[`RootHtml should allow the dir and lang to be overwritten 1`] = `"<html dir="rtl" lang="ar"><body></body></html>"`;
+
+exports[`RootHtml should allow the dir to be overwritten 1`] = `"<html dir="rtl" lang="en"><body></body></html>"`;
+
+exports[`RootHtml should allow the lang to be overwritten 1`] = `"<html dir="ltr" lang="da"><body></body></html>"`;
+
+exports[`RootHtml should render the html and body elements with the default props 1`] = `"<html dir="ltr" lang="en"><body></body></html>"`;