@react-md/core 1.0.0-next.0

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

@@ -0,0 +1,144 @@
+import { type ElementType, type HTMLAttributes, type Ref } from "react";
+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";
+/** @remarks \@since 6.0.0 */
+export interface AppBarClassNameOptions {
+    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;
+    /**
+     * 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;
+    /**
+     * 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.
+     *
+     * @remarks \@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.
+ *
+ * @remarks \@since 6.0.0
+ */
+export declare function appBar(options?: AppBarClassNameOptions): string;
+/** @remarks \@since 6.0.0 */
+export type CustomAppBarComponent = ElementType<HTMLAttributes<HTMLDivElement> & {
+    ref?: Ref<HTMLDivElement>;
+    className: string;
+}>;
+/**
+ * @remarks
+ * \@since 6.0.0 Renamed the `component` prop to `as` and updated the default
+ * value to be a `"div"` when `fixed` is `false`.
+ * \@since 6.0.0 Renamed the `fixedElevation` prop to `disableFixedElevation` to
+ * match naming conventions when a feature is enabled by default.
+ * \@since 6.0.0 Removed the `inheritColor` and `flexWrap` props since they are
+ * no longer required.
+ * \@since 6.0.0 Removed the `fixed` prop in favor of the new `position` prop
+ * which enables position `fixed` or `sticky` behavior.
+ * \@since 6.0.0 Added the {@link stacked} and {@link scrollbarOffset} props.
+ */
+export interface AppBarProps extends HTMLAttributes<HTMLDivElement>, AppBarClassNameOptions {
+    /** @defaultValue `fixed ? "header" : "div"` */
+    as?: CustomAppBarComponent;
+}
+/**
+ * **Server Component**
+ *
+ * @example
+ * Simple Example
+ * ```tsx
+ * import { AppBar, AppBarTitle, Button } from "@react-md/core";
+ * import MenuIcon from "@react-md/material-icons/MenuIcon";
+ * import MoreVertIcon from "@react-md/material-icons/MoreVertIcon";
+ * import type { ReactElement } from "react";
+ *
+ * function Example(): ReactElement {
+ *   return (
+ *     <AppBar>
+ *       <Button aria-label="Navigation"><MenuIcon /></Button>
+ *       <AppBarTitle>My Main Title</AppBarTitle>
+ *       <Button aria-label="Options"><MoreVertIcon /></Button>
+ *     </AppBar>
+ *   );
+ * }
+ * ```
+ *
+ * @remarks
+ * \@since 6.0.0 The `AppBar` was updated to use `gap` for spacing
+ * instead of requiring the `AppBarNav` and `AppBarAction` components.
+ */
+export declare const AppBar: import("react").ForwardRefExoticComponent<AppBarProps & import("react").RefAttributes<HTMLDivElement>>;

package/dist/app-bar/AppBar.js

@@ -0,0 +1,74 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { cnb } from "cnbuilder";
+import { forwardRef } from "react";
+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.
+ *
+ * @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 surface = theme === "surface";
+    const clear = theme === "clear";
+    return cnb(styles({
+        surface,
+        [height]: height !== "normal",
+        fixed: position !== "static",
+        sticky: position === "sticky",
+        stacked,
+        [pagePosition]: position !== "static",
+        elevated: position !== "static" && !disableElevation,
+        "scrollbar-offset": scrollbarOffset,
+        "static-scrollbar-offset": position === "static" && scrollbarOffset
+    }), cssUtils({
+        backgroundColor: !surface && !clear ? theme : undefined
+    }), className);
+}
+/**
+ * **Server Component**
+ *
+ * @example
+ * Simple Example
+ * ```tsx
+ * import { AppBar, AppBarTitle, Button } from "@react-md/core";
+ * import MenuIcon from "@react-md/material-icons/MenuIcon";
+ * import MoreVertIcon from "@react-md/material-icons/MoreVertIcon";
+ * import type { ReactElement } from "react";
+ *
+ * function Example(): ReactElement {
+ *   return (
+ *     <AppBar>
+ *       <Button aria-label="Navigation"><MenuIcon /></Button>
+ *       <AppBarTitle>My Main Title</AppBarTitle>
+ *       <Button aria-label="Options"><MoreVertIcon /></Button>
+ *     </AppBar>
+ *   );
+ * }
+ * ```
+ *
+ * @remarks
+ * \@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;
+    return /*#__PURE__*/ _jsx(Component, {
+        ...remaining,
+        className: appBar({
+            theme,
+            position,
+            pagePosition,
+            disableElevation,
+            stacked,
+            height,
+            className,
+            scrollbarOffset
+        }),
+        ref: ref,
+        children: children
+    });
+});
+
+//# sourceMappingURL=AppBar.js.map

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

