compote-ui 0.21.2 → 0.22.0

package/dist/components/listbox/index.d.ts

@@ -0,0 +1,11 @@
+export { default as Root } from './listbox-root.svelte';
+export { default as Input } from './listbox-input.svelte';
+export { default as Content } from './listbox-content.svelte';
+export { default as Label } from './listbox-label.svelte';
+export { default as Item } from './listbox-item.svelte';
+export { default as ItemText } from './listbox-item-text.svelte';
+export { default as ItemIndicator } from './listbox-item-indicator.svelte';
+export { default as ItemGroup } from './listbox-item-group.svelte';
+export { default as ItemGroupLabel } from './listbox-item-group-label.svelte';
+export { default as Empty } from './listbox-empty.svelte';
+export { default as ValueText } from './listbox-value-text.svelte';

package/dist/components/listbox/index.js

@@ -0,0 +1,11 @@
+export { default as Root } from './listbox-root.svelte';
+export { default as Input } from './listbox-input.svelte';
+export { default as Content } from './listbox-content.svelte';
+export { default as Label } from './listbox-label.svelte';
+export { default as Item } from './listbox-item.svelte';
+export { default as ItemText } from './listbox-item-text.svelte';
+export { default as ItemIndicator } from './listbox-item-indicator.svelte';
+export { default as ItemGroup } from './listbox-item-group.svelte';
+export { default as ItemGroupLabel } from './listbox-item-group-label.svelte';
+export { default as Empty } from './listbox-empty.svelte';
+export { default as ValueText } from './listbox-value-text.svelte';

package/dist/components/listbox/listbox-content.svelte

@@ -0,0 +1,24 @@
+<script lang="ts">
+	import { Listbox } from '@ark-ui/svelte/listbox';
+	import type { ListboxContentBaseProps } from '@ark-ui/svelte/listbox';
+	import type { Snippet } from 'svelte';
+	import type { ListItem } from '../../utils/collections';
+	import { cn } from 'tailwind-variants';
+	import { getListboxContext } from './listbox-context';
+
+	type Props = ListboxContentBaseProps & {
+		class?: string;
+		items?: Snippet<[{ items: ListItem[]; group: [string, ListItem[]][] }]>;
+	};
+
+	let { class: className, items, ...restProps }: Props = $props();
+
+	const ctx = getListboxContext();
+</script>
+
+<Listbox.Content
+	{...restProps}
+	class={cn('flex min-h-0 w-full flex-1 flex-col overflow-y-auto outline-none', className)}
+>
+	{@render items?.({ items: ctx.collection.items, group: ctx.collection.group() })}
+</Listbox.Content>

package/dist/components/listbox/listbox-content.svelte.d.ts

@@ -0,0 +1,13 @@
+import type { ListboxContentBaseProps } from '@ark-ui/svelte/listbox';
+import type { Snippet } from 'svelte';
+import type { ListItem } from '../../utils/collections';
+type Props = ListboxContentBaseProps & {
+    class?: string;
+    items?: Snippet<[{
+        items: ListItem[];
+        group: [string, ListItem[]][];
+    }]>;
+};
+declare const ListboxContent: import("svelte").Component<Props, {}, "">;
+type ListboxContent = ReturnType<typeof ListboxContent>;
+export default ListboxContent;

package/dist/components/listbox/listbox-context.d.ts

@@ -0,0 +1,12 @@
+import type { ListCollection } from '@ark-ui/svelte/collection';
+import type { ListItem } from '../../utils/collections';
+export declare const getListboxContext: () => {
+    readonly collection: ListCollection<ListItem>;
+    filter: (text: string) => void;
+}, setListboxContext: (context: {
+    readonly collection: ListCollection<ListItem>;
+    filter: (text: string) => void;
+}) => {
+    readonly collection: ListCollection<ListItem>;
+    filter: (text: string) => void;
+};

package/dist/components/listbox/listbox-context.js

@@ -0,0 +1,2 @@
+import { createContext } from 'svelte';
+export const [getListboxContext, setListboxContext] = createContext();

