@reshape-biotech/design-system 1.2.6 → 2.0.0

package/dist/components/required-status-indicator/RequiredStatusIndicator.stories.svelte

@@ -1,17 +1,17 @@
 <script module lang="ts">
-	import { defineMeta } from '@storybook/addon-svelte-csf';
-	import RequiredStatusIndicator from './RequiredStatusIndicator.svelte';
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+  import RequiredStatusIndicator from './RequiredStatusIndicator.svelte';
 
-	const { Story } = defineMeta({
-		title: 'Design System/RequiredStatusIndicator',
-		component: RequiredStatusIndicator,
-		tags: ['autodocs'],
-		argTypes: {
-			currentCount: { control: 'number', description: 'Current number of completed items' },
-			requiredCount: { control: 'number', description: 'Total number of required items' },
-			class: { control: 'text', description: 'Optional additional CSS classes' }
-		}
-	});
+  const { Story } = defineMeta({
+    title: 'Design System/RequiredStatusIndicator',
+    component: RequiredStatusIndicator,
+    tags: ['autodocs'],
+    argTypes: {
+      currentCount: { control: 'number', description: 'Current number of completed items' },
+      requiredCount: { control: 'number', description: 'Total number of required items' },
+      class: { control: 'text', description: 'Optional additional CSS classes' },
+    },
+  });
 </script>
 
 <Story name="Incomplete" args={{ currentCount: 1, requiredCount: 3 }} />
@@ -19,10 +19,10 @@
 <Story name="Complete" args={{ currentCount: 3, requiredCount: 3 }} />
 
 <Story
-	name="CustomClass"
-	args={{
-		currentCount: 2,
-		requiredCount: 4,
-		class: 'text-lg text-warning'
-	}}
+  name="CustomClass"
+  args={{
+    currentCount: 2,
+    requiredCount: 4,
+    class: 'text-lg text-warning',
+  }}
 />

package/dist/components/required-status-indicator/RequiredStatusIndicator.svelte

@@ -1,22 +1,22 @@
 <script lang="ts">
-	import { Icon } from '../icons';
+  import { Icon } from '../icons';
 
-	type Props = {
-		currentCount: number;
-		requiredCount: number;
-		class?: string;
-	};
+  type Props = {
+    currentCount: number;
+    requiredCount: number;
+    class?: string;
+  };
 
-	let { currentCount, requiredCount, class: className = '' }: Props = $props();
+  let { currentCount, requiredCount, class: className = '' }: Props = $props();
 
-	const isComplete = $derived(currentCount >= requiredCount);
+  const isComplete = $derived(currentCount >= requiredCount);
 </script>
 
 <span class={`flex items-center gap-1 text-sm text-tertiary ${className}`}>
