@react-md/core 1.0.0-next.3 → 1.0.0-next.4

package/dist/src/dialog/FixedDialog.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/dialog/FixedDialog.tsx"],"sourcesContent":["\"use client\";\nimport { forwardRef, useRef, type RefObject } from \"react\";\nimport { TOP_INNER_RIGHT_ANCHOR } from \"../positioning/constants.js\";\nimport {\n  type CalculateFixedPositionOptions,\n  type PositionAnchor,\n} from \"../positioning/types.js\";\nimport { useFixedPositioning } from \"../positioning/useFixedPositioning.js\";\nimport { type CSSTransitionClassNamesObject } from \"../transition/types.js\";\nimport { SCALE_CLASSNAMES } from \"../transition/useScaleTransition.js\";\nimport { type LabelRequiredForA11y } from \"../types.js\";\nimport { Dialog, type BaseDialogProps } from \"./Dialog.js\";\n\nexport interface BaseFixedDialogProps extends Omit<BaseDialogProps, \"type\"> {\n  anchor?: PositionAnchor;\n  fixedTo: RefObject<HTMLElement>;\n  options?: CalculateFixedPositionOptions;\n  getFixedPositionOptions?(): CalculateFixedPositionOptions;\n\n  /**\n   * @defaultValue `true`\n   */\n  overlayHidden?: boolean;\n\n  /**\n   * @defaultValue `true`\n   */\n  disableScrollLock?: boolean;\n}\n\nexport type FixedDialogProps = LabelRequiredForA11y<BaseFixedDialogProps>;\n\nconst noop = (): void => {\n  // do nothing\n};\nexport const DEFAULT_FIXED_DIALOG_CLASSNAMES: Readonly<CSSTransitionClassNamesObject> =\n  {\n    appear: \"rmd-dialog--fixed-enter\",\n    appearActive: \"rmd-dialog--fixed-enter-active\",\n    enter: \"rmd-dialog--fixed-enter\",\n    enterActive: \"rmd-dialog--fixed-enter-active\",\n    exit: \"rmd-dialog--fixed-exit\",\n    exitActive: \"rmd-dialog--fixed-exit-active\",\n  };\n\n/**\n * **Client Component**\n *\n * @example\n * Simple Example\n * ```tsx\n * import {\n *   Button,\n *   DialogHeader,\n *   DialogTitle,\n *   DialogContent,\n *   DialogFooter,\n *   FixedDialog,\n *   Typography,\n *   useToggle,\n * } from \"@react-md/core\";\n * import { useRef } from \"react\";\n * import type { ReactElement } from \"react\";\n *\n * function Example(): ReactElement {\n *   const {\n *     toggle,\n *     disable: onRequestClose,\n *     toggled: visible,\n *   } = useToggle(false);\n *   const fixedTo = useRef<HTMLButtonElement>(null)\n *\n *   return (\n *     <>\n *       <Button ref={fixedTo} onClick={toggle}>Toggle</Button>\n *       <FixedDialog\n *         aria-labelledby=\"dialog-title\"\n *         visible={visible}\n *         onRequestClose={onRequestClose}\n *       >\n *         <DialogHeader>\n *           <DialogTitle id=\"dialog-title\">Simple Dialog</DialogTitle>\n *         </DialogHeader>\n *         <DialogContent>\n *           <Typography margin=\"none\">This is some text in a dialog.</Typography>\n *         </DialogContent>\n *         <DialogFooter>\n *           <Button onClick={onRequestClose}>\n *             Close\n *           </Button>\n *         </DialogFooter>\n *       </FixedDialog>\n *     </>\n *   );\n * }\n * ```\n */\nexport const FixedDialog = forwardRef<HTMLDivElement, FixedDialogProps>(\n  function FixedDialog(props, nodeRef) {\n    const {\n      fixedTo,\n      style: propStyle,\n      classNames = SCALE_CLASSNAMES,\n      children,\n      anchor = TOP_INNER_RIGHT_ANCHOR,\n      options,\n      getFixedPositionOptions,\n      onEnter,\n      onEntering,\n      onEntered,\n      onExited = noop,\n      onRequestClose,\n      overlayHidden = true,\n      disableScrollLock = true,\n      isFocusTypeDisabled = noop,\n      ...remaining\n    } = props;\n\n    const disableExitFocus = useRef(false);\n    const { ref, style, callbacks } = useFixedPositioning({\n      nodeRef,\n      style: propStyle,\n      transformOrigin: true,\n      onEnter,\n      onEntering,\n      onEntered,\n      onExited() {\n        onExited();\n        disableExitFocus.current = false;\n      },\n      anchor,\n      fixedTo,\n      onScroll(_event, data) {\n        if (!data.visible) {\n          disableExitFocus.current = true;\n          onRequestClose();\n        }\n      },\n      ...options,\n      getFixedPositionOptions,\n    });\n\n    return (\n      <Dialog\n        {...remaining}\n        {...callbacks}\n        ref={ref}\n        type=\"custom\"\n        fixed\n        style={style}\n        classNames={classNames}\n        onRequestClose={onRequestClose}\n        overlayHidden={overlayHidden}\n        disableScrollLock={disableScrollLock}\n        isFocusTypeDisabled={(type) =>\n          isFocusTypeDisabled(type) ||\n          (type === \"unmount\" && disableExitFocus.current)\n        }\n      >\n        {children}\n      </Dialog>\n    );\n  }\n);\n"],"names":["forwardRef","useRef","TOP_INNER_RIGHT_ANCHOR","useFixedPositioning","SCALE_CLASSNAMES","Dialog","noop","DEFAULT_FIXED_DIALOG_CLASSNAMES","appear","appearActive","enter","enterActive","exit","exitActive","FixedDialog","props","nodeRef","fixedTo","style","propStyle","classNames","children","anchor","options","getFixedPositionOptions","onEnter","onEntering","onEntered","onExited","onRequestClose","overlayHidden","disableScrollLock","isFocusTypeDisabled","remaining","disableExitFocus","ref","callbacks","transformOrigin","current","onScroll","_event","data","visible","type","fixed"],"mappings":"AAAA;;AACA,SAASA,UAAU,EAAEC,MAAM,QAAwB,QAAQ;AAC3D,SAASC,sBAAsB,QAAQ,8BAA8B;AAKrE,SAASC,mBAAmB,QAAQ,wCAAwC;AAE5E,SAASC,gBAAgB,QAAQ,sCAAsC;AAEvE,SAASC,MAAM,QAA8B,cAAc;AAqB3D,MAAMC,OAAO;AACX,aAAa;AACf;AACA,OAAO,MAAMC,kCACX;IACEC,QAAQ;IACRC,cAAc;IACdC,OAAO;IACPC,aAAa;IACbC,MAAM;IACNC,YAAY;AACd,EAAE;AAEJ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAmDC,GACD,OAAO,MAAMC,4BAAcd,WACzB,SAASc,YAAYC,KAAK,EAAEC,OAAO;IACjC,MAAM,EACJC,OAAO,EACPC,OAAOC,SAAS,EAChBC,aAAahB,gBAAgB,EAC7BiB,QAAQ,EACRC,SAASpB,sBAAsB,EAC/BqB,OAAO,EACPC,uBAAuB,EACvBC,OAAO,EACPC,UAAU,EACVC,SAAS,EACTC,WAAWtB,IAAI,EACfuB,cAAc,EACdC,gBAAgB,IAAI,EACpBC,oBAAoB,IAAI,EACxBC,sBAAsB1B,IAAI,EAC1B,GAAG2B,WACJ,GAAGlB;IAEJ,MAAMmB,mBAAmBjC,OAAO;IAChC,MAAM,EAAEkC,GAAG,EAAEjB,KAAK,EAAEkB,SAAS,EAAE,GAAGjC,oBAAoB;QACpDa;QACAE,OAAOC;QACPkB,iBAAiB;QACjBZ;QACAC;QACAC;QACAC;YACEA;YACAM,iBAAiBI,OAAO,GAAG;QAC7B;QACAhB;QACAL;QACAsB,UAASC,MAAM,EAAEC,IAAI;YACnB,IAAI,CAACA,KAAKC,OAAO,EAAE;gBACjBR,iBAAiBI,OAAO,GAAG;gBAC3BT;YACF;QACF;QACA,GAAGN,OAAO;QACVC;IACF;IAEA,qBACE,KAACnB;QACE,GAAG4B,SAAS;QACZ,GAAGG,SAAS;QACbD,KAAKA;QACLQ,MAAK;QACLC,KAAK;QACL1B,OAAOA;QACPE,YAAYA;QACZS,gBAAgBA;QAChBC,eAAeA;QACfC,mBAAmBA;QACnBC,qBAAqB,CAACW,OACpBX,oBAAoBW,SACnBA,SAAS,aAAaT,iBAAiBI,OAAO;kBAGhDjB;;AAGP,GACA"}

package/dist/src/dialog/NestedDialogProvider.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/dialog/NestedDialogProvider.ts"],"sourcesContent":["\"use client\";\nimport { createContext, useContext } from \"react\";\n\nexport type SetChildDialogVisible = (visible: boolean) => void;\n\nconst context = createContext<SetChildDialogVisible>(() => {\n  // do nothing\n});\ncontext.displayName = \"NestedDialog\";\nexport const { Provider: NestedDialogProvider } = context;\n\nexport function useNestedDialogContext(): SetChildDialogVisible {\n  return useContext(context);\n}\n"],"names":["createContext","useContext","context","displayName","Provider","NestedDialogProvider","useNestedDialogContext"],"mappings":"AAAA;AACA,SAASA,aAAa,EAAEC,UAAU,QAAQ,QAAQ;AAIlD,MAAMC,UAAUF,cAAqC;AACnD,aAAa;AACf;AACAE,QAAQC,WAAW,GAAG;AACtB,OAAO,MAAM,EAAEC,UAAUC,oBAAoB,EAAE,GAAGH,QAAQ;AAE1D,OAAO,SAASI;IACd,OAAOL,WAAWC;AACpB"}

package/dist/src/dialog/styles.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/dialog/styles.ts"],"sourcesContent":["import { cnb } from \"cnbuilder\";\nimport { bem } from \"../utils/bem.js\";\n\nconst styles = bem(\"rmd-dialog\");\n\nexport type DialogType = \"full-page\" | \"centered\" | \"custom\";\n\n/** @remarks \\@since 6.0.0 */\nexport interface DialogClassNameOptions {\n  className?: string;\n\n  /**\n   * @defaultValue `\"centered\"`\n   */\n  type?: DialogType;\n\n  /**\n   * @defaultValue `false`\n   */\n  fixed?: boolean;\n\n  /**\n   * @defaultValue `type === \"full-page\"`\n   */\n  outline?: boolean;\n}\n\n/** @remarks \\@since 6.0.0 */\nexport function dialog(options: DialogClassNameOptions = {}): string {\n  const {\n    type = \"centered\",\n    fixed = false,\n    outline = type === \"full-page\",\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    }),\n    className\n  );\n}\n\n/** @remarks \\@since 6.0.0 */\nexport interface DialogHeaderClassNameOptions {\n  className?: string;\n}\n\n/** @remarks \\@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/** @remarks \\@since 6.0.0 */\nexport interface DialogContentClassNameOptions {\n  className?: string;\n\n  /** @defaultValue `false` */\n  disablePadding?: boolean;\n}\n\n/** @remarks \\@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 * @remarks \\@since 3.1.0\n */\nexport type DialogFooterAlignment =\n  | \"none\"\n  | \"start\"\n  | \"end\"\n  | \"between\"\n  | \"stacked-start\"\n  | \"stacked-end\";\n\n/** @remarks \\@since 6.0.0 */\nexport interface DialogFooterClassNameOptions {\n  className?: string;\n\n  /** @defaultValue `\"end\"` */\n  align?: DialogFooterAlignment;\n}\n\n/** @remarks \\@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"],"names":["cnb","bem","styles","dialog","options","type","fixed","outline","className","centered","dialogHeader","dialogContent","disablePadding","padded","dialogFooter","align","flex","start","between","end"],"mappings":"AAAA,SAASA,GAAG,QAAQ,YAAY;AAChC,SAASC,GAAG,QAAQ,kBAAkB;AAEtC,MAAMC,SAASD,IAAI;AAwBnB,2BAA2B,GAC3B,OAAO,SAASE,OAAOC,UAAkC,CAAC,CAAC;IACzD,MAAM,EACJC,OAAO,UAAU,EACjBC,QAAQ,KAAK,EACbC,UAAUF,SAAS,WAAW,EAC9BG,SAAS,EACV,GAAGJ;IAEJ,OAAOJ,IACLE,OAAO;QACLI;QACAC;QACAE,UAAUJ,SAAS;QACnB,aAAaA,SAAS;IACxB,IACAG;AAEJ;AAOA,2BAA2B,GAC3B,OAAO,SAASE,aACdN,UAAwC,CAAC,CAAC;IAE1C,MAAM,EAAEI,SAAS,EAAE,GAAGJ;IAEtB,OAAOJ,IAAIE,OAAO,WAAWM;AAC/B;AAUA,2BAA2B,GAC3B,OAAO,SAASG,cACdP,UAAyC,CAAC,CAAC;IAE3C,MAAM,EAAEI,SAAS,EAAEI,iBAAiB,KAAK,EAAE,GAAGR;IAE9C,OAAOJ,IAAIE,OAAO,WAAW;QAAEW,QAAQ,CAACD;IAAe,IAAIJ;AAC7D;AAyBA,2BAA2B,GAC3B,OAAO,SAASM,aACdV,UAAwC,CAAC,CAAC;IAE1C,MAAM,EAAEW,QAAQ,KAAK,EAAEP,SAAS,EAAE,GAAGJ;IAErC,OAAOJ,IACLE,OAAO,UAAU;QACfc,MAAMD,UAAU;QAChB,UAAUA,UAAU,mBAAmBA,UAAU;QACjDE,OAAOF,UAAU,WAAWA,UAAU;QACtCG,SAASH,UAAU;QACnBI,KAAKJ,UAAU,SAASA,UAAU;IACpC,IACAP;AAEJ"}

package/dist/src/divider/Divider.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/divider/Divider.tsx"],"sourcesContent":["import { forwardRef, type ElementType, type HTMLAttributes } from \"react\";\nimport { divider, type DividerClassNameOptions } from \"./styles.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\nexport type DividerElement = HTMLHRElement | HTMLDivElement;\n\n/**\n * @remarks \\@since 6.0.0 Extends the {@Link DividerClassNameOptions}\n */\nexport interface DividerProps\n  extends HTMLAttributes<DividerElement>,\n    DividerClassNameOptions {}\n\n/**\n * **Server Component**\n *\n * @example\n * 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,SAASA,UAAU,QAA+C,QAAQ;AAC1E,SAASC,OAAO,QAAsC,cAAc;AAuBpE;;;;;;;;;;;;;CAaC,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/src/divider/styles.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/divider/styles.ts"],"sourcesContent":["import { cnb } from \"cnbuilder\";\nimport { bem } from \"../utils/bem.js\";\n\nconst styles = bem(\"rmd-divider\");\n\n/** @remarks \\@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 * @remarks \\@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;AAChC,SAASC,GAAG,QAAQ,kBAAkB;AAEtC,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/src/draggable/useDraggable.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/draggable/useDraggable.ts"],"sourcesContent":["\"use client\";\nimport { cnb } from \"cnbuilder\";\nimport type { HTMLAttributes, Ref, RefCallback } from \"react\";\nimport { useCallback, useEffect, useRef, useState } from \"react\";\nimport { useUserInteractionMode } from \"../interaction/UserInteractionModeProvider.js\";\nimport { useScrollLock } from \"../scroll/useScrollLock.js\";\nimport type {\n  NonNullRef,\n  UseStateInitializer,\n  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 * @remarks \\@since 6.0.0\n */\nexport type DraggableTouchEventHandlers<E extends HTMLElement> = Pick<\n  HTMLAttributes<E>,\n  \"onTouchStart\" | \"onTouchMove\"\n>;\n\n/**\n * @remarks \\@since 6.0.0\n */\nexport type DraggableMouseEventHandlers<E extends HTMLElement> = Pick<\n  HTMLAttributes<E>,\n  \"onMouseDown\" | \"onMouseUp\" | \"onMouseMove\"\n>;\n\n/**\n * @remarks \\@since 6.0.0\n */\nexport type DraggableKeyboardEventHandlers<E extends HTMLElement> = Pick<\n  HTMLAttributes<E>,\n  \"onKeyDown\"\n>;\n\n/**\n * @remarks \\@since 6.0.0\n */\nexport type DraggableEventHandlers<E extends HTMLElement> =\n  DraggableTouchEventHandlers<E> &\n    DraggableMouseEventHandlers<E> &\n    DraggableKeyboardEventHandlers<E>;\n\n/**\n * @remarks \\@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 * @remarks \\@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\n   * 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 * @remarks \\@since 6.0.0\n */\nexport interface UncontrolledDraggableOptions {\n  value?: never;\n  setValue?: never;\n  dragging?: never;\n  setDragging?: never;\n}\n\n/**\n * @remarks \\@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 * @remarks \\@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 * @remarks \\@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 * @remarks \\@since 6.0.0\n */\nexport type DraggableStateOptions =\n  | UncontrolledDraggableOptions\n  | ControlledValueDraggableOptions\n  | ControlledDraggingDraggableOptions\n  | FullyControlledDraggableOptions;\n\n/**\n * @remarks \\@since 6.0.0\n */\nexport type DraggableOptions<E extends HTMLElement = HTMLElement> =\n  BaseDraggableOptions<E> & DraggableStateOptions;\n\n/**\n * @remarks \\@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 * @remarks \\@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      draggingRef.current = false;\n      setDragging(false);\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    // ensure that if the `min`, `max`, or `step` value changes that the value\n    // is updated as well. Without this, there will be a runtime error if the\n    // value is not within the new range.\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        // dont' 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 ? \"ArrowUp\" : \"ArrowLeft\";\n        const incrementKey = vertical ? \"ArrowDown\" : \"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","updateKey","stopKey","passive","undefined","window","addEventListener","removeEventListener","prevRange","steps","mouseEventHandlers","keyboardEventHandlers","decrementKey","incrementKey","key","touchEventHandlers","draggableRef"],"mappings":"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AAO,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,GAAGyC,kBAAkB;QACrB,GAAGL,kBAAkB;QACrB,GAAGC,qBAAqB;QACxB1C;QACAE;QACAN;QACAE;QACAmB;QACAC;QACAC;QACAE;QACAE;QACAwB,cAAclE;QACdmC;QACAJ;QACAkC;QACAL;QACAC;IACF;AACF"}

