@reshape-biotech/design-system 1.2.6 → 2.0.0

package/dist/components/textarea/Textarea.svelte

@@ -1,94 +1,94 @@
 <script lang="ts">
-	import type { Snippet } from 'svelte';
-	import type { HTMLTextareaAttributes } from 'svelte/elements';
+  import type { Snippet } from 'svelte';
+  import type { HTMLTextareaAttributes } from 'svelte/elements';
 
-	interface TextareaProps extends HTMLTextareaAttributes {
-		oninput?: (event: Event) => void;
-		onblur?: (event: Event) => void;
-		onkeydown?: (event: KeyboardEvent) => void;
-		input?: HTMLTextAreaElement;
-		size?: 'xs' | 'sm' | 'md' | 'lg' | 'dynamic';
-		label?: string;
-		error?: Snippet;
-		placeholder?: string;
-	}
+  interface TextareaProps extends HTMLTextareaAttributes {
+    oninput?: (event: Event) => void;
+    onblur?: (event: Event) => void;
+    onkeydown?: (event: KeyboardEvent) => void;
+    input?: HTMLTextAreaElement;
+    size?: 'xs' | 'sm' | 'md' | 'lg' | 'dynamic';
+    label?: string;
+    error?: Snippet;
+    placeholder?: string;
+  }
 
-	let {
-		value = $bindable(),
-		oninput = () => {},
-		onblur = () => {},
-		onkeydown = () => {},
-		input = $bindable(),
-		label,
-		placeholder,
-		error,
-		id,
-		size = 'md',
-		class: className,
-		...rest
-	}: TextareaProps = $props();
+  let {
+    value = $bindable(),
+    oninput = () => {},
+    onblur = () => {},
+    onkeydown = () => {},
+    input = $bindable(),
+    label,
+    placeholder,
+    error,
+    id,
+    size = 'md',
+    class: className,
+    ...rest
+  }: TextareaProps = $props();
 
-	const textareaId = crypto.randomUUID();
-	const inputId = $derived(id ?? textareaId);
+  const textareaId = crypto.randomUUID();
+  const inputId = $derived(id ?? textareaId);
 
-	function handleInputInternal(event: Event) {
-		if (rest.readonly) return;
-		const target = event.target as HTMLTextAreaElement;
-		value = target.value;
-		autoResizeTextarea(target);
-		oninput(event);
-	}
+  function handleInputInternal(event: Event) {
+    if (rest.readonly) return;
+    const target = event.target as HTMLTextAreaElement;
+    value = target.value;
+    autoResizeTextarea(target);
+    oninput(event);
+  }
 
-	function autoResizeTextarea(textarea: HTMLTextAreaElement) {
-		const maxHeight = 200;
-		textarea.style.height = 'auto';
-		if (textarea.scrollHeight < maxHeight) {
-			textarea.style.height = `${textarea.scrollHeight}px`;
-			textarea.style.overflowY = 'hidden';
-		} else {
-			textarea.style.height = `${maxHeight}px`;
-			textarea.style.overflowY = 'auto';
-		}
-	}
+  function autoResizeTextarea(textarea: HTMLTextAreaElement) {
+    const maxHeight = 200;
+    textarea.style.height = 'auto';
+    if (textarea.scrollHeight < maxHeight) {
+      textarea.style.height = `${textarea.scrollHeight}px`;
+      textarea.style.overflowY = 'hidden';
+    } else {
+      textarea.style.height = `${maxHeight}px`;
+      textarea.style.overflowY = 'auto';
+    }
+  }
 
-	function handleBlurInternal(event: Event) {
-		onblur(event);
-	}
+  function handleBlurInternal(event: Event) {
+    onblur(event);
+  }
 
-	export function focus() {
-		input?.focus();
-	}
+  export function focus() {
+    input?.focus();
+  }
 
