@reshape-biotech/design-system 0.0.52 → 1.1.1

package/dist/components/tag/Tag.stories.svelte

@@ -8,24 +8,39 @@
 		title: 'Design System/Tag',
 		tags: ['autodocs']
 	});
+
+	const variants = [
+		'default',
+		'transparent',
+		'default-inverse',
+		'orange',
+		'sky',
+		'pink',
+		'lime',
+		'lilac',
+		'pear',
+		'blue',
+		'accent',
+		'warning'
+	];
 </script>
 
-<Story name="Default">
+<Story name="Default" asChild>
 	<div class="w-fit">
 		<Tag>Default</Tag>
 	</div>
 </Story>
-<Story name="Default small">
+<Story name="Default small" asChild>
 	<div class="w-fit">
 		<Tag variant="default" size="sm">Default</Tag>
 	</div>
 </Story>
-<Story name="Default onclick">
+<Story name="Default onclick" asChild>
 	<div class="w-fit">
 		<Tag onclick={() => {}}>Default</Tag>
 	</div>
 </Story>
-<Story name="Default icon onclick">
+<Story name="Default icon onclick" asChild>
 	<div class="w-fit">
 		<Tag onclick={() => {}}>
 			<Icon iconName="Folder" />
@@ -34,18 +49,34 @@
 	</div>
 </Story>
 
-<Story name="Transparent">
+<Story name="Transparent" asChild>
 	<div class="w-fit">
 		<Tag variant="transparent">Transparent</Tag>
 	</div>
 </Story>
-<Story name="Transparent small">
+<Story name="Transparent small" asChild>
 	<div class="w-fit">
 		<Tag variant="transparent" size="sm">Transparent</Tag>
 	</div>
 </Story>
-<Story name="Transparent onclick">
+<Story name="Transparent onclick" asChild>
 	<div class="w-fit">
 		<Tag variant="transparent" onclick={() => {}}>Transparent</Tag>
 	</div>
 </Story>
