@react-md/core 1.0.0-next.19 → 1.0.0-next.20

package/dist/interaction/useHigherContrastChildren.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/interaction/useHigherContrastChildren.tsx"],"sourcesContent":["import { Children, type ReactNode } from \"react\";\nimport { INTERACTION_CONFIG } from \"./config.js\";\n\n/**\n * This hook is used to wrap any `number` and `string` children with a `<span>`\n * so that the ripple/hover/focus background colors do not cause the text to\n * become dimmed.\n *\n * If the {@link INTERACTION_CONFIG.higherContrast} is set to `false`, this hook\n * will just return the `children` unmodified.\n *\n * Note: This should generally be used with the {@link useElementInteraction}\n * hook.\n *\n * @example Simple Example\n * ```tsx\n * import {\n *   useElementInteraction,\n *   useHigherContrastChildren,\n * } from \"@react-md/core\";\n * import type { ButtonHTMLAttributes, ReactElement, ReactNode } from \"react\";\n *\n * function Example(props: ButtonHTMLAttributes<HTMLButtonElement>): ReactElement {\n *   const {\n *     children: propChildren,\n *     disabled = false,\n *     onClick,\n *     onKeyDown,\n *     onKeyUp,\n *     onMouseDown,\n *     onMouseUp,\n *     onMouseLeave,\n *     onTouchStart,\n *     onTouchEnd,\n *     onTouchMove,\n *     ...remaining\n *   } = props;\n *   const { pressedClassName, ripples, handlers } =\n *     useElementInteraction({\n *       disabled,\n *       onClick,\n *       onKeyDown,\n *       onKeyUp,\n *       onMouseDown,\n *       onMouseUp,\n *       onMouseLeave,\n *       onTouchStart,\n *       onTouchEnd,\n *       onTouchMove,\n *     });\n *\n *   const children = useHigherContrastChildren(propChildren)\n *\n *   return (\n *     <button {...remaining} {...handlers} className={pressedClassName}>\n *       {children}\n *       {ripples}\n *     </button>\n *   );\n * }\n * ```\n *\n * @param propChildren - The children to conditionally wrap in spans.\n * @param disable - Manually disable this functionality even if the higher\n * contrast mode is enabled. This is really used within `ListItem`s so there\n * aren't unneeded `<span>`s for string/number children when there are addons.\n * @returns the children to render\n * @since 6.0.0\n * @internal\n */\nexport function useHigherContrastChildren(\n  propChildren: ReactNode,\n  disable = false\n): ReactNode {\n  if (!INTERACTION_CONFIG.higherContrast || disable) {\n    return propChildren;\n  }\n\n  // Note: This will fail if the child is wrapped in a Fragment, but that use\n  // case doesn't matter to me\n  return Children.map(propChildren, (child) => {\n    const t = typeof child;\n    if (t === \"string\" || t === \"number\") {\n      return <span>{child}</span>;\n    }\n\n    return child;\n  });\n}\n"],"names":["Children","INTERACTION_CONFIG","useHigherContrastChildren","propChildren","disable","higherContrast","map","child","t","span"],"mappings":";AAAA,SAASA,QAAQ,QAAwB,QAAQ;AACjD,SAASC,kBAAkB,QAAQ,cAAc;AAEjD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAkEC,GACD,OAAO,SAASC,0BACdC,YAAuB,EACvBC,UAAU,KAAK;IAEf,IAAI,CAACH,mBAAmBI,cAAc,IAAID,SAAS;QACjD,OAAOD;IACT;IAEA,2EAA2E;IAC3E,4BAA4B;IAC5B,OAAOH,SAASM,GAAG,CAACH,cAAc,CAACI;QACjC,MAAMC,IAAI,OAAOD;QACjB,IAAIC,MAAM,YAAYA,MAAM,UAAU;YACpC,qBAAO,KAACC;0BAAMF;;QAChB;QAEA,OAAOA;IACT;AACF"}
+{"version":3,"sources":["../../src/interaction/useHigherContrastChildren.tsx"],"sourcesContent":["import { Children, type ReactNode } from \"react\";\n\nimport { INTERACTION_CONFIG } from \"./config.js\";\n\n/**\n * This hook is used to wrap any `number` and `string` children with a `<span>`\n * so that the ripple/hover/focus background colors do not cause the text to\n * become dimmed.\n *\n * If the {@link INTERACTION_CONFIG.higherContrast} is set to `false`, this hook\n * will just return the `children` unmodified.\n *\n * Note: This should generally be used with the {@link useElementInteraction}\n * hook.\n *\n * @example Simple Example\n * ```tsx\n * import { useElementInteraction } from \"@react-md/core/interaction/useElementInteraction\";\n * import { useHigherContrastChildren, } from \"@react-md/core/interaction/useHigherContrastChildren\";\n * import {\n *   type ButtonHTMLAttributes,\n *   type ReactElement,\n *   type ReactNode,\n * } from \"react\";\n *\n * function Example(props: ButtonHTMLAttributes<HTMLButtonElement>): ReactElement {\n *   const {\n *     children: propChildren,\n *     disabled = false,\n *     onClick,\n *     onKeyDown,\n *     onKeyUp,\n *     onMouseDown,\n *     onMouseUp,\n *     onMouseLeave,\n *     onTouchStart,\n *     onTouchEnd,\n *     onTouchMove,\n *     ...remaining\n *   } = props;\n *   const { pressedClassName, ripples, handlers } =\n *     useElementInteraction({\n *       disabled,\n *       onClick,\n *       onKeyDown,\n *       onKeyUp,\n *       onMouseDown,\n *       onMouseUp,\n *       onMouseLeave,\n *       onTouchStart,\n *       onTouchEnd,\n *       onTouchMove,\n *     });\n *\n *   const children = useHigherContrastChildren(propChildren)\n *\n *   return (\n *     <button {...remaining} {...handlers} className={pressedClassName}>\n *       {children}\n *       {ripples}\n *     </button>\n *   );\n * }\n * ```\n *\n * @param children - The children to conditionally wrap in spans.\n * @param disable - Manually disable this functionality even if the higher\n * contrast mode is enabled. This is really used within `ListItem`s so there\n * aren't unneeded `<span>`s for string/number children when there are addons.\n * @returns the children to render\n * @since 6.0.0\n * @internal\n */\nexport function useHigherContrastChildren(\n  children: ReactNode,\n  disable = false\n): ReactNode {\n  if (!INTERACTION_CONFIG.higherContrast || disable) {\n    return children;\n  }\n\n  // Note: This will fail if the child is wrapped in a Fragment, but that use\n  // case doesn't matter to me\n  return Children.map(children, (child) => {\n    const t = typeof child;\n    if (t === \"string\" || t === \"number\") {\n      return <span>{child}</span>;\n    }\n\n    return child;\n  });\n}\n"],"names":["Children","INTERACTION_CONFIG","useHigherContrastChildren","children","disable","higherContrast","map","child","t","span"],"mappings":";AAAA,SAASA,QAAQ,QAAwB,QAAQ;AAEjD,SAASC,kBAAkB,QAAQ,cAAc;AAEjD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAoEC,GACD,OAAO,SAASC,0BACdC,QAAmB,EACnBC,UAAU,KAAK;IAEf,IAAI,CAACH,mBAAmBI,cAAc,IAAID,SAAS;QACjD,OAAOD;IACT;IAEA,2EAA2E;IAC3E,4BAA4B;IAC5B,OAAOH,SAASM,GAAG,CAACH,UAAU,CAACI;QAC7B,MAAMC,IAAI,OAAOD;QACjB,IAAIC,MAAM,YAAYA,MAAM,UAAU;YACpC,qBAAO,KAACC;0BAAMF;;QAChB;QAEA,OAAOA;IACT;AACF"}

package/dist/interaction/utils.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/interaction/utils.ts"],"sourcesContent":["import { type KeyboardEvent, type MouseEvent, type TouchEvent } from \"react\";\nimport { findSizingContainer } from \"../positioning/utils.js\";\nimport {\n  type ElementInteractionState,\n  type RippleState,\n  type RippleStyle,\n} from \"./types.js\";\n\n/** @internal */\nfunction calcHypotenuse(a: number, b: number): number {\n  return Math.sqrt(a * a + b * b);\n}\n\n/**\n * Gets the current radius for a ripple based on the x and y page dimensions\n * as well as the size of the element.\n *\n * This is really just in a separate file so I can easily mock this and write\n * tests.\n *\n * @internal\n */\nfunction getRadius(\n  x: number,\n  y: number,\n  offsetWidth: number,\n  offsetHeight: number\n): number {\n  return Math.max(\n    calcHypotenuse(x, y),\n    calcHypotenuse(offsetWidth - x, y),\n    calcHypotenuse(offsetWidth - x, offsetHeight - y),\n    calcHypotenuse(x, offsetHeight - y)\n  );\n}\n\n/** @internal */\nexport function getRippleStyle(\n  event:\n    | MouseEvent<HTMLElement>\n    | TouchEvent<HTMLElement>\n    | KeyboardEvent<HTMLElement>,\n  programmatic: boolean\n): RippleStyle {\n  const element =\n    findSizingContainer(event.currentTarget) || event.currentTarget;\n  const rect = element.getBoundingClientRect();\n  const { left, top, height, width } = rect;\n\n  let x: number;\n  let y: number;\n  if (\"key\" in event || programmatic) {\n    x = width / 2;\n    y = height / 2;\n  } else {\n    let pageX: number;\n    let pageY: number;\n    if (\"touches\" in event) {\n      ({ pageX, pageY } = event.touches[0]);\n    } else {\n      ({ pageX, pageY } = event);\n    }\n\n    x = pageX - (left + window.scrollX);\n    y = pageY - (top + window.scrollY);\n  }\n\n  const radius = getRadius(x, y, width, height);\n  const size = radius * 2;\n\n  return {\n    left: x - radius,\n    top: y - radius,\n    height: size,\n    width: size,\n  };\n}\n\n/**\n * This is used to set the `exiting` state after a normal \"touch\" duration.\n * 300ms seemed like a good threshold since it is the majority of the scaling\n * duration (450ms)\n */\nconst ENTER_DELAY = 300;\n\n/** @internal */\nexport function releaseRipple(\n  state: ElementInteractionState\n): ElementInteractionState {\n  // find the first non-exiting ripple which should now be released\n  const i = state.ripples.findIndex((ripple) => !ripple.exiting);\n  if (i === -1) {\n    return state;\n  }\n\n  const ripples = state.ripples.slice();\n  const ripple = ripples[i];\n  ripples[i] = {\n    ...ripple,\n    exiting: ripple.entered || Date.now() - ripple.startTime > ENTER_DELAY,\n  };\n  return { pressed: false, ripples };\n}\n\n/** @internal */\ninterface UpdateRipplesStateOptions {\n  type: \"entered\" | \"exited\";\n  state: ElementInteractionState;\n  ripple: RippleState;\n  holding: boolean;\n}\n\n/** @internal */\nexport function updateRipplesState(\n  options: UpdateRipplesStateOptions\n): ElementInteractionState {\n  const { type, ripple, state, holding } = options;\n\n  const rippleIndex = state.ripples.findIndex((r) => r === ripple);\n  if (rippleIndex === -1) {\n    return state;\n  }\n\n  const ripples = state.ripples.slice();\n  if (type === \"exited\") {\n    ripples.splice(rippleIndex, 1);\n  } else {\n    const exiting = !holding || Date.now() - ripple.startTime > ENTER_DELAY;\n    ripples[rippleIndex] = {\n      ...ripple,\n      exiting,\n      entered: true,\n    };\n  }\n\n  return { ...state, ripples };\n}\n"],"names":["findSizingContainer","calcHypotenuse","a","b","Math","sqrt","getRadius","x","y","offsetWidth","offsetHeight","max","getRippleStyle","event","programmatic","element","currentTarget","rect","getBoundingClientRect","left","top","height","width","pageX","pageY","touches","window","scrollX","scrollY","radius","size","ENTER_DELAY","releaseRipple","state","i","ripples","findIndex","ripple","exiting","slice","entered","Date","now","startTime","pressed","updateRipplesState","options","type","holding","rippleIndex","r","splice"],"mappings":"AACA,SAASA,mBAAmB,QAAQ,0BAA0B;AAO9D,cAAc,GACd,SAASC,eAAeC,CAAS,EAAEC,CAAS;IAC1C,OAAOC,KAAKC,IAAI,CAACH,IAAIA,IAAIC,IAAIA;AAC/B;AAEA;;;;;;;;CAQC,GACD,SAASG,UACPC,CAAS,EACTC,CAAS,EACTC,WAAmB,EACnBC,YAAoB;IAEpB,OAAON,KAAKO,GAAG,CACbV,eAAeM,GAAGC,IAClBP,eAAeQ,cAAcF,GAAGC,IAChCP,eAAeQ,cAAcF,GAAGG,eAAeF,IAC/CP,eAAeM,GAAGG,eAAeF;AAErC;AAEA,cAAc,GACd,OAAO,SAASI,eACdC,KAG8B,EAC9BC,YAAqB;IAErB,MAAMC,UACJf,oBAAoBa,MAAMG,aAAa,KAAKH,MAAMG,aAAa;IACjE,MAAMC,OAAOF,QAAQG,qBAAqB;IAC1C,MAAM,EAAEC,IAAI,EAAEC,GAAG,EAAEC,MAAM,EAAEC,KAAK,EAAE,GAAGL;IAErC,IAAIV;IACJ,IAAIC;IACJ,IAAI,SAASK,SAASC,cAAc;QAClCP,IAAIe,QAAQ;QACZd,IAAIa,SAAS;IACf,OAAO;QACL,IAAIE;QACJ,IAAIC;QACJ,IAAI,aAAaX,OAAO;YACrB,CAAA,EAAEU,KAAK,EAAEC,KAAK,EAAE,GAAGX,MAAMY,OAAO,CAAC,EAAE,AAAD;QACrC,OAAO;YACJ,CAAA,EAAEF,KAAK,EAAEC,KAAK,EAAE,GAAGX,KAAI;QAC1B;QAEAN,IAAIgB,QAASJ,CAAAA,OAAOO,OAAOC,OAAO,AAAD;QACjCnB,IAAIgB,QAASJ,CAAAA,MAAMM,OAAOE,OAAO,AAAD;IAClC;IAEA,MAAMC,SAASvB,UAAUC,GAAGC,GAAGc,OAAOD;IACtC,MAAMS,OAAOD,SAAS;IAEtB,OAAO;QACLV,MAAMZ,IAAIsB;QACVT,KAAKZ,IAAIqB;QACTR,QAAQS;QACRR,OAAOQ;IACT;AACF;AAEA;;;;CAIC,GACD,MAAMC,cAAc;AAEpB,cAAc,GACd,OAAO,SAASC,cACdC,KAA8B;IAE9B,iEAAiE;IACjE,MAAMC,IAAID,MAAME,OAAO,CAACC,SAAS,CAAC,CAACC,SAAW,CAACA,OAAOC,OAAO;IAC7D,IAAIJ,MAAM,CAAC,GAAG;QACZ,OAAOD;IACT;IAEA,MAAME,UAAUF,MAAME,OAAO,CAACI,KAAK;IACnC,MAAMF,SAASF,OAAO,CAACD,EAAE;IACzBC,OAAO,CAACD,EAAE,GAAG;QACX,GAAGG,MAAM;QACTC,SAASD,OAAOG,OAAO,IAAIC,KAAKC,GAAG,KAAKL,OAAOM,SAAS,GAAGZ;IAC7D;IACA,OAAO;QAAEa,SAAS;QAAOT;IAAQ;AACnC;AAUA,cAAc,GACd,OAAO,SAASU,mBACdC,OAAkC;IAElC,MAAM,EAAEC,IAAI,EAAEV,MAAM,EAAEJ,KAAK,EAAEe,OAAO,EAAE,GAAGF;IAEzC,MAAMG,cAAchB,MAAME,OAAO,CAACC,SAAS,CAAC,CAACc,IAAMA,MAAMb;IACzD,IAAIY,gBAAgB,CAAC,GAAG;QACtB,OAAOhB;IACT;IAEA,MAAME,UAAUF,MAAME,OAAO,CAACI,KAAK;IACnC,IAAIQ,SAAS,UAAU;QACrBZ,QAAQgB,MAAM,CAACF,aAAa;IAC9B,OAAO;QACL,MAAMX,UAAU,CAACU,WAAWP,KAAKC,GAAG,KAAKL,OAAOM,SAAS,GAAGZ;QAC5DI,OAAO,CAACc,YAAY,GAAG;YACrB,GAAGZ,MAAM;YACTC;YACAE,SAAS;QACX;IACF;IAEA,OAAO;QAAE,GAAGP,KAAK;QAAEE;IAAQ;AAC7B"}
+{"version":3,"sources":["../../src/interaction/utils.ts"],"sourcesContent":["import { type KeyboardEvent, type MouseEvent, type TouchEvent } from \"react\";\n\nimport { findSizingContainer } from \"../positioning/utils.js\";\nimport {\n  type ElementInteractionState,\n  type RippleState,\n  type RippleStyle,\n} from \"./types.js\";\n\n/** @internal */\nfunction calcHypotenuse(a: number, b: number): number {\n  return Math.sqrt(a * a + b * b);\n}\n\n/**\n * Gets the current radius for a ripple based on the x and y page dimensions\n * as well as the size of the element.\n *\n * This is really just in a separate file so I can easily mock this and write\n * tests.\n *\n * @internal\n */\nfunction getRadius(\n  x: number,\n  y: number,\n  offsetWidth: number,\n  offsetHeight: number\n): number {\n  return Math.max(\n    calcHypotenuse(x, y),\n    calcHypotenuse(offsetWidth - x, y),\n    calcHypotenuse(offsetWidth - x, offsetHeight - y),\n    calcHypotenuse(x, offsetHeight - y)\n  );\n}\n\n/** @internal */\nexport function getRippleStyle(\n  event:\n    | MouseEvent<HTMLElement>\n    | TouchEvent<HTMLElement>\n    | KeyboardEvent<HTMLElement>,\n  programmatic: boolean\n): RippleStyle {\n  const element =\n    findSizingContainer(event.currentTarget) || event.currentTarget;\n  const rect = element.getBoundingClientRect();\n  const { left, top, height, width } = rect;\n\n  let x: number;\n  let y: number;\n  if (\"key\" in event || programmatic) {\n    x = width / 2;\n    y = height / 2;\n  } else {\n    let pageX: number;\n    let pageY: number;\n    if (\"touches\" in event) {\n      ({ pageX, pageY } = event.touches[0]);\n    } else {\n      ({ pageX, pageY } = event);\n    }\n\n    x = pageX - (left + window.scrollX);\n    y = pageY - (top + window.scrollY);\n  }\n\n  const radius = getRadius(x, y, width, height);\n  const size = radius * 2;\n\n  return {\n    left: x - radius,\n    top: y - radius,\n    height: size,\n    width: size,\n  };\n}\n\n/**\n * This is used to set the `exiting` state after a normal \"touch\" duration.\n * 300ms seemed like a good threshold since it is the majority of the scaling\n * duration (450ms)\n */\nconst ENTER_DELAY = 300;\n\n/** @internal */\nexport function releaseRipple(\n  state: ElementInteractionState\n): ElementInteractionState {\n  // find the first non-exiting ripple which should now be released\n  const i = state.ripples.findIndex((ripple) => !ripple.exiting);\n  if (i === -1) {\n    return state;\n  }\n\n  const ripples = state.ripples.slice();\n  const ripple = ripples[i];\n  ripples[i] = {\n    ...ripple,\n    exiting: ripple.entered || Date.now() - ripple.startTime > ENTER_DELAY,\n  };\n  return { pressed: false, ripples };\n}\n\n/** @internal */\ninterface UpdateRipplesStateOptions {\n  type: \"entered\" | \"exited\";\n  state: ElementInteractionState;\n  ripple: RippleState;\n  holding: boolean;\n}\n\n/** @internal */\nexport function updateRipplesState(\n  options: UpdateRipplesStateOptions\n): ElementInteractionState {\n  const { type, ripple, state, holding } = options;\n\n  const rippleIndex = state.ripples.findIndex((r) => r === ripple);\n  if (rippleIndex === -1) {\n    return state;\n  }\n\n  const ripples = state.ripples.slice();\n  if (type === \"exited\") {\n    ripples.splice(rippleIndex, 1);\n  } else {\n    const exiting = !holding || Date.now() - ripple.startTime > ENTER_DELAY;\n    ripples[rippleIndex] = {\n      ...ripple,\n      exiting,\n      entered: true,\n    };\n  }\n\n  return { ...state, ripples };\n}\n"],"names":["findSizingContainer","calcHypotenuse","a","b","Math","sqrt","getRadius","x","y","offsetWidth","offsetHeight","max","getRippleStyle","event","programmatic","element","currentTarget","rect","getBoundingClientRect","left","top","height","width","pageX","pageY","touches","window","scrollX","scrollY","radius","size","ENTER_DELAY","releaseRipple","state","i","ripples","findIndex","ripple","exiting","slice","entered","Date","now","startTime","pressed","updateRipplesState","options","type","holding","rippleIndex","r","splice"],"mappings":"AAEA,SAASA,mBAAmB,QAAQ,0BAA0B;AAO9D,cAAc,GACd,SAASC,eAAeC,CAAS,EAAEC,CAAS;IAC1C,OAAOC,KAAKC,IAAI,CAACH,IAAIA,IAAIC,IAAIA;AAC/B;AAEA;;;;;;;;CAQC,GACD,SAASG,UACPC,CAAS,EACTC,CAAS,EACTC,WAAmB,EACnBC,YAAoB;IAEpB,OAAON,KAAKO,GAAG,CACbV,eAAeM,GAAGC,IAClBP,eAAeQ,cAAcF,GAAGC,IAChCP,eAAeQ,cAAcF,GAAGG,eAAeF,IAC/CP,eAAeM,GAAGG,eAAeF;AAErC;AAEA,cAAc,GACd,OAAO,SAASI,eACdC,KAG8B,EAC9BC,YAAqB;IAErB,MAAMC,UACJf,oBAAoBa,MAAMG,aAAa,KAAKH,MAAMG,aAAa;IACjE,MAAMC,OAAOF,QAAQG,qBAAqB;IAC1C,MAAM,EAAEC,IAAI,EAAEC,GAAG,EAAEC,MAAM,EAAEC,KAAK,EAAE,GAAGL;IAErC,IAAIV;IACJ,IAAIC;IACJ,IAAI,SAASK,SAASC,cAAc;QAClCP,IAAIe,QAAQ;QACZd,IAAIa,SAAS;IACf,OAAO;QACL,IAAIE;QACJ,IAAIC;QACJ,IAAI,aAAaX,OAAO;YACrB,CAAA,EAAEU,KAAK,EAAEC,KAAK,EAAE,GAAGX,MAAMY,OAAO,CAAC,EAAE,AAAD;QACrC,OAAO;YACJ,CAAA,EAAEF,KAAK,EAAEC,KAAK,EAAE,GAAGX,KAAI;QAC1B;QAEAN,IAAIgB,QAASJ,CAAAA,OAAOO,OAAOC,OAAO,AAAD;QACjCnB,IAAIgB,QAASJ,CAAAA,MAAMM,OAAOE,OAAO,AAAD;IAClC;IAEA,MAAMC,SAASvB,UAAUC,GAAGC,GAAGc,OAAOD;IACtC,MAAMS,OAAOD,SAAS;IAEtB,OAAO;QACLV,MAAMZ,IAAIsB;QACVT,KAAKZ,IAAIqB;QACTR,QAAQS;QACRR,OAAOQ;IACT;AACF;AAEA;;;;CAIC,GACD,MAAMC,cAAc;AAEpB,cAAc,GACd,OAAO,SAASC,cACdC,KAA8B;IAE9B,iEAAiE;IACjE,MAAMC,IAAID,MAAME,OAAO,CAACC,SAAS,CAAC,CAACC,SAAW,CAACA,OAAOC,OAAO;IAC7D,IAAIJ,MAAM,CAAC,GAAG;QACZ,OAAOD;IACT;IAEA,MAAME,UAAUF,MAAME,OAAO,CAACI,KAAK;IACnC,MAAMF,SAASF,OAAO,CAACD,EAAE;IACzBC,OAAO,CAACD,EAAE,GAAG;QACX,GAAGG,MAAM;QACTC,SAASD,OAAOG,OAAO,IAAIC,KAAKC,GAAG,KAAKL,OAAOM,SAAS,GAAGZ;IAC7D;IACA,OAAO;QAAEa,SAAS;QAAOT;IAAQ;AACnC;AAUA,cAAc,GACd,OAAO,SAASU,mBACdC,OAAkC;IAElC,MAAM,EAAEC,IAAI,EAAEV,MAAM,EAAEJ,KAAK,EAAEe,OAAO,EAAE,GAAGF;IAEzC,MAAMG,cAAchB,MAAME,OAAO,CAACC,SAAS,CAAC,CAACc,IAAMA,MAAMb;IACzD,IAAIY,gBAAgB,CAAC,GAAG;QACtB,OAAOhB;IACT;IAEA,MAAME,UAAUF,MAAME,OAAO,CAACI,KAAK;IACnC,IAAIQ,SAAS,UAAU;QACrBZ,QAAQgB,MAAM,CAACF,aAAa;IAC9B,OAAO;QACL,MAAMX,UAAU,CAACU,WAAWP,KAAKC,GAAG,KAAKL,OAAOM,SAAS,GAAGZ;QAC5DI,OAAO,CAACc,YAAY,GAAG;YACrB,GAAGZ,MAAM;YACTC;YACAE,SAAS;QACX;IACF;IAEA,OAAO;QAAE,GAAGP,KAAK;QAAEE;IAAQ;AAC7B"}

