@react-md/core 6.5.1 → 7.0.0

package/dist/focus/useFocusContainer.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/focus/useFocusContainer.ts"],"sourcesContent":["\"use client\";\n\nimport {\n  type KeyboardEventHandler,\n  type Ref,\n  type RefObject,\n  useEffect,\n  useRef,\n} from \"react\";\n\nimport { getTransitionCallbacks } from \"../transition/getTransitionCallbacks.js\";\nimport { type TransitionCallbacks } from \"../transition/types.js\";\nimport { useEnsuredRef } from \"../useEnsuredRef.js\";\nimport {\n  type FocusElementWithinType,\n  focusElementWithin,\n  getFocusableElements,\n} 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 * @since 6.0.0\n */\nexport type FocusType = \"mount\" | \"unmount\" | \"keyboard\";\n\n/**\n * @since 6.0.0\n * @deprecated Use `TransitionCallbacks` instead.\n */\nexport type FocusContainerTransitionCallbacks = TransitionCallbacks;\n\n/**\n * @since 6.0.0\n * @since 6.3.2 Fixed by extending `TransitionCallbacks` after the\n * `onEnteredOnce` and `onExitedOnce` support was added to CSS transitions.\n */\nexport interface FocusContainerTransitionOptions<\n  E extends HTMLElement,\n> extends TransitionCallbacks {\n  /**\n   * An optional ref that will be merged with the\n   * {@link FocusContainerImplementation.nodeRef}\n   */\n  nodeRef?: Ref<E>;\n}\n\n/** @since 6.0.0 */\nexport interface FocusContainerEventHandlers<E extends HTMLElement> {\n  onKeyDown?: KeyboardEventHandler<E>;\n}\n\n/**\n * @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/** @since 6.0.0 */\nexport interface FocusContainerOptions<E extends HTMLElement>\n  extends FocusContainerTransitionOptions<E>, 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/** @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 Main Usage\n * ```tsx\n * import { Button } from \"@react-md/core/button/Button\"\n * import { useFocusContainer } from \"@react-md/core/focus/useFocusContainer\"\n * import { useScaleTransition } from \"@react-md/core/transition/useScaleTransition\"\n * import { useToggle } from \"@react-md/core/useToggle\"\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 * @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    onEnter,\n    onEntering,\n    onEntered,\n    onExit,\n    onExiting,\n    onExited,\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  return {\n    nodeRef: ref,\n    transitionOptions: {\n      nodeRef: refCallback,\n      ...getTransitionCallbacks({\n        onEnter,\n        onEnterOnce: () => {\n          const instance = ref.current;\n          if (\n            instance &&\n            !isFocusTypeDisabled(\"mount\") &&\n            (!document.activeElement ||\n              !instance.contains(document.activeElement))\n          ) {\n            instance.focus();\n          }\n        },\n        onEntering,\n        onEntered,\n        onExitOnce: () => {\n          if (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          globalThis.requestAnimationFrame(() => {\n            prevFocus.current?.focus();\n          });\n        },\n        onExit,\n        onExiting,\n        onExited,\n        disableTransition,\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","getTransitionCallbacks","useEnsuredRef","focusElementWithin","getFocusableElements","noop","useFocusContainer","options","nodeRef","activate","onEnter","onEntering","onEntered","onExit","onExiting","onExited","onKeyDown","programmatic","disableTransition","isFocusTypeDisabled","ref","refCallback","prevFocus","document","activeElement","HTMLElement","current","transitionOptions","onEnterOnce","instance","contains","focus","onExitOnce","globalThis","requestAnimationFrame","eventHandlers","event","isPropagationStopped","key","target","shiftKey","currentTarget","elements","count","length","preventDefault","type","container"],"mappings":"AAAA;AAEA,SAIEA,SAAS,EACTC,MAAM,QACD,QAAQ;AAEf,SAASC,sBAAsB,QAAQ,0CAA0C;AAEjF,SAASC,aAAa,QAAQ,sBAAsB;AACpD,SAEEC,kBAAkB,EAClBC,oBAAoB,QACf,aAAa;AAEpB,MAAMC,OAAO;AACX,aAAa;AACf;AA0FA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA2CC,GACD,OAAO,SAASC,kBACdC,OAAiC;IAEjC,MAAM,EACJC,OAAO,EACPC,QAAQ,EACRC,OAAO,EACPC,UAAU,EACVC,SAAS,EACTC,MAAM,EACNC,SAAS,EACTC,QAAQ,EACRC,YAAYX,IAAI,EAChBY,eAAe,KAAK,EACpBC,oBAAoB,KAAK,EACzBC,sBAAsBd,IAAI,EAC3B,GAAGE;IAEJ,MAAM,CAACa,KAAKC,YAAY,GAAGnB,cAAcM;IACzC,MAAMc,YAAYtB,OAA2B;IAE7CD,UAAU;QACR,IAAI,CAACU,YAAY,CAAEc,CAAAA,SAASC,aAAa,YAAYC,WAAU,GAAI;YACjE;QACF;QAEAH,UAAUI,OAAO,GAAGH,SAASC,aAAa;IAC5C,GAAG;QAACf;KAAS;IAEb,OAAO;QACLD,SAASY;QACTO,mBAAmB;YACjBnB,SAASa;YACT,GAAGpB,uBAAuB;gBACxBS;gBACAkB,aAAa;oBACX,MAAMC,WAAWT,IAAIM,OAAO;oBAC5B,IACEG,YACA,CAACV,oBAAoB,YACpB,CAAA,CAACI,SAASC,aAAa,IACtB,CAACK,SAASC,QAAQ,CAACP,SAASC,aAAa,CAAA,GAC3C;wBACAK,SAASE,KAAK;oBAChB;gBACF;gBACApB;gBACAC;gBACAoB,YAAY;oBACV,IAAIb,oBAAoB,YAAY;wBAClC;oBACF;oBAEA,2EAA2E;oBAC3E,iCAAiC;oBACjCc,WAAWC,qBAAqB,CAAC;wBAC/BZ,UAAUI,OAAO,EAAEK;oBACrB;gBACF;gBACAlB;gBACAC;gBACAC;gBACAG;YACF,EAAE;QACJ;QACAiB,eAAe;YACbnB,WAAUoB,KAAK;gBACbpB,UAAUoB;gBACV,IACEA,MAAMC,oBAAoB,MAC1BD,MAAME,GAAG,KAAK,SACdnB,oBAAoB,aACpB;oBACA;gBACF;gBAEA,MAAM,EAAEoB,MAAM,EAAEC,QAAQ,EAAEC,aAAa,EAAE,GAAGL;gBAC5C,MAAMM,WAAWtC,qBAAqBqC,eAAexB;gBACrD,MAAM0B,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;oBACpB1C,mBAAmB;wBACjB2C;wBACAJ;wBACAK,WAAWN;oBACb;gBACF;YACF;QACF;IACF;AACF"}
+{"version":3,"sources":["../../src/focus/useFocusContainer.ts"],"sourcesContent":["\"use client\";\n\nimport {\n  type KeyboardEventHandler,\n  type Ref,\n  type RefObject,\n  useEffect,\n  useRef,\n} from \"react\";\n\nimport { getTransitionCallbacks } from \"../transition/getTransitionCallbacks.js\";\nimport { type TransitionCallbacks } from \"../transition/types.js\";\nimport { useEnsuredRef } from \"../useEnsuredRef.js\";\nimport {\n  type FocusElementWithinType,\n  focusElementWithin,\n  getFocusableElements,\n} 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 * @since 6.0.0\n */\nexport type FocusType = \"mount\" | \"unmount\" | \"keyboard\";\n\n/**\n * @since 6.0.0\n * @deprecated Use `TransitionCallbacks` instead.\n */\nexport type FocusContainerTransitionCallbacks = TransitionCallbacks;\n\n/**\n * @since 6.0.0\n * @since 6.3.2 Fixed by extending `TransitionCallbacks` after the\n * `onEnteredOnce` and `onExitedOnce` support was added to CSS transitions.\n */\nexport interface FocusContainerTransitionOptions<\n  E extends HTMLElement,\n> extends TransitionCallbacks {\n  /**\n   * An optional ref that will be merged with the\n   * {@link FocusContainerImplementation.nodeRef}\n   */\n  nodeRef?: Ref<E>;\n}\n\n/** @since 6.0.0 */\nexport interface FocusContainerEventHandlers<E extends HTMLElement> {\n  onKeyDown?: KeyboardEventHandler<E>;\n}\n\n/**\n * @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/** @since 6.0.0 */\nexport interface FocusContainerOptions<E extends HTMLElement>\n  extends FocusContainerTransitionOptions<E>, 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/** @since 6.0.0 */\nexport interface FocusContainerImplementation<E extends HTMLElement> {\n  nodeRef: RefObject<E | null>;\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 Main Usage\n * ```tsx\n * import { Button } from \"@react-md/core/button/Button\"\n * import { useFocusContainer } from \"@react-md/core/focus/useFocusContainer\"\n * import { useScaleTransition } from \"@react-md/core/transition/useScaleTransition\"\n * import { useToggle } from \"@react-md/core/useToggle\"\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 * @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    onEnter,\n    onEntering,\n    onEntered,\n    onExit,\n    onExiting,\n    onExited,\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  return {\n    nodeRef: ref,\n    transitionOptions: {\n      nodeRef: refCallback,\n      ...getTransitionCallbacks({\n        onEnter,\n        onEnterOnce: () => {\n          const instance = ref.current;\n          if (\n            instance &&\n            !isFocusTypeDisabled(\"mount\") &&\n            (!document.activeElement ||\n              !instance.contains(document.activeElement))\n          ) {\n            instance.focus();\n          }\n        },\n        onEntering,\n        onEntered,\n        onExitOnce: () => {\n          if (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          globalThis.requestAnimationFrame(() => {\n            prevFocus.current?.focus();\n          });\n        },\n        onExit,\n        onExiting,\n        onExited,\n        disableTransition,\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","getTransitionCallbacks","useEnsuredRef","focusElementWithin","getFocusableElements","noop","useFocusContainer","options","nodeRef","activate","onEnter","onEntering","onEntered","onExit","onExiting","onExited","onKeyDown","programmatic","disableTransition","isFocusTypeDisabled","ref","refCallback","prevFocus","document","activeElement","HTMLElement","current","transitionOptions","onEnterOnce","instance","contains","focus","onExitOnce","globalThis","requestAnimationFrame","eventHandlers","event","isPropagationStopped","key","target","shiftKey","currentTarget","elements","count","length","preventDefault","type","container"],"mappings":"AAAA;AAEA,SAIEA,SAAS,EACTC,MAAM,QACD,QAAQ;AAEf,SAASC,sBAAsB,QAAQ,0CAA0C;AAEjF,SAASC,aAAa,QAAQ,sBAAsB;AACpD,SAEEC,kBAAkB,EAClBC,oBAAoB,QACf,aAAa;AAEpB,MAAMC,OAAO;AACX,aAAa;AACf;AA0FA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA2CC,GACD,OAAO,SAASC,kBACdC,OAAiC;IAEjC,MAAM,EACJC,OAAO,EACPC,QAAQ,EACRC,OAAO,EACPC,UAAU,EACVC,SAAS,EACTC,MAAM,EACNC,SAAS,EACTC,QAAQ,EACRC,YAAYX,IAAI,EAChBY,eAAe,KAAK,EACpBC,oBAAoB,KAAK,EACzBC,sBAAsBd,IAAI,EAC3B,GAAGE;IAEJ,MAAM,CAACa,KAAKC,YAAY,GAAGnB,cAAcM;IACzC,MAAMc,YAAYtB,OAA2B;IAE7CD,UAAU;QACR,IAAI,CAACU,YAAY,CAAEc,CAAAA,SAASC,aAAa,YAAYC,WAAU,GAAI;YACjE;QACF;QAEAH,UAAUI,OAAO,GAAGH,SAASC,aAAa;IAC5C,GAAG;QAACf;KAAS;IAEb,OAAO;QACLD,SAASY;QACTO,mBAAmB;YACjBnB,SAASa;YACT,GAAGpB,uBAAuB;gBACxBS;gBACAkB,aAAa;oBACX,MAAMC,WAAWT,IAAIM,OAAO;oBAC5B,IACEG,YACA,CAACV,oBAAoB,YACpB,CAAA,CAACI,SAASC,aAAa,IACtB,CAACK,SAASC,QAAQ,CAACP,SAASC,aAAa,CAAA,GAC3C;wBACAK,SAASE,KAAK;oBAChB;gBACF;gBACApB;gBACAC;gBACAoB,YAAY;oBACV,IAAIb,oBAAoB,YAAY;wBAClC;oBACF;oBAEA,2EAA2E;oBAC3E,iCAAiC;oBACjCc,WAAWC,qBAAqB,CAAC;wBAC/BZ,UAAUI,OAAO,EAAEK;oBACrB;gBACF;gBACAlB;gBACAC;gBACAC;gBACAG;YACF,EAAE;QACJ;QACAiB,eAAe;YACbnB,WAAUoB,KAAK;gBACbpB,UAAUoB;gBACV,IACEA,MAAMC,oBAAoB,MAC1BD,MAAME,GAAG,KAAK,SACdnB,oBAAoB,aACpB;oBACA;gBACF;gBAEA,MAAM,EAAEoB,MAAM,EAAEC,QAAQ,EAAEC,aAAa,EAAE,GAAGL;gBAC5C,MAAMM,WAAWtC,qBAAqBqC,eAAexB;gBACrD,MAAM0B,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;oBACpB1C,mBAAmB;wBACjB2C;wBACAJ;wBACAK,WAAWN;oBACb;gBACF;YACF;QACF;IACF;AACF"}

