@react-md/core 1.0.0-next.0

package/dist/interaction/useHigherContrastChildren.js.map

@@ -0,0 +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\n * 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 * @remarks \\@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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAmEC,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"}

package/dist/interaction/utils.d.ts

@@ -0,0 +1,16 @@
+import type { KeyboardEvent, MouseEvent, TouchEvent } from "react";
+import type { ElementInteractionState, RippleState, RippleStyle } from "./types.js";
+/** @internal */
+export declare function getRippleStyle(event: MouseEvent<HTMLElement> | TouchEvent<HTMLElement> | KeyboardEvent<HTMLElement>, programmatic: boolean): RippleStyle;
+/** @internal */
+export declare function releaseRipple(state: ElementInteractionState): ElementInteractionState;
+/** @internal */
+interface UpdateRipplesStateOptions {
+    type: "entered" | "exited";
+    state: ElementInteractionState;
+    ripple: RippleState;
+    holding: boolean;
+}
+/** @internal */
+export declare function updateRipplesState(options: UpdateRipplesStateOptions): ElementInteractionState;
+export {};

package/dist/interaction/utils.js

@@ -0,0 +1,90 @@
+import { findSizingContainer } from "../positioning/utils.js";
+/** @internal */ function calcHypotenuse(a, b) {
+    return Math.sqrt(a * a + b * b);
+}
+/**
+ * Gets the current radius for a ripple based on the x and y page dimensions
+ * as well as the size of the element.
+ *
+ * This is really just in a separate file so I can easily mock this and write
+ * tests.
+ *
+ * @internal
+ */ function getRadius(x, y, offsetWidth, offsetHeight) {
+    return Math.max(calcHypotenuse(x, y), calcHypotenuse(offsetWidth - x, y), calcHypotenuse(offsetWidth - x, offsetHeight - y), calcHypotenuse(x, offsetHeight - y));
+}
+/** @internal */ export function getRippleStyle(event, programmatic) {
+    const element = findSizingContainer(event.currentTarget) || event.currentTarget;
+    const rect = element.getBoundingClientRect();
+    const { left, top, height, width } = rect;
+    let x;
+    let y;
+    if ("key" in event || programmatic) {
+        x = width / 2;
+        y = height / 2;
+    } else {
+        let pageX;
+        let pageY;
+        if ("touches" in event) {
+            ({ pageX, pageY } = event.touches[0]);
+        } else {
+            ({ pageX, pageY } = event);
+        }
+        x = pageX - (left + window.pageXOffset);
+        y = pageY - (top + window.pageYOffset);
+    }
+    const radius = getRadius(x, y, width, height);
+    const size = radius * 2;
+    return {
+        left: x - radius,
+        top: y - radius,
+        height: size,
+        width: size
+    };
+}
+/**
+ * This is used to set the `exiting` state after a normal "touch" duration.
+ * 300ms seemed like a good threshold since it is the majority of the scaling
+ * duration (450ms)
+ */ const ENTER_DELAY = 300;
+/** @internal */ export function releaseRipple(state) {
+    // find the first non-exiting ripple which should now be released
+    const i = state.ripples.findIndex((ripple)=>!ripple.exiting);
+    if (i === -1) {
+        return state;
+    }
+    const ripples = state.ripples.slice();
+    const ripple = ripples[i];
+    ripples[i] = {
+        ...ripple,
+        exiting: ripple.entered || Date.now() - ripple.startTime > ENTER_DELAY
+    };
+    return {
+        pressed: false,
+        ripples
+    };
+}
+/** @internal */ export function updateRipplesState(options) {
+    const { type, ripple, state, holding } = options;
+    const rippleIndex = state.ripples.findIndex((r)=>r === ripple);
+    if (rippleIndex === -1) {
+        return state;
+    }
+    const ripples = state.ripples.slice();
+    if (type === "exited") {
+        ripples.splice(rippleIndex, 1);
+    } else {
+        const exiting = !holding || Date.now() - ripple.startTime > ENTER_DELAY;
+        ripples[rippleIndex] = {
+            ...ripple,
+            exiting,
+            entered: true
+        };
+    }
+    return {
+        ...state,
+        ripples
+    };
+}
+
+//# sourceMappingURL=utils.js.map

