@react-md/core 6.2.1 → 6.3.1

package/dist/movement/useKeyboardMovementProvider.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/movement/useKeyboardMovementProvider.ts"],"sourcesContent":["\"use client\";\n\nimport {\n  createContext,\n  useContext,\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n} from \"react\";\n\nimport { getFocusableElements as defaultGetFocusableElements } from \"../focus/utils.js\";\nimport { useUserInteractionMode } from \"../interaction/UserInteractionModeProvider.js\";\nimport { useDir } from \"../typography/WritingDirectionProvider.js\";\nimport { useIsomorphicLayoutEffect } from \"../useIsomorphicLayoutEffect.js\";\nimport {\n  DEFAULT_KEYBOARD_MOVEMENT,\n  DEFAULT_LTR_KEYBOARD_MOVEMENT,\n  DEFAULT_RTL_KEYBOARD_MOVEMENT,\n} from \"./constants.js\";\nimport { findMatchIndex } from \"./findMatchIndex.js\";\nimport type {\n  KeyboardMovementConfig,\n  KeyboardMovementConfiguration,\n  KeyboardMovementContext,\n  KeyboardMovementProviderImplementation,\n  KeyboardMovementProviderOptions,\n} from \"./types.js\";\nimport {\n  getFirstFocusableIndex,\n  getLastFocusableIndex,\n  getNextFocusableIndex,\n  getSearchText,\n  getVirtualFocusDefaultIndex,\n  isElementDisabled,\n  isNotFocusable,\n  isSearchableEvent,\n  recalculateFocusIndex,\n} from \"./utils.js\";\n\n/**\n * @since 5.0.0\n * @internal\n */\nconst context = createContext<KeyboardMovementContext>({\n  config: { current: DEFAULT_KEYBOARD_MOVEMENT },\n  loopable: false,\n  searchable: false,\n  horizontal: false,\n  includeDisabled: false,\n  tabIndexBehavior: undefined,\n  activeDescendantId: \"\",\n});\ncontext.displayName = \"KeyboardMovement\";\nexport const { Provider: KeyboardMovementProvider } = context;\n\n/**\n * @since 5.0.0\n * @internal\n */\nexport function useKeyboardMovementContext(): Readonly<KeyboardMovementContext> {\n  return useContext(context);\n}\n\nconst noop = (): void => {\n  // do nothing\n};\n\nconst returnNegative1 = (): number => -1;\n\n/**\n * Implements the custom keyboard movement behavior throughout react-md. Using\n * the \"Find References\" will be the best way to see example usage.\n *\n * @example Default Keyboard Movement for any Focusable Element\n * ```tsx\n * import {\n *   KeyboardMovementProvider,\n *   useKeyboardMovementProvider,\n * } from \"@react-md/core/movement/useKeyboardMovementProvider\";\n * import type { ReactElement, ReactNode } from \"react\";\n *\n * function Example({ children }: { children: ReactNode }): ReactElement {\n *   const { movementContext, movementProps } = useKeyboardMovementProvider();\n *\n *   // any focusable element child can be focused with the arrow , home, and\n *   // end keys\n *   return (\n *     <KeyboardMovementProvider value={movementContext}>\n *       <div {...movementProps}>\n *         {children}\n *       </div>\n *     </KeyboardMovementProvider>\n *   );\n * }\n * ```\n *\n * @example Active Descendant Movement\n * ```tsx\n * import {\n *   KeyboardMovementProvider,\n *   useKeyboardMovementContext,\n *   useKeyboardMovementProvider,\n * } from \"@react-md/core/movement/useKeyboardMovementProvider\";\n * import type { ReactElement, ReactNode } from \"react\";\n * import { useId } from \"react\";\n *\n * function Child(): ReactElement {\n *   const id = useId()\n *   const { activeDescendantId } = useKeyboardMovementContext();\n *\n *   return (\n *     <div\n *       {...props}\n *       id={id}\n *       className={cnb(id === activeDescendantId && \"focused-class-name\")}\n *     >\n *       Some Content\n *     </div>\n *   );\n * }\n *\n * function Example({ children }: { children: ReactNode }): ReactElement {\n *   const { movementContext, movementProps } = useKeyboardMovementProvider({\n *     loopable: true,\n *     searchable: true,\n *     tabIndexBehavior: \"virtual\",\n *   });\n *\n *   // any focusable element child can be focused with the arrow , home, and\n *   // end keys\n *   return (\n *     <KeyboardMovementProvider value={movementContext}>\n *       <div {...movementProps}>\n *         <Child />\n *         <Child />\n *         <Child />\n *       </div>\n *     </KeyboardMovementProvider>\n *   );\n * }\n * ```\n *\n * @example Roving Tab Index\n * ```tsx\n * import {\n *   KeyboardMovementProvider,\n *   useKeyboardMovementContext,\n *   useKeyboardMovementProvider,\n * } from \"@react-md/core/movement/useKeyboardMovementProvider\";\n * import type { ReactElement, ReactNode } from \"react\";\n * import { useId } from \"react\";\n *\n * function Child(): ReactElement {\n *   const id = useId()\n *   const { activeDescendantId } = useKeyboardMovementContext();\n *\n *   return (\n *     <div\n *       {...props}\n *       id={id}\n *       tabIndex={id === activeDescendantId ? 0 : -1}\n *     >\n *       Some Content\n *     </div>\n *   );\n * }\n *\n * function Example({ children }: { children: ReactNode }): ReactElement {\n *   const { movementContext, movementProps } = useKeyboardMovementProvider({\n *     loopable: true,\n *     searchable: true,\n *     tabIndexBehavior: \"roving\",\n *   });\n *\n *   // any focusable element child can be focused with the arrow , home, and\n *   // end keys\n *   return (\n *     <KeyboardMovementProvider value={movementContext}>\n *       <div {...movementProps}>\n *         <Child />\n *         <Child />\n *         <Child />\n *       </div>\n *     </KeyboardMovementProvider>\n *   );\n * }\n * ```\n * @since 6.0.0\n * @internal\n */\nexport function useKeyboardMovementProvider<E extends HTMLElement>(\n  options: KeyboardMovementProviderOptions<E> = {}\n): KeyboardMovementProviderImplementation<E> {\n  const {\n    onClick = noop,\n    onFocus = noop,\n    onKeyDown = noop,\n    loopable = false,\n    disabled,\n    searchable = false,\n    horizontal = false,\n    includeDisabled = false,\n    tabIndexBehavior,\n    extendKeyDown = noop,\n    onFocusChange = noop,\n    programmatic = includeDisabled,\n    incrementKeys: propIncrementKeys,\n    decrementKeys: propDecrementKeys,\n    jumpToFirstKeys: propJumpToFirstKeys,\n    jumpToLastKeys: propJumpToLastKeys,\n    getFocusableElements = defaultGetFocusableElements,\n    getDefaultFocusedIndex = returnNegative1,\n    isNegativeOneAllowed = false,\n  } = options;\n\n  const isRTL = useDir().dir === \"rtl\";\n  let defaults: Readonly<Required<KeyboardMovementConfiguration>>;\n  if (horizontal) {\n    defaults = isRTL\n      ? DEFAULT_RTL_KEYBOARD_MOVEMENT\n      : DEFAULT_LTR_KEYBOARD_MOVEMENT;\n  } else {\n    defaults = DEFAULT_KEYBOARD_MOVEMENT;\n  }\n\n  const incrementKeys = propIncrementKeys || defaults.incrementKeys;\n  const decrementKeys = propDecrementKeys || defaults.decrementKeys;\n  const jumpToFirstKeys = propJumpToFirstKeys || defaults.jumpToFirstKeys;\n  const jumpToLastKeys = propJumpToLastKeys || defaults.jumpToLastKeys;\n\n  const configuration: KeyboardMovementConfig = {\n    incrementKeys,\n    decrementKeys,\n    jumpToFirstKeys,\n    jumpToLastKeys,\n  };\n  const config = useRef(configuration);\n  useIsomorphicLayoutEffect(() => {\n    config.current = configuration;\n  });\n\n  const [activeDescendantId, setActiveDescendantId] = useState(\"\");\n  const movementContext = useMemo<KeyboardMovementContext>(\n    () => ({\n      config,\n      loopable,\n      searchable,\n      horizontal,\n      includeDisabled,\n      tabIndexBehavior,\n      activeDescendantId,\n    }),\n    [\n      activeDescendantId,\n      horizontal,\n      includeDisabled,\n      loopable,\n      searchable,\n      tabIndexBehavior,\n    ]\n  );\n  const currentFocusIndex = useRef(-1);\n  const mode = useUserInteractionMode();\n  const refocus = useRef(false);\n\n  if (process.env.NODE_ENV !== \"production\") {\n    // this fixes issues during hot reloading and using the `useId()` hook\n    // eslint-disable-next-line react-hooks/rules-of-hooks\n    useEffect(() => {\n      return () => {\n        setActiveDescendantId(\"\");\n      };\n    }, []);\n  }\n\n  let tabIndex: number | undefined;\n  if (tabIndexBehavior) {\n    tabIndex =\n      disabled || (tabIndexBehavior === \"roving\" && activeDescendantId)\n        ? -1\n        : 0;\n  }\n\n  return {\n    movementProps: {\n      \"aria-activedescendant\":\n        tabIndexBehavior === \"virtual\" ? activeDescendantId : undefined,\n      tabIndex,\n\n      // Note: This used to be on the `onFocus` event, but this causes issues in\n      // Chromium browsers for drag and drop behavior\n      onClick(event) {\n        onClick(event);\n        if (disabled) {\n          return;\n        }\n\n        // This makes it so you can click an element with a mouse and then\n        // keyboard navigate from that element instead of the last keyboard focus\n        // element\n        const { currentTarget, target } = event;\n        if (target === currentTarget || !(target instanceof HTMLElement)) {\n          return;\n        }\n\n        const focusables = getFocusableElements(currentTarget, programmatic);\n        const focusedIndex = focusables.findIndex(\n          (element) => element === target || element.contains(target)\n        );\n        if (focusedIndex === -1 || !focusables.length) {\n          return;\n        }\n\n        currentFocusIndex.current = focusedIndex;\n        const focused = focusables[focusedIndex];\n        if (tabIndexBehavior) {\n          setActiveDescendantId(focused.id);\n        }\n\n        // need to force focus back to the container element when using\n        // aria activedescendant\n        if (tabIndexBehavior === \"virtual\") {\n          refocus.current = true;\n          currentTarget.focus();\n        }\n\n        onFocusChange({\n          index: focusedIndex,\n          element: focused,\n        });\n      },\n      onFocus(event) {\n        onFocus(event);\n        if (event.isPropagationStopped() || refocus.current) {\n          refocus.current = false;\n          return;\n        }\n\n        if (\n          (mode !== \"keyboard\" && tabIndexBehavior !== \"virtual\") ||\n          event.target !== event.currentTarget\n        ) {\n          return;\n        }\n\n        const focusables = getFocusableElements(\n          event.currentTarget,\n          programmatic\n        );\n        if (!focusables.length) {\n          return;\n        }\n\n        let defaultFocusIndex = getDefaultFocusedIndex({\n          focusables,\n          includeDisabled,\n        });\n\n        // This allows my custom `getDefaultFocusedIndex` implementations to\n        // have a nice fallback without having to re-implement the \"focus\n        // first\" behavior\n        if (!isNegativeOneAllowed && defaultFocusIndex === -1) {\n          if (tabIndexBehavior === \"virtual\") {\n            // virtual keyboard navigation **must** always focus at least one element\n            defaultFocusIndex = getVirtualFocusDefaultIndex({\n              focusables,\n              includeDisabled,\n              activeDescendantId,\n            });\n          } else {\n            defaultFocusIndex = getFirstFocusableIndex({\n              focusables,\n              includeDisabled,\n            });\n          }\n        }\n\n        if (defaultFocusIndex === -1) {\n          return;\n        }\n\n        currentFocusIndex.current = defaultFocusIndex;\n        const focused = focusables[defaultFocusIndex];\n        if (tabIndexBehavior) {\n          setActiveDescendantId(focused.id);\n        }\n\n        if (tabIndexBehavior !== \"virtual\") {\n          focused.focus();\n        } else {\n          focused.scrollIntoView({ block: \"nearest\" });\n        }\n\n        onFocusChange({\n          index: defaultFocusIndex,\n          element: focused,\n        });\n      },\n      onKeyDown(event) {\n        onKeyDown(event);\n        if (disabled) {\n          return;\n        }\n\n        const { currentTarget } = event;\n\n        const setFocusIndex = (\n          index: number,\n          focusables: readonly HTMLElement[]\n        ): void => {\n          event.preventDefault();\n          event.stopPropagation();\n          if (currentFocusIndex.current === index || index === -1) {\n            return;\n          }\n\n          currentFocusIndex.current = index;\n          const focused = focusables[index];\n          if (tabIndexBehavior) {\n            focused.scrollIntoView({\n              block: \"nearest\",\n              inline: \"nearest\",\n            });\n            setActiveDescendantId(focused.id);\n          }\n\n          if (tabIndexBehavior !== \"virtual\") {\n            focused.focus();\n          }\n\n          onFocusChange({\n            index,\n            element: focused,\n          });\n        };\n\n        extendKeyDown({\n          event,\n          setFocusIndex,\n          currentFocusIndex,\n          setActiveDescendantId,\n          ...movementContext,\n        });\n\n        if (event.isPropagationStopped()) {\n          return;\n        }\n\n        // TODO: Figure this part out. This is currently required for the tree\n        // movement when the asterisk key is pressed. There might be other cases\n        // as well.\n        if (!isNegativeOneAllowed && currentFocusIndex.current === -1) {\n          currentFocusIndex.current = recalculateFocusIndex({\n            focusables: getFocusableElements(currentTarget, programmatic),\n            includeDisabled,\n            tabIndexBehavior,\n            activeDescendantId,\n          });\n        }\n\n        const { key, shiftKey } = event;\n        if (\n          tabIndexBehavior === \"virtual\" &&\n          activeDescendantId &&\n          (key === \" \" || key === \"Enter\")\n        ) {\n          if (key === \" \") {\n            event.preventDefault();\n          }\n\n          const focusables = getFocusableElements(currentTarget, programmatic);\n          const activeElement = focusables[currentFocusIndex.current];\n          if (!activeElement || isElementDisabled(activeElement)) {\n            return;\n          }\n\n          activeElement.click();\n          return;\n        }\n\n        const {\n          incrementKeys,\n          decrementKeys,\n          jumpToFirstKeys,\n          jumpToLastKeys,\n        } = config.current;\n\n        if (searchable && isSearchableEvent(event)) {\n          const focusables = getFocusableElements(currentTarget, programmatic);\n          const index = findMatchIndex({\n            value: key,\n            values: focusables.map((element) =>\n              getSearchText(element, !isNotFocusable(element, includeDisabled))\n            ),\n            startIndex: shiftKey ? -1 : currentFocusIndex.current,\n          });\n          setFocusIndex(index, focusables);\n          return;\n        }\n\n        const jumpToFirst = jumpToFirstKeys.includes(key);\n        const jumpToLast = !jumpToFirst && jumpToLastKeys.includes(key);\n        const increment =\n          !jumpToFirst && !jumpToLast && incrementKeys.includes(key);\n        const decrement =\n          !jumpToFirst &&\n          !jumpToLast &&\n          !increment &&\n          decrementKeys.includes(key);\n\n        if (!jumpToFirst && !jumpToLast && !increment && !decrement) {\n          return;\n        }\n        const focusables = getFocusableElements(currentTarget, programmatic);\n\n        let index: number;\n        if (jumpToFirst) {\n          index = getFirstFocusableIndex({\n            focusables,\n            includeDisabled,\n          });\n        } else if (jumpToLast) {\n          index = getLastFocusableIndex({\n            focusables,\n            includeDisabled,\n          });\n        } else {\n          index = getNextFocusableIndex({\n            loopable,\n            increment,\n            focusables,\n            includeDisabled,\n            currentFocusIndex: currentFocusIndex.current,\n          });\n        }\n\n        setFocusIndex(index, focusables);\n      },\n    },\n    movementContext,\n    currentFocusIndex,\n    activeDescendantId,\n    setActiveDescendantId,\n  };\n}\n"],"names":["createContext","useContext","useEffect","useMemo","useRef","useState","getFocusableElements","defaultGetFocusableElements","useUserInteractionMode","useDir","useIsomorphicLayoutEffect","DEFAULT_KEYBOARD_MOVEMENT","DEFAULT_LTR_KEYBOARD_MOVEMENT","DEFAULT_RTL_KEYBOARD_MOVEMENT","findMatchIndex","getFirstFocusableIndex","getLastFocusableIndex","getNextFocusableIndex","getSearchText","getVirtualFocusDefaultIndex","isElementDisabled","isNotFocusable","isSearchableEvent","recalculateFocusIndex","context","config","current","loopable","searchable","horizontal","includeDisabled","tabIndexBehavior","undefined","activeDescendantId","displayName","Provider","KeyboardMovementProvider","useKeyboardMovementContext","noop","returnNegative1","useKeyboardMovementProvider","options","onClick","onFocus","onKeyDown","disabled","extendKeyDown","onFocusChange","programmatic","incrementKeys","propIncrementKeys","decrementKeys","propDecrementKeys","jumpToFirstKeys","propJumpToFirstKeys","jumpToLastKeys","propJumpToLastKeys","getDefaultFocusedIndex","isNegativeOneAllowed","isRTL","dir","defaults","configuration","setActiveDescendantId","movementContext","currentFocusIndex","mode","refocus","process","env","NODE_ENV","tabIndex","movementProps","event","currentTarget","target","HTMLElement","focusables","focusedIndex","findIndex","element","contains","length","focused","id","focus","index","isPropagationStopped","defaultFocusIndex","scrollIntoView","block","setFocusIndex","preventDefault","stopPropagation","inline","key","shiftKey","activeElement","click","value","values","map","startIndex","jumpToFirst","includes","jumpToLast","increment","decrement"],"mappings":"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"}
+{"version":3,"sources":["../../src/movement/useKeyboardMovementProvider.ts"],"sourcesContent":["\"use client\";\n\nimport {\n  createContext,\n  useCallback,\n  useContext,\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n} from \"react\";\n\nimport { getFocusableElements as defaultGetFocusableElements } from \"../focus/utils.js\";\nimport { useUserInteractionMode } from \"../interaction/UserInteractionModeProvider.js\";\nimport { useDir } from \"../typography/WritingDirectionProvider.js\";\nimport { useEnsuredRef } from \"../useEnsuredRef.js\";\nimport { useIsomorphicLayoutEffect } from \"../useIsomorphicLayoutEffect.js\";\nimport {\n  DEFAULT_KEYBOARD_MOVEMENT,\n  DEFAULT_LTR_KEYBOARD_MOVEMENT,\n  DEFAULT_RTL_KEYBOARD_MOVEMENT,\n} from \"./constants.js\";\nimport { findMatchIndex } from \"./findMatchIndex.js\";\nimport {\n  type KeyboardFocusFromKeyOptions,\n  type KeyboardMovementConfig,\n  type KeyboardMovementConfiguration,\n  type KeyboardMovementContext,\n  type KeyboardMovementProviderImplementation,\n  type KeyboardMovementProviderOptions,\n} from \"./types.js\";\nimport {\n  getFirstFocusableIndex,\n  getLastFocusableIndex,\n  getNextFocusableIndex,\n  getSearchText,\n  getVirtualFocusDefaultIndex,\n  isElementDisabled,\n  isNotFocusable,\n  isSearchableEvent,\n  recalculateFocusIndex,\n} from \"./utils.js\";\n\nconst noop = (): void => {\n  // do nothing\n};\n\n/**\n * @since 6.3.0\n */\nexport const DEFAULT_KEYBOARD_MOVEMENT_CONTEXT: Readonly<KeyboardMovementContext> =\n  {\n    config: { current: DEFAULT_KEYBOARD_MOVEMENT },\n    loopable: false,\n    searchable: false,\n    horizontal: false,\n    includeDisabled: false,\n    tabIndexBehavior: undefined,\n    activeDescendantId: \"\",\n    focusFirst: noop,\n    focusLast: noop,\n    focusNext: noop,\n    focusPrevious: noop,\n    focusFromKey: noop,\n  };\n\n/**\n * @since 5.0.0\n * @internal\n */\nconst context = createContext<KeyboardMovementContext>(\n  DEFAULT_KEYBOARD_MOVEMENT_CONTEXT\n);\ncontext.displayName = \"KeyboardMovement\";\nexport const { Provider: KeyboardMovementProvider } = context;\n\n/**\n * @since 5.0.0\n * @internal\n */\nexport function useKeyboardMovementContext(): Readonly<KeyboardMovementContext> {\n  return useContext(context);\n}\n\nconst returnNegative1 = (): number => -1;\n\n/**\n * Implements the custom keyboard movement behavior throughout react-md. Using\n * the \"Find References\" will be the best way to see example usage.\n *\n * @example Default Keyboard Movement for any Focusable Element\n * ```tsx\n * import {\n *   KeyboardMovementProvider,\n *   useKeyboardMovementProvider,\n * } from \"@react-md/core/movement/useKeyboardMovementProvider\";\n * import type { ReactElement, ReactNode } from \"react\";\n *\n * function Example({ children }: { children: ReactNode }): ReactElement {\n *   const { movementContext, movementProps } = useKeyboardMovementProvider();\n *\n *   // any focusable element child can be focused with the arrow , home, and\n *   // end keys\n *   return (\n *     <KeyboardMovementProvider value={movementContext}>\n *       <div {...movementProps}>\n *         {children}\n *       </div>\n *     </KeyboardMovementProvider>\n *   );\n * }\n * ```\n *\n * @example Active Descendant Movement\n * ```tsx\n * import {\n *   KeyboardMovementProvider,\n *   useKeyboardMovementContext,\n *   useKeyboardMovementProvider,\n * } from \"@react-md/core/movement/useKeyboardMovementProvider\";\n * import type { ReactElement, ReactNode } from \"react\";\n * import { useId } from \"react\";\n *\n * function Child(): ReactElement {\n *   const id = useId()\n *   const { activeDescendantId } = useKeyboardMovementContext();\n *\n *   return (\n *     <div\n *       {...props}\n *       id={id}\n *       className={cnb(id === activeDescendantId && \"focused-class-name\")}\n *     >\n *       Some Content\n *     </div>\n *   );\n * }\n *\n * function Example({ children }: { children: ReactNode }): ReactElement {\n *   const { movementContext, movementProps } = useKeyboardMovementProvider({\n *     loopable: true,\n *     searchable: true,\n *     tabIndexBehavior: \"virtual\",\n *   });\n *\n *   // any focusable element child can be focused with the arrow , home, and\n *   // end keys\n *   return (\n *     <KeyboardMovementProvider value={movementContext}>\n *       <div {...movementProps}>\n *         <Child />\n *         <Child />\n *         <Child />\n *       </div>\n *     </KeyboardMovementProvider>\n *   );\n * }\n * ```\n *\n * @example Roving Tab Index\n * ```tsx\n * import {\n *   KeyboardMovementProvider,\n *   useKeyboardMovementContext,\n *   useKeyboardMovementProvider,\n * } from \"@react-md/core/movement/useKeyboardMovementProvider\";\n * import type { ReactElement, ReactNode } from \"react\";\n * import { useId } from \"react\";\n *\n * function Child(): ReactElement {\n *   const id = useId()\n *   const { activeDescendantId } = useKeyboardMovementContext();\n *\n *   return (\n *     <div\n *       {...props}\n *       id={id}\n *       tabIndex={id === activeDescendantId ? 0 : -1}\n *     >\n *       Some Content\n *     </div>\n *   );\n * }\n *\n * function Example({ children }: { children: ReactNode }): ReactElement {\n *   const { movementContext, movementProps } = useKeyboardMovementProvider({\n *     loopable: true,\n *     searchable: true,\n *     tabIndexBehavior: \"roving\",\n *   });\n *\n *   // any focusable element child can be focused with the arrow , home, and\n *   // end keys\n *   return (\n *     <KeyboardMovementProvider value={movementContext}>\n *       <div {...movementProps}>\n *         <Child />\n *         <Child />\n *         <Child />\n *       </div>\n *     </KeyboardMovementProvider>\n *   );\n * }\n * ```\n * @since 6.0.0\n * @internal\n */\nexport function useKeyboardMovementProvider<E extends HTMLElement>(\n  options: KeyboardMovementProviderOptions<E> = {}\n): KeyboardMovementProviderImplementation<E> {\n  const {\n    ref: propRef,\n    onClick = noop,\n    onFocus = noop,\n    onKeyDown = noop,\n    loopable = false,\n    disabled,\n    searchable = false,\n    horizontal = false,\n    trackTabKeys = false,\n    includeDisabled = false,\n    tabIndexBehavior,\n    extendKeyDown = noop,\n    onFocusChange = noop,\n    programmatic = includeDisabled,\n    incrementKeys: propIncrementKeys,\n    decrementKeys: propDecrementKeys,\n    jumpToFirstKeys: propJumpToFirstKeys,\n    jumpToLastKeys: propJumpToLastKeys,\n    getFocusableElements = defaultGetFocusableElements,\n    getDefaultFocusedIndex = returnNegative1,\n    isNegativeOneAllowed = false,\n  } = options;\n\n  const [nodeRef, nodeRefCallback] = useEnsuredRef(propRef);\n\n  const isRTL = useDir().dir === \"rtl\";\n  let defaults: Readonly<Required<KeyboardMovementConfiguration>>;\n  if (horizontal) {\n    defaults = isRTL\n      ? DEFAULT_RTL_KEYBOARD_MOVEMENT\n      : DEFAULT_LTR_KEYBOARD_MOVEMENT;\n  } else {\n    defaults = DEFAULT_KEYBOARD_MOVEMENT;\n  }\n\n  const incrementKeys = propIncrementKeys || defaults.incrementKeys;\n  const decrementKeys = propDecrementKeys || defaults.decrementKeys;\n  const jumpToFirstKeys = propJumpToFirstKeys || defaults.jumpToFirstKeys;\n  const jumpToLastKeys = propJumpToLastKeys || defaults.jumpToLastKeys;\n\n  const configuration: KeyboardMovementConfig = {\n    incrementKeys,\n    decrementKeys,\n    jumpToFirstKeys,\n    jumpToLastKeys,\n  };\n  const config = useRef(configuration);\n  useIsomorphicLayoutEffect(() => {\n    config.current = configuration;\n  });\n\n  const mode = useUserInteractionMode();\n  const refocus = useRef(false);\n  const currentFocusIndex = useRef(-1);\n  const [activeDescendantId, setActiveDescendantId] = useState(\"\");\n\n  if (process.env.NODE_ENV !== \"production\") {\n    // this fixes issues during hot reloading and using the `useId()` hook\n    // eslint-disable-next-line react-hooks/rules-of-hooks\n    useEffect(() => {\n      return () => {\n        setActiveDescendantId(\"\");\n      };\n    }, []);\n  }\n\n  let tabIndex: number | undefined;\n  if (tabIndexBehavior) {\n    tabIndex =\n      disabled || (tabIndexBehavior === \"roving\" && activeDescendantId)\n        ? -1\n        : 0;\n  }\n\n  const getFocusableElementsFromRef = useCallback(() => {\n    const container = nodeRef.current;\n    if (!container) {\n      return [];\n    }\n\n    return getFocusableElements(container, programmatic);\n  }, [getFocusableElements, nodeRef, programmatic]);\n  const updateFocusIndex = useCallback(\n    (index: number, focusables = getFocusableElementsFromRef()) => {\n      if (currentFocusIndex.current === index || index === -1) {\n        return;\n      }\n\n      currentFocusIndex.current = index;\n      const focused = focusables[index];\n      if (tabIndexBehavior) {\n        focused.scrollIntoView({\n          block: \"nearest\",\n          inline: \"nearest\",\n        });\n        setActiveDescendantId(focused.id);\n      }\n\n      if (tabIndexBehavior !== \"virtual\") {\n        focused.focus();\n      }\n\n      onFocusChange({\n        index,\n        element: focused,\n      });\n    },\n    [getFocusableElementsFromRef, onFocusChange, tabIndexBehavior]\n  );\n\n  const focusNext = useCallback(\n    (focusables = getFocusableElementsFromRef()) => {\n      updateFocusIndex(\n        getNextFocusableIndex({\n          loopable,\n          increment: true,\n          focusables,\n          includeDisabled: true,\n          currentFocusIndex: currentFocusIndex.current,\n        }),\n        focusables\n      );\n    },\n    [getFocusableElementsFromRef, loopable, updateFocusIndex]\n  );\n  const focusPrevious = useCallback(\n    (focusables = getFocusableElementsFromRef()) => {\n      updateFocusIndex(\n        getNextFocusableIndex({\n          loopable,\n          increment: false,\n          focusables,\n          includeDisabled: true,\n          currentFocusIndex: currentFocusIndex.current,\n        }),\n        focusables\n      );\n    },\n    [getFocusableElementsFromRef, loopable, updateFocusIndex]\n  );\n  const focusFirst = useCallback(\n    (focusables = getFocusableElementsFromRef()) => {\n      updateFocusIndex(\n        getFirstFocusableIndex({\n          focusables,\n          includeDisabled,\n        }),\n        focusables\n      );\n    },\n    [getFocusableElementsFromRef, includeDisabled, updateFocusIndex]\n  );\n  const focusLast = useCallback(\n    (focusables = getFocusableElementsFromRef()) => {\n      updateFocusIndex(\n        getLastFocusableIndex({\n          focusables,\n          includeDisabled,\n        }),\n        focusables\n      );\n    },\n    [getFocusableElementsFromRef, includeDisabled, updateFocusIndex]\n  );\n  const focusFromKey = useCallback(\n    (options: KeyboardFocusFromKeyOptions) => {\n      const {\n        key,\n        reversed,\n        focusables = getFocusableElementsFromRef(),\n      } = options;\n      if (!searchable) {\n        return;\n      }\n\n      const index = findMatchIndex({\n        value: key,\n        values: focusables.map((element) =>\n          getSearchText(element, !isNotFocusable(element, includeDisabled))\n        ),\n        startIndex: reversed ? -1 : currentFocusIndex.current,\n      });\n      updateFocusIndex(index, focusables);\n    },\n    [getFocusableElementsFromRef, includeDisabled, searchable, updateFocusIndex]\n  );\n\n  const movementContext = useMemo<KeyboardMovementContext>(\n    () => ({\n      config,\n      loopable,\n      searchable,\n      horizontal,\n      focusFirst,\n      focusLast,\n      focusNext,\n      focusPrevious,\n      focusFromKey,\n      includeDisabled,\n      tabIndexBehavior,\n      activeDescendantId,\n    }),\n    [\n      activeDescendantId,\n      focusFirst,\n      focusFromKey,\n      focusLast,\n      focusNext,\n      focusPrevious,\n      horizontal,\n      includeDisabled,\n      loopable,\n      searchable,\n      tabIndexBehavior,\n    ]\n  );\n\n  return {\n    nodeRef,\n    movementProps: {\n      \"aria-activedescendant\":\n        tabIndexBehavior === \"virtual\" ? activeDescendantId : undefined,\n      ref: nodeRefCallback,\n      tabIndex,\n\n      // Note: This used to be on the `onFocus` event, but this causes issues in\n      // Chromium browsers for drag and drop behavior\n      onClick(event) {\n        onClick(event);\n        if (disabled) {\n          return;\n        }\n\n        // This makes it so you can click an element with a mouse and then\n        // keyboard navigate from that element instead of the last keyboard focus\n        // element\n        const { currentTarget, target } = event;\n        if (target === currentTarget || !(target instanceof HTMLElement)) {\n          return;\n        }\n\n        const focusables = getFocusableElements(currentTarget, programmatic);\n        const focusedIndex = focusables.findIndex(\n          (element) => element === target || element.contains(target)\n        );\n        if (focusedIndex === -1 || !focusables.length) {\n          return;\n        }\n\n        currentFocusIndex.current = focusedIndex;\n        const focused = focusables[focusedIndex];\n        if (tabIndexBehavior) {\n          setActiveDescendantId(focused.id);\n        }\n\n        // need to force focus back to the container element when using\n        // aria activedescendant\n        if (tabIndexBehavior === \"virtual\") {\n          refocus.current = true;\n          currentTarget.focus();\n        }\n\n        onFocusChange({\n          index: focusedIndex,\n          element: focused,\n        });\n      },\n      onFocus(event) {\n        onFocus(event);\n        if (event.isPropagationStopped() || refocus.current) {\n          refocus.current = false;\n          return;\n        }\n\n        if (\n          (mode !== \"keyboard\" && tabIndexBehavior !== \"virtual\") ||\n          event.target !== event.currentTarget\n        ) {\n          return;\n        }\n\n        const focusables = getFocusableElements(\n          event.currentTarget,\n          programmatic\n        );\n        if (!focusables.length) {\n          return;\n        }\n\n        let defaultFocusIndex = getDefaultFocusedIndex({\n          focusables,\n          includeDisabled,\n        });\n\n        // This allows my custom `getDefaultFocusedIndex` implementations to\n        // have a nice fallback without having to re-implement the \"focus\n        // first\" behavior\n        if (!isNegativeOneAllowed && defaultFocusIndex === -1) {\n          if (tabIndexBehavior === \"virtual\") {\n            // virtual keyboard navigation **must** always focus at least one element\n            defaultFocusIndex = getVirtualFocusDefaultIndex({\n              focusables,\n              includeDisabled,\n              activeDescendantId,\n            });\n          } else {\n            defaultFocusIndex = getFirstFocusableIndex({\n              focusables,\n              includeDisabled,\n            });\n          }\n        }\n\n        if (defaultFocusIndex === -1) {\n          return;\n        }\n\n        currentFocusIndex.current = defaultFocusIndex;\n        const focused = focusables[defaultFocusIndex];\n        if (tabIndexBehavior) {\n          setActiveDescendantId(focused.id);\n        }\n\n        if (tabIndexBehavior !== \"virtual\") {\n          focused.focus();\n        } else {\n          focused.scrollIntoView({ block: \"nearest\" });\n        }\n\n        onFocusChange({\n          index: defaultFocusIndex,\n          element: focused,\n        });\n      },\n      onKeyDown(event) {\n        onKeyDown(event);\n        if (disabled) {\n          return;\n        }\n\n        const { currentTarget } = event;\n\n        const setFocusIndex = (\n          index: number,\n          focusables: readonly HTMLElement[]\n        ): void => {\n          event.preventDefault();\n          event.stopPropagation();\n          updateFocusIndex(index, focusables);\n        };\n\n        extendKeyDown({\n          event,\n          setFocusIndex,\n          currentFocusIndex,\n          setActiveDescendantId,\n          ...movementContext,\n        });\n\n        if (event.isPropagationStopped()) {\n          return;\n        }\n\n        // TODO: Figure this part out. This is currently required for the tree\n        // movement when the asterisk key is pressed. There might be other cases\n        // as well.\n        if (!isNegativeOneAllowed && currentFocusIndex.current === -1) {\n          currentFocusIndex.current = recalculateFocusIndex({\n            focusables: getFocusableElements(currentTarget, programmatic),\n            includeDisabled,\n            tabIndexBehavior,\n            activeDescendantId,\n          });\n        }\n\n        const { key, shiftKey } = event;\n        if (\n          tabIndexBehavior === \"virtual\" &&\n          activeDescendantId &&\n          (key === \" \" || key === \"Enter\")\n        ) {\n          if (key === \" \") {\n            event.preventDefault();\n          }\n\n          const focusables = getFocusableElements(currentTarget, programmatic);\n          const activeElement = focusables[currentFocusIndex.current];\n          if (!activeElement || isElementDisabled(activeElement)) {\n            return;\n          }\n\n          activeElement.click();\n          return;\n        }\n\n        const {\n          incrementKeys,\n          decrementKeys,\n          jumpToFirstKeys,\n          jumpToLastKeys,\n        } = config.current;\n\n        if (searchable && isSearchableEvent(event)) {\n          event.preventDefault();\n          event.stopPropagation();\n          focusFromKey({ key, reversed: shiftKey });\n          return;\n        }\n\n        if (trackTabKeys && key === \"Tab\") {\n          currentFocusIndex.current += event.shiftKey ? -1 : 1;\n          return;\n        }\n\n        const jumpToFirst = jumpToFirstKeys.includes(key);\n        const jumpToLast = !jumpToFirst && jumpToLastKeys.includes(key);\n        const increment =\n          !jumpToFirst && !jumpToLast && incrementKeys.includes(key);\n        const decrement =\n          !jumpToFirst &&\n          !jumpToLast &&\n          !increment &&\n          decrementKeys.includes(key);\n\n        if (jumpToFirst) {\n          event.preventDefault();\n          event.stopPropagation();\n          focusFirst();\n        } else if (jumpToLast) {\n          event.preventDefault();\n          event.stopPropagation();\n          focusLast();\n        } else if (increment) {\n          event.preventDefault();\n          event.stopPropagation();\n          focusNext();\n        } else if (decrement) {\n          event.preventDefault();\n          event.stopPropagation();\n          focusPrevious();\n        }\n      },\n    },\n    movementContext,\n    currentFocusIndex,\n    activeDescendantId,\n    setActiveDescendantId,\n  };\n}\n"],"names":["createContext","useCallback","useContext","useEffect","useMemo","useRef","useState","getFocusableElements","defaultGetFocusableElements","useUserInteractionMode","useDir","useEnsuredRef","useIsomorphicLayoutEffect","DEFAULT_KEYBOARD_MOVEMENT","DEFAULT_LTR_KEYBOARD_MOVEMENT","DEFAULT_RTL_KEYBOARD_MOVEMENT","findMatchIndex","getFirstFocusableIndex","getLastFocusableIndex","getNextFocusableIndex","getSearchText","getVirtualFocusDefaultIndex","isElementDisabled","isNotFocusable","isSearchableEvent","recalculateFocusIndex","noop","DEFAULT_KEYBOARD_MOVEMENT_CONTEXT","config","current","loopable","searchable","horizontal","includeDisabled","tabIndexBehavior","undefined","activeDescendantId","focusFirst","focusLast","focusNext","focusPrevious","focusFromKey","context","displayName","Provider","KeyboardMovementProvider","useKeyboardMovementContext","returnNegative1","useKeyboardMovementProvider","options","ref","propRef","onClick","onFocus","onKeyDown","disabled","trackTabKeys","extendKeyDown","onFocusChange","programmatic","incrementKeys","propIncrementKeys","decrementKeys","propDecrementKeys","jumpToFirstKeys","propJumpToFirstKeys","jumpToLastKeys","propJumpToLastKeys","getDefaultFocusedIndex","isNegativeOneAllowed","nodeRef","nodeRefCallback","isRTL","dir","defaults","configuration","mode","refocus","currentFocusIndex","setActiveDescendantId","process","env","NODE_ENV","tabIndex","getFocusableElementsFromRef","container","updateFocusIndex","index","focusables","focused","scrollIntoView","block","inline","id","focus","element","increment","key","reversed","value","values","map","startIndex","movementContext","movementProps","event","currentTarget","target","HTMLElement","focusedIndex","findIndex","contains","length","isPropagationStopped","defaultFocusIndex","setFocusIndex","preventDefault","stopPropagation","shiftKey","activeElement","click","jumpToFirst","includes","jumpToLast","decrement"],"mappings":"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"}

