@reshape-biotech/design-system 1.2.6 → 2.0.0

package/dist/components/tabs/components/Content.svelte

@@ -1,15 +1,15 @@
 <script lang="ts">
-	import type { Snippet } from 'svelte';
+  import type { Snippet } from 'svelte';
 
-	interface Props {
-		class?: string;
-		show?: boolean;
-		children?: Snippet;
-	}
+  interface Props {
+    class?: string;
+    show?: boolean;
+    children?: Snippet;
+  }
 
-	let { class: className = '', show = false, children }: Props = $props();
+  let { class: className = '', show = false, children }: Props = $props();
 </script>
 
 <div class:hidden={!show} class={className}>
-	{@render children?.()}
+  {@render children?.()}
 </div>

package/dist/components/tabs/components/Tab.svelte

@@ -1,21 +1,21 @@
 <script lang="ts">
-	import { Button } from '../../button/';
-	import type { Snippet } from 'svelte';
-	interface Props {
-		active?: boolean;
-		onClick: () => void;
-		class?: string;
-		children?: Snippet;
-	}
+  import { Button } from '../../button/';
+  import type { Snippet } from 'svelte';
+  interface Props {
+    active?: boolean;
+    onClick: () => void;
+    class?: string;
+    children?: Snippet;
+  }
 
-	let { active = false, onClick, class: className = '', children }: Props = $props();
+  let { active = false, onClick, class: className = '', children }: Props = $props();
 </script>
 
 <Button
-	{onClick}
-	variant="transparent"
-	size="md"
-	class={`tab flex !h-10 gap-2 !rounded-md !px-0 !py-0 ${active ? 'tab-active' : ''} ${className}`}
+  {onClick}
+  variant="transparent"
+  size="md"
+  class={`tab flex !h-10 gap-2 !rounded-md !px-0 !py-0 ${active ? 'tab-active' : ''} ${className}`}
 >
-	{@render children?.()}
+  {@render children?.()}
 </Button>

package/dist/components/tabs/components/Tabs.svelte

@@ -1,14 +1,14 @@
 <script lang="ts">
-	import type { Snippet } from 'svelte';
+  import type { Snippet } from 'svelte';
 
-	interface Props {
-		class?: string;
-		children?: Snippet;
-	}
+  interface Props {
+    class?: string;
+    children?: Snippet;
+  }
 
-	let { class: className = '', children }: Props = $props();
+  let { class: className = '', children }: Props = $props();
 </script>
 
 <div role="tablist" class={`tabs-boxed tabs h-[48px] gap-1 rounded-lg ${className}`}>
-	{@render children?.()}
+  {@render children?.()}
 </div>

package/dist/components/tag/Tag.stories.svelte

@@ -1,83 +1,83 @@
 <script module lang="ts">
-	import { Icon } from '../icons';
-	import Tag from './Tag.svelte';
-	import { defineMeta } from '@storybook/addon-svelte-csf';
+  import { Icon } from '../icons';
+  import Tag from './Tag.svelte';
+  import { defineMeta } from '@storybook/addon-svelte-csf';
 
-	const { Story } = defineMeta({
-		component: Tag,
-		title: 'Design System/Tag',
-		tags: ['autodocs']
-	});
+  const { Story } = defineMeta({
+    component: Tag,
+    title: 'Design System/Tag',
+    tags: ['autodocs'],
+  });
 
-	const variants = [
-		'default',
-		'transparent',
-		'default-inverse',
-		'orange',
-		'sky',
-		'pink',
-		'lime',
-		'lilac',
-		'pear',
-		'blue',
-		'accent',
-		'success',
-		'warning'
-	];
+  const variants = [
+    'default',
+    'transparent',
+    'default-inverse',
+    'orange',
+    'sky',
+    'pink',
+    'lime',
+    'lilac',
+    'pear',
+    'blue',
+    'accent',
+    'success',
+    'warning',
+  ];
 </script>
 
 <Story name="Default" asChild>
-	<div class="w-fit">
-		<Tag>Default</Tag>
-	</div>
+  <div class="w-fit">
+    <Tag>Default</Tag>
+  </div>
 </Story>
 <Story name="Default small" asChild>
-	<div class="w-fit">
-		<Tag variant="default" size="sm">Default</Tag>
-	</div>
+  <div class="w-fit">
+    <Tag variant="default" size="sm">Default</Tag>
+  </div>
 </Story>
 <Story name="Default onclick" asChild>
-	<div class="w-fit">
-		<Tag onclick={() => {}}>Default</Tag>
-	</div>
+  <div class="w-fit">
+    <Tag onclick={() => {}}>Default</Tag>
+  </div>
 </Story>
 <Story name="Default icon onclick" asChild>
-	<div class="w-fit">
-		<Tag onclick={() => {}}>
-			<Icon iconName="Folder" />
-			Default
-		</Tag>
-	</div>
+  <div class="w-fit">
+    <Tag onclick={() => {}}>
+      <Icon iconName="Folder" />
+      Default
+    </Tag>
+  </div>
 </Story>
 
 <Story name="Transparent" asChild>
-	<div class="w-fit">
-		<Tag variant="transparent">Transparent</Tag>
-	</div>
+  <div class="w-fit">
+    <Tag variant="transparent">Transparent</Tag>
+  </div>
 </Story>
 <Story name="Transparent small" asChild>
-	<div class="w-fit">
-		<Tag variant="transparent" size="sm">Transparent</Tag>
-	</div>
+  <div class="w-fit">
+    <Tag variant="transparent" size="sm">Transparent</Tag>
+  </div>
 </Story>
 <Story name="Transparent onclick" asChild>
-	<div class="w-fit">
-		<Tag variant="transparent" onclick={() => {}}>Transparent</Tag>
-	</div>
+  <div class="w-fit">
+    <Tag variant="transparent" onclick={() => {}}>Transparent</Tag>
+  </div>
 </Story>
 
 <Story name="Variants" asChild>
-	{#each variants as variant}
-		<div class="w-fit">
-			<Tag variant={variant as any}>{variant}</Tag>
-		</div>
-	{/each}
+  {#each variants as variant}
+    <div class="w-fit">
+      <Tag variant={variant as any}>{variant}</Tag>
+    </div>
+  {/each}
 </Story>
 
 <Story name="Button variants" asChild>
-	{#each variants as variant}
-		<div class="w-fit">
-			<Tag variant={variant as any} onclick={() => {}}>Click me</Tag>
-		</div>
-	{/each}
+  {#each variants as variant}
+    <div class="w-fit">
+      <Tag variant={variant as any} onclick={() => {}}>Click me</Tag>
+    </div>
+  {/each}
 </Story>

package/dist/components/tag/Tag.svelte

@@ -1,115 +1,115 @@
 <script lang="ts">
-	import type { Snippet } from 'svelte';
-	import { Tooltip } from '../tooltip/';
+  import type { Snippet } from 'svelte';
+  import { Tooltip } from '../tooltip/';
 
-	interface Props {
-		children: Snippet;
-		variant?:
-			| 'default'
-			| 'outline'
-			| 'transparent'
-			| 'default-inverse'
-			| 'orange'
-			| 'sky'
-			| 'pink'
-			| 'lime'
-			| 'lilac'
-			| 'pear'
-			| 'blue'
-			| 'accent'
-			| 'success'
-			| 'warning';
-		size?: 'xs' | 'sm' | 'md';
-		tooltip?: string;
-		onclick?: (event: MouseEvent) => void;
-		class?: string;
-	}
+  interface Props {
+    children: Snippet;
+    variant?:
+      | 'default'
+      | 'outline'
+      | 'transparent'
+      | 'default-inverse'
+      | 'orange'
+      | 'sky'
+      | 'pink'
+      | 'lime'
+      | 'lilac'
+      | 'pear'
+      | 'blue'
+      | 'accent'
+      | 'success'
+      | 'warning';
+    size?: 'xs' | 'sm' | 'md';
+    tooltip?: string;
+    onclick?: (event: MouseEvent) => void;
+    class?: string;
+  }
 
-	let {
-		children,
-		variant = 'default',
-		size = 'md',
-		tooltip,
-		onclick,
-		class: className
-	}: Props = $props();
+  let {
+    children,
+    variant = 'default',
+    size = 'md',
+    tooltip,
+    onclick,
+    class: className,
+  }: Props = $props();
 
-	const sizes = {
-		xs: 'h-5 text-xs p-1',
-		sm: 'h-6 text-xs p-1.5',
-		md: 'h-7 text-sm p-2'
-	};
-	let sizeClassName = $derived(sizes[size]);
+  const sizes = {
+    xs: 'h-5 text-xs p-1',
+    sm: 'h-6 text-xs p-1.5',
+    md: 'h-7 text-sm p-2',
+  };
+  let sizeClassName = $derived(sizes[size]);
 
-	const variants = {
-		default: 'bg-neutral text-primary',
-		outline: 'bg-transparent text-secondary border',
-		transparent: 'bg-transparent text-secondary',
-		'default-inverse': 'bg-base-inverse text-secondary-inverse',
-		orange: 'bg-orange text-orange',
-		sky: 'bg-sky text-sky',
-		pink: 'bg-pink text-pink',
-		lime: 'bg-lime text-lime',
-		lilac: 'bg-lilac text-lilac',
-		pear: 'bg-pear text-pear',
-		blue: 'bg-blue text-blue',
-		accent: 'bg-accent text-accent',
-		success: 'bg-success text-success',
-		warning: 'bg-warning text-warning'
-	};
+  const variants = {
+    default: 'bg-neutral text-primary',
+    outline: 'bg-transparent text-secondary border',
+    transparent: 'bg-transparent text-secondary',
+    'default-inverse': 'bg-base-inverse text-secondary-inverse',
+    orange: 'bg-orange text-orange',
+    sky: 'bg-sky text-sky',
+    pink: 'bg-pink text-pink',
+    lime: 'bg-lime text-lime',
+    lilac: 'bg-lilac text-lilac',
+    pear: 'bg-pear text-pear',
+    blue: 'bg-blue text-blue',
+    accent: 'bg-accent text-accent',
+    success: 'bg-success text-success',
+    warning: 'bg-warning text-warning',
+  };
 
-	const buttonClassVariants = {
-		default: 'hover:bg-neutral-hover',
-		outline: 'hover:bg-neutral hover:text-primary',
-		transparent: 'hover:bg-neutral hover:text-primary',
-		'default-inverse': 'hover:bg-base-inverse hover:text-secondary-inverse',
-		orange: 'hover:bg-orange-hover hover:text-orange-hover',
-		sky: 'hover:bg-sky-hover hover:text-sky-hover',
-		pink: 'hover:bg-pink-hover hover:text-pink-hover',
-		lime: 'hover:bg-lime-hover hover:text-lime-hover',
-		lilac: 'hover:bg-lilac-hover hover:text-lilac-hover',
-		pear: 'hover:bg-pear-hover hover:text-pear-hover',
-		blue: 'hover:bg-blue-hover hover:text-blue-hover',
-		accent: 'hover:bg-accent-hover hover:text-accent-hover',
-		success: 'hover:bg-success-hover hover:text-success-hover',
-		warning: 'hover:bg-warning-hover hover:text-warning-hover'
-	};
+  const buttonClassVariants = {
+    default: 'hover:bg-neutral-hover',
+    outline: 'hover:bg-neutral hover:text-primary',
+    transparent: 'hover:bg-neutral hover:text-primary',
+    'default-inverse': 'hover:bg-base-inverse hover:text-secondary-inverse',
+    orange: 'hover:bg-orange-hover hover:text-orange-hover',
+    sky: 'hover:bg-sky-hover hover:text-sky-hover',
+    pink: 'hover:bg-pink-hover hover:text-pink-hover',
+    lime: 'hover:bg-lime-hover hover:text-lime-hover',
+    lilac: 'hover:bg-lilac-hover hover:text-lilac-hover',
+    pear: 'hover:bg-pear-hover hover:text-pear-hover',
+    blue: 'hover:bg-blue-hover hover:text-blue-hover',
+    accent: 'hover:bg-accent-hover hover:text-accent-hover',
+    success: 'hover:bg-success-hover hover:text-success-hover',
+    warning: 'hover:bg-warning-hover hover:text-warning-hover',
+  };
 
-	let variantClassName = $derived(variants[variant]);
-	let buttonClassVariant = $derived(buttonClassVariants[variant]);
+  let variantClassName = $derived(variants[variant]);
+  let buttonClassVariant = $derived(buttonClassVariants[variant]);
 </script>
 
 {#snippet renderTag()}
-	{#if onclick}
-		<button
-			class="outer {variantClassName} {sizeClassName} {buttonClassVariant} hover:cursor-pointer {className} "
-			title={tooltip}
-			{onclick}
-		>
-			{@render children()}
-		</button>
-	{:else}
-		<div class="outer {variantClassName} {sizeClassName}  no-underline {className}" title={tooltip}>
-			{@render children()}
-		</div>
-	{/if}
+  {#if onclick}
+    <button
+      class="outer {variantClassName} {sizeClassName} {buttonClassVariant} hover:cursor-pointer {className} "
+      title={tooltip}
+      {onclick}
+    >
+      {@render children()}
+    </button>
+  {:else}
+    <div class="outer {variantClassName} {sizeClassName}  no-underline {className}" title={tooltip}>
+      {@render children()}
+    </div>
+  {/if}
 {/snippet}
 
 {#if tooltip}
-	<Tooltip>
-		{#snippet trigger()}
-			{@render renderTag()}
-		{/snippet}
-		{#snippet content()}
-			{tooltip}
-		{/snippet}
-	</Tooltip>
+  <Tooltip>
+    {#snippet trigger()}
+      {@render renderTag()}
+    {/snippet}
+    {#snippet content()}
+      {tooltip}
+    {/snippet}
+  </Tooltip>
 {:else}
-	{@render renderTag()}
+  {@render renderTag()}
 {/if}
 
 <style>
-	.outer {
+  .outer {
     display: flex;
     align-items: center;
     gap: 0.5rem;

package/dist/components/textarea/Textarea.stories.svelte

@@ -1,97 +1,97 @@
 <script module lang="ts">
-	import { defineMeta } from '@storybook/addon-svelte-csf';
-	import Textarea from './Textarea.svelte';
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+  import Textarea from './Textarea.svelte';
 
-	const { Story } = defineMeta({
-		title: 'Design System/Textarea',
-		component: Textarea,
-		argTypes: {
-			value: { control: 'text' },
-			placeholder: { control: 'text' },
-			size: {
-				control: { type: 'select' },
-				options: ['xs', 'sm', 'md', 'lg', 'dynamic']
-			},
-			required: { control: 'boolean' },
-			readonly: { control: 'boolean' },
-			autofocus: { control: 'boolean' },
-			error: { control: 'object' },
-			maxlength: { control: 'number' }
-		}
-	});
+  const { Story } = defineMeta({
+    title: 'Design System/Textarea',
+    component: Textarea,
+    argTypes: {
+      value: { control: 'text' },
+      placeholder: { control: 'text' },
+      size: {
+        control: { type: 'select' },
+        options: ['xs', 'sm', 'md', 'lg', 'dynamic'],
+      },
+      required: { control: 'boolean' },
+      readonly: { control: 'boolean' },
+      autofocus: { control: 'boolean' },
+      error: { control: 'object' },
+      maxlength: { control: 'number' },
+    },
+  });
 </script>
 
 <Story
-	name="Default"
-	args={{
-		value: 'This is some default text.',
-		placeholder: 'Enter text here...',
-		size: 'md'
-	}}
+  name="Default"
+  args={{
+    value: 'This is some default text.',
+    placeholder: 'Enter text here...',
+    size: 'md',
+  }}
 />
 
 <Story
-	name="Empty and Required"
-	args={{
-		value: '',
-		placeholder: 'This field is required',
-		required: true,
-		size: 'sm'
-	}}
+  name="Empty and Required"
+  args={{
+    value: '',
+    placeholder: 'This field is required',
+    required: true,
+    size: 'sm',
+  }}
 />
 
 <Story
-	name="With Max Length"
-	args={{
-		value: 'Short text',
-		placeholder: 'Max 20 chars',
-		maxlength: 20,
-		size: 'dynamic'
-	}}
+  name="With Max Length"
+  args={{
+    value: 'Short text',
+    placeholder: 'Max 20 chars',
+    maxlength: 20,
+    size: 'dynamic',
+  }}
 />
 <Story
-	name="With Label"
-	args={{
-		value: 'Short text',
-		placeholder: 'Max 20 chars',
-		maxlength: 20,
-		size: 'dynamic',
-		label: 'Label'
-	}}
+  name="With Label"
+  args={{
+    value: 'Short text',
+    placeholder: 'Max 20 chars',
+    maxlength: 20,
+    size: 'dynamic',
+    label: 'Label',
+  }}
 />
 
 <Story
-	name="Readonly"
-	args={{
-		value: 'This text cannot be edited.',
-		readonly: true,
-		size: 'md'
-	}}
+  name="Readonly"
+  args={{
+    value: 'This text cannot be edited.',
+    readonly: true,
+    size: 'md',
+  }}
 />
 
 <Story name="Invalid State" asChild>
-	<Textarea size="md" placeholder="Error here" value="This input is invalid.">
-		{#snippet error()}
-			<p class="text-danger">This is an error</p>
-		{/snippet}
-	</Textarea>
+  <Textarea size="md" placeholder="Error here" value="This input is invalid.">
+    {#snippet error()}
+      <p class="text-danger">This is an error</p>
+    {/snippet}
+  </Textarea>
 </Story>
 
 <Story name="Autofocus" args={{ placeholder: 'I should be focused', autofocus: true }} />
 
 <!-- Story to demonstrate auto-resizing. Requires interaction -->
 <Story
-	name="Auto Resizing"
-	args={{
-		value: 'Initial line.\nAnother line to start with.',
-		placeholder: 'Type here...',
-		size: 'dynamic'
-	}}
+  name="Auto Resizing"
+  args={{
+    value: 'Initial line.\nAnother line to start with.',
+    placeholder: 'Type here...',
+    size: 'dynamic',
+  }}
 >
-	{#snippet template(args)}
-		<div class="w-96">
-			<p class="mb-2 text-sm">Type or paste multiple lines to see it resize (max height 200px):</p>
-			<Textarea {...args} />
-		</div>
-	{/snippet}
+  {#snippet template(args)}
+    <div class="w-96">
+      <p class="mb-2 text-sm">Type or paste multiple lines to see it resize (max height 200px):</p>
+      <Textarea {...args} />
+    </div>
+  {/snippet}
 </Story>