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

package/dist/app-bar/AppBarTitle.js

@@ -1,21 +1,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { cnb } from "cnbuilder";
 import { forwardRef } from "react";
 import { Typography } from "../typography/Typography.js";
-import { bem } from "../utils/bem.js";
-const styles = bem("rmd-app-bar-title");
-/**
- * Apply the `className`s for a `AppBarTitle` component. This will be type-safe
- * if using typescript.
- *
- * @since 6.0.0
- */ export function appBarTitle(options = {}) {
-    const { className, keyline = "small" } = options;
-    return cnb(styles({
-        keyline: keyline == "list",
-        "nav-keyline": keyline === "nav"
-    }), className);
-}
+import { appBarTitle } from "./styles.js";
 /**
  * @example Updating the Keyline
  * ```tsx

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

@@ -1 +1 @@
-{"version":3,"sources":["../../src/app-bar/AppBarTitle.tsx"],"sourcesContent":["import { cnb } from \"cnbuilder\";\nimport { forwardRef } from \"react\";\nimport { type TextOverflow } from \"../cssUtils.js\";\nimport { Typography, type TypographyProps } from \"../typography/Typography.js\";\nimport { type TypographyType } from \"../typography/typographyStyles.js\";\nimport { bem } from \"../utils/bem.js\";\n\nconst styles = bem(\"rmd-app-bar-title\");\n\n/**\n * - `\"small\"` - the first character in the title will be `1rem` (`$keyline`)\n *   from the edge of the app bar horizontally\n * - `\"nav\"` - this should be set when there is a nav button before the title so\n *   that the first character in the title will be `4.5rem` (`title-keyline`)\n * - `\"list\"` - this should be used when the title should align with the list\n *   item keyline and there is no nav icon before.\n *\n * @since 6.0.0\n */\nexport type AppBarTitleKeyline = \"small\" | \"nav\" | \"list\";\n\n/** @since 6.0.0 */\nexport interface AppBarTitleClassNameOptions {\n  className?: string;\n\n  /**\n   * @defaultValue `\"small\"`\n   * @see {@link AppBarTitleKeyline}\n   */\n  keyline?: AppBarTitleKeyline;\n}\n\n/**\n * Apply the `className`s for a `AppBarTitle` component. This will be type-safe\n * if using typescript.\n *\n * @since 6.0.0\n */\nexport function appBarTitle(options: AppBarTitleClassNameOptions = {}): string {\n  const { className, keyline = \"small\" } = options;\n  return cnb(\n    styles({\n      keyline: keyline == \"list\",\n      \"nav-keyline\": keyline === \"nav\",\n    }),\n    className\n  );\n}\n\n/**\n * @since 6.0.0 The `keyline` prop was changed from a boolean to a type\n * union of different keylines: {@link AppBarTitleKeyline}\n * @since 6.0.0 The `noWrap` prop was removed in favor of the `textOverflow`\n * prop inherited through the base `Typography` component. The `textOverflow`\n * will default to `\"ellipsis\"` which is new as well.\n */\nexport interface AppBarTitleProps\n  extends TypographyProps,\n    AppBarTitleClassNameOptions {\n  /** @defaultValue `\"headline-6\"` */\n  type?: TypographyType;\n\n  /**\n   * @defaultValue `\"ellipsis\"`\n   */\n  textOverflow?: TextOverflow;\n}\n\n/**\n * @example Updating the Keyline\n * ```tsx\n * import { AppBar, AppBarTitle } from \"@react-md/core\";\n * import type { ReactElement } from \"react\";\n *\n * function Example(): ReactElement {\n *   return (\n *     <AppBar>\n *       <AppBarTitle keyline=\"nav\">\n *         Offset as if there was a nav button to the left\n *       </AppBarTitle>\n *     </AppBar>\n *   );\n * }\n * ```\n *\n * @since 6.0.0 The `keyline` prop was changed from a boolean to a type\n * union of different keylines: {@link AppBarTitleKeyline}\n * @since 6.0.0 The `noWrap` prop was removed in favor of the `textOverflow`\n * prop inherited through the base `Typography` component. The `textOverflow`\n * will default to `\"ellipsis\"` which is new as well.\n */\nexport const AppBarTitle = forwardRef<HTMLHeadingElement, AppBarTitleProps>(\n  function AppBarTitle(props, ref) {\n    const {\n      type = \"headline-6\",\n      keyline = \"small\",\n      children,\n      className,\n      textOverflow = \"ellipsis\",\n      ...remaining\n    } = props;\n    return (\n      <Typography\n        {...remaining}\n        ref={ref}\n        type={type}\n        className={appBarTitle({\n          keyline,\n          className,\n        })}\n        textOverflow={textOverflow}\n      >\n        {children}\n      </Typography>\n    );\n  }\n);\n"],"names":["cnb","forwardRef","Typography","bem","styles","appBarTitle","options","className","keyline","AppBarTitle","props","ref","type","children","textOverflow","remaining"],"mappings":";AAAA,SAASA,GAAG,QAAQ,YAAY;AAChC,SAASC,UAAU,QAAQ,QAAQ;AAEnC,SAASC,UAAU,QAA8B,8BAA8B;AAE/E,SAASC,GAAG,QAAQ,kBAAkB;AAEtC,MAAMC,SAASD,IAAI;AAyBnB;;;;;CAKC,GACD,OAAO,SAASE,YAAYC,UAAuC,CAAC,CAAC;IACnE,MAAM,EAAEC,SAAS,EAAEC,UAAU,OAAO,EAAE,GAAGF;IACzC,OAAON,IACLI,OAAO;QACLI,SAASA,WAAW;QACpB,eAAeA,YAAY;IAC7B,IACAD;AAEJ;AAqBA;;;;;;;;;;;;;;;;;;;;;;CAsBC,GACD,OAAO,MAAME,4BAAcR,WACzB,SAASQ,YAAYC,KAAK,EAAEC,GAAG;IAC7B,MAAM,EACJC,OAAO,YAAY,EACnBJ,UAAU,OAAO,EACjBK,QAAQ,EACRN,SAAS,EACTO,eAAe,UAAU,EACzB,GAAGC,WACJ,GAAGL;IACJ,qBACE,KAACR;QACE,GAAGa,SAAS;QACbJ,KAAKA;QACLC,MAAMA;QACNL,WAAWF,YAAY;YACrBG;YACAD;QACF;QACAO,cAAcA;kBAEbD;;AAGP,GACA"}
+{"version":3,"sources":["../../src/app-bar/AppBarTitle.tsx"],"sourcesContent":["import { forwardRef } from \"react\";\nimport { type TextOverflow } from \"../cssUtils.js\";\nimport { Typography, type TypographyProps } from \"../typography/Typography.js\";\nimport { type TypographyType } from \"../typography/typographyStyles.js\";\nimport { type AppBarTitleClassNameOptions, appBarTitle } from \"./styles.js\";\n\n/**\n * @since 6.0.0 The `keyline` prop was changed from a boolean to a type\n * union of different keylines: {@link AppBarTitleKeyline}\n * @since 6.0.0 The `noWrap` prop was removed in favor of the `textOverflow`\n * prop inherited through the base `Typography` component. The `textOverflow`\n * will default to `\"ellipsis\"` which is new as well.\n */\nexport interface AppBarTitleProps\n  extends TypographyProps,\n    AppBarTitleClassNameOptions {\n  /** @defaultValue `\"headline-6\"` */\n  type?: TypographyType;\n\n  /**\n   * @defaultValue `\"ellipsis\"`\n   */\n  textOverflow?: TextOverflow;\n}\n\n/**\n * @example Updating the Keyline\n * ```tsx\n * import { AppBar, AppBarTitle } from \"@react-md/core\";\n * import type { ReactElement } from \"react\";\n *\n * function Example(): ReactElement {\n *   return (\n *     <AppBar>\n *       <AppBarTitle keyline=\"nav\">\n *         Offset as if there was a nav button to the left\n *       </AppBarTitle>\n *     </AppBar>\n *   );\n * }\n * ```\n *\n * @since 6.0.0 The `keyline` prop was changed from a boolean to a type\n * union of different keylines: {@link AppBarTitleKeyline}\n * @since 6.0.0 The `noWrap` prop was removed in favor of the `textOverflow`\n * prop inherited through the base `Typography` component. The `textOverflow`\n * will default to `\"ellipsis\"` which is new as well.\n */\nexport const AppBarTitle = forwardRef<HTMLHeadingElement, AppBarTitleProps>(\n  function AppBarTitle(props, ref) {\n    const {\n      type = \"headline-6\",\n      keyline = \"small\",\n      children,\n      className,\n      textOverflow = \"ellipsis\",\n      ...remaining\n    } = props;\n    return (\n      <Typography\n        {...remaining}\n        ref={ref}\n        type={type}\n        className={appBarTitle({\n          keyline,\n          className,\n        })}\n        textOverflow={textOverflow}\n      >\n        {children}\n      </Typography>\n    );\n  }\n);\n"],"names":["forwardRef","Typography","appBarTitle","AppBarTitle","props","ref","type","keyline","children","className","textOverflow","remaining"],"mappings":";AAAA,SAASA,UAAU,QAAQ,QAAQ;AAEnC,SAASC,UAAU,QAA8B,8BAA8B;AAE/E,SAA2CC,WAAW,QAAQ,cAAc;AAqB5E;;;;;;;;;;;;;;;;;;;;;;CAsBC,GACD,OAAO,MAAMC,4BAAcH,WACzB,SAASG,YAAYC,KAAK,EAAEC,GAAG;IAC7B,MAAM,EACJC,OAAO,YAAY,EACnBC,UAAU,OAAO,EACjBC,QAAQ,EACRC,SAAS,EACTC,eAAe,UAAU,EACzB,GAAGC,WACJ,GAAGP;IACJ,qBACE,KAACH;QACE,GAAGU,SAAS;QACbN,KAAKA;QACLC,MAAMA;QACNG,WAAWP,YAAY;YACrBK;YACAE;QACF;QACAC,cAAcA;kBAEbF;;AAGP,GACA"}