package/dist/form/Checkbox.d.ts

@@ -1,3 +1,4 @@
+import { type ReactElement } from "react";
 import { type CheckboxProps } from "./InputToggle.js";
 /**
  * **Client Component**
@@ -17,4 +18,4 @@ import { type CheckboxProps } from "./InputToggle.js";
  *
  * @see {@link https://react-md.dev/components/checkbox | Checkbox Demos}
  */
-export declare const Checkbox: import("react").ForwardRefExoticComponent<CheckboxProps & import("react").RefAttributes<HTMLInputElement>>;
+export declare function Checkbox(props: CheckboxProps): ReactElement;

package/dist/form/Checkbox.js

@@ -1,5 +1,4 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { forwardRef } from "react";
 import { InputToggle } from "./InputToggle.js";
 /**
  * **Client Component**
@@ -18,12 +17,13 @@ import { InputToggle } from "./InputToggle.js";
  * ```
  *
  * @see {@link https://react-md.dev/components/checkbox | Checkbox Demos}
- */ export const Checkbox = /*#__PURE__*/ forwardRef(function Checkbox(props, ref) {
+ */ export function Checkbox(props) {
+    const { ref, ...remaining } = props;
     return /*#__PURE__*/ _jsx(InputToggle, {
-        ...props,
+        ...remaining,
         ref: ref,
         type: "checkbox"
     });
-});
+}
 
 //# sourceMappingURL=Checkbox.js.map

package/dist/form/Checkbox.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/form/Checkbox.tsx"],"sourcesContent":["import { forwardRef } from \"react\";\n\nimport { type CheckboxProps, InputToggle } 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 Simple Example\n * ```tsx\n * import type { ReactElement } from \"react\";\n * import { Checkbox } from \"@react-md/core/form/Checkbox\";\n *\n * function Example(): ReactElement {\n *   return <Checkbox label=\"Checkbox\" value=\"a\" />;\n * }\n * ```\n *\n * @see {@link https://react-md.dev/components/checkbox | Checkbox Demos}\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;AAEnC,SAA6BC,WAAW,QAAQ,mBAAmB;AAEnE;;;;;;;;;;;;;;;;;CAiBC,GACD,OAAO,MAAMC,yBAAWF,WACtB,SAASE,SAASC,KAAK,EAAEC,GAAG;IAC1B,qBAAO,KAACH;QAAa,GAAGE,KAAK;QAAEC,KAAKA;QAAKC,MAAK;;AAChD,GACA"}
+{"version":3,"sources":["../../src/form/Checkbox.tsx"],"sourcesContent":["import { type ReactElement } from \"react\";\n\nimport { type CheckboxProps, InputToggle } 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 Simple Example\n * ```tsx\n * import type { ReactElement } from \"react\";\n * import { Checkbox } from \"@react-md/core/form/Checkbox\";\n *\n * function Example(): ReactElement {\n *   return <Checkbox label=\"Checkbox\" value=\"a\" />;\n * }\n * ```\n *\n * @see {@link https://react-md.dev/components/checkbox | Checkbox Demos}\n */\nexport function Checkbox(props: CheckboxProps): ReactElement {\n  const { ref, ...remaining } = props;\n\n  return <InputToggle {...remaining} ref={ref} type=\"checkbox\" />;\n}\n"],"names":["InputToggle","Checkbox","props","ref","remaining","type"],"mappings":";AAEA,SAA6BA,WAAW,QAAQ,mBAAmB;AAEnE;;;;;;;;;;;;;;;;;CAiBC,GACD,OAAO,SAASC,SAASC,KAAoB;IAC3C,MAAM,EAAEC,GAAG,EAAE,GAAGC,WAAW,GAAGF;IAE9B,qBAAO,KAACF;QAAa,GAAGI,SAAS;QAAED,KAAKA;QAAKE,MAAK;;AACpD"}