package/dist/layout/LayoutAppBar.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/layout/LayoutAppBar.tsx"],"sourcesContent":["\"use client\";\nimport { forwardRef } from \"react\";\nimport {\n  AppBar,\n  type AppBarProps,\n  type CustomAppBarComponent,\n} from \"../app-bar/AppBar.js\";\nimport {\n  SkipToMainContent,\n  type SkipToMainContentProps,\n} from \"../link/SkipToMainContent.js\";\nimport { useCSSVariables } from \"../theme/useCSSVariables.js\";\nimport { type CssPosition, type PropsWithRef } from \"../types.js\";\nimport { useEnsuredId } from \"../useEnsuredId.js\";\nimport { useLayoutAppBarHeight } from \"./useLayoutAppBarHeight.js\";\n\n/**\n * @since 6.0.0 Only supports `AppBar` + `SkipToMainContent` props\n */\nexport interface LayoutAppBarProps extends AppBarProps {\n  /** @defaultValue `\"header\"` */\n  as?: CustomAppBarComponent;\n\n  /** @defaultValue `\"fixed\"` */\n  position?: CssPosition;\n\n  /**\n   * Any additional props to pass to the {@link SkipToMainContent} component.\n   */\n  skipProps?: PropsWithRef<SkipToMainContentProps, HTMLAnchorElement>;\n}\n\n/**\n * **Client Component**\n *\n * This component is used to dynamically update the `--rmd-layout-header-offset`\n * based on the current height of this app bar. If you are concerned about\n * javascript bundle size, it is recommended to configure this variable in SCSS\n * instead.\n *\n * @example Static Height\n * ```scss\n * @use \"everything\";\n *\n * :root {\n *   @include everything.layout-set-var(header-height, everything.$app-bar-height);\n * }\n * ```\n *\n * @example Media Query Height Changes\n * ```scss\n * @use \"everything\";\n *\n * :root {\n *   @include everything.layout-set-var(header-height, everything.$app-bar-height);\n *   @include everything.tablet-media {\n *     @include everything.layout-set-var(header-height, everything.$app-bar-dense-height);\n *   }\n * }\n * ```\n *\n * @since 6.0.0 This component no longer renders the `LayoutNavToggle` and\n * `LayoutAppBarTitle` since they no longer exist. The only purpose of this\n * component is to dynamically set the `--rmd-layout-header-height` variable.\n */\nexport const LayoutAppBar = forwardRef<HTMLDivElement, LayoutAppBarProps>(\n  function LayoutAppBar(props, ref) {\n    const {\n      as = \"header\",\n      id: propId,\n      position = \"fixed\",\n      skipProps,\n      children,\n      ...remaining\n    } = props;\n    const id = useEnsuredId(propId, \"layout-header\");\n    const { appBarRef, variables } = useLayoutAppBarHeight(ref);\n    useCSSVariables(variables);\n\n    return (\n      <AppBar\n        {...remaining}\n        id={id}\n        as={as}\n        ref={appBarRef}\n        position={position}\n      >\n        <SkipToMainContent {...skipProps} />\n        {children}\n      </AppBar>\n    );\n  }\n);\n"],"names":["forwardRef","AppBar","SkipToMainContent","useCSSVariables","useEnsuredId","useLayoutAppBarHeight","LayoutAppBar","props","ref","as","id","propId","position","skipProps","children","remaining","appBarRef","variables"],"mappings":"AAAA;;AACA,SAASA,UAAU,QAAQ,QAAQ;AACnC,SACEC,MAAM,QAGD,uBAAuB;AAC9B,SACEC,iBAAiB,QAEZ,+BAA+B;AACtC,SAASC,eAAe,QAAQ,8BAA8B;AAE9D,SAASC,YAAY,QAAQ,qBAAqB;AAClD,SAASC,qBAAqB,QAAQ,6BAA6B;AAkBnE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAgCC,GACD,OAAO,MAAMC,6BAAeN,WAC1B,SAASM,aAAaC,KAAK,EAAEC,GAAG;IAC9B,MAAM,EACJC,KAAK,QAAQ,EACbC,IAAIC,MAAM,EACVC,WAAW,OAAO,EAClBC,SAAS,EACTC,QAAQ,EACR,GAAGC,WACJ,GAAGR;IACJ,MAAMG,KAAKN,aAAaO,QAAQ;IAChC,MAAM,EAAEK,SAAS,EAAEC,SAAS,EAAE,GAAGZ,sBAAsBG;IACvDL,gBAAgBc;IAEhB,qBACE,MAAChB;QACE,GAAGc,SAAS;QACbL,IAAIA;QACJD,IAAIA;QACJD,KAAKQ;QACLJ,UAAUA;;0BAEV,KAACV;gBAAmB,GAAGW,SAAS;;YAC/BC;;;AAGP,GACA"}
+{"version":3,"sources":["../../src/layout/LayoutAppBar.tsx"],"sourcesContent":["\"use client\";\n\nimport { forwardRef } from \"react\";\n\nimport {\n  AppBar,\n  type AppBarProps,\n  type CustomAppBarComponent,\n} from \"../app-bar/AppBar.js\";\nimport {\n  SkipToMainContent,\n  type SkipToMainContentProps,\n} from \"../link/SkipToMainContent.js\";\nimport { useCSSVariables } from \"../theme/useCSSVariables.js\";\nimport { type CssPosition, type PropsWithRef } from \"../types.js\";\nimport { useEnsuredId } from \"../useEnsuredId.js\";\nimport { useLayoutAppBarHeight } from \"./useLayoutAppBarHeight.js\";\n\n/**\n * @since 6.0.0 Only supports `AppBar` + `SkipToMainContent` props\n */\nexport interface LayoutAppBarProps extends AppBarProps {\n  /** @defaultValue `\"header\"` */\n  as?: CustomAppBarComponent;\n\n  /** @defaultValue `\"fixed\"` */\n  position?: CssPosition;\n\n  /**\n   * Any additional props to pass to the {@link SkipToMainContent} component.\n   */\n  skipProps?: PropsWithRef<SkipToMainContentProps, HTMLAnchorElement>;\n}\n\n/**\n * **Client Component**\n *\n * This component is used to dynamically update the `--rmd-layout-header-offset`\n * based on the current height of this app bar. If you are concerned about\n * javascript bundle size, it is recommended to configure this variable in SCSS\n * instead.\n *\n * @example Static Height\n * ```scss\n * @use \"everything\";\n *\n * :root {\n *   @include everything.layout-set-var(header-height, everything.$app-bar-height);\n * }\n * ```\n *\n * @example Media Query Height Changes\n * ```scss\n * @use \"everything\";\n *\n * :root {\n *   @include everything.layout-set-var(header-height, everything.$app-bar-height);\n *   @include everything.tablet-media {\n *     @include everything.layout-set-var(header-height, everything.$app-bar-dense-height);\n *   }\n * }\n * ```\n *\n * @since 6.0.0 This component no longer renders the `LayoutNavToggle` and\n * `LayoutAppBarTitle` since they no longer exist. The only purpose of this\n * component is to dynamically set the `--rmd-layout-header-height` variable.\n */\nexport const LayoutAppBar = forwardRef<HTMLDivElement, LayoutAppBarProps>(\n  function LayoutAppBar(props, ref) {\n    const {\n      as = \"header\",\n      id: propId,\n      position = \"fixed\",\n      skipProps,\n      children,\n      ...remaining\n    } = props;\n    const id = useEnsuredId(propId, \"layout-header\");\n    const { appBarRef, variables } = useLayoutAppBarHeight(ref);\n    useCSSVariables(variables);\n\n    return (\n      <AppBar\n        {...remaining}\n        id={id}\n        as={as}\n        ref={appBarRef}\n        position={position}\n      >\n        <SkipToMainContent {...skipProps} />\n        {children}\n      </AppBar>\n    );\n  }\n);\n"],"names":["forwardRef","AppBar","SkipToMainContent","useCSSVariables","useEnsuredId","useLayoutAppBarHeight","LayoutAppBar","props","ref","as","id","propId","position","skipProps","children","remaining","appBarRef","variables"],"mappings":"AAAA;;AAEA,SAASA,UAAU,QAAQ,QAAQ;AAEnC,SACEC,MAAM,QAGD,uBAAuB;AAC9B,SACEC,iBAAiB,QAEZ,+BAA+B;AACtC,SAASC,eAAe,QAAQ,8BAA8B;AAE9D,SAASC,YAAY,QAAQ,qBAAqB;AAClD,SAASC,qBAAqB,QAAQ,6BAA6B;AAkBnE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAgCC,GACD,OAAO,MAAMC,6BAAeN,WAC1B,SAASM,aAAaC,KAAK,EAAEC,GAAG;IAC9B,MAAM,EACJC,KAAK,QAAQ,EACbC,IAAIC,MAAM,EACVC,WAAW,OAAO,EAClBC,SAAS,EACTC,QAAQ,EACR,GAAGC,WACJ,GAAGR;IACJ,MAAMG,KAAKN,aAAaO,QAAQ;IAChC,MAAM,EAAEK,SAAS,EAAEC,SAAS,EAAE,GAAGZ,sBAAsBG;IACvDL,gBAAgBc;IAEhB,qBACE,MAAChB;QACE,GAAGc,SAAS;QACbL,IAAIA;QACJD,IAAIA;QACJD,KAAKQ;QACLJ,UAAUA;;0BAEV,KAACV;gBAAmB,GAAGW,SAAS;;YAC/BC;;;AAGP,GACA"}

