@gunjo/ui 0.0.1-alpha.0 → 0.0.1-alpha.2

package/src/components/overlay/AlertDialog.tsx

@@ -0,0 +1,145 @@
+"use client"
+
+import * as React from "react"
+import * as AlertDialogPrimitive from "@radix-ui/react-alert-dialog"
+
+import { cn } from "../../lib/utils"
+import { buttonVariants } from "../inputs/ButtonVariants"
+
+const AlertDialog = AlertDialogPrimitive.Root
+
+const AlertDialogTrigger = AlertDialogPrimitive.Trigger
+
+const AlertDialogPortal = AlertDialogPrimitive.Portal
+
+const AlertDialogOverlay = React.forwardRef<
+    React.ElementRef<typeof AlertDialogPrimitive.Overlay>,
+    React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Overlay>
+>(({ className, ...props }, ref) => (
+    <AlertDialogPrimitive.Overlay
+        ref={ref}
+        className={cn(
+            "fixed inset-0 z-50 bg-overlay/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
+            className
+        )}
+        {...props}
+    />
+))
+AlertDialogOverlay.displayName = AlertDialogPrimitive.Overlay.displayName
+
+const AlertDialogContent = React.forwardRef<
+    React.ElementRef<typeof AlertDialogPrimitive.Content>,
+    React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Content> & {
+        portalContainer?: HTMLElement | null
+        overlayClassName?: string
+    }
+>(({ className, portalContainer, overlayClassName, ...props }, ref) => (
+    <AlertDialogPortal container={portalContainer ?? undefined}>
+        <AlertDialogOverlay className={cn(portalContainer && "absolute", overlayClassName)} />
+        <AlertDialogPrimitive.Content
+            ref={ref}
+            className={cn(
+                "fixed left-[50%] top-[50%] z-50 grid w-[calc(100%-2rem)] max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 sm:rounded-lg",
+                portalContainer && "absolute",
+                className
+            )}
+            {...props}
+        />
+    </AlertDialogPortal>
+))
+AlertDialogContent.displayName = AlertDialogPrimitive.Content.displayName
+
+const AlertDialogHeader = ({
+    className,
+    ...props
+}: React.HTMLAttributes<HTMLDivElement>) => (
+    <div
+        className={cn(
+            "flex flex-col space-y-2 text-center sm:text-left",
+            className
+        )}
+        {...props}
+    />
+)
+AlertDialogHeader.displayName = "AlertDialogHeader"
+
+const AlertDialogFooter = ({
+    className,
+    ...props
+}: React.HTMLAttributes<HTMLDivElement>) => (
+    <div
+        className={cn(
+            "flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",
+            className
+        )}
+        {...props}
+    />
+)
+AlertDialogFooter.displayName = "AlertDialogFooter"
+
+const AlertDialogTitle = React.forwardRef<
+    React.ElementRef<typeof AlertDialogPrimitive.Title>,
+    React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Title>
+>(({ className, ...props }, ref) => (
+    <AlertDialogPrimitive.Title
+        ref={ref}
+        className={cn("text-lg font-semibold", className)}
+        {...props}
+    />
+))
+AlertDialogTitle.displayName = AlertDialogPrimitive.Title.displayName
+
+const AlertDialogDescription = React.forwardRef<
+    React.ElementRef<typeof AlertDialogPrimitive.Description>,
+    React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Description>
+>(({ className, ...props }, ref) => (
+    <AlertDialogPrimitive.Description
+        ref={ref}
+        className={cn("text-sm text-muted-foreground", className)}
+        {...props}
+    />
+))
+AlertDialogDescription.displayName =
+    AlertDialogPrimitive.Description.displayName
+
+const AlertDialogAction = React.forwardRef<
+    React.ElementRef<typeof AlertDialogPrimitive.Action>,
+    React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Action>
+>(({ className, ...props }, ref) => (
+    <AlertDialogPrimitive.Action
+        ref={ref}
+        className={cn(buttonVariants(), className)}
+        {...props}
+    />
+))
+AlertDialogAction.displayName = AlertDialogPrimitive.Action.displayName
+
+const AlertDialogCancel = React.forwardRef<
+    React.ElementRef<typeof AlertDialogPrimitive.Cancel>,
+    React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Cancel>
+>(({ className, ...props }, ref) => (
+    <AlertDialogPrimitive.Cancel
+        ref={ref}
+        className={cn(
+            buttonVariants({ variant: "outline" }),
+            "mt-2 sm:mt-0",
+            className
+        )}
+        {...props}
+    />
+))
+AlertDialogCancel.displayName = AlertDialogPrimitive.Cancel.displayName
+
+export {
+    AlertDialog,
+    AlertDialogPortal,
+    AlertDialogOverlay,
+    AlertDialogTrigger,
+    AlertDialogContent,
+    AlertDialogHeader,
+    AlertDialogFooter,
+    AlertDialogTitle,
+    AlertDialogDescription,
+    AlertDialogAction,
+    AlertDialogCancel,
+}

