@stackshift-ui/dropdown-menu 1.0.0-beta.1

package/package.json

@@ -0,0 +1,64 @@
+{
+  "name": "@stackshift-ui/dropdown-menu",
+  "description": "Displays a menu to the user — such as a set of actions or functions — triggered by a button.",
+  "version": "1.0.0-beta.1",
+  "private": false,
+  "sideEffects": false,
+  "main": "./dist/index.js",
+  "module": "./dist/index.mjs",
+  "types": "./dist/index.d.ts",
+  "files": [
+    "dist/**",
+    "src"
+  ],
+  "author": "WebriQ <info@webriq.com>",
+  "devDependencies": {
+    "@testing-library/jest-dom": "^6.5.0",
+    "@testing-library/react": "^16.0.1",
+    "@testing-library/user-event": "^14.6.1",
+    "@types/node": "^22.7.0",
+    "@types/react": "^18.3.9",
+    "@types/react-dom": "^18.3.0",
+    "@vitejs/plugin-react": "^4.3.1",
+    "@vitest/coverage-v8": "^2.1.1",
+    "esbuild-plugin-rdi": "^0.0.0",
+    "esbuild-plugin-react18": "^0.2.5",
+    "esbuild-plugin-react18-css": "^0.0.4",
+    "jsdom": "^25.0.1",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "tsup": "^8.3.0",
+    "typescript": "^5.6.2",
+    "vite-tsconfig-paths": "^5.0.1",
+    "vitest": "^2.1.1",
+    "@stackshift-ui/eslint-config": "6.0.10",
+    "@stackshift-ui/typescript-config": "6.0.10"
+  },
+  "dependencies": {
+    "@radix-ui/react-dropdown-menu": "^2.1.15",
+    "classnames": "^2.5.1",
+    "lucide-react": "^0.468.0",
+    "@stackshift-ui/scripts": "6.1.0-beta.0",
+    "@stackshift-ui/system": "6.1.0-beta.0"
+  },
+  "peerDependencies": {
+    "@stackshift-ui/system": ">=6.1.0-beta.0",
+    "@types/react": "16.8 - 19",
+    "next": "10 - 14",
+    "react": "16.8 - 19",
+    "react-dom": "16.8 - 19"
+  },
+  "peerDependenciesMeta": {
+    "next": {
+      "optional": true
+    }
+  },
+  "scripts": {
+    "build": "tsup && tsc -p tsconfig-build.json",
+    "clean": "rm -rf dist",
+    "dev": "tsup --watch && tsc -p tsconfig-build.json -w",
+    "typecheck": "tsc --noEmit",
+    "lint": "eslint src/",
+    "test": "vitest run --coverage"
+  }
+}

package/src/dropdown-menu.test.tsx