package/dist/layout/LayoutNav.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/layout/LayoutNav.tsx"],"sourcesContent":["\"use client\";\nimport { cnb } from \"cnbuilder\";\nimport { forwardRef, type HTMLAttributes, type ReactNode } from \"react\";\nimport {\n  DEFAULT_SHEET_CLASSNAMES,\n  DEFAULT_SHEET_TIMEOUT,\n  sheet,\n  type BaseSheetClassNameOptions,\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 {\n *   LayoutAppBar,\n *   LayoutNav,\n *   Main,\n *   useHorizontalLayoutTransition,\n * } from \"@react-md/core\";\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 {\n *   LayoutNav,\n *   Main,\n *   useHorizontalLayoutTransition,\n *   useToggle,\n * } from \"@react-md/core\";\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 * @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          horizontalSize: \"none\",\n          disableOverlay: true,\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","horizontalSize","disableOverlay","exitedHidden","transitionIn","aria-label","aria-labelledby"],"mappings":"AAAA;;AACA,SAASA,GAAG,QAAQ,YAAY;AAChC,SAASC,UAAU,QAA6C,QAAQ;AACxE,SACEC,wBAAwB,EACxBC,qBAAqB,EACrBC,KAAK,QAEA,qBAAqB;AAO5B,SAASC,gBAAgB,QAAQ,oCAAoC;AACrE,SAASC,SAAS,QAAQ,uBAAuB;AAsCjD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAmFC,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,gBAAgB;YAChBC,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 {\n *   LayoutAppBar,\n *   LayoutNav,\n *   Main,\n *   useHorizontalLayoutTransition,\n * } from \"@react-md/core\";\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 {\n *   LayoutNav,\n *   Main,\n *   useHorizontalLayoutTransition,\n *   useToggle,\n * } from \"@react-md/core\";\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 * @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          horizontalSize: \"none\",\n          disableOverlay: true,\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","horizontalSize","disableOverlay","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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAmFC,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,gBAAgB;YAChBC,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/LayoutWindowSplitter.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/layout/LayoutWindowSplitter.tsx"],"sourcesContent":["\"use client\";\nimport { forwardRef, useMemo } from \"react\";\nimport { type DefinedCSSVariableName } from \"../theme/types.js\";\nimport { useCSSVariables } from \"../theme/useCSSVariables.js\";\nimport {\n  WindowSplitter,\n  type BaseWindowSplitterProps,\n} from \"../window-splitter/WindowSplitter.js\";\nimport { type WindowSplitterWidgetProps } from \"../window-splitter/useWindowSplitter.js\";\nimport {\n  layoutWindowSplitter,\n  type LayoutWindowSplitterClassNameOptions,\n} from \"./layoutWindowSplitterStyles.js\";\n\n/**\n * @since 6.0.0\n */\nexport interface LayoutWindowSplitterProps\n  extends WindowSplitterWidgetProps<HTMLButtonElement>,\n    Omit<\n      BaseWindowSplitterProps,\n      keyof WindowSplitterWidgetProps<HTMLButtonElement>\n    >,\n    LayoutWindowSplitterClassNameOptions {\n  /** @defaultValue `\"Resize Navigation\"` */\n  \"aria-label\"?: string;\n\n  /**\n   * The current navigation width (in px).\n   */\n  navWidth: number;\n}\n\n/**\n * **Client Component**\n *\n * This component is used to resize the `LayoutNav` component.\n *\n * @see {@link useResizableExpandableLayout} for a default implementation for\n * this component.\n *\n * @example Dynamic Resizing\n * ```tsx\n * import {\n *   LayoutNav,\n *   LayoutWindowSplitter,\n *   Main,\n *   NoSsr,\n *   useWindowSize,\n *   useWindowSplitter,\n * } from \"@react-md/core\";\n * import type { ReactElement, PropsWithChildren } from \"react\"\n *\n * function MyWindowSplitter(): ReactElement {\n *   const { width } = useWindowSize({ disableHeight: true });\n *   const min = 96;\n *   const max = Math.max(600, width * .7);\n *\n *   const { value, splitterProps } = useWindowSplitter({\n *     min,\n *     max,\n *     defaultValue: 256,\n *   });\n *\n *   return (\n *     <LayoutWindowSplitter\n *       aria-controls=\"layout-nav-id\"\n *       {...splitterProps}\n *       value={value}\n *     />\n *   );\n * }\n *\n * function Layout({ children }: PropsWithChildren): ReactElement {\n *   return (\n *     <>\n *       <LayoutNav id=\"layout-nav\" {...otherProps}>\n *         <YourNavigation />\n *       </LayoutNav>\n *       // only required when using SSR\n *       <NoSsr>\n *         <MyWindowSplitter />\n *       </NoSsr>\n *       <Main navOffset>\n *         {children}\n *       </Main>\n *     </>\n *   );\n * }\n * ```\n *\n * @since 6.0.0\n */\nexport const LayoutWindowSplitter = forwardRef<\n  HTMLButtonElement,\n  LayoutWindowSplitterProps\n>(function LayoutWindowSplitter(props, ref) {\n  const {\n    \"aria-labelledby\": ariaLabelledBy,\n    \"aria-label\": ariaLabel = ariaLabelledBy ? undefined : \"Resize Navigation\",\n    appBarOffset,\n    disableResponsive,\n    className,\n    navWidth,\n    ...remaining\n  } = props;\n\n  useCSSVariables<DefinedCSSVariableName>(\n    useMemo(\n      () => [{ name: \"--rmd-layout-size\", value: `${navWidth}px` }],\n      [navWidth]\n    )\n  );\n\n  return (\n    <WindowSplitter\n      {...remaining}\n      ref={ref}\n      aria-label={ariaLabel as string}\n      aria-labelledby={ariaLabelledBy}\n      className={layoutWindowSplitter({\n        appBarOffset,\n        disableResponsive,\n        className,\n      })}\n    />\n  );\n});\n"],"names":["forwardRef","useMemo","useCSSVariables","WindowSplitter","layoutWindowSplitter","LayoutWindowSplitter","props","ref","ariaLabelledBy","ariaLabel","undefined","appBarOffset","disableResponsive","className","navWidth","remaining","name","value","aria-label","aria-labelledby"],"mappings":"AAAA;;AACA,SAASA,UAAU,EAAEC,OAAO,QAAQ,QAAQ;AAE5C,SAASC,eAAe,QAAQ,8BAA8B;AAC9D,SACEC,cAAc,QAET,uCAAuC;AAE9C,SACEC,oBAAoB,QAEf,kCAAkC;AAqBzC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA2DC,GACD,OAAO,MAAMC,qCAAuBL,WAGlC,SAASK,qBAAqBC,KAAK,EAAEC,GAAG;IACxC,MAAM,EACJ,mBAAmBC,cAAc,EACjC,cAAcC,YAAYD,iBAAiBE,YAAY,mBAAmB,EAC1EC,YAAY,EACZC,iBAAiB,EACjBC,SAAS,EACTC,QAAQ,EACR,GAAGC,WACJ,GAAGT;IAEJJ,gBACED,QACE,IAAM;YAAC;gBAAEe,MAAM;gBAAqBC,OAAO,GAAGH,SAAS,EAAE,CAAC;YAAC;SAAE,EAC7D;QAACA;KAAS;IAId,qBACE,KAACX;QACE,GAAGY,SAAS;QACbR,KAAKA;QACLW,cAAYT;QACZU,mBAAiBX;QACjBK,WAAWT,qBAAqB;YAC9BO;YACAC;YACAC;QACF;;AAGN,GAAG"}
+{"version":3,"sources":["../../src/layout/LayoutWindowSplitter.tsx"],"sourcesContent":["\"use client\";\n\nimport { forwardRef, useMemo } from \"react\";\n\nimport { type DefinedCSSVariableName } from \"../theme/types.js\";\nimport { useCSSVariables } from \"../theme/useCSSVariables.js\";\nimport {\n  type BaseWindowSplitterProps,\n  WindowSplitter,\n} from \"../window-splitter/WindowSplitter.js\";\nimport { type WindowSplitterWidgetProps } from \"../window-splitter/useWindowSplitter.js\";\nimport {\n  type LayoutWindowSplitterClassNameOptions,\n  layoutWindowSplitter,\n} from \"./layoutWindowSplitterStyles.js\";\n\n/**\n * @since 6.0.0\n */\nexport interface LayoutWindowSplitterProps\n  extends WindowSplitterWidgetProps<HTMLButtonElement>,\n    Omit<\n      BaseWindowSplitterProps,\n      keyof WindowSplitterWidgetProps<HTMLButtonElement>\n    >,\n    LayoutWindowSplitterClassNameOptions {\n  /** @defaultValue `\"Resize Navigation\"` */\n  \"aria-label\"?: string;\n\n  /**\n   * The current navigation width (in px).\n   */\n  navWidth: number;\n}\n\n/**\n * **Client Component**\n *\n * This component is used to resize the `LayoutNav` component.\n *\n * @see {@link useResizableExpandableLayout} for a default implementation for\n * this component.\n *\n * @example Dynamic Resizing\n * ```tsx\n * import {\n *   LayoutNav,\n *   LayoutWindowSplitter,\n *   Main,\n *   NoSsr,\n *   useWindowSize,\n *   useWindowSplitter,\n * } from \"@react-md/core\";\n * import type { ReactElement, PropsWithChildren } from \"react\"\n *\n * function MyWindowSplitter(): ReactElement {\n *   const { width } = useWindowSize({ disableHeight: true });\n *   const min = 96;\n *   const max = Math.max(600, width * .7);\n *\n *   const { value, splitterProps } = useWindowSplitter({\n *     min,\n *     max,\n *     defaultValue: 256,\n *   });\n *\n *   return (\n *     <LayoutWindowSplitter\n *       aria-controls=\"layout-nav-id\"\n *       {...splitterProps}\n *       value={value}\n *     />\n *   );\n * }\n *\n * function Layout({ children }: PropsWithChildren): ReactElement {\n *   return (\n *     <>\n *       <LayoutNav id=\"layout-nav\" {...otherProps}>\n *         <YourNavigation />\n *       </LayoutNav>\n *       // only required when using SSR\n *       <NoSsr>\n *         <MyWindowSplitter />\n *       </NoSsr>\n *       <Main navOffset>\n *         {children}\n *       </Main>\n *     </>\n *   );\n * }\n * ```\n *\n * @since 6.0.0\n */\nexport const LayoutWindowSplitter = forwardRef<\n  HTMLButtonElement,\n  LayoutWindowSplitterProps\n>(function LayoutWindowSplitter(props, ref) {\n  const {\n    \"aria-labelledby\": ariaLabelledBy,\n    \"aria-label\": ariaLabel = ariaLabelledBy ? undefined : \"Resize Navigation\",\n    appBarOffset,\n    disableResponsive,\n    className,\n    navWidth,\n    ...remaining\n  } = props;\n\n  useCSSVariables<DefinedCSSVariableName>(\n    useMemo(\n      () => [{ name: \"--rmd-layout-size\", value: `${navWidth}px` }],\n      [navWidth]\n    )\n  );\n\n  return (\n    <WindowSplitter\n      {...remaining}\n      ref={ref}\n      aria-label={ariaLabel as string}\n      aria-labelledby={ariaLabelledBy}\n      className={layoutWindowSplitter({\n        appBarOffset,\n        disableResponsive,\n        className,\n      })}\n    />\n  );\n});\n"],"names":["forwardRef","useMemo","useCSSVariables","WindowSplitter","layoutWindowSplitter","LayoutWindowSplitter","props","ref","ariaLabelledBy","ariaLabel","undefined","appBarOffset","disableResponsive","className","navWidth","remaining","name","value","aria-label","aria-labelledby"],"mappings":"AAAA;;AAEA,SAASA,UAAU,EAAEC,OAAO,QAAQ,QAAQ;AAG5C,SAASC,eAAe,QAAQ,8BAA8B;AAC9D,SAEEC,cAAc,QACT,uCAAuC;AAE9C,SAEEC,oBAAoB,QACf,kCAAkC;AAqBzC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA2DC,GACD,OAAO,MAAMC,qCAAuBL,WAGlC,SAASK,qBAAqBC,KAAK,EAAEC,GAAG;IACxC,MAAM,EACJ,mBAAmBC,cAAc,EACjC,cAAcC,YAAYD,iBAAiBE,YAAY,mBAAmB,EAC1EC,YAAY,EACZC,iBAAiB,EACjBC,SAAS,EACTC,QAAQ,EACR,GAAGC,WACJ,GAAGT;IAEJJ,gBACED,QACE,IAAM;YAAC;gBAAEe,MAAM;gBAAqBC,OAAO,GAAGH,SAAS,EAAE,CAAC;YAAC;SAAE,EAC7D;QAACA;KAAS;IAId,qBACE,KAACX;QACE,GAAGY,SAAS;QACbR,KAAKA;QACLW,cAAYT;QACZU,mBAAiBX;QACjBK,WAAWT,qBAAqB;YAC9BO;YACAC;YACAC;QACF;;AAGN,GAAG"}

package/dist/layout/Main.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/layout/Main.tsx"],"sourcesContent":["\"use client\";\nimport {\n  forwardRef,\n  type ElementType,\n  type HTMLAttributes,\n  type ReactNode,\n  type Ref,\n} from \"react\";\nimport { useEnsuredId } from \"../useEnsuredId.js\";\nimport { main, type MainClassNameOptions } from \"./mainStyles.js\";\nimport { useMainTabIndex } from \"./useMainTabIndex.js\";\n\n/**\n * @since 6.0.0\n */\nexport type CustomMainElement = ElementType<\n  HTMLAttributes<HTMLElement> & {\n    ref: Ref<HTMLElement>;\n    className?: string;\n    tabIndex?: number;\n  }\n>;\n\n/**\n * @since 6.0.0\n */\nexport interface MainProps\n  extends HTMLAttributes<HTMLElement>,\n    MainClassNameOptions {\n  /**\n   * @defaultValue `\"main\"`\n   */\n  as?: CustomMainElement;\n  children: ReactNode;\n}\n\n/**\n * **Client Component**\n *\n * This component is really only used to dynamically set the `tabIndex` to `-1`\n * while using a keyboard for the `SkipToMainContent` component's focus behavior\n * to work correctly. If you don't need that functionality, use the {@link main}\n * style utility instead.\n *\n * @example Styles Only\n * ```tsx\n * import { main as mainStyles } from \"@react-md/core\":\n *\n * function MyCustomMainElement({ children }) {\n *   return (\n *     <main\n *       className={mainStyles({\n *         navOffset: true,\n *         appBarOffset: true,\n *       })}\n *     >\n *       {children}\n *     </main>\n *   );\n * }\n * ```\n *\n * @since 6.0.0 Renamed from `LayoutMain` removed a lot of\n * functionality to keep this component simple.\n */\nexport const Main = forwardRef<HTMLElement, MainProps>(\n  function Main(props, ref) {\n    const {\n      as: Component = \"main\",\n      id: propId,\n      className,\n      children,\n      tabIndex: propTabIndex,\n      navOffset,\n      appBarOffset,\n      ...remaining\n    } = props;\n    const id = useEnsuredId(propId, \"main\");\n    const tabIndex = useMainTabIndex(propTabIndex);\n\n    return (\n      <Component\n        {...remaining}\n        id={id}\n        ref={ref}\n        className={main({ navOffset, appBarOffset, className })}\n        tabIndex={tabIndex}\n      >\n        {children}\n      </Component>\n    );\n  }\n);\n"],"names":["forwardRef","useEnsuredId","main","useMainTabIndex","Main","props","ref","as","Component","id","propId","className","children","tabIndex","propTabIndex","navOffset","appBarOffset","remaining"],"mappings":"AAAA;;AACA,SACEA,UAAU,QAKL,QAAQ;AACf,SAASC,YAAY,QAAQ,qBAAqB;AAClD,SAASC,IAAI,QAAmC,kBAAkB;AAClE,SAASC,eAAe,QAAQ,uBAAuB;AA0BvD;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA4BC,GACD,OAAO,MAAMC,qBAAOJ,WAClB,SAASI,KAAKC,KAAK,EAAEC,GAAG;IACtB,MAAM,EACJC,IAAIC,YAAY,MAAM,EACtBC,IAAIC,MAAM,EACVC,SAAS,EACTC,QAAQ,EACRC,UAAUC,YAAY,EACtBC,SAAS,EACTC,YAAY,EACZ,GAAGC,WACJ,GAAGZ;IACJ,MAAMI,KAAKR,aAAaS,QAAQ;IAChC,MAAMG,WAAWV,gBAAgBW;IAEjC,qBACE,KAACN;QACE,GAAGS,SAAS;QACbR,IAAIA;QACJH,KAAKA;QACLK,WAAWT,KAAK;YAAEa;YAAWC;YAAcL;QAAU;QACrDE,UAAUA;kBAETD;;AAGP,GACA"}
+{"version":3,"sources":["../../src/layout/Main.tsx"],"sourcesContent":["\"use client\";\n\nimport {\n  type ElementType,\n  type HTMLAttributes,\n  type ReactNode,\n  type Ref,\n  forwardRef,\n} from \"react\";\n\nimport { useEnsuredId } from \"../useEnsuredId.js\";\nimport { type MainClassNameOptions, main } from \"./mainStyles.js\";\nimport { useMainTabIndex } from \"./useMainTabIndex.js\";\n\n/**\n * @since 6.0.0\n */\nexport type CustomMainElement = ElementType<\n  HTMLAttributes<HTMLElement> & {\n    ref: Ref<HTMLElement>;\n    className?: string;\n    tabIndex?: number;\n  }\n>;\n\n/**\n * @since 6.0.0\n */\nexport interface MainProps\n  extends HTMLAttributes<HTMLElement>,\n    MainClassNameOptions {\n  /**\n   * @defaultValue `\"main\"`\n   */\n  as?: CustomMainElement;\n  children: ReactNode;\n}\n\n/**\n * **Client Component**\n *\n * This component is really only used to dynamically set the `tabIndex` to `-1`\n * while using a keyboard for the `SkipToMainContent` component's focus behavior\n * to work correctly. If you don't need that functionality, use the {@link main}\n * style utility instead.\n *\n * @example Styles Only\n * ```tsx\n * import { main as mainStyles } from \"@react-md/core\":\n *\n * function MyCustomMainElement({ children }) {\n *   return (\n *     <main\n *       className={mainStyles({\n *         navOffset: true,\n *         appBarOffset: true,\n *       })}\n *     >\n *       {children}\n *     </main>\n *   );\n * }\n * ```\n *\n * @since 6.0.0 Renamed from `LayoutMain` removed a lot of\n * functionality to keep this component simple.\n */\nexport const Main = forwardRef<HTMLElement, MainProps>(\n  function Main(props, ref) {\n    const {\n      as: Component = \"main\",\n      id: propId,\n      className,\n      children,\n      tabIndex: propTabIndex,\n      navOffset,\n      appBarOffset,\n      ...remaining\n    } = props;\n    const id = useEnsuredId(propId, \"main\");\n    const tabIndex = useMainTabIndex(propTabIndex);\n\n    return (\n      <Component\n        {...remaining}\n        id={id}\n        ref={ref}\n        className={main({ navOffset, appBarOffset, className })}\n        tabIndex={tabIndex}\n      >\n        {children}\n      </Component>\n    );\n  }\n);\n"],"names":["forwardRef","useEnsuredId","main","useMainTabIndex","Main","props","ref","as","Component","id","propId","className","children","tabIndex","propTabIndex","navOffset","appBarOffset","remaining"],"mappings":"AAAA;;AAEA,SAKEA,UAAU,QACL,QAAQ;AAEf,SAASC,YAAY,QAAQ,qBAAqB;AAClD,SAAoCC,IAAI,QAAQ,kBAAkB;AAClE,SAASC,eAAe,QAAQ,uBAAuB;AA0BvD;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA4BC,GACD,OAAO,MAAMC,qBAAOJ,WAClB,SAASI,KAAKC,KAAK,EAAEC,GAAG;IACtB,MAAM,EACJC,IAAIC,YAAY,MAAM,EACtBC,IAAIC,MAAM,EACVC,SAAS,EACTC,QAAQ,EACRC,UAAUC,YAAY,EACtBC,SAAS,EACTC,YAAY,EACZ,GAAGC,WACJ,GAAGZ;IACJ,MAAMI,KAAKR,aAAaS,QAAQ;IAChC,MAAMG,WAAWV,gBAAgBW;IAEjC,qBACE,KAACN;QACE,GAAGS,SAAS;QACbR,IAAIA;QACJH,KAAKA;QACLK,WAAWT,KAAK;YAAEa;YAAWC;YAAcL;QAAU;QACrDE,UAAUA;kBAETD;;AAGP,GACA"}

