@ansh-ui/react 0.2.0

package/dist/overlay.d.cts

@@ -0,0 +1,330 @@
+import * as react from 'react';
+import { ReactNode } from 'react';
+import { P as Placement } from './position-DVScKcaa.cjs';
+
+/**
+ * A command palette.
+ *
+ * The interaction is easy; the accessibility is where these usually go wrong. This one implements
+ * the combobox pattern properly:
+ *
+ * - Focus stays in the input the whole time. Arrow keys move a *virtual* selection, announced via
+ *   `aria-activedescendant`, rather than moving DOM focus — so the user can keep typing.
+ * - The list is `role="listbox"` with `role="option"` children and correct `aria-selected`.
+ * - Focus is restored to whatever was focused before opening, so keyboard users aren't dumped at
+ *   the top of the document on close.
+ * - Focus is trapped while open, so Tab can't escape to the page behind the scrim.
+ *
+ * Filtering is a subsequence match rather than a substring one: typing `nds` should find
+ * "**N**ew **D**ata**s**ource", which is what anyone who has used a palette expects.
+ */
+interface CommandItem {
+    id: string;
+    label: string;
+    /** Optional grouping heading. Items with the same group render together. */
+    group?: string;
+    /** Leading icon. */
+    icon?: ReactNode;
+    /** Shortcut hint shown on the right, e.g. `'⌘K'`. Display only. */
+    shortcut?: string;
+    /** Extra text matched against the query but not displayed. */
+    keywords?: string;
+    onSelect?: () => void;
+}
+interface CommandPaletteProps {
+    items: readonly CommandItem[];
+    open: boolean;
+    onOpenChange: (open: boolean) => void;
+    placeholder?: string;
+    emptyMessage?: string;
+}
+declare function CommandPalette({ items, open, onOpenChange, placeholder, emptyMessage, }: CommandPaletteProps): react.JSX.Element | null;
+/**
+ * Bind a keyboard shortcut that toggles state — `⌘K` by default.
+ *
+ * ```tsx
+ * const [open, setOpen] = useState(false)
+ * useCommandShortcut(() => setOpen((v) => !v))
+ * ```
+ */
+declare function useCommandShortcut(toggle: () => void, key?: string): void;
+
+interface PopoverProps {
+    open?: boolean;
+    defaultOpen?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    placement?: Placement;
+    /** Gap from the trigger, in px. Default `8`. */
+    offset?: number;
+    /** Trap focus and block interaction behind. Default `false` — most popovers are non-modal. */
+    modal?: boolean;
+    children: ReactNode;
+}
+declare function Popover({ open, defaultOpen, onOpenChange, placement, offset, modal, children, }: PopoverProps): react.JSX.Element;
+interface PopoverTriggerProps extends React.HTMLAttributes<HTMLElement> {
+    /** Render into the child element rather than emitting a `<button>`. */
+    asChild?: boolean;
+    children: ReactNode;
+}
+declare function PopoverTrigger({ asChild, children, ...rest }: PopoverTriggerProps): react.JSX.Element;
+interface PopoverContentProps extends React.HTMLAttributes<HTMLDivElement> {
+    /** Draw an arrow pointing at the trigger. Default `false`. */
+    arrow?: boolean;
+    /** Match the trigger's width — for a popover acting as a dropdown panel. */
+    matchWidth?: boolean;
+    /** Accessible name. Required unless the content contains its own heading. */
+    label?: string;
+    children: ReactNode;
+}
+declare function PopoverContent({ arrow, matchWidth, label, className, style, children, ...rest }: PopoverContentProps): react.JSX.Element | null;
+interface HoverCardProps {
+    /** The card's contents. */
+    content: ReactNode;
+    /** Delay before opening, in ms. Default `500`. */
+    openDelay?: number;
+    /** Delay before closing, in ms. Default `200`. */
+    closeDelay?: number;
+    placement?: Placement;
+    className?: string;
+    children: ReactNode;
+}
+/**
+ * A rich preview shown on hover — a user card on an @mention, a link preview.
+ *
+ * Two delays, not one. The open delay stops cards firing as the pointer sweeps across a paragraph
+ * of links. The close delay is what lets the pointer travel from the trigger to the card without it
+ * vanishing en route, which is the failure that makes hover cards feel broken.
+ *
+ * Hover-only content is invisible to keyboard and touch users, so this also opens on focus. It is
+ * strictly for *supplementary* information — anything essential belongs in a click-opened popover.
+ */
+declare function HoverCard({ content, openDelay, closeDelay, placement, className, children, }: HoverCardProps): react.JSX.Element;
+
+interface TooltipProviderProps {
+    /** Delay before the first tooltip in a group opens, in ms. Default `600`. */
+    delay?: number;
+    children: ReactNode;
+}
+/**
+ * Share a delay across a set of tooltips.
+ *
+ * Once one is open, moving to a neighbour shows its tooltip immediately. Without this, scanning a
+ * toolbar means waiting out the delay on every single button — the behaviour every desktop OS gets
+ * right and most web implementations miss.
+ */
+declare function TooltipProvider({ delay, children }: TooltipProviderProps): react.JSX.Element;
+interface TooltipProps {
+    /** The tooltip text. Keep it short — it is read as one description. */
+    content: ReactNode;
+    placement?: Placement;
+    /** Override the group delay, in ms. */
+    delay?: number;
+    /** Draw an arrow. Default `true`. */
+    arrow?: boolean;
+    disabled?: boolean;
+    className?: string;
+    children: ReactNode;
+}
+declare function Tooltip({ content, placement, delay, arrow, disabled, className, children, }: TooltipProps): react.JSX.Element;
+
+type DialogSize = 'sm' | 'md' | 'lg' | 'xl' | 'full';
+interface DialogProps {
+    open: boolean;
+    onOpenChange: (open: boolean) => void;
+    /** The dialog's accessible name. Required — a dialog announced as just "dialog" is useless. */
+    title: ReactNode;
+    /** Supporting text, wired to `aria-describedby`. */
+    description?: ReactNode;
+    size?: DialogSize;
+    /** Actions row, pinned below the scrollable body. */
+    footer?: ReactNode;
+    /** Show the ✕ button. Default `true`. */
+    showClose?: boolean;
+    /** Allow closing via scrim click and Escape. Default `true`. */
+    dismissable?: boolean;
+    /** Element to focus on open. Defaults to the first tabbable one. */
+    initialFocus?: React.RefObject<HTMLElement | null>;
+    className?: string;
+    children?: ReactNode;
+}
+/**
+ * A modal dialog.
+ *
+ * Not `<dialog showModal>`: the native element's top-layer behaviour is genuinely better, but its
+ * backdrop cannot be animated consistently, `::backdrop` inherits nothing, and closing behaviour
+ * differs enough across browsers to need working around anyway. The pieces the native element gives
+ * for free — focus trap, scroll lock, inert background, focus restore — are all here explicitly.
+ *
+ * `title` is a required prop rather than an optional slot. Every accessibility audit of a component
+ * library turns up unnamed dialogs, and the reliable fix is to make the name impossible to omit.
+ */
+declare function Dialog({ open, onOpenChange, title, description, size, footer, showClose, dismissable, initialFocus, className, children, }: DialogProps): react.JSX.Element | null;
+interface AlertDialogProps {
+    open: boolean;
+    onOpenChange: (open: boolean) => void;
+    title: ReactNode;
+    description: ReactNode;
+    /** Confirm button text. Default `'Confirm'`. */
+    confirmLabel?: string;
+    cancelLabel?: string;
+    /** Style the confirm action as destructive. */
+    destructive?: boolean;
+    onConfirm: () => void | Promise<void>;
+    onCancel?: () => void;
+    /** Disable the buttons while an async confirm runs. */
+    busy?: boolean;
+    className?: string;
+}
+/**
+ * A confirmation dialog.
+ *
+ * `role="alertdialog"` and `aria-describedby` on the message, which makes a screen reader read the
+ * consequence immediately on open rather than waiting for the user to navigate to it. That is the
+ * entire difference from a regular dialog, and it matters precisely because these appear before
+ * irreversible actions.
+ *
+ * It is deliberately **not** dismissable by clicking the scrim: an accidental click outside should
+ * not silently cancel a decision the user was asked to make. Escape still works, because trapping
+ * someone in a dialog is worse.
+ *
+ * Focus starts on **Cancel**, not Confirm. A keyboard user who hits Enter reflexively should not
+ * delete their account.
+ */
+declare function AlertDialog({ open, onOpenChange, title, description, confirmLabel, cancelLabel, destructive, onConfirm, onCancel, busy, className, }: AlertDialogProps): react.JSX.Element | null;
+/** Layout helper for a dialog's action row. Right-aligned, reversed on narrow screens. */
+declare function DialogFooter({ children, className }: {
+    children: ReactNode;
+    className?: string;
+}): react.JSX.Element;
+
+type DrawerSide = 'left' | 'right' | 'top' | 'bottom';
+interface DrawerProps {
+    open: boolean;
+    onOpenChange: (open: boolean) => void;
+    /** Which edge it slides from. Default `'right'`. */
+    side?: DrawerSide;
+    title: ReactNode;
+    description?: ReactNode;
+    /** Width for left/right, height for top/bottom. Default `'22rem'`. */
+    size?: string;
+    footer?: ReactNode;
+    showClose?: boolean;
+    /** Block interaction behind and lock scroll. Default `true`. */
+    modal?: boolean;
+    dismissable?: boolean;
+    className?: string;
+    children?: ReactNode;
+}
+/**
+ * A panel that slides in from an edge.
+ *
+ * Same accessibility contract as `Dialog` — it is a dialog, just positioned differently. The reason
+ * it exists separately is that the *content* pattern differs: drawers hold navigation, filters and
+ * detail views that stay open while the user works, so they support a non-modal mode where the page
+ * behind stays usable.
+ *
+ * On a phone a bottom drawer is the right shape for what would be a dialog on a desktop; that's a
+ * layout decision for the consumer, which is why `side` is a plain prop rather than a breakpoint
+ * rule baked in here.
+ */
+declare function Drawer({ open, onOpenChange, side, title, description, size, footer, showClose, modal, dismissable, className, children, }: DrawerProps): react.JSX.Element | null;
+
+/**
+ * Menus — dropdown and context.
+ *
+ * Data-driven (`items={[…]}`) rather than compound. Menus are almost always built from a
+ * configuration array anyway — permissions filter entries, a selection decides what's enabled — and
+ * expressing that as JSX children means `{canDelete && <MenuItem …/>}` scattered through the tree,
+ * which breaks keyboard navigation indices in ways that are painful to debug.
+ *
+ * Follows the ARIA menu pattern, where **DOM focus moves to the item** (unlike a listbox, which
+ * keeps focus on the container). That's what makes Right/Left arrow submenu traversal work the way
+ * it does in every desktop application.
+ */
+interface MenuItemBase {
+    id?: string;
+    disabled?: boolean;
+}
+interface MenuAction extends MenuItemBase {
+    type?: 'item';
+    label: ReactNode;
+    icon?: ReactNode;
+    /** Display-only shortcut hint, e.g. `'⌘S'`. */
+    shortcut?: string;
+    /** Style as destructive, and mark it in the accessible name. */
+    danger?: boolean;
+    onSelect?: () => void;
+}
+interface MenuCheckbox extends MenuItemBase {
+    type: 'checkbox';
+    label: ReactNode;
+    checked: boolean;
+    onChange: (checked: boolean) => void;
+    shortcut?: string;
+}
+interface MenuRadioGroup {
+    type: 'radio';
+    value: string;
+    onChange: (value: string) => void;
+    options: ReadonlyArray<{
+        value: string;
+        label: ReactNode;
+        disabled?: boolean;
+    }>;
+}
+interface MenuSubmenu extends MenuItemBase {
+    type: 'submenu';
+    label: ReactNode;
+    icon?: ReactNode;
+    items: readonly MenuEntry[];
+}
+type MenuEntry = MenuAction | MenuCheckbox | MenuRadioGroup | MenuSubmenu | {
+    type: 'separator';
+} | {
+    type: 'label';
+    label: ReactNode;
+};
+interface MenuProps {
+    items: readonly MenuEntry[];
+    placement?: Placement;
+    /** Accessible name for the menu itself. */
+    label?: string;
+    className?: string;
+    /** The control that opens the menu. */
+    children: ReactNode;
+    open?: boolean;
+    onOpenChange?: (open: boolean) => void;
+}
+/**
+ * A dropdown menu.
+ *
+ * ```tsx
+ * <DropdownMenu items={[
+ *   { label: 'Edit', shortcut: '⌘E', onSelect: edit },
+ *   { type: 'separator' },
+ *   { label: 'Delete', danger: true, onSelect: remove },
+ * ]}>
+ *   <IconButton label="Actions" />
+ * </DropdownMenu>
+ * ```
+ */
+declare function DropdownMenu({ items, placement, label, className, children, open: controlledOpen, onOpenChange, }: MenuProps): react.JSX.Element;
+interface ContextMenuProps {
+    items: readonly MenuEntry[];
+    label?: string;
+    className?: string;
+    children: ReactNode;
+}
+/**
+ * A right-click menu.
+ *
+ * Also opens on the **context-menu key** and on Shift+F10, which is how keyboard users reach one —
+ * a right-click-only implementation is inaccessible, and it is the most commonly missed keyboard
+ * binding in the whole component set.
+ *
+ * Anchored to the pointer via a zero-size virtual rect, so the existing positioning code flips and
+ * shifts it near the viewport edges without needing a separate path.
+ */
+declare function ContextMenu({ items, label, className, children, }: ContextMenuProps): react.JSX.Element;
+
+export { AlertDialog, type AlertDialogProps, type CommandItem, CommandPalette, type CommandPaletteProps, ContextMenu, type ContextMenuProps, Dialog, DialogFooter, type DialogProps, type DialogSize, Drawer, type DrawerProps, type DrawerSide, DropdownMenu, HoverCard, type HoverCardProps, type MenuAction, type MenuCheckbox, type MenuEntry, type MenuProps, type MenuRadioGroup, type MenuSubmenu, Popover, PopoverContent, type PopoverContentProps, type PopoverProps, PopoverTrigger, type PopoverTriggerProps, Tooltip, type TooltipProps, TooltipProvider, type TooltipProviderProps, useCommandShortcut };

