@gunjo/ui 0.0.1-alpha.0

package/src/components/molecules/List.tsx

@@ -0,0 +1,120 @@
+import * as React from "react"
+import { cn } from "../../lib/utils"
+import { Check, Circle, Dot } from "lucide-react"
+import { listVariantKeys, type ListVariantKey } from "./generated/variant-keys"
+import { listDefaultVariantKey } from "./generated/default-variant-keys"
+
+type ListMarkerKey = ListVariantKey | "number" | "none"
+
+const listVariantKeySet = new Set<ListVariantKey>(listVariantKeys)
+
+const markerIcons: Record<ListVariantKey, React.ReactNode> = {
+    check: <Check className="h-4 w-4 flex-shrink-0 text-primary" />,
+    circle: <Circle className="h-3 w-3 flex-shrink-0 text-muted-foreground" fill="currentColor" />,
+    dot: <Dot className="h-4 w-4 flex-shrink-0 text-muted-foreground" />,
+}
+
+const listLayoutClasses: Record<ListVariantKey, string> = {
+    dot: "flex flex-col items-center w-fit gap-2",
+    check: "flex flex-col items-center w-fit gap-2",
+    circle: "flex flex-col items-center w-fit gap-2",
+}
+
+function isListVariantKey(value: ListMarkerKey | undefined): value is ListVariantKey {
+    return !!value && listVariantKeySet.has(value as ListVariantKey)
+}
+
+export interface ListProps extends React.HTMLAttributes<HTMLUListElement | HTMLOListElement> {
+    variant?: "unordered" | "ordered" | "none"
+    marker?: ListMarkerKey
+    spacing?: "default" | "tight" | "loose"
+}
+
+const List = React.forwardRef<HTMLElement, ListProps>(
+    ({ className, variant = "unordered", marker, spacing = "default", children, ...props }, ref) => {
+        const Comp = variant === "ordered" ? "ol" : "ul"
+
+        // Determine default marker based on variant if not specified
+        const effectiveMarker =
+            marker ||
+            (variant === "ordered"
+                ? "number"
+                : variant === "unordered"
+                    ? listDefaultVariantKey
+                    : "none");
+
+        return (
+            <Comp
+                ref={ref as any}
+                className={cn(
+                    "text-muted-foreground",
+                    isListVariantKey(effectiveMarker) && listLayoutClasses[effectiveMarker],
+                    spacing === "default" && "space-y-2",
+                    spacing === "tight" && "space-y-1",
+                    spacing === "loose" && "space-y-4",
+                    className
+                )}
+                {...props}
+            >
+                {React.Children.map(children, (child) => {
+                    if (React.isValidElement(child) && child.type === ListItem) {
+                        const item = child as React.ReactElement<ListItemProps>;
+                        return React.cloneElement(item, {
+                            marker: item.props.marker || effectiveMarker,
+                        })
+                    }
+                    return child
+                })}
+            </Comp>
+        )
+    }
+)
+List.displayName = "List"
+
+export interface ListItemProps extends React.LiHTMLAttributes<HTMLLIElement> {
+    marker?: ListMarkerKey
+    icon?: React.ReactNode
+}
+
+const ListItem = React.forwardRef<HTMLLIElement, ListItemProps>(
+    ({ className, children, marker, icon, ...props }, ref) => {
+
+        let markerEl = null;
+        if (icon) {
+            markerEl = <span className="flex-shrink-0 text-muted-foreground">{icon}</span>
+        } else if (isListVariantKey(marker)) {
+            markerEl = markerIcons[marker]
+        } else {
+            switch (marker) {
+                case "number":
+                    // For ordered lists, we typically rely on list-style-type, 
+                    // but for custom styling we might want a span. 
+                    // Let's use standard list-decimal class for 'number' if no icon
+                    break;
+                default:
+                    break;
+            }
+        }
+
+        const isStandardOrdered = marker === "number" && !icon;
+
+        return (
+            <li
+                ref={ref}
+                className={cn(
+                    "flex items-center gap-2",
+                    isStandardOrdered && "list-decimal list-inside ml-4 list-item", // Restore standard list behavior
+                    !isStandardOrdered && "list-none",
+                    className
+                )}
+                {...props}
+            >
+                {!isStandardOrdered && markerEl}
+                <span className="flex-1 text-sm text-muted-foreground">{children}</span>
+            </li>
+        )
+    }
+)
+ListItem.displayName = "ListItem"
+
+export { List, ListItem }

