alice.pds.demo.boltless.dev
This repository has no description
1<script module lang="ts">
2 import { tv } from "tailwind-variants";
3
4 // the surface that docks directly beneath a <Tabs> bar. it pulls itself up 1px
5 // so its top border tucks behind the bar, where the active tab's raised, opaque
6 // background hides the seam — producing the connected "folder tab" look. keep it
7 // flush against the tab bar (no margin between them) for the join to line up.
8 export const tabPanel = tv({
9 base: "-mt-px rounded border border-border-default bg-background-default text-foreground-default",
10 variants: {
11 // the common surface padding; turn off to lay out children yourself
12 padded: {
13 true: "px-6 py-4",
14 false: ""
15 }
16 },
17 defaultVariants: {
18 padded: true
19 }
20 });
21</script>
22
23<script lang="ts">
24 import type { Snippet } from "svelte";
25
26 interface Props {
27 // tag to render as; a semantic <section> by default
28 as?: string;
29 padded?: boolean;
30 class?: string;
31 children: Snippet;
32 }
33
34 let { as = "section", padded = true, class: className, children }: Props = $props();
35</script>
36
37<svelte:element this={as} class={tabPanel({ padded, class: className })}>
38 {@render children()}
39</svelte:element>