-	$effect(() => {
-		if (input && value) {
-			autoResizeTextarea(input);
-		}
-	});
+  $effect(() => {
+    if (input && value) {
+      autoResizeTextarea(input);
+    }
+  });
 </script>
 
 {#if label}
-	<label for={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>
+  <label for={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}
 
 <textarea
-	id={inputId}
-	class="flex w-full items-center gap-1 rounded-lg border border-input bg-surface px-3 py-2 shadow-input focus-within:border-focus hover:border-hover {className ??
-		''}"
-	class:!border-error={error}
-	class:has-text={value}
-	class:has-placeholder={placeholder}
-	{placeholder}
-	oninput={handleInputInternal}
-	onblur={handleBlurInternal}
-	bind:this={input}
-	{value}
-	{...rest}
-	{onkeydown}
+  id={inputId}
+  class="flex w-full items-center gap-1 rounded-lg border border-input bg-surface px-3 py-2 shadow-input focus-within:border-focus hover:border-hover {className ??
+    ''}"
+  class:!border-error={error}
+  class:has-text={value}
+  class:has-placeholder={placeholder}
+  {placeholder}
+  oninput={handleInputInternal}
+  onblur={handleBlurInternal}
+  bind:this={input}
+  {value}
+  {...rest}
+  {onkeydown}
 ></textarea>
 
 {@render error?.()}

package/dist/components/toast/Toast.stories.svelte

@@ -1,209 +1,209 @@
 <script module lang="ts">
