@reshape-biotech/design-system 0.0.44 → 0.0.47

package/dist/components/skeleton-loader/SkeletonLoader.stories.svelte.d.ts

@@ -1,27 +0,0 @@
-export default SkeletonLoader;
-type SkeletonLoader = SvelteComponent<{
-    [x: string]: never;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}> & {
-    $$bindings?: string | undefined;
-};
-declare const SkeletonLoader: $$__sveltets_2_IsomorphicComponent<{
-    [x: string]: never;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
-import SkeletonLoader from './SkeletonLoader.svelte';
-interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
-    new (options: import("svelte").ComponentConstructorOptions<Props>): import("svelte").SvelteComponent<Props, Events, Slots> & {
-        $$bindings?: Bindings;
-    } & Exports;
-    (internal: unknown, props: {
-        $$events?: Events;
-        $$slots?: Slots;
-    }): Exports & {
-        $set?: any;
-        $on?: any;
-    };
-    z_$$bindings?: Bindings;
-}

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

@@ -1,17 +0,0 @@
-<script lang="ts">
-	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 }]>;
-	}
-
-	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 })}
-</div>

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

@@ -1,14 +0,0 @@
-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;
-    }]>;
-}
-declare const SkeletonLoader: import("svelte").Component<Props, {}, "">;
-type SkeletonLoader = ReturnType<typeof SkeletonLoader>;
-export default SkeletonLoader;

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

@@ -1,17 +0,0 @@
-<script lang="ts">
-	import SkeletonLoader from './SkeletonLoader.svelte';
-</script>
-
-<SkeletonLoader>
-	{#snippet children({ Skeleton })}
-		<div
-			class="flex h-24 flex-1 flex-col justify-between gap-2 rounded-lg bg-surface p-4 shadow-field"
-		>
-			<Skeleton class="h-4 w-1/2 "></Skeleton>
-			<div class="flex items-baseline gap-2">
-				<Skeleton class="h-8 w-8 " />
-				<Skeleton class="h-4 w-16 " />
-			</div>
-		</div>
-	{/snippet}
-</SkeletonLoader>

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

@@ -1,18 +0,0 @@
-interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
-    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
-        $$bindings?: Bindings;
-    } & Exports;
-    (internal: unknown, props: {
-        $$events?: Events;
-        $$slots?: Slots;
-    }): Exports & {
-        $set?: any;
-        $on?: any;
-    };
-    z_$$bindings?: Bindings;
-}
-declare const StatcardSkeleton: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
-type StatcardSkeleton = InstanceType<typeof StatcardSkeleton>;
-export default StatcardSkeleton;

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

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

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

@@ -1,8 +0,0 @@
-import type { Snippet } from 'svelte';
-interface Props {
-    class?: string;
-    children?: Snippet;
-}
-declare const Skeleton: import("svelte").Component<Props, {}, "">;
-type Skeleton = ReturnType<typeof Skeleton>;
-export default Skeleton;

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

@@ -1,14 +0,0 @@
-<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"
-	/>
-</svg>

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

@@ -1,26 +0,0 @@
-export default SkeletonImage;
-type SkeletonImage = SvelteComponent<{
-    [x: string]: never;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}> & {
-    $$bindings?: string | undefined;
-};
-declare const SkeletonImage: $$__sveltets_2_IsomorphicComponent<{
-    [x: string]: never;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
-interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
-    new (options: import("svelte").ComponentConstructorOptions<Props>): import("svelte").SvelteComponent<Props, Events, Slots> & {
-        $$bindings?: Bindings;
-    } & Exports;
-    (internal: unknown, props: {
-        $$events?: Events;
-        $$slots?: Slots;
-    }): Exports & {
-        $set?: any;
-        $on?: any;
-    };
-    z_$$bindings?: Bindings;
-}

package/dist/components/skeleton-loader/index.d.ts

@@ -1,3 +0,0 @@
-export { default as SkeletonLoader } from './SkeletonLoader.svelte';
-export { default as StatcardSkeleton } from './StatcardSkeleton.svelte';
-export { default as SkeletonImage } from './components/SkeletonImage.svelte';

package/dist/components/skeleton-loader/index.js

@@ -1,3 +0,0 @@
-export { default as SkeletonLoader } from './SkeletonLoader.svelte';
-export { default as StatcardSkeleton } from './StatcardSkeleton.svelte';
-export { default as SkeletonImage } from './components/SkeletonImage.svelte';

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

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

