@insymetri/styleguide 0.1.13 → 0.1.14

package/dist/IIDropdownInput/IIDropdownInputStories.svelte

@@ -0,0 +1,88 @@
+<script lang="ts">
+	import IIDropdownInput from './IIDropdownInput.svelte'
+	import {IIIcon} from '../IIIcon'
+	import type {IconName} from '../icons'
+
+	let basicValue = $state<string | undefined>(undefined)
+	let disabledItemValue = $state<string | undefined>(undefined)
+
+	const statusItems = [
+		{label: 'Active', value: 'active'},
+		{label: 'Pending', value: 'pending'},
+		{label: 'Closed', value: 'closed'},
+		{label: 'Delinquent', value: 'delinquent'},
+	]
+
+	const disabledItems = [
+		{label: 'Active', value: 'active'},
+		{label: 'Pending', value: 'pending', disabled: true},
+		{label: 'Closed', value: 'closed'},
+		{label: 'Archived', value: 'archived', disabled: true},
+	]
+
+	const iconMap: Record<string, IconName> = {
+		active: 'check-circle',
+		pending: 'clock-countdown',
+		closed: 'warning-circle',
+	}
+
+	const colorMap: Record<string, string> = {
+		active: 'text-success',
+		pending: 'text-warning',
+		closed: 'text-error',
+	}
+</script>
+
+<div class="flex flex-col gap-32">
+	<!-- With Custom Render Item (icons) -->
+	<section>
+		<h2 class="text-default-emphasis text-primary mb-8">Custom Item Rendering with Icons</h2>
+		<p class="text-small text-secondary mb-12">Use renderItem to add icons and custom layout to dropdown items.</p>
+		<div class="w-200">
+			<IIDropdownInput
+				items={[
+					{label: 'Active', value: 'active'},
+					{label: 'Pending', value: 'pending'},
+					{label: 'Closed', value: 'closed'},
+				]}
+				bind:value={basicValue}
+				placeholder="Select status..."
+			>
+				{#snippet renderItem(item, selected)}
+					<span class="flex items-center gap-8 flex-1">
+						<IIIcon iconName={iconMap[item.value]} class={colorMap[item.value]} />
+						<span class="flex-1">{item.label}</span>
+						{#if selected}
+							<IIIcon iconName="check-circle" class="w-14 h-14 text-accent shrink-0" />
+						{/if}
+					</span>
+				{/snippet}
+			</IIDropdownInput>
+		</div>
+	</section>
+
+	<!-- Disabled Items -->
+	<section>
+		<h2 class="text-default-emphasis text-primary mb-8">Per-Item Disabled</h2>
+		<p class="text-small text-secondary mb-12">Individual items can be disabled.</p>
+		<div class="w-200">
+			<IIDropdownInput items={disabledItems} bind:value={disabledItemValue} placeholder="Select status..." />
+		</div>
+	</section>
+
+	<!-- Custom Render Selected -->
+	<section>
+		<h2 class="text-default-emphasis text-primary mb-8">Custom Selected Display</h2>
+		<p class="text-small text-secondary mb-12">Use renderSelected to customize how the selected item appears in the trigger.</p>
+		<div class="w-200">
+			<IIDropdownInput items={statusItems} bind:value={basicValue} placeholder="Select status...">
+				{#snippet renderSelected(item)}
+					<span class="flex items-center gap-6">
+						<span class="w-8 h-8 rounded-full bg-success"></span>
+						<span class="text-small-emphasis">{item.label}</span>
+					</span>
+				{/snippet}
+			</IIDropdownInput>
+		</div>
+	</section>
+</div>

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

@@ -0,0 +1,3 @@
+declare const IIDropdownInputStories: import("svelte").Component<Record<string, never>, {}, "">;
+type IIDropdownInputStories = ReturnType<typeof IIDropdownInputStories>;
+export default IIDropdownInputStories;

package/dist/IIDropdownMenu/IIDropdownMenu.svelte

@@ -12,28 +12,96 @@
 		variant?: 'default' | 'destructive'
 	}
 
-	type Props = {
+	type SeparatorEntry = {
+		type: 'separator'
+	}
+
+	type GroupEntry = {
+		type: 'group'
+		heading?: string
 		items: Item[]
+	}
+
+	type MenuEntry = Item | SeparatorEntry | GroupEntry
+
+	type Props = {
+		items: MenuEntry[]
 		onSelect: (value: string) => void
+		open?: boolean
 		children?: Snippet
+		renderItem?: Snippet<[Item]>
 		side?: 'top' | 'right' | 'bottom' | 'left'
 		align?: 'start' | 'center' | 'end'
+		triggerClass?: string
 		class?: string
 	}
 
-	let {items, onSelect, children, side = 'bottom', align = 'end', class: className}: Props = $props()
-
-	let open = $state(false)
+	let {
+		items,
+		onSelect,
+		open = $bindable(false),
+		children,
+		renderItem,
+		side = 'bottom',
+		align = 'end',
+		triggerClass,
+		class: className,
+	}: Props = $props()
 
 	function handleSelect(value: string) {
 		onSelect(value)
 		open = false
 	}
+
+	function isSeparator(entry: MenuEntry): entry is SeparatorEntry {
+		return 'type' in entry && entry.type === 'separator'
+	}
+
+	function isGroup(entry: MenuEntry): entry is GroupEntry {
+		return 'type' in entry && entry.type === 'group'
+	}
+
+	function isItem(entry: MenuEntry): entry is Item {
+		return !('type' in entry)
+	}
 </script>
 
+{#snippet itemContent(item: Item)}
+	{#if renderItem}
+		{@render renderItem(item)}
+	{:else}
+		{#if item.icon}
+			<div class="w-16 h-16 flex items-center justify-center shrink-0 [&_svg]:w-16 [&_svg]:h-16">
+				{@render item.icon()}
+			</div>
+		{/if}
+		<span class="flex-1">{item.label}</span>
+	{/if}
+{/snippet}
+
+{#snippet menuItem(item: Item)}
+	<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)}
+	>
+		{@render itemContent(item)}
+	</DropdownMenu.Item>
+{/snippet}
+
 <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"
+		class={cn(
+			children && triggerClass
+				? triggerClass
+				: '[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',
+			!children && !triggerClass && ''
+		)}
 	>
 		{#if children}
 			{@render children()}
@@ -50,24 +118,23 @@
 				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-16 h-16 flex items-center justify-center shrink-0 [&_svg]:w-16 [&_svg]:h-16">
-							{@render item.icon()}
-						</div>
-					{/if}
-					<span class="flex-1">{item.label}</span>
-				</DropdownMenu.Item>
+			{#each items as entry, i (i)}
+				{#if isSeparator(entry)}
+					<DropdownMenu.Separator class="h-1 bg-muted mx-4 my-4" />
+				{:else if isGroup(entry)}
+					<DropdownMenu.Group>
+						{#if entry.heading}
+							<DropdownMenu.GroupHeading class="text-tiny-emphasis text-secondary px-12 py-4 uppercase select-none">
+								{entry.heading}
+							</DropdownMenu.GroupHeading>
+						{/if}
+						{#each entry.items as item (item.value)}
+							{@render menuItem(item)}
+						{/each}
+					</DropdownMenu.Group>
+				{:else if isItem(entry)}
+					{@render menuItem(entry)}
+				{/if}
 			{/each}
 		</DropdownMenu.Content>
 	</DropdownMenu.Portal>

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

@@ -6,14 +6,26 @@ type Item = {
     disabled?: boolean;
     variant?: 'default' | 'destructive';
 };
-type Props = {
+type SeparatorEntry = {
+    type: 'separator';
+};
+type GroupEntry = {
+    type: 'group';
+    heading?: string;
     items: Item[];
+};
+type MenuEntry = Item | SeparatorEntry | GroupEntry;
+type Props = {
+    items: MenuEntry[];
     onSelect: (value: string) => void;
+    open?: boolean;
     children?: Snippet;
+    renderItem?: Snippet<[Item]>;
     side?: 'top' | 'right' | 'bottom' | 'left';
     align?: 'start' | 'center' | 'end';
+    triggerClass?: string;
     class?: string;
 };
-declare const IIDropdownMenu: import("svelte").Component<Props, {}, "">;
+declare const IIDropdownMenu: import("svelte").Component<Props, {}, "open">;
 type IIDropdownMenu = ReturnType<typeof IIDropdownMenu>;
 export default IIDropdownMenu;

package/dist/IIDropdownMenu/IIDropdownMenuStories.svelte

@@ -0,0 +1,101 @@
+<script lang="ts">
+	import IIDropdownMenu from './IIDropdownMenu.svelte'
+	import {IIButton} from '../IIButton'
+	import {IIIcon} from '../IIIcon'
+
+	function handleSelect(value: string) {
+		console.log('Selected:', value)
+	}
+</script>
+
+<div class="flex flex-col gap-32">
+	<!-- Separators -->
+	<section>
+		<h2 class="text-default-emphasis text-primary mb-8">With Separators</h2>
+		<p class="text-small text-secondary mb-12">Menu entries can include separator dividers.</p>
+		<IIDropdownMenu
+			items={[
+				{label: 'Edit', value: 'edit'},
+				{label: 'Duplicate', value: 'duplicate'},
+				{type: 'separator'},
+				{label: 'Archive', value: 'archive'},
+				{label: 'Delete', value: 'delete', variant: 'destructive'},
+			]}
+			onSelect={handleSelect}
+		/>
+	</section>
+
+	<!-- Groups -->
+	<section>
+		<h2 class="text-default-emphasis text-primary mb-8">With Groups</h2>
+		<p class="text-small text-secondary mb-12">Items organized into labeled groups with headings.</p>
+		<IIDropdownMenu
+			items={[
+				{
+					type: 'group',
+					heading: 'Actions',
+					items: [
+						{label: 'Edit', value: 'edit'},
+						{label: 'Duplicate', value: 'duplicate'},
+					],
+				},
+				{type: 'separator'},
+				{
+					type: 'group',
+					heading: 'Danger Zone',
+					items: [
+						{label: 'Archive', value: 'archive'},
+						{label: 'Delete', value: 'delete', variant: 'destructive'},
+					],
+				},
+			]}
+			onSelect={handleSelect}
+		/>
+	</section>
+
+	<!-- Custom Trigger with triggerClass -->
+	<section>
+		<h2 class="text-default-emphasis text-primary mb-8">Custom Trigger</h2>
+		<p class="text-small text-secondary mb-12">Using the children snippet with triggerClass for custom trigger styling.</p>
+		<IIDropdownMenu
+			items={[
+				{label: 'Profile', value: 'profile'},
+				{label: 'Settings', value: 'settings'},
+				{type: 'separator'},
+				{label: 'Sign Out', value: 'signout'},
+			]}
+			onSelect={handleSelect}
+			triggerClass="inline-flex items-center gap-4 px-12 py-5 rounded-10 border border-button-secondary text-small text-button-secondary hover:border-button-secondary-hover cursor-default"
+		>
+			{#snippet children()}
+				<IIIcon iconName="user" class="w-14 h-14" />
+				<span>Account</span>
+				<IIIcon iconName="caret-down" class="w-12 h-12" />
+			{/snippet}
+		</IIDropdownMenu>
+	</section>
+
+	<!-- Mixed Entries -->
+	<section>
+		<h2 class="text-default-emphasis text-primary mb-8">Mixed: Items + Separators + Groups</h2>
+		<IIDropdownMenu
+			items={[
+				{label: 'Quick Action', value: 'quick'},
+				{type: 'separator'},
+				{
+					type: 'group',
+					heading: 'File',
+					items: [
+						{label: 'New', value: 'new'},
+						{label: 'Open', value: 'open'},
+						{label: 'Save', value: 'save'},
+					],
+				},
+				{type: 'separator'},
+				{label: 'Exit', value: 'exit', variant: 'destructive'},
+			]}
+			onSelect={handleSelect}
+			align="start"
+		/>
+	</section>
+</div>

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

@@ -0,0 +1,18 @@
+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 IIDropdownMenuStories: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type IIDropdownMenuStories = InstanceType<typeof IIDropdownMenuStories>;
+export default IIDropdownMenuStories;

package/dist/IIMultiSelect/IIMultiSelect.svelte

@@ -0,0 +1,141 @@
+<script lang="ts">
+	import type {Snippet} from 'svelte'
+	import {DropdownMenu} from 'bits-ui'
+	import {IIIcon} from '../IIIcon'
+	import {cn} from '../utils/cn'
+
+	type Item = {
+		label: string
+		value: string
+		disabled?: boolean
+	}
+
+	type Props = {
+		items: Item[]
+		values: string[]
+		placeholder?: string
+		disabled?: boolean
+		onValuesChange?: (values: string[]) => void
+		matchTriggerWidth?: boolean
+		maxDisplay?: number
+		renderItem?: Snippet<[item: Item, selected: boolean]>
+		class?: string
+	}
+
+	let {
+		items,
+		values = $bindable([]),
+		placeholder = 'Select...',
+		disabled = false,
+		onValuesChange,
+		matchTriggerWidth = false,
+		maxDisplay,
+		renderItem,
+		class: className,
+	}: Props = $props()
+
+	let open = $state(false)
+	let triggerEl = $state<HTMLElement | null>(null)
+	let triggerWidth = $state<number | undefined>(undefined)
+
+	const selectedItems = $derived(items.filter(i => values.includes(i.value)))
+
+	const displayedChips = $derived(
+		maxDisplay && selectedItems.length > maxDisplay ? selectedItems.slice(0, maxDisplay) : selectedItems
+	)
+
+	const overflowCount = $derived(
+		maxDisplay && selectedItems.length > maxDisplay ? selectedItems.length - maxDisplay : 0
+	)
+
+	function toggleValue(itemValue: string) {
+		if (values.includes(itemValue)) {
+			values = values.filter(v => v !== itemValue)
+		} else {
+			values = [...values, itemValue]
+		}
+		onValuesChange?.(values)
+	}
+
+	function removeValue(itemValue: string, e: MouseEvent) {
+		e.stopPropagation()
+		values = values.filter(v => v !== itemValue)
+		onValuesChange?.(values)
+	}
+
+	$effect(() => {
+		if (matchTriggerWidth && open && triggerEl) {
+			triggerWidth = triggerEl.offsetWidth
+		}
+	})
+</script>
+
+<DropdownMenu.Root bind:open>
+	<DropdownMenu.Trigger
+		bind:ref={triggerEl}
+		{disabled}
+		class={cn(
+			'flex items-center gap-4 py-5 pl-12 pr-8 border rounded-10 bg-button-secondary cursor-default text-small text-button-secondary box-border appearance-none font-inherit outline-none transition-colors duration-base ease-in-out hover:text-button-secondary-hover hover:border-button-secondary-hover focus:border-accent focus:ring-3 focus:ring-primary disabled:opacity-50 disabled:cursor-not-allowed',
+			open ? 'border-button-secondary-hover' : 'border-button-secondary',
+			className
+		)}
+	>
+		<span class="flex-1 flex items-center gap-4 flex-wrap min-w-0">
+			{#if selectedItems.length === 0}
+				<span class="text-small text-input-placeholder">{placeholder}</span>
+			{:else}
+				{#each displayedChips as chip (chip.value)}
+					<span class="inline-flex items-center gap-2 px-6 py-1 rounded-6 bg-badge-grey text-badge-grey text-tiny">
+						{chip.label}
+						<button
+							type="button"
+							class="inline-flex items-center justify-center w-12 h-12 rounded-full hover:bg-gray-300 transition-colors duration-fast [&_svg]:w-8 [&_svg]:h-8"
+							onclick={(e) => removeValue(chip.value, e)}
+						>
+							<IIIcon iconName="x" />
+						</button>
+					</span>
+				{/each}
+				{#if overflowCount > 0}
+					<span class="text-tiny text-secondary">+{overflowCount} more</span>
+				{/if}
+			{/if}
+		</span>
+		<IIIcon iconName="caret-down" class="w-14 h-14 shrink-0" />
+	</DropdownMenu.Trigger>
+	<DropdownMenu.Portal>
+		<DropdownMenu.Content
+			class="min-w-100 bg-dropdown-bg border border-dropdown-border rounded-10 shadow-dropdown p-4 z-16 outline-none max-h-300 overflow-y-auto"
+			sideOffset={2}
+			side="bottom"
+			align="start"
+		>
+			{#snippet child({props, wrapperProps})}
+				<div {...wrapperProps} style:min-width={matchTriggerWidth && triggerWidth ? `${triggerWidth}px` : undefined}>
+					<div {...props}>
+						{#each items as item (item.value)}
+							<DropdownMenu.CheckboxItem
+								checked={values.includes(item.value)}
+								onCheckedChange={() => toggleValue(item.value)}
+								disabled={item.disabled}
+								class={cn(
+									'flex items-center gap-8 px-12 py-6 rounded-6 text-small text-dropdown-item cursor-default outline-none data-[highlighted]:bg-dropdown-item-hover data-[disabled]:opacity-50 data-[disabled]:cursor-not-allowed',
+									values.includes(item.value) && 'text-dropdown-item-selected'
+								)}
+							>
+								{#if renderItem}
+									{@render renderItem(item, values.includes(item.value))}
+								{:else}
+									<span class="flex-1">{item.label}</span>
+									{#if values.includes(item.value)}
+										<IIIcon iconName="check" class="w-14 h-14 text-accent shrink-0" />
+									{/if}
+								{/if}
+							</DropdownMenu.CheckboxItem>
+						{/each}
+					</div>
+				</div>
+			{/snippet}
+		</DropdownMenu.Content>
+	</DropdownMenu.Portal>
+</DropdownMenu.Root>

package/dist/IIMultiSelect/IIMultiSelect.svelte.d.ts

@@ -0,0 +1,20 @@
+import type { Snippet } from 'svelte';
+type Item = {
+    label: string;
+    value: string;
+    disabled?: boolean;
+};
+type Props = {
+    items: Item[];
+    values: string[];
+    placeholder?: string;
+    disabled?: boolean;
+    onValuesChange?: (values: string[]) => void;
+    matchTriggerWidth?: boolean;
+    maxDisplay?: number;
+    renderItem?: Snippet<[item: Item, selected: boolean]>;
+    class?: string;
+};
+declare const IIMultiSelect: import("svelte").Component<Props, {}, "values">;
+type IIMultiSelect = ReturnType<typeof IIMultiSelect>;
+export default IIMultiSelect;

package/dist/IIMultiSelect/IIMultiSelectStories.svelte

@@ -0,0 +1,78 @@
+<script lang="ts">
+	import IIMultiSelect from './IIMultiSelect.svelte'
+
+	let basicValues = $state<string[]>([])
+	let presetValues = $state(['react', 'svelte'])
+	let maxValues = $state(['js', 'ts', 'py', 'go', 'rs'])
+
+	const tagItems = [
+		{label: 'React', value: 'react'},
+		{label: 'Svelte', value: 'svelte'},
+		{label: 'Vue', value: 'vue'},
+		{label: 'Angular', value: 'angular'},
+		{label: 'Solid', value: 'solid'},
+	]
+
+	const languageItems = [
+		{label: 'JavaScript', value: 'js'},
+		{label: 'TypeScript', value: 'ts'},
+		{label: 'Python', value: 'py'},
+		{label: 'Go', value: 'go'},
+		{label: 'Rust', value: 'rs'},
+		{label: 'Java', value: 'java'},
+		{label: 'C#', value: 'csharp'},
+		{label: 'Ruby', value: 'ruby', disabled: true},
+	]
+
+	const roleItems = [
+		{label: 'Admin', value: 'admin'},
+		{label: 'Editor', value: 'editor'},
+		{label: 'Viewer', value: 'viewer'},
+		{label: 'Guest', value: 'guest', disabled: true},
+	]
+</script>
+
+<div class="flex flex-col gap-32">
+	<!-- Basic -->
+	<section>
+		<h2 class="text-default-emphasis text-primary mb-8">Basic Multi-Select</h2>
+		<p class="text-small text-secondary mb-12">Select multiple items. Chips appear in the trigger with X to remove.</p>
+		<div class="w-280">
+			<IIMultiSelect items={tagItems} bind:values={basicValues} placeholder="Select frameworks..." />
+		</div>
+		<p class="text-small text-secondary mt-8">Selected: {basicValues.length ? basicValues.join(', ') : 'None'}</p>
+	</section>
+
+	<!-- Preselected -->
+	<section>
+		<h2 class="text-default-emphasis text-primary mb-8">With Preset Values</h2>
+		<div class="w-280">
+			<IIMultiSelect items={tagItems} bind:values={presetValues} placeholder="Select frameworks..." />
+		</div>
+	</section>
+
+	<!-- Max Display -->
+	<section>
+		<h2 class="text-default-emphasis text-primary mb-8">Max Display (Overflow)</h2>
+		<p class="text-small text-secondary mb-12">When maxDisplay is set, excess chips collapse to "+N more".</p>
+		<div class="w-280">
+			<IIMultiSelect items={languageItems} bind:values={maxValues} maxDisplay={3} placeholder="Select languages..." />
+		</div>
+	</section>
+
+	<!-- Match Trigger Width -->
+	<section>
+		<h2 class="text-default-emphasis text-primary mb-8">Match Trigger Width</h2>
+		<div class="w-320">
+			<IIMultiSelect items={roleItems} values={[]} matchTriggerWidth placeholder="Assign roles..." />
+		</div>
+	</section>
+
+	<!-- Disabled -->
+	<section>
+		<h2 class="text-default-emphasis text-primary mb-8">Disabled</h2>
+		<div class="w-280">
+			<IIMultiSelect items={tagItems} values={['react', 'svelte']} disabled placeholder="Select frameworks..." />
+		</div>
+	</section>
+</div>

package/dist/IIMultiSelect/IIMultiSelectStories.svelte.d.ts

@@ -0,0 +1,3 @@
+declare const IIMultiSelectStories: import("svelte").Component<Record<string, never>, {}, "">;
+type IIMultiSelectStories = ReturnType<typeof IIMultiSelectStories>;
+export default IIMultiSelectStories;

package/dist/IIMultiSelect/index.d.ts

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

package/dist/IIMultiSelect/index.js

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