@react-md/core 6.5.2 → 7.0.0

package/dist/overlay/Overlay.js

@@ -1,6 +1,5 @@
 "use client";
 import { jsx as _jsx } from "react/jsx-runtime";
-import { forwardRef } from "react";
 import { useSsr } from "../SsrProvider.js";
 import { Portal } from "../portal/Portal.js";
 import { useCSSTransition } from "../transition/useCSSTransition.js";
@@ -30,8 +29,8 @@ import { DEFAULT_OVERLAY_CLASSNAMES, DEFAULT_OVERLAY_TIMEOUT, overlay } from "./
  * @see {@link https://react-md.dev/components/overlay | Overlay Demos}
  * @since 6.0.0 Removed the `onRequestClose` prop in favor of using
  * the `onClick` prop instead.
- */ export const Overlay = /*#__PURE__*/ forwardRef(function Overlay(props, nodeRef) {
-    const { children, className, visible, noOpacity = false, clickable = !noOpacity, temporary = true, timeout = DEFAULT_OVERLAY_TIMEOUT, classNames = DEFAULT_OVERLAY_CLASSNAMES, disableTransition = false, align = "center", justify = "center", appear, enter, exit, onEnter, onEntering, onEntered, onExit, onExiting, onExited, exitedHidden = true, disablePortal: propDisablePortal = false, ...remaining } = props;
+ */ export function Overlay(props) {
+    const { ref: nodeRef, children, className, visible, noOpacity = false, clickable = !noOpacity, temporary = true, timeout = DEFAULT_OVERLAY_TIMEOUT, classNames = DEFAULT_OVERLAY_CLASSNAMES, disableTransition = false, align = "center", justify = "center", appear, enter, exit, onEnter, onEntering, onEntered, onExit, onExiting, onExited, exitedHidden = true, disablePortal: propDisablePortal = false, ...remaining } = props;
     const ssr = useSsr();
     const { elementProps, rendered, disablePortal } = useCSSTransition({
         nodeRef,
@@ -66,6 +65,6 @@ import { DEFAULT_OVERLAY_CLASSNAMES, DEFAULT_OVERLAY_TIMEOUT, overlay } from "./
             children: children
         })
     });
-});
+}
 
 //# sourceMappingURL=Overlay.js.map

package/dist/overlay/Overlay.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/overlay/Overlay.tsx"],"sourcesContent":["\"use client\";\n\nimport { type HTMLAttributes, forwardRef } from \"react\";\n\nimport { useSsr } from \"../SsrProvider.js\";\nimport { Portal } from \"../portal/Portal.js\";\nimport {\n  type CSSTransitionComponentProps,\n  type TransitionActions,\n} from \"../transition/types.js\";\nimport { useCSSTransition } from \"../transition/useCSSTransition.js\";\nimport {\n  type BaseOverlayClassNameOptions,\n  DEFAULT_OVERLAY_CLASSNAMES,\n  DEFAULT_OVERLAY_TIMEOUT,\n  overlay,\n} from \"./styles.js\";\n\n/**\n * @since 6.0.0 Added `align` and `justify` props.\n * @since 6.0.0 Renamed `hidden` to `noOpacity`.\n * @since 6.3.1 Extends BaseOverlayClassNameOptions for CSSProperties module\n * augmentation.\n */\nexport interface OverlayProps\n  extends\n    HTMLAttributes<HTMLSpanElement>,\n    BaseOverlayClassNameOptions,\n    CSSTransitionComponentProps,\n    TransitionActions {\n  /**\n   * Set this to `true` if the overlay should be rendered with an `opacity: 0`\n   * and disabling the animation. This is useful if you'd like a \"close on\n   * outside click\" behavior.\n   *\n   * @defaultValue `false`\n   */\n  noOpacity?: boolean;\n\n  /**\n   * @see {@link OverlayClassNameOptions.clickable}\n   * @defaultValue `!noOpacity`\n   */\n  clickable?: boolean;\n\n  /**\n   * @defaultValue `false`\n   */\n  disablePortal?: boolean;\n\n  /**\n   * @defaultValue `false`\n   */\n  disableTransition?: boolean;\n}\n\n/**\n * **Client Component**\n *\n * @example Simple Example\n * ```tsx\n * import { Button } from \"@react-md/core/button/Button\";\n * import { Overlay } from \"@react-md/core/overlay/Overlay\";\n * import { useToggle } from \"@react-md/core/useToggle\";\n * import type { ReactElement } from \"react\";\n *\n * function Example(): ReactElement {\n *   const { toggle, disable, toggled: visible } = useToggle(false);\n *\n *   return (\n *     <>\n *       <Button onClick={toggle}>Toggle</Button>\n *       <Overlay visible={visible} onClick={disable} />\n *     </>\n *   );\n * }\n * ```\n *\n * @see {@link https://react-md.dev/components/overlay | Overlay Demos}\n * @since 6.0.0 Removed the `onRequestClose` prop in favor of using\n * the `onClick` prop instead.\n */\nexport const Overlay = forwardRef<HTMLSpanElement, OverlayProps>(\n  function Overlay(props, nodeRef) {\n    const {\n      children,\n      className,\n      visible,\n      noOpacity = false,\n      clickable = !noOpacity,\n      temporary = true,\n      timeout = DEFAULT_OVERLAY_TIMEOUT,\n      classNames = DEFAULT_OVERLAY_CLASSNAMES,\n      disableTransition = false,\n      align = \"center\",\n      justify = \"center\",\n      appear,\n      enter,\n      exit,\n      onEnter,\n      onEntering,\n      onEntered,\n      onExit,\n      onExiting,\n      onExited,\n      exitedHidden = true,\n      disablePortal: propDisablePortal = false,\n      ...remaining\n    } = props;\n\n    const ssr = useSsr();\n    const { elementProps, rendered, disablePortal } = useCSSTransition({\n      nodeRef,\n      transitionIn: visible,\n      timeout: noOpacity ? 0 : timeout,\n      classNames: noOpacity ? \"\" : classNames,\n      className: overlay({\n        visible,\n        clickable,\n        align,\n        justify,\n        className,\n      }),\n      appear: appear && !disableTransition && !ssr,\n      enter: enter && !disableTransition,\n      exit: exit && !disableTransition,\n      onEnter,\n      onEntering,\n      onEntered,\n      onExit,\n      onExiting,\n      onExited,\n      temporary,\n      exitedHidden,\n      disablePortal: propDisablePortal,\n    });\n\n    return (\n      <Portal disabled={disablePortal}>\n        {rendered && (\n          <span {...remaining} {...elementProps}>\n            {children}\n          </span>\n        )}\n      </Portal>\n    );\n  }\n);\n"],"names":["forwardRef","useSsr","Portal","useCSSTransition","DEFAULT_OVERLAY_CLASSNAMES","DEFAULT_OVERLAY_TIMEOUT","overlay","Overlay","props","nodeRef","children","className","visible","noOpacity","clickable","temporary","timeout","classNames","disableTransition","align","justify","appear","enter","exit","onEnter","onEntering","onEntered","onExit","onExiting","onExited","exitedHidden","disablePortal","propDisablePortal","remaining","ssr","elementProps","rendered","transitionIn","disabled","span"],"mappings":"AAAA;;AAEA,SAA8BA,UAAU,QAAQ,QAAQ;AAExD,SAASC,MAAM,QAAQ,oBAAoB;AAC3C,SAASC,MAAM,QAAQ,sBAAsB;AAK7C,SAASC,gBAAgB,QAAQ,oCAAoC;AACrE,SAEEC,0BAA0B,EAC1BC,uBAAuB,EACvBC,OAAO,QACF,cAAc;AAwCrB;;;;;;;;;;;;;;;;;;;;;;;;;CAyBC,GACD,OAAO,MAAMC,wBAAUP,WACrB,SAASO,QAAQC,KAAK,EAAEC,OAAO;IAC7B,MAAM,EACJC,QAAQ,EACRC,SAAS,EACTC,OAAO,EACPC,YAAY,KAAK,EACjBC,YAAY,CAACD,SAAS,EACtBE,YAAY,IAAI,EAChBC,UAAUX,uBAAuB,EACjCY,aAAab,0BAA0B,EACvCc,oBAAoB,KAAK,EACzBC,QAAQ,QAAQ,EAChBC,UAAU,QAAQ,EAClBC,MAAM,EACNC,KAAK,EACLC,IAAI,EACJC,OAAO,EACPC,UAAU,EACVC,SAAS,EACTC,MAAM,EACNC,SAAS,EACTC,QAAQ,EACRC,eAAe,IAAI,EACnBC,eAAeC,oBAAoB,KAAK,EACxC,GAAGC,WACJ,GAAGzB;IAEJ,MAAM0B,MAAMjC;IACZ,MAAM,EAAEkC,YAAY,EAAEC,QAAQ,EAAEL,aAAa,EAAE,GAAG5B,iBAAiB;QACjEM;QACA4B,cAAczB;QACdI,SAASH,YAAY,IAAIG;QACzBC,YAAYJ,YAAY,KAAKI;QAC7BN,WAAWL,QAAQ;YACjBM;YACAE;YACAK;YACAC;YACAT;QACF;QACAU,QAAQA,UAAU,CAACH,qBAAqB,CAACgB;QACzCZ,OAAOA,SAAS,CAACJ;QACjBK,MAAMA,QAAQ,CAACL;QACfM;QACAC;QACAC;QACAC;QACAC;QACAC;QACAd;QACAe;QACAC,eAAeC;IACjB;IAEA,qBACE,KAAC9B;QAAOoC,UAAUP;kBACfK,0BACC,KAACG;YAAM,GAAGN,SAAS;YAAG,GAAGE,YAAY;sBAClCzB;;;AAKX,GACA"}
+{"version":3,"sources":["../../src/overlay/Overlay.tsx"],"sourcesContent":["\"use client\";\n\nimport { type HTMLAttributes, type ReactElement, type Ref } from \"react\";\n\nimport { useSsr } from \"../SsrProvider.js\";\nimport { Portal } from \"../portal/Portal.js\";\nimport {\n  type CSSTransitionComponentProps,\n  type TransitionActions,\n} from \"../transition/types.js\";\nimport { useCSSTransition } from \"../transition/useCSSTransition.js\";\nimport {\n  type BaseOverlayClassNameOptions,\n  DEFAULT_OVERLAY_CLASSNAMES,\n  DEFAULT_OVERLAY_TIMEOUT,\n  overlay,\n} from \"./styles.js\";\n\n/**\n * @since 6.0.0 Added `align` and `justify` props.\n * @since 6.0.0 Renamed `hidden` to `noOpacity`.\n * @since 6.3.1 Extends BaseOverlayClassNameOptions for CSSProperties module\n * augmentation.\n */\nexport interface OverlayProps\n  extends\n    HTMLAttributes<HTMLSpanElement>,\n    BaseOverlayClassNameOptions,\n    CSSTransitionComponentProps,\n    TransitionActions {\n  ref?: Ref<HTMLSpanElement>;\n\n  /**\n   * Set this to `true` if the overlay should be rendered with an `opacity: 0`\n   * and disabling the animation. This is useful if you'd like a \"close on\n   * outside click\" behavior.\n   *\n   * @defaultValue `false`\n   */\n  noOpacity?: boolean;\n\n  /**\n   * @see {@link OverlayClassNameOptions.clickable}\n   * @defaultValue `!noOpacity`\n   */\n  clickable?: boolean;\n\n  /**\n   * @defaultValue `false`\n   */\n  disablePortal?: boolean;\n\n  /**\n   * @defaultValue `false`\n   */\n  disableTransition?: boolean;\n}\n\n/**\n * **Client Component**\n *\n * @example Simple Example\n * ```tsx\n * import { Button } from \"@react-md/core/button/Button\";\n * import { Overlay } from \"@react-md/core/overlay/Overlay\";\n * import { useToggle } from \"@react-md/core/useToggle\";\n * import type { ReactElement } from \"react\";\n *\n * function Example(): ReactElement {\n *   const { toggle, disable, toggled: visible } = useToggle(false);\n *\n *   return (\n *     <>\n *       <Button onClick={toggle}>Toggle</Button>\n *       <Overlay visible={visible} onClick={disable} />\n *     </>\n *   );\n * }\n * ```\n *\n * @see {@link https://react-md.dev/components/overlay | Overlay Demos}\n * @since 6.0.0 Removed the `onRequestClose` prop in favor of using\n * the `onClick` prop instead.\n */\nexport function Overlay(props: OverlayProps): ReactElement {\n  const {\n    ref: nodeRef,\n    children,\n    className,\n    visible,\n    noOpacity = false,\n    clickable = !noOpacity,\n    temporary = true,\n    timeout = DEFAULT_OVERLAY_TIMEOUT,\n    classNames = DEFAULT_OVERLAY_CLASSNAMES,\n    disableTransition = false,\n    align = \"center\",\n    justify = \"center\",\n    appear,\n    enter,\n    exit,\n    onEnter,\n    onEntering,\n    onEntered,\n    onExit,\n    onExiting,\n    onExited,\n    exitedHidden = true,\n    disablePortal: propDisablePortal = false,\n    ...remaining\n  } = props;\n\n  const ssr = useSsr();\n  const { elementProps, rendered, disablePortal } = useCSSTransition({\n    nodeRef,\n    transitionIn: visible,\n    timeout: noOpacity ? 0 : timeout,\n    classNames: noOpacity ? \"\" : classNames,\n    className: overlay({\n      visible,\n      clickable,\n      align,\n      justify,\n      className,\n    }),\n    appear: appear && !disableTransition && !ssr,\n    enter: enter && !disableTransition,\n    exit: exit && !disableTransition,\n    onEnter,\n    onEntering,\n    onEntered,\n    onExit,\n    onExiting,\n    onExited,\n    temporary,\n    exitedHidden,\n    disablePortal: propDisablePortal,\n  });\n\n  return (\n    <Portal disabled={disablePortal}>\n      {rendered && (\n        <span {...remaining} {...elementProps}>\n          {children}\n        </span>\n      )}\n    </Portal>\n  );\n}\n"],"names":["useSsr","Portal","useCSSTransition","DEFAULT_OVERLAY_CLASSNAMES","DEFAULT_OVERLAY_TIMEOUT","overlay","Overlay","props","ref","nodeRef","children","className","visible","noOpacity","clickable","temporary","timeout","classNames","disableTransition","align","justify","appear","enter","exit","onEnter","onEntering","onEntered","onExit","onExiting","onExited","exitedHidden","disablePortal","propDisablePortal","remaining","ssr","elementProps","rendered","transitionIn","disabled","span"],"mappings":"AAAA;;AAIA,SAASA,MAAM,QAAQ,oBAAoB;AAC3C,SAASC,MAAM,QAAQ,sBAAsB;AAK7C,SAASC,gBAAgB,QAAQ,oCAAoC;AACrE,SAEEC,0BAA0B,EAC1BC,uBAAuB,EACvBC,OAAO,QACF,cAAc;AA0CrB;;;;;;;;;;;;;;;;;;;;;;;;;CAyBC,GACD,OAAO,SAASC,QAAQC,KAAmB;IACzC,MAAM,EACJC,KAAKC,OAAO,EACZC,QAAQ,EACRC,SAAS,EACTC,OAAO,EACPC,YAAY,KAAK,EACjBC,YAAY,CAACD,SAAS,EACtBE,YAAY,IAAI,EAChBC,UAAUZ,uBAAuB,EACjCa,aAAad,0BAA0B,EACvCe,oBAAoB,KAAK,EACzBC,QAAQ,QAAQ,EAChBC,UAAU,QAAQ,EAClBC,MAAM,EACNC,KAAK,EACLC,IAAI,EACJC,OAAO,EACPC,UAAU,EACVC,SAAS,EACTC,MAAM,EACNC,SAAS,EACTC,QAAQ,EACRC,eAAe,IAAI,EACnBC,eAAeC,oBAAoB,KAAK,EACxC,GAAGC,WACJ,GAAG1B;IAEJ,MAAM2B,MAAMlC;IACZ,MAAM,EAAEmC,YAAY,EAAEC,QAAQ,EAAEL,aAAa,EAAE,GAAG7B,iBAAiB;QACjEO;QACA4B,cAAczB;QACdI,SAASH,YAAY,IAAIG;QACzBC,YAAYJ,YAAY,KAAKI;QAC7BN,WAAWN,QAAQ;YACjBO;YACAE;YACAK;YACAC;YACAT;QACF;QACAU,QAAQA,UAAU,CAACH,qBAAqB,CAACgB;QACzCZ,OAAOA,SAAS,CAACJ;QACjBK,MAAMA,QAAQ,CAACL;QACfM;QACAC;QACAC;QACAC;QACAC;QACAC;QACAd;QACAe;QACAC,eAAeC;IACjB;IAEA,qBACE,KAAC/B;QAAOqC,UAAUP;kBACfK,0BACC,KAACG;YAAM,GAAGN,SAAS;YAAG,GAAGE,YAAY;sBAClCzB;;;AAKX"}