package/dist/form/Fieldset.d.ts

@@ -1,4 +1,4 @@
-import { type FieldsetHTMLAttributes } from "react";
+import { type FieldsetHTMLAttributes, type ReactElement, type Ref } from "react";
 import { type FieldsetClassNameOptions } from "./fieldsetStyles.js";
 /**
  * @since 6.0.0 Removed the `legend`, `legendStyle`,
@@ -6,6 +6,7 @@ import { type FieldsetClassNameOptions } from "./fieldsetStyles.js";
  * yourself manually instead of using a prop.
  */
 export interface FieldsetProps extends FieldsetHTMLAttributes<HTMLFieldSetElement>, FieldsetClassNameOptions {
+    ref?: Ref<HTMLFieldSetElement>;
 }
 /**
  * @example Simple Example
@@ -47,4 +48,4 @@ export interface FieldsetProps extends FieldsetHTMLAttributes<HTMLFieldSetElemen
  *
  * @see {@link https://react-md.dev/components/fieldset | Fieldset Demos}
  */
-export declare const Fieldset: import("react").ForwardRefExoticComponent<FieldsetProps & import("react").RefAttributes<HTMLFieldSetElement>>;
+export declare function Fieldset(props: FieldsetProps): ReactElement;

package/dist/form/Fieldset.js

@@ -1,5 +1,4 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { forwardRef } from "react";
 import { fieldset } from "./fieldsetStyles.js";
 /**
  * @example Simple Example
@@ -40,8 +39,8 @@ import { fieldset } from "./fieldsetStyles.js";
  * ```
  *
  * @see {@link https://react-md.dev/components/fieldset | Fieldset Demos}
- */ export const Fieldset = /*#__PURE__*/ forwardRef(function Fieldset(props, ref) {
-    const { className, fullWidth, browserStyles, floatingLegend, children, ...remaining } = props;
+ */ export function Fieldset(props) {
+    const { ref, className, fullWidth, browserStyles, floatingLegend, children, ...remaining } = props;
     return /*#__PURE__*/ _jsx("fieldset", {
         ...remaining,
         ref: ref,
@@ -53,6 +52,6 @@ import { fieldset } from "./fieldsetStyles.js";
         }),
         children: children
     });
-});
+}
 
 //# sourceMappingURL=Fieldset.js.map

package/dist/form/Fieldset.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/form/Fieldset.tsx"],"sourcesContent":["import { type FieldsetHTMLAttributes, forwardRef } from \"react\";\n\nimport { type FieldsetClassNameOptions, fieldset } from \"./fieldsetStyles.js\";\n\n/**\n * @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\n    FieldsetHTMLAttributes<HTMLFieldSetElement>,\n    FieldsetClassNameOptions {}\n\n/**\n * @example Simple Example\n * ```tsx\n * import { Form } from \"@react-md/core/form/Form\";\n * import { Fieldset } from \"@react-md/core/form/Fieldset\";\n * import { Legend } from \"@react-md/core/form/Legend\";\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 *\n * @example Floating Legend Example\n * ```tsx\n * import { Form } from \"@react-md/core/form/Form\";\n * import { Fieldset } from \"@react-md/core/form/Fieldset\";\n * import { Legend } from \"@react-md/core/form/Legend\";\n *\n * function Example(): ReactElement {\n *   return (\n *     <Form>\n *       <Fieldset floatingLegend>\n *         <Legend floating>Some Title</Legend>\n *         // form components\n *       </Fieldset>\n *     </Form>\n *   );\n * }\n * ```\n * ```\n *\n * @see {@link https://react-md.dev/components/fieldset | Fieldset Demos}\n */\nexport const Fieldset = forwardRef<HTMLFieldSetElement, FieldsetProps>(\n  function Fieldset(props, ref) {\n    const {\n      className,\n      fullWidth,\n      browserStyles,\n      floatingLegend,\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          floatingLegend,\n        })}\n      >\n        {children}\n      </fieldset>\n    );\n  }\n);\n"],"names":["forwardRef","fieldset","Fieldset","props","ref","className","fullWidth","browserStyles","floatingLegend","children","remaining"],"mappings":";AAAA,SAAsCA,UAAU,QAAQ,QAAQ;AAEhE,SAAwCC,QAAQ,QAAQ,sBAAsB;AAY9E;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAuCC,GACD,OAAO,MAAMC,yBAAWF,WACtB,SAASE,SAASC,KAAK,EAAEC,GAAG;IAC1B,MAAM,EACJC,SAAS,EACTC,SAAS,EACTC,aAAa,EACbC,cAAc,EACdC,QAAQ,EACR,GAAGC,WACJ,GAAGP;IAEJ,qBACE,KAACF;QACE,GAAGS,SAAS;QACbN,KAAKA;QACLC,WAAWJ,SAAS;YAClBI;YACAC;YACAC;YACAC;QACF;kBAECC;;AAGP,GACA"}
+{"version":3,"sources":["../../src/form/Fieldset.tsx"],"sourcesContent":["import {\n  type FieldsetHTMLAttributes,\n  type ReactElement,\n  type Ref,\n} from \"react\";\n\nimport { type FieldsetClassNameOptions, fieldset } from \"./fieldsetStyles.js\";\n\n/**\n * @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\n    FieldsetHTMLAttributes<HTMLFieldSetElement>,\n    FieldsetClassNameOptions {\n  ref?: Ref<HTMLFieldSetElement>;\n}\n\n/**\n * @example Simple Example\n * ```tsx\n * import { Form } from \"@react-md/core/form/Form\";\n * import { Fieldset } from \"@react-md/core/form/Fieldset\";\n * import { Legend } from \"@react-md/core/form/Legend\";\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 *\n * @example Floating Legend Example\n * ```tsx\n * import { Form } from \"@react-md/core/form/Form\";\n * import { Fieldset } from \"@react-md/core/form/Fieldset\";\n * import { Legend } from \"@react-md/core/form/Legend\";\n *\n * function Example(): ReactElement {\n *   return (\n *     <Form>\n *       <Fieldset floatingLegend>\n *         <Legend floating>Some Title</Legend>\n *         // form components\n *       </Fieldset>\n *     </Form>\n *   );\n * }\n * ```\n * ```\n *\n * @see {@link https://react-md.dev/components/fieldset | Fieldset Demos}\n */\nexport function Fieldset(props: FieldsetProps): ReactElement {\n  const {\n    ref,\n    className,\n    fullWidth,\n    browserStyles,\n    floatingLegend,\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        floatingLegend,\n      })}\n    >\n      {children}\n    </fieldset>\n  );\n}\n"],"names":["fieldset","Fieldset","props","ref","className","fullWidth","browserStyles","floatingLegend","children","remaining"],"mappings":";AAMA,SAAwCA,QAAQ,QAAQ,sBAAsB;AAc9E;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAuCC,GACD,OAAO,SAASC,SAASC,KAAoB;IAC3C,MAAM,EACJC,GAAG,EACHC,SAAS,EACTC,SAAS,EACTC,aAAa,EACbC,cAAc,EACdC,QAAQ,EACR,GAAGC,WACJ,GAAGP;IAEJ,qBACE,KAACF;QACE,GAAGS,SAAS;QACbN,KAAKA;QACLC,WAAWJ,SAAS;YAClBI;YACAC;YACAC;YACAC;QACF;kBAECC;;AAGP"}

package/dist/form/Form.d.ts

