@reshape-biotech/design-system 0.0.54 → 1.1.2

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

@@ -3,8 +3,8 @@
 	import Activity from './Activity.svelte';
 	import * as Collapsible from '../collapsible/index';
 	import { Icon } from '../icons';
-
 	import { defineMeta } from '@storybook/addon-svelte-csf';
+
 	const { Story } = defineMeta({
 		component: Activity,
 		title: 'Design System/Activity',
@@ -27,8 +27,8 @@
 		{
 			icon: 'edit' as const,
 			label: 'Sample ID edited',
-			from: 'Sample123',
-			to: 'Sample456',
+			previous_value: 'Sample123',
+			value: 'Sample456',
 			timestamp: '5 Sep 2025, 12:05',
 			author: 'Ella Roth'
 		},
@@ -48,6 +48,18 @@
 			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'
+		},
+		{
+			icon: 'warning' as const,
+			label: 'Job recovered after interruption, some data may be lost',
+			timestamp: '3 Aug 2025, 10:30',
+			author: 'Jim Halpert'
+		},
+		{
+			icon: 'failed' as const,
+			label: 'Job failed',
+			timestamp: '2 Aug 2025, 14:22',
+			author: 'System'
 		}
 	]);
 
@@ -57,7 +69,7 @@
 	};
 </script>
 
-<Story name="Collapsible activity">
+<Story name="Collapsible activity" asChild>
 	<Collapsible.Root open>
 		<Collapsible.Trigger class="w-full pb-4">
 			<h6>Activity</h6>
@@ -82,11 +94,12 @@
 	</Collapsible.Root>
 </Story>
 
-<Story name="Single activity">
-	<Activity activity={{ icon: 'delete', label: 'Project deleted', timestamp: '2 Oct, 1980' }} />
-</Story>
+<Story
+	name="Single activity"
+	args={{ activity: { icon: 'delete', label: 'Project deleted', timestamp: '2 Oct, 1980' } }}
+/>
 
-<Story name="Few activities">
+<Story name="Few activities" asChild>
 	<Activity
 		activity={{
 			icon: 'pause',

package/dist/components/activity/Activity.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { Icon, type IconName } from '../icons';
+	import { Icon, type IconName, type IconColor, type BackgroundClass } from '../icons';
 	import { DateTime } from 'luxon';
 
 	type ActivityIcon =
@@ -11,7 +11,10 @@
 		| 'pause'
 		| 'start'
 		| 'stop'
-		| 'success';
+		| 'warning'
+		| 'success'
+		| 'export-succeeded'
+		| 'export-failed';
 
 	type Activity = {
 		activity_type?: string;
@@ -33,12 +36,45 @@
 		add: 'Plus',
 		capture: 'Aperture',
 		delete: 'Trash',
-		edit: 'Pencil',
+		edit: 'PencilSimple',
 		failed: 'WarningCircle',
 		pause: 'Pause',
 		start: 'Play',
 		stop: 'Stop',
-		success: 'CheckFat'
+		warning: 'Warning',
+		success: 'Check',
+		'export-succeeded': 'DownloadSimple',
+		'export-failed': 'DownloadSimple'
+	};
+
+	const ACTIVITY_COLOR: Record<ActivityIcon, IconColor> = {
+		add: 'icon-secondary',
+		capture: 'icon-secondary',
+		delete: 'icon-danger',
+		edit: 'icon-secondary',
+		failed: 'icon-danger',
+		pause: 'icon-secondary',
+		start: 'icon-secondary',
+		stop: 'icon-secondary',
+		warning: 'icon-warning',
+		success: 'icon-secondary',
+		'export-succeeded': 'icon-secondary',
+		'export-failed': 'icon-danger'
+	};
+
+	const ACTIVITY_BACKGROUND: Record<ActivityIcon, BackgroundClass> = {
+		add: 'bg-neutral',
+		capture: 'bg-neutral',
+		delete: 'bg-neutral',
+		edit: 'bg-neutral',
+		failed: 'bg-danger',
+		pause: 'bg-neutral',
+		start: 'bg-neutral',
+		stop: 'bg-neutral',
+		warning: 'bg-warning',
+		success: 'bg-neutral',
+		'export-succeeded': 'bg-neutral',
+		'export-failed': 'bg-danger'
 	};
 
 	function formatDateTime(timestamp: string): string {
@@ -64,9 +100,11 @@
 	<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"
+			class="flex h-5 w-5 shrink-0 items-center justify-center rounded p-0.5 text-secondary {ACTIVITY_BACKGROUND[
+				activity.icon
+			]}"
 		>
-			<Icon iconName={ACTIVITY_ICONS[activity.icon]} />
+			<Icon iconName={ACTIVITY_ICONS[activity.icon]} color={ACTIVITY_COLOR[activity.icon]} />
 		</div>
 		<div class="w-0.5 grow bg-neutral group-last:invisible"></div>
 	</div>

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

@@ -1,4 +1,4 @@
-type ActivityIcon = 'add' | 'capture' | 'delete' | 'edit' | 'failed' | 'pause' | 'start' | 'stop' | 'success';
+type ActivityIcon = 'add' | 'capture' | 'delete' | 'edit' | 'failed' | 'pause' | 'start' | 'stop' | 'warning' | 'success' | 'export-succeeded' | 'export-failed';
 type Activity = {
     activity_type?: string;
     icon: ActivityIcon;

package/dist/components/avatar/Avatar.stories.svelte

@@ -15,34 +15,24 @@
 	});
 </script>
 
