@reshape-biotech/design-system 1.1.1 → 1.2.0

package/dist/components/icons/index.js

@@ -35,6 +35,7 @@ import Copy from 'phosphor-svelte/lib/Copy';
 import Crop from 'phosphor-svelte/lib/Crop';
 import Cube from 'phosphor-svelte/lib/Cube';
 import Database from 'phosphor-svelte/lib/Database';
+import Dna from 'phosphor-svelte/lib/Dna';
 import DotsThree from 'phosphor-svelte/lib/DotsThree';
 import DotsThreeOutlineVertical from 'phosphor-svelte/lib/DotsThreeOutlineVertical';
 import DownloadSimple from 'phosphor-svelte/lib/DownloadSimple';
@@ -58,11 +59,14 @@ import House from 'phosphor-svelte/lib/House';
 import ImageSquare from 'phosphor-svelte/lib/ImageSquare';
 import ImagesSquare from 'phosphor-svelte/lib/ImagesSquare';
 import Info from 'phosphor-svelte/lib/Info';
+import Link from 'phosphor-svelte/lib/Link';
 import Lock from 'phosphor-svelte/lib/Lock';
 import LineSegments from 'phosphor-svelte/lib/LineSegments';
 import List from 'phosphor-svelte/lib/List';
+import ListMagnifyingGlass from 'phosphor-svelte/lib/ListMagnifyingGlass';
 import MagnifyingGlass from 'phosphor-svelte/lib/MagnifyingGlass';
 import MegaphoneSimple from 'phosphor-svelte/lib/MegaphoneSimple';
+import MicrosoftExcelLogo from 'phosphor-svelte/lib/MicrosoftExcelLogo';
 import Moon from 'phosphor-svelte/lib/Moon';
 import Minus from 'phosphor-svelte/lib/Minus';
 import Pause from 'phosphor-svelte/lib/Pause';
@@ -75,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';
@@ -101,6 +106,7 @@ import Target from 'phosphor-svelte/lib/Target';
 import TestTube from 'phosphor-svelte/lib/TestTube';
 import Trash from 'phosphor-svelte/lib/Trash';
 import TrashSimple from 'phosphor-svelte/lib/TrashSimple';
+import TreeStructure from 'phosphor-svelte/lib/TreeStructure';
 import UserCircle from 'phosphor-svelte/lib/UserCircle';
 import UserPlus from 'phosphor-svelte/lib/UserPlus';
 import Video from 'phosphor-svelte/lib/Video';
