@reshape-biotech/design-system 1.1.2 → 1.2.1

package/dist/components/graphs/bar-chart/BarChart.stories.svelte

@@ -79,3 +79,41 @@
 	name="Empty Data"
 	args={{ data: [], xAxisName: 'category', yAxisName: 'Value', height: '400px' }}
 />
+
+<Story
+	name="With Capture Interval"
+	args={{
+		data: [
+			{ category: '0', value: 10 },
+			{ category: '1', value: 20 },
+			{ category: '2', value: 15 },
+			{ category: '3', value: 25 },
+			{ category: '4', value: 30 },
+			{ category: '5', value: 18 },
+			{ category: '6', value: 22 }
+		],
+		xAxisName: 'category',
+		yAxisName: 'Value',
+		height: '400px',
+		captureInterval: 3600
+	}}
+/>
+
+<Story
+	name="With Capture Interval - Short Duration"
+	args={{
+		data: [
+			{ category: '0', value: 10 },
+			{ category: '1', value: 20 },
+			{ category: '2', value: 15 },
+			{ category: '3', value: 25 },
+			{ category: '4', value: 30 },
+			{ category: '5', value: 18 },
+			{ category: '6', value: 22 }
+		],
+		xAxisName: 'category',
+		yAxisName: 'Value',
+		height: '400px',
+		captureInterval: 600
+	}}
+/>

package/dist/components/graphs/bar-chart/BarChart.svelte

@@ -3,6 +3,7 @@
 	import Chart, { type GenericChartProps } from '../chart/Chart.svelte';
 	import type { EChartsOption, BarSeriesOption } from 'echarts';
 	import { createTooltipFormatter } from '../utils/tooltipFormatter';
+	import { Duration } from 'luxon';
 
 	type DataItem = {
 		value: number;
@@ -14,6 +15,7 @@
 		colors?: Record<string, string>; // Optional: Color mapping per x-axis category
 		rotateXAxisLabels?: boolean;
 		grid?: EChartsOption['grid'];
+		captureInterval?: number;
 	}
 
 	let {
@@ -22,6 +24,7 @@
 		rotateXAxisLabels = false,
 		xAxisName,
 		yAxisName,
+		captureInterval,
 		...props
 	}: BarChartProps = $props();
 
@@ -38,6 +41,16 @@
 
 	const xAxisData = $derived(data.map((item) => item[xAxisName]));
 