@@ -1,5 +1,6 @@
-import { type FormHTMLAttributes } from "react";
+import { type FormHTMLAttributes, type ReactElement, type Ref } from "react";
 export interface FormProps extends FormHTMLAttributes<HTMLFormElement> {
+    ref?: Ref<HTMLFormElement>;
     /**
      * Boolean if the form should no longer prevent default submit behavior. If
      * you enable this prop you should honestly just use a `<form>` element
@@ -18,4 +19,4 @@ export interface FormProps extends FormHTMLAttributes<HTMLFormElement> {
  *
  * @see {@link https://react-md.dev/components/form | Form Demos}
  */
-export declare const Form: import("react").ForwardRefExoticComponent<FormProps & import("react").RefAttributes<HTMLFormElement>>;
+export declare function Form(props: FormProps): ReactElement;

package/dist/form/Form.js

@@ -1,6 +1,5 @@
 "use client";
 import { jsx as _jsx } from "react/jsx-runtime";
-import { forwardRef } from "react";
 const noop = ()=>{
 // do nothing
 };
@@ -12,8 +11,8 @@ const noop = ()=>{
  * behavior and prevent the default form submit behavior.
  *
  * @see {@link https://react-md.dev/components/form | Form Demos}
- */ export const Form = /*#__PURE__*/ forwardRef(function Form(props, ref) {
-    const { children, onSubmit = noop, disablePreventDefault = false, ...remaining } = props;
+ */ export function Form(props) {
+    const { ref, children, onSubmit = noop, disablePreventDefault = false, ...remaining } = props;
     return /*#__PURE__*/ _jsx("form", {
         ...remaining,
         onSubmit: (event)=>{
@@ -25,6 +24,6 @@ const noop = ()=>{
         ref: ref,
         children: children
     });
-});
+}
 
 //# sourceMappingURL=Form.js.map

package/dist/form/Form.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/form/Form.tsx"],"sourcesContent":["\"use client\";\n\nimport { type FormHTMLAttributes, forwardRef } 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 * **Client 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 *\n * @see {@link https://react-md.dev/components/form | Form Demos}\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;;AAEA,SAAkCA,UAAU,QAAQ,QAAQ;AAE5D,MAAMC,OAAO;AACX,aAAa;AACf;AAaA;;;;;;;;CAQC,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"}
+{"version":3,"sources":["../../src/form/Form.tsx"],"sourcesContent":["\"use client\";\n\nimport { type FormHTMLAttributes, type ReactElement, type Ref } from \"react\";\n\nconst noop = (): void => {\n  // do nothing\n};\n\nexport interface FormProps extends FormHTMLAttributes<HTMLFormElement> {\n  ref?: Ref<HTMLFormElement>;\n\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 * **Client 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 *\n * @see {@link https://react-md.dev/components/form | Form Demos}\n */\nexport function Form(props: FormProps): ReactElement {\n  const {\n    ref,\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"],"names":["noop","Form","props","ref","children","onSubmit","disablePreventDefault","remaining","form","event","preventDefault"],"mappings":"AAAA;;AAIA,MAAMA,OAAO;AACX,aAAa;AACf;AAeA;;;;;;;;CAQC,GACD,OAAO,SAASC,KAAKC,KAAgB;IACnC,MAAM,EACJC,GAAG,EACHC,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"}

package/dist/form/FormMessage.d.ts

@@ -1,4 +1,10 @@
-import { type FormMessageInputLengthCounterProps, type FormMessageProps } from "./types.js";
+import { type ReactElement } from "react";
+import { type ConfigurableFormMessageProps, type FormMessageInputLengthCounterProps } from "./types.js";
+/**
+ * @since 7.0.0 This was defined inline
+ */
+export interface FormMessageProps extends ConfigurableFormMessageProps, Partial<FormMessageInputLengthCounterProps> {
+}
 /**
  * The `FormMessage` component is used to create additional helper messages or
  * error messages and generally placed below the related `TextField`. If a
@@ -10,4 +16,4 @@ import { type FormMessageInputLengthCounterProps, type FormMessageProps } from "
  *
  * @see {@link https://react-md.dev/components/form-message | FormMessage Demos}
  */
-export declare const FormMessage: import("react").ForwardRefExoticComponent<FormMessageProps & Partial<FormMessageInputLengthCounterProps> & import("react").RefAttributes<HTMLDivElement>>;
+export declare function FormMessage(props: FormMessageProps): ReactElement;

package/dist/form/FormMessage.js

@@ -1,5 +1,4 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { forwardRef } from "react";
 import { useEnsuredId } from "../useEnsuredId.js";
 import { FormMessageCounter } from "./FormMessageCounter.js";
 import { getFormConfig } from "./formConfig.js";
@@ -14,8 +13,8 @@ import { formMessage, formMessageText } from "./formMessageStyles.js";
  * setting the `role` prop to `"alert"`.
  *
  * @see {@link https://react-md.dev/components/form-message | FormMessage Demos}
- */ export const FormMessage = /*#__PURE__*/ forwardRef(function FormMessage(props, ref) {
-    const { id: propId, role, className, counterStyle, counterClassName, messageStyle, messageClassName, error = false, disableWrap = false, theme: propTheme, children, length, maxLength, counterProps, messageProps, ...remaining } = props;
+ */ export function FormMessage(props) {
+    const { ref, id: propId, role, className, counterStyle, counterClassName, messageStyle, messageClassName, error = false, disableWrap = false, theme: propTheme, children, length, maxLength, counterProps, messageProps, ...remaining } = props;
     const id = useEnsuredId(propId, "form-message");
     const theme = getFormConfig("theme", propTheme);
     let message = children;
@@ -52,6 +51,6 @@ import { formMessage, formMessageText } from "./formMessageStyles.js";
             })
         ]
     });
-});
+}
 
 //# sourceMappingURL=FormMessage.js.map

package/dist/form/FormMessage.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/form/FormMessage.tsx"],"sourcesContent":["import { forwardRef } from \"react\";\n\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 * 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 *\n * @see {@link https://react-md.dev/components/form-message | FormMessage Demos}\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    counterProps,\n    messageProps,\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        {...messageProps}\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          {...counterProps}\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","counterProps","messageProps","remaining","message","p","style","div","aria-live","undefined"],"mappings":";AAAA,SAASA,UAAU,QAAQ,QAAQ;AAEnC,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,EACTC,YAAY,EACZC,YAAY,EACZ,GAAGC,WACJ,GAAGnB;IACJ,MAAME,KAAKR,aAAaS,QAAQ;IAChC,MAAMS,QAAQhB,cAAc,SAASiB;IAErC,IAAIO,UAAUN;IACd,IAAI,CAACH,eAAeG,UAAU;QAC5BM,wBACE,KAACC;YACCnB,IAAI,GAAGA,GAAG,QAAQ,CAAC;YAClB,GAAGgB,YAAY;YAChBI,OAAOd;YACPH,WAAWP,gBAAgB;gBAAEO,WAAWI;YAAiB;sBAExDK;;IAGP;IAEA,qBACE,MAACS;QACE,GAAGJ,SAAS;QACbjB,IAAIA;QACJD,KAAKA;QACLuB,aAAWpB,SAAS,UAAU,WAAWqB;QACzCrB,MAAMA;QACNC,WAAWR,YAAY;YAAEa;YAAOE;YAAOP;QAAU;;YAEhDe;YACA,OAAOL,WAAW,YAAY,OAAOC,cAAc,0BAClD,KAACrB;gBACCO,IAAI,GAAGA,GAAG,QAAQ,CAAC;gBAClB,GAAGe,YAAY;gBAChBK,OAAOhB;gBACPD,WAAWE;0BAEV,GAAGQ,OAAO,GAAG,EAAEC,WAAW;;;;AAKrC,GAAG"}
+{"version":3,"sources":["../../src/form/FormMessage.tsx"],"sourcesContent":["import { type ReactElement } from \"react\";\n\nimport { useEnsuredId } from \"../useEnsuredId.js\";\nimport { FormMessageCounter } from \"./FormMessageCounter.js\";\nimport { getFormConfig } from \"./formConfig.js\";\nimport { formMessage, formMessageText } from \"./formMessageStyles.js\";\nimport {\n  type ConfigurableFormMessageProps,\n  type FormMessageInputLengthCounterProps,\n} from \"./types.js\";\n\n/**\n * @since 7.0.0 This was defined inline\n */\nexport interface FormMessageProps\n  extends\n    ConfigurableFormMessageProps,\n    Partial<FormMessageInputLengthCounterProps> {}\n\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 *\n * @see {@link https://react-md.dev/components/form-message | FormMessage Demos}\n */\nexport function FormMessage(props: FormMessageProps): ReactElement {\n  const {\n    ref,\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    counterProps,\n    messageProps,\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        {...messageProps}\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          {...counterProps}\n          style={counterStyle}\n          className={counterClassName}\n        >\n          {`${length} / ${maxLength}`}\n        </FormMessageCounter>\n      )}\n    </div>\n  );\n}\n"],"names":["useEnsuredId","FormMessageCounter","getFormConfig","formMessage","formMessageText","FormMessage","props","ref","id","propId","role","className","counterStyle","counterClassName","messageStyle","messageClassName","error","disableWrap","theme","propTheme","children","length","maxLength","counterProps","messageProps","remaining","message","p","style","div","aria-live","undefined"],"mappings":";AAEA,SAASA,YAAY,QAAQ,qBAAqB;AAClD,SAASC,kBAAkB,QAAQ,0BAA0B;AAC7D,SAASC,aAAa,QAAQ,kBAAkB;AAChD,SAASC,WAAW,EAAEC,eAAe,QAAQ,yBAAyB;AActE;;;;;;;;;;CAUC,GACD,OAAO,SAASC,YAAYC,KAAuB;IACjD,MAAM,EACJC,GAAG,EACHC,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,EACTC,YAAY,EACZC,YAAY,EACZ,GAAGC,WACJ,GAAGnB;IACJ,MAAME,KAAKR,aAAaS,QAAQ;IAChC,MAAMS,QAAQhB,cAAc,SAASiB;IAErC,IAAIO,UAAUN;IACd,IAAI,CAACH,eAAeG,UAAU;QAC5BM,wBACE,KAACC;YACCnB,IAAI,GAAGA,GAAG,QAAQ,CAAC;YAClB,GAAGgB,YAAY;YAChBI,OAAOd;YACPH,WAAWP,gBAAgB;gBAAEO,WAAWI;YAAiB;sBAExDK;;IAGP;IAEA,qBACE,MAACS;QACE,GAAGJ,SAAS;QACbjB,IAAIA;QACJD,KAAKA;QACLuB,aAAWpB,SAAS,UAAU,WAAWqB;QACzCrB,MAAMA;QACNC,WAAWR,YAAY;YAAEa;YAAOE;YAAOP;QAAU;;YAEhDe;YACA,OAAOL,WAAW,YAAY,OAAOC,cAAc,0BAClD,KAACrB;gBACCO,IAAI,GAAGA,GAAG,QAAQ,CAAC;gBAClB,GAAGe,YAAY;gBAChBK,OAAOhB;gBACPD,WAAWE;0BAEV,GAAGQ,OAAO,GAAG,EAAEC,WAAW;;;;AAKrC"}

