@reshape-biotech/design-system 1.2.6 → 2.0.0

package/dist/components/drawer/Drawer.svelte

@@ -1,41 +1,41 @@
 <script lang="ts">
-	import type { Snippet } from 'svelte';
-	import DrawerLabel from './DrawerLabel.svelte';
+  import type { Snippet } from 'svelte';
+  import DrawerLabel from './DrawerLabel.svelte';
 
-	interface Props {
-		id: string;
-		controlled?: boolean;
-		// Open only works when controlled is true
-		open?: boolean;
-		side?: 'left' | 'right';
-		trigger?: Snippet;
-		content: Snippet;
-	}
+  interface Props {
+    id: string;
+    controlled?: boolean;
+    // Open only works when controlled is true
+    open?: boolean;
+    side?: 'left' | 'right';
+    trigger?: Snippet;
+    content: Snippet;
+  }
 
-	let {
-		id,
-		controlled = false,
-		open = $bindable(false),
-		side = 'right',
-		trigger,
-		content
-	}: Props = $props();
+  let {
+    id,
+    controlled = false,
+    open = $bindable(false),
+    side = 'right',
+    trigger,
+    content,
+  }: Props = $props();
 </script>
 
 <div class={`drawer-auto-gutter drawer`} class:drawer-end={side === 'right'}>
