@reshape-biotech/design-system 0.0.44 → 0.0.47

package/dist/components/icon-button/IconButton.stories.svelte

@@ -1,52 +0,0 @@
-<script module lang="ts">
-	import { defineMeta } from '@storybook/addon-svelte-csf';
-	import IconButton from '../icon-button/IconButton.svelte';
-	import { Plus } from 'phosphor-svelte';
-
-	const { Story } = defineMeta({
-		component: IconButton,
-		title: 'Design System/IconButton',
-		tags: ['autodocs']
-	});
-</script>
-
-<Story name="Primary">
-	<IconButton color="primary">
-		<Plus />
-	</IconButton>
-</Story>
-<Story name="Danger">
-	<IconButton color="danger">
-		<Plus />
-	</IconButton>
-</Story>
-<Story name="Transparent">
-	<IconButton color="transparent">
-		<Plus />
-	</IconButton>
-</Story>
-<Story name="Secondary">
-	<IconButton color="secondary">
-		<Plus />
-	</IconButton>
-</Story>
-<Story name="Medium">
-	<IconButton color="secondary" size="md">
-		<Plus />
-	</IconButton>
-</Story>
-<Story name="Extra Small">
-	<IconButton color="secondary" size="xs">
-		<Plus />
-	</IconButton>
-</Story>
-<Story name="Disabled">
-	<IconButton disabled>
-		<Plus />
-	</IconButton>
-</Story>
-<Story name="Loading">
-	<IconButton loading>
-		<Plus />
-	</IconButton>
-</Story>

package/dist/components/icon-button/IconButton.stories.svelte.d.ts

@@ -1,19 +0,0 @@
-import IconButton from '../icon-button/IconButton.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;
-}
-declare const IconButton: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
-type IconButton = InstanceType<typeof IconButton>;
-export default IconButton;

package/dist/components/icon-button/IconButton.svelte