package/dist/navigation/NavItem.d.ts

@@ -1,8 +1,11 @@
 import { type LiHTMLAttributes, type ReactNode } from "react";
+import { type NavItemClassNameOptions } from "./navItemStyles.js";
 /**
  * @since 6.0.0
+ * @since 6.3.1 Extends NavItemClassNameOptions to allow for CSS properties
+ * augmentation.
  */
-export interface NavItemProps extends LiHTMLAttributes<HTMLLIElement> {
+export interface NavItemProps extends LiHTMLAttributes<HTMLLIElement>, NavItemClassNameOptions {
     children: ReactNode;
 }
 /**

package/dist/navigation/NavItem.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/navigation/NavItem.tsx"],"sourcesContent":["import { type LiHTMLAttributes, type ReactNode, forwardRef } from \"react\";\n\nimport { navItem } from \"./navItemStyles.js\";\n\n/**\n * @since 6.0.0\n */\nexport interface NavItemProps extends LiHTMLAttributes<HTMLLIElement> {\n  children: ReactNode;\n}\n\n/**\n * This component is just used to add padding based on the depth of the nav item\n * and should not be used on its own. See the `CollapsibleNavGroup` and\n * `NavItemLink` instead.\n *\n * @see {@link https://react-md.dev/components/navigation | Navigation Demos}\n * @since 6.0.0\n */\nexport const NavItem = forwardRef<HTMLLIElement, NavItemProps>(\n  function NavItem(props, ref) {\n    const { className, children, ...remaining } = props;\n    return (\n      <li {...remaining} ref={ref} className={navItem({ className })}>\n        {children}\n      </li>\n    );\n  }\n);\n"],"names":["forwardRef","navItem","NavItem","props","ref","className","children","remaining","li"],"mappings":";AAAA,SAAgDA,UAAU,QAAQ,QAAQ;AAE1E,SAASC,OAAO,QAAQ,qBAAqB;AAS7C;;;;;;;CAOC,GACD,OAAO,MAAMC,wBAAUF,WACrB,SAASE,QAAQC,KAAK,EAAEC,GAAG;IACzB,MAAM,EAAEC,SAAS,EAAEC,QAAQ,EAAE,GAAGC,WAAW,GAAGJ;IAC9C,qBACE,KAACK;QAAI,GAAGD,SAAS;QAAEH,KAAKA;QAAKC,WAAWJ,QAAQ;YAAEI;QAAU;kBACzDC;;AAGP,GACA"}
+{"version":3,"sources":["../../src/navigation/NavItem.tsx"],"sourcesContent":["import { type LiHTMLAttributes, type ReactNode, forwardRef } from \"react\";\n\nimport { type NavItemClassNameOptions, navItem } from \"./navItemStyles.js\";\n\n/**\n * @since 6.0.0\n * @since 6.3.1 Extends NavItemClassNameOptions to allow for CSS properties\n * augmentation.\n */\nexport interface NavItemProps\n  extends LiHTMLAttributes<HTMLLIElement>,\n    NavItemClassNameOptions {\n  children: ReactNode;\n}\n\n/**\n * This component is just used to add padding based on the depth of the nav item\n * and should not be used on its own. See the `CollapsibleNavGroup` and\n * `NavItemLink` instead.\n *\n * @see {@link https://react-md.dev/components/navigation | Navigation Demos}\n * @since 6.0.0\n */\nexport const NavItem = forwardRef<HTMLLIElement, NavItemProps>(\n  function NavItem(props, ref) {\n    const { className, children, ...remaining } = props;\n    return (\n      <li {...remaining} ref={ref} className={navItem({ className })}>\n        {children}\n      </li>\n    );\n  }\n);\n"],"names":["forwardRef","navItem","NavItem","props","ref","className","children","remaining","li"],"mappings":";AAAA,SAAgDA,UAAU,QAAQ,QAAQ;AAE1E,SAAuCC,OAAO,QAAQ,qBAAqB;AAa3E;;;;;;;CAOC,GACD,OAAO,MAAMC,wBAAUF,WACrB,SAASE,QAAQC,KAAK,EAAEC,GAAG;IACzB,MAAM,EAAEC,SAAS,EAAEC,QAAQ,EAAE,GAAGC,WAAW,GAAGJ;IAC9C,qBACE,KAACK;QAAI,GAAGD,SAAS;QAAEH,KAAKA;QAAKC,WAAWJ,QAAQ;YAAEI;QAAU;kBACzDC;;AAGP,GACA"}

package/dist/navigation/navItemStyles.d.ts

@@ -1,3 +1,10 @@
+declare module "react" {
+    interface CSSProperties {
+        "--rmd-navigation-border-radius"?: string | number;
+        "--rmd-navigation-horizontal-padding"?: string | number;
+        "--rmd-navigation-padding-incrementor"?: string | number;
+    }
+}
 /**
  * @since 6.0.0
  */

package/dist/navigation/navItemStyles.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/navigation/navItemStyles.ts"],"sourcesContent":["import { cnb } from \"cnbuilder\";\n\nimport { button } from \"../button/styles.js\";\nimport { cssUtils } from \"../cssUtils.js\";\nimport { bem } from \"../utils/bem.js\";\n\nconst styles = bem(\"rmd-nav-item\");\n\n/**\n * @since 6.0.0\n */\nexport interface NavItemClassNameOptions {\n  className?: string;\n}\n\n/**\n * @since 6.0.0\n */\nexport function navItem(options: NavItemClassNameOptions = {}): string {\n  const { className } = options;\n\n  return cnb(styles(), className);\n}\n\n/**\n * @since 6.0.0\n */\nexport interface NavItemContentClassNameOptions {\n  className?: string;\n}\n\n/**\n * @since 6.0.0\n */\nexport function navItemContent(\n  options: NavItemContentClassNameOptions = {}\n): string {\n  const { className } = options;\n\n  return cnb(styles(\"content\"), className);\n}\n\n/**\n * @since 6.0.0\n */\nexport interface NavItemLinkClassNameOptions {\n  className?: string;\n  active?: boolean;\n\n  /** @defaultValue `cssUtils({ fontWeight: \"bold\" })` */\n  activeClassName?: string;\n}\n\n/**\n * @since 6.0.0\n */\nexport function navItemLink(options: NavItemLinkClassNameOptions = {}): string {\n  const {\n    active,\n    activeClassName = cssUtils({ fontWeight: \"bold\" }),\n    className,\n  } = options;\n\n  return cnb(\n    navItemContent(),\n    styles(\"link\", { active }),\n    button(),\n    cssUtils({ textDecoration: \"none\" }),\n    active && activeClassName,\n    className\n  );\n}\n"],"names":["cnb","button","cssUtils","bem","styles","navItem","options","className","navItemContent","navItemLink","active","activeClassName","fontWeight","textDecoration"],"mappings":"AAAA,SAASA,GAAG,QAAQ,YAAY;AAEhC,SAASC,MAAM,QAAQ,sBAAsB;AAC7C,SAASC,QAAQ,QAAQ,iBAAiB;AAC1C,SAASC,GAAG,QAAQ,kBAAkB;AAEtC,MAAMC,SAASD,IAAI;AASnB;;CAEC,GACD,OAAO,SAASE,QAAQC,UAAmC,CAAC,CAAC;IAC3D,MAAM,EAAEC,SAAS,EAAE,GAAGD;IAEtB,OAAON,IAAII,UAAUG;AACvB;AASA;;CAEC,GACD,OAAO,SAASC,eACdF,UAA0C,CAAC,CAAC;IAE5C,MAAM,EAAEC,SAAS,EAAE,GAAGD;IAEtB,OAAON,IAAII,OAAO,YAAYG;AAChC;AAaA;;CAEC,GACD,OAAO,SAASE,YAAYH,UAAuC,CAAC,CAAC;IACnE,MAAM,EACJI,MAAM,EACNC,kBAAkBT,SAAS;QAAEU,YAAY;IAAO,EAAE,EAClDL,SAAS,EACV,GAAGD;IAEJ,OAAON,IACLQ,kBACAJ,OAAO,QAAQ;QAAEM;IAAO,IACxBT,UACAC,SAAS;QAAEW,gBAAgB;IAAO,IAClCH,UAAUC,iBACVJ;AAEJ"}
+{"version":3,"sources":["../../src/navigation/navItemStyles.ts"],"sourcesContent":["import { cnb } from \"cnbuilder\";\n\nimport { button } from \"../button/styles.js\";\nimport { cssUtils } from \"../cssUtils.js\";\nimport { bem } from \"../utils/bem.js\";\n\nconst styles = bem(\"rmd-nav-item\");\n\ndeclare module \"react\" {\n  interface CSSProperties {\n    \"--rmd-navigation-border-radius\"?: string | number;\n    \"--rmd-navigation-horizontal-padding\"?: string | number;\n    \"--rmd-navigation-padding-incrementor\"?: string | number;\n  }\n}\n\n/**\n * @since 6.0.0\n */\nexport interface NavItemClassNameOptions {\n  className?: string;\n}\n\n/**\n * @since 6.0.0\n */\nexport function navItem(options: NavItemClassNameOptions = {}): string {\n  const { className } = options;\n\n  return cnb(styles(), className);\n}\n\n/**\n * @since 6.0.0\n */\nexport interface NavItemContentClassNameOptions {\n  className?: string;\n}\n\n/**\n * @since 6.0.0\n */\nexport function navItemContent(\n  options: NavItemContentClassNameOptions = {}\n): string {\n  const { className } = options;\n\n  return cnb(styles(\"content\"), className);\n}\n\n/**\n * @since 6.0.0\n */\nexport interface NavItemLinkClassNameOptions {\n  className?: string;\n  active?: boolean;\n\n  /** @defaultValue `cssUtils({ fontWeight: \"bold\" })` */\n  activeClassName?: string;\n}\n\n/**\n * @since 6.0.0\n */\nexport function navItemLink(options: NavItemLinkClassNameOptions = {}): string {\n  const {\n    active,\n    activeClassName = cssUtils({ fontWeight: \"bold\" }),\n    className,\n  } = options;\n\n  return cnb(\n    navItemContent(),\n    styles(\"link\", { active }),\n    button(),\n    cssUtils({ textDecoration: \"none\" }),\n    active && activeClassName,\n    className\n  );\n}\n"],"names":["cnb","button","cssUtils","bem","styles","navItem","options","className","navItemContent","navItemLink","active","activeClassName","fontWeight","textDecoration"],"mappings":"AAAA,SAASA,GAAG,QAAQ,YAAY;AAEhC,SAASC,MAAM,QAAQ,sBAAsB;AAC7C,SAASC,QAAQ,QAAQ,iBAAiB;AAC1C,SAASC,GAAG,QAAQ,kBAAkB;AAEtC,MAAMC,SAASD,IAAI;AAiBnB;;CAEC,GACD,OAAO,SAASE,QAAQC,UAAmC,CAAC,CAAC;IAC3D,MAAM,EAAEC,SAAS,EAAE,GAAGD;IAEtB,OAAON,IAAII,UAAUG;AACvB;AASA;;CAEC,GACD,OAAO,SAASC,eACdF,UAA0C,CAAC,CAAC;IAE5C,MAAM,EAAEC,SAAS,EAAE,GAAGD;IAEtB,OAAON,IAAII,OAAO,YAAYG;AAChC;AAaA;;CAEC,GACD,OAAO,SAASE,YAAYH,UAAuC,CAAC,CAAC;IACnE,MAAM,EACJI,MAAM,EACNC,kBAAkBT,SAAS;QAAEU,YAAY;IAAO,EAAE,EAClDL,SAAS,EACV,GAAGD;IAEJ,OAAON,IACLQ,kBACAJ,OAAO,QAAQ;QAAEM;IAAO,IACxBT,UACAC,SAAS;QAAEW,gBAAgB;IAAO,IAClCH,UAAUC,iBACVJ;AAEJ"}