package/dist/app-bar/_app-bar.scss

@@ -9,63 +9,165 @@
 @use "../button/button";
 @use "../typography/typography";
 
+// Set to `true` to disable all the styles
+// @type boolean
 $disable-everything: false !default;
+
+// Set to `true` to only disable the `position: fixed` styles
+// @type boolean
 $disable-fixed: false !default;
+
+// Set to `true` to only disable the `position: fixed` styles
+// @type boolean
 $disable-sticky: false !default;
+
+// Set to `true` to only disable the `position: fixed` styles
+// @type boolean
 $disable-surface-theme: $disable-everything !default;
-$disable-dense-theme: false !default;
+
+// Set to `true` to only disable the dense height styles
+// @type boolean
+$disable-dense: false !default;
+
+// Set to `true` to only disable the prominent height styles
+// @type boolean
 $disable-prominent-theme: false !default;
-$disable-prominent-dense-theme: false !default;
+
+// Set to `true` to only disable the prominent-dense height styles
+// @type boolean
+$disable-prominent-dense: false !default;
+
+// Set to `true` to disable the styles that offset the app bar based on a
+// visible scrollbar.
+//
+// @type boolean
 $disable-scrollbar-offset: false !default;
+
+// Set to `true` to only disable the styles for offsetting the app bar for a
+// visible toolbar while `position: static`.
+//
+// @type boolean
 $disable-static-scrollbar-offset: false !default;