@@ -0,0 +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"}

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

@@ -0,0 +1,69 @@
+/// <reference types="react" />
+import { type TextOverflow } from "../cssUtils.js";
+import { type TypographyProps, type TypographyType } from "../typography/Typography.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.
+ *
+ * @remarks \@since 6.0.0
+ */
+export type AppBarTitleKeyline = "small" | "nav" | "list";
+/** @remarks \@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.
+ *
+ * @remarks \@since 6.0.0
+ */
+export declare function appBarTitle(options?: AppBarTitleClassNameOptions): string;
+/**
+ * @remarks \@since 6.0.0 Renamed the `noWrap` prop to `lineWrap` since the
+ * `AppBarTitle` does not line wrap by default.
+ */
+export interface AppBarTitleProps extends TypographyProps, AppBarTitleClassNameOptions {
+    /** @defaultValue `"headline-6"` */
+    type?: TypographyType;
+    /**
+     * @defaultValue `"ellipsis"`
+     */
+    textOverflow?: TextOverflow;
+}
+/**
+ * **Server Component**
+ *
+ * @example
+ * Updating the Keyline
+ * ```tsx
+ * import { AppBar, AppBarTitle } from "@react-md/core";
+ * import type { ReactElement } from "react";
+ *
+ * function Example(): ReactElement {
+ *   return (
+ *     <AppBar>
+ *       <AppBarTitle keyline="nav">
+ *         Offset as if there was a nav button to the left
+ *       </AppBarTitle>
+ *     </AppBar>
+ *   );
+ * }
+ * ```
+ *
+ * @remarks
+ * \@since 6.0.0 Renamed the `noWrap` prop to `lineWrap` since the `AppBarTitle`
+ * does not line wrap by default.
+ * \@since 6.0.0 The {@link keyline} prop was changed from a boolean to a type
+ * union of different keylines: {@link AppBarTitleKeyline}
+ */
+export declare const AppBarTitle: import("react").ForwardRefExoticComponent<AppBarTitleProps & import("react").RefAttributes<HTMLHeadingElement>>;

package/dist/app-bar/AppBarTitle.js

@@ -0,0 +1,59 @@
+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.
+ *
+ * @remarks \@since 6.0.0
+ */ export function appBarTitle(options = {}) {
+    const { className, keyline = "small" } = options;
+    return cnb(styles({
+        keyline: keyline == "list",
+        "nav-keyline": keyline === "nav"
+    }), className);
+}
+/**
+ * **Server Component**
+ *
+ * @example
+ * Updating the Keyline
+ * ```tsx
+ * import { AppBar, AppBarTitle } from "@react-md/core";
+ * import type { ReactElement } from "react";
+ *
+ * function Example(): ReactElement {
+ *   return (
+ *     <AppBar>
+ *       <AppBarTitle keyline="nav">
+ *         Offset as if there was a nav button to the left
+ *       </AppBarTitle>
+ *     </AppBar>
+ *   );
+ * }
+ * ```
+ *
+ * @remarks
+ * \@since 6.0.0 Renamed the `noWrap` prop to `lineWrap` since the `AppBarTitle`
+ * does not line wrap by default.
+ * \@since 6.0.0 The {@link keyline} prop was changed from a boolean to a type
+ * union of different keylines: {@link AppBarTitleKeyline}
+ */ export const AppBarTitle = /*#__PURE__*/ forwardRef(function AppBarTitle(props, ref) {
+    const { type = "headline-6", keyline = "small", children, className, textOverflow = "ellipsis", ...remaining } = props;
+    return /*#__PURE__*/ _jsx(Typography, {
+        ...remaining,
+        ref: ref,
+        type: type,
+        className: appBarTitle({
+            keyline,
+            className
+        }),
+        textOverflow: textOverflow,
+        children: children
+    });
+});
+
+//# sourceMappingURL=AppBarTitle.js.map

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

