@gridui/dropdown-menu 0.0.0-stage → 1.0.0

package/README.md

@@ -1,3 +1,24 @@
-# Temporary Holding Version
+# @gridui/dropdown-menu
+
+Core family. Public API: `ContextMenu`, `ContextMenuProps`, `DropdownMenu`, `DropdownMenuContent`, `DropdownMenuContentProps`, `DropdownMenuItem`, `DropdownMenuItemProps`, `DropdownMenuLabel`, `DropdownMenuLabelProps`, `DropdownMenuProps`, `DropdownMenuRadioGroup`, `DropdownMenuRadioItem`, `DropdownMenuRadioItemProps`, `DropdownMenuTrigger`, `dropdownContentStyles`, `dropdownIndicatorStyles`, `dropdownItemStyles`, `dropdownLabelStyles`.
+
+Import components from `@gridui/dropdown-menu` and load `@gridui/dropdown-menu/styles.css` after Theme.
+Load styles for any composed dependency used by this family. Applications own routes, labels, state persistence, and branding.
+
+See [component ownership](../../docs/component-ownership.md) and [release history](.changeset/history/).
+
+## Buttons and dropdown menus
+
+Import `Button`, `ButtonLink`, `buttonClass`, `useAsyncAction`, and `downloadBlob`
+from [`@gridui/button`](../button/README.md). Load that package's `styles.css`
+for standalone buttons and actions composed by Controls. The Button package owns
+native semantics, variants, sizes, icons, loading, and action lifecycle behavior.
+Controls no longer contains or forwards those implementations.
+
+`@gridui/dropdown-menu` wraps Radix Dropdown Menu.
+It exports the root, trigger, portalled content, items, label, radio
+group, and radio item. Native primitive props and refs remain available. Load
+its separate `styles.css` export. Radix owns keyboard navigation, focus return,
+Escape dismissal, and viewport collisions. The portal avoids clipped grid
+boundaries.
 
-This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.

package/dist/context-menu/context-menu.d.ts

@@ -0,0 +1,17 @@
+/**
+ * @author WMXPY
+ * @package Dropdown Menu
+ * @namespace ContextMenu
+ * @description Context Menu
+ */
+import { type DropdownMenuContentProps } from "../dropdown-menu-content/dropdown-menu-content";
+import { type FC, type ReactNode } from "react";
+export type ContextMenuProps = Omit<DropdownMenuContentProps, "children"> & {
+    readonly x: number;
+    readonly y: number;
+    readonly label: string;
+    readonly children: ReactNode;
+    readonly onClose: () => void;
+};
+/** Uses the same menu semantics and presentation as trigger-based dropdowns. */
+export declare const ContextMenu: FC<ContextMenuProps>;

package/dist/dropdown-menu/dropdown-menu.d.ts

@@ -0,0 +1,10 @@
+/**
+ * @author WMXPY
+ * @package Dropdown Menu
+ * @namespace DropdownMenu
+ * @description Dropdown Menu
+ */
+import * as Primitive from "@radix-ui/react-dropdown-menu";
+import type { ComponentPropsWithRef, FC } from "react";
+export type DropdownMenuProps = ComponentPropsWithRef<typeof Primitive.Root>;
+export declare const DropdownMenu: FC<DropdownMenuProps>;

package/dist/dropdown-menu-content/dropdown-menu-content.d.ts

@@ -0,0 +1,10 @@
+/**
+ * @author WMXPY
+ * @package Dropdown Menu
+ * @namespace DropdownMenuContent
+ * @description Dropdown Menu Content
+ */
+import * as Primitive from "@radix-ui/react-dropdown-menu";
+import type { ComponentPropsWithRef, FC } from "react";
+export type DropdownMenuContentProps = ComponentPropsWithRef<typeof Primitive.Content>;
+export declare const DropdownMenuContent: FC<DropdownMenuContentProps>;

package/dist/dropdown-menu-content/style.d.ts

@@ -0,0 +1,7 @@
+/**
+ * @author WMXPY
+ * @package Dropdown Menu
+ * @namespace DropdownMenuContent
+ * @description Style
+ */
+export declare const dropdownContentStyles: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;

package/dist/dropdown-menu-item/dropdown-menu-item.d.ts

@@ -0,0 +1,10 @@
+/**
+ * @author WMXPY
+ * @package Dropdown Menu
+ * @namespace DropdownMenuItem
+ * @description Dropdown Menu Item
+ */
+import * as Primitive from "@radix-ui/react-dropdown-menu";
+import type { ComponentPropsWithRef, FC } from "react";
+export type DropdownMenuItemProps = ComponentPropsWithRef<typeof Primitive.Item>;
+export declare const DropdownMenuItem: FC<DropdownMenuItemProps>;

package/dist/dropdown-menu-label/dropdown-menu-label.d.ts

