@mond-design-system/react 4.4.0 → 4.5.0

package/dist/index.d.cts

@@ -530,6 +530,11 @@ interface SkeletonProps extends HTMLAttributes<HTMLSpanElement> {
     /** Any CSS length. Text defaults to full width, one line tall. */
     width?: string;
     height?: string;
+    /** How many lines of text to stand in for. Above one, the last is cut short
+        — a paragraph ends mid-line, and a block of full-width bars reads as a
+        table. Text only: a rect or a circle is one shape however many lines of
+        copy it replaces. */
+    lines?: number;
     ref?: Ref<HTMLSpanElement>;
 }
 /**
@@ -542,6 +547,7 @@ interface SkeletonProps extends HTMLAttributes<HTMLSpanElement> {
  *     <Stack gap="tight">
  *       <Skeleton width="40%" />
  *       <Skeleton />
+ *       <Skeleton lines={3} />
  *       <Skeleton variant="rect" height="8rem" />
  *     </Stack>
  *   ) : (
@@ -550,7 +556,7 @@ interface SkeletonProps extends HTMLAttributes<HTMLSpanElement> {
  * </div>
  * ```
  */
-declare function Skeleton({ variant, width, height, className, style, ...rest }: SkeletonProps): ReactElement;
+declare function Skeleton({ variant, width, height, lines, className, style, ...rest }: SkeletonProps): ReactElement;
 
 interface ProgressBarProps extends HTMLAttributes<HTMLDivElement> {
     /** 0–100; clamped. Ignored when indeterminate. */

package/dist/index.d.ts

@@ -530,6 +530,11 @@ interface SkeletonProps extends HTMLAttributes<HTMLSpanElement> {
     /** Any CSS length. Text defaults to full width, one line tall. */
     width?: string;
     height?: string;
+    /** How many lines of text to stand in for. Above one, the last is cut short
+        — a paragraph ends mid-line, and a block of full-width bars reads as a
+        table. Text only: a rect or a circle is one shape however many lines of
+        copy it replaces. */
+    lines?: number;
     ref?: Ref<HTMLSpanElement>;
 }
 /**
@@ -542,6 +547,7 @@ interface SkeletonProps extends HTMLAttributes<HTMLSpanElement> {
  *     <Stack gap="tight">
  *       <Skeleton width="40%" />
  *       <Skeleton />
+ *       <Skeleton lines={3} />
  *       <Skeleton variant="rect" height="8rem" />
  *     </Stack>
  *   ) : (
@@ -550,7 +556,7 @@ interface SkeletonProps extends HTMLAttributes<HTMLSpanElement> {
  * </div>
  * ```
  */
-declare function Skeleton({ variant, width, height, className, style, ...rest }: SkeletonProps): ReactElement;
+declare function Skeleton({ variant, width, height, lines, className, style, ...rest }: SkeletonProps): ReactElement;
 
 interface ProgressBarProps extends HTMLAttributes<HTMLDivElement> {
     /** 0–100; clamped. Ignored when indeterminate. */

package/dist/index.js

@@ -1024,11 +1024,13 @@ function VisuallyHidden({ as = "span", className, ...rest }) {
 }
 
 // mds-cssmod:/home/runner/work/mond-design-system/mond-design-system/packages/react/src/components/Skeleton/Skeleton.module.css?mds-scoped
-var Skeleton_module_default = { "skeleton": "mds-Skeleton__skeleton", "pulse": "mds-Skeleton__pulse", "variant-text": "mds-Skeleton__variant-text", "variant-rect": "mds-Skeleton__variant-rect", "variant-circle": "mds-Skeleton__variant-circle" };
+var Skeleton_module_default = { "skeleton": "mds-Skeleton__skeleton", "pulse": "mds-Skeleton__pulse", "lines": "mds-Skeleton__lines", "variant-text": "mds-Skeleton__variant-text", "variant-rect": "mds-Skeleton__variant-rect", "variant-circle": "mds-Skeleton__variant-circle" };
+var LAST_LINE = "62%";
 function Skeleton({
   variant = "text",
   width,
   height,
+  lines = 1,
   className,
   style,
   ...rest
@@ -1037,15 +1039,18 @@ function Skeleton({
     ...width ? { "--skeleton-w": width } : {},
     ...height ? { "--skeleton-h": height } : {}
   };
-  return /* @__PURE__ */ jsx(
-    "span",
-    {
-      "aria-hidden": "true",
-      className: cx(Skeleton_module_default.skeleton, Skeleton_module_default[`variant-${variant}`], className),
-      style: { ...vars, ...style },
-      ...rest
-    }
-  );
+  const box = cx(Skeleton_module_default.skeleton, Skeleton_module_default[`variant-${variant}`], className);
+  if (variant === "text" && lines > 1) {
+    return /* @__PURE__ */ jsx("span", { "aria-hidden": "true", className: Skeleton_module_default.lines, style, ...rest, children: Array.from({ length: lines }, (_, line) => /* @__PURE__ */ jsx(
+      "span",
+      {
+        className: box,
+        style: line === lines - 1 ? { ...vars, "--skeleton-w": LAST_LINE } : vars
+      },
+      line
+    )) });
+  }
+  return /* @__PURE__ */ jsx("span", { "aria-hidden": "true", className: box, style: { ...vars, ...style }, ...rest });
 }
 
 // mds-cssmod:/home/runner/work/mond-design-system/mond-design-system/packages/react/src/components/ProgressBar/ProgressBar.module.css?mds-scoped