@reshape-biotech/design-system 1.1.1 → 1.2.0

package/dist/components/stepper/components/stepper-step.svelte

@@ -0,0 +1,100 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import { getContext } from 'svelte';
+	import { Icon } from '../../icons/';
+	import type { StepState } from '../';
+
+	interface Props {
+		children: Snippet;
+		state?: StepState;
+		stepNumber: string;
+		class?: string;
+	}
+
+	let { children, state: stateProp, stepNumber, class: className = '' }: Props = $props();
+	const id = $props.id();
+
+	type StepperContext = {
+		currentStep: string;
+	};
+
+	const context = getContext<StepperContext | undefined>('STEPPER_CONTEXT');
+
+	const currentState = $derived.by(() => {
+		if (context && context.currentStep !== undefined) {
+			if (context.currentStep > stepNumber) {
+				return 'completed';
+			} else if (context.currentStep === stepNumber) {
+				return 'active';
+			} else {
+				return 'future';
+			}
+		}
+		return stateProp ?? 'future';
+	});
+
+	const stateVariants = {
+		completed: {
+			container: 'bg-transparent text-primary-inverse',
+			iconContainer: 'bg-primary ',
+			iconColor: 'text-surface',
+			labelColor: 'text-primary',
+			showIcon: true
+		},
+		active: {
+			container: 'bg-accent text-primary-inverse',
+			iconContainer: 'bg-primary ',
+			iconColor: 'text-surface',
+			labelColor: 'text-primary',
+			showIcon: false
+		},
+		future: {
+			container: 'bg-transparent',
+			iconContainer: 'bg-transparent border border-interactive',
+			iconColor: 'text-secondary',
+			labelColor: 'text-secondary',
+			showIcon: false
+		}
+	};
+
+	const variant = $derived(stateVariants[currentState]);
+</script>
+
+<div
+	{id}
+	class="relative flex items-center gap-3 rounded-lg px-2 py-3 {variant.container} {className}"
+	role="progressbar"
+	aria-valuenow={currentState === 'completed' ? 100 : currentState === 'active' ? 50 : 0}
+	aria-valuemin="0"
+	aria-valuemax="100"
+	aria-label="Step {stepNumber}"
+>
+	<div
+		class="flex h-6 w-6 items-center justify-center rounded-md {variant.iconContainer}"
+		aria-hidden="true"
+	>
+		{#if variant.showIcon}
+			<Icon iconName="Check" class="h-3 w-3 {variant.iconColor}" />
+		{:else}
+			<span class="text-xs font-medium leading-none {variant.iconColor}">
+				{stepNumber}
+			</span>
+		{/if}
+	</div>
+
+	<span class="text-sm font-medium leading-tight {variant.labelColor} flex-1 truncate">
+		{@render children()}
+	</span>
+</div>
+
+<style>
+	div[role='progressbar']:not(:last-child)::after {
+		content: '';
+		position: absolute;
+		width: 1px;
+		background-color: #12192a0d;
+		left: calc(0.5rem + 1.5rem / 2 - 1px / 2);
+		top: 2.25rem;
+		height: 2.25rem;
+	}
+</style>

package/dist/components/stepper/components/stepper-step.svelte.d.ts

@@ -0,0 +1,11 @@
+import type { Snippet } from 'svelte';
+import type { StepState } from '../';
+interface Props {
+    children: Snippet;
+    state?: StepState;
+    stepNumber: string;
+    class?: string;
+}
+declare const StepperStep: import("svelte").Component<Props, {}, "">;
+type StepperStep = ReturnType<typeof StepperStep>;
+export default StepperStep;

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/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,19 +22,23 @@ 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/';
 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/toast/';
 export * from './components/toggle-icon-button/';
 export * from './components/textarea/index';
 export * from './components/tooltip/';
@@ -42,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,19 +23,23 @@ 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/';
 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/toast/';
 export * from './components/toggle-icon-button/';
 export * from './components/textarea/index';
 export * from './components/tooltip/';
@@ -44,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/tailwind.preset.d.ts

@@ -45,18 +45,21 @@ declare const config: {
                         10: string;
                         25: string;
                         50: string;
+                        75: string;
                     };
                     4: {
                         default: string;
                         10: string;
                         25: string;
                         50: string;
+                        75: string;
                     };
                     5: {
                         default: string;
                         10: string;
                         25: string;
                         50: string;
+                        75: string;
                     };
                     6: string;
                 };

package/dist/tokens.d.ts

@@ -40,18 +40,21 @@ export declare const colors: {
             10: string;
             25: string;
             50: string;
+            75: string;
         };
         4: {
             default: string;
             10: string;
             25: string;
             50: string;
+            75: string;
         };
         5: {
             default: string;
             10: string;
             25: string;
             50: string;
+            75: string;
         };
         6: string;
     };
@@ -475,18 +478,21 @@ export declare const tokens: {
                 10: string;
                 25: string;
                 50: string;
+                75: string;
             };
             4: {
                 default: string;
                 10: string;
                 25: string;
                 50: string;
+                75: string;
             };
             5: {
                 default: string;
                 10: string;
                 25: string;
                 50: string;
+                75: string;
             };
             6: string;
         };

package/dist/tokens.js

@@ -35,9 +35,9 @@ export const colors = {
     periwinkle: {
         1: '#eeeefd',
         2: '#cbc9fa',
-        3: { default: '#8e8af4', 10: '#8e8af41A', 25: '#8e8af440', 50: '#8e8af480' },
-        4: { default: '#7973f1', 10: '#7973f11A', 25: '#7973f140', 50: '#7973f180' },
-        5: { default: '#5750ee', 10: '#5750ee1A', 25: '#5750ee40', 50: '#5750ee80' },
+        3: { default: '#8e8af4', 10: '#8e8af41A', 25: '#8e8af440', 50: '#8e8af480', 75: '#8e8af4BF' },
+        4: { default: '#7973f1', 10: '#7973f11A', 25: '#7973f140', 50: '#7973f180', 75: '#7973f1BF' },
+        5: { default: '#5750ee', 10: '#5750ee1A', 25: '#5750ee40', 50: '#5750ee80', 75: '#5750eeBF' },
         6: '#4741c1'
     },
     orange: {

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@reshape-biotech/design-system",
-	"version": "1.1.1",
+	"version": "1.2.0",
 	"scripts": {
 		"dev": "vite dev",
 		"build": "vite build",