Add DisplayMenu component

app/App.tsx

@@ -109,6 +109,10 @@ import {
   DialogTitle,
   DialogTrigger,
 } from "../src/components/ui/dialog";
+import {
+  DisplayMenu,
+  DisplayMenuItem,
+} from "../src/components/ui/display-menu";
 import { DissolveFilter } from "../src/components/ui/dissolve-filter";
 import { Dock } from "../src/components/ui/dock";
 import {
@@ -2582,6 +2586,31 @@ function ComponentsShowcase() {
           </span>
         </Preview>
       </Section>
+
+      {/* Display Menu */}
+      <Section title="Display Menu" wide>
+        <Preview label="xl with trailing while disabled, lg items, anchor render, disabled anchor blocks navigation">
+          <DisplayMenu>
+            <DisplayMenuItem size="xl" disabled trailing="42%">
+              Play
+            </DisplayMenuItem>
+            <DisplayMenuItem>Rooms</DisplayMenuItem>
+            <DisplayMenuItem
+              // biome-ignore lint/a11y/useAnchorContent: useRender injects the item label into the anchor
+              render={<a href="#components" />}
+            >
+              Settings
+            </DisplayMenuItem>
+            <DisplayMenuItem
+              disabled
+              // biome-ignore lint/a11y/useAnchorContent: useRender injects the item label into the anchor
+              render={<a href="#design" />}
+            >
+              Locked
+            </DisplayMenuItem>
+          </DisplayMenu>
+        </Preview>
+      </Section>
     </div>
   );
 }

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@flow-industries/ui",
-  "version": "0.16.1",
+  "version": "0.17.0",
   "type": "module",
   "files": [
     "src"

src/components/ui/display-menu.tsx

@@ -0,0 +1,107 @@
+import { mergeProps } from "@base-ui/react/merge-props";
+import { useRender } from "@base-ui/react/use-render";
+import { cva, type VariantProps } from "class-variance-authority";
+import type * as React from "react";
+
+import { cn } from "../../utils/cn";
+
+function DisplayMenu({ className, ...props }: React.ComponentProps<"nav">) {
+  return (
+    <nav
+      data-slot="display-menu"
+      className={cn("flex flex-col items-start gap-1.5", className)}
+      {...props}
+    />
+  );
+}
+
+const displayMenuItemVariants = cva(
+  "flex w-fit items-baseline gap-3 text-left font-bold uppercase tracking-tight text-foreground outline-none transition-[color] duration-200 ease-(--ease-out) focus-visible:underline focus-visible:decoration-focus focus-visible:underline-offset-8",
+  {
+    variants: {
+      size: {
+        lg: "text-2xl md:text-4xl",
+        xl: "text-6xl leading-none md:text-8xl",
+      },
+      disabled: {
+        true: "cursor-default",
+        false: "cursor-pointer hover:text-muted-foreground",
+      },
+    },
+    defaultVariants: {
+      size: "lg",
+      disabled: false,
+    },
+  },
+);
+
+const displayMenuItemTrailingVariants = cva(
+  "font-semibold text-muted-foreground",
+  {
+    variants: {
+      size: {
+        lg: "text-lg md:text-xl",
+        xl: "text-3xl md:text-4xl",
+      },
+    },
+    defaultVariants: {
+      size: "lg",
+    },
+  },
+);
+
+function DisplayMenuItem({
+  className,
+  size = "lg",
+  disabled = false,
+  trailing,
+  children,
+  render,
+  ...props
+}: useRender.ComponentProps<"button"> &
+  VariantProps<typeof displayMenuItemVariants> & {
+    trailing?: React.ReactNode;
+  }) {
+  return useRender({
+    defaultTagName: "button",
+    props: mergeProps<"button">(
+      {
+        type: render ? undefined : "button",
+        "aria-disabled": disabled || undefined,
+        className: cn(displayMenuItemVariants({ size, disabled }), className),
+        children: (
+          <>
+            <span data-slot="display-menu-item-label">{children}</span>
+            {trailing != null && (
+              <span
+                data-slot="display-menu-item-trailing"
+                className={displayMenuItemTrailingVariants({ size })}
+              >
+                {trailing}
+              </span>
+            )}
+          </>
+        ),
+      },
+      props,
+      disabled
+        ? {
+            onClick(event) {
+              event.preventDefault();
+              // mergeProps only decorates the event with preventBaseUIHandler
+              // when another onClick is merged in
+              event.preventBaseUIHandler?.();
+            },
+          }
+        : undefined,
+    ),
+    render,
+    state: {
+      slot: "display-menu-item",
+      size,
+      disabled: Boolean(disabled),
+    },
+  });
+}
+
+export { DisplayMenu, DisplayMenuItem, displayMenuItemVariants };

src/components/ui/index.ts

@@ -13,6 +13,7 @@ export * from "./checkbox";
 export * from "./collapsible";
 export * from "./context-menu";
 export * from "./dialog";
+export * from "./display-menu";
 export * from "./dissolve-filter";
 export * from "./dock";
 export * from "./drawer";