alice.pds.demo.boltless.dev
This repository has no description
1<script module lang="ts">
2 import { tv, type VariantProps } from "tailwind-variants";
3
4 export const card = tv({
5 base: "rounded-sm",
6 variants: {
7 border: {
8 true: "border border-border-default",
9 false: ""
10 },
11 shadow: {
12 true: "shadow-xs",
13 false: ""
14 },
15 background: {
16 true: "bg-background-default",
17 false: ""
18 },
19 padding: {
20 default: "px-6 py-4",
21 sm: "p-4",
22 none: ""
23 }
24 },
25 defaultVariants: {
26 border: true,
27 shadow: false,
28 background: true,
29 padding: "default"
30 }
31 });
32
33 export type CardVariants = VariantProps<typeof card>;
34</script>
35
36<script lang="ts">
37 import type { Snippet } from "svelte";
38 import type { HTMLAttributes } from "svelte/elements";
39
40 interface Props extends Omit<HTMLAttributes<HTMLDivElement>, "class" | "children"> {
41 border?: CardVariants["border"];
42 shadow?: CardVariants["shadow"];
43 background?: CardVariants["background"];
44 padding?: CardVariants["padding"];
45 class?: string;
46 children?: Snippet;
47 }
48
49 let {
50 border = true,
51 shadow = false,
52 background = true,
53 padding = "default",
54 class: className,
55 children,
56 ...rest
57 }: Props = $props();
58
59 const classes = $derived(card({ border, shadow, background, padding, class: className }));
60</script>
61
62<div class={classes} {...rest}>
63 {#if children}
64 {@render children()}
65 {/if}
66</div>