@react-md/core 1.0.0-next.16 → 1.0.0-next.18

package/dist/_utils.scss

@@ -3,37 +3,58 @@
 @use "sass:meta";
 @use "sass:string";
 
+// Set this to `true` if you do not need to support RTL languages
 $disable-rtl: false !default;
+
+// Set this to `true` if you want to disable build-time validation for
+// overriding react-md values. No idea why you would want this though.
 $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
+
+// Set this to `true` to remove the `:has` selectors in the code if you need to
+// support older browsers even though I don't really support older browsers.
 $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
+
+// Set this to `true` if focus styles should be applied with
+// `.rmd-keyboard-mode :focus` instead of `:focus-visible`.
 $disable-focus-visible: false !default;
+
+// The default z-index to use for temporary elements
 $temporary-element-z-index: 30 !default;
 
+// @internal
 $_swappable-positions: top right bottom left;
+// @internal
 $_swappable-position-prefixes: border margin padding;
+// @internal
 $_swappable-properties: text-align;
 
+// This function can be used to offset `position: fixed` or `position: absolute`
+// elements by the current scrollbar size. The variable will only be set while
+// the `useScrollLock` hook has been triggered.
+//
+// @example
+// ```scss
+// @use "@react-md/core";
+//
+// .selector {
+//   margin-right: core.scrollbar-size();
+// }
+// ```
+//
+// @returns {string} `var(--rmd-scrollbar-size, 0px)`}
 @function scrollbar-size() {
   @return var(--rmd-scrollbar-size, 0px);
 }
 
-/// Replace `$search` with `$replace` in `$string`
-///
-/// @author Hugo Giraudel
-/// @access private
-/// @param {String} string - Initial string
-/// @param {String} search - Substring to replace
-/// @param {String} replace - New value
-/// @return {String} - Updated string
-/// @link https://css-tricks.com/snippets/sass/str-replace-function Source from CSS Tricks
+// Replace `$search` with `$replace` in `$string`
+//
+// @author Hugo Giraudel
+// @internal
+// @param {string} string - Initial string
+// @param {string} search - Substring to replace
+// @param {string} replace - New value
+// @returns {string} Updated string
+// @link https://css-tricks.com/snippets/sass/str-replace-function Source from CSS Tricks
 @function str-replace($string, $search, $replace) {
   $index: string.index($string, $search);
 
@@ -49,10 +70,22 @@ $_swappable-properties: text-align;
   @return $string;
 }
 