package/dist/positioning/useFixedPositioning.d.ts

@@ -60,7 +60,7 @@ export interface FixedPositioningOptions<FixedToElement extends HTMLElement, Fix
      * A ref pointing to an element that another element should be fixed to. This
      * **must** be provided for the positioning to work.
      */
-    fixedTo: RefObject<FixedToElement>;
+    fixedTo: RefObject<FixedToElement | null>;
     /**
      * An optional function that can be used to override positioning options if
      * some options require the element to be in the DOM for specific

package/dist/positioning/useFixedPositioning.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/positioning/useFixedPositioning.ts"],"sourcesContent":["\"use client\";\n\nimport {\n  type CSSProperties,\n  type Ref,\n  type RefCallback,\n  type RefObject,\n  useCallback,\n  useEffect,\n  useRef,\n  useState,\n} from \"react\";\n\nimport { delegateEvent } from \"../delegateEvent.js\";\nimport { type TransitionCallbacks } from \"../transition/types.js\";\nimport { useEnsuredRef } from \"../useEnsuredRef.js\";\nimport { useIsomorphicLayoutEffect } from \"../useIsomorphicLayoutEffect.js\";\nimport { BELOW_CENTER_ANCHOR } from \"./constants.js\";\nimport { getFixedPosition } from \"./getFixedPosition.js\";\nimport {\n  type CalculateFixedPositionOptions,\n  // eslint-disable-next-line @typescript-eslint/no-unused-vars\n  type FixedPositionStyle,\n} from \"./types.js\";\nimport { isWithinViewport } from \"./utils.js\";\n\nconst noop = (): undefined => undefined;\n\n/**\n * @since 4.0.0\n */\nexport type FixedPositioningTransitionCallbacks = Pick<\n  TransitionCallbacks,\n  \"onEnter\" | \"onEntering\" | \"onEntered\" | \"onExited\"\n>;\n\n/**\n * This options should be passed to the {@link useCSSTransition} for the styling\n * and positioning to work correctly.\n *\n * @typeParam E - An HTMLElement type used for the ref required for the\n * transition.\n * @since 4.0.0\n */\nexport interface FixedPositioningTransitionOptions<\n  E extends HTMLElement,\n> extends FixedPositioningTransitionCallbacks {\n  /** {@inheritDoc TransitionOptions.nodeRef} */\n  nodeRef?: Ref<E>;\n}\n\n/**\n * @typeParam FixedToElement - An HTMLElement type for the static element.\n * @typeParam FixedElement - An HTMLElement type for the fixed element.\n * @since 4.0.0\n */\nexport interface FixedPositioningScrollData<\n  FixedToElement extends HTMLElement,\n  FixedElement extends HTMLElement,\n> {\n  fixedElement: FixedElement;\n  fixedToElement: FixedToElement;\n\n  /**\n   * Boolean if the {@link fixedToElement} is visible within the viewport.\n   */\n  visible: boolean;\n}\n\n/**\n * This function is called when the page is scrolled while the fixed element is\n * visible. This is generally used to reposition the fixed element or hide it if\n * it is no longer visible within the viewport.\n *\n * @typeParam FixedToElement - An HTMLElement type for the static element.\n * @typeParam FixedElement - An HTMLElement type for the fixed element.\n * @param event - The scroll event\n * @param data - The {@link FixedPositioningScrollData} that can be used for\n * custom scroll behavior.\n * @since 4.0.0\n */\nexport type TransitionScrollCallback<\n  FixedToElement extends HTMLElement,\n  FixedElement extends HTMLElement,\n> = (\n  event: Event,\n  data: Readonly<FixedPositioningScrollData<FixedToElement, FixedElement>>\n) => void;\n\n/**\n * @typeParam FixedToElement - An HTMLElement type for the static element.\n * @typeParam FixedElement - An HTMLElement type for the fixed element.\n * @since 4.0.0\n */\nexport interface FixedPositioningOptions<\n  FixedToElement extends HTMLElement,\n  FixedElement extends HTMLElement,\n>\n  extends\n    FixedPositioningTransitionOptions<FixedElement>,\n    CalculateFixedPositionOptions {\n  /**\n   * An optional style that will be merged with the fixed positioning required\n   * styles.\n   *\n   * @see {@link FixedPositionStyle}\n   */\n  style?: CSSProperties;\n\n  /**\n   * A ref pointing to an element that another element should be fixed to. This\n   * **must** be provided for the positioning to work.\n   */\n  fixedTo: RefObject<FixedToElement>;\n\n  /**\n   * An optional function that can be used to override positioning options if\n   * some options require the element to be in the DOM for specific\n   * calculations.\n   */\n  getFixedPositionOptions?: () => CalculateFixedPositionOptions;\n\n  /**\n   * An optional function to call if the page resizes while the `FixedElement`\n   * is visible.\n   */\n  onResize?: EventListener;\n  /** @see {@link TransitionScrollCallback} */\n  onScroll?: TransitionScrollCallback<FixedToElement, FixedElement>;\n\n  /**\n   * Set this to `true` to disable the fixed positioning behavior so it can be\n   * customized within CSS or manually instead. This was added mostly to just\n   * support rendering menus inline with other content (like autocompletes\n   * within a dialog).\n   *\n   * @defaultValue `false`\n   * @since 6.0.0\n   */\n  disabled?: boolean;\n}\n\n/**\n * @typeParam E - An HTMLElement type for the fixed element.\n * @since 4.0.0\n * @since 6.0.0 Renamed from `FixedPositioningHookReturnValue` to\n * `FixedPositioningImplementation` to match naming conventions.\n */\nexport interface FixedPositioningImplementation<E extends HTMLElement> {\n  /**\n   * A ref that should be passed to a component for the fixed positioning\n   * behavior to work correctly.\n   *\n   * This should really only be used if the {@link TransitionOptions} is not\n   * being used.\n   */\n  ref: RefCallback<E>;\n\n  /**\n   * This is the {@link FixedPositionStyle} merged with the\n   * {@link FixedPositioningOptions.style}. This will only return `undefined`\n   * when {@link FixedPositioningOptions.disabled} is `true` and no `style` was\n   * provided.\n   */\n  style: CSSProperties | undefined;\n\n  /**\n   * This should really only be used if the {@link transitionOptions} is not\n   * being used.\n   */\n  callbacks: Readonly<Required<FixedPositioningTransitionCallbacks>>;\n\n  /**\n   * A function that can be called to update the style for the fixed element.\n   */\n  updateStyle: () => void;\n\n  /** {@inheritDoc FixedPositioningTransitionOptions} */\n  transitionOptions: Readonly<Required<FixedPositioningTransitionOptions<E>>>;\n}\n\n/**\n * This hook is used to attach a temporary (fixed) element to another element\n * within the page. In other words, this is a way to have an element with\n * `position: fixed` as if it were `position: absolute` to a parent element that\n * had `position: relative`.\n *\n * @example Simple Example\n * ```tsx\n * \"use client\";\n *\n * import { Button } from \"@react-md/core/button/Button\";\n * import { useFixedPositioning } from \"@react-md/core/positioning/useFixedPositioning\";\n * import { useCSSTransition } from \"@react-md/core/transition/useCSSTransition\";\n * import { type ReactElement, useRef, useState } from \"react\";\n *\n * function Example(): ReactElement {\n *   const fixedTo = useRef<HTMLButtonElement>(null);\n *   const [transitionIn, setTransitionIn] = useState(false);\n *   const { style, transitionOptions } = useFixedPositioning({\n *     fixedTo,\n *   });\n *   const { elementProps, rendered } = useCSSTransition({\n *     ...transitionOptions,\n *     transitionIn,\n *     temporary: true,\n *     timeout: {\n *       enter: 200,\n *       exit: 150,\n *     },\n *     classNames: {\n *       enter: \"enter\",\n *       enterActive: \"enter--active\",\n *       exit: \"exit\",\n *       exitActive: \"exit--active\",\n *     },\n *   });\n *\n *   return (\n *     <>\n *       <Button ref={fixedTo} onClick={() => setTransitionIn(!transitionIn)}>\n *         Toggle\n *       </Button>\n *       {rendered && (\n *         <div {...elementProps} style={style}>\n *           Fixed Temporary Element\n *         </div>\n *       )}\n *     </>\n *   );\n * }\n * ```\n *\n * @see {@link https://react-md.dev/hooks/use-fixed-positioning | useFixedPositioning Demos}\n * @typeParam FixedToElement - An HTMLElement type for the static element.\n * @typeParam FixedElement - An HTMLElement type for the fixed element.\n * @since 4.0.0\n */\nexport function useFixedPositioning<\n  FixedToElement extends HTMLElement,\n  FixedElement extends HTMLElement,\n>(\n  options: FixedPositioningOptions<FixedToElement, FixedElement>\n): FixedPositioningImplementation<FixedElement> {\n  const {\n    style: propStyle,\n    nodeRef,\n    fixedTo,\n    disabled,\n    onEnter = noop,\n    onEntering = noop,\n    onEntered = noop,\n    onExited = noop,\n    anchor = BELOW_CENTER_ANCHOR,\n    disableSwapping,\n    disableVHBounds,\n    initialX,\n    initialY,\n    preventOverlap,\n    transformOrigin,\n    vhMargin,\n    vwMargin,\n    width,\n    xMargin,\n    yMargin,\n    getFixedPositionOptions = noop,\n    onScroll,\n    onResize = noop,\n  } = options;\n\n  const [active, setActive] = useState(false);\n  const [ref, refHandler] = useEnsuredRef(nodeRef);\n  const optionsRef = useRef({\n    ref,\n    fixedTo,\n    anchor,\n    disableSwapping,\n    disableVHBounds,\n    preventOverlap,\n    transformOrigin,\n    vhMargin,\n    vwMargin,\n    width,\n    xMargin,\n    yMargin,\n    getFixedPositionOptions,\n  } as const);\n  useIsomorphicLayoutEffect(() => {\n    optionsRef.current = {\n      ref,\n      fixedTo,\n      anchor,\n      disableSwapping,\n      disableVHBounds,\n      preventOverlap,\n      transformOrigin,\n      vhMargin,\n      vwMargin,\n      width,\n      xMargin,\n      yMargin,\n      getFixedPositionOptions,\n    };\n  }, [\n    ref,\n    fixedTo,\n    anchor,\n    disableSwapping,\n    disableVHBounds,\n    preventOverlap,\n    transformOrigin,\n    vhMargin,\n    vwMargin,\n    width,\n    xMargin,\n    yMargin,\n    getFixedPositionOptions,\n  ]);\n  const [style, setStyle] = useState<CSSProperties | undefined>(\n    () =>\n      getFixedPosition({\n        container: ref.current,\n        element: fixedTo.current,\n        anchor,\n        disableSwapping,\n        disableVHBounds,\n        initialX,\n        initialY,\n        preventOverlap,\n        transformOrigin,\n        vhMargin,\n        vwMargin,\n        width,\n        xMargin,\n        yMargin,\n        ...getFixedPositionOptions(),\n      }).style\n  );\n\n  const updateStyle = useCallback(() => {\n    if (disabled) {\n      return;\n    }\n\n    const {\n      ref,\n      fixedTo,\n      anchor,\n      disableSwapping,\n      disableVHBounds,\n      preventOverlap,\n      transformOrigin,\n      vhMargin,\n      vwMargin,\n      width,\n      xMargin,\n      yMargin,\n      getFixedPositionOptions,\n    } = optionsRef.current;\n    const element = ref.current;\n    const container = fixedTo.current;\n    const { style } = getFixedPosition({\n      container,\n      element,\n      anchor,\n      disableSwapping,\n      disableVHBounds,\n      initialX,\n      initialY,\n      preventOverlap,\n      transformOrigin,\n      vhMargin,\n      vwMargin,\n      width,\n      xMargin,\n      yMargin,\n      ...getFixedPositionOptions(),\n    });\n\n    setStyle(style);\n    setActive(!!element && !element.hidden);\n\n    // Only changing the initialX, initialY, or disabled should cause the\n    // useEffect below to trigger, which is why everything else is set in a ref.\n  }, [disabled, initialX, initialY]);\n\n  useEffect(() => {\n    if (!active || disabled) {\n      return;\n    }\n\n    const resizeCallback = (event: Event): void => {\n      onResize(event);\n      updateStyle();\n    };\n    const scrollCallback = (event: Event): void => {\n      const fixedElement = ref.current;\n      const fixedToElement = fixedTo.current;\n      if (onScroll && fixedElement && fixedToElement) {\n        onScroll(event, {\n          visible: isWithinViewport({ fixedElement, fixedToElement }),\n          fixedElement,\n          fixedToElement,\n        });\n      }\n\n      updateStyle();\n    };\n\n    const resizeHandler = delegateEvent(\"resize\", globalThis.window, true);\n    const scrollHandler = delegateEvent(\"scroll\", globalThis.window, true, {\n      passive: true,\n    });\n    resizeHandler.add(resizeCallback);\n    scrollHandler.add(scrollCallback);\n    return () => {\n      resizeHandler.remove(resizeCallback);\n      scrollHandler.remove(scrollCallback);\n    };\n  }, [active, disabled, fixedTo, onResize, onScroll, ref, updateStyle]);\n\n  const callbacks: Required<FixedPositioningTransitionCallbacks> = {\n    onEnter(appearing) {\n      onEnter(appearing);\n      updateStyle();\n    },\n    onEntering(appearing) {\n      onEntering(appearing);\n      updateStyle();\n    },\n    onEntered(appearing) {\n      onEntered(appearing);\n      updateStyle();\n    },\n    onExited() {\n      onExited();\n      setActive(false);\n    },\n  };\n\n  return {\n    ref: refHandler,\n    style: disabled ? propStyle : { ...style, ...propStyle },\n    callbacks,\n    updateStyle,\n    transitionOptions: {\n      ...callbacks,\n      nodeRef: refHandler,\n    },\n  };\n}\n"],"names":["useCallback","useEffect","useRef","useState","delegateEvent","useEnsuredRef","useIsomorphicLayoutEffect","BELOW_CENTER_ANCHOR","getFixedPosition","isWithinViewport","noop","undefined","useFixedPositioning","options","style","propStyle","nodeRef","fixedTo","disabled","onEnter","onEntering","onEntered","onExited","anchor","disableSwapping","disableVHBounds","initialX","initialY","preventOverlap","transformOrigin","vhMargin","vwMargin","width","xMargin","yMargin","getFixedPositionOptions","onScroll","onResize","active","setActive","ref","refHandler","optionsRef","current","setStyle","container","element","updateStyle","hidden","resizeCallback","event","scrollCallback","fixedElement","fixedToElement","visible","resizeHandler","globalThis","window","scrollHandler","passive","add","remove","callbacks","appearing","transitionOptions"],"mappings":"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"}
+{"version":3,"sources":["../../src/positioning/useFixedPositioning.ts"],"sourcesContent":["\"use client\";\n\nimport {\n  type CSSProperties,\n  type Ref,\n  type RefCallback,\n  type RefObject,\n  useCallback,\n  useEffect,\n  useRef,\n  useState,\n} from \"react\";\n\nimport { delegateEvent } from \"../delegateEvent.js\";\nimport { type TransitionCallbacks } from \"../transition/types.js\";\nimport { useEnsuredRef } from \"../useEnsuredRef.js\";\nimport { useIsomorphicLayoutEffect } from \"../useIsomorphicLayoutEffect.js\";\nimport { BELOW_CENTER_ANCHOR } from \"./constants.js\";\nimport { getFixedPosition } from \"./getFixedPosition.js\";\nimport {\n  type CalculateFixedPositionOptions,\n  // eslint-disable-next-line @typescript-eslint/no-unused-vars\n  type FixedPositionStyle,\n} from \"./types.js\";\nimport { isWithinViewport } from \"./utils.js\";\n\nconst noop = (): undefined => undefined;\n\n/**\n * @since 4.0.0\n */\nexport type FixedPositioningTransitionCallbacks = Pick<\n  TransitionCallbacks,\n  \"onEnter\" | \"onEntering\" | \"onEntered\" | \"onExited\"\n>;\n\n/**\n * This options should be passed to the {@link useCSSTransition} for the styling\n * and positioning to work correctly.\n *\n * @typeParam E - An HTMLElement type used for the ref required for the\n * transition.\n * @since 4.0.0\n */\nexport interface FixedPositioningTransitionOptions<\n  E extends HTMLElement,\n> extends FixedPositioningTransitionCallbacks {\n  /** {@inheritDoc TransitionOptions.nodeRef} */\n  nodeRef?: Ref<E>;\n}\n\n/**\n * @typeParam FixedToElement - An HTMLElement type for the static element.\n * @typeParam FixedElement - An HTMLElement type for the fixed element.\n * @since 4.0.0\n */\nexport interface FixedPositioningScrollData<\n  FixedToElement extends HTMLElement,\n  FixedElement extends HTMLElement,\n> {\n  fixedElement: FixedElement;\n  fixedToElement: FixedToElement;\n\n  /**\n   * Boolean if the {@link fixedToElement} is visible within the viewport.\n   */\n  visible: boolean;\n}\n\n/**\n * This function is called when the page is scrolled while the fixed element is\n * visible. This is generally used to reposition the fixed element or hide it if\n * it is no longer visible within the viewport.\n *\n * @typeParam FixedToElement - An HTMLElement type for the static element.\n * @typeParam FixedElement - An HTMLElement type for the fixed element.\n * @param event - The scroll event\n * @param data - The {@link FixedPositioningScrollData} that can be used for\n * custom scroll behavior.\n * @since 4.0.0\n */\nexport type TransitionScrollCallback<\n  FixedToElement extends HTMLElement,\n  FixedElement extends HTMLElement,\n> = (\n  event: Event,\n  data: Readonly<FixedPositioningScrollData<FixedToElement, FixedElement>>\n) => void;\n\n/**\n * @typeParam FixedToElement - An HTMLElement type for the static element.\n * @typeParam FixedElement - An HTMLElement type for the fixed element.\n * @since 4.0.0\n */\nexport interface FixedPositioningOptions<\n  FixedToElement extends HTMLElement,\n  FixedElement extends HTMLElement,\n>\n  extends\n    FixedPositioningTransitionOptions<FixedElement>,\n    CalculateFixedPositionOptions {\n  /**\n   * An optional style that will be merged with the fixed positioning required\n   * styles.\n   *\n   * @see {@link FixedPositionStyle}\n   */\n  style?: CSSProperties;\n\n  /**\n   * A ref pointing to an element that another element should be fixed to. This\n   * **must** be provided for the positioning to work.\n   */\n  fixedTo: RefObject<FixedToElement | null>;\n\n  /**\n   * An optional function that can be used to override positioning options if\n   * some options require the element to be in the DOM for specific\n   * calculations.\n   */\n  getFixedPositionOptions?: () => CalculateFixedPositionOptions;\n\n  /**\n   * An optional function to call if the page resizes while the `FixedElement`\n   * is visible.\n   */\n  onResize?: EventListener;\n  /** @see {@link TransitionScrollCallback} */\n  onScroll?: TransitionScrollCallback<FixedToElement, FixedElement>;\n\n  /**\n   * Set this to `true` to disable the fixed positioning behavior so it can be\n   * customized within CSS or manually instead. This was added mostly to just\n   * support rendering menus inline with other content (like autocompletes\n   * within a dialog).\n   *\n   * @defaultValue `false`\n   * @since 6.0.0\n   */\n  disabled?: boolean;\n}\n\n/**\n * @typeParam E - An HTMLElement type for the fixed element.\n * @since 4.0.0\n * @since 6.0.0 Renamed from `FixedPositioningHookReturnValue` to\n * `FixedPositioningImplementation` to match naming conventions.\n */\nexport interface FixedPositioningImplementation<E extends HTMLElement> {\n  /**\n   * A ref that should be passed to a component for the fixed positioning\n   * behavior to work correctly.\n   *\n   * This should really only be used if the {@link TransitionOptions} is not\n   * being used.\n   */\n  ref: RefCallback<E>;\n\n  /**\n   * This is the {@link FixedPositionStyle} merged with the\n   * {@link FixedPositioningOptions.style}. This will only return `undefined`\n   * when {@link FixedPositioningOptions.disabled} is `true` and no `style` was\n   * provided.\n   */\n  style: CSSProperties | undefined;\n\n  /**\n   * This should really only be used if the {@link transitionOptions} is not\n   * being used.\n   */\n  callbacks: Readonly<Required<FixedPositioningTransitionCallbacks>>;\n\n  /**\n   * A function that can be called to update the style for the fixed element.\n   */\n  updateStyle: () => void;\n\n  /** {@inheritDoc FixedPositioningTransitionOptions} */\n  transitionOptions: Readonly<Required<FixedPositioningTransitionOptions<E>>>;\n}\n\n/**\n * This hook is used to attach a temporary (fixed) element to another element\n * within the page. In other words, this is a way to have an element with\n * `position: fixed` as if it were `position: absolute` to a parent element that\n * had `position: relative`.\n *\n * @example Simple Example\n * ```tsx\n * \"use client\";\n *\n * import { Button } from \"@react-md/core/button/Button\";\n * import { useFixedPositioning } from \"@react-md/core/positioning/useFixedPositioning\";\n * import { useCSSTransition } from \"@react-md/core/transition/useCSSTransition\";\n * import { type ReactElement, useRef, useState } from \"react\";\n *\n * function Example(): ReactElement {\n *   const fixedTo = useRef<HTMLButtonElement>(null);\n *   const [transitionIn, setTransitionIn] = useState(false);\n *   const { style, transitionOptions } = useFixedPositioning({\n *     fixedTo,\n *   });\n *   const { elementProps, rendered } = useCSSTransition({\n *     ...transitionOptions,\n *     transitionIn,\n *     temporary: true,\n *     timeout: {\n *       enter: 200,\n *       exit: 150,\n *     },\n *     classNames: {\n *       enter: \"enter\",\n *       enterActive: \"enter--active\",\n *       exit: \"exit\",\n *       exitActive: \"exit--active\",\n *     },\n *   });\n *\n *   return (\n *     <>\n *       <Button ref={fixedTo} onClick={() => setTransitionIn(!transitionIn)}>\n *         Toggle\n *       </Button>\n *       {rendered && (\n *         <div {...elementProps} style={style}>\n *           Fixed Temporary Element\n *         </div>\n *       )}\n *     </>\n *   );\n * }\n * ```\n *\n * @see {@link https://react-md.dev/hooks/use-fixed-positioning | useFixedPositioning Demos}\n * @typeParam FixedToElement - An HTMLElement type for the static element.\n * @typeParam FixedElement - An HTMLElement type for the fixed element.\n * @since 4.0.0\n */\nexport function useFixedPositioning<\n  FixedToElement extends HTMLElement,\n  FixedElement extends HTMLElement,\n>(\n  options: FixedPositioningOptions<FixedToElement, FixedElement>\n): FixedPositioningImplementation<FixedElement> {\n  const {\n    style: propStyle,\n    nodeRef,\n    fixedTo,\n    disabled,\n    onEnter = noop,\n    onEntering = noop,\n    onEntered = noop,\n    onExited = noop,\n    anchor = BELOW_CENTER_ANCHOR,\n    disableSwapping,\n    disableVHBounds,\n    initialX,\n    initialY,\n    preventOverlap,\n    transformOrigin,\n    vhMargin,\n    vwMargin,\n    width,\n    xMargin,\n    yMargin,\n    getFixedPositionOptions = noop,\n    onScroll,\n    onResize = noop,\n  } = options;\n\n  const [active, setActive] = useState(false);\n  const [ref, refHandler] = useEnsuredRef(nodeRef);\n  const optionsRef = useRef({\n    ref,\n    fixedTo,\n    anchor,\n    disableSwapping,\n    disableVHBounds,\n    preventOverlap,\n    transformOrigin,\n    vhMargin,\n    vwMargin,\n    width,\n    xMargin,\n    yMargin,\n    getFixedPositionOptions,\n  } as const);\n  useIsomorphicLayoutEffect(() => {\n    optionsRef.current = {\n      ref,\n      fixedTo,\n      anchor,\n      disableSwapping,\n      disableVHBounds,\n      preventOverlap,\n      transformOrigin,\n      vhMargin,\n      vwMargin,\n      width,\n      xMargin,\n      yMargin,\n      getFixedPositionOptions,\n    };\n  }, [\n    ref,\n    fixedTo,\n    anchor,\n    disableSwapping,\n    disableVHBounds,\n    preventOverlap,\n    transformOrigin,\n    vhMargin,\n    vwMargin,\n    width,\n    xMargin,\n    yMargin,\n    getFixedPositionOptions,\n  ]);\n  const [style, setStyle] = useState<CSSProperties | undefined>(\n    () =>\n      getFixedPosition({\n        container: ref.current,\n        element: fixedTo.current,\n        anchor,\n        disableSwapping,\n        disableVHBounds,\n        initialX,\n        initialY,\n        preventOverlap,\n        transformOrigin,\n        vhMargin,\n        vwMargin,\n        width,\n        xMargin,\n        yMargin,\n        ...getFixedPositionOptions(),\n      }).style\n  );\n\n  const updateStyle = useCallback(() => {\n    if (disabled) {\n      return;\n    }\n\n    const {\n      ref,\n      fixedTo,\n      anchor,\n      disableSwapping,\n      disableVHBounds,\n      preventOverlap,\n      transformOrigin,\n      vhMargin,\n      vwMargin,\n      width,\n      xMargin,\n      yMargin,\n      getFixedPositionOptions,\n    } = optionsRef.current;\n    const element = ref.current;\n    const container = fixedTo.current;\n    const { style } = getFixedPosition({\n      container,\n      element,\n      anchor,\n      disableSwapping,\n      disableVHBounds,\n      initialX,\n      initialY,\n      preventOverlap,\n      transformOrigin,\n      vhMargin,\n      vwMargin,\n      width,\n      xMargin,\n      yMargin,\n      ...getFixedPositionOptions(),\n    });\n\n    setStyle(style);\n    setActive(!!element && !element.hidden);\n\n    // Only changing the initialX, initialY, or disabled should cause the\n    // useEffect below to trigger, which is why everything else is set in a ref.\n  }, [disabled, initialX, initialY]);\n\n  useEffect(() => {\n    if (!active || disabled) {\n      return;\n    }\n\n    const resizeCallback = (event: Event): void => {\n      onResize(event);\n      updateStyle();\n    };\n    const scrollCallback = (event: Event): void => {\n      const fixedElement = ref.current;\n      const fixedToElement = fixedTo.current;\n      if (onScroll && fixedElement && fixedToElement) {\n        onScroll(event, {\n          visible: isWithinViewport({ fixedElement, fixedToElement }),\n          fixedElement,\n          fixedToElement,\n        });\n      }\n\n      updateStyle();\n    };\n\n    const resizeHandler = delegateEvent(\"resize\", globalThis.window, true);\n    const scrollHandler = delegateEvent(\"scroll\", globalThis.window, true, {\n      passive: true,\n    });\n    resizeHandler.add(resizeCallback);\n    scrollHandler.add(scrollCallback);\n    return () => {\n      resizeHandler.remove(resizeCallback);\n      scrollHandler.remove(scrollCallback);\n    };\n  }, [active, disabled, fixedTo, onResize, onScroll, ref, updateStyle]);\n\n  const callbacks: Required<FixedPositioningTransitionCallbacks> = {\n    onEnter(appearing) {\n      onEnter(appearing);\n      updateStyle();\n    },\n    onEntering(appearing) {\n      onEntering(appearing);\n      updateStyle();\n    },\n    onEntered(appearing) {\n      onEntered(appearing);\n      updateStyle();\n    },\n    onExited() {\n      onExited();\n      setActive(false);\n    },\n  };\n\n  return {\n    ref: refHandler,\n    style: disabled ? propStyle : { ...style, ...propStyle },\n    callbacks,\n    updateStyle,\n    transitionOptions: {\n      ...callbacks,\n      nodeRef: refHandler,\n    },\n  };\n}\n"],"names":["useCallback","useEffect","useRef","useState","delegateEvent","useEnsuredRef","useIsomorphicLayoutEffect","BELOW_CENTER_ANCHOR","getFixedPosition","isWithinViewport","noop","undefined","useFixedPositioning","options","style","propStyle","nodeRef","fixedTo","disabled","onEnter","onEntering","onEntered","onExited","anchor","disableSwapping","disableVHBounds","initialX","initialY","preventOverlap","transformOrigin","vhMargin","vwMargin","width","xMargin","yMargin","getFixedPositionOptions","onScroll","onResize","active","setActive","ref","refHandler","optionsRef","current","setStyle","container","element","updateStyle","hidden","resizeCallback","event","scrollCallback","fixedElement","fixedToElement","visible","resizeHandler","globalThis","window","scrollHandler","passive","add","remove","callbacks","appearing","transitionOptions"],"mappings":"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"}

