@byldpartners/ui 0.0.1

package/src/components/DropdownMenu/DropdownMenu.native.tsx

@@ -0,0 +1,272 @@
+import {
+  createContext,
+  useContext,
+} from "react";
+import {
+  View,
+  Text,
+  Modal,
+  Pressable,
+  ScrollView,
+} from "react-native";
+import { cn } from "../../utils/cn";
+import type {
+  DropdownMenuProps,
+  DropdownMenuTriggerProps,
+  DropdownMenuContentProps,
+  DropdownMenuItemProps,
+  DropdownMenuSeparatorProps,
+  DropdownMenuLabelProps,
+  DropdownMenuCheckboxItemProps,
+  DropdownMenuRadioGroupProps,
+  DropdownMenuRadioItemProps,
+  DropdownMenuSubProps,
+  DropdownMenuSubTriggerProps,
+  DropdownMenuSubContentProps,
+} from "./DropdownMenu.types";
+import { useDropdownMenu } from "./useDropdownMenu";
+
+interface DropdownMenuContextValue {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+}
+
+const DropdownMenuContext = createContext<DropdownMenuContextValue>({
+  open: false,
+  onOpenChange: () => {},
+});
+
+function DropdownMenu({
+  children,
+  open: controlledOpen,
+  onOpenChange: controlledOnOpenChange,
+}: DropdownMenuProps) {
+  const { open, onOpenChange } = useDropdownMenu({
+    open: controlledOpen,
+    onOpenChange: controlledOnOpenChange,
+  });
+
+  return (
+    <DropdownMenuContext.Provider value={{ open, onOpenChange }}>
+      {children}
+    </DropdownMenuContext.Provider>
+  );
+}
+
+DropdownMenu.displayName = "DropdownMenu";
+
+interface DropdownMenuTriggerNativeProps extends DropdownMenuTriggerProps {
+  onPress?: () => void;
+}
+
+function DropdownMenuTrigger({ children, onPress }: DropdownMenuTriggerNativeProps) {
+  const { onOpenChange } = useContext(DropdownMenuContext);
+  return (
+    <Pressable
+      onPress={() => {
+        onOpenChange(true);
+        onPress?.();
+      }}
+    >
+      {children}
+    </Pressable>
+  );
+}
+DropdownMenuTrigger.displayName = "DropdownMenuTrigger";
+
+interface DropdownMenuContentNativeProps extends DropdownMenuContentProps {}
+
+function DropdownMenuContent({ children, className }: DropdownMenuContentNativeProps) {
+  const { open, onOpenChange } = useContext(DropdownMenuContext);
+
+  if (!open) return null;
+
+  return (
+    <Modal
+      visible={open}
+      transparent
+      animationType="fade"
+      onRequestClose={() => onOpenChange(false)}
+    >
+      <Pressable
+        className="flex-1 justify-center items-center"
+        style={{ backgroundColor: "rgba(0,0,0,0.5)" }}
+        onPress={() => onOpenChange(false)}
+      >
+        <View
+          className={cn(
+            "bg-popover rounded-lg p-1 min-w-[200px] max-w-[280px] max-h-[400px] shadow-md elevation-3",
+            className,
+          )}
+        >
+          <ScrollView bounces={false}>{children}</ScrollView>
+        </View>
+      </Pressable>
+    </Modal>
+  );
+}
+DropdownMenuContent.displayName = "DropdownMenuContent";
+
+interface DropdownMenuItemNativeProps extends DropdownMenuItemProps {}
+
+function DropdownMenuItem({
+  children,
+  onSelect,
+  disabled,
+  className,
+}: DropdownMenuItemNativeProps) {
+  const { onOpenChange } = useContext(DropdownMenuContext);
+  return (
+    <Pressable
+      className={cn(
+        "flex-row items-center px-3 py-2.5 rounded-sm",
+        disabled && "opacity-50",
+        className,
+      )}
+      disabled={disabled}
+      onPress={() => {
+        onSelect?.();
+        onOpenChange(false);
+      }}
+    >
+      <Text
+        className={cn(
+          "text-sm text-popover-foreground",
+          disabled && "text-muted-foreground",
+        )}
+      >
+        {children}
+      </Text>
+    </Pressable>
+  );
+}
+DropdownMenuItem.displayName = "DropdownMenuItem";
+
+interface DropdownMenuSeparatorNativeProps extends DropdownMenuSeparatorProps {}
+
+function DropdownMenuSeparator({ className }: DropdownMenuSeparatorNativeProps) {
+  return (
+    <View
+      className={cn("bg-border my-1 -mx-1 h-[0.5px]", className)}
+    />
+  );
+}
+DropdownMenuSeparator.displayName = "DropdownMenuSeparator";
+
+interface DropdownMenuLabelNativeProps extends DropdownMenuLabelProps {}
+
+function DropdownMenuLabel({ children, className }: DropdownMenuLabelNativeProps) {
+  return (
+    <Text
+      className={cn(
+        "px-3 py-1.5 text-xs font-semibold text-muted-foreground",
+        className,
+      )}
+    >
+      {children}
+    </Text>
+  );
+}
+DropdownMenuLabel.displayName = "DropdownMenuLabel";
+
+interface DropdownMenuCheckboxItemNativeProps extends DropdownMenuCheckboxItemProps {}
+
+function DropdownMenuCheckboxItem({
+  children,
+  checked,
+  onCheckedChange,
+  disabled,
+  className,
+}: DropdownMenuCheckboxItemNativeProps) {
+  return (
+    <Pressable
+      className={cn(
+        "flex-row items-center px-3 py-2.5 rounded-sm pl-9",
+        disabled && "opacity-50",
+        className,
+      )}
+      disabled={disabled}
+      onPress={() => {
+        onCheckedChange?.(!checked);
+      }}
+    >
+      <View className="absolute left-3 w-4 h-4 justify-center items-center">
+        {checked && <Text className="text-xs text-popover-foreground">✓</Text>}
+      </View>
+      <Text className="text-sm text-popover-foreground">{children}</Text>
+    </Pressable>
+  );
+}
+DropdownMenuCheckboxItem.displayName = "DropdownMenuCheckboxItem";
+
+function DropdownMenuRadioGroup({
+  children,
+}: DropdownMenuRadioGroupProps) {
+  return <>{children}</>;
+}
+DropdownMenuRadioGroup.displayName = "DropdownMenuRadioGroup";
+
+interface DropdownMenuRadioItemNativeProps extends DropdownMenuRadioItemProps {}
+
+function DropdownMenuRadioItem({
+  children,
+  value: _value,
+  className,
+}: DropdownMenuRadioItemNativeProps) {
+  return (
+    <View
+      className={cn(
+        "flex-row items-center px-3 py-2.5 rounded-sm pl-9",
+        className,
+      )}
+    >
+      <View className="absolute left-3 w-4 h-4 justify-center items-center">
+        <View className="w-1.5 h-1.5 rounded-full bg-popover-foreground" />
+      </View>
+      <Text className="text-sm text-popover-foreground">{children}</Text>
+    </View>
+  );
+}
+DropdownMenuRadioItem.displayName = "DropdownMenuRadioItem";
+
+function DropdownMenuSub({ children }: DropdownMenuSubProps) {
+  return <>{children}</>;
+}
+DropdownMenuSub.displayName = "DropdownMenuSub";
+
+interface DropdownMenuSubTriggerNativeProps extends DropdownMenuSubTriggerProps {}
+
+function DropdownMenuSubTrigger({ children, className }: DropdownMenuSubTriggerNativeProps) {
+  return (
+    <View
+      className={cn(
+        "flex-row items-center px-3 py-2.5 rounded-sm",
+        className,
+      )}
+    >
+      <Text className="text-sm text-popover-foreground">{children}</Text>
+      <Text className="ml-auto text-base text-muted-foreground">›</Text>
+    </View>
+  );
+}
+DropdownMenuSubTrigger.displayName = "DropdownMenuSubTrigger";
+
+function DropdownMenuSubContent({ children }: DropdownMenuSubContentProps) {
+  return <View>{children}</View>;
+}
+DropdownMenuSubContent.displayName = "DropdownMenuSubContent";
+
+export {
+  DropdownMenu,
+  DropdownMenuTrigger,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuSeparator,
+  DropdownMenuLabel,
+  DropdownMenuCheckboxItem,
+  DropdownMenuRadioGroup,
+  DropdownMenuRadioItem,
+  DropdownMenuSub,
+  DropdownMenuSubTrigger,
+  DropdownMenuSubContent,
+};