package/src/components/overlay/ChatPanel.tsx

@@ -0,0 +1,180 @@
+"use client";
+
+import * as React from "react";
+import { IconX as X } from "@tabler/icons-react";
+import { cn } from "../../lib/utils";
+import { ChatMessage, type ChatMessageActionKey, type ChatMessageProps } from "../display/ChatMessage";
+import { EmptyState } from "../display/EmptyState";
+import { ChatInput, type ChatInputLabels, type ChatInputProps } from "../inputs/ChatInput";
+import { TooltipButton } from "../inputs/TooltipButton";
+import { chatPanelDefaultVariantKey } from "./generated/default-variant-keys";
+import type { ChatPanelVariantKey } from "./generated/variant-keys";
+
+const chatPanelVariantClassNames: Record<ChatPanelVariantKey, string> = {
+    compact: "h-[420px]",
+    default: "h-[560px]",
+};
+
+export interface ChatPanelMessage extends Omit<ChatMessageProps, "className"> {
+    id: string;
+}
+
+export interface ChatPanelLabels {
+    close?: string;
+    empty?: string;
+}
+
+export interface ChatPanelProps extends Omit<React.HTMLAttributes<HTMLElement>, "title"> {
+    variant?: ChatPanelVariantKey;
+    title?: React.ReactNode;
+    description?: React.ReactNode;
+    messages: ChatPanelMessage[];
+    onSend: ChatInputProps["onSend"];
+    onStop?: ChatInputProps["onStop"];
+    isProcessing?: boolean;
+    placeholder?: string;
+    enableAttachments?: boolean;
+    emptyState?: React.ReactNode;
+    welcome?: React.ReactNode;
+    onMessageAction?: (
+        message: ChatPanelMessage,
+        actionKey: ChatMessageActionKey,
+        event: React.MouseEvent<HTMLButtonElement>
+    ) => void;
+    onClose?: () => void;
+    labels?: ChatPanelLabels;
+    inputLabels?: ChatInputLabels;
+}
+
+export function ChatPanel({
+    variant = chatPanelDefaultVariantKey,
+    title = "Assistant",
+    description,
+    messages,
+    onSend,
+    onStop,
+    isProcessing = false,
+    placeholder,
+    enableAttachments = true,
+    emptyState,
+    welcome,
+    onMessageAction,
+    onClose,
+    labels,
+    inputLabels,
+    className,
+    ...props
+}: ChatPanelProps) {
+    const messageScrollRef = React.useRef<HTMLDivElement | null>(null);
+    const resolvedLabels = {
+        close: labels?.close ?? "閉じる",
+        empty: labels?.empty ?? "まだメッセージはありません。",
+    };
+
+    React.useEffect(() => {
+        if (messages.length === 0 && !isProcessing) return;
+
+        const frame = window.requestAnimationFrame(() => {
+            const reduceMotion = window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+            const scrollElement = messageScrollRef.current;
+
+            if (!scrollElement) return;
+
+            scrollElement.scrollTo({
+                top: scrollElement.scrollHeight,
+                behavior: reduceMotion ? "auto" : "smooth",
+            });
+        });
+
+        return () => window.cancelAnimationFrame(frame);
+    }, [isProcessing, messages]);
+
+    return (
+        <section
+            className={cn(
+                "flex w-full max-w-2xl flex-col overflow-hidden rounded-lg border bg-background p-0 shadow-xl",
+                chatPanelVariantClassNames[variant],
+                className
+            )}
+            {...props}
+        >
+            <header className="flex items-start gap-3 border-b bg-muted/50 px-4 py-3">
+                <div className="min-w-0 flex-1">
+                    <h3 className="truncate text-sm font-semibold">{title}</h3>
+                    {description ? (
+                        <p className="mt-0.5 text-xs leading-relaxed text-muted-foreground">
+                            {description}
+                        </p>
+                    ) : null}
+                </div>
+                {onClose ? (
+                    <TooltipButton
+                        type="button"
+                        tooltip={resolvedLabels.close}
+                        aria-label={resolvedLabels.close}
+                        variant="ghost"
+                        size="icon"
+                        className="-mr-2 -mt-1 h-8 w-8 shrink-0"
+                        onClick={onClose}
+                    >
+                        <X className="h-4 w-4" />
+                    </TooltipButton>
+                ) : null}
+            </header>
+            <div
+                ref={messageScrollRef}
+                className={cn(
+                    "flex-1 bg-muted/30 p-4",
+                    messages.length > 0 || isProcessing ? "overflow-y-auto" : "overflow-hidden"
+                )}
+            >
+                {messages.length > 0 ? (
+                    <div className="space-y-3">
+                        {messages.map((message) => {
+                            const { onAction, ...messageProps } = message;
+
+                            return (
+                                <ChatMessage
+                                    key={message.id}
+                                    {...messageProps}
+                                    onAction={(actionKey, event) => {
+                                        onAction?.(actionKey, event);
+                                        if (!event.defaultPrevented) {
+                                            onMessageAction?.(message, actionKey, event);
+                                        }
+                                    }}
+                                />
+                            );
+                        })}
+                        {isProcessing ? (
+                            <ChatMessage role="assistant" content="" isTyping />
+                        ) : null}
+                    </div>
+                ) : welcome ? (
+                    <div className="flex min-h-full items-end justify-center">
+                        {welcome}
+                    </div>
+                ) : emptyState ? (
+                    <div className="flex min-h-full items-center justify-center">
+                        {emptyState}
+                    </div>
+                ) : (
+                    <EmptyState
+                        className="min-h-full border-dashed bg-background/70"
+                        title={resolvedLabels.empty}
+                    />
+                )}
+            </div>
+            <div className="bg-muted/30 p-3 sm:p-4">
+                <ChatInput
+                    onSend={onSend}
+                    onStop={onStop}
+                    isProcessing={isProcessing}
+                    placeholder={placeholder}
+                    enableAttachments={enableAttachments}
+                    labels={inputLabels}
+                />
+            </div>
+        </section>
+    );
+}

