@reshape-biotech/design-system 0.0.54 → 1.1.2

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

@@ -0,0 +1,15 @@
+import type { Snippet } from 'svelte';
+export { default as Root } from './components/stepper-root.svelte';
+export { default as Step } from './components/stepper-step.svelte';
+export type StepState = 'completed' | 'active' | 'future';
+export interface StepperRootProps {
+    children: Snippet;
+    class?: string;
+    currentStep?: string;
+}
+export interface StepperStepProps {
+    children: Snippet;
+    state?: StepState;
+    stepNumber: string;
+    class?: string;
+}

package/dist/components/stepper/index.js

@@ -0,0 +1,2 @@
+export { default as Root } from './components/stepper-root.svelte';
+export { default as Step } from './components/stepper-step.svelte';

package/dist/components/table/Table.stories.svelte

@@ -64,7 +64,7 @@
 	];
 </script>
 
-<Story name="Base">
+<Story name="Base" asChild>
 	<Table>
 		{#snippet children({ THead, TBody, Tr, Th, Td })}
 			<THead>

package/dist/components/table/components/Td.svelte

@@ -3,12 +3,13 @@
 
 	interface Props {
 		dataTestId?: string;
+		align?: 'left' | 'right';
 		children?: Snippet;
 	}
 
-	let { dataTestId = '', children }: Props = $props();
+	let { dataTestId = '', align = 'left', children }: Props = $props();
 </script>
 
-<td data-testid={dataTestId} class={`text-left text-sm font-normal`}>
+<td data-testid={dataTestId} class={`text-${align} text-sm font-normal`}>
 	{@render children?.()}
 </td>

package/dist/components/table/components/Td.svelte.d.ts

@@ -1,6 +1,7 @@
 import type { Snippet } from 'svelte';
 interface Props {
     dataTestId?: string;
+    align?: 'left' | 'right';
     children?: Snippet;
 }
 declare const Td: import("svelte").Component<Props, {}, "">;

package/dist/components/table/components/Tr.svelte

@@ -4,12 +4,13 @@
 	interface Props {
 		disabled?: boolean;
 		children?: Snippet;
+		class?: string;
 	}
 
-	let { disabled = false, children }: Props = $props();
+	let { disabled = false, children, class: className = '' }: Props = $props();
 </script>
 
-<tr class="my-2 border-static [&.disabled]:text-tertiary" class:disabled>
+<tr class={`border-static py-2 [&.disabled]:text-tertiary ${className}`} class:disabled>
 	{@render children?.()}
 </tr>
 

package/dist/components/table/components/Tr.svelte.d.ts

@@ -2,6 +2,7 @@ import type { Snippet } from 'svelte';
 interface Props {
     disabled?: boolean;
     children?: Snippet;
+    class?: string;
 }
 declare const Tr: import("svelte").Component<Props, {}, "">;
 type Tr = ReturnType<typeof Tr>;

package/dist/components/tabs/Tabs.stories.svelte

@@ -11,7 +11,7 @@
 	let activeTab = 'tab-1';
 </script>
 
-<Story name="Primary">
+<Story name="Primary" asChild>
 	<Tabs>
 		{#snippet children({ Tabs, Tab, Content })}
 			<Tabs>

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

@@ -25,22 +25,22 @@
 	];
 </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" />
@@ -49,23 +49,23 @@
 	</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">
+<Story name="Variants" asChild>
 	{#each variants as variant}
 		<div class="w-fit">
 			<Tag variant={variant as any}>{variant}</Tag>
@@ -73,7 +73,7 @@
 	{/each}
 </Story>
 
-<Story name="Button variants">
+<Story name="Button variants" asChild>
 	{#each variants as variant}
 		<div class="w-fit">
 			<Tag variant={variant as any} onclick={() => {}}>Click me</Tag>

package/dist/components/tag/Tag.svelte

@@ -106,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/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

@@ -10,7 +10,7 @@
 	});
 </script>
 
-<Story name="States">
+<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">
@@ -29,7 +29,7 @@
 	</div>
 </Story>
 
-<Story name="Variants">
+<Story name="Variants" asChild>
 	<div class="flex flex-col gap-4">
 		<div class="flex gap-8">
 			<div class="flex flex-col gap-2">
@@ -60,7 +60,7 @@
 	</div>
 </Story>
 
-<Story name="Sizes">
+<Story name="Sizes" asChild>
 	<div class="flex gap-8">
 		<div class="flex flex-col items-center gap-2">
 			<p class="text-sm">XS</p>
@@ -109,7 +109,7 @@
 	</div>
 </Story>
 
-<Story name="Rounded vs Square">
+<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>
@@ -136,7 +136,7 @@
 	</div>
 </Story>
 
-<Story name="Primary Inverse Example">
+<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">
@@ -155,7 +155,7 @@
 	</div>
 </Story>
 
-<Story name="Disabled and Loading">
+<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>

package/dist/components/tooltip/Tooltip.stories.svelte

@@ -9,7 +9,7 @@
 	});
 </script>
 
