@reshape-biotech/design-system 1.2.5 → 1.2.7

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

@@ -1,219 +1,219 @@
 <script module lang="ts">
-	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';
+  import * as Select from './index';
+  import { Icon, type IconName } from '../icons';
 
-	const { Story } = defineMeta({
-		title: 'Design System/Select(New)',
+  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 }
-		}
-	});
+    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 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' }
-	];
+  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']);
+  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 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
-		);
-	};
+  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}
-			/>
+  <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>
+      <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>
+  <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>
+  <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>
+  <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>
+  <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>
+  <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>
+  <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-new/components/Group.svelte

@@ -1,24 +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';
+  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;
-	}
+  interface Props extends PrimitiveGroupProps {
+    label?: string;
+    children: Snippet;
+    class?: string;
+    contentClass?: string;
+  }
 
-	let { label, children, class: className, contentClass, ...restProps }: Props = $props();
+  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>
+  {#if label}
+    <GroupHeading>{label}</GroupHeading>
+  {/if}
+  <div class={contentClass}>
+    {@render children()}
+  </div>
 </SelectPrimitive.Group>

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

@@ -1,66 +1,66 @@
 <script lang="ts">
-	import * as Select from '../index';
-	import { Icon, type IconName } from '../../icons';
-	import IconButton from '../../icon-button/IconButton.svelte';
+  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;
-	};
+  type ItemType = {
+    value: string;
+    label: string;
+    iconName?: IconName | string;
+  };
 
-	interface Props {
-		selectedValues: string[];
-		items: ItemType[];
-		onRemoveItem: (itemValue: string) => void;
-		placeholder?: string;
-		class?: string;
-		[key: string]: any;
-	}
+  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();
+  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}
+  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>{item.label}</span>
-						<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>
-					</div>
-				{/if}
-			{/each}
-		</div>
-	{/if}
+  {#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>{item.label}</span>
+            <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>
+          </div>
+        {/if}
+      {/each}
+    </div>
+  {/if}
 </Select.Trigger>

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

@@ -1,33 +1,33 @@
 <script lang="ts">
-	import { Select as SelectPrimitive } from 'bits-ui';
-	import type { ContentProps } from '../types';
+  import { Select as SelectPrimitive } from 'bits-ui';
+  import type { ContentProps } from '../types';
 
-	import type { Snippet } from 'svelte';
-	import Icon from '../../icons/Icon.svelte';
+  import type { Snippet } from 'svelte';
+  import Icon from '../../icons/Icon.svelte';
 
-	interface Props extends ContentProps {
-		children: Snippet;
-		class?: string;
-		sideOffset?: number;
-	}
+  interface Props extends ContentProps {
+    children: Snippet;
+    class?: string;
+    sideOffset?: number;
+  }
 
-	let { class: className = '', sideOffset = 4, children, ...restProps }: Props = $props();
+  let { class: className = '', sideOffset = 4, children, ...restProps }: Props = $props();
 
-	const baseClasses = `
+  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.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>