@reshape-biotech/design-system 1.2.6 → 1.2.7

package/dist/components/banner/Banner.svelte

@@ -1,55 +1,55 @@
 <script lang="ts">
-	import type { Snippet } from 'svelte';
-	import { IconButton } from '../icon-button/';
-	import Icon from '../icons/Icon.svelte';
+  import type { Snippet } from 'svelte';
+  import { IconButton } from '../icon-button/';
+  import Icon from '../icons/Icon.svelte';
 
-	interface Props {
-		type?: 'neutral' | 'success' | 'progress' | 'warning' | 'error';
-		show?: boolean;
-		closable?: boolean;
-		icon?: Snippet;
-		content: Snippet;
-	}
+  interface Props {
+    type?: 'neutral' | 'success' | 'progress' | 'warning' | 'error';
+    show?: boolean;
+    closable?: boolean;
+    icon?: Snippet;
+    content: Snippet;
+  }
 
-	let {
-		type = 'neutral',
-		show = $bindable(true),
-		closable = true,
-		icon,
-		content
-	}: Props = $props();
+  let {
+    type = 'neutral',
+    show = $bindable(true),
+    closable = true,
+    icon,
+    content,
+  }: Props = $props();
 
-	const color = {
-		neutral: 'neutral',
-		success: 'success',
-		progress: 'blue',
-		warning: 'warning',
-		error: 'danger'
-	}[type];
+  const color = {
+    neutral: 'neutral',
+    success: 'success',
+    progress: 'blue',
+    warning: 'warning',
+    error: 'danger',
+  }[type];
 </script>
 
 {#if show}
-	<div class="rounded-lg bg-{color} flex w-full items-center justify-between p-3">
-		<div class="inline-flex w-full items-center justify-start gap-3">
-			{#if icon}
-				<div class="flex size-5 items-center justify-center text-icon-{color} ">
-					{@render icon?.()}
-				</div>
-			{/if}
-			<div class="content w-full text-sm">
-				{@render content?.()}
-			</div>
-		</div>
-		{#if closable}
-			<IconButton size="sm" onclick={() => (show = false)}>
-				<Icon iconName="X" color="icon-secondary" weight="bold" />
-			</IconButton>
-		{/if}
-	</div>
+  <div class="rounded-lg bg-{color} flex w-full items-center justify-between p-3">
+    <div class="inline-flex w-full items-center justify-start gap-3">
+      {#if icon}
+        <div class="flex size-5 items-center justify-center text-icon-{color} ">
+          {@render icon?.()}
+        </div>
+      {/if}
+      <div class="content w-full text-sm">
+        {@render content?.()}
+      </div>
+    </div>
+    {#if closable}
+      <IconButton size="sm" onclick={() => (show = false)}>
+        <Icon iconName="X" color="icon-secondary" weight="bold" />
+      </IconButton>
+    {/if}
+  </div>
 {/if}
 
 <style>
-	.content :global(a) {
+  .content :global(a) {
     font-size: 0.875rem;
     line-height: 1.25rem;
     --tw-text-opacity: 1;

package/dist/components/button/Button.stories.svelte

@@ -1,76 +1,76 @@
 <script module lang="ts">
-	import { defineMeta } from '@storybook/addon-svelte-csf';
-	import Button, { type ButtonVariant, type ButtonSize } from './Button.svelte';
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+  import Button, { type ButtonVariant, type ButtonSize } from './Button.svelte';
 
-	const { Story } = defineMeta({
-		component: Button,
-		title: 'Design System/Button',
-		tags: ['autodocs'],
-		parameters: {
-			design: {
-				type: 'figma',
-				url: 'https://www.figma.com/design/VHTMNdy8PAXAMx43edNZGW/%F0%9F%92%A0--Reshape-Design-System%3A-V1?node-id=9-3068&t=sCuBI8dX6K6NjNR6-0'
-			}
-		}
-	});
+  const { Story } = defineMeta({
+    component: Button,
+    title: 'Design System/Button',
+    tags: ['autodocs'],
+    parameters: {
+      design: {
+        type: 'figma',
+        url: 'https://www.figma.com/design/VHTMNdy8PAXAMx43edNZGW/%F0%9F%92%A0--Reshape-Design-System%3A-V1?node-id=9-3068&t=sCuBI8dX6K6NjNR6-0',
+      },
+    },
+  });
 
-	const variants = [
-		'primary',
-		'secondary',
-		'danger',
-		'transparent',
-		'outline',
-		'secondary-inverse'
-	];
-	const sizes = ['xs', 'sm', 'md', 'lg'];
+  const variants = [
+    'primary',
+    'secondary',
+    'danger',
+    'transparent',
+    'outline',
+    'secondary-inverse',
+  ];
+  const sizes = ['xs', 'sm', 'md', 'lg'];
 </script>
 
 <Story name="Variants" asChild>
-	<div class="flex flex-col gap-4">
-		{#each variants as variant}
-			{#if variant === 'secondary-inverse'}
-				<div class="bg-base-inverse p-4 text-primary-inverse">
-					<p>{variant}</p>
-					<Button variant={variant as ButtonVariant}>Button</Button>
-				</div>
-			{:else}
-				<div>
-					<p>{variant}</p>
-					<Button variant={variant as ButtonVariant}>Button</Button>
-				</div>
-			{/if}
-		{/each}
-	</div>
+  <div class="flex flex-col gap-4">
+    {#each variants as variant}
+      {#if variant === 'secondary-inverse'}
+        <div class="bg-base-inverse p-4 text-primary-inverse">
+          <p>{variant}</p>
+          <Button variant={variant as ButtonVariant}>Button</Button>
+        </div>
+      {:else}
+        <div>
+          <p>{variant}</p>
+          <Button variant={variant as ButtonVariant}>Button</Button>
+        </div>
+      {/if}
+    {/each}
+  </div>
 </Story>
 
 <Story name="Sizes" asChild>
-	<div class="flex flex-col gap-4">
-		{#each sizes as size}
-			<div>
-				<p>{size}</p>
-				<Button variant="primary" size={size as ButtonSize}>Button</Button>
-			</div>
-		{/each}
-	</div>
+  <div class="flex flex-col gap-4">
+    {#each sizes as size}
+      <div>
+        <p>{size}</p>
+        <Button variant="primary" size={size as ButtonSize}>Button</Button>
+      </div>
+    {/each}
+  </div>
 </Story>
 
 <Story name="Disabled" asChild>
-	<div class="flex flex-col gap-4">
-		{#each variants as variant}
-			<div>
-				<p>{variant}</p>
-				<Button variant={variant as ButtonVariant} disabled>Button</Button>
-			</div>
-		{/each}
-	</div>
+  <div class="flex flex-col gap-4">
+    {#each variants as variant}
+      <div>
+        <p>{variant}</p>
+        <Button variant={variant as ButtonVariant} disabled>Button</Button>
+      </div>
+    {/each}
+  </div>
 </Story>
 <Story name="Loading" asChild>
-	<div class="flex flex-col gap-4">
-		{#each variants as variant}
-			<div>
-				<p>{variant}</p>
-				<Button variant={variant as ButtonVariant} loading>Button</Button>
-			</div>
-		{/each}
-	</div>
+  <div class="flex flex-col gap-4">
+    {#each variants as variant}
+      <div>
+        <p>{variant}</p>
+        <Button variant={variant as ButtonVariant} loading>Button</Button>
+      </div>
+    {/each}
+  </div>
 </Story>

package/dist/components/button/Button.svelte

@@ -1,83 +1,83 @@
 <script lang="ts" module>
-	export type ButtonVariant =
-		| 'primary'
-		| 'secondary'
-		| 'transparent'
-		| 'danger'
-		| 'outline'
-		| 'secondary-inverse'
-		| 'transparent-inverse';
-	export type ButtonSize = 'xs' | 'sm' | 'md' | 'lg';
+  export type ButtonVariant =
+    | 'primary'
+    | 'secondary'
+    | 'transparent'
+    | 'danger'
+    | 'outline'
+    | 'secondary-inverse'
+    | 'transparent-inverse';
+  export type ButtonSize = 'xs' | 'sm' | 'md' | 'lg';
 </script>
 
 <script lang="ts">
-	import Spinner from '../spinner/Spinner.svelte';
-	import type { Snippet } from 'svelte';
-
-	interface Props {
-		class?: string;
-		onClick?: (event?: MouseEvent) => void;
-		type?: 'button' | 'submit' | 'reset' | null | undefined;
-		loading?: boolean;
-		disabled?: boolean;
-		accessibilityLabel?: string;
-		size?: ButtonSize;
-		id?: string | undefined;
-		tabindex?: number | undefined;
-		variant?: ButtonVariant;
-		children?: Snippet;
-		dataTestId?: string;
-		rounded?: boolean;
-	}
-
-	let {
-		class: className = '',
-		onClick = () => {},
-		type = 'button',
-		loading = false,
-		disabled = false,
-		accessibilityLabel = '',
-		size = 'lg',
-		id = undefined,
-		tabindex = undefined,
-		variant = 'primary',
-		children,
-		dataTestId = undefined,
-		rounded = false
-	}: Props = $props();
-
-	let variantClass = $derived(`btn-${variant}`);
-	let sizeClass = $derived(`btn-size-${size}`);
+  import Spinner from '../spinner/Spinner.svelte';
+  import type { Snippet } from 'svelte';
+
+  interface Props {
+    class?: string;
+    onClick?: (event?: MouseEvent) => void;
+    type?: 'button' | 'submit' | 'reset' | null | undefined;
+    loading?: boolean;
+    disabled?: boolean;
+    accessibilityLabel?: string;
+    size?: ButtonSize;
+    id?: string | undefined;
+    tabindex?: number | undefined;
+    variant?: ButtonVariant;
+    children?: Snippet;
+    dataTestId?: string;
+    rounded?: boolean;
+  }
+
+  let {
+    class: className = '',
+    onClick = () => {},
+    type = 'button',
+    loading = false,
+    disabled = false,
+    accessibilityLabel = '',
+    size = 'lg',
+    id = undefined,
+    tabindex = undefined,
+    variant = 'primary',
+    children,
+    dataTestId = undefined,
+    rounded = false,
+  }: Props = $props();
+
+  let variantClass = $derived(`btn-${variant}`);
+  let sizeClass = $derived(`btn-size-${size}`);
 </script>
 
 <button
-	aria-label={accessibilityLabel}
-	onclick={(e) => {
-		if (!loading && !disabled) {
-			onClick(e);
-		} else {
-			e.preventDefault();
-		}
-	}}
-	{type}
-	{disabled}
-	{id}
-	{tabindex}
-	class:cursor-wait={loading}
-	class="button {variantClass} {sizeClass} {className}"
-	data-testid={dataTestId}
-	class:rounded
-	class:disabled
+  aria-label={accessibilityLabel}
+  onclick={(e) => {
+    if (!loading && !disabled) {
+      onClick(e);
+    } else {
+      e.preventDefault();
+    }
+  }}
+  {type}
+  {disabled}
+  {id}
+  {tabindex}
+  class:cursor-wait={loading}
+  class="button {variantClass} {sizeClass} {className}"
+  data-testid={dataTestId}
+  class:rounded
+  class:disabled
 >
-	{#if loading}
-		<Spinner />
-	{:else}
-		{@render children?.()}
-	{/if}
+  {#if loading}
+    <Spinner />
+  {:else}
+    {@render children?.()}
+  {/if}
 </button>
 
 <style>
-	.button {
+  .button {
 
     display: inline-flex;
 
@@ -126,17 +126,17 @@
     color: rgb(136 140 148 / var(--tw-text-opacity, 1))
 }
 
-	.rounded {
+  .rounded {
 
     border-radius: 9999px
 }
 
-	.disabled:hover {
+  .disabled:hover {
 
     background-color: #12192a0A !important
 }
-	/* Size variants */
-	.btn-size-xs {
+  /* Size variants */
+  .btn-size-xs {
 
     height: 1.75rem;
 
@@ -144,7 +144,7 @@
 
     padding: 0.5rem
 }
-	.btn-size-sm {
+  .btn-size-sm {
 
     height: 2rem;
 
@@ -156,7 +156,7 @@
 
     padding-bottom: 0.5rem
 }
-	.btn-size-md {
+  .btn-size-md {
 
     height: 2.5rem;
 
@@ -168,7 +168,7 @@
 
     padding-bottom: 0.75rem
 }
-	.btn-size-lg {
+  .btn-size-lg {
 
     height: 3rem;
 
@@ -185,8 +185,8 @@
     line-height: 1.5rem
 }
 
-	/* Button variants */
-	.btn-primary {
+  /* Button variants */
+  .btn-primary {
 
     --tw-bg-opacity: 1;
 
@@ -196,14 +196,14 @@
 
     color: rgb(255 255 255 / var(--tw-text-opacity, 1))
 }
-	.btn-primary:hover {
+  .btn-primary:hover {
 
     --tw-bg-opacity: 1;
 
     background-color: rgb(71 65 193 / var(--tw-bg-opacity, 1))
 }
 
-	.btn-secondary {
+  .btn-secondary {
 
     background-color: #12192a0A;
 
@@ -212,16 +212,16 @@
     color: rgb(18 25 42 / var(--tw-text-opacity, 1))
 }
 
-	.btn-secondary:hover {
+  .btn-secondary:hover {
 
     background-color: #12192A1A
 }
 
-	.btn-secondary:active {
+  .btn-secondary:active {
 
     background-color: #12192a0A
 }
-	.btn-transparent {
+  .btn-transparent {
 
     background-color: transparent;
 
@@ -229,11 +229,11 @@
 
     color: rgb(18 25 42 / var(--tw-text-opacity, 1))
 }
-	.btn-transparent:hover {
+  .btn-transparent:hover {
 
     background-color: #12192a0A
 }
-	.btn-danger {
+  .btn-danger {
 
     --tw-bg-opacity: 1;
 
@@ -243,13 +243,13 @@
 
     color: rgb(255 255 255 / var(--tw-text-opacity, 1))
 }
-	.btn-danger:hover {
+  .btn-danger:hover {
 
     --tw-bg-opacity: 1;
 
     background-color: rgb(191 57 58 / var(--tw-bg-opacity, 1))
 }
-	.btn-outline {
+  .btn-outline {
 
     border-width: 1px;
 
@@ -261,7 +261,7 @@
 
     color: rgb(18 25 42 / var(--tw-text-opacity, 1))
 }
-	.btn-outline:hover {
+  .btn-outline:hover {
 
     border-color: #12192A26;
 
@@ -271,11 +271,11 @@
 
     color: rgb(18 25 42 / var(--tw-text-opacity, 1))
 }
-	.btn-outline:disabled {
+  .btn-outline:disabled {
 
     border-style: none
 }
-	.btn-secondary-inverse {
+  .btn-secondary-inverse {
 
     background-color: #FFFFFF0D;
 
@@ -283,15 +283,15 @@
 
     color: rgb(255 255 255 / var(--tw-text-opacity, 1))
 }
-	.btn-secondary-inverse:hover {
+  .btn-secondary-inverse:hover {
 
     background-color: #FFFFFF26
 }
-	.btn-secondary-inverse:active {
+  .btn-secondary-inverse:active {
 
     background-color: #FFFFFF0D
 }
-	.btn-transparent-inverse {
+  .btn-transparent-inverse {
 
     background-color: transparent;
 
@@ -299,11 +299,11 @@
 
     color: rgb(255 255 255 / var(--tw-text-opacity, 1))
 }
-	.btn-transparent-inverse:hover {
+  .btn-transparent-inverse:hover {
 
     background-color: #FFFFFF26
 }
-	.btn-transparent-inverse:active {
+  .btn-transparent-inverse:active {
 
     background-color: #FFFFFF0D
 }