package/dist/src/draggable/utils.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/draggable/utils.ts"],"sourcesContent":["import { type MouseEvent, type RefObject, type TouchEvent } from \"react\";\nimport {\n  getClientPosition,\n  type ClientPositionEvent,\n  type ClientPositionOptions,\n} from \"../utils/getClientPosition.js\";\nimport { getRangeSteps } from \"../utils/getRangeSteps.js\";\nimport { nearest } from \"../utils/nearest.js\";\nimport { withinRange } from \"../utils/withinRange.js\";\n\n/**\n * @internal\n */\nexport const isMouseDragStartEvent = (event: MouseEvent): boolean =>\n  event.button === 0 &&\n  !event.altKey &&\n  !event.metaKey &&\n  !event.ctrlKey &&\n  !event.shiftKey;\n\n/**\n * @internal\n */\nexport const isTouchDragStartEvent = (event: TouchEvent): boolean =>\n  event.changedTouches.length === 1;\n\n/**\n * @internal\n */\ninterface DragPositionOptions extends ClientPositionOptions {\n  isRTL: boolean;\n  reversed: boolean;\n  container: Element;\n}\n\n/**\n * @internal\n */\nexport const getDragPosition = (options: DragPositionOptions): number => {\n  const { isRTL, reversed, vertical, container } = options;\n\n  const clientPosition = getClientPosition(options);\n  const { left, right, top } = container.getBoundingClientRect();\n  if (vertical) {\n    if (reversed) {\n      return window.innerHeight - clientPosition;\n    }\n\n    // added `Math.max` since the `top` will be a negative number if rendered\n    // within a portal element like a dialog/sheet\n    return clientPosition - Math.max(0, top);\n  }\n\n  if (reversed ? !isRTL : isRTL) {\n    return right - clientPosition;\n  }\n\n  return clientPosition - left;\n};\n\n/**\n * @internal\n */\ninterface RelativeDragPositionOptions extends DragPositionOptions {\n  min: number;\n  max: number;\n  step: number;\n  rangeMin: number;\n  rangeMax: number;\n}\n\n/**\n * @internal\n */\ninterface RelativeDragPosition {\n  value: number;\n  dragPercentage: number;\n}\n\n/**\n * @internal\n */\nexport const getRelativeDragPosition = (\n  options: RelativeDragPositionOptions\n): RelativeDragPosition => {\n  const { min, max, rangeMin, rangeMax, step, isRTL, vertical, container } =\n    options;\n\n  const { height, width, left, top } = container.getBoundingClientRect();\n  const containerSize = vertical ? height : width;\n  const containerPosition = vertical ? top + height : left;\n  const clientPosition = getClientPosition(options);\n\n  const position = vertical\n    ? containerPosition - clientPosition\n    : clientPosition - containerPosition;\n  const distanceDragged = Math.min(Math.max(0, position), containerSize);\n  let dragPercentage = distanceDragged / containerSize;\n  if (isRTL && !vertical) {\n    dragPercentage = 1 - dragPercentage;\n  }\n\n  const range = rangeMax - rangeMin;\n  const steps = getRangeSteps({ min: rangeMin, max: rangeMax, step });\n  const value = dragPercentage * range + rangeMin;\n  const nextValue = nearest({\n    min,\n    max,\n    steps,\n    range,\n    value,\n  });\n\n  return {\n    value: nextValue,\n    dragPercentage,\n  };\n};\n\n/**\n * @internal\n */\ninterface UpdateDragPositionOptions\n  extends Omit<RelativeDragPositionOptions, \"container\"> {\n  event: ClientPositionEvent;\n  nodeRef: RefObject<HTMLElement>;\n  focus?: boolean;\n  isDragStart: boolean;\n  setValue(value: number): void;\n  setDragging(dragging: boolean): void;\n  setDragPercentage(value: number): void;\n  withinOffsetParent: boolean;\n}\n\n/**\n * @internal\n */\nexport const updateDragPosition = (\n  options: UpdateDragPositionOptions\n): void => {\n  const {\n    event,\n    nodeRef,\n    min,\n    max,\n    step,\n    rangeMin,\n    rangeMax,\n    isRTL,\n    reversed,\n    vertical,\n    isDragStart,\n    setValue,\n    setDragging,\n    setDragPercentage,\n    withinOffsetParent,\n  } = options;\n\n  const element = nodeRef.current;\n  if (!element) {\n    return;\n  }\n\n  if (isDragStart) {\n    // need to focus so that Chromium based browsers allow drag events. this\n    // really appeared while trying to create a DnD tree\n    element.focus({ preventScroll: true });\n\n    if (!withinOffsetParent && !(\"changedTouches\" in event)) {\n      return;\n    }\n\n    // unlike the other flow, start dragging immediately so that you can trigger\n    // a mousedown or touchstart event on the container element and drag until\n    // the user lets go\n    setDragging(true);\n  }\n\n  // firefox defaults to `document.body` while chrome will return `null`\n  const container = element.offsetParent || document.body;\n  if (!withinOffsetParent) {\n    const dragPosition = getDragPosition({\n      event,\n      isRTL,\n      reversed,\n      vertical,\n      container,\n    });\n    const nextValue = withinRange({\n      min,\n      max,\n      value: dragPosition,\n    });\n    setValue(nextValue);\n\n    return;\n  }\n\n  const { value, dragPercentage } = getRelativeDragPosition({\n    min,\n    max,\n    rangeMin,\n    rangeMax,\n    step,\n    event,\n    isRTL,\n    reversed,\n    vertical,\n    container,\n  });\n\n  setValue(value);\n  setDragPercentage(dragPercentage);\n};\n\n/**\n * @internal\n * @remarks \\@since 6.0.0\n */\nexport interface DeserializeDraggableValueOptions {\n  min: number;\n  max: number;\n  item: string;\n}\n\n/**\n * @internal\n * @remarks \\@since 6.0.0\n */\nexport function deserializeDraggableValue(\n  options: DeserializeDraggableValueOptions\n): number {\n  const { item, min, max } = options;\n\n  const value = parseFloat(item);\n  if (Number.isNaN(item)) {\n    return min;\n  }\n\n  return Math.max(min, Math.min(max, value));\n}\n"],"names":["getClientPosition","getRangeSteps","nearest","withinRange","isMouseDragStartEvent","event","button","altKey","metaKey","ctrlKey","shiftKey","isTouchDragStartEvent","changedTouches","length","getDragPosition","options","isRTL","reversed","vertical","container","clientPosition","left","right","top","getBoundingClientRect","window","innerHeight","Math","max","getRelativeDragPosition","min","rangeMin","rangeMax","step","height","width","containerSize","containerPosition","position","distanceDragged","dragPercentage","range","steps","value","nextValue","updateDragPosition","nodeRef","isDragStart","setValue","setDragging","setDragPercentage","withinOffsetParent","element","current","focus","preventScroll","offsetParent","document","body","dragPosition","deserializeDraggableValue","item","parseFloat","Number","isNaN"],"mappings":"AACA,SACEA,iBAAiB,QAGZ,gCAAgC;AACvC,SAASC,aAAa,QAAQ,4BAA4B;AAC1D,SAASC,OAAO,QAAQ,sBAAsB;AAC9C,SAASC,WAAW,QAAQ,0BAA0B;AAEtD;;CAEC,GACD,OAAO,MAAMC,wBAAwB,CAACC,QACpCA,MAAMC,MAAM,KAAK,KACjB,CAACD,MAAME,MAAM,IACb,CAACF,MAAMG,OAAO,IACd,CAACH,MAAMI,OAAO,IACd,CAACJ,MAAMK,QAAQ,CAAC;AAElB;;CAEC,GACD,OAAO,MAAMC,wBAAwB,CAACN,QACpCA,MAAMO,cAAc,CAACC,MAAM,KAAK,EAAE;AAWpC;;CAEC,GACD,OAAO,MAAMC,kBAAkB,CAACC;IAC9B,MAAM,EAAEC,KAAK,EAAEC,QAAQ,EAAEC,QAAQ,EAAEC,SAAS,EAAE,GAAGJ;IAEjD,MAAMK,iBAAiBpB,kBAAkBe;IACzC,MAAM,EAAEM,IAAI,EAAEC,KAAK,EAAEC,GAAG,EAAE,GAAGJ,UAAUK,qBAAqB;IAC5D,IAAIN,UAAU;QACZ,IAAID,UAAU;YACZ,OAAOQ,OAAOC,WAAW,GAAGN;QAC9B;QAEA,yEAAyE;QACzE,8CAA8C;QAC9C,OAAOA,iBAAiBO,KAAKC,GAAG,CAAC,GAAGL;IACtC;IAEA,IAAIN,WAAW,CAACD,QAAQA,OAAO;QAC7B,OAAOM,QAAQF;IACjB;IAEA,OAAOA,iBAAiBC;AAC1B,EAAE;AAqBF;;CAEC,GACD,OAAO,MAAMQ,0BAA0B,CACrCd;IAEA,MAAM,EAAEe,GAAG,EAAEF,GAAG,EAAEG,QAAQ,EAAEC,QAAQ,EAAEC,IAAI,EAAEjB,KAAK,EAAEE,QAAQ,EAAEC,SAAS,EAAE,GACtEJ;IAEF,MAAM,EAAEmB,MAAM,EAAEC,KAAK,EAAEd,IAAI,EAAEE,GAAG,EAAE,GAAGJ,UAAUK,qBAAqB;IACpE,MAAMY,gBAAgBlB,WAAWgB,SAASC;IAC1C,MAAME,oBAAoBnB,WAAWK,MAAMW,SAASb;IACpD,MAAMD,iBAAiBpB,kBAAkBe;IAEzC,MAAMuB,WAAWpB,WACbmB,oBAAoBjB,iBACpBA,iBAAiBiB;IACrB,MAAME,kBAAkBZ,KAAKG,GAAG,CAACH,KAAKC,GAAG,CAAC,GAAGU,WAAWF;IACxD,IAAII,iBAAiBD,kBAAkBH;IACvC,IAAIpB,SAAS,CAACE,UAAU;QACtBsB,iBAAiB,IAAIA;IACvB;IAEA,MAAMC,QAAQT,WAAWD;IACzB,MAAMW,QAAQzC,cAAc;QAAE6B,KAAKC;QAAUH,KAAKI;QAAUC;IAAK;IACjE,MAAMU,QAAQH,iBAAiBC,QAAQV;IACvC,MAAMa,YAAY1C,QAAQ;QACxB4B;QACAF;QACAc;QACAD;QACAE;IACF;IAEA,OAAO;QACLA,OAAOC;QACPJ;IACF;AACF,EAAE;AAiBF;;CAEC,GACD,OAAO,MAAMK,qBAAqB,CAChC9B;IAEA,MAAM,EACJV,KAAK,EACLyC,OAAO,EACPhB,GAAG,EACHF,GAAG,EACHK,IAAI,EACJF,QAAQ,EACRC,QAAQ,EACRhB,KAAK,EACLC,QAAQ,EACRC,QAAQ,EACR6B,WAAW,EACXC,QAAQ,EACRC,WAAW,EACXC,iBAAiB,EACjBC,kBAAkB,EACnB,GAAGpC;IAEJ,MAAMqC,UAAUN,QAAQO,OAAO;IAC/B,IAAI,CAACD,SAAS;QACZ;IACF;IAEA,IAAIL,aAAa;QACf,wEAAwE;QACxE,oDAAoD;QACpDK,QAAQE,KAAK,CAAC;YAAEC,eAAe;QAAK;QAEpC,IAAI,CAACJ,sBAAsB,CAAE,CAAA,oBAAoB9C,KAAI,GAAI;YACvD;QACF;QAEA,4EAA4E;QAC5E,0EAA0E;QAC1E,mBAAmB;QACnB4C,YAAY;IACd;IAEA,sEAAsE;IACtE,MAAM9B,YAAYiC,QAAQI,YAAY,IAAIC,SAASC,IAAI;IACvD,IAAI,CAACP,oBAAoB;QACvB,MAAMQ,eAAe7C,gBAAgB;YACnCT;YACAW;YACAC;YACAC;YACAC;QACF;QACA,MAAMyB,YAAYzC,YAAY;YAC5B2B;YACAF;YACAe,OAAOgB;QACT;QACAX,SAASJ;QAET;IACF;IAEA,MAAM,EAAED,KAAK,EAAEH,cAAc,EAAE,GAAGX,wBAAwB;QACxDC;QACAF;QACAG;QACAC;QACAC;QACA5B;QACAW;QACAC;QACAC;QACAC;IACF;IAEA6B,SAASL;IACTO,kBAAkBV;AACpB,EAAE;AAYF;;;CAGC,GACD,OAAO,SAASoB,0BACd7C,OAAyC;IAEzC,MAAM,EAAE8C,IAAI,EAAE/B,GAAG,EAAEF,GAAG,EAAE,GAAGb;IAE3B,MAAM4B,QAAQmB,WAAWD;IACzB,IAAIE,OAAOC,KAAK,CAACH,OAAO;QACtB,OAAO/B;IACT;IAEA,OAAOH,KAAKC,GAAG,CAACE,KAAKH,KAAKG,GAAG,CAACF,KAAKe;AACrC"}

package/dist/src/expansion-panel/ExpansionList.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/expansion-panel/ExpansionList.tsx"],"sourcesContent":["\"use client\";\nimport { forwardRef, type HTMLAttributes, type ReactNode } from \"react\";\nimport { KeyboardMovementProvider } from \"../movement/useKeyboardMovementProvider.js\";\nimport { useExpansionList } from \"./useExpansionList.js\";\n\n/**\n * @remarks \\@since 6.0.0 No longer requires the `onKeyDown` prop.\n */\nexport interface ExpansionListProps extends HTMLAttributes<HTMLDivElement> {\n  children: ReactNode;\n}\n\n/**\n * **Client Component**\n *\n * This component is only used to implement the keyboard movement behavior for\n * the `ExpansionPanel` components.\n *\n * @see {@link useExpansionList} for a custom implementation example if you do\n * not want to use a `<div>` for this wrapper component.\n * @remarks \\@since 6.0.0 Uses the new keyboard movement API and does not\n * require the `onKeyDOwn` prop to be provided.\n */\nexport const ExpansionList = forwardRef<HTMLDivElement, ExpansionListProps>(\n  function ExpansionList(props, ref) {\n    const { onClick, onFocus, onKeyDown, children, ...remaining } = props;\n\n    const { movementContext, movementProps } = useExpansionList({\n      onClick,\n      onFocus,\n      onKeyDown,\n    });\n\n    return (\n      <KeyboardMovementProvider value={movementContext}>\n        <div {...remaining} {...movementProps} ref={ref}>\n          {children}\n        </div>\n      </KeyboardMovementProvider>\n    );\n  }\n);\n"],"names":["forwardRef","KeyboardMovementProvider","useExpansionList","ExpansionList","props","ref","onClick","onFocus","onKeyDown","children","remaining","movementContext","movementProps","value","div"],"mappings":"AAAA;;AACA,SAASA,UAAU,QAA6C,QAAQ;AACxE,SAASC,wBAAwB,QAAQ,6CAA6C;AACtF,SAASC,gBAAgB,QAAQ,wBAAwB;AASzD;;;;;;;;;;CAUC,GACD,OAAO,MAAMC,8BAAgBH,WAC3B,SAASG,cAAcC,KAAK,EAAEC,GAAG;IAC/B,MAAM,EAAEC,OAAO,EAAEC,OAAO,EAAEC,SAAS,EAAEC,QAAQ,EAAE,GAAGC,WAAW,GAAGN;IAEhE,MAAM,EAAEO,eAAe,EAAEC,aAAa,EAAE,GAAGV,iBAAiB;QAC1DI;QACAC;QACAC;IACF;IAEA,qBACE,KAACP;QAAyBY,OAAOF;kBAC/B,cAAA,KAACG;YAAK,GAAGJ,SAAS;YAAG,GAAGE,aAAa;YAAEP,KAAKA;sBACzCI;;;AAIT,GACA"}

package/dist/src/expansion-panel/ExpansionPanel.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/expansion-panel/ExpansionPanel.tsx"],"sourcesContent":["\"use client\";\nimport { cnb } from \"cnbuilder\";\nimport { forwardRef, type CSSProperties, type ReactNode } from \"react\";\nimport { Card, type CardProps } from \"../card/Card.js\";\nimport { CardContent, type CardContentProps } from \"../card/CardContent.js\";\nimport { useCollapseTransition } from \"../transition/useCollapseTransition.js\";\nimport { type PropsWithRef } from \"../types.js\";\nimport { useEnsuredId } from \"../useEnsuredId.js\";\nimport { bem } from \"../utils/bem.js\";\nimport {\n  ExpansionPanelHeader,\n  type ExpansionPanelHeaderProps,\n} from \"./ExpansionPanelHeader.js\";\n\nconst styles = bem(\"rmd-expansion-panel\");\n\n/** @remarks \\@since 6.0.0 */\nexport interface ExpansionPanelClassNameOptions {\n  className?: string;\n\n  /**\n   * @defaultValue `false`\n   */\n  expanded?: boolean;\n\n  /**\n   * Set this to `true` to disable the `margin-top` transition between multiple\n   * panels\n   *\n   * @defaultValue `false`\n   */\n  disableTransition?: boolean;\n}\n\n/**\n * @remarks \\@since 6.0.0\n */\nexport function expansionPanel(\n  options: ExpansionPanelClassNameOptions = {}\n): string {\n  const { className, expanded = false, disableTransition = false } = options;\n\n  return cnb(styles({ expanded, animate: !disableTransition }), className);\n}\n\n/**\n * @remarks \\@since 6.0.0 Renamed some card props and updated for the latest\n * API.\n */\nexport interface ExpansionPanelProps extends CardProps {\n  /**\n   * Set this to `true` if the {@link children} should be visible. This should\n   * generally be provided by the `useExpansionPanels` hook.\n   */\n  expanded: boolean;\n\n  /**\n   * A function that should toggle the {@link expanded} state. This should\n   * generally be provided by the `useExpansionPanels` hook.\n   */\n  onExpandClick(): void;\n\n  /**\n   * Set this to `true` to prevent the panel from toggling the {@link expanded}\n   * state. This should generally be provided by the `useExpansionPanels` hook.\n   *\n   * @defaultValue `false`\n   */\n  disabled?: boolean;\n\n  /**\n   * @defaultValue `true`\n   * @see {@link CardProps.fullWidth}\n   */\n  fullWidth?: boolean;\n\n  /**\n   * This can be used to implement a custom header implementation, but it\n   * probably shouldn't be needed.\n   *\n   * @remarks \\@since 6.0.0 This was renamed from `customHeader`\n   * @see {@link headerProps}\n   */\n  header?: ReactNode;\n\n  /**\n   * This can be used to apply additional props to the header element.\n   *\n   * Note: You can override the `style` and `className` using\n   * {@link headerStyle} and {@link headerClassName} instead for convenience.\n   *\n   * @example\n   * ```tsx\n   * <ExpansionPanel\n   *   {...props}\n   *   headerProps={{\n   *     style: {\n   *       // custom inline style\n   *     },\n   *     className: \"come-class-name\",\n   *     icon: <MyCustomIcon />,\n   *     iconRotatorProps: {\n   *       className: \"another-custom-class-name\",\n   *     },\n   *   }}\n   * />\n   * ```\n   */\n  headerProps?: Omit<\n    ExpansionPanelHeaderProps,\n    \"id\" | \"aria-disabled\" | \"onClick\" | \"expanded\"\n  >;\n\n  /**\n   * Convenience prop to apply custom style to the `ExpansionPanelHeader`\n   * component.\n   */\n  headerStyle?: CSSProperties;\n\n  /**\n   * Convenience prop to apply custom class name to the `ExpansionPanelHeader`\n   * component.\n   */\n  headerClassName?: string;\n\n  /**\n   * Content to display within the header of the expansion panel that toggles\n   * the expanded state. THis should generally contain some accessible text\n   * describing the expansion panel's content.\n   *\n   * @remarks \\@since 6.0.0 THis was renamed from `header`\n   */\n  headerChildren?: ReactNode;\n\n  /**\n   * This can be used to apply additional props to the `CardContent` component\n   * if needed.\n   *\n   * Note: The `disableLastChildPadding` defaults to `true` in this\n   * implementation.\n   *\n   * @example\n   * ```tsx\n   * contentProps={{\n   *   style: {},\n   *   className: \"some-class-name\",\n   *   disablePadding: true,\n   *   disableSecondaryColor: true,\n   *   disableLastChildPadding: false,\n   *   // whatever else\n   * }}\n   * ```\n   *\n   * @see {@link contentStyle}\n   * @see {@link contentClassName}\n   * @see {@link disableContentPadding}\n   */\n  contentProps?: PropsWithRef<Omit<CardContentProps, \"role\">, HTMLDivElement>;\n\n  /**\n   * Convenience prop to apply custom style to the `CardContent` component.\n   */\n  contentStyle?: CSSProperties;\n\n  /**\n   * Convenience prop to apply custom class name to the `CardContent` component.\n   */\n  contentClassName?: string;\n\n  /**\n   * Set to `true` to disable the collapse transition for the card content\n   * whenever the {@link expanded} state changes.\n   *\n   * @defaultValue `false`\n   */\n  disableTransition?: boolean;\n\n  /**\n   * @defaultValue `false`\n   * @see {@link CardContentProps.disablePadding}\n   */\n  disableContentPadding?: boolean;\n\n  /**\n   * Set this to `true` to unmount the {@link children} when the\n   * {@link expanded} state is `false`.\n   *\n   * @defaultValue `false`\n   * @remarks \\@since 6.0.0 Renamed from `persistent` to match the\n   * `useCollapseTransition` naming convention.\n   */\n  temporary?: boolean;\n}\n\n/**\n * **Client Component**\n *\n * @see `useExpansionPanels` for examples.\n * @remarks\n * \\@since 6.0.0 The content will be persistent and invisible using `display: none`\n * instead of unmounting and also animate the `margin-top` style.\n */\nexport const ExpansionPanel = forwardRef<\n  HTMLHeadingElement,\n  ExpansionPanelProps\n>(function ExpansionPanel(props, ref) {\n  const {\n    id: propId,\n    className,\n    contentProps,\n    contentStyle,\n    contentClassName,\n    header: propHeader,\n    headerProps,\n    headerStyle,\n    headerClassName,\n    headerChildren,\n    children,\n    expanded,\n    onExpandClick,\n    disabled = false,\n    fullWidth = true,\n    temporary = false,\n    disableTransition = false,\n    disableContentPadding = false,\n    ...remaining\n  } = props;\n\n  const id = useEnsuredId(propId, \"expansion-panel\");\n  const { elementProps, rendered } = useCollapseTransition({\n    nodeRef: contentProps?.ref,\n    style: contentStyle,\n    className: contentClassName,\n    timeout: disableTransition ? 0 : undefined,\n    temporary,\n    transitionIn: expanded,\n  });\n\n  let header = propHeader;\n  if (typeof header === \"undefined\") {\n    header = (\n      <ExpansionPanelHeader\n        style={headerStyle}\n        className={headerClassName}\n        disableTransition={disableTransition}\n        {...headerProps}\n        aria-disabled={disabled || undefined}\n        id={id}\n        onClick={onExpandClick}\n        expanded={expanded}\n      >\n        {headerChildren}\n      </ExpansionPanelHeader>\n    );\n  }\n\n  return (\n    <Card\n      {...remaining}\n      id={`${id}-container`}\n      ref={ref}\n      fullWidth={fullWidth}\n      className={expansionPanel({\n        expanded,\n        disableTransition,\n        className,\n      })}\n    >\n      {header}\n      {rendered && (\n        <CardContent\n          id={`${id}-content`}\n          aria-labelledby={id}\n          disablePadding={disableContentPadding}\n          disableSecondaryColor\n          disableLastChildPadding\n          {...contentProps}\n          {...elementProps}\n          role=\"region\"\n        >\n          {children}\n        </CardContent>\n      )}\n    </Card>\n  );\n});\n"],"names":["cnb","forwardRef","Card","CardContent","useCollapseTransition","useEnsuredId","bem","ExpansionPanelHeader","styles","expansionPanel","options","className","expanded","disableTransition","animate","ExpansionPanel","props","ref","id","propId","contentProps","contentStyle","contentClassName","header","propHeader","headerProps","headerStyle","headerClassName","headerChildren","children","onExpandClick","disabled","fullWidth","temporary","disableContentPadding","remaining","elementProps","rendered","nodeRef","style","timeout","undefined","transitionIn","aria-disabled","onClick","aria-labelledby","disablePadding","disableSecondaryColor","disableLastChildPadding","role"],"mappings":"AAAA;;AACA,SAASA,GAAG,QAAQ,YAAY;AAChC,SAASC,UAAU,QAA4C,QAAQ;AACvE,SAASC,IAAI,QAAwB,kBAAkB;AACvD,SAASC,WAAW,QAA+B,yBAAyB;AAC5E,SAASC,qBAAqB,QAAQ,yCAAyC;AAE/E,SAASC,YAAY,QAAQ,qBAAqB;AAClD,SAASC,GAAG,QAAQ,kBAAkB;AACtC,SACEC,oBAAoB,QAEf,4BAA4B;AAEnC,MAAMC,SAASF,IAAI;AAoBnB;;CAEC,GACD,OAAO,SAASG,eACdC,UAA0C,CAAC,CAAC;IAE5C,MAAM,EAAEC,SAAS,EAAEC,WAAW,KAAK,EAAEC,oBAAoB,KAAK,EAAE,GAAGH;IAEnE,OAAOV,IAAIQ,OAAO;QAAEI;QAAUE,SAAS,CAACD;IAAkB,IAAIF;AAChE;AAuJA;;;;;;;CAOC,GACD,OAAO,MAAMI,+BAAiBd,WAG5B,SAASc,eAAeC,KAAK,EAAEC,GAAG;IAClC,MAAM,EACJC,IAAIC,MAAM,EACVR,SAAS,EACTS,YAAY,EACZC,YAAY,EACZC,gBAAgB,EAChBC,QAAQC,UAAU,EAClBC,WAAW,EACXC,WAAW,EACXC,eAAe,EACfC,cAAc,EACdC,QAAQ,EACRjB,QAAQ,EACRkB,aAAa,EACbC,WAAW,KAAK,EAChBC,YAAY,IAAI,EAChBC,YAAY,KAAK,EACjBpB,oBAAoB,KAAK,EACzBqB,wBAAwB,KAAK,EAC7B,GAAGC,WACJ,GAAGnB;IAEJ,MAAME,KAAKb,aAAac,QAAQ;IAChC,MAAM,EAAEiB,YAAY,EAAEC,QAAQ,EAAE,GAAGjC,sBAAsB;QACvDkC,SAASlB,cAAcH;QACvBsB,OAAOlB;QACPV,WAAWW;QACXkB,SAAS3B,oBAAoB,IAAI4B;QACjCR;QACAS,cAAc9B;IAChB;IAEA,IAAIW,SAASC;IACb,IAAI,OAAOD,WAAW,aAAa;QACjCA,uBACE,KAAChB;YACCgC,OAAOb;YACPf,WAAWgB;YACXd,mBAAmBA;YAClB,GAAGY,WAAW;YACfkB,iBAAeZ,YAAYU;YAC3BvB,IAAIA;YACJ0B,SAASd;YACTlB,UAAUA;sBAETgB;;IAGP;IAEA,qBACE,MAAC1B;QACE,GAAGiC,SAAS;QACbjB,IAAI,CAAC,EAAEA,GAAG,UAAU,CAAC;QACrBD,KAAKA;QACLe,WAAWA;QACXrB,WAAWF,eAAe;YACxBG;YACAC;YACAF;QACF;;YAECY;YACAc,0BACC,KAAClC;gBACCe,IAAI,CAAC,EAAEA,GAAG,QAAQ,CAAC;gBACnB2B,mBAAiB3B;gBACjB4B,gBAAgBZ;gBAChBa,qBAAqB;gBACrBC,uBAAuB;gBACtB,GAAG5B,YAAY;gBACf,GAAGgB,YAAY;gBAChBa,MAAK;0BAEJpB;;;;AAKX,GAAG"}

