@reshape-biotech/design-system 1.2.6 → 2.0.0

package/dist/components/skeleton-loader/SkeletonLoader.svelte

@@ -1,17 +1,17 @@
 <script lang="ts">
-	import type { Snippet } from 'svelte';
-	import Skeleton from './components/Skeleton.svelte';
-	import SkeletonImage from './components/SkeletonImage.svelte';
+  import type { Snippet } from 'svelte';
+  import Skeleton from './components/Skeleton.svelte';
+  import SkeletonImage from './components/SkeletonImage.svelte';
 
-	interface Props {
-		class?: string;
-		dataTestId?: string;
-		children?: Snippet<[{ Skeleton: typeof Skeleton; SkeletonImage: typeof SkeletonImage }]>;
-	}
+  interface Props {
+    class?: string;
+    dataTestId?: string;
+    children?: Snippet<[{ Skeleton: typeof Skeleton; SkeletonImage: typeof SkeletonImage }]>;
+  }
 
-	let { class: className = '', dataTestId = '', children }: Props = $props();
+  let { class: className = '', dataTestId = '', children }: Props = $props();
 </script>
 
 <div role="status" class={`h-full w-full animate-pulse ${className}`} data-testid={dataTestId}>
-	{@render children?.({ Skeleton, SkeletonImage })}
+  {@render children?.({ Skeleton, SkeletonImage })}
 </div>

package/dist/components/skeleton-loader/StatcardSkeleton.svelte

@@ -1,14 +1,14 @@
 <script lang="ts">
-	import SkeletonLoader from './SkeletonLoader.svelte';
+  import SkeletonLoader from './SkeletonLoader.svelte';
 </script>
 
 <SkeletonLoader>
