@neynar/ui 0.4.0 → 1.0.0

package/src/components/ui/dropdown-menu.tsx

@@ -1,824 +1,297 @@
 import * as React from "react";
-import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu";
-import { CheckIcon, ChevronRightIcon, CircleIcon } from "lucide-react";
+import { Menu as MenuPrimitive } from "@base-ui/react/menu";
 
 import { cn } from "@/lib/utils";
+import { menuItemVariants, type MenuItemVariant } from "@/lib/variants";
+import { ChevronRightIcon, CheckIcon } from "lucide-react";
 
-// ============================================================================
-// Documentation Props Types (Internal - Not exported)
-// ============================================================================
+type DropdownMenuProps = MenuPrimitive.Root.Props;
 
 /**
- * Props for DropdownMenu (Documentation only - NOT used in component implementation)
- * These types are for documentation generation and should not replace Radix inferred types
+ * Root component for dropdown menus. Manages open/close state and keyboard navigation.
+ * Use `open` and `onOpenChange` for controlled state, or `defaultOpen` for uncontrolled.
  */
-// eslint-disable-next-line unused-imports/no-unused-vars
-type DropdownMenuDocsProps = {
-  /** Whether the dropdown is initially open (uncontrolled mode) @default false */
-  defaultOpen?: boolean;
-  /** Whether the dropdown is open (controlled mode) */
-  open?: boolean;
-  /** Callback fired when the open state changes */
-  onOpenChange?: (open: boolean) => void;
-  /** Whether the dropdown should be modal (blocks interaction with outside elements) @default true */
-  modal?: boolean;
-  /** The reading direction of the dropdown menu @default "ltr" */
-  dir?: "ltr" | "rtl";
-  /** Child elements - typically DropdownMenuTrigger and DropdownMenuContent */
-  children?: React.ReactNode;
-} & React.ComponentProps<typeof DropdownMenuPrimitive.Root>;
-
-/** Props for DropdownMenuTrigger (Documentation only) */
-// eslint-disable-next-line unused-imports/no-unused-vars
-type DropdownMenuTriggerDocsProps = {
-  /** Merge props onto the immediate child instead of rendering a wrapper element @default false */
-  asChild?: boolean;
-  /** Child element that will trigger the dropdown menu */
-  children?: React.ReactNode;
-} & React.ComponentProps<typeof DropdownMenuPrimitive.Trigger>;
-
-/** Props for DropdownMenuContent (Documentation only) */
-// eslint-disable-next-line unused-imports/no-unused-vars
-type DropdownMenuContentDocsProps = {
-  /** Merge props onto the immediate child instead of rendering a wrapper element @default false */
-  asChild?: boolean;
-  /** When true, keyboard navigation will loop from last to first item and vice versa @default false */
-  loop?: boolean;
-  /** The preferred side of the trigger to render against @default "bottom" */
-  side?: "top" | "right" | "bottom" | "left";
-  /** Distance in pixels from the trigger @default 4 */
-  sideOffset?: number;
-  /** The preferred alignment against the trigger @default "center" */
-  align?: "start" | "center" | "end";
-  /** Distance in pixels from the align point @default 0 */
-  alignOffset?: number;
-  /** Whether to avoid collisions with viewport boundaries @default true */
-  avoidCollisions?: boolean;
-  /** Element positioning behavior relative to the viewport */
-  sticky?: "partial" | "always";
-  /** Whether to hide the content when the reference element is fully occluded @default false */
-  hideWhenDetached?: boolean;
-  /** CSS class name for custom styling */
-  className?: string;
-  /** Child menu items, labels, separators, and groups */
-  children?: React.ReactNode;
-} & React.ComponentProps<typeof DropdownMenuPrimitive.Content>;
-
-/** Props for DropdownMenuItem (Documentation only) */
-// eslint-disable-next-line unused-imports/no-unused-vars
-type DropdownMenuItemDocsProps = {
-  /** Whether the item is disabled and cannot be selected @default false */
-  disabled?: boolean;
-  /** Callback fired when the item is selected via click or keyboard */
-  onSelect?: (event: Event) => void;
-  /** Optional text value used for typeahead search functionality */
-  textValue?: string;
-  /** Whether to add extra left padding to align with items that have icons @default false */
-  inset?: boolean;
-  /** Visual variant of the menu item for semantic distinction @default "default" */
-  variant?: "default" | "destructive";
-  /** CSS class name for custom styling */
-  className?: string;
-  /** Item content - text, icons, or other React elements */
-  children?: React.ReactNode;
-} & React.ComponentProps<typeof DropdownMenuPrimitive.Item>;
-
-/** Props for DropdownMenuCheckboxItem (Documentation only) */
-// eslint-disable-next-line unused-imports/no-unused-vars
-type DropdownMenuCheckboxItemDocsProps = {
-  /** The checked state of the checkbox item */
-  checked?: boolean | "indeterminate";
-  /** Callback fired when the checked state changes */
-  onCheckedChange?: (checked: boolean) => void;
-  /** Whether the item is disabled and cannot be interacted with @default false */
-  disabled?: boolean;
-  /** Callback fired when the item is selected via click or keyboard */
-  onSelect?: (event: Event) => void;
-  /** Optional text value used for typeahead search functionality */
-  textValue?: string;
-  /** Whether to add extra left padding to align with items that have icons @default false */
-  inset?: boolean;
-  /** CSS class name for custom styling */
-  className?: string;
-  /** Item content - automatically includes checkbox indicator */
-  children?: React.ReactNode;
-} & React.ComponentProps<typeof DropdownMenuPrimitive.CheckboxItem>;
+function DropdownMenu({ ...props }: DropdownMenuProps) {
+  return <MenuPrimitive.Root data-slot="dropdown-menu" {...props} />;
+}
 
-/** Props for DropdownMenuRadioGroup (Documentation only) */
-// eslint-disable-next-line unused-imports/no-unused-vars
-type DropdownMenuRadioGroupDocsProps = {
-  /** The currently selected value in the radio group */
-  value?: string;
-  /** Callback fired when the selection changes to a different value */
-  onValueChange?: (value: string) => void;
-  /** Whether the entire radio group is disabled @default false */
-  disabled?: boolean;
-  /** Radio item children within the group */
-  children?: React.ReactNode;
-} & React.ComponentProps<typeof DropdownMenuPrimitive.RadioGroup>;
+type DropdownMenuPortalProps = MenuPrimitive.Portal.Props;
 
