Offcanvas

1'use client';
2 
3import * as DialogPrimitive from '@radix-ui/react-dialog';
4import { X } from 'lucide-react';
5import { ComponentProps } from 'react';
6 
7import { Headline5, Label2 } from '@/components/ui/typography';
8import { cn } from '@/lib/utils';
9 
10/*
11 * UX4G offcanvas: width 400px (left/right), height 30vh (top/bottom),
12 * padding 1rem, border 1px solid neutral-200, transition 0.3s ease-in-out,
13 * backdrop opacity 0.5.
14 */
15 
16type TOffcanvasSide = 'left' | 'right' | 'top' | 'bottom';
17 
18/** Offcanvas dialog root component. */
19function Offcanvas(props: ComponentProps<typeof DialogPrimitive.Root>) {
20  return <DialogPrimitive.Root {...props} />;
21}
22 
23/** Offcanvas trigger button. */
24function OffcanvasTrigger(props: ComponentProps<typeof DialogPrimitive.Trigger>) {
25  return <DialogPrimitive.Trigger {...props} />;
26}
27 
28/** Offcanvas close button. */
29function OffcanvasClose(props: ComponentProps<typeof DialogPrimitive.Close>) {
30  return <DialogPrimitive.Close {...props} />;
31}
32 
33/** Semi-transparent backdrop overlay. */
34function OffcanvasOverlay({ className, ...props }: ComponentProps<typeof DialogPrimitive.Overlay>) {
35  return (
36    <DialogPrimitive.Overlay
37      className={cn(
38        'data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50',
39        className,
40      )}
41      {...props}
42    />
43  );
44}
45 
46interface IOffcanvasContentProps extends ComponentProps<typeof DialogPrimitive.Content> {
47  side?: TOffcanvasSide;
48  bodyScroll?: boolean;
49}
50 
51const OFFCANVAS_SIDE_CLASSES: Record<TOffcanvasSide, string> = {
52  left: 'inset-y-0 left-0 h-full w-[400px] max-w-full border-r border-neutral-200 data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left',
53  right:
54    'inset-y-0 right-0 h-full w-[400px] max-w-full border-l border-neutral-200 data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right',
55  top: 'inset-x-0 top-0 w-full h-[30vh] max-h-full border-b border-neutral-200 data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top',
56  bottom:
57    'inset-x-0 bottom-0 w-full h-[30vh] max-h-full border-t border-neutral-200 data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom',
58};
59 
60/**
61 * Sliding panel for off-canvas navigation or content.
62 * Sides: left, right, top, bottom. bodyScroll=true allows page scroll while open.
63 */
64function OffcanvasContent({
65  className,
66  side = 'right',
67  bodyScroll = false,
68// … truncated