@reshape-biotech/design-system 0.0.43 → 0.0.45

package/dist/components/icon-button/IconButton.svelte

@@ -2,9 +2,9 @@
 	import type { Snippet } from 'svelte';
 	import { Spinner } from '../spinner/';
 
-	type Color = 'primary' | 'secondary' | 'transparent' | 'danger';
+	type Variant = 'primary' | 'secondary' | 'transparent' | 'danger';
 	interface Props {
-		color?: 'primary' | 'transparent' | 'secondary' | 'danger';
+		variant?: Variant;
 		type?: 'button' | 'submit' | 'reset' | null | undefined;
 		loading?: boolean;
 		disabled?: boolean;
@@ -12,34 +12,23 @@
 		children?: Snippet;
 		onclick?: () => void;
 		tabindex?: number | undefined;
+		rounded?: boolean;
 	}
 
 	let {
-		color = 'transparent',
+		variant = 'transparent',
 		type = 'button',
 		loading = false,
 		disabled = false,
 		size = 'sm',
 		children,
 		onclick,
-		tabindex
+		tabindex,
+		rounded = true
 	}: Props = $props();
 
-	const sizeClass = {
-		xs: 'h-6 w-6 [&>svg]:w-4 [&>svg]:h-4',
-		sm: 'h-8 w-8 [&>svg]:w-4 [&>svg]:h-4',
-		md: 'h-10 w-10 [&>svg]:w-5 [&>svg]:h-5',
-		lg: 'h-8 w-8 '
-	};
-
-	const colors: Record<Color, string> = {
-		primary: 'bg-accent-inverse text-icon-primary-inverse hover:bg-accent-inverse-hover ',
-		secondary: 'bg-neutral text-icon-primary hover:bg-neutral-hover ',
-		transparent: 'bg-transparent text-icon-primary hover:bg-neutral-hover ',
-		danger: 'bg-danger-inverse text-icon-primary-inverse hover:bg-danger-inverse-hover '
-	};
-
-	const baseStyle = 'flex justify-center items-center rounded-full';
+	let sizeClass = $derived(`size-${size}`);
+	let variantClass = $derived(`color-${variant}`);
 </script>
 
 {#if disabled || loading}
@@ -49,9 +38,8 @@
 		}}
 		{type}
 		{disabled}
