@reshape-biotech/design-system 1.2.6 → 1.2.7

package/dist/components/card/Card.stories.svelte

@@ -1,130 +1,130 @@
 <script module lang="ts">
-	import { defineMeta } from '@storybook/addon-svelte-csf';
-	import Card from './Card.svelte';
-	import RequiredStatusIndicator from '../required-status-indicator/RequiredStatusIndicator.svelte';
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+  import Card from './Card.svelte';
+  import RequiredStatusIndicator from '../required-status-indicator/RequiredStatusIndicator.svelte';
 
-	const { Story } = defineMeta({
-		title: 'Design System/Card',
-		component: Card,
-		tags: ['autodocs'],
-		argTypes: {
-			Header: { description: 'Optional header snippet', control: false },
-			children: { description: 'Content snippet for the main body (required)', control: false },
-			headerBorder: { control: 'boolean', description: 'Show a border below the header' },
-			class: { control: 'text', description: 'Additional CSS classes for the card' }
-		}
-	});
+  const { Story } = defineMeta({
+    title: 'Design System/Card',
+    component: Card,
+    tags: ['autodocs'],
+    argTypes: {
+      Header: { description: 'Optional header snippet', control: false },
+      children: { description: 'Content snippet for the main body (required)', control: false },
+      headerBorder: { control: 'boolean', description: 'Show a border below the header' },
+      class: { control: 'text', description: 'Additional CSS classes for the card' },
+    },
+  });
 </script>
 
 <Story name="Content Only" args={{ class: 'w-96' }} asChild>
