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

package/dist/dialog/styles.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/dialog/styles.ts"],"sourcesContent":["import { cnb } from \"cnbuilder\";\n\nimport {\n  type CSSTransitionClassNames,\n  type TransitionTimeout,\n} from \"../transition/types.js\";\nimport { bem } from \"../utils/bem.js\";\nimport { DISPLAY_NONE_CLASS } from \"../utils/isElementVisible.js\";\n\nconst styles = bem(\"rmd-dialog\");\nconst containerStyles = bem(\"rmd-dialog-container\");\n\ndeclare module \"react\" {\n  interface CSSProperties {\n    \"--rmd-dialog-background-color\"?: string;\n    \"--rmd-dialog-color\"?: string;\n    \"--rmd-dialog-min-width\"?: string | number;\n    \"--rmd-dialog-horizontal-margin\"?: string | number;\n    \"--rmd-dialog-vertical-margin\"?: string | number;\n    \"--rmd-dialog-z-index\"?: string | number;\n    \"--rmd-dialog-header-padding\"?: string | number;\n    \"--rmd-dialog-header-padding-bottom\"?: string | number;\n    \"--rmd-dialog-content-padding\"?: string | number;\n    \"--rmd-dialog-footer-padding\"?: string | number;\n  }\n}\n\nexport type DialogType = \"full-page\" | \"centered\" | \"custom\";\n\n/**\n * This can be used to enforce a specific width for dialogs instead of relying\n * on the size of the content to determine the width. The width will also ensure\n * that it does not overflow based on the viewport width and margins applied.\n *\n * For example: if the `width=\"extra-large\"` and the total viewport size is\n * `600px`, the dialog width would be `420px` since there is a default `80px`\n * margin to the left and right of the dialog. If the user expands the browser,\n * the dialog width will continue to grow until it reaches the `extra-large`\n * width and stop growing from that point.\n *\n * @since 6.0.0\n */\nexport type DialogWidth = \"auto\" | \"small\" | \"medium\" | \"large\" | \"extra-large\";\n\n/**\n * @since 6.0.0\n */\nexport interface DialogContainerClassNameOptions {\n  className?: string;\n\n  centered?: boolean;\n  displayNone?: boolean;\n}\n\n/**\n * @since 6.0.0\n */\nexport function dialogContainer(\n  options: DialogContainerClassNameOptions = {}\n): string {\n  const { className, centered, displayNone } = options;\n\n  return cnb(\n    containerStyles({ centered }),\n    displayNone && DISPLAY_NONE_CLASS,\n    className\n  );\n}\n\n/** @since 6.0.0 */\nexport interface DialogClassNameOptions {\n  className?: string;\n\n  /**\n   * @defaultValue `\"centered\"`\n   */\n  type?: DialogType;\n\n  /**\n   * @defaultValue `\"auto\"`\n   */\n  width?: DialogWidth;\n\n  /**\n   * @defaultValue `false`\n   */\n  fixed?: boolean;\n\n  /**\n   * @defaultValue `type === \"full-page\"`\n   */\n  outline?: boolean;\n\n  /**\n   * This is mostly used for handling nested dialogs and removes any box shadow\n   * on a dialog that has a child visible.\n   *\n   * @defaultValue `false`\n   */\n  disableBoxShadow?: boolean;\n}\n\n/** @since 6.0.0 */\nexport function dialog(options: DialogClassNameOptions = {}): string {\n  const {\n    type = \"centered\",\n    width,\n    fixed = false,\n    outline = type === \"full-page\",\n    disableBoxShadow,\n    className,\n  } = options;\n\n  return cnb(\n    styles({\n      fixed,\n      outline,\n      centered: type === \"centered\",\n      \"full-page\": type === \"full-page\",\n      \"no-box-shadow\": type === \"centered\" && disableBoxShadow,\n      \"s-width\": width === \"small\",\n      \"m-width\": width === \"medium\",\n      \"l-width\": width === \"large\",\n      \"xl-width\": width === \"extra-large\",\n    }),\n    className\n  );\n}\n\n/** @since 6.0.0 */\nexport interface DialogHeaderClassNameOptions {\n  className?: string;\n}\n\n/** @since 6.0.0 */\nexport function dialogHeader(\n  options: DialogHeaderClassNameOptions = {}\n): string {\n  const { className } = options;\n\n  return cnb(styles(\"header\"), className);\n}\n\n/** @since 6.0.0 */\nexport interface DialogContentClassNameOptions {\n  className?: string;\n\n  /** @defaultValue `false` */\n  disablePadding?: boolean;\n}\n\n/** @since 6.0.0 */\nexport function dialogContent(\n  options: DialogContentClassNameOptions = {}\n): string {\n  const { className, disablePadding = false } = options;\n\n  return cnb(styles(\"content\", { padded: !disablePadding }), className);\n}\n\n/**\n * An optional alignment for the content within the footer. Since the majority\n * of dialog footers are used to contain action buttons, the default alignment\n * is near the end.\n *\n * @since 3.1.0\n */\nexport type DialogFooterAlignment =\n  | \"none\"\n  | \"start\"\n  | \"end\"\n  | \"between\"\n  | \"stacked-start\"\n  | \"stacked-end\";\n\n/** @since 6.0.0 */\nexport interface DialogFooterClassNameOptions {\n  className?: string;\n\n  /** @defaultValue `\"end\"` */\n  align?: DialogFooterAlignment;\n}\n\n/** @since 6.0.0 */\nexport function dialogFooter(\n  options: DialogFooterClassNameOptions = {}\n): string {\n  const { align = \"end\", className } = options;\n\n  return cnb(\n    styles(\"footer\", {\n      flex: align !== \"none\",\n      \"flex-v\": align === \"stacked-start\" || align === \"stacked-end\",\n      start: align === \"start\" || align === \"stacked-start\",\n      between: align === \"between\",\n      end: align === \"end\" || align === \"stacked-end\",\n    }),\n    className\n  );\n}\n\n/** @since 4.0.0 */\nexport const DEFAULT_DIALOG_CLASSNAMES = {\n  appear: \"rmd-dialog--enter\",\n  appearActive: \"rmd-dialog--enter-active\",\n  enter: \"rmd-dialog--enter\",\n  enterActive: \"rmd-dialog--enter-active\",\n  exit: \"rmd-dialog--exit\",\n  exitActive: \"rmd-dialog--exit-active\",\n} as const satisfies CSSTransitionClassNames;\n\n/** @since 4.0.0 */\nexport const DEFAULT_DIALOG_TIMEOUT = {\n  enter: 200,\n  exit: 150,\n} as const satisfies TransitionTimeout;\n"],"names":["cnb","bem","DISPLAY_NONE_CLASS","styles","containerStyles","dialogContainer","options","className","centered","displayNone","dialog","type","width","fixed","outline","disableBoxShadow","dialogHeader","dialogContent","disablePadding","padded","dialogFooter","align","flex","start","between","end","DEFAULT_DIALOG_CLASSNAMES","appear","appearActive","enter","enterActive","exit","exitActive","DEFAULT_DIALOG_TIMEOUT"],"mappings":"AAAA,SAASA,GAAG,QAAQ,YAAY;AAMhC,SAASC,GAAG,QAAQ,kBAAkB;AACtC,SAASC,kBAAkB,QAAQ,+BAA+B;AAElE,MAAMC,SAASF,IAAI;AACnB,MAAMG,kBAAkBH,IAAI;AA4C5B;;CAEC,GACD,OAAO,SAASI,gBACdC,UAA2C,CAAC,CAAC;IAE7C,MAAM,EAAEC,SAAS,EAAEC,QAAQ,EAAEC,WAAW,EAAE,GAAGH;IAE7C,OAAON,IACLI,gBAAgB;QAAEI;IAAS,IAC3BC,eAAeP,oBACfK;AAEJ;AAmCA,iBAAiB,GACjB,OAAO,SAASG,OAAOJ,UAAkC,CAAC,CAAC;IACzD,MAAM,EACJK,OAAO,UAAU,EACjBC,KAAK,EACLC,QAAQ,KAAK,EACbC,UAAUH,SAAS,WAAW,EAC9BI,gBAAgB,EAChBR,SAAS,EACV,GAAGD;IAEJ,OAAON,IACLG,OAAO;QACLU;QACAC;QACAN,UAAUG,SAAS;QACnB,aAAaA,SAAS;QACtB,iBAAiBA,SAAS,cAAcI;QACxC,WAAWH,UAAU;QACrB,WAAWA,UAAU;QACrB,WAAWA,UAAU;QACrB,YAAYA,UAAU;IACxB,IACAL;AAEJ;AAOA,iBAAiB,GACjB,OAAO,SAASS,aACdV,UAAwC,CAAC,CAAC;IAE1C,MAAM,EAAEC,SAAS,EAAE,GAAGD;IAEtB,OAAON,IAAIG,OAAO,WAAWI;AAC/B;AAUA,iBAAiB,GACjB,OAAO,SAASU,cACdX,UAAyC,CAAC,CAAC;IAE3C,MAAM,EAAEC,SAAS,EAAEW,iBAAiB,KAAK,EAAE,GAAGZ;IAE9C,OAAON,IAAIG,OAAO,WAAW;QAAEgB,QAAQ,CAACD;IAAe,IAAIX;AAC7D;AAyBA,iBAAiB,GACjB,OAAO,SAASa,aACdd,UAAwC,CAAC,CAAC;IAE1C,MAAM,EAAEe,QAAQ,KAAK,EAAEd,SAAS,EAAE,GAAGD;IAErC,OAAON,IACLG,OAAO,UAAU;QACfmB,MAAMD,UAAU;QAChB,UAAUA,UAAU,mBAAmBA,UAAU;QACjDE,OAAOF,UAAU,WAAWA,UAAU;QACtCG,SAASH,UAAU;QACnBI,KAAKJ,UAAU,SAASA,UAAU;IACpC,IACAd;AAEJ;AAEA,iBAAiB,GACjB,OAAO,MAAMmB,4BAA4B;IACvCC,QAAQ;IACRC,cAAc;IACdC,OAAO;IACPC,aAAa;IACbC,MAAM;IACNC,YAAY;AACd,EAA6C;AAE7C,iBAAiB,GACjB,OAAO,MAAMC,yBAAyB;IACpCJ,OAAO;IACPE,MAAM;AACR,EAAuC"}
+{"version":3,"sources":["../../src/dialog/styles.ts"],"sourcesContent":["import { cnb } from \"cnbuilder\";\n\nimport {\n  type CSSTransitionClassNames,\n  type TransitionTimeout,\n} from \"../transition/types.js\";\nimport { bem } from \"../utils/bem.js\";\nimport { DISPLAY_NONE_CLASS } from \"../utils/isElementVisible.js\";\n\ndeclare module \"react\" {\n  interface CSSProperties {\n    \"--rmd-dialog-background-color\"?: string;\n    \"--rmd-dialog-color\"?: string;\n    \"--rmd-dialog-min-width\"?: string | number;\n    \"--rmd-dialog-horizontal-margin\"?: string | number;\n    \"--rmd-dialog-vertical-margin\"?: string | number;\n    \"--rmd-dialog-z-index\"?: string | number;\n    \"--rmd-dialog-header-padding\"?: string | number;\n    \"--rmd-dialog-header-padding-bottom\"?: string | number;\n    \"--rmd-dialog-content-padding\"?: string | number;\n    \"--rmd-dialog-footer-padding\"?: string | number;\n  }\n}\n\nconst styles = bem(\"rmd-dialog\");\nconst containerStyles = bem(\"rmd-dialog-container\");\n\nexport type DialogType = \"full-page\" | \"centered\" | \"custom\";\n\n/**\n * This can be used to enforce a specific width for dialogs instead of relying\n * on the size of the content to determine the width. The width will also ensure\n * that it does not overflow based on the viewport width and margins applied.\n *\n * For example: if the `width=\"extra-large\"` and the total viewport size is\n * `600px`, the dialog width would be `420px` since there is a default `80px`\n * margin to the left and right of the dialog. If the user expands the browser,\n * the dialog width will continue to grow until it reaches the `extra-large`\n * width and stop growing from that point.\n *\n * @since 6.0.0\n */\nexport type DialogWidth = \"auto\" | \"small\" | \"medium\" | \"large\" | \"extra-large\";\n\n/**\n * @since 6.0.0\n */\nexport interface DialogContainerClassNameOptions {\n  className?: string;\n\n  centered?: boolean;\n  displayNone?: boolean;\n}\n\n/**\n * @since 6.0.0\n */\nexport function dialogContainer(\n  options: DialogContainerClassNameOptions = {}\n): string {\n  const { className, centered, displayNone } = options;\n\n  return cnb(\n    containerStyles({ centered }),\n    displayNone && DISPLAY_NONE_CLASS,\n    className\n  );\n}\n\n/** @since 6.0.0 */\nexport interface DialogClassNameOptions {\n  className?: string;\n\n  /**\n   * @defaultValue `\"centered\"`\n   */\n  type?: DialogType;\n\n  /**\n   * @defaultValue `\"auto\"`\n   */\n  width?: DialogWidth;\n\n  /**\n   * @defaultValue `false`\n   */\n  fixed?: boolean;\n\n  /**\n   * @defaultValue `type === \"full-page\"`\n   */\n  outline?: boolean;\n\n  /**\n   * This is mostly used for handling nested dialogs and removes any box shadow\n   * on a dialog that has a child visible.\n   *\n   * @defaultValue `false`\n   */\n  disableBoxShadow?: boolean;\n}\n\n/** @since 6.0.0 */\nexport function dialog(options: DialogClassNameOptions = {}): string {\n  const {\n    type = \"centered\",\n    width,\n    fixed = false,\n    outline = type === \"full-page\",\n    disableBoxShadow,\n    className,\n  } = options;\n\n  return cnb(\n    styles({\n      fixed,\n      outline,\n      centered: type === \"centered\",\n      \"full-page\": type === \"full-page\",\n      \"no-box-shadow\": type === \"centered\" && disableBoxShadow,\n      \"s-width\": width === \"small\",\n      \"m-width\": width === \"medium\",\n      \"l-width\": width === \"large\",\n      \"xl-width\": width === \"extra-large\",\n    }),\n    className\n  );\n}\n\n/** @since 6.0.0 */\nexport interface DialogHeaderClassNameOptions {\n  className?: string;\n}\n\n/**\n * NOTE: The default `DialogHeader` component uses the `Box` component so the\n * `box` class name utility function or `Box` component will probably be\n * required if using this util\n *\n * @since 6.0.0\n */\nexport function dialogHeader(\n  options: DialogHeaderClassNameOptions = {}\n): string {\n  const { className } = options;\n\n  return cnb(styles(\"header\"), className);\n}\n\n/** @since 6.0.0 */\nexport interface DialogContentClassNameOptions {\n  className?: string;\n\n  /** @defaultValue `false` */\n  disablePadding?: boolean;\n}\n\n/** @since 6.0.0 */\nexport function dialogContent(\n  options: DialogContentClassNameOptions = {}\n): string {\n  const { className, disablePadding = false } = options;\n\n  return cnb(styles(\"content\", { padded: !disablePadding }), className);\n}\n\n/**\n * An optional alignment for the content within the footer. Since the majority\n * of dialog footers are used to contain action buttons, the default alignment\n * is near the end.\n *\n * @since 3.1.0\n */\nexport type DialogFooterAlignment =\n  | \"none\"\n  | \"start\"\n  | \"end\"\n  | \"between\"\n  | \"stacked-start\"\n  | \"stacked-end\";\n\n/** @since 6.0.0 */\nexport interface DialogFooterClassNameOptions {\n  className?: string;\n\n  /** @defaultValue `\"end\"` */\n  align?: DialogFooterAlignment;\n}\n\n/** @since 6.0.0 */\nexport function dialogFooter(\n  options: DialogFooterClassNameOptions = {}\n): string {\n  const { align = \"end\", className } = options;\n\n  return cnb(\n    styles(\"footer\", {\n      flex: align !== \"none\",\n      \"flex-v\": align === \"stacked-start\" || align === \"stacked-end\",\n      start: align === \"start\" || align === \"stacked-start\",\n      between: align === \"between\",\n      end: align === \"end\" || align === \"stacked-end\",\n    }),\n    className\n  );\n}\n\n/** @since 4.0.0 */\nexport const DEFAULT_DIALOG_TIMEOUT = {\n  enter: 200,\n  exit: 150,\n} as const satisfies TransitionTimeout;\n\n/** @since 4.0.0 */\nexport const DEFAULT_DIALOG_CLASSNAMES = {\n  appear: \"rmd-dialog--enter\",\n  appearActive: \"rmd-dialog--enter-active\",\n  enter: \"rmd-dialog--enter\",\n  enterActive: \"rmd-dialog--enter-active\",\n  exit: \"rmd-dialog--exit\",\n  exitActive: \"rmd-dialog--exit-active\",\n} as const satisfies CSSTransitionClassNames;\n"],"names":["cnb","bem","DISPLAY_NONE_CLASS","styles","containerStyles","dialogContainer","options","className","centered","displayNone","dialog","type","width","fixed","outline","disableBoxShadow","dialogHeader","dialogContent","disablePadding","padded","dialogFooter","align","flex","start","between","end","DEFAULT_DIALOG_TIMEOUT","enter","exit","DEFAULT_DIALOG_CLASSNAMES","appear","appearActive","enterActive","exitActive"],"mappings":"AAAA,SAASA,GAAG,QAAQ,YAAY;AAMhC,SAASC,GAAG,QAAQ,kBAAkB;AACtC,SAASC,kBAAkB,QAAQ,+BAA+B;AAiBlE,MAAMC,SAASF,IAAI;AACnB,MAAMG,kBAAkBH,IAAI;AA6B5B;;CAEC,GACD,OAAO,SAASI,gBACdC,UAA2C,CAAC,CAAC;IAE7C,MAAM,EAAEC,SAAS,EAAEC,QAAQ,EAAEC,WAAW,EAAE,GAAGH;IAE7C,OAAON,IACLI,gBAAgB;QAAEI;IAAS,IAC3BC,eAAeP,oBACfK;AAEJ;AAmCA,iBAAiB,GACjB,OAAO,SAASG,OAAOJ,UAAkC,CAAC,CAAC;IACzD,MAAM,EACJK,OAAO,UAAU,EACjBC,KAAK,EACLC,QAAQ,KAAK,EACbC,UAAUH,SAAS,WAAW,EAC9BI,gBAAgB,EAChBR,SAAS,EACV,GAAGD;IAEJ,OAAON,IACLG,OAAO;QACLU;QACAC;QACAN,UAAUG,SAAS;QACnB,aAAaA,SAAS;QACtB,iBAAiBA,SAAS,cAAcI;QACxC,WAAWH,UAAU;QACrB,WAAWA,UAAU;QACrB,WAAWA,UAAU;QACrB,YAAYA,UAAU;IACxB,IACAL;AAEJ;AAOA;;;;;;CAMC,GACD,OAAO,SAASS,aACdV,UAAwC,CAAC,CAAC;IAE1C,MAAM,EAAEC,SAAS,EAAE,GAAGD;IAEtB,OAAON,IAAIG,OAAO,WAAWI;AAC/B;AAUA,iBAAiB,GACjB,OAAO,SAASU,cACdX,UAAyC,CAAC,CAAC;IAE3C,MAAM,EAAEC,SAAS,EAAEW,iBAAiB,KAAK,EAAE,GAAGZ;IAE9C,OAAON,IAAIG,OAAO,WAAW;QAAEgB,QAAQ,CAACD;IAAe,IAAIX;AAC7D;AAyBA,iBAAiB,GACjB,OAAO,SAASa,aACdd,UAAwC,CAAC,CAAC;IAE1C,MAAM,EAAEe,QAAQ,KAAK,EAAEd,SAAS,EAAE,GAAGD;IAErC,OAAON,IACLG,OAAO,UAAU;QACfmB,MAAMD,UAAU;QAChB,UAAUA,UAAU,mBAAmBA,UAAU;QACjDE,OAAOF,UAAU,WAAWA,UAAU;QACtCG,SAASH,UAAU;QACnBI,KAAKJ,UAAU,SAASA,UAAU;IACpC,IACAd;AAEJ;AAEA,iBAAiB,GACjB,OAAO,MAAMmB,yBAAyB;IACpCC,OAAO;IACPC,MAAM;AACR,EAAuC;AAEvC,iBAAiB,GACjB,OAAO,MAAMC,4BAA4B;IACvCC,QAAQ;IACRC,cAAc;IACdJ,OAAO;IACPK,aAAa;IACbJ,MAAM;IACNK,YAAY;AACd,EAA6C"}