@@ -0,0 +1,10 @@
+/**
+ * @author WMXPY
+ * @package Dropdown Menu
+ * @namespace DropdownMenuLabel
+ * @description Dropdown Menu Label
+ */
+import * as Primitive from "@radix-ui/react-dropdown-menu";
+import type { ComponentPropsWithRef, FC } from "react";
+export type DropdownMenuLabelProps = ComponentPropsWithRef<typeof Primitive.Label>;
+export declare const DropdownMenuLabel: FC<DropdownMenuLabelProps>;

package/dist/dropdown-menu-label/style.d.ts

@@ -0,0 +1,7 @@
+/**
+ * @author WMXPY
+ * @package Dropdown Menu
+ * @namespace DropdownMenuLabel
+ * @description Style
+ */
+export declare const dropdownLabelStyles: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;

package/dist/dropdown-menu-radio-group/dropdown-menu-radio-group.d.ts

@@ -0,0 +1,8 @@
+/**
+ * @author WMXPY
+ * @package Dropdown Menu
+ * @namespace DropdownMenuRadioGroup
+ * @description Dropdown Menu Radio Group
+ */
+import * as Primitive from "@radix-ui/react-dropdown-menu";
+export declare const DropdownMenuRadioGroup: import("react").ForwardRefExoticComponent<Primitive.DropdownMenuRadioGroupProps & import("react").RefAttributes<HTMLDivElement>>;

package/dist/dropdown-menu-radio-item/dropdown-menu-radio-item.d.ts

@@ -0,0 +1,10 @@
+/**
+ * @author WMXPY
+ * @package Dropdown Menu
+ * @namespace DropdownMenuRadioItem
+ * @description Dropdown Menu Radio Item
+ */
+import * as Primitive from "@radix-ui/react-dropdown-menu";
+import type { ComponentPropsWithRef, FC } from "react";
+export type DropdownMenuRadioItemProps = ComponentPropsWithRef<typeof Primitive.RadioItem>;
+export declare const DropdownMenuRadioItem: FC<DropdownMenuRadioItemProps>;

package/dist/dropdown-menu-radio-item/style.d.ts

@@ -0,0 +1,7 @@
+/**
+ * @author WMXPY
+ * @package Dropdown Menu
+ * @namespace DropdownMenuRadioItem
+ * @description Style
+ */
+export declare const dropdownIndicatorStyles: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;

package/dist/dropdown-menu-trigger/dropdown-menu-trigger.d.ts

@@ -0,0 +1,8 @@
+/**
+ * @author WMXPY
+ * @package Dropdown Menu
+ * @namespace DropdownMenuTrigger
+ * @description Dropdown Menu Trigger
+ */
+import * as Primitive from "@radix-ui/react-dropdown-menu";
+export declare const DropdownMenuTrigger: import("react").ForwardRefExoticComponent<Primitive.DropdownMenuTriggerProps & import("react").RefAttributes<HTMLButtonElement>>;

package/dist/index.d.ts

@@ -0,0 +1,24 @@
+/**
+ * @author WMXPY
+ * @package Dropdown Menu
+ * @namespace Root
+ * @description Index
+ */
+export type { ContextMenuProps } from "./context-menu/context-menu";
+export { ContextMenu } from "./context-menu/context-menu";
+export type { DropdownMenuProps } from "./dropdown-menu/dropdown-menu";
+export { DropdownMenu } from "./dropdown-menu/dropdown-menu";
+export type { DropdownMenuContentProps } from "./dropdown-menu-content/dropdown-menu-content";
+export { DropdownMenuContent } from "./dropdown-menu-content/dropdown-menu-content";
+export { dropdownContentStyles } from "./dropdown-menu-content/style";
+export type { DropdownMenuItemProps } from "./dropdown-menu-item/dropdown-menu-item";
+export { DropdownMenuItem } from "./dropdown-menu-item/dropdown-menu-item";
+export type { DropdownMenuLabelProps } from "./dropdown-menu-label/dropdown-menu-label";
+export { DropdownMenuLabel } from "./dropdown-menu-label/dropdown-menu-label";
+export { dropdownLabelStyles } from "./dropdown-menu-label/style";
+export { DropdownMenuRadioGroup } from "./dropdown-menu-radio-group/dropdown-menu-radio-group";
+export type { DropdownMenuRadioItemProps } from "./dropdown-menu-radio-item/dropdown-menu-radio-item";
+export { DropdownMenuRadioItem } from "./dropdown-menu-radio-item/dropdown-menu-radio-item";
+export { dropdownIndicatorStyles } from "./dropdown-menu-radio-item/style";
+export { DropdownMenuTrigger } from "./dropdown-menu-trigger/dropdown-menu-trigger";
+export { dropdownItemStyles } from "./shared/style";

package/dist/index.js