package/src/components/molecules/Menubar.tsx

@@ -0,0 +1,231 @@
+"use client"
+
+import * as React from "react"
+import * as MenubarPrimitive from "@radix-ui/react-menubar"
+import { Check, ChevronRight, Circle } from "lucide-react"
+
+import { cn } from "../../lib/utils"
+
+const Menubar = React.forwardRef<
+    React.ElementRef<typeof MenubarPrimitive.Root>,
+    React.ComponentPropsWithoutRef<typeof MenubarPrimitive.Root>
+>(({ className, ...props }, ref) => (
+    <MenubarPrimitive.Root
+        ref={ref}
+        className={cn(
+            "flex flex-col flex-row h-10 items-center gap-1 space-x-1 rounded-md border bg-background p-1",
+            className
+        )}
+        {...props}
+    />
+))
+Menubar.displayName = MenubarPrimitive.Root.displayName
+
+const MenubarMenu = MenubarPrimitive.Menu
+
+const MenubarTrigger = React.forwardRef<
+    React.ElementRef<typeof MenubarPrimitive.Trigger>,
+    React.ComponentPropsWithoutRef<typeof MenubarPrimitive.Trigger>
+>(({ className, ...props }, ref) => (
+    <MenubarPrimitive.Trigger
+        ref={ref}
+        className={cn(
+            "flex cursor-default select-none items-center rounded-sm px-3 py-1.5 text-sm font-medium outline-none focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground",
+            className
+        )}
+        {...props}
+    />
+))
+MenubarTrigger.displayName = MenubarPrimitive.Trigger.displayName
+
+const MenubarSubTrigger = React.forwardRef<
+    React.ElementRef<typeof MenubarPrimitive.SubTrigger>,
+    React.ComponentPropsWithoutRef<typeof MenubarPrimitive.SubTrigger> & {
+        inset?: boolean
+    }
+>(({ className, inset, children, ...props }, ref) => (
+    <MenubarPrimitive.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",
+            inset && "pl-8",
+            className
+        )}
+        {...props}
+    >
+        {children}
+        <ChevronRight className="ml-auto h-4 w-4" />
+    </MenubarPrimitive.SubTrigger>
+))
+MenubarSubTrigger.displayName = MenubarPrimitive.SubTrigger.displayName
+
+const MenubarSubContent = React.forwardRef<
+    React.ElementRef<typeof MenubarPrimitive.SubContent>,
+    React.ComponentPropsWithoutRef<typeof MenubarPrimitive.SubContent>
+>(({ className, ...props }, ref) => (
+    <MenubarPrimitive.SubContent
+        ref={ref}
+        className={cn(
+            "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground 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}
+    />
+))
+MenubarSubContent.displayName = MenubarPrimitive.SubContent.displayName
+
+const MenubarContent = React.forwardRef<
+    React.ElementRef<typeof MenubarPrimitive.Content>,
+    React.ComponentPropsWithoutRef<typeof MenubarPrimitive.Content>
+>(({ className, align = "start", alignOffset = -4, sideOffset = 8, ...props }, ref) => (
+    <MenubarPrimitive.Portal>
+        <MenubarPrimitive.Content
+            ref={ref}
+            align={align}
+            alignOffset={alignOffset}
+            sideOffset={sideOffset}
+            className={cn(
+                "z-50 min-w-[12rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md data-[state=open]:animate-in 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}
+        />
+    </MenubarPrimitive.Portal>
+))
+MenubarContent.displayName = MenubarPrimitive.Content.displayName
+
+const MenubarItem = React.forwardRef<
+    React.ElementRef<typeof MenubarPrimitive.Item>,
+    React.ComponentPropsWithoutRef<typeof MenubarPrimitive.Item> & {
+        inset?: boolean
+    }
+>(({ className, inset, ...props }, ref) => (
+    <MenubarPrimitive.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}
+    />
+))
+MenubarItem.displayName = MenubarPrimitive.Item.displayName
+
+const MenubarCheckboxItem = React.forwardRef<
+    React.ElementRef<typeof MenubarPrimitive.CheckboxItem>,
+    React.ComponentPropsWithoutRef<typeof MenubarPrimitive.CheckboxItem>
+>(({ className, children, checked, ...props }, ref) => (
+    <MenubarPrimitive.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",
+            className
+        )}
+        checked={checked}
+        {...props}
+    >
+        <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+            <MenubarPrimitive.ItemIndicator>
+                <Check className="h-4 w-4" />
+            </MenubarPrimitive.ItemIndicator>
+        </span>
+        {children}
+    </MenubarPrimitive.CheckboxItem>
+))
+MenubarCheckboxItem.displayName = MenubarPrimitive.CheckboxItem.displayName
+
+const MenubarRadioItem = React.forwardRef<
+    React.ElementRef<typeof MenubarPrimitive.RadioItem>,
+    React.ComponentPropsWithoutRef<typeof MenubarPrimitive.RadioItem>
+>(({ className, children, ...props }, ref) => (
+    <MenubarPrimitive.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",
+            className
+        )}
+        {...props}
+    >
+        <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+            <MenubarPrimitive.ItemIndicator>
+                <Circle className="h-2 w-2 fill-current" />
+            </MenubarPrimitive.ItemIndicator>
+        </span>
+        {children}
+    </MenubarPrimitive.RadioItem>
+))
+MenubarRadioItem.displayName = MenubarPrimitive.RadioItem.displayName
+
+const MenubarLabel = React.forwardRef<
+    React.ElementRef<typeof MenubarPrimitive.Label>,
+    React.ComponentPropsWithoutRef<typeof MenubarPrimitive.Label> & {
+        inset?: boolean
+    }
+>(({ className, inset, ...props }, ref) => (
+    <MenubarPrimitive.Label
+        ref={ref}
+        className={cn(
+            "px-2 py-1.5 text-sm font-semibold",
+            inset && "pl-8",
+            className
+        )}
+        {...props}
+    />
+))
+MenubarLabel.displayName = MenubarPrimitive.Label.displayName
+
+const MenubarSeparator = React.forwardRef<
+    React.ElementRef<typeof MenubarPrimitive.Separator>,
+    React.ComponentPropsWithoutRef<typeof MenubarPrimitive.Separator>
+>(({ className, ...props }, ref) => (
+    <MenubarPrimitive.Separator
+        ref={ref}
+        className={cn("-mx-1 my-1 h-px bg-muted", className)}
+        {...props}
+    />
+))
+MenubarSeparator.displayName = MenubarPrimitive.Separator.displayName
+
+const MenubarShortcut = ({
+    className,
+    ...props
+}: React.HTMLAttributes<HTMLSpanElement>) => {
+    return (
+        <span
+            className={cn(
+                "ml-auto text-xs tracking-widest text-muted-foreground",
+                className
+            )}
+            {...props}
+        />
+    )
+}
+MenubarShortcut.displayName = "MenubarShortcut"
+
+export {
+    Menubar,
+    MenubarMenu,
+    MenubarTrigger,
+    MenubarContent,
+    MenubarItem,
+    MenubarSeparator,
+    MenubarLabel,
+    MenubarCheckboxItem,
+    MenubarRadioGroup,
+    MenubarRadioItem,
+    MenubarPortal,
+    MenubarSubContent,
+    MenubarSubTrigger,
+    MenubarGroup,
+    MenubarSub,
+    MenubarShortcut,
+}
+
+const MenubarGroup = MenubarPrimitive.Group
+
+const MenubarPortal = MenubarPrimitive.Portal
+
+const MenubarSub = MenubarPrimitive.Sub
+
+const MenubarRadioGroup = MenubarPrimitive.RadioGroup

