@react-md/core 6.3.4 → 6.5.0

package/dist/button/FloatingActionButton.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/button/FloatingActionButton.tsx"],"sourcesContent":["import { cnb } from \"cnbuilder\";\nimport { type HTMLAttributes, forwardRef } from \"react\";\n\nimport { bem } from \"../utils/bem.js\";\n\ndeclare module \"react\" {\n  interface CSSProperties {\n    \"--rmd-fab-offset\"?: string | number;\n  }\n}\n\nconst styles = bem(\"rmd-fab\");\n\n/**\n * The position within the viewport for the floating action button.\n *\n * @since 6.0.0 This was renamed from `FABPosition`\n */\nexport type FloatingActionButtonPosition =\n  | \"bottom-left\"\n  | \"bottom-right\"\n  | \"top-left\"\n  | \"top-right\"\n  | null;\n\n/**\n * @since 6.0.0\n * @internal\n */\nexport interface FloatingActionButtonClassNameOptions {\n  className?: string;\n\n  /** @defaultValue `null` */\n  position?: FloatingActionButtonPosition;\n\n  /**\n   * @defaultValue `false`\n   */\n  absolute?: boolean;\n}\n\n/**\n * FAB = Floating Action Button\n *\n * @since 6.0.0\n * @internal\n */\nexport function fab(options: FloatingActionButtonClassNameOptions): string {\n  const { className, position = null, absolute = false } = options;\n\n  return cnb(\n    styles({\n      tl: position === \"top-left\",\n      tr: position === \"top-right\",\n      bl: position === \"bottom-left\",\n      br: position === \"bottom-right\",\n      absolute,\n    }),\n    className\n  );\n}\n\n/** @since 6.0.0 */\nexport interface FloatingActionButtonProps\n  extends HTMLAttributes<HTMLSpanElement>,\n    FloatingActionButtonClassNameOptions {}\n\n/**\n * @since 6.0.0\n * @internal\n */\nexport const FloatingActionButton = forwardRef<\n  HTMLSpanElement,\n  FloatingActionButtonProps\n>(function FloatingActionButton(props, ref) {\n  const {\n    children,\n    className,\n    position = null,\n    absolute = false,\n    ...remaining\n  } = props;\n  if (!position) {\n    return <>{children}</>;\n  }\n\n  return (\n    <span\n      {...remaining}\n      ref={ref}\n      className={fab({\n        className,\n        position,\n        absolute,\n      })}\n    >\n      {children}\n    </span>\n  );\n});\n"],"names":["cnb","forwardRef","bem","styles","fab","options","className","position","absolute","tl","tr","bl","br","FloatingActionButton","props","ref","children","remaining","span"],"mappings":";AAAA,SAASA,GAAG,QAAQ,YAAY;AAChC,SAA8BC,UAAU,QAAQ,QAAQ;AAExD,SAASC,GAAG,QAAQ,kBAAkB;AAQtC,MAAMC,SAASD,IAAI;AA8BnB;;;;;CAKC,GACD,OAAO,SAASE,IAAIC,OAA6C;IAC/D,MAAM,EAAEC,SAAS,EAAEC,WAAW,IAAI,EAAEC,WAAW,KAAK,EAAE,GAAGH;IAEzD,OAAOL,IACLG,OAAO;QACLM,IAAIF,aAAa;QACjBG,IAAIH,aAAa;QACjBI,IAAIJ,aAAa;QACjBK,IAAIL,aAAa;QACjBC;IACF,IACAF;AAEJ;AAOA;;;CAGC,GACD,OAAO,MAAMO,qCAAuBZ,WAGlC,SAASY,qBAAqBC,KAAK,EAAEC,GAAG;IACxC,MAAM,EACJC,QAAQ,EACRV,SAAS,EACTC,WAAW,IAAI,EACfC,WAAW,KAAK,EAChB,GAAGS,WACJ,GAAGH;IACJ,IAAI,CAACP,UAAU;QACb,qBAAO;sBAAGS;;IACZ;IAEA,qBACE,KAACE;QACE,GAAGD,SAAS;QACbF,KAAKA;QACLT,WAAWF,IAAI;YACbE;YACAC;YACAC;QACF;kBAECQ;;AAGP,GAAG"}
+{"version":3,"sources":["../../src/button/FloatingActionButton.tsx"],"sourcesContent":["import { cnb } from \"cnbuilder\";\nimport { type HTMLAttributes, forwardRef } from \"react\";\n\nimport { bem } from \"../utils/bem.js\";\n\ndeclare module \"react\" {\n  interface CSSProperties {\n    \"--rmd-fab-offset\"?: string | number;\n  }\n}\n\nconst styles = bem(\"rmd-fab\");\n\n/**\n * The position within the viewport for the floating action button.\n *\n * @since 6.0.0 This was renamed from `FABPosition`\n */\nexport type FloatingActionButtonPosition =\n  | \"bottom-left\"\n  | \"bottom-right\"\n  | \"top-left\"\n  | \"top-right\"\n  | null;\n\n/**\n * @since 6.0.0\n * @internal\n */\nexport interface FloatingActionButtonClassNameOptions {\n  className?: string;\n\n  /** @defaultValue `null` */\n  position?: FloatingActionButtonPosition;\n\n  /**\n   * @defaultValue `false`\n   */\n  absolute?: boolean;\n}\n\n/**\n * FAB = Floating Action Button\n *\n * @since 6.0.0\n * @internal\n */\nexport function fab(options: FloatingActionButtonClassNameOptions): string {\n  const { className, position = null, absolute = false } = options;\n\n  return cnb(\n    styles({\n      tl: position === \"top-left\",\n      tr: position === \"top-right\",\n      bl: position === \"bottom-left\",\n      br: position === \"bottom-right\",\n      absolute,\n    }),\n    className\n  );\n}\n\n/** @since 6.0.0 */\nexport interface FloatingActionButtonProps\n  extends\n    HTMLAttributes<HTMLSpanElement>,\n    FloatingActionButtonClassNameOptions {}\n\n/**\n * @since 6.0.0\n * @internal\n */\nexport const FloatingActionButton = forwardRef<\n  HTMLSpanElement,\n  FloatingActionButtonProps\n>(function FloatingActionButton(props, ref) {\n  const {\n    children,\n    className,\n    position = null,\n    absolute = false,\n    ...remaining\n  } = props;\n  if (!position) {\n    return <>{children}</>;\n  }\n\n  return (\n    <span\n      {...remaining}\n      ref={ref}\n      className={fab({\n        className,\n        position,\n        absolute,\n      })}\n    >\n      {children}\n    </span>\n  );\n});\n"],"names":["cnb","forwardRef","bem","styles","fab","options","className","position","absolute","tl","tr","bl","br","FloatingActionButton","props","ref","children","remaining","span"],"mappings":";AAAA,SAASA,GAAG,QAAQ,YAAY;AAChC,SAA8BC,UAAU,QAAQ,QAAQ;AAExD,SAASC,GAAG,QAAQ,kBAAkB;AAQtC,MAAMC,SAASD,IAAI;AA8BnB;;;;;CAKC,GACD,OAAO,SAASE,IAAIC,OAA6C;IAC/D,MAAM,EAAEC,SAAS,EAAEC,WAAW,IAAI,EAAEC,WAAW,KAAK,EAAE,GAAGH;IAEzD,OAAOL,IACLG,OAAO;QACLM,IAAIF,aAAa;QACjBG,IAAIH,aAAa;QACjBI,IAAIJ,aAAa;QACjBK,IAAIL,aAAa;QACjBC;IACF,IACAF;AAEJ;AAQA;;;CAGC,GACD,OAAO,MAAMO,qCAAuBZ,WAGlC,SAASY,qBAAqBC,KAAK,EAAEC,GAAG;IACxC,MAAM,EACJC,QAAQ,EACRV,SAAS,EACTC,WAAW,IAAI,EACfC,WAAW,KAAK,EAChB,GAAGS,WACJ,GAAGH;IACJ,IAAI,CAACP,UAAU;QACb,qBAAO;sBAAGS;;IACZ;IAEA,qBACE,KAACE;QACE,GAAGD,SAAS;QACbF,KAAKA;QACLT,WAAWF,IAAI;YACbE;YACAC;YACAC;QACF;kBAECQ;;AAGP,GAAG"}

package/dist/button/_button.scss

@@ -408,6 +408,14 @@ $variables: (
         }
 
         @if not $disable-contained {
+          $contained-elevation-end: null;
+          @if not
+            $disable-contained-pressed-elevation and
+            $contained-pressed-elevation
+          {
+            $contained-elevation-end: $contained-pressed-elevation;
+          }
+
           &--contained {
             // contained buttons should _normally_ always force dark background
             // colors for the interaction states This means use the default light
@@ -424,11 +432,7 @@ $variables: (
 
             @include box-shadows.elevation-transition(
               $contained-elevation,
-              if(
-                $disable-contained-pressed-elevation,
-                null,
-                $contained-pressed-elevation
-              ),
+              $contained-elevation-end,
               "&.rmd-button--pressed",
               $pseudo-before: false,
               $position-relative: false

package/dist/card/Card.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/card/Card.tsx"],"sourcesContent":["import { type HTMLAttributes, forwardRef } from \"react\";\n\nimport { Box } from \"../box/Box.js\";\nimport { type BoxAlignItems, type BoxOptions } from \"../box/styles.js\";\nimport { type CardClassNameOptions, card } from \"./styles.js\";\n\n/**\n * @since 6.0.0 Extends the {@link CardClassNameOptions} and removed the\n * deprecated `raiseable` prop\n */\nexport interface CardProps\n  extends HTMLAttributes<HTMLDivElement>,\n    CardClassNameOptions,\n    Pick<BoxOptions, \"align\" | \"justify\" | \"fullWidth\" | \"disableWrap\"> {\n  /** @defaultValue `\"stretch\"` */\n  align?: BoxAlignItems;\n\n  /** @defaultValue `\"start\"` */\n  justify?: BoxAlignItems;\n}\n\n/**\n * @example Simple Example\n * ```tsx\n * import { Button } from \"@react-md/core/button/Button\";\n * import { Card } from \"@react-md/core/card/Card\";\n * import { CardContent } from \"@react-md/core/card/CardContent\";\n * import { CardFooter } from \"@react-md/core/card/CardFooter\";\n * import { CardHeader } from \"@react-md/core/card/CardHeader\";\n * import { CardTitle } from \"@react-md/core/card/CardTitle\";\n * import { CardSubtitle } from \"@react-md/core/card/CardSubtitle\";\n * import { Typography } from \"@react-md/core/typography/Typography\";\n * import type { ReactElement } from \"react\";\n *\n * function Example(): ReactElement {\n *   return (\n *     <Card>\n *       <CardHeader>\n *         <CardTitle>Main Title</CardTitle>\n *         <CardSubtitle>A subtitle</CardSubtitle>\n *       </CardHeader>\n *       <CardContent>\n *         <Typography margin=\"none\">\n *           Some paragraph of text.\n *         </Typography>\n *       </CardContent>\n *       <CardFooter>\n *         <Button>Action 1</Button>\n *         <Button>Action 2</Button>\n *       </CardFooter>\n *     </Card>\n *   );\n * }\n * ```\n *\n * @see {@link https://react-md.dev/components/card | Card Demos}\n * @since 6.0.0 Removed the deprecated `raiseable` prop\n * @since 6.0.0 Uses the `Box` component and displays as `flex` instead of\n * `block`/`inline-block`.\n */\nexport const Card = forwardRef<HTMLDivElement, CardProps>(\n  function Card(props, ref) {\n    const {\n      children,\n      className,\n      align = \"stretch\",\n      justify = \"stretch\",\n      bordered,\n      raisable,\n      interactable,\n      ...remaining\n    } = props;\n\n    return (\n      <Box\n        align={align}\n        justify={justify}\n        disableWrap\n        {...remaining}\n        stacked\n        disableGap\n        disablePadding\n        ref={ref}\n        className={card({\n          className,\n          bordered,\n          raisable,\n          interactable,\n        })}\n      >\n        {children}\n      </Box>\n    );\n  }\n);\n"],"names":["forwardRef","Box","card","Card","props","ref","children","className","align","justify","bordered","raisable","interactable","remaining","disableWrap","stacked","disableGap","disablePadding"],"mappings":";AAAA,SAA8BA,UAAU,QAAQ,QAAQ;AAExD,SAASC,GAAG,QAAQ,gBAAgB;AAEpC,SAAoCC,IAAI,QAAQ,cAAc;AAiB9D;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAsCC,GACD,OAAO,MAAMC,qBAAOH,WAClB,SAASG,KAAKC,KAAK,EAAEC,GAAG;IACtB,MAAM,EACJC,QAAQ,EACRC,SAAS,EACTC,QAAQ,SAAS,EACjBC,UAAU,SAAS,EACnBC,QAAQ,EACRC,QAAQ,EACRC,YAAY,EACZ,GAAGC,WACJ,GAAGT;IAEJ,qBACE,KAACH;QACCO,OAAOA;QACPC,SAASA;QACTK,WAAW;QACV,GAAGD,SAAS;QACbE,OAAO;QACPC,UAAU;QACVC,cAAc;QACdZ,KAAKA;QACLE,WAAWL,KAAK;YACdK;YACAG;YACAC;YACAC;QACF;kBAECN;;AAGP,GACA"}
+{"version":3,"sources":["../../src/card/Card.tsx"],"sourcesContent":["import { type HTMLAttributes, forwardRef } from \"react\";\n\nimport { Box } from \"../box/Box.js\";\nimport { type BoxAlignItems, type BoxOptions } from \"../box/styles.js\";\nimport { type CardClassNameOptions, card } from \"./styles.js\";\n\n/**\n * @since 6.0.0 Extends the {@link CardClassNameOptions} and removed the\n * deprecated `raiseable` prop\n */\nexport interface CardProps\n  extends\n    HTMLAttributes<HTMLDivElement>,\n    CardClassNameOptions,\n    Pick<BoxOptions, \"align\" | \"justify\" | \"fullWidth\" | \"disableWrap\"> {\n  /** @defaultValue `\"stretch\"` */\n  align?: BoxAlignItems;\n\n  /** @defaultValue `\"start\"` */\n  justify?: BoxAlignItems;\n}\n\n/**\n * @example Simple Example\n * ```tsx\n * import { Button } from \"@react-md/core/button/Button\";\n * import { Card } from \"@react-md/core/card/Card\";\n * import { CardContent } from \"@react-md/core/card/CardContent\";\n * import { CardFooter } from \"@react-md/core/card/CardFooter\";\n * import { CardHeader } from \"@react-md/core/card/CardHeader\";\n * import { CardTitle } from \"@react-md/core/card/CardTitle\";\n * import { CardSubtitle } from \"@react-md/core/card/CardSubtitle\";\n * import { Typography } from \"@react-md/core/typography/Typography\";\n * import type { ReactElement } from \"react\";\n *\n * function Example(): ReactElement {\n *   return (\n *     <Card>\n *       <CardHeader>\n *         <CardTitle>Main Title</CardTitle>\n *         <CardSubtitle>A subtitle</CardSubtitle>\n *       </CardHeader>\n *       <CardContent>\n *         <Typography margin=\"none\">\n *           Some paragraph of text.\n *         </Typography>\n *       </CardContent>\n *       <CardFooter>\n *         <Button>Action 1</Button>\n *         <Button>Action 2</Button>\n *       </CardFooter>\n *     </Card>\n *   );\n * }\n * ```\n *\n * @see {@link https://react-md.dev/components/card | Card Demos}\n * @since 6.0.0 Removed the deprecated `raiseable` prop\n * @since 6.0.0 Uses the `Box` component and displays as `flex` instead of\n * `block`/`inline-block`.\n */\nexport const Card = forwardRef<HTMLDivElement, CardProps>(\n  function Card(props, ref) {\n    const {\n      children,\n      className,\n      align = \"stretch\",\n      justify = \"stretch\",\n      bordered,\n      raisable,\n      interactable,\n      ...remaining\n    } = props;\n\n    return (\n      <Box\n        align={align}\n        justify={justify}\n        disableWrap\n        {...remaining}\n        stacked\n        disableGap\n        disablePadding\n        ref={ref}\n        className={card({\n          className,\n          bordered,\n          raisable,\n          interactable,\n        })}\n      >\n        {children}\n      </Box>\n    );\n  }\n);\n"],"names":["forwardRef","Box","card","Card","props","ref","children","className","align","justify","bordered","raisable","interactable","remaining","disableWrap","stacked","disableGap","disablePadding"],"mappings":";AAAA,SAA8BA,UAAU,QAAQ,QAAQ;AAExD,SAASC,GAAG,QAAQ,gBAAgB;AAEpC,SAAoCC,IAAI,QAAQ,cAAc;AAkB9D;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAsCC,GACD,OAAO,MAAMC,qBAAOH,WAClB,SAASG,KAAKC,KAAK,EAAEC,GAAG;IACtB,MAAM,EACJC,QAAQ,EACRC,SAAS,EACTC,QAAQ,SAAS,EACjBC,UAAU,SAAS,EACnBC,QAAQ,EACRC,QAAQ,EACRC,YAAY,EACZ,GAAGC,WACJ,GAAGT;IAEJ,qBACE,KAACH;QACCO,OAAOA;QACPC,SAASA;QACTK,WAAW;QACV,GAAGD,SAAS;QACbE,OAAO;QACPC,UAAU;QACVC,cAAc;QACdZ,KAAKA;QACLE,WAAWL,KAAK;YACdK;YACAG;YACAC;YACAC;QACF;kBAECN;;AAGP,GACA"}

package/dist/card/CardContent.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/card/CardContent.tsx"],"sourcesContent":["import { type HTMLAttributes, forwardRef } from \"react\";\n\nimport { type CardContentClassNameOptions, cardContent } from \"./styles.js\";\n\n/**\n * @since 6.0.0 Renamed `disableExtraPadding` to `disableLastChildPadding` and\n * removed the `disableParagraphMargin` prop.\n */\nexport interface CardContentProps\n  extends HTMLAttributes<HTMLDivElement>,\n    CardContentClassNameOptions {}\n\n/**\n * @see {@link https://react-md.dev/components/card | Card Demos}\n * @since 6.0.0 Renamed `disableExtraPadding` to `disableLastChildPadding` and\n * removed the `disableParagraphMargin` prop.\n */\nexport const CardContent = forwardRef<HTMLDivElement, CardContentProps>(\n  function CardContent(props, ref) {\n    const {\n      children,\n      className,\n      disablePadding,\n      disableSecondaryColor,\n      disableLastChildPadding,\n      ...remaining\n    } = props;\n\n    return (\n      <div\n        {...remaining}\n        ref={ref}\n        className={cardContent({\n          className,\n          disablePadding,\n          disableSecondaryColor,\n          disableLastChildPadding,\n        })}\n      >\n        {children}\n      </div>\n    );\n  }\n);\n"],"names":["forwardRef","cardContent","CardContent","props","ref","children","className","disablePadding","disableSecondaryColor","disableLastChildPadding","remaining","div"],"mappings":";AAAA,SAA8BA,UAAU,QAAQ,QAAQ;AAExD,SAA2CC,WAAW,QAAQ,cAAc;AAU5E;;;;CAIC,GACD,OAAO,MAAMC,4BAAcF,WACzB,SAASE,YAAYC,KAAK,EAAEC,GAAG;IAC7B,MAAM,EACJC,QAAQ,EACRC,SAAS,EACTC,cAAc,EACdC,qBAAqB,EACrBC,uBAAuB,EACvB,GAAGC,WACJ,GAAGP;IAEJ,qBACE,KAACQ;QACE,GAAGD,SAAS;QACbN,KAAKA;QACLE,WAAWL,YAAY;YACrBK;YACAC;YACAC;YACAC;QACF;kBAECJ;;AAGP,GACA"}
+{"version":3,"sources":["../../src/card/CardContent.tsx"],"sourcesContent":["import { type HTMLAttributes, forwardRef } from \"react\";\n\nimport { type CardContentClassNameOptions, cardContent } from \"./styles.js\";\n\n/**\n * @since 6.0.0 Renamed `disableExtraPadding` to `disableLastChildPadding` and\n * removed the `disableParagraphMargin` prop.\n */\nexport interface CardContentProps\n  extends HTMLAttributes<HTMLDivElement>, CardContentClassNameOptions {}\n\n/**\n * @see {@link https://react-md.dev/components/card | Card Demos}\n * @since 6.0.0 Renamed `disableExtraPadding` to `disableLastChildPadding` and\n * removed the `disableParagraphMargin` prop.\n */\nexport const CardContent = forwardRef<HTMLDivElement, CardContentProps>(\n  function CardContent(props, ref) {\n    const {\n      children,\n      className,\n      disablePadding,\n      disableSecondaryColor,\n      disableLastChildPadding,\n      ...remaining\n    } = props;\n\n    return (\n      <div\n        {...remaining}\n        ref={ref}\n        className={cardContent({\n          className,\n          disablePadding,\n          disableSecondaryColor,\n          disableLastChildPadding,\n        })}\n      >\n        {children}\n      </div>\n    );\n  }\n);\n"],"names":["forwardRef","cardContent","CardContent","props","ref","children","className","disablePadding","disableSecondaryColor","disableLastChildPadding","remaining","div"],"mappings":";AAAA,SAA8BA,UAAU,QAAQ,QAAQ;AAExD,SAA2CC,WAAW,QAAQ,cAAc;AAS5E;;;;CAIC,GACD,OAAO,MAAMC,4BAAcF,WACzB,SAASE,YAAYC,KAAK,EAAEC,GAAG;IAC7B,MAAM,EACJC,QAAQ,EACRC,SAAS,EACTC,cAAc,EACdC,qBAAqB,EACrBC,uBAAuB,EACvB,GAAGC,WACJ,GAAGP;IAEJ,qBACE,KAACQ;QACE,GAAGD,SAAS;QACbN,KAAKA;QACLE,WAAWL,YAAY;YACrBK;YACAC;YACAC;YACAC;QACF;kBAECJ;;AAGP,GACA"}

