38 lines
1.5 KiB
Svelte
38 lines
1.5 KiB
Svelte
<script lang="ts">
|
|
import { Dialog as SheetPrimitive } from 'bits-ui';
|
|
import Cross2 from 'svelte-radix/Cross2.svelte';
|
|
import { fly } from 'svelte/transition';
|
|
import { SheetOverlay, SheetPortal, type Side, sheetTransitions, sheetVariants } from './index.js';
|
|
import { cn } from '$lib/utils.js';
|
|
|
|
type $$Props = SheetPrimitive.ContentProps & {
|
|
side?: Side;
|
|
};
|
|
|
|
let className: $$Props['class'] = undefined;
|
|
export let side: $$Props['side'] = 'right';
|
|
export { className as class };
|
|
export let inTransition: $$Props['inTransition'] = fly;
|
|
export let inTransitionConfig: $$Props['inTransitionConfig'] = sheetTransitions[side ?? 'right'].in;
|
|
export let outTransition: $$Props['outTransition'] = fly;
|
|
export let outTransitionConfig: $$Props['outTransitionConfig'] = sheetTransitions[side ?? 'right'].out;
|
|
</script>
|
|
|
|
<SheetPortal>
|
|
<SheetOverlay />
|
|
<SheetPrimitive.Content
|
|
{inTransition}
|
|
{inTransitionConfig}
|
|
{outTransition}
|
|
{outTransitionConfig}
|
|
class={cn(sheetVariants({ side }), className)}
|
|
{...$$restProps}>
|
|
<slot />
|
|
<SheetPrimitive.Close
|
|
class="ring-offset-background focus:ring-ring data-[state=open]:bg-secondary absolute right-4 top-4 rounded-sm opacity-70 transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-offset-2 disabled:pointer-events-none">
|
|
<Cross2 class="h-4 w-4" />
|
|
<span class="sr-only">Close</span>
|
|
</SheetPrimitive.Close>
|
|
</SheetPrimitive.Content>
|
|
</SheetPortal>
|