@react-md/core 1.0.0-next.2 → 1.0.0-next.20

package/dist/transition/SlideContainer.js

@@ -5,7 +5,7 @@ import { bem } from "../utils/bem.js";
 const styles = bem("rmd-slide-container");
 /**
  * @see {@link useSlideTransition} for an example
- * @remarks \@since 6.0.0
+ * @since 6.0.0
  */ export function slideContainer(options) {
     const { className, direction } = options;
     return cnb(styles({
@@ -13,11 +13,10 @@ const styles = bem("rmd-slide-container");
     }), className);
 }
 /**
- * **Server Component**
- * This is a server component, but generally relies on state so probably a client component.
+ * The `SlideContainer` is used to enable a slide transition when child `Slide`
+ * components change.
  *
- * @example
- * Simple Example
+ * @example Simple Example
  * ```tsx
  * import { SlideContainer, Slide } from "@react-md/core";
  * import type { ReactElement, ReactNode } from "react";
@@ -60,54 +59,7 @@ const styles = bem("rmd-slide-container");
  * }
  * ```
  *
- * @example
- * Persistent Slides
- * ```tsx
- * import type { SlideDirection } from "@react-md/core";
- * import { SlideContainer, Slide } from "@react-md/core";
- * import type { ReactElement, ReactNode } from "react";
- * import { useState } from "react";
- *
- * interface State {
- *   direction: SlideDirection;
- *   activeIndex: number;
- * }
- *
- * function Example(): ReactElement {
- *   const [state, setState] = useState<State>({
- *     direction: "left",
- *     activeIndex: 0,
- *   });
- *   const { direction, activeIndex } = state;
- *
- *   // when changing a slide, `direction` should be set to "left" if the
- *   // previous `activeIndex` is less than the next index
- *   //
- *   // i.e.
- *   // setState((prevState) => ({
- *   //   direction: prevState.activeIndex < index ? "left" : "right",
- *   //   activeIndex: index,
- *   // }))
- *
- *   // enabling `persistent` makes it so that the `<Slide>` never unmounts so
- *   // that state can be maintained while it is not active.
- *   return (
- *     <SlideContainer direction={direction}>
- *       <Slide active={activeIndex === 0} persistent>
- *         Slide 1
- *       </Slide>
- *       <Slide active={activeIndex === 1} persistent>
- *         Slide 2
- *       </Slide>
- *       <Slide active={activeIndex === 2} persistent>
- *         Slide 3
- *       </Slide>
- *     </SlideContainer>
- *   );
- * }
- * ```
- *
- * @remarks \@since 6.0.0
+ * @since 6.0.0
  */ export const SlideContainer = /*#__PURE__*/ forwardRef(function SlideContainer(props, ref) {
     const { className, direction, children, ...remaining } = props;
     return /*#__PURE__*/ _jsx("div", {

package/dist/transition/SlideContainer.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/transition/SlideContainer.tsx"],"sourcesContent":["import { cnb } from \"cnbuilder\";\nimport { forwardRef, type HTMLAttributes } from \"react\";\nimport { bem } from \"../utils/bem.js\";\n\nconst styles = bem(\"rmd-slide-container\");\n\n/**\n * @example\n * Direction \"left\"\n * ```\n *           -------------\n *           |           |\n *           |  Slide 1  |  Slide 2\n *           |           |\n *           -------------\n *           -------------\n *           |           |\n *      Slide 1     Slide 2\n *           |           |\n *           -------------\n *           -------------\n *           |           |\n *  Slide 1  |  Slide 2  |\n *           |           |\n *           -------------\n * ```\n *\n * @example\n * Direction \"right\"\n * ```\n *           -------------\n *           |           |\n *  Slide 1  |  Slide 2  |\n *           |           |\n *           -------------\n *           -------------\n *           |           |\n *      Slide 1     Slide 2\n *           |           |\n *           -------------\n *           -------------\n *           |           |\n *           |  Slide 1  |  Slide 2\n *           |           |\n *           -------------\n * ```\n *\n * @remarks \\@since 6.0.0\n */\nexport type SlideDirection = \"left\" | \"right\";\n\n/** @remarks \\@since 6.0.0 */\nexport interface SlideContainerClassNameOptions {\n  className?: string;\n\n  /** @see {@link SlideDirection} */\n  direction: SlideDirection;\n}\n\n/**\n * @see {@link useSlideTransition} for an example\n * @remarks \\@since 6.0.0\n */\nexport function slideContainer(\n  options: SlideContainerClassNameOptions\n): string {\n  const { className, direction } = options;\n\n  return cnb(styles({ [direction]: true }), className);\n}\n\n/** @remarks \\@since 6.0.0 */\nexport interface SlideContainerProps\n  extends HTMLAttributes<HTMLDivElement>,\n    SlideContainerClassNameOptions {}\n\n/**\n * **Server Component**\n * This is a server component, but generally relies on state so probably a client component.\n *\n * @example\n * Simple Example\n * ```tsx\n * import { SlideContainer, Slide } from \"@react-md/core\";\n * import type { ReactElement, ReactNode } from \"react\";\n * import { useState } from \"react\";\n *\n * interface State {\n *   direction: SlideDirection;\n *   activeIndex: number;\n * }\n *\n * function Example(): ReactElement {\n *   const [state, setState] = useState<State>({\n *     direction: \"left\",\n *     activeIndex: 0,\n *   });\n *   const { direction, activeIndex } = state;\n *\n *   // when changing a slide, `direction` should be set to \"left\" if the\n *   // previous `activeIndex` is less than the next index\n *   //\n *   // i.e.\n *   // setState((prevState) => ({\n *   //   direction: prevState.activeIndex < index ? \"left\" : \"right\",\n *   //   activeIndex: index,\n *   // }))\n *\n *   return (\n *     <SlideContainer direction={direction}>\n *       <Slide active={activeIndex === 0}>\n *         Slide 1\n *       </Slide>\n *       <Slide active={activeIndex === 1}>\n *         Slide 2\n *       </Slide>\n *       <Slide active={activeIndex === 2}>\n *         Slide 3\n *       </Slide>\n *     </SlideContainer>\n *   );\n * }\n * ```\n *\n * @example\n * Persistent Slides\n * ```tsx\n * import type { SlideDirection } from \"@react-md/core\";\n * import { SlideContainer, Slide } from \"@react-md/core\";\n * import type { ReactElement, ReactNode } from \"react\";\n * import { useState } from \"react\";\n *\n * interface State {\n *   direction: SlideDirection;\n *   activeIndex: number;\n * }\n *\n * function Example(): ReactElement {\n *   const [state, setState] = useState<State>({\n *     direction: \"left\",\n *     activeIndex: 0,\n *   });\n *   const { direction, activeIndex } = state;\n *\n *   // when changing a slide, `direction` should be set to \"left\" if the\n *   // previous `activeIndex` is less than the next index\n *   //\n *   // i.e.\n *   // setState((prevState) => ({\n *   //   direction: prevState.activeIndex < index ? \"left\" : \"right\",\n *   //   activeIndex: index,\n *   // }))\n *\n *   // enabling `persistent` makes it so that the `<Slide>` never unmounts so\n *   // that state can be maintained while it is not active.\n *   return (\n *     <SlideContainer direction={direction}>\n *       <Slide active={activeIndex === 0} persistent>\n *         Slide 1\n *       </Slide>\n *       <Slide active={activeIndex === 1} persistent>\n *         Slide 2\n *       </Slide>\n *       <Slide active={activeIndex === 2} persistent>\n *         Slide 3\n *       </Slide>\n *     </SlideContainer>\n *   );\n * }\n * ```\n *\n * @remarks \\@since 6.0.0\n */\nexport const SlideContainer = forwardRef<HTMLDivElement, SlideContainerProps>(\n  function SlideContainer(props, ref) {\n    const { className, direction, children, ...remaining } = props;\n\n    return (\n      <div\n        {...remaining}\n        ref={ref}\n        className={slideContainer({ className, direction })}\n      >\n        {children}\n      </div>\n    );\n  }\n);\n"],"names":["cnb","forwardRef","bem","styles","slideContainer","options","className","direction","SlideContainer","props","ref","children","remaining","div"],"mappings":";AAAA,SAASA,GAAG,QAAQ,YAAY;AAChC,SAASC,UAAU,QAA6B,QAAQ;AACxD,SAASC,GAAG,QAAQ,kBAAkB;AAEtC,MAAMC,SAASD,IAAI;AAuDnB;;;CAGC,GACD,OAAO,SAASE,eACdC,OAAuC;IAEvC,MAAM,EAAEC,SAAS,EAAEC,SAAS,EAAE,GAAGF;IAEjC,OAAOL,IAAIG,OAAO;QAAE,CAACI,UAAU,EAAE;IAAK,IAAID;AAC5C;AAOA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAgGC,GACD,OAAO,MAAME,+BAAiBP,WAC5B,SAASO,eAAeC,KAAK,EAAEC,GAAG;IAChC,MAAM,EAAEJ,SAAS,EAAEC,SAAS,EAAEI,QAAQ,EAAE,GAAGC,WAAW,GAAGH;IAEzD,qBACE,KAACI;QACE,GAAGD,SAAS;QACbF,KAAKA;QACLJ,WAAWF,eAAe;YAAEE;YAAWC;QAAU;kBAEhDI;;AAGP,GACA"}
+{"version":3,"sources":["../../src/transition/SlideContainer.tsx"],"sourcesContent":["import { cnb } from \"cnbuilder\";\nimport { type HTMLAttributes, forwardRef } from \"react\";\n\nimport { bem } from \"../utils/bem.js\";\n\nconst styles = bem(\"rmd-slide-container\");\n\n/**\n * @example Direction \"left\"\n * ```\n *           -------------\n *           |           |\n *           |  Slide 1  |  Slide 2\n *           |           |\n *           -------------\n *           -------------\n *           |           |\n *      Slide 1     Slide 2\n *           |           |\n *           -------------\n *           -------------\n *           |           |\n *  Slide 1  |  Slide 2  |\n *           |           |\n *           -------------\n * ```\n *\n * @example Direction \"right\"\n * ```\n *           -------------\n *           |           |\n *  Slide 1  |  Slide 2  |\n *           |           |\n *           -------------\n *           -------------\n *           |           |\n *      Slide 1     Slide 2\n *           |           |\n *           -------------\n *           -------------\n *           |           |\n *           |  Slide 1  |  Slide 2\n *           |           |\n *           -------------\n * ```\n *\n * @since 6.0.0\n */\nexport type SlideDirection = \"left\" | \"right\";\n\n/** @since 6.0.0 */\nexport interface SlideContainerClassNameOptions {\n  className?: string;\n\n  /** @see {@link SlideDirection} */\n  direction: SlideDirection;\n}\n\n/**\n * @see {@link useSlideTransition} for an example\n * @since 6.0.0\n */\nexport function slideContainer(\n  options: SlideContainerClassNameOptions\n): string {\n  const { className, direction } = options;\n\n  return cnb(styles({ [direction]: true }), className);\n}\n\n/** @since 6.0.0 */\nexport interface SlideContainerProps\n  extends HTMLAttributes<HTMLDivElement>,\n    SlideContainerClassNameOptions {}\n\n/**\n * The `SlideContainer` is used to enable a slide transition when child `Slide`\n * components change.\n *\n * @example Simple Example\n * ```tsx\n * import { SlideContainer, Slide } from \"@react-md/core\";\n * import type { ReactElement, ReactNode } from \"react\";\n * import { useState } from \"react\";\n *\n * interface State {\n *   direction: SlideDirection;\n *   activeIndex: number;\n * }\n *\n * function Example(): ReactElement {\n *   const [state, setState] = useState<State>({\n *     direction: \"left\",\n *     activeIndex: 0,\n *   });\n *   const { direction, activeIndex } = state;\n *\n *   // when changing a slide, `direction` should be set to \"left\" if the\n *   // previous `activeIndex` is less than the next index\n *   //\n *   // i.e.\n *   // setState((prevState) => ({\n *   //   direction: prevState.activeIndex < index ? \"left\" : \"right\",\n *   //   activeIndex: index,\n *   // }))\n *\n *   return (\n *     <SlideContainer direction={direction}>\n *       <Slide active={activeIndex === 0}>\n *         Slide 1\n *       </Slide>\n *       <Slide active={activeIndex === 1}>\n *         Slide 2\n *       </Slide>\n *       <Slide active={activeIndex === 2}>\n *         Slide 3\n *       </Slide>\n *     </SlideContainer>\n *   );\n * }\n * ```\n *\n * @since 6.0.0\n */\nexport const SlideContainer = forwardRef<HTMLDivElement, SlideContainerProps>(\n  function SlideContainer(props, ref) {\n    const { className, direction, children, ...remaining } = props;\n\n    return (\n      <div\n        {...remaining}\n        ref={ref}\n        className={slideContainer({ className, direction })}\n      >\n        {children}\n      </div>\n    );\n  }\n);\n"],"names":["cnb","forwardRef","bem","styles","slideContainer","options","className","direction","SlideContainer","props","ref","children","remaining","div"],"mappings":";AAAA,SAASA,GAAG,QAAQ,YAAY;AAChC,SAA8BC,UAAU,QAAQ,QAAQ;AAExD,SAASC,GAAG,QAAQ,kBAAkB;AAEtC,MAAMC,SAASD,IAAI;AAqDnB;;;CAGC,GACD,OAAO,SAASE,eACdC,OAAuC;IAEvC,MAAM,EAAEC,SAAS,EAAEC,SAAS,EAAE,GAAGF;IAEjC,OAAOL,IAAIG,OAAO;QAAE,CAACI,UAAU,EAAE;IAAK,IAAID;AAC5C;AAOA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAgDC,GACD,OAAO,MAAME,+BAAiBP,WAC5B,SAASO,eAAeC,KAAK,EAAEC,GAAG;IAChC,MAAM,EAAEJ,SAAS,EAAEC,SAAS,EAAEI,QAAQ,EAAE,GAAGC,WAAW,GAAGH;IAEzD,qBACE,KAACI;QACE,GAAGD,SAAS;QACbF,KAAKA;QACLJ,WAAWF,eAAe;YAAEE;YAAWC;QAAU;kBAEhDI;;AAGP,GACA"}

package/dist/transition/_transition.scss

@@ -4,14 +4,14 @@
 @use "../theme/colors";
 @use "../theme/theme";
 
-$disable-everything: false !default;
-$disable-collapse-transition: $disable-everything !default;
-$disable-cross-fade-transition: $disable-everything !default;
-$disable-scale-transition: $disable-everything !default;
+$disable-transitions: false !default;
+$disable-collapse-transition: $disable-transitions !default;
+$disable-cross-fade-transition: $disable-transitions !default;
+$disable-scale-transition: $disable-transitions !default;
 $disable-scale-y-transition: $disable-scale-transition !default;
-$disable-skeleton-placeholder: $disable-everything !default;
-$disable-slide-transition: $disable-everything !default;
-$disable-max-width-transition: $disable-everything !default;
+$disable-skeleton-placeholder: $disable-transitions !default;
+$disable-slide-transition: $disable-transitions !default;
+$disable-max-width-transition: $disable-transitions !default;
 $disable-max-width-transition-gap: $disable-max-width-transition !default;
 
 $linear-duration: 0.15s !default;
@@ -32,11 +32,11 @@ $scale-y-transition-enter-duration: $enter-duration !default;
 $scale-y-transition-leave-duration: $leave-duration !default;
 
 $skeleton-placeholder-height: 1.125em !default;
+$skeleton-placeholder-width: 43% !default;
 $skeleton-placeholder-border-radius: 0.25rem !default;
 $skeleton-placeholder-light-background-color: #000 !default;
 $skeleton-placeholder-dark-background-color: colors.$grey-300 !default;
-$skeleton-placeholder-background-color: if(
-  theme.$color-scheme == system,
+$skeleton-placeholder-background-color: theme.get-default-color(
   $skeleton-placeholder-dark-background-color,
   $skeleton-placeholder-light-background-color
 ) !default;
@@ -217,6 +217,10 @@ $transition-variables: (
       $skeleton-placeholder-animation-timing-function infinite;
     border-radius: $skeleton-placeholder-border-radius;
     color: transparent;
+
+    // this was added so that at least _something_ renders on SSR. It would be
+    // nice to have SSR-safe random numbers for this.
+    width: $skeleton-placeholder-width;
   }
 
   @include keyframes(rmd-skeleton-placeholder) {
@@ -302,53 +306,66 @@ $transition-variables: (
   }
 }
 
-@mixin transition-styles {
-  @if not $disable-collapse-transition {
-    @include collapse-transition;
-  }
+@mixin transition-styles($disable-layer: false) {
+  @include utils.optional-layer(
+    transition,
+    $disable-layer or $disable-transitions
+  ) {
+    @if not $disable-collapse-transition {
+      @include collapse-transition;
+    }
 
-  @if not $disable-cross-fade-transition {
-    @include cross-fade-transition;
-  }
+    @if not $disable-cross-fade-transition {
+      @include cross-fade-transition;
+    }
 
-  @if not $disable-scale-transition or not $disable-scale-y-transition {
-    @include scale-transition;
-  }
+    @if not $disable-scale-transition or not $disable-scale-y-transition {
+      @include scale-transition;
+    }
 
-  @if not $disable-scale-y-transition {
-    @include scale-y-transition;
-  }
+    @if not $disable-scale-y-transition {
+      @include scale-y-transition;
+    }
 
-  @if not $disable-skeleton-placeholder {
-    @include skeleton-placeholder-animation;
-  }
+    @if not $disable-skeleton-placeholder {
+      @include skeleton-placeholder-animation;
+    }
 
-  @if not $disable-slide-transition {
-    @include slide-transition;
-  }
+    @if not $disable-slide-transition {
+      @include slide-transition;
+    }
 
-  @if not $disable-max-width-transition {
-    .rmd-max-width-transition {
-      @if not $disable-max-width-transition-gap {
-        @include utils.auto-rtl(
-          margin-right,
-          utils.negate-var(transition-get-var(max-width-gap)),
-          0
-        );
-      }
+    @if not $disable-max-width-transition {
+      .rmd-max-width-transition {
+        @if not $disable-max-width-transition-gap {
+          margin-right: utils.negate-var(transition-get-var(max-width-gap));
+        }
 
-      max-width: 0;
-      overflow: hidden;
-      transition: max-width
-        $max-width-transition-duration
-        $max-width-transition-timing-function;
-      will-change: max-width;
+        max-width: 0;
+        overflow: hidden;
+        transition: max-width
+          $max-width-transition-duration
+          $max-width-transition-timing-function;
+        will-change: max-width;
+
+        &--visible {
+          @include transition-use-var(max-width);
+
+          @if not $disable-max-width-transition-gap {
+            margin-right: 0;
+          }
+        }
 
-      &--visible {
         @if not $disable-max-width-transition-gap {
-          @include utils.auto-rtl(margin-right, 0);
+          @include utils.rtl {
+            margin-left: utils.negate-var(transition-get-var(max-width-gap));
+            margin-right: 0;
+
+            &--visible {
+              margin-left: 0;
+            }
+          }
         }
-        @include transition-use-var(max-width);
       }
     }
   }

package/dist/transition/collapseStyles.d.ts

@@ -1,5 +1,5 @@
 /**
- * @remarks \@since 6.0.0
+ * @since 6.0.0
  */
 export interface CollapseClassNameOptions {
     className?: string;
@@ -9,6 +9,6 @@ export interface CollapseClassNameOptions {
     disableOverflow?: boolean;
 }
 /**
- * @remarks \@since 6.0.0
+ * @since 6.0.0
  */
 export declare function collapse(options?: CollapseClassNameOptions): string;

package/dist/transition/collapseStyles.js

@@ -3,7 +3,7 @@ import { bem } from "../utils/bem.js";
 import { DISPLAY_NONE_CLASS } from "../utils/isElementVisible.js";
 const styles = bem("rmd-collapse");
 /**
- * @remarks \@since 6.0.0
+ * @since 6.0.0
  */ export function collapse(options = {}) {
     const { enter, leave, exited, disableOverflow, className } = options;
     return cnb(styles({

package/dist/transition/collapseStyles.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/transition/collapseStyles.ts"],"sourcesContent":["import { cnb } from \"cnbuilder\";\nimport { bem } from \"../utils/bem.js\";\nimport { DISPLAY_NONE_CLASS } from \"../utils/isElementVisible.js\";\n\nconst styles = bem(\"rmd-collapse\");\n\n/**\n * @remarks \\@since 6.0.0\n */\nexport interface CollapseClassNameOptions {\n  className?: string;\n  enter?: boolean;\n  leave?: boolean;\n  exited?: boolean;\n  disableOverflow?: boolean;\n}\n\n/**\n * @remarks \\@since 6.0.0\n */\nexport function collapse(options: CollapseClassNameOptions = {}): string {\n  const { enter, leave, exited, disableOverflow, className } = options;\n\n  return cnb(\n    styles({\n      enter,\n      leave,\n      \"no-overflow\": disableOverflow,\n    }),\n    exited && DISPLAY_NONE_CLASS,\n    className\n  );\n}\n"],"names":["cnb","bem","DISPLAY_NONE_CLASS","styles","collapse","options","enter","leave","exited","disableOverflow","className"],"mappings":"AAAA,SAASA,GAAG,QAAQ,YAAY;AAChC,SAASC,GAAG,QAAQ,kBAAkB;AACtC,SAASC,kBAAkB,QAAQ,+BAA+B;AAElE,MAAMC,SAASF,IAAI;AAanB;;CAEC,GACD,OAAO,SAASG,SAASC,UAAoC,CAAC,CAAC;IAC7D,MAAM,EAAEC,KAAK,EAAEC,KAAK,EAAEC,MAAM,EAAEC,eAAe,EAAEC,SAAS,EAAE,GAAGL;IAE7D,OAAOL,IACLG,OAAO;QACLG;QACAC;QACA,eAAeE;IACjB,IACAD,UAAUN,oBACVQ;AAEJ"}
+{"version":3,"sources":["../../src/transition/collapseStyles.ts"],"sourcesContent":["import { cnb } from \"cnbuilder\";\n\nimport { bem } from \"../utils/bem.js\";\nimport { DISPLAY_NONE_CLASS } from \"../utils/isElementVisible.js\";\n\nconst styles = bem(\"rmd-collapse\");\n\n/**\n * @since 6.0.0\n */\nexport interface CollapseClassNameOptions {\n  className?: string;\n  enter?: boolean;\n  leave?: boolean;\n  exited?: boolean;\n  disableOverflow?: boolean;\n}\n\n/**\n * @since 6.0.0\n */\nexport function collapse(options: CollapseClassNameOptions = {}): string {\n  const { enter, leave, exited, disableOverflow, className } = options;\n\n  return cnb(\n    styles({\n      enter,\n      leave,\n      \"no-overflow\": disableOverflow,\n    }),\n    exited && DISPLAY_NONE_CLASS,\n    className\n  );\n}\n"],"names":["cnb","bem","DISPLAY_NONE_CLASS","styles","collapse","options","enter","leave","exited","disableOverflow","className"],"mappings":"AAAA,SAASA,GAAG,QAAQ,YAAY;AAEhC,SAASC,GAAG,QAAQ,kBAAkB;AACtC,SAASC,kBAAkB,QAAQ,+BAA+B;AAElE,MAAMC,SAASF,IAAI;AAanB;;CAEC,GACD,OAAO,SAASG,SAASC,UAAoC,CAAC,CAAC;IAC7D,MAAM,EAAEC,KAAK,EAAEC,KAAK,EAAEC,MAAM,EAAEC,eAAe,EAAEC,SAAS,EAAE,GAAGL;IAE7D,OAAOL,IACLG,OAAO;QACLG;QACAC;QACA,eAAeE;IACjB,IACAD,UAAUN,oBACVQ;AAEJ"}

package/dist/transition/config.d.ts

@@ -1,5 +1,5 @@
 /**
- * @remarks \@since 6.0.0
+ * @since 6.0.0
  */
 export interface TransitionConfig {
     /**
@@ -9,7 +9,10 @@ export interface TransitionConfig {
      * simple and will automatically be set when using:
      *
      * ```ts
-     * import "@react-md/core/test-utils/jest-setup.js";
+     * import "@react-md/core/test-utils/jest-globals/setup";
+     *
+     * // or
+     * import "@react-md/core/test-utils/vitest/setup";
      * ```
      *
      * @defaultValue `false`
@@ -17,6 +20,6 @@ export interface TransitionConfig {
     disabled: boolean;
 }
 /**
- * @remarks \@since 6.0.0
+ * @since 6.0.0
  */
 export declare const TRANSITION_CONFIG: TransitionConfig;

package/dist/transition/config.js

@@ -1,9 +1,9 @@
 /**
- * @remarks \@since 6.0.0
+ * @since 6.0.0
  */ // NOTE: Uses get/set for test mocking
 let disabled = false;
 /**
- * @remarks \@since 6.0.0
+ * @since 6.0.0
  */ export const TRANSITION_CONFIG = {
     get disabled () {
         return disabled;

package/dist/transition/config.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/transition/config.ts"],"sourcesContent":["/**\n * @remarks \\@since 6.0.0\n */\nexport interface TransitionConfig {\n  /**\n   * Set this to `true` to disable all transitions from `react-md`.\n   *\n   * Note: It is recommended to set this to `true` in testing to keep things\n   * simple and will automatically be set when using:\n   *\n   * ```ts\n   * import \"@react-md/core/test-utils/jest-setup.js\";\n   * ```\n   *\n   * @defaultValue `false`\n   */\n  disabled: boolean;\n}\n\n// NOTE: Uses get/set for test mocking\n\nlet disabled = false;\n\n/**\n * @remarks \\@since 6.0.0\n */\nexport const TRANSITION_CONFIG: TransitionConfig = {\n  get disabled() {\n    return disabled;\n  },\n  set disabled(nextDisabled: boolean) {\n    disabled = nextDisabled;\n  },\n};\n"],"names":["disabled","TRANSITION_CONFIG","nextDisabled"],"mappings":"AAAA;;CAEC,GAiBD,sCAAsC;AAEtC,IAAIA,WAAW;AAEf;;CAEC,GACD,OAAO,MAAMC,oBAAsC;IACjD,IAAID,YAAW;QACb,OAAOA;IACT;IACA,IAAIA,UAASE,aAAuB;QAClCF,WAAWE;IACb;AACF,EAAE"}
+{"version":3,"sources":["../../src/transition/config.ts"],"sourcesContent":["/**\n * @since 6.0.0\n */\nexport interface TransitionConfig {\n  /**\n   * Set this to `true` to disable all transitions from `react-md`.\n   *\n   * Note: It is recommended to set this to `true` in testing to keep things\n   * simple and will automatically be set when using:\n   *\n   * ```ts\n   * import \"@react-md/core/test-utils/jest-globals/setup\";\n   *\n   * // or\n   * import \"@react-md/core/test-utils/vitest/setup\";\n   * ```\n   *\n   * @defaultValue `false`\n   */\n  disabled: boolean;\n}\n\n// NOTE: Uses get/set for test mocking\n\nlet disabled = false;\n\n/**\n * @since 6.0.0\n */\nexport const TRANSITION_CONFIG: TransitionConfig = {\n  get disabled() {\n    return disabled;\n  },\n  set disabled(nextDisabled: boolean) {\n    disabled = nextDisabled;\n  },\n};\n"],"names":["disabled","TRANSITION_CONFIG","nextDisabled"],"mappings":"AAAA;;CAEC,GAoBD,sCAAsC;AAEtC,IAAIA,WAAW;AAEf;;CAEC,GACD,OAAO,MAAMC,oBAAsC;IACjD,IAAID,YAAW;QACb,OAAOA;IACT;IACA,IAAIA,UAASE,aAAuB;QAClCF,WAAWE;IACb;AACF,EAAE"}

package/dist/transition/maxWidthTransition.d.ts

@@ -1,6 +1,12 @@
+/**
+ * @since 6.0.0
+ */
 export interface MaxWidthTransitionClassNameOptions {
     className?: string;
     disabled?: boolean;
     transitionIn: boolean;
 }
+/**
+ * @since 6.0.0
+ */
 export declare function maxWidthTransition(options: MaxWidthTransitionClassNameOptions): string;

package/dist/transition/maxWidthTransition.js

@@ -2,7 +2,9 @@ import { cnb } from "cnbuilder";
 import { bem } from "../utils/bem.js";
 import { DISPLAY_NONE_CLASS } from "../utils/isElementVisible.js";
 const styles = bem("rmd-max-width-transition");
-export function maxWidthTransition(options) {
+/**
+ * @since 6.0.0
+ */ export function maxWidthTransition(options) {
     const { disabled, className, transitionIn } = options;
     return cnb(!disabled && styles({
         visible: transitionIn

package/dist/transition/maxWidthTransition.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/transition/maxWidthTransition.ts"],"sourcesContent":["import { cnb } from \"cnbuilder\";\nimport { bem } from \"../utils/bem.js\";\nimport { DISPLAY_NONE_CLASS } from \"../utils/isElementVisible.js\";\n\nconst styles = bem(\"rmd-max-width-transition\");\n\nexport interface MaxWidthTransitionClassNameOptions {\n  className?: string;\n\n  disabled?: boolean;\n  transitionIn: boolean;\n}\n\nexport function maxWidthTransition(\n  options: MaxWidthTransitionClassNameOptions\n): string {\n  const { disabled, className, transitionIn } = options;\n\n  return cnb(\n    !disabled && styles({ visible: transitionIn }),\n    disabled && !transitionIn && DISPLAY_NONE_CLASS,\n    className\n  );\n}\n"],"names":["cnb","bem","DISPLAY_NONE_CLASS","styles","maxWidthTransition","options","disabled","className","transitionIn","visible"],"mappings":"AAAA,SAASA,GAAG,QAAQ,YAAY;AAChC,SAASC,GAAG,QAAQ,kBAAkB;AACtC,SAASC,kBAAkB,QAAQ,+BAA+B;AAElE,MAAMC,SAASF,IAAI;AASnB,OAAO,SAASG,mBACdC,OAA2C;IAE3C,MAAM,EAAEC,QAAQ,EAAEC,SAAS,EAAEC,YAAY,EAAE,GAAGH;IAE9C,OAAOL,IACL,CAACM,YAAYH,OAAO;QAAEM,SAASD;IAAa,IAC5CF,YAAY,CAACE,gBAAgBN,oBAC7BK;AAEJ"}
+{"version":3,"sources":["../../src/transition/maxWidthTransition.ts"],"sourcesContent":["import { cnb } from \"cnbuilder\";\n\nimport { bem } from \"../utils/bem.js\";\nimport { DISPLAY_NONE_CLASS } from \"../utils/isElementVisible.js\";\n\nconst styles = bem(\"rmd-max-width-transition\");\n\n/**\n * @since 6.0.0\n */\nexport interface MaxWidthTransitionClassNameOptions {\n  className?: string;\n\n  disabled?: boolean;\n  transitionIn: boolean;\n}\n\n/**\n * @since 6.0.0\n */\nexport function maxWidthTransition(\n  options: MaxWidthTransitionClassNameOptions\n): string {\n  const { disabled, className, transitionIn } = options;\n\n  return cnb(\n    !disabled && styles({ visible: transitionIn }),\n    disabled && !transitionIn && DISPLAY_NONE_CLASS,\n    className\n  );\n}\n"],"names":["cnb","bem","DISPLAY_NONE_CLASS","styles","maxWidthTransition","options","disabled","className","transitionIn","visible"],"mappings":"AAAA,SAASA,GAAG,QAAQ,YAAY;AAEhC,SAASC,GAAG,QAAQ,kBAAkB;AACtC,SAASC,kBAAkB,QAAQ,+BAA+B;AAElE,MAAMC,SAASF,IAAI;AAYnB;;CAEC,GACD,OAAO,SAASG,mBACdC,OAA2C;IAE3C,MAAM,EAAEC,QAAQ,EAAEC,SAAS,EAAEC,YAAY,EAAE,GAAGH;IAE9C,OAAOL,IACL,CAACM,YAAYH,OAAO;QAAEM,SAASD;IAAa,IAC5CF,YAAY,CAACE,gBAAgBN,oBAC7BK;AAEJ"}

package/dist/transition/skeletonPlaceholderUtils.d.ts

@@ -0,0 +1,77 @@
+import { type CSSProperties } from "react";
+/**
+ * @since 6.0.0
+ */
+export declare const skeletonPlaceholder: import("../utils/bem.js").BEMResult;
+/**
+ * @since 6.0.0
+ */
+export interface SkeletonPlaceholderRandomOptions {
+    /**
+     * The minimum `animation-delay` milliseconds allowed in the random generator.
+     * This value should be: `0 <= minDelay < maxDelay`.
+     *
+     * The `animation-delay` will be generated by:
+     * ```ts
+     * const delay = randomInt({
+     *   min: minDelay,
+     *   max: maxDelay,
+     * });
+     *
+     * return {
+     *   animationDelay: `-${delay}ms`,
+     * };
+     * ```
+     *
+     * @defaultValue `0`
+     */
+    minDelay?: number;
+    /**
+     * @see {@link minDelay}
+     * @defaultValue `400`
+     */
+    maxDelay?: number;
+    /**
+     * The minimum width percentage allowed in the random generator. This value
+     * should be: `0 >= minPercentage < maxPercentage`.
+     *
+     * The `width` will be generated by:
+     * ```ts
+     * const width = randomInt({
+     *   min: minPercentage,
+     *   max: maxPercentage,
+     * });
+     *
+     * return {
+     *   width: `${width}%`,
+     * };
+     * ```
+     * @defaultValue `40`
+     */
+    minPercentage?: number;
+    /**
+     * @see {@link minPercentage}
+     * @defaultValue `85`
+     */
+    maxPercentage?: number;
+}
+/**
+ * A server-only safe util to generate a random skeleton placeholder.
+ *
+ * @example
+ * ```tsx
+ * import { skeletonPlaceholder, randomSkeletonPlaceholder } from "@react-md/core";
+ * import "server-only";
+ *
+ * export function RandomSkeletonPlaceholder(): ReactElement {
+ *   return
+ *     <div
+ *       style={randomSkeletonPlaceholder()}
+ *       className={skeletonPlaceholder()}
+ *     />
+ *   );
+ * }
+ * ```
+ * @since 6.0.0
+ */
+export declare function randomSkeletonPlaceholder(options?: SkeletonPlaceholderRandomOptions): CSSProperties;

package/dist/transition/skeletonPlaceholderUtils.js

@@ -0,0 +1,38 @@
+import { bem } from "../utils/bem.js";
+import { randomInt } from "../utils/randomInt.js";
+/**
+ * @since 6.0.0
+ */ export const skeletonPlaceholder = bem("rmd-skeleton-placeholder");
+/**
+ * A server-only safe util to generate a random skeleton placeholder.
+ *
+ * @example
+ * ```tsx
+ * import { skeletonPlaceholder, randomSkeletonPlaceholder } from "@react-md/core";
+ * import "server-only";
+ *
+ * export function RandomSkeletonPlaceholder(): ReactElement {
+ *   return
+ *     <div
+ *       style={randomSkeletonPlaceholder()}
+ *       className={skeletonPlaceholder()}
+ *     />
+ *   );
+ * }
+ * ```
+ * @since 6.0.0
+ */ export function randomSkeletonPlaceholder(options = {}) {
+    const { minDelay = 0, maxDelay = 400, minPercentage = 40, maxPercentage = 85 } = options;
+    return {
+        animationDelay: `-${randomInt({
+            min: minDelay,
+            max: maxDelay
+        })}ms`,
+        width: `${randomInt({
+            min: minPercentage,
+            max: maxPercentage
+        })}%`
+    };
+}
+
+//# sourceMappingURL=skeletonPlaceholderUtils.js.map

package/dist/transition/skeletonPlaceholderUtils.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/transition/skeletonPlaceholderUtils.ts"],"sourcesContent":["import { type CSSProperties } from \"react\";\n\nimport { bem } from \"../utils/bem.js\";\nimport { randomInt } from \"../utils/randomInt.js\";\n\n/**\n * @since 6.0.0\n */\nexport const skeletonPlaceholder = bem(\"rmd-skeleton-placeholder\");\n\n/**\n * @since 6.0.0\n */\nexport interface SkeletonPlaceholderRandomOptions {\n  /**\n   * The minimum `animation-delay` milliseconds allowed in the random generator.\n   * This value should be: `0 <= minDelay < maxDelay`.\n   *\n   * The `animation-delay` will be generated by:\n   * ```ts\n   * const delay = randomInt({\n   *   min: minDelay,\n   *   max: maxDelay,\n   * });\n   *\n   * return {\n   *   animationDelay: `-${delay}ms`,\n   * };\n   * ```\n   *\n   * @defaultValue `0`\n   */\n  minDelay?: number;\n\n  /**\n   * @see {@link minDelay}\n   * @defaultValue `400`\n   */\n  maxDelay?: number;\n\n  /**\n   * The minimum width percentage allowed in the random generator. This value\n   * should be: `0 >= minPercentage < maxPercentage`.\n   *\n   * The `width` will be generated by:\n   * ```ts\n   * const width = randomInt({\n   *   min: minPercentage,\n   *   max: maxPercentage,\n   * });\n   *\n   * return {\n   *   width: `${width}%`,\n   * };\n   * ```\n   * @defaultValue `40`\n   */\n  minPercentage?: number;\n\n  /**\n   * @see {@link minPercentage}\n   * @defaultValue `85`\n   */\n  maxPercentage?: number;\n}\n\n/**\n * A server-only safe util to generate a random skeleton placeholder.\n *\n * @example\n * ```tsx\n * import { skeletonPlaceholder, randomSkeletonPlaceholder } from \"@react-md/core\";\n * import \"server-only\";\n *\n * export function RandomSkeletonPlaceholder(): ReactElement {\n *   return\n *     <div\n *       style={randomSkeletonPlaceholder()}\n *       className={skeletonPlaceholder()}\n *     />\n *   );\n * }\n * ```\n * @since 6.0.0\n */\nexport function randomSkeletonPlaceholder(\n  options: SkeletonPlaceholderRandomOptions = {}\n): CSSProperties {\n  const {\n    minDelay = 0,\n    maxDelay = 400,\n    minPercentage = 40,\n    maxPercentage = 85,\n  } = options;\n\n  return {\n    animationDelay: `-${randomInt({\n      min: minDelay,\n      max: maxDelay,\n    })}ms`,\n    width: `${randomInt({\n      min: minPercentage,\n      max: maxPercentage,\n    })}%`,\n  };\n}\n"],"names":["bem","randomInt","skeletonPlaceholder","randomSkeletonPlaceholder","options","minDelay","maxDelay","minPercentage","maxPercentage","animationDelay","min","max","width"],"mappings":"AAEA,SAASA,GAAG,QAAQ,kBAAkB;AACtC,SAASC,SAAS,QAAQ,wBAAwB;AAElD;;CAEC,GACD,OAAO,MAAMC,sBAAsBF,IAAI,4BAA4B;AA0DnE;;;;;;;;;;;;;;;;;;CAkBC,GACD,OAAO,SAASG,0BACdC,UAA4C,CAAC,CAAC;IAE9C,MAAM,EACJC,WAAW,CAAC,EACZC,WAAW,GAAG,EACdC,gBAAgB,EAAE,EAClBC,gBAAgB,EAAE,EACnB,GAAGJ;IAEJ,OAAO;QACLK,gBAAgB,CAAC,CAAC,EAAER,UAAU;YAC5BS,KAAKL;YACLM,KAAKL;QACP,GAAG,EAAE,CAAC;QACNM,OAAO,GAAGX,UAAU;YAClBS,KAAKH;YACLI,KAAKH;QACP,GAAG,CAAC,CAAC;IACP;AACF"}