-	{#snippet children({ Skeleton })}
-		<div class="flex h-[92px] flex-1 flex-col justify-between gap-2 rounded-lg bg-neutral p-4">
-			<Skeleton class="h-4 w-1/2 "></Skeleton>
-			<div class="flex items-baseline gap-2">
-				<Skeleton class="h-8 w-16" />
-			</div>
-		</div>
-	{/snippet}
+  {#snippet children({ Skeleton })}
+    <div class="flex h-[92px] flex-1 flex-col justify-between gap-2 rounded-lg bg-neutral p-4">
+      <Skeleton class="h-4 w-1/2 "></Skeleton>
+      <div class="flex items-baseline gap-2">
+        <Skeleton class="h-8 w-16" />
+      </div>
+    </div>
+  {/snippet}
 </SkeletonLoader>

package/dist/components/skeleton-loader/components/Skeleton.svelte

@@ -1,14 +1,14 @@
 <script lang="ts">
-	import type { Snippet } from 'svelte';
+  import type { Snippet } from 'svelte';
 
-	interface Props {
-		class?: string;
-		children?: Snippet;
-	}
+  interface Props {
+    class?: string;
+    children?: Snippet;
+  }
 
-	let { class: className = '', children }: Props = $props();
+  let { class: className = '', children }: Props = $props();
 </script>
 
 <div class={`bg-neutral ${className}`}>
-	{@render children?.()}
+  {@render children?.()}
 </div>

package/dist/components/skeleton-loader/components/SkeletonImage.svelte

@@ -1,14 +1,14 @@
 <svg width="100%" height="100%" viewBox="0 0 160 97" fill="none" xmlns="http://www.w3.org/2000/svg">
-	<path
-		d="M71 46.4792C67.1348 46.4792 64 43.3117 64 39.4062C64 35.5008 67.1348 32.3333 71 32.3333C74.8652 32.3333 78 35.5008 78 39.4062C78.0045 43.3117 74.8697 46.4792 71 46.4792Z"
-		fill="#FFFFFF"
-	/>
-	<path
-		d="M89 46.4792C85.1348 46.4792 82 43.3117 82 39.4062C82 35.5008 85.1348 32.3333 89 32.3333C92.8652 32.3333 96 35.5008 96 39.4062C96.0045 43.3117 92.8697 46.4792 89 46.4792Z"
-		fill="#FFFFFF"
-	/>
-	<path
-		d="M64 57.5937C64 53.6883 67.1348 50.5208 71 50.5208C74.8652 50.5208 78 53.6883 78 57.5937C78 61.4992 74.8652 64.6667 71 64.6667C67.1348 64.6667 64 61.4992 64 57.5937Z"
-		fill="#FFFFFF"
-	/>
+  <path
+    d="M71 46.4792C67.1348 46.4792 64 43.3117 64 39.4062C64 35.5008 67.1348 32.3333 71 32.3333C74.8652 32.3333 78 35.5008 78 39.4062C78.0045 43.3117 74.8697 46.4792 71 46.4792Z"
+    fill="#FFFFFF"
+  />
+  <path
+    d="M89 46.4792C85.1348 46.4792 82 43.3117 82 39.4062C82 35.5008 85.1348 32.3333 89 32.3333C92.8652 32.3333 96 35.5008 96 39.4062C96.0045 43.3117 92.8697 46.4792 89 46.4792Z"
+    fill="#FFFFFF"
+  />
+  <path
+    d="M64 57.5937C64 53.6883 67.1348 50.5208 71 50.5208C74.8652 50.5208 78 53.6883 78 57.5937C78 61.4992 74.8652 64.6667 71 64.6667C67.1348 64.6667 64 61.4992 64 57.5937Z"
+    fill="#FFFFFF"
+  />
 </svg>

package/dist/components/slider/Slider.stories.svelte

@@ -1,37 +1,37 @@
 <script module>
-	import Slider from './Slider.svelte';
+  import Slider from './Slider.svelte';
 
-	import { defineMeta } from '@storybook/addon-svelte-csf';
+  import { defineMeta } from '@storybook/addon-svelte-csf';
 
-	const { Story } = defineMeta({
-		component: Slider,
-		title: 'Design System/Slider',
-		tags: ['autodocs']
-	});
+  const { Story } = defineMeta({
+    component: Slider,
+    title: 'Design System/Slider',
+    tags: ['autodocs'],
+  });
 
-	let value = 3;
+  let value = 3;
 </script>
 
 <Story name="Default" asChild>
-	Value: {value + 1}
-	<Slider bind:value bind:buffer={value} max={4}></Slider>
+  Value: {value + 1}
+  <Slider bind:value bind:buffer={value} max={4}></Slider>
 </Story>
 <Story name="Playback Controls Running Job" asChild>
-	Value: {value + 1}
-	<Slider bind:value buffer={35} max={49} bufferColorClass="bg-warning-inverse"></Slider>
+  Value: {value + 1}
+  <Slider bind:value buffer={35} max={49} bufferColorClass="bg-warning-inverse"></Slider>
 </Story>
 <Story name="Modern stepStyle" asChild>
-	Value: {value + 1}
-	<Slider bind:value bind:buffer={value} max={4} showSteps={true}></Slider>
+  Value: {value + 1}
+  <Slider bind:value bind:buffer={value} max={4} showSteps={true}></Slider>
 </Story>
 <Story name="Create Job Capture Interval" asChild>
-	Value: {value + 1}
-	<Slider
-		bind:value
-		max={6}
-		showSteps={true}
-		buffer={2}
-		bufferMin={1}
-		bufferColorClass="bg-danger-inverse"
-	></Slider>
+  Value: {value + 1}
+  <Slider
+    bind:value
+    max={6}
+    showSteps={true}
+    buffer={2}
+    bufferMin={1}
+    bufferColorClass="bg-danger-inverse"
+  ></Slider>
 </Story>

package/dist/components/slider/Slider.svelte

@@ -1,127 +1,127 @@
 <script lang="ts">
-	import { Icon } from '../icons';
+  import { Icon } from '../icons';
 
-	let className = '';
-	export { className as class };
-	export let value = 0;
-	export let max: number;
-	export let buffer = 0;
-	export let bufferMin = 0;
-	export let bufferColorClass = 'bg-neutral';
-	export let filledColorClass = 'bg-accent-inverse';
-	export let showFilled = false;
-	export let showSteps = false;
-	export let onMousedown: () => void = () => {};
-	export let onMouseup: () => void = () => {};
-	export let id: string | undefined = undefined;
+  let className = '';
+  export { className as class };
+  export let value = 0;
+  export let max: number;
+  export let buffer = 0;
+  export let bufferMin = 0;
+  export let bufferColorClass = 'bg-neutral';
+  export let filledColorClass = 'bg-accent-inverse';
+  export let showFilled = false;
+  export let showSteps = false;
+  export let onMousedown: () => void = () => {};
+  export let onMouseup: () => void = () => {};
+  export let id: string | undefined = undefined;
 
-	$: if (value > max) {
-		value = max;
-	} else if (value < 0) {
-		value = 0;
-	}
+  $: if (value > max) {
+    value = max;
+  } else if (value < 0) {
+    value = 0;
+  }
 
-	$: visualMax = Math.max(max, 1);
-	$: buffer = Math.min(buffer, visualMax);
+  $: visualMax = Math.max(max, 1);
+  $: buffer = Math.min(buffer, visualMax);
 
-	function calculatePosition(positionFactor: number): string {
-		return `calc((${positionFactor / visualMax} * (100% - 1rem))`;
-	}
+  function calculatePosition(positionFactor: number): string {
+    return `calc((${positionFactor / visualMax} * (100% - 1rem))`;
+  }
 </script>
 
 <div class={`relative flex h-10 items-center ${className}`}>
-	<div class="track-overlay"></div>
-	<div
-		class="pointer-events-none absolute h-2.5 rounded-full {bufferColorClass}"
-		style="
+  <div class="track-overlay"></div>
+  <div
+    class="pointer-events-none absolute h-2.5 rounded-full {bufferColorClass}"
+    style="
       width: {calculatePosition(buffer - bufferMin)} + 1rem);
       left: {calculatePosition(bufferMin)}
     "
-	></div>
-	{#if showFilled}
-		<div
-			class="absolute h-2.5 rounded-full {filledColorClass}"
-			style="width: {calculatePosition(value)} + 1rem);left: 0;"
-		></div>
-	{/if}
-	{#if showSteps}
-		<div class="h-2.5">
-			{#each Array(visualMax + 1) as _, index}
-				<div
-					class="absolute h-1.5 w-1.5 translate-y-[2px] rounded-full bg-surface ring-1 ring-gray-950/10"
-					style="left: {calculatePosition(index)} + 0.25rem"
-				></div>
-			{/each}
-		</div>
-	{/if}
-	<input
-		{id}
-		data-testid={id}
-		type="range"
-		max={visualMax}
-		bind:value
-		on:mousedown={onMousedown}
-		on:mouseup={onMouseup}
-	/>
-	<div class="thumb-overlay" style="left: {calculatePosition(value)} + 0.5rem)">
-		<Icon iconName="CaretUpDown" class="rotate-90" />
-	</div>
+  ></div>
+  {#if showFilled}
+    <div
+      class="absolute h-2.5 rounded-full {filledColorClass}"
+      style="width: {calculatePosition(value)} + 1rem);left: 0;"
+    ></div>
+  {/if}
+  {#if showSteps}
+    <div class="h-2.5">
+      {#each Array(visualMax + 1) as _, index}
+        <div
+          class="absolute h-1.5 w-1.5 translate-y-[2px] rounded-full bg-surface ring-1 ring-gray-950/10"
+          style="left: {calculatePosition(index)} + 0.25rem"
+        ></div>
+      {/each}
+    </div>
+  {/if}
+  <input
+    {id}
+    data-testid={id}
+    type="range"
+    max={visualMax}
+    bind:value
+    on:mousedown={onMousedown}
+    on:mouseup={onMouseup}
+  />
+  <div class="thumb-overlay" style="left: {calculatePosition(value)} + 0.5rem)">
+    <Icon iconName="CaretUpDown" class="rotate-90" />
+  </div>
 </div>
 
 <style>
-	.track-overlay {
-		pointer-events: none;
-		position: absolute;
-		height: 0.625rem;
-		width: 100%;
-		cursor: pointer;
-		border-radius: 9999px;
-		border-width: 1px;
-		border-color: #12192a14;
-		background-color: #12192a0A;
+  .track-overlay {
+    pointer-events: none;
+    position: absolute;
+    height: 0.625rem;
+    width: 100%;
+    cursor: pointer;
+    border-radius: 9999px;
+    border-width: 1px;
+    border-color: #12192a14;
+    background-color: #12192a0A;
 }
 
-	.thumb-overlay {
-		transform: translate(-50%, 50%);
-		pointer-events: none;
-		position: absolute;
-		bottom: 1.25rem;
-		display: inline-flex;
-		height: 2rem;
-		width: 2rem;
-		align-items: center;
-		justify-content: center;
-		border-radius: 9999px;
-		border-width: 1px;
-		border-color: #12192A26;
-		--tw-bg-opacity: 1;
-		background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
-		--tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
-		--tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
-		box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
-	}
+  .thumb-overlay {
+    transform: translate(-50%, 50%);
+    pointer-events: none;
+    position: absolute;
+    bottom: 1.25rem;
+    display: inline-flex;
+    height: 2rem;
+    width: 2rem;
+    align-items: center;
+    justify-content: center;
+    border-radius: 9999px;
+    border-width: 1px;
+    border-color: #12192A26;
+    --tw-bg-opacity: 1;
+    background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
+    --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
+    --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
+    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+  }
 
-	input[type='range'] {
-		-webkit-appearance: none;
-		-moz-appearance: none;
-		     appearance: none;
-		position: relative;
-		cursor: pointer;
-		height: 2.5rem;
-		width: 100%;
-		background-color: transparent;
-	}
+  input[type='range'] {
+    -webkit-appearance: none;
+    -moz-appearance: none;
+         appearance: none;
+    position: relative;
+    cursor: pointer;
+    height: 2.5rem;
+    width: 100%;
+    background-color: transparent;
+  }
 
-	input[type='range']::-webkit-slider-thumb {
-			-webkit-appearance: none;
-			appearance: none;
-			width: 0;
-			height: 0;
-		}
+  input[type='range']::-webkit-slider-thumb {
+      -webkit-appearance: none;
+      appearance: none;
+      width: 0;
+      height: 0;
+    }
 
-	input[type='range']::-moz-range-thumb {
-			width: 0;
-			height: 0;
-			border: none;
-		}
+  input[type='range']::-moz-range-thumb {
+      width: 0;
+      height: 0;
+      border: none;
+    }
 </style>

package/dist/components/spinner/Spinner.stories.svelte

@@ -1,13 +1,13 @@
 <script lang="ts" module>
-	import { defineMeta } from '@storybook/addon-svelte-csf';
-	import Spinner from './Spinner.svelte';
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+  import Spinner from './Spinner.svelte';
 
-	// More on how to set up stories at: https://storybook.js.org/docs/writing-stories
-	const { Story } = defineMeta({
-		title: 'Design System/Spinner',
-		component: Spinner,
-		tags: ['autodocs']
-	});
+  // More on how to set up stories at: https://storybook.js.org/docs/writing-stories
+  const { Story } = defineMeta({
+    title: 'Design System/Spinner',
+    component: Spinner,
+    tags: ['autodocs'],
+  });
 </script>
 
 <Story name="Base" />

package/dist/components/spinner/Spinner.svelte

@@ -1,27 +1,27 @@
 <script lang="ts">
-	interface Props {
-		testID?: string;
-	}
+  interface Props {
+    testID?: string;
+  }
 
-	let { testID = '' }: Props = $props();
+  let { testID = '' }: Props = $props();
 </script>
 
 <div data-testid={testID} class="spinner"></div>
 
 <style>
-	.spinner {
-		background: conic-gradient(#0000 10%, currentColor);
-		mask: radial-gradient(farthest-side, #0000 calc(100% - 2px), #000 0);
-		-webkit-mask: radial-gradient(farthest-side, #0000 calc(100% - 2px), #000 0);
-		animation: spinner 1s infinite linear;
-		height: 0.75rem;
-		width: 0.75rem;
-		border-radius: 9999px;
-	}
+  .spinner {
+    background: conic-gradient(#0000 10%, currentColor);
+    mask: radial-gradient(farthest-side, #0000 calc(100% - 2px), #000 0);
+    -webkit-mask: radial-gradient(farthest-side, #0000 calc(100% - 2px), #000 0);
+    animation: spinner 1s infinite linear;
+    height: 0.75rem;
+    width: 0.75rem;
+    border-radius: 9999px;
+  }
 
-	@keyframes spinner {
-		to {
-			transform: rotate(1turn);
-		}
-	}
+  @keyframes spinner {
+    to {
+      transform: rotate(1turn);
+    }
+  }
 </style>

package/dist/components/stat-card/StatCard.stories.svelte

@@ -1,40 +1,40 @@
 <script module>
-	import StatCard from './StatCard.svelte';
-	import { defineMeta } from '@storybook/addon-svelte-csf';
+  import StatCard from './StatCard.svelte';
+  import { defineMeta } from '@storybook/addon-svelte-csf';
 
-	const { Story } = defineMeta({
-		component: StatCard,
-		title: 'Design System/StatCard',
-		tags: ['autodocs']
-	});
+  const { Story } = defineMeta({
+    component: StatCard,
+    title: 'Design System/StatCard',
+    tags: ['autodocs'],
+  });
 </script>
 
 <Story
-	name="Default"
-	args={{ title: 'Title', value: 'Value', unit: 'unit', titleTooltip: 'Title tooltip' }}
+  name="Default"
+  args={{ title: 'Title', value: 'Value', unit: 'unit', titleTooltip: 'Title tooltip' }}
 />
 
 <Story
-	name="Germination Rate"
-	args={{
-		title: 'Germination Rate',
-		value: '2',
-		unit: '%',
-		titleTooltip: 'Something that explains what this is...',
-		showTitleTooltip: true
-	}}
+  name="Germination Rate"
+  args={{
+    title: 'Germination Rate',
+    value: '2',
+    unit: '%',
+    titleTooltip: 'Something that explains what this is...',
+    showTitleTooltip: true,
+  }}
 />
 
 <Story name="Home Page" args={{ title: 'Current jobs', value: '3', unit: 'of 5' }} />
 
 <Story
-	name="Editable"
-	args={{
-		title: 'Germination Rate',
-		value: '2',
-		unit: '%',
-		titleTooltip: 'Something that explains what this is...',
-		showTitleTooltip: true,
-		editable: true
-	}}
+  name="Editable"
+  args={{
+    title: 'Germination Rate',
+    value: '2',
+    unit: '%',
+    titleTooltip: 'Something that explains what this is...',
+    showTitleTooltip: true,
+    editable: true,
+  }}
 />