package/dist/card/ClickableCard.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/card/ClickableCard.tsx"],"sourcesContent":["\"use client\";\n\nimport { cnb } from \"cnbuilder\";\nimport { type MouseEventHandler, forwardRef } from \"react\";\n\nimport { type ComponentWithRippleProps } from \"../interaction/types.js\";\nimport { useElementInteraction } from \"../interaction/useElementInteraction.js\";\nimport { useHigherContrastChildren } from \"../interaction/useHigherContrastChildren.js\";\nimport { Card, type CardProps } from \"./Card.js\";\n\nconst noop = (): void => {\n  // do nothing\n};\n\n/**\n * @since 6.0.0\n */\nexport interface ClickableCardProps\n  extends CardProps,\n    ComponentWithRippleProps {\n  onClick: MouseEventHandler<HTMLDivElement>;\n\n  /**\n   * Set this to `true` to disable all click events.\n   *\n   * Note: Any disabled styling will need to be manually applied.\n   *\n   * @defaultValue `false`\n   */\n  disabled?: boolean;\n}\n\n/**\n * A Small wrapper around the `Card` component that is clickable and has the\n * element interaction enabled (ripples).\n *\n * @example Simple Example\n * ```tsx\n * import { CardContent } from \"@react-md/core/card/CardContent\"\n * import { ClickableCard } from \"@react-md/core/card/ClickableCard\";\n * import { type ReactElement } from \"react\";\n *\n * export default function ClickableCardExample(): ReactElement {\n *   return (\n *     <ClickableCard\n *       onClick={() => {\n *         // do something\n *       }}\n *     >\n *       <CardContent>Wow</CardContent>\n *     </ClickableCard>\n *   );\n * }\n * ```\n *\n * @see {@link https://react-md.dev/components/card#clickable-card | ClickableCard Demos}\n * @since 6.0.0\n */\nexport const ClickableCard = forwardRef<HTMLDivElement, ClickableCardProps>(\n  function ClickableCard(props, ref) {\n    const {\n      role = \"button\",\n      disabled,\n      tabIndex = disabled ? undefined : 0,\n      onClick,\n      onKeyDown = noop,\n      className,\n      children: propChildren,\n      disableRipple,\n      ...remaining\n    } = props;\n    const { handlers, ripples } = useElementInteraction({\n      ...remaining,\n      mode: disableRipple ? \"none\" : undefined,\n    });\n    const children = useHigherContrastChildren(propChildren);\n\n    return (\n      <Card\n        {...remaining}\n        {...handlers}\n        aria-disabled={disabled || undefined}\n        ref={ref}\n        role={role}\n        tabIndex={tabIndex}\n        className={cnb(\"rmd-card--clickable\", className)}\n        onClick={(event) => {\n          if (disabled) {\n            return;\n          }\n\n          onClick(event);\n        }}\n        onKeyDown={(event) => {\n          onKeyDown(event);\n          if (disabled) {\n            return;\n          }\n\n          const isSpace = event.key === \" \";\n          if (isSpace || event.key === \"Enter\") {\n            if (isSpace) {\n              event.preventDefault();\n            }\n\n            event.currentTarget.click();\n          }\n        }}\n      >\n        {children}\n        {ripples}\n      </Card>\n    );\n  }\n);\n"],"names":["cnb","forwardRef","useElementInteraction","useHigherContrastChildren","Card","noop","ClickableCard","props","ref","role","disabled","tabIndex","undefined","onClick","onKeyDown","className","children","propChildren","disableRipple","remaining","handlers","ripples","mode","aria-disabled","event","isSpace","key","preventDefault","currentTarget","click"],"mappings":"AAAA;;AAEA,SAASA,GAAG,QAAQ,YAAY;AAChC,SAAiCC,UAAU,QAAQ,QAAQ;AAG3D,SAASC,qBAAqB,QAAQ,0CAA0C;AAChF,SAASC,yBAAyB,QAAQ,8CAA8C;AACxF,SAASC,IAAI,QAAwB,YAAY;AAEjD,MAAMC,OAAO;AACX,aAAa;AACf;AAoBA;;;;;;;;;;;;;;;;;;;;;;;;;CAyBC,GACD,OAAO,MAAMC,8BAAgBL,WAC3B,SAASK,cAAcC,KAAK,EAAEC,GAAG;IAC/B,MAAM,EACJC,OAAO,QAAQ,EACfC,QAAQ,EACRC,WAAWD,WAAWE,YAAY,CAAC,EACnCC,OAAO,EACPC,YAAYT,IAAI,EAChBU,SAAS,EACTC,UAAUC,YAAY,EACtBC,aAAa,EACb,GAAGC,WACJ,GAAGZ;IACJ,MAAM,EAAEa,QAAQ,EAAEC,OAAO,EAAE,GAAGnB,sBAAsB;QAClD,GAAGiB,SAAS;QACZG,MAAMJ,gBAAgB,SAASN;IACjC;IACA,MAAMI,WAAWb,0BAA0Bc;IAE3C,qBACE,MAACb;QACE,GAAGe,SAAS;QACZ,GAAGC,QAAQ;QACZG,iBAAeb,YAAYE;QAC3BJ,KAAKA;QACLC,MAAMA;QACNE,UAAUA;QACVI,WAAWf,IAAI,uBAAuBe;QACtCF,SAAS,CAACW;YACR,IAAId,UAAU;gBACZ;YACF;YAEAG,QAAQW;QACV;QACAV,WAAW,CAACU;YACVV,UAAUU;YACV,IAAId,UAAU;gBACZ;YACF;YAEA,MAAMe,UAAUD,MAAME,GAAG,KAAK;YAC9B,IAAID,WAAWD,MAAME,GAAG,KAAK,SAAS;gBACpC,IAAID,SAAS;oBACXD,MAAMG,cAAc;gBACtB;gBAEAH,MAAMI,aAAa,CAACC,KAAK;YAC3B;QACF;;YAECb;YACAK;;;AAGP,GACA"}
+{"version":3,"sources":["../../src/card/ClickableCard.tsx"],"sourcesContent":["\"use client\";\n\nimport { cnb } from \"cnbuilder\";\nimport { type MouseEventHandler, forwardRef } from \"react\";\n\nimport { type ComponentWithRippleProps } from \"../interaction/types.js\";\nimport { useElementInteraction } from \"../interaction/useElementInteraction.js\";\nimport { useHigherContrastChildren } from \"../interaction/useHigherContrastChildren.js\";\nimport { Card, type CardProps } from \"./Card.js\";\n\nconst noop = (): void => {\n  // do nothing\n};\n\n/**\n * @since 6.0.0\n */\nexport interface ClickableCardProps\n  extends CardProps, ComponentWithRippleProps {\n  onClick: MouseEventHandler<HTMLDivElement>;\n\n  /**\n   * Set this to `true` to disable all click events.\n   *\n   * Note: Any disabled styling will need to be manually applied.\n   *\n   * @defaultValue `false`\n   */\n  disabled?: boolean;\n}\n\n/**\n * A Small wrapper around the `Card` component that is clickable and has the\n * element interaction enabled (ripples).\n *\n * @example Simple Example\n * ```tsx\n * import { CardContent } from \"@react-md/core/card/CardContent\"\n * import { ClickableCard } from \"@react-md/core/card/ClickableCard\";\n * import { type ReactElement } from \"react\";\n *\n * export default function ClickableCardExample(): ReactElement {\n *   return (\n *     <ClickableCard\n *       onClick={() => {\n *         // do something\n *       }}\n *     >\n *       <CardContent>Wow</CardContent>\n *     </ClickableCard>\n *   );\n * }\n * ```\n *\n * @see {@link https://react-md.dev/components/card#clickable-card | ClickableCard Demos}\n * @since 6.0.0\n */\nexport const ClickableCard = forwardRef<HTMLDivElement, ClickableCardProps>(\n  function ClickableCard(props, ref) {\n    const {\n      role = \"button\",\n      disabled,\n      tabIndex = disabled ? undefined : 0,\n      onClick,\n      onKeyDown = noop,\n      className,\n      children: propChildren,\n      disableRipple,\n      ...remaining\n    } = props;\n    const { handlers, ripples } = useElementInteraction({\n      ...remaining,\n      mode: disableRipple ? \"none\" : undefined,\n    });\n    const children = useHigherContrastChildren(propChildren);\n\n    return (\n      <Card\n        {...remaining}\n        {...handlers}\n        aria-disabled={disabled || undefined}\n        ref={ref}\n        role={role}\n        tabIndex={tabIndex}\n        className={cnb(\"rmd-card--clickable\", className)}\n        onClick={(event) => {\n          if (disabled) {\n            return;\n          }\n\n          onClick(event);\n        }}\n        onKeyDown={(event) => {\n          onKeyDown(event);\n          if (disabled) {\n            return;\n          }\n\n          const isSpace = event.key === \" \";\n          if (isSpace || event.key === \"Enter\") {\n            if (isSpace) {\n              event.preventDefault();\n            }\n\n            event.currentTarget.click();\n          }\n        }}\n      >\n        {children}\n        {ripples}\n      </Card>\n    );\n  }\n);\n"],"names":["cnb","forwardRef","useElementInteraction","useHigherContrastChildren","Card","noop","ClickableCard","props","ref","role","disabled","tabIndex","undefined","onClick","onKeyDown","className","children","propChildren","disableRipple","remaining","handlers","ripples","mode","aria-disabled","event","isSpace","key","preventDefault","currentTarget","click"],"mappings":"AAAA;;AAEA,SAASA,GAAG,QAAQ,YAAY;AAChC,SAAiCC,UAAU,QAAQ,QAAQ;AAG3D,SAASC,qBAAqB,QAAQ,0CAA0C;AAChF,SAASC,yBAAyB,QAAQ,8CAA8C;AACxF,SAASC,IAAI,QAAwB,YAAY;AAEjD,MAAMC,OAAO;AACX,aAAa;AACf;AAmBA;;;;;;;;;;;;;;;;;;;;;;;;;CAyBC,GACD,OAAO,MAAMC,8BAAgBL,WAC3B,SAASK,cAAcC,KAAK,EAAEC,GAAG;IAC/B,MAAM,EACJC,OAAO,QAAQ,EACfC,QAAQ,EACRC,WAAWD,WAAWE,YAAY,CAAC,EACnCC,OAAO,EACPC,YAAYT,IAAI,EAChBU,SAAS,EACTC,UAAUC,YAAY,EACtBC,aAAa,EACb,GAAGC,WACJ,GAAGZ;IACJ,MAAM,EAAEa,QAAQ,EAAEC,OAAO,EAAE,GAAGnB,sBAAsB;QAClD,GAAGiB,SAAS;QACZG,MAAMJ,gBAAgB,SAASN;IACjC;IACA,MAAMI,WAAWb,0BAA0Bc;IAE3C,qBACE,MAACb;QACE,GAAGe,SAAS;QACZ,GAAGC,QAAQ;QACZG,iBAAeb,YAAYE;QAC3BJ,KAAKA;QACLC,MAAMA;QACNE,UAAUA;QACVI,WAAWf,IAAI,uBAAuBe;QACtCF,SAAS,CAACW;YACR,IAAId,UAAU;gBACZ;YACF;YAEAG,QAAQW;QACV;QACAV,WAAW,CAACU;YACVV,UAAUU;YACV,IAAId,UAAU;gBACZ;YACF;YAEA,MAAMe,UAAUD,MAAME,GAAG,KAAK;YAC9B,IAAID,WAAWD,MAAME,GAAG,KAAK,SAAS;gBACpC,IAAID,SAAS;oBACXD,MAAMG,cAAc;gBACtB;gBAEAH,MAAMI,aAAa,CAACC,KAAK;YAC3B;QACF;;YAECb;YACAK;;;AAGP,GACA"}

package/dist/card/_card.scss

@@ -59,10 +59,10 @@ $light-theme-background-color: theme.theme-get-var(surface-color) !default;
 
 /// The background color to use when using the global dark theme
 /// @type Color
+// prettier-ignore
 $dark-theme-background-color: if(
-  theme.$disable-dark-elevation,
-  theme.$dark-theme-surface-color,
-  map.get(theme.$dark-elevation-colors, $elevation)
+  sass(theme.$disable-dark-elevation): theme.$dark-theme-surface-color;
+  else: map.get(theme.$dark-elevation-colors, $elevation)
 ) !default;
 
 /// The default card background color
@@ -226,10 +226,10 @@ $variables: (background-color, color);
           column-gap: $header-spacing;
           display: flex;
           max-width: 100%;
+          // prettier-ignore
           padding: if(
-            $header-padding == $header-padding-top or not $header-padding-top,
-            $header-padding,
-            $header-padding-top $header-padding $header-padding
+            sass($header-padding == $header-padding-top or not $header-padding-top): $header-padding;
+            else: $header-padding-top $header-padding $header-padding
           );
         }
 