package/src/components/molecules/Modal.tsx

@@ -0,0 +1,66 @@
+"use client"
+import React, { useEffect, useRef } from 'react';
+import { X } from 'lucide-react';
+import { cn } from '../../lib/utils';
+
+export interface ModalProps {
+    isOpen: boolean;
+    onClose: () => void;
+    title: string;
+    children: React.ReactNode;
+    footer?: React.ReactNode;
+}
+
+export function Modal({ isOpen, onClose, title, children, footer }: ModalProps) {
+    const modalRef = useRef<HTMLDivElement>(null);
+
+    useEffect(() => {
+        const handleEscape = (e: KeyboardEvent) => {
+            if (e.key === 'Escape') onClose();
+        };
+
+        if (isOpen) {
+            document.addEventListener('keydown', handleEscape);
+            document.body.style.overflow = 'hidden';
+        }
+
+        return () => {
+            document.removeEventListener('keydown', handleEscape);
+            document.body.style.overflow = 'unset';
+        };
+    }, [isOpen, onClose]);
+
+    if (!isOpen) return null;
+
+    const content = (
+        <div data-prevent-deselect="true" className="fixed inset-0 z-[9999] flex items-center justify-center bg-overlay/60 backdrop-blur-sm animate-in fade-in duration-200" onClick={(e) => e.stopPropagation()}>
+            <div
+                ref={modalRef}
+                onClick={(e) => e.stopPropagation()}
+                className="flex flex-col w-[448px] bg-card border border-border rounded-lg shadow-xl w-full max-w-md mx-4 overflow-hidden animate-in zoom-in-95 duration-200"
+            >
+                <div className="flex items-center justify-between px-4 py-3 border-b border-border">
+                    <h3 className="font-semibold text-foreground">{title}</h3>
+                    <button onClick={onClose} className="text-muted-foreground hover:text-foreground transition-colors">
+                        <X size={18} />
+                    </button>
+                </div>
+                <div className="p-4">
+                    {children}
+                </div>
+                {footer && (
+                    <div className="px-4 py-3 bg-muted/50 border-t border-border flex justify-end gap-2">
+                        {footer}
+                    </div>
+                )}
+            </div>
+        </div>
+    );
+
+    // Use Portal if available
+    if (typeof document !== 'undefined') {
+        const { createPortal } = require('react-dom');
+        return createPortal(content, document.body);
+    }
+    return content;
+}

