gpx.studio/website/src/lib/components/ui/sheet/index.ts

import { Dialog as SheetPrimitive } from "bits-ui";
import { type VariantProps, tv } from "tailwind-variants";

import Portal from "./sheet-portal.svelte";
import Overlay from "./sheet-overlay.svelte";
import Content from "./sheet-content.svelte";
import Header from "./sheet-header.svelte";
import Footer from "./sheet-footer.svelte";
import Title from "./sheet-title.svelte";
import Description from "./sheet-description.svelte";

const Root = SheetPrimitive.Root;
const Close = SheetPrimitive.Close;
const Trigger = SheetPrimitive.Trigger;

export {
	Root,
	Close,
	Trigger,
	Portal,
	Overlay,
	Content,
	Header,
	Footer,
	Title,
	Description,
	//
	Root as Sheet,
	Close as SheetClose,
	Trigger as SheetTrigger,
	Portal as SheetPortal,
	Overlay as SheetOverlay,
	Content as SheetContent,
	Header as SheetHeader,
	Footer as SheetFooter,
	Title as SheetTitle,
	Description as SheetDescription,
};

export const sheetVariants = tv({
	base: "fixed z-50 gap-4 bg-background p-6 shadow-lg",
	variants: {
		side: {
			top: "inset-x-0 top-0 border-b",
			bottom: "inset-x-0 bottom-0 border-t",
			left: "inset-y-0 left-0 h-full w-3/4 border-r sm:max-w-sm",
			right: "inset-y-0 right-0 h-full w-3/4  border-l sm:max-w-sm",
		},
	},
	defaultVariants: {
		side: "right",
	},
});

export const sheetTransitions = {
	top: {
		in: {
			y: "-100%",
			duration: 500,
			opacity: 1,
		},
		out: {
			y: "-100%",
			duration: 300,
			opacity: 1,
		},
	},
	bottom: {
		in: {
			y: "100%",
			duration: 500,
			opacity: 1,
		},
		out: {
			y: "100%",
			duration: 300,
			opacity: 1,
		},
	},
	left: {
		in: {
			x: "-100%",
			duration: 500,
			opacity: 1,
		},
		out: {
			x: "-100%",
			duration: 300,
			opacity: 1,
		},
	},
	right: {
		in: {
			x: "100%",
			duration: 500,
			opacity: 1,
		},
		out: {
			x: "100%",
			duration: 300,
			opacity: 1,
		},
	},
};

export type Side = VariantProps<typeof sheetVariants>["side"];