@reshape-biotech/design-system 0.0.45 → 0.0.47

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

@@ -1,82 +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="Base">
-	<div class="flex flex-col gap-2">
-		<IconButton variant="primary">
-			<Plus />
-		</IconButton>
-		<IconButton variant="secondary">
-			<Plus />
-		</IconButton>
-		<IconButton variant="danger">
-			<Plus />
-		</IconButton>
-		<IconButton variant="transparent">
-			<Plus />
-		</IconButton>
-	</div>
-</Story>
-
-<Story name="Sizes">
-	<div class="flex flex-col gap-2">
-		<IconButton variant="secondary" size="xs">
-			<Plus />
-		</IconButton>
-		<IconButton variant="secondary" size="sm">
-			<Plus />
-		</IconButton>
-		<IconButton variant="secondary" size="md">
-			<Plus />
-		</IconButton>
-	</div>
-</Story>
-<Story name="Not rounded base">
-	<div class="flex flex-col gap-2">
-		<IconButton variant="primary" rounded={false}>
-			<Plus />
-		</IconButton>
-		<IconButton variant="secondary" rounded={false}>
-			<Plus />
-		</IconButton>
-		<IconButton variant="danger" rounded={false}>
-			<Plus />
-		</IconButton>
-		<IconButton variant="transparent" rounded={false}>
-			<Plus />
-		</IconButton>
-	</div>
-</Story>
-
-<Story name="Not rounded sizes">
-	<div class="flex flex-col gap-2">
-		<IconButton variant="secondary" size="xs" rounded={false}>
-			<Plus />
-		</IconButton>
-		<IconButton variant="secondary" size="sm" rounded={false}>
-			<Plus />
-		</IconButton>
-		<IconButton variant="secondary" size="md" rounded={false}>
-			<Plus />
-		</IconButton>
-	</div>
-</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,139 +0,0 @@
-<script lang="ts">
-	import type { Snippet } from 'svelte';
-	import { Spinner } from '../spinner/';
-
-	type Variant = 'primary' | 'secondary' | 'transparent' | 'danger';
-	interface Props {
-		variant?: Variant;
-		type?: 'button' | 'submit' | 'reset' | null | undefined;
-		loading?: boolean;
-		disabled?: boolean;
-		size?: 'xs' | 'sm' | 'md';
-		children?: Snippet;
-		onclick?: () => void;
-		tabindex?: number | undefined;
-		rounded?: boolean;
-	}
-
-	let {
-		variant = 'transparent',
-		type = 'button',
-		loading = false,
-		disabled = false,
-		size = 'sm',
-		children,
-		onclick,
-		tabindex,
-		rounded = true
-	}: Props = $props();
-
-	let sizeClass = $derived(`size-${size}`);
-	let variantClass = $derived(`color-${variant}`);
-</script>
-
-{#if disabled || loading}
-	<button
-		onclick={(e) => {
-			e.preventDefault();
-		}}
-		{type}
-		{disabled}
-		class="{sizeClass} {variantClass} disabled"
-		class:rounded
-	>
-		{#if loading}
-			<Spinner />
-		{:else}
-			{@render children?.()}
-		{/if}
-	</button>
-{:else}
-	<button {onclick} {type} {disabled} {tabindex} class="{sizeClass} {variantClass}" class:rounded>
-		{@render children?.()}
-	</button>
-{/if}
-
-<style>
-	button {
-    display: flex;
-    cursor: pointer;
-    align-items: center;
-    justify-content: center;
-    border-radius: 0.125rem
-}
-	.rounded {
-    border-radius: 9999px
-}
-	.disabled {
-    cursor: default
-}
-	.disabled:disabled {
-    background-color: #12192a0d;
-    --tw-text-opacity: 1;
-    color: rgb(136 140 148 / var(--tw-text-opacity, 1))
-}
-
-	.size-xs {
-    height: 1.5rem;
-    width: 1.5rem
-}
-
-	.size-xs :global(svg) {
-    height: 1rem;
-    width: 1rem
-}
-	.size-sm {
-    height: 2rem;
-    width: 2rem
-}
-	.size-sm :global(svg) {
-    height: 1rem;
-    width: 1rem
-}
-	.size-md {
-    height: 2.5rem;
-    width: 2.5rem
-}
-	.size-md :global(svg) {
-    height: 1.25rem;
-    width: 1.25rem
-}
-
-	.color-primary {
-    --tw-bg-opacity: 1;
-    background-color: rgb(87 80 238 / var(--tw-bg-opacity, 1));
-    --tw-text-opacity: 1;
-    color: rgb(255 255 255 / var(--tw-text-opacity, 1))
-}
-
-	.color-primary:hover {
-    --tw-bg-opacity: 1;
-    background-color: rgb(71 65 193 / var(--tw-bg-opacity, 1))
-}
-	.color-secondary {
-    background-color: #12192a0d;
-    --tw-text-opacity: 1;
-    color: rgb(18 25 42 / var(--tw-text-opacity, 1))
-}
-	.color-secondary:hover {
-    background-color: #12192A1A
-}
-	.color-transparent {
-    background-color: transparent;
-    --tw-text-opacity: 1;
-    color: rgb(18 25 42 / var(--tw-text-opacity, 1))
-}
-	.color-transparent:hover {
-    background-color: #12192A1A
-}
-	.color-danger {
-    --tw-bg-opacity: 1;
-    background-color: rgb(235 70 71 / var(--tw-bg-opacity, 1));
-    --tw-text-opacity: 1;
-    color: rgb(255 255 255 / var(--tw-text-opacity, 1))
-}
-	.color-danger:hover {
-    --tw-bg-opacity: 1;
-    background-color: rgb(191 57 58 / var(--tw-bg-opacity, 1))
-}
-</style>

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

@@ -1,16 +0,0 @@
-import type { Snippet } from 'svelte';
-type Variant = 'primary' | 'secondary' | 'transparent' | 'danger';
-interface Props {
-    variant?: Variant;
-    type?: 'button' | 'submit' | 'reset' | null | undefined;
-    loading?: boolean;
-    disabled?: boolean;
-    size?: 'xs' | 'sm' | 'md';
-    children?: Snippet;
-    onclick?: () => void;
-    tabindex?: number | undefined;
-    rounded?: boolean;
-}
-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';