@reshape-biotech/design-system 0.0.45 → 0.0.48

package/dist/app.css

@@ -10,89 +10,101 @@
 		src: url('/fonts/MDSystemMono-Regular.woff2') format('woff2');
 	}
 	@font-face {
-		font-family: 'MD System';
+		font-family: 'af Another Sans';
 		font-style: normal;
 		font-weight: 400;
-		src: url('/fonts/MDSystem-Regular.woff2') format('woff2');
+		src: url('/fonts/afAnotherSans-Regular.woff2') format('woff2');
 	}
 	@font-face {
-		font-family: 'MD System';
-		src: url('/fonts/MDSystem-Medium.woff2') format('woff2');
-		font-weight: 500;
+		font-family: 'af Another Sans';
 		font-style: normal;
+		font-weight: 500;
+		src: url('/fonts/afAnotherSans-Medium.woff2') format('woff2');
 	}
 	@font-face {
-		font-family: 'MD System';
+		font-family: 'af Another Sans';
 		font-style: normal;
 		font-weight: 600;
-		src: url('/fonts/MDSystem-Semibold.woff2') format('woff2');
+		src: url('/fonts/afAnotherSans-SemiBold.woff2') format('woff2');
 	}
+
 	body {
-		background-color: theme('backgroundColor.base');
+		background-color: theme('backgroundColor.surface');
 		color: theme('textColor.primary');
-		font-family: 'MD System', sans-serif;
+		font-family: 'af Another Sans', sans-serif;
 		font-style: normal;
+		font-feature-settings: 'ss01' on;
+		font-variant-numeric: lining-nums tabular-nums;
 		font-weight: 400;
-		line-height: 140%;
-		font-size: 16px;
+		font-size: 0.875rem;
+		line-height: 1.25rem;
+		letter-spacing: 0.01em;
 	}
 
 	a {
 		color: theme('textColor.accent');
-		font-family: 'MD System', sans-serif;
-		font-size: 14px;
 		font-style: normal;
-		font-weight: 400;
-		line-height: 140%; /* 19.6px */
 	}
 	a:hover {
 		text-decoration: underline;
 	}
 
+	strong {
+		font-weight: 600;
+	}
+
 	h1 {
-		font-size: 80px;
+		/* text-7xl */
+		font-size: 4.5rem;
 		font-style: normal;
 		font-weight: 600;
-		line-height: 100%; /* 80px */
-		letter-spacing: -1.6px;
+		line-height: 4.5rem;
+		letter-spacing: -0.1em;
 	}
 
 	h2 {
-		font-size: 48px;
+		/* text-5xl */
+		font-size: 3rem;
 		font-style: normal;
 		font-weight: 600;
-		line-height: 130%; /* 62.4px */
-		letter-spacing: -0.96px;
+		line-height: 3rem;
+		letter-spacing: -0.05em;
 	}
 
 	h3 {
-		font-size: 28px;
+		/* text-2xl */
+		font-size: 1.5rem;
 		font-style: normal;
 		font-weight: 600;
-		line-height: 130%; /* 36.4px */
-		letter-spacing: -0.56px;
+		line-height: 1.75rem;
+		letter-spacing: -0.025em;
 	}
 
 	h4 {
-		font-size: 20px;
+		/* text-xl */
+		font-size: 1.25rem;
+		line-height: 1.75rem;
 		font-style: normal;
 		font-weight: 600;
-		line-height: 130%; /* 26px */
-		letter-spacing: -0.4px;
+		letter-spacing: -0.01em;
 	}
 
 	h5 {
-		font-size: 16px;
+		/* text-base */
+		font-size: 1rem;
+		line-height: 1.5rem;
 		font-style: normal;
 		font-weight: 600;
-		line-height: 130%; /* 20.8px */
+		letter-spacing: 0;
 	}
 
 	h6 {
-		font-size: 14px;
+		/* text-sm */
+		font-size: 0.875rem;
+		line-height: 1.25rem;
 		font-style: normal;
 		font-weight: 600;
-		line-height: 130%; /* 18.2px */
+		letter-spacing: 0;
 	}
 }
 