-<Story name="Default">
-	<Avatar name="John Doe" />
-</Story>
+<Story name="Default" args={{ name: 'John Doe' }} />
 
-<Story name="Sizes">
+<Story name="Sizes" asChild>
 	<div class="flex gap-2">
 		<Avatar name="John Doe" size="sm" />
 		<Avatar name="John Doe" size="md" />
 	</div>
 </Story>
 
-<Story name="Email">
-	<Avatar name="john.doe@example.com" />
-</Story>
+<Story name="Email" args={{ name: 'john.doe@example.com' }} />
 
-<Story name="Single Name">
-	<Avatar name="John" />
-</Story>
+<Story name="Single Name" args={{ name: 'John' }} />
 
-<Story name="No Name">
-	<Avatar name={null} />
-</Story>
+<Story name="No Name" args={{ name: null }} />
 
-<Story name="Without Tooltip">
-	<Avatar name="John Doe" showTooltip={false} />
-</Story>
+<Story name="Without Tooltip" args={{ showTooltip: false }} />
 
-<Story name="Multiple Avatars">
+<Story name="Multiple Avatars" asChild>
 	<div class="flex gap-2">
 		<Avatar name="John Doe" />
 		<Avatar name="Jane Smith" />

package/dist/components/avatar/Avatar.svelte

@@ -1,12 +1,12 @@
 <script lang="ts">
 	import Tooltip from '../tooltip/Tooltip.svelte';