-/** Props for DropdownMenuRadioItem (Documentation only) */
-// eslint-disable-next-line unused-imports/no-unused-vars
-type DropdownMenuRadioItemDocsProps = {
-  /** The unique value this radio item represents */
-  value: string;
-  /** Whether the item is disabled and cannot be selected @default false */
-  disabled?: boolean;
-  /** Callback fired when the item is selected via click or keyboard */
-  onSelect?: (event: Event) => void;
-  /** Optional text value used for typeahead search functionality */
-  textValue?: string;
-  /** Whether to add extra left padding to align with items that have icons @default false */
-  inset?: boolean;
-  /** CSS class name for custom styling */
-  className?: string;
-  /** Item content - automatically includes radio indicator */
-  children?: React.ReactNode;
-} & React.ComponentProps<typeof DropdownMenuPrimitive.RadioItem>;
+/** Portal component for rendering dropdown menu content outside the DOM hierarchy. */
+function DropdownMenuPortal({ ...props }: DropdownMenuPortalProps) {
+  return <MenuPrimitive.Portal data-slot="dropdown-menu-portal" {...props} />;
+}
 
-// ============================================================================
-// Main Component
-// ============================================================================
+type DropdownMenuTriggerProps = MenuPrimitive.Trigger.Props;
 
-/**
- * A versatile dropdown menu component built on Radix UI primitives
- *
- * Dropdown menus display a list of actions or options that a user can choose from.
- * They're typically triggered by a button and appear as a floating panel with full
- * keyboard navigation support, submenus, and various interactive item types.
- *
- * Built on Radix UI's DropdownMenu primitive with enhanced styling and type safety.
- * Follows the WAI-ARIA Menu Button pattern for accessibility compliance.
- *
- * @param defaultOpen - Whether the dropdown is initially open (uncontrolled mode)
- * @param open - Whether the dropdown is open (controlled mode)
- * @param onOpenChange - Callback fired when the open state changes
- * @param modal - Whether the dropdown should be modal (blocks interaction with outside elements)
- * @param dir - The reading direction of the dropdown menu
- *
- * @example
- * ```tsx
- * // Basic dropdown menu
- * <DropdownMenu>
- *   <DropdownMenuTrigger asChild>
- *     <Button variant="outline">Options</Button>
- *   </DropdownMenuTrigger>
- *   <DropdownMenuContent>
- *     <DropdownMenuItem>Profile</DropdownMenuItem>
- *     <DropdownMenuItem>Settings</DropdownMenuItem>
- *     <DropdownMenuSeparator />
- *     <DropdownMenuItem>Logout</DropdownMenuItem>
- *   </DropdownMenuContent>
- * </DropdownMenu>
- * ```
- *
- * @example
- * ```tsx
- * // Controlled dropdown with alignment
- * const [open, setOpen] = useState(false);
- *
- * <DropdownMenu open={open} onOpenChange={setOpen}>
- *   <DropdownMenuTrigger asChild>
- *     <Button variant="ghost" size="icon">
- *       <MoreHorizontal />
- *     </Button>
- *   </DropdownMenuTrigger>
- *   <DropdownMenuContent align="end">
- *     <DropdownMenuItem>Edit</DropdownMenuItem>
- *     <DropdownMenuItem>Duplicate</DropdownMenuItem>
- *     <DropdownMenuSeparator />
- *     <DropdownMenuItem variant="destructive">Delete</DropdownMenuItem>
- *   </DropdownMenuContent>
- * </DropdownMenu>
- * ```
- *
- * @example
- * ```tsx
- * // Complex menu with checkboxes, radio groups, and submenus
- * const [showPanel, setShowPanel] = useState(true);
- * const [position, setPosition] = useState("top");
- *
- * <DropdownMenu>
- *   <DropdownMenuTrigger asChild>
- *     <Button>Advanced Menu</Button>
- *   </DropdownMenuTrigger>
- *   <DropdownMenuContent className="w-56">
- *     <DropdownMenuLabel>View Options</DropdownMenuLabel>
- *     <DropdownMenuSeparator />
- *     <DropdownMenuCheckboxItem checked={showPanel} onCheckedChange={setShowPanel}>
- *       Show Panel
- *     </DropdownMenuCheckboxItem>
- *     <DropdownMenuSeparator />
- *     <DropdownMenuRadioGroup value={position} onValueChange={setPosition}>
- *       <DropdownMenuRadioItem value="top">Top</DropdownMenuRadioItem>
- *       <DropdownMenuRadioItem value="bottom">Bottom</DropdownMenuRadioItem>
- *     </DropdownMenuRadioGroup>
- *     <DropdownMenuSeparator />
- *     <DropdownMenuSub>
- *       <DropdownMenuSubTrigger>Share</DropdownMenuSubTrigger>
- *       <DropdownMenuSubContent>
- *         <DropdownMenuItem>Email</DropdownMenuItem>
- *         <DropdownMenuItem>Copy Link</DropdownMenuItem>
- *       </DropdownMenuSubContent>
- *     </DropdownMenuSub>
- *   </DropdownMenuContent>
- * </DropdownMenu>
- * ```
- *
- * @accessibility
- * - Full keyboard navigation with arrow keys (Up/Down for navigation)
- * - Enter/Space to activate items
- * - Escape key closes the menu and restores focus to the trigger
- * - Home/End keys navigate to first/last item
- * - Type-ahead search to jump to items by first letter
- * - Left/Right arrow keys for submenu navigation
- * - Proper ARIA roles (menu, menuitem, menuitemcheckbox, menuitemradio)
- * - Focus management with focus trapping and restoration
- * - Screen reader announcements for state changes
- * - Supports roving tabindex for focus movement
- *
- * @see {@link ContextMenu} - For right-click context menus
- * @see {@link Popover} - For rich content overlays
- * @see {@link Select} - For single selection dropdowns
- * @see {@link https://www.radix-ui.com/primitives/docs/components/dropdown-menu} - Radix UI documentation
- * @see {@link https://ui.shadcn.com/docs/components/dropdown-menu} - shadcn/ui documentation
- * @since 1.0.0
- */
-function DropdownMenu({
-  ...props
-}: React.ComponentProps<typeof DropdownMenuPrimitive.Root>) {
-  return <DropdownMenuPrimitive.Root data-slot="dropdown-menu" {...props} />;
+/** Button that opens the dropdown menu. Use `render` prop to customize trigger element. */
+function DropdownMenuTrigger({ ...props }: DropdownMenuTriggerProps) {
+  return <MenuPrimitive.Trigger data-slot="dropdown-menu-trigger" {...props} />;
 }
 
+type DropdownMenuContentProps = MenuPrimitive.Popup.Props &
+  Pick<
+    MenuPrimitive.Positioner.Props,
+    "align" | "alignOffset" | "side" | "sideOffset"
+  >;
+
 /**
- * Portal component for rendering menu content in a different DOM location
- *
- * Renders dropdown content outside of the normal DOM hierarchy to avoid
- * z-index and overflow issues. Automatically used by DropdownMenuContent
- * but can be used explicitly for advanced positioning scenarios.
- *
- * @param container - Optional container element for portal rendering. If not provided, portals to document.body
- *
- * @example
- * ```tsx
- * <DropdownMenuPortal container={customContainer}>
- *   <DropdownMenuContent>
- *     <DropdownMenuItem>Item</DropdownMenuItem>
- *   </DropdownMenuContent>
- * </DropdownMenuPortal>
- * ```
- * @since 1.0.0
+ * Dropdown menu content container with automatic portal and positioning.
+ * Supports alignment, side positioning, and animated transitions.
  */
-function DropdownMenuPortal({
+function DropdownMenuContent({
+  align = "start",
+  alignOffset = 0,
+  side = "bottom",
+  sideOffset = 4,
+  className,
   ...props
-}: React.ComponentProps<typeof DropdownMenuPrimitive.Portal>) {
+}: DropdownMenuContentProps) {
   return (
-    <DropdownMenuPrimitive.Portal data-slot="dropdown-menu-portal" {...props} />
+    <MenuPrimitive.Portal>
+      <MenuPrimitive.Positioner
+        className="isolate z-50 outline-none"
+        align={align}
+        alignOffset={alignOffset}
+        side={side}
+        sideOffset={sideOffset}
+      >
+        <MenuPrimitive.Popup
+          data-slot="dropdown-menu-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-32 rounded-md p-1 shadow-md ring-1 duration-100 z-50 max-h-(--available-height) w-(--anchor-width) origin-(--transform-origin) overflow-x-hidden overflow-y-auto outline-none data-closed:overflow-hidden",
+            className,
+          )}
+          {...props}
+        />
+      </MenuPrimitive.Positioner>
+    </MenuPrimitive.Portal>
   );
 }
 