+// Used to negate a number or a variable that might be a `var` statement.
+//
+// @param {string} css-variable - The `var()` or number to negate.
+// @returns {string} `calc(-1 * #{$css-variable})`}
 @function negate-var($css-variable) {
   @return calc(-1 * #{$css-variable});
 }
 
+// Internal validation function to ensure the user overrides variables with
+// accepted values.
+//
+// @param {List|Map} list-or-map - The list or map to validate against
+// @param {string|number} key-or-value - Either the map key or list value to
+// check if exists
+// @param {string} error-message - The additional error message to display
+// @returns {any} the value from the list or map
 @function validate($list-or-map, $key-or-value, $error-message) {
   $type: meta.type-of($list-or-map);
   $is-map: $type == map;
@@ -74,6 +107,13 @@ $_swappable-properties: text-align;
   @return if($is-list, $key-or-value, map.get($list-or-map, $key-or-value));
 }
 
+// Used to get a custom property variable name.
+//
+// @internal
+// @param {List} variables - The list of available variables
+// @param {string} name - The variable name
+// @param {string} group - The variable group. i.e. button, form, app-bar
+// @returns {string} the name to be used in a `var()`
 @function get-var-name($variables, $name, $group) {
   @if $group == icon {
     @if $name == symbol-grade {
@@ -131,6 +171,40 @@ $_swappable-properties: text-align;
   @return "--rmd-" + $prefix + validate($variables, $name, $group + " var");
 }
 
+// Converts a `property: value` map into styles. Also supports custom selectors.
+//
+// Note: If the styles include complex selectors like `.parent &`, it will need
+// to be the last mixin in the current block or wrap other styles in `& {}`
+//
+// @example Simple Example
+// ```scss
+// $styles: (
+//   background-color: red,
+//   color: blue,
+//   padding: 0.25rem,
+// );
+// .container {
+//   @include core.map-to-styles($styles);
+// }
+// ```
+//
+// @example Selectors
+// ```scss
+// $styles: (
+//   background-color: red,
+//
+//   '&:hover': (
+//     background-color: orange,
+//     color: red,
+//   ),
+// );
+//
+// .container {
+//   @include core.map-to-styles($styles);
+// }
+// ```
+//
+// @param {Map} map - the map of styles to generate
 @mixin map-to-styles($map) {
   @each $property, $value in $map {
     @if meta.type-of($value) == map {
@@ -143,6 +217,31 @@ $_swappable-properties: text-align;
   }
 }
 
+// Used to convert a map into a css animation
+//
+// @example
+// ```scss
+// $animation: (
+//   0%: (
+//     opacity: 0.06,
+//   ),
+//   60%: (
+//     opacity: 0.1,
+//   ),
+//   80%: (
+//     opacity: 0.08,
+//   ),
+//   100%: (
+//     opacity: 0.06,
+//   ),
+// );
+//
+// @include core.keyframes(my-animation) {
+//   @include core.map-to-animation($animation);
+// }
+// ```
+//
+// @param {Map} map - the map of animation styles to generate
 @mixin map-to-animation($map) {
   @each $percentage, $styles in $map {
     #{$percentage} {
@@ -151,6 +250,24 @@ $_swappable-properties: text-align;
   }
 }
 
+// Generates a pseudo element with most used styles.
+//
+// @example
+// ```scss
+// .container {
+//   @include core.pseudo-element;
+//
+//   position: relative;
+// }
+// ```
+//
+// @param {number} z-index - The z-index for the pseudo element.
+// @param {boolean} fixed - Set to `true` to change from `position: absolute`
+// to `position: fixed`
+// @param {number} inset - Used to apply any inset styles from the parent
+// element.
+// @param {string} border-radius - You normally want to inherit the
+// `border-radius`, but it can be configured with this param if needed.
 @mixin pseudo-element(
   $z-index: 0,
   $fixed: false,
@@ -165,6 +282,7 @@ $_swappable-properties: text-align;
   z-index: $z-index;
 }
 
+// @internal
 @mixin _sr-only-focusable {
   &:active,
   &:focus {
@@ -178,6 +296,16 @@ $_swappable-properties: text-align;
   }
 }
 
+// Generates styles to create a screen-reader only visible element but can also
+// allow the element to be visible to everyone while focused.
+//
+// You'll normally just want to use the `SrOnly` component or `cssUtils` instead
+// of this mixin.
+//
+// @param {boolean} focusable - Set to `true` to update the element so
+// it will become visible to everyone while focused
+// @param {string} focus-selector - A selector to show that the
+// element has been focused
 @mixin sr-only($focusable: false, $focus-selector: "&--focusable") {
   border: 0;
   clip: rect(1px, 1px, 1px, 1px);
@@ -201,6 +329,10 @@ $_swappable-properties: text-align;
   }
 }
 
+// Used to hide the scrollbar for an element while still remaining scrollable.
+//
+// NOTE: This is generally not recommended for accessibility since most users do
+// not know how to scroll without a visible scrollbar
 @mixin hide-scrollbar {
   scrollbar-width: none;
 
@@ -210,12 +342,21 @@ $_swappable-properties: text-align;
   }
 }
 
+// Mostly an internal mixin for generating styles that might be created from a CSS
+// module. This really just wraps the provided selector in `:global` and
+// wrapping the rest of the content in `:local`.
+//
+// @param {string} selector - The selector that should not be affected by CSS
+// module behavior
+// @param {boolean} css-modules - Set to `true` when used within a CSS Module
+// @param {boolean} parent-selector - Updates the selector to end with ` &` so
+// it inherits the current scope
 @mixin optional-css-modules(
-  $class-name,
+  $selector,
   $css-modules: false,
   $parent-selector: true
 ) {
-  $selector: if($css-modules, ":global #{$class-name} :local", $class-name);
+  $selector: if($css-modules, ":global #{$selector} :local", $selector);
   $selector: if($parent-selector, "#{$selector} &", $selector);
 
   #{$selector} {
@@ -223,6 +364,23 @@ $_swappable-properties: text-align;
   }
 }
 
+// Used to apply styles when using rtl behavior
+//
+// Note: This will need to be included at the end of a block with the new Sass
+// rules or prefix styles with `& {}`
+//
+// @example
+// ```scss
+// .selector {
+//   margin-right: 1rem;
+//
+//   // swap the margin in RTL
+//   @include core.rtl {
+//     margin-left: 1rem;
+//     margin-right: auto;
+//   }
+// }
+// ```
 @mixin rtl {
   @if not $disable-rtl {
     [dir="rtl"] & {
@@ -231,7 +389,13 @@ $_swappable-properties: text-align;
   }
 }
 
-@function _swap-position($property) {
+// This isn't really used anymore after the latest Sass changes since CSS will
+// natively support nesting.
+//
+// @internal
+// @param {string} property - The property to swap
+// @returns {string} the swapped property
+@function swap-position($property) {
   $prefix: "";
   $position: $property;
   @each $valid-prefix in $_swappable-position-prefixes {
@@ -254,58 +418,21 @@ $_swappable-properties: text-align;
     $next-position: top;
   }
 
-  @return "#{$prefix}#{$next-position}";
-}
-
-@mixin auto-rtl-group($styles, $swapped-styles: ()) {
-  @include map-to-styles($styles);
-  @include rtl {
-    @each $property, $value in $styles {
-      $inversed-property: _swap-position($property);
-      $inversed-value: auto;
-      @if map.has-key($swapped-styles, $property) {
-        $inversed-value: map.get($swapped-styles, $property);
-      } @else if map.has-key($styles, $inversed-property) {
-        $inversed-value: map.get($swapped-styles, $inversed-property);
-      }
-
-      #{$property}: #{$inversed-value};
-      #{$inversed-property}: #{$value};
-
-      @content;
-    }
-  }
-}
-
-@mixin auto-rtl($property, $value, $swapped-value: null) {
-  @include rtl {
-    @if list.index($_swappable-properties, $property) {
-      $swapped-property-value: $swapped-value or _swap-position($value);
-      #{$property}: #{$swapped-property-value};
-    } @else {
-      $inversed-property: _swap-position($property);
-      @if not $swapped-value {
-        $swapped-value: auto;
-
-        @each $prefix in $_swappable-position-prefixes {
-          @if string.index($property, "#{$prefix}-") {
-            $swapped-value: 0;
-          }
-        }
-      }
-
-      #{$property}: #{$swapped-value};
-      #{$inversed-property}: #{$value};
-    }
-    @content;
-  }
-
-  #{$property}: #{$value};
+  @return #{$prefix}#{$next-position};
 }
 
+// Used to apply styles only while the user is using a keyboard. This relies on
+// the `UserInteractionModeProvider` to work correctly.
+//
+// Note: This will need to be included at the end of a block with the new Sass
+// rules or prefix styles with `& {}`
+//
+// @param {boolean} css-modules - Set to `true` when used within a CSS Module
+// @param {boolean} parent-selector - Updates the selector to end with ` &` so
+// it inherits the current scope
 @mixin keyboard-only($css-modules: false, $parent-selector: true) {
   @include optional-css-modules(
-    ".keyboard-mode",
+    ".rmd-keyboard-mode",
     $css-modules,
     $parent-selector
   ) {
@@ -313,18 +440,60 @@ $_swappable-properties: text-align;
   }
 }
 
-@mixin mouse-only($css-modules: false) {
-  @include optional-css-modules(".mouse-mode", $css-modules) {
+// Used to apply styles only while the user is using a mouse. This relies on
+// the `UserInteractionModeProvider` to work correctly.
+//
+// Note: This will need to be included at the end of a block with the new Sass
+// rules or prefix styles with `& {}`
+//
+// @param {boolean} css-modules - Set to `true` when used within a CSS Module
+// @param {boolean} parent-selector - Updates the selector to end with ` &` so
+// it inherits the current scope
+@mixin mouse-only($css-modules: false, $parent-selector: true) {
+  @include optional-css-modules(
+    ".rmd-mouse-mode",
+    $css-modules,
+    $parent-selector
+  ) {
     @content;
   }
 }
 
-@mixin touch-only($css-modules: false) {
-  @include optional-css-modules(".touch-mode", $css-modules) {
+// Used to apply styles only while the user is using a touch device. This relies
+// on the `UserInteractionModeProvider` to work correctly.
+//
+// Note: This will need to be included at the end of a block with the new Sass
+// rules or prefix styles with `& {}`
+//
+// @param {boolean} css-modules - Set to `true` when used within a CSS Module
+// @param {boolean} parent-selector - Updates the selector to end with ` &` so
+// it inherits the current scope
+@mixin touch-only($css-modules: false, $parent-selector: true) {
+  @include optional-css-modules(
+    ".rmd-touch-mode",
+    $css-modules,
+    $parent-selector
+  ) {
     @content;
   }
 }
 
+// A helper mixin to apply hover styles only when the user is using a mouse. If
+// you just use `:hover`, the styles will also be applied after touching an
+// element on touch screens until another element is focused.
+//
+// @example
+// ```scss
+// .selector {
+//
+//   @include core.mouse-hover {
+//     background-color: red;
+//   }
+// }
+// ```
+//
+// @param {boolean} wrap-in-hover - Set this to `false` if the content should
+// not automatically be wrapped in `&:hover`
 @mixin mouse-hover($wrap-in-hover: true) {
   @media (hover: hover) and (pointer: fine) {
     @if $wrap-in-hover {
@@ -337,6 +506,11 @@ $_swappable-properties: text-align;
   }
 }
 
+// An internal helper to dynamically wrap the CSS in a `@layer`.
+//
+// @param {string} name - The layer name to use
+// @param {boolean} disabled - Set to `true` if the content should not be
+// wrapped in the layer.
 @mixin optional-layer($name, $disabled) {
   @if $disabled {
     @content;

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

@@ -1,94 +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" {
-    interface CSSProperties {
-        "--rmd-app-bar-height"?: string | number;
-        "--rmd-app-bar-background-color"?: string;
-        "--rmd-app-bar-color"?: string;
-        "--rmd-app-bar-surface-background-color"?: string;
-        "--rmd-app-bar-surface-color"?: string;
-    }
-}
-export type AppBarPosition = "top" | "bottom";
-/**
- * - `"clear"` - the background color will be transparent
- * - `"primary"` - defaults to the current primary theme color
- * - `"secondary"` - defaults to the current secondary theme color
- * - `"surface"` - this will use the current surface background color which
- *   defaults to `#fff` for light themes, `#242424` for dark themes, and
- *   `#424242` for dark themes when the `$disable-dark-elevation` is set to
- *   `true`
- *
- * The default dark theme surface color also depends on the `$fixed-elevation`
- * value.
- */
-export type AppBarTheme = BackgroundColor | "clear";
-/**
- * - `"auto"` - the height will be determined by the height of the content
- * - `"normal"` - defaults to `3.5rem` (`$height`)
- * - `"prominent"` - defaults to `7rem` (`$prominent-height`)
- * - `"dense"` - defaults to `3rem` (`$dense-height`)
- * - `"prominent-dense"` - defaults to `6rem` (`$prominent-dense-height`)
- */
-export type AppBarHeight = "auto" | "normal" | "prominent" | "dense" | "prominent-dense";
-/** @since 6.0.0 */
-export interface AppBarClassNameOptions extends Omit<BoxOptions, "fullWidth"> {
-    className?: string;
-    /**
-     * Set this to `"fixed"` or `"sticky"` to set `position: fixed;` or
-     * `position: sticky;` to the app bar. The default position will be static and
-     * inline with other content.
-     *
-     * @defaultValue `'static'`
-     */
-    position?: CssPosition;
-    /**
-     * The position within the page to "fix" the `AppBar` when the `fixed` prop is
-     * enabled.
-     *
-     * @defaultValue `"top"`
-     */
-    pagePosition?: AppBarPosition;
-    /**
-     * Set this to `true` to remove the box-shadow.
-     *
-     * @defaultValue `false`
-     */
-    disableElevation?: boolean;
-    /**
-     * The theme to apply to the `AppBar`.
-     *
-     * @defaultValue `"primary"`
-     * @see {@link AppBarTheme}
-     */
-    theme?: AppBarTheme;
-    /**
-     * @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
-     * `true` when the {@link position} prop is `true` so that once dialogs and menus
-     * become visible the contents in the app bar do not need to be repainted.
-     *
-     * @since 6.0.0
-     * @defaultValue `position === "fixed"`
-     */
-    scrollbarOffset?: boolean;
-}
-/**
- * Apply the `className`s for a tree component. This will be type-safe if using
- * typescript.
- *
- * @since 6.0.0
- */
-export declare function appBar(options?: AppBarClassNameOptions): string;
+import { type AppBarClassNameOptions } from "./styles.js";
 /** @since 6.0.0 */
 export type CustomAppBarComponent = ElementType<HTMLAttributes<HTMLDivElement> & {
     ref?: Ref<HTMLDivElement>;

package/dist/app-bar/AppBar.js

@@ -1,45 +1,6 @@
 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");
-/**
- * Apply the `className`s for a tree component. This will be type-safe if using
- * typescript.
- *
- * @since 6.0.0
- */ export function appBar(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",
-        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,
-        surfaceColor
-    }), className);
-}
+import { appBar } from "./styles.js";
 /**
  * @example Simple Example
  * ```tsx

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 { 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/** @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   * @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 * @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/** @since 6.0.0 */\nexport type CustomAppBarComponent = ElementType<\n  HTMLAttributes<HTMLDivElement> & {\n    ref?: Ref<HTMLDivElement>;\n    className: string;\n  }\n>;\n\n/**\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 * @example 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 * @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;AA4BA;;;;;;;;;;;;;;;;;;;;;CAqBC,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"}
+{"version":3,"sources":["../../src/app-bar/AppBar.tsx"],"sourcesContent":["import {\n  forwardRef,\n  type ElementType,\n  type HTMLAttributes,\n  type Ref,\n} from \"react\";\nimport { appBar, type AppBarClassNameOptions } from \"./styles.js\";\n\n/** @since 6.0.0 */\nexport type CustomAppBarComponent = ElementType<\n  HTMLAttributes<HTMLDivElement> & {\n    ref?: Ref<HTMLDivElement>;\n    className: string;\n  }\n>;\n\n/**\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 * @example 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 * @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":["forwardRef","appBar","AppBar","props","ref","className","theme","stacked","height","align","grid","gridName","justify","reversed","gridColumns","disableWrap","disablePadding","position","pagePosition","surfaceColor","scrollbarOffset","disableElevation","as","Component","children","remaining"],"mappings":";AAAA,SACEA,UAAU,QAIL,QAAQ;AACf,SAASC,MAAM,QAAqC,cAAc;AA4BlE;;;;;;;;;;;;;;;;;;;;;CAqBC,GACD,OAAO,MAAMC,uBAASF,WACpB,SAASE,OAAOC,KAAK,EAAEC,GAAG;IACxB,MAAM,EACJC,SAAS,EACTC,KAAK,EACLC,OAAO,EACPC,MAAM,EACNC,KAAK,EACLC,IAAI,EACJC,QAAQ,EACRC,OAAO,EACPC,QAAQ,EACRC,WAAW,EACXC,WAAW,EACXC,cAAc,EACdC,QAAQ,EACRC,YAAY,EACZC,YAAY,EACZC,eAAe,EACfC,gBAAgB,EAChBC,IAAIC,YAAYN,WAAW,WAAW,KAAK,EAC3CO,QAAQ,EACR,GAAGC,WACJ,GAAGtB;IAEJ,qBACE,KAACoB;QACE,GAAGE,SAAS;QACbpB,WAAWJ,OAAO;YAChBI;YACAC;YACAW;YACAC;YACAG;YACAD;YACAZ;YACAE;YACAC;YACAG;YACAL;YACAF;YACAK;YACAC;YACAM;YACAJ;YACAC;QACF;QACAZ,KAAKA;kBAEJoB;;AAGP,GACA"}

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

@@ -1,33 +1,7 @@
 import { type TextOverflow } from "../cssUtils.js";
 import { type TypographyProps } from "../typography/Typography.js";
 import { type TypographyType } from "../typography/typographyStyles.js";
-/**
- * - `"small"` - the first character in the title will be `1rem` (`$keyline`)
- *   from the edge of the app bar horizontally
- * - `"nav"` - this should be set when there is a nav button before the title so
- *   that the first character in the title will be `4.5rem` (`title-keyline`)
- * - `"list"` - this should be used when the title should align with the list
- *   item keyline and there is no nav icon before.
- *
- * @since 6.0.0
- */
-export type AppBarTitleKeyline = "small" | "nav" | "list";
-/** @since 6.0.0 */
-export interface AppBarTitleClassNameOptions {
-    className?: string;
-    /**
-     * @defaultValue `"small"`
-     * @see {@link AppBarTitleKeyline}
-     */
-    keyline?: AppBarTitleKeyline;
-}
-/**
- * Apply the `className`s for a `AppBarTitle` component. This will be type-safe
- * if using typescript.
- *
- * @since 6.0.0
- */
-export declare function appBarTitle(options?: AppBarTitleClassNameOptions): string;
+import { type AppBarTitleClassNameOptions } from "./styles.js";
 /**
  * @since 6.0.0 The `keyline` prop was changed from a boolean to a type
  * union of different keylines: {@link AppBarTitleKeyline}