@reshape-biotech/design-system 2.4.0 → 2.4.2

package/dist/components/datepicker/DatePicker.svelte

@@ -1,346 +0,0 @@
-<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);
-  }
-</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>
-
-<style>
-  .calendar-container {
-
-    display: flex;
-
-    width: 312px
-}
-
-  .calendar {
-
-    overflow: hidden;
-
-    border-radius: 0.5rem;
-
-    --tw-bg-opacity: 1;
-
-    background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
-
-    padding: 1rem;
-
-    --tw-shadow: 0 4px 20px 0 rgba(18, 25, 42, 0.06), 0 0 0 1px rgba(18, 25, 42, 0.08);
-
-    --tw-shadow-colored: 0 4px 20px 0 var(--tw-shadow-color), 0 0 0 1px var(--tw-shadow-color);
-
-    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
-}
-
-  .month-year {
-
-    display: flex;
-
-    align-items: center;
-
-    justify-content: space-between
-}
-
-  .month-year .btn-custom {
-
-    border-style: none;
-
-    background-image: none
-}
-
-  .calendar-body {
-
-    display: flex;
-
-    align-items: center;
-
-    justify-content: space-between;
-
-    overflow-x: auto;
-
-    padding-top: 22px
-}
-
-  table {
-
-    margin: 0px;
-
-    width: 100%;
-
-    border-collapse: collapse;
-
-    --tw-border-spacing-x: 0px;
-
-    --tw-border-spacing-y: 0px;
-
-    border-spacing: var(--tw-border-spacing-x) var(--tw-border-spacing-y);
-
-    padding: 0px
-}
-
-  table thead th p {
-
-    text-align: center;
-
-    font-size: 0.75rem;
-
-    line-height: 1rem;
-
-    font-weight: 500;
-
-    --tw-text-opacity: 1;
-
-    color: rgb(136 140 148 / var(--tw-text-opacity, 1))
-}
-
-  tr {
-
-    height: 2.5rem;
-
-    border-style: none
-}
-
-  table th,
-  table td {
-
-    margin: 0px;
-
-    border-style: none;
-
-    padding: 0px
-}
-
-  .date-container {
-
-    position: relative
-}
-
-  .date {
-
-    display: flex;
-
-    height: 2.5rem;
-
-    width: 2.5rem;
-
-    cursor: pointer;
-
-    align-items: center;
-
-    justify-content: center;
-
-    border-radius: 0.5rem;
-
-    font-size: 0.875rem;
-
-    line-height: 1.25rem;
-
-    transition-duration: 150ms
-}
-
-  .date:hover {
-
-    background-color: #5750ee1A
-}
-
-  .date:focus {
-
-    --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))
-}
-
-  .selected-date {
-
-    --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))
-}
-
-  .selected-date:hover {
-
-    --tw-bg-opacity: 1;
-
-    background-color: rgb(87 80 238 / var(--tw-bg-opacity, 1))
-}
-
-  .current-date-indicator {
-
-    position: absolute;
-
-    left: 18px;
-
-    top: 2rem
-}
-
-  .date button {
-
-    border-style: none;
-
-    background-image: none
-}
-</style>

package/dist/components/datepicker/DatePicker.svelte.d.ts

@@ -1,8 +0,0 @@
-import { DateTime } from 'luxon';
-interface Props {
-    selectedDate: DateTime | undefined;
-    onClick?: any;
-}
-declare const DatePicker: import("svelte").Component<Props, {}, "selectedDate">;
-type DatePicker = ReturnType<typeof DatePicker>;
-export default DatePicker;

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

@@ -1 +0,0 @@
-export { default as DatePicker } from './DatePicker.svelte';

package/dist/components/datepicker/index.js

@@ -1 +0,0 @@
-export { default as DatePicker } from './DatePicker.svelte';

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

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

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

@@ -1,27 +0,0 @@
-export default Divider;
-type Divider = SvelteComponent<{
-    [x: string]: never;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}> & {
-    $$bindings?: string | undefined;
-};
-declare const Divider: $$__sveltets_2_IsomorphicComponent<{
-    [x: string]: never;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
-import Divider from './Divider.svelte';
-interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
-    new (options: import("svelte").ComponentConstructorOptions<Props>): import("svelte").SvelteComponent<Props, Events, Slots> & {
-        $$bindings?: Bindings;
-    } & Exports;
-    (internal: unknown, props: {
-        $$events?: Events;
-        $$slots?: Slots;
-    }): Exports & {
-        $set?: any;
-        $on?: any;
-    };
-    z_$$bindings?: Bindings;
-}

package/dist/components/divider/Divider.svelte

