@react-md/core 1.0.0-next.20 → 1.0.0-next.21

package/dist/dialog/DialogContent.js

@@ -5,9 +5,12 @@ import { dialogContent } from "./styles.js";
  * The `DialogContent` component should be used as a child of the `Dialog`
  * component that applies some reasonable default styles. Look at the `Dialog`
  * or `FixedDialog` components for example usage.
- */ export const DialogContent = /*#__PURE__*/ forwardRef(function DialogContent({ children, className, disablePadding = false, ...props }, ref) {
+ *
+ * @see {@link https://next.react-md.dev/components/dialog | Dialog Demos}
+ */ export const DialogContent = /*#__PURE__*/ forwardRef(function DialogContent(props, ref) {
+    const { children, className, disablePadding = false, ...remaining } = props;
     return /*#__PURE__*/ _jsx("div", {
-        ...props,
+        ...remaining,
         ref: ref,
         className: dialogContent({
             className,

package/dist/dialog/DialogContent.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/dialog/DialogContent.tsx"],"sourcesContent":["import { type HTMLAttributes, forwardRef } from \"react\";\n\nimport { type DialogContentClassNameOptions, dialogContent } from \"./styles.js\";\n\nexport interface DialogContentProps\n  extends HTMLAttributes<HTMLDivElement>,\n    DialogContentClassNameOptions {}\n\n/**\n * The `DialogContent` component should be used as a child of the `Dialog`\n * component that applies some reasonable default styles. Look at the `Dialog`\n * or `FixedDialog` components for example usage.\n */\nexport const DialogContent = forwardRef<HTMLDivElement, DialogContentProps>(\n  function DialogContent(\n    { children, className, disablePadding = false, ...props },\n    ref\n  ) {\n    return (\n      <div\n        {...props}\n        ref={ref}\n        className={dialogContent({\n          className,\n          disablePadding,\n        })}\n      >\n        {children}\n      </div>\n    );\n  }\n);\n"],"names":["forwardRef","dialogContent","DialogContent","children","className","disablePadding","props","ref","div"],"mappings":";AAAA,SAA8BA,UAAU,QAAQ,QAAQ;AAExD,SAA6CC,aAAa,QAAQ,cAAc;AAMhF;;;;CAIC,GACD,OAAO,MAAMC,8BAAgBF,WAC3B,SAASE,cACP,EAAEC,QAAQ,EAAEC,SAAS,EAAEC,iBAAiB,KAAK,EAAE,GAAGC,OAAO,EACzDC,GAAG;IAEH,qBACE,KAACC;QACE,GAAGF,KAAK;QACTC,KAAKA;QACLH,WAAWH,cAAc;YACvBG;YACAC;QACF;kBAECF;;AAGP,GACA"}
+{"version":3,"sources":["../../src/dialog/DialogContent.tsx"],"sourcesContent":["import { type HTMLAttributes, forwardRef } from \"react\";\n\nimport { type DialogContentClassNameOptions, dialogContent } from \"./styles.js\";\n\nexport interface DialogContentProps\n  extends HTMLAttributes<HTMLDivElement>,\n    DialogContentClassNameOptions {}\n\n/**\n * The `DialogContent` component should be used as a child of the `Dialog`\n * component that applies some reasonable default styles. Look at the `Dialog`\n * or `FixedDialog` components for example usage.\n *\n * @see {@link https://next.react-md.dev/components/dialog | Dialog Demos}\n */\nexport const DialogContent = forwardRef<HTMLDivElement, DialogContentProps>(\n  function DialogContent(props, ref) {\n    const { children, className, disablePadding = false, ...remaining } = props;\n    return (\n      <div\n        {...remaining}\n        ref={ref}\n        className={dialogContent({\n          className,\n          disablePadding,\n        })}\n      >\n        {children}\n      </div>\n    );\n  }\n);\n"],"names":["forwardRef","dialogContent","DialogContent","props","ref","children","className","disablePadding","remaining","div"],"mappings":";AAAA,SAA8BA,UAAU,QAAQ,QAAQ;AAExD,SAA6CC,aAAa,QAAQ,cAAc;AAMhF;;;;;;CAMC,GACD,OAAO,MAAMC,8BAAgBF,WAC3B,SAASE,cAAcC,KAAK,EAAEC,GAAG;IAC/B,MAAM,EAAEC,QAAQ,EAAEC,SAAS,EAAEC,iBAAiB,KAAK,EAAE,GAAGC,WAAW,GAAGL;IACtE,qBACE,KAACM;QACE,GAAGD,SAAS;QACbJ,KAAKA;QACLE,WAAWL,cAAc;YACvBK;YACAC;QACF;kBAECF;;AAGP,GACA"}

package/dist/dialog/DialogFooter.d.ts

@@ -5,5 +5,7 @@ export interface DialogFooterProps extends HTMLAttributes<HTMLDivElement>, Dialo
 /**
  * The `DialogFooter` is a simple `<footer>` with simple `display: flex` styles
  * applied. Look at the `Dialog` or `FixedDialog` components for example usage.
+ *
+ * @see {@link https://next.react-md.dev/components/dialog | Dialog Demos}
  */
 export declare const DialogFooter: import("react").ForwardRefExoticComponent<DialogFooterProps & import("react").RefAttributes<HTMLDivElement>>;

package/dist/dialog/DialogFooter.js

@@ -4,9 +4,12 @@ import { dialogFooter } from "./styles.js";
 /**
  * The `DialogFooter` is a simple `<footer>` with simple `display: flex` styles
  * applied. Look at the `Dialog` or `FixedDialog` components for example usage.
- */ export const DialogFooter = /*#__PURE__*/ forwardRef(function DialogFooter({ children, className, align = "end", ...props }, ref) {
+ *
+ * @see {@link https://next.react-md.dev/components/dialog | Dialog Demos}
+ */ export const DialogFooter = /*#__PURE__*/ forwardRef(function DialogFooter(props, ref) {
+    const { children, className, align = "end", ...remaining } = props;
     return /*#__PURE__*/ _jsx("footer", {
-        ...props,
+        ...remaining,
         ref: ref,
         className: dialogFooter({
             align,

package/dist/dialog/DialogFooter.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/dialog/DialogFooter.tsx"],"sourcesContent":["import { type HTMLAttributes, forwardRef } from \"react\";\n\nimport { type DialogFooterClassNameOptions, dialogFooter } from \"./styles.js\";\n\nexport interface DialogFooterProps\n  extends HTMLAttributes<HTMLDivElement>,\n    DialogFooterClassNameOptions {}\n\n/**\n * The `DialogFooter` is a simple `<footer>` with simple `display: flex` styles\n * applied. Look at the `Dialog` or `FixedDialog` components for example usage.\n */\nexport const DialogFooter = forwardRef<HTMLDivElement, DialogFooterProps>(\n  function DialogFooter({ children, className, align = \"end\", ...props }, ref) {\n    return (\n      <footer\n        {...props}\n        ref={ref}\n        className={dialogFooter({\n          align,\n          className,\n        })}\n      >\n        {children}\n      </footer>\n    );\n  }\n);\n"],"names":["forwardRef","dialogFooter","DialogFooter","children","className","align","props","ref","footer"],"mappings":";AAAA,SAA8BA,UAAU,QAAQ,QAAQ;AAExD,SAA4CC,YAAY,QAAQ,cAAc;AAM9E;;;CAGC,GACD,OAAO,MAAMC,6BAAeF,WAC1B,SAASE,aAAa,EAAEC,QAAQ,EAAEC,SAAS,EAAEC,QAAQ,KAAK,EAAE,GAAGC,OAAO,EAAEC,GAAG;IACzE,qBACE,KAACC;QACE,GAAGF,KAAK;QACTC,KAAKA;QACLH,WAAWH,aAAa;YACtBI;YACAD;QACF;kBAECD;;AAGP,GACA"}
+{"version":3,"sources":["../../src/dialog/DialogFooter.tsx"],"sourcesContent":["import { type HTMLAttributes, forwardRef } from \"react\";\n\nimport { type DialogFooterClassNameOptions, dialogFooter } from \"./styles.js\";\n\nexport interface DialogFooterProps\n  extends HTMLAttributes<HTMLDivElement>,\n    DialogFooterClassNameOptions {}\n\n/**\n * The `DialogFooter` is a simple `<footer>` with simple `display: flex` styles\n * applied. Look at the `Dialog` or `FixedDialog` components for example usage.\n *\n * @see {@link https://next.react-md.dev/components/dialog | Dialog Demos}\n */\nexport const DialogFooter = forwardRef<HTMLDivElement, DialogFooterProps>(\n  function DialogFooter(props, ref) {\n    const { children, className, align = \"end\", ...remaining } = props;\n    return (\n      <footer\n        {...remaining}\n        ref={ref}\n        className={dialogFooter({\n          align,\n          className,\n        })}\n      >\n        {children}\n      </footer>\n    );\n  }\n);\n"],"names":["forwardRef","dialogFooter","DialogFooter","props","ref","children","className","align","remaining","footer"],"mappings":";AAAA,SAA8BA,UAAU,QAAQ,QAAQ;AAExD,SAA4CC,YAAY,QAAQ,cAAc;AAM9E;;;;;CAKC,GACD,OAAO,MAAMC,6BAAeF,WAC1B,SAASE,aAAaC,KAAK,EAAEC,GAAG;IAC9B,MAAM,EAAEC,QAAQ,EAAEC,SAAS,EAAEC,QAAQ,KAAK,EAAE,GAAGC,WAAW,GAAGL;IAC7D,qBACE,KAACM;QACE,GAAGD,SAAS;QACbJ,KAAKA;QACLE,WAAWL,aAAa;YACtBM;YACAD;QACF;kBAECD;;AAGP,GACA"}

package/dist/dialog/DialogHeader.d.ts

@@ -1,8 +1,20 @@
-import { type HTMLAttributes } from "react";
-export type DialogHeaderProps = HTMLAttributes<HTMLDivElement>;
+import { type BoxProps } from "../box/Box.js";
+import { type BoxAlignItems } from "../box/styles.js";
+/**
+ * @since 6.0.0 Extends the `BoxProps`.
+ */
+export interface DialogHeaderProps extends BoxProps {
+    /** @defaultValue `"center"` */
+    align?: BoxAlignItems;
+    /** @defaultValue `true` */
+    disableWrap?: boolean;
+}
 /**
  * The `DialogHeader` component should be rendered within a `Dialog` component
  * and generally contains the `DialogTitle`. Look at the `Dialog` or
  * `FixedDialog` components for example usage.
+ *
+ * @see {@link https://next.react-md.dev/components/dialog | Dialog Demos}
+ * @since 6.0.0 Extends the `Box` component.
  */
 export declare const DialogHeader: import("react").ForwardRefExoticComponent<DialogHeaderProps & import("react").RefAttributes<HTMLDivElement>>;

package/dist/dialog/DialogHeader.js

@@ -1,14 +1,20 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { forwardRef } from "react";
+import { Box } from "../box/Box.js";
 import { dialogHeader } from "./styles.js";
 /**
  * The `DialogHeader` component should be rendered within a `Dialog` component
  * and generally contains the `DialogTitle`. Look at the `Dialog` or
  * `FixedDialog` components for example usage.
+ *
+ * @see {@link https://next.react-md.dev/components/dialog | Dialog Demos}
+ * @since 6.0.0 Extends the `Box` component.
  */ export const DialogHeader = /*#__PURE__*/ forwardRef(function DialogHeader(props, ref) {
-    const { children, className, ...remaining } = props;
-    return /*#__PURE__*/ _jsx("div", {
+    const { align = "center", disableWrap = true, children, className, ...remaining } = props;
+    return /*#__PURE__*/ _jsx(Box, {
         ...remaining,
+        align: align,
+        disableWrap: disableWrap,
         ref: ref,
         className: dialogHeader({
             className

package/dist/dialog/DialogHeader.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/dialog/DialogHeader.tsx"],"sourcesContent":["import { type HTMLAttributes, forwardRef } from \"react\";\n\nimport { dialogHeader } from \"./styles.js\";\n\nexport type DialogHeaderProps = HTMLAttributes<HTMLDivElement>;\n\n/**\n * The `DialogHeader` component should be rendered within a `Dialog` component\n * and generally contains the `DialogTitle`. Look at the `Dialog` or\n * `FixedDialog` components for example usage.\n */\nexport const DialogHeader = forwardRef<HTMLDivElement, DialogHeaderProps>(\n  function DialogHeader(props, ref) {\n    const { children, className, ...remaining } = props;\n\n    return (\n      <div {...remaining} ref={ref} className={dialogHeader({ className })}>\n        {children}\n      </div>\n    );\n  }\n);\n"],"names":["forwardRef","dialogHeader","DialogHeader","props","ref","children","className","remaining","div"],"mappings":";AAAA,SAA8BA,UAAU,QAAQ,QAAQ;AAExD,SAASC,YAAY,QAAQ,cAAc;AAI3C;;;;CAIC,GACD,OAAO,MAAMC,6BAAeF,WAC1B,SAASE,aAAaC,KAAK,EAAEC,GAAG;IAC9B,MAAM,EAAEC,QAAQ,EAAEC,SAAS,EAAE,GAAGC,WAAW,GAAGJ;IAE9C,qBACE,KAACK;QAAK,GAAGD,SAAS;QAAEH,KAAKA;QAAKE,WAAWL,aAAa;YAAEK;QAAU;kBAC/DD;;AAGP,GACA"}
+{"version":3,"sources":["../../src/dialog/DialogHeader.tsx"],"sourcesContent":["import { forwardRef } from \"react\";\n\nimport { Box, type BoxProps } from \"../box/Box.js\";\nimport { type BoxAlignItems } from \"../box/styles.js\";\nimport { dialogHeader } from \"./styles.js\";\n\n/**\n * @since 6.0.0 Extends the `BoxProps`.\n */\nexport interface DialogHeaderProps extends BoxProps {\n  /** @defaultValue `\"center\"` */\n  align?: BoxAlignItems;\n\n  /** @defaultValue `true` */\n  disableWrap?: boolean;\n}\n\n/**\n * The `DialogHeader` component should be rendered within a `Dialog` component\n * and generally contains the `DialogTitle`. Look at the `Dialog` or\n * `FixedDialog` components for example usage.\n *\n * @see {@link https://next.react-md.dev/components/dialog | Dialog Demos}\n * @since 6.0.0 Extends the `Box` component.\n */\nexport const DialogHeader = forwardRef<HTMLDivElement, DialogHeaderProps>(\n  function DialogHeader(props, ref) {\n    const {\n      align = \"center\",\n      disableWrap = true,\n      children,\n      className,\n      ...remaining\n    } = props;\n\n    return (\n      <Box\n        {...remaining}\n        align={align}\n        disableWrap={disableWrap}\n        ref={ref}\n        className={dialogHeader({ className })}\n      >\n        {children}\n      </Box>\n    );\n  }\n);\n"],"names":["forwardRef","Box","dialogHeader","DialogHeader","props","ref","align","disableWrap","children","className","remaining"],"mappings":";AAAA,SAASA,UAAU,QAAQ,QAAQ;AAEnC,SAASC,GAAG,QAAuB,gBAAgB;AAEnD,SAASC,YAAY,QAAQ,cAAc;AAa3C;;;;;;;CAOC,GACD,OAAO,MAAMC,6BAAeH,WAC1B,SAASG,aAAaC,KAAK,EAAEC,GAAG;IAC9B,MAAM,EACJC,QAAQ,QAAQ,EAChBC,cAAc,IAAI,EAClBC,QAAQ,EACRC,SAAS,EACT,GAAGC,WACJ,GAAGN;IAEJ,qBACE,KAACH;QACE,GAAGS,SAAS;QACbJ,OAAOA;QACPC,aAAaA;QACbF,KAAKA;QACLI,WAAWP,aAAa;YAAEO;QAAU;kBAEnCD;;AAGP,GACA"}

package/dist/dialog/DialogTitle.d.ts

@@ -17,5 +17,7 @@ export interface DialogTitleProps extends TypographyProps {
  * The `DialogTitle` component is a simple `Typography` component wrapper with
  * sensible defaults to be rendered within a `Dialog`. Look at the `Dialog` or
  * `FixedDialog` components for example usage.
+ *
+ * @see {@link https://next.react-md.dev/components/dialog | Dialog Demos}
  */
 export declare const DialogTitle: import("react").ForwardRefExoticComponent<DialogTitleProps & import("react").RefAttributes<HTMLHeadingElement>>;

package/dist/dialog/DialogTitle.js

@@ -6,9 +6,12 @@ import { Typography } from "../typography/Typography.js";
  * The `DialogTitle` component is a simple `Typography` component wrapper with
  * sensible defaults to be rendered within a `Dialog`. Look at the `Dialog` or
  * `FixedDialog` components for example usage.
- */ export const DialogTitle = /*#__PURE__*/ forwardRef(function DialogTitle({ as = "h2", type = "headline-4", margin = "none", children, className, ...props }, ref) {
+ *
+ * @see {@link https://next.react-md.dev/components/dialog | Dialog Demos}
+ */ export const DialogTitle = /*#__PURE__*/ forwardRef(function DialogTitle(props, ref) {
+    const { as = "h2", type = "headline-4", margin = "none", children, className, ...remaining } = props;
     return /*#__PURE__*/ _jsx(Typography, {
-        ...props,
+        ...remaining,
         ref: ref,
         as: as,
         type: type,

package/dist/dialog/DialogTitle.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/dialog/DialogTitle.tsx"],"sourcesContent":["import { cnb } from \"cnbuilder\";\nimport { forwardRef } from \"react\";\n\nimport { type Margin } from \"../cssUtils.js\";\nimport {\n  type CustomTypographyComponent,\n  Typography,\n  type TypographyProps,\n} from \"../typography/Typography.js\";\nimport { type TypographyType } from \"../typography/typographyStyles.js\";\n\n/**\n * @since 6.0.0 Inherits the `TypographyProps` instead of\n * `HTMLAttributes<HTMLHeadingElement>`.\n */\nexport interface DialogTitleProps extends TypographyProps {\n  /** @defaultValue `\"h2\"` */\n  as?: CustomTypographyComponent;\n\n  /** @defaultValue `\"headline-4\"` */\n  type?: TypographyType;\n\n  /** @defaultValue `\"none\"` */\n  margin?: Margin;\n}\n\n/**\n * The `DialogTitle` component is a simple `Typography` component wrapper with\n * sensible defaults to be rendered within a `Dialog`. Look at the `Dialog` or\n * `FixedDialog` components for example usage.\n */\nexport const DialogTitle = forwardRef<HTMLHeadingElement, DialogTitleProps>(\n  function DialogTitle(\n    {\n      as = \"h2\",\n      type = \"headline-4\",\n      margin = \"none\",\n      children,\n      className,\n      ...props\n    },\n    ref\n  ) {\n    return (\n      <Typography\n        {...props}\n        ref={ref}\n        as={as}\n        type={type}\n        margin={margin}\n        // Note: This class applies no styles at this time\n        className={cnb(\"rmd-dialog__title\", className)}\n      >\n        {children}\n      </Typography>\n    );\n  }\n);\n"],"names":["cnb","forwardRef","Typography","DialogTitle","as","type","margin","children","className","props","ref"],"mappings":";AAAA,SAASA,GAAG,QAAQ,YAAY;AAChC,SAASC,UAAU,QAAQ,QAAQ;AAGnC,SAEEC,UAAU,QAEL,8BAA8B;AAkBrC;;;;CAIC,GACD,OAAO,MAAMC,4BAAcF,WACzB,SAASE,YACP,EACEC,KAAK,IAAI,EACTC,OAAO,YAAY,EACnBC,SAAS,MAAM,EACfC,QAAQ,EACRC,SAAS,EACT,GAAGC,OACJ,EACDC,GAAG;IAEH,qBACE,KAACR;QACE,GAAGO,KAAK;QACTC,KAAKA;QACLN,IAAIA;QACJC,MAAMA;QACNC,QAAQA;QACR,kDAAkD;QAClDE,WAAWR,IAAI,qBAAqBQ;kBAEnCD;;AAGP,GACA"}
+{"version":3,"sources":["../../src/dialog/DialogTitle.tsx"],"sourcesContent":["import { cnb } from \"cnbuilder\";\nimport { forwardRef } from \"react\";\n\nimport { type Margin } from \"../cssUtils.js\";\nimport {\n  type CustomTypographyComponent,\n  Typography,\n  type TypographyProps,\n} from \"../typography/Typography.js\";\nimport { type TypographyType } from \"../typography/typographyStyles.js\";\n\n/**\n * @since 6.0.0 Inherits the `TypographyProps` instead of\n * `HTMLAttributes<HTMLHeadingElement>`.\n */\nexport interface DialogTitleProps extends TypographyProps {\n  /** @defaultValue `\"h2\"` */\n  as?: CustomTypographyComponent;\n\n  /** @defaultValue `\"headline-4\"` */\n  type?: TypographyType;\n\n  /** @defaultValue `\"none\"` */\n  margin?: Margin;\n}\n\n/**\n * The `DialogTitle` component is a simple `Typography` component wrapper with\n * sensible defaults to be rendered within a `Dialog`. Look at the `Dialog` or\n * `FixedDialog` components for example usage.\n *\n * @see {@link https://next.react-md.dev/components/dialog | Dialog Demos}\n */\nexport const DialogTitle = forwardRef<HTMLHeadingElement, DialogTitleProps>(\n  function DialogTitle(props, ref) {\n    const {\n      as = \"h2\",\n      type = \"headline-4\",\n      margin = \"none\",\n      children,\n      className,\n      ...remaining\n    } = props;\n\n    return (\n      <Typography\n        {...remaining}\n        ref={ref}\n        as={as}\n        type={type}\n        margin={margin}\n        // Note: This class applies no styles at this time\n        className={cnb(\"rmd-dialog__title\", className)}\n      >\n        {children}\n      </Typography>\n    );\n  }\n);\n"],"names":["cnb","forwardRef","Typography","DialogTitle","props","ref","as","type","margin","children","className","remaining"],"mappings":";AAAA,SAASA,GAAG,QAAQ,YAAY;AAChC,SAASC,UAAU,QAAQ,QAAQ;AAGnC,SAEEC,UAAU,QAEL,8BAA8B;AAkBrC;;;;;;CAMC,GACD,OAAO,MAAMC,4BAAcF,WACzB,SAASE,YAAYC,KAAK,EAAEC,GAAG;IAC7B,MAAM,EACJC,KAAK,IAAI,EACTC,OAAO,YAAY,EACnBC,SAAS,MAAM,EACfC,QAAQ,EACRC,SAAS,EACT,GAAGC,WACJ,GAAGP;IAEJ,qBACE,KAACF;QACE,GAAGS,SAAS;QACbN,KAAKA;QACLC,IAAIA;QACJC,MAAMA;QACNC,QAAQA;QACR,kDAAkD;QAClDE,WAAWV,IAAI,qBAAqBU;kBAEnCD;;AAGP,GACA"}

package/dist/dialog/FixedDialog.d.ts

@@ -22,16 +22,15 @@ export type FixedDialogProps = LabelRequiredForA11y<BaseFixedDialogProps>;
  *
  * @example Simple Example
  * ```tsx
- * import {
- *   Button,
- *   DialogHeader,
- *   DialogTitle,
- *   DialogContent,
- *   DialogFooter,
- *   FixedDialog,
- *   Typography,
- *   useToggle,
- * } from "@react-md/core";
+ * import { Button } from "@react-md/core/button/Button";
+ * import { Dialog } from "@react-md/core/dialog/Dialog";
+ * import { DialogContent } from "@react-md/core/dialog/DialogContent";
+ * import { DialogFooter } from "@react-md/core/dialog/DialogFooter";
+ * import { DialogHeader } from "@react-md/core/dialog/DialogHeader";
+ * import { DialogTitle } from "@react-md/core/dialog/DialogTitle";
+ * import { FixedDialog } from "@react-md/core/dialog/FixedDialog";
+ * import { Typography } from "@react-md/core/typography/Typography";
+ * import { useToggle } from "@react-md/core/useToggle";
  * import { useId, useRef, type ReactElement } from "react";
  *
  * function Example(): ReactElement {
@@ -68,5 +67,7 @@ export type FixedDialogProps = LabelRequiredForA11y<BaseFixedDialogProps>;
  *   );
  * }
  * ```
+ *
+ * @see {@link https://next.react-md.dev/components/dialog#fixed-dialog | FixedDialog Demos}
  */
 export declare const FixedDialog: import("react").ForwardRefExoticComponent<FixedDialogProps & import("react").RefAttributes<HTMLDivElement>>;

package/dist/dialog/FixedDialog.js

@@ -3,7 +3,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { forwardRef, useRef } from "react";
 import { TOP_INNER_RIGHT_ANCHOR } from "../positioning/constants.js";
 import { useFixedPositioning } from "../positioning/useFixedPositioning.js";
-import { SCALE_CLASSNAMES } from "../transition/useScaleTransition.js";
+import { DEFAULT_SCALE_CLASSNAMES } from "../transition/useScaleTransition.js";
 import { Dialog } from "./Dialog.js";
 const noop = ()=>{
 // do nothing
@@ -13,16 +13,15 @@ const noop = ()=>{
  *
  * @example Simple Example
  * ```tsx
- * import {
- *   Button,
- *   DialogHeader,
- *   DialogTitle,
- *   DialogContent,
- *   DialogFooter,
- *   FixedDialog,
- *   Typography,
- *   useToggle,
- * } from "@react-md/core";
+ * import { Button } from "@react-md/core/button/Button";
+ * import { Dialog } from "@react-md/core/dialog/Dialog";
+ * import { DialogContent } from "@react-md/core/dialog/DialogContent";
+ * import { DialogFooter } from "@react-md/core/dialog/DialogFooter";
+ * import { DialogHeader } from "@react-md/core/dialog/DialogHeader";
+ * import { DialogTitle } from "@react-md/core/dialog/DialogTitle";
+ * import { FixedDialog } from "@react-md/core/dialog/FixedDialog";
+ * import { Typography } from "@react-md/core/typography/Typography";
+ * import { useToggle } from "@react-md/core/useToggle";
  * import { useId, useRef, type ReactElement } from "react";
  *
  * function Example(): ReactElement {
@@ -59,8 +58,10 @@ const noop = ()=>{
  *   );
  * }
  * ```
+ *
+ * @see {@link https://next.react-md.dev/components/dialog#fixed-dialog | FixedDialog Demos}
  */ export const FixedDialog = /*#__PURE__*/ forwardRef(function FixedDialog(props, nodeRef) {
-    const { fixedTo, style: propStyle, classNames = SCALE_CLASSNAMES, children, anchor = TOP_INNER_RIGHT_ANCHOR, options, getFixedPositionOptions, onEnter = noop, onEntering, onEntered = noop, onExited, onRequestClose, overlayHidden = true, disableScrollLock = true, isFocusTypeDisabled = noop, ...remaining } = props;
+    const { fixedTo, style: propStyle, classNames = DEFAULT_SCALE_CLASSNAMES, children, anchor = TOP_INNER_RIGHT_ANCHOR, options, getFixedPositionOptions, onEnter = noop, onEntering, onEntered = noop, onExited, onRequestClose, overlayHidden = true, disableScrollLock = true, isFocusTypeDisabled = noop, ...remaining } = props;
     const disableExitFocus = useRef(false);
     const { ref, style, callbacks } = useFixedPositioning({
         nodeRef,

package/dist/dialog/FixedDialog.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/dialog/FixedDialog.tsx"],"sourcesContent":["\"use client\";\n\nimport { type RefObject, forwardRef, useRef } from \"react\";\n\nimport { TOP_INNER_RIGHT_ANCHOR } from \"../positioning/constants.js\";\nimport {\n  type CalculateFixedPositionOptions,\n  type PositionAnchor,\n} from \"../positioning/types.js\";\nimport { useFixedPositioning } from \"../positioning/useFixedPositioning.js\";\nimport { SCALE_CLASSNAMES } from \"../transition/useScaleTransition.js\";\nimport { type LabelRequiredForA11y } from \"../types.js\";\nimport { type BaseDialogProps, Dialog } from \"./Dialog.js\";\n\nexport interface BaseFixedDialogProps extends Omit<BaseDialogProps, \"type\"> {\n  anchor?: PositionAnchor;\n  fixedTo: RefObject<HTMLElement>;\n  options?: CalculateFixedPositionOptions;\n  getFixedPositionOptions?: () => CalculateFixedPositionOptions;\n\n  /**\n   * @defaultValue `true`\n   */\n  overlayHidden?: boolean;\n\n  /**\n   * @defaultValue `true`\n   */\n  disableScrollLock?: boolean;\n}\n\nexport type FixedDialogProps = LabelRequiredForA11y<BaseFixedDialogProps>;\n\nconst noop = (): void => {\n  // do nothing\n};\n\n/**\n * **Client Component**\n *\n * @example Simple Example\n * ```tsx\n * import {\n *   Button,\n *   DialogHeader,\n *   DialogTitle,\n *   DialogContent,\n *   DialogFooter,\n *   FixedDialog,\n *   Typography,\n *   useToggle,\n * } from \"@react-md/core\";\n * import { useId, useRef, type ReactElement } from \"react\";\n *\n * function Example(): ReactElement {\n *   const {\n *     toggle,\n *     disable: onRequestClose,\n *     toggled: visible,\n *   } = useToggle(false);\n *   const titleId = useId();\n *   const fixedTo = useRef<HTMLButtonElement>(null)\n *\n *   return (\n *     <>\n *       <Button ref={fixedTo} onClick={toggle}>Toggle</Button>\n *       <FixedDialog\n *         aria-labelledby={titleId}\n *         fixedTo={fixedTo}\n *         visible={visible}\n *         onRequestClose={onRequestClose}\n *       >\n *         <DialogHeader>\n *           <DialogTitle id={titleId}>Simple Dialog</DialogTitle>\n *         </DialogHeader>\n *         <DialogContent>\n *           <Typography margin=\"none\">This is some text in a dialog.</Typography>\n *         </DialogContent>\n *         <DialogFooter>\n *           <Button onClick={onRequestClose}>\n *             Close\n *           </Button>\n *         </DialogFooter>\n *       </FixedDialog>\n *     </>\n *   );\n * }\n * ```\n */\nexport const FixedDialog = forwardRef<HTMLDivElement, FixedDialogProps>(\n  function FixedDialog(props, nodeRef) {\n    const {\n      fixedTo,\n      style: propStyle,\n      classNames = SCALE_CLASSNAMES,\n      children,\n      anchor = TOP_INNER_RIGHT_ANCHOR,\n      options,\n      getFixedPositionOptions,\n      onEnter = noop,\n      onEntering,\n      onEntered = noop,\n      onExited,\n      onRequestClose,\n      overlayHidden = true,\n      disableScrollLock = true,\n      isFocusTypeDisabled = noop,\n      ...remaining\n    } = props;\n\n    const disableExitFocus = useRef(false);\n    const { ref, style, callbacks } = useFixedPositioning({\n      nodeRef,\n      style: propStyle,\n      transformOrigin: true,\n      onEnter(appearing) {\n        onEnter(appearing);\n        disableExitFocus.current = false;\n      },\n      onEntering,\n      onEntered(appearing) {\n        onEntered(appearing);\n        disableExitFocus.current = false;\n      },\n      onExited,\n      anchor,\n      fixedTo,\n      onScroll(_event, data) {\n        if (!data.visible) {\n          disableExitFocus.current = true;\n          onRequestClose();\n        }\n      },\n      ...options,\n      getFixedPositionOptions,\n    });\n\n    return (\n      <Dialog\n        {...remaining}\n        {...callbacks}\n        ref={ref}\n        type=\"custom\"\n        fixed\n        style={style}\n        classNames={classNames}\n        onRequestClose={onRequestClose}\n        overlayHidden={overlayHidden}\n        disableScrollLock={disableScrollLock}\n        isFocusTypeDisabled={(type) =>\n          isFocusTypeDisabled(type) ||\n          (type === \"unmount\" && disableExitFocus.current)\n        }\n      >\n        {children}\n      </Dialog>\n    );\n  }\n);\n"],"names":["forwardRef","useRef","TOP_INNER_RIGHT_ANCHOR","useFixedPositioning","SCALE_CLASSNAMES","Dialog","noop","FixedDialog","props","nodeRef","fixedTo","style","propStyle","classNames","children","anchor","options","getFixedPositionOptions","onEnter","onEntering","onEntered","onExited","onRequestClose","overlayHidden","disableScrollLock","isFocusTypeDisabled","remaining","disableExitFocus","ref","callbacks","transformOrigin","appearing","current","onScroll","_event","data","visible","type","fixed"],"mappings":"AAAA;;AAEA,SAAyBA,UAAU,EAAEC,MAAM,QAAQ,QAAQ;AAE3D,SAASC,sBAAsB,QAAQ,8BAA8B;AAKrE,SAASC,mBAAmB,QAAQ,wCAAwC;AAC5E,SAASC,gBAAgB,QAAQ,sCAAsC;AAEvE,SAA+BC,MAAM,QAAQ,cAAc;AAqB3D,MAAMC,OAAO;AACX,aAAa;AACf;AAEA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAmDC,GACD,OAAO,MAAMC,4BAAcP,WACzB,SAASO,YAAYC,KAAK,EAAEC,OAAO;IACjC,MAAM,EACJC,OAAO,EACPC,OAAOC,SAAS,EAChBC,aAAaT,gBAAgB,EAC7BU,QAAQ,EACRC,SAASb,sBAAsB,EAC/Bc,OAAO,EACPC,uBAAuB,EACvBC,UAAUZ,IAAI,EACda,UAAU,EACVC,YAAYd,IAAI,EAChBe,QAAQ,EACRC,cAAc,EACdC,gBAAgB,IAAI,EACpBC,oBAAoB,IAAI,EACxBC,sBAAsBnB,IAAI,EAC1B,GAAGoB,WACJ,GAAGlB;IAEJ,MAAMmB,mBAAmB1B,OAAO;IAChC,MAAM,EAAE2B,GAAG,EAAEjB,KAAK,EAAEkB,SAAS,EAAE,GAAG1B,oBAAoB;QACpDM;QACAE,OAAOC;QACPkB,iBAAiB;QACjBZ,SAAQa,SAAS;YACfb,QAAQa;YACRJ,iBAAiBK,OAAO,GAAG;QAC7B;QACAb;QACAC,WAAUW,SAAS;YACjBX,UAAUW;YACVJ,iBAAiBK,OAAO,GAAG;QAC7B;QACAX;QACAN;QACAL;QACAuB,UAASC,MAAM,EAAEC,IAAI;YACnB,IAAI,CAACA,KAAKC,OAAO,EAAE;gBACjBT,iBAAiBK,OAAO,GAAG;gBAC3BV;YACF;QACF;QACA,GAAGN,OAAO;QACVC;IACF;IAEA,qBACE,KAACZ;QACE,GAAGqB,SAAS;QACZ,GAAGG,SAAS;QACbD,KAAKA;QACLS,MAAK;QACLC,KAAK;QACL3B,OAAOA;QACPE,YAAYA;QACZS,gBAAgBA;QAChBC,eAAeA;QACfC,mBAAmBA;QACnBC,qBAAqB,CAACY,OACpBZ,oBAAoBY,SACnBA,SAAS,aAAaV,iBAAiBK,OAAO;kBAGhDlB;;AAGP,GACA"}
+{"version":3,"sources":["../../src/dialog/FixedDialog.tsx"],"sourcesContent":["\"use client\";\n\nimport { type RefObject, forwardRef, useRef } from \"react\";\n\nimport { TOP_INNER_RIGHT_ANCHOR } from \"../positioning/constants.js\";\nimport {\n  type CalculateFixedPositionOptions,\n  type PositionAnchor,\n} from \"../positioning/types.js\";\nimport { useFixedPositioning } from \"../positioning/useFixedPositioning.js\";\nimport { DEFAULT_SCALE_CLASSNAMES } from \"../transition/useScaleTransition.js\";\nimport { type LabelRequiredForA11y } from \"../types.js\";\nimport { type BaseDialogProps, Dialog } from \"./Dialog.js\";\n\nexport interface BaseFixedDialogProps extends Omit<BaseDialogProps, \"type\"> {\n  anchor?: PositionAnchor;\n  fixedTo: RefObject<HTMLElement>;\n  options?: CalculateFixedPositionOptions;\n  getFixedPositionOptions?: () => CalculateFixedPositionOptions;\n\n  /**\n   * @defaultValue `true`\n   */\n  overlayHidden?: boolean;\n\n  /**\n   * @defaultValue `true`\n   */\n  disableScrollLock?: boolean;\n}\n\nexport type FixedDialogProps = LabelRequiredForA11y<BaseFixedDialogProps>;\n\nconst noop = (): void => {\n  // do nothing\n};\n\n/**\n * **Client Component**\n *\n * @example Simple Example\n * ```tsx\n * import { Button } from \"@react-md/core/button/Button\";\n * import { Dialog } from \"@react-md/core/dialog/Dialog\";\n * import { DialogContent } from \"@react-md/core/dialog/DialogContent\";\n * import { DialogFooter } from \"@react-md/core/dialog/DialogFooter\";\n * import { DialogHeader } from \"@react-md/core/dialog/DialogHeader\";\n * import { DialogTitle } from \"@react-md/core/dialog/DialogTitle\";\n * import { FixedDialog } from \"@react-md/core/dialog/FixedDialog\";\n * import { Typography } from \"@react-md/core/typography/Typography\";\n * import { useToggle } from \"@react-md/core/useToggle\";\n * import { useId, useRef, type ReactElement } from \"react\";\n *\n * function Example(): ReactElement {\n *   const {\n *     toggle,\n *     disable: onRequestClose,\n *     toggled: visible,\n *   } = useToggle(false);\n *   const titleId = useId();\n *   const fixedTo = useRef<HTMLButtonElement>(null)\n *\n *   return (\n *     <>\n *       <Button ref={fixedTo} onClick={toggle}>Toggle</Button>\n *       <FixedDialog\n *         aria-labelledby={titleId}\n *         fixedTo={fixedTo}\n *         visible={visible}\n *         onRequestClose={onRequestClose}\n *       >\n *         <DialogHeader>\n *           <DialogTitle id={titleId}>Simple Dialog</DialogTitle>\n *         </DialogHeader>\n *         <DialogContent>\n *           <Typography margin=\"none\">This is some text in a dialog.</Typography>\n *         </DialogContent>\n *         <DialogFooter>\n *           <Button onClick={onRequestClose}>\n *             Close\n *           </Button>\n *         </DialogFooter>\n *       </FixedDialog>\n *     </>\n *   );\n * }\n * ```\n *\n * @see {@link https://next.react-md.dev/components/dialog#fixed-dialog | FixedDialog Demos}\n */\nexport const FixedDialog = forwardRef<HTMLDivElement, FixedDialogProps>(\n  function FixedDialog(props, nodeRef) {\n    const {\n      fixedTo,\n      style: propStyle,\n      classNames = DEFAULT_SCALE_CLASSNAMES,\n      children,\n      anchor = TOP_INNER_RIGHT_ANCHOR,\n      options,\n      getFixedPositionOptions,\n      onEnter = noop,\n      onEntering,\n      onEntered = noop,\n      onExited,\n      onRequestClose,\n      overlayHidden = true,\n      disableScrollLock = true,\n      isFocusTypeDisabled = noop,\n      ...remaining\n    } = props;\n\n    const disableExitFocus = useRef(false);\n    const { ref, style, callbacks } = useFixedPositioning({\n      nodeRef,\n      style: propStyle,\n      transformOrigin: true,\n      onEnter(appearing) {\n        onEnter(appearing);\n        disableExitFocus.current = false;\n      },\n      onEntering,\n      onEntered(appearing) {\n        onEntered(appearing);\n        disableExitFocus.current = false;\n      },\n      onExited,\n      anchor,\n      fixedTo,\n      onScroll(_event, data) {\n        if (!data.visible) {\n          disableExitFocus.current = true;\n          onRequestClose();\n        }\n      },\n      ...options,\n      getFixedPositionOptions,\n    });\n\n    return (\n      <Dialog\n        {...remaining}\n        {...callbacks}\n        ref={ref}\n        type=\"custom\"\n        fixed\n        style={style}\n        classNames={classNames}\n        onRequestClose={onRequestClose}\n        overlayHidden={overlayHidden}\n        disableScrollLock={disableScrollLock}\n        isFocusTypeDisabled={(type) =>\n          isFocusTypeDisabled(type) ||\n          (type === \"unmount\" && disableExitFocus.current)\n        }\n      >\n        {children}\n      </Dialog>\n    );\n  }\n);\n"],"names":["forwardRef","useRef","TOP_INNER_RIGHT_ANCHOR","useFixedPositioning","DEFAULT_SCALE_CLASSNAMES","Dialog","noop","FixedDialog","props","nodeRef","fixedTo","style","propStyle","classNames","children","anchor","options","getFixedPositionOptions","onEnter","onEntering","onEntered","onExited","onRequestClose","overlayHidden","disableScrollLock","isFocusTypeDisabled","remaining","disableExitFocus","ref","callbacks","transformOrigin","appearing","current","onScroll","_event","data","visible","type","fixed"],"mappings":"AAAA;;AAEA,SAAyBA,UAAU,EAAEC,MAAM,QAAQ,QAAQ;AAE3D,SAASC,sBAAsB,QAAQ,8BAA8B;AAKrE,SAASC,mBAAmB,QAAQ,wCAAwC;AAC5E,SAASC,wBAAwB,QAAQ,sCAAsC;AAE/E,SAA+BC,MAAM,QAAQ,cAAc;AAqB3D,MAAMC,OAAO;AACX,aAAa;AACf;AAEA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAoDC,GACD,OAAO,MAAMC,4BAAcP,WACzB,SAASO,YAAYC,KAAK,EAAEC,OAAO;IACjC,MAAM,EACJC,OAAO,EACPC,OAAOC,SAAS,EAChBC,aAAaT,wBAAwB,EACrCU,QAAQ,EACRC,SAASb,sBAAsB,EAC/Bc,OAAO,EACPC,uBAAuB,EACvBC,UAAUZ,IAAI,EACda,UAAU,EACVC,YAAYd,IAAI,EAChBe,QAAQ,EACRC,cAAc,EACdC,gBAAgB,IAAI,EACpBC,oBAAoB,IAAI,EACxBC,sBAAsBnB,IAAI,EAC1B,GAAGoB,WACJ,GAAGlB;IAEJ,MAAMmB,mBAAmB1B,OAAO;IAChC,MAAM,EAAE2B,GAAG,EAAEjB,KAAK,EAAEkB,SAAS,EAAE,GAAG1B,oBAAoB;QACpDM;QACAE,OAAOC;QACPkB,iBAAiB;QACjBZ,SAAQa,SAAS;YACfb,QAAQa;YACRJ,iBAAiBK,OAAO,GAAG;QAC7B;QACAb;QACAC,WAAUW,SAAS;YACjBX,UAAUW;YACVJ,iBAAiBK,OAAO,GAAG;QAC7B;QACAX;QACAN;QACAL;QACAuB,UAASC,MAAM,EAAEC,IAAI;YACnB,IAAI,CAACA,KAAKC,OAAO,EAAE;gBACjBT,iBAAiBK,OAAO,GAAG;gBAC3BV;YACF;QACF;QACA,GAAGN,OAAO;QACVC;IACF;IAEA,qBACE,KAACZ;QACE,GAAGqB,SAAS;QACZ,GAAGG,SAAS;QACbD,KAAKA;QACLS,MAAK;QACLC,KAAK;QACL3B,OAAOA;QACPE,YAAYA;QACZS,gBAAgBA;QAChBC,eAAeA;QACfC,mBAAmBA;QACnBC,qBAAqB,CAACY,OACpBZ,oBAAoBY,SACnBA,SAAS,aAAaV,iBAAiBK,OAAO;kBAGhDlB;;AAGP,GACA"}

package/dist/dialog/_dialog.scss

@@ -1,57 +1,187 @@
+////
+/// @group dialog
+////
+
 @use "sass:map";
 @use "../utils";
 @use "../box-shadows";
+@use "../box/box";
 @use "../transition/transition";
 @use "../interaction/interaction";
 @use "../theme/theme";
 
+/// Set to `true` to disable all the styles
+/// @type Boolean
 $disable-everything: false !default;
+
+/// Set to `true` of the default dialog enter/exit transition styles should not
+/// be generated.
+///
+/// @type Boolean
+$disable-default-transition: false !default;
+
+/// Set to `true` when the `FixedDialog` will not be used.
+///
+/// @type Boolean
 $disable-fixed: false !default;
+
+/// Set to `true` if the `DialogHeader` will not be used.
+///
+/// @type Boolean
 $disable-header: false !default;
+
+/// Set to `true` if the `DialogTitle` will not be used.
+///
+/// @type Boolean
 $disable-title: false !default;
+
+/// Set to `true` if the `DialogContent` will not be used.
+///
+/// @type Boolean
 $disable-content: false !default;
+
+/// Set to `true` if the `DialogFooter` will not be used.
+///
+/// @type Boolean
 $disable-footer: false !default;
+
+/// Set to `true` if the `Dialog` component will never gain focus because each
+/// `Dialog` usage has a child component with `defaultFocus` enabled.
+///
+/// @type Boolean
 $disable-focus-outline: false !default;
+
+/// Set to `true` if the `DialogFooter` will never set `align="stacked-start"`
+/// and `align="stacked-end"`
+///
+/// @type Boolean
 $disable-footer-flex-vertical: false !default;
+
+/// Set to `true` if the `DialogFooter` will never set `align="start"` and
+/// `align="stacked-start"`.
+///
+/// @type Boolean
 $disable-footer-flex-start: false !default;
+
+/// Set to `true` if the `DialogFooter` will never set `align="between"`.
+///
+/// @type Boolean
 $disable-footer-space-between: false !default;
+
+/// Set to `true` if the `DialogFooter` will never set `align="end"` and
+/// `align="stacked-end".
+///
+/// @type Boolean
 $disable-footer-flex-end: false !default;
 
+/// A number between 0-24 representing the box-shadow elevation for the dialog.
+///
+/// @type Number
 $elevation: 16 !default;
+
+/// The z-index to apply to the `Dialog`.
+///
+/// @type Number
 $z-index: utils.$temporary-element-z-index !default;
 
+/// @type Color
 $background-color: if(
   theme.$disable-dark-elevation,
   theme.theme-get-var(surface-color),
   null
 ) !default;
+/// @type Color
 $color: if(
   theme.$disable-dark-elevation,
   theme.theme-get-var(text-primary-color),
   null
 ) !default;
 
+/// The `min-width` to apply to all `Dialog`s.
+///
+/// @type Number
 $min-width: 17.5rem !default;
+
+/// The `width` to use when `width="small"`.
+///
+/// @type Number
 $small-width: 25rem !default;
+
+/// The `width` to use when `width="medium"`.
+///
+/// @type Number
 $medium-width: 40rem !default;
+
+/// The `width` to use when `width="large"`.
+///
+/// @type Number
 $large-width: 60rem !default;
+
+/// The `width` to use when `width="extra-large"`.
+///
+/// @type Number
 $extra-large-width: 80rem !default;
+
+/// The amount of spacing to apply to the left and right of the dialog when it
+/// is centered.
+///
+/// @type Number
 $horizontal-margin: 2.5rem !default;
+
+/// The amount of spacing to apply to the top and bottom of the dialog when it
+/// is centered.
+///
+/// @type Number
 $vertical-margin: 1.5rem !default;
+
+/// The distance to move while the dialog enters and exits.
+/// @type Number
 $transition-distance: 1.875rem !default;
 
+/// The `Dialog` enter transition duration. If this value changes, the
+/// `Dialog.timeout` should be updated as well.
+///
+/// @type Number
 $enter-duration: transition.$enter-duration !default;
+
+/// The `Dialog` enter transition timing function.
+///
+/// @type Number
 $enter-timing-function: transition.$deceleration-timing-function !default;
+
+/// If this value changes, the `Dialog.timeout` should be updated as well.
+///
+/// @type Number
 $leave-timing-function: transition.$acceleration-timing-function !default;
+
+/// The `Dialog` exit transition timing function.
+///
+/// @type Number
 $leave-duration: transition.$leave-duration !default;
 
+/// The amount of padding to apply to the `DialogHeader` component.
+///
+/// @type Number
 $header-padding: 1.5rem !default;
+
+/// The amount of padding-bottom to apply to the `DialogHeader` component.
+///
+/// @type Number
 $header-padding-bottom: 1.25rem !default;
 
+/// The amount of padding-bottom to apply to the `DialogContent` component.
+///
+/// @type Number
 $content-padding: 1.5rem !default;
 
+/// The amount of padding-bottom to apply to the `DialogFooter` component.
+///
+/// @type Number
 $footer-padding: 0.5rem !default;
 
+/// The available configurable css variables and mostly used internally for the
+/// `get-var`, `set-var`, and `use-var` utils.
+/// @type List
 $variables: (
   min-width,
   horizontal-margin,
@@ -68,6 +198,9 @@ $variables: (
   extra-large-width
 );
 
+/// @param {String} name - The supported variable name
+/// @param {any} fallback [null] - An optional fallback value
+/// @returns {String} a `var()` statement
 @function get-var($name, $fallback: null) {
   $var: utils.get-var-name($variables, $name, "dialog");
 
@@ -78,16 +211,24 @@ $variables: (
   @return var(#{$var});
 }
 
+/// @param {String} name - The supported variable name
+/// @param {any} value - The value to set the variable to. Supports `null` which
+/// will just be a no-op.
 @mixin set-var($name, $value) {
   @if $value {
     #{utils.get-var-name($variables, $name, "dialog")}: #{$value};
   }
 }
 
+/// @param {String} property - The css property to apply the variable to
+/// @param {String} name [$property] - The supported variable name
+/// @param {any} fallback [null] - An optional fallback value if the variable
+/// has not been set
 @mixin use-var($property, $name: $property, $fallback: null) {
   #{$property}: get-var($name, $fallback);
 }
 
+/// Conditionally applies the css variables based on feature flags
 @mixin variables {
   @if not $disable-everything {
     @include set-var(min-width, $min-width);
@@ -122,6 +263,10 @@ $variables: (
   }
 }
 
+/// Generates all the styles based on feature flags.
+///
+/// @param {Boolean} disable-layer [false] - Set this to `true` to disable the
+/// layer behavior
 @mixin styles($disable-layer: false) {
   @if not $disable-everything {
     @include utils.optional-layer(dialog, $disable-layer) {
@@ -220,28 +365,30 @@ $variables: (
           }
         }
 
-        &--enter {
-          transform: translateY($transition-distance);
-        }
+        @if not $disable-default-transition {
+          &--enter {
+            transform: translateY($transition-distance);
+          }
 
-        &--enter-active {
-          transform: translateY(0);
-          transition: transform $enter-duration;
-          transition-timing-function: $enter-timing-function;
-        }
+          &--enter-active {
+            transform: translateY(0);
+            transition: transform $enter-duration;
+            transition-timing-function: $enter-timing-function;
+          }
 
-        &--exit {
-          opacity: 1;
-          transform: translateY(0);
-          transition:
-            transform $leave-duration,
-            opacity $leave-duration;
-          transition-timing-function: $leave-timing-function;
-        }
+          &--exit {
+            opacity: 1;
+            transform: translateY(0);
+            transition:
+              transform $leave-duration,
+              opacity $leave-duration;
+            transition-timing-function: $leave-timing-function;
+          }
 
-        &--exit-active {
-          opacity: 0;
-          transform: translateY($transition-distance);
+          &--exit-active {
+            opacity: 0;
+            transform: translateY($transition-distance);
+          }
         }
 
         @if not $disable-fixed {
@@ -252,11 +399,9 @@ $variables: (
 
         @if not $disable-header {
           &__header {
-            @include use-var(padding, header-padding);
+            @include box.set-var(padding, get-var(header-padding));
             @include use-var(padding-bottom, header-padding-bottom);
 
-            align-items: center;
-            display: flex;
             flex: 0 0 auto;
           }
         }

package/dist/dialog/styles.d.ts

@@ -72,7 +72,13 @@ export declare function dialog(options?: DialogClassNameOptions): string;
 export interface DialogHeaderClassNameOptions {
     className?: string;
 }
-/** @since 6.0.0 */
+/**
+ * NOTE: The default `DialogHeader` component uses the `Box` component so the
+ * `box` class name utility function or `Box` component will probably be
+ * required if using this util
+ *
+ * @since 6.0.0
+ */
 export declare function dialogHeader(options?: DialogHeaderClassNameOptions): string;
 /** @since 6.0.0 */
 export interface DialogContentClassNameOptions {
@@ -99,6 +105,11 @@ export interface DialogFooterClassNameOptions {
 /** @since 6.0.0 */
 export declare function dialogFooter(options?: DialogFooterClassNameOptions): string;
 /** @since 4.0.0 */
+export declare const DEFAULT_DIALOG_TIMEOUT: {
+    readonly enter: 200;
+    readonly exit: 150;
+};
+/** @since 4.0.0 */
 export declare const DEFAULT_DIALOG_CLASSNAMES: {
     readonly appear: "rmd-dialog--enter";
     readonly appearActive: "rmd-dialog--enter-active";
@@ -107,8 +118,3 @@ export declare const DEFAULT_DIALOG_CLASSNAMES: {
     readonly exit: "rmd-dialog--exit";
     readonly exitActive: "rmd-dialog--exit-active";
 };
-/** @since 4.0.0 */
-export declare const DEFAULT_DIALOG_TIMEOUT: {
-    readonly enter: 200;
-    readonly exit: 150;
-};

package/dist/dialog/styles.js

@@ -25,7 +25,13 @@ const containerStyles = bem("rmd-dialog-container");
         "xl-width": width === "extra-large"
     }), className);
 }
-/** @since 6.0.0 */ export function dialogHeader(options = {}) {
+/**
+ * NOTE: The default `DialogHeader` component uses the `Box` component so the
+ * `box` class name utility function or `Box` component will probably be
+ * required if using this util
+ *
+ * @since 6.0.0
+ */ export function dialogHeader(options = {}) {
     const { className } = options;
     return cnb(styles("header"), className);
 }
@@ -45,6 +51,10 @@ const containerStyles = bem("rmd-dialog-container");
         end: align === "end" || align === "stacked-end"
     }), className);
 }
+/** @since 4.0.0 */ export const DEFAULT_DIALOG_TIMEOUT = {
+    enter: 200,
+    exit: 150
+};
 /** @since 4.0.0 */ export const DEFAULT_DIALOG_CLASSNAMES = {
     appear: "rmd-dialog--enter",
     appearActive: "rmd-dialog--enter-active",
@@ -53,9 +63,5 @@ const containerStyles = bem("rmd-dialog-container");
     exit: "rmd-dialog--exit",
     exitActive: "rmd-dialog--exit-active"
 };
-/** @since 4.0.0 */ export const DEFAULT_DIALOG_TIMEOUT = {
-    enter: 200,
-    exit: 150
-};
 
 //# sourceMappingURL=styles.js.map