+type DropdownMenuGroupProps = MenuPrimitive.Group.Props;
+
+/** Group container for related menu items. Use with DropdownMenuLabel for labeled sections. */
+function DropdownMenuGroup({ ...props }: DropdownMenuGroupProps) {
+  return <MenuPrimitive.Group data-slot="dropdown-menu-group" {...props} />;
+}
+
+type DropdownMenuLabelProps = MenuPrimitive.GroupLabel.Props & {
+  /** Add extra left padding to align with items that have icons. @default false */
+  inset?: boolean;
+};
+
 /**
- * The element that triggers the dropdown menu
- *
- * Renders the interactive element that opens and closes the dropdown menu.
- * Typically wraps a button or other interactive element using the asChild prop.
- * Automatically receives proper ARIA attributes and keyboard event handlers.
- *
- * @param asChild - Merge props onto the immediate child instead of rendering a wrapper element
- *
- * @example
- * ```tsx
- * // Basic trigger with button
- * <DropdownMenuTrigger asChild>
- *   <Button variant="outline">Open Menu</Button>
- * </DropdownMenuTrigger>
- * ```
- *
- * @example
- * ```tsx
- * // Icon button trigger
- * <DropdownMenuTrigger asChild>
- *   <Button variant="ghost" size="icon" aria-label="More options">
- *     <MoreVertical className="h-4 w-4" />
- *   </Button>
- * </DropdownMenuTrigger>
- * ```
- * @since 1.0.0
+ * Label for a group of menu items. Typically used inside DropdownMenuGroup.
  */