package/dist/form/FormMessageContainer.d.ts

@@ -1,17 +1,18 @@
-import { type HTMLAttributes } from "react";
+import { type HTMLAttributes, type ReactElement, type Ref } from "react";
 import { type PropsWithRef } from "../types.js";
 import { type FormMessageContainerClassNameOptions } from "./formMessageContainerStyles.js";
-import { type FormMessageProps } from "./types.js";
+import { type ConfigurableFormMessageProps } from "./types.js";
 /**
  * @since 2.5.0
  */
 export interface FormMessageContainerProps extends HTMLAttributes<HTMLDivElement>, FormMessageContainerClassNameOptions {
+    ref?: Ref<HTMLDivElement>;
     /**
      * If the extension doesn't actually want to render the `FormMessage`
      * component, these props are optional. It kind of eliminates the whole
      * purpose of this component though.
      */
-    messageProps?: PropsWithRef<FormMessageProps>;
+    messageProps?: PropsWithRef<ConfigurableFormMessageProps>;
 }
 /**
  * Conditionally wraps the `children` in a `.rmd-form-message-container` wrapper
@@ -20,4 +21,4 @@ export interface FormMessageContainerProps extends HTMLAttributes<HTMLDivElement
  * @see {@link https://react-md.dev/components/form-message | FormMessage Demos}
  * @since 2.5.0
  */
-export declare const FormMessageContainer: import("react").ForwardRefExoticComponent<FormMessageContainerProps & import("react").RefAttributes<HTMLDivElement>>;
+export declare function FormMessageContainer(props: FormMessageContainerProps): ReactElement;

package/dist/form/FormMessageContainer.js

@@ -1,5 +1,4 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { forwardRef } from "react";
 import { FormMessage } from "./FormMessage.js";
 import { formMessageContainer } from "./formMessageContainerStyles.js";
 /**
@@ -8,8 +7,8 @@ import { formMessageContainer } from "./formMessageContainerStyles.js";
  *
  * @see {@link https://react-md.dev/components/form-message | FormMessage Demos}
  * @since 2.5.0
- */ export const FormMessageContainer = /*#__PURE__*/ forwardRef(function FormMessageContainer(props, ref) {
-    const { className, children, inline, messageProps, ...remaining } = props;
+ */ export function FormMessageContainer(props) {
+    const { ref, className, children, inline, messageProps, ...remaining } = props;
     if (!messageProps) {
         return /*#__PURE__*/ _jsx(_Fragment, {
             children: children
@@ -29,6 +28,6 @@ import { formMessageContainer } from "./formMessageContainerStyles.js";
             })
         ]
     });
-});
+}
 
 //# sourceMappingURL=FormMessageContainer.js.map

package/dist/form/FormMessageContainer.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/form/FormMessageContainer.tsx"],"sourcesContent":["import { type HTMLAttributes, forwardRef } from \"react\";\n\nimport { type PropsWithRef } from \"../types.js\";\nimport { FormMessage } from \"./FormMessage.js\";\nimport {\n  type FormMessageContainerClassNameOptions,\n  formMessageContainer,\n} from \"./formMessageContainerStyles.js\";\nimport { type FormMessageProps } from \"./types.js\";\n\n/**\n * @since 2.5.0\n */\nexport interface FormMessageContainerProps\n  extends HTMLAttributes<HTMLDivElement>, FormMessageContainerClassNameOptions {\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>;\n}\n\n/**\n * Conditionally wraps the `children` in a `.rmd-form-message-container` wrapper\n * and renders the {@link FormMessage} component.\n *\n * @see {@link https://react-md.dev/components/form-message | FormMessage Demos}\n * @since 2.5.0\n */\nexport const FormMessageContainer = forwardRef<\n  HTMLDivElement,\n  FormMessageContainerProps\n>(function FormMessageContainer(props, ref) {\n  const { className, children, inline, messageProps, ...remaining } = props;\n  if (!messageProps) {\n    return <>{children}</>;\n  }\n\n  return (\n    <div\n      {...remaining}\n      ref={ref}\n      className={formMessageContainer({ className, inline })}\n    >\n      {children}\n      <FormMessage {...messageProps} />\n    </div>\n  );\n});\n"],"names":["forwardRef","FormMessage","formMessageContainer","FormMessageContainer","props","ref","className","children","inline","messageProps","remaining","div"],"mappings":";AAAA,SAA8BA,UAAU,QAAQ,QAAQ;AAGxD,SAASC,WAAW,QAAQ,mBAAmB;AAC/C,SAEEC,oBAAoB,QACf,kCAAkC;AAgBzC;;;;;;CAMC,GACD,OAAO,MAAMC,qCAAuBH,WAGlC,SAASG,qBAAqBC,KAAK,EAAEC,GAAG;IACxC,MAAM,EAAEC,SAAS,EAAEC,QAAQ,EAAEC,MAAM,EAAEC,YAAY,EAAE,GAAGC,WAAW,GAAGN;IACpE,IAAI,CAACK,cAAc;QACjB,qBAAO;sBAAGF;;IACZ;IAEA,qBACE,MAACI;QACE,GAAGD,SAAS;QACbL,KAAKA;QACLC,WAAWJ,qBAAqB;YAAEI;YAAWE;QAAO;;YAEnDD;0BACD,KAACN;gBAAa,GAAGQ,YAAY;;;;AAGnC,GAAG"}
+{"version":3,"sources":["../../src/form/FormMessageContainer.tsx"],"sourcesContent":["import { type HTMLAttributes, type ReactElement, type Ref } from \"react\";\n\nimport { type PropsWithRef } from \"../types.js\";\nimport { FormMessage } from \"./FormMessage.js\";\nimport {\n  type FormMessageContainerClassNameOptions,\n  formMessageContainer,\n} from \"./formMessageContainerStyles.js\";\nimport { type ConfigurableFormMessageProps } from \"./types.js\";\n\n/**\n * @since 2.5.0\n */\nexport interface FormMessageContainerProps\n  extends HTMLAttributes<HTMLDivElement>, FormMessageContainerClassNameOptions {\n  ref?: Ref<HTMLDivElement>;\n\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<ConfigurableFormMessageProps>;\n}\n\n/**\n * Conditionally wraps the `children` in a `.rmd-form-message-container` wrapper\n * and renders the {@link FormMessage} component.\n *\n * @see {@link https://react-md.dev/components/form-message | FormMessage Demos}\n * @since 2.5.0\n */\nexport function FormMessageContainer(\n  props: FormMessageContainerProps\n): ReactElement {\n  const { ref, className, children, inline, messageProps, ...remaining } =\n    props;\n\n  if (!messageProps) {\n    return <>{children}</>;\n  }\n\n  return (\n    <div\n      {...remaining}\n      ref={ref}\n      className={formMessageContainer({ className, inline })}\n    >\n      {children}\n      <FormMessage {...messageProps} />\n    </div>\n  );\n}\n"],"names":["FormMessage","formMessageContainer","FormMessageContainer","props","ref","className","children","inline","messageProps","remaining","div"],"mappings":";AAGA,SAASA,WAAW,QAAQ,mBAAmB;AAC/C,SAEEC,oBAAoB,QACf,kCAAkC;AAkBzC;;;;;;CAMC,GACD,OAAO,SAASC,qBACdC,KAAgC;IAEhC,MAAM,EAAEC,GAAG,EAAEC,SAAS,EAAEC,QAAQ,EAAEC,MAAM,EAAEC,YAAY,EAAE,GAAGC,WAAW,GACpEN;IAEF,IAAI,CAACK,cAAc;QACjB,qBAAO;sBAAGF;;IACZ;IAEA,qBACE,MAACI;QACE,GAAGD,SAAS;QACbL,KAAKA;QACLC,WAAWJ,qBAAqB;YAAEI;YAAWE;QAAO;;YAEnDD;0BACD,KAACN;gBAAa,GAAGQ,YAAY;;;;AAGnC"}

