@reshape-biotech/design-system 1.2.6 → 2.0.0

package/dist/components/toast/Toast.svelte

@@ -1,62 +1,62 @@
 <script lang="ts">
-	import { type Notification, notifications } from '../../notifications';
-	import Icon from '../icons/Icon.svelte';
-	import { type IconColor } from '../icons';
-	import { tokens } from '../../tokens';
-	import IconButton from '../icon-button/IconButton.svelte';
+  import { type Notification, notifications } from '../../notifications';
+  import Icon from '../icons/Icon.svelte';
+  import { type IconColor } from '../icons';
+  import { tokens } from '../../tokens';
+  import IconButton from '../icon-button/IconButton.svelte';
 
-	let { notification }: { notification: Notification } = $props();
+  let { notification }: { notification: Notification } = $props();
 
-	const color = {
-		danger: tokens.backgroundColor['danger-inverse'],
-		success: tokens.backgroundColor['success-inverse-hover'],
-		warning: tokens.backgroundColor['warning-inverse-hover'],
-		info: tokens.backgroundColor['blue-inverse'],
-		default: tokens.backgroundColor.surface
-	};
+  const color = {
+    danger: tokens.backgroundColor['danger-inverse'],
+    success: tokens.backgroundColor['success-inverse-hover'],
+    warning: tokens.backgroundColor['warning-inverse-hover'],
+    info: tokens.backgroundColor['blue-inverse'],
+    default: tokens.backgroundColor.surface,
+  };
 
-	const textColor: Record<string, IconColor | 'inherit'> = {
-		danger: 'primary-inverse',
-		success: 'primary-inverse',
-		warning: 'primary-inverse',
-		info: 'primary-inverse',
-		default: 'inherit'
-	};
+  const textColor: Record<string, IconColor | 'inherit'> = {
+    danger: 'primary-inverse',
+    success: 'primary-inverse',
+    warning: 'primary-inverse',
+    info: 'primary-inverse',
+    default: 'inherit',
+  };
 </script>
 
 <div
-	class="my-1 flex min-h-10 min-w-80 flex-row items-center rounded-lg px-2 shadow-md"
-	style="background: {color[notification.type]}"
-	class:border={notification.type === 'default'}
-	class:border-base-200={notification.type === 'default'}
+  class="my-1 flex min-h-10 min-w-80 flex-row items-center rounded-lg px-2 shadow-md"
+  style="background: {color[notification.type]}"
+  class:border={notification.type === 'default'}
+  class:border-base-200={notification.type === 'default'}
 >
