uisv 0.0.20 → 0.0.22

package/dist/components/pin-input.svelte

@@ -1,8 +1,7 @@
 <script module lang="ts">
 	import type { PropColor, PropVariant } from '../index.js';
 	import { onMount } from 'svelte';
-	import type { ClassNameValue } from 'tailwind-merge';
-	import { tv } from 'tailwind-variants';
+	import { tv, type ClassValue } from 'tailwind-variants';
 
 	export type PinInputProps = {
 		value?: number[] | string[];
@@ -19,7 +18,7 @@
 		placeholder?: string;
 		required?: boolean;
 		type?: 'text' | 'number';
-		ui?: { root?: ClassNameValue; cell?: ClassNameValue };
+		ui?: { root?: ClassValue; cell?: ClassValue };
 	};
 </script>
 
@@ -59,7 +58,7 @@
 	const internal_id = $props.id();
 	let input_els = $state<HTMLInputElement[]>([]);
 
-	const classes = $derived(
+	const variants = $derived(
 		tv({
 			slots: { root: 'flex gap-2', cell: 'rounded text-center outline-none transition relative' },
 			variants: {
@@ -80,13 +79,13 @@
 				},
 				variant: {
 					outline: {
-						cell: 'border border-surface-300 focus:border-2',
+						cell: 'border border-surface-accented focus:border-2',
 					},
 					soft: {
-						cell: 'bg-surface-50 hover:bg-surface-100 focus:bg-surface-100',
+						cell: 'bg-surface-muted hover:bg-surface-elevated focus:bg-surface-elevated',
 					},
-					subtle: { cell: 'border border-surface-300 bg-surface-100 focus:border-2' },
-					ghost: { cell: 'hover:bg-surface-100 focus:bg-surface-100' },
+					subtle: { cell: 'border border-surface-accented bg-surface-elevated focus:border-2' },
+					ghost: { cell: 'hover:bg-surface-elevated focus:bg-surface-elevated' },
 					none: { cell: '' },
 				},
 			},
@@ -99,7 +98,7 @@
 				{
 					variant: ['outline', 'subtle'],
 					color: 'surface',
-					class: { cell: 'focus:border-surface-900' },
+					class: { cell: 'focus:border-surface-inverted' },
 				},
 				{
 					variant: ['outline', 'subtle'],
@@ -132,7 +131,7 @@
 	});
 </script>
 
-<div id={id || internal_id} class={classes.root({ class: ui.root })}>
+<div id={id || internal_id} class={variants.root({ class: ui.root })}>
 	{#each { length }, i (i)}
 		<input
 			bind:this={input_els[i]}
@@ -148,7 +147,7 @@
 					}
 				}
 			}
