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

package/coverage/lcov.info

@@ -0,0 +1,474 @@
+TN:
+SF:src/suspense/CircularProgressSuspense.tsx
+FN:44,CircularProgressSuspense
+FNF:1
+FNH:1
+FNDA:3,CircularProgressSuspense
+DA:1,1
+DA:2,1
+DA:3,1
+DA:4,1
+DA:5,1
+DA:6,1
+DA:7,1
+DA:8,1
+DA:9,1
+DA:10,1
+DA:11,1
+DA:12,1
+DA:13,1
+DA:14,1
+DA:15,1
+DA:16,1
+DA:17,1
+DA:18,1
+DA:19,1
+DA:20,1
+DA:21,1
+DA:22,1
+DA:23,1
+DA:24,1
+DA:25,1
+DA:26,1
+DA:27,1
+DA:28,1
+DA:29,1
+DA:30,1
+DA:31,1
+DA:32,1
+DA:33,1
+DA:34,1
+DA:35,1
+DA:36,1
+DA:37,1
+DA:38,1
+DA:39,1
+DA:40,1
+DA:41,1
+DA:42,1
+DA:43,1
+DA:44,1
+DA:45,3
+DA:46,3
+DA:47,3
+DA:48,3
+DA:49,3
+DA:50,3
+DA:51,3
+DA:52,3
+DA:53,3
+DA:54,3
+DA:55,3
+DA:56,3
+DA:57,3
+DA:58,3
+DA:59,3
+DA:60,3
+DA:61,3
+DA:62,3
+DA:63,3
+DA:64,3
+DA:65,3
+DA:66,3
+LF:66
+LH:66
+BRDA:44,0,0,3
+BRDA:50,1,0,1
+BRDA:50,2,0,1
+BRF:3
+BRH:3
+end_of_record
+TN:
+SF:src/suspense/NullSuspense.tsx
+FN:35,NullSuspense
+FNF:1
+FNH:1
+FNDA:1,NullSuspense
+DA:1,1
+DA:2,1
+DA:3,1
+DA:4,1
+DA:5,1
+DA:6,1
+DA:7,1
+DA:8,1
+DA:9,1
+DA:10,1
+DA:11,1
+DA:12,1
+DA:13,1
+DA:14,1
+DA:15,1
+DA:16,1
+DA:17,1
+DA:18,1
+DA:19,1
+DA:20,1
+DA:21,1
+DA:22,1
+DA:23,1
+DA:24,1
+DA:25,1
+DA:26,1
+DA:27,1
+DA:28,1
+DA:29,1
+DA:30,1
+DA:31,1
+DA:32,1
+DA:33,1
+DA:34,1
+DA:35,1
+DA:36,1
+DA:37,1
+DA:38,1
+DA:39,1
+LF:39
+LH:39
+BRDA:35,0,0,1
+BRF:1
+BRH:1
+end_of_record
+TN:
+SF:src/typography/Typography.tsx
+FN:139,typography
+FN:175,getComponent
+FN:275,Typography
+FNF:3
+FNH:3
+FNDA:4,typography
+FNDA:4,getComponent
+FNDA:4,Typography
+DA:1,1
+DA:2,1
+DA:3,1
+DA:4,1
+DA:5,1
+DA:6,1
+DA:7,1
+DA:8,1
+DA:9,1
+DA:10,1
+DA:11,1
+DA:12,1
+DA:13,1
+DA:14,1
+DA:15,1
+DA:16,1
+DA:17,1
+DA:18,1
+DA:19,1
+DA:20,1
+DA:21,1
+DA:22,1
+DA:23,1
+DA:24,1
+DA:25,1
+DA:26,1
+DA:27,1
+DA:28,1
+DA:29,1
+DA:30,1
+DA:31,1
+DA:32,1
+DA:33,1
+DA:34,1
+DA:35,1
+DA:36,1
+DA:37,1
+DA:38,1
+DA:39,1
+DA:40,1
+DA:41,1
+DA:42,1
+DA:43,1
+DA:44,1
+DA:45,1
+DA:46,1
+DA:47,1
+DA:48,1
+DA:49,1
+DA:50,1
+DA:51,1
+DA:52,1
+DA:53,1
+DA:54,1
+DA:55,1
+DA:56,1
+DA:57,1
+DA:58,1
+DA:59,1
+DA:60,1
+DA:61,1
+DA:62,1
+DA:63,1
+DA:64,1
+DA:65,1
+DA:66,1
+DA:67,1
+DA:68,1
+DA:69,1
+DA:70,1
+DA:71,1
+DA:72,1
+DA:73,1
+DA:74,1
+DA:75,1
+DA:76,1
+DA:77,1
+DA:78,1
+DA:79,1
+DA:80,1
+DA:81,1
+DA:82,1
+DA:83,1
+DA:84,1
+DA:85,1
+DA:86,1
+DA:87,1
+DA:88,1
+DA:89,1
+DA:90,1
+DA:91,1
+DA:92,1
+DA:93,1
+DA:94,1
+DA:95,1
+DA:96,1
+DA:97,1
+DA:98,1
+DA:99,1
+DA:100,1
+DA:101,1
+DA:102,1
+DA:103,1
+DA:104,1
+DA:105,1
+DA:106,1
+DA:107,1
+DA:108,1
+DA:109,1
+DA:110,1
+DA:111,1
+DA:112,1
+DA:113,1
+DA:114,1
+DA:115,1
+DA:116,1
+DA:117,1
+DA:118,1
+DA:119,1
+DA:120,1
+DA:121,1
+DA:122,1
+DA:123,1
+DA:124,1
+DA:125,1
+DA:126,1
+DA:127,1
+DA:128,1
+DA:129,1
+DA:130,1
+DA:131,1
+DA:132,1
+DA:133,1
+DA:134,1
+DA:135,1
+DA:136,1
+DA:137,1
+DA:138,1
+DA:139,1
+DA:140,4
+DA:141,4
+DA:142,4
+DA:143,4
+DA:144,4
+DA:145,4
+DA:146,4
+DA:147,4
+DA:148,4
+DA:149,4
+DA:150,4
+DA:151,4
+DA:152,1
+DA:153,1
+DA:154,1
+DA:155,1
+DA:156,1
+DA:157,1
+DA:158,1
+DA:159,1
+DA:160,1
+DA:161,1
+DA:162,1
+DA:163,1
+DA:164,1
+DA:165,1
+DA:166,1
+DA:167,1
+DA:168,1
+DA:169,1
+DA:170,1
+DA:171,1
+DA:172,1
+DA:173,1
+DA:174,1
+DA:175,4
+DA:176,4
+DA:177,4
+DA:178,4
+DA:179,4
+DA:180,0
+DA:181,0
+DA:182,4
+DA:183,4
+DA:184,4
+DA:185,0
+DA:186,4
+DA:187,0
+DA:188,4
+DA:189,0
+DA:190,4
+DA:191,0
+DA:192,4
+DA:193,0
+DA:194,4
+DA:195,4
+DA:196,4
+DA:197,0
+DA:198,4
+DA:199,4
+DA:200,4
+DA:201,4
+DA:202,0
+DA:203,4
+DA:204,0
+DA:205,4
+DA:206,4
+DA:207,1
+DA:208,1
+DA:209,1
+DA:210,1
+DA:211,1
+DA:212,1
+DA:213,1
+DA:214,1
+DA:215,1
+DA:216,1
+DA:217,1
+DA:218,1
+DA:219,1
+DA:220,1
+DA:221,1
+DA:222,1
+DA:223,1
+DA:224,1
+DA:225,1
+DA:226,1
+DA:227,1
+DA:228,1
+DA:229,1
+DA:230,1
+DA:231,1
+DA:232,1
+DA:233,1
+DA:234,1
+DA:235,1
+DA:236,1
+DA:237,1
+DA:238,1
+DA:239,1
+DA:240,1
+DA:241,1
+DA:242,1
+DA:243,1
+DA:244,1
+DA:245,1
+DA:246,1
+DA:247,1
+DA:248,1
+DA:249,1
+DA:250,1
+DA:251,1
+DA:252,1
+DA:253,1
+DA:254,1
+DA:255,1
+DA:256,1
+DA:257,1
+DA:258,1
+DA:259,1
+DA:260,1
+DA:261,1
+DA:262,1
+DA:263,1
+DA:264,1
+DA:265,1
+DA:266,1
+DA:267,1
+DA:268,1
+DA:269,1
+DA:270,1
+DA:271,1
+DA:272,1
+DA:273,1
+DA:274,1
+DA:275,1
+DA:276,4
+DA:277,4
+DA:278,4
+DA:279,4
+DA:280,4
+DA:281,4
+DA:282,4
+DA:283,4
+DA:284,4
+DA:285,4
+DA:286,4
+DA:287,4
+DA:288,4
+DA:289,4
+DA:290,4
+DA:291,4
+DA:292,4
+DA:293,4
+DA:294,4
+DA:295,4
+DA:296,4
+DA:297,4
+DA:298,4
+DA:299,4
+DA:300,4
+DA:301,4
+DA:302,4
+DA:303,4
+DA:304,4
+DA:305,4
+DA:306,4
+DA:307,4
+DA:308,4
+DA:309,4
+DA:310,4
+DA:311,4
+DA:312,4
+DA:313,4
+DA:314,1
+LF:314
+LH:304
+BRDA:139,0,0,4
+BRDA:175,1,0,4
+BRDA:179,2,0,0
+BRDA:184,3,0,0
+BRDA:186,4,0,0
+BRDA:188,5,0,0
+BRDA:190,6,0,0
+BRDA:192,7,0,0
+BRDA:194,8,0,0
+BRDA:195,9,0,0
+BRDA:196,10,0,0
+BRDA:201,11,0,0
+BRDA:203,12,0,0
+BRDA:275,13,0,4
+BRF:14
+BRH:3
+end_of_record

