@ninna-ui/overlays 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Ninna-UI Team
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,116 @@
+# @ninna-ui/overlays
+
+> 5 overlay components for Ninna-UI — Modal, Drawer, Popover, Tooltip, and DropdownMenu.
+
+[![npm](https://img.shields.io/npm/v/@ninna-ui/overlays.svg)](https://www.npmjs.com/package/@ninna-ui/overlays)
+[![License: MIT](https://img.shields.io/badge/License-MIT-blue.svg)](../../LICENSE)
+
+📖 **[Full Documentation →](https://ninna-ui.dev/overlays)**  |  📦 **[npm →](https://www.npmjs.com/package/@ninna-ui/overlays)**  |  🐙 **[GitHub →](https://github.com/ninna-ui/ninna-ui/tree/main/packages/overlays)**
+
+Overlay and portal components for [Ninna UI](../../README.md). All powered by [Radix UI](https://www.radix-ui.com/) under the hood for bulletproof accessibility — focus trapping, scroll locking, escape-to-close, and click-outside dismissal are all handled automatically. Radix types never leak into the public API.
+
+## Installation
+
+```bash
+pnpm add @ninna-ui/overlays @ninna-ui/core
+```
+
+## CSS Setup
+
+```css
+@import "tailwindcss";
+@import "@ninna-ui/core/theme/presets/default.css";
+@source "../node_modules/@ninna-ui/*";
+```
+
+## Components
+
+| Component | Description | Radix Engine |
+|-----------|-------------|-------------|
+| `Modal` | Dialog with backdrop overlay, focus trap, and scroll lock | DialogEngine |
+| `Drawer` | Slide-in panel from any edge (top, right, bottom, left) | DialogEngine |
+| `Popover` | Floating content anchored to a trigger element | PopoverEngine |
+| `Tooltip` | Lightweight hover/focus hint | TooltipEngine |
+| `DropdownMenu` | Accessible dropdown menu with keyboard navigation | DropdownEngine |
+
+## Quick Start
+
+```tsx
+import { Modal, Tooltip, DropdownMenu } from "@ninna-ui/overlays";
+import { Button } from "@ninna-ui/primitives";
+
+function App() {
+  return (
+    <>
+      {/* Tooltip */}
+      <Tooltip>
+        <Tooltip.Trigger asChild>
+          <Button color="primary">Save</Button>
+        </Tooltip.Trigger>
+        <Tooltip.Content>Save your changes</Tooltip.Content>
+      </Tooltip>
+
+      {/* Modal */}
+      <Modal>
+        <Modal.Trigger asChild>
+          <Button>Open Modal</Button>
+        </Modal.Trigger>
+        <Modal.Content>
+          <Modal.Header>Confirm</Modal.Header>
+          <Modal.Body>
+            <p>Are you sure you want to continue?</p>
+          </Modal.Body>
+        </Modal.Content>
+      </Modal>
+
+      {/* Dropdown */}
+      <DropdownMenu>
+        <DropdownMenu.Trigger asChild>
+          <Button variant="outline">Options</Button>
+        </DropdownMenu.Trigger>
+        <DropdownMenu.Content>
+          <DropdownMenu.Item>Edit</DropdownMenu.Item>
+          <DropdownMenu.Item>Duplicate</DropdownMenu.Item>
+          <DropdownMenu.Separator />
+          <DropdownMenu.Item destructive>Delete</DropdownMenu.Item>
+        </DropdownMenu.Content>
+      </DropdownMenu>
+    </>
+  );
+}
+```
+
+## Built-in Behavior
+
+Overlay components include these accessibility features out of the box:
+
+- **Focus trapping** — Modal and Drawer trap keyboard focus
+- **Scroll locking** — Modal and Drawer lock background scroll while open
+- **Escape to close** — Press Escape to dismiss (component-configurable)
+- **Click outside** — Click outside to dismiss (component-configurable)
+- **Portal rendering** — Overlay content renders in a portal to avoid z-index conflicts
+- **Animation** — Enter/exit animations via CSS keyframes (ninna-enter, ninna-exit)
+- **z-index layering** — Tooltip > DropdownMenu > Popover > Modal/Drawer
+
+## All Exports
+
+```typescript
+import {
+  Modal,
+  Drawer,
+  Popover,
+  Tooltip,
+  DropdownMenu,
+} from "@ninna-ui/overlays";
+```
+
+## Related Packages
+
+- [`@ninna-ui/core`](../core/README.md) — Design tokens and theme presets (required)
+- [`@ninna-ui/primitives`](../primitives/README.md) — Button, Badge, and other trigger components
+- [`@ninna-ui/feedback`](../feedback/README.md) — Toast notifications for overlay actions
+- [All packages](../../README.md#packages) — Complete package list
+
+## License
+
+[MIT](../../LICENSE)

package/dist/index.d.ts

@@ -0,0 +1,376 @@
+import * as react from 'react';
+import { ReactNode, ComponentPropsWithoutRef } from 'react';
+import * as react_jsx_runtime from 'react/jsx-runtime';
+
+/** Size options for the Modal */
+type ModalSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'full';
+/** Props for the Modal root component */
+interface ModalProps {
+    /** Modal content */
+    children: ReactNode;
+    /** Controlled open state */
+    open?: boolean | undefined;
+    /** Default open state (uncontrolled) */
+    defaultOpen?: boolean | undefined;
+    /** Callback when open state changes */
+    onOpenChange?: ((open: boolean) => void) | undefined;
+    /** Whether the modal is modal (blocks interaction with rest of page) */
+    modal?: boolean | undefined;
+}
+/** Props for the Modal trigger button */
+interface ModalTriggerProps extends ComponentPropsWithoutRef<'button'> {
+    /** Render as child element instead of button */
+    asChild?: boolean | undefined;
+}
+/** Props for the Modal content panel */
+interface ModalContentProps extends ComponentPropsWithoutRef<'div'> {
+    /** Size of the modal content */
+    size?: ModalSize;
+    /** Whether the modal is centered vertically */
+    centered?: boolean;
+    /** Accessible description for the modal. Only rendered when provided. */
+    description?: string;
+    /** Whether clicking the overlay closes the modal @default true */
+    closeOnOverlayClick?: boolean | undefined;
+    /** Whether pressing Escape closes the modal @default true */
+    closeOnEscape?: boolean | undefined;
+    /** Callback when escape key is pressed */
+    onEscapeKeyDown?: ((event: KeyboardEvent) => void) | undefined;
+    /** Callback when pointer clicks outside content */
+    onPointerDownOutside?: ((event: Event) => void) | undefined;
+    /** Callback when focus moves outside content */
+    onInteractOutside?: ((event: Event) => void) | undefined;
+}
+/** Props for the Modal header section */
+interface ModalHeaderProps extends ComponentPropsWithoutRef<'div'> {
+}
+/** Props for the Modal body section */
+interface ModalBodyProps extends ComponentPropsWithoutRef<'div'> {
+}
+/** Props for the Modal footer section */
+interface ModalFooterProps extends ComponentPropsWithoutRef<'div'> {
+}
+/** Props for the Modal close button */
+interface ModalCloseProps extends ComponentPropsWithoutRef<'button'> {
+    /** Render as child element instead of button */
+    asChild?: boolean | undefined;
+}
+
+declare const Modal: {
+    ({ children, open, defaultOpen, onOpenChange, modal }: ModalProps): react_jsx_runtime.JSX.Element;
+    displayName: string;
+} & {
+    Trigger: react.ForwardRefExoticComponent<ModalTriggerProps & react.RefAttributes<HTMLButtonElement>>;
+    Content: react.ForwardRefExoticComponent<ModalContentProps & react.RefAttributes<HTMLDivElement>>;
+    Header: react.ForwardRefExoticComponent<ModalHeaderProps & react.RefAttributes<HTMLDivElement>>;
+    Body: react.ForwardRefExoticComponent<ModalBodyProps & react.RefAttributes<HTMLDivElement>>;
+    Footer: react.ForwardRefExoticComponent<ModalFooterProps & react.RefAttributes<HTMLDivElement>>;
+    Close: react.ForwardRefExoticComponent<ModalCloseProps & react.RefAttributes<HTMLButtonElement>>;
+};
+
+/** Placement options for the Drawer */
+type DrawerPlacement = 'left' | 'right' | 'top' | 'bottom';
+/** Size options for the Drawer */
+type DrawerSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'full';
+/** Props for the Drawer root component */
+interface DrawerProps {
+    /** Drawer content */
+    children: ReactNode;
+    /** Controlled open state */
+    open?: boolean | undefined;
+    /** Default open state (uncontrolled) */
+    defaultOpen?: boolean | undefined;
+    /** Callback when open state changes */
+    onOpenChange?: ((open: boolean) => void) | undefined;
+    /** Whether the drawer is modal (blocks interaction with rest of page) */
+    modal?: boolean | undefined;
+}
+/** Props for the Drawer trigger button */
+interface DrawerTriggerProps extends ComponentPropsWithoutRef<'button'> {
+    /** Render as child element instead of button */
+    asChild?: boolean | undefined;
+}
+/** Props for the Drawer content panel */
+interface DrawerContentProps extends ComponentPropsWithoutRef<'div'> {
+    /** Which edge the drawer slides from @default 'right' */
+    placement?: DrawerPlacement;
+    /** Size of the drawer @default 'md' */
+    size?: DrawerSize;
+    /** Accessible description for the drawer. Only rendered when provided. */
+    description?: string;
+    /** Whether clicking the overlay closes the drawer @default true */
+    closeOnOverlayClick?: boolean | undefined;
+    /** Whether pressing Escape closes the drawer @default true */
+    closeOnEscape?: boolean | undefined;
+    /** Callback when escape key is pressed */
+    onEscapeKeyDown?: ((event: KeyboardEvent) => void) | undefined;
+    /** Callback when pointer clicks outside content */
+    onPointerDownOutside?: ((event: Event) => void) | undefined;
+}
+/** Props for the Drawer header section */
+interface DrawerHeaderProps extends ComponentPropsWithoutRef<'div'> {
+}
+/** Props for the Drawer body section */
+interface DrawerBodyProps extends ComponentPropsWithoutRef<'div'> {
+}
+/** Props for the Drawer footer section */
+interface DrawerFooterProps extends ComponentPropsWithoutRef<'div'> {
+}
+/** Props for the Drawer close button */
+interface DrawerCloseProps extends ComponentPropsWithoutRef<'button'> {
+    /** Render as child element instead of button */
+    asChild?: boolean | undefined;
+}
+
+declare const Drawer: {
+    ({ children, open, defaultOpen, onOpenChange, modal }: DrawerProps): react_jsx_runtime.JSX.Element;
+    displayName: string;
+} & {
+    Trigger: react.ForwardRefExoticComponent<DrawerTriggerProps & react.RefAttributes<HTMLButtonElement>>;
+    Content: react.ForwardRefExoticComponent<DrawerContentProps & react.RefAttributes<HTMLDivElement>>;
+    Header: react.ForwardRefExoticComponent<DrawerHeaderProps & react.RefAttributes<HTMLDivElement>>;
+    Body: react.ForwardRefExoticComponent<DrawerBodyProps & react.RefAttributes<HTMLDivElement>>;
+    Footer: react.ForwardRefExoticComponent<DrawerFooterProps & react.RefAttributes<HTMLDivElement>>;
+    Close: react.ForwardRefExoticComponent<DrawerCloseProps & react.RefAttributes<HTMLButtonElement>>;
+};
+
+/** Placement options for the Popover */
+type PopoverPlacement = 'top' | 'right' | 'bottom' | 'left';
+/** Alignment options for the Popover */
+type PopoverAlign = 'start' | 'center' | 'end';
+/** Props for the Popover root component */
+interface PopoverProps {
+    /** Popover content */
+    children: ReactNode;
+    /** Controlled open state */
+    open?: boolean | undefined;
+    /** Default open state (uncontrolled) */
+    defaultOpen?: boolean | undefined;
+    /** Callback when open state changes */
+    onOpenChange?: ((open: boolean) => void) | undefined;
+    /** Whether the popover is modal */
+    modal?: boolean | undefined;
+}
+/** Props for the Popover trigger */
+interface PopoverTriggerProps extends ComponentPropsWithoutRef<'button'> {
+    /** Render as child element instead of button */
+    asChild?: boolean | undefined;
+}
+/** Props for the Popover content panel */
+interface PopoverContentProps extends ComponentPropsWithoutRef<'div'> {
+    /** Which side to place the popover @default 'bottom' */
+    side?: PopoverPlacement;
+    /** Distance from trigger in pixels @default 4 */
+    sideOffset?: number;
+    /** Alignment along the side @default 'center' */
+    align?: PopoverAlign;
+    /** Whether to avoid collisions with viewport boundary @default true */
+    avoidCollisions?: boolean | undefined;
+    /** Callback when escape key is pressed */
+    onEscapeKeyDown?: ((event: KeyboardEvent) => void) | undefined;
+    /** Callback when pointer clicks outside content */
+    onPointerDownOutside?: ((event: Event) => void) | undefined;
+    /** Callback when focus moves outside content */
+    onFocusOutside?: ((event: Event) => void) | undefined;
+}
+/** Props for the Popover arrow */
+interface PopoverArrowProps extends ComponentPropsWithoutRef<'svg'> {
+    /** Width of the arrow in pixels @default 10 */
+    width?: number;
+    /** Height of the arrow in pixels @default 5 */
+    height?: number;
+}
+/** Props for the Popover close button */
+interface PopoverCloseProps extends ComponentPropsWithoutRef<'button'> {
+    /** Render as child element instead of button */
+    asChild?: boolean | undefined;
+}
+
+declare const Popover: {
+    ({ children, open, defaultOpen, onOpenChange, modal }: PopoverProps): react_jsx_runtime.JSX.Element;
+    displayName: string;
+} & {
+    Trigger: react.ForwardRefExoticComponent<PopoverTriggerProps & react.RefAttributes<HTMLButtonElement>>;
+    Content: react.ForwardRefExoticComponent<PopoverContentProps & react.RefAttributes<HTMLDivElement>>;
+    Arrow: react.ForwardRefExoticComponent<PopoverArrowProps & react.RefAttributes<SVGSVGElement>>;
+    Close: react.ForwardRefExoticComponent<PopoverCloseProps & react.RefAttributes<HTMLButtonElement>>;
+};
+
+/** Placement options for the Tooltip */
+type TooltipPlacement = 'top' | 'right' | 'bottom' | 'left';
+/** Props for the Tooltip root component */
+interface TooltipProps {
+    /** Tooltip content */
+    children: ReactNode;
+    /** Controlled open state */
+    open?: boolean | undefined;
+    /** Default open state (uncontrolled) */
+    defaultOpen?: boolean | undefined;
+    /** Callback when open state changes */
+    onOpenChange?: ((open: boolean) => void) | undefined;
+    /** Delay in ms before showing the tooltip @default 200 */
+    delayDuration?: number | undefined;
+    /** Whether to disable hoverable content */
+    disableHoverableContent?: boolean | undefined;
+}
+/** Props for the Tooltip trigger */
+interface TooltipTriggerProps extends ComponentPropsWithoutRef<'button'> {
+    /** Render as child element instead of button */
+    asChild?: boolean | undefined;
+}
+/** Props for the Tooltip content */
+interface TooltipContentProps extends ComponentPropsWithoutRef<'div'> {
+    /** Which side to place the tooltip @default 'top' */
+    side?: TooltipPlacement;
+    /** Distance from trigger in pixels @default 4 */
+    sideOffset?: number;
+    /** Alignment along the side @default 'center' */
+    align?: 'start' | 'center' | 'end';
+    /** Whether to show an arrow @default false */
+    hasArrow?: boolean | undefined;
+    /** Whether to avoid collisions with viewport boundary @default true */
+    avoidCollisions?: boolean | undefined;
+}
+
+declare const Tooltip: {
+    ({ children, open, defaultOpen, onOpenChange, delayDuration, disableHoverableContent, }: TooltipProps): react_jsx_runtime.JSX.Element;
+    displayName: string;
+} & {
+    Trigger: react.ForwardRefExoticComponent<TooltipTriggerProps & react.RefAttributes<HTMLButtonElement>>;
+    Content: react.ForwardRefExoticComponent<TooltipContentProps & react.RefAttributes<HTMLDivElement>>;
+};
+
+/** Props for the DropdownMenu root component */
+interface DropdownMenuProps {
+    /** DropdownMenu content */
+    children: ReactNode;
+    /** Controlled open state */
+    open?: boolean | undefined;
+    /** Default open state (uncontrolled) */
+    defaultOpen?: boolean | undefined;
+    /** Callback when open state changes */
+    onOpenChange?: ((open: boolean) => void) | undefined;
+    /** Whether the dropdown is modal @default true */
+    modal?: boolean | undefined;
+    /** Reading direction @default 'ltr' */
+    dir?: 'ltr' | 'rtl' | undefined;
+}
+/** Props for the DropdownMenu trigger */
+interface DropdownMenuTriggerProps extends ComponentPropsWithoutRef<'button'> {
+    /** Render as child element instead of button */
+    asChild?: boolean | undefined;
+}
+/** Props for the DropdownMenu content */
+interface DropdownMenuContentProps extends ComponentPropsWithoutRef<'div'> {
+    /** Which side to place the menu @default 'bottom' */
+    side?: 'top' | 'right' | 'bottom' | 'left';
+    /** Distance from trigger in pixels @default 4 */
+    sideOffset?: number;
+    /** Alignment along the side @default 'start' */
+    align?: 'start' | 'center' | 'end';
+    /** Whether to loop keyboard navigation @default true */
+    loop?: boolean | undefined;
+    /** Whether to avoid collisions with viewport boundary */
+    avoidCollisions?: boolean | undefined;
+}
+/** Props for a DropdownMenu item */
+interface DropdownMenuItemProps extends Omit<ComponentPropsWithoutRef<'div'>, 'onSelect'> {
+    /** Whether the item is disabled */
+    disabled?: boolean | undefined;
+    /** Callback when the item is selected */
+    onSelect?: ((event: Event) => void) | undefined;
+    /** Text value for typeahead */
+    textValue?: string | undefined;
+    /** Whether the item is destructive (danger styling) */
+    destructive?: boolean | undefined;
+}
+/** Props for a DropdownMenu checkbox item */
+interface DropdownMenuCheckboxItemProps extends Omit<ComponentPropsWithoutRef<'div'>, 'onSelect'> {
+    /** Whether the item is checked */
+    checked?: boolean | 'indeterminate' | undefined;
+    /** Callback when checked state changes */
+    onCheckedChange?: ((checked: boolean) => void) | undefined;
+    /** Whether the item is disabled */
+    disabled?: boolean | undefined;
+    /** Callback when the item is selected */
+    onSelect?: ((event: Event) => void) | undefined;
+    /** Text value for typeahead */
+    textValue?: string | undefined;
+}
+/** Props for a DropdownMenu radio group */
+interface DropdownMenuRadioGroupProps extends ComponentPropsWithoutRef<'div'> {
+    /** Current value */
+    value?: string | undefined;
+    /** Callback when value changes */
+    onValueChange?: ((value: string) => void) | undefined;
+}
+/** Props for a DropdownMenu radio item */
+interface DropdownMenuRadioItemProps extends Omit<ComponentPropsWithoutRef<'div'>, 'onSelect'> {
+    /** Value of the radio item */
+    value: string;
+    /** Whether the item is disabled */
+    disabled?: boolean | undefined;
+    /** Callback when the item is selected */
+    onSelect?: ((event: Event) => void) | undefined;
+    /** Text value for typeahead */
+    textValue?: string | undefined;
+}
+/** Props for a DropdownMenu label */
+interface DropdownMenuLabelProps extends ComponentPropsWithoutRef<'div'> {
+    /** Whether the label is inset (indented to align with items) */
+    inset?: boolean | undefined;
+}
+/** Props for a DropdownMenu separator */
+interface DropdownMenuSeparatorProps extends ComponentPropsWithoutRef<'div'> {
+}
+/** Props for a DropdownMenu group */
+interface DropdownMenuGroupProps extends ComponentPropsWithoutRef<'div'> {
+}
+/** Props for the DropdownMenu sub menu */
+interface DropdownMenuSubProps {
+    /** Sub menu content */
+    children: ReactNode;
+    /** Controlled open state */
+    open?: boolean | undefined;
+    /** Default open state */
+    defaultOpen?: boolean | undefined;
+    /** Callback when open state changes */
+    onOpenChange?: ((open: boolean) => void) | undefined;
+}
+/** Props for the DropdownMenu sub trigger */
+interface DropdownMenuSubTriggerProps extends ComponentPropsWithoutRef<'div'> {
+    /** Whether the item is disabled */
+    disabled?: boolean | undefined;
+    /** Text value for typeahead */
+    textValue?: string | undefined;
+}
+/** Props for the DropdownMenu sub content */
+interface DropdownMenuSubContentProps extends ComponentPropsWithoutRef<'div'> {
+    /** Distance from trigger in pixels @default 2 */
+    sideOffset?: number | undefined;
+    /** Whether to loop keyboard navigation */
+    loop?: boolean | undefined;
+}
+
+declare const DropdownMenu: {
+    ({ children, open, defaultOpen, onOpenChange, modal, dir }: DropdownMenuProps): react_jsx_runtime.JSX.Element;
+    displayName: string;
+} & {
+    Trigger: react.ForwardRefExoticComponent<DropdownMenuTriggerProps & react.RefAttributes<HTMLButtonElement>>;
+    Content: react.ForwardRefExoticComponent<DropdownMenuContentProps & react.RefAttributes<HTMLDivElement>>;
+    Item: react.ForwardRefExoticComponent<DropdownMenuItemProps & react.RefAttributes<HTMLDivElement>>;
+    CheckboxItem: react.ForwardRefExoticComponent<DropdownMenuCheckboxItemProps & react.RefAttributes<HTMLDivElement>>;
+    RadioGroup: react.ForwardRefExoticComponent<DropdownMenuRadioGroupProps & react.RefAttributes<HTMLDivElement>>;
+    RadioItem: react.ForwardRefExoticComponent<DropdownMenuRadioItemProps & react.RefAttributes<HTMLDivElement>>;
+    Label: react.ForwardRefExoticComponent<DropdownMenuLabelProps & react.RefAttributes<HTMLDivElement>>;
+    Separator: react.ForwardRefExoticComponent<DropdownMenuSeparatorProps & react.RefAttributes<HTMLDivElement>>;
+    Group: react.ForwardRefExoticComponent<DropdownMenuGroupProps & react.RefAttributes<HTMLDivElement>>;
+    Sub: {
+        ({ children, open, defaultOpen, onOpenChange }: DropdownMenuSubProps): react_jsx_runtime.JSX.Element;
+        displayName: string;
+    };
+    SubTrigger: react.ForwardRefExoticComponent<DropdownMenuSubTriggerProps & react.RefAttributes<HTMLDivElement>>;
+    SubContent: react.ForwardRefExoticComponent<DropdownMenuSubContentProps & react.RefAttributes<HTMLDivElement>>;
+};
+
+export { Drawer, type DrawerBodyProps, type DrawerCloseProps, type DrawerContentProps, type DrawerFooterProps, type DrawerHeaderProps, type DrawerPlacement, type DrawerProps, type DrawerSize, type DrawerTriggerProps, DropdownMenu, type DropdownMenuCheckboxItemProps, type DropdownMenuContentProps, type DropdownMenuGroupProps, type DropdownMenuItemProps, type DropdownMenuLabelProps, type DropdownMenuProps, type DropdownMenuRadioGroupProps, type DropdownMenuRadioItemProps, type DropdownMenuSeparatorProps, type DropdownMenuSubContentProps, type DropdownMenuSubProps, type DropdownMenuSubTriggerProps, type DropdownMenuTriggerProps, Modal, type ModalBodyProps, type ModalCloseProps, type ModalContentProps, type ModalFooterProps, type ModalHeaderProps, type ModalProps, type ModalSize, type ModalTriggerProps, Popover, type PopoverAlign, type PopoverArrowProps, type PopoverCloseProps, type PopoverContentProps, type PopoverPlacement, type PopoverProps, type PopoverTriggerProps, Tooltip, type TooltipContentProps, type TooltipPlacement, type TooltipProps, type TooltipTriggerProps };