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

package/dist/avatar/_avatar.scss

@@ -6,22 +6,70 @@
 @use "../typography/typography";
 @use "../icon/icon";
 
+// Set to `true` to disable all the styles
+// @type boolean
 $disable-everything: false !default;
+
+// Set to `true` to disable updating the icon color within avatars to inherit
+// the current color by default.
+// @type boolean
 $disable-icon: false !default;
+
+// Set to `true` to disable allowing the avatar to be sized as an icon.
+// @type boolean
 $disable-icon-size: false !default;
+
+// Set to `true` to disable the img styling when `src` or `imgProps` are
+// provided to the avatar.
+// @type boolean
 $disable-image: false !default;
+
+// Set to `true` to disable automatically updating all `img` elements that
+// appear in an avatar to be responsive.
+// @type boolean
 $disable-auto-image: false !default;
 
+// The default text color
+// @type Color
 $color: colors.$grey-100 !default;
+
+// The default background color
+// @type Color
 $background-color: colors.$grey-700 !default;
+
+// The default line height
+// @type number
 $line-height: map.get(typography.$subtitle-1-styles, line-height) !default;
+
+// The default border color
+// @type Color
 $border-color: transparent !default;
+
+// The default border radius. If you want to make avatars be more square-like,
+// set this to something like 0.25rem.
+//
+// @type number
 $border-radius: 50% !default;
+
+// The default height and width
+// @type number
 $size: 2.5rem !default;
+
+// The default font size
+// @type number
 $font-size: 1.5rem !default;
+
+// The default height and width when sized as an icon
+// @type number
 $icon-sized-size: icon.get-var(size) !default;
+
+// The default font size when sized as an avatar
+// @type number
 $icon-sized-font-size: 0.75rem !default;
 