-$disable-primary-interaction-colors: interaction.$light-surface-base-background-color
-  == interaction.$dark-surface-base-background-color !default;
-$disable-secondary-interaction-colors: interaction.$light-surface-base-background-color
-  == interaction.$dark-surface-base-background-color !default;
 
+// Set to `true` to only disable the app bar title styles
+// @type boolean
 $disable-title: false !default;
 
+// Sets the `gap` css property to apply spacing between each item.
+// @type number
 $gap: 0.25rem !default;
+
+// The default height for an app bar
+// @type number
 $height: 3.5rem !default;
+
+// @type number
 $dense-height: 3rem !default;
+
+// @type number
 $prominent-height: $height * 2 !default;
+
+// @type number
 $prominent-dense-height: $dense-height * 2 !default;
 
+// The z-index to use when the app bar is `position: fixed`
+// @type number
 $fixed-z-index: 10 !default;
+
+// This should be a number from 0 to 24 representing the material design
+// elevation. It is used to generate the correct surface styles with box shadow.
+// @type number
 $fixed-elevation: 2 !default;
+
+// Allows the app bar to be fixed to the top and bottom of the viewport. If you
+// don't need support for one, remove it from the list.
+//
+// @example Removing Top Fixed Position
+// ```scss
+// @use "react-md/core" with (
+//   $app-bar-fixed-positions: (bottom)
+// );
+// ```
+//
+// @type List
 $fixed-positions: top bottom !default;
 