package/dist/progress/CircularProgress.d.ts

@@ -1,4 +1,4 @@
-import { type CSSProperties, type HTMLAttributes } from "react";
+import { type CSSProperties, type HTMLAttributes, type ReactElement } from "react";
 import { type LabelRequiredForA11y } from "../types.js";
 import { type CircularProgressClassNameOptions } from "./circularProgressStyles.js";
 import { type ProgressProps } from "./types.js";
@@ -101,4 +101,4 @@ export interface CircularProgressProps extends Omit<HTMLAttributes<HTMLSpanEleme
  * @since 6.0.0 Updated the determinate circular progress to no longer
  * rotate while increasing the value and require a label for accessibility.
  */
-export declare const CircularProgress: import("react").ForwardRefExoticComponent<LabelRequiredForA11y<CircularProgressProps> & import("react").RefAttributes<HTMLSpanElement>>;
+export declare function CircularProgress(props: LabelRequiredForA11y<CircularProgressProps>): ReactElement;

package/dist/progress/CircularProgress.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { forwardRef, useMemo } from "react";
+import { useMemo } from "react";
 import { useEnsuredId } from "../useEnsuredId.js";
 import { getPercentage } from "../utils/getPercentage.js";
 import { circularProgress, circularProgressCircle, circularProgressSvg } from "./circularProgressStyles.js";
@@ -30,8 +30,8 @@ import { circularProgress, circularProgressCircle, circularProgressSvg } from ".
  * @see {@link https://react-md.dev/components/progress#circular-progress | Progress Demos}
  * @since 6.0.0 Updated the determinate circular progress to no longer
  * rotate while increasing the value and require a label for accessibility.
- */ export const CircularProgress = /*#__PURE__*/ forwardRef(function CircularProgress(props, ref) {
-    const { id: propId, className, svgStyle, svgClassName, circleStyle: propCircleStyle, circleClassName, value, min = 0, max = 100, radius = 30, center = 33, viewBox = "0 0 66 66", theme, dense, dashoffset = 187, disableShrink, disableCentered, disableTransition, ...remaining } = props;
+ */ export function CircularProgress(props) {
+    const { ref, id: propId, className, svgStyle, svgClassName, circleStyle: propCircleStyle, circleClassName, value, min = 0, max = 100, radius = 30, center = 33, viewBox = "0 0 66 66", theme, dense, dashoffset = 187, disableShrink, disableCentered, disableTransition, ...remaining } = props;
     const id = useEnsuredId(propId, "circular-progress");
     let progress;
     if (typeof value === "number") {
@@ -92,6 +92,6 @@ import { circularProgress, circularProgressCircle, circularProgressSvg } from ".
             })
         })
     });
-});
+}
 
 //# sourceMappingURL=CircularProgress.js.map

