@reshape-biotech/design-system 0.0.54 → 1.1.2

package/dist/components/modal/Modal.svelte

@@ -1,28 +1,35 @@
 <script lang="ts">
-	import type { Snippet } from 'svelte';
+	import { type Snippet } from 'svelte';
 	import { v4 as uuidv4 } from 'uuid';
 	import IconButton from '../icon-button/IconButton.svelte';
 	import { Icon } from '../icons';
+	import Divider from '../divider/Divider.svelte';
 
 	type ModalProps = {
 		Trigger?: Snippet<[{ openModal: () => void; closeModal: () => void }]>;
+		Header?: Snippet;
 		Content: Snippet;
+		Footer?: Snippet;
 		onclose?: () => void;
 		defaultOpen?: boolean;
 		id?: string;
 		withClose?: boolean;
 		closeOnClickOutside?: boolean;
 		class?: string;
+		contentClass?: string;
 	};
 	let {
 		Trigger,
+		Header,
 		Content,
+		Footer,
 		onclose,
 		defaultOpen = false,
 		id = 'modal-' + uuidv4(),
 		withClose = true,
 		closeOnClickOutside = true,
-		class: modalClass
+		class: modalClass,
+		contentClass = 'p-4'
 	}: ModalProps = $props();
 
 	const modalOpen = $state(defaultOpen);
@@ -42,15 +49,29 @@
 	{@render Trigger({ openModal, closeModal })}
 {/if}
 <dialog {id} class="modal w-full max-w-full" class:modal-open={modalOpen}>
-	<div class="modal-box {modalClass}">
+	<div class="modal-box relative flex max-w-full flex-col rounded-xl bg-surface p-0 {modalClass}">
+		{#if Header}
+			<div class="flex h-12 items-center px-4">
+				{@render Header()}
+			</div>
+			<Divider />
+		{/if}
 		{#if withClose}
-			<div class="close-button">
-				<IconButton onclick={closeModal} size="md" variant="secondary">
+			<div class="absolute right-0 top-0 z-10 p-2">
+				<IconButton onclick={closeModal} size="md" variant="transparent" rounded={false}>
 					<Icon iconName="X" />
 				</IconButton>
 			</div>
 		{/if}
-		{@render Content()}
+		<div class="flex-1 {contentClass}">
+			{@render Content()}
+		</div>
+		{#if Footer}
+			<Divider />
+			<div class="px-4 py-2">
+				{@render Footer()}
+			</div>
+		{/if}
 	</div>
 	{#if closeOnClickOutside}
 		<form method="dialog" class="modal-backdrop">
@@ -58,19 +79,3 @@
 		</form>
 	{/if}
 </dialog>
-
-<style>
-	.modal-box {
-    position: relative;
-    max-width: 100%;
-    border-radius: 0.75rem;
-    --tw-bg-opacity: 1;
-    background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1))
-}
-	.close-button {
-    position: absolute;
-    right: 0px;
-    top: 0px;
-    padding: 1.5rem
-}
-</style>

package/dist/components/modal/Modal.svelte.d.ts

@@ -1,16 +1,19 @@
-import type { Snippet } from 'svelte';
+import { type Snippet } from 'svelte';
 type ModalProps = {
     Trigger?: Snippet<[{
         openModal: () => void;
         closeModal: () => void;
     }]>;
+    Header?: Snippet;
     Content: Snippet;
+    Footer?: Snippet;
     onclose?: () => void;
     defaultOpen?: boolean;
     id?: string;
     withClose?: boolean;
     closeOnClickOutside?: boolean;
     class?: string;
+    contentClass?: string;
 };
 declare const Modal: import("svelte").Component<ModalProps, {}, "">;
 type Modal = ReturnType<typeof Modal>;

package/dist/components/notification-popup/NotificationPopup.stories.svelte

@@ -16,7 +16,7 @@
 	}
 </script>
 
-<Story name="Primary">
+<Story name="Primary" asChild>
 	<NotificationPopup onClose={handleClick} title="See what's new" {visible}>
 		<a href="_blank" color="transparent" class="flex items-center gap-2">
 			<Icon iconName="Sparkle" />

package/dist/components/pill/Pill.stories.svelte

@@ -0,0 +1,13 @@
+<script lang="ts" module>
+	import { defineMeta } from '@storybook/addon-svelte-csf';
+	import Pill from './Pill.svelte';
+
+	// More on how to set up stories at: https://storybook.js.org/docs/writing-stories
+	const { Story } = defineMeta({
+		title: 'Design System/Pill',
+		component: Pill,
+		tags: ['autodocs']
+	});
+</script>
+
+<Story name="Base" args={{ text: 'Example Pill' }} />

package/dist/components/pill/Pill.stories.svelte.d.ts

@@ -0,0 +1,19 @@
+import Pill from './Pill.svelte';
+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 Pill: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type Pill = InstanceType<typeof Pill>;
+export default Pill;

package/dist/components/progress-circle/ProgressCircle.stories.svelte

@@ -0,0 +1,15 @@
+<script lang="ts" module>
+	import { defineMeta } from '@storybook/addon-svelte-csf';
+	import ProgressCircle from './ProgressCircle.svelte';
+
+	// More on how to set up stories at: https://storybook.js.org/docs/writing-stories
+	const { Story } = defineMeta({
+		title: 'Design System/ProgressCircle',
+		component: ProgressCircle,
+		tags: ['autodocs']
+	});
+</script>
+
+<Story name="Base" args={{ progress: 20 }} />
+
+<Story name="Small" args={{ progress: 20, size: 'sm' }} />

package/dist/components/progress-circle/ProgressCircle.stories.svelte.d.ts

@@ -0,0 +1,19 @@
+import ProgressCircle from './ProgressCircle.svelte';
+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 ProgressCircle: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type ProgressCircle = InstanceType<typeof ProgressCircle>;
+export default ProgressCircle;

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

@@ -0,0 +1,28 @@
+<script module lang="ts">
+	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' }
+		}
+	});
+</script>
+
+<Story name="Incomplete" args={{ currentCount: 1, requiredCount: 3 }} />
+
+<Story name="Complete" args={{ currentCount: 3, requiredCount: 3 }} />
+
+<Story
+	name="CustomClass"
+	args={{
+		currentCount: 2,
+		requiredCount: 4,
+		class: 'text-lg text-warning'
+	}}
+/>

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