@@ -0,0 +1,312 @@
+import { cleanup, render, screen, waitFor } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import * as React from "react";
+import { afterEach, beforeEach, describe, test, vi } from "vitest";
+import {
+  DropdownMenu,
+  DropdownMenuCheckboxItem,
+  DropdownMenuContent,
+  DropdownMenuGroup,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuRadioGroup,
+  DropdownMenuRadioItem,
+  DropdownMenuSeparator,
+  DropdownMenuShortcut,
+  DropdownMenuSub,
+  DropdownMenuSubContent,
+  DropdownMenuSubTrigger,
+  DropdownMenuTrigger,
+} from "./dropdown-menu";
+
+describe("dropdown-menu", () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+  });
+
+  afterEach(cleanup);
+
+  test("Common: DropdownMenu - test if renders with proper structure and data attributes", ({
+    expect,
+  }) => {
+    const customClass = "custom-dropdown";
+
+    const { unmount } = render(
+      <DropdownMenu>
+        <DropdownMenuTrigger data-testid="dropdown-trigger" className={customClass}>
+          Open Menu
+        </DropdownMenuTrigger>
+        <DropdownMenuContent data-testid="dropdown-content">
+          <DropdownMenuItem data-testid="dropdown-item">Item 1</DropdownMenuItem>
+        </DropdownMenuContent>
+      </DropdownMenu>,
+    );
+
+    const trigger = screen.getByTestId("dropdown-trigger");
+
+    expect(trigger).toBeInTheDocument();
+    expect(trigger).toHaveAttribute("data-slot", "dropdown-menu-trigger");
+    expect(trigger.classList).toContain(customClass);
+    unmount();
+  });
+
+  test("Common: DropdownMenu - test if trigger interactions and content display work correctly", async ({
+    expect,
+  }) => {
+    const user = userEvent.setup();
+
+    const { unmount } = render(
+      <DropdownMenu>
+        <DropdownMenuTrigger data-testid="trigger-test">Open Menu</DropdownMenuTrigger>
+        <DropdownMenuContent data-testid="content-test" sideOffset={8}>
+          <DropdownMenuItem data-testid="menu-item-1">First Item</DropdownMenuItem>
+          <DropdownMenuItem data-testid="menu-item-2">Second Item</DropdownMenuItem>
+        </DropdownMenuContent>
+      </DropdownMenu>,
+    );
+
+    const trigger = screen.getByTestId("trigger-test");
+
+    expect(screen.queryByTestId("content-test")).not.toBeInTheDocument();
+
+    await user.click(trigger);
+
+    // Wait for content to appear
+    const content = await screen.findByTestId("content-test");
+    expect(content).toBeInTheDocument();
+    expect(content).toHaveAttribute("data-slot", "dropdown-menu-content");
+
+    expect(screen.getByTestId("menu-item-1")).toBeInTheDocument();
+    expect(screen.getByTestId("menu-item-2")).toBeInTheDocument();
+    unmount();
+  });
+
+  test("Common: DropdownMenu - test if menu items with variants and states work properly", async ({
+    expect,
+  }) => {
+    const handleClick = vi.fn();
+
+    const { unmount } = render(
+      <DropdownMenu defaultOpen>
+        <DropdownMenuTrigger>Open Menu</DropdownMenuTrigger>
+        <DropdownMenuContent data-testid="variants-content">
+          <DropdownMenuItem data-testid="default-item" onSelect={handleClick}>
+            Default Item
+          </DropdownMenuItem>
+          <DropdownMenuItem
+            data-testid="destructive-item"
+            variant="destructive"
+            onSelect={handleClick}>
+            Delete Item
+          </DropdownMenuItem>
+          <DropdownMenuItem data-testid="inset-item" inset>
+            Inset Item
+          </DropdownMenuItem>
+          <DropdownMenuItem data-testid="disabled-item" disabled>
+            Disabled Item
+          </DropdownMenuItem>
+        </DropdownMenuContent>
+      </DropdownMenu>,
+    );
+
+    const content = await screen.findByTestId("variants-content");
+    expect(content).toBeInTheDocument();
+
+    const defaultItem = screen.getByTestId("default-item");
+    const destructiveItem = screen.getByTestId("destructive-item");
+    const insetItem = screen.getByTestId("inset-item");
+    const disabledItem = screen.getByTestId("disabled-item");
+
+    // Check data attributes and styling
+    expect(defaultItem).toHaveAttribute("data-slot", "dropdown-menu-item");
+    expect(defaultItem).toHaveAttribute("data-variant", "default");
+    expect(destructiveItem).toHaveAttribute("data-variant", "destructive");
+    expect(insetItem).toHaveAttribute("data-inset", "true");
+    expect(disabledItem).toHaveAttribute("data-disabled");
+    unmount();
+  });
+
+  test("Common: DropdownMenu - test if checkbox and radio item functionality works correctly", async ({
+    expect,
+  }) => {
+    function TestComponent() {
+      const [checkboxChecked, setCheckboxChecked] = React.useState(false);
+      const [radioValue, setRadioValue] = React.useState("option1");
+
+      return (
+        <DropdownMenu defaultOpen>
+          <DropdownMenuTrigger>Open Menu</DropdownMenuTrigger>
+          <DropdownMenuContent data-testid="checkbox-radio-content">
+            <DropdownMenuCheckboxItem
+              data-testid="checkbox-item"
+              checked={checkboxChecked}
+              onCheckedChange={setCheckboxChecked}>
+              Checkbox Item
+            </DropdownMenuCheckboxItem>
+            <DropdownMenuRadioGroup value={radioValue} onValueChange={setRadioValue}>
+              <DropdownMenuRadioItem data-testid="radio-item-1" value="option1">
+                Radio Option 1
+              </DropdownMenuRadioItem>
+              <DropdownMenuRadioItem data-testid="radio-item-2" value="option2">
+                Radio Option 2
+              </DropdownMenuRadioItem>
+            </DropdownMenuRadioGroup>
+          </DropdownMenuContent>
+        </DropdownMenu>
+      );
+    }
+
+    const { unmount } = render(<TestComponent />);
+
+    const content = await screen.findByTestId("checkbox-radio-content");
+    expect(content).toBeInTheDocument();
+
+    const checkboxItem = screen.getByTestId("checkbox-item");
+    const radioItem1 = screen.getByTestId("radio-item-1");
+    const radioItem2 = screen.getByTestId("radio-item-2");
+
+    expect(checkboxItem).toHaveAttribute("data-slot", "dropdown-menu-checkbox-item");
+    expect(radioItem1).toHaveAttribute("data-slot", "dropdown-menu-radio-item");
+    expect(radioItem2).toHaveAttribute("data-slot", "dropdown-menu-radio-item");
+
+    expect(checkboxItem).toHaveAttribute("data-state", "unchecked");
+    expect(radioItem1).toHaveAttribute("data-state", "checked");
+    expect(radioItem2).toHaveAttribute("data-state", "unchecked");
+    unmount();
+  });
+
+  test("Common: DropdownMenu - test if keyboard navigation and accessibility work properly", async ({
+    expect,
+  }) => {
+    const user = userEvent.setup();
+
+    const { unmount } = render(
+      <DropdownMenu>
+        <DropdownMenuTrigger data-testid="keyboard-trigger">Open Menu</DropdownMenuTrigger>
+        <DropdownMenuContent data-testid="keyboard-content">
+          <DropdownMenuItem data-testid="item-1">First Item</DropdownMenuItem>
+          <DropdownMenuItem data-testid="item-2">Second Item</DropdownMenuItem>
+          <DropdownMenuItem data-testid="item-3">Third Item</DropdownMenuItem>
+        </DropdownMenuContent>
+      </DropdownMenu>,
+    );
+
+    const trigger = screen.getByTestId("keyboard-trigger");
+
+    await user.click(trigger);
+
+    const content = await screen.findByTestId("keyboard-content");
+    expect(content).toBeInTheDocument();
+    expect(content).toHaveAttribute("role", "menu");
+    expect(content).toHaveAttribute("data-slot", "dropdown-menu-content");
+
+    expect(screen.getByTestId("item-1")).toBeInTheDocument();
+    expect(screen.getByTestId("item-2")).toBeInTheDocument();
+    expect(screen.getByTestId("item-3")).toBeInTheDocument();
+    unmount();
+  });
+
+  test("Common: DropdownMenu - test if sub-menu functionality works correctly", async ({
+    expect,
+  }) => {
+    const { unmount } = render(
+      <DropdownMenu defaultOpen>
+        <DropdownMenuTrigger>Open Menu</DropdownMenuTrigger>
+        <DropdownMenuContent data-testid="main-content">
+          <DropdownMenuItem>Regular Item</DropdownMenuItem>
+          <DropdownMenuSub>
+            <DropdownMenuSubTrigger data-testid="sub-trigger" inset>
+              More Options
+            </DropdownMenuSubTrigger>
+            <DropdownMenuSubContent data-testid="sub-content">
+              <DropdownMenuItem data-testid="sub-item-1">Sub Item 1</DropdownMenuItem>
+              <DropdownMenuItem data-testid="sub-item-2">Sub Item 2</DropdownMenuItem>
+            </DropdownMenuSubContent>
+          </DropdownMenuSub>
+        </DropdownMenuContent>
+      </DropdownMenu>,
+    );
+
+    const mainContent = await screen.findByTestId("main-content");
+    expect(mainContent).toBeInTheDocument();
+
+    const subTrigger = screen.getByTestId("sub-trigger");
+
+    expect(subTrigger).toHaveAttribute("data-slot", "dropdown-menu-sub-trigger");
+    expect(subTrigger).toHaveAttribute("data-inset", "true");
+
+    expect(screen.queryByTestId("sub-content")).not.toBeInTheDocument();
+    unmount();
+  });
+
+  test("Common: DropdownMenu - test if menu structure components render with proper styling", ({
+    expect,
+  }) => {
+    const { unmount } = render(
+      <DropdownMenu defaultOpen>
+        <DropdownMenuTrigger>Open Menu</DropdownMenuTrigger>
+        <DropdownMenuContent data-testid="structure-content">
+          <DropdownMenuLabel data-testid="menu-label" inset>
+            Menu Section
+          </DropdownMenuLabel>
+          <DropdownMenuGroup data-testid="menu-group">
+            <DropdownMenuItem>
+              Item with shortcut
+              <DropdownMenuShortcut data-testid="menu-shortcut">⌘K</DropdownMenuShortcut>
+            </DropdownMenuItem>
+          </DropdownMenuGroup>
+          <DropdownMenuSeparator data-testid="menu-separator" />
+          <DropdownMenuItem>Another Item</DropdownMenuItem>
+        </DropdownMenuContent>
+      </DropdownMenu>,
+    );
+
+    const label = screen.getByTestId("menu-label");
+    const group = screen.getByTestId("menu-group");
+    const shortcut = screen.getByTestId("menu-shortcut");
+    const separator = screen.getByTestId("menu-separator");
+
+    expect(label).toHaveAttribute("data-slot", "dropdown-menu-label");
+    expect(label).toHaveAttribute("data-inset", "true");
+    expect(group).toHaveAttribute("data-slot", "dropdown-menu-group");
+    expect(shortcut).toHaveAttribute("data-slot", "dropdown-menu-shortcut");
+    expect(separator).toHaveAttribute("data-slot", "dropdown-menu-separator");
+
+    expect(label).toHaveTextContent("Menu Section");
+    expect(shortcut).toHaveTextContent("⌘K");
+    unmount();
+  });
+
+  test("Common: DropdownMenu - test if portal and positioning behavior work correctly", async ({
+    expect,
+  }) => {
+    const user = userEvent.setup();
+
+    const { unmount } = render(
+      <div data-testid="container">
+        <DropdownMenu>
+          <DropdownMenuTrigger data-testid="portal-trigger">Open Menu</DropdownMenuTrigger>
+          <DropdownMenuContent data-testid="portal-content" sideOffset={12}>
+            <DropdownMenuItem>Portal Item</DropdownMenuItem>
+          </DropdownMenuContent>
+        </DropdownMenu>
+      </div>,
+    );
+
+    const trigger = screen.getByTestId("portal-trigger");
+    const container = screen.getByTestId("container");
+
+    expect(screen.queryByTestId("portal-content")).not.toBeInTheDocument();
+
+    await user.click(trigger);
+
+    const content = await screen.findByTestId("portal-content");
+    expect(content).toBeInTheDocument();
+
+    expect(container).not.toContainElement(content);
+
+    expect(content).toHaveAttribute("data-side");
+    expect(content).toHaveAttribute("data-align");
+    unmount();
+  });
+});

