@reshape-biotech/design-system 2.4.0 → 2.4.2

package/dist/components/checkbox/Checkbox.svelte.d.ts

@@ -1,5 +0,0 @@
-import { Checkbox, type CheckboxRootProps } from 'bits-ui';
-export type CheckboxProps = CheckboxRootProps;
-declare const Checkbox: import("svelte").Component<Checkbox.RootProps, {}, "checked">;
-type Checkbox = ReturnType<typeof Checkbox>;
-export default Checkbox;

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

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

package/dist/components/checkbox/index.js

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

package/dist/components/collapsible/Collapsible.stories.svelte

@@ -1,41 +0,0 @@
-<script module lang="ts">
-  import { defineMeta } from '@storybook/addon-svelte-csf';
-  import { Root as CollapsibleRootForMeta } from './index';
-  import * as Collapsible from './index';
-  import Button from '../button/Button.svelte';
-
-  const { Story } = defineMeta({
-    component: CollapsibleRootForMeta,
-    title: 'Design System/Collapsible',
-    tags: ['autodocs'],
-  });
-
-  let open = $state(false);
-</script>
-
-<Story name="Base" asChild>
-  <Collapsible.Root class="w-[200px]">
-    <Collapsible.Trigger class="w-full">
-      <h6>Trigger</h6>
-    </Collapsible.Trigger>
-
-    <Collapsible.Content>Content</Collapsible.Content>
-  </Collapsible.Root>
-</Story>
-
-<Story name="Without Icon" asChild>
-  <Collapsible.Root class="w-[200px]">
-    <Collapsible.Trigger class="w-full" withIcon={false}>
-      <h6>Trigger</h6>
-    </Collapsible.Trigger>
-
-    <Collapsible.Content>Content</Collapsible.Content>
-  </Collapsible.Root>
-</Story>
-
-<Story name="Controlled" asChild>
-  <Button onClick={() => (open = !open)}>Outside Trigger</Button>
-  <Collapsible.Root class="w-[200px]" {open}>
-    <Collapsible.Content>Content</Collapsible.Content>
-  </Collapsible.Root>
-</Story>

package/dist/components/collapsible/Collapsible.stories.svelte.d.ts

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

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

@@ -1,26 +0,0 @@
-<script lang="ts">
-  import { Collapsible, type WithoutChildrenOrChild } from 'bits-ui';
-  import { slide } from 'svelte/transition';
-  import type { Snippet } from 'svelte';
-  import type { CollapsibleContentProps } from '../types';
-
-  let {
-    ref = $bindable(null),
-    duration = 200,
-    children,
-    ...restProps
-  }: WithoutChildrenOrChild<CollapsibleContentProps> & {
-    duration?: number;
-    children?: Snippet;
-  } = $props();
-</script>
-
-<Collapsible.Content forceMount bind:ref {...restProps}>
-  {#snippet child({ props, open })}
-    {#if open}
-      <div {...props} transition:slide={{ duration }}>
-        {@render children?.()}
-      </div>
-    {/if}
-  {/snippet}
-</Collapsible.Content>

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

@@ -1,10 +0,0 @@
-import { type WithoutChildrenOrChild } from 'bits-ui';
-import type { Snippet } from 'svelte';
-import type { CollapsibleContentProps } from '../types';
-type $$ComponentProps = WithoutChildrenOrChild<CollapsibleContentProps> & {
-    duration?: number;
-    children?: Snippet;
-};
-declare const CollapsibleContent: import("svelte").Component<$$ComponentProps, {}, "ref">;
-type CollapsibleContent = ReturnType<typeof CollapsibleContent>;
-export default CollapsibleContent;

package/dist/components/collapsible/components/collapsible-trigger.svelte

@@ -1,36 +0,0 @@
-<script lang="ts">
-  import { Collapsible } from 'bits-ui';
-  import { Icon } from '../../icons';
-  import type { CollapsibleTriggerProps } from '../types';
-
-  let { children, withIcon = true, ...props }: CollapsibleTriggerProps = $props();
-</script>
-
-<Collapsible.Trigger {...props} class="transition-all {props.class}">
-  <div class="container h-8">
-    {@render children()}
-    {#if withIcon}
-      <Icon iconName="CaretDown" color="secondary" class="icon z-[-1] m-1" />
-    {/if}
-  </div>
-</Collapsible.Trigger>
-
-<style>
-  :global([data-state='open']) :global(.icon) {
-
-    --tw-rotate: 180deg;
-
-    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
-}
-
-  .container {
-
-    display: flex;
-
-    align-items: center;
-
-    justify-content: space-between;
-
-    gap: 0.5rem
-}
-</style>

package/dist/components/collapsible/components/collapsible-trigger.svelte.d.ts

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

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

@@ -1,5 +0,0 @@
-import { Collapsible } from 'bits-ui';
-export declare const Root: import("svelte").Component<Collapsible.RootProps, {}, "ref" | "open">;
-export { default as Trigger } from './components/collapsible-trigger.svelte';
-export { default as Content } from './components/collapsible-content.svelte';
-export type { CollapsibleTriggerProps, CollapsibleContentProps } from './types';

package/dist/components/collapsible/index.js

@@ -1,4 +0,0 @@
-import { Collapsible } from 'bits-ui';
-export const Root = Collapsible.Root;
-export { default as Trigger } from './components/collapsible-trigger.svelte';
-export { default as Content } from './components/collapsible-content.svelte';

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

@@ -1,9 +0,0 @@
-import { type CollapsibleContentProps as BitsCollapsibleContentProps, type CollapsibleTriggerProps as BitsCollapsibleTriggerProps } from 'bits-ui';
-import type { Snippet } from 'svelte';
-export type CollapsibleTriggerProps = {
-    children: Snippet;
-    withIcon?: boolean;
-} & BitsCollapsibleTriggerProps;
-export type CollapsibleContentProps = {
-    children: Snippet;
-} & BitsCollapsibleContentProps;

package/dist/components/collapsible/types.js

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

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>