package/dist/components/listbox/listbox-empty.svelte

@@ -0,0 +1,17 @@
+<script lang="ts">
+	import { Listbox } from '@ark-ui/svelte/listbox';
+	import type { ListboxEmptyBaseProps } from '@ark-ui/svelte/listbox';
+	import type { Snippet } from 'svelte';
+	import { cn } from 'tailwind-variants';
+
+	type Props = ListboxEmptyBaseProps & {
+		class?: string;
+		children?: Snippet;
+	};
+
+	let { class: className, children, ...restProps }: Props = $props();
+</script>
+
+<Listbox.Empty {...restProps} class={cn('py-4 text-center text-sm text-ink-dim', className)}>
+	{@render children?.()}
+</Listbox.Empty>

package/dist/components/listbox/listbox-empty.svelte.d.ts

@@ -0,0 +1,9 @@
+import type { ListboxEmptyBaseProps } from '@ark-ui/svelte/listbox';
+import type { Snippet } from 'svelte';
+type Props = ListboxEmptyBaseProps & {
+    class?: string;
+    children?: Snippet;
+};
+declare const ListboxEmpty: import("svelte").Component<Props, {}, "">;
+type ListboxEmpty = ReturnType<typeof ListboxEmpty>;
+export default ListboxEmpty;

package/dist/components/listbox/listbox-input.svelte

@@ -0,0 +1,28 @@
+<script lang="ts">
+	import { Listbox } from '@ark-ui/svelte/listbox';
+	import type { ListboxInputBaseProps } from '@ark-ui/svelte/listbox';
+	import { cn } from 'tailwind-variants';
+	import { getListboxContext } from './listbox-context';
+
+	type Props = ListboxInputBaseProps & {
+		class?: string;
+		placeholder?: string;
+		oninput?: (event: Event & { currentTarget: HTMLInputElement }) => void;
+	};
+
+	let { class: className, oninput, ...restProps }: Props = $props();
+
+	const ctx = getListboxContext();
+</script>
+
+<Listbox.Input
+	{...restProps}
+	oninput={(e) => {
+		ctx.filter(e.currentTarget.value);
+		oninput?.(e);
+	}}
+	class={cn(
+		'w-full rounded-md border border-surface-3 bg-transparent px-3 py-2 text-sm outline-none placeholder:text-ink-dim focus-visible:border-primary focus-visible:shadow-xs',
+		className
+	)}
+/>

package/dist/components/listbox/listbox-input.svelte.d.ts

@@ -0,0 +1,11 @@
+import type { ListboxInputBaseProps } from '@ark-ui/svelte/listbox';
+type Props = ListboxInputBaseProps & {
+    class?: string;
+    placeholder?: string;
+    oninput?: (event: Event & {
+        currentTarget: HTMLInputElement;
+    }) => void;
+};
+declare const ListboxInput: import("svelte").Component<Props, {}, "">;
+type ListboxInput = ReturnType<typeof ListboxInput>;
+export default ListboxInput;

package/dist/components/listbox/listbox-item-group-label.svelte

@@ -0,0 +1,20 @@
+<script lang="ts">
+	import { Listbox } from '@ark-ui/svelte/listbox';
+	import type { ListboxItemGroupLabelBaseProps } from '@ark-ui/svelte/listbox';
+	import type { Snippet } from 'svelte';
+	import { cn } from 'tailwind-variants';
+
+	type Props = ListboxItemGroupLabelBaseProps & {
+		class?: string;
+		children?: Snippet;
+	};
+
+	let { class: className, children, ...restProps }: Props = $props();
+</script>
+
+<Listbox.ItemGroupLabel
+	{...restProps}
+	class={cn('px-2 py-1.5 text-xs font-semibold tracking-wide text-ink-dim uppercase', className)}
+>
+	{@render children?.()}
+</Listbox.ItemGroupLabel>

package/dist/components/listbox/listbox-item-group-label.svelte.d.ts