package/dist/chip/Chip.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/chip/Chip.tsx"],"sourcesContent":["\"use client\";\n\nimport { cnb } from \"cnbuilder\";\nimport {\n  type ButtonHTMLAttributes,\n  type CSSProperties,\n  type HTMLAttributes,\n  type ReactNode,\n  forwardRef,\n} from \"react\";\n\nimport { type BackgroundColor } from \"../cssUtils.js\";\nimport { getIcon } from \"../icon/config.js\";\nimport { type ComponentWithRippleProps } from \"../interaction/types.js\";\nimport { useElementInteraction } from \"../interaction/useElementInteraction.js\";\nimport { useHigherContrastChildren } from \"../interaction/useHigherContrastChildren.js\";\nimport {\n  type BaseMaxWidthTransitionOptions,\n  useMaxWidthTransition,\n} from \"../transition/useMaxWidthTransition.js\";\nimport { type PropsWithRef } from \"../types.js\";\nimport { type ChipTheme, chip, chipContent } from \"./styles.js\";\n\n/**\n * @since 6.0.0 Renamed the `noninteractive` prop to\n * `noninteractable`.\n * @since 6.3.1 Extends BaseMaxWidthTransitionOptions for CSSProperties module\n * augmentation.\n */\nexport interface ChipProps\n  extends ButtonHTMLAttributes<HTMLButtonElement>,\n    BaseMaxWidthTransitionOptions,\n    ComponentWithRippleProps {\n  /**\n   * @defaultValue `\"solid\"`\n   */\n  theme?: ChipTheme;\n\n  /**\n   * Set this to `true` if the chip should gain additional box shadow while the\n   * user is pressing down on the chip.\n   *\n   * @defaultValue `false`\n   */\n  raisable?: boolean;\n\n  /**\n   * @defaultValue `false`\n   */\n  disabled?: boolean;\n\n  /**\n   * When this is a boolean, a selected icon will be displayed before the\n   * `children` and appear/disappear when `true`/`false`.\n   *\n   * @see {@link selectedIcon}\n   * @see {@link selectedIconAfter}\n   * @see {@link selectedThemed}\n   */\n  selected?: boolean;\n\n  /**\n   * Set this to `true` if the chip should change background color while\n   * {@link selected} instead of displaying an icon. The default background\n   * color is a lighter swatch of the theme primary color.\n   *\n   * @defaultValue `false`\n   */\n  selectedThemed?: boolean;\n\n  /**\n   * An optional className to provide only while {@link selected} is `true`.\n   */\n  selectedClassName?: string;\n\n  /**\n   * This will be ignored if {@link selected} is `undefined`.\n   *\n   * @defaultValue `getIcon(\"selected\")`\n   */\n  selectedIcon?: ReactNode;\n\n  /**\n   * Set this to `true` if the {@link selectedIcon} should display as the\n   * {@link rightAddon} instead of the {@link leftAddon}.\n   *\n   * @defaultValue `false`\n   * @since 6.0.0\n   */\n  selectedIconAfter?: boolean;\n\n  /**\n   * Set this to `true` if the {@link selectedIcon} should not animate and\n   * instead apply `display: none`\n   *\n   * @defaultValue `false`\n   */\n  disableIconTransition?: boolean;\n\n  /**\n   * Set this to `true` to render the chip as a `<span>` instead of a button.\n   *\n   * @since 2.6.0\n   * @since 6.0.0 Renamed from `noninteractable`\n   * @defaultValue `false`\n   */\n  noninteractive?: boolean;\n\n  /**\n   * An optional background color theme to use.\n   *\n   * @since 6.0.0\n   */\n  backgroundColor?: BackgroundColor;\n\n  /**\n   * An optional icon, avatar, circular progress, or custom component to render\n   * before the `children`. This will remove some of the leading horizontal\n   * padding on the chip as well.\n   */\n  leftAddon?: ReactNode;\n\n  /**\n   * An optional icon, avatar, circular progress, or custom component to render\n   * after the `children`. This will remove some of the trailing horizontal\n   * padding on the chip as well.\n   */\n  rightAddon?: ReactNode;\n\n  /**\n   * Set this to true if the `children` should not be wrapped in a span to apply\n   * the {@link chipContent} styles which allow for shrinking text and\n   * truncating text with ellipsis.\n   *\n   * @defaultValue `false`\n   */\n  disableContentWrap?: boolean;\n\n  /**\n   * This will be ignored if {@link disableContentWrap} is `true`.\n   *\n   * @since 6.0.0\n   */\n  contentProps?: PropsWithRef<HTMLAttributes<HTMLSpanElement>>;\n\n  /**\n   * This will be ignored if {@link disableContentWrap} is `true`.\n   */\n  contentStyle?: CSSProperties;\n\n  /**\n   * This will be ignored if {@link disableContentWrap} is `true`.\n   */\n  contentClassName?: string;\n}\n\n/**\n * @example Simple Example\n * ```tsx\n * import { Chip } from \"@react-md/core/chip/Chip\";\n * import type { ReactElement } from \"react\";\n *\n * function Example(): ReactElement {\n *   return <Chip>Content</Chip>;\n * }\n * ```\n *\n * @example Outlined Example\n * ```tsx\n * import { Chip } from \"@react-md/core/chip/Chip\";\n * import type { ReactElement } from \"react\";\n *\n * function Example(): ReactElement {\n *   return <Chip theme=\"outline\">Content</Chip>;\n * }\n * ```\n *\n * @example Addons Example\n * ```tsx\n * import { Avatar } from \"@react-md/core/avatar/Avatar\";\n * import { Chip } from \"@react-md/core/chip/Chip\";\n * import AddCircleIcon from \"@react-md/material-icons/AddCircleIcon\";\n * import type { ReactElement } from \"react\";\n *\n * function Example(): ReactElement {\n *   return (\n *     <Chip\n *       leftAddon={\n *         <Avatar>\n *           <img src=\"https://i.pravatar.cc/40?img=3\" alt=\"\" />\n *         </Avatar>\n *       }\n *       rightAddon={<AddCircleIcon />}\n *     >\n *       Chip\n *     </Chip>\n *   );\n * }\n * ```\n *\n * @see {@link https://react-md.dev/components/chip | Chip Demos}\n * @since 6.0.0 Renamed the `noninteractable` prop to\n * `noninteractive`.\n */\nexport const Chip = forwardRef<HTMLButtonElement, ChipProps>(\n  function Chip(props, ref) {\n    const {\n      \"aria-pressed\": ariaPressed,\n      theme = \"solid\",\n      className,\n      raisable = false,\n      disabled = false,\n      selected,\n      selectedThemed = false,\n      selectedClassName,\n      selectedIcon: propSelectedIcon,\n      selectedIconAfter = false,\n      backgroundColor,\n      noninteractive = false,\n      disableRipple,\n      disableIconTransition = false,\n      children: propChildren,\n      onClick,\n      onKeyDown,\n      onKeyUp,\n      onMouseDown,\n      onMouseUp,\n      onMouseLeave,\n      onDragStart,\n      onTouchStart,\n      onTouchEnd,\n      onTouchMove,\n      leftAddon: propLeftAddon,\n      rightAddon: propRightAddon,\n      contentProps,\n      contentStyle,\n      contentClassName,\n      disableContentWrap = false,\n      ...remaining\n    } = props;\n\n    let buttonProps: ButtonHTMLAttributes<HTMLButtonElement> | undefined;\n    if (!noninteractive) {\n      buttonProps = {\n        \"aria-pressed\": ariaPressed ?? (!!selected || undefined),\n        type: \"button\",\n        disabled,\n      };\n    }\n\n    let content = propChildren;\n    if (!disableContentWrap) {\n      content = (\n        <span\n          style={contentStyle}\n          {...contentProps}\n          className={cnb(\n            chipContent({ className: contentClassName }),\n            contentProps?.className\n          )}\n        >\n          {propChildren}\n        </span>\n      );\n    }\n\n    let leftAddon = propLeftAddon;\n    let rightAddon = propRightAddon;\n    const selectedIconNode = getIcon(\"selected\", propSelectedIcon);\n    const isTransitionable =\n      !selectedThemed &&\n      typeof selected === \"boolean\" &&\n      typeof (selectedIconAfter ? propRightAddon : propLeftAddon) ===\n        \"undefined\";\n    const selectedIcon = useMaxWidthTransition({\n      element: selectedIconNode,\n      transitionIn: !!selected,\n      disabled: !isTransitionable,\n      disableTransition: disableIconTransition,\n    });\n    if (isTransitionable) {\n      if (selectedIconAfter) {\n        rightAddon = selectedIcon;\n      } else {\n        leftAddon = selectedIcon;\n      }\n    }\n\n    const { pressed, pressedClassName, ripples, handlers } =\n      useElementInteraction({\n        mode: disableRipple ? \"none\" : undefined,\n        onClick,\n        onKeyDown,\n        onKeyUp,\n        onMouseDown,\n        onMouseUp,\n        onMouseLeave,\n        onDragStart,\n        onTouchStart,\n        onTouchEnd,\n        onTouchMove,\n        disabled: disabled || noninteractive,\n      });\n    const children = useHigherContrastChildren(content);\n    const Component = noninteractive ? \"span\" : \"button\";\n\n    return (\n      <Component\n        {...remaining}\n        {...buttonProps}\n        {...handlers}\n        className={chip({\n          className,\n          theme,\n          pressed: raisable && pressed,\n          disabled,\n          selected,\n          selectedThemed,\n          selectedClassName,\n          noninteractive,\n          backgroundColor,\n          pressedClassName,\n          leftAddon: !!leftAddon && (selectedIconAfter || selected !== false),\n          rightAddon:\n            !!rightAddon && (!selectedIconAfter || selected !== false),\n        })}\n        ref={ref}\n      >\n        {leftAddon}\n        {children}\n        {rightAddon}\n        {ripples}\n      </Component>\n    );\n  }\n);\n"],"names":["cnb","forwardRef","getIcon","useElementInteraction","useHigherContrastChildren","useMaxWidthTransition","chip","chipContent","Chip","props","ref","ariaPressed","theme","className","raisable","disabled","selected","selectedThemed","selectedClassName","selectedIcon","propSelectedIcon","selectedIconAfter","backgroundColor","noninteractive","disableRipple","disableIconTransition","children","propChildren","onClick","onKeyDown","onKeyUp","onMouseDown","onMouseUp","onMouseLeave","onDragStart","onTouchStart","onTouchEnd","onTouchMove","leftAddon","propLeftAddon","rightAddon","propRightAddon","contentProps","contentStyle","contentClassName","disableContentWrap","remaining","buttonProps","undefined","type","content","span","style","selectedIconNode","isTransitionable","element","transitionIn","disableTransition","pressed","pressedClassName","ripples","handlers","mode","Component"],"mappings":"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"}
+{"version":3,"sources":["../../src/chip/Chip.tsx"],"sourcesContent":["\"use client\";\n\nimport { cnb } from \"cnbuilder\";\nimport {\n  type ButtonHTMLAttributes,\n  type CSSProperties,\n  type HTMLAttributes,\n  type ReactNode,\n  forwardRef,\n} from \"react\";\n\nimport { type BackgroundColor } from \"../cssUtils.js\";\nimport { getIcon } from \"../icon/config.js\";\nimport { type ComponentWithRippleProps } from \"../interaction/types.js\";\nimport { useElementInteraction } from \"../interaction/useElementInteraction.js\";\nimport { useHigherContrastChildren } from \"../interaction/useHigherContrastChildren.js\";\nimport {\n  type BaseMaxWidthTransitionOptions,\n  useMaxWidthTransition,\n} from \"../transition/useMaxWidthTransition.js\";\nimport { type PropsWithRef } from \"../types.js\";\nimport { type ChipTheme, chip, chipContent } from \"./styles.js\";\n\n/**\n * @since 6.0.0 Renamed the `noninteractive` prop to\n * `noninteractable`.\n * @since 6.3.1 Extends BaseMaxWidthTransitionOptions for CSSProperties module\n * augmentation.\n */\nexport interface ChipProps\n  extends\n    ButtonHTMLAttributes<HTMLButtonElement>,\n    BaseMaxWidthTransitionOptions,\n    ComponentWithRippleProps {\n  /**\n   * @defaultValue `\"solid\"`\n   */\n  theme?: ChipTheme;\n\n  /**\n   * Set this to `true` if the chip should gain additional box shadow while the\n   * user is pressing down on the chip.\n   *\n   * @defaultValue `false`\n   */\n  raisable?: boolean;\n\n  /**\n   * @defaultValue `false`\n   */\n  disabled?: boolean;\n\n  /**\n   * When this is a boolean, a selected icon will be displayed before the\n   * `children` and appear/disappear when `true`/`false`.\n   *\n   * @see {@link selectedIcon}\n   * @see {@link selectedIconAfter}\n   * @see {@link selectedThemed}\n   */\n  selected?: boolean;\n\n  /**\n   * Set this to `true` if the chip should change background color while\n   * {@link selected} instead of displaying an icon. The default background\n   * color is a lighter swatch of the theme primary color.\n   *\n   * @defaultValue `false`\n   */\n  selectedThemed?: boolean;\n\n  /**\n   * An optional className to provide only while {@link selected} is `true`.\n   */\n  selectedClassName?: string;\n\n  /**\n   * This will be ignored if {@link selected} is `undefined`.\n   *\n   * @defaultValue `getIcon(\"selected\")`\n   */\n  selectedIcon?: ReactNode;\n\n  /**\n   * Set this to `true` if the {@link selectedIcon} should display as the\n   * {@link rightAddon} instead of the {@link leftAddon}.\n   *\n   * @defaultValue `false`\n   * @since 6.0.0\n   */\n  selectedIconAfter?: boolean;\n\n  /**\n   * Set this to `true` if the {@link selectedIcon} should not animate and\n   * instead apply `display: none`\n   *\n   * @defaultValue `false`\n   */\n  disableIconTransition?: boolean;\n\n  /**\n   * Set this to `true` to render the chip as a `<span>` instead of a button.\n   *\n   * @since 2.6.0\n   * @since 6.0.0 Renamed from `noninteractable`\n   * @defaultValue `false`\n   */\n  noninteractive?: boolean;\n\n  /**\n   * An optional background color theme to use.\n   *\n   * @since 6.0.0\n   */\n  backgroundColor?: BackgroundColor;\n\n  /**\n   * An optional icon, avatar, circular progress, or custom component to render\n   * before the `children`. This will remove some of the leading horizontal\n   * padding on the chip as well.\n   */\n  leftAddon?: ReactNode;\n\n  /**\n   * An optional icon, avatar, circular progress, or custom component to render\n   * after the `children`. This will remove some of the trailing horizontal\n   * padding on the chip as well.\n   */\n  rightAddon?: ReactNode;\n\n  /**\n   * Set this to true if the `children` should not be wrapped in a span to apply\n   * the {@link chipContent} styles which allow for shrinking text and\n   * truncating text with ellipsis.\n   *\n   * @defaultValue `false`\n   */\n  disableContentWrap?: boolean;\n\n  /**\n   * This will be ignored if {@link disableContentWrap} is `true`.\n   *\n   * @since 6.0.0\n   */\n  contentProps?: PropsWithRef<HTMLAttributes<HTMLSpanElement>>;\n\n  /**\n   * This will be ignored if {@link disableContentWrap} is `true`.\n   */\n  contentStyle?: CSSProperties;\n\n  /**\n   * This will be ignored if {@link disableContentWrap} is `true`.\n   */\n  contentClassName?: string;\n}\n\n/**\n * @example Simple Example\n * ```tsx\n * import { Chip } from \"@react-md/core/chip/Chip\";\n * import type { ReactElement } from \"react\";\n *\n * function Example(): ReactElement {\n *   return <Chip>Content</Chip>;\n * }\n * ```\n *\n * @example Outlined Example\n * ```tsx\n * import { Chip } from \"@react-md/core/chip/Chip\";\n * import type { ReactElement } from \"react\";\n *\n * function Example(): ReactElement {\n *   return <Chip theme=\"outline\">Content</Chip>;\n * }\n * ```\n *\n * @example Addons Example\n * ```tsx\n * import { Avatar } from \"@react-md/core/avatar/Avatar\";\n * import { Chip } from \"@react-md/core/chip/Chip\";\n * import AddCircleIcon from \"@react-md/material-icons/AddCircleIcon\";\n * import type { ReactElement } from \"react\";\n *\n * function Example(): ReactElement {\n *   return (\n *     <Chip\n *       leftAddon={\n *         <Avatar>\n *           <img src=\"https://i.pravatar.cc/40?img=3\" alt=\"\" />\n *         </Avatar>\n *       }\n *       rightAddon={<AddCircleIcon />}\n *     >\n *       Chip\n *     </Chip>\n *   );\n * }\n * ```\n *\n * @see {@link https://react-md.dev/components/chip | Chip Demos}\n * @since 6.0.0 Renamed the `noninteractable` prop to\n * `noninteractive`.\n */\nexport const Chip = forwardRef<HTMLButtonElement, ChipProps>(\n  function Chip(props, ref) {\n    const {\n      \"aria-pressed\": ariaPressed,\n      theme = \"solid\",\n      className,\n      raisable = false,\n      disabled = false,\n      selected,\n      selectedThemed = false,\n      selectedClassName,\n      selectedIcon: propSelectedIcon,\n      selectedIconAfter = false,\n      backgroundColor,\n      noninteractive = false,\n      disableRipple,\n      disableIconTransition = false,\n      children: propChildren,\n      onClick,\n      onKeyDown,\n      onKeyUp,\n      onMouseDown,\n      onMouseUp,\n      onMouseLeave,\n      onDragStart,\n      onTouchStart,\n      onTouchEnd,\n      onTouchMove,\n      leftAddon: propLeftAddon,\n      rightAddon: propRightAddon,\n      contentProps,\n      contentStyle,\n      contentClassName,\n      disableContentWrap = false,\n      ...remaining\n    } = props;\n\n    let buttonProps: ButtonHTMLAttributes<HTMLButtonElement> | undefined;\n    if (!noninteractive) {\n      buttonProps = {\n        \"aria-pressed\": ariaPressed ?? (!!selected || undefined),\n        type: \"button\",\n        disabled,\n      };\n    }\n\n    let content = propChildren;\n    if (!disableContentWrap) {\n      content = (\n        <span\n          style={contentStyle}\n          {...contentProps}\n          className={cnb(\n            chipContent({ className: contentClassName }),\n            contentProps?.className\n          )}\n        >\n          {propChildren}\n        </span>\n      );\n    }\n\n    let leftAddon = propLeftAddon;\n    let rightAddon = propRightAddon;\n    const selectedIconNode = getIcon(\"selected\", propSelectedIcon);\n    const isTransitionable =\n      !selectedThemed &&\n      typeof selected === \"boolean\" &&\n      typeof (selectedIconAfter ? propRightAddon : propLeftAddon) ===\n        \"undefined\";\n    const selectedIcon = useMaxWidthTransition({\n      element: selectedIconNode,\n      transitionIn: !!selected,\n      disabled: !isTransitionable,\n      disableTransition: disableIconTransition,\n    });\n    if (isTransitionable) {\n      if (selectedIconAfter) {\n        rightAddon = selectedIcon;\n      } else {\n        leftAddon = selectedIcon;\n      }\n    }\n\n    const { pressed, pressedClassName, ripples, handlers } =\n      useElementInteraction({\n        mode: disableRipple ? \"none\" : undefined,\n        onClick,\n        onKeyDown,\n        onKeyUp,\n        onMouseDown,\n        onMouseUp,\n        onMouseLeave,\n        onDragStart,\n        onTouchStart,\n        onTouchEnd,\n        onTouchMove,\n        disabled: disabled || noninteractive,\n      });\n    const children = useHigherContrastChildren(content);\n    const Component = noninteractive ? \"span\" : \"button\";\n\n    return (\n      <Component\n        {...remaining}\n        {...buttonProps}\n        {...handlers}\n        className={chip({\n          className,\n          theme,\n          pressed: raisable && pressed,\n          disabled,\n          selected,\n          selectedThemed,\n          selectedClassName,\n          noninteractive,\n          backgroundColor,\n          pressedClassName,\n          leftAddon: !!leftAddon && (selectedIconAfter || selected !== false),\n          rightAddon:\n            !!rightAddon && (!selectedIconAfter || selected !== false),\n        })}\n        ref={ref}\n      >\n        {leftAddon}\n        {children}\n        {rightAddon}\n        {ripples}\n      </Component>\n    );\n  }\n);\n"],"names":["cnb","forwardRef","getIcon","useElementInteraction","useHigherContrastChildren","useMaxWidthTransition","chip","chipContent","Chip","props","ref","ariaPressed","theme","className","raisable","disabled","selected","selectedThemed","selectedClassName","selectedIcon","propSelectedIcon","selectedIconAfter","backgroundColor","noninteractive","disableRipple","disableIconTransition","children","propChildren","onClick","onKeyDown","onKeyUp","onMouseDown","onMouseUp","onMouseLeave","onDragStart","onTouchStart","onTouchEnd","onTouchMove","leftAddon","propLeftAddon","rightAddon","propRightAddon","contentProps","contentStyle","contentClassName","disableContentWrap","remaining","buttonProps","undefined","type","content","span","style","selectedIconNode","isTransitionable","element","transitionIn","disableTransition","pressed","pressedClassName","ripples","handlers","mode","Component"],"mappings":"AAAA;;AAEA,SAASA,GAAG,QAAQ,YAAY;AAChC,SAKEC,UAAU,QACL,QAAQ;AAGf,SAASC,OAAO,QAAQ,oBAAoB;AAE5C,SAASC,qBAAqB,QAAQ,0CAA0C;AAChF,SAASC,yBAAyB,QAAQ,8CAA8C;AACxF,SAEEC,qBAAqB,QAChB,yCAAyC;AAEhD,SAAyBC,IAAI,EAAEC,WAAW,QAAQ,cAAc;AAwIhE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA+CC,GACD,OAAO,MAAMC,qBAAOP,WAClB,SAASO,KAAKC,KAAK,EAAEC,GAAG;IACtB,MAAM,EACJ,gBAAgBC,WAAW,EAC3BC,QAAQ,OAAO,EACfC,SAAS,EACTC,WAAW,KAAK,EAChBC,WAAW,KAAK,EAChBC,QAAQ,EACRC,iBAAiB,KAAK,EACtBC,iBAAiB,EACjBC,cAAcC,gBAAgB,EAC9BC,oBAAoB,KAAK,EACzBC,eAAe,EACfC,iBAAiB,KAAK,EACtBC,aAAa,EACbC,wBAAwB,KAAK,EAC7BC,UAAUC,YAAY,EACtBC,OAAO,EACPC,SAAS,EACTC,OAAO,EACPC,WAAW,EACXC,SAAS,EACTC,YAAY,EACZC,WAAW,EACXC,YAAY,EACZC,UAAU,EACVC,WAAW,EACXC,WAAWC,aAAa,EACxBC,YAAYC,cAAc,EAC1BC,YAAY,EACZC,YAAY,EACZC,gBAAgB,EAChBC,qBAAqB,KAAK,EAC1B,GAAGC,WACJ,GAAGrC;IAEJ,IAAIsC;IACJ,IAAI,CAACxB,gBAAgB;QACnBwB,cAAc;YACZ,gBAAgBpC,eAAgB,CAAA,CAAC,CAACK,YAAYgC,SAAQ;YACtDC,MAAM;YACNlC;QACF;IACF;IAEA,IAAImC,UAAUvB;IACd,IAAI,CAACkB,oBAAoB;QACvBK,wBACE,KAACC;YACCC,OAAOT;YACN,GAAGD,YAAY;YAChB7B,WAAWb,IACTO,YAAY;gBAAEM,WAAW+B;YAAiB,IAC1CF,cAAc7B;sBAGfc;;IAGP;IAEA,IAAIW,YAAYC;IAChB,IAAIC,aAAaC;IACjB,MAAMY,mBAAmBnD,QAAQ,YAAYkB;IAC7C,MAAMkC,mBACJ,CAACrC,kBACD,OAAOD,aAAa,aACpB,OAAQK,CAAAA,oBAAoBoB,iBAAiBF,aAAY,MACvD;IACJ,MAAMpB,eAAed,sBAAsB;QACzCkD,SAASF;QACTG,cAAc,CAAC,CAACxC;QAChBD,UAAU,CAACuC;QACXG,mBAAmBhC;IACrB;IACA,IAAI6B,kBAAkB;QACpB,IAAIjC,mBAAmB;YACrBmB,aAAarB;QACf,OAAO;YACLmB,YAAYnB;QACd;IACF;IAEA,MAAM,EAAEuC,OAAO,EAAEC,gBAAgB,EAAEC,OAAO,EAAEC,QAAQ,EAAE,GACpD1D,sBAAsB;QACpB2D,MAAMtC,gBAAgB,SAASwB;QAC/BpB;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAtB,UAAUA,YAAYQ;IACxB;IACF,MAAMG,WAAWtB,0BAA0B8C;IAC3C,MAAMa,YAAYxC,iBAAiB,SAAS;IAE5C,qBACE,MAACwC;QACE,GAAGjB,SAAS;QACZ,GAAGC,WAAW;QACd,GAAGc,QAAQ;QACZhD,WAAWP,KAAK;YACdO;YACAD;YACA8C,SAAS5C,YAAY4C;YACrB3C;YACAC;YACAC;YACAC;YACAK;YACAD;YACAqC;YACArB,WAAW,CAAC,CAACA,aAAcjB,CAAAA,qBAAqBL,aAAa,KAAI;YACjEwB,YACE,CAAC,CAACA,cAAe,CAAA,CAACnB,qBAAqBL,aAAa,KAAI;QAC5D;QACAN,KAAKA;;YAEJ4B;YACAZ;YACAc;YACAoB;;;AAGP,GACA"}