+// Some reasonable defaults for the avatar colors that ensure contrast ratios
+// are accessible between the background and foreground.
+// @type Map
 $default-colors: (
   red: colors.$red-a-700 colors.$red-50,
   pink: colors.$pink-600 colors.$white,
@@ -44,8 +92,26 @@ $default-colors: (
   blue-grey: colors.$blue-grey-700 colors.$blue-grey-50,
 );
 
-$colors: $default-colors !default;
-
+// Any custom colors to create. Each key is the class name suffix for the avatar
+// and each value should be an ordered list of: `background-color color`.
+//
+// This will automatically be merged with the {@link default-colors} so you can
+// set any value to `null` to remove it or provide the same key with different
+// values to override.
+//
+// @type Map
+$custom-colors: () !default;
+
+// The default colors that can be created for an avatar. This can be set to an
+// empty Map to create no color styles, a completely custom map, or merge with
+// the existing.
+//
+// @type Map
+$colors: map.merge($default-colors, $custom-colors) !default;
+
+// The available configurable css variables and mostly used internally for the
+// `get-var`, `set-var`, and `use-var` utils.
+// @type List
 $variables: (
   background-color,
   color,
@@ -55,6 +121,9 @@ $variables: (
   font-size
 );
 
+// @param {string} name - The supported variable name
+// @param {any} fallback - An optional fallback value
+// @returns {string} a `var()` statement
 @function get-var($name, $fallback: null) {
   $var: utils.get-var-name($variables, $name, "avatar");
   @if $fallback {
@@ -64,16 +133,32 @@ $variables: (
   @return var(#{$var});
 }
 
+// @param {string} name - The supported variable name
+// @param {any} value - The value to set the variable to. Supports `null` which
+// will just be a no-op.
 @mixin set-var($name, $value) {
   @if $value {
     #{utils.get-var-name($variables, $name, "avatar")}: #{$value};
   }
 }
 
+// @param {string} property - The css property to apply the variable to
+// @param {string} name - The supported variable name
+// @param {any} fallback - An optional fallback value if the variable has not
+// been set
 @mixin use-var($property, $name: $property, $fallback: null) {
   #{$property}: get-var($name, $fallback);
 }
 
+// NOTE: You will need to enforce an acceptable color contrast yourself between
+// the background and foreground colors.
+//
+// @param {string} name - This will be used for the class name when
+// `$disable-prefix` is set to true, otherwise as `.rmd-avatar--${name}`.
+// @param {Color} color - The text color to use.
+// @param {Color} background-color - The background color to use
+// @param {boolean} disable-prefix - Set to `true` to disable the
+// `.rmd-avatar--` prefix for the class name
 @mixin custom-color($name, $color, $background-color, $disable-prefix: false) {
   $class-name: if($disable-prefix, $name, ".rmd-avatar--#{$name}");
 
@@ -83,6 +168,7 @@ $variables: (
   }
 }
 
+// Conditionally applies the css variables based on feature flags
 @mixin variables {
   @if not $disable-everything {
     @include set-var(background-color, $background-color);
@@ -94,6 +180,11 @@ $variables: (
   }
 }
 
+// Generates all the styles for the `Autocomplete` components based on feature
+// flags.
+//
+// @param {boolean} disable-layer - Set this to `true` to disable the
+// layer behavior
 @mixin styles($disable-layer: false) {
   @if not $disable-everything {
     @include utils.optional-layer(avatar, $disable-layer) {

package/dist/badge/Badge.d.ts

@@ -1,24 +1,5 @@
 import { type HTMLAttributes, type ReactNode } from "react";
-import { type BackgroundColor } from "../cssUtils.js";
-declare module "react" {
-    interface CSSProperties {
-        "--rmd-badge-size"?: string | number;
-        "--rmd-badge-offset"?: string | number;
-        "--rmd-badge-offset-top"?: string | number;
-        "--rmd-badge-offset-right"?: string | number;
-    }
-}
-/**
- * @since 6.0.0 Renamed `"default"` to `"greyscale"` and added all
- * theme colors.
- */
-export type BadgeTheme = BackgroundColor | "greyscale" | "clear";
-export interface BadgeClassNameOptions {
-    className?: string;
-    /** @defaultValue `""greyscale` */
-    theme?: BadgeTheme;
-}
-export declare function badge(options?: BadgeClassNameOptions): string;
+import { type BadgeTheme } from "./styles.js";
 export interface BadgeProps extends HTMLAttributes<HTMLSpanElement> {
     /** @defaultValue `"greyscale"` */
     theme?: BadgeTheme;

package/dist/badge/Badge.js

@@ -1,19 +1,6 @@
 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-badge");
-export function badge(options = {}) {
-    const { className, theme = "greyscale" } = options;
-    const greyscale = theme === "greyscale";
-    const clear = theme === "clear";
-    return cnb(styles({
-        greyscale
-    }), cssUtils({
-        backgroundColor: !clear && !greyscale ? theme : undefined
-    }), className);
-}
+import { badge } from "./styles.js";
 /**
  * @example Simple Example
  * ```tsx

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 * @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 * @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"],"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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAoCC,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 { forwardRef, type HTMLAttributes, type ReactNode } from \"react\";\nimport { badge, type BadgeTheme } from \"./styles.js\";\n\nexport interface BadgeProps extends HTMLAttributes<HTMLSpanElement> {\n  /** @defaultValue `\"greyscale\"` */\n  theme?: BadgeTheme;\n\n  children: ReactNode;\n}\n\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":["forwardRef","badge","Badge","props","ref","children","className","theme","remaining","span"],"mappings":";AAAA,SAASA,UAAU,QAA6C,QAAQ;AACxE,SAASC,KAAK,QAAyB,cAAc;AASrD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAoCC,GACD,OAAO,MAAMC,sBAAQF,WACnB,SAASE,MAAMC,KAAK,EAAEC,GAAG;IACvB,MAAM,EAAEC,QAAQ,EAAEC,SAAS,EAAEC,KAAK,EAAE,GAAGC,WAAW,GAAGL;IACrD,qBACE,KAACM;QAAM,GAAGD,SAAS;QAAEJ,KAAKA;QAAKE,WAAWL,MAAM;YAAEM;YAAOD;QAAU;kBAChED;;AAGP,GACA"}

package/dist/badge/_badge.scss

@@ -5,17 +5,61 @@
 @use "../theme/theme";
 @use "../typography/typography";
 
+// Set to `true` to disable all the styles
+// @type boolean
 $disable-everything: false !default;
+
+// Set to `true` to disable the styles for the greyscale theme only
+// @type boolean
 $disable-greyscale-theme: false !default;
+
+// Set to `true` to disable the styles for the primary theme only
+// @type boolean
 $disable-primary-theme: false !default;
+
+// Set to `true` to disable the styles for the secondary theme only
+// @type boolean
 $disable-secondary-theme: false !default;
 
+// The default height and width
+// @type number
 $size: 1.5rem !default;
+
+// The default font size which is merged into the {@link $typography} map.
+// @type number
 $font-size: 0.625rem !default;
+
+// The default `top` and `right` offset applied to badges that are positioned
+// absolutely in a relative container.
+//
+// The styles are setup like:
+//
+// ```scss
+// top: var(--rmd-badge-offset-top, var(--rmd-badge-offset))
+// right: var(--rmd-badge-offset-right, var(--rmd-badge-offset))
+// ```
+//
+// @type number
 $offset: 0 !default;
+
+// An optional `top` offset override. When this is `null` or equal to the
+// {@link offset}, it will not be set and fallback to the {@link offset}
+// instead.
+// @type number
 $offset-top: $offset !default;
+
+// An optional `right` offset override. When this is `null` or equal to the
+// {@link offset}, it will not be set and fallback to the {@link offset}
+// instead.
+// @type number
 $offset-right: $offset !default;
+
+// The default border radius
+// @type number
 $border-radius: 50% !default;
+
+// The default typography to use
+// @type Map
 $typography: map.merge(
   map.remove(typography.$body-1-styles, line-height, font-size),
   (
@@ -23,23 +67,44 @@ $typography: map.merge(
   )
 ) !default;
 
+// The background color for the greyscale theme when using the global light
+// theme
+// @type Color
 $light-theme-greyscale-background-color: #ccc !default;
+
+// The text color for the greyscale theme when using the global light theme
+// @type Color
 $light-theme-greyscale-color: a11y.contrast-color(
   $light-theme-greyscale-background-color
 ) !default;
+
+// The background color for the greyscale theme when using the global dark theme
+// @type Color
 $dark-theme-greyscale-background-color: colors.$grey-700 !default;
+
+// The text color for the greyscale theme when using the global dark theme
+// @type Color
 $dark-theme-greyscale-color: a11y.contrast-color(
   $dark-theme-greyscale-background-color
 ) !default;
+
+// The default greyscale background color
+// @type Color
 $greyscale-background-color: theme.get-default-color(
   $light-theme-greyscale-background-color,
   $dark-theme-greyscale-background-color
 ) !default;
+
+// The default greyscale text color
+// @type Color
 $greyscale-color: theme.get-default-color(
   $light-theme-greyscale-color,
   $dark-theme-greyscale-color
 ) !default;
 
+// The available configurable css variables and mostly used internally for the
+// `get-var`, `set-var`, and `use-var` utils.
+// @type List
 $variables: (
   greyscale-background-color,
   greyscale-color,
@@ -49,6 +114,9 @@ $variables: (
   offset-right
 );
 
+// @param {string} name - The supported variable name
+// @param {any} fallback - An optional fallback value
+// @returns {string} a `var()` statement
 @function get-var($name, $fallback: null) {
   $var: utils.get-var-name($variables, $name, "badge");
   @if $fallback {
@@ -58,16 +126,24 @@ $variables: (
   @return var(#{$var});
 }
 
+// @param {string} name - The supported variable name
+// @param {any} value - The value to set the variable to. Supports `null` which
+// will just be a no-op.
 @mixin set-var($name, $value) {
   @if $value {
     #{utils.get-var-name($variables, $name, "badge")}: #{$value};
   }
 }
 
+// @param {string} property - The css property to apply the variable to
+// @param {string} name - The supported variable name
+// @param {any} fallback - An optional fallback value if the variable has not
+// been set
 @mixin use-var($property, $name: $property, $fallback: null) {
   #{$property}: get-var($name, $fallback);
 }
 
+// Applies the light the variables based on feature flags
 @mixin use-light-theme {
   @if not $disable-everything {
     @if $light-theme-greyscale-background-color !=
@@ -84,6 +160,7 @@ $variables: (
   }
 }
 
+// Applies the dark the variables based on feature flags
 @mixin use-dark-theme {
   @if not $disable-everything {
     @if $light-theme-greyscale-background-color !=
@@ -101,21 +178,26 @@ $variables: (
   }
 }
 
+// Conditionally applies the css variables based on feature flags
 @mixin variables {
   @if not $disable-everything {
     @include set-var(greyscale-background-color, $greyscale-background-color);
     @include set-var(greyscale-color, $greyscale-color);
     @include set-var(size, $size);
     @include set-var(offset, $offset);
-    @if $offset != $offset-top {
+    @if $offset != $offset-top and $offset-top {
       @include set-var(offset-top, $offset-top);
     }
-    @if $offset != $offset-right {
+    @if $offset != $offset-right and $offset-right {
       @include set-var(offset-right, $offset-right);
     }
   }
 }
 
+// Generates all the styles based on feature flags.
+//
+// @param {boolean} disable-layer - Set this to `true` to disable the
+// layer behavior
 @mixin styles($disable-layer: false) {
   @if not $disable-everything {
     @include utils.optional-layer(badge, $disable-layer) {
@@ -123,7 +205,6 @@ $variables: (
         @include utils.map-to-styles($typography);
         @include use-var(height, size);
         @include use-var(width, size);
-        @include utils.auto-rtl(right, get-var(offset-right, get-var(offset)));
         @include use-var(top, offset-top, get-var(offset));
 
         align-items: center;
@@ -132,6 +213,7 @@ $variables: (
         justify-content: center;
         pointer-events: none; // badges are _kind_ of presentational and shouldn't trigger mouse events
         position: absolute;
+        right: get-var(offset-right, get-var(offset));
 
         @if not $disable-greyscale-theme {
           &--greyscale {
@@ -139,6 +221,11 @@ $variables: (
             @include use-var(color, greyscale-color);
           }
         }
+
+        @include utils.rtl {
+          left: get-var(offset-right, get-var(offset));
+          right: auto;
+        }
       }
     }
   }

package/dist/badge/styles.d.ts

@@ -0,0 +1,26 @@
+import { type BackgroundColor } from "../cssUtils.js";
+declare module "react" {
+    interface CSSProperties {
+        "--rmd-badge-size"?: string | number;
+        "--rmd-badge-offset"?: string | number;
+        "--rmd-badge-offset-top"?: string | number;
+        "--rmd-badge-offset-right"?: string | number;
+    }
+}
+/**
+ * @since 6.0.0 Renamed `"default"` to `"greyscale"` and added all
+ * theme colors.
+ */
+export type BadgeTheme = BackgroundColor | "greyscale" | "clear";
+/**
+ * @since 6.0.0
+ */
+export interface BadgeClassNameOptions {
+    className?: string;
+    /** @defaultValue `""greyscale` */
+    theme?: BadgeTheme;
+}
+/**
+ * @since 6.0.0
+ */
+export declare function badge(options?: BadgeClassNameOptions): string;

package/dist/badge/styles.js

@@ -0,0 +1,18 @@
+import { cnb } from "cnbuilder";
+import { cssUtils } from "../cssUtils.js";
+import { bem } from "../utils/bem.js";
+const styles = bem("rmd-badge");
+/**
+ * @since 6.0.0
+ */ export function badge(options = {}) {
+    const { className, theme = "greyscale" } = options;
+    const greyscale = theme === "greyscale";
+    const clear = theme === "clear";
+    return cnb(styles({
+        greyscale
+    }), cssUtils({
+        backgroundColor: !clear && !greyscale ? theme : undefined
+    }), className);
+}
+
+//# sourceMappingURL=styles.js.map

package/dist/badge/styles.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/badge/styles.ts"],"sourcesContent":["import { cnb } from \"cnbuilder\";\nimport { type BackgroundColor, cssUtils } 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\n/**\n * @since 6.0.0\n */\nexport interface BadgeClassNameOptions {\n  className?: string;\n\n  /** @defaultValue `\"\"greyscale` */\n  theme?: BadgeTheme;\n}\n\n/**\n * @since 6.0.0\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"],"names":["cnb","cssUtils","bem","styles","badge","options","className","theme","greyscale","clear","backgroundColor","undefined"],"mappings":"AAAA,SAASA,GAAG,QAAQ,YAAY;AAChC,SAA+BC,QAAQ,QAAQ,iBAAiB;AAChE,SAASC,GAAG,QAAQ,kBAAkB;AAWtC,MAAMC,SAASD,IAAI;AAkBnB;;CAEC,GACD,OAAO,SAASE,MAAMC,UAAiC,CAAC,CAAC;IACvD,MAAM,EAAEC,SAAS,EAAEC,QAAQ,WAAW,EAAE,GAAGF;IAC3C,MAAMG,YAAYD,UAAU;IAC5B,MAAME,QAAQF,UAAU;IAExB,OAAOP,IACLG,OAAO;QAAEK;IAAU,IACnBP,SAAS;QAAES,iBAAiB,CAACD,SAAS,CAACD,YAAYD,QAAQI;IAAU,IACrEL;AAEJ"}

package/dist/box/Box.js

@@ -99,7 +99,7 @@ import { box } from "./styles.js";
  *
  * @since 6.0.0
  */ export const Box = /*#__PURE__*/ forwardRef(function Box(props, ref) {
-    const { className, children, align, grid = false, style: propStyle, gridName = "", justify, stacked = false, reversed = false, gridColumns = "fit", fullWidth = false, disableWrap = false, disablePadding = false, ...remaining } = props;
+    const { style: propStyle, className, children, align, grid, gridName, justify, stacked, reversed, gridColumns, fullWidth, disableGap, disableWrap, disablePadding, ...remaining } = props;
     let style = propStyle;
     if (typeof gridColumns === "number") {
         style = {
@@ -121,6 +121,7 @@ import { box } from "./styles.js";
             align,
             justify,
             reversed,
+            disableGap,
             disableWrap,
             disablePadding
         }),

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 * @since 6.0.0\n */\nexport interface BoxProps extends HTMLAttributes<HTMLDivElement>, BoxOptions {}\n\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"],"mappings":";AAAA,SAASA,UAAU,QAA6B,QAAQ;AACxD,SAASC,GAAG,QAAyB,cAAc;AAOnD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAiGC,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"}
+{"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 * 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      style: propStyle,\n      className,\n      children,\n      align,\n      grid,\n      gridName,\n      justify,\n      stacked,\n      reversed,\n      gridColumns,\n      fullWidth,\n      disableGap,\n      disableWrap,\n      disablePadding,\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          disableGap,\n          disableWrap,\n          disablePadding,\n        })}\n      >\n        {children}\n      </div>\n    );\n  }\n);\n"],"names":["forwardRef","box","Box","props","ref","style","propStyle","className","children","align","grid","gridName","justify","stacked","reversed","gridColumns","fullWidth","disableGap","disableWrap","disablePadding","remaining","div"],"mappings":";AAAA,SAASA,UAAU,QAA6B,QAAQ;AACxD,SAASC,GAAG,QAAyB,cAAc;AAOnD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAiGC,GACD,OAAO,MAAMC,oBAAMF,WACjB,SAASE,IAAIC,KAAK,EAAEC,GAAG;IACrB,MAAM,EACJC,OAAOC,SAAS,EAChBC,SAAS,EACTC,QAAQ,EACRC,KAAK,EACLC,IAAI,EACJC,QAAQ,EACRC,OAAO,EACPC,OAAO,EACPC,QAAQ,EACRC,WAAW,EACXC,SAAS,EACTC,UAAU,EACVC,WAAW,EACXC,cAAc,EACd,GAAGC,WACJ,GAAGjB;IAEJ,IAAIE,QAAQC;IACZ,IAAI,OAAOS,gBAAgB,UAAU;QACnCV,QAAQ;YACN,GAAGC,SAAS;YACZ,qBAAqBS;QACvB;IACF;IAEA,qBACE,KAACM;QACE,GAAGD,SAAS;QACbf,OAAOA;QACPD,KAAKA;QACLG,WAAWN,IAAI;YACbM;YACAS;YACAN;YACAG;YACAF;YACAI;YACAN;YACAG;YACAE;YACAG;YACAC;YACAC;QACF;kBAECX;;AAGP,GACA"}