package/dist/overlay.d.ts

@@ -0,0 +1,330 @@
+import * as react from 'react';
+import { ReactNode } from 'react';
+import { P as Placement } from './position-DVScKcaa.js';
+
+/**
+ * A command palette.
+ *
+ * The interaction is easy; the accessibility is where these usually go wrong. This one implements
+ * the combobox pattern properly:
+ *
+ * - Focus stays in the input the whole time. Arrow keys move a *virtual* selection, announced via
+ *   `aria-activedescendant`, rather than moving DOM focus — so the user can keep typing.
+ * - The list is `role="listbox"` with `role="option"` children and correct `aria-selected`.
+ * - Focus is restored to whatever was focused before opening, so keyboard users aren't dumped at
+ *   the top of the document on close.
+ * - Focus is trapped while open, so Tab can't escape to the page behind the scrim.
+ *
+ * Filtering is a subsequence match rather than a substring one: typing `nds` should find
+ * "**N**ew **D**ata**s**ource", which is what anyone who has used a palette expects.
+ */
+interface CommandItem {
+    id: string;
+    label: string;
+    /** Optional grouping heading. Items with the same group render together. */
+    group?: string;
+    /** Leading icon. */
+    icon?: ReactNode;
+    /** Shortcut hint shown on the right, e.g. `'⌘K'`. Display only. */
+    shortcut?: string;
+    /** Extra text matched against the query but not displayed. */
+    keywords?: string;
+    onSelect?: () => void;
+}
+interface CommandPaletteProps {
+    items: readonly CommandItem[];
+    open: boolean;
+    onOpenChange: (open: boolean) => void;
+    placeholder?: string;
+    emptyMessage?: string;
+}
+declare function CommandPalette({ items, open, onOpenChange, placeholder, emptyMessage, }: CommandPaletteProps): react.JSX.Element | null;
+/**
+ * Bind a keyboard shortcut that toggles state — `⌘K` by default.
+ *
+ * ```tsx
+ * const [open, setOpen] = useState(false)
+ * useCommandShortcut(() => setOpen((v) => !v))
+ * ```
+ */
+declare function useCommandShortcut(toggle: () => void, key?: string): void;
+
+interface PopoverProps {
+    open?: boolean;
+    defaultOpen?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    placement?: Placement;
+    /** Gap from the trigger, in px. Default `8`. */
+    offset?: number;
+    /** Trap focus and block interaction behind. Default `false` — most popovers are non-modal. */
+    modal?: boolean;
+    children: ReactNode;
+}
+declare function Popover({ open, defaultOpen, onOpenChange, placement, offset, modal, children, }: PopoverProps): react.JSX.Element;
+interface PopoverTriggerProps extends React.HTMLAttributes<HTMLElement> {
+    /** Render into the child element rather than emitting a `<button>`. */
+    asChild?: boolean;
+    children: ReactNode;
+}
+declare function PopoverTrigger({ asChild, children, ...rest }: PopoverTriggerProps): react.JSX.Element;
+interface PopoverContentProps extends React.HTMLAttributes<HTMLDivElement> {
+    /** Draw an arrow pointing at the trigger. Default `false`. */
+    arrow?: boolean;
+    /** Match the trigger's width — for a popover acting as a dropdown panel. */
+    matchWidth?: boolean;
+    /** Accessible name. Required unless the content contains its own heading. */
+    label?: string;
+    children: ReactNode;
+}
+declare function PopoverContent({ arrow, matchWidth, label, className, style, children, ...rest }: PopoverContentProps): react.JSX.Element | null;
+interface HoverCardProps {
+    /** The card's contents. */
+    content: ReactNode;
+    /** Delay before opening, in ms. Default `500`. */
+    openDelay?: number;
+    /** Delay before closing, in ms. Default `200`. */
+    closeDelay?: number;
+    placement?: Placement;
+    className?: string;
+    children: ReactNode;
+}
+/**
+ * A rich preview shown on hover — a user card on an @mention, a link preview.
+ *
+ * Two delays, not one. The open delay stops cards firing as the pointer sweeps across a paragraph
+ * of links. The close delay is what lets the pointer travel from the trigger to the card without it
+ * vanishing en route, which is the failure that makes hover cards feel broken.
+ *
+ * Hover-only content is invisible to keyboard and touch users, so this also opens on focus. It is
+ * strictly for *supplementary* information — anything essential belongs in a click-opened popover.
+ */
+declare function HoverCard({ content, openDelay, closeDelay, placement, className, children, }: HoverCardProps): react.JSX.Element;
+
+interface TooltipProviderProps {
+    /** Delay before the first tooltip in a group opens, in ms. Default `600`. */
+    delay?: number;
+    children: ReactNode;
+}
+/**
+ * Share a delay across a set of tooltips.
+ *
+ * Once one is open, moving to a neighbour shows its tooltip immediately. Without this, scanning a
+ * toolbar means waiting out the delay on every single button — the behaviour every desktop OS gets
+ * right and most web implementations miss.
+ */
+declare function TooltipProvider({ delay, children }: TooltipProviderProps): react.JSX.Element;
+interface TooltipProps {
+    /** The tooltip text. Keep it short — it is read as one description. */
+    content: ReactNode;
+    placement?: Placement;
+    /** Override the group delay, in ms. */
+    delay?: number;
+    /** Draw an arrow. Default `true`. */
+    arrow?: boolean;
+    disabled?: boolean;
+    className?: string;
+    children: ReactNode;
+}
+declare function Tooltip({ content, placement, delay, arrow, disabled, className, children, }: TooltipProps): react.JSX.Element;
+
+type DialogSize = 'sm' | 'md' | 'lg' | 'xl' | 'full';
+interface DialogProps {
+    open: boolean;
+    onOpenChange: (open: boolean) => void;
+    /** The dialog's accessible name. Required — a dialog announced as just "dialog" is useless. */
+    title: ReactNode;
+    /** Supporting text, wired to `aria-describedby`. */
+    description?: ReactNode;
+    size?: DialogSize;
+    /** Actions row, pinned below the scrollable body. */
+    footer?: ReactNode;
+    /** Show the ✕ button. Default `true`. */
+    showClose?: boolean;
+    /** Allow closing via scrim click and Escape. Default `true`. */
+    dismissable?: boolean;
+    /** Element to focus on open. Defaults to the first tabbable one. */
+    initialFocus?: React.RefObject<HTMLElement | null>;
+    className?: string;
+    children?: ReactNode;
+}
+/**
+ * A modal dialog.
+ *
+ * Not `<dialog showModal>`: the native element's top-layer behaviour is genuinely better, but its
+ * backdrop cannot be animated consistently, `::backdrop` inherits nothing, and closing behaviour
+ * differs enough across browsers to need working around anyway. The pieces the native element gives
+ * for free — focus trap, scroll lock, inert background, focus restore — are all here explicitly.
+ *
+ * `title` is a required prop rather than an optional slot. Every accessibility audit of a component
+ * library turns up unnamed dialogs, and the reliable fix is to make the name impossible to omit.
+ */
+declare function Dialog({ open, onOpenChange, title, description, size, footer, showClose, dismissable, initialFocus, className, children, }: DialogProps): react.JSX.Element | null;
+interface AlertDialogProps {
+    open: boolean;
+    onOpenChange: (open: boolean) => void;
+    title: ReactNode;
+    description: ReactNode;
+    /** Confirm button text. Default `'Confirm'`. */
+    confirmLabel?: string;
+    cancelLabel?: string;
+    /** Style the confirm action as destructive. */
+    destructive?: boolean;
+    onConfirm: () => void | Promise<void>;
+    onCancel?: () => void;
+    /** Disable the buttons while an async confirm runs. */
+    busy?: boolean;
+    className?: string;
+}
+/**
+ * A confirmation dialog.
+ *
+ * `role="alertdialog"` and `aria-describedby` on the message, which makes a screen reader read the
+ * consequence immediately on open rather than waiting for the user to navigate to it. That is the
+ * entire difference from a regular dialog, and it matters precisely because these appear before
+ * irreversible actions.
+ *
+ * It is deliberately **not** dismissable by clicking the scrim: an accidental click outside should
+ * not silently cancel a decision the user was asked to make. Escape still works, because trapping
+ * someone in a dialog is worse.
+ *
+ * Focus starts on **Cancel**, not Confirm. A keyboard user who hits Enter reflexively should not
+ * delete their account.
+ */
+declare function AlertDialog({ open, onOpenChange, title, description, confirmLabel, cancelLabel, destructive, onConfirm, onCancel, busy, className, }: AlertDialogProps): react.JSX.Element | null;
+/** Layout helper for a dialog's action row. Right-aligned, reversed on narrow screens. */
+declare function DialogFooter({ children, className }: {
+    children: ReactNode;
+    className?: string;
+}): react.JSX.Element;
+
+type DrawerSide = 'left' | 'right' | 'top' | 'bottom';
+interface DrawerProps {
+    open: boolean;
+    onOpenChange: (open: boolean) => void;
+    /** Which edge it slides from. Default `'right'`. */
+    side?: DrawerSide;
+    title: ReactNode;
+    description?: ReactNode;
+    /** Width for left/right, height for top/bottom. Default `'22rem'`. */
+    size?: string;
+    footer?: ReactNode;
+    showClose?: boolean;
+    /** Block interaction behind and lock scroll. Default `true`. */
+    modal?: boolean;
+    dismissable?: boolean;
+    className?: string;
+    children?: ReactNode;
+}
+/**
+ * A panel that slides in from an edge.
+ *
+ * Same accessibility contract as `Dialog` — it is a dialog, just positioned differently. The reason
+ * it exists separately is that the *content* pattern differs: drawers hold navigation, filters and
+ * detail views that stay open while the user works, so they support a non-modal mode where the page
+ * behind stays usable.
+ *
+ * On a phone a bottom drawer is the right shape for what would be a dialog on a desktop; that's a
+ * layout decision for the consumer, which is why `side` is a plain prop rather than a breakpoint
+ * rule baked in here.
+ */
+declare function Drawer({ open, onOpenChange, side, title, description, size, footer, showClose, modal, dismissable, className, children, }: DrawerProps): react.JSX.Element | null;
+
+/**
+ * Menus — dropdown and context.
+ *
+ * Data-driven (`items={[…]}`) rather than compound. Menus are almost always built from a
+ * configuration array anyway — permissions filter entries, a selection decides what's enabled — and
+ * expressing that as JSX children means `{canDelete && <MenuItem …/>}` scattered through the tree,
+ * which breaks keyboard navigation indices in ways that are painful to debug.
+ *
+ * Follows the ARIA menu pattern, where **DOM focus moves to the item** (unlike a listbox, which
+ * keeps focus on the container). That's what makes Right/Left arrow submenu traversal work the way
+ * it does in every desktop application.
+ */
+interface MenuItemBase {
+    id?: string;
+    disabled?: boolean;
+}
+interface MenuAction extends MenuItemBase {
+    type?: 'item';
+    label: ReactNode;
+    icon?: ReactNode;
+    /** Display-only shortcut hint, e.g. `'⌘S'`. */
+    shortcut?: string;
+    /** Style as destructive, and mark it in the accessible name. */
+    danger?: boolean;
+    onSelect?: () => void;
+}
+interface MenuCheckbox extends MenuItemBase {
+    type: 'checkbox';
+    label: ReactNode;
+    checked: boolean;
+    onChange: (checked: boolean) => void;
+    shortcut?: string;
+}
+interface MenuRadioGroup {
+    type: 'radio';
+    value: string;
+    onChange: (value: string) => void;
+    options: ReadonlyArray<{
+        value: string;
+        label: ReactNode;
+        disabled?: boolean;
+    }>;
+}
+interface MenuSubmenu extends MenuItemBase {
+    type: 'submenu';
+    label: ReactNode;
+    icon?: ReactNode;
+    items: readonly MenuEntry[];
+}
+type MenuEntry = MenuAction | MenuCheckbox | MenuRadioGroup | MenuSubmenu | {
+    type: 'separator';
+} | {
+    type: 'label';
+    label: ReactNode;
+};
+interface MenuProps {
+    items: readonly MenuEntry[];
+    placement?: Placement;
+    /** Accessible name for the menu itself. */
+    label?: string;
+    className?: string;
+    /** The control that opens the menu. */
+    children: ReactNode;
+    open?: boolean;
+    onOpenChange?: (open: boolean) => void;
+}
+/**
+ * A dropdown menu.
+ *
+ * ```tsx
+ * <DropdownMenu items={[
+ *   { label: 'Edit', shortcut: '⌘E', onSelect: edit },
+ *   { type: 'separator' },
+ *   { label: 'Delete', danger: true, onSelect: remove },
+ * ]}>
+ *   <IconButton label="Actions" />
+ * </DropdownMenu>
+ * ```
+ */
+declare function DropdownMenu({ items, placement, label, className, children, open: controlledOpen, onOpenChange, }: MenuProps): react.JSX.Element;
+interface ContextMenuProps {
+    items: readonly MenuEntry[];
+    label?: string;
+    className?: string;
+    children: ReactNode;
+}
+/**
+ * A right-click menu.
+ *
+ * Also opens on the **context-menu key** and on Shift+F10, which is how keyboard users reach one —
+ * a right-click-only implementation is inaccessible, and it is the most commonly missed keyboard
+ * binding in the whole component set.
+ *
+ * Anchored to the pointer via a zero-size virtual rect, so the existing positioning code flips and
+ * shifts it near the viewport edges without needing a separate path.
+ */
+declare function ContextMenu({ items, label, className, children, }: ContextMenuProps): react.JSX.Element;
+
+export { AlertDialog, type AlertDialogProps, type CommandItem, CommandPalette, type CommandPaletteProps, ContextMenu, type ContextMenuProps, Dialog, DialogFooter, type DialogProps, type DialogSize, Drawer, type DrawerProps, type DrawerSide, DropdownMenu, HoverCard, type HoverCardProps, type MenuAction, type MenuCheckbox, type MenuEntry, type MenuProps, type MenuRadioGroup, type MenuSubmenu, Popover, PopoverContent, type PopoverContentProps, type PopoverProps, PopoverTrigger, type PopoverTriggerProps, Tooltip, type TooltipProps, TooltipProvider, type TooltipProviderProps, useCommandShortcut };

package/dist/overlay.js

@@ -0,0 +1,8 @@
+'use client';
+export { AlertDialog, CommandPalette, ContextMenu, Dialog, DialogFooter, Drawer, DropdownMenu, HoverCard, Popover, PopoverContent, PopoverTrigger, Tooltip, TooltipProvider, useCommandShortcut } from './chunk-LDCZQP3R.js';
+import './chunk-HO2YSF5O.js';
+import './chunk-XEP6P7E6.js';
+import './chunk-LXCIXR5T.js';
+import './chunk-H34OXXJU.js';
+//# sourceMappingURL=overlay.js.map
+//# sourceMappingURL=overlay.js.map

package/dist/overlay.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"names":[],"mappings":"","file":"overlay.js"}