package/dist/chip/_chip.scss

@@ -182,10 +182,10 @@ $solid-light-color: a11y.contrast-color($solid-light-background-color) !default;
 
 /// The dark theme background color for the `theme="solid"`
 /// @type Color
+// prettier-ignore
 $solid-dark-background-color: if(
-  theme.$disable-dark-elevation,
-  colors.$grey-900,
-  map.get(theme.$dark-elevation-colors, 12)
+  sass(theme.$disable-dark-elevation): colors.$grey-900;
+  else: map.get(theme.$dark-elevation-colors, 12)
 ) !default;
 
 /// The dark theme background color for the `theme="solid"` and the `Chip` is
@@ -261,10 +261,10 @@ $outline-dark-color: $outline-light-color !default;
 
 /// The background-color to use in dark themes when `theme="outline"`
 /// @type Color
+// prettier-ignore
 $outline-dark-background-color: if(
-  theme.$disable-dark-elevation,
-  theme.$dark-theme-surface-color,
-  map.get(theme.$dark-elevation-colors, $outline-raisable-box-shadow-z-value)
+  sass(theme.$disable-dark-elevation): theme.$dark-theme-surface-color;
+  else: map.get( theme.$dark-elevation-colors, $outline-raisable-box-shadow-z-value)
 ) !default;
 
 /// The text color to use in dark themes when `theme="outline"`

package/dist/datetime/NativeDateField.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/datetime/NativeDateField.tsx"],"sourcesContent":["\"use client\";\n\nimport { forwardRef } from \"react\";\n\nimport { TextField, type TextFieldProps } from \"../form/TextField.js\";\nimport { type DateFieldOptions, useDateField } from \"./useDateField.js\";\n\n/** @since 6.3.0 */\nexport interface NativeDateFieldProps\n  extends Omit<TextFieldProps, keyof DateFieldOptions | \"value\">,\n    Omit<DateFieldOptions, \"ref\"> {}\n\n/**\n * The `NativeDateField` is a simple wrapper around the `TextField` using the\n * `useDateField` hook.\n *\n * @example Simple Example\n * ```tsx\n * import { NativeDateField } from \"@react-md/core/datetime/NativeDateField\";\n * import { type ReactElement } from \"react\";\n *\n * function Example(): ReactElement {\n *   return <NativeDateField label=\"Delivery Date\" name=\"delivery\" />;\n * }\n * ```\n *\n * @see {@link https://react-md.dev/components/native-time-field | NativeDateField Demos}\n * @see {@link https://react-md.dev/components/text-field | TextField Demos}\n * @since 6.3.0\n */\nexport const NativeDateField = forwardRef<\n  HTMLInputElement,\n  NativeDateFieldProps\n>(function NativeDateField(props, ref) {\n  const {\n    id,\n    min,\n    max,\n    step,\n    onBlur,\n    onInvalid,\n    onChange,\n    helpText,\n    required,\n    validationType,\n    disableMessage,\n    errorIcon,\n    isErrored,\n    getErrorIcon,\n    getErrorMessage,\n    onErrorChange,\n    disableReset,\n    defaultValue,\n    ...remaining\n  } = props;\n  const { name, form } = props;\n  const { fieldProps } = useDateField({\n    id,\n    ref,\n    name,\n    form,\n    min,\n    max,\n    step,\n    onBlur,\n    onChange,\n    onInvalid,\n    helpText,\n    required,\n    validationType,\n    disableMessage: disableMessage ?? (!min && !max && !step && !required),\n    errorIcon,\n    isErrored,\n    getErrorIcon,\n    getErrorMessage,\n    onErrorChange,\n    disableReset,\n    defaultValue,\n  });\n\n  let { messageProps } = remaining;\n  if (fieldProps.messageProps) {\n    messageProps = {\n      ...fieldProps.messageProps,\n      ...remaining.messageProps,\n    };\n  }\n\n  return (\n    <TextField {...remaining} {...fieldProps} messageProps={messageProps} />\n  );\n});\n"],"names":["forwardRef","TextField","useDateField","NativeDateField","props","ref","id","min","max","step","onBlur","onInvalid","onChange","helpText","required","validationType","disableMessage","errorIcon","isErrored","getErrorIcon","getErrorMessage","onErrorChange","disableReset","defaultValue","remaining","name","form","fieldProps","messageProps"],"mappings":"AAAA;;AAEA,SAASA,UAAU,QAAQ,QAAQ;AAEnC,SAASC,SAAS,QAA6B,uBAAuB;AACtE,SAAgCC,YAAY,QAAQ,oBAAoB;AAOxE;;;;;;;;;;;;;;;;;CAiBC,GACD,OAAO,MAAMC,gCAAkBH,WAG7B,SAASG,gBAAgBC,KAAK,EAAEC,GAAG;IACnC,MAAM,EACJC,EAAE,EACFC,GAAG,EACHC,GAAG,EACHC,IAAI,EACJC,MAAM,EACNC,SAAS,EACTC,QAAQ,EACRC,QAAQ,EACRC,QAAQ,EACRC,cAAc,EACdC,cAAc,EACdC,SAAS,EACTC,SAAS,EACTC,YAAY,EACZC,eAAe,EACfC,aAAa,EACbC,YAAY,EACZC,YAAY,EACZ,GAAGC,WACJ,GAAGpB;IACJ,MAAM,EAAEqB,IAAI,EAAEC,IAAI,EAAE,GAAGtB;IACvB,MAAM,EAAEuB,UAAU,EAAE,GAAGzB,aAAa;QAClCI;QACAD;QACAoB;QACAC;QACAnB;QACAC;QACAC;QACAC;QACAE;QACAD;QACAE;QACAC;QACAC;QACAC,gBAAgBA,kBAAmB,CAAA,CAACT,OAAO,CAACC,OAAO,CAACC,QAAQ,CAACK,QAAO;QACpEG;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;IACF;IAEA,IAAI,EAAEK,YAAY,EAAE,GAAGJ;IACvB,IAAIG,WAAWC,YAAY,EAAE;QAC3BA,eAAe;YACb,GAAGD,WAAWC,YAAY;YAC1B,GAAGJ,UAAUI,YAAY;QAC3B;IACF;IAEA,qBACE,KAAC3B;QAAW,GAAGuB,SAAS;QAAG,GAAGG,UAAU;QAAEC,cAAcA;;AAE5D,GAAG"}
+{"version":3,"sources":["../../src/datetime/NativeDateField.tsx"],"sourcesContent":["\"use client\";\n\nimport { forwardRef } from \"react\";\n\nimport { TextField, type TextFieldProps } from \"../form/TextField.js\";\nimport { type DateFieldOptions, useDateField } from \"./useDateField.js\";\n\n/** @since 6.3.0 */\nexport interface NativeDateFieldProps\n  extends\n    Omit<TextFieldProps, keyof DateFieldOptions | \"value\">,\n    Omit<DateFieldOptions, \"ref\"> {}\n\n/**\n * The `NativeDateField` is a simple wrapper around the `TextField` using the\n * `useDateField` hook.\n *\n * @example Simple Example\n * ```tsx\n * import { NativeDateField } from \"@react-md/core/datetime/NativeDateField\";\n * import { type ReactElement } from \"react\";\n *\n * function Example(): ReactElement {\n *   return <NativeDateField label=\"Delivery Date\" name=\"delivery\" />;\n * }\n * ```\n *\n * @see {@link https://react-md.dev/components/native-time-field | NativeDateField Demos}\n * @see {@link https://react-md.dev/components/text-field | TextField Demos}\n * @since 6.3.0\n */\nexport const NativeDateField = forwardRef<\n  HTMLInputElement,\n  NativeDateFieldProps\n>(function NativeDateField(props, ref) {\n  const {\n    id,\n    min,\n    max,\n    step,\n    onBlur,\n    onInvalid,\n    onChange,\n    helpText,\n    required,\n    validationType,\n    disableMessage,\n    errorIcon,\n    isErrored,\n    getErrorIcon,\n    getErrorMessage,\n    onErrorChange,\n    disableReset,\n    defaultValue,\n    ...remaining\n  } = props;\n  const { name, form } = props;\n  const { fieldProps } = useDateField({\n    id,\n    ref,\n    name,\n    form,\n    min,\n    max,\n    step,\n    onBlur,\n    onChange,\n    onInvalid,\n    helpText,\n    required,\n    validationType,\n    disableMessage: disableMessage ?? (!min && !max && !step && !required),\n    errorIcon,\n    isErrored,\n    getErrorIcon,\n    getErrorMessage,\n    onErrorChange,\n    disableReset,\n    defaultValue,\n  });\n\n  let { messageProps } = remaining;\n  if (fieldProps.messageProps) {\n    messageProps = {\n      ...fieldProps.messageProps,\n      ...remaining.messageProps,\n    };\n  }\n\n  return (\n    <TextField {...remaining} {...fieldProps} messageProps={messageProps} />\n  );\n});\n"],"names":["forwardRef","TextField","useDateField","NativeDateField","props","ref","id","min","max","step","onBlur","onInvalid","onChange","helpText","required","validationType","disableMessage","errorIcon","isErrored","getErrorIcon","getErrorMessage","onErrorChange","disableReset","defaultValue","remaining","name","form","fieldProps","messageProps"],"mappings":"AAAA;;AAEA,SAASA,UAAU,QAAQ,QAAQ;AAEnC,SAASC,SAAS,QAA6B,uBAAuB;AACtE,SAAgCC,YAAY,QAAQ,oBAAoB;AAQxE;;;;;;;;;;;;;;;;;CAiBC,GACD,OAAO,MAAMC,gCAAkBH,WAG7B,SAASG,gBAAgBC,KAAK,EAAEC,GAAG;IACnC,MAAM,EACJC,EAAE,EACFC,GAAG,EACHC,GAAG,EACHC,IAAI,EACJC,MAAM,EACNC,SAAS,EACTC,QAAQ,EACRC,QAAQ,EACRC,QAAQ,EACRC,cAAc,EACdC,cAAc,EACdC,SAAS,EACTC,SAAS,EACTC,YAAY,EACZC,eAAe,EACfC,aAAa,EACbC,YAAY,EACZC,YAAY,EACZ,GAAGC,WACJ,GAAGpB;IACJ,MAAM,EAAEqB,IAAI,EAAEC,IAAI,EAAE,GAAGtB;IACvB,MAAM,EAAEuB,UAAU,EAAE,GAAGzB,aAAa;QAClCI;QACAD;QACAoB;QACAC;QACAnB;QACAC;QACAC;QACAC;QACAE;QACAD;QACAE;QACAC;QACAC;QACAC,gBAAgBA,kBAAmB,CAAA,CAACT,OAAO,CAACC,OAAO,CAACC,QAAQ,CAACK,QAAO;QACpEG;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;IACF;IAEA,IAAI,EAAEK,YAAY,EAAE,GAAGJ;IACvB,IAAIG,WAAWC,YAAY,EAAE;QAC3BA,eAAe;YACb,GAAGD,WAAWC,YAAY;YAC1B,GAAGJ,UAAUI,YAAY;QAC3B;IACF;IAEA,qBACE,KAAC3B;QAAW,GAAGuB,SAAS;QAAG,GAAGG,UAAU;QAAEC,cAAcA;;AAE5D,GAAG"}

package/dist/datetime/NativeTimeField.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/datetime/NativeTimeField.tsx"],"sourcesContent":["\"use client\";\n\nimport { forwardRef } from \"react\";\n\nimport { TextField, type TextFieldProps } from \"../form/TextField.js\";\nimport { type TimeFieldOptions, useTimeField } from \"./useTimeField.js\";\n\n/**\n * @since 6.3.0\n */\nexport interface NativeTimeFieldProps\n  extends Omit<TextFieldProps, keyof TimeFieldOptions | \"value\">,\n    Omit<TimeFieldOptions, \"ref\"> {}\n\n/**\n * The `NativeTimeField` is a simple wrapper around the `TextField` using the\n * `useTimeField` hook.\n *\n * @example Simple Example\n * ```tsx\n * import { NativeTimeField } from \"@react-md/core/datetime/NativeTimeField\";\n * import { type ReactElement } from \"react\";\n *\n * function Example(): ReactElement {\n *   return <NativeTimeField label=\"Time\" name=\"appt\" />;\n * }\n * ```\n *\n * @see {@link https://react-md.dev/components/native-time-field | NativeTimeField Demos}\n * @see {@link https://react-md.dev/components/text-field | TextField Demos}\n * @since 6.3.0\n */\nexport const NativeTimeField = forwardRef<\n  HTMLInputElement,\n  NativeTimeFieldProps\n>(function NativeTimeField(props, ref) {\n  const {\n    id,\n    min,\n    max,\n    step,\n    onBlur,\n    onInvalid,\n    onChange,\n    helpText,\n    required,\n    validationType,\n    disableMessage,\n    errorIcon,\n    isErrored,\n    getErrorIcon,\n    getErrorMessage,\n    onErrorChange,\n    disableReset,\n    defaultValue,\n    ...remaining\n  } = props;\n  const { name, form } = props;\n  const { fieldProps } = useTimeField({\n    id,\n    ref,\n    name,\n    form,\n    min,\n    max,\n    step,\n    onBlur,\n    onChange,\n    onInvalid,\n    helpText,\n    required,\n    validationType,\n    disableMessage: disableMessage ?? (!min && !max && !step && !required),\n    errorIcon,\n    isErrored,\n    getErrorIcon,\n    getErrorMessage,\n    onErrorChange,\n    disableReset,\n    defaultValue,\n  });\n\n  let { messageProps } = remaining;\n  if (fieldProps.messageProps) {\n    messageProps = {\n      ...fieldProps.messageProps,\n      ...remaining.messageProps,\n    };\n  }\n\n  return (\n    <TextField {...remaining} {...fieldProps} messageProps={messageProps} />\n  );\n});\n"],"names":["forwardRef","TextField","useTimeField","NativeTimeField","props","ref","id","min","max","step","onBlur","onInvalid","onChange","helpText","required","validationType","disableMessage","errorIcon","isErrored","getErrorIcon","getErrorMessage","onErrorChange","disableReset","defaultValue","remaining","name","form","fieldProps","messageProps"],"mappings":"AAAA;;AAEA,SAASA,UAAU,QAAQ,QAAQ;AAEnC,SAASC,SAAS,QAA6B,uBAAuB;AACtE,SAAgCC,YAAY,QAAQ,oBAAoB;AASxE;;;;;;;;;;;;;;;;;CAiBC,GACD,OAAO,MAAMC,gCAAkBH,WAG7B,SAASG,gBAAgBC,KAAK,EAAEC,GAAG;IACnC,MAAM,EACJC,EAAE,EACFC,GAAG,EACHC,GAAG,EACHC,IAAI,EACJC,MAAM,EACNC,SAAS,EACTC,QAAQ,EACRC,QAAQ,EACRC,QAAQ,EACRC,cAAc,EACdC,cAAc,EACdC,SAAS,EACTC,SAAS,EACTC,YAAY,EACZC,eAAe,EACfC,aAAa,EACbC,YAAY,EACZC,YAAY,EACZ,GAAGC,WACJ,GAAGpB;IACJ,MAAM,EAAEqB,IAAI,EAAEC,IAAI,EAAE,GAAGtB;IACvB,MAAM,EAAEuB,UAAU,EAAE,GAAGzB,aAAa;QAClCI;QACAD;QACAoB;QACAC;QACAnB;QACAC;QACAC;QACAC;QACAE;QACAD;QACAE;QACAC;QACAC;QACAC,gBAAgBA,kBAAmB,CAAA,CAACT,OAAO,CAACC,OAAO,CAACC,QAAQ,CAACK,QAAO;QACpEG;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;IACF;IAEA,IAAI,EAAEK,YAAY,EAAE,GAAGJ;IACvB,IAAIG,WAAWC,YAAY,EAAE;QAC3BA,eAAe;YACb,GAAGD,WAAWC,YAAY;YAC1B,GAAGJ,UAAUI,YAAY;QAC3B;IACF;IAEA,qBACE,KAAC3B;QAAW,GAAGuB,SAAS;QAAG,GAAGG,UAAU;QAAEC,cAAcA;;AAE5D,GAAG"}
+{"version":3,"sources":["../../src/datetime/NativeTimeField.tsx"],"sourcesContent":["\"use client\";\n\nimport { forwardRef } from \"react\";\n\nimport { TextField, type TextFieldProps } from \"../form/TextField.js\";\nimport { type TimeFieldOptions, useTimeField } from \"./useTimeField.js\";\n\n/**\n * @since 6.3.0\n */\nexport interface NativeTimeFieldProps\n  extends\n    Omit<TextFieldProps, keyof TimeFieldOptions | \"value\">,\n    Omit<TimeFieldOptions, \"ref\"> {}\n\n/**\n * The `NativeTimeField` is a simple wrapper around the `TextField` using the\n * `useTimeField` hook.\n *\n * @example Simple Example\n * ```tsx\n * import { NativeTimeField } from \"@react-md/core/datetime/NativeTimeField\";\n * import { type ReactElement } from \"react\";\n *\n * function Example(): ReactElement {\n *   return <NativeTimeField label=\"Time\" name=\"appt\" />;\n * }\n * ```\n *\n * @see {@link https://react-md.dev/components/native-time-field | NativeTimeField Demos}\n * @see {@link https://react-md.dev/components/text-field | TextField Demos}\n * @since 6.3.0\n */\nexport const NativeTimeField = forwardRef<\n  HTMLInputElement,\n  NativeTimeFieldProps\n>(function NativeTimeField(props, ref) {\n  const {\n    id,\n    min,\n    max,\n    step,\n    onBlur,\n    onInvalid,\n    onChange,\n    helpText,\n    required,\n    validationType,\n    disableMessage,\n    errorIcon,\n    isErrored,\n    getErrorIcon,\n    getErrorMessage,\n    onErrorChange,\n    disableReset,\n    defaultValue,\n    ...remaining\n  } = props;\n  const { name, form } = props;\n  const { fieldProps } = useTimeField({\n    id,\n    ref,\n    name,\n    form,\n    min,\n    max,\n    step,\n    onBlur,\n    onChange,\n    onInvalid,\n    helpText,\n    required,\n    validationType,\n    disableMessage: disableMessage ?? (!min && !max && !step && !required),\n    errorIcon,\n    isErrored,\n    getErrorIcon,\n    getErrorMessage,\n    onErrorChange,\n    disableReset,\n    defaultValue,\n  });\n\n  let { messageProps } = remaining;\n  if (fieldProps.messageProps) {\n    messageProps = {\n      ...fieldProps.messageProps,\n      ...remaining.messageProps,\n    };\n  }\n\n  return (\n    <TextField {...remaining} {...fieldProps} messageProps={messageProps} />\n  );\n});\n"],"names":["forwardRef","TextField","useTimeField","NativeTimeField","props","ref","id","min","max","step","onBlur","onInvalid","onChange","helpText","required","validationType","disableMessage","errorIcon","isErrored","getErrorIcon","getErrorMessage","onErrorChange","disableReset","defaultValue","remaining","name","form","fieldProps","messageProps"],"mappings":"AAAA;;AAEA,SAASA,UAAU,QAAQ,QAAQ;AAEnC,SAASC,SAAS,QAA6B,uBAAuB;AACtE,SAAgCC,YAAY,QAAQ,oBAAoB;AAUxE;;;;;;;;;;;;;;;;;CAiBC,GACD,OAAO,MAAMC,gCAAkBH,WAG7B,SAASG,gBAAgBC,KAAK,EAAEC,GAAG;IACnC,MAAM,EACJC,EAAE,EACFC,GAAG,EACHC,GAAG,EACHC,IAAI,EACJC,MAAM,EACNC,SAAS,EACTC,QAAQ,EACRC,QAAQ,EACRC,QAAQ,EACRC,cAAc,EACdC,cAAc,EACdC,SAAS,EACTC,SAAS,EACTC,YAAY,EACZC,eAAe,EACfC,aAAa,EACbC,YAAY,EACZC,YAAY,EACZ,GAAGC,WACJ,GAAGpB;IACJ,MAAM,EAAEqB,IAAI,EAAEC,IAAI,EAAE,GAAGtB;IACvB,MAAM,EAAEuB,UAAU,EAAE,GAAGzB,aAAa;QAClCI;QACAD;QACAoB;QACAC;QACAnB;QACAC;QACAC;QACAC;QACAE;QACAD;QACAE;QACAC;QACAC;QACAC,gBAAgBA,kBAAmB,CAAA,CAACT,OAAO,CAACC,OAAO,CAACC,QAAQ,CAACK,QAAO;QACpEG;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;IACF;IAEA,IAAI,EAAEK,YAAY,EAAE,GAAGJ;IACvB,IAAIG,WAAWC,YAAY,EAAE;QAC3BA,eAAe;YACb,GAAGD,WAAWC,YAAY;YAC1B,GAAGJ,UAAUI,YAAY;QAC3B;IACF;IAEA,qBACE,KAAC3B;QAAW,GAAGuB,SAAS;QAAG,GAAGG,UAAU;QAAEC,cAAcA;;AAE5D,GAAG"}