@@ -0,0 +1,9 @@
+import type { ListboxItemGroupLabelBaseProps } from '@ark-ui/svelte/listbox';
+import type { Snippet } from 'svelte';
+type Props = ListboxItemGroupLabelBaseProps & {
+    class?: string;
+    children?: Snippet;
+};
+declare const ListboxItemGroupLabel: import("svelte").Component<Props, {}, "">;
+type ListboxItemGroupLabel = ReturnType<typeof ListboxItemGroupLabel>;
+export default ListboxItemGroupLabel;

package/dist/components/listbox/listbox-item-group.svelte

@@ -0,0 +1,17 @@
+<script lang="ts">
+	import { Listbox } from '@ark-ui/svelte/listbox';
+	import type { ListboxItemGroupBaseProps } from '@ark-ui/svelte/listbox';
+	import type { Snippet } from 'svelte';
+	import { cn } from 'tailwind-variants';
+
+	type Props = ListboxItemGroupBaseProps & {
+		class?: string;
+		children?: Snippet;
+	};
+
+	let { class: className, children, ...restProps }: Props = $props();
+</script>
+
+<Listbox.ItemGroup {...restProps} class={cn('flex flex-col', className)}>
+	{@render children?.()}
+</Listbox.ItemGroup>

package/dist/components/listbox/listbox-item-group.svelte.d.ts

@@ -0,0 +1,9 @@
+import type { ListboxItemGroupBaseProps } from '@ark-ui/svelte/listbox';
+import type { Snippet } from 'svelte';
+type Props = ListboxItemGroupBaseProps & {
+    class?: string;
+    children?: Snippet;
+};
+declare const ListboxItemGroup: import("svelte").Component<Props, {}, "">;
+type ListboxItemGroup = ReturnType<typeof ListboxItemGroup>;
+export default ListboxItemGroup;

package/dist/components/listbox/listbox-item-indicator.svelte