@@ -1,15 +0,0 @@
-<script lang="ts">
-  interface Props {
-    class?: string;
-    vertical?: boolean;
-    inverse?: boolean;
-  }
-
-  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}`}
-></div>

package/dist/components/divider/Divider.svelte.d.ts

@@ -1,8 +0,0 @@
-interface Props {
-    class?: string;
-    vertical?: boolean;
-    inverse?: boolean;
-}
-declare const Divider: import("svelte").Component<Props, {}, "">;
-type Divider = ReturnType<typeof Divider>;
-export default Divider;

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

@@ -1 +0,0 @@
-export { default as Divider } from './Divider.svelte';

package/dist/components/divider/index.js

@@ -1 +0,0 @@
-export { default as Divider } from './Divider.svelte';

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

@@ -1,231 +0,0 @@
-<script context="module">
-  import { defineMeta } from '@storybook/addon-svelte-csf';
-  import Button from '../button/Button.svelte';
-  import * as Drawer from './';
-  import { Root } from './';
-
-  const { Story } = defineMeta({
-    title: 'Design System/Drawer',
-    component: Root,
-    parameters: {
-      layout: 'fullscreen',
-    },
-    argTypes: {
-      side: {
-        control: 'select',
-        options: ['left', 'right'],
-        description: 'Side from which the drawer slides in',
-      },
-      width: {
-        control: 'text',
-        description: 'Custom width for the drawer',
-      },
-      withOverlay: {
-        control: 'boolean',
-        description: 'Show overlay behind the drawer',
-      },
-      withClose: {
-        control: 'boolean',
-        description: 'Show close button in the drawer',
-      },
-      closeOnOutsideClick: {
-        control: 'boolean',
-        description: 'Close drawer when clicking outside',
-      },
-    },
-  });
-  const defaultArgs = {
-    side: 'right',
-    width: '460px',
-    withOverlay: false,
-    withClose: true,
-    closeOnOutsideClick: false,
-  };
-</script>
-
-<Story name="Default" asChild>
-  <Drawer.Root open>
-    <Drawer.Trigger>
-      <Button variant="primary">Open Drawer</Button>
-    </Drawer.Trigger>
-
-    <Drawer.Content>
-      <div class="flex h-full flex-col p-5">
-        <Drawer.Title>Drawer Title</Drawer.Title>
-
-        <div class="mt-6 flex-1 space-y-4">
-          <p>This is the main content of the drawer.</p>
-          <p>
-            The drawer slides in from the {defaultArgs.side} side and provides a focused interface for
-            specific tasks or detailed information.
-          </p>
-          <p>You can customize the width, add an overlay, control the close behavior, and more.</p>
-        </div>
-
-        <Drawer.Bottom>
-          <Drawer.Close>
-            <span>Cancel</span>
-          </Drawer.Close>
-
-          <Button variant="primary">Save</Button>
-        </Drawer.Bottom>
-      </div>
-    </Drawer.Content>
-  </Drawer.Root>
-</Story>
-
-<Story name="Left Side">
-  <Drawer.Root open>
-    <Drawer.Trigger>
-      <Button variant="secondary">Open Left Drawer</Button>
-    </Drawer.Trigger>
-
-    <Drawer.Content {...defaultArgs} side="left">
-      <div class="flex h-full flex-col p-5">
-        <Drawer.Title>Left Drawer</Drawer.Title>
-
-        <div class="mt-6 flex-1 space-y-4">
-          <p>This drawer slides in from the left side.</p>
-          <p>It includes an overlay and closes when clicking outside.</p>
-          <ul class="list-inside list-disc space-y-2">
-            <li>Navigation items</li>
-            <li>Settings</li>
-            <li>User profile</li>
-            <li>Help & support</li>
-          </ul>
-        </div>
-
-        <Drawer.Bottom>
-          <Drawer.Close>
-            <span>Close</span>
-          </Drawer.Close>
-        </Drawer.Bottom>
-      </div>
-    </Drawer.Content>
-  </Drawer.Root>
-</Story>
-
-<Story name="With Overlay">
-  <Drawer.Root open>
-    <Drawer.Trigger>
-      <Button variant="primary">Open with Overlay</Button>
-    </Drawer.Trigger>
-
-    <Drawer.Content {...defaultArgs} withOverlay side="right">
-      <div class="flex h-full flex-col p-5">
-        <Drawer.Title>Drawer with Overlay</Drawer.Title>
-
-        <div class="mt-6 flex-1 space-y-4">
-          <p>This drawer includes a backdrop overlay.</p>
-          <p>Clicking outside the drawer will close it.</p>
-
-          <div class="space-y-3 rounded-lg border border-gray-200 p-4">
-            <h3 class="font-semibold">Form Example</h3>
-            <input
-              type="text"
-              placeholder="Enter your name"
-              class="w-full rounded border border-gray-300 p-2"
-            />
-            <textarea
-              placeholder="Add a comment..."
-              class="h-24 w-full rounded border border-gray-300 p-2"
-            ></textarea>
-          </div>
-        </div>
-
-        <Drawer.Bottom>
-          <Drawer.Close>
-            <span>Cancel</span>
-          </Drawer.Close>
-          <Button variant="primary">Submit</Button>
-        </Drawer.Bottom>
-      </div>
-    </Drawer.Content>
-  </Drawer.Root>
-</Story>
-
-<Story name="Custom Width">
-  <Drawer.Root open>
-    <Drawer.Trigger>
-      <Button variant="primary">Open Wide Drawer</Button>
-    </Drawer.Trigger>
-
-    <Drawer.Content {...defaultArgs} class="!w-[800px]" side="right">
-      <div class="flex h-full flex-col p-5">
-        <Drawer.Title>Wide Drawer (600px)</Drawer.Title>
-
-        <div class="mt-6 flex-1 space-y-4">
-          <p>This drawer has a custom width of 600px.</p>
-          <p>Perfect for forms, data tables, or detailed content.</p>
-
-          <div class="grid grid-cols-2 gap-4">
-            <div class="rounded-lg border border-static p-4">
-              <h4 class="mb-2 font-semibold">Column 1</h4>
-              <p>Content for the first column.</p>
-            </div>
-            <div class="rounded-lg border border-static p-4">
-              <h4 class="mb-2 font-semibold">Column 2</h4>
-              <p>Content for the second column.</p>
-            </div>
-          </div>
-        </div>
-
-        <Drawer.Bottom>
-          <Drawer.Close>
-            <span>Close</span>
-          </Drawer.Close>
-        </Drawer.Bottom>
-      </div>
-    </Drawer.Content>
-  </Drawer.Root>
-</Story>
-
-<Story name="Without Close Button">
-  <Drawer.Root open>
-    <Drawer.Trigger>
-      <Button variant="primary">Open Drawer</Button>
-    </Drawer.Trigger>
-
-    <Drawer.Content {...defaultArgs} withClose={false} side="right">
-      <div class="flex h-full flex-col p-5">
-        <Drawer.Title>No Close Button</Drawer.Title>
-
-        <div class="mt-6 flex-1 space-y-4">
-          <p>This drawer doesn't have a close button in the top-right corner.</p>
-          <p>Users must use the bottom buttons to close it.</p>
-          <p>This is useful for critical actions or multi-step processes.</p>
-        </div>
-
-        <Drawer.Bottom>
-          <Drawer.Close>
-            <span>Done</span>
-          </Drawer.Close>
-        </Drawer.Bottom>
-      </div>
-    </Drawer.Content>
-  </Drawer.Root>
-</Story>
-
-<Story name="Behavior test" asChild>
-  <Drawer.Root>
-    <Drawer.Trigger>
-      <Button variant="primary">Open Drawer</Button>
-    </Drawer.Trigger>
-
-    <Drawer.Content>
-      <div class="flex h-full flex-col p-5">
-        <div class="mt-6 flex-1 space-y-4">
-          <p>This drawer doesn't have a close button in the top-right corner.</p>
-          <p>Users must use the bottom buttons to close it.</p>
-          <p>This is useful for critical actions or multi-step processes.</p>
-        </div>
-
-        <Drawer.Bottom>
-          <Drawer.Close variant="primary">
-            <span>Done</span>
-          </Drawer.Close>
-        </Drawer.Bottom>
-      </div>
-    </Drawer.Content>
-  </Drawer.Root>
-</Story>

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

@@ -1,27 +0,0 @@
-export default Drawer;
-type Drawer = SvelteComponent<{
-    [x: string]: never;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}> & {
-    $$bindings?: string | undefined;
-};
-declare const Drawer: $$__sveltets_2_IsomorphicComponent<{
-    [x: string]: never;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
-import * as Drawer from './';
-interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
-    new (options: import("svelte").ComponentConstructorOptions<Props>): import("svelte").SvelteComponent<Props, Events, Slots> & {
-        $$bindings?: Bindings;
-    } & Exports;
-    (internal: unknown, props: {
-        $$events?: Events;
-        $$slots?: Slots;
-    }): Exports & {
-        $set?: any;
-        $on?: any;
-    };
-    z_$$bindings?: Bindings;
-}