package/dist/layout/_layout.scss

@@ -100,6 +100,10 @@ $variables: (size, header-height);
 
         &--offset-v {
           @include use-var(top, header-height);
+
+          @include utils.rtl {
+            right: utils.scrollbar-size();
+          }
         }
 
         @include media-queries.media($navigation-breakpoint) {

package/dist/layout/layoutNavStyles.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/layout/layoutNavStyles.ts"],"sourcesContent":["import { cnb } from \"cnbuilder\";\nimport { bem } from \"../utils/bem.js\";\n\nconst styles = bem(\"rmd-layout-nav\");\n\n/**\n * @since 6.0.0\n */\nexport interface LayoutNavClassNameOptions {\n  className?: string;\n\n  /**\n   * Set this to `true` if the nav should appear below the fixed app bar.\n   *\n   * @defaultValue `false`\n   */\n  appBarOffset?: boolean;\n}\n\n/**\n * @since 6.0.0\n */\nexport function layoutNav(options: LayoutNavClassNameOptions = {}): string {\n  const { className, appBarOffset } = options;\n\n  return cnb(styles({ \"offset-v\": appBarOffset }), className);\n}\n"],"names":["cnb","bem","styles","layoutNav","options","className","appBarOffset"],"mappings":"AAAA,SAASA,GAAG,QAAQ,YAAY;AAChC,SAASC,GAAG,QAAQ,kBAAkB;AAEtC,MAAMC,SAASD,IAAI;AAgBnB;;CAEC,GACD,OAAO,SAASE,UAAUC,UAAqC,CAAC,CAAC;IAC/D,MAAM,EAAEC,SAAS,EAAEC,YAAY,EAAE,GAAGF;IAEpC,OAAOJ,IAAIE,OAAO;QAAE,YAAYI;IAAa,IAAID;AACnD"}
+{"version":3,"sources":["../../src/layout/layoutNavStyles.ts"],"sourcesContent":["import { cnb } from \"cnbuilder\";\n\nimport { bem } from \"../utils/bem.js\";\n\nconst styles = bem(\"rmd-layout-nav\");\n\n/**\n * @since 6.0.0\n */\nexport interface LayoutNavClassNameOptions {\n  className?: string;\n\n  /**\n   * Set this to `true` if the nav should appear below the fixed app bar.\n   *\n   * @defaultValue `false`\n   */\n  appBarOffset?: boolean;\n}\n\n/**\n * @since 6.0.0\n */\nexport function layoutNav(options: LayoutNavClassNameOptions = {}): string {\n  const { className, appBarOffset } = options;\n\n  return cnb(styles({ \"offset-v\": appBarOffset }), className);\n}\n"],"names":["cnb","bem","styles","layoutNav","options","className","appBarOffset"],"mappings":"AAAA,SAASA,GAAG,QAAQ,YAAY;AAEhC,SAASC,GAAG,QAAQ,kBAAkB;AAEtC,MAAMC,SAASD,IAAI;AAgBnB;;CAEC,GACD,OAAO,SAASE,UAAUC,UAAqC,CAAC,CAAC;IAC/D,MAAM,EAAEC,SAAS,EAAEC,YAAY,EAAE,GAAGF;IAEpC,OAAOJ,IAAIE,OAAO;QAAE,YAAYI;IAAa,IAAID;AACnD"}

package/dist/layout/layoutWindowSplitterStyles.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/layout/layoutWindowSplitterStyles.ts"],"sourcesContent":["import { cnb } from \"cnbuilder\";\nimport { bem } from \"../utils/bem.js\";\n\nconst styles = bem(\"rmd-layout-splitter\");\n\n/**\n * @since 6.0.0\n */\nexport interface LayoutWindowSplitterClassNameOptions {\n  className?: string;\n\n  /**\n   * Set this to `true` if the window splitter should stop below the fixed app\n   * bar.\n   *\n   * @defaultValue `false`\n   */\n  appBarOffset?: boolean;\n\n  /**\n   * Set this to `true` if the window splitter should no longer automatically be\n   * hidden on for any viewport below the `$layout-navigation-breakpoint`\n   * (default phone).\n   *\n   * @defaultValue `false`\n   */\n  disableResponsive?: boolean;\n}\n\n/**\n * @since 6.0.0\n */\nexport function layoutWindowSplitter(\n  options: LayoutWindowSplitterClassNameOptions = {}\n): string {\n  const { className, appBarOffset, disableResponsive } = options;\n\n  return cnb(\n    styles({\n      \"offset-v\": appBarOffset,\n      responsive: !disableResponsive,\n    }),\n    className\n  );\n}\n"],"names":["cnb","bem","styles","layoutWindowSplitter","options","className","appBarOffset","disableResponsive","responsive"],"mappings":"AAAA,SAASA,GAAG,QAAQ,YAAY;AAChC,SAASC,GAAG,QAAQ,kBAAkB;AAEtC,MAAMC,SAASD,IAAI;AA0BnB;;CAEC,GACD,OAAO,SAASE,qBACdC,UAAgD,CAAC,CAAC;IAElD,MAAM,EAAEC,SAAS,EAAEC,YAAY,EAAEC,iBAAiB,EAAE,GAAGH;IAEvD,OAAOJ,IACLE,OAAO;QACL,YAAYI;QACZE,YAAY,CAACD;IACf,IACAF;AAEJ"}
+{"version":3,"sources":["../../src/layout/layoutWindowSplitterStyles.ts"],"sourcesContent":["import { cnb } from \"cnbuilder\";\n\nimport { bem } from \"../utils/bem.js\";\n\nconst styles = bem(\"rmd-layout-splitter\");\n\n/**\n * @since 6.0.0\n */\nexport interface LayoutWindowSplitterClassNameOptions {\n  className?: string;\n\n  /**\n   * Set this to `true` if the window splitter should stop below the fixed app\n   * bar.\n   *\n   * @defaultValue `false`\n   */\n  appBarOffset?: boolean;\n\n  /**\n   * Set this to `true` if the window splitter should no longer automatically be\n   * hidden on for any viewport below the `$layout-navigation-breakpoint`\n   * (default phone).\n   *\n   * @defaultValue `false`\n   */\n  disableResponsive?: boolean;\n}\n\n/**\n * @since 6.0.0\n */\nexport function layoutWindowSplitter(\n  options: LayoutWindowSplitterClassNameOptions = {}\n): string {\n  const { className, appBarOffset, disableResponsive } = options;\n\n  return cnb(\n    styles({\n      \"offset-v\": appBarOffset,\n      responsive: !disableResponsive,\n    }),\n    className\n  );\n}\n"],"names":["cnb","bem","styles","layoutWindowSplitter","options","className","appBarOffset","disableResponsive","responsive"],"mappings":"AAAA,SAASA,GAAG,QAAQ,YAAY;AAEhC,SAASC,GAAG,QAAQ,kBAAkB;AAEtC,MAAMC,SAASD,IAAI;AA0BnB;;CAEC,GACD,OAAO,SAASE,qBACdC,UAAgD,CAAC,CAAC;IAElD,MAAM,EAAEC,SAAS,EAAEC,YAAY,EAAEC,iBAAiB,EAAE,GAAGH;IAEvD,OAAOJ,IACLE,OAAO;QACL,YAAYI;QACZE,YAAY,CAACD;IACf,IACAF;AAEJ"}

package/dist/layout/mainStyles.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/layout/mainStyles.ts"],"sourcesContent":["import { cnb } from \"cnbuilder\";\nimport { bem } from \"../utils/bem.js\";\n\nconst styles = bem(\"rmd-layout-main\");\n\n/**\n * @since 6.0.0\n */\nexport interface MainClassNameOptions {\n  className?: string;\n\n  /**\n   * Set this to `true` to apply `margin-left` equal to the current navigation\n   * width. If you want this value to animate, use the `useMainClassName` hook\n   * instead.\n   *\n   * @defaultValue `false`\n   */\n  navOffset?: boolean;\n\n  /**\n   * Set this to `true` to apply `padding-top` equal to the height of the main\n   * app bar so that content is not covered.\n   *\n   * @see {@link useLayoutAppBarHeight}\n   * @defaultValue `false`\n   */\n  appBarOffset?: boolean;\n}\n\n/**\n * @since 6.0.0\n */\nexport function main(options: MainClassNameOptions = {}): string {\n  const { navOffset, appBarOffset, className } = options;\n\n  return cnb(\n    styles({\n      \"offset-v\": appBarOffset,\n    }),\n    navOffset && \"rmd-layout-h--active\",\n    className\n  );\n}\n"],"names":["cnb","bem","styles","main","options","navOffset","appBarOffset","className"],"mappings":"AAAA,SAASA,GAAG,QAAQ,YAAY;AAChC,SAASC,GAAG,QAAQ,kBAAkB;AAEtC,MAAMC,SAASD,IAAI;AA2BnB;;CAEC,GACD,OAAO,SAASE,KAAKC,UAAgC,CAAC,CAAC;IACrD,MAAM,EAAEC,SAAS,EAAEC,YAAY,EAAEC,SAAS,EAAE,GAAGH;IAE/C,OAAOJ,IACLE,OAAO;QACL,YAAYI;IACd,IACAD,aAAa,wBACbE;AAEJ"}
+{"version":3,"sources":["../../src/layout/mainStyles.ts"],"sourcesContent":["import { cnb } from \"cnbuilder\";\n\nimport { bem } from \"../utils/bem.js\";\n\nconst styles = bem(\"rmd-layout-main\");\n\n/**\n * @since 6.0.0\n */\nexport interface MainClassNameOptions {\n  className?: string;\n\n  /**\n   * Set this to `true` to apply `margin-left` equal to the current navigation\n   * width. If you want this value to animate, use the `useMainClassName` hook\n   * instead.\n   *\n   * @defaultValue `false`\n   */\n  navOffset?: boolean;\n\n  /**\n   * Set this to `true` to apply `padding-top` equal to the height of the main\n   * app bar so that content is not covered.\n   *\n   * @see {@link useLayoutAppBarHeight}\n   * @defaultValue `false`\n   */\n  appBarOffset?: boolean;\n}\n\n/**\n * @since 6.0.0\n */\nexport function main(options: MainClassNameOptions = {}): string {\n  const { navOffset, appBarOffset, className } = options;\n\n  return cnb(\n    styles({\n      \"offset-v\": appBarOffset,\n    }),\n    navOffset && \"rmd-layout-h--active\",\n    className\n  );\n}\n"],"names":["cnb","bem","styles","main","options","navOffset","appBarOffset","className"],"mappings":"AAAA,SAASA,GAAG,QAAQ,YAAY;AAEhC,SAASC,GAAG,QAAQ,kBAAkB;AAEtC,MAAMC,SAASD,IAAI;AA2BnB;;CAEC,GACD,OAAO,SAASE,KAAKC,UAAgC,CAAC,CAAC;IACrD,MAAM,EAAEC,SAAS,EAAEC,YAAY,EAAEC,SAAS,EAAE,GAAGH;IAE/C,OAAOJ,IACLE,OAAO;QACL,YAAYI;IACd,IACAD,aAAa,wBACbE;AAEJ"}

package/dist/layout/useExpandableLayout.d.ts