package/src/components/DropdownMenu/DropdownMenu.stories.tsx

@@ -0,0 +1,36 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import {
+  DropdownMenu,
+  DropdownMenuTrigger,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+} from "./DropdownMenu.web";
+
+const meta: Meta<typeof DropdownMenu> = {
+  title: "Components/DropdownMenu",
+  component: DropdownMenu,
+  tags: ["autodocs"],
+  parameters: { layout: "centered" },
+};
+
+export default meta;
+type Story = StoryObj<typeof DropdownMenu>;
+
+export const Default: Story = {
+  render: () => (
+    <DropdownMenu>
+      <DropdownMenuTrigger asChild>
+        <button>Open Menu</button>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent>
+        <DropdownMenuLabel>My Account</DropdownMenuLabel>
+        <DropdownMenuSeparator />
+        <DropdownMenuItem>Profile</DropdownMenuItem>
+        <DropdownMenuItem>Settings</DropdownMenuItem>
+        <DropdownMenuItem>Log out</DropdownMenuItem>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  ),
+};

package/src/components/DropdownMenu/DropdownMenu.types.ts

@@ -0,0 +1,73 @@
+import type { ReactNode } from "react";
+
+export interface DropdownMenuProps {
+  children?: ReactNode;
+  open?: boolean;
+  onOpenChange?: (open: boolean) => void;
+}
+
+export interface DropdownMenuTriggerProps {
+  children?: ReactNode;
+  className?: string;
+  asChild?: boolean;
+}
+
+export interface DropdownMenuContentProps {
+  children?: ReactNode;
+  className?: string;
+  align?: "start" | "center" | "end";
+  sideOffset?: number;
+}
+
+export interface DropdownMenuItemProps {
+  children?: ReactNode;
+  className?: string;
+  inset?: boolean;
+  disabled?: boolean;
+  onSelect?: () => void;
+}
+
+export interface DropdownMenuSeparatorProps {
+  className?: string;
+}
+
+export interface DropdownMenuLabelProps {
+  children?: ReactNode;
+  className?: string;
+  inset?: boolean;
+}
+
+export interface DropdownMenuCheckboxItemProps {
+  children?: ReactNode;
+  className?: string;
+  checked?: boolean;
+  onCheckedChange?: (checked: boolean) => void;
+  disabled?: boolean;
+}
+
+export interface DropdownMenuRadioGroupProps {
+  children?: ReactNode;
+  value?: string;
+  onValueChange?: (value: string) => void;
+}
+
+export interface DropdownMenuRadioItemProps {
+  children?: ReactNode;
+  className?: string;
+  value: string;
+}
+
+export interface DropdownMenuSubProps {
+  children?: ReactNode;
+}
+
+export interface DropdownMenuSubTriggerProps {
+  children?: ReactNode;
+  className?: string;
+  inset?: boolean;
+}
+
+export interface DropdownMenuSubContentProps {
+  children?: ReactNode;
+  className?: string;
+}