package/src/dropdown-menu.tsx

@@ -0,0 +1,305 @@
+"use client";
+
+import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu";
+import { CheckIcon, ChevronRightIcon, CircleIcon } from "lucide-react";
+import * as React from "react";
+
+import { cn, DefaultComponent, useStackShiftUIComponents } from "@stackshift-ui/system";
+
+const displayName = "DropdownMenu";
+const displayNamePortal = "DropdownMenuPortal";
+const displayNameTrigger = "DropdownMenuTrigger";
+const displayNameContent = "DropdownMenuContent";
+const displayNameGroup = "DropdownMenuGroup";
+const displayNameItem = "DropdownMenuItem";
+const displayNameCheckboxItem = "DropdownMenuCheckboxItem";
+const displayNameRadioGroup = "DropdownMenuRadioGroup";
+const displayNameRadioItem = "DropdownMenuRadioItem";
+const displayNameLabel = "DropdownMenuLabel";
+const displayNameSeparator = "DropdownMenuSeparator";
+const displayNameShortcut = "DropdownMenuShortcut";
+const displayNameSub = "DropdownMenuSub";
+const displayNameSubTrigger = "DropdownMenuSubTrigger";
+const displayNameSubContent = "DropdownMenuSubContent";
+
+function DropdownMenu({ ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.Root>) {
+  const { [displayName]: Component = DefaultComponent } = useStackShiftUIComponents();
+
+  return <Component as={DropdownMenuPrimitive.Root} data-slot="dropdown-menu" {...props} />;
+}
+DropdownMenu.displayName = displayName;
+
+function DropdownMenuPortal({
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Portal>) {
+  const { [displayNamePortal]: Component = DefaultComponent } = useStackShiftUIComponents();
+
+  return (
+    <Component as={DropdownMenuPrimitive.Portal} data-slot="dropdown-menu-portal" {...props} />
+  );
+}
+DropdownMenuPortal.displayName = displayNamePortal;
+
+function DropdownMenuTrigger({
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Trigger>) {
+  const { [displayNameTrigger]: Component = DefaultComponent } = useStackShiftUIComponents();
+
+  return (
+    <Component as={DropdownMenuPrimitive.Trigger} data-slot="dropdown-menu-trigger" {...props} />
+  );
+}
+DropdownMenuTrigger.displayName = displayNameTrigger;
+
+function DropdownMenuContent({
+  className,
+  sideOffset = 4,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Content>) {
+  const { [displayNameContent]: Component = DefaultComponent } = useStackShiftUIComponents();
+
+  return (
+    <DropdownMenuPortal>
+      <Component
+        as={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}
+      />
+    </DropdownMenuPortal>
+  );
+}
+DropdownMenuContent.displayName = displayNameContent;
+
+function DropdownMenuGroup({ ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.Group>) {
+  const { [displayNameGroup]: Component = DefaultComponent } = useStackShiftUIComponents();
+
+  return <Component as={DropdownMenuPrimitive.Group} data-slot="dropdown-menu-group" {...props} />;
+}
+DropdownMenuGroup.displayName = displayNameGroup;
+
+function DropdownMenuItem({
+  className,
+  inset,
+  variant = "default",
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Item> & {
+  inset?: boolean;
+  variant?: "default" | "destructive";
+}) {
+  const { [displayNameItem]: Component = DefaultComponent } = useStackShiftUIComponents();
+
+  return (
+    <Component
+      as={DropdownMenuPrimitive.Item}
+      data-slot="dropdown-menu-item"
+      data-inset={inset}
+      data-variant={variant}
+      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",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+DropdownMenuItem.displayName = displayNameItem;
+
+function DropdownMenuCheckboxItem({
+  className,
+  children,
+  checked,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.CheckboxItem>) {
+  const { [displayNameCheckboxItem]: Component = DefaultComponent } = useStackShiftUIComponents();
+
+  return (
+    <Component
+      as={DropdownMenuPrimitive.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",
+        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>
+      {children}
+    </Component>
+  );
+}
+DropdownMenuCheckboxItem.displayName = displayNameCheckboxItem;
+
+function DropdownMenuRadioGroup({
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.RadioGroup>) {
+  const { [displayNameRadioGroup]: Component = DefaultComponent } = useStackShiftUIComponents();
+
+  return (
+    <Component
+      as={DropdownMenuPrimitive.RadioGroup}
+      data-slot="dropdown-menu-radio-group"
+      {...props}
+    />
+  );
+}
+DropdownMenuRadioGroup.displayName = displayNameRadioGroup;
+
+function DropdownMenuRadioItem({
+  className,
+  children,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.RadioItem>) {
+  const { [displayNameRadioItem]: Component = DefaultComponent } = useStackShiftUIComponents();
+
+  return (
+    <Component
+      as={DropdownMenuPrimitive.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",
+        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>
+      {children}
+    </Component>
+  );
+}
+DropdownMenuRadioItem.displayName = displayNameRadioItem;
+
+function DropdownMenuLabel({
+  className,
+  inset,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Label> & {
+  inset?: boolean;
+}) {
+  const { [displayNameLabel]: Component = DefaultComponent } = useStackShiftUIComponents();
+
+  return (
+    <Component
+      as={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}
+    />
+  );
+}
+DropdownMenuLabel.displayName = displayNameLabel;
+
+function DropdownMenuSeparator({
+  className,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Separator>) {
+  const { [displayNameSeparator]: Component = DefaultComponent } = useStackShiftUIComponents();
+
+  return (
+    <Component
+      as={DropdownMenuPrimitive.Separator}
+      data-slot="dropdown-menu-separator"
+      className={cn("bg-border -mx-1 my-1 h-px", className)}
+      {...props}
+    />
+  );
+}
+DropdownMenuSeparator.displayName = displayNameSeparator;
+
+function DropdownMenuShortcut({ className, ...props }: React.ComponentProps<"span">) {
+  const { [displayNameShortcut]: Component = DefaultComponent } = useStackShiftUIComponents();
+
+  return (
+    <Component
+      as="span"
+      data-slot="dropdown-menu-shortcut"
+      className={cn("text-muted-foreground ml-auto text-xs tracking-widest", className)}
+      {...props}
+    />
+  );
+}
+DropdownMenuShortcut.displayName = displayNameShortcut;
+
+function DropdownMenuSub({ ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.Sub>) {
+  const { [displayNameSub]: Component = DefaultComponent } = useStackShiftUIComponents();
+
+  return <Component as={DropdownMenuPrimitive.Sub} data-slot="dropdown-menu-sub" {...props} />;
+}
+DropdownMenuSub.displayName = displayNameSub;
+
+function DropdownMenuSubTrigger({
+  className,
+  inset,
+  children,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.SubTrigger> & {
+  inset?: boolean;
+}) {
+  const { [displayNameSubTrigger]: Component = DefaultComponent } = useStackShiftUIComponents();
+
+  return (
+    <Component
+      as={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" />
+    </Component>
+  );
+}
+DropdownMenuSubTrigger.displayName = displayNameSubTrigger;
+
+function DropdownMenuSubContent({
+  className,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.SubContent>) {
+  const { [displayNameSubContent]: Component = DefaultComponent } = useStackShiftUIComponents();
+
+  return (
+    <Component
+      as={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",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+DropdownMenuSubContent.displayName = displayNameSubContent;
+
+export {
+  DropdownMenu,
+  DropdownMenuCheckboxItem,
+  DropdownMenuContent,
+  DropdownMenuGroup,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuPortal,
+  DropdownMenuRadioGroup,
+  DropdownMenuRadioItem,
+  DropdownMenuSeparator,
+  DropdownMenuShortcut,
+  DropdownMenuSub,
+  DropdownMenuSubContent,
+  DropdownMenuSubTrigger,
+  DropdownMenuTrigger,
+};

package/src/index.ts

@@ -0,0 +1,4 @@
+"use client";
+
+// component exports
+export * from "./dropdown-menu";

package/src/setupTests.ts

@@ -0,0 +1,4 @@
+import '@testing-library/jest-dom';
+
+export { };
+