@homebound/beam 2.175.2 → 2.176.0

package/dist/components/CssReset.js

@@ -54,6 +54,12 @@ const ourReset = (0, react_1.css) `
       transform: rotate(360deg);
     }
   }
+
+  @keyframes pulse {
+    50% {
+      opacity: 0.6;
+    }
+  }
 `;
 // Copy/pasted from TW which uses this as their base reset.
 const modernNormalizeReset = (0, react_1.css) `

package/dist/components/LoadingSkeleton.d.ts

@@ -0,0 +1,10 @@
+declare type Sizes = "sm" | "md" | "lg";
+export declare type LoadingSkeletonProps = {
+    rows?: number;
+    columns?: number;
+    size?: Sizes;
+    randomizeWidths?: boolean;
+    contrast?: boolean;
+};
+export declare function LoadingSkeleton({ rows, columns, size, randomizeWidths, contrast, }: LoadingSkeletonProps): import("@emotion/react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/LoadingSkeleton.js

@@ -0,0 +1,30 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.LoadingSkeleton = void 0;
+const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
+const Css_1 = require("../Css");
+function LoadingSkeleton({ rows = 1, columns = 1, size = "md", randomizeWidths = false, contrast = false, }) {
+    const cellArray = [...Array(columns)];
+    const rowArray = [...Array(rows)];
+    const rowHeight = sizeToPixels[size];
+    const rowCells = (rowNumber) => {
+        const flexGrowForCell = randomizeWidths ? getRandomizedFlexBasisByRowIndex(rowNumber) : 1;
+        return cellArray.map((_, i) => ((0, jsx_runtime_1.jsx)("div", { css: Css_1.Css.br4
+                .add("animation", "pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite")
+                .add("flexGrow", flexGrowForCell)
+                .bgGray300.if(contrast).bgGray700.$ }, `row-${rowNumber}-cell-${i}`)));
+    };
+    return ((0, jsx_runtime_1.jsx)("div", Object.assign({ "aria-label": "Loading" }, { children: rowArray.map((_, i) => ((0, jsx_runtime_1.jsx)("div", Object.assign({ css: Css_1.Css.df.childGap1.mb1.hPx(rowHeight).$ }, { children: rowCells(i) }), `row-${i}`))) }), void 0));
+}
+exports.LoadingSkeleton = LoadingSkeleton;
+/** Create the illusion of random widths by cycling through a list of widths that look nice in order */
+function getRandomizedFlexBasisByRowIndex(rowIndex) {
+    const randomizedFlexBasisValues = [0.65, 0.8, 0.75, 0.9, 0.8, 0.85, 0.8, 0.95];
+    const valueIndex = rowIndex % randomizedFlexBasisValues.length;
+    return randomizedFlexBasisValues[valueIndex];
+}
+const sizeToPixels = {
+    sm: 16,
+    md: 24,
+    lg: 32,
+};

package/dist/components/index.d.ts

@@ -17,6 +17,7 @@ export * from "./Icon";
 export * from "./IconButton";
 export * from "./Layout";
 export * from "./Loader";
+export * from "./LoadingSkeleton";
 export * from "./Modal";
 export * from "./Modal/useModal";
 export { NavLink } from "./NavLink";

package/dist/components/index.js

@@ -31,6 +31,7 @@ __exportStar(require("./Icon"), exports);
 __exportStar(require("./IconButton"), exports);
 __exportStar(require("./Layout"), exports);
 __exportStar(require("./Loader"), exports);
+__exportStar(require("./LoadingSkeleton"), exports);
 __exportStar(require("./Modal"), exports);
 __exportStar(require("./Modal/useModal"), exports);
 var NavLink_1 = require("./NavLink");

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@homebound/beam",
-  "version": "2.175.2",
+  "version": "2.176.0",
   "author": "Homebound",
   "license": "MIT",
   "main": "dist/index.js",