-	{currentCount} of {requiredCount} required
-	{#if isComplete}
-		<Icon iconName="CheckCircle" weight="fill" color="accent" size={16} />
-	{:else}
-		<Icon iconName="CheckCircle" size={16} />
-	{/if}
+  {currentCount} of {requiredCount} required
+  {#if isComplete}
+    <Icon iconName="CheckCircle" weight="fill" color="accent" size={16} />
+  {:else}
+    <Icon iconName="CheckCircle" size={16} />
+  {/if}
 </span>

package/dist/components/segmented-control-buttons/ControlButton.svelte

@@ -1,54 +1,54 @@
 <script lang="ts">
-	import type { Snippet } from 'svelte';
+  import type { Snippet } from 'svelte';
 
-	type Color = 'primary' | 'secondary';
+  type Color = 'primary' | 'secondary';
 
-	interface Props {
-		class?: string;
-		color?: Color;
-		disabled?: boolean;
-		active?: boolean;
-		dataTestId?: string;
-		onclick?: () => void;
-		children?: Snippet;
-	}
+  interface Props {
+    class?: string;
+    color?: Color;
+    disabled?: boolean;
+    active?: boolean;
+    dataTestId?: string;
+    onclick?: () => void;
+    children?: Snippet;
+  }
 
-	let {
-		class: className = '',
-		color = 'primary',
-		disabled = false,
-		active = false,
-		dataTestId,
-		onclick,
-		children
-	}: Props = $props();
-	const colors: Record<Color, string> = {
-		primary: 'bg-transparent text-primary hover:bg-neutral disabled:text-tertiary',
-		secondary: 'bg-transparent text-primary hover:bg-neutral disabled:text-tertiary'
-	};
+  let {
+    class: className = '',
+    color = 'primary',
+    disabled = false,
+    active = false,
+    dataTestId,
+    onclick,
+    children,
+  }: Props = $props();
+  const colors: Record<Color, string> = {
+    primary: 'bg-transparent text-primary hover:bg-neutral disabled:text-tertiary',
+    secondary: 'bg-transparent text-primary hover:bg-neutral disabled:text-tertiary',
+  };
 </script>
 
 <div class="join-item flex h-full flex-1">
-	<button
-		{onclick}
-		class={`control-button flex flex-1 items-center justify-center gap-2 rounded-md text-sm leading-4 ${colors[color]} ${className} ${color}`}
-		class:active
-		type="button"
-		{disabled}
-		data-testid={dataTestId}
-	>
-		{@render children?.()}
-	</button>
+  <button
+    {onclick}
+    class={`control-button flex flex-1 items-center justify-center gap-2 rounded-md text-sm leading-4 ${colors[color]} ${className} ${color}`}
+    class:active
+    type="button"
+    {disabled}
+    data-testid={dataTestId}
+  >
+    {@render children?.()}
+  </button>
 </div>
 
 <style>
-	.primary.active {
+  .primary.active {
     --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))
 }
-	.secondary.active {
+  .secondary.active {
     --tw-bg-opacity: 1;
     background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
     --tw-text-opacity: 1;

package/dist/components/segmented-control-buttons/SegmentedControlButtons.stories.svelte

@@ -1,45 +1,45 @@
 <script module lang="ts">
-	import { Icon } from '../icons';
-	import SegmentedControlButtons from './SegmentedControlButtons.svelte';
-	import { defineMeta } from '@storybook/addon-svelte-csf';
+  import { Icon } from '../icons';
+  import SegmentedControlButtons from './SegmentedControlButtons.svelte';
+  import { defineMeta } from '@storybook/addon-svelte-csf';
 
-	const { Story } = defineMeta({
-		component: SegmentedControlButtons,
-		title: 'Design System/SegmentedControlButtons',
-		tags: ['autodocs']
-	});
+  const { Story } = defineMeta({
+    component: SegmentedControlButtons,
+    title: 'Design System/SegmentedControlButtons',
+    tags: ['autodocs'],
+  });
 </script>
 
 <Story name="Primary" asChild>
-	<SegmentedControlButtons class="w-[350px]">
-		{#snippet children({ ControlButton })}
-			<ControlButton active><Icon iconName="Star" /> Low</ControlButton>
-			<ControlButton><Icon iconName="Star" /> Medium</ControlButton>
-			<ControlButton disabled><Icon iconName="Star" /> High</ControlButton>
-		{/snippet}
-	</SegmentedControlButtons>
+  <SegmentedControlButtons class="w-[350px]">
+    {#snippet children({ ControlButton })}
+      <ControlButton active><Icon iconName="Star" /> Low</ControlButton>
+      <ControlButton><Icon iconName="Star" /> Medium</ControlButton>
+      <ControlButton disabled><Icon iconName="Star" /> High</ControlButton>
+    {/snippet}
+  </SegmentedControlButtons>
 </Story>
 <Story name="Large" asChild>
-	<SegmentedControlButtons size="lg" class="w-[350px]">
-		{#snippet children({ ControlButton })}
-			<ControlButton active><Icon iconName="Star" /> Low</ControlButton>
-			<ControlButton><Icon iconName="Star" /> Medium</ControlButton>
-			<ControlButton disabled><Icon iconName="Star" /> High</ControlButton>
-		{/snippet}
-	</SegmentedControlButtons>
+  <SegmentedControlButtons size="lg" class="w-[350px]">
+    {#snippet children({ ControlButton })}
+      <ControlButton active><Icon iconName="Star" /> Low</ControlButton>
+      <ControlButton><Icon iconName="Star" /> Medium</ControlButton>
+      <ControlButton disabled><Icon iconName="Star" /> High</ControlButton>
+    {/snippet}
+  </SegmentedControlButtons>
 </Story>
 <Story name="Secondary" asChild>
-	<SegmentedControlButtons class="w-[350px]">
-		{#snippet children({ ControlButton })}
-			<ControlButton active color="secondary">
-				<Icon iconName="Star" /> Low
-			</ControlButton>
-			<ControlButton color="secondary">
-				<Icon iconName="Star" /> Medium
-			</ControlButton>
-			<ControlButton color="secondary">
-				<Icon iconName="Star" /> High
-			</ControlButton>
-		{/snippet}
-	</SegmentedControlButtons>
+  <SegmentedControlButtons class="w-[350px]">
+    {#snippet children({ ControlButton })}
+      <ControlButton active color="secondary">
+        <Icon iconName="Star" /> Low
+      </ControlButton>
+      <ControlButton color="secondary">
+        <Icon iconName="Star" /> Medium
+      </ControlButton>
+      <ControlButton color="secondary">
+        <Icon iconName="Star" /> High
+      </ControlButton>
+    {/snippet}
+  </SegmentedControlButtons>
 </Story>

package/dist/components/segmented-control-buttons/SegmentedControlButtons.svelte

@@ -1,21 +1,21 @@
 <script lang="ts">
-	import type { Snippet } from 'svelte';
-	import ControlButton from './ControlButton.svelte';
+  import type { Snippet } from 'svelte';
+  import ControlButton from './ControlButton.svelte';
 
-	interface Props {
-		class?: string;
-		size?: 'md' | 'lg';
-		children?: Snippet<[{ ControlButton: typeof ControlButton }]>;
-	}
+  interface Props {
+    class?: string;
+    size?: 'md' | 'lg';
+    children?: Snippet<[{ ControlButton: typeof ControlButton }]>;
+  }
 
-	let { class: className = '', size = 'md', children }: Props = $props();
+  let { class: className = '', size = 'md', children }: Props = $props();
 
-	const sizes = {
-		md: 'h-10 ',
-		lg: 'h-16 [&>*>.control-button]:flex-col'
-	};
+  const sizes = {
+    md: 'h-10 ',
+    lg: 'h-16 [&>*>.control-button]:flex-col',
+  };
 </script>
 
 <div class={`join flex gap-1 rounded-lg bg-neutral p-1 ${sizes[size]} ${size} ${className}`}>
-	{@render children?.({ ControlButton })}
+  {@render children?.({ ControlButton })}
 </div>

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

@@ -1,113 +1,219 @@
 <script module lang="ts">
-	import Select from './Select.svelte';
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+  import * as Select from './index';
+  import { Icon, type IconName } from '../icons';
 
-	import { defineMeta } from '@storybook/addon-svelte-csf';
+  const { Story } = defineMeta({
+    title: 'Design System/Select(New)',
 
-	const { Story } = defineMeta({
-		component: Select,
-		title: 'Design System/Select',
-		tags: ['autodocs']
-	});
+    argTypes: {
+      placeholder: { control: 'text', defaultValue: 'Select an option...' },
+      disabled: { control: 'boolean', defaultValue: false },
+      multiple: { control: 'boolean', defaultValue: false },
+    },
+  });
 
-	const items = [
-		{ value: '1', label: 'One', group: 'Group 1', description: 'Description 1' },
-		{ value: '2', label: 'Two', group: 'Group 1', description: 'Description 2' },
-		{ value: '3', label: 'Three', group: 'Group 2' },
-		{ value: '4', label: 'Four', group: 'Group 2' }
-	];
-	let value: any = $state();
-	let thisChanged = $state(false);
+  const foodGroups = [
+    { value: 'fruits', label: 'Fruits' },
+    { value: 'vegetables', label: 'Vegetables' },
+    { value: 'grains', label: 'Grains' },
+    { value: 'protein', label: 'Protein Foods' },
+    { value: 'dairy', label: 'Dairy' },
+  ];
 
-	function handleInput(e: Event) {
-		thisChanged = true;
-	}
+  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" asChild>
-	<div class="py-12">
-		<Select listOpen {items} />
-	</div>
-</Story>
-<Story name="Grouped" asChild>
-	<div class="py-12">
-		<Select listOpen {items} withGroup />
-	</div>
-</Story>
+<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}
+      />
 
-<Story name="DefaultValue" asChild>
-	<div class="py-12">
-		<Select listOpen {items} withGroup value={{ value: '1', label: 'One', group: 'Group 1' }} />
-	</div>
+      <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="Disabled" asChild>
-	<div class="py-12">
-		<Select listOpen {items} disabled />
-	</div>
+<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="Searchable" asChild>
-	<div class="py-12">
-		<Select listOpen {items} searchable />
-	</div>
-</Story>
-<Story name="Open" asChild>
-	<div class="py-12">
-		<Select listOpen {items} />
-	</div>
-</Story>
-<Story name="Error" asChild>
-	<div class="py-12">
-		<Select listOpen {items} hasError />
-	</div>
-</Story>
-<Story name="Placeholder" asChild>
-	<div class="py-12">
-		<Select listOpen {items} placeholder="Select a value" />
-	</div>
+
+<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="Multiple" asChild>
-	<div class="py-12">
-		<Select listOpen {items} multiple bind:value />
-	</div>
+
+<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="Bind value input changed" asChild>
-	<div class="py-12">
-		<Select listOpen {items} bind:value on:input={handleInput} />
-		{#if thisChanged}
-			<p class="text-secondary">Wow you picked something from the dropdown 💪</p>{/if}
-	</div>
+<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="Custom Item" asChild>
-	<div class="py-12">
-		<Select listOpen {items} value={{ value: '1', label: 'One', group: 'Group 1' }}>
-			<!-- @migration-task: migrate this slot by hand, `custom-item` is an invalid identifier -->
-			<div
-				slot="custom-item"
-				class="flex h-14 w-full items-center overflow-hidden whitespace-nowrap"
-				let:item
-			>
-				<div class="flex flex-col">
-					<p class="text-sm">
-						{item.label}
-					</p>
-					<p class="max-w-20 text-xs text-secondary">
-						{item.description} very very long long loooooong long description
-					</p>
-				</div>
-			</div>
-		</Select>
-	</div>
+<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="Custom selection label" asChild>
-	<div class="py-12">
-		<Select {items} value={{ value: '1', label: 'One', group: 'Group 1' }}>
-			<!-- @migration-task: migrate this slot by hand, `custom-selection` is an invalid identifier -->
-			<div slot="custom-selection" let:selection>
-				<p>💩{selection.label} poopoo💩</p>
-			</div>
-		</Select>
-	</div>
+<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,4 +1,4 @@
-import Select from './Select.svelte';
+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;

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

@@ -0,0 +1,24 @@
+<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>