@vertesia/ui 1.0.0-dev.20260305.083323Z → 1.0.0

package/src/core/components/shadcn/dropdown.tsx

@@ -0,0 +1,309 @@
+"use client"
+
+import * as React from "react"
+import { DropdownMenu as DropdownMenuPrimitive } from "radix-ui"
+
+import { cn } from "../libs/utils"
+
+import { CheckIcon, ChevronRightIcon } from "lucide-react"
+
+function DropdownMenu({
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Root>) {
+  return <DropdownMenuPrimitive.Root data-slot="dropdown-menu" {...props} />
+}
+
+function DropdownMenuPortal({
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Portal>) {
+  return (
+    <DropdownMenuPrimitive.Portal data-slot="dropdown-menu-portal" {...props} />
+  )
+}
+
+function DropdownMenuTrigger({
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Trigger>) {
+  return (
+    <DropdownMenuPrimitive.Trigger
+      data-slot="dropdown-menu-trigger"
+      {...props}
+    />
+  )
+}
+
+function DropdownMenuContent({
+  className,
+  align = "start",
+  sideOffset = 4,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Content>) {
+  return (
+    <DropdownMenuPrimitive.Portal>
+      <DropdownMenuPrimitive.Content
+        data-slot="dropdown-menu-content"
+        sideOffset={sideOffset}
+        align={align}
+        className={cn("data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-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 ring-foreground/10 bg-popover text-popover-foreground min-w-32 rounded-lg p-1 shadow-md ring-1 duration-100 z-50 max-h-(--radix-dropdown-menu-content-available-height) w-(--radix-dropdown-menu-trigger-width) origin-(--radix-dropdown-menu-content-transform-origin) overflow-x-hidden overflow-y-auto data-[state=closed]:overflow-hidden", className)}
+        {...props}
+      />
+    </DropdownMenuPrimitive.Portal>
+  )
+}
+
+function DropdownMenuGroup({
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Group>) {
+  return (
+    <DropdownMenuPrimitive.Group data-slot="dropdown-menu-group" {...props} />
+  )
+}
+
+function DropdownMenuItem({
+  className,
+  inset,
+  variant = "default",
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Item> & {
+  inset?: boolean
+  variant?: "default" | "destructive"
+}) {
+  return (
+    <DropdownMenuPrimitive.Item
+      data-slot="dropdown-menu-item"
+      data-inset={inset}
+      data-variant={variant}
+      className={cn(
+        "focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:text-destructive not-data-[variant=destructive]:focus:**:text-accent-foreground gap-1.5 rounded-md px-1.5 py-1 text-sm data-inset:pl-7 [&_svg:not([class*='size-'])]:size-4 group/dropdown-menu-item relative flex cursor-default items-center outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function DropdownMenuCheckboxItem({
+  className,
+  children,
+  checked,
+  inset,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.CheckboxItem> & {
+  inset?: boolean
+}) {
+  return (
+    <DropdownMenuPrimitive.CheckboxItem
+      data-slot="dropdown-menu-checkbox-item"
+      data-inset={inset}
+      className={cn(
+        "focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground gap-1.5 rounded-md py-1 pr-8 pl-1.5 text-sm data-inset:pl-7 [&_svg:not([class*='size-'])]:size-4 relative flex cursor-default items-center outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0",
+        className
+      )}
+      checked={checked}
+      {...props}
+    >
+      <span
+        className="absolute right-2 flex items-center justify-center pointer-events-none"
+        data-slot="dropdown-menu-checkbox-item-indicator"
+      >
+        <DropdownMenuPrimitive.ItemIndicator>
+          <CheckIcon
+          />
+        </DropdownMenuPrimitive.ItemIndicator>
+      </span>
+      {children}
+    </DropdownMenuPrimitive.CheckboxItem>
+  )
+}
+
+function DropdownMenuRadioGroup({
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.RadioGroup>) {
+  return (
+    <DropdownMenuPrimitive.RadioGroup
+      data-slot="dropdown-menu-radio-group"
+      {...props}
+    />
+  )
+}
+
+function DropdownMenuRadioItem({
+  className,
+  children,
+  inset,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.RadioItem> & {
+  inset?: boolean
+}) {
+  return (
+    <DropdownMenuPrimitive.RadioItem
+      data-slot="dropdown-menu-radio-item"
+      data-inset={inset}
+      className={cn(
+        "focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground gap-1.5 rounded-md py-1 pr-8 pl-1.5 text-sm data-inset:pl-7 [&_svg:not([class*='size-'])]:size-4 relative flex cursor-default items-center outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0",
+        className
+      )}
+      {...props}
+    >
+      <span
+        className="absolute right-2 flex items-center justify-center pointer-events-none"
+        data-slot="dropdown-menu-radio-item-indicator"
+      >
+        <DropdownMenuPrimitive.ItemIndicator>
+          <CheckIcon
+          />
+        </DropdownMenuPrimitive.ItemIndicator>
+      </span>
+      {children}
+    </DropdownMenuPrimitive.RadioItem>
+  )
+}
+
+function DropdownMenuLabel({
+  className,
+  inset,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Label> & {
+  inset?: boolean
+}) {
+  return (
+    <DropdownMenuPrimitive.Label
+      data-slot="dropdown-menu-label"
+      data-inset={inset}
+      className={cn("text-muted-foreground px-1.5 py-1 text-xs font-medium data-inset:pl-7", className)}
+      {...props}
+    />
+  )
+}
+
+function DropdownMenuSeparator({
+  className,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Separator>) {
+  return (
+    <DropdownMenuPrimitive.Separator
+      data-slot="dropdown-menu-separator"
+      className={cn("bg-border -mx-1 my-1 h-px", className)}
+      {...props}
+    />
+  )
+}
+
+function DropdownMenuShortcut({
+  className,
+  ...props
+}: React.ComponentProps<"span">) {
+  return (
+    <span
+      data-slot="dropdown-menu-shortcut"
+      className={cn("text-muted-foreground group-focus/dropdown-menu-item:text-accent-foreground ml-auto text-xs tracking-widest", className)}
+      {...props}
+    />
+  )
+}
+
+function DropdownMenuSub({
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Sub>) {
+  return <DropdownMenuPrimitive.Sub data-slot="dropdown-menu-sub" {...props} />
+}
+
+function DropdownMenuSubTrigger({
+  className,
+  inset,
+  children,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.SubTrigger> & {
+  inset?: boolean
+}) {
+  return (
+    <DropdownMenuPrimitive.SubTrigger
+      data-slot="dropdown-menu-sub-trigger"
+      data-inset={inset}
+      className={cn(
+        "focus:bg-accent focus:text-accent-foreground data-open:bg-accent data-open:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground gap-1.5 rounded-md px-1.5 py-1 text-sm data-inset:pl-7 [&_svg:not([class*='size-'])]:size-4 flex cursor-default items-center outline-hidden select-none [&_svg]:pointer-events-none [&_svg]:shrink-0",
+        className
+      )}
+      {...props}
+    >
+      {children}
+      <ChevronRightIcon className="cn-rtl-flip ml-auto" />
+    </DropdownMenuPrimitive.SubTrigger>
+  )
+}
+
+function DropdownMenuSubContent({
+  className,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.SubContent>) {
+  return (
+    <DropdownMenuPrimitive.SubContent
+      data-slot="dropdown-menu-sub-content"
+      className={cn("data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-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 ring-foreground/10 bg-popover text-popover-foreground min-w-[96px] rounded-lg p-1 shadow-lg ring-1 duration-100 z-50 origin-(--radix-dropdown-menu-content-transform-origin) overflow-hidden", className)}
+      {...props}
+    />
+  )
+}
+
+export {
+  DropdownMenu,
+  DropdownMenuPortal,
+  DropdownMenuTrigger,
+  DropdownMenuContent,
+  DropdownMenuGroup,
+  DropdownMenuLabel,
+  DropdownMenuItem,
+  DropdownMenuCheckboxItem,
+  DropdownMenuRadioGroup,
+  DropdownMenuRadioItem,
+  DropdownMenuSeparator,
+  DropdownMenuShortcut,
+  DropdownMenuSub,
+  DropdownMenuSubTrigger,
+  DropdownMenuSubContent,
+}
+
+// High-level convenience components
+
+const alignMap = { left: 'start', center: 'center', right: 'end' } as const;
+
+interface DropdownProps {
+  trigger: React.ReactNode;
+  children: React.ReactNode | React.ReactNode[];
+  align?: 'left' | 'center' | 'right';
+}
+export function Dropdown({ trigger, children, align = 'right' }: DropdownProps) {
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger asChild>
+        <span className="-m-1.5 flex items-center p-1.5">
+          {trigger}
+        </span>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent align={alignMap[align]} className="w-max">
+        {children}
+      </DropdownMenuContent>
+    </DropdownMenu>
+  );
+}
+
+interface MenuItemProps {
+  children: React.ReactNode | React.ReactNode[];
+  onClick?: (ev: React.MouseEvent) => void;
+  href?: string;
+  closeOnClick?: boolean;
+  isDisabled?: boolean;
+}
+export function MenuItem({ children, href, onClick, closeOnClick = true, isDisabled = false }: MenuItemProps) {
+  return (
+    <DropdownMenuItem
+      className="hover:bg-muted data-[disabled]:pointer-events-none data-[disabled]:opacity-50 text-nowrap"
+      disabled={isDisabled}
+      onSelect={(e) => { if (!closeOnClick) e.preventDefault(); }}
+      onClick={(e) => { e.stopPropagation(); onClick?.(e); }}
+      asChild={!!href}
+    >
+      {href ? <a href={href}>{children}</a> : <>{children}</>}
+    </DropdownMenuItem>
+  );
+}

package/src/core/components/shadcn/filters/comboBox/DateCombobox.tsx

@@ -4,6 +4,7 @@ import ReactCalendar from "react-calendar";
 import { Button } from "../../button";
 import { Popover, PopoverContent, PopoverTrigger } from "../../popover";
 import { calendarStyles } from "../filter-styles";
+import { useUITranslation } from '../../../../../i18n/index.js';
 
 export const DateCombobox = ({
     filterValues,
@@ -16,6 +17,7 @@ export const DateCombobox = ({
 }) => {
     const [open, setOpen] = useState(false);
     const [localDateRange, setLocalDateRange] = useState<[Date | null, Date | null]>([null, null]);
+    const { t } = useUITranslation();
 
     // For single date
     const selectedDate = filterValues[0] ? new Date(filterValues[0]) : undefined;
@@ -54,7 +56,7 @@ export const DateCombobox = ({
                     </span>
                 );
             } else {
-                return <span className="text-muted-foreground">Select range</span>;
+                return <span className="text-muted-foreground">{t('filter.selectRange')}</span>;
             }
         } else {
             return selectedDate ? dayjs(selectedDate).format("MMMM DD, YYYY") : "Pick a date";

package/src/core/components/shadcn/filters/comboBox/SelectCombobox.tsx

@@ -5,6 +5,7 @@ import { Popover, PopoverContent, PopoverTrigger } from "../../popover";
 import { AnimateChangeInHeight } from "../animateChangeInHeight";
 import { FilterGroupOption, FilterOption } from "../types";
 import { DynamicLabel } from "../DynamicLabel";
+import { useUITranslation } from '../../../../../i18n/index.js';
 
 export const SelectionCombobox = ({
     filterType,
@@ -22,6 +23,7 @@ export const SelectionCombobox = ({
     const [open, setOpen] = useState(false);
     const [commandInput, setCommandInput] = useState("");
     const commandInputRef = useRef<HTMLInputElement>(null);
+    const { t } = useUITranslation();
     const nonSelectedFilterValues = options?.filter(
         (option) => !filterValues.some(filter => filter.value === option.value)
     );
@@ -71,7 +73,7 @@ export const SelectionCombobox = ({
                             ref={commandInputRef}
                         />
                         <CommandList>
-                            <CommandEmpty>No results found.</CommandEmpty>
+                            <CommandEmpty>{t('filter.noResultsFound')}</CommandEmpty>
                             <CommandGroup>
                                 {filterValues.map((value) => {
                                     return (

package/src/core/components/shadcn/filters/comboBox/StringListCombobox.tsx

@@ -1,7 +1,7 @@
 import { useState } from "react";
+import { InputList } from "../../../InputList";
 import { Button } from "../../button";
 import { Popover, PopoverContent, PopoverTrigger } from "../../popover";
-import { InputList } from "../../../index";
 
 export const StringListCombobox = ({
     filterType,

package/src/core/components/shadcn/filters/filter/StringListFilter.tsx

@@ -1,5 +1,5 @@
 import { Dispatch, SetStateAction, useState } from "react";
-import { InputList } from "../../../index";
+import { InputList } from "../../../InputList";
 import { Button } from "../../button";
 import { Filter, FilterGroup } from "../types";
 

package/src/core/components/shadcn/filters/filter/dateFilter.tsx

@@ -4,6 +4,7 @@ import Calendar from "react-calendar";
 import { Button } from "../../button";
 import { Filter, FilterGroup } from "../types";
 import { calendarStyles } from "../filter-styles";
+import { useUITranslation } from '../../../../../i18n/index.js';
 
 type ValuePiece = Date | null;
 type Value = ValuePiece | [ValuePiece, ValuePiece];
@@ -27,6 +28,7 @@ export default function DateFilter({
   handleClose,
   filterGroups,
 }: DateFilterProps) {
+  const { t } = useUITranslation();
   const [dateRange, setDateRange] = useState<[Date | null, Date | null]>([null, null]);
   const [localDateRange, setLocalDateRange] = useState<[Date | null, Date | null]>([null, null]);
 
@@ -129,16 +131,16 @@ export default function DateFilter({
       if (effectiveDateRange[0] && effectiveDateRange[1]) {
         return (
           <span className="flex items-center gap-2">
-            <span className="text-xs text-muted">From:</span>
+            <span className="text-xs text-muted">{t('filter.from')}</span>
             <span className="text-xs font-medium">{dayjs(effectiveDateRange[0]).format("MMMM DD, YYYY")}</span>
-            <span className="text-xs text-muted">To:</span>
+            <span className="text-xs text-muted">{t('filter.to')}</span>
             <span className="text-xs font-medium">{dayjs(effectiveDateRange[1]).format("MMMM DD, YYYY")}</span>
           </span>
         );
       } else if (effectiveDateRange[0]) {
         return (
           <span className="flex items-center gap-2">
-            <span className="text-xs text-muted">From:</span>
+            <span className="text-xs text-muted">{t('filter.from')}</span>
             <span className="text-xs font-medium">{dayjs(effectiveDateRange[0]).format("MMMM DD, YYYY")}</span>
             <span className="text-xs text-muted">→ Select end date</span>
           </span>

package/src/core/components/shadcn/filters/filterBar.tsx

@@ -12,6 +12,7 @@ import TextFilter from "./filter/TextFilter";
 import DateFilter from "./filter/dateFilter";
 import SelectFilter from "./filter/SelectFilter";
 import StringListFilter from "./filter/StringListFilter";
+import { useUITranslation } from '../../../../i18n/index.js';
 
 const FilterContext = React.createContext<{
   filters: Filter[];
@@ -163,6 +164,7 @@ const FilterProvider = ({ filters, setFilters, filterGroups, children }: FilterP
 
 const FilterBtn = ({ className }: { className?: string }) => {
   const { filters, setFilters, filterGroups } = React.useContext(FilterContext);
+  const { t } = useUITranslation();
   const [open, setOpen] = React.useState(false);
   const [selectedView, setSelectedView] = React.useState<string | null>(null);
   const [commandInput, setCommandInput] = React.useState("");
@@ -198,7 +200,7 @@ const FilterBtn = ({ className }: { className?: string }) => {
     );
 
     if (options.length === 0) {
-      return <CommandEmpty>No available filters</CommandEmpty>;
+      return <CommandEmpty>{t('filter.noAvailableFilters')}</CommandEmpty>;
     }
 
     return options.map((group: FilterGroup, index: number) => (
@@ -299,7 +301,7 @@ const FilterBtn = ({ className }: { className?: string }) => {
           )}
         >
           <ListFilter className="size-4 shrink-0 transition-all text-muted" />
-          {"Filter"}
+          {t('filter.filter')}
         </Button>
       </PopoverTrigger>
       <PopoverContent className="w-[300px] p-0" align="start" sideOffset={4}>
@@ -307,7 +309,7 @@ const FilterBtn = ({ className }: { className?: string }) => {
           {
             filterGroups.find(group => group.name === selectedView)?.type === "select" && (
               <CommandInput
-                placeholder={selectedView ? `Filter by ${selectedView}` : "Filter..."}
+                placeholder={selectedView ? t('filter.filterBy', { view: selectedView }) : t('filter.filterPlaceholder')}
                 className="h-9 ring-0"
                 value={commandInput}
                 onValueChange={(value) => {
@@ -319,7 +321,7 @@ const FilterBtn = ({ className }: { className?: string }) => {
             )
           }
           <CommandList>
-            <CommandEmpty>No matching filters</CommandEmpty>
+            <CommandEmpty>{t('filter.noMatchingFilters')}</CommandEmpty>
             <CommandGroup>
               {!selectedView ? getAvailableFilterGroups() : renderFilterOptions()}
             </CommandGroup>
@@ -342,6 +344,7 @@ const FilterBar = ({ className }: { className?: string }) => {
 
 const FilterClear = ({ className }: { className?: string }) => {
   const { filters, setFilters } = React.useContext(FilterContext);
+  const { t } = useUITranslation();
 
   const hasActiveFilters = filters.filter((filter) => filter.value?.length > 0).length > 0;
 
@@ -356,7 +359,7 @@ const FilterClear = ({ className }: { className?: string }) => {
       className={cn("transition group", className)}
       onClick={() => setFilters([])}
     >
-      Clear All
+      {t('filter.clearAll')}
     </Button>
   );
 };

package/src/core/components/shadcn/index.ts

@@ -22,4 +22,8 @@ export * from './text';
 export * from './resizeable';
 export * from './textarea';
 export * from "./MessageBox"
-export * from "./Panel"
+export * from "./Panel"
+export * from "./switch"
+export * from "./radioGroup"
+export * from "./collaspible"
+export * from "./dropdown"

package/src/core/components/shadcn/modal/ConfirmModal.tsx

@@ -1,5 +1,6 @@
 import { TriangleAlert } from "lucide-react"
 import React, { useRef } from "react"
+import { useUITranslation } from "@vertesia/ui/i18n"
 import { Modal, ModalTitle, ModalFooter } from "./dialog"
 import { Button } from "../button"
 
@@ -9,9 +10,11 @@ interface ConfirmModalProps {
     onConfirm: () => void
     onCancel: () => void
     isOpen: boolean
+    isLoading?: boolean
 }
 
-export function ConfirmModal({ title, content, onConfirm, onCancel, isOpen }: ConfirmModalProps) {
+export function ConfirmModal({ title, content, onConfirm, onCancel, isOpen, isLoading }: ConfirmModalProps) {
+    const { t } = useUITranslation()
     const cancelButtonRef = useRef(null)
 
     return (
@@ -35,15 +38,16 @@ export function ConfirmModal({ title, content, onConfirm, onCancel, isOpen }: Co
                 <Button
                     variant="destructive"
                     onClick={onConfirm}
+                    isLoading={isLoading}
                 >
-                    Confirm
+                    {t('modal.confirm')}
                 </Button>
                 <Button
                     variant="outline"
                     onClick={onCancel}
                     ref={cancelButtonRef}
                 >
-                    Cancel
+                    {t('modal.cancel')}
                 </Button>
             </ModalFooter>
         </Modal>

package/src/core/components/shadcn/modal/DeleteModal.tsx

@@ -1,4 +1,5 @@
 import { ReactNode } from "react";
+import { useUITranslation } from "@vertesia/ui/i18n";
 import { ConfirmModal } from "./ConfirmModal.js";
 import { useToast } from "../../toast/index.js";
 
@@ -10,6 +11,7 @@ interface DeleteModalProps {
     deleteApi: (id: string) => Promise<any>;
 }
 export function DeleteModal({ idToDelete, title, content, setIdToDelete, deleteApi }: DeleteModalProps) {
+    const { t } = useUITranslation();
     const toast = useToast();
 
     const doDelete = async () => {
@@ -20,13 +22,13 @@ export function DeleteModal({ idToDelete, title, content, setIdToDelete, deleteA
         return deleteApi(idToDelete)
             .then(() => {
                 toast({
-                    title: 'Delete succeeded',
+                    title: t('modal.delete.succeeded'),
                     status: 'success'
                 });
             }).catch((err: any) => {
                 toast({
-                    title: 'Failed to delete',
-                    description: err.message ?? 'An error occurred while deleting the object',
+                    title: t('modal.delete.failed'),
+                    description: err.message ?? t('modal.delete.error'),
                     status: 'error'
                 });
             }).finally(() => {

package/src/core/components/shadcn/popover.tsx

@@ -1,10 +1,9 @@
-import * as React from "react";
 import * as PopoverPrimitive from "@radix-ui/react-popover";
+import * as React from "react";
 
-import { cn } from "../libs/utils"
 import { JSX } from "react";
-import { useIsInModal } from "./modal/dialog";
 import { usePortalContainer } from "../../hooks/PortalContainerProvider";
+import { cn } from "../libs/utils";
 
 export interface PopoverContextValue {
   open: boolean;
@@ -19,11 +18,11 @@ interface PopoverProps {
   onOpenChange?: (open: boolean) => void;
   hover?: boolean;
   click?: boolean;
+  modal?: boolean;
   children?: React.ReactNode;
 }
-const Popover = ({ hover = false, click = false, children, _open, onOpenChange }: PopoverProps): JSX.Element => {
+const Popover = ({ hover = false, click = false, modal, children, _open, onOpenChange }: PopoverProps): JSX.Element => {
   const [open, setOpen] = React.useState(_open || false);
-  const insideModal = useIsInModal();
 
   const handleOpenChange = (open: boolean) => {
     setOpen(open);
@@ -34,7 +33,7 @@ const Popover = ({ hover = false, click = false, children, _open, onOpenChange }
 
   return (
     <PopoverContext.Provider value={{ open, setOpen, hover, click }}>
-      <PopoverPrimitive.Root open={open} onOpenChange={handleOpenChange} modal={insideModal}>
+      <PopoverPrimitive.Root open={open} onOpenChange={handleOpenChange} modal={modal}>
         {children}
       </PopoverPrimitive.Root>
     </PopoverContext.Provider>
@@ -114,4 +113,10 @@ PopoverContent.displayName = PopoverPrimitive.Content.displayName;
 const PopoverClose = PopoverPrimitive.Close;
 PopoverClose.displayName = PopoverPrimitive.Close.displayName;
 
-export { Popover, PopoverTrigger, PopoverContent, PopoverAnchor, PopoverClose };
+export function usePopoverContext() {
+  const ctx = React.useContext(PopoverContext);
+  if (!ctx) throw new Error('usePopoverContext must be used within a Popover');
+  return { ...ctx, close: () => ctx.setOpen(false) };
+}
+
+export { Popover, PopoverAnchor, PopoverClose, PopoverContent, PopoverTrigger };