@@ -71,16 +71,14 @@ export interface ExpandableLayoutImplementation extends TemporaryLayoutImplement
 /**
  * @example Main Usage
  * ```tsx
- * import {
- *   AppBarTitle,
- *   Button,
- *   LayoutAppBar,
- *   LayoutNav,
- *   Main,
- *   Sheet,
- *   useExpandableLayout,
- * } from "@react-md/core";
- * import type { ReactElement, ReactNode } from "react";
+ * import { AppBarTitle } from "@react-md/core/app-bar/AppBarTitle";
+ * import { Button } from "@react-md/core/button/Button";
+ * import { LayoutAppBar } from "@react-md/core/layout/LayoutAppBar";
+ * import { LayoutNav } from "@react-md/core/layout/LayoutNav";
+ * import { Main } from "@react-md/core/layout/Main";
+ * import { useExpandableLayout } from "@react-md/core/layout/useExpandableLayout";
+ * import { Sheet } from "@react-md/core/sheet/Sheet";
+ * import { type ReactElement, type ReactNode } from "react";
  *
  * import { CustomNavigation } from "./CustomNavigation";
  *
@@ -109,7 +107,7 @@ export interface ExpandableLayoutImplementation extends TemporaryLayoutImplement
  *     windowSplitterProps,
  *   } = useExpandableLayout({ pathname });
  *
- *   return {
+ *   return (
  *     <>
  *       <LayoutAppBar {...appBarProps}>
  *         <Button {...navToggleProps} />
@@ -125,7 +123,7 @@ export interface ExpandableLayoutImplementation extends TemporaryLayoutImplement
  *       )}
  *       <Main {...mainProps}>{children}</Main>
  *     </>
- *   }
+ *   );
  * }
  * ```
  *
@@ -146,7 +144,7 @@ export interface ExpandableLayoutImplementation extends TemporaryLayoutImplement
  *     windowSplitterProps,
  *   } = useExpandableLayout({ pathname });
  *
- *   return {
+ *   return (
  *     <>
  *       <LayoutAppBar {...appBarProps}>
  *         <Button {...navToggleProps} />
@@ -167,7 +165,7 @@ export interface ExpandableLayoutImplementation extends TemporaryLayoutImplement
  *       )}
  *       <Main {...mainProps}>{children}</Main>
  *     </>
- *   }
+ *   );
  * ```
  *
  * @since 6.0.0

package/dist/layout/useExpandableLayout.js

@@ -1,23 +1,21 @@
 "use client";
 import { cnb } from "cnbuilder";
+import { useSsr } from "../SsrProvider.js";
 import { useAppSize } from "../media-queries/AppSizeProvider.js";
 import { useToggle } from "../useToggle.js";
 import { useHorizontalLayoutTransition } from "./useHorizontalLayoutTransition.js";
-import { useSsr } from "../SsrProvider.js";
 import { useTemporaryLayout } from "./useTemporaryLayout.js";
 /**
  * @example Main Usage
  * ```tsx
- * import {
- *   AppBarTitle,
- *   Button,
- *   LayoutAppBar,
- *   LayoutNav,
- *   Main,
- *   Sheet,
- *   useExpandableLayout,
- * } from "@react-md/core";
- * import type { ReactElement, ReactNode } from "react";
+ * import { AppBarTitle } from "@react-md/core/app-bar/AppBarTitle";
+ * import { Button } from "@react-md/core/button/Button";
+ * import { LayoutAppBar } from "@react-md/core/layout/LayoutAppBar";
+ * import { LayoutNav } from "@react-md/core/layout/LayoutNav";
+ * import { Main } from "@react-md/core/layout/Main";
+ * import { useExpandableLayout } from "@react-md/core/layout/useExpandableLayout";
+ * import { Sheet } from "@react-md/core/sheet/Sheet";
+ * import { type ReactElement, type ReactNode } from "react";
  *
  * import { CustomNavigation } from "./CustomNavigation";
  *
@@ -46,7 +44,7 @@ import { useTemporaryLayout } from "./useTemporaryLayout.js";
  *     windowSplitterProps,
  *   } = useExpandableLayout({ pathname });
  *
- *   return {
+ *   return (
  *     <>
  *       <LayoutAppBar {...appBarProps}>
  *         <Button {...navToggleProps} />
@@ -62,7 +60,7 @@ import { useTemporaryLayout } from "./useTemporaryLayout.js";
  *       )}
  *       <Main {...mainProps}>{children}</Main>
  *     </>
- *   }
+ *   );
  * }
  * ```
  *
@@ -83,7 +81,7 @@ import { useTemporaryLayout } from "./useTemporaryLayout.js";
  *     windowSplitterProps,
  *   } = useExpandableLayout({ pathname });
  *
- *   return {
+ *   return (
  *     <>
  *       <LayoutAppBar {...appBarProps}>
  *         <Button {...navToggleProps} />
@@ -104,7 +102,7 @@ import { useTemporaryLayout } from "./useTemporaryLayout.js";
  *       )}
  *       <Main {...mainProps}>{children}</Main>
  *     </>
- *   }
+ *   );
  * ```
  *
  * @since 6.0.0

package/dist/layout/useExpandableLayout.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/layout/useExpandableLayout.ts"],"sourcesContent":["\"use client\";\nimport { cnb } from \"cnbuilder\";\nimport { useAppSize } from \"../media-queries/AppSizeProvider.js\";\nimport { type CSSTransitionElementProps } from \"../transition/types.js\";\nimport { type CssPosition, type UseStateInitializer } from \"../types.js\";\nimport { useToggle } from \"../useToggle.js\";\nimport { type LayoutNavProps } from \"./LayoutNav.js\";\nimport {\n  useHorizontalLayoutTransition,\n  type HorizontalLayoutTransitionOptions,\n} from \"./useHorizontalLayoutTransition.js\";\nimport { useSsr } from \"../SsrProvider.js\";\n// eslint-disable-next-line @typescript-eslint/no-unused-vars\nimport { type useResizableLayout } from \"./useResizableLayout.js\";\nimport {\n  useTemporaryLayout,\n  type ProvidedLayoutNavToggleProps,\n  type ProvidedTemporaryLayoutAppBarProps,\n  type ProvidedTemporaryLayoutMainProps,\n  type TemporaryLayoutImplementation,\n  type TemporaryLayoutOptions,\n} from \"./useTemporaryLayout.js\";\n\n/**\n * @since 6.0.0\n */\nexport interface ExpandableLayoutOptions extends TemporaryLayoutOptions {\n  /** @defaultValue `\"fixed\"` */\n  appBarPosition?: CssPosition;\n\n  /** @defaultValue `false` */\n  defaultExpanded?: UseStateInitializer<boolean>;\n\n  /**\n   * Set this to `true` if the expandable navigation should be the full height\n   * of the screen. This will also update the app bar so that it is not covered\n   * by the navigation. The default behavior is to place the navigation below\n   * the fixed header.\n   *\n   * Set this to `\"static\"` to make the navigation span the full height of the\n   * screen and hide the button until the screen shrinks to the temporary\n   * layout type.\n   *\n   * @defaultValue `false`\n   */\n  fullHeightNav?: boolean | \"static\";\n\n  /** @see {@link HorizontalLayoutTransitionOptions} */\n  transitionProps?: Omit<HorizontalLayoutTransitionOptions, \"transitionIn\">;\n\n  /**\n   * Set this to `\"desktop\"` if you want to use the temporary navigation until\n   * the viewport is at least desktop width instead of tablet.\n   *\n   * @defaultValue `\"tablet\"`\n   */\n  temporaryUntil?: \"tablet\" | \"desktop\";\n}\n\n/**\n * @since 6.0.0\n */\nexport interface ProvidedLayoutMainProps\n  extends ProvidedTemporaryLayoutMainProps,\n    CSSTransitionElementProps<HTMLElement> {}\n\n/**\n * @since 6.0.0\n */\nexport type ProvidedLayoutNavProps = Pick<\n  LayoutNavProps,\n  \"expanded\" | \"appBarOffset\"\n>;\n\n/**\n * @since 6.0.0\n */\nexport type ProvidedLayoutAppBarProps = ProvidedTemporaryLayoutAppBarProps &\n  Partial<CSSTransitionElementProps<HTMLElement>>;\n\n/**\n * @since 6.0.0\n */\nexport interface ProvidedExpandableLayoutNavToggleProps\n  extends ProvidedLayoutNavToggleProps {\n  className: string;\n}\n\n/**\n * @since 6.0.0\n */\nexport interface ExpandableLayoutImplementation\n  extends TemporaryLayoutImplementation {\n  temporary: boolean;\n  persistent: boolean;\n  expanded: boolean;\n  expandNavigation: () => void;\n  collapseNavigation: () => void;\n  toggleNavigation: () => void;\n  appBarProps: ProvidedLayoutAppBarProps;\n  mainProps: ProvidedLayoutMainProps;\n  navToggleProps: ProvidedExpandableLayoutNavToggleProps;\n  expandableNavProps: ProvidedLayoutNavProps;\n}\n\n/**\n * @example Main Usage\n * ```tsx\n * import {\n *   AppBarTitle,\n *   Button,\n *   LayoutAppBar,\n *   LayoutNav,\n *   Main,\n *   Sheet,\n *   useExpandableLayout,\n * } from \"@react-md/core\";\n * import type { ReactElement, ReactNode } from \"react\";\n *\n * import { CustomNavigation } from \"./CustomNavigation\";\n *\n * export interface LayoutProps {\n *   children: ReactNode;\n * }\n *\n * export function Layout(props: LayoutProps): ReactElement {\n *   const { children } = props;\n *\n *   // choose whichever one for your app\n *   // nextjs app dir\n *   const pathname = usePathname();\n *   // nextjs pages\n *   const { pathname } = useRouter();\n *   // react router\n *   const { pathname } = useHistory();\n *\n *   const {\n *     temporary,\n *     appBarProps,\n *     expandableNavProps,\n *     mainProps,\n *     navToggleProps,\n *     temporaryNavProps,\n *     windowSplitterProps,\n *   } = useExpandableLayout({ pathname });\n *\n *   return {\n *     <>\n *       <LayoutAppBar {...appBarProps}>\n *         <Button {...navToggleProps} />\n *         <AppBarTitle>Hello, world!</AppBarTitle>\n *       </LayoutAppBar>\n *       <LayoutNav {...expandableNavProps}>\n *         <CustomNavigation />\n *       </LayoutNav>\n *       {temporary && (\n *         <Sheet {...temporaryNavProps}>\n *           <CustomNavigation />\n *         </Sheet>\n *       )}\n *       <Main {...mainProps}>{children}</Main>\n *     </>\n *   }\n * }\n * ```\n *\n * If you have a large navigation panel, you can conditionally render the\n * `LayoutNav` with the `persistent` boolean returned by the hook which will\n * ensure that the DOM has rehydrated before unmounting to prevent SSR errors.\n *\n * @example Safely Conditionally Rendering\n * ```diff\n *   const {\n *     temporary,\n * +   persistent,\n *     appBarProps,\n *     expandableNavProps,\n *     mainProps,\n *     navToggleProps,\n *     temporaryNavProps,\n *     windowSplitterProps,\n *   } = useExpandableLayout({ pathname });\n *\n *   return {\n *     <>\n *       <LayoutAppBar {...appBarProps}>\n *         <Button {...navToggleProps} />\n *         <AppBarTitle>Hello, world!</AppBarTitle>\n *       </LayoutAppBar>\n * -     <LayoutNav {...expandableNavProps}>\n * -       <CustomNavigation />\n * -     </LayoutNav>\n * +     {persistent && (\n * +       <LayoutNav {...expandableNavProps}>\n * +         <CustomNavigation />\n * +       </LayoutNav>\n * +     )}\n *       {temporary && (\n *         <Sheet {...temporaryNavProps}>\n *           <CustomNavigation />\n *         </Sheet>\n *       )}\n *       <Main {...mainProps}>{children}</Main>\n *     </>\n *   }\n * ```\n *\n * @since 6.0.0\n * @see {@link useResizableLayout}\n */\nexport function useExpandableLayout(\n  options: ExpandableLayoutOptions\n): ExpandableLayoutImplementation {\n  const {\n    fullHeightNav = false,\n    temporaryUntil = \"tablet\",\n    transitionProps,\n    defaultExpanded = fullHeightNav === \"static\",\n    ...temporaryOptions\n  } = options;\n\n  const ssr = useSsr();\n  const {\n    appBarProps,\n    mainProps,\n    navToggleProps,\n    temporaryNavProps,\n    hideTemporaryNav,\n    showTemporaryNav,\n    visible,\n  } = useTemporaryLayout(temporaryOptions);\n\n  const {\n    toggled: expanded,\n    enable: expandNavigation,\n    disable: collapseNavigation,\n    toggle: toggleNavigation,\n  } = useToggle(defaultExpanded);\n  const { elementProps } = useHorizontalLayoutTransition({\n    ...transitionProps,\n    transitionIn: expanded,\n  });\n  const { isPhone, isDesktop } = useAppSize();\n  const temporary = isPhone || (temporaryUntil === \"desktop\" && !isDesktop);\n\n  return {\n    visible,\n    temporary,\n    persistent: ssr || !temporary,\n    hideTemporaryNav,\n    showTemporaryNav,\n    expanded,\n    expandNavigation,\n    collapseNavigation,\n    toggleNavigation,\n    appBarProps: {\n      ...appBarProps,\n      ...(fullHeightNav ? elementProps : {}),\n    },\n    mainProps: {\n      ...mainProps,\n      ...elementProps,\n    },\n    temporaryNavProps,\n    expandableNavProps: {\n      expanded,\n      appBarOffset: !fullHeightNav,\n    },\n    navToggleProps: {\n      ...navToggleProps,\n      onClick() {\n        if (temporary) {\n          showTemporaryNav();\n        } else {\n          toggleNavigation();\n        }\n      },\n      className: cnb(fullHeightNav === \"static\" && \"rmd-layout-nav-toggle\"),\n    },\n  };\n}\n"],"names":["cnb","useAppSize","useToggle","useHorizontalLayoutTransition","useSsr","useTemporaryLayout","useExpandableLayout","options","fullHeightNav","temporaryUntil","transitionProps","defaultExpanded","temporaryOptions","ssr","appBarProps","mainProps","navToggleProps","temporaryNavProps","hideTemporaryNav","showTemporaryNav","visible","toggled","expanded","enable","expandNavigation","disable","collapseNavigation","toggle","toggleNavigation","elementProps","transitionIn","isPhone","isDesktop","temporary","persistent","expandableNavProps","appBarOffset","onClick","className"],"mappings":"AAAA;AACA,SAASA,GAAG,QAAQ,YAAY;AAChC,SAASC,UAAU,QAAQ,sCAAsC;AAGjE,SAASC,SAAS,QAAQ,kBAAkB;AAE5C,SACEC,6BAA6B,QAExB,qCAAqC;AAC5C,SAASC,MAAM,QAAQ,oBAAoB;AAG3C,SACEC,kBAAkB,QAMb,0BAA0B;AAoFjC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAwGC,GACD,OAAO,SAASC,oBACdC,OAAgC;IAEhC,MAAM,EACJC,gBAAgB,KAAK,EACrBC,iBAAiB,QAAQ,EACzBC,eAAe,EACfC,kBAAkBH,kBAAkB,QAAQ,EAC5C,GAAGI,kBACJ,GAAGL;IAEJ,MAAMM,MAAMT;IACZ,MAAM,EACJU,WAAW,EACXC,SAAS,EACTC,cAAc,EACdC,iBAAiB,EACjBC,gBAAgB,EAChBC,gBAAgB,EAChBC,OAAO,EACR,GAAGf,mBAAmBO;IAEvB,MAAM,EACJS,SAASC,QAAQ,EACjBC,QAAQC,gBAAgB,EACxBC,SAASC,kBAAkB,EAC3BC,QAAQC,gBAAgB,EACzB,GAAG1B,UAAUS;IACd,MAAM,EAAEkB,YAAY,EAAE,GAAG1B,8BAA8B;QACrD,GAAGO,eAAe;QAClBoB,cAAcR;IAChB;IACA,MAAM,EAAES,OAAO,EAAEC,SAAS,EAAE,GAAG/B;IAC/B,MAAMgC,YAAYF,WAAYtB,mBAAmB,aAAa,CAACuB;IAE/D,OAAO;QACLZ;QACAa;QACAC,YAAYrB,OAAO,CAACoB;QACpBf;QACAC;QACAG;QACAE;QACAE;QACAE;QACAd,aAAa;YACX,GAAGA,WAAW;YACd,GAAIN,gBAAgBqB,eAAe,CAAC,CAAC;QACvC;QACAd,WAAW;YACT,GAAGA,SAAS;YACZ,GAAGc,YAAY;QACjB;QACAZ;QACAkB,oBAAoB;YAClBb;YACAc,cAAc,CAAC5B;QACjB;QACAQ,gBAAgB;YACd,GAAGA,cAAc;YACjBqB;gBACE,IAAIJ,WAAW;oBACbd;gBACF,OAAO;oBACLS;gBACF;YACF;YACAU,WAAWtC,IAAIQ,kBAAkB,YAAY;QAC/C;IACF;AACF"}
+{"version":3,"sources":["../../src/layout/useExpandableLayout.ts"],"sourcesContent":["\"use client\";\n\nimport { cnb } from \"cnbuilder\";\n\nimport { useSsr } from \"../SsrProvider.js\";\nimport { useAppSize } from \"../media-queries/AppSizeProvider.js\";\nimport { type CSSTransitionElementProps } from \"../transition/types.js\";\nimport { type CssPosition, type UseStateInitializer } from \"../types.js\";\nimport { useToggle } from \"../useToggle.js\";\nimport { type LayoutNavProps } from \"./LayoutNav.js\";\nimport {\n  type HorizontalLayoutTransitionOptions,\n  useHorizontalLayoutTransition,\n} from \"./useHorizontalLayoutTransition.js\";\n// eslint-disable-next-line @typescript-eslint/no-unused-vars\nimport { type useResizableLayout } from \"./useResizableLayout.js\";\nimport {\n  type ProvidedLayoutNavToggleProps,\n  type ProvidedTemporaryLayoutAppBarProps,\n  type ProvidedTemporaryLayoutMainProps,\n  type TemporaryLayoutImplementation,\n  type TemporaryLayoutOptions,\n  useTemporaryLayout,\n} from \"./useTemporaryLayout.js\";\n\n/**\n * @since 6.0.0\n */\nexport interface ExpandableLayoutOptions extends TemporaryLayoutOptions {\n  /** @defaultValue `\"fixed\"` */\n  appBarPosition?: CssPosition;\n\n  /** @defaultValue `false` */\n  defaultExpanded?: UseStateInitializer<boolean>;\n\n  /**\n   * Set this to `true` if the expandable navigation should be the full height\n   * of the screen. This will also update the app bar so that it is not covered\n   * by the navigation. The default behavior is to place the navigation below\n   * the fixed header.\n   *\n   * Set this to `\"static\"` to make the navigation span the full height of the\n   * screen and hide the button until the screen shrinks to the temporary\n   * layout type.\n   *\n   * @defaultValue `false`\n   */\n  fullHeightNav?: boolean | \"static\";\n\n  /** @see {@link HorizontalLayoutTransitionOptions} */\n  transitionProps?: Omit<HorizontalLayoutTransitionOptions, \"transitionIn\">;\n\n  /**\n   * Set this to `\"desktop\"` if you want to use the temporary navigation until\n   * the viewport is at least desktop width instead of tablet.\n   *\n   * @defaultValue `\"tablet\"`\n   */\n  temporaryUntil?: \"tablet\" | \"desktop\";\n}\n\n/**\n * @since 6.0.0\n */\nexport interface ProvidedLayoutMainProps\n  extends ProvidedTemporaryLayoutMainProps,\n    CSSTransitionElementProps<HTMLElement> {}\n\n/**\n * @since 6.0.0\n */\nexport type ProvidedLayoutNavProps = Pick<\n  LayoutNavProps,\n  \"expanded\" | \"appBarOffset\"\n>;\n\n/**\n * @since 6.0.0\n */\nexport type ProvidedLayoutAppBarProps = ProvidedTemporaryLayoutAppBarProps &\n  Partial<CSSTransitionElementProps<HTMLElement>>;\n\n/**\n * @since 6.0.0\n */\nexport interface ProvidedExpandableLayoutNavToggleProps\n  extends ProvidedLayoutNavToggleProps {\n  className: string;\n}\n\n/**\n * @since 6.0.0\n */\nexport interface ExpandableLayoutImplementation\n  extends TemporaryLayoutImplementation {\n  temporary: boolean;\n  persistent: boolean;\n  expanded: boolean;\n  expandNavigation: () => void;\n  collapseNavigation: () => void;\n  toggleNavigation: () => void;\n  appBarProps: ProvidedLayoutAppBarProps;\n  mainProps: ProvidedLayoutMainProps;\n  navToggleProps: ProvidedExpandableLayoutNavToggleProps;\n  expandableNavProps: ProvidedLayoutNavProps;\n}\n\n/**\n * @example Main Usage\n * ```tsx\n * import { AppBarTitle } from \"@react-md/core/app-bar/AppBarTitle\";\n * import { Button } from \"@react-md/core/button/Button\";\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 { useExpandableLayout } from \"@react-md/core/layout/useExpandableLayout\";\n * import { Sheet } from \"@react-md/core/sheet/Sheet\";\n * import { type ReactElement, type ReactNode } from \"react\";\n *\n * import { CustomNavigation } from \"./CustomNavigation\";\n *\n * export interface LayoutProps {\n *   children: ReactNode;\n * }\n *\n * export function Layout(props: LayoutProps): ReactElement {\n *   const { children } = props;\n *\n *   // choose whichever one for your app\n *   // nextjs app dir\n *   const pathname = usePathname();\n *   // nextjs pages\n *   const { pathname } = useRouter();\n *   // react router\n *   const { pathname } = useHistory();\n *\n *   const {\n *     temporary,\n *     appBarProps,\n *     expandableNavProps,\n *     mainProps,\n *     navToggleProps,\n *     temporaryNavProps,\n *     windowSplitterProps,\n *   } = useExpandableLayout({ pathname });\n *\n *   return (\n *     <>\n *       <LayoutAppBar {...appBarProps}>\n *         <Button {...navToggleProps} />\n *         <AppBarTitle>Hello, world!</AppBarTitle>\n *       </LayoutAppBar>\n *       <LayoutNav {...expandableNavProps}>\n *         <CustomNavigation />\n *       </LayoutNav>\n *       {temporary && (\n *         <Sheet {...temporaryNavProps}>\n *           <CustomNavigation />\n *         </Sheet>\n *       )}\n *       <Main {...mainProps}>{children}</Main>\n *     </>\n *   );\n * }\n * ```\n *\n * If you have a large navigation panel, you can conditionally render the\n * `LayoutNav` with the `persistent` boolean returned by the hook which will\n * ensure that the DOM has rehydrated before unmounting to prevent SSR errors.\n *\n * @example Safely Conditionally Rendering\n * ```diff\n *   const {\n *     temporary,\n * +   persistent,\n *     appBarProps,\n *     expandableNavProps,\n *     mainProps,\n *     navToggleProps,\n *     temporaryNavProps,\n *     windowSplitterProps,\n *   } = useExpandableLayout({ pathname });\n *\n *   return (\n *     <>\n *       <LayoutAppBar {...appBarProps}>\n *         <Button {...navToggleProps} />\n *         <AppBarTitle>Hello, world!</AppBarTitle>\n *       </LayoutAppBar>\n * -     <LayoutNav {...expandableNavProps}>\n * -       <CustomNavigation />\n * -     </LayoutNav>\n * +     {persistent && (\n * +       <LayoutNav {...expandableNavProps}>\n * +         <CustomNavigation />\n * +       </LayoutNav>\n * +     )}\n *       {temporary && (\n *         <Sheet {...temporaryNavProps}>\n *           <CustomNavigation />\n *         </Sheet>\n *       )}\n *       <Main {...mainProps}>{children}</Main>\n *     </>\n *   );\n * ```\n *\n * @since 6.0.0\n * @see {@link useResizableLayout}\n */\nexport function useExpandableLayout(\n  options: ExpandableLayoutOptions\n): ExpandableLayoutImplementation {\n  const {\n    fullHeightNav = false,\n    temporaryUntil = \"tablet\",\n    transitionProps,\n    defaultExpanded = fullHeightNav === \"static\",\n    ...temporaryOptions\n  } = options;\n\n  const ssr = useSsr();\n  const {\n    appBarProps,\n    mainProps,\n    navToggleProps,\n    temporaryNavProps,\n    hideTemporaryNav,\n    showTemporaryNav,\n    visible,\n  } = useTemporaryLayout(temporaryOptions);\n\n  const {\n    toggled: expanded,\n    enable: expandNavigation,\n    disable: collapseNavigation,\n    toggle: toggleNavigation,\n  } = useToggle(defaultExpanded);\n  const { elementProps } = useHorizontalLayoutTransition({\n    ...transitionProps,\n    transitionIn: expanded,\n  });\n  const { isPhone, isDesktop } = useAppSize();\n  const temporary = isPhone || (temporaryUntil === \"desktop\" && !isDesktop);\n\n  return {\n    visible,\n    temporary,\n    persistent: ssr || !temporary,\n    hideTemporaryNav,\n    showTemporaryNav,\n    expanded,\n    expandNavigation,\n    collapseNavigation,\n    toggleNavigation,\n    appBarProps: {\n      ...appBarProps,\n      ...(fullHeightNav ? elementProps : {}),\n    },\n    mainProps: {\n      ...mainProps,\n      ...elementProps,\n    },\n    temporaryNavProps,\n    expandableNavProps: {\n      expanded,\n      appBarOffset: !fullHeightNav,\n    },\n    navToggleProps: {\n      ...navToggleProps,\n      onClick() {\n        if (temporary) {\n          showTemporaryNav();\n        } else {\n          toggleNavigation();\n        }\n      },\n      className: cnb(fullHeightNav === \"static\" && \"rmd-layout-nav-toggle\"),\n    },\n  };\n}\n"],"names":["cnb","useSsr","useAppSize","useToggle","useHorizontalLayoutTransition","useTemporaryLayout","useExpandableLayout","options","fullHeightNav","temporaryUntil","transitionProps","defaultExpanded","temporaryOptions","ssr","appBarProps","mainProps","navToggleProps","temporaryNavProps","hideTemporaryNav","showTemporaryNav","visible","toggled","expanded","enable","expandNavigation","disable","collapseNavigation","toggle","toggleNavigation","elementProps","transitionIn","isPhone","isDesktop","temporary","persistent","expandableNavProps","appBarOffset","onClick","className"],"mappings":"AAAA;AAEA,SAASA,GAAG,QAAQ,YAAY;AAEhC,SAASC,MAAM,QAAQ,oBAAoB;AAC3C,SAASC,UAAU,QAAQ,sCAAsC;AAGjE,SAASC,SAAS,QAAQ,kBAAkB;AAE5C,SAEEC,6BAA6B,QACxB,qCAAqC;AAG5C,SAMEC,kBAAkB,QACb,0BAA0B;AAoFjC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAsGC,GACD,OAAO,SAASC,oBACdC,OAAgC;IAEhC,MAAM,EACJC,gBAAgB,KAAK,EACrBC,iBAAiB,QAAQ,EACzBC,eAAe,EACfC,kBAAkBH,kBAAkB,QAAQ,EAC5C,GAAGI,kBACJ,GAAGL;IAEJ,MAAMM,MAAMZ;IACZ,MAAM,EACJa,WAAW,EACXC,SAAS,EACTC,cAAc,EACdC,iBAAiB,EACjBC,gBAAgB,EAChBC,gBAAgB,EAChBC,OAAO,EACR,GAAGf,mBAAmBO;IAEvB,MAAM,EACJS,SAASC,QAAQ,EACjBC,QAAQC,gBAAgB,EACxBC,SAASC,kBAAkB,EAC3BC,QAAQC,gBAAgB,EACzB,GAAGzB,UAAUQ;IACd,MAAM,EAAEkB,YAAY,EAAE,GAAGzB,8BAA8B;QACrD,GAAGM,eAAe;QAClBoB,cAAcR;IAChB;IACA,MAAM,EAAES,OAAO,EAAEC,SAAS,EAAE,GAAG9B;IAC/B,MAAM+B,YAAYF,WAAYtB,mBAAmB,aAAa,CAACuB;IAE/D,OAAO;QACLZ;QACAa;QACAC,YAAYrB,OAAO,CAACoB;QACpBf;QACAC;QACAG;QACAE;QACAE;QACAE;QACAd,aAAa;YACX,GAAGA,WAAW;YACd,GAAIN,gBAAgBqB,eAAe,CAAC,CAAC;QACvC;QACAd,WAAW;YACT,GAAGA,SAAS;YACZ,GAAGc,YAAY;QACjB;QACAZ;QACAkB,oBAAoB;YAClBb;YACAc,cAAc,CAAC5B;QACjB;QACAQ,gBAAgB;YACd,GAAGA,cAAc;YACjBqB;gBACE,IAAIJ,WAAW;oBACbd;gBACF,OAAO;oBACLS;gBACF;YACF;YACAU,WAAWtC,IAAIQ,kBAAkB,YAAY;QAC/C;IACF;AACF"}