package/dist/overlay/Overlay.d.ts

@@ -1,32 +1,13 @@
 import { type HTMLAttributes } from "react";
-import { type BoxAlignItems, type BoxJustifyContent } from "../box/styles.js";
 import { type CSSTransitionComponentProps, type TransitionActions } from "../transition/types.js";
-declare module "react" {
-    interface CSSProperties {
-        "--rmd-overlay-background-color"?: string;
-        "--rmd-overlay-z-index"?: number;
-    }
-}
+import { type BaseOverlayClassNameOptions } from "./styles.js";
 /**
  * @since 6.0.0 Added `align` and `justify` props.
  * @since 6.0.0 Renamed `hidden` to `noOpacity`.
+ * @since 6.3.1 Extends BaseOverlayClassNameOptions for CSSProperties module
+ * augmentation.
  */
-export interface OverlayProps extends HTMLAttributes<HTMLSpanElement>, CSSTransitionComponentProps, TransitionActions {
-    /**
-     * @defaultValue `"center"`
-     * @since 6.0.0
-     */
-    align?: BoxAlignItems;
-    /**
-     * @defaultValue `"center"`
-     * @since 6.0.0
-     */
-    justify?: BoxJustifyContent;
-    /**
-     * Set this to `true` for when the overlay should be visible. Toggling this
-     * value will trigger the enter/exit animation.
-     */
-    visible: boolean;
+export interface OverlayProps extends HTMLAttributes<HTMLSpanElement>, BaseOverlayClassNameOptions, CSSTransitionComponentProps, TransitionActions {
     /**
      * Set this to `true` if the overlay should be rendered with an `opacity: 0`
      * and disabling the animation. This is useful if you'd like a "close on

package/dist/overlay/Overlay.js.map

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

package/dist/overlay/styles.d.ts

@@ -1,18 +1,36 @@
 import { type BoxAlignItems, type BoxJustifyContent } from "../box/styles.js";
-/** @since 6.0.0 */
-export interface OverlayClassNameOptions {
+declare module "react" {
+    interface CSSProperties {
+        "--rmd-overlay-background-color"?: string;
+        "--rmd-overlay-z-index"?: number;
+    }
+}
+export interface BaseOverlayClassNameOptions {
     className?: string;
+    /**
+     * Set this to `true` for when the overlay should be visible. Toggling this
+     * value will trigger the enter/exit animation.
+     */
     visible: boolean;
-    /** @defaultValue `false` */
-    active?: boolean;
+    /**
+     * @defaultValue `"center"`
+     * @since 6.0.0
+     */
+    align?: BoxAlignItems;
+    /**
+     * @defaultValue `"center"`
+     * @since 6.0.0
+     */
+    justify?: BoxJustifyContent;
     /** @defaultValue `false` */
     clickable?: boolean;
+}
+/** @since 6.0.0 */
+export interface OverlayClassNameOptions extends BaseOverlayClassNameOptions {
+    /** @defaultValue `false` */
+    active?: boolean;
     /** @defaultValue `false` */
     absolute?: boolean;
-    /** @defaultValue `"center"` */
-    align?: BoxAlignItems;
-    /** @defaultValue `"center"` */
-    justify?: BoxJustifyContent;
 }
 /**
  * @since 6.0.0

package/dist/overlay/styles.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/overlay/styles.ts"],"sourcesContent":["import { cnb } from \"cnbuilder\";\n\nimport {\n  type BoxAlignItems,\n  type BoxJustifyContent,\n  box,\n} from \"../box/styles.js\";\nimport {\n  type CSSTransitionClassNames,\n  type TransitionTimeout,\n} from \"../transition/types.js\";\nimport { bem } from \"../utils/bem.js\";\n\nconst styles = bem(\"rmd-overlay\");\n\n/** @since 6.0.0 */\nexport interface OverlayClassNameOptions {\n  className?: string;\n\n  visible: boolean;\n\n  /** @defaultValue `false` */\n  active?: boolean;\n\n  /** @defaultValue `false` */\n  clickable?: boolean;\n\n  /** @defaultValue `false` */\n  absolute?: boolean;\n\n  /** @defaultValue `\"center\"` */\n  align?: BoxAlignItems;\n\n  /** @defaultValue `\"center\"` */\n  justify?: BoxJustifyContent;\n}\n\n/**\n * @since 6.0.0\n */\nexport function overlay(\n  options: OverlayClassNameOptions & { active?: boolean }\n): string {\n  const {\n    visible,\n    active,\n    absolute = false,\n    clickable = false,\n    align = \"center\",\n    justify = \"center\",\n    className,\n  } = options;\n\n  return cnb(\n    styles({\n      active,\n      visible,\n      clickable,\n      absolute,\n    }),\n    box({\n      align,\n      justify,\n      disablePadding: true,\n    }),\n    className\n  );\n}\n\n/** @since 2.4.0 */\nexport const DEFAULT_OVERLAY_TIMEOUT = 150 as const satisfies TransitionTimeout;\n\n/** @since 2.4.0 */\nexport const DEFAULT_OVERLAY_CLASSNAMES = {\n  appearActive: \"rmd-overlay--active\",\n  appearDone: \"rmd-overlay--active\",\n  enterActive: \"rmd-overlay--active\",\n  enterDone: \"rmd-overlay--active\",\n} as const satisfies CSSTransitionClassNames;\n"],"names":["cnb","box","bem","styles","overlay","options","visible","active","absolute","clickable","align","justify","className","disablePadding","DEFAULT_OVERLAY_TIMEOUT","DEFAULT_OVERLAY_CLASSNAMES","appearActive","appearDone","enterActive","enterDone"],"mappings":"AAAA,SAASA,GAAG,QAAQ,YAAY;AAEhC,SAGEC,GAAG,QACE,mBAAmB;AAK1B,SAASC,GAAG,QAAQ,kBAAkB;AAEtC,MAAMC,SAASD,IAAI;AAwBnB;;CAEC,GACD,OAAO,SAASE,QACdC,OAAuD;IAEvD,MAAM,EACJC,OAAO,EACPC,MAAM,EACNC,WAAW,KAAK,EAChBC,YAAY,KAAK,EACjBC,QAAQ,QAAQ,EAChBC,UAAU,QAAQ,EAClBC,SAAS,EACV,GAAGP;IAEJ,OAAOL,IACLG,OAAO;QACLI;QACAD;QACAG;QACAD;IACF,IACAP,IAAI;QACFS;QACAC;QACAE,gBAAgB;IAClB,IACAD;AAEJ;AAEA,iBAAiB,GACjB,OAAO,MAAME,0BAA0B,IAAyC;AAEhF,iBAAiB,GACjB,OAAO,MAAMC,6BAA6B;IACxCC,cAAc;IACdC,YAAY;IACZC,aAAa;IACbC,WAAW;AACb,EAA6C"}
+{"version":3,"sources":["../../src/overlay/styles.ts"],"sourcesContent":["import { cnb } from \"cnbuilder\";\n\nimport {\n  type BoxAlignItems,\n  type BoxJustifyContent,\n  box,\n} from \"../box/styles.js\";\nimport {\n  type CSSTransitionClassNames,\n  type TransitionTimeout,\n} from \"../transition/types.js\";\nimport { bem } from \"../utils/bem.js\";\n\nconst styles = bem(\"rmd-overlay\");\n\ndeclare module \"react\" {\n  interface CSSProperties {\n    \"--rmd-overlay-background-color\"?: string;\n    \"--rmd-overlay-z-index\"?: number;\n  }\n}\n\nexport interface BaseOverlayClassNameOptions {\n  className?: string;\n\n  /**\n   * Set this to `true` for when the overlay should be visible. Toggling this\n   * value will trigger the enter/exit animation.\n   */\n  visible: boolean;\n\n  /**\n   * @defaultValue `\"center\"`\n   * @since 6.0.0\n   */\n  align?: BoxAlignItems;\n\n  /**\n   * @defaultValue `\"center\"`\n   * @since 6.0.0\n   */\n  justify?: BoxJustifyContent;\n\n  /** @defaultValue `false` */\n  clickable?: boolean;\n}\n\n/** @since 6.0.0 */\nexport interface OverlayClassNameOptions extends BaseOverlayClassNameOptions {\n  /** @defaultValue `false` */\n  active?: boolean;\n\n  /** @defaultValue `false` */\n  absolute?: boolean;\n}\n\n/**\n * @since 6.0.0\n */\nexport function overlay(\n  options: OverlayClassNameOptions & { active?: boolean }\n): string {\n  const {\n    visible,\n    active,\n    absolute = false,\n    clickable = false,\n    align = \"center\",\n    justify = \"center\",\n    className,\n  } = options;\n\n  return cnb(\n    styles({\n      active,\n      visible,\n      clickable,\n      absolute,\n    }),\n    box({\n      align,\n      justify,\n      disablePadding: true,\n    }),\n    className\n  );\n}\n\n/** @since 2.4.0 */\nexport const DEFAULT_OVERLAY_TIMEOUT = 150 as const satisfies TransitionTimeout;\n\n/** @since 2.4.0 */\nexport const DEFAULT_OVERLAY_CLASSNAMES = {\n  appearActive: \"rmd-overlay--active\",\n  appearDone: \"rmd-overlay--active\",\n  enterActive: \"rmd-overlay--active\",\n  enterDone: \"rmd-overlay--active\",\n} as const satisfies CSSTransitionClassNames;\n"],"names":["cnb","box","bem","styles","overlay","options","visible","active","absolute","clickable","align","justify","className","disablePadding","DEFAULT_OVERLAY_TIMEOUT","DEFAULT_OVERLAY_CLASSNAMES","appearActive","appearDone","enterActive","enterDone"],"mappings":"AAAA,SAASA,GAAG,QAAQ,YAAY;AAEhC,SAGEC,GAAG,QACE,mBAAmB;AAK1B,SAASC,GAAG,QAAQ,kBAAkB;AAEtC,MAAMC,SAASD,IAAI;AA2CnB;;CAEC,GACD,OAAO,SAASE,QACdC,OAAuD;IAEvD,MAAM,EACJC,OAAO,EACPC,MAAM,EACNC,WAAW,KAAK,EAChBC,YAAY,KAAK,EACjBC,QAAQ,QAAQ,EAChBC,UAAU,QAAQ,EAClBC,SAAS,EACV,GAAGP;IAEJ,OAAOL,IACLG,OAAO;QACLI;QACAD;QACAG;QACAD;IACF,IACAP,IAAI;QACFS;QACAC;QACAE,gBAAgB;IAClB,IACAD;AAEJ;AAEA,iBAAiB,GACjB,OAAO,MAAME,0BAA0B,IAAyC;AAEhF,iBAAiB,GACjB,OAAO,MAAMC,6BAA6B;IACxCC,cAAc;IACdC,YAAY;IACZC,aAAa;IACbC,WAAW;AACb,EAA6C"}

package/dist/progress/LinearProgress.d.ts

@@ -1,10 +1,13 @@
 import { type CSSProperties, type HTMLAttributes } from "react";
 import { type LabelRequiredForA11y, type PropsWithRef } from "../types.js";
+import { type BaseLinearProgressClassNameOptions } from "./linearProgressStyles.js";
 import { type ProgressProps } from "./types.js";
 /**
  * @since 6.0.0 Added the `theme` prop
+ * @since 6.3.1 extends BaseLinearProgressClassNameOptions for CSSProperties
+ * module augmentation.
  */
-export interface LinearProgressProps extends Omit<HTMLAttributes<HTMLSpanElement>, "id" | "children">, ProgressProps {
+export interface LinearProgressProps extends Omit<HTMLAttributes<HTMLSpanElement>, "id" | "children">, BaseLinearProgressClassNameOptions, 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
@@ -28,14 +31,6 @@ export interface LinearProgressProps extends Omit<HTMLAttributes<HTMLSpanElement
      * @defaultValue `false`
      */
     reverse?: boolean;
-    /**
-     * Boolean if the progress should be vertical instead of horizontal.  When
-     * this prop is set, you should also set the `verticalHeight` prop to a height
-     * value you want for your progress bar.
-     *
-     * @defaultValue `false`
-     */
-    vertical?: boolean;
     /**
      * Since there isn't really a good way to have "auto height", you'll need to
      * manually set the progress bar's height with this prop to some pixel value.

package/dist/progress/LinearProgress.js.map

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

package/dist/progress/circularProgressStyles.d.ts

@@ -1,4 +1,10 @@
 import { type ProgressTheme } from "./types.js";
+declare module "react" {
+    interface CSSProperties {
+        "--rmd-progress-circular-size"?: string | number;
+        "--rmd-progress-circular-stroke-width"?: string | number;
+    }
+}
 /**
  * @since 6.2.0
  */

package/dist/progress/circularProgressStyles.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/progress/circularProgressStyles.ts"],"sourcesContent":["import { cnb } from \"cnbuilder\";\n\nimport { cssUtils } from \"../cssUtils.js\";\nimport { bem } from \"../utils/bem.js\";\nimport { type ProgressTheme } from \"./types.js\";\n\nconst styles = bem(\"rmd-circular-progress\");\n\n/**\n * @since 6.2.0\n */\nexport interface CircularProgressClassNameOptions {\n  className?: string;\n\n  /**\n   * @defaultValue `\"primary\"`\n   * @since 6.0.0\n   */\n  theme?: ProgressTheme;\n\n  /**\n   * Set to `true` to render as a smaller size.\n   *\n   * @defaultValue `false`\n   * @since 2.3.0\n   * @since 6.0.0 Renamed from `small`\n   */\n  dense?: boolean;\n\n  /**\n   * Boolean if the circular progress should be centered using left and right\n   * margins.\n   *\n   * @defaultValue `false`\n   * @since 6.0.0 Renamed from `centered`\n   */\n  disableCentered?: boolean;\n}\n\n/**\n * @since 6.2.0\n */\nexport function circularProgress(\n  options: CircularProgressClassNameOptions = {}\n): string {\n  const { className, theme = \"primary\", dense, disableCentered } = options;\n\n  return cnb(\n    styles({ dense, centered: !disableCentered }),\n    theme !== \"current-color\" && cssUtils({ textColor: theme }),\n    className\n  );\n}\n\n/**\n * @since 6.2.0\n */\nexport interface CircularProgressSvgClassNameOptions {\n  className?: string;\n  /** @defaultValue `false` */\n  indeterminate?: boolean;\n  /** @defaultValue `false` */\n  disableShrink?: boolean;\n}\n\n/**\n * @since 6.2.0\n */\nexport function circularProgressSvg(\n  options: CircularProgressSvgClassNameOptions = {}\n): string {\n  const { className, indeterminate, disableShrink } = options;\n\n  return cnb(\n    styles(\"svg\", {\n      determinate: !indeterminate,\n      indeterminate: indeterminate && !disableShrink,\n      \"rotate-only\": indeterminate && disableShrink,\n    }),\n    className\n  );\n}\n/**\n * @since 6.2.0\n */\nexport interface CircularProgressCircleClassNameOptions {\n  className?: string;\n  /** @defaultValue `false` */\n  indeterminate?: boolean;\n  /** @defaultValue `false` */\n  disableShrink?: boolean;\n  /** @defaultValue `false` */\n  disableTransition?: boolean;\n}\n\n/**\n * @since 6.2.0\n */\nexport function circularProgressCircle(\n  options: CircularProgressCircleClassNameOptions = {}\n): string {\n  const { className, indeterminate, disableShrink, disableTransition } =\n    options;\n\n  return cnb(\n    styles(\"circle\", {\n      animate: !disableTransition && !indeterminate,\n      determinate: !indeterminate,\n      indeterminate: indeterminate && !disableShrink,\n      \"rotate-only\": indeterminate && disableShrink,\n    }),\n    className\n  );\n}\n"],"names":["cnb","cssUtils","bem","styles","circularProgress","options","className","theme","dense","disableCentered","centered","textColor","circularProgressSvg","indeterminate","disableShrink","determinate","circularProgressCircle","disableTransition","animate"],"mappings":"AAAA,SAASA,GAAG,QAAQ,YAAY;AAEhC,SAASC,QAAQ,QAAQ,iBAAiB;AAC1C,SAASC,GAAG,QAAQ,kBAAkB;AAGtC,MAAMC,SAASD,IAAI;AAiCnB;;CAEC,GACD,OAAO,SAASE,iBACdC,UAA4C,CAAC,CAAC;IAE9C,MAAM,EAAEC,SAAS,EAAEC,QAAQ,SAAS,EAAEC,KAAK,EAAEC,eAAe,EAAE,GAAGJ;IAEjE,OAAOL,IACLG,OAAO;QAAEK;QAAOE,UAAU,CAACD;IAAgB,IAC3CF,UAAU,mBAAmBN,SAAS;QAAEU,WAAWJ;IAAM,IACzDD;AAEJ;AAaA;;CAEC,GACD,OAAO,SAASM,oBACdP,UAA+C,CAAC,CAAC;IAEjD,MAAM,EAAEC,SAAS,EAAEO,aAAa,EAAEC,aAAa,EAAE,GAAGT;IAEpD,OAAOL,IACLG,OAAO,OAAO;QACZY,aAAa,CAACF;QACdA,eAAeA,iBAAiB,CAACC;QACjC,eAAeD,iBAAiBC;IAClC,IACAR;AAEJ;AAcA;;CAEC,GACD,OAAO,SAASU,uBACdX,UAAkD,CAAC,CAAC;IAEpD,MAAM,EAAEC,SAAS,EAAEO,aAAa,EAAEC,aAAa,EAAEG,iBAAiB,EAAE,GAClEZ;IAEF,OAAOL,IACLG,OAAO,UAAU;QACfe,SAAS,CAACD,qBAAqB,CAACJ;QAChCE,aAAa,CAACF;QACdA,eAAeA,iBAAiB,CAACC;QACjC,eAAeD,iBAAiBC;IAClC,IACAR;AAEJ"}
+{"version":3,"sources":["../../src/progress/circularProgressStyles.ts"],"sourcesContent":["import { cnb } from \"cnbuilder\";\n\nimport { cssUtils } from \"../cssUtils.js\";\nimport { bem } from \"../utils/bem.js\";\nimport { type ProgressTheme } from \"./types.js\";\n\nconst styles = bem(\"rmd-circular-progress\");\n\ndeclare module \"react\" {\n  interface CSSProperties {\n    \"--rmd-progress-circular-size\"?: string | number;\n    \"--rmd-progress-circular-stroke-width\"?: string | number;\n  }\n}\n\n/**\n * @since 6.2.0\n */\nexport interface CircularProgressClassNameOptions {\n  className?: string;\n\n  /**\n   * @defaultValue `\"primary\"`\n   * @since 6.0.0\n   */\n  theme?: ProgressTheme;\n\n  /**\n   * Set to `true` to render as a smaller size.\n   *\n   * @defaultValue `false`\n   * @since 2.3.0\n   * @since 6.0.0 Renamed from `small`\n   */\n  dense?: boolean;\n\n  /**\n   * Boolean if the circular progress should be centered using left and right\n   * margins.\n   *\n   * @defaultValue `false`\n   * @since 6.0.0 Renamed from `centered`\n   */\n  disableCentered?: boolean;\n}\n\n/**\n * @since 6.2.0\n */\nexport function circularProgress(\n  options: CircularProgressClassNameOptions = {}\n): string {\n  const { className, theme = \"primary\", dense, disableCentered } = options;\n\n  return cnb(\n    styles({ dense, centered: !disableCentered }),\n    theme !== \"current-color\" && cssUtils({ textColor: theme }),\n    className\n  );\n}\n\n/**\n * @since 6.2.0\n */\nexport interface CircularProgressSvgClassNameOptions {\n  className?: string;\n  /** @defaultValue `false` */\n  indeterminate?: boolean;\n  /** @defaultValue `false` */\n  disableShrink?: boolean;\n}\n\n/**\n * @since 6.2.0\n */\nexport function circularProgressSvg(\n  options: CircularProgressSvgClassNameOptions = {}\n): string {\n  const { className, indeterminate, disableShrink } = options;\n\n  return cnb(\n    styles(\"svg\", {\n      determinate: !indeterminate,\n      indeterminate: indeterminate && !disableShrink,\n      \"rotate-only\": indeterminate && disableShrink,\n    }),\n    className\n  );\n}\n/**\n * @since 6.2.0\n */\nexport interface CircularProgressCircleClassNameOptions {\n  className?: string;\n  /** @defaultValue `false` */\n  indeterminate?: boolean;\n  /** @defaultValue `false` */\n  disableShrink?: boolean;\n  /** @defaultValue `false` */\n  disableTransition?: boolean;\n}\n\n/**\n * @since 6.2.0\n */\nexport function circularProgressCircle(\n  options: CircularProgressCircleClassNameOptions = {}\n): string {\n  const { className, indeterminate, disableShrink, disableTransition } =\n    options;\n\n  return cnb(\n    styles(\"circle\", {\n      animate: !disableTransition && !indeterminate,\n      determinate: !indeterminate,\n      indeterminate: indeterminate && !disableShrink,\n      \"rotate-only\": indeterminate && disableShrink,\n    }),\n    className\n  );\n}\n"],"names":["cnb","cssUtils","bem","styles","circularProgress","options","className","theme","dense","disableCentered","centered","textColor","circularProgressSvg","indeterminate","disableShrink","determinate","circularProgressCircle","disableTransition","animate"],"mappings":"AAAA,SAASA,GAAG,QAAQ,YAAY;AAEhC,SAASC,QAAQ,QAAQ,iBAAiB;AAC1C,SAASC,GAAG,QAAQ,kBAAkB;AAGtC,MAAMC,SAASD,IAAI;AAwCnB;;CAEC,GACD,OAAO,SAASE,iBACdC,UAA4C,CAAC,CAAC;IAE9C,MAAM,EAAEC,SAAS,EAAEC,QAAQ,SAAS,EAAEC,KAAK,EAAEC,eAAe,EAAE,GAAGJ;IAEjE,OAAOL,IACLG,OAAO;QAAEK;QAAOE,UAAU,CAACD;IAAgB,IAC3CF,UAAU,mBAAmBN,SAAS;QAAEU,WAAWJ;IAAM,IACzDD;AAEJ;AAaA;;CAEC,GACD,OAAO,SAASM,oBACdP,UAA+C,CAAC,CAAC;IAEjD,MAAM,EAAEC,SAAS,EAAEO,aAAa,EAAEC,aAAa,EAAE,GAAGT;IAEpD,OAAOL,IACLG,OAAO,OAAO;QACZY,aAAa,CAACF;QACdA,eAAeA,iBAAiB,CAACC;QACjC,eAAeD,iBAAiBC;IAClC,IACAR;AAEJ;AAcA;;CAEC,GACD,OAAO,SAASU,uBACdX,UAAkD,CAAC,CAAC;IAEpD,MAAM,EAAEC,SAAS,EAAEO,aAAa,EAAEC,aAAa,EAAEG,iBAAiB,EAAE,GAClEZ;IAEF,OAAOL,IACLG,OAAO,UAAU;QACfe,SAAS,CAACD,qBAAqB,CAACJ;QAChCE,aAAa,CAACF;QACdA,eAAeA,iBAAiB,CAACC;QACjC,eAAeD,iBAAiBC;IAClC,IACAR;AAEJ"}

package/dist/progress/linearProgressStyles.d.ts

@@ -1,16 +1,31 @@
 import { type ProgressTheme } from "./types.js";
-/**
- * @since 6.2.0
- */
-export interface LinearProgressClassNameOptions {
+declare module "react" {
+    interface CSSProperties {
+        "--rmd-progress-background-color"?: string;
+        "--rmd-progress-color"?: string;
+        "--rmd-progress-linear-size"?: string | number;
+    }
+}
+export interface BaseLinearProgressClassNameOptions {
     className?: string;
     /**
      * @defaultValue `"primary"`
      * @since 6.0.0
      */
     theme?: ProgressTheme;
-    /** @defaultValue `false` */
+    /**
+     * Boolean if the progress should be vertical instead of horizontal.  When
+     * this prop is set, you should also set the `verticalHeight` prop to a height
+     * value you want for your progress bar.
+     *
+     * @defaultValue `false`
+     */
     vertical?: boolean;
+}
+/**
+ * @since 6.2.0
+ */
+export interface LinearProgressClassNameOptions extends BaseLinearProgressClassNameOptions {
     /** @defaultValue `false` */
     indeterminate?: boolean;
 }

package/dist/progress/linearProgressStyles.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/progress/linearProgressStyles.ts"],"sourcesContent":["import { cnb } from \"cnbuilder\";\n\nimport { cssUtils } from \"../cssUtils.js\";\nimport { bem } from \"../utils/bem.js\";\nimport { type ProgressTheme } from \"./types.js\";\n\nconst styles = bem(\"rmd-linear-progress\");\n\n/**\n * @since 6.2.0\n */\nexport interface LinearProgressClassNameOptions {\n  className?: string;\n\n  /**\n   * @defaultValue `\"primary\"`\n   * @since 6.0.0\n   */\n  theme?: ProgressTheme;\n\n  /** @defaultValue `false` */\n  vertical?: boolean;\n\n  /** @defaultValue `false` */\n  indeterminate?: boolean;\n}\n\n/**\n * @since 6.2.0\n */\nexport function linearProgress(\n  options: LinearProgressClassNameOptions = {}\n): string {\n  const { className, theme = \"primary\", vertical, indeterminate } = options;\n\n  return cnb(\n    styles({\n      vertical,\n      horizontal: !vertical,\n      determinate: !indeterminate,\n      indeterminate,\n    }),\n    theme !== \"current-color\" && cssUtils({ textColor: theme }),\n    className\n  );\n}\n\n/**\n * @since 6.2.0\n */\nexport interface LinearProgressBarClassNameOptions {\n  className?: string;\n\n  /** @defaultValue `false` */\n  reverse?: boolean;\n  /** @defaultValue `false` */\n  vertical?: boolean;\n  /** @defaultValue `false` */\n  indeterminate?: boolean;\n  /** @defaultValue `false` */\n  disableTransition?: boolean;\n}\n\n/**\n * @since 6.2.0\n */\nexport function linearProgressBar(\n  options: LinearProgressBarClassNameOptions = {}\n): string {\n  const { className, reverse, vertical, indeterminate, disableTransition } =\n    options;\n\n  return cnb(\n    styles(\"bar\", {\n      vertical,\n      \"vertical-reverse\": vertical && reverse,\n      horizontal: !vertical,\n      \"horizontal-reverse\": !vertical && reverse,\n      animate: !disableTransition && !indeterminate,\n      determinate: !indeterminate,\n      indeterminate,\n      \"determinate-reverse\": !indeterminate && reverse && !vertical,\n      \"determinate-vertical-reverse\": !indeterminate && reverse && vertical,\n      \"indeterminate-reverse\": indeterminate && reverse && !vertical,\n      \"indeterminate-vertical\": indeterminate && vertical,\n      \"indeterminate-vertical-reverse\": indeterminate && reverse && vertical,\n    }),\n    className\n  );\n}\n"],"names":["cnb","cssUtils","bem","styles","linearProgress","options","className","theme","vertical","indeterminate","horizontal","determinate","textColor","linearProgressBar","reverse","disableTransition","animate"],"mappings":"AAAA,SAASA,GAAG,QAAQ,YAAY;AAEhC,SAASC,QAAQ,QAAQ,iBAAiB;AAC1C,SAASC,GAAG,QAAQ,kBAAkB;AAGtC,MAAMC,SAASD,IAAI;AAqBnB;;CAEC,GACD,OAAO,SAASE,eACdC,UAA0C,CAAC,CAAC;IAE5C,MAAM,EAAEC,SAAS,EAAEC,QAAQ,SAAS,EAAEC,QAAQ,EAAEC,aAAa,EAAE,GAAGJ;IAElE,OAAOL,IACLG,OAAO;QACLK;QACAE,YAAY,CAACF;QACbG,aAAa,CAACF;QACdA;IACF,IACAF,UAAU,mBAAmBN,SAAS;QAAEW,WAAWL;IAAM,IACzDD;AAEJ;AAkBA;;CAEC,GACD,OAAO,SAASO,kBACdR,UAA6C,CAAC,CAAC;IAE/C,MAAM,EAAEC,SAAS,EAAEQ,OAAO,EAAEN,QAAQ,EAAEC,aAAa,EAAEM,iBAAiB,EAAE,GACtEV;IAEF,OAAOL,IACLG,OAAO,OAAO;QACZK;QACA,oBAAoBA,YAAYM;QAChCJ,YAAY,CAACF;QACb,sBAAsB,CAACA,YAAYM;QACnCE,SAAS,CAACD,qBAAqB,CAACN;QAChCE,aAAa,CAACF;QACdA;QACA,uBAAuB,CAACA,iBAAiBK,WAAW,CAACN;QACrD,gCAAgC,CAACC,iBAAiBK,WAAWN;QAC7D,yBAAyBC,iBAAiBK,WAAW,CAACN;QACtD,0BAA0BC,iBAAiBD;QAC3C,kCAAkCC,iBAAiBK,WAAWN;IAChE,IACAF;AAEJ"}
+{"version":3,"sources":["../../src/progress/linearProgressStyles.ts"],"sourcesContent":["import { cnb } from \"cnbuilder\";\n\nimport { cssUtils } from \"../cssUtils.js\";\nimport { bem } from \"../utils/bem.js\";\nimport { type ProgressTheme } from \"./types.js\";\n\nconst styles = bem(\"rmd-linear-progress\");\n\ndeclare module \"react\" {\n  interface CSSProperties {\n    \"--rmd-progress-background-color\"?: string;\n    \"--rmd-progress-color\"?: string;\n    \"--rmd-progress-linear-size\"?: string | number;\n  }\n}\n\nexport interface BaseLinearProgressClassNameOptions {\n  className?: string;\n\n  /**\n   * @defaultValue `\"primary\"`\n   * @since 6.0.0\n   */\n  theme?: ProgressTheme;\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/**\n * @since 6.2.0\n */\nexport interface LinearProgressClassNameOptions\n  extends BaseLinearProgressClassNameOptions {\n  /** @defaultValue `false` */\n  indeterminate?: boolean;\n}\n\n/**\n * @since 6.2.0\n */\nexport function linearProgress(\n  options: LinearProgressClassNameOptions = {}\n): string {\n  const { className, theme = \"primary\", vertical, indeterminate } = options;\n\n  return cnb(\n    styles({\n      vertical,\n      horizontal: !vertical,\n      determinate: !indeterminate,\n      indeterminate,\n    }),\n    theme !== \"current-color\" && cssUtils({ textColor: theme }),\n    className\n  );\n}\n\n/**\n * @since 6.2.0\n */\nexport interface LinearProgressBarClassNameOptions {\n  className?: string;\n\n  /** @defaultValue `false` */\n  reverse?: boolean;\n  /** @defaultValue `false` */\n  vertical?: boolean;\n  /** @defaultValue `false` */\n  indeterminate?: boolean;\n  /** @defaultValue `false` */\n  disableTransition?: boolean;\n}\n\n/**\n * @since 6.2.0\n */\nexport function linearProgressBar(\n  options: LinearProgressBarClassNameOptions = {}\n): string {\n  const { className, reverse, vertical, indeterminate, disableTransition } =\n    options;\n\n  return cnb(\n    styles(\"bar\", {\n      vertical,\n      \"vertical-reverse\": vertical && reverse,\n      horizontal: !vertical,\n      \"horizontal-reverse\": !vertical && reverse,\n      animate: !disableTransition && !indeterminate,\n      determinate: !indeterminate,\n      indeterminate,\n      \"determinate-reverse\": !indeterminate && reverse && !vertical,\n      \"determinate-vertical-reverse\": !indeterminate && reverse && vertical,\n      \"indeterminate-reverse\": indeterminate && reverse && !vertical,\n      \"indeterminate-vertical\": indeterminate && vertical,\n      \"indeterminate-vertical-reverse\": indeterminate && reverse && vertical,\n    }),\n    className\n  );\n}\n"],"names":["cnb","cssUtils","bem","styles","linearProgress","options","className","theme","vertical","indeterminate","horizontal","determinate","textColor","linearProgressBar","reverse","disableTransition","animate"],"mappings":"AAAA,SAASA,GAAG,QAAQ,YAAY;AAEhC,SAASC,QAAQ,QAAQ,iBAAiB;AAC1C,SAASC,GAAG,QAAQ,kBAAkB;AAGtC,MAAMC,SAASD,IAAI;AAsCnB;;CAEC,GACD,OAAO,SAASE,eACdC,UAA0C,CAAC,CAAC;IAE5C,MAAM,EAAEC,SAAS,EAAEC,QAAQ,SAAS,EAAEC,QAAQ,EAAEC,aAAa,EAAE,GAAGJ;IAElE,OAAOL,IACLG,OAAO;QACLK;QACAE,YAAY,CAACF;QACbG,aAAa,CAACF;QACdA;IACF,IACAF,UAAU,mBAAmBN,SAAS;QAAEW,WAAWL;IAAM,IACzDD;AAEJ;AAkBA;;CAEC,GACD,OAAO,SAASO,kBACdR,UAA6C,CAAC,CAAC;IAE/C,MAAM,EAAEC,SAAS,EAAEQ,OAAO,EAAEN,QAAQ,EAAEC,aAAa,EAAEM,iBAAiB,EAAE,GACtEV;IAEF,OAAOL,IACLG,OAAO,OAAO;QACZK;QACA,oBAAoBA,YAAYM;QAChCJ,YAAY,CAACF;QACb,sBAAsB,CAACA,YAAYM;QACnCE,SAAS,CAACD,qBAAqB,CAACN;QAChCE,aAAa,CAACF;QACdA;QACA,uBAAuB,CAACA,iBAAiBK,WAAW,CAACN;QACrD,gCAAgC,CAACC,iBAAiBK,WAAWN;QAC7D,yBAAyBC,iBAAiBK,WAAW,CAACN;QACtD,0BAA0BC,iBAAiBD;QAC3C,kCAAkCC,iBAAiBK,WAAWN;IAChE,IACAF;AAEJ"}

package/dist/progress/types.d.ts

@@ -1,13 +1,4 @@
 import { type ThemeColor } from "../cssUtils.js";
-declare module "react" {
-    interface CSSProperties {
-        "--rmd-progress-background-color"?: string;
-        "--rmd-progress-color"?: string;
-        "--rmd-progress-circular-size"?: string | number;
-        "--rmd-progress-circular-stroke-width"?: number;
-        "--rmd-progress-linear-size"?: string | number;
-    }
-}
 /**
  * @since 6.0.0
  */

package/dist/progress/types.js.map

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

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

@@ -1,22 +1,17 @@
 import { type ButtonHTMLAttributes, type ReactNode } from "react";
 import { type ComponentWithRippleProps } from "../interaction/types.js";
+import { type BaseMaxWidthTransitionOptions } from "../transition/useMaxWidthTransition.js";
+import { type BaseSegmentedButtonClassNameOptions } from "./segmentedButtonStyles.js";
 /**
  * @since 6.0.0
+ * @since 6.3.1 Extends BaseMaxWidthTransitionOptions for CSS module
+ * augmentation.
+ * @since 6.3.1 Extends BaseSegmentedButtonClassNameOptions for CSSProperties
+ * module augmentation.
  */
-export interface SegmentedButtonProps extends ButtonHTMLAttributes<HTMLButtonElement>, ComponentWithRippleProps {
-    /**
-     * Set this to `true` to apply selected styles and an optional
-     * {@link selectedIcon}
-     *
-     * @defaultValue `false`
-     */
-    selected?: boolean;
+export interface SegmentedButtonProps extends ButtonHTMLAttributes<HTMLButtonElement>, BaseMaxWidthTransitionOptions, BaseSegmentedButtonClassNameOptions, ComponentWithRippleProps {
     /** @defaultValue `getIcon("selected")` */
     selectedIcon?: ReactNode;
-    /**
-     * An optional className to apply when {@link selected} is `true`.
-     */
-    selectedClassName?: string;
     /**
      * Set this to `true` to not render the {@link selectedIcon} when
      * {@link selected} is `true`.

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

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