package/dist/components/activity/Activity.stories.svelte

@@ -0,0 +1,100 @@
+<script module lang="ts">
+	import Button from '../button/Button.svelte';
+	import Activity from './Activity.svelte';
+	import * as Collapsible from '../collapsible/index';
+	import { Eye } from 'phosphor-svelte';
+
+	import { defineMeta } from '@storybook/addon-svelte-csf';
+	const { Story } = defineMeta({
+		component: Activity,
+		title: 'Design System/Activity',
+		tags: ['autodocs']
+	});
+
+	let activities = $state([
+		{
+			icon: 'add' as const,
+			label: 'Job created',
+			timestamp: '12 Sep 2025, 9:59',
+			author: 'Ella Roth'
+		},
+		{
+			icon: 'edit' as const,
+			label: 'Sample ID edited',
+			from: 'Sample123',
+			to: 'Sample456',
+			timestamp: '5 Sep 2025, 12:05',
+			author: 'Ella Roth'
+		},
+		{
+			icon: 'success' as const,
+			label: 'Job finished',
+			timestamp: '14 Aug 2025, 13:05'
+		},
+		{
+			icon: 'pause' as const,
+			label: 'Job paused',
+			timestamp: '4 Aug 2025, 13:05',
+			author: 'Bob Vance'
+		},
+		{
+			icon: 'stop' as const,
+			label: 'Some label that just happened to be very long so it will probably wrap in most cases',
+			timestamp: '4 Aug 2025, 13:05',
+			author: 'Michael Scott'
+		}
+	]);
+
+	const fetchedMoreActivities = () => {
+		const index = Math.floor(Math.random() * (activities.length - 1));
+		activities = [...activities, activities[index]];
+	};
+</script>
+
+<Story name="Collapsible activity">
+	<Collapsible.Root>
+		<Collapsible.Trigger class="w-full pb-4">
+			<h6>Activity</h6>
+		</Collapsible.Trigger>
+
+		<Collapsible.Content class="flex flex-col items-center gap-3">
+			<div class="flex flex-col text-sm">
+				{#each activities as activity}
+					<Activity {activity} />
+				{/each}
+			</div>
+			<Button
+				onClick={fetchedMoreActivities}
+				variant="outline"
+				size="sm"
+				class="icon-secondary w-36 rounded-full"
+			>
+				<Eye />
+				<p>Show more</p>
+			</Button>
+		</Collapsible.Content>
+	</Collapsible.Root>
+</Story>
+
+<Story name="Single activity">
+	<Activity activity={{ icon: 'delete', label: 'Project deleted', timestamp: '2 Oct, 1980' }} />
+</Story>
+
+<Story name="Few activities">
+	<Activity
+		activity={{
+			icon: 'pause',
+			label: 'Project paused',
+			timestamp: '2 Oct, 1999',
+			author: 'Dwight'
+		}}
+	/>
+	<Activity
+		activity={{
+			icon: 'add',
+			label: 'Project created',
+			timestamp: '2 Oct, 1999',
+			author: 'Dwight'
+		}}
+	/>
+</Story>

package/dist/components/activity/Activity.stories.svelte.d.ts

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

package/dist/components/activity/Activity.svelte

@@ -0,0 +1,80 @@
+<script lang="ts">
+	import { DateTime } from 'luxon';
+	import { Plus, CheckFat, Pencil, Play, Pause, Stop, Trash, WarningCircle } from 'phosphor-svelte';
+	import type { Component } from 'svelte';
+
+	type ActivityIcon = 'add' | 'edit' | 'success' | 'start' | 'pause' | 'stop' | 'delete' | 'failed';
+
+	type Activity = {
+		activity_type?: string;
+		icon: ActivityIcon;
+		label: string;
+		timestamp: string;
+		author?: string | null;
+		field?: string | null;
+		previous_value?: string | null;
+		value?: string | null;
+	};
+
+	type Props = {
+		activity: Activity;
+		class?: string;
+	};
+
+	const ACTIVITY_ICONS: Record<ActivityIcon, Component> = {
+		add: Plus,
+		edit: Pencil,
+		success: CheckFat,
+		start: Play,
+		pause: Pause,
+		stop: Stop,
+		delete: Trash,
+		failed: WarningCircle
+	};
+
+	function formatDateTime(timestamp: string): string {
+		try {
+			const dateTime = DateTime.fromISO(timestamp);
+
+			if (dateTime.isValid) {
+				return dateTime.toLocaleString(DateTime.DATETIME_MED, {
+					locale: navigator.language ?? 'en-US'
+				});
+			}
+
+			return timestamp;
+		} catch (err) {
+			return timestamp;
+		}
+	}
+
+	let { class: className = '', activity }: Props = $props();
+</script>
+
+<div class={`group flex items-stretch gap-3 ${className}`}>
+	<div class="flex min-h-12 flex-col items-center gap-1.5">
+		<div class="w-0.5 grow bg-neutral group-first:invisible"></div>
+		<div
+			class="flex h-5 w-5 shrink-0 items-center justify-center rounded bg-neutral p-0.5 text-secondary"
+		>
+			<svelte:component this={ACTIVITY_ICONS[activity.icon]} />
+		</div>
+		<div class="w-0.5 grow bg-neutral group-last:invisible"></div>
+	</div>
+	<div class="flex items-center py-4">
+		<div class="text-secondary">
+			<span class="text-primary">{activity.label}</span>
+			{#if activity.previous_value}
+				<span> from <span class="text-primary">{activity.previous_value}</span></span>
+			{/if}
+			{#if activity.value}
+				<span> to <span class="text-primary">{activity.value}</span></span>
+			{/if}
+			<span class="px-0.5">⸱</span>
+			<span>{formatDateTime(activity.timestamp)}</span>
+			{#if activity.author}
+				<span> by <span class="text-primary">{activity.author}</span></span>
+			{/if}
+		</div>
+	</div>
+</div>

package/dist/components/activity/Activity.svelte.d.ts

@@ -0,0 +1,18 @@
+import type { Component } from 'svelte';
+type ActivityIcon = 'add' | 'edit' | 'success' | 'start' | 'pause' | 'stop' | 'delete' | 'failed';
+type Activity = {
+    activity_type?: string;
+    icon: ActivityIcon;
+    label: string;
+    timestamp: string;
+    author?: string | null;
+    field?: string | null;
+    previous_value?: string | null;
+    value?: string | null;
+};
+type Props = {
+    activity: Activity;
+    class?: string;
+};
+declare const Activity: Component<Props, {}, "">;
+export default Activity;

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

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

package/dist/components/activity/index.js

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

package/dist/components/avatar/Avatar.svelte

@@ -8,8 +8,8 @@
 
 	let { name, size = 'md', showTooltip = true }: Props = $props();
 	const sizes = {
-		sm: 'h-5 w-5 min-w-5 text-xxs font-medium',
-		md: 'h-7 w-7 min-w-7 text-xs font-medium'
+		sm: 'h-6 w-6 min-w-6 text-xxs font-semibold tracking-wide',
+		md: 'h-8 w-8 min-w-8 text-xs font-semibold tracking-wide'
 	};
 
 	let sizeClassName = $derived(sizes[size]);
@@ -43,7 +43,7 @@
 
 {#snippet avatar()}
 	<div
-		class="{sizeClassName} flex items-center justify-center rounded-full bg-accent-inverse text-primary-inverse"
+		class="{sizeClassName} flex items-center justify-center rounded-full border border-static bg-accent text-accent"
 	>
 		{initials}
 	</div>

package/dist/components/banner/Banner.svelte

@@ -30,13 +30,13 @@
 
 {#if show}
 	<div class="rounded-lg bg-{color} flex h-11 w-full items-center justify-between p-3">
-		<div class="inline-flex items-center justify-start gap-3">
+		<div class="inline-flex w-full items-center justify-start gap-3">
 			{#if icon}
 				<div class="size-5 text-icon-{color} ">
 					{@render icon?.()}
 				</div>
 			{/if}
-			<div class="content text-sm">
+			<div class="content w-full text-sm">
 				{@render content?.()}
 			</div>
 		</div>

package/dist/components/button/Button.svelte

@@ -17,12 +17,13 @@
 		loading?: boolean;
 		disabled?: boolean;
 		accessibilityLabel?: string;
-		size?: 'sm' | 'md' | 'lg';
+		size?: 'xs' | 'sm' | 'md' | 'lg';
 		id?: string | undefined;
 		tabindex?: number | undefined;
 		variant?: Variant;
 		children?: Snippet;
 		dataTestId?: string;
+		rounded?: boolean;
 	}
 
 	let {
@@ -37,7 +38,8 @@
 		tabindex = undefined,
 		variant = 'primary',
 		children,
-		dataTestId = undefined
+		dataTestId = undefined,
+		rounded = false
 	}: Props = $props();
 
 	let variantClass = $derived(`btn-${variant}`);
@@ -60,6 +62,7 @@
 	class:cursor-wait={loading}
 	class="button {variantClass} {sizeClass} {className}"
 	data-testid={dataTestId}
+	class:rounded
 >
 	{#if loading}
 		<Spinner />
@@ -70,107 +73,191 @@
 
 <style>
 	.button {
+
     display: inline-flex;
+
     align-items: center;
+
     justify-content: center;
+
     gap: 0.5rem;
-    border-radius: 9999px;
-    font-size: 1rem;
+
+    overflow: hidden;
+
+    text-overflow: ellipsis;
+
+    white-space: nowrap;
+
+    text-wrap: nowrap;
+
+    border-radius: 0.5rem;
+
+    font-size: 0.875rem;
+
     font-weight: 500;
+
     line-height: 1.5rem;
+
     transition-duration: 150ms
 }
+
 .button:disabled {
+
     background-color: #12192a0d;
+
     --tw-text-opacity: 1;
+
     color: rgb(136 140 148 / var(--tw-text-opacity, 1))
 }
 
+	.rounded {
+
+    border-radius: 9999px
+}
+
 	/* Size variants */
+	.btn-size-xs {
+
+    height: 1.75rem;
+
+    padding: 0.5rem
+}
 	.btn-size-sm {
+
     height: 2rem;
+
     padding-left: 0.75rem;
+
     padding-right: 0.75rem;
+
     padding-top: 0.5rem;
+
     padding-bottom: 0.5rem
 }
 	.btn-size-md {
+
     height: 2.5rem;
-    padding-left: 1.25rem;
-    padding-right: 1.25rem;
+
+    padding-left: 1rem;
+
+    padding-right: 1rem;
+
     padding-top: 0.75rem;
+
     padding-bottom: 0.75rem
 }
 	.btn-size-lg {
+
     height: 3rem;
+
     padding-left: 1.5rem;
+
     padding-right: 1.5rem;
+
     padding-top: 1rem;
-    padding-bottom: 1rem
+
+    padding-bottom: 1rem;
+
+    font-size: 1rem;
+
+    line-height: 1.5rem
 }
 
 	/* Button variants */
 	.btn-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))
 }
 	.btn-primary:hover {
+
     --tw-bg-opacity: 1;
+
     background-color: rgb(71 65 193 / var(--tw-bg-opacity, 1))
 }
 	.btn-secondary {
+
     background-color: #12192a0d;
+
     --tw-text-opacity: 1;
+
     color: rgb(18 25 42 / var(--tw-text-opacity, 1))
 }
 	.btn-secondary:hover {
+
     background-color: #12192A1A
 }
 	.btn-secondary:active {
+
     background-color: #12192a0d
 }
 	.btn-transparent {
+
     background-color: transparent;
+
     --tw-text-opacity: 1;
+
     color: rgb(18 25 42 / var(--tw-text-opacity, 1))
 }
 	.btn-transparent:hover {
+
     background-color: #12192a0d
 }
 	.btn-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))
 }
 	.btn-danger:hover {
+
     --tw-bg-opacity: 1;
+
     background-color: rgb(191 57 58 / var(--tw-bg-opacity, 1))
 }
 	.btn-outline {
+
     border-width: 1px;
+
     border-color: #12192A26;
+
     background-color: transparent;
+
     --tw-text-opacity: 1;
+
     color: rgb(18 25 42 / var(--tw-text-opacity, 1))
 }
 	.btn-outline:hover {
+
     background-color: #12192A1A
 }
 	.btn-outline:disabled {
+
     border-style: none
 }
 	.btn-secondary-inverse {
+
     background-color: #FFFFFF0D;
+
     --tw-text-opacity: 1;
+
     color: rgb(255 255 255 / var(--tw-text-opacity, 1))
 }
 	.btn-secondary-inverse:hover {
+
     background-color: #FFFFFF26
 }
 	.btn-secondary-inverse:active {
+
     background-color: #FFFFFF0D
 }
 </style>

package/dist/components/button/Button.svelte.d.ts

@@ -1,17 +1,20 @@
 import type { Snippet } from 'svelte';
-declare const Button: import("svelte").Component<{
+type Variant = 'primary' | 'secondary' | 'transparent' | 'danger' | 'outline' | 'secondary-inverse';
+interface Props {
     class?: string;
     onClick?: (event?: MouseEvent) => void;
-    type?: "button" | "submit" | "reset" | null | undefined;
+    type?: 'button' | 'submit' | 'reset' | null | undefined;
     loading?: boolean;
     disabled?: boolean;
     accessibilityLabel?: string;
-    size?: "sm" | "md" | "lg";
+    size?: 'xs' | 'sm' | 'md' | 'lg';
     id?: string | undefined;
     tabindex?: number | undefined;
-    variant?: "primary" | "secondary" | "transparent" | "danger" | "outline" | "secondary-inverse";
+    variant?: Variant;
     children?: Snippet;
     dataTestId?: string;
-}, {}, "">;
+    rounded?: boolean;
+}
+declare const Button: import("svelte").Component<Props, {}, "">;
 type Button = ReturnType<typeof Button>;
 export default Button;

package/dist/components/collapsible/Collapsible.stories.svelte

@@ -0,0 +1,40 @@
+<script module lang="ts">
+	import { defineMeta } from '@storybook/addon-svelte-csf';
+	import * as Collapsible from './index';
+	import Button from '../button/Button.svelte';
+
+	const { Story } = defineMeta({
+		component: Collapsible.Root,
+		title: 'Design System/Collapsible',
+		tags: ['autodocs']
+	});
+
+	let open = $state(false);
+</script>
+
+<Story name="Base">
+	<Collapsible.Root class="w-[200px]">
+		<Collapsible.Trigger class="w-full">
+			<h6>Trigger</h6>
+		</Collapsible.Trigger>
+
+		<Collapsible.Content>Content</Collapsible.Content>
+	</Collapsible.Root>
+</Story>
+
+<Story name="Without Icon">
+	<Collapsible.Root class="w-[200px]">
+		<Collapsible.Trigger class="w-full" withIcon={false}>
+			<h6>Trigger</h6>
+		</Collapsible.Trigger>
+
+		<Collapsible.Content>Content</Collapsible.Content>
+	</Collapsible.Root>
+</Story>
+
+<Story name="Controlled">
+	<Button onClick={() => (open = !open)}>Outside Trigger</Button>
+	<Collapsible.Root class="w-[200px]" {open}>
+		<Collapsible.Content>Content</Collapsible.Content>
+	</Collapsible.Root>
+</Story>