@@ -1,27 +0,0 @@
-export default Slider;
-type Slider = SvelteComponent<{
-    [x: string]: never;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}> & {
-    $$bindings?: string | undefined;
-};
-declare const Slider: $$__sveltets_2_IsomorphicComponent<{
-    [x: string]: never;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
-import Slider from './Slider.svelte';
-interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
-    new (options: import("svelte").ComponentConstructorOptions<Props>): import("svelte").SvelteComponent<Props, Events, Slots> & {
-        $$bindings?: Bindings;
-    } & Exports;
-    (internal: unknown, props: {
-        $$events?: Events;
-        $$slots?: Slots;
-    }): Exports & {
-        $set?: any;
-        $on?: any;
-    };
-    z_$$bindings?: Bindings;
-}

package/dist/components/slider/Slider.svelte

@@ -1,117 +0,0 @@
-<script lang="ts">
-	import { CaretLeft, CaretRight } from 'phosphor-svelte';
-	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-accent-inverse';
-	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;
-	}
-
-	$: visualMax = Math.max(max, 1);
-	$: buffer = Math.min(buffer, visualMax);
-
-	function calculatePosition(positionFactor: number): string {
-		return `calc((${positionFactor / visualMax} * (100% - 2.5rem))`;
-	}
-</script>
-
-<div class={`relative flex h-10 items-center ${className}`}>
-	<div class="track-overlay"></div>
-	<div
-		class="pointer-events-none absolute h-2 rounded-full {bufferColorClass}"
-		style="
-      width: {calculatePosition(buffer - bufferMin)} + 0.5rem);
-      left: {calculatePosition(bufferMin)} + 1rem)
-    "
-	></div>
-	{#if showSteps}
-		<div class="h-2">
-			{#each Array(visualMax + 1) as _, index}
-				<div
-					class="absolute h-1 w-1 translate-y-1/2 rounded-full bg-surface"
-					style="left: {calculatePosition(index)} + 1.125rem"
-				></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)} + 1.25rem)">
-		<CaretLeft class="text-primary" size="0.75rem" weight="bold" />
-		<CaretRight class="text-primary" size="0.75rem" weight="bold" />
-	</div>
-</div>
-
-<style>
-	.track-overlay {
-		width: calc(100% - 2rem);
-		cursor: pointer;
-		pointer-events: none;
-		position: absolute;
-		margin-left: 1rem;
-		margin-right: 1rem;
-		height: 0.5rem;
-		border-radius: 9999px;
-		background-color: #12192A26;
-	}
-
-	.thumb-overlay {
-		transform: translate(-50%, 50%);
-		pointer-events: none;
-		position: absolute;
-		bottom: 1.25rem;
-		display: inline-flex;
-		height: 2.5rem;
-		width: 2.5rem;
-		align-items: center;
-		justify-content: center;
-		border-radius: 9999px;
-		--tw-bg-opacity: 1;
-		background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
-		--tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
-		--tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px 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-slider-thumb {
-			-webkit-appearance: none;
-			appearance: none;
-			width: 0;
-			height: 0;
-		}
-
-	input[type='range']::-moz-range-thumb {
-			width: 0;
-			height: 0;
-			border: none;
-		}
-</style>

package/dist/components/slider/Slider.svelte.d.ts

@@ -1,29 +0,0 @@
-interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
-    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
-        $$bindings?: Bindings;
-    } & Exports;
-    (internal: unknown, props: Props & {
-        $$events?: Events;
-        $$slots?: Slots;
-    }): Exports & {
-        $set?: any;
-        $on?: any;
-    };
-    z_$$bindings?: Bindings;
-}
-declare const Slider: $$__sveltets_2_IsomorphicComponent<{
-    class?: string;
-    value?: number;
-    max: number;
-    buffer?: number;
-    bufferMin?: number;
-    bufferColorClass?: string;
-    showSteps?: boolean;
-    onMousedown?: () => void;
-    onMouseup?: () => void;
-    id?: string | undefined;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
-type Slider = InstanceType<typeof Slider>;
-export default Slider;

package/dist/components/slider/index.d.ts

@@ -1 +0,0 @@
-export { default as Slider } from './Slider.svelte';

package/dist/components/slider/index.js

@@ -1 +0,0 @@
-export { default as Slider } from './Slider.svelte';

package/dist/components/spinner/Spinner.svelte

@@ -1,27 +0,0 @@
-<script lang="ts">
-	interface Props {
-		testID?: string;
-	}
-
-	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;
-	}
-
-	@keyframes spinner {
-		to {
-			transform: rotate(1turn);
-		}
-	}
-</style>

package/dist/components/spinner/Spinner.svelte.d.ts