package/dist/layout/useHorizontalLayoutTransition.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/layout/useHorizontalLayoutTransition.ts"],"sourcesContent":["\"use client\";\nimport { cnb } from \"cnbuilder\";\nimport { DEFAULT_SHEET_TIMEOUT } from \"../sheet/styles.js\";\nimport {\n  type CSSTransitionClassNames,\n  type CSSTransitionHookReturnValue,\n  type PreconfiguredCSSTransitionOptions,\n  type TransitionTimeout,\n} from \"../transition/types.js\";\nimport { useCSSTransition } from \"../transition/useCSSTransition.js\";\n\n/**\n * @since 6.0.0\n */\nexport const DEFAULT_HORIZONTAL_LAYOUT_TRANSITION_CLASSNAMES = {\n  appearDone: \"rmd-layout-h--active\",\n  enter: \"rmd-layout-h--enter\",\n  enterActive: \"rmd-layout-h--active\",\n  enterDone: \"rmd-layout-h--active\",\n  exit: \"rmd-layout-h--exit\",\n} satisfies Readonly<CSSTransitionClassNames>;\n\n/**\n * @since 6.0.0\n */\nexport interface HorizontalLayoutTransitionOptions\n  extends PreconfiguredCSSTransitionOptions<HTMLElement> {\n  /**\n   * @see {@link DEFAULT_SHEET_TIMEOUT}\n   * @defaultValue `DEFAULT_SHEET_TIMEOUT`\n   */\n  timeout?: TransitionTimeout;\n  /**\n   * @see {@link DEFAULT_HORIZONTAL_LAYOUT_TRANSITION_CLASSNAMES}\n   * @defaultValue `DEFAULT_HORIZONTAL_LAYOUT_TRANSITION_CLASSNAMES`\n   */\n  classNames?: CSSTransitionClassNames;\n}\n\n/**\n * @example\n * ```tsx\n * import { LayoutAppBar, Main, useHorizontalLayoutTransition } from \"@react-md/core\";\n * import type { ReactElement, ReactNode } from \"react\";\n *\n * interface Props {\n *   title: ReactNode;\n *   children: ReactNode;\n * }\n *\n * export default function Example({ title, children }: Props): ReactElement {\n *   const { toggled: staticNavExpanded, toggle: toggleStaticNav } = useToggle();\n *   const { elementProps, className } = useHorizontalLayoutTransition({\n *     transitionIn: staticNavExpanded,\n *   });\n *\n *   return (\n *     <>\n *       <LayoutAppBar className={className}>\n *         <Button\n *           aria-label=\"Navigation\"\n *           buttonType=\"icon\"\n *           onClick={toggleStaticNav}\n *         >\n *           <MenuOutlinedIcon />\n *         '</Button>\n *         {title}\n *       </LayoutAppBar>\n *       <Main {...elementProps}>\n *         {children}\n *       </Main>\n *     </>\n *   );\n * }\n * ```\n *\n * @since 6.0.0\n */\nexport function useHorizontalLayoutTransition<\n  E extends HTMLElement = HTMLElement,\n>(options: HorizontalLayoutTransitionOptions): CSSTransitionHookReturnValue<E> {\n  return useCSSTransition({\n    timeout: DEFAULT_SHEET_TIMEOUT,\n    classNames: DEFAULT_HORIZONTAL_LAYOUT_TRANSITION_CLASSNAMES,\n    ...options,\n    className: cnb(\"rmd-layout-h\", options.className),\n  });\n}\n"],"names":["cnb","DEFAULT_SHEET_TIMEOUT","useCSSTransition","DEFAULT_HORIZONTAL_LAYOUT_TRANSITION_CLASSNAMES","appearDone","enter","enterActive","enterDone","exit","useHorizontalLayoutTransition","options","timeout","classNames","className"],"mappings":"AAAA;AACA,SAASA,GAAG,QAAQ,YAAY;AAChC,SAASC,qBAAqB,QAAQ,qBAAqB;AAO3D,SAASC,gBAAgB,QAAQ,oCAAoC;AAErE;;CAEC,GACD,OAAO,MAAMC,kDAAkD;IAC7DC,YAAY;IACZC,OAAO;IACPC,aAAa;IACbC,WAAW;IACXC,MAAM;AACR,EAA8C;AAmB9C;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAsCC,GACD,OAAO,SAASC,8BAEdC,OAA0C;IAC1C,OAAOR,iBAAiB;QACtBS,SAASV;QACTW,YAAYT;QACZ,GAAGO,OAAO;QACVG,WAAWb,IAAI,gBAAgBU,QAAQG,SAAS;IAClD;AACF"}
+{"version":3,"sources":["../../src/layout/useHorizontalLayoutTransition.ts"],"sourcesContent":["\"use client\";\n\nimport { cnb } from \"cnbuilder\";\n\nimport { DEFAULT_SHEET_TIMEOUT } from \"../sheet/styles.js\";\nimport {\n  type CSSTransitionClassNames,\n  type CSSTransitionHookReturnValue,\n  type PreconfiguredCSSTransitionOptions,\n  type TransitionTimeout,\n} from \"../transition/types.js\";\nimport { useCSSTransition } from \"../transition/useCSSTransition.js\";\n\n/**\n * @since 6.0.0\n */\nexport const DEFAULT_HORIZONTAL_LAYOUT_TRANSITION_CLASSNAMES = {\n  appearDone: \"rmd-layout-h--active\",\n  enter: \"rmd-layout-h--enter\",\n  enterActive: \"rmd-layout-h--active\",\n  enterDone: \"rmd-layout-h--active\",\n  exit: \"rmd-layout-h--exit\",\n} satisfies Readonly<CSSTransitionClassNames>;\n\n/**\n * @since 6.0.0\n */\nexport interface HorizontalLayoutTransitionOptions\n  extends PreconfiguredCSSTransitionOptions<HTMLElement> {\n  /**\n   * @see {@link DEFAULT_SHEET_TIMEOUT}\n   * @defaultValue `DEFAULT_SHEET_TIMEOUT`\n   */\n  timeout?: TransitionTimeout;\n  /**\n   * @see {@link DEFAULT_HORIZONTAL_LAYOUT_TRANSITION_CLASSNAMES}\n   * @defaultValue `DEFAULT_HORIZONTAL_LAYOUT_TRANSITION_CLASSNAMES`\n   */\n  classNames?: CSSTransitionClassNames;\n}\n\n/**\n * @example\n * ```tsx\n * import { LayoutAppBar, Main, useHorizontalLayoutTransition } from \"@react-md/core\";\n * import type { ReactElement, ReactNode } from \"react\";\n *\n * interface Props {\n *   title: ReactNode;\n *   children: ReactNode;\n * }\n *\n * export default function Example({ title, children }: Props): ReactElement {\n *   const { toggled: staticNavExpanded, toggle: toggleStaticNav } = useToggle();\n *   const { elementProps, className } = useHorizontalLayoutTransition({\n *     transitionIn: staticNavExpanded,\n *   });\n *\n *   return (\n *     <>\n *       <LayoutAppBar className={className}>\n *         <Button\n *           aria-label=\"Navigation\"\n *           buttonType=\"icon\"\n *           onClick={toggleStaticNav}\n *         >\n *           <MenuOutlinedIcon />\n *         '</Button>\n *         {title}\n *       </LayoutAppBar>\n *       <Main {...elementProps}>\n *         {children}\n *       </Main>\n *     </>\n *   );\n * }\n * ```\n *\n * @since 6.0.0\n */\nexport function useHorizontalLayoutTransition<\n  E extends HTMLElement = HTMLElement,\n>(options: HorizontalLayoutTransitionOptions): CSSTransitionHookReturnValue<E> {\n  return useCSSTransition({\n    timeout: DEFAULT_SHEET_TIMEOUT,\n    classNames: DEFAULT_HORIZONTAL_LAYOUT_TRANSITION_CLASSNAMES,\n    ...options,\n    className: cnb(\"rmd-layout-h\", options.className),\n  });\n}\n"],"names":["cnb","DEFAULT_SHEET_TIMEOUT","useCSSTransition","DEFAULT_HORIZONTAL_LAYOUT_TRANSITION_CLASSNAMES","appearDone","enter","enterActive","enterDone","exit","useHorizontalLayoutTransition","options","timeout","classNames","className"],"mappings":"AAAA;AAEA,SAASA,GAAG,QAAQ,YAAY;AAEhC,SAASC,qBAAqB,QAAQ,qBAAqB;AAO3D,SAASC,gBAAgB,QAAQ,oCAAoC;AAErE;;CAEC,GACD,OAAO,MAAMC,kDAAkD;IAC7DC,YAAY;IACZC,OAAO;IACPC,aAAa;IACbC,WAAW;IACXC,MAAM;AACR,EAA8C;AAmB9C;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAsCC,GACD,OAAO,SAASC,8BAEdC,OAA0C;IAC1C,OAAOR,iBAAiB;QACtBS,SAASV;QACTW,YAAYT;QACZ,GAAGO,OAAO;QACVG,WAAWb,IAAI,gBAAgBU,QAAQG,SAAS;IAClD;AACF"}

package/dist/layout/useLayoutAppBarHeight.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/layout/useLayoutAppBarHeight.ts"],"sourcesContent":["\"use client\";\nimport { useMemo, type Ref, type RefCallback } from \"react\";\nimport { type CSSVariable } from \"../theme/types.js\";\nimport { useElementSize } from \"../useElementSize.js\";\n\ndeclare module \"react\" {\n  interface CSSProperties {\n    \"--rmd-layout-size\"?: string;\n    \"--rmd-layout-header-height\"?: string;\n  }\n}\n\n/**\n * @since 6.0.0\n */\nexport interface LayoutAppBarHeightResult {\n  height: number | undefined;\n  variables: readonly CSSVariable[];\n  appBarRef: RefCallback<HTMLDivElement>;\n}\n\n/**\n * @example Main Usage\n * ```tsx\n * import type { PropsWithChildren, ReactElement } from \"react\";\n * import {\n *   AppBar,\n *   useCSSVariables,\n *   useLayoutAppBarHeight\n * } from \"@react-md/core\";\n *\n * export function LayoutHeader({ children }: PropsWithChildren): ReactElement {\n *   const { appBarRef, variables } = useLayoutAppBarHeight();\n *   useCSSVariables(variables);\n *\n *   return (\n *     <AppBar ref={appBarRef} {...customProps}>\n *       <CustomChildren />\n *     </AppBar>\n *   );\n * };\n * ```\n *\n * @example Inline Variables\n * ```tsx\n * import type { PropsWithChildren, ReactElement } from \"react\";\n * import {\n *   AppBar,\n *   useCSSVariables,\n *   useLayoutAppBarHeight\n * } from \"@react-md/core\";\n *\n * export function Layout({ children }: PropsWithChildren): ReactElement {\n *   const { appBarRef, variables } = useLayoutAppBarHeight();\n *   const inlineStyle = useCSSVariables(variables, true);\n *\n *   return (\n *     <div style={inlineStyle}>\n *       <AppBar ref={appBarRef} {...customProps}>\n *         <CustomChildren />\n *       </AppBar>\n *       {children}\n *     </div>\n *   );\n * };\n * ```\n *\n * @since 6.0.0\n */\nexport function useLayoutAppBarHeight(\n  ref?: Ref<HTMLDivElement>\n): LayoutAppBarHeightResult {\n  const { height, elementRef, observedOnce } = useElementSize({\n    ref,\n    disableWidth: true,\n  });\n  const variables = useMemo<CSSVariable[]>(() => {\n    if (Number.isNaN(height) || !observedOnce) {\n      return [];\n    }\n\n    return [{ name: \"--rmd-layout-header-height\", value: `${height}px` }];\n  }, [height, observedOnce]);\n\n  return {\n    height,\n    variables,\n    appBarRef: elementRef,\n  };\n}\n"],"names":["useMemo","useElementSize","useLayoutAppBarHeight","ref","height","elementRef","observedOnce","disableWidth","variables","Number","isNaN","name","value","appBarRef"],"mappings":"AAAA;AACA,SAASA,OAAO,QAAoC,QAAQ;AAE5D,SAASC,cAAc,QAAQ,uBAAuB;AAkBtD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA+CC,GACD,OAAO,SAASC,sBACdC,GAAyB;IAEzB,MAAM,EAAEC,MAAM,EAAEC,UAAU,EAAEC,YAAY,EAAE,GAAGL,eAAe;QAC1DE;QACAI,cAAc;IAChB;IACA,MAAMC,YAAYR,QAAuB;QACvC,IAAIS,OAAOC,KAAK,CAACN,WAAW,CAACE,cAAc;YACzC,OAAO,EAAE;QACX;QAEA,OAAO;YAAC;gBAAEK,MAAM;gBAA8BC,OAAO,GAAGR,OAAO,EAAE,CAAC;YAAC;SAAE;IACvE,GAAG;QAACA;QAAQE;KAAa;IAEzB,OAAO;QACLF;QACAI;QACAK,WAAWR;IACb;AACF"}
+{"version":3,"sources":["../../src/layout/useLayoutAppBarHeight.ts"],"sourcesContent":["\"use client\";\n\nimport { type Ref, type RefCallback, useMemo } from \"react\";\n\nimport { type CSSVariable } from \"../theme/types.js\";\nimport { useElementSize } from \"../useElementSize.js\";\n\ndeclare module \"react\" {\n  interface CSSProperties {\n    \"--rmd-layout-size\"?: string;\n    \"--rmd-layout-header-height\"?: string;\n  }\n}\n\n/**\n * @since 6.0.0\n */\nexport interface LayoutAppBarHeightResult {\n  height: number | undefined;\n  variables: readonly CSSVariable[];\n  appBarRef: RefCallback<HTMLDivElement>;\n}\n\n/**\n * @example Main Usage\n * ```tsx\n * import type { PropsWithChildren, ReactElement } from \"react\";\n * import {\n *   AppBar,\n *   useCSSVariables,\n *   useLayoutAppBarHeight\n * } from \"@react-md/core\";\n *\n * export function LayoutHeader({ children }: PropsWithChildren): ReactElement {\n *   const { appBarRef, variables } = useLayoutAppBarHeight();\n *   useCSSVariables(variables);\n *\n *   return (\n *     <AppBar ref={appBarRef} {...customProps}>\n *       <CustomChildren />\n *     </AppBar>\n *   );\n * };\n * ```\n *\n * @example Inline Variables\n * ```tsx\n * import type { PropsWithChildren, ReactElement } from \"react\";\n * import {\n *   AppBar,\n *   useCSSVariables,\n *   useLayoutAppBarHeight\n * } from \"@react-md/core\";\n *\n * export function Layout({ children }: PropsWithChildren): ReactElement {\n *   const { appBarRef, variables } = useLayoutAppBarHeight();\n *   const inlineStyle = useCSSVariables(variables, true);\n *\n *   return (\n *     <div style={inlineStyle}>\n *       <AppBar ref={appBarRef} {...customProps}>\n *         <CustomChildren />\n *       </AppBar>\n *       {children}\n *     </div>\n *   );\n * };\n * ```\n *\n * @since 6.0.0\n */\nexport function useLayoutAppBarHeight(\n  ref?: Ref<HTMLDivElement>\n): LayoutAppBarHeightResult {\n  const { height, elementRef, observedOnce } = useElementSize({\n    ref,\n    disableWidth: true,\n  });\n  const variables = useMemo<CSSVariable[]>(() => {\n    if (Number.isNaN(height) || !observedOnce) {\n      return [];\n    }\n\n    return [{ name: \"--rmd-layout-header-height\", value: `${height}px` }];\n  }, [height, observedOnce]);\n\n  return {\n    height,\n    variables,\n    appBarRef: elementRef,\n  };\n}\n"],"names":["useMemo","useElementSize","useLayoutAppBarHeight","ref","height","elementRef","observedOnce","disableWidth","variables","Number","isNaN","name","value","appBarRef"],"mappings":"AAAA;AAEA,SAAqCA,OAAO,QAAQ,QAAQ;AAG5D,SAASC,cAAc,QAAQ,uBAAuB;AAkBtD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA+CC,GACD,OAAO,SAASC,sBACdC,GAAyB;IAEzB,MAAM,EAAEC,MAAM,EAAEC,UAAU,EAAEC,YAAY,EAAE,GAAGL,eAAe;QAC1DE;QACAI,cAAc;IAChB;IACA,MAAMC,YAAYR,QAAuB;QACvC,IAAIS,OAAOC,KAAK,CAACN,WAAW,CAACE,cAAc;YACzC,OAAO,EAAE;QACX;QAEA,OAAO;YAAC;gBAAEK,MAAM;gBAA8BC,OAAO,GAAGR,OAAO,EAAE,CAAC;YAAC;SAAE;IACvE,GAAG;QAACA;QAAQE;KAAa;IAEzB,OAAO;QACLF;QACAI;QACAK,WAAWR;IACb;AACF"}

