side-dialog

1'use client';
2 
3import { XIcon } from 'lucide-react';
4import * as React from 'react';
5import { createPortal } from 'react-dom';
6import { cn } from '@/lib/utils';
7 
8type SideDialogPosition = 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right' | 'left' | 'right';
9type SideDialogSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl';
10 
11export interface SideDialogProps {
12  open?: boolean;
13  onOpenChange?: (open: boolean) => void;
14  position?: SideDialogPosition;
15  size?: SideDialogSize;
16  children?: React.ReactNode;
17}
18 
19export interface SideDialogTriggerProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
20  asChild?: boolean;
21  children: React.ReactNode;
22}
23 
24export interface SideDialogContentProps extends React.HTMLAttributes<HTMLDivElement> {
25  showCloseButton?: boolean;
26  children: React.ReactNode;
27}
28 
29export interface SideDialogHeaderProps extends React.HTMLAttributes<HTMLDivElement> {
30  children: React.ReactNode;
31}
32 
33export interface SideDialogTitleProps extends React.HTMLAttributes<HTMLHeadingElement> {
34  children: React.ReactNode;
35}
36 
37export interface SideDialogDescriptionProps extends React.HTMLAttributes<HTMLParagraphElement> {
38  children: React.ReactNode;
39}
40 
41export interface SideDialogFooterProps extends React.HTMLAttributes<HTMLDivElement> {
42  children: React.ReactNode;
43}
44 
45export interface SideDialogCloseProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
46  asChild?: boolean;
47  children?: React.ReactNode;
48}
49 
50export interface SideDialogBodyProps extends React.HTMLAttributes<HTMLDivElement> {
51  children: React.ReactNode;
52}
53 
54// Context for managing dialog state
55const SideDialogContext = React.createContext<{
56  open: boolean;
57  onOpenChange: (open: boolean) => void;
58  position: SideDialogPosition;
59  size: SideDialogSize;
60}>({
61  open: false,
62  onOpenChange: () => {},
63  position: 'bottom-right',
64  size: 'sm',
65});
66 
67export function SideDialog({
68  open: controlledOpen,
69  onOpenChange: controlledOnOpenChange,
70  position = 'bottom-right',
71  size = 'sm',
72  children,
73}: SideDialogProps) {
74  // Internal state for uncontrolled mode
75  const [internalOpen, setInternalOpen] = React.useState(false);
76 
77  // Use controlled props if provided, otherwise use internal state
78  const open = controlledOpen !== undefined ? controlledOpen : internalOpen;
79  const onOpenChange = controlledOnOpenChange !== undefined ? controlledOnOpenChange : setInternalOpen;
80 
81  const contextValue = React.useMemo(
82    () => ({
83      open,
84      onOpenChange,
85      position,
86      size,
87// … truncated