@reshape-biotech/design-system 1.2.6 → 2.0.0

package/dist/components/combobox/components/combobox-add.svelte

@@ -1,20 +1,20 @@
 <script lang="ts">
-	import { Icon } from '../../icons';
-	import type { Snippet } from 'svelte';
-	import type { HTMLButtonAttributes } from 'svelte/elements';
+  import { Icon } from '../../icons';
+  import type { Snippet } from 'svelte';
+  import type { HTMLButtonAttributes } from 'svelte/elements';
 
-	type Props = { children: Snippet } & HTMLButtonAttributes;
+  type Props = { children: Snippet } & HTMLButtonAttributes;
 
-	let { children, ...props }: Props = $props();
+  let { children, ...props }: Props = $props();
 </script>
 
 <button {...props}>
-	<Icon iconName="Plus" class="text-icon-secondary" />
-	{@render children()}
+  <Icon iconName="Plus" class="text-icon-secondary" />
+  {@render children()}
 </button>
 
 <style>
-	button {
+  button {
     margin-left: 0.5rem;
     display: flex;
     height: 2.5rem;

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

@@ -1,49 +1,49 @@
 <script lang="ts">
-	import { Combobox } from 'bits-ui';
-	import type { ComboboxContentProps } from '../types';
-	import { Icon } from '../../icons';
-
-	let {
-		children,
-		class: className,
-		showScroll = true,
-		portalled = true,
-		header,
-		footer,
-		...props
-	}: ComboboxContentProps = $props();
+  import { Combobox } from 'bits-ui';
+  import type { ComboboxContentProps } from '../types';
+  import { Icon } from '../../icons';
+
+  let {
+    children,
+    class: className,
+    showScroll = true,
+    portalled = true,
+    header,
+    footer,
+    ...props
+  }: ComboboxContentProps = $props();
 </script>
 
 {#snippet content()}
-	<Combobox.Content {...props} class={className}>
-		{@render header?.()}
-		{#if showScroll}
-			<Combobox.ScrollUpButton class="flex justify-center">
-				<Icon iconName="CaretUp" />
-			</Combobox.ScrollUpButton>
-			<Combobox.Viewport class="p-1">
-				{@render children()}
-			</Combobox.Viewport>
-			<Combobox.ScrollDownButton class="flex justify-center">
-				<Icon iconName="CaretDown" />
-			</Combobox.ScrollDownButton>
-		{:else}
-			{@render children()}
-		{/if}
-		{@render footer?.()}
-	</Combobox.Content>
+  <Combobox.Content {...props} class={className}>
+    {@render header?.()}
+    {#if showScroll}
+      <Combobox.ScrollUpButton class="flex justify-center">
+        <Icon iconName="CaretUp" />
+      </Combobox.ScrollUpButton>
+      <Combobox.Viewport class="p-1">
+        {@render children()}
+      </Combobox.Viewport>
+      <Combobox.ScrollDownButton class="flex justify-center">
+        <Icon iconName="CaretDown" />
+      </Combobox.ScrollDownButton>
+    {:else}
+      {@render children()}
+    {/if}
+    {@render footer?.()}
+  </Combobox.Content>
 {/snippet}
 
 {#if portalled}
-	<Combobox.Portal>
-		{@render content()}
-	</Combobox.Portal>
+  <Combobox.Portal>
+    {@render content()}
+  </Combobox.Portal>
 {:else}
-	{@render content()}
+  {@render content()}
 {/if}
 
 <style>
-	:global([data-combobox-content]) {
+  :global([data-combobox-content]) {
 
     width: 100%;
 
@@ -66,7 +66,7 @@
     outline-offset: 2px
 }
 
-	:global([data-combobox-input]) {
+  :global([data-combobox-input]) {
 
     width: 100%;
 
@@ -91,7 +91,7 @@
     outline-offset: 2px
 }
 
-	:global([data-combobox-item]) {
+  :global([data-combobox-item]) {
 
     display: flex;
 
@@ -115,12 +115,12 @@
 
     line-height: 1.25rem
 }
-	:global([data-combobox-item][data-highlighted]) {
+  :global([data-combobox-item][data-highlighted]) {
 
     background-color: #12192a0A
 }
 
-	:global([data-combobox-group-label]) {
+  :global([data-combobox-group-label]) {
 
     padding-left: 0.75rem;
 

package/dist/components/combobox/components/combobox-indicator.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { Icon } from '../../icons';
+  import { Icon } from '../../icons';
 </script>
 
 <Icon iconName="Check" />

package/dist/components/combobox/index.d.ts

@@ -1,5 +1,5 @@
 import { Combobox } from 'bits-ui';
-export declare const Root: import("svelte").Component<import("bits-ui").ComboboxRootPropsWithoutHTML, {}, "open" | "value">;
+export declare const Root: import("svelte").Component<import("bits-ui").ComboboxRootPropsWithoutHTML, {}, "value" | "open">;
 export declare const Item: import("svelte").Component<Combobox.ItemProps, {}, "ref">;
 export declare const Group: import("svelte").Component<Combobox.GroupProps, {}, "ref">;
 export declare const GroupHeading: import("svelte").Component<Combobox.GroupHeadingProps, {}, "ref">;

package/dist/components/datepicker/DatePicker.stories.svelte

@@ -1,53 +1,53 @@
 <script module lang="ts">
-	import { defineMeta } from '@storybook/addon-svelte-csf';
-	import { userEvent, within } from '@storybook/test';
-	import { DateTime } from 'luxon';
-	import DatePicker from './DatePicker.svelte';
-	import Dropdown from '../dropdown/Dropdown.svelte';
-	import { Icon } from '../icons';
-
-	const { Story } = defineMeta({
-		component: DatePicker,
-		title: 'Design System/DatePicker',
-		tags: ['autodocs'],
-		parameters: {
-			design: {
-				type: 'figma',
-				url: 'https://www.figma.com/design/WkxhG4H2Ybc7STFi1VJIau/%F0%9F%92%A0-Reshape-Design-System%3A-V1?node-id=4381-32638&t=Epi2Ul7Cw7sCJpGy-0'
-			}
-		}
-	});
-
-	const staticDate = DateTime.local(2023, 10, 15);
-
-	let selectedDate = $state<DateTime | undefined>(undefined);
-	let loggedDate = $state<string | undefined>(undefined);
-
-	function handleDateSelection(date: DateTime) {
-		loggedDate = date.toFormat('yyyy-MM-dd');
-	}
-
-	// States for the dropdown story
-	let dropdownDate = $state<DateTime | undefined>(undefined);
-	let displayText = $state('Select a date');
-	let isOpen = $state(false);
-
-	// States for the form test
-	let formDropdownDate = $state<DateTime | undefined>(undefined);
-	let formDisplayText = $state('Select a date');
-	let formIsOpen = $state(false);
-
-	function handleDropdownSelection(date: DateTime) {
-		dropdownDate = date;
-		displayText = date.toFormat('MMM dd, yyyy');
-		isOpen = false;
-	}
-
-	function handleFormDateSelection(date: DateTime) {
-		formDropdownDate = date;
-		formDisplayText = date.toFormat('MMM dd, yyyy');
-		formIsOpen = false;
-	}
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+  import { userEvent, within } from '@storybook/test';
+  import { DateTime } from 'luxon';
+  import DatePicker from './DatePicker.svelte';
+  import Dropdown from '../dropdown/Dropdown.svelte';
+  import { Icon } from '../icons';
+
+  const { Story } = defineMeta({
+    component: DatePicker,
+    title: 'Design System/DatePicker',
+    tags: ['autodocs'],
+    parameters: {
+      design: {
+        type: 'figma',
+        url: 'https://www.figma.com/design/WkxhG4H2Ybc7STFi1VJIau/%F0%9F%92%A0-Reshape-Design-System%3A-V1?node-id=4381-32638&t=Epi2Ul7Cw7sCJpGy-0',
+      },
+    },
+  });
+
+  const staticDate = DateTime.local(2023, 10, 15);
+
+  let selectedDate = $state<DateTime | undefined>(undefined);
+  let loggedDate = $state<string | undefined>(undefined);
+
+  function handleDateSelection(date: DateTime) {
+    loggedDate = date.toFormat('yyyy-MM-dd');
+  }
+
+  // States for the dropdown story
+  let dropdownDate = $state<DateTime | undefined>(undefined);
+  let displayText = $state('Select a date');
+  let isOpen = $state(false);
+
+  // States for the form test
+  let formDropdownDate = $state<DateTime | undefined>(undefined);
+  let formDisplayText = $state('Select a date');
+  let formIsOpen = $state(false);
+
+  function handleDropdownSelection(date: DateTime) {
+    dropdownDate = date;
+    displayText = date.toFormat('MMM dd, yyyy');
+    isOpen = false;
+  }
+
+  function handleFormDateSelection(date: DateTime) {
+    formDropdownDate = date;
+    formDisplayText = date.toFormat('MMM dd, yyyy');
+    formIsOpen = false;
+  }
 </script>
 
 <Story name="Default" args={{ selectedDate: undefined }} />
@@ -55,168 +55,168 @@
 <Story name="With Selected Date" args={{ selectedDate: staticDate }} />
 
 <Story name="With Date Change Handler" asChild>
-	<div class="p-4">
-		<div class="mb-4">
-			<DatePicker {selectedDate} onClick={handleDateSelection} />
-		</div>
-		{#if loggedDate}
-			<div class="mt-4 rounded bg-neutral p-2">
-				<p>Selected date: <strong>{loggedDate}</strong></p>
-			</div>
-		{/if}
-	</div>
+  <div class="p-4">
+    <div class="mb-4">
+      <DatePicker {selectedDate} onClick={handleDateSelection} />
+    </div>
+    {#if loggedDate}
+      <div class="mt-4 rounded bg-neutral p-2">
+        <p>Selected date: <strong>{loggedDate}</strong></p>
+      </div>
+    {/if}
+  </div>
 </Story>
 
 <Story name="Month Navigation" asChild>
-	<div class="p-4">
-		<DatePicker selectedDate={staticDate} />
-		<div class="mt-4 text-sm text-tertiary">
-			<p>Click the arrow buttons to navigate between months</p>
-		</div>
-	</div>
+  <div class="p-4">
+    <DatePicker selectedDate={staticDate} />
+    <div class="mt-4 text-sm text-tertiary">
+      <p>Click the arrow buttons to navigate between months</p>
+    </div>
+  </div>
 </Story>
 
 <Story
-	name="Interaction Test"
-	asChild
-	play={async ({ canvasElement }) => {
-		const canvas = within(canvasElement);
-
-		// Click next month button
-		const nextMonthButton = canvas.getAllByRole('button')[1]; // Second button is next month
-		await userEvent.click(nextMonthButton);
-
-		// Wait a moment
-		await new Promise((resolve) => setTimeout(resolve, 300));
-
-		// Click a date (the 15th of the month)
-		const dateButtons = canvas.getAllByRole('button').filter((button) => {
-			// Find buttons with just numbers as their text content
-			const text = button.textContent?.trim();
-			return text && !isNaN(Number(text));
-		});
-
-		// Find the button with text "15" if it exists
-		const date15Button = dateButtons.find((button) => button.textContent?.trim() === '15');
-
-		if (date15Button) {
-			await userEvent.click(date15Button);
-		}
-	}}
+  name="Interaction Test"
+  asChild
+  play={async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+
+    // Click next month button
+    const nextMonthButton = canvas.getAllByRole('button')[1]; // Second button is next month
+    await userEvent.click(nextMonthButton);
+
+    // Wait a moment
+    await new Promise((resolve) => setTimeout(resolve, 300));
+
+    // Click a date (the 15th of the month)
+    const dateButtons = canvas.getAllByRole('button').filter((button) => {
+      // Find buttons with just numbers as their text content
+      const text = button.textContent?.trim();
+      return text && !isNaN(Number(text));
+    });
+
+    // Find the button with text "15" if it exists
+    const date15Button = dateButtons.find((button) => button.textContent?.trim() === '15');
+
+    if (date15Button) {
+      await userEvent.click(date15Button);
+    }
+  }}
 >
-	<div class="p-4">
-		<DatePicker bind:selectedDate />
-		{#if selectedDate}
-			<div class="mt-4 rounded bg-neutral p-2">
-				<p>Selected date: <strong>{selectedDate.toFormat('yyyy-MM-dd')}</strong></p>
-			</div>
-		{/if}
-	</div>
+  <div class="p-4">
+    <DatePicker bind:selectedDate />
+    {#if selectedDate}
+      <div class="mt-4 rounded bg-neutral p-2">
+        <p>Selected date: <strong>{selectedDate.toFormat('yyyy-MM-dd')}</strong></p>
+      </div>
+    {/if}
+  </div>
 </Story>
 
 <Story name="Multiple DatePickers" asChild>
-	<div class="flex flex-col gap-4 p-4 md:flex-row">
-		<div>
-			<h3 class="mb-2 text-sm font-medium">Start Date</h3>
-			<DatePicker selectedDate={staticDate.minus({ days: 7 })} />
-		</div>
-		<div>
-			<h3 class="mb-2 text-sm font-medium">End Date</h3>
-			<DatePicker selectedDate={staticDate} />
-		</div>
-	</div>
+  <div class="flex flex-col gap-4 p-4 md:flex-row">
+    <div>
+      <h3 class="mb-2 text-sm font-medium">Start Date</h3>
+      <DatePicker selectedDate={staticDate.minus({ days: 7 })} />
+    </div>
+    <div>
+      <h3 class="mb-2 text-sm font-medium">End Date</h3>
+      <DatePicker selectedDate={staticDate} />
+    </div>
+  </div>
 </Story>
 
 <Story name="In Dropdown" asChild>
-	<div class="p-4">
-		<Dropdown bind:open={isOpen} side="dropdown-bottom" alignEnd={false}>
-			{#snippet trigger({ Trigger })}
-				<Trigger>
-					<Icon iconName="CalendarBlank" class="mr-2" size={16} />
-					{displayText}
-				</Trigger>
-			{/snippet}
-
-			{#snippet content()}
-				<DatePicker selectedDate={dropdownDate} onClick={handleDropdownSelection} />
-			{/snippet}
-		</Dropdown>
-
-		{#if dropdownDate}
-			<div class="mt-4 rounded bg-neutral p-2">
-				<p>You selected: <strong>{dropdownDate.toFormat('MMMM dd, yyyy')}</strong></p>
-			</div>
-		{/if}
-	</div>
+  <div class="p-4">
+    <Dropdown bind:open={isOpen} side="dropdown-bottom" alignEnd={false}>
+      {#snippet trigger({ Trigger })}
+        <Trigger>
+          <Icon iconName="CalendarBlank" class="mr-2" size={16} />
+          {displayText}
+        </Trigger>
+      {/snippet}
+
+      {#snippet content()}
+        <DatePicker selectedDate={dropdownDate} onClick={handleDropdownSelection} />
+      {/snippet}
+    </Dropdown>
+
+    {#if dropdownDate}
+      <div class="mt-4 rounded bg-neutral p-2">
+        <p>You selected: <strong>{dropdownDate.toFormat('MMMM dd, yyyy')}</strong></p>
+      </div>
+    {/if}
+  </div>
 </Story>
 
 <Story
-	name="Form Submit Prevention Test"
-	asChild
-	play={async ({ canvasElement }) => {
-		const canvas = within(canvasElement);
-
-		// Setup spy on form submission
-		const form = canvas.getByTestId('test-form');
-		let submissionCount = 0;
-		form.addEventListener('submit', (e) => {
-			e.preventDefault();
-			submissionCount++;
-			console.log('Form was submitted!');
-		});
-
-		// First open the dropdown
-		const dropdownTrigger = canvas.getByTestId('form-date-trigger');
-		await userEvent.click(dropdownTrigger);
-
-		// Click prev/next month and verify no submission
-		const buttons = document.querySelectorAll('button');
-		const prevMonthButton = Array.from(buttons).find((btn) => btn.innerHTML.includes('CaretLeft'));
-		const nextMonthButton = Array.from(buttons).find((btn) => btn.innerHTML.includes('CaretRight'));
-
-		if (prevMonthButton) {
-			await userEvent.click(prevMonthButton);
-			console.log('Clicked prev month, submission count:', submissionCount);
-		}
-
-		if (nextMonthButton) {
-			await userEvent.click(nextMonthButton);
-			console.log('Clicked next month, submission count:', submissionCount);
-		}
-
-		// Success message if no form submission occurred
-		if (submissionCount === 0) {
-			console.log('TEST PASSED: Month navigation did not trigger form submission');
-		} else {
-			console.error('TEST FAILED: Month navigation triggered form submission');
-		}
-	}}
+  name="Form Submit Prevention Test"
+  asChild
+  play={async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+
+    // Setup spy on form submission
+    const form = canvas.getByTestId('test-form');
+    let submissionCount = 0;
+    form.addEventListener('submit', (e) => {
+      e.preventDefault();
+      submissionCount++;
+      console.log('Form was submitted!');
+    });
+
+    // First open the dropdown
+    const dropdownTrigger = canvas.getByTestId('form-date-trigger');
+    await userEvent.click(dropdownTrigger);
+
+    // Click prev/next month and verify no submission
+    const buttons = document.querySelectorAll('button');
+    const prevMonthButton = Array.from(buttons).find((btn) => btn.innerHTML.includes('CaretLeft'));
+    const nextMonthButton = Array.from(buttons).find((btn) => btn.innerHTML.includes('CaretRight'));
+
+    if (prevMonthButton) {
+      await userEvent.click(prevMonthButton);
+      console.log('Clicked prev month, submission count:', submissionCount);
+    }
+
+    if (nextMonthButton) {
+      await userEvent.click(nextMonthButton);
+      console.log('Clicked next month, submission count:', submissionCount);
+    }
+
+    // Success message if no form submission occurred
+    if (submissionCount === 0) {
+      console.log('TEST PASSED: Month navigation did not trigger form submission');
+    } else {
+      console.error('TEST FAILED: Month navigation triggered form submission');
+    }
+  }}
 >
-	<div class="p-4">
-		<form data-testid="test-form" onsubmit={(e) => e.preventDefault()}>
-			<div class="mb-4">
-				<label for="name" class="mb-1 block text-sm font-medium">Name</label>
-				<input id="name" type="text" class="input input-bordered w-full" />
-			</div>
-
-			<div class="mb-4">
-				<Dropdown bind:open={formIsOpen} side="dropdown-bottom" alignEnd={false}>
-					{#snippet trigger({ Trigger })}
-						<Trigger>
-							<div data-testid="form-date-trigger" class="flex items-center gap-2">
-								<Icon iconName="CalendarBlank" class="mr-2" size={16} />
-								{formDisplayText}
-							</div>
-						</Trigger>
-					{/snippet}
-
-					{#snippet content()}
-						<DatePicker selectedDate={formDropdownDate} onClick={handleFormDateSelection} />
-					{/snippet}
-				</Dropdown>
-			</div>
-
-			<button type="submit" class="btn btn-primary mt-4">Submit Form</button>
-		</form>
-	</div>
+  <div class="p-4">
+    <form data-testid="test-form" onsubmit={(e) => e.preventDefault()}>
+      <div class="mb-4">
+        <label for="name" class="mb-1 block text-sm font-medium">Name</label>
+        <input id="name" type="text" class="input input-bordered w-full" />
+      </div>
+
+      <div class="mb-4">
+        <Dropdown bind:open={formIsOpen} side="dropdown-bottom" alignEnd={false}>
+          {#snippet trigger({ Trigger })}
+            <Trigger>
+              <div data-testid="form-date-trigger" class="flex items-center gap-2">
+                <Icon iconName="CalendarBlank" class="mr-2" size={16} />
+                {formDisplayText}
+              </div>
+            </Trigger>
+          {/snippet}
+
+          {#snippet content()}
+            <DatePicker selectedDate={formDropdownDate} onClick={handleFormDateSelection} />
+          {/snippet}
+        </Dropdown>
+      </div>
+
+      <button type="submit" class="btn btn-primary mt-4">Submit Form</button>
+    </form>
+  </div>
 </Story>