-		class="disabled:bg-neutral disabled:text-tertiary {baseStyle} {sizeClass[
-			size
-		]} cursor-default {colors['secondary']}"
+		class="{sizeClass} {variantClass} disabled"
+		class:rounded
 	>
 		{#if loading}
 			<Spinner />
@@ -60,13 +48,92 @@
 		{/if}
 	</button>
 {:else}
-	<button
-		{onclick}
-		{type}
-		{disabled}
-		{tabindex}
-		class="{colors[color]} {sizeClass[size]} {baseStyle} cursor-pointer"
-	>
+	<button {onclick} {type} {disabled} {tabindex} class="{sizeClass} {variantClass}" class:rounded>
 		{@render children?.()}
 	</button>
 {/if}
+
+<style>
+	button {
+    display: flex;
+    cursor: pointer;
+    align-items: center;
+    justify-content: center;
+    border-radius: 0.125rem
+}
+	.rounded {
+    border-radius: 9999px
+}
+	.disabled {
+    cursor: default
+}
+	.disabled:disabled {
+    background-color: #12192a0d;
+    --tw-text-opacity: 1;
+    color: rgb(136 140 148 / var(--tw-text-opacity, 1))
+}
+
+	.size-xs {
+    height: 1.5rem;
+    width: 1.5rem
+}
+
+	.size-xs :global(svg) {
+    height: 1rem;
+    width: 1rem
+}
+	.size-sm {
+    height: 2rem;
+    width: 2rem
+}
+	.size-sm :global(svg) {
+    height: 1rem;
+    width: 1rem
+}
+	.size-md {
+    height: 2.5rem;
+    width: 2.5rem
+}
+	.size-md :global(svg) {
+    height: 1.25rem;
+    width: 1.25rem
+}
+
+	.color-primary {
+    --tw-bg-opacity: 1;
+    background-color: rgb(87 80 238 / var(--tw-bg-opacity, 1));
+    --tw-text-opacity: 1;
+    color: rgb(255 255 255 / var(--tw-text-opacity, 1))
+}
+
+	.color-primary:hover {
+    --tw-bg-opacity: 1;
+    background-color: rgb(71 65 193 / var(--tw-bg-opacity, 1))
+}
+	.color-secondary {
+    background-color: #12192a0d;
+    --tw-text-opacity: 1;
+    color: rgb(18 25 42 / var(--tw-text-opacity, 1))
+}
+	.color-secondary:hover {
+    background-color: #12192A1A
+}
+	.color-transparent {
+    background-color: transparent;
+    --tw-text-opacity: 1;
+    color: rgb(18 25 42 / var(--tw-text-opacity, 1))
+}
+	.color-transparent:hover {
+    background-color: #12192A1A
+}
+	.color-danger {
+    --tw-bg-opacity: 1;
+    background-color: rgb(235 70 71 / var(--tw-bg-opacity, 1));
+    --tw-text-opacity: 1;
+    color: rgb(255 255 255 / var(--tw-text-opacity, 1))
+}
+	.color-danger:hover {
+    --tw-bg-opacity: 1;
+    background-color: rgb(191 57 58 / var(--tw-bg-opacity, 1))
+}
+</style>

package/dist/components/icon-button/IconButton.svelte.d.ts

@@ -1,14 +1,16 @@
 import type { Snippet } from 'svelte';
+type Variant = 'primary' | 'secondary' | 'transparent' | 'danger';
 interface Props {
-	color?: 'primary' | 'transparent' | 'secondary' | 'danger';
-	type?: 'button' | 'submit' | 'reset' | null | undefined;
-	loading?: boolean;
-	disabled?: boolean;
-	size?: 'xs' | 'sm' | 'md';
-	children?: Snippet;
-	onclick?: () => void;
-	tabindex?: number | undefined;
+    variant?: Variant;
+    type?: 'button' | 'submit' | 'reset' | null | undefined;
+    loading?: boolean;
+    disabled?: boolean;
+    size?: 'xs' | 'sm' | 'md';
+    children?: Snippet;
+    onclick?: () => void;
+    tabindex?: number | undefined;
+    rounded?: boolean;
 }
-declare const IconButton: import('svelte').Component<Props, {}, ''>;
+declare const IconButton: import("svelte").Component<Props, {}, "">;
 type IconButton = ReturnType<typeof IconButton>;
 export default IconButton;

package/dist/components/image/Image.svelte

@@ -50,7 +50,7 @@
 
 <style>
 	.image {
-		border-start-start-radius: 0.5rem;
-		border-end-start-radius: 0.5rem;
-	}
+    border-start-start-radius: 0.5rem;
+    border-end-start-radius: 0.5rem
+}
 </style>

package/dist/components/image/Image.svelte.d.ts

@@ -1,7 +1,7 @@
 interface Props {
-	src: string;
-	alt: string;
+    src: string;
+    alt: string;
 }
-declare const Image: import('svelte').Component<Props, {}, ''>;
+declare const Image: import("svelte").Component<Props, {}, "">;
 type Image = ReturnType<typeof Image>;
 export default Image;

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

@@ -1,48 +1,27 @@
 export default Input;
-type Input = SvelteComponent<
-	{
-		[x: string]: never;
-	},
-	{
-		[evt: string]: CustomEvent<any>;
-	},
-	{}
-> & {
-	$$bindings?: string | undefined;
+type Input = SvelteComponent<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}> & {
+    $$bindings?: string | undefined;
 };
-declare const Input: $$__sveltets_2_IsomorphicComponent<
-	{
-		[x: string]: never;
-	},
-	{
-		[evt: string]: CustomEvent<any>;
-	},
-	{},
-	{},
-	string
->;
+declare const Input: $$__sveltets_2_IsomorphicComponent<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
 import Input from './Input.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;
