26 lines
1.1 KiB
Svelte
26 lines
1.1 KiB
Svelte
<script lang="ts">
|
|
import { Label } from "#lib/components/ui/label/index.js";
|
|
import { cn } from "#lib/utils.js";
|
|
import type { ComponentProps } from "svelte";
|
|
|
|
let {
|
|
ref = $bindable(null),
|
|
class: className,
|
|
children,
|
|
...restProps
|
|
}: ComponentProps<typeof Label> = $props();
|
|
</script>
|
|
|
|
<Label
|
|
bind:ref
|
|
data-slot="field-label"
|
|
class={cn(
|
|
"has-data-checked:bg-primary/5 has-data-checked:border-primary/30 dark:has-data-checked:border-primary/20 dark:has-data-checked:bg-primary/10 gap-2 leading-snug group-data-[disabled=true]/field:opacity-50 has-[>[data-slot=field]]:rounded-md has-[>[data-slot=field]]:border has-[>[data-slot=field]]:not-has-[:disabled,[data-disabled]]:hover:bg-muted/50 has-[>[data-slot=field]]:has-[:focus-visible]:border-ring has-[>[data-slot=field]]:has-[:focus-visible]:ring-ring/50 has-[>[data-slot=field]]:has-[:focus-visible]:ring-3 *:data-[slot=field]:p-3 group/field-label peer/field-label flex w-fit",
|
|
"has-[>[data-slot=field]]:w-full has-[>[data-slot=field]]:flex-col",
|
|
className
|
|
)}
|
|
{...restProps}
|
|
>
|
|
{@render children?.()}
|
|
</Label>
|