package/dist/layout/useLayoutTree.d.ts

@@ -79,9 +79,10 @@ export interface LayoutTreeImplementation<T extends TreeItemNode = DefaultTreeIt
  *
  * @example
  * ```tsx
- * import { Tree, useLayoutTree } from "@react-md/core";
- * import type { TreeData } from "@react-md/core";
- * import type { ReactElement } from "react";
+ * import { useLayoutTree } from "@react-md/core/layout/useLayoutTree"
+ * import { Tree } from "@react-md/core/tree/Tree";
+ * import { type TreeData } from "@react-md/core/tree/types";
+ * import { type ReactElement } from "react";
  *
  * // choose your routing library...
  * import { Link, useLocation } from "react-router";

package/dist/layout/useLayoutTree.js

@@ -30,9 +30,10 @@ const noop = ()=>{
  *
  * @example
  * ```tsx
- * import { Tree, useLayoutTree } from "@react-md/core";
- * import type { TreeData } from "@react-md/core";
- * import type { ReactElement } from "react";
+ * import { useLayoutTree } from "@react-md/core/layout/useLayoutTree"
+ * import { Tree } from "@react-md/core/tree/Tree";
+ * import { type TreeData } from "@react-md/core/tree/types";
+ * import { type ReactElement } from "react";
  *
  * // choose your routing library...
  * import { Link, useLocation } from "react-router";

package/dist/layout/useLayoutTree.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/layout/useLayoutTree.ts"],"sourcesContent":["\"use client\";\nimport { useEffect, useMemo } from \"react\";\nimport { type TreeProps } from \"../tree/Tree.js\";\nimport {\n  type DefaultTreeItemNode,\n  type TreeData,\n  type TreeDefaultIds,\n  type TreeItemNode,\n} from \"../tree/types.js\";\nimport { type TreeImplementation } from \"../tree/useTree.js\";\nimport { useTreeExpansion } from \"../tree/useTreeExpansion.js\";\nimport { getTreeItemsFrom } from \"../tree/utils.js\";\n\nconst noop = (): void => {\n  // do nothing\n};\n\n/**\n * @internal\n */\nconst getParentIds = (\n  itemId: string,\n  navItems: TreeData<TreeItemNode>\n): readonly string[] =>\n  getTreeItemsFrom(navItems, itemId).map(({ itemId }) => itemId);\n\n/**\n * @since 6.0.0 Removed the `linkComponent` option.\n */\nexport interface LayoutTreeOptions<\n  T extends TreeItemNode = DefaultTreeItemNode,\n> {\n  /**\n   * The current pathname which is used as the tree `itemId`.\n   */\n  pathname: string;\n\n  /**\n   * @example\n   * ```tsx\n   * const navItems = {\n   *   \"/\": {\n   *     itemId: \"/\",\n   *     parentId: null,\n   *     children: \"Home\",\n   *     leftAddon: <HomeIcon />,\n   *     to: \"/\",\n   *   },\n   *   \"/route-1\": {\n   *     itemId: \"/route-1\",\n   *     parentId: null,\n   *     children: \"Route 1\",\n   *     leftAddon: <TvIcon />,\n   *     to: \"/route-1\",\n   *   },\n   *   \"/route-2\": {\n   *     itemId: \"/route-2\",\n   *     parentId: null,\n   *     children: \"Route 2\",\n   *     leftAddon: <AppsIcon />,\n   *     to: \"/route-2\",\n   *   },\n   *   \"/route-3\": {\n   *     itemId: \"/route-3\",\n   *     parentId: null,\n   *     children: \"Route 3\",\n   *     leftAddon: <BookIcon />,\n   *     to: \"/route-3\",\n   *   },\n   * } satisfies TreeData;\n   * ```\n   */\n  navItems: TreeData<T>;\n\n  /**\n   * @defaultValue `getParentIds(pathname, navItems)`\n   */\n  defaultExpandedIds?: TreeDefaultIds;\n}\n\n/**\n * @since 6.0.0 Renamed from `LayoutNavigationState`, removed the\n * `linkComponent`, and remap `navItems` to `data` so it can be passed to the\n * `Tree` component.\n */\nexport interface LayoutTreeImplementation<\n  T extends TreeItemNode = DefaultTreeItemNode,\n> extends Pick<TreeProps<T>, \"data\">,\n    TreeImplementation {}\n\n/**\n * Before considering to use a `Tree` for site navigation, it is important to\n * understand:\n * - There is a lot of functionality required to implement the tree widget so\n *   your bundle size will increase\n * - A pattern more suited for typical site navigation with expandable groups of\n *   links is the disclosure pattern.\n * - @see https://www.w3.org/WAI/ARIA/apg/patterns/disclosure/\n *\n * @see https://www.w3.org/WAI/ARIA/apg/patterns/treeview/examples/treeview-navigation/\n *\n * This is a pretty reasonable default implementation for having a navigation\n * tree within the Layout component. The way it'll work is that the current\n * route will be the only selected item within the tree. When the pathname\n * changes, the selectedIds will be updated to only be the current pathname once\n * again.\n *\n * This means that you can use whatever routing library or history provider that\n * ensures that your layout re-renders on a path change.\n *\n * @example\n * ```tsx\n * import { Tree, useLayoutTree } from \"@react-md/core\";\n * import type { TreeData } from \"@react-md/core\";\n * import type { ReactElement } from \"react\";\n *\n * // choose your routing library...\n * import { Link, useLocation } from \"react-router\";\n *\n * const navItems = {\n *   \"/\": {\n *     itemId: \"/\",\n *     parentId: null,\n *     children: \"Home\",\n *     leftAddon: <HomeIcon />,\n *     to: \"/\",\n *   },\n *   \"/route-1\": {\n *     itemId: \"/route-1\",\n *     parentId: null,\n *     children: \"Route 1\",\n *     leftAddon: <TvIcon />,\n *     to: \"/route-1\",\n *   },\n *   \"/route-2\": {\n *     itemId: \"/route-2\",\n *     parentId: null,\n *     children: \"Route 2\",\n *     leftAddon: <AppsIcon />,\n *     to: \"/route-2\",\n *   },\n *   \"/route-3\": {\n *     itemId: \"/route-3\",\n *     parentId: null,\n *     children: \"Route 3\",\n *     leftAddon: <BookIcon />,\n *     to: \"/route-3\",\n *   },\n * } satisfies TreeData;\n *\n * function Example(): ReactElement {\n *   const { pathname } = useLocation();\n *   const tree = useLayoutTree({\n *     navItems,\n *     pathname,\n *   });\n *\n *   return (\n *     <Tree\n *       {...tree}\n *       aria-label=\"Navigation\"\n *       linkComponent={Link}\n *     />\n *   );\n * }\n * ```\n *\n * @since 6.0.0 Renamed from `useLayoutNavigation`.\n */\nexport function useLayoutTree(\n  options: LayoutTreeOptions\n): LayoutTreeImplementation {\n  const { defaultExpandedIds, navItems, pathname } = options;\n\n  const selectedIds = useMemo(() => new Set([pathname]), [pathname]);\n  const { expandedIds, expandMultipleTreeItems, toggleTreeItemExpansion } =\n    useTreeExpansion(\n      defaultExpandedIds ?? (() => getParentIds(pathname, navItems))\n    );\n\n  useEffect(() => {\n    expandMultipleTreeItems((prevExpandedIds) => {\n      const nextExpandedIds = new Set([\n        ...prevExpandedIds,\n        ...getParentIds(pathname, navItems),\n      ]);\n\n      return nextExpandedIds;\n    });\n  }, [expandMultipleTreeItems, pathname, navItems]);\n\n  return {\n    data: navItems,\n    multiSelect: false,\n    selectedIds,\n    expandedIds,\n    expandMultipleTreeItems,\n    toggleTreeItemExpansion,\n    toggleTreeItemSelection: noop,\n    selectMultipleTreeItems: noop,\n  };\n}\n"],"names":["useEffect","useMemo","useTreeExpansion","getTreeItemsFrom","noop","getParentIds","itemId","navItems","map","useLayoutTree","options","defaultExpandedIds","pathname","selectedIds","Set","expandedIds","expandMultipleTreeItems","toggleTreeItemExpansion","prevExpandedIds","nextExpandedIds","data","multiSelect","toggleTreeItemSelection","selectMultipleTreeItems"],"mappings":"AAAA;AACA,SAASA,SAAS,EAAEC,OAAO,QAAQ,QAAQ;AAS3C,SAASC,gBAAgB,QAAQ,8BAA8B;AAC/D,SAASC,gBAAgB,QAAQ,mBAAmB;AAEpD,MAAMC,OAAO;AACX,aAAa;AACf;AAEA;;CAEC,GACD,MAAMC,eAAe,CACnBC,QACAC,WAEAJ,iBAAiBI,UAAUD,QAAQE,GAAG,CAAC,CAAC,EAAEF,MAAM,EAAE,GAAKA;AAkEzD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA8EC,GACD,OAAO,SAASG,cACdC,OAA0B;IAE1B,MAAM,EAAEC,kBAAkB,EAAEJ,QAAQ,EAAEK,QAAQ,EAAE,GAAGF;IAEnD,MAAMG,cAAcZ,QAAQ,IAAM,IAAIa,IAAI;YAACF;SAAS,GAAG;QAACA;KAAS;IACjE,MAAM,EAAEG,WAAW,EAAEC,uBAAuB,EAAEC,uBAAuB,EAAE,GACrEf,iBACES,sBAAuB,CAAA,IAAMN,aAAaO,UAAUL,SAAQ;IAGhEP,UAAU;QACRgB,wBAAwB,CAACE;YACvB,MAAMC,kBAAkB,IAAIL,IAAI;mBAC3BI;mBACAb,aAAaO,UAAUL;aAC3B;YAED,OAAOY;QACT;IACF,GAAG;QAACH;QAAyBJ;QAAUL;KAAS;IAEhD,OAAO;QACLa,MAAMb;QACNc,aAAa;QACbR;QACAE;QACAC;QACAC;QACAK,yBAAyBlB;QACzBmB,yBAAyBnB;IAC3B;AACF"}
+{"version":3,"sources":["../../src/layout/useLayoutTree.ts"],"sourcesContent":["\"use client\";\n\nimport { useEffect, useMemo } from \"react\";\n\nimport { type TreeProps } from \"../tree/Tree.js\";\nimport {\n  type DefaultTreeItemNode,\n  type TreeData,\n  type TreeDefaultIds,\n  type TreeItemNode,\n} from \"../tree/types.js\";\nimport { type TreeImplementation } from \"../tree/useTree.js\";\nimport { useTreeExpansion } from \"../tree/useTreeExpansion.js\";\nimport { getTreeItemsFrom } from \"../tree/utils.js\";\n\nconst noop = (): void => {\n  // do nothing\n};\n\n/**\n * @internal\n */\nconst getParentIds = (\n  itemId: string,\n  navItems: TreeData<TreeItemNode>\n): readonly string[] =>\n  getTreeItemsFrom(navItems, itemId).map(({ itemId }) => itemId);\n\n/**\n * @since 6.0.0 Removed the `linkComponent` option.\n */\nexport interface LayoutTreeOptions<\n  T extends TreeItemNode = DefaultTreeItemNode,\n> {\n  /**\n   * The current pathname which is used as the tree `itemId`.\n   */\n  pathname: string;\n\n  /**\n   * @example\n   * ```tsx\n   * const navItems = {\n   *   \"/\": {\n   *     itemId: \"/\",\n   *     parentId: null,\n   *     children: \"Home\",\n   *     leftAddon: <HomeIcon />,\n   *     to: \"/\",\n   *   },\n   *   \"/route-1\": {\n   *     itemId: \"/route-1\",\n   *     parentId: null,\n   *     children: \"Route 1\",\n   *     leftAddon: <TvIcon />,\n   *     to: \"/route-1\",\n   *   },\n   *   \"/route-2\": {\n   *     itemId: \"/route-2\",\n   *     parentId: null,\n   *     children: \"Route 2\",\n   *     leftAddon: <AppsIcon />,\n   *     to: \"/route-2\",\n   *   },\n   *   \"/route-3\": {\n   *     itemId: \"/route-3\",\n   *     parentId: null,\n   *     children: \"Route 3\",\n   *     leftAddon: <BookIcon />,\n   *     to: \"/route-3\",\n   *   },\n   * } satisfies TreeData;\n   * ```\n   */\n  navItems: TreeData<T>;\n\n  /**\n   * @defaultValue `getParentIds(pathname, navItems)`\n   */\n  defaultExpandedIds?: TreeDefaultIds;\n}\n\n/**\n * @since 6.0.0 Renamed from `LayoutNavigationState`, removed the\n * `linkComponent`, and remap `navItems` to `data` so it can be passed to the\n * `Tree` component.\n */\nexport interface LayoutTreeImplementation<\n  T extends TreeItemNode = DefaultTreeItemNode,\n> extends Pick<TreeProps<T>, \"data\">,\n    TreeImplementation {}\n\n/**\n * Before considering to use a `Tree` for site navigation, it is important to\n * understand:\n * - There is a lot of functionality required to implement the tree widget so\n *   your bundle size will increase\n * - A pattern more suited for typical site navigation with expandable groups of\n *   links is the disclosure pattern.\n * - @see https://www.w3.org/WAI/ARIA/apg/patterns/disclosure/\n *\n * @see https://www.w3.org/WAI/ARIA/apg/patterns/treeview/examples/treeview-navigation/\n *\n * This is a pretty reasonable default implementation for having a navigation\n * tree within the Layout component. The way it'll work is that the current\n * route will be the only selected item within the tree. When the pathname\n * changes, the selectedIds will be updated to only be the current pathname once\n * again.\n *\n * This means that you can use whatever routing library or history provider that\n * ensures that your layout re-renders on a path change.\n *\n * @example\n * ```tsx\n * import { useLayoutTree } from \"@react-md/core/layout/useLayoutTree\"\n * import { Tree } from \"@react-md/core/tree/Tree\";\n * import { type TreeData } from \"@react-md/core/tree/types\";\n * import { type ReactElement } from \"react\";\n *\n * // choose your routing library...\n * import { Link, useLocation } from \"react-router\";\n *\n * const navItems = {\n *   \"/\": {\n *     itemId: \"/\",\n *     parentId: null,\n *     children: \"Home\",\n *     leftAddon: <HomeIcon />,\n *     to: \"/\",\n *   },\n *   \"/route-1\": {\n *     itemId: \"/route-1\",\n *     parentId: null,\n *     children: \"Route 1\",\n *     leftAddon: <TvIcon />,\n *     to: \"/route-1\",\n *   },\n *   \"/route-2\": {\n *     itemId: \"/route-2\",\n *     parentId: null,\n *     children: \"Route 2\",\n *     leftAddon: <AppsIcon />,\n *     to: \"/route-2\",\n *   },\n *   \"/route-3\": {\n *     itemId: \"/route-3\",\n *     parentId: null,\n *     children: \"Route 3\",\n *     leftAddon: <BookIcon />,\n *     to: \"/route-3\",\n *   },\n * } satisfies TreeData;\n *\n * function Example(): ReactElement {\n *   const { pathname } = useLocation();\n *   const tree = useLayoutTree({\n *     navItems,\n *     pathname,\n *   });\n *\n *   return (\n *     <Tree\n *       {...tree}\n *       aria-label=\"Navigation\"\n *       linkComponent={Link}\n *     />\n *   );\n * }\n * ```\n *\n * @since 6.0.0 Renamed from `useLayoutNavigation`.\n */\nexport function useLayoutTree(\n  options: LayoutTreeOptions\n): LayoutTreeImplementation {\n  const { defaultExpandedIds, navItems, pathname } = options;\n\n  const selectedIds = useMemo(() => new Set([pathname]), [pathname]);\n  const { expandedIds, expandMultipleTreeItems, toggleTreeItemExpansion } =\n    useTreeExpansion(\n      defaultExpandedIds ?? (() => getParentIds(pathname, navItems))\n    );\n\n  useEffect(() => {\n    expandMultipleTreeItems((prevExpandedIds) => {\n      const nextExpandedIds = new Set([\n        ...prevExpandedIds,\n        ...getParentIds(pathname, navItems),\n      ]);\n\n      return nextExpandedIds;\n    });\n  }, [expandMultipleTreeItems, pathname, navItems]);\n\n  return {\n    data: navItems,\n    multiSelect: false,\n    selectedIds,\n    expandedIds,\n    expandMultipleTreeItems,\n    toggleTreeItemExpansion,\n    toggleTreeItemSelection: noop,\n    selectMultipleTreeItems: noop,\n  };\n}\n"],"names":["useEffect","useMemo","useTreeExpansion","getTreeItemsFrom","noop","getParentIds","itemId","navItems","map","useLayoutTree","options","defaultExpandedIds","pathname","selectedIds","Set","expandedIds","expandMultipleTreeItems","toggleTreeItemExpansion","prevExpandedIds","nextExpandedIds","data","multiSelect","toggleTreeItemSelection","selectMultipleTreeItems"],"mappings":"AAAA;AAEA,SAASA,SAAS,EAAEC,OAAO,QAAQ,QAAQ;AAU3C,SAASC,gBAAgB,QAAQ,8BAA8B;AAC/D,SAASC,gBAAgB,QAAQ,mBAAmB;AAEpD,MAAMC,OAAO;AACX,aAAa;AACf;AAEA;;CAEC,GACD,MAAMC,eAAe,CACnBC,QACAC,WAEAJ,iBAAiBI,UAAUD,QAAQE,GAAG,CAAC,CAAC,EAAEF,MAAM,EAAE,GAAKA;AAkEzD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA+EC,GACD,OAAO,SAASG,cACdC,OAA0B;IAE1B,MAAM,EAAEC,kBAAkB,EAAEJ,QAAQ,EAAEK,QAAQ,EAAE,GAAGF;IAEnD,MAAMG,cAAcZ,QAAQ,IAAM,IAAIa,IAAI;YAACF;SAAS,GAAG;QAACA;KAAS;IACjE,MAAM,EAAEG,WAAW,EAAEC,uBAAuB,EAAEC,uBAAuB,EAAE,GACrEf,iBACES,sBAAuB,CAAA,IAAMN,aAAaO,UAAUL,SAAQ;IAGhEP,UAAU;QACRgB,wBAAwB,CAACE;YACvB,MAAMC,kBAAkB,IAAIL,IAAI;mBAC3BI;mBACAb,aAAaO,UAAUL;aAC3B;YAED,OAAOY;QACT;IACF,GAAG;QAACH;QAAyBJ;QAAUL;KAAS;IAEhD,OAAO;QACLa,MAAMb;QACNc,aAAa;QACbR;QACAE;QACAC;QACAC;QACAK,yBAAyBlB;QACzBmB,yBAAyBnB;IAC3B;AACF"}