@@ -0,0 +1,24 @@
+<script lang="ts">
+	import { Listbox } from '@ark-ui/svelte/listbox';
+	import type { ListboxItemIndicatorBaseProps } from '@ark-ui/svelte/listbox';
+	import type { Snippet } from 'svelte';
+	import { cn } from 'tailwind-variants';
+	import { PhCheck } from '../../icons';
+
+	type Props = ListboxItemIndicatorBaseProps & {
+		class?: string;
+		children?: Snippet;
+	};
+
+	let { class: className, children, ...restProps }: Props = $props();
+</script>
+
+<Listbox.ItemIndicator
+	{...restProps}
+	class={cn(
+		'flex h-3.5 w-3.5 shrink-0 items-center justify-center text-primary data-[state=unchecked]:hidden',
+		className
+	)}
+>
+	{#if children}{@render children()}{:else}<PhCheck />{/if}
+</Listbox.ItemIndicator>

package/dist/components/listbox/listbox-item-indicator.svelte.d.ts

@@ -0,0 +1,9 @@
+import type { ListboxItemIndicatorBaseProps } from '@ark-ui/svelte/listbox';
+import type { Snippet } from 'svelte';
+type Props = ListboxItemIndicatorBaseProps & {
+    class?: string;
+    children?: Snippet;
+};
+declare const ListboxItemIndicator: import("svelte").Component<Props, {}, "">;
+type ListboxItemIndicator = ReturnType<typeof ListboxItemIndicator>;
+export default ListboxItemIndicator;

package/dist/components/listbox/listbox-item-text.svelte

@@ -0,0 +1,17 @@
+<script lang="ts">
+	import { Listbox } from '@ark-ui/svelte/listbox';
+	import type { ListboxItemTextBaseProps } from '@ark-ui/svelte/listbox';
+	import type { Snippet } from 'svelte';
+	import { cn } from 'tailwind-variants';
+
+	type Props = ListboxItemTextBaseProps & {
+		class?: string;
+		children?: Snippet;
+	};
+
+	let { class: className, children, ...restProps }: Props = $props();
+</script>
+
+<Listbox.ItemText {...restProps} class={cn('flex-1 truncate', className)}>
+	{@render children?.()}
+</Listbox.ItemText>

package/dist/components/listbox/listbox-item-text.svelte.d.ts

@@ -0,0 +1,9 @@
+import type { ListboxItemTextBaseProps } from '@ark-ui/svelte/listbox';
+import type { Snippet } from 'svelte';
+type Props = ListboxItemTextBaseProps & {
+    class?: string;
+    children?: Snippet;
+};
+declare const ListboxItemText: import("svelte").Component<Props, {}, "">;
+type ListboxItemText = ReturnType<typeof ListboxItemText>;
+export default ListboxItemText;

package/dist/components/listbox/listbox-item.svelte

@@ -0,0 +1,24 @@
+<script lang="ts">
+	import { Listbox } from '@ark-ui/svelte/listbox';
+	import type { ListboxItemBaseProps } from '@ark-ui/svelte/listbox';
+	import type { Snippet } from 'svelte';
+	import { cn } from 'tailwind-variants';
+
+	type Props = ListboxItemBaseProps & {
+		class?: string;
+		children?: Snippet;
+	};
+
+	let { class: className, item, children, ...restProps }: Props = $props();
+</script>
+
+<Listbox.Item
+	{item}
+	{...restProps}
+	class={cn(
+		'flex min-h-8 cursor-pointer items-center justify-between gap-2 rounded-xs px-2 text-sm transition-colors outline-none select-none hover:bg-surface-2 data-disabled:opacity-50 data-highlighted:bg-surface-2 data-[state=checked]:text-primary',
+		className
+	)}
+>
+	{@render children?.()}
+</Listbox.Item>

package/dist/components/listbox/listbox-item.svelte.d.ts

@@ -0,0 +1,9 @@
+import type { ListboxItemBaseProps } from '@ark-ui/svelte/listbox';
+import type { Snippet } from 'svelte';
+type Props = ListboxItemBaseProps & {
+    class?: string;
+    children?: Snippet;
+};
+declare const ListboxItem: import("svelte").Component<Props, {}, "">;
+type ListboxItem = ReturnType<typeof ListboxItem>;
+export default ListboxItem;

package/dist/components/listbox/listbox-label.svelte

@@ -0,0 +1,17 @@
+<script lang="ts">
+	import { Listbox } from '@ark-ui/svelte/listbox';
+	import type { ListboxLabelBaseProps } from '@ark-ui/svelte/listbox';
+	import type { Snippet } from 'svelte';
+	import { cn } from 'tailwind-variants';
+
+	type Props = ListboxLabelBaseProps & {
+		class?: string;
+		children?: Snippet;
+	};
+
+	let { class: className, children, ...restProps }: Props = $props();
+</script>
+
+<Listbox.Label {...restProps} class={cn('text-sm font-medium text-ink', className)}>
+	{@render children?.()}
+</Listbox.Label>

package/dist/components/listbox/listbox-label.svelte.d.ts

@@ -0,0 +1,9 @@
+import type { ListboxLabelBaseProps } from '@ark-ui/svelte/listbox';
+import type { Snippet } from 'svelte';
+type Props = ListboxLabelBaseProps & {
+    class?: string;
+    children?: Snippet;
+};
+declare const ListboxLabel: import("svelte").Component<Props, {}, "">;
+type ListboxLabel = ReturnType<typeof ListboxLabel>;
+export default ListboxLabel;

package/dist/components/listbox/listbox-root.svelte

@@ -0,0 +1,79 @@
+<script lang="ts" generics="T extends string | number = string">
+	import { Listbox, createListCollection } from '@ark-ui/svelte/listbox';
+	import type { ListboxRootBaseProps } from '@ark-ui/svelte/listbox';
+	import { useFilter } from '@ark-ui/svelte/locale';
+	import type { Snippet } from 'svelte';
+	import type { ListCollection } from '@ark-ui/svelte/collection';
+	import type { ListItem } from '../../utils/collections';
+	import { cn } from 'tailwind-variants';
+	import { setListboxContext } from './listbox-context';
+
+	type Props = Omit<ListboxRootBaseProps<ListItem<T>>, 'collection' | 'value'> & {
+		items: ListItem<T>[];
+		value?: T[];
+		name?: string;
+		class?: string;
+		children?: Snippet;
+	};
+
+	let {
+		items,
+		value = $bindable(),
+		name,
+		class: className,
+		children,
+		onValueChange,
+		...restProps
+	}: Props = $props();
+
+	const filters = useFilter({ sensitivity: 'base' });
+	let filterText = $state('');
+
+	const hasGroups = $derived(items.some((i) => i.group));
+
+	const baseCollection = $derived(
+		createListCollection({
+			items,
+			itemToValue: (item) => item.value.toString(),
+			itemToString: (item) => item.label,
+			isItemDisabled: (item) => item.disabled === true,
+			...(hasGroups ? { groupBy: (item: ListItem<T>) => item.group ?? '' } : {})
+		})
+	);
+
+	const collection = $derived(
+		filterText
+			? baseCollection.filter((itemString) => filters().contains(itemString, filterText))
+			: baseCollection
+	);
+
+	const stringValue = $derived(value?.map(String) ?? []);
+
+	setListboxContext({
+		get collection() {
+			return collection as unknown as ListCollection<ListItem>;
+		},
+		filter: (text) => {
+			filterText = text;
+		}
+	});
+</script>
+
+<Listbox.Root
+	{collection}
+	value={stringValue}
+	onValueChange={(details) => {
+		value = details.value as unknown as T[];
+		onValueChange?.(details);
+	}}
+	{...restProps}
+	class={cn('flex h-full w-full flex-col gap-1.5 overflow-hidden', className)}
+>
+	{@render children?.()}
+</Listbox.Root>
+
+{#if name}
+	{#each value ?? [] as v, i (v)}
+		<input type="hidden" name="{name}[{i}]" value={v ?? ''} />
+	{/each}
+{/if}

package/dist/components/listbox/listbox-root.svelte.d.ts

@@ -0,0 +1,33 @@
+import { Listbox } from '@ark-ui/svelte/listbox';
+import type { Snippet } from 'svelte';
+import type { ListItem } from '../../utils/collections';
+declare function $$render<T extends string | number = string>(): {
+    props: Omit<Listbox.RootBaseProps<ListItem<T>>, "value" | "collection"> & {
+        items: ListItem<T>[];
+        value?: T[];
+        name?: string;
+        class?: string;
+        children?: Snippet;
+    };
+    exports: {};
+    bindings: "value";
+    slots: {};
+    events: {};
+};
+declare class __sveltets_Render<T extends string | number = string> {
+    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 extends string | number = string>(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 extends string | number = string>(internal: unknown, props: ReturnType<__sveltets_Render<T>['props']> & {}): ReturnType<__sveltets_Render<T>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
+}
+declare const ListboxRoot: $$IsomorphicComponent;
+type ListboxRoot<T extends string | number = string> = InstanceType<typeof ListboxRoot<T>>;
+export default ListboxRoot;

package/dist/components/listbox/listbox-value-text.svelte

@@ -0,0 +1,13 @@
+<script lang="ts">
+	import { Listbox } from '@ark-ui/svelte/listbox';
+	import type { ListboxValueTextBaseProps } from '@ark-ui/svelte/listbox';
+	import { cn } from 'tailwind-variants';
+
+	type Props = ListboxValueTextBaseProps & {
+		class?: string;
+	};
+
+	let { class: className, ...restProps }: Props = $props();
+</script>
+
+<Listbox.ValueText {...restProps} class={cn('text-sm text-ink', className)} />

package/dist/components/listbox/listbox-value-text.svelte.d.ts

@@ -0,0 +1,7 @@
+import type { ListboxValueTextBaseProps } from '@ark-ui/svelte/listbox';
+type Props = ListboxValueTextBaseProps & {
+    class?: string;
+};
+declare const ListboxValueText: import("svelte").Component<Props, {}, "">;
+type ListboxValueText = ReturnType<typeof ListboxValueText>;
+export default ListboxValueText;

package/dist/index.d.ts

@@ -19,7 +19,7 @@ export { default as ImageCropper } from './components/image-cropper/image-croppe
 export type { ImageCropperProps, ImageCropperCropData } from './components/image-cropper/types';
 export { default as ImageCropDialog } from './components/image-crop-dialog/image-crop-dialog.svelte';
 export type { ImageCropDialogProps } from './components/image-crop-dialog/types';
-export { default as Listbox } from './components/listbox/listbox.svelte';
+export * as Listbox from './components/listbox';
 export { default as NumberInput } from './components/number-input/number-input.svelte';
 export type { NumberInputProps } from './components/number-input/types';
 export { default as Select } from './components/select/select.svelte';

package/dist/index.js

@@ -15,7 +15,7 @@ export { default as FileUploadDropzone } from './components/file-upload/file-upl
 export { default as FileUpload } from './components/file-upload/file-upload.svelte';
 export { default as ImageCropper } from './components/image-cropper/image-cropper.svelte';
 export { default as ImageCropDialog } from './components/image-crop-dialog/image-crop-dialog.svelte';
-export { default as Listbox } from './components/listbox/listbox.svelte';
+export * as Listbox from './components/listbox';
 export { default as NumberInput } from './components/number-input/number-input.svelte';
 export { default as Select } from './components/select/select.svelte';
 export { default as Splitter } from './components/splitter/splitter.svelte';

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "compote-ui",
-	"version": "0.21.2",
+	"version": "0.22.0",
 	"license": "MIT",
 	"scripts": {
 		"dev": "vite dev",

package/dist/components/listbox/listbox.svelte

@@ -1,117 +0,0 @@
-<script module>
-	// eslint-disable-next-line no-import-assign
-	export type { ListboxProps } from './types';
-</script>
-
-<script lang="ts" generics="T extends number | string = number | string">
-	import { Listbox, createListCollection } from '@ark-ui/svelte/listbox';
-	import { useFilter } from '@ark-ui/svelte/locale';
-	import type { ListboxProps } from './types';
-	import type { ListItem } from '../../utils/collections';
-	import { cn } from 'tailwind-variants';
-	import { PhCheck } from '../../icons';
-
-	type Props = ListboxProps<T>;
-
-	let {
-		value = $bindable(),
-		items,
-		label,
-		name,
-		onValueChange,
-		filterable = false,
-		filterPlaceholder = 'Search...',
-		class: className,
-		...restProps
-	}: Props = $props();
-
-	const filters = useFilter({ sensitivity: 'base' });
-	let filterText = $state('');
-	const hasGroups = $derived(items.some((i) => i.group));
-
-	const baseCollection = $derived(
-		createListCollection({
-			items,
-			itemToValue: (item) => item.value.toString(),
-			isItemDisabled: (item) => item.disabled === true,
-			...(hasGroups ? { groupBy: (item: ListItem<T>) => item.group ?? '' } : {})
-		})
-	);
-
-	const collection = $derived(
-		filterable && filterText
-			? baseCollection.filter((itemString) => filters().contains(itemString, filterText))
-			: baseCollection
-	);
-
-	const stringValue = $derived(value?.map(String) ?? []);
-</script>
-
-<Listbox.Root
-	value={stringValue}
-	{collection}
-	onValueChange={(details) => {
-		value = details.value as unknown as T[];
-		onValueChange?.(details);
-	}}
-	{...restProps}
-	class={cn('flex h-full w-full flex-col gap-1.5 overflow-hidden', className)}
->
-	{#if label}
-		<Listbox.Label>{label}</Listbox.Label>
-	{/if}
-	{#if filterable}
-		<Listbox.Input
-			placeholder={filterPlaceholder}
-			oninput={(e) => (filterText = e.currentTarget.value)}
-			class="h-8 w-full rounded-xs border border-surface-3 bg-transparent px-2.5 text-sm outline-none placeholder:text-ink-dim focus-visible:ring-1 focus-visible:ring-ring"
-		/>
-	{/if}
-	<Listbox.Content class="flex min-h-0 w-full flex-1 flex-col overflow-y-auto outline-none">
-		{#if hasGroups}
-			{#each collection.group() as [type, group] (type)}
-				<Listbox.ItemGroup class="flex flex-col">
-					<Listbox.ItemGroupLabel
-						class="px-2 py-1.5 text-xs font-semibold tracking-wide text-ink-dim uppercase"
-					>
-						{type}
-					</Listbox.ItemGroupLabel>
-					{#each group as item (item.value)}
-						<Listbox.Item
-							{item}
-							class="flex min-h-8 cursor-pointer items-center justify-between gap-2 rounded-xs px-2 text-sm transition-colors outline-none select-none hover:bg-surface-2 data-disabled:opacity-50 data-highlighted:bg-surface-2 data-[state=checked]:text-primary"
-						>
-							<Listbox.ItemText class="flex-1 truncate">{item.label}</Listbox.ItemText>
-							<Listbox.ItemIndicator
-								class="flex h-3.5 w-3.5 shrink-0 items-center justify-center text-primary data-[state=unchecked]:hidden"
-							>
-								<PhCheck />
-							</Listbox.ItemIndicator>
-						</Listbox.Item>
-					{/each}
-				</Listbox.ItemGroup>
-			{/each}
-		{:else}
-			{#each collection.items as item (item.value)}
-				<Listbox.Item
-					{item}
-					class="flex min-h-8 cursor-pointer items-center justify-between gap-2 rounded-xs px-2 text-sm transition-colors outline-none select-none hover:bg-surface-2 data-disabled:opacity-50 data-highlighted:bg-surface-2 data-[state=checked]:text-primary"
-				>
-					<Listbox.ItemText class="flex-1 truncate">{item.label}</Listbox.ItemText>
-					<Listbox.ItemIndicator
-						class="flex h-3.5 w-3.5 shrink-0 items-center justify-center text-primary data-[state=unchecked]:hidden"
-					>
-						<PhCheck />
-					</Listbox.ItemIndicator>
-				</Listbox.Item>
-			{/each}
-		{/if}
-		<Listbox.Empty class="py-4 text-center text-sm text-ink-dim">No results found</Listbox.Empty>
-	</Listbox.Content>
-</Listbox.Root>
-
-{#if name}
-	{#each value ?? [] as v, i (v)}
-		<input type="hidden" name="{name}[{i}]" value={v ?? ''} />
-	{/each}
-{/if}

package/dist/components/listbox/listbox.svelte.d.ts

@@ -1,27 +0,0 @@
-export type { ListboxProps } from './types';
-import { Listbox } from '@ark-ui/svelte/listbox';
-import type { ListboxProps } from './types';
-declare function $$render<T extends number | string = number | string>(): {
-    props: ListboxProps<T>;
-    exports: {};
-    bindings: "value";
-    slots: {};
-    events: {};
-};
-declare class __sveltets_Render<T extends number | string = number | string> {
-    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 extends number | string = number | string>(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 extends number | string = number | string>(internal: unknown, props: ReturnType<__sveltets_Render<T>['props']> & {}): ReturnType<__sveltets_Render<T>['exports']>;
-    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
-}
-declare const Listbox: $$IsomorphicComponent;
-type Listbox<T extends number | string = number | string> = InstanceType<typeof Listbox<T>>;
-export default Listbox;

package/dist/components/listbox/types.d.ts

@@ -1,11 +0,0 @@
-import type { ListboxRootBaseProps } from '@ark-ui/svelte/listbox';
-import type { ListItem } from '../../utils/collections';
-export interface ListboxProps<T extends number | string = number | string> extends Omit<ListboxRootBaseProps<ListItem<T>>, 'collection' | 'value'> {
-    items: ListItem<T>[];
-    value?: T[];
-    label?: string;
-    name?: string;
-    filterable?: boolean;
-    filterPlaceholder?: string;
-    class?: string;
-}

package/dist/components/listbox/types.js

@@ -1 +0,0 @@
-export {};