package/dist/interaction/utils.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/interaction/utils.ts"],"sourcesContent":["import type { KeyboardEvent, MouseEvent, TouchEvent } from \"react\";\nimport { findSizingContainer } from \"../positioning/utils.js\";\nimport type {\n  ElementInteractionState,\n  RippleState,\n  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.pageXOffset);\n    y = pageY - (top + window.pageYOffset);\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","pageXOffset","pageYOffset","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,WAAW,AAAD;QACrCnB,IAAIgB,QAASJ,CAAAA,MAAMM,OAAOE,WAAW,AAAD;IACtC;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.d.ts

@@ -0,0 +1,54 @@
+/// <reference types="react" />
+import { type AppBarProps, type CustomAppBarComponent } from "../app-bar/AppBar.js";
+import { type SkipToMainContentProps } from "../link/SkipToMainContent.js";
+import { type CssPosition, type PropsWithRef } from "../types.js";
+/**
+ * @remarks \@since 6.0.0 Only supports `AppBar` + `SkipToMainContent` props
+ */
+export interface LayoutAppBarProps extends AppBarProps {
+    /** @defaultValue `"header"` */
+    as?: CustomAppBarComponent;
+    /** @defaultValue `"fixed"` */
+    position?: CssPosition;
+    /**
+     * Any additional props to pass to the {@link SkipToMainContent} component.
+     */
+    skipProps?: PropsWithRef<SkipToMainContentProps, HTMLAnchorElement>;
+}
+/**
+ * **Client Component**
+ *
+ * This component is used to dynamically update the `--rmd-layout-header-offset`
+ * based on the current height of this app bar. If you are concerned about
+ * javascript bundle size, it is recommended to configure this variable in SCSS
+ * instead.
+ *
+ * @example
+ * Static Height
+ * ```scss
+ * @use "everything";
+ *
+ * :root {
+ *   @include everything.layout-set-var(header-height, everything.$app-bar-height);
+ * }
+ * ```
+ *
+ * @example
+ * Media Query Height Changes
+ * ```scss
+ * @use "everything";
+ *
+ * :root {
+ *   @include everything.layout-set-var(header-height, everything.$app-bar-height);
+ *   @include everything.tablet-media {
+ *     @include everything.layout-set-var(header-height, everything.$app-bar-dense-height);
+ *   }
+ * }
+ * ```
+ *
+ * @remarks
+ * \@since 6.0.0 This component no longer renders the `LayoutNavToggle` and
+ * `LayoutAppBarTitle` since they no longer exist. The only purpose of this
+ * component is to dynamically set the `--rmd-layout-header-height` variable.
+ */
+export declare const LayoutAppBar: import("react").ForwardRefExoticComponent<LayoutAppBarProps & import("react").RefAttributes<HTMLDivElement>>;

package/dist/layout/LayoutAppBar.js

@@ -0,0 +1,64 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { AppBar } from "../app-bar/AppBar.js";
+import { SkipToMainContent } from "../link/SkipToMainContent.js";
+import { useCSSVariables } from "../theme/useCSSVariables.js";
+import { useEnsuredId } from "../useEnsuredId.js";
+import { useLayoutAppBarHeight } from "./useLayoutAppBarHeight.js";
+/**
+ * **Client Component**
+ *
+ * This component is used to dynamically update the `--rmd-layout-header-offset`
+ * based on the current height of this app bar. If you are concerned about
+ * javascript bundle size, it is recommended to configure this variable in SCSS
+ * instead.
+ *
+ * @example
+ * Static Height
+ * ```scss
+ * @use "everything";
+ *
+ * :root {
+ *   @include everything.layout-set-var(header-height, everything.$app-bar-height);
+ * }
+ * ```
+ *
+ * @example
+ * Media Query Height Changes
+ * ```scss
+ * @use "everything";
+ *
+ * :root {
+ *   @include everything.layout-set-var(header-height, everything.$app-bar-height);
+ *   @include everything.tablet-media {
+ *     @include everything.layout-set-var(header-height, everything.$app-bar-dense-height);
+ *   }
+ * }
+ * ```
+ *
+ * @remarks
+ * \@since 6.0.0 This component no longer renders the `LayoutNavToggle` and
+ * `LayoutAppBarTitle` since they no longer exist. The only purpose of this
+ * component is to dynamically set the `--rmd-layout-header-height` variable.
+ */ export const LayoutAppBar = /*#__PURE__*/ forwardRef(function LayoutAppBar(props, ref) {
+    const { as = "header", id: propId, position = "fixed", skipProps, children, ...remaining } = props;
+    const id = useEnsuredId(propId, "layout-header");
+    const { appBarRef, variables } = useLayoutAppBarHeight(ref);
+    useCSSVariables(variables);
+    return /*#__PURE__*/ _jsxs(AppBar, {
+        ...remaining,
+        id: id,
+        as: as,
+        ref: appBarRef,
+        position: position,
+        children: [
+            /*#__PURE__*/ _jsx(SkipToMainContent, {
+                ...skipProps
+            }),
+            children
+        ]
+    });
+});
+
+//# sourceMappingURL=LayoutAppBar.js.map

