@react-md/core 6.2.1 → 6.3.1

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\ndeclare module \"react\" {\n  interface CSSProperties {\n    \"--rmd-card-background-color\"?: string;\n    \"--rmd-card-color\"?: string;\n    \"--rmd-card-secondary-color\"?: string;\n  }\n}\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;AAyB9D;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;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 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"}

package/dist/card/styles.d.ts

@@ -1,3 +1,9 @@
+declare module "react" {
+    interface CSSProperties {
+        "--rmd-card-background-color"?: string;
+        "--rmd-card-color"?: string;
+    }
+}
 /** @since 6.0.0 */
 export interface CardClassNameOptions {
     className?: string;

package/dist/card/styles.js

@@ -1,12 +1,12 @@
 import { cnb } from "cnbuilder";
 import { cssUtils } from "../cssUtils.js";
 import { bem } from "../utils/bem.js";
-const cardStyles = bem("rmd-card");
+const styles = bem("rmd-card");
 /**
  * @since 6.0.0
  */ export function card(options = {}) {
     const { className, bordered, raisable, interactable } = options;
-    return cnb(cardStyles({
+    return cnb(styles({
         bordered,
         shadowed: !bordered,
         raisable: !bordered && raisable,
@@ -17,7 +17,7 @@ const cardStyles = bem("rmd-card");
  * @since 6.0.0
  */ export function cardHeader(options = {}) {
     const { className, addonAfter = false, addonBefore = false } = options;
-    return cnb(cardStyles("header", {
+    return cnb(styles("header", {
         "addon-after": addonAfter && !addonBefore,
         "addon-before": addonBefore && !addonAfter,
         surrounded: addonAfter && addonBefore
@@ -27,25 +27,25 @@ const cardStyles = bem("rmd-card");
  * @since 6.0.0
  */ export function cardHeaderContent(options = {}) {
     const { className } = options;
-    return cnb(cardStyles("header-content"), className);
+    return cnb(styles("header-content"), className);
 }
 /**
  * @since 6.0.0
  */ export function cardTitle(options = {}) {
     const { className } = options;
-    return cnb(cardStyles("title"), className);
+    return cnb(styles("title"), className);
 }
 /**
  * @since 6.0.0
  */ export function cardSubtitle(options = {}) {
     const { className } = options;
-    return cnb(cardStyles("subtitle"), className);
+    return cnb(styles("subtitle"), className);
 }
 /**
  * @since 6.0.0
  */ export function cardContent(options = {}) {
     const { className, disablePadding, disableSecondaryColor, disableLastChildPadding } = options;
-    return cnb(cardStyles("content", {
+    return cnb(styles("content", {
         padded: !disablePadding,
         "padding-bottom": !disableLastChildPadding
     }), cssUtils({
@@ -56,7 +56,7 @@ const cardStyles = bem("rmd-card");
  * @since 6.0.0
  */ export function cardFooter(options = {}) {
     const { className } = options;
-    return cnb(cardStyles("footer"), className);
+    return cnb(styles("footer"), className);
 }
 
 //# sourceMappingURL=styles.js.map

package/dist/card/styles.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/card/styles.ts"],"sourcesContent":["import { cnb } from \"cnbuilder\";\n\nimport { cssUtils } from \"../cssUtils.js\";\nimport { bem } from \"../utils/bem.js\";\n\nconst cardStyles = bem(\"rmd-card\");\n\n/** @since 6.0.0 */\nexport interface CardClassNameOptions {\n  className?: string;\n\n  /**\n   * Set this to `true` if the card should use apply an inset `border` instead\n   * of `box-shadow`.\n   *\n   * @defaultValue `false`\n   */\n  bordered?: boolean;\n\n  /**\n   * Set this to `true` if the card should gain additional box shadow while\n   * hovered.\n   *\n   * @defaultValue `false`\n   */\n  raisable?: boolean;\n\n  /**\n   * Set this to `true` if the card should gain the pointer cursor while\n   * hovering and other interaction styles and not using the `ClickableCard`\n   * component.\n   *\n   * @defaultValue `false`\n   */\n  interactable?: boolean;\n}\n\n/**\n * @since 6.0.0\n */\nexport function card(options: CardClassNameOptions = {}): string {\n  const { className, bordered, raisable, interactable } = options;\n\n  return cnb(\n    cardStyles({\n      bordered,\n      shadowed: !bordered,\n      raisable: !bordered && raisable,\n      interactable,\n    }),\n    className\n  );\n}\n\n/** @since 6.0.0 */\nexport interface CardHeaderClassNameOptions {\n  className?: string;\n\n  /** @defaultValue `false` */\n  addonAfter?: boolean;\n\n  /** @defaultValue `false` */\n  addonBefore?: boolean;\n}\n\n/**\n * @since 6.0.0\n */\nexport function cardHeader(options: CardHeaderClassNameOptions = {}): string {\n  const { className, addonAfter = false, addonBefore = false } = options;\n\n  return cnb(\n    cardStyles(\"header\", {\n      \"addon-after\": addonAfter && !addonBefore,\n      \"addon-before\": addonBefore && !addonAfter,\n      surrounded: addonAfter && addonBefore,\n    }),\n    className\n  );\n}\n\n/** @since 6.0.0 */\nexport interface CardHeaderContentClassNameOptions {\n  className?: string;\n}\n\n/**\n * @since 6.0.0\n */\nexport function cardHeaderContent(\n  options: CardHeaderContentClassNameOptions = {}\n): string {\n  const { className } = options;\n\n  return cnb(cardStyles(\"header-content\"), className);\n}\n\n/** @since 6.0.0 */\nexport interface CardTitleClassNameOptions {\n  className?: string;\n}\n\n/**\n * @since 6.0.0\n */\nexport function cardTitle(options: CardTitleClassNameOptions = {}): string {\n  const { className } = options;\n\n  return cnb(cardStyles(\"title\"), className);\n}\n\n/** @since 6.0.0 */\nexport interface CardSubtitleClassNameOptions {\n  className?: string;\n}\n\n/**\n * @since 6.0.0\n */\nexport function cardSubtitle(\n  options: CardSubtitleClassNameOptions = {}\n): string {\n  const { className } = options;\n\n  return cnb(cardStyles(\"subtitle\"), className);\n}\n\n/** @since 6.0.0 */\nexport interface CardContentClassNameOptions {\n  className?: string;\n\n  /**\n   * Set this to `true` to disable the card's padding.\n   *\n   * @defaultValue `false`\n   */\n  disablePadding?: boolean;\n\n  /**\n   * Set this to `true` to disable applying the `text-secondary-color`.\n   *\n   * @defaultValue `false`\n   */\n  disableSecondaryColor?: boolean;\n\n  /**\n   * Set this to `true` to disable applying extra `padding-bottom` if the\n   * `CardContent` component is the last child.\n   *\n   * @defaultValue `false`\n   * @since 6.0.0 Renamed from `disableExtraPadding`\n   */\n  disableLastChildPadding?: boolean;\n}\n\n/**\n * @since 6.0.0\n */\nexport function cardContent(options: CardContentClassNameOptions = {}): string {\n  const {\n    className,\n    disablePadding,\n    disableSecondaryColor,\n    disableLastChildPadding,\n  } = options;\n\n  return cnb(\n    cardStyles(\"content\", {\n      padded: !disablePadding,\n      \"padding-bottom\": !disableLastChildPadding,\n    }),\n    cssUtils({\n      textColor: !disableSecondaryColor ? \"text-secondary\" : undefined,\n    }),\n    className\n  );\n}\n\n/** @since 6.0.0 */\nexport interface CardFooterClassNameOptions {\n  className?: string;\n}\n\n/**\n * @since 6.0.0\n */\nexport function cardFooter(options: CardFooterClassNameOptions = {}): string {\n  const { className } = options;\n\n  return cnb(cardStyles(\"footer\"), className);\n}\n"],"names":["cnb","cssUtils","bem","cardStyles","card","options","className","bordered","raisable","interactable","shadowed","cardHeader","addonAfter","addonBefore","surrounded","cardHeaderContent","cardTitle","cardSubtitle","cardContent","disablePadding","disableSecondaryColor","disableLastChildPadding","padded","textColor","undefined","cardFooter"],"mappings":"AAAA,SAASA,GAAG,QAAQ,YAAY;AAEhC,SAASC,QAAQ,QAAQ,iBAAiB;AAC1C,SAASC,GAAG,QAAQ,kBAAkB;AAEtC,MAAMC,aAAaD,IAAI;AAgCvB;;CAEC,GACD,OAAO,SAASE,KAAKC,UAAgC,CAAC,CAAC;IACrD,MAAM,EAAEC,SAAS,EAAEC,QAAQ,EAAEC,QAAQ,EAAEC,YAAY,EAAE,GAAGJ;IAExD,OAAOL,IACLG,WAAW;QACTI;QACAG,UAAU,CAACH;QACXC,UAAU,CAACD,YAAYC;QACvBC;IACF,IACAH;AAEJ;AAaA;;CAEC,GACD,OAAO,SAASK,WAAWN,UAAsC,CAAC,CAAC;IACjE,MAAM,EAAEC,SAAS,EAAEM,aAAa,KAAK,EAAEC,cAAc,KAAK,EAAE,GAAGR;IAE/D,OAAOL,IACLG,WAAW,UAAU;QACnB,eAAeS,cAAc,CAACC;QAC9B,gBAAgBA,eAAe,CAACD;QAChCE,YAAYF,cAAcC;IAC5B,IACAP;AAEJ;AAOA;;CAEC,GACD,OAAO,SAASS,kBACdV,UAA6C,CAAC,CAAC;IAE/C,MAAM,EAAEC,SAAS,EAAE,GAAGD;IAEtB,OAAOL,IAAIG,WAAW,mBAAmBG;AAC3C;AAOA;;CAEC,GACD,OAAO,SAASU,UAAUX,UAAqC,CAAC,CAAC;IAC/D,MAAM,EAAEC,SAAS,EAAE,GAAGD;IAEtB,OAAOL,IAAIG,WAAW,UAAUG;AAClC;AAOA;;CAEC,GACD,OAAO,SAASW,aACdZ,UAAwC,CAAC,CAAC;IAE1C,MAAM,EAAEC,SAAS,EAAE,GAAGD;IAEtB,OAAOL,IAAIG,WAAW,aAAaG;AACrC;AA8BA;;CAEC,GACD,OAAO,SAASY,YAAYb,UAAuC,CAAC,CAAC;IACnE,MAAM,EACJC,SAAS,EACTa,cAAc,EACdC,qBAAqB,EACrBC,uBAAuB,EACxB,GAAGhB;IAEJ,OAAOL,IACLG,WAAW,WAAW;QACpBmB,QAAQ,CAACH;QACT,kBAAkB,CAACE;IACrB,IACApB,SAAS;QACPsB,WAAW,CAACH,wBAAwB,mBAAmBI;IACzD,IACAlB;AAEJ;AAOA;;CAEC,GACD,OAAO,SAASmB,WAAWpB,UAAsC,CAAC,CAAC;IACjE,MAAM,EAAEC,SAAS,EAAE,GAAGD;IAEtB,OAAOL,IAAIG,WAAW,WAAWG;AACnC"}
+{"version":3,"sources":["../../src/card/styles.ts"],"sourcesContent":["import { cnb } from \"cnbuilder\";\n\nimport { cssUtils } from \"../cssUtils.js\";\nimport { bem } from \"../utils/bem.js\";\n\nconst styles = bem(\"rmd-card\");\n\ndeclare module \"react\" {\n  interface CSSProperties {\n    \"--rmd-card-background-color\"?: string;\n    \"--rmd-card-color\"?: string;\n  }\n}\n\n/** @since 6.0.0 */\nexport interface CardClassNameOptions {\n  className?: string;\n\n  /**\n   * Set this to `true` if the card should use apply an inset `border` instead\n   * of `box-shadow`.\n   *\n   * @defaultValue `false`\n   */\n  bordered?: boolean;\n\n  /**\n   * Set this to `true` if the card should gain additional box shadow while\n   * hovered.\n   *\n   * @defaultValue `false`\n   */\n  raisable?: boolean;\n\n  /**\n   * Set this to `true` if the card should gain the pointer cursor while\n   * hovering and other interaction styles and not using the `ClickableCard`\n   * component.\n   *\n   * @defaultValue `false`\n   */\n  interactable?: boolean;\n}\n\n/**\n * @since 6.0.0\n */\nexport function card(options: CardClassNameOptions = {}): string {\n  const { className, bordered, raisable, interactable } = options;\n\n  return cnb(\n    styles({\n      bordered,\n      shadowed: !bordered,\n      raisable: !bordered && raisable,\n      interactable,\n    }),\n    className\n  );\n}\n\n/** @since 6.0.0 */\nexport interface CardHeaderClassNameOptions {\n  className?: string;\n\n  /** @defaultValue `false` */\n  addonAfter?: boolean;\n\n  /** @defaultValue `false` */\n  addonBefore?: boolean;\n}\n\n/**\n * @since 6.0.0\n */\nexport function cardHeader(options: CardHeaderClassNameOptions = {}): string {\n  const { className, addonAfter = false, addonBefore = false } = options;\n\n  return cnb(\n    styles(\"header\", {\n      \"addon-after\": addonAfter && !addonBefore,\n      \"addon-before\": addonBefore && !addonAfter,\n      surrounded: addonAfter && addonBefore,\n    }),\n    className\n  );\n}\n\n/** @since 6.0.0 */\nexport interface CardHeaderContentClassNameOptions {\n  className?: string;\n}\n\n/**\n * @since 6.0.0\n */\nexport function cardHeaderContent(\n  options: CardHeaderContentClassNameOptions = {}\n): string {\n  const { className } = options;\n\n  return cnb(styles(\"header-content\"), className);\n}\n\n/** @since 6.0.0 */\nexport interface CardTitleClassNameOptions {\n  className?: string;\n}\n\n/**\n * @since 6.0.0\n */\nexport function cardTitle(options: CardTitleClassNameOptions = {}): string {\n  const { className } = options;\n\n  return cnb(styles(\"title\"), className);\n}\n\n/** @since 6.0.0 */\nexport interface CardSubtitleClassNameOptions {\n  className?: string;\n}\n\n/**\n * @since 6.0.0\n */\nexport function cardSubtitle(\n  options: CardSubtitleClassNameOptions = {}\n): string {\n  const { className } = options;\n\n  return cnb(styles(\"subtitle\"), className);\n}\n\n/** @since 6.0.0 */\nexport interface CardContentClassNameOptions {\n  className?: string;\n\n  /**\n   * Set this to `true` to disable the card's padding.\n   *\n   * @defaultValue `false`\n   */\n  disablePadding?: boolean;\n\n  /**\n   * Set this to `true` to disable applying the `text-secondary-color`.\n   *\n   * @defaultValue `false`\n   */\n  disableSecondaryColor?: boolean;\n\n  /**\n   * Set this to `true` to disable applying extra `padding-bottom` if the\n   * `CardContent` component is the last child.\n   *\n   * @defaultValue `false`\n   * @since 6.0.0 Renamed from `disableExtraPadding`\n   */\n  disableLastChildPadding?: boolean;\n}\n\n/**\n * @since 6.0.0\n */\nexport function cardContent(options: CardContentClassNameOptions = {}): string {\n  const {\n    className,\n    disablePadding,\n    disableSecondaryColor,\n    disableLastChildPadding,\n  } = options;\n\n  return cnb(\n    styles(\"content\", {\n      padded: !disablePadding,\n      \"padding-bottom\": !disableLastChildPadding,\n    }),\n    cssUtils({\n      textColor: !disableSecondaryColor ? \"text-secondary\" : undefined,\n    }),\n    className\n  );\n}\n\n/** @since 6.0.0 */\nexport interface CardFooterClassNameOptions {\n  className?: string;\n}\n\n/**\n * @since 6.0.0\n */\nexport function cardFooter(options: CardFooterClassNameOptions = {}): string {\n  const { className } = options;\n\n  return cnb(styles(\"footer\"), className);\n}\n"],"names":["cnb","cssUtils","bem","styles","card","options","className","bordered","raisable","interactable","shadowed","cardHeader","addonAfter","addonBefore","surrounded","cardHeaderContent","cardTitle","cardSubtitle","cardContent","disablePadding","disableSecondaryColor","disableLastChildPadding","padded","textColor","undefined","cardFooter"],"mappings":"AAAA,SAASA,GAAG,QAAQ,YAAY;AAEhC,SAASC,QAAQ,QAAQ,iBAAiB;AAC1C,SAASC,GAAG,QAAQ,kBAAkB;AAEtC,MAAMC,SAASD,IAAI;AAuCnB;;CAEC,GACD,OAAO,SAASE,KAAKC,UAAgC,CAAC,CAAC;IACrD,MAAM,EAAEC,SAAS,EAAEC,QAAQ,EAAEC,QAAQ,EAAEC,YAAY,EAAE,GAAGJ;IAExD,OAAOL,IACLG,OAAO;QACLI;QACAG,UAAU,CAACH;QACXC,UAAU,CAACD,YAAYC;QACvBC;IACF,IACAH;AAEJ;AAaA;;CAEC,GACD,OAAO,SAASK,WAAWN,UAAsC,CAAC,CAAC;IACjE,MAAM,EAAEC,SAAS,EAAEM,aAAa,KAAK,EAAEC,cAAc,KAAK,EAAE,GAAGR;IAE/D,OAAOL,IACLG,OAAO,UAAU;QACf,eAAeS,cAAc,CAACC;QAC9B,gBAAgBA,eAAe,CAACD;QAChCE,YAAYF,cAAcC;IAC5B,IACAP;AAEJ;AAOA;;CAEC,GACD,OAAO,SAASS,kBACdV,UAA6C,CAAC,CAAC;IAE/C,MAAM,EAAEC,SAAS,EAAE,GAAGD;IAEtB,OAAOL,IAAIG,OAAO,mBAAmBG;AACvC;AAOA;;CAEC,GACD,OAAO,SAASU,UAAUX,UAAqC,CAAC,CAAC;IAC/D,MAAM,EAAEC,SAAS,EAAE,GAAGD;IAEtB,OAAOL,IAAIG,OAAO,UAAUG;AAC9B;AAOA;;CAEC,GACD,OAAO,SAASW,aACdZ,UAAwC,CAAC,CAAC;IAE1C,MAAM,EAAEC,SAAS,EAAE,GAAGD;IAEtB,OAAOL,IAAIG,OAAO,aAAaG;AACjC;AA8BA;;CAEC,GACD,OAAO,SAASY,YAAYb,UAAuC,CAAC,CAAC;IACnE,MAAM,EACJC,SAAS,EACTa,cAAc,EACdC,qBAAqB,EACrBC,uBAAuB,EACxB,GAAGhB;IAEJ,OAAOL,IACLG,OAAO,WAAW;QAChBmB,QAAQ,CAACH;QACT,kBAAkB,CAACE;IACrB,IACApB,SAAS;QACPsB,WAAW,CAACH,wBAAwB,mBAAmBI;IACzD,IACAlB;AAEJ;AAOA;;CAEC,GACD,OAAO,SAASmB,WAAWpB,UAAsC,CAAC,CAAC;IACjE,MAAM,EAAEC,SAAS,EAAE,GAAGD;IAEtB,OAAOL,IAAIG,OAAO,WAAWG;AAC/B"}

package/dist/chip/Chip.d.ts

@@ -1,27 +1,20 @@
 import { type ButtonHTMLAttributes, type CSSProperties, type HTMLAttributes, type ReactNode } from "react";
 import { type BackgroundColor } from "../cssUtils.js";
 import { type ComponentWithRippleProps } from "../interaction/types.js";
+import { type BaseMaxWidthTransitionOptions } from "../transition/useMaxWidthTransition.js";
 import { type PropsWithRef } from "../types.js";
-declare module "react" {
-    interface CSSProperties {
-        "--rmd-chip-solid-background-color"?: string;
-        "--rmd-chip-solid-disabled-background-color"?: string;
-        "--rmd-chip-solid-color"?: string;
-        "--rmd-chip-theme-background-color"?: string;
-        "--rmd-chip-theme-color"?: string;
-        "--rmd-chip-outline-background-color"?: string;
-        "--rmd-chip-outline-color"?: string;
-    }
-}
+import { type ChipTheme } from "./styles.js";
 /**
  * @since 6.0.0 Renamed the `noninteractive` prop to
  * `noninteractable`.
+ * @since 6.3.1 Extends BaseMaxWidthTransitionOptions for CSSProperties module
+ * augmentation.
  */
-export interface ChipProps extends ButtonHTMLAttributes<HTMLButtonElement>, ComponentWithRippleProps {
+export interface ChipProps extends ButtonHTMLAttributes<HTMLButtonElement>, BaseMaxWidthTransitionOptions, ComponentWithRippleProps {
     /**
      * @defaultValue `"solid"`
      */
-    theme?: "outline" | "solid";
+    theme?: ChipTheme;
     /**
      * Set this to `true` if the chip should gain additional box shadow while the
      * user is pressing down on the chip.

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 { useMaxWidthTransition } from \"../transition/useMaxWidthTransition.js\";\nimport { type PropsWithRef } from \"../types.js\";\nimport { chip, chipContent } from \"./styles.js\";\n\ndeclare module \"react\" {\n  interface CSSProperties {\n    \"--rmd-chip-solid-background-color\"?: string;\n    \"--rmd-chip-solid-disabled-background-color\"?: string;\n    \"--rmd-chip-solid-color\"?: string;\n    \"--rmd-chip-theme-background-color\"?: string;\n    \"--rmd-chip-theme-color\"?: string;\n    \"--rmd-chip-outline-background-color\"?: string;\n    \"--rmd-chip-outline-color\"?: string;\n  }\n}\n\n/**\n * @since 6.0.0 Renamed the `noninteractive` prop to\n * `noninteractable`.\n */\nexport interface ChipProps\n  extends ButtonHTMLAttributes<HTMLButtonElement>,\n    ComponentWithRippleProps {\n  /**\n   * @defaultValue `\"solid\"`\n   */\n  theme?: \"outline\" | \"solid\";\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,SAASC,qBAAqB,QAAQ,yCAAyC;AAE/E,SAASC,IAAI,EAAEC,WAAW,QAAQ,cAAc;AAgJhD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;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"}
+{"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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"}

package/dist/chip/styles.d.ts

@@ -1,4 +1,26 @@
 import { type BackgroundColor } from "../cssUtils.js";
+declare module "react" {
+    interface CSSProperties {
+        "--rmd-chip-gap"?: string;
+        "--rmd-chip-height"?: string;
+        "--rmd-chip-border-radius"?: string | number;
+        "--rmd-chip-horizontal-padding"?: string | number;
+        "--rmd-chip-vertical-padding"?: string | number;
+        "--rmd-chip-solid-background-color"?: string;
+        "--rmd-chip-solid-disabled-background-color"?: string;
+        "--rmd-chip-solid-color"?: string;
+        "--rmd-chip-theme-background-color"?: string;
+        "--rmd-chip-theme-color"?: string;
+        "--rmd-chip-outline-color"?: string;
+        "--rmd-chip-outline-width"?: string | number;
+        "--rmd-chip-outline-background-color"?: string;
+        "--rmd-chip-outline-text-color"?: string;
+    }
+}
+/**
+ * @since 6.3.1
+ */
+export type ChipTheme = "outline" | "solid";
 /**
  * @since 6.0.0
  *
@@ -33,9 +55,12 @@ import { type BackgroundColor } from "../cssUtils.js";
  */
 export interface ChipClassNameOptions {
     className?: string;
+    /**
+     * An optional className to provide only while {@link selected} is `true`.
+     */
     selectedClassName?: string;
     /** @defaultValue `"solid"` */
-    theme?: "outline" | "solid";
+    theme?: ChipTheme;
     backgroundColor?: BackgroundColor;
     /** @defaultValue `false` */
     disabled?: boolean;

package/dist/chip/styles.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/chip/styles.ts"],"sourcesContent":["import { cnb } from \"cnbuilder\";\n\nimport { type BackgroundColor, cssUtils } from \"../cssUtils.js\";\nimport { bem } from \"../utils/bem.js\";\n\nconst styles = bem(\"rmd-chip\");\n\n/**\n * @since 6.0.0\n *\n * Note for the future: Once Firefox supports the `:has` selector, the\n * `leftAddon` and `rightAddon` can be removed. The styles would automatically\n * apply the padding instead:\n *\n * ```scss\n * &:has(.rmd-icon:first-child, .rmd-avatar:first-child) {\n *   padding-left: $addon-left-padding;\n *\n *   @include utils.rtl {\n *     padding-left: $horizontal-padding;\n *     padding-right; $addon-left-padding;\n *   }\n * }\n *\n * $index: if(\n *   not core.$interaction-mode or core.$interaction-mode == press,\n *   1,\n *   2 // last child is always the `.rmd-ripple-container`\n * );\n * &:has(.rmd-icon:nth-last-child(#{$index})) {\n *   padding-right: $addon-left-padding;\n *\n *   @include utils.rtl {\n *     padding-left; $addon-left-padding;\n *     padding-right: $horizontal-padding;\n *   }\n * }\n * ```\n */\nexport interface ChipClassNameOptions {\n  className?: string;\n  selectedClassName?: string;\n\n  /** @defaultValue `\"solid\"` */\n  theme?: \"outline\" | \"solid\";\n\n  backgroundColor?: BackgroundColor;\n\n  /** @defaultValue `false` */\n  disabled?: boolean;\n\n  /** @defaultValue `false` */\n  selected?: boolean;\n\n  /** @defaultValue `false` */\n  selectedThemed?: boolean;\n\n  /** @defaultValue `true` */\n  noninteractive?: boolean;\n\n  /** @defaultValue `false` */\n  leftAddon?: boolean;\n\n  /** @defaultValue `false` */\n  rightAddon?: boolean;\n\n  /** @defaultValue `false` */\n  pressed?: boolean;\n  pressedClassName?: string;\n}\n\n/**\n * @since 6.0.0\n */\nexport function chip(options: ChipClassNameOptions = {}): string {\n  const {\n    className,\n    theme = \"solid\",\n    pressed = false,\n    disabled = false,\n    selected = false,\n    selectedThemed = false,\n    selectedClassName,\n    noninteractive = true,\n    pressedClassName,\n    leftAddon = false,\n    rightAddon = false,\n    backgroundColor,\n  } = options;\n\n  return cnb(\n    styles({\n      themed: !disabled && selected && selectedThemed,\n      selected: !disabled && selected && !selectedThemed,\n      solid: theme === \"solid\",\n      outline: theme === \"outline\",\n      disabled,\n      \"left-addon\": leftAddon,\n      \"right-addon\": rightAddon,\n      pressed,\n    }),\n    selected && selectedClassName,\n    pressedClassName,\n    cssUtils({\n      surface: !noninteractive,\n      textColor: disabled ? \"text-disabled\" : undefined,\n      backgroundColor,\n    }),\n    className\n  );\n}\n\n/**\n * @since 6.0.0\n */\nexport interface ChipContentClassNameOptions {\n  className?: string;\n}\n\n/**\n * @since 6.0.0\n */\nexport function chipContent(options: ChipContentClassNameOptions = {}): string {\n  const { className } = options;\n\n  return cnb(styles(\"content\"), className);\n}\n"],"names":["cnb","cssUtils","bem","styles","chip","options","className","theme","pressed","disabled","selected","selectedThemed","selectedClassName","noninteractive","pressedClassName","leftAddon","rightAddon","backgroundColor","themed","solid","outline","surface","textColor","undefined","chipContent"],"mappings":"AAAA,SAASA,GAAG,QAAQ,YAAY;AAEhC,SAA+BC,QAAQ,QAAQ,iBAAiB;AAChE,SAASC,GAAG,QAAQ,kBAAkB;AAEtC,MAAMC,SAASD,IAAI;AAkEnB;;CAEC,GACD,OAAO,SAASE,KAAKC,UAAgC,CAAC,CAAC;IACrD,MAAM,EACJC,SAAS,EACTC,QAAQ,OAAO,EACfC,UAAU,KAAK,EACfC,WAAW,KAAK,EAChBC,WAAW,KAAK,EAChBC,iBAAiB,KAAK,EACtBC,iBAAiB,EACjBC,iBAAiB,IAAI,EACrBC,gBAAgB,EAChBC,YAAY,KAAK,EACjBC,aAAa,KAAK,EAClBC,eAAe,EAChB,GAAGZ;IAEJ,OAAOL,IACLG,OAAO;QACLe,QAAQ,CAACT,YAAYC,YAAYC;QACjCD,UAAU,CAACD,YAAYC,YAAY,CAACC;QACpCQ,OAAOZ,UAAU;QACjBa,SAASb,UAAU;QACnBE;QACA,cAAcM;QACd,eAAeC;QACfR;IACF,IACAE,YAAYE,mBACZE,kBACAb,SAAS;QACPoB,SAAS,CAACR;QACVS,WAAWb,WAAW,kBAAkBc;QACxCN;IACF,IACAX;AAEJ;AASA;;CAEC,GACD,OAAO,SAASkB,YAAYnB,UAAuC,CAAC,CAAC;IACnE,MAAM,EAAEC,SAAS,EAAE,GAAGD;IAEtB,OAAOL,IAAIG,OAAO,YAAYG;AAChC"}
+{"version":3,"sources":["../../src/chip/styles.ts"],"sourcesContent":["import { cnb } from \"cnbuilder\";\n\nimport { type BackgroundColor, cssUtils } from \"../cssUtils.js\";\nimport { bem } from \"../utils/bem.js\";\n\nconst styles = bem(\"rmd-chip\");\n\ndeclare module \"react\" {\n  interface CSSProperties {\n    \"--rmd-chip-gap\"?: string;\n    \"--rmd-chip-height\"?: string;\n    \"--rmd-chip-border-radius\"?: string | number;\n    \"--rmd-chip-horizontal-padding\"?: string | number;\n    \"--rmd-chip-vertical-padding\"?: string | number;\n    \"--rmd-chip-solid-background-color\"?: string;\n    \"--rmd-chip-solid-disabled-background-color\"?: string;\n    \"--rmd-chip-solid-color\"?: string;\n    \"--rmd-chip-theme-background-color\"?: string;\n    \"--rmd-chip-theme-color\"?: string;\n    \"--rmd-chip-outline-color\"?: string;\n    \"--rmd-chip-outline-width\"?: string | number;\n    \"--rmd-chip-outline-background-color\"?: string;\n    \"--rmd-chip-outline-text-color\"?: string;\n  }\n}\n\n/**\n * @since 6.3.1\n */\nexport type ChipTheme = \"outline\" | \"solid\";\n\n/**\n * @since 6.0.0\n *\n * Note for the future: Once Firefox supports the `:has` selector, the\n * `leftAddon` and `rightAddon` can be removed. The styles would automatically\n * apply the padding instead:\n *\n * ```scss\n * &:has(.rmd-icon:first-child, .rmd-avatar:first-child) {\n *   padding-left: $addon-left-padding;\n *\n *   @include utils.rtl {\n *     padding-left: $horizontal-padding;\n *     padding-right; $addon-left-padding;\n *   }\n * }\n *\n * $index: if(\n *   not core.$interaction-mode or core.$interaction-mode == press,\n *   1,\n *   2 // last child is always the `.rmd-ripple-container`\n * );\n * &:has(.rmd-icon:nth-last-child(#{$index})) {\n *   padding-right: $addon-left-padding;\n *\n *   @include utils.rtl {\n *     padding-left; $addon-left-padding;\n *     padding-right: $horizontal-padding;\n *   }\n * }\n * ```\n */\nexport interface ChipClassNameOptions {\n  className?: string;\n\n  /**\n   * An optional className to provide only while {@link selected} is `true`.\n   */\n  selectedClassName?: string;\n\n  /** @defaultValue `\"solid\"` */\n  theme?: ChipTheme;\n\n  backgroundColor?: BackgroundColor;\n\n  /** @defaultValue `false` */\n  disabled?: boolean;\n\n  /** @defaultValue `false` */\n  selected?: boolean;\n\n  /** @defaultValue `false` */\n  selectedThemed?: boolean;\n\n  /** @defaultValue `true` */\n  noninteractive?: boolean;\n\n  /** @defaultValue `false` */\n  leftAddon?: boolean;\n\n  /** @defaultValue `false` */\n  rightAddon?: boolean;\n\n  /** @defaultValue `false` */\n  pressed?: boolean;\n  pressedClassName?: string;\n}\n\n/**\n * @since 6.0.0\n */\nexport function chip(options: ChipClassNameOptions = {}): string {\n  const {\n    className,\n    theme = \"solid\",\n    pressed = false,\n    disabled = false,\n    selected = false,\n    selectedThemed = false,\n    selectedClassName,\n    noninteractive = true,\n    pressedClassName,\n    leftAddon = false,\n    rightAddon = false,\n    backgroundColor,\n  } = options;\n\n  return cnb(\n    styles({\n      themed: !disabled && selected && selectedThemed,\n      selected: !disabled && selected && !selectedThemed,\n      solid: theme === \"solid\",\n      outline: theme === \"outline\",\n      disabled,\n      \"left-addon\": leftAddon,\n      \"right-addon\": rightAddon,\n      pressed,\n    }),\n    selected && selectedClassName,\n    pressedClassName,\n    cssUtils({\n      surface: !noninteractive,\n      textColor: disabled ? \"text-disabled\" : undefined,\n      backgroundColor,\n    }),\n    className\n  );\n}\n\n/**\n * @since 6.0.0\n */\nexport interface ChipContentClassNameOptions {\n  className?: string;\n}\n\n/**\n * @since 6.0.0\n */\nexport function chipContent(options: ChipContentClassNameOptions = {}): string {\n  const { className } = options;\n\n  return cnb(styles(\"content\"), className);\n}\n"],"names":["cnb","cssUtils","bem","styles","chip","options","className","theme","pressed","disabled","selected","selectedThemed","selectedClassName","noninteractive","pressedClassName","leftAddon","rightAddon","backgroundColor","themed","solid","outline","surface","textColor","undefined","chipContent"],"mappings":"AAAA,SAASA,GAAG,QAAQ,YAAY;AAEhC,SAA+BC,QAAQ,QAAQ,iBAAiB;AAChE,SAASC,GAAG,QAAQ,kBAAkB;AAEtC,MAAMC,SAASD,IAAI;AA8FnB;;CAEC,GACD,OAAO,SAASE,KAAKC,UAAgC,CAAC,CAAC;IACrD,MAAM,EACJC,SAAS,EACTC,QAAQ,OAAO,EACfC,UAAU,KAAK,EACfC,WAAW,KAAK,EAChBC,WAAW,KAAK,EAChBC,iBAAiB,KAAK,EACtBC,iBAAiB,EACjBC,iBAAiB,IAAI,EACrBC,gBAAgB,EAChBC,YAAY,KAAK,EACjBC,aAAa,KAAK,EAClBC,eAAe,EAChB,GAAGZ;IAEJ,OAAOL,IACLG,OAAO;QACLe,QAAQ,CAACT,YAAYC,YAAYC;QACjCD,UAAU,CAACD,YAAYC,YAAY,CAACC;QACpCQ,OAAOZ,UAAU;QACjBa,SAASb,UAAU;QACnBE;QACA,cAAcM;QACd,eAAeC;QACfR;IACF,IACAE,YAAYE,mBACZE,kBACAb,SAAS;QACPoB,SAAS,CAACR;QACVS,WAAWb,WAAW,kBAAkBc;QACxCN;IACF,IACAX;AAEJ;AASA;;CAEC,GACD,OAAO,SAASkB,YAAYnB,UAAuC,CAAC,CAAC;IACnE,MAAM,EAAEC,SAAS,EAAE,GAAGD;IAEtB,OAAOL,IAAIG,OAAO,YAAYG;AAChC"}

package/dist/datetime/NativeDateField.d.ts

@@ -0,0 +1,24 @@
+import { type TextFieldProps } from "../form/TextField.js";
+import { type DateFieldOptions } from "./useDateField.js";
+/** @since 6.3.0 */
+export interface NativeDateFieldProps extends Omit<TextFieldProps, keyof DateFieldOptions | "value">, Omit<DateFieldOptions, "ref"> {
+}
+/**
+ * The `NativeDateField` is a simple wrapper around the `TextField` using the
+ * `useDateField` hook.
+ *
+ * @example Simple Example
+ * ```tsx
+ * import { NativeDateField } from "@react-md/core/datetime/NativeDateField";
+ * import { type ReactElement } from "react";
+ *
+ * function Example(): ReactElement {
+ *   return <NativeDateField label="Delivery Date" name="delivery" />;
+ * }
+ * ```
+ *
+ * @see {@link https://react-md.dev/components/native-time-field | NativeDateField Demos}
+ * @see {@link https://react-md.dev/components/text-field | TextField Demos}
+ * @since 6.3.0
+ */
+export declare const NativeDateField: import("react").ForwardRefExoticComponent<NativeDateFieldProps & import("react").RefAttributes<HTMLInputElement>>;

package/dist/datetime/NativeDateField.js

@@ -0,0 +1,63 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { TextField } from "../form/TextField.js";
+import { useDateField } from "./useDateField.js";
+/**
+ * The `NativeDateField` is a simple wrapper around the `TextField` using the
+ * `useDateField` hook.
+ *
+ * @example Simple Example
+ * ```tsx
+ * import { NativeDateField } from "@react-md/core/datetime/NativeDateField";
+ * import { type ReactElement } from "react";
+ *
+ * function Example(): ReactElement {
+ *   return <NativeDateField label="Delivery Date" name="delivery" />;
+ * }
+ * ```
+ *
+ * @see {@link https://react-md.dev/components/native-time-field | NativeDateField Demos}
+ * @see {@link https://react-md.dev/components/text-field | TextField Demos}
+ * @since 6.3.0
+ */ export const NativeDateField = /*#__PURE__*/ forwardRef(function NativeDateField(props, ref) {
+    const { id, min, max, step, onBlur, onInvalid, onChange, helpText, required, validationType, disableMessage, errorIcon, isErrored, getErrorIcon, getErrorMessage, onErrorChange, disableReset, defaultValue, ...remaining } = props;
+    const { name, form } = props;
+    const { fieldProps } = useDateField({
+        id,
+        ref,
+        name,
+        form,
+        min,
+        max,
+        step,
+        onBlur,
+        onChange,
+        onInvalid,
+        helpText,
+        required,
+        validationType,
+        disableMessage: disableMessage ?? (!min && !max && !step && !required),
+        errorIcon,
+        isErrored,
+        getErrorIcon,
+        getErrorMessage,
+        onErrorChange,
+        disableReset,
+        defaultValue
+    });
+    let { messageProps } = remaining;
+    if (fieldProps.messageProps) {
+        messageProps = {
+            ...fieldProps.messageProps,
+            ...remaining.messageProps
+        };
+    }
+    return /*#__PURE__*/ _jsx(TextField, {
+        ...remaining,
+        ...fieldProps,
+        messageProps: messageProps
+    });
+});
+
+//# sourceMappingURL=NativeDateField.js.map

package/dist/datetime/NativeDateField.js.map

@@ -0,0 +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"}

package/dist/datetime/NativeTimeField.d.ts

@@ -0,0 +1,26 @@
+import { type TextFieldProps } from "../form/TextField.js";
+import { type TimeFieldOptions } from "./useTimeField.js";
+/**
+ * @since 6.3.0
+ */
+export interface NativeTimeFieldProps extends Omit<TextFieldProps, keyof TimeFieldOptions | "value">, Omit<TimeFieldOptions, "ref"> {
+}
+/**
+ * The `NativeTimeField` is a simple wrapper around the `TextField` using the
+ * `useTimeField` hook.
+ *
+ * @example Simple Example
+ * ```tsx
+ * import { NativeTimeField } from "@react-md/core/datetime/NativeTimeField";
+ * import { type ReactElement } from "react";
+ *
+ * function Example(): ReactElement {
+ *   return <NativeTimeField label="Time" name="appt" />;
+ * }
+ * ```
+ *
+ * @see {@link https://react-md.dev/components/native-time-field | NativeTimeField Demos}
+ * @see {@link https://react-md.dev/components/text-field | TextField Demos}
+ * @since 6.3.0
+ */
+export declare const NativeTimeField: import("react").ForwardRefExoticComponent<NativeTimeFieldProps & import("react").RefAttributes<HTMLInputElement>>;

package/dist/datetime/NativeTimeField.js

@@ -0,0 +1,63 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { TextField } from "../form/TextField.js";
+import { useTimeField } from "./useTimeField.js";
+/**
+ * The `NativeTimeField` is a simple wrapper around the `TextField` using the
+ * `useTimeField` hook.
+ *
+ * @example Simple Example
+ * ```tsx
+ * import { NativeTimeField } from "@react-md/core/datetime/NativeTimeField";
+ * import { type ReactElement } from "react";
+ *
+ * function Example(): ReactElement {
+ *   return <NativeTimeField label="Time" name="appt" />;
+ * }
+ * ```
+ *
+ * @see {@link https://react-md.dev/components/native-time-field | NativeTimeField Demos}
+ * @see {@link https://react-md.dev/components/text-field | TextField Demos}
+ * @since 6.3.0
+ */ export const NativeTimeField = /*#__PURE__*/ forwardRef(function NativeTimeField(props, ref) {
+    const { id, min, max, step, onBlur, onInvalid, onChange, helpText, required, validationType, disableMessage, errorIcon, isErrored, getErrorIcon, getErrorMessage, onErrorChange, disableReset, defaultValue, ...remaining } = props;
+    const { name, form } = props;
+    const { fieldProps } = useTimeField({
+        id,
+        ref,
+        name,
+        form,
+        min,
+        max,
+        step,
+        onBlur,
+        onChange,
+        onInvalid,
+        helpText,
+        required,
+        validationType,
+        disableMessage: disableMessage ?? (!min && !max && !step && !required),
+        errorIcon,
+        isErrored,
+        getErrorIcon,
+        getErrorMessage,
+        onErrorChange,
+        disableReset,
+        defaultValue
+    });
+    let { messageProps } = remaining;
+    if (fieldProps.messageProps) {
+        messageProps = {
+            ...fieldProps.messageProps,
+            ...remaining.messageProps
+        };
+    }
+    return /*#__PURE__*/ _jsx(TextField, {
+        ...remaining,
+        ...fieldProps,
+        messageProps: messageProps
+    });
+});
+
+//# sourceMappingURL=NativeTimeField.js.map

package/dist/datetime/NativeTimeField.js.map

@@ -0,0 +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"}

package/dist/datetime/useDateField.d.ts

@@ -0,0 +1,120 @@
+import { type InputHTMLAttributes } from "react";
+import { type ProvidedFormMessageProps, type ProvidedTextFieldProps, type TextFieldHookOptions, type TextFieldImplementation, type TextFieldWithMessageImplementation } from "../form/useTextField.js";
+/**
+ * @since 6.3.0
+ */
+export interface DateFieldConstraints {
+    /**
+     * This **must** be in the format `yyyy-mm-dd`
+     *
+     * @see {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input/date#min | min attribute}
+     */
+    min?: string;
+    /**
+     * This **must** be in the format `yyyy-mm-dd`
+     *
+     * @see {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input/date#max | max attribute}
+     */
+    max?: string;
+    /**
+     * For date inputs, the value of step is given in days; and is treated as a
+     * number of milliseconds equal to 86,400,000 times the step value (the
+     * underlying numeric value is in milliseconds). The default value of step is
+     * 1, indicating 1 day.
+     *
+     * @see {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input/date#step | step attribute}
+     */
+    step?: number | "any";
+}
+/** @since 6.3.0 */
+export interface DateFieldOptions extends Omit<TextFieldHookOptions, "isNumber" | "counter" | "pattern" | "maxLength" | "minLength" | "disableMaxLength">, DateFieldConstraints {
+}
+/** @since 6.3.0 */
+export interface ProvidedDateFieldProps extends Omit<ProvidedTextFieldProps, "value">, Omit<DateFieldConstraints, "step"> {
+    type: "date";
+    step?: number | "any";
+    defaultValue: Required<InputHTMLAttributes<HTMLInputElement>>["defaultValue"];
+}
+/** @since 6.3.0 */
+export interface ProvidedDateFieldMessageProps extends ProvidedDateFieldProps {
+    /**
+     * These props will be defined as long as the `disableMessage` prop is not
+     * `true` from the `useTextField` hook.
+     */
+    messageProps: ProvidedFormMessageProps;
+}
+/** @since 6.3.0 */
+export interface DateFieldImplementation extends Omit<TextFieldImplementation, "fieldProps"> {
+    fieldProps: ProvidedDateFieldProps;
+}
+/** @since 6.3.0 */
+export interface DateFieldWithMessageImplementation extends Omit<TextFieldWithMessageImplementation, "fieldProps"> {
+    fieldProps: ProvidedDateFieldMessageProps;
+}
+/** @since 6.3.0 */
+export interface ValidatedDateFieldImplementation extends DateFieldImplementation {
+    fieldProps: ProvidedDateFieldProps | ProvidedDateFieldMessageProps;
+}
+/**
+ * The `useDateField` is a small wrapper around the {@link useTextField} to be used
+ * with `<input type="date" />`. It is used in the `NativeDateField` if an example
+ * implementation would like to be seen.
+ *
+ * @example Simple Example
+ * ```tsx
+ * import { useDateField } from "@react-md/core/datetime/useDateField";
+ * import { TextField } from "@react-md/core/form/TextField";
+ * import { type ReactElement } from "react";
+ *
+ * function Example(): ReactElement {
+ *   const { value, fieldProps, error, errorMessage } = useDateField({
+ *     name: "delivery",
+ *     required: true,
+ *     min: "2025-01-01",
+ *     max: "2026-01-01",
+ *     disableMessage: true,
+ *   });
+ *
+ *   // value: `""` or `"yyyy-mm-dd"`
+ *
+ *   return <TextField label="Delivery Date" {...fieldProps} />
+ * }
+ * ```
+ *
+ * @since 6.3.0
+ * @see {@link https://react-md.dev/components/native-date-field | NativeDateField Demos}
+ * @see {@link https://react-md.dev/hooks/use-date-field | useDateField Demos}
+ */
+export declare function useDateField(options: DateFieldOptions & {
+    disableMessage: true;
+}): DateFieldImplementation;
+/**
+ * The `useDateField` is a small wrapper around the {@link useTextField} to be used
+ * with `<input type="date" />`. It is used in the `NativeDateField` if an example
+ * implementation would like to be seen.
+ *
+ * @example Simple Example
+ * ```tsx
+ * import { useDateField } from "@react-md/core/datetime/useDateField";
+ * import { TextField } from "@react-md/core/form/TextField";
+ * import { type ReactElement } from "react";
+ *
+ * function Example(): ReactElement {
+ *   const { value, fieldProps } = useDateField({
+ *     name: "delivery",
+ *     required: true,
+ *     min: "2025-01-01",
+ *     max: "2026-01-01",
+ *   });
+ *
+ *   // value: `""` or `"yyyy-mm-dd"`
+ *
+ *   return <TextField label="Delivery Date" {...fieldProps} />
+ * }
+ * ```
+ *
+ * @since 6.3.0
+ * @see {@link https://react-md.dev/components/native-date-field | NativeDateField Demos}
+ * @see {@link https://react-md.dev/hooks/use-date-field | useDateField Demos}
+ */
+export declare function useDateField(options: DateFieldOptions): DateFieldWithMessageImplementation;