package/dist/progress/CircularProgress.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/progress/CircularProgress.tsx"],"sourcesContent":["import {\n  type CSSProperties,\n  type HTMLAttributes,\n  forwardRef,\n  useMemo,\n} from \"react\";\n\nimport { type LabelRequiredForA11y } from \"../types.js\";\nimport { useEnsuredId } from \"../useEnsuredId.js\";\nimport { getPercentage } from \"../utils/getPercentage.js\";\nimport {\n  type CircularProgressClassNameOptions,\n  circularProgress,\n  circularProgressCircle,\n  circularProgressSvg,\n} from \"./circularProgressStyles.js\";\nimport { type ProgressProps } from \"./types.js\";\n\n/**\n * @since 6.0.0 Added the `disableShrink` prop.\n * @since 6.0.0 Renamed `small` to `dense`.\n * @since 6.0.0 Renamed `centered` to `disableCentered`.\n * @since 6.0.0 Removed the `maxRotation` prop since the determinate state no\n * longer rotates while increasing value.\n */\nexport interface CircularProgressProps\n  extends\n    Omit<HTMLAttributes<HTMLSpanElement>, \"id\">,\n    ProgressProps,\n    CircularProgressClassNameOptions {\n  /**\n   * An optional style to apply to the svg within the circular progress. The\n   * values of this style object will be merged with the current determinate\n   * style (if it exists).\n   */\n  svgStyle?: CSSProperties;\n\n  /**\n   * An optional className to apply to the svg within the circular progress.\n   */\n  svgClassName?: string;\n\n  /**\n   * An optional style to apply to the circle within the circular progress. The\n   * values of this style object will be merged with the current determinate\n   * style (if it exists).\n   */\n  circleStyle?: CSSProperties;\n\n  /**\n   * An optional className to apply to the circle within the circular progress.\n   */\n  circleClassName?: string;\n\n  /**\n   * The radius for the circle. It is generally recommended to have the radius\n   * be 1/2 of the viewbox and minus a few more pixels so that there is some\n   * surrounding padding. You probably shouldn't really be changing this prop\n   * though.\n   *\n   * @defaultValue `30`\n   */\n  radius?: number;\n\n  /**\n   * The center point for the circle. This should be half of the `viewBox` prop\n   * 99% of the time and probably won't be changed.\n   *\n   * @defaultValue `33`\n   */\n  center?: number;\n\n  /**\n   * The viewbox for the child svg. I wouldn't recommend changing this value as\n   * you will also need to update the `dashoffset` in both Sass and this prop to\n   * get the animation to look nice again.\n   *\n   * @defaultValue `0 0 66 66`\n   */\n  viewBox?: string;\n\n  /**\n   * The `stroke-dashoffset` for the circle within the SVG. You probably won't\n   * be changing this value that much as it should match the\n   * `$rmd-progress-circle-dashoffset` Sass variable. This is really just used\n   * to help to create the determinate progress animation.\n   *\n   * @defaultValue `187`\n   */\n  dashoffset?: number;\n\n  /**\n   * Set this to `true` to update the indeterminate behavior to only rotate\n   * which will increase performance during CPU-intensive tasks or when many\n   * loading spinners are displayed at once on the page.\n   *\n   * @defaultValue `false`\n   * @since 6.0.0\n   */\n  disableShrink?: boolean;\n}\n\n/**\n * @example Indeterminate Example\n * ```tsx\n * import { CircularProgress } from \"@react-md/core/progress/CircularProgress\":\n * import { type ReactElement } from \"react\";\n *\n * function Example(): ReactElement {\n *   return <CircularProgress aria-label=\"Loading\" />;\n * }\n * ```\n *\n * @example Determinate Example\n * ```tsx\n * import { CircularProgress } from \"@react-md/core/progress/CircularProgress\":\n * import { useState, type ReactElement } from \"react\";\n *\n * function Example(): ReactElement {\n *   // a number from 0 - 100\n *   const [progress, setProgress] = useState(0);\n *\n *   return <CircularProgress aria-label=\"File upload\" value={progress} />;\n * }\n * ```\n *\n * @see {@link https://react-md.dev/components/progress#circular-progress | Progress Demos}\n * @since 6.0.0 Updated the determinate circular progress to no longer\n * rotate while increasing the value and require a label for accessibility.\n */\nexport const CircularProgress = forwardRef<\n  HTMLSpanElement,\n  LabelRequiredForA11y<CircularProgressProps>\n>(function CircularProgress(props, ref) {\n  const {\n    id: propId,\n    className,\n    svgStyle,\n    svgClassName,\n    circleStyle: propCircleStyle,\n    circleClassName,\n    value,\n    min = 0,\n    max = 100,\n    radius = 30,\n    center = 33,\n    viewBox = \"0 0 66 66\",\n    theme,\n    dense,\n    dashoffset = 187,\n    disableShrink,\n    disableCentered,\n    disableTransition,\n    ...remaining\n  } = props;\n\n  const id = useEnsuredId(propId, \"circular-progress\");\n  let progress: number | undefined;\n  if (typeof value === \"number\") {\n    progress = getPercentage({ min, max, value, validate: true });\n  }\n\n  const circleStyle = useMemo(() => {\n    if (typeof progress !== \"number\") {\n      return propCircleStyle;\n    }\n\n    return {\n      ...propCircleStyle,\n      strokeDashoffset: dashoffset - dashoffset * progress,\n    };\n  }, [progress, propCircleStyle, dashoffset]);\n\n  const indeterminate = typeof progress !== \"number\";\n  return (\n    <span\n      {...remaining}\n      id={id}\n      ref={ref}\n      role=\"progressbar\"\n      aria-valuemin={min}\n      aria-valuemax={max}\n      aria-valuenow={value}\n      className={circularProgress({\n        theme,\n        dense,\n        disableCentered,\n        className,\n      })}\n    >\n      <svg\n        style={svgStyle}\n        className={circularProgressSvg({\n          className: svgClassName,\n          indeterminate,\n          disableShrink,\n        })}\n        viewBox={viewBox}\n      >\n        <circle\n          style={circleStyle}\n          className={circularProgressCircle({\n            className: circleClassName,\n            indeterminate,\n            disableShrink,\n            disableTransition,\n          })}\n          r={radius}\n          cx={center}\n          cy={center}\n        />\n      </svg>\n    </span>\n  );\n});\n"],"names":["forwardRef","useMemo","useEnsuredId","getPercentage","circularProgress","circularProgressCircle","circularProgressSvg","CircularProgress","props","ref","id","propId","className","svgStyle","svgClassName","circleStyle","propCircleStyle","circleClassName","value","min","max","radius","center","viewBox","theme","dense","dashoffset","disableShrink","disableCentered","disableTransition","remaining","progress","validate","strokeDashoffset","indeterminate","span","role","aria-valuemin","aria-valuemax","aria-valuenow","svg","style","circle","r","cx","cy"],"mappings":";AAAA,SAGEA,UAAU,EACVC,OAAO,QACF,QAAQ;AAGf,SAASC,YAAY,QAAQ,qBAAqB;AAClD,SAASC,aAAa,QAAQ,4BAA4B;AAC1D,SAEEC,gBAAgB,EAChBC,sBAAsB,EACtBC,mBAAmB,QACd,8BAA8B;AAuFrC;;;;;;;;;;;;;;;;;;;;;;;;;;;CA2BC,GACD,OAAO,MAAMC,iCAAmBP,WAG9B,SAASO,iBAAiBC,KAAK,EAAEC,GAAG;IACpC,MAAM,EACJC,IAAIC,MAAM,EACVC,SAAS,EACTC,QAAQ,EACRC,YAAY,EACZC,aAAaC,eAAe,EAC5BC,eAAe,EACfC,KAAK,EACLC,MAAM,CAAC,EACPC,MAAM,GAAG,EACTC,SAAS,EAAE,EACXC,SAAS,EAAE,EACXC,UAAU,WAAW,EACrBC,KAAK,EACLC,KAAK,EACLC,aAAa,GAAG,EAChBC,aAAa,EACbC,eAAe,EACfC,iBAAiB,EACjB,GAAGC,WACJ,GAAGtB;IAEJ,MAAME,KAAKR,aAAaS,QAAQ;IAChC,IAAIoB;IACJ,IAAI,OAAOb,UAAU,UAAU;QAC7Ba,WAAW5B,cAAc;YAAEgB;YAAKC;YAAKF;YAAOc,UAAU;QAAK;IAC7D;IAEA,MAAMjB,cAAcd,QAAQ;QAC1B,IAAI,OAAO8B,aAAa,UAAU;YAChC,OAAOf;QACT;QAEA,OAAO;YACL,GAAGA,eAAe;YAClBiB,kBAAkBP,aAAaA,aAAaK;QAC9C;IACF,GAAG;QAACA;QAAUf;QAAiBU;KAAW;IAE1C,MAAMQ,gBAAgB,OAAOH,aAAa;IAC1C,qBACE,KAACI;QACE,GAAGL,SAAS;QACbpB,IAAIA;QACJD,KAAKA;QACL2B,MAAK;QACLC,iBAAelB;QACfmB,iBAAelB;QACfmB,iBAAerB;QACfN,WAAWR,iBAAiB;YAC1BoB;YACAC;YACAG;YACAhB;QACF;kBAEA,cAAA,KAAC4B;YACCC,OAAO5B;YACPD,WAAWN,oBAAoB;gBAC7BM,WAAWE;gBACXoB;gBACAP;YACF;YACAJ,SAASA;sBAET,cAAA,KAACmB;gBACCD,OAAO1B;gBACPH,WAAWP,uBAAuB;oBAChCO,WAAWK;oBACXiB;oBACAP;oBACAE;gBACF;gBACAc,GAAGtB;gBACHuB,IAAItB;gBACJuB,IAAIvB;;;;AAKd,GAAG"}
+{"version":3,"sources":["../../src/progress/CircularProgress.tsx"],"sourcesContent":["import {\n  type CSSProperties,\n  type HTMLAttributes,\n  type ReactElement,\n  useMemo,\n} from \"react\";\n\nimport { type LabelRequiredForA11y } from \"../types.js\";\nimport { useEnsuredId } from \"../useEnsuredId.js\";\nimport { getPercentage } from \"../utils/getPercentage.js\";\nimport {\n  type CircularProgressClassNameOptions,\n  circularProgress,\n  circularProgressCircle,\n  circularProgressSvg,\n} from \"./circularProgressStyles.js\";\nimport { type ProgressProps } from \"./types.js\";\n\n/**\n * @since 6.0.0 Added the `disableShrink` prop.\n * @since 6.0.0 Renamed `small` to `dense`.\n * @since 6.0.0 Renamed `centered` to `disableCentered`.\n * @since 6.0.0 Removed the `maxRotation` prop since the determinate state no\n * longer rotates while increasing value.\n */\nexport interface CircularProgressProps\n  extends\n    Omit<HTMLAttributes<HTMLSpanElement>, \"id\">,\n    ProgressProps,\n    CircularProgressClassNameOptions {\n  /**\n   * An optional style to apply to the svg within the circular progress. The\n   * values of this style object will be merged with the current determinate\n   * style (if it exists).\n   */\n  svgStyle?: CSSProperties;\n\n  /**\n   * An optional className to apply to the svg within the circular progress.\n   */\n  svgClassName?: string;\n\n  /**\n   * An optional style to apply to the circle within the circular progress. The\n   * values of this style object will be merged with the current determinate\n   * style (if it exists).\n   */\n  circleStyle?: CSSProperties;\n\n  /**\n   * An optional className to apply to the circle within the circular progress.\n   */\n  circleClassName?: string;\n\n  /**\n   * The radius for the circle. It is generally recommended to have the radius\n   * be 1/2 of the viewbox and minus a few more pixels so that there is some\n   * surrounding padding. You probably shouldn't really be changing this prop\n   * though.\n   *\n   * @defaultValue `30`\n   */\n  radius?: number;\n\n  /**\n   * The center point for the circle. This should be half of the `viewBox` prop\n   * 99% of the time and probably won't be changed.\n   *\n   * @defaultValue `33`\n   */\n  center?: number;\n\n  /**\n   * The viewbox for the child svg. I wouldn't recommend changing this value as\n   * you will also need to update the `dashoffset` in both Sass and this prop to\n   * get the animation to look nice again.\n   *\n   * @defaultValue `0 0 66 66`\n   */\n  viewBox?: string;\n\n  /**\n   * The `stroke-dashoffset` for the circle within the SVG. You probably won't\n   * be changing this value that much as it should match the\n   * `$rmd-progress-circle-dashoffset` Sass variable. This is really just used\n   * to help to create the determinate progress animation.\n   *\n   * @defaultValue `187`\n   */\n  dashoffset?: number;\n\n  /**\n   * Set this to `true` to update the indeterminate behavior to only rotate\n   * which will increase performance during CPU-intensive tasks or when many\n   * loading spinners are displayed at once on the page.\n   *\n   * @defaultValue `false`\n   * @since 6.0.0\n   */\n  disableShrink?: boolean;\n}\n\n/**\n * @example Indeterminate Example\n * ```tsx\n * import { CircularProgress } from \"@react-md/core/progress/CircularProgress\":\n * import { type ReactElement } from \"react\";\n *\n * function Example(): ReactElement {\n *   return <CircularProgress aria-label=\"Loading\" />;\n * }\n * ```\n *\n * @example Determinate Example\n * ```tsx\n * import { CircularProgress } from \"@react-md/core/progress/CircularProgress\":\n * import { useState, type ReactElement } from \"react\";\n *\n * function Example(): ReactElement {\n *   // a number from 0 - 100\n *   const [progress, setProgress] = useState(0);\n *\n *   return <CircularProgress aria-label=\"File upload\" value={progress} />;\n * }\n * ```\n *\n * @see {@link https://react-md.dev/components/progress#circular-progress | Progress Demos}\n * @since 6.0.0 Updated the determinate circular progress to no longer\n * rotate while increasing the value and require a label for accessibility.\n */\nexport function CircularProgress(\n  props: LabelRequiredForA11y<CircularProgressProps>\n): ReactElement {\n  const {\n    ref,\n    id: propId,\n    className,\n    svgStyle,\n    svgClassName,\n    circleStyle: propCircleStyle,\n    circleClassName,\n    value,\n    min = 0,\n    max = 100,\n    radius = 30,\n    center = 33,\n    viewBox = \"0 0 66 66\",\n    theme,\n    dense,\n    dashoffset = 187,\n    disableShrink,\n    disableCentered,\n    disableTransition,\n    ...remaining\n  } = props;\n\n  const id = useEnsuredId(propId, \"circular-progress\");\n  let progress: number | undefined;\n  if (typeof value === \"number\") {\n    progress = getPercentage({ min, max, value, validate: true });\n  }\n\n  const circleStyle = useMemo(() => {\n    if (typeof progress !== \"number\") {\n      return propCircleStyle;\n    }\n\n    return {\n      ...propCircleStyle,\n      strokeDashoffset: dashoffset - dashoffset * progress,\n    };\n  }, [progress, propCircleStyle, dashoffset]);\n\n  const indeterminate = typeof progress !== \"number\";\n  return (\n    <span\n      {...remaining}\n      id={id}\n      ref={ref}\n      role=\"progressbar\"\n      aria-valuemin={min}\n      aria-valuemax={max}\n      aria-valuenow={value}\n      className={circularProgress({\n        theme,\n        dense,\n        disableCentered,\n        className,\n      })}\n    >\n      <svg\n        style={svgStyle}\n        className={circularProgressSvg({\n          className: svgClassName,\n          indeterminate,\n          disableShrink,\n        })}\n        viewBox={viewBox}\n      >\n        <circle\n          style={circleStyle}\n          className={circularProgressCircle({\n            className: circleClassName,\n            indeterminate,\n            disableShrink,\n            disableTransition,\n          })}\n          r={radius}\n          cx={center}\n          cy={center}\n        />\n      </svg>\n    </span>\n  );\n}\n"],"names":["useMemo","useEnsuredId","getPercentage","circularProgress","circularProgressCircle","circularProgressSvg","CircularProgress","props","ref","id","propId","className","svgStyle","svgClassName","circleStyle","propCircleStyle","circleClassName","value","min","max","radius","center","viewBox","theme","dense","dashoffset","disableShrink","disableCentered","disableTransition","remaining","progress","validate","strokeDashoffset","indeterminate","span","role","aria-valuemin","aria-valuemax","aria-valuenow","svg","style","circle","r","cx","cy"],"mappings":";AAAA,SAIEA,OAAO,QACF,QAAQ;AAGf,SAASC,YAAY,QAAQ,qBAAqB;AAClD,SAASC,aAAa,QAAQ,4BAA4B;AAC1D,SAEEC,gBAAgB,EAChBC,sBAAsB,EACtBC,mBAAmB,QACd,8BAA8B;AAuFrC;;;;;;;;;;;;;;;;;;;;;;;;;;;CA2BC,GACD,OAAO,SAASC,iBACdC,KAAkD;IAElD,MAAM,EACJC,GAAG,EACHC,IAAIC,MAAM,EACVC,SAAS,EACTC,QAAQ,EACRC,YAAY,EACZC,aAAaC,eAAe,EAC5BC,eAAe,EACfC,KAAK,EACLC,MAAM,CAAC,EACPC,MAAM,GAAG,EACTC,SAAS,EAAE,EACXC,SAAS,EAAE,EACXC,UAAU,WAAW,EACrBC,KAAK,EACLC,KAAK,EACLC,aAAa,GAAG,EAChBC,aAAa,EACbC,eAAe,EACfC,iBAAiB,EACjB,GAAGC,WACJ,GAAGtB;IAEJ,MAAME,KAAKR,aAAaS,QAAQ;IAChC,IAAIoB;IACJ,IAAI,OAAOb,UAAU,UAAU;QAC7Ba,WAAW5B,cAAc;YAAEgB;YAAKC;YAAKF;YAAOc,UAAU;QAAK;IAC7D;IAEA,MAAMjB,cAAcd,QAAQ;QAC1B,IAAI,OAAO8B,aAAa,UAAU;YAChC,OAAOf;QACT;QAEA,OAAO;YACL,GAAGA,eAAe;YAClBiB,kBAAkBP,aAAaA,aAAaK;QAC9C;IACF,GAAG;QAACA;QAAUf;QAAiBU;KAAW;IAE1C,MAAMQ,gBAAgB,OAAOH,aAAa;IAC1C,qBACE,KAACI;QACE,GAAGL,SAAS;QACbpB,IAAIA;QACJD,KAAKA;QACL2B,MAAK;QACLC,iBAAelB;QACfmB,iBAAelB;QACfmB,iBAAerB;QACfN,WAAWR,iBAAiB;YAC1BoB;YACAC;YACAG;YACAhB;QACF;kBAEA,cAAA,KAAC4B;YACCC,OAAO5B;YACPD,WAAWN,oBAAoB;gBAC7BM,WAAWE;gBACXoB;gBACAP;YACF;YACAJ,SAASA;sBAET,cAAA,KAACmB;gBACCD,OAAO1B;gBACPH,WAAWP,uBAAuB;oBAChCO,WAAWK;oBACXiB;oBACAP;oBACAE;gBACF;gBACAc,GAAGtB;gBACHuB,IAAItB;gBACJuB,IAAIvB;;;;AAKd"}