package/dist/datetime/useDateField.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/datetime/useDateField.ts"],"sourcesContent":["\"use client\";\n\nimport { type InputHTMLAttributes, useRef } from \"react\";\n\nimport {\n  type ProvidedFormMessageProps,\n  type ProvidedTextFieldProps,\n  type TextFieldHookOptions,\n  type TextFieldImplementation,\n  type TextFieldWithMessageImplementation,\n  useTextField,\n} from \"../form/useTextField.js\";\n\n/**\n * @since 6.3.0\n */\nexport interface DateFieldConstraints {\n  /**\n   * This **must** be in the format `yyyy-mm-dd`\n   *\n   * @see {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input/date#min | min attribute}\n   */\n  min?: string;\n\n  /**\n   * This **must** be in the format `yyyy-mm-dd`\n   *\n   * @see {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input/date#max | max attribute}\n   */\n  max?: string;\n\n  /**\n   * For date inputs, the value of step is given in days; and is treated as a\n   * number of milliseconds equal to 86,400,000 times the step value (the\n   * underlying numeric value is in milliseconds). The default value of step is\n   * 1, indicating 1 day.\n   *\n   * @see {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input/date#step | step attribute}\n   */\n  step?: number | \"any\";\n}\n\n/** @since 6.3.0 */\nexport interface DateFieldOptions\n  extends Omit<\n      TextFieldHookOptions,\n      | \"isNumber\"\n      | \"counter\"\n      | \"pattern\"\n      | \"maxLength\"\n      | \"minLength\"\n      | \"disableMaxLength\"\n    >,\n    DateFieldConstraints {}\n\n/** @since 6.3.0 */\nexport interface ProvidedDateFieldProps\n  extends Omit<ProvidedTextFieldProps, \"value\">,\n    Omit<DateFieldConstraints, \"step\"> {\n  type: \"date\";\n  step?: number | \"any\";\n  defaultValue: Required<InputHTMLAttributes<HTMLInputElement>>[\"defaultValue\"];\n}\n\n/** @since 6.3.0 */\nexport interface ProvidedDateFieldMessageProps extends ProvidedDateFieldProps {\n  /**\n   * These props will be defined as long as the `disableMessage` prop is not\n   * `true` from the `useTextField` hook.\n   */\n  messageProps: ProvidedFormMessageProps;\n}\n\n/** @since 6.3.0 */\nexport interface DateFieldImplementation\n  extends Omit<TextFieldImplementation, \"fieldProps\"> {\n  fieldProps: ProvidedDateFieldProps;\n}\n\n/** @since 6.3.0 */\nexport interface DateFieldWithMessageImplementation\n  extends Omit<TextFieldWithMessageImplementation, \"fieldProps\"> {\n  fieldProps: ProvidedDateFieldMessageProps;\n}\n\n/** @since 6.3.0 */\nexport interface ValidatedDateFieldImplementation\n  extends DateFieldImplementation {\n  fieldProps: ProvidedDateFieldProps | ProvidedDateFieldMessageProps;\n}\n\n/**\n * The `useDateField` is a small wrapper around the {@link useTextField} to be used\n * with `<input type=\"date\" />`. It is used in the `NativeDateField` if an example\n * implementation would like to be seen.\n *\n * @example Simple Example\n * ```tsx\n * import { useDateField } from \"@react-md/core/datetime/useDateField\";\n * import { TextField } from \"@react-md/core/form/TextField\";\n * import { type ReactElement } from \"react\";\n *\n * function Example(): ReactElement {\n *   const { value, fieldProps, error, errorMessage } = useDateField({\n *     name: \"delivery\",\n *     required: true,\n *     min: \"2025-01-01\",\n *     max: \"2026-01-01\",\n *     disableMessage: true,\n *   });\n *\n *   // value: `\"\"` or `\"yyyy-mm-dd\"`\n *\n *   return <TextField label=\"Delivery Date\" {...fieldProps} />\n * }\n * ```\n *\n * @since 6.3.0\n * @see {@link https://react-md.dev/components/native-date-field | NativeDateField Demos}\n * @see {@link https://react-md.dev/hooks/use-date-field | useDateField Demos}\n */\nexport function useDateField(\n  options: DateFieldOptions & { disableMessage: true }\n): DateFieldImplementation;\n\n/**\n * The `useDateField` is a small wrapper around the {@link useTextField} to be used\n * with `<input type=\"date\" />`. It is used in the `NativeDateField` if an example\n * implementation would like to be seen.\n *\n * @example Simple Example\n * ```tsx\n * import { useDateField } from \"@react-md/core/datetime/useDateField\";\n * import { TextField } from \"@react-md/core/form/TextField\";\n * import { type ReactElement } from \"react\";\n *\n * function Example(): ReactElement {\n *   const { value, fieldProps } = useDateField({\n *     name: \"delivery\",\n *     required: true,\n *     min: \"2025-01-01\",\n *     max: \"2026-01-01\",\n *   });\n *\n *   // value: `\"\"` or `\"yyyy-mm-dd\"`\n *\n *   return <TextField label=\"Delivery Date\" {...fieldProps} />\n * }\n * ```\n *\n * @since 6.3.0\n * @see {@link https://react-md.dev/components/native-date-field | NativeDateField Demos}\n * @see {@link https://react-md.dev/hooks/use-date-field | useDateField Demos}\n */\nexport function useDateField(\n  options: DateFieldOptions\n): DateFieldWithMessageImplementation;\n\n/**\n * @since 6.3.0\n * @see {@link https://react-md.dev/components/native-date-field | NativeTimeField Demos}\n * @see {@link https://react-md.dev/hooks/use-date-field | useTimeField Demos}\n */\nexport function useDateField(\n  options: DateFieldOptions\n): ValidatedDateFieldImplementation {\n  const { min, max, step, ...fieldOptions } = options;\n  const { fieldProps, ...impl } = useTextField(fieldOptions);\n\n  // NOTE: Unlike the other text field components, the `value` should **not**\n  // be provided since the time input behaves a bit weirdly with the `onChange`\n  // event and it is better to rely on default browser behavior instead of\n  // controlling the value. The flow is:\n  // - user types `12:30`\n  //   - `onChange` is fired with `12:30`\n  // - user selects `30` and hits backspace\n  //   - `onChange` is fired with `\"\"`\n  // If the `value` is set, the other time values would be lost\n  const { value, ...allowedFieldProps } = fieldProps;\n  const initial = useRef(value);\n\n  return {\n    ...impl,\n    fieldProps: {\n      ...allowedFieldProps,\n      defaultValue: initial.current,\n      min,\n      max,\n      step,\n      type: \"date\",\n    },\n  };\n}\n"],"names":["useRef","useTextField","useDateField","options","min","max","step","fieldOptions","fieldProps","impl","value","allowedFieldProps","initial","defaultValue","current","type"],"mappings":"AAAA;AAEA,SAAmCA,MAAM,QAAQ,QAAQ;AAEzD,SAMEC,YAAY,QACP,0BAA0B;AAmJjC;;;;CAIC,GACD,OAAO,SAASC,aACdC,OAAyB;IAEzB,MAAM,EAAEC,GAAG,EAAEC,GAAG,EAAEC,IAAI,EAAE,GAAGC,cAAc,GAAGJ;IAC5C,MAAM,EAAEK,UAAU,EAAE,GAAGC,MAAM,GAAGR,aAAaM;IAE7C,2EAA2E;IAC3E,6EAA6E;IAC7E,wEAAwE;IACxE,sCAAsC;IACtC,uBAAuB;IACvB,uCAAuC;IACvC,yCAAyC;IACzC,oCAAoC;IACpC,6DAA6D;IAC7D,MAAM,EAAEG,KAAK,EAAE,GAAGC,mBAAmB,GAAGH;IACxC,MAAMI,UAAUZ,OAAOU;IAEvB,OAAO;QACL,GAAGD,IAAI;QACPD,YAAY;YACV,GAAGG,iBAAiB;YACpBE,cAAcD,QAAQE,OAAO;YAC7BV;YACAC;YACAC;YACAS,MAAM;QACR;IACF;AACF"}
+{"version":3,"sources":["../../src/datetime/useDateField.ts"],"sourcesContent":["\"use client\";\n\nimport { type InputHTMLAttributes, useRef } from \"react\";\n\nimport {\n  type ProvidedFormMessageProps,\n  type ProvidedTextFieldProps,\n  type TextFieldHookOptions,\n  type TextFieldImplementation,\n  type TextFieldWithMessageImplementation,\n  useTextField,\n} from \"../form/useTextField.js\";\n\n/**\n * @since 6.3.0\n */\nexport interface DateFieldConstraints {\n  /**\n   * This **must** be in the format `yyyy-mm-dd`\n   *\n   * @see {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input/date#min | min attribute}\n   */\n  min?: string;\n\n  /**\n   * This **must** be in the format `yyyy-mm-dd`\n   *\n   * @see {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input/date#max | max attribute}\n   */\n  max?: string;\n\n  /**\n   * For date inputs, the value of step is given in days; and is treated as a\n   * number of milliseconds equal to 86,400,000 times the step value (the\n   * underlying numeric value is in milliseconds). The default value of step is\n   * 1, indicating 1 day.\n   *\n   * @see {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input/date#step | step attribute}\n   */\n  step?: number | \"any\";\n}\n\n/** @since 6.3.0 */\nexport interface DateFieldOptions\n  extends\n    Omit<\n      TextFieldHookOptions,\n      | \"isNumber\"\n      | \"counter\"\n      | \"pattern\"\n      | \"maxLength\"\n      | \"minLength\"\n      | \"disableMaxLength\"\n    >,\n    DateFieldConstraints {}\n\n/** @since 6.3.0 */\nexport interface ProvidedDateFieldProps\n  extends\n    Omit<ProvidedTextFieldProps, \"value\">,\n    Omit<DateFieldConstraints, \"step\"> {\n  type: \"date\";\n  step?: number | \"any\";\n  defaultValue: Required<InputHTMLAttributes<HTMLInputElement>>[\"defaultValue\"];\n}\n\n/** @since 6.3.0 */\nexport interface ProvidedDateFieldMessageProps extends ProvidedDateFieldProps {\n  /**\n   * These props will be defined as long as the `disableMessage` prop is not\n   * `true` from the `useTextField` hook.\n   */\n  messageProps: ProvidedFormMessageProps;\n}\n\n/** @since 6.3.0 */\nexport interface DateFieldImplementation extends Omit<\n  TextFieldImplementation,\n  \"fieldProps\"\n> {\n  fieldProps: ProvidedDateFieldProps;\n}\n\n/** @since 6.3.0 */\nexport interface DateFieldWithMessageImplementation extends Omit<\n  TextFieldWithMessageImplementation,\n  \"fieldProps\"\n> {\n  fieldProps: ProvidedDateFieldMessageProps;\n}\n\n/** @since 6.3.0 */\nexport interface ValidatedDateFieldImplementation extends DateFieldImplementation {\n  fieldProps: ProvidedDateFieldProps | ProvidedDateFieldMessageProps;\n}\n\n/**\n * The `useDateField` is a small wrapper around the {@link useTextField} to be used\n * with `<input type=\"date\" />`. It is used in the `NativeDateField` if an example\n * implementation would like to be seen.\n *\n * @example Simple Example\n * ```tsx\n * import { useDateField } from \"@react-md/core/datetime/useDateField\";\n * import { TextField } from \"@react-md/core/form/TextField\";\n * import { type ReactElement } from \"react\";\n *\n * function Example(): ReactElement {\n *   const { value, fieldProps, error, errorMessage } = useDateField({\n *     name: \"delivery\",\n *     required: true,\n *     min: \"2025-01-01\",\n *     max: \"2026-01-01\",\n *     disableMessage: true,\n *   });\n *\n *   // value: `\"\"` or `\"yyyy-mm-dd\"`\n *\n *   return <TextField label=\"Delivery Date\" {...fieldProps} />\n * }\n * ```\n *\n * @since 6.3.0\n * @see {@link https://react-md.dev/components/native-date-field | NativeDateField Demos}\n * @see {@link https://react-md.dev/hooks/use-date-field | useDateField Demos}\n */\nexport function useDateField(\n  options: DateFieldOptions & { disableMessage: true }\n): DateFieldImplementation;\n\n/**\n * The `useDateField` is a small wrapper around the {@link useTextField} to be used\n * with `<input type=\"date\" />`. It is used in the `NativeDateField` if an example\n * implementation would like to be seen.\n *\n * @example Simple Example\n * ```tsx\n * import { useDateField } from \"@react-md/core/datetime/useDateField\";\n * import { TextField } from \"@react-md/core/form/TextField\";\n * import { type ReactElement } from \"react\";\n *\n * function Example(): ReactElement {\n *   const { value, fieldProps } = useDateField({\n *     name: \"delivery\",\n *     required: true,\n *     min: \"2025-01-01\",\n *     max: \"2026-01-01\",\n *   });\n *\n *   // value: `\"\"` or `\"yyyy-mm-dd\"`\n *\n *   return <TextField label=\"Delivery Date\" {...fieldProps} />\n * }\n * ```\n *\n * @since 6.3.0\n * @see {@link https://react-md.dev/components/native-date-field | NativeDateField Demos}\n * @see {@link https://react-md.dev/hooks/use-date-field | useDateField Demos}\n */\nexport function useDateField(\n  options: DateFieldOptions\n): DateFieldWithMessageImplementation;\n\n/**\n * @since 6.3.0\n * @see {@link https://react-md.dev/components/native-date-field | NativeTimeField Demos}\n * @see {@link https://react-md.dev/hooks/use-date-field | useTimeField Demos}\n */\nexport function useDateField(\n  options: DateFieldOptions\n): ValidatedDateFieldImplementation {\n  const { min, max, step, ...fieldOptions } = options;\n  const { fieldProps, ...impl } = useTextField(fieldOptions);\n\n  // NOTE: Unlike the other text field components, the `value` should **not**\n  // be provided since the time input behaves a bit weirdly with the `onChange`\n  // event and it is better to rely on default browser behavior instead of\n  // controlling the value. The flow is:\n  // - user types `12:30`\n  //   - `onChange` is fired with `12:30`\n  // - user selects `30` and hits backspace\n  //   - `onChange` is fired with `\"\"`\n  // If the `value` is set, the other time values would be lost\n  const { value, ...allowedFieldProps } = fieldProps;\n  const initial = useRef(value);\n\n  return {\n    ...impl,\n    fieldProps: {\n      ...allowedFieldProps,\n      defaultValue: initial.current,\n      min,\n      max,\n      step,\n      type: \"date\",\n    },\n  };\n}\n"],"names":["useRef","useTextField","useDateField","options","min","max","step","fieldOptions","fieldProps","impl","value","allowedFieldProps","initial","defaultValue","current","type"],"mappings":"AAAA;AAEA,SAAmCA,MAAM,QAAQ,QAAQ;AAEzD,SAMEC,YAAY,QACP,0BAA0B;AAwJjC;;;;CAIC,GACD,OAAO,SAASC,aACdC,OAAyB;IAEzB,MAAM,EAAEC,GAAG,EAAEC,GAAG,EAAEC,IAAI,EAAE,GAAGC,cAAc,GAAGJ;IAC5C,MAAM,EAAEK,UAAU,EAAE,GAAGC,MAAM,GAAGR,aAAaM;IAE7C,2EAA2E;IAC3E,6EAA6E;IAC7E,wEAAwE;IACxE,sCAAsC;IACtC,uBAAuB;IACvB,uCAAuC;IACvC,yCAAyC;IACzC,oCAAoC;IACpC,6DAA6D;IAC7D,MAAM,EAAEG,KAAK,EAAE,GAAGC,mBAAmB,GAAGH;IACxC,MAAMI,UAAUZ,OAAOU;IAEvB,OAAO;QACL,GAAGD,IAAI;QACPD,YAAY;YACV,GAAGG,iBAAiB;YACpBE,cAAcD,QAAQE,OAAO;YAC7BV;YACAC;YACAC;YACAS,MAAM;QACR;IACF;AACF"}

