@reshape-biotech/design-system 1.2.6 → 2.0.0

package/dist/components/input/Input.svelte

@@ -1,124 +1,124 @@
 <script lang="ts">
-	import type { Snippet } from 'svelte';
-	import { IconButton } from '../icon-button';
-	import { Icon } from '../icons';
-	import type { HTMLInputAttributes } from 'svelte/elements';
-
-	interface InputProps extends Omit<HTMLInputAttributes, 'size' | 'prefix' | 'suffix'> {
-		label?: string | null;
-		id?: string | undefined;
-		validator?: (a: string | number) => boolean;
-		prefix?: Snippet<[any]>;
-		suffix?: Snippet;
-		error?: Snippet;
-		input?: HTMLInputElement;
-		size?: 'xs' | 'sm' | 'md' | 'lg' | 'dynamic';
-		transparent?: boolean;
-		clearable?: boolean;
-		onclear?: () => void;
-		class?: string;
-		oninput?: (event: Event) => void;
-		onblur?: (event: FocusEvent) => void;
-	}
-
-	let {
-		label = null,
-		value = $bindable(),
-		type = 'text',
-		validator = (_) => {
-			return true;
-		},
-		prefix,
-		suffix,
-		error,
-		input = $bindable(),
-		size = 'md',
-		transparent = false,
-		clearable = false,
-		onclear = () => {},
-		class: className,
-		oninput,
-		onblur,
-		...rest
-	}: InputProps = $props();
-
-	export function focus() {
-		input?.focus();
-	}
-
-	let valid = $state(true);
-
-	const inputId = crypto.randomUUID();
-	const id = $derived(rest.id ?? inputId);
-	function handleInput(event: Event) {
-		if (rest.readonly) return;
-		const target = event.target as HTMLInputElement;
-		value = target.value;
-		oninput?.(event);
-	}
-
-	function handleBlur(event: FocusEvent & { currentTarget: EventTarget & HTMLInputElement }) {
-		valid = validator(value);
-		onblur?.(event);
-	}
+  import type { Snippet } from 'svelte';
+  import { IconButton } from '../icon-button';
+  import { Icon } from '../icons';
+  import type { HTMLInputAttributes } from 'svelte/elements';
+
+  interface InputProps extends Omit<HTMLInputAttributes, 'size' | 'prefix' | 'suffix'> {
+    label?: string | null;
+    id?: string | undefined;
+    validator?: (a: string | number) => boolean;
+    prefix?: Snippet<[any]>;
+    suffix?: Snippet;
+    error?: Snippet;
+    input?: HTMLInputElement;
+    size?: 'xs' | 'sm' | 'md' | 'lg' | 'dynamic';
+    transparent?: boolean;
+    clearable?: boolean;
+    onclear?: () => void;
+    class?: string;
+    oninput?: (event: Event) => void;
+    onblur?: (event: FocusEvent) => void;
+  }
+
+  let {
+    label = null,
+    value = $bindable(),
+    type = 'text',
+    validator = (_) => {
+      return true;
+    },
+    prefix,
+    suffix,
+    error,
+    input = $bindable(),
+    size = 'md',
+    transparent = false,
+    clearable = false,
+    onclear = () => {},
+    class: className,
+    oninput,
+    onblur,
+    ...rest
+  }: InputProps = $props();
+
+  export function focus() {
+    input?.focus();
+  }
+
+  let valid = $state(true);
+
+  const inputId = crypto.randomUUID();
+  const id = $derived(rest.id ?? inputId);
+  function handleInput(event: Event) {
+    if (rest.readonly) return;
+    const target = event.target as HTMLInputElement;
+    value = target.value;
+    oninput?.(event);
+  }
+
+  function handleBlur(event: FocusEvent & { currentTarget: EventTarget & HTMLInputElement }) {
+    valid = validator(value);
+    onblur?.(event);
+  }
 </script>
 
 <div class="w-full">