package/dist/src/expansion-panel/ExpansionPanelHeader.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/expansion-panel/ExpansionPanelHeader.tsx"],"sourcesContent":["import { cnb } from \"cnbuilder\";\nimport {\n  forwardRef,\n  type ButtonHTMLAttributes,\n  type MouseEventHandler,\n  type ReactNode,\n} from \"react\";\nimport { ButtonUnstyled } from \"../button/ButtonUnstyled.js\";\nimport { getIcon } from \"../icon/iconConfig.js\";\nimport { IconRotator, type IconRotatorProps } from \"../icon/IconRotator.js\";\nimport { type PropsWithRef } from \"../types.js\";\nimport {\n  Typography,\n  type TypographyProps,\n  type TypographyType,\n} from \"../typography/Typography.js\";\n\n/**\n * @remarks \\@since 6.0.0 Updated to include additional heading/Typography\n * props.\n */\nexport interface ExpansionPanelHeaderProps\n  extends ButtonHTMLAttributes<HTMLButtonElement> {\n  id: string;\n\n  /**\n   * This should be a function that toggles the expansion state for the parent\n   * `ExpansionPanel`.\n   */\n  onClick: MouseEventHandler<HTMLButtonElement>;\n  expanded: boolean;\n\n  /**\n   * @defaultValue `\"h3\"`\n   */\n  as?: \"h1\" | \"h2\" | \"h3\" | \"h4\" | \"h5\" | \"h6\";\n\n  /**\n   * @defaultValue `getIcon(\"expander\")`\n   */\n  icon?: ReactNode;\n\n  /**\n   * @defaultValue `\"subtitle-1\"`\n   */\n  headingType?: TypographyType;\n\n  /**\n   * Any additional props to provide to the heading element that wraps the\n   * expansion panel button.\n   */\n  headingProps?: PropsWithRef<TypographyProps, HTMLHeadingElement>;\n  iconRotatorProps?: Omit<IconRotatorProps, \"rotated\" | \"disableTransition\">;\n\n  /**\n   * Any children to display **before** the button in the heading element. This\n   * should really only be used if you need to add additional clickable elements\n   * within the header.\n   */\n  beforeChildren?: ReactNode;\n\n  /**\n   * Any children to display **after** the button in the heading element.This\n   * should really only be used if you need to add additional clickable elements\n   * within the header.\n   *\n   * @example\n   * ```tsx\n   * afterChildren={\n   *   <DropdownMenu buttonType=\"icon\" ButtonChildren={<MoreVertSVGIcon />}>\n   *     <MenuItem>Item 1</MenuItem>\n   *     <MenuItem>Item 2</MenuItem>\n   *     <MenuItem>Item 3</MenuItem>\n   *   </DropdownMenu>\n   * }\n   * ```\n   */\n  afterChildren?: ReactNode;\n\n  /**\n   * @defaultValue `false`\n   */\n  disableTransition?: boolean;\n}\n\n/**\n * **Server Component**\n * This is mostly an internal component, but can also be used to implement a\n * custom header implementation if needed. This might really be a client\n * component in practice since the `onClick` prop must be provided.\n *\n * @example\n * Custom Header\n * ```tsx\n * import type { ExpansionPanelProps } from \"@react-md/core\";\n * import {\n *   ExpansionPanel,\n *   ExpansionPanelHeader,\n * } from \"@react-md/core\";\n * import type { ReactElement } from \"react\";\n * const { useId } from \"react\";\n *\n * export type CustomExpansionPanelProps = ExpansionPanelProps & { id: string; };\n *\n * export function CustomExpansionPanel(props: CustomExpansionPanelProps): ReactElement {\n *   const {\n *     id,\n *     disabled,\n *     onExpandClick,\n *     expanded,\n *     disableTransition,\n *     headerChildren,\n *   } = props;\n *\n *   return (\n *     <ExpansionPanel\n *       {...props}\n *       header={(\n *         <ExpansionPanelHeader\n *           aria-disabled={disabled || undefined}\n *           id={id}\n *           onClick={onExpandClick}\n *           expanded={expanded}\n *           disableTransition={disableTransition}\n *           // whatever props and any custom implementation\n *         >\n *           {headerChildren}\n *         </ExpansionPanelHeader>\n *       )}\n *     />\n *   );\n * }\n * ```\n *\n * @remarks \\@since 6.0.0 Updated to be wrapped by the {@link Typography}\n * component and rendered as an `<h6>`.\n */\nexport const ExpansionPanelHeader = forwardRef<\n  HTMLHeadingElement,\n  ExpansionPanelHeaderProps\n>(function ExpansionPanelHeader(props, ref) {\n  const {\n    id,\n    headingType = \"subtitle-1\",\n    headingProps,\n    iconRotatorProps,\n    icon: propIcon,\n    expanded,\n    className,\n    children,\n    beforeChildren,\n    afterChildren,\n    disableTransition = false,\n    ...remaining\n  } = props;\n\n  const icon = getIcon(\"expander\", propIcon);\n\n  return (\n    <Typography\n      ref={ref}\n      type={headingType}\n      margin=\"none\"\n      {...headingProps}\n      className={cnb(\"rmd-expansion-panel__heading\", headingProps?.className)}\n    >\n      {beforeChildren}\n      <ButtonUnstyled\n        {...remaining}\n        aria-expanded={expanded}\n        id={id}\n        className={cnb(\"rmd-expansion-panel__button\", className)}\n      >\n        {children}\n        {icon && (\n          <IconRotator\n            {...iconRotatorProps}\n            rotated={expanded}\n            disableTransition={disableTransition}\n          >\n            {icon}\n          </IconRotator>\n        )}\n      </ButtonUnstyled>\n      {afterChildren}\n    </Typography>\n  );\n});\n"],"names":["cnb","forwardRef","ButtonUnstyled","getIcon","IconRotator","Typography","ExpansionPanelHeader","props","ref","id","headingType","headingProps","iconRotatorProps","icon","propIcon","expanded","className","children","beforeChildren","afterChildren","disableTransition","remaining","type","margin","aria-expanded","rotated"],"mappings":";AAAA,SAASA,GAAG,QAAQ,YAAY;AAChC,SACEC,UAAU,QAIL,QAAQ;AACf,SAASC,cAAc,QAAQ,8BAA8B;AAC7D,SAASC,OAAO,QAAQ,wBAAwB;AAChD,SAASC,WAAW,QAA+B,yBAAyB;AAE5E,SACEC,UAAU,QAGL,8BAA8B;AAsErC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAmDC,GACD,OAAO,MAAMC,qCAAuBL,WAGlC,SAASK,qBAAqBC,KAAK,EAAEC,GAAG;IACxC,MAAM,EACJC,EAAE,EACFC,cAAc,YAAY,EAC1BC,YAAY,EACZC,gBAAgB,EAChBC,MAAMC,QAAQ,EACdC,QAAQ,EACRC,SAAS,EACTC,QAAQ,EACRC,cAAc,EACdC,aAAa,EACbC,oBAAoB,KAAK,EACzB,GAAGC,WACJ,GAAGd;IAEJ,MAAMM,OAAOV,QAAQ,YAAYW;IAEjC,qBACE,MAACT;QACCG,KAAKA;QACLc,MAAMZ;QACNa,QAAO;QACN,GAAGZ,YAAY;QAChBK,WAAWhB,IAAI,gCAAgCW,cAAcK;;YAE5DE;0BACD,MAAChB;gBACE,GAAGmB,SAAS;gBACbG,iBAAeT;gBACfN,IAAIA;gBACJO,WAAWhB,IAAI,+BAA+BgB;;oBAE7CC;oBACAJ,sBACC,KAACT;wBACE,GAAGQ,gBAAgB;wBACpBa,SAASV;wBACTK,mBAAmBA;kCAElBP;;;;YAINM;;;AAGP,GAAG"}

package/dist/src/expansion-panel/useExpansionList.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/expansion-panel/useExpansionList.ts"],"sourcesContent":["\"use client\";\nimport type {\n  FocusEventHandler,\n  KeyboardEventHandler,\n  MouseEventHandler,\n} from \"react\";\nimport type { KeyboardMovementProviderImplementation } from \"../movement/types.js\";\nimport { useKeyboardMovementProvider } from \"../movement/useKeyboardMovementProvider.js\";\n\n/**\n * @internal\n * @remarks \\@since 6.0.0\n */\nconst getPanelsOnly = (container: HTMLElement): readonly HTMLElement[] => [\n  ...container.querySelectorAll<HTMLElement>(\".rmd-expansion-panel__button\"),\n];\n\n/** @remarks \\@since 6.0.0 */\nexport interface ExpansionListHookOptions<E extends HTMLElement> {\n  onClick?: MouseEventHandler<E>;\n  onFocus?: FocusEventHandler<E>;\n  onKeyDown?: KeyboardEventHandler<E>;\n}\n\n/** @remarks \\@since 6.0.0 */\nexport type ExpansionListImplementation<E extends HTMLElement> =\n  KeyboardMovementProviderImplementation<E>;\n\n/**\n * @example\n * Custom Implementation\n * ```tsx\n * import {\n *   ExpansionPanel,\n *   Form,\n *   KeyboardMovementProvider,\n *   useExpansionList,\n *   useExpansionPanels,\n * } from \"@react-md/core\";\n * import type { ReactElement } from \"react\";\n *\n * import { BillingAddress } from \"./BillingAddress\";\n * import { BillingInformation } from \"./BillingInformation\";\n * import { PersonalInformation } from \"./PersonalInformation\";\n *\n * function Example(): ReactElement {\n *   const { movementContext, movementProps } = useExpansionList();\n *   const { getPanelProps } = useExpansionPanels();\n *\n *   return (\n *     <KeyboardMovementProvider value={movementContext}>\n *       <Form {...movementProps}>\n *         <ExpansionPanel {...getPanelProps(\"personal-information-panel\")}>\n *           <PersonalInformation />\n *         </ExpansionPanel>\n *         <ExpansionPanel {...getPanelProps(\"billing-information-panel\")}>\n *           <BillingInformation />\n *         </ExpansionPanel>\n *         <ExpansionPanel {...getPanelProps(\"billing-address-panel\")}>\n *           <BillingAddress />\n *         </ExpansionPanel>\n *       </FOrm>\n *     </KeyboardMovementProvider>\n *   );\n * }\n * ```\n *\n * @remarks \\@since 6.0.0\n */\nexport function useExpansionList<E extends HTMLElement>(\n  options: ExpansionListHookOptions<E> = {}\n): ExpansionListImplementation<E> {\n  return useKeyboardMovementProvider({\n    ...options,\n    loopable: true,\n    includeDisabled: true,\n    getFocusableElements: getPanelsOnly,\n  });\n}\n"],"names":["useKeyboardMovementProvider","getPanelsOnly","container","querySelectorAll","useExpansionList","options","loopable","includeDisabled","getFocusableElements"],"mappings":"AAAA;AAOA,SAASA,2BAA2B,QAAQ,6CAA6C;AAEzF;;;CAGC,GACD,MAAMC,gBAAgB,CAACC,YAAmD;WACrEA,UAAUC,gBAAgB,CAAc;KAC5C;AAaD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAwCC,GACD,OAAO,SAASC,iBACdC,UAAuC,CAAC,CAAC;IAEzC,OAAOL,4BAA4B;QACjC,GAAGK,OAAO;QACVC,UAAU;QACVC,iBAAiB;QACjBC,sBAAsBP;IACxB;AACF"}

package/dist/src/expansion-panel/useExpansionPanels.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/expansion-panel/useExpansionPanels.ts"],"sourcesContent":["\"use client\";\nimport { useState } from \"react\";\nimport type { UseStateInitializer, UseStateSetter } from \"../types.js\";\nimport { useEnsuredId } from \"../useEnsuredId.js\";\nimport type { ExpansionPanelProps } from \"./ExpansionPanel.js\";\n\n/** @remarks \\@since 6.0.0 */\nexport interface ExpansionPanelHookOptions {\n  /**\n   * An optional id to prefix each panel with.\n   *\n   * @defaultValue `\"expansion-panel-\" + useId()`\n   */\n  baseId?: string;\n\n  /**\n   * Set this to `true` if multiple panels can be open at the same time.\n   *\n   * @defaultValue `false`\n   */\n  multiple?: boolean;\n\n  /**\n   * Set this to `true` to enforce that at least one panel must always be\n   * expanded.\n   *\n   * @defaultValue `false`\n   */\n  preventAllCollapsed?: boolean;\n\n  /**\n   * This is a convenience option to disable the expansion transition for all\n   * panels.\n   *\n   * @defaultValue `false`\n   */\n  disableTransition?: boolean;\n\n  /**\n   * @defaultValue `preventAllCollapsed ? [\"expansion-panel-\" + useId() + \"-1\"] : []`\n   */\n  defaultExpandedIds?: UseStateInitializer<string[]>;\n\n  /**\n   * This can only be used if the {@link defaultExpandedIds} was not provided\n   * and using index based panels.\n   *\n   * @example\n   * ```tsx\n   * const { getPanelProps } = useExpansionPanels({\n   *   defaultExpandedIndex: 2,\n   * });\n   *\n   * return (\n   *   <ExpansionPanel {...getPanelProps(0)} />\n   *   <ExpansionPanel {...getPanelProps(1)} />\n   *   // expanded on first render\n   *   <ExpansionPanel {...getPanelProps(2)} />\n   *   <ExpansionPanel {...getPanelProps(3)} />\n   * );\n   * ```\n   */\n  defaultExpandedIndex?: number;\n\n  /**\n   * @defaultValue `false`\n   */\n  disableContentPadding?: boolean;\n}\n\n/** @remarks \\@since 6.0.0 */\nexport type ProvidedExpansionPanelProps = Pick<\n  Required<ExpansionPanelProps>,\n  | \"disabled\"\n  | \"expanded\"\n  | \"onExpandClick\"\n  | \"disableTransition\"\n  | \"disableContentPadding\"\n> & { id?: string };\n\n/**\n * @param indexOrPanelId - This should either be a DOM id to use for the panel\n * or the panel's index.\n * @returns Props to pass to an `ExpansionPanel` for it to work correctly.\n * @remarks \\@since 6.0.0\n */\nexport type GetExpansionPanelProps = (\n  indexOrPanelId: string | number\n) => ProvidedExpansionPanelProps;\n\n/** @remarks \\@since 6.0.0 */\nexport interface ExpansionPanelImplementation {\n  /**\n   * The current set of expanded panel ids if you need this for some reason.\n   */\n  expandedIds: ReadonlySet<string>;\n\n  /**\n   * This can be used to manually control which panels are expanded if the\n   * default behavior does not work for your use case.\n   */\n  setExpandedIds: UseStateSetter<ReadonlySet<string>>;\n\n  /**\n   * @example\n   * Index Based Panels\n   * ```tsx\n   * <ExpansionPanel {...getPanelProps(0)} />\n   * <ExpansionPanel {...getPanelProps(1)} />\n   * <ExpansionPanel {...getPanelProps(2)} />\n   * ```\n   *\n   * @example\n   * Custom Panel Ids\n   * ```tsx\n   * <ExpansionPanel {...getPanelProps(\"address-panel\")} />\n   * <ExpansionPanel {...getPanelProps(\"billing-panel\")} />\n   * <ExpansionPanel {...getPanelProps(\"confirmation-panel\")} />\n   * ```\n   */\n  getPanelProps: GetExpansionPanelProps;\n}\n\n/**\n * Use this hook to control the expanded state for a group of `ExpansionPanel`.\n *\n * @example\n * Index Based Panels\n * ```tsx\n * import {\n *   ExpansionList,\n *   ExpansionPanel,\n *   useExpansionPanels,\n * } from \"@react-md/core\";\n * import { type ReactElement } from \"react\";\n *\n * function Example(): ReactElement {\n *   const { getPanelProps } = useExpansionPanels();\n *\n *   return (\n *     <ExpansionList>\n *       <ExpansionPanel {...getPanelProps(0)} headerChildren=\"Panel 1\">\n *         Panel 1 Contents\n *       </ExpansionPanel>\n *       <ExpansionPanel {...getPanelProps(1)} headerChildren=\"Panel 2\">\n *         Panel 2 Contents\n *       </ExpansionPanel>\n *       <ExpansionPanel {...getPanelProps(2)} headerChildren=\"Panel 3\">\n *         Panel 3 Contents\n *       </ExpansionPanel>\n *     </ExpansionList>\n *   );\n * }\n * ```\n *\n * @example\n * Custom Panel Ids and Expand All Panels by Default\n * ```tsx\n * import {\n *   ExpansionList,\n *   ExpansionPanel,\n *   useExpansionPanels,\n * } from \"@react-md/core\";\n * import { type ReactElement } from \"react\";\n *\n * import { BillingAddress } from \"./BillingAddress\";\n * import { BillingInformation } from \"./BillingInformation\";\n * import { PersonalInformation } from \"./PersonalInformation\";\n *\n * const panel1Id = \"personal-information-panel\";\n * const panel2Id = \"billing-information-panel\";\n * const panel3Id = \"billing-address-panel\";\n *\n * function Example(): ReactElement {\n *   const { getPanelProps } = useExpansionPanels({\n *     multiple: true,\n *     defaultExpandedIds: () => [panel1Id, panel2Id, panel3Id],\n *   });\n *\n *   return (\n *     <ExpansionList>\n *       <ExpansionPanel {...getPanelProps(panel1Id)} headerChildren=\"Personal Information\">\n *         <PersonalInformation />\n *       </ExpansionPanel>\n *       <ExpansionPanel {...getPanelProps(panel2Id)} headerChildren=\"Billing Information\">\n *         <BillingInformation />\n *       </ExpansionPanel>\n *       <ExpansionPanel {...getPanelProps(panel3Id)} headerChildren=\"Billing Address\">\n *         <BillingAddress />\n *       </ExpansionPanel>\n *     </ExpansionList>\n *   );\n * }\n * ```\n *\n *\n * @remarks\n * \\@since 6.0.0 The hook was renamed from `usePanels` to `useExpansionPanels`,\n * the API changed to return `getPanelProps` instead of a generated list of\n * panel props based on the provided `count`, and the hook no longer supports\n * having all panels expanded by default.\n */\nexport function useExpansionPanels(\n  options: ExpansionPanelHookOptions = {}\n): ExpansionPanelImplementation {\n  const {\n    baseId: propBaseId,\n    multiple = false,\n    preventAllCollapsed = false,\n    disableTransition = false,\n    defaultExpandedIds,\n    defaultExpandedIndex,\n    disableContentPadding = false,\n  } = options;\n\n  const baseId = useEnsuredId(propBaseId, \"expansion-panel\");\n  const createId = (index: number): string => `${baseId}-${index + 1}`;\n  const [expandedIds, setExpandedIds] = useState<ReadonlySet<string>>(() => {\n    if (typeof defaultExpandedIds === \"undefined\") {\n      const initialList: string[] = [];\n      if (typeof defaultExpandedIndex === \"number\" || preventAllCollapsed) {\n        initialList.push(createId(defaultExpandedIndex ?? 0));\n      }\n\n      return new Set(initialList);\n    }\n\n    const ids =\n      typeof defaultExpandedIds === \"function\"\n        ? defaultExpandedIds()\n        : defaultExpandedIds;\n    return new Set(ids);\n  });\n\n  return {\n    expandedIds,\n    setExpandedIds,\n    getPanelProps(indexOrPanelId) {\n      let id: string | undefined;\n      let panelId: string;\n      if (typeof indexOrPanelId === \"number\") {\n        id = createId(indexOrPanelId);\n        panelId = id;\n      } else {\n        panelId = indexOrPanelId;\n      }\n\n      const expanded = expandedIds.has(panelId);\n      const disabled =\n        expanded && preventAllCollapsed && expandedIds.size === 1;\n      return {\n        id,\n        disabled,\n        expanded,\n        onExpandClick() {\n          if (disabled) {\n            return;\n          }\n\n          setExpandedIds((prevIds) => {\n            const expanded = prevIds.has(panelId);\n            if (!multiple) {\n              return new Set(expanded ? [] : [panelId]);\n            }\n\n            const nextIds = new Set(prevIds);\n            if (expanded) {\n              nextIds.delete(panelId);\n            } else {\n              nextIds.add(panelId);\n            }\n\n            return nextIds;\n          });\n        },\n        disableTransition,\n        disableContentPadding,\n      };\n    },\n  };\n}\n"],"names":["useState","useEnsuredId","useExpansionPanels","options","baseId","propBaseId","multiple","preventAllCollapsed","disableTransition","defaultExpandedIds","defaultExpandedIndex","disableContentPadding","createId","index","expandedIds","setExpandedIds","initialList","push","Set","ids","getPanelProps","indexOrPanelId","id","panelId","expanded","has","disabled","size","onExpandClick","prevIds","nextIds","delete","add"],"mappings":"AAAA;AACA,SAASA,QAAQ,QAAQ,QAAQ;AAEjC,SAASC,YAAY,QAAQ,qBAAqB;AAwHlD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA8EC,GACD,OAAO,SAASC,mBACdC,UAAqC,CAAC,CAAC;IAEvC,MAAM,EACJC,QAAQC,UAAU,EAClBC,WAAW,KAAK,EAChBC,sBAAsB,KAAK,EAC3BC,oBAAoB,KAAK,EACzBC,kBAAkB,EAClBC,oBAAoB,EACpBC,wBAAwB,KAAK,EAC9B,GAAGR;IAEJ,MAAMC,SAASH,aAAaI,YAAY;IACxC,MAAMO,WAAW,CAACC,QAA0B,CAAC,EAAET,OAAO,CAAC,EAAES,QAAQ,EAAE,CAAC;IACpE,MAAM,CAACC,aAAaC,eAAe,GAAGf,SAA8B;QAClE,IAAI,OAAOS,uBAAuB,aAAa;YAC7C,MAAMO,cAAwB,EAAE;YAChC,IAAI,OAAON,yBAAyB,YAAYH,qBAAqB;gBACnES,YAAYC,IAAI,CAACL,SAASF,wBAAwB;YACpD;YAEA,OAAO,IAAIQ,IAAIF;QACjB;QAEA,MAAMG,MACJ,OAAOV,uBAAuB,aAC1BA,uBACAA;QACN,OAAO,IAAIS,IAAIC;IACjB;IAEA,OAAO;QACLL;QACAC;QACAK,eAAcC,cAAc;YAC1B,IAAIC;YACJ,IAAIC;YACJ,IAAI,OAAOF,mBAAmB,UAAU;gBACtCC,KAAKV,SAASS;gBACdE,UAAUD;YACZ,OAAO;gBACLC,UAAUF;YACZ;YAEA,MAAMG,WAAWV,YAAYW,GAAG,CAACF;YACjC,MAAMG,WACJF,YAAYjB,uBAAuBO,YAAYa,IAAI,KAAK;YAC1D,OAAO;gBACLL;gBACAI;gBACAF;gBACAI;oBACE,IAAIF,UAAU;wBACZ;oBACF;oBAEAX,eAAe,CAACc;wBACd,MAAML,WAAWK,QAAQJ,GAAG,CAACF;wBAC7B,IAAI,CAACjB,UAAU;4BACb,OAAO,IAAIY,IAAIM,WAAW,EAAE,GAAG;gCAACD;6BAAQ;wBAC1C;wBAEA,MAAMO,UAAU,IAAIZ,IAAIW;wBACxB,IAAIL,UAAU;4BACZM,QAAQC,MAAM,CAACR;wBACjB,OAAO;4BACLO,QAAQE,GAAG,CAACT;wBACd;wBAEA,OAAOO;oBACT;gBACF;gBACAtB;gBACAG;YACF;QACF;IACF;AACF"}