package/dist/form/FormMessageCounter.d.ts

@@ -1,6 +1,7 @@
-import { type HTMLAttributes, type ReactNode } from "react";
+import { type HTMLAttributes, type ReactElement, type ReactNode, type Ref } from "react";
 /** @since 2.9.0 */
 export interface FormMessageCounterProps extends HTMLAttributes<HTMLSpanElement> {
+    ref?: Ref<HTMLSpanElement>;
     /**
      * The children to display in the counter. This is normally a string like:
      *
@@ -41,4 +42,4 @@ export interface FormMessageCounterProps extends HTMLAttributes<HTMLSpanElement>
  * @since 2.9.0
  * @since 6.3.0 Supports refs.
  */
-export declare const FormMessageCounter: import("react").ForwardRefExoticComponent<FormMessageCounterProps & import("react").RefAttributes<HTMLSpanElement>>;
+export declare function FormMessageCounter(props: FormMessageCounterProps): ReactElement;

package/dist/form/FormMessageCounter.js

@@ -1,5 +1,4 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { forwardRef } from "react";
 import { formMessageCounter } from "./formMessageStyles.js";
 /**
  * This component can be used to create a "counter" within the
@@ -30,8 +29,8 @@ import { formMessageCounter } from "./formMessageStyles.js";
  * @see {@link https://react-md.dev/components/text-field | TextField Demos}
  * @since 2.9.0
  * @since 6.3.0 Supports refs.
- */ export const FormMessageCounter = /*#__PURE__*/ forwardRef(function FormMessageCounter(props, ref) {
-    const { children, className, ...remaining } = props;
+ */ export function FormMessageCounter(props) {
+    const { ref, children, className, ...remaining } = props;
     return /*#__PURE__*/ _jsx("span", {
         ref: ref,
         ...remaining,
@@ -40,6 +39,6 @@ import { formMessageCounter } from "./formMessageStyles.js";
         }),
         children: children
     });
-});
+}
 
 //# sourceMappingURL=FormMessageCounter.js.map

package/dist/form/FormMessageCounter.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/form/FormMessageCounter.tsx"],"sourcesContent":["import {\n  type HTMLAttributes,\n  type ReactElement,\n  type ReactNode,\n  forwardRef,\n} from \"react\";\n\nimport { formMessageCounter } from \"./formMessageStyles.js\";\n\n/** @since 2.9.0 */\nexport interface FormMessageCounterProps extends HTMLAttributes<HTMLSpanElement> {\n  /**\n   * The children to display in the counter. This is normally a string like:\n   *\n   * @example String Example\n   * ```ts\n   * `${min} / ${max}`\n   * ```\n   */\n  children: ReactNode;\n}\n\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 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 * @see {@link https://react-md.dev/components/form-message | FormMessage Demos}\n * @see {@link https://react-md.dev/components/text-field | TextField Demos}\n * @since 2.9.0\n * @since 6.3.0 Supports refs.\n */\nexport const FormMessageCounter = forwardRef<\n  HTMLSpanElement,\n  FormMessageCounterProps\n>(function FormMessageCounter(props, ref): ReactElement {\n  const { children, className, ...remaining } = props;\n\n  return (\n    <span\n      ref={ref}\n      {...remaining}\n      className={formMessageCounter({ className })}\n    >\n      {children}\n    </span>\n  );\n});\n"],"names":["forwardRef","formMessageCounter","FormMessageCounter","props","ref","children","className","remaining","span"],"mappings":";AAAA,SAIEA,UAAU,QACL,QAAQ;AAEf,SAASC,kBAAkB,QAAQ,yBAAyB;AAe5D;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA6BC,GACD,OAAO,MAAMC,mCAAqBF,WAGhC,SAASE,mBAAmBC,KAAK,EAAEC,GAAG;IACtC,MAAM,EAAEC,QAAQ,EAAEC,SAAS,EAAE,GAAGC,WAAW,GAAGJ;IAE9C,qBACE,KAACK;QACCJ,KAAKA;QACJ,GAAGG,SAAS;QACbD,WAAWL,mBAAmB;YAAEK;QAAU;kBAEzCD;;AAGP,GAAG"}
+{"version":3,"sources":["../../src/form/FormMessageCounter.tsx"],"sourcesContent":["import {\n  type HTMLAttributes,\n  type ReactElement,\n  type ReactNode,\n  type Ref,\n} from \"react\";\n\nimport { formMessageCounter } from \"./formMessageStyles.js\";\n\n/** @since 2.9.0 */\nexport interface FormMessageCounterProps extends HTMLAttributes<HTMLSpanElement> {\n  ref?: Ref<HTMLSpanElement>;\n\n  /**\n   * The children to display in the counter. This is normally a string like:\n   *\n   * @example String Example\n   * ```ts\n   * `${min} / ${max}`\n   * ```\n   */\n  children: ReactNode;\n}\n\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 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 * @see {@link https://react-md.dev/components/form-message | FormMessage Demos}\n * @see {@link https://react-md.dev/components/text-field | TextField Demos}\n * @since 2.9.0\n * @since 6.3.0 Supports refs.\n */\nexport function FormMessageCounter(\n  props: FormMessageCounterProps\n): ReactElement {\n  const { ref, children, className, ...remaining } = props;\n\n  return (\n    <span\n      ref={ref}\n      {...remaining}\n      className={formMessageCounter({ className })}\n    >\n      {children}\n    </span>\n  );\n}\n"],"names":["formMessageCounter","FormMessageCounter","props","ref","children","className","remaining","span"],"mappings":";AAOA,SAASA,kBAAkB,QAAQ,yBAAyB;AAiB5D;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA6BC,GACD,OAAO,SAASC,mBACdC,KAA8B;IAE9B,MAAM,EAAEC,GAAG,EAAEC,QAAQ,EAAEC,SAAS,EAAE,GAAGC,WAAW,GAAGJ;IAEnD,qBACE,KAACK;QACCJ,KAAKA;QACJ,GAAGG,SAAS;QACbD,WAAWL,mBAAmB;YAAEK;QAAU;kBAEzCD;;AAGP"}

package/dist/form/InputToggle.d.ts

@@ -1,4 +1,4 @@
-import { type CSSProperties, type HTMLAttributes, type InputHTMLAttributes, type LabelHTMLAttributes, type ReactNode } from "react";
+import { type CSSProperties, type HTMLAttributes, type InputHTMLAttributes, type LabelHTMLAttributes, type ReactElement, type ReactNode, type Ref } from "react";
 import { type ComponentWithRippleProps } from "../interaction/types.js";
 import { type PropsWithRef } from "../types.js";
 import { type InputToggleSize } from "./inputToggleStyles.js";
@@ -116,6 +116,7 @@ export interface InputToggleLabelProps {
  * @since 6.0.0
  */
 export interface BaseInputToggleProps extends Omit<InputHTMLAttributes<HTMLInputElement>, "size">, FormMessageContainerExtension, FormComponentStates, ConfigurableInputToggleIconProps, InputToggleLabelProps, ComponentWithRippleProps {
+    ref?: Ref<HTMLInputElement>;
     /**
      * @see https://stackoverflow.com/questions/5985839/bug-with-firefox-disabled-attribute-of-input-not-resetting-when-refreshing
      * @defaultValue `type === "checkbox" ? "off" : undefined`
@@ -183,4 +184,4 @@ export type InputToggleProps = CheckboxInputToggleProps | RadioInputToggleProps;
  * @since 6.0.0 Now supports the `FormMessage` behavior and requires
  * different icons for each checked state.
  */
-export declare const InputToggle: import("react").ForwardRefExoticComponent<InputToggleProps & import("react").RefAttributes<HTMLInputElement>>;
+export declare function InputToggle(props: InputToggleProps): ReactElement;

package/dist/form/InputToggle.js

@@ -1,7 +1,6 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { cnb } from "cnbuilder";
-import { forwardRef } from "react";
 import { useElementInteraction } from "../interaction/useElementInteraction.js";
 import { useEnsuredId } from "../useEnsuredId.js";
 import { FormMessageContainer } from "./FormMessageContainer.js";
@@ -14,8 +13,8 @@ import { Label } from "./Label.js";
  * @see {@link https://react-md.dev/components/radio | Radio Demos}
  * @since 6.0.0 Now supports the `FormMessage` behavior and requires
  * different icons for each checked state.
- */ export const InputToggle = /*#__PURE__*/ forwardRef(function InputToggle(props, ref) {
-    const { id: propId, type, label, labelProps, style, className, autoComplete = type === "checkbox" ? "off" : undefined, disableLabelGap = false, stacked = false, iconAfter = false, size = "normal", error = false, active = false, indeterminate = false, messageProps, messageContainerProps, icon, checkedIcon, indeterminateIcon, iconProps, iconStyle, iconClassName, onBlur, onClick, onKeyDown, onKeyUp, onMouseDown, onMouseLeave, onDragStart, onMouseUp, onTouchEnd, onTouchMove, onTouchStart, disableRipple, ...remaining } = props;
+ */ export function InputToggle(props) {
+    const { id: propId, ref, type, label, labelProps, style, className, autoComplete = type === "checkbox" ? "off" : undefined, disableLabelGap = false, stacked = false, iconAfter = false, size = "normal", error = false, active = false, indeterminate = false, messageProps, messageContainerProps, icon, checkedIcon, indeterminateIcon, iconProps, iconStyle, iconClassName, onBlur, onClick, onKeyDown, onKeyUp, onMouseDown, onMouseLeave, onDragStart, onMouseUp, onTouchEnd, onTouchMove, onTouchStart, disableRipple, ...remaining } = props;
     const { disabled = false, checked } = props;
     const id = useEnsuredId(propId, type);
     const { pressedClassName, ripples, handlers } = useElementInteraction({
@@ -80,6 +79,6 @@ import { Label } from "./Label.js";
             ]
         })
     });
-});
+}
 
 //# sourceMappingURL=InputToggle.js.map

