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 // Echoes the +layout.svelte container idiom: a centered, padded section
5 // clamped to a max width (matches Figma node 35:791's single Content slot).
6 export const scaffold = tv({
7 base: "mx-auto w-full px-4 py-6",
8 variants: {
9 width: {
10 lg: "max-w-screen-lg",
11 xl: "max-w-screen-xl",
12 full: "max-w-full"
13 }
14 },
15 defaultVariants: {
16 width: "lg"
17 }
18 });
19
20 export type ScaffoldVariants = VariantProps<typeof scaffold>;
21</script>
22
23<script lang="ts">
24 import type { Snippet } from "svelte";
25
26 interface Props {
27 width?: ScaffoldVariants["width"];
28 class?: string;
29 children: Snippet;
30 }
31
32 let { width = "lg", class: className, children }: Props = $props();
33
34 const classes = $derived(scaffold({ width, class: className }));
35</script>
36
37<div class={classes}>
38 {@render children()}
39</div>