package/dist/datetime/useTimeField.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/datetime/useTimeField.ts"],"sourcesContent":["\"use client\";\n\nimport { type InputHTMLAttributes, useRef } from \"react\";\n\nimport {\n  type ProvidedFormMessageProps,\n  type ProvidedTextFieldProps,\n  type TextFieldHookOptions,\n  type TextFieldImplementation,\n  type TextFieldWithMessageImplementation,\n  useTextField,\n} from \"../form/useTextField.js\";\nimport { type TimeFieldStepOptions, getTimeStep } from \"./utils.js\";\n\n/** @since 6.3.0 */\nexport interface TimeFieldConstraints {\n  /**\n   * This **must** be in the format `HH:mm`:\n   * - `00:30` (12:30 AM)\n   * - `15:15` (03:15 PM)\n   *\n   * @see {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input/time#time_value_format | Time value format}\n   */\n  min?: string;\n\n  /**\n   * This **must** be in the format `HH:mm`:\n   * - `00:30` (12:30 AM)\n   * - `15:15` (03:15 PM)\n   *\n   * @see {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input/time#time_value_format | Time value format}\n   */\n  max?: string;\n\n  /**\n   * For time inputs, the value of step is given in seconds, with a scaling\n   * factor of 1000 (since the underlying numeric value is in milliseconds).\n   * The default value of step is 60, indicating 60 seconds (or 1 minute, or\n   * 60,000 milliseconds).\n   *\n   * When any is set as the value for step, the default 60 seconds is used, and\n   * the seconds value is not displayed in the UI.\n   *\n   * Here are a few examples:\n   *\n   * - `15`   -&gt; 15 seconds\n   * - `60`   -&gt; 1 minute\n   * - `900`  -&gt; 15 minutes\n   * - `3600` -&gt; 1 hour\n   *\n   * Since this might be a bit confusing, the values can be provided in an\n   * object instead:\n   *\n   * ```ts\n   * { seconds: 30 }\n   * { minutes: 1 }\n   * { minutes: 15 }\n   * { hours: 1 }\n   * { seconds: 15, minutes: 30, hours: 1 }\n   * ```\n   *\n   * NOTE: The `min` and `max` props **must** be provided as well for the\n   * `step` to work.\n   *\n   * @see {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input/time#step | step attribute}\n   */\n  step?: number | \"any\" | TimeFieldStepOptions;\n}\n\n/** @since 6.3.0 */\nexport interface TimeFieldOptions\n  extends Omit<\n      TextFieldHookOptions,\n      | \"isNumber\"\n      | \"counter\"\n      | \"pattern\"\n      | \"maxLength\"\n      | \"minLength\"\n      | \"disableMaxLength\"\n    >,\n    TimeFieldConstraints {}\n\n/** @since 6.3.0 */\nexport interface ProvidedTimeFieldProps\n  extends Omit<ProvidedTextFieldProps, \"value\">,\n    Omit<TimeFieldConstraints, \"step\"> {\n  type: \"time\";\n  step?: number | \"any\";\n  defaultValue: Required<InputHTMLAttributes<HTMLInputElement>>[\"defaultValue\"];\n}\n\n/** @since 6.3.0 */\nexport interface ProvidedTimeFieldMessageProps extends ProvidedTimeFieldProps {\n  /**\n   * These props will be defined as long as the `disableMessage` prop is not\n   * `true` from the `useTextField` hook.\n   */\n  messageProps: ProvidedFormMessageProps;\n}\n\n/** @since 6.3.0 */\nexport interface TimeFieldImplementation\n  extends Omit<TextFieldImplementation, \"fieldProps\"> {\n  fieldProps: ProvidedTimeFieldProps;\n}\n\n/** @since 6.3.0 */\nexport interface TimeFieldWithMessageImplementation\n  extends Omit<TextFieldWithMessageImplementation, \"fieldProps\"> {\n  fieldProps: ProvidedTimeFieldMessageProps;\n}\n\n/** @since 6.3.0 */\nexport interface ValidatedTimeFieldImplementation\n  extends TimeFieldImplementation {\n  fieldProps: ProvidedTimeFieldProps | ProvidedTimeFieldMessageProps;\n}\n\n/**\n * @since 6.3.0\n * @see {@link https://react-md.dev/components/native-time-field | NativeTimeField Demos}\n * @see {@link https://react-md.dev/hooks/use-time-field | useTimeField Demos}\n */\nexport function useTimeField(\n  options: TimeFieldOptions & { disableMessage: true }\n): TimeFieldImplementation;\n\n/**\n * The `useTimeField` is a small wrapper around the {@link useTextField} to be used\n * with `<input type=\"time\" />`. It is used in the `NativeTimeField` if an example\n * implementation would like to be seen.\n *\n * @example Simple Example\n * ```tsx\n * import { useTimeField } from \"@react-md/core/datetime/useTimeField\";\n * import { TextField } from \"@react-md/core/form/TextField\";\n * import { type ReactElement } from \"react\";\n *\n * function Example(): ReactElement {\n *   const { value, fieldProps, error, errorMessage } = useTimeField({\n *     name: \"appt\",\n *     required: true,\n *     min: \"08:00\",\n *     max: \"17:00\",\n *     step: { minute: 15 },\n *     disableMessage: true,\n *   });\n *\n *   // value: `\"\"` or `\"HH:mm\"`\n *\n *   return <TextField label=\"Appointment\" {...fieldProps} />\n * }\n * ```\n *\n * @since 6.3.0\n * @see {@link https://react-md.dev/components/native-time-field | NativeTimeField Demos}\n * @see {@link https://react-md.dev/hooks/use-time-field | useTimeField Demos}\n */\nexport function useTimeField(\n  options: TimeFieldOptions\n): TimeFieldWithMessageImplementation;\n\n/**\n * The `useTimeField` is a small wrapper around the {@link useTextField} to be used\n * with `<input type=\"time\" />`. It is used in the `NativeTimeField` if an example\n * implementation would like to be seen.\n *\n * @example Simple Example\n * ```tsx\n * import { useTimeField } from \"@react-md/core/datetime/useTimeField\";\n * import { TextField } from \"@react-md/core/form/TextField\";\n * import { type ReactElement } from \"react\";\n *\n * function Example(): ReactElement {\n *   const { value, fieldProps } = useTimeField({\n *     name: \"appt\",\n *     required: true,\n *     min: \"08:00\",\n *     max: \"17:00\",\n *     step: { minute: 15 },\n *   });\n *\n *   // value: `\"\"` or `\"HH:mm\"`\n *\n *   return <TextField label=\"Appointment\" {...fieldProps} />\n * }\n * ```\n *\n * @since 6.3.0\n * @see {@link https://react-md.dev/components/native-time-field | NativeTimeField Demos}\n * @see {@link https://react-md.dev/hooks/use-time-field | useTimeField Demos}\n */\nexport function useTimeField(\n  options: TimeFieldOptions\n): ValidatedTimeFieldImplementation {\n  const { min, max, step, ...fieldOptions } = options;\n  if (\n    process.env.NODE_ENV !== \"production\" &&\n    typeof step !== \"undefined\" &&\n    (!min || !max)\n  ) {\n    throw new Error(\n      \"A `step` was provided to a time field without the `min` or `max` props.\"\n    );\n  }\n\n  const { errorMessage, fieldProps, ...impl } = useTextField(fieldOptions);\n\n  // NOTE: Unlike the other text field components, the `value` should **not**\n  // be provided since the time input behaves a bit weirdly with the `onChange`\n  // event and it is better to rely on default browser behavior instead of\n  // controlling the value. The flow is:\n  // - user types `12:30`\n  //   - `onChange` is fired with `12:30`\n  // - user selects `30` and hits backspace\n  //   - `onChange` is fired with `\"\"`\n  // If the `value` is set, the other time values would be lost\n  const { value, ...allowedFieldProps } = fieldProps;\n  const initial = useRef(value);\n\n  return {\n    ...impl,\n    errorMessage,\n    fieldProps: {\n      ...allowedFieldProps,\n      defaultValue: initial.current,\n      min,\n      max,\n      step: getTimeStep(step),\n      type: \"time\",\n    },\n  };\n}\n"],"names":["useRef","useTextField","getTimeStep","useTimeField","options","min","max","step","fieldOptions","process","env","NODE_ENV","Error","errorMessage","fieldProps","impl","value","allowedFieldProps","initial","defaultValue","current","type"],"mappings":"AAAA;AAEA,SAAmCA,MAAM,QAAQ,QAAQ;AAEzD,SAMEC,YAAY,QACP,0BAA0B;AACjC,SAAoCC,WAAW,QAAQ,aAAa;AAsJpE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA6BC,GACD,OAAO,SAASC,aACdC,OAAyB;IAEzB,MAAM,EAAEC,GAAG,EAAEC,GAAG,EAAEC,IAAI,EAAE,GAAGC,cAAc,GAAGJ;IAC5C,IACEK,QAAQC,GAAG,CAACC,QAAQ,KAAK,gBACzB,OAAOJ,SAAS,eACf,CAAA,CAACF,OAAO,CAACC,GAAE,GACZ;QACA,MAAM,IAAIM,MACR;IAEJ;IAEA,MAAM,EAAEC,YAAY,EAAEC,UAAU,EAAE,GAAGC,MAAM,GAAGd,aAAaO;IAE3D,2EAA2E;IAC3E,6EAA6E;IAC7E,wEAAwE;IACxE,sCAAsC;IACtC,uBAAuB;IACvB,uCAAuC;IACvC,yCAAyC;IACzC,oCAAoC;IACpC,6DAA6D;IAC7D,MAAM,EAAEQ,KAAK,EAAE,GAAGC,mBAAmB,GAAGH;IACxC,MAAMI,UAAUlB,OAAOgB;IAEvB,OAAO;QACL,GAAGD,IAAI;QACPF;QACAC,YAAY;YACV,GAAGG,iBAAiB;YACpBE,cAAcD,QAAQE,OAAO;YAC7Bf;YACAC;YACAC,MAAML,YAAYK;YAClBc,MAAM;QACR;IACF;AACF"}
+{"version":3,"sources":["../../src/datetime/useTimeField.ts"],"sourcesContent":["\"use client\";\n\nimport { type InputHTMLAttributes, useRef } from \"react\";\n\nimport {\n  type ProvidedFormMessageProps,\n  type ProvidedTextFieldProps,\n  type TextFieldHookOptions,\n  type TextFieldImplementation,\n  type TextFieldWithMessageImplementation,\n  useTextField,\n} from \"../form/useTextField.js\";\nimport { type TimeFieldStepOptions, getTimeStep } from \"./utils.js\";\n\n/** @since 6.3.0 */\nexport interface TimeFieldConstraints {\n  /**\n   * This **must** be in the format `HH:mm`:\n   * - `00:30` (12:30 AM)\n   * - `15:15` (03:15 PM)\n   *\n   * @see {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input/time#time_value_format | Time value format}\n   */\n  min?: string;\n\n  /**\n   * This **must** be in the format `HH:mm`:\n   * - `00:30` (12:30 AM)\n   * - `15:15` (03:15 PM)\n   *\n   * @see {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input/time#time_value_format | Time value format}\n   */\n  max?: string;\n\n  /**\n   * For time inputs, the value of step is given in seconds, with a scaling\n   * factor of 1000 (since the underlying numeric value is in milliseconds).\n   * The default value of step is 60, indicating 60 seconds (or 1 minute, or\n   * 60,000 milliseconds).\n   *\n   * When any is set as the value for step, the default 60 seconds is used, and\n   * the seconds value is not displayed in the UI.\n   *\n   * Here are a few examples:\n   *\n   * - `15`   -&gt; 15 seconds\n   * - `60`   -&gt; 1 minute\n   * - `900`  -&gt; 15 minutes\n   * - `3600` -&gt; 1 hour\n   *\n   * Since this might be a bit confusing, the values can be provided in an\n   * object instead:\n   *\n   * ```ts\n   * { seconds: 30 }\n   * { minutes: 1 }\n   * { minutes: 15 }\n   * { hours: 1 }\n   * { seconds: 15, minutes: 30, hours: 1 }\n   * ```\n   *\n   * NOTE: The `min` and `max` props **must** be provided as well for the\n   * `step` to work.\n   *\n   * @see {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input/time#step | step attribute}\n   */\n  step?: number | \"any\" | TimeFieldStepOptions;\n}\n\n/** @since 6.3.0 */\nexport interface TimeFieldOptions\n  extends\n    Omit<\n      TextFieldHookOptions,\n      | \"isNumber\"\n      | \"counter\"\n      | \"pattern\"\n      | \"maxLength\"\n      | \"minLength\"\n      | \"disableMaxLength\"\n    >,\n    TimeFieldConstraints {}\n\n/** @since 6.3.0 */\nexport interface ProvidedTimeFieldProps\n  extends\n    Omit<ProvidedTextFieldProps, \"value\">,\n    Omit<TimeFieldConstraints, \"step\"> {\n  type: \"time\";\n  step?: number | \"any\";\n  defaultValue: Required<InputHTMLAttributes<HTMLInputElement>>[\"defaultValue\"];\n}\n\n/** @since 6.3.0 */\nexport interface ProvidedTimeFieldMessageProps extends ProvidedTimeFieldProps {\n  /**\n   * These props will be defined as long as the `disableMessage` prop is not\n   * `true` from the `useTextField` hook.\n   */\n  messageProps: ProvidedFormMessageProps;\n}\n\n/** @since 6.3.0 */\nexport interface TimeFieldImplementation extends Omit<\n  TextFieldImplementation,\n  \"fieldProps\"\n> {\n  fieldProps: ProvidedTimeFieldProps;\n}\n\n/** @since 6.3.0 */\nexport interface TimeFieldWithMessageImplementation extends Omit<\n  TextFieldWithMessageImplementation,\n  \"fieldProps\"\n> {\n  fieldProps: ProvidedTimeFieldMessageProps;\n}\n\n/** @since 6.3.0 */\nexport interface ValidatedTimeFieldImplementation extends TimeFieldImplementation {\n  fieldProps: ProvidedTimeFieldProps | ProvidedTimeFieldMessageProps;\n}\n\n/**\n * @since 6.3.0\n * @see {@link https://react-md.dev/components/native-time-field | NativeTimeField Demos}\n * @see {@link https://react-md.dev/hooks/use-time-field | useTimeField Demos}\n */\nexport function useTimeField(\n  options: TimeFieldOptions & { disableMessage: true }\n): TimeFieldImplementation;\n\n/**\n * The `useTimeField` is a small wrapper around the {@link useTextField} to be used\n * with `<input type=\"time\" />`. It is used in the `NativeTimeField` if an example\n * implementation would like to be seen.\n *\n * @example Simple Example\n * ```tsx\n * import { useTimeField } from \"@react-md/core/datetime/useTimeField\";\n * import { TextField } from \"@react-md/core/form/TextField\";\n * import { type ReactElement } from \"react\";\n *\n * function Example(): ReactElement {\n *   const { value, fieldProps, error, errorMessage } = useTimeField({\n *     name: \"appt\",\n *     required: true,\n *     min: \"08:00\",\n *     max: \"17:00\",\n *     step: { minute: 15 },\n *     disableMessage: true,\n *   });\n *\n *   // value: `\"\"` or `\"HH:mm\"`\n *\n *   return <TextField label=\"Appointment\" {...fieldProps} />\n * }\n * ```\n *\n * @since 6.3.0\n * @see {@link https://react-md.dev/components/native-time-field | NativeTimeField Demos}\n * @see {@link https://react-md.dev/hooks/use-time-field | useTimeField Demos}\n */\nexport function useTimeField(\n  options: TimeFieldOptions\n): TimeFieldWithMessageImplementation;\n\n/**\n * The `useTimeField` is a small wrapper around the {@link useTextField} to be used\n * with `<input type=\"time\" />`. It is used in the `NativeTimeField` if an example\n * implementation would like to be seen.\n *\n * @example Simple Example\n * ```tsx\n * import { useTimeField } from \"@react-md/core/datetime/useTimeField\";\n * import { TextField } from \"@react-md/core/form/TextField\";\n * import { type ReactElement } from \"react\";\n *\n * function Example(): ReactElement {\n *   const { value, fieldProps } = useTimeField({\n *     name: \"appt\",\n *     required: true,\n *     min: \"08:00\",\n *     max: \"17:00\",\n *     step: { minute: 15 },\n *   });\n *\n *   // value: `\"\"` or `\"HH:mm\"`\n *\n *   return <TextField label=\"Appointment\" {...fieldProps} />\n * }\n * ```\n *\n * @since 6.3.0\n * @see {@link https://react-md.dev/components/native-time-field | NativeTimeField Demos}\n * @see {@link https://react-md.dev/hooks/use-time-field | useTimeField Demos}\n */\nexport function useTimeField(\n  options: TimeFieldOptions\n): ValidatedTimeFieldImplementation {\n  const { min, max, step, ...fieldOptions } = options;\n  if (\n    process.env.NODE_ENV !== \"production\" &&\n    typeof step !== \"undefined\" &&\n    (!min || !max)\n  ) {\n    throw new Error(\n      \"A `step` was provided to a time field without the `min` or `max` props.\"\n    );\n  }\n\n  const { errorMessage, fieldProps, ...impl } = useTextField(fieldOptions);\n\n  // NOTE: Unlike the other text field components, the `value` should **not**\n  // be provided since the time input behaves a bit weirdly with the `onChange`\n  // event and it is better to rely on default browser behavior instead of\n  // controlling the value. The flow is:\n  // - user types `12:30`\n  //   - `onChange` is fired with `12:30`\n  // - user selects `30` and hits backspace\n  //   - `onChange` is fired with `\"\"`\n  // If the `value` is set, the other time values would be lost\n  const { value, ...allowedFieldProps } = fieldProps;\n  const initial = useRef(value);\n\n  return {\n    ...impl,\n    errorMessage,\n    fieldProps: {\n      ...allowedFieldProps,\n      defaultValue: initial.current,\n      min,\n      max,\n      step: getTimeStep(step),\n      type: \"time\",\n    },\n  };\n}\n"],"names":["useRef","useTextField","getTimeStep","useTimeField","options","min","max","step","fieldOptions","process","env","NODE_ENV","Error","errorMessage","fieldProps","impl","value","allowedFieldProps","initial","defaultValue","current","type"],"mappings":"AAAA;AAEA,SAAmCA,MAAM,QAAQ,QAAQ;AAEzD,SAMEC,YAAY,QACP,0BAA0B;AACjC,SAAoCC,WAAW,QAAQ,aAAa;AA2JpE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA6BC,GACD,OAAO,SAASC,aACdC,OAAyB;IAEzB,MAAM,EAAEC,GAAG,EAAEC,GAAG,EAAEC,IAAI,EAAE,GAAGC,cAAc,GAAGJ;IAC5C,IACEK,QAAQC,GAAG,CAACC,QAAQ,KAAK,gBACzB,OAAOJ,SAAS,eACf,CAAA,CAACF,OAAO,CAACC,GAAE,GACZ;QACA,MAAM,IAAIM,MACR;IAEJ;IAEA,MAAM,EAAEC,YAAY,EAAEC,UAAU,EAAE,GAAGC,MAAM,GAAGd,aAAaO;IAE3D,2EAA2E;IAC3E,6EAA6E;IAC7E,wEAAwE;IACxE,sCAAsC;IACtC,uBAAuB;IACvB,uCAAuC;IACvC,yCAAyC;IACzC,oCAAoC;IACpC,6DAA6D;IAC7D,MAAM,EAAEQ,KAAK,EAAE,GAAGC,mBAAmB,GAAGH;IACxC,MAAMI,UAAUlB,OAAOgB;IAEvB,OAAO;QACL,GAAGD,IAAI;QACPF;QACAC,YAAY;YACV,GAAGG,iBAAiB;YACpBE,cAAcD,QAAQE,OAAO;YAC7Bf;YACAC;YACAC,MAAML,YAAYK;YAClBc,MAAM;QACR;IACF;AACF"}

