@reshape-biotech/design-system 1.2.6 → 2.0.0

package/dist/components/datepicker/DatePicker.svelte

@@ -1,175 +1,175 @@
 <script lang="ts">
-	import { run } from 'svelte/legacy';
-
-	import { DateTime, type MonthNumbers } from 'luxon';
-
-	import IconButton from '../icon-button/IconButton.svelte';
-	import { Icon } from '../icons';
-
-	interface Props {
-		selectedDate: DateTime | undefined;
-		onClick?: any;
-	}
-
-	let { selectedDate = $bindable(), onClick = (date: DateTime) => {} }: Props = $props();
-
-	const arrDays = ['Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa', 'Su'];
-	let today = DateTime.local();
-	const currentDay = today.day;
-	const currentMonth = today.month;
-	const currentYear = today.year;
-	let shownMonth = $state(today.month);
-	let shownYear = $state(today.year);
-	let selectedDay: number | undefined = $state();
-	let selectedMonth: number | undefined = $state();
-	let selectedYear: number | undefined = $state();
-	let rows = $state(initRows());
-
-	run(() => {
-		if (selectedDate) {
-			selectedDay = selectedDate.day;
-			selectedMonth = selectedDate.month;
-			selectedYear = selectedDate.year;
-		}
-	});
-
-	affectedRows();
-
-	function initRows() {
-		return [
-			[0, 0, 0, 0, 0, 0, 0],
-			[0, 0, 0, 0, 0, 0, 0],
-			[0, 0, 0, 0, 0, 0, 0],
-			[0, 0, 0, 0, 0, 0, 0],
-			[0, 0, 0, 0, 0, 0, 0],
-			[0, 0, 0, 0, 0, 0, 0]
-		];
-	}
-
-	function affectedRows() {
-		rows = initRows();
-		const firstDayOfCurrentMonth = DateTime.local(shownYear, shownMonth, 1).weekday - 1; // 0-based index
-		const lastDayOfCurrentMonth = DateTime.local(shownYear, shownMonth, 1).daysInMonth;
-
-		if (lastDayOfCurrentMonth === undefined) {
-			// Handle invalid date
-			return;
-		}
-
-		let iRow = 0;
-		let iCol = firstDayOfCurrentMonth; // Start at the correct weekday
-		let cpt = 1; // Start from day 1
-
-		for (iRow = 0; iRow < 6; iRow++) {
-			while (iCol < 7 && cpt <= lastDayOfCurrentMonth) {
-				rows[iRow][iCol] = cpt++;
-				iCol++;
-			}
-			iCol = 0; // Reset for the next row
-		}
-	}
-
-	function previousMonth() {
-		let dt = DateTime.local(shownYear, shownMonth).minus({ months: 1 });
-		shownMonth = dt.month as MonthNumbers;
-		shownYear = dt.year;
-		affectedRows();
-	}
-
-	function nextMonth() {
-		let dt = DateTime.local(shownYear, shownMonth).plus({ months: 1 });
-		shownMonth = dt.month as MonthNumbers;
-		shownYear = dt.year;
-		affectedRows();
-	}
-
-	function selectDate(y: number, m: number, d: number) {
-		selectedDate = DateTime.local(y, m, d);
-		onClick(selectedDate);
-	}
+  import { run } from 'svelte/legacy';
+
+  import { DateTime, type MonthNumbers } from 'luxon';
+
+  import IconButton from '../icon-button/IconButton.svelte';
+  import { Icon } from '../icons';
+
+  interface Props {
+    selectedDate: DateTime | undefined;
+    onClick?: any;
+  }
+
+  let { selectedDate = $bindable(), onClick = (date: DateTime) => {} }: Props = $props();
+
+  const arrDays = ['Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa', 'Su'];
+  let today = DateTime.local();
+  const currentDay = today.day;
+  const currentMonth = today.month;
+  const currentYear = today.year;
+  let shownMonth = $state(today.month);
+  let shownYear = $state(today.year);
+  let selectedDay: number | undefined = $state();
+  let selectedMonth: number | undefined = $state();
+  let selectedYear: number | undefined = $state();
+  let rows = $state(initRows());
+
+  run(() => {
+    if (selectedDate) {
+      selectedDay = selectedDate.day;
+      selectedMonth = selectedDate.month;
+      selectedYear = selectedDate.year;
+    }
+  });
+
+  affectedRows();
+
+  function initRows() {
+    return [
+      [0, 0, 0, 0, 0, 0, 0],
+      [0, 0, 0, 0, 0, 0, 0],
+      [0, 0, 0, 0, 0, 0, 0],
+      [0, 0, 0, 0, 0, 0, 0],
+      [0, 0, 0, 0, 0, 0, 0],
+      [0, 0, 0, 0, 0, 0, 0],
+    ];
+  }
+
+  function affectedRows() {
+    rows = initRows();
+    const firstDayOfCurrentMonth = DateTime.local(shownYear, shownMonth, 1).weekday - 1; // 0-based index
+    const lastDayOfCurrentMonth = DateTime.local(shownYear, shownMonth, 1).daysInMonth;
+
+    if (lastDayOfCurrentMonth === undefined) {
+      // Handle invalid date
+      return;
+    }
+
+    let iRow = 0;
+    let iCol = firstDayOfCurrentMonth; // Start at the correct weekday
+    let cpt = 1; // Start from day 1
+
+    for (iRow = 0; iRow < 6; iRow++) {
+      while (iCol < 7 && cpt <= lastDayOfCurrentMonth) {
+        rows[iRow][iCol] = cpt++;
+        iCol++;
+      }
+      iCol = 0; // Reset for the next row
+    }
+  }
+
+  function previousMonth() {
+    let dt = DateTime.local(shownYear, shownMonth).minus({ months: 1 });
+    shownMonth = dt.month as MonthNumbers;
+    shownYear = dt.year;
+    affectedRows();
+  }
+
+  function nextMonth() {
+    let dt = DateTime.local(shownYear, shownMonth).plus({ months: 1 });
+    shownMonth = dt.month as MonthNumbers;
+    shownYear = dt.year;
+    affectedRows();
+  }
+
+  function selectDate(y: number, m: number, d: number) {
+    selectedDate = DateTime.local(y, m, d);
+    onClick(selectedDate);
+  }
 </script>
 
 <!-- svelte-ignore a11y_click_events_have_key_events -->
 <!-- svelte-ignore a11y_no_static_element_interactions -->
 <div class="calendar-container" onclick={(e) => e.stopPropagation()}>
