@reshape-biotech/design-system 0.0.54 → 1.1.2

package/dist/components/icons/index.js

@@ -1,14 +1,19 @@
 import Aperture from 'phosphor-svelte/lib/Aperture';
 import ArrowFatLineRight from 'phosphor-svelte/lib/ArrowFatLineRight';
+import ArrowCounterClockwise from 'phosphor-svelte/lib/ArrowCounterClockwise';
 import ArrowRight from 'phosphor-svelte/lib/ArrowRight';
 import ArrowUpRight from 'phosphor-svelte/lib/ArrowUpRight';
+import ArrowUpLeft from 'phosphor-svelte/lib/ArrowUpLeft';
+import ArrowUUpLeft from 'phosphor-svelte/lib/ArrowUUpLeft';
 import Barcode from 'phosphor-svelte/lib/Barcode';
 import Bell from 'phosphor-svelte/lib/Bell';
 import BookOpen from 'phosphor-svelte/lib/BookOpen';
 import BookOpenText from 'phosphor-svelte/lib/BookOpenText';
 import BowlingBall from 'phosphor-svelte/lib/BowlingBall';
+import BugBeetle from 'phosphor-svelte/lib/BugBeetle';
 import Calendar from 'phosphor-svelte/lib/Calendar';
 import CalendarBlank from 'phosphor-svelte/lib/CalendarBlank';
+import Camera from 'phosphor-svelte/lib/CameraSlash';
 import CameraSlash from 'phosphor-svelte/lib/CameraSlash';
 import CaretDown from 'phosphor-svelte/lib/CaretDown';
 import CaretLeft from 'phosphor-svelte/lib/CaretLeft';
@@ -30,6 +35,7 @@ import Copy from 'phosphor-svelte/lib/Copy';
 import Crop from 'phosphor-svelte/lib/Crop';
 import Cube from 'phosphor-svelte/lib/Cube';
 import Database from 'phosphor-svelte/lib/Database';
+import Dna from 'phosphor-svelte/lib/Dna';
 import DotsThree from 'phosphor-svelte/lib/DotsThree';
 import DotsThreeOutlineVertical from 'phosphor-svelte/lib/DotsThreeOutlineVertical';
 import DownloadSimple from 'phosphor-svelte/lib/DownloadSimple';
@@ -53,13 +59,18 @@ import House from 'phosphor-svelte/lib/House';
 import ImageSquare from 'phosphor-svelte/lib/ImageSquare';
 import ImagesSquare from 'phosphor-svelte/lib/ImagesSquare';
 import Info from 'phosphor-svelte/lib/Info';
+import Link from 'phosphor-svelte/lib/Link';
 import Lock from 'phosphor-svelte/lib/Lock';
 import LineSegments from 'phosphor-svelte/lib/LineSegments';
 import List from 'phosphor-svelte/lib/List';
+import ListMagnifyingGlass from 'phosphor-svelte/lib/ListMagnifyingGlass';
 import MagnifyingGlass from 'phosphor-svelte/lib/MagnifyingGlass';
 import MegaphoneSimple from 'phosphor-svelte/lib/MegaphoneSimple';
+import MicrosoftExcelLogo from 'phosphor-svelte/lib/MicrosoftExcelLogo';
 import Moon from 'phosphor-svelte/lib/Moon';
+import Minus from 'phosphor-svelte/lib/Minus';
 import Pause from 'phosphor-svelte/lib/Pause';
+import Palette from 'phosphor-svelte/lib/Palette';
 import Pencil from 'phosphor-svelte/lib/Pencil';
 import PencilSimple from 'phosphor-svelte/lib/PencilSimple';
 import Percent from 'phosphor-svelte/lib/Percent';
@@ -69,11 +80,15 @@ import Play from 'phosphor-svelte/lib/Play';
 import Plus from 'phosphor-svelte/lib/Plus';
 import PlusMinus from 'phosphor-svelte/lib/PlusMinus';
 import Question from 'phosphor-svelte/lib/Question';
+import SealCheck from 'phosphor-svelte/lib/SealCheck';
 import RadioButton from 'phosphor-svelte/lib/RadioButton';
 import SealQuestion from 'phosphor-svelte/lib/SealQuestion';
+import SealWarning from 'phosphor-svelte/lib/SealWarning';
 import SelectionAll from 'phosphor-svelte/lib/SelectionAll';
 import Share from 'phosphor-svelte/lib/Share';
 import SidebarSimple from 'phosphor-svelte/lib/SidebarSimple';
+import SignIn from 'phosphor-svelte/lib/SignIn';
+import SignOut from 'phosphor-svelte/lib/SignOut';
 import SkipBack from 'phosphor-svelte/lib/SkipBack';
 import SkipForward from 'phosphor-svelte/lib/SkipForward';
 import SortAscending from 'phosphor-svelte/lib/SortAscending';
@@ -86,9 +101,11 @@ import StopCircle from 'phosphor-svelte/lib/StopCircle';
 import Sun from 'phosphor-svelte/lib/Sun';
 import Table from 'phosphor-svelte/lib/Table';
 import Tag from 'phosphor-svelte/lib/Tag';
+import Target from 'phosphor-svelte/lib/Target';
 import TestTube from 'phosphor-svelte/lib/TestTube';
 import Trash from 'phosphor-svelte/lib/Trash';
 import TrashSimple from 'phosphor-svelte/lib/TrashSimple';
+import TreeStructure from 'phosphor-svelte/lib/TreeStructure';
 import UserCircle from 'phosphor-svelte/lib/UserCircle';
 import UserPlus from 'phosphor-svelte/lib/UserPlus';
 import Video from 'phosphor-svelte/lib/Video';
@@ -99,15 +116,20 @@ import X from 'phosphor-svelte/lib/X';
 export const iconMap = {
     Aperture,
     ArrowFatLineRight,
+    ArrowCounterClockwise,
     ArrowRight,
     ArrowUpRight,
+    ArrowUpLeft,
+    ArrowUUpLeft,
     Barcode,
     Bell,
     BookOpen,
     BookOpenText,
     BowlingBall,
+    BugBeetle,
     Calendar,
     CalendarBlank,
+    Camera,
     CameraSlash,
     CaretDown,
     CaretLeft,
@@ -129,6 +151,7 @@ export const iconMap = {
     Crop,
     Cube,
     Database,
+    Dna,
     DotsThree,
     DotsThreeOutlineVertical,
     DownloadSimple,
@@ -155,9 +178,14 @@ export const iconMap = {
     Lock,
     LineSegments,
     List,
+    Link,
+    ListMagnifyingGlass,
     MagnifyingGlass,
     MegaphoneSimple,
+    MicrosoftExcelLogo,
     Moon,
+    Minus,
+    Palette,
     Pause,
     Pencil,
     PencilSimple,
@@ -169,10 +197,14 @@ export const iconMap = {
     PlusMinus,
     RadioButton,
     Question,
+    SealCheck,
     SealQuestion,
+    SealWarning,
     SelectionAll,
     Share,
     SidebarSimple,
+    SignIn,
+    SignOut,
     SkipBack,
     SkipForward,
     SortAscending,
@@ -185,9 +217,11 @@ export const iconMap = {
     Sun,
     Table,
     Tag,
+    Target,
     TestTube,
     Trash,
     TrashSimple,
+    TreeStructure,
     UserCircle,
     UserPlus,
     Video,

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;