-	import type { Notification } from '../../../notifications';
-	import Toast from './Toast.svelte';
-	import { defineMeta } from '@storybook/addon-svelte-csf';
-
-	const { Story } = defineMeta({
-		component: Toast,
-		title: 'Design System/Toast',
-		tags: ['autodocs']
-	});
-
-	const defaultNotification: Notification = {
-		id: '1',
-		type: 'default',
-		message: 'This is a default notification',
-		dismissable: false
-	};
-
-	const dangerNotification: Notification = {
-		id: '2',
-		type: 'danger',
-		message: 'This is a danger notification',
-		dismissable: false
-	};
-
-	const warningNotification: Notification = {
-		id: '3',
-		type: 'warning',
-		message: 'This is a warning notification',
-		dismissable: false
-	};
-
-	const infoNotification: Notification = {
-		id: '4',
-		type: 'info',
-		message: 'This is an info notification',
-		dismissable: false
-	};
-
-	const successNotification: Notification = {
-		id: '5',
-		type: 'success',
-		message: 'This is a success notification',
-		dismissable: false
-	};
-
-	const defaultIconNotification: Notification = {
-		id: '6',
-		type: 'default',
-		message: 'This is a default notification with icon',
-		icon: 'Bell',
-		dismissable: false
-	};
-
-	const dangerIconNotification: Notification = {
-		id: '7',
-		type: 'danger',
-		message: 'This is a danger notification with icon',
-		icon: 'SealWarning',
-		dismissable: false
-	};
-
-	const warningIconNotification: Notification = {
-		id: '8',
-		type: 'warning',
-		message: 'This is a warning notification with icon',
-		icon: 'Warning',
-		dismissable: false
-	};
-
-	const infoIconNotification: Notification = {
-		id: '9',
-		type: 'info',
-		message: 'This is an info notification with icon',
-		icon: 'Info',
-		dismissable: false
-	};
-
-	const successIconNotification: Notification = {
-		id: '10',
-		type: 'success',
-		message: 'This is a success notification with icon',
-		icon: 'Check',
-		dismissable: false
-	};
-
-	const defaultDismissableNotificationWithIcon: Notification = {
-		id: '11',
-		type: 'default',
-		message: 'This is a dismissable default notification with icon',
-		icon: 'Bell',
-		dismissable: true
-	};
-
-	const dangerDismissableNotificationWithIcon: Notification = {
-		id: '12',
-		type: 'danger',
-		message: 'This is a dismissable danger notification with icon',
-		icon: 'SealWarning',
-		dismissable: true
-	};
-
-	const warningDismissableNotificationWithIcon: Notification = {
-		id: '13',
-		type: 'warning',
-		message: 'This is a dismissable warning notification with icon',
-		icon: 'Warning',
-		dismissable: true
-	};
-
-	const infoDismissableNotificationWithIcon: Notification = {
-		id: '14',
-		type: 'info',
-		message: 'This is a dismissable info notification with icon',
-		icon: 'Info',
-		dismissable: true
-	};
-
-	const successDismissableNotificationWithIcon: Notification = {
-		id: '15',
-		type: 'success',
-		message: 'This is a dismissable success notification with icon',
-		icon: 'Check',
-		dismissable: true
-	};
-
-	const defaultDismissableNoIconNotification: Notification = {
-		id: '16',
-		type: 'default',
-		message: 'This is a dismissable default notification without icon',
-		dismissable: true
-	};
-
-	const dangerDismissableNoIconNotification: Notification = {
-		id: '17',
-		type: 'danger',
-		message: 'This is a dismissable danger notification without icon',
-		dismissable: true
-	};
-
-	const warningDismissableNoIconNotification: Notification = {
-		id: '18',
-		type: 'warning',
-		message: 'This is a dismissable warning notification without icon',
-		dismissable: true
-	};
-
-	const infoDismissableNoIconNotification: Notification = {
-		id: '19',
-		type: 'info',
-		message: 'This is a dismissable info notification without icon',
-		dismissable: true
-	};
-
-	const successDismissableNoIconNotification: Notification = {
-		id: '20',
-		type: 'success',
-		message: 'This is a dismissable success notification without icon',
-		dismissable: true
-	};
+  import type { Notification } from '../../../notifications';
+  import Toast from './Toast.svelte';
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+
+  const { Story } = defineMeta({
+    component: Toast,
+    title: 'Design System/Toast',
+    tags: ['autodocs'],
+  });
+
+  const defaultNotification: Notification = {
+    id: '1',
+    type: 'default',
+    message: 'This is a default notification',
+    dismissable: false,
+  };
+
+  const dangerNotification: Notification = {
+    id: '2',
+    type: 'danger',
+    message: 'This is a danger notification',
+    dismissable: false,
+  };
+
+  const warningNotification: Notification = {
+    id: '3',
+    type: 'warning',
+    message: 'This is a warning notification',
+    dismissable: false,
+  };
+
+  const infoNotification: Notification = {
+    id: '4',
+    type: 'info',
+    message: 'This is an info notification',
+    dismissable: false,
+  };
+
+  const successNotification: Notification = {
+    id: '5',
+    type: 'success',
+    message: 'This is a success notification',
+    dismissable: false,
+  };
+
+  const defaultIconNotification: Notification = {
+    id: '6',
+    type: 'default',
+    message: 'This is a default notification with icon',
+    icon: 'Bell',
+    dismissable: false,
+  };
+
+  const dangerIconNotification: Notification = {
+    id: '7',
+    type: 'danger',
+    message: 'This is a danger notification with icon',
+    icon: 'SealWarning',
+    dismissable: false,
+  };
+
+  const warningIconNotification: Notification = {
+    id: '8',
+    type: 'warning',
+    message: 'This is a warning notification with icon',
+    icon: 'Warning',
+    dismissable: false,
+  };
+
+  const infoIconNotification: Notification = {
+    id: '9',
+    type: 'info',
+    message: 'This is an info notification with icon',
+    icon: 'Info',
+    dismissable: false,
+  };
+
+  const successIconNotification: Notification = {
+    id: '10',
+    type: 'success',
+    message: 'This is a success notification with icon',
+    icon: 'Check',
+    dismissable: false,
+  };
+
+  const defaultDismissableNotificationWithIcon: Notification = {
+    id: '11',
+    type: 'default',
+    message: 'This is a dismissable default notification with icon',
+    icon: 'Bell',
+    dismissable: true,
+  };
+
+  const dangerDismissableNotificationWithIcon: Notification = {
+    id: '12',
+    type: 'danger',
+    message: 'This is a dismissable danger notification with icon',
+    icon: 'SealWarning',
+    dismissable: true,
+  };
+
+  const warningDismissableNotificationWithIcon: Notification = {
+    id: '13',
+    type: 'warning',
+    message: 'This is a dismissable warning notification with icon',
+    icon: 'Warning',
+    dismissable: true,
+  };
+
+  const infoDismissableNotificationWithIcon: Notification = {
+    id: '14',
+    type: 'info',
+    message: 'This is a dismissable info notification with icon',
+    icon: 'Info',
+    dismissable: true,
+  };
+
+  const successDismissableNotificationWithIcon: Notification = {
+    id: '15',
+    type: 'success',
+    message: 'This is a dismissable success notification with icon',
+    icon: 'Check',
+    dismissable: true,
+  };
+
+  const defaultDismissableNoIconNotification: Notification = {
+    id: '16',
+    type: 'default',
+    message: 'This is a dismissable default notification without icon',
+    dismissable: true,
+  };
+
+  const dangerDismissableNoIconNotification: Notification = {
+    id: '17',
+    type: 'danger',
+    message: 'This is a dismissable danger notification without icon',
+    dismissable: true,
+  };
+
+  const warningDismissableNoIconNotification: Notification = {
+    id: '18',
+    type: 'warning',
+    message: 'This is a dismissable warning notification without icon',
+    dismissable: true,
+  };
+
+  const infoDismissableNoIconNotification: Notification = {
+    id: '19',
+    type: 'info',
+    message: 'This is a dismissable info notification without icon',
+    dismissable: true,
+  };
+
+  const successDismissableNoIconNotification: Notification = {
+    id: '20',
+    type: 'success',
+    message: 'This is a dismissable success notification without icon',
+    dismissable: true,
+  };
 </script>
 
 <Story name="Notifications" asChild>