package/dist/progress/LinearProgress.d.ts

@@ -1,4 +1,4 @@
-import { type CSSProperties, type HTMLAttributes } from "react";
+import { type CSSProperties, type HTMLAttributes, type ReactElement } from "react";
 import { type LabelRequiredForA11y, type PropsWithRef } from "../types.js";
 import { type BaseLinearProgressClassNameOptions } from "./linearProgressStyles.js";
 import { type ProgressProps } from "./types.js";
@@ -69,4 +69,4 @@ export interface LinearProgressProps extends Omit<HTMLAttributes<HTMLSpanElement
  * @since 6.0.0 Supports rendering as any of the theme colors and
  * requires a label for accessibility.
  */
-export declare const LinearProgress: import("react").ForwardRefExoticComponent<LabelRequiredForA11y<LinearProgressProps> & import("react").RefAttributes<HTMLSpanElement>>;
+export declare function LinearProgress(props: LabelRequiredForA11y<LinearProgressProps>): ReactElement;

package/dist/progress/LinearProgress.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { forwardRef, useMemo } from "react";
+import { useMemo } from "react";
 import { useEnsuredId } from "../useEnsuredId.js";
 import { getPercentage } from "../utils/getPercentage.js";
 import { linearProgress, linearProgressBar } from "./linearProgressStyles.js";
@@ -30,8 +30,8 @@ import { linearProgress, linearProgressBar } from "./linearProgressStyles.js";
  * @see {@link https://react-md.dev/components/progress#linear-progress | Progress Demos}
  * @since 6.0.0 Supports rendering as any of the theme colors and
  * requires a label for accessibility.
- */ export const LinearProgress = /*#__PURE__*/ forwardRef(function LinearProgress(props, ref) {
-    const { id: propId, style: propStyle, className, barStyle: propBarStyle, barClassName, barProps, min = 0, max = 100, value, reverse, theme, disableTransition, vertical, verticalHeight = 240, ...remaining } = props;
+ */ export function LinearProgress(props) {
+    const { ref, id: propId, style: propStyle, className, barStyle: propBarStyle, barClassName, barProps, min = 0, max = 100, value, reverse, theme, disableTransition, vertical, verticalHeight = 240, ...remaining } = props;
     const id = useEnsuredId(propId, "linear-progress");
     const style = useMemo(()=>{
         if (!vertical || verticalHeight === null) {
@@ -97,6 +97,6 @@ import { linearProgress, linearProgressBar } from "./linearProgressStyles.js";
             })
         })
     });
-});
+}
 
 //# sourceMappingURL=LinearProgress.js.map

package/dist/progress/LinearProgress.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/progress/LinearProgress.tsx"],"sourcesContent":["import {\n  type CSSProperties,\n  type HTMLAttributes,\n  forwardRef,\n  useMemo,\n} from \"react\";\n\nimport { type LabelRequiredForA11y, type PropsWithRef } from \"../types.js\";\nimport { useEnsuredId } from \"../useEnsuredId.js\";\nimport { getPercentage } from \"../utils/getPercentage.js\";\nimport {\n  type BaseLinearProgressClassNameOptions,\n  linearProgress,\n  linearProgressBar,\n} from \"./linearProgressStyles.js\";\nimport { type ProgressProps } from \"./types.js\";\n\n/**\n * @since 6.0.0 Added the `theme` prop\n * @since 6.3.1 extends BaseLinearProgressClassNameOptions for CSSProperties\n * module augmentation.\n */\nexport interface LinearProgressProps\n  extends\n    Omit<HTMLAttributes<HTMLSpanElement>, \"id\" | \"children\">,\n    BaseLinearProgressClassNameOptions,\n    ProgressProps {\n  /**\n   * An optional style to apply to the progress bar. This will be merged with\n   * the current width or height tracking the progress when a `value` is also\n   * provided.\n   */\n  barStyle?: CSSProperties;\n\n  /**\n   * An optional className to apply to the progress bar.\n   */\n  barClassName?: string;\n\n  /**\n   * @since 6.1.0\n   */\n  barProps?: PropsWithRef<HTMLAttributes<HTMLSpanElement>>;\n\n  /**\n   * Boolean if the progress should be reversed. This will change the progress\n   * direction from `left-to-right` to be `right-to-left`. If the current\n   * language is a rtl language and this prop is enabled, the direction will\n   * still be `left-to-right`.\n   *\n   * @defaultValue `false`\n   */\n  reverse?: boolean;\n\n  /**\n   * Since there isn't really a good way to have \"auto height\", you'll need to\n   * manually set the progress bar's height with this prop to some pixel value.\n   * If you'd prefer to set the height in Sass/css, set this value to `null`\n   * instead since this value would be passed down as a `height` inline style.\n   *\n   * @defaultValue `240`\n   */\n  verticalHeight?: number | null;\n}\n\n/**\n * @example Indeterminate Example\n * ```tsx\n * import { LinearProgress } from \"@react-md/core/progress/LinearProgress\";\n * import { type ReactElement } from \"react\";\n *\n * function Example(): ReactElement {\n *   return <LinearProgress aria-label=\"Loading\" />;\n * }\n * ```\n *\n * @example Determinate Example\n * ```tsx\n * import { LinearProgress } from \"@react-md/core/progress/LinearProgress\";\n * import { useState, type ReactElement } from \"react\";\n *\n * function Example(): ReactElement {\n *   // a number from 0 - 100\n *   const [progress, setProgress] = useState(0);\n *\n *   return <LinearProgress aria-label=\"File upload\" value={progress} />;\n * }\n * ```\n *\n * @see {@link https://react-md.dev/components/progress#linear-progress | Progress Demos}\n * @since 6.0.0 Supports rendering as any of the theme colors and\n * requires a label for accessibility.\n */\nexport const LinearProgress = forwardRef<\n  HTMLSpanElement,\n  LabelRequiredForA11y<LinearProgressProps>\n>(function LinearProgress(props, ref) {\n  const {\n    id: propId,\n    style: propStyle,\n    className,\n    barStyle: propBarStyle,\n    barClassName,\n    barProps,\n    min = 0,\n    max = 100,\n    value,\n    reverse,\n    theme,\n    disableTransition,\n    vertical,\n    verticalHeight = 240,\n    ...remaining\n  } = props;\n\n  const id = useEnsuredId(propId, \"linear-progress\");\n  const style = useMemo(() => {\n    if (!vertical || verticalHeight === null) {\n      return propStyle;\n    }\n\n    return {\n      ...propStyle,\n      height: verticalHeight,\n    };\n  }, [propStyle, vertical, verticalHeight]);\n\n  let progress: number | undefined;\n  if (typeof value === \"number\") {\n    progress = getPercentage({ min, max, value, validate: true });\n  }\n  const barStyle = useMemo(() => {\n    if (typeof progress !== \"number\") {\n      return propBarStyle;\n    }\n\n    const key = vertical ? \"height\" : \"width\";\n    return {\n      ...propBarStyle,\n      [key]: `${progress * 100}%`,\n    };\n  }, [progress, propBarStyle, vertical]);\n\n  const indeterminate = typeof progress !== \"number\";\n  return (\n    <span\n      {...remaining}\n      id={id}\n      ref={ref}\n      style={style}\n      role=\"progressbar\"\n      aria-valuemin={min}\n      aria-valuemax={max}\n      aria-valuenow={value}\n      className={linearProgress({\n        className,\n        theme,\n        vertical,\n        indeterminate,\n      })}\n    >\n      <span\n        {...barProps}\n        style={barStyle}\n        className={linearProgressBar({\n          className: barClassName,\n          reverse,\n          vertical,\n          indeterminate,\n          disableTransition,\n        })}\n      />\n    </span>\n  );\n});\n"],"names":["forwardRef","useMemo","useEnsuredId","getPercentage","linearProgress","linearProgressBar","LinearProgress","props","ref","id","propId","style","propStyle","className","barStyle","propBarStyle","barClassName","barProps","min","max","value","reverse","theme","disableTransition","vertical","verticalHeight","remaining","height","progress","validate","key","indeterminate","span","role","aria-valuemin","aria-valuemax","aria-valuenow"],"mappings":";AAAA,SAGEA,UAAU,EACVC,OAAO,QACF,QAAQ;AAGf,SAASC,YAAY,QAAQ,qBAAqB;AAClD,SAASC,aAAa,QAAQ,4BAA4B;AAC1D,SAEEC,cAAc,EACdC,iBAAiB,QACZ,4BAA4B;AAmDnC;;;;;;;;;;;;;;;;;;;;;;;;;;;CA2BC,GACD,OAAO,MAAMC,+BAAiBN,WAG5B,SAASM,eAAeC,KAAK,EAAEC,GAAG;IAClC,MAAM,EACJC,IAAIC,MAAM,EACVC,OAAOC,SAAS,EAChBC,SAAS,EACTC,UAAUC,YAAY,EACtBC,YAAY,EACZC,QAAQ,EACRC,MAAM,CAAC,EACPC,MAAM,GAAG,EACTC,KAAK,EACLC,OAAO,EACPC,KAAK,EACLC,iBAAiB,EACjBC,QAAQ,EACRC,iBAAiB,GAAG,EACpB,GAAGC,WACJ,GAAGnB;IAEJ,MAAME,KAAKP,aAAaQ,QAAQ;IAChC,MAAMC,QAAQV,QAAQ;QACpB,IAAI,CAACuB,YAAYC,mBAAmB,MAAM;YACxC,OAAOb;QACT;QAEA,OAAO;YACL,GAAGA,SAAS;YACZe,QAAQF;QACV;IACF,GAAG;QAACb;QAAWY;QAAUC;KAAe;IAExC,IAAIG;IACJ,IAAI,OAAOR,UAAU,UAAU;QAC7BQ,WAAWzB,cAAc;YAAEe;YAAKC;YAAKC;YAAOS,UAAU;QAAK;IAC7D;IACA,MAAMf,WAAWb,QAAQ;QACvB,IAAI,OAAO2B,aAAa,UAAU;YAChC,OAAOb;QACT;QAEA,MAAMe,MAAMN,WAAW,WAAW;QAClC,OAAO;YACL,GAAGT,YAAY;YACf,CAACe,IAAI,EAAE,GAAGF,WAAW,IAAI,CAAC,CAAC;QAC7B;IACF,GAAG;QAACA;QAAUb;QAAcS;KAAS;IAErC,MAAMO,gBAAgB,OAAOH,aAAa;IAC1C,qBACE,KAACI;QACE,GAAGN,SAAS;QACbjB,IAAIA;QACJD,KAAKA;QACLG,OAAOA;QACPsB,MAAK;QACLC,iBAAehB;QACfiB,iBAAehB;QACfiB,iBAAehB;QACfP,WAAWT,eAAe;YACxBS;YACAS;YACAE;YACAO;QACF;kBAEA,cAAA,KAACC;YACE,GAAGf,QAAQ;YACZN,OAAOG;YACPD,WAAWR,kBAAkB;gBAC3BQ,WAAWG;gBACXK;gBACAG;gBACAO;gBACAR;YACF;;;AAIR,GAAG"}
+{"version":3,"sources":["../../src/progress/LinearProgress.tsx"],"sourcesContent":["import {\n  type CSSProperties,\n  type HTMLAttributes,\n  type ReactElement,\n  useMemo,\n} from \"react\";\n\nimport { type LabelRequiredForA11y, type PropsWithRef } from \"../types.js\";\nimport { useEnsuredId } from \"../useEnsuredId.js\";\nimport { getPercentage } from \"../utils/getPercentage.js\";\nimport {\n  type BaseLinearProgressClassNameOptions,\n  linearProgress,\n  linearProgressBar,\n} from \"./linearProgressStyles.js\";\nimport { type ProgressProps } from \"./types.js\";\n\n/**\n * @since 6.0.0 Added the `theme` prop\n * @since 6.3.1 extends BaseLinearProgressClassNameOptions for CSSProperties\n * module augmentation.\n */\nexport interface LinearProgressProps\n  extends\n    Omit<HTMLAttributes<HTMLSpanElement>, \"id\" | \"children\">,\n    BaseLinearProgressClassNameOptions,\n    ProgressProps {\n  /**\n   * An optional style to apply to the progress bar. This will be merged with\n   * the current width or height tracking the progress when a `value` is also\n   * provided.\n   */\n  barStyle?: CSSProperties;\n\n  /**\n   * An optional className to apply to the progress bar.\n   */\n  barClassName?: string;\n\n  /**\n   * @since 6.1.0\n   */\n  barProps?: PropsWithRef<HTMLAttributes<HTMLSpanElement>>;\n\n  /**\n   * Boolean if the progress should be reversed. This will change the progress\n   * direction from `left-to-right` to be `right-to-left`. If the current\n   * language is a rtl language and this prop is enabled, the direction will\n   * still be `left-to-right`.\n   *\n   * @defaultValue `false`\n   */\n  reverse?: boolean;\n\n  /**\n   * Since there isn't really a good way to have \"auto height\", you'll need to\n   * manually set the progress bar's height with this prop to some pixel value.\n   * If you'd prefer to set the height in Sass/css, set this value to `null`\n   * instead since this value would be passed down as a `height` inline style.\n   *\n   * @defaultValue `240`\n   */\n  verticalHeight?: number | null;\n}\n\n/**\n * @example Indeterminate Example\n * ```tsx\n * import { LinearProgress } from \"@react-md/core/progress/LinearProgress\";\n * import { type ReactElement } from \"react\";\n *\n * function Example(): ReactElement {\n *   return <LinearProgress aria-label=\"Loading\" />;\n * }\n * ```\n *\n * @example Determinate Example\n * ```tsx\n * import { LinearProgress } from \"@react-md/core/progress/LinearProgress\";\n * import { useState, type ReactElement } from \"react\";\n *\n * function Example(): ReactElement {\n *   // a number from 0 - 100\n *   const [progress, setProgress] = useState(0);\n *\n *   return <LinearProgress aria-label=\"File upload\" value={progress} />;\n * }\n * ```\n *\n * @see {@link https://react-md.dev/components/progress#linear-progress | Progress Demos}\n * @since 6.0.0 Supports rendering as any of the theme colors and\n * requires a label for accessibility.\n */\nexport function LinearProgress(\n  props: LabelRequiredForA11y<LinearProgressProps>\n): ReactElement {\n  const {\n    ref,\n    id: propId,\n    style: propStyle,\n    className,\n    barStyle: propBarStyle,\n    barClassName,\n    barProps,\n    min = 0,\n    max = 100,\n    value,\n    reverse,\n    theme,\n    disableTransition,\n    vertical,\n    verticalHeight = 240,\n    ...remaining\n  } = props;\n\n  const id = useEnsuredId(propId, \"linear-progress\");\n  const style = useMemo(() => {\n    if (!vertical || verticalHeight === null) {\n      return propStyle;\n    }\n\n    return {\n      ...propStyle,\n      height: verticalHeight,\n    };\n  }, [propStyle, vertical, verticalHeight]);\n\n  let progress: number | undefined;\n  if (typeof value === \"number\") {\n    progress = getPercentage({ min, max, value, validate: true });\n  }\n  const barStyle = useMemo(() => {\n    if (typeof progress !== \"number\") {\n      return propBarStyle;\n    }\n\n    const key = vertical ? \"height\" : \"width\";\n    return {\n      ...propBarStyle,\n      [key]: `${progress * 100}%`,\n    };\n  }, [progress, propBarStyle, vertical]);\n\n  const indeterminate = typeof progress !== \"number\";\n  return (\n    <span\n      {...remaining}\n      id={id}\n      ref={ref}\n      style={style}\n      role=\"progressbar\"\n      aria-valuemin={min}\n      aria-valuemax={max}\n      aria-valuenow={value}\n      className={linearProgress({\n        className,\n        theme,\n        vertical,\n        indeterminate,\n      })}\n    >\n      <span\n        {...barProps}\n        style={barStyle}\n        className={linearProgressBar({\n          className: barClassName,\n          reverse,\n          vertical,\n          indeterminate,\n          disableTransition,\n        })}\n      />\n    </span>\n  );\n}\n"],"names":["useMemo","useEnsuredId","getPercentage","linearProgress","linearProgressBar","LinearProgress","props","ref","id","propId","style","propStyle","className","barStyle","propBarStyle","barClassName","barProps","min","max","value","reverse","theme","disableTransition","vertical","verticalHeight","remaining","height","progress","validate","key","indeterminate","span","role","aria-valuemin","aria-valuemax","aria-valuenow"],"mappings":";AAAA,SAIEA,OAAO,QACF,QAAQ;AAGf,SAASC,YAAY,QAAQ,qBAAqB;AAClD,SAASC,aAAa,QAAQ,4BAA4B;AAC1D,SAEEC,cAAc,EACdC,iBAAiB,QACZ,4BAA4B;AAmDnC;;;;;;;;;;;;;;;;;;;;;;;;;;;CA2BC,GACD,OAAO,SAASC,eACdC,KAAgD;IAEhD,MAAM,EACJC,GAAG,EACHC,IAAIC,MAAM,EACVC,OAAOC,SAAS,EAChBC,SAAS,EACTC,UAAUC,YAAY,EACtBC,YAAY,EACZC,QAAQ,EACRC,MAAM,CAAC,EACPC,MAAM,GAAG,EACTC,KAAK,EACLC,OAAO,EACPC,KAAK,EACLC,iBAAiB,EACjBC,QAAQ,EACRC,iBAAiB,GAAG,EACpB,GAAGC,WACJ,GAAGnB;IAEJ,MAAME,KAAKP,aAAaQ,QAAQ;IAChC,MAAMC,QAAQV,QAAQ;QACpB,IAAI,CAACuB,YAAYC,mBAAmB,MAAM;YACxC,OAAOb;QACT;QAEA,OAAO;YACL,GAAGA,SAAS;YACZe,QAAQF;QACV;IACF,GAAG;QAACb;QAAWY;QAAUC;KAAe;IAExC,IAAIG;IACJ,IAAI,OAAOR,UAAU,UAAU;QAC7BQ,WAAWzB,cAAc;YAAEe;YAAKC;YAAKC;YAAOS,UAAU;QAAK;IAC7D;IACA,MAAMf,WAAWb,QAAQ;QACvB,IAAI,OAAO2B,aAAa,UAAU;YAChC,OAAOb;QACT;QAEA,MAAMe,MAAMN,WAAW,WAAW;QAClC,OAAO;YACL,GAAGT,YAAY;YACf,CAACe,IAAI,EAAE,GAAGF,WAAW,IAAI,CAAC,CAAC;QAC7B;IACF,GAAG;QAACA;QAAUb;QAAcS;KAAS;IAErC,MAAMO,gBAAgB,OAAOH,aAAa;IAC1C,qBACE,KAACI;QACE,GAAGN,SAAS;QACbjB,IAAIA;QACJD,KAAKA;QACLG,OAAOA;QACPsB,MAAK;QACLC,iBAAehB;QACfiB,iBAAehB;QACfiB,iBAAehB;QACfP,WAAWT,eAAe;YACxBS;YACAS;YACAE;YACAO;QACF;kBAEA,cAAA,KAACC;YACE,GAAGf,QAAQ;YACZN,OAAOG;YACPD,WAAWR,kBAAkB;gBAC3BQ,WAAWG;gBACXK;gBACAG;gBACAO;gBACAR;YACF;;;AAIR"}

