@reshape-biotech/design-system 0.0.52 → 1.1.1

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

@@ -0,0 +1,219 @@
+<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-new/Select.stories.svelte.d.ts

@@ -0,0 +1,19 @@
+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-new/components/Group.svelte

@@ -0,0 +1,23 @@
+<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;
+	}
+
+	let { label, children, class: className, ...restProps }: Props = $props();
+</script>
+
+<SelectPrimitive.Group class={className} {...restProps}>
+	{#if label}
+		<GroupHeading>{label}</GroupHeading>
+	{/if}
+	<div class="pl-2">
+		{@render children()}
+	</div>
+</SelectPrimitive.Group>

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

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

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

@@ -0,0 +1,66 @@
+<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;
+	};
+
+	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>{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/MultiSelectTrigger.svelte.d.ts

@@ -0,0 +1,17 @@
+import { type IconName } from '../../icons';
+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;
+}
+declare const MultiSelectTrigger: import("svelte").Component<Props, {}, "">;
+type MultiSelectTrigger = ReturnType<typeof MultiSelectTrigger>;
+export default MultiSelectTrigger;

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

@@ -0,0 +1,33 @@
+<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-new/components/SelectContent.svelte.d.ts

@@ -0,0 +1,10 @@
+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-new/components/SelectGroupHeading.svelte

@@ -0,0 +1,19 @@
+<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-new/components/SelectGroupHeading.svelte.d.ts

@@ -0,0 +1,9 @@
+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-new/components/SelectItem.svelte

@@ -0,0 +1,41 @@
+<script lang="ts">
+	import { Select as SelectPrimitive } from 'bits-ui';
+	import type { ItemProps, ItemSlotProps } from '../types';
+
+	import type { Snippet } from 'svelte';
+	import Check from 'phosphor-svelte/lib/Check';
+
+	interface Props extends ItemProps {
+		children?: Snippet<[ItemSlotProps]>;
+		class?: string;
+	}
+
+	let { class: className = '', children, ...restProps }: Props = $props();
+
+	const baseClasses = `
+        relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-2 pr-8 text-sm outline-none 
+        focus:bg-accent focus:text-accent-foreground 
+        data-[disabled]:pointer-events-none data-[disabled]:opacity-50
+        data-[highlighted]:bg-accent 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}
+			<span class="absolute right-2 flex h-3.5 w-3.5 items-center justify-center">
+				<Check class="h-4 w-4" />
+			</span>
+		{/if}
+	{/snippet}
+</SelectPrimitive.Item>

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

@@ -0,0 +1,9 @@
+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-new/components/SelectTrigger.svelte

@@ -0,0 +1,48 @@
+<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-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50';
+</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" class="ml-2 h-4 w-4 shrink-0 opacity-50" />
+	{/if}
+</SelectPrimitive.Trigger>

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

@@ -0,0 +1,12 @@
+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-new/index.d.ts

@@ -0,0 +1,10 @@
+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, {}, "open" | "value">;
+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-new/index.js

@@ -0,0 +1,12 @@
+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-new/types.d.ts

@@ -0,0 +1,25 @@
+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-new/types.js

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