package/dist/layout/useLayoutWindowSplitter.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/layout/useLayoutWindowSplitter.ts"],"sourcesContent":["\"use client\";\nimport { type UncontrolledDraggableOptions } from \"../draggable/useDraggable.js\";\nimport { type UseStateInitializer } from \"../types.js\";\nimport { useWindowSize } from \"../useWindowSize.js\";\nimport {\n  useWindowSplitter,\n  type WindowSplitterImplementation,\n  type WindowSplitterOptions,\n  type WindowSplitterWidgetProps,\n} from \"../window-splitter/useWindowSplitter.js\";\n\n/**\n * @since 6.0.0\n */\nexport interface LayoutWindowSplitterOptions\n  extends Omit<WindowSplitterOptions, \"min\" | \"max\"> {\n  /**\n   * @see {@link WindowSplitterOptions.min}\n   * @defaultValue `96`\n   */\n  min?: number;\n\n  /**\n   * This is the minimum max value that can be allowed while resizing the\n   * browser. I don't know the best way to describe it, but the `max` value is\n   * determined by:\n   *\n   * ```ts\n   * const { width } = useWindowSize({ disableHeight: true });\n   * const max = Math.max(maxMinimum, width * windowPercentage);\n   * ```\n   *\n   * @defaultValue `600`\n   */\n  maxMinimum?: number;\n\n  /**\n   * This will be multiplied by the current window's width to determine the\n   * dynamic max value for the window splitter.\n   *\n   * @see {@link maxMinimum}\n   * @defaultValue `0.45`\n   */\n  windowPercentage?: number;\n\n  /** @defaultValue `256` */\n  defaultValue?: UseStateInitializer<number>;\n}\n\n/**\n * @since 6.0.0\n */\nexport interface ProvidedLayoutWindowSplitterProps\n  extends WindowSplitterWidgetProps<HTMLButtonElement> {\n  /** @defaultValue {@link WindowSplitterImplementation.value} */\n  navWidth: number;\n}\n\n/**\n * @since 6.0.0\n */\nexport interface LayoutWindowSplitterImplementation\n  extends WindowSplitterImplementation {\n  splitterProps: ProvidedLayoutWindowSplitterProps;\n}\n\n/**\n * A custom window splitter implementation to be used with the\n * `LayoutWindowSplitter` that will dynamically configure the max width to be a\n * percentage of the current window's width.\n *\n * Note: This will automatically save the width in local storage as\n * `\"navWidth\"`. See the example below if you do not want to use local storage.\n *\n * @example Without this hook\n * ```tsx\n * import { useWindowSize, useWindowSplitter } from \"@react-md/core\";\n * import type { ProvidedLayoutWindowSplitterProps } from \"@react-md/core\";\n *\n * export function useMyLayoutWindowSplitter(): ProvidedLayoutWindowSplitterProps {\n *   const { width } = useWindowSize({ disableHeight: true });\n *   const { splitterProps, value } = useWindowSplitter({\n *     min: 96,\n *     max: Math.max(maxMinimum, width * 0.45),\n *     maxMinimum: 600,\n *   });\n *\n *   return {\n *     ...splitterProps,\n *     navWidth: value,\n *   };\n * }\n *\n * function MyLayout() {\n *   const splitterProps = useMyLayoutWindowSplitter();\n *\n *   return (\n *     <LayoutWindowSplitter\n *       {...splitterProps}\n *       aria-controls=\"layout-nav-id\"\n *     />\n *   );\n * }\n * ```\n *\n * @see {@link useResizableLayout} For a pre-built solution.\n * @since 6.0.0\n */\nexport function useLayoutWindowSplitter(\n  options: LayoutWindowSplitterOptions = {}\n): LayoutWindowSplitterImplementation {\n  const {\n    min = 96,\n    maxMinimum = 600,\n    windowPercentage = 0.45,\n    defaultValue = 256,\n    ...remaining\n  } = options;\n  const { width } = useWindowSize({ disableHeight: true });\n  const implementation = useWindowSplitter({\n    min,\n    max: Math.max(maxMinimum, width * windowPercentage),\n    defaultValue,\n    // type cast so it doesn't complain about defaultValue being provided with\n    // value. That's mostly for public api usage\n    ...(remaining as UncontrolledDraggableOptions),\n  });\n\n  return {\n    ...implementation,\n    splitterProps: {\n      ...implementation.splitterProps,\n      navWidth: implementation.value,\n    },\n  };\n}\n"],"names":["useWindowSize","useWindowSplitter","useLayoutWindowSplitter","options","min","maxMinimum","windowPercentage","defaultValue","remaining","width","disableHeight","implementation","max","Math","splitterProps","navWidth","value"],"mappings":"AAAA;AAGA,SAASA,aAAa,QAAQ,sBAAsB;AACpD,SACEC,iBAAiB,QAIZ,0CAA0C;AAyDjD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAyCC,GACD,OAAO,SAASC,wBACdC,UAAuC,CAAC,CAAC;IAEzC,MAAM,EACJC,MAAM,EAAE,EACRC,aAAa,GAAG,EAChBC,mBAAmB,IAAI,EACvBC,eAAe,GAAG,EAClB,GAAGC,WACJ,GAAGL;IACJ,MAAM,EAAEM,KAAK,EAAE,GAAGT,cAAc;QAAEU,eAAe;IAAK;IACtD,MAAMC,iBAAiBV,kBAAkB;QACvCG;QACAQ,KAAKC,KAAKD,GAAG,CAACP,YAAYI,QAAQH;QAClCC;QACA,0EAA0E;QAC1E,4CAA4C;QAC5C,GAAIC,SAAS;IACf;IAEA,OAAO;QACL,GAAGG,cAAc;QACjBG,eAAe;YACb,GAAGH,eAAeG,aAAa;YAC/BC,UAAUJ,eAAeK,KAAK;QAChC;IACF;AACF"}
+{"version":3,"sources":["../../src/layout/useLayoutWindowSplitter.ts"],"sourcesContent":["\"use client\";\n\nimport { type UncontrolledDraggableOptions } from \"../draggable/useDraggable.js\";\nimport { type UseStateInitializer } from \"../types.js\";\nimport { useWindowSize } from \"../useWindowSize.js\";\nimport {\n  type WindowSplitterImplementation,\n  type WindowSplitterOptions,\n  type WindowSplitterWidgetProps,\n  useWindowSplitter,\n} from \"../window-splitter/useWindowSplitter.js\";\n\n/**\n * @since 6.0.0\n */\nexport interface LayoutWindowSplitterOptions\n  extends Omit<WindowSplitterOptions, \"min\" | \"max\"> {\n  /**\n   * @see {@link WindowSplitterOptions.min}\n   * @defaultValue `96`\n   */\n  min?: number;\n\n  /**\n   * This is the minimum max value that can be allowed while resizing the\n   * browser. I don't know the best way to describe it, but the `max` value is\n   * determined by:\n   *\n   * ```ts\n   * const { width } = useWindowSize({ disableHeight: true });\n   * const max = Math.max(maxMinimum, width * windowPercentage);\n   * ```\n   *\n   * @defaultValue `600`\n   */\n  maxMinimum?: number;\n\n  /**\n   * This will be multiplied by the current window's width to determine the\n   * dynamic max value for the window splitter.\n   *\n   * @see {@link maxMinimum}\n   * @defaultValue `0.45`\n   */\n  windowPercentage?: number;\n\n  /** @defaultValue `256` */\n  defaultValue?: UseStateInitializer<number>;\n}\n\n/**\n * @since 6.0.0\n */\nexport interface ProvidedLayoutWindowSplitterProps\n  extends WindowSplitterWidgetProps<HTMLButtonElement> {\n  /** @defaultValue {@link WindowSplitterImplementation.value} */\n  navWidth: number;\n}\n\n/**\n * @since 6.0.0\n */\nexport interface LayoutWindowSplitterImplementation\n  extends WindowSplitterImplementation {\n  splitterProps: ProvidedLayoutWindowSplitterProps;\n}\n\n/**\n * A custom window splitter implementation to be used with the\n * `LayoutWindowSplitter` that will dynamically configure the max width to be a\n * percentage of the current window's width.\n *\n * Note: This will automatically save the width in local storage as\n * `\"navWidth\"`. See the example below if you do not want to use local storage.\n *\n * @example Without this hook\n * ```tsx\n * import { useWindowSize, useWindowSplitter } from \"@react-md/core\";\n * import type { ProvidedLayoutWindowSplitterProps } from \"@react-md/core\";\n *\n * export function useMyLayoutWindowSplitter(): ProvidedLayoutWindowSplitterProps {\n *   const { width } = useWindowSize({ disableHeight: true });\n *   const { splitterProps, value } = useWindowSplitter({\n *     min: 96,\n *     max: Math.max(maxMinimum, width * 0.45),\n *     maxMinimum: 600,\n *   });\n *\n *   return {\n *     ...splitterProps,\n *     navWidth: value,\n *   };\n * }\n *\n * function MyLayout() {\n *   const splitterProps = useMyLayoutWindowSplitter();\n *\n *   return (\n *     <LayoutWindowSplitter\n *       {...splitterProps}\n *       aria-controls=\"layout-nav-id\"\n *     />\n *   );\n * }\n * ```\n *\n * @see {@link useResizableLayout} For a pre-built solution.\n * @since 6.0.0\n */\nexport function useLayoutWindowSplitter(\n  options: LayoutWindowSplitterOptions = {}\n): LayoutWindowSplitterImplementation {\n  const {\n    min = 96,\n    maxMinimum = 600,\n    windowPercentage = 0.45,\n    defaultValue = 256,\n    ...remaining\n  } = options;\n  const { width } = useWindowSize({ disableHeight: true });\n  const implementation = useWindowSplitter({\n    min,\n    max: Math.max(maxMinimum, width * windowPercentage),\n    defaultValue,\n    // type cast so it doesn't complain about defaultValue being provided with\n    // value. That's mostly for public api usage\n    ...(remaining as UncontrolledDraggableOptions),\n  });\n\n  return {\n    ...implementation,\n    splitterProps: {\n      ...implementation.splitterProps,\n      navWidth: implementation.value,\n    },\n  };\n}\n"],"names":["useWindowSize","useWindowSplitter","useLayoutWindowSplitter","options","min","maxMinimum","windowPercentage","defaultValue","remaining","width","disableHeight","implementation","max","Math","splitterProps","navWidth","value"],"mappings":"AAAA;AAIA,SAASA,aAAa,QAAQ,sBAAsB;AACpD,SAIEC,iBAAiB,QACZ,0CAA0C;AAyDjD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAyCC,GACD,OAAO,SAASC,wBACdC,UAAuC,CAAC,CAAC;IAEzC,MAAM,EACJC,MAAM,EAAE,EACRC,aAAa,GAAG,EAChBC,mBAAmB,IAAI,EACvBC,eAAe,GAAG,EAClB,GAAGC,WACJ,GAAGL;IACJ,MAAM,EAAEM,KAAK,EAAE,GAAGT,cAAc;QAAEU,eAAe;IAAK;IACtD,MAAMC,iBAAiBV,kBAAkB;QACvCG;QACAQ,KAAKC,KAAKD,GAAG,CAACP,YAAYI,QAAQH;QAClCC;QACA,0EAA0E;QAC1E,4CAA4C;QAC5C,GAAIC,SAAS;IACf;IAEA,OAAO;QACL,GAAGG,cAAc;QACjBG,eAAe;YACb,GAAGH,eAAeG,aAAa;YAC/BC,UAAUJ,eAAeK,KAAK;QAChC;IACF;AACF"}

package/dist/layout/useMainTabIndex.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/layout/useMainTabIndex.ts"],"sourcesContent":["\"use client\";\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;AACA,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    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"}

package/dist/layout/useResizableLayout.d.ts

@@ -29,17 +29,15 @@ export interface ResizableLayoutImplementation extends ExpandableLayoutImplement
 /**
  * @example Main Usage
  * ```tsx
- * import {
- *   AppBarTitle,
- *   Button,
- *   LayoutAppBar,
- *   LayoutNav,
- *   LayoutWindowSplitter,
- *   Main,
- *   Sheet,
- *   useResizableLayout,
- * } from "@react-md/core";
- * import type { ReactElement, ReactNode } from "react";
+ * import { AppBarTitle } from "@react-md/core/app-bar/AppBarTitle";
+ * import { Button } from "@react-md/core/button/Button";
+ * import { LayoutAppBar } from "@react-md/core/layout/LayoutAppBar";
+ * import { LayoutNav } from "@react-md/core/layout/LayoutNav";
+ * import { LayoutWindowSplitter } from "@react-md/core/layout/LayoutWindowSplitter";
+ * import { Main } from "@react-md/core/layout/Main";
+ * import { useResizableLayout } from "@react-md/core/layout/useResizableLayout";
+ * import { Sheet } from "@react-md/core/sheet/Sheet";
+ * import { type ReactElement, type ReactNode } from "react";
  *
  * import { CustomNavigation } from "./CustomNavigation";
  *
@@ -68,7 +66,7 @@ export interface ResizableLayoutImplementation extends ExpandableLayoutImplement
  *     windowSplitterProps,
  *   } = useResizableLayout({ pathname });
  *
- *   return {
+ *   return (
  *     <>
  *       <LayoutAppBar {...appBarProps}>
  *         <Button {...navToggleProps} />
@@ -85,7 +83,7 @@ export interface ResizableLayoutImplementation extends ExpandableLayoutImplement
  *       )}
  *       <Main {...mainProps}>{children}</Main>
  *     </>
- *   }
+ *   );
  * }
  * ```
  *
@@ -106,7 +104,7 @@ export interface ResizableLayoutImplementation extends ExpandableLayoutImplement
  *     windowSplitterProps,
  *   } = useResizableLayout({ pathname });
  *
- *   return {
+ *   return (
  *     <>
  *       <LayoutAppBar {...appBarProps}>
  *         <Button {...navToggleProps} />
@@ -131,8 +129,7 @@ export interface ResizableLayoutImplementation extends ExpandableLayoutImplement
  *       )}
  *       <Main {...mainProps}>{children}</Main>
  *     </>
- *   }
- *
+ *   )
  * ```
  *
  * @since 6.0.0