@reshape-biotech/design-system 0.0.45 → 0.0.48

package/dist/components/input/Input.svelte

@@ -5,6 +5,7 @@
 		label?: string | null;
 		value: string | number;
 		type?: 'text' | 'password' | 'textarea' | 'number';
+		name?: string;
 		required?: boolean;
 		autofocus?: boolean;
 		placeholder?: string;
@@ -17,7 +18,8 @@
 		error?: Snippet;
 		input?: HTMLInputElement | HTMLTextAreaElement;
 		maxlength?: number | null;
-		size?: 'xs' | 'sm' | 'md';
+		size?: 'xs' | 'sm' | 'md' | 'lg' | 'dynamic';
+		readonly?: boolean;
 	}
 
 	let {
@@ -28,6 +30,7 @@
 		autofocus = false,
 		placeholder = '',
 		id = undefined,
+		name,
 		validator = (_) => {
 			return true;
 		},
@@ -38,7 +41,8 @@
 		error,
 		input = $bindable(),
 		maxlength = null,
-		size = 'md'
+		size = 'md',
+		readonly = false
 	}: Props = $props();
 
 	let valid = $state(true);
@@ -46,6 +50,7 @@
 	const inputId = Math.random().toString(36).substring(7); // used for A11y
 
 	function handleInput(event: Event) {
+		if (readonly) return;
 		const target = event.target as HTMLTextAreaElement | HTMLInputElement;
 		value = target.value;
 
@@ -54,8 +59,21 @@
 		}
 	}
 	function autoResizeTextarea(textarea: HTMLTextAreaElement) {
+		// Set a maximum height for the textarea (e.g., 200px)
+		const maxHeight = 200;
+
+		// Reset height to auto to get the correct scrollHeight
 		textarea.style.height = 'auto';
-		textarea.style.height = `${textarea.scrollHeight}px`;
+
+		// If scrollHeight is less than maxHeight, set height to scrollHeight
+		// Otherwise, set height to maxHeight and enable scrolling
+		if (textarea.scrollHeight < maxHeight) {
+			textarea.style.height = `${textarea.scrollHeight}px`;
+			textarea.style.overflowY = 'hidden';
+		} else {
+			textarea.style.height = `${maxHeight}px`;
+			textarea.style.overflowY = 'auto';
+		}
 	}
 
 	function handleBlur(event: Event) {
@@ -88,6 +106,8 @@
 				{autofocus}
 				{placeholder}
 				{maxlength}
+				{name}
+				{readonly}
 			></textarea>
 		{:else}
 			<div class="whitespace-nowrap text-secondary">
@@ -100,6 +120,7 @@
 				class:has-placeholder={placeholder}
 				aria-label={label}
 				{type}
+				{name}
 				{required}
 				oninput={handleInput}
 				onblur={handleBlur}
@@ -109,6 +130,7 @@
 				{autofocus}
 				{placeholder}
 				{maxlength}
+				{readonly}
 			/>
 			<div class="whitespace-nowrap text-secondary">
 				{@render suffix?.()}
@@ -123,60 +145,60 @@
 <style>
 	input,
 	textarea {
-
-    width: 100%;
-
-    resize: none;
-
-    overflow: hidden;
-
-    outline: 2px solid transparent;
-
-    outline-offset: 2px
+		width: 100%;
+		outline: 2px solid transparent;
+		outline-offset: 2px;
+		/* Remove the resize-none class to allow scrolling */
+		resize: none
 }
 
 	div:not(:focus-within):hover {
-
-    border-color: #5750ee40
+		border-color: #5750ee40
 }
 
 	div:focus-within {
-
-    --tw-border-opacity: 1;
-
-    border-color: rgb(87 80 238 / var(--tw-border-opacity, 1))
+		--tw-border-opacity: 1;
+		border-color: rgb(87 80 238 / var(--tw-border-opacity, 1))
 }
 
 	.size-xs {
-
-    padding: 0.5rem;
-
-    font-size: 0.75rem;
-
-    line-height: 1rem
+		height: 1.5rem;
+		padding: 0.5rem;
+		font-size: 0.75rem;
+		line-height: 1rem
 }
 
 	.size-sm {
-
-    padding-left: 0.75rem;
-
-    padding-right: 0.75rem;
-
-    padding-top: 0.5rem;
-
-    padding-bottom: 0.5rem;
-
-    font-size: 0.875rem;
-
-    line-height: 1.25rem
+		height: 2rem;
+		padding-left: 0.75rem;
+		padding-right: 0.75rem;
+		padding-top: 0.5rem;
+		padding-bottom: 0.5rem
 }
 
 	.size-md {
+		height: 2.5rem;
+		padding-left: 0.75rem;
+		padding-right: 0.75rem;
+		padding-top: 0.5rem;
+		padding-bottom: 0.5rem
+}
 
-    padding: 0.75rem;
-
-    font-size: 1rem;
+	.size-lg {
+		height: 3rem;
+		padding-left: 0.75rem;
+		padding-right: 0.75rem;
+		padding-top: 0.75rem;
+		padding-bottom: 0.75rem;
+		font-size: 1rem;
+		line-height: 1.5rem
+}
 
-    line-height: 1.5rem
+	.size-dynamic {
+		height: auto;
+		padding-left: 0.75rem;
+		padding-right: 0.75rem;
+		padding-top: 0.5rem;
+		padding-bottom: 0.5rem
 }
 </style>

package/dist/components/input/Input.svelte.d.ts

@@ -1,8 +1,9 @@
 import type { Snippet } from 'svelte';
-declare const Input: import("svelte").Component<{
+interface Props {
     label?: string | null;
     value: string | number;
-    type?: "text" | "password" | "textarea" | "number";
+    type?: 'text' | 'password' | 'textarea' | 'number';
+    name?: string;
     required?: boolean;
     autofocus?: boolean;
     placeholder?: string;
@@ -15,7 +16,9 @@ declare const Input: import("svelte").Component<{
     error?: Snippet;
     input?: HTMLInputElement | HTMLTextAreaElement;
     maxlength?: number | null;
-    size?: "xs" | "sm" | "md";
-}, {}, "input" | "value">;
+    size?: 'xs' | 'sm' | 'md' | 'lg' | 'dynamic';
+    readonly?: boolean;
+}
+declare const Input: import("svelte").Component<Props, {}, "value" | "input">;
 type Input = ReturnType<typeof Input>;
 export default Input;

package/dist/components/list/List.svelte

@@ -37,7 +37,7 @@
 
 		.listStyles.default {
 
-    gap: 0.5rem
+    gap: 1rem
 }
 
 		.listStyles.compact {
@@ -48,13 +48,9 @@
 
     background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
 
-    padding-bottom: 0.5rem;
+    padding-left: 1rem;
 
-    padding-left: 1.5rem;
-
-    padding-right: 1.5rem;
-
-    padding-top: 0.5rem
+    padding-right: 1rem
 }
 
 		.listStyles.compact :global(> .item:not(:last-child)) {
@@ -63,9 +59,7 @@
 
     border-style: solid;
 
-    --tw-border-opacity: 1;
-
-    border-color: var(--fallback-n,oklch(var(--n)/var(--tw-border-opacity, 1)))
+    border-color: #12192a14
 }
 
 		.listStyles :global(.item) {

package/dist/components/logo/Logo.svelte

@@ -1,9 +1,15 @@
 <script lang="ts">
 	type Props = {
 		size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+		color?: 'default' | 'white';
 	};
 
-	let { size = 'md' }: Props = $props();
+	let { size = 'md', color = 'default' }: Props = $props();
+
+	const colorMap = {
+		default: '#ff7a00',
+		white: '#ffffff'
+	};
 
 	const sizeMap = {
 		xs: 16,
@@ -18,19 +24,16 @@
 	width={sizeMap[size]}
 	height={sizeMap[size]}
 	viewBox={`0 0 24 24`}
-	fill="none"
+	fill={colorMap[color]}
 	xmlns="http://www.w3.org/2000/svg"
 >
 	<path
 		d="M5.25 10.5C2.3511 10.5 0 8.1489 0 5.25C0 2.3511 2.3511 0 5.25 0C8.1489 0 10.5 2.3511 10.5 5.25C10.5034 8.1489 8.1523 10.5 5.25 10.5Z"
-		fill="#FF7A00"
 	/>
 	<path
 		d="M18.75 10.5C15.8511 10.5 13.5 8.1489 13.5 5.25C13.5 2.3511 15.8511 0 18.75 0C21.6489 0 24 2.3511 24 5.25C24.0034 8.1489 21.6523 10.5 18.75 10.5Z"
-		fill="#FF7A00"
 	/>
 	<path
 		d="M0 18.75C0 15.8511 2.3511 13.5 5.25 13.5C8.1489 13.5 10.5 15.8511 10.5 18.75C10.5 21.6489 8.1489 24 5.25 24C2.3511 24 0 21.6489 0 18.75Z"
-		fill="#FF7A00"
 	/>
 </svg>

package/dist/components/logo/Logo.svelte.d.ts

@@ -1,5 +1,6 @@
 type Props = {
     size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+    color?: 'default' | 'white';
 };
 declare const Logo: import("svelte").Component<Props, {}, "">;
 type Logo = ReturnType<typeof Logo>;

package/dist/components/modal/Modal.svelte

@@ -65,7 +65,7 @@
     max-width: 100%;
     border-radius: 0.75rem;
     --tw-bg-opacity: 1;
-    background-color: rgb(243 250 252 / var(--tw-bg-opacity, 1))
+    background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1))
 }
 	.close-button {
     position: absolute;

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

@@ -19,8 +19,8 @@
 
 <Story name="Primary">
 	<NotificationPopup onClose={handleClick} title="See what's new" {visible}>
-		<a href="_blank" color="transparent" class="flex items-center gap-1 font-sans">
-			<Sparkle />
+		<a href="_blank" color="transparent" class="flex items-center gap-2">
+			<Sparkle weight="bold" />
 			<p>Product updates</p>
 		</a>
 	</NotificationPopup>

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

@@ -18,7 +18,7 @@
 {#if visible}
 	<div
 		{id}
-		class="flex w-[184px] justify-between rounded-lg bg-surface p-3 shadow-2xl"
+		class="flex w-[200px] justify-between rounded-lg bg-surface p-3 shadow-menu"
 		in:fly={{ y: 100, duration: 1000 }}
 		out:fade
 	>
@@ -26,6 +26,8 @@
 			<h6 class="flex h-6 items-center">{title}</h6>
 			{@render children?.()}
 		</div>
-		<IconButton size="xs" onclick={onClose}><X /></IconButton>
+		<IconButton size="xs" variant="transparent" rounded={false} onclick={onClose}
+			><X class="text-icon-tertiary" weight="bold" /></IconButton
+		>
 	</div>
 {/if}

package/dist/components/segmented-control-buttons/ControlButton.svelte

@@ -23,10 +23,8 @@
 		children
 	}: Props = $props();
 	const colors: Record<Color, string> = {
-		primary:
-			'bg-transparent text-primary hover:bg-neutral disabled:bg-neutral disabled:text-tertiary',
-		secondary:
-			'bg-transparent text-primary hover:bg-neutral disabled:bg-neutral disabled:text-tertiary'
+		primary: 'bg-transparent text-primary hover:bg-neutral disabled:text-tertiary',
+		secondary: 'bg-transparent text-primary hover:bg-neutral disabled:text-tertiary'
 	};
 </script>
 

package/dist/components/select/Select.svelte

@@ -46,7 +46,7 @@
 		dispatch('change', e.detail);
 		onChange(e.detail);
 	}}
