@reshape-biotech/design-system 0.0.45 → 0.0.47

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@reshape-biotech/design-system",
-	"version": "0.0.45",
+	"version": "0.0.47",
 	"scripts": {
 		"dev": "vite dev",
 		"build": "vite build",
@@ -40,37 +40,39 @@
 	},
 	"devDependencies": {
 		"@eslint/compat": "^1.2.3",
-		"@sveltejs/adapter-vercel": "^5.5.0",
-		"@sveltejs/kit": "^2.9.0",
-		"@sveltejs/package": "^2.0.0",
-		"@sveltejs/vite-plugin-svelte": "^4.0.0",
+		"@sveltejs/adapter-vercel": "^5.6.2",
+		"@sveltejs/kit": "^2.17.2",
+		"@sveltejs/vite-plugin-svelte": "^5.0.3",
 		"@tailwindcss/container-queries": "^0.1.1",
 		"@tailwindcss/nesting": "^0.0.0-insiders.565cd3e",
 		"@tailwindcss/typography": "^0.5.15",
 		"@testing-library/svelte": "^5.2.6",
 		"autoprefixer": "^10.4.20",
 		"daisyui": "^4.10.5",
+		"echarts": "^5.6.0",
 		"eslint": "^9.7.0",
 		"eslint-config-prettier": "^9.1.0",
-		"eslint-plugin-svelte": "^2.36.0",
+		"eslint-plugin-svelte": "^3.0.0",
 		"globals": "^15.0.0",
 		"luxon": "^3.5.0",
+		"marked": "^15.0.0",
 		"phosphor-svelte": "^3.0.1",
-		"postcss": "^8.4.49",
-		"prettier": "^3.3.2",
+		"postcss": "^8.5.3",
+		"prettier": "^3.5.1",
 		"prettier-plugin-svelte": "^3.2.6",
 		"prettier-plugin-tailwindcss": "^0.6.5",
-		"publint": "^0.2.0",
-		"svelte": "^5.0.0",
+		"publint": "^0.3.0",
+		"svelte": "^5.20.2",
 		"svelte-check": "^4.0.0",
 		"svelte-select": "^5.8.1",
 		"tailwindcss": "^3.4.9",
 		"tailwindest": "^2.3.0",
-		"typescript": "^5.0.0",
+		"typescript": "^5.7.3",
 		"typescript-eslint": "^8.0.0",
-		"vite": "^5.4.4",
-		"vitest": "^2.1.4",
-		"marked": "^15.0.0"
+		"vite": "^6.1.1",
+		"vitest": "^3.0.6"
 	},
-	"dependencies": {}
+	"dependencies": {
+		"bits-ui": "^1.3.2"
+	}
 }

package/dist/app.css

@@ -1,103 +0,0 @@
-@import 'tailwindcss/base';
-@import 'tailwindcss/components';
-@import 'tailwindcss/utilities';
-
-@layer base {
-	@font-face {
-		font-family: 'MD System Mono';
-		font-style: normal;
-		font-weight: 400;
-		src: url('/fonts/MDSystemMono-Regular.woff2') format('woff2');
-	}
-	@font-face {
-		font-family: 'MD System';
-		font-style: normal;
-		font-weight: 400;
-		src: url('/fonts/MDSystem-Regular.woff2') format('woff2');
-	}
-	@font-face {
-		font-family: 'MD System';
-		src: url('/fonts/MDSystem-Medium.woff2') format('woff2');
-		font-weight: 500;
-		font-style: normal;
-	}
-	@font-face {
-		font-family: 'MD System';
-		font-style: normal;
-		font-weight: 600;
-		src: url('/fonts/MDSystem-Semibold.woff2') format('woff2');
-	}
-	body {
-		background-color: theme('backgroundColor.base');
-		color: theme('textColor.primary');
-		font-family: 'MD System', sans-serif;
-		font-style: normal;
-		font-weight: 400;
-		line-height: 140%;
-		font-size: 16px;
-	}
-
-	a {
-		color: theme('textColor.accent');
-		font-family: 'MD System', sans-serif;
-		font-size: 14px;
-		font-style: normal;
-		font-weight: 400;
-		line-height: 140%; /* 19.6px */
-	}
-	a:hover {
-		text-decoration: underline;
-	}
-
-	h1 {
-		font-size: 80px;
-		font-style: normal;
-		font-weight: 600;
-		line-height: 100%; /* 80px */
-		letter-spacing: -1.6px;
-	}
-
-	h2 {
-		font-size: 48px;
-		font-style: normal;
-		font-weight: 600;
-		line-height: 130%; /* 62.4px */
-		letter-spacing: -0.96px;
-	}
-
-	h3 {
-		font-size: 28px;
-		font-style: normal;
-		font-weight: 600;
-		line-height: 130%; /* 36.4px */
-		letter-spacing: -0.56px;
-	}
-
-	h4 {
-		font-size: 20px;
-		font-style: normal;
-		font-weight: 600;
-		line-height: 130%; /* 26px */
-		letter-spacing: -0.4px;
-	}
-
-	h5 {
-		font-size: 16px;
-		font-style: normal;
-		font-weight: 600;
-		line-height: 130%; /* 20.8px */
-	}
-
-	h6 {
-		font-size: 14px;
-		font-style: normal;
-		font-weight: 600;
-		line-height: 130%; /* 18.2px */
-	}
-}
-
-@layer components {
-	html:has(.drawer-auto-gutter .drawer-toggle:checked) {
-		scrollbar-gutter: auto;
-	}
-}