package/src/components/DropdownMenu/DropdownMenu.web.tsx

@@ -0,0 +1,225 @@
+import { forwardRef } from "react";
+import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu";
+import { cn } from "../../utils/cn";
+
+function CheckIcon(props: React.SVGProps<SVGSVGElement>) {
+  return (
+    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" {...props}>
+      <path d="M20 6 9 17l-5-5"/>
+    </svg>
+  );
+}
+
+function ChevronRightIcon(props: React.SVGProps<SVGSVGElement>) {
+  return (
+    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" {...props}>
+      <path d="m9 18 6-6-6-6"/>
+    </svg>
+  );
+}
+
+function CircleIcon(props: React.SVGProps<SVGSVGElement>) {
+  return (
+    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" {...props}>
+      <circle cx="12" cy="12" r="10"/>
+    </svg>
+  );
+}
+
+const DropdownMenu = DropdownMenuPrimitive.Root;
+
+const DropdownMenuTrigger = DropdownMenuPrimitive.Trigger;
+
+const DropdownMenuGroup = DropdownMenuPrimitive.Group;
+
+const DropdownMenuPortal = DropdownMenuPrimitive.Portal;
+
+const DropdownMenuSub = DropdownMenuPrimitive.Sub;
+
+const DropdownMenuRadioGroup = DropdownMenuPrimitive.RadioGroup;
+
+const DropdownMenuSubTrigger = forwardRef<
+  React.ComponentRef<typeof DropdownMenuPrimitive.SubTrigger>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubTrigger> & {
+    inset?: boolean;
+  }
+>(({ className, inset, children, ...props }, ref) => (
+  <DropdownMenuPrimitive.SubTrigger
+    ref={ref}
+    className={cn(
+      "flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent data-[state=open]:bg-accent",
+      inset && "pl-8",
+      className,
+    )}
+    {...props}
+  >
+    {children}
+    <ChevronRightIcon className="ml-auto h-4 w-4" />
+  </DropdownMenuPrimitive.SubTrigger>
+));
+DropdownMenuSubTrigger.displayName =
+  DropdownMenuPrimitive.SubTrigger.displayName;
+
+const DropdownMenuSubContent = forwardRef<
+  React.ComponentRef<typeof DropdownMenuPrimitive.SubContent>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubContent>
+>(({ className, ...props }, ref) => (
+  <DropdownMenuPrimitive.SubContent
+    ref={ref}
+    className={cn(
+      "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg 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",
+      className,
+    )}
+    {...props}
+  />
+));
+DropdownMenuSubContent.displayName =
+  DropdownMenuPrimitive.SubContent.displayName;
+
+const DropdownMenuContent = forwardRef<
+  React.ComponentRef<typeof DropdownMenuPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Content>
+>(({ className, sideOffset = 4, ...props }, ref) => (
+  <DropdownMenuPrimitive.Portal>
+    <DropdownMenuPrimitive.Content
+      ref={ref}
+      sideOffset={sideOffset}
+      className={cn(
+        "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md 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",
+        className,
+      )}
+      {...props}
+    />
+  </DropdownMenuPrimitive.Portal>
+));
+DropdownMenuContent.displayName = DropdownMenuPrimitive.Content.displayName;
+
+const DropdownMenuItem = forwardRef<
+  React.ComponentRef<typeof DropdownMenuPrimitive.Item>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Item> & {
+    inset?: boolean;
+  }
+>(({ className, inset, ...props }, ref) => (
+  <DropdownMenuPrimitive.Item
+    ref={ref}
+    className={cn(
+      "relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      inset && "pl-8",
+      className,
+    )}
+    {...props}
+  />
+));
+DropdownMenuItem.displayName = DropdownMenuPrimitive.Item.displayName;
+
+const DropdownMenuCheckboxItem = forwardRef<
+  React.ComponentRef<typeof DropdownMenuPrimitive.CheckboxItem>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.CheckboxItem>
+>(({ className, children, checked, ...props }, ref) => (
+  <DropdownMenuPrimitive.CheckboxItem
+    ref={ref}
+    className={cn(
+      "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      className,
+    )}
+    checked={checked}
+    {...props}
+  >
+    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+      <DropdownMenuPrimitive.ItemIndicator>
+        <CheckIcon className="h-4 w-4" />
+      </DropdownMenuPrimitive.ItemIndicator>
+    </span>
+    {children}
+  </DropdownMenuPrimitive.CheckboxItem>
+));
+DropdownMenuCheckboxItem.displayName =
+  DropdownMenuPrimitive.CheckboxItem.displayName;
+
+const DropdownMenuRadioItem = forwardRef<
+  React.ComponentRef<typeof DropdownMenuPrimitive.RadioItem>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.RadioItem>
+>(({ className, children, ...props }, ref) => (
+  <DropdownMenuPrimitive.RadioItem
+    ref={ref}
+    className={cn(
+      "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      className,
+    )}
+    {...props}
+  >
+    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+      <DropdownMenuPrimitive.ItemIndicator>
+        <CircleIcon className="h-2 w-2 fill-current" />
+      </DropdownMenuPrimitive.ItemIndicator>
+    </span>
+    {children}
+  </DropdownMenuPrimitive.RadioItem>
+));
+DropdownMenuRadioItem.displayName =
+  DropdownMenuPrimitive.RadioItem.displayName;
+
+const DropdownMenuLabel = forwardRef<
+  React.ComponentRef<typeof DropdownMenuPrimitive.Label>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Label> & {
+    inset?: boolean;
+  }
+>(({ className, inset, ...props }, ref) => (
+  <DropdownMenuPrimitive.Label
+    ref={ref}
+    className={cn(
+      "px-2 py-1.5 text-sm font-semibold",
+      inset && "pl-8",
+      className,
+    )}
+    {...props}
+  />
+));
+DropdownMenuLabel.displayName = DropdownMenuPrimitive.Label.displayName;
+
+const DropdownMenuSeparator = forwardRef<
+  React.ComponentRef<typeof DropdownMenuPrimitive.Separator>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Separator>
+>(({ className, ...props }, ref) => (
+  <DropdownMenuPrimitive.Separator
+    ref={ref}
+    className={cn("-mx-1 my-1 h-px bg-muted", className)}
+    {...props}
+  />
+));
+DropdownMenuSeparator.displayName =
+  DropdownMenuPrimitive.Separator.displayName;
+
+const DropdownMenuShortcut = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLSpanElement>) => {
+  return (
+    <span
+      className={cn(
+        "ml-auto text-xs tracking-widest opacity-60",
+        className,
+      )}
+      {...props}
+    />
+  );
+};
+DropdownMenuShortcut.displayName = "DropdownMenuShortcut";
+
+export {
+  DropdownMenu,
+  DropdownMenuTrigger,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuCheckboxItem,
+  DropdownMenuRadioItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuShortcut,
+  DropdownMenuGroup,
+  DropdownMenuPortal,
+  DropdownMenuSub,
+  DropdownMenuSubContent,
+  DropdownMenuSubTrigger,
+  DropdownMenuRadioGroup,
+};

