Initial Commit

packages/ui/react/react-ui/src/components/dropdown-menu/dropdown-menu.variants.md

@@ -0,0 +1,96 @@
+# DropdownMenu Variants (cva config)
+
+## Purpose
+
+`dropdownMenuContentVariants`, `dropdownMenuItemVariants`, `dropdownMenuLabelVariants`, `dropdownMenuSeparatorVariants`, `dropdownMenuShortcutVariants`, `dropdownMenuCheckboxItemVariants`, `dropdownMenuRadioItemVariants`, and `dropdownMenuSubTriggerVariants` are the cva (class-variance-authority) configurations powering every `<DropdownMenu>` slot. They are split from `dropdown-menu.tsx` into their own module so an ejected source copy under `npx shadcn@latest add @suaveplan/dropdown-menu` keeps the cva configurations in a dedicated file. Theme overrides flow through `useThemedVariants("DropdownMenu<Slot>")`.
+
+The Item / Label / SubTrigger cvas all carry an `inset` axis so consumers can align rows whether or not they include checkbox / radio indicators. The content cva carries the open/close animations keyed off Radix's `data-state` and `data-side` attributes.
+
+## Features
+
+- Content: `min-w-[8rem]` floating surface with side-aware slide-in animations and `motion-reduce:animate-none`.
+- Item: focus-bg lift via `focus:bg-accent`, disabled opacity, optional `ps-8` inset gutter.
+- Label: semibold heading text, optional inset gutter.
+- Separator: `-mx-1 my-1 h-px bg-border` divider.
+- Shortcut: `ms-auto text-xs tracking-widest text-muted-foreground` row terminator.
+- Checkbox / Radio item: `ps-8 pe-2` to leave space for the start-aligned indicator.
+- SubTrigger: open-state lifts background to `data-[state=open]:bg-accent`.
+
+## Usage: Basic Example
+
+```ts
+import {
+    dropdownMenuContentVariants,
+    dropdownMenuItemVariants,
+} from "@suaveplan/react-ui";
+
+const contentClassName = dropdownMenuContentVariants();
+const itemClassName = dropdownMenuItemVariants({ inset: true });
+```
+
+## Usage: Advanced Example
+
+```ts
+import { dropdownMenuContentVariants, cn } from "@suaveplan/react-ui";
+
+export function WideContent({
+    children,
+    className,
+}: {
+    children: React.ReactNode;
+    className?: string;
+}) {
+    return (
+        <div
+            className={cn(
+                dropdownMenuContentVariants(),
+                "min-w-[16rem]",
+                className
+            )}
+        >
+            {children}
+        </div>
+    );
+}
+```
+
+## API Reference
+
+### `dropdownMenuContentVariants(): string`
+
+Returns the floating surface class string. No arguments.
+
+### `dropdownMenuItemVariants(props?: { inset?: boolean }): string`
+
+Returns the item class string. Defaults to `{ inset: false }`.
+
+### `dropdownMenuLabelVariants(props?: { inset?: boolean }): string`
+
+Returns the label class string. Defaults to `{ inset: false }`.
+
+### `dropdownMenuSeparatorVariants(): string`
+
+Returns the separator class string. No arguments.
+
+### `dropdownMenuShortcutVariants(): string`
+
+Returns the shortcut class string. No arguments.
+
+### `dropdownMenuCheckboxItemVariants(): string`
+
+Returns the checkbox item class string. No arguments.
+
+### `dropdownMenuRadioItemVariants(): string`
+
+Returns the radio item class string. No arguments.
+
+### `dropdownMenuSubTriggerVariants(props?: { inset?: boolean }): string`
+
+Returns the sub-trigger class string. Defaults to `{ inset: false }`.
+
+## Implementation Notes
+
+- Per the shadcn skill rule, no numeric `z-index` is assigned anywhere — Radix portals handle stacking.
+- The check / dot indicators sit at `start-2` (logical property) so they flip correctly in RTL.
+- `motion-reduce:animate-none` collapses the open/close animation for `prefers-reduced-motion: reduce`.
+- The Sub-trigger chevron carries `ms-auto` so the icon flips to the leading edge in RTL via the logical-margin property.