@reshape-biotech/design-system 1.2.5 → 1.2.7

package/dist/components/required-status-indicator/RequiredStatusIndicator.stories.svelte

@@ -1,17 +1,17 @@
 <script module lang="ts">
-	import { defineMeta } from '@storybook/addon-svelte-csf';
-	import RequiredStatusIndicator from './RequiredStatusIndicator.svelte';
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+  import RequiredStatusIndicator from './RequiredStatusIndicator.svelte';
 
-	const { Story } = defineMeta({
-		title: 'Design System/RequiredStatusIndicator',
-		component: RequiredStatusIndicator,
-		tags: ['autodocs'],
-		argTypes: {
-			currentCount: { control: 'number', description: 'Current number of completed items' },
-			requiredCount: { control: 'number', description: 'Total number of required items' },
-			class: { control: 'text', description: 'Optional additional CSS classes' }
-		}
-	});
+  const { Story } = defineMeta({
+    title: 'Design System/RequiredStatusIndicator',
+    component: RequiredStatusIndicator,
+    tags: ['autodocs'],
+    argTypes: {
+      currentCount: { control: 'number', description: 'Current number of completed items' },
+      requiredCount: { control: 'number', description: 'Total number of required items' },
+      class: { control: 'text', description: 'Optional additional CSS classes' },
+    },
+  });
 </script>
 
 <Story name="Incomplete" args={{ currentCount: 1, requiredCount: 3 }} />
@@ -19,10 +19,10 @@
 <Story name="Complete" args={{ currentCount: 3, requiredCount: 3 }} />
 
 <Story
-	name="CustomClass"
-	args={{
-		currentCount: 2,
-		requiredCount: 4,
-		class: 'text-lg text-warning'
-	}}
+  name="CustomClass"
+  args={{
+    currentCount: 2,
+    requiredCount: 4,
+    class: 'text-lg text-warning',
+  }}
 />

package/dist/components/required-status-indicator/RequiredStatusIndicator.svelte

@@ -1,22 +1,22 @@
 <script lang="ts">
-	import { Icon } from '../icons';
+  import { Icon } from '../icons';
 
-	type Props = {
-		currentCount: number;
-		requiredCount: number;
-		class?: string;
-	};
+  type Props = {
+    currentCount: number;
+    requiredCount: number;
+    class?: string;
+  };
 
-	let { currentCount, requiredCount, class: className = '' }: Props = $props();
+  let { currentCount, requiredCount, class: className = '' }: Props = $props();
 
-	const isComplete = $derived(currentCount >= requiredCount);
+  const isComplete = $derived(currentCount >= requiredCount);
 </script>
 
 <span class={`flex items-center gap-1 text-sm text-tertiary ${className}`}>