package/src/components/DropdownMenu/index.native.ts

@@ -0,0 +1,2 @@
+export { DropdownMenu, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuItem, DropdownMenuSeparator, DropdownMenuLabel, DropdownMenuCheckboxItem, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSub, DropdownMenuSubTrigger, DropdownMenuSubContent } from "./DropdownMenu.native";
+export type { DropdownMenuProps } from "./DropdownMenu.types";

package/src/components/DropdownMenu/index.ts

@@ -0,0 +1,2 @@
+export * from "./DropdownMenu.web";
+export type * from "./DropdownMenu.types";

package/src/components/DropdownMenu/useDropdownMenu.test.ts

@@ -0,0 +1,44 @@
+import { describe, it, expect, vi } from "vitest";
+import { renderHook, act } from "@testing-library/react";
+import { useDropdownMenu } from "./useDropdownMenu";
+
+describe("useDropdownMenu", () => {
+  it("defaults to closed", () => {
+    const { result } = renderHook(() => useDropdownMenu());
+    expect(result.current.open).toBe(false);
+  });
+
+  it("uses defaultOpen", () => {
+    const { result } = renderHook(() =>
+      useDropdownMenu({ defaultOpen: true }),
+    );
+    expect(result.current.open).toBe(true);
+  });
+
+  it("opens and closes", () => {
+    const { result } = renderHook(() => useDropdownMenu());
+    act(() => result.current.onOpenChange(true));
+    expect(result.current.open).toBe(true);
+    act(() => result.current.onOpenChange(false));
+    expect(result.current.open).toBe(false);
+  });
+
+  it("calls external onOpenChange", () => {
+    const onChange = vi.fn();
+    const { result } = renderHook(() =>
+      useDropdownMenu({ onOpenChange: onChange }),
+    );
+    act(() => result.current.onOpenChange(true));
+    expect(onChange).toHaveBeenCalledWith(true);
+  });
+
+  it("works in controlled mode", () => {
+    const onChange = vi.fn();
+    const { result } = renderHook(() =>
+      useDropdownMenu({ open: false, onOpenChange: onChange }),
+    );
+    act(() => result.current.onOpenChange(true));
+    expect(result.current.open).toBe(false);
+    expect(onChange).toHaveBeenCalledWith(true);
+  });
+});

package/src/components/DropdownMenu/useDropdownMenu.ts

@@ -0,0 +1,36 @@
+import { useCallback } from "react";
+import { useControllableState } from "../../hooks/useControllableState";
+
+interface UseDropdownMenuProps {
+  open?: boolean;
+  defaultOpen?: boolean;
+  onOpenChange?: (open: boolean) => void;
+}
+
+interface UseDropdownMenuReturn {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+}
+
+export function useDropdownMenu({
+  open: controlledOpen,
+  defaultOpen = false,
+  onOpenChange,
+}: UseDropdownMenuProps = {}): UseDropdownMenuReturn {
+  const [open, setOpen] = useControllableState({
+    value: controlledOpen,
+    defaultValue: defaultOpen,
+    onChange: onOpenChange,
+  });
+
+  const handleOpenChange = useCallback(
+    (nextOpen: boolean) => {
+      setOpen(nextOpen);
+    },
+    [setOpen],
+  );
+
+  return { open, onOpenChange: handleOpenChange };
+}
+
+export type { UseDropdownMenuProps, UseDropdownMenuReturn };