@@ -0,0 +1,277 @@
+// src/dropdown-menu/dropdown-menu.tsx
+import { OverlayOpen, useOverlayState } from "@gridui/overlay";
+import * as Primitive from "@radix-ui/react-dropdown-menu";
+import { jsx } from "react/jsx-runtime";
+var DropdownMenu = (props) => {
+  const state = useOverlayState(props);
+  return /* @__PURE__ */ jsx(
+    OverlayOpen.Provider,
+    {
+      value: state.open,
+      children: /* @__PURE__ */ jsx(
+        Primitive.Root,
+        {
+          ...props,
+          ...state
+        }
+      )
+    }
+  );
+};
+
+// src/dropdown-menu-content/style.ts
+import { cn } from "@gridui/style-utils";
+import { cva } from "class-variance-authority";
+var dropdownContentStyles = cva(cn(
+  "gridui-dropdown-content",
+  "z-(--gridui-z-popover) min-w-44 max-w-[calc(100vw-2*var(--gridui-page-gutter))] max-h-(--radix-dropdown-menu-content-available-height) overflow-y-auto p-gridui-4 border border-solid border-border rounded-control text-foreground bg-background type-data",
+  "data-[state='closed']:pointer-events-none"
+));
+
+// src/dropdown-menu-content/dropdown-menu-content.tsx
+import { RetainedLayer } from "@gridui/overlay";
+import { cn as cn2 } from "@gridui/style-utils";
+import * as Primitive2 from "@radix-ui/react-dropdown-menu";
+import { jsx as jsx2 } from "react/jsx-runtime";
+var DropdownMenuContent = (props) => {
+  const {
+    className,
+    forceMount,
+    sideOffset = 8,
+    align = "end",
+    ...restProps
+  } = props;
+  const content = /* @__PURE__ */ jsx2(
+    Primitive2.Content,
+    {
+      ...restProps,
+      forceMount,
+      align,
+      sideOffset,
+      className: cn2(dropdownContentStyles(), className)
+    }
+  );
+  return /* @__PURE__ */ jsx2(
+    Primitive2.Portal,
+    {
+      forceMount,
+      children: forceMount ? /* @__PURE__ */ jsx2(RetainedLayer, { children: content }) : content
+    }
+  );
+};
+
+// src/dropdown-menu-trigger/dropdown-menu-trigger.tsx
+import * as Primitive3 from "@radix-ui/react-dropdown-menu";
+var DropdownMenuTrigger = Primitive3.Trigger;
+
+// src/context-menu/context-menu.tsx
+import { useEffect, useState } from "react";
+import { createPortal } from "react-dom";
+import { jsx as jsx3, jsxs } from "react/jsx-runtime";
+var ContextMenu = (props) => {
+  const { x, y, label, children, onClose, onCloseAutoFocus, onKeyDown, ...contentProps } = props;
+  const [returnFocus] = useState(() => {
+    return typeof document === "undefined" ? null : document.activeElement;
+  });
+  useEffect(() => {
+    const dismissWhenInactive = () => {
+      if (!document.hasFocus()) {
+        onClose();
+      }
+    };
+    window.addEventListener("blur", dismissWhenInactive);
+    return () => {
+      window.removeEventListener("blur", dismissWhenInactive);
+    };
+  }, [onClose]);
+  if (typeof document === "undefined") {
+    return null;
+  }
+  return createPortal(/* @__PURE__ */ jsxs(
+    DropdownMenu,
+    {
+      open: true,
+      modal: false,
+      onOpenChange: (open) => {
+        if (!open) {
+          onClose();
+        }
+      },
+      children: [
+        /* @__PURE__ */ jsx3(
+          DropdownMenuTrigger,
+          {
+            asChild: true,
+            children: /* @__PURE__ */ jsx3(
+              "button",
+              {
+                type: "button",
+                tabIndex: -1,
+                "aria-hidden": "true",
+                style: {
+                  position: "fixed",
+                  left: x,
+                  top: y,
+                  width: 0,
+                  height: 0,
+                  padding: 0,
+                  border: 0,
+                  opacity: 0,
+                  pointerEvents: "none"
+                }
+              }
+            )
+          }
+        ),
+        /* @__PURE__ */ jsx3(
+          DropdownMenuContent,
+          {
+            "aria-label": label,
+            side: "bottom",
+            align: "start",
+            sideOffset: 0,
+            collisionPadding: 8,
+            ...contentProps,
+            onCloseAutoFocus: (event) => {
+              onCloseAutoFocus?.(event);
+              if (event.defaultPrevented) {
+                return;
+              }
+              event.preventDefault();
+              if (document.activeElement === document.body && returnFocus instanceof HTMLElement && returnFocus.isConnected) {
+                returnFocus.focus();
+              }
+            },
+            onKeyDown: (event) => {
+              onKeyDown?.(event);
+              if (!event.defaultPrevented && event.key === "Tab") {
+                event.preventDefault();
+                onClose();
+              }
+            },
+            children
+          }
+        )
+      ]
+    },
+    `${x}:${y}`
+  ), document.body);
+};
+
+// src/shared/style.ts
+import { cn as cn3 } from "@gridui/style-utils";
+import { cva as cva2 } from "class-variance-authority";
+var dropdownItemStyles = cva2(cn3(
+  "gridui-dropdown-item",
+  "flex min-h-10 items-center gap-gridui-8 px-gridui-8 py-gridui-8 rounded-xs text-inherit no-underline outline-none cursor-pointer",
+  "data-highlighted:bg-surface data-highlighted:[box-shadow:inset_0_0_0_1px_var(--gridui-border)]",
+  "data-disabled:opacity-50 data-disabled:pointer-events-none"
+));
+
+// src/dropdown-menu-item/dropdown-menu-item.tsx
+import { cn as cn4 } from "@gridui/style-utils";
+import * as Primitive4 from "@radix-ui/react-dropdown-menu";
+import { jsx as jsx4 } from "react/jsx-runtime";
+var DropdownMenuItem = (props) => {
+  const {
+    className,
+    ...restProps
+  } = props;
+  return /* @__PURE__ */ jsx4(
+    Primitive4.Item,
+    {
+      ...restProps,
+      className: cn4(dropdownItemStyles(), className)
+    }
+  );
+};
+
+// src/dropdown-menu-label/style.ts
+import { cn as cn5 } from "@gridui/style-utils";
+import { cva as cva3 } from "class-variance-authority";
+var dropdownLabelStyles = cva3(cn5(
+  "gridui-dropdown-label",
+  "p-gridui-8 text-muted type-caption"
+));
+
+// src/dropdown-menu-label/dropdown-menu-label.tsx
+import { cn as cn6 } from "@gridui/style-utils";
+import * as Primitive5 from "@radix-ui/react-dropdown-menu";
+import { jsx as jsx5 } from "react/jsx-runtime";
+var DropdownMenuLabel = (props) => {
+  const {
+    className,
+    ...restProps
+  } = props;
+  return /* @__PURE__ */ jsx5(
+    Primitive5.Label,
+    {
+      ...restProps,
+      className: cn6(dropdownLabelStyles(), className)
+    }
+  );
+};
+
+// src/dropdown-menu-radio-group/dropdown-menu-radio-group.tsx
+import * as Primitive6 from "@radix-ui/react-dropdown-menu";
+var DropdownMenuRadioGroup = Primitive6.RadioGroup;
+
+// src/dropdown-menu-radio-item/style.ts
+import { cn as cn7 } from "@gridui/style-utils";
+import { cva as cva4 } from "class-variance-authority";
+var dropdownIndicatorStyles = cva4(cn7(
+  "gridui-dropdown-indicator",
+  "w-gridui-16 shrink-0 text-foreground"
+));
+
+// src/dropdown-menu-radio-item/dropdown-menu-radio-item.tsx
+import { cn as cn8 } from "@gridui/style-utils";
+import * as Primitive7 from "@radix-ui/react-dropdown-menu";
+import { Check } from "lucide-react";
+import { jsx as jsx6, jsxs as jsxs2 } from "react/jsx-runtime";
+var DropdownMenuRadioItem = (props) => {
+  const {
+    className,
+    children,
+    ...restProps
+  } = props;
+  return /* @__PURE__ */ jsxs2(
+    Primitive7.RadioItem,
+    {
+      ...restProps,
+      className: cn8(dropdownItemStyles(), className),
+      children: [
+        /* @__PURE__ */ jsx6(
+          "span",
+          {
+            className: cn8(dropdownIndicatorStyles()),
+            "aria-hidden": "true",
+            children: /* @__PURE__ */ jsx6(Primitive7.ItemIndicator, { children: /* @__PURE__ */ jsx6(
+              Check,
+              {
+                size: 16,
+                "aria-hidden": "true"
+              }
+            ) })
+          }
+        ),
+        children
+      ]
+    }
+  );
+};
+export {
+  ContextMenu,
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuRadioGroup,
+  DropdownMenuRadioItem,
+  DropdownMenuTrigger,
+  dropdownContentStyles,
+  dropdownIndicatorStyles,
+  dropdownItemStyles,
+  dropdownLabelStyles
+};
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../src/dropdown-menu/dropdown-menu.tsx", "../src/dropdown-menu-content/style.ts", "../src/dropdown-menu-content/dropdown-menu-content.tsx", "../src/dropdown-menu-trigger/dropdown-menu-trigger.tsx", "../src/context-menu/context-menu.tsx", "../src/shared/style.ts", "../src/dropdown-menu-item/dropdown-menu-item.tsx", "../src/dropdown-menu-label/style.ts", "../src/dropdown-menu-label/dropdown-menu-label.tsx", "../src/dropdown-menu-radio-group/dropdown-menu-radio-group.tsx", "../src/dropdown-menu-radio-item/style.ts", "../src/dropdown-menu-radio-item/dropdown-menu-radio-item.tsx"],
+  "sourcesContent": ["/**\n * @author WMXPY\n * @package Dropdown Menu\n * @namespace DropdownMenu\n * @description Dropdown Menu\n */\n\nimport { OverlayOpen, useOverlayState } from \"@gridui/overlay\";\nimport * as Primitive from \"@radix-ui/react-dropdown-menu\";\nimport type { ComponentPropsWithRef, FC } from \"react\";\n\nexport type DropdownMenuProps = ComponentPropsWithRef<typeof Primitive.Root>;\n\nexport const DropdownMenu: FC<DropdownMenuProps> = (props: DropdownMenuProps) => {\n    const state = useOverlayState(props);\n    return (<OverlayOpen.Provider\n        value={state.open}\n    >\n        <Primitive.Root\n            {...props}\n            {...state}\n        />\n    </OverlayOpen.Provider>);\n};\n", "/**\n * @author WMXPY\n * @package Dropdown Menu\n * @namespace DropdownMenuContent\n * @description Style\n */\n\nimport { cn } from \"@gridui/style-utils\";\nimport { cva } from \"class-variance-authority\";\n\nexport const dropdownContentStyles = cva(cn(\n    \"gridui-dropdown-content\",\n    \"z-(--gridui-z-popover) min-w-44 max-w-[calc(100vw-2*var(--gridui-page-gutter))] max-h-(--radix-dropdown-menu-content-available-height) overflow-y-auto p-gridui-4 border border-solid border-border rounded-control text-foreground bg-background type-data\",\n    \"data-[state='closed']:pointer-events-none\",\n));\n", "/**\n * @author WMXPY\n * @package Dropdown Menu\n * @namespace DropdownMenuContent\n * @description Dropdown Menu Content\n */\n\nimport { dropdownContentStyles } from \"./style\";\nimport { RetainedLayer } from \"@gridui/overlay\";\nimport { cn } from \"@gridui/style-utils\";\nimport * as Primitive from \"@radix-ui/react-dropdown-menu\";\nimport type { ComponentPropsWithRef, FC } from \"react\";\n\nexport type DropdownMenuContentProps = ComponentPropsWithRef<typeof Primitive.Content>;\n\nexport const DropdownMenuContent: FC<DropdownMenuContentProps> = (props: DropdownMenuContentProps) => {\n    const {\n        className,\n        forceMount,\n        sideOffset = 8,\n        align = \"end\",\n        ...restProps\n    } = props;\n    const content = (<Primitive.Content\n        {...restProps}\n        forceMount={forceMount}\n        align={align}\n        sideOffset={sideOffset}\n        className={cn(dropdownContentStyles(), className)}\n    />);\n    return (<Primitive.Portal\n        forceMount={forceMount}\n    >\n        {forceMount ? (<RetainedLayer>\n            {content}\n        </RetainedLayer>) : content}\n    </Primitive.Portal>);\n};\n", "/**\n * @author WMXPY\n * @package Dropdown Menu\n * @namespace DropdownMenuTrigger\n * @description Dropdown Menu Trigger\n */\n\nimport * as Primitive from \"@radix-ui/react-dropdown-menu\";\n\nexport const DropdownMenuTrigger = Primitive.Trigger;\n", "/**\n * @author WMXPY\n * @package Dropdown Menu\n * @namespace ContextMenu\n * @description Context Menu\n */\n\nimport { DropdownMenu } from \"../dropdown-menu/dropdown-menu\";\nimport { DropdownMenuContent, type DropdownMenuContentProps } from \"../dropdown-menu-content/dropdown-menu-content\";\nimport { DropdownMenuTrigger } from \"../dropdown-menu-trigger/dropdown-menu-trigger\";\nimport { type FC, type ReactNode, useEffect, useState } from \"react\";\nimport { createPortal } from \"react-dom\";\n\nexport type ContextMenuProps = Omit<DropdownMenuContentProps, \"children\"> & {\n    readonly x: number;\n    readonly y: number;\n    readonly label: string;\n    readonly children: ReactNode;\n    readonly onClose: () => void;\n};\n\n/** Uses the same menu semantics and presentation as trigger-based dropdowns. */\nexport const ContextMenu: FC<ContextMenuProps> = (props: ContextMenuProps) => {\n    const { x, y, label, children, onClose, onCloseAutoFocus, onKeyDown, ...contentProps } = props;\n\n    const [returnFocus] = useState(() => {\n        return typeof document === \"undefined\" ? null : document.activeElement;\n    });\n    useEffect(() => {\n\n        const dismissWhenInactive = () => {\n\n            if (!document.hasFocus()) {\n                onClose();\n            }\n        };\n        window.addEventListener(\"blur\", dismissWhenInactive);\n\n        return () => {\n\n            window.removeEventListener(\"blur\", dismissWhenInactive);\n        };\n    }, [onClose]);\n\n    if (typeof document === \"undefined\") {\n        return null;\n    }\n    return createPortal((<DropdownMenu\n        key={`${x}:${y}`}\n        open\n        modal={false}\n        onOpenChange={open => {\n\n            if (!open) {\n                onClose();\n            }\n        }}\n    >\n        <DropdownMenuTrigger\n            asChild\n        >\n            <button\n                type=\"button\"\n                tabIndex={-1}\n                aria-hidden=\"true\"\n                style={{\n                    position: \"fixed\",\n                    left: x,\n                    top: y,\n                    width: 0,\n                    height: 0,\n                    padding: 0,\n                    border: 0,\n                    opacity: 0,\n                    pointerEvents: \"none\",\n                }}\n            />\n        </DropdownMenuTrigger>\n        <DropdownMenuContent\n            aria-label={label}\n            side=\"bottom\"\n            align=\"start\"\n            sideOffset={0}\n            collisionPadding={8}\n            {...contentProps}\n            onCloseAutoFocus={event => {\n                onCloseAutoFocus?.(event);\n                if (event.defaultPrevented) {\n                    return;\n                }\n                event.preventDefault();\n                if (document.activeElement === document.body\n                    && returnFocus instanceof HTMLElement\n                    && returnFocus.isConnected) {\n                    returnFocus.focus();\n                }\n            }}\n            onKeyDown={event => {\n\n                onKeyDown?.(event);\n                if (!event.defaultPrevented && event.key === \"Tab\") {\n                    event.preventDefault();\n                    onClose();\n                }\n            }}\n        >\n            {children}\n        </DropdownMenuContent>\n    </DropdownMenu>), document.body);\n};\n", "/**\n * @author WMXPY\n * @package Dropdown Menu\n * @namespace Shared\n * @description Style\n */\n\nimport { cn } from \"@gridui/style-utils\";\nimport { cva } from \"class-variance-authority\";\n\nexport const dropdownItemStyles = cva(cn(\n    \"gridui-dropdown-item\",\n    \"flex min-h-10 items-center gap-gridui-8 px-gridui-8 py-gridui-8 rounded-xs text-inherit no-underline outline-none cursor-pointer\",\n    \"data-highlighted:bg-surface data-highlighted:[box-shadow:inset_0_0_0_1px_var(--gridui-border)]\",\n    \"data-disabled:opacity-50 data-disabled:pointer-events-none\",\n));\n", "/**\n * @author WMXPY\n * @package Dropdown Menu\n * @namespace DropdownMenuItem\n * @description Dropdown Menu Item\n */\n\nimport { dropdownItemStyles } from \"../shared/style\";\nimport { cn } from \"@gridui/style-utils\";\nimport * as Primitive from \"@radix-ui/react-dropdown-menu\";\nimport type { ComponentPropsWithRef, FC } from \"react\";\n\nexport type DropdownMenuItemProps = ComponentPropsWithRef<typeof Primitive.Item>;\n\nexport const DropdownMenuItem: FC<DropdownMenuItemProps> = (props: DropdownMenuItemProps) => {\n    const {\n        className,\n        ...restProps\n    } = props;\n    return (<Primitive.Item\n        {...restProps}\n        className={cn(dropdownItemStyles(), className)}\n    />);\n};\n", "/**\n * @author WMXPY\n * @package Dropdown Menu\n * @namespace DropdownMenuLabel\n * @description Style\n */\n\nimport { cn } from \"@gridui/style-utils\";\nimport { cva } from \"class-variance-authority\";\n\nexport const dropdownLabelStyles = cva(cn(\n    \"gridui-dropdown-label\",\n    \"p-gridui-8 text-muted type-caption\",\n));\n", "/**\n * @author WMXPY\n * @package Dropdown Menu\n * @namespace DropdownMenuLabel\n * @description Dropdown Menu Label\n */\n\nimport { dropdownLabelStyles } from \"./style\";\nimport { cn } from \"@gridui/style-utils\";\nimport * as Primitive from \"@radix-ui/react-dropdown-menu\";\nimport type { ComponentPropsWithRef, FC } from \"react\";\n\nexport type DropdownMenuLabelProps = ComponentPropsWithRef<typeof Primitive.Label>;\n\nexport const DropdownMenuLabel: FC<DropdownMenuLabelProps> = (props: DropdownMenuLabelProps) => {\n    const {\n        className,\n        ...restProps\n    } = props;\n    return (<Primitive.Label\n        {...restProps}\n        className={cn(dropdownLabelStyles(), className)}\n    />);\n};\n", "/**\n * @author WMXPY\n * @package Dropdown Menu\n * @namespace DropdownMenuRadioGroup\n * @description Dropdown Menu Radio Group\n */\n\nimport * as Primitive from \"@radix-ui/react-dropdown-menu\";\n\nexport const DropdownMenuRadioGroup = Primitive.RadioGroup;\n", "/**\n * @author WMXPY\n * @package Dropdown Menu\n * @namespace DropdownMenuRadioItem\n * @description Style\n */\n\nimport { cn } from \"@gridui/style-utils\";\nimport { cva } from \"class-variance-authority\";\n\nexport const dropdownIndicatorStyles = cva(cn(\n    \"gridui-dropdown-indicator\",\n    \"w-gridui-16 shrink-0 text-foreground\",\n));\n", "/**\n * @author WMXPY\n * @package Dropdown Menu\n * @namespace DropdownMenuRadioItem\n * @description Dropdown Menu Radio Item\n */\n\nimport { dropdownItemStyles } from \"../shared/style\";\nimport { dropdownIndicatorStyles } from \"./style\";\nimport { cn } from \"@gridui/style-utils\";\nimport * as Primitive from \"@radix-ui/react-dropdown-menu\";\nimport { Check } from \"lucide-react\";\nimport type { ComponentPropsWithRef, FC } from \"react\";\n\nexport type DropdownMenuRadioItemProps = ComponentPropsWithRef<typeof Primitive.RadioItem>;\n\nexport const DropdownMenuRadioItem: FC<DropdownMenuRadioItemProps> = (props: DropdownMenuRadioItemProps) => {\n    const {\n        className,\n        children,\n        ...restProps\n    } = props;\n    return (<Primitive.RadioItem\n        {...restProps}\n        className={cn(dropdownItemStyles(), className)}\n    >\n        <span\n            className={cn(dropdownIndicatorStyles())}\n            aria-hidden=\"true\"\n        >\n            <Primitive.ItemIndicator>\n                <Check\n                    size={16}\n                    aria-hidden=\"true\"\n                />\n            </Primitive.ItemIndicator>\n        </span>\n        {children}\n    </Primitive.RadioItem>);\n};\n"],
+  "mappings": "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",
+  "names": ["cn", "Primitive", "jsx", "Primitive", "jsx", "cn", "cva", "cn", "Primitive", "jsx", "cn", "cva", "cn", "Primitive", "jsx", "Primitive", "cn", "cva", "cn", "Primitive", "jsx", "jsxs"]
+}