-	class={`select ${className}`}
+	class={`select ${className} h-10`}
 	{required}
 	bind:value
 	bind:listOpen
@@ -75,9 +75,10 @@
 	--border-hover="1px solid {borderColor['hover']}"
 	--border-focused="1px solid {borderColor['focus']}"
 	--border-radius="8px"
+	--font-size="text-sm"
 >
 	<div slot="chevron-icon" class="">
-		<CaretDown weight="bold" size="1rem" />
+		<CaretDown weight="bold" size="1rem" class="text-icon-secondary" />
 	</div>
 
 	<div slot="selection" let:selection>
@@ -112,9 +113,11 @@
 	}
 
 	:global(.svelte-select) {
-		box-shadow: 0px 4px 17px 0px rgba(0, 0, 0, 0.02);
 		width: 100%;
-	}
+		--tw-shadow: 0 1px 4px 0 rgba(18, 25, 42, 0.04);
+		--tw-shadow-colored: 0 1px 4px 0 var(--tw-shadow-color);
+		box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+}
 
 	:global(.svelte-select .item.active) {
 		background-color: #5750ee1A;

package/dist/components/skeleton-loader/StatcardSkeleton.svelte

@@ -4,13 +4,10 @@
 
 <SkeletonLoader>
 	{#snippet children({ Skeleton })}
-		<div
-			class="flex h-24 flex-1 flex-col justify-between gap-2 rounded-lg bg-surface p-4 shadow-field"
-		>
+		<div class="flex h-[92px] flex-1 flex-col justify-between gap-2 rounded-lg bg-neutral p-4">
 			<Skeleton class="h-4 w-1/2 "></Skeleton>
 			<div class="flex items-baseline gap-2">
-				<Skeleton class="h-8 w-8 " />
-				<Skeleton class="h-4 w-16 " />
+				<Skeleton class="h-8 w-16" />
 			</div>
 		</div>
 	{/snippet}

package/dist/components/slider/Slider.svelte

@@ -1,12 +1,14 @@
 <script lang="ts">
-	import { CaretLeft, CaretRight } from 'phosphor-svelte';
+	import { CaretUpDown } from 'phosphor-svelte';
 	let className = '';
 	export { className as class };
 	export let value = 0;
 	export let max: number;
 	export let buffer = 0;
 	export let bufferMin = 0;
-	export let bufferColorClass = 'bg-accent-inverse';
+	export let bufferColorClass = 'bg-neutral';
+	export let filledColorClass = 'bg-accent-inverse';
+	export let showFilled = false;
 	export let showSteps = false;
 	export let onMousedown: () => void = () => {};
 	export let onMouseup: () => void = () => {};
@@ -22,25 +24,31 @@
 	$: buffer = Math.min(buffer, visualMax);
 
 	function calculatePosition(positionFactor: number): string {
-		return `calc((${positionFactor / visualMax} * (100% - 2.5rem))`;
+		return `calc((${positionFactor / visualMax} * (100% - 1rem))`;
 	}
 </script>
 
 <div class={`relative flex h-10 items-center ${className}`}>
 	<div class="track-overlay"></div>
 	<div
-		class="pointer-events-none absolute h-2 rounded-full {bufferColorClass}"
+		class="pointer-events-none absolute h-2.5 rounded-full {bufferColorClass}"
 		style="
-      width: {calculatePosition(buffer - bufferMin)} + 0.5rem);
-      left: {calculatePosition(bufferMin)} + 1rem)
+      width: {calculatePosition(buffer - bufferMin)} + 1rem);
+      left: {calculatePosition(bufferMin)}
     "
 	></div>