-function DropdownMenuTrigger({
+function DropdownMenuLabel({
+  className,
+  inset,
   ...props
-}: React.ComponentProps<typeof DropdownMenuPrimitive.Trigger>) {
+}: DropdownMenuLabelProps) {
   return (
-    <DropdownMenuPrimitive.Trigger
-      data-slot="dropdown-menu-trigger"
+    <MenuPrimitive.GroupLabel
+      data-slot="dropdown-menu-label"
+      data-inset={inset}
+      className={cn(
+        "text-muted-foreground px-2 py-1.5 text-xs font-medium data-[inset]:pl-8",
+        className,
+      )}
       {...props}
     />
   );
 }
 
+type DropdownMenuItemProps = MenuPrimitive.Item.Props & {
+  /** Add extra left padding to align with items that have icons. @default false */
+  inset?: boolean;
+  /** Visual variant for the menu item. @default "default" */
+  variant?: MenuItemVariant;
+};
+
 /**
- * The content container for dropdown menu items
- *
- * Contains all menu items and handles positioning relative to the trigger.
- * Automatically portals content to avoid z-index issues and includes sophisticated
- * collision detection to keep the menu visible within viewport boundaries.
- *
- * @param side - The preferred side of the trigger to render against
- * @param sideOffset - Distance in pixels from the trigger
- * @param align - The preferred alignment against the trigger
- * @param alignOffset - Distance in pixels from the align point
- * @param avoidCollisions - Whether to avoid collisions with viewport boundaries
- * @param loop - When true, keyboard navigation will loop from last to first item
- * @param sticky - Element positioning behavior relative to the viewport
- * @param hideWhenDetached - Whether to hide the content when the reference element is fully occluded
- *
- * @example
- * ```tsx
- * // Basic content with default positioning
- * <DropdownMenuContent>
- *   <DropdownMenuItem>Profile</DropdownMenuItem>
- *   <DropdownMenuItem>Settings</DropdownMenuItem>
- * </DropdownMenuContent>
- * ```
- *
- * @example
- * ```tsx
- * // Content with custom alignment and offset
- * <DropdownMenuContent align="end" sideOffset={8}>
- *   <DropdownMenuItem>Edit</DropdownMenuItem>
- *   <DropdownMenuItem variant="destructive">Delete</DropdownMenuItem>
- * </DropdownMenuContent>
- * ```
- *
- * @example
- * ```tsx
- * // Content with collision avoidance disabled
- * <DropdownMenuContent avoidCollisions={false} side="top">
- *   <DropdownMenuItem>Always above trigger</DropdownMenuItem>
- * </DropdownMenuContent>
- * ```
- * @since 1.0.0
+ * Individual menu item. Supports variants (default, destructive, success, warning, info)
+ * and inset padding for alignment.
  */
-function DropdownMenuContent({
+function DropdownMenuItem({
   className,
-  sideOffset = 4,
+  inset = false,
+  variant = "default",
   ...props
-}: React.ComponentProps<typeof DropdownMenuPrimitive.Content> & {
-  className?: string;
-}) {
+}: DropdownMenuItemProps) {
   return (
-    <DropdownMenuPrimitive.Portal>
-      <DropdownMenuPrimitive.Content
-        data-slot="dropdown-menu-content"
-        sideOffset={sideOffset}
-        className={cn(
-          "bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=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 z-50 max-h-(--radix-dropdown-menu-content-available-height) min-w-[8rem] origin-(--radix-dropdown-menu-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border p-1 shadow-md",
-          className,
-        )}
-        {...props}
-      />
-    </DropdownMenuPrimitive.Portal>
+    <MenuPrimitive.Item
+      data-slot="dropdown-menu-item"
+      className={cn(
+        menuItemVariants({ variant, inset }),
+        "group/dropdown-menu-item",
+        className,
+      )}
+      {...props}
+    />
   );
 }
 
+type DropdownMenuSubProps = MenuPrimitive.SubmenuRoot.Props;
+
+/** Root component for nested submenus. Wrap DropdownMenuSubTrigger and DropdownMenuSubContent. */
+function DropdownMenuSub({ ...props }: DropdownMenuSubProps) {
+  return <MenuPrimitive.SubmenuRoot data-slot="dropdown-menu-sub" {...props} />;
+}
+
+type DropdownMenuSubTriggerProps = MenuPrimitive.SubmenuTrigger.Props & {
+  /** Add extra left padding to align with items that have icons. @default false */
+  inset?: boolean;
+};
+
 /**
- * Groups related dropdown menu items together
- *
- * Used to create logical groupings of menu items, typically separated by
- * DropdownMenuSeparator components. Helps with semantic organization and
- * improves accessibility by providing proper group semantics to screen readers.
- *
- * @param asChild - Merge props onto the immediate child instead of rendering a wrapper element
- *
- * @example
- * ```tsx
- * <DropdownMenuContent>
- *   <DropdownMenuGroup>
- *     <DropdownMenuItem>Profile</DropdownMenuItem>
- *     <DropdownMenuItem>Account Settings</DropdownMenuItem>
- *   </DropdownMenuGroup>
- *   <DropdownMenuSeparator />
- *   <DropdownMenuGroup>
- *     <DropdownMenuItem>Help</DropdownMenuItem>
- *     <DropdownMenuItem>Support</DropdownMenuItem>
- *   </DropdownMenuGroup>
- * </DropdownMenuContent>
- * ```
- * @since 1.0.0
+ * Trigger button for opening a submenu. Automatically displays chevron icon on the right.
  */
-function DropdownMenuGroup({
+function DropdownMenuSubTrigger({
+  className,
+  inset,
+  children,
   ...props
-}: React.ComponentProps<typeof DropdownMenuPrimitive.Group>) {
+}: DropdownMenuSubTriggerProps) {
   return (
-    <DropdownMenuPrimitive.Group data-slot="dropdown-menu-group" {...props} />
+    <MenuPrimitive.SubmenuTrigger
+      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-2 rounded-sm px-2 py-1.5 text-sm [&_svg:not([class*='size-'])]:size-4 flex cursor-default items-center outline-hidden select-none data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0",
+        className,
+      )}
+      {...props}
+    >
+      {children}
+      <ChevronRightIcon className="ml-auto" />
+    </MenuPrimitive.SubmenuTrigger>
   );
 }
 
+type DropdownMenuSubContentProps = React.ComponentProps<
+  typeof DropdownMenuContent
+>;
+
 /**
- * A single interactive item in the dropdown menu
- *
- * Renders a clickable menu item with proper focus management and keyboard navigation.
- * Supports different visual variants for semantic meaning (e.g., destructive actions).
- * Includes built-in styling for icons, disabled states, and focus indicators.
- *
- * @param disabled - Whether the item is disabled and cannot be selected
- * @param onSelect - Callback fired when the item is selected via click or keyboard
- * @param textValue - Optional text value used for typeahead search functionality
- * @param inset - Whether to add extra left padding to align with items that have icons
- * @param variant - Visual variant of the menu item for semantic distinction
- *
- * @example
- * ```tsx
- * // Basic menu item with click handler
- * <DropdownMenuItem onSelect={() => console.log('Profile clicked')}>
- *   <User className="mr-2 h-4 w-4" />
- *   Profile
- * </DropdownMenuItem>
- * ```
- *
- * @example
- * ```tsx
- * // Destructive action item
- * <DropdownMenuItem variant="destructive" onSelect={handleDelete}>
- *   <Trash className="mr-2 h-4 w-4" />
- *   Delete Account
- * </DropdownMenuItem>
- * ```
- *
- * @example
- * ```tsx
- * // Disabled item
- * <DropdownMenuItem disabled>
- *   <Settings className="mr-2 h-4 w-4" />
- *   Settings (Coming Soon)
- * </DropdownMenuItem>
- * ```
- *
- * @example
- * ```tsx
- * // Item with keyboard shortcut
- * <DropdownMenuItem onSelect={handleSave}>
- *   Save Document
- *   <DropdownMenuShortcut>⌘S</DropdownMenuShortcut>
- * </DropdownMenuItem>
- * ```
- * @since 1.0.0
+ * Content container for submenu items. Automatically positioned to the side of the trigger.
  */
-function DropdownMenuItem({
+function DropdownMenuSubContent({
+  align = "start",
+  alignOffset = -3,
+  side = "right",
+  sideOffset = 0,
   className,
-  inset,
-  variant = "default",
   ...props
-}: React.ComponentProps<typeof DropdownMenuPrimitive.Item> & {
-  inset?: boolean;
-  variant?: "default" | "destructive";
-  className?: string;
-}) {
+}: DropdownMenuSubContentProps) {
   return (
-    <DropdownMenuPrimitive.Item
-      data-slot="dropdown-menu-item"
-      data-inset={inset}
-      data-variant={variant}
+    <DropdownMenuContent
+      data-slot="dropdown-menu-sub-content"
       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 [&_svg:not([class*='text-'])]:text-muted-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        "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-md p-1 shadow-lg ring-1 duration-100 w-auto",
         className,
       )}
+      align={align}
+      alignOffset={alignOffset}
+      side={side}
+      sideOffset={sideOffset}
       {...props}
     />
   );
 }
 
