@versini/ui-dropdown 1.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) Arno Versini
+
+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,245 @@
+# @versini/ui-dropdown
+
+[![npm version](https://img.shields.io/npm/v/@versini/ui-dropdown?style=flat-square)](https://www.npmjs.com/package/@versini/ui-dropdown)
+![npm package minimized gzipped size](<https://img.shields.io/bundlejs/size/%40versini%2Fui-dropdown?style=flat-square&label=size%20(gzip)>)
+
+> Accessible and flexible React dropdown menu components built with TypeScript, TailwindCSS, and Radix UI primitives.
+
+The DropdownMenu package provides dropdown menus with full keyboard navigation, focus management, theming for triggers, and composable items / separators.
+
+## Table of Contents
+
+- [Features](#features)
+- [Installation](#installation)
+- [Usage](#usage)
+- [Examples](#examples)
+- [API](#api)
+
+## Features
+
+- **📋 Composable**: `DropdownMenu`, `DropdownMenuItem`, `DropdownMenuSeparator`, `DropdownMenuGroupLabel`, `DropdownMenuSub`
+- **🔄 Nested Sub-menus**: Support for multi-level menu hierarchies with automatic positioning
+- **♿ Accessible**: Built with Radix UI primitives & ARIA roles for robust a11y
+- **⌨️ Keyboard Support**: Arrow navigation, typeahead matching, ESC / click outside close
+- **🎨 Theme & Focus Modes**: Trigger inherits color + separate focus styling
+- **🧭 Smart Positioning**: Auto flip / shift to remain within viewport
+- **🧪 Type Safe**: Strongly typed props with TypeScript
+
+## Installation
+
+```bash
+npm install @versini/ui-dropdown
+```
+
+> **Note**: This component requires TailwindCSS and the `@versini/ui-styles` plugin for proper styling. See the [installation documentation](https://versini-org.github.io/ui-components/?path=/docs/getting-started-installation--docs) for complete setup instructions.
+
+## Usage
+
+### Basic Dropdown Menu
+
+```tsx
+import { DropdownMenu, DropdownMenuItem } from "@versini/ui-dropdown";
+import { ButtonIcon } from "@versini/ui-button";
+import { IconMenu } from "@versini/ui-icons";
+
+function App() {
+  return (
+    <DropdownMenu
+      trigger={
+        <ButtonIcon label="Menu">
+          <IconMenu />
+        </ButtonIcon>
+      }
+    >
+      <DropdownMenuItem
+        label="Profile"
+        onSelect={() => console.info("Profile")}
+      />
+      <DropdownMenuItem
+        label="Settings"
+        onSelect={() => console.info("Settings")}
+      />
+      <DropdownMenuItem
+        label="Logout"
+        onSelect={() => console.info("Logout")}
+      />
+    </DropdownMenu>
+  );
+}
+```
+
+## Examples
+
+### Menu with Icons & Selection
+
+```tsx
+import {
+  DropdownMenu,
+  DropdownMenuItem,
+  DropdownMenuSeparator
+} from "@versini/ui-dropdown";
+import { ButtonIcon } from "@versini/ui-button";
+import {
+  IconMenu,
+  IconUser,
+  IconSettings,
+  IconLogout
+} from "@versini/ui-icons";
+
+function AccountMenu() {
+  const [last, setLast] = useState("");
+  return (
+    <DropdownMenu
+      label="Account options"
+      trigger={
+        <ButtonIcon label="Account">
+          <IconMenu />
+        </ButtonIcon>
+      }
+      onOpenChange={(o) => console.info("open?", o)}
+    >
+      <DropdownMenuItem
+        label="Profile"
+        icon={<IconUser />}
+        onSelect={() => setLast("profile")}
+      />
+      <DropdownMenuItem
+        label="Settings"
+        icon={<IconSettings />}
+        onSelect={() => setLast("settings")}
+      />
+      <DropdownMenuSeparator />
+      <DropdownMenuItem
+        label="Logout"
+        icon={<IconLogout />}
+        onSelect={() => setLast("logout")}
+      />
+    </DropdownMenu>
+  );
+}
+```
+
+### Raw Custom Item
+
+```tsx
+<DropdownMenu
+  trigger={
+    <ButtonIcon label="More">
+      <IconMenu />
+    </ButtonIcon>
+  }
+>
+  <DropdownMenuItem raw ignoreClick>
+    <div className="p-2 text-xs uppercase tracking-wide text-copy-medium">
+      Custom Header
+    </div>
+  </DropdownMenuItem>
+  <DropdownMenuItem label="Action" />
+</DropdownMenu>
+```
+
+### Nested Sub-menus
+
+Create hierarchical menus using `DropdownMenuSub`:
+
+```tsx
+import {
+  DropdownMenu,
+  DropdownMenuItem,
+  DropdownMenuSub,
+  DropdownMenuGroupLabel
+} from "@versini/ui-dropdown";
+import { ButtonIcon } from "@versini/ui-button";
+import { IconSettings, IconOpenAI, IconAnthropic } from "@versini/ui-icons";
+
+function SettingsMenu() {
+  const [engine, setEngine] = useState("openai");
+
+  return (
+    <DropdownMenu
+      trigger={
+        <ButtonIcon label="Settings">
+          <IconSettings />
+        </ButtonIcon>
+      }
+    >
+      <DropdownMenuItem label="Profile" />
+      <DropdownMenuItem label="Preferences" />
+
+      {/* Nested sub-menu */}
+      <DropdownMenuSub label="AI Settings">
+        <DropdownMenuGroupLabel>Engines</DropdownMenuGroupLabel>
+        <DropdownMenuItem
+          label="OpenAI"
+          icon={<IconOpenAI />}
+          selected={engine === "openai"}
+          onSelect={() => setEngine("openai")}
+        />
+        <DropdownMenuItem
+          label="Anthropic"
+          icon={<IconAnthropic />}
+          selected={engine === "anthropic"}
+          onSelect={() => setEngine("anthropic")}
+        />
+      </DropdownMenuSub>
+
+      <DropdownMenuItem label="About" />
+    </DropdownMenu>
+  );
+}
+```
+
+**Features of nested sub-menus:**
+
+- Automatically positioned to the right (or left if no space)
+- Visual chevron indicator (`→`) shows expandable items
+- Hover or click to open sub-menus
+- Smart positioning adjusts for viewport constraints
+- Keyboard navigation works across all levels
+- Sibling sub-menus auto-close when opening another
+
+## API
+
+### DropdownMenu Props
+
+| Prop               | Type                                                                                                                                           | Default          | Description                                          |
+| ------------------ | ---------------------------------------------------------------------------------------------------------------------------------------------- | ---------------- | ---------------------------------------------------- |
+| `trigger`          | `React.ReactNode`                                                                                                                              | -                | Element used to open the menu (Button / ButtonIcon). |
+| `children`         | `React.ReactNode`                                                                                                                              | -                | DropdownMenuItem, DropdownMenuSeparator, etc.        |
+| `label`            | `string`                                                                                                                                       | `"Open menu"`    | Accessible label for the trigger.                    |
+| `defaultPlacement` | `"bottom"` \| `"bottom-start"` \| `"bottom-end"` \| `"top"` \| `"top-start"` \| `"top-end"` \| `"left"` \| `"left-start"` \| `"right"` \| etc. | `"bottom-start"` | Initial preferred placement.                         |
+| `mode`             | `"dark"` \| `"light"` \| `"system"` \| `"alt-system"`                                                                                          | `"system"`       | Color mode of trigger (when using UI buttons).       |
+| `focusMode`        | `"dark"` \| `"light"` \| `"system"` \| `"alt-system"`                                                                                          | `"system"`       | Focus ring thematic mode (when using UI buttons).    |
+| `onOpenChange`     | `(open: boolean) => void`                                                                                                                      | -                | Called when menu opens or closes.                    |
+| `sideOffset`       | `number`                                                                                                                                       | `10`             | Offset distance from the trigger element.            |
+| `modal`            | `boolean`                                                                                                                                      | `true`           | Whether the dropdown is modal.                       |
+
+### DropdownMenuItem Props
+
+| Prop          | Type                     | Default     | Description                                   |
+| ------------- | ------------------------ | ----------- | --------------------------------------------- |
+| `label`       | `string`                 | -           | The label to display for the menu item.       |
+| `disabled`    | `boolean`                | `false`     | Whether the menu item is disabled.            |
+| `icon`        | `React.ReactNode`        | -           | Icon to display on the left of the label.     |
+| `raw`         | `boolean`                | `false`     | Disable internal styling for custom content.  |
+| `ignoreClick` | `boolean`                | `false`     | Prevent menu from closing when item selected. |
+| `selected`    | `boolean`                | `undefined` | Show selected/unselected indicator.           |
+| `onSelect`    | `(event: Event) => void` | -           | Callback fired when the item is selected.     |
+
+### DropdownMenuSub Props
+
+| Prop          | Type              | Default | Description                         |
+| ------------- | ----------------- | ------- | ----------------------------------- |
+| `label`       | `string`          | -       | The label for the sub-menu trigger. |
+| `children`    | `React.ReactNode` | -       | Items to render inside sub-menu.    |
+| `disabled`    | `boolean`         | `false` | Whether the sub-menu is disabled.   |
+| `sideOffset`  | `number`          | `2`     | Offset from sub-menu trigger.       |
+| `alignOffset` | `number`          | `-4`    | Alignment offset for sub-menu.      |
+
+### DropdownMenuSeparator Props
+
+Standard `React.HTMLAttributes<HTMLDivElement>` - use `className` for custom styling.
+
+### DropdownMenuGroupLabel Props
+
+Standard `React.HTMLAttributes<HTMLDivElement>` - use `className` for custom styling.

package/dist/DropdownMenu/DropdownMenu.d.ts

@@ -0,0 +1,17 @@
+import type { DropdownMenuGroupLabelProps, DropdownMenuProps, DropdownMenuSeparatorProps, DropdownMenuSubProps } from "./DropdownMenuTypes";
+export declare const DropdownMenu: {
+    ({ trigger, children, label, defaultPlacement, onOpenChange, mode, focusMode, sideOffset, modal, }: DropdownMenuProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export declare const DropdownMenuSub: {
+    ({ label, children, disabled, sideOffset, alignOffset, }: DropdownMenuSubProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export declare const DropdownMenuSeparator: {
+    ({ className, ...props }: DropdownMenuSeparatorProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export declare const DropdownMenuGroupLabel: {
+    ({ className, ...props }: DropdownMenuGroupLabelProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};

package/dist/DropdownMenu/DropdownMenu.js

@@ -0,0 +1,183 @@
+/*!
+  @versini/ui-dropdown v1.1.0
+  © 2025 gizmette.com
+*/
+try {
+  if (!window.__VERSINI_UI_DROPDOWN__) {
+    window.__VERSINI_UI_DROPDOWN__ = {
+      version: "1.1.0",
+      buildTime: "12/15/2025 01:21 PM EST",
+      homepage: "https://www.npmjs.com/package/@versini/ui-dropdown",
+      license: "MIT",
+    };
+  }
+} catch (error) {
+  // nothing to declare officer
+}
+
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Content, Label, Portal, Root, Separator, Sub, SubContent, SubTrigger, Trigger } from "@radix-ui/react-dropdown-menu";
+import { IconNext } from "@versini/ui-icons";
+import clsx from "clsx";
+import { cloneElement, useState } from "react";
+import { getDisplayName } from "./utilities.js";
+
+;// CONCATENATED MODULE: external "react/jsx-runtime"
+
+;// CONCATENATED MODULE: external "@radix-ui/react-dropdown-menu"
+
+;// CONCATENATED MODULE: external "@versini/ui-icons"
+
+;// CONCATENATED MODULE: external "clsx"
+
+;// CONCATENATED MODULE: external "react"
+
+;// CONCATENATED MODULE: external "./utilities.js"
+
+;// CONCATENATED MODULE: ./src/components/DropdownMenu/DropdownMenu.tsx
+
+
+
+
+
+
+const CONTENT_CLASS = "rounded-md bg-surface-light shadow-sm shadow-border-dark outline-hidden p-3 sm:p-2";
+const SUB_TRIGGER_CLASS = clsx("flex items-center flex-row justify-between", "w-full", "m-0 first:mt-0 mt-2 sm:mt-1 px-2 py-1", "rounded-md border border-transparent", "text-left text-base", "outline-hidden focus:border focus:border-border-medium focus:bg-surface-lighter focus:underline", "disabled:cursor-not-allowed disabled:text-copy-medium", "data-[highlighted]:bg-surface-lighter data-[highlighted]:border-border-medium data-[highlighted]:underline", "data-[state=open]:bg-surface-lighter");
+/**
+ * Convert Radix placement format to our simplified format.
+ */ const getRadixSide = (placement)=>{
+    /* v8 ignore next 3 */ if (!placement) {
+        return "bottom";
+    }
+    if (placement.startsWith("top")) {
+        return "top";
+    }
+    if (placement.startsWith("left")) {
+        return "left";
+    }
+    if (placement.startsWith("right")) {
+        return "right";
+    }
+    return "bottom";
+};
+const getRadixAlign = (placement)=>{
+    /* v8 ignore next 3 */ if (!placement) {
+        return "start";
+    }
+    if (placement.endsWith("-start")) {
+        return "start";
+    }
+    if (placement.endsWith("-end")) {
+        return "end";
+    }
+    return "center";
+};
+const DropdownMenu = ({ trigger, children, label = "Open menu", defaultPlacement = "bottom-start", onOpenChange, mode = "system", focusMode = "system", sideOffset = 10, modal = true })=>{
+    const [isOpen, setIsOpen] = useState(false);
+    const noInternalClick = getDisplayName(trigger) === "Button" || getDisplayName(trigger) === "ButtonIcon";
+    const uiButtonsExtraProps = noInternalClick ? {
+        noInternalClick,
+        focusMode,
+        mode
+    } : {};
+    /* v8 ignore next 6 - trigger is required in practice */ const triggerElement = trigger ? /*#__PURE__*/ cloneElement(trigger, {
+        ...uiButtonsExtraProps,
+        "aria-label": label
+    }) : null;
+    const handleOpenChange = (open)=>{
+        setIsOpen(open);
+        onOpenChange?.(open);
+    };
+    /**
+	 * Handle pointer down to ensure the event propagates to parent elements.
+	 * This is crucial for compatibility with Tooltip components that need
+	 * to detect clicks on their trigger to disable tooltip display.
+	 * We use onPointerDown because it fires before Radix's internal handlers
+	 * and allows proper event bubbling.
+	 */ const handlePointerDown = (e)=>{
+        /**
+		 * Dispatch a click event to ensure parent components (like Tooltip)
+		 * can detect the interaction and respond appropriately.
+		 */ const clickEvent = new MouseEvent("click", {
+            bubbles: true,
+            cancelable: true,
+            view: window
+        });
+        e.currentTarget.dispatchEvent(clickEvent);
+    };
+    return /*#__PURE__*/ jsxs(Root, {
+        onOpenChange: handleOpenChange,
+        modal: modal,
+        children: [
+            /*#__PURE__*/ jsx(Trigger, {
+                asChild: true,
+                "data-state": isOpen ? "open" : "closed",
+                onPointerDown: handlePointerDown,
+                children: triggerElement
+            }),
+            /*#__PURE__*/ jsx(Portal, {
+                children: /*#__PURE__*/ jsx(Content, {
+                    className: CONTENT_CLASS,
+                    sideOffset: sideOffset,
+                    side: getRadixSide(defaultPlacement),
+                    align: getRadixAlign(defaultPlacement),
+                    onCloseAutoFocus: (e)=>{
+                        /**
+						 * Prevent focus from returning to the trigger when menu closes.
+						 * This helps avoid tooltip re-triggering immediately after menu closes.
+						 */ e.preventDefault();
+                    },
+                    children: children
+                })
+            })
+        ]
+    });
+};
+DropdownMenu.displayName = "DropdownMenu";
+const DropdownMenuSub = ({ label, children, disabled = false, sideOffset = 2, alignOffset = -4 })=>{
+    return /*#__PURE__*/ jsxs(Sub, {
+        children: [
+            /*#__PURE__*/ jsxs(SubTrigger, {
+                className: SUB_TRIGGER_CLASS,
+                disabled: disabled,
+                children: [
+                    /*#__PURE__*/ jsx("span", {
+                        children: label
+                    }),
+                    /*#__PURE__*/ jsx(IconNext, {
+                        className: "ml-2",
+                        size: "size-3",
+                        monotone: true
+                    })
+                ]
+            }),
+            /*#__PURE__*/ jsx(Portal, {
+                children: /*#__PURE__*/ jsx(SubContent, {
+                    className: CONTENT_CLASS,
+                    sideOffset: sideOffset,
+                    alignOffset: alignOffset,
+                    children: children
+                })
+            })
+        ]
+    });
+};
+DropdownMenuSub.displayName = "DropdownMenuSub";
+const DropdownMenuSeparator = ({ className, ...props })=>{
+    const separatorClass = clsx(className, "my-1 border-t border-border-medium");
+    return /*#__PURE__*/ jsx(Separator, {
+        className: separatorClass,
+        ...props
+    });
+};
+DropdownMenuSeparator.displayName = "DropdownMenuSeparator";
+const DropdownMenuGroupLabel = ({ className, ...props })=>{
+    const groupLabelClass = clsx(className, "pt-1 mb-2", "text-sm text-copy-dark font-bold", "border-b border-border-medium");
+    return /*#__PURE__*/ jsx(Label, {
+        className: groupLabelClass,
+        ...props
+    });
+};
+DropdownMenuGroupLabel.displayName = "DropdownMenuGroupLabel";
+
+export { DropdownMenu, DropdownMenuGroupLabel, DropdownMenuSeparator, DropdownMenuSub };

package/dist/DropdownMenu/DropdownMenuItem.d.ts

@@ -0,0 +1,5 @@
+import type { DropdownMenuItemProps } from "./DropdownMenuTypes";
+export declare const DropdownMenuItem: {
+    ({ label, disabled, icon, raw, children, ignoreClick, selected, onSelect, onClick, onFocus, ...props }: DropdownMenuItemProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};

package/dist/DropdownMenu/DropdownMenuItem.js

@@ -0,0 +1,92 @@
+/*!
+  @versini/ui-dropdown v1.1.0
+  © 2025 gizmette.com
+*/
+try {
+  if (!window.__VERSINI_UI_DROPDOWN__) {
+    window.__VERSINI_UI_DROPDOWN__ = {
+      version: "1.1.0",
+      buildTime: "12/15/2025 01:21 PM EST",
+      homepage: "https://www.npmjs.com/package/@versini/ui-dropdown",
+      license: "MIT",
+    };
+  }
+} catch (error) {
+  // nothing to declare officer
+}
+
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Item } from "@radix-ui/react-dropdown-menu";
+import { IconSelected, IconUnSelected } from "@versini/ui-icons";
+import clsx from "clsx";
+
+;// CONCATENATED MODULE: external "react/jsx-runtime"
+
+;// CONCATENATED MODULE: external "@radix-ui/react-dropdown-menu"
+
+;// CONCATENATED MODULE: external "@versini/ui-icons"
+
+;// CONCATENATED MODULE: external "clsx"
+
+;// CONCATENATED MODULE: ./src/components/DropdownMenu/DropdownMenuItem.tsx
+
+
+
+
+const ITEM_CLASS = clsx("flex flex-row items-center", "w-full", "m-0 first:mt-0 mt-2 sm:mt-1 px-2 py-1", "rounded-md border border-transparent", "text-left text-base", "outline-hidden focus:border focus:border-border-medium focus:bg-surface-lighter focus:underline", "disabled:cursor-not-allowed disabled:text-copy-medium", "data-[highlighted]:bg-surface-lighter data-[highlighted]:border-border-medium data-[highlighted]:underline", "data-[disabled]:cursor-not-allowed data-[disabled]:text-copy-medium");
+const DropdownMenuItem = ({ label, disabled, icon, raw = false, children, ignoreClick = false, selected, onSelect, onClick, onFocus, ...props })=>{
+    let buttonSpanClass = "";
+    if (raw && children) {
+        return /*#__PURE__*/ jsx(Item, {
+            className: "outline-hidden",
+            onSelect: (event)=>{
+                if (ignoreClick) {
+                    event.preventDefault();
+                }
+                onSelect?.(event);
+                /* v8 ignore next 1 - optional onClick may not be provided */ onClick?.(event);
+            },
+            ...props,
+            children: children
+        });
+    }
+    if (icon) {
+        buttonSpanClass = "pl-2";
+    }
+    const itemClass = clsx(ITEM_CLASS, {
+        "bg-none": !disabled && !selected
+    });
+    const handleSelect = (event)=>{
+        if (ignoreClick) {
+            event.preventDefault();
+        }
+        onSelect?.(event);
+        // Also call onClick for compatibility with common patterns
+        /* v8 ignore next 1 - optional onClick may not be provided */ onClick?.(event);
+    };
+    return /*#__PURE__*/ jsxs(Item, {
+        className: itemClass,
+        disabled: disabled,
+        onSelect: handleSelect,
+        onFocus: onFocus,
+        ...props,
+        children: [
+            selected === true && /*#__PURE__*/ jsx(IconSelected, {
+                className: "text-copy-success mr-2",
+                size: "size-4"
+            }),
+            selected === false && /*#__PURE__*/ jsx(IconUnSelected, {
+                className: "text-copy-medium mr-2",
+                size: "size-4"
+            }),
+            icon,
+            label && /*#__PURE__*/ jsx("span", {
+                className: buttonSpanClass,
+                children: label
+            })
+        ]
+    });
+};
+DropdownMenuItem.displayName = "DropdownMenuItem";
+
+export { DropdownMenuItem };

package/dist/DropdownMenu/DropdownMenuTypes.d.ts

@@ -0,0 +1,118 @@
+export type DropdownMenuProps = {
+    /**
+     * The component to use to open the dropdown menu, e.g. a ButtonIcon, a Button, etc.
+     * Required for root menus, omit for nested sub-menus (use label instead).
+     */
+    trigger?: React.ReactNode;
+    /**
+     * The children to render (DropdownMenuItem, DropdownMenuSeparator, etc.).
+     */
+    children?: React.ReactNode;
+    /**
+     * The default location of the popup.
+     * @default "bottom-start"
+     */
+    defaultPlacement?: "bottom" | "bottom-start" | "bottom-end" | "top" | "top-start" | "top-end" | "left" | "left-start" | "left-end" | "right" | "right-start" | "right-end";
+    /**
+     * The type of focus for the Button. This will change the color
+     * of the focus ring around the Button.
+     */
+    focusMode?: "dark" | "light" | "system" | "alt-system";
+    /**
+     * The type of Button trigger. This will change the color of the Button.
+     */
+    mode?: "dark" | "light" | "system" | "alt-system";
+    /**
+     * The label to use for the menu button (root menu) or the sub-menu trigger text (nested menu).
+     * When used without a trigger, this creates a nested sub-menu.
+     */
+    label?: string;
+    /**
+     * Callback fired when the component is opened or closed.
+     * @param open whether or not the menu is open
+     */
+    onOpenChange?: (open: boolean) => void;
+    /**
+     * The offset distance from the trigger element.
+     * @default 10
+     */
+    sideOffset?: number;
+    /**
+     * Whether the dropdown menu is modal (locks interaction outside).
+     * @default true
+     */
+    modal?: boolean;
+};
+export type DropdownMenuItemProps = {
+    /**
+     * The label to use for the menu item.
+     */
+    label?: string;
+    /**
+     * Whether or not the menu item is disabled.
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * A React component of type Icon to be placed on the left of the label.
+     */
+    icon?: React.ReactNode;
+    /**
+     * Disable internal menu item behavior (click, focus, etc.).
+     * @default false
+     */
+    raw?: boolean;
+    /**
+     * Children to render when using raw mode.
+     */
+    children?: React.ReactNode;
+    /**
+     * Whether or not the menu should close when the menu item is selected.
+     * @default false
+     */
+    ignoreClick?: boolean;
+    /**
+     * Whether or not the menu item is selected.
+     * @default undefined
+     */
+    selected?: boolean;
+    /**
+     * Callback fired when the menu item is selected.
+     */
+    onSelect?: (event: Event) => void;
+    /**
+     * Optional click handler.
+     */
+    onClick?: (event: React.MouseEvent<HTMLDivElement>) => void;
+    /**
+     * Optional focus handler.
+     */
+    onFocus?: (event: React.FocusEvent<HTMLDivElement>) => void;
+};
+export type DropdownMenuSeparatorProps = React.HTMLAttributes<HTMLDivElement>;
+export type DropdownMenuGroupLabelProps = React.HTMLAttributes<HTMLDivElement>;
+export type DropdownMenuSubProps = {
+    /**
+     * The label for the sub-menu trigger.
+     */
+    label: string;
+    /**
+     * The children to render inside the sub-menu.
+     */
+    children?: React.ReactNode;
+    /**
+     * Whether the sub-menu trigger is disabled.
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * The offset distance from the sub-menu trigger.
+     * @default 2
+     */
+    sideOffset?: number;
+    /**
+     * The alignment offset for the sub-menu.
+     * @default -4
+     */
+    alignOffset?: number;
+};

package/dist/DropdownMenu/DropdownMenuTypes.js

@@ -0,0 +1,21 @@
+/*!
+  @versini/ui-dropdown v1.1.0
+  © 2025 gizmette.com
+*/
+try {
+  if (!window.__VERSINI_UI_DROPDOWN__) {
+    window.__VERSINI_UI_DROPDOWN__ = {
+      version: "1.1.0",
+      buildTime: "12/15/2025 01:21 PM EST",
+      homepage: "https://www.npmjs.com/package/@versini/ui-dropdown",
+      license: "MIT",
+    };
+  }
+} catch (error) {
+  // nothing to declare officer
+}
+
+
+;// CONCATENATED MODULE: ./src/components/DropdownMenu/DropdownMenuTypes.ts
+
+

package/dist/DropdownMenu/utilities.d.ts

@@ -0,0 +1 @@
+export declare const getDisplayName: (element: unknown) => string;

package/dist/DropdownMenu/utilities.js

@@ -0,0 +1,36 @@
+/*!
+  @versini/ui-dropdown v1.1.0
+  © 2025 gizmette.com
+*/
+try {
+  if (!window.__VERSINI_UI_DROPDOWN__) {
+    window.__VERSINI_UI_DROPDOWN__ = {
+      version: "1.1.0",
+      buildTime: "12/15/2025 01:21 PM EST",
+      homepage: "https://www.npmjs.com/package/@versini/ui-dropdown",
+      license: "MIT",
+    };
+  }
+} catch (error) {
+  // nothing to declare officer
+}
+
+
+;// CONCATENATED MODULE: ./src/components/DropdownMenu/utilities.ts
+const getDisplayName = (element)=>{
+    if (typeof element === "string") {
+        return element;
+    }
+    if (typeof element === "function") {
+        return element.displayName || element.name || "Component";
+    }
+    if (typeof element === "object" && element !== null && "type" in element) {
+        const type = element.type;
+        if (typeof type === "function" || typeof type === "object") {
+            /* v8 ignore next 4 */ return type.displayName || type.name || "Component";
+        }
+    }
+    return "Element";
+};
+
+export { getDisplayName };

package/dist/index.d.ts

@@ -0,0 +1,2 @@
+export * from "./DropdownMenu/DropdownMenu";
+export * from "./DropdownMenu/DropdownMenuItem";

package/dist/index.js

@@ -0,0 +1,24 @@
+/*!
+  @versini/ui-dropdown v1.1.0
+  © 2025 gizmette.com
+*/
+try {
+  if (!window.__VERSINI_UI_DROPDOWN__) {
+    window.__VERSINI_UI_DROPDOWN__ = {
+      version: "1.1.0",
+      buildTime: "12/15/2025 01:21 PM EST",
+      homepage: "https://www.npmjs.com/package/@versini/ui-dropdown",
+      license: "MIT",
+    };
+  }
+} catch (error) {
+  // nothing to declare officer
+}
+
+export * from "./DropdownMenu/DropdownMenu.js";
+export * from "./DropdownMenu/DropdownMenuItem.js";
+
+;// CONCATENATED MODULE: ./src/components/index.ts
+
+
+

package/package.json

@@ -0,0 +1,54 @@
+{
+	"name": "@versini/ui-dropdown",
+	"version": "1.1.0",
+	"license": "MIT",
+	"author": "Arno Versini",
+	"publishConfig": {
+		"access": "public"
+	},
+	"homepage": "https://www.npmjs.com/package/@versini/ui-dropdown",
+	"repository": {
+		"type": "git",
+		"url": "git@github.com:aversini/ui-components.git"
+	},
+	"type": "module",
+	"main": "dist/index.js",
+	"types": "dist/index.d.ts",
+	"files": [
+		"dist",
+		"README.md"
+	],
+	"scripts": {
+		"build:check": "tsc",
+		"build:js": "rslib build",
+		"build:types": "echo 'Types now built with rslib'",
+		"build": "npm-run-all --serial clean build:check build:js",
+		"clean": "rimraf dist tmp",
+		"dev:js": "rslib build --watch",
+		"dev:types": "echo 'Types now watched with rslib'",
+		"dev": "rslib build --watch",
+		"lint": "biome lint src",
+		"lint:fix": "biome check src --write --no-errors-on-unmatched",
+		"prettier": "biome check --write --no-errors-on-unmatched",
+		"start": "static-server dist --port 5173",
+		"test:coverage:ui": "vitest --coverage --ui",
+		"test:coverage": "vitest run --coverage",
+		"test:watch": "vitest",
+		"test": "vitest run"
+	},
+	"devDependencies": {
+		"@testing-library/jest-dom": "6.9.1",
+		"@versini/ui-types": "8.0.0"
+	},
+	"dependencies": {
+		"@radix-ui/react-dropdown-menu": "2.1.16",
+		"@tailwindcss/typography": "0.5.19",
+		"@versini/ui-icons": "4.15.1",
+		"clsx": "2.1.1",
+		"tailwindcss": "4.1.18"
+	},
+	"sideEffects": [
+		"**/*.css"
+	],
+	"gitHead": "28e13adabce18578034a9ca5553d7cfb9853c214"
+}