+	{#if showFilled}
+		<div
+			class="absolute h-2.5 rounded-full {filledColorClass}"
+			style="width: {calculatePosition(value)} + 1rem);left: 0;"
+		></div>
+	{/if}
 	{#if showSteps}
-		<div class="h-2">
+		<div class="h-2.5">
 			{#each Array(visualMax + 1) as _, index}
 				<div
-					class="absolute h-1 w-1 translate-y-1/2 rounded-full bg-surface"
-					style="left: {calculatePosition(index)} + 1.125rem"
+					class="absolute h-1.5 w-1.5 translate-y-[2px] rounded-full bg-surface ring ring-1 ring-gray-950/10"
+					style="left: {calculatePosition(index)} + 0.25rem"
 				></div>
 			{/each}
 		</div>
@@ -54,24 +62,23 @@
 		on:mousedown={onMousedown}
 		on:mouseup={onMouseup}
 	/>
-	<div class="thumb-overlay" style="left: {calculatePosition(value)} + 1.25rem)">
-		<CaretLeft class="text-primary" size="0.75rem" weight="bold" />
-		<CaretRight class="text-primary" size="0.75rem" weight="bold" />
+	<div class="thumb-overlay" style="left: {calculatePosition(value)} + 0.5rem)">
+		<CaretUpDown class="rotate-90 text-primary" size="1rem" weight="bold" />
 	</div>
 </div>
 
 <style>
 	.track-overlay {
-		width: calc(100% - 2rem);
-		cursor: pointer;
 		pointer-events: none;
 		position: absolute;
-		margin-left: 1rem;
-		margin-right: 1rem;
-		height: 0.5rem;
+		height: 0.625rem;
+		width: 100%;
+		cursor: pointer;
 		border-radius: 9999px;
-		background-color: #12192A26;
-	}
+		border-width: 1px;
+		border-color: #12192a14;
+		background-color: #12192a0d;
+}
 
 	.thumb-overlay {
 		transform: translate(-50%, 50%);
@@ -79,15 +86,17 @@
 		position: absolute;
 		bottom: 1.25rem;
 		display: inline-flex;
-		height: 2.5rem;
-		width: 2.5rem;
+		height: 2rem;
+		width: 2rem;
 		align-items: center;
 		justify-content: center;
 		border-radius: 9999px;
+		border-width: 1px;
+		border-color: #12192A26;
 		--tw-bg-opacity: 1;
 		background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
-		--tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
-		--tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
+		--tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
+		--tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
 		box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
 	}
 

package/dist/components/slider/Slider.svelte.d.ts

@@ -18,6 +18,8 @@ declare const Slider: $$__sveltets_2_IsomorphicComponent<{
     buffer?: number;
     bufferMin?: number;
     bufferColorClass?: string;
+    filledColorClass?: string;
+    showFilled?: boolean;
     showSteps?: boolean;
     onMousedown?: () => void;
     onMouseup?: () => void;

package/dist/components/stat-card/StatCard.svelte

@@ -22,14 +22,14 @@
 </script>
 
 <div
-	class="flex h-24 min-w-[130px] flex-shrink-0 flex-grow basis-0 flex-col items-start gap-2 rounded-lg bg-surface p-4 shadow-field"
+	class="flex w-full flex-shrink-0 flex-grow basis-0 flex-col items-start gap-2 overflow-clip rounded-lg bg-neutral p-4"
 >
-	<h5 class="flex items-center justify-start gap-1 text-secondary">
+	<p class="flex items-center justify-start gap-2 truncate font-medium text-secondary">
 		{title}
 		{#if titleTooltip && showTitleTooltip}
 			<Tooltip>
 				{#snippet trigger()}
-					<Info class="icon" size="1rem" weight="bold" />
+					<Info class="icon text-icon-tertiary" size="1rem" weight="bold" />
 				{/snippet}
 				{#snippet content()}
 					<span>
@@ -38,12 +38,12 @@
 				{/snippet}
 			</Tooltip>
 		{/if}
-	</h5>
+	</p>
 	<div class="flex items-baseline gap-1">
 		{#if value !== null}
-			<h3>{formattedValue}</h3>
+			<p class="text-2xl font-medium">{formattedValue}</p>
 			{#if unit}
-				<h5>{unit}</h5>
+				<p class="truncate text-2xl font-medium text-tertiary">{unit}</p>
 			{/if}
 		{:else}
 			<Spinner />

package/dist/components/table/Table.svelte

@@ -31,7 +31,7 @@
 	};
 </script>
 
-<div class="w-full rounded-lg bg-surface px-6 pb-1 pt-3">
+<div class="w-full rounded-lg border border-static bg-surface px-5 py-2 shadow-container">
 	<table class={`w-full table-fixed sm:table-auto xl:table-${tableLayout}`}>
 		{@render children?.({ THead: THead, TBody: TBody, Tr: Tr, Th: Th, Td: Td })}
 	</table>

package/dist/components/table/components/Th.svelte

@@ -10,6 +10,6 @@
 	let { class: className = '', children }: Props = $props();
 </script>
 
-<th class={`text-left text-xs font-normal text-secondary ${className}`}>
+<th class={`text-left text-xs font-medium text-tertiary ${className}`}>
 	{@render children?.()}
 </th>

package/dist/components/tag/Tag.svelte

@@ -21,8 +21,8 @@
 	}: Props = $props();
 
 	const sizes = {
-		sm: 'h-6  text-xs',
-		md: 'h-6  text-sm'
+		sm: 'h-6 text-xs p-1.5',
+		md: 'h-7 text-sm p-2'
 	};
 	let sizeClassName = $derived(sizes[size]);
 
@@ -86,9 +86,7 @@
 
     white-space: nowrap;
 
-    border-radius: 0.25rem;
-
-    padding: 0.25rem
+    border-radius: 0.25rem
 }
 
 	svg {

package/dist/components/tag/Tag.svelte.d.ts

@@ -1,11 +1,12 @@
 import type { Snippet } from 'svelte';
-declare const Tag: import("svelte").Component<{
+interface Props {
     children: Snippet;
-    variant?: "default" | "outline" | "transparent";
-    size?: "sm" | "md";
+    variant?: 'default' | 'outline' | 'transparent';
+    size?: 'sm' | 'md';
     tooltip?: string;
     onclick?: (event: MouseEvent) => void;
     class?: string;
-}, {}, "">;
+}
+declare const Tag: import("svelte").Component<Props, {}, "">;
 type Tag = ReturnType<typeof Tag>;
 export default Tag;

package/dist/components/toggle/Toggle.svelte.d.ts

@@ -1,7 +1,8 @@
-declare const Toggle: import("svelte").Component<{
+interface Props {
     value?: boolean;
     onclick?: (event?: MouseEvent) => void;
     id: string;
-}, {}, "value">;
+}
+declare const Toggle: import("svelte").Component<Props, {}, "value">;
 type Toggle = ReturnType<typeof Toggle>;
 export default Toggle;

package/dist/fonts/index.d.ts

@@ -1,6 +1,4 @@
 export declare const fonts: {
     MDSystemMonoRegular: string;
-    MDSystemRegular: string;
-    MDSystemMedium: string;
-    MDSystemSemibold: string;
+    afAnotherSans: string;
 };

package/dist/fonts/index.js

@@ -1,10 +1,6 @@
 import MDSystemMonoRegular from './MDSystemMono-Regular.woff2';
-import MDSystemRegular from './MDSystem-Regular.woff2';
-import MDSystemMedium from './MDSystem-Medium.woff2';
-import MDSystemSemibold from './MDSystem-Semibold.woff2';
+import afAnotherSans from './afAnotherSans.woff2';
 export const fonts = {
     MDSystemMonoRegular,
-    MDSystemRegular,
-    MDSystemMedium,
-    MDSystemSemibold
+    afAnotherSans
 };