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

package/dist/autocomplete/defaults.js

@@ -0,0 +1,52 @@
+import { caseInsensitiveSearch } from "../searching/caseInsensitive.js";
+import { defaultExtractor } from "../searching/utils.js";
+/**
+ * @remarks \@since 6.0.0
+ * @internal
+ */ export const defaultAutocompleteExtractor = (item)=>{
+    if (item && typeof item === "object" && "label" in item && typeof item.label === "string") {
+        return item.label;
+    }
+    return defaultExtractor("Autocomplete")(item);
+};
+/**
+ * @remarks \@since 6.0.0
+ * @internal
+ */ const isProbablyMenuItemProps = (item)=>!!item && typeof item === "object";
+/**
+ * @remarks \@since 6.0.0
+ * @internal
+ */ export const defaultAutocompleteOptionProps = (options)=>{
+    const { option } = options;
+    if (isProbablyMenuItemProps(option)) {
+        const { leftAddon, rightAddon, className, disabled, height, textProps, textClassName, primaryText, secondaryText, secondaryTextClassName, multiline, disableTextChildren } = option;
+        return {
+            leftAddon,
+            rightAddon,
+            className,
+            disabled,
+            height,
+            textProps,
+            textClassName,
+            primaryText,
+            secondaryText,
+            secondaryTextClassName,
+            multiline,
+            disableTextChildren
+        };
+    }
+    return;
+};
+/**
+ * This is just the {@link caseInsensitiveSearch} but requires
+ * the options to start with the current query.
+ *
+ * @since 6.0.0
+ */ export function defaultAutocompleteFilter(options) {
+    return caseInsensitiveSearch({
+        ...options,
+        startsWith: true
+    });
+}
+
+//# sourceMappingURL=defaults.js.map

package/dist/autocomplete/defaults.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/autocomplete/defaults.ts"],"sourcesContent":["import { type MenuItemProps } from \"../menu/MenuItem.js\";\nimport { caseInsensitiveSearch } from \"../searching/caseInsensitive.js\";\nimport { defaultExtractor } from \"../searching/utils.js\";\nimport { type AutocompleteFilterOptions } from \"./types.js\";\n\n/**\n * @remarks \\@since 6.0.0\n * @internal\n */\nexport const defaultAutocompleteExtractor = <T>(item: T): string => {\n  if (\n    item &&\n    typeof item === \"object\" &&\n    \"label\" in item &&\n    typeof item.label === \"string\"\n  ) {\n    return item.label;\n  }\n\n  return defaultExtractor(\"Autocomplete\")(item);\n};\n\n/**\n * @remarks \\@since 6.0.0\n * @internal\n */\nconst isProbablyMenuItemProps = (\n  item: unknown\n): item is Partial<MenuItemProps> => !!item && typeof item === \"object\";\n\n/**\n * @remarks \\@since 6.0.0\n * @internal\n */\nexport const defaultAutocompleteOptionProps = <T>(options: {\n  option: T;\n}): Partial<MenuItemProps> | undefined => {\n  const { option } = options;\n  if (isProbablyMenuItemProps(option)) {\n    const {\n      leftAddon,\n      rightAddon,\n      className,\n      disabled,\n      height,\n      textProps,\n      textClassName,\n      primaryText,\n      secondaryText,\n      secondaryTextClassName,\n      multiline,\n      disableTextChildren,\n    } = option;\n\n    return {\n      leftAddon,\n      rightAddon,\n      className,\n      disabled,\n      height,\n      textProps,\n      textClassName,\n      primaryText,\n      secondaryText,\n      secondaryTextClassName,\n      multiline,\n      disableTextChildren,\n    };\n  }\n  return;\n};\n\n/**\n * This is just the {@link caseInsensitiveSearch} but requires\n * the options to start with the current query.\n *\n * @since 6.0.0\n */\nexport function defaultAutocompleteFilter<T>(\n  options: AutocompleteFilterOptions<T>\n): readonly T[] {\n  return caseInsensitiveSearch({ ...options, startsWith: true });\n}\n"],"names":["caseInsensitiveSearch","defaultExtractor","defaultAutocompleteExtractor","item","label","isProbablyMenuItemProps","defaultAutocompleteOptionProps","options","option","leftAddon","rightAddon","className","disabled","height","textProps","textClassName","primaryText","secondaryText","secondaryTextClassName","multiline","disableTextChildren","defaultAutocompleteFilter","startsWith"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AACA,SAASA,qBAAqB,QAAQ,kCAAkC;AACxE,SAASC,gBAAgB,QAAQ,wBAAwB;AAGzD;;;CAGC,GACD,OAAO,MAAMC,+BAA+B,CAAIC;IAC9C,IACEA,QACA,OAAOA,SAAS,YAChB,WAAWA,QACX,OAAOA,KAAKC,KAAK,KAAK,UACtB;QACA,OAAOD,KAAKC,KAAK;IACnB;IAEA,OAAOH,iBAAiB,gBAAgBE;AAC1C,EAAE;AAEF;;;CAGC,GACD,MAAME,0BAA0B,CAC9BF,OACmC,CAAC,CAACA,QAAQ,OAAOA,SAAS;AAE/D;;;CAGC,GACD,OAAO,MAAMG,iCAAiC,CAAIC;IAGhD,MAAM,EAAEC,MAAM,EAAE,GAAGD;IACnB,IAAIF,wBAAwBG,SAAS;QACnC,MAAM,EACJC,SAAS,EACTC,UAAU,EACVC,SAAS,EACTC,QAAQ,EACRC,MAAM,EACNC,SAAS,EACTC,aAAa,EACbC,WAAW,EACXC,aAAa,EACbC,sBAAsB,EACtBC,SAAS,EACTC,mBAAmB,EACpB,GAAGZ;QAEJ,OAAO;YACLC;YACAC;YACAC;YACAC;YACAC;YACAC;YACAC;YACAC;YACAC;YACAC;YACAC;YACAC;QACF;IACF;IACA;AACF,EAAE;AAEF;;;;;CAKC,GACD,OAAO,SAASC,0BACdd,OAAqC;IAErC,OAAOP,sBAAsB;QAAE,GAAGO,OAAO;QAAEe,YAAY;IAAK;AAC9D"}

package/dist/autocomplete/types.d.ts

@@ -0,0 +1,103 @@
+import { type ReactNode } from "react";
+import { type MenuItemProps } from "../menu/MenuItem.jsx";
+import { type BaseSearchOptions, type WhitespaceFilter } from "../searching/types.js";
+import { type RequireAtLeastOne, type TextExtractor } from "../types.js";
+/**
+ * @since 6.0.0
+ */
+export type AutocompleteMenuLabel<T extends {
+    menuLabel?: string;
+    menuLabelledBy?: string;
+}> = RequireAtLeastOne<T, "menuLabel" | "menuLabelledBy">;
+/**
+ * @since 6.0.0
+ */
+export type AutocompleteFilterOptions<T> = Pick<Required<BaseSearchOptions<T>>, "list" | "query" | "extractor" | "whitespace">;
+/**
+ * @since 6.0.0
+ */
+export interface AutocompleteGetOptionPropsOptions<T> {
+    index: number;
+    option: T;
+}
+/**
+ * @since 6.0.0
+ */
+export interface AutocompleteOptionsProps<T> {
+    /**
+     * This list of options to display and will be filtered based on the current
+     * value in the text box unless {@link disableFilter} is `true`.
+     *
+     * When this is not a list of strings or a list of objects with a
+     * `{ label: string }`, the {@link extractor} is required to pull a searchable
+     * string from each option.
+     */
+    options: readonly T[];
+    /**
+     * This controls how the {@link options} are filtered based on the current
+     * value in the text box.
+     *
+     * @example Fuzzy Search
+     * ```tsx
+     * import { fuzzySearch } from "@react-md/core/searching/fuzzy";
+     *
+     * <Autocomplete
+     *   {...props}
+     *   filter={fuzzySearch}
+     * />
+     * ```
+     *
+     * @defaultValue `caseInsensitiveSearch`
+     */
+    filter?(options: AutocompleteFilterOptions<T>): readonly T[];
+    /**
+     * @example
+     * ```tsx
+     * <Autocomplete
+     *   options={[{ children: "Apple" }, { children = "Banana" }]}
+     *   extractor={(option) => option.children}
+     *   {...props}
+     * />
+     * ```
+     */
+    extractor?: TextExtractor<T>;
+    /**
+     * This can be used to add additional props to each option.
+     *
+     * @example Simple Example
+     * ```tsx
+     * getOptionProps={({ option }) => {
+     *   return {
+     *     disabled: option === "",
+     *     className: cnb(option === "a" && styles.blue),
+     *     leftAddon: option === value && <CheckIcon />,
+     *   };
+     * }}
+     * ```
+     */
+    getOptionProps?(options: AutocompleteGetOptionPropsOptions<T>): Partial<MenuItemProps> | undefined;
+    /**
+     * The children to display when there are no {@link options} due to the
+     * current text box value.
+     *
+     * @defaultValue `<ListSubheader>No options</ListSubheader`
+     */
+    noOptionsChildren?: ReactNode;
+    /**
+     * This will be called whenever one of the options are selected or reset.
+     */
+    onAutocomplete?(option: T | null): void;
+    /**
+     * @defaultValue `false`
+     */
+    clearOnAutocomplete?: boolean;
+    /**
+     * Set this to `true` to disable the built-in filtering of the
+     * {@link options}. This will always be `true` if `aria-autocomplete="none"`.
+     *
+     * @defaultValue `false`
+     */
+    disableFilter?: boolean;
+    /** @defaultValue `"keep"` */
+    whitespace?: WhitespaceFilter;
+}

package/dist/autocomplete/types.js

@@ -0,0 +1,5 @@
+/**
+ * @since 6.0.0
+ */ export { };
+
+//# sourceMappingURL=types.js.map

package/dist/autocomplete/types.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/autocomplete/types.ts"],"sourcesContent":["import { type ReactNode } from \"react\";\nimport { type MenuItemProps } from \"../menu/MenuItem.jsx\";\nimport {\n  type BaseSearchOptions,\n  type WhitespaceFilter,\n} from \"../searching/types.js\";\nimport { type RequireAtLeastOne, type TextExtractor } from \"../types.js\";\n\n/**\n * @since 6.0.0\n */\nexport type AutocompleteMenuLabel<\n  T extends { menuLabel?: string; menuLabelledBy?: string },\n> = RequireAtLeastOne<T, \"menuLabel\" | \"menuLabelledBy\">;\n\n/**\n * @since 6.0.0\n */\nexport type AutocompleteFilterOptions<T> = Pick<\n  Required<BaseSearchOptions<T>>,\n  \"list\" | \"query\" | \"extractor\" | \"whitespace\"\n>;\n\n/**\n * @since 6.0.0\n */\nexport interface AutocompleteGetOptionPropsOptions<T> {\n  index: number;\n  option: T;\n}\n\n/**\n * @since 6.0.0\n */\nexport interface AutocompleteOptionsProps<T> {\n  /**\n   * This list of options to display and will be filtered based on the current\n   * value in the text box unless {@link disableFilter} is `true`.\n   *\n   * When this is not a list of strings or a list of objects with a\n   * `{ label: string }`, the {@link extractor} is required to pull a searchable\n   * string from each option.\n   */\n  options: readonly T[];\n\n  /**\n   * This controls how the {@link options} are filtered based on the current\n   * value in the text box.\n   *\n   * @example Fuzzy Search\n   * ```tsx\n   * import { fuzzySearch } from \"@react-md/core/searching/fuzzy\";\n   *\n   * <Autocomplete\n   *   {...props}\n   *   filter={fuzzySearch}\n   * />\n   * ```\n   *\n   * @defaultValue `caseInsensitiveSearch`\n   */\n  filter?(options: AutocompleteFilterOptions<T>): readonly T[];\n\n  /**\n   * @example\n   * ```tsx\n   * <Autocomplete\n   *   options={[{ children: \"Apple\" }, { children = \"Banana\" }]}\n   *   extractor={(option) => option.children}\n   *   {...props}\n   * />\n   * ```\n   */\n  extractor?: TextExtractor<T>;\n\n  /**\n   * This can be used to add additional props to each option.\n   *\n   * @example Simple Example\n   * ```tsx\n   * getOptionProps={({ option }) => {\n   *   return {\n   *     disabled: option === \"\",\n   *     className: cnb(option === \"a\" && styles.blue),\n   *     leftAddon: option === value && <CheckIcon />,\n   *   };\n   * }}\n   * ```\n   */\n  getOptionProps?(\n    options: AutocompleteGetOptionPropsOptions<T>\n  ): Partial<MenuItemProps> | undefined;\n\n  /**\n   * The children to display when there are no {@link options} due to the\n   * current text box value.\n   *\n   * @defaultValue `<ListSubheader>No options</ListSubheader`\n   */\n  noOptionsChildren?: ReactNode;\n\n  /**\n   * This will be called whenever one of the options are selected or reset.\n   */\n  onAutocomplete?(option: T | null): void;\n\n  /**\n   * @defaultValue `false`\n   */\n  clearOnAutocomplete?: boolean;\n\n  /**\n   * Set this to `true` to disable the built-in filtering of the\n   * {@link options}. This will always be `true` if `aria-autocomplete=\"none\"`.\n   *\n   * @defaultValue `false`\n   */\n  disableFilter?: boolean;\n\n  /** @defaultValue `\"keep\"` */\n  whitespace?: WhitespaceFilter;\n}\n"],"names":[],"rangeMappings":";;","mappings":"AA+BA;;CAEC,GACD,WAuFC"}

