@reshape-biotech/design-system 2.4.1 → 2.4.2

package/dist/components/select/Select.stories.svelte

@@ -1,219 +0,0 @@
-<script module lang="ts">
-  import { defineMeta } from '@storybook/addon-svelte-csf';
-  import * as Select from './index';
-  import { Icon, type IconName } from '../icons';
-
-  const { Story } = defineMeta({
-    title: 'Design System/Select(New)',
-
-    argTypes: {
-      placeholder: { control: 'text', defaultValue: 'Select an option...' },
-      disabled: { control: 'boolean', defaultValue: false },
-      multiple: { control: 'boolean', defaultValue: false },
-    },
-  });
-
-  const foodGroups = [
-    { value: 'fruits', label: 'Fruits' },
-    { value: 'vegetables', label: 'Vegetables' },
-    { value: 'grains', label: 'Grains' },
-    { value: 'protein', label: 'Protein Foods' },
-    { value: 'dairy', label: 'Dairy' },
-  ];
-
-  const moreFruits = [
-    { value: 'apple', label: 'Apple' },
-    { value: 'banana', label: 'Banana' },
-    { value: 'blueberry', label: 'Blueberry' },
-    { value: 'grapes', label: 'Grapes' },
-    { value: 'mango', label: 'Mango' },
-  ];
-
-  let selectedValueSingle = $state<string | undefined>(undefined);
-  let selectedValueMultiple = $state<string[]>([]);
-  let selectedValueSinglePreselected = $state<string | undefined>('vegetables');
-  let selectedValueMultiplePreselected = $state<string[]>(['fruits', 'grains']);
-
-  const customIconItems = [
-    { value: 'insect_count', label: 'Insect count', iconName: 'Hash' },
-    { value: 'insect_health', label: 'Insect health', iconName: 'Hash' },
-    { value: 'leaf_area', label: 'Leaf area', iconName: 'Ruler' },
-    { value: 'time_spent', label: 'Time spent on leaf', iconName: 'Timer' },
-  ];
-  let selectedCustomItems = $state<string[]>(['insect_count', 'leaf_area']);
-
-  const handleRemoveCustomItem = (itemValue: string) => {
-    selectedCustomItems = selectedCustomItems.filter((v) => v !== itemValue);
-  };
-  const handleRemoveValueMultiple = (itemValue: string) => {
-    selectedValueMultiple = selectedValueMultiple.filter((v) => v !== itemValue);
-  };
-  const handleRemoveValueMultiplePreselected = (itemValue: string) => {
-    selectedValueMultiplePreselected = selectedValueMultiplePreselected.filter(
-      (v) => v !== itemValue
-    );
-  };
-</script>
-
-<Story name="Default (Single Select)" asChild>
-  <div class="p-4">
-    <Select.Root bind:value={selectedValueSingle} items={foodGroups} type="single" open>
-      <Select.Trigger
-        class="w-[250px]"
-        placeholder={'Select a food group'}
-        displayValue={foodGroups.find((f) => f.value === selectedValueSingle)?.label}
-      />
-
-      <Select.Content>
-        {#each foodGroups as item (item.value)}
-          <Select.Item value={item.value} label={item.label} />
-        {/each}
-      </Select.Content>
-    </Select.Root>
-    <div class="mt-2 rounded bg-gray-100 p-2 text-sm">
-      Selected: {selectedValueSingle ?? 'Nothing'}
-    </div>
-  </div>
-</Story>
-
-<Story name="With Groups (Single Select)" asChild>
-  <div class="p-4">
-    <Select.Root bind:value={selectedValueSingle} items={moreFruits} type="single">
-      <Select.Trigger
-        class="w-[250px]"
-        placeholder={'Select a fruit'}
-        displayValue={moreFruits.find((f) => f.value === selectedValueSingle)?.label}
-      />
-      <Select.Portal>
-        <Select.Content>
-          <Select.Group label="Fruits">
-            {#each moreFruits.slice(0, 2) as item (item.value)}
-              <Select.Item value={item.value} label={item.label} />
-            {/each}
-          </Select.Group>
-          <Select.Group label="More Fruits">
-            {#each moreFruits.slice(2) as item (item.value)}
-              <Select.Item value={item.value} label={item.label} />
-            {/each}
-          </Select.Group>
-        </Select.Content>
-      </Select.Portal>
-    </Select.Root>
-    <div class="mt-2 rounded bg-gray-100 p-2 text-sm">
-      Selected: {selectedValueSingle ?? 'Nothing'}
-    </div>
-  </div>
-</Story>
-
-<Story name="Multiple Select Example" asChild>
-  <div class="p-4">
-    <Select.Root bind:value={selectedValueMultiple} items={foodGroups} type="multiple">
-      <Select.MultiSelectTrigger
-        selectedValues={selectedValueMultiple}
-        items={foodGroups}
-        onRemoveItem={handleRemoveValueMultiple}
-      />
-      <Select.Portal>
-        <Select.Content>
-          {#each foodGroups as item (item.value)}
-            <Select.Item value={item.value} label={item.label} />
-          {/each}
-        </Select.Content>
-      </Select.Portal>
-    </Select.Root>
-    <div class="mt-2 rounded bg-gray-100 p-2 text-sm">
-      Selected: {selectedValueMultiple.join(', ') || 'Nothing'}
-    </div>
-  </div>
-</Story>
-
-<Story name="Disabled Select" asChild>
-  <div class="p-4">
-    <Select.Root items={foodGroups} type="single" disabled={true}>
-      <Select.Trigger class="w-[250px]" placeholder={'Cannot select (disabled)'} disabled={true} />
-      <Select.Portal>
-        <Select.Content>
-          {#each foodGroups as item (item.value)}
-            <Select.Item value={item.value} label={item.label} disabled={true} />
-          {/each}
-        </Select.Content>
-      </Select.Portal>
-    </Select.Root>
-    <div class="mt-2 rounded bg-gray-100 p-2 text-sm">Selected: Nothing (disabled)</div>
-  </div>
-</Story>
-
-<Story name="Pre-selected (Single Select)" asChild>
-  <div class="p-4">
-    <Select.Root bind:value={selectedValueSinglePreselected} items={foodGroups} type="single">
-      <Select.Trigger
-        class="w-[250px]"
-        placeholder={'Select a food group'}
-        displayValue={foodGroups.find((f) => f.value === selectedValueSinglePreselected)?.label}
-      />
-      <Select.Portal>
-        <Select.Content>
-          {#each foodGroups as item (item.value)}
-            <Select.Item value={item.value} label={item.label} />
-          {/each}
-        </Select.Content>
-      </Select.Portal>
-    </Select.Root>
-    <div class="mt-2 rounded bg-gray-100 p-2 text-sm">
-      Selected: {selectedValueSinglePreselected ?? 'Nothing'}
-    </div>
-  </div>
-</Story>
-
-<Story name="Pre-selected (Multiple Select)" asChild>
-  <div class="p-4">
-    <Select.Root bind:value={selectedValueMultiplePreselected} items={foodGroups} type="multiple">
-      <Select.MultiSelectTrigger
-        selectedValues={selectedValueMultiplePreselected}
-        items={foodGroups}
-        onRemoveItem={handleRemoveValueMultiplePreselected}
-      />
-      <Select.Portal>
-        <Select.Content>
-          {#each foodGroups as item (item.value)}
-            <Select.Item value={item.value} label={item.label} />
-          {/each}
-        </Select.Content>
-      </Select.Portal>
-    </Select.Root>
-    <div class="mt-2 rounded bg-gray-100 p-2 text-sm">
-      Selected: {selectedValueMultiplePreselected.join(', ') || 'Nothing'}
-    </div>
-  </div>
-</Story>
-
-<Story name="Multiple Select with Custom Icons and Dismissible Tags" asChild>
-  <div class="p-4">
-    <Select.Root bind:value={selectedCustomItems} items={customIconItems} type="multiple">
-      <Select.MultiSelectTrigger
-        class="w-[350px]"
-        selectedValues={selectedCustomItems}
-        items={customIconItems}
-        placeholder="Select metrics..."
-        onRemoveItem={handleRemoveCustomItem}
-      />
-      <Select.Portal>
-        <Select.Content>
-          {#each customIconItems as item (item.value)}
-            <Select.Item value={item.value} label={item.label}>
-              {#snippet children()}
-                <div class="flex items-center gap-2">
-                  <Icon iconName={item.iconName as IconName} class="h-4 w-4" />
-                  <span>{item.label}</span>
-                </div>
-              {/snippet}
-            </Select.Item>
-          {/each}
-        </Select.Content>
-      </Select.Portal>
-    </Select.Root>
-    <div class="mt-2 rounded bg-neutral p-2 text-sm">
-      Selected Values: {selectedCustomItems.join(', ') || 'Nothing'}
-    </div>
-  </div>
-</Story>

package/dist/components/select/Select.stories.svelte.d.ts

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

package/dist/components/select/components/Group.svelte

@@ -1,24 +0,0 @@
-<script lang="ts">
-  import { Select as SelectPrimitive } from 'bits-ui';
-  import type { Snippet } from 'svelte';
-  import type { GroupProps as PrimitiveGroupProps } from '../types';
-  import GroupHeading from './SelectGroupHeading.svelte';
-
-  interface Props extends PrimitiveGroupProps {
-    label?: string;
-    children: Snippet;
-    class?: string;
-    contentClass?: string;
-  }
-
-  let { label, children, class: className, contentClass, ...restProps }: Props = $props();
-</script>
-
-<SelectPrimitive.Group class={className} {...restProps}>
-  {#if label}
-    <GroupHeading>{label}</GroupHeading>
-  {/if}
-  <div class={contentClass}>
-    {@render children()}
-  </div>
-</SelectPrimitive.Group>

package/dist/components/select/components/Group.svelte.d.ts

@@ -1,11 +0,0 @@
-import type { Snippet } from 'svelte';
-import type { GroupProps as PrimitiveGroupProps } from '../types';
-interface Props extends PrimitiveGroupProps {
-    label?: string;
-    children: Snippet;
-    class?: string;
-    contentClass?: string;
-}
-declare const Group: import("svelte").Component<Props, {}, "">;
-type Group = ReturnType<typeof Group>;
-export default Group;

package/dist/components/select/components/MultiSelectTrigger.svelte

@@ -1,69 +0,0 @@
-<script lang="ts">
-  import * as Select from '../index';
-  import { Icon, type IconName } from '../../icons';
-  import IconButton from '../../icon-button/IconButton.svelte';
-
-  type ItemType = {
-    value: string;
-    label: string;
-    iconName?: IconName | string;
-    disabled?: boolean;
-  };
-
-  interface Props {
-    selectedValues: string[];
-    items: ItemType[];
-    onRemoveItem: (itemValue: string) => void;
-    placeholder?: string;
-    class?: string;
-    [key: string]: any;
-  }
-
-  let {
-    selectedValues,
-    items,
-    onRemoveItem,
-    placeholder = 'Select items...',
-    class: className,
-    ...restProps
-  }: Props = $props();
-</script>
-
-<Select.Trigger
-  class={'bg-background ring-offset-background placeholder:text-muted-foreground focus:ring-ring flex h-10 w-full items-center justify-between rounded-md border border-input px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50' +
-    (className || '')}
-  {...restProps}
->
-  {#if selectedValues.length === 0}
-    <span class="flex-grow px-2 text-tertiary">{placeholder}</span>
-  {:else}
-    <div class="flex flex-grow flex-wrap items-center gap-1">
-      {#each selectedValues as selectedVal (selectedVal)}
-        {@const item = items.find((i) => i.value === selectedVal)}
-        {#if item}
-          <div
-            class="flex w-fit items-center gap-1 rounded-sm bg-neutral px-1 py-0.5 text-sm"
-            aria-label={`Selected item ${item.label}`}
-          >
-            {#if item.iconName}
-              <Icon iconName={item.iconName as IconName} />
-            {/if}
-            <span class:text-secondary={item.disabled}>{item.label}</span>
-            {#if !item.disabled}
-              <IconButton
-                type="button"
-                aria-label={`Remove ${item.label}`}
-                onclick={() => onRemoveItem(item.value)}
-                size="xs"
-                variant="transparent"
-                class="text-primary focus:outline-none"
-              >
-                <Icon iconName="X" />
-              </IconButton>
-            {/if}
-          </div>
-        {/if}
-      {/each}
-    </div>
-  {/if}
-</Select.Trigger>

package/dist/components/select/components/MultiSelectTrigger.svelte.d.ts

@@ -1,18 +0,0 @@
-import { type IconName } from '../../icons';
-type ItemType = {
-    value: string;
-    label: string;
-    iconName?: IconName | string;
-    disabled?: boolean;
-};
-interface Props {
-    selectedValues: string[];
-    items: ItemType[];
-    onRemoveItem: (itemValue: string) => void;
-    placeholder?: string;
-    class?: string;
-    [key: string]: any;
-}
-declare const MultiSelectTrigger: import("svelte").Component<Props, {}, "">;
-type MultiSelectTrigger = ReturnType<typeof MultiSelectTrigger>;
-export default MultiSelectTrigger;

package/dist/components/select/components/SelectContent.svelte

@@ -1,33 +0,0 @@
-<script lang="ts">
-  import { Select as SelectPrimitive } from 'bits-ui';
-  import type { ContentProps } from '../types';
-
-  import type { Snippet } from 'svelte';
-  import Icon from '../../icons/Icon.svelte';
-
-  interface Props extends ContentProps {
-    children: Snippet;
-    class?: string;
-    sideOffset?: number;
-  }
-
-  let { class: className = '', sideOffset = 4, children, ...restProps }: Props = $props();
-
-  const baseClasses = `
-		w-[var(--bits-select-anchor-width)] relative z-50 min-w-[8rem] overflow-hidden rounded-md border bg-surface text-surface-foreground shadow-md
-    `;
-</script>
-
-<SelectPrimitive.Portal>
-  <SelectPrimitive.Content {...restProps} {sideOffset} class={baseClasses + ' ' + className}>
-    <SelectPrimitive.ScrollUpButton class="flex justify-center">
-      <Icon iconName="CaretUp" />
-    </SelectPrimitive.ScrollUpButton>
-    <SelectPrimitive.Viewport class="p-1 ">
-      {@render children()}
-    </SelectPrimitive.Viewport>
-    <SelectPrimitive.ScrollDownButton class="flex justify-center">
-      <Icon iconName="CaretDown" />
-    </SelectPrimitive.ScrollDownButton>
-  </SelectPrimitive.Content>
-</SelectPrimitive.Portal>

package/dist/components/select/components/SelectContent.svelte.d.ts

@@ -1,10 +0,0 @@
-import type { ContentProps } from '../types';
-import type { Snippet } from 'svelte';
-interface Props extends ContentProps {
-    children: Snippet;
-    class?: string;
-    sideOffset?: number;
-}
-declare const SelectContent: import("svelte").Component<Props, {}, "">;
-type SelectContent = ReturnType<typeof SelectContent>;
-export default SelectContent;

package/dist/components/select/components/SelectGroupHeading.svelte

@@ -1,19 +0,0 @@
-<script lang="ts">
-  import { Select as SelectPrimitive } from 'bits-ui';
-  import type { GroupHeadingProps } from '../types';
-
-  import type { Snippet } from 'svelte';
-
-  interface Props extends GroupHeadingProps {
-    children: Snippet;
-    class?: string;
-  }
-
-  let { class: className = '', children, ...restProps }: Props = $props();
-
-  const baseClasses = 'py-1.5 pl-2 pr-2 text-sm font-semibold text-muted-foreground';
-</script>
-
-<SelectPrimitive.GroupHeading {...restProps} class="{baseClasses} {className}">
-  {@render children()}
-</SelectPrimitive.GroupHeading>

package/dist/components/select/components/SelectGroupHeading.svelte.d.ts

@@ -1,9 +0,0 @@
-import type { GroupHeadingProps } from '../types';
-import type { Snippet } from 'svelte';
-interface Props extends GroupHeadingProps {
-    children: Snippet;
-    class?: string;
-}
-declare const SelectGroupHeading: import("svelte").Component<Props, {}, "">;
-type SelectGroupHeading = ReturnType<typeof SelectGroupHeading>;
-export default SelectGroupHeading;

package/dist/components/select/components/SelectItem.svelte

@@ -1,39 +0,0 @@
-<script lang="ts">
-  import { Select as SelectPrimitive } from 'bits-ui';
-  import type { ItemProps, ItemSlotProps } from '../types';
-
-  import type { Snippet } from 'svelte';
-  import Icon from '../../icons/Icon.svelte';
-
-  interface Props extends ItemProps {
-    children?: Snippet<[ItemSlotProps]>;
-    class?: string;
-  }
-
-  let { class: className = '', children, ...restProps }: Props = $props();
-
-  const baseClasses = `
-        relative flex w-full h-auto gap-2 cursor-default select-none items-center justify-between rounded-lg p-3 text-sm outline-none
-        focus:bg-neutral focus:text-accent-foreground
-        data-[disabled]:pointer-events-none data-[disabled]:opacity-50
-        data-[highlighted]:bg-neutral data-[highlighted]:text-accent-foreground
-    `;
-</script>
-
-<SelectPrimitive.Item {...restProps} class={baseClasses + ' ' + className}>
-  {#snippet children(params: ItemSlotProps)}
-    {#if children}
-      {@render children(params)}
-    {:else}
-      <span>
-        {restProps.label ??
-          (typeof restProps.value === 'string' || typeof restProps.value === 'number'
-            ? restProps.value
-            : 'Item')}</span
-      >
-    {/if}
-    {#if params.selected}
-      <Icon iconName="Check" color="accent" />
-    {/if}
-  {/snippet}
-</SelectPrimitive.Item>

package/dist/components/select/components/SelectItem.svelte.d.ts

@@ -1,9 +0,0 @@
-import type { ItemProps, ItemSlotProps } from '../types';
-import type { Snippet } from 'svelte';
-interface Props extends ItemProps {
-    children?: Snippet<[ItemSlotProps]>;
-    class?: string;
-}
-declare const SelectItem: import("svelte").Component<Props, {}, "">;
-type SelectItem = ReturnType<typeof SelectItem>;
-export default SelectItem;

package/dist/components/select/components/SelectTrigger.svelte

@@ -1,48 +0,0 @@
-<script lang="ts">
-  import { Select as SelectPrimitive } from 'bits-ui';
-  import type { TriggerProps, IconSnippet } from '../types';
-
-  import type { Snippet } from 'svelte';
-  import { Icon } from '../../icons';
-
-  interface Props extends TriggerProps {
-    TriggerIcon?: IconSnippet;
-    children?: Snippet;
-    class?: string;
-    placeholder?: string;
-    displayValue?: string;
-  }
-
-  let {
-    class: className = '',
-    TriggerIcon = undefined,
-    children,
-    placeholder = 'Select an option',
-    displayValue = undefined,
-    ...restProps
-  }: Props = $props();
-
-  const baseClasses =
-    'flex h-10 w-full items-center justify-between rounded-lg border border-input bg-surface p-2 text-sm placeholder:text-tertiary focus:outline-none hover:border-hover focus:border-accent disabled:cursor-not-allowed disabled:opacity-50 transition-colors shadow-input';
-</script>
-
-<SelectPrimitive.Trigger
-  {...restProps}
-  class={baseClasses + ' ' + className}
-  aria-label={placeholder}
->
-  <div class="flex-1 truncate text-left">
-    {#if children}
-      {@render children()}
-    {:else if displayValue !== undefined}
-      {displayValue}
-    {:else}
-      <span class="text-tertiary">{placeholder}</span>
-    {/if}
-  </div>
-  {#if TriggerIcon}
-    {@render TriggerIcon()}
-  {:else}
-    <Icon iconName="CaretDown" color="secondary" class="mx-1 shrink-0" />
-  {/if}
-</SelectPrimitive.Trigger>

package/dist/components/select/components/SelectTrigger.svelte.d.ts

@@ -1,12 +0,0 @@
-import type { TriggerProps, IconSnippet } from '../types';
-import type { Snippet } from 'svelte';
-interface Props extends TriggerProps {
-    TriggerIcon?: IconSnippet;
-    children?: Snippet;
-    class?: string;
-    placeholder?: string;
-    displayValue?: string;
-}
-declare const SelectTrigger: import("svelte").Component<Props, {}, "">;
-type SelectTrigger = ReturnType<typeof SelectTrigger>;
-export default SelectTrigger;

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

@@ -1,10 +0,0 @@
-import Content from './components/SelectContent.svelte';
-import Item from './components/SelectItem.svelte';
-import GroupHeading from './components/SelectGroupHeading.svelte';
-import Trigger from './components/SelectTrigger.svelte';
-import MultiSelectTrigger from './components/MultiSelectTrigger.svelte';
-import Group from './components/Group.svelte';
-export declare const Root: import("svelte").Component<import("bits-ui").ComboboxRootPropsWithoutHTML, {}, "value" | "open">;
-export declare const Portal: import("svelte").Component<import("bits-ui").PortalProps, {}, "">;
-export { Content, Item, Group, GroupHeading, Trigger, MultiSelectTrigger };
-export * from './types';

package/dist/components/select/index.js

@@ -1,12 +0,0 @@
-import { Select as SelectPrimitive } from 'bits-ui';
-// Custom Svelte components
-import Content from './components/SelectContent.svelte';
-import Item from './components/SelectItem.svelte';
-import GroupHeading from './components/SelectGroupHeading.svelte';
-import Trigger from './components/SelectTrigger.svelte';
-import MultiSelectTrigger from './components/MultiSelectTrigger.svelte';
-import Group from './components/Group.svelte';
-export const Root = SelectPrimitive.Root;
-export const Portal = SelectPrimitive.Portal;
-export { Content, Item, Group, GroupHeading, Trigger, MultiSelectTrigger };
-export * from './types';

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

@@ -1,25 +0,0 @@
-import { Select as SelectPrimitive } from 'bits-ui';
-import type { HTMLAttributes, HTMLButtonAttributes } from 'svelte/elements';
-import type { Snippet } from 'svelte';
-export type Props = SelectPrimitive.RootProps;
-export type TriggerProps = SelectPrimitive.TriggerProps;
-export type TriggerAttributes = HTMLButtonAttributes;
-export type ContentProps = SelectPrimitive.ContentProps;
-export type ContentAttributes = HTMLAttributes<HTMLElement>;
-export type ItemProps = SelectPrimitive.ItemProps;
-export type ItemAttributes = HTMLAttributes<HTMLElement>;
-export type GroupProps = SelectPrimitive.GroupProps;
-export type GroupAttributes = HTMLAttributes<HTMLElement>;
-export type GroupHeadingProps = SelectPrimitive.GroupHeadingProps;
-export type GroupHeadingAttributes = HTMLAttributes<HTMLElement>;
-export type Option = {
-    value: string | number;
-    label: string;
-    disabled?: boolean;
-    [key: string]: unknown;
-};
-export type ItemSlotProps = {
-    selected: boolean;
-    highlighted: boolean;
-};
-export type IconSnippet = Snippet;

package/dist/components/select/types.js

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