@plumeria/headlessui 14.2.0 → 15.0.0

package/README.md

@@ -3,7 +3,7 @@
 ![License](https://img.shields.io/badge/License-MIT-10B981)
 ![npm](https://img.shields.io/npm/v/@plumeria/headlessui?&color=10B981)
 
-Accessible UI component wrappers built on [Radix UI](https://www.radix-ui.com/) primitives, designed to work seamlessly with Plumeria's `styleName` abstraction layer.
+A curated set of essential headless primitives, built on [Radix UI](https://www.radix-ui.com/) and designed to work seamlessly with Plumeria's `styleName` abstraction layer.
 
 Each component is a pure passthrough — it forwards refs and spreads props onto the underlying Radix primitive. `styleName` is compiled to `className`/`style` at the call site before the component runs, so no Plumeria-specific logic is needed inside the components.
 
@@ -23,13 +23,7 @@ pnpm i @plumeria/headlessui
 
 ```tsx
 import * as css from '@plumeria/core';
-import {
-  Accordion,
-  AccordionItem,
-  AccordionHeader,
-  AccordionTrigger,
-  AccordionContent,
-} from '@plumeria/headlessui';
+import { Accordion } from '@plumeria/headlessui';
 
 const styles = css.create({
   root: {
@@ -59,30 +53,205 @@ const styles = css.create({
 
 export const FAQ = () => (
   <Accordion type="single" collapsible styleName={styles.root}>
-    <AccordionItem value="item-1">
-      <AccordionHeader>
-        <AccordionTrigger styleName={styles.trigger}>
+    <Accordion.Item value="item-1">
+      <Accordion.Header>
+        <Accordion.Trigger styleName={styles.trigger}>
           Is it accessible?
-        </AccordionTrigger>
-      </AccordionHeader>
-      <AccordionContent styleName={styles.content}>
+        </Accordion.Trigger>
+      </Accordion.Header>
+      <Accordion.Content styleName={styles.content}>
         Yes. It adheres to the WAI-ARIA design pattern.
-      </AccordionContent>
-    </AccordionItem>
+      </Accordion.Content>
+    </Accordion.Item>
   </Accordion>
 );
 ```
 
 ## Components
 
-| Component group | Primitives |
-|---|---|
-| **Dialog** | Dialog, DialogTrigger, DialogPortal, DialogOverlay, DialogContent, DialogTitle, DialogDescription, DialogClose |
-| **Popover** | Popover, PopoverTrigger, PopoverPortal, PopoverContent, PopoverClose, PopoverArrow, PopoverAnchor |
-| **Tooltip** | TooltipProvider, Tooltip, TooltipTrigger, TooltipPortal, TooltipContent, TooltipArrow |
-| **Accordion** | Accordion, AccordionItem, AccordionHeader, AccordionTrigger, AccordionContent |
-| **Tabs** | Tabs, TabsList, TabsTrigger, TabsContent |
-| **Collapsible** | Collapsible, CollapsibleTrigger, CollapsibleContent |
+The following twenty component groups are exported. All components support `ref` forwarding and props spread.
+
+### Accordion
+
+- `Item`
+- `Header`
+- `Trigger`
+- `Content`
+
+### AlertDialog
+
+- `Trigger`
+- `Portal`
+- `Overlay`
+- `Content`
+- `Title`
+- `Description`
+- `Action`
+- `Cancel`
+
+### Checkbox
+
+- `Indicator`
+
+### Collapsible
+
+- `Trigger`
+- `Content`
+
+### ContextMenu
+
+- `Trigger`
+- `Portal`
+- `Content`
+- `Group`
+- `Label`
+- `Item`
+- `CheckboxItem`
+- `RadioGroup`
+- `RadioItem`
+- `ItemIndicator`
+- `Separator`
+- `Arrow`
+- `Sub`
+- `SubTrigger`
+- `SubContent`
+
+### Dialog
+
+- `Trigger`
+- `Portal`
+- `Overlay`
+- `Content`
+- `Title`
+- `Description`
+- `Close`
+
+### DropdownMenu
+
+- `Trigger`
+- `Portal`
+- `Content`
+- `Group`
+- `Label`
+- `Item`
+- `CheckboxItem`
+- `RadioGroup`
+- `RadioItem`
+- `ItemIndicator`
+- `Separator`
+- `Arrow`
+- `Sub`
+- `SubTrigger`
+- `SubContent`
+
+### Menubar
+
+- `Menu`
+- `Trigger`
+- `Portal`
+- `Content`
+- `Group`
+- `Label`
+- `Item`
+- `CheckboxItem`
+- `RadioGroup`
+- `RadioItem`
+- `ItemIndicator`
+- `Separator`
+- `Arrow`
+- `Sub`
+- `SubTrigger`
+- `SubContent`
+
+### NavigationMenu
+
+- `Sub`
+- `List`
+- `Item`
+- `Trigger`
+- `Link`
+- `Indicator`
+- `Content`
+- `Viewport`
+
+### Popover
+
+- `Trigger`
+- `Portal`
+- `Content`
+- `Close`
+- `Arrow`
+- `Anchor`
+
+### RadioGroup
+
+- `Item`
+- `Indicator`
+
+### ScrollArea
+
+- `Viewport`
+- `Scrollbar`
+- `Thumb`
+- `Corner`
+
+### Select
+
+- `Trigger`
+- `Value`
+- `Icon`
+- `Portal`
+- `Content`
+- `Viewport`
+- `Group`
+- `Label`
+- `Item`
+- `ItemText`
+- `ItemIndicator`
+- `ScrollUpButton`
+- `ScrollDownButton`
+- `Separator`
+- `Arrow`
+
+### Slider
+
+- `Track`
+- `Range`
+- `Thumb`
+
+### Switch
+
+- `Thumb`
+
+### Tabs
+
+- `List`
+- `Trigger`
+- `Content`
+
+### Toast
+
+- `Provider`
+- `Viewport`
+- `Title`
+- `Description`
+- `Action`
+- `Close`
+
+### Toggle
+
+
+### ToggleGroup
+
+- `Item`
+
+### Tooltip
+
+- `Provider`
+- `Trigger`
+- `Portal`
+- `Content`
+- `Arrow`
 
 ## License
 

package/dist/Accordion.d.ts

@@ -1,7 +1,8 @@
 import * as React from 'react';
 import * as AccordionPrimitive from '@radix-ui/react-accordion';
-export declare const Accordion: React.ForwardRefExoticComponent<(Omit<AccordionPrimitive.AccordionSingleProps & React.RefAttributes<HTMLDivElement>, "ref"> | Omit<AccordionPrimitive.AccordionMultipleProps & React.RefAttributes<HTMLDivElement>, "ref">) & React.RefAttributes<HTMLDivElement>>;
-export declare const AccordionItem: React.ForwardRefExoticComponent<Omit<AccordionPrimitive.AccordionItemProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
-export declare const AccordionHeader: React.ForwardRefExoticComponent<Omit<AccordionPrimitive.AccordionHeaderProps & React.RefAttributes<HTMLHeadingElement>, "ref"> & React.RefAttributes<HTMLHeadingElement>>;
-export declare const AccordionTrigger: React.ForwardRefExoticComponent<Omit<AccordionPrimitive.AccordionTriggerProps & React.RefAttributes<HTMLButtonElement>, "ref"> & React.RefAttributes<HTMLButtonElement>>;
-export declare const AccordionContent: React.ForwardRefExoticComponent<Omit<AccordionPrimitive.AccordionContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export declare const Accordion: React.ForwardRefExoticComponent<(Omit<AccordionPrimitive.AccordionSingleProps & React.RefAttributes<HTMLDivElement>, "ref"> | Omit<AccordionPrimitive.AccordionMultipleProps & React.RefAttributes<HTMLDivElement>, "ref">) & React.RefAttributes<HTMLDivElement>> & {
+    Item: React.ForwardRefExoticComponent<Omit<AccordionPrimitive.AccordionItemProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+    Header: React.ForwardRefExoticComponent<Omit<AccordionPrimitive.AccordionHeaderProps & React.RefAttributes<HTMLHeadingElement>, "ref"> & React.RefAttributes<HTMLHeadingElement>>;
+    Trigger: React.ForwardRefExoticComponent<Omit<AccordionPrimitive.AccordionTriggerProps & React.RefAttributes<HTMLButtonElement>, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+    Content: React.ForwardRefExoticComponent<Omit<AccordionPrimitive.AccordionContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+};

package/dist/Accordion.js

@@ -1,23 +1,29 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import * as React from 'react';
 import * as AccordionPrimitive from '@radix-ui/react-accordion';
-export const Accordion = React.forwardRef((props, ref) => {
+const AccordionRoot = React.forwardRef((props, ref) => {
     return _jsx(AccordionPrimitive.Root, { ref: ref, ...props });
 });
-Accordion.displayName = 'Accordion';
-export const AccordionItem = React.forwardRef((props, ref) => {
+AccordionRoot.displayName = 'Accordion';
+const AccordionItem = React.forwardRef((props, ref) => {
     return _jsx(AccordionPrimitive.Item, { ref: ref, ...props });
 });
 AccordionItem.displayName = 'AccordionItem';
-export const AccordionHeader = React.forwardRef((props, ref) => {
+const AccordionHeader = React.forwardRef((props, ref) => {
     return _jsx(AccordionPrimitive.Header, { ref: ref, ...props });
 });
 AccordionHeader.displayName = 'AccordionHeader';
-export const AccordionTrigger = React.forwardRef((props, ref) => {
+const AccordionTrigger = React.forwardRef((props, ref) => {
     return _jsx(AccordionPrimitive.Trigger, { ref: ref, ...props });
 });
 AccordionTrigger.displayName = 'AccordionTrigger';
-export const AccordionContent = React.forwardRef((props, ref) => {
+const AccordionContent = React.forwardRef((props, ref) => {
     return _jsx(AccordionPrimitive.Content, { ref: ref, ...props });
 });
 AccordionContent.displayName = 'AccordionContent';
+export const Accordion = Object.assign(AccordionRoot, {
+    Item: AccordionItem,
+    Header: AccordionHeader,
+    Trigger: AccordionTrigger,
+    Content: AccordionContent,
+});

package/dist/AlertDialog.d.ts

@@ -0,0 +1,18 @@
+import * as React from 'react';
+import * as AlertDialogPrimitive from '@radix-ui/react-alert-dialog';
+export declare const AlertDialog: {
+    (props: AlertDialogPrimitive.AlertDialogProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+} & {
+    Trigger: React.ForwardRefExoticComponent<Omit<AlertDialogPrimitive.AlertDialogTriggerProps & React.RefAttributes<HTMLButtonElement>, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+    Portal: {
+        (props: AlertDialogPrimitive.AlertDialogPortalProps): import("react/jsx-runtime").JSX.Element;
+        displayName: string;
+    };
+    Overlay: React.ForwardRefExoticComponent<Omit<AlertDialogPrimitive.AlertDialogOverlayProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+    Content: React.ForwardRefExoticComponent<Omit<AlertDialogPrimitive.AlertDialogContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+    Title: React.ForwardRefExoticComponent<Omit<AlertDialogPrimitive.AlertDialogTitleProps & React.RefAttributes<HTMLHeadingElement>, "ref"> & React.RefAttributes<HTMLHeadingElement>>;
+    Description: React.ForwardRefExoticComponent<Omit<AlertDialogPrimitive.AlertDialogDescriptionProps & React.RefAttributes<HTMLParagraphElement>, "ref"> & React.RefAttributes<HTMLParagraphElement>>;
+    Action: React.ForwardRefExoticComponent<Omit<AlertDialogPrimitive.AlertDialogActionProps & React.RefAttributes<HTMLButtonElement>, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+    Cancel: React.ForwardRefExoticComponent<Omit<AlertDialogPrimitive.AlertDialogCancelProps & React.RefAttributes<HTMLButtonElement>, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+};

package/dist/AlertDialog.js

@@ -0,0 +1,49 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as React from 'react';
+import * as AlertDialogPrimitive from '@radix-ui/react-alert-dialog';
+const AlertDialogRoot = (props) => {
+    return _jsx(AlertDialogPrimitive.Root, { ...props });
+};
+AlertDialogRoot.displayName = 'AlertDialog';
+const AlertDialogTrigger = React.forwardRef((props, ref) => {
+    return _jsx(AlertDialogPrimitive.Trigger, { ref: ref, ...props });
+});
+AlertDialogTrigger.displayName = 'AlertDialogTrigger';
+const AlertDialogPortal = (props) => {
+    return _jsx(AlertDialogPrimitive.Portal, { ...props });
+};
+AlertDialogPortal.displayName = 'AlertDialogPortal';
+const AlertDialogOverlay = React.forwardRef((props, ref) => {
+    return _jsx(AlertDialogPrimitive.Overlay, { ref: ref, ...props });
+});
+AlertDialogOverlay.displayName = 'AlertDialogOverlay';
+const AlertDialogContent = React.forwardRef((props, ref) => {
+    return _jsx(AlertDialogPrimitive.Content, { ref: ref, ...props });
+});
+AlertDialogContent.displayName = 'AlertDialogContent';
+const AlertDialogTitle = React.forwardRef((props, ref) => {
+    return _jsx(AlertDialogPrimitive.Title, { ref: ref, ...props });
+});
+AlertDialogTitle.displayName = 'AlertDialogTitle';
+const AlertDialogDescription = React.forwardRef((props, ref) => {
+    return _jsx(AlertDialogPrimitive.Description, { ref: ref, ...props });
+});
+AlertDialogDescription.displayName = 'AlertDialogDescription';
+const AlertDialogAction = React.forwardRef((props, ref) => {
+    return _jsx(AlertDialogPrimitive.Action, { ref: ref, ...props });
+});
+AlertDialogAction.displayName = 'AlertDialogAction';
+const AlertDialogCancel = React.forwardRef((props, ref) => {
+    return _jsx(AlertDialogPrimitive.Cancel, { ref: ref, ...props });
+});
+AlertDialogCancel.displayName = 'AlertDialogCancel';
+export const AlertDialog = Object.assign(AlertDialogRoot, {
+    Trigger: AlertDialogTrigger,
+    Portal: AlertDialogPortal,
+    Overlay: AlertDialogOverlay,
+    Content: AlertDialogContent,
+    Title: AlertDialogTitle,
+    Description: AlertDialogDescription,
+    Action: AlertDialogAction,
+    Cancel: AlertDialogCancel,
+});

package/dist/Checkbox.d.ts

@@ -0,0 +1,5 @@
+import * as React from 'react';
+import * as CheckboxPrimitive from '@radix-ui/react-checkbox';
+export declare const Checkbox: React.ForwardRefExoticComponent<Omit<CheckboxPrimitive.CheckboxProps & React.RefAttributes<HTMLButtonElement>, "ref"> & React.RefAttributes<HTMLButtonElement>> & {
+    Indicator: React.ForwardRefExoticComponent<Omit<CheckboxPrimitive.CheckboxIndicatorProps & React.RefAttributes<HTMLSpanElement>, "ref"> & React.RefAttributes<HTMLSpanElement>>;
+};

package/dist/Checkbox.js

@@ -0,0 +1,14 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as React from 'react';
+import * as CheckboxPrimitive from '@radix-ui/react-checkbox';
+const CheckboxRoot = React.forwardRef((props, ref) => {
+    return _jsx(CheckboxPrimitive.Root, { ref: ref, ...props });
+});
+CheckboxRoot.displayName = 'Checkbox';
+const CheckboxIndicator = React.forwardRef((props, ref) => {
+    return _jsx(CheckboxPrimitive.Indicator, { ref: ref, ...props });
+});
+CheckboxIndicator.displayName = 'CheckboxIndicator';
+export const Checkbox = Object.assign(CheckboxRoot, {
+    Indicator: CheckboxIndicator,
+});

package/dist/Collapsible.d.ts

@@ -1,5 +1,6 @@
 import * as React from 'react';
 import * as CollapsiblePrimitive from '@radix-ui/react-collapsible';
-export declare const Collapsible: React.ForwardRefExoticComponent<Omit<CollapsiblePrimitive.CollapsibleProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
-export declare const CollapsibleTrigger: React.ForwardRefExoticComponent<Omit<CollapsiblePrimitive.CollapsibleTriggerProps & React.RefAttributes<HTMLButtonElement>, "ref"> & React.RefAttributes<HTMLButtonElement>>;
-export declare const CollapsibleContent: React.ForwardRefExoticComponent<Omit<CollapsiblePrimitive.CollapsibleContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export declare const Collapsible: React.ForwardRefExoticComponent<Omit<CollapsiblePrimitive.CollapsibleProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>> & {
+    Trigger: React.ForwardRefExoticComponent<Omit<CollapsiblePrimitive.CollapsibleTriggerProps & React.RefAttributes<HTMLButtonElement>, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+    Content: React.ForwardRefExoticComponent<Omit<CollapsiblePrimitive.CollapsibleContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+};

package/dist/Collapsible.js

@@ -1,15 +1,19 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import * as React from 'react';
 import * as CollapsiblePrimitive from '@radix-ui/react-collapsible';
-export const Collapsible = React.forwardRef((props, ref) => {
+const CollapsibleRoot = React.forwardRef((props, ref) => {
     return _jsx(CollapsiblePrimitive.Root, { ref: ref, ...props });
 });
-Collapsible.displayName = 'Collapsible';
-export const CollapsibleTrigger = React.forwardRef((props, ref) => {
+CollapsibleRoot.displayName = 'Collapsible';
+const CollapsibleTrigger = React.forwardRef((props, ref) => {
     return _jsx(CollapsiblePrimitive.Trigger, { ref: ref, ...props });
 });
 CollapsibleTrigger.displayName = 'CollapsibleTrigger';
-export const CollapsibleContent = React.forwardRef((props, ref) => {
+const CollapsibleContent = React.forwardRef((props, ref) => {
     return _jsx(CollapsiblePrimitive.Content, { ref: ref, ...props });
 });
 CollapsibleContent.displayName = 'CollapsibleContent';
+export const Collapsible = Object.assign(CollapsibleRoot, {
+    Trigger: CollapsibleTrigger,
+    Content: CollapsibleContent,
+});

package/dist/ContextMenu.d.ts

@@ -0,0 +1,31 @@
+import * as React from 'react';
+import type { StyleName } from '@plumeria/core';
+import * as ContextMenuPrimitive from '@radix-ui/react-context-menu';
+export declare const ContextMenu: {
+    (props: ContextMenuPrimitive.ContextMenuProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+} & {
+    Trigger: React.ForwardRefExoticComponent<Omit<ContextMenuPrimitive.ContextMenuTriggerProps & React.RefAttributes<HTMLSpanElement>, "ref"> & React.RefAttributes<HTMLSpanElement>>;
+    Portal: {
+        (props: ContextMenuPrimitive.ContextMenuPortalProps): import("react/jsx-runtime").JSX.Element;
+        displayName: string;
+    };
+    Content: React.ForwardRefExoticComponent<Omit<ContextMenuPrimitive.ContextMenuContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+    Group: React.ForwardRefExoticComponent<Omit<ContextMenuPrimitive.ContextMenuGroupProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+    Label: React.ForwardRefExoticComponent<Omit<ContextMenuPrimitive.ContextMenuLabelProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+    Item: React.ForwardRefExoticComponent<Omit<ContextMenuPrimitive.ContextMenuItemProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+    CheckboxItem: React.ForwardRefExoticComponent<Omit<ContextMenuPrimitive.ContextMenuCheckboxItemProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+    RadioGroup: React.ForwardRefExoticComponent<Omit<ContextMenuPrimitive.ContextMenuRadioGroupProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+    RadioItem: React.ForwardRefExoticComponent<Omit<ContextMenuPrimitive.ContextMenuRadioItemProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+    ItemIndicator: React.ForwardRefExoticComponent<Omit<ContextMenuPrimitive.ContextMenuItemIndicatorProps & React.RefAttributes<HTMLSpanElement>, "ref"> & React.RefAttributes<HTMLSpanElement>>;
+    Separator: React.ForwardRefExoticComponent<Omit<ContextMenuPrimitive.ContextMenuSeparatorProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+    Arrow: React.ForwardRefExoticComponent<Omit<ContextMenuPrimitive.ContextMenuArrowProps & React.RefAttributes<SVGSVGElement>, "ref"> & {
+        styleName?: StyleName;
+    } & React.RefAttributes<SVGSVGElement>>;
+    Sub: {
+        (props: ContextMenuPrimitive.ContextMenuSubProps): import("react/jsx-runtime").JSX.Element;
+        displayName: string;
+    };
+    SubTrigger: React.ForwardRefExoticComponent<Omit<ContextMenuPrimitive.ContextMenuSubTriggerProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+    SubContent: React.ForwardRefExoticComponent<Omit<ContextMenuPrimitive.ContextMenuSubContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+};

package/dist/ContextMenu.js

@@ -0,0 +1,84 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as React from 'react';
+import * as ContextMenuPrimitive from '@radix-ui/react-context-menu';
+const ContextMenuRoot = (props) => {
+    return _jsx(ContextMenuPrimitive.Root, { ...props });
+};
+ContextMenuRoot.displayName = 'ContextMenu';
+const ContextMenuTrigger = React.forwardRef((props, ref) => {
+    return _jsx(ContextMenuPrimitive.Trigger, { ref: ref, ...props });
+});
+ContextMenuTrigger.displayName = 'ContextMenuTrigger';
+const ContextMenuPortal = (props) => {
+    return _jsx(ContextMenuPrimitive.Portal, { ...props });
+};
+ContextMenuPortal.displayName = 'ContextMenuPortal';
+const ContextMenuContent = React.forwardRef((props, ref) => {
+    return _jsx(ContextMenuPrimitive.Content, { ref: ref, ...props });
+});
+ContextMenuContent.displayName = 'ContextMenuContent';
+const ContextMenuGroup = React.forwardRef((props, ref) => {
+    return _jsx(ContextMenuPrimitive.Group, { ref: ref, ...props });
+});
+ContextMenuGroup.displayName = 'ContextMenuGroup';
+const ContextMenuLabel = React.forwardRef((props, ref) => {
+    return _jsx(ContextMenuPrimitive.Label, { ref: ref, ...props });
+});
+ContextMenuLabel.displayName = 'ContextMenuLabel';
+const ContextMenuItem = React.forwardRef((props, ref) => {
+    return _jsx(ContextMenuPrimitive.Item, { ref: ref, ...props });
+});
+ContextMenuItem.displayName = 'ContextMenuItem';
+const ContextMenuCheckboxItem = React.forwardRef((props, ref) => {
+    return _jsx(ContextMenuPrimitive.CheckboxItem, { ref: ref, ...props });
+});
+ContextMenuCheckboxItem.displayName = 'ContextMenuCheckboxItem';
+const ContextMenuRadioGroup = React.forwardRef((props, ref) => {
+    return _jsx(ContextMenuPrimitive.RadioGroup, { ref: ref, ...props });
+});
+ContextMenuRadioGroup.displayName = 'ContextMenuRadioGroup';
+const ContextMenuRadioItem = React.forwardRef((props, ref) => {
+    return _jsx(ContextMenuPrimitive.RadioItem, { ref: ref, ...props });
+});
+ContextMenuRadioItem.displayName = 'ContextMenuRadioItem';
+const ContextMenuItemIndicator = React.forwardRef((props, ref) => {
+    return _jsx(ContextMenuPrimitive.ItemIndicator, { ref: ref, ...props });
+});
+ContextMenuItemIndicator.displayName = 'ContextMenuItemIndicator';
+const ContextMenuSeparator = React.forwardRef((props, ref) => {
+    return _jsx(ContextMenuPrimitive.Separator, { ref: ref, ...props });
+});
+ContextMenuSeparator.displayName = 'ContextMenuSeparator';
+const ContextMenuArrow = React.forwardRef((props, ref) => {
+    return _jsx(ContextMenuPrimitive.Arrow, { ref: ref, ...props });
+});
+ContextMenuArrow.displayName = 'ContextMenuArrow';
+const ContextMenuSub = (props) => {
+    return _jsx(ContextMenuPrimitive.Sub, { ...props });
+};
+ContextMenuSub.displayName = 'ContextMenuSub';
+const ContextMenuSubTrigger = React.forwardRef((props, ref) => {
+    return _jsx(ContextMenuPrimitive.SubTrigger, { ref: ref, ...props });
+});
+ContextMenuSubTrigger.displayName = 'ContextMenuSubTrigger';
+const ContextMenuSubContent = React.forwardRef((props, ref) => {
+    return _jsx(ContextMenuPrimitive.SubContent, { ref: ref, ...props });
+});
+ContextMenuSubContent.displayName = 'ContextMenuSubContent';
+export const ContextMenu = Object.assign(ContextMenuRoot, {
+    Trigger: ContextMenuTrigger,
+    Portal: ContextMenuPortal,
+    Content: ContextMenuContent,
+    Group: ContextMenuGroup,
+    Label: ContextMenuLabel,
+    Item: ContextMenuItem,
+    CheckboxItem: ContextMenuCheckboxItem,
+    RadioGroup: ContextMenuRadioGroup,
+    RadioItem: ContextMenuRadioItem,
+    ItemIndicator: ContextMenuItemIndicator,
+    Separator: ContextMenuSeparator,
+    Arrow: ContextMenuArrow,
+    Sub: ContextMenuSub,
+    SubTrigger: ContextMenuSubTrigger,
+    SubContent: ContextMenuSubContent,
+});

package/dist/Dialog.d.ts

@@ -3,14 +3,15 @@ import * as DialogPrimitive from '@radix-ui/react-dialog';
 export declare const Dialog: {
     (props: DialogPrimitive.DialogProps): import("react/jsx-runtime").JSX.Element;
     displayName: string;
+} & {
+    Trigger: React.ForwardRefExoticComponent<Omit<DialogPrimitive.DialogTriggerProps & React.RefAttributes<HTMLButtonElement>, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+    Portal: {
+        (props: DialogPrimitive.DialogPortalProps): import("react/jsx-runtime").JSX.Element;
+        displayName: string;
+    };
+    Overlay: React.ForwardRefExoticComponent<Omit<DialogPrimitive.DialogOverlayProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+    Content: React.ForwardRefExoticComponent<Omit<DialogPrimitive.DialogContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+    Title: React.ForwardRefExoticComponent<Omit<DialogPrimitive.DialogTitleProps & React.RefAttributes<HTMLHeadingElement>, "ref"> & React.RefAttributes<HTMLHeadingElement>>;
+    Description: React.ForwardRefExoticComponent<Omit<DialogPrimitive.DialogDescriptionProps & React.RefAttributes<HTMLParagraphElement>, "ref"> & React.RefAttributes<HTMLParagraphElement>>;
+    Close: React.ForwardRefExoticComponent<Omit<DialogPrimitive.DialogCloseProps & React.RefAttributes<HTMLButtonElement>, "ref"> & React.RefAttributes<HTMLButtonElement>>;
 };
-export declare const DialogTrigger: React.ForwardRefExoticComponent<Omit<DialogPrimitive.DialogTriggerProps & React.RefAttributes<HTMLButtonElement>, "ref"> & React.RefAttributes<HTMLButtonElement>>;
-export declare const DialogPortal: {
-    (props: DialogPrimitive.DialogPortalProps): import("react/jsx-runtime").JSX.Element;
-    displayName: string;
-};
-export declare const DialogOverlay: React.ForwardRefExoticComponent<Omit<DialogPrimitive.DialogOverlayProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
-export declare const DialogContent: React.ForwardRefExoticComponent<Omit<DialogPrimitive.DialogContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
-export declare const DialogTitle: React.ForwardRefExoticComponent<Omit<DialogPrimitive.DialogTitleProps & React.RefAttributes<HTMLHeadingElement>, "ref"> & React.RefAttributes<HTMLHeadingElement>>;
-export declare const DialogDescription: React.ForwardRefExoticComponent<Omit<DialogPrimitive.DialogDescriptionProps & React.RefAttributes<HTMLParagraphElement>, "ref"> & React.RefAttributes<HTMLParagraphElement>>;
-export declare const DialogClose: React.ForwardRefExoticComponent<Omit<DialogPrimitive.DialogCloseProps & React.RefAttributes<HTMLButtonElement>, "ref"> & React.RefAttributes<HTMLButtonElement>>;

package/dist/Dialog.js

@@ -1,35 +1,44 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import * as React from 'react';
 import * as DialogPrimitive from '@radix-ui/react-dialog';
-export const Dialog = (props) => {
+const DialogRoot = (props) => {
     return _jsx(DialogPrimitive.Root, { ...props });
 };
-Dialog.displayName = 'Dialog';
-export const DialogTrigger = React.forwardRef((props, ref) => {
+DialogRoot.displayName = 'Dialog';
+const DialogTrigger = React.forwardRef((props, ref) => {
     return _jsx(DialogPrimitive.Trigger, { ref: ref, ...props });
 });
 DialogTrigger.displayName = 'DialogTrigger';
-export const DialogPortal = (props) => {
+const DialogPortal = (props) => {
     return _jsx(DialogPrimitive.Portal, { ...props });
 };
 DialogPortal.displayName = 'DialogPortal';
-export const DialogOverlay = React.forwardRef((props, ref) => {
+const DialogOverlay = React.forwardRef((props, ref) => {
     return _jsx(DialogPrimitive.Overlay, { ref: ref, ...props });
 });
 DialogOverlay.displayName = 'DialogOverlay';
-export const DialogContent = React.forwardRef((props, ref) => {
+const DialogContent = React.forwardRef((props, ref) => {
     return _jsx(DialogPrimitive.Content, { ref: ref, ...props });
 });
 DialogContent.displayName = 'DialogContent';
-export const DialogTitle = React.forwardRef((props, ref) => {
+const DialogTitle = React.forwardRef((props, ref) => {
     return _jsx(DialogPrimitive.Title, { ref: ref, ...props });
 });
 DialogTitle.displayName = 'DialogTitle';
-export const DialogDescription = React.forwardRef((props, ref) => {
+const DialogDescription = React.forwardRef((props, ref) => {
     return _jsx(DialogPrimitive.Description, { ref: ref, ...props });
 });
 DialogDescription.displayName = 'DialogDescription';
-export const DialogClose = React.forwardRef((props, ref) => {
+const DialogClose = React.forwardRef((props, ref) => {
     return _jsx(DialogPrimitive.Close, { ref: ref, ...props });
 });
 DialogClose.displayName = 'DialogClose';
+export const Dialog = Object.assign(DialogRoot, {
+    Trigger: DialogTrigger,
+    Portal: DialogPortal,
+    Overlay: DialogOverlay,
+    Content: DialogContent,
+    Title: DialogTitle,
+    Description: DialogDescription,
+    Close: DialogClose,
+});

package/dist/DropdownMenu.d.ts

@@ -0,0 +1,31 @@
+import * as React from 'react';
+import type { StyleName } from '@plumeria/core';
+import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';
+export declare const DropdownMenu: {
+    (props: DropdownMenuPrimitive.DropdownMenuProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+} & {
+    Trigger: React.ForwardRefExoticComponent<Omit<DropdownMenuPrimitive.DropdownMenuTriggerProps & React.RefAttributes<HTMLButtonElement>, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+    Portal: {
+        (props: DropdownMenuPrimitive.DropdownMenuPortalProps): import("react/jsx-runtime").JSX.Element;
+        displayName: string;
+    };
+    Content: React.ForwardRefExoticComponent<Omit<DropdownMenuPrimitive.DropdownMenuContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+    Group: React.ForwardRefExoticComponent<Omit<DropdownMenuPrimitive.DropdownMenuGroupProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+    Label: React.ForwardRefExoticComponent<Omit<DropdownMenuPrimitive.DropdownMenuLabelProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+    Item: React.ForwardRefExoticComponent<Omit<DropdownMenuPrimitive.DropdownMenuItemProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+    CheckboxItem: React.ForwardRefExoticComponent<Omit<DropdownMenuPrimitive.DropdownMenuCheckboxItemProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+    RadioGroup: React.ForwardRefExoticComponent<Omit<DropdownMenuPrimitive.DropdownMenuRadioGroupProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+    RadioItem: React.ForwardRefExoticComponent<Omit<DropdownMenuPrimitive.DropdownMenuRadioItemProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+    ItemIndicator: React.ForwardRefExoticComponent<Omit<DropdownMenuPrimitive.DropdownMenuItemIndicatorProps & React.RefAttributes<HTMLSpanElement>, "ref"> & React.RefAttributes<HTMLSpanElement>>;
+    Separator: React.ForwardRefExoticComponent<Omit<DropdownMenuPrimitive.DropdownMenuSeparatorProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+    Arrow: React.ForwardRefExoticComponent<Omit<DropdownMenuPrimitive.DropdownMenuArrowProps & React.RefAttributes<SVGSVGElement>, "ref"> & {
+        styleName?: StyleName;
+    } & React.RefAttributes<SVGSVGElement>>;
+    Sub: {
+        (props: DropdownMenuPrimitive.DropdownMenuSubProps): import("react/jsx-runtime").JSX.Element;
+        displayName: string;
+    };
+    SubTrigger: React.ForwardRefExoticComponent<Omit<DropdownMenuPrimitive.DropdownMenuSubTriggerProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+    SubContent: React.ForwardRefExoticComponent<Omit<DropdownMenuPrimitive.DropdownMenuSubContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+};