A self-hosted orchestration system crafted for power users. composia.xyz
Something went wrong. Try again.
1.2 kB · 49 lines
Svelte
1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950<script lang="ts" module> import { tv, type VariantProps } from "tailwind-variants";
const inputGroupButtonVariants = tv({ base: "gap-2 text-sm flex items-center shadow-none", variants: { size: { xs: "h-6 gap-1 rounded-[calc(var(--radius)-3px)] px-1.5 [&>svg:not([class*='size-'])]:size-3.5", sm: "cn-input-group-button-size-sm", "icon-xs": "size-6 rounded-[calc(var(--radius)-3px)] p-0 has-[>svg]:p-0", "icon-sm": "size-8 p-0 has-[>svg]:p-0", }, }, defaultVariants: { size: "xs", }, });
export type InputGroupButtonSize = VariantProps<typeof inputGroupButtonVariants>["size"];</script>
<script lang="ts"> import { cn } from "$lib/utils.js"; import type { ComponentProps } from "svelte"; import { Button } from "$lib/components/ui/button/index.js";
let { ref = $bindable(null), class: className, children, type = "button", variant = "ghost", size = "xs", ...restProps }: Omit<ComponentProps<typeof Button>, "href" | "size"> & { size?: InputGroupButtonSize; } = $props();</script>
<Button bind:ref {type} data-size={size} {variant} class={cn(inputGroupButtonVariants({ size }), className)} {...restProps}> {@render children?.()}</Button>