@react-md/core 1.0.0-next.12 → 1.0.0-next.13

package/package.json

@@ -1,15 +1,12 @@
 {
   "name": "@react-md/core",
-  "version": "1.0.0-next.12",
+  "version": "1.0.0-next.13",
   "description": "The core components and functionality for react-md.",
   "type": "module",
   "sass": "./dist/_core.scss",
-  "types": "./dist/index.d.ts",
   "exports": {
     ".": {
-      "sass": "./dist/_core.scss",
-      "types": "./dist/index.d.ts",
-      "default": "./dist/index.js"
+      "sass": "./dist/_core.scss"
     },
     "./test-utils/polyfills": {
       "require": "./dist/test-utils/polyfills",
@@ -35,6 +32,7 @@
     "dist/**/*.scss",
     "dist/test-utils/polyfills"
   ],
+  "author": "Mikkel Laursen <mlaursen03@gmail.com>",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/mlaursen/react-md.git",
@@ -55,22 +53,23 @@
   "license": "MIT",
   "dependencies": {
     "cnbuilder": "^3.1.0",
-    "nanoid": "^5.0.6"
+    "nanoid": "^5.0.7"
   },
   "devDependencies": {
     "@jest/globals": "^29.7.0",
     "@jest/types": "^29.6.3",
+    "@microsoft/api-extractor": "^7.43.1",
     "@swc/cli": "^0.3.12",
-    "@swc/core": "1.4.12",
+    "@swc/core": "1.4.16",
     "@swc/jest": "^0.2.36",
-    "@testing-library/dom": "^9.3.4",
+    "@testing-library/dom": "^10.0.0",
     "@testing-library/jest-dom": "^6.4.2",
-    "@testing-library/react": "^14.2.2",
+    "@testing-library/react": "^15.0.2",
     "@testing-library/user-event": "^14.5.2",
     "@types/lodash": "^4.17.0",
-    "@types/node": "^20.12.5",
-    "@types/react": "^18.2.74",
-    "@types/react-dom": "^18.2.24",
+    "@types/node": "^20.12.7",
+    "@types/react": "^18.2.79",
+    "@types/react-dom": "^18.2.25",
     "chokidar": "^3.6.0",
     "filesize": "^10.1.1",
     "glob": "10.3.12",
@@ -82,6 +81,7 @@
     "npm-run-all": "^4.1.5",
     "postcss": "^8.4.38",
     "postcss-scss": "^4.0.9",
+    "prettier": "^3.2.5",
     "stylelint": "^16.3.1",
     "stylelint-config-prettier-scss": "^1.0.0",
     "stylelint-config-recommended-scss": "^14.0.0",
@@ -89,7 +89,7 @@
     "stylelint-scss": "^6.2.1",
     "ts-node": "^10.9.2",
     "tsx": "^4.7.2",
-    "typescript": "^5.4.4"
+    "typescript": "^5.4.5"
   },
   "peerDependencies": {
     "@jest/globals": "^29.7.0",
@@ -130,8 +130,14 @@
   "publishConfig": {
     "access": "public"
   },
+  "volta": {
+    "node": "20.12.2",
+    "pnpm": "8.15.7"
+  },
   "scripts": {
     "run-script": "tsx --tsconfig scripts/tsconfig.json",
+    "tsd": "pnpm run run-script scripts/typedoc.ts",
+    "list-exports": "pnpm run run-script scripts/getExportMap.ts",
     "dev": "npm-run-all --parallel build-esm-watch build-scss-watch build-types-watch",
     "prepare-release": "npm-run-all clean-dist build",
     "build": "npm-run-all build-esm build-scss build-types",

package/src/CoreProviders.tsx

@@ -24,7 +24,7 @@ import { type TooltipHoverModeProvider } from "./tooltip/TooltipHoverModeProvide
 import { type WritingDirectionProvider } from "./typography/WritingDirectionProvider.js";
 /* eslint-enable @typescript-eslint/no-unused-vars */
 
-/** @remarks \@since 6.0.0 */
+/** @since 6.0.0 */
 export interface ReactMDCoreConfiguration {
   /**
    * Set this to `true` if you are using SSR. This will update some hook
@@ -51,7 +51,7 @@ export interface ReactMDCoreConfiguration {
   portalContainer?: PortalContainer;
 }
 
-/** @remarks \@since 6.0.0 */
+/** @since 6.0.0 */
 export interface CoreProvidersProps extends ReactMDCoreConfiguration {
   children: ReactNode;
 }
@@ -85,7 +85,7 @@ export interface CoreProvidersProps extends ReactMDCoreConfiguration {
  * - {@link Snackbar} - This isn't a provider but this is how you can display
  *   alerts in your app
  *
- * @remarks \@since 6.0.0
+ * @since 6.0.0
  */
 export function CoreProviders(props: CoreProvidersProps): ReactElement {
   const {

package/src/NoSsr.tsx

@@ -2,7 +2,7 @@
 import { useEffect, useState, type ReactElement, type ReactNode } from "react";
 import { useSsr } from "./SsrProvider.js";
 
-/** @remarks \@since 6.0.0 */
+/** @since 6.0.0 */
 export interface NoSsrProps {
   children: ReactNode;
 }
@@ -13,8 +13,7 @@ export interface NoSsrProps {
  * A small wrapper that can be used to render children client side only. The
  * main use-case are for components that rely on browser API to work correctly.
  *
- * @example
- * Simple Example
+ * @example Simple Example
  * ```tsx
  * import { CoreProviders, NoSsr, Typography } from "@react-md/core";
  * import type { ReactElement } from "react";
@@ -41,7 +40,7 @@ export interface NoSsrProps {
  * }
  * ```
  *
- * @remarks \@since 6.0.0
+ * @since 6.0.0
  */
 export function NoSsr(props: NoSsrProps): ReactElement {
   const { children } = props;

package/src/RootHtml.tsx

@@ -7,7 +7,7 @@ import {
 import { type PropsWithRef } from "./types.js";
 
 /**
- * @remarks \@since 6.0.0
+ * @since 6.0.0
  */
 export interface RootHtmlProps extends HtmlHTMLAttributes<HTMLHtmlElement> {
   /** @defaultValue `"ltr"` */
@@ -49,8 +49,7 @@ export interface RootHtmlProps extends HtmlHTMLAttributes<HTMLHtmlElement> {
  * passed to the root `<html>` and `<body>` elements and children can be
  * rendered before and after the `<body>` if needed.
  *
- * @example
- * Simple Example
+ * @example Simple Example
  * ```tsx
  * // src/app/layout.tsx
  * import { RootHtml } from "@react-md/core";
@@ -69,7 +68,7 @@ export interface RootHtmlProps extends HtmlHTMLAttributes<HTMLHtmlElement> {
  * }
  * ```
  *
- * @remarks \@since 6.0.0
+ * @since 6.0.0
  */
 export function RootHtml(props: RootHtmlProps): ReactElement {
   const {

package/src/SsrProvider.tsx

@@ -13,14 +13,14 @@ const { Provider } = context;
 context.displayName = "Ssr";
 
 /**
- * @remarks \@since 6.0.0
+ * @since 6.0.0
  */
 export function useSsr(): boolean {
   return useContext(context);
 }
 
 /**
- * @remarks \@since 6.0.0
+ * @since 6.0.0
  */
 export interface SsrProviderProps {
   ssr?: boolean;
@@ -30,7 +30,7 @@ export interface SsrProviderProps {
 /**
  * **Client Component**
  *
- * @remarks \@since 6.0.0
+ * @since 6.0.0
  */
 export function SsrProvider(props: SsrProviderProps): ReactElement {
   const { ssr = false, children } = props;

package/src/_core.scss

@@ -34,6 +34,7 @@
 @forward "menu/menu" as menu-*;
 @forward "form/form" as form-*;
 @forward "layout/layout" as layout-*;
+@forward "navigation/navigation" as navigation-*;
 @forward "segmented-button/segmented-button" as segmented-button-*;
 
 @use "avatar/avatar";
@@ -69,6 +70,7 @@
 @use "menu/menu";
 @use "form/form";
 @use "layout/layout";
+@use "navigation/navigation";
 @use "utils";
 
 $_layer-order: (
@@ -101,6 +103,7 @@ $_layer-order: (
   menu,
   form,
   layout,
+  navigation,
   snackbar,
   segmented-button,
   utils
@@ -348,6 +351,7 @@ $_layer-order: (
   @include link.variables;
   @include list.variables;
   @include menu.variables;
+  @include navigation.variables;
   @include overlay.variables;
   @include progress.variables;
   @include segmented-button.variables;
@@ -395,6 +399,7 @@ $_layer-order: (
   @include link.styles($disable-layer);
   @include list.styles($disable-layer);
   @include menu.styles($disable-layer);
+  @include navigation.styles($disable-layer);
   @include overlay.styles($disable-layer);
   @include progress.styles($disable-layer);
   @include responsive-item.styles($disable-layer);

package/src/app-bar/AppBar.tsx

@@ -57,7 +57,7 @@ export type AppBarHeight =
   | "dense"
   | "prominent-dense";
 
-/** @remarks \@since 6.0.0 */
+/** @since 6.0.0 */
 export interface AppBarClassNameOptions extends Omit<BoxOptions, "fullWidth"> {
   className?: string;
 
@@ -108,7 +108,7 @@ export interface AppBarClassNameOptions extends Omit<BoxOptions, "fullWidth"> {
    * `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
+   * @since 6.0.0
    * @defaultValue `position === "fixed"`
    */
   scrollbarOffset?: boolean;
@@ -118,7 +118,7 @@ export interface AppBarClassNameOptions extends Omit<BoxOptions, "fullWidth"> {
  * Apply the `className`s for a tree component. This will be type-safe if using
  * typescript.
  *
- * @remarks \@since 6.0.0
+ * @since 6.0.0
  */
 export function appBar(options: AppBarClassNameOptions = {}): string {
   const {
@@ -175,7 +175,7 @@ export function appBar(options: AppBarClassNameOptions = {}): string {
   );
 }
 
-/** @remarks \@since 6.0.0 */
+/** @since 6.0.0 */
 export type CustomAppBarComponent = ElementType<
   HTMLAttributes<HTMLDivElement> & {
     ref?: Ref<HTMLDivElement>;
@@ -184,16 +184,15 @@ export type CustomAppBarComponent = ElementType<
 >;
 
 /**
- * @remarks
- * \@since 6.0.0 Renamed the `component` prop to `as` and updated the default
+ * @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
+ * @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
+ * @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
+ * @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.
+ * @since 6.0.0 Added the {@link stacked} and {@link scrollbarOffset} props.
  */
 export interface AppBarProps
   extends HTMLAttributes<HTMLDivElement>,
@@ -205,8 +204,7 @@ export interface AppBarProps
 /**
  * **Server Component**
  *
- * @example
- * Simple Example
+ * @example Simple Example
  * ```tsx
  * import { AppBar, AppBarTitle, Button } from "@react-md/core";
  * import MenuIcon from "@react-md/material-icons/MenuIcon";
@@ -224,8 +222,7 @@ export interface AppBarProps
  * }
  * ```
  *
- * @remarks
- * \@since 6.0.0 The `AppBar` was updated to use `gap` for spacing
+ * @since 6.0.0 The `AppBar` was updated to use `gap` for spacing
  * instead of requiring the `AppBarNav` and `AppBarAction` components.
  */
 export const AppBar = forwardRef<HTMLDivElement, AppBarProps>(

package/src/app-bar/AppBarTitle.tsx

@@ -15,11 +15,11 @@ const styles = bem("rmd-app-bar-title");
  * - `"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
+ * @since 6.0.0
  */
 export type AppBarTitleKeyline = "small" | "nav" | "list";
 
-/** @remarks \@since 6.0.0 */
+/** @since 6.0.0 */
 export interface AppBarTitleClassNameOptions {
   className?: string;
 
@@ -34,7 +34,7 @@ export interface AppBarTitleClassNameOptions {
  * Apply the `className`s for a `AppBarTitle` component. This will be type-safe
  * if using typescript.
  *
- * @remarks \@since 6.0.0
+ * @since 6.0.0
  */
 export function appBarTitle(options: AppBarTitleClassNameOptions = {}): string {
   const { className, keyline = "small" } = options;
@@ -48,7 +48,7 @@ export function appBarTitle(options: AppBarTitleClassNameOptions = {}): string {
 }
 
 /**
- * @remarks \@since 6.0.0 Renamed the `noWrap` prop to `lineWrap` since the
+ * @since 6.0.0 Renamed the `noWrap` prop to `lineWrap` since the
  * `AppBarTitle` does not line wrap by default.
  */
 export interface AppBarTitleProps
@@ -66,8 +66,7 @@ export interface AppBarTitleProps
 /**
  * **Server Component**
  *
- * @example
- * Updating the Keyline
+ * @example Updating the Keyline
  * ```tsx
  * import { AppBar, AppBarTitle } from "@react-md/core";
  * import type { ReactElement } from "react";
@@ -83,10 +82,9 @@ export interface AppBarTitleProps
  * }
  * ```
  *
- * @remarks
- * \@since 6.0.0 Renamed the `noWrap` prop to `lineWrap` since the `AppBarTitle`
+ * @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
+ * @since 6.0.0 The `keyline` prop was changed from a boolean to a type
  * union of different keylines: {@link AppBarTitleKeyline}
  */
 export const AppBarTitle = forwardRef<HTMLHeadingElement, AppBarTitleProps>(

package/src/avatar/Avatar.tsx

@@ -21,7 +21,7 @@ declare module "react" {
 export type AvatarImgAttributes = ImgHTMLAttributes<HTMLImageElement>;
 
 /**
- * @remarks \@since 6.0.0 `aria-hidden` is set to `true` by default and removed
+ * @since 6.0.0 `aria-hidden` is set to `true` by default and removed
  * the `role="presentation"`.
  */
 export interface AvatarProps
@@ -61,7 +61,7 @@ export interface AvatarProps
    *
    * @see {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#attr-referrerpolicy|Referrer Policy}
    *
-   * @remarks \@since 2.2.0
+   * @since 2.2.0
    */
   referrerPolicy?: AvatarImgAttributes["referrerPolicy"];
 
@@ -74,7 +74,7 @@ export interface AvatarProps
    * Note: The values in this object will override the `src`, `alt`, and
    * `referrerPolicy` root level avatar props if they exist on this object.
    *
-   * @remarks \@since 2.2.0
+   * @since 2.2.0
    */
   imgProps?: PropsWithRef<AvatarImgAttributes, HTMLImageElement>;
 }
@@ -87,8 +87,7 @@ export interface AvatarProps
  * the avatar is not an image, different themes can be applied to make the
  * avatar more unique.
  *
- * @example
- * Simple Example
+ * @example Simple Example
  * ```tsx
  * import { Avatar } from "@react-md/core";
  * import { type ReactElement } from "react";
@@ -98,7 +97,7 @@ export interface AvatarProps
  * }
  * ```
  *
- * @remarks \@since 6.0.0 `aria-hidden` is set to `true` by default and removed
+ * @since 6.0.0 `aria-hidden` is set to `true` by default and removed
  * the `role="presentation"`.
  */
 export const Avatar = forwardRef<HTMLSpanElement, AvatarProps>(

package/src/avatar/__tests__/Avatar.tsx

@@ -40,7 +40,7 @@ describe("Avatar", () => {
     const { rerender } = render(<Avatar {...props} />);
 
     const avatar = screen.getByTestId("avatar");
-    const img = screen.getByRole("img", { hidden: true });
+    const img = screen.getByRole("presentation", { hidden: true });
     expect(img).toHaveAttribute("src", props.src);
     expect(img).toHaveAttribute("alt", "");
     expect(avatar).toMatchSnapshot();

package/src/avatar/styles.ts

@@ -4,7 +4,7 @@ import { bem } from "../utils/bem.js";
 
 const styles = bem("rmd-avatar");
 
-/** @remarks \@since 6.0.0 */
+/** @since 6.0.0 */
 export interface AvatarClassNameOptions {
   className?: string;
 
@@ -34,7 +34,7 @@ export interface AvatarClassNameOptions {
 }
 
 /**
- * @remarks \@since 6.0.0
+ * @since 6.0.0
  */
 export function avatar(options: AvatarClassNameOptions): string {
   const { className, color = "", size, theme } = options;
@@ -46,13 +46,13 @@ export function avatar(options: AvatarClassNameOptions): string {
   );
 }
 
-/** @remarks \@since 6.0.0 */
+/** @since 6.0.0 */
 export interface AvatarImageClassNameOptions {
   className?: string;
 }
 
 /**
- * @remarks \@since 6.0.0
+ * @since 6.0.0
  */
 export function avatarImage(options: AvatarImageClassNameOptions = {}): string {
   const { className } = options;

package/src/badge/Badge.tsx

@@ -15,7 +15,7 @@ declare module "react" {
 const styles = bem("rmd-badge");
 
 /**
- * @remarks \@since 6.0.0 Renamed `"default"` to `"greyscale"` and added all
+ * @since 6.0.0 Renamed `"default"` to `"greyscale"` and added all
  * theme colors.
  */
 export type BadgeTheme = BackgroundColor | "greyscale" | "clear";
@@ -49,8 +49,7 @@ export interface BadgeProps extends HTMLAttributes<HTMLSpanElement> {
 /**
  * **Server Component**
  *
- * @example
- * Simple Example
+ * @example Simple Example
  * ```tsx
  * import type { ReactElement } from "react";
  * import { Badge, Button, MaterialSymbol } from "@react-md/core";
@@ -68,8 +67,7 @@ export interface BadgeProps extends HTMLAttributes<HTMLSpanElement> {
  * }
  * ```
  *
- * @example
- * Within Buttons Example
+ * @example Within Buttons Example
  * ```tsx
  * import type { ReactElement } from "react";
  * import { Badge, Button, MaterialSymbol } from "@react-md/core";
@@ -84,7 +82,7 @@ export interface BadgeProps extends HTMLAttributes<HTMLSpanElement> {
  * }
  * ```
  *
- * @remarks \@since 6.0.0 Removed the `disableNullOnZero` feature since it's
+ * @since 6.0.0 Removed the `disableNullOnZero` feature since it's
  * easier just to use condition rendering yourself.
  */
 export const Badge = forwardRef<HTMLSpanElement, BadgeProps>(

package/src/box/Box.tsx

@@ -2,7 +2,7 @@ import { forwardRef, type HTMLAttributes } from "react";
 import { box, type BoxOptions } from "./styles.js";
 
 /**
- * @remarks \@since 6.0.0
+ * @since 6.0.0
  */
 export interface BoxProps extends HTMLAttributes<HTMLDivElement>, BoxOptions {}
 
@@ -14,8 +14,7 @@ export interface BoxProps extends HTMLAttributes<HTMLDivElement>, BoxOptions {}
  * There are pass-through props for all of the box module styling properties
  * available by default.
  *
- * @example
- * Default Styles
+ * @example Default Styles
  * ```scss
  * .box {
  *   align-items: center;
@@ -43,8 +42,7 @@ export interface BoxProps extends HTMLAttributes<HTMLDivElement>, BoxOptions {}
  * }
  * ```
  *
- * @example
- * Default Grid Styles
+ * @example Default Grid Styles
  * ```scss
  * .box {
  *   align-items: center;
@@ -72,11 +70,10 @@ export interface BoxProps extends HTMLAttributes<HTMLDivElement>, BoxOptions {}
  * }
  * ```
  *
- * @example
- * Custom Grid
+ * @example Custom Grid
  * ```scss
  * @use "@react-md/core" with (
- *   $grids: (
+ *   $box-grids: (
  *     small: (
  *       min: 5rem,
  *     ),
@@ -107,7 +104,7 @@ export interface BoxProps extends HTMLAttributes<HTMLDivElement>, BoxOptions {}
  * }
  * ```
  *
- * @remarks \@since 6.0.0
+ * @since 6.0.0
  */
 export const Box = forwardRef<HTMLDivElement, BoxProps>(
   function Box(props, ref) {
@@ -116,6 +113,7 @@ export const Box = forwardRef<HTMLDivElement, BoxProps>(
       children,
       align,
       grid = false,
+      style: propStyle,
       gridName = "",
       justify,
       stacked = false,
@@ -127,9 +125,18 @@ export const Box = forwardRef<HTMLDivElement, BoxProps>(
       ...remaining
     } = props;
 
+    let style = propStyle;
+    if (typeof gridColumns === "number") {
+      style = {
+        ...propStyle,
+        "--rmd-box-columns": gridColumns,
+      };
+    }
+
     return (
       <div
         {...remaining}
+        style={style}
         ref={ref}
         className={box({
           className,