package/dist/src/focus/useFocusContainer.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/focus/useFocusContainer.ts"],"sourcesContent":["\"use client\";\nimport type { KeyboardEventHandler, Ref, RefObject } from \"react\";\nimport { useEffect, useRef } from \"react\";\nimport { TRANSITION_CONFIG } from \"../transition/config.js\";\nimport type {\n  TransitionCallbacks,\n  TransitionEnterHandler,\n  TransitionExitHandler,\n} from \"../transition/types.js\";\nimport { useEnsuredRef } from \"../useEnsuredRef.js\";\nimport type { FocusElementWithinType } from \"./utils.js\";\nimport { focusElementWithin, getFocusableElements } from \"./utils.js\";\n\nconst noop = (): void => {\n  // do nothing\n};\n\n/**\n * `\"mount\"` - this will attempt to focus the container element if:\n * - there is no `document.activeElement`\n * - the container element does not contain the `document.activeElement`\n *\n * `\"unmount\"` - attempts to re-focus the element that was focused before the\n * focus container became active. The previous focus element is captured\n * whenever the `activate` option on the `useFocusContainer` hook is set to\n * `true`. This is normally when an element becomes `visible`.\n *\n * `\"keyboard\"` - refocuses the first focusable element if pressing `Tab` would\n * move the focus outside of the container element. If `Shift + Tab` was used,\n * the last focusable element will be used instead.\n *\n * @remarks \\@since 6.0.0\n */\nexport type FocusType = \"mount\" | \"unmount\" | \"keyboard\";\n\n/** @remarks \\@since 6.0.0 */\nexport type FocusContainerTransitionCallbacks = Pick<\n  TransitionCallbacks,\n  \"onEntering\" | \"onEntered\" | \"onExiting\" | \"onExited\"\n>;\n\n/** @remarks \\@since 6.0.0 */\nexport interface FocusContainerTransitionOptions<E extends HTMLElement>\n  extends FocusContainerTransitionCallbacks {\n  /**\n   * An optional ref that will be merged with the\n   * {@link FocusContainerImplementation.nodeRef}\n   */\n  nodeRef?: Ref<E>;\n}\n\n/** @remarks \\@since 6.0.0 */\nexport interface FocusContainerEventHandlers<E extends HTMLElement> {\n  onKeyDown?: KeyboardEventHandler<E>;\n}\n\n/**\n * @remarks \\@since 6.0.0\n */\nexport type IsFocusTypeDisabled = (type: FocusType) => boolean;\n\nexport interface FocusContainerComponentProps {\n  /**\n   * @defaultValue `() => false`\n   */\n  isFocusTypeDisabled?: IsFocusTypeDisabled;\n\n  /**\n   * @defaultValue `false`\n   */\n  disableTransition?: boolean;\n}\n\n/** @remarks \\@since 6.0.0 */\nexport interface FocusContainerOptions<E extends HTMLElement>\n  extends FocusContainerTransitionOptions<E>,\n    FocusContainerComponentProps {\n  onKeyDown?: KeyboardEventHandler<E>;\n  /**\n   * This to `true` will capture the current focused element as a focus target\n   * once the `onExited` hook is fired. This should usually be set to the\n   * `transitionIn` prop for `useTransition`.\n   */\n  activate: boolean;\n\n  /**\n   * Set this to true if elements that can be programmatically focused should be\n   * included. These would be elements with a `tabIndex={-1}`.\n   *\n   * @defaultValue `false`\n   */\n  programmatic?: boolean;\n}\n\n/** @remarks \\@since 6.0.0 */\nexport interface FocusContainerImplementation<E extends HTMLElement> {\n  nodeRef: RefObject<E>;\n  eventHandlers: Required<FocusContainerEventHandlers<E>>;\n  transitionOptions: Required<FocusContainerTransitionOptions<E>>;\n}\n\n/**\n * This hook is mostly for internal use only for dialog accessibility behavior\n * to prevent the focus from moving outside of the dialog while it is visible.\n * This API was developed to be used with the `useCSSTransition`/`useTransition`\n * hooks as well.\n *\n * @example\n * Main Usage\n * ```tsx\n * import {\n *   Button,\n *   useFocusContainer,\n *   useScaleTransition,\n *   useToggle,\n * } from \"@react-md/core\";\n * import type { ReactElement } from \"react\";\n *\n * function Example(): ReactElement {\n *   const { toggled, enable, disable } = useToggle(false);\n *\n *   const { eventHandlers, transitionOptions } = useFocusContainer({\n *     activate: toggled,\n *   });\n *   const { elementProps, rendered } = useScaleTransition({\n *     transitionIn: toggled,\n *     temporary: true,\n *     ...transitionOptions,\n *   });\n *\n *   return (\n *     <>\n *       <Button onClick={enable}>Toggle</Button>\n *       {rendered && (\n *         <div {...eventHandlers} {...elementProps}>\n *           <Button onClick={disable}>Button 1</Button>\n *           <Button onClick={disable}>Button 2</Button>\n *           <Button onClick={disable}>Button 3</Button>\n *           <Button onClick={disable}>Button 4</Button>\n *         </div>\n *       )}\n *     </>\n *   );\n * }\n * ```\n *\n * @remarks \\@since 6.0.0\n */\nexport function useFocusContainer<E extends HTMLElement>(\n  options: FocusContainerOptions<E>\n): FocusContainerImplementation<E> {\n  const {\n    nodeRef,\n    activate,\n    onEntering = noop,\n    onEntered = noop,\n    onExiting = noop,\n    onExited = noop,\n    onKeyDown = noop,\n    programmatic = false,\n    disableTransition = false,\n    isFocusTypeDisabled = noop,\n  } = options;\n\n  const [ref, refCallback] = useEnsuredRef(nodeRef);\n  const prevFocus = useRef<HTMLElement | null>(null);\n\n  useEffect(() => {\n    if (!activate || !(document.activeElement instanceof HTMLElement)) {\n      return;\n    }\n\n    prevFocus.current = document.activeElement;\n  }, [activate]);\n\n  const handleMountFocus =\n    (callback: TransitionEnterHandler, skipped: boolean) =>\n    (appearing: boolean) => {\n      callback(appearing);\n      const instance = ref.current;\n      if (\n        instance &&\n        !skipped &&\n        !isFocusTypeDisabled(\"mount\") &&\n        (!document.activeElement || !instance.contains(document.activeElement))\n      ) {\n        instance.focus();\n      }\n    };\n\n  const handleUnmountFocus =\n    (callback: TransitionExitHandler, skipped: boolean) => (): void => {\n      callback();\n      if (skipped || isFocusTypeDisabled(\"unmount\")) {\n        return;\n      }\n\n      // For some reason, the `\"Enter\"` keydown event fires at a different timing\n      // than the Space  keydown event.\n      window.requestAnimationFrame(() => {\n        prevFocus.current?.focus();\n      });\n    };\n\n  return {\n    nodeRef: ref,\n    transitionOptions: {\n      nodeRef: refCallback,\n      onEntering: handleMountFocus(onEntering, false),\n      onEntered: handleMountFocus(\n        onEntered,\n        !disableTransition && !TRANSITION_CONFIG.disabled\n      ),\n      onExiting: handleUnmountFocus(onExiting, false),\n      onExited: handleUnmountFocus(\n        onExited,\n        !disableTransition && !TRANSITION_CONFIG.disabled\n      ),\n    },\n    eventHandlers: {\n      onKeyDown(event) {\n        onKeyDown(event);\n        if (\n          event.isPropagationStopped() ||\n          event.key !== \"Tab\" ||\n          isFocusTypeDisabled(\"keyboard\")\n        ) {\n          return;\n        }\n\n        const { target, shiftKey, currentTarget } = event;\n        const elements = getFocusableElements(currentTarget, programmatic);\n        const count = elements.length;\n        if (count === 0) {\n          event.preventDefault();\n          return;\n        }\n\n        // if the container element is the current focus, need to either focus\n        // the first or last element so focus doesn't escape\n        let type: FocusElementWithinType | undefined;\n        if (\n          count === 1 ||\n          (!shiftKey &&\n            (target === currentTarget || target === elements[count - 1]))\n        ) {\n          type = \"first\";\n        } else if (\n          shiftKey &&\n          (target === currentTarget || target === elements[0])\n        ) {\n          type = \"last\";\n        }\n\n        if (type) {\n          event.preventDefault();\n          focusElementWithin({\n            type,\n            elements,\n            container: currentTarget,\n          });\n        }\n      },\n    },\n  };\n}\n"],"names":["useEffect","useRef","TRANSITION_CONFIG","useEnsuredRef","focusElementWithin","getFocusableElements","noop","useFocusContainer","options","nodeRef","activate","onEntering","onEntered","onExiting","onExited","onKeyDown","programmatic","disableTransition","isFocusTypeDisabled","ref","refCallback","prevFocus","document","activeElement","HTMLElement","current","handleMountFocus","callback","skipped","appearing","instance","contains","focus","handleUnmountFocus","window","requestAnimationFrame","transitionOptions","disabled","eventHandlers","event","isPropagationStopped","key","target","shiftKey","currentTarget","elements","count","length","preventDefault","type","container"],"mappings":"AAAA;AAEA,SAASA,SAAS,EAAEC,MAAM,QAAQ,QAAQ;AAC1C,SAASC,iBAAiB,QAAQ,0BAA0B;AAM5D,SAASC,aAAa,QAAQ,sBAAsB;AAEpD,SAASC,kBAAkB,EAAEC,oBAAoB,QAAQ,aAAa;AAEtE,MAAMC,OAAO;AACX,aAAa;AACf;AAsFA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA8CC,GACD,OAAO,SAASC,kBACdC,OAAiC;IAEjC,MAAM,EACJC,OAAO,EACPC,QAAQ,EACRC,aAAaL,IAAI,EACjBM,YAAYN,IAAI,EAChBO,YAAYP,IAAI,EAChBQ,WAAWR,IAAI,EACfS,YAAYT,IAAI,EAChBU,eAAe,KAAK,EACpBC,oBAAoB,KAAK,EACzBC,sBAAsBZ,IAAI,EAC3B,GAAGE;IAEJ,MAAM,CAACW,KAAKC,YAAY,GAAGjB,cAAcM;IACzC,MAAMY,YAAYpB,OAA2B;IAE7CD,UAAU;QACR,IAAI,CAACU,YAAY,CAAEY,CAAAA,SAASC,aAAa,YAAYC,WAAU,GAAI;YACjE;QACF;QAEAH,UAAUI,OAAO,GAAGH,SAASC,aAAa;IAC5C,GAAG;QAACb;KAAS;IAEb,MAAMgB,mBACJ,CAACC,UAAkCC,UACnC,CAACC;YACCF,SAASE;YACT,MAAMC,WAAWX,IAAIM,OAAO;YAC5B,IACEK,YACA,CAACF,WACD,CAACV,oBAAoB,YACpB,CAAA,CAACI,SAASC,aAAa,IAAI,CAACO,SAASC,QAAQ,CAACT,SAASC,aAAa,CAAA,GACrE;gBACAO,SAASE,KAAK;YAChB;QACF;IAEF,MAAMC,qBACJ,CAACN,UAAiCC,UAAqB;YACrDD;YACA,IAAIC,WAAWV,oBAAoB,YAAY;gBAC7C;YACF;YAEA,2EAA2E;YAC3E,iCAAiC;YACjCgB,OAAOC,qBAAqB,CAAC;gBAC3Bd,UAAUI,OAAO,EAAEO;YACrB;QACF;IAEF,OAAO;QACLvB,SAASU;QACTiB,mBAAmB;YACjB3B,SAASW;YACTT,YAAYe,iBAAiBf,YAAY;YACzCC,WAAWc,iBACTd,WACA,CAACK,qBAAqB,CAACf,kBAAkBmC,QAAQ;YAEnDxB,WAAWoB,mBAAmBpB,WAAW;YACzCC,UAAUmB,mBACRnB,UACA,CAACG,qBAAqB,CAACf,kBAAkBmC,QAAQ;QAErD;QACAC,eAAe;YACbvB,WAAUwB,KAAK;gBACbxB,UAAUwB;gBACV,IACEA,MAAMC,oBAAoB,MAC1BD,MAAME,GAAG,KAAK,SACdvB,oBAAoB,aACpB;oBACA;gBACF;gBAEA,MAAM,EAAEwB,MAAM,EAAEC,QAAQ,EAAEC,aAAa,EAAE,GAAGL;gBAC5C,MAAMM,WAAWxC,qBAAqBuC,eAAe5B;gBACrD,MAAM8B,QAAQD,SAASE,MAAM;gBAC7B,IAAID,UAAU,GAAG;oBACfP,MAAMS,cAAc;oBACpB;gBACF;gBAEA,sEAAsE;gBACtE,oDAAoD;gBACpD,IAAIC;gBACJ,IACEH,UAAU,KACT,CAACH,YACCD,CAAAA,WAAWE,iBAAiBF,WAAWG,QAAQ,CAACC,QAAQ,EAAE,AAAD,GAC5D;oBACAG,OAAO;gBACT,OAAO,IACLN,YACCD,CAAAA,WAAWE,iBAAiBF,WAAWG,QAAQ,CAAC,EAAE,AAAD,GAClD;oBACAI,OAAO;gBACT;gBAEA,IAAIA,MAAM;oBACRV,MAAMS,cAAc;oBACpB5C,mBAAmB;wBACjB6C;wBACAJ;wBACAK,WAAWN;oBACb;gBACF;YACF;QACF;IACF;AACF"}

package/dist/src/focus/utils.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/focus/utils.ts"],"sourcesContent":["const queries = [\n  'input:not([type=\"hidden\"]):not([disabled])',\n  \"button:not([disabled])\",\n  \"textarea:not([disabled])\",\n  \"select:not([disabled])\",\n  \"a[href]\",\n  \"area[href]\",\n  \"[tabindex]\",\n] as const;\n\n/**\n * A query selector to find elements that are programmatically focusable.\n *\n * Example:\n *\n * ```ts\n * const focusableElements = document.querySelectorAll(PROGRAMMATICALLY_FOCUSABLE);\n * // do something with elements\n * ```\n */\nexport const PROGRAMMATICALLY_FOCUSABLE = queries.join(\",\");\n\n/**\n * A query selector to find elements that are focusable only with tab and shift+tab.\n *\n * Example:\n *\n * ```ts\n * const focusableElements = document.querySelectorAll(TAB_FOCUSABLE);\n * // do something with elements\n * ```\n *\n * @remarks \\@since 6.0.0 This was updated to remove ALL elements that have a\n * `tabindex=\"-1\"` applied instead of only elements that had a manual tab index\n * applied.\n */\nexport const TAB_FOCUSABLE = queries.reduce((fullQuery, query) => {\n  const prefix = `${fullQuery}${fullQuery ? \",\" : \"\"}`;\n  const notProgrammaticQuery = `${query}:not([tabindex=\"-1\"])`;\n\n  return `${prefix}${notProgrammaticQuery}`;\n}, \"\");\n\n/**\n * A simple util that will find all the tab focusable elements within a\n * container element.  The container should normally be a specific HTMLElement,\n * but it can also be the entire document if you want to find **all** focusable\n * elements within your page.\n *\n * @remarks\n * \\@since 6.0.0 This function will be used for all keyboard focus behavior\n * instead of trying to use refs. I did some performance testing in Firefox and\n * Chrome and the `querySelectorAll` takes 4ms with 5000 elements for my use\n * cases. There is more of a performance issue around rendering all 5000\n * elements and since this is only used for specific keydown events, this is\n * good enough for me.\n *\n * @param container - The container element/document to find focusable elements\n * within.\n * @param programmatic - Boolean if programmatically focusable elements should be\n * included instead of only tab focusable.\n * @returns A list of HTMLElements that are focusable within the container.\n */\nexport function getFocusableElements(\n  container: HTMLElement | Document,\n  programmatic = false\n): readonly HTMLElement[] {\n  // spread operator is faster than Array.from\n  return [\n    ...container.querySelectorAll<HTMLElement>(\n      programmatic ? PROGRAMMATICALLY_FOCUSABLE : TAB_FOCUSABLE\n    ),\n  ];\n}\n\n/**\n * Attempts to find the first focusable element within a container.\n *\n * @remarks \\@since 6.0.0\n * @param container - The container element/document to find focusable elements\n * within.\n * @param programmatic - Boolean if programmatically focusable elements should be\n * included instead of only tab focusable.\n * @returns A list of HTMLElements that are focusable within the container.\n */\nexport function getFocusableElement(\n  container: HTMLElement | Document,\n  programmatic = false\n): HTMLElement | null {\n  return container.querySelector<HTMLElement>(\n    programmatic ? PROGRAMMATICALLY_FOCUSABLE : TAB_FOCUSABLE\n  );\n}\n\n/**\n * An element can be tab focused if it is:\n * - an anchor or area with an `href`\n * - a non-disabled `input` element that is not `type=\"hidden\"`\n * - a non-disabled `button`, `textarea`, or `select` element\n * - an element with a `tabIndex >= 0`\n *\n * An element can be noted as \"programmatically focusable only\"  has the above\n * rules, but the `tabIndex` will be set to `-1`.\n *\n * @remarks \\@since 2.8.0\n */\nexport type ElementFocusType = \"tab\" | \"programmatic\";\n\nexport function isFocusable(\n  element: HTMLElement | Document | Window,\n  type: ElementFocusType = \"programmatic\"\n): element is HTMLElement {\n  const selector = type === \"tab\" ? TAB_FOCUSABLE : PROGRAMMATICALLY_FOCUSABLE;\n\n  return \"matches\" in element && element.matches(selector);\n}\n\nexport type FocusElementWithinType =\n  | \"first\"\n  | \"last\"\n  | \"query\"\n  | \"self\"\n  | \"none\";\n\nexport interface FocusElementWithinOptions {\n  type: FocusElementWithinType;\n  query?: string;\n  elements: readonly HTMLElement[];\n  container: HTMLElement | Document;\n}\n\nexport function focusElementWithin(options: FocusElementWithinOptions): void {\n  const { type, query = \"\", container, elements } = options;\n  if (type === \"none\") {\n    return;\n  }\n\n  let element: HTMLElement | null = null;\n  if (type === \"first\") {\n    [element] = elements;\n  } else if (type === \"last\") {\n    element = elements[elements.length - 1];\n  } else if (type === \"query\") {\n    element = document.querySelector<HTMLElement>(query);\n  }\n\n  if (!element && isFocusable(container)) {\n    element = container;\n  }\n\n  // TODO: Why did I add preventScroll?\n  element?.focus();\n}\n"],"names":["queries","PROGRAMMATICALLY_FOCUSABLE","join","TAB_FOCUSABLE","reduce","fullQuery","query","prefix","notProgrammaticQuery","getFocusableElements","container","programmatic","querySelectorAll","getFocusableElement","querySelector","isFocusable","element","type","selector","matches","focusElementWithin","options","elements","length","document","focus"],"mappings":"AAAA,MAAMA,UAAU;IACd;IACA;IACA;IACA;IACA;IACA;IACA;CACD;AAED;;;;;;;;;CASC,GACD,OAAO,MAAMC,6BAA6BD,QAAQE,IAAI,CAAC,KAAK;AAE5D;;;;;;;;;;;;;CAaC,GACD,OAAO,MAAMC,gBAAgBH,QAAQI,MAAM,CAAC,CAACC,WAAWC;IACtD,MAAMC,SAAS,CAAC,EAAEF,UAAU,EAAEA,YAAY,MAAM,GAAG,CAAC;IACpD,MAAMG,uBAAuB,CAAC,EAAEF,MAAM,qBAAqB,CAAC;IAE5D,OAAO,CAAC,EAAEC,OAAO,EAAEC,qBAAqB,CAAC;AAC3C,GAAG,IAAI;AAEP;;;;;;;;;;;;;;;;;;;CAmBC,GACD,OAAO,SAASC,qBACdC,SAAiC,EACjCC,eAAe,KAAK;IAEpB,4CAA4C;IAC5C,OAAO;WACFD,UAAUE,gBAAgB,CAC3BD,eAAeV,6BAA6BE;KAE/C;AACH;AAEA;;;;;;;;;CASC,GACD,OAAO,SAASU,oBACdH,SAAiC,EACjCC,eAAe,KAAK;IAEpB,OAAOD,UAAUI,aAAa,CAC5BH,eAAeV,6BAA6BE;AAEhD;AAgBA,OAAO,SAASY,YACdC,OAAwC,EACxCC,OAAyB,cAAc;IAEvC,MAAMC,WAAWD,SAAS,QAAQd,gBAAgBF;IAElD,OAAO,aAAae,WAAWA,QAAQG,OAAO,CAACD;AACjD;AAgBA,OAAO,SAASE,mBAAmBC,OAAkC;IACnE,MAAM,EAAEJ,IAAI,EAAEX,QAAQ,EAAE,EAAEI,SAAS,EAAEY,QAAQ,EAAE,GAAGD;IAClD,IAAIJ,SAAS,QAAQ;QACnB;IACF;IAEA,IAAID,UAA8B;IAClC,IAAIC,SAAS,SAAS;QACpB,CAACD,QAAQ,GAAGM;IACd,OAAO,IAAIL,SAAS,QAAQ;QAC1BD,UAAUM,QAAQ,CAACA,SAASC,MAAM,GAAG,EAAE;IACzC,OAAO,IAAIN,SAAS,SAAS;QAC3BD,UAAUQ,SAASV,aAAa,CAAcR;IAChD;IAEA,IAAI,CAACU,WAAWD,YAAYL,YAAY;QACtCM,UAAUN;IACZ;IAEA,qCAAqC;IACrCM,SAASS;AACX"}

package/dist/src/form/Checkbox.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/form/Checkbox.tsx"],"sourcesContent":["import { forwardRef } from \"react\";\nimport { InputToggle, type CheckboxProps } from \"./InputToggle.js\";\n\n/**\n * **Client Component**\n *\n * You'll generally want to use the `useCheckboxGroup` hook for managing the\n * checked state for groups of checkboxes and indeterminate checkbox behavior.\n *\n * @example\n * Simple Example\n * ```tsx\n * import type { ReactElement } from \"react\";\n * import { Checkbox } from \"@react-md/core\";\n *\n * function Example(): ReactElement {\n *   return <Checkbox label=\"Checkbox\" value=\"a\" />;\n * }\n * ```\n */\nexport const Checkbox = forwardRef<HTMLInputElement, CheckboxProps>(\n  function Checkbox(props, ref) {\n    return <InputToggle {...props} ref={ref} type=\"checkbox\" />;\n  }\n);\n"],"names":["forwardRef","InputToggle","Checkbox","props","ref","type"],"mappings":";AAAA,SAASA,UAAU,QAAQ,QAAQ;AACnC,SAASC,WAAW,QAA4B,mBAAmB;AAEnE;;;;;;;;;;;;;;;;CAgBC,GACD,OAAO,MAAMC,yBAAWF,WACtB,SAASE,SAASC,KAAK,EAAEC,GAAG;IAC1B,qBAAO,KAACH;QAAa,GAAGE,KAAK;QAAEC,KAAKA;QAAKC,MAAK;;AAChD,GACA"}

package/dist/src/form/Fieldset.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/form/Fieldset.tsx"],"sourcesContent":["import { cnb } from \"cnbuilder\";\nimport { forwardRef, type FieldsetHTMLAttributes } from \"react\";\nimport { bem } from \"../utils/bem.js\";\n\nconst styles = bem(\"rmd-fieldset\");\n\n/** @remarks \\@since 6.0.0 */\nexport interface FieldsetClassNameOptions {\n  className?: string;\n\n  /**\n   * Set this to `true` to enable the default browser styles for a fieldset.\n   *\n   * @remarks \\@since 6.0.0 This was renamed from `unstyled`.\n   * @defaultValue `false`\n   */\n  browserStyles?: boolean;\n\n  /**\n   * @defaultValue `false`\n   */\n  fullWidth?: boolean;\n}\n\n/**\n * @remarks \\@since 6.0.0\n */\nexport function fieldset(options: FieldsetClassNameOptions = {}): string {\n  const { className, fullWidth, browserStyles = false } = options;\n\n  return cnb(\n    styles({ unstyled: !browserStyles, \"full-width\": fullWidth }),\n    className\n  );\n}\n\n/**\n * **Server Component**\n *\n * @remarks \\@since 6.0.0 Removed the `legend`, `legendStyle`,\n * `legendClassName`, and `legendSROnly` props. You must provide a `Legend`\n * yourself manually instead of using a prop.\n */\nexport interface FieldsetProps\n  extends FieldsetHTMLAttributes<HTMLFieldSetElement>,\n    FieldsetClassNameOptions {}\n\n/**\n * @example\n * Simple Example\n * ```tsx\n * import { Form, Fieldset, Legend } from \"@react-md/core\";\n *\n * function Example(): ReactElement {\n *   return (\n *     <Form>\n *       <Fieldset>\n *         <Legend>Some Title</Legend>\n *         // form components\n *       </Fieldset>\n *     </Form>\n *   );\n * }\n * ```\n */\nexport const Fieldset = forwardRef<HTMLFieldSetElement, FieldsetProps>(\n  function Fieldset(props, ref) {\n    const {\n      className,\n      fullWidth = false,\n      browserStyles = false,\n      children,\n      ...remaining\n    } = props;\n\n    return (\n      <fieldset\n        {...remaining}\n        ref={ref}\n        className={fieldset({\n          className,\n          fullWidth,\n          browserStyles,\n        })}\n      >\n        {children}\n      </fieldset>\n    );\n  }\n);\n"],"names":["cnb","forwardRef","bem","styles","fieldset","options","className","fullWidth","browserStyles","unstyled","Fieldset","props","ref","children","remaining"],"mappings":";AAAA,SAASA,GAAG,QAAQ,YAAY;AAChC,SAASC,UAAU,QAAqC,QAAQ;AAChE,SAASC,GAAG,QAAQ,kBAAkB;AAEtC,MAAMC,SAASD,IAAI;AAoBnB;;CAEC,GACD,OAAO,SAASE,SAASC,UAAoC,CAAC,CAAC;IAC7D,MAAM,EAAEC,SAAS,EAAEC,SAAS,EAAEC,gBAAgB,KAAK,EAAE,GAAGH;IAExD,OAAOL,IACLG,OAAO;QAAEM,UAAU,CAACD;QAAe,cAAcD;IAAU,IAC3DD;AAEJ;AAaA;;;;;;;;;;;;;;;;;CAiBC,GACD,OAAO,MAAMI,yBAAWT,WACtB,SAASS,SAASC,KAAK,EAAEC,GAAG;IAC1B,MAAM,EACJN,SAAS,EACTC,YAAY,KAAK,EACjBC,gBAAgB,KAAK,EACrBK,QAAQ,EACR,GAAGC,WACJ,GAAGH;IAEJ,qBACE,KAACP;QACE,GAAGU,SAAS;QACbF,KAAKA;QACLN,WAAWF,SAAS;YAClBE;YACAC;YACAC;QACF;kBAECK;;AAGP,GACA"}

