A self-hosted orchestration system crafted for power users. composia.xyz
Something went wrong. Try again.
1.9 kB · 59 lines
Svelte
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960<script lang="ts" module> import { tv, type VariantProps } from "tailwind-variants"; export const inputGroupAddonVariants = tv({ base: "text-muted-foreground h-auto gap-2 py-1.5 text-sm font-medium group-data-[disabled=true]/input-group:opacity-50 [&>kbd]:rounded-[calc(var(--radius)-5px)] [&>svg:not([class*='size-'])]:size-4 flex cursor-text items-center justify-center select-none", variants: { align: { "inline-start": "pl-2 has-[>button]:ml-[-0.3rem] has-[>kbd]:ml-[-0.15rem] order-first", "inline-end": "pr-2 has-[>button]:mr-[-0.3rem] has-[>kbd]:mr-[-0.15rem] order-last", "block-start": "px-2.5 pt-2 group-has-[>input]/input-group:pt-2 [.border-b]:pb-2 order-first w-full justify-start", "block-end": "px-2.5 pb-2 group-has-[>input]/input-group:pb-2 [.border-t]:pt-2 order-last w-full justify-start", }, }, defaultVariants: { align: "inline-start", }, });
export type InputGroupAddonAlign = VariantProps<typeof inputGroupAddonVariants>["align"];</script>
<script lang="ts"> import { cn, type WithElementRef } from "$lib/utils.js"; import type { HTMLAttributes } from "svelte/elements";
let { ref = $bindable(null), class: className, children, align = "inline-start", ...restProps }: WithElementRef<HTMLAttributes<HTMLDivElement>> & { align?: InputGroupAddonAlign; } = $props();</script>
<div bind:this={ref} role="group" data-slot="input-group-addon" data-align={align} class={cn(inputGroupAddonVariants({ align }), className)} tabindex="-1" onclick={(e) => { if ((e.target as HTMLElement).closest("button")) { return; } e.currentTarget.parentElement?.querySelector("input")?.focus(); }} onkeydown={(e) => { if (e.key === "Enter" || e.key === " ") { e.preventDefault(); e.currentTarget.parentElement?.querySelector("input")?.focus(); } }} {...restProps}> {@render children?.()}</div>