-	{currentCount} of {requiredCount} required
-	{#if isComplete}
-		<Icon iconName="CheckCircle" weight="fill" color="accent" size={16} />
-	{:else}
-		<Icon iconName="CheckCircle" size={16} />
-	{/if}
+  {currentCount} of {requiredCount} required
+  {#if isComplete}
+    <Icon iconName="CheckCircle" weight="fill" color="accent" size={16} />
+  {:else}
+    <Icon iconName="CheckCircle" size={16} />
+  {/if}
 </span>

package/dist/components/segmented-control-buttons/ControlButton.svelte

@@ -1,54 +1,54 @@
 <script lang="ts">
-	import type { Snippet } from 'svelte';
+  import type { Snippet } from 'svelte';
 
-	type Color = 'primary' | 'secondary';
+  type Color = 'primary' | 'secondary';
 
-	interface Props {
-		class?: string;
-		color?: Color;
-		disabled?: boolean;
-		active?: boolean;
-		dataTestId?: string;
-		onclick?: () => void;
-		children?: Snippet;
-	}
+  interface Props {
+    class?: string;
+    color?: Color;
+    disabled?: boolean;
+    active?: boolean;
+    dataTestId?: string;
+    onclick?: () => void;
+    children?: Snippet;
+  }
 
-	let {
-		class: className = '',
-		color = 'primary',
-		disabled = false,
-		active = false,
-		dataTestId,
-		onclick,
-		children
-	}: Props = $props();
-	const colors: Record<Color, string> = {
-		primary: 'bg-transparent text-primary hover:bg-neutral disabled:text-tertiary',
-		secondary: 'bg-transparent text-primary hover:bg-neutral disabled:text-tertiary'
-	};
+  let {
+    class: className = '',
+    color = 'primary',
+    disabled = false,
+    active = false,
+    dataTestId,
+    onclick,
+    children,
+  }: Props = $props();
+  const colors: Record<Color, string> = {
+    primary: 'bg-transparent text-primary hover:bg-neutral disabled:text-tertiary',
+    secondary: 'bg-transparent text-primary hover:bg-neutral disabled:text-tertiary',
+  };
 </script>
 
 <div class="join-item flex h-full flex-1">
-	<button
-		{onclick}
-		class={`control-button flex flex-1 items-center justify-center gap-2 rounded-md text-sm leading-4 ${colors[color]} ${className} ${color}`}
-		class:active
-		type="button"
-		{disabled}
-		data-testid={dataTestId}
-	>
-		{@render children?.()}
-	</button>
+  <button
+    {onclick}
+    class={`control-button flex flex-1 items-center justify-center gap-2 rounded-md text-sm leading-4 ${colors[color]} ${className} ${color}`}
+    class:active
+    type="button"
+    {disabled}
+    data-testid={dataTestId}
+  >
+    {@render children?.()}
+  </button>
 </div>
 
 <style>
-	.primary.active {
+  .primary.active {
     --tw-bg-opacity: 1;
     background-color: rgb(87 80 238 / var(--tw-bg-opacity, 1));
     --tw-text-opacity: 1;
     color: rgb(255 255 255 / var(--tw-text-opacity, 1))
 }
-	.secondary.active {
+  .secondary.active {
     --tw-bg-opacity: 1;
     background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
     --tw-text-opacity: 1;

package/dist/components/segmented-control-buttons/SegmentedControlButtons.stories.svelte

@@ -1,45 +1,45 @@
 <script module lang="ts">
-	import { Icon } from '../icons';
-	import SegmentedControlButtons from './SegmentedControlButtons.svelte';
-	import { defineMeta } from '@storybook/addon-svelte-csf';
+  import { Icon } from '../icons';
+  import SegmentedControlButtons from './SegmentedControlButtons.svelte';
+  import { defineMeta } from '@storybook/addon-svelte-csf';
 
-	const { Story } = defineMeta({
-		component: SegmentedControlButtons,
-		title: 'Design System/SegmentedControlButtons',
-		tags: ['autodocs']
-	});
+  const { Story } = defineMeta({
+    component: SegmentedControlButtons,
+    title: 'Design System/SegmentedControlButtons',
+    tags: ['autodocs'],
+  });
 </script>
 
 <Story name="Primary" asChild>
-	<SegmentedControlButtons class="w-[350px]">
-		{#snippet children({ ControlButton })}
-			<ControlButton active><Icon iconName="Star" /> Low</ControlButton>
-			<ControlButton><Icon iconName="Star" /> Medium</ControlButton>
-			<ControlButton disabled><Icon iconName="Star" /> High</ControlButton>
-		{/snippet}
-	</SegmentedControlButtons>
+  <SegmentedControlButtons class="w-[350px]">
+    {#snippet children({ ControlButton })}
+      <ControlButton active><Icon iconName="Star" /> Low</ControlButton>
+      <ControlButton><Icon iconName="Star" /> Medium</ControlButton>
+      <ControlButton disabled><Icon iconName="Star" /> High</ControlButton>
+    {/snippet}
+  </SegmentedControlButtons>
 </Story>
 <Story name="Large" asChild>
-	<SegmentedControlButtons size="lg" class="w-[350px]">
-		{#snippet children({ ControlButton })}
-			<ControlButton active><Icon iconName="Star" /> Low</ControlButton>
-			<ControlButton><Icon iconName="Star" /> Medium</ControlButton>
-			<ControlButton disabled><Icon iconName="Star" /> High</ControlButton>
-		{/snippet}
-	</SegmentedControlButtons>
+  <SegmentedControlButtons size="lg" class="w-[350px]">
+    {#snippet children({ ControlButton })}
+      <ControlButton active><Icon iconName="Star" /> Low</ControlButton>
+      <ControlButton><Icon iconName="Star" /> Medium</ControlButton>
+      <ControlButton disabled><Icon iconName="Star" /> High</ControlButton>
+    {/snippet}
+  </SegmentedControlButtons>
 </Story>
 <Story name="Secondary" asChild>
-	<SegmentedControlButtons class="w-[350px]">
-		{#snippet children({ ControlButton })}
-			<ControlButton active color="secondary">
-				<Icon iconName="Star" /> Low
-			</ControlButton>
-			<ControlButton color="secondary">
-				<Icon iconName="Star" /> Medium
-			</ControlButton>
-			<ControlButton color="secondary">
-				<Icon iconName="Star" /> High
-			</ControlButton>
-		{/snippet}
-	</SegmentedControlButtons>
+  <SegmentedControlButtons class="w-[350px]">
+    {#snippet children({ ControlButton })}
+      <ControlButton active color="secondary">
+        <Icon iconName="Star" /> Low
+      </ControlButton>
+      <ControlButton color="secondary">
+        <Icon iconName="Star" /> Medium
+      </ControlButton>
+      <ControlButton color="secondary">
+        <Icon iconName="Star" /> High
+      </ControlButton>
+    {/snippet}
+  </SegmentedControlButtons>
 </Story>

package/dist/components/segmented-control-buttons/SegmentedControlButtons.svelte

@@ -1,21 +1,21 @@
 <script lang="ts">
-	import type { Snippet } from 'svelte';
-	import ControlButton from './ControlButton.svelte';
+  import type { Snippet } from 'svelte';
+  import ControlButton from './ControlButton.svelte';
 
-	interface Props {
-		class?: string;
-		size?: 'md' | 'lg';
-		children?: Snippet<[{ ControlButton: typeof ControlButton }]>;
-	}
+  interface Props {
+    class?: string;
+    size?: 'md' | 'lg';
+    children?: Snippet<[{ ControlButton: typeof ControlButton }]>;
+  }
 
-	let { class: className = '', size = 'md', children }: Props = $props();
+  let { class: className = '', size = 'md', children }: Props = $props();
 
-	const sizes = {
-		md: 'h-10 ',
-		lg: 'h-16 [&>*>.control-button]:flex-col'
-	};
+  const sizes = {
+    md: 'h-10 ',
+    lg: 'h-16 [&>*>.control-button]:flex-col',
+  };
 </script>
 
 <div class={`join flex gap-1 rounded-lg bg-neutral p-1 ${sizes[size]} ${size} ${className}`}>
-	{@render children?.({ ControlButton })}
+  {@render children?.({ ControlButton })}
 </div>

package/dist/components/select/Select.stories.svelte

@@ -1,113 +1,113 @@
 <script module lang="ts">
-	import Select from './Select.svelte';
+  import Select from './Select.svelte';
 
-	import { defineMeta } from '@storybook/addon-svelte-csf';
+  import { defineMeta } from '@storybook/addon-svelte-csf';
 
-	const { Story } = defineMeta({
-		component: Select,
-		title: 'Design System/Select',
-		tags: ['autodocs']
-	});
+  const { Story } = defineMeta({
+    component: Select,
+    title: 'Design System/Select',
+    tags: ['autodocs'],
+  });
 
-	const items = [
-		{ value: '1', label: 'One', group: 'Group 1', description: 'Description 1' },
-		{ value: '2', label: 'Two', group: 'Group 1', description: 'Description 2' },
-		{ value: '3', label: 'Three', group: 'Group 2' },
-		{ value: '4', label: 'Four', group: 'Group 2' }
-	];
-	let value: any = $state();
-	let thisChanged = $state(false);
+  const items = [
+    { value: '1', label: 'One', group: 'Group 1', description: 'Description 1' },
+    { value: '2', label: 'Two', group: 'Group 1', description: 'Description 2' },
+    { value: '3', label: 'Three', group: 'Group 2' },
+    { value: '4', label: 'Four', group: 'Group 2' },
+  ];
+  let value: any = $state();
+  let thisChanged = $state(false);
 
-	function handleInput(e: Event) {
-		thisChanged = true;
-	}
+  function handleInput(e: Event) {
+    thisChanged = true;
+  }
 </script>
 
 <Story name="Default" asChild>
-	<div class="py-12">
-		<Select listOpen {items} />
-	</div>
+  <div class="py-12">
+    <Select listOpen {items} />
+  </div>
 </Story>
 <Story name="Grouped" asChild>
-	<div class="py-12">
-		<Select listOpen {items} withGroup />
-	</div>
+  <div class="py-12">
+    <Select listOpen {items} withGroup />
+  </div>
 </Story>
 
 <Story name="DefaultValue" asChild>
-	<div class="py-12">
-		<Select listOpen {items} withGroup value={{ value: '1', label: 'One', group: 'Group 1' }} />
-	</div>
+  <div class="py-12">
+    <Select listOpen {items} withGroup value={{ value: '1', label: 'One', group: 'Group 1' }} />
+  </div>
 </Story>
 
 <Story name="Disabled" asChild>
-	<div class="py-12">
-		<Select listOpen {items} disabled />
-	</div>
+  <div class="py-12">
+    <Select listOpen {items} disabled />
+  </div>
 </Story>
 <Story name="Searchable" asChild>
-	<div class="py-12">
-		<Select listOpen {items} searchable />
-	</div>
+  <div class="py-12">
+    <Select listOpen {items} searchable />
+  </div>
 </Story>
 <Story name="Open" asChild>
-	<div class="py-12">
-		<Select listOpen {items} />
-	</div>
+  <div class="py-12">
+    <Select listOpen {items} />
+  </div>
 </Story>
 <Story name="Error" asChild>
-	<div class="py-12">
-		<Select listOpen {items} hasError />
-	</div>
+  <div class="py-12">
+    <Select listOpen {items} hasError />
+  </div>
 </Story>
 <Story name="Placeholder" asChild>
-	<div class="py-12">
-		<Select listOpen {items} placeholder="Select a value" />
-	</div>
+  <div class="py-12">
+    <Select listOpen {items} placeholder="Select a value" />
+  </div>
 </Story>
 <Story name="Multiple" asChild>
-	<div class="py-12">
-		<Select listOpen {items} multiple bind:value />
-	</div>
+  <div class="py-12">
+    <Select listOpen {items} multiple bind:value />
+  </div>
 </Story>
 
 <Story name="Bind value input changed" asChild>
-	<div class="py-12">
-		<Select listOpen {items} bind:value on:input={handleInput} />
-		{#if thisChanged}
-			<p class="text-secondary">Wow you picked something from the dropdown 💪</p>{/if}
-	</div>
+  <div class="py-12">
+    <Select listOpen {items} bind:value on:input={handleInput} />
+    {#if thisChanged}
+      <p class="text-secondary">Wow you picked something from the dropdown 💪</p>{/if}
+  </div>
 </Story>
 
 <Story name="Custom Item" asChild>
-	<div class="py-12">
-		<Select listOpen {items} value={{ value: '1', label: 'One', group: 'Group 1' }}>
-			<!-- @migration-task: migrate this slot by hand, `custom-item` is an invalid identifier -->
-			<div
-				slot="custom-item"
-				class="flex h-14 w-full items-center overflow-hidden whitespace-nowrap"
-				let:item
-			>
-				<div class="flex flex-col">
-					<p class="text-sm">
-						{item.label}
-					</p>
-					<p class="max-w-20 text-xs text-secondary">
-						{item.description} very very long long loooooong long description
-					</p>
-				</div>
-			</div>
-		</Select>
-	</div>
+  <div class="py-12">
+    <Select listOpen {items} value={{ value: '1', label: 'One', group: 'Group 1' }}>
+      <!-- @migration-task: migrate this slot by hand, `custom-item` is an invalid identifier -->
+      <div
+        slot="custom-item"
+        class="flex h-14 w-full items-center overflow-hidden whitespace-nowrap"
+        let:item
+      >
+        <div class="flex flex-col">
+          <p class="text-sm">
+            {item.label}
+          </p>
+          <p class="max-w-20 text-xs text-secondary">
+            {item.description} very very long long loooooong long description
+          </p>
+        </div>
+      </div>
+    </Select>
+  </div>
 </Story>
 
 <Story name="Custom selection label" asChild>
-	<div class="py-12">
-		<Select {items} value={{ value: '1', label: 'One', group: 'Group 1' }}>
-			<!-- @migration-task: migrate this slot by hand, `custom-selection` is an invalid identifier -->
-			<div slot="custom-selection" let:selection>
-				<p>💩{selection.label} poopoo💩</p>
-			</div>
-		</Select>
-	</div>
+  <div class="py-12">
+    <Select {items} value={{ value: '1', label: 'One', group: 'Group 1' }}>
+      <!-- @migration-task: migrate this slot by hand, `custom-selection` is an invalid identifier -->
+      <div slot="custom-selection" let:selection>
+        <p>💩{selection.label} poopoo💩</p>
+      </div>
+    </Select>
+  </div>
 </Story>