-	interface Props {
+	export interface AvatarProps {
 		name: string | null | undefined;
 		size?: 'sm' | 'md';
 		showTooltip?: boolean;
 	}
 
-	let { name, size = 'md', showTooltip = true }: Props = $props();
+	let { name, size = 'md', showTooltip = true }: AvatarProps = $props();
 	const sizes = {
 		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'

package/dist/components/avatar/Avatar.svelte.d.ts

@@ -1,8 +1,8 @@
-interface Props {
+export interface AvatarProps {
     name: string | null | undefined;
     size?: 'sm' | 'md';
     showTooltip?: boolean;
 }
-declare const Avatar: import("svelte").Component<Props, {}, "">;
+declare const Avatar: import("svelte").Component<AvatarProps, {}, "">;
 type Avatar = ReturnType<typeof Avatar>;
 export default Avatar;

package/dist/components/banner/Banner.stories.svelte

@@ -13,7 +13,7 @@
 	let showBanner = $state(true);
 </script>
 
-<Story name="Well finding warning">
+<Story name="Well finding warning" asChild>
 	<Banner type="warning" closable={false}>
 		{#snippet icon()}
 			<Icon size={20} iconName="Warning" color="warning" weight="bold" />
@@ -28,7 +28,7 @@
 	</Banner>
 </Story>
 
-<Story name="No icon">
+<Story name="No icon" asChild>
 	<Banner type="success">
 		{#snippet content()}
 			This banner has no icon.
@@ -36,7 +36,7 @@
 	</Banner>
 </Story>
 
-<Story name="No toggle">
+<Story name="No toggle" asChild>
 	<Banner type="progress" closable={false}>
 		{#snippet icon()}
 			<Icon size={20} iconName="Info" color="icon-blue" weight="bold" />
@@ -47,7 +47,7 @@
 	</Banner>
 </Story>
 
-<Story name="Toggle back on">
+<Story name="Toggle back on" asChild>
 	<div class="h-28">
 		<Button onClick={() => (showBanner = true)} disabled={showBanner}>Toggle banner back on</Button>
 		<br />
@@ -64,7 +64,7 @@
 	</div>
 </Story>
 
-<Story name="Type variations">
+<Story name="Type variations" asChild>
 	<div class="space-y-4">
 		<div class="space-y-2">
 			<h4>Neutral</h4>

package/dist/components/banner/Banner.svelte

@@ -29,7 +29,7 @@
 </script>
 
 {#if show}
-	<div class="rounded-lg bg-{color} flex h-11 w-full items-center justify-between p-3">
+	<div class="rounded-lg bg-{color} flex w-full items-center justify-between p-3">
 		<div class="inline-flex w-full items-center justify-start gap-3">
 			{#if icon}
 				<div class="flex size-5 items-center justify-center text-icon-{color} ">

package/dist/components/button/Button.stories.svelte

@@ -1,6 +1,6 @@
 <script module lang="ts">
 	import { defineMeta } from '@storybook/addon-svelte-csf';
-	import Button from './Button.svelte';
+	import Button, { type ButtonVariant, type ButtonSize } from './Button.svelte';
 
 	const { Story } = defineMeta({
 		component: Button,
@@ -13,31 +13,64 @@
 			}
 		}
 	});
+
+	const variants = [
+		'primary',
+		'secondary',
+		'danger',
+		'transparent',
+		'outline',
+		'secondary-inverse'
+	];
+	const sizes = ['xs', 'sm', 'md', 'lg'];
 </script>
 
-<Story name="Primary">
-	<Button variant="primary">Button</Button>
-</Story>
-<Story name="Medium">
-	<Button variant="primary" size="md">Button</Button>
-</Story>
-<Story name="Small">
-	<Button variant="primary" size="sm">Button</Button>
+<Story name="Variants" asChild>
+	<div class="flex flex-col gap-4">
+		{#each variants as variant}
+			{#if variant === 'secondary-inverse'}
+				<div class="bg-base-inverse p-4 text-primary-inverse">
+					<p>{variant}</p>
+					<Button variant={variant as ButtonVariant}>Button</Button>
+				</div>
+			{:else}
+				<div>
+					<p>{variant}</p>
+					<Button variant={variant as ButtonVariant}>Button</Button>
+				</div>
+			{/if}
+		{/each}
+	</div>
 </Story>
 
-<Story name="Secondary">
-	<Button variant="secondary">Button</Button>
+<Story name="Sizes" asChild>
+	<div class="flex flex-col gap-4">
+		{#each sizes as size}
+			<div>
+				<p>{size}</p>
+				<Button variant="primary" size={size as ButtonSize}>Button</Button>
+			</div>
+		{/each}
+	</div>
 </Story>
 
-<Story name="Danger">
-	<Button variant="danger">Button</Button>
-</Story>
-<Story name="Transparent">
-	<Button variant="transparent">Button</Button>
-</Story>
-<Story name="Disabled">
-	<Button disabled>Button</Button>
+<Story name="Disabled" asChild>
+	<div class="flex flex-col gap-4">
+		{#each variants as variant}
+			<div>
+				<p>{variant}</p>
+				<Button variant={variant as ButtonVariant} disabled>Button</Button>
+			</div>
+		{/each}
+	</div>
 </Story>
-<Story name="Loading">
-	<Button loading>Button</Button>
+<Story name="Loading" asChild>
+	<div class="flex flex-col gap-4">
+		{#each variants as variant}
+			<div>
+				<p>{variant}</p>
+				<Button variant={variant as ButtonVariant} loading>Button</Button>
+			</div>
+		{/each}
+	</div>
 </Story>

package/dist/components/button/Button.svelte

@@ -1,14 +1,18 @@
-<script lang="ts">
-	import Spinner from '../spinner/Spinner.svelte';
-	import type { Snippet } from 'svelte';
-
-	type Variant =
+<script lang="ts" module>
+	export type ButtonVariant =
 		| 'primary'
 		| 'secondary'
 		| 'transparent'
 		| 'danger'
 		| 'outline'
-		| 'secondary-inverse';
+		| 'secondary-inverse'
+		| 'transparent-inverse';
+	export type ButtonSize = 'xs' | 'sm' | 'md' | 'lg';
+</script>
+
+<script lang="ts">
+	import Spinner from '../spinner/Spinner.svelte';
+	import type { Snippet } from 'svelte';
 
 	interface Props {
 		class?: string;
@@ -17,10 +21,10 @@
 		loading?: boolean;
 		disabled?: boolean;
 		accessibilityLabel?: string;
-		size?: 'xs' | 'sm' | 'md' | 'lg';
+		size?: ButtonSize;
 		id?: string | undefined;
 		tabindex?: number | undefined;
-		variant?: Variant;
+		variant?: ButtonVariant;
 		children?: Snippet;
 		dataTestId?: string;
 		rounded?: boolean;
@@ -49,7 +53,7 @@
 <button
 	aria-label={accessibilityLabel}
 	onclick={(e) => {
-		if (!loading) {
+		if (!loading && !disabled) {
 			onClick(e);
 		} else {
 			e.preventDefault();
@@ -63,6 +67,7 @@
 	class="button {variantClass} {sizeClass} {className}"
 	data-testid={dataTestId}
 	class:rounded
+	class:disabled
 >
 	{#if loading}
 		<Spinner />
@@ -107,6 +112,17 @@
 
     --tw-text-opacity: 1;
 
+    color: rgb(136 140 148 / var(--tw-text-opacity, 1))
+}
+
+.button:hover:disabled {
+
+    cursor: not-allowed;
+
+    background-color: #12192a0d;
+
+    --tw-text-opacity: 1;
+
     color: rgb(136 140 148 / var(--tw-text-opacity, 1))
 }
 
@@ -115,11 +131,17 @@
     border-radius: 9999px
 }
 
+	.disabled:hover {
+
+    background-color: #12192a0d !important
+}
 	/* Size variants */
 	.btn-size-xs {
 
     height: 1.75rem;
 
+    border-radius: 0.375rem;
+
     padding: 0.5rem
 }
 	.btn-size-sm {
@@ -180,6 +202,7 @@
 
     background-color: rgb(71 65 193 / var(--tw-bg-opacity, 1))
 }
+
 	.btn-secondary {
 
     background-color: #12192a0d;
@@ -188,10 +211,12 @@
 
     color: rgb(18 25 42 / var(--tw-text-opacity, 1))
 }
+
 	.btn-secondary:hover {
 
     background-color: #12192A1A
 }
+
 	.btn-secondary:active {
 
     background-color: #12192a0d
@@ -228,7 +253,7 @@
 
     border-width: 1px;
 
-    border-color: #12192A26;
+    border-color: #12192A1A;
 
     background-color: transparent;
 
@@ -238,7 +263,13 @@
 }
 	.btn-outline:hover {
 
-    background-color: #12192A1A
+    border-color: #12192A26;
+
+    background-color: #12192a0d;
+
+    --tw-text-opacity: 1;
+
+    color: rgb(18 25 42 / var(--tw-text-opacity, 1))
 }
 	.btn-outline:disabled {
 
@@ -258,6 +289,22 @@
 }
 	.btn-secondary-inverse:active {
 
+    background-color: #FFFFFF0D
+}
+	.btn-transparent-inverse {
+
+    background-color: transparent;
+
+    --tw-text-opacity: 1;
+
+    color: rgb(255 255 255 / var(--tw-text-opacity, 1))
+}
+	.btn-transparent-inverse:hover {
+
+    background-color: #FFFFFF26
+}
+	.btn-transparent-inverse:active {
+
     background-color: #FFFFFF0D
 }
 </style>

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

@@ -1,5 +1,6 @@
+export type ButtonVariant = 'primary' | 'secondary' | 'transparent' | 'danger' | 'outline' | 'secondary-inverse' | 'transparent-inverse';
+export type ButtonSize = 'xs' | 'sm' | 'md' | 'lg';
 import type { Snippet } from 'svelte';
-type Variant = 'primary' | 'secondary' | 'transparent' | 'danger' | 'outline' | 'secondary-inverse';
 interface Props {
     class?: string;
     onClick?: (event?: MouseEvent) => void;
@@ -7,10 +8,10 @@ interface Props {
     loading?: boolean;
     disabled?: boolean;
     accessibilityLabel?: string;
-    size?: 'xs' | 'sm' | 'md' | 'lg';
+    size?: ButtonSize;
     id?: string | undefined;
     tabindex?: number | undefined;
-    variant?: Variant;
+    variant?: ButtonVariant;
     children?: Snippet;
     dataTestId?: string;
     rounded?: boolean;

package/dist/components/card/Card.stories.svelte

@@ -0,0 +1,130 @@
+<script module lang="ts">
+	import { defineMeta } from '@storybook/addon-svelte-csf';
+	import Card from './Card.svelte';
+	import RequiredStatusIndicator from '../required-status-indicator/RequiredStatusIndicator.svelte';
+
+	const { Story } = defineMeta({
+		title: 'Design System/Card',
+		component: Card,
+		tags: ['autodocs'],
+		argTypes: {
+			Header: { description: 'Optional header snippet', control: false },
+			children: { description: 'Content snippet for the main body (required)', control: false },
+			headerBorder: { control: 'boolean', description: 'Show a border below the header' },
+			class: { control: 'text', description: 'Additional CSS classes for the card' }
+		}
+	});
+</script>
+
+<Story name="Content Only" args={{ class: 'w-96' }} asChild>
+	<Card class="w-96">
+		{#snippet children()}
+			<h3 class="mb-2 text-lg font-semibold text-primary">Card with Content Only</h3>
+			<p class="text-secondary">This card demonstrates providing only the children snippet.</p>
+			<button
+				class="mt-4 rounded bg-accent-inverse px-4 py-2 text-primary-inverse hover:bg-accent-inverse-hover"
+			>
+				Action Button
+			</button>
+		{/snippet}
+	</Card>
+</Story>
+
+<Story name="Header Only" args={{ class: 'w-96' }} asChild>
+	<Card class="w-96">
+		{#snippet Header()}
+			<p class="text-primary">Card with Header Only</p>
+			<p class="text-sm text-tertiary">No main content here, just a header.</p>
+		{/snippet}
+		{#snippet children()}{/snippet}
+	</Card>
+</Story>
+
+<Story name="Header and Content" args={{ class: 'w-96' }} asChild>
+	<Card class="w-96">
+		{#snippet Header()}
+			<div class="flex items-center justify-between">
+				<p class="text-primary">Insect Health</p>
+				<span class="text-sm text-success">Target</span>
+			</div>
+		{/snippet}
+		{#snippet children()}
+			<div class="space-y-2">
+				<div>
+					<label for="insect-name" class="block text-sm font-medium text-secondary">Name *</label>
+					<input
+						type="text"
+						id="insect-name"
+						value="Insect health"
+						class="border-border-input mt-1 block w-full rounded-md p-2"
+					/>
+				</div>
+				<div>
+					<label for="insect-desc" class="block text-sm font-medium text-secondary"
+						>Description *</label
+					>
+					<input
+						type="text"
+						id="insect-desc"
+						value="Health based on insect activity"
+						class="border-border-input mt-1 block w-full rounded-md p-2"
+					/>
+				</div>
+			</div>
+		{/snippet}
+	</Card>
+</Story>
+
+<Story name="Header, Content, and Border" args={{ headerBorder: true, class: 'w-96' }} asChild>
+	<Card headerBorder={true} class="w-96">
+		{#snippet Header()}
+			<div class="flex items-center justify-between">
+				<p class="text-primary">Insect Count</p>
+				<RequiredStatusIndicator requiredCount={2} currentCount={2} />
+			</div>
+		{/snippet}
+		{#snippet children()}
+			<div class="space-y-2">
+				<div>
+					<label for="count-name" class="block text-sm font-medium text-secondary">Name *</label>
+					<input
+						type="text"
+						id="count-name"
+						value="Insect count"
+						class="border-border-input mt-1 block w-full rounded-md p-2"
+					/>
+				</div>
+				<div>
+					<label for="count-desc" class="block text-sm font-medium text-secondary"
+						>Description *</label
+					>
+					<input
+						type="text"
+						id="count-desc"
+						value="Total count of insects detected"
+						class="border-border-input mt-1 block w-full rounded-md p-2"
+					/>
+				</div>
+				<p class="text-secondary">This card has a border under the header.</p>
+			</div>
+		{/snippet}
+	</Card>
+</Story>
+
+<Story name="With Custom Styling" args={{}} asChild>
+	<Card class="w-1/2 bg-accent text-primary-inverse shadow-lg">
+		{#snippet Header()}
+			<p class="">Custom Styled Card</p>
+		{/snippet}
+		{#snippet children()}
+			<p>
+				This card uses the <code class="rounded bg-black/20 px-1">class</code> prop to apply a
+				different background (<code class="rounded bg-black/20 px-1">bg-accent</code>), text color (<code
+					class="rounded bg-black/20 px-1">text-primary-inverse</code
+				>), width (<code class="rounded bg-black/20 px-1">w-1/2</code>), and a larger shadow (<code
+					class="rounded bg-black/20 px-1">shadow-lg</code
+				>).
+			</p>
+		{/snippet}
+	</Card>
+</Story>