+	const captureIntervals = captureInterval
+		? Array(data.length)
+				.fill(null)
+				.map((_, timeIndex) => {
+					const seconds = timeIndex * captureInterval;
+					const duration = Duration.fromObject({ seconds }).shiftTo('days', 'hours', 'minutes');
+					return duration.days >= 1 ? duration.toFormat('dd:hh:mm') : duration.toFormat('hh:mm');
+				})
+		: undefined;
+
 	const createBarDataItem = (value: number | null, color: string) => ({
 		value,
 		itemStyle: {
@@ -94,7 +107,7 @@
 			},
 			xAxis: {
 				type: 'category',
-				data: xAxisData,
+				data: captureIntervals || xAxisData,
 				axisTick: {
 					show: false,
 					alignWithLabel: true

package/dist/components/graphs/bar-chart/BarChart.svelte.d.ts

@@ -9,6 +9,7 @@ interface BarChartProps extends Omit<GenericChartProps, 'timeIndex'> {
     colors?: Record<string, string>;
     rotateXAxisLabels?: boolean;
     grid?: EChartsOption['grid'];
+    captureInterval?: number;
 }
 declare const BarChart: import("svelte").Component<BarChartProps, {}, "">;
 type BarChart = ReturnType<typeof BarChart>;

package/dist/components/graphs/bar-chart/StackedBarChart.stories.svelte

@@ -40,3 +40,35 @@
 		yAxisName: 'Count'
 	}}
 />
+
+<Story
+	name="With Capture Interval"
+	args={{
+		xAxisCategories: ['0', '1', '2', '3', '4', '5', '6'],
+		series: [
+			{ name: 'Halo', data: [120, 132, 101, 134, 90, 230, 210] },
+			{ name: 'Spot', data: [220, 182, 191, 234, 290, 330, 310] },
+			{ name: 'Microbial', data: [150, 232, 201, 154, 190, 330, 410] }
+		],
+		height: '400px',
+		xAxisName: 'Time',
+		yAxisName: 'Count',
+		captureInterval: 3600
+	}}
+/>
+
+<Story
+	name="With Capture Interval - Short Duration"
+	args={{
+		xAxisCategories: ['0', '1', '2', '3', '4', '5', '6'],
+		series: [
+			{ name: 'Halo', data: [120, 132, 101, 134, 90, 230, 210] },
+			{ name: 'Spot', data: [220, 182, 191, 234, 290, 330, 310] },
+			{ name: 'Microbial', data: [150, 232, 201, 154, 190, 330, 410] }
+		],
+		height: '400px',
+		xAxisName: 'Time',
+		yAxisName: 'Count',
+		captureInterval: 600
+	}}
+/>

package/dist/components/graphs/bar-chart/StackedBarChart.svelte

@@ -3,25 +3,28 @@
 	import Chart, { type GenericChartProps } from '../chart/Chart.svelte';
 	import type { EChartsOption, BarSeriesOption } from 'echarts';
 	import type { CallbackDataParams } from 'echarts/types/dist/shared';
+	import { Duration } from 'luxon';
 
 	type StackedSeriesItem = {
 		name: string;
 		data: (number | null)[];
 	};
 
-	type StackedBarChartProps = {
+	interface StackedBarChartProps extends GenericChartProps {
 		xAxisCategories: (string | number)[];
 		series: StackedSeriesItem[];
 		colors?: Record<string, string>; // Optional: Color mapping per series name
 		rotateXAxisLabels?: boolean;
 		grid?: EChartsOption['grid'];
-	} & Omit<GenericChartProps, 'timeIndex'>;
+		captureInterval?: number;
+	}
 
 	let {
 		xAxisCategories,
 		series,
 		colors,
 		rotateXAxisLabels = false,
+		captureInterval,
 		...props
 	}: StackedBarChartProps = $props();
 
@@ -38,6 +41,16 @@
 
 	const xAxisData = $derived(xAxisCategories);
 
+	const captureIntervals = captureInterval
+		? Array(xAxisCategories.length)
+				.fill(null)
+				.map((_, timeIndex) => {
+					const seconds = timeIndex * captureInterval;
+					const duration = Duration.fromObject({ seconds }).shiftTo('days', 'hours', 'minutes');
+					return duration.days >= 1 ? duration.toFormat('dd:hh:mm') : duration.toFormat('hh:mm');
+				})
+		: undefined;
+
 	const createBarDataItem = (value: number | null, color: string) => ({
 		value,
 		itemStyle: {
@@ -135,7 +148,7 @@
 			},
 			xAxis: {
 				type: 'category',
-				data: xAxisData,
+				data: captureIntervals || xAxisData,
 				axisTick: {
 					show: false,
 					alignWithLabel: true

package/dist/components/graphs/bar-chart/StackedBarChart.svelte.d.ts

@@ -4,13 +4,14 @@ type StackedSeriesItem = {
     name: string;
     data: (number | null)[];
 };
-type StackedBarChartProps = {
+interface StackedBarChartProps extends GenericChartProps {
     xAxisCategories: (string | number)[];
     series: StackedSeriesItem[];
     colors?: Record<string, string>;
     rotateXAxisLabels?: boolean;
     grid?: EChartsOption['grid'];
-} & Omit<GenericChartProps, 'timeIndex'>;
+    captureInterval?: number;
+}
 declare const StackedBarChart: import("svelte").Component<StackedBarChartProps, {}, "">;
 type StackedBarChart = ReturnType<typeof StackedBarChart>;
 export default StackedBarChart;

package/dist/components/graphs/line/LineChart.stories.svelte

@@ -109,6 +109,26 @@
 		<LineChart {xAxisName} yAxisName="Value" data={[10, 8, 13, 7, 9, 6, 11]} timeIndex={3} />
 	</div>
 </Story>
+<Story name="With Capture Interval" asChild>
+	<div class="h-[400px] w-full">
+		<LineChart
+			{xAxisName}
+			yAxisName="Value"
+			data={[10, 8, 13, 7, 9, 6, 11, 15, 12, 8, 14, 16]}
+			captureInterval={3600}
+		/>
+	</div>
+</Story>
+<Story name="With Capture Interval - Short Duration" asChild>
+	<div class="h-[400px] w-full">
+		<LineChart
+			{xAxisName}
+			yAxisName="Value"
+			data={[10, 8, 13, 7, 9, 6, 11, 15, 12, 8, 14, 16]}
+			captureInterval={600}
+		/>
+	</div>
+</Story>
 <Story
 	name="Interactive Current Location"
 	asChild

package/dist/components/graphs/line/LineChart.svelte

@@ -5,12 +5,14 @@
 	import * as echarts from 'echarts/core';
 	import type { GenericChartProps } from '../chart/Chart.svelte';
 	import { createTooltipFormatter } from '../utils/tooltipFormatter';
+	import { Duration } from 'luxon';
 
 	interface LineChartProps extends GenericChartProps {
 		data: (number | null)[];
 		withArea?: boolean;
 		color?: string;
 		grid?: EChartsOption['grid'];
+		captureInterval?: number;
 	}
 
 	let {
@@ -19,6 +21,7 @@
 		yAxisName,
 		withArea = false,
 		color = textColor['icon-blue'],
+		captureInterval,
 		...props
 	}: LineChartProps = $props();
 
@@ -37,6 +40,16 @@
 			maximumFractionDigits: fractionDigits
 		}) ?? '';
 
+	const captureIntervals = captureInterval
+		? Array(data.length)
+				.fill(null)
+				.map((_, timeIndex) => {
+					const seconds = timeIndex * captureInterval;
+					const duration = Duration.fromObject({ seconds }).shiftTo('days', 'hours', 'minutes');
+					return duration.days >= 1 ? duration.toFormat('dd:hh:mm') : duration.toFormat('hh:mm');
+				})
+		: undefined;
+
 	let options: EChartsOption = $derived({
 		grid: {
 			top: 10,
@@ -55,26 +68,7 @@
 			axisLine: {
 				onZero: false
 			},
-			axisLabel: {
-				interval: (index: number, value: string) => {
-					const dataLength = data.length;
-					if (dataLength <= 1) return true; // Show label if only one point
-
-					const targetLabelCount = 10; // Aim for about 10 labels
-					// Calculate interval, ensuring it's at least 1
-					const calculatedInterval = Math.max(1, Math.ceil(dataLength / targetLabelCount));
-
-					// Show the first label (index 0)
-					if (index === 0) return true;
-					// Show the last label if data exists
-					if (dataLength > 0 && index === dataLength - 1) return true;
-					// Show labels at the calculated interval, but not the last one if it was already shown
-					if (index % calculatedInterval === 0 && index !== dataLength - 1) return true;
-					// Hide others
-					return false;
-				},
-				hideOverlap: true
-			},
+			data: captureIntervals,
 			...props.xAxisOptions
 		} as any as EChartsOption['xAxis'],
 		yAxis: {

package/dist/components/graphs/line/LineChart.svelte.d.ts

@@ -5,6 +5,7 @@ interface LineChartProps extends GenericChartProps {
     withArea?: boolean;
     color?: string;
     grid?: EChartsOption['grid'];
+    captureInterval?: number;
 }
 declare const LineChart: import("svelte").Component<LineChartProps, {}, "">;
 type LineChart = ReturnType<typeof LineChart>;

package/dist/components/graphs/multiline/MultiLineChart.svelte

@@ -116,26 +116,6 @@
 				onZero: false
 			},
 			data: captureIntervals,
-			axisLabel: {
-				interval: (index: number, value: string) => {
-					const dataLength = longestSeries;
-					if (dataLength <= 1) return true; // Show label if only one point
-
-					const targetLabelCount = 10; // Aim for about 10 labels
-					// Calculate interval, ensuring it's at least 1
-					const calculatedInterval = Math.max(1, Math.ceil(dataLength / targetLabelCount));
-
-					// Show the first label (index 0)
-					if (index === 0) return true;
-					// Show the last label if data exists
-					if (dataLength > 0 && index === dataLength - 1) return true;
-					// Show labels at the calculated interval, but not the last one if it was already shown
-					if (index % calculatedInterval === 0 && index !== dataLength - 1) return true;
-					// Hide others
-					return false;
-				},
-				hideOverlap: true
-			},
 			...props.xAxisOptions
 		},
 		yAxis: {

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

@@ -2,7 +2,7 @@ import type { IconComponentProps } from 'phosphor-svelte';
 import type { Component } from 'svelte';
 import type { textColor } from './../../tokens';
 export type PhosphorIconProps = Component<IconComponentProps, object, ''>;
-export type IconName = 'Aperture' | 'ArrowFatLineRight' | 'ArrowCounterClockwise' | 'ArrowRight' | 'ArrowUpRight' | 'ArrowUpLeft' | 'ArrowUUpLeft' | 'Barcode' | 'Bell' | 'BookOpen' | 'BookOpenText' | 'BowlingBall' | 'BugBeetle' | 'Calendar' | 'CalendarBlank' | 'Camera' | 'CameraSlash' | 'CaretDown' | 'CaretLeft' | 'CaretRight' | 'CaretUp' | 'CaretUpDown' | 'ChatTeardropDots' | 'Check' | 'CheckCircle' | 'CheckFat' | 'Circle' | 'CircleDashed' | 'CircleHalf' | 'CirclesFour' | 'CirclesThreePlus' | 'Clock' | 'ClockCountdown' | 'Copy' | 'Crop' | 'Cube' | 'Database' | 'Dna' | 'DotsThree' | 'DotsThreeOutlineVertical' | 'DownloadSimple' | 'Drop' | 'EnvelopeSimple' | 'Eye' | 'Eyedropper' | 'FileCsv' | 'Flag' | 'Flask' | 'Folder' | 'FolderDashed' | 'FolderSimplePlus' | 'FunnelSimple' | 'Gear' | 'GlobeSimple' | 'GlobeSimpleX' | 'GridFour' | 'Hash' | 'House' | 'ImageSquare' | 'ImagesSquare' | 'Info' | 'Lock' | 'LineSegments' | 'List' | 'Link' | 'ListMagnifyingGlass' | 'MagnifyingGlass' | 'MegaphoneSimple' | 'MicrosoftExcelLogo' | 'Moon' | 'Minus' | 'Palette' | 'Pause' | 'Pencil' | 'PencilSimple' | 'Percent' | 'Phone' | 'Plant' | 'Play' | 'Plus' | 'PlusMinus' | 'Question' | 'SealCheck' | 'RadioButton' | 'SealQuestion' | 'SealWarning' | 'SelectionAll' | 'Share' | 'SidebarSimple' | 'SkipBack' | 'SkipForward' | 'SignIn' | 'SignOut' | 'SortAscending' | 'Sparkle' | 'SpinnerGap' | 'SquaresFour' | 'Star' | 'Stop' | 'StopCircle' | 'Sun' | 'Table' | 'Tag' | 'Target' | 'TestTube' | 'Trash' | 'TrashSimple' | 'TreeStructure' | 'UserCircle' | 'UserPlus' | 'Video' | 'Warning' | 'WarningCircle' | 'WifiSlash' | 'X';
+export type IconName = 'Aperture' | 'ArrowFatLineRight' | 'ArrowCounterClockwise' | 'ArrowRight' | 'ArrowUpRight' | 'ArrowUpLeft' | 'ArrowUUpLeft' | 'Barcode' | 'Bell' | 'BookOpen' | 'BookOpenText' | 'BowlingBall' | 'BugBeetle' | 'Calendar' | 'CalendarBlank' | 'Camera' | 'CameraSlash' | 'CaretDown' | 'CaretLeft' | 'CaretRight' | 'CaretUp' | 'CaretUpDown' | 'ChatTeardropDots' | 'Check' | 'CheckCircle' | 'CheckFat' | 'Circle' | 'CircleDashed' | 'CircleHalf' | 'CirclesFour' | 'CirclesThreePlus' | 'Clock' | 'ClockCountdown' | 'Copy' | 'Crop' | 'Cube' | 'Database' | 'Dna' | 'DotsThree' | 'DotsThreeOutlineVertical' | 'DownloadSimple' | 'Drop' | 'EnvelopeSimple' | 'Eye' | 'Eyedropper' | 'FileCsv' | 'Flag' | 'Flask' | 'Folder' | 'FolderDashed' | 'FolderSimplePlus' | 'FunnelSimple' | 'Gear' | 'GlobeSimple' | 'GlobeSimpleX' | 'GridFour' | 'Hash' | 'House' | 'ImageSquare' | 'ImagesSquare' | 'Info' | 'Lock' | 'LineSegments' | 'List' | 'Link' | 'ListMagnifyingGlass' | 'MagnifyingGlass' | 'MegaphoneSimple' | 'MicrosoftExcelLogo' | 'Moon' | 'Minus' | 'Palette' | 'Pause' | 'Pencil' | 'PencilSimple' | 'Percent' | 'Phone' | 'Plant' | 'Play' | 'Plus' | 'PlusMinus' | 'Ruler' | 'Question' | 'SealCheck' | 'RadioButton' | 'SealQuestion' | 'SealWarning' | 'SelectionAll' | 'Share' | 'SidebarSimple' | 'SkipBack' | 'SkipForward' | 'SignIn' | 'SignOut' | 'SortAscending' | 'Sparkle' | 'SpinnerGap' | 'SquaresFour' | 'Star' | 'Stop' | 'StopCircle' | 'Sun' | 'Table' | 'Tag' | 'Target' | 'TestTube' | 'Trash' | 'TrashSimple' | 'TreeStructure' | 'UserCircle' | 'UserPlus' | 'Video' | 'Warning' | 'WarningCircle' | 'WifiSlash' | 'X';
 export declare const iconMap: Record<IconName, PhosphorIconProps>;
 export declare function renderIcon(iconName: keyof typeof iconMap): PhosphorIconProps;
 export type IconColor = keyof typeof textColor;

package/dist/components/icons/index.js

@@ -79,6 +79,7 @@ import Plant from 'phosphor-svelte/lib/Plant';
 import Play from 'phosphor-svelte/lib/Play';
 import Plus from 'phosphor-svelte/lib/Plus';
 import PlusMinus from 'phosphor-svelte/lib/PlusMinus';
+import Ruler from 'phosphor-svelte/lib/Ruler';
 import Question from 'phosphor-svelte/lib/Question';
 import SealCheck from 'phosphor-svelte/lib/SealCheck';
 import RadioButton from 'phosphor-svelte/lib/RadioButton';
@@ -196,6 +197,7 @@ export const iconMap = {
     Plus,
     PlusMinus,
     RadioButton,
+    Ruler,
     Question,
     SealCheck,
     SealQuestion,

package/dist/components/notifications/Notifications.stories.svelte

@@ -0,0 +1,107 @@
+<script module lang="ts">
+	import { notifications } from '../../../notifications';
+	import Button from '../button/Button.svelte';
+	import Notifications from '../notifications/Notifications.svelte';
+	import { defineMeta } from '@storybook/addon-svelte-csf';
+
+	const { Story } = defineMeta({
+		component: Notifications,
+		title: 'Design System/Notifications',
+		tags: ['autodocs']
+	});
+</script>
+
+<Story name="Notifications" asChild>
+	<Notifications></Notifications>
+	<div class="h-24 rounded-md border"></div>
+	<div class="pt-4">
+		<div class="flex flex-row justify-between gap-2">
+			<div class="flex flex-col gap-2">
+				<h5>Default</h5>
+				<Button
+					onClick={() => {
+						notifications.default('This is a default notification');
+					}}>Show default</Button
+				>
+				<Button
+					onClick={() => {
+						notifications.danger('This is a danger notification');
+					}}>Show danger</Button
+				>
+				<Button
+					onClick={() => {
+						notifications.warning('This is a warning notification');
+					}}>Show warning</Button
+				>
+				<Button
+					onClick={() => {
+						notifications.info('This is an info notification');
+					}}>Show info</Button
+				>
+				<Button
+					onClick={() => {
+						notifications.success('This is a success notification');
+					}}>Show success</Button
+				>
+			</div>
+			<div class="grow"></div>
+			<div class="flex flex-col gap-2">
+				<h5>Icons</h5>
+				<Button
+					onClick={() => {
+						notifications.default('This is a default icon notification', 'Bell');
+					}}>Show default</Button
+				>
+				<Button
+					onClick={() => {
+						notifications.danger('This is a danger icon notification', 'SealWarning');
+					}}>Show danger</Button
+				>
+				<Button
+					onClick={() => {
+						notifications.warning('This is a warning icon notification', 'Warning');
+					}}>Show warning</Button
+				>
+				<Button
+					onClick={() => {
+						notifications.info('This is an info icon notification', 'Info');
+					}}>Show info</Button
+				>
+				<Button
+					onClick={() => {
+						notifications.success('This is a success icon notification', 'Check');
+					}}>Show success</Button
+				>
+			</div>
+			<div class="grow"></div>
+			<div class="flex flex-col gap-2">
+				<h5>Dismissable</h5>
+				<Button
+					onClick={() => {
+						notifications.default('This is a default icon notification', 'Bell', true);
+					}}>Show default</Button
+				>
+				<Button
+					onClick={() => {
+						notifications.danger('This is a danger icon notification', 'SealWarning', true);
+					}}>Show danger</Button
+				>
+				<Button
+					onClick={() => {
+						notifications.warning('This is a warning icon notification', 'Warning', true);
+					}}>Show warning</Button
+				>
+				<Button
+					onClick={() => {
+						notifications.info('This is an info icon notification', 'Info', true);
+					}}>Show info</Button
+				>
+				<Button
+					onClick={() => {
+						notifications.success('This is a success icon notification', 'Check', true);
+					}}>Show success</Button
+				>
+			</div>
+		</div>
+	</div>
+</Story>

package/dist/components/notifications/Notifications.stories.svelte.d.ts

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

package/dist/components/notifications/Notifications.svelte

@@ -0,0 +1,32 @@
+<script lang="ts">
+	import { flip } from 'svelte/animate';
+	import { fly } from 'svelte/transition';
+	import { notifications } from '../../notifications';
+	import { type IconColor } from '../icons';
+	import { tokens } from '../../tokens';
+	import Toast from '../toast/Toast.svelte';
+
+	const color = {
+		danger: tokens.backgroundColor['danger-inverse'],
+		success: tokens.backgroundColor['success-inverse-hover'],
+		warning: tokens.backgroundColor['warning-inverse-hover'],
+		info: tokens.backgroundColor['blue-inverse'],
+		default: tokens.backgroundColor.surface
+	};
+
+	const textColor: Record<string, IconColor | 'inherit'> = {
+		danger: 'primary-inverse',
+		success: 'primary-inverse',
+		warning: 'primary-inverse',
+		info: 'primary-inverse',
+		default: 'inherit'
+	};
+</script>
+
+<div class="fixed left-0 right-0 top-2 z-50 mx-auto flex w-fit flex-col items-center justify-start">
+	{#each $notifications as notification (notification.id)}
+		<div animate:flip transition:fly={{ y: -10 }}>
+			<Toast {notification} />
+		</div>
+	{/each}
+</div>

package/dist/components/notifications/Notifications.svelte.d.ts

@@ -0,0 +1,18 @@
+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 Notifications: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type Notifications = InstanceType<typeof Notifications>;
+export default Notifications;

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

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

package/dist/components/notifications/index.js

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

package/dist/components/select-new/index.d.ts

@@ -4,7 +4,7 @@ import GroupHeading from './components/SelectGroupHeading.svelte';
 import Trigger from './components/SelectTrigger.svelte';
 import MultiSelectTrigger from './components/MultiSelectTrigger.svelte';
 import Group from './components/Group.svelte';
-export declare const Root: import("svelte").Component<import("bits-ui").ComboboxRootPropsWithoutHTML, {}, "open" | "value">;
+export declare const Root: import("svelte").Component<import("bits-ui").SelectRootPropsWithoutHTML, {}, "open" | "value">;
 export declare const Portal: import("svelte").Component<import("bits-ui").PortalProps, {}, "">;
 export { Content, Item, Group, GroupHeading, Trigger, MultiSelectTrigger };
 export * from './types';

package/dist/components/toast/Toast.stories.svelte

@@ -0,0 +1,209 @@
+<script module lang="ts">
+	import type { Notification } from '../../../notifications';
+	import Toast from './Toast.svelte';
+	import { defineMeta } from '@storybook/addon-svelte-csf';
+
+	const { Story } = defineMeta({
+		component: Toast,
+		title: 'Design System/Toast',
+		tags: ['autodocs']
+	});
+
+	const defaultNotification: Notification = {
+		id: '1',
+		type: 'default',
+		message: 'This is a default notification',
+		dismissable: false
+	};
+
+	const dangerNotification: Notification = {
+		id: '2',
+		type: 'danger',
+		message: 'This is a danger notification',
+		dismissable: false
+	};
+
+	const warningNotification: Notification = {
+		id: '3',
+		type: 'warning',
+		message: 'This is a warning notification',
+		dismissable: false
+	};
+
+	const infoNotification: Notification = {
+		id: '4',
+		type: 'info',
+		message: 'This is an info notification',
+		dismissable: false
+	};
+
+	const successNotification: Notification = {
+		id: '5',
+		type: 'success',
+		message: 'This is a success notification',
+		dismissable: false
+	};
+
+	const defaultIconNotification: Notification = {
+		id: '6',
+		type: 'default',
+		message: 'This is a default notification with icon',
+		icon: 'Bell',
+		dismissable: false
+	};
+
+	const dangerIconNotification: Notification = {
+		id: '7',
+		type: 'danger',
+		message: 'This is a danger notification with icon',
+		icon: 'SealWarning',
+		dismissable: false
+	};
+
+	const warningIconNotification: Notification = {
+		id: '8',
+		type: 'warning',
+		message: 'This is a warning notification with icon',
+		icon: 'Warning',
+		dismissable: false
+	};
+
+	const infoIconNotification: Notification = {
+		id: '9',
+		type: 'info',
+		message: 'This is an info notification with icon',
+		icon: 'Info',
+		dismissable: false
+	};
+
+	const successIconNotification: Notification = {
+		id: '10',
+		type: 'success',
+		message: 'This is a success notification with icon',
+		icon: 'Check',
+		dismissable: false
+	};
+
+	const defaultDismissableNotificationWithIcon: Notification = {
+		id: '11',
+		type: 'default',
+		message: 'This is a dismissable default notification with icon',
+		icon: 'Bell',
+		dismissable: true
+	};
+
+	const dangerDismissableNotificationWithIcon: Notification = {
+		id: '12',
+		type: 'danger',
+		message: 'This is a dismissable danger notification with icon',
+		icon: 'SealWarning',
+		dismissable: true
+	};
+
+	const warningDismissableNotificationWithIcon: Notification = {
+		id: '13',
+		type: 'warning',
+		message: 'This is a dismissable warning notification with icon',
+		icon: 'Warning',
+		dismissable: true
+	};
+
+	const infoDismissableNotificationWithIcon: Notification = {
+		id: '14',
+		type: 'info',
+		message: 'This is a dismissable info notification with icon',
+		icon: 'Info',
+		dismissable: true
+	};
+
+	const successDismissableNotificationWithIcon: Notification = {
+		id: '15',
+		type: 'success',
+		message: 'This is a dismissable success notification with icon',
+		icon: 'Check',
+		dismissable: true
+	};
+
+	const defaultDismissableNoIconNotification: Notification = {
+		id: '16',
+		type: 'default',
+		message: 'This is a dismissable default notification without icon',
+		dismissable: true
+	};
+
+	const dangerDismissableNoIconNotification: Notification = {
+		id: '17',
+		type: 'danger',
+		message: 'This is a dismissable danger notification without icon',
+		dismissable: true
+	};
+
+	const warningDismissableNoIconNotification: Notification = {
+		id: '18',
+		type: 'warning',
+		message: 'This is a dismissable warning notification without icon',
+		dismissable: true
+	};
+
+	const infoDismissableNoIconNotification: Notification = {
+		id: '19',
+		type: 'info',
+		message: 'This is a dismissable info notification without icon',
+		dismissable: true
+	};
+
+	const successDismissableNoIconNotification: Notification = {
+		id: '20',
+		type: 'success',
+		message: 'This is a dismissable success notification without icon',
+		dismissable: true
+	};
+</script>
+
+<Story name="Notifications" asChild>
+	<div class="space-y-8">
+		<div class="space-y-4">
+			<h5 class="text-lg font-semibold">Basic Notifications</h5>
+			<div class="space-y-2">
+				<Toast notification={defaultNotification} />
+				<Toast notification={dangerNotification} />
+				<Toast notification={warningNotification} />
+				<Toast notification={infoNotification} />
+				<Toast notification={successNotification} />
+			</div>
+		</div>
+
+		<div class="space-y-4">
+			<h5 class="text-lg font-semibold">Notifications with Icons</h5>
+			<div class="space-y-2">
+				<Toast notification={defaultIconNotification} />
+				<Toast notification={dangerIconNotification} />
+				<Toast notification={warningIconNotification} />
+				<Toast notification={infoIconNotification} />
+				<Toast notification={successIconNotification} />
+			</div>
+		</div>
+
+		<div class="space-y-4">
+			<h5 class="text-lg font-semibold">Dismissable Notifications</h5>
+			<div class="space-y-2">
+				<Toast notification={defaultDismissableNoIconNotification} />
+				<Toast notification={dangerDismissableNoIconNotification} />
+				<Toast notification={warningDismissableNoIconNotification} />
+				<Toast notification={infoDismissableNoIconNotification} />
+				<Toast notification={successDismissableNoIconNotification} />
+			</div>
+		</div>
+
+		<div class="space-y-4">
+			<h5 class="text-lg font-semibold">Dismissable Notifications with Icons</h5>
+			<div class="space-y-2">
+				<Toast notification={defaultDismissableNotificationWithIcon} />
+				<Toast notification={dangerDismissableNotificationWithIcon} />
+				<Toast notification={warningDismissableNotificationWithIcon} />
+				<Toast notification={infoDismissableNotificationWithIcon} />
+				<Toast notification={successDismissableNotificationWithIcon} />
+			</div>
+		</div>
+	</div>
+</Story>

package/dist/components/toast/Toast.stories.svelte.d.ts

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

package/dist/components/toast/Toast.svelte

@@ -0,0 +1,62 @@
+<script lang="ts">
+	import { type Notification, notifications } from '../../notifications';
+	import Icon from '../icons/Icon.svelte';
+	import { type IconColor } from '../icons';
+	import { tokens } from '../../tokens';
+	import IconButton from '../icon-button/IconButton.svelte';
+
+	let { notification }: { notification: Notification } = $props();
+
+	const color = {
+		danger: tokens.backgroundColor['danger-inverse'],
+		success: tokens.backgroundColor['success-inverse-hover'],
+		warning: tokens.backgroundColor['warning-inverse-hover'],
+		info: tokens.backgroundColor['blue-inverse'],
+		default: tokens.backgroundColor.surface
+	};
+
+	const textColor: Record<string, IconColor | 'inherit'> = {
+		danger: 'primary-inverse',
+		success: 'primary-inverse',
+		warning: 'primary-inverse',
+		info: 'primary-inverse',
+		default: 'inherit'
+	};
+</script>
+
+<div
+	class="my-1 flex min-h-10 min-w-80 flex-row items-center rounded-lg px-2 shadow-md"
+	style="background: {color[notification.type]}"
+	class:border={notification.type === 'default'}
+	class:border-base-200={notification.type === 'default'}
+>
+	{#if notification.icon}
+		<Icon
+			color={textColor[notification.type]}
+			size={'14'}
+			iconName={notification.icon}
+			class="flex h-6 w-6 items-center justify-center rounded-md {notification.type !== 'default'
+				? 'bg-neutral-inverse-hover'
+				: 'bg-neutral'} p-1 {textColor[notification.type]}"
+		/>
+	{/if}
+	<div
+		class="p-2 font-medium"
+		style="display:block"
+		class:text-base-white-default={notification.type !== 'default'}
+	>
+		{notification.message}
+	</div>
+	{#if notification.dismissable}
+		<div class="grow"></div>
+		<div class="py-2">
+			<IconButton rounded={false} size="xs" onclick={() => notifications.dismiss(notification.id)}>
+				<Icon
+					color={textColor[notification.type]}
+					iconName={'X'}
+					class="rounded-md {textColor[notification.type]}"
+				/>
+			</IconButton>
+		</div>
+	{/if}
+</div>

package/dist/components/toast/Toast.svelte.d.ts

@@ -0,0 +1,7 @@
+import { type Notification } from '../../notifications';
+type $$ComponentProps = {
+    notification: Notification;
+};
+declare const Toast: import("svelte").Component<$$ComponentProps, {}, "">;
+type Toast = ReturnType<typeof Toast>;
+export default Toast;

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

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

package/dist/components/toast/index.js

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

package/dist/index.d.ts

@@ -22,6 +22,7 @@ export * from './components/markdown/';
 export * from './components/modal/';
 export * from './components/manual-cfu-counter/';
 export * from './components/notification-popup/';
+export * from './components/notifications/';
 export * from './components/pill/';
 export * from './components/progress-circle/';
 export * from './components/required-status-indicator/';
@@ -37,6 +38,7 @@ export * from './components/stepper/';
 export * from './components/table/';
 export * from './components/tabs/';
 export * from './components/tag/';
+export * from './components/toast/';
 export * from './components/toggle-icon-button/';
 export * from './components/textarea/index';
 export * from './components/tooltip/';
@@ -44,4 +46,5 @@ export * from './components/toggle/';
 export * from './components/checkbox/';
 export * from './components/sjsf-wrappers/';
 export { tokens } from './tokens';
+export { notifications } from './notifications';
 import './app.css';

package/dist/index.js

@@ -23,6 +23,7 @@ export * from './components/markdown/';
 export * from './components/modal/';
 export * from './components/manual-cfu-counter/';
 export * from './components/notification-popup/';
+export * from './components/notifications/';
 export * from './components/pill/';
 export * from './components/progress-circle/';
 export * from './components/required-status-indicator/';
@@ -38,6 +39,7 @@ export * from './components/stepper/';
 export * from './components/table/';
 export * from './components/tabs/';
 export * from './components/tag/';
+export * from './components/toast/';
 export * from './components/toggle-icon-button/';
 export * from './components/textarea/index';
 export * from './components/tooltip/';
@@ -46,4 +48,5 @@ export * from './components/checkbox/';
 export * from './components/sjsf-wrappers/';
 // Styles and Tokens
 export { tokens } from './tokens';
+export { notifications } from './notifications';
 import './app.css';

package/dist/notifications.d.ts

@@ -0,0 +1,22 @@
+import type { IconName } from './';
+export type NotificationType = 'info' | 'success' | 'warning' | 'danger' | 'default';
+export interface Notification {
+    id: string;
+    type: NotificationType;
+    message: string;
+    timeout?: number;
+    icon?: IconName;
+    dismissable: boolean;
+}
+export declare const notifications: {
+    subscribe: {
+        (this: void, run: import("svelte/store").Subscriber<Notification[]>, invalidate?: (() => void) | undefined): import("svelte/store").Unsubscriber;
+        (this: void, run: import("svelte/store").Subscriber<Notification[]>, invalidate?: (() => void) | undefined): import("svelte/store").Unsubscriber;
+    };
+    dismiss: (id: string) => void;
+    default: (message: string, icon?: IconName, dismissable?: boolean, timeout?: number) => void;
+    danger: (message: string, icon?: IconName, dismissable?: boolean, timeout?: number) => void;
+    warning: (message: string, icon?: IconName, dismissable?: boolean, timeout?: number) => void;
+    info: (message: string, icon?: IconName, dismissable?: boolean, timeout?: number) => void;
+    success: (message: string, icon?: IconName, dismissable?: boolean, timeout?: number) => void;
+};

package/dist/notifications.js

@@ -0,0 +1,27 @@
+import { writable } from 'svelte/store';
+const TIMEOUT = 3000;
+const createNotificationStore = () => {
+    const { subscribe, update } = writable([]);
+    const send = (message, type = 'default', iconName, dismissable = false, timeout = 3000) => {
+        const notification = { id: id(), type, message, timeout, icon: iconName, dismissable };
+        update((state) => [...state, notification]);
+        setTimeout(() => {
+            update((state) => state.filter((n) => n.id !== notification.id));
+        }, timeout);
+    };
+    return {
+        subscribe,
+        dismiss: (id) => {
+            update((state) => state.filter((n) => n.id !== id));
+        },
+        default: (message, icon, dismissable = false, timeout = TIMEOUT) => send(message, 'default', icon, dismissable, timeout),
+        danger: (message, icon, dismissable = false, timeout = TIMEOUT) => send(message, 'danger', icon, dismissable, timeout),
+        warning: (message, icon, dismissable = false, timeout = TIMEOUT) => send(message, 'warning', icon, dismissable, timeout),
+        info: (message, icon, dismissable = false, timeout = TIMEOUT) => send(message, 'info', icon, dismissable, timeout),
+        success: (message, icon, dismissable = false, timeout = TIMEOUT) => send(message, 'success', icon, dismissable, timeout)
+    };
+};
+const id = () => {
+    return crypto.randomUUID();
+};
+export const notifications = createNotificationStore();

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@reshape-biotech/design-system",
-	"version": "1.1.2",
+	"version": "1.2.1",
 	"scripts": {
 		"dev": "vite dev",
 		"build": "vite build",
@@ -28,6 +28,7 @@
 			"default": "./dist/index.js"
 		},
 		"./tokens": "./dist/tokens.js",
+		"./notifications": "./dist/notifications.js",
 		"./styles": "./dist/app.css",
 		"./tailwind": "./dist/tailwind.preset.js",
 		"./tailwind-safelist": "./dist/tailwind-safelist.js"