package/dist/_box-shadows.scss

@@ -168,8 +168,16 @@ $box-shadow-3-layers: (
       }
     }
 
-    #{$active-string} {
-      opacity: 1;
+    @if $active-selectors == "&:hover" {
+      @include utils.mouse-hover {
+        #{$active-string} {
+          opacity: 1;
+        }
+      }
+    } @else {
+      #{$active-string} {
+        opacity: 1;
+      }
     }
   }
 }
@@ -179,6 +187,7 @@ $box-shadow-3-layers: (
   $end-z-value,
   $active-selectors,
   $pseudo-before: true,
+  $pseudo-z-index: 0,
   $duration: transition.$linear-duration,
   $color: $box-shadow-color,
   $opacity-boost: 0,
@@ -201,6 +210,7 @@ $box-shadow-3-layers: (
     $active-selectors,
     $duration,
     $pseudo-before,
+    $pseudo-z-index,
     $position-relative: $position-relative
   );
 }

package/dist/_core.scss

@@ -1,5 +1,3 @@
-@use "sass:list" as sassList;
-
 @forward "utils";
 @forward "media-queries/media-queries";
 @forward "box/box" as box-*;

package/dist/_utils.scss

@@ -5,6 +5,16 @@
 
 $disable-rtl: false !default;
 $disable-validation: false !default;
