@insymetri/styleguide 0.1.0

package/dist/IICombobox/IICombobox.svelte

@@ -0,0 +1,158 @@
+<script lang="ts" generics="T">
+	import type {Snippet} from 'svelte'
+	import {Combobox} from 'bits-ui'
+	import {IconCheck} from '../icons'
+	import {cn} from '../utils/cn'
+
+	// Simple default item type for basic usage
+	type SimpleItem = {
+		label: string
+		value: string
+		disabled?: boolean
+	}
+
+	type Props<T> = {
+		items: T[]
+		value?: string
+		placeholder?: string
+		disabled?: boolean
+		onSelect?: (item: T) => void
+		// Function to extract value from item (required for custom types)
+		getItemValue: (item: T) => string
+		// Function to check if item is disabled (optional)
+		getItemDisabled?: (item: T) => boolean
+		// Custom filter function (optional)
+		filterFn?: (items: T[], inputValue: string) => T[]
+		// Custom render function for items (optional, uses default if not provided)
+		renderItem?: Snippet<[item: T, selected: boolean]>
+		// Content shown inside dropdown when there are no items (e.g. loading/no results)
+		emptyContent?: Snippet
+		// CSS classes
+		class?: string
+		contentClass?: string
+	}
+
+	let {
+		items,
+		value = $bindable(''),
+		placeholder = 'Select...',
+		disabled = false,
+		onSelect,
+		getItemValue,
+		getItemDisabled,
+		filterFn,
+		renderItem,
+		emptyContent,
+		class: className,
+		contentClass,
+	}: Props<T> = $props()
+
+	let inputValue = $state('')
+	let open = $state(false)
+
+	// Default filter for simple items
+	function defaultFilter(items: T[], inputValue: string): T[] {
+		if (!inputValue) return items
+		return items.filter(item => {
+			const itemValue = getItemValue(item)
+			// If item is a SimpleItem, use label for filtering
+			if (typeof item === 'object' && item !== null && 'label' in item) {
+				return (item as unknown as SimpleItem).label.toLowerCase().includes(inputValue.toLowerCase())
+			}
+			// Otherwise filter by value
+			return itemValue.toLowerCase().includes(inputValue.toLowerCase())
+		})
+	}
+
+	const filteredItems = $derived.by(() => {
+		if (filterFn) {
+			return filterFn(items, inputValue)
+		}
+		return defaultFilter(items, inputValue)
+	})
+
+	function handleValueChange(newValue: string | undefined) {
+		value = newValue || ''
+		if (newValue && onSelect) {
+			const selectedItem = items.find(item => getItemValue(item) === newValue)
+			if (selectedItem) {
+				onSelect(selectedItem)
+			}
+		}
+	}
+
+	function handleOpenChange(newOpen: boolean) {
+		open = newOpen
+		if (!newOpen) {
+			inputValue = ''
+		}
+	}
+
+	function handleInput(e: Event & {currentTarget: HTMLInputElement}) {
+		inputValue = e.currentTarget.value
+	}
+
+	// Check if item looks like a SimpleItem for default rendering
+	function isSimpleItem(item: T): item is T & SimpleItem {
+		return typeof item === 'object' && item !== null && 'label' in item && 'value' in item
+	}
+</script>
+
+<div class={cn('block w-full', className)}>
+	<Combobox.Root
+		type="single"
+		bind:value
+		onValueChange={handleValueChange}
+		{disabled}
+		{open}
+		onOpenChange={handleOpenChange}
+	>
+		<Combobox.Input
+			{placeholder}
+			{disabled}
+			oninput={handleInput}
+			class="w-full box-border py-6 px-12 text-small text-input-text bg-input-bg border border-input-border rounded-10 transition-all duration-fast outline-none placeholder:text-input-placeholder hover:border-input-border-hover focus:border-input-border-hover disabled:opacity-50 disabled:cursor-not-allowed disabled:bg-input-bg-disabled motion-reduce:transition-none"
+		/>
+		<Combobox.Portal>
+			{#if filteredItems.length > 0 || emptyContent}
+				<Combobox.Content
+					class={cn(
+						'bg-surface border border-primary rounded-b-6 border-t-0 shadow-dropdown p-4 max-h-300 overflow-y-auto z-12',
+						contentClass
+					)}
+					style="width: calc(var(--bits-floating-anchor-width) - 4px)"
+					sideOffset={2}
+					align="start"
+				>
+					{#each filteredItems as item, i (i + '-' + getItemValue(item))}
+						<Combobox.Item
+							value={getItemValue(item)}
+							label=""
+							disabled={getItemDisabled?.(item) ?? false}
+							class="flex items-center gap-8 py-6 px-12 text-small text-dropdown-item rounded-4 cursor-default transition-all duration-fast outline-none hover:bg-dropdown-item-hover data-[highlighted]:bg-dropdown-item-hover data-[selected]:bg-dropdown-item-selected data-[disabled]:opacity-50 data-[disabled]:cursor-not-allowed motion-reduce:transition-none"
+						>
+							{#snippet children({selected})}
+								{#if renderItem}
+									{@render renderItem(item, selected)}
+								{:else if isSimpleItem(item)}
+									<span class="flex-1">{item.label}</span>
+									{#if selected}
+										<IconCheck class="w-18 h-18 shrink-0 ml-auto" />
+									{/if}
+								{:else}
+									<span class="flex-1">{getItemValue(item)}</span>
+									{#if selected}
+										<IconCheck class="w-18 h-18 shrink-0 ml-auto" />
+									{/if}
+								{/if}
+							{/snippet}
+						</Combobox.Item>
+					{/each}
+					{#if filteredItems.length === 0 && emptyContent}
+						{@render emptyContent()}
+					{/if}
+				</Combobox.Content>
+			{/if}
+		</Combobox.Portal>
+	</Combobox.Root>
+</div>

package/dist/IICombobox/IICombobox.svelte.d.ts

@@ -0,0 +1,39 @@
+import type { Snippet } from 'svelte';
+type Props<T> = {
+    items: T[];
+    value?: string;
+    placeholder?: string;
+    disabled?: boolean;
+    onSelect?: (item: T) => void;
+    getItemValue: (item: T) => string;
+    getItemDisabled?: (item: T) => boolean;
+    filterFn?: (items: T[], inputValue: string) => T[];
+    renderItem?: Snippet<[item: T, selected: boolean]>;
+    emptyContent?: Snippet;
+    class?: string;
+    contentClass?: string;
+};
+declare function $$render<T>(): {
+    props: Props<T>;
+    exports: {};
+    bindings: "value";
+    slots: {};
+    events: {};
+};
+declare class __sveltets_Render<T> {
+    props(): ReturnType<typeof $$render<T>>['props'];
+    events(): ReturnType<typeof $$render<T>>['events'];
+    slots(): ReturnType<typeof $$render<T>>['slots'];
+    bindings(): "value";
+    exports(): {};
+}
+interface $$IsomorphicComponent {
+    new <T>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<T>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<T>['props']>, ReturnType<__sveltets_Render<T>['events']>, ReturnType<__sveltets_Render<T>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<T>['bindings']>;
+    } & ReturnType<__sveltets_Render<T>['exports']>;
+    <T>(internal: unknown, props: ReturnType<__sveltets_Render<T>['props']> & {}): ReturnType<__sveltets_Render<T>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
+}
+declare const IICombobox: $$IsomorphicComponent;
+type IICombobox<T> = InstanceType<typeof IICombobox<T>>;
+export default IICombobox;

package/dist/IICombobox/index.d.ts

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

package/dist/IICombobox/index.js

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

package/dist/IIDatePicker/IIDatePicker.svelte

@@ -0,0 +1,107 @@
+<script lang="ts">
+	import {DatePicker} from 'bits-ui'
+	import type {DateValue} from '@internationalized/date'
+	import {IconCalendar} from '../icons'
+
+	type Props = {
+		value: DateValue | undefined
+		label?: string
+		onValueChange?: (value: DateValue | undefined) => void
+	}
+
+	let {value = $bindable(), label, onValueChange}: Props = $props()
+</script>
+
+<DatePicker.Root bind:value {onValueChange}>
+	{#if label}
+		<DatePicker.Label class="text-small-emphasis text-gray-700 mb-8 block">{label}</DatePicker.Label>
+	{/if}
+	<div class="relative">
+		<DatePicker.Input
+			class="flex items-center gap-4 py-6 px-12 border border-strong rounded-10 text-small text-gray-800 bg-surface transition-all duration-fast [&:has(:focus)]:border-primary [&:has(:focus)]:ring-3 [&:has(:focus)]:ring-primary"
+		>
+			{#snippet children({segments})}
+				{#each segments as { part, value: segValue }, i (`${part}-${i}`)}
+					<DatePicker.Segment
+						{part}
+						class="py-4 min-w-[2ch] text-center outline-none cursor-text rounded-4 transition-all duration-fast focus:bg-primary focus:text-inverse data-[placeholder]:text-tertiary motion-reduce:transition-none"
+					>
+						{segValue}
+					</DatePicker.Segment>
+				{/each}
+				<DatePicker.Trigger
+					class="[all:unset] flex items-center justify-center p-4 ml-auto rounded-4 cursor-default text-secondary transition-all duration-fast hover:bg-gray-100 hover:text-body [&_svg]:w-11 [&_svg]:h-11 motion-reduce:transition-none"
+				>
+					<IconCalendar />
+				</DatePicker.Trigger>
+			{/snippet}
+		</DatePicker.Input>
+	</div>
+	<DatePicker.Content class="bg-surface border border-primary rounded-10 shadow-dropdown p-12 z-12 min-w-280">
+		<DatePicker.Calendar>
+			{#snippet children({months, weekdays})}
+				<div class="flex items-center justify-between gap-16 mb-12">
+					<DatePicker.MonthSelect aria-label="Select month" monthFormat="long">
+						{#snippet child({props, monthItems, selectedMonthItem})}
+							<select
+								{...props}
+								class="appearance-none bg-transparent border-0 py-4 pr-16 pl-0 text-small-emphasis text-body cursor-pointer focus:outline-none flex-1"
+								style="background-image: url(&quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E&quot;); background-repeat: no-repeat; background-position: right center"
+							>
+								{#each monthItems as month (month.value)}
+									<option value={month.value} selected={month.value === selectedMonthItem.value}>
+										{month.label}
+									</option>
+								{/each}
+							</select>
+						{/snippet}
+					</DatePicker.MonthSelect>
+					<DatePicker.YearSelect aria-label="Select year">
+						{#snippet child({props, yearItems, selectedYearItem})}
+							<select
+								{...props}
+								class="appearance-none bg-transparent border-0 py-4 pr-16 pl-0 text-small-emphasis text-body cursor-pointer focus:outline-none"
+								style="background-image: url(&quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E&quot;); background-repeat: no-repeat; background-position: right center"
+							>
+								{#each yearItems as year (year.value)}
+									<option value={year.value} selected={year.value === selectedYearItem.value}>
+										{year.label}
+									</option>
+								{/each}
+							</select>
+						{/snippet}
+					</DatePicker.YearSelect>
+				</div>
+
+				{#each months as month (month.value.toString())}
+					<DatePicker.Grid class="w-full border-collapse">
+						<DatePicker.GridHead>
+							<DatePicker.GridRow class="flex w-full">
+								{#each weekdays as day, i (`day-${i}`)}
+									<DatePicker.HeadCell class="flex-1 text-center text-tiny-emphasis text-secondary p-4 uppercase">
+										{day.slice(0, 2)}
+									</DatePicker.HeadCell>
+								{/each}
+							</DatePicker.GridRow>
+						</DatePicker.GridHead>
+						<DatePicker.GridBody>
+							{#each month.weeks as weekDates, weekIndex (weekIndex)}
+								<DatePicker.GridRow class="flex w-full">
+									{#each weekDates as date (date.toString())}
+										<DatePicker.Cell {date} month={month.value} class="flex-1 aspect-square p-2">
+											<DatePicker.Day
+												class="[all:unset] flex items-center justify-center w-full h-full rounded-4 text-small text-body cursor-default transition-all duration-fast hover:bg-gray-100 data-[selected]:bg-primary data-[selected]:text-inverse data-[selected]:font-semibold data-[today]:border data-[today]:border-primary data-[outside-month]:text-tertiary data-[outside-month]:opacity-50 data-[disabled]:text-tertiary data-[disabled]:cursor-not-allowed data-[disabled]:opacity-30 motion-reduce:transition-none"
+											>
+												{date.day}
+											</DatePicker.Day>
+										</DatePicker.Cell>
+									{/each}
+								</DatePicker.GridRow>
+							{/each}
+						</DatePicker.GridBody>
+					</DatePicker.Grid>
+				{/each}
+			{/snippet}
+		</DatePicker.Calendar>
+	</DatePicker.Content>
+</DatePicker.Root>

package/dist/IIDatePicker/IIDatePicker.svelte.d.ts

@@ -0,0 +1,9 @@
+import type { DateValue } from '@internationalized/date';
+type Props = {
+    value: DateValue | undefined;
+    label?: string;
+    onValueChange?: (value: DateValue | undefined) => void;
+};
+declare const IIDatePicker: import("svelte").Component<Props, {}, "value">;
+type IIDatePicker = ReturnType<typeof IIDatePicker>;
+export default IIDatePicker;

package/dist/IIDatePicker/index.d.ts

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

package/dist/IIDatePicker/index.js

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

package/dist/IIDropdownInput/IIDropdownInput.svelte

@@ -0,0 +1,76 @@
+<script lang="ts">
+	import {DropdownMenu} from 'bits-ui'
+	import {IconExpandMore, IconCheck} from '../icons'
+	import {cn} from '../utils/cn'
+
+	type Item = {
+		label: string
+		value: string
+	}
+
+	type Props = {
+		items: Item[]
+		value?: string | undefined
+		placeholder?: string
+		disabled?: boolean
+		onSelect?: (value: string) => void
+		class?: string
+	}
+
+	let {
+		items,
+		value = $bindable(),
+		placeholder = 'Select...',
+		disabled = false,
+		onSelect,
+		class: className,
+	}: Props = $props()
+
+	let open = $state(false)
+
+	const selectedLabel = $derived(items.find(i => i.value === value)?.label ?? placeholder)
+
+	function handleSelect(item: Item) {
+		value = item.value
+		open = false
+		onSelect?.(item.value)
+	}
+</script>
+
+<DropdownMenu.Root bind:open>
+	<DropdownMenu.Trigger
+		{disabled}
+		class={cn(
+			'inline-flex items-center gap-4 py-6 pl-12 pr-8 border rounded-10 bg-input-bg cursor-default text-small text-input-text box-border appearance-none font-inherit outline-none focus:border-accent focus:ring-3 focus:ring-primary disabled:opacity-50 disabled:cursor-not-allowed',
+			open ? 'border-input-border-hover' : 'border-input-border hover:border-input-border-hover',
+			value === undefined && 'text-input-placeholder',
+			className
+		)}
+	>
+		<span class={cn('text-small', value !== undefined ? 'text-input-text' : 'text-input-placeholder')}
+			>{selectedLabel}</span
+		>
+		<IconExpandMore class="w-14 h-14 text-secondary shrink-0" />
+	</DropdownMenu.Trigger>
+	<DropdownMenu.Content
+		class="min-w-100 bg-dropdown-bg border border-dropdown-border rounded-10 shadow-dropdown p-4 z-12 outline-none"
+		sideOffset={2}
+		side="bottom"
+		align="start"
+	>
+		{#each items as item (item.value)}
+			<DropdownMenu.Item
+				class={cn(
+					'flex items-center justify-between gap-12 px-12 py-6 rounded-6 text-small text-dropdown-item cursor-default outline-none data-[highlighted]:bg-dropdown-item-hover',
+					value === item.value && 'text-dropdown-item-selected'
+				)}
+				onSelect={() => handleSelect(item)}
+			>
+				<span>{item.label}</span>
+				{#if value === item.value}
+					<IconCheck class="w-14 h-14 text-accent shrink-0" />
+				{/if}
+			</DropdownMenu.Item>
+		{/each}
+	</DropdownMenu.Content>
+</DropdownMenu.Root>

package/dist/IIDropdownInput/IIDropdownInput.svelte.d.ts

@@ -0,0 +1,15 @@
+type Item = {
+    label: string;
+    value: string;
+};
+type Props = {
+    items: Item[];
+    value?: string | undefined;
+    placeholder?: string;
+    disabled?: boolean;
+    onSelect?: (value: string) => void;
+    class?: string;
+};
+declare const IIDropdownInput: import("svelte").Component<Props, {}, "value">;
+type IIDropdownInput = ReturnType<typeof IIDropdownInput>;
+export default IIDropdownInput;

package/dist/IIDropdownInput/index.d.ts

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

package/dist/IIDropdownInput/index.js

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

package/dist/IIDropdownMenu/IIDropdownMenu.svelte

@@ -0,0 +1,74 @@
+<script lang="ts">
+	import type {Snippet} from 'svelte'
+	import {DropdownMenu} from 'bits-ui'
+	import {cn} from '../utils/cn'
+	import {IconMoreVert} from '../icons'
+
+	type Item = {
+		label: string
+		value: string
+		icon?: Snippet
+		disabled?: boolean
+		variant?: 'default' | 'destructive'
+	}
+
+	type Props = {
+		items: Item[]
+		onSelect: (value: string) => void
+		children?: Snippet
+		side?: 'top' | 'right' | 'bottom' | 'left'
+		align?: 'start' | 'center' | 'end'
+		class?: string
+	}
+
+	let {items, onSelect, children, side = 'bottom', align = 'end', class: className}: Props = $props()
+
+	let open = $state(false)
+
+	function handleSelect(value: string) {
+		onSelect(value)
+		open = false
+	}
+</script>
+
+<DropdownMenu.Root bind:open>
+	<DropdownMenu.Trigger
+		class="[all:unset] cursor-default inline-flex items-center justify-center p-4 rounded-4 text-secondary transition-all duration-fast hover:bg-background hover:text-body data-[state=open]:bg-background data-[state=open]:text-body motion-reduce:transition-none"
+	>
+		{#if children}
+			{@render children()}
+		{:else}
+			<IconMoreVert />
+		{/if}
+	</DropdownMenu.Trigger>
+	<DropdownMenu.Portal>
+		<DropdownMenu.Content
+			{side}
+			{align}
+			class={cn(
+				'min-w-48 bg-dropdown-bg border border-dropdown-border rounded-10 shadow-dropdown p-4 z-12 animate-slide-in motion-reduce:animate-none',
+				className
+			)}
+		>
+			{#each items as item (item.value)}
+				<DropdownMenu.Item
+					disabled={item.disabled}
+					class={cn(
+						'flex items-center gap-8 px-12 py-8 rounded-4 text-small cursor-default select-none outline-none data-[disabled]:opacity-50 data-[disabled]:cursor-not-allowed data-[disabled]:pointer-events-none motion-reduce:transition-none',
+						item.variant === 'destructive'
+							? 'text-error hover:bg-error-bg data-[highlighted]:bg-error-bg data-[highlighted]:outline-none'
+							: 'text-dropdown-item hover:bg-dropdown-item-hover data-[highlighted]:bg-dropdown-item-hover data-[highlighted]:outline-none'
+					)}
+					onSelect={() => handleSelect(item.value)}
+				>
+					{#if item.icon}
+						<div class="w-11 h-11 flex items-center justify-center shrink-0">
+							{@render item.icon()}
+						</div>
+					{/if}
+					<span class="flex-1">{item.label}</span>
+				</DropdownMenu.Item>
+			{/each}
+		</DropdownMenu.Content>
+	</DropdownMenu.Portal>
+</DropdownMenu.Root>

package/dist/IIDropdownMenu/IIDropdownMenu.svelte.d.ts

@@ -0,0 +1,19 @@
+import type { Snippet } from 'svelte';
+type Item = {
+    label: string;
+    value: string;
+    icon?: Snippet;
+    disabled?: boolean;
+    variant?: 'default' | 'destructive';
+};
+type Props = {
+    items: Item[];
+    onSelect: (value: string) => void;
+    children?: Snippet;
+    side?: 'top' | 'right' | 'bottom' | 'left';
+    align?: 'start' | 'center' | 'end';
+    class?: string;
+};
+declare const IIDropdownMenu: import("svelte").Component<Props, {}, "">;
+type IIDropdownMenu = ReturnType<typeof IIDropdownMenu>;
+export default IIDropdownMenu;

package/dist/IIDropdownMenu/index.d.ts

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

package/dist/IIDropdownMenu/index.js

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

package/dist/IIEditableBadges/IIEditableBadges.svelte

@@ -0,0 +1,91 @@
+<script lang="ts">
+	import {Popover} from 'bits-ui'
+	import {IconCheck} from '../icons'
+	import IIBadge from '../IIBadge/IIBadge.svelte'
+	import type {BadgeVariant} from '../IIBadge/IIBadge.types'
+	import {cn} from '../utils/cn'
+
+	type Item = {
+		value: string
+		label: string
+		description?: string
+		variant?: BadgeVariant
+	}
+
+	type Props = {
+		items: Item[]
+		selectedValues: string[]
+		onToggle: (value: string, checked: boolean) => void
+		emptyText?: string
+		disabled?: boolean
+	}
+
+	let {items, selectedValues, onToggle, emptyText = 'None', disabled = false}: Props = $props()
+
+	const optionVariantClasses: Record<string, string> = {
+		grey: 'bg-badge-grey border-badge-grey text-badge-grey',
+		blue: 'bg-badge-blue border-badge-blue text-badge-blue',
+		red: 'bg-badge-red border-badge-red text-badge-red',
+		purple: 'bg-badge-purple border-badge-purple text-badge-purple',
+		green: 'bg-badge-green border-badge-green text-badge-green',
+		orange: 'bg-badge-orange border-badge-orange text-badge-orange',
+		cyan: 'bg-badge-cyan border-badge-cyan text-badge-cyan',
+		pink: 'bg-badge-pink border-badge-pink text-badge-pink',
+		teal: 'bg-badge-teal border-badge-teal text-badge-teal',
+		amber: 'bg-badge-amber border-badge-amber text-badge-amber',
+		yellow: 'bg-badge-yellow border-badge-yellow text-badge-yellow',
+	}
+
+	function getVariantForItem(item: Item): BadgeVariant {
+		return item.variant ?? 'grey'
+	}
+
+	function handleItemClick(value: string) {
+		if (disabled) return
+		const isSelected = selectedValues.includes(value)
+		onToggle(value, !isSelected)
+	}
+
+	const selectedItems = $derived(items.filter(item => selectedValues.includes(item.value)))
+</script>
+
+<Popover.Root>
+	<Popover.Trigger class="[all:unset] flex items-center gap-4 flex-wrap cursor-default">
+		{#if selectedItems.length === 0}
+			<IIBadge variant="grey">{emptyText}</IIBadge>
+		{:else}
+			{#each selectedItems as item (item.value)}
+				<IIBadge variant={getVariantForItem(item)}>{item.label}</IIBadge>
+			{/each}
+		{/if}
+	</Popover.Trigger>
+	<Popover.Portal>
+		<Popover.Content
+			class="bg-surface border border-primary rounded-10 shadow-dropdown p-8 z-12 min-w-200 max-w-300"
+			side="bottom"
+			align="start"
+		>
+			<div class="flex flex-col gap-4">
+				{#each items as item (item.value)}
+					{@const isSelected = selectedValues.includes(item.value)}
+					{@const variant = getVariantForItem(item)}
+					<button
+						type="button"
+						class={cn(
+							'[all:unset] flex items-center justify-between px-12 py-8 border rounded-4 bg-background cursor-default transition-all duration-fast text-small text-body hover:opacity-90 disabled:opacity-50 disabled:cursor-not-allowed',
+							isSelected && 'border-2',
+							optionVariantClasses[variant]
+						)}
+						onclick={() => handleItemClick(item.value)}
+						{disabled}
+					>
+						<span class="flex-1 text-left">{item.label}</span>
+						{#if isSelected}
+							<IconCheck class="w-11 h-11 text-accent ml-8 shrink-0" />
+						{/if}
+					</button>
+				{/each}
+			</div>
+		</Popover.Content>
+	</Popover.Portal>
+</Popover.Root>

package/dist/IIEditableBadges/IIEditableBadges.svelte.d.ts

@@ -0,0 +1,17 @@
+import type { BadgeVariant } from '../IIBadge/IIBadge.types';
+type Item = {
+    value: string;
+    label: string;
+    description?: string;
+    variant?: BadgeVariant;
+};
+type Props = {
+    items: Item[];
+    selectedValues: string[];
+    onToggle: (value: string, checked: boolean) => void;
+    emptyText?: string;
+    disabled?: boolean;
+};
+declare const IIEditableBadges: import("svelte").Component<Props, {}, "">;
+type IIEditableBadges = ReturnType<typeof IIEditableBadges>;
+export default IIEditableBadges;

package/dist/IIEditableBadges/index.d.ts

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

package/dist/IIEditableBadges/index.js

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