package/dist/dialog/Dialog.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/dialog/Dialog.tsx"],"sourcesContent":["\"use client\";\n\nimport { type HTMLAttributes, forwardRef, useState } from \"react\";\n\nimport { useSsr } from \"../SsrProvider.js\";\nimport {\n  type FocusContainerComponentProps,\n  useFocusContainer,\n} from \"../focus/useFocusContainer.js\";\nimport { Overlay } from \"../overlay/Overlay.js\";\nimport { Portal } from \"../portal/Portal.js\";\nimport { useScrollLock } from \"../scroll/useScrollLock.js\";\nimport {\n  type CSSTransitionClassNames,\n  type CSSTransitionComponentProps,\n  type TransitionActions,\n  type TransitionTimeout,\n} from \"../transition/types.js\";\nimport { useCSSTransition } from \"../transition/useCSSTransition.js\";\nimport { type LabelRequiredForA11y, type PropsWithRef } from \"../types.js\";\nimport { useEnsuredId } from \"../useEnsuredId.js\";\nimport {\n  type ConfigurableDialogContainerProps,\n  DialogContainer,\n} from \"./DialogContainer.js\";\nimport {\n  NestedDialogProvider,\n  useNestedDialogContext,\n} from \"./NestedDialogProvider.js\";\nimport {\n  DEFAULT_DIALOG_CLASSNAMES,\n  DEFAULT_DIALOG_TIMEOUT,\n  type DialogType,\n  type DialogWidth,\n  dialog,\n} from \"./styles.js\";\n\nconst noop = (): void => {\n  // do nothing\n};\n\nconst noopBool = (): boolean => false;\n\nexport interface BaseDialogProps\n  extends HTMLAttributes<HTMLDivElement>,\n    CSSTransitionComponentProps,\n    TransitionActions,\n    FocusContainerComponentProps {\n  /**\n   * @defaultValue `\"dialog-\" + useId()`\n   */\n  id?: string;\n\n  /**\n   * @defaultValue `\"centered\"`\n   */\n  type?: DialogType;\n\n  /**\n   * @see {@link DialogWidth}\n   * @defaultValue `\"auto\"`\n   */\n  width?: DialogWidth;\n\n  /**\n   * @defaultValue `\"dialog\"`\n   */\n  role?: \"dialog\" | \"alertdialog\" | \"menu\" | \"none\";\n\n  /**\n   * This value controls the visibility of the dialog.\n   */\n  visible: boolean;\n\n  /**\n   * This function should set the {@link visible} prop to false to hide the\n   * modal when:\n   * - the {@link modal} and {@link disableEscapeClose} props are `false` and\n   *   the user presses the `\"Escape\"` key.\n   * - The overlay element is clicked\n   */\n  onRequestClose: () => void;\n\n  /** @defaultValue `false` */\n  disableTransition?: boolean;\n\n  /** @defaultValue `-1` */\n  tabIndex?: number;\n\n  /**\n   * Set this value to `true` if the dialog should behave as a modal which\n   * prevents the modal from being closed by pressing the `\"Escape\"` key or\n   * clicking the overlay. The user **must** click one of the actions within the\n   * dialog instead.\n   *\n   * @defaultValue `false`\n   */\n  modal?: boolean;\n\n  /**\n   * Set this to `true` if the dialog should no longer use the `Portal`\n   * behavior.\n   *\n   * @defaultValue `false`\n   */\n  disablePortal?: boolean;\n\n  /**\n   * Set this to `true` if you want the page to still be scrollable while the\n   * dialog is visible. This should normally be `true` for popovers/fixed\n   * dialogs.\n   *\n   * @defaultValue `type === \"custom\"`\n   */\n  disableScrollLock?: boolean;\n\n  /**\n   * Set this to `true` to prevent the dialog from being closed when the\n   * `\"Escape\"` key is pressed. This is `true` by default when the {@link modal}\n   * prop is `true`\n   *\n   * @defaultValue `modal`\n   */\n  disableEscapeClose?: boolean;\n\n  /**\n   * Set this to `true` if an overlay should not appear behind the dialog.\n   *\n   * Note: this was changed from `type === \"full-page\"` to `false` so that you\n   * can change between full-page and centered based on media queries. If the\n   * type changes the overlay would end up rendering above the dialog instead of\n   * behind.\n   *\n   * @see {@link overlayHidden}\n   * @defaultValue `false`\n   */\n  disableOverlay?: boolean;\n\n  /**\n   * Set this to `true` if an overlay should be appear behind the dialog but\n   * have an `opacity: 0`. This is useful if you want to prevent other elements\n   * on the page from being clicked while the dialog is visible, but don't want\n   * a dark background. i.e. popovers/fixed dialogs.\n   *\n   * @defaultValue `false`\n   */\n  overlayHidden?: boolean;\n\n  /**\n   * Any additional props that should be passed to the overlay element if it is\n   * rendered.\n   */\n  overlayProps?: HTMLAttributes<HTMLSpanElement>;\n\n  /**\n   * Any additional props that should be passed to the container element when\n   * the `type !== \"custom\"`.\n   */\n  containerProps?: PropsWithRef<ConfigurableDialogContainerProps>;\n\n  /**\n   * @see {@link DEFAULT_DIALOG_TIMEOUT}\n   * @defaultValue `DEFAULT_DIALOG_TIMEOUT`\n   */\n  timeout?: TransitionTimeout;\n\n  /**\n   * @see {@link DEFAULT_DIALOG_CLASSNAMES}\n   * @defaultValue `DEFAULT_DIALOG_CLASSNAMES`\n   */\n  classNames?: CSSTransitionClassNames;\n\n  /**\n   * Set this to `true` if the `Dialog` should not gain the normal focus box\n   * shadow while it is focused. The `Dialog` should normally only gain focus\n   * when it becomes visible and no child elements have `autoFocus` enabled.\n   *\n   * @since 6.0.0\n   * @defaultValue `type === \"full-page\"`\n   */\n  disableFocusOutline?: boolean;\n}\n\nexport type DialogProps = LabelRequiredForA11y<BaseDialogProps>;\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 { Typography } from \"@react-md/core/typography/Typography\";\n * import { useToggle } from \"@react-md/core/useToggle\";\n * import type { ReactElement } from \"react\";\n *\n * function Example(): ReactElement {\n *   const {\n *     toggle,\n *     disable: onRequestClose,\n *     toggled: visible,\n *   } = useToggle(false);\n *\n *   return (\n *     <>\n *       <Button onClick={toggle}>Toggle</Button>\n *       <Dialog\n *         aria-labelledby=\"dialog-title\"\n *         visible={visible}\n *         onRequestClose={onRequestClose}\n *       >\n *         <DialogHeader>\n *           <DialogTitle id=\"dialog-title\">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 *       </Dialog>\n *     </>\n *   );\n * }\n * ```\n *\n * @see {@link https://react-md.dev/components/dialog | Dialog Demos}\n * @since 6.0.0 The `Dialog` no longer supports focusing elements\n * within once it becomes visible. You must manually add `autoFocus` to a\n * element instead.\n */\nexport const Dialog = forwardRef<HTMLDivElement, DialogProps>(\n  function Dialog(props, ref) {\n    const {\n      id: propId,\n      modal = false,\n      role = modal ? \"alertdialog\" : \"dialog\",\n      type = \"centered\",\n      width,\n      tabIndex = -1,\n      visible,\n      onRequestClose,\n      containerProps,\n      temporary = true,\n      className,\n      timeout = DEFAULT_DIALOG_TIMEOUT,\n      classNames = DEFAULT_DIALOG_CLASSNAMES,\n      disableTransition = false,\n      appear = false,\n      enter = true,\n      exit = true,\n      onEnter = noop,\n      onEntering = noop,\n      onEntered = noop,\n      onExit = noop,\n      onExiting = noop,\n      onExited = noop,\n      exitedHidden = true,\n      disableOverlay = false,\n      overlayProps,\n      overlayHidden,\n      onKeyDown = noop,\n      isFocusTypeDisabled = noopBool,\n      disablePortal: propDisablePortal,\n      disableScrollLock = false,\n      disableEscapeClose = modal,\n      disableFocusOutline = type === \"full-page\",\n      children,\n      ...remaining\n    } = props;\n    const id = useEnsuredId(propId, \"dialog\");\n\n    const ssr = useSsr();\n    const setChildVisible = useNestedDialogContext();\n\n    // this makes it so that as more non-full page dialogs become visible, the\n    // overlay does not become darker as more and more overlays are stacked upon\n    // each other. only the top-most overlay will have and active background\n    // color.\n    const [isChildVisible, setIsChildVisible] = useState(false);\n    const { eventHandlers, transitionOptions } = useFocusContainer({\n      nodeRef: ref,\n      activate: visible,\n      onEnter(appearing) {\n        onEnter(appearing);\n        setChildVisible(type !== \"full-page\");\n      },\n      onEntered(appear) {\n        onEntered(appear);\n        // this needs to be called onEnter and onEntered just in case the\n        // transition is disabled\n        setChildVisible(type !== \"full-page\");\n      },\n      onEntering,\n      onExit() {\n        onExit();\n        setChildVisible(false);\n      },\n      onExiting,\n      onExited() {\n        onExited();\n        // this needs to be called onExit and onExited just in case the\n        // transition is disabled\n        setChildVisible(false);\n      },\n      disableTransition,\n      onKeyDown(event) {\n        onKeyDown(event);\n        if (\n          event.isPropagationStopped() ||\n          modal ||\n          disableEscapeClose ||\n          event.key !== \"Escape\"\n        ) {\n          return;\n        }\n\n        // prevent parent dialogs from closing as well\n        event.stopPropagation();\n        onRequestClose();\n      },\n      isFocusTypeDisabled,\n    });\n    const { elementProps, stage, rendered, disablePortal } = useCSSTransition({\n      transitionIn: visible,\n      timeout,\n      classNames,\n      className: dialog({\n        type,\n        width,\n        fixed: type === \"custom\",\n        outline: !disableFocusOutline,\n        disableBoxShadow: isChildVisible,\n        className,\n      }),\n      appear: appear && !disableTransition && !ssr,\n      enter: enter && !disableTransition,\n      exit: exit && !disableTransition,\n      temporary,\n      exitedHidden,\n      disablePortal: propDisablePortal,\n      ...transitionOptions,\n    });\n    useScrollLock(!disableScrollLock && visible);\n\n    return (\n      <NestedDialogProvider value={setIsChildVisible}>\n        {!disableOverlay && (\n          <Overlay\n            visible={visible}\n            disableTransition={disableTransition}\n            temporary={temporary}\n            disablePortal={disablePortal}\n            {...overlayProps}\n            onClick={modal ? noop : onRequestClose}\n            clickable={!modal}\n            noOpacity={overlayHidden || isChildVisible}\n          />\n        )}\n        <Portal disabled={disablePortal}>\n          {rendered && (\n            <DialogContainer\n              enabled={type !== \"custom\"}\n              {...containerProps}\n              centered={type === \"centered\"}\n              displayNone={!temporary && exitedHidden && stage === \"exited\"}\n            >\n              <div\n                aria-modal={modal || undefined}\n                {...remaining}\n                {...elementProps}\n                {...eventHandlers}\n                id={id}\n                role={role}\n                tabIndex={tabIndex}\n              >\n                {children}\n              </div>\n            </DialogContainer>\n          )}\n        </Portal>\n      </NestedDialogProvider>\n    );\n  }\n);\n"],"names":["forwardRef","useState","useSsr","useFocusContainer","Overlay","Portal","useScrollLock","useCSSTransition","useEnsuredId","DialogContainer","NestedDialogProvider","useNestedDialogContext","DEFAULT_DIALOG_CLASSNAMES","DEFAULT_DIALOG_TIMEOUT","dialog","noop","noopBool","Dialog","props","ref","id","propId","modal","role","type","width","tabIndex","visible","onRequestClose","containerProps","temporary","className","timeout","classNames","disableTransition","appear","enter","exit","onEnter","onEntering","onEntered","onExit","onExiting","onExited","exitedHidden","disableOverlay","overlayProps","overlayHidden","onKeyDown","isFocusTypeDisabled","disablePortal","propDisablePortal","disableScrollLock","disableEscapeClose","disableFocusOutline","children","remaining","ssr","setChildVisible","isChildVisible","setIsChildVisible","eventHandlers","transitionOptions","nodeRef","activate","appearing","event","isPropagationStopped","key","stopPropagation","elementProps","stage","rendered","transitionIn","fixed","outline","disableBoxShadow","value","onClick","clickable","noOpacity","disabled","enabled","centered","displayNone","div","aria-modal","undefined"],"mappings":"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"}
+{"version":3,"sources":["../../src/dialog/Dialog.tsx"],"sourcesContent":["\"use client\";\n\nimport { type HTMLAttributes, forwardRef, useState } from \"react\";\n\nimport { useSsr } from \"../SsrProvider.js\";\nimport {\n  type FocusContainerComponentProps,\n  useFocusContainer,\n} from \"../focus/useFocusContainer.js\";\nimport { Overlay } from \"../overlay/Overlay.js\";\nimport { Portal } from \"../portal/Portal.js\";\nimport { useScrollLock } from \"../scroll/useScrollLock.js\";\nimport {\n  type CSSTransitionClassNames,\n  type CSSTransitionComponentProps,\n  type TransitionActions,\n  type TransitionTimeout,\n} from \"../transition/types.js\";\nimport { useCSSTransition } from \"../transition/useCSSTransition.js\";\nimport { type LabelRequiredForA11y, type PropsWithRef } from \"../types.js\";\nimport { useEnsuredId } from \"../useEnsuredId.js\";\nimport {\n  type ConfigurableDialogContainerProps,\n  DialogContainer,\n} from \"./DialogContainer.js\";\nimport {\n  NestedDialogProvider,\n  useNestedDialogContext,\n} from \"./NestedDialogProvider.js\";\nimport {\n  DEFAULT_DIALOG_CLASSNAMES,\n  DEFAULT_DIALOG_TIMEOUT,\n  type DialogType,\n  type DialogWidth,\n  dialog,\n} from \"./styles.js\";\n\nconst noop = (): void => {\n  // do nothing\n};\n\nconst noopBool = (): boolean => false;\n\nexport interface BaseDialogProps\n  extends\n    HTMLAttributes<HTMLDivElement>,\n    CSSTransitionComponentProps,\n    TransitionActions,\n    FocusContainerComponentProps {\n  /**\n   * @defaultValue `\"dialog-\" + useId()`\n   */\n  id?: string;\n\n  /**\n   * @defaultValue `\"centered\"`\n   */\n  type?: DialogType;\n\n  /**\n   * @see {@link DialogWidth}\n   * @defaultValue `\"auto\"`\n   */\n  width?: DialogWidth;\n\n  /**\n   * @defaultValue `\"dialog\"`\n   */\n  role?: \"dialog\" | \"alertdialog\" | \"menu\" | \"none\";\n\n  /**\n   * This value controls the visibility of the dialog.\n   */\n  visible: boolean;\n\n  /**\n   * This function should set the {@link visible} prop to false to hide the\n   * modal when:\n   * - the {@link modal} and {@link disableEscapeClose} props are `false` and\n   *   the user presses the `\"Escape\"` key.\n   * - The overlay element is clicked\n   */\n  onRequestClose: () => void;\n\n  /** @defaultValue `false` */\n  disableTransition?: boolean;\n\n  /** @defaultValue `-1` */\n  tabIndex?: number;\n\n  /**\n   * Set this value to `true` if the dialog should behave as a modal which\n   * prevents the modal from being closed by pressing the `\"Escape\"` key or\n   * clicking the overlay. The user **must** click one of the actions within the\n   * dialog instead.\n   *\n   * @defaultValue `false`\n   */\n  modal?: boolean;\n\n  /**\n   * Set this to `true` if the dialog should no longer use the `Portal`\n   * behavior.\n   *\n   * @defaultValue `false`\n   */\n  disablePortal?: boolean;\n\n  /**\n   * Set this to `true` if you want the page to still be scrollable while the\n   * dialog is visible. This should normally be `true` for popovers/fixed\n   * dialogs.\n   *\n   * @defaultValue `type === \"custom\"`\n   */\n  disableScrollLock?: boolean;\n\n  /**\n   * Set this to `true` to prevent the dialog from being closed when the\n   * `\"Escape\"` key is pressed. This is `true` by default when the {@link modal}\n   * prop is `true`\n   *\n   * @defaultValue `modal`\n   */\n  disableEscapeClose?: boolean;\n\n  /**\n   * Set this to `true` if an overlay should not appear behind the dialog.\n   *\n   * Note: this was changed from `type === \"full-page\"` to `false` so that you\n   * can change between full-page and centered based on media queries. If the\n   * type changes the overlay would end up rendering above the dialog instead of\n   * behind.\n   *\n   * @see {@link overlayHidden}\n   * @defaultValue `false`\n   */\n  disableOverlay?: boolean;\n\n  /**\n   * Set this to `true` if an overlay should be appear behind the dialog but\n   * have an `opacity: 0`. This is useful if you want to prevent other elements\n   * on the page from being clicked while the dialog is visible, but don't want\n   * a dark background. i.e. popovers/fixed dialogs.\n   *\n   * @defaultValue `false`\n   */\n  overlayHidden?: boolean;\n\n  /**\n   * Any additional props that should be passed to the overlay element if it is\n   * rendered.\n   */\n  overlayProps?: HTMLAttributes<HTMLSpanElement>;\n\n  /**\n   * Any additional props that should be passed to the container element when\n   * the `type !== \"custom\"`.\n   */\n  containerProps?: PropsWithRef<ConfigurableDialogContainerProps>;\n\n  /**\n   * @see {@link DEFAULT_DIALOG_TIMEOUT}\n   * @defaultValue `DEFAULT_DIALOG_TIMEOUT`\n   */\n  timeout?: TransitionTimeout;\n\n  /**\n   * @see {@link DEFAULT_DIALOG_CLASSNAMES}\n   * @defaultValue `DEFAULT_DIALOG_CLASSNAMES`\n   */\n  classNames?: CSSTransitionClassNames;\n\n  /**\n   * Set this to `true` if the `Dialog` should not gain the normal focus box\n   * shadow while it is focused. The `Dialog` should normally only gain focus\n   * when it becomes visible and no child elements have `autoFocus` enabled.\n   *\n   * @since 6.0.0\n   * @defaultValue `type === \"full-page\"`\n   */\n  disableFocusOutline?: boolean;\n}\n\nexport type DialogProps = LabelRequiredForA11y<BaseDialogProps>;\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 { Typography } from \"@react-md/core/typography/Typography\";\n * import { useToggle } from \"@react-md/core/useToggle\";\n * import type { ReactElement } from \"react\";\n *\n * function Example(): ReactElement {\n *   const {\n *     toggle,\n *     disable: onRequestClose,\n *     toggled: visible,\n *   } = useToggle(false);\n *\n *   return (\n *     <>\n *       <Button onClick={toggle}>Toggle</Button>\n *       <Dialog\n *         aria-labelledby=\"dialog-title\"\n *         visible={visible}\n *         onRequestClose={onRequestClose}\n *       >\n *         <DialogHeader>\n *           <DialogTitle id=\"dialog-title\">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 *       </Dialog>\n *     </>\n *   );\n * }\n * ```\n *\n * @see {@link https://react-md.dev/components/dialog | Dialog Demos}\n * @since 6.0.0 The `Dialog` no longer supports focusing elements\n * within once it becomes visible. You must manually add `autoFocus` to a\n * element instead.\n */\nexport const Dialog = forwardRef<HTMLDivElement, DialogProps>(\n  function Dialog(props, ref) {\n    const {\n      id: propId,\n      modal = false,\n      role = modal ? \"alertdialog\" : \"dialog\",\n      type = \"centered\",\n      width,\n      tabIndex = -1,\n      visible,\n      onRequestClose,\n      containerProps,\n      temporary = true,\n      className,\n      timeout = DEFAULT_DIALOG_TIMEOUT,\n      classNames = DEFAULT_DIALOG_CLASSNAMES,\n      disableTransition = false,\n      appear = false,\n      enter = true,\n      exit = true,\n      onEnter = noop,\n      onEntering = noop,\n      onEntered = noop,\n      onExit = noop,\n      onExiting = noop,\n      onExited = noop,\n      exitedHidden = true,\n      disableOverlay = false,\n      overlayProps,\n      overlayHidden,\n      onKeyDown = noop,\n      isFocusTypeDisabled = noopBool,\n      disablePortal: propDisablePortal,\n      disableScrollLock = false,\n      disableEscapeClose = modal,\n      disableFocusOutline = type === \"full-page\",\n      children,\n      ...remaining\n    } = props;\n    const id = useEnsuredId(propId, \"dialog\");\n\n    const ssr = useSsr();\n    const setChildVisible = useNestedDialogContext();\n\n    // this makes it so that as more non-full page dialogs become visible, the\n    // overlay does not become darker as more and more overlays are stacked upon\n    // each other. only the top-most overlay will have and active background\n    // color.\n    const [isChildVisible, setIsChildVisible] = useState(false);\n    const { eventHandlers, transitionOptions } = useFocusContainer({\n      nodeRef: ref,\n      activate: visible,\n      onEnter(appearing) {\n        onEnter(appearing);\n        setChildVisible(type !== \"full-page\");\n      },\n      onEntered(appear) {\n        onEntered(appear);\n        // this needs to be called onEnter and onEntered just in case the\n        // transition is disabled\n        setChildVisible(type !== \"full-page\");\n      },\n      onEntering,\n      onExit() {\n        onExit();\n        setChildVisible(false);\n      },\n      onExiting,\n      onExited() {\n        onExited();\n        // this needs to be called onExit and onExited just in case the\n        // transition is disabled\n        setChildVisible(false);\n      },\n      disableTransition,\n      onKeyDown(event) {\n        onKeyDown(event);\n        if (\n          event.isPropagationStopped() ||\n          modal ||\n          disableEscapeClose ||\n          event.key !== \"Escape\"\n        ) {\n          return;\n        }\n\n        // prevent parent dialogs from closing as well\n        event.stopPropagation();\n        onRequestClose();\n      },\n      isFocusTypeDisabled,\n    });\n    const { elementProps, stage, rendered, disablePortal } = useCSSTransition({\n      transitionIn: visible,\n      timeout,\n      classNames,\n      className: dialog({\n        type,\n        width,\n        fixed: type === \"custom\",\n        outline: !disableFocusOutline,\n        disableBoxShadow: isChildVisible,\n        className,\n      }),\n      appear: appear && !disableTransition && !ssr,\n      enter: enter && !disableTransition,\n      exit: exit && !disableTransition,\n      temporary,\n      exitedHidden,\n      disablePortal: propDisablePortal,\n      ...transitionOptions,\n    });\n    useScrollLock(!disableScrollLock && visible);\n\n    return (\n      <NestedDialogProvider value={setIsChildVisible}>\n        {!disableOverlay && (\n          <Overlay\n            visible={visible}\n            disableTransition={disableTransition}\n            temporary={temporary}\n            disablePortal={disablePortal}\n            {...overlayProps}\n            onClick={modal ? noop : onRequestClose}\n            clickable={!modal}\n            noOpacity={overlayHidden || isChildVisible}\n          />\n        )}\n        <Portal disabled={disablePortal}>\n          {rendered && (\n            <DialogContainer\n              enabled={type !== \"custom\"}\n              {...containerProps}\n              centered={type === \"centered\"}\n              displayNone={!temporary && exitedHidden && stage === \"exited\"}\n            >\n              <div\n                aria-modal={modal || undefined}\n                {...remaining}\n                {...elementProps}\n                {...eventHandlers}\n                id={id}\n                role={role}\n                tabIndex={tabIndex}\n              >\n                {children}\n              </div>\n            </DialogContainer>\n          )}\n        </Portal>\n      </NestedDialogProvider>\n    );\n  }\n);\n"],"names":["forwardRef","useState","useSsr","useFocusContainer","Overlay","Portal","useScrollLock","useCSSTransition","useEnsuredId","DialogContainer","NestedDialogProvider","useNestedDialogContext","DEFAULT_DIALOG_CLASSNAMES","DEFAULT_DIALOG_TIMEOUT","dialog","noop","noopBool","Dialog","props","ref","id","propId","modal","role","type","width","tabIndex","visible","onRequestClose","containerProps","temporary","className","timeout","classNames","disableTransition","appear","enter","exit","onEnter","onEntering","onEntered","onExit","onExiting","onExited","exitedHidden","disableOverlay","overlayProps","overlayHidden","onKeyDown","isFocusTypeDisabled","disablePortal","propDisablePortal","disableScrollLock","disableEscapeClose","disableFocusOutline","children","remaining","ssr","setChildVisible","isChildVisible","setIsChildVisible","eventHandlers","transitionOptions","nodeRef","activate","appearing","event","isPropagationStopped","key","stopPropagation","elementProps","stage","rendered","transitionIn","fixed","outline","disableBoxShadow","value","onClick","clickable","noOpacity","disabled","enabled","centered","displayNone","div","aria-modal","undefined"],"mappings":"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"}