+// The background color to use when `theme="surface"` and using the global light
+// theme
+// @type Color
 $light-theme-surface-background-color: theme.$light-theme-surface-color !default;
+
+// The text color to use when `theme="surface"` and using the global light theme
+// @type Color
 $light-theme-surface-color: a11y.contrast-color(
   $light-theme-surface-background-color
 ) !default;
+
+// The background color to use when `theme="surface"` and using the global dark
+// theme
+// @type Color
 $dark-theme-surface-background-color: if(
   theme.$disable-dark-elevation,
   theme.$dark-theme-surface-color,
   map.get(theme.$dark-elevation-colors, $fixed-elevation)
 ) !default;
+
+// The text color to use when `theme="surface"` and using the global dark theme
+// @type Color
 $dark-theme-surface-color: #fff !default;
 
+// The default `theme="surface"` background color. You normally don't want to
+// change this value.
+// @type Color
 $surface-background-color: theme.get-default-color(
   $light-theme-surface-background-color,
   $dark-theme-surface-background-color
 ) !default;
+
+// The default `theme="surface"` text color. You normally don't want to change
+// this value.
+// @type Color
 $surface-color: theme.get-default-color(
   $light-theme-surface-color,
   $dark-theme-surface-color
 ) !default;
 
+// Horizontal padding for the app bar
+// @type number|string
 $horizontal-padding: 0.25rem !default;
+
+// Vertical padding for the app bar
+// @type number|string
 $vertical-padding: 0 !default;
 
+// This value is used to align the first element (normally a button) nicely with
+// other elements on the page.
+//
+// @type number|string
 $keyline: 1rem !default;
+
+// This value is used to align the `AppBarTitle` with other elements on the page
+// (like `ListItem`).
+// @type number|string
 $title-keyline: 4.5rem !default;
+
+// This is used to align a a nav button with an `AppBarTitle` nicely in the
+// `AppBar`.
+//
 // 3rem is the icon-button's default size. can't use the variables since it's
 // based on font-size now and `em`
+//
+// @type number|string
 $nav-keyline: $title-keyline - $horizontal-padding - $gap - 3rem !default;
 
+// The available configurable css variables and mostly used internally for the
+// `get-var`, `set-var`, and `use-var` utils.
+// @type List
 $variables: (height, surface-background-color, surface-color);
 