package/dist/progress/types.d.ts

@@ -1,3 +1,4 @@
+import { type Ref } from "react";
 import { type ThemeColor } from "../cssUtils.js";
 /**
  * @since 6.0.0
@@ -9,6 +10,7 @@ export type ProgressTheme = ThemeColor | "current-color";
  * @since 6.0.0 Added the `theme` prop.
  */
 export interface ProgressProps {
+    ref?: Ref<HTMLSpanElement>;
     /**
      * The id for the progress component. This is required for accessibility since
      * the progress will 99% of the time be describing the progress of something

package/dist/progress/types.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/progress/types.ts"],"sourcesContent":["import { type ThemeColor } from \"../cssUtils.js\";\n\n/**\n * @since 6.0.0\n */\nexport type ProgressTheme = ThemeColor | \"current-color\";\n\n/**\n * The base progress props for both the linear and circular progress components.\n *\n * @since 6.0.0 Added the `theme` prop.\n */\nexport interface ProgressProps {\n  /**\n   * The id for the progress component. This is required for accessibility since\n   * the progress will 99% of the time be describing the progress of something\n   * else within the page. The element that is loading or tracking progress\n   * should also be updated to have `aria-busy=\"true\"` and\n   * `aria-describedby=\"THIS_ID\"`.\n   *\n   * @defaultValue `\"circular-progress-\" + useId() || \"linear-progress-\" + useId()`\n   * @since 6.0.0 This prop is now optional.\n   */\n  id?: string;\n\n  /**\n   * The min value for the progress component. This is used to determine the\n   * current progress percentage for screen readers and styles.\n   *\n   * @defaultValue `0`\n   */\n  min?: number;\n\n  /**\n   * The max value for the progress component. This is used to determine the\n   * current progress percentage for screen readers and styles.\n   *\n   * @defaultValue `100`\n   */\n  max?: number;\n\n  /**\n   * The current value for the progress component. If this prop is omitted, the\n   * progress component will be put in an \"indeterminate\" state which will just\n   * infinitely loop an animation until it is unmounted.\n   *\n   * This value will be passed down as a percentage based on the `min` and `max`\n   * props so that screen readers can be notified of changes.\n   */\n  value?: number;\n\n  /**\n   * Boolean if the determinate progress versions should animate when the value\n   * changes. This should really only be enabled if you aren't getting quick\n   * progress updates or the updates happen in chunks.\n   *\n   * @defaultValue `false`\n   * @since 6.0.0 This was renamed from `animate` to\n   * `disableTransition`.\n   */\n  disableTransition?: boolean;\n\n  /**\n   * @defaultValue `\"primary\"`\n   * @since 6.0.0\n   */\n  theme?: ProgressTheme;\n}\n"],"names":[],"mappings":"AAOA;;;;CAIC,GACD,WAuDC"}
+{"version":3,"sources":["../../src/progress/types.ts"],"sourcesContent":["import { type Ref } from \"react\";\n\nimport { type ThemeColor } from \"../cssUtils.js\";\n\n/**\n * @since 6.0.0\n */\nexport type ProgressTheme = ThemeColor | \"current-color\";\n\n/**\n * The base progress props for both the linear and circular progress components.\n *\n * @since 6.0.0 Added the `theme` prop.\n */\nexport interface ProgressProps {\n  ref?: Ref<HTMLSpanElement>;\n\n  /**\n   * The id for the progress component. This is required for accessibility since\n   * the progress will 99% of the time be describing the progress of something\n   * else within the page. The element that is loading or tracking progress\n   * should also be updated to have `aria-busy=\"true\"` and\n   * `aria-describedby=\"THIS_ID\"`.\n   *\n   * @defaultValue `\"circular-progress-\" + useId() || \"linear-progress-\" + useId()`\n   * @since 6.0.0 This prop is now optional.\n   */\n  id?: string;\n\n  /**\n   * The min value for the progress component. This is used to determine the\n   * current progress percentage for screen readers and styles.\n   *\n   * @defaultValue `0`\n   */\n  min?: number;\n\n  /**\n   * The max value for the progress component. This is used to determine the\n   * current progress percentage for screen readers and styles.\n   *\n   * @defaultValue `100`\n   */\n  max?: number;\n\n  /**\n   * The current value for the progress component. If this prop is omitted, the\n   * progress component will be put in an \"indeterminate\" state which will just\n   * infinitely loop an animation until it is unmounted.\n   *\n   * This value will be passed down as a percentage based on the `min` and `max`\n   * props so that screen readers can be notified of changes.\n   */\n  value?: number;\n\n  /**\n   * Boolean if the determinate progress versions should animate when the value\n   * changes. This should really only be enabled if you aren't getting quick\n   * progress updates or the updates happen in chunks.\n   *\n   * @defaultValue `false`\n   * @since 6.0.0 This was renamed from `animate` to\n   * `disableTransition`.\n   */\n  disableTransition?: boolean;\n\n  /**\n   * @defaultValue `\"primary\"`\n   * @since 6.0.0\n   */\n  theme?: ProgressTheme;\n}\n"],"names":[],"mappings":"AASA;;;;CAIC,GACD,WAyDC"}

package/dist/responsive-item/ResponsiveItem.d.ts

@@ -1,4 +1,4 @@
-import { type HTMLAttributes } from "react";
+import { type HTMLAttributes, type ReactElement, type Ref } from "react";
 import { type ResponsiveItemClassNameOptions } from "./responsiveItemStyles.js";
 /**
  * @since 6.0.0 Renamed from `MediaContainerProps` to
@@ -10,6 +10,7 @@ import { type ResponsiveItemClassNameOptions } from "./responsiveItemStyles.js";
  * {@link ResponsiveItemProps.responsive} prop.
  */
 export interface ResponsiveItemProps extends HTMLAttributes<HTMLSpanElement>, ResponsiveItemClassNameOptions {
+    ref?: Ref<HTMLSpanElement>;
 }
 /**
  * @example Image Example
@@ -62,4 +63,4 @@ export interface ResponsiveItemProps extends HTMLAttributes<HTMLSpanElement>, Re
  * @since 6.0.0 Renamed from `MediaContainer` to
  * `ResponsiveItem` and renders a `<span>` instead of a `<div>`.
  */
-export declare const ResponsiveItem: import("react").ForwardRefExoticComponent<ResponsiveItemProps & import("react").RefAttributes<HTMLSpanElement>>;
+export declare function ResponsiveItem(props: ResponsiveItemProps): ReactElement;

package/dist/responsive-item/ResponsiveItem.js

@@ -1,5 +1,4 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { forwardRef } from "react";
 import { responsiveItem } from "./responsiveItemStyles.js";
 /**
  * @example Image Example
@@ -51,8 +50,8 @@ import { responsiveItem } from "./responsiveItemStyles.js";
  * @see {@link https://react-md.dev/components/responsive-item | ResponsiveItem Demos}
  * @since 6.0.0 Renamed from `MediaContainer` to
  * `ResponsiveItem` and renders a `<span>` instead of a `<div>`.
- */ export const ResponsiveItem = /*#__PURE__*/ forwardRef(function ResponsiveItem(props, ref) {
-    const { className, fullWidth = false, aspectRatio, responsive = "auto", children, ...remaining } = props;
+ */ export function ResponsiveItem(props) {
+    const { ref, className, fullWidth = false, aspectRatio, responsive = "auto", children, ...remaining } = props;
     return /*#__PURE__*/ _jsx("span", {
         ...remaining,
         ref: ref,
@@ -64,6 +63,6 @@ import { responsiveItem } from "./responsiveItemStyles.js";
         }),
         children: children
     });
-});
+}
 
 //# sourceMappingURL=ResponsiveItem.js.map

package/dist/responsive-item/ResponsiveItem.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/responsive-item/ResponsiveItem.tsx"],"sourcesContent":["import { type HTMLAttributes, forwardRef } from \"react\";\n\nimport {\n  type ResponsiveItemClassNameOptions,\n  responsiveItem,\n} from \"./responsiveItemStyles.js\";\n\n/**\n * @since 6.0.0 Renamed from `MediaContainerProps` to\n * `ResponsiveItemProps`\n * @since 6.0.0 The `height` and `width` props were removed in favor of the\n * `aspectRatio` prop since the latest typescript string interpolation supports\n * enforcing the correct format.\n * @since 6.0.0 The `auto` prop was removed in favor of the new\n * {@link ResponsiveItemProps.responsive} prop.\n */\nexport interface ResponsiveItemProps\n  extends HTMLAttributes<HTMLSpanElement>, ResponsiveItemClassNameOptions {}\n\n/**\n * @example Image Example\n * ```tsx\n * import { ResponsiveItem } from \"@react-md/core/responsive-item/ResponsiveItem\";\n * import type { ReactElement } from \"react\";\n *\n * function Example(): ReactElement {\n *   return (\n *     <ResponsiveItem>\n *       <img alt=\"\" src=\"/some-image.png\" />\n *     </ResponsiveItem>\n *   );\n * }\n * ```\n *\n * @example Iframe Example\n * ```tsx\n * import { ResponsiveItem } from \"@react-md/core/responsive-item/ResponsiveItem\";\n * import type { ReactElement } from \"react\";\n *\n * function Example(): ReactElement {\n *   return (\n *     <ResponsiveItem>\n *       <iframe\n *         src=\"https://youtube.com/some-video-url\"\n *         title=\"Some YouTube video\"\n *         allowFullScreen\n *       />\n *     </ResponsiveItem>\n *   );\n * }\n * ```\n *\n * @example Forced Aspect Ratio\n * ```tsx\n * import { ResponsiveItem } from \"@react-md/core/responsive-item/ResponsiveItem\";\n * import type { ReactElement } from \"react\";\n *\n * function Example(): ReactElement {\n *   return (\n *     <ResponsiveItem aspectRatio=\"16-9\">\n *       <img alt=\"\" src=\"/some-image.png\" />\n *     </ResponsiveItem>\n *   );\n * }\n * ```\n *\n * @see {@link https://react-md.dev/components/responsive-item | ResponsiveItem Demos}\n * @since 6.0.0 Renamed from `MediaContainer` to\n * `ResponsiveItem` and renders a `<span>` instead of a `<div>`.\n */\nexport const ResponsiveItem = forwardRef<HTMLSpanElement, ResponsiveItemProps>(\n  function ResponsiveItem(props, ref) {\n    const {\n      className,\n      fullWidth = false,\n      aspectRatio,\n      responsive = \"auto\",\n      children,\n      ...remaining\n    } = props;\n\n    return (\n      <span\n        {...remaining}\n        ref={ref}\n        className={responsiveItem({\n          className,\n          fullWidth,\n          aspectRatio,\n          responsive,\n        })}\n      >\n        {children}\n      </span>\n    );\n  }\n);\n"],"names":["forwardRef","responsiveItem","ResponsiveItem","props","ref","className","fullWidth","aspectRatio","responsive","children","remaining","span"],"mappings":";AAAA,SAA8BA,UAAU,QAAQ,QAAQ;AAExD,SAEEC,cAAc,QACT,4BAA4B;AAcnC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAkDC,GACD,OAAO,MAAMC,+BAAiBF,WAC5B,SAASE,eAAeC,KAAK,EAAEC,GAAG;IAChC,MAAM,EACJC,SAAS,EACTC,YAAY,KAAK,EACjBC,WAAW,EACXC,aAAa,MAAM,EACnBC,QAAQ,EACR,GAAGC,WACJ,GAAGP;IAEJ,qBACE,KAACQ;QACE,GAAGD,SAAS;QACbN,KAAKA;QACLC,WAAWJ,eAAe;YACxBI;YACAC;YACAC;YACAC;QACF;kBAECC;;AAGP,GACA"}
+{"version":3,"sources":["../../src/responsive-item/ResponsiveItem.tsx"],"sourcesContent":["import { type HTMLAttributes, type ReactElement, type Ref } from \"react\";\n\nimport {\n  type ResponsiveItemClassNameOptions,\n  responsiveItem,\n} from \"./responsiveItemStyles.js\";\n\n/**\n * @since 6.0.0 Renamed from `MediaContainerProps` to\n * `ResponsiveItemProps`\n * @since 6.0.0 The `height` and `width` props were removed in favor of the\n * `aspectRatio` prop since the latest typescript string interpolation supports\n * enforcing the correct format.\n * @since 6.0.0 The `auto` prop was removed in favor of the new\n * {@link ResponsiveItemProps.responsive} prop.\n */\nexport interface ResponsiveItemProps\n  extends HTMLAttributes<HTMLSpanElement>, ResponsiveItemClassNameOptions {\n  ref?: Ref<HTMLSpanElement>;\n}\n\n/**\n * @example Image Example\n * ```tsx\n * import { ResponsiveItem } from \"@react-md/core/responsive-item/ResponsiveItem\";\n * import type { ReactElement } from \"react\";\n *\n * function Example(): ReactElement {\n *   return (\n *     <ResponsiveItem>\n *       <img alt=\"\" src=\"/some-image.png\" />\n *     </ResponsiveItem>\n *   );\n * }\n * ```\n *\n * @example Iframe Example\n * ```tsx\n * import { ResponsiveItem } from \"@react-md/core/responsive-item/ResponsiveItem\";\n * import type { ReactElement } from \"react\";\n *\n * function Example(): ReactElement {\n *   return (\n *     <ResponsiveItem>\n *       <iframe\n *         src=\"https://youtube.com/some-video-url\"\n *         title=\"Some YouTube video\"\n *         allowFullScreen\n *       />\n *     </ResponsiveItem>\n *   );\n * }\n * ```\n *\n * @example Forced Aspect Ratio\n * ```tsx\n * import { ResponsiveItem } from \"@react-md/core/responsive-item/ResponsiveItem\";\n * import type { ReactElement } from \"react\";\n *\n * function Example(): ReactElement {\n *   return (\n *     <ResponsiveItem aspectRatio=\"16-9\">\n *       <img alt=\"\" src=\"/some-image.png\" />\n *     </ResponsiveItem>\n *   );\n * }\n * ```\n *\n * @see {@link https://react-md.dev/components/responsive-item | ResponsiveItem Demos}\n * @since 6.0.0 Renamed from `MediaContainer` to\n * `ResponsiveItem` and renders a `<span>` instead of a `<div>`.\n */\nexport function ResponsiveItem(props: ResponsiveItemProps): ReactElement {\n  const {\n    ref,\n    className,\n    fullWidth = false,\n    aspectRatio,\n    responsive = \"auto\",\n    children,\n    ...remaining\n  } = props;\n\n  return (\n    <span\n      {...remaining}\n      ref={ref}\n      className={responsiveItem({\n        className,\n        fullWidth,\n        aspectRatio,\n        responsive,\n      })}\n    >\n      {children}\n    </span>\n  );\n}\n"],"names":["responsiveItem","ResponsiveItem","props","ref","className","fullWidth","aspectRatio","responsive","children","remaining","span"],"mappings":";AAEA,SAEEA,cAAc,QACT,4BAA4B;AAgBnC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAkDC,GACD,OAAO,SAASC,eAAeC,KAA0B;IACvD,MAAM,EACJC,GAAG,EACHC,SAAS,EACTC,YAAY,KAAK,EACjBC,WAAW,EACXC,aAAa,MAAM,EACnBC,QAAQ,EACR,GAAGC,WACJ,GAAGP;IAEJ,qBACE,KAACQ;QACE,GAAGD,SAAS;QACbN,KAAKA;QACLC,WAAWJ,eAAe;YACxBI;YACAC;YACAC;YACAC;QACF;kBAECC;;AAGP"}