-			class={classes.cell({ class: ui.cell })}
+			class={variants.cell({ class: ui.cell })}
 			onkeydown={(e) => {
 				if (KEYS_TO_IGNORE.includes(e.key)) e.preventDefault();
 				if (type === 'number' && isNaN(parseInt(e.key))) e.preventDefault();

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

@@ -1,5 +1,5 @@
 import type { PropColor, PropVariant } from '../index.js';
-import type { ClassNameValue } from 'tailwind-merge';
+import { type ClassValue } from 'tailwind-variants';
 export type PinInputProps = {
     value?: number[] | string[];
     color?: PropColor;
@@ -16,8 +16,8 @@ export type PinInputProps = {
     required?: boolean;
     type?: 'text' | 'number';
     ui?: {
-        root?: ClassNameValue;
-        cell?: ClassNameValue;
+        root?: ClassValue;
+        cell?: ClassValue;
     };
 };
 declare const PinInput: import("svelte").Component<PinInputProps, {}, "value">;

package/dist/components/placeholder.svelte

@@ -1,15 +1,15 @@
 <script lang="ts">
 	import type { SvelteHTMLElements } from 'svelte/elements';
-	import { cx } from 'tailwind-variants';
+	import { cn } from 'tailwind-variants';
 
-	let { class: klass, ...rest }: SvelteHTMLElements['svg'] = $props();
+	let { class: classes, ...rest }: SvelteHTMLElements['svg'] = $props();
 </script>
 
 <svg
 	{...rest}
-	class={cx(
+	class={cn(
 		'inset-0 w-full stroke-surface-elevated border border-dashed border-surface-accented rounded-md',
-		klass,
+		classes,
 	)}
 	fill="none"
 >

package/dist/components/popover.svelte

@@ -1,10 +1,8 @@
 <script module lang="ts">
 	import type { Snippet } from 'svelte';
-	import type { ClassNameValue } from 'tailwind-merge';
-	import { Popover, type PopoverContentProps } from 'bits-ui';
-	import { cn, tv } from 'tailwind-variants';
-	import { type ButtonProps,Button } from '../index.js';
-	import type { PropColor } from '../index.js';
+	import { Popover, type PopoverArrowProps, type PopoverContentProps } from 'bits-ui';
+	import { tv, type ClassValue } from 'tailwind-variants';
+	import { type ButtonBaseProps, Button } from '../index.js';
 
 	export type PopoverContentSnippet = {
 		props: Record<string, unknown>;
@@ -12,7 +10,7 @@
 		wrapperProps: Record<string, unknown>;
 	};
 
-	export type PopoverProps = {
+	export type PopoverProps = ButtonBaseProps & {
 		/**
 		 * The display mode of the popover.
 		 */
@@ -21,20 +19,15 @@
 		 * The props for the content of popover.
 		 */
 		contentprops?: PopoverContentProps;
-		content?: Snippet<[PopoverContentSnippet]>;
 		children?: Snippet<[]>;
-		/**
-		 * Snippet if you want to implement your own trigger button
-		 */
-		trigger?: Snippet<[Record<string, unknown>]>;
 		/**
 		 * Display an arrow alongside the popover.
 		 */
-		arrow?: boolean;
+		arrow?: boolean | PopoverArrowProps;
 		/**
 		 * Render the popover in a portal.
 		 */
-		portal?: string | false | true | HTMLElement;
+		// portal?: string | false | true | HTMLElement;
 		/**
 		 * The reference (or anchor) element that is being referred to for positioning. If not provided will use the current component as anchor.
 		 */
@@ -49,10 +42,6 @@
 		 * When `false`, the popover will not close when clicking outside or pressing escape.
 		 */
 		dismissible?: boolean;
-		/**
-		 * The open state of the popover when it is initially rendered. Use when you do not need to control its open state.
-		 */
-		defaultopen?: boolean;
 		/**
 		 * The controlled open state of the popover.
 		 */
@@ -73,21 +62,10 @@
 		 *
 		 */
 		ui?: {
-			content?: ClassNameValue;
-			arrow?: ClassNameValue;
+			content?: ClassValue;
+			arrow?: ClassValue;
+			trigger?: ClassValue;
 		};
-		/**
-		 * @default `outline`
-		 */
-		variant?: ButtonProps['variant'];
-		/**
-		 * @default primary
-		 */
-		color?: PropColor;
-		/**
-		 *
-		 */
-		class?: ClassNameValue;
 	};
 </script>
 
@@ -95,57 +73,51 @@
 	let {
 		mode = 'click',
 		contentprops = { side: 'bottom', sideOffset: 8, collisionPadding: 8 },
-		content,
 		children,
-		trigger,
-		arrow = true,
-		portal = true,
-		reference,
+		arrow = false,
 		dismissible = true,
-		defaultopen,
 		open = $bindable(false),
-		modal = false,
 		opendelay = 0,
 		closedelay = 0,
 		ui = {},
-		variant = 'outline',
-		color = 'primary',
-		class: klass,
+		...rest
 	}: PopoverProps = $props();
 
-	const classes = $derived(
+	const variants = $derived(
 		tv({
 			slots: {
-				content:
-					'bg-default shadow-lg rounded-md ring ring-default data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] origin-(--reka-popover-content-transform-origin) focus:outline-none pointer-events-auto',
-				arrow: 'fill-default',
+				content: [
+					'bg-surface-base z-30 w-full shadow-lg rounded-md border border-surface-accented p-4',
+					'origin-(--bits-popover-content-transform-origin)',
+					'',
+				],
+				arrow: 'text-surface-accented',
 			},
 		})({}),
 	);
 </script>
 
 <Popover.Root bind:open>
-	<Popover.Trigger>
+	<Popover.Trigger openOnHover={mode === 'hover'} openDelay={opendelay} closeDelay={closedelay}>
 		{#snippet child({ props })}
-			{#if trigger}
-				{@render trigger(props)}
-			{:else}
-				<Button {...props} {variant} {color} ui={{ base: klass }} />
-			{/if}
+			<Button {...rest} {...props} ui={{ base: ui.trigger }} />
 		{/snippet}
 	</Popover.Trigger>
+
 	<Popover.Portal>
-		<Popover.Overlay />
-		<Popover.Content {...contentprops} class={classes.content({ class: ui.content })}>
-			{#snippet child(props)}
-				{#if content}
-					{@render content(props)}
-				{:else}
-					{@render children?.()}
-				{/if}
-			{/snippet}
+		<Popover.Content
+			{...contentprops}
+			class={variants.content({ class: ui.content })}
+			interactOutsideBehavior={dismissible ? 'close' : 'ignore'}
+		>
+			{@render children?.()}
 
-			<Popover.Arrow />
+			{#if arrow}
+				<Popover.Arrow
+					{...typeof arrow === 'object' ? arrow : {}}
+					class={variants.arrow({ class: ui.arrow })}
+				/>
+			{/if}
 		</Popover.Content>
 	</Popover.Portal>
 </Popover.Root>

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

@@ -1,14 +1,13 @@
 import type { Snippet } from 'svelte';
-import type { ClassNameValue } from 'tailwind-merge';
-import { Popover, type PopoverContentProps } from 'bits-ui';
-import { type ButtonProps } from '../index.js';
-import type { PropColor } from '../index.js';
+import { Popover, type PopoverArrowProps, type PopoverContentProps } from 'bits-ui';
+import { type ClassValue } from 'tailwind-variants';
+import { type ButtonBaseProps } from '../index.js';
 export type PopoverContentSnippet = {
     props: Record<string, unknown>;
     open: boolean;
     wrapperProps: Record<string, unknown>;
 };
-export type PopoverProps = {
+export type PopoverProps = ButtonBaseProps & {
     /**
      * The display mode of the popover.
      */
@@ -17,20 +16,14 @@ export type PopoverProps = {
      * The props for the content of popover.
      */
     contentprops?: PopoverContentProps;
-    content?: Snippet<[PopoverContentSnippet]>;
     children?: Snippet<[]>;
-    /**
-     * Snippet if you want to implement your own trigger button
-     */
-    trigger?: Snippet<[Record<string, unknown>]>;
     /**
      * Display an arrow alongside the popover.
      */
-    arrow?: boolean;
+    arrow?: boolean | PopoverArrowProps;
     /**
      * Render the popover in a portal.
      */
-    portal?: string | false | true | HTMLElement;
     /**
      * The reference (or anchor) element that is being referred to for positioning. If not provided will use the current component as anchor.
      */
@@ -43,10 +36,6 @@ export type PopoverProps = {
      * When `false`, the popover will not close when clicking outside or pressing escape.
      */
     dismissible?: boolean;
-    /**
-     * The open state of the popover when it is initially rendered. Use when you do not need to control its open state.
-     */
-    defaultopen?: boolean;
     /**
      * The controlled open state of the popover.
      */
@@ -67,21 +56,10 @@ export type PopoverProps = {
      *
      */
     ui?: {
-        content?: ClassNameValue;
-        arrow?: ClassNameValue;
+        content?: ClassValue;
+        arrow?: ClassValue;
+        trigger?: ClassValue;
     };
-    /**
-     * @default `outline`
-     */
-    variant?: ButtonProps['variant'];
-    /**
-     * @default primary
-     */
-    color?: PropColor;
-    /**
-     *
-     */
-    class?: ClassNameValue;
 };
 declare const Popover: import("svelte").Component<PopoverProps, {}, "open">;
 type Popover = ReturnType<typeof Popover>;

package/dist/components/progress.svelte

@@ -1,7 +1,6 @@
 <script module lang="ts">
 	import type { PropColor } from '../index.js';
-	import type { ClassNameValue } from 'tailwind-merge';
-	import { tv } from 'tailwind-variants';
+	import { tv, type ClassValue } from 'tailwind-variants';
 
 	export type ProgressProps = {
 		value?: number;
@@ -13,10 +12,10 @@
 		inverted?: boolean;
 		status?: boolean;
 		ui?: {
-			base?: ClassNameValue;
-			header?: ClassNameValue;
-			content?: ClassNameValue;
-			footer?: ClassNameValue;
+			base?: ClassValue;
+			header?: ClassValue;
+			content?: ClassValue;
+			footer?: ClassValue;
 		};
 	};
 </script>
@@ -47,10 +46,10 @@
 
 		return false;
 	});
-	const classes = $derived.by(() =>
+	const variants = $derived.by(() =>
 		tv({
 			slots: {
-				root: 'relative w-full rounded-full overflow-hidden bg-surface-300',
+				root: 'relative w-full rounded-full overflow-hidden bg-surface-accented',
 				status: '',
 				indicator: 'absolute transition-all rounded-full',
 				steps: '',
@@ -61,7 +60,7 @@
 						indicator: 'bg-primary-500',
 					},
 					surface: {
-						indicator: 'bg-surface-500',
+						indicator: 'bg-label-muted',
 					},
 					info: {
 						indicator: 'bg-info-500',
@@ -92,8 +91,8 @@
 </script>
 
 <div data-state-indeterminate={indeterminate}>
-	<div class={classes.root({ class: [ui.base] })} style:height={`${height}px`}>
-		<span class={classes.indicator({ class: ['h-full left-0'] })} style:width={`${percentage}%`}>
+	<div class={variants.root({ class: [ui.base] })} style:height={`${height}px`}>
+		<span class={variants.indicator({ class: ['h-full left-0'] })} style:width={`${percentage}%`}>
 		</span>
 	</div>
 
@@ -101,7 +100,7 @@
 		<p
 			class={[
 				'text-right transition',
-				value && value > 0 && max[value] ? 'text-primary-500' : 'text-surface-500',
+				value && value > 0 && max[value] ? 'text-primary-500' : 'text-label-muted',
 			]}
 		>
 			{(value && max[value]) || max[0]}
@@ -110,15 +109,17 @@
 </div>
 
 <style>
-	@keyframe swing {
-		0% {
-			width: 0%;
-		}
-		50% {
-			width: 100%;
-		}
-		100% {
-			width: 0%;
+	:global {
+		@keyframes swing {
+			0% {
+				width: 0%;
+			}
+			50% {
+				width: 100%;
+			}
+			100% {
+				width: 0%;
+			}
 		}
 	}
 </style>

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

@@ -1,5 +1,5 @@
 import type { PropColor } from '../index.js';
-import type { ClassNameValue } from 'tailwind-merge';
+import { type ClassValue } from 'tailwind-variants';
 export type ProgressProps = {
     value?: number;
     max?: number | string[];
@@ -10,10 +10,10 @@ export type ProgressProps = {
     inverted?: boolean;
     status?: boolean;
     ui?: {
-        base?: ClassNameValue;
-        header?: ClassNameValue;
-        content?: ClassNameValue;
-        footer?: ClassNameValue;
+        base?: ClassValue;
+        header?: ClassValue;
+        content?: ClassValue;
+        footer?: ClassValue;
     };
 };
 declare const Progress: import("svelte").Component<ProgressProps, {}, "">;

package/dist/components/select.svelte

@@ -2,14 +2,15 @@
 	import type { PropColor, PropVariant } from '../index.js';
 	import { Select } from 'bits-ui';
 	import type { Component, Snippet } from 'svelte';
-	import type { ClassNameValue } from 'tailwind-merge';
-	import { tv } from 'tailwind-variants';
+	import { tv, type ClassValue } from 'tailwind-variants';
+	import Icon from './icon.svelte';
 
 	export type SelectItem<T> =
 		| T
 		| {
 				icon?: string | Component;
-				label: string | Component;
+				iconposition?: 'leading' | 'trailing';
+				label: string | Component | Snippet;
 				value: T;
 		  };
 
@@ -23,34 +24,26 @@
 		highlight?: boolean;
 		placeholder?: string;
 		ui?: {
-			base?: ClassNameValue;
-			leading?: ClassNameValue;
-			leadingIcon?: ClassNameValue;
-			leadingAvatar?: ClassNameValue;
-			leadingAvatarSize?: ClassNameValue;
-			trailing?: ClassNameValue;
-			trailingIcon?: ClassNameValue;
-			value?: ClassNameValue;
-			placeholder?: ClassNameValue;
-			arrow?: ClassNameValue;
-			content?: ClassNameValue;
-			viewport?: ClassNameValue;
-			group?: ClassNameValue;
-			empty?: ClassNameValue;
-			label?: ClassNameValue;
-			separator?: ClassNameValue;
-			item?: ClassNameValue;
-			itemLeadingIcon?: ClassNameValue;
-			itemLeadingAvatar?: ClassNameValue;
-			itemLeadingAvatarSize?: ClassNameValue;
-			itemLeadingChip?: ClassNameValue;
-			itemLeadingChipSize?: ClassNameValue;
-			itemTrailing?: ClassNameValue;
-			itemTrailingIcon?: ClassNameValue;
-			itemWrapper?: ClassNameValue;
-			itemLabel?: ClassNameValue;
-			itemDescription?: ClassNameValue;
+			base?: ClassValue;
+			leading?: ClassValue;
+			icon?: ClassValue;
+			leadingAvatar?: ClassValue;
+			leadingAvatarSize?: ClassValue;
+			trailing?: ClassValue;
+			value?: ClassValue;
+			placeholder?: ClassValue;
+			arrow?: ClassValue;
+			content?: ClassValue;
+			viewport?: ClassValue;
+			group?: ClassValue;
+			empty?: ClassValue;
+			label?: ClassValue;
+			separator?: ClassValue;
+			item?: ClassValue;
+			itemicon?: ClassValue;
+			dropdownicon?: ClassValue;
 		};
+		dropdownicon?: string | Component;
 	} & (
 		| {
 				value?: T;
@@ -76,37 +69,39 @@
 		highlight,
 		placeholder,
 		ui = {},
+		dropdownicon = 'i-lucide:chevron-down',
 	}: SelectProps<T> = $props();
 
-	const classes = $derived(
+	const variants = $derived(
 		tv({
 			slots: {
 				base: [
-					'relative group rounded-md inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75',
+					'relative group rounded-md inline-flex items-center justify-between focus:outline-none disabled:cursor-not-allowed disabled:opacity-75',
 					'transition-colors',
 				],
 				leading: 'absolute inset-y-0 start-0 flex items-center',
-				leadingIcon: 'shrink-0 text-dimmed',
+				leadingIcon: 'shrink-0 text-label-dimmed',
 				leadingAvatar: 'shrink-0',
 				leadingAvatarSize: '',
 				trailing: 'absolute inset-y-0 end-0 flex items-center',
-				trailingIcon: 'shrink-0 text-dimmed',
+				trailingIcon: 'shrink-0 text-label-dimmed',
 				value: 'truncate pointer-events-none',
-				placeholder: 'truncate text-dimmed',
+				placeholder: 'truncate text-label-dimmed',
 				arrow: 'fill-bg stroke-default',
 				content:
-					'max-h-60 w-(--bits-select-anchor-width) bg-inverted shadow-lg rounded-md ring ring-surface-accented overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] origin-(--bits-select-content-transform-origin) pointer-events-auto flex flex-col',
+					'max-h-60 w-(--bits-select-anchor-width) bg-label-inverted shadow-lg rounded-md ring p-1 ring-surface-accented overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] origin-(--bits-select-content-transform-origin) pointer-events-auto flex flex-col',
 				viewport: 'relative divide-y divide-base scroll-py-1 overflow-y-auto flex-1',
 				group: 'p-1 isolate',
-				empty: 'text-center text-muted',
-				label: 'font-semibold text-highlighted',
+				empty: 'text-center text-label-muted',
+				label: 'font-semibold text-label-highlighted',
 				separator: '-mx-1 my-1 h-px bg-border',
 				item: [
-					'group relative w-full flex items-start select-none outline-none before:absolute before:content-[""] before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-[data-disabled]:before:bg-surface-elevated/50',
-					'transition-colors before:transition-colors',
+					'group relative w-full flex items-start select-none outline-none whitespace-nowrap text-default rounded transition',
+					'data-disabled:cursor-not-allowed data-disabled:opacity-75',
+					'not-[data-disabled]:hover:text-label-highlighted not-[data-disabled]:hover:bg-surface-elevated/50',
 				],
 				itemLeadingIcon: [
-					'shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default',
+					'shrink-0 text-label-dimmed group-data-highlighted:not-group-data-disabled:text-default',
 					'transition-colors',
 				],
 				itemLeadingAvatar: 'shrink-0',
@@ -117,7 +112,7 @@
 				itemTrailingIcon: 'shrink-0',
 				itemWrapper: 'flex-1 flex flex-col min-w-0',
 				itemLabel: 'truncate',
-				itemDescription: 'truncate text-muted',
+				itemDescription: 'truncate text-label-muted',
 			},
 			variants: {
 				fieldGroup: {
@@ -210,13 +205,13 @@
 				},
 				variant: {
 					outline:
-						'text-highlighted bg-default ring ring-inset ring-surface-accented hover:bg-surface-elevated disabled:bg-surface-default',
-					soft: 'text-highlighted bg-surface-elevated/50 hover:bg-surface-elevated focus:bg-surface-elevated disabled:bg-surface-elevated/50',
+						'text-label-highlighted bg-default ring ring-inset ring-surface-accented hover:bg-surface-elevated disabled:bg-surface-default',
+					soft: 'text-label-highlighted bg-surface-elevated/50 hover:bg-surface-elevated focus:bg-surface-elevated disabled:bg-surface-elevated/50',
 					subtle:
-						'text-highlighted bg-surface-elevated ring ring-inset ring-accented hover:bg-surface-accented/75 disabled:bg-surface-elevated',
+						'text-label-highlighted bg-surface-elevated ring ring-inset ring-accented hover:bg-surface-accented/75 disabled:bg-surface-elevated',
 					ghost:
-						'text-highlighted bg-transparent hover:bg-surface-elevated focus:bg-surface-elevated disabled:bg-transparent dark:disabled:bg-transparent',
-					none: 'text-highlighted bg-transparent',
+						'text-label-highlighted bg-transparent hover:bg-surface-elevated focus:bg-surface-elevated disabled:bg-transparent dark:disabled:bg-transparent',
+					none: 'text-label-highlighted bg-transparent',
 				},
 				color: {
 					primary: '',
@@ -242,7 +237,7 @@
 					false: '',
 				},
 				type: {
-					file: 'file:me-1.5 file:font-medium file:text-muted file:outline-none',
+					file: 'file:me-1.5 file:font-medium file:text-label-muted file:outline-none',
 				},
 			},
 			compoundVariants: [
@@ -407,13 +402,13 @@
 		(v) => (value = v as T | T[] | undefined)
 	}
 >
-	<Select.Trigger class={classes.base({ class: ui.base })}>
+	<Select.Trigger class={variants.base({ class: ui.base })}>
 		{value || placeholder}
-		<div class="i-lucide-chevron-down size-4"></div>
+		<Icon name={dropdownicon} class="size-4" />
 	</Select.Trigger>
 	<Select.Portal>
 		<Select.Content
-			class={classes.content({ class: ui.content })}
+			class={variants.content({ class: ui.content })}
 			preventScroll={true}
 			sideOffset={8}
 		>
@@ -425,13 +420,13 @@
 							<Select.GroupHeading />
 
 							{#each item as group_item, gidx (gidx)}
-								<Select.Item class={classes.item({ class: ui.item })} value=""></Select.Item>
+								<Select.Item class={variants.item({ class: ui.item })} value=""></Select.Item>
 							{/each}
 						</Select.Group>
 					{:else}
 						{@const is_object = typeof item === 'object' && item !== null && 'value' in item}
 						<Select.Item
-							class={classes.item({ class: ui.item })}
+							class={variants.item({ class: ui.item })}
 							value={(is_object ? item.value : item) as string}
 						>
 							{item}