package/dist/avatar/Avatar.d.ts

@@ -13,7 +13,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 extends Omit<HTMLAttributes<HTMLSpanElement>, "color">, AvatarClassNameOptions {
@@ -48,7 +48,7 @@ export interface AvatarProps extends Omit<HTMLAttributes<HTMLSpanElement>, "colo
      *
      * @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"];
     /**
@@ -60,7 +60,7 @@ export interface AvatarProps extends Omit<HTMLAttributes<HTMLSpanElement>, "colo
      * 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>;
 }
@@ -72,8 +72,7 @@ export interface AvatarProps extends Omit<HTMLAttributes<HTMLSpanElement>, "colo
  * 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";
@@ -83,7 +82,7 @@ export interface AvatarProps extends Omit<HTMLAttributes<HTMLSpanElement>, "colo
  * }
  * ```
  *
- * @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 declare const Avatar: import("react").ForwardRefExoticComponent<AvatarProps & import("react").RefAttributes<HTMLSpanElement>>;

package/dist/avatar/Avatar.js

@@ -9,8 +9,7 @@ import { avatar, avatarImage } from "./styles.js";
  * 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";
@@ -20,7 +19,7 @@ import { avatar, avatarImage } from "./styles.js";
  * }
  * ```
  *
- * @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 = /*#__PURE__*/ forwardRef(function Avatar(props, ref) {
     const { "aria-hidden": ariaHidden = true, className, children, src, alt = "", size = "avatar", color = "", theme, imgProps, referrerPolicy, ...remaining } = props;

package/dist/avatar/Avatar.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/avatar/Avatar.tsx"],"sourcesContent":["import {\n  forwardRef,\n  type HTMLAttributes,\n  type ImgHTMLAttributes,\n  type ReactNode,\n} from \"react\";\nimport { type PropsWithRef } from \"../types.js\";\nimport { avatar, avatarImage, type AvatarClassNameOptions } from \"./styles.js\";\n\ndeclare module \"react\" {\n  interface CSSProperties {\n    \"--rmd-avatar-background-color\"?: string;\n    \"--rmd-avatar-color\"?: string;\n    \"--rmd-avatar-border-color\"?: string;\n    \"--rmd-avatar-border-radius\"?: string | number;\n    \"--rmd-avatar-size\"?: string | number;\n    \"--rmd-avatar-font-size\"?: string | number;\n  }\n}\n\nexport type AvatarImgAttributes = ImgHTMLAttributes<HTMLImageElement>;\n\n/**\n * @remarks \\@since 6.0.0 `aria-hidden` is set to `true` by default and removed\n * the `role=\"presentation\"`.\n */\nexport interface AvatarProps\n  extends Omit<HTMLAttributes<HTMLSpanElement>, \"color\">,\n    AvatarClassNameOptions {\n  /**\n   * Since avatars are normally presentational data, they are hidden from screen\n   * readers by default.\n   *\n   * @defaultValue `true`\n   */\n  \"aria-hidden\"?: HTMLAttributes<HTMLSpanElement>[\"aria-hidden\"];\n\n  /**\n   * This should be an image `src` attribute to create an avatar from. When this\n   * prop is defined, you should not add any children to the avatar as the\n   * positioning will break.\n   */\n  src?: string;\n\n  /**\n   * An optional alt tag to display on the `<img>` when the `src` prop is also\n   * applied.\n   *\n   * For accessibility and screen readers, you normally do not want to actually\n   * provide this prop. This should only be used if the `Avatar` is not\n   * accompanied by some other component or main content as it will be extra\n   * noise for screen readers.\n   *\n   * @defaultValue `\"\"`\n   */\n  alt?: string;\n\n  /**\n   * An optional `referrerPolicy` to provide to the `<img>` element if the `src`\n   * or `imgProps` props are provided.\n   *\n   * @see {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#attr-referrerpolicy|Referrer Policy}\n   *\n   * @remarks \\@since 2.2.0\n   */\n  referrerPolicy?: AvatarImgAttributes[\"referrerPolicy\"];\n\n  /**\n   * An optional object of image props and ref that can be used to create an\n   * image within the `Avatar`. This can be useful to add a custom `style`\n   * or`className` to the `<img>` element if that additional customization is\n   * needed.\n   *\n   * Note: The values in this object will override the `src`, `alt`, and\n   * `referrerPolicy` root level avatar props if they exist on this object.\n   *\n   * @remarks \\@since 2.2.0\n   */\n  imgProps?: PropsWithRef<AvatarImgAttributes, HTMLImageElement>;\n}\n\n/**\n * **Server Component**\n *\n * An `Avatar` is generally used to represent objects or people within your app.\n * The avatar can consist of an image, an icon, or some text to display. When\n * the avatar is not an image, different themes can be applied to make the\n * avatar more unique.\n *\n * @example\n * Simple Example\n * ```tsx\n * import { Avatar } from \"@react-md/core\";\n * import { type ReactElement } from \"react\";\n *\n * export function Example(): ReactElement {\n *   return <Avatar src=\"/path-to-img.png\" />;\n * }\n * ```\n *\n * @remarks \\@since 6.0.0 `aria-hidden` is set to `true` by default and removed\n * the `role=\"presentation\"`.\n */\nexport const Avatar = forwardRef<HTMLSpanElement, AvatarProps>(\n  function Avatar(props, ref) {\n    const {\n      \"aria-hidden\": ariaHidden = true,\n      className,\n      children,\n      src,\n      alt = \"\",\n      size = \"avatar\",\n      color = \"\",\n      theme,\n      imgProps,\n      referrerPolicy,\n      ...remaining\n    } = props;\n\n    let img: ReactNode;\n    if (src || imgProps) {\n      img = (\n        <img\n          src={src}\n          alt={alt}\n          referrerPolicy={referrerPolicy}\n          {...imgProps}\n          className={avatarImage({ className: imgProps?.className })}\n        />\n      );\n    }\n\n    return (\n      <span\n        {...remaining}\n        aria-hidden={ariaHidden}\n        ref={ref}\n        className={avatar({\n          size,\n          color,\n          theme,\n          className,\n        })}\n      >\n        {img}\n        {children}\n      </span>\n    );\n  }\n);\n"],"names":["forwardRef","avatar","avatarImage","Avatar","props","ref","ariaHidden","className","children","src","alt","size","color","theme","imgProps","referrerPolicy","remaining","img","span","aria-hidden"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";AAAA,SACEA,UAAU,QAIL,QAAQ;AAEf,SAASC,MAAM,EAAEC,WAAW,QAAqC,cAAc;AA0E/E;;;;;;;;;;;;;;;;;;;;;CAqBC,GACD,OAAO,MAAMC,uBAASH,WACpB,SAASG,OAAOC,KAAK,EAAEC,GAAG;IACxB,MAAM,EACJ,eAAeC,aAAa,IAAI,EAChCC,SAAS,EACTC,QAAQ,EACRC,GAAG,EACHC,MAAM,EAAE,EACRC,OAAO,QAAQ,EACfC,QAAQ,EAAE,EACVC,KAAK,EACLC,QAAQ,EACRC,cAAc,EACd,GAAGC,WACJ,GAAGZ;IAEJ,IAAIa;IACJ,IAAIR,OAAOK,UAAU;QACnBG,oBACE,KAACA;YACCR,KAAKA;YACLC,KAAKA;YACLK,gBAAgBA;YACf,GAAGD,QAAQ;YACZP,WAAWL,YAAY;gBAAEK,WAAWO,UAAUP;YAAU;;IAG9D;IAEA,qBACE,MAACW;QACE,GAAGF,SAAS;QACbG,eAAab;QACbD,KAAKA;QACLE,WAAWN,OAAO;YAChBU;YACAC;YACAC;YACAN;QACF;;YAECU;YACAT;;;AAGP,GACA"}
+{"version":3,"sources":["../../src/avatar/Avatar.tsx"],"sourcesContent":["import {\n  forwardRef,\n  type HTMLAttributes,\n  type ImgHTMLAttributes,\n  type ReactNode,\n} from \"react\";\nimport { type PropsWithRef } from \"../types.js\";\nimport { avatar, avatarImage, type AvatarClassNameOptions } from \"./styles.js\";\n\ndeclare module \"react\" {\n  interface CSSProperties {\n    \"--rmd-avatar-background-color\"?: string;\n    \"--rmd-avatar-color\"?: string;\n    \"--rmd-avatar-border-color\"?: string;\n    \"--rmd-avatar-border-radius\"?: string | number;\n    \"--rmd-avatar-size\"?: string | number;\n    \"--rmd-avatar-font-size\"?: string | number;\n  }\n}\n\nexport type AvatarImgAttributes = ImgHTMLAttributes<HTMLImageElement>;\n\n/**\n * @since 6.0.0 `aria-hidden` is set to `true` by default and removed\n * the `role=\"presentation\"`.\n */\nexport interface AvatarProps\n  extends Omit<HTMLAttributes<HTMLSpanElement>, \"color\">,\n    AvatarClassNameOptions {\n  /**\n   * Since avatars are normally presentational data, they are hidden from screen\n   * readers by default.\n   *\n   * @defaultValue `true`\n   */\n  \"aria-hidden\"?: HTMLAttributes<HTMLSpanElement>[\"aria-hidden\"];\n\n  /**\n   * This should be an image `src` attribute to create an avatar from. When this\n   * prop is defined, you should not add any children to the avatar as the\n   * positioning will break.\n   */\n  src?: string;\n\n  /**\n   * An optional alt tag to display on the `<img>` when the `src` prop is also\n   * applied.\n   *\n   * For accessibility and screen readers, you normally do not want to actually\n   * provide this prop. This should only be used if the `Avatar` is not\n   * accompanied by some other component or main content as it will be extra\n   * noise for screen readers.\n   *\n   * @defaultValue `\"\"`\n   */\n  alt?: string;\n\n  /**\n   * An optional `referrerPolicy` to provide to the `<img>` element if the `src`\n   * or `imgProps` props are provided.\n   *\n   * @see {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#attr-referrerpolicy|Referrer Policy}\n   *\n   * @since 2.2.0\n   */\n  referrerPolicy?: AvatarImgAttributes[\"referrerPolicy\"];\n\n  /**\n   * An optional object of image props and ref that can be used to create an\n   * image within the `Avatar`. This can be useful to add a custom `style`\n   * or`className` to the `<img>` element if that additional customization is\n   * needed.\n   *\n   * Note: The values in this object will override the `src`, `alt`, and\n   * `referrerPolicy` root level avatar props if they exist on this object.\n   *\n   * @since 2.2.0\n   */\n  imgProps?: PropsWithRef<AvatarImgAttributes, HTMLImageElement>;\n}\n\n/**\n * **Server Component**\n *\n * An `Avatar` is generally used to represent objects or people within your app.\n * The avatar can consist of an image, an icon, or some text to display. When\n * the avatar is not an image, different themes can be applied to make the\n * avatar more unique.\n *\n * @example Simple Example\n * ```tsx\n * import { Avatar } from \"@react-md/core\";\n * import { type ReactElement } from \"react\";\n *\n * export function Example(): ReactElement {\n *   return <Avatar src=\"/path-to-img.png\" />;\n * }\n * ```\n *\n * @since 6.0.0 `aria-hidden` is set to `true` by default and removed\n * the `role=\"presentation\"`.\n */\nexport const Avatar = forwardRef<HTMLSpanElement, AvatarProps>(\n  function Avatar(props, ref) {\n    const {\n      \"aria-hidden\": ariaHidden = true,\n      className,\n      children,\n      src,\n      alt = \"\",\n      size = \"avatar\",\n      color = \"\",\n      theme,\n      imgProps,\n      referrerPolicy,\n      ...remaining\n    } = props;\n\n    let img: ReactNode;\n    if (src || imgProps) {\n      img = (\n        <img\n          src={src}\n          alt={alt}\n          referrerPolicy={referrerPolicy}\n          {...imgProps}\n          className={avatarImage({ className: imgProps?.className })}\n        />\n      );\n    }\n\n    return (\n      <span\n        {...remaining}\n        aria-hidden={ariaHidden}\n        ref={ref}\n        className={avatar({\n          size,\n          color,\n          theme,\n          className,\n        })}\n      >\n        {img}\n        {children}\n      </span>\n    );\n  }\n);\n"],"names":["forwardRef","avatar","avatarImage","Avatar","props","ref","ariaHidden","className","children","src","alt","size","color","theme","imgProps","referrerPolicy","remaining","img","span","aria-hidden"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";AAAA,SACEA,UAAU,QAIL,QAAQ;AAEf,SAASC,MAAM,EAAEC,WAAW,QAAqC,cAAc;AA0E/E;;;;;;;;;;;;;;;;;;;;CAoBC,GACD,OAAO,MAAMC,uBAASH,WACpB,SAASG,OAAOC,KAAK,EAAEC,GAAG;IACxB,MAAM,EACJ,eAAeC,aAAa,IAAI,EAChCC,SAAS,EACTC,QAAQ,EACRC,GAAG,EACHC,MAAM,EAAE,EACRC,OAAO,QAAQ,EACfC,QAAQ,EAAE,EACVC,KAAK,EACLC,QAAQ,EACRC,cAAc,EACd,GAAGC,WACJ,GAAGZ;IAEJ,IAAIa;IACJ,IAAIR,OAAOK,UAAU;QACnBG,oBACE,KAACA;YACCR,KAAKA;YACLC,KAAKA;YACLK,gBAAgBA;YACf,GAAGD,QAAQ;YACZP,WAAWL,YAAY;gBAAEK,WAAWO,UAAUP;YAAU;;IAG9D;IAEA,qBACE,MAACW;QACE,GAAGF,SAAS;QACbG,eAAab;QACbD,KAAKA;QACLE,WAAWN,OAAO;YAChBU;YACAC;YACAC;YACAN;QACF;;YAECU;YACAT;;;AAGP,GACA"}

package/dist/avatar/_avatar.scss

@@ -1,3 +1,4 @@
+@use "sass:list";
 @use "sass:map";
 @use "sass:math";
 @use "../utils";
@@ -139,14 +140,14 @@ $variables: (
         }
 
         @each $name, $values in $colors {
-          @if length($values) != 2 {
+          @if list.length($values) != 2 {
             @error 'Unable to create an avatar color because the list of values is not of length 2. The first value should be the background-color and the second should be the text color. "#{$values}"';
           }
 
           @include custom-color(
             "&--#{$name}",
-            nth($values, 2),
-            nth($values, 1),
+            list.nth($values, 2),
+            list.nth($values, 1),
             true
           );
         }

package/dist/avatar/styles.d.ts

@@ -1,5 +1,5 @@
 import { type ThemeColor } from "../cssUtils.js";
-/** @remarks \@since 6.0.0 */
+/** @since 6.0.0 */
 export interface AvatarClassNameOptions {
     className?: string;
     /**
@@ -25,14 +25,14 @@ export interface AvatarClassNameOptions {
     theme?: ThemeColor;
 }
 /**
- * @remarks \@since 6.0.0
+ * @since 6.0.0
  */
 export declare 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 declare function avatarImage(options?: AvatarImageClassNameOptions): string;

package/dist/avatar/styles.js

@@ -3,7 +3,7 @@ import { cssUtils } from "../cssUtils.js";
 import { bem } from "../utils/bem.js";
 const styles = bem("rmd-avatar");
 /**
- * @remarks \@since 6.0.0
+ * @since 6.0.0
  */ export function avatar(options) {
     const { className, color = "", size, theme } = options;
     return cnb(styles({
@@ -14,7 +14,7 @@ const styles = bem("rmd-avatar");
     }), className);
 }
 /**
- * @remarks \@since 6.0.0
+ * @since 6.0.0
  */ export function avatarImage(options = {}) {
     const { className } = options;
     return cnb(styles("image"), className);

package/dist/avatar/styles.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/avatar/styles.ts"],"sourcesContent":["import { cnb } from \"cnbuilder\";\nimport { cssUtils, type ThemeColor } from \"../cssUtils.js\";\nimport { bem } from \"../utils/bem.js\";\n\nconst styles = bem(\"rmd-avatar\");\n\n/** @remarks \\@since 6.0.0 */\nexport interface AvatarClassNameOptions {\n  className?: string;\n\n  /**\n   * An optional color to apply to the avatar. This will apply a className of\n   * `rmd-avatar--${color}`, so only the keys from the `$rmd-avatar-colors` Map\n   * are supported by default. It is recommended to create custom colors using\n   * the `rmd-avatar-theme-update-var` mixin with custom class names if the\n   * default colors aren't extensive enough.\n   *\n   * @see {@link theme}\n   * @defaultValue `\"\"`\n   */\n  color?: string;\n\n  /**\n   * @defaultValue `\"avatar\"`\n   */\n  size?: \"avatar\" | \"icon\";\n\n  /**\n   * This can be used instead of {@link color} to set the background color to one of\n   * the theme colors. This will also set the text color to either be `#000` or\n   * `#fff` automatically to enforce the correct aspect ratio.\n   */\n  theme?: ThemeColor;\n}\n\n/**\n * @remarks \\@since 6.0.0\n */\nexport function avatar(options: AvatarClassNameOptions): string {\n  const { className, color = \"\", size, theme } = options;\n\n  return cnb(\n    styles({ [color]: color, icon: size === \"icon\" }),\n    cssUtils({ backgroundColor: theme }),\n    className\n  );\n}\n\n/** @remarks \\@since 6.0.0 */\nexport interface AvatarImageClassNameOptions {\n  className?: string;\n}\n\n/**\n * @remarks \\@since 6.0.0\n */\nexport function avatarImage(options: AvatarImageClassNameOptions = {}): string {\n  const { className } = options;\n\n  return cnb(styles(\"image\"), className);\n}\n"],"names":["cnb","cssUtils","bem","styles","avatar","options","className","color","size","theme","icon","backgroundColor","avatarImage"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;","mappings":"AAAA,SAASA,GAAG,QAAQ,YAAY;AAChC,SAASC,QAAQ,QAAyB,iBAAiB;AAC3D,SAASC,GAAG,QAAQ,kBAAkB;AAEtC,MAAMC,SAASD,IAAI;AA+BnB;;CAEC,GACD,OAAO,SAASE,OAAOC,OAA+B;IACpD,MAAM,EAAEC,SAAS,EAAEC,QAAQ,EAAE,EAAEC,IAAI,EAAEC,KAAK,EAAE,GAAGJ;IAE/C,OAAOL,IACLG,OAAO;QAAE,CAACI,MAAM,EAAEA;QAAOG,MAAMF,SAAS;IAAO,IAC/CP,SAAS;QAAEU,iBAAiBF;IAAM,IAClCH;AAEJ;AAOA;;CAEC,GACD,OAAO,SAASM,YAAYP,UAAuC,CAAC,CAAC;IACnE,MAAM,EAAEC,SAAS,EAAE,GAAGD;IAEtB,OAAOL,IAAIG,OAAO,UAAUG;AAC9B"}
+{"version":3,"sources":["../../src/avatar/styles.ts"],"sourcesContent":["import { cnb } from \"cnbuilder\";\nimport { cssUtils, type ThemeColor } from \"../cssUtils.js\";\nimport { bem } from \"../utils/bem.js\";\n\nconst styles = bem(\"rmd-avatar\");\n\n/** @since 6.0.0 */\nexport interface AvatarClassNameOptions {\n  className?: string;\n\n  /**\n   * An optional color to apply to the avatar. This will apply a className of\n   * `rmd-avatar--${color}`, so only the keys from the `$rmd-avatar-colors` Map\n   * are supported by default. It is recommended to create custom colors using\n   * the `rmd-avatar-theme-update-var` mixin with custom class names if the\n   * default colors aren't extensive enough.\n   *\n   * @see {@link theme}\n   * @defaultValue `\"\"`\n   */\n  color?: string;\n\n  /**\n   * @defaultValue `\"avatar\"`\n   */\n  size?: \"avatar\" | \"icon\";\n\n  /**\n   * This can be used instead of {@link color} to set the background color to one of\n   * the theme colors. This will also set the text color to either be `#000` or\n   * `#fff` automatically to enforce the correct aspect ratio.\n   */\n  theme?: ThemeColor;\n}\n\n/**\n * @since 6.0.0\n */\nexport function avatar(options: AvatarClassNameOptions): string {\n  const { className, color = \"\", size, theme } = options;\n\n  return cnb(\n    styles({ [color]: color, icon: size === \"icon\" }),\n    cssUtils({ backgroundColor: theme }),\n    className\n  );\n}\n\n/** @since 6.0.0 */\nexport interface AvatarImageClassNameOptions {\n  className?: string;\n}\n\n/**\n * @since 6.0.0\n */\nexport function avatarImage(options: AvatarImageClassNameOptions = {}): string {\n  const { className } = options;\n\n  return cnb(styles(\"image\"), className);\n}\n"],"names":["cnb","cssUtils","bem","styles","avatar","options","className","color","size","theme","icon","backgroundColor","avatarImage"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;","mappings":"AAAA,SAASA,GAAG,QAAQ,YAAY;AAChC,SAASC,QAAQ,QAAyB,iBAAiB;AAC3D,SAASC,GAAG,QAAQ,kBAAkB;AAEtC,MAAMC,SAASD,IAAI;AA+BnB;;CAEC,GACD,OAAO,SAASE,OAAOC,OAA+B;IACpD,MAAM,EAAEC,SAAS,EAAEC,QAAQ,EAAE,EAAEC,IAAI,EAAEC,KAAK,EAAE,GAAGJ;IAE/C,OAAOL,IACLG,OAAO;QAAE,CAACI,MAAM,EAAEA;QAAOG,MAAMF,SAAS;IAAO,IAC/CP,SAAS;QAAEU,iBAAiBF;IAAM,IAClCH;AAEJ;AAOA;;CAEC,GACD,OAAO,SAASM,YAAYP,UAAuC,CAAC,CAAC;IACnE,MAAM,EAAEC,SAAS,EAAE,GAAGD;IAEtB,OAAOL,IAAIG,OAAO,UAAUG;AAC9B"}

package/dist/badge/Badge.d.ts

@@ -9,7 +9,7 @@ declare module "react" {
     }
 }
 /**
- * @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";
@@ -27,8 +27,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";
@@ -46,8 +45,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";
@@ -62,7 +60,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 declare const Badge: import("react").ForwardRefExoticComponent<BadgeProps & import("react").RefAttributes<HTMLSpanElement>>;

package/dist/badge/Badge.js

@@ -17,8 +17,7 @@ export function badge(options = {}) {
 /**
  * **Server Component**
  *
- * @example
- * Simple Example
+ * @example Simple Example
  * ```tsx
  * import type { ReactElement } from "react";
  * import { Badge, Button, MaterialSymbol } from "@react-md/core";
@@ -36,8 +35,7 @@ export function badge(options = {}) {
  * }
  * ```
  *
- * @example
- * Within Buttons Example
+ * @example Within Buttons Example
  * ```tsx
  * import type { ReactElement } from "react";
  * import { Badge, Button, MaterialSymbol } from "@react-md/core";
@@ -52,7 +50,7 @@ export function badge(options = {}) {
  * }
  * ```
  *
- * @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 = /*#__PURE__*/ forwardRef(function Badge(props, ref) {
     const { children, className, theme, ...remaining } = props;

package/dist/badge/Badge.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/badge/Badge.tsx"],"sourcesContent":["import { cnb } from \"cnbuilder\";\nimport { forwardRef, type HTMLAttributes, type ReactNode } from \"react\";\nimport { cssUtils, type BackgroundColor } from \"../cssUtils.js\";\nimport { bem } from \"../utils/bem.js\";\n\ndeclare module \"react\" {\n  interface CSSProperties {\n    \"--rmd-badge-size\"?: string | number;\n    \"--rmd-badge-offset\"?: string | number;\n    \"--rmd-badge-offset-top\"?: string | number;\n    \"--rmd-badge-offset-right\"?: string | number;\n  }\n}\n\nconst styles = bem(\"rmd-badge\");\n\n/**\n * @remarks \\@since 6.0.0 Renamed `\"default\"` to `\"greyscale\"` and added all\n * theme colors.\n */\nexport type BadgeTheme = BackgroundColor | \"greyscale\" | \"clear\";\n\nexport interface BadgeClassNameOptions {\n  className?: string;\n\n  /** @defaultValue `\"\"greyscale` */\n  theme?: BadgeTheme;\n}\n\nexport function badge(options: BadgeClassNameOptions = {}): string {\n  const { className, theme = \"greyscale\" } = options;\n  const greyscale = theme === \"greyscale\";\n  const clear = theme === \"clear\";\n\n  return cnb(\n    styles({ greyscale }),\n    cssUtils({ backgroundColor: !clear && !greyscale ? theme : undefined }),\n    className\n  );\n}\n\nexport interface BadgeProps extends HTMLAttributes<HTMLSpanElement> {\n  /** @defaultValue `\"\"greyscale` */\n  theme?: BadgeTheme;\n\n  children: ReactNode;\n}\n\n/**\n * **Server Component**\n *\n * @example\n * Simple Example\n * ```tsx\n * import type { ReactElement } from \"react\";\n * import { Badge, Button, MaterialSymbol } from \"@react-md/core\";\n *\n * function Example(): ReactElement {\n *   return (\n *     <>\n *       <Badge>3</Badge>\n *       <Badge theme=\"primary\">100</Badge>\n *       <Badge theme=\"secondary\">23</Badge>\n *       <Badge theme=\"greyscale\">18</Badge>\n *       <Badge theme=\"clear\">1</Badge>\n *     </>\n *   );\n * }\n * ```\n *\n * @example\n * Within Buttons Example\n * ```tsx\n * import type { ReactElement } from \"react\";\n * import { Badge, Button, MaterialSymbol } from \"@react-md/core\";\n *\n * function Example(): ReactElement {\n *   return (\n *     <Button aria-label=\"Notifications\" buttonType=\"icon\">\n *       <Badge>88</Badge>\n *       <MaterialSymbol name=\"notifications\" />\n *     </Button>\n *   );\n * }\n * ```\n *\n * @remarks \\@since 6.0.0 Removed the `disableNullOnZero` feature since it's\n * easier just to use condition rendering yourself.\n */\nexport const Badge = forwardRef<HTMLSpanElement, BadgeProps>(\n  function Badge(props, ref) {\n    const { children, className, theme, ...remaining } = props;\n    return (\n      <span {...remaining} ref={ref} className={badge({ theme, className })}>\n        {children}\n      </span>\n    );\n  }\n);\n"],"names":["cnb","forwardRef","cssUtils","bem","styles","badge","options","className","theme","greyscale","clear","backgroundColor","undefined","Badge","props","ref","children","remaining","span"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";AAAA,SAASA,GAAG,QAAQ,YAAY;AAChC,SAASC,UAAU,QAA6C,QAAQ;AACxE,SAASC,QAAQ,QAA8B,iBAAiB;AAChE,SAASC,GAAG,QAAQ,kBAAkB;AAWtC,MAAMC,SAASD,IAAI;AAenB,OAAO,SAASE,MAAMC,UAAiC,CAAC,CAAC;IACvD,MAAM,EAAEC,SAAS,EAAEC,QAAQ,WAAW,EAAE,GAAGF;IAC3C,MAAMG,YAAYD,UAAU;IAC5B,MAAME,QAAQF,UAAU;IAExB,OAAOR,IACLI,OAAO;QAAEK;IAAU,IACnBP,SAAS;QAAES,iBAAiB,CAACD,SAAS,CAACD,YAAYD,QAAQI;IAAU,IACrEL;AAEJ;AASA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAwCC,GACD,OAAO,MAAMM,sBAAQZ,WACnB,SAASY,MAAMC,KAAK,EAAEC,GAAG;IACvB,MAAM,EAAEC,QAAQ,EAAET,SAAS,EAAEC,KAAK,EAAE,GAAGS,WAAW,GAAGH;IACrD,qBACE,KAACI;QAAM,GAAGD,SAAS;QAAEF,KAAKA;QAAKR,WAAWF,MAAM;YAAEG;YAAOD;QAAU;kBAChES;;AAGP,GACA"}
+{"version":3,"sources":["../../src/badge/Badge.tsx"],"sourcesContent":["import { cnb } from \"cnbuilder\";\nimport { forwardRef, type HTMLAttributes, type ReactNode } from \"react\";\nimport { cssUtils, type BackgroundColor } from \"../cssUtils.js\";\nimport { bem } from \"../utils/bem.js\";\n\ndeclare module \"react\" {\n  interface CSSProperties {\n    \"--rmd-badge-size\"?: string | number;\n    \"--rmd-badge-offset\"?: string | number;\n    \"--rmd-badge-offset-top\"?: string | number;\n    \"--rmd-badge-offset-right\"?: string | number;\n  }\n}\n\nconst styles = bem(\"rmd-badge\");\n\n/**\n * @since 6.0.0 Renamed `\"default\"` to `\"greyscale\"` and added all\n * theme colors.\n */\nexport type BadgeTheme = BackgroundColor | \"greyscale\" | \"clear\";\n\nexport interface BadgeClassNameOptions {\n  className?: string;\n\n  /** @defaultValue `\"\"greyscale` */\n  theme?: BadgeTheme;\n}\n\nexport function badge(options: BadgeClassNameOptions = {}): string {\n  const { className, theme = \"greyscale\" } = options;\n  const greyscale = theme === \"greyscale\";\n  const clear = theme === \"clear\";\n\n  return cnb(\n    styles({ greyscale }),\n    cssUtils({ backgroundColor: !clear && !greyscale ? theme : undefined }),\n    className\n  );\n}\n\nexport interface BadgeProps extends HTMLAttributes<HTMLSpanElement> {\n  /** @defaultValue `\"\"greyscale` */\n  theme?: BadgeTheme;\n\n  children: ReactNode;\n}\n\n/**\n * **Server Component**\n *\n * @example Simple Example\n * ```tsx\n * import type { ReactElement } from \"react\";\n * import { Badge, Button, MaterialSymbol } from \"@react-md/core\";\n *\n * function Example(): ReactElement {\n *   return (\n *     <>\n *       <Badge>3</Badge>\n *       <Badge theme=\"primary\">100</Badge>\n *       <Badge theme=\"secondary\">23</Badge>\n *       <Badge theme=\"greyscale\">18</Badge>\n *       <Badge theme=\"clear\">1</Badge>\n *     </>\n *   );\n * }\n * ```\n *\n * @example Within Buttons Example\n * ```tsx\n * import type { ReactElement } from \"react\";\n * import { Badge, Button, MaterialSymbol } from \"@react-md/core\";\n *\n * function Example(): ReactElement {\n *   return (\n *     <Button aria-label=\"Notifications\" buttonType=\"icon\">\n *       <Badge>88</Badge>\n *       <MaterialSymbol name=\"notifications\" />\n *     </Button>\n *   );\n * }\n * ```\n *\n * @since 6.0.0 Removed the `disableNullOnZero` feature since it's\n * easier just to use condition rendering yourself.\n */\nexport const Badge = forwardRef<HTMLSpanElement, BadgeProps>(\n  function Badge(props, ref) {\n    const { children, className, theme, ...remaining } = props;\n    return (\n      <span {...remaining} ref={ref} className={badge({ theme, className })}>\n        {children}\n      </span>\n    );\n  }\n);\n"],"names":["cnb","forwardRef","cssUtils","bem","styles","badge","options","className","theme","greyscale","clear","backgroundColor","undefined","Badge","props","ref","children","remaining","span"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";AAAA,SAASA,GAAG,QAAQ,YAAY;AAChC,SAASC,UAAU,QAA6C,QAAQ;AACxE,SAASC,QAAQ,QAA8B,iBAAiB;AAChE,SAASC,GAAG,QAAQ,kBAAkB;AAWtC,MAAMC,SAASD,IAAI;AAenB,OAAO,SAASE,MAAMC,UAAiC,CAAC,CAAC;IACvD,MAAM,EAAEC,SAAS,EAAEC,QAAQ,WAAW,EAAE,GAAGF;IAC3C,MAAMG,YAAYD,UAAU;IAC5B,MAAME,QAAQF,UAAU;IAExB,OAAOR,IACLI,OAAO;QAAEK;IAAU,IACnBP,SAAS;QAAES,iBAAiB,CAACD,SAAS,CAACD,YAAYD,QAAQI;IAAU,IACrEL;AAEJ;AASA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAsCC,GACD,OAAO,MAAMM,sBAAQZ,WACnB,SAASY,MAAMC,KAAK,EAAEC,GAAG;IACvB,MAAM,EAAEC,QAAQ,EAAET,SAAS,EAAEC,KAAK,EAAE,GAAGS,WAAW,GAAGH;IACrD,qBACE,KAACI;QAAM,GAAGD,SAAS;QAAEF,KAAKA;QAAKR,WAAWF,MAAM;YAAEG;YAAOD;QAAU;kBAChES;;AAGP,GACA"}

package/dist/box/Box.d.ts

@@ -1,7 +1,7 @@
 import { type HTMLAttributes } from "react";
 import { type BoxOptions } from "./styles.js";
 /**
- * @remarks \@since 6.0.0
+ * @since 6.0.0
  */
 export interface BoxProps extends HTMLAttributes<HTMLDivElement>, BoxOptions {
 }
@@ -13,8 +13,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;
@@ -42,8 +41,7 @@ export interface BoxProps extends HTMLAttributes<HTMLDivElement>, BoxOptions {
  * }
  * ```
  *
- * @example
- * Default Grid Styles
+ * @example Default Grid Styles
  * ```scss
  * .box {
  *   align-items: center;
@@ -71,11 +69,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,
  *     ),
@@ -106,6 +103,6 @@ export interface BoxProps extends HTMLAttributes<HTMLDivElement>, BoxOptions {
  * }
  * ```
  *
- * @remarks \@since 6.0.0
+ * @since 6.0.0
  */
 export declare const Box: import("react").ForwardRefExoticComponent<BoxProps & import("react").RefAttributes<HTMLDivElement>>;

package/dist/box/Box.js

@@ -9,8 +9,7 @@ import { box } from "./styles.js";
  * 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;
@@ -38,8 +37,7 @@ import { box } from "./styles.js";
  * }
  * ```
  *
- * @example
- * Default Grid Styles
+ * @example Default Grid Styles
  * ```scss
  * .box {
  *   align-items: center;
@@ -67,11 +65,10 @@ import { box } from "./styles.js";
  * }
  * ```
  *
- * @example
- * Custom Grid
+ * @example Custom Grid
  * ```scss
  * @use "@react-md/core" with (
- *   $grids: (
+ *   $box-grids: (
  *     small: (
  *       min: 5rem,
  *     ),
@@ -102,11 +99,19 @@ import { box } from "./styles.js";
  * }
  * ```
  *
- * @remarks \@since 6.0.0
+ * @since 6.0.0
  */ export const Box = /*#__PURE__*/ forwardRef(function Box(props, ref) {
-    const { className, children, align, grid = false, gridName = "", justify, stacked = false, reversed = false, gridColumns = "fit", fullWidth = false, disableWrap = false, disablePadding = false, ...remaining } = props;
+    const { className, children, align, grid = false, style: propStyle, gridName = "", justify, stacked = false, reversed = false, gridColumns = "fit", fullWidth = false, disableWrap = false, disablePadding = false, ...remaining } = props;
+    let style = propStyle;
+    if (typeof gridColumns === "number") {
+        style = {
+            ...propStyle,
+            "--rmd-box-columns": gridColumns
+        };
+    }
     return /*#__PURE__*/ _jsx("div", {
         ...remaining,
+        style: style,
         ref: ref,
         className: box({
             className,

package/dist/box/Box.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/box/Box.tsx"],"sourcesContent":["import { forwardRef, type HTMLAttributes } from \"react\";\nimport { box, type BoxOptions } from \"./styles.js\";\n\n/**\n * @remarks \\@since 6.0.0\n */\nexport interface BoxProps extends HTMLAttributes<HTMLDivElement>, BoxOptions {}\n\n/**\n * **Server Component**\n *\n * The `Box` component is a wrapper around the CSS box model and should solve\n * most of your `flex` and `grid` layout requirements for responsive design.\n * There are pass-through props for all of the box module styling properties\n * available by default.\n *\n * @example\n * Default Styles\n * ```scss\n * .box {\n *   align-items: center;\n *   display: flex;\n *   flex-wrap: wrap;\n *   gap: 1rem;\n *   padding: 1rem;\n * }\n * ```\n *\n * ```tsx\n * import { Box } from \"@react-md/core\";\n * import type { ReactElement } from \"react\";\n *\n * export default function Example(): ReactElement {\n *   return (\n *     <Box>\n *       <div>Thing 1</div>\n *       <div>Thing 2</div>\n *       <div>Thing 3</div>\n *       <div>Thing 4</div>\n *       <div>Thing 5</div>\n *     </Box>\n *   ):\n * }\n * ```\n *\n * @example\n * Default Grid Styles\n * ```scss\n * .box {\n *   align-items: center;\n *   display: grid;\n *   grid-gap: 1rem;\n *   grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr));\n *   padding: 1rem;\n * }\n * ```\n *\n * ```tsx\n * import { Box } from \"@react-md/core\";\n * import type { ReactElement } from \"react\";\n *\n * export default function Example(): ReactElement {\n *   return (\n *     <Box grid>\n *       <div>Thing 1</div>\n *       <div>Thing 2</div>\n *       <div>Thing 3</div>\n *       <div>Thing 4</div>\n *       <div>Thing 5</div>\n *     </Box>\n *   ):\n * }\n * ```\n *\n * @example\n * Custom Grid\n * ```scss\n * @use \"@react-md/core\" with (\n *   $grids: (\n *     small: (\n *       min: 5rem,\n *     ),\n *     medium: (\n *       min: 7rem,\n *       padding: 2rem,\n *       gap: 0.5rem,\n *     ),\n *   )\n * );\n *\n * ```\n *\n * ```tsx\n * import { Box } from \"@react-md/core\";\n * import type { ReactElement } from \"react\";\n *\n * export default function Example(): ReactElement {\n *   return (\n *     <Box grid gridName=\"medium\">\n *       <div>Thing 1</div>\n *       <div>Thing 2</div>\n *       <div>Thing 3</div>\n *       <div>Thing 4</div>\n *       <div>Thing 5</div>\n *     </Box>\n *   ):\n * }\n * ```\n *\n * @remarks \\@since 6.0.0\n */\nexport const Box = forwardRef<HTMLDivElement, BoxProps>(\n  function Box(props, ref) {\n    const {\n      className,\n      children,\n      align,\n      grid = false,\n      gridName = \"\",\n      justify,\n      stacked = false,\n      reversed = false,\n      gridColumns = \"fit\",\n      fullWidth = false,\n      disableWrap = false,\n      disablePadding = false,\n      ...remaining\n    } = props;\n\n    return (\n      <div\n        {...remaining}\n        ref={ref}\n        className={box({\n          className,\n          fullWidth,\n          grid,\n          stacked,\n          gridName,\n          gridColumns,\n          align,\n          justify,\n          reversed,\n          disableWrap,\n          disablePadding,\n        })}\n      >\n        {children}\n      </div>\n    );\n  }\n);\n"],"names":["forwardRef","box","Box","props","ref","className","children","align","grid","gridName","justify","stacked","reversed","gridColumns","fullWidth","disableWrap","disablePadding","remaining","div"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";AAAA,SAASA,UAAU,QAA6B,QAAQ;AACxD,SAASC,GAAG,QAAyB,cAAc;AAOnD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAsGC,GACD,OAAO,MAAMC,oBAAMF,WACjB,SAASE,IAAIC,KAAK,EAAEC,GAAG;IACrB,MAAM,EACJC,SAAS,EACTC,QAAQ,EACRC,KAAK,EACLC,OAAO,KAAK,EACZC,WAAW,EAAE,EACbC,OAAO,EACPC,UAAU,KAAK,EACfC,WAAW,KAAK,EAChBC,cAAc,KAAK,EACnBC,YAAY,KAAK,EACjBC,cAAc,KAAK,EACnBC,iBAAiB,KAAK,EACtB,GAAGC,WACJ,GAAGd;IAEJ,qBACE,KAACe;QACE,GAAGD,SAAS;QACbb,KAAKA;QACLC,WAAWJ,IAAI;YACbI;YACAS;YACAN;YACAG;YACAF;YACAI;YACAN;YACAG;YACAE;YACAG;YACAC;QACF;kBAECV;;AAGP,GACA"}
+{"version":3,"sources":["../../src/box/Box.tsx"],"sourcesContent":["import { forwardRef, type HTMLAttributes } from \"react\";\nimport { box, type BoxOptions } from \"./styles.js\";\n\n/**\n * @since 6.0.0\n */\nexport interface BoxProps extends HTMLAttributes<HTMLDivElement>, BoxOptions {}\n\n/**\n * **Server Component**\n *\n * The `Box` component is a wrapper around the CSS box model and should solve\n * most of your `flex` and `grid` layout requirements for responsive design.\n * There are pass-through props for all of the box module styling properties\n * available by default.\n *\n * @example Default Styles\n * ```scss\n * .box {\n *   align-items: center;\n *   display: flex;\n *   flex-wrap: wrap;\n *   gap: 1rem;\n *   padding: 1rem;\n * }\n * ```\n *\n * ```tsx\n * import { Box } from \"@react-md/core\";\n * import type { ReactElement } from \"react\";\n *\n * export default function Example(): ReactElement {\n *   return (\n *     <Box>\n *       <div>Thing 1</div>\n *       <div>Thing 2</div>\n *       <div>Thing 3</div>\n *       <div>Thing 4</div>\n *       <div>Thing 5</div>\n *     </Box>\n *   ):\n * }\n * ```\n *\n * @example Default Grid Styles\n * ```scss\n * .box {\n *   align-items: center;\n *   display: grid;\n *   grid-gap: 1rem;\n *   grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr));\n *   padding: 1rem;\n * }\n * ```\n *\n * ```tsx\n * import { Box } from \"@react-md/core\";\n * import type { ReactElement } from \"react\";\n *\n * export default function Example(): ReactElement {\n *   return (\n *     <Box grid>\n *       <div>Thing 1</div>\n *       <div>Thing 2</div>\n *       <div>Thing 3</div>\n *       <div>Thing 4</div>\n *       <div>Thing 5</div>\n *     </Box>\n *   ):\n * }\n * ```\n *\n * @example Custom Grid\n * ```scss\n * @use \"@react-md/core\" with (\n *   $box-grids: (\n *     small: (\n *       min: 5rem,\n *     ),\n *     medium: (\n *       min: 7rem,\n *       padding: 2rem,\n *       gap: 0.5rem,\n *     ),\n *   )\n * );\n *\n * ```\n *\n * ```tsx\n * import { Box } from \"@react-md/core\";\n * import type { ReactElement } from \"react\";\n *\n * export default function Example(): ReactElement {\n *   return (\n *     <Box grid gridName=\"medium\">\n *       <div>Thing 1</div>\n *       <div>Thing 2</div>\n *       <div>Thing 3</div>\n *       <div>Thing 4</div>\n *       <div>Thing 5</div>\n *     </Box>\n *   ):\n * }\n * ```\n *\n * @since 6.0.0\n */\nexport const Box = forwardRef<HTMLDivElement, BoxProps>(\n  function Box(props, ref) {\n    const {\n      className,\n      children,\n      align,\n      grid = false,\n      style: propStyle,\n      gridName = \"\",\n      justify,\n      stacked = false,\n      reversed = false,\n      gridColumns = \"fit\",\n      fullWidth = false,\n      disableWrap = false,\n      disablePadding = false,\n      ...remaining\n    } = props;\n\n    let style = propStyle;\n    if (typeof gridColumns === \"number\") {\n      style = {\n        ...propStyle,\n        \"--rmd-box-columns\": gridColumns,\n      };\n    }\n\n    return (\n      <div\n        {...remaining}\n        style={style}\n        ref={ref}\n        className={box({\n          className,\n          fullWidth,\n          grid,\n          stacked,\n          gridName,\n          gridColumns,\n          align,\n          justify,\n          reversed,\n          disableWrap,\n          disablePadding,\n        })}\n      >\n        {children}\n      </div>\n    );\n  }\n);\n"],"names":["forwardRef","box","Box","props","ref","className","children","align","grid","style","propStyle","gridName","justify","stacked","reversed","gridColumns","fullWidth","disableWrap","disablePadding","remaining","div"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";AAAA,SAASA,UAAU,QAA6B,QAAQ;AACxD,SAASC,GAAG,QAAyB,cAAc;AAOnD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAmGC,GACD,OAAO,MAAMC,oBAAMF,WACjB,SAASE,IAAIC,KAAK,EAAEC,GAAG;IACrB,MAAM,EACJC,SAAS,EACTC,QAAQ,EACRC,KAAK,EACLC,OAAO,KAAK,EACZC,OAAOC,SAAS,EAChBC,WAAW,EAAE,EACbC,OAAO,EACPC,UAAU,KAAK,EACfC,WAAW,KAAK,EAChBC,cAAc,KAAK,EACnBC,YAAY,KAAK,EACjBC,cAAc,KAAK,EACnBC,iBAAiB,KAAK,EACtB,GAAGC,WACJ,GAAGhB;IAEJ,IAAIM,QAAQC;IACZ,IAAI,OAAOK,gBAAgB,UAAU;QACnCN,QAAQ;YACN,GAAGC,SAAS;YACZ,qBAAqBK;QACvB;IACF;IAEA,qBACE,KAACK;QACE,GAAGD,SAAS;QACbV,OAAOA;QACPL,KAAKA;QACLC,WAAWJ,IAAI;YACbI;YACAW;YACAR;YACAK;YACAF;YACAI;YACAR;YACAK;YACAE;YACAG;YACAC;QACF;kBAECZ;;AAGP,GACA"}

package/dist/box/_box.scss

@@ -56,7 +56,7 @@ $variables: (gap, padding, item-min-size, columns);
 
 @mixin custom-grid($min: null, $padding: null, $gap: null) {
   @if $min {
-    @include set-var(min-size, $min);
+    @include set-var(item-min-size, $min);
   }
 
   @if $padding {

package/dist/box/styles.d.ts

@@ -7,19 +7,19 @@ declare module "react" {
     }
 }
 /**
- * @remarks \@since 6.0.0
+ * @since 6.0.0
  */
 export type BoxAlignItems = "start" | "flex-start" | "center" | "end" | "flex-end" | "stretch";
 /**
- * @remarks \@since 6.0.0
+ * @since 6.0.0
  */
 export type BoxJustifyContent = BoxAlignItems | "space-around" | "space-between" | "space-evenly";
 /**
- * @remarks \@since 6.0.0
+ * @since 6.0.0
  */
 export type BoxFlexDirection = "row" | "column";
 /**
- * @remarks \@since 6.0.0
+ * @since 6.0.0
  */
 export interface BoxOptions {
     className?: string;
@@ -49,12 +49,11 @@ export interface BoxOptions {
      */
     disablePadding?: boolean;
     /**
-     * This is a grid configuration
-     * This should match one of the names in the `$grids` map. So for example:
+     * This should match one of the names in the `$box-grids` map. So for example:
      *
      * ```scss
      * @use "react-md" with (
-     *   $grids: (
+     *   $box-grids: (
      *     small: (
      *       min: 5rem
      *     ),
@@ -81,7 +80,8 @@ export interface BoxOptions {
      */
     align?: BoxAlignItems;
     /**
-     * The default value is really `center` or whatever the `$default-align-items` is set to.
+     * The default value is really `center` or whatever the
+     * `$box-default-align-items` is set to.
      *
      * @defaultValue `""`
      */
@@ -103,6 +103,6 @@ export interface BoxOptions {
     reversed?: boolean;
 }
 /**
- * @remarks \@since 6.0.0
+ * @since 6.0.0
  */
 export declare function box(options?: BoxOptions): string;