@reshape-biotech/design-system 0.0.52 → 1.1.1

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

@@ -22,33 +22,25 @@
 	let textareaValue = '';
 </script>
 
-<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="Base" args={{ autofocus: true, value: 'Hello' }} />
+
+<Story name="XSmall" args={{ size: 'xs' }} />
 
-<Story name="Login">
+<Story name="Small" args={{ size: 'sm' }} />
+
+<Story name="Login" asChild>
 	<div class="flex flex-col gap-2">
 		<Input bind:value={email} label="Email" type="text" required id="email-select" autofocus />
 		<Input bind:value={password} label="Password" id="password-select" type="password" required />
 	</div>
 </Story>
 
-<Story name="Textarea">
-	<Input
-		bind:value={textareaValue}
-		label="Description"
-		type="textarea"
-		placeholder="Add a description..."
-	/>
-</Story>
+<Story
+	name="Textarea"
+	args={{ label: 'Description', type: 'textarea', placeholder: 'Add a description...' }}
+/>
 
-<Story name="Prefix">
+<Story name="Prefix" asChild>
 	<Input value="Bob">
 		{#snippet prefix()}
 			<div>Mr.</div>
@@ -56,7 +48,7 @@
 	</Input>
 </Story>
 
-<Story name="Suffix">
+<Story name="Suffix" asChild>
 	<Input value="30">
 		{#snippet suffix()}
 			<div>± 1°C</div>
@@ -64,7 +56,7 @@
 	</Input>
 </Story>
 
-<Story name="Prefix & Suffix">
+<Story name="Prefix & Suffix" asChild>
 	<Input value="9001">
 		{#snippet prefix()}
 			<div>$</div>
@@ -75,7 +67,7 @@
 	</Input>
 </Story>
 
-<Story name="Validation">
+<Story name="Validation" asChild>
 	<Input value="Focus me, then click away" validator={(val) => val.toString().length < 10}>
 		{#snippet prefix({ valid })}
 			<div>
@@ -91,3 +83,5 @@
 		{/snippet}
 	</Input>
 </Story>
+
+<Story name="Clearable" args={{ clearable: true, value: 'Focus me, then click away' }} />

package/dist/components/input/Input.svelte

@@ -1,204 +1,210 @@
 <script lang="ts">
 	import type { Snippet } from 'svelte';
+	import { IconButton } from '../icon-button';
+	import { Icon } from '../icons';
+	import type { HTMLInputAttributes } from 'svelte/elements';
 
-	interface Props {
+	interface InputProps extends Omit<HTMLInputAttributes, 'size' | 'prefix' | 'suffix'> {
 		label?: string | null;
-		value: string | number;
-		type?: 'text' | 'password' | 'textarea' | 'number';
-		name?: string;
-		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;
+		input?: HTMLInputElement;
 		size?: 'xs' | 'sm' | 'md' | 'lg' | 'dynamic';
-		readonly?: boolean;
+		transparent?: boolean;
+		clearable?: boolean;
+		onclear?: () => void;
+		class?: string;
+		oninput?: (event: Event) => void;
+		onblur?: (event: FocusEvent) => void;
 	}
 
 	let {
 		label = null,
 		value = $bindable(),
 		type = 'text',
-		required = false,
-		autofocus = false,
-		placeholder = '',
-		id = undefined,
-		name,
 		validator = (_) => {
 			return true;
 		},
-		onBlur = () => {},
-		onkeydown = () => {},
 		prefix,
 		suffix,
 		error,
 		input = $bindable(),
-		maxlength = null,
 		size = 'md',
-		readonly = false
-	}: Props = $props();
+		transparent = false,
+		clearable = false,
+		onclear = () => {},
+		class: className,
+		oninput,
+		onblur,
+		...rest
+	}: InputProps = $props();
+
+	export function focus() {
+		input?.focus();
+	}
 
 	let valid = $state(true);
 
-	const inputId = Math.random().toString(36).substring(7); // used for A11y
-
+	const inputId = crypto.randomUUID();
+	const id = $derived(rest.id ?? inputId);
 	function handleInput(event: Event) {
-		if (readonly) return;
-		const target = event.target as HTMLTextAreaElement | HTMLInputElement;
+		if (rest.readonly) return;
+		const target = event.target as HTMLInputElement;
 		value = target.value;
-
-		if (type === 'textarea') {
-			autoResizeTextarea(target as HTMLTextAreaElement);
-		}
-	}
-	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';
-
-		// 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';
-		}
+		oninput?.(event);
 	}
 
-	function handleBlur(event: Event) {
+	function handleBlur(event: FocusEvent & { currentTarget: EventTarget & HTMLInputElement }) {
 		valid = validator(value);
-		onBlur(event);
+		onblur?.(event);
 	}
 </script>
 
 <div class="w-full">
 	{#if label}
-		<label for={id ?? inputId} class="block px-1 py-2 text-sm text-secondary">{label}</label>
+		<label for={id ?? inputId} class="block px-1 py-2 text-sm text-secondary">
+			{label}
+			{#if rest.required}
+				<span class="ml-0.5 text-danger">*</span>
+			{/if}
+		</label>
 	{/if}
+
 	<div
 		class="flex w-full items-center gap-1 rounded-lg border border-input bg-surface shadow-input size-{size}"
+		class:border-transparent={transparent}
+		class:shadow-input={!transparent}
 		class:!border-error={!valid}
 	>
-		{#if type === 'textarea'}
-			<textarea
-				id={id ?? inputId}
-				rows="3"
-				class:has-text={value}
-				class:has-placeholder={placeholder}
-				aria-label={label}
-				oninput={handleInput}
-				onblur={handleBlur}
-				{onkeydown}
-				bind:this={input}
-				{value}
-				{required}
-				{autofocus}
-				{placeholder}
-				{maxlength}
-				{name}
-				{readonly}
-			></textarea>
-		{:else}
-			<div class="whitespace-nowrap text-secondary">
-				{@render prefix?.({ valid })}
-			</div>
-			<input
-				id={id ?? inputId}
-				class="inline leading-none"
-				class:has-text={value}
-				class:has-placeholder={placeholder}
-				aria-label={label}
-				{type}
-				{name}
-				{required}
-				oninput={handleInput}
-				onblur={handleBlur}
-				{onkeydown}
-				bind:this={input}
-				{value}
-				{autofocus}
-				{placeholder}
-				{maxlength}
-				{readonly}
-			/>
-			<div class="whitespace-nowrap text-secondary">
-				{@render suffix?.()}
-			</div>
+		<div class="whitespace-nowrap text-secondary">
+			{@render prefix?.({ valid })}
+		</div>
+		<input
+			{id}
+			class="inline leading-none"
+			class:has-text={value}
+			class:has-placeholder={rest.placeholder}
+			aria-label={label}
+			{type}
+			oninput={handleInput}
+			onblur={handleBlur}
+			bind:this={input}
+			bind:value
+			{...rest}
+		/>
+		<div class="whitespace-nowrap text-secondary">
+			{@render suffix?.()}
+		</div>
+
+		{#if clearable && value}
+			<IconButton
+				variant="transparent"
+				size="xs"
+				onclick={() => {
+					value = '';
+					input?.focus();
+					onclear();
+				}}
+			>
+				<Icon iconName="X" />
+			</IconButton>
 		{/if}
 	</div>
-	{#if !valid}
-		{@render error?.()}
-	{/if}
+
+	{@render error?.()}
 </div>
 
 <style>
-	input,
-	textarea {
-		width: 100%;
-		outline: 2px solid transparent;
-		outline-offset: 2px;
-		/* Remove the resize-none class to allow scrolling */
-		resize: none
+	input {
+
+    width: 100%;
+
+    resize: none;
+
+    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 {
-		height: 1.5rem;
-		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 {
-		height: 2rem;
-		padding-left: 0.75rem;
-		padding-right: 0.75rem;
-		padding-top: 0.5rem;
-		padding-bottom: 0.5rem
+
+    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
+
+    height: 2.5rem;
+
+    padding-left: 0.75rem;
+
+    padding-right: 0.75rem;
+
+    padding-top: 0.5rem;
+
+    padding-bottom: 0.5rem
 }
 
 	.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
+
+    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
 }
 
 	.size-dynamic {
-		height: auto;
-		padding-left: 0.75rem;
-		padding-right: 0.75rem;
-		padding-top: 0.5rem;
-		padding-bottom: 0.5rem
+
+    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,24 +1,23 @@
 import type { Snippet } from 'svelte';
-interface Props {
+import type { HTMLInputAttributes } from 'svelte/elements';
+interface InputProps extends Omit<HTMLInputAttributes, 'size' | 'prefix' | 'suffix'> {
     label?: string | null;
-    value: string | number;
-    type?: 'text' | 'password' | 'textarea' | 'number';
-    name?: string;
-    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;
+    input?: HTMLInputElement;
     size?: 'xs' | 'sm' | 'md' | 'lg' | 'dynamic';
-    readonly?: boolean;
+    transparent?: boolean;
+    clearable?: boolean;
+    onclear?: () => void;
+    class?: string;
+    oninput?: (event: Event) => void;
+    onblur?: (event: FocusEvent) => void;
 }
-declare const Input: import("svelte").Component<Props, {}, "value" | "input">;
+declare const Input: import("svelte").Component<InputProps, {
+    focus: () => void;
+}, "value" | "input">;
 type Input = ReturnType<typeof Input>;
 export default Input;

package/dist/components/label/Label.stories.svelte

@@ -0,0 +1,28 @@
+<script module lang="ts">
+	import { defineMeta } from '@storybook/addon-svelte-csf';
+	import Label from './Label.svelte';
+
+	const { Story } = defineMeta({
+		title: 'Design System/Label',
+		component: Label,
+		argTypes: {
+			text: { control: 'text' },
+			forId: { control: 'text' },
+			required: { control: 'boolean' },
+			class: { control: 'text' }
+		}
+	});
+</script>
+
+<Story name="Default" args={{ text: 'Email Address', forId: 'email' }} />
+
+<Story name="Required" args={{ text: 'Password', forId: 'password', required: true }} />
+
+<Story
+	name="With Custom Class"
+	args={{
+		text: 'Custom Styled Label',
+		forId: 'custom',
+		class: 'text-lg text-primary font-bold'
+	}}
+/>

package/dist/components/label/Label.stories.svelte.d.ts

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

package/dist/components/label/Label.svelte

@@ -0,0 +1,17 @@
+<script lang="ts">
+	interface Props {
+		forId: string;
+		text: string;
+		required?: boolean;
+		class?: string;
+	}
+
+	const { forId, text, required = false, class: className }: Props = $props();
+</script>
+
+<label for={forId} class="block text-sm text-secondary {className ?? ''}">
+	{text}
+	{#if required}
+		<span class="ml-0.5 text-danger">*</span>
+	{/if}
+</label>

package/dist/components/label/Label.svelte.d.ts

@@ -0,0 +1,9 @@
+interface Props {
+    forId: string;
+    text: string;
+    required?: boolean;
+    class?: string;
+}
+declare const Label: import("svelte").Component<Props, {}, "">;
+type Label = ReturnType<typeof Label>;
+export default Label;

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

@@ -18,7 +18,7 @@
 	];
 </script>
 
-<Story name="Default" args={{}}>
+<Story name="Default" args={{}} asChild>
 	<List {items}>
 		{#snippet item(item)}
 			<div class="flex min-h-2 flex-row gap-2">
@@ -52,7 +52,7 @@
 	</List>
 </Story>
 
-<Story name="Compact" args={{ variant: 'compact' }}>
+<Story name="Compact" args={{ variant: 'compact' }} asChild>
 	<List {items} variant="compact">
 		{#snippet item(item)}
 			<div class="flex min-h-2 flex-row gap-2">
@@ -86,7 +86,7 @@
 	</List>
 </Story>
 
-<Story name="Loading">
+<Story name="Loading" asChild>
 	<List variant="compact" items={[{}, {}, {}]}>
 		{#snippet item({})}
 			<div class="flex h-8 w-full items-center">

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

@@ -10,7 +10,7 @@
 	});
 </script>
 
-<Story name="Base">
+<Story name="Base" asChild>
 	<div class="flex flex-col gap-4">
 		<Logo size="xs" />
 		<Logo size="sm" />