@@ -1,6 +0,0 @@
-interface Props {
-    testID?: string;
-}
-declare const Spinner: import("svelte").Component<Props, {}, "">;
-type Spinner = ReturnType<typeof Spinner>;
-export default Spinner;

package/dist/components/spinner/index.d.ts

@@ -1 +0,0 @@
-export { default as Spinner } from './Spinner.svelte';

package/dist/components/spinner/index.js

@@ -1 +0,0 @@
-export { default as Spinner } from './Spinner.svelte';

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

@@ -1,32 +0,0 @@
-<script module>
-	import StatCard from './StatCard.svelte';
-	import { defineMeta } from '@storybook/addon-svelte-csf';
-
-	const { Story } = defineMeta({
-		component: StatCard,
-		title: 'Design System/StatCard',
-		tags: ['autodocs']
-	});
-</script>
-
-<Story name="Default">
-	<StatCard title="Title" value="Value" unit="unit" titleTooltip="Title tooltip" />
-</Story>
-
-<Story name="Germination Rate">
-	<StatCard
-		title="Germination Rate"
-		value="2"
-		unit="%"
-		titleTooltip="Something that explains what this is..."
-		showTitleTooltip={true}
-	/>
-</Story>
-
-<Story name="Home Page">
-	<div class="flex w-full gap-4">
-		<StatCard title="Current jobs" value="3" unit="of 5" />
-		<StatCard title="Run time" value="5.4" unit="hours" />
-		<StatCard title="Images taken" value="1366" />
-	</div>
-</Story>

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

@@ -1,27 +0,0 @@
-export default StatCard;
-type StatCard = SvelteComponent<{
-    [x: string]: never;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}> & {
-    $$bindings?: string | undefined;
-};
-declare const StatCard: $$__sveltets_2_IsomorphicComponent<{
-    [x: string]: never;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
-import StatCard from './StatCard.svelte';
-interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
-    new (options: import("svelte").ComponentConstructorOptions<Props>): import("svelte").SvelteComponent<Props, Events, Slots> & {
-        $$bindings?: Bindings;
-    } & Exports;
-    (internal: unknown, props: {
-        $$events?: Events;
-        $$slots?: Slots;
-    }): Exports & {
-        $set?: any;
-        $on?: any;
-    };
-    z_$$bindings?: Bindings;
-}

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

@@ -1,52 +0,0 @@
-<script lang="ts">
-	import { Info } from 'phosphor-svelte';
-	import Spinner from '../spinner/Spinner.svelte';
-	import Tooltip from '../tooltip/Tooltip.svelte';
-
-	interface Props {
-		title: string;
-		value?: string | number | null;
-		unit?: string | null;
-		titleTooltip?: string;
-		showTitleTooltip?: boolean;
-	}
-
-	let {
-		title,
-		value = null,
-		unit = '',
-		titleTooltip = '',
-		showTitleTooltip = false
-	}: Props = $props();
-	const formattedValue = $derived(typeof value === 'number' ? value.toLocaleString() : value);
-</script>
-
-<div
-	class="flex h-24 min-w-[130px] flex-shrink-0 flex-grow basis-0 flex-col items-start gap-2 rounded-lg bg-surface p-4 shadow-field"
->
-	<h5 class="flex items-center justify-start gap-1 text-secondary">
-		{title}
-		{#if titleTooltip && showTitleTooltip}
-			<Tooltip>
-				{#snippet trigger()}
-					<Info class="icon" size="1rem" weight="bold" />
-				{/snippet}
-				{#snippet content()}
-					<span>
-						{titleTooltip}
-					</span>
-				{/snippet}
-			</Tooltip>
-		{/if}
-	</h5>
-	<div class="flex items-baseline gap-1">
-		{#if value !== null}
-			<h3>{formattedValue}</h3>
-			{#if unit}
-				<h5>{unit}</h5>
-			{/if}
-		{:else}
-			<Spinner />
-		{/if}
-	</div>
-</div>

package/dist/components/stat-card/StatCard.svelte.d.ts

@@ -1,10 +0,0 @@
-interface Props {
-    title: string;
-    value?: string | number | null;
-    unit?: string | null;
-    titleTooltip?: string;
-    showTitleTooltip?: boolean;
-}
-declare const StatCard: import("svelte").Component<Props, {}, "">;
-type StatCard = ReturnType<typeof StatCard>;
-export default StatCard;

package/dist/components/stat-card/index.d.ts

@@ -1 +0,0 @@
-export { default as StatCard } from './StatCard.svelte';

package/dist/components/stat-card/index.js

@@ -1 +0,0 @@
-export { default as StatCard } from './StatCard.svelte';