-<Story name="Base">
+<Story name="Base" asChild>
 	<div class="flex justify-center">
 		<Tooltip>
 			{#snippet trigger()}
@@ -22,7 +22,7 @@
 	</div>
 </Story>
 
-<Story name="Force Open">
+<Story name="Force Open" asChild>
 	<div class="flex justify-center">
 		<Tooltip forceOpen={true}>
 			{#snippet trigger()}
@@ -35,7 +35,7 @@
 	</div>
 </Story>
 
-<Story name="No Arrow">
+<Story name="No Arrow" asChild>
 	<div class="flex justify-center">
 		<Tooltip showArrow={false}>
 			{#snippet trigger()}
@@ -48,7 +48,7 @@
 	</div>
 </Story>
 
-<Story name="Different Placements">
+<Story name="Different Placements" asChild>
 	<div class="flex justify-center gap-4 py-8">
 		<div>
 			<Tooltip placement="top">
@@ -93,7 +93,7 @@
 	</div>
 </Story>
 
-<Story name="Custom Content">
+<Story name="Custom Content" asChild>
 	<div class="flex h-28 items-end justify-center">
 		<Tooltip>
 			{#snippet trigger()}
@@ -109,7 +109,7 @@
 	</div>
 </Story>
 
-<Story name="Custom Content Forced Open">
+<Story name="Custom Content Forced Open" asChild>
 	<div class="flex h-28 items-end justify-center">
 		<Tooltip forceOpen={true}>
 			{#snippet trigger()}

package/dist/components/tooltip/Tooltip.svelte

@@ -28,7 +28,7 @@
 	open={forceOpen}
 	arrow={showArrow}
 	{placement}
-	class={`${tooltipClass} rounded bg-base-inverse px-2 py-1 text-sm font-normal text-primary-inverse shadow`}
+	class={`${tooltipClass} max-w-xs text-wrap rounded bg-base-inverse px-2 py-1 text-left text-sm font-normal text-primary-inverse shadow`}
 >
 	{@render content?.()}
 </Tooltip>

package/dist/index.d.ts

@@ -1,5 +1,6 @@
 export * from './components/activity/';
 export * from './components/avatar/';
+export * from './components/card/';
 export * from './components/banner/';
 export * from './components/button/';
 export * as Collapsible from './components/collapsible/';
@@ -19,22 +20,28 @@ export * from './components/list/';
 export * from './components/logo/';
 export * from './components/markdown/';
 export * from './components/modal/';
+export * from './components/manual-cfu-counter/';
 export * from './components/notification-popup/';
 export * from './components/pill/';
 export * from './components/progress-circle/';
+export * from './components/required-status-indicator/';
 export * from './components/segmented-control-buttons/';
 export * from './components/select/';
+export * as SelectNew from './components/select-new/';
 export * from './components/skeleton-loader/';
 export * from './components/slider/';
 export * from './components/spinner/';
 export * from './components/stat-card/';
 export * from './components/status-badge/';
+export * from './components/stepper/';
 export * from './components/table/';
 export * from './components/tabs/';
 export * from './components/tag/';
 export * from './components/toggle-icon-button/';
+export * from './components/textarea/index';
 export * from './components/tooltip/';
 export * from './components/toggle/';
 export * from './components/checkbox/';
+export * from './components/sjsf-wrappers/';
 export { tokens } from './tokens';
 import './app.css';

package/dist/index.js

@@ -1,6 +1,7 @@
 // Components
 export * from './components/activity/';
 export * from './components/avatar/';
+export * from './components/card/';
 export * from './components/banner/';
 export * from './components/button/';
 export * as Collapsible from './components/collapsible/';
@@ -20,23 +21,29 @@ export * from './components/list/';
 export * from './components/logo/';
 export * from './components/markdown/';
 export * from './components/modal/';
+export * from './components/manual-cfu-counter/';
 export * from './components/notification-popup/';
 export * from './components/pill/';
 export * from './components/progress-circle/';
+export * from './components/required-status-indicator/';
 export * from './components/segmented-control-buttons/';
 export * from './components/select/';
+export * as SelectNew from './components/select-new/';
 export * from './components/skeleton-loader/';
 export * from './components/slider/';
 export * from './components/spinner/';
 export * from './components/stat-card/';
 export * from './components/status-badge/';
+export * from './components/stepper/';
 export * from './components/table/';
 export * from './components/tabs/';
 export * from './components/tag/';
 export * from './components/toggle-icon-button/';
+export * from './components/textarea/index';
 export * from './components/tooltip/';
 export * from './components/toggle/';
 export * from './components/checkbox/';
+export * from './components/sjsf-wrappers/';
 // Styles and Tokens
 export { tokens } from './tokens';
 import './app.css';