package/dist/layout/LayoutAppBar.js.map

@@ -0,0 +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 * @remarks \\@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\n * 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\n * 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 * @remarks\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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAmCC,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.d.ts

@@ -0,0 +1,117 @@
+import { type HTMLAttributes, type ReactNode } from "react";
+import { type BaseSheetClassNameOptions } from "../sheet/styles.js";
+import { type CSSTransitionClassNames, type TransitionActions, type TransitionCallbacks, type TransitionTimeout } from "../transition/types.js";
+/**
+ * @remarks \@since 6.0.0
+ */
+export interface LayoutNavProps extends HTMLAttributes<HTMLDivElement>, BaseSheetClassNameOptions, TransitionCallbacks, TransitionActions {
+    children: ReactNode;
+    /**
+     * The component to render as.
+     *
+     * @defaultValue `"nav"`
+     */
+    as?: "nav" | "div";
+    /**
+     * Set this to `true` to display the navigation.
+     */
+    expanded: boolean;
+    /**
+     * Set this to `true` to force the navigation to appear below the fixed app
+     * bar.
+     *
+     * @defaultValue `false`
+     */
+    appBarOffset?: boolean;
+    /** @defaultValue {@link DEFAULT_SHEET_TIMEOUT} */
+    timeout?: TransitionTimeout;
+    /** @defaultValue {@link DEFAULT_SHEET_CLASSNAMES} */
+    classNames?: CSSTransitionClassNames;
+}
+/**
+ * **Client Component**
+ *
+ * This component is used to render a persistent navigation on the left of the
+ * page. There is some built-in functionality to support resizing with the
+ * `LayoutWindowSplitter` and expandable layouts. Do not use this component for
+ * temporary navigation and instead use a `Sheet`.
+ *
+ * @example
+ * Full Height Layout
+ * ```tsx
+ * "use client";
+ * import {
+ *   LayoutAppBar,
+ *   LayoutNav,
+ *   Main,
+ *   useHorizontalLayoutTransition,
+ * } from "@react-md/core";
+ * import type { ReactElement, PropsWithChildren } from "react";
+ *
+ * function Layout({ children }: PropsWithChildren): ReactElement {
+ *   const { elementProps } = useHorizontalLayoutTransition({
+ *     transitionIn: true,
+ *   });
+ *
+ *   return (
+ *     <>
+ *       <LayoutAppBar {...elementProps}>
+ *         <YourAppBarContent />
+ *       </LayoutAppBar>
+ *       <LayoutNav expanded>
+ *         <YourNavigationComponent />
+ *       </LayoutNav>
+ *       <Main navOffset appBarOffset {...elementProps}>
+ *         {children}
+ *       </Main>
+ *     </>
+ *   );
+ * }
+ * ```
+ *
+ * @example
+ * Toggleable Layout
+ * ```tsx
+ * "use client";
+ * import {
+ *   LayoutNav,
+ *   Main,
+ *   useHorizontalLayoutTransition,
+ *   useToggle,
+ * } from "@react-md/core";
+ * import MenuIcon from "@react-md/material-icons/MenuIcon";
+ * import { cnb } from "cnbuilder";
+ * import type { ReactElement, PropsWithChildren } from "react";
+ *
+ * function Layout({ children }: PropsWithChildren): ReactElement {
+ *   const { toggled: expanded, toggle } = useToggle();
+ *   const { elementProps } = useHorizontalLayoutTransition({
+ *     transitionIn: expanded,
+ *   });
+ *
+ *   return (
+ *     <>
+ *       <LayoutAppBar {...elementProps}>
+ *         <Button
+ *           aria-label="Navigation"
+ *           onClick={toggle}
+ *           buttonType="icon"
+ *         >
+ *           <MenuIcon />
+ *         </Button>
+ *         <YourAppBarContent />
+ *       </LayoutAppBar>
+ *       <LayoutNav expanded>
+ *         <YourNavigationComponent />
+ *       </LayoutNav>
+ *       <Main navOffset={expanded} appBarOffset {...elementProps}>
+ *         {children}
+ *       </Main>
+ *     </>
+ *   );
+ * }
+ * ```
+ *
+ * @remarks \@since 6.0.0
+ */
+export declare const LayoutNav: import("react").ForwardRefExoticComponent<LayoutNavProps & import("react").RefAttributes<HTMLDivElement>>;

