A self-hosted orchestration system crafted for power users. composia.xyz
Something went wrong. Try again.
Svelte
1234567891011121314151617181920212223242526<script lang="ts"> import { Command as CommandPrimitive } from "bits-ui"; import { cn } from "$lib/utils.js"; import CheckIcon from '@lucide/svelte/icons/check';
let { ref = $bindable(null), class: className, children, ...restProps }: CommandPrimitive.ItemProps = $props();</script>
<CommandPrimitive.Item bind:ref data-slot="command-item" class={cn( "group/command-item data-selected:bg-muted data-selected:text-foreground data-selected:*:[svg]:text-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none in-data-[slot=dialog-content]:rounded-lg! data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", className )} {...restProps}> {@render children?.()} <CheckIcon class="cn-command-item-indicator ml-auto opacity-0 group-has-[[data-slot=command-shortcut]]/command-item:hidden group-data-[checked=true]/command-item:opacity-100" /></CommandPrimitive.Item>