From d477a3a7a4292714ba29b7470555b9fa4fde5fd1 Mon Sep 17 00:00:00 2001
From: tresabhi <43380238+tresabhi@users.noreply.github.com>
Date: Wed, 26 Aug 2026 13:49:45 -0500
Subject: [PATCH] radix composing styles

---
 .../components/DropdownMenu/index.module.css  |  0
 .../src/components/DropdownMenu/index.tsx     | 78 +------------------
 packages/website/src/ui/compose.tsx           | 35 +++++++++
 3 files changed, 39 insertions(+), 74 deletions(-)
 create mode 100644 packages/website/src/components/DropdownMenu/index.module.css
 create mode 100644 packages/website/src/ui/compose.tsx

diff --git a/packages/website/src/components/DropdownMenu/index.module.css b/packages/website/src/components/DropdownMenu/index.module.css
new file mode 100644
index 000000000..e69de29bb
diff --git a/packages/website/src/components/DropdownMenu/index.tsx b/packages/website/src/components/DropdownMenu/index.tsx
index 47d179714..8afe69f1b 100644
--- a/packages/website/src/components/DropdownMenu/index.tsx
+++ b/packages/website/src/components/DropdownMenu/index.tsx
@@ -1,75 +1,5 @@
-import {
-  Menubar,
-  MenubarCheckboxItem,
-  MenubarContent,
-  MenubarLabel,
-  MenubarRadioGroup,
-  MenubarRadioItem,
-  MenubarSub,
-  MenubarSubContent,
-  MenubarSubTrigger,
-  MenubarTrigger,
-  type MenubarCheckboxItemProps,
-  type MenubarContentProps,
-  type MenubarLabelProps,
-  type MenubarProps,
-  type MenubarRadioGroupProps,
-  type MenubarRadioItemProps,
-  type MenubarSubContentProps,
-  type MenubarSubProps,
-  type MenubarSubTriggerProps,
-  type MenubarTriggerProps,
-} from "radix-ui/menubar";
+import { DropdownMenu as _ } from "radix-ui";
+import { composeRadixComponents } from "../../ui/compose";
+import styles from "./index.module.css";
 
-function Root(props: MenubarProps) {
-  return <Menubar {...props} />;
-}
-
-function Trigger(props: MenubarTriggerProps) {
-  return <MenubarTrigger {...props} />;
-}
-
-function Content(props: MenubarContentProps) {
-  return <MenubarContent {...props} />;
-}
-
-function Sub(props: MenubarSubProps) {
-  return <MenubarSub {...props} />;
-}
-
-function SubTrigger(props: MenubarSubTriggerProps) {
-  return <MenubarSubTrigger {...props} />;
-}
-
-function SubContent(props: MenubarSubContentProps) {
-  return <MenubarSubContent {...props} />;
-}
-
-function Label(props: MenubarLabelProps) {
-  return <MenubarLabel {...props} />;
-}
-
-function CheckboxItem(props: MenubarCheckboxItemProps) {
-  return <MenubarCheckboxItem {...props} />;
-}
-
-function RadioGroup(props: MenubarRadioGroupProps) {
-  return <MenubarRadioGroup {...props} />;
-}
-
-function RadioItem(props: MenubarRadioItemProps) {
-  return <MenubarRadioItem {...props} />;
-}
-
-export const DropdownMenu = {
-  Root,
-  Trigger,
-  Content,
-  Sub,
-  SubTrigger,
-  SubContent,
-  Label,
-  CheckboxItem,
-  RadioGroup,
-  RadioItem,
-};
+export const DropdownMenu = composeRadixComponents(_, styles);
diff --git a/packages/website/src/ui/compose.tsx b/packages/website/src/ui/compose.tsx
new file mode 100644
index 000000000..2b405a00d
--- /dev/null
+++ b/packages/website/src/ui/compose.tsx
@@ -0,0 +1,35 @@
+import type { FC } from "react";
+import { classNames } from "./classNames";
+
+function composeRadixComponent<Props>(
+  Component: FC<Props>,
+  style: CSSModuleClasses[string],
+) {
+  return function (props: Props & { className?: string }) {
+    return (
+      <Component {...props} className={classNames(style, props.className)} />
+    );
+  };
+}
+
+export function composeRadixComponents<
+  Components extends Record<string, unknown>,
+>(components: Components, styles: CSSModuleClasses) {
+  const mapped: Partial<Components> = {};
+
+  for (const key in components) {
+    const isMethod = key[0].toLowerCase() === key[0];
+
+    if (isMethod) {
+      mapped[key] = components[key];
+      continue;
+    }
+
+    mapped[key] = composeRadixComponent(
+      components[key] as FC,
+      styles[key],
+    ) as Components[Extract<keyof Components, string>];
+  }
+
+  return mapped as Components;
+}