@react-md/core 1.0.0-next.0 → 1.0.0-next.2

package/dist/menu/Menu.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/menu/Menu.tsx"],"sourcesContent":["\"use client\";\nimport { cnb } from \"cnbuilder\";\nimport {\n  forwardRef,\n  useEffect,\n  useRef,\n  type CSSProperties,\n  type HTMLAttributes,\n} from \"react\";\nimport { useFocusContainer } from \"../focus/useFocusContainer.js\";\nimport { useUserInteractionMode } from \"../interaction/UserInteractionModeProvider.js\";\nimport { type ListElement, type ListProps } from \"../list/List.js\";\nimport { useAppSize } from \"../media-queries/AppSizeProvider.js\";\nimport { type GetDefaultFocusedIndex } from \"../movement/types.js\";\nimport { Portal } from \"../portal/Portal.js\";\nimport { type CalculateFixedPositionOptions } from \"../positioning/types.js\";\nimport {\n  useFixedPositioning,\n  type FixedPositioningOptions,\n} from \"../positioning/useFixedPositioning.js\";\nimport { useScrollLock } from \"../scroll/useScrollLock.js\";\nimport {\n  useScaleTransition,\n  type ScaleTransitionHookOptions,\n} from \"../transition/useScaleTransition.js\";\nimport { type LabelRequiredForA11y, type PropsWithRef } from \"../types.js\";\nimport { useEnsuredId } from \"../useEnsuredId.js\";\nimport {\n  MenuConfigurationProvider,\n  useMenuConfiguration,\n  type MenuConfiguration,\n  type MenuOrientationProps,\n} from \"./MenuConfigurationProvider.js\";\nimport { MenuSheet, type MenuSheetConvenienceProps } from \"./MenuSheet.js\";\nimport { MenuWidget } from \"./MenuWidget.js\";\nimport { useMenuBarContext } from \"./useMenuBarProvider.js\";\nimport { getDefaultAnchor } from \"./utils.js\";\n\ndeclare module \"react\" {\n  interface CSSProperties {\n    \"--rmd-menu-background-color\"?: string;\n    \"--rmd-menu-color\"?: string;\n    \"--rmd-menu-min-width\"?: string | number;\n    \"--rmd-menu-spacing\"?: string | number;\n  }\n}\n\nconst noop = (): void => {\n  // do nothing\n};\n\n/** @remarks \\@since 5.0.0 */\nexport type MenuTransitionProps = Omit<\n  ScaleTransitionHookOptions<HTMLDivElement>,\n  \"transitionIn\" | \"vertical\" | \"nodeRef\"\n>;\n\n/**\n * @remarks \\@since 6.0.0\n */\nexport interface MenuConfigurationProps extends CalculateFixedPositionOptions {\n  /**\n   * @see {@link ScaleTransitionHookOptions.temporary}\n   * @defaultValue `true`\n   */\n  temporary?: boolean;\n\n  /**\n   * @defaultValue `false`\n   */\n  disablePortal?: boolean;\n\n  /**\n   * Boolean if the menu should not gain the elevation styles and should only be\n   * set to `true` when rendering within a `Sheet`.\n   *\n   * @defaultValue `false`\n   */\n  disableElevation?: boolean;\n\n  /**\n   * @defaultValue `false`\n   */\n  disableTransition?: boolean;\n\n  /**\n   * @see {@link FixedPositioningOptions.transformOrigin}\n   * @defaultValue `true`\n   */\n  transformOrigin?: boolean;\n\n  /**\n   * Boolean if the menu should close if the page is scrolled. The default\n   * behavior is to just update the position of the menu relative to the menu\n   * button until it can no longer be visible within the viewport.\n   *\n   * @defaultValue `false`\n   */\n  closeOnScroll?: boolean;\n\n  /**\n   * Boolean if the page should no longer be scrollable while the menu is\n   * visible.\n   *\n   * @defaultValue `false`\n   */\n  preventScroll?: boolean;\n\n  /**\n   * Boolean if the menu should close instead of repositioning itself if the\n   * browser window is resized.\n   *\n   * @defaultValue `false`\n   */\n  closeOnResize?: boolean;\n\n  /** @see {@link FixedPositioningOptions.getFixedPositionOptions} */\n  getFixedPositionOptions?(): CalculateFixedPositionOptions;\n}\n\n/**\n * @remarks\n * \\@since 5.1.0\n * \\@since 6.0.0 Renamed from `MenuListProps` to `MenuListConvenienceProps`\n */\nexport interface MenuListConvenienceProps {\n  /**\n   * An optional style to provide to the `List` component that surrounds the\n   * `MenuItem` within a `Menu`.\n   */\n  listStyle?: CSSProperties;\n\n  /**\n   * An optional className to provide to the `List` component that surrounds the\n   * `MenuItem` within a `Menu`.\n   */\n  listClassName?: string;\n\n  /**\n   * Any additional props to pass to the `List` component that surrounds the\n   * `Menu`'s `MenuItem`s.\n   */\n  listProps?: PropsWithRef<Omit<ListProps, \"horizontal\">, ListElement>;\n}\n\n/**\n * @remarks \\@since 6.0.0\n */\nexport interface MenuConvenienceProps extends MenuConfigurationProps {\n  /**\n   * This can be used to apply additional props to the `Menu` component.\n   *\n   * Note: You can override the `style` and `className` using\n   * {@link menuStyle} and {@link menuClassName} instead for convenience.\n   *\n   * @example\n   * ```tsx\n   * <DropdownMenu\n   *   {...props}\n   *   menuProps={{\n   *     style: {\n   *       // custom inline style\n   *     },\n   *     className: \"come-class-name\",\n   *     getFixedPositionOptions: () => ({\n   *       preventOverlap: true,\n   *     }),\n   *   }}\n   * />\n   * ```\n   */\n  menuProps?: PropsWithRef<\n    Omit<\n      MenuProps,\n      | \"children\"\n      | \"fixedTo\"\n      | \"visible\"\n      | \"onRequestClose\"\n      | \"getDefaultFocusedIndex\"\n    >,\n    HTMLDivElement\n  >;\n\n  /**\n   * Convenience prop to apply custom style to the `Menu` component.\n   */\n  menuStyle?: CSSProperties;\n\n  /**\n   * Convenience prop to apply custom class name to the `Menu` component.\n   */\n  menuClassName?: string;\n}\n\n/**\n * @remarks \\@since 6.0.0\n */\nexport type MenuFixedPositioningOptions = Omit<\n  FixedPositioningOptions<HTMLElement, HTMLDivElement>,\n  \"onScroll\" | \"onResize\"\n>;\n\n/**\n * @remarks\n * \\@since 5.0.0\n * \\@since 6.0.0 Updated to use the latest Menu, Transition, and Portal API.\n */\nexport interface MenuProps\n  extends HTMLAttributes<HTMLDivElement>,\n    MenuConfiguration,\n    MenuConfigurationProps,\n    MenuFixedPositioningOptions,\n    MenuOrientationProps,\n    MenuTransitionProps,\n    MenuListConvenienceProps,\n    MenuSheetConvenienceProps {\n  visible: boolean;\n  onRequestClose(): void;\n\n  /**\n   * @defaultValue `\"menu-\" + useId()`\n   */\n  id?: string;\n\n  /**\n   * This is used to set the default focus index when the menu is visible.\n   *\n   * @internal\n   */\n  getDefaultFocusedIndex?: GetDefaultFocusedIndex;\n\n  /**\n   * Custom style that should be applied to the menu only while not rendered\n   * within a sheet since the {@link style} would be applied to both versions.\n   */\n  menuStyle?: CSSProperties;\n\n  /**\n   * Custom class name that should be applied only while not rendered within a\n   * sheet.\n   */\n  menuClassName?: string;\n}\n\n/**\n * **Client Component**\n *\n * This component should generally only be used to implement context menus with\n * the `useContextMenu` hook. Otherwise, the `DropdownMenu` component should be\n * used.\n *\n * @see The `useContextMenu` hook for an example.\n *\n * @remarks\n * \\@since 5.0.0\n * \\@since 6.0.0 Updated this component to implement all the `Menu`\n * functionality instead of requiring the `useMenu` hook and `MenuWidget`\n * component. In addition, the `renderAsSheet` behavior has been moved into this\n * implementation so that the `MenuRenderer` is no longer required and context\n * menus can appear as a `Sheet`.\n */\nexport const Menu = forwardRef<HTMLDivElement, LabelRequiredForA11y<MenuProps>>(\n  function Menu(props, propRef) {\n    const {\n      id: propId,\n      style: propStyle,\n      role = \"menu\",\n      children,\n      horizontal: _horizontal,\n      sheetHeader: _sheetHeader,\n      sheetFooter: _sheetFooter,\n      renderAsSheet: _renderAsSheet,\n      sheetPosition: _sheetPosition,\n      sheetVerticalSize: _sheetVerticalSize,\n      sheetProps,\n      sheetStyle,\n      sheetClassName,\n      menuStyle,\n      menuClassName,\n      disableElevation = false,\n      temporary = true,\n      tabIndex = -1,\n      fixedTo,\n      className,\n      classNames,\n      timeout,\n      appear,\n      enter,\n      exit,\n      onEnter,\n      onEntering = noop,\n      onEntered = noop,\n      onExit,\n      onExiting,\n      onExited = noop,\n      onKeyDown = noop,\n      listProps,\n      listStyle,\n      listClassName,\n      visible,\n      onRequestClose,\n      anchor,\n      closeOnResize = false,\n      closeOnScroll = false,\n      preventScroll = false,\n      vwMargin,\n      vhMargin,\n      xMargin,\n      yMargin,\n      width,\n      transformOrigin = true,\n      preventOverlap,\n      disableSwapping,\n      disableVHBounds,\n      initialX,\n      initialY,\n      getFixedPositionOptions,\n      disablePortal: propDisablePortal,\n      disableTransition,\n      ...remaining\n    } = props;\n    const { \"aria-label\": ariaLabel, \"aria-labelledby\": ariaLabelledBy } =\n      props;\n\n    const id = useEnsuredId(propId, \"menu\");\n    const {\n      root,\n      menubar,\n      menuitem,\n      activeId,\n      animatedOnceRef,\n      hoverTimeoutRef,\n      disableHoverMode,\n    } = useMenuBarContext();\n    const {\n      horizontal,\n      sheetHeader,\n      sheetFooter,\n      renderAsSheet,\n      sheetPosition,\n      sheetVerticalSize,\n    } = useMenuConfiguration(props);\n    const { isPhone } = useAppSize();\n    const isSheet =\n      renderAsSheet === true || (renderAsSheet === \"phone\" && isPhone);\n\n    const entered = useRef(false);\n    const cancelUnmountFocus = useRef(false);\n    const hideWithoutRefocus = (): void => {\n      cancelUnmountFocus.current = true;\n      onRequestClose();\n    };\n    const mode = useUserInteractionMode();\n    const mouse = mode === \"mouse\";\n\n    const { eventHandlers, transitionOptions } = useFocusContainer({\n      nodeRef: propRef,\n      activate: visible,\n      onKeyDown(event) {\n        onKeyDown(event);\n\n        // when a menu is within a sheet, it should not trigger the custom\n        // keyboard behavior\n        if (isSheet) {\n          return;\n        }\n\n        switch (event.key) {\n          case \"Escape\":\n            // prevent parent components that have an \"Escape\" keypress event\n            // from being triggered as well\n            event.stopPropagation();\n            disableHoverMode();\n            onRequestClose();\n            break;\n          case \"Tab\":\n            // since menus are portalled, tab index is kinda broke so just close\n            // the menu instead of doing default tab behavior\n            event.preventDefault();\n\n            if (!menuitem) {\n              // pressing the tab key should still cascade close all menus\n              event.stopPropagation();\n            }\n            disableHoverMode();\n            onRequestClose();\n            break;\n          case \"ArrowUp\":\n            if (!root && menuitem && horizontal) {\n              event.stopPropagation();\n              event.preventDefault();\n              onRequestClose();\n            }\n            break;\n          case \"ArrowLeft\":\n            if (!root && menuitem && !horizontal) {\n              event.stopPropagation();\n              event.preventDefault();\n              onRequestClose();\n            }\n            break;\n        }\n      },\n      onEntering(appearing) {\n        onEntering(appearing);\n        entered.current = true;\n      },\n      onEntered(appearing) {\n        onEntered(appearing);\n        entered.current = true;\n        cancelUnmountFocus.current = false;\n        animatedOnceRef.current = true;\n      },\n      onExited() {\n        onExited();\n        entered.current = false;\n      },\n      onExiting,\n      disableTransition,\n      isFocusTypeDisabled(type) {\n        if (role === \"listbox\") {\n          return !isSheet;\n        }\n\n        if (type === \"keyboard\") {\n          return isSheet;\n        }\n\n        const isHoverDisabled = mouse && hoverTimeoutRef.current === 0;\n        if (type === \"mount\") {\n          return isHoverDisabled;\n        }\n\n        return (\n          isHoverDisabled ||\n          cancelUnmountFocus.current ||\n          (root && !!activeId && id !== activeId)\n        );\n      },\n    });\n\n    const { ref, style, callbacks } = useFixedPositioning({\n      ...transitionOptions,\n      onEnter,\n      style: isSheet ? propStyle : menuStyle,\n      fixedTo,\n      anchor: getDefaultAnchor({\n        anchor,\n        menubar,\n        menuitem: !root && menuitem,\n        horizontal,\n      }),\n      vwMargin,\n      vhMargin,\n      xMargin,\n      yMargin,\n      width,\n      transformOrigin,\n      preventOverlap,\n      disableSwapping,\n      disableVHBounds,\n      initialX,\n      initialY,\n      getFixedPositionOptions,\n      onResize: closeOnResize ? hideWithoutRefocus : undefined,\n      onScroll(_event, data) {\n        if (!data.visible || closeOnScroll) {\n          hideWithoutRefocus();\n        }\n      },\n    });\n    const { rendered, disablePortal, elementProps } = useScaleTransition({\n      nodeRef: ref,\n      className: cnb(!isSheet && menuClassName, className),\n      transitionIn: visible,\n      vertical: !horizontal,\n      temporary,\n      timeout: isSheet || disableTransition ? 0 : timeout,\n      classNames,\n      appear,\n      enter,\n      exit,\n      onExit,\n      onExiting: transitionOptions.onExiting,\n      exitedHidden: true,\n      ...callbacks,\n    });\n    useScrollLock(visible && preventScroll);\n\n    // need to make sure that the useEffect does not refire for hiding on click\n    // events because of the `window.requestAnimationFrame`. It'll make it so\n    // that menu items that update state are unable to close when clicked\n    const hide = useRef(onRequestClose);\n    useEffect(() => {\n      hide.current = onRequestClose;\n    });\n    useEffect(() => {\n      if (!visible) {\n        return;\n      }\n\n      const callback = (event: globalThis.MouseEvent): void => {\n        // this is required for when the transition is disabled\n        if (!entered.current) {\n          return;\n        }\n\n        // if the user clicks outside of the menu to close it, the toggle button\n        // should not be focused. instead the nearest focusable element from the\n        // click event should be focused when Tab or Shift + tab is pressed\n        cancelUnmountFocus.current =\n          !(event.target instanceof HTMLElement) ||\n          !event.target.closest(`[role=\"${role}\"]`);\n\n        // this won't be called if `event.stopPropagation()` is called\n        hide.current();\n        disableHoverMode();\n      };\n\n      // wait an animation frame so the initial click event that caused the menu\n      // to become visible does not immediately close the menu\n      const frame = window.requestAnimationFrame(() => {\n        window.addEventListener(\"click\", callback);\n      });\n\n      return () => {\n        window.cancelAnimationFrame(frame);\n        window.removeEventListener(\"click\", callback);\n      };\n    }, [disableHoverMode, role, visible]);\n\n    return (\n      <MenuConfigurationProvider\n        horizontal={horizontal}\n        renderAsSheet={renderAsSheet}\n        sheetFooter={sheetFooter}\n        sheetHeader={sheetHeader}\n        sheetPosition={sheetPosition}\n        sheetVerticalSize={sheetVerticalSize}\n      >\n        <MenuSheet\n          aria-label={ariaLabel}\n          aria-labelledby={ariaLabelledBy as string}\n          header={sheetHeader}\n          footer={sheetFooter}\n          position={sheetPosition}\n          verticalSize={sheetVerticalSize}\n          visible={visible}\n          enabled={isSheet}\n          onRequestClose={onRequestClose}\n          style={sheetStyle}\n          className={sheetClassName}\n          disablePortal={propDisablePortal}\n          temporary={temporary}\n          disableTransition={disableTransition}\n          {...sheetProps}\n        >\n          <Portal disabled={isSheet || (propDisablePortal ?? disablePortal)}>\n            {(rendered || isSheet) && (\n              <MenuWidget\n                {...remaining}\n                {...elementProps}\n                {...eventHandlers}\n                id={id}\n                role={role}\n                style={isSheet ? propStyle : style}\n                isSheet={isSheet}\n                tabIndex={tabIndex}\n                horizontal={horizontal}\n                listProps={listProps}\n                listStyle={listStyle}\n                listClassName={listClassName}\n                disableElevation={disableElevation}\n                cancelUnmountFocus={cancelUnmountFocus}\n              >\n                {children}\n              </MenuWidget>\n            )}\n          </Portal>\n        </MenuSheet>\n      </MenuConfigurationProvider>\n    );\n  }\n);\n"],"names":["cnb","forwardRef","useEffect","useRef","useFocusContainer","useUserInteractionMode","useAppSize","Portal","useFixedPositioning","useScrollLock","useScaleTransition","useEnsuredId","MenuConfigurationProvider","useMenuConfiguration","MenuSheet","MenuWidget","useMenuBarContext","getDefaultAnchor","noop","Menu","props","propRef","id","propId","style","propStyle","role","children","horizontal","_horizontal","sheetHeader","_sheetHeader","sheetFooter","_sheetFooter","renderAsSheet","_renderAsSheet","sheetPosition","_sheetPosition","sheetVerticalSize","_sheetVerticalSize","sheetProps","sheetStyle","sheetClassName","menuStyle","menuClassName","disableElevation","temporary","tabIndex","fixedTo","className","classNames","timeout","appear","enter","exit","onEnter","onEntering","onEntered","onExit","onExiting","onExited","onKeyDown","listProps","listStyle","listClassName","visible","onRequestClose","anchor","closeOnResize","closeOnScroll","preventScroll","vwMargin","vhMargin","xMargin","yMargin","width","transformOrigin","preventOverlap","disableSwapping","disableVHBounds","initialX","initialY","getFixedPositionOptions","disablePortal","propDisablePortal","disableTransition","remaining","ariaLabel","ariaLabelledBy","root","menubar","menuitem","activeId","animatedOnceRef","hoverTimeoutRef","disableHoverMode","isPhone","isSheet","entered","cancelUnmountFocus","hideWithoutRefocus","current","mode","mouse","eventHandlers","transitionOptions","nodeRef","activate","event","key","stopPropagation","preventDefault","appearing","isFocusTypeDisabled","type","isHoverDisabled","ref","callbacks","onResize","undefined","onScroll","_event","data","rendered","elementProps","transitionIn","vertical","exitedHidden","hide","callback","target","HTMLElement","closest","frame","window","requestAnimationFrame","addEventListener","cancelAnimationFrame","removeEventListener","aria-label","aria-labelledby","header","footer","position","verticalSize","enabled","disabled"],"mappings":"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"}
+{"version":3,"sources":["../../src/menu/Menu.tsx"],"sourcesContent":["\"use client\";\nimport { cnb } from \"cnbuilder\";\nimport {\n  forwardRef,\n  useEffect,\n  useRef,\n  type CSSProperties,\n  type HTMLAttributes,\n} from \"react\";\nimport { type FloatingActionButtonPosition } from \"../button/FloatingActionButton.jsx\";\nimport { useFocusContainer } from \"../focus/useFocusContainer.js\";\nimport { useUserInteractionMode } from \"../interaction/UserInteractionModeProvider.js\";\nimport { type ListElement, type ListProps } from \"../list/List.js\";\nimport { useAppSize } from \"../media-queries/AppSizeProvider.js\";\nimport { type GetDefaultFocusedIndex } from \"../movement/types.js\";\nimport { Portal } from \"../portal/Portal.js\";\nimport { type CalculateFixedPositionOptions } from \"../positioning/types.js\";\nimport {\n  useFixedPositioning,\n  type FixedPositioningOptions,\n} from \"../positioning/useFixedPositioning.js\";\nimport { useScrollLock } from \"../scroll/useScrollLock.js\";\nimport {\n  useScaleTransition,\n  type ScaleTransitionHookOptions,\n} from \"../transition/useScaleTransition.js\";\nimport { type LabelRequiredForA11y, type PropsWithRef } from \"../types.js\";\nimport { useEnsuredId } from \"../useEnsuredId.js\";\nimport {\n  MenuConfigurationProvider,\n  useMenuConfiguration,\n  type MenuConfiguration,\n  type MenuOrientationProps,\n} from \"./MenuConfigurationProvider.js\";\nimport { MenuSheet, type MenuSheetConvenienceProps } from \"./MenuSheet.js\";\nimport { MenuWidget } from \"./MenuWidget.js\";\nimport { useMenuBarContext } from \"./useMenuBarProvider.js\";\nimport { getDefaultAnchor } from \"./utils.js\";\n\ndeclare module \"react\" {\n  interface CSSProperties {\n    \"--rmd-menu-background-color\"?: string;\n    \"--rmd-menu-color\"?: string;\n    \"--rmd-menu-min-width\"?: string | number;\n    \"--rmd-menu-spacing\"?: string | number;\n  }\n}\n\nconst noop = (): void => {\n  // do nothing\n};\n\n/** @remarks \\@since 5.0.0 */\nexport type MenuTransitionProps = Omit<\n  ScaleTransitionHookOptions<HTMLDivElement>,\n  \"transitionIn\" | \"vertical\" | \"nodeRef\"\n>;\n\n/**\n * @remarks \\@since 6.0.0\n */\nexport interface MenuConfigurationProps extends CalculateFixedPositionOptions {\n  /**\n   * @see {@link ScaleTransitionHookOptions.temporary}\n   * @defaultValue `true`\n   */\n  temporary?: boolean;\n\n  /**\n   * @defaultValue `false`\n   */\n  disablePortal?: boolean;\n\n  /**\n   * Boolean if the menu should not gain the elevation styles and should only be\n   * set to `true` when rendering within a `Sheet`.\n   *\n   * @defaultValue `false`\n   */\n  disableElevation?: boolean;\n\n  /**\n   * @defaultValue `false`\n   */\n  disableTransition?: boolean;\n\n  /**\n   * @see {@link FixedPositioningOptions.transformOrigin}\n   * @defaultValue `true`\n   */\n  transformOrigin?: boolean;\n\n  /**\n   * Boolean if the menu should close if the page is scrolled. The default\n   * behavior is to just update the position of the menu relative to the menu\n   * button until it can no longer be visible within the viewport.\n   *\n   * @defaultValue `false`\n   */\n  closeOnScroll?: boolean;\n\n  /**\n   * Boolean if the page should no longer be scrollable while the menu is\n   * visible.\n   *\n   * @defaultValue `false`\n   */\n  preventScroll?: boolean;\n\n  /**\n   * Boolean if the menu should close instead of repositioning itself if the\n   * browser window is resized.\n   *\n   * @defaultValue `false`\n   */\n  closeOnResize?: boolean;\n\n  /** @see {@link FixedPositioningOptions.getFixedPositionOptions} */\n  getFixedPositionOptions?(): CalculateFixedPositionOptions;\n}\n\n/**\n * @remarks\n * \\@since 5.1.0\n * \\@since 6.0.0 Renamed from `MenuListProps` to `MenuListConvenienceProps`\n */\nexport interface MenuListConvenienceProps {\n  /**\n   * An optional style to provide to the `List` component that surrounds the\n   * `MenuItem` within a `Menu`.\n   */\n  listStyle?: CSSProperties;\n\n  /**\n   * An optional className to provide to the `List` component that surrounds the\n   * `MenuItem` within a `Menu`.\n   */\n  listClassName?: string;\n\n  /**\n   * Any additional props to pass to the `List` component that surrounds the\n   * `Menu`'s `MenuItem`s.\n   */\n  listProps?: PropsWithRef<Omit<ListProps, \"horizontal\">, ListElement>;\n}\n\n/**\n * @remarks \\@since 6.0.0\n */\nexport interface MenuConvenienceProps extends MenuConfigurationProps {\n  /**\n   * This can be used to apply additional props to the `Menu` component.\n   *\n   * Note: You can override the `style` and `className` using\n   * {@link menuStyle} and {@link menuClassName} instead for convenience.\n   *\n   * @example\n   * ```tsx\n   * <DropdownMenu\n   *   {...props}\n   *   menuProps={{\n   *     style: {\n   *       // custom inline style\n   *     },\n   *     className: \"come-class-name\",\n   *     getFixedPositionOptions: () => ({\n   *       preventOverlap: true,\n   *     }),\n   *   }}\n   * />\n   * ```\n   */\n  menuProps?: PropsWithRef<\n    Omit<\n      MenuProps,\n      | \"children\"\n      | \"fixedTo\"\n      | \"visible\"\n      | \"onRequestClose\"\n      | \"getDefaultFocusedIndex\"\n    >,\n    HTMLDivElement\n  >;\n\n  /**\n   * Convenience prop to apply custom style to the `Menu` component.\n   */\n  menuStyle?: CSSProperties;\n\n  /**\n   * Convenience prop to apply custom class name to the `Menu` component.\n   */\n  menuClassName?: string;\n}\n\n/**\n * @remarks \\@since 6.0.0\n */\nexport type MenuFixedPositioningOptions = Omit<\n  FixedPositioningOptions<HTMLElement, HTMLDivElement>,\n  \"onScroll\" | \"onResize\"\n>;\n\n/**\n * @remarks\n * \\@since 5.0.0\n * \\@since 6.0.0 Updated to use the latest Menu, Transition, and Portal API.\n */\nexport interface MenuProps\n  extends HTMLAttributes<HTMLDivElement>,\n    MenuConfiguration,\n    MenuConfigurationProps,\n    MenuFixedPositioningOptions,\n    MenuOrientationProps,\n    MenuTransitionProps,\n    MenuListConvenienceProps,\n    MenuSheetConvenienceProps {\n  visible: boolean;\n  onRequestClose(): void;\n\n  /**\n   * @defaultValue `\"menu-\" + useId()`\n   */\n  id?: string;\n\n  /**\n   * This is used to set the default focus index when the menu is visible.\n   *\n   * @internal\n   */\n  getDefaultFocusedIndex?: GetDefaultFocusedIndex;\n\n  /**\n   * Custom style that should be applied to the menu only while not rendered\n   * within a sheet since the {@link style} would be applied to both versions.\n   */\n  menuStyle?: CSSProperties;\n\n  /**\n   * Custom class name that should be applied only while not rendered within a\n   * sheet.\n   */\n  menuClassName?: string;\n\n  /**\n   * @internal\n   *\n   * This is only used to update the default anchor when the DropdownMenu's\n   * toggle is a floating action button.\n   */\n  floating?: FloatingActionButtonPosition;\n}\n\n/**\n * **Client Component**\n *\n * This component should generally only be used to implement context menus with\n * the `useContextMenu` hook. Otherwise, the `DropdownMenu` component should be\n * used.\n *\n * @see The `useContextMenu` hook for an example.\n *\n * @remarks\n * \\@since 5.0.0\n * \\@since 6.0.0 Updated this component to implement all the `Menu`\n * functionality instead of requiring the `useMenu` hook and `MenuWidget`\n * component. In addition, the `renderAsSheet` behavior has been moved into this\n * implementation so that the `MenuRenderer` is no longer required and context\n * menus can appear as a `Sheet`.\n */\nexport const Menu = forwardRef<HTMLDivElement, LabelRequiredForA11y<MenuProps>>(\n  function Menu(props, propRef) {\n    const {\n      id: propId,\n      style: propStyle,\n      role = \"menu\",\n      children,\n      horizontal: _horizontal,\n      sheetHeader: _sheetHeader,\n      sheetFooter: _sheetFooter,\n      renderAsSheet: _renderAsSheet,\n      sheetPosition: _sheetPosition,\n      sheetVerticalSize: _sheetVerticalSize,\n      sheetProps,\n      sheetStyle,\n      sheetClassName,\n      menuStyle,\n      menuClassName,\n      disableElevation = false,\n      temporary = true,\n      tabIndex = -1,\n      fixedTo,\n      className,\n      classNames,\n      timeout,\n      appear,\n      enter,\n      exit,\n      onEnter,\n      onEntering = noop,\n      onEntered = noop,\n      onExit,\n      onExiting,\n      onExited = noop,\n      onKeyDown = noop,\n      listProps,\n      listStyle,\n      listClassName,\n      visible,\n      onRequestClose,\n      floating,\n      anchor,\n      closeOnResize = false,\n      closeOnScroll = false,\n      preventScroll = false,\n      vwMargin,\n      vhMargin,\n      xMargin,\n      yMargin,\n      width,\n      transformOrigin = true,\n      preventOverlap,\n      disableSwapping,\n      disableVHBounds,\n      initialX,\n      initialY,\n      getFixedPositionOptions,\n      disablePortal: propDisablePortal,\n      disableTransition,\n      ...remaining\n    } = props;\n    const { \"aria-label\": ariaLabel, \"aria-labelledby\": ariaLabelledBy } =\n      props;\n\n    const id = useEnsuredId(propId, \"menu\");\n    const {\n      root,\n      menubar,\n      menuitem,\n      activeId,\n      animatedOnceRef,\n      hoverTimeoutRef,\n      disableHoverMode,\n    } = useMenuBarContext();\n    const {\n      horizontal,\n      sheetHeader,\n      sheetFooter,\n      renderAsSheet,\n      sheetPosition,\n      sheetVerticalSize,\n    } = useMenuConfiguration(props);\n    const { isPhone } = useAppSize();\n    const isSheet =\n      renderAsSheet === true || (renderAsSheet === \"phone\" && isPhone);\n\n    const entered = useRef(false);\n    const cancelUnmountFocus = useRef(false);\n    const hideWithoutRefocus = (): void => {\n      cancelUnmountFocus.current = true;\n      onRequestClose();\n    };\n    const mode = useUserInteractionMode();\n    const mouse = mode === \"mouse\";\n\n    const { eventHandlers, transitionOptions } = useFocusContainer({\n      nodeRef: propRef,\n      activate: visible,\n      onKeyDown(event) {\n        onKeyDown(event);\n\n        // when a menu is within a sheet, it should not trigger the custom\n        // keyboard behavior\n        if (isSheet) {\n          return;\n        }\n\n        switch (event.key) {\n          case \"Escape\":\n            // prevent parent components that have an \"Escape\" keypress event\n            // from being triggered as well\n            event.stopPropagation();\n            disableHoverMode();\n            onRequestClose();\n            break;\n          case \"Tab\":\n            // since menus are portalled, tab index is kinda broke so just close\n            // the menu instead of doing default tab behavior\n            event.preventDefault();\n\n            if (!menuitem) {\n              // pressing the tab key should still cascade close all menus\n              event.stopPropagation();\n            }\n            disableHoverMode();\n            onRequestClose();\n            break;\n          case \"ArrowUp\":\n            if (!root && menuitem && horizontal) {\n              event.stopPropagation();\n              event.preventDefault();\n              onRequestClose();\n            }\n            break;\n          case \"ArrowLeft\":\n            if (!root && menuitem && !horizontal) {\n              event.stopPropagation();\n              event.preventDefault();\n              onRequestClose();\n            }\n            break;\n        }\n      },\n      onEntering(appearing) {\n        onEntering(appearing);\n        entered.current = true;\n      },\n      onEntered(appearing) {\n        onEntered(appearing);\n        entered.current = true;\n        cancelUnmountFocus.current = false;\n        animatedOnceRef.current = true;\n      },\n      onExited() {\n        onExited();\n        entered.current = false;\n      },\n      onExiting,\n      disableTransition,\n      isFocusTypeDisabled(type) {\n        if (role === \"listbox\") {\n          return !isSheet;\n        }\n\n        if (type === \"keyboard\") {\n          return isSheet;\n        }\n\n        const isHoverDisabled = mouse && hoverTimeoutRef.current === 0;\n        if (type === \"mount\") {\n          return isHoverDisabled;\n        }\n\n        return (\n          isHoverDisabled ||\n          cancelUnmountFocus.current ||\n          (root && !!activeId && id !== activeId)\n        );\n      },\n    });\n\n    const { ref, style, callbacks } = useFixedPositioning({\n      ...transitionOptions,\n      onEnter,\n      style: isSheet ? propStyle : menuStyle,\n      fixedTo,\n      anchor: getDefaultAnchor({\n        anchor,\n        menubar,\n        floating,\n        menuitem: !root && menuitem,\n        horizontal,\n      }),\n      vwMargin,\n      vhMargin,\n      xMargin,\n      yMargin,\n      width,\n      transformOrigin,\n      preventOverlap,\n      disableSwapping,\n      disableVHBounds,\n      initialX,\n      initialY,\n      getFixedPositionOptions,\n      onResize: closeOnResize ? hideWithoutRefocus : undefined,\n      onScroll(_event, data) {\n        if (!data.visible || closeOnScroll) {\n          hideWithoutRefocus();\n        }\n      },\n    });\n    const { rendered, disablePortal, elementProps } = useScaleTransition({\n      nodeRef: ref,\n      className: cnb(!isSheet && menuClassName, className),\n      transitionIn: visible,\n      vertical: !horizontal,\n      temporary,\n      timeout: isSheet || disableTransition ? 0 : timeout,\n      classNames,\n      appear,\n      enter,\n      exit,\n      onExit,\n      onExiting: transitionOptions.onExiting,\n      exitedHidden: true,\n      ...callbacks,\n    });\n    useScrollLock(visible && preventScroll);\n\n    // need to make sure that the useEffect does not refire for hiding on click\n    // events because of the `window.requestAnimationFrame`. It'll make it so\n    // that menu items that update state are unable to close when clicked\n    const hide = useRef(onRequestClose);\n    useEffect(() => {\n      hide.current = onRequestClose;\n    });\n    useEffect(() => {\n      if (!visible) {\n        return;\n      }\n\n      const callback = (event: globalThis.MouseEvent): void => {\n        // this is required for when the transition is disabled\n        if (!entered.current) {\n          return;\n        }\n\n        // if the user clicks outside of the menu to close it, the toggle button\n        // should not be focused. instead the nearest focusable element from the\n        // click event should be focused when Tab or Shift + tab is pressed\n        cancelUnmountFocus.current =\n          !(event.target instanceof HTMLElement) ||\n          !event.target.closest(`[role=\"${role}\"]`);\n\n        // this won't be called if `event.stopPropagation()` is called\n        hide.current();\n        disableHoverMode();\n      };\n\n      // wait an animation frame so the initial click event that caused the menu\n      // to become visible does not immediately close the menu\n      const frame = window.requestAnimationFrame(() => {\n        window.addEventListener(\"click\", callback);\n      });\n\n      return () => {\n        window.cancelAnimationFrame(frame);\n        window.removeEventListener(\"click\", callback);\n      };\n    }, [disableHoverMode, role, visible]);\n\n    return (\n      <MenuConfigurationProvider\n        horizontal={horizontal}\n        renderAsSheet={renderAsSheet}\n        sheetFooter={sheetFooter}\n        sheetHeader={sheetHeader}\n        sheetPosition={sheetPosition}\n        sheetVerticalSize={sheetVerticalSize}\n      >\n        <MenuSheet\n          aria-label={ariaLabel}\n          aria-labelledby={ariaLabelledBy as string}\n          header={sheetHeader}\n          footer={sheetFooter}\n          position={sheetPosition}\n          verticalSize={sheetVerticalSize}\n          visible={visible}\n          enabled={isSheet}\n          onRequestClose={onRequestClose}\n          style={sheetStyle}\n          className={sheetClassName}\n          disablePortal={propDisablePortal}\n          temporary={temporary}\n          disableTransition={disableTransition}\n          {...sheetProps}\n        >\n          <Portal disabled={isSheet || (propDisablePortal ?? disablePortal)}>\n            {(rendered || isSheet) && (\n              <MenuWidget\n                {...remaining}\n                {...elementProps}\n                {...eventHandlers}\n                id={id}\n                role={role}\n                style={isSheet ? propStyle : style}\n                isSheet={isSheet}\n                tabIndex={tabIndex}\n                horizontal={horizontal}\n                listProps={listProps}\n                listStyle={listStyle}\n                listClassName={listClassName}\n                disableElevation={disableElevation}\n                cancelUnmountFocus={cancelUnmountFocus}\n              >\n                {children}\n              </MenuWidget>\n            )}\n          </Portal>\n        </MenuSheet>\n      </MenuConfigurationProvider>\n    );\n  }\n);\n"],"names":["cnb","forwardRef","useEffect","useRef","useFocusContainer","useUserInteractionMode","useAppSize","Portal","useFixedPositioning","useScrollLock","useScaleTransition","useEnsuredId","MenuConfigurationProvider","useMenuConfiguration","MenuSheet","MenuWidget","useMenuBarContext","getDefaultAnchor","noop","Menu","props","propRef","id","propId","style","propStyle","role","children","horizontal","_horizontal","sheetHeader","_sheetHeader","sheetFooter","_sheetFooter","renderAsSheet","_renderAsSheet","sheetPosition","_sheetPosition","sheetVerticalSize","_sheetVerticalSize","sheetProps","sheetStyle","sheetClassName","menuStyle","menuClassName","disableElevation","temporary","tabIndex","fixedTo","className","classNames","timeout","appear","enter","exit","onEnter","onEntering","onEntered","onExit","onExiting","onExited","onKeyDown","listProps","listStyle","listClassName","visible","onRequestClose","floating","anchor","closeOnResize","closeOnScroll","preventScroll","vwMargin","vhMargin","xMargin","yMargin","width","transformOrigin","preventOverlap","disableSwapping","disableVHBounds","initialX","initialY","getFixedPositionOptions","disablePortal","propDisablePortal","disableTransition","remaining","ariaLabel","ariaLabelledBy","root","menubar","menuitem","activeId","animatedOnceRef","hoverTimeoutRef","disableHoverMode","isPhone","isSheet","entered","cancelUnmountFocus","hideWithoutRefocus","current","mode","mouse","eventHandlers","transitionOptions","nodeRef","activate","event","key","stopPropagation","preventDefault","appearing","isFocusTypeDisabled","type","isHoverDisabled","ref","callbacks","onResize","undefined","onScroll","_event","data","rendered","elementProps","transitionIn","vertical","exitedHidden","hide","callback","target","HTMLElement","closest","frame","window","requestAnimationFrame","addEventListener","cancelAnimationFrame","removeEventListener","aria-label","aria-labelledby","header","footer","position","verticalSize","enabled","disabled"],"mappings":"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"}