-	<div class="calendar">
-		<div class="calendar-header">
-			<div class="month-year">
-				<IconButton onclick={previousMonth} type="button">
-					<Icon iconName="CaretLeft" color="secondary" size="0.75rem" />
-				</IconButton>
-				<h5>{DateTime.local(shownYear, shownMonth).toFormat('MMM yyyy')}</h5>
-				<IconButton onclick={nextMonth} type="button">
-					<Icon iconName="CaretRight" color="secondary" size="0.75rem" />
-				</IconButton>
-			</div>
-		</div>
-		<div class="calendar-body">
-			<table>
-				<thead>
-					<tr>
-						{#each arrDays as day}
-							<th>
-								<p>{day}</p>
-							</th>
-						{/each}
-					</tr>
-				</thead>
-				<tbody>
-					{#each rows as col}
-						<tr>
-							{#each col as dayOfMonth}
-								<td>
-									{#if dayOfMonth > 0}
-										<div class="date-container">
-											<p
-												class={dayOfMonth === selectedDay &&
-												selectedMonth === shownMonth &&
-												selectedYear === shownYear
-													? 'date selected-date'
-													: 'date'}
-											>
-												<button
-													onclick={() => {
-														selectDate(shownYear, shownMonth, dayOfMonth);
-													}}
-												>
-													{dayOfMonth}
-												</button>
-											</p>
-											{#if dayOfMonth === currentDay && shownMonth === currentMonth && shownYear === currentYear && dayOfMonth != selectedDay}
-												<svg
-													class="current-date-indicator text-accent"
-													data-chromatic="ignore"
-													xmlns="http://www.w3.org/2000/svg"
-													width="4"
-													height="4"
-													viewBox="0 0 4 4"
-												>
-													<circle cx="2" cy="2" r="2" fill="currentColor" />
-												</svg>
-											{/if}
-										</div>
-									{/if}
-								</td>
-							{/each}
-						</tr>
-					{/each}
-				</tbody>
-			</table>
-		</div>
-	</div>
+  <div class="calendar">
+    <div class="calendar-header">
+      <div class="month-year">
+        <IconButton onclick={previousMonth} type="button">
+          <Icon iconName="CaretLeft" color="secondary" size="0.75rem" />
+        </IconButton>
+        <h5>{DateTime.local(shownYear, shownMonth).toFormat('MMM yyyy')}</h5>
+        <IconButton onclick={nextMonth} type="button">
+          <Icon iconName="CaretRight" color="secondary" size="0.75rem" />
+        </IconButton>
+      </div>
+    </div>
+    <div class="calendar-body">
+      <table>
+        <thead>
+          <tr>
+            {#each arrDays as day}
+              <th>
+                <p>{day}</p>
+              </th>
+            {/each}
+          </tr>
+        </thead>
+        <tbody>
+          {#each rows as col}
+            <tr>
+              {#each col as dayOfMonth}
+                <td>
+                  {#if dayOfMonth > 0}
+                    <div class="date-container">
+                      <p
+                        class={dayOfMonth === selectedDay &&
+                        selectedMonth === shownMonth &&
+                        selectedYear === shownYear
+                          ? 'date selected-date'
+                          : 'date'}
+                      >
+                        <button
+                          onclick={() => {
+                            selectDate(shownYear, shownMonth, dayOfMonth);
+                          }}
+                        >
+                          {dayOfMonth}
+                        </button>
+                      </p>
+                      {#if dayOfMonth === currentDay && shownMonth === currentMonth && shownYear === currentYear && dayOfMonth != selectedDay}
+                        <svg
+                          class="current-date-indicator text-accent"
+                          data-chromatic="ignore"
+                          xmlns="http://www.w3.org/2000/svg"
+                          width="4"
+                          height="4"
+                          viewBox="0 0 4 4"
+                        >
+                          <circle cx="2" cy="2" r="2" fill="currentColor" />
+                        </svg>
+                      {/if}
+                    </div>
+                  {/if}
+                </td>
+              {/each}
+            </tr>
+          {/each}
+        </tbody>
+      </table>
+    </div>
+  </div>
 </div>
 
 <style>
-	.calendar-container {
+  .calendar-container {
 
     display: flex;
 
     width: 312px
 }
 
-	.calendar {
+  .calendar {
 
     overflow: hidden;
 
@@ -188,7 +188,7 @@
     box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
 }
 
-	.month-year {
+  .month-year {
 
     display: flex;
 
@@ -197,14 +197,14 @@
     justify-content: space-between
 }
 
-	.month-year .btn-custom {
+  .month-year .btn-custom {
 
     border-style: none;
 
     background-image: none
 }
 
-	.calendar-body {
+  .calendar-body {
 
     display: flex;
 
@@ -217,7 +217,7 @@
     padding-top: 22px
 }
 
-	table {
+  table {
 
     margin: 0px;
 
@@ -234,7 +234,7 @@
     padding: 0px
 }
 
-	table thead th p {
+  table thead th p {
 
     text-align: center;
 
@@ -249,15 +249,15 @@
     color: rgb(136 140 148 / var(--tw-text-opacity, 1))
 }
 
-	tr {
+  tr {
 
     height: 2.5rem;
 
     border-style: none
 }
 
-	table th,
-	table td {
+  table th,
+  table td {
 
     margin: 0px;
 
@@ -266,12 +266,12 @@
     padding: 0px
 }
 
-	.date-container {
+  .date-container {
 
     position: relative
 }
 
-	.date {
+  .date {
 
     display: flex;
 
@@ -294,12 +294,12 @@
     transition-duration: 150ms
 }
 
-	.date:hover {
+  .date:hover {
 
     background-color: #5750ee1A
 }
 
-	.date:focus {
+  .date:focus {
 
     --tw-bg-opacity: 1;
 
@@ -310,7 +310,7 @@
     color: rgb(255 255 255 / var(--tw-text-opacity, 1))
 }
 
-	.selected-date {
+  .selected-date {
 
     --tw-bg-opacity: 1;
 
@@ -321,14 +321,14 @@
     color: rgb(255 255 255 / var(--tw-text-opacity, 1))
 }
 
-	.selected-date:hover {
+  .selected-date:hover {
 
     --tw-bg-opacity: 1;
 
     background-color: rgb(87 80 238 / var(--tw-bg-opacity, 1))
 }
 
-	.current-date-indicator {
+  .current-date-indicator {
 
     position: absolute;
 
@@ -337,7 +337,7 @@
     top: 2rem
 }
 
-	.date button {
+  .date button {
 
     border-style: none;
 

package/dist/components/divider/Divider.stories.svelte

@@ -1,12 +1,12 @@
 <script module>
-	import Divider from './Divider.svelte';
-	import { defineMeta } from '@storybook/addon-svelte-csf';
+  import Divider from './Divider.svelte';
+  import { defineMeta } from '@storybook/addon-svelte-csf';
 
-	const { Story } = defineMeta({
-		component: Divider,
-		title: 'Design System/Divider',
-		tags: ['autodocs']
-	});
+  const { Story } = defineMeta({
+    component: Divider,
+    title: 'Design System/Divider',
+    tags: ['autodocs'],
+  });
 </script>
 
 <Story name="Primary" />

package/dist/components/divider/Divider.svelte

@@ -1,15 +1,15 @@
 <script lang="ts">
-	interface Props {
-		class?: string;
-		vertical?: boolean;
-		inverse?: boolean;
-	}
+  interface Props {
+    class?: string;
+    vertical?: boolean;
+    inverse?: boolean;
+  }
 
-	let { class: className = '', vertical = false, inverse = false }: Props = $props();
+  let { class: className = '', vertical = false, inverse = false }: Props = $props();
 </script>
 
 <div
-	class={`${
-		vertical ? 'h-full w-0 border-l' : 'h-0 w-full border-b'
-	} ${inverse ? 'border-static-inverse' : 'border-static'} ${className}`}
+  class={`${
+    vertical ? 'h-full w-0 border-l' : 'h-0 w-full border-b'
+  } ${inverse ? 'border-static-inverse' : 'border-static'} ${className}`}
 ></div>

package/dist/components/drawer/Drawer.stories.svelte

@@ -1,64 +1,64 @@
 <script module>
-	import { defineMeta } from '@storybook/addon-svelte-csf';
-	import Drawer from './Drawer.svelte';
-	import Button from '../button/Button.svelte';
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+  import Drawer from './Drawer.svelte';
+  import Button from '../button/Button.svelte';
 
-	const { Story } = defineMeta({
-		component: Drawer,
-		title: 'Design System/Drawer',
-		tags: ['autodocs']
-	});
+  const { Story } = defineMeta({
+    component: Drawer,
+    title: 'Design System/Drawer',
+    tags: ['autodocs'],
+  });
 
-	let open = $state(false);
+  let open = $state(false);
 </script>
 
 <Story name="Base" asChild>
-	<div class="py-12">
-		<Drawer id="my-drawer" bind:open controlled>
-			{#snippet trigger()}
-				<Button onClick={() => (open = true)}>Open Drawer</Button>
-			{/snippet}
-			{#snippet content()}
-				<div>
-					<div>
-						<p>Drawer content here</p>
-					</div>
-				</div>
-			{/snippet}
-		</Drawer>
-	</div>
+  <div class="py-12">
+    <Drawer id="my-drawer" bind:open controlled>
+      {#snippet trigger()}
+        <Button onClick={() => (open = true)}>Open Drawer</Button>
+      {/snippet}
+      {#snippet content()}
+        <div>
+          <div>
+            <p>Drawer content here</p>
+          </div>
+        </div>
+      {/snippet}
+    </Drawer>
+  </div>
 </Story>
 
 <Story name="Open" asChild>
-	<div class="py-12">
-		<Drawer id="my-drawer" open controlled>
-			{#snippet trigger()}
-				<Button onClick={() => (open = true)}>Open Drawer</Button>
-			{/snippet}
-			{#snippet content()}
-				<div>
-					<div>
-						<p>Drawer content here</p>
-					</div>
-				</div>
-			{/snippet}
-		</Drawer>
-	</div>
+  <div class="py-12">
+    <Drawer id="my-drawer" open controlled>
+      {#snippet trigger()}
+        <Button onClick={() => (open = true)}>Open Drawer</Button>
+      {/snippet}
+      {#snippet content()}
+        <div>
+          <div>
+            <p>Drawer content here</p>
+          </div>
+        </div>
+      {/snippet}
+    </Drawer>
+  </div>
 </Story>
 
 <Story name="Open Left" asChild>
-	<div class="py-12">
-		<Drawer id="my-drawer" side="left" bind:open controlled>
-			{#snippet trigger()}
-				<Button onClick={() => (open = true)}>Open Drawer</Button>
-			{/snippet}
-			{#snippet content()}
-				<div>
-					<div>
-						<p>Drawer content here</p>
-					</div>
-				</div>
-			{/snippet}
-		</Drawer>
-	</div>
+  <div class="py-12">
+    <Drawer id="my-drawer" side="left" bind:open controlled>
+      {#snippet trigger()}
+        <Button onClick={() => (open = true)}>Open Drawer</Button>
+      {/snippet}
+      {#snippet content()}
+        <div>
+          <div>
+            <p>Drawer content here</p>
+          </div>
+        </div>
+      {/snippet}
+    </Drawer>
+  </div>
 </Story>