feat: initial commit

src/components/SkeletonText/SkeletonText.svelte

@@ -0,0 +1,37 @@
+<script>
+  let className = undefined;
+  export { className as class };
+  export let paragraph = false;
+  export let lineCount = 3;
+  export let width = '100%';
+  export let heading = false;
+  export let props = {};
+
+  import { cx } from '../../lib';
+
+  const randoms = [0.973051493507435, 0.15334737213558558, 0.5671034553053769];
+  const _class = cx('--skeleton__text', heading && '--skeleton__heading', className);
+  const widthNum = parseInt(width, 10);
+  const widthPx = width.includes('px');
+  const widthPercent = width.includes('%');
+  let lines = [];
+
+  $: if (paragraph) {
+    for (let i = 0; i < lineCount; i++) {
+      const min = widthPx ? widthNum - 75 : 0;
+      const max = widthPx ? widthNum : 75;
+      const randomWidth = Math.floor(randoms[i % 3] * (max - min + 1)) + min + 'px';
+      lines = [...lines, { width: widthPx ? randomWidth : `calc(${width} - ${randomWidth})` }];
+    }
+  }
+</script>
+
+{#if paragraph}
+  <div>
+    {#each lines as { width }}
+      <p {...props} class={_class} style={`width: ${width};`} />
+    {/each}
+  </div>
+{:else}
+  <p {...props} class={_class} style={`width: ${width};`} />
+{/if}