package/dist/dialog/DialogContainer.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/dialog/DialogContainer.tsx"],"sourcesContent":["import { type HTMLAttributes, type ReactNode, forwardRef } from \"react\";\n\nimport { dialogContainer } from \"./styles.js\";\n\n/**\n * @since 6.0.0\n */\nexport interface ConfigurableDialogContainerProps\n  extends HTMLAttributes<HTMLDivElement> {\n  /**\n   * Set to `true` to force the `Dialog` to be wrapped in a `DialogContainer`\n   * div. This defaults to `true` for `type !== \"custom\"`.\n   */\n  enabled?: boolean;\n}\n\n/**\n * @since 6.0.0\n * @internal\n */\nexport interface DialogContainerProps extends ConfigurableDialogContainerProps {\n  enabled: boolean;\n  centered: boolean;\n  displayNone: boolean;\n  children: ReactNode;\n}\n\n/**\n * @since 6.0.0\n * @internal\n */\nexport const DialogContainer = forwardRef<HTMLDivElement, DialogContainerProps>(\n  function DialogContainer(props, ref) {\n    const {\n      enabled,\n      centered,\n      displayNone,\n      children,\n      className,\n      ...remaining\n    } = props;\n\n    if (!enabled) {\n      return <>{children}</>;\n    }\n\n    return (\n      <div\n        {...remaining}\n        ref={ref}\n        className={dialogContainer({\n          className,\n          centered,\n          displayNone,\n        })}\n      >\n        {children}\n      </div>\n    );\n  }\n);\n"],"names":["forwardRef","dialogContainer","DialogContainer","props","ref","enabled","centered","displayNone","children","className","remaining","div"],"mappings":";AAAA,SAA8CA,UAAU,QAAQ,QAAQ;AAExE,SAASC,eAAe,QAAQ,cAAc;AAyB9C;;;CAGC,GACD,OAAO,MAAMC,gCAAkBF,WAC7B,SAASE,gBAAgBC,KAAK,EAAEC,GAAG;IACjC,MAAM,EACJC,OAAO,EACPC,QAAQ,EACRC,WAAW,EACXC,QAAQ,EACRC,SAAS,EACT,GAAGC,WACJ,GAAGP;IAEJ,IAAI,CAACE,SAAS;QACZ,qBAAO;sBAAGG;;IACZ;IAEA,qBACE,KAACG;QACE,GAAGD,SAAS;QACbN,KAAKA;QACLK,WAAWR,gBAAgB;YACzBQ;YACAH;YACAC;QACF;kBAECC;;AAGP,GACA"}
+{"version":3,"sources":["../../src/dialog/DialogContainer.tsx"],"sourcesContent":["import { type HTMLAttributes, type ReactNode, forwardRef } from \"react\";\n\nimport { dialogContainer } from \"./styles.js\";\n\n/**\n * @since 6.0.0\n */\nexport interface ConfigurableDialogContainerProps extends HTMLAttributes<HTMLDivElement> {\n  /**\n   * Set to `true` to force the `Dialog` to be wrapped in a `DialogContainer`\n   * div. This defaults to `true` for `type !== \"custom\"`.\n   */\n  enabled?: boolean;\n}\n\n/**\n * @since 6.0.0\n * @internal\n */\nexport interface DialogContainerProps extends ConfigurableDialogContainerProps {\n  enabled: boolean;\n  centered: boolean;\n  displayNone: boolean;\n  children: ReactNode;\n}\n\n/**\n * @since 6.0.0\n * @internal\n */\nexport const DialogContainer = forwardRef<HTMLDivElement, DialogContainerProps>(\n  function DialogContainer(props, ref) {\n    const {\n      enabled,\n      centered,\n      displayNone,\n      children,\n      className,\n      ...remaining\n    } = props;\n\n    if (!enabled) {\n      return <>{children}</>;\n    }\n\n    return (\n      <div\n        {...remaining}\n        ref={ref}\n        className={dialogContainer({\n          className,\n          centered,\n          displayNone,\n        })}\n      >\n        {children}\n      </div>\n    );\n  }\n);\n"],"names":["forwardRef","dialogContainer","DialogContainer","props","ref","enabled","centered","displayNone","children","className","remaining","div"],"mappings":";AAAA,SAA8CA,UAAU,QAAQ,QAAQ;AAExE,SAASC,eAAe,QAAQ,cAAc;AAwB9C;;;CAGC,GACD,OAAO,MAAMC,gCAAkBF,WAC7B,SAASE,gBAAgBC,KAAK,EAAEC,GAAG;IACjC,MAAM,EACJC,OAAO,EACPC,QAAQ,EACRC,WAAW,EACXC,QAAQ,EACRC,SAAS,EACT,GAAGC,WACJ,GAAGP;IAEJ,IAAI,CAACE,SAAS;QACZ,qBAAO;sBAAGG;;IACZ;IAEA,qBACE,KAACG;QACE,GAAGD,SAAS;QACbN,KAAKA;QACLK,WAAWR,gBAAgB;YACzBQ;YACAH;YACAC;QACF;kBAECC;;AAGP,GACA"}

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 *\n * @see {@link https://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"}
+{"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>, 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://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;AAKhF;;;;;;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.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 *\n * @see {@link https://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"}
+{"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>, 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://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;AAK9E;;;;;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/_dialog.scss

@@ -87,18 +87,18 @@ $z-index: utils.$temporary-element-z-index !default;
 
 /// The default background color for a dialog.
 /// @type Color
+// prettier-ignore
 $background-color: if(
-  theme.$disable-dark-elevation,
-  theme.theme-get-var(surface-color),
-  null
+  sass(theme.$disable-dark-elevation): theme.theme-get-var(surface-color);
+  else: null
 ) !default;
 
 /// The default text color for a dialog.
 /// @type Color
+// prettier-ignore
 $color: if(
-  theme.$disable-dark-elevation,
-  theme.theme-get-var(text-primary-color),
-  null
+  sass(theme.$disable-dark-elevation): theme.theme-get-var(text-primary-color);
+  else: null,
 ) !default;
 
 /// The `min-width` to apply to all `Dialog`s.

package/dist/divider/Divider.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/divider/Divider.tsx"],"sourcesContent":["import { type ElementType, type HTMLAttributes, forwardRef } from \"react\";\n\nimport { type DividerClassNameOptions, divider } from \"./styles.js\";\n\nexport type DividerElement = HTMLHRElement | HTMLDivElement;\n\n/**\n * @since 6.0.0 Extends the {@link DividerClassNameOptions}\n */\nexport interface DividerProps\n  extends HTMLAttributes<DividerElement>,\n    DividerClassNameOptions {}\n\n/**\n * @example Simple Example\n * ```tsx\n * import { Divider } from \"@react-md/core/divider/Divider\";\n * import type { ReactElement } from \"react\";\n *\n * function Example(): ReactElement {\n *   return  <Divider />;\n * }\n * ```\n *\n * @see {@link https://react-md.dev/components/divider | Divider Demos}\n */\nexport const Divider = forwardRef<DividerElement, DividerProps>(\n  function Divider(props, ref) {\n    const {\n      inset = false,\n      vertical = false,\n      role = \"separator\",\n      className,\n      ...remaining\n    } = props;\n\n    const Component = (vertical ? \"div\" : \"hr\") as ElementType;\n\n    return (\n      <Component\n        {...remaining}\n        ref={ref}\n        role={role}\n        className={divider({\n          inset,\n          vertical,\n          className,\n        })}\n      />\n    );\n  }\n);\n"],"names":["forwardRef","divider","Divider","props","ref","inset","vertical","role","className","remaining","Component"],"mappings":";AAAA,SAAgDA,UAAU,QAAQ,QAAQ;AAE1E,SAAuCC,OAAO,QAAQ,cAAc;AAWpE;;;;;;;;;;;;CAYC,GACD,OAAO,MAAMC,wBAAUF,WACrB,SAASE,QAAQC,KAAK,EAAEC,GAAG;IACzB,MAAM,EACJC,QAAQ,KAAK,EACbC,WAAW,KAAK,EAChBC,OAAO,WAAW,EAClBC,SAAS,EACT,GAAGC,WACJ,GAAGN;IAEJ,MAAMO,YAAaJ,WAAW,QAAQ;IAEtC,qBACE,KAACI;QACE,GAAGD,SAAS;QACbL,KAAKA;QACLG,MAAMA;QACNC,WAAWP,QAAQ;YACjBI;YACAC;YACAE;QACF;;AAGN,GACA"}
+{"version":3,"sources":["../../src/divider/Divider.tsx"],"sourcesContent":["import { type ElementType, type HTMLAttributes, forwardRef } from \"react\";\n\nimport { type DividerClassNameOptions, divider } from \"./styles.js\";\n\nexport type DividerElement = HTMLHRElement | HTMLDivElement;\n\n/**\n * @since 6.0.0 Extends the {@link DividerClassNameOptions}\n */\nexport interface DividerProps\n  extends HTMLAttributes<DividerElement>, DividerClassNameOptions {}\n\n/**\n * @example Simple Example\n * ```tsx\n * import { Divider } from \"@react-md/core/divider/Divider\";\n * import type { ReactElement } from \"react\";\n *\n * function Example(): ReactElement {\n *   return  <Divider />;\n * }\n * ```\n *\n * @see {@link https://react-md.dev/components/divider | Divider Demos}\n */\nexport const Divider = forwardRef<DividerElement, DividerProps>(\n  function Divider(props, ref) {\n    const {\n      inset = false,\n      vertical = false,\n      role = \"separator\",\n      className,\n      ...remaining\n    } = props;\n\n    const Component = (vertical ? \"div\" : \"hr\") as ElementType;\n\n    return (\n      <Component\n        {...remaining}\n        ref={ref}\n        role={role}\n        className={divider({\n          inset,\n          vertical,\n          className,\n        })}\n      />\n    );\n  }\n);\n"],"names":["forwardRef","divider","Divider","props","ref","inset","vertical","role","className","remaining","Component"],"mappings":";AAAA,SAAgDA,UAAU,QAAQ,QAAQ;AAE1E,SAAuCC,OAAO,QAAQ,cAAc;AAUpE;;;;;;;;;;;;CAYC,GACD,OAAO,MAAMC,wBAAUF,WACrB,SAASE,QAAQC,KAAK,EAAEC,GAAG;IACzB,MAAM,EACJC,QAAQ,KAAK,EACbC,WAAW,KAAK,EAChBC,OAAO,WAAW,EAClBC,SAAS,EACT,GAAGC,WACJ,GAAGN;IAEJ,MAAMO,YAAaJ,WAAW,QAAQ;IAEtC,qBACE,KAACI;QACE,GAAGD,SAAS;QACbL,KAAKA;QACLG,MAAMA;QACNC,WAAWP,QAAQ;YACjBI;YACAC;YACAE;QACF;;AAGN,GACA"}

package/dist/divider/_divider.scss

@@ -125,8 +125,12 @@ $variables: (
 /// @param {String} position [null] - This should be one of `left`, `right`,
 /// `top`, `bottom`
 @mixin border-style($position: null) {
-  $property: if(not $position, border, "border-#{$position}");
-  $var-name: if(not $position, size, border-size);
+  $property: border;
+  $var-name: size;
+  @if $position {
+    $property: "border-#{$position}";
+    $var-name: border-size;
+  }
 
   #{$property}: get-var($var-name) solid get-var(color);
 }