+
+<Story name="Variants" asChild>
+	{#each variants as variant}
+		<div class="w-fit">
+			<Tag variant={variant as any}>{variant}</Tag>
+		</div>
+	{/each}
+</Story>
+
+<Story name="Button variants" asChild>
+	{#each variants as variant}
+		<div class="w-fit">
+			<Tag variant={variant as any} onclick={() => {}}>Click me</Tag>
+		</div>
+	{/each}
+</Story>

package/dist/components/tag/Tag.svelte

@@ -4,7 +4,20 @@
 
 	interface Props {
 		children: Snippet;
-		variant?: 'default' | 'outline' | 'transparent' | 'default-inverse';
+		variant?:
+			| 'default'
+			| 'outline'
+			| 'transparent'
+			| 'default-inverse'
+			| 'orange'
+			| 'sky'
+			| 'pink'
+			| 'lime'
+			| 'lilac'
+			| 'pear'
+			| 'blue'
+			| 'accent'
+			| 'warning';
 		size?: 'sm' | 'md';
 		tooltip?: string;
 		onclick?: (event: MouseEvent) => void;
@@ -30,14 +43,32 @@
 		default: 'bg-neutral text-primary',
 		outline: 'bg-transparent text-secondary border',
 		transparent: 'bg-transparent text-secondary',
-		'default-inverse': 'bg-base-inverse text-secondary-inverse'
+		'default-inverse': 'bg-base-inverse text-secondary-inverse',
+		orange: 'bg-orange text-orange',
+		sky: 'bg-sky text-sky',
+		pink: 'bg-pink text-pink',
+		lime: 'bg-lime text-lime',
+		lilac: 'bg-lilac text-lilac',
+		pear: 'bg-pear text-pear',
+		blue: 'bg-blue text-blue',
+		accent: 'bg-accent text-accent',
+		warning: 'bg-warning text-warning'
 	};
 
 	const buttonClassVariants = {
 		default: 'hover:bg-neutral-hover',
 		outline: 'hover:bg-neutral hover:text-primary',
 		transparent: 'hover:bg-neutral hover:text-primary',
-		'default-inverse': 'hover:bg-base-inverse hover:text-secondary-inverse'
+		'default-inverse': 'hover:bg-base-inverse hover:text-secondary-inverse',
+		orange: 'hover:bg-orange-hover hover:text-orange-hover',
+		sky: 'hover:bg-sky-hover hover:text-sky-hover',
+		pink: 'hover:bg-pink-hover hover:text-pink-hover',
+		lime: 'hover:bg-lime-hover hover:text-lime-hover',
+		lilac: 'hover:bg-lilac-hover hover:text-lilac-hover',
+		pear: 'hover:bg-pear-hover hover:text-pear-hover',
+		blue: 'hover:bg-blue-hover hover:text-blue-hover',
+		accent: 'hover:bg-accent-hover hover:text-accent-hover',
+		warning: 'hover:bg-warning-hover hover:text-warning-hover'
 	};
 
 	let variantClassName = $derived(variants[variant]);
@@ -75,30 +106,12 @@
 
 <style>
 	.outer {
-
     display: flex;
-
     align-items: center;
-
     gap: 0.5rem;
-
     overflow: hidden;
-
     text-overflow: ellipsis;
-
     white-space: nowrap;
-
     border-radius: 0.25rem
 }
-
-	svg {
-
-    height: 1rem;
-
-    width: 1rem;
-
-    --tw-text-opacity: 1;
-
-    color: rgb(136 140 148 / var(--tw-text-opacity, 1))
-}
 </style>

package/dist/components/tag/Tag.svelte.d.ts

@@ -1,7 +1,7 @@
 import type { Snippet } from 'svelte';
 interface Props {
     children: Snippet;
-    variant?: 'default' | 'outline' | 'transparent' | 'default-inverse';
+    variant?: 'default' | 'outline' | 'transparent' | 'default-inverse' | 'orange' | 'sky' | 'pink' | 'lime' | 'lilac' | 'pear' | 'blue' | 'accent' | 'warning';
     size?: 'sm' | 'md';
     tooltip?: string;
     onclick?: (event: MouseEvent) => void;

package/dist/components/textarea/Textarea.stories.svelte

@@ -0,0 +1,97 @@
+<script module lang="ts">
+	import { defineMeta } from '@storybook/addon-svelte-csf';
+	import Textarea from './Textarea.svelte';
+
+	const { Story } = defineMeta({
+		title: 'Design System/Textarea',
+		component: Textarea,
+		argTypes: {
+			value: { control: 'text' },
+			placeholder: { control: 'text' },
+			size: {
+				control: { type: 'select' },
+				options: ['xs', 'sm', 'md', 'lg', 'dynamic']
+			},
+			required: { control: 'boolean' },
+			readonly: { control: 'boolean' },
+			autofocus: { control: 'boolean' },
+			error: { control: 'object' },
+			maxlength: { control: 'number' }
+		}
+	});
+</script>
+
+<Story
+	name="Default"
+	args={{
+		value: 'This is some default text.',
+		placeholder: 'Enter text here...',
+		size: 'md'
+	}}
+/>
+
+<Story
+	name="Empty and Required"
+	args={{
+		value: '',
+		placeholder: 'This field is required',
+		required: true,
+		size: 'sm'
+	}}
+/>
+
+<Story
+	name="With Max Length"
+	args={{
+		value: 'Short text',
+		placeholder: 'Max 20 chars',
+		maxlength: 20,
+		size: 'dynamic'
+	}}
+/>
+<Story
+	name="With Label"
+	args={{
+		value: 'Short text',
+		placeholder: 'Max 20 chars',
+		maxlength: 20,
+		size: 'dynamic',
+		label: 'Label'
+	}}
+/>
+
+<Story
+	name="Readonly"
+	args={{
+		value: 'This text cannot be edited.',
+		readonly: true,
+		size: 'md'
+	}}
+/>
+
+<Story name="Invalid State" asChild>
+	<Textarea size="md" placeholder="Error here" value="This input is invalid.">
+		{#snippet error()}
+			<p class="text-danger">This is an error</p>
+		{/snippet}
+	</Textarea>
+</Story>
+
+<Story name="Autofocus" args={{ placeholder: 'I should be focused', autofocus: true }} />
+
+<!-- Story to demonstrate auto-resizing. Requires interaction -->
+<Story
+	name="Auto Resizing"
+	args={{
+		value: 'Initial line.\nAnother line to start with.',
+		placeholder: 'Type here...',
+		size: 'dynamic'
+	}}
+>
+	{#snippet template(args)}
+		<div class="w-96">
+			<p class="mb-2 text-sm">Type or paste multiple lines to see it resize (max height 200px):</p>
+			<Textarea {...args} />
+		</div>
+	{/snippet}
+</Story>

package/dist/components/textarea/Textarea.stories.svelte.d.ts

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

package/dist/components/textarea/Textarea.svelte

@@ -0,0 +1,94 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import type { HTMLTextareaAttributes } from 'svelte/elements';
+
+	interface TextareaProps extends HTMLTextareaAttributes {
+		oninput?: (event: Event) => void;
+		onblur?: (event: Event) => void;
+		onkeydown?: (event: KeyboardEvent) => void;
+		input?: HTMLTextAreaElement;
+		size?: 'xs' | 'sm' | 'md' | 'lg' | 'dynamic';
+		label?: string;
+		error?: Snippet;
+		placeholder?: string;
+	}
+
+	let {
+		value = $bindable(),
+		oninput = () => {},
+		onblur = () => {},
+		onkeydown = () => {},
+		input = $bindable(),
+		label,
+		placeholder,
+		error,
+		id,
+		size = 'md',
+		class: className,
+		...rest
+	}: TextareaProps = $props();
+
+	const textareaId = crypto.randomUUID();
+	const inputId = $derived(id ?? textareaId);
+
+	function handleInputInternal(event: Event) {
+		if (rest.readonly) return;
+		const target = event.target as HTMLTextAreaElement;
+		value = target.value;
+		autoResizeTextarea(target);
+		oninput(event);
+	}
+
+	function autoResizeTextarea(textarea: HTMLTextAreaElement) {
+		const maxHeight = 200;
+		textarea.style.height = 'auto';
+		if (textarea.scrollHeight < maxHeight) {
+			textarea.style.height = `${textarea.scrollHeight}px`;
+			textarea.style.overflowY = 'hidden';
+		} else {
+			textarea.style.height = `${maxHeight}px`;
+			textarea.style.overflowY = 'auto';
+		}
+	}
+
+	function handleBlurInternal(event: Event) {
+		onblur(event);
+	}
+
+	export function focus() {
+		input?.focus();
+	}
+
+	$effect(() => {
+		if (input && value) {
+			autoResizeTextarea(input);
+		}
+	});
+</script>
+
+{#if label}
+	<label for={inputId} class="block px-1 py-2 text-sm text-secondary">
+		{label}
+		{#if rest.required}
+			<span class="ml-0.5 text-danger">*</span>
+		{/if}
+	</label>
+{/if}
+
+<textarea
+	id={inputId}
+	class="flex w-full items-center gap-1 rounded-lg border border-input bg-surface px-3 py-2 shadow-input focus-within:border-focus hover:border-hover {className ??
+		''}"
+	class:!border-error={error}
+	class:has-text={value}
+	class:has-placeholder={placeholder}
+	{placeholder}
+	oninput={handleInputInternal}
+	onblur={handleBlurInternal}
+	bind:this={input}
+	{value}
+	{...rest}
+	{onkeydown}
+></textarea>
+
+{@render error?.()}

package/dist/components/textarea/Textarea.svelte.d.ts

@@ -0,0 +1,17 @@
+import type { Snippet } from 'svelte';
+import type { HTMLTextareaAttributes } from 'svelte/elements';
+interface TextareaProps extends HTMLTextareaAttributes {
+    oninput?: (event: Event) => void;
+    onblur?: (event: Event) => void;
+    onkeydown?: (event: KeyboardEvent) => void;
+    input?: HTMLTextAreaElement;
+    size?: 'xs' | 'sm' | 'md' | 'lg' | 'dynamic';
+    label?: string;
+    error?: Snippet;
+    placeholder?: string;
+}
+declare const Textarea: import("svelte").Component<TextareaProps, {
+    focus: () => void;
+}, "value" | "input">;
+type Textarea = ReturnType<typeof Textarea>;
+export default Textarea;

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

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

package/dist/components/textarea/index.js

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

package/dist/components/toggle/Toggle.stories.svelte

@@ -10,6 +10,6 @@
 	});
 </script>
 
-<Story name="Base">
+<Story name="Base" asChild>
 	<Toggle id="toggle-1" />
 </Story>

package/dist/components/toggle/Toggle.svelte

@@ -3,13 +3,14 @@
 		value?: boolean;
 		onclick?: (event?: MouseEvent) => void;
 		id: string;
+		'data-testid'?: string;
 	}
 
-	let { value = $bindable(false), onclick, id }: Props = $props();
+	let { value = $bindable(false), onclick, id, 'data-testid': testId }: Props = $props();
 </script>
 
 <label class="switch">
-	<input type="checkbox" bind:checked={value} {onclick} {id} />
+	<input type="checkbox" bind:checked={value} {onclick} {id} data-testid={testId} />
 	<span class="slider round"></span>
 </label>
 

package/dist/components/toggle/Toggle.svelte.d.ts

@@ -2,6 +2,7 @@ interface Props {
     value?: boolean;
     onclick?: (event?: MouseEvent) => void;
     id: string;
+    'data-testid'?: string;
 }
 declare const Toggle: import("svelte").Component<Props, {}, "value">;
 type Toggle = ReturnType<typeof Toggle>;

package/dist/components/toggle-icon-button/ToggleIconButton.stories.svelte

@@ -0,0 +1,173 @@
+<script module lang="ts">
+	import { defineMeta } from '@storybook/addon-svelte-csf';
+	import ToggleIconButton from './ToggleIconButton.svelte';
+	import { Icon } from '../icons';
+
+	const { Story } = defineMeta({
+		component: ToggleIconButton,
+		title: 'Design System/ToggleIconButton',
+		tags: ['autodocs']
+	});
+</script>
+
+<Story name="States" asChild>
+	<div class="flex flex-col gap-4">
+		<div class="bg-neutral-dark flex gap-4 p-4">
+			<div class="flex flex-col items-center gap-2">
+				<p class="text-sm">Normal</p>
+				<ToggleIconButton variant="primary-inverse">
+					<Icon iconName="DownloadSimple" />
+				</ToggleIconButton>
+			</div>
+			<div class="flex flex-col items-center gap-2">
+				<p class="text-sm">Active</p>
+				<ToggleIconButton variant="primary-inverse" isActive={true}>
+					<Icon iconName="DownloadSimple" />
+				</ToggleIconButton>
+			</div>
+		</div>
+	</div>
+</Story>
+
+<Story name="Variants" asChild>
+	<div class="flex flex-col gap-4">
+		<div class="flex gap-8">
+			<div class="flex flex-col gap-2">
+				<p class="text-sm">Primary Inverse</p>
+				<div class="flex gap-4">
+					<ToggleIconButton variant="primary-inverse">
+						<Icon iconName="DownloadSimple" />
+					</ToggleIconButton>
+					<ToggleIconButton variant="primary-inverse" isActive={true}>
+						<Icon iconName="DownloadSimple" />
+					</ToggleIconButton>
+				</div>
+			</div>
+		</div>
+		<div class="flex gap-8">
+			<div class="flex flex-col gap-2">
+				<p class="text-sm">Secondary</p>
+				<div class="flex gap-4">
+					<ToggleIconButton variant="secondary">
+						<Icon iconName="DownloadSimple" />
+					</ToggleIconButton>
+					<ToggleIconButton variant="secondary" isActive={true}>
+						<Icon iconName="DownloadSimple" />
+					</ToggleIconButton>
+				</div>
+			</div>
+		</div>
+	</div>
+</Story>
+
+<Story name="Sizes" asChild>
+	<div class="flex gap-8">
+		<div class="flex flex-col items-center gap-2">
+			<p class="text-sm">XS</p>
+			<div class="flex gap-4">
+				<ToggleIconButton variant="primary-inverse" size="xs">
+					<Icon iconName="DownloadSimple" />
+				</ToggleIconButton>
+				<ToggleIconButton variant="primary-inverse" size="xs" isActive={true}>
+					<Icon iconName="DownloadSimple" />
+				</ToggleIconButton>
+			</div>
+		</div>
+		<div class="flex flex-col items-center gap-2">
+			<p class="text-sm">SM</p>
+			<div class="flex gap-4">
+				<ToggleIconButton variant="primary-inverse" size="sm">
+					<Icon iconName="DownloadSimple" />
+				</ToggleIconButton>
+				<ToggleIconButton variant="primary-inverse" size="sm" isActive={true}>
+					<Icon iconName="DownloadSimple" />
+				</ToggleIconButton>
+			</div>
+		</div>
+		<div class="flex flex-col items-center gap-2">
+			<p class="text-sm">MD</p>
+			<div class="flex gap-4">
+				<ToggleIconButton variant="primary-inverse" size="md">
+					<Icon iconName="DownloadSimple" />
+				</ToggleIconButton>
+				<ToggleIconButton variant="primary-inverse" size="md" isActive={true}>
+					<Icon iconName="DownloadSimple" />
+				</ToggleIconButton>
+			</div>
+		</div>
+		<div class="flex flex-col items-center gap-2">
+			<p class="text-sm">LG</p>
+			<div class="flex gap-4">
+				<ToggleIconButton variant="primary-inverse" size="lg">
+					<Icon iconName="DownloadSimple" />
+				</ToggleIconButton>
+				<ToggleIconButton variant="primary-inverse" size="lg" isActive={true}>
+					<Icon iconName="DownloadSimple" />
+				</ToggleIconButton>
+			</div>
+		</div>
+	</div>
+</Story>
+
+<Story name="Rounded vs Square" asChild>
+	<div class="flex gap-8">
+		<div class="flex flex-col items-center gap-2">
+			<p class="text-sm">Rounded</p>
+			<div class="flex gap-4">
+				<ToggleIconButton variant="primary-inverse" rounded>
+					<Icon iconName="DownloadSimple" />
+				</ToggleIconButton>
+				<ToggleIconButton variant="primary-inverse" rounded isActive={true}>
+					<Icon iconName="DownloadSimple" />
+				</ToggleIconButton>
+			</div>
+		</div>
+		<div class="flex flex-col items-center gap-2">
+			<p class="text-sm">Square</p>
+			<div class="flex gap-4">
+				<ToggleIconButton variant="primary-inverse" rounded={false}>
+					<Icon iconName="DownloadSimple" />
+				</ToggleIconButton>
+				<ToggleIconButton variant="primary-inverse" rounded={false} isActive={true}>
+					<Icon iconName="DownloadSimple" />
+				</ToggleIconButton>
+			</div>
+		</div>
+	</div>
+</Story>
+
+<Story name="Primary Inverse Example" asChild>
+	<div class="bg-neutral-dark p-8">
+		<div class="flex gap-8">
+			<div class="flex flex-col items-center gap-2">
+				<p class="text-neutral-light text-sm">Normal</p>
+				<ToggleIconButton variant="primary-inverse">
+					<Icon iconName="DownloadSimple" />
+				</ToggleIconButton>
+			</div>
+			<div class="flex flex-col items-center gap-2">
+				<p class="text-neutral-light text-sm">Active</p>
+				<ToggleIconButton variant="primary-inverse" isActive={true}>
+					<Icon iconName="DownloadSimple" />
+				</ToggleIconButton>
+			</div>
+		</div>
+	</div>
+</Story>
+
+<Story name="Disabled and Loading" asChild>
+	<div class="flex gap-8">
+		<div class="flex flex-col items-center gap-2">
+			<p class="text-sm">Disabled</p>
+			<ToggleIconButton disabled>
+				<Icon iconName="DownloadSimple" />
+			</ToggleIconButton>
+		</div>
+		<div class="flex flex-col items-center gap-2">
+			<p class="text-sm">Loading</p>
+			<ToggleIconButton loading>
+				<Icon iconName="DownloadSimple" />
+			</ToggleIconButton>
+		</div>
+	</div>
+</Story>

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

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