@@ -1,72 +0,0 @@
-<script lang="ts">
-	import type { Snippet } from 'svelte';
-	import { Spinner } from '../spinner/';
-
-	type Color = 'primary' | 'secondary' | 'transparent' | 'danger';
-	interface Props {
-		color?: 'primary' | 'transparent' | 'secondary' | 'danger';
-		type?: 'button' | 'submit' | 'reset' | null | undefined;
-		loading?: boolean;
-		disabled?: boolean;
-		size?: 'xs' | 'sm' | 'md';
-		children?: Snippet;
-		onclick?: () => void;
-		tabindex?: number | undefined;
-	}
-
-	let {
-		color = 'transparent',
-		type = 'button',
-		loading = false,
-		disabled = false,
-		size = 'sm',
-		children,
-		onclick,
-		tabindex
-	}: Props = $props();
-
-	const sizeClass = {
-		xs: 'h-6 w-6 [&>svg]:w-4 [&>svg]:h-4',
-		sm: 'h-8 w-8 [&>svg]:w-4 [&>svg]:h-4',
-		md: 'h-10 w-10 [&>svg]:w-5 [&>svg]:h-5',
-		lg: 'h-8 w-8 '
-	};
-
-	const colors: Record<Color, string> = {
-		primary: 'bg-accent-inverse text-icon-primary-inverse hover:bg-accent-inverse-hover ',
-		secondary: 'bg-neutral text-icon-primary hover:bg-neutral-hover ',
-		transparent: 'bg-transparent text-icon-primary hover:bg-neutral-hover ',
-		danger: 'bg-danger-inverse text-icon-primary-inverse hover:bg-danger-inverse-hover '
-	};
-
-	const baseStyle = 'flex justify-center items-center rounded-full';
-</script>
-
-{#if disabled || loading}
-	<button
-		onclick={(e) => {
-			e.preventDefault();
-		}}
-		{type}
-		{disabled}
-		class="disabled:bg-neutral disabled:text-tertiary {baseStyle} {sizeClass[
-			size
-		]} cursor-default {colors['secondary']}"
-	>
-		{#if loading}
-			<Spinner />
-		{:else}
-			{@render children?.()}
-		{/if}
-	</button>
-{:else}
-	<button
-		{onclick}
-		{type}
-		{disabled}
-		{tabindex}
-		class="{colors[color]} {sizeClass[size]} {baseStyle} cursor-pointer"
-	>
-		{@render children?.()}
-	</button>
-{/if}

package/dist/components/icon-button/IconButton.svelte.d.ts

@@ -1,14 +0,0 @@
-import type { Snippet } from 'svelte';
-interface Props {
-    color?: 'primary' | 'transparent' | 'secondary' | 'danger';
-    type?: 'button' | 'submit' | 'reset' | null | undefined;
-    loading?: boolean;
-    disabled?: boolean;
-    size?: 'xs' | 'sm' | 'md';
-    children?: Snippet;
-    onclick?: () => void;
-    tabindex?: number | undefined;
-}
-declare const IconButton: import("svelte").Component<Props, {}, "">;
-type IconButton = ReturnType<typeof IconButton>;
-export default IconButton;

package/dist/components/icon-button/index.d.ts

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

package/dist/components/icon-button/index.js

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

package/dist/components/image/Image.svelte

@@ -1,56 +0,0 @@
-<script lang="ts">
-	import { onMount } from 'svelte';
-	import { SkeletonLoader } from '../skeleton-loader/';
-
-	interface Props {
-		src: string;
-		alt: string;
-	}
-
-	let { src, alt }: Props = $props();
-
-	let loaded = $state(false);
-	let failed = $state(false);
-	let loading = $state(false);
-
-	onMount(() => {
-		const img = new Image();
-		img.src = src;
-		loading = true;
-
-		img.onload = () => {
-			loading = false;
-			loaded = true;
-		};
-		img.onerror = () => {
-			loading = false;
-			failed = true;
-		};
-	});
-</script>
-
-<div class="h-full w-full">
-	{#if loaded}
-		<img {src} {alt} class="image h-full w-full object-cover" />
-	{:else if failed}
-		<img src="/imgs/MissingImageListRectangle.png" {alt} class="image" />
-	{:else if loading}
-		<div class="flex h-full flex-grow flex-col content-center justify-center">
-			<SkeletonLoader>
-				{#snippet children({ Skeleton, SkeletonImage })}
-					<!-- TODO: BG color is to match design, but we want to change the color, therefore not a token -->
-					<Skeleton class=" h-full w-full rounded-s-lg bg-[#D9E6E9]">
-						<SkeletonImage />
-					</Skeleton>
-				{/snippet}
-			</SkeletonLoader>
-		</div>
-	{/if}
-</div>
-
-<style>
-	.image {
-    border-start-start-radius: 0.5rem;
-    border-end-start-radius: 0.5rem
-}
-</style>

package/dist/components/image/Image.svelte.d.ts

@@ -1,7 +0,0 @@
-interface Props {
-    src: string;
-    alt: string;
-}
-declare const Image: import("svelte").Component<Props, {}, "">;
-type Image = ReturnType<typeof Image>;
-export default Image;

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

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

package/dist/components/image/index.js

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

package/dist/components/input/Input.stories.svelte

@@ -1,87 +0,0 @@
-<script module>
-	import Input from './Input.svelte';
-
-	import { defineMeta } from '@storybook/addon-svelte-csf';
-
-	const { Story } = defineMeta({
-		component: Input,
-		title: 'Design System/Input',
-		tags: ['autodocs']
-	});
-
-	let value = '';
-	let email = 'bob@foo.com';
-	let password = 'wordpass';
-
-	let textareaValue = '';
-</script>
-
-<Story name="Base">
-	<Input bind:value autofocus />
-</Story>
-<Story name="XSmall">
-	<Input bind:value autofocus size="xs" />
-</Story>
-<Story name="Small">
-	<Input bind:value autofocus size="sm" />
-</Story>
-
-<Story name="Login">
-	<div class="flex flex-col gap-2">
-		<Input bind:value={email} label="Email" type="text" required id="email-select" autofocus />
-		<Input bind:value={password} label="Password" id="password-select" type="password" required />
-	</div>
-</Story>
-
-<Story name="Textarea">
-	<Input
-		bind:value={textareaValue}
-		label="Description"
-		type="textarea"
-		placeholder="Add a description..."
-	/>
-</Story>
-
-<Story name="Prefix">
-	<Input value="Bob">
-		{#snippet prefix()}
-			<div>Mr.</div>
-		{/snippet}
-	</Input>
-</Story>
-
-<Story name="Suffix">
-	<Input value="30">
-		{#snippet suffix()}
-			<div>± 1°C</div>
-		{/snippet}
-	</Input>
-</Story>
-
-<Story name="Prefix & Suffix">
-	<Input value="9001">
-		{#snippet prefix()}
-			<div>$</div>
-		{/snippet}
-		{#snippet suffix()}
-			<div>🔥</div>
-		{/snippet}
-	</Input>
-</Story>
-
-<Story name="Validation">
-	<Input value="Focus me, then click away" validator={(val) => val.toString().length < 10}>
-		{#snippet prefix({ valid })}
-			<div>
-				{#if valid}
-					😊
-				{:else}
-					😔
-				{/if}
-			</div>
-		{/snippet}
-		{#snippet error()}
-			<p class="pt-2 text-error">Oh no! Too many characters!</p>
-		{/snippet}
-	</Input>
-</Story>

package/dist/components/input/Input.stories.svelte.d.ts

@@ -1,27 +0,0 @@
-export default Input;
-type Input = SvelteComponent<{
-    [x: string]: never;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}> & {
-    $$bindings?: string | undefined;
-};
-declare const Input: $$__sveltets_2_IsomorphicComponent<{
-    [x: string]: never;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
-import Input from './Input.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/input/Input.svelte

@@ -1,182 +0,0 @@
-<script lang="ts">
-	import type { Snippet } from 'svelte';
-
-	interface Props {
-		label?: string | null;
-		value: string | number;
-		type?: 'text' | 'password' | 'textarea' | 'number';
-		required?: boolean;
-		autofocus?: boolean;
-		placeholder?: string;
-		id?: string | undefined;
-		validator?: (a: string | number) => boolean;
-		onBlur?: (e: Event) => void;
-		onkeydown?: (e: KeyboardEvent) => void;
-		prefix?: Snippet<[any]>;
-		suffix?: Snippet;
-		error?: Snippet;
-		input?: HTMLInputElement | HTMLTextAreaElement;
-		maxlength?: number | null;
-		size?: 'xs' | 'sm' | 'md';
-	}
-
-	let {
-		label = null,
-		value = $bindable(),
-		type = 'text',
-		required = false,
-		autofocus = false,
-		placeholder = '',
-		id = undefined,
-		validator = (_) => {
-			return true;
-		},
-		onBlur = () => {},
-		onkeydown = () => {},
-		prefix,
-		suffix,
-		error,
-		input = $bindable(),
-		maxlength = null,
-		size = 'md'
-	}: Props = $props();
-
-	let valid = $state(true);
-
-	const inputId = Math.random().toString(36).substring(7); // used for A11y
-
-	function handleInput(event: Event) {
-		const target = event.target as HTMLTextAreaElement | HTMLInputElement;
-		value = target.value;
-
-		if (type === 'textarea') {
-			autoResizeTextarea(target as HTMLTextAreaElement);
-		}
-	}
-	function autoResizeTextarea(textarea: HTMLTextAreaElement) {
-		textarea.style.height = 'auto';
-		textarea.style.height = `${textarea.scrollHeight}px`;
-	}
-
-	function handleBlur(event: Event) {
-		valid = validator(value);
-		onBlur(event);
-	}
-</script>
-
-<div class="w-full">
-	{#if label}
-		<label for={id ?? inputId} class="block px-1 py-2 text-sm text-secondary">{label}</label>
-	{/if}
-	<div
-		class="flex w-full items-center gap-1 rounded-lg border border-input bg-surface shadow-input size-{size}"
-		class:!border-error={!valid}
-	>
-		{#if type === 'textarea'}
-			<textarea
-				id={id ?? inputId}
-				rows="3"
-				class:has-text={value}
-				class:has-placeholder={placeholder}
-				aria-label={label}
-				oninput={handleInput}
-				onblur={handleBlur}
-				{onkeydown}
-				bind:this={input}
-				{value}
-				{required}
-				{autofocus}
-				{placeholder}
-				{maxlength}
-			></textarea>
-		{:else}
-			<div class="whitespace-nowrap text-secondary">
-				{@render prefix?.({ valid })}
-			</div>
-			<input
-				id={id ?? inputId}
-				class="inline leading-none"
-				class:has-text={value}
-				class:has-placeholder={placeholder}
-				aria-label={label}
-				{type}
-				{required}
-				oninput={handleInput}
-				onblur={handleBlur}
-				{onkeydown}
-				bind:this={input}
-				{value}
-				{autofocus}
-				{placeholder}
-				{maxlength}
-			/>
-			<div class="whitespace-nowrap text-secondary">
-				{@render suffix?.()}
-			</div>
-		{/if}
-	</div>
-	{#if !valid}
-		{@render error?.()}
-	{/if}
-</div>
-
-<style>
-	input,
-	textarea {
-
-    width: 100%;
-
-    resize: none;
-
-    overflow: hidden;
-
-    outline: 2px solid transparent;
-
-    outline-offset: 2px
-}
-
-	div:not(:focus-within):hover {
-
-    border-color: #5750ee40
-}
-
-	div:focus-within {
-
-    --tw-border-opacity: 1;
-
-    border-color: rgb(87 80 238 / var(--tw-border-opacity, 1))
-}
-
-	.size-xs {
-
-    padding: 0.5rem;
-
-    font-size: 0.75rem;
-
-    line-height: 1rem
-}
-
-	.size-sm {
-
-    padding-left: 0.75rem;
-
-    padding-right: 0.75rem;
-
-    padding-top: 0.5rem;
-
-    padding-bottom: 0.5rem;
-
-    font-size: 0.875rem;
-
-    line-height: 1.25rem
-}
-
-	.size-md {
-
-    padding: 0.75rem;
-
-    font-size: 1rem;
-
-    line-height: 1.5rem
-}
-</style>

package/dist/components/input/Input.svelte.d.ts

@@ -1,21 +0,0 @@
-import type { Snippet } from 'svelte';
-declare const Input: import("svelte").Component<{
-    label?: string | null;
-    value: string | number;
-    type?: "text" | "password" | "textarea" | "number";
-    required?: boolean;
-    autofocus?: boolean;
-    placeholder?: string;
-    id?: string | undefined;
-    validator?: (a: string | number) => boolean;
-    onBlur?: (e: Event) => void;
-    onkeydown?: (e: KeyboardEvent) => void;
-    prefix?: Snippet<[any]>;
-    suffix?: Snippet;
-    error?: Snippet;
-    input?: HTMLInputElement | HTMLTextAreaElement;
-    maxlength?: number | null;
-    size?: "xs" | "sm" | "md";
-}, {}, "input" | "value">;
-type Input = ReturnType<typeof Input>;
-export default Input;

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

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

package/dist/components/input/index.js

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

package/dist/components/list/List.stories.svelte

@@ -1,97 +0,0 @@
-<script module lang="ts">
-	import List from './List.svelte';
-	import Tag from '../tag/Tag.svelte';
-	import { ArrowUpRight } from 'phosphor-svelte';
-	import { defineMeta } from '@storybook/addon-svelte-csf';
-
-	const { Story } = defineMeta({
-		component: List,
-		title: 'Design System/List',
-		tags: ['autodocs']
-	});
-
-	const items: { name: string; licenses: string; repository: string }[] = [
-		{ name: 'Formik', licenses: 'MIT', repository: 'somewhere' },
-		{ name: 'Formik', licenses: 'MIT', repository: 'somewhere' },
-		{ name: 'Formik', licenses: 'MIT', repository: 'somewhere' },
-		{ name: 'Formik', licenses: 'MIT', repository: 'somewhere' }
-	];
-</script>
-
-<Story name="Default" args={{}}>
-	<List {items}>
-		{#snippet item(item)}
-			<div class="flex min-h-2 flex-row gap-2">
-				<div class="flex flex-row justify-start gap-2">
-					<div class="max-w-56 truncate font-bold">
-						{item.name}
-					</div>
-					{#if item.licenses}
-						<Tag>
-							{item.licenses}
-						</Tag>
-					{/if}
-				</div>
-				<div class="flex grow flex-row justify-end gap-3">
-					{#if item.repository}
-						<div class="flex flex-row items-center gap-1">
-							<a
-								href={item.repository}
-								class="text-secondary"
-								target="_blank"
-								rel="noopener noreferrer"
-							>
-								Repository
-							</a>
-							<ArrowUpRight />
-						</div>
-					{/if}
-				</div>
-			</div>
-		{/snippet}
-	</List>
-</Story>
-
-<Story name="Compact" args={{ variant: 'compact' }}>
-	<List {items} variant="compact">
-		{#snippet item(item)}
-			<div class="flex min-h-2 flex-row gap-2">
-				<div class="flex flex-row justify-start gap-2">
-					<div class="max-w-56 truncate font-bold">
-						{item.name}
-					</div>
-					{#if item.licenses}
-						<Tag>
-							{item.licenses}
-						</Tag>
-					{/if}
-				</div>
-				<div class="flex grow flex-row justify-end gap-3">
-					{#if item.repository}
-						<div class="flex flex-row items-center gap-1">
-							<a
-								href={item.repository}
-								class="text-gray-700"
-								target="_blank"
-								rel="noopener noreferrer"
-							>
-								Repository
-							</a>
-							<ArrowUpRight />
-						</div>
-					{/if}
-				</div>
-			</div>
-		{/snippet}
-	</List>
-</Story>
-
-<Story name="Loading">
-	<List variant="compact" items={[{}, {}, {}]}>
-		{#snippet item({})}
-			<div class="flex h-8 w-full items-center">
-				<div class="skeleton h-6 w-full bg-neutral"></div>
-			</div>
-		{/snippet}
-	</List>
-</Story>

package/dist/components/list/List.stories.svelte.d.ts

@@ -1,19 +0,0 @@
-import List from './List.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;
-}
-declare const List: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
-type List = InstanceType<typeof List>;
-export default List;