package/dist/form/InputToggle.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/form/InputToggle.tsx"],"sourcesContent":["\"use client\";\n\nimport { cnb } from \"cnbuilder\";\nimport {\n  type CSSProperties,\n  type HTMLAttributes,\n  type InputHTMLAttributes,\n  type LabelHTMLAttributes,\n  type ReactNode,\n  forwardRef,\n} from \"react\";\n\nimport { type ComponentWithRippleProps } from \"../interaction/types.js\";\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\";\n// eslint-disable-next-line @typescript-eslint/no-unused-vars\nimport { type LabelClassNameOptions } from \"./types.js\";\nimport {\n  type FormComponentStates,\n  type FormMessageContainerExtension,\n} from \"./types.js\";\n\n/**\n * @since 6.0.0\n */\nexport interface ConfigurableInputToggleIconProps {\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>>;\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 * @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<LabelHTMLAttributes<HTMLLabelElement>>;\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 * @since 6.0.0\n */\nexport interface BaseInputToggleProps\n  extends\n    Omit<InputHTMLAttributes<HTMLInputElement>, \"size\">,\n    FormMessageContainerExtension,\n    FormComponentStates,\n    ConfigurableInputToggleIconProps,\n    InputToggleLabelProps,\n    ComponentWithRippleProps {\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 * @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   * @since 6.0.0\n   */\n  indeterminateIcon?: ReactNode;\n}\n\nexport interface CheckboxProps\n  extends BaseInputToggleProps, IndeterminateCheckboxProps {}\n\n/** @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   * @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/** @since 6.0.0 */\nexport interface RadioInputToggleProps extends RadioProps {\n  type: \"radio\";\n}\n\n/**\n * @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 * @see {@link https://react-md.dev/components/checkbox | Checkbox Demos}\n * @see {@link https://react-md.dev/components/radio | Radio Demos}\n * @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      disableRipple,\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      mode: disableRipple ? \"none\" : undefined,\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","disableRipple","remaining","disabled","checked","pressedClassName","ripples","handlers","mode","gap","reversed","input"],"mappings":"AAAA;;AAEA,SAASA,GAAG,QAAQ,YAAY;AAChC,SAMEC,UAAU,QACL,QAAQ;AAGf,SAASC,qBAAqB,QAAQ,0CAA0C;AAEhF,SAASC,YAAY,QAAQ,qBAAqB;AAClD,SAASC,oBAAoB,QAAQ,4BAA4B;AACjE,SAASC,eAAe,QAAQ,uBAAuB;AACvD,SAASC,KAAK,QAAQ,aAAa;AA+MnC;;;;;;;CAOC,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,EACZC,aAAa,EACb,GAAGC,WACJ,GAAGtC;IACJ,MAAM,EAAEuC,WAAW,KAAK,EAAEC,OAAO,EAAE,GAAGxC;IAEtC,MAAME,KAAKP,aAAaQ,QAAQC;IAChC,MAAM,EAAEqC,gBAAgB,EAAEC,OAAO,EAAEC,QAAQ,EAAE,GAAGjD,sBAAsB;QACpEkD,MAAMP,gBAAgB,SAAS3B;QAC/B6B;QACAb;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;IACF;IAEA,gEAAgE;IAChE,gDAAgD;IAChDE,SAAS,CAAC,eAAe,GACvB,AAACA,SAAS,CAAC,eAAe,IAAIrB,gBAAiB,UAAUP;IAE3D,qBACE,KAACd;QACE,GAAGuB,qBAAqB;QACzBD,cAAcA;kBAEd,cAAA,MAACpB;YACE,GAAGQ,UAAU;YACduC,KAAK,CAAClC;YACNJ,OAAOA;YACPK,SAASA;YACTkC,UAAU,CAACjC;YACXG,QAAQA;YACRD,OAAOA;YACPwB,UAAUA;YACV/B,WAAWA;;gBAEVH;8BACD,MAACR;oBACCU,OAAOiB;oBACN,GAAGD,SAAS;oBACbf,WAAWhB,IACTiD,kBACAhB,eACAF,WAAWf;oBAEbO,OAAOA;oBACPyB,SAASA;oBACTD,UAAUA;oBACVzB,MAAMA;oBACNV,MAAMA;oBACNgB,MAAMA;oBACNC,aAAaA;oBACbJ,eAAeA;oBACfK,mBAAmBA;;sCAEnB,KAACyB;4BACE,GAAGT,SAAS;4BACZ,GAAGK,QAAQ;4BACZlC,cAAcA;4BACdP,IAAIA;4BACJD,KAAKA;4BACLG,MAAMA;4BACNI,WAAU;;wBAEXkC;;;;;;AAKX,GACA"}
+{"version":3,"sources":["../../src/form/InputToggle.tsx"],"sourcesContent":["\"use client\";\n\nimport { cnb } from \"cnbuilder\";\nimport {\n  type CSSProperties,\n  type HTMLAttributes,\n  type InputHTMLAttributes,\n  type LabelHTMLAttributes,\n  type ReactElement,\n  type ReactNode,\n  type Ref,\n} from \"react\";\n\nimport { type ComponentWithRippleProps } from \"../interaction/types.js\";\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\";\n// eslint-disable-next-line @typescript-eslint/no-unused-vars\nimport { type LabelClassNameOptions } from \"./types.js\";\nimport {\n  type FormComponentStates,\n  type FormMessageContainerExtension,\n} from \"./types.js\";\n\n/**\n * @since 6.0.0\n */\nexport interface ConfigurableInputToggleIconProps {\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>>;\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 * @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<LabelHTMLAttributes<HTMLLabelElement>>;\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 * @since 6.0.0\n */\nexport interface BaseInputToggleProps\n  extends\n    Omit<InputHTMLAttributes<HTMLInputElement>, \"size\">,\n    FormMessageContainerExtension,\n    FormComponentStates,\n    ConfigurableInputToggleIconProps,\n    InputToggleLabelProps,\n    ComponentWithRippleProps {\n  ref?: Ref<HTMLInputElement>;\n\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 * @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   * @since 6.0.0\n   */\n  indeterminateIcon?: ReactNode;\n}\n\nexport interface CheckboxProps\n  extends BaseInputToggleProps, IndeterminateCheckboxProps {}\n\n/** @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   * @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/** @since 6.0.0 */\nexport interface RadioInputToggleProps extends RadioProps {\n  type: \"radio\";\n}\n\n/**\n * @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 * @see {@link https://react-md.dev/components/checkbox | Checkbox Demos}\n * @see {@link https://react-md.dev/components/radio | Radio Demos}\n * @since 6.0.0 Now supports the `FormMessage` behavior and requires\n * different icons for each checked state.\n */\nexport function InputToggle(props: InputToggleProps): ReactElement {\n  const {\n    id: propId,\n    ref,\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    disableRipple,\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    mode: disableRipple ? \"none\" : undefined,\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(pressedClassName, iconClassName, iconProps?.className)}\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"],"names":["cnb","useElementInteraction","useEnsuredId","FormMessageContainer","InputToggleIcon","Label","InputToggle","props","id","propId","ref","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","disableRipple","remaining","disabled","checked","pressedClassName","ripples","handlers","mode","gap","reversed","input"],"mappings":"AAAA;;AAEA,SAASA,GAAG,QAAQ,YAAY;AAYhC,SAASC,qBAAqB,QAAQ,0CAA0C;AAEhF,SAASC,YAAY,QAAQ,qBAAqB;AAClD,SAASC,oBAAoB,QAAQ,4BAA4B;AACjE,SAASC,eAAe,QAAQ,uBAAuB;AACvD,SAASC,KAAK,QAAQ,aAAa;AAiNnC;;;;;;;CAOC,GACD,OAAO,SAASC,YAAYC,KAAuB;IACjD,MAAM,EACJC,IAAIC,MAAM,EACVC,GAAG,EACHC,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,EACZC,aAAa,EACb,GAAGC,WACJ,GAAGtC;IACJ,MAAM,EAAEuC,WAAW,KAAK,EAAEC,OAAO,EAAE,GAAGxC;IAEtC,MAAMC,KAAKN,aAAaO,QAAQE;IAChC,MAAM,EAAEqC,gBAAgB,EAAEC,OAAO,EAAEC,QAAQ,EAAE,GAAGjD,sBAAsB;QACpEkD,MAAMP,gBAAgB,SAAS3B;QAC/B6B;QACAb;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;IACF;IAEA,gEAAgE;IAChE,gDAAgD;IAChDE,SAAS,CAAC,eAAe,GACvB,AAACA,SAAS,CAAC,eAAe,IAAIrB,gBAAiB,UAAUP;IAE3D,qBACE,KAACd;QACE,GAAGuB,qBAAqB;QACzBD,cAAcA;kBAEd,cAAA,MAACpB;YACE,GAAGQ,UAAU;YACduC,KAAK,CAAClC;YACNJ,OAAOA;YACPK,SAASA;YACTkC,UAAU,CAACjC;YACXG,QAAQA;YACRD,OAAOA;YACPwB,UAAUA;YACV/B,WAAWA;;gBAEVH;8BACD,MAACR;oBACCU,OAAOiB;oBACN,GAAGD,SAAS;oBACbf,WAAWf,IAAIgD,kBAAkBhB,eAAeF,WAAWf;oBAC3DO,OAAOA;oBACPyB,SAASA;oBACTD,UAAUA;oBACVzB,MAAMA;oBACNV,MAAMA;oBACNgB,MAAMA;oBACNC,aAAaA;oBACbJ,eAAeA;oBACfK,mBAAmBA;;sCAEnB,KAACyB;4BACE,GAAGT,SAAS;4BACZ,GAAGK,QAAQ;4BACZlC,cAAcA;4BACdR,IAAIA;4BACJE,KAAKA;4BACLC,MAAMA;4BACNI,WAAU;;wBAEXkC;;;;;;AAKX"}

