"use client"; import type { ReactNode } from "react"; import { type RemocnTheme, useRemocnTheme } from "@/lib/remocn-ui"; export type PopoverState = "opened" | "closed"; export type PopoverSide = "top" | "bottom" | "left" | "right"; export interface PopoverProps { state?: PopoverState; style?: PopoverStyle; title?: string; description?: string; children?: ReactNode; side?: PopoverSide; width?: number; theme?: Partial; className?: string; } export interface PopoverStyle { opacity: number; scale: number; translate: number; } export function popoverStyle(state: PopoverState): PopoverStyle { switch (state) { case "opened": return { opacity: 1, scale: 1, translate: 0 }; default: return { opacity: 0, scale: 0.97, translate: 6 }; } } function offsetFor( side: PopoverSide, translate: number, ): { x: number; y: number } { switch (side) { case "bottom": return { x: 0, y: -translate }; case "left": return { x: translate, y: 0 }; case "right": return { x: -translate, y: 0 }; default: return { x: 0, y: translate }; } } export function Popover({ state = "closed", style, title, description, children, side = "bottom", width = 288, theme: themeOverride, className, }: PopoverProps) { const theme = useRemocnTheme(themeOverride, "light"); const v = style ?? popoverStyle(state); const { x, y } = offsetFor(side, v.translate); const hasHeader = title !== undefined || description !== undefined; return (

{title !== undefined && (

{title}

)} {description !== undefined && (

{description}

)} {} {children !== undefined && (

{children}

)}

); }