@loomhq/lens 10.82.4 → 10.83.0

package/dist/components/index.d.ts

@@ -20,6 +20,7 @@ export { default as FormField } from "./form-field/form-field";
 export { default as NotificationBar } from "./notification-bar/notification-bar";
 export { default as Toast } from "./toast/toast";
 export { default as Switch } from "./switch/switch";
+export { default as SkeletonText } from "./skeleton-text/skeleton-text";
 export { default as Logo } from "./logo/logo";
 export { default as Radio } from "./radio/radio";
 export { default as Pill } from "./pill/pill";

package/dist/components/index.js

@@ -28,6 +28,7 @@ export { default as Toast } from './toast/toast';
 export { default as Tooltip } from './tooltip/tooltip';
 export { TooltipBox } from './tooltip/tooltip';
 export { default as Switch } from './switch/switch';
+export { default as SkeletonText } from './skeleton-text/skeleton-text';
 export { default as Logo } from './logo/logo';
 export { default as Radio } from './radio/radio';
 export { default as List } from './list/list';

package/dist/components/skeleton-text/skeleton-text.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+declare const SkeletonTextWrapper: import("@emotion/styled-base").StyledComponent<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, SkeletonTextProps, object>;
+declare const SkeletonText: ({ size, lines, }: SkeletonTextProps & React.ComponentProps<typeof SkeletonTextWrapper>) => JSX.Element;
+declare type SkeletonTextProps = {
+    size?: 'body-sm' | 'body-md' | 'body-lg' | 'heading-sm' | 'heading-md' | 'heading-lg';
+    lines?: number;
+};
+export default SkeletonText;

package/dist/components/skeleton-text/skeleton-text.js

@@ -0,0 +1,32 @@
+import React from 'react';
+import styled from '@emotion/styled';
+import { getTextSize } from '../../utilities';
+const SkeletonTextWrapper = styled.div `
+  ${props => getTextSize(props.size)};
+  color: transparent;
+  position: relative;
+  &::after {
+    content '';
+    position: absolute;
+    background-color: var(--lns-color-disabledBackground);
+    border-radius: var(--lns-radius-full);
+    width: 100%;
+    display: block;
+    height: 71.45%;
+    top: .2em;
+  }
+  ${props => props.lines > 1 &&
+    `
+      &:nth-of-type(3n+1) {
+        width: calc(100% - 2.25rem);
+      }
+      &:nth-of-type(3n) {
+        width: calc(100% - 4.125rem);
+      }
+    }
+  `};
+`;
+const SkeletonText = ({ size = 'body-md', lines = 1, }) => {
+    return (React.createElement(React.Fragment, null, [...Array(lines)].map((_, i) => (React.createElement(SkeletonTextWrapper, { key: i, size: size, lines: lines }, "Loading")))));
+};
+export default SkeletonText;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@loomhq/lens",
-  "version": "10.82.4",
+  "version": "10.83.0",
   "scripts": {
     "dev": "next",
     "build:next": "next build",