@reshape-biotech/design-system 0.0.40 → 0.0.42

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

@@ -19,6 +19,12 @@
 <Story name="Base">
 	<Input bind:value autofocus />
 </Story>
+<Story name="XSmall">
+	<Input bind:value autofocus size="xs" />
+</Story>
+<Story name="Small">
+	<Input bind:value autofocus size="sm" />
+</Story>
 
 <Story name="Login">
 	<div class="flex flex-col gap-2">

package/dist/components/input/Input.svelte

@@ -17,6 +17,7 @@
 		error?: Snippet;
 		input?: HTMLInputElement | HTMLTextAreaElement;
 		maxlength?: number | null;
+		size?: 'xs' | 'sm' | 'md';
 	}
 
 	let {
@@ -36,7 +37,8 @@
 		suffix,
 		error,
 		input = $bindable(),
-		maxlength = null
+		maxlength = null,
+		size = 'md'
 	}: Props = $props();
 
 	let valid = $state(true);
@@ -67,7 +69,7 @@
 		<label for={id ?? inputId} class="block px-1 py-2 text-sm text-secondary">{label}</label>
 	{/if}
 	<div
-		class="flex w-full items-center gap-1 rounded-lg border border-input bg-surface p-3 shadow-input"
+		class="flex w-full items-center gap-1 rounded-lg border border-input bg-surface shadow-input size-{size}"
 		class:!border-error={!valid}
 	>
 		{#if type === 'textarea'}
@@ -144,4 +146,37 @@
 
     border-color: rgb(87 80 238 / var(--tw-border-opacity, 1))
 }
+
+	.size-xs {
+
+    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
+}
+
+	.size-md {
+
+    padding: 0.75rem;
+
+    font-size: 1rem;
+
+    line-height: 1.5rem
+}
 </style>

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

@@ -15,6 +15,7 @@ declare const Input: import("svelte").Component<{
     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/modal/Modal.stories.svelte

@@ -1,13 +1,15 @@
 <script module lang="ts">
 	import Button from '../button/Button.svelte';
 	import Modal from '../modal/Modal.svelte';
-	import ContactSupportModal from './ContactSupportModal.svelte';
 	import { defineMeta } from '@storybook/addon-svelte-csf';
+
 	const { Story } = defineMeta({
 		component: Modal,
 		title: 'Design System/Modal',
 		tags: ['autodocs']
 	});
+
+	let defaultOpen = $state(true);
 </script>
 
 <Story name="Default">
@@ -24,7 +26,7 @@
 </Story>
 
 <Story name="Default open">
-	<Modal defaultOpen>
+	<Modal {defaultOpen} onclose={() => (defaultOpen = false)}>
 		{#snippet Trigger({ openModal })}
 			<Button onClick={openModal}>Open Modal</Button>
 		{/snippet}
@@ -35,7 +37,3 @@
 		{/snippet}
 	</Modal>
 </Story>
-
-<Story name="Contact support">
-	<ContactSupportModal />
-</Story>

package/dist/components/modal/Modal.svelte

@@ -7,6 +7,7 @@
 	type ModalProps = {
 		Trigger?: Snippet<[{ openModal: () => void; closeModal: () => void }]>;
 		Content: Snippet;
+		onclose?: () => void;
 		defaultOpen?: boolean;
 		id?: string;
 		withClose?: boolean;
@@ -16,6 +17,7 @@
 	let {
 		Trigger,
 		Content,
+		onclose,
 		defaultOpen = false,
 		id = 'modal-' + uuidv4(),
 		withClose = true,
@@ -23,6 +25,7 @@
 		class: modalClass
 	}: ModalProps = $props();
 
+	const modalOpen = $state(defaultOpen);
 	const openModal = () => {
 		const dialog = document.getElementById(id) as HTMLDialogElement | null;
 		dialog?.showModal();
@@ -31,13 +34,14 @@
 	const closeModal = () => {
 		const dialog = document.getElementById(id) as HTMLDialogElement | null;
 		dialog?.close();
+		onclose?.();
 	};
 </script>
 
 {#if Trigger}
 	{@render Trigger({ openModal, closeModal })}
 {/if}
-<dialog {id} class="modal {modalClass}" class:modal-open={defaultOpen}>
+<dialog {id} class="modal {modalClass}" class:modal-open={modalOpen}>
 	<div class="modal-box relative w-fit max-w-full rounded-xl bg-base p-6">
 		{#if withClose}
 			<div class="absolute right-0 top-0 p-6">
@@ -50,7 +54,7 @@
 	</div>
 	{#if closeOnClickOutside}
 		<form method="dialog" class="modal-backdrop">
-			<button>close</button>
+			<button onclick={closeModal}>close</button>
 		</form>
 	{/if}
 </dialog>

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

@@ -5,6 +5,7 @@ type ModalProps = {
         closeModal: () => void;
     }]>;
     Content: Snippet;
+    onclose?: () => void;
     defaultOpen?: boolean;
     id?: string;
     withClose?: boolean;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@reshape-biotech/design-system",
-	"version": "0.0.40",
+	"version": "0.0.42",
 	"scripts": {
 		"dev": "vite dev",
 		"build": "vite build",