@graundtech/fluent2-react-kit 0.5.1

package/dist/components/ui/dialog.js

@@ -0,0 +1,165 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Dialog as DialogPrimitive } from "@base-ui/react/dialog";
+import { DismissRegular } from "@fluentui/react-icons";
+import { cn } from "../../lib/utils.js";
+function Dialog(props) {
+  return /* @__PURE__ */ jsx(DialogPrimitive.Root, { ...props });
+}
+function DialogTrigger({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    DialogPrimitive.Trigger,
+    {
+      "data-slot": "dialog-trigger",
+      className: cn(className),
+      ...props
+    }
+  );
+}
+function DialogPortal(props) {
+  return /* @__PURE__ */ jsx(DialogPrimitive.Portal, { "data-slot": "dialog-portal", ...props });
+}
+function DialogOverlay({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    DialogPrimitive.Backdrop,
+    {
+      "data-slot": "dialog-overlay",
+      className: cn(
+        "fixed inset-0 z-50 bg-black/40",
+        // motion — fade on open (enter) / close (exit)
+        "transition-opacity duration-normal ease-decelerate-mid",
+        "data-starting-style:opacity-0",
+        "data-ending-style:opacity-0 data-ending-style:ease-accelerate-mid",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function DialogContent({
+  className,
+  children,
+  showCloseButton = true,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxs(DialogPortal, { children: [
+    /* @__PURE__ */ jsx(DialogOverlay, {}),
+    /* @__PURE__ */ jsxs(
+      DialogPrimitive.Popup,
+      {
+        "data-slot": "dialog-content",
+        className: cn(
+          // layout — centered fixed surface, dialog radius + elevation
+          "fixed top-[50%] left-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 rounded-xl border bg-background p-6 text-foreground shadow-64 outline-none",
+          // motion — fade + slight zoom; `scale`, not `transform` (see doc note)
+          "transition-[opacity,scale] duration-normal ease-decelerate-mid",
+          "data-starting-style:scale-95 data-starting-style:opacity-0",
+          "data-ending-style:scale-95 data-ending-style:opacity-0 data-ending-style:ease-accelerate-mid",
+          className
+        ),
+        ...props,
+        children: [
+          children,
+          showCloseButton && /* @__PURE__ */ jsxs(
+            DialogPrimitive.Close,
+            {
+              "data-slot": "dialog-close",
+              className: cn(
+                "absolute top-4 right-4 flex size-8 items-center justify-center rounded-md text-muted-foreground",
+                "cursor-pointer outline-none transition-colors duration-fast ease-ease",
+                "hover:bg-accent hover:text-accent-foreground active:bg-accent/80 dark:hover:bg-accent/50 dark:active:bg-accent/70",
+                "focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background",
+                "disabled:pointer-events-none disabled:opacity-50"
+              ),
+              children: [
+                /* @__PURE__ */ jsx(DismissRegular, { className: "size-4" }),
+                /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Close" })
+              ]
+            }
+          )
+        ]
+      }
+    )
+  ] });
+}
+function DialogHeader({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-slot": "dialog-header",
+      className: cn("flex flex-col gap-1.5 text-center sm:text-left", className),
+      ...props
+    }
+  );
+}
+function DialogFooter({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-slot": "dialog-footer",
+      className: cn(
+        "flex flex-col-reverse gap-2 sm:flex-row sm:justify-end",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function DialogTitle({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    DialogPrimitive.Title,
+    {
+      "data-slot": "dialog-title",
+      className: cn("text-xl font-semibold", className),
+      ...props
+    }
+  );
+}
+function DialogDescription({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    DialogPrimitive.Description,
+    {
+      "data-slot": "dialog-description",
+      className: cn("text-sm text-muted-foreground", className),
+      ...props
+    }
+  );
+}
+function DialogClose({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    DialogPrimitive.Close,
+    {
+      "data-slot": "dialog-close",
+      className: cn(className),
+      ...props
+    }
+  );
+}
+export {
+  Dialog,
+  DialogClose,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogOverlay,
+  DialogPortal,
+  DialogTitle,
+  DialogTrigger
+};
+//# sourceMappingURL=dialog.js.map

package/dist/components/ui/dialog.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/ui/dialog.tsx"],"sourcesContent":["\"use client\";\n\nimport { Dialog as DialogPrimitive } from \"@base-ui/react/dialog\";\nimport { DismissRegular } from \"@fluentui/react-icons\";\nimport type { ComponentProps } from \"react\";\n\nimport { cn } from \"../../lib/utils\";\n\n/**\n * Dialog — Fluent 2-styled, shadcn-API modal dialog.\n *\n * Follows the overlay patterns set by `select.tsx` (portal → popup surface,\n * `data-starting-style`/`data-ending-style` motion with token durations and\n * easings) with dialog-specific elevation: `shadow-64` + `rounded-xl`\n * (conventions §3.4/§3.6 — dialogs are the kit's highest floating surface).\n *\n * ## Base UI mapping (conventions §9)\n * Behavior — focus trapping, portalling, open/close state, scroll locking,\n * outside-press and Escape dismissal — genuinely needs a primitive, so the\n * parts wrap `@base-ui/react/dialog` (namespace import, matching the actual\n * export shape in node_modules, exactly like `select.tsx`). shadcn part names\n * are mapped onto Base UI's model:\n *\n * | Exported (shadcn name) | Base UI primitive                                   |\n * | ---------------------- | --------------------------------------------------- |\n * | `Dialog`               | `Dialog.Root`                                       |\n * | `DialogTrigger`        | `Dialog.Trigger`                                    |\n * | `DialogPortal`         | `Dialog.Portal`                                     |\n * | `DialogOverlay`        | `Dialog.Backdrop`  ← see divergence 1               |\n * | `DialogContent`        | `Dialog.Portal` + `Dialog.Backdrop` + `Dialog.Popup` (+ built-in ✕ `Dialog.Close`) |\n * | `DialogHeader`         | plain `<div>` (shadcn parity — no Base UI part)     |\n * | `DialogFooter`         | plain `<div>` (shadcn parity — no Base UI part)     |\n * | `DialogTitle`          | `Dialog.Title` (renders `<h2>`)                     |\n * | `DialogDescription`    | `Dialog.Description` (renders `<p>`)                |\n * | `DialogClose`          | `Dialog.Close`                                      |\n *\n * Base UI wires the popup's `aria-labelledby` to `DialogTitle` and\n * `aria-describedby` to `DialogDescription` automatically — no manual ids.\n *\n * ## Divergences from the shadcn/Radix Dialog API (all deliberate)\n * 1. **`DialogOverlay` wraps Base UI `Dialog.Backdrop`, not a Radix `Overlay`.**\n *    Same role (the dimming layer under the popup), different primitive name.\n *    Note Base UI skips rendering the backdrop for *nested* dialogs unless\n *    `forceRender` is set — parent smoke already covers the viewport.\n * 2. **`modal` defaults to `true`** (focus trap + page scroll lock + outside\n *    pointer interactions disabled), matching Radix. Base UI adds a third mode,\n *    `modal=\"trap-focus\"` (trap focus without scroll lock), which passes\n *    straight through.\n * 3. **`DialogContent` composes `Portal` + `Backdrop` + `Popup`** and appends a\n *    top-right ✕ close button (shadcn parity — shadcn composes the same three\n *    Radix parts). Pass `showCloseButton={false}` to omit the ✕ (matching\n *    current shadcn's `DialogContent` prop).\n * 4. **No `asChild`.** Base UI composes via the `render` prop instead — e.g.\n *    `<DialogTrigger render={<Button variant=\"secondary\" />}>Open</DialogTrigger>`.\n *    Every part forwards it.\n * 5. **`onOpenChange(open, eventDetails)`** — Base UI passes a second\n *    `eventDetails` argument (reason + native event). The first argument is the\n *    boolean Radix passes, so existing shadcn call sites work unchanged.\n * 6. **`Dialog.Viewport` is not re-exported.** It's a Base UI layout helper for\n *    scrollable full-viewport dialogs with no shadcn equivalent; the kit centers\n *    the popup with fixed positioning like shadcn. Compose it manually from\n *    `@base-ui/react/dialog` if you need it.\n *\n * ## Smoke layer (`bg-black/40`) — sanctioned hardcoded color\n * The backdrop is black at 40% opacity in *both* themes, per Fluent's smoke\n * layer (it dims light and dark surfaces alike). Conventions §3.7 bans\n * hardcoded colors so a shade can't drift from the token set, but the smoke\n * layer is intentionally theme-invariant — there is no token for it and\n * inventing one would imply it re-points in dark mode, which it must not.\n * `bg-black/40` is the sanctioned exception here.\n *\n * ## Motion note — the popup zoom animates `scale`, not `transform`\n * Tailwind v4 emits `translate-*` and `scale-*` as the independent CSS\n * `translate:`/`scale:` properties (not a shared `transform:`), so the\n * -50%/-50% centering translate and the open/close zoom coexist without\n * clobbering each other — but it also means the popup's transition must target\n * `transition-[opacity,scale]` (a `transition-[transform,opacity]` list would\n * leave the zoom snapping — every popup in the kit uses `[opacity,scale]` for\n * this reason).\n *\n * ## `\"use client\"` — required\n * Two reasons. The Base UI Dialog parts manage client state (each part module\n * carries its own `'use client'`), and — decisively — `DismissRegular` from\n * `@fluentui/react-icons` must stay inside a client boundary: the package's\n * shared icon-sizing module calls `@griffel/react`'s client-only `__styles()`\n * at module scope without its own directive, so importing an icon from a\n * Server Component breaks `next build`. See conventions §9; `select.tsx` and\n * `checkbox.tsx` are the precedents.\n *\n * ## data-slot note\n * `Dialog` (Root) renders no DOM element of its own, so it carries no\n * `data-slot`. Every part that renders an element does — `dialog-trigger`,\n * `dialog-overlay`, `dialog-content`, etc.\n */\n\nfunction Dialog<Payload>(props: DialogPrimitive.Root.Props<Payload>) {\n  return <DialogPrimitive.Root {...props} />;\n}\n\nfunction DialogTrigger({\n  className,\n  ...props\n}: ComponentProps<typeof DialogPrimitive.Trigger>) {\n  return (\n    <DialogPrimitive.Trigger\n      data-slot=\"dialog-trigger\"\n      className={cn(className)}\n      {...props}\n    />\n  );\n}\n\nfunction DialogPortal(props: ComponentProps<typeof DialogPrimitive.Portal>) {\n  return <DialogPrimitive.Portal data-slot=\"dialog-portal\" {...props} />;\n}\n\n/**\n * Overlay — Fluent's smoke layer: black at 40% opacity over the full viewport\n * in both themes (see the smoke-layer note above), fading in/out via Base UI's\n * `data-starting-style`/`data-ending-style` hooks with token durations/easings.\n */\nfunction DialogOverlay({\n  className,\n  ...props\n}: ComponentProps<typeof DialogPrimitive.Backdrop>) {\n  return (\n    <DialogPrimitive.Backdrop\n      data-slot=\"dialog-overlay\"\n      className={cn(\n        \"fixed inset-0 z-50 bg-black/40\",\n        // motion — fade on open (enter) / close (exit)\n        \"transition-opacity duration-normal ease-decelerate-mid\",\n        \"data-starting-style:opacity-0\",\n        \"data-ending-style:opacity-0 data-ending-style:ease-accelerate-mid\",\n        className\n      )}\n      {...props}\n    />\n  );\n}\n\n/**\n * Content — the modal surface: `Portal` → `Backdrop` → `Popup`, centered with\n * fixed positioning, on `bg-background` with `rounded-xl` + `shadow-64`\n * (dialog elevation, conventions §3.6). A fade + slight zoom rides the\n * `data-starting-style`/`data-ending-style` hooks; the zoom animates the CSS\n * `scale` property (see the motion note above). The built-in ✕ close button\n * sits top-right (`showCloseButton={false}` omits it).\n */\nfunction DialogContent({\n  className,\n  children,\n  showCloseButton = true,\n  ...props\n}: ComponentProps<typeof DialogPrimitive.Popup> & {\n  showCloseButton?: boolean;\n}) {\n  return (\n    <DialogPortal>\n      <DialogOverlay />\n      <DialogPrimitive.Popup\n        data-slot=\"dialog-content\"\n        className={cn(\n          // layout — centered fixed surface, dialog radius + elevation\n          \"fixed top-[50%] left-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 rounded-xl border bg-background p-6 text-foreground shadow-64 outline-none\",\n          // motion — fade + slight zoom; `scale`, not `transform` (see doc note)\n          \"transition-[opacity,scale] duration-normal ease-decelerate-mid\",\n          \"data-starting-style:scale-95 data-starting-style:opacity-0\",\n          \"data-ending-style:scale-95 data-ending-style:opacity-0 data-ending-style:ease-accelerate-mid\",\n          className\n        )}\n        {...props}\n      >\n        {children}\n        {showCloseButton && (\n          <DialogPrimitive.Close\n            data-slot=\"dialog-close\"\n            className={cn(\n              \"absolute top-4 right-4 flex size-8 items-center justify-center rounded-md text-muted-foreground\",\n              \"cursor-pointer outline-none transition-colors duration-fast ease-ease\",\n              \"hover:bg-accent hover:text-accent-foreground active:bg-accent/80 dark:hover:bg-accent/50 dark:active:bg-accent/70\",\n              \"focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background\",\n              \"disabled:pointer-events-none disabled:opacity-50\"\n            )}\n          >\n            <DismissRegular className=\"size-4\" />\n            <span className=\"sr-only\">Close</span>\n          </DialogPrimitive.Close>\n        )}\n      </DialogPrimitive.Popup>\n    </DialogPortal>\n  );\n}\n\nfunction DialogHeader({ className, ...props }: ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"dialog-header\"\n      className={cn(\"flex flex-col gap-1.5 text-center sm:text-left\", className)}\n      {...props}\n    />\n  );\n}\n\nfunction DialogFooter({ className, ...props }: ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"dialog-footer\"\n      className={cn(\n        \"flex flex-col-reverse gap-2 sm:flex-row sm:justify-end\",\n        className\n      )}\n      {...props}\n    />\n  );\n}\n\nfunction DialogTitle({\n  className,\n  ...props\n}: ComponentProps<typeof DialogPrimitive.Title>) {\n  return (\n    <DialogPrimitive.Title\n      data-slot=\"dialog-title\"\n      className={cn(\"text-xl font-semibold\", className)}\n      {...props}\n    />\n  );\n}\n\nfunction DialogDescription({\n  className,\n  ...props\n}: ComponentProps<typeof DialogPrimitive.Description>) {\n  return (\n    <DialogPrimitive.Description\n      data-slot=\"dialog-description\"\n      className={cn(\"text-sm text-muted-foreground\", className)}\n      {...props}\n    />\n  );\n}\n\nfunction DialogClose({\n  className,\n  ...props\n}: ComponentProps<typeof DialogPrimitive.Close>) {\n  return (\n    <DialogPrimitive.Close\n      data-slot=\"dialog-close\"\n      className={cn(className)}\n      {...props}\n    />\n  );\n}\n\nexport {\n  Dialog,\n  DialogTrigger,\n  DialogPortal,\n  DialogOverlay,\n  DialogContent,\n  DialogHeader,\n  DialogFooter,\n  DialogTitle,\n  DialogDescription,\n  DialogClose,\n};\n"],"mappings":"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","names":[]}

package/dist/components/ui/dropdown-menu.d.ts

@@ -0,0 +1,155 @@
+import * as react from 'react';
+import { ComponentProps } from 'react';
+import { Menu } from '@base-ui/react/menu';
+
+/**
+ * DropdownMenu — Fluent 2-styled, shadcn-API dropdown menu.
+ *
+ * Second overlay component in the kit, so it deliberately reuses every pattern
+ * `select.tsx` established (portal + positioner + popup surface, `shadow-16`
+ * flyout elevation, 32px `data-highlighted` item rows, scale+fade motion via
+ * `data-starting-style`/`data-ending-style`). Its popup surface and item rows
+ * are visually identical to Select's — same tokens, same radii.
+ *
+ * ## Base UI mapping (conventions §9)
+ * Behavior — focus management, portalling, open/close state, roving tabindex,
+ * type-ahead, collision-aware positioning, submenu orchestration — genuinely
+ * needs a primitive, so the parts wrap `@base-ui/react/menu` (namespace import,
+ * matching the actual export shape in node_modules, exactly like `select.tsx`).
+ * shadcn part names are mapped onto Base UI's model:
+ *
+ * | Exported (shadcn name)     | Base UI primitive                                      |
+ * | -------------------------- | ------------------------------------------------------ |
+ * | `DropdownMenu`             | `Menu.Root`                                            |
+ * | `DropdownMenuTrigger`      | `Menu.Trigger`                                         |
+ * | `DropdownMenuContent`      | `Menu.Portal` + `Menu.Positioner` + `Menu.Popup`      |
+ * | `DropdownMenuGroup`        | `Menu.Group`                                           |
+ * | `DropdownMenuLabel`        | `Menu.GroupLabel`  ← see divergence 1                  |
+ * | `DropdownMenuItem`         | `Menu.Item`                                            |
+ * | `DropdownMenuCheckboxItem` | `Menu.CheckboxItem` (+ `Menu.CheckboxItemIndicator`)  |
+ * | `DropdownMenuRadioGroup`   | `Menu.RadioGroup`                                     |
+ * | `DropdownMenuRadioItem`    | `Menu.RadioItem` (+ `Menu.RadioItemIndicator`)        |
+ * | `DropdownMenuSeparator`    | `Menu.Separator`                                      |
+ * | `DropdownMenuShortcut`     | plain `<span>` (no Base UI part) ← see divergence 4    |
+ * | `DropdownMenuSub`          | `Menu.SubmenuRoot`  ← see divergence 2                 |
+ * | `DropdownMenuSubTrigger`   | `Menu.SubmenuTrigger` (+ `ChevronRightRegular`)       |
+ * | `DropdownMenuSubContent`   | `Menu.Portal` + `Menu.Positioner` + `Menu.Popup`      |
+ *
+ * ## Divergences from the shadcn/Radix DropdownMenu API (all deliberate)
+ * 1. **`DropdownMenuLabel` maps to Base UI `Menu.GroupLabel`.** Like `select.tsx`,
+ *    the label part is the heading *inside* a `DropdownMenuGroup` (Base UI
+ *    associates it with the group for screen readers). It is styled to match
+ *    `SelectLabel` (muted `text-xs` caption) rather than shadcn's darker
+ *    `text-sm`, keeping every group heading in the kit visually consistent. It
+ *    still honours shadcn's `inset` prop (`data-[inset]:pl-8`).
+ * 2. **`DropdownMenuSub` is Base UI `Menu.SubmenuRoot`, not a Radix `Sub`.** Base
+ *    UI models a submenu as its own nested root; `DropdownMenuSubContent`
+ *    therefore re-composes `Portal` → `Positioner` → `Popup` (Radix's
+ *    `SubContent` is a single part). Submenus open to the side and Base UI
+ *    positions them collision-aware; the trigger stays highlighted while its
+ *    submenu is open via `data-[popup-open]`.
+ * 3. **Composition uses Base UI's `render` prop, not `asChild`.** shadcn's
+ *    `<DropdownMenuTrigger asChild>` has no analogue here — Base UI parts take a
+ *    `render` prop for polymorphism. To use the kit `Button` as the trigger,
+ *    pass `render={<Button>…</Button>}`. The wrapper forwards `render` straight
+ *    through, so the honest Base UI model is preserved (same reasoning as
+ *    `select.tsx` keeping `SelectValue`'s render-function child).
+ * 4. **`DropdownMenuShortcut` is a plain `<span>`** (shadcn parity — it is not a
+ *    Base UI part, just a right-aligned muted caption for a keyboard hint).
+ * 5. **`DropdownMenuItem` keeps shadcn's `inset` + `variant` props.** `variant`
+ *    is surfaced as `data-variant` (mirrors `Button`'s `data-variant` hook); the
+ *    `"destructive"` value tints the row and its icons with the `destructive`
+ *    token (never a hardcoded red), and its highlight uses `destructive/10`
+ *    (`/20` in dark) so the destructive intent survives the hover state.
+ *
+ * ## `"use client"` — required (same root cause as `select.tsx`)
+ * Every Base UI Menu part module carries its own `'use client'`, so on that
+ * basis this wrapper could stay server-renderable. But `CheckmarkRegular` /
+ * `ChevronRightRegular` from `@fluentui/react-icons` force the directive: the
+ * package's shared icon-sizing module (`createFluentIcon.styles.js`) calls
+ * `@griffel/react`'s `__styles()` at module scope *without* its own
+ * `'use client'`, even though `__styles` is client-only. Rendering any of these
+ * icons from a Server Component pulls that module into the server's RSC graph,
+ * and `next build` (Turbopack) fails collecting page data with "Attempted to
+ * call __styles() from the server but __styles is on the client" — reproduced
+ * against `@fluentui/react-icons@2.0.333` / `@griffel/react@1.7.5`, and it
+ * poisons every route sharing Turbopack's chunk for those icons. `"use client"`
+ * here keeps the icon imports inside a client boundary. `select.tsx` and
+ * `checkbox.tsx` carry the same fix (their doc comments explain it inline).
+ *
+ * ## data-slot note
+ * `DropdownMenu` (Root) and `DropdownMenuSub` (SubmenuRoot) render no DOM element
+ * of their own, so they carry no `data-slot`. Every part that renders an element
+ * does — `dropdown-menu-trigger`, `dropdown-menu-content`, `dropdown-menu-item`,
+ * etc. — which is what tests/consumers hook onto.
+ */
+declare function DropdownMenu<Payload>(props: Menu.Root.Props<Payload>): react.JSX.Element;
+declare function DropdownMenuTrigger({ className, ...props }: ComponentProps<typeof Menu.Trigger>): react.JSX.Element;
+declare function DropdownMenuGroup({ className, ...props }: ComponentProps<typeof Menu.Group>): react.JSX.Element;
+/**
+ * Content — the floating flyout: `Portal` → `Positioner` → `Popup`. Surface is
+ * `bg-popover` + `border` + `shadow-16` (Fluent flyout elevation, conventions
+ * §3.6), `rounded-md`, `min-w-[8rem]` (menus size to content, unlike Select
+ * which matches the anchor width). A subtle scale+fade open/close animation
+ * rides Base UI's `data-starting-style`/`data-ending-style` hooks with token
+ * durations/easings — the exact lines from `SelectContent`.
+ */
+declare function DropdownMenuContent({ className, sideOffset, align, side, ...props }: ComponentProps<typeof Menu.Popup> & Pick<ComponentProps<typeof Menu.Positioner>, "side" | "align" | "sideOffset">): react.JSX.Element;
+/**
+ * Label — a heading for a `DropdownMenuGroup` (Base UI `Menu.GroupLabel`, see
+ * divergence 1). Small muted caption, matched to `SelectLabel`. `inset` shifts
+ * it to line up with items that carry a leading indicator.
+ */
+declare function DropdownMenuLabel({ className, inset, ...props }: ComponentProps<typeof Menu.GroupLabel> & {
+    inset?: boolean;
+}): react.JSX.Element;
+/**
+ * Item — one command row. 32px tall (`h-8`) with the Fluent 4px list radius,
+ * matching `SelectItem`. Highlight (keyboard focus or hover) rides Base UI's
+ * `data-highlighted` → `bg-accent`/`text-accent-foreground`. `inset` adds the
+ * leading gutter used by checkbox/radio rows; `variant="destructive"` tints the
+ * text/icons with the `destructive` token and gives the highlight a destructive
+ * wash. Icons follow `SelectItem`'s size-only rules (no muting).
+ */
+declare function DropdownMenuItem({ className, inset, variant, ...props }: ComponentProps<typeof Menu.Item> & {
+    inset?: boolean;
+    variant?: "default" | "destructive";
+}): react.JSX.Element;
+/**
+ * CheckboxItem — a toggleable row. The check (`CheckmarkRegular`) sits in a
+ * left gutter (`pl-8`), inside `Menu.CheckboxItemIndicator`, which Base UI only
+ * mounts while checked. Base UI keeps the menu open on toggle (its
+ * `closeOnClick` defaults to `false` for checkbox items).
+ */
+declare function DropdownMenuCheckboxItem({ className, children, checked, ...props }: ComponentProps<typeof Menu.CheckboxItem>): react.JSX.Element;
+declare function DropdownMenuRadioGroup({ className, ...props }: ComponentProps<typeof Menu.RadioGroup>): react.JSX.Element;
+/**
+ * RadioItem — one option in a `DropdownMenuRadioGroup`. The selected marker is a
+ * small filled circle (an inline `<svg>` using `fill-current`, so it inherits
+ * the row's text color and needs no extra icon import — same rationale as the
+ * kit `RadioGroup` dot). `Menu.RadioItemIndicator` only mounts while selected.
+ */
+declare function DropdownMenuRadioItem({ className, children, ...props }: ComponentProps<typeof Menu.RadioItem>): react.JSX.Element;
+declare function DropdownMenuSeparator({ className, ...props }: ComponentProps<typeof Menu.Separator>): react.JSX.Element;
+/**
+ * Shortcut — a right-aligned keyboard hint caption. Plain `<span>` (divergence
+ * 4), shadcn parity: `ml-auto text-xs tracking-widest text-muted-foreground`.
+ */
+declare function DropdownMenuShortcut({ className, ...props }: ComponentProps<"span">): react.JSX.Element;
+declare function DropdownMenuSub(props: Menu.SubmenuRoot.Props): react.JSX.Element;
+/**
+ * SubTrigger — an item that opens a submenu, with a trailing `ChevronRightRegular`.
+ * Same row treatment as `DropdownMenuItem`; stays highlighted while its submenu
+ * is open via Base UI's `data-[popup-open]`. Honours `inset`.
+ */
+declare function DropdownMenuSubTrigger({ className, inset, children, ...props }: ComponentProps<typeof Menu.SubmenuTrigger> & {
+    inset?: boolean;
+}): react.JSX.Element;
+/**
+ * SubContent — a submenu's floating surface. Same `Portal` → `Positioner` →
+ * `Popup` composition and surface as `DropdownMenuContent`, but defaults to
+ * opening on the inline-end side (Base UI still flips it collision-aware).
+ */
+declare function DropdownMenuSubContent({ className, sideOffset, align, ...props }: ComponentProps<typeof Menu.Popup> & Pick<ComponentProps<typeof Menu.Positioner>, "side" | "align" | "sideOffset">): react.JSX.Element;
+
+export { DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger };

package/dist/components/ui/dropdown-menu.js

@@ -0,0 +1,295 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Menu as MenuPrimitive } from "@base-ui/react/menu";
+import { CheckmarkRegular, ChevronRightRegular } from "@fluentui/react-icons";
+import { cn } from "../../lib/utils.js";
+function DropdownMenu(props) {
+  return /* @__PURE__ */ jsx(MenuPrimitive.Root, { ...props });
+}
+function DropdownMenuTrigger({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    MenuPrimitive.Trigger,
+    {
+      "data-slot": "dropdown-menu-trigger",
+      className: cn(className),
+      ...props
+    }
+  );
+}
+function DropdownMenuGroup({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    MenuPrimitive.Group,
+    {
+      "data-slot": "dropdown-menu-group",
+      className: cn(className),
+      ...props
+    }
+  );
+}
+function DropdownMenuContent({
+  className,
+  sideOffset = 4,
+  align = "start",
+  side = "bottom",
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(MenuPrimitive.Portal, { children: /* @__PURE__ */ jsx(
+    MenuPrimitive.Positioner,
+    {
+      "data-slot": "dropdown-menu-positioner",
+      sideOffset,
+      align,
+      side,
+      className: "z-50 outline-none",
+      children: /* @__PURE__ */ jsx(
+        MenuPrimitive.Popup,
+        {
+          "data-slot": "dropdown-menu-content",
+          className: cn(
+            "min-w-[8rem] origin-[var(--transform-origin)] overflow-y-auto overscroll-contain rounded-md border bg-popover p-1 text-popover-foreground shadow-16 outline-none",
+            "max-h-[var(--available-height)]",
+            // motion — subtle scale + fade on open (enter) / close (exit)
+            "transition-[opacity,scale] duration-fast ease-decelerate-mid",
+            "data-starting-style:scale-95 data-starting-style:opacity-0",
+            "data-ending-style:scale-95 data-ending-style:opacity-0 data-ending-style:ease-accelerate-mid",
+            className
+          ),
+          ...props
+        }
+      )
+    }
+  ) });
+}
+function DropdownMenuLabel({
+  className,
+  inset,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    MenuPrimitive.GroupLabel,
+    {
+      "data-slot": "dropdown-menu-label",
+      "data-inset": inset || void 0,
+      className: cn(
+        // Fluent Menu section header — Caption 1 Stronger (12px bold) in
+        // NeutralForeground2, per the Figma "Menu section" symbol; deliberately
+        // heavier than SelectLabel's muted caption (Figma validation pass 2).
+        "px-2 py-1.5 text-xs font-bold text-foreground-2 select-none",
+        "data-[inset]:pl-8",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function DropdownMenuItem({
+  className,
+  inset,
+  variant = "default",
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    MenuPrimitive.Item,
+    {
+      "data-slot": "dropdown-menu-item",
+      "data-inset": inset || void 0,
+      "data-variant": variant,
+      className: cn(
+        // layout — Fluent 32px row, 4px list radius
+        "relative flex h-8 cursor-default items-center gap-2 rounded-md px-2 text-sm outline-none select-none",
+        // rest text is NeutralForeground2, darkening to accent-foreground on
+        // highlight (Figma validation: Fluent list rows rest at #424242)
+        "text-foreground-2 data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground",
+        // disabled item — muted + non-interactive
+        "data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+        // inset — leading gutter to align with indicator rows
+        "data-[inset]:pl-8",
+        // destructive variant — token-tinted text, icons, and highlight wash
+        "data-[variant=destructive]:text-destructive",
+        "data-[variant=destructive]:data-[highlighted]:bg-destructive/10 data-[variant=destructive]:data-[highlighted]:text-destructive dark:data-[variant=destructive]:data-[highlighted]:bg-destructive/20",
+        "data-[variant=destructive]:[&_svg:not([class*='text-'])]:text-destructive",
+        // icons — size only (matches SelectItem)
+        "[&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function DropdownMenuCheckboxItem({
+  className,
+  children,
+  checked,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxs(
+    MenuPrimitive.CheckboxItem,
+    {
+      "data-slot": "dropdown-menu-checkbox-item",
+      checked,
+      className: cn(
+        "relative flex h-8 cursor-default items-center gap-2 rounded-md py-1.5 pr-2 pl-8 text-sm outline-none select-none",
+        "text-foreground-2 data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground",
+        "data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+        "[&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className
+      ),
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx("span", { className: "absolute left-2 flex size-4 items-center justify-center", children: /* @__PURE__ */ jsx(MenuPrimitive.CheckboxItemIndicator, { children: /* @__PURE__ */ jsx(CheckmarkRegular, { className: "size-4" }) }) }),
+        children
+      ]
+    }
+  );
+}
+function DropdownMenuRadioGroup({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    MenuPrimitive.RadioGroup,
+    {
+      "data-slot": "dropdown-menu-radio-group",
+      className: cn(className),
+      ...props
+    }
+  );
+}
+function DropdownMenuRadioItem({
+  className,
+  children,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxs(
+    MenuPrimitive.RadioItem,
+    {
+      "data-slot": "dropdown-menu-radio-item",
+      className: cn(
+        "relative flex h-8 cursor-default items-center gap-2 rounded-md py-1.5 pr-2 pl-8 text-sm outline-none select-none",
+        "text-foreground-2 data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground",
+        "data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+        "[&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className
+      ),
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx("span", { className: "absolute left-2 flex size-4 items-center justify-center", children: /* @__PURE__ */ jsx(MenuPrimitive.RadioItemIndicator, { children: /* @__PURE__ */ jsx("svg", { viewBox: "0 0 8 8", className: "size-2 fill-current", "aria-hidden": true, children: /* @__PURE__ */ jsx("circle", { cx: "4", cy: "4", r: "4" }) }) }) }),
+        children
+      ]
+    }
+  );
+}
+function DropdownMenuSeparator({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    MenuPrimitive.Separator,
+    {
+      "data-slot": "dropdown-menu-separator",
+      className: cn("pointer-events-none -mx-1 my-1 h-px bg-border", className),
+      ...props
+    }
+  );
+}
+function DropdownMenuShortcut({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      "data-slot": "dropdown-menu-shortcut",
+      className: cn(
+        "ml-auto text-xs tracking-widest text-muted-foreground",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function DropdownMenuSub(props) {
+  return /* @__PURE__ */ jsx(MenuPrimitive.SubmenuRoot, { ...props });
+}
+function DropdownMenuSubTrigger({
+  className,
+  inset,
+  children,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxs(
+    MenuPrimitive.SubmenuTrigger,
+    {
+      "data-slot": "dropdown-menu-sub-trigger",
+      "data-inset": inset || void 0,
+      className: cn(
+        "relative flex h-8 cursor-default items-center gap-2 rounded-md px-2 text-sm outline-none select-none",
+        "text-foreground-2 data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground",
+        "data-[popup-open]:bg-accent data-[popup-open]:text-accent-foreground",
+        "data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+        "data-[inset]:pl-8",
+        "[&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className
+      ),
+      ...props,
+      children: [
+        children,
+        /* @__PURE__ */ jsx(ChevronRightRegular, { className: "ml-auto size-4 text-muted-foreground" })
+      ]
+    }
+  );
+}
+function DropdownMenuSubContent({
+  className,
+  sideOffset = 4,
+  align = "start",
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(MenuPrimitive.Portal, { children: /* @__PURE__ */ jsx(
+    MenuPrimitive.Positioner,
+    {
+      "data-slot": "dropdown-menu-sub-positioner",
+      sideOffset,
+      align,
+      className: "z-50 outline-none",
+      children: /* @__PURE__ */ jsx(
+        MenuPrimitive.Popup,
+        {
+          "data-slot": "dropdown-menu-sub-content",
+          className: cn(
+            "min-w-[8rem] origin-[var(--transform-origin)] overflow-y-auto overscroll-contain rounded-md border bg-popover p-1 text-popover-foreground shadow-16 outline-none",
+            "max-h-[var(--available-height)]",
+            "transition-[opacity,scale] duration-fast ease-decelerate-mid",
+            "data-starting-style:scale-95 data-starting-style:opacity-0",
+            "data-ending-style:scale-95 data-ending-style:opacity-0 data-ending-style:ease-accelerate-mid",
+            className
+          ),
+          ...props
+        }
+      )
+    }
+  ) });
+}
+export {
+  DropdownMenu,
+  DropdownMenuCheckboxItem,
+  DropdownMenuContent,
+  DropdownMenuGroup,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuRadioGroup,
+  DropdownMenuRadioItem,
+  DropdownMenuSeparator,
+  DropdownMenuShortcut,
+  DropdownMenuSub,
+  DropdownMenuSubContent,
+  DropdownMenuSubTrigger,
+  DropdownMenuTrigger
+};
+//# sourceMappingURL=dropdown-menu.js.map