package/dist/src/form/FileInput.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/form/FileInput.tsx"],"sourcesContent":["\"use client\";\nimport { cnb } from \"cnbuilder\";\nimport {\n  forwardRef,\n  type InputHTMLAttributes,\n  type LabelHTMLAttributes,\n  type ReactNode,\n} from \"react\";\nimport {\n  button,\n  type ButtonClassNameOptions,\n  type ButtonClassNameThemeOptions,\n} from \"../button/buttonStyles.js\";\nimport { getIcon } from \"../icon/iconConfig.js\";\nimport { useElementInteraction } from \"../interaction/useElementInteraction.js\";\nimport { type PropsWithRef } from \"../types.js\";\nimport { SrOnly } from \"../typography/SrOnly.js\";\nimport { useEnsuredId } from \"../useEnsuredId.js\";\n\n/** @remarks \\@since 6.0.0 */\nexport type FileInputClassNameOptions = ButtonClassNameOptions;\n\n/** @remarks \\@since 6.0.0 */\nexport function fileInput(options: FileInputClassNameOptions = {}): string {\n  return cnb(\"rmd-file-input\", button(options));\n}\n\n/** @remarks \\@since 6.0.0 */\nexport type FileInputHTMLAttributes = Omit<\n  InputHTMLAttributes<HTMLInputElement>,\n  \"type\"\n>;\n\n/**\n * @remarks \\@since 6.0.0 Removed the `disableIconSpacing` prop since it is no\n * longer required.\n */\nexport interface FileInputProps\n  extends ButtonClassNameThemeOptions,\n    FileInputHTMLAttributes {\n  /**\n   * This is the label text for icon-only file inputs.\n   *\n   * @defaultValue `\"Upload\"`\n   */\n  srOnlyLabel?: ReactNode;\n\n  /**\n   * Any additional props to provide to the container `<label>` element since\n   * most props get passed to the `<input type=\"file\">`. So this would be useful\n   * for inline style or click handlers.\n   */\n  labelProps?: PropsWithRef<\n    LabelHTMLAttributes<HTMLLabelElement>,\n    HTMLLabelElement\n  >;\n\n  /**\n   * An optional icon to display for the file input.\n   *\n   * @defaultValue `getIcon(\"upload\")`\n   */\n  icon?: ReactNode;\n\n  /**\n   * Boolean if the icon should appear after the children in the label.\n   *\n   * @defaultValue `false`\n   */\n  iconAfter?: boolean;\n\n  /**\n   * Boolean if the file input should no longer allow the same file to be\n   * selected multiple times and trigger the `onChange` each time it is\n   * selected.\n   *\n   * @defaultValue `false`\n   */\n  disableRepeatableFiles?: boolean;\n\n  /**\n   * Children should generally be provided when the {@link buttonType} is\n   * set to `\"text\"`. This defaults to a screen-reader only accessible text.\n   *\n   * @defaultValue `<SrOnly phoneOnly={responsive}>Upload</SrOnly>`\n   */\n  children?: ReactNode;\n}\n\n/**\n * **Client Component**\n * This might be able to become a server component if I remove the getIcon hook\n *\n * @example\n * Simple Example\n * ```tsx\n * import { FileInput, Form } from \"@react-md/core\";\n * import type { ReactElement } from \"react\";\n *\n * const extensions = [\n *   \"svg\",\n *   \"jpeg\",\n *   \"jpg\",\n *   \"png\",\n *   \"apng\",\n *   \"mkv\",\n *   \"mp4\",\n *   \"mpeg\",\n *   \"mpg\",\n *   \"webm\",\n *   \"mov\",\n * ] as const;\n *\n * const FOUR_HUNDRED_MB = 400 * 1024 * 1024;\n * const maxFiles = 10;\n *\n * function Example(): ReactElement {\n *   const { stats, errors, onChange, clearErrors, reset, remove, accept } =\n *     useFileUpload({\n *       maxFiles,\n *       maxFileSize: FOUR_HUNDRED_MB,\n *       extensions,\n *     });\n *\n *   return (\n *     <Form>\n *       <FileInput accept={accept} multiple={maxFiles > 1} onChange={onChange} />\n *       <Button onClick={reset} disabled={!stats.length}>\n *         Remove all files\n *       </Button>\n *     </Form>\n *   );\n * }\n * ```\n *\n * @remarks \\@since 6.0.0 Added additional support for `iconSize` and\n * `responsive`. Also removed the `disableIconSpacing` prop since it is no\n * longer required.\n */\nexport const FileInput = forwardRef<HTMLInputElement, FileInputProps>(\n  function FileInput(props, ref) {\n    const {\n      id: propId,\n      className,\n      children: propChildren,\n      icon: propIcon,\n      iconAfter = false,\n      srOnlyLabel = \"Upload\",\n      disableRepeatableFiles = false,\n      labelProps,\n      theme = \"primary\",\n      themeType = \"contained\",\n      buttonType = propChildren ? \"text\" : \"icon\",\n      disabled = false,\n      iconSize,\n      responsive,\n      multiple = false,\n      ...remaining\n    } = props;\n    const id = useEnsuredId(propId, \"file-input\");\n    const { pressed, pressedClassName, ripples, handlers } =\n      useElementInteraction({\n        ...labelProps,\n        onClick(event) {\n          labelProps?.onClick?.(event);\n\n          // stop propagation so 2 ripples are not created\n          event.stopPropagation();\n        },\n        disabled,\n      });\n\n    const icon = getIcon(\"upload\", propIcon);\n    let children = propChildren;\n    if (\n      typeof propChildren === \"undefined\" &&\n      !props[\"aria-label\"] &&\n      !props[\"aria-labelledby\"]\n    ) {\n      children = <SrOnly phoneOnly={responsive}>{srOnlyLabel}</SrOnly>;\n    }\n\n    return (\n      <label\n        {...labelProps}\n        {...handlers}\n        className={fileInput({\n          theme,\n          themeType,\n          buttonType,\n          disabled,\n          iconSize,\n          pressed,\n          responsive,\n          pressedClassName,\n          className: className || labelProps?.className,\n        })}\n      >\n        {!iconAfter && icon}\n        {children}\n        {iconAfter && icon}\n        <input\n          {...remaining}\n          id={id}\n          ref={ref}\n          value={\n            disableRepeatableFiles || !props.onChange ? remaining.value : \"\"\n          }\n          type=\"file\"\n          className=\"rmd-hidden-input\"\n          disabled={disabled}\n          multiple={multiple}\n        />\n        {ripples}\n      </label>\n    );\n  }\n);\n"],"names":["cnb","forwardRef","button","getIcon","useElementInteraction","SrOnly","useEnsuredId","fileInput","options","FileInput","props","ref","id","propId","className","children","propChildren","icon","propIcon","iconAfter","srOnlyLabel","disableRepeatableFiles","labelProps","theme","themeType","buttonType","disabled","iconSize","responsive","multiple","remaining","pressed","pressedClassName","ripples","handlers","onClick","event","stopPropagation","phoneOnly","label","input","value","onChange","type"],"mappings":"AAAA;;AACA,SAASA,GAAG,QAAQ,YAAY;AAChC,SACEC,UAAU,QAIL,QAAQ;AACf,SACEC,MAAM,QAGD,4BAA4B;AACnC,SAASC,OAAO,QAAQ,wBAAwB;AAChD,SAASC,qBAAqB,QAAQ,0CAA0C;AAEhF,SAASC,MAAM,QAAQ,0BAA0B;AACjD,SAASC,YAAY,QAAQ,qBAAqB;AAKlD,2BAA2B,GAC3B,OAAO,SAASC,UAAUC,UAAqC,CAAC,CAAC;IAC/D,OAAOR,IAAI,kBAAkBE,OAAOM;AACtC;AAgEA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAiDC,GACD,OAAO,MAAMC,0BAAYR,WACvB,SAASQ,UAAUC,KAAK,EAAEC,GAAG;IAC3B,MAAM,EACJC,IAAIC,MAAM,EACVC,SAAS,EACTC,UAAUC,YAAY,EACtBC,MAAMC,QAAQ,EACdC,YAAY,KAAK,EACjBC,cAAc,QAAQ,EACtBC,yBAAyB,KAAK,EAC9BC,UAAU,EACVC,QAAQ,SAAS,EACjBC,YAAY,WAAW,EACvBC,aAAaT,eAAe,SAAS,MAAM,EAC3CU,WAAW,KAAK,EAChBC,QAAQ,EACRC,UAAU,EACVC,WAAW,KAAK,EAChB,GAAGC,WACJ,GAAGpB;IACJ,MAAME,KAAKN,aAAaO,QAAQ;IAChC,MAAM,EAAEkB,OAAO,EAAEC,gBAAgB,EAAEC,OAAO,EAAEC,QAAQ,EAAE,GACpD9B,sBAAsB;QACpB,GAAGkB,UAAU;QACba,SAAQC,KAAK;YACXd,YAAYa,UAAUC;YAEtB,gDAAgD;YAChDA,MAAMC,eAAe;QACvB;QACAX;IACF;IAEF,MAAMT,OAAOd,QAAQ,UAAUe;IAC/B,IAAIH,WAAWC;IACf,IACE,OAAOA,iBAAiB,eACxB,CAACN,KAAK,CAAC,aAAa,IACpB,CAACA,KAAK,CAAC,kBAAkB,EACzB;QACAK,yBAAW,KAACV;YAAOiC,WAAWV;sBAAaR;;IAC7C;IAEA,qBACE,MAACmB;QACE,GAAGjB,UAAU;QACb,GAAGY,QAAQ;QACZpB,WAAWP,UAAU;YACnBgB;YACAC;YACAC;YACAC;YACAC;YACAI;YACAH;YACAI;YACAlB,WAAWA,aAAaQ,YAAYR;QACtC;;YAEC,CAACK,aAAaF;YACdF;YACAI,aAAaF;0BACd,KAACuB;gBACE,GAAGV,SAAS;gBACblB,IAAIA;gBACJD,KAAKA;gBACL8B,OACEpB,0BAA0B,CAACX,MAAMgC,QAAQ,GAAGZ,UAAUW,KAAK,GAAG;gBAEhEE,MAAK;gBACL7B,WAAU;gBACVY,UAAUA;gBACVG,UAAUA;;YAEXI;;;AAGP,GACA"}

package/dist/src/form/Form.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/form/Form.tsx"],"sourcesContent":["import { forwardRef, type FormHTMLAttributes } from \"react\";\n\nconst noop = (): void => {\n  // do nothing\n};\n\nexport interface FormProps extends FormHTMLAttributes<HTMLFormElement> {\n  /**\n   * Boolean if the form should no longer prevent default submit behavior. If\n   * you enable this prop you should honestly just use a `<form>` element\n   * instead\n   *\n   * @defaultValue `false`\n   */\n  disablePreventDefault?: boolean;\n}\n\n/**\n * **Server Component**\n *\n * This is probably one of the least useful components available as it doesn't\n * do much styling or logic. All this form component will do is add basic flex\n * behavior and prevent the default form submit behavior.\n */\nexport const Form = forwardRef<HTMLFormElement, FormProps>(\n  function Form(props, ref) {\n    const {\n      children,\n      onSubmit = noop,\n      disablePreventDefault = false,\n      ...remaining\n    } = props;\n\n    return (\n      <form\n        {...remaining}\n        onSubmit={(event) => {\n          if (!disablePreventDefault) {\n            event.preventDefault();\n          }\n\n          onSubmit(event);\n        }}\n        ref={ref}\n      >\n        {children}\n      </form>\n    );\n  }\n);\n"],"names":["forwardRef","noop","Form","props","ref","children","onSubmit","disablePreventDefault","remaining","form","event","preventDefault"],"mappings":";AAAA,SAASA,UAAU,QAAiC,QAAQ;AAE5D,MAAMC,OAAO;AACX,aAAa;AACf;AAaA;;;;;;CAMC,GACD,OAAO,MAAMC,qBAAOF,WAClB,SAASE,KAAKC,KAAK,EAAEC,GAAG;IACtB,MAAM,EACJC,QAAQ,EACRC,WAAWL,IAAI,EACfM,wBAAwB,KAAK,EAC7B,GAAGC,WACJ,GAAGL;IAEJ,qBACE,KAACM;QACE,GAAGD,SAAS;QACbF,UAAU,CAACI;YACT,IAAI,CAACH,uBAAuB;gBAC1BG,MAAMC,cAAc;YACtB;YAEAL,SAASI;QACX;QACAN,KAAKA;kBAEJC;;AAGP,GACA"}

package/dist/src/form/FormMessage.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/form/FormMessage.tsx"],"sourcesContent":["import { forwardRef } from \"react\";\nimport { useEnsuredId } from \"../useEnsuredId.js\";\nimport { FormMessageCounter } from \"./FormMessageCounter.js\";\nimport { getFormConfig } from \"./formConfig.js\";\nimport { formMessage, formMessageText } from \"./formMessageStyles.js\";\nimport {\n  type FormMessageInputLengthCounterProps,\n  type FormMessageProps,\n} from \"./types.js\";\n\n/**\n * **Server Component**\n *\n * The `FormMessage` component is used to create additional helper messages or\n * error messages and generally placed below the related `TextField`. If a\n * `length` (of the `value`) and `maxLength` are provided, a counter will also\n * be displayed to the right of the `children`.\n *\n * This component can also be used to create form-level validation messages by\n * setting the `role` prop to `\"alert\"`.\n */\nexport const FormMessage = forwardRef<\n  HTMLDivElement,\n  FormMessageProps & Partial<FormMessageInputLengthCounterProps>\n>(function FormMessage(props, ref) {\n  const {\n    id: propId,\n    role,\n    className,\n    counterStyle,\n    counterClassName,\n    messageStyle,\n    messageClassName,\n    error = false,\n    disableWrap = false,\n    theme: propTheme,\n    children,\n    length,\n    maxLength,\n    ...remaining\n  } = props;\n  const id = useEnsuredId(propId, \"form-message\");\n  const theme = getFormConfig(\"theme\", propTheme);\n\n  let message = children;\n  if (!disableWrap && children) {\n    message = (\n      <p\n        id={`${id}-message`}\n        style={messageStyle}\n        className={formMessageText({ className: messageClassName })}\n      >\n        {children}\n      </p>\n    );\n  }\n\n  return (\n    <div\n      {...remaining}\n      id={id}\n      ref={ref}\n      aria-live={role !== \"alert\" ? \"polite\" : undefined}\n      role={role}\n      className={formMessage({ error, theme, className })}\n    >\n      {message}\n      {typeof length === \"number\" && typeof maxLength === \"number\" && (\n        <FormMessageCounter\n          id={`${id}-counter`}\n          style={counterStyle}\n          className={counterClassName}\n        >\n          {`${length} / ${maxLength}`}\n        </FormMessageCounter>\n      )}\n    </div>\n  );\n});\n"],"names":["forwardRef","useEnsuredId","FormMessageCounter","getFormConfig","formMessage","formMessageText","FormMessage","props","ref","id","propId","role","className","counterStyle","counterClassName","messageStyle","messageClassName","error","disableWrap","theme","propTheme","children","length","maxLength","remaining","message","p","style","div","aria-live","undefined"],"mappings":";AAAA,SAASA,UAAU,QAAQ,QAAQ;AACnC,SAASC,YAAY,QAAQ,qBAAqB;AAClD,SAASC,kBAAkB,QAAQ,0BAA0B;AAC7D,SAASC,aAAa,QAAQ,kBAAkB;AAChD,SAASC,WAAW,EAAEC,eAAe,QAAQ,yBAAyB;AAMtE;;;;;;;;;;CAUC,GACD,OAAO,MAAMC,4BAAcN,WAGzB,SAASM,YAAYC,KAAK,EAAEC,GAAG;IAC/B,MAAM,EACJC,IAAIC,MAAM,EACVC,IAAI,EACJC,SAAS,EACTC,YAAY,EACZC,gBAAgB,EAChBC,YAAY,EACZC,gBAAgB,EAChBC,QAAQ,KAAK,EACbC,cAAc,KAAK,EACnBC,OAAOC,SAAS,EAChBC,QAAQ,EACRC,MAAM,EACNC,SAAS,EACT,GAAGC,WACJ,GAAGjB;IACJ,MAAME,KAAKR,aAAaS,QAAQ;IAChC,MAAMS,QAAQhB,cAAc,SAASiB;IAErC,IAAIK,UAAUJ;IACd,IAAI,CAACH,eAAeG,UAAU;QAC5BI,wBACE,KAACC;YACCjB,IAAI,CAAC,EAAEA,GAAG,QAAQ,CAAC;YACnBkB,OAAOZ;YACPH,WAAWP,gBAAgB;gBAAEO,WAAWI;YAAiB;sBAExDK;;IAGP;IAEA,qBACE,MAACO;QACE,GAAGJ,SAAS;QACbf,IAAIA;QACJD,KAAKA;QACLqB,aAAWlB,SAAS,UAAU,WAAWmB;QACzCnB,MAAMA;QACNC,WAAWR,YAAY;YAAEa;YAAOE;YAAOP;QAAU;;YAEhDa;YACA,OAAOH,WAAW,YAAY,OAAOC,cAAc,0BAClD,KAACrB;gBACCO,IAAI,CAAC,EAAEA,GAAG,QAAQ,CAAC;gBACnBkB,OAAOd;gBACPD,WAAWE;0BAEV,CAAC,EAAEQ,OAAO,GAAG,EAAEC,UAAU,CAAC;;;;AAKrC,GAAG"}

package/dist/src/form/FormMessageContainer.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/form/FormMessageContainer.tsx"],"sourcesContent":["import { cnb } from \"cnbuilder\";\nimport { forwardRef, type HTMLAttributes } from \"react\";\nimport { type PropsWithRef } from \"../types.js\";\nimport { FormMessage } from \"./FormMessage.js\";\nimport { type FormMessageProps } from \"./types.js\";\n\n/**\n * @remarks \\@since 2.5.0\n */\nexport interface FormMessageContainerProps\n  extends HTMLAttributes<HTMLDivElement> {\n  /**\n   * If the extension doesn't actually want to render the `FormMessage`\n   * component, these props are optional. It kind of eliminates the whole\n   * purpose of this component though.\n   */\n  messageProps?: PropsWithRef<FormMessageProps, HTMLDivElement>;\n}\n\n/**\n * **Server Component**\n * Conditionally wraps the `children` in a `.rmd-form-message-container` wrapper\n * and renders the {@link FormMessage} component.\n *\n * @remarks \\@since 2.5.0\n */\nexport const FormMessageContainer = forwardRef<\n  HTMLDivElement,\n  FormMessageContainerProps\n>(function FormMessageContainer(props, ref) {\n  const { className, children, messageProps, ...remaining } = props;\n  if (!messageProps) {\n    return <>{children}</>;\n  }\n\n  return (\n    <div\n      {...remaining}\n      ref={ref}\n      className={cnb(\"rmd-form-message-container\", className)}\n    >\n      {children}\n      <FormMessage {...messageProps} />\n    </div>\n  );\n});\n"],"names":["cnb","forwardRef","FormMessage","FormMessageContainer","props","ref","className","children","messageProps","remaining","div"],"mappings":";AAAA,SAASA,GAAG,QAAQ,YAAY;AAChC,SAASC,UAAU,QAA6B,QAAQ;AAExD,SAASC,WAAW,QAAQ,mBAAmB;AAgB/C;;;;;;CAMC,GACD,OAAO,MAAMC,qCAAuBF,WAGlC,SAASE,qBAAqBC,KAAK,EAAEC,GAAG;IACxC,MAAM,EAAEC,SAAS,EAAEC,QAAQ,EAAEC,YAAY,EAAE,GAAGC,WAAW,GAAGL;IAC5D,IAAI,CAACI,cAAc;QACjB,qBAAO;sBAAGD;;IACZ;IAEA,qBACE,MAACG;QACE,GAAGD,SAAS;QACbJ,KAAKA;QACLC,WAAWN,IAAI,8BAA8BM;;YAE5CC;0BACD,KAACL;gBAAa,GAAGM,YAAY;;;;AAGnC,GAAG"}

package/dist/src/form/FormMessageCounter.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/form/FormMessageCounter.tsx"],"sourcesContent":["import { type HTMLAttributes, type ReactElement, type ReactNode } from \"react\";\nimport { formMessageCounter } from \"./formMessageStyles.js\";\n\n/** @remarks \\@since 2.9.0 */\nexport interface FormMessageCounterProps\n  extends HTMLAttributes<HTMLSpanElement> {\n  /**\n   * The children to display in the counter. This is normally a string like:\n   *\n   * @example\n   * String Example\n   * ```ts\n   * `${min} / ${max}`\n   * ```\n   */\n  children: ReactNode;\n}\n\n/**\n * **Server Component**\n *\n * This component can be used to create a \"counter\" within the\n * {@link FormMessage} component.\n *\n * Note: This is really only useful when using the {@link FormMessage} component\n * without a {@link TextField}.\n *\n * @example\n * Example Usage\n * ```ts\n * interface ExampleProps {\n *   min: number;\n *   max: number;\n * }\n *\n * function Example({ min, max }: ExampleProps) {\n *   return (\n *     <FormMessage disableWrap>\n *       <FormMessageCounter>\n *         {`${min} / ${max}`}\n *       </FormMessageCounter>\n *     </FormMessage>\n *   );\n * }\n * ```\n *\n * @remarks \\@since 2.9.0\n */\nexport function FormMessageCounter(\n  props: FormMessageCounterProps\n): ReactElement {\n  const { children, className, ...remaining } = props;\n\n  return (\n    <span {...remaining} className={formMessageCounter({ className })}>\n      {children}\n    </span>\n  );\n}\n"],"names":["formMessageCounter","FormMessageCounter","props","children","className","remaining","span"],"mappings":";AACA,SAASA,kBAAkB,QAAQ,yBAAyB;AAiB5D;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA6BC,GACD,OAAO,SAASC,mBACdC,KAA8B;IAE9B,MAAM,EAAEC,QAAQ,EAAEC,SAAS,EAAE,GAAGC,WAAW,GAAGH;IAE9C,qBACE,KAACI;QAAM,GAAGD,SAAS;QAAED,WAAWJ,mBAAmB;YAAEI;QAAU;kBAC5DD;;AAGP"}

