A self-hosted orchestration system crafted for power users. composia.xyz
Something went wrong. Try again.
Svelte
123456789101112131415161718192021222324252627282930313233343536373839<script lang="ts"> import { Select as SelectPrimitive } from "bits-ui"; import { cn, type WithoutChild } from "$lib/utils.js"; import CheckIcon from '@lucide/svelte/icons/check';
let { ref = $bindable(null), class: className, value, label, children: childrenProp, ...restProps }: WithoutChild<SelectPrimitive.ItemProps> = $props();</script>
<SelectPrimitive.Item bind:ref {value} data-slot="select-item" class={cn( "focus:bg-accent focus:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground gap-1.5 rounded-md py-1 pr-8 pl-1.5 text-sm [&_svg:not([class*='size-'])]:size-4 *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2 focus:bg-accent data-highlighted:bg-accent data-highlighted:text-accent-foreground focus:text-accent-foreground relative flex w-full cursor-default items-center outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0", className )} {...restProps}> {#snippet children({ selected, highlighted })} <span class="absolute end-2 flex size-3.5 items-center justify-center"> {#if selected} <CheckIcon class="cn-select-item-indicator-icon" /> {/if} </span> {#if childrenProp} {@render childrenProp({ selected, highlighted })} {:else} {label || value} {/if} {/snippet}</SelectPrimitive.Item>