@reshape-biotech/design-system 2.4.1 → 2.4.2

package/dist/components/combobox/Combobox.stories.svelte

@@ -1,442 +0,0 @@
-<script module lang="ts">
-  import { defineMeta } from '@storybook/addon-svelte-csf';
-  import { userEvent, within } from '@storybook/test';
-  import { Root as ComboboxRootForMeta } from './index';
-  import * as Combobox from './index';
-  import { Icon } from '../icons';
-  import IconButton from '../icon-button/IconButton.svelte';
-  import Divider from '../divider/Divider.svelte';
-  import Tag from '../tag/Tag.svelte';
-  import Button from '../button/Button.svelte';
-
-  const { Story } = defineMeta({
-    component: ComboboxRootForMeta,
-    title: 'Design System/Combobox',
-    tags: ['autodocs'],
-    parameters: {
-      design: {
-        type: 'figma',
-        url: 'https://www.figma.com/design/VHTMNdy8PAXAMx43edNZGW/%F0%9F%92%A0--Reshape-Design-System%3A-V1?node-id=9-3294&t=sCuBI8dX6K6NjNR6-0',
-      },
-    },
-  });
-
-  const fruits = [
-    { value: 'mango', label: 'Mango' },
-    { value: 'watermelon', label: 'Watermelon' },
-    { value: 'apple', label: 'Apple' },
-    { value: 'pineapple', label: 'Pineapple' },
-    { value: 'orange', label: 'Orange' },
-    { value: 'grape', label: 'Grape' },
-    { value: 'strawberry', label: 'Strawberry' },
-    { value: 'banana', label: 'Banana' },
-    { value: 'kiwi', label: 'Kiwi' },
-    { value: 'peach', label: 'Peach' },
-    { value: 'cherry', label: 'Cherry' },
-    { value: 'blueberry', label: 'Blueberry' },
-    { value: 'raspberry', label: 'Raspberry' },
-    { value: 'blackberry', label: 'Blackberry' },
-    { value: 'plum', label: 'Plum' },
-    { value: 'apricot', label: 'Apricot' },
-    { value: 'pear', label: 'Pear' },
-    { value: 'grapefruit', label: 'Grapefruit' },
-  ];
-
-  const categories = [
-    { value: 'citrus', label: 'Citrus', items: ['orange', 'grapefruit', 'lemon'] },
-    {
-      value: 'berries',
-      label: 'Berries',
-      items: ['strawberry', 'blueberry', 'raspberry', 'blackberry'],
-    },
-    { value: 'tropical', label: 'Tropical', items: ['mango', 'pineapple', 'banana', 'kiwi'] },
-    { value: 'stone', label: 'Stone Fruits', items: ['peach', 'cherry', 'plum', 'apricot'] },
-    { value: 'other', label: 'Other', items: ['apple', 'pear', 'watermelon', 'grape'] },
-  ];
-
-  let searchValue = $state('');
-  let searchValueSingle = $state('');
-  let searchValueGrouped = $state('');
-  let searchValueCustom = $state('');
-
-  let selected = $state<string[]>([]);
-  let selectedSingle = $state<string>('');
-  let selectedGrouped = $state<string[]>([]);
-  let selectedCustom = $state<string[]>([]);
-
-  const filteredFruits = $derived(
-    searchValue === ''
-      ? fruits
-      : fruits.filter((fruit) => fruit.label.toLowerCase().includes(searchValue.toLowerCase()))
-  );
-
-  const filteredFruitsSingle = $derived(
-    searchValueSingle === ''
-      ? fruits
-      : fruits.filter((fruit) =>
-          fruit.label.toLowerCase().includes(searchValueSingle.toLowerCase())
-        )
-  );
-
-  const filteredFruitsGrouped = $derived(
-    searchValueGrouped === ''
-      ? fruits
-      : fruits.filter((fruit) =>
-          fruit.label.toLowerCase().includes(searchValueGrouped.toLowerCase())
-        )
-  );
-
-  const filteredFruitsCustom = $derived(
-    searchValueCustom === ''
-      ? fruits
-      : fruits.filter((fruit) =>
-          fruit.label.toLowerCase().includes(searchValueCustom.toLowerCase())
-        )
-  );
-
-  const exactMatch = $derived(
-    filteredFruits.find((fruit) => fruit.value.toLowerCase() === searchValue.toLowerCase())
-  );
-
-  const exactMatchCustom = $derived(
-    filteredFruitsCustom.find(
-      (fruit) => fruit.value.toLowerCase() === searchValueCustom.toLowerCase()
-    )
-  );
-
-  let customAnchor = $state<HTMLElement>(null!);
-  let customAnchorButton = $state<HTMLElement>(null!);
-  let customAnchorSingle = $state<HTMLElement>(null!);
-  let customAnchorGrouped = $state<HTMLElement>(null!);
-  let customAnchorCustom = $state<HTMLElement>(null!);
-</script>
-
-<Story name="Multiple Selection" asChild>
-  <Combobox.Root
-    onOpenChange={(o) => {
-      if (!o) searchValue = '';
-    }}
-    type="multiple"
-    name="favoriteFruit"
-    items={filteredFruits}
-    bind:value={selected}
-  >
-    <div class="flex gap-2">
-      {#each selected as fruit}
-        <Tag>
-          {fruit}
-        </Tag>
-      {/each}
-    </div>
-    <Combobox.Trigger>
-      <div bind:this={customAnchor}>
-        <IconButton rounded={false}>
-          <Icon iconName="Plus" />
-        </IconButton>
-      </div>
-    </Combobox.Trigger>
-    <Combobox.Content {customAnchor} class="flex flex-col justify-between">
-      <div>
-        <Combobox.Input
-          placeholder="Search a fruit"
-          oninput={(e: Event) => (searchValue = (e.target as HTMLInputElement).value)}
-          autofocus
-        />
-        <Divider />
-      </div>
-      <div class="flex flex-grow flex-col">
-        {#if filteredFruits.length > 0}
-          <Combobox.Group>
-            <Combobox.GroupHeading>Fruits</Combobox.GroupHeading>
-            {#each filteredFruits as fruit (fruit.value)}
-              <Combobox.Item value={fruit.value} label={fruit.label}>
-                {#snippet children({ selected })}
-                  {fruit.label}
-                  {#if selected}
-                    <Combobox.Indicator />
-                  {/if}
-                {/snippet}
-              </Combobox.Item>
-            {:else}
-              <span class="block px-5 py-2 text-sm text-muted-foreground"> No results found </span>
-            {/each}
-          </Combobox.Group>
-        {/if}
-      </div>
-      {#if !exactMatch && searchValue !== ''}
-        <Divider />
-
-        <Combobox.Add
-          onclick={() => {
-            selected.push(searchValue);
-            fruits.push({ value: searchValue, label: searchValue });
-            searchValue = '';
-          }}
-        >
-          <p>Add new fruit</p>
-        </Combobox.Add>
-      {/if}
-    </Combobox.Content>
-  </Combobox.Root>
-</Story>
-
-<Story name="Single Selection" asChild>
-  <Combobox.Root
-    onOpenChange={(o) => {
-      if (!o) searchValueSingle = '';
-    }}
-    type="single"
-    name="singleFruit"
-    items={filteredFruitsSingle}
-    bind:value={selectedSingle}
-  >
-    <Combobox.Trigger>
-      <div bind:this={customAnchorSingle}>
-        <Button variant="secondary" size="sm">
-          {selectedSingle ? selectedSingle : 'Select a fruit'}
-        </Button>
-      </div>
-    </Combobox.Trigger>
-    <Combobox.Content class="flex flex-col justify-between" customAnchor={customAnchorSingle}>
-      <div class="flex flex-grow flex-col">
-        {#if filteredFruitsSingle.length > 0}
-          <Combobox.Group>
-            <Combobox.GroupHeading>Fruits</Combobox.GroupHeading>
-            {#each filteredFruitsSingle as fruit (fruit.value)}
-              <Combobox.Item value={fruit.value} label={fruit.label}>
-                {#snippet children({ selected })}
-                  {fruit.label}
-                  {#if selected}
-                    <Combobox.Indicator />
-                  {/if}
-                {/snippet}
-              </Combobox.Item>
-            {:else}
-              <span class="block px-5 py-2 text-sm text-muted-foreground"> No results found </span>
-            {/each}
-          </Combobox.Group>
-        {/if}
-      </div>
-    </Combobox.Content>
-  </Combobox.Root>
-</Story>
-
-<Story name="Grouped Items" asChild>
-  <Combobox.Root
-    onOpenChange={(o) => {
-      if (!o) searchValueGrouped = '';
-    }}
-    type="multiple"
-    name="groupedFruits"
-    items={filteredFruitsGrouped}
-    bind:value={selectedGrouped}
-  >
-    <div class="flex flex-wrap gap-2">
-      {#each selectedGrouped as fruit}
-        <Tag>
-          {fruit}
-        </Tag>
-      {/each}
-    </div>
-    <Combobox.Trigger>
-      <div bind:this={customAnchorGrouped}>
-        <Button variant="primary" size="sm">
-          <Icon iconName="List" />
-          Select fruits by category
-        </Button>
-      </div>
-    </Combobox.Trigger>
-    <Combobox.Content class="flex flex-col justify-between" customAnchor={customAnchorGrouped}>
-      <div>
-        <Combobox.Input
-          placeholder="Search across categories"
-          oninput={(e: Event) => (searchValueGrouped = (e.target as HTMLInputElement).value)}
-          autofocus
-        />
-        <Divider />
-      </div>
-      <div class="flex max-h-80 flex-grow flex-col overflow-y-auto">
-        {#if searchValueGrouped === ''}
-          {#each categories as category}
-            <Combobox.Group>
-              <Combobox.GroupHeading>{category.label}</Combobox.GroupHeading>
-              {#each category.items as item}
-                {@const fruit = fruits.find((f) => f.value === item)}
-                {#if fruit}
-                  <Combobox.Item value={fruit.value} label={fruit.label}>
-                    {#snippet children({ selected })}
-                      {fruit.label}
-                      {#if selected}
-                        <Combobox.Indicator />
-                      {/if}
-                    {/snippet}
-                  </Combobox.Item>
-                {/if}
-              {/each}
-            </Combobox.Group>
-          {/each}
-        {:else if filteredFruitsGrouped.length > 0}
-          <Combobox.Group>
-            <Combobox.GroupHeading>Search Results</Combobox.GroupHeading>
-            {#each filteredFruitsGrouped as fruit (fruit.value)}
-              <Combobox.Item value={fruit.value} label={fruit.label}>
-                {#snippet children({ selected })}
-                  {fruit.label}
-                  {#if selected}
-                    <Combobox.Indicator />
-                  {/if}
-                {/snippet}
-              </Combobox.Item>
-            {/each}
-          </Combobox.Group>
-        {:else}
-          <span class="text-muted-foreground block px-5 py-2 text-sm"> No results found </span>
-        {/if}
-      </div>
-    </Combobox.Content>
-  </Combobox.Root>
-</Story>
-
-<Story
-  name="Interaction Test"
-  asChild
-  play={async ({ canvasElement }) => {
-    // Get the canvas element
-    const canvas = within(canvasElement);
-
-    // Find and click the trigger button to open the combobox
-    const triggerButton = canvas.getByTestId('combobox-trigger');
-    await userEvent.click(triggerButton);
-
-    // Wait for the combobox content to appear in the document
-    await new Promise((resolve) => setTimeout(resolve, 300));
-
-    // Find the combobox content in the document
-    const comboboxContent = document.querySelector(
-      '[data-testid="combobox-content"]'
-    ) as HTMLElement;
-    if (!comboboxContent) {
-      console.log('Combobox content not found');
-      return;
-    }
-
-    // Use within to scope queries to the combobox content
-    const contentScope = within(comboboxContent);
-    const searchInput = contentScope.getByTestId('combobox-input');
-
-    // Type "berry" in the search input
-    await userEvent.type(searchInput, 'berry');
-
-    // Wait for the filtering to complete
-    await new Promise((resolve) => setTimeout(resolve, 300));
-
-    // Find and click on the Strawberry option
-    const strawberryOption = contentScope.getByText('Strawberry');
-    await userEvent.click(strawberryOption);
-
-    // Wait for selection to be processed
-
-    // Open the combobox again
-
-    // Get the search input again
-
-    // Clear the previous search and type "mango"
-    await userEvent.clear(searchInput);
-    await userEvent.type(searchInput, 'mango');
-
-    // Wait for filtering to complete
-    await new Promise((resolve) => setTimeout(resolve, 300));
-
-    // Find and click on the Mango option
-    const mangoOption = contentScope.getByText('Mango');
-    await userEvent.click(mangoOption);
-
-    await userEvent.keyboard('{Escape}');
-
-    // Test complete
-    console.log('Successfully selected Strawberry and Mango');
-  }}
->
-  <div data-testid="combobox-container">
-    <Combobox.Root
-      onOpenChange={(o) => {
-        if (!o) searchValue = '';
-      }}
-      type="multiple"
-      name="favoriteFruit"
-      items={filteredFruits}
-      bind:value={selected}
-    >
-      <div class="flex gap-2" data-testid="selected-tags">
-        {#each selected as fruit}
-          <Tag>
-            <div data-value={fruit}>
-              {fruit}
-            </div>
-          </Tag>
-        {/each}
-      </div>
-      <Combobox.Trigger data-testid="combobox-trigger">
-        <div bind:this={customAnchor}>
-          <IconButton rounded={false}>
-            <Icon iconName="Plus" />
-          </IconButton>
-        </div>
-      </Combobox.Trigger>
-      <Combobox.Content
-        {customAnchor}
-        class="flex flex-col justify-between"
-        data-testid="combobox-content"
-      >
-        <div>
-          <Combobox.Input
-            placeholder="Search a fruit"
-            oninput={(e: Event) => (searchValue = (e.target as HTMLInputElement).value)}
-            autofocus
-            data-testid="combobox-input"
-          />
-          <Divider />
-        </div>
-        <div class="flex flex-grow flex-col">
-          {#if filteredFruits.length > 0}
-            <Combobox.Group>
-              <Combobox.GroupHeading>Fruits</Combobox.GroupHeading>
-              {#each filteredFruits as fruit (fruit.value)}
-                <Combobox.Item
-                  value={fruit.value}
-                  label={fruit.label}
-                  data-testid={`fruit-option-${fruit.value}`}
-                >
-                  {#snippet children({ selected })}
-                    {fruit.label}
-                    {#if selected}
-                      <Combobox.Indicator />
-                    {/if}
-                  {/snippet}
-                </Combobox.Item>
-              {:else}
-                <span class="block px-5 py-2 text-sm text-muted-foreground">
-                  No results found
-                </span>
-              {/each}
-            </Combobox.Group>
-          {/if}
-        </div>
-        {#if !exactMatch && searchValue !== ''}
-          <Divider />
-
-          <Combobox.Add
-            data-testid="add-new-fruit"
-            onclick={() => {
-              selected.push(searchValue);
-              fruits.push({ value: searchValue, label: searchValue });
-              searchValue = '';
-            }}
-          >
-            <p>Add new fruit</p>
-          </Combobox.Add>
-        {/if}
-      </Combobox.Content>
-    </Combobox.Root>
-  </div>
-</Story>

package/dist/components/combobox/Combobox.stories.svelte.d.ts

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

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

@@ -1,31 +0,0 @@
-<script lang="ts">
-  import { Icon } from '../../icons';
-  import type { Snippet } from 'svelte';
-  import type { HTMLButtonAttributes } from 'svelte/elements';
-
-  type Props = { children: Snippet } & HTMLButtonAttributes;
-
-  let { children, ...props }: Props = $props();
-</script>
-
-<button {...props}>
-  <Icon iconName="Plus" class="text-icon-secondary" />
-  {@render children()}
-</button>
-
-<style>
-  button {
-    margin-left: 0.5rem;
-    display: flex;
-    height: 2.5rem;
-    flex-direction: row;
-    align-items: center;
-    gap: 0.5rem;
-    padding-left: 0.75rem;
-    padding-right: 0.75rem;
-    padding-top: 0.5rem;
-    padding-bottom: 0.5rem;
-    font-size: 0.875rem;
-    line-height: 1.25rem
-}
-</style>

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;