package/dist/responsive-item/ResponsiveItemOverlay.d.ts

@@ -1,10 +1,11 @@
-import { type HTMLAttributes } from "react";
+import { type HTMLAttributes, type ReactElement, type Ref } from "react";
 import { type ResponsiveItemOverlayClassNameOptions } from "./responsiveItemOverlayStyles.js";
 /**
  * @since 6.0.0 Renamed from `MediaOverlayProps` to
  * `ResponsiveItemOverlayProps`.
  */
 export interface ResponsiveItemOverlayProps extends HTMLAttributes<HTMLSpanElement>, ResponsiveItemOverlayClassNameOptions {
+    ref?: Ref<HTMLSpanElement>;
 }
 /**
  * @example Simple Example
@@ -33,4 +34,4 @@ export interface ResponsiveItemOverlayProps extends HTMLAttributes<HTMLSpanEleme
  * @since 6.0.0 Renamed from `MediaOverlay` to `ResponsiveItemOverlay`
  * and renders as a `<span>` instead of a `<div>`.
  */
-export declare const ResponsiveItemOverlay: import("react").ForwardRefExoticComponent<ResponsiveItemOverlayProps & import("react").RefAttributes<HTMLSpanElement>>;
+export declare function ResponsiveItemOverlay(props: ResponsiveItemOverlayProps): ReactElement;

package/dist/responsive-item/ResponsiveItemOverlay.js

@@ -1,5 +1,4 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { forwardRef } from "react";
 import { responsiveItemOverlay } from "./responsiveItemOverlayStyles.js";
 /**
  * @example Simple Example
@@ -27,8 +26,8 @@ import { responsiveItemOverlay } from "./responsiveItemOverlayStyles.js";
  * @see {@link ResponsiveItemOverlayPosition}
  * @since 6.0.0 Renamed from `MediaOverlay` to `ResponsiveItemOverlay`
  * and renders as a `<span>` instead of a `<div>`.
- */ export const ResponsiveItemOverlay = /*#__PURE__*/ forwardRef(function ResponsiveItemOverlay(props, ref) {
-    const { className, children, position = "bottom", ...remaining } = props;
+ */ export function ResponsiveItemOverlay(props) {
+    const { ref, className, children, position = "bottom", ...remaining } = props;
     return /*#__PURE__*/ _jsx("span", {
         ...remaining,
         ref: ref,
@@ -38,6 +37,6 @@ import { responsiveItemOverlay } from "./responsiveItemOverlayStyles.js";
         }),
         children: children
     });
-});
+}
 
 //# sourceMappingURL=ResponsiveItemOverlay.js.map

package/dist/responsive-item/ResponsiveItemOverlay.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/responsive-item/ResponsiveItemOverlay.tsx"],"sourcesContent":["import { type HTMLAttributes, forwardRef } from \"react\";\n\nimport {\n  type ResponsiveItemOverlayClassNameOptions,\n  // eslint-disable-next-line @typescript-eslint/no-unused-vars\n  type ResponsiveItemOverlayPosition,\n  responsiveItemOverlay,\n} from \"./responsiveItemOverlayStyles.js\";\n\n/**\n * @since 6.0.0 Renamed from `MediaOverlayProps` to\n * `ResponsiveItemOverlayProps`.\n */\nexport interface ResponsiveItemOverlayProps\n  extends\n    HTMLAttributes<HTMLSpanElement>,\n    ResponsiveItemOverlayClassNameOptions {}\n\n/**\n * @example Simple Example\n * ```tsx\n * import { CardContent } from \"@react-md/core/card/CardContent\";\n * import { ResponsiveItemOverlay } from \"@react-md/core/responsive-item/ResponsiveItemOverlay\";\n * import { Typography } from \"@react-md/core/typography/Typography\";\n * import type { ReactElement } from \"react\";\n *\n * function Example(): ReactElement {\n *   return (\n *     <CardContent>\n *       <img alt=\"\" src=\"/some-image.png\" />\n *       <ResponsiveItemOverlay>\n *         <Typography type=\"headline-5\" margin=\"none\">\n *           This appears at the bottom by default.\n *         </Typography>\n *       </ResponsiveItemOverlay>\n *     </CardContent>\n *   );\n * }\n * ```\n *\n * @see {@link https://react-md.dev/components/responsive-item | ResponsiveItem Demos}\n * @see {@link ResponsiveItemOverlayPosition}\n * @since 6.0.0 Renamed from `MediaOverlay` to `ResponsiveItemOverlay`\n * and renders as a `<span>` instead of a `<div>`.\n */\nexport const ResponsiveItemOverlay = forwardRef<\n  HTMLSpanElement,\n  ResponsiveItemOverlayProps\n>(function ResponsiveItemOverlay(props, ref) {\n  const { className, children, position = \"bottom\", ...remaining } = props;\n\n  return (\n    <span\n      {...remaining}\n      ref={ref}\n      className={responsiveItemOverlay({ className, position })}\n    >\n      {children}\n    </span>\n  );\n});\n"],"names":["forwardRef","responsiveItemOverlay","ResponsiveItemOverlay","props","ref","className","children","position","remaining","span"],"mappings":";AAAA,SAA8BA,UAAU,QAAQ,QAAQ;AAExD,SAIEC,qBAAqB,QAChB,mCAAmC;AAW1C;;;;;;;;;;;;;;;;;;;;;;;;;;CA0BC,GACD,OAAO,MAAMC,sCAAwBF,WAGnC,SAASE,sBAAsBC,KAAK,EAAEC,GAAG;IACzC,MAAM,EAAEC,SAAS,EAAEC,QAAQ,EAAEC,WAAW,QAAQ,EAAE,GAAGC,WAAW,GAAGL;IAEnE,qBACE,KAACM;QACE,GAAGD,SAAS;QACbJ,KAAKA;QACLC,WAAWJ,sBAAsB;YAAEI;YAAWE;QAAS;kBAEtDD;;AAGP,GAAG"}
+{"version":3,"sources":["../../src/responsive-item/ResponsiveItemOverlay.tsx"],"sourcesContent":["import { type HTMLAttributes, type ReactElement, type Ref } from \"react\";\n\nimport {\n  type ResponsiveItemOverlayClassNameOptions,\n  // eslint-disable-next-line @typescript-eslint/no-unused-vars\n  type ResponsiveItemOverlayPosition,\n  responsiveItemOverlay,\n} from \"./responsiveItemOverlayStyles.js\";\n\n/**\n * @since 6.0.0 Renamed from `MediaOverlayProps` to\n * `ResponsiveItemOverlayProps`.\n */\nexport interface ResponsiveItemOverlayProps\n  extends\n    HTMLAttributes<HTMLSpanElement>,\n    ResponsiveItemOverlayClassNameOptions {\n  ref?: Ref<HTMLSpanElement>;\n}\n\n/**\n * @example Simple Example\n * ```tsx\n * import { CardContent } from \"@react-md/core/card/CardContent\";\n * import { ResponsiveItemOverlay } from \"@react-md/core/responsive-item/ResponsiveItemOverlay\";\n * import { Typography } from \"@react-md/core/typography/Typography\";\n * import type { ReactElement } from \"react\";\n *\n * function Example(): ReactElement {\n *   return (\n *     <CardContent>\n *       <img alt=\"\" src=\"/some-image.png\" />\n *       <ResponsiveItemOverlay>\n *         <Typography type=\"headline-5\" margin=\"none\">\n *           This appears at the bottom by default.\n *         </Typography>\n *       </ResponsiveItemOverlay>\n *     </CardContent>\n *   );\n * }\n * ```\n *\n * @see {@link https://react-md.dev/components/responsive-item | ResponsiveItem Demos}\n * @see {@link ResponsiveItemOverlayPosition}\n * @since 6.0.0 Renamed from `MediaOverlay` to `ResponsiveItemOverlay`\n * and renders as a `<span>` instead of a `<div>`.\n */\nexport function ResponsiveItemOverlay(\n  props: ResponsiveItemOverlayProps\n): ReactElement {\n  const { ref, className, children, position = \"bottom\", ...remaining } = props;\n\n  return (\n    <span\n      {...remaining}\n      ref={ref}\n      className={responsiveItemOverlay({ className, position })}\n    >\n      {children}\n    </span>\n  );\n}\n"],"names":["responsiveItemOverlay","ResponsiveItemOverlay","props","ref","className","children","position","remaining","span"],"mappings":";AAEA,SAIEA,qBAAqB,QAChB,mCAAmC;AAa1C;;;;;;;;;;;;;;;;;;;;;;;;;;CA0BC,GACD,OAAO,SAASC,sBACdC,KAAiC;IAEjC,MAAM,EAAEC,GAAG,EAAEC,SAAS,EAAEC,QAAQ,EAAEC,WAAW,QAAQ,EAAE,GAAGC,WAAW,GAAGL;IAExE,qBACE,KAACM;QACE,GAAGD,SAAS;QACbJ,KAAKA;QACLC,WAAWJ,sBAAsB;YAAEI;YAAWE;QAAS;kBAEtDD;;AAGP"}

package/dist/segmented-button/SegmentedButton.d.ts

@@ -1,4 +1,4 @@
-import { type ButtonHTMLAttributes, type ReactNode } from "react";
+import { type ButtonHTMLAttributes, type ReactElement, type ReactNode, type Ref } from "react";
 import { type ComponentWithRippleProps } from "../interaction/types.js";
 import { type BaseMaxWidthTransitionOptions } from "../transition/useMaxWidthTransition.js";
 import { type BaseSegmentedButtonClassNameOptions } from "./segmentedButtonStyles.js";