package/dist/menu/MenuItemSeparator.d.ts

@@ -1,8 +1,7 @@
 import { type HTMLAttributes } from "react";
 import { type DividerProps } from "../divider/Divider.js";
-import { type VerticalDividerProps } from "../divider/VerticalDivider.js";
 /** @remarks \@since 5.0.0 */
-export interface MenuItemSeparatorProps extends HTMLAttributes<HTMLLIElement>, Pick<DividerProps, "inset" | "vertical">, Pick<VerticalDividerProps, "maxHeight"> {
+export interface MenuItemSeparatorProps extends HTMLAttributes<HTMLLIElement>, Pick<DividerProps, "inset" | "vertical"> {
 }
 /**
  * **Client Component**

package/dist/menu/MenuItemSeparator.js

@@ -2,7 +2,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { forwardRef } from "react";
 import { divider } from "../divider/styles.js";
-import { useVerticalDividerHeight } from "../divider/useVerticalDividerHeight.js";
 import { useMenuConfiguration } from "./MenuConfigurationProvider.js";
 /**
  * **Client Component**
@@ -13,18 +12,13 @@ import { useMenuConfiguration } from "./MenuConfigurationProvider.js";
  *
  * @remarks \@since 5.0.0 Renders as an `<li>` instead of a `<div>` or `<hr />`.
  */ export const MenuItemSeparator = /*#__PURE__*/ forwardRef(function MenuItemSeparator(props, ref) {
-    const { style, className, maxHeight, inset, vertical: propVertical, children, ...remaining } = props;
+    const { className, inset, vertical: propVertical, children, ...remaining } = props;
     const horizontal = useMenuConfiguration().horizontal;
     const vertical = propVertical ?? horizontal;
-    const heightProps = useVerticalDividerHeight({
-        ref,
-        style,
-        maxHeight: vertical ? maxHeight ?? 1 : 0
-    });
     return /*#__PURE__*/ _jsx("li", {
         ...remaining,
-        ...heightProps,
         "aria-orientation": vertical ? "vertical" : undefined,
+        ref: ref,
         role: "separator",
         className: divider({
             inset: inset && !vertical,

package/dist/menu/MenuItemSeparator.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/menu/MenuItemSeparator.tsx"],"sourcesContent":["\"use client\";\nimport { forwardRef, type HTMLAttributes } from \"react\";\nimport { type DividerProps } from \"../divider/Divider.js\";\nimport { type VerticalDividerProps } from \"../divider/VerticalDivider.js\";\nimport { divider } from \"../divider/styles.js\";\nimport { useVerticalDividerHeight } from \"../divider/useVerticalDividerHeight.js\";\nimport { useMenuConfiguration } from \"./MenuConfigurationProvider.js\";\n\n/** @remarks \\@since 5.0.0 */\nexport interface MenuItemSeparatorProps\n  extends HTMLAttributes<HTMLLIElement>,\n    Pick<DividerProps, \"inset\" | \"vertical\">,\n    Pick<VerticalDividerProps, \"maxHeight\"> {}\n\n/**\n * **Client Component**\n *\n * This component renders a `<li role=\"separator\">` with the divider styles. It\n * will also automatically render itself vertically instead of horizontally if\n * the menu is rendering horizontally.\n *\n * @remarks \\@since 5.0.0 Renders as an `<li>` instead of a `<div>` or `<hr />`.\n */\nexport const MenuItemSeparator = forwardRef<\n  HTMLLIElement,\n  MenuItemSeparatorProps\n>(function MenuItemSeparator(props, ref) {\n  const {\n    style,\n    className,\n    maxHeight,\n    inset,\n    vertical: propVertical,\n    children,\n    ...remaining\n  } = props;\n\n  const horizontal = useMenuConfiguration().horizontal;\n  const vertical = propVertical ?? horizontal;\n  const heightProps = useVerticalDividerHeight({\n    ref,\n    style,\n    maxHeight: vertical ? maxHeight ?? 1 : 0,\n  });\n\n  return (\n    <li\n      {...remaining}\n      {...heightProps}\n      aria-orientation={vertical ? \"vertical\" : undefined}\n      role=\"separator\"\n      className={divider({ inset: inset && !vertical, vertical, className })}\n    >\n      {children}\n    </li>\n  );\n});\n"],"names":["forwardRef","divider","useVerticalDividerHeight","useMenuConfiguration","MenuItemSeparator","props","ref","style","className","maxHeight","inset","vertical","propVertical","children","remaining","horizontal","heightProps","li","aria-orientation","undefined","role"],"mappings":"AAAA;;AACA,SAASA,UAAU,QAA6B,QAAQ;AAGxD,SAASC,OAAO,QAAQ,uBAAuB;AAC/C,SAASC,wBAAwB,QAAQ,yCAAyC;AAClF,SAASC,oBAAoB,QAAQ,iCAAiC;AAQtE;;;;;;;;CAQC,GACD,OAAO,MAAMC,kCAAoBJ,WAG/B,SAASI,kBAAkBC,KAAK,EAAEC,GAAG;IACrC,MAAM,EACJC,KAAK,EACLC,SAAS,EACTC,SAAS,EACTC,KAAK,EACLC,UAAUC,YAAY,EACtBC,QAAQ,EACR,GAAGC,WACJ,GAAGT;IAEJ,MAAMU,aAAaZ,uBAAuBY,UAAU;IACpD,MAAMJ,WAAWC,gBAAgBG;IACjC,MAAMC,cAAcd,yBAAyB;QAC3CI;QACAC;QACAE,WAAWE,WAAWF,aAAa,IAAI;IACzC;IAEA,qBACE,KAACQ;QACE,GAAGH,SAAS;QACZ,GAAGE,WAAW;QACfE,oBAAkBP,WAAW,aAAaQ;QAC1CC,MAAK;QACLZ,WAAWP,QAAQ;YAAES,OAAOA,SAAS,CAACC;YAAUA;YAAUH;QAAU;kBAEnEK;;AAGP,GAAG"}
+{"version":3,"sources":["../../src/menu/MenuItemSeparator.tsx"],"sourcesContent":["\"use client\";\nimport { forwardRef, type HTMLAttributes } from \"react\";\nimport { type DividerProps } from \"../divider/Divider.js\";\nimport { divider } from \"../divider/styles.js\";\nimport { useMenuConfiguration } from \"./MenuConfigurationProvider.js\";\n\n/** @remarks \\@since 5.0.0 */\nexport interface MenuItemSeparatorProps\n  extends HTMLAttributes<HTMLLIElement>,\n    Pick<DividerProps, \"inset\" | \"vertical\"> {}\n\n/**\n * **Client Component**\n *\n * This component renders a `<li role=\"separator\">` with the divider styles. It\n * will also automatically render itself vertically instead of horizontally if\n * the menu is rendering horizontally.\n *\n * @remarks \\@since 5.0.0 Renders as an `<li>` instead of a `<div>` or `<hr />`.\n */\nexport const MenuItemSeparator = forwardRef<\n  HTMLLIElement,\n  MenuItemSeparatorProps\n>(function MenuItemSeparator(props, ref) {\n  const {\n    className,\n    inset,\n    vertical: propVertical,\n    children,\n    ...remaining\n  } = props;\n\n  const horizontal = useMenuConfiguration().horizontal;\n  const vertical = propVertical ?? horizontal;\n\n  return (\n    <li\n      {...remaining}\n      aria-orientation={vertical ? \"vertical\" : undefined}\n      ref={ref}\n      role=\"separator\"\n      className={divider({ inset: inset && !vertical, vertical, className })}\n    >\n      {children}\n    </li>\n  );\n});\n"],"names":["forwardRef","divider","useMenuConfiguration","MenuItemSeparator","props","ref","className","inset","vertical","propVertical","children","remaining","horizontal","li","aria-orientation","undefined","role"],"mappings":"AAAA;;AACA,SAASA,UAAU,QAA6B,QAAQ;AAExD,SAASC,OAAO,QAAQ,uBAAuB;AAC/C,SAASC,oBAAoB,QAAQ,iCAAiC;AAOtE;;;;;;;;CAQC,GACD,OAAO,MAAMC,kCAAoBH,WAG/B,SAASG,kBAAkBC,KAAK,EAAEC,GAAG;IACrC,MAAM,EACJC,SAAS,EACTC,KAAK,EACLC,UAAUC,YAAY,EACtBC,QAAQ,EACR,GAAGC,WACJ,GAAGP;IAEJ,MAAMQ,aAAaV,uBAAuBU,UAAU;IACpD,MAAMJ,WAAWC,gBAAgBG;IAEjC,qBACE,KAACC;QACE,GAAGF,SAAS;QACbG,oBAAkBN,WAAW,aAAaO;QAC1CV,KAAKA;QACLW,MAAK;QACLV,WAAWL,QAAQ;YAAEM,OAAOA,SAAS,CAACC;YAAUA;YAAUF;QAAU;kBAEnEI;;AAGP,GAAG"}

package/dist/menu/MenuSheet.d.ts

@@ -2,6 +2,10 @@ import { type CSSProperties, type ReactElement, type ReactNode } from "react";
 import { type BaseSheetProps } from "../sheet/Sheet.js";
 import { type LabelRequiredForA11y, type PropsWithRef } from "../types.js";
 import { type RenderMenuAsSheet } from "./MenuConfigurationProvider.js";
+/**
+ * @remarks \@since 6.0.0
+ */
+export type MenuSheetConfigurableProps = Omit<BaseSheetProps, "visible" | "onRequestClose">;
 /**
  * @remarks \@since 6.0.0
  */
@@ -22,11 +26,12 @@ export interface MenuSheetConvenienceProps {
      *       // custom inline style
      *     },
      *     className: "come-class-name",
+     *     horizontalSize: "touch",
      *   }}
      * />
      * ```
      */
-    sheetProps?: PropsWithRef<BaseSheetProps, HTMLDivElement>;
+    sheetProps?: PropsWithRef<MenuSheetConfigurableProps, HTMLDivElement>;
     /**
      * Convenience prop to apply custom style to the `Sheet` component when the
      * `Menu` is being rendered as a `Sheet`.

package/dist/menu/MenuSheet.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/menu/MenuSheet.tsx"],"sourcesContent":["\"use client\";\nimport { type CSSProperties, type ReactElement, type ReactNode } from \"react\";\nimport { Sheet, type BaseSheetProps } from \"../sheet/Sheet.js\";\nimport { type LabelRequiredForA11y, type PropsWithRef } from \"../types.js\";\nimport { type RenderMenuAsSheet } from \"./MenuConfigurationProvider.js\";\n\nconst noop = (): void => {\n  // do nothing\n};\n\n/**\n * @remarks \\@since 6.0.0\n */\nexport interface MenuSheetConvenienceProps {\n  /**\n   * This can be used to apply additional props to the `Sheet` component when\n   * the `Menu` is being rendered as a `Sheet`.\n   *\n   * Note: You can override the `style` and `className` using\n   * {@link sheetStyle} and {@link sheetClassName} instead for convenience.\n   *\n   * @example\n   * ```tsx\n   * <Menu\n   *   {...props}\n   *   sheetProps={{\n   *     style: {\n   *       // custom inline style\n   *     },\n   *     className: \"come-class-name\",\n   *   }}\n   * />\n   * ```\n   */\n  sheetProps?: PropsWithRef<BaseSheetProps, HTMLDivElement>;\n\n  /**\n   * Convenience prop to apply custom style to the `Sheet` component when the\n   * `Menu` is being rendered as a `Sheet`.\n   */\n  sheetStyle?: CSSProperties;\n\n  /**\n   * Convenience prop to apply custom class name to the `Sheet` component when\n   * the `Menu` is being rendered as a `Sheet`.\n   */\n  sheetClassName?: string;\n}\n\n/**\n * @internal\n * @remarks\n * \\@since 5.0.0\n * \\@since 6.0.0 Updated to use the latest menu API.\n */\nexport interface MenuSheetProps extends BaseSheetProps {\n  /** {@inheritDoc MenuConfiguration.sheetHeader} */\n  header?: ReactNode;\n  /** {@inheritDoc MenuConfiguration.sheetFooter} */\n  footer?: ReactNode;\n  children: ReactNode;\n\n  /** @remarks \\@since 6.0.0 */\n  enabled: RenderMenuAsSheet;\n}\n\n/**\n * **Client Component**\n *\n * Implements a `Menu` using the `Sheet` component that probably shouldn't\n * really be used externally.\n *\n * @internal\n * @remarks\n * \\@since 5.0.0\n * \\@since 6.0.0 Added the `enabled` prop and does not render a custom `Menu`\n * implementation.\n */\nexport function MenuSheet(\n  props: LabelRequiredForA11y<MenuSheetProps>\n): ReactElement {\n  const {\n    header,\n    footer,\n    children,\n    onClick = noop,\n    overlayProps,\n    enabled,\n    ...remaining\n  } = props;\n  const { onRequestClose } = props;\n\n  if (!enabled) {\n    return <>{children}</>;\n  }\n\n  return (\n    <Sheet\n      {...remaining}\n      onClick={(event) => {\n        onClick(event);\n\n        // Prevent closing parent sheet/menus if an element in the header or\n        // footer is clicked\n        if (\n          !(event.target instanceof HTMLElement) ||\n          event.target\n            .closest('.rmd-menu,[role=\"dialog\"]')\n            ?.getAttribute(\"role\") === \"dialog\"\n        ) {\n          event.stopPropagation();\n        }\n      }}\n      overlayProps={{\n        ...overlayProps,\n        onClick: (event) => {\n          overlayProps?.onClick?.(event);\n\n          // prevent closing parent menus if the overlay element is clicked.\n          event.stopPropagation();\n          onRequestClose();\n        },\n      }}\n    >\n      {header}\n      {children}\n      {footer}\n    </Sheet>\n  );\n}\n"],"names":["Sheet","noop","MenuSheet","props","header","footer","children","onClick","overlayProps","enabled","remaining","onRequestClose","event","target","HTMLElement","closest","getAttribute","stopPropagation"],"mappings":"AAAA;;AAEA,SAASA,KAAK,QAA6B,oBAAoB;AAI/D,MAAMC,OAAO;AACX,aAAa;AACf;AA0DA;;;;;;;;;;;CAWC,GACD,OAAO,SAASC,UACdC,KAA2C;IAE3C,MAAM,EACJC,MAAM,EACNC,MAAM,EACNC,QAAQ,EACRC,UAAUN,IAAI,EACdO,YAAY,EACZC,OAAO,EACP,GAAGC,WACJ,GAAGP;IACJ,MAAM,EAAEQ,cAAc,EAAE,GAAGR;IAE3B,IAAI,CAACM,SAAS;QACZ,qBAAO;sBAAGH;;IACZ;IAEA,qBACE,MAACN;QACE,GAAGU,SAAS;QACbH,SAAS,CAACK;YACRL,QAAQK;YAER,oEAAoE;YACpE,oBAAoB;YACpB,IACE,CAAEA,CAAAA,MAAMC,MAAM,YAAYC,WAAU,KACpCF,MAAMC,MAAM,CACTE,OAAO,CAAC,8BACPC,aAAa,YAAY,UAC7B;gBACAJ,MAAMK,eAAe;YACvB;QACF;QACAT,cAAc;YACZ,GAAGA,YAAY;YACfD,SAAS,CAACK;gBACRJ,cAAcD,UAAUK;gBAExB,kEAAkE;gBAClEA,MAAMK,eAAe;gBACrBN;YACF;QACF;;YAECP;YACAE;YACAD;;;AAGP"}
+{"version":3,"sources":["../../src/menu/MenuSheet.tsx"],"sourcesContent":["\"use client\";\nimport { type CSSProperties, type ReactElement, type ReactNode } from \"react\";\nimport { Sheet, type BaseSheetProps } from \"../sheet/Sheet.js\";\nimport { type LabelRequiredForA11y, type PropsWithRef } from \"../types.js\";\nimport { type RenderMenuAsSheet } from \"./MenuConfigurationProvider.js\";\n\nconst noop = (): void => {\n  // do nothing\n};\n\n/**\n * @remarks \\@since 6.0.0\n */\nexport type MenuSheetConfigurableProps = Omit<\n  BaseSheetProps,\n  \"visible\" | \"onRequestClose\"\n>;\n\n/**\n * @remarks \\@since 6.0.0\n */\nexport interface MenuSheetConvenienceProps {\n  /**\n   * This can be used to apply additional props to the `Sheet` component when\n   * the `Menu` is being rendered as a `Sheet`.\n   *\n   * Note: You can override the `style` and `className` using\n   * {@link sheetStyle} and {@link sheetClassName} instead for convenience.\n   *\n   * @example\n   * ```tsx\n   * <Menu\n   *   {...props}\n   *   sheetProps={{\n   *     style: {\n   *       // custom inline style\n   *     },\n   *     className: \"come-class-name\",\n   *     horizontalSize: \"touch\",\n   *   }}\n   * />\n   * ```\n   */\n  sheetProps?: PropsWithRef<MenuSheetConfigurableProps, HTMLDivElement>;\n\n  /**\n   * Convenience prop to apply custom style to the `Sheet` component when the\n   * `Menu` is being rendered as a `Sheet`.\n   */\n  sheetStyle?: CSSProperties;\n\n  /**\n   * Convenience prop to apply custom class name to the `Sheet` component when\n   * the `Menu` is being rendered as a `Sheet`.\n   */\n  sheetClassName?: string;\n}\n\n/**\n * @internal\n * @remarks\n * \\@since 5.0.0\n * \\@since 6.0.0 Updated to use the latest menu API.\n */\nexport interface MenuSheetProps extends BaseSheetProps {\n  /** {@inheritDoc MenuConfiguration.sheetHeader} */\n  header?: ReactNode;\n  /** {@inheritDoc MenuConfiguration.sheetFooter} */\n  footer?: ReactNode;\n  children: ReactNode;\n\n  /** @remarks \\@since 6.0.0 */\n  enabled: RenderMenuAsSheet;\n}\n\n/**\n * **Client Component**\n *\n * Implements a `Menu` using the `Sheet` component that probably shouldn't\n * really be used externally.\n *\n * @internal\n * @remarks\n * \\@since 5.0.0\n * \\@since 6.0.0 Added the `enabled` prop and does not render a custom `Menu`\n * implementation.\n */\nexport function MenuSheet(\n  props: LabelRequiredForA11y<MenuSheetProps>\n): ReactElement {\n  const {\n    header,\n    footer,\n    children,\n    onClick = noop,\n    overlayProps,\n    enabled,\n    ...remaining\n  } = props;\n  const { onRequestClose } = props;\n\n  if (!enabled) {\n    return <>{children}</>;\n  }\n\n  return (\n    <Sheet\n      {...remaining}\n      onClick={(event) => {\n        onClick(event);\n\n        // Prevent closing parent sheet/menus if an element in the header or\n        // footer is clicked\n        if (\n          !(event.target instanceof HTMLElement) ||\n          event.target\n            .closest('.rmd-menu,[role=\"dialog\"]')\n            ?.getAttribute(\"role\") === \"dialog\"\n        ) {\n          event.stopPropagation();\n        }\n      }}\n      overlayProps={{\n        ...overlayProps,\n        onClick: (event) => {\n          overlayProps?.onClick?.(event);\n\n          // prevent closing parent menus if the overlay element is clicked.\n          event.stopPropagation();\n          onRequestClose();\n        },\n      }}\n    >\n      {header}\n      {children}\n      {footer}\n    </Sheet>\n  );\n}\n"],"names":["Sheet","noop","MenuSheet","props","header","footer","children","onClick","overlayProps","enabled","remaining","onRequestClose","event","target","HTMLElement","closest","getAttribute","stopPropagation"],"mappings":"AAAA;;AAEA,SAASA,KAAK,QAA6B,oBAAoB;AAI/D,MAAMC,OAAO;AACX,aAAa;AACf;AAmEA;;;;;;;;;;;CAWC,GACD,OAAO,SAASC,UACdC,KAA2C;IAE3C,MAAM,EACJC,MAAM,EACNC,MAAM,EACNC,QAAQ,EACRC,UAAUN,IAAI,EACdO,YAAY,EACZC,OAAO,EACP,GAAGC,WACJ,GAAGP;IACJ,MAAM,EAAEQ,cAAc,EAAE,GAAGR;IAE3B,IAAI,CAACM,SAAS;QACZ,qBAAO;sBAAGH;;IACZ;IAEA,qBACE,MAACN;QACE,GAAGU,SAAS;QACbH,SAAS,CAACK;YACRL,QAAQK;YAER,oEAAoE;YACpE,oBAAoB;YACpB,IACE,CAAEA,CAAAA,MAAMC,MAAM,YAAYC,WAAU,KACpCF,MAAMC,MAAM,CACTE,OAAO,CAAC,8BACPC,aAAa,YAAY,UAC7B;gBACAJ,MAAMK,eAAe;YACvB;QACF;QACAT,cAAc;YACZ,GAAGA,YAAY;YACfD,SAAS,CAACK;gBACRJ,cAAcD,UAAUK;gBAExB,kEAAkE;gBAClEA,MAAMK,eAAe;gBACrBN;YACF;QACF;;YAECP;YACAE;YACAD;;;AAGP"}

package/dist/menu/_menu.scss

@@ -20,41 +20,21 @@ $min-width: 7rem !default;
 
 $spacing: 1rem !default;
 
-$var-lookup: (
-  background-color: (
-    var: --rmd-menu-background-color,
-    value: $background-color,
-  ),
-  color: (
-    var: --rmd-menu-color,
-    value: $color,
-  ),
-  min-width: (
-    var: --rmd-menu-min-width,
-    value: $min-width,
-  ),
-  spacing: (
-    var: --rmd-menu-spacing,
-    value: $spacing,
-  ),
-);
+$variables: (background-color, color, min-width, spacing);
 
 @function get-var($name, $fallback: null) {
-  $found: utils.validate($var-lookup, $name, "dialog var");
-  $var: map.get($found, var);
-  $value: if($fallback, $fallback, map.get($found, value));
-
-  @if $value {
-    @return var(#{$var}, #{$value});
+  $var: utils.get-var-name($variables, $name, "menu");
+  @if $fallback {
+    @return var(#{$var}, #{$fallback});
   }
 
   @return var(#{$var});
 }
 
 @mixin set-var($name, $value) {
-  $var: map.get(utils.validate($var-lookup, $name, "dialog var"), var);
-
-  #{$var}: #{$value};
+  @if $value {
+    #{utils.get-var-name($variables, $name, "menu")}: #{$value};
+  }
 }
 
 @mixin use-var($property, $name: $property, $fallback: null) {
@@ -122,6 +102,15 @@ $var-lookup: (
   }
 }
 
+@mixin variables {
+  @if not $disable-everything {
+    @include set-var(background-color, $background-color);
+    @include set-var(color, $color);
+    @include set-var(min-width, $min-width);
+    @include set-var(spacing, $spacing);
+  }
+}
+
 @mixin styles {
   @if not $disable-everything {
     @include menu-styles;

package/dist/overlay/_overlay.scss

@@ -9,39 +9,34 @@ $z-index: utils.$temporary-element-z-index !default;
 $transition-duration: transition.$linear-duration !default;
 $transition-timing-function: transition.$linear-timing-function !default;
 
-$var-lookup: (
-  background-color: (
-    var: --rmd-overlay-background-color,
-    value: $background-color,
-  ),
-  z-index: (
-    var: --rmd-overlay-z-index,
-    value: $z-index,
-  ),
-);
+$variables: (background-color, z-index);
 
 @function get-var($name, $fallback: null) {
-  $found: utils.validate($var-lookup, $name, "overlay var");
-  $var: map.get($found, var);
-  $value: if($fallback, $fallback, map.get($found, value));
-
-  @if $value {
-    @return var(#{$var}, #{$value});
+  $var: utils.get-var-name($variables, $name, "overlay");
+  @if $fallback {
+    @return var(#{$var}, #{$fallback});
   }
 
   @return var(#{$var});
 }
 
 @mixin set-var($name, $value) {
-  $var: map.get(utils.validate($var-lookup, $name, "overlay var"), var);
-
-  #{$var}: #{$value};
+  @if $value {
+    #{utils.get-var-name($variables, $name, "overlay")}: #{$value};
+  }
 }
 
 @mixin use-var($property, $name: $property, $fallback: null) {
   #{$property}: get-var($name, $fallback);
 }
 
+@mixin variables {
+  @if not $disable-everything {
+    @include set-var(background-color, $background-color);
+    @include set-var(z-index, $z-index);
+  }
+}
+
 @mixin styles {
   @if not $disable-everything {
     .rmd-overlay {

package/dist/progress/CircularProgress.d.ts

@@ -1,4 +1,5 @@
 import { type CSSProperties, type HTMLAttributes } from "react";
+import { type LabelRequiredForA11y } from "../types.js";
 import { type ProgressProps } from "./types.js";
 /**
  * @remarks \@since 6.0.0
@@ -97,7 +98,7 @@ export interface CircularProgressProps extends Omit<HTMLAttributes<HTMLSpanEleme
  * import { type ReactElement } from "react";
  *
  * function Example(): ReactElement {
- *   return <CircularProgress />;
+ *   return <CircularProgress aria-label="Loading" />;
  * }
  * ```
  *
@@ -111,11 +112,11 @@ export interface CircularProgressProps extends Omit<HTMLAttributes<HTMLSpanEleme
  *   // a number from 0 - 100
  *   const [progress, setProgress] = useState(0);
  *
- *   return <CircularProgress value={progress} />;
+ *   return <CircularProgress aria-label="File upload" value={progress} />;
  * }
  * ```
  *
  * @remarks \@since 6.0.0 Updated the determinate circular progress to no longer
- * rotate while increasing the value.
+ * rotate while increasing the value and require a label for accessibility.
  */
-export declare const CircularProgress: import("react").ForwardRefExoticComponent<CircularProgressProps & import("react").RefAttributes<HTMLSpanElement>>;
+export declare const CircularProgress: import("react").ForwardRefExoticComponent<LabelRequiredForA11y<CircularProgressProps> & import("react").RefAttributes<HTMLSpanElement>>;

package/dist/progress/CircularProgress.js

@@ -16,7 +16,7 @@ const styles = bem("rmd-circular-progress");
  * import { type ReactElement } from "react";
  *
  * function Example(): ReactElement {
- *   return <CircularProgress />;
+ *   return <CircularProgress aria-label="Loading" />;
  * }
  * ```
  *
@@ -30,12 +30,12 @@ const styles = bem("rmd-circular-progress");
  *   // a number from 0 - 100
  *   const [progress, setProgress] = useState(0);
  *
- *   return <CircularProgress value={progress} />;
+ *   return <CircularProgress aria-label="File upload" value={progress} />;
  * }
  * ```
  *
  * @remarks \@since 6.0.0 Updated the determinate circular progress to no longer
- * rotate while increasing the value.
+ * 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 = "primary", dense = false, dashoffset = 187, disableShrink = false, disableCentered = false, disableTransition = false, ...remaining } = props;
     const id = useEnsuredId(propId, "circular-progress");

package/dist/progress/CircularProgress.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/progress/CircularProgress.tsx"],"sourcesContent":["import { cnb } from \"cnbuilder\";\nimport {\n  forwardRef,\n  useMemo,\n  type CSSProperties,\n  type HTMLAttributes,\n} from \"react\";\nimport { cssUtils } from \"../cssUtils.js\";\nimport { useEnsuredId } from \"../useEnsuredId.js\";\nimport { bem } from \"../utils/bem.js\";\nimport { getPercentage } from \"../utils/getPercentage.js\";\nimport { type ProgressProps } from \"./types.js\";\n\n/**\n * @remarks \\@since 6.0.0\n * Removed the `determinateRotateDegrees` prop since the determinate state no\n * longer rotates while increasing value.\n * Added the `disableShrink` prop.\n * Renamed the `small` prop to `dense` to match other components.\n */\nexport interface CircularProgressProps\n  extends Omit<HTMLAttributes<HTMLSpanElement>, \"id\">,\n    ProgressProps {\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   * Boolean if the circular progress should be centered using left and right\n   * margins.\n   *\n   * @defaultValue `false`\n   */\n  disableCentered?: boolean;\n\n  /**\n   * Set to `true` to render as a smaller size.\n   *\n   * @defaultValue `false`\n   * @remarks\n   * \\@since 2.3.0\n   * \\@since 6.0.0 Renamed from `small`\n   */\n  dense?: boolean;\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   * @remarks \\@since 6.0.0\n   */\n  disableShrink?: boolean;\n}\n\nconst styles = bem(\"rmd-circular-progress\");\n\n/**\n * **Server Component**\n *\n * @example\n * Indeterminate Example\n * ```tsx\n * import { CircularProgress } from \"@react-md/core\":\n * import { type ReactElement } from \"react\";\n *\n * function Example(): ReactElement {\n *   return <CircularProgress />;\n * }\n * ```\n *\n * @example\n * Determinate Example\n * ```tsx\n * import { CircularProgress } from \"@react-md/core\":\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 value={progress} />;\n * }\n * ```\n *\n * @remarks \\@since 6.0.0 Updated the determinate circular progress to no longer\n * rotate while increasing the value.\n */\nexport const CircularProgress = forwardRef<\n  HTMLSpanElement,\n  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 = \"primary\",\n    dense = false,\n    dashoffset = 187,\n    disableShrink = false,\n    disableCentered = false,\n    disableTransition = false,\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 determinate = typeof progress === \"number\";\n  const indeterminate = !determinate;\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={cnb(\n        styles({ dense, centered: !disableCentered }),\n        theme !== \"current-color\" && cssUtils({ textColor: theme }),\n        className\n      )}\n    >\n      <svg\n        style={svgStyle}\n        className={cnb(\n          styles(\"svg\", {\n            determinate,\n            indeterminate: indeterminate && !disableShrink,\n            \"rotate-only\": indeterminate && disableShrink,\n          }),\n          svgClassName\n        )}\n        viewBox={viewBox}\n      >\n        <circle\n          style={circleStyle}\n          className={cnb(\n            styles(\"circle\", {\n              animate: !disableTransition && determinate,\n              determinate,\n              indeterminate: indeterminate && !disableShrink,\n              \"rotate-only\": indeterminate && disableShrink,\n            }),\n            circleClassName\n          )}\n          r={radius}\n          cx={center}\n          cy={center}\n        />\n      </svg>\n    </span>\n  );\n});\n"],"names":["cnb","forwardRef","useMemo","cssUtils","useEnsuredId","bem","getPercentage","styles","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","determinate","indeterminate","span","role","aria-valuemin","aria-valuemax","aria-valuenow","centered","textColor","svg","style","circle","animate","r","cx","cy"],"mappings":";AAAA,SAASA,GAAG,QAAQ,YAAY;AAChC,SACEC,UAAU,EACVC,OAAO,QAGF,QAAQ;AACf,SAASC,QAAQ,QAAQ,iBAAiB;AAC1C,SAASC,YAAY,QAAQ,qBAAqB;AAClD,SAASC,GAAG,QAAQ,kBAAkB;AACtC,SAASC,aAAa,QAAQ,4BAA4B;AAuG1D,MAAMC,SAASF,IAAI;AAEnB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA8BC,GACD,OAAO,MAAMG,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,QAAQ,SAAS,EACjBC,QAAQ,KAAK,EACbC,aAAa,GAAG,EAChBC,gBAAgB,KAAK,EACrBC,kBAAkB,KAAK,EACvBC,oBAAoB,KAAK,EACzB,GAAGC,WACJ,GAAGtB;IAEJ,MAAME,KAAKP,aAAaQ,QAAQ;IAChC,IAAIoB;IACJ,IAAI,OAAOb,UAAU,UAAU;QAC7Ba,WAAW1B,cAAc;YAAEc;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,cAAc,OAAOH,aAAa;IACxC,MAAMI,gBAAgB,CAACD;IACvB,qBACE,KAACE;QACE,GAAGN,SAAS;QACbpB,IAAIA;QACJD,KAAKA;QACL4B,MAAK;QACLC,iBAAenB;QACfoB,iBAAenB;QACfoB,iBAAetB;QACfN,WAAWb,IACTO,OAAO;YAAEmB;YAAOgB,UAAU,CAACb;QAAgB,IAC3CJ,UAAU,mBAAmBtB,SAAS;YAAEwC,WAAWlB;QAAM,IACzDZ;kBAGF,cAAA,KAAC+B;YACCC,OAAO/B;YACPD,WAAWb,IACTO,OAAO,OAAO;gBACZ4B;gBACAC,eAAeA,iBAAiB,CAACR;gBACjC,eAAeQ,iBAAiBR;YAClC,IACAb;YAEFS,SAASA;sBAET,cAAA,KAACsB;gBACCD,OAAO7B;gBACPH,WAAWb,IACTO,OAAO,UAAU;oBACfwC,SAAS,CAACjB,qBAAqBK;oBAC/BA;oBACAC,eAAeA,iBAAiB,CAACR;oBACjC,eAAeQ,iBAAiBR;gBAClC,IACAV;gBAEF8B,GAAG1B;gBACH2B,IAAI1B;gBACJ2B,IAAI3B;;;;AAKd,GAAG"}
+{"version":3,"sources":["../../src/progress/CircularProgress.tsx"],"sourcesContent":["import { cnb } from \"cnbuilder\";\nimport {\n  forwardRef,\n  useMemo,\n  type CSSProperties,\n  type HTMLAttributes,\n} from \"react\";\nimport { cssUtils } from \"../cssUtils.js\";\nimport { type LabelRequiredForA11y } from \"../types.js\";\nimport { useEnsuredId } from \"../useEnsuredId.js\";\nimport { bem } from \"../utils/bem.js\";\nimport { getPercentage } from \"../utils/getPercentage.js\";\nimport { type ProgressProps } from \"./types.js\";\n\n/**\n * @remarks \\@since 6.0.0\n * Removed the `determinateRotateDegrees` prop since the determinate state no\n * longer rotates while increasing value.\n * Added the `disableShrink` prop.\n * Renamed the `small` prop to `dense` to match other components.\n */\nexport interface CircularProgressProps\n  extends Omit<HTMLAttributes<HTMLSpanElement>, \"id\">,\n    ProgressProps {\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   * Boolean if the circular progress should be centered using left and right\n   * margins.\n   *\n   * @defaultValue `false`\n   */\n  disableCentered?: boolean;\n\n  /**\n   * Set to `true` to render as a smaller size.\n   *\n   * @defaultValue `false`\n   * @remarks\n   * \\@since 2.3.0\n   * \\@since 6.0.0 Renamed from `small`\n   */\n  dense?: boolean;\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   * @remarks \\@since 6.0.0\n   */\n  disableShrink?: boolean;\n}\n\nconst styles = bem(\"rmd-circular-progress\");\n\n/**\n * **Server Component**\n *\n * @example\n * Indeterminate Example\n * ```tsx\n * import { CircularProgress } from \"@react-md/core\":\n * import { type ReactElement } from \"react\";\n *\n * function Example(): ReactElement {\n *   return <CircularProgress aria-label=\"Loading\" />;\n * }\n * ```\n *\n * @example\n * Determinate Example\n * ```tsx\n * import { CircularProgress } from \"@react-md/core\":\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 * @remarks \\@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 = \"primary\",\n    dense = false,\n    dashoffset = 187,\n    disableShrink = false,\n    disableCentered = false,\n    disableTransition = false,\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 determinate = typeof progress === \"number\";\n  const indeterminate = !determinate;\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={cnb(\n        styles({ dense, centered: !disableCentered }),\n        theme !== \"current-color\" && cssUtils({ textColor: theme }),\n        className\n      )}\n    >\n      <svg\n        style={svgStyle}\n        className={cnb(\n          styles(\"svg\", {\n            determinate,\n            indeterminate: indeterminate && !disableShrink,\n            \"rotate-only\": indeterminate && disableShrink,\n          }),\n          svgClassName\n        )}\n        viewBox={viewBox}\n      >\n        <circle\n          style={circleStyle}\n          className={cnb(\n            styles(\"circle\", {\n              animate: !disableTransition && determinate,\n              determinate,\n              indeterminate: indeterminate && !disableShrink,\n              \"rotate-only\": indeterminate && disableShrink,\n            }),\n            circleClassName\n          )}\n          r={radius}\n          cx={center}\n          cy={center}\n        />\n      </svg>\n    </span>\n  );\n});\n"],"names":["cnb","forwardRef","useMemo","cssUtils","useEnsuredId","bem","getPercentage","styles","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","determinate","indeterminate","span","role","aria-valuemin","aria-valuemax","aria-valuenow","centered","textColor","svg","style","circle","animate","r","cx","cy"],"mappings":";AAAA,SAASA,GAAG,QAAQ,YAAY;AAChC,SACEC,UAAU,EACVC,OAAO,QAGF,QAAQ;AACf,SAASC,QAAQ,QAAQ,iBAAiB;AAE1C,SAASC,YAAY,QAAQ,qBAAqB;AAClD,SAASC,GAAG,QAAQ,kBAAkB;AACtC,SAASC,aAAa,QAAQ,4BAA4B;AAuG1D,MAAMC,SAASF,IAAI;AAEnB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA8BC,GACD,OAAO,MAAMG,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,QAAQ,SAAS,EACjBC,QAAQ,KAAK,EACbC,aAAa,GAAG,EAChBC,gBAAgB,KAAK,EACrBC,kBAAkB,KAAK,EACvBC,oBAAoB,KAAK,EACzB,GAAGC,WACJ,GAAGtB;IAEJ,MAAME,KAAKP,aAAaQ,QAAQ;IAChC,IAAIoB;IACJ,IAAI,OAAOb,UAAU,UAAU;QAC7Ba,WAAW1B,cAAc;YAAEc;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,cAAc,OAAOH,aAAa;IACxC,MAAMI,gBAAgB,CAACD;IACvB,qBACE,KAACE;QACE,GAAGN,SAAS;QACbpB,IAAIA;QACJD,KAAKA;QACL4B,MAAK;QACLC,iBAAenB;QACfoB,iBAAenB;QACfoB,iBAAetB;QACfN,WAAWb,IACTO,OAAO;YAAEmB;YAAOgB,UAAU,CAACb;QAAgB,IAC3CJ,UAAU,mBAAmBtB,SAAS;YAAEwC,WAAWlB;QAAM,IACzDZ;kBAGF,cAAA,KAAC+B;YACCC,OAAO/B;YACPD,WAAWb,IACTO,OAAO,OAAO;gBACZ4B;gBACAC,eAAeA,iBAAiB,CAACR;gBACjC,eAAeQ,iBAAiBR;YAClC,IACAb;YAEFS,SAASA;sBAET,cAAA,KAACsB;gBACCD,OAAO7B;gBACPH,WAAWb,IACTO,OAAO,UAAU;oBACfwC,SAAS,CAACjB,qBAAqBK;oBAC/BA;oBACAC,eAAeA,iBAAiB,CAACR;oBACjC,eAAeQ,iBAAiBR;gBAClC,IACAV;gBAEF8B,GAAG1B;gBACH2B,IAAI1B;gBACJ2B,IAAI3B;;;;AAKd,GAAG"}

package/dist/progress/LinearProgress.d.ts

@@ -1,9 +1,10 @@
 import { type CSSProperties, type HTMLAttributes } from "react";
+import { type LabelRequiredForA11y } from "../types.js";
 import { type ProgressProps } from "./types.js";
 /**
  * @remarks \@since 6.0.0 Added the `theme` prop
  */
-export interface LinearProgressProps extends Omit<HTMLAttributes<HTMLDivElement>, "id">, ProgressProps {
+export interface LinearProgressProps extends Omit<HTMLAttributes<HTMLSpanElement>, "id" | "children">, ProgressProps {
     /**
      * An optional style to apply to the progress bar. This will be merged with
      * the current width or height tracking the progress when a `value` is also
@@ -51,7 +52,7 @@ export interface LinearProgressProps extends Omit<HTMLAttributes<HTMLDivElement>
  * import { type ReactElement } from "react";
  *
  * function Example(): ReactElement {
- *   return <LinearProgress />;
+ *   return <LinearProgress aria-label="Loading" />;
  * }
  * ```
  *
@@ -65,10 +66,11 @@ export interface LinearProgressProps extends Omit<HTMLAttributes<HTMLDivElement>
  *   // a number from 0 - 100
  *   const [progress, setProgress] = useState(0);
  *
- *   return <LinearProgress value={progress} />;
+ *   return <LinearProgress aria-label="File upload" value={progress} />;
  * }
  * ```
  *
- * @remarks \@since 6.0.0 Supports rendering as any of the theme colors.
+ * @remarks \@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<LinearProgressProps & import("react").RefAttributes<HTMLSpanElement>>;
+export declare const LinearProgress: import("react").ForwardRefExoticComponent<LabelRequiredForA11y<LinearProgressProps> & import("react").RefAttributes<HTMLSpanElement>>;

package/dist/progress/LinearProgress.js

@@ -16,7 +16,7 @@ const styles = bem("rmd-linear-progress");
  * import { type ReactElement } from "react";
  *
  * function Example(): ReactElement {
- *   return <LinearProgress />;
+ *   return <LinearProgress aria-label="Loading" />;
  * }
  * ```
  *
@@ -30,11 +30,12 @@ const styles = bem("rmd-linear-progress");
  *   // a number from 0 - 100
  *   const [progress, setProgress] = useState(0);
  *
- *   return <LinearProgress value={progress} />;
+ *   return <LinearProgress aria-label="File upload" value={progress} />;
  * }
  * ```
  *
- * @remarks \@since 6.0.0 Supports rendering as any of the theme colors.
+ * @remarks \@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, min = 0, max = 100, value, reverse = false, theme = "primary", disableTransition = false, vertical = false, verticalHeight = 240, ...remaining } = props;
     const id = useEnsuredId(propId, "linear-progress");

package/dist/progress/LinearProgress.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/progress/LinearProgress.tsx"],"sourcesContent":["import { cnb } from \"cnbuilder\";\nimport {\n  forwardRef,\n  useMemo,\n  type CSSProperties,\n  type HTMLAttributes,\n} from \"react\";\nimport { cssUtils } from \"../cssUtils.js\";\nimport { useEnsuredId } from \"../useEnsuredId.js\";\nimport { bem } from \"../utils/bem.js\";\nimport { getPercentage } from \"../utils/getPercentage.js\";\nimport { type ProgressProps } from \"./types.js\";\n\n/**\n * @remarks \\@since 6.0.0 Added the `theme` prop\n */\nexport interface LinearProgressProps\n  extends Omit<HTMLAttributes<HTMLDivElement>, \"id\">,\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   * 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   * Boolean if the progress should be vertical instead of horizontal.  When\n   * this prop is set, you should also set the `verticalHeight` prop to a height\n   * value you want for your progress bar.\n   *\n   * @defaultValue `false`\n   */\n  vertical?: 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\nconst styles = bem(\"rmd-linear-progress\");\n\n/**\n * **Server Component**\n *\n * @example\n * Indeterminate Example\n * ```tsx\n * import { LinearProgress } from \"@react-md/core\";\n * import { type ReactElement } from \"react\";\n *\n * function Example(): ReactElement {\n *   return <LinearProgress />;\n * }\n * ```\n *\n * @example\n * Determinate Example\n * ```tsx\n * import { LinearProgress } from \"@react-md/core\";\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 value={progress} />;\n * }\n * ```\n *\n * @remarks \\@since 6.0.0 Supports rendering as any of the theme colors.\n */\nexport const LinearProgress = forwardRef<HTMLSpanElement, LinearProgressProps>(\n  function LinearProgress(props, ref) {\n    const {\n      id: propId,\n      style: propStyle,\n      className,\n      barStyle: propBarStyle,\n      barClassName,\n      min = 0,\n      max = 100,\n      value,\n      reverse = false,\n      theme = \"primary\",\n      disableTransition = false,\n      vertical = false,\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 determinate = typeof progress === \"number\";\n    const indeterminate = !determinate;\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={cnb(\n          styles({\n            vertical,\n            horizontal: !vertical,\n            determinate,\n            indeterminate,\n          }),\n          theme !== \"current-color\" && cssUtils({ textColor: theme }),\n          className\n        )}\n      >\n        <span\n          style={barStyle}\n          className={cnb(\n            styles(\"bar\", {\n              vertical,\n              \"vertical-reverse\": vertical && reverse,\n              horizontal: !vertical,\n              \"horizontal-reverse\": !vertical && reverse,\n              animate: !disableTransition && determinate,\n              determinate,\n              indeterminate,\n              \"determinate-reverse\": determinate && reverse && !vertical,\n              \"determinate-vertical-reverse\":\n                determinate && reverse && vertical,\n              \"indeterminate-reverse\": indeterminate && reverse && !vertical,\n              \"indeterminate-vertical\": indeterminate && vertical,\n              \"indeterminate-vertical-reverse\":\n                indeterminate && reverse && vertical,\n            }),\n            barClassName\n          )}\n        />\n      </span>\n    );\n  }\n);\n"],"names":["cnb","forwardRef","useMemo","cssUtils","useEnsuredId","bem","getPercentage","styles","LinearProgress","props","ref","id","propId","style","propStyle","className","barStyle","propBarStyle","barClassName","min","max","value","reverse","theme","disableTransition","vertical","verticalHeight","remaining","height","progress","validate","key","determinate","indeterminate","span","role","aria-valuemin","aria-valuemax","aria-valuenow","horizontal","textColor","animate"],"mappings":";AAAA,SAASA,GAAG,QAAQ,YAAY;AAChC,SACEC,UAAU,EACVC,OAAO,QAGF,QAAQ;AACf,SAASC,QAAQ,QAAQ,iBAAiB;AAC1C,SAASC,YAAY,QAAQ,qBAAqB;AAClD,SAASC,GAAG,QAAQ,kBAAkB;AACtC,SAASC,aAAa,QAAQ,4BAA4B;AAmD1D,MAAMC,SAASF,IAAI;AAEnB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA6BC,GACD,OAAO,MAAMG,+BAAiBP,WAC5B,SAASO,eAAeC,KAAK,EAAEC,GAAG;IAChC,MAAM,EACJC,IAAIC,MAAM,EACVC,OAAOC,SAAS,EAChBC,SAAS,EACTC,UAAUC,YAAY,EACtBC,YAAY,EACZC,MAAM,CAAC,EACPC,MAAM,GAAG,EACTC,KAAK,EACLC,UAAU,KAAK,EACfC,QAAQ,SAAS,EACjBC,oBAAoB,KAAK,EACzBC,WAAW,KAAK,EAChBC,iBAAiB,GAAG,EACpB,GAAGC,WACJ,GAAGlB;IAEJ,MAAME,KAAKP,aAAaQ,QAAQ;IAChC,MAAMC,QAAQX,QAAQ;QACpB,IAAI,CAACuB,YAAYC,mBAAmB,MAAM;YACxC,OAAOZ;QACT;QAEA,OAAO;YACL,GAAGA,SAAS;YACZc,QAAQF;QACV;IACF,GAAG;QAACZ;QAAWW;QAAUC;KAAe;IAExC,IAAIG;IACJ,IAAI,OAAOR,UAAU,UAAU;QAC7BQ,WAAWvB,cAAc;YAAEa;YAAKC;YAAKC;YAAOS,UAAU;QAAK;IAC7D;IACA,MAAMd,WAAWd,QAAQ;QACvB,IAAI,OAAO2B,aAAa,UAAU;YAChC,OAAOZ;QACT;QAEA,MAAMc,MAAMN,WAAW,WAAW;QAClC,OAAO;YACL,GAAGR,YAAY;YACf,CAACc,IAAI,EAAE,CAAC,EAAEF,WAAW,IAAI,CAAC,CAAC;QAC7B;IACF,GAAG;QAACA;QAAUZ;QAAcQ;KAAS;IAErC,MAAMO,cAAc,OAAOH,aAAa;IACxC,MAAMI,gBAAgB,CAACD;IACvB,qBACE,KAACE;QACE,GAAGP,SAAS;QACbhB,IAAIA;QACJD,KAAKA;QACLG,OAAOA;QACPsB,MAAK;QACLC,iBAAejB;QACfkB,iBAAejB;QACfkB,iBAAejB;QACfN,WAAWf,IACTO,OAAO;YACLkB;YACAc,YAAY,CAACd;YACbO;YACAC;QACF,IACAV,UAAU,mBAAmBpB,SAAS;YAAEqC,WAAWjB;QAAM,IACzDR;kBAGF,cAAA,KAACmB;YACCrB,OAAOG;YACPD,WAAWf,IACTO,OAAO,OAAO;gBACZkB;gBACA,oBAAoBA,YAAYH;gBAChCiB,YAAY,CAACd;gBACb,sBAAsB,CAACA,YAAYH;gBACnCmB,SAAS,CAACjB,qBAAqBQ;gBAC/BA;gBACAC;gBACA,uBAAuBD,eAAeV,WAAW,CAACG;gBAClD,gCACEO,eAAeV,WAAWG;gBAC5B,yBAAyBQ,iBAAiBX,WAAW,CAACG;gBACtD,0BAA0BQ,iBAAiBR;gBAC3C,kCACEQ,iBAAiBX,WAAWG;YAChC,IACAP;;;AAKV,GACA"}
+{"version":3,"sources":["../../src/progress/LinearProgress.tsx"],"sourcesContent":["import { cnb } from \"cnbuilder\";\nimport {\n  forwardRef,\n  useMemo,\n  type CSSProperties,\n  type HTMLAttributes,\n} from \"react\";\nimport { cssUtils } from \"../cssUtils.js\";\nimport { type LabelRequiredForA11y } from \"../types.js\";\nimport { useEnsuredId } from \"../useEnsuredId.js\";\nimport { bem } from \"../utils/bem.js\";\nimport { getPercentage } from \"../utils/getPercentage.js\";\nimport { type ProgressProps } from \"./types.js\";\n\n/**\n * @remarks \\@since 6.0.0 Added the `theme` prop\n */\nexport interface LinearProgressProps\n  extends Omit<HTMLAttributes<HTMLSpanElement>, \"id\" | \"children\">,\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   * 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   * Boolean if the progress should be vertical instead of horizontal.  When\n   * this prop is set, you should also set the `verticalHeight` prop to a height\n   * value you want for your progress bar.\n   *\n   * @defaultValue `false`\n   */\n  vertical?: 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\nconst styles = bem(\"rmd-linear-progress\");\n\n/**\n * **Server Component**\n *\n * @example\n * Indeterminate Example\n * ```tsx\n * import { LinearProgress } from \"@react-md/core\";\n * import { type ReactElement } from \"react\";\n *\n * function Example(): ReactElement {\n *   return <LinearProgress aria-label=\"Loading\" />;\n * }\n * ```\n *\n * @example\n * Determinate Example\n * ```tsx\n * import { LinearProgress } from \"@react-md/core\";\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 * @remarks \\@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    min = 0,\n    max = 100,\n    value,\n    reverse = false,\n    theme = \"primary\",\n    disableTransition = false,\n    vertical = false,\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 determinate = typeof progress === \"number\";\n  const indeterminate = !determinate;\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={cnb(\n        styles({\n          vertical,\n          horizontal: !vertical,\n          determinate,\n          indeterminate,\n        }),\n        theme !== \"current-color\" && cssUtils({ textColor: theme }),\n        className\n      )}\n    >\n      <span\n        style={barStyle}\n        className={cnb(\n          styles(\"bar\", {\n            vertical,\n            \"vertical-reverse\": vertical && reverse,\n            horizontal: !vertical,\n            \"horizontal-reverse\": !vertical && reverse,\n            animate: !disableTransition && determinate,\n            determinate,\n            indeterminate,\n            \"determinate-reverse\": determinate && reverse && !vertical,\n            \"determinate-vertical-reverse\": determinate && reverse && vertical,\n            \"indeterminate-reverse\": indeterminate && reverse && !vertical,\n            \"indeterminate-vertical\": indeterminate && vertical,\n            \"indeterminate-vertical-reverse\":\n              indeterminate && reverse && vertical,\n          }),\n          barClassName\n        )}\n      />\n    </span>\n  );\n});\n"],"names":["cnb","forwardRef","useMemo","cssUtils","useEnsuredId","bem","getPercentage","styles","LinearProgress","props","ref","id","propId","style","propStyle","className","barStyle","propBarStyle","barClassName","min","max","value","reverse","theme","disableTransition","vertical","verticalHeight","remaining","height","progress","validate","key","determinate","indeterminate","span","role","aria-valuemin","aria-valuemax","aria-valuenow","horizontal","textColor","animate"],"mappings":";AAAA,SAASA,GAAG,QAAQ,YAAY;AAChC,SACEC,UAAU,EACVC,OAAO,QAGF,QAAQ;AACf,SAASC,QAAQ,QAAQ,iBAAiB;AAE1C,SAASC,YAAY,QAAQ,qBAAqB;AAClD,SAASC,GAAG,QAAQ,kBAAkB;AACtC,SAASC,aAAa,QAAQ,4BAA4B;AAmD1D,MAAMC,SAASF,IAAI;AAEnB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA8BC,GACD,OAAO,MAAMG,+BAAiBP,WAG5B,SAASO,eAAeC,KAAK,EAAEC,GAAG;IAClC,MAAM,EACJC,IAAIC,MAAM,EACVC,OAAOC,SAAS,EAChBC,SAAS,EACTC,UAAUC,YAAY,EACtBC,YAAY,EACZC,MAAM,CAAC,EACPC,MAAM,GAAG,EACTC,KAAK,EACLC,UAAU,KAAK,EACfC,QAAQ,SAAS,EACjBC,oBAAoB,KAAK,EACzBC,WAAW,KAAK,EAChBC,iBAAiB,GAAG,EACpB,GAAGC,WACJ,GAAGlB;IAEJ,MAAME,KAAKP,aAAaQ,QAAQ;IAChC,MAAMC,QAAQX,QAAQ;QACpB,IAAI,CAACuB,YAAYC,mBAAmB,MAAM;YACxC,OAAOZ;QACT;QAEA,OAAO;YACL,GAAGA,SAAS;YACZc,QAAQF;QACV;IACF,GAAG;QAACZ;QAAWW;QAAUC;KAAe;IAExC,IAAIG;IACJ,IAAI,OAAOR,UAAU,UAAU;QAC7BQ,WAAWvB,cAAc;YAAEa;YAAKC;YAAKC;YAAOS,UAAU;QAAK;IAC7D;IACA,MAAMd,WAAWd,QAAQ;QACvB,IAAI,OAAO2B,aAAa,UAAU;YAChC,OAAOZ;QACT;QAEA,MAAMc,MAAMN,WAAW,WAAW;QAClC,OAAO;YACL,GAAGR,YAAY;YACf,CAACc,IAAI,EAAE,CAAC,EAAEF,WAAW,IAAI,CAAC,CAAC;QAC7B;IACF,GAAG;QAACA;QAAUZ;QAAcQ;KAAS;IAErC,MAAMO,cAAc,OAAOH,aAAa;IACxC,MAAMI,gBAAgB,CAACD;IACvB,qBACE,KAACE;QACE,GAAGP,SAAS;QACbhB,IAAIA;QACJD,KAAKA;QACLG,OAAOA;QACPsB,MAAK;QACLC,iBAAejB;QACfkB,iBAAejB;QACfkB,iBAAejB;QACfN,WAAWf,IACTO,OAAO;YACLkB;YACAc,YAAY,CAACd;YACbO;YACAC;QACF,IACAV,UAAU,mBAAmBpB,SAAS;YAAEqC,WAAWjB;QAAM,IACzDR;kBAGF,cAAA,KAACmB;YACCrB,OAAOG;YACPD,WAAWf,IACTO,OAAO,OAAO;gBACZkB;gBACA,oBAAoBA,YAAYH;gBAChCiB,YAAY,CAACd;gBACb,sBAAsB,CAACA,YAAYH;gBACnCmB,SAAS,CAACjB,qBAAqBQ;gBAC/BA;gBACAC;gBACA,uBAAuBD,eAAeV,WAAW,CAACG;gBAClD,gCAAgCO,eAAeV,WAAWG;gBAC1D,yBAAyBQ,iBAAiBX,WAAW,CAACG;gBACtD,0BAA0BQ,iBAAiBR;gBAC3C,kCACEQ,iBAAiBX,WAAWG;YAChC,IACAP;;;AAKV,GAAG"}