package/dist/src/form/InputToggle.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/form/InputToggle.tsx"],"sourcesContent":["\"use client\";\nimport { cnb } from \"cnbuilder\";\nimport {\n  forwardRef,\n  type CSSProperties,\n  type HTMLAttributes,\n  type InputHTMLAttributes,\n  type LabelHTMLAttributes,\n  type ReactNode,\n} from \"react\";\nimport { useElementInteraction } from \"../interaction/useElementInteraction.js\";\nimport { type PropsWithRef } from \"../types.js\";\nimport { useEnsuredId } from \"../useEnsuredId.js\";\nimport { FormMessageContainer } from \"./FormMessageContainer.js\";\nimport { InputToggleIcon } from \"./InputToggleIcon.js\";\nimport { Label } from \"./Label.js\";\nimport { type InputToggleSize } from \"./inputToggleStyles.js\";\nimport {\n  type FormComponentStates,\n  type FormMessageContainerExtension,\n} from \"./types.js\";\n\n/**\n * @remarks \\@since 6.0.0\n */\nexport interface InputToggleIconProps {\n  /**\n   * @see {@link InputToggleSize}\n   * @defaultValue `\"normal\"`\n   */\n  size?: InputToggleSize;\n\n  /**\n   * The icon to use while unchecked. This defaults to the unchecked\n   * checkbox/radio icon from the `ICON_CONFIG`.\n   *\n   * @defaultValue `getIcon(props.type)`\n   */\n  icon?: ReactNode;\n\n  /**\n   * The icon to use while unchecked. This defaults to the unchecked\n   * checkbox/radio icon from the `ICON_CONFIG`.\n   *\n   * @defaultValue `getIcon(``${props.type}Checked``)`\n   */\n  checkedIcon?: ReactNode;\n\n  /**\n   * Any props that should be passed to the `<span>` that surrounds the current\n   * icon element.\n   */\n  iconProps?: PropsWithRef<HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>;\n\n  /**\n   * Optional style to set on the `<span>` that surrounds the current icon\n   * element.\n   */\n  iconStyle?: CSSProperties;\n\n  /**\n   * Optional className to set on the `<span>` that surrounds the current icon\n   * element.\n   */\n  iconClassName?: string;\n}\n\n/**\n * @remarks \\@since 6.0.0\n */\nexport interface InputToggleLabelProps {\n  /**\n   * An optional label to display with the checkbox. If this is omitted, it is\n   * recommended to provide an `aria-label` for accessibility.\n   */\n  label?: ReactNode;\n\n  /**\n   * Any props that should be passed to the `<Label>` component.\n   *\n   * Note: If `style` or `className` are provided in this object, they will be\n   * ignored. Use the top-level `style` and `className` props instead.\n   *\n   * @example\n   * ```\n   *  // bad\n   * labelProps={{\n   *   \"aria-label\": \"checkbox\",\n   *   style: { color: \"red\" },\n   *   className: \"custom\"\n   * }}\n   *\n   * // good\n   * style={{ color: \"red\" }}\n   * className=\"custom\"\n   * labelProps={{\n   *   \"aria-label\": \"checkbox\",\n   * }}\n   * ```\n   */\n  labelProps?: PropsWithRef<\n    LabelHTMLAttributes<HTMLLabelElement>,\n    HTMLLabelElement\n  >;\n\n  /**\n   * @see {@link LabelClassNameOptions.gap}\n   * @defaultValue `false`\n   */\n  disableLabelGap?: boolean;\n\n  /**\n   * Set this to `true` to swap the position of the {@link label} and the current\n   * icon. This prop can be used with the {@link stacked} prop to change the\n   * position if the icon and label:\n   *\n   * ____________________________________\n   * | stacked | iconAfter | position   |\n   * ____________________________________\n   * |         |           | icon label |\n   * ____________________________________\n   * |         | X         | label icon |\n   * ____________________________________\n   * | X       |           | icon       |\n   * |         |           | label      |\n   * ____________________________________\n   * | X       | X         | label      |\n   * |         |           | icon       |\n   * ____________________________________\n   *\n   *\n   * @defaultValue `false`\n   */\n  iconAfter?: boolean;\n\n  /**\n   * Set this to `true` if the label should be stacked instead of inline with\n   * the current icon.\n   *\n   * @see {@link iconAfter}\n   * @defaultValue `false`\n   */\n  stacked?: boolean;\n}\n\n/**\n * @remarks \\@since 6.0.0\n */\nexport interface BaseInputToggleProps\n  extends Omit<InputHTMLAttributes<HTMLInputElement>, \"size\">,\n    FormMessageContainerExtension,\n    FormComponentStates,\n    InputToggleIconProps,\n    InputToggleLabelProps {\n  /**\n   * @see https://stackoverflow.com/questions/5985839/bug-with-firefox-disabled-attribute-of-input-not-resetting-when-refreshing\n   * @defaultValue `type === \"checkbox\" ? \"off\" : undefined`\n   */\n  autoComplete?: string;\n}\n\n/**\n * @remarks\n * \\@since 2.8.5\n * \\@since 6.0.0 Removed the `aria-controls` prop and added the\n * `indeterminateIcon` prop.\n */\nexport interface IndeterminateCheckboxProps {\n  /**\n   * Set this value to `true` if the checkbox is in an \"indeterminate\" state:\n   *\n   * - this checkbox controls the select all/select none behavior of other\n   *   checkboxes in a group\n   * - at least one of the checkboxes have been checked\n   *   - the `checked` prop for this Checkbox should also be `true`\n   *\n   * You should normally use the `useCheckboxGroup` hook to handle this\n   * behavior.\n   *\n   * @defaultValue `false`\n   */\n  indeterminate?: boolean;\n\n  /**\n   * The icon to display when the checkbox is checked and the\n   * {@link indeterminate} prop is `true`.\n   *\n   * @defaultValue `getIcon(\"checkboxIndeterminate\")`\n   * @remarks \\@since 6.0.0\n   */\n  indeterminateIcon?: ReactNode;\n}\n\nexport interface CheckboxProps\n  extends BaseInputToggleProps,\n    IndeterminateCheckboxProps {}\n\n/** @remarks \\@since 6.0.0 */\nexport interface CheckboxInputToggleProps extends CheckboxProps {\n  type: \"checkbox\";\n}\n\nexport interface RadioProps extends BaseInputToggleProps {\n  /**\n   * The value for the radio button.\n   *\n   * @remarks \\@since 6.0.0 This is now optional and no longer supports\n   * `string[]` since there isn't much of a use case for array values.\n   */\n  value?: string | number;\n}\n\n/** @remarks \\@since 6.0.0 */\nexport interface RadioInputToggleProps extends RadioProps {\n  type: \"radio\";\n}\n\n/**\n * @remarks \\@since 6.0.0 Updated to be a union between\n * `CheckboxInputToggleProps` and `RadioInputToggleProps`\n */\nexport type InputToggleProps = CheckboxInputToggleProps | RadioInputToggleProps;\n\n/**\n * **Client Component**\n *\n * @remarks \\@since 6.0.0 Now supports the `FormMessage` behavior and requires\n * different icons for each checked state.\n */\nexport const InputToggle = forwardRef<HTMLInputElement, InputToggleProps>(\n  function InputToggle(props, ref) {\n    const {\n      id: propId,\n      type,\n      label,\n      labelProps,\n      style,\n      className,\n      autoComplete = type === \"checkbox\" ? \"off\" : undefined,\n      disableLabelGap = false,\n      stacked = false,\n      iconAfter = false,\n      size = \"normal\",\n      error = false,\n      active = false,\n      indeterminate = false,\n      messageProps,\n      messageContainerProps,\n      icon,\n      checkedIcon,\n      indeterminateIcon,\n      iconProps,\n      iconStyle,\n      iconClassName,\n      onBlur,\n      onClick,\n      onKeyDown,\n      onKeyUp,\n      onMouseDown,\n      onMouseLeave,\n      onDragStart,\n      onMouseUp,\n      onTouchEnd,\n      onTouchMove,\n      onTouchStart,\n      ...remaining\n    } = props as CheckboxInputToggleProps;\n    const { disabled = false, checked } = props;\n\n    const id = useEnsuredId(propId, type);\n    const { pressedClassName, ripples, handlers } = useElementInteraction({\n      disabled,\n      onBlur,\n      onClick,\n      onKeyDown,\n      onKeyUp,\n      onMouseDown,\n      onMouseLeave,\n      onDragStart,\n      onMouseUp,\n      onTouchEnd,\n      onTouchMove,\n      onTouchStart,\n    });\n\n    // set on the `remaining` object to bypass the eslint rule about\n    // aria-checked not being valid for textbox role\n    remaining[\"aria-checked\"] =\n      remaining[\"aria-checked\"] ?? indeterminate ? \"mixed\" : undefined;\n\n    return (\n      <FormMessageContainer\n        {...messageContainerProps}\n        messageProps={messageProps}\n      >\n        <Label\n          {...labelProps}\n          gap={!disableLabelGap}\n          style={style}\n          stacked={stacked}\n          reversed={!iconAfter}\n          active={active}\n          error={error}\n          disabled={disabled}\n          className={className}\n        >\n          {label}\n          <InputToggleIcon\n            style={iconStyle}\n            {...iconProps}\n            className={cnb(\n              pressedClassName,\n              iconClassName,\n              iconProps?.className\n            )}\n            error={error}\n            checked={checked}\n            disabled={disabled}\n            size={size}\n            type={type}\n            icon={icon}\n            checkedIcon={checkedIcon}\n            indeterminate={indeterminate}\n            indeterminateIcon={indeterminateIcon}\n          >\n            <input\n              {...remaining}\n              {...handlers}\n              autoComplete={autoComplete}\n              id={id}\n              ref={ref}\n              type={type}\n              className=\"rmd-hidden-input\"\n            />\n            {ripples}\n          </InputToggleIcon>\n        </Label>\n      </FormMessageContainer>\n    );\n  }\n);\n"],"names":["cnb","forwardRef","useElementInteraction","useEnsuredId","FormMessageContainer","InputToggleIcon","Label","InputToggle","props","ref","id","propId","type","label","labelProps","style","className","autoComplete","undefined","disableLabelGap","stacked","iconAfter","size","error","active","indeterminate","messageProps","messageContainerProps","icon","checkedIcon","indeterminateIcon","iconProps","iconStyle","iconClassName","onBlur","onClick","onKeyDown","onKeyUp","onMouseDown","onMouseLeave","onDragStart","onMouseUp","onTouchEnd","onTouchMove","onTouchStart","remaining","disabled","checked","pressedClassName","ripples","handlers","gap","reversed","input"],"mappings":"AAAA;;AACA,SAASA,GAAG,QAAQ,YAAY;AAChC,SACEC,UAAU,QAML,QAAQ;AACf,SAASC,qBAAqB,QAAQ,0CAA0C;AAEhF,SAASC,YAAY,QAAQ,qBAAqB;AAClD,SAASC,oBAAoB,QAAQ,4BAA4B;AACjE,SAASC,eAAe,QAAQ,uBAAuB;AACvD,SAASC,KAAK,QAAQ,aAAa;AAgNnC;;;;;CAKC,GACD,OAAO,MAAMC,4BAAcN,WACzB,SAASM,YAAYC,KAAK,EAAEC,GAAG;IAC7B,MAAM,EACJC,IAAIC,MAAM,EACVC,IAAI,EACJC,KAAK,EACLC,UAAU,EACVC,KAAK,EACLC,SAAS,EACTC,eAAeL,SAAS,aAAa,QAAQM,SAAS,EACtDC,kBAAkB,KAAK,EACvBC,UAAU,KAAK,EACfC,YAAY,KAAK,EACjBC,OAAO,QAAQ,EACfC,QAAQ,KAAK,EACbC,SAAS,KAAK,EACdC,gBAAgB,KAAK,EACrBC,YAAY,EACZC,qBAAqB,EACrBC,IAAI,EACJC,WAAW,EACXC,iBAAiB,EACjBC,SAAS,EACTC,SAAS,EACTC,aAAa,EACbC,MAAM,EACNC,OAAO,EACPC,SAAS,EACTC,OAAO,EACPC,WAAW,EACXC,YAAY,EACZC,WAAW,EACXC,SAAS,EACTC,UAAU,EACVC,WAAW,EACXC,YAAY,EACZ,GAAGC,WACJ,GAAGrC;IACJ,MAAM,EAAEsC,WAAW,KAAK,EAAEC,OAAO,EAAE,GAAGvC;IAEtC,MAAME,KAAKP,aAAaQ,QAAQC;IAChC,MAAM,EAAEoC,gBAAgB,EAAEC,OAAO,EAAEC,QAAQ,EAAE,GAAGhD,sBAAsB;QACpE4C;QACAZ;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;IACF;IAEA,gEAAgE;IAChE,gDAAgD;IAChDC,SAAS,CAAC,eAAe,GACvBA,SAAS,CAAC,eAAe,IAAIpB,gBAAgB,UAAUP;IAEzD,qBACE,KAACd;QACE,GAAGuB,qBAAqB;QACzBD,cAAcA;kBAEd,cAAA,MAACpB;YACE,GAAGQ,UAAU;YACdqC,KAAK,CAAChC;YACNJ,OAAOA;YACPK,SAASA;YACTgC,UAAU,CAAC/B;YACXG,QAAQA;YACRD,OAAOA;YACPuB,UAAUA;YACV9B,WAAWA;;gBAEVH;8BACD,MAACR;oBACCU,OAAOiB;oBACN,GAAGD,SAAS;oBACbf,WAAWhB,IACTgD,kBACAf,eACAF,WAAWf;oBAEbO,OAAOA;oBACPwB,SAASA;oBACTD,UAAUA;oBACVxB,MAAMA;oBACNV,MAAMA;oBACNgB,MAAMA;oBACNC,aAAaA;oBACbJ,eAAeA;oBACfK,mBAAmBA;;sCAEnB,KAACuB;4BACE,GAAGR,SAAS;4BACZ,GAAGK,QAAQ;4BACZjC,cAAcA;4BACdP,IAAIA;4BACJD,KAAKA;4BACLG,MAAMA;4BACNI,WAAU;;wBAEXiC;;;;;;AAKX,GACA"}

package/dist/src/form/InputToggleIcon.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/form/InputToggleIcon.tsx"],"sourcesContent":["import { cnb } from \"cnbuilder\";\nimport { forwardRef, type HTMLAttributes, type ReactNode } from \"react\";\nimport { getIcon } from \"../icon/iconConfig.js\";\nimport { FORM_CONFIG } from \"./formConfig.js\";\nimport { inputToggle, type InputToggleSize } from \"./inputToggleStyles.js\";\n\n/**\n * @remarks\n * \\@since 2.8.0\n * \\@since 6.0.0 Removed the `circle` and `overlay` props since they are no\n * longer needed. Added the `icon`, `disableEm`, `checkedIcon` and\n * `indeterminateIcon` props.\n * @internal\n */\nexport interface InputToggleIconProps extends HTMLAttributes<HTMLSpanElement> {\n  type: \"checkbox\" | \"radio\";\n  /**\n   * Note: If this is `undefined` and the {@link FORM_CONFIG.uncontrolledToggles} is `false`,\n   * the icon state won't work.\n   */\n  checked?: boolean;\n\n  /**\n   * The icon to display while {@link checked} is `false`.\n   */\n  icon?: ReactNode;\n\n  /**\n   * The icon to display while {@link checked} is `true` and\n   * {@link indeterminate} is `false`.\n   */\n  checkedIcon?: ReactNode;\n\n  /**\n   * The icon to display while both {@link checked} and {@link indeterminate}\n   * are `true`.\n   */\n  indeterminateIcon?: ReactNode;\n\n  /** @defaultValue `\"normal\"` */\n  size?: InputToggleSize;\n\n  /** @defaultValue `false` */\n  error?: boolean;\n\n  /** @defaultValue `false` */\n  disabled?: boolean;\n\n  /** @defaultValue `false` */\n  disableEm?: boolean;\n\n  /** @defaultValue `false` */\n  indeterminate?: boolean;\n}\n\n/**\n * **Server Component**\n *\n * @remarks\n * \\@since 2.8.0\n * \\@since 6.0.0 Updated to use different icons for each checked state instead\n * of a css overlay hack.\n * @internal\n */\nexport const InputToggleIcon = forwardRef<\n  HTMLSpanElement,\n  InputToggleIconProps\n>(function InputToggleIcon(props, ref) {\n  const {\n    type,\n    size = \"normal\",\n    icon: propIcon,\n    error,\n    checked,\n    children,\n    disabled,\n    indeterminate,\n    className,\n    disableEm = false,\n    checkedIcon: propCheckedIcon,\n    indeterminateIcon: propIndeterminateIcon,\n    ...remaining\n  } = props;\n  const uncheckedIcon = getIcon(type, propIcon);\n  const checkedIcon = getIcon(`${type}Checked`, propCheckedIcon);\n  const indeterminateIcon = getIcon(\n    \"checkboxIndeterminate\",\n    propIndeterminateIcon\n  );\n\n  let icon: ReactNode;\n  let active = false;\n  const uncontrolled = typeof checked !== \"boolean\";\n  if (!uncontrolled || !FORM_CONFIG.uncontrolledToggles) {\n    active = !!checked && !error;\n    icon = checked\n      ? indeterminate\n        ? indeterminateIcon\n        : checkedIcon\n      : uncheckedIcon;\n  } else {\n    icon = (\n      <>\n        {uncheckedIcon}\n        {indeterminate ? indeterminateIcon : checkedIcon}\n      </>\n    );\n  }\n\n  return (\n    <span\n      {...remaining}\n      ref={ref}\n      className={cnb(\n        inputToggle({\n          em: !disableEm,\n          size,\n          type,\n          error,\n          active,\n          disabled,\n          uncontrolled,\n          className,\n        })\n      )}\n    >\n      {children}\n      {icon}\n    </span>\n  );\n});\n"],"names":["cnb","forwardRef","getIcon","FORM_CONFIG","inputToggle","InputToggleIcon","props","ref","type","size","icon","propIcon","error","checked","children","disabled","indeterminate","className","disableEm","checkedIcon","propCheckedIcon","indeterminateIcon","propIndeterminateIcon","remaining","uncheckedIcon","active","uncontrolled","uncontrolledToggles","span","em"],"mappings":";AAAA,SAASA,GAAG,QAAQ,YAAY;AAChC,SAASC,UAAU,QAA6C,QAAQ;AACxE,SAASC,OAAO,QAAQ,wBAAwB;AAChD,SAASC,WAAW,QAAQ,kBAAkB;AAC9C,SAASC,WAAW,QAA8B,yBAAyB;AAmD3E;;;;;;;;CAQC,GACD,OAAO,MAAMC,gCAAkBJ,WAG7B,SAASI,gBAAgBC,KAAK,EAAEC,GAAG;IACnC,MAAM,EACJC,IAAI,EACJC,OAAO,QAAQ,EACfC,MAAMC,QAAQ,EACdC,KAAK,EACLC,OAAO,EACPC,QAAQ,EACRC,QAAQ,EACRC,aAAa,EACbC,SAAS,EACTC,YAAY,KAAK,EACjBC,aAAaC,eAAe,EAC5BC,mBAAmBC,qBAAqB,EACxC,GAAGC,WACJ,GAAGjB;IACJ,MAAMkB,gBAAgBtB,QAAQM,MAAMG;IACpC,MAAMQ,cAAcjB,QAAQ,CAAC,EAAEM,KAAK,OAAO,CAAC,EAAEY;IAC9C,MAAMC,oBAAoBnB,QACxB,yBACAoB;IAGF,IAAIZ;IACJ,IAAIe,SAAS;IACb,MAAMC,eAAe,OAAOb,YAAY;IACxC,IAAI,CAACa,gBAAgB,CAACvB,YAAYwB,mBAAmB,EAAE;QACrDF,SAAS,CAAC,CAACZ,WAAW,CAACD;QACvBF,OAAOG,UACHG,gBACEK,oBACAF,cACFK;IACN,OAAO;QACLd,qBACE;;gBACGc;gBACAR,gBAAgBK,oBAAoBF;;;IAG3C;IAEA,qBACE,MAACS;QACE,GAAGL,SAAS;QACbhB,KAAKA;QACLU,WAAWjB,IACTI,YAAY;YACVyB,IAAI,CAACX;YACLT;YACAD;YACAI;YACAa;YACAV;YACAW;YACAT;QACF;;YAGDH;YACAJ;;;AAGP,GAAG"}

package/dist/src/form/Label.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/form/Label.tsx"],"sourcesContent":["import { cnb } from \"cnbuilder\";\nimport { forwardRef } from \"react\";\nimport { type TextColor, type ThemeColor, cssUtils } from \"../cssUtils.js\";\nimport { bem } from \"../utils/bem.js\";\nimport { type LabelClassNameOptions, type LabelProps } from \"./types.js\";\n\ndeclare module \"react\" {\n  interface CSSProperties {\n    \"--rmd-label-floating-top\"?: string | number;\n    \"--rmd-label-left-offset\"?: string | number;\n    \"--rmd-label-top-offset\"?: string | number;\n    \"--rmd-label-active-padding\"?: string | number;\n    \"--rmd-label-active-background-color\"?: string;\n  }\n}\n\nconst labelStyles = bem(\"rmd-label\");\n\n/**\n * @remarks \\@since 6.0.0\n */\nexport function label(options: LabelClassNameOptions): string {\n  const {\n    className,\n    gap = false,\n    error = false,\n    dense = false,\n    active = false,\n    stacked = false,\n    reversed = false,\n    disabled = false,\n    floating = false,\n    inactive = false,\n    floatingActive = active,\n  } = options;\n\n  let textColor: TextColor | ThemeColor | undefined;\n  if (disabled) {\n    textColor = \"text-disabled\";\n  } else if (error) {\n    textColor = \"error\";\n  } else if (floating && inactive) {\n    textColor = \"text-secondary\";\n  }\n\n  return cnb(\n    labelStyles({\n      gap,\n      error,\n      dense,\n      active,\n      disabled,\n      floating,\n      stacked: stacked && !reversed,\n      reversed: !stacked && reversed,\n      \"stacked-reversed\": stacked && reversed,\n      \"floating-dense\": floating && dense,\n      \"floating-active\": floating && floatingActive,\n    }),\n    cssUtils({\n      textColor,\n    }),\n    className\n  );\n}\n\n/**\n * **Server Component**\n *\n * Most of the form components already use this `Label` internally when a\n * `label` prop has been provided. You should generally use this component if\n * you need to separate the label from an existing form component or you need to\n * create a custom implementation of a form component.\n *\n * @remarks \\@since 6.0.0 Updated to be usable externally and combines the\n * floating label styles instead of having separate components.\n */\nexport const Label = forwardRef<HTMLLabelElement, LabelProps>(\n  function Label(props, ref) {\n    const {\n      gap = false,\n      error = false,\n      dense = false,\n      active = false,\n      stacked = false,\n      reversed = false,\n      disabled = false,\n      floating = false,\n      inactive = false,\n      floatingActive = active,\n      className,\n      children,\n      ...remaining\n    } = props;\n\n    return (\n      <label\n        ref={ref}\n        {...remaining}\n        className={label({\n          gap,\n          error,\n          dense,\n          active,\n          stacked,\n          reversed,\n          disabled,\n          floating,\n          floatingActive,\n          inactive,\n          className,\n        })}\n      >\n        {children}\n      </label>\n    );\n  }\n);\n"],"names":["cnb","forwardRef","cssUtils","bem","labelStyles","label","options","className","gap","error","dense","active","stacked","reversed","disabled","floating","inactive","floatingActive","textColor","Label","props","ref","children","remaining"],"mappings":";AAAA,SAASA,GAAG,QAAQ,YAAY;AAChC,SAASC,UAAU,QAAQ,QAAQ;AACnC,SAA0CC,QAAQ,QAAQ,iBAAiB;AAC3E,SAASC,GAAG,QAAQ,kBAAkB;AAatC,MAAMC,cAAcD,IAAI;AAExB;;CAEC,GACD,OAAO,SAASE,MAAMC,OAA8B;IAClD,MAAM,EACJC,SAAS,EACTC,MAAM,KAAK,EACXC,QAAQ,KAAK,EACbC,QAAQ,KAAK,EACbC,SAAS,KAAK,EACdC,UAAU,KAAK,EACfC,WAAW,KAAK,EAChBC,WAAW,KAAK,EAChBC,WAAW,KAAK,EAChBC,WAAW,KAAK,EAChBC,iBAAiBN,MAAM,EACxB,GAAGL;IAEJ,IAAIY;IACJ,IAAIJ,UAAU;QACZI,YAAY;IACd,OAAO,IAAIT,OAAO;QAChBS,YAAY;IACd,OAAO,IAAIH,YAAYC,UAAU;QAC/BE,YAAY;IACd;IAEA,OAAOlB,IACLI,YAAY;QACVI;QACAC;QACAC;QACAC;QACAG;QACAC;QACAH,SAASA,WAAW,CAACC;QACrBA,UAAU,CAACD,WAAWC;QACtB,oBAAoBD,WAAWC;QAC/B,kBAAkBE,YAAYL;QAC9B,mBAAmBK,YAAYE;IACjC,IACAf,SAAS;QACPgB;IACF,IACAX;AAEJ;AAEA;;;;;;;;;;CAUC,GACD,OAAO,MAAMY,sBAAQlB,WACnB,SAASkB,MAAMC,KAAK,EAAEC,GAAG;IACvB,MAAM,EACJb,MAAM,KAAK,EACXC,QAAQ,KAAK,EACbC,QAAQ,KAAK,EACbC,SAAS,KAAK,EACdC,UAAU,KAAK,EACfC,WAAW,KAAK,EAChBC,WAAW,KAAK,EAChBC,WAAW,KAAK,EAChBC,WAAW,KAAK,EAChBC,iBAAiBN,MAAM,EACvBJ,SAAS,EACTe,QAAQ,EACR,GAAGC,WACJ,GAAGH;IAEJ,qBACE,KAACf;QACCgB,KAAKA;QACJ,GAAGE,SAAS;QACbhB,WAAWF,MAAM;YACfG;YACAC;YACAC;YACAC;YACAC;YACAC;YACAC;YACAC;YACAE;YACAD;YACAT;QACF;kBAECe;;AAGP,GACA"}