@@ -10,6 +10,7 @@ import { type BaseSegmentedButtonClassNameOptions } from "./segmentedButtonStyle
  * module augmentation.
  */
 export interface SegmentedButtonProps extends ButtonHTMLAttributes<HTMLButtonElement>, BaseMaxWidthTransitionOptions, BaseSegmentedButtonClassNameOptions, ComponentWithRippleProps {
+    ref?: Ref<HTMLButtonElement>;
     /** @defaultValue `getIcon("selected")` */
     selectedIcon?: ReactNode;
     /**
@@ -79,4 +80,4 @@ export interface SegmentedButtonProps extends ButtonHTMLAttributes<HTMLButtonEle
  * @see {@link https://react-md.dev/components/segmented-button | SegmentedButton Demos}
  * @since 6.0.0
  */
-export declare const SegmentedButton: import("react").ForwardRefExoticComponent<SegmentedButtonProps & import("react").RefAttributes<HTMLButtonElement>>;
+export declare function SegmentedButton(props: SegmentedButtonProps): ReactElement;

package/dist/segmented-button/SegmentedButton.js

@@ -1,6 +1,5 @@
 "use client";
 import { jsxs as _jsxs } from "react/jsx-runtime";
-import { forwardRef } from "react";
 import { getIcon } from "../icon/config.js";
 import { useElementInteraction } from "../interaction/useElementInteraction.js";
 import { useHigherContrastChildren } from "../interaction/useHigherContrastChildren.js";
@@ -46,8 +45,8 @@ import { segmentedButton } from "./segmentedButtonStyles.js";
  *
  * @see {@link https://react-md.dev/components/segmented-button | SegmentedButton Demos}
  * @since 6.0.0
- */ export const SegmentedButton = /*#__PURE__*/ forwardRef(function SegmentedButton(props, ref) {
-    const { className, type = "button", leftAddon, rightAddon, children: propChildren, selected, selectedIcon: propSelectedIcon, selectedClassName, disableSelectedIcon, disableSelectedTransition, onBlur, onClick, onKeyDown, onKeyUp, onMouseDown, onMouseUp, onMouseLeave, onDragStart, onTouchStart, onTouchEnd, onTouchMove, disabled, disableRipple, ...remaining } = props;
+ */ export function SegmentedButton(props) {
+    const { ref, className, type = "button", leftAddon, rightAddon, children: propChildren, selected, selectedIcon: propSelectedIcon, selectedClassName, disableSelectedIcon, disableSelectedTransition, onBlur, onClick, onKeyDown, onKeyUp, onMouseDown, onMouseUp, onMouseLeave, onDragStart, onTouchStart, onTouchEnd, onTouchMove, disabled, disableRipple, ...remaining } = props;
     const children = useHigherContrastChildren(propChildren);
     const selectedIconNode = getIcon("selected", propSelectedIcon);
     const selectedIcon = useMaxWidthTransition({
@@ -92,6 +91,6 @@ import { segmentedButton } from "./segmentedButtonStyles.js";
             ripples
         ]
     });
-});
+}
 
 //# sourceMappingURL=SegmentedButton.js.map

package/dist/segmented-button/SegmentedButton.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/segmented-button/SegmentedButton.tsx"],"sourcesContent":["\"use client\";\n\nimport { type ButtonHTMLAttributes, type ReactNode, forwardRef } from \"react\";\n\nimport { getIcon } from \"../icon/config.js\";\nimport { type ComponentWithRippleProps } from \"../interaction/types.js\";\nimport { useElementInteraction } from \"../interaction/useElementInteraction.js\";\nimport { useHigherContrastChildren } from \"../interaction/useHigherContrastChildren.js\";\nimport {\n  type BaseMaxWidthTransitionOptions,\n  useMaxWidthTransition,\n} from \"../transition/useMaxWidthTransition.js\";\nimport {\n  type BaseSegmentedButtonClassNameOptions,\n  segmentedButton,\n} from \"./segmentedButtonStyles.js\";\n\n/**\n * @since 6.0.0\n * @since 6.3.1 Extends BaseMaxWidthTransitionOptions for CSS module\n * augmentation.\n * @since 6.3.1 Extends BaseSegmentedButtonClassNameOptions for CSSProperties\n * module augmentation.\n */\nexport interface SegmentedButtonProps\n  extends\n    ButtonHTMLAttributes<HTMLButtonElement>,\n    BaseMaxWidthTransitionOptions,\n    BaseSegmentedButtonClassNameOptions,\n    ComponentWithRippleProps {\n  /** @defaultValue `getIcon(\"selected\")` */\n  selectedIcon?: ReactNode;\n\n  /**\n   * Set this to `true` to not render the {@link selectedIcon} when\n   * {@link selected} is `true`.\n   *\n   * @defaultValue `false`\n   */\n  disableSelectedIcon?: boolean;\n\n  /**\n   * Set this to `true` to disable the {@link selectedIcon} enter/exit\n   * transition and instead just use `display: none`.\n   *\n   * @defaultValue `false`\n   */\n  disableSelectedTransition?: boolean;\n\n  /**\n   * An optional addon to render before the {@link children} and after the\n   * {@link selectedIcon}. This is only useful when rendering text children so\n   * it can appear above the interaction states.\n   */\n  leftAddon?: ReactNode;\n\n  /**\n   * An optional addon to render after the {@link children}. This is only useful\n   * when rendering text children so it can appear above the interaction states.\n   */\n  rightAddon?: ReactNode;\n}\n\n/**\n * **Client Component**\n *\n * @example Simple Example\n * ```tsx\n * import { SegmentedButton } from \"@react-md/core/segmented-button/SegmentedButton\";\n * import { SegmentedButtonContainer } from \"@react-md/core/segmented-button/SegmentedButtonContainer\";\n * import type { ReactElement } from \"react\";\n * import { useState } from \"react\";\n *\n * function Example(): ReactElement {\n *   const [value, setValue] = useState(\"a\");\n *   return (\n *     <SegmentedButtonContainer>\n *       <SegmentedButton\n *         onClick={() => setValue(\"a\")}\n *         selected={value === \"a\"}\n *       >\n *         First\n *       </SegmentedButton>\n *       <SegmentedButton\n *         onClick={() => setValue(\"b\")}\n *         selected={value === \"b\"}\n *       >\n *         Second\n *       </SegmentedButton>\n *       <SegmentedButton\n *         onClick={() => setValue(\"c\")}\n *         selected={value === \"c\"}\n *         disableSelectedIcon\n *       >\n *         Third\n *       </SegmentedButton>\n *     </SegmentedButtonContainer>\n *   );\n * }\n * ```\n *\n * @see {@link https://react-md.dev/components/segmented-button | SegmentedButton Demos}\n * @since 6.0.0\n */\nexport const SegmentedButton = forwardRef<\n  HTMLButtonElement,\n  SegmentedButtonProps\n>(function SegmentedButton(props, ref) {\n  const {\n    className,\n    type = \"button\",\n    leftAddon,\n    rightAddon,\n    children: propChildren,\n    selected,\n    selectedIcon: propSelectedIcon,\n    selectedClassName,\n    disableSelectedIcon,\n    disableSelectedTransition,\n    onBlur,\n    onClick,\n    onKeyDown,\n    onKeyUp,\n    onMouseDown,\n    onMouseUp,\n    onMouseLeave,\n    onDragStart,\n    onTouchStart,\n    onTouchEnd,\n    onTouchMove,\n    disabled,\n    disableRipple,\n    ...remaining\n  } = props;\n\n  const children = useHigherContrastChildren(propChildren);\n  const selectedIconNode = getIcon(\"selected\", propSelectedIcon);\n  const selectedIcon = useMaxWidthTransition({\n    element: selectedIconNode,\n    transitionIn: !!selected,\n    disabled: disableSelectedIcon,\n    disableTransition: disableSelectedTransition,\n  });\n  const { pressedClassName, handlers, ripples } = useElementInteraction({\n    mode: disableRipple ? \"none\" : undefined,\n    onBlur,\n    onClick,\n    onKeyDown,\n    onKeyUp,\n    onMouseDown,\n    onMouseUp,\n    onMouseLeave,\n    onDragStart,\n    onTouchStart,\n    onTouchEnd,\n    onTouchMove,\n    disabled,\n  });\n\n  return (\n    <button\n      {...remaining}\n      {...handlers}\n      aria-pressed={selected}\n      ref={ref}\n      type={type}\n      disabled={disabled}\n      className={segmentedButton({\n        className,\n        selected,\n        selectedClassName,\n        pressedClassName,\n      })}\n    >\n      {!disableSelectedIcon && selectedIcon}\n      {leftAddon}\n      {children}\n      {rightAddon}\n      {ripples}\n    </button>\n  );\n});\n"],"names":["forwardRef","getIcon","useElementInteraction","useHigherContrastChildren","useMaxWidthTransition","segmentedButton","SegmentedButton","props","ref","className","type","leftAddon","rightAddon","children","propChildren","selected","selectedIcon","propSelectedIcon","selectedClassName","disableSelectedIcon","disableSelectedTransition","onBlur","onClick","onKeyDown","onKeyUp","onMouseDown","onMouseUp","onMouseLeave","onDragStart","onTouchStart","onTouchEnd","onTouchMove","disabled","disableRipple","remaining","selectedIconNode","element","transitionIn","disableTransition","pressedClassName","handlers","ripples","mode","undefined","button","aria-pressed"],"mappings":"AAAA;;AAEA,SAAoDA,UAAU,QAAQ,QAAQ;AAE9E,SAASC,OAAO,QAAQ,oBAAoB;AAE5C,SAASC,qBAAqB,QAAQ,0CAA0C;AAChF,SAASC,yBAAyB,QAAQ,8CAA8C;AACxF,SAEEC,qBAAqB,QAChB,yCAAyC;AAChD,SAEEC,eAAe,QACV,6BAA6B;AAgDpC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAwCC,GACD,OAAO,MAAMC,gCAAkBN,WAG7B,SAASM,gBAAgBC,KAAK,EAAEC,GAAG;IACnC,MAAM,EACJC,SAAS,EACTC,OAAO,QAAQ,EACfC,SAAS,EACTC,UAAU,EACVC,UAAUC,YAAY,EACtBC,QAAQ,EACRC,cAAcC,gBAAgB,EAC9BC,iBAAiB,EACjBC,mBAAmB,EACnBC,yBAAyB,EACzBC,MAAM,EACNC,OAAO,EACPC,SAAS,EACTC,OAAO,EACPC,WAAW,EACXC,SAAS,EACTC,YAAY,EACZC,WAAW,EACXC,YAAY,EACZC,UAAU,EACVC,WAAW,EACXC,QAAQ,EACRC,aAAa,EACb,GAAGC,WACJ,GAAG3B;IAEJ,MAAMM,WAAWV,0BAA0BW;IAC3C,MAAMqB,mBAAmBlC,QAAQ,YAAYgB;IAC7C,MAAMD,eAAeZ,sBAAsB;QACzCgC,SAASD;QACTE,cAAc,CAAC,CAACtB;QAChBiB,UAAUb;QACVmB,mBAAmBlB;IACrB;IACA,MAAM,EAAEmB,gBAAgB,EAAEC,QAAQ,EAAEC,OAAO,EAAE,GAAGvC,sBAAsB;QACpEwC,MAAMT,gBAAgB,SAASU;QAC/BtB;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;IACF;IAEA,qBACE,MAACY;QACE,GAAGV,SAAS;QACZ,GAAGM,QAAQ;QACZK,gBAAc9B;QACdP,KAAKA;QACLE,MAAMA;QACNsB,UAAUA;QACVvB,WAAWJ,gBAAgB;YACzBI;YACAM;YACAG;YACAqB;QACF;;YAEC,CAACpB,uBAAuBH;YACxBL;YACAE;YACAD;YACA6B;;;AAGP,GAAG"}
+{"version":3,"sources":["../../src/segmented-button/SegmentedButton.tsx"],"sourcesContent":["\"use client\";\n\nimport {\n  type ButtonHTMLAttributes,\n  type ReactElement,\n  type ReactNode,\n  type Ref,\n} from \"react\";\n\nimport { getIcon } from \"../icon/config.js\";\nimport { type ComponentWithRippleProps } from \"../interaction/types.js\";\nimport { useElementInteraction } from \"../interaction/useElementInteraction.js\";\nimport { useHigherContrastChildren } from \"../interaction/useHigherContrastChildren.js\";\nimport {\n  type BaseMaxWidthTransitionOptions,\n  useMaxWidthTransition,\n} from \"../transition/useMaxWidthTransition.js\";\nimport {\n  type BaseSegmentedButtonClassNameOptions,\n  segmentedButton,\n} from \"./segmentedButtonStyles.js\";\n\n/**\n * @since 6.0.0\n * @since 6.3.1 Extends BaseMaxWidthTransitionOptions for CSS module\n * augmentation.\n * @since 6.3.1 Extends BaseSegmentedButtonClassNameOptions for CSSProperties\n * module augmentation.\n */\nexport interface SegmentedButtonProps\n  extends\n    ButtonHTMLAttributes<HTMLButtonElement>,\n    BaseMaxWidthTransitionOptions,\n    BaseSegmentedButtonClassNameOptions,\n    ComponentWithRippleProps {\n  ref?: Ref<HTMLButtonElement>;\n\n  /** @defaultValue `getIcon(\"selected\")` */\n  selectedIcon?: ReactNode;\n\n  /**\n   * Set this to `true` to not render the {@link selectedIcon} when\n   * {@link selected} is `true`.\n   *\n   * @defaultValue `false`\n   */\n  disableSelectedIcon?: boolean;\n\n  /**\n   * Set this to `true` to disable the {@link selectedIcon} enter/exit\n   * transition and instead just use `display: none`.\n   *\n   * @defaultValue `false`\n   */\n  disableSelectedTransition?: boolean;\n\n  /**\n   * An optional addon to render before the {@link children} and after the\n   * {@link selectedIcon}. This is only useful when rendering text children so\n   * it can appear above the interaction states.\n   */\n  leftAddon?: ReactNode;\n\n  /**\n   * An optional addon to render after the {@link children}. This is only useful\n   * when rendering text children so it can appear above the interaction states.\n   */\n  rightAddon?: ReactNode;\n}\n\n/**\n * **Client Component**\n *\n * @example Simple Example\n * ```tsx\n * import { SegmentedButton } from \"@react-md/core/segmented-button/SegmentedButton\";\n * import { SegmentedButtonContainer } from \"@react-md/core/segmented-button/SegmentedButtonContainer\";\n * import type { ReactElement } from \"react\";\n * import { useState } from \"react\";\n *\n * function Example(): ReactElement {\n *   const [value, setValue] = useState(\"a\");\n *   return (\n *     <SegmentedButtonContainer>\n *       <SegmentedButton\n *         onClick={() => setValue(\"a\")}\n *         selected={value === \"a\"}\n *       >\n *         First\n *       </SegmentedButton>\n *       <SegmentedButton\n *         onClick={() => setValue(\"b\")}\n *         selected={value === \"b\"}\n *       >\n *         Second\n *       </SegmentedButton>\n *       <SegmentedButton\n *         onClick={() => setValue(\"c\")}\n *         selected={value === \"c\"}\n *         disableSelectedIcon\n *       >\n *         Third\n *       </SegmentedButton>\n *     </SegmentedButtonContainer>\n *   );\n * }\n * ```\n *\n * @see {@link https://react-md.dev/components/segmented-button | SegmentedButton Demos}\n * @since 6.0.0\n */\nexport function SegmentedButton(props: SegmentedButtonProps): ReactElement {\n  const {\n    ref,\n    className,\n    type = \"button\",\n    leftAddon,\n    rightAddon,\n    children: propChildren,\n    selected,\n    selectedIcon: propSelectedIcon,\n    selectedClassName,\n    disableSelectedIcon,\n    disableSelectedTransition,\n    onBlur,\n    onClick,\n    onKeyDown,\n    onKeyUp,\n    onMouseDown,\n    onMouseUp,\n    onMouseLeave,\n    onDragStart,\n    onTouchStart,\n    onTouchEnd,\n    onTouchMove,\n    disabled,\n    disableRipple,\n    ...remaining\n  } = props;\n\n  const children = useHigherContrastChildren(propChildren);\n  const selectedIconNode = getIcon(\"selected\", propSelectedIcon);\n  const selectedIcon = useMaxWidthTransition({\n    element: selectedIconNode,\n    transitionIn: !!selected,\n    disabled: disableSelectedIcon,\n    disableTransition: disableSelectedTransition,\n  });\n  const { pressedClassName, handlers, ripples } = useElementInteraction({\n    mode: disableRipple ? \"none\" : undefined,\n    onBlur,\n    onClick,\n    onKeyDown,\n    onKeyUp,\n    onMouseDown,\n    onMouseUp,\n    onMouseLeave,\n    onDragStart,\n    onTouchStart,\n    onTouchEnd,\n    onTouchMove,\n    disabled,\n  });\n\n  return (\n    <button\n      {...remaining}\n      {...handlers}\n      aria-pressed={selected}\n      ref={ref}\n      type={type}\n      disabled={disabled}\n      className={segmentedButton({\n        className,\n        selected,\n        selectedClassName,\n        pressedClassName,\n      })}\n    >\n      {!disableSelectedIcon && selectedIcon}\n      {leftAddon}\n      {children}\n      {rightAddon}\n      {ripples}\n    </button>\n  );\n}\n"],"names":["getIcon","useElementInteraction","useHigherContrastChildren","useMaxWidthTransition","segmentedButton","SegmentedButton","props","ref","className","type","leftAddon","rightAddon","children","propChildren","selected","selectedIcon","propSelectedIcon","selectedClassName","disableSelectedIcon","disableSelectedTransition","onBlur","onClick","onKeyDown","onKeyUp","onMouseDown","onMouseUp","onMouseLeave","onDragStart","onTouchStart","onTouchEnd","onTouchMove","disabled","disableRipple","remaining","selectedIconNode","element","transitionIn","disableTransition","pressedClassName","handlers","ripples","mode","undefined","button","aria-pressed"],"mappings":"AAAA;;AASA,SAASA,OAAO,QAAQ,oBAAoB;AAE5C,SAASC,qBAAqB,QAAQ,0CAA0C;AAChF,SAASC,yBAAyB,QAAQ,8CAA8C;AACxF,SAEEC,qBAAqB,QAChB,yCAAyC;AAChD,SAEEC,eAAe,QACV,6BAA6B;AAkDpC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAwCC,GACD,OAAO,SAASC,gBAAgBC,KAA2B;IACzD,MAAM,EACJC,GAAG,EACHC,SAAS,EACTC,OAAO,QAAQ,EACfC,SAAS,EACTC,UAAU,EACVC,UAAUC,YAAY,EACtBC,QAAQ,EACRC,cAAcC,gBAAgB,EAC9BC,iBAAiB,EACjBC,mBAAmB,EACnBC,yBAAyB,EACzBC,MAAM,EACNC,OAAO,EACPC,SAAS,EACTC,OAAO,EACPC,WAAW,EACXC,SAAS,EACTC,YAAY,EACZC,WAAW,EACXC,YAAY,EACZC,UAAU,EACVC,WAAW,EACXC,QAAQ,EACRC,aAAa,EACb,GAAGC,WACJ,GAAG3B;IAEJ,MAAMM,WAAWV,0BAA0BW;IAC3C,MAAMqB,mBAAmBlC,QAAQ,YAAYgB;IAC7C,MAAMD,eAAeZ,sBAAsB;QACzCgC,SAASD;QACTE,cAAc,CAAC,CAACtB;QAChBiB,UAAUb;QACVmB,mBAAmBlB;IACrB;IACA,MAAM,EAAEmB,gBAAgB,EAAEC,QAAQ,EAAEC,OAAO,EAAE,GAAGvC,sBAAsB;QACpEwC,MAAMT,gBAAgB,SAASU;QAC/BtB;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;IACF;IAEA,qBACE,MAACY;QACE,GAAGV,SAAS;QACZ,GAAGM,QAAQ;QACZK,gBAAc9B;QACdP,KAAKA;QACLE,MAAMA;QACNsB,UAAUA;QACVvB,WAAWJ,gBAAgB;YACzBI;YACAM;YACAG;YACAqB;QACF;;YAEC,CAACpB,uBAAuBH;YACxBL;YACAE;YACAD;YACA6B;;;AAGP"}

package/dist/segmented-button/SegmentedButtonContainer.d.ts

@@ -1,9 +1,10 @@
-import { type HTMLAttributes, type ReactNode } from "react";
+import { type HTMLAttributes, type ReactElement, type ReactNode, type Ref } from "react";
 import { type SegmentedButtonContainerClassNameOptions } from "./segmentedButtonContainerStyles.js";
 /**
  * @since 6.0.0
  */
 export interface SegmentedButtonContainerProps extends HTMLAttributes<HTMLDivElement>, SegmentedButtonContainerClassNameOptions {
+    ref?: Ref<HTMLDivElement>;
     children: ReactNode;
 }
 /**
@@ -16,7 +17,7 @@ export interface SegmentedButtonContainerProps extends HTMLAttributes<HTMLDivEle
  * import { segmentedButtonContainer } from "@react-md/core/segmented-button/SegmentedButtonContainer";
  * import type { ReactElement } from "react";
  *
- * import { CustomWrapperComponent } from "./CustomWrapperComponent.jsx";
+ * import { CustomWrapperComponent } from "./CustomWrapperComponent.js";
  *
  * function Example(): ReactElement {
  *   return (
@@ -32,4 +33,4 @@ export interface SegmentedButtonContainerProps extends HTMLAttributes<HTMLDivEle
  * @see {@link https://react-md.dev/components/segmented-button | SegmentedButton Demos}
  * @since 6.0.0
  */
-export declare const SegmentedButtonContainer: import("react").ForwardRefExoticComponent<SegmentedButtonContainerProps & import("react").RefAttributes<HTMLDivElement>>;
+export declare function SegmentedButtonContainer(props: SegmentedButtonContainerProps): ReactElement;