@reshape-biotech/design-system 0.0.39 → 0.0.41

package/dist/components/dropdown/components/OutlinedButton.svelte

@@ -2,14 +2,14 @@
 	import type { Snippet } from 'svelte';
 
 	interface Props {
-		classes?: string;
+		class?: string;
 		children: Snippet;
 	}
 
-	let { classes = '', children }: Props = $props();
+	let { class: className = '', children }: Props = $props();
 </script>
 
-<button class={`${classes}`}>{@render children()}</button>
+<button class={`${className}`}>{@render children()}</button>
 
 <style>
 	button {

package/dist/components/dropdown/components/OutlinedButton.svelte.d.ts

@@ -1,6 +1,6 @@
 import type { Snippet } from 'svelte';
 interface Props {
-    classes?: string;
+    class?: string;
     children: Snippet;
 }
 declare const OutlinedButton: import("svelte").Component<Props, {}, "">;

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/logo/index.d.ts

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

package/dist/components/logo/index.js

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

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

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

package/dist/components/toggle/index.js

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

package/dist/index.d.ts

@@ -10,6 +10,7 @@ export * from './components/icon-button/';
 export * from './components/image';
 export * from './components/input/';
 export * from './components/list/';
+export * from './components/logo/';
 export * from './components/markdown/';
 export * from './components/modal/';
 export * from './components/notification-popup/';
@@ -26,5 +27,6 @@ export * from './components/table/';
 export * from './components/tabs/';
 export * from './components/tag/';
 export * from './components/tooltip/';
+export * from './components/toggle/';
 export { tokens } from './tokens';
 import './app.css';

package/dist/index.js

@@ -11,6 +11,7 @@ export * from './components/icon-button/';
 export * from './components/image';
 export * from './components/input/';
 export * from './components/list/';
+export * from './components/logo/';
 export * from './components/markdown/';
 export * from './components/modal/';
 export * from './components/notification-popup/';
@@ -27,6 +28,7 @@ export * from './components/table/';
 export * from './components/tabs/';
 export * from './components/tag/';
 export * from './components/tooltip/';
+export * from './components/toggle/';
 // Styles and Tokens
 export { tokens } from './tokens';
 import './app.css';

package/package.json

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