package/dist/divider/Divider.d.ts

@@ -9,12 +9,14 @@ export interface DividerProps extends HTMLAttributes<DividerElement>, DividerCla
 /**
  * @example Simple Example
  * ```tsx
- * import { Divider } from "@react-md/core";
+ * import { Divider } from "@react-md/core/divider/Divider";
  * import type { ReactElement } from "react";
  *
  * function Example(): ReactElement {
  *   return  <Divider />;
  * }
  * ```
+ *
+ * @see {@link https://next.react-md.dev/components/divider | Divider Demos}
  */
 export declare const Divider: import("react").ForwardRefExoticComponent<DividerProps & import("react").RefAttributes<DividerElement>>;

package/dist/divider/Divider.js

@@ -4,13 +4,15 @@ import { divider } from "./styles.js";
 /**
  * @example Simple Example
  * ```tsx
- * import { Divider } from "@react-md/core";
+ * import { Divider } from "@react-md/core/divider/Divider";
  * import type { ReactElement } from "react";
  *
  * function Example(): ReactElement {
  *   return  <Divider />;
  * }
  * ```
+ *
+ * @see {@link https://next.react-md.dev/components/divider | Divider Demos}
  */ export const Divider = /*#__PURE__*/ forwardRef(function Divider(props, ref) {
     const { inset = false, vertical = false, role = "separator", className, ...remaining } = props;
     const Component = vertical ? "div" : "hr";

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\";\n * import type { ReactElement } from \"react\";\n *\n * function Example(): ReactElement {\n *   return  <Divider />;\n * }\n * ```\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;;;;;;;;;;CAUC,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>,\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://next.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"}

package/dist/divider/_divider.scss

@@ -1,24 +1,73 @@
+////
+/// @group divider
+////
+
 @use "sass:map";
 @use "../utils";
 @use "../theme/theme";
 @use "../theme/colors";
 
+/// Set to `true` to disable all the styles
+/// @type Boolean
 $disable-everything: false !default;
+
+/// Set to `true` if the `vertical` prop will never be enabled on the `Divider`
+/// component.
+///
+/// @type Boolean
 $disable-vertical: false !default;
+
+/// Set to `true` if the `inset` prop will never be enabled on the `Divider`
+/// component.
+///
+/// @type Boolean
 $disable-inset: false !default;
 
+/// The default `height` while horizontal or `width` while vertical.
+///
+/// @type Number
 $size: 0.0625em !default;
+
+/// The default `border-width` when using the `divider-border-style` mixin.
+///
+/// @type Number
 $border-size: $size * 2 !default;
+
+/// The `max-width` while horizontal or `max-height` while vertical.
+///
+/// @type Number
 $max-size: 100% !default;
+
+/// The default `margin-left` to apply when the `inset` prop is enabled.
+///
+/// @type Number
 $inset: 4rem !default;
+
+/// The default margin to apply to the horizontal `Divider`.
+///
+/// @type Number
 $spacing: 0.25rem auto !default;
+
+/// The default margin to apply to the vertical `Divider`.
+///
+/// @type Number
 $vertical-spacing: auto 0.25rem !default;
 
+/// The `Divider` color in light themes.
+/// @type Color
 $light-theme-color: rgba(colors.$black, 0.12) !default;
+
+/// The `Divider` color in dark themes.
+/// @type Color
 $dark-theme-color: rgba(colors.$white, 0.12) !default;
 
+/// The default `Divider` color
+/// @type Color
 $color: theme.get-default-color($light-theme-color, $dark-theme-color) !default;
 
+/// The available configurable css variables and mostly used internally for the
+/// `get-var`, `set-var`, and `use-var` utils.
+/// @type List
 $variables: (
   size,
   border-size,
@@ -29,6 +78,9 @@ $variables: (
   max-size
 );
 
+/// @param {String} name - The supported variable name
+/// @param {any} fallback [null] - An optional fallback value
+/// @returns {String} a `var()` statement
 @function get-var($name, $fallback: null) {
   $var: utils.get-var-name($variables, $name, "divider");
   @if $fallback {
@@ -38,28 +90,39 @@ $variables: (
   @return var(#{$var});
 }
 
+/// @param {String} name - The supported variable name
+/// @param {any} value - The value to set the variable to. Supports `null` which
+/// will just be a no-op.
 @mixin set-var($name, $value) {
   @if $value {
     #{utils.get-var-name($variables, $name, "divider")}: #{$value};
   }
 }
 
+/// @param {String} property - The css property to apply the variable to
+/// @param {String} name [$property] - The supported variable name
+/// @param {any} fallback [null] - An optional fallback value if the variable
+/// has not been set
 @mixin use-var($property, $name: $property, $fallback: null) {
   #{$property}: get-var($name, $fallback);
 }
 
+/// Applies the light the variables based on feature flags
 @mixin use-light-theme {
   @if not $disable-everything {
     @include set-var(color, $light-theme-color);
   }
 }
 
+/// Applies the dark the variables based on feature flags
 @mixin use-dark-theme {
   @if not $disable-everything {
     @include set-var(color, $dark-theme-color);
   }
 }
 
+/// @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);
@@ -67,6 +130,7 @@ $variables: (
   #{$property}: get-var($var-name) solid get-var(color);
 }
 
+/// Conditionally applies the css variables based on feature flags
 @mixin variables {
   @if not $disable-everything {
     @include set-var(size, $size);
@@ -85,6 +149,10 @@ $variables: (
   }
 }
 
+/// Generates all the styles based on feature flags.
+///
+/// @param {Boolean} disable-layer [false] - Set this to `true` to disable the
+/// layer behavior
 @mixin styles($disable-layer: false) {
   @if not $disable-everything {
     @include utils.optional-layer(divider, $disable-layer) {

package/dist/divider/styles.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/divider/styles.ts"],"sourcesContent":["import { cnb } from \"cnbuilder\";\n\nimport { bem } from \"../utils/bem.js\";\n\nconst styles = bem(\"rmd-divider\");\n\ndeclare module \"react\" {\n  interface CSSProperties {\n    \"--rmd-divider-size\"?: string | number;\n    \"--rmd-divider-vertical-size\"?: string | number;\n    \"--rmd-divider-color\"?: string;\n    \"--rmd-divider-spacing\"?: string | number;\n    \"--rmd-divider-vertical-spacing\"?: string | number;\n    \"--rmd-divider-inset\"?: string | number;\n    \"--rmd-divider-max-size\"?: string | number;\n  }\n}\n\n/** @since 6.0.0 */\nexport interface DividerClassNameOptions {\n  className?: string;\n\n  /**\n   * Boolean if the divider should appear inset instead of full width. This\n   * really just applied a margin-left (or margin-right when dir=\"rtl\").\n   *\n   * If you want to create a divider that is centered, you most likely want to\n   * use the `rmd-divider-theme-update-var` mixin instead to update the\n   * `max-size` of the divider.\n   *\n   * @defaultValue `false`\n   */\n  inset?: boolean;\n\n  /**\n   * Boolean if the divider should be vertical instead of horizontal. This will\n   * change the divider to be rendered as a `<div>` instead of an `<hr>`.\n   *\n   * Note: If your parent element of the divider does not have a static height\n   * set, you **must** manually set the height of the divider to a static\n   * non-percentage number OR use the `VerticalDivider` component instead to\n   * automagically create a valid percentage height.\n   *\n   * @defaultValue `false`\n   */\n  vertical?: boolean;\n}\n\n/**\n * @since 6.0.0\n */\nexport function divider(options: DividerClassNameOptions = {}): string {\n  const { inset = false, vertical = false, className } = options;\n\n  return cnb(\n    styles({\n      inset: inset && !vertical,\n      vertical,\n    }),\n    className\n  );\n}\n"],"names":["cnb","bem","styles","divider","options","inset","vertical","className"],"mappings":"AAAA,SAASA,GAAG,QAAQ,YAAY;AAEhC,SAASC,GAAG,QAAQ,kBAAkB;AAEtC,MAAMC,SAASD,IAAI;AA4CnB;;CAEC,GACD,OAAO,SAASE,QAAQC,UAAmC,CAAC,CAAC;IAC3D,MAAM,EAAEC,QAAQ,KAAK,EAAEC,WAAW,KAAK,EAAEC,SAAS,EAAE,GAAGH;IAEvD,OAAOJ,IACLE,OAAO;QACLG,OAAOA,SAAS,CAACC;QACjBA;IACF,IACAC;AAEJ"}
+{"version":3,"sources":["../../src/divider/styles.ts"],"sourcesContent":["import { cnb } from \"cnbuilder\";\n\nimport { bem } from \"../utils/bem.js\";\n\ndeclare module \"react\" {\n  interface CSSProperties {\n    \"--rmd-divider-size\"?: string | number;\n    \"--rmd-divider-vertical-size\"?: string | number;\n    \"--rmd-divider-color\"?: string;\n    \"--rmd-divider-spacing\"?: string | number;\n    \"--rmd-divider-vertical-spacing\"?: string | number;\n    \"--rmd-divider-inset\"?: string | number;\n    \"--rmd-divider-max-size\"?: string | number;\n  }\n}\n\nconst styles = bem(\"rmd-divider\");\n\n/** @since 6.0.0 */\nexport interface DividerClassNameOptions {\n  className?: string;\n\n  /**\n   * Boolean if the divider should appear inset instead of full width. This\n   * really just applied a margin-left (or margin-right when dir=\"rtl\").\n   *\n   * If you want to create a divider that is centered, you most likely want to\n   * use the `rmd-divider-theme-update-var` mixin instead to update the\n   * `max-size` of the divider.\n   *\n   * @defaultValue `false`\n   */\n  inset?: boolean;\n\n  /**\n   * Boolean if the divider should be vertical instead of horizontal. This will\n   * change the divider to be rendered as a `<div>` instead of an `<hr>`.\n   *\n   * Note: If your parent element of the divider does not have a static height\n   * set, you **must** manually set the height of the divider to a static\n   * non-percentage number OR use the `VerticalDivider` component instead to\n   * automagically create a valid percentage height.\n   *\n   * @defaultValue `false`\n   */\n  vertical?: boolean;\n}\n\n/**\n * @since 6.0.0\n */\nexport function divider(options: DividerClassNameOptions = {}): string {\n  const { inset = false, vertical = false, className } = options;\n\n  return cnb(\n    styles({\n      inset: inset && !vertical,\n      vertical,\n    }),\n    className\n  );\n}\n"],"names":["cnb","bem","styles","divider","options","inset","vertical","className"],"mappings":"AAAA,SAASA,GAAG,QAAQ,YAAY;AAEhC,SAASC,GAAG,QAAQ,kBAAkB;AActC,MAAMC,SAASD,IAAI;AAgCnB;;CAEC,GACD,OAAO,SAASE,QAAQC,UAAmC,CAAC,CAAC;IAC3D,MAAM,EAAEC,QAAQ,KAAK,EAAEC,WAAW,KAAK,EAAEC,SAAS,EAAE,GAAGH;IAEvD,OAAOJ,IACLE,OAAO;QACLG,OAAOA,SAAS,CAACC;QACjBA;IACF,IACAC;AAEJ"}

package/dist/draggable/_draggable.scss

@@ -1,9 +1,25 @@
+////
+/// @group draggable
+////
+
 @use "../utils";
 
+/// Set to `true` to disable all the styles
+/// @type Boolean
 $disable-everything: false !default;
+
+/// Set to `true` to disable the horizontal draggable styles
+/// @type Boolean
 $disable-horizontal: false !default;
+
+/// Set to `true` to disable the vertical draggable styles
+/// @type Boolean
 $disable-vertical: false !default;
 
+/// Generates all the styles based on feature flags.
+///
+/// @param {Boolean} disable-layer [false] - Set this to `true` to disable the
+/// layer behavior
 @mixin styles($disable-layer: false) {
   @if not $disable-everything {
     @include utils.optional-layer(draggable, $disable-layer) {

package/dist/draggable/useDraggable.d.ts

@@ -259,6 +259,7 @@ export interface DraggableImplementation<E extends HTMLElement = HTMLElement> ex
  * NOTE: This requires `touch-action: none` to be applied to the draggable
  * element to help prevent page scrolling on mobile devices.
  *
+ * @see {@link https://next.react-md.dev/components/use-draggable | useDraggable Demos}
  * @since 6.0.0
  */
 export declare function useDraggable<E extends HTMLElement>(options: DraggableOptions<E>): DraggableImplementation<E>;

package/dist/draggable/useDraggable.js

@@ -26,6 +26,7 @@ const noop = ()=>{
  * NOTE: This requires `touch-action: none` to be applied to the draggable
  * element to help prevent page scrolling on mobile devices.
  *
+ * @see {@link https://next.react-md.dev/components/use-draggable | useDraggable Demos}
  * @since 6.0.0
  */ export function useDraggable(options) {
     const { ref: propRef, min, max, rangeMin = min, rangeMax = max, step = 1, reversed = false, vertical = false, onKeyDown = noop, onMouseUp = noop, onMouseDown = noop, onMouseMove = noop, onTouchStart = noop, onTouchMove = noop, dragging: propDragging, setDragging: propSetDragging, value: propValue, setValue: propSetValue, defaultValue, withinOffsetParent = false, disabled = false, disableDraggingClassName = false, disableDraggingCursorClassName = disableDraggingClassName } = options;

package/dist/draggable/useDraggable.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/draggable/useDraggable.ts"],"sourcesContent":["\"use client\";\n\nimport { cnb } from \"cnbuilder\";\nimport {\n  type HTMLAttributes,\n  type Ref,\n  type RefCallback,\n  useCallback,\n  useEffect,\n  useRef,\n  useState,\n} from \"react\";\n\nimport { useUserInteractionMode } from \"../interaction/UserInteractionModeProvider.js\";\nimport { useScrollLock } from \"../scroll/useScrollLock.js\";\nimport {\n  type NonNullRef,\n  type UseStateInitializer,\n  type UseStateSetter,\n} from \"../types.js\";\nimport { useDir } from \"../typography/WritingDirectionProvider.js\";\nimport { useEnsuredRef } from \"../useEnsuredRef.js\";\nimport { useEnsuredState } from \"../useEnsuredState.js\";\nimport { useHtmlClassName } from \"../useHtmlClassName.js\";\nimport { getPercentage } from \"../utils/getPercentage.js\";\nimport { getRangeDefaultValue } from \"../utils/getRangeDefaultValue.js\";\nimport { getRangeSteps } from \"../utils/getRangeSteps.js\";\nimport { nearest } from \"../utils/nearest.js\";\nimport { withinRange } from \"../utils/withinRange.js\";\nimport {\n  isMouseDragStartEvent,\n  isTouchDragStartEvent,\n  updateDragPosition,\n} from \"./utils.js\";\n\nconst noop = (): void => {\n  // do nothing\n};\n\n/**\n * @since 6.0.0\n */\nexport type DraggableTouchEventHandlers<E extends HTMLElement> = Pick<\n  HTMLAttributes<E>,\n  \"onTouchStart\" | \"onTouchMove\"\n>;\n\n/**\n * @since 6.0.0\n */\nexport type DraggableMouseEventHandlers<E extends HTMLElement> = Pick<\n  HTMLAttributes<E>,\n  \"onMouseDown\" | \"onMouseUp\" | \"onMouseMove\"\n>;\n\n/**\n * @since 6.0.0\n */\nexport type DraggableKeyboardEventHandlers<E extends HTMLElement> = Pick<\n  HTMLAttributes<E>,\n  \"onKeyDown\"\n>;\n\n/**\n * @since 6.0.0\n */\nexport type DraggableEventHandlers<E extends HTMLElement> =\n  DraggableTouchEventHandlers<E> &\n    DraggableMouseEventHandlers<E> &\n    DraggableKeyboardEventHandlers<E>;\n\n/**\n * @since 6.0.0\n */\nexport interface ControllableDraggableStateOptions {\n  value?: number;\n  setValue?: UseStateSetter<number>;\n  defaultValue?: UseStateInitializer<number>;\n  dragging?: boolean;\n  setDragging?: UseStateSetter<boolean>;\n}\n\n/**\n * @since 6.0.0\n */\nexport interface BaseDraggableOptions<E extends HTMLElement>\n  extends DraggableEventHandlers<E>,\n    ControllableDraggableStateOptions {\n  /**\n   * An optional ref to merge with the returned\n   * {@link DraggableImplementation.draggableRef}.\n   */\n  ref?: Ref<E>;\n\n  /**\n   * The minimum number of pixels allowed for the draggable element. This must\n   * be a number greater than or equal to 0.\n   *\n   * When {@link withinOffsetParent} is set to `true`, this is the minimum value\n   * allowed instead of pixels.\n   */\n  min: number;\n\n  /**\n   * The maximum number of pixels allowed for the draggable element. This must\n   * be a number greater than the {@link min} and usually a number less than the\n   * viewport size.\n   *\n   * When {@link withinOffsetParent} is set to `true`, this is the maximum value\n   * allowed instead of pixels.\n   */\n  max: number;\n\n  /**\n   * The amount to increment or decrement the value with arrow keys.\n   *\n   * @defaultValue `1`\n   */\n  step?: number;\n\n  /**\n   * This was added to support range sliders where there are two (or more)\n   * draggable elements within the same container element and their values\n   * cannot pass each other. Without these overrides, the range would keep\n   * changing as the other values change, so the drag percentage would be\n   * incorrect.\n   *\n   * @example Range Slider\n   * ```ts\n   * const min = 0;\n   * const max = 100;\n   * const minValue = 3;\n   * const maxValue = 80;\n   *\n   * const minValueDraggable = useDraggable({\n   *   min,\n   *   max,\n   *   rangeMax: maxValue,\n   * });\n   * const maxValueDraggable = useDraggable({\n   *   min,\n   *   max,\n   *   rangeMin: minValue,\n   * });\n   * ```\n   *\n   * @defaultValue `min`\n   */\n  rangeMin?: number;\n\n  /**\n   * @see {@link rangeMin} for an explanation of this option.\n   * @defaultValue `max`\n   */\n  rangeMax?: number;\n\n  /**\n   * Set this to `true` to enable dragging vertically instead of horizontally.\n   *\n   * @defaultValue `false`\n   */\n  vertical?: boolean;\n\n  /**\n   * The default drag behavior is to increase the value when:\n   *\n   * - dragging `\"right\"` and the writing direction is `\"ltr\"`\n   * - dragging `\"left\"` and the writing direction is `\"rtl\"`\n   * - dragging `\"upwards\"`\n   *\n   * When this is set to `true`, the value when increase when:\n   *\n   * - dragging `\"left\"` and the writing direction is `\"ltr\"`\n   * - dragging `\"right\"` and the writing direction is `\"rtl\"`\n   * - dragging `\"downwards\"`\n   *\n   * @defaultValue `false`\n   */\n  reversed?: boolean;\n\n  /**\n   * Set this to `true` to disable all drag behavior. This will still call any\n   * of the provided {@link DraggableEventHandlers}.\n   *\n   * @defaultValue `false`\n   */\n  disabled?: boolean;\n\n  /**\n   * Set this to `true` if the dragging calculations should be to the\n   * `draggableRef.current.offsetParent` instead of the entire window. The main\n   * use case for this is sliders.\n   *\n   * @defaultValue `false`\n   */\n  withinOffsetParent?: boolean;\n\n  /**\n   * Set this to `true` to prevent the `document.documentElement` from gaining\n   * the `.rmd-dragging` class names while dragging.\n   *\n   * This should normally remain as `false` to improve performance and prevent\n   * other mouse events from firing while dragging.\n   *\n   * @defaultValue `false`\n   */\n  disableDraggingClassName?: boolean;\n\n  /**\n   * Set this to `true` to prevent the vertical or horizontal cursor from\n   * appearing while dragging.\n   *\n   * @defaultValue `false`\n   */\n  disableDraggingCursorClassName?: boolean;\n}\n\n/**\n * @since 6.0.0\n */\nexport interface UncontrolledDraggableOptions {\n  value?: never;\n  setValue?: never;\n  dragging?: never;\n  setDragging?: never;\n}\n\n/**\n * @since 6.0.0\n */\nexport interface ControlledValueDraggableOptions {\n  value: number;\n  setValue: UseStateSetter<number>;\n  defaultValue?: never;\n  dragging?: never;\n  setDragging?: never;\n}\n\n/**\n * @since 6.0.0\n */\nexport interface ControlledDraggingDraggableOptions {\n  value?: never;\n  setValue?: never;\n  defaultValue?: never;\n  dragging: boolean;\n  setDragging: UseStateSetter<boolean>;\n}\n\n/**\n * @since 6.0.0\n */\nexport interface FullyControlledDraggableOptions {\n  value: number;\n  setValue: UseStateSetter<number>;\n  dragging: boolean;\n  setDragging: UseStateSetter<boolean>;\n}\n\n/**\n * @since 6.0.0\n */\nexport type DraggableStateOptions =\n  | UncontrolledDraggableOptions\n  | ControlledValueDraggableOptions\n  | ControlledDraggingDraggableOptions\n  | FullyControlledDraggableOptions;\n\n/**\n * @since 6.0.0\n */\nexport type DraggableOptions<E extends HTMLElement = HTMLElement> =\n  BaseDraggableOptions<E> & DraggableStateOptions;\n\n/**\n * @since 6.0.0\n */\nexport interface DraggableImplementation<E extends HTMLElement = HTMLElement>\n  extends Required<DraggableEventHandlers<E>> {\n  mouseEventHandlers: Required<DraggableMouseEventHandlers<E>>;\n  touchEventHandlers: Required<DraggableTouchEventHandlers<E>>;\n  keyboardEventHandlers: Required<DraggableKeyboardEventHandlers<E>>;\n\n  /**\n   * Set the {@link value} to {@link DraggableOptions.min}.\n   */\n  minimum: () => void;\n\n  /**\n   * Set the {@link value} to {@link DraggableOptions.max}.\n   */\n  maximum: () => void;\n\n  /**\n   * Increment the {@link value} by {@link DraggableOptions.step}.\n   */\n  increment: () => void;\n\n  /**\n   * Decrement the {@link value} by {@link DraggableOptions.step}.\n   */\n  decrement: () => void;\n\n  /**\n   * The current percentage the `value` is within the range.\n   *\n   * ```ts\n   * const percentage =\n   *   dragging && withinOffsetParent\n   *     ? : dragPercentage\n   *     : getPercentage({ min, max, value });\n   * ```\n   */\n  percentage: number;\n\n  /**\n   * A ref that **Must** be passed to the element that should be draggable.\n   */\n  draggableRef: RefCallback<E>;\n\n  /**\n   * This value will only update while dragging with a mouse or touch and should\n   * be used for the positioning styles while dragging.\n   *\n   * Note: The {@link percentage} will use this value while dragging.\n   */\n  dragPercentage: number;\n\n  /**\n   * Flag to determine if the user has dragged at least once. Used internally\n   * for manually persisting the value into local storage once the user has\n   * stopped dragging.\n   */\n  draggedOnce: NonNullRef<boolean>;\n\n  value: number;\n  setValue: UseStateSetter<number>;\n  dragging: boolean;\n  setDragging: UseStateSetter<boolean>;\n}\n\n/**\n * This is most likely an internal only hook that provides the functionality for\n * dragging an element through mouse, touch, and keyboard events. The main use\n * cases so far for this hook are:\n * - window splitters\n * - sliders\n *\n * NOTE: This requires `touch-action: none` to be applied to the draggable\n * element to help prevent page scrolling on mobile devices.\n *\n * @since 6.0.0\n */\nexport function useDraggable<E extends HTMLElement>(\n  options: DraggableOptions<E>\n): DraggableImplementation<E> {\n  const {\n    ref: propRef,\n    min,\n    max,\n    rangeMin = min,\n    rangeMax = max,\n    step = 1,\n    reversed = false,\n    vertical = false,\n    onKeyDown = noop,\n    onMouseUp = noop,\n    onMouseDown = noop,\n    onMouseMove = noop,\n    onTouchStart = noop,\n    onTouchMove = noop,\n    dragging: propDragging,\n    setDragging: propSetDragging,\n    value: propValue,\n    setValue: propSetValue,\n    defaultValue,\n    withinOffsetParent = false,\n    disabled = false,\n    disableDraggingClassName = false,\n    disableDraggingCursorClassName = disableDraggingClassName,\n  } = options;\n\n  const [nodeRef, ref] = useEnsuredRef(propRef);\n  const isTouch = useUserInteractionMode() === \"touch\";\n  const draggingRef = useRef(false);\n  const [dragPercentage, setDragPercentage] = useState(min);\n  const [value, setValue] = useEnsuredState({\n    value: propValue,\n    setValue: propSetValue,\n    defaultValue: getRangeDefaultValue({\n      min,\n      max,\n      step: 1,\n      defaultValue,\n    }),\n  });\n  const [dragging, setDragging] = useEnsuredState({\n    value: propDragging,\n    setValue: propSetDragging,\n    defaultValue: false,\n  });\n\n  const isRTL = useDir().dir === \"rtl\";\n  const percentage =\n    dragging && withinOffsetParent\n      ? dragPercentage\n      : getPercentage({ min, max, value });\n  const maximum = useCallback(() => {\n    setValue(max);\n  }, [max, setValue]);\n  const minimum = useCallback(() => {\n    setValue(min);\n  }, [min, setValue]);\n  const increment = useCallback(() => {\n    setValue((prevValue) => withinRange({ min, max, value: prevValue + step }));\n  }, [max, min, setValue, step]);\n  const decrement = useCallback(() => {\n    setValue((prevValue) => withinRange({ min, max, value: prevValue - step }));\n  }, [max, min, setValue, step]);\n\n  const draggingClassName = dragging && !disableDraggingClassName;\n  useHtmlClassName(cnb(draggingClassName && \"rmd-dragging\"));\n  useHtmlClassName(\n    cnb(\n      !disableDraggingCursorClassName &&\n        draggingClassName &&\n        `rmd-dragging--${vertical ? \"v\" : \"h\"}`\n    )\n  );\n\n  const draggedOnce = useRef(false);\n  useEffect(() => {\n    if (!dragging) {\n      return;\n    }\n\n    draggedOnce.current = true;\n    const updatePosition = (event: MouseEvent | TouchEvent): void => {\n      if (!event.cancelable) {\n        return;\n      }\n\n      event.preventDefault();\n      event.stopPropagation();\n\n      updateDragPosition({\n        event,\n        nodeRef,\n        min,\n        max,\n        step,\n        rangeMin,\n        rangeMax,\n        isRTL,\n        isDragStart: false,\n        reversed,\n        vertical,\n        setValue,\n        setDragging,\n        setDragPercentage,\n        withinOffsetParent,\n      });\n    };\n\n    const stopDragging = (event: MouseEvent | TouchEvent): void => {\n      updatePosition(event);\n      setDragging(false);\n      draggingRef.current = false;\n      // blur the element so that it no longer maintains the `:focus-visible`\n      // styles if they were applied. pressing tab would re-focus this element\n      // so the tab order is preserved\n      nodeRef.current?.blur();\n    };\n\n    const updateKey = isTouch ? \"touchmove\" : \"mousemove\";\n    const stopKey = isTouch ? \"touchend\" : \"mouseup\";\n    const passive = isTouch ? { passive: false } : undefined;\n\n    window.addEventListener(updateKey, updatePosition, passive);\n    window.addEventListener(stopKey, stopDragging);\n    return () => {\n      window.removeEventListener(updateKey, updatePosition);\n      window.removeEventListener(stopKey, stopDragging);\n    };\n  }, [\n    dragging,\n    isRTL,\n    isTouch,\n    max,\n    min,\n    nodeRef,\n    rangeMax,\n    rangeMin,\n    reversed,\n    setDragging,\n    setValue,\n    step,\n    vertical,\n    withinOffsetParent,\n  ]);\n\n  const prevRange = useRef({ min, max, step });\n  useEffect(() => {\n    if (\n      prevRange.current.min === min &&\n      prevRange.current.max === max &&\n      prevRange.current.step === step\n    ) {\n      return;\n    }\n\n    prevRange.current = { min, max, step };\n    setValue((prevValue) =>\n      nearest({\n        min,\n        max,\n        steps: getRangeSteps({ min, max, step }),\n        value: prevValue,\n      })\n    );\n  }, [max, min, setValue, step]);\n\n  const mouseEventHandlers: Required<DraggableMouseEventHandlers<E>> = {\n    onMouseDown: useCallback(\n      (event) => {\n        onMouseDown(event);\n        if (disabled || isTouch || !isMouseDragStartEvent(event)) {\n          return;\n        }\n\n        // don't allow text to be selected\n        event.preventDefault();\n        updateDragPosition({\n          isDragStart: true,\n          event,\n          nodeRef,\n          min,\n          max,\n          step,\n          rangeMin,\n          rangeMax,\n          isRTL,\n          reversed,\n          vertical,\n          setValue,\n          setDragging,\n          setDragPercentage,\n          withinOffsetParent,\n        });\n\n        // don't set dragging immediately so that click events can still happen\n        draggingRef.current = true;\n      },\n      [\n        disabled,\n        isRTL,\n        isTouch,\n        max,\n        min,\n        nodeRef,\n        onMouseDown,\n        rangeMax,\n        rangeMin,\n        reversed,\n        setDragging,\n        setValue,\n        step,\n        vertical,\n        withinOffsetParent,\n      ]\n    ),\n    onMouseMove: useCallback(\n      (event) => {\n        onMouseMove(event);\n        if (disabled || isTouch || !draggingRef.current || dragging) {\n          return;\n        }\n\n        updateDragPosition({\n          isDragStart: true,\n          event,\n          nodeRef,\n          min,\n          max,\n          step,\n          rangeMin,\n          rangeMax,\n          isRTL,\n          reversed,\n          vertical,\n          setValue,\n          setDragging,\n          setDragPercentage,\n          withinOffsetParent,\n        });\n        setDragging(true);\n      },\n      [\n        disabled,\n        dragging,\n        isRTL,\n        isTouch,\n        max,\n        min,\n        nodeRef,\n        onMouseMove,\n        rangeMax,\n        rangeMin,\n        reversed,\n        setDragging,\n        setValue,\n        step,\n        vertical,\n        withinOffsetParent,\n      ]\n    ),\n    onMouseUp: useCallback(\n      (event) => {\n        onMouseUp(event);\n        if (disabled || isTouch) {\n          return;\n        }\n\n        draggingRef.current = false;\n      },\n      [disabled, isTouch, onMouseUp]\n    ),\n  };\n  const keyboardEventHandlers: Required<DraggableKeyboardEventHandlers<E>> = {\n    onKeyDown: useCallback(\n      (event) => {\n        onKeyDown(event);\n        if (disabled) {\n          return;\n        }\n\n        const decrementKey = vertical ? \"ArrowDown\" : \"ArrowLeft\";\n        const incrementKey = vertical ? \"ArrowUp\" : \"ArrowRight\";\n\n        switch (event.key) {\n          case decrementKey:\n            event.preventDefault();\n            decrement();\n            break;\n          case incrementKey:\n            event.preventDefault();\n            increment();\n            break;\n          case \"Home\":\n            event.preventDefault();\n            minimum();\n            break;\n          case \"End\":\n            event.preventDefault();\n            maximum();\n            break;\n        }\n      },\n      [decrement, disabled, increment, maximum, minimum, onKeyDown, vertical]\n    ),\n  };\n\n  // touch devices are a bit weird and cause issues since the \"start\" event is\n  // also used for scrolling. If the user quickly grabs the draggable element\n  // and drags vertically, most of the time it will try to scroll instead of\n  // dragging the element. The workaround is to being the drag events\n  // immediately on touchstart and disable scroll behavior for the page.\n  //\n  // There are also some issues with calling `event.preventDefault()` within\n  // touch events even while `{ passive: false } is manually set, so need to\n  // also attach a touchmove event.\n  useScrollLock(isTouch && dragging);\n  const touchEventHandlers: Required<DraggableTouchEventHandlers<E>> = {\n    onTouchStart: useCallback(\n      (event) => {\n        onTouchStart(event);\n        if (disabled || !isTouchDragStartEvent(event)) {\n          return;\n        }\n\n        draggingRef.current = true;\n        updateDragPosition({\n          isDragStart: true,\n          event,\n          nodeRef,\n          min,\n          max,\n          step,\n          rangeMin,\n          rangeMax,\n          isRTL,\n          reversed,\n          vertical,\n          setValue,\n          setDragging,\n          setDragPercentage,\n          withinOffsetParent,\n        });\n      },\n      [\n        disabled,\n        isRTL,\n        max,\n        min,\n        nodeRef,\n        onTouchStart,\n        rangeMax,\n        rangeMin,\n        reversed,\n        setDragging,\n        setValue,\n        step,\n        vertical,\n        withinOffsetParent,\n      ]\n    ),\n    onTouchMove: useCallback(\n      (event) => {\n        onTouchMove(event);\n        if (disabled || !draggingRef.current || !event.cancelable) {\n          return;\n        }\n\n        // prevent the document's touchmove event from also firing\n        event.stopPropagation();\n        updateDragPosition({\n          isDragStart: true,\n          event,\n          nodeRef,\n          min,\n          max,\n          step,\n          rangeMin,\n          rangeMax,\n          isRTL,\n          reversed,\n          vertical,\n          setValue,\n          setDragging,\n          setDragPercentage,\n          withinOffsetParent,\n        });\n      },\n      [\n        disabled,\n        isRTL,\n        max,\n        min,\n        nodeRef,\n        onTouchMove,\n        rangeMax,\n        rangeMin,\n        reversed,\n        setDragging,\n        setValue,\n        step,\n        vertical,\n        withinOffsetParent,\n      ]\n    ),\n  };\n\n  return {\n    ...touchEventHandlers,\n    ...mouseEventHandlers,\n    ...keyboardEventHandlers,\n    value,\n    setValue,\n    dragging,\n    setDragging,\n    maximum,\n    minimum,\n    increment,\n    decrement,\n    draggedOnce,\n    draggableRef: ref,\n    percentage,\n    dragPercentage,\n    touchEventHandlers,\n    mouseEventHandlers,\n    keyboardEventHandlers,\n  };\n}\n"],"names":["cnb","useCallback","useEffect","useRef","useState","useUserInteractionMode","useScrollLock","useDir","useEnsuredRef","useEnsuredState","useHtmlClassName","getPercentage","getRangeDefaultValue","getRangeSteps","nearest","withinRange","isMouseDragStartEvent","isTouchDragStartEvent","updateDragPosition","noop","useDraggable","options","ref","propRef","min","max","rangeMin","rangeMax","step","reversed","vertical","onKeyDown","onMouseUp","onMouseDown","onMouseMove","onTouchStart","onTouchMove","dragging","propDragging","setDragging","propSetDragging","value","propValue","setValue","propSetValue","defaultValue","withinOffsetParent","disabled","disableDraggingClassName","disableDraggingCursorClassName","nodeRef","isTouch","draggingRef","dragPercentage","setDragPercentage","isRTL","dir","percentage","maximum","minimum","increment","prevValue","decrement","draggingClassName","draggedOnce","current","updatePosition","event","cancelable","preventDefault","stopPropagation","isDragStart","stopDragging","blur","updateKey","stopKey","passive","undefined","window","addEventListener","removeEventListener","prevRange","steps","mouseEventHandlers","keyboardEventHandlers","decrementKey","incrementKey","key","touchEventHandlers","draggableRef"],"mappings":"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BAC7C;YACF;YAEAf,YAAYa,OAAO,GAAG;YACtB/C,mBAAmB;gBACjBqD,aAAa;gBACbJ;gBACAjB;gBACA1B;gBACAC;gBACAG;gBACAF;gBACAC;gBACA4B;gBACA1B;gBACAC;gBACAa;gBACAJ;gBACAe;gBACAR;YACF;QACF,GACA;YACEC;YACAQ;YACA9B;YACAD;YACA0B;YACAf;YACAR;YACAD;YACAG;YACAU;YACAI;YACAf;YACAE;YACAgB;SACD;QAEHV,aAAanC,YACX,CAACkE;YACC/B,YAAY+B;YACZ,IAAIpB,YAAY,CAACK,YAAYa,OAAO,IAAI,CAACE,MAAMC,UAAU,EAAE;gBACzD;YACF;YAEA,0DAA0D;YAC1DD,MAAMG,eAAe;YACrBpD,mBAAmB;gBACjBqD,aAAa;gBACbJ;gBACAjB;gBACA1B;gBACAC;gBACAG;gBACAF;gBACAC;gBACA4B;gBACA1B;gBACAC;gBACAa;gBACAJ;gBACAe;gBACAR;YACF;QACF,GACA;YACEC;YACAQ;YACA9B;YACAD;YACA0B;YACAd;YACAT;YACAD;YACAG;YACAU;YACAI;YACAf;YACAE;YACAgB;SACD;IAEL;IAEA,OAAO;QACL,GAAG0C,kBAAkB;QACrB,GAAGL,kBAAkB;QACrB,GAAGC,qBAAqB;QACxB3C;QACAE;QACAN;QACAE;QACAmB;QACAC;QACAC;QACAE;QACAE;QACAyB,cAAcnE;QACdmC;QACAJ;QACAmC;QACAL;QACAC;IACF;AACF"}
+{"version":3,"sources":["../../src/draggable/useDraggable.ts"],"sourcesContent":["\"use client\";\n\nimport { cnb } from \"cnbuilder\";\nimport {\n  type HTMLAttributes,\n  type Ref,\n  type RefCallback,\n  useCallback,\n  useEffect,\n  useRef,\n  useState,\n} from \"react\";\n\nimport { useUserInteractionMode } from \"../interaction/UserInteractionModeProvider.js\";\nimport { useScrollLock } from \"../scroll/useScrollLock.js\";\nimport {\n  type NonNullRef,\n  type UseStateInitializer,\n  type UseStateSetter,\n} from \"../types.js\";\nimport { useDir } from \"../typography/WritingDirectionProvider.js\";\nimport { useEnsuredRef } from \"../useEnsuredRef.js\";\nimport { useEnsuredState } from \"../useEnsuredState.js\";\nimport { useHtmlClassName } from \"../useHtmlClassName.js\";\nimport { getPercentage } from \"../utils/getPercentage.js\";\nimport { getRangeDefaultValue } from \"../utils/getRangeDefaultValue.js\";\nimport { getRangeSteps } from \"../utils/getRangeSteps.js\";\nimport { nearest } from \"../utils/nearest.js\";\nimport { withinRange } from \"../utils/withinRange.js\";\nimport {\n  isMouseDragStartEvent,\n  isTouchDragStartEvent,\n  updateDragPosition,\n} from \"./utils.js\";\n\nconst noop = (): void => {\n  // do nothing\n};\n\n/**\n * @since 6.0.0\n */\nexport type DraggableTouchEventHandlers<E extends HTMLElement> = Pick<\n  HTMLAttributes<E>,\n  \"onTouchStart\" | \"onTouchMove\"\n>;\n\n/**\n * @since 6.0.0\n */\nexport type DraggableMouseEventHandlers<E extends HTMLElement> = Pick<\n  HTMLAttributes<E>,\n  \"onMouseDown\" | \"onMouseUp\" | \"onMouseMove\"\n>;\n\n/**\n * @since 6.0.0\n */\nexport type DraggableKeyboardEventHandlers<E extends HTMLElement> = Pick<\n  HTMLAttributes<E>,\n  \"onKeyDown\"\n>;\n\n/**\n * @since 6.0.0\n */\nexport type DraggableEventHandlers<E extends HTMLElement> =\n  DraggableTouchEventHandlers<E> &\n    DraggableMouseEventHandlers<E> &\n    DraggableKeyboardEventHandlers<E>;\n\n/**\n * @since 6.0.0\n */\nexport interface ControllableDraggableStateOptions {\n  value?: number;\n  setValue?: UseStateSetter<number>;\n  defaultValue?: UseStateInitializer<number>;\n  dragging?: boolean;\n  setDragging?: UseStateSetter<boolean>;\n}\n\n/**\n * @since 6.0.0\n */\nexport interface BaseDraggableOptions<E extends HTMLElement>\n  extends DraggableEventHandlers<E>,\n    ControllableDraggableStateOptions {\n  /**\n   * An optional ref to merge with the returned\n   * {@link DraggableImplementation.draggableRef}.\n   */\n  ref?: Ref<E>;\n\n  /**\n   * The minimum number of pixels allowed for the draggable element. This must\n   * be a number greater than or equal to 0.\n   *\n   * When {@link withinOffsetParent} is set to `true`, this is the minimum value\n   * allowed instead of pixels.\n   */\n  min: number;\n\n  /**\n   * The maximum number of pixels allowed for the draggable element. This must\n   * be a number greater than the {@link min} and usually a number less than the\n   * viewport size.\n   *\n   * When {@link withinOffsetParent} is set to `true`, this is the maximum value\n   * allowed instead of pixels.\n   */\n  max: number;\n\n  /**\n   * The amount to increment or decrement the value with arrow keys.\n   *\n   * @defaultValue `1`\n   */\n  step?: number;\n\n  /**\n   * This was added to support range sliders where there are two (or more)\n   * draggable elements within the same container element and their values\n   * cannot pass each other. Without these overrides, the range would keep\n   * changing as the other values change, so the drag percentage would be\n   * incorrect.\n   *\n   * @example Range Slider\n   * ```ts\n   * const min = 0;\n   * const max = 100;\n   * const minValue = 3;\n   * const maxValue = 80;\n   *\n   * const minValueDraggable = useDraggable({\n   *   min,\n   *   max,\n   *   rangeMax: maxValue,\n   * });\n   * const maxValueDraggable = useDraggable({\n   *   min,\n   *   max,\n   *   rangeMin: minValue,\n   * });\n   * ```\n   *\n   * @defaultValue `min`\n   */\n  rangeMin?: number;\n\n  /**\n   * @see {@link rangeMin} for an explanation of this option.\n   * @defaultValue `max`\n   */\n  rangeMax?: number;\n\n  /**\n   * Set this to `true` to enable dragging vertically instead of horizontally.\n   *\n   * @defaultValue `false`\n   */\n  vertical?: boolean;\n\n  /**\n   * The default drag behavior is to increase the value when:\n   *\n   * - dragging `\"right\"` and the writing direction is `\"ltr\"`\n   * - dragging `\"left\"` and the writing direction is `\"rtl\"`\n   * - dragging `\"upwards\"`\n   *\n   * When this is set to `true`, the value when increase when:\n   *\n   * - dragging `\"left\"` and the writing direction is `\"ltr\"`\n   * - dragging `\"right\"` and the writing direction is `\"rtl\"`\n   * - dragging `\"downwards\"`\n   *\n   * @defaultValue `false`\n   */\n  reversed?: boolean;\n\n  /**\n   * Set this to `true` to disable all drag behavior. This will still call any\n   * of the provided {@link DraggableEventHandlers}.\n   *\n   * @defaultValue `false`\n   */\n  disabled?: boolean;\n\n  /**\n   * Set this to `true` if the dragging calculations should be to the\n   * `draggableRef.current.offsetParent` instead of the entire window. The main\n   * use case for this is sliders.\n   *\n   * @defaultValue `false`\n   */\n  withinOffsetParent?: boolean;\n\n  /**\n   * Set this to `true` to prevent the `document.documentElement` from gaining\n   * the `.rmd-dragging` class names while dragging.\n   *\n   * This should normally remain as `false` to improve performance and prevent\n   * other mouse events from firing while dragging.\n   *\n   * @defaultValue `false`\n   */\n  disableDraggingClassName?: boolean;\n\n  /**\n   * Set this to `true` to prevent the vertical or horizontal cursor from\n   * appearing while dragging.\n   *\n   * @defaultValue `false`\n   */\n  disableDraggingCursorClassName?: boolean;\n}\n\n/**\n * @since 6.0.0\n */\nexport interface UncontrolledDraggableOptions {\n  value?: never;\n  setValue?: never;\n  dragging?: never;\n  setDragging?: never;\n}\n\n/**\n * @since 6.0.0\n */\nexport interface ControlledValueDraggableOptions {\n  value: number;\n  setValue: UseStateSetter<number>;\n  defaultValue?: never;\n  dragging?: never;\n  setDragging?: never;\n}\n\n/**\n * @since 6.0.0\n */\nexport interface ControlledDraggingDraggableOptions {\n  value?: never;\n  setValue?: never;\n  defaultValue?: never;\n  dragging: boolean;\n  setDragging: UseStateSetter<boolean>;\n}\n\n/**\n * @since 6.0.0\n */\nexport interface FullyControlledDraggableOptions {\n  value: number;\n  setValue: UseStateSetter<number>;\n  dragging: boolean;\n  setDragging: UseStateSetter<boolean>;\n}\n\n/**\n * @since 6.0.0\n */\nexport type DraggableStateOptions =\n  | UncontrolledDraggableOptions\n  | ControlledValueDraggableOptions\n  | ControlledDraggingDraggableOptions\n  | FullyControlledDraggableOptions;\n\n/**\n * @since 6.0.0\n */\nexport type DraggableOptions<E extends HTMLElement = HTMLElement> =\n  BaseDraggableOptions<E> & DraggableStateOptions;\n\n/**\n * @since 6.0.0\n */\nexport interface DraggableImplementation<E extends HTMLElement = HTMLElement>\n  extends Required<DraggableEventHandlers<E>> {\n  mouseEventHandlers: Required<DraggableMouseEventHandlers<E>>;\n  touchEventHandlers: Required<DraggableTouchEventHandlers<E>>;\n  keyboardEventHandlers: Required<DraggableKeyboardEventHandlers<E>>;\n\n  /**\n   * Set the {@link value} to {@link DraggableOptions.min}.\n   */\n  minimum: () => void;\n\n  /**\n   * Set the {@link value} to {@link DraggableOptions.max}.\n   */\n  maximum: () => void;\n\n  /**\n   * Increment the {@link value} by {@link DraggableOptions.step}.\n   */\n  increment: () => void;\n\n  /**\n   * Decrement the {@link value} by {@link DraggableOptions.step}.\n   */\n  decrement: () => void;\n\n  /**\n   * The current percentage the `value` is within the range.\n   *\n   * ```ts\n   * const percentage =\n   *   dragging && withinOffsetParent\n   *     ? : dragPercentage\n   *     : getPercentage({ min, max, value });\n   * ```\n   */\n  percentage: number;\n\n  /**\n   * A ref that **Must** be passed to the element that should be draggable.\n   */\n  draggableRef: RefCallback<E>;\n\n  /**\n   * This value will only update while dragging with a mouse or touch and should\n   * be used for the positioning styles while dragging.\n   *\n   * Note: The {@link percentage} will use this value while dragging.\n   */\n  dragPercentage: number;\n\n  /**\n   * Flag to determine if the user has dragged at least once. Used internally\n   * for manually persisting the value into local storage once the user has\n   * stopped dragging.\n   */\n  draggedOnce: NonNullRef<boolean>;\n\n  value: number;\n  setValue: UseStateSetter<number>;\n  dragging: boolean;\n  setDragging: UseStateSetter<boolean>;\n}\n\n/**\n * This is most likely an internal only hook that provides the functionality for\n * dragging an element through mouse, touch, and keyboard events. The main use\n * cases so far for this hook are:\n * - window splitters\n * - sliders\n *\n * NOTE: This requires `touch-action: none` to be applied to the draggable\n * element to help prevent page scrolling on mobile devices.\n *\n * @see {@link https://next.react-md.dev/components/use-draggable | useDraggable Demos}\n * @since 6.0.0\n */\nexport function useDraggable<E extends HTMLElement>(\n  options: DraggableOptions<E>\n): DraggableImplementation<E> {\n  const {\n    ref: propRef,\n    min,\n    max,\n    rangeMin = min,\n    rangeMax = max,\n    step = 1,\n    reversed = false,\n    vertical = false,\n    onKeyDown = noop,\n    onMouseUp = noop,\n    onMouseDown = noop,\n    onMouseMove = noop,\n    onTouchStart = noop,\n    onTouchMove = noop,\n    dragging: propDragging,\n    setDragging: propSetDragging,\n    value: propValue,\n    setValue: propSetValue,\n    defaultValue,\n    withinOffsetParent = false,\n    disabled = false,\n    disableDraggingClassName = false,\n    disableDraggingCursorClassName = disableDraggingClassName,\n  } = options;\n\n  const [nodeRef, ref] = useEnsuredRef(propRef);\n  const isTouch = useUserInteractionMode() === \"touch\";\n  const draggingRef = useRef(false);\n  const [dragPercentage, setDragPercentage] = useState(min);\n  const [value, setValue] = useEnsuredState({\n    value: propValue,\n    setValue: propSetValue,\n    defaultValue: getRangeDefaultValue({\n      min,\n      max,\n      step: 1,\n      defaultValue,\n    }),\n  });\n  const [dragging, setDragging] = useEnsuredState({\n    value: propDragging,\n    setValue: propSetDragging,\n    defaultValue: false,\n  });\n\n  const isRTL = useDir().dir === \"rtl\";\n  const percentage =\n    dragging && withinOffsetParent\n      ? dragPercentage\n      : getPercentage({ min, max, value });\n  const maximum = useCallback(() => {\n    setValue(max);\n  }, [max, setValue]);\n  const minimum = useCallback(() => {\n    setValue(min);\n  }, [min, setValue]);\n  const increment = useCallback(() => {\n    setValue((prevValue) => withinRange({ min, max, value: prevValue + step }));\n  }, [max, min, setValue, step]);\n  const decrement = useCallback(() => {\n    setValue((prevValue) => withinRange({ min, max, value: prevValue - step }));\n  }, [max, min, setValue, step]);\n\n  const draggingClassName = dragging && !disableDraggingClassName;\n  useHtmlClassName(cnb(draggingClassName && \"rmd-dragging\"));\n  useHtmlClassName(\n    cnb(\n      !disableDraggingCursorClassName &&\n        draggingClassName &&\n        `rmd-dragging--${vertical ? \"v\" : \"h\"}`\n    )\n  );\n\n  const draggedOnce = useRef(false);\n  useEffect(() => {\n    if (!dragging) {\n      return;\n    }\n\n    draggedOnce.current = true;\n    const updatePosition = (event: MouseEvent | TouchEvent): void => {\n      if (!event.cancelable) {\n        return;\n      }\n\n      event.preventDefault();\n      event.stopPropagation();\n\n      updateDragPosition({\n        event,\n        nodeRef,\n        min,\n        max,\n        step,\n        rangeMin,\n        rangeMax,\n        isRTL,\n        isDragStart: false,\n        reversed,\n        vertical,\n        setValue,\n        setDragging,\n        setDragPercentage,\n        withinOffsetParent,\n      });\n    };\n\n    const stopDragging = (event: MouseEvent | TouchEvent): void => {\n      updatePosition(event);\n      setDragging(false);\n      draggingRef.current = false;\n      // blur the element so that it no longer maintains the `:focus-visible`\n      // styles if they were applied. pressing tab would re-focus this element\n      // so the tab order is preserved\n      nodeRef.current?.blur();\n    };\n\n    const updateKey = isTouch ? \"touchmove\" : \"mousemove\";\n    const stopKey = isTouch ? \"touchend\" : \"mouseup\";\n    const passive = isTouch ? { passive: false } : undefined;\n\n    window.addEventListener(updateKey, updatePosition, passive);\n    window.addEventListener(stopKey, stopDragging);\n    return () => {\n      window.removeEventListener(updateKey, updatePosition);\n      window.removeEventListener(stopKey, stopDragging);\n    };\n  }, [\n    dragging,\n    isRTL,\n    isTouch,\n    max,\n    min,\n    nodeRef,\n    rangeMax,\n    rangeMin,\n    reversed,\n    setDragging,\n    setValue,\n    step,\n    vertical,\n    withinOffsetParent,\n  ]);\n\n  const prevRange = useRef({ min, max, step });\n  useEffect(() => {\n    if (\n      prevRange.current.min === min &&\n      prevRange.current.max === max &&\n      prevRange.current.step === step\n    ) {\n      return;\n    }\n\n    prevRange.current = { min, max, step };\n    setValue((prevValue) =>\n      nearest({\n        min,\n        max,\n        steps: getRangeSteps({ min, max, step }),\n        value: prevValue,\n      })\n    );\n  }, [max, min, setValue, step]);\n\n  const mouseEventHandlers: Required<DraggableMouseEventHandlers<E>> = {\n    onMouseDown: useCallback(\n      (event) => {\n        onMouseDown(event);\n        if (disabled || isTouch || !isMouseDragStartEvent(event)) {\n          return;\n        }\n\n        // don't allow text to be selected\n        event.preventDefault();\n        updateDragPosition({\n          isDragStart: true,\n          event,\n          nodeRef,\n          min,\n          max,\n          step,\n          rangeMin,\n          rangeMax,\n          isRTL,\n          reversed,\n          vertical,\n          setValue,\n          setDragging,\n          setDragPercentage,\n          withinOffsetParent,\n        });\n\n        // don't set dragging immediately so that click events can still happen\n        draggingRef.current = true;\n      },\n      [\n        disabled,\n        isRTL,\n        isTouch,\n        max,\n        min,\n        nodeRef,\n        onMouseDown,\n        rangeMax,\n        rangeMin,\n        reversed,\n        setDragging,\n        setValue,\n        step,\n        vertical,\n        withinOffsetParent,\n      ]\n    ),\n    onMouseMove: useCallback(\n      (event) => {\n        onMouseMove(event);\n        if (disabled || isTouch || !draggingRef.current || dragging) {\n          return;\n        }\n\n        updateDragPosition({\n          isDragStart: true,\n          event,\n          nodeRef,\n          min,\n          max,\n          step,\n          rangeMin,\n          rangeMax,\n          isRTL,\n          reversed,\n          vertical,\n          setValue,\n          setDragging,\n          setDragPercentage,\n          withinOffsetParent,\n        });\n        setDragging(true);\n      },\n      [\n        disabled,\n        dragging,\n        isRTL,\n        isTouch,\n        max,\n        min,\n        nodeRef,\n        onMouseMove,\n        rangeMax,\n        rangeMin,\n        reversed,\n        setDragging,\n        setValue,\n        step,\n        vertical,\n        withinOffsetParent,\n      ]\n    ),\n    onMouseUp: useCallback(\n      (event) => {\n        onMouseUp(event);\n        if (disabled || isTouch) {\n          return;\n        }\n\n        draggingRef.current = false;\n      },\n      [disabled, isTouch, onMouseUp]\n    ),\n  };\n  const keyboardEventHandlers: Required<DraggableKeyboardEventHandlers<E>> = {\n    onKeyDown: useCallback(\n      (event) => {\n        onKeyDown(event);\n        if (disabled) {\n          return;\n        }\n\n        const decrementKey = vertical ? \"ArrowDown\" : \"ArrowLeft\";\n        const incrementKey = vertical ? \"ArrowUp\" : \"ArrowRight\";\n\n        switch (event.key) {\n          case decrementKey:\n            event.preventDefault();\n            decrement();\n            break;\n          case incrementKey:\n            event.preventDefault();\n            increment();\n            break;\n          case \"Home\":\n            event.preventDefault();\n            minimum();\n            break;\n          case \"End\":\n            event.preventDefault();\n            maximum();\n            break;\n        }\n      },\n      [decrement, disabled, increment, maximum, minimum, onKeyDown, vertical]\n    ),\n  };\n\n  // touch devices are a bit weird and cause issues since the \"start\" event is\n  // also used for scrolling. If the user quickly grabs the draggable element\n  // and drags vertically, most of the time it will try to scroll instead of\n  // dragging the element. The workaround is to being the drag events\n  // immediately on touchstart and disable scroll behavior for the page.\n  //\n  // There are also some issues with calling `event.preventDefault()` within\n  // touch events even while `{ passive: false } is manually set, so need to\n  // also attach a touchmove event.\n  useScrollLock(isTouch && dragging);\n  const touchEventHandlers: Required<DraggableTouchEventHandlers<E>> = {\n    onTouchStart: useCallback(\n      (event) => {\n        onTouchStart(event);\n        if (disabled || !isTouchDragStartEvent(event)) {\n          return;\n        }\n\n        draggingRef.current = true;\n        updateDragPosition({\n          isDragStart: true,\n          event,\n          nodeRef,\n          min,\n          max,\n          step,\n          rangeMin,\n          rangeMax,\n          isRTL,\n          reversed,\n          vertical,\n          setValue,\n          setDragging,\n          setDragPercentage,\n          withinOffsetParent,\n        });\n      },\n      [\n        disabled,\n        isRTL,\n        max,\n        min,\n        nodeRef,\n        onTouchStart,\n        rangeMax,\n        rangeMin,\n        reversed,\n        setDragging,\n        setValue,\n        step,\n        vertical,\n        withinOffsetParent,\n      ]\n    ),\n    onTouchMove: useCallback(\n      (event) => {\n        onTouchMove(event);\n        if (disabled || !draggingRef.current || !event.cancelable) {\n          return;\n        }\n\n        // prevent the document's touchmove event from also firing\n        event.stopPropagation();\n        updateDragPosition({\n          isDragStart: true,\n          event,\n          nodeRef,\n          min,\n          max,\n          step,\n          rangeMin,\n          rangeMax,\n          isRTL,\n          reversed,\n          vertical,\n          setValue,\n          setDragging,\n          setDragPercentage,\n          withinOffsetParent,\n        });\n      },\n      [\n        disabled,\n        isRTL,\n        max,\n        min,\n        nodeRef,\n        onTouchMove,\n        rangeMax,\n        rangeMin,\n        reversed,\n        setDragging,\n        setValue,\n        step,\n        vertical,\n        withinOffsetParent,\n      ]\n    ),\n  };\n\n  return {\n    ...touchEventHandlers,\n    ...mouseEventHandlers,\n    ...keyboardEventHandlers,\n    value,\n    setValue,\n    dragging,\n    setDragging,\n    maximum,\n    minimum,\n    increment,\n    decrement,\n    draggedOnce,\n    draggableRef: ref,\n    percentage,\n    dragPercentage,\n    touchEventHandlers,\n    mouseEventHandlers,\n    keyboardEventHandlers,\n  };\n}\n"],"names":["cnb","useCallback","useEffect","useRef","useState","useUserInteractionMode","useScrollLock","useDir","useEnsuredRef","useEnsuredState","useHtmlClassName","getPercentage","getRangeDefaultValue","getRangeSteps","nearest","withinRange","isMouseDragStartEvent","isTouchDragStartEvent","updateDragPosition","noop","useDraggable","options","ref","propRef","min","max","rangeMin","rangeMax","step","reversed","vertical","onKeyDown","onMouseUp","onMouseDown","onMouseMove","onTouchStart","onTouchMove","dragging","propDragging","setDragging","propSetDragging","value","propValue","setValue","propSetValue","defaultValue","withinOffsetParent","disabled","disableDraggingClassName","disableDraggingCursorClassName","nodeRef","isTouch","draggingRef","dragPercentage","setDragPercentage","isRTL","dir","percentage","maximum","minimum","increment","prevValue","decrement","draggingClassName","draggedOnce","current","updatePosition","event","cancelable","preventDefault","stopPropagation","isDragStart","stopDragging","blur","updateKey","stopKey","passive","undefined","window","addEventListener","removeEventListener","prevRange","steps","mouseEventHandlers","keyboardEventHandlers","decrementKey","incrementKey","key","touchEventHandlers","draggableRef"],"mappings":"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gBAC7C;YACF;YAEAf,YAAYa,OAAO,GAAG;YACtB/C,mBAAmB;gBACjBqD,aAAa;gBACbJ;gBACAjB;gBACA1B;gBACAC;gBACAG;gBACAF;gBACAC;gBACA4B;gBACA1B;gBACAC;gBACAa;gBACAJ;gBACAe;gBACAR;YACF;QACF,GACA;YACEC;YACAQ;YACA9B;YACAD;YACA0B;YACAf;YACAR;YACAD;YACAG;YACAU;YACAI;YACAf;YACAE;YACAgB;SACD;QAEHV,aAAanC,YACX,CAACkE;YACC/B,YAAY+B;YACZ,IAAIpB,YAAY,CAACK,YAAYa,OAAO,IAAI,CAACE,MAAMC,UAAU,EAAE;gBACzD;YACF;YAEA,0DAA0D;YAC1DD,MAAMG,eAAe;YACrBpD,mBAAmB;gBACjBqD,aAAa;gBACbJ;gBACAjB;gBACA1B;gBACAC;gBACAG;gBACAF;gBACAC;gBACA4B;gBACA1B;gBACAC;gBACAa;gBACAJ;gBACAe;gBACAR;YACF;QACF,GACA;YACEC;YACAQ;YACA9B;YACAD;YACA0B;YACAd;YACAT;YACAD;YACAG;YACAU;YACAI;YACAf;YACAE;YACAgB;SACD;IAEL;IAEA,OAAO;QACL,GAAG0C,kBAAkB;QACrB,GAAGL,kBAAkB;QACrB,GAAGC,qBAAqB;QACxB3C;QACAE;QACAN;QACAE;QACAmB;QACAC;QACAC;QACAE;QACAE;QACAyB,cAAcnE;QACdmC;QACAJ;QACAmC;QACAL;QACAC;IACF;AACF"}

package/dist/error-boundary/ErrorBoundary.d.ts

@@ -0,0 +1,58 @@
+import { Component, type ErrorInfo, type ReactElement, type ReactNode } from "react";
+import { type ErrorBoundaryState } from "./types.js";
+/**
+ * @since 6.0.0
+ */
+export interface ErrorBoundaryProps {
+    onError?: (error: Error, errorInfo: ErrorInfo) => void;
+    fallback: ReactNode;
+    children: ReactNode;
+}
+/**
+ * **Client Component**
+ *
+ * This is a minimal fork of the `react-error-boundary` package from
+ * {@link https://github.com/bvaughn/react-error-boundary/tree/5.0.0}
+ * that only includes things I consider useful. Use the `react-error-boundary`
+ * if more complex behavior is required.
+ *
+ * @example Main Use Case
+ * ```tsx
+ * import { Button } from "@react-md/core/button/Button";
+ * import { ErrorBoundary } from "@react-md/core/error-boundary/ErrorBoundary";
+ * import { useErrorBoundary } from "@react-md/core/error-boundary/useErrorBoundary";
+ * import { Typography } from "@react-md/core/typography/Typography";
+ *
+ * function Example() {
+ *   return (
+ *     <ErrorBoundary
+ *       fallback={<SomeFallbackComponent />}
+ *     >
+ *       <SomeComponentThatMightError />
+ *     </ErrorBoundary>
+ *   );
+ * }
+ *
+ * "use client";
+ *
+ * function SomeFallbackComponent() {
+ *   const { error, errored, reset } = useErrorBoundary();
+ *
+ *   return (
+ *     <>
+ *       <Typography>Uh oh, something broke!</Typography>
+ *       <Button onClick={reset}>Try Again?</Button>
+ *     </>
+ *   );
+ * }
+ * ```
+ *
+ * @since 6.0.0
+ */
+export declare class ErrorBoundary extends Component<ErrorBoundaryProps, ErrorBoundaryState> {
+    constructor(props: ErrorBoundaryProps);
+    static getDerivedStateFromError(error: Error): ErrorBoundaryState;
+    componentDidCatch(error: Error, errorInfo: ErrorInfo): void;
+    reset: () => void;
+    render(): ReactElement;
+}

package/dist/error-boundary/ErrorBoundary.js

@@ -0,0 +1,99 @@
+"use client";
+function _define_property(obj, key, value) {
+    if (key in obj) {
+        Object.defineProperty(obj, key, {
+            value: value,
+            enumerable: true,
+            configurable: true,
+            writable: true
+        });
+    } else {
+        obj[key] = value;
+    }
+    return obj;
+}
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Component } from "react";
+import { Provider } from "./context.js";
+/**
+ * **Client Component**
+ *
+ * This is a minimal fork of the `react-error-boundary` package from
+ * {@link https://github.com/bvaughn/react-error-boundary/tree/5.0.0}
+ * that only includes things I consider useful. Use the `react-error-boundary`
+ * if more complex behavior is required.
+ *
+ * @example Main Use Case
+ * ```tsx
+ * import { Button } from "@react-md/core/button/Button";
+ * import { ErrorBoundary } from "@react-md/core/error-boundary/ErrorBoundary";
+ * import { useErrorBoundary } from "@react-md/core/error-boundary/useErrorBoundary";
+ * import { Typography } from "@react-md/core/typography/Typography";
+ *
+ * function Example() {
+ *   return (
+ *     <ErrorBoundary
+ *       fallback={<SomeFallbackComponent />}
+ *     >
+ *       <SomeComponentThatMightError />
+ *     </ErrorBoundary>
+ *   );
+ * }
+ *
+ * "use client";
+ *
+ * function SomeFallbackComponent() {
+ *   const { error, errored, reset } = useErrorBoundary();
+ *
+ *   return (
+ *     <>
+ *       <Typography>Uh oh, something broke!</Typography>
+ *       <Button onClick={reset}>Try Again?</Button>
+ *     </>
+ *   );
+ * }
+ * ```
+ *
+ * @since 6.0.0
+ */ export class ErrorBoundary extends Component {
+    static getDerivedStateFromError(error) {
+        return {
+            error,
+            errored: true
+        };
+    }
+    componentDidCatch(error, errorInfo) {
+        this.props.onError?.(error, errorInfo);
+    }
+    render() {
+        const { fallback } = this.props;
+        const { error, errored } = this.state;
+        let { children } = this.props;
+        if (errored) {
+            children = fallback;
+        }
+        return /*#__PURE__*/ _jsx(Provider, {
+            // should always match
+            value: {
+                error,
+                errored,
+                reset: this.reset
+            },
+            children: children
+        });
+    }
+    constructor(props){
+        super(props), _define_property(this, "reset", ()=>{
+            this.setState({
+                error: null,
+                errored: false
+            });
+        });
+        this.state = {
+            error: null,
+            errored: false
+        };
+    }
+}
+
+//# sourceMappingURL=ErrorBoundary.js.map

package/dist/error-boundary/ErrorBoundary.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/error-boundary/ErrorBoundary.tsx"],"sourcesContent":["\"use client\";\n\nimport {\n  Component,\n  type ErrorInfo,\n  type ReactElement,\n  type ReactNode,\n} from \"react\";\n\nimport { Provider } from \"./context.js\";\nimport { type ErrorBoundaryContext, type ErrorBoundaryState } from \"./types.js\";\n\n/**\n * @since 6.0.0\n */\nexport interface ErrorBoundaryProps {\n  onError?: (error: Error, errorInfo: ErrorInfo) => void;\n  fallback: ReactNode;\n  children: ReactNode;\n}\n\n/**\n * **Client Component**\n *\n * This is a minimal fork of the `react-error-boundary` package from\n * {@link https://github.com/bvaughn/react-error-boundary/tree/5.0.0}\n * that only includes things I consider useful. Use the `react-error-boundary`\n * if more complex behavior is required.\n *\n * @example Main Use Case\n * ```tsx\n * import { Button } from \"@react-md/core/button/Button\";\n * import { ErrorBoundary } from \"@react-md/core/error-boundary/ErrorBoundary\";\n * import { useErrorBoundary } from \"@react-md/core/error-boundary/useErrorBoundary\";\n * import { Typography } from \"@react-md/core/typography/Typography\";\n *\n * function Example() {\n *   return (\n *     <ErrorBoundary\n *       fallback={<SomeFallbackComponent />}\n *     >\n *       <SomeComponentThatMightError />\n *     </ErrorBoundary>\n *   );\n * }\n *\n * \"use client\";\n *\n * function SomeFallbackComponent() {\n *   const { error, errored, reset } = useErrorBoundary();\n *\n *   return (\n *     <>\n *       <Typography>Uh oh, something broke!</Typography>\n *       <Button onClick={reset}>Try Again?</Button>\n *     </>\n *   );\n * }\n * ```\n *\n * @since 6.0.0\n */\nexport class ErrorBoundary extends Component<\n  ErrorBoundaryProps,\n  ErrorBoundaryState\n> {\n  constructor(props: ErrorBoundaryProps) {\n    super(props);\n\n    this.state = { error: null, errored: false };\n  }\n\n  static getDerivedStateFromError(error: Error): ErrorBoundaryState {\n    return { error, errored: true };\n  }\n\n  componentDidCatch(error: Error, errorInfo: ErrorInfo): void {\n    this.props.onError?.(error, errorInfo);\n  }\n\n  reset = (): void => {\n    this.setState({ error: null, errored: false });\n  };\n\n  render(): ReactElement {\n    const { fallback } = this.props;\n    const { error, errored } = this.state;\n\n    let { children } = this.props;\n    if (errored) {\n      children = fallback;\n    }\n\n    return (\n      <Provider\n        // should always match\n        value={{ error, errored, reset: this.reset } as ErrorBoundaryContext}\n      >\n        {children}\n      </Provider>\n    );\n  }\n}\n"],"names":["Component","Provider","ErrorBoundary","getDerivedStateFromError","error","errored","componentDidCatch","errorInfo","props","onError","render","fallback","state","children","value","reset","constructor","setState"],"mappings":"AAAA;;;;;;;;;;;;;;;AAEA,SACEA,SAAS,QAIJ,QAAQ;AAEf,SAASC,QAAQ,QAAQ,eAAe;AAYxC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAwCC,GACD,OAAO,MAAMC,sBAAsBF;IAUjC,OAAOG,yBAAyBC,KAAY,EAAsB;QAChE,OAAO;YAAEA;YAAOC,SAAS;QAAK;IAChC;IAEAC,kBAAkBF,KAAY,EAAEG,SAAoB,EAAQ;QAC1D,IAAI,CAACC,KAAK,CAACC,OAAO,GAAGL,OAAOG;IAC9B;IAMAG,SAAuB;QACrB,MAAM,EAAEC,QAAQ,EAAE,GAAG,IAAI,CAACH,KAAK;QAC/B,MAAM,EAAEJ,KAAK,EAAEC,OAAO,EAAE,GAAG,IAAI,CAACO,KAAK;QAErC,IAAI,EAAEC,QAAQ,EAAE,GAAG,IAAI,CAACL,KAAK;QAC7B,IAAIH,SAAS;YACXQ,WAAWF;QACb;QAEA,qBACE,KAACV;YACC,sBAAsB;YACtBa,OAAO;gBAAEV;gBAAOC;gBAASU,OAAO,IAAI,CAACA,KAAK;YAAC;sBAE1CF;;IAGP;IAnCAG,YAAYR,KAAyB,CAAE;QACrC,KAAK,CAACA,QAaRO,uBAAAA,SAAQ;YACN,IAAI,CAACE,QAAQ,CAAC;gBAAEb,OAAO;gBAAMC,SAAS;YAAM;QAC9C;QAbE,IAAI,CAACO,KAAK,GAAG;YAAER,OAAO;YAAMC,SAAS;QAAM;IAC7C;AAgCF"}

package/dist/error-boundary/context.d.ts

@@ -0,0 +1,11 @@
+import { type ErrorBoundaryContext } from "./types.js";
+/**
+ * @internal
+ * @since 6.0.0
+ */
+export declare const context: import("react").Context<ErrorBoundaryContext | null>;
+/**
+ * @internal
+ * @since 6.0.0
+ */
+export declare const Provider: import("react").Provider<ErrorBoundaryContext | null>;

package/dist/error-boundary/context.js

@@ -0,0 +1,12 @@
+import { createContext } from "react";
+/**
+ * @internal
+ * @since 6.0.0
+ */ export const context = createContext(null);
+context.displayName = "ErrorBoundary";
+/**
+ * @internal
+ * @since 6.0.0
+ */ export const { Provider } = context;
+
+//# sourceMappingURL=context.js.map

package/dist/error-boundary/context.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/error-boundary/context.ts"],"sourcesContent":["import { createContext } from \"react\";\n\nimport { type ErrorBoundaryContext } from \"./types.js\";\n\n/**\n * @internal\n * @since 6.0.0\n */\nexport const context = createContext<ErrorBoundaryContext | null>(null);\ncontext.displayName = \"ErrorBoundary\";\n\n/**\n * @internal\n * @since 6.0.0\n */\nexport const { Provider } = context;\n"],"names":["createContext","context","displayName","Provider"],"mappings":"AAAA,SAASA,aAAa,QAAQ,QAAQ;AAItC;;;CAGC,GACD,OAAO,MAAMC,UAAUD,cAA2C,MAAM;AACxEC,QAAQC,WAAW,GAAG;AAEtB;;;CAGC,GACD,OAAO,MAAM,EAAEC,QAAQ,EAAE,GAAGF,QAAQ"}