-	{#if 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}
-	>
-		<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>
-
-	{@render error?.()}
+  {#if 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}
+  >
+    <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>
+
+  {@render error?.()}
 </div>
 
 <style>
-	input {
+  input {
 
     width: 100%;
 
@@ -129,19 +129,19 @@
     outline-offset: 2px
 }
 
-	div:not(:focus-within):hover {
+  div:not(:focus-within):hover {
 
     border-color: #5750ee40
 }
 
-	div:focus-within {
+  div:focus-within {
 
     --tw-border-opacity: 1;
 
     border-color: rgb(87 80 238 / var(--tw-border-opacity, 1))
 }
 
-	.size-xs {
+  .size-xs {
 
     height: 1.5rem;
 
@@ -152,7 +152,7 @@
     line-height: 1rem
 }
 
-	.size-sm {
+  .size-sm {
 
     height: 2rem;
 
@@ -165,7 +165,7 @@
     padding-bottom: 0.5rem
 }
 
-	.size-md {
+  .size-md {
 
     height: 2.5rem;
 
@@ -178,7 +178,7 @@
     padding-bottom: 0.5rem
 }
 
-	.size-lg {
+  .size-lg {
 
     height: 3rem;
 
@@ -195,7 +195,7 @@
     line-height: 1.5rem
 }
 
-	.size-dynamic {
+  .size-dynamic {
 
     height: auto;
 

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

@@ -1,17 +1,17 @@
 <script module lang="ts">
-	import { defineMeta } from '@storybook/addon-svelte-csf';
-	import Label from './Label.svelte';
+  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' }
-		}
-	});
+  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' }} />
@@ -19,10 +19,10 @@
 <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'
-	}}
+  name="With Custom Class"
+  args={{
+    text: 'Custom Styled Label',
+    forId: 'custom',
+    class: 'text-lg text-primary font-bold',
+  }}
 />

package/dist/components/label/Label.svelte

@@ -1,17 +1,17 @@
 <script lang="ts">
-	interface Props {
-		forId: string;
-		text: string;
-		required?: boolean;
-		class?: string;
-	}
+  interface Props {
+    forId: string;
+    text: string;
+    required?: boolean;
+    class?: string;
+  }
 
-	const { forId, text, required = false, class: className }: Props = $props();
+  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}
+  {text}
+  {#if required}
+    <span class="ml-0.5 text-danger">*</span>
+  {/if}
 </label>

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

@@ -1,97 +1,97 @@
 <script module lang="ts">
-	import List from './List.svelte';
-	import Tag from '../tag/Tag.svelte';
-	import { defineMeta } from '@storybook/addon-svelte-csf';
-	import { Icon } from '../icons';
+  import List from './List.svelte';
+  import Tag from '../tag/Tag.svelte';
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+  import { Icon } from '../icons';
 
-	const { Story } = defineMeta({
-		component: List,
-		title: 'Design System/List',
-		tags: ['autodocs']
-	});
+  const { Story } = defineMeta({
+    component: List,
+    title: 'Design System/List',
+    tags: ['autodocs'],
+  });
 
-	const items: { name: string; licenses: string; repository: string }[] = [
-		{ name: 'Formik', licenses: 'MIT', repository: 'somewhere' },
-		{ name: 'Formik', licenses: 'MIT', repository: 'somewhere' },
-		{ name: 'Formik', licenses: 'MIT', repository: 'somewhere' },
-		{ name: 'Formik', licenses: 'MIT', repository: 'somewhere' }
-	];
+  const items: { name: string; licenses: string; repository: string }[] = [
+    { name: 'Formik', licenses: 'MIT', repository: 'somewhere' },
+    { name: 'Formik', licenses: 'MIT', repository: 'somewhere' },
+    { name: 'Formik', licenses: 'MIT', repository: 'somewhere' },
+    { name: 'Formik', licenses: 'MIT', repository: 'somewhere' },
+  ];
 </script>
 
 <Story name="Default" args={{}} asChild>
-	<List {items}>
-		{#snippet item(item)}
-			<div class="flex min-h-2 flex-row gap-2">
-				<div class="flex flex-row justify-start gap-2">
-					<div class="max-w-56 truncate font-bold">
-						{item.name}
-					</div>
-					{#if item.licenses}
-						<Tag>
-							{item.licenses}
-						</Tag>
-					{/if}
-				</div>
-				<div class="flex grow flex-row justify-end gap-3">
-					{#if item.repository}
-						<div class="flex flex-row items-center gap-1">
-							<a
-								href={item.repository}
-								class="text-secondary"
-								target="_blank"
-								rel="noopener noreferrer"
-							>
-								Repository
-							</a>
-							<Icon iconName="ArrowUpRight" />
-						</div>
-					{/if}
-				</div>
-			</div>
-		{/snippet}
-	</List>
+  <List {items}>
+    {#snippet item(item)}
+      <div class="flex min-h-2 flex-row gap-2">
+        <div class="flex flex-row justify-start gap-2">
+          <div class="max-w-56 truncate font-bold">
+            {item.name}
+          </div>
+          {#if item.licenses}
+            <Tag>
+              {item.licenses}
+            </Tag>
+          {/if}
+        </div>
+        <div class="flex grow flex-row justify-end gap-3">
+          {#if item.repository}
+            <div class="flex flex-row items-center gap-1">
+              <a
+                href={item.repository}
+                class="text-secondary"
+                target="_blank"
+                rel="noopener noreferrer"
+              >
+                Repository
+              </a>
+              <Icon iconName="ArrowUpRight" />
+            </div>
+          {/if}
+        </div>
+      </div>
+    {/snippet}
+  </List>
 </Story>
 
 <Story name="Compact" args={{ variant: 'compact' }} asChild>
-	<List {items} variant="compact">
-		{#snippet item(item)}
-			<div class="flex min-h-2 flex-row gap-2">
-				<div class="flex flex-row justify-start gap-2">
-					<div class="max-w-56 truncate font-bold">
-						{item.name}
-					</div>
-					{#if item.licenses}
-						<Tag>
-							{item.licenses}
-						</Tag>
-					{/if}
-				</div>
-				<div class="flex grow flex-row justify-end gap-3">
-					{#if item.repository}
-						<div class="flex flex-row items-center gap-1">
-							<a
-								href={item.repository}
-								class="text-gray-700"
-								target="_blank"
-								rel="noopener noreferrer"
-							>
-								Repository
-							</a>
-							<Icon iconName="ArrowUpRight" />
-						</div>
-					{/if}
-				</div>
-			</div>
-		{/snippet}
-	</List>
+  <List {items} variant="compact">
+    {#snippet item(item)}
+      <div class="flex min-h-2 flex-row gap-2">
+        <div class="flex flex-row justify-start gap-2">
+          <div class="max-w-56 truncate font-bold">
+            {item.name}
+          </div>
+          {#if item.licenses}
+            <Tag>
+              {item.licenses}
+            </Tag>
+          {/if}
+        </div>
+        <div class="flex grow flex-row justify-end gap-3">
+          {#if item.repository}
+            <div class="flex flex-row items-center gap-1">
+              <a
+                href={item.repository}
+                class="text-gray-700"
+                target="_blank"
+                rel="noopener noreferrer"
+              >
+                Repository
+              </a>
+              <Icon iconName="ArrowUpRight" />
+            </div>
+          {/if}
+        </div>
+      </div>
+    {/snippet}
+  </List>
 </Story>
 
 <Story name="Loading" asChild>
-	<List variant="compact" items={[{}, {}, {}]}>
-		{#snippet item({})}
-			<div class="flex h-8 w-full items-center">
-				<div class="skeleton h-6 w-full bg-neutral"></div>
-			</div>
-		{/snippet}
-	</List>
+  <List variant="compact" items={[{}, {}, {}]}>
+    {#snippet item({})}
+      <div class="flex h-8 w-full items-center">
+        <div class="skeleton h-6 w-full bg-neutral"></div>
+      </div>
+    {/snippet}
+  </List>
 </Story>

package/dist/components/list/List.svelte

@@ -1,26 +1,26 @@
 <script lang="ts" generics="T">
-	import type { Overflow } from '../../tailwind';
-	import type { Snippet } from 'svelte';
-
-	type Props = {
-		items: T[];
-		item: Snippet<[T]>;
-		overflow?: Overflow;
-		variant?: 'compact' | 'default';
-	};
-	let { items, item, overflow = 'overflow-y-auto', variant = 'default' }: Props = $props();
+  import type { Overflow } from '../../tailwind';
+  import type { Snippet } from 'svelte';
+
+  type Props = {
+    items: T[];
+    item: Snippet<[T]>;
+    overflow?: Overflow;
+    variant?: 'compact' | 'default';
+  };
+  let { items, item, overflow = 'overflow-y-auto', variant = 'default' }: Props = $props();
 </script>
 
 <div class="{`listStyles ${variant === 'compact' ? 'compact' : 'default'} ${overflow} `}}">
-	{#each items as currentItem, i}
-		<div class="item">
-			{@render item(currentItem)}
-		</div>
-	{/each}
+  {#each items as currentItem, i}
+    <div class="item">
+      {@render item(currentItem)}
+    </div>
+  {/each}
 </div>
 
 <style>
-	.listStyles {
+  .listStyles {
 
     display: flex;
 
@@ -35,12 +35,12 @@
     border-radius: 0.25rem
 }
 
-		.listStyles.default {
+    .listStyles.default {
 
     gap: 1rem
 }
 
-		.listStyles.compact {
+    .listStyles.compact {
 
     gap: 0px;
 
@@ -53,7 +53,7 @@
     padding-right: 1rem
 }
 
-		.listStyles.compact :global(> .item:not(:last-child)) {
+    .listStyles.compact :global(> .item:not(:last-child)) {
 
     border-bottom-width: 1px;
 
@@ -62,7 +62,7 @@
     border-color: #12192a14
 }
 
-		.listStyles :global(.item) {
+    .listStyles :global(.item) {
 
     align-self: stretch
 }

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

@@ -1,21 +1,21 @@
 <script module>
-	import { defineMeta } from '@storybook/addon-svelte-csf';
-	import Logo from './Logo.svelte';
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+  import Logo from './Logo.svelte';
 
-	// More on how to set up stories at: https://storybook.js.org/docs/writing-stories
-	const { Story } = defineMeta({
-		title: 'Design System/Logo',
-		component: Logo,
-		tags: ['autodocs']
-	});
+  // More on how to set up stories at: https://storybook.js.org/docs/writing-stories
+  const { Story } = defineMeta({
+    title: 'Design System/Logo',
+    component: Logo,
+    tags: ['autodocs'],
+  });
 </script>
 
 <Story name="Base" asChild>
-	<div class="flex flex-col gap-4">
-		<Logo size="xs" />
-		<Logo size="sm" />
-		<Logo size="md" />
-		<Logo size="lg" />
-		<Logo size="xl" />
-	</div>
+  <div class="flex flex-col gap-4">
+    <Logo size="xs" />
+    <Logo size="sm" />
+    <Logo size="md" />
+    <Logo size="lg" />
+    <Logo size="xl" />
+  </div>
 </Story>