Banner

1<script lang="ts" module>
2	import { tv, type VariantProps } from 'tailwind-variants';
3
4	export type BannerPersist = 'local' | 'session' | 'none';
5
6	export const bannerVariants = tv({
7		base: 'relative flex w-full items-center gap-3 border-b px-4 py-2.5 text-sm',
8		variants: {
9			variant: {
10				default: 'bg-muted text-foreground border-border',
11				primary: 'bg-primary text-primary-foreground border-primary',
12				info: 'bg-blue-500/10 text-blue-900 border-blue-500/20 dark:text-blue-200',
13				success: 'bg-emerald-500/10 text-emerald-900 border-emerald-500/20 dark:text-emerald-200',
14				warning: 'bg-amber-500/10 text-amber-900 border-amber-500/20 dark:text-amber-200',
15				destructive: 'bg-destructive/10 text-destructive border-destructive/20'
16			},
17			align: {
18				start: 'justify-start',
19				center: 'justify-center text-center'
20			}
21		},
22		defaultVariants: {
23			variant: 'default',
24			align: 'start'
25		}
26	});
27
28	export type BannerVariant = VariantProps<typeof bannerVariants>['variant'];
29	export type BannerAlign = VariantProps<typeof bannerVariants>['align'];
30
31	export const bannerStorageKey = (id: string) => `more-shadcn:banner:${id}`;
32
33	function storageFor(persist: BannerPersist): Storage | null {
34		if (persist === 'none' || typeof window === 'undefined') return null;
35		try {
36			return persist === 'session' ? window.sessionStorage : window.localStorage;
37		} catch {
38			// Storage can throw in private mode or when blocked by the browser.
39			return null;
40		}
41	}
42
43	export function isBannerDismissed(id: string, persist: BannerPersist = 'local') {
44		return storageFor(persist)?.getItem(bannerStorageKey(id)) === 'dismissed';
45	}
46
47	export function dismissBanner(id: string, persist: BannerPersist = 'local') {
48		storageFor(persist)?.setItem(bannerStorageKey(id), 'dismissed');
49	}
50
51	/** Clears a stored dismissal so the banner shows again. */
52	export function resetBanner(id: string, persist: BannerPersist = 'local') {
53		storageFor(persist)?.removeItem(bannerStorageKey(id));
54	}
55</script>
56
57<script lang="ts">
58	import { cn } from '$UTILS$';
59	import { X } from '@lucide/svelte';
60	import { slide } from 'svelte/transition';
61	import type { Snippet } from 'svelte';
62
63	let {
64		id = 'banner',
65		open = $bindable(true),
66		persist = 'local',
67		variant = 'default',
68		align = 'start',
69		dismissible = true,
70		sticky = false,
71		closeLabel = 'Dismiss',
72		class: className,
73		ondismiss,
74		icon,
75		action,
76		children,
77// … truncated