feat(DropdownMenu): custom icon nodes + external-link items

package.json

@@ -1,7 +1,7 @@
 {
   "name": "@mirrorstack-ai/web-ui-kit",
   "packageManager": "pnpm@10.29.3",
-  "version": "0.5.11",
+  "version": "0.5.12",
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",
   "exports": {

src/components/ui/navigation/dropdown-menu/DropdownMenu.stories.tsx

@@ -32,6 +32,38 @@ export const Playground: Story = {
   },
 };
 
+/**
+ * An item's `icon` can be a custom node (e.g. a brand-logo SVG that Material
+ * Symbols doesn't ship) instead of an icon name — size it to ~the item
+ * icon size and use `currentColor`. `external: true` adds a trailing
+ * open-in-new glyph for items that open in a new tab.
+ */
+export const CustomIconAndExternal: Story = {
+  args: {
+    trigger: (
+      <IconButton icon="menu" aria-label="Open menu" variant="text" size="sm" />
+    ),
+    notchRadius: 8,
+    notchInverseRadius: 6,
+    items: [
+      {
+        id: "repo",
+        label: "Repository",
+        external: true,
+        icon: (
+          <svg viewBox="0 0 16 16" width={16} height={16} fill="currentColor">
+            <path d="M8 1l6 3.5v7L8 15l-6-3.5v-7L8 1z" />
+          </svg>
+        ),
+      },
+      { id: "docs", label: "Docs", icon: "menu_book", external: true },
+      { type: "separator" as const },
+      { id: "settings", label: "Settings", icon: "settings" },
+    ],
+    onSelect: (item) => console.log("Selected:", item.id),
+  },
+};
+
 /**
  * The notch head tuned to a small trigger: `notchWidth`/`notchHeight` size the
  * tab to the icon button, and `notchRadius`/`notchInverseRadius` round the head

src/components/ui/navigation/dropdown-menu/DropdownMenu.tsx

@@ -35,7 +35,14 @@ export const meta: ComponentMeta = {
 export interface DropdownMenuItem {
   id: string;
   label: string;
-  icon?: string;
+  /** Leading icon: a Material Symbols name, or a custom node (e.g. a brand-logo
+   *  SVG that Material Symbols can't provide). A custom node should size itself
+   *  to ~`size` and use `currentColor` so it inherits the muted icon colour. */
+  icon?: string | ReactNode;
+  /** Marks an item that opens externally (a new tab): renders a trailing
+   *  open-in-new glyph as the affordance. Performing the navigation is still the
+   *  caller's job in `onSelect`. */
+  external?: boolean;
   /** `"danger"` is a deprecated alias for `"error"`. */
   variant?: "default" | "error" | "danger";
   disabled?: boolean;
@@ -283,17 +290,34 @@ export function DropdownMenu({
                     if (!item.disabled) setActiveIndex(index);
                   }}
                 >
-                  {item.icon && (
+                  {item.icon != null &&
+                    (typeof item.icon === "string" ? (
+                      <Icon
+                        name={item.icon}
+                        size={sz.icon}
+                        className={cn(
+                          "shrink-0",
+                          isError ? "text-error" : "text-on-surface-variant",
+                        )}
+                      />
+                    ) : (
+                      <span
+                        className={cn(
+                          "flex shrink-0 items-center",
+                          isError ? "text-error" : "text-on-surface-variant",
+                        )}
+                      >
+                        {item.icon}
+                      </span>
+                    ))}
+                  {item.label}
+                  {item.external && (
                     <Icon
-                      name={item.icon}
-                      size={sz.icon}
-                      className={cn(
-                        "shrink-0",
-                        isError ? "text-error" : "text-on-surface-variant",
-                      )}
+                      name="open_in_new"
+                      size={sz.icon - 3}
+                      className="ml-auto shrink-0 text-on-surface-variant/60"
                     />
                   )}
-                  {item.label}
                 </div>
               );
             })}