package/dist/src/form/Legend.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/form/Legend.tsx"],"sourcesContent":["import { cnb } from \"cnbuilder\";\nimport { forwardRef } from \"react\";\nimport { cssUtils } from \"../cssUtils.js\";\nimport { Typography, type TypographyProps } from \"../typography/Typography.js\";\n\n/**\n * @remarks \\@since 6.0.0\n */\nexport interface LegendProps extends TypographyProps {\n  /**\n   * @defaultValue `false`\n   */\n  srOnly?: boolean;\n}\n\n/**\n * **Server Component**\n *\n * This should be used within a `Fieldset` to apply a label.\n *\n * @remarks \\@since 6.0.0\n */\nexport const Legend = forwardRef<HTMLLegendElement, LegendProps>(\n  function Legend(props, ref) {\n    const { srOnly = false, className, children, ...remaining } = props;\n\n    return (\n      <Typography\n        {...remaining}\n        as=\"legend\"\n        ref={ref}\n        className={cnb(\"rmd-legend\", cssUtils({ srOnly }), className)}\n      >\n        {children}\n      </Typography>\n    );\n  }\n);\n"],"names":["cnb","forwardRef","cssUtils","Typography","Legend","props","ref","srOnly","className","children","remaining","as"],"mappings":";AAAA,SAASA,GAAG,QAAQ,YAAY;AAChC,SAASC,UAAU,QAAQ,QAAQ;AACnC,SAASC,QAAQ,QAAQ,iBAAiB;AAC1C,SAASC,UAAU,QAA8B,8BAA8B;AAY/E;;;;;;CAMC,GACD,OAAO,MAAMC,uBAASH,WACpB,SAASG,OAAOC,KAAK,EAAEC,GAAG;IACxB,MAAM,EAAEC,SAAS,KAAK,EAAEC,SAAS,EAAEC,QAAQ,EAAE,GAAGC,WAAW,GAAGL;IAE9D,qBACE,KAACF;QACE,GAAGO,SAAS;QACbC,IAAG;QACHL,KAAKA;QACLE,WAAWR,IAAI,cAAcE,SAAS;YAAEK;QAAO,IAAIC;kBAElDC;;AAGP,GACA"}

package/dist/src/form/MenuItemCheckbox.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/form/MenuItemCheckbox.tsx"],"sourcesContent":["\"use client\";\nimport { forwardRef } from \"react\";\nimport {\n  MenuItemInputToggle,\n  type MenuItemCheckboxProps,\n} from \"./MenuItemInputToggle.js\";\n// eslint-disable-next-line @typescript-eslint/no-unused-vars\nimport { type ICON_CONFIG } from \"../icon/iconConfig.js\";\n\n/**\n * **Client Component**\n *\n * This is a simple wrapper for the {@link MenuItemInputToggle} component to\n * render it as a checkbox and pulling the checkbox icon from the\n * {@link ICON_CONFIG}.\n *\n * @example\n * Simple Example\n * ```tsx\n * import { DropdownMenu, MenuItemCheckbox } from \"@react-md/core\";\n * import { ReactElement, useState } from \"react\";\n *\n * function Example(): ReactElement {\n *   const [checked, setChecked] = useState(false);\n *\n *   return (\n *     <DropdownMenu buttonChildren=\"Button\">\n *       <MenuItemCheckbox\n *         checked={checked}\n *         onCheckedChange={(nextChecked) => setChecked(nextChecked)}\n *       >\n *         Checkbox\n *      </MenuItemCheckbox>\n *     </DropdownMenu>\n *   );\n * }\n * ```\n *\n * @remarks \\@since 2.8.0\n */\nexport const MenuItemCheckbox = forwardRef<\n  HTMLLIElement,\n  MenuItemCheckboxProps\n>(function MenuItemCheckbox(props, ref) {\n  return <MenuItemInputToggle {...props} ref={ref} type=\"checkbox\" />;\n});\n"],"names":["forwardRef","MenuItemInputToggle","MenuItemCheckbox","props","ref","type"],"mappings":"AAAA;;AACA,SAASA,UAAU,QAAQ,QAAQ;AACnC,SACEC,mBAAmB,QAEd,2BAA2B;AAIlC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA8BC,GACD,OAAO,MAAMC,iCAAmBF,WAG9B,SAASE,iBAAiBC,KAAK,EAAEC,GAAG;IACpC,qBAAO,KAACH;QAAqB,GAAGE,KAAK;QAAEC,KAAKA;QAAKC,MAAK;;AACxD,GAAG"}

package/dist/src/form/MenuItemFileInput.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/form/MenuItemFileInput.tsx"],"sourcesContent":["\"use client\";\nimport {\n  forwardRef,\n  type ChangeEventHandler,\n  type InputHTMLAttributes,\n} from \"react\";\nimport { getIcon } from \"../icon/iconConfig.js\";\nimport { MenuItem, type MenuItemProps } from \"../menu/MenuItem.js\";\nimport { useEnsuredId } from \"../useEnsuredId.js\";\n\nconst noop = (): void => {\n  // do nothing\n};\n\n/**\n * @remarks \\@since 6.0.0 Removed most of the shared `FileInputProps` from this\n * implementation.\n */\nexport interface MenuItemFileInputProps\n  extends Omit<MenuItemProps, \"onChange\"> {\n  /**\n   * A change event handler that should do something with the selected files.\n   * Usually the `onChange` returned by `useFileUpload` or:\n   *\n   * ```ts\n   * onChange={(event) => {\n   *   const { files } = event.currentTarget;\n   *   // do something with files\n   * }}\n   * ```\n   *\n   * @remarks\n   * This is actually a native `Event` and not a `SyntheticEvent` because the\n   * file input is created through `document.createElement` instead of `React`.\n   * You can still access the files through `event.currentTarget.files` like\n   * normal.\n   */\n  onChange: ChangeEventHandler<HTMLInputElement>;\n\n  accept?: InputHTMLAttributes<HTMLInputElement>[\"accept\"];\n  capture?: InputHTMLAttributes<HTMLInputElement>[\"capture\"];\n  multiple?: InputHTMLAttributes<HTMLInputElement>[\"multiple\"];\n\n  /**\n   * Set this to `true` if the `Menu` should not close when the file input's\n   * menu item is clicked.\n   *\n   * @defaultValue `false`\n   */\n  preventMenuHideOnClick?: boolean;\n}\n\n/**\n * **Client Component**\n *\n * A wrapper for the `<input type=\"file\">` element that works within menus.\n *\n * @remarks\n * \\@since 5.0.0\n * \\@since 6.0.0 No longer creates an invisible file input element within the\n * menu item. This allows the menu to be closed immediately when this menu item\n * is clicked.\n */\nexport const MenuItemFileInput = forwardRef<\n  HTMLLIElement,\n  MenuItemFileInputProps\n>(function MenuItemFileInput(props, ref) {\n  const {\n    id: propId,\n    onClick = noop,\n    onChange,\n    accept = \"\",\n    multiple = false,\n    children,\n    leftAddon: propLeftAddon,\n    preventMenuHideOnClick = false,\n    ...remaining\n  } = props;\n\n  const id = useEnsuredId(propId, \"menu-item\");\n  const leftAddon = getIcon(\"upload\", propLeftAddon);\n\n  return (\n    <MenuItem\n      {...remaining}\n      id={id}\n      ref={ref}\n      leftAddon={leftAddon}\n      onClick={(event) => {\n        onClick(event);\n\n        if (preventMenuHideOnClick) {\n          event.stopPropagation();\n        }\n\n        // create a temporary file input element and click it to trigger the\n        // file upload behavior.\n        let input: HTMLInputElement | null = document.createElement(\"input\");\n        input.type = \"file\";\n        input.accept = accept;\n        input.multiple = multiple;\n\n        // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n        // @ts-expect-error\n        input.onchange = onChange;\n        input.click();\n        input = null;\n      }}\n    >\n      {children}\n    </MenuItem>\n  );\n});\n"],"names":["forwardRef","getIcon","MenuItem","useEnsuredId","noop","MenuItemFileInput","props","ref","id","propId","onClick","onChange","accept","multiple","children","leftAddon","propLeftAddon","preventMenuHideOnClick","remaining","event","stopPropagation","input","document","createElement","type","onchange","click"],"mappings":"AAAA;;AACA,SACEA,UAAU,QAGL,QAAQ;AACf,SAASC,OAAO,QAAQ,wBAAwB;AAChD,SAASC,QAAQ,QAA4B,sBAAsB;AACnE,SAASC,YAAY,QAAQ,qBAAqB;AAElD,MAAMC,OAAO;AACX,aAAa;AACf;AAwCA;;;;;;;;;;CAUC,GACD,OAAO,MAAMC,kCAAoBL,WAG/B,SAASK,kBAAkBC,KAAK,EAAEC,GAAG;IACrC,MAAM,EACJC,IAAIC,MAAM,EACVC,UAAUN,IAAI,EACdO,QAAQ,EACRC,SAAS,EAAE,EACXC,WAAW,KAAK,EAChBC,QAAQ,EACRC,WAAWC,aAAa,EACxBC,yBAAyB,KAAK,EAC9B,GAAGC,WACJ,GAAGZ;IAEJ,MAAME,KAAKL,aAAaM,QAAQ;IAChC,MAAMM,YAAYd,QAAQ,UAAUe;IAEpC,qBACE,KAACd;QACE,GAAGgB,SAAS;QACbV,IAAIA;QACJD,KAAKA;QACLQ,WAAWA;QACXL,SAAS,CAACS;YACRT,QAAQS;YAER,IAAIF,wBAAwB;gBAC1BE,MAAMC,eAAe;YACvB;YAEA,oEAAoE;YACpE,wBAAwB;YACxB,IAAIC,QAAiCC,SAASC,aAAa,CAAC;YAC5DF,MAAMG,IAAI,GAAG;YACbH,MAAMT,MAAM,GAAGA;YACfS,MAAMR,QAAQ,GAAGA;YAEjB,6DAA6D;YAC7D,mBAAmB;YACnBQ,MAAMI,QAAQ,GAAGd;YACjBU,MAAMK,KAAK;YACXL,QAAQ;QACV;kBAECP;;AAGP,GAAG"}

package/dist/src/form/MenuItemInputToggle.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/form/MenuItemInputToggle.tsx"],"sourcesContent":["\"use client\";\nimport { cnb } from \"cnbuilder\";\nimport {\n  forwardRef,\n  type CSSProperties,\n  type HTMLAttributes,\n  type MouseEvent,\n  type ReactNode,\n} from \"react\";\nimport { ListItem } from \"../list/ListItem.js\";\nimport {\n  type ListItemAddonPosition,\n  type ListItemAddonType,\n  type ListItemHeight,\n} from \"../list/types.js\";\nimport { type PropsWithRef } from \"../types.js\";\nimport { useEnsuredId } from \"../useEnsuredId.js\";\nimport { bem } from \"../utils/bem.js\";\nimport {\n  type IndeterminateCheckboxProps,\n  type InputToggleIconProps,\n} from \"./InputToggle.js\";\nimport { InputToggleIcon } from \"./InputToggleIcon.js\";\nimport { SwitchTrack } from \"./SwitchTrack.js\";\nimport { type InputToggleSize } from \"./inputToggleStyles.js\";\n\nconst noop = (): void => {\n  // do nothing\n};\nconst styles = bem(\"rmd-menu-item-input-toggle\");\n\n/** @remarks \\@since 6.0.0 */\nexport interface MenuItemInputToggleClassNameOptions {\n  className?: string;\n  type: \"radio\" | \"checkbox\" | \"switch\";\n}\n\n/**\n * @remarks \\@since 6.0.0\n */\nexport function menuItemInputToggle(\n  options: MenuItemInputToggleClassNameOptions\n): string {\n  const { className, type } = options;\n  return cnb(\n    `rmd-${type}-menu-item`,\n    styles({ switch: type === \"switch\" }),\n    className\n  );\n}\n\n/**\n * @remarks \\@since 6.0.0\n */\nexport type MenuItemInputToggleCheckedCallback = (\n  checked: boolean,\n  event: MouseEvent<HTMLLIElement>\n) => void;\n\n/** @remarks \\@since 2.8.0 */\nexport interface BaseMenuItemInputToggleProps\n  extends HTMLAttributes<HTMLLIElement>,\n    InputToggleIconProps {\n  checked: boolean;\n  onCheckedChange: MenuItemInputToggleCheckedCallback;\n\n  /**\n   * @defaultValue `\"menu-item-\" + useId()`\n   */\n  id?: string;\n\n  /** @defaultValue `false` */\n  disabled?: boolean;\n\n  /**\n   * Set this to `true` if the `Menu` should not close when the input toggle is\n   * clicked. This can be useful when interacting with a checkbox group within a\n   * menu or allowing the user to select multiple options before closing the\n   * menu.\n   *\n   * @defaultValue `false`\n   */\n  preventMenuHideOnClick?: boolean;\n\n  /**\n   * This is set to `\"auto\"` by default so the icon shrinks back down to the\n   * default icon size instead of relative to the current font size. You\n   * probably don't want to change this since it'll also modify the height of\n   * the menu item\n   *\n   * @defaultValue `\"auto\"`\n   */\n  size?: InputToggleSize;\n\n  /** @defaultValue `\"auto\"` */\n  height?: ListItemHeight;\n\n  /** @defaultValue `false` */\n  multiline?: boolean;\n\n  /** @defaultValue `false` */\n  disableTextChildren?: boolean;\n\n  /** @defaultValue `false` */\n  iconAfter?: boolean;\n\n  addon?: ReactNode;\n  addonType?: ListItemAddonType;\n  addonPosition?: ListItemAddonPosition;\n\n  /** @defaultValue `false` */\n  addonForceWrap?: boolean;\n\n  /** @defaultValue `false` */\n  disableAddonCenteredMedia?: boolean;\n}\n\nexport interface MenuItemCheckboxProps\n  extends BaseMenuItemInputToggleProps,\n    IndeterminateCheckboxProps {}\n\nexport type MenuItemRadioProps = BaseMenuItemInputToggleProps;\n\n/**\n * @remarks\n * \\@since 2.8.0\n * \\@since 6.0.0 Added additional props for styling the track and ball.\n */\nexport interface MenuItemSwitchProps extends BaseMenuItemInputToggleProps {\n  trackProps?: PropsWithRef<HTMLAttributes<HTMLDivElement>, HTMLDivElement>;\n  trackStyle?: CSSProperties;\n  trackClassName?: string;\n  ballProps?: PropsWithRef<HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>;\n  ballStyle?: CSSProperties;\n  ballClassName?: string;\n}\n\n/**\n * @remarks\n * \\@since 2.8.0\n * \\@since 6.0.0 Updated to be a union of the different props to enforce the\n * correct props based on `type`\n */\nexport type MenuItemInputToggleProps =\n  | (MenuItemCheckboxProps & { type: \"checkbox\" })\n  | (MenuItemRadioProps & { type: \"radio\" })\n  | (MenuItemSwitchProps & { type: \"switch\" });\n\n/**\n * **Client Component**\n *\n * This is a low-level component that should probably not be used externally and\n * instead the `MenuItemCheckbox`, `MenuItemRadio`, or `MenuItemSwitch` should\n * be used instead.\n *\n * @see {@link MenuItemCheckbox} for checkbox examples\n * @see {@link MenuItemRadio} for radio examples\n * @see {@link MenuItemSwitch} for switch examples\n * @remarks \\@since 2.8.0\n */\nexport const MenuItemInputToggle = forwardRef<\n  HTMLLIElement,\n  MenuItemInputToggleProps\n>(function MenuItemInputToggle(props, ref) {\n  const {\n    id: propId,\n    type,\n    disabled = false,\n    checked,\n    onCheckedChange,\n    preventMenuHideOnClick = false,\n    onClick = noop,\n    className,\n    tabIndex = -1,\n    children,\n    size = \"auto\",\n    icon: propIcon,\n    iconAfter = false,\n    iconProps,\n    iconStyle,\n    iconClassName,\n    checkedIcon,\n    indeterminate,\n    indeterminateIcon,\n    addon,\n    addonType,\n    addonPosition,\n    addonForceWrap,\n    disableAddonCenteredMedia,\n    ballProps,\n    ballStyle,\n    ballClassName,\n    trackProps,\n    trackStyle,\n    trackClassName,\n    ...remaining\n  } = props as MenuItemSwitchProps &\n    MenuItemCheckboxProps & { type: \"checkbox\" | \"radio\" | \"switch\" };\n  const id = useEnsuredId(propId, \"menu-item\");\n\n  let icon = propIcon;\n  if (typeof propIcon === \"undefined\") {\n    if (type === \"switch\") {\n      icon = (\n        <SwitchTrack\n          style={trackStyle}\n          {...trackProps}\n          className={cnb(\n            styles(\"track\"),\n            trackClassName,\n            trackProps?.className\n          )}\n          active={checked}\n          ballProps={ballProps}\n          ballStyle={ballStyle}\n          ballClassName={cnb(styles(\"ball\"), ballClassName)}\n        />\n      );\n    } else {\n      icon = (\n        <InputToggleIcon\n          style={iconStyle}\n          disableEm\n          {...iconProps}\n          className={cnb(styles(\"icon\"), iconClassName, iconProps?.className)}\n          size={size}\n          type={type}\n          checked={checked}\n          disabled={disabled}\n          icon={propIcon}\n          checkedIcon={checkedIcon}\n          indeterminate={indeterminate}\n          indeterminateIcon={indeterminateIcon}\n        />\n      );\n    }\n  }\n\n  let leftAddon: ReactNode;\n  let leftAddonType: ListItemAddonType | undefined;\n  let leftAddonPosition: ListItemAddonPosition | undefined;\n  let leftAddonForceWrap: boolean | undefined;\n  let disableLeftAddonCenteredMedia: boolean | undefined;\n  let rightAddon: ReactNode;\n  let rightAddonType: ListItemAddonType | undefined;\n  let rightAddonPosition: ListItemAddonPosition | undefined;\n  let rightAddonForceWrap: boolean | undefined;\n  let disableRightAddonCenteredMedia: boolean | undefined;\n  if (iconAfter) {\n    leftAddon = addon;\n    leftAddonType = addonType;\n    leftAddonPosition = addonPosition;\n    leftAddonForceWrap = addonForceWrap;\n    disableLeftAddonCenteredMedia = disableAddonCenteredMedia;\n    rightAddon = icon;\n  } else {\n    leftAddon = icon;\n    rightAddon = addon;\n    rightAddonType = addonType;\n    rightAddonPosition = addonPosition;\n    rightAddonForceWrap = addonForceWrap;\n    disableRightAddonCenteredMedia = disableAddonCenteredMedia;\n  }\n\n  return (\n    <ListItem\n      {...remaining}\n      // I'm not actually sure if this is correct\n      aria-checked={indeterminate && checked ? \"mixed\" : checked}\n      id={id}\n      role={type === \"radio\" ? \"menuitemradio\" : \"menuitemcheckbox\"}\n      onClick={(event) => {\n        onClick(event);\n        onCheckedChange(!checked, event);\n\n        if (preventMenuHideOnClick) {\n          event.stopPropagation();\n        }\n      }}\n      ref={ref}\n      className={menuItemInputToggle({ type, className })}\n      disabled={disabled}\n      tabIndex={tabIndex}\n      leftAddon={leftAddon}\n      leftAddonType={leftAddonType}\n      leftAddonPosition={leftAddonPosition}\n      leftAddonForceWrap={leftAddonForceWrap}\n      disableLeftAddonCenteredMedia={disableLeftAddonCenteredMedia}\n      rightAddon={rightAddon}\n      rightAddonType={rightAddonType}\n      rightAddonPosition={rightAddonPosition}\n      rightAddonForceWrap={rightAddonForceWrap}\n      disableRightAddonCenteredMedia={disableRightAddonCenteredMedia}\n    >\n      {children}\n    </ListItem>\n  );\n});\n"],"names":["cnb","forwardRef","ListItem","useEnsuredId","bem","InputToggleIcon","SwitchTrack","noop","styles","menuItemInputToggle","options","className","type","switch","MenuItemInputToggle","props","ref","id","propId","disabled","checked","onCheckedChange","preventMenuHideOnClick","onClick","tabIndex","children","size","icon","propIcon","iconAfter","iconProps","iconStyle","iconClassName","checkedIcon","indeterminate","indeterminateIcon","addon","addonType","addonPosition","addonForceWrap","disableAddonCenteredMedia","ballProps","ballStyle","ballClassName","trackProps","trackStyle","trackClassName","remaining","style","active","disableEm","leftAddon","leftAddonType","leftAddonPosition","leftAddonForceWrap","disableLeftAddonCenteredMedia","rightAddon","rightAddonType","rightAddonPosition","rightAddonForceWrap","disableRightAddonCenteredMedia","aria-checked","role","event","stopPropagation"],"mappings":"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"}

package/dist/src/form/MenuItemRadio.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/form/MenuItemRadio.tsx"],"sourcesContent":["\"use client\";\nimport { forwardRef } from \"react\";\nimport {\n  MenuItemInputToggle,\n  type MenuItemRadioProps,\n} from \"./MenuItemInputToggle.js\";\n// eslint-disable-next-line @typescript-eslint/no-unused-vars\nimport { type ICON_CONFIG } from \"../icon/iconConfig.js\";\n\n/**\n * **Client Component**\n *\n * This is a simple wrapper for the {@link MenuItemInputToggle} component to\n * render it as a radio and pulling the radio icon from the\n * {@link ICON_CONFIG}.\n *\n * If a menu or menubar contains more than one group of menuitemradio elements,\n * or if the menu contains one group and other, unrelated menu items, authors\n * SHOULD nest each set of related menuitemradio elements in an element using\n * the group role, and authors SHOULD delimit the group from other menu items\n * with an element using the separator role.\n * @see {@link https://www.w3.org/TR/wai-aria-1.1/#menuitemradio}\n *\n * @example\n * Only Radio Items\n * ```tsx\n * import { ReactElement, useState } from \"react\";\n * import { DropdownMenu, MenuItemRadio } from \"@react-md/core\";\n *\n * function Example(): ReactElement {\n *   const [value, setValue] = useState(\"value1\");\n *\n *   return (\n *     <DropdownMenu id=\"dropdown-menu-id\" buttonChildren=\"Button\">\n *       <MenuItemRadio\n *         id=\"radio-1\"\n *         checked={value === \"value1\"}\n *         onCheckedChange={() => setValue(\"value1\")}\n *       >\n *          Radio 1\n *       </MenuItemRadio>\n *       <MenuItemRadio\n *         id=\"radio-2\"\n *         checked={value === \"value2\"}\n *         onCheckedChange={() => setValue(\"value2\")}\n *       >\n *         Radio 2\n *       </MenuItemRadio>\n *       <MenuItemRadio\n *         id=\"radio-3\"\n *         checked={value === \"value3\"}\n *         onCheckedChange={() => setValue(\"value3\")}\n *       >\n *         Radio 3\n *       </MenuItemRadio>\n *     </DropdownMenu>\n *   );\n * }\n * ```\n *\n * @example\n * With Other Items\n * ```tsx\n * import {\n *   DropdownMenu,\n *   MenuItemGroup,\n *   MenuItemRadio,\n *   MenuItemSwitch,\n *   MenuItemSeparator,\n * } from \"@react-md/core\";\n * import type { ReactElement } from \"react\";\n * import { useState } from \"react\";\n *\n * function Example(): ReactElement {\n *   const [value, setValue] = useState(\"value1\");\n *\n *   return (\n *     <DropdownMenu buttonChildren=\"Button\">\n *       <MenuItemSwitch\n *         checked={checked}\n *         onCheckedChange={nextChecked => setChecked(nextChecked)}\n *       >\n *         Light mode\n *       </MenuItemSwitch>\n *       <MenuItemSeparator />\n *       <MenuItemGroup aria-label=\"My Group Label\">\n *         <MenuItemRadio\n *           checked={value === \"value1\"}\n *           onCheckedChange={() => setValue(\"value1\")}\n *         >\n *           Radio 1\n *         </MenuItemRadio>\n *         <MenuItemRadio\n *           checked={value === \"value2\"}\n *           onCheckedChange={() => setValue(\"value2\")}\n *         >\n *           Radio 2\n *         </MenuItemRadio>\n *         <MenuItemRadio\n *           checked={value === \"value3\"}\n *           onCheckedChange={() => setValue(\"value3\")}\n *         >\n *           Radio 3\n *         </MenuItemRadio>\n *       </MenuItemGroup>\n *     </DropdownMenu>\n *   );\n * }\n * ```\n *\n * @remarks \\@since 2.8.0\n */\nexport const MenuItemRadio = forwardRef<HTMLLIElement, MenuItemRadioProps>(\n  function MenuItemRadio(props, ref) {\n    return <MenuItemInputToggle {...props} ref={ref} type=\"radio\" />;\n  }\n);\n"],"names":["forwardRef","MenuItemInputToggle","MenuItemRadio","props","ref","type"],"mappings":"AAAA;;AACA,SAASA,UAAU,QAAQ,QAAQ;AACnC,SACEC,mBAAmB,QAEd,2BAA2B;AAIlC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAsGC,GACD,OAAO,MAAMC,8BAAgBF,WAC3B,SAASE,cAAcC,KAAK,EAAEC,GAAG;IAC/B,qBAAO,KAACH;QAAqB,GAAGE,KAAK;QAAEC,KAAKA;QAAKC,MAAK;;AACxD,GACA"}