@@ -146,6 +152,7 @@ export const iconMap = {
     Crop,
     Cube,
     Database,
+    Dna,
     DotsThree,
     DotsThreeOutlineVertical,
     DownloadSimple,
@@ -172,8 +179,11 @@ export const iconMap = {
     Lock,
     LineSegments,
     List,
+    Link,
+    ListMagnifyingGlass,
     MagnifyingGlass,
     MegaphoneSimple,
+    MicrosoftExcelLogo,
     Moon,
     Minus,
     Palette,
@@ -187,6 +197,7 @@ export const iconMap = {
     Plus,
     PlusMinus,
     RadioButton,
+    Ruler,
     Question,
     SealCheck,
     SealQuestion,
@@ -212,6 +223,7 @@ export const iconMap = {
     TestTube,
     Trash,
     TrashSimple,
+    TreeStructure,
     UserCircle,
     UserPlus,
     Video,

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/components/Group.svelte

@@ -8,16 +8,17 @@
 		label?: string;
 		children: Snippet;
 		class?: string;
+		contentClass?: string;
 	}
 
-	let { label, children, class: className, ...restProps }: Props = $props();
+	let { label, children, class: className, contentClass, ...restProps }: Props = $props();
 </script>
 
 <SelectPrimitive.Group class={className} {...restProps}>
 	{#if label}
 		<GroupHeading>{label}</GroupHeading>
 	{/if}
-	<div class="pl-2">
+	<div class={contentClass}>
 		{@render children()}
 	</div>
 </SelectPrimitive.Group>

package/dist/components/select-new/components/Group.svelte.d.ts

@@ -4,6 +4,7 @@ interface Props extends PrimitiveGroupProps {
     label?: string;
     children: Snippet;
     class?: string;
+    contentClass?: string;
 }
 declare const Group: import("svelte").Component<Props, {}, "">;
 type Group = ReturnType<typeof Group>;

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/stepper/Stepper.stories.svelte

@@ -0,0 +1,243 @@
+<script module lang="ts">
+	import { defineMeta } from '@storybook/addon-svelte-csf';
+	import * as Stepper from './index';
+	import StepperComponent from './components/stepper-root.svelte';
+
+	const { Story } = defineMeta({
+		title: 'Design System/Stepper',
+		component: StepperComponent,
+		tags: ['autodocs'],
+		argTypes: {
+			class: { control: 'text', description: 'Additional CSS classes' },
+			currentStep: { control: 'text', description: 'The currently active step identifier' }
+		}
+	});
+</script>
+
+<Story name="Controlled by Root">
+	<div class="space-y-8 p-4">
+		<div>
+			<h3 class="mb-4 text-lg font-medium">Stepper controlled by currentStep prop</h3>
+			<div class="max-w-sm">
+				<Stepper.Root currentStep="2">
+					<Stepper.Step stepNumber="1">Configure experiment</Stepper.Step>
+					<Stepper.Step stepNumber="2">Set run conditions</Stepper.Step>
+					<Stepper.Step stepNumber="3">Approve plate maps</Stepper.Step>
+					<Stepper.Step stepNumber="4">Review</Stepper.Step>
+				</Stepper.Root>
+			</div>
+		</div>
+	</div>
+</Story>
+
+<Story name="Non-Numeric Steps">
+	<div class="space-y-8 p-4">
+		<div>
+			<h3 class="mb-4 text-lg font-medium">Stepper with Letter-based Steps</h3>
+			<div class="max-w-sm">
+				<Stepper.Root currentStep="B">
+					<Stepper.Step stepNumber="A">Configure</Stepper.Step>
+					<Stepper.Step stepNumber="B">Process</Stepper.Step>
+					<Stepper.Step stepNumber="C">Complete</Stepper.Step>
+				</Stepper.Root>
+			</div>
+		</div>
+	</div>
+</Story>
+
+<Story name="All States (Individually set)">
+	<div class="space-y-8 p-4">
+		<div>
+			<h3 class="mb-4 text-lg font-medium">Individual Step States</h3>
+			<div class="grid grid-cols-1 gap-6 md:grid-cols-3">
+				<div>
+					<h4 class="mb-2 text-sm font-medium text-secondary">Completed State</h4>
+					<div class="max-w-sm">
+						<Stepper.Root>
+							<Stepper.Step state="completed" stepNumber="1">Configure experiment</Stepper.Step>
+						</Stepper.Root>
+					</div>
+				</div>
+				<div>
+					<h4 class="mb-2 text-sm font-medium text-secondary">Active State</h4>
+					<div class="max-w-sm">
+						<Stepper.Root>
+							<Stepper.Step state="active" stepNumber="2">Set run conditions</Stepper.Step>
+						</Stepper.Root>
+					</div>
+				</div>
+				<div>
+					<h4 class="mb-2 text-sm font-medium text-secondary">Future State</h4>
+					<div class="max-w-sm">
+						<Stepper.Root>
+							<Stepper.Step state="future" stepNumber="3">Approve plate maps</Stepper.Step>
+						</Stepper.Root>
+					</div>
+				</div>
+			</div>
+		</div>
+	</div>
+</Story>
+
+<Story name="Progress Examples">
+	<div class="space-y-8 p-4">
+		<div>
+			<h3 class="mb-4 text-lg font-medium">Progress States</h3>
+			<div class="grid grid-cols-1 gap-8 lg:grid-cols-2">
+				<div>
+					<h4 class="mb-2 text-sm font-medium text-secondary">Start State</h4>
+					<div class="max-w-sm">
+						<Stepper.Root currentStep="1">
+							<Stepper.Step stepNumber="1">Configure experiment</Stepper.Step>
+							<Stepper.Step stepNumber="2">Set run conditions</Stepper.Step>
+							<Stepper.Step stepNumber="3">Approve plate maps</Stepper.Step>
+							<Stepper.Step stepNumber="4">Review</Stepper.Step>
+						</Stepper.Root>
+					</div>
+				</div>
+				<div>
+					<h4 class="mb-2 text-sm font-medium text-secondary">Mid Progress</h4>
+					<div class="max-w-sm">
+						<Stepper.Root currentStep="3">
+							<Stepper.Step stepNumber="1">Configure experiment</Stepper.Step>
+							<Stepper.Step stepNumber="2">Set run conditions</Stepper.Step>
+							<Stepper.Step stepNumber="3">Approve plate maps</Stepper.Step>
+							<Stepper.Step stepNumber="4">Review</Stepper.Step>
+						</Stepper.Root>
+					</div>
+				</div>
+				<div>
+					<h4 class="mb-2 text-sm font-medium text-secondary">Almost Complete</h4>
+					<div class="max-w-sm">
+						<Stepper.Root currentStep="4">
+							<Stepper.Step stepNumber="1">Configure experiment</Stepper.Step>
+							<Stepper.Step stepNumber="2">Set run conditions</Stepper.Step>
+							<Stepper.Step stepNumber="3">Approve plate maps</Stepper.Step>
+							<Stepper.Step stepNumber="4">Review</Stepper.Step>
+						</Stepper.Root>
+					</div>
+				</div>
+				<div>
+					<h4 class="mb-2 text-sm font-medium text-secondary">All Complete</h4>
+					<div class="max-w-sm">
+						<!-- To show all as complete, set currentStep to a non-existent step after the last one -->
+						<Stepper.Root currentStep="5">
+							<Stepper.Step stepNumber="1">Configure experiment</Stepper.Step>
+							<Stepper.Step stepNumber="2">Set run conditions</Stepper.Step>
+							<Stepper.Step stepNumber="3">Approve plate maps</Stepper.Step>
+							<Stepper.Step stepNumber="4">Review</Stepper.Step>
+						</Stepper.Root>
+					</div>
+				</div>
+			</div>
+		</div>
+	</div>
+</Story>
+
+<Story name="Different Step Counts">
+	<div class="space-y-8 p-4">
+		<div>
+			<h3 class="mb-4 text-lg font-medium">Various Step Configurations</h3>
+			<div class="grid grid-cols-1 gap-8 lg:grid-cols-2">
+				<div>
+					<h4 class="mb-2 text-sm font-medium text-secondary">Two Steps</h4>
+					<div class="max-w-sm">
+						<Stepper.Root currentStep="1">
+							<Stepper.Step stepNumber="1">Setup</Stepper.Step>
+							<Stepper.Step stepNumber="2">Review</Stepper.Step>
+						</Stepper.Root>
+					</div>
+				</div>
+				<div>
+					<h4 class="mb-2 text-sm font-medium text-secondary">Three Steps</h4>
+					<div class="max-w-sm">
+						<Stepper.Root currentStep="2">
+							<Stepper.Step stepNumber="1">Configure</Stepper.Step>
+							<Stepper.Step stepNumber="2">Process</Stepper.Step>
+							<Stepper.Step stepNumber="3">Complete</Stepper.Step>
+						</Stepper.Root>
+					</div>
+				</div>
+				<div>
+					<h4 class="mb-2 text-sm font-medium text-secondary">Five Steps</h4>
+					<div class="max-w-sm">
+						<Stepper.Root currentStep="3">
+							<Stepper.Step stepNumber="1">Initialize</Stepper.Step>
+							<Stepper.Step stepNumber="2">Configure</Stepper.Step>
+							<Stepper.Step stepNumber="3">Process</Stepper.Step>
+							<Stepper.Step stepNumber="4">Validate</Stepper.Step>
+							<Stepper.Step stepNumber="5">Complete</Stepper.Step>
+						</Stepper.Root>
+					</div>
+				</div>
+				<div>
+					<h4 class="mb-2 text-sm font-medium text-secondary">Single Step</h4>
+					<div class="max-w-sm">
+						<Stepper.Root currentStep="1">
+							<Stepper.Step stepNumber="1">Single action step</Stepper.Step>
+						</Stepper.Root>
+					</div>
+				</div>
+			</div>
+		</div>
+	</div>
+</Story>
+
+<Story name="Custom Styling">
+	<div class="space-y-8 p-4">
+		<div>
+			<h3 class="mb-4 text-lg font-medium">Custom Classes</h3>
+			<div class="max-w-sm">
+				<Stepper.Root currentStep="2" class="rounded-lg border bg-surface p-4">
+					<Stepper.Step stepNumber="1" class="font-bold">Configure experiment</Stepper.Step>
+					<Stepper.Step stepNumber="2" class="font-bold">Set run conditions</Stepper.Step>
+					<Stepper.Step stepNumber="3" class="font-bold">Approve plate maps</Stepper.Step>
+				</Stepper.Root>
+			</div>
+		</div>
+	</div>
+</Story>
+
+<Story name="Responsive Behavior">
+	<div class="space-y-8 p-4">
+		<div>
+			<h3 class="mb-4 text-lg font-medium">Text Truncation</h3>
+			<div class="space-y-6">
+				<div>
+					<h4 class="mb-2 text-sm font-medium text-secondary">Normal Width (224px - Figma spec)</h4>
+					<div class="w-56">
+						<Stepper.Root currentStep="2">
+							<Stepper.Step stepNumber="1">Configure experiment</Stepper.Step>
+							<Stepper.Step stepNumber="2">Set run conditions</Stepper.Step>
+							<Stepper.Step stepNumber="3">Approve plate maps</Stepper.Step>
+						</Stepper.Root>
+					</div>
+				</div>
+				<div>
+					<h4 class="mb-2 text-sm font-medium text-secondary">Narrow Width (160px)</h4>
+					<div class="w-40">
+						<Stepper.Root currentStep="2">
+							<Stepper.Step stepNumber="1">Configure experiment parameters</Stepper.Step>
+							<Stepper.Step stepNumber="2">Set run conditions and parameters</Stepper.Step>
+							<Stepper.Step stepNumber="3">Approve all plate maps and configurations</Stepper.Step>
+						</Stepper.Root>
+					</div>
+				</div>
+				<div>
+					<h4 class="mb-2 text-sm font-medium text-secondary">Very Narrow Width (120px)</h4>
+					<div class="w-30">
+						<Stepper.Root currentStep="2">
+							<Stepper.Step stepNumber="1"
+								>Configure experiment parameters and settings</Stepper.Step
+							>
+							<Stepper.Step stepNumber="2">Set detailed run conditions and parameters</Stepper.Step>
+							<Stepper.Step stepNumber="3"
+								>Approve all plate maps and final configurations</Stepper.Step
+							>
+						</Stepper.Root>
+					</div>
+				</div>
+			</div>
+		</div>
+	</div>
+</Story>

package/dist/components/stepper/Stepper.stories.svelte.d.ts

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

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

@@ -0,0 +1,20 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import { setContext } from 'svelte';
+
+	interface Props {
+		children: Snippet;
+		class?: string;
+		currentStep?: string;
+	}
+
+	let { children, class: className = '', currentStep }: Props = $props();
+
+	setContext('STEPPER_CONTEXT', {
+		currentStep
+	});
+</script>
+
+<div class="flex w-full flex-col gap-3 {className}" role="progressbar">
+	{@render children()}
+</div>

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

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