+// @param {string} name - The supported variable name
+// @param {any} fallback - An optional fallback value
+// @returns {string} a `var()` statement
 @function get-var($name, $fallback: null) {
   $var: utils.get-var-name($variables, $name, "app-bar");
   @if $fallback {
@@ -75,16 +177,24 @@ $variables: (height, surface-background-color, surface-color);
   @return var(#{$var});
 }
 
+// @param {string} name - The supported variable name
+// @param {any} value - The value to set the variable to. Supports `null` which
+// will just be a no-op.
 @mixin set-var($name, $value) {
   @if $value {
     #{utils.get-var-name($variables, $name, "app-bar")}: #{$value};
   }
 }
 
+// @param {string} property - The css property to apply the variable to
+// @param {string} name - The supported variable name
+// @param {any} fallback - An optional fallback value if the variable has not
+// been set
 @mixin use-var($property, $name: $property, $fallback: null) {
   #{$property}: get-var($name, $fallback);
 }
 
+// Applies the light the variables based on feature flags
 @mixin use-light-theme {
   @if not $disable-surface-theme {
     @include set-var(
@@ -95,6 +205,7 @@ $variables: (height, surface-background-color, surface-color);
   }
 }
 
+// Applies the dark the variables based on feature flags
 @mixin use-dark-theme {
   @if not $disable-surface-theme {
     @include set-var(
@@ -105,10 +216,14 @@ $variables: (height, surface-background-color, surface-color);
   }
 }
 
+// Applies the dense height variables
 @mixin dense {
-  @include set-var(height, $dense-height);
+  @if $dense-height {
+    @include set-var(height, $dense-height);
+  }
 }
 
+// Conditionally applies the css variables based on feature flags
 @mixin variables {
   @if not $disable-everything {
     @include set-var(height, $height);
@@ -117,6 +232,10 @@ $variables: (height, surface-background-color, surface-color);
   }
 }
 
+// Generates all the styles based on feature flags.
+//
+// @param {boolean} disable-layer - Set this to `true` to disable the
+// layer behavior
 @mixin styles($disable-layer: false) {
   @if not $disable-everything {
     @include utils.optional-layer(app-bar, $disable-layer) {
@@ -125,9 +244,9 @@ $variables: (height, surface-background-color, surface-color);
       }
 
       .rmd-app-bar {
-        @include use-var(height);
         @include box.set-var(gap, $gap);
         @include box.set-var(padding, $vertical-padding $horizontal-padding);
+        @include use-var(height);
 
         // since app bars can appear a lot in full page dialogs, setting these flex
         // values allows it be be a direct replacement of the `DialogHeader`
@@ -179,21 +298,21 @@ $variables: (height, surface-background-color, surface-color);
           padding: 0;
         }
 
-        @if not $disable-dense-theme {
+        @if not $disable-dense {
           &--dense {
-            @include set-var(height, $dense-height);
+            height: $dense-height;
           }
         }
 
         @if not $disable-prominent-theme {
           &--prominent {
-            @include set-var(height, $prominent-height);
+            height: $prominent-height;
           }
         }
 
-        @if not $disable-prominent-dense-theme {
+        @if not $disable-prominent-dense {
           &--prominent-dense {
-            @include set-var(height, $prominent-dense-height);
+            height: $prominent-dense-height;
           }
         }
 
@@ -206,13 +325,13 @@ $variables: (height, surface-background-color, surface-color);
 
         @if not $disable-scrollbar-offset {
           &--scrollbar-offset {
-            @include utils.rtl {
-              margin-right: calc(-1 * #{utils.scrollbar-size()});
-            }
-
             padding-right: calc(
               #{$horizontal-padding} + #{utils.scrollbar-size()}
             );
+
+            @include utils.rtl {
+              margin-right: calc(-1 * #{utils.scrollbar-size()});
+            }
           }
 
           @if not $disable-static-scrollbar-offset {
@@ -225,21 +344,33 @@ $variables: (height, surface-background-color, surface-color);
 
       @if not $disable-title {
         .rmd-app-bar-title {
-          @include utils.auto-rtl(margin-left, $keyline - $horizontal-padding);
+          $title-h-margin: $keyline - $horizontal-padding;
+          $title-keyline-h-margin: $title-keyline - $horizontal-padding;
 
           flex: 1 1 auto;
-          margin-bottom: 0;
-          margin-top: 0;
+          margin: 0 auto 0 $title-h-margin;
 
           &--keyline {
-            @include utils.auto-rtl(
-              margin-left,
-              $title-keyline - $horizontal-padding
-            );
+            margin-left: $title-keyline-h-margin;
           }
 
           &--nav-keyline {
-            @include utils.auto-rtl(margin-left, $nav-keyline);
+            margin-left: $nav-keyline;
+          }
+
+          @include utils.rtl {
+            margin-left: 0;
+            margin-right: $title-h-margin;
+
+            &--keyline {
+              margin-left: 0;
+              margin-right: $title-keyline-h-margin;
+            }
+
+            &--nav-keyline {
+              margin-left: 0;
+              margin-right: $nav-keyline;
+            }
           }
         }
       }

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

@@ -0,0 +1,117 @@
+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;
+/**
+ * - `"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;

package/dist/app-bar/styles.js

@@ -0,0 +1,55 @@
+import { cnb } from "cnbuilder";
+import { box } from "../box/styles.js";
+import { cssUtils } from "../cssUtils.js";
+import { bem } from "../utils/bem.js";
+const styles = bem("rmd-app-bar");
+const titleStyles = bem("rmd-app-bar-title");
+/**
+ * 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);
+}
+/**
+ * Apply the `className`s for a `AppBarTitle` component. This will be type-safe
+ * if using typescript.
+ *
+ * @since 6.0.0
+ */ export function appBarTitle(options = {}) {
+    const { className, keyline = "small" } = options;
+    return cnb(titleStyles({
+        keyline: keyline == "list",
+        "nav-keyline": keyline === "nav"
+    }), className);
+}
+
+//# sourceMappingURL=styles.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/app-bar/styles.ts"],"sourcesContent":["import { cnb } from \"cnbuilder\";\nimport { type BoxOptions, box } from \"../box/styles.js\";\nimport { type BackgroundColor, cssUtils } 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\");\nconst titleStyles = bem(\"rmd-app-bar-title\");\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/**\n * - `\"small\"` - the first character in the title will be `1rem` (`$keyline`)\n *   from the edge of the app bar horizontally\n * - `\"nav\"` - this should be set when there is a nav button before the title so\n *   that the first character in the title will be `4.5rem` (`title-keyline`)\n * - `\"list\"` - this should be used when the title should align with the list\n *   item keyline and there is no nav icon before.\n *\n * @since 6.0.0\n */\nexport type AppBarTitleKeyline = \"small\" | \"nav\" | \"list\";\n\n/** @since 6.0.0 */\nexport interface AppBarTitleClassNameOptions {\n  className?: string;\n\n  /**\n   * @defaultValue `\"small\"`\n   * @see {@link AppBarTitleKeyline}\n   */\n  keyline?: AppBarTitleKeyline;\n}\n\n/**\n * Apply the `className`s for a `AppBarTitle` component. This will be type-safe\n * if using typescript.\n *\n * @since 6.0.0\n */\nexport function appBarTitle(options: AppBarTitleClassNameOptions = {}): string {\n  const { className, keyline = \"small\" } = options;\n  return cnb(\n    titleStyles({\n      keyline: keyline == \"list\",\n      \"nav-keyline\": keyline === \"nav\",\n    }),\n    className\n  );\n}\n"],"names":["cnb","box","cssUtils","bem","styles","titleStyles","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","appBarTitle","keyline"],"mappings":"AAAA,SAASA,GAAG,QAAQ,YAAY;AAChC,SAA0BC,GAAG,QAAQ,mBAAmB;AACxD,SAA+BC,QAAQ,QAAQ,iBAAiB;AAEhE,SAASC,GAAG,QAAQ,kBAAkB;AAYtC,MAAMC,SAASD,IAAI;AACnB,MAAME,cAAcF,IAAI;AAyFxB;;;;;CAKC,GACD,OAAO,SAASG,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,IACLI,OAAO;QACLqB;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,IACAb,IAAI;QACFc;QACAL;QACAoB,WAAW;QACXd;QACAC;QACAC;QACAC;QACAC;QACAE;QACAC;IACF,IACArB,SAAS;QACP6B,iBAAiB,CAACN,WAAW,CAACC,QAAQjB,QAAQuB;QAC9CX;IACF,IACAb;AAEJ;AAyBA;;;;;CAKC,GACD,OAAO,SAASyB,YAAY1B,UAAuC,CAAC,CAAC;IACnE,MAAM,EAAEC,SAAS,EAAE0B,UAAU,OAAO,EAAE,GAAG3B;IACzC,OAAOP,IACLK,YAAY;QACV6B,SAASA,WAAW;QACpB,eAAeA,YAAY;IAC7B,IACA1B;AAEJ"}

package/dist/autocomplete/Autocomplete.d.ts

@@ -1,85 +1,14 @@
-import { type AriaAttributes, type ReactElement, type Ref } from "react";
-import { type TextFieldProps } from "../form/TextField.js";
-import { type ConfigurableComboboxMenuProps } from "../form/useCombobox.js";
-import { type KeyboardMovementFocusChangeEventHandler } from "../movement/types.js";
-import { type PropsWithRef, type TextExtractor } from "../types.js";
-import { type AutocompleteCircularProgressProps } from "./AutocompleteCircularProgress.js";
-import { type ConfigurableAutocompleteDropdownButtonProps } from "./AutocompleteDropdownButton.js";
-import { type AutocompleteMenuLabel, type AutocompleteOptionsProps } from "./types.js";
+import { type ReactElement } from "react";
+import { type AutocompleteMultiSelectProps, type AutocompleteOption, type AutocompleteSingleSelectProps } from "./types.js";
 /**
+ * This is the single select autocomplete implementation.
+ *
  * @since 6.0.0
  */
-export interface AutocompleteProps<T> extends Omit<TextFieldProps, "value" | "defaultValue">, AutocompleteOptionsProps<T> {
-    /** @defaultValue `"list"` */
-    "aria-autocomplete"?: AriaAttributes["aria-autocomplete"];
-    inputRef?: Ref<HTMLInputElement>;
-    value?: string;
-    defaultValue?: string;
-    /**
-     * An `aria-label` to pass to the `Menu` component that describes the list of
-     * {@link options}. Either this or the {@link menuLabelledBy} are required for
-     * accessibility.
-     */
-    menuLabel?: string;
-    /**
-     * An `aria-labelledby` to pass to the `Menu` component that describes the
-     * list of {@link options}. Either this or the {@link menuLabel} are required
-     * for accessibility.
-     */
-    menuLabelledBy?: string;
-    /**
-     * Any additional props that should be passed to the `Menu` component.
-     */
-    menuProps?: PropsWithRef<ConfigurableComboboxMenuProps & {
-        id?: string;
-    }, HTMLDivElement>;
-    /**
-     * This prop should only be used when `aria-autocomplete` is set to
-     * `"inline"` or `"both"`.
-     */
-    onFocusChange?: KeyboardMovementFocusChangeEventHandler;
-    /**
-     * This can be used to add any custom styling, change the icon, change the
-     * label, etc for the dropdown button.
-     *
-     * @example Simple Example
-     * ```tsx
-     * dropdownButtonProps={{
-     *   "aria-label": "Open",
-     *   className: styles.dropdownButton,
-     *   icon: <MyCustomDropdownIcon />,
-     * }}
-     * ```
-     */
-    dropdownButtonProps?: ConfigurableAutocompleteDropdownButtonProps;
-    /**
-     * Set this to `true` to remove the {@link DropdownButton} from being rendered
-     * after the input element.
-     *
-     * @defaultValue `false`
-     */
-    disableDropdownButton?: boolean;
-    /**
-     * Set this to `true` to disable a `<CircularProgress />` after the input and
-     * before the `<DropdownButton />`.
-     *
-     * @defaultValue `false`
-     */
-    loading?: boolean;
-    /**
-     * @defaultValue `{ "aria-label": "Loading", ...loadingProps }`
-     */
-    loadingProps?: AutocompleteCircularProgressProps;
-}
+export declare function Autocomplete<Option extends AutocompleteOption>(props: AutocompleteSingleSelectProps<Option>): ReactElement;
 /**
+ * This is the multiselect autocomplete implementation.
+ *
  * @since 6.0.0
  */
-export declare function Autocomplete<T extends string | {
-    label: string;
-}>(props: AutocompleteMenuLabel<Omit<AutocompleteProps<T>, "extractor">>): ReactElement;
-/**
- * @since 6.0.0
- */
-export declare function Autocomplete<T>(props: AutocompleteMenuLabel<AutocompleteProps<T> & {
-    extractor: TextExtractor<T>;
-}>): ReactElement;
+export declare function Autocomplete<Option extends AutocompleteOption>(props: AutocompleteMultiSelectProps<Option>): ReactElement;