+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;
 }

package/dist/components/input/Input.svelte

@@ -123,54 +123,60 @@
 <style>
 	input,
 	textarea {
-		width: 100%;
 
-		resize: none;
+    width: 100%;
 
-		overflow: hidden;
+    resize: none;
 
-		outline: 2px solid transparent;
+    overflow: hidden;
 
-		outline-offset: 2px;
-	}
+    outline: 2px solid transparent;
+
+    outline-offset: 2px
+}
 
 	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;
+    padding: 0.5rem;
 
-		line-height: 1rem;
-	}
+    font-size: 0.75rem;
+
+    line-height: 1rem
+}
 
 	.size-sm {
-		padding-left: 0.75rem;
 
-		padding-right: 0.75rem;
+    padding-left: 0.75rem;
 
-		padding-top: 0.5rem;
+    padding-right: 0.75rem;
 
-		padding-bottom: 0.5rem;
+    padding-top: 0.5rem;
 
-		font-size: 0.875rem;
+    padding-bottom: 0.5rem;
 
-		line-height: 1.25rem;
-	}
+    font-size: 0.875rem;
+
+    line-height: 1.25rem
+}
 
 	.size-md {
-		padding: 0.75rem;
 
-		font-size: 1rem;
+    padding: 0.75rem;
 
-		line-height: 1.5rem;
-	}
+    font-size: 1rem;
+
+    line-height: 1.5rem
+}
 </style>

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

@@ -1,25 +1,21 @@
 import type { Snippet } from 'svelte';
-declare const Input: import('svelte').Component<
-	{
-		label?: string | null;
-		value: string | number;
-		type?: 'text' | 'password' | 'textarea' | 'number';
-		required?: boolean;
-		autofocus?: boolean;
-		placeholder?: string;
-		id?: string | undefined;
-		validator?: (a: string | number) => boolean;
-		onBlur?: (e: Event) => void;
-		onkeydown?: (e: KeyboardEvent) => void;
-		prefix?: Snippet<[any]>;
-		suffix?: Snippet;
-		error?: Snippet;
-		input?: HTMLInputElement | HTMLTextAreaElement;
-		maxlength?: number | null;
-		size?: 'xs' | 'sm' | 'md';
-	},
-	{},
-	'input' | 'value'
->;
+declare const Input: import("svelte").Component<{
+    label?: string | null;
+    value: string | number;
+    type?: "text" | "password" | "textarea" | "number";
+    required?: boolean;
+    autofocus?: boolean;
+    placeholder?: string;
+    id?: string | undefined;
+    validator?: (a: string | number) => boolean;
+    onBlur?: (e: Event) => void;
+    onkeydown?: (e: KeyboardEvent) => void;
+    prefix?: Snippet<[any]>;
+    suffix?: Snippet;
+    error?: Snippet;
+    input?: HTMLInputElement | HTMLTextAreaElement;
+    maxlength?: number | null;
+    size?: "xs" | "sm" | "md";
+}, {}, "input" | "value">;
 type Input = ReturnType<typeof Input>;
 export default Input;

package/dist/components/list/List.stories.svelte.d.ts

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

package/dist/components/list/List.svelte

@@ -21,50 +21,55 @@
 
 <style>
 	.listStyles {
-		display: flex;
 
-		height: 100%;
+    display: flex;
 
-		flex-direction: column;
+    height: 100%;
 
-		align-items: flex-start;
+    flex-direction: column;
 
-		align-self: stretch;
+    align-items: flex-start;
 
-		border-radius: 0.25rem;
-	}
+    align-self: stretch;
 
-	.listStyles.default {
-		gap: 0.5rem;
-	}
+    border-radius: 0.25rem
+}
 