@@ -0,0 +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 {\n  Typography,\n  type TypographyProps,\n  type TypographyType,\n} from \"../typography/Typography.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 * @remarks \\@since 6.0.0\n */\nexport type AppBarTitleKeyline = \"small\" | \"nav\" | \"list\";\n\n/** @remarks \\@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 * @remarks \\@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 * @remarks \\@since 6.0.0 Renamed the `noWrap` prop to `lineWrap` since the\n * `AppBarTitle` does not line wrap by default.\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 * **Server Component**\n *\n * @example\n * 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 * @remarks\n * \\@since 6.0.0 Renamed the `noWrap` prop to `lineWrap` since the `AppBarTitle`\n * does not line wrap by default.\n * \\@since 6.0.0 The {@link keyline} prop was changed from a boolean to a type\n * union of different keylines: {@link AppBarTitleKeyline}\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,SACEC,UAAU,QAGL,8BAA8B;AACrC,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;AAkBA;;;;;;;;;;;;;;;;;;;;;;;;;CAyBC,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"}

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

@@ -0,0 +1,256 @@
+@use "sass:map";
+
+@use "../utils";
+@use "../box-shadows";
+@use "../interaction/interaction";
+@use "../theme/a11y";
+@use "../theme/theme";
+@use "../button/button";
+@use "../typography/typography";
+
+$disable-everything: false !default;
+$disable-fixed: false !default;
+$disable-sticky: false !default;
+$disable-surface-theme: $disable-everything !default;
+$disable-dense-theme: false !default;
+$disable-prominent-theme: false !default;
+$disable-prominent-dense-theme: false !default;
+$disable-scrollbar-offset: false !default;
+$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;
+
+$disable-title: false !default;
+
+$gap: 0.25rem !default;
+$height: 3.5rem !default;
+$dense-height: 3rem !default;
+$prominent-height: $height * 2 !default;
+$prominent-dense-height: $dense-height * 2 !default;
+
+$fixed-z-index: 10 !default;
+$fixed-elevation: 2 !default;
+$fixed-positions: top bottom !default;
+
+$light-theme-surface-background-color: theme.$light-theme-surface-color !default;
+$light-theme-surface-color: a11y.contrast-color(
+  $light-theme-surface-background-color
+) !default;
+$dark-theme-surface-background-color: if(
+  theme.$disable-dark-elevation,
+  theme.$dark-theme-surface-color,
+  map.get(theme.$dark-elevation-colors, $fixed-elevation)
+) !default;
+$dark-theme-surface-color: #fff !default;
+
+$surface-background-color: theme.get-default-color(
+  $light-theme-surface-background-color,
+  $dark-theme-surface-background-color
+) !default;
+$surface-color: theme.get-default-color(
+  $light-theme-surface-color,
+  $dark-theme-surface-color
+) !default;
+
+$horizontal-padding: 0.25rem !default;
+$vertical-padding: 0 !default;
+
+$keyline: 1rem !default;
+$title-keyline: 4.5rem !default;
+
+$var-lookup: (
+  height: (
+    var: --rmd-app-bar-height,
+    value: $height,
+  ),
+  surface-background-color: (
+    var: --rmd-app-bar-surface-background-color,
+    value: $surface-background-color,
+  ),
+  surface-color: (
+    var: --rmd-app-bar-surface-color,
+    value: $surface-color,
+  ),
+);
+
+@function get-var($name, $fallback: null) {
+  $found: utils.validate($var-lookup, $name, "app-bar var");
+  $var: map.get($found, var);
+  $value: if($fallback, $fallback, map.get($found, value));
+
+  @if $value {
+    @return var(#{$var}, #{$value});
+  }
+
+  @return var(#{$var});
+}
+
+@mixin set-var($name, $value) {
+  $var: map.get(utils.validate($var-lookup, $name, "app-bar var"), var);
+
+  #{$var}: #{$value};
+}
+
+@mixin use-var($property, $name: $property, $fallback: null) {
+  #{$property}: get-var($name, $fallback);
+}
+
+@mixin use-light-theme {
+  @if not $disable-surface-theme {
+    @include set-var(
+      surface-background-color,
+      $light-theme-surface-background-color
+    );
+    @include set-var(surface-color, $light-theme-surface-color);
+  }
+}
+
+@mixin use-dark-theme {
+  @if not $disable-surface-theme {
+    @include set-var(
+      surface-background-color,
+      $dark-theme-surface-background-color
+    );
+    @include set-var(surface-color, $dark-theme-surface-color);
+  }
+}
+
+@mixin dense {
+  @include set-var(height, $dense-height);
+}
+
+@mixin styles {
+  @if not $disable-everything {
+    @include theme.default-system-theme {
+      @include use-dark-theme;
+    }
+
+    .rmd-app-bar {
+      @include use-var(height);
+
+      align-items: center;
+      display: flex;
+      // 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`
+      // component without all the offsets and additional styles needed for fixed
+      // app bars.
+      flex: 0 0 auto;
+      gap: $gap;
+      padding: $vertical-padding $horizontal-padding;
+      width: 100%;
+
+      @if not $disable-fixed or not $disable-sticky {
+        &--fixed {
+          left: 0;
+          position: fixed;
+          // Note: right and width were added to support the main navigation
+          // behavior with toggleable full-height navigation
+          right: 0;
+          width: auto;
+          z-index: $fixed-z-index;
+        }
+
+        @if $fixed-elevation and $fixed-elevation != 0 {
+          &--elevated {
+            @include box-shadows.box-shadow(
+              $fixed-elevation,
+              $disable-colors: true
+            );
+          }
+        }
+
+        @each $position in $fixed-positions {
+          &--#{$position} {
+            #{$position}: 0;
+          }
+        }
+
+        @if not $disable-sticky {
+          &--sticky {
+            position: sticky;
+          }
+        }
+      }
+
+      &--auto {
+        // do not set variable so that child AppBar can maintain their height as needed
+        height: auto;
+      }
+
+      &--stacked {
+        flex-direction: column;
+        gap: 0;
+        padding: 0;
+      }
+
+      @if not $disable-dense-theme {
+        &--dense {
+          @include set-var(height, $dense-height);
+        }
+      }
+
+      @if not $disable-prominent-theme {
+        &--prominent {
+          @include set-var(height, $prominent-height);
+        }
+      }
+
+      @if not $disable-prominent-dense-theme {
+        &--prominent-dense {
+          @include set-var(height, $prominent-dense-height);
+        }
+      }
+
+      @if not $disable-surface-theme {
+        &--surface {
+          @include use-var(background-color, surface-background-color);
+          @include use-var(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()}
+          );
+        }
+
+        @if not $disable-static-scrollbar-offset {
+          &--static-scrollbar-offset {
+            width: calc(100% + utils.scrollbar-size());
+          }
+        }
+      }
+    }
+
+    @if not $disable-title {
+      .rmd-app-bar-title {
+        @include utils.auto-rtl(margin-left, $keyline - $horizontal-padding);
+
+        flex: 1 1 auto;
+        margin-bottom: 0;
+        margin-top: 0;
+
+        &--keyline {
+          @include utils.auto-rtl(
+            margin-left,
+            $title-keyline - $horizontal-padding
+          );
+        }
+
+        &--nav-keyline {
+          @include utils.auto-rtl(
+            margin-left,
+            $title-keyline - $horizontal-padding - $gap - button.$icon-size
+          );
+        }
+      }
+    }
+  }
+}