@react-md/core 6.0.2 → 6.1.0

package/dist/interaction/useElementInteraction.js

@@ -150,7 +150,7 @@ const noop = ()=>{
     });
     const { pressed } = state;
     let ripples;
-    if (mode == "ripple") {
+    if (mode === "ripple") {
         ripples = /*#__PURE__*/ _jsx(RippleContainer, {
             ripples: state.ripples,
             onEntered: (ripple)=>{

package/dist/interaction/useElementInteraction.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/interaction/useElementInteraction.tsx"],"sourcesContent":["\"use client\";\n\nimport {\n  type FocusEvent,\n  type KeyboardEvent,\n  type MouseEvent,\n  type ReactElement,\n  type TouchEvent,\n  useCallback,\n  useReducer,\n  useRef,\n} from \"react\";\n\nimport { RippleContainer } from \"./RippleContainer.js\";\nimport { useUserInteractionMode } from \"./UserInteractionModeProvider.js\";\nimport { INTERACTION_CONFIG } from \"./config.js\";\nimport {\n  type ElementInteractionHandlers,\n  type ElementInteractionMode,\n  type ElementInteractionState,\n  type RippleState,\n  type RippleStyle,\n} from \"./types.js\";\nimport { getRippleStyle, releaseRipple, updateRipplesState } from \"./utils.js\";\n\ndeclare module \"react\" {\n  interface CSSProperties {\n    \"--rmd-surface-inset\"?: string | number;\n    \"--rmd-surface-border-radius\"?: string | number;\n  }\n}\n\n/** @since 6.0.0 */\nexport const PRESSED_CLASS_NAME = \"rmd-pressed\";\n\n/** @since 6.0.0 */\nexport interface ElementInteractionOptions<E extends HTMLElement>\n  extends Partial<ElementInteractionHandlers<E>> {\n  /**\n   * This can be used to override the {@link INTERACTION_CONFIG.mode}\n   *\n   * @defaultValue `INTERACTION_CONFIG.mode`\n   */\n  mode?: ElementInteractionMode;\n\n  /**\n   * Boolean if the element is currently disabled which will prevent any of the\n   * element interaction states from happening.\n   *\n   * @defaultValue `false`\n   */\n  disabled?: boolean;\n}\n\n/** @since 6.0.0 */\nexport interface ElementInteractionImplementation<E extends HTMLElement> {\n  /**\n   * The event handlers required for element interaction.\n   */\n  handlers: Readonly<ElementInteractionHandlers<E>>;\n\n  /**\n   * Boolean if the element is currently pressed. This will always be `false` if\n   * the {@link ElementInteractionMode} is set to `\"none\"`\n   */\n  pressed: boolean;\n\n  /**\n   * This will be set to {@link PRESSED_CLASS_NAME} only when {@link pressed} is\n   * `true` and the {@link ElementInteractionMode} is set to `\"press\"`. It will\n   * be `undefined` otherwise.\n   */\n  pressedClassName: string | undefined;\n\n  /**\n   * The ripple click/touch interaction. This will be `undefined` when the {@link ElementInteractionMode}\n   * is set to `\"none\"` or `\"press\"`.\n   */\n  ripples?: ReactElement;\n}\n\ntype ElementInteractionAction =\n  | { type: \"press\"; style?: RippleStyle; programmatic?: boolean }\n  | { type: \"release\" | \"cancel\" }\n  | { type: \"entered\" | \"exited\"; ripple: RippleState };\n\nconst noop = (): void => {\n  // do nothing\n};\n\n/**\n * This hook is used to apply the required element interaction based on the\n * {@link ElementInteractionMode} and should generally be used internally only.\n *\n * @example Providing Element Interaction\n * ```tsx\n * import { useElementInteraction } from \"@react-md/core/interaction/useElementInteraction\";\n * import { cnb } from \"cnbuilder\";\n * import { type ReactElement } from \"react\";\n *\n * import styles from \"./CustomComponent.module.scss\";\n *\n * interface Props extends HTMLAttributes<HTMLDivElement> {\n *   disabled?: boolean;\n * }\n *\n * function CustomComponent(props: Props): ReactElement {\n *   const {\n *     disabled = false,\n *     className,\n *     onBlur,\n *     onClick,\n *     onKeyDown,\n *     onKeyUp,\n *     onMouseDown,\n *     onMouseUp,\n *     onMouseLeave,\n *     onTouchStart,\n *     onTouchMove,\n *     onTouchEnd,\n *     ...remaining\n *   } = props;\n *\n *   const { handlers, pressed, ripples } = useElementInteraction({\n *     disabled,\n *     // pass remaining props so that if any event handlers were provided to\n *     // the component, they will be merged with the element interaction\n *     // handlers\n *     onBlur,\n *     onClick,\n *     onKeyDown,\n *     onKeyUp,\n *     onMouseDown,\n *     onMouseUp,\n *     onMouseLeave,\n *     onTouchStart,\n *     onTouchMove,\n *     onTouchEnd,\n *   });\n *\n *   return (\n *     <div\n *       {...remaining}\n *       {...handlers}\n *       aria-disabled={disabled}\n *       role=\"button\"\n *       className={cnb(styles.button, pressed && styles.pressed)}\n *       tabIndex={disabled ? undefined : 0}\n *     >\n *       {children}\n *       {ripples}\n *     </div>\n *   );\n * }\n * ```\n *\n * @param options - An object of {@link ElementInteractionOptions} that is used\n * to merge event handlers or disable the interactions.\n * @returns the {@link ElementInteractionImplementation}\n * @since 6.0.0 Touch interactions were removed since it never looked\n * good if the user touched a clickable element right before scrolling. The\n * ripple effect will only be fired on click now for touch devices.\n */\nexport function useElementInteraction<E extends HTMLElement>(\n  options: ElementInteractionOptions<E> = {}\n): ElementInteractionImplementation<E> {\n  const {\n    onBlur = noop,\n    onClick = noop,\n    onMouseDown = noop,\n    onMouseUp = noop,\n    onMouseLeave = noop,\n    onKeyUp = noop,\n    onKeyDown = noop,\n    onTouchStart = noop,\n    onTouchEnd = noop,\n    onTouchMove = noop,\n    onDragStart = noop,\n    mode = INTERACTION_CONFIG.mode,\n    disabled = false,\n  } = options;\n\n  const holding = useRef(false);\n  const disableClick = useRef(false);\n  const userMode = useUserInteractionMode();\n  const isInteractionDisabled = disabled || mode === \"none\";\n  const [state, dispatch] = useReducer(\n    function reducer(\n      state: ElementInteractionState,\n      action: ElementInteractionAction\n    ): ElementInteractionState {\n      switch (action.type) {\n        case \"press\": {\n          const { style } = action;\n          let { ripples } = state;\n          if (style) {\n            ripples = [\n              ...ripples,\n              {\n                style,\n                entered: false,\n                exiting: false,\n                startTime: Date.now(),\n              },\n            ];\n          }\n\n          return {\n            pressed: true,\n            ripples,\n          };\n        }\n        case \"cancel\":\n          // Note: unlike previous react-md versions, this will immediately\n          // remove ALL ripple effects instead of trying to fade out. this seems\n          // much nicer for touch devices when they are trying to scroll\n          return {\n            pressed: false,\n            ripples: [],\n          };\n        case \"release\": {\n          if (mode === \"press\") {\n            return { ...state, pressed: false };\n          }\n\n          return releaseRipple(state);\n        }\n        case \"entered\":\n          return updateRipplesState({\n            type: \"entered\",\n            state,\n            ripple: action.ripple,\n            holding: holding.current,\n          });\n        case \"exited\":\n          return updateRipplesState({\n            type: \"exited\",\n            state,\n            ripple: action.ripple,\n            holding: holding.current,\n          });\n\n        default:\n          return state;\n      }\n    },\n    { pressed: false, ripples: [] }\n  );\n  const { pressed } = state;\n\n  let ripples: ReactElement | undefined;\n  if (mode == \"ripple\") {\n    ripples = (\n      <RippleContainer\n        ripples={state.ripples}\n        onEntered={(ripple) => {\n          dispatch({ type: \"entered\", ripple });\n        }}\n        onExited={(ripple) => {\n          dispatch({ type: \"exited\", ripple });\n        }}\n      />\n    );\n  }\n\n  return {\n    pressed,\n    pressedClassName:\n      pressed && mode === \"press\" ? PRESSED_CLASS_NAME : undefined,\n    ripples,\n    handlers: {\n      onBlur: useCallback(\n        (event: FocusEvent<E>) => {\n          onBlur(event);\n          if (holding.current) {\n            holding.current = false;\n            dispatch({ type: \"release\" });\n          }\n        },\n        [onBlur]\n      ),\n      onClick: useCallback(\n        (event: MouseEvent<E>) => {\n          if (disabled) {\n            return;\n          }\n\n          onClick(event);\n          if (\n            event.isPropagationStopped() ||\n            userMode === \"touch\" ||\n            mode !== \"ripple\" ||\n            disableClick.current ||\n            holding.current ||\n            document.activeElement === event.currentTarget\n          ) {\n            disableClick.current = false;\n            return;\n          }\n\n          dispatch({\n            type: \"press\",\n            style: getRippleStyle(event, true),\n          });\n        },\n        [disabled, mode, onClick, userMode]\n      ),\n      onMouseDown: useCallback(\n        (event: MouseEvent<E>) => {\n          onMouseDown(event);\n          if (\n            event.isPropagationStopped() ||\n            isInteractionDisabled ||\n            userMode !== \"mouse\" ||\n            event.shiftKey ||\n            event.ctrlKey ||\n            event.metaKey ||\n            event.altKey ||\n            event.button !== 0\n          ) {\n            return;\n          }\n\n          // prevent text selection on double click\n          // https://stackoverflow.com/a/43321596\n          if (event.detail > 1) {\n            event.preventDefault();\n          }\n\n          holding.current = true;\n          disableClick.current = true;\n          let style: RippleStyle | undefined;\n          if (mode === \"ripple\") {\n            style = getRippleStyle(event, false);\n          }\n\n          dispatch({ type: \"press\", style });\n        },\n        [onMouseDown, isInteractionDisabled, userMode, mode]\n      ),\n      onMouseUp: useCallback(\n        (event: MouseEvent<E>) => {\n          onMouseUp(event);\n          if (event.isPropagationStopped() || isInteractionDisabled) {\n            return;\n          }\n\n          holding.current = false;\n          dispatch({ type: \"release\" });\n        },\n        [isInteractionDisabled, onMouseUp]\n      ),\n      onMouseLeave: useCallback(\n        (event: MouseEvent<E>) => {\n          onMouseLeave(event);\n          if (\n            event.isPropagationStopped() ||\n            isInteractionDisabled ||\n            userMode !== \"mouse\" ||\n            !holding.current\n          ) {\n            return;\n          }\n\n          holding.current = false;\n          dispatch({ type: \"cancel\" });\n        },\n        [isInteractionDisabled, onMouseLeave, userMode]\n      ),\n      onDragStart(event) {\n        onDragStart(event);\n        if (\n          event.isPropagationStopped() ||\n          !holding.current ||\n          userMode !== \"mouse\"\n        ) {\n          return;\n        }\n\n        holding.current = false;\n        dispatch({ type: \"cancel\" });\n      },\n      onKeyDown: useCallback(\n        (event: KeyboardEvent<E>) => {\n          onKeyDown(event);\n          const { key } = event;\n          const { tagName } = event.currentTarget;\n\n          if (\n            event.isPropagationStopped() ||\n            userMode !== \"keyboard\" ||\n            disabled ||\n            (key !== \" \" && key !== \"Enter\") ||\n            // links do not support clicking on space\n            (key === \" \" && tagName === \"A\") ||\n            // inputs submit a form instead of clicking on enter\n            (key === \"Enter\" && tagName === \"INPUT\")\n          ) {\n            return;\n          }\n\n          // stop propagation since we're starting to do custom event behavior\n          // to click the element for everything except elements that the\n          // browser clicks natively\n          event.stopPropagation();\n\n          if (tagName !== \"BUTTON\" && tagName !== \"A\") {\n            if (key === \" \") {\n              // prevent the pager from scrolling\n              event.preventDefault();\n            }\n\n            event.currentTarget.click();\n          }\n\n          if (holding.current || isInteractionDisabled) {\n            return;\n          }\n\n          holding.current = true;\n          dispatch({ type: \"press\", style: getRippleStyle(event, false) });\n        },\n        [disabled, isInteractionDisabled, onKeyDown, userMode]\n      ),\n      onKeyUp: useCallback(\n        (event: KeyboardEvent<E>) => {\n          onKeyUp(event);\n          if (\n            event.isPropagationStopped() ||\n            isInteractionDisabled ||\n            userMode !== \"keyboard\" ||\n            !holding.current\n          ) {\n            return;\n          }\n\n          holding.current = false;\n          dispatch({ type: \"release\" });\n        },\n        [isInteractionDisabled, onKeyUp, userMode]\n      ),\n      onTouchStart: useCallback(\n        (event: TouchEvent<E>) => {\n          onTouchStart(event);\n          if (event.isPropagationStopped() || isInteractionDisabled) {\n            return;\n          }\n\n          holding.current = true;\n          let style: RippleStyle | undefined;\n          if (mode === \"ripple\") {\n            style = getRippleStyle(event, false);\n          }\n\n          dispatch({ type: \"press\", style });\n        },\n        [mode, isInteractionDisabled, onTouchStart]\n      ),\n      onTouchEnd: useCallback(\n        (event: TouchEvent<E>) => {\n          onTouchEnd(event);\n          if (event.isPropagationStopped() || isInteractionDisabled) {\n            return;\n          }\n\n          holding.current = false;\n          dispatch({ type: \"release\" });\n        },\n        [isInteractionDisabled, onTouchEnd]\n      ),\n      onTouchMove: useCallback(\n        (event: TouchEvent<E>) => {\n          onTouchMove(event);\n          if (event.isPropagationStopped() || isInteractionDisabled) {\n            return;\n          }\n\n          holding.current = false;\n          dispatch({ type: \"cancel\" });\n        },\n        [isInteractionDisabled, onTouchMove]\n      ),\n    },\n  };\n}\n"],"names":["useCallback","useReducer","useRef","RippleContainer","useUserInteractionMode","INTERACTION_CONFIG","getRippleStyle","releaseRipple","updateRipplesState","PRESSED_CLASS_NAME","noop","useElementInteraction","options","onBlur","onClick","onMouseDown","onMouseUp","onMouseLeave","onKeyUp","onKeyDown","onTouchStart","onTouchEnd","onTouchMove","onDragStart","mode","disabled","holding","disableClick","userMode","isInteractionDisabled","state","dispatch","reducer","action","type","style","ripples","entered","exiting","startTime","Date","now","pressed","ripple","current","onEntered","onExited","pressedClassName","undefined","handlers","event","isPropagationStopped","document","activeElement","currentTarget","shiftKey","ctrlKey","metaKey","altKey","button","detail","preventDefault","key","tagName","stopPropagation","click"],"mappings":"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"}
+{"version":3,"sources":["../../src/interaction/useElementInteraction.tsx"],"sourcesContent":["\"use client\";\n\nimport {\n  type FocusEvent,\n  type KeyboardEvent,\n  type MouseEvent,\n  type ReactElement,\n  type TouchEvent,\n  useCallback,\n  useReducer,\n  useRef,\n} from \"react\";\n\nimport { RippleContainer } from \"./RippleContainer.js\";\nimport { useUserInteractionMode } from \"./UserInteractionModeProvider.js\";\nimport { INTERACTION_CONFIG } from \"./config.js\";\nimport {\n  type ElementInteractionHandlers,\n  type ElementInteractionMode,\n  type ElementInteractionState,\n  type RippleState,\n  type RippleStyle,\n} from \"./types.js\";\nimport { getRippleStyle, releaseRipple, updateRipplesState } from \"./utils.js\";\n\ndeclare module \"react\" {\n  interface CSSProperties {\n    \"--rmd-surface-inset\"?: string | number;\n    \"--rmd-surface-border-radius\"?: string | number;\n  }\n}\n\n/** @since 6.0.0 */\nexport const PRESSED_CLASS_NAME = \"rmd-pressed\";\n\n/** @since 6.0.0 */\nexport interface ElementInteractionOptions<E extends HTMLElement>\n  extends Partial<ElementInteractionHandlers<E>> {\n  /**\n   * This can be used to override the {@link INTERACTION_CONFIG.mode}\n   *\n   * @defaultValue `INTERACTION_CONFIG.mode`\n   */\n  mode?: ElementInteractionMode;\n\n  /**\n   * Boolean if the element is currently disabled which will prevent any of the\n   * element interaction states from happening.\n   *\n   * @defaultValue `false`\n   */\n  disabled?: boolean;\n}\n\n/** @since 6.0.0 */\nexport interface ElementInteractionImplementation<E extends HTMLElement> {\n  /**\n   * The event handlers required for element interaction.\n   */\n  handlers: Readonly<ElementInteractionHandlers<E>>;\n\n  /**\n   * Boolean if the element is currently pressed. This will always be `false` if\n   * the {@link ElementInteractionMode} is set to `\"none\"`\n   */\n  pressed: boolean;\n\n  /**\n   * This will be set to {@link PRESSED_CLASS_NAME} only when {@link pressed} is\n   * `true` and the {@link ElementInteractionMode} is set to `\"press\"`. It will\n   * be `undefined` otherwise.\n   */\n  pressedClassName: string | undefined;\n\n  /**\n   * The ripple click/touch interaction. This will be `undefined` when the {@link ElementInteractionMode}\n   * is set to `\"none\"` or `\"press\"`.\n   */\n  ripples?: ReactElement;\n}\n\ntype ElementInteractionAction =\n  | { type: \"press\"; style?: RippleStyle; programmatic?: boolean }\n  | { type: \"release\" | \"cancel\" }\n  | { type: \"entered\" | \"exited\"; ripple: RippleState };\n\nconst noop = (): void => {\n  // do nothing\n};\n\n/**\n * This hook is used to apply the required element interaction based on the\n * {@link ElementInteractionMode} and should generally be used internally only.\n *\n * @example Providing Element Interaction\n * ```tsx\n * import { useElementInteraction } from \"@react-md/core/interaction/useElementInteraction\";\n * import { cnb } from \"cnbuilder\";\n * import { type ReactElement } from \"react\";\n *\n * import styles from \"./CustomComponent.module.scss\";\n *\n * interface Props extends HTMLAttributes<HTMLDivElement> {\n *   disabled?: boolean;\n * }\n *\n * function CustomComponent(props: Props): ReactElement {\n *   const {\n *     disabled = false,\n *     className,\n *     onBlur,\n *     onClick,\n *     onKeyDown,\n *     onKeyUp,\n *     onMouseDown,\n *     onMouseUp,\n *     onMouseLeave,\n *     onTouchStart,\n *     onTouchMove,\n *     onTouchEnd,\n *     ...remaining\n *   } = props;\n *\n *   const { handlers, pressed, ripples } = useElementInteraction({\n *     disabled,\n *     // pass remaining props so that if any event handlers were provided to\n *     // the component, they will be merged with the element interaction\n *     // handlers\n *     onBlur,\n *     onClick,\n *     onKeyDown,\n *     onKeyUp,\n *     onMouseDown,\n *     onMouseUp,\n *     onMouseLeave,\n *     onTouchStart,\n *     onTouchMove,\n *     onTouchEnd,\n *   });\n *\n *   return (\n *     <div\n *       {...remaining}\n *       {...handlers}\n *       aria-disabled={disabled}\n *       role=\"button\"\n *       className={cnb(styles.button, pressed && styles.pressed)}\n *       tabIndex={disabled ? undefined : 0}\n *     >\n *       {children}\n *       {ripples}\n *     </div>\n *   );\n * }\n * ```\n *\n * @param options - An object of {@link ElementInteractionOptions} that is used\n * to merge event handlers or disable the interactions.\n * @returns the {@link ElementInteractionImplementation}\n * @since 6.0.0 Touch interactions were removed since it never looked\n * good if the user touched a clickable element right before scrolling. The\n * ripple effect will only be fired on click now for touch devices.\n */\nexport function useElementInteraction<E extends HTMLElement>(\n  options: ElementInteractionOptions<E> = {}\n): ElementInteractionImplementation<E> {\n  const {\n    onBlur = noop,\n    onClick = noop,\n    onMouseDown = noop,\n    onMouseUp = noop,\n    onMouseLeave = noop,\n    onKeyUp = noop,\n    onKeyDown = noop,\n    onTouchStart = noop,\n    onTouchEnd = noop,\n    onTouchMove = noop,\n    onDragStart = noop,\n    mode = INTERACTION_CONFIG.mode,\n    disabled = false,\n  } = options;\n\n  const holding = useRef(false);\n  const disableClick = useRef(false);\n  const userMode = useUserInteractionMode();\n  const isInteractionDisabled = disabled || mode === \"none\";\n  const [state, dispatch] = useReducer(\n    function reducer(\n      state: ElementInteractionState,\n      action: ElementInteractionAction\n    ): ElementInteractionState {\n      switch (action.type) {\n        case \"press\": {\n          const { style } = action;\n          let { ripples } = state;\n          if (style) {\n            ripples = [\n              ...ripples,\n              {\n                style,\n                entered: false,\n                exiting: false,\n                startTime: Date.now(),\n              },\n            ];\n          }\n\n          return {\n            pressed: true,\n            ripples,\n          };\n        }\n        case \"cancel\":\n          // Note: unlike previous react-md versions, this will immediately\n          // remove ALL ripple effects instead of trying to fade out. this seems\n          // much nicer for touch devices when they are trying to scroll\n          return {\n            pressed: false,\n            ripples: [],\n          };\n        case \"release\": {\n          if (mode === \"press\") {\n            return { ...state, pressed: false };\n          }\n\n          return releaseRipple(state);\n        }\n        case \"entered\":\n          return updateRipplesState({\n            type: \"entered\",\n            state,\n            ripple: action.ripple,\n            holding: holding.current,\n          });\n        case \"exited\":\n          return updateRipplesState({\n            type: \"exited\",\n            state,\n            ripple: action.ripple,\n            holding: holding.current,\n          });\n\n        default:\n          return state;\n      }\n    },\n    { pressed: false, ripples: [] }\n  );\n  const { pressed } = state;\n\n  let ripples: ReactElement | undefined;\n  if (mode === \"ripple\") {\n    ripples = (\n      <RippleContainer\n        ripples={state.ripples}\n        onEntered={(ripple) => {\n          dispatch({ type: \"entered\", ripple });\n        }}\n        onExited={(ripple) => {\n          dispatch({ type: \"exited\", ripple });\n        }}\n      />\n    );\n  }\n\n  return {\n    pressed,\n    pressedClassName:\n      pressed && mode === \"press\" ? PRESSED_CLASS_NAME : undefined,\n    ripples,\n    handlers: {\n      onBlur: useCallback(\n        (event: FocusEvent<E>) => {\n          onBlur(event);\n          if (holding.current) {\n            holding.current = false;\n            dispatch({ type: \"release\" });\n          }\n        },\n        [onBlur]\n      ),\n      onClick: useCallback(\n        (event: MouseEvent<E>) => {\n          if (disabled) {\n            return;\n          }\n\n          onClick(event);\n          if (\n            event.isPropagationStopped() ||\n            userMode === \"touch\" ||\n            mode !== \"ripple\" ||\n            disableClick.current ||\n            holding.current ||\n            document.activeElement === event.currentTarget\n          ) {\n            disableClick.current = false;\n            return;\n          }\n\n          dispatch({\n            type: \"press\",\n            style: getRippleStyle(event, true),\n          });\n        },\n        [disabled, mode, onClick, userMode]\n      ),\n      onMouseDown: useCallback(\n        (event: MouseEvent<E>) => {\n          onMouseDown(event);\n          if (\n            event.isPropagationStopped() ||\n            isInteractionDisabled ||\n            userMode !== \"mouse\" ||\n            event.shiftKey ||\n            event.ctrlKey ||\n            event.metaKey ||\n            event.altKey ||\n            event.button !== 0\n          ) {\n            return;\n          }\n\n          // prevent text selection on double click\n          // https://stackoverflow.com/a/43321596\n          if (event.detail > 1) {\n            event.preventDefault();\n          }\n\n          holding.current = true;\n          disableClick.current = true;\n          let style: RippleStyle | undefined;\n          if (mode === \"ripple\") {\n            style = getRippleStyle(event, false);\n          }\n\n          dispatch({ type: \"press\", style });\n        },\n        [onMouseDown, isInteractionDisabled, userMode, mode]\n      ),\n      onMouseUp: useCallback(\n        (event: MouseEvent<E>) => {\n          onMouseUp(event);\n          if (event.isPropagationStopped() || isInteractionDisabled) {\n            return;\n          }\n\n          holding.current = false;\n          dispatch({ type: \"release\" });\n        },\n        [isInteractionDisabled, onMouseUp]\n      ),\n      onMouseLeave: useCallback(\n        (event: MouseEvent<E>) => {\n          onMouseLeave(event);\n          if (\n            event.isPropagationStopped() ||\n            isInteractionDisabled ||\n            userMode !== \"mouse\" ||\n            !holding.current\n          ) {\n            return;\n          }\n\n          holding.current = false;\n          dispatch({ type: \"cancel\" });\n        },\n        [isInteractionDisabled, onMouseLeave, userMode]\n      ),\n      onDragStart(event) {\n        onDragStart(event);\n        if (\n          event.isPropagationStopped() ||\n          !holding.current ||\n          userMode !== \"mouse\"\n        ) {\n          return;\n        }\n\n        holding.current = false;\n        dispatch({ type: \"cancel\" });\n      },\n      onKeyDown: useCallback(\n        (event: KeyboardEvent<E>) => {\n          onKeyDown(event);\n          const { key } = event;\n          const { tagName } = event.currentTarget;\n\n          if (\n            event.isPropagationStopped() ||\n            userMode !== \"keyboard\" ||\n            disabled ||\n            (key !== \" \" && key !== \"Enter\") ||\n            // links do not support clicking on space\n            (key === \" \" && tagName === \"A\") ||\n            // inputs submit a form instead of clicking on enter\n            (key === \"Enter\" && tagName === \"INPUT\")\n          ) {\n            return;\n          }\n\n          // stop propagation since we're starting to do custom event behavior\n          // to click the element for everything except elements that the\n          // browser clicks natively\n          event.stopPropagation();\n\n          if (tagName !== \"BUTTON\" && tagName !== \"A\") {\n            if (key === \" \") {\n              // prevent the pager from scrolling\n              event.preventDefault();\n            }\n\n            event.currentTarget.click();\n          }\n\n          if (holding.current || isInteractionDisabled) {\n            return;\n          }\n\n          holding.current = true;\n          dispatch({ type: \"press\", style: getRippleStyle(event, false) });\n        },\n        [disabled, isInteractionDisabled, onKeyDown, userMode]\n      ),\n      onKeyUp: useCallback(\n        (event: KeyboardEvent<E>) => {\n          onKeyUp(event);\n          if (\n            event.isPropagationStopped() ||\n            isInteractionDisabled ||\n            userMode !== \"keyboard\" ||\n            !holding.current\n          ) {\n            return;\n          }\n\n          holding.current = false;\n          dispatch({ type: \"release\" });\n        },\n        [isInteractionDisabled, onKeyUp, userMode]\n      ),\n      onTouchStart: useCallback(\n        (event: TouchEvent<E>) => {\n          onTouchStart(event);\n          if (event.isPropagationStopped() || isInteractionDisabled) {\n            return;\n          }\n\n          holding.current = true;\n          let style: RippleStyle | undefined;\n          if (mode === \"ripple\") {\n            style = getRippleStyle(event, false);\n          }\n\n          dispatch({ type: \"press\", style });\n        },\n        [mode, isInteractionDisabled, onTouchStart]\n      ),\n      onTouchEnd: useCallback(\n        (event: TouchEvent<E>) => {\n          onTouchEnd(event);\n          if (event.isPropagationStopped() || isInteractionDisabled) {\n            return;\n          }\n\n          holding.current = false;\n          dispatch({ type: \"release\" });\n        },\n        [isInteractionDisabled, onTouchEnd]\n      ),\n      onTouchMove: useCallback(\n        (event: TouchEvent<E>) => {\n          onTouchMove(event);\n          if (event.isPropagationStopped() || isInteractionDisabled) {\n            return;\n          }\n\n          holding.current = false;\n          dispatch({ type: \"cancel\" });\n        },\n        [isInteractionDisabled, onTouchMove]\n      ),\n    },\n  };\n}\n"],"names":["useCallback","useReducer","useRef","RippleContainer","useUserInteractionMode","INTERACTION_CONFIG","getRippleStyle","releaseRipple","updateRipplesState","PRESSED_CLASS_NAME","noop","useElementInteraction","options","onBlur","onClick","onMouseDown","onMouseUp","onMouseLeave","onKeyUp","onKeyDown","onTouchStart","onTouchEnd","onTouchMove","onDragStart","mode","disabled","holding","disableClick","userMode","isInteractionDisabled","state","dispatch","reducer","action","type","style","ripples","entered","exiting","startTime","Date","now","pressed","ripple","current","onEntered","onExited","pressedClassName","undefined","handlers","event","isPropagationStopped","document","activeElement","currentTarget","shiftKey","ctrlKey","metaKey","altKey","button","detail","preventDefault","key","tagName","stopPropagation","click"],"mappings":"AAAA;;AAEA,SAMEA,WAAW,EACXC,UAAU,EACVC,MAAM,QACD,QAAQ;AAEf,SAASC,eAAe,QAAQ,uBAAuB;AACvD,SAASC,sBAAsB,QAAQ,mCAAmC;AAC1E,SAASC,kBAAkB,QAAQ,cAAc;AAQjD,SAASC,cAAc,EAAEC,aAAa,EAAEC,kBAAkB,QAAQ,aAAa;AAS/E,iBAAiB,GACjB,OAAO,MAAMC,qBAAqB,cAAc;AAqDhD,MAAMC,OAAO;AACX,aAAa;AACf;AAEA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAwEC,GACD,OAAO,SAASC,sBACdC,UAAwC,CAAC,CAAC;IAE1C,MAAM,EACJC,SAASH,IAAI,EACbI,UAAUJ,IAAI,EACdK,cAAcL,IAAI,EAClBM,YAAYN,IAAI,EAChBO,eAAeP,IAAI,EACnBQ,UAAUR,IAAI,EACdS,YAAYT,IAAI,EAChBU,eAAeV,IAAI,EACnBW,aAAaX,IAAI,EACjBY,cAAcZ,IAAI,EAClBa,cAAcb,IAAI,EAClBc,OAAOnB,mBAAmBmB,IAAI,EAC9BC,WAAW,KAAK,EACjB,GAAGb;IAEJ,MAAMc,UAAUxB,OAAO;IACvB,MAAMyB,eAAezB,OAAO;IAC5B,MAAM0B,WAAWxB;IACjB,MAAMyB,wBAAwBJ,YAAYD,SAAS;IACnD,MAAM,CAACM,OAAOC,SAAS,GAAG9B,WACxB,SAAS+B,QACPF,KAA8B,EAC9BG,MAAgC;QAEhC,OAAQA,OAAOC,IAAI;YACjB,KAAK;gBAAS;oBACZ,MAAM,EAAEC,KAAK,EAAE,GAAGF;oBAClB,IAAI,EAAEG,OAAO,EAAE,GAAGN;oBAClB,IAAIK,OAAO;wBACTC,UAAU;+BACLA;4BACH;gCACED;gCACAE,SAAS;gCACTC,SAAS;gCACTC,WAAWC,KAAKC,GAAG;4BACrB;yBACD;oBACH;oBAEA,OAAO;wBACLC,SAAS;wBACTN;oBACF;gBACF;YACA,KAAK;gBACH,iEAAiE;gBACjE,sEAAsE;gBACtE,8DAA8D;gBAC9D,OAAO;oBACLM,SAAS;oBACTN,SAAS,EAAE;gBACb;YACF,KAAK;gBAAW;oBACd,IAAIZ,SAAS,SAAS;wBACpB,OAAO;4BAAE,GAAGM,KAAK;4BAAEY,SAAS;wBAAM;oBACpC;oBAEA,OAAOnC,cAAcuB;gBACvB;YACA,KAAK;gBACH,OAAOtB,mBAAmB;oBACxB0B,MAAM;oBACNJ;oBACAa,QAAQV,OAAOU,MAAM;oBACrBjB,SAASA,QAAQkB,OAAO;gBAC1B;YACF,KAAK;gBACH,OAAOpC,mBAAmB;oBACxB0B,MAAM;oBACNJ;oBACAa,QAAQV,OAAOU,MAAM;oBACrBjB,SAASA,QAAQkB,OAAO;gBAC1B;YAEF;gBACE,OAAOd;QACX;IACF,GACA;QAAEY,SAAS;QAAON,SAAS,EAAE;IAAC;IAEhC,MAAM,EAAEM,OAAO,EAAE,GAAGZ;IAEpB,IAAIM;IACJ,IAAIZ,SAAS,UAAU;QACrBY,wBACE,KAACjC;YACCiC,SAASN,MAAMM,OAAO;YACtBS,WAAW,CAACF;gBACVZ,SAAS;oBAAEG,MAAM;oBAAWS;gBAAO;YACrC;YACAG,UAAU,CAACH;gBACTZ,SAAS;oBAAEG,MAAM;oBAAUS;gBAAO;YACpC;;IAGN;IAEA,OAAO;QACLD;QACAK,kBACEL,WAAWlB,SAAS,UAAUf,qBAAqBuC;QACrDZ;QACAa,UAAU;YACRpC,QAAQb,YACN,CAACkD;gBACCrC,OAAOqC;gBACP,IAAIxB,QAAQkB,OAAO,EAAE;oBACnBlB,QAAQkB,OAAO,GAAG;oBAClBb,SAAS;wBAAEG,MAAM;oBAAU;gBAC7B;YACF,GACA;gBAACrB;aAAO;YAEVC,SAASd,YACP,CAACkD;gBACC,IAAIzB,UAAU;oBACZ;gBACF;gBAEAX,QAAQoC;gBACR,IACEA,MAAMC,oBAAoB,MAC1BvB,aAAa,WACbJ,SAAS,YACTG,aAAaiB,OAAO,IACpBlB,QAAQkB,OAAO,IACfQ,SAASC,aAAa,KAAKH,MAAMI,aAAa,EAC9C;oBACA3B,aAAaiB,OAAO,GAAG;oBACvB;gBACF;gBAEAb,SAAS;oBACPG,MAAM;oBACNC,OAAO7B,eAAe4C,OAAO;gBAC/B;YACF,GACA;gBAACzB;gBAAUD;gBAAMV;gBAASc;aAAS;YAErCb,aAAaf,YACX,CAACkD;gBACCnC,YAAYmC;gBACZ,IACEA,MAAMC,oBAAoB,MAC1BtB,yBACAD,aAAa,WACbsB,MAAMK,QAAQ,IACdL,MAAMM,OAAO,IACbN,MAAMO,OAAO,IACbP,MAAMQ,MAAM,IACZR,MAAMS,MAAM,KAAK,GACjB;oBACA;gBACF;gBAEA,yCAAyC;gBACzC,uCAAuC;gBACvC,IAAIT,MAAMU,MAAM,GAAG,GAAG;oBACpBV,MAAMW,cAAc;gBACtB;gBAEAnC,QAAQkB,OAAO,GAAG;gBAClBjB,aAAaiB,OAAO,GAAG;gBACvB,IAAIT;gBACJ,IAAIX,SAAS,UAAU;oBACrBW,QAAQ7B,eAAe4C,OAAO;gBAChC;gBAEAnB,SAAS;oBAAEG,MAAM;oBAASC;gBAAM;YAClC,GACA;gBAACpB;gBAAac;gBAAuBD;gBAAUJ;aAAK;YAEtDR,WAAWhB,YACT,CAACkD;gBACClC,UAAUkC;gBACV,IAAIA,MAAMC,oBAAoB,MAAMtB,uBAAuB;oBACzD;gBACF;gBAEAH,QAAQkB,OAAO,GAAG;gBAClBb,SAAS;oBAAEG,MAAM;gBAAU;YAC7B,GACA;gBAACL;gBAAuBb;aAAU;YAEpCC,cAAcjB,YACZ,CAACkD;gBACCjC,aAAaiC;gBACb,IACEA,MAAMC,oBAAoB,MAC1BtB,yBACAD,aAAa,WACb,CAACF,QAAQkB,OAAO,EAChB;oBACA;gBACF;gBAEAlB,QAAQkB,OAAO,GAAG;gBAClBb,SAAS;oBAAEG,MAAM;gBAAS;YAC5B,GACA;gBAACL;gBAAuBZ;gBAAcW;aAAS;YAEjDL,aAAY2B,KAAK;gBACf3B,YAAY2B;gBACZ,IACEA,MAAMC,oBAAoB,MAC1B,CAACzB,QAAQkB,OAAO,IAChBhB,aAAa,SACb;oBACA;gBACF;gBAEAF,QAAQkB,OAAO,GAAG;gBAClBb,SAAS;oBAAEG,MAAM;gBAAS;YAC5B;YACAf,WAAWnB,YACT,CAACkD;gBACC/B,UAAU+B;gBACV,MAAM,EAAEY,GAAG,EAAE,GAAGZ;gBAChB,MAAM,EAAEa,OAAO,EAAE,GAAGb,MAAMI,aAAa;gBAEvC,IACEJ,MAAMC,oBAAoB,MAC1BvB,aAAa,cACbH,YACCqC,QAAQ,OAAOA,QAAQ,WACxB,yCAAyC;gBACxCA,QAAQ,OAAOC,YAAY,OAC5B,oDAAoD;gBACnDD,QAAQ,WAAWC,YAAY,SAChC;oBACA;gBACF;gBAEA,oEAAoE;gBACpE,+DAA+D;gBAC/D,0BAA0B;gBAC1Bb,MAAMc,eAAe;gBAErB,IAAID,YAAY,YAAYA,YAAY,KAAK;oBAC3C,IAAID,QAAQ,KAAK;wBACf,mCAAmC;wBACnCZ,MAAMW,cAAc;oBACtB;oBAEAX,MAAMI,aAAa,CAACW,KAAK;gBAC3B;gBAEA,IAAIvC,QAAQkB,OAAO,IAAIf,uBAAuB;oBAC5C;gBACF;gBAEAH,QAAQkB,OAAO,GAAG;gBAClBb,SAAS;oBAAEG,MAAM;oBAASC,OAAO7B,eAAe4C,OAAO;gBAAO;YAChE,GACA;gBAACzB;gBAAUI;gBAAuBV;gBAAWS;aAAS;YAExDV,SAASlB,YACP,CAACkD;gBACChC,QAAQgC;gBACR,IACEA,MAAMC,oBAAoB,MAC1BtB,yBACAD,aAAa,cACb,CAACF,QAAQkB,OAAO,EAChB;oBACA;gBACF;gBAEAlB,QAAQkB,OAAO,GAAG;gBAClBb,SAAS;oBAAEG,MAAM;gBAAU;YAC7B,GACA;gBAACL;gBAAuBX;gBAASU;aAAS;YAE5CR,cAAcpB,YACZ,CAACkD;gBACC9B,aAAa8B;gBACb,IAAIA,MAAMC,oBAAoB,MAAMtB,uBAAuB;oBACzD;gBACF;gBAEAH,QAAQkB,OAAO,GAAG;gBAClB,IAAIT;gBACJ,IAAIX,SAAS,UAAU;oBACrBW,QAAQ7B,eAAe4C,OAAO;gBAChC;gBAEAnB,SAAS;oBAAEG,MAAM;oBAASC;gBAAM;YAClC,GACA;gBAACX;gBAAMK;gBAAuBT;aAAa;YAE7CC,YAAYrB,YACV,CAACkD;gBACC7B,WAAW6B;gBACX,IAAIA,MAAMC,oBAAoB,MAAMtB,uBAAuB;oBACzD;gBACF;gBAEAH,QAAQkB,OAAO,GAAG;gBAClBb,SAAS;oBAAEG,MAAM;gBAAU;YAC7B,GACA;gBAACL;gBAAuBR;aAAW;YAErCC,aAAatB,YACX,CAACkD;gBACC5B,YAAY4B;gBACZ,IAAIA,MAAMC,oBAAoB,MAAMtB,uBAAuB;oBACzD;gBACF;gBAEAH,QAAQkB,OAAO,GAAG;gBAClBb,SAAS;oBAAEG,MAAM;gBAAS;YAC5B,GACA;gBAACL;gBAAuBP;aAAY;QAExC;IACF;AACF"}

package/dist/layout/LayoutNav.js

@@ -86,7 +86,7 @@ import { layoutNav } from "./layoutNavStyles.js";
  * @see {@link https://react-md.dev/getting-started/layout | Layout Demos}
  * @since 6.0.0
  */ export const LayoutNav = /*#__PURE__*/ forwardRef(function LayoutNav(props, ref) {
-    const { as: Component = "nav", "aria-labelledby": ariaLabelledBy, "aria-label": ariaLabel = Component == "nav" && !ariaLabelledBy ? "Navigation" : undefined, expanded, children, className, timeout = DEFAULT_SHEET_TIMEOUT, classNames = DEFAULT_SHEET_CLASSNAMES, appear, enter, exit, onEnter, onEntering, onEntered, onExit, onExited, onExiting, appBarOffset, ...remaining } = props;
+    const { as: Component = "nav", "aria-labelledby": ariaLabelledBy, "aria-label": ariaLabel = Component === "nav" && !ariaLabelledBy ? "Navigation" : undefined, expanded, children, className, timeout = DEFAULT_SHEET_TIMEOUT, classNames = DEFAULT_SHEET_CLASSNAMES, appear, enter, exit, onEnter, onEntering, onEntered, onExit, onExited, onExiting, appBarOffset, ...remaining } = props;
     const { elementProps } = useCSSTransition({
         nodeRef: ref,
         timeout,

package/dist/layout/LayoutNav.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/layout/LayoutNav.tsx"],"sourcesContent":["\"use client\";\n\nimport { cnb } from \"cnbuilder\";\nimport { type HTMLAttributes, type ReactNode, forwardRef } from \"react\";\n\nimport {\n  type BaseSheetClassNameOptions,\n  DEFAULT_SHEET_CLASSNAMES,\n  DEFAULT_SHEET_TIMEOUT,\n  sheet,\n} from \"../sheet/styles.js\";\nimport {\n  type CSSTransitionClassNames,\n  type TransitionActions,\n  type TransitionCallbacks,\n  type TransitionTimeout,\n} from \"../transition/types.js\";\nimport { useCSSTransition } from \"../transition/useCSSTransition.js\";\nimport { layoutNav } from \"./layoutNavStyles.js\";\n\n/**\n * @since 6.0.0\n */\nexport interface LayoutNavProps\n  extends HTMLAttributes<HTMLDivElement>,\n    BaseSheetClassNameOptions,\n    TransitionCallbacks,\n    TransitionActions {\n  children: ReactNode;\n\n  /**\n   * The component to render as.\n   *\n   * @defaultValue `\"nav\"`\n   */\n  as?: \"nav\" | \"div\";\n\n  /**\n   * Set this to `true` to display the navigation.\n   */\n  expanded: boolean;\n\n  /**\n   * Set this to `true` to force the navigation to appear below the fixed app\n   * bar.\n   *\n   * @defaultValue `false`\n   */\n  appBarOffset?: boolean;\n\n  /** @defaultValue {@link DEFAULT_SHEET_TIMEOUT} */\n  timeout?: TransitionTimeout;\n  /** @defaultValue {@link DEFAULT_SHEET_CLASSNAMES} */\n  classNames?: CSSTransitionClassNames;\n}\n\n/**\n * **Client Component**\n *\n * This component is used to render a persistent navigation on the left of the\n * page. There is some built-in functionality to support resizing with the\n * `LayoutWindowSplitter` and expandable layouts. Do not use this component for\n * temporary navigation and instead use a `Sheet`.\n *\n * @example Full Height Layout\n * ```tsx\n * \"use client\";\n * import { LayoutAppBar } from \"@react-md/core/layout/LayoutAppBar\";\n * import { LayoutNav } from \"@react-md/core/layout/LayoutNav\";\n * import { Main } from \"@react-md/core/layout/Main\";\n * import { useHorizontalLayoutTransition } from \"@react-md/core/layout/useHorizontalLayoutTransition\";\n * import type { ReactElement, PropsWithChildren } from \"react\";\n *\n * function Layout({ children }: PropsWithChildren): ReactElement {\n *   const { elementProps } = useHorizontalLayoutTransition({\n *     transitionIn: true,\n *   });\n *\n *   return (\n *     <>\n *       <LayoutAppBar {...elementProps}>\n *         <YourAppBarContent />\n *       </LayoutAppBar>\n *       <LayoutNav expanded>\n *         <YourNavigationComponent />\n *       </LayoutNav>\n *       <Main navOffset appBarOffset {...elementProps}>\n *         {children}\n *       </Main>\n *     </>\n *   );\n * }\n * ```\n *\n * @example Toggleable Layout\n * ```tsx\n * \"use client\";\n * import { LayoutAppBar } from \"@react-md/core/layout/LayoutAppBar\";\n * import { Main } from \"@react-md/core/layout/Main\";\n * import { useHorizontalLayoutTransition } from \"@react-md/core/layout/useHorizontalLayoutTransition\";\n * import { useToggle } from \"@react-md/core/useToggle\";\n * import MenuIcon from \"@react-md/material-icons/MenuIcon\";\n * import { cnb } from \"cnbuilder\";\n * import type { ReactElement, PropsWithChildren } from \"react\";\n *\n * function Layout({ children }: PropsWithChildren): ReactElement {\n *   const { toggled: expanded, toggle } = useToggle();\n *   const { elementProps } = useHorizontalLayoutTransition({\n *     transitionIn: expanded,\n *   });\n *\n *   return (\n *     <>\n *       <LayoutAppBar {...elementProps}>\n *         <Button\n *           aria-label=\"Navigation\"\n *           onClick={toggle}\n *           buttonType=\"icon\"\n *         >\n *           <MenuIcon />\n *         </Button>\n *         <YourAppBarContent />\n *       </LayoutAppBar>\n *       <LayoutNav expanded>\n *         <YourNavigationComponent />\n *       </LayoutNav>\n *       <Main navOffset={expanded} appBarOffset {...elementProps}>\n *         {children}\n *       </Main>\n *     </>\n *   );\n * }\n * ```\n *\n * @see {@link https://react-md.dev/getting-started/layout | Layout Demos}\n * @since 6.0.0\n */\nexport const LayoutNav = forwardRef<HTMLDivElement, LayoutNavProps>(\n  function LayoutNav(props, ref) {\n    const {\n      as: Component = \"nav\",\n      \"aria-labelledby\": ariaLabelledBy,\n      \"aria-label\": ariaLabel = Component == \"nav\" && !ariaLabelledBy\n        ? \"Navigation\"\n        : undefined,\n      expanded,\n      children,\n      className,\n      timeout = DEFAULT_SHEET_TIMEOUT,\n      classNames = DEFAULT_SHEET_CLASSNAMES,\n      appear,\n      enter,\n      exit,\n      onEnter,\n      onEntering,\n      onEntered,\n      onExit,\n      onExited,\n      onExiting,\n      appBarOffset,\n      ...remaining\n    } = props;\n    const { elementProps } = useCSSTransition({\n      nodeRef: ref,\n      timeout,\n      className: cnb(\n        layoutNav({ appBarOffset }),\n        sheet({\n          className,\n          raised: false,\n          horizontalSize: \"none\",\n        })\n      ),\n      classNames,\n      enter,\n      exit,\n      appear,\n      onEnter,\n      onEntering,\n      onEntered,\n      onExit,\n      onExited,\n      onExiting,\n      exitedHidden: true,\n      transitionIn: expanded,\n    });\n\n    return (\n      <Component\n        aria-label={ariaLabel}\n        aria-labelledby={ariaLabelledBy}\n        {...remaining}\n        {...elementProps}\n      >\n        {children}\n      </Component>\n    );\n  }\n);\n"],"names":["cnb","forwardRef","DEFAULT_SHEET_CLASSNAMES","DEFAULT_SHEET_TIMEOUT","sheet","useCSSTransition","layoutNav","LayoutNav","props","ref","as","Component","ariaLabelledBy","ariaLabel","undefined","expanded","children","className","timeout","classNames","appear","enter","exit","onEnter","onEntering","onEntered","onExit","onExited","onExiting","appBarOffset","remaining","elementProps","nodeRef","raised","horizontalSize","exitedHidden","transitionIn","aria-label","aria-labelledby"],"mappings":"AAAA;;AAEA,SAASA,GAAG,QAAQ,YAAY;AAChC,SAA8CC,UAAU,QAAQ,QAAQ;AAExE,SAEEC,wBAAwB,EACxBC,qBAAqB,EACrBC,KAAK,QACA,qBAAqB;AAO5B,SAASC,gBAAgB,QAAQ,oCAAoC;AACrE,SAASC,SAAS,QAAQ,uBAAuB;AAsCjD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAgFC,GACD,OAAO,MAAMC,0BAAYN,WACvB,SAASM,UAAUC,KAAK,EAAEC,GAAG;IAC3B,MAAM,EACJC,IAAIC,YAAY,KAAK,EACrB,mBAAmBC,cAAc,EACjC,cAAcC,YAAYF,aAAa,SAAS,CAACC,iBAC7C,eACAE,SAAS,EACbC,QAAQ,EACRC,QAAQ,EACRC,SAAS,EACTC,UAAUf,qBAAqB,EAC/BgB,aAAajB,wBAAwB,EACrCkB,MAAM,EACNC,KAAK,EACLC,IAAI,EACJC,OAAO,EACPC,UAAU,EACVC,SAAS,EACTC,MAAM,EACNC,QAAQ,EACRC,SAAS,EACTC,YAAY,EACZ,GAAGC,WACJ,GAAGtB;IACJ,MAAM,EAAEuB,YAAY,EAAE,GAAG1B,iBAAiB;QACxC2B,SAASvB;QACTS;QACAD,WAAWjB,IACTM,UAAU;YAAEuB;QAAa,IACzBzB,MAAM;YACJa;YACAgB,QAAQ;YACRC,gBAAgB;QAClB;QAEFf;QACAE;QACAC;QACAF;QACAG;QACAC;QACAC;QACAC;QACAC;QACAC;QACAO,cAAc;QACdC,cAAcrB;IAChB;IAEA,qBACE,KAACJ;QACC0B,cAAYxB;QACZyB,mBAAiB1B;QAChB,GAAGkB,SAAS;QACZ,GAAGC,YAAY;kBAEff;;AAGP,GACA"}
+{"version":3,"sources":["../../src/layout/LayoutNav.tsx"],"sourcesContent":["\"use client\";\n\nimport { cnb } from \"cnbuilder\";\nimport { type HTMLAttributes, type ReactNode, forwardRef } from \"react\";\n\nimport {\n  type BaseSheetClassNameOptions,\n  DEFAULT_SHEET_CLASSNAMES,\n  DEFAULT_SHEET_TIMEOUT,\n  sheet,\n} from \"../sheet/styles.js\";\nimport {\n  type CSSTransitionClassNames,\n  type TransitionActions,\n  type TransitionCallbacks,\n  type TransitionTimeout,\n} from \"../transition/types.js\";\nimport { useCSSTransition } from \"../transition/useCSSTransition.js\";\nimport { layoutNav } from \"./layoutNavStyles.js\";\n\n/**\n * @since 6.0.0\n */\nexport interface LayoutNavProps\n  extends HTMLAttributes<HTMLDivElement>,\n    BaseSheetClassNameOptions,\n    TransitionCallbacks,\n    TransitionActions {\n  children: ReactNode;\n\n  /**\n   * The component to render as.\n   *\n   * @defaultValue `\"nav\"`\n   */\n  as?: \"nav\" | \"div\";\n\n  /**\n   * Set this to `true` to display the navigation.\n   */\n  expanded: boolean;\n\n  /**\n   * Set this to `true` to force the navigation to appear below the fixed app\n   * bar.\n   *\n   * @defaultValue `false`\n   */\n  appBarOffset?: boolean;\n\n  /** @defaultValue {@link DEFAULT_SHEET_TIMEOUT} */\n  timeout?: TransitionTimeout;\n  /** @defaultValue {@link DEFAULT_SHEET_CLASSNAMES} */\n  classNames?: CSSTransitionClassNames;\n}\n\n/**\n * **Client Component**\n *\n * This component is used to render a persistent navigation on the left of the\n * page. There is some built-in functionality to support resizing with the\n * `LayoutWindowSplitter` and expandable layouts. Do not use this component for\n * temporary navigation and instead use a `Sheet`.\n *\n * @example Full Height Layout\n * ```tsx\n * \"use client\";\n * import { LayoutAppBar } from \"@react-md/core/layout/LayoutAppBar\";\n * import { LayoutNav } from \"@react-md/core/layout/LayoutNav\";\n * import { Main } from \"@react-md/core/layout/Main\";\n * import { useHorizontalLayoutTransition } from \"@react-md/core/layout/useHorizontalLayoutTransition\";\n * import type { ReactElement, PropsWithChildren } from \"react\";\n *\n * function Layout({ children }: PropsWithChildren): ReactElement {\n *   const { elementProps } = useHorizontalLayoutTransition({\n *     transitionIn: true,\n *   });\n *\n *   return (\n *     <>\n *       <LayoutAppBar {...elementProps}>\n *         <YourAppBarContent />\n *       </LayoutAppBar>\n *       <LayoutNav expanded>\n *         <YourNavigationComponent />\n *       </LayoutNav>\n *       <Main navOffset appBarOffset {...elementProps}>\n *         {children}\n *       </Main>\n *     </>\n *   );\n * }\n * ```\n *\n * @example Toggleable Layout\n * ```tsx\n * \"use client\";\n * import { LayoutAppBar } from \"@react-md/core/layout/LayoutAppBar\";\n * import { Main } from \"@react-md/core/layout/Main\";\n * import { useHorizontalLayoutTransition } from \"@react-md/core/layout/useHorizontalLayoutTransition\";\n * import { useToggle } from \"@react-md/core/useToggle\";\n * import MenuIcon from \"@react-md/material-icons/MenuIcon\";\n * import { cnb } from \"cnbuilder\";\n * import type { ReactElement, PropsWithChildren } from \"react\";\n *\n * function Layout({ children }: PropsWithChildren): ReactElement {\n *   const { toggled: expanded, toggle } = useToggle();\n *   const { elementProps } = useHorizontalLayoutTransition({\n *     transitionIn: expanded,\n *   });\n *\n *   return (\n *     <>\n *       <LayoutAppBar {...elementProps}>\n *         <Button\n *           aria-label=\"Navigation\"\n *           onClick={toggle}\n *           buttonType=\"icon\"\n *         >\n *           <MenuIcon />\n *         </Button>\n *         <YourAppBarContent />\n *       </LayoutAppBar>\n *       <LayoutNav expanded>\n *         <YourNavigationComponent />\n *       </LayoutNav>\n *       <Main navOffset={expanded} appBarOffset {...elementProps}>\n *         {children}\n *       </Main>\n *     </>\n *   );\n * }\n * ```\n *\n * @see {@link https://react-md.dev/getting-started/layout | Layout Demos}\n * @since 6.0.0\n */\nexport const LayoutNav = forwardRef<HTMLDivElement, LayoutNavProps>(\n  function LayoutNav(props, ref) {\n    const {\n      as: Component = \"nav\",\n      \"aria-labelledby\": ariaLabelledBy,\n      \"aria-label\": ariaLabel = Component === \"nav\" && !ariaLabelledBy\n        ? \"Navigation\"\n        : undefined,\n      expanded,\n      children,\n      className,\n      timeout = DEFAULT_SHEET_TIMEOUT,\n      classNames = DEFAULT_SHEET_CLASSNAMES,\n      appear,\n      enter,\n      exit,\n      onEnter,\n      onEntering,\n      onEntered,\n      onExit,\n      onExited,\n      onExiting,\n      appBarOffset,\n      ...remaining\n    } = props;\n    const { elementProps } = useCSSTransition({\n      nodeRef: ref,\n      timeout,\n      className: cnb(\n        layoutNav({ appBarOffset }),\n        sheet({\n          className,\n          raised: false,\n          horizontalSize: \"none\",\n        })\n      ),\n      classNames,\n      enter,\n      exit,\n      appear,\n      onEnter,\n      onEntering,\n      onEntered,\n      onExit,\n      onExited,\n      onExiting,\n      exitedHidden: true,\n      transitionIn: expanded,\n    });\n\n    return (\n      <Component\n        aria-label={ariaLabel}\n        aria-labelledby={ariaLabelledBy}\n        {...remaining}\n        {...elementProps}\n      >\n        {children}\n      </Component>\n    );\n  }\n);\n"],"names":["cnb","forwardRef","DEFAULT_SHEET_CLASSNAMES","DEFAULT_SHEET_TIMEOUT","sheet","useCSSTransition","layoutNav","LayoutNav","props","ref","as","Component","ariaLabelledBy","ariaLabel","undefined","expanded","children","className","timeout","classNames","appear","enter","exit","onEnter","onEntering","onEntered","onExit","onExited","onExiting","appBarOffset","remaining","elementProps","nodeRef","raised","horizontalSize","exitedHidden","transitionIn","aria-label","aria-labelledby"],"mappings":"AAAA;;AAEA,SAASA,GAAG,QAAQ,YAAY;AAChC,SAA8CC,UAAU,QAAQ,QAAQ;AAExE,SAEEC,wBAAwB,EACxBC,qBAAqB,EACrBC,KAAK,QACA,qBAAqB;AAO5B,SAASC,gBAAgB,QAAQ,oCAAoC;AACrE,SAASC,SAAS,QAAQ,uBAAuB;AAsCjD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAgFC,GACD,OAAO,MAAMC,0BAAYN,WACvB,SAASM,UAAUC,KAAK,EAAEC,GAAG;IAC3B,MAAM,EACJC,IAAIC,YAAY,KAAK,EACrB,mBAAmBC,cAAc,EACjC,cAAcC,YAAYF,cAAc,SAAS,CAACC,iBAC9C,eACAE,SAAS,EACbC,QAAQ,EACRC,QAAQ,EACRC,SAAS,EACTC,UAAUf,qBAAqB,EAC/BgB,aAAajB,wBAAwB,EACrCkB,MAAM,EACNC,KAAK,EACLC,IAAI,EACJC,OAAO,EACPC,UAAU,EACVC,SAAS,EACTC,MAAM,EACNC,QAAQ,EACRC,SAAS,EACTC,YAAY,EACZ,GAAGC,WACJ,GAAGtB;IACJ,MAAM,EAAEuB,YAAY,EAAE,GAAG1B,iBAAiB;QACxC2B,SAASvB;QACTS;QACAD,WAAWjB,IACTM,UAAU;YAAEuB;QAAa,IACzBzB,MAAM;YACJa;YACAgB,QAAQ;YACRC,gBAAgB;QAClB;QAEFf;QACAE;QACAC;QACAF;QACAG;QACAC;QACAC;QACAC;QACAC;QACAC;QACAO,cAAc;QACdC,cAAcrB;IAChB;IAEA,qBACE,KAACJ;QACC0B,cAAYxB;QACZyB,mBAAiB1B;QAChB,GAAGkB,SAAS;QACZ,GAAGC,YAAY;kBAEff;;AAGP,GACA"}

package/dist/layout/useMainTabIndex.js

@@ -8,6 +8,7 @@ import { useUserInteractionMode } from "../interaction/UserInteractionModeProvid
  */ export function useMainTabIndex(tabIndex) {
     const keyboard = useUserInteractionMode() === "keyboard";
     if (keyboard && typeof tabIndex === "undefined") {
+        // eslint-disable-next-line no-param-reassign
         tabIndex = -1;
     }
     return tabIndex;

package/dist/layout/useMainTabIndex.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/layout/useMainTabIndex.ts"],"sourcesContent":["\"use client\";\n\nimport { useUserInteractionMode } from \"../interaction/UserInteractionModeProvider.js\";\n\n/**\n * This hook is used to return a tab index of `-1` whenever the user is using a\n * keyboard for the `SkipToMainContent` to work correctly.\n *\n * @since 6.0.0\n */\nexport function useMainTabIndex(tabIndex?: number): number | undefined {\n  const keyboard = useUserInteractionMode() === \"keyboard\";\n  if (keyboard && typeof tabIndex === \"undefined\") {\n    tabIndex = -1;\n  }\n\n  return tabIndex;\n}\n"],"names":["useUserInteractionMode","useMainTabIndex","tabIndex","keyboard"],"mappings":"AAAA;AAEA,SAASA,sBAAsB,QAAQ,gDAAgD;AAEvF;;;;;CAKC,GACD,OAAO,SAASC,gBAAgBC,QAAiB;IAC/C,MAAMC,WAAWH,6BAA6B;IAC9C,IAAIG,YAAY,OAAOD,aAAa,aAAa;QAC/CA,WAAW,CAAC;IACd;IAEA,OAAOA;AACT"}
+{"version":3,"sources":["../../src/layout/useMainTabIndex.ts"],"sourcesContent":["\"use client\";\n\nimport { useUserInteractionMode } from \"../interaction/UserInteractionModeProvider.js\";\n\n/**\n * This hook is used to return a tab index of `-1` whenever the user is using a\n * keyboard for the `SkipToMainContent` to work correctly.\n *\n * @since 6.0.0\n */\nexport function useMainTabIndex(tabIndex?: number): number | undefined {\n  const keyboard = useUserInteractionMode() === \"keyboard\";\n  if (keyboard && typeof tabIndex === \"undefined\") {\n    // eslint-disable-next-line no-param-reassign\n    tabIndex = -1;\n  }\n\n  return tabIndex;\n}\n"],"names":["useUserInteractionMode","useMainTabIndex","tabIndex","keyboard"],"mappings":"AAAA;AAEA,SAASA,sBAAsB,QAAQ,gDAAgD;AAEvF;;;;;CAKC,GACD,OAAO,SAASC,gBAAgBC,QAAiB;IAC/C,MAAMC,WAAWH,6BAA6B;IAC9C,IAAIG,YAAY,OAAOD,aAAa,aAAa;QAC/C,6CAA6C;QAC7CA,WAAW,CAAC;IACd;IAEA,OAAOA;AACT"}

package/dist/link/_link.scss

@@ -4,6 +4,7 @@
 
 @use "sass:map";
 @use "../utils";
+@use "../spacing";
 @use "../theme/colors";
 @use "../theme/theme";
 @use "../icon/icon";
@@ -49,8 +50,8 @@ $skip-to-main-z-index: 10000 !default;
 $skip-to-main-styles: (
   color: theme.theme-get-var(on-primary-color),
   left: 50%,
-  padding: 0.25rem 1rem,
-  top: 0.25rem,
+  padding: spacing.get-var(xs) spacing.get-var(md),
+  top: spacing.get-var(xs),
   transform: translateX(-50%),
   z-index: $skip-to-main-z-index,
 ) !default;

package/dist/list/_list.scss

@@ -4,6 +4,7 @@
 
 @use "sass:map";
 @use "../utils";
+@use "../spacing";
 @use "../theme/theme";
 @use "../avatar/avatar";
 @use "../icon/icon";
@@ -95,15 +96,15 @@ $disable-divider-inset: divider.$disable-everything !default;
 
 /// The vertical padding to apply to the `List` component.
 /// @type Number
-$vertical-padding: 0.5rem !default;
+$vertical-padding: spacing.get-var(sm) !default;
 
 /// The vertical padding to apply to a dense `List` component.
 /// @type Number
-$dense-vertical-padding: 0.25rem !default;
+$dense-vertical-padding: spacing.get-var(xs) !default;
 
 /// The horizontal padding to apply to the `List` component.
 /// @type Number
-$horizontal-padding: 0 !default;
+$horizontal-padding: spacing.get-var(none) !default;
 
 /// The horizontal padding to apply to a dense `List` component.
 /// @type Number
@@ -133,11 +134,11 @@ $item-disabled-opacity: 0.5 !default;
 
 /// The vertical padding to apply to `ListItem`.
 /// @type Number
-$item-vertical-padding: 0.5rem !default;
+$item-vertical-padding: spacing.get-var(sm) !default;
 
 /// The horizontal padding to apply to `ListItem`.
 /// @type Number
-$item-horizontal-padding: 1rem !default;
+$item-horizontal-padding: spacing.get-var(md) !default;
 
 /// The default height for a `ListItem` that has no addons or secondary text.
 /// @type Number
@@ -203,7 +204,7 @@ $item-dense-multiline-height: 5rem !default;
 /// The amount of spacing between a media addon and the `ListItem` content.
 ///
 /// @type Number
-$item-media-spacing: 1rem !default;
+$item-media-spacing: spacing.get-var(md) !default;
 
 /// The default size for a media addon in the `ListItem` component.
 ///

package/dist/menu/_menu.scss

@@ -4,6 +4,7 @@
 
 @use "sass:map";
 @use "../utils";
+@use "../spacing";
 @use "../box-shadows";
 @use "../theme/theme";
 @use "../interaction/interaction";
@@ -64,7 +65,7 @@ $min-width: 7rem !default;
 
 /// The `gap` to apply to elements within the `MenuItem`.
 /// @type Number
-$spacing: 1rem !default;
+$spacing: spacing.get-var(md) !default;
 
 /// The available configurable css variables and mostly used internally for the
 /// `get-var`, `set-var`, and `use-var` utils.

package/dist/navigation/_navigation.scss

@@ -5,6 +5,8 @@
 @use "sass:list";
 @use "sass:map";
 @use "../utils";
+@use "../border-radius";
+@use "../spacing";
 @use "../tree/tree";
 @use "../interaction/interaction";
 
@@ -14,18 +16,18 @@ $disable-everything: false !default;
 
 /// The default border-radius.
 /// @type Number
-$border-radius: 3rem !default;
+$border-radius: calc(border-radius.get-var(lg) * 3) !default;
 
 /// The default horizontal padding.
 /// @type Number
-$horizontal-padding: 0.25rem !default;
+$horizontal-padding: spacing.get-var(xs) !default;
 
 /// This is used to continually add more padding to the start of the
 /// `NavigationItem` the deeper within the nested lists it appears.
 ///
 /// @see $increasing-padding
 /// @type Number
-$padding-incrementor: 0.75rem !default;
+$padding-incrementor: calc(spacing.get-var(sm) * 1.5) !default;
 
 /// The available configurable css variables and mostly used internally for the
 /// `get-var`, `set-var`, and `use-var` utils.

package/dist/responsive-item/_responsive-item.scss

@@ -6,6 +6,7 @@
 @use "sass:map";
 @use "sass:math";
 @use "../utils";
+@use "../spacing";
 @use "../theme/colors";
 @use "../theme/theme";
 
@@ -85,7 +86,7 @@ $overlay-z-index: 0 !default;
 
 /// The default `ResponsiveItemOverlay` padding.
 /// @type Number
-$overlay-padding: 1rem !default;
+$overlay-padding: spacing.get-var(md) !default;
 
 /// The default width to apply to the `position="left"`, `"position="right"`,
 /// `position="center"`, or `position="absolute-center"`

package/dist/segmented-button/_segmented-button.scss

@@ -5,6 +5,7 @@
 @use "sass:map";
 @use "sass:color";
 @use "../utils";
+@use "../spacing";
 @use "../icon/icon";
 @use "../interaction/interaction";
 @use "../typography/typography";
@@ -69,7 +70,7 @@ $dark-theme-selected-color: a11y.contrast-color(
 
 /// The default gap to apply between the elements in the `SegmentedButton`.
 /// @type Number
-$gap: icon.$spacing !default;
+$gap: spacing.get-var(sm) !default;
 
 /// The default border-radius to apply `SegmentedButton` that appear at the
 /// edges.
@@ -86,11 +87,11 @@ $min-width: 3rem !default;
 
 /// The default horizontal padding for a `SegmentedButton`.
 /// @type Number
-$horizontal-padding: 0.75rem !default;
+$horizontal-padding: calc(spacing.get-var(sm) * 1.5) !default;
 
 /// The default vertical padding for a `SegmentedButton`.
 /// @type Number
-$vertical-padding: 0 !default;
+$vertical-padding: spacing.get-var(none) !default;
 
 /// The default outline width for a `SegmentedButton`.
 /// @type Number
@@ -129,6 +130,9 @@ $typography-styles: typography.$button-styles !default;
 /// `get-var`, `set-var`, and `use-var` utils.
 /// @type List
 $variables: (
+  border-radius,
+  min-height,
+  min-width,
   outline-width,
   outline-color,
   color,
@@ -212,6 +216,7 @@ $variables: (
 /// Conditionally applies the css variables based on feature flags
 @mixin variables {
   @if not $disable-everything {
+    @include set-var(border-radius, $border-radius);
     @include set-var(outline-width, $outline-width);
     @include set-var(outline-color, $outline-color);
     @include set-var(color, currentcolor);
@@ -242,6 +247,8 @@ $variables: (
         @include icon.set-var(color, currentcolor);
         @include icon.set-var(size, 1.125rem);
         @include utils.map-to-styles($typography-styles);
+        @include use-var(min-height, $fallback: $min-height);
+        @include use-var(min-width, $fallback: $min-width);
 
         align-items: center;
         background-color: transparent;
@@ -250,30 +257,30 @@ $variables: (
         display: inline-flex;
         gap: $gap;
         justify-content: center;
-        min-height: $min-height;
-        min-width: $min-width;
         padding: $vertical-padding $horizontal-padding;
 
         &:first-child {
-          border-bottom-left-radius: $border-radius;
-          border-top-left-radius: $border-radius;
+          @include use-var(border-bottom-left-radius, border-radius);
+          @include use-var(border-top-left-radius, border-radius);
 
           @include utils.rtl {
+            @include use-var(border-bottom-right-radius, border-radius);
+            @include use-var(border-top-right-radius, border-radius);
+
             border-bottom-left-radius: 0;
-            border-bottom-right-radius: $border-radius;
             border-top-left-radius: 0;
-            border-top-right-radius: $border-radius;
           }
         }
 
         &:last-child {
-          border-bottom-right-radius: $border-radius;
-          border-top-right-radius: $border-radius;
+          @include use-var(border-bottom-right-radius, border-radius);
+          @include use-var(border-top-right-radius, border-radius);
 
           @include utils.rtl {
-            border-bottom-left-radius: $border-radius;
+            @include use-var(border-bottom-left-radius, border-radius);
+            @include use-var(border-top-left-radius, border-radius);
+
             border-bottom-right-radius: 0;
-            border-top-left-radius: $border-radius;
             border-top-right-radius: 0;
           }
         }

package/dist/sheet/_sheet.scss

@@ -4,6 +4,7 @@
 
 @use "sass:map";
 @use "../utils";
+@use "../spacing";
 @use "../box-shadows";
 @use "../media-queries/media-queries";
 @use "../transition/transition";
@@ -72,7 +73,7 @@ $static-width: 16rem !default;
 /// @see $touch-width
 /// @see $touch-max-height
 /// @type Number
-$touch-margin: 3.5rem !default;
+$touch-margin: calc(spacing.get-var(md) * 3.5) !default;
 
 /// The default width for a `Sheet` on touch/phone devices.
 /// @type Number

package/dist/snackbar/_snackbar.scss

@@ -4,6 +4,8 @@
 
 @use "sass:map";
 @use "../utils";
+@use "../border-radius";
+@use "../spacing";
 @use "../box-shadows";
 @use "../button/button";
 @use "../theme/a11y";
@@ -72,24 +74,24 @@ $default-align-items: center !default;
 
 /// The default `gap` for a `Snackbar`.
 /// @type Number
-$gap: 1rem !default;
+$gap: spacing.get-var(md) !default;
 
 /// The default `gap` for a `Toast`.
 /// @type Number
-$toast-gap: 1rem !default;
+$toast-gap: spacing.get-var(md) !default;
 
 /// The default `gap` for a stacked `Toast`.
 /// @type Number
-$toast-gap-stacked: 0.5rem !default;
+$toast-gap-stacked: spacing.get-var(sm) !default;
 
 /// The default `gap` for a toast that has both a `ToastActionButton` and
 /// `ToastCloseButton`.
 /// @type Number
-$toast-gap-both-buttons: 0.25rem !default;
+$toast-gap-both-buttons: spacing.get-var(xs) !default;
 
 /// The viewport margin to apply to all `Toast` rendered within the `Snackbar`.
 /// @type Number
-$margin: 1rem !default;
+$margin: spacing.get-var(md) !default;
 
 /// A number between 0-24 representing the box-shadow elevation for a `Toast`.
 /// @type Number
@@ -97,25 +99,25 @@ $elevation: 6 !default;
 
 /// The default border-radius for a `Toast`.
 /// @type Number
-$border-radius: 0.25rem !default;
+$border-radius: border-radius.get-var(xs) !default;
 
 /// The default vertical padding for a `Toast`.
 /// @type Number
-$vertical-padding: 0.75em !default;
+$vertical-padding: calc(spacing.get-var(sm) * 1.5) !default;
 
 /// The default horizontal padding for a `Toast`.
 /// @type Number
-$horizontal-padding: 1rem !default;
+$horizontal-padding: spacing.get-var(md) !default;
 
 /// The default horizontal padding for a `Toast` that has an
 /// `ToastActionButton`.
 /// @type Number
-$action-horizontal-padding: 0.5rem !default;
+$action-horizontal-padding: spacing.get-var(sm) !default;
 
 /// The default horizontal padding for a `Toast` that has an
 /// `ToastCloseButton`.
 /// @type Number
-$close-button-horizontal-padding: 0 !default;
+$close-button-horizontal-padding: spacing.get-var(none) !default;
 
 /// The min-height for a `Toast`.
 /// @type Number

package/dist/table/_table.scss

@@ -4,6 +4,7 @@
 
 @use "sass:map";
 @use "../utils";
+@use "../spacing";
 @use "../box-shadows";
 @use "../theme/theme";
 @use "../icon/icon";
@@ -184,20 +185,20 @@ $cell-header-dense-height: 2.125rem !default;
 
 /// The default `TableCell` horizontal padding.
 /// @type Number
-$cell-horizontal-padding: 1rem !default;
+$cell-horizontal-padding: spacing.get-var(md) !default;
 
 /// The default `TableCell` vertical padding.
 /// @type Number
-$cell-vertical-padding: 0.375rem !default;
+$cell-vertical-padding: calc(spacing.get-var(xs) * 1.5) !default;
 
 /// The default `TableCheckbox` and `TableRadio` horizontal padding.
 /// @type Number
 ///
-$cell-input-toggle-horizontal-padding: 0.5rem !default;
+$cell-input-toggle-horizontal-padding: spacing.get-var(sm) !default;
 
 /// The default `gap` between items in a sortable `TableCell`.
 /// @type Number
-$cell-content-gap: icon.$spacing !default;
+$cell-content-gap: spacing.get-var(sm) !default;
 
 /// This is the default position of a row based sticky `TableCell`.
 /// @type Number

package/dist/tabs/_tabs.scss

@@ -5,6 +5,7 @@
 @use "sass:map";
 
 @use "../utils";
+@use "../spacing";
 @use "../theme/theme";
 @use "../transition/transition";
 @use "../typography/typography";
@@ -75,7 +76,7 @@ $typography: map.remove(typography.$button-styles, line-height) !default;
 
 /// The default gap between the `Tab` icon and children.
 /// @type Number
-$gap: icon.$spacing !default;
+$gap: spacing.get-var(sm) !default;
 
 /// The default `Tab` height.
 /// @type Number
@@ -87,11 +88,11 @@ $stacked-height: 4.5rem !default;
 
 /// The default `Tab` horizontal padding.
 /// @type Number
-$horizontal-padding: 1rem !default;
+$horizontal-padding: spacing.get-var(md) !default;
 
 /// The default `Tab` vertical padding while `stacked`.
 /// @type Number
-$vertical-padding: 0.75rem !default;
+$vertical-padding: calc(spacing.get-var(sm) * 1.5) !default;
 
 /// The `Tab` min width.
 /// @type Number
@@ -131,7 +132,9 @@ $transition-timing-function: transition.$linear-timing-function !default;
 
 /// The default padding for a `TabList` with the `padded` prop enabled.
 /// @type Number
-$tablist-scrollable-horizontal-padding: 3.25rem !default;
+$tablist-scrollable-horizontal-padding: calc(
+  spacing.get-var(xl) * 1.625
+) !default;
 
 /// The default z-index for a `TabList` scroll button.
 /// @type Number

package/dist/theme/utils.js

@@ -1,4 +1,4 @@
-import { black, white } from "./colors.js";
+/* eslint-disable no-param-reassign */ import { black, white } from "./colors.js";
 const RGB_REGEX = /^rgb\(((\b([01]?\d\d?|2[0-4]\d|25[0-5])\b),?){3}\)$/;
 const SHORTHAND_REGEX = /^#?([a-f\d])([a-f\d])([a-f\d])$/i;
 const VERBOSE_REGEX = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i;
@@ -25,7 +25,7 @@ const VERBOSE_REGEX = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i;
 }
 export function getRGB(color) {
     // chrome 102.0.50005.63 apparently has whitespace when calling `window.getComputedStyle(element)`
-    // remove whitepsace to make it easy for supporting rgb or hex
+    // remove whitespace to make it easy for supporting rgb or hex
     color = color.replace(/\s/g, "");
     const rgbMatches = color.match(RGB_REGEX);
     if (rgbMatches) {