package/src/components/{molecules → overlay}/ContextMenu.tsx

@@ -2,9 +2,10 @@
 
 import * as React from "react"
 import * as ContextMenuPrimitive from "@radix-ui/react-context-menu"
-import { Check, ChevronRight, Circle } from "lucide-react"
+import { IconCheck as Check, IconChevronRight as ChevronRight, IconCircle as Circle } from "@tabler/icons-react";
 
 import { cn } from "../../lib/utils"
+import { Tooltip, TooltipContent, TooltipTrigger } from "./Tooltip"
 
 const ContextMenu = ContextMenuPrimitive.Root
 
@@ -27,7 +28,7 @@ const ContextMenuSubTrigger = React.forwardRef<
     <ContextMenuPrimitive.SubTrigger
         ref={ref}
         className={cn(
-            "flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground",
+            "flex w-full cursor-default select-none items-center gap-2 rounded-sm px-2 py-1.5 text-left text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground",
             inset && "pl-8",
             className
         )}
@@ -41,28 +42,34 @@ ContextMenuSubTrigger.displayName = ContextMenuPrimitive.SubTrigger.displayName
 
 const ContextMenuSubContent = React.forwardRef<
     React.ElementRef<typeof ContextMenuPrimitive.SubContent>,
-    React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.SubContent>
->(({ className, ...props }, ref) => (
-    <ContextMenuPrimitive.SubContent
-        ref={ref}
-        className={cn(
-            "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
-            className
-        )}
-        {...props}
-    />
+    React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.SubContent> & {
+        portalContainer?: HTMLElement | null
+    }
+>(({ className, portalContainer, ...props }, ref) => (
+    <ContextMenuPrimitive.Portal container={portalContainer ?? undefined}>
+        <ContextMenuPrimitive.SubContent
+            ref={ref}
+            className={cn(
+                "z-50 flex min-w-[8rem] flex-col items-stretch gap-0.5 overflow-hidden rounded-md border bg-popover p-1 text-left text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+                className
+            )}
+            {...props}
+        />
+    </ContextMenuPrimitive.Portal>
 ))
 ContextMenuSubContent.displayName = ContextMenuPrimitive.SubContent.displayName
 
 const ContextMenuContent = React.forwardRef<
     React.ElementRef<typeof ContextMenuPrimitive.Content>,
-    React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Content>
->(({ className, ...props }, ref) => (
-    <ContextMenuPrimitive.Portal>
+    React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Content> & {
+        portalContainer?: HTMLElement | null
+    }
+>(({ className, portalContainer, ...props }, ref) => (
+    <ContextMenuPrimitive.Portal container={portalContainer ?? undefined}>
         <ContextMenuPrimitive.Content
             ref={ref}
             className={cn(
-                "z-50 flex flex-col items-center w-[192px] min-w-[8rem] gap-0.5 overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md animate-in fade-in-80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+                "z-50 flex w-[192px] min-w-[8rem] flex-col items-stretch gap-0.5 overflow-hidden rounded-md border bg-popover p-1 text-left text-popover-foreground shadow-md animate-in fade-in-80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
                 className
             )}
             {...props}
@@ -75,18 +82,47 @@ const ContextMenuItem = React.forwardRef<
     React.ElementRef<typeof ContextMenuPrimitive.Item>,
     React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Item> & {
         inset?: boolean
+        disabledReason?: React.ReactNode
+        disabledReasonLabel?: string
     }
->(({ className, inset, ...props }, ref) => (
-    <ContextMenuPrimitive.Item
-        ref={ref}
-        className={cn(
-            "relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
-            inset && "pl-8",
-            className
-        )}
-        {...props}
-    />
-))
+>(({ className, inset, disabledReason, disabledReasonLabel, disabled, onSelect, ...props }, ref) => {
+    const item = (
+        <ContextMenuPrimitive.Item
+            ref={ref}
+            disabled={disabled}
+            onSelect={(event) => {
+                if (disabled) {
+                    event.preventDefault()
+                    return
+                }
+                onSelect?.(event)
+            }}
+            className={cn(
+                "relative flex w-full cursor-default select-none items-center gap-2 rounded-sm px-2 py-1.5 text-left text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:cursor-not-allowed data-[disabled]:opacity-50",
+                inset && "pl-8",
+                className
+            )}
+            {...props}
+        />
+    )
+
+    if (!disabled || !disabledReason) return item
+
+    return (
+        <Tooltip>
+            <TooltipTrigger asChild>
+                <span
+                    className="block w-full"
+                    tabIndex={0}
+                    aria-label={disabledReasonLabel ?? (typeof disabledReason === "string" ? disabledReason : undefined)}
+                >
+                    {item}
+                </span>
+            </TooltipTrigger>
+            <TooltipContent className="max-w-64 text-left">{disabledReason}</TooltipContent>
+        </Tooltip>
+    )
+})
 ContextMenuItem.displayName = ContextMenuPrimitive.Item.displayName
 
 const ContextMenuCheckboxItem = React.forwardRef<
@@ -96,7 +132,7 @@ const ContextMenuCheckboxItem = React.forwardRef<
     <ContextMenuPrimitive.CheckboxItem
         ref={ref}
         className={cn(
-            "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+            "relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-left text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
             className
         )}
         checked={checked}
@@ -120,7 +156,7 @@ const ContextMenuRadioItem = React.forwardRef<
     <ContextMenuPrimitive.RadioItem
         ref={ref}
         className={cn(
-            "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+            "relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-left text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
             className
         )}
         {...props}

package/src/components/{molecules → overlay}/Dialog.tsx

@@ -2,7 +2,7 @@
 
 import * as React from "react"
 import * as DialogPrimitive from "@radix-ui/react-dialog"
-import { X } from "lucide-react"
+import { IconX as X } from "@tabler/icons-react";
 
 import { cn } from "../../lib/utils"
 
@@ -31,23 +31,31 @@ DialogOverlay.displayName = DialogPrimitive.Overlay.displayName
 
 const DialogContent = React.forwardRef<
     React.ElementRef<typeof DialogPrimitive.Content>,
-    React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content>
->(({ className, children, ...props }, ref) => (
-    <DialogPortal>
-        <DialogOverlay />
+    React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content> & {
+        portalContainer?: HTMLElement | null
+        overlayClassName?: string
+        showCloseButton?: boolean
+        closeLabel?: string
+    }
+>(({ className, children, portalContainer, overlayClassName, showCloseButton = true, closeLabel = "Close", ...props }, ref) => (
+    <DialogPortal container={portalContainer ?? undefined}>
+        <DialogOverlay className={cn(portalContainer && "absolute", overlayClassName)} />
         <DialogPrimitive.Content
             ref={ref}
             className={cn(
-                "fixed left-[50%] top-[50%] z-50 grid w-[512px] w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg",
+                "fixed left-1/2 top-1/2 z-50 grid w-[512px] w-full max-w-lg -translate-x-1/2 -translate-y-1/2 gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 sm:rounded-lg",
+                portalContainer && "absolute w-[calc(100%-2rem)] max-w-[calc(100%-2rem)]",
                 className
             )}
             {...props}
         >
             {children}
-            <DialogPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground">
-                <X className="h-4 w-4" />
-                <span className="sr-only">Close</span>
-            </DialogPrimitive.Close>
+            {showCloseButton ? (
+                <DialogPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground">
+                    <X className="h-4 w-4" />
+                    <span className="sr-only">{closeLabel}</span>
+                </DialogPrimitive.Close>
+            ) : null}
         </DialogPrimitive.Content>
     </DialogPortal>
 ))
@@ -59,7 +67,7 @@ const DialogHeader = ({
 }: React.HTMLAttributes<HTMLDivElement>) => (
     <div
         className={cn(
-            "flex flex-col space-y-1.5 text-center sm:text-left",
+            "flex flex-col space-y-1.5 pr-4 text-left",
             className
         )}
         {...props}
@@ -73,7 +81,7 @@ const DialogFooter = ({
 }: React.HTMLAttributes<HTMLDivElement>) => (
     <div
         className={cn(
-            "flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",
+            "flex flex-row flex-wrap justify-end gap-2 sm:space-x-2",
             className
         )}
         {...props}
@@ -88,7 +96,7 @@ const DialogTitle = React.forwardRef<
     <DialogPrimitive.Title
         ref={ref}
         className={cn(
-            "text-lg font-semibold leading-none tracking-tight",
+            "text-lg font-semibold leading-tight tracking-tight",
             className
         )}
         {...props}

package/src/components/overlay/Drawer.tsx

@@ -0,0 +1,131 @@
+"use client"
+
+import * as React from "react"
+import { Drawer as DrawerPrimitive } from "vaul"
+
+import { cn } from "../../lib/utils"
+
+const Drawer = ({
+    shouldScaleBackground = true,
+    ...props
+}: React.ComponentProps<typeof DrawerPrimitive.Root>) => (
+    <DrawerPrimitive.Root
+        shouldScaleBackground={shouldScaleBackground}
+        {...props}
+    />
+)
+Drawer.displayName = "Drawer"
+
+const DrawerTrigger = DrawerPrimitive.Trigger
+const DrawerPortal = DrawerPrimitive.Portal
+const DrawerClose = DrawerPrimitive.Close
+
+const DrawerOverlay = React.forwardRef<
+    React.ElementRef<typeof DrawerPrimitive.Overlay>,
+    React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Overlay>
+>(({ className, ...props }, ref) => (
+    <DrawerPrimitive.Overlay
+        ref={ref}
+        className={cn("fixed inset-0 z-50 bg-overlay/80", className)}
+        {...props}
+    />
+))
+DrawerOverlay.displayName = DrawerPrimitive.Overlay.displayName
+
+type DrawerSide = "bottom" | "right" | "left" | "top"
+
+const drawerContentSideClasses: Record<DrawerSide, string> = {
+    bottom: "inset-x-0 bottom-0 mt-24 h-auto rounded-t-[10px] border",
+    right: "inset-y-0 right-0 h-full w-80 max-w-[calc(100%_-_2rem)] rounded-l-[10px] border-l",
+    left: "inset-y-0 left-0 h-full w-80 max-w-[calc(100%_-_2rem)] rounded-r-[10px] border-r",
+    top: "inset-x-0 top-0 mb-24 h-auto rounded-b-[10px] border",
+}
+
+const DrawerContent = React.forwardRef<
+    React.ElementRef<typeof DrawerPrimitive.Content>,
+    React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Content> & {
+        side?: DrawerSide
+        portalContainer?: HTMLElement | null
+        overlayClassName?: string
+    }
+>(({ className, children, side = "bottom", portalContainer, overlayClassName, ...props }, ref) => (
+    <DrawerPortal container={portalContainer ?? undefined}>
+        <DrawerOverlay className={cn(portalContainer && "absolute", overlayClassName)} />
+        <DrawerPrimitive.Content
+            ref={ref}
+            className={cn(
+                "fixed z-50 flex flex-col bg-background",
+                portalContainer && "absolute",
+                drawerContentSideClasses[side],
+                className
+            )}
+            {...props}
+        >
+            {side === "bottom" ? <div className="mx-auto mt-4 h-2 w-[100px] rounded-full bg-muted" /> : null}
+            {children}
+        </DrawerPrimitive.Content>
+    </DrawerPortal>
+))
+DrawerContent.displayName = "DrawerContent"
+
+const DrawerHeader = ({
+    className,
+    ...props
+}: React.HTMLAttributes<HTMLDivElement>) => (
+    <div
+        className={cn("grid gap-1.5 p-4 text-left", className)}
+        {...props}
+    />
+)
+DrawerHeader.displayName = "DrawerHeader"
+
+const DrawerFooter = ({
+    className,
+    ...props
+}: React.HTMLAttributes<HTMLDivElement>) => (
+    <div
+        className={cn("mt-auto flex flex-row flex-wrap justify-end gap-2 p-4", className)}
+        {...props}
+    />
+)
+DrawerFooter.displayName = "DrawerFooter"
+
+const DrawerTitle = React.forwardRef<
+    React.ElementRef<typeof DrawerPrimitive.Title>,
+    React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Title>
+>(({ className, ...props }, ref) => (
+    <DrawerPrimitive.Title
+        ref={ref}
+        className={cn(
+            "text-lg font-semibold leading-none tracking-tight",
+            className
+        )}
+        {...props}
+    />
+))
+DrawerTitle.displayName = DrawerPrimitive.Title.displayName
+
+const DrawerDescription = React.forwardRef<
+    React.ElementRef<typeof DrawerPrimitive.Description>,
+    React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Description>
+>(({ className, ...props }, ref) => (
+    <DrawerPrimitive.Description
+        ref={ref}
+        className={cn("text-sm text-muted-foreground", className)}
+        {...props}
+    />
+))
+DrawerDescription.displayName = DrawerPrimitive.Description.displayName
+
+export {
+    Drawer,
+    DrawerPortal,
+    DrawerOverlay,
+    DrawerTrigger,
+    DrawerClose,
+    DrawerContent,
+    DrawerHeader,
+    DrawerFooter,
+    DrawerTitle,
+    DrawerDescription,
+}