package/src/components/molecules/NotificationCenter.tsx

@@ -0,0 +1,118 @@
+"use client"
+
+import * as React from "react"
+import { Bell, Check } from "lucide-react"
+import { Button } from "../atoms/Button"
+import { Popover, PopoverContent, PopoverTrigger } from "./Popover"
+import { ScrollArea } from "./ScrollArea"
+import { cn } from "../../lib/utils"
+
+export interface Notification {
+    id: string
+    title: string
+    description: string
+    timestamp: string
+    read: boolean
+}
+
+export interface NotificationCenterProps {
+    notifications: Notification[]
+    onMarkAsRead?: (id: string) => void
+    onLinkClick?: (id: string) => void
+    onClearAll?: () => void
+}
+
+const NotificationCenter = ({
+    notifications,
+    onMarkAsRead,
+    onLinkClick,
+    onClearAll,
+}: NotificationCenterProps) => {
+    const unreadCount = notifications.filter((n) => !n.read).length
+    const [isOpen, setIsOpen] = React.useState(false)
+
+    return (
+        <Popover open={isOpen} onOpenChange={setIsOpen}>
+            <PopoverTrigger asChild>
+                <Button variant="ghost" size="icon" className="relative text-muted-foreground hover:text-foreground">
+                    <Bell className="h-5 w-5" />
+                    {unreadCount > 0 && (
+                        <span className="absolute top-2 right-2 h-2 w-2 rounded-full bg-destructive ring-2 ring-background" />
+                    )}
+                    <span className="sr-only">Toggle notifications</span>
+                </Button>
+            </PopoverTrigger>
+            <PopoverContent align="end" className="w-[320px] w-80 p-0" sideOffset={8}>
+                <div className="flex items-center justify-between border-b px-4 py-3 bg-muted/50 backdrop-blur">
+                    <h4 className="font-semibold text-sm">Notifications</h4>
+                    {unreadCount > 0 && onClearAll && (
+                        <Button
+                            variant="ghost"
+                            size="sm"
+                            className="h-auto px-2 text-xs text-muted-foreground hover:text-foreground"
+                            onClick={onClearAll}
+                        >
+                            Clear all
+                        </Button>
+                    )}
+                </div>
+                <ScrollArea className="h-[300px]">
+                    {notifications.length === 0 ? (
+                        <div className="flex h-full flex-col items-center justify-center p-4 text-center text-muted-foreground">
+                            <Bell className="h-8 w-8 mb-2 opacity-20" />
+                            <p className="text-sm">No notifications</p>
+                        </div>
+                    ) : (
+                        <div className="grid">
+                            {notifications.map((notification) => (
+                                <div
+                                    key={notification.id}
+                                    className={cn(
+                                        "flex flex-col gap-1 border-b p-4 text-sm transition-colors hover:bg-muted/50",
+                                        !notification.read && "bg-primary/10"
+                                    )}
+                                    onClick={() => onLinkClick?.(notification.id)}
+                                >
+                                    <div className="flex items-start justify-between gap-2">
+                                        <p className="font-medium leading-none text-foreground">
+                                            {notification.title}
+                                        </p>
+                                        {!notification.read && onMarkAsRead && (
+                                            <Button
+                                                variant="ghost"
+                                                size="icon"
+                                                className="h-6 w-6 -mr-2 -mt-1 text-muted-foreground hover:text-primary"
+                                                onClick={(e) => {
+                                                    e.stopPropagation();
+                                                    onMarkAsRead(notification.id);
+                                                }}
+                                                title="Mark as read"
+                                            >
+                                                <span className="sr-only">Mark as read</span>
+                                                <div className="h-1.5 w-1.5 rounded-full bg-primary" />
+                                            </Button>
+                                        )}
+                                    </div>
+                                    <p className="text-muted-foreground line-clamp-2">
+                                        {notification.description}
+                                    </p>
+                                    <p className="mt-1 text-xs text-muted-foreground">
+                                        {notification.timestamp}
+                                    </p>
+                                </div>
+                            ))}
+                        </div>
+                    )}
+                </ScrollArea>
+                <div className="border-t p-2">
+                    <Button variant="ghost" className="h-8 w-full text-xs text-muted-foreground hover:text-foreground">
+                        View all notification history
+                    </Button>
+                </div>
+            </PopoverContent>
+        </Popover>
+    )
+}
+NotificationCenter.displayName = "NotificationCenter"
+
+export { NotificationCenter }