-	{#if notification.icon}
-		<Icon
-			color={textColor[notification.type]}
-			size={'14'}
-			iconName={notification.icon}
-			class="flex h-6 w-6 items-center justify-center rounded-md {notification.type !== 'default'
-				? 'bg-neutral-inverse-hover'
-				: 'bg-neutral'} p-1 {textColor[notification.type]}"
-		/>
-	{/if}
-	<div
-		class="p-2 font-medium"
-		style="display:block"
-		class:text-base-white-default={notification.type !== 'default'}
-	>
-		{notification.message}
-	</div>
-	{#if notification.dismissable}
-		<div class="grow"></div>
-		<div class="py-2">
-			<IconButton rounded={false} size="xs" onclick={() => notifications.dismiss(notification.id)}>
-				<Icon
-					color={textColor[notification.type]}
-					iconName={'X'}
-					class="rounded-md {textColor[notification.type]}"
-				/>
-			</IconButton>
-		</div>
-	{/if}
+  {#if notification.icon}
+    <Icon
+      color={textColor[notification.type]}
+      size={'14'}
+      iconName={notification.icon}
+      class="flex h-6 w-6 items-center justify-center rounded-md {notification.type !== 'default'
+        ? 'bg-neutral-inverse-hover'
+        : 'bg-neutral'} p-1 {textColor[notification.type]}"
+    />
+  {/if}
+  <div
+    class="p-2 font-medium"
+    style="display:block"
+    class:text-base-white-default={notification.type !== 'default'}
+  >
+    {notification.message}
+  </div>
+  {#if notification.dismissable}
+    <div class="grow"></div>
+    <div class="py-2">
+      <IconButton rounded={false} size="xs" onclick={() => notifications.dismiss(notification.id)}>
+        <Icon
+          color={textColor[notification.type]}
+          iconName={'X'}
+          class="rounded-md {textColor[notification.type]}"
+        />
+      </IconButton>
+    </div>
+  {/if}
 </div>

package/dist/components/toggle/Toggle.stories.svelte

@@ -1,15 +1,15 @@
 <script module>
-	import { defineMeta } from '@storybook/addon-svelte-csf';
-	import Toggle from './Toggle.svelte';
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+  import Toggle from './Toggle.svelte';
 
-	// More on how to set up stories at: https://storybook.js.org/docs/writing-stories
-	const { Story } = defineMeta({
-		title: 'Design System/Toggle',
-		component: Toggle,
-		tags: ['autodocs']
-	});
+  // More on how to set up stories at: https://storybook.js.org/docs/writing-stories
+  const { Story } = defineMeta({
+    title: 'Design System/Toggle',
+    component: Toggle,
+    tags: ['autodocs'],
+  });
 </script>
 
 <Story name="Base" asChild>
-	<Toggle id="toggle-1" />
+  <Toggle id="toggle-1" />
 </Story>

package/dist/components/toggle/Toggle.svelte

@@ -1,74 +1,74 @@
 <script lang="ts">
-	interface Props {
-		value?: boolean;
-		onclick?: (event?: MouseEvent) => void;
-		id: string;
-		'data-testid'?: string;
-	}
+  interface Props {
+    value?: boolean;
+    onclick?: (event?: MouseEvent) => void;
+    id: string;
+    'data-testid'?: string;
+  }
 
-	let { value = $bindable(false), onclick, id, 'data-testid': testId }: Props = $props();
+  let { value = $bindable(false), onclick, id, 'data-testid': testId }: Props = $props();
 </script>
 
 <label class="switch">
-	<input type="checkbox" bind:checked={value} {onclick} {id} data-testid={testId} />
-	<span class="slider round"></span>
+  <input type="checkbox" bind:checked={value} {onclick} {id} data-testid={testId} />
+  <span class="slider round"></span>
 </label>
 
 <style>
-	/* The switch - the box around the slider */
-	.switch {
-		position: relative;
-		display: inline-block;
-		height: 1.25rem;
-		width: 2.25rem;
+  /* The switch - the box around the slider */
+  .switch {
+    position: relative;
+    display: inline-block;
+    height: 1.25rem;
+    width: 2.25rem;
 }
 
-	/* Hide default HTML checkbox */
-	.switch input {
-		height: 0px;
-		width: 0px;
-		opacity: 0;
+  /* Hide default HTML checkbox */
+  .switch input {
+    height: 0px;
+    width: 0px;
+    opacity: 0;
 }
 
-	/* The slider */
-	.slider {
-		position: absolute;
-		cursor: pointer;
-		top: 0;
-		left: 0;
-		right: 0;
-		bottom: 0;
-		transition: 0.1s;
-		background-color: #12192A26;
-	}
+  /* The slider */
+  .slider {
+    position: absolute;
+    cursor: pointer;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    transition: 0.1s;
+    background-color: #12192A26;
+  }
 
-	.slider:before {
-		content: '';
-		left: 2px;
-		bottom: 2px;
-		transition: 0.1s;
-		position: absolute;
-		height: 1rem;
-		width: 1rem;
-		--tw-bg-opacity: 1;
-		background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
-	}
+  .slider:before {
+    content: '';
+    left: 2px;
+    bottom: 2px;
+    transition: 0.1s;
+    position: absolute;
+    height: 1rem;
+    width: 1rem;
+    --tw-bg-opacity: 1;
+    background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
+  }
 
-	input:checked + .slider {
-		--tw-bg-opacity: 1;
-		background-color: rgb(87 80 238 / var(--tw-bg-opacity, 1));
+  input:checked + .slider {
+    --tw-bg-opacity: 1;
+    background-color: rgb(87 80 238 / var(--tw-bg-opacity, 1));
 }
 
-	input:checked + .slider:before {
-		transform: translateX(16px);
-	}
+  input:checked + .slider:before {
+    transform: translateX(16px);
+  }
 
-	/* Rounded sliders */
-	.slider.round {
-		border-radius: var(--rounded-badge, 1.9rem);
+  /* Rounded sliders */
+  .slider.round {
+    border-radius: var(--rounded-badge, 1.9rem);
 }
 
-	.slider.round:before {
-		border-radius: 9999px;
+  .slider.round:before {
+    border-radius: 9999px;
 }
 </style>

package/dist/components/toggle-icon-button/ToggleIconButton.stories.svelte

@@ -1,173 +1,173 @@
 <script module lang="ts">
-	import { defineMeta } from '@storybook/addon-svelte-csf';
-	import ToggleIconButton from './ToggleIconButton.svelte';
-	import { Icon } from '../icons';
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+  import ToggleIconButton from './ToggleIconButton.svelte';
+  import { Icon } from '../icons';
 
-	const { Story } = defineMeta({
-		component: ToggleIconButton,
-		title: 'Design System/ToggleIconButton',
-		tags: ['autodocs']
-	});
+  const { Story } = defineMeta({
+    component: ToggleIconButton,
+    title: 'Design System/ToggleIconButton',
+    tags: ['autodocs'],
+  });
 </script>
 
 <Story name="States" asChild>
-	<div class="flex flex-col gap-4">
-		<div class="bg-neutral-dark flex gap-4 p-4">
-			<div class="flex flex-col items-center gap-2">
-				<p class="text-sm">Normal</p>
-				<ToggleIconButton variant="primary-inverse">
-					<Icon iconName="DownloadSimple" />
-				</ToggleIconButton>
-			</div>
-			<div class="flex flex-col items-center gap-2">
-				<p class="text-sm">Active</p>
-				<ToggleIconButton variant="primary-inverse" isActive={true}>
-					<Icon iconName="DownloadSimple" />
-				</ToggleIconButton>
-			</div>
-		</div>
-	</div>
+  <div class="flex flex-col gap-4">
+    <div class="bg-neutral-dark flex gap-4 p-4">
+      <div class="flex flex-col items-center gap-2">
+        <p class="text-sm">Normal</p>
+        <ToggleIconButton variant="primary-inverse">
+          <Icon iconName="DownloadSimple" />
+        </ToggleIconButton>
+      </div>
+      <div class="flex flex-col items-center gap-2">
+        <p class="text-sm">Active</p>
+        <ToggleIconButton variant="primary-inverse" isActive={true}>
+          <Icon iconName="DownloadSimple" />
+        </ToggleIconButton>
+      </div>
+    </div>
+  </div>
 </Story>
 
 <Story name="Variants" asChild>
-	<div class="flex flex-col gap-4">
-		<div class="flex gap-8">
-			<div class="flex flex-col gap-2">
-				<p class="text-sm">Primary Inverse</p>
-				<div class="flex gap-4">
-					<ToggleIconButton variant="primary-inverse">
-						<Icon iconName="DownloadSimple" />
-					</ToggleIconButton>
-					<ToggleIconButton variant="primary-inverse" isActive={true}>
-						<Icon iconName="DownloadSimple" />
-					</ToggleIconButton>
-				</div>
-			</div>
-		</div>
-		<div class="flex gap-8">
-			<div class="flex flex-col gap-2">
-				<p class="text-sm">Secondary</p>
-				<div class="flex gap-4">
-					<ToggleIconButton variant="secondary">
-						<Icon iconName="DownloadSimple" />
-					</ToggleIconButton>
-					<ToggleIconButton variant="secondary" isActive={true}>
-						<Icon iconName="DownloadSimple" />
-					</ToggleIconButton>
-				</div>
-			</div>
-		</div>
-	</div>
+  <div class="flex flex-col gap-4">
+    <div class="flex gap-8">
+      <div class="flex flex-col gap-2">
+        <p class="text-sm">Primary Inverse</p>
+        <div class="flex gap-4">
+          <ToggleIconButton variant="primary-inverse">
+            <Icon iconName="DownloadSimple" />
+          </ToggleIconButton>
+          <ToggleIconButton variant="primary-inverse" isActive={true}>
+            <Icon iconName="DownloadSimple" />
+          </ToggleIconButton>
+        </div>
+      </div>
+    </div>
+    <div class="flex gap-8">
+      <div class="flex flex-col gap-2">
+        <p class="text-sm">Secondary</p>
+        <div class="flex gap-4">
+          <ToggleIconButton variant="secondary">
+            <Icon iconName="DownloadSimple" />
+          </ToggleIconButton>
+          <ToggleIconButton variant="secondary" isActive={true}>
+            <Icon iconName="DownloadSimple" />
+          </ToggleIconButton>
+        </div>
+      </div>
+    </div>
+  </div>
 </Story>
 
 <Story name="Sizes" asChild>
-	<div class="flex gap-8">
-		<div class="flex flex-col items-center gap-2">
-			<p class="text-sm">XS</p>
-			<div class="flex gap-4">
-				<ToggleIconButton variant="primary-inverse" size="xs">
-					<Icon iconName="DownloadSimple" />
-				</ToggleIconButton>
-				<ToggleIconButton variant="primary-inverse" size="xs" isActive={true}>
-					<Icon iconName="DownloadSimple" />
-				</ToggleIconButton>
-			</div>
-		</div>
-		<div class="flex flex-col items-center gap-2">
-			<p class="text-sm">SM</p>
-			<div class="flex gap-4">
-				<ToggleIconButton variant="primary-inverse" size="sm">
-					<Icon iconName="DownloadSimple" />
-				</ToggleIconButton>
-				<ToggleIconButton variant="primary-inverse" size="sm" isActive={true}>
-					<Icon iconName="DownloadSimple" />
-				</ToggleIconButton>
-			</div>
-		</div>
-		<div class="flex flex-col items-center gap-2">
-			<p class="text-sm">MD</p>
-			<div class="flex gap-4">
-				<ToggleIconButton variant="primary-inverse" size="md">
-					<Icon iconName="DownloadSimple" />
-				</ToggleIconButton>
-				<ToggleIconButton variant="primary-inverse" size="md" isActive={true}>
-					<Icon iconName="DownloadSimple" />
-				</ToggleIconButton>
-			</div>
-		</div>
-		<div class="flex flex-col items-center gap-2">
-			<p class="text-sm">LG</p>
-			<div class="flex gap-4">
-				<ToggleIconButton variant="primary-inverse" size="lg">
-					<Icon iconName="DownloadSimple" />
-				</ToggleIconButton>
-				<ToggleIconButton variant="primary-inverse" size="lg" isActive={true}>
-					<Icon iconName="DownloadSimple" />
-				</ToggleIconButton>
-			</div>
-		</div>
-	</div>
+  <div class="flex gap-8">
+    <div class="flex flex-col items-center gap-2">
+      <p class="text-sm">XS</p>
+      <div class="flex gap-4">
+        <ToggleIconButton variant="primary-inverse" size="xs">
+          <Icon iconName="DownloadSimple" />
+        </ToggleIconButton>
+        <ToggleIconButton variant="primary-inverse" size="xs" isActive={true}>
+          <Icon iconName="DownloadSimple" />
+        </ToggleIconButton>
+      </div>
+    </div>
+    <div class="flex flex-col items-center gap-2">
+      <p class="text-sm">SM</p>
+      <div class="flex gap-4">
+        <ToggleIconButton variant="primary-inverse" size="sm">
+          <Icon iconName="DownloadSimple" />
+        </ToggleIconButton>
+        <ToggleIconButton variant="primary-inverse" size="sm" isActive={true}>
+          <Icon iconName="DownloadSimple" />
+        </ToggleIconButton>
+      </div>
+    </div>
+    <div class="flex flex-col items-center gap-2">
+      <p class="text-sm">MD</p>
+      <div class="flex gap-4">
+        <ToggleIconButton variant="primary-inverse" size="md">
+          <Icon iconName="DownloadSimple" />
+        </ToggleIconButton>
+        <ToggleIconButton variant="primary-inverse" size="md" isActive={true}>
+          <Icon iconName="DownloadSimple" />
+        </ToggleIconButton>
+      </div>
+    </div>
+    <div class="flex flex-col items-center gap-2">
+      <p class="text-sm">LG</p>
+      <div class="flex gap-4">
+        <ToggleIconButton variant="primary-inverse" size="lg">
+          <Icon iconName="DownloadSimple" />
+        </ToggleIconButton>
+        <ToggleIconButton variant="primary-inverse" size="lg" isActive={true}>
+          <Icon iconName="DownloadSimple" />
+        </ToggleIconButton>
+      </div>
+    </div>
+  </div>
 </Story>
 
 <Story name="Rounded vs Square" asChild>
-	<div class="flex gap-8">
-		<div class="flex flex-col items-center gap-2">
-			<p class="text-sm">Rounded</p>
-			<div class="flex gap-4">
-				<ToggleIconButton variant="primary-inverse" rounded>
-					<Icon iconName="DownloadSimple" />
-				</ToggleIconButton>
-				<ToggleIconButton variant="primary-inverse" rounded isActive={true}>
-					<Icon iconName="DownloadSimple" />
-				</ToggleIconButton>
-			</div>
-		</div>
-		<div class="flex flex-col items-center gap-2">
-			<p class="text-sm">Square</p>
-			<div class="flex gap-4">
-				<ToggleIconButton variant="primary-inverse" rounded={false}>
-					<Icon iconName="DownloadSimple" />
-				</ToggleIconButton>
-				<ToggleIconButton variant="primary-inverse" rounded={false} isActive={true}>
-					<Icon iconName="DownloadSimple" />
-				</ToggleIconButton>
-			</div>
-		</div>
-	</div>
+  <div class="flex gap-8">
+    <div class="flex flex-col items-center gap-2">
+      <p class="text-sm">Rounded</p>
+      <div class="flex gap-4">
+        <ToggleIconButton variant="primary-inverse" rounded>
+          <Icon iconName="DownloadSimple" />
+        </ToggleIconButton>
+        <ToggleIconButton variant="primary-inverse" rounded isActive={true}>
+          <Icon iconName="DownloadSimple" />
+        </ToggleIconButton>
+      </div>
+    </div>
+    <div class="flex flex-col items-center gap-2">
+      <p class="text-sm">Square</p>
+      <div class="flex gap-4">
+        <ToggleIconButton variant="primary-inverse" rounded={false}>
+          <Icon iconName="DownloadSimple" />
+        </ToggleIconButton>
+        <ToggleIconButton variant="primary-inverse" rounded={false} isActive={true}>
+          <Icon iconName="DownloadSimple" />
+        </ToggleIconButton>
+      </div>
+    </div>
+  </div>
 </Story>
 
 <Story name="Primary Inverse Example" asChild>
-	<div class="bg-neutral-dark p-8">
-		<div class="flex gap-8">
-			<div class="flex flex-col items-center gap-2">
-				<p class="text-neutral-light text-sm">Normal</p>
-				<ToggleIconButton variant="primary-inverse">
-					<Icon iconName="DownloadSimple" />
-				</ToggleIconButton>
-			</div>
-			<div class="flex flex-col items-center gap-2">
-				<p class="text-neutral-light text-sm">Active</p>
-				<ToggleIconButton variant="primary-inverse" isActive={true}>
-					<Icon iconName="DownloadSimple" />
-				</ToggleIconButton>
-			</div>
-		</div>
-	</div>
+  <div class="bg-neutral-dark p-8">
+    <div class="flex gap-8">
+      <div class="flex flex-col items-center gap-2">
+        <p class="text-neutral-light text-sm">Normal</p>
+        <ToggleIconButton variant="primary-inverse">
+          <Icon iconName="DownloadSimple" />
+        </ToggleIconButton>
+      </div>
+      <div class="flex flex-col items-center gap-2">
+        <p class="text-neutral-light text-sm">Active</p>
+        <ToggleIconButton variant="primary-inverse" isActive={true}>
+          <Icon iconName="DownloadSimple" />
+        </ToggleIconButton>
+      </div>
+    </div>
+  </div>
 </Story>
 
 <Story name="Disabled and Loading" asChild>
-	<div class="flex gap-8">
-		<div class="flex flex-col items-center gap-2">
-			<p class="text-sm">Disabled</p>
-			<ToggleIconButton disabled>
-				<Icon iconName="DownloadSimple" />
-			</ToggleIconButton>
-		</div>
-		<div class="flex flex-col items-center gap-2">
-			<p class="text-sm">Loading</p>
-			<ToggleIconButton loading>
-				<Icon iconName="DownloadSimple" />
-			</ToggleIconButton>
-		</div>
-	</div>
+  <div class="flex gap-8">
+    <div class="flex flex-col items-center gap-2">
+      <p class="text-sm">Disabled</p>
+      <ToggleIconButton disabled>
+        <Icon iconName="DownloadSimple" />
+      </ToggleIconButton>
+    </div>
+    <div class="flex flex-col items-center gap-2">
+      <p class="text-sm">Loading</p>
+      <ToggleIconButton loading>
+        <Icon iconName="DownloadSimple" />
+      </ToggleIconButton>
+    </div>
+  </div>
 </Story>