A self-hosted orchestration system crafted for power users. composia.xyz
Something went wrong. Try again.
Svelte
1234567891011121314151617181920212223242526272829303132<script lang="ts"> import { Command as CommandPrimitive } from "bits-ui"; import { cn } from "$lib/utils.js"; import * as InputGroup from "$lib/components/ui/input-group/index.js"; import SearchIcon from '@lucide/svelte/icons/search';
let { ref = $bindable(null), class: className, value = $bindable(""), ...restProps }: CommandPrimitive.InputProps = $props();</script>
<div data-slot="command-input-wrapper" class="p-1 pb-0"> <InputGroup.Root class="bg-input/30 border-input/30 h-8! rounded-lg! shadow-none! *:data-[slot=input-group-addon]:pl-2!"> <CommandPrimitive.Input data-slot="command-input" class={cn( "w-full text-sm outline-hidden disabled:cursor-not-allowed disabled:opacity-50", className )} bind:ref {...restProps} bind:value /> <InputGroup.Addon> <SearchIcon class="size-4 shrink-0 opacity-50" /> </InputGroup.Addon> </InputGroup.Root></div>