package/src/components/molecules/Pagination.tsx

@@ -0,0 +1,118 @@
+import * as React from "react"
+import { ChevronLeft, ChevronRight, MoreHorizontal } from "lucide-react"
+import { cn } from "../../lib/utils"
+import { ButtonProps } from "../atoms/Button"
+import { buttonVariants } from "../atoms/ButtonVariants"
+
+
+const Pagination = ({ className, ...props }: React.ComponentProps<"nav">) => (
+    <nav
+        role="navigation"
+        aria-label="pagination"
+        className={cn("mx-auto flex flex-col w-full justify-center", className)}
+        {...props}
+    />
+)
+Pagination.displayName = "Pagination"
+
+const PaginationContent = React.forwardRef<
+    HTMLUListElement,
+    React.ComponentProps<"ul">
+>(({ className, ...props }, ref) => (
+    <ul
+        ref={ref}
+        className={cn("flex items-center gap-1", className)}
+        {...props}
+    />
+))
+PaginationContent.displayName = "PaginationContent"
+
+const PaginationItem = React.forwardRef<
+    HTMLLIElement,
+    React.ComponentProps<"li">
+>(({ className, ...props }, ref) => (
+    <li ref={ref} className={cn("", className)} {...props} />
+))
+PaginationItem.displayName = "PaginationItem"
+
+type PaginationLinkProps = {
+    isActive?: boolean
+} & Pick<ButtonProps, "size"> &
+    React.ComponentProps<"a">
+
+const PaginationLink = ({
+    className,
+    isActive,
+    size = "icon",
+    ...props
+}: PaginationLinkProps) => (
+    <a
+        aria-current={isActive ? "page" : undefined}
+        className={cn(
+            buttonVariants({
+                variant: isActive ? "outline" : "ghost",
+                size,
+            }),
+            className
+        )}
+        {...props}
+    />
+)
+PaginationLink.displayName = "PaginationLink"
+
+const PaginationPrevious = ({
+    className,
+    ...props
+}: React.ComponentProps<typeof PaginationLink>) => (
+    <PaginationLink
+        aria-label="Go to previous page"
+        size="default"
+        className={cn("gap-1 pl-2.5", className)}
+        {...props}
+    >
+        <ChevronLeft className="h-4 w-4" />
+        <span>Previous</span>
+    </PaginationLink>
+)
+PaginationPrevious.displayName = "PaginationPrevious"
+
+const PaginationNext = ({
+    className,
+    ...props
+}: React.ComponentProps<typeof PaginationLink>) => (
+    <PaginationLink
+        aria-label="Go to next page"
+        size="default"
+        className={cn("gap-1 pr-2.5", className)}
+        {...props}
+    >
+        <span>Next</span>
+        <ChevronRight className="h-4 w-4" />
+    </PaginationLink>
+)
+PaginationNext.displayName = "PaginationNext"
+
+const PaginationEllipsis = ({
+    className,
+    ...props
+}: React.ComponentProps<"span">) => (
+    <span
+        aria-hidden
+        className={cn("flex h-9 w-9 items-center justify-center", className)}
+        {...props}
+    >
+        <MoreHorizontal className="h-4 w-4" />
+        <span className="sr-only">More pages</span>
+    </span>
+)
+PaginationEllipsis.displayName = "PaginationEllipsis"
+
+export {
+    Pagination,
+    PaginationContent,
+    PaginationEllipsis,
+    PaginationItem,
+    PaginationLink,
+    PaginationNext,
+    PaginationPrevious,
+}

package/src/components/molecules/Popover.tsx

@@ -0,0 +1,31 @@
+"use client"
+
+import * as React from "react"
+import * as PopoverPrimitive from "@radix-ui/react-popover"
+
+import { cn } from "../../lib/utils"
+
+const Popover = PopoverPrimitive.Root
+
+const PopoverTrigger = PopoverPrimitive.Trigger
+
+const PopoverContent = React.forwardRef<
+    React.ElementRef<typeof PopoverPrimitive.Content>,
+    React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Content>
+>(({ className, align = "center", sideOffset = 4, ...props }, ref) => (
+    <PopoverPrimitive.Portal>
+        <PopoverPrimitive.Content
+            ref={ref}
+            align={align}
+            sideOffset={sideOffset}
+            className={cn(
+                "z-50 flex flex-col w-72 w-[288px] rounded-md rounded-lg border bg-popover p-4 text-popover-foreground shadow-md outline-none 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}
+        />
+    </PopoverPrimitive.Portal>
+))
+PopoverContent.displayName = PopoverPrimitive.Content.displayName
+
+export { Popover, PopoverTrigger, PopoverContent }