package/dist/components/avatar/Avatar.svelte

@@ -1,63 +0,0 @@
-<script lang="ts">
-	import Tooltip from '../tooltip/Tooltip.svelte';
-	interface Props {
-		name: string | null | undefined;
-		size?: 'sm' | 'md';
-		showTooltip?: boolean;
-	}
-
-	let { name, size = 'md', showTooltip = true }: Props = $props();
-	const sizes = {
-		sm: 'h-5 w-5 min-w-5 text-xxs font-medium',
-		md: 'h-7 w-7 min-w-7 text-xs font-medium'
-	};
-
-	let sizeClassName = $derived(sizes[size]);
-
-	const getInitials = (name: string | null | undefined) => {
-		if (!name) {
-			return '?'; // You can use any default value here
-		}
-		// Check if the name is an email
-		const isEmail = name.includes('@');
-		if (isEmail) {
-			return name.slice(0, 2).toUpperCase();
-		}
-
-		// Split the name by space
-		const splitName = name.split(' ');
-
-		// Check if the name is a single word or already initials
-		if (splitName.length === 1 || (splitName.length === 1 && splitName[0].length <= 2)) {
-			return name.slice(0, 2).toUpperCase();
-		}
-
-		// If the name is multiple words, use the first letter of the first and last word
-		const firstInitial = splitName[0][0];
-		const lastInitial = splitName[splitName.length - 1][0];
-
-		return (firstInitial + lastInitial).toUpperCase();
-	};
-	let initials = $derived(getInitials(name));
-</script>
-
-{#snippet avatar()}
-	<div
-		class="{sizeClassName} flex items-center justify-center rounded-full bg-accent-inverse text-primary-inverse"
-	>
-		{initials}
-	</div>
-{/snippet}
-
-{#if showTooltip}
-	<Tooltip>
-		{#snippet trigger()}
-			{@render avatar()}
-		{/snippet}
-		{#snippet content()}
-			<span>{name ? name : 'Unknown'}</span>
-		{/snippet}
-	</Tooltip>
-{:else}
-	{@render avatar()}
-{/if}

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

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

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

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

package/dist/components/avatar/index.js

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

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

@@ -1,129 +0,0 @@
-<script module lang="ts">
-	import { Info, Warning as WarningIcon } from 'phosphor-svelte';
-	import Banner from './Banner.svelte';
-	import Button from '../button/Button.svelte';
-	import { defineMeta } from '@storybook/addon-svelte-csf';
-
-	const { Story } = defineMeta({
-		component: Banner,
-		title: 'Design System/Banner',
-		tags: ['autodocs']
-	});
-
-	let showBanner = $state(true);
-</script>
-
-<Story name="Well finding warning">
-	<Banner type="warning" closable={false}>
-		{#snippet icon()}
-			<WarningIcon size="100%" weight="bold" />
-		{/snippet}
-		{#snippet content()}
-			Our system couldn't find the wells in some plates. Analysis can't be done. For more help, <a
-				href="https://docs.reshapebiotech.com/reshape-biotech-knowledgebase/general-info/troubleshooting/well-detection"
-				>check our documentation</a
-			>
-			or <a href="mailto:support@reshapebiotech.com">contact us</a>.
-		{/snippet}
-	</Banner>
-</Story>
-
-<Story name="No icon">
-	<Banner type="success">
-		{#snippet content()}
-			This banner has no icon.
-		{/snippet}
-	</Banner>
-</Story>
-
-<Story name="No toggle">
-	<Banner type="progress" closable={false}>
-		{#snippet icon()}
-			<Info size="100%" weight="bold" />
-		{/snippet}
-		{#snippet content()}
-			This banner has no toggle.
-		{/snippet}
-	</Banner>
-</Story>
-
-<Story name="Toggle back on">
-	<div class="h-28">
-		<Button onClick={() => (showBanner = true)} disabled={showBanner}>Toggle banner back on</Button>
-		<br />
-		<br />
-
-		<Banner type="error" bind:show={showBanner}>
-			{#snippet icon()}
-				<Info size="100%" weight="bold" />
-			{/snippet}
-			{#snippet content()}
-				This banner can be toggled off with the "x" to the right and back on with the button above.
-			{/snippet}
-		</Banner>
-	</div>
-</Story>
-
-<Story name="Type variations">
-	<div class="space-y-4">
-		<div class="space-y-2">
-			<h4>Neutral</h4>
-			<Banner type="neutral">
-				{#snippet icon()}
-					<Info size="100%" weight="bold" />
-				{/snippet}
-				{#snippet content()}
-					This is a "neutral" banner.
-				{/snippet}
-			</Banner>
-		</div>
-
-		<div class="space-y-2">
-			<h4>Success</h4>
-			<Banner type="success">
-				{#snippet icon()}
-					<Info size="100%" weight="bold" />
-				{/snippet}
-				{#snippet content()}
-					This is a "success" banner.
-				{/snippet}
-			</Banner>
-		</div>
-
-		<div class="space-y-2">
-			<h4>Progress</h4>
-			<Banner type="progress">
-				{#snippet icon()}
-					<Info size="100%" weight="bold" />
-				{/snippet}
-				{#snippet content()}
-					This is a "progress" banner.
-				{/snippet}
-			</Banner>
-		</div>
-
-		<div class="space-y-2">
-			<h4>Warning</h4>
-			<Banner type="warning">
-				{#snippet icon()}
-					<Info size="100%" weight="bold" />
-				{/snippet}
-				{#snippet content()}
-					This is a "warning" banner.
-				{/snippet}
-			</Banner>
-		</div>
-
-		<div class="space-y-2">
-			<h4>Error</h4>
-			<Banner type="error">
-				{#snippet icon()}
-					<Info size="100%" weight="bold" />
-				{/snippet}
-				{#snippet content()}
-					This is an "error" banner.
-				{/snippet}
-			</Banner>
-		</div>
-	</div>
-</Story>

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

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

package/dist/components/banner/Banner.svelte

@@ -1,59 +0,0 @@
-<script lang="ts">
-	import { X } from 'phosphor-svelte';
-	import type { Snippet } from 'svelte';
-	import { IconButton } from '../icon-button/';
-
-	interface Props {
-		type?: 'neutral' | 'success' | 'progress' | 'warning' | 'error';
-		show?: boolean;
-		closable?: boolean;
-		icon?: Snippet;
-		content: Snippet;
-	}
-
-	let {
-		type = 'neutral',
-		show = $bindable(true),
-		closable = true,
-		icon,
-		content
-	}: Props = $props();
-
-	const color = {
-		neutral: 'neutral',
-		success: 'success',
-		progress: 'blue',
-		warning: 'warning',
-		error: 'danger'
-	}[type];
-</script>
-
-{#if show}
-	<div class="rounded-lg bg-{color} flex h-11 w-full items-center justify-between p-3">
-		<div class="inline-flex items-center justify-start gap-3">
-			{#if icon}
-				<div class="size-5 text-icon-{color} ">
-					{@render icon?.()}
-				</div>
-			{/if}
-			<div class="content text-sm">
-				{@render content?.()}
-			</div>
-		</div>
-		{#if closable}
-			<IconButton size="sm" onclick={() => (show = false)}>
-				<X class="text-icon-secondary" weight="bold" />
-			</IconButton>
-		{/if}
-	</div>
-{/if}
-
-<style>
-	.content :global(a) {
-    font-size: 0.875rem;
-    line-height: 1.25rem;
-    --tw-text-opacity: 1;
-    color: rgb(18 25 42 / var(--tw-text-opacity, 1));
-    text-decoration-line: underline
-}
-</style>

package/dist/components/banner/Banner.svelte.d.ts

@@ -1,11 +0,0 @@
-import type { Snippet } from 'svelte';
-interface Props {
-    type?: 'neutral' | 'success' | 'progress' | 'warning' | 'error';
-    show?: boolean;
-    closable?: boolean;
-    icon?: Snippet;
-    content: Snippet;
-}
-declare const Banner: import("svelte").Component<Props, {}, "show">;
-type Banner = ReturnType<typeof Banner>;
-export default Banner;

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

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

package/dist/components/banner/index.js

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

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

@@ -1,37 +0,0 @@
-<script module lang="ts">
-	import { defineMeta } from '@storybook/addon-svelte-csf';
-	import Button from './Button.svelte';
-
-	const { Story } = defineMeta({
-		component: Button,
-		title: 'Design System/Button',
-		tags: ['autodocs']
-	});
-</script>
-
-<Story name="Primary">
-	<Button variant="primary">Button</Button>
-</Story>
-<Story name="Medium">
-	<Button variant="primary" size="md">Button</Button>
-</Story>
-<Story name="Small">
-	<Button variant="primary" size="sm">Button</Button>
-</Story>
-
-<Story name="Secondary">
-	<Button variant="secondary">Button</Button>
-</Story>
-
-<Story name="Danger">
-	<Button variant="danger">Button</Button>
-</Story>
-<Story name="Transparent">
-	<Button variant="transparent">Button</Button>
-</Story>
-<Story name="Disabled">
-	<Button disabled>Button</Button>
-</Story>
-<Story name="Loading">
-	<Button loading>Button</Button>
-</Story>

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

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