-	<div class="space-y-8">
-		<div class="space-y-4">
-			<h5 class="text-lg font-semibold">Basic Notifications</h5>
-			<div class="space-y-2">
-				<Toast notification={defaultNotification} />
-				<Toast notification={dangerNotification} />
-				<Toast notification={warningNotification} />
-				<Toast notification={infoNotification} />
-				<Toast notification={successNotification} />
-			</div>
-		</div>
-
-		<div class="space-y-4">
-			<h5 class="text-lg font-semibold">Notifications with Icons</h5>
-			<div class="space-y-2">
-				<Toast notification={defaultIconNotification} />
-				<Toast notification={dangerIconNotification} />
-				<Toast notification={warningIconNotification} />
-				<Toast notification={infoIconNotification} />
-				<Toast notification={successIconNotification} />
-			</div>
-		</div>
-
-		<div class="space-y-4">
-			<h5 class="text-lg font-semibold">Dismissable Notifications</h5>
-			<div class="space-y-2">
-				<Toast notification={defaultDismissableNoIconNotification} />
-				<Toast notification={dangerDismissableNoIconNotification} />
-				<Toast notification={warningDismissableNoIconNotification} />
-				<Toast notification={infoDismissableNoIconNotification} />
-				<Toast notification={successDismissableNoIconNotification} />
-			</div>
-		</div>
-
-		<div class="space-y-4">
-			<h5 class="text-lg font-semibold">Dismissable Notifications with Icons</h5>
-			<div class="space-y-2">
-				<Toast notification={defaultDismissableNotificationWithIcon} />
-				<Toast notification={dangerDismissableNotificationWithIcon} />
-				<Toast notification={warningDismissableNotificationWithIcon} />
-				<Toast notification={infoDismissableNotificationWithIcon} />
-				<Toast notification={successDismissableNotificationWithIcon} />
-			</div>
-		</div>
-	</div>
+  <div class="space-y-8">
+    <div class="space-y-4">
+      <h5 class="text-lg font-semibold">Basic Notifications</h5>
+      <div class="space-y-2">
+        <Toast notification={defaultNotification} />
+        <Toast notification={dangerNotification} />
+        <Toast notification={warningNotification} />
+        <Toast notification={infoNotification} />
+        <Toast notification={successNotification} />
+      </div>
+    </div>
+
+    <div class="space-y-4">
+      <h5 class="text-lg font-semibold">Notifications with Icons</h5>
+      <div class="space-y-2">
+        <Toast notification={defaultIconNotification} />
+        <Toast notification={dangerIconNotification} />
+        <Toast notification={warningIconNotification} />
+        <Toast notification={infoIconNotification} />
+        <Toast notification={successIconNotification} />
+      </div>
+    </div>
+
+    <div class="space-y-4">
+      <h5 class="text-lg font-semibold">Dismissable Notifications</h5>
+      <div class="space-y-2">
+        <Toast notification={defaultDismissableNoIconNotification} />
+        <Toast notification={dangerDismissableNoIconNotification} />
+        <Toast notification={warningDismissableNoIconNotification} />
+        <Toast notification={infoDismissableNoIconNotification} />
+        <Toast notification={successDismissableNoIconNotification} />
+      </div>
+    </div>
+
+    <div class="space-y-4">
+      <h5 class="text-lg font-semibold">Dismissable Notifications with Icons</h5>
+      <div class="space-y-2">
+        <Toast notification={defaultDismissableNotificationWithIcon} />
+        <Toast notification={dangerDismissableNotificationWithIcon} />
+        <Toast notification={warningDismissableNotificationWithIcon} />
+        <Toast notification={infoDismissableNotificationWithIcon} />
+        <Toast notification={successDismissableNotificationWithIcon} />
+      </div>
+    </div>
+  </div>
 </Story>