package/dist/layout/LayoutNav.js

@@ -0,0 +1,128 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { cnb } from "cnbuilder";
+import { forwardRef } from "react";
+import { DEFAULT_SHEET_CLASSNAMES, DEFAULT_SHEET_TIMEOUT } from "../sheet/Sheet.js";
+import { sheet } from "../sheet/styles.js";
+import { useCSSTransition } from "../transition/useCSSTransition.js";
+import { layoutNav } from "./layoutNavStyles.js";
+/**
+ * **Client Component**
+ *
+ * This component is used to render a persistent navigation on the left of the
+ * page. There is some built-in functionality to support resizing with the
+ * `LayoutWindowSplitter` and expandable layouts. Do not use this component for
+ * temporary navigation and instead use a `Sheet`.
+ *
+ * @example
+ * Full Height Layout
+ * ```tsx
+ * "use client";
+ * import {
+ *   LayoutAppBar,
+ *   LayoutNav,
+ *   Main,
+ *   useHorizontalLayoutTransition,
+ * } from "@react-md/core";
+ * import type { ReactElement, PropsWithChildren } from "react";
+ *
+ * function Layout({ children }: PropsWithChildren): ReactElement {
+ *   const { elementProps } = useHorizontalLayoutTransition({
+ *     transitionIn: true,
+ *   });
+ *
+ *   return (
+ *     <>
+ *       <LayoutAppBar {...elementProps}>
+ *         <YourAppBarContent />
+ *       </LayoutAppBar>
+ *       <LayoutNav expanded>
+ *         <YourNavigationComponent />
+ *       </LayoutNav>
+ *       <Main navOffset appBarOffset {...elementProps}>
+ *         {children}
+ *       </Main>
+ *     </>
+ *   );
+ * }
+ * ```
+ *
+ * @example
+ * Toggleable Layout
+ * ```tsx
+ * "use client";
+ * import {
+ *   LayoutNav,
+ *   Main,
+ *   useHorizontalLayoutTransition,
+ *   useToggle,
+ * } from "@react-md/core";
+ * import MenuIcon from "@react-md/material-icons/MenuIcon";
+ * import { cnb } from "cnbuilder";
+ * import type { ReactElement, PropsWithChildren } from "react";
+ *
+ * function Layout({ children }: PropsWithChildren): ReactElement {
+ *   const { toggled: expanded, toggle } = useToggle();
+ *   const { elementProps } = useHorizontalLayoutTransition({
+ *     transitionIn: expanded,
+ *   });
+ *
+ *   return (
+ *     <>
+ *       <LayoutAppBar {...elementProps}>
+ *         <Button
+ *           aria-label="Navigation"
+ *           onClick={toggle}
+ *           buttonType="icon"
+ *         >
+ *           <MenuIcon />
+ *         </Button>
+ *         <YourAppBarContent />
+ *       </LayoutAppBar>
+ *       <LayoutNav expanded>
+ *         <YourNavigationComponent />
+ *       </LayoutNav>
+ *       <Main navOffset={expanded} appBarOffset {...elementProps}>
+ *         {children}
+ *       </Main>
+ *     </>
+ *   );
+ * }
+ * ```
+ *
+ * @remarks \@since 6.0.0
+ */ export const LayoutNav = /*#__PURE__*/ forwardRef(function LayoutNav(props, ref) {
+    const { as: Component = "nav", "aria-labelledby": ariaLabelledBy, "aria-label": ariaLabel = Component == "nav" && !ariaLabelledBy ? "Navigation" : undefined, expanded, children, className, timeout = DEFAULT_SHEET_TIMEOUT, classNames = DEFAULT_SHEET_CLASSNAMES, appear, enter, exit, onEnter, onEntering, onEntered, onExit, onExited, onExiting, appBarOffset, ...remaining } = props;
+    const { elementProps } = useCSSTransition({
+        nodeRef: ref,
+        timeout,
+        className: cnb(layoutNav({
+            appBarOffset
+        }), sheet({
+            className,
+            horizontalSize: "none",
+            disableOverlay: true
+        })),
+        classNames,
+        enter,
+        exit,
+        appear,
+        onEnter,
+        onEntering,
+        onEntered,
+        onExit,
+        onExited,
+        onExiting,
+        exitedHidden: true,
+        transitionIn: expanded
+    });
+    return /*#__PURE__*/ _jsx(Component, {
+        "aria-label": ariaLabel,
+        "aria-labelledby": ariaLabelledBy,
+        ...remaining,
+        ...elementProps,
+        children: children
+    });
+});
+
+//# sourceMappingURL=LayoutNav.js.map

