@reshape-biotech/design-system 0.0.52 → 1.1.1

package/dist/components/manual-cfu-counter/ManualCFUCounter.svelte.d.ts

@@ -0,0 +1,16 @@
+interface Props {
+    imageUrl: string;
+    marks?: Array<{
+        x: number;
+        y: number;
+    }>;
+    onclick?: (event: MouseEvent, marks: Array<{
+        x: number;
+        y: number;
+    }>) => void;
+    disabled?: boolean;
+    hideMarkers?: boolean;
+}
+declare const ManualCfuCounter: import("svelte").Component<Props, {}, "marks">;
+type ManualCfuCounter = ReturnType<typeof ManualCfuCounter>;
+export default ManualCfuCounter;

package/dist/components/manual-cfu-counter/index.d.ts

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

package/dist/components/manual-cfu-counter/index.js

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

package/dist/components/manual-cfu-counter/test/ManualCFUCounterTestWrapper.svelte

@@ -0,0 +1,22 @@
+<!-- src/lib/design-system/src/lib/components/manual-cfu-counter/ManualCFUCounterTestWrapper.svelte -->
+<script lang="ts">
+	import ManualCFUCounter from '../ManualCFUCounter.svelte';
+
+	interface Props {
+		initialTestMarks?: Array<{ x: number; y: number }>;
+		imageUrl?: string;
+		onclick?: (event: MouseEvent, marks: Array<{ x: number; y: number }>) => void;
+	}
+
+	let { initialTestMarks = [], imageUrl = 'test-image.jpg', onclick }: Props = $props();
+
+	let marks = $state([...initialTestMarks]);
+
+	export function getCurrentMarks() {
+		return marks;
+	}
+</script>
+
+<ManualCFUCounter bind:marks {imageUrl} {onclick} />
+
+<span data-testid="wrapper-marks-count" class="sr-only">{marks.length}</span>

package/dist/components/manual-cfu-counter/test/ManualCFUCounterTestWrapper.svelte.d.ts

@@ -0,0 +1,19 @@
+interface Props {
+    initialTestMarks?: Array<{
+        x: number;
+        y: number;
+    }>;
+    imageUrl?: string;
+    onclick?: (event: MouseEvent, marks: Array<{
+        x: number;
+        y: number;
+    }>) => void;
+}
+declare const ManualCfuCounterTestWrapper: import("svelte").Component<Props, {
+    getCurrentMarks: () => {
+        x: number;
+        y: number;
+    }[];
+}, "">;
+type ManualCfuCounterTestWrapper = ReturnType<typeof ManualCfuCounterTestWrapper>;
+export default ManualCfuCounterTestWrapper;

package/dist/components/markdown/Markdown.stories.svelte

@@ -10,7 +10,7 @@
 	});
 </script>
 