package/dist/form/InputToggleIcon.d.ts

@@ -1,4 +1,4 @@
-import { type HTMLAttributes, type ReactNode } from "react";
+import { type HTMLAttributes, type ReactElement, type ReactNode, type Ref } from "react";
 import { type InputToggleSize } from "./inputToggleStyles.js";
 /**
  * @since 2.8.0
@@ -8,6 +8,7 @@ import { type InputToggleSize } from "./inputToggleStyles.js";
  * @internal
  */
 export interface InputToggleIconProps extends HTMLAttributes<HTMLSpanElement> {
+    ref?: Ref<HTMLSpanElement>;
     type: "checkbox" | "radio";
     /**
      * Note: If this is `undefined` and the {@link FORM_CONFIG.uncontrolledToggles} is `false`,
@@ -45,4 +46,4 @@ export interface InputToggleIconProps extends HTMLAttributes<HTMLSpanElement> {
  * of a css overlay hack.
  * @internal
  */
-export declare const InputToggleIcon: import("react").ForwardRefExoticComponent<InputToggleIconProps & import("react").RefAttributes<HTMLSpanElement>>;
+export declare function InputToggleIcon(props: InputToggleIconProps): ReactElement;

package/dist/form/InputToggleIcon.js

@@ -1,6 +1,5 @@
 import { jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { cnb } from "cnbuilder";
-import { forwardRef } from "react";
 import { getIcon } from "../icon/config.js";
 import { FORM_CONFIG } from "./formConfig.js";
 import { inputToggle } from "./inputToggleStyles.js";
@@ -9,8 +8,8 @@ import { inputToggle } from "./inputToggleStyles.js";
  * @since 6.0.0 Updated to use different icons for each checked state instead
  * of a css overlay hack.
  * @internal
- */ export const InputToggleIcon = /*#__PURE__*/ forwardRef(function InputToggleIcon(props, ref) {
-    const { type, size = "normal", icon: propIcon, error, checked, children, disabled, indeterminate, className, disableEm = false, checkedIcon: propCheckedIcon, indeterminateIcon: propIndeterminateIcon, ...remaining } = props;
+ */ export function InputToggleIcon(props) {
+    const { ref, type, size = "normal", icon: propIcon, error, checked, children, disabled, indeterminate, className, disableEm = false, checkedIcon: propCheckedIcon, indeterminateIcon: propIndeterminateIcon, ...remaining } = props;
     const uncheckedIcon = getIcon(type, propIcon);
     const checkedIcon = getIcon(`${type}Checked`, propCheckedIcon);
     const indeterminateIcon = getIcon("checkboxIndeterminate", propIndeterminateIcon);
@@ -50,6 +49,6 @@ import { inputToggle } from "./inputToggleStyles.js";
             icon
         ]
     });
-});
+}
 
 //# sourceMappingURL=InputToggleIcon.js.map

package/dist/form/InputToggleIcon.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/form/InputToggleIcon.tsx"],"sourcesContent":["import { cnb } from \"cnbuilder\";\nimport { type HTMLAttributes, type ReactNode, forwardRef } from \"react\";\n\nimport { getIcon } from \"../icon/config.js\";\nimport { FORM_CONFIG } from \"./formConfig.js\";\nimport { type InputToggleSize, inputToggle } from \"./inputToggleStyles.js\";\n\n/**\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 * @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    if (checked) {\n      icon = indeterminate ? indeterminateIcon : checkedIcon;\n    } else {\n      icon = uncheckedIcon;\n    }\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,SAA8CC,UAAU,QAAQ,QAAQ;AAExE,SAASC,OAAO,QAAQ,oBAAoB;AAC5C,SAASC,WAAW,QAAQ,kBAAkB;AAC9C,SAA+BC,WAAW,QAAQ,yBAAyB;AAkD3E;;;;;CAKC,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,GAAGM,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;QACvB,IAAIC,SAAS;YACXH,OAAOM,gBAAgBK,oBAAoBF;QAC7C,OAAO;YACLT,OAAOc;QACT;IACF,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"}
+{"version":3,"sources":["../../src/form/InputToggleIcon.tsx"],"sourcesContent":["import { cnb } from \"cnbuilder\";\nimport {\n  type HTMLAttributes,\n  type ReactElement,\n  type ReactNode,\n  type Ref,\n} from \"react\";\n\nimport { getIcon } from \"../icon/config.js\";\nimport { FORM_CONFIG } from \"./formConfig.js\";\nimport { type InputToggleSize, inputToggle } from \"./inputToggleStyles.js\";\n\n/**\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  ref?: Ref<HTMLSpanElement>;\n\n  type: \"checkbox\" | \"radio\";\n\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 * @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 function InputToggleIcon(props: InputToggleIconProps): ReactElement {\n  const {\n    ref,\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    if (checked) {\n      icon = indeterminate ? indeterminateIcon : checkedIcon;\n    } else {\n      icon = uncheckedIcon;\n    }\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","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;AAQhC,SAASC,OAAO,QAAQ,oBAAoB;AAC5C,SAASC,WAAW,QAAQ,kBAAkB;AAC9C,SAA+BC,WAAW,QAAQ,yBAAyB;AAqD3E;;;;;CAKC,GACD,OAAO,SAASC,gBAAgBC,KAA2B;IACzD,MAAM,EACJC,GAAG,EACHC,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,GAAGM,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;QACvB,IAAIC,SAAS;YACXH,OAAOM,gBAAgBK,oBAAoBF;QAC7C,OAAO;YACLT,OAAOc;QACT;IACF,OAAO;QACLd,qBACE;;gBACGc;gBACAR,gBAAgBK,oBAAoBF;;;IAG3C;IAEA,qBACE,MAACS;QACE,GAAGL,SAAS;QACbhB,KAAKA;QACLU,WAAWhB,IACTG,YAAY;YACVyB,IAAI,CAACX;YACLT;YACAD;YACAI;YACAa;YACAV;YACAW;YACAT;QACF;;YAGDH;YACAJ;;;AAGP"}