@reshape-biotech/design-system 2.4.0 → 2.4.2

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

@@ -1,8 +0,0 @@
-import type { Snippet } from 'svelte';
-import type { HTMLButtonAttributes } from 'svelte/elements';
-type Props = {
-    children: Snippet;
-} & HTMLButtonAttributes;
-declare const ComboboxAdd: import("svelte").Component<Props, {}, "">;
-type ComboboxAdd = ReturnType<typeof ComboboxAdd>;
-export default ComboboxAdd;

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

@@ -1,156 +0,0 @@
-<script lang="ts">
-  import { Combobox } from 'bits-ui';
-  import type { ComboboxContentProps } from '../types';
-  import { Icon } from '../../icons';
-  import { fade } from 'svelte/transition';
-
-  let {
-    children,
-    class: className,
-    showScroll = true,
-    portalled = true,
-    header,
-    footer,
-    paddedContent = true,
-    fadeDuration = 0,
-    ...props
-  }: ComboboxContentProps = $props();
-</script>
-
-{#snippet content()}
-  <Combobox.Content {...props} class={className} forceMount>
-    {#snippet child({ wrapperProps, props, open })}
-      {#snippet content()}
-        {@render header?.()}
-        {#if showScroll}
-          <Combobox.ScrollUpButton class="flex justify-center">
-            <Icon iconName="CaretUp" />
-          </Combobox.ScrollUpButton>
-          <Combobox.Viewport class={paddedContent ? 'p-1' : ''}>
-            {@render children()}
-          </Combobox.Viewport>
-          <Combobox.ScrollDownButton class="flex justify-center">
-            <Icon iconName="CaretDown" />
-          </Combobox.ScrollDownButton>
-        {:else}
-          {@render children()}
-        {/if}
-        {@render footer?.()}
-      {/snippet}
-
-      {#if open}
-        <div {...wrapperProps}>
-          <div {...props} transition:fade={{ duration: fadeDuration }}>
-            {@render content()}
-          </div>
-        </div>
-      {/if}
-    {/snippet}
-  </Combobox.Content>
-{/snippet}
-
-{#if portalled}
-  <Combobox.Portal>
-    {@render content()}
-  </Combobox.Portal>
-{:else}
-  {@render content()}
-{/if}
-
-<style>
-  :global([data-combobox-content]) {
-
-    z-index: 1;
-
-    width: 100%;
-
-    border-radius: 0.75rem;
-
-    --tw-bg-opacity: 1;
-
-    background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
-
-    --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);
-
-    outline: 2px solid transparent;
-
-    outline-offset: 2px
-}
-
-  :global([data-combobox-input]) {
-
-    width: 100%;
-
-    --tw-bg-opacity: 1;
-
-    background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
-
-    padding-left: 0.75rem;
-
-    padding-right: 0.75rem;
-
-    padding-top: 0.5rem;
-
-    padding-bottom: 0.5rem;
-
-    font-size: 0.875rem;
-
-    line-height: 1.25rem;
-
-    outline: 2px solid transparent;
-
-    outline-offset: 2px
-}
-
-  :global([data-combobox-item]) {
-
-    display: flex;
-
-    height: 2.5rem;
-
-    width: 100%;
-
-    cursor: pointer;
-
-    align-items: center;
-
-    justify-content: space-between;
-
-    border-radius: 0.375rem;
-
-    padding-left: 0.75rem;
-
-    padding-right: 0.75rem;
-
-    font-size: 0.875rem;
-
-    line-height: 1.25rem
-}
-  :global([data-combobox-item][data-highlighted]) {
-
-    background-color: #12192a0A
-}
-
-  :global([data-combobox-group-label]) {
-
-    padding-left: 0.75rem;
-
-    padding-right: 0.75rem;
-
-    padding-top: 0.5rem;
-
-    padding-bottom: 0.5rem;
-
-    font-size: 0.75rem;
-
-    line-height: 1rem;
-
-    --tw-text-opacity: 1;
-
-    color: rgb(136 140 148 / var(--tw-text-opacity, 1))
-}
-</style>

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

@@ -1,4 +0,0 @@
-import type { ComboboxContentProps } from '../types';
-declare const ComboboxContent: import("svelte").Component<ComboboxContentProps, {}, "">;
-type ComboboxContent = ReturnType<typeof ComboboxContent>;
-export default ComboboxContent;

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

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

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

@@ -1,18 +0,0 @@
-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;
-}
-declare const ComboboxIndicator: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
-type ComboboxIndicator = InstanceType<typeof ComboboxIndicator>;
-export default ComboboxIndicator;

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

@@ -1,14 +0,0 @@
-import { Combobox } from 'bits-ui';
-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">;
-export declare const Separator: import("svelte").Component<import("bits-ui").SeparatorRootProps, {}, "ref">;
-export declare const Trigger: import("svelte").Component<Combobox.TriggerProps, {}, "ref">;
-export declare const Portal: import("svelte").Component<import("bits-ui").PortalProps, {}, "">;
-export declare const Input: import("svelte").Component<Combobox.InputProps, {}, "ref">;
-export declare const Arrow: import("svelte").Component<import("bits-ui/dist/bits/utilities/arrow").ArrowProps, {}, "">;
-export { default as Add } from './components/combobox-add.svelte';
-export { default as Content } from './components/combobox-content.svelte';
-export { default as Indicator } from './components/combobox-indicator.svelte';
-export * from './types';

package/dist/components/combobox/index.js

@@ -1,15 +0,0 @@
-import { Combobox } from 'bits-ui';
-// Non-modified components
-export const Root = Combobox.Root;
-export const Item = Combobox.Item;
-export const Group = Combobox.Group;
-export const GroupHeading = Combobox.GroupHeading;
-export const Separator = Combobox.Separator;
-export const Trigger = Combobox.Trigger;
-export const Portal = Combobox.Portal;
-export const Input = Combobox.Input;
-export const Arrow = Combobox.Arrow;
-export { default as Add } from './components/combobox-add.svelte';
-export { default as Content } from './components/combobox-content.svelte';
-export { default as Indicator } from './components/combobox-indicator.svelte';
-export * from './types';

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

@@ -1,24 +0,0 @@
-import { type ComboboxContentProps as BitsComboboxContentProps, type ComboboxRootProps as BitsComboboxRootProps, type ComboboxItemProps as BitsComboboxItemProps, type ComboboxInputProps as BitsComboboxInputProps, type ComboboxTriggerProps as BitsComboboxTriggerProps, type ComboboxArrowProps as BitsComboboxArrowProps, type ComboboxContentStaticProps as BitsComboboxContentStaticProps, type ComboboxGroupHeadingProps as BitsComboboxGroupHeadingProps, type SelectItemSnippetProps } from 'bits-ui';
-import type { Snippet } from 'svelte';
-export type ComboboxRootProps = BitsComboboxRootProps;
-export type ComboboxContentProps = {
-    children: Snippet;
-    showScroll?: boolean;
-    portalled?: boolean;
-    header?: Snippet;
-    footer?: Snippet;
-    paddedContent?: boolean;
-    fadeDuration?: number;
-} & BitsComboboxContentProps;
-export type ComboboxTriggerProps = {
-    children: Snippet;
-} & BitsComboboxTriggerProps;
-export type ComboboxItemProps = {
-    children?: Snippet<[SelectItemSnippetProps]>;
-} & BitsComboboxItemProps;
-export type ComboboxGroupHeadingProps = {
-    children: Snippet;
-} & BitsComboboxGroupHeadingProps;
-export type ComboboxInputProps = BitsComboboxInputProps;
-export type ComboboxContentStatic = BitsComboboxContentStaticProps;
-export type ComboboxArrowProps = BitsComboboxArrowProps;

package/dist/components/combobox/types.js

@@ -1 +0,0 @@
-import {} from 'bits-ui';

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

@@ -1,222 +0,0 @@
-<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;
-  }
-</script>
-
-<Story name="Default" args={{ selectedDate: undefined }} />
-
-<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>
-</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>
-</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);
-    }
-  }}
->
-  <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>
-</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>
-</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');
-    }
-  }}
->
-  <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>

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

@@ -1,19 +0,0 @@
-import DatePicker from './DatePicker.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;
-}
-declare const DatePicker: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
-type DatePicker = InstanceType<typeof DatePicker>;
-export default DatePicker;