package/dist/layout/LayoutNav.js.map

@@ -0,0 +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} from \"../sheet/Sheet.js\";\nimport { sheet, type BaseSheetClassNameOptions } 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 * @remarks \\@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\n * 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\n * 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 * @remarks \\@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,QAChB,oBAAoB;AAC3B,SAASC,KAAK,QAAwC,qBAAqB;AAO3E,SAASC,gBAAgB,QAAQ,oCAAoC;AACrE,SAASC,SAAS,QAAQ,uBAAuB;AAsCjD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAqFC,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.d.ts

@@ -0,0 +1,77 @@
+/// <reference types="react" />
+import { type BaseWindowSplitterProps } from "../window-splitter/WindowSplitter.js";
+import { type WindowSplitterWidgetProps } from "../window-splitter/useWindowSplitter.js";
+import { type LayoutWindowSplitterClassNameOptions } from "./layoutWindowSplitterStyles.js";
+/**
+ * @remarks \@since 6.0.0
+ */
+export interface LayoutWindowSplitterProps extends WindowSplitterWidgetProps<HTMLButtonElement>, Omit<BaseWindowSplitterProps, keyof WindowSplitterWidgetProps<HTMLButtonElement>>, LayoutWindowSplitterClassNameOptions {
+    /** @defaultValue `"Resize Navigation"` */
+    "aria-label"?: string;
+    /**
+     * The current navigation width (in px).
+     */
+    navWidth: number;
+}
+/**
+ * **Client Component**
+ *
+ * This component is used to resize the `LayoutNav` component.
+ *
+ * @see {@link useResizableExpandableLayout} for a default implementation for
+ * this component.
+ *
+ * @example
+ * Dynamic Resizing
+ * ```tsx
+ * import {
+ *   LayoutNav,
+ *   LayoutWindowSplitter,
+ *   Main,
+ *   NoSsr,
+ *   useWindowSize,
+ *   useWindowSplitter,
+ * } from "@react-md/core";
+ * import type { ReactElement, PropsWithChildren } from "react"
+ *
+ * function MyWindowSplitter(): ReactElement {
+ *   const { width } = useWindowSize({ disableHeight: true });
+ *   const min = 96;
+ *   const max = Math.max(600, width * .7);
+ *
+ *   const { value, splitterProps } = useWindowSplitter({
+ *     min,
+ *     max,
+ *     defaultValue: 256,
+ *   });
+ *
+ *   return (
+ *     <LayoutWindowSplitter
+ *       aria-controls="layout-nav-id"
+ *       {...splitterProps}
+ *       value={value}
+ *     />
+ *   );
+ * }
+ *
+ * function Layout({ children }: PropsWithChildren): ReactElement {
+ *   return (
+ *     <>
+ *       <LayoutNav id="layout-nav" {...otherProps}>
+ *         <YourNavigation />
+ *       </LayoutNav>
+ *       // only required when using SSR
+ *       <NoSsr>
+ *         <MyWindowSplitter />
+ *       </NoSsr>
+ *       <Main navOffset>
+ *         {children}
+ *       </Main>
+ *     </>
+ *   );
+ * }
+ * ```
+ *
+ * @remarks \@since 6.0.0
+ */
+export declare const LayoutWindowSplitter: import("react").ForwardRefExoticComponent<Omit<LayoutWindowSplitterProps, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;