feat(ui): expand workflow-ready components

packages/ui/src/components/dropdown-menu.variants.ts

@@ -12,7 +12,8 @@ export const dropdownMenuContentVariants = cva(
       size: {
         sm: "min-w-[11rem]",
         md: "min-w-[13rem]",
-        lg: "min-w-[15rem]"
+        lg: "min-w-[15rem]",
+        xl: "min-w-[18rem]"
       }
     },
     defaultVariants: {
@@ -23,7 +24,7 @@ export const dropdownMenuContentVariants = cva(
 
 export const dropdownMenuItemVariants = cva(
   [
-    "relative flex cursor-default select-none items-center gap-2 rounded-[var(--ui-control-radius)] px-2.5 py-2 text-sm outline-none",
+    "relative flex min-w-0 cursor-default select-none items-center gap-2 rounded-[var(--ui-control-radius)] px-2.5 py-2 text-sm outline-none",
     "text-[var(--color-foreground)] transition-colors duration-[var(--dur-fast)] ease-[var(--ease-standard)]",
     "focus:bg-[var(--ui-control-bg)] focus:text-[var(--color-foreground)] data-[highlighted]:bg-[var(--ui-control-bg)] data-[highlighted]:text-[var(--color-foreground)]",
     "data-[disabled]:pointer-events-none data-[disabled]:opacity-45"
@@ -47,6 +48,22 @@ export const dropdownMenuItemVariants = cva(
   }
 );
 
+export const dropdownMenuItemBodyVariants = cva([
+  "grid min-w-0 flex-1 gap-0.5"
+]);
+
+export const dropdownMenuItemLabelVariants = cva([
+  "truncate text-sm font-medium text-[var(--color-foreground)]"
+]);
+
+export const dropdownMenuItemDescriptionVariants = cva([
+  "text-xs leading-5 text-[var(--color-muted-foreground)]"
+]);
+
+export const dropdownMenuItemLeadingVariants = cva([
+  "inline-flex size-4 shrink-0 items-center justify-center text-[var(--color-muted-foreground)]"
+]);
+
 export const dropdownMenuLabelVariants = cva(
   [
     "px-2.5 py-2 text-xs font-medium uppercase tracking-[var(--tracking-caps)] text-[var(--color-muted-foreground)]"