-	<Card class="w-96">
-		{#snippet children()}
-			<h3 class="mb-2 text-lg font-semibold text-primary">Card with Content Only</h3>
-			<p class="text-secondary">This card demonstrates providing only the children snippet.</p>
-			<button
-				class="mt-4 rounded bg-accent-inverse px-4 py-2 text-primary-inverse hover:bg-accent-inverse-hover"
-			>
-				Action Button
-			</button>
-		{/snippet}
-	</Card>
+  <Card class="w-96">
+    {#snippet children()}
+      <h3 class="mb-2 text-lg font-semibold text-primary">Card with Content Only</h3>
+      <p class="text-secondary">This card demonstrates providing only the children snippet.</p>
+      <button
+        class="mt-4 rounded bg-accent-inverse px-4 py-2 text-primary-inverse hover:bg-accent-inverse-hover"
+      >
+        Action Button
+      </button>
+    {/snippet}
+  </Card>
 </Story>
 
 <Story name="Header Only" args={{ class: 'w-96' }} asChild>
-	<Card class="w-96">
-		{#snippet Header()}
-			<p class="text-primary">Card with Header Only</p>
-			<p class="text-sm text-tertiary">No main content here, just a header.</p>
-		{/snippet}
-		{#snippet children()}{/snippet}
-	</Card>
+  <Card class="w-96">
+    {#snippet Header()}
+      <p class="text-primary">Card with Header Only</p>
+      <p class="text-sm text-tertiary">No main content here, just a header.</p>
+    {/snippet}
+    {#snippet children()}{/snippet}
+  </Card>
 </Story>
 
 <Story name="Header and Content" args={{ class: 'w-96' }} asChild>
-	<Card class="w-96">
-		{#snippet Header()}
-			<div class="flex items-center justify-between">
-				<p class="text-primary">Insect Health</p>
-				<span class="text-sm text-success">Target</span>
-			</div>
-		{/snippet}
-		{#snippet children()}
-			<div class="space-y-2">
-				<div>
-					<label for="insect-name" class="block text-sm font-medium text-secondary">Name *</label>
-					<input
-						type="text"
-						id="insect-name"
-						value="Insect health"
-						class="border-border-input mt-1 block w-full rounded-md p-2"
-					/>
-				</div>
-				<div>
-					<label for="insect-desc" class="block text-sm font-medium text-secondary"
-						>Description *</label
-					>
-					<input
-						type="text"
-						id="insect-desc"
-						value="Health based on insect activity"
-						class="border-border-input mt-1 block w-full rounded-md p-2"
-					/>
-				</div>
-			</div>
-		{/snippet}
-	</Card>
+  <Card class="w-96">
+    {#snippet Header()}
+      <div class="flex items-center justify-between">
+        <p class="text-primary">Insect Health</p>
+        <span class="text-sm text-success">Target</span>
+      </div>
+    {/snippet}
+    {#snippet children()}
+      <div class="space-y-2">
+        <div>
+          <label for="insect-name" class="block text-sm font-medium text-secondary">Name *</label>
+          <input
+            type="text"
+            id="insect-name"
+            value="Insect health"
+            class="border-border-input mt-1 block w-full rounded-md p-2"
+          />
+        </div>
+        <div>
+          <label for="insect-desc" class="block text-sm font-medium text-secondary"
+            >Description *</label
+          >
+          <input
+            type="text"
+            id="insect-desc"
+            value="Health based on insect activity"
+            class="border-border-input mt-1 block w-full rounded-md p-2"
+          />
+        </div>
+      </div>
+    {/snippet}
+  </Card>
 </Story>
 
 <Story name="Header, Content, and Border" args={{ headerBorder: true, class: 'w-96' }} asChild>
-	<Card headerBorder={true} class="w-96">
-		{#snippet Header()}
-			<div class="flex items-center justify-between">
-				<p class="text-primary">Insect Count</p>
-				<RequiredStatusIndicator requiredCount={2} currentCount={2} />
-			</div>
-		{/snippet}
-		{#snippet children()}
-			<div class="space-y-2">
-				<div>
-					<label for="count-name" class="block text-sm font-medium text-secondary">Name *</label>
-					<input
-						type="text"
-						id="count-name"
-						value="Insect count"
-						class="border-border-input mt-1 block w-full rounded-md p-2"
-					/>
-				</div>
-				<div>
-					<label for="count-desc" class="block text-sm font-medium text-secondary"
-						>Description *</label
-					>
-					<input
-						type="text"
-						id="count-desc"
-						value="Total count of insects detected"
-						class="border-border-input mt-1 block w-full rounded-md p-2"
-					/>
-				</div>
-				<p class="text-secondary">This card has a border under the header.</p>
-			</div>
-		{/snippet}
-	</Card>
+  <Card headerBorder={true} class="w-96">
+    {#snippet Header()}
+      <div class="flex items-center justify-between">
+        <p class="text-primary">Insect Count</p>
+        <RequiredStatusIndicator requiredCount={2} currentCount={2} />
+      </div>
+    {/snippet}
+    {#snippet children()}
+      <div class="space-y-2">
+        <div>
+          <label for="count-name" class="block text-sm font-medium text-secondary">Name *</label>
+          <input
+            type="text"
+            id="count-name"
+            value="Insect count"
+            class="border-border-input mt-1 block w-full rounded-md p-2"
+          />
+        </div>
+        <div>
+          <label for="count-desc" class="block text-sm font-medium text-secondary"
+            >Description *</label
+          >
+          <input
+            type="text"
+            id="count-desc"
+            value="Total count of insects detected"
+            class="border-border-input mt-1 block w-full rounded-md p-2"
+          />
+        </div>
+        <p class="text-secondary">This card has a border under the header.</p>
+      </div>
+    {/snippet}
+  </Card>
 </Story>
 
 <Story name="With Custom Styling" args={{}} asChild>
-	<Card class="w-1/2 bg-accent text-primary-inverse shadow-lg">
-		{#snippet Header()}
-			<p class="">Custom Styled Card</p>
-		{/snippet}
-		{#snippet children()}
-			<p>
-				This card uses the <code class="rounded bg-black/20 px-1">class</code> prop to apply a
-				different background (<code class="rounded bg-black/20 px-1">bg-accent</code>), text color (<code
-					class="rounded bg-black/20 px-1">text-primary-inverse</code
-				>), width (<code class="rounded bg-black/20 px-1">w-1/2</code>), and a larger shadow (<code
-					class="rounded bg-black/20 px-1">shadow-lg</code
-				>).
-			</p>
-		{/snippet}
-	</Card>
+  <Card class="w-1/2 bg-accent text-primary-inverse shadow-lg">
+    {#snippet Header()}
+      <p class="">Custom Styled Card</p>
+    {/snippet}
+    {#snippet children()}
+      <p>
+        This card uses the <code class="rounded bg-black/20 px-1">class</code> prop to apply a
+        different background (<code class="rounded bg-black/20 px-1">bg-accent</code>), text color (<code
+          class="rounded bg-black/20 px-1">text-primary-inverse</code
+        >), width (<code class="rounded bg-black/20 px-1">w-1/2</code>), and a larger shadow (<code
+          class="rounded bg-black/20 px-1">shadow-lg</code
+        >).
+      </p>
+    {/snippet}
+  </Card>
 </Story>

package/dist/components/card/Card.svelte

@@ -1,25 +1,25 @@
 <script lang="ts">
-	import type { Snippet } from 'svelte';
+  import type { Snippet } from 'svelte';
 
-	type Props = {
-		Header?: Snippet;
-		children: Snippet;
-		headerBorder?: boolean;
-		class?: string;
-	};
+  type Props = {
+    Header?: Snippet;
+    children: Snippet;
+    headerBorder?: boolean;
+    class?: string;
+  };
 
-	const { Header, children, headerBorder = false, class: additionalClasses = '' }: Props = $props();
+  const { Header, children, headerBorder = false, class: additionalClasses = '' }: Props = $props();
 </script>
 
 <div class="rounded-lg border border-static bg-surface shadow-sm {additionalClasses}">
-	{#if Header}
-		<header class="px-6 py-4" class:border-b={headerBorder} class:border-static={headerBorder}>
-			{@render Header()}
-		</header>
-	{/if}
-	{#if children}
-		<div class="p-6">
-			{@render children()}
-		</div>
-	{/if}
+  {#if Header}
+    <header class="px-6 py-4" class:border-b={headerBorder} class:border-static={headerBorder}>
+      {@render Header()}
+    </header>
+  {/if}
+  {#if children}
+    <div class="p-6">
+      {@render children()}
+    </div>
+  {/if}
 </div>

package/dist/components/checkbox/Checkbox.stories.svelte

@@ -1,14 +1,14 @@
 <script module lang="ts">
-	import Checkbox from './Checkbox.svelte';
-	import { defineMeta } from '@storybook/addon-svelte-csf';
+  import Checkbox from './Checkbox.svelte';
+  import { defineMeta } from '@storybook/addon-svelte-csf';
 
-	const { Story } = defineMeta({
-		component: Checkbox,
-		title: 'Design System/Checkbox',
-		tags: ['autodocs']
-	});
+  const { Story } = defineMeta({
+    component: Checkbox,
+    title: 'Design System/Checkbox',
+    tags: ['autodocs'],
+  });
 
-	let checked = $state<boolean>(false);
+  let checked = $state<boolean>(false);
 </script>
 
 <Story name="Default" args={{ checked: false }} />

package/dist/components/checkbox/Checkbox.svelte

@@ -1,24 +1,24 @@
 <script lang="ts">
-	import { Checkbox, type CheckboxRootProps } from 'bits-ui';
-	import { Icon } from '../icons';
+  import { Checkbox, type CheckboxRootProps } from 'bits-ui';
+  import { Icon } from '../icons';
 
-	export type CheckboxProps = CheckboxRootProps;
+  export type CheckboxProps = CheckboxRootProps;
 
-	let { checked = $bindable(false), onCheckedChange, ...props }: CheckboxProps = $props();
+  let { checked = $bindable(false), onCheckedChange, ...props }: CheckboxProps = $props();
 </script>
 
 <Checkbox.Root bind:checked {onCheckedChange} {...props}>
-	{#snippet children({ checked, indeterminate })}
-		<div
-			class={`flex items-center justify-center rounded border border-static ${checked ? 'bg-dark-accent-inverse-hover' : ''}`}
-		>
-			{#if checked}
-				<Icon iconName="Check" class="text-primary-inverse" />
-			{:else if indeterminate}
-				<Icon iconName="Minus" />
-			{:else}
-				<div class="h-4 w-4"></div>
-			{/if}
-		</div>
-	{/snippet}
+  {#snippet children({ checked, indeterminate })}
+    <div
+      class={`flex items-center justify-center rounded border border-static ${checked ? 'bg-dark-accent-inverse-hover' : ''}`}
+    >
+      {#if checked}
+        <Icon iconName="Check" class="text-primary-inverse" />
+      {:else if indeterminate}
+        <Icon iconName="Minus" />
+      {:else}
+        <div class="h-4 w-4"></div>
+      {/if}
+    </div>
+  {/snippet}
 </Checkbox.Root>

package/dist/components/collapsible/Collapsible.stories.svelte

@@ -1,41 +1,41 @@
 <script module lang="ts">
-	import { defineMeta } from '@storybook/addon-svelte-csf';
-	import { Root as CollapsibleRootForMeta } from './index';
-	import * as Collapsible from './index';
-	import Button from '../button/Button.svelte';
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+  import { Root as CollapsibleRootForMeta } from './index';
+  import * as Collapsible from './index';
+  import Button from '../button/Button.svelte';
 
-	const { Story } = defineMeta({
-		component: CollapsibleRootForMeta,
-		title: 'Design System/Collapsible',
-		tags: ['autodocs']
-	});
+  const { Story } = defineMeta({
+    component: CollapsibleRootForMeta,
+    title: 'Design System/Collapsible',
+    tags: ['autodocs'],
+  });
 
-	let open = $state(false);
+  let open = $state(false);
 </script>
 
 <Story name="Base" asChild>
-	<Collapsible.Root class="w-[200px]">
-		<Collapsible.Trigger class="w-full">
-			<h6>Trigger</h6>
-		</Collapsible.Trigger>
+  <Collapsible.Root class="w-[200px]">
+    <Collapsible.Trigger class="w-full">
+      <h6>Trigger</h6>
+    </Collapsible.Trigger>
 
-		<Collapsible.Content>Content</Collapsible.Content>
-	</Collapsible.Root>
+    <Collapsible.Content>Content</Collapsible.Content>
+  </Collapsible.Root>
 </Story>
 
 <Story name="Without Icon" asChild>
-	<Collapsible.Root class="w-[200px]">
-		<Collapsible.Trigger class="w-full" withIcon={false}>
-			<h6>Trigger</h6>
-		</Collapsible.Trigger>
+  <Collapsible.Root class="w-[200px]">
+    <Collapsible.Trigger class="w-full" withIcon={false}>
+      <h6>Trigger</h6>
+    </Collapsible.Trigger>
 
-		<Collapsible.Content>Content</Collapsible.Content>
-	</Collapsible.Root>
+    <Collapsible.Content>Content</Collapsible.Content>
+  </Collapsible.Root>
 </Story>
 
 <Story name="Controlled" asChild>
-	<Button onClick={() => (open = !open)}>Outside Trigger</Button>
-	<Collapsible.Root class="w-[200px]" {open}>
-		<Collapsible.Content>Content</Collapsible.Content>
-	</Collapsible.Root>
+  <Button onClick={() => (open = !open)}>Outside Trigger</Button>
+  <Collapsible.Root class="w-[200px]" {open}>
+    <Collapsible.Content>Content</Collapsible.Content>
+  </Collapsible.Root>
 </Story>

package/dist/components/collapsible/components/collapsible-content.svelte

@@ -1,26 +1,26 @@
 <script lang="ts">
-	import { Collapsible, type WithoutChildrenOrChild } from 'bits-ui';
-	import { slide } from 'svelte/transition';
-	import type { Snippet } from 'svelte';
-	import type { CollapsibleContentProps } from '../types';
+  import { Collapsible, type WithoutChildrenOrChild } from 'bits-ui';
+  import { slide } from 'svelte/transition';
+  import type { Snippet } from 'svelte';
+  import type { CollapsibleContentProps } from '../types';
 
-	let {
-		ref = $bindable(null),
-		duration = 200,
-		children,
-		...restProps
-	}: WithoutChildrenOrChild<CollapsibleContentProps> & {
-		duration?: number;
-		children?: Snippet;
-	} = $props();
+  let {
+    ref = $bindable(null),
+    duration = 200,
+    children,
+    ...restProps
+  }: WithoutChildrenOrChild<CollapsibleContentProps> & {
+    duration?: number;
+    children?: Snippet;
+  } = $props();
 </script>
 
 <Collapsible.Content forceMount bind:ref {...restProps}>
-	{#snippet child({ props, open })}
-		{#if open}
-			<div {...props} transition:slide={{ duration }}>
-				{@render children?.()}
-			</div>
-		{/if}
-	{/snippet}
+  {#snippet child({ props, open })}
+    {#if open}
+      <div {...props} transition:slide={{ duration }}>
+        {@render children?.()}
+      </div>
+    {/if}
+  {/snippet}
 </Collapsible.Content>

package/dist/components/collapsible/components/collapsible-trigger.svelte

@@ -1,29 +1,29 @@
 <script lang="ts">
-	import { Collapsible } from 'bits-ui';
-	import { Icon } from '../../icons';
-	import type { CollapsibleTriggerProps } from '../types';
+  import { Collapsible } from 'bits-ui';
+  import { Icon } from '../../icons';
+  import type { CollapsibleTriggerProps } from '../types';
 
-	let { children, withIcon = true, ...props }: CollapsibleTriggerProps = $props();
+  let { children, withIcon = true, ...props }: CollapsibleTriggerProps = $props();
 </script>
 
 <Collapsible.Trigger {...props} class="transition-all {props.class}">
-	<div class="container h-8">
-		{@render children()}
-		{#if withIcon}
-			<Icon iconName="CaretDown" color="secondary" class="icon z-[-1] m-1" />
-		{/if}
-	</div>
+  <div class="container h-8">
+    {@render children()}
+    {#if withIcon}
+      <Icon iconName="CaretDown" color="secondary" class="icon z-[-1] m-1" />
+    {/if}
+  </div>
 </Collapsible.Trigger>
 
 <style>
-	:global([data-state='open']) :global(.icon) {
+  :global([data-state='open']) :global(.icon) {
 
     --tw-rotate: 180deg;
 
     transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
 }
 
-	.container {
+  .container {
 
     display: flex;