@@ -0,0 +1,19 @@
+import RequiredStatusIndicator from './RequiredStatusIndicator.svelte';
+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 RequiredStatusIndicator: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type RequiredStatusIndicator = InstanceType<typeof RequiredStatusIndicator>;
+export default RequiredStatusIndicator;

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

@@ -0,0 +1,22 @@
+<script lang="ts">
+	import { Icon } from '../icons';
+
+	type Props = {
+		currentCount: number;
+		requiredCount: number;
+		class?: string;
+	};
+
+	let { currentCount, requiredCount, class: className = '' }: Props = $props();
+
+	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}
+</span>

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

@@ -0,0 +1,8 @@
+type Props = {
+    currentCount: number;
+    requiredCount: number;
+    class?: string;
+};
+declare const RequiredStatusIndicator: import("svelte").Component<Props, {}, "">;
+type RequiredStatusIndicator = ReturnType<typeof RequiredStatusIndicator>;
+export default RequiredStatusIndicator;

package/dist/components/required-status-indicator/index.d.ts

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

package/dist/components/required-status-indicator/index.js

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

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

@@ -10,7 +10,7 @@
 	});
 </script>
 
-<Story name="Primary">
+<Story name="Primary" asChild>
 	<SegmentedControlButtons class="w-[350px]">
 		{#snippet children({ ControlButton })}
 			<ControlButton active><Icon iconName="Star" /> Low</ControlButton>
@@ -19,7 +19,7 @@
 		{/snippet}
 	</SegmentedControlButtons>
 </Story>
-<Story name="Large">
+<Story name="Large" asChild>
 	<SegmentedControlButtons size="lg" class="w-[350px]">
 		{#snippet children({ ControlButton })}
 			<ControlButton active><Icon iconName="Star" /> Low</ControlButton>
@@ -28,7 +28,7 @@
 		{/snippet}
 	</SegmentedControlButtons>
 </Story>
-<Story name="Secondary">
+<Story name="Secondary" asChild>
 	<SegmentedControlButtons class="w-[350px]">
 		{#snippet children({ ControlButton })}
 			<ControlButton active color="secondary">

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

@@ -23,55 +23,55 @@
 	}
 </script>
 
-<Story name="Default">
+<Story name="Default" asChild>
 	<div class="py-12">
 		<Select listOpen {items} />
 	</div>
 </Story>
-<Story name="Grouped">
+<Story name="Grouped" asChild>
 	<div class="py-12">
 		<Select listOpen {items} withGroup />
 	</div>
 </Story>
 
-<Story name="DefaultValue">
+<Story name="DefaultValue" asChild>
 	<div class="py-12">
 		<Select listOpen {items} withGroup value={{ value: '1', label: 'One', group: 'Group 1' }} />
 	</div>
 </Story>
 
-<Story name="Disabled">
+<Story name="Disabled" asChild>
 	<div class="py-12">
 		<Select listOpen {items} disabled />
 	</div>
 </Story>
-<Story name="Searchable">
+<Story name="Searchable" asChild>
 	<div class="py-12">
 		<Select listOpen {items} searchable />
 	</div>
 </Story>
-<Story name="Open">
+<Story name="Open" asChild>
 	<div class="py-12">
 		<Select listOpen {items} />
 	</div>
 </Story>
-<Story name="Error">
+<Story name="Error" asChild>
 	<div class="py-12">
 		<Select listOpen {items} hasError />
 	</div>
 </Story>
-<Story name="Placeholder">
+<Story name="Placeholder" asChild>
 	<div class="py-12">
 		<Select listOpen {items} placeholder="Select a value" />
 	</div>
 </Story>
-<Story name="Multiple">
+<Story name="Multiple" asChild>
 	<div class="py-12">
 		<Select listOpen {items} multiple bind:value />
 	</div>
 </Story>
 
-<Story name="Bind value input changed">
+<Story name="Bind value input changed" asChild>
 	<div class="py-12">
 		<Select listOpen {items} bind:value on:input={handleInput} />
 		{#if thisChanged}
@@ -79,7 +79,7 @@
 	</div>
 </Story>
 
-<Story name="Custom Item">
+<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 -->
@@ -101,7 +101,7 @@
 	</div>
 </Story>
 
-<Story name="Custom selection label">
+<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 -->

package/dist/components/select/Select.svelte

@@ -9,8 +9,6 @@
 	import SvelteSelect from 'svelte-select';
 	import type { SelectItemProps } from '.';
 
-	// Docs: https://github.com/rob-balfre/svelte-select
-
 	const dispatch = createEventDispatcher();
 
 	export let items: SelectItemProps[] = [];

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,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>