-<Story name="Primary">
+<Story name="Primary" asChild>
 	<Markdown
 		markdown={`# Welcome to My Markdown Story
 

package/dist/components/markdown/Markdown.svelte

@@ -7,6 +7,6 @@
 	let { markdown }: Props = $props();
 </script>
 
-<div class="prose text-sm text-tertiary dark:prose-invert">
+<div class="prose text-sm text-secondary dark:prose-invert">
 	{@html marked.parse(markdown ?? '')}
 </div>

package/dist/components/modal/Modal.stories.svelte

@@ -12,7 +12,7 @@
 	let defaultOpen = $state(true);
 </script>
 
-<Story name="Default">
+<Story name="Default" asChild>
 	<Modal>
 		{#snippet Trigger({ openModal })}
 			<Button onClick={openModal}>Open Modal</Button>
@@ -25,7 +25,7 @@
 	</Modal>
 </Story>
 
-<Story name="Default open">
+<Story name="Default open" asChild>
 	<Modal {defaultOpen} onclose={() => (defaultOpen = false)}>
 		{#snippet Trigger({ openModal })}
 			<Button onClick={openModal}>Open Modal</Button>

package/dist/components/modal/Modal.svelte

@@ -1,28 +1,35 @@
 <script lang="ts">
-	import type { Snippet } from 'svelte';
+	import { type Snippet } from 'svelte';
 	import { v4 as uuidv4 } from 'uuid';
 	import IconButton from '../icon-button/IconButton.svelte';
 	import { Icon } from '../icons';
+	import Divider from '../divider/Divider.svelte';
 
 	type ModalProps = {
 		Trigger?: Snippet<[{ openModal: () => void; closeModal: () => void }]>;
+		Header?: Snippet;
 		Content: Snippet;
+		Footer?: Snippet;
 		onclose?: () => void;
 		defaultOpen?: boolean;
 		id?: string;
 		withClose?: boolean;
 		closeOnClickOutside?: boolean;
 		class?: string;
+		contentClass?: string;
 	};
 	let {
 		Trigger,
+		Header,
 		Content,
+		Footer,
 		onclose,
 		defaultOpen = false,
 		id = 'modal-' + uuidv4(),
 		withClose = true,
 		closeOnClickOutside = true,
-		class: modalClass
+		class: modalClass,
+		contentClass = 'p-4'
 	}: ModalProps = $props();
 
 	const modalOpen = $state(defaultOpen);
@@ -42,15 +49,29 @@
 	{@render Trigger({ openModal, closeModal })}
 {/if}
 <dialog {id} class="modal w-full max-w-full" class:modal-open={modalOpen}>
-	<div class="modal-box {modalClass}">
+	<div class="modal-box relative flex max-w-full flex-col rounded-xl bg-surface p-0 {modalClass}">
+		{#if Header}
+			<div class="flex h-12 items-center px-4">
+				{@render Header()}
+			</div>
+			<Divider />
+		{/if}
 		{#if withClose}
-			<div class="close-button">
-				<IconButton onclick={closeModal} size="md" variant="secondary">
+			<div class="absolute right-0 top-0 z-10 p-2">
+				<IconButton onclick={closeModal} size="md" variant="transparent" rounded={false}>
 					<Icon iconName="X" />
 				</IconButton>
 			</div>
 		{/if}
-		{@render Content()}
+		<div class="flex-1 {contentClass}">
+			{@render Content()}
+		</div>
+		{#if Footer}
+			<Divider />
+			<div class="px-4 py-2">
+				{@render Footer()}
+			</div>
+		{/if}
 	</div>
 	{#if closeOnClickOutside}
 		<form method="dialog" class="modal-backdrop">
@@ -58,19 +79,3 @@
 		</form>
 	{/if}
 </dialog>
-
-<style>
-	.modal-box {
-    position: relative;
-    max-width: 100%;
-    border-radius: 0.75rem;
-    --tw-bg-opacity: 1;
-    background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1))
-}
-	.close-button {
-    position: absolute;
-    right: 0px;
-    top: 0px;
-    padding: 1.5rem
-}
-</style>

package/dist/components/modal/Modal.svelte.d.ts

@@ -1,16 +1,19 @@
-import type { Snippet } from 'svelte';
+import { type Snippet } from 'svelte';
 type ModalProps = {
     Trigger?: Snippet<[{
         openModal: () => void;
         closeModal: () => void;
     }]>;
+    Header?: Snippet;
     Content: Snippet;
+    Footer?: Snippet;
     onclose?: () => void;
     defaultOpen?: boolean;
     id?: string;
     withClose?: boolean;
     closeOnClickOutside?: boolean;
     class?: string;
+    contentClass?: string;
 };
 declare const Modal: import("svelte").Component<ModalProps, {}, "">;
 type Modal = ReturnType<typeof Modal>;

package/dist/components/notification-popup/NotificationPopup.stories.svelte

@@ -16,7 +16,7 @@
 	}
 </script>
 
-<Story name="Primary">
+<Story name="Primary" asChild>
 	<NotificationPopup onClose={handleClick} title="See what's new" {visible}>
 		<a href="_blank" color="transparent" class="flex items-center gap-2">
 			<Icon iconName="Sparkle" />

package/dist/components/pill/Pill.stories.svelte

@@ -0,0 +1,13 @@
+<script lang="ts" module>
+	import { defineMeta } from '@storybook/addon-svelte-csf';
+	import Pill from './Pill.svelte';
+
+	// More on how to set up stories at: https://storybook.js.org/docs/writing-stories
+	const { Story } = defineMeta({
+		title: 'Design System/Pill',
+		component: Pill,
+		tags: ['autodocs']
+	});
+</script>
+
+<Story name="Base" args={{ text: 'Example Pill' }} />

package/dist/components/pill/Pill.stories.svelte.d.ts

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

package/dist/components/progress-circle/ProgressCircle.stories.svelte

@@ -0,0 +1,15 @@
+<script lang="ts" module>
+	import { defineMeta } from '@storybook/addon-svelte-csf';
+	import ProgressCircle from './ProgressCircle.svelte';
+
+	// More on how to set up stories at: https://storybook.js.org/docs/writing-stories
+	const { Story } = defineMeta({
+		title: 'Design System/ProgressCircle',
+		component: ProgressCircle,
+		tags: ['autodocs']
+	});
+</script>
+
+<Story name="Base" args={{ progress: 20 }} />
+
+<Story name="Small" args={{ progress: 20, size: 'sm' }} />

package/dist/components/progress-circle/ProgressCircle.stories.svelte.d.ts

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

package/dist/components/required-status-indicator/RequiredStatusIndicator.stories.svelte

@@ -0,0 +1,28 @@
+<script module lang="ts">
+	import { defineMeta } from '@storybook/addon-svelte-csf';
+	import RequiredStatusIndicator from './RequiredStatusIndicator.svelte';
+
+	const { Story } = defineMeta({
+		title: 'Design System/RequiredStatusIndicator',
+		component: RequiredStatusIndicator,
+		tags: ['autodocs'],
+		argTypes: {
+			currentCount: { control: 'number', description: 'Current number of completed items' },
+			requiredCount: { control: 'number', description: 'Total number of required items' },
+			class: { control: 'text', description: 'Optional additional CSS classes' }
+		}
+	});
+</script>
+
+<Story name="Incomplete" args={{ currentCount: 1, requiredCount: 3 }} />
+
+<Story name="Complete" args={{ currentCount: 3, requiredCount: 3 }} />
+
+<Story
+	name="CustomClass"
+	args={{
+		currentCount: 2,
+		requiredCount: 4,
+		class: 'text-lg text-warning'
+	}}
+/>

package/dist/components/required-status-indicator/RequiredStatusIndicator.stories.svelte.d.ts

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

package/dist/components/required-status-indicator/RequiredStatusIndicator.svelte

@@ -0,0 +1,22 @@
+<script lang="ts">
+	import { Icon } from '../icons';
+
+	type Props = {
+		currentCount: number;
+		requiredCount: number;
+		class?: string;
+	};
+
+	let { currentCount, requiredCount, class: className = '' }: Props = $props();
+
+	const isComplete = $derived(currentCount >= requiredCount);
+</script>
+
+<span class={`flex items-center gap-1 text-sm text-tertiary ${className}`}>
+	{currentCount} of {requiredCount} required
+	{#if isComplete}
+		<Icon iconName="CheckCircle" weight="fill" color="accent" size={16} />
+	{:else}
+		<Icon iconName="CheckCircle" size={16} />
+	{/if}
+</span>

package/dist/components/required-status-indicator/RequiredStatusIndicator.svelte.d.ts

@@ -0,0 +1,8 @@
+type Props = {
+    currentCount: number;
+    requiredCount: number;
+    class?: string;
+};
+declare const RequiredStatusIndicator: import("svelte").Component<Props, {}, "">;
+type RequiredStatusIndicator = ReturnType<typeof RequiredStatusIndicator>;
+export default RequiredStatusIndicator;

package/dist/components/required-status-indicator/index.d.ts

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

package/dist/components/required-status-indicator/index.js

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

package/dist/components/segmented-control-buttons/SegmentedControlButtons.stories.svelte

@@ -10,7 +10,7 @@
 	});
 </script>
 
-<Story name="Primary">
+<Story name="Primary" asChild>
 	<SegmentedControlButtons class="w-[350px]">
 		{#snippet children({ ControlButton })}
 			<ControlButton active><Icon iconName="Star" /> Low</ControlButton>
@@ -19,7 +19,7 @@
 		{/snippet}
 	</SegmentedControlButtons>
 </Story>
-<Story name="Large">
+<Story name="Large" asChild>
 	<SegmentedControlButtons size="lg" class="w-[350px]">
 		{#snippet children({ ControlButton })}
 			<ControlButton active><Icon iconName="Star" /> Low</ControlButton>
@@ -28,7 +28,7 @@
 		{/snippet}
 	</SegmentedControlButtons>
 </Story>
-<Story name="Secondary">
+<Story name="Secondary" asChild>
 	<SegmentedControlButtons class="w-[350px]">
 		{#snippet children({ ControlButton })}
 			<ControlButton active color="secondary">

package/dist/components/select/Select.stories.svelte

@@ -23,55 +23,55 @@
 	}
 </script>
 
-<Story name="Default">
+<Story name="Default" asChild>
 	<div class="py-12">
 		<Select listOpen {items} />
 	</div>
 </Story>
-<Story name="Grouped">
+<Story name="Grouped" asChild>
 	<div class="py-12">
 		<Select listOpen {items} withGroup />
 	</div>
 </Story>
 
-<Story name="DefaultValue">
+<Story name="DefaultValue" asChild>
 	<div class="py-12">
 		<Select listOpen {items} withGroup value={{ value: '1', label: 'One', group: 'Group 1' }} />
 	</div>
 </Story>
 
-<Story name="Disabled">
+<Story name="Disabled" asChild>
 	<div class="py-12">
 		<Select listOpen {items} disabled />
 	</div>
 </Story>
-<Story name="Searchable">
+<Story name="Searchable" asChild>
 	<div class="py-12">
 		<Select listOpen {items} searchable />
 	</div>
 </Story>
-<Story name="Open">
+<Story name="Open" asChild>
 	<div class="py-12">
 		<Select listOpen {items} />
 	</div>
 </Story>
-<Story name="Error">
+<Story name="Error" asChild>
 	<div class="py-12">
 		<Select listOpen {items} hasError />
 	</div>
 </Story>
-<Story name="Placeholder">
+<Story name="Placeholder" asChild>
 	<div class="py-12">
 		<Select listOpen {items} placeholder="Select a value" />
 	</div>
 </Story>
-<Story name="Multiple">
+<Story name="Multiple" asChild>
 	<div class="py-12">
 		<Select listOpen {items} multiple bind:value />
 	</div>
 </Story>
 
-<Story name="Bind value input changed">
+<Story name="Bind value input changed" asChild>
 	<div class="py-12">
 		<Select listOpen {items} bind:value on:input={handleInput} />
 		{#if thisChanged}
@@ -79,7 +79,7 @@
 	</div>
 </Story>
 
-<Story name="Custom Item">
+<Story name="Custom Item" asChild>
 	<div class="py-12">
 		<Select listOpen {items} value={{ value: '1', label: 'One', group: 'Group 1' }}>
 			<!-- @migration-task: migrate this slot by hand, `custom-item` is an invalid identifier -->
@@ -101,7 +101,7 @@
 	</div>
 </Story>
 
-<Story name="Custom selection label">
+<Story name="Custom selection label" asChild>
 	<div class="py-12">
 		<Select {items} value={{ value: '1', label: 'One', group: 'Group 1' }}>
 			<!-- @migration-task: migrate this slot by hand, `custom-selection` is an invalid identifier -->

package/dist/components/select/Select.svelte

@@ -9,8 +9,6 @@
 	import SvelteSelect from 'svelte-select';
 	import type { SelectItemProps } from '.';
 
-	// Docs: https://github.com/rob-balfre/svelte-select
-
 	const dispatch = createEventDispatcher();
 
 	export let items: SelectItemProps[] = [];