53 lines
1.1 KiB
Svelte
53 lines
1.1 KiB
Svelte
<script lang="ts">
|
|
import { Button as BitsButton, type WithoutChildren } from 'bits-ui';
|
|
import type { Snippet } from 'svelte';
|
|
import { COLOR_MAP, VARIANT_MAP, SIZE_MAP } from './button.variants';
|
|
import type { Color, Variant, Size } from './button.variants';
|
|
|
|
type Props = WithoutChildren<BitsButton.RootProps> & {
|
|
color?: Color;
|
|
variant?: Variant;
|
|
size?: Size;
|
|
wide?: boolean;
|
|
block?: boolean;
|
|
square?: boolean;
|
|
circle?: boolean;
|
|
|
|
class?: string;
|
|
children?: Snippet;
|
|
};
|
|
|
|
let {
|
|
color,
|
|
variant,
|
|
size,
|
|
wide,
|
|
block,
|
|
square,
|
|
circle,
|
|
class: className = '',
|
|
children,
|
|
...restProps
|
|
}: Props = $props();
|
|
|
|
const classes = $derived(
|
|
[
|
|
'btn',
|
|
color && COLOR_MAP[color],
|
|
variant && VARIANT_MAP[variant],
|
|
size && SIZE_MAP[size],
|
|
wide && 'btn-wide',
|
|
block && 'btn-block',
|
|
square && 'btn-square',
|
|
circle && 'btn-circle',
|
|
className,
|
|
]
|
|
.filter(Boolean)
|
|
.join(' ')
|
|
);
|
|
</script>
|
|
|
|
<BitsButton.Root class={classes.trim()} {...restProps}>
|
|
{@render children?.()}
|
|
</BitsButton.Root>
|