+type DropdownMenuCheckboxItemProps = MenuPrimitive.CheckboxItem.Props;
+
 /**
- * A checkable menu item with visual state indication
- *
- * Displays a checkbox that can be toggled on/off. The checked state is
- * visually indicated with a checkmark icon. Supports indeterminate state
- * for partial selections. Ideal for menu options that represent toggleable
- * settings, features, or multi-selection scenarios.
- *
- * @param checked - The checked state of the checkbox item (boolean or "indeterminate")
- * @param onCheckedChange - Callback fired when the checked state changes
- * @param disabled - Whether the item is disabled and cannot be interacted with
- * @param onSelect - Callback fired when the item is selected via click or keyboard
- * @param textValue - Optional text value used for typeahead search functionality
- * @param inset - Whether to add extra left padding to align with items that have icons
- *
- * @example
- * ```tsx
- * // Basic checkbox item with state
- * const [showSidebar, setShowSidebar] = useState(true);
- *
- * <DropdownMenuCheckboxItem
- *   checked={showSidebar}
- *   onCheckedChange={setShowSidebar}
- * >
- *   <Sidebar className="mr-2 h-4 w-4" />
- *   Show Sidebar
- * </DropdownMenuCheckboxItem>
- * ```
- *
- * @example
- * ```tsx
- * // Multiple checkbox items for feature toggles
- * const [features, setFeatures] = useState({
- *   notifications: true,
- *   autoSave: false,
- *   darkMode: true
- * });
- *
- * <DropdownMenuCheckboxItem
- *   checked={features.notifications}
- *   onCheckedChange={(checked) => setFeatures(prev => ({ ...prev, notifications: checked }))}
- * >
- *   Enable Notifications
- * </DropdownMenuCheckboxItem>
- * <DropdownMenuCheckboxItem
- *   checked={features.autoSave}
- *   onCheckedChange={(checked) => setFeatures(prev => ({ ...prev, autoSave: checked }))}
- * >
- *   Auto-save Changes
- * </DropdownMenuCheckboxItem>
- * ```
- *
- * @example
- * ```tsx
- * // Indeterminate state for partial selections
- * <DropdownMenuCheckboxItem
- *   checked="indeterminate"
- *   onCheckedChange={handleSelectAll}
- * >
- *   Select All Items (Some selected)
- * </DropdownMenuCheckboxItem>
- * ```
- * @since 1.0.0
+ * Menu item with checkbox. Use `checked` and `onCheckedChange` props for state management.
+ * Displays checkmark indicator when checked.
  */
 function DropdownMenuCheckboxItem({
   className,
   children,
   checked,
   ...props
-}: React.ComponentProps<typeof DropdownMenuPrimitive.CheckboxItem> & {
-  className?: string;
-}) {
+}: DropdownMenuCheckboxItemProps) {
   return (
-    <DropdownMenuPrimitive.CheckboxItem
+    <MenuPrimitive.CheckboxItem
       data-slot="dropdown-menu-checkbox-item"
       className={cn(
-        "focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        "focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground gap-2 rounded-sm py-1.5 pr-8 pl-2 text-sm [&_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="pointer-events-none absolute left-2 flex size-3.5 items-center justify-center">
-        <DropdownMenuPrimitive.ItemIndicator>
-          <CheckIcon className="size-4" />
-        </DropdownMenuPrimitive.ItemIndicator>
+      <span
+        className="pointer-events-none absolute right-2 flex items-center justify-center pointer-events-none"
+        data-slot="dropdown-menu-checkbox-item-indicator"
+      >
+        <MenuPrimitive.CheckboxItemIndicator>
+          <CheckIcon />
+        </MenuPrimitive.CheckboxItemIndicator>
       </span>
       {children}
-    </DropdownMenuPrimitive.CheckboxItem>
+    </MenuPrimitive.CheckboxItem>
   );
 }
 
+type DropdownMenuRadioGroupProps = MenuPrimitive.RadioGroup.Props;
+
 /**
- * Groups radio items for single selection
- *
- * Creates a group where only one radio item can be selected at a time.
- * Manages the selection state and ensures mutual exclusivity between options.
- * Use with DropdownMenuRadioItem components to create single-choice scenarios
- * like theme selection, sorting options, or view modes.
- *
- * @param value - The currently selected value in the radio group
- * @param onValueChange - Callback fired when the selection changes to a different value
- * @param disabled - Whether the entire radio group is disabled
- *
- * @example
- * ```tsx
- * // Theme selection with radio group
- * const [theme, setTheme] = useState("light");
- *
- * <DropdownMenuRadioGroup value={theme} onValueChange={setTheme}>
- *   <DropdownMenuRadioItem value="light">
- *     <Sun className="mr-2 h-4 w-4" />
- *     Light Theme
- *   </DropdownMenuRadioItem>
- *   <DropdownMenuRadioItem value="dark">
- *     <Moon className="mr-2 h-4 w-4" />
- *     Dark Theme
- *   </DropdownMenuRadioItem>
- *   <DropdownMenuRadioItem value="system">
- *     <Monitor className="mr-2 h-4 w-4" />
- *     System Theme
- *   </DropdownMenuRadioItem>
- * </DropdownMenuRadioGroup>
- * ```
- *
- * @example
- * ```tsx
- * // Sorting options
- * const [sortBy, setSortBy] = useState("name");
- *
- * <DropdownMenuRadioGroup value={sortBy} onValueChange={setSortBy}>
- *   <DropdownMenuRadioItem value="name">Sort by Name</DropdownMenuRadioItem>
- *   <DropdownMenuRadioItem value="date">Sort by Date</DropdownMenuRadioItem>
- *   <DropdownMenuRadioItem value="size">Sort by Size</DropdownMenuRadioItem>
- * </DropdownMenuRadioGroup>
- * ```
- * @since 1.0.0
+ * Container for radio items. Use `value` and `onValueChange` props for state management.
+ * Only one radio item can be selected at a time.
  */
-function DropdownMenuRadioGroup({
-  ...props
-}: React.ComponentProps<typeof DropdownMenuPrimitive.RadioGroup>) {
+function DropdownMenuRadioGroup({ ...props }: DropdownMenuRadioGroupProps) {
   return (
-    <DropdownMenuPrimitive.RadioGroup
+    <MenuPrimitive.RadioGroup
       data-slot="dropdown-menu-radio-group"
       {...props}
     />
   );
 }
 
+type DropdownMenuRadioItemProps = MenuPrimitive.RadioItem.Props;
+
 /**
- * A radio button menu item for single selection within a group
- *
- * Must be used within a DropdownMenuRadioGroup. Shows a filled circle
- * indicator when selected. Only one radio item can be selected per group,
- * ensuring mutually exclusive selection behavior.
- *
- * @param value - The unique value this radio item represents
- * @param disabled - Whether the item is disabled and cannot be selected
- * @param onSelect - Callback fired when the item is selected via click or keyboard
- * @param textValue - Optional text value used for typeahead search functionality
- * @param inset - Whether to add extra left padding to align with items that have icons
- *
- * @example
- * ```tsx
- * // Basic radio group for theme selection
- * <DropdownMenuRadioGroup value={selectedTheme} onValueChange={setSelectedTheme}>
- *   <DropdownMenuRadioItem value="light">
- *     <Sun className="mr-2 h-4 w-4" />
- *     Light Theme
- *   </DropdownMenuRadioItem>
- *   <DropdownMenuRadioItem value="dark">
- *     <Moon className="mr-2 h-4 w-4" />
- *     Dark Theme
- *   </DropdownMenuRadioItem>
- *   <DropdownMenuRadioItem value="system">
- *     <Monitor className="mr-2 h-4 w-4" />
- *     System Theme
- *   </DropdownMenuRadioItem>
- * </DropdownMenuRadioGroup>
- * ```
- *
- * @example
- * ```tsx
- * // Priority selection with disabled option
- * <DropdownMenuRadioGroup value={priority} onValueChange={setPriority}>
- *   <DropdownMenuRadioItem value="low">Low Priority</DropdownMenuRadioItem>
- *   <DropdownMenuRadioItem value="medium">Medium Priority</DropdownMenuRadioItem>
- *   <DropdownMenuRadioItem value="high">High Priority</DropdownMenuRadioItem>
- *   <DropdownMenuRadioItem value="urgent" disabled>
- *     Urgent (Premium Only)
- *   </DropdownMenuRadioItem>
- * </DropdownMenuRadioGroup>
- * ```
- * @since 1.0.0
+ * Radio item for mutually exclusive selection. Must be used inside DropdownMenuRadioGroup.
+ * Displays checkmark indicator when selected.
  */
 function DropdownMenuRadioItem({
   className,
   children,
   ...props
-}: React.ComponentProps<typeof DropdownMenuPrimitive.RadioItem> & {
-  className?: string;
-}) {
+}: DropdownMenuRadioItemProps) {
   return (
-    <DropdownMenuPrimitive.RadioItem
+    <MenuPrimitive.RadioItem
       data-slot="dropdown-menu-radio-item"
       className={cn(
-        "focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        "focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground gap-2 rounded-sm py-1.5 pr-8 pl-2 text-sm [&_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="pointer-events-none absolute left-2 flex size-3.5 items-center justify-center">
-        <DropdownMenuPrimitive.ItemIndicator>
-          <CircleIcon className="size-2 fill-current" />
-        </DropdownMenuPrimitive.ItemIndicator>
+      <span
+        className="pointer-events-none absolute right-2 flex items-center justify-center pointer-events-none"
+        data-slot="dropdown-menu-radio-item-indicator"
+      >
+        <MenuPrimitive.RadioItemIndicator>
+          <CheckIcon />
+        </MenuPrimitive.RadioItemIndicator>
       </span>
       {children}
-    </DropdownMenuPrimitive.RadioItem>
+    </MenuPrimitive.RadioItem>
   );
 }
 
-/**
- * A non-interactive label for grouping and organizing menu items
- *
- * Used to provide semantic headers for groups of related menu items.
- * Labels are not focusable and serve as visual and accessibility landmarks
- * within the menu structure. Helps users understand the organization of menu options.
- *
- * @param asChild - Merge props onto the immediate child instead of rendering a wrapper element
- * @param inset - Whether to add extra left padding to align with items that have icons
- *
- * @example
- * ```tsx
- * // Basic label for menu section
- * <DropdownMenuContent>
- *   <DropdownMenuLabel>Account Actions</DropdownMenuLabel>
- *   <DropdownMenuSeparator />
- *   <DropdownMenuItem>View Profile</DropdownMenuItem>
- *   <DropdownMenuItem>Account Settings</DropdownMenuItem>
- *
- *   <DropdownMenuSeparator />
- *   <DropdownMenuLabel>Preferences</DropdownMenuLabel>
- *   <DropdownMenuItem>Theme Settings</DropdownMenuItem>
- *   <DropdownMenuItem>Notification Settings</DropdownMenuItem>
- * </DropdownMenuContent>
- * ```
- *
- * @example
- * ```tsx
- * // Label with inset alignment
- * <DropdownMenuContent>
- *   <DropdownMenuLabel inset>File Operations</DropdownMenuLabel>
- *   <DropdownMenuItem>
- *     <Download className="mr-2 h-4 w-4" />
- *     Download
- *   </DropdownMenuItem>
- *   <DropdownMenuItem>
- *     <Upload className="mr-2 h-4 w-4" />
- *     Upload
- *   </DropdownMenuItem>
- * </DropdownMenuContent>
- * ```
- * @since 1.0.0
- */
-function DropdownMenuLabel({
-  className,
-  inset,
-  ...props
-}: React.ComponentProps<typeof DropdownMenuPrimitive.Label> & {
-  inset?: boolean;
-  className?: string;
-}) {
-  return (
-    <DropdownMenuPrimitive.Label
-      data-slot="dropdown-menu-label"
-      data-inset={inset}
-      className={cn(
-        "px-2 py-1.5 text-sm font-medium data-[inset]:pl-8",
-        className,
-      )}
-      {...props}
-    />
-  );
-}
+type DropdownMenuSeparatorProps = MenuPrimitive.Separator.Props;
 
-/**
- * A visual separator between menu items or groups
- *
- * Renders a thin horizontal line to visually separate different sections
- * of menu items. Improves visual hierarchy and helps users understand
- * the logical grouping of menu options. Commonly used after labels
- * or between different types of actions.
- *
- * @param asChild - Merge props onto the immediate child instead of rendering a wrapper element
- *
- * @example
- * ```tsx
- * // Separating different action groups
- * <DropdownMenuContent>
- *   <DropdownMenuItem>View</DropdownMenuItem>
- *   <DropdownMenuItem>Edit</DropdownMenuItem>
- *   <DropdownMenuSeparator />
- *   <DropdownMenuItem variant="destructive">Delete</DropdownMenuItem>
- * </DropdownMenuContent>
- * ```
- *
- * @example
- * ```tsx
- * // Separating sections with labels
- * <DropdownMenuContent>
- *   <DropdownMenuLabel>User Actions</DropdownMenuLabel>
- *   <DropdownMenuSeparator />
- *   <DropdownMenuItem>Profile</DropdownMenuItem>
- *   <DropdownMenuItem>Settings</DropdownMenuItem>
- *
- *   <DropdownMenuSeparator />
- *   <DropdownMenuLabel>System</DropdownMenuLabel>
- *   <DropdownMenuSeparator />
- *   <DropdownMenuItem>Logout</DropdownMenuItem>
- * </DropdownMenuContent>
- * ```
- * @since 1.0.0
- */
+/** Visual separator between menu items or groups. */
 function DropdownMenuSeparator({
   className,
   ...props
-}: React.ComponentProps<typeof DropdownMenuPrimitive.Separator> & {
-  className?: string;
-}) {
+}: DropdownMenuSeparatorProps) {
   return (
-    <DropdownMenuPrimitive.Separator
+    <MenuPrimitive.Separator
       data-slot="dropdown-menu-separator"
       className={cn("bg-border -mx-1 my-1 h-px", className)}
       {...props}
@@ -826,315 +299,21 @@ function DropdownMenuSeparator({
   );
 }
 
+type DropdownMenuShortcutProps = React.ComponentProps<"span">;
+
 /**
- * Displays keyboard shortcut hints in menu items
- *
- * Shows keyboard shortcut text aligned to the right side of menu items.
- * Purely visual component - does not implement the actual keyboard functionality.
- * Use standard keyboard shortcut notation and symbols (⌘, ⌃, ⌥, ⇧, Ctrl, Alt, Shift).
- * Helps users discover and remember keyboard shortcuts for menu actions.
- *
- * @example
- * ```tsx
- * // macOS style shortcuts
- * <DropdownMenuItem onSelect={handleSave}>
- *   Save Document
- *   <DropdownMenuShortcut>⌘S</DropdownMenuShortcut>
- * </DropdownMenuItem>
- * ```
- *
- * @example
- * ```tsx
- * // Windows/Linux style shortcuts
- * <DropdownMenuItem onSelect={handleCopy}>
- *   Copy
- *   <DropdownMenuShortcut>Ctrl+C</DropdownMenuShortcut>
- * </DropdownMenuItem>
- * ```
- *
- * @example
- * ```tsx
- * // Complex shortcuts with multiple modifiers
- * <DropdownMenuItem onSelect={handleForceRefresh}>
- *   Force Refresh
- *   <DropdownMenuShortcut>⌘⇧R</DropdownMenuShortcut>
- * </DropdownMenuItem>
- * ```
- *
- * @example
- * ```tsx
- * // Multiple menu items with shortcuts
- * <DropdownMenuContent>
- *   <DropdownMenuItem>
- *     New File <DropdownMenuShortcut>⌘N</DropdownMenuShortcut>
- *   </DropdownMenuItem>
- *   <DropdownMenuItem>
- *     Open File <DropdownMenuShortcut>⌘O</DropdownMenuShortcut>
- *   </DropdownMenuItem>
- *   <DropdownMenuSeparator />
- *   <DropdownMenuItem>
- *     Save <DropdownMenuShortcut>⌘S</DropdownMenuShortcut>
- *   </DropdownMenuItem>
- *   <DropdownMenuItem>
- *     Save As <DropdownMenuShortcut>⌘⇧S</DropdownMenuShortcut>
- *   </DropdownMenuItem>
- * </DropdownMenuContent>
- * ```
- * @since 1.0.0
+ * Keyboard shortcut display component. Positioned to the right of menu items.
+ * For visual purposes only - does not implement actual keyboard shortcuts.
  */
 function DropdownMenuShortcut({
   className,
   ...props
-}: React.ComponentProps<"span"> & {
-  className?: string;
-}) {
+}: DropdownMenuShortcutProps) {
   return (
     <span
       data-slot="dropdown-menu-shortcut"
       className={cn(
-        "text-muted-foreground ml-auto text-xs tracking-widest",
-        className,
-      )}
-      {...props}
-    />
-  );
-}
-
-/**
- * Container for creating nested submenus
- *
- * Wraps a submenu trigger and content to create hierarchical menu structures.
- * Enables multi-level navigation within dropdown menus. Use with
- * DropdownMenuSubTrigger and DropdownMenuSubContent to build complex
- * menu hierarchies with proper focus management and keyboard navigation.
- *
- * @param defaultOpen - Whether the submenu is initially open (uncontrolled mode)
- * @param open - Whether the submenu is open (controlled mode)
- * @param onOpenChange - Callback fired when the submenu open state changes
- *
- * @example
- * ```tsx
- * // Basic submenu structure
- * <DropdownMenuSub>
- *   <DropdownMenuSubTrigger>
- *     <Share className="mr-2 h-4 w-4" />
- *     Share Options
- *   </DropdownMenuSubTrigger>
- *   <DropdownMenuSubContent>
- *     <DropdownMenuItem>Email Link</DropdownMenuItem>
- *     <DropdownMenuItem>Copy to Clipboard</DropdownMenuItem>
- *     <DropdownMenuItem>Generate QR Code</DropdownMenuItem>
- *   </DropdownMenuSubContent>
- * </DropdownMenuSub>
- * ```
- *
- * @example
- * ```tsx
- * // Controlled submenu with state management
- * const [isShareOpen, setIsShareOpen] = useState(false);
- *
- * <DropdownMenuSub open={isShareOpen} onOpenChange={setIsShareOpen}>
- *   <DropdownMenuSubTrigger>Share</DropdownMenuSubTrigger>
- *   <DropdownMenuSubContent>
- *     <DropdownMenuItem onSelect={() => handleShare('email')}>Email</DropdownMenuItem>
- *     <DropdownMenuItem onSelect={() => handleShare('link')}>Copy Link</DropdownMenuItem>
- *   </DropdownMenuSubContent>
- * </DropdownMenuSub>
- * ```
- *
- * @example
- * ```tsx
- * // Complex nested menu structure
- * <DropdownMenuContent>
- *   <DropdownMenuItem>Edit</DropdownMenuItem>
- *   <DropdownMenuSeparator />
- *   <DropdownMenuSub>
- *     <DropdownMenuSubTrigger>Export</DropdownMenuSubTrigger>
- *     <DropdownMenuSubContent>
- *       <DropdownMenuItem>Export as PDF</DropdownMenuItem>
- *       <DropdownMenuItem>Export as PNG</DropdownMenuItem>
- *       <DropdownMenuSub>
- *         <DropdownMenuSubTrigger>Advanced Export</DropdownMenuSubTrigger>
- *         <DropdownMenuSubContent>
- *           <DropdownMenuItem>Custom Resolution</DropdownMenuItem>
- *           <DropdownMenuItem>Batch Export</DropdownMenuItem>
- *         </DropdownMenuSubContent>
- *       </DropdownMenuSub>
- *     </DropdownMenuSubContent>
- *   </DropdownMenuSub>
- * </DropdownMenuContent>
- * ```
- * @since 1.0.0
- */
-function DropdownMenuSub({
-  ...props
-}: React.ComponentProps<typeof DropdownMenuPrimitive.Sub>) {
-  return <DropdownMenuPrimitive.Sub data-slot="dropdown-menu-sub" {...props} />;
-}
-
-/**
- * Trigger element for opening a submenu
- *
- * Displays an arrow indicator and opens the associated submenu on hover or keyboard
- * navigation. Must be used within a DropdownMenuSub component. Automatically
- * includes a chevron icon to indicate submenu availability and handles focus states.
- *
- * @param asChild - Merge props onto the immediate child instead of rendering a wrapper element
- * @param disabled - Whether the trigger is disabled and cannot open the submenu
- * @param textValue - Optional text value used for typeahead search functionality
- * @param inset - Whether to add left padding to align with items that have icons
- *
- * @example
- * ```tsx
- * // Basic submenu trigger with icon
- * <DropdownMenuSub>
- *   <DropdownMenuSubTrigger>
- *     <Share className="mr-2 h-4 w-4" />
- *     Share Options
- *   </DropdownMenuSubTrigger>
- *   <DropdownMenuSubContent>
- *     <DropdownMenuItem>Email Link</DropdownMenuItem>
- *     <DropdownMenuItem>Copy to Clipboard</DropdownMenuItem>
- *   </DropdownMenuSubContent>
- * </DropdownMenuSub>
- * ```
- *
- * @example
- * ```tsx
- * // Submenu trigger with inset alignment
- * <DropdownMenuContent>
- *   <DropdownMenuItem>
- *     <FileText className="mr-2 h-4 w-4" />
- *     Open File
- *   </DropdownMenuItem>
- *   <DropdownMenuSub>
- *     <DropdownMenuSubTrigger inset>
- *       Recent Files
- *     </DropdownMenuSubTrigger>
- *     <DropdownMenuSubContent>
- *       <DropdownMenuItem>Document.pdf</DropdownMenuItem>
- *       <DropdownMenuItem>Presentation.pptx</DropdownMenuItem>
- *     </DropdownMenuSubContent>
- *   </DropdownMenuSub>
- * </DropdownMenuContent>
- * ```
- *
- * @example
- * ```tsx
- * // Disabled submenu trigger
- * <DropdownMenuSubTrigger disabled>
- *   Advanced Options (Pro Only)
- * </DropdownMenuSubTrigger>
- * ```
- * @since 1.0.0
- */
-function DropdownMenuSubTrigger({
-  className,
-  inset,
-  children,
-  ...props
-}: React.ComponentProps<typeof DropdownMenuPrimitive.SubTrigger> & {
-  inset?: boolean;
-  className?: string;
-}) {
-  return (
-    <DropdownMenuPrimitive.SubTrigger
-      data-slot="dropdown-menu-sub-trigger"
-      data-inset={inset}
-      className={cn(
-        "focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground flex cursor-default items-center rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[inset]:pl-8",
-        className,
-      )}
-      {...props}
-    >
-      {children}
-      <ChevronRightIcon className="ml-auto size-4" />
-    </DropdownMenuPrimitive.SubTrigger>
-  );
-}
-
-/**
- * Content container for submenu items
- *
- * Contains the items displayed when a submenu is opened. Positioned relative
- * to the submenu trigger with intelligent collision detection. Supports all
- * the same item types as the main menu content, enabling complex nested
- * menu structures with consistent behavior and styling.
- *
- * @param asChild - Merge props onto the immediate child instead of rendering a wrapper element
- * @param loop - When true, keyboard navigation will loop from last to first item
- * @param side - The preferred side of the trigger to render against
- * @param sideOffset - Distance in pixels from the trigger
- * @param align - The preferred alignment against the trigger
- * @param alignOffset - Distance in pixels from the align point
- * @param avoidCollisions - Whether to avoid collisions with viewport boundaries
- * @param sticky - Element positioning behavior relative to the viewport
- * @param hideWhenDetached - Whether to hide content when reference element is occluded
- *
- * @example
- * ```tsx
- * // Basic submenu content with various item types
- * <DropdownMenuSubContent>
- *   <DropdownMenuItem>
- *     <Mail className="mr-2 h-4 w-4" />
- *     Send via Email
- *   </DropdownMenuItem>
- *   <DropdownMenuItem>
- *     <Link className="mr-2 h-4 w-4" />
- *     Copy Share Link
- *   </DropdownMenuItem>
- *   <DropdownMenuSeparator />
- *   <DropdownMenuItem>
- *     <QrCode className="mr-2 h-4 w-4" />
- *     Generate QR Code
- *   </DropdownMenuItem>
- * </DropdownMenuSubContent>
- * ```
- *
- * @example
- * ```tsx
- * // Submenu with checkbox items for multi-selection
- * <DropdownMenuSubContent>
- *   <DropdownMenuLabel>Export Options</DropdownMenuLabel>
- *   <DropdownMenuSeparator />
- *   <DropdownMenuCheckboxItem checked={includeMetadata} onCheckedChange={setIncludeMetadata}>
- *     Include Metadata
- *   </DropdownMenuCheckboxItem>
- *   <DropdownMenuCheckboxItem checked={compressFile} onCheckedChange={setCompressFile}>
- *     Compress File
- *   </DropdownMenuCheckboxItem>
- *   <DropdownMenuSeparator />
- *   <DropdownMenuItem>Export Now</DropdownMenuItem>
- * </DropdownMenuSubContent>
- * ```
- *
- * @example
- * ```tsx
- * // Nested submenu structure
- * <DropdownMenuSubContent>
- *   <DropdownMenuItem>Basic Export</DropdownMenuItem>
- *   <DropdownMenuSub>
- *     <DropdownMenuSubTrigger>Advanced Settings</DropdownMenuSubTrigger>
- *     <DropdownMenuSubContent>
- *       <DropdownMenuItem>High Quality</DropdownMenuItem>
- *       <DropdownMenuItem>Custom Resolution</DropdownMenuItem>
- *     </DropdownMenuSubContent>
- *   </DropdownMenuSub>
- * </DropdownMenuSubContent>
- * ```
- * @since 1.0.0
- */
-function DropdownMenuSubContent({
-  className,
-  ...props
-}: React.ComponentProps<typeof DropdownMenuPrimitive.SubContent> & {
-  className?: string;
-}) {
-  return (
-    <DropdownMenuPrimitive.SubContent
-      data-slot="dropdown-menu-sub-content"
-      className={cn(
-        "bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=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 z-50 min-w-[8rem] origin-(--radix-dropdown-menu-content-transform-origin) overflow-hidden rounded-md border p-1 shadow-lg",
+        "text-muted-foreground group-focus/dropdown-menu-item:text-accent-foreground ml-auto text-xs tracking-widest",
         className,
       )}
       {...props}
@@ -1158,4 +337,19 @@ export {
   DropdownMenuSub,
   DropdownMenuSubTrigger,
   DropdownMenuSubContent,
+  type DropdownMenuProps,
+  type DropdownMenuPortalProps,
+  type DropdownMenuTriggerProps,
+  type DropdownMenuContentProps,
+  type DropdownMenuGroupProps,
+  type DropdownMenuLabelProps,
+  type DropdownMenuItemProps,
+  type DropdownMenuCheckboxItemProps,
+  type DropdownMenuRadioGroupProps,
+  type DropdownMenuRadioItemProps,
+  type DropdownMenuSeparatorProps,
+  type DropdownMenuShortcutProps,
+  type DropdownMenuSubProps,
+  type DropdownMenuSubTriggerProps,
+  type DropdownMenuSubContentProps,
 };