package/dist/src/form/MenuItemSwitch.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/form/MenuItemSwitch.tsx"],"sourcesContent":["\"use client\";\nimport { forwardRef } from \"react\";\nimport {\n  MenuItemInputToggle,\n  type MenuItemSwitchProps,\n} from \"./MenuItemInputToggle.js\";\n\n/**\n * **Client Component**\n *\n * This is a simple wrapper for the {@link MenuItemInputToggle} component to\n * render it as a switch.\n *\n * @example\n * Simple Example\n * ```tsx\n * import { ReactElement, useState } from \"react\";\n * import { DropdownMenu, MenuItemSwitch } from \"@react-md/core\";\n *\n * function Example(): ReactElement {\n *   const [checked, setChecked] = useState(false);\n *\n *   return (\n *     <DropdownMenu buttonChildren=\"Button\">\n *       <MenuItemSwitch\n *         checked={checked}\n *         onCheckedChange={(nextChecked) => setChecked(nextChecked)}\n *       >\n *         Switch\n *      </MenuItemSwitch>\n *     </DropdownMenu>\n *   );\n * }\n * ```\n *\n * @remarks \\@since 2.8.0\n */\nexport const MenuItemSwitch = forwardRef<HTMLLIElement, MenuItemSwitchProps>(\n  function MenuItemSwitch(props, ref) {\n    return <MenuItemInputToggle {...props} ref={ref} type=\"switch\" />;\n  }\n);\n"],"names":["forwardRef","MenuItemInputToggle","MenuItemSwitch","props","ref","type"],"mappings":"AAAA;;AACA,SAASA,UAAU,QAAQ,QAAQ;AACnC,SACEC,mBAAmB,QAEd,2BAA2B;AAElC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA6BC,GACD,OAAO,MAAMC,+BAAiBF,WAC5B,SAASE,eAAeC,KAAK,EAAEC,GAAG;IAChC,qBAAO,KAACH;QAAqB,GAAGE,KAAK;QAAEC,KAAKA;QAAKC,MAAK;;AACxD,GACA"}

package/dist/src/form/MenuItemTextField.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/form/MenuItemTextField.tsx"],"sourcesContent":["\"use client\";\nimport { cnb } from \"cnbuilder\";\nimport { forwardRef, type HTMLAttributes } from \"react\";\nimport { type PropsWithRef } from \"../types.js\";\nimport { TextField, type TextFieldProps } from \"./TextField.js\";\n\n/**\n * @remarks \\@since 5.0.0\n */\nexport interface MenuItemTextFieldProps extends TextFieldProps {\n  /**\n   * Any additional props or a `ref` to apply to the surrounding `<li>` element.\n   */\n  liProps?: PropsWithRef<HTMLAttributes<HTMLLIElement>, HTMLLIElement>;\n\n  /** @defaultValue `true` */\n  stretch?: boolean;\n}\n\n/**\n * **Client Component**\n *\n * This is a wrapper for the `TextField` component that can be used within\n * `Menu`s by updating the `onKeyDown` and `onClick` behavior.\n *\n * Note: This is **not** the `TextFieldWithMessage` since the message part is\n * hard to style nicely within menus. You'd most likely want to use another menu\n * for displaying errors.\n *\n * @remarks \\@since 5.0.0\n */\nexport const MenuItemTextField = forwardRef<\n  HTMLInputElement,\n  MenuItemTextFieldProps\n>(function MenuItemTextField(props, ref) {\n  const { liProps, onKeyDown, stretch = true, ...remaining } = props;\n  return (\n    <li\n      role=\"none\"\n      {...liProps}\n      onClick={(event) => {\n        liProps?.onClick?.(event);\n        event.stopPropagation();\n      }}\n      className={cnb(\"rmd-list-item rmd-menu-item\", liProps?.className)}\n    >\n      <TextField\n        {...remaining}\n        ref={ref}\n        stretch={stretch}\n        onKeyDown={(event) => {\n          onKeyDown?.(event);\n          switch (event.key) {\n            case \"Tab\":\n            case \"Escape\":\n            case \" \":\n              // do default behavior\n              break;\n            default:\n              if (event.key.length === 1 || event.currentTarget.value) {\n                event.stopPropagation();\n              }\n          }\n        }}\n      />\n    </li>\n  );\n});\n"],"names":["cnb","forwardRef","TextField","MenuItemTextField","props","ref","liProps","onKeyDown","stretch","remaining","li","role","onClick","event","stopPropagation","className","key","length","currentTarget","value"],"mappings":"AAAA;;AACA,SAASA,GAAG,QAAQ,YAAY;AAChC,SAASC,UAAU,QAA6B,QAAQ;AAExD,SAASC,SAAS,QAA6B,iBAAiB;AAehE;;;;;;;;;;;CAWC,GACD,OAAO,MAAMC,kCAAoBF,WAG/B,SAASE,kBAAkBC,KAAK,EAAEC,GAAG;IACrC,MAAM,EAAEC,OAAO,EAAEC,SAAS,EAAEC,UAAU,IAAI,EAAE,GAAGC,WAAW,GAAGL;IAC7D,qBACE,KAACM;QACCC,MAAK;QACJ,GAAGL,OAAO;QACXM,SAAS,CAACC;YACRP,SAASM,UAAUC;YACnBA,MAAMC,eAAe;QACvB;QACAC,WAAWf,IAAI,+BAA+BM,SAASS;kBAEvD,cAAA,KAACb;YACE,GAAGO,SAAS;YACbJ,KAAKA;YACLG,SAASA;YACTD,WAAW,CAACM;gBACVN,YAAYM;gBACZ,OAAQA,MAAMG,GAAG;oBACf,KAAK;oBACL,KAAK;oBACL,KAAK;wBAEH;oBACF;wBACE,IAAIH,MAAMG,GAAG,CAACC,MAAM,KAAK,KAAKJ,MAAMK,aAAa,CAACC,KAAK,EAAE;4BACvDN,MAAMC,eAAe;wBACvB;gBACJ;YACF;;;AAIR,GAAG"}

package/dist/src/form/NativeSelect.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/form/NativeSelect.tsx"],"sourcesContent":["import {\n  forwardRef,\n  type CSSProperties,\n  type HTMLAttributes,\n  type ReactNode,\n  type SelectHTMLAttributes,\n} from \"react\";\nimport { getIcon } from \"../icon/iconConfig.js\";\nimport { type PropsWithRef } from \"../types.js\";\nimport { useEnsuredId } from \"../useEnsuredId.js\";\nimport { FormMessageContainer } from \"./FormMessageContainer.js\";\nimport { Label } from \"./Label.js\";\nimport { TextFieldContainer } from \"./TextFieldContainer.js\";\nimport { getFormConfig } from \"./formConfig.js\";\nimport { nativeSelect, nativeSelectContainer } from \"./nativeSelectStyles.js\";\nimport {\n  type FormFieldOptions,\n  type UserAgentAutoCompleteProps,\n} from \"./types.js\";\n\nexport interface NativeSelectProps\n  extends SelectHTMLAttributes<HTMLSelectElement>,\n    UserAgentAutoCompleteProps,\n    FormFieldOptions {\n  /**\n   * A custom dropdown icon to use instead of the browser's default select\n   * dropdown icon.\n   *\n   * Set this to `null` if the browser's default icon should be used instead.\n   *\n   * @defaultValue `getIcon(\"dropdown\")`\n   */\n  icon?: ReactNode;\n\n  /**\n   * This applies custom inline styles to the `<select>` element since the\n   * `style` prop is applied to the container element instead.\n   */\n  selectStyle?: CSSProperties;\n\n  /**\n   * This applies custom className to the `<select>` element since the\n   * `className` prop is applied to the container element instead.\n   */\n  selectClassName?: string;\n\n  /**\n   * This should be a list of `<option>` elements for specific values within the\n   * `<select>`.\n   *\n   * Check out the {@link NativeSelect} for examples around using \"placeholder\"\n   * text and requiring a value to be selected.\n   */\n  children: ReactNode;\n\n  /**\n   * Optional props to provide to the {@link TextFieldContainer} component.\n   * There probably isn't any real use for this prop other than if you need to\n   * add a `ref` for some DOM behavior.\n   */\n  containerProps?: PropsWithRef<HTMLAttributes<HTMLDivElement>, HTMLDivElement>;\n}\n\n/**\n * **Server Component**\n *\n * This component is a wrapper for the native `<select>` field that applies the\n * same theming as `TextField` and `TextArea` components. This component might\n * not be used much since the `Select` offers more styling options.\n *\n * @example\n * Simple Example\n * ```tsx\n * <NativeSelect label=\"Label\">\n *   <option value=\"a\">Value 1</option>\n *   <option value=\"b\">Value 2</option>\n *   <option value=\"c\">Value 3</option>\n *   <option value=\"d\">Value 4</option>\n * </NativeSelect>\n * ```\n *\n * @example\n * Required Value Example\n * ```tsx\n * function Example(): ReactElement {\n *   // using `defaultValue=\"\"` makes it so the first option selected by default\n *   // and considered an \"invalid\" value since it is `disabled`\n *   //\n *   // a `name` must be set with `required` so that the form validation will\n *   // fire if the value is still the empty string when the form is submitted\n *   //\n *   // the first `<option>` is kind of like placeholder text since it doesn't\n *   // have a value and is disabled by default\n *\n *   return (\n *     <NativeSelect\n *       label=\"State\"\n *       name=\"state\"\n *       required\n *       defaultValue=\"\"\n *     >\n *       <option value=\"\" disabled>Choose a state</option>\n *       {states.map(({ name, code }) => (\n *         <option key={code} value={code}>{name}</option>\n *       ))}\n *     </NativeSelect>\n *   );\n * }\n * ```\n */\nexport const NativeSelect = forwardRef<HTMLSelectElement, NativeSelectProps>(\n  function NativeSelect(props, ref) {\n    const {\n      id: propId,\n      style,\n      className,\n      icon: propIcon,\n      label,\n      labelProps,\n      labelStyle,\n      labelClassName,\n      selectStyle,\n      selectClassName,\n      autoCompleteValue,\n      autoComplete = autoCompleteValue,\n      name = autoCompleteValue,\n      dense = false,\n      error = false,\n      active = false,\n      inline = false,\n      stretch = false,\n      leftAddon,\n      rightAddon: propRightAddon,\n      leftAddonProps,\n      rightAddonProps,\n      disableLeftAddonStyles = false,\n      disableRightAddonStyles = false,\n      theme: propTheme,\n      underlineDirection: propUnderlineDirection,\n      messageProps,\n      messageContainerProps,\n      containerProps,\n      children,\n      ...remaining\n    } = props;\n    const { disabled = false, readOnly = false, multiple = false } = props;\n    const id = useEnsuredId(propId, \"select\");\n    const theme = getFormConfig(\"theme\", propTheme);\n    const underlineDirection = getFormConfig(\n      \"underlineDirection\",\n      propUnderlineDirection\n    );\n    const icon = getIcon(\"dropdown\", propIcon);\n    const underlined = theme === \"underline\" || theme === \"filled\";\n\n    let rightAddon = propRightAddon;\n    if (typeof propRightAddon === \"undefined\" && !multiple) {\n      rightAddon = icon;\n    }\n\n    return (\n      <FormMessageContainer\n        {...messageContainerProps}\n        messageProps={messageProps}\n      >\n        <TextFieldContainer\n          {...containerProps}\n          style={style}\n          className={nativeSelectContainer({\n            label: !!label,\n            multiple,\n            underlined,\n            className,\n          })}\n          theme={theme}\n          label={!!label}\n          error={error}\n          dense={dense}\n          inline={inline}\n          active={active}\n          stretch={stretch}\n          readOnly={readOnly}\n          disabled={disabled}\n          leftAddon={leftAddon}\n          leftAddonProps={leftAddonProps}\n          rightAddon={rightAddon}\n          rightAddonProps={rightAddonProps}\n          underlineDirection={underlineDirection}\n          disableLeftAddonStyles={disableLeftAddonStyles}\n          disableRightAddonStyles={disableRightAddonStyles}\n        >\n          <select\n            {...remaining}\n            id={id}\n            ref={ref}\n            autoComplete={autoComplete}\n            name={name}\n            disabled={disabled}\n            style={selectStyle}\n            className={nativeSelect({\n              icon: !!icon,\n              className: selectClassName,\n            })}\n          >\n            {children}\n          </select>\n          {label && (\n            <Label\n              {...labelProps}\n              htmlFor={id}\n              style={labelProps?.style ?? labelStyle}\n              className={labelProps?.className ?? labelClassName}\n              floating\n              dense={dense}\n              error={error}\n              active={active}\n              disabled={disabled}\n            >\n              {label}\n            </Label>\n          )}\n        </TextFieldContainer>\n      </FormMessageContainer>\n    );\n  }\n);\n"],"names":["forwardRef","getIcon","useEnsuredId","FormMessageContainer","Label","TextFieldContainer","getFormConfig","nativeSelect","nativeSelectContainer","NativeSelect","props","ref","id","propId","style","className","icon","propIcon","label","labelProps","labelStyle","labelClassName","selectStyle","selectClassName","autoCompleteValue","autoComplete","name","dense","error","active","inline","stretch","leftAddon","rightAddon","propRightAddon","leftAddonProps","rightAddonProps","disableLeftAddonStyles","disableRightAddonStyles","theme","propTheme","underlineDirection","propUnderlineDirection","messageProps","messageContainerProps","containerProps","children","remaining","disabled","readOnly","multiple","underlined","select","htmlFor","floating"],"mappings":";AAAA,SACEA,UAAU,QAKL,QAAQ;AACf,SAASC,OAAO,QAAQ,wBAAwB;AAEhD,SAASC,YAAY,QAAQ,qBAAqB;AAClD,SAASC,oBAAoB,QAAQ,4BAA4B;AACjE,SAASC,KAAK,QAAQ,aAAa;AACnC,SAASC,kBAAkB,QAAQ,0BAA0B;AAC7D,SAASC,aAAa,QAAQ,kBAAkB;AAChD,SAASC,YAAY,EAAEC,qBAAqB,QAAQ,0BAA0B;AAiD9E;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA8CC,GACD,OAAO,MAAMC,6BAAeT,WAC1B,SAASS,aAAaC,KAAK,EAAEC,GAAG;IAC9B,MAAM,EACJC,IAAIC,MAAM,EACVC,KAAK,EACLC,SAAS,EACTC,MAAMC,QAAQ,EACdC,KAAK,EACLC,UAAU,EACVC,UAAU,EACVC,cAAc,EACdC,WAAW,EACXC,eAAe,EACfC,iBAAiB,EACjBC,eAAeD,iBAAiB,EAChCE,OAAOF,iBAAiB,EACxBG,QAAQ,KAAK,EACbC,QAAQ,KAAK,EACbC,SAAS,KAAK,EACdC,SAAS,KAAK,EACdC,UAAU,KAAK,EACfC,SAAS,EACTC,YAAYC,cAAc,EAC1BC,cAAc,EACdC,eAAe,EACfC,yBAAyB,KAAK,EAC9BC,0BAA0B,KAAK,EAC/BC,OAAOC,SAAS,EAChBC,oBAAoBC,sBAAsB,EAC1CC,YAAY,EACZC,qBAAqB,EACrBC,cAAc,EACdC,QAAQ,EACR,GAAGC,WACJ,GAAGrC;IACJ,MAAM,EAAEsC,WAAW,KAAK,EAAEC,WAAW,KAAK,EAAEC,WAAW,KAAK,EAAE,GAAGxC;IACjE,MAAME,KAAKV,aAAaW,QAAQ;IAChC,MAAM0B,QAAQjC,cAAc,SAASkC;IACrC,MAAMC,qBAAqBnC,cACzB,sBACAoC;IAEF,MAAM1B,OAAOf,QAAQ,YAAYgB;IACjC,MAAMkC,aAAaZ,UAAU,eAAeA,UAAU;IAEtD,IAAIN,aAAaC;IACjB,IAAI,OAAOA,mBAAmB,eAAe,CAACgB,UAAU;QACtDjB,aAAajB;IACf;IAEA,qBACE,KAACb;QACE,GAAGyC,qBAAqB;QACzBD,cAAcA;kBAEd,cAAA,MAACtC;YACE,GAAGwC,cAAc;YAClB/B,OAAOA;YACPC,WAAWP,sBAAsB;gBAC/BU,OAAO,CAAC,CAACA;gBACTgC;gBACAC;gBACApC;YACF;YACAwB,OAAOA;YACPrB,OAAO,CAAC,CAACA;YACTU,OAAOA;YACPD,OAAOA;YACPG,QAAQA;YACRD,QAAQA;YACRE,SAASA;YACTkB,UAAUA;YACVD,UAAUA;YACVhB,WAAWA;YACXG,gBAAgBA;YAChBF,YAAYA;YACZG,iBAAiBA;YACjBK,oBAAoBA;YACpBJ,wBAAwBA;YACxBC,yBAAyBA;;8BAEzB,KAACc;oBACE,GAAGL,SAAS;oBACbnC,IAAIA;oBACJD,KAAKA;oBACLc,cAAcA;oBACdC,MAAMA;oBACNsB,UAAUA;oBACVlC,OAAOQ;oBACPP,WAAWR,aAAa;wBACtBS,MAAM,CAAC,CAACA;wBACRD,WAAWQ;oBACb;8BAECuB;;gBAEF5B,uBACC,KAACd;oBACE,GAAGe,UAAU;oBACdkC,SAASzC;oBACTE,OAAOK,YAAYL,SAASM;oBAC5BL,WAAWI,YAAYJ,aAAaM;oBACpCiC,QAAQ;oBACR3B,OAAOA;oBACPC,OAAOA;oBACPC,QAAQA;oBACRmB,UAAUA;8BAET9B;;;;;AAMb,GACA"}

package/dist/src/form/OptGroup.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/form/OptGroup.tsx"],"sourcesContent":["\"use client\";\nimport { forwardRef, type ReactNode } from \"react\";\nimport { type ListElement, type ListProps } from \"../list/List.js\";\nimport {\n  ListSubheader,\n  type ListSubheaderProps,\n} from \"../list/ListSubheader.js\";\nimport { MenuItemGroup } from \"../menu/MenuItemGroup.js\";\nimport { type PropsWithRef } from \"../types.js\";\nimport { useEnsuredId } from \"../useEnsuredId.js\";\n\n/** @remarks \\@since 6.0.0 */\nexport interface OptGroupProps extends Omit<ListProps, \"role\"> {\n  /**\n   * This is really the `children` to display in a `ListSubheader` that\n   * describes the optgroup. It was named `label` to match the native\n   * `<optgroup>` element.\n   *\n   * @see {@link labelProps} for additional styling and options.\n   */\n  label: ReactNode;\n\n  /**\n   * This can be used to apply any additional props to the `ListSubheader` that\n   * describes the group of options.\n   */\n  labelProps?: PropsWithRef<\n    Omit<ListSubheaderProps, \"role\" | \"children\">,\n    HTMLLIElement\n  >;\n\n  /**\n   * This should be any `Option`s to display within the group.\n   */\n  children: ReactNode;\n}\n\n/**\n * **Client Component**\n *\n * This component is more of a \"convenience component\" to help enforce the\n * correct accessibility when creating an `<optgroup>` with the `Select`\n * component.\n *\n * @example\n * Simple Example\n * ```tsx\n * import { Select, OptGroup, Option } from \"@react-md/core\";\n * import FavoriteIcon from \"@react-md/material-icons/FavoriteIcon\";\n * import type { ReactElement } from \"react\";\n *\n * function Example(): ReactElement {\n *   return (\n *     <Select label=\"Choose an animal\">\n *       <OptGroup label=\"Land\" labelProps={{ className: \"custom-class-name\" }}>\n *         <Option value={0}>Cat</Option>\n *         <Option value={1}>Dog</Option>\n *         <Option value={2}>Tiger</Option>\n *       </OptGroup>\n *       <OptGroup label=\"Water\" labelProps={{ rightAddon: <FavoriteIcon /> }}>\n *         <Option value={3}>Dolphin</Option>\n *         <Option value={4}>Flounder</Option>\n *       </OptGroup>\n *     </Select>\n *\n *   );\n * }\n * ```\n *\n * @remarks \\@since 6.0.0\n */\nexport const OptGroup = forwardRef<ListElement, OptGroupProps>(\n  function OptGroup(props, ref) {\n    const { children, label, labelProps, ...remaining } = props;\n    const labelId = useEnsuredId(labelProps?.id, \"optgroup\");\n\n    return (\n      <MenuItemGroup aria-labelledby={labelId} {...remaining} ref={ref}>\n        <ListSubheader {...labelProps} id={labelId}>\n          {label}\n        </ListSubheader>\n        {children}\n      </MenuItemGroup>\n    );\n  }\n);\n"],"names":["forwardRef","ListSubheader","MenuItemGroup","useEnsuredId","OptGroup","props","ref","children","label","labelProps","remaining","labelId","id","aria-labelledby"],"mappings":"AAAA;;AACA,SAASA,UAAU,QAAwB,QAAQ;AAEnD,SACEC,aAAa,QAER,2BAA2B;AAClC,SAASC,aAAa,QAAQ,2BAA2B;AAEzD,SAASC,YAAY,QAAQ,qBAAqB;AA4BlD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAiCC,GACD,OAAO,MAAMC,yBAAWJ,WACtB,SAASI,SAASC,KAAK,EAAEC,GAAG;IAC1B,MAAM,EAAEC,QAAQ,EAAEC,KAAK,EAAEC,UAAU,EAAE,GAAGC,WAAW,GAAGL;IACtD,MAAMM,UAAUR,aAAaM,YAAYG,IAAI;IAE7C,qBACE,MAACV;QAAcW,mBAAiBF;QAAU,GAAGD,SAAS;QAAEJ,KAAKA;;0BAC3D,KAACL;gBAAe,GAAGQ,UAAU;gBAAEG,IAAID;0BAChCH;;YAEFD;;;AAGP,GACA"}