+// :has css selectors will arrive in firefox 121 so the browsers I support will
+// also support it by the time of the react-md release. allowing this to be
+// disabled just to be safe though
+$disable-has-selectors: false !default;
+// I'm reducing the required CSS for `:focus` styles by switching to
+// `:focus-visible` instead of `.keyboard-only .some-selector:focus` but there
+// are some things I don't like as much when switching from mouse to keyboard.
+// Defaulting to `:focus-visible`, but allowing the keyboard-only styles as well
+// if users are more familiar with it
+$disable-focus-visible: false !default;
 $temporary-element-z-index: 30 !default;
 
 $_swappable-positions: top right bottom left;
@@ -314,3 +324,15 @@ $_swappable-properties: text-align;
     @content;
   }
 }
+
+@mixin mouse-hover($wrap-in-hover: true) {
+  @media (hover: hover) and (pointer: fine) {
+    @if $wrap-in-hover {
+      &:hover {
+        @content;
+      }
+    } @else {
+      @content;
+    }
+  }
+}

package/dist/app-bar/AppBar.d.ts

@@ -1,4 +1,5 @@
 import { type ElementType, type HTMLAttributes, type Ref } from "react";
+import { type BoxOptions } from "../box/styles.js";
 import { type BackgroundColor } from "../cssUtils.js";
 import { type CssPosition } from "../types.js";
 declare module "react" {
@@ -33,7 +34,7 @@ export type AppBarTheme = BackgroundColor | "clear";
  */
 export type AppBarHeight = "auto" | "normal" | "prominent" | "dense" | "prominent-dense";
 /** @remarks \@since 6.0.0 */
-export interface AppBarClassNameOptions {
+export interface AppBarClassNameOptions extends Omit<BoxOptions, "fullWidth"> {
     className?: string;
     /**
      * Set this to `"fixed"` or `"sticky"` to set `position: fixed;` or
@@ -63,19 +64,13 @@ export interface AppBarClassNameOptions {
      * @see {@link AppBarTheme}
      */
     theme?: AppBarTheme;
-    /**
-     * Set this to `true` to update the `AppBar` to have `flex-direction: column`.
-     * This is useful when nesting `AppBar`s.
-     *
-     * @remarks \@since 6.0.0
-     * @defaultValue `false`
-     */
-    stacked?: boolean;
     /**
      * @defaultValue `stacked ? "auto" : "normal"`
      * @see {@link AppBarHeight}
      */
     height?: AppBarHeight;
+    /** @see {@link CssUtilsOptions.surfaceColor} */
+    surfaceColor?: "light" | "dark";
     /**
      * Set this to `true` if the app bar's positioning and width should be
      * changed whenever the scrollbar is visible on the page. This defaults to

package/dist/app-bar/AppBar.js

@@ -1,6 +1,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { cnb } from "cnbuilder";
 import { forwardRef } from "react";
+import { box } from "../box/styles.js";
 import { cssUtils } from "../cssUtils.js";
 import { bem } from "../utils/bem.js";
 const styles = bem("rmd-app-bar");
@@ -10,21 +11,33 @@ const styles = bem("rmd-app-bar");
  *
  * @remarks \@since 6.0.0
  */ export function appBar(options = {}) {
-    const { className, height = "normal", theme = "primary", stacked = false, position = "static", pagePosition = "top", scrollbarOffset = position === "fixed", disableElevation = false } = options;
+    const { className, theme = "primary", stacked, height = stacked ? "auto" : "normal", position = "static", pagePosition = "top", scrollbarOffset = position === "fixed", align, grid, gridColumns, gridName, justify, reversed, surfaceColor, disableWrap = true, disablePadding, disableElevation } = options;
     const surface = theme === "surface";
     const clear = theme === "clear";
     return cnb(styles({
         surface,
         [height]: height !== "normal",
         fixed: position !== "static",
-        sticky: position === "sticky",
         stacked,
+        sticky: position === "sticky",
         [pagePosition]: position !== "static",
         elevated: position !== "static" && !disableElevation,
         "scrollbar-offset": scrollbarOffset,
         "static-scrollbar-offset": position === "static" && scrollbarOffset
+    }), box({
+        align,
+        stacked,
+        fullWidth: true,
+        grid,
+        gridColumns,
+        gridName,
+        justify,
+        reversed,
+        disableWrap,
+        disablePadding
     }), cssUtils({
-        backgroundColor: !surface && !clear ? theme : undefined
+        backgroundColor: !surface && !clear ? theme : undefined,
+        surfaceColor
     }), className);
 }
 /**
@@ -53,18 +66,27 @@ const styles = bem("rmd-app-bar");
  * \@since 6.0.0 The `AppBar` was updated to use `gap` for spacing
  * instead of requiring the `AppBarNav` and `AppBarAction` components.
  */ export const AppBar = /*#__PURE__*/ forwardRef(function AppBar(props, ref) {
-    const { className, theme, stacked, height = stacked ? "auto" : "normal", position, pagePosition, scrollbarOffset, disableElevation, as: Component = position ? "header" : "div", children, ...remaining } = props;
+    const { className, theme, stacked, height, align, grid, gridName, justify, reversed, gridColumns, disableWrap, disablePadding, position, pagePosition, surfaceColor, scrollbarOffset, disableElevation, as: Component = position ? "header" : "div", children, ...remaining } = props;
     return /*#__PURE__*/ _jsx(Component, {
         ...remaining,
         className: appBar({
+            className,
             theme,
             position,
             pagePosition,
             disableElevation,
-            stacked,
+            scrollbarOffset,
             height,
-            className,
-            scrollbarOffset
+            grid,
+            gridName,
+            gridColumns,
+            align,
+            stacked,
+            justify,
+            reversed,
+            surfaceColor,
+            disableWrap,
+            disablePadding
         }),
         ref: ref,
         children: children

package/dist/app-bar/AppBar.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/app-bar/AppBar.tsx"],"sourcesContent":["import { cnb } from \"cnbuilder\";\nimport {\n  forwardRef,\n  type ElementType,\n  type HTMLAttributes,\n  type Ref,\n} from \"react\";\nimport { cssUtils, type BackgroundColor } from \"../cssUtils.js\";\nimport { type CssPosition } from \"../types.js\";\nimport { bem } from \"../utils/bem.js\";\n\ndeclare module \"react\" {\n  interface CSSProperties {\n    \"--rmd-app-bar-height\"?: string | number;\n    \"--rmd-app-bar-background-color\"?: string;\n    \"--rmd-app-bar-color\"?: string;\n    \"--rmd-app-bar-surface-background-color\"?: string;\n    \"--rmd-app-bar-surface-color\"?: string;\n  }\n}\n\nconst styles = bem(\"rmd-app-bar\");\n\nexport type AppBarPosition = \"top\" | \"bottom\";\n\n/**\n * - `\"clear\"` - the background color will be transparent\n * - `\"primary\"` - defaults to the current primary theme color\n * - `\"secondary\"` - defaults to the current secondary theme color\n * - `\"surface\"` - this will use the current surface background color which\n *   defaults to `#fff` for light themes, `#242424` for dark themes, and\n *   `#424242` for dark themes when the `$disable-dark-elevation` is set to\n *   `true`\n *\n * The default dark theme surface color also depends on the `$fixed-elevation`\n * value.\n */\nexport type AppBarTheme = BackgroundColor | \"clear\";\n\n/**\n * - `\"auto\"` - the height will be determined by the height of the content\n * - `\"normal\"` - defaults to `3.5rem` (`$height`)\n * - `\"prominent\"` - defaults to `7rem` (`$prominent-height`)\n * - `\"dense\"` - defaults to `3rem` (`$dense-height`)\n * - `\"prominent-dense\"` - defaults to `6rem` (`$prominent-dense-height`)\n */\nexport type AppBarHeight =\n  | \"auto\"\n  | \"normal\"\n  | \"prominent\"\n  | \"dense\"\n  | \"prominent-dense\";\n\n/** @remarks \\@since 6.0.0 */\nexport interface AppBarClassNameOptions {\n  className?: string;\n\n  /**\n   * Set this to `\"fixed\"` or `\"sticky\"` to set `position: fixed;` or\n   * `position: sticky;` to the app bar. The default position will be static and\n   * inline with other content.\n   *\n   * @defaultValue `'static'`\n   */\n  position?: CssPosition;\n\n  /**\n   * The position within the page to \"fix\" the `AppBar` when the `fixed` prop is\n   * enabled.\n   *\n   * @defaultValue `\"top\"`\n   */\n  pagePosition?: AppBarPosition;\n\n  /**\n   * Set this to `true` to remove the box-shadow.\n   *\n   * @defaultValue `false`\n   */\n  disableElevation?: boolean;\n\n  /**\n   * The theme to apply to the `AppBar`.\n   *\n   * @defaultValue `\"primary\"`\n   * @see {@link AppBarTheme}\n   */\n  theme?: AppBarTheme;\n\n  /**\n   * Set this to `true` to update the `AppBar` to have `flex-direction: column`.\n   * This is useful when nesting `AppBar`s.\n   *\n   * @remarks \\@since 6.0.0\n   * @defaultValue `false`\n   */\n  stacked?: boolean;\n\n  /**\n   * @defaultValue `stacked ? \"auto\" : \"normal\"`\n   * @see {@link AppBarHeight}\n   */\n  height?: AppBarHeight;\n\n  /**\n   * Set this to `true` if the app bar's positioning and width should be\n   * changed whenever the scrollbar is visible on the page. This defaults to\n   * `true` when the {@link position} prop is `true` so that once dialogs and menus\n   * become visible the contents in the app bar do not need to be repainted.\n   *\n   * @remarks \\@since 6.0.0\n   * @defaultValue `position === \"fixed\"`\n   */\n  scrollbarOffset?: boolean;\n}\n\n/**\n * Apply the `className`s for a tree component. This will be type-safe if using\n * typescript.\n *\n * @remarks \\@since 6.0.0\n */\nexport function appBar(options: AppBarClassNameOptions = {}): string {\n  const {\n    className,\n    height = \"normal\",\n    theme = \"primary\",\n    stacked = false,\n    position = \"static\",\n    pagePosition = \"top\",\n    scrollbarOffset = position === \"fixed\",\n    disableElevation = false,\n  } = options;\n  const surface = theme === \"surface\";\n  const clear = theme === \"clear\";\n\n  return cnb(\n    styles({\n      surface,\n      [height]: height !== \"normal\",\n      fixed: position !== \"static\",\n      sticky: position === \"sticky\",\n      stacked,\n      [pagePosition]: position !== \"static\",\n      elevated: position !== \"static\" && !disableElevation,\n      \"scrollbar-offset\": scrollbarOffset,\n      \"static-scrollbar-offset\": position === \"static\" && scrollbarOffset,\n    }),\n    cssUtils({\n      backgroundColor: !surface && !clear ? theme : undefined,\n    }),\n    className\n  );\n}\n\n/** @remarks \\@since 6.0.0 */\nexport type CustomAppBarComponent = ElementType<\n  HTMLAttributes<HTMLDivElement> & {\n    ref?: Ref<HTMLDivElement>;\n    className: string;\n  }\n>;\n\n/**\n * @remarks\n * \\@since 6.0.0 Renamed the `component` prop to `as` and updated the default\n * value to be a `\"div\"` when `fixed` is `false`.\n * \\@since 6.0.0 Renamed the `fixedElevation` prop to `disableFixedElevation` to\n * match naming conventions when a feature is enabled by default.\n * \\@since 6.0.0 Removed the `inheritColor` and `flexWrap` props since they are\n * no longer required.\n * \\@since 6.0.0 Removed the `fixed` prop in favor of the new `position` prop\n * which enables position `fixed` or `sticky` behavior.\n * \\@since 6.0.0 Added the {@link stacked} and {@link scrollbarOffset} props.\n */\nexport interface AppBarProps\n  extends HTMLAttributes<HTMLDivElement>,\n    AppBarClassNameOptions {\n  /** @defaultValue `fixed ? \"header\" : \"div\"` */\n  as?: CustomAppBarComponent;\n}\n\n/**\n * **Server Component**\n *\n * @example\n * Simple Example\n * ```tsx\n * import { AppBar, AppBarTitle, Button } from \"@react-md/core\";\n * import MenuIcon from \"@react-md/material-icons/MenuIcon\";\n * import MoreVertIcon from \"@react-md/material-icons/MoreVertIcon\";\n * import type { ReactElement } from \"react\";\n *\n * function Example(): ReactElement {\n *   return (\n *     <AppBar>\n *       <Button aria-label=\"Navigation\"><MenuIcon /></Button>\n *       <AppBarTitle>My Main Title</AppBarTitle>\n *       <Button aria-label=\"Options\"><MoreVertIcon /></Button>\n *     </AppBar>\n *   );\n * }\n * ```\n *\n * @remarks\n * \\@since 6.0.0 The `AppBar` was updated to use `gap` for spacing\n * instead of requiring the `AppBarNav` and `AppBarAction` components.\n */\nexport const AppBar = forwardRef<HTMLDivElement, AppBarProps>(\n  function AppBar(props, ref) {\n    const {\n      className,\n      theme,\n      stacked,\n      height = stacked ? \"auto\" : \"normal\",\n      position,\n      pagePosition,\n      scrollbarOffset,\n      disableElevation,\n      as: Component = position ? \"header\" : \"div\",\n      children,\n      ...remaining\n    } = props;\n\n    return (\n      <Component\n        {...remaining}\n        className={appBar({\n          theme,\n          position,\n          pagePosition,\n          disableElevation,\n          stacked,\n          height,\n          className,\n          scrollbarOffset,\n        })}\n        ref={ref}\n      >\n        {children}\n      </Component>\n    );\n  }\n);\n"],"names":["cnb","forwardRef","cssUtils","bem","styles","appBar","options","className","height","theme","stacked","position","pagePosition","scrollbarOffset","disableElevation","surface","clear","fixed","sticky","elevated","backgroundColor","undefined","AppBar","props","ref","as","Component","children","remaining"],"mappings":";AAAA,SAASA,GAAG,QAAQ,YAAY;AAChC,SACEC,UAAU,QAIL,QAAQ;AACf,SAASC,QAAQ,QAA8B,iBAAiB;AAEhE,SAASC,GAAG,QAAQ,kBAAkB;AAYtC,MAAMC,SAASD,IAAI;AA+FnB;;;;;CAKC,GACD,OAAO,SAASE,OAAOC,UAAkC,CAAC,CAAC;IACzD,MAAM,EACJC,SAAS,EACTC,SAAS,QAAQ,EACjBC,QAAQ,SAAS,EACjBC,UAAU,KAAK,EACfC,WAAW,QAAQ,EACnBC,eAAe,KAAK,EACpBC,kBAAkBF,aAAa,OAAO,EACtCG,mBAAmB,KAAK,EACzB,GAAGR;IACJ,MAAMS,UAAUN,UAAU;IAC1B,MAAMO,QAAQP,UAAU;IAExB,OAAOT,IACLI,OAAO;QACLW;QACA,CAACP,OAAO,EAAEA,WAAW;QACrBS,OAAON,aAAa;QACpBO,QAAQP,aAAa;QACrBD;QACA,CAACE,aAAa,EAAED,aAAa;QAC7BQ,UAAUR,aAAa,YAAY,CAACG;QACpC,oBAAoBD;QACpB,2BAA2BF,aAAa,YAAYE;IACtD,IACAX,SAAS;QACPkB,iBAAiB,CAACL,WAAW,CAACC,QAAQP,QAAQY;IAChD,IACAd;AAEJ;AA6BA;;;;;;;;;;;;;;;;;;;;;;;;;CAyBC,GACD,OAAO,MAAMe,uBAASrB,WACpB,SAASqB,OAAOC,KAAK,EAAEC,GAAG;IACxB,MAAM,EACJjB,SAAS,EACTE,KAAK,EACLC,OAAO,EACPF,SAASE,UAAU,SAAS,QAAQ,EACpCC,QAAQ,EACRC,YAAY,EACZC,eAAe,EACfC,gBAAgB,EAChBW,IAAIC,YAAYf,WAAW,WAAW,KAAK,EAC3CgB,QAAQ,EACR,GAAGC,WACJ,GAAGL;IAEJ,qBACE,KAACG;QACE,GAAGE,SAAS;QACbrB,WAAWF,OAAO;YAChBI;YACAE;YACAC;YACAE;YACAJ;YACAF;YACAD;YACAM;QACF;QACAW,KAAKA;kBAEJG;;AAGP,GACA"}
+{"version":3,"sources":["../../src/app-bar/AppBar.tsx"],"sourcesContent":["import { cnb } from \"cnbuilder\";\nimport {\n  forwardRef,\n  type ElementType,\n  type HTMLAttributes,\n  type Ref,\n} from \"react\";\nimport { box, type BoxOptions } from \"../box/styles.js\";\nimport {\n  cssUtils,\n  type BackgroundColor,\n  // eslint-disable-next-line @typescript-eslint/no-unused-vars\n  type CssUtilsOptions,\n} from \"../cssUtils.js\";\nimport { type CssPosition } from \"../types.js\";\nimport { bem } from \"../utils/bem.js\";\n\ndeclare module \"react\" {\n  interface CSSProperties {\n    \"--rmd-app-bar-height\"?: string | number;\n    \"--rmd-app-bar-background-color\"?: string;\n    \"--rmd-app-bar-color\"?: string;\n    \"--rmd-app-bar-surface-background-color\"?: string;\n    \"--rmd-app-bar-surface-color\"?: string;\n  }\n}\n\nconst styles = bem(\"rmd-app-bar\");\n\nexport type AppBarPosition = \"top\" | \"bottom\";\n\n/**\n * - `\"clear\"` - the background color will be transparent\n * - `\"primary\"` - defaults to the current primary theme color\n * - `\"secondary\"` - defaults to the current secondary theme color\n * - `\"surface\"` - this will use the current surface background color which\n *   defaults to `#fff` for light themes, `#242424` for dark themes, and\n *   `#424242` for dark themes when the `$disable-dark-elevation` is set to\n *   `true`\n *\n * The default dark theme surface color also depends on the `$fixed-elevation`\n * value.\n */\nexport type AppBarTheme = BackgroundColor | \"clear\";\n\n/**\n * - `\"auto\"` - the height will be determined by the height of the content\n * - `\"normal\"` - defaults to `3.5rem` (`$height`)\n * - `\"prominent\"` - defaults to `7rem` (`$prominent-height`)\n * - `\"dense\"` - defaults to `3rem` (`$dense-height`)\n * - `\"prominent-dense\"` - defaults to `6rem` (`$prominent-dense-height`)\n */\nexport type AppBarHeight =\n  | \"auto\"\n  | \"normal\"\n  | \"prominent\"\n  | \"dense\"\n  | \"prominent-dense\";\n\n/** @remarks \\@since 6.0.0 */\nexport interface AppBarClassNameOptions extends Omit<BoxOptions, \"fullWidth\"> {\n  className?: string;\n\n  /**\n   * Set this to `\"fixed\"` or `\"sticky\"` to set `position: fixed;` or\n   * `position: sticky;` to the app bar. The default position will be static and\n   * inline with other content.\n   *\n   * @defaultValue `'static'`\n   */\n  position?: CssPosition;\n\n  /**\n   * The position within the page to \"fix\" the `AppBar` when the `fixed` prop is\n   * enabled.\n   *\n   * @defaultValue `\"top\"`\n   */\n  pagePosition?: AppBarPosition;\n\n  /**\n   * Set this to `true` to remove the box-shadow.\n   *\n   * @defaultValue `false`\n   */\n  disableElevation?: boolean;\n\n  /**\n   * The theme to apply to the `AppBar`.\n   *\n   * @defaultValue `\"primary\"`\n   * @see {@link AppBarTheme}\n   */\n  theme?: AppBarTheme;\n\n  /**\n   * @defaultValue `stacked ? \"auto\" : \"normal\"`\n   * @see {@link AppBarHeight}\n   */\n  height?: AppBarHeight;\n\n  /** @see {@link CssUtilsOptions.surfaceColor} */\n  surfaceColor?: \"light\" | \"dark\";\n\n  /**\n   * Set this to `true` if the app bar's positioning and width should be\n   * changed whenever the scrollbar is visible on the page. This defaults to\n   * `true` when the {@link position} prop is `true` so that once dialogs and menus\n   * become visible the contents in the app bar do not need to be repainted.\n   *\n   * @remarks \\@since 6.0.0\n   * @defaultValue `position === \"fixed\"`\n   */\n  scrollbarOffset?: boolean;\n}\n\n/**\n * Apply the `className`s for a tree component. This will be type-safe if using\n * typescript.\n *\n * @remarks \\@since 6.0.0\n */\nexport function appBar(options: AppBarClassNameOptions = {}): string {\n  const {\n    className,\n    theme = \"primary\",\n    stacked,\n    height = stacked ? \"auto\" : \"normal\",\n    position = \"static\",\n    pagePosition = \"top\",\n    scrollbarOffset = position === \"fixed\",\n    align,\n    grid,\n    gridColumns,\n    gridName,\n    justify,\n    reversed,\n    surfaceColor,\n    disableWrap = true,\n    disablePadding,\n    disableElevation,\n  } = options;\n  const surface = theme === \"surface\";\n  const clear = theme === \"clear\";\n\n  return cnb(\n    styles({\n      surface,\n      [height]: height !== \"normal\",\n      fixed: position !== \"static\",\n      stacked,\n      sticky: position === \"sticky\",\n      [pagePosition]: position !== \"static\",\n      elevated: position !== \"static\" && !disableElevation,\n      \"scrollbar-offset\": scrollbarOffset,\n      \"static-scrollbar-offset\": position === \"static\" && scrollbarOffset,\n    }),\n    box({\n      align,\n      stacked,\n      fullWidth: true,\n      grid,\n      gridColumns,\n      gridName,\n      justify,\n      reversed,\n      disableWrap,\n      disablePadding,\n    }),\n    cssUtils({\n      backgroundColor: !surface && !clear ? theme : undefined,\n      surfaceColor,\n    }),\n    className\n  );\n}\n\n/** @remarks \\@since 6.0.0 */\nexport type CustomAppBarComponent = ElementType<\n  HTMLAttributes<HTMLDivElement> & {\n    ref?: Ref<HTMLDivElement>;\n    className: string;\n  }\n>;\n\n/**\n * @remarks\n * \\@since 6.0.0 Renamed the `component` prop to `as` and updated the default\n * value to be a `\"div\"` when `fixed` is `false`.\n * \\@since 6.0.0 Renamed the `fixedElevation` prop to `disableFixedElevation` to\n * match naming conventions when a feature is enabled by default.\n * \\@since 6.0.0 Removed the `inheritColor` and `flexWrap` props since they are\n * no longer required.\n * \\@since 6.0.0 Removed the `fixed` prop in favor of the new `position` prop\n * which enables position `fixed` or `sticky` behavior.\n * \\@since 6.0.0 Added the {@link stacked} and {@link scrollbarOffset} props.\n */\nexport interface AppBarProps\n  extends HTMLAttributes<HTMLDivElement>,\n    AppBarClassNameOptions {\n  /** @defaultValue `fixed ? \"header\" : \"div\"` */\n  as?: CustomAppBarComponent;\n}\n\n/**\n * **Server Component**\n *\n * @example\n * Simple Example\n * ```tsx\n * import { AppBar, AppBarTitle, Button } from \"@react-md/core\";\n * import MenuIcon from \"@react-md/material-icons/MenuIcon\";\n * import MoreVertIcon from \"@react-md/material-icons/MoreVertIcon\";\n * import type { ReactElement } from \"react\";\n *\n * function Example(): ReactElement {\n *   return (\n *     <AppBar>\n *       <Button aria-label=\"Navigation\"><MenuIcon /></Button>\n *       <AppBarTitle>My Main Title</AppBarTitle>\n *       <Button aria-label=\"Options\"><MoreVertIcon /></Button>\n *     </AppBar>\n *   );\n * }\n * ```\n *\n * @remarks\n * \\@since 6.0.0 The `AppBar` was updated to use `gap` for spacing\n * instead of requiring the `AppBarNav` and `AppBarAction` components.\n */\nexport const AppBar = forwardRef<HTMLDivElement, AppBarProps>(\n  function AppBar(props, ref) {\n    const {\n      className,\n      theme,\n      stacked,\n      height,\n      align,\n      grid,\n      gridName,\n      justify,\n      reversed,\n      gridColumns,\n      disableWrap,\n      disablePadding,\n      position,\n      pagePosition,\n      surfaceColor,\n      scrollbarOffset,\n      disableElevation,\n      as: Component = position ? \"header\" : \"div\",\n      children,\n      ...remaining\n    } = props;\n\n    return (\n      <Component\n        {...remaining}\n        className={appBar({\n          className,\n          theme,\n          position,\n          pagePosition,\n          disableElevation,\n          scrollbarOffset,\n          height,\n          grid,\n          gridName,\n          gridColumns,\n          align,\n          stacked,\n          justify,\n          reversed,\n          surfaceColor,\n          disableWrap,\n          disablePadding,\n        })}\n        ref={ref}\n      >\n        {children}\n      </Component>\n    );\n  }\n);\n"],"names":["cnb","forwardRef","box","cssUtils","bem","styles","appBar","options","className","theme","stacked","height","position","pagePosition","scrollbarOffset","align","grid","gridColumns","gridName","justify","reversed","surfaceColor","disableWrap","disablePadding","disableElevation","surface","clear","fixed","sticky","elevated","fullWidth","backgroundColor","undefined","AppBar","props","ref","as","Component","children","remaining"],"mappings":";AAAA,SAASA,GAAG,QAAQ,YAAY;AAChC,SACEC,UAAU,QAIL,QAAQ;AACf,SAASC,GAAG,QAAyB,mBAAmB;AACxD,SACEC,QAAQ,QAIH,iBAAiB;AAExB,SAASC,GAAG,QAAQ,kBAAkB;AAYtC,MAAMC,SAASD,IAAI;AAyFnB;;;;;CAKC,GACD,OAAO,SAASE,OAAOC,UAAkC,CAAC,CAAC;IACzD,MAAM,EACJC,SAAS,EACTC,QAAQ,SAAS,EACjBC,OAAO,EACPC,SAASD,UAAU,SAAS,QAAQ,EACpCE,WAAW,QAAQ,EACnBC,eAAe,KAAK,EACpBC,kBAAkBF,aAAa,OAAO,EACtCG,KAAK,EACLC,IAAI,EACJC,WAAW,EACXC,QAAQ,EACRC,OAAO,EACPC,QAAQ,EACRC,YAAY,EACZC,cAAc,IAAI,EAClBC,cAAc,EACdC,gBAAgB,EACjB,GAAGjB;IACJ,MAAMkB,UAAUhB,UAAU;IAC1B,MAAMiB,QAAQjB,UAAU;IAExB,OAAOT,IACLK,OAAO;QACLoB;QACA,CAACd,OAAO,EAAEA,WAAW;QACrBgB,OAAOf,aAAa;QACpBF;QACAkB,QAAQhB,aAAa;QACrB,CAACC,aAAa,EAAED,aAAa;QAC7BiB,UAAUjB,aAAa,YAAY,CAACY;QACpC,oBAAoBV;QACpB,2BAA2BF,aAAa,YAAYE;IACtD,IACAZ,IAAI;QACFa;QACAL;QACAoB,WAAW;QACXd;QACAC;QACAC;QACAC;QACAC;QACAE;QACAC;IACF,IACApB,SAAS;QACP4B,iBAAiB,CAACN,WAAW,CAACC,QAAQjB,QAAQuB;QAC9CX;IACF,IACAb;AAEJ;AA6BA;;;;;;;;;;;;;;;;;;;;;;;;;CAyBC,GACD,OAAO,MAAMyB,uBAAShC,WACpB,SAASgC,OAAOC,KAAK,EAAEC,GAAG;IACxB,MAAM,EACJ3B,SAAS,EACTC,KAAK,EACLC,OAAO,EACPC,MAAM,EACNI,KAAK,EACLC,IAAI,EACJE,QAAQ,EACRC,OAAO,EACPC,QAAQ,EACRH,WAAW,EACXK,WAAW,EACXC,cAAc,EACdX,QAAQ,EACRC,YAAY,EACZQ,YAAY,EACZP,eAAe,EACfU,gBAAgB,EAChBY,IAAIC,YAAYzB,WAAW,WAAW,KAAK,EAC3C0B,QAAQ,EACR,GAAGC,WACJ,GAAGL;IAEJ,qBACE,KAACG;QACE,GAAGE,SAAS;QACb/B,WAAWF,OAAO;YAChBE;YACAC;YACAG;YACAC;YACAW;YACAV;YACAH;YACAK;YACAE;YACAD;YACAF;YACAL;YACAS;YACAC;YACAC;YACAC;YACAC;QACF;QACAY,KAAKA;kBAEJG;;AAGP,GACA"}