-	{#if controlled}
-		<input {id} type="checkbox" class="drawer-toggle" bind:checked={open} />
-	{:else}
-		<input {id} type="checkbox" class="drawer-toggle" />
-	{/if}
+  {#if controlled}
+    <input {id} type="checkbox" class="drawer-toggle" bind:checked={open} />
+  {:else}
+    <input {id} type="checkbox" class="drawer-toggle" />
+  {/if}
 
-	<div class="drawer-content">
-		{@render trigger?.()}
-	</div>
-	<div class="drawer-side" inert={controlled ? !open : false}>
-		<label for={id} aria-label="close sidebar" class="drawer-overlay"></label>
-		<div class="h-screen bg-surface sm:w-[460px]">
-			{@render content()}
-		</div>
-	</div>
+  <div class="drawer-content">
+    {@render trigger?.()}
+  </div>
+  <div class="drawer-side" inert={controlled ? !open : false}>
+    <label for={id} aria-label="close sidebar" class="drawer-overlay"></label>
+    <div class="h-screen bg-surface sm:w-[460px]">
+      {@render content()}
+    </div>
+  </div>
 </div>

package/dist/components/drawer/DrawerLabel.svelte

@@ -1,19 +1,19 @@
 <script lang="ts">
-	import type { Snippet } from 'svelte';
+  import type { Snippet } from 'svelte';
 
-	interface Props {
-		id: string;
-		classes?: string;
-		children: Snippet;
-	}
+  interface Props {
+    id: string;
+    classes?: string;
+    children: Snippet;
+  }
 
-	let { id, classes = '', children }: Props = $props();
+  let { id, classes = '', children }: Props = $props();
 </script>
 
 <label for={id} class={`${classes}`}>{@render children()}</label>
 
 <style>
-	label {
+  label {
 
     display: flex;
 
@@ -48,12 +48,12 @@
     box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
 }
 
-	label:not(:focus-within):hover {
+  label:not(:focus-within):hover {
 
     border-color: #5750ee40
 }
 
-	label:focus-within {
+  label:focus-within {
 
     --tw-border-opacity: 1;
 

package/dist/components/dropdown/Dropdown.stories.svelte

@@ -1,236 +1,236 @@
 <script module>
-	import { defineMeta } from '@storybook/addon-svelte-csf';
-	import Dropdown from './Dropdown.svelte';
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+  import Dropdown from './Dropdown.svelte';
 
-	const { Story } = defineMeta({
-		component: Dropdown,
-		title: 'Design System/Dropdown',
-		tags: ['autodocs']
-	});
+  const { Story } = defineMeta({
+    component: Dropdown,
+    title: 'Design System/Dropdown',
+    tags: ['autodocs'],
+  });
 </script>
 
 <Story name="Primary" asChild>
-	<div class="py-12">
-		<Dropdown>
-			{#snippet trigger({ Trigger })}
-				<Trigger>Dropdown</Trigger>
-			{/snippet}
-			{#snippet content({ DropdownMenu })}
-				<div>
-					<DropdownMenu class="w-full">
-						<li>
-							<p>1st item</p>
-						</li>
-						<li>
-							<p>2nd item</p>
-						</li>
-					</DropdownMenu>
-				</div>
-			{/snippet}
-		</Dropdown>
-	</div>
+  <div class="py-12">
+    <Dropdown>
+      {#snippet trigger({ Trigger })}
+        <Trigger>Dropdown</Trigger>
+      {/snippet}
+      {#snippet content({ DropdownMenu })}
+        <div>
+          <DropdownMenu class="w-full">
+            <li>
+              <p>1st item</p>
+            </li>
+            <li>
+              <p>2nd item</p>
+            </li>
+          </DropdownMenu>
+        </div>
+      {/snippet}
+    </Dropdown>
+  </div>
 </Story>
 
 <Story name="OutlinedButton" asChild>
-	<div class="py-12">
-		<Dropdown>
-			{#snippet trigger({ OutlinedButton })}
-				<OutlinedButton>Dropdown</OutlinedButton>
-			{/snippet}
-			{#snippet content({ DropdownMenu })}
-				<div>
-					<DropdownMenu class="w-full">
-						<li>
-							<p>1st item</p>
-						</li>
-						<li>
-							<p>2nd item</p>
-						</li>
-					</DropdownMenu>
-				</div>
-			{/snippet}
-		</Dropdown>
-	</div>
+  <div class="py-12">
+    <Dropdown>
+      {#snippet trigger({ OutlinedButton })}
+        <OutlinedButton>Dropdown</OutlinedButton>
+      {/snippet}
+      {#snippet content({ DropdownMenu })}
+        <div>
+          <DropdownMenu class="w-full">
+            <li>
+              <p>1st item</p>
+            </li>
+            <li>
+              <p>2nd item</p>
+            </li>
+          </DropdownMenu>
+        </div>
+      {/snippet}
+    </Dropdown>
+  </div>
 </Story>
 
 <Story name="Secondary" asChild>
-	<div class="py-12">
-		<Dropdown>
-			{#snippet trigger({ Trigger })}
-				<Trigger variant="secondary">Dropdown</Trigger>
-			{/snippet}
-			{#snippet content({ DropdownMenu })}
-				<div>
-					<DropdownMenu class="w-full">
-						<li>
-							<p>1st item</p>
-						</li>
-						<li>
-							<p>2nd item</p>
-						</li>
-					</DropdownMenu>
-				</div>
-			{/snippet}
-		</Dropdown>
-	</div>
+  <div class="py-12">
+    <Dropdown>
+      {#snippet trigger({ Trigger })}
+        <Trigger variant="secondary">Dropdown</Trigger>
+      {/snippet}
+      {#snippet content({ DropdownMenu })}
+        <div>
+          <DropdownMenu class="w-full">
+            <li>
+              <p>1st item</p>
+            </li>
+            <li>
+              <p>2nd item</p>
+            </li>
+          </DropdownMenu>
+        </div>
+      {/snippet}
+    </Dropdown>
+  </div>
 </Story>
 <Story name="Transparent" asChild>
-	<div class="py-12">
-		<Dropdown>
-			{#snippet trigger({ Trigger })}
-				<Trigger variant="transparent">Dropdown</Trigger>
-			{/snippet}
-			{#snippet content({ DropdownMenu })}
-				<div>
-					<DropdownMenu class="w-full">
-						<li>
-							<p>1st item</p>
-						</li>
-						<li>
-							<p>2nd item</p>
-						</li>
-					</DropdownMenu>
-				</div>
-			{/snippet}
-		</Dropdown>
-	</div>
+  <div class="py-12">
+    <Dropdown>
+      {#snippet trigger({ Trigger })}
+        <Trigger variant="transparent">Dropdown</Trigger>
+      {/snippet}
+      {#snippet content({ DropdownMenu })}
+        <div>
+          <DropdownMenu class="w-full">
+            <li>
+              <p>1st item</p>
+            </li>
+            <li>
+              <p>2nd item</p>
+            </li>
+          </DropdownMenu>
+        </div>
+      {/snippet}
+    </Dropdown>
+  </div>
 </Story>
 <Story name="Danger" asChild>
-	<div class="py-12">
-		<Dropdown>
-			{#snippet trigger({ Trigger })}
-				<Trigger variant="danger">Dropdown</Trigger>
-			{/snippet}
-			{#snippet content({ DropdownMenu })}
-				<div>
-					<DropdownMenu class="w-full">
-						<li>
-							<p>1st item</p>
-						</li>
-						<li>
-							<p>2nd item</p>
-						</li>
-					</DropdownMenu>
-				</div>
-			{/snippet}
-		</Dropdown>
-	</div>
+  <div class="py-12">
+    <Dropdown>
+      {#snippet trigger({ Trigger })}
+        <Trigger variant="danger">Dropdown</Trigger>
+      {/snippet}
+      {#snippet content({ DropdownMenu })}
+        <div>
+          <DropdownMenu class="w-full">
+            <li>
+              <p>1st item</p>
+            </li>
+            <li>
+              <p>2nd item</p>
+            </li>
+          </DropdownMenu>
+        </div>
+      {/snippet}
+    </Dropdown>
+  </div>
 </Story>
 
 <Story name="Sides" asChild>
-	<div class="flex h-screen w-full items-center justify-center">
-		<div class="flex flex-1 justify-between">
-			<Dropdown open side="dropdown-bottom">
-				{#snippet trigger({ Trigger })}
-					<Trigger>Bottom</Trigger>
-				{/snippet}
+  <div class="flex h-screen w-full items-center justify-center">
+    <div class="flex flex-1 justify-between">
+      <Dropdown open side="dropdown-bottom">
+        {#snippet trigger({ Trigger })}
+          <Trigger>Bottom</Trigger>
+        {/snippet}
 
-				{#snippet content({ DropdownMenu })}
-					<div>
-						<DropdownMenu class="w-[120px]">
-							<li>
-								<p>1st item</p>
-							</li>
-							<li>
-								<p>2nd item</p>
-							</li>
-						</DropdownMenu>
-					</div>
-				{/snippet}
-			</Dropdown>
-			<Dropdown open side="dropdown-top">
-				{#snippet trigger({ Trigger })}
-					<Trigger>Top</Trigger>
-				{/snippet}
-				{#snippet content({ DropdownMenu })}
-					<div>
-						<DropdownMenu class="w-[120px]">
-							<li>
-								<p>1st item</p>
-							</li>
-							<li>
-								<p>2nd item</p>
-							</li>
-						</DropdownMenu>
-					</div>
-				{/snippet}
-			</Dropdown>
-			<Dropdown open side="dropdown-right">
-				{#snippet trigger({ Trigger })}
-					<Trigger>Right</Trigger>
-				{/snippet}
-				{#snippet content({ DropdownMenu })}
-					<div>
-						<DropdownMenu class="w-[120px]">
-							<li>
-								<p>1st item</p>
-							</li>
-							<li>
-								<p>2nd item</p>
-							</li>
-						</DropdownMenu>
-					</div>
-				{/snippet}
-			</Dropdown>
-			<Dropdown open side="dropdown-left">
-				{#snippet trigger({ Trigger })}
-					<Trigger>Left</Trigger>
-				{/snippet}
-				{#snippet content({ DropdownMenu })}
-					<div>
-						<DropdownMenu class="w-[120px]">
-							<li>
-								<p>1st item</p>
-							</li>
-							<li>
-								<p>2nd item</p>
-							</li>
-						</DropdownMenu>
-					</div>
-				{/snippet}
-			</Dropdown>
-		</div>
-	</div>
+        {#snippet content({ DropdownMenu })}
+          <div>
+            <DropdownMenu class="w-[120px]">
+              <li>
+                <p>1st item</p>
+              </li>
+              <li>
+                <p>2nd item</p>
+              </li>
+            </DropdownMenu>
+          </div>
+        {/snippet}
+      </Dropdown>
+      <Dropdown open side="dropdown-top">
+        {#snippet trigger({ Trigger })}
+          <Trigger>Top</Trigger>
+        {/snippet}
+        {#snippet content({ DropdownMenu })}
+          <div>
+            <DropdownMenu class="w-[120px]">
+              <li>
+                <p>1st item</p>
+              </li>
+              <li>
+                <p>2nd item</p>
+              </li>
+            </DropdownMenu>
+          </div>
+        {/snippet}
+      </Dropdown>
+      <Dropdown open side="dropdown-right">
+        {#snippet trigger({ Trigger })}
+          <Trigger>Right</Trigger>
+        {/snippet}
+        {#snippet content({ DropdownMenu })}
+          <div>
+            <DropdownMenu class="w-[120px]">
+              <li>
+                <p>1st item</p>
+              </li>
+              <li>
+                <p>2nd item</p>
+              </li>
+            </DropdownMenu>
+          </div>
+        {/snippet}
+      </Dropdown>
+      <Dropdown open side="dropdown-left">
+        {#snippet trigger({ Trigger })}
+          <Trigger>Left</Trigger>
+        {/snippet}
+        {#snippet content({ DropdownMenu })}
+          <div>
+            <DropdownMenu class="w-[120px]">
+              <li>
+                <p>1st item</p>
+              </li>
+              <li>
+                <p>2nd item</p>
+              </li>
+            </DropdownMenu>
+          </div>
+        {/snippet}
+      </Dropdown>
+    </div>
+  </div>
 </Story>
 
 <Story name="End align" asChild>
-	<div class="py-12">
-		<Dropdown alignEnd open>
-			{#snippet trigger({ Trigger })}
-				<Trigger>Dropdown</Trigger>
-			{/snippet}
-			{#snippet content({ DropdownMenu })}
-				<div>
-					<DropdownMenu>
-						<li>
-							<p>1st item</p>
-						</li>
-						<li>
-							<p>2nd item</p>
-						</li>
-					</DropdownMenu>
-				</div>
-			{/snippet}
-		</Dropdown>
-	</div>
+  <div class="py-12">
+    <Dropdown alignEnd open>
+      {#snippet trigger({ Trigger })}
+        <Trigger>Dropdown</Trigger>
+      {/snippet}
+      {#snippet content({ DropdownMenu })}
+        <div>
+          <DropdownMenu>
+            <li>
+              <p>1st item</p>
+            </li>
+            <li>
+              <p>2nd item</p>
+            </li>
+          </DropdownMenu>
+        </div>
+      {/snippet}
+    </Dropdown>
+  </div>
 </Story>
 
 <Story name="Other content" asChild>
-	<div class="py-12">
-		<Dropdown alignEnd open>
-			{#snippet trigger({ Trigger })}
-				<Trigger>Dropdown</Trigger>
-			{/snippet}
-			{#snippet content({ DropdownContent })}
-				<div>
-					<DropdownContent>
-						<div>
-							<p>This is a dropdown with other content</p>
-							<p>It doesn't have to be list items</p>
-						</div>
-					</DropdownContent>
-				</div>
-			{/snippet}
-		</Dropdown>
-	</div>
+  <div class="py-12">
+    <Dropdown alignEnd open>
+      {#snippet trigger({ Trigger })}
+        <Trigger>Dropdown</Trigger>
+      {/snippet}
+      {#snippet content({ DropdownContent })}
+        <div>
+          <DropdownContent>
+            <div>
+              <p>This is a dropdown with other content</p>
+              <p>It doesn't have to be list items</p>
+            </div>
+          </DropdownContent>
+        </div>
+      {/snippet}
+    </Dropdown>
+  </div>
 </Story>