-	.listStyles.compact {
-		gap: 0px;
+		.listStyles.default {
 
-		--tw-bg-opacity: 1;
+    gap: 0.5rem
+}
 
-		background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
+		.listStyles.compact {
 
-		padding-bottom: 0.5rem;
+    gap: 0px;
 
-		padding-left: 1.5rem;
+    --tw-bg-opacity: 1;
 
-		padding-right: 1.5rem;
+    background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
 
-		padding-top: 0.5rem;
-	}
+    padding-bottom: 0.5rem;
 
-	.listStyles.compact :global(> .item:not(:last-child)) {
-		border-bottom-width: 1px;
+    padding-left: 1.5rem;
 
-		border-style: solid;
+    padding-right: 1.5rem;
 
-		--tw-border-opacity: 1;
+    padding-top: 0.5rem
+}
 
-		border-color: var(--fallback-n, oklch(var(--n) / var(--tw-border-opacity, 1)));
-	}
+		.listStyles.compact :global(> .item:not(:last-child)) {
 
-	.listStyles :global(.item) {
-		align-self: stretch;
-	}
+    border-bottom-width: 1px;
+
+    border-style: solid;
+
+    --tw-border-opacity: 1;
+
+    border-color: var(--fallback-n,oklch(var(--n)/var(--tw-border-opacity, 1)))
+}
+
+		.listStyles :global(.item) {
+
+    align-self: stretch
+}
 </style>

package/dist/components/list/List.svelte.d.ts

@@ -1,32 +1,23 @@
 import type { Overflow } from '../../tailwind';
 import type { Snippet } from 'svelte';
 declare class __sveltets_Render<T> {
-	props(): {
-		items: T[];
-		item: Snippet<[T]>;
-		overflow?: Overflow;
-		variant?: 'compact' | 'default';
-	};
-	events(): {};
-	slots(): {};
-	bindings(): '';
-	exports(): {};
+    props(): {
+        items: T[];
+        item: Snippet<[T]>;
+        overflow?: Overflow;
+        variant?: "compact" | "default";
+    };
+    events(): {};
+    slots(): {};
+    bindings(): "";
+    exports(): {};
 }
 interface $$IsomorphicComponent {
-	new <T>(
-		options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<T>['props']>>
-	): import('svelte').SvelteComponent<
-		ReturnType<__sveltets_Render<T>['props']>,
-		ReturnType<__sveltets_Render<T>['events']>,
-		ReturnType<__sveltets_Render<T>['slots']>
-	> & {
-		$$bindings?: ReturnType<__sveltets_Render<T>['bindings']>;
-	} & ReturnType<__sveltets_Render<T>['exports']>;
-	<T>(
-		internal: unknown,
-		props: ReturnType<__sveltets_Render<T>['props']> & {}
-	): ReturnType<__sveltets_Render<T>['exports']>;
-	z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
+    new <T>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<T>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<T>['props']>, ReturnType<__sveltets_Render<T>['events']>, ReturnType<__sveltets_Render<T>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<T>['bindings']>;
+    } & ReturnType<__sveltets_Render<T>['exports']>;
+    <T>(internal: unknown, props: ReturnType<__sveltets_Render<T>['props']> & {}): ReturnType<__sveltets_Render<T>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
 }
 declare const List: $$IsomorphicComponent;
 type List<T> = InstanceType<typeof List<T>>;

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

@@ -1,48 +1,27 @@
 export default Logo;
-type Logo = SvelteComponent<
-	{
-		[x: string]: never;
-	},
-	{
-		[evt: string]: CustomEvent<any>;
-	},
-	{}
-> & {
-	$$bindings?: string | undefined;
+type Logo = SvelteComponent<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}> & {
+    $$bindings?: string | undefined;
 };
-declare const Logo: $$__sveltets_2_IsomorphicComponent<
-	{
-		[x: string]: never;
-	},
-	{
-		[evt: string]: CustomEvent<any>;
-	},
-	{},
-	{},
-	string
->;
+declare const Logo: $$__sveltets_2_IsomorphicComponent<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
 import Logo from './Logo.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;
+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;
 }