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

package/dist/typography/Typography.d.ts

@@ -1,116 +1,5 @@
 import { type ElementType, type HTMLAttributes } from "react";
-import { 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 declare function typography(options?: NullableTypographyClassNameOptions): string;
+import { type TypographyClassNameOptions } from "./typographyStyles.js";
 /**
  * A union of the default supported elements that the `Typography` component can
  * be rendered as. This is mostly used for adding the correct `HTMLAttributes`

package/dist/typography/Typography.js

@@ -1,94 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { cnb } from "cnbuilder";
 import { forwardRef } from "react";
-import { cssUtils } from "../cssUtils.js";
-/**
- * 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 = {}) {
-    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 } from "./typographyStyles.js";
 /** @internal */ function getComponent(as, type) {
     if (as) {
         return as;

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 { 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"}
+{"version":3,"sources":["../../src/typography/Typography.tsx"],"sourcesContent":["import {\n  forwardRef,\n  type ElementType,\n  type HTMLAttributes,\n  type ReactElement,\n} from \"react\";\nimport {\n  typography,\n  type TypographyClassNameOptions,\n  type TypographyType,\n} from \"./typographyStyles.js\";\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":["forwardRef","typography","getComponent","as","type","Typography","props","ref","className","margin","fontStyle","fontWeight","textAlign","textColor","textDecoration","textTransform","textOverflow","children","remaining","Component"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";AAAA,SACEA,UAAU,QAIL,QAAQ;AACf,SACEC,UAAU,QAGL,wBAAwB;AAuB/B,cAAc,GACd,SAASC,aACPC,EAAyC,EACzCC,IAAoB;IAEpB,IAAID,IAAI;QACN,OAAOA;IACT;IAEA,OAAQC;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,MAAMC,2BAAaL,WACxB,SAASK,WAAWC,KAAK,EAAEC,GAAG;IAC5B,MAAM,EACJJ,EAAE,EACFC,OAAO,QAAQ,EACfI,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,YAAYjB,aAAaC,IAAIC;IACnC,qBACE,KAACe;QACE,GAAGD,SAAS;QACbX,KAAKA;QACLC,WAAWP,WAAW;YACpBG;YACAK;YACAC;YACAC;YACAC;YACAC;YACAC;YACAC;YACAC;YACAR;QACF;kBAECS;;AAGP,GACA"}

package/dist/typography/WritingDirectionProvider.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/typography/WritingDirectionProvider.tsx"],"sourcesContent":["\"use client\";\nimport {\n  Children,\n  cloneElement,\n  createContext,\n  isValidElement,\n  useCallback,\n  useContext,\n  useEffect,\n  useMemo,\n  useState,\n  type ReactElement,\n  type ReactNode,\n} from \"react\";\nimport { type UseStateInitializer } from \"../types.js\";\n\n/**\n * Note: unlike the `dir` DOM attribute, the `\"auto\"` value is not supported.\n *\n * @remarks \\@since 6.0.0\n */\nexport type Dir = \"ltr\" | \"rtl\";\n\n/** @remarks \\@since 6.0.0 */\nexport type DefaultDir = UseStateInitializer<Dir>;\n\n/** @remarks \\@since 2.3.0 */\nexport interface WritingDirectionContext {\n  /**\n   * The current writing direction that is being inherited.\n   */\n  dir: Dir;\n\n  /**\n   * Toggles the current writing direction for the first parent `Dir` component.\n   */\n  toggleDir(): void;\n}\n\n/** @internal */\ninterface InheritableContext extends WritingDirectionContext {\n  root: boolean;\n}\n\nconst context = createContext<InheritableContext>({\n  root: true,\n  dir: \"ltr\",\n  toggleDir: () => {\n    if (process.env.NODE_ENV !== \"production\") {\n      throw new Error(\n        \"Tried to toggle the current writing direction without initializing the `Dir` component.\"\n      );\n    }\n  },\n});\ncontext.displayName = \"WritingDirection\";\nconst { Provider } = context;\n\n/**\n * Gets the writing direction context which provides access to the current `dir`\n * and a `toggleDir` function.\n *\n * @example\n * Manually Changing the Writing Direction\n * ```tsx\n * import { useDir } from \"@react-md/core\";\n *\n * function Example() {\n *   const { dir, toggleDir } = useDir();\n *\n *   return (\n *     <>\n *       <p>{`The current dir is: \"${dir}\"`}</p>\n *       <button type=\"button\" onClick={toggleDir}>Toggle</button>\n *     </>\n *   );\n * }\n * ```\n *\n * @remarks \\@since 6.0.0\n */\nexport function useDir(): Readonly<WritingDirectionContext> {\n  const { root: _root, ...current } = useContext(context);\n  return current;\n}\n\n/** @remarks \\@since 6.0.0 */\nexport interface WritingDirectionProviderProps {\n  /**\n   * A single ReactElement child. If the `WritingDirection` has a parent\n   * `WritingDirection`, the child will have the `dir` prop cloned into this\n   * element.\n   */\n  children: ReactElement<{ dir?: Dir }> | ReactNode;\n\n  /**\n   * The default writing direction for your app or a subtree. To change the\n   * current writing direction, use the `useDir` hook to get access to the\n   * current `dir` and the `toggleDir` function.\n   *\n   * @defaultValue `\"ltr\"`\n   * @see {@link DEFAULT_WRITING_DIRECTION}\n   */\n  defaultDir?: DefaultDir;\n}\n\n/**\n * In the browser, this will default to the `<html>`'s `dir` value if one\n * exists. If the `dir` attribute does not exist, it will default to `\"ltr\"`.\n *\n * In node environments, this will default to `\"ltr\"`.\n *\n * @remarks \\@since 6.0.0\n */\nexport const DEFAULT_WRITING_DIRECTION = (): Dir => {\n  let dir: Dir = \"ltr\";\n  if (typeof document !== \"undefined\") {\n    const rootDir = document.documentElement.getAttribute(\"dir\");\n    dir = rootDir === \"rtl\" ? \"rtl\" : \"ltr\";\n  }\n\n  return dir;\n};\n\n/**\n * **Client Component**\n *\n * The `WritingDirection` component is used to handle the current writing\n * direction within your app as well as conditionally updating the writing\n * direction for small sections in your app. When this component is used for the\n * first time near the root of your React component tree, the current direction\n * will be applied to the root `<html>` element. Otherwise the current dir will\n * be cloned into the child element so it can be passed as a prop.\n *\n * Note: Since the `dir` is cloned into the child element, you need to make sure\n * that the child is either a DOM element or the `dir` prop is passed from your\n * custom component.\n *\n * @example\n * Root Setup\n * ```tsx\n * import { createRoot } from \"react-dom/client\";\n * import { WritingDirection } from \"@react-md/core\";\n * import App from \"./App.js\":\n *\n * const container = document.getElementById(\"root\");\n * const root = createRoot(container);\n *\n * root.render(\n *   <WritingDirection>\n *     <App />\n *   </WritingDirection>\n * );\n * ```\n *\n * @example\n * Supporting RTL Languages\n * ```tsx\n * import { createRoot } from \"react-dom/client\";\n * import { WritingDirection } from \"@react-md/core\";\n * import type { Dir } from \"@react-md/core\";\n * import App from \"./App.js\":\n *\n * const container = document.getElementById(\"root\");\n * const root = createRoot(container);\n *\n * // see https://meta.wikimedia.org/wiki/Template:List_of_language_names_ordered_by_code\n * const SUPPORTED_RTL_LANGUAGES = [\n *   \"ar\",\n *   \"arc\",\n *   \"ckb\",\n *   \"dv\",\n *   \"fa\",\n *   \"ha\",\n *   \"he\",\n *   \"khw\",\n *   \"ks\",\n *   \"ps\",\n *   \"sd\",\n *   \"ur\",\n *   \"uz_AF\",\n *   \"ti\",\n * ];\n *\n * const defaultDir = (): Dir => {\n *   if (SUPPORTED_RTL_LANGUAGES.includes(navigator.language)) {\n *     return \"rtl\"\n *   }\n *\n *   return \"ltr\";\n * }\n *\n * root.render(\n *   <WritingDirection defaultDir={defaultDir}>\n *     <App />\n *   </WritingDirection>\n * );\n * ```\n *\n * @remarks \\@since 6.0.0\n */\nexport function WritingDirectionProvider(\n  props: WritingDirectionProviderProps\n): ReactElement {\n  const { children, defaultDir = DEFAULT_WRITING_DIRECTION } = props;\n  const { root } = useContext(context);\n  const [dir, setDir] = useState(defaultDir);\n  useEffect(() => {\n    if (!root || typeof document === \"undefined\") {\n      return;\n    }\n\n    document.documentElement.setAttribute(\"dir\", dir);\n\n    return () => {\n      document.documentElement.removeAttribute(\"dir\");\n    };\n  }, [dir, root]);\n\n  const toggleDir = useCallback(() => {\n    setDir((prevDir) => (prevDir === \"ltr\" ? \"rtl\" : \"ltr\"));\n  }, []);\n\n  const value = useMemo<InheritableContext>(\n    () => ({ root: false, dir, toggleDir }),\n    [dir, toggleDir]\n  );\n  let child = Children.only(children);\n  if (!root && isValidElement<{ dir: Dir }>(child)) {\n    child = cloneElement(child, { dir });\n  }\n\n  return <Provider value={value}>{child}</Provider>;\n}\n"],"names":["Children","cloneElement","createContext","isValidElement","useCallback","useContext","useEffect","useMemo","useState","context","root","dir","toggleDir","process","env","NODE_ENV","Error","displayName","Provider","useDir","_root","current","DEFAULT_WRITING_DIRECTION","document","rootDir","documentElement","getAttribute","WritingDirectionProvider","props","children","defaultDir","setDir","setAttribute","removeAttribute","prevDir","value","child","only"],"mappings":"AAAA;;AACA,SACEA,QAAQ,EACRC,YAAY,EACZC,aAAa,EACbC,cAAc,EACdC,WAAW,EACXC,UAAU,EACVC,SAAS,EACTC,OAAO,EACPC,QAAQ,QAGH,QAAQ;AA+Bf,MAAMC,wBAAUP,cAAkC;IAChDQ,MAAM;IACNC,KAAK;IACLC,WAAW;QACT,IAAIC,QAAQC,GAAG,CAACC,QAAQ,KAAK,cAAc;YACzC,MAAM,IAAIC,MACR;QAEJ;IACF;AACF;AACAP,QAAQQ,WAAW,GAAG;AACtB,MAAM,EAAEC,QAAQ,EAAE,GAAGT;AAErB;;;;;;;;;;;;;;;;;;;;;;CAsBC,GACD,OAAO,SAASU;IACd,MAAM,EAAET,MAAMU,KAAK,EAAE,GAAGC,SAAS,GAAGhB,WAAWI;IAC/C,OAAOY;AACT;AAsBA;;;;;;;CAOC,GACD,OAAO,MAAMC,4BAA4B;IACvC,IAAIX,MAAW;IACf,IAAI,OAAOY,aAAa,aAAa;QACnC,MAAMC,UAAUD,SAASE,eAAe,CAACC,YAAY,CAAC;QACtDf,MAAMa,YAAY,QAAQ,QAAQ;IACpC;IAEA,OAAOb;AACT,EAAE;AAEF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA4EC,GACD,OAAO,SAASgB,yBACdC,KAAoC;IAEpC,MAAM,EAAEC,QAAQ,EAAEC,aAAaR,yBAAyB,EAAE,GAAGM;IAC7D,MAAM,EAAElB,IAAI,EAAE,GAAGL,WAAWI;IAC5B,MAAM,CAACE,KAAKoB,OAAO,GAAGvB,SAASsB;IAC/BxB,UAAU;QACR,IAAI,CAACI,QAAQ,OAAOa,aAAa,aAAa;YAC5C;QACF;QAEAA,SAASE,eAAe,CAACO,YAAY,CAAC,OAAOrB;QAE7C,OAAO;YACLY,SAASE,eAAe,CAACQ,eAAe,CAAC;QAC3C;IACF,GAAG;QAACtB;QAAKD;KAAK;IAEd,MAAME,YAAYR,YAAY;QAC5B2B,OAAO,CAACG,UAAaA,YAAY,QAAQ,QAAQ;IACnD,GAAG,EAAE;IAEL,MAAMC,QAAQ5B,QACZ,IAAO,CAAA;YAAEG,MAAM;YAAOC;YAAKC;QAAU,CAAA,GACrC;QAACD;QAAKC;KAAU;IAElB,IAAIwB,QAAQpC,SAASqC,IAAI,CAACR;IAC1B,IAAI,CAACnB,sBAAQP,eAA6BiC,QAAQ;QAChDA,sBAAQnC,aAAamC,OAAO;YAAEzB;QAAI;IACpC;IAEA,qBAAO,KAACO;QAASiB,OAAOA;kBAAQC;;AAClC"}
+{"version":3,"sources":["../../src/typography/WritingDirectionProvider.tsx"],"sourcesContent":["\"use client\";\nimport {\n  Children,\n  cloneElement,\n  createContext,\n  isValidElement,\n  useCallback,\n  useContext,\n  useEffect,\n  useMemo,\n  useState,\n  type ReactElement,\n  type ReactNode,\n} from \"react\";\nimport { type UseStateInitializer } from \"../types.js\";\n\n/**\n * Note: unlike the `dir` DOM attribute, the `\"auto\"` value is not supported.\n *\n * @remarks \\@since 6.0.0\n */\nexport type Dir = \"ltr\" | \"rtl\";\n\n/** @remarks \\@since 6.0.0 */\nexport type DefaultDir = UseStateInitializer<Dir>;\n\n/** @remarks \\@since 2.3.0 */\nexport interface WritingDirectionContext {\n  /**\n   * The current writing direction that is being inherited.\n   */\n  dir: Dir;\n\n  /**\n   * Toggles the current writing direction for the first parent `Dir` component.\n   */\n  toggleDir(): void;\n}\n\n/** @internal */\ninterface InheritableContext extends WritingDirectionContext {\n  root: boolean;\n}\n\nconst context = createContext<InheritableContext>({\n  root: true,\n  dir: \"ltr\",\n  toggleDir: () => {\n    if (process.env.NODE_ENV !== \"production\") {\n      throw new Error(\n        \"Tried to toggle the current writing direction without initializing the `Dir` component.\"\n      );\n    }\n  },\n});\ncontext.displayName = \"WritingDirection\";\nconst { Provider } = context;\n\n/**\n * Gets the writing direction context which provides access to the current `dir`\n * and a `toggleDir` function.\n *\n * @example\n * Manually Changing the Writing Direction\n * ```tsx\n * import { useDir } from \"@react-md/core\";\n *\n * function Example() {\n *   const { dir, toggleDir } = useDir();\n *\n *   return (\n *     <>\n *       <p>{`The current dir is: \"${dir}\"`}</p>\n *       <button type=\"button\" onClick={toggleDir}>Toggle</button>\n *     </>\n *   );\n * }\n * ```\n *\n * @remarks \\@since 6.0.0\n */\nexport function useDir(): Readonly<WritingDirectionContext> {\n  const { root: _root, ...current } = useContext(context);\n  return current;\n}\n\n/** @remarks \\@since 6.0.0 */\nexport interface WritingDirectionProviderProps {\n  /**\n   * A single ReactElement child. If the `WritingDirection` has a parent\n   * `WritingDirection`, the child will have the `dir` prop cloned into this\n   * element.\n   */\n  children: ReactElement<{ dir?: Dir }> | ReactNode;\n\n  /**\n   * The default writing direction for your app or a subtree. To change the\n   * current writing direction, use the `useDir` hook to get access to the\n   * current `dir` and the `toggleDir` function.\n   *\n   * @defaultValue `\"ltr\"`\n   * @see {@link DEFAULT_WRITING_DIRECTION}\n   */\n  defaultDir?: DefaultDir;\n}\n\n/**\n * In the browser, this will default to the `<html>`'s `dir` value if one\n * exists. If the `dir` attribute does not exist, it will default to `\"ltr\"`.\n *\n * In node environments, this will default to `\"ltr\"`.\n *\n * @remarks \\@since 6.0.0\n */\nexport const DEFAULT_WRITING_DIRECTION = (): Dir => {\n  let dir: Dir = \"ltr\";\n  if (typeof document !== \"undefined\") {\n    const rootDir = document.documentElement.getAttribute(\"dir\");\n    dir = rootDir === \"rtl\" ? \"rtl\" : \"ltr\";\n  }\n\n  return dir;\n};\n\n/**\n * **Client Component**\n *\n * The `WritingDirection` component is used to handle the current writing\n * direction within your app as well as conditionally updating the writing\n * direction for small sections in your app. When this component is used for the\n * first time near the root of your React component tree, the current direction\n * will be applied to the root `<html>` element. Otherwise the current dir will\n * be cloned into the child element so it can be passed as a prop.\n *\n * Note: Since the `dir` is cloned into the child element, you need to make sure\n * that the child is either a DOM element or the `dir` prop is passed from your\n * custom component.\n *\n * @example\n * Root Setup\n * ```tsx\n * import { createRoot } from \"react-dom/client\";\n * import { WritingDirection } from \"@react-md/core\";\n * import App from \"./App.js\":\n *\n * const container = document.getElementById(\"root\");\n * const root = createRoot(container);\n *\n * root.render(\n *   <WritingDirection>\n *     <App />\n *   </WritingDirection>\n * );\n * ```\n *\n * @example\n * Supporting RTL Languages\n * ```tsx\n * import { createRoot } from \"react-dom/client\";\n * import { WritingDirection } from \"@react-md/core\";\n * import type { Dir } from \"@react-md/core\";\n * import App from \"./App.js\":\n *\n * const container = document.getElementById(\"root\");\n * const root = createRoot(container);\n *\n * // see https://meta.wikimedia.org/wiki/Template:List_of_language_names_ordered_by_code\n * const SUPPORTED_RTL_LANGUAGES = [\n *   \"ar\",\n *   \"arc\",\n *   \"ckb\",\n *   \"dv\",\n *   \"fa\",\n *   \"ha\",\n *   \"he\",\n *   \"khw\",\n *   \"ks\",\n *   \"ps\",\n *   \"sd\",\n *   \"ur\",\n *   \"uz_AF\",\n *   \"ti\",\n * ];\n *\n * const defaultDir = (): Dir => {\n *   if (SUPPORTED_RTL_LANGUAGES.includes(navigator.language)) {\n *     return \"rtl\"\n *   }\n *\n *   return \"ltr\";\n * }\n *\n * root.render(\n *   <WritingDirection defaultDir={defaultDir}>\n *     <App />\n *   </WritingDirection>\n * );\n * ```\n *\n * @remarks \\@since 6.0.0\n */\nexport function WritingDirectionProvider(\n  props: WritingDirectionProviderProps\n): ReactElement {\n  const { children, defaultDir = DEFAULT_WRITING_DIRECTION } = props;\n  const { root } = useContext(context);\n  const [dir, setDir] = useState(defaultDir);\n  useEffect(() => {\n    if (!root || typeof document === \"undefined\") {\n      return;\n    }\n\n    document.documentElement.setAttribute(\"dir\", dir);\n\n    return () => {\n      document.documentElement.removeAttribute(\"dir\");\n    };\n  }, [dir, root]);\n\n  const toggleDir = useCallback(() => {\n    setDir((prevDir) => (prevDir === \"ltr\" ? \"rtl\" : \"ltr\"));\n  }, []);\n\n  const value = useMemo<InheritableContext>(\n    () => ({ root: false, dir, toggleDir }),\n    [dir, toggleDir]\n  );\n  let child = Children.only(children);\n  if (!root && isValidElement<{ dir: Dir }>(child)) {\n    child = cloneElement(child, { dir });\n  }\n\n  return <Provider value={value}>{child}</Provider>;\n}\n"],"names":["Children","cloneElement","createContext","isValidElement","useCallback","useContext","useEffect","useMemo","useState","context","root","dir","toggleDir","process","env","NODE_ENV","Error","displayName","Provider","useDir","_root","current","DEFAULT_WRITING_DIRECTION","document","rootDir","documentElement","getAttribute","WritingDirectionProvider","props","children","defaultDir","setDir","setAttribute","removeAttribute","prevDir","value","child","only"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA;;AACA,SACEA,QAAQ,EACRC,YAAY,EACZC,aAAa,EACbC,cAAc,EACdC,WAAW,EACXC,UAAU,EACVC,SAAS,EACTC,OAAO,EACPC,QAAQ,QAGH,QAAQ;AA+Bf,MAAMC,wBAAUP,cAAkC;IAChDQ,MAAM;IACNC,KAAK;IACLC,WAAW;QACT,IAAIC,QAAQC,GAAG,CAACC,QAAQ,KAAK,cAAc;YACzC,MAAM,IAAIC,MACR;QAEJ;IACF;AACF;AACAP,QAAQQ,WAAW,GAAG;AACtB,MAAM,EAAEC,QAAQ,EAAE,GAAGT;AAErB;;;;;;;;;;;;;;;;;;;;;;CAsBC,GACD,OAAO,SAASU;IACd,MAAM,EAAET,MAAMU,KAAK,EAAE,GAAGC,SAAS,GAAGhB,WAAWI;IAC/C,OAAOY;AACT;AAsBA;;;;;;;CAOC,GACD,OAAO,MAAMC,4BAA4B;IACvC,IAAIX,MAAW;IACf,IAAI,OAAOY,aAAa,aAAa;QACnC,MAAMC,UAAUD,SAASE,eAAe,CAACC,YAAY,CAAC;QACtDf,MAAMa,YAAY,QAAQ,QAAQ;IACpC;IAEA,OAAOb;AACT,EAAE;AAEF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA4EC,GACD,OAAO,SAASgB,yBACdC,KAAoC;IAEpC,MAAM,EAAEC,QAAQ,EAAEC,aAAaR,yBAAyB,EAAE,GAAGM;IAC7D,MAAM,EAAElB,IAAI,EAAE,GAAGL,WAAWI;IAC5B,MAAM,CAACE,KAAKoB,OAAO,GAAGvB,SAASsB;IAC/BxB,UAAU;QACR,IAAI,CAACI,QAAQ,OAAOa,aAAa,aAAa;YAC5C;QACF;QAEAA,SAASE,eAAe,CAACO,YAAY,CAAC,OAAOrB;QAE7C,OAAO;YACLY,SAASE,eAAe,CAACQ,eAAe,CAAC;QAC3C;IACF,GAAG;QAACtB;QAAKD;KAAK;IAEd,MAAME,YAAYR,YAAY;QAC5B2B,OAAO,CAACG,UAAaA,YAAY,QAAQ,QAAQ;IACnD,GAAG,EAAE;IAEL,MAAMC,QAAQ5B,QACZ,IAAO,CAAA;YAAEG,MAAM;YAAOC;YAAKC;QAAU,CAAA,GACrC;QAACD;QAAKC;KAAU;IAElB,IAAIwB,QAAQpC,SAASqC,IAAI,CAACR;IAC1B,IAAI,CAACnB,sBAAQP,eAA6BiC,QAAQ;QAChDA,sBAAQnC,aAAamC,OAAO;YAAEzB;QAAI;IACpC;IAEA,qBAAO,KAACO;QAASiB,OAAOA;kBAAQC;;AAClC"}

package/dist/typography/textContainerStyles.d.ts

@@ -0,0 +1,40 @@
+declare module "react" {
+    interface CSSProperties {
+        "--rmd-line-length"?: string | number;
+        "--rmd-text-container-padding"?: string | number;
+    }
+}
+/**
+ * @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 declare function textContainer(options?: TextContainerClassNameOptions): string;

package/dist/typography/textContainerStyles.js

@@ -0,0 +1,32 @@
+import { cnb } from "cnbuilder";
+import { bem } from "../utils/bem.js";
+const styles = bem("rmd-text-container");
+/**
+ * @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 = {}) {
+    const { className } = options;
+    return cnb(styles(), className);
+}
+
+//# sourceMappingURL=textContainerStyles.js.map

package/dist/typography/textContainerStyles.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/typography/textContainerStyles.ts"],"sourcesContent":["import { cnb } from \"cnbuilder\";\nimport { bem } from \"../utils/bem.js\";\n\ndeclare module \"react\" {\n  interface CSSProperties {\n    \"--rmd-line-length\"?: string | number;\n    \"--rmd-text-container-padding\"?: string | number;\n  }\n}\n\nconst styles = bem(\"rmd-text-container\");\n\n/**\n * @remarks \\@since 6.0.0\n */\nexport interface TextContainerClassNameOptions {\n  /**\n   * An optional className to merge with typography text container styles.\n   */\n  className?: string;\n}\n\n/**\n * @example\n * Simple Example\n * ```tsx\n * import { textContainer, Typography } from \"@react-md/core\";\n *\n * function Example() {\n *   return (\n *     <main className={textContainer()}>\n *       <Typography type=\"headline-1\">Heading</Typography>\n *       <Typography>\n *         Pretend this is a giant paragraph of text that wraps multiple lines.\n *       </Typography>\n *       <Typography>\n *         Pretend this is another giant paragraph of text that wraps multiple\n *         lines.\n *       </Typography>\n *     </main>\n *   ):\n * }\n * ```\n *\n * @remarks \\@since 6.0.0\n */\nexport function textContainer(\n  options: TextContainerClassNameOptions = {}\n): string {\n  const { className } = options;\n\n  return cnb(styles(), className);\n}\n"],"names":["cnb","bem","styles","textContainer","options","className"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA,SAASA,GAAG,QAAQ,YAAY;AAChC,SAASC,GAAG,QAAQ,kBAAkB;AAStC,MAAMC,SAASD,IAAI;AAYnB;;;;;;;;;;;;;;;;;;;;;;;CAuBC,GACD,OAAO,SAASE,cACdC,UAAyC,CAAC,CAAC;IAE3C,MAAM,EAAEC,SAAS,EAAE,GAAGD;IAEtB,OAAOJ,IAAIE,UAAUG;AACvB"}

package/dist/typography/typographyStyles.d.ts

@@ -0,0 +1,112 @@
+import { 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 declare function typography(options?: NullableTypographyClassNameOptions): string;

package/dist/typography/typographyStyles.js

@@ -0,0 +1,91 @@
+import { cnb } from "cnbuilder";
+import { cssUtils } from "../cssUtils.js";
+/**
+ * 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 = {}) {
+    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));
+}
+
+//# sourceMappingURL=typographyStyles.js.map

package/dist/typography/typographyStyles.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/typography/typographyStyles.ts"],"sourcesContent":["import { cnb } from \"cnbuilder\";\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"],"names":["cnb","cssUtils","typography","options","type"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA,SAASA,GAAG,QAAQ,YAAY;AAChC,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,OAAOH,IACL,kBACAI,QAAQ,CAAC,gBAAgB,EAAEA,KAAK,CAAC,EACjCH,SAASE;AAEb"}

package/dist/useAsyncAction.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/useAsyncAction.ts"],"sourcesContent":["\"use client\";\nimport { useCallback, useState } from \"react\";\nimport type { NonNullRef, UseStateSetter } from \"./types.js\";\nimport { useUnmounted } from \"./useUnmounted.js\";\n\n/**\n * @remarks \\@since 6.0.0\n */\nexport type AsyncActionFunction<Args extends unknown[]> = (\n  ...args: Args\n) => Promise<void>;\n\n/**\n * @remarks \\@since 6.0.0\n */\nexport type HandleAsyncAction = <Args extends unknown[]>(\n  action: AsyncActionFunction<Args>\n) => AsyncActionFunction<Args>;\n\n/**\n * @remarks \\@since 6.0.0\n */\nexport interface AsyncActionOptions {\n  /** @defaultValue `false` */\n  disabled?: boolean;\n}\n\n/**\n * @remarks \\@since 6.0.0\n */\nexport interface AsyncActionImplementation {\n  pending: boolean;\n  unmounted: NonNullRef<boolean>;\n  setPending: UseStateSetter<boolean>;\n  handleAsync: HandleAsyncAction;\n}\n\n/**\n * A simple utility hook for triggering a pending state while an async function\n * is running. This is really only useful if you aren't using something like\n * `react-query`, `@reduxjs/toolkit/query`, `@apollo/client`, etc for API calls\n * which have a built-in pending state for mutations.\n *\n * @example\n * Simple Example (Async Button)\n * ```tsx\n * import type { ButtonProps } from \"@react-md/core\";\n * import { box, Button, CircularProgress, useAsyncAction } from \"@react-md/core\";\n * import { cnb } from \"cnbuilder\";\n * import type { MouseEvent, ReactElement } from \"react\";\n *\n * import styles from \"./AsyncButton.module.scss\";\n *\n * export interface AsyncButtonProps extends ButtonProps {\n *   onClick(event: MouseEvent<HTMLButtonElement>): Promise<void>;\n * }\n *\n * export function AsyncButton(props: AsyncButtonProps): ReactElement {\n *   const { onClick, children, theme, className, disabled, ...remaining } = props;\n *   const { handleAsync, pending } = useAsyncAction({ disabled });\n *\n *   return (\n *     <Button\n *       {...remaining}\n *       aria-disabled={pending || undefined}\n *       disabled={disabled}\n *       className={cnb(pending && styles.loading, className)}\n *       theme={pending ? \"disabled\" : theme}\n *       onClick={handleAsync(onClick)}\n *     >\n *       {children}\n *       {pending && (\n *         <span\n *           className={box({\n *             align: \"center\",\n *             disablePadding: true,\n *             className: styles.overlay,\n *           })}\n *         >\n *           <CircularProgress />\n *         </span>\n *       )}\n *     </Button>\n *   );\n * }\n *\n * // `AsyncButton.module.scss`\n * // hide everything in the button except for the overlay containing the circular\n * // progress\n * .loading > *:not(.overlay) {\n *   opacity: 0;\n * }\n *\n * .overlay {\n *   border-radius: inherit;\n *   box-shadow: inherit;\n *   inset: 0;\n *   position: absolute;\n *   z-index: 1;\n * }\n * ```\n *\n * @example\n * Confirmation Dialog with Overlay\n * ```tsx\n * import {\n *   Button,\n *   DialogHeader,\n *   DialogContent,\n *   DialogFooter,\n *   Form,\n *   useAsyncAction,\n * } from \"@react-md/core\";\n * import CloseIcon from \"@react-md/material-icons/CloseIcon\";\n * import type { ReactElement } from \"react\";\n * import { useId } from \"react\";\n *\n * interface ExampleProps {\n *   hide(); void;\n *   submit(): Promise<void>\n * }\n *\n * function Example({ hide, submit }: ExampleProps): ReactElement {\n *   const { handleAsync, pending } = useAsyncAction();\n *   const formId = useId();\n *\n *   return (\n *     <>\n *       <DialogHeader>\n *         <DialogTitle>Some Title</DialogTitle>\n *         <Button aria-label=\"Close\" onClick={hide} disabled={pending}>\n *           <CloseIcon />\n *         </Button>\n *       </DialogHeader>\n *       <DialogContent>\n *         <Form\n *           id={formId}\n *           onReset={hide}\n *           onSubmit={handleAsync(submit)}\n *         >\n *           // pretend content\n *         </Form>\n *       </DialogContent>\n *       <DialogFooter>\n *         <Button\n *           type=\"reset\"\n *           form={formId}\n *           disabled={pending}\n *         >\n *           Cancel\n *         </Button>\n *         <Button\n *           type=\"submit\"\n *           form={formId}\n *           disabled={pending}\n *         >\n *           Confirm\n *         </Button>\n *       </DialogFooter>\n *     </>\n *   );\n * }\n * ```\n *\n * @remarks \\@since 6.0.0\n */\nexport function useAsyncAction(\n  options: AsyncActionOptions = {}\n): AsyncActionImplementation {\n  const { disabled } = options;\n\n  const [pending, setPending] = useState(false);\n  const unmounted = useUnmounted();\n\n  const handleAsync = useCallback<HandleAsyncAction>(\n    (action) =>\n      async (...args) => {\n        if (pending || disabled) {\n          return;\n        }\n\n        setPending(true);\n        try {\n          await action(...args);\n        } finally {\n          if (!unmounted.current) {\n            setPending(false);\n          }\n        }\n      },\n    [disabled, pending, unmounted]\n  );\n\n  return {\n    pending,\n    unmounted,\n    setPending,\n    handleAsync,\n  };\n}\n"],"names":["useCallback","useState","useUnmounted","useAsyncAction","options","disabled","pending","setPending","unmounted","handleAsync","action","args","current"],"mappings":"AAAA;AACA,SAASA,WAAW,EAAEC,QAAQ,QAAQ,QAAQ;AAE9C,SAASC,YAAY,QAAQ,oBAAoB;AAkCjD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAgIC,GACD,OAAO,SAASC,eACdC,UAA8B,CAAC,CAAC;IAEhC,MAAM,EAAEC,QAAQ,EAAE,GAAGD;IAErB,MAAM,CAACE,SAASC,WAAW,GAAGN,SAAS;IACvC,MAAMO,YAAYN;IAElB,MAAMO,cAAcT,YAClB,CAACU,SACC,OAAO,GAAGC;YACR,IAAIL,WAAWD,UAAU;gBACvB;YACF;YAEAE,WAAW;YACX,IAAI;gBACF,MAAMG,UAAUC;YAClB,SAAU;gBACR,IAAI,CAACH,UAAUI,OAAO,EAAE;oBACtBL,WAAW;gBACb;YACF;QACF,GACF;QAACF;QAAUC;QAASE;KAAU;IAGhC,OAAO;QACLF;QACAE;QACAD;QACAE;IACF;AACF"}
+{"version":3,"sources":["../src/useAsyncAction.ts"],"sourcesContent":["\"use client\";\nimport { useCallback, useState } from \"react\";\nimport type { NonNullRef, UseStateSetter } from \"./types.js\";\nimport { useUnmounted } from \"./useUnmounted.js\";\n\n/**\n * @remarks \\@since 6.0.0\n */\nexport type AsyncActionFunction<Args extends unknown[]> = (\n  ...args: Args\n) => Promise<void>;\n\n/**\n * @remarks \\@since 6.0.0\n */\nexport type HandleAsyncAction = <Args extends unknown[]>(\n  action: AsyncActionFunction<Args>\n) => AsyncActionFunction<Args>;\n\n/**\n * @remarks \\@since 6.0.0\n */\nexport interface AsyncActionOptions {\n  /** @defaultValue `false` */\n  disabled?: boolean;\n}\n\n/**\n * @remarks \\@since 6.0.0\n */\nexport interface AsyncActionImplementation {\n  pending: boolean;\n  unmounted: NonNullRef<boolean>;\n  setPending: UseStateSetter<boolean>;\n  handleAsync: HandleAsyncAction;\n}\n\n/**\n * A simple utility hook for triggering a pending state while an async function\n * is running. This is really only useful if you aren't using something like\n * `react-query`, `@reduxjs/toolkit/query`, `@apollo/client`, etc for API calls\n * which have a built-in pending state for mutations.\n *\n * @example\n * Simple Example (Async Button)\n * ```tsx\n * import type { ButtonProps } from \"@react-md/core\";\n * import { box, Button, CircularProgress, useAsyncAction } from \"@react-md/core\";\n * import { cnb } from \"cnbuilder\";\n * import type { MouseEvent, ReactElement } from \"react\";\n *\n * import styles from \"./AsyncButton.module.scss\";\n *\n * export interface AsyncButtonProps extends ButtonProps {\n *   onClick(event: MouseEvent<HTMLButtonElement>): Promise<void>;\n * }\n *\n * export function AsyncButton(props: AsyncButtonProps): ReactElement {\n *   const { onClick, children, theme, className, disabled, ...remaining } = props;\n *   const { handleAsync, pending } = useAsyncAction({ disabled });\n *\n *   return (\n *     <Button\n *       {...remaining}\n *       aria-disabled={pending || undefined}\n *       disabled={disabled}\n *       className={cnb(pending && styles.loading, className)}\n *       theme={pending ? \"disabled\" : theme}\n *       onClick={handleAsync(onClick)}\n *     >\n *       {children}\n *       {pending && (\n *         <span\n *           className={box({\n *             align: \"center\",\n *             disablePadding: true,\n *             className: styles.overlay,\n *           })}\n *         >\n *           <CircularProgress />\n *         </span>\n *       )}\n *     </Button>\n *   );\n * }\n *\n * // `AsyncButton.module.scss`\n * // hide everything in the button except for the overlay containing the circular\n * // progress\n * .loading > *:not(.overlay) {\n *   opacity: 0;\n * }\n *\n * .overlay {\n *   border-radius: inherit;\n *   box-shadow: inherit;\n *   inset: 0;\n *   position: absolute;\n *   z-index: 1;\n * }\n * ```\n *\n * @example\n * Confirmation Dialog with Overlay\n * ```tsx\n * import {\n *   Button,\n *   DialogHeader,\n *   DialogContent,\n *   DialogFooter,\n *   Form,\n *   useAsyncAction,\n * } from \"@react-md/core\";\n * import CloseIcon from \"@react-md/material-icons/CloseIcon\";\n * import type { ReactElement } from \"react\";\n * import { useId } from \"react\";\n *\n * interface ExampleProps {\n *   hide(); void;\n *   submit(): Promise<void>\n * }\n *\n * function Example({ hide, submit }: ExampleProps): ReactElement {\n *   const { handleAsync, pending } = useAsyncAction();\n *   const formId = useId();\n *\n *   return (\n *     <>\n *       <DialogHeader>\n *         <DialogTitle>Some Title</DialogTitle>\n *         <Button aria-label=\"Close\" onClick={hide} disabled={pending}>\n *           <CloseIcon />\n *         </Button>\n *       </DialogHeader>\n *       <DialogContent>\n *         <Form\n *           id={formId}\n *           onReset={hide}\n *           onSubmit={handleAsync(submit)}\n *         >\n *           // pretend content\n *         </Form>\n *       </DialogContent>\n *       <DialogFooter>\n *         <Button\n *           type=\"reset\"\n *           form={formId}\n *           disabled={pending}\n *         >\n *           Cancel\n *         </Button>\n *         <Button\n *           type=\"submit\"\n *           form={formId}\n *           disabled={pending}\n *         >\n *           Confirm\n *         </Button>\n *       </DialogFooter>\n *     </>\n *   );\n * }\n * ```\n *\n * @remarks \\@since 6.0.0\n */\nexport function useAsyncAction(\n  options: AsyncActionOptions = {}\n): AsyncActionImplementation {\n  const { disabled } = options;\n\n  const [pending, setPending] = useState(false);\n  const unmounted = useUnmounted();\n\n  const handleAsync = useCallback<HandleAsyncAction>(\n    (action) =>\n      async (...args) => {\n        if (pending || disabled) {\n          return;\n        }\n\n        setPending(true);\n        try {\n          await action(...args);\n        } finally {\n          if (!unmounted.current) {\n            setPending(false);\n          }\n        }\n      },\n    [disabled, pending, unmounted]\n  );\n\n  return {\n    pending,\n    unmounted,\n    setPending,\n    handleAsync,\n  };\n}\n"],"names":["useCallback","useState","useUnmounted","useAsyncAction","options","disabled","pending","setPending","unmounted","handleAsync","action","args","current"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA;AACA,SAASA,WAAW,EAAEC,QAAQ,QAAQ,QAAQ;AAE9C,SAASC,YAAY,QAAQ,oBAAoB;AAkCjD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAgIC,GACD,OAAO,SAASC,eACdC,UAA8B,CAAC,CAAC;IAEhC,MAAM,EAAEC,QAAQ,EAAE,GAAGD;IAErB,MAAM,CAACE,SAASC,WAAW,GAAGN,SAAS;IACvC,MAAMO,YAAYN;IAElB,MAAMO,cAAcT,YAClB,CAACU,SACC,OAAO,GAAGC;YACR,IAAIL,WAAWD,UAAU;gBACvB;YACF;YAEAE,WAAW;YACX,IAAI;gBACF,MAAMG,UAAUC;YAClB,SAAU;gBACR,IAAI,CAACH,UAAUI,OAAO,EAAE;oBACtBL,WAAW;gBACb;YACF;QACF,GACF;QAACF;QAAUC;QAASE;KAAU;IAGhC,OAAO;QACLF;QACAE;QACAD;QACAE;IACF;AACF"}