package/dist/shared/style.d.ts

@@ -0,0 +1,7 @@
+/**
+ * @author WMXPY
+ * @package Dropdown Menu
+ * @namespace Shared
+ * @description Style
+ */
+export declare const dropdownItemStyles: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;

package/dist/styles.css

@@ -0,0 +1,232 @@
+/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */
+@layer properties;
+@layer theme, base, components, utilities;
+@layer theme {
+  :root, :host {
+    --spacing: 0.25rem;
+    --radius-xs: 0.125rem;
+  }
+}
+@layer utilities {
+  .fixed {
+    position: fixed;
+  }
+  .z-\(--gridui-z-popover\) {
+    z-index: var(--gridui-z-popover);
+  }
+  .flex {
+    display: flex;
+  }
+  .max-h-\(--radix-dropdown-menu-content-available-height\) {
+    max-height: var(--radix-dropdown-menu-content-available-height);
+  }
+  .min-h-10 {
+    min-height: calc(var(--spacing) * 10);
+  }
+  .w-gridui-16 {
+    width: var(--gridui-space-16);
+  }
+  .max-w-\[calc\(100vw-2\*var\(--gridui-page-gutter\)\)\] {
+    max-width: calc(100vw - 2 * var(--gridui-page-gutter));
+  }
+  .min-w-44 {
+    min-width: calc(var(--spacing) * 44);
+  }
+  .shrink-0 {
+    flex-shrink: 0;
+  }
+  .cursor-pointer {
+    cursor: pointer;
+  }
+  .items-center {
+    align-items: center;
+  }
+  .gap-gridui-8 {
+    gap: var(--gridui-space-8);
+  }
+  .overflow-y-auto {
+    overflow-y: auto;
+  }
+  .rounded-control {
+    border-radius: var(--gridui-control-radius);
+  }
+  .rounded-xs {
+    border-radius: var(--radius-xs);
+  }
+  .border {
+    border-style: var(--tw-border-style);
+    border-width: 1px;
+  }
+  .border-solid {
+    --tw-border-style: solid;
+    border-style: solid;
+  }
+  .border-border {
+    border-color: var(--gridui-border);
+  }
+  .bg-background {
+    background-color: var(--gridui-background);
+  }
+  .p-gridui-4 {
+    padding: var(--gridui-space-4);
+  }
+  .p-gridui-8 {
+    padding: var(--gridui-space-8);
+  }
+  .px-gridui-8 {
+    padding-inline: var(--gridui-space-8);
+  }
+  .py-gridui-8 {
+    padding-block: var(--gridui-space-8);
+  }
+  .type-data {
+    font: var(--gridui-type-data);
+    letter-spacing: normal;
+    font-variant-numeric: tabular-nums;
+  }
+  .type-caption {
+    font: var(--gridui-type-caption);
+    letter-spacing: normal;
+  }
+  .text-foreground {
+    color: var(--gridui-foreground);
+  }
+  .text-inherit {
+    color: inherit;
+  }
+  .text-muted {
+    color: var(--gridui-muted);
+  }
+  .no-underline {
+    text-decoration-line: none;
+  }
+  .blur {
+    --tw-blur: blur(8px);
+    filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);
+  }
+  .outline-none {
+    --tw-outline-style: none;
+    outline-style: none;
+  }
+  .data-disabled\:pointer-events-none[data-disabled] {
+    pointer-events: none;
+  }
+  .data-disabled\:opacity-50[data-disabled] {
+    opacity: 50%;
+  }
+  .data-highlighted\:bg-surface[data-highlighted] {
+    background-color: var(--gridui-surface);
+  }
+  .data-highlighted\:\[box-shadow\:inset_0_0_0_1px_var\(--gridui-border\)\][data-highlighted] {
+    box-shadow: inset 0 0 0 1px var(--gridui-border);
+  }
+  .data-\[state\=\'closed\'\]\:pointer-events-none[data-state='closed'] {
+    pointer-events: none;
+  }
+}
+@layer components {
+  .gridui-dropdown-content {
+    transform-origin: var(--radix-dropdown-menu-content-transform-origin);
+  }
+  .gridui-dropdown-content[data-side="bottom"] {
+    --gridui-surface-offset-y: calc(-1 * var(--gridui-motion-distance));
+  }
+  .gridui-dropdown-content[data-side="top"] {
+    --gridui-surface-offset-y: var(--gridui-motion-distance);
+  }
+  .gridui-dropdown-content[data-side="left"] {
+    --gridui-surface-offset-x: var(--gridui-motion-distance);
+  }
+  .gridui-dropdown-content[data-side="right"] {
+    --gridui-surface-offset-x: calc(-1 * var(--gridui-motion-distance));
+  }
+  .gridui-dropdown-content[data-state="open"] {
+    animation: gridui-surface-enter var(--gridui-motion-duration-normal) var(--gridui-motion-ease-out) both;
+  }
+  .gridui-dropdown-content[data-state="closed"] {
+    animation: gridui-surface-exit var(--gridui-motion-duration-quick) var(--gridui-motion-ease-in) both;
+  }
+  @media (prefers-reduced-motion: reduce) {
+    .gridui-dropdown-content[data-state] {
+      animation: none;
+    }
+  }
+}
+@property --tw-border-style {
+  syntax: "*";
+  inherits: false;
+  initial-value: solid;
+}
+@property --tw-blur {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-brightness {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-contrast {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-grayscale {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-hue-rotate {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-invert {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-opacity {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-saturate {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-sepia {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-drop-shadow {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-drop-shadow-color {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-drop-shadow-alpha {
+  syntax: "<percentage>";
+  inherits: false;
+  initial-value: 100%;
+}
+@property --tw-drop-shadow-size {
+  syntax: "*";
+  inherits: false;
+}
+@layer properties {
+  @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) {
+    *, ::before, ::after, ::backdrop {
+      --tw-border-style: solid;
+      --tw-blur: initial;
+      --tw-brightness: initial;
+      --tw-contrast: initial;
+      --tw-grayscale: initial;
+      --tw-hue-rotate: initial;
+      --tw-invert: initial;
+      --tw-opacity: initial;
+      --tw-saturate: initial;
+      --tw-sepia: initial;
+      --tw-drop-shadow: initial;
+      --tw-drop-shadow-color: initial;
+      --tw-drop-shadow-alpha: 100%;
+      --tw-drop-shadow-size: initial;
+    }
+  }
+}

package/package.json

@@ -1,6 +1,54 @@
 {
   "name": "@gridui/dropdown-menu",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
+  "version": "1.0.0",
+  "description": "GridUI React dropdown menu",
+  "license": "UNLICENSED",
+  "type": "module",
+  "files": [
+    "dist",
+    "README.md"
+  ],
+  "sideEffects": [
+    "**/*.css"
+  ],
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    },
+    "./styles.css": "./dist/styles.css"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "peerDependencies": {
+    "react": "^19.2.0",
+    "react-dom": "^19.2.0"
+  },
+  "dependencies": {
+    "@gridui/overlay": "^1.0.0",
+    "@gridui/style-utils": "^2.1.2",
+    "@gridui/theme": "^2.1.2",
+    "@radix-ui/react-dropdown-menu": "2.2.1",
+    "class-variance-authority": "0.7.1",
+    "lucide-react": "1.62.0"
+  },
+  "devDependencies": {
+    "@gridui-internal/configuration": "0.0.0",
+    "@jest/globals": "30.5.2",
+    "@types/jest": "30.0.0",
+    "@types/node": "26.6.5",
+    "@types/react": "19.3.0",
+    "@types/react-dom": "19.3.0",
+    "jest": "30.5.2",
+    "react": "19.3.1",
+    "react-dom": "19.3.1",
+    "typescript": "6.0.3"
+  },
+  "scripts": {
+    "build": "node ../../scripts/compilation/package.ts",
+    "compile": "tsc --project tsconfig.json",
+    "test": "jest --passWithNoTests",
+    "coverage": "jest --coverage --passWithNoTests"
+  }
 }