@reshape-biotech/design-system 1.2.6 → 2.0.0

package/dist/components/stepper/components/stepper-step.svelte

@@ -1,100 +1,100 @@
 <script lang="ts">
-	import type { Snippet } from 'svelte';
-	import { getContext } from 'svelte';
-	import { Icon } from '../../icons/';
-	import type { StepState } from '../';
+  import type { Snippet } from 'svelte';
+  import { getContext } from 'svelte';
+  import { Icon } from '../../icons/';
+  import type { StepState } from '../';
 
-	interface Props {
-		children: Snippet;
-		state?: StepState;
-		stepNumber: string;
-		class?: string;
-	}
+  interface Props {
+    children: Snippet;
+    state?: StepState;
+    stepNumber: string;
+    class?: string;
+  }
 
-	let { children, state: stateProp, stepNumber, class: className = '' }: Props = $props();
-	const id = $props.id();
+  let { children, state: stateProp, stepNumber, class: className = '' }: Props = $props();
+  const id = $props.id();
 
-	type StepperContext = {
-		currentStep: string;
-	};
+  type StepperContext = {
+    currentStep: string;
+  };
 
-	const context = getContext<StepperContext | undefined>('STEPPER_CONTEXT');
+  const context = getContext<StepperContext | undefined>('STEPPER_CONTEXT');
 
-	const currentState = $derived.by(() => {
-		if (context && context.currentStep !== undefined) {
-			if (context.currentStep > stepNumber) {
-				return 'completed';
-			} else if (context.currentStep === stepNumber) {
-				return 'active';
-			} else {
-				return 'future';
-			}
-		}
-		return stateProp ?? 'future';
-	});
+  const currentState = $derived.by(() => {
+    if (context && context.currentStep !== undefined) {
+      if (context.currentStep > stepNumber) {
+        return 'completed';
+      } else if (context.currentStep === stepNumber) {
+        return 'active';
+      } else {
+        return 'future';
+      }
+    }
+    return stateProp ?? 'future';
+  });
 
-	const stateVariants = {
-		completed: {
-			container: 'bg-transparent text-primary-inverse',
-			iconContainer: 'bg-primary ',
-			iconColor: 'text-surface',
-			labelColor: 'text-primary',
-			showIcon: true
-		},
-		active: {
-			container: 'bg-accent text-primary-inverse',
-			iconContainer: 'bg-primary ',
-			iconColor: 'text-surface',
-			labelColor: 'text-primary',
-			showIcon: false
-		},
-		future: {
-			container: 'bg-transparent',
-			iconContainer: 'bg-transparent border border-interactive',
-			iconColor: 'text-secondary',
-			labelColor: 'text-secondary',
-			showIcon: false
-		}
-	};
+  const stateVariants = {
+    completed: {
+      container: 'bg-transparent text-primary-inverse',
+      iconContainer: 'bg-primary ',
+      iconColor: 'text-surface',
+      labelColor: 'text-primary',
+      showIcon: true,
+    },
+    active: {
+      container: 'bg-accent text-primary-inverse',
+      iconContainer: 'bg-primary ',
+      iconColor: 'text-surface',
+      labelColor: 'text-primary',
+      showIcon: false,
+    },
+    future: {
+      container: 'bg-transparent',
+      iconContainer: 'bg-transparent border border-interactive',
+      iconColor: 'text-secondary',
+      labelColor: 'text-secondary',
+      showIcon: false,
+    },
+  };
 
-	const variant = $derived(stateVariants[currentState]);
+  const variant = $derived(stateVariants[currentState]);
 </script>
 
 <div
-	{id}
-	class="relative flex items-center gap-3 rounded-lg px-2 py-3 {variant.container} {className}"
-	role="progressbar"
-	aria-valuenow={currentState === 'completed' ? 100 : currentState === 'active' ? 50 : 0}
-	aria-valuemin="0"
-	aria-valuemax="100"
-	aria-label="Step {stepNumber}"
+  {id}
+  class="relative flex items-center gap-3 rounded-lg px-2 py-3 {variant.container} {className}"
+  role="progressbar"
+  aria-valuenow={currentState === 'completed' ? 100 : currentState === 'active' ? 50 : 0}
+  aria-valuemin="0"
+  aria-valuemax="100"
+  aria-label="Step {stepNumber}"
 >
-	<div
-		class="flex h-6 w-6 items-center justify-center rounded-md {variant.iconContainer}"
-		aria-hidden="true"
-	>
-		{#if variant.showIcon}
-			<Icon iconName="Check" class="h-3 w-3 {variant.iconColor}" />
-		{:else}
-			<span class="text-xs font-medium leading-none {variant.iconColor}">
-				{stepNumber}
-			</span>
-		{/if}
-	</div>
+  <div
+    class="flex h-6 w-6 items-center justify-center rounded-md {variant.iconContainer}"
+    aria-hidden="true"
+  >
+    {#if variant.showIcon}
+      <Icon iconName="Check" class="h-3 w-3 {variant.iconColor}" />
+    {:else}
+      <span class="text-xs font-medium leading-none {variant.iconColor}">
+        {stepNumber}
+      </span>
+    {/if}
+  </div>
 
-	<span class="text-sm font-medium leading-tight {variant.labelColor} flex-1 truncate">
-		{@render children()}
-	</span>
+  <span class="text-sm font-medium leading-tight {variant.labelColor} flex-1 truncate">
+    {@render children()}
+  </span>
 </div>
 
 <style>
-	div[role='progressbar']:not(:last-child)::after {
-		content: '';
-		position: absolute;
-		width: 1px;
-		background-color: #12192a0A;
-		left: calc(0.5rem + 1.5rem / 2 - 1px / 2);
-		top: 2.25rem;
-		height: 2.25rem;
-	}
+  div[role='progressbar']:not(:last-child)::after {
+    content: '';
+    position: absolute;
+    width: 1px;
+    background-color: #12192a0A;
+    left: calc(0.5rem + 1.5rem / 2 - 1px / 2);
+    top: 2.25rem;
+    height: 2.25rem;
+  }
 </style>

package/dist/components/table/Table.stories.svelte

@@ -1,94 +1,94 @@
 <script module lang="ts">
-	import Table from './Table.svelte';
+  import Table from './Table.svelte';
 
-	import { defineMeta } from '@storybook/addon-svelte-csf';
-	const { Story } = defineMeta({
-		component: Table,
-		title: 'Design System/Table',
-		tags: ['autodocs']
-	});
-	import IconButton from '../icon-button/IconButton.svelte';
-	import { Icon } from '../icons';
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+  const { Story } = defineMeta({
+    component: Table,
+    title: 'Design System/Table',
+    tags: ['autodocs'],
+  });
+  import IconButton from '../icon-button/IconButton.svelte';
+  import { Icon } from '../icons';
 
-	export const users = [
-		{
-			name: 'John Doe',
-			age: 25,
-			role: 'admin'
-		},
-		{
-			name: 'Jane Smith',
-			age: 32,
-			role: 'member'
-		},
-		{
-			name: 'Michael Johnson',
-			age: 41,
-			role: 'deactivated'
-		},
-		{
-			name: 'Emily Brown',
-			age: 28,
-			role: 'member'
-		},
-		{
-			name: 'David Lee',
-			age: 37,
-			role: 'admin'
-		},
-		{
-			name: 'Sarah Wilson',
-			age: 29,
-			role: 'member'
-		},
-		{
-			name: 'Robert Taylor',
-			age: 45,
-			role: 'deactivated'
-		},
-		{
-			name: 'Lisa Anderson',
-			age: 33,
-			role: 'member'
-		},
-		{
-			name: 'James Martinez',
-			age: 39,
-			role: 'admin'
-		},
-		{
-			name: 'Jennifer Garcia',
-			age: 31,
-			role: 'deactivated'
-		}
-	];
+  export const users = [
+    {
+      name: 'John Doe',
+      age: 25,
+      role: 'admin',
+    },
+    {
+      name: 'Jane Smith',
+      age: 32,
+      role: 'member',
+    },
+    {
+      name: 'Michael Johnson',
+      age: 41,
+      role: 'deactivated',
+    },
+    {
+      name: 'Emily Brown',
+      age: 28,
+      role: 'member',
+    },
+    {
+      name: 'David Lee',
+      age: 37,
+      role: 'admin',
+    },
+    {
+      name: 'Sarah Wilson',
+      age: 29,
+      role: 'member',
+    },
+    {
+      name: 'Robert Taylor',
+      age: 45,
+      role: 'deactivated',
+    },
+    {
+      name: 'Lisa Anderson',
+      age: 33,
+      role: 'member',
+    },
+    {
+      name: 'James Martinez',
+      age: 39,
+      role: 'admin',
+    },
+    {
+      name: 'Jennifer Garcia',
+      age: 31,
+      role: 'deactivated',
+    },
+  ];
 </script>
 
 <Story name="Base" asChild>
-	<Table>
-		{#snippet children({ THead, TBody, Tr, Th, Td })}
-			<THead>
-				<Tr>
-					<Th>Name</Th>
-					<Th>Age</Th>
-					<Th class="w-[100px]">Role</Th>
-					<Th class="w-6"></Th>
-				</Tr>
-			</THead>
-			<TBody>
-				{#each users as user}
-					<Tr disabled={user.role === 'deactivated'}>
-						<Td>{user.name}</Td>
-						<Td>{user.age}</Td>
-						<Td>{user.role}</Td>
-						<Td>
-							<IconButton disabled={user.role === 'deactivated'}>
-								<Icon iconName="Phone" />
-							</IconButton>
-						</Td>
-					</Tr>
-				{/each}
-			</TBody>
-		{/snippet}
-	</Table>
+  <Table>
+    {#snippet children({ THead, TBody, Tr, Th, Td })}
+      <THead>
+        <Tr>
+          <Th>Name</Th>
+          <Th>Age</Th>
+          <Th class="w-[100px]">Role</Th>
+          <Th class="w-6"></Th>
+        </Tr>
+      </THead>
+      <TBody>
+        {#each users as user}
+          <Tr disabled={user.role === 'deactivated'}>
+            <Td>{user.name}</Td>
+            <Td>{user.age}</Td>
+            <Td>{user.role}</Td>
+            <Td>
+              <IconButton disabled={user.role === 'deactivated'}>
+                <Icon iconName="Phone" />
+              </IconButton>
+            </Td>
+          </Tr>
+        {/each}
+      </TBody>
+    {/snippet}
+  </Table>
 </Story>

package/dist/components/table/Table.svelte

@@ -1,44 +1,44 @@
 <script lang="ts">
-	import type { Snippet } from 'svelte';
-	import Td from './components/Td.svelte';
-	import Th from './components/Th.svelte';
-	import Tr from './components/Tr.svelte';
-	import THead from './components/THead.svelte';
-	import TBody from './components/TBody.svelte';
+  import type { Snippet } from 'svelte';
+  import Td from './components/Td.svelte';
+  import Th from './components/Th.svelte';
+  import Tr from './components/Tr.svelte';
+  import THead from './components/THead.svelte';
+  import TBody from './components/TBody.svelte';
 
-	interface Props {
-		tableLayout?: 'fixed' | 'auto';
-		children?: Snippet<
-			[
-				{
-					THead: typeof THead;
-					TBody: typeof TBody;
-					Tr: typeof Tr;
-					Th: typeof Th;
-					Td: typeof Td;
-				}
-			]
-		>;
-	}
+  interface Props {
+    tableLayout?: 'fixed' | 'auto';
+    children?: Snippet<
+      [
+        {
+          THead: typeof THead;
+          TBody: typeof TBody;
+          Tr: typeof Tr;
+          Th: typeof Th;
+          Td: typeof Td;
+        },
+      ]
+    >;
+  }
 
-	let { tableLayout = 'fixed', children }: Props = $props();
-	const C = {
-		THead: THead,
-		TBody: TBody,
-		Tr: Tr,
-		Th: Th,
-		Td: Td
-	};
+  let { tableLayout = 'fixed', children }: Props = $props();
+  const C = {
+    THead: THead,
+    TBody: TBody,
+    Tr: Tr,
+    Th: Th,
+    Td: Td,
+  };
 </script>
 
 <div class="w-full rounded-lg border border-static bg-surface px-5 py-2 shadow-container">
-	<table class={`w-full table-fixed sm:table-auto xl:table-${tableLayout}`}>
-		{@render children?.({ THead: THead, TBody: TBody, Tr: Tr, Th: Th, Td: Td })}
-	</table>
+  <table class={`w-full table-fixed sm:table-auto xl:table-${tableLayout}`}>
+    {@render children?.({ THead: THead, TBody: TBody, Tr: Tr, Th: Th, Td: Td })}
+  </table>
 </div>
 
 <style>
-	:global(tr) {
+  :global(tr) {
     border-bottom-width: 1px
 }
 :global(tr):last-child {

package/dist/components/table/components/TBody.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>
 
 <tbody class={`${className}`}>
-	{@render children?.()}
+  {@render children?.()}
 </tbody>

package/dist/components/table/components/THead.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>
 
 <thead class={`${className}`}>
-	{@render children?.()}
+  {@render children?.()}
 </thead>

package/dist/components/table/components/Td.svelte

@@ -1,15 +1,15 @@
 <script lang="ts">
-	import type { Snippet } from 'svelte';
+  import type { Snippet } from 'svelte';
 
-	interface Props {
-		dataTestId?: string;
-		align?: 'left' | 'right';
-		children?: Snippet;
-	}
+  interface Props {
+    dataTestId?: string;
+    align?: 'left' | 'right';
+    children?: Snippet;
+  }
 
-	let { dataTestId = '', align = 'left', children }: Props = $props();
+  let { dataTestId = '', align = 'left', children }: Props = $props();
 </script>
 
 <td data-testid={dataTestId} class={`text-${align} text-sm font-normal`}>
-	{@render children?.()}
+  {@render children?.()}
 </td>

package/dist/components/table/components/Th.svelte

@@ -1,15 +1,15 @@
 <script lang="ts">
-	import type { Width } from '../../../tailwind';
-	import type { Snippet } from 'svelte';
+  import type { Width } from '../../../tailwind';
+  import type { Snippet } from 'svelte';
 
-	interface Props {
-		class?: Width | '';
-		children?: Snippet;
-	}
+  interface Props {
+    class?: Width | '';
+    children?: Snippet;
+  }
 
-	let { class: className = '', children }: Props = $props();
+  let { class: className = '', children }: Props = $props();
 </script>
 
 <th class={`text-left text-xs font-medium text-tertiary ${className}`}>
-	{@render children?.()}
+  {@render children?.()}
 </th>

package/dist/components/table/components/Tr.svelte

@@ -1,32 +1,32 @@
 <script lang="ts">
-	import type { Snippet } from 'svelte';
+  import type { Snippet } from 'svelte';
 
-	interface Props {
-		disabled?: boolean;
-		children?: Snippet;
-		class?: string;
-	}
+  interface Props {
+    disabled?: boolean;
+    children?: Snippet;
+    class?: string;
+  }
 
-	let { disabled = false, children, class: className = '' }: Props = $props();
+  let { disabled = false, children, class: className = '' }: Props = $props();
 </script>
 
 <tr class={`border-static py-2 [&.disabled]:text-tertiary ${className}`} class:disabled>
-	{@render children?.()}
+  {@render children?.()}
 </tr>
 
 <style>
-	:global(td) {
+  :global(td) {
     padding-top: 1rem;
     padding-bottom: 1rem
 }
 :global(td):first-child {
     padding-left: 0.5rem
 }
-	:global(th) {
+  :global(th) {
     padding-top: 1rem;
     padding-bottom: 1rem
 }
-	:global(th):first-child {
+  :global(th):first-child {
     padding-left: 0.5rem
 }
 </style>

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

@@ -1,28 +1,28 @@
 <script module>
-	import Tabs from './Tabs.svelte';
+  import Tabs from './Tabs.svelte';
 
-	import { defineMeta } from '@storybook/addon-svelte-csf';
-	const { Story } = defineMeta({
-		component: Tabs,
-		title: 'Design System/Tabs',
-		tags: ['autodocs']
-	});
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+  const { Story } = defineMeta({
+    component: Tabs,
+    title: 'Design System/Tabs',
+    tags: ['autodocs'],
+  });
 
-	let activeTab = 'tab-1';
+  let activeTab = 'tab-1';
 </script>
 
 <Story name="Primary" asChild>
-	<Tabs>
-		{#snippet children({ Tabs, Tab, Content })}
-			<Tabs>
-				<Tab active={activeTab === 'tab-1'} onClick={() => (activeTab = 'tab-1')}>Tab 1</Tab>
-				<Tab active={activeTab === 'tab-2'} onClick={() => (activeTab = 'tab-2')}>Tab 2</Tab>
-				<Tab active={activeTab === 'tab-3'} onClick={() => (activeTab = 'tab-3')}>Tab 3</Tab>
-			</Tabs>
+  <Tabs>
+    {#snippet children({ Tabs, Tab, Content })}
+      <Tabs>
+        <Tab active={activeTab === 'tab-1'} onClick={() => (activeTab = 'tab-1')}>Tab 1</Tab>
+        <Tab active={activeTab === 'tab-2'} onClick={() => (activeTab = 'tab-2')}>Tab 2</Tab>
+        <Tab active={activeTab === 'tab-3'} onClick={() => (activeTab = 'tab-3')}>Tab 3</Tab>
+      </Tabs>
 
-			<Content show={activeTab === 'tab-1'}>Showing tab 1 content</Content>
-			<Content show={activeTab === 'tab-2'}>Showing tab 2 content</Content>
-			<Content show={activeTab === 'tab-3'}>Showing tab 3 content</Content>
-		{/snippet}
-	</Tabs>
+      <Content show={activeTab === 'tab-1'}>Showing tab 1 content</Content>
+      <Content show={activeTab === 'tab-2'}>Showing tab 2 content</Content>
+      <Content show={activeTab === 'tab-3'}>Showing tab 3 content</Content>
+    {/snippet}
+  </Tabs>
 </Story>

package/dist/components/tabs/Tabs.svelte

@@ -1,13 +1,13 @@
 <script lang="ts">
-	import type { Snippet } from 'svelte';
-	import Content from './components/Content.svelte';
-	import Tab from './components/Tab.svelte';
-	import Tabs from './components/Tabs.svelte';
-	interface Props {
-		children?: Snippet<[{ Tabs: typeof Tabs; Tab: typeof Tab; Content: typeof Content }]>;
-	}
+  import type { Snippet } from 'svelte';
+  import Content from './components/Content.svelte';
+  import Tab from './components/Tab.svelte';
+  import Tabs from './components/Tabs.svelte';
+  interface Props {
+    children?: Snippet<[{ Tabs: typeof Tabs; Tab: typeof Tab; Content: typeof Content }]>;
+  }
 
-	let { children }: Props = $props();
+  let { children }: Props = $props();
 </script>
 
 {@render children?.({ Tabs, Tab, Content })}