@graundtech/fluent2-react-kit 0.5.1

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

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

package/dist/components/ui/input.d.ts

@@ -0,0 +1,44 @@
+import * as react from 'react';
+import { ComponentProps } from 'react';
+
+/**
+ * Input — Fluent 2-styled, shadcn-API text input.
+ *
+ * Aesthetics follow Fluent 2 (32px medium field, `rounded-md` = 4px, flat at
+ * rest); the prop surface is a bare `ComponentProps<"input">` — shadcn parity,
+ * no size variants (Fluent's small/large field sizes are backlog, not shipped
+ * here). No `cva`/variants export: there is only one visual treatment, same
+ * reasoning as `Separator`.
+ *
+ * Server-safe: no `"use client"`, no hooks — the React import is type-only,
+ * so the file can be dropped straight into an RSC tree.
+ *
+ * Focus — the signature Fluent detail is a 2px brand underline on the bottom
+ * edge while the rest of the border stays put, with **no layout shift**. The
+ * generic kit focus ring (conventions §4: `ring-2 ring-ring ring-offset-2`)
+ * is a poor fit here — an offset ring around a form field reads as floating
+ * outside the field rather than "this field is active," which is the Fluent
+ * signature. So this component deliberately swaps it for an **inset
+ * box-shadow** (`shadow-[inset_0_-2px_0_0_var(--brand-80)]`), documented here
+ * as the allowed per-component deviation conventions §4 anticipates:
+ * - It paints *inside* the border box, so nothing reflows — no offset ring,
+ *   no extra border width.
+ * - `border` also switches to `border-primary` on focus so the whole field
+ *   reads as active, not just the underline.
+ * - `--brand-80`/`--brand-100` are read directly via `var()` (not a Tailwind
+ *   `bg-brand-*` utility) because the ramp is global — same hex in light and
+ *   dark (tokens.css §brand ramp comment) — so the light/dark split is a
+ *   `dark:` override on which stop is used, exactly as the spec prescribes.
+ *
+ * Invalid — the shadcn `aria-invalid:` treatment from conventions §4
+ * (destructive border + destructive ring tint) is declared *after* the focus
+ * classes so it wins the border tie-break when a field is both invalid and
+ * focused (same declaration order Button already relies on for its own
+ * focus/invalid overlap). The bottom-edge accent itself also swaps to
+ * `--destructive` in the invalid+focused compound state, so a required field
+ * left invalid doesn't show a reassuring brand-blue underline while the rest
+ * of the field is screaming destructive-red.
+ */
+declare function Input({ className, ...props }: ComponentProps<"input">): react.JSX.Element;
+
+export { Input };

package/dist/components/ui/input.js

@@ -0,0 +1,43 @@
+import { jsx } from "react/jsx-runtime";
+import { cn } from "../../lib/utils.js";
+function Input({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "input",
+    {
+      "data-slot": "input",
+      className: cn(
+        // layout — Fluent medium field, 32px height. The resting bottom edge
+        // is the darker NeutralStrokeAccessible (#616161) while the other three
+        // sides stay border-input (#d1d1d1) — Fluent's signature field accent.
+        // On focus, border-primary paints all sides (and the inset underline
+        // covers this); aria-invalid's border-destructive likewise wins by
+        // specificity, so the darker bottom only shows at rest.
+        "flex h-8 w-full min-w-0 rounded-md border border-input border-b-stroke-accessible bg-background px-3 py-1 text-sm",
+        // placeholder / text selection
+        "placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground",
+        // file input button (shadcn parity)
+        "file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground",
+        // motion — color transitions plus the focus box-shadow accent below
+        "outline-none transition-[color,box-shadow] duration-fast ease-ease",
+        // disabled — opacity-based, matches conventions §4 exactly
+        "disabled:pointer-events-none disabled:opacity-50",
+        // focus — Fluent bottom brand accent via inset box-shadow, no reflow.
+        // Replaces the generic ring recipe for this component (documented
+        // deviation, conventions §4).
+        "focus-visible:border-primary focus-visible:shadow-[inset_0_-2px_0_0_var(--brand-80)] dark:focus-visible:shadow-[inset_0_-2px_0_0_var(--brand-100)]",
+        // invalid — shadcn aria-invalid treatment, conventions §4. Declared
+        // after focus-visible so it wins the border tie when both apply; the
+        // compound aria-invalid+focus-visible rule swaps the underline accent
+        // to destructive too, so an invalid+focused field reads consistently.
+        "aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40",
+        "aria-invalid:focus-visible:shadow-[inset_0_-2px_0_0_var(--destructive)]",
+        className
+      ),
+      ...props
+    }
+  );
+}
+export {
+  Input
+};
+//# sourceMappingURL=input.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/ui/input.tsx"],"sourcesContent":["import type { ComponentProps } from \"react\";\n\nimport { cn } from \"../../lib/utils\";\n\n/**\n * Input — Fluent 2-styled, shadcn-API text input.\n *\n * Aesthetics follow Fluent 2 (32px medium field, `rounded-md` = 4px, flat at\n * rest); the prop surface is a bare `ComponentProps<\"input\">` — shadcn parity,\n * no size variants (Fluent's small/large field sizes are backlog, not shipped\n * here). No `cva`/variants export: there is only one visual treatment, same\n * reasoning as `Separator`.\n *\n * Server-safe: no `\"use client\"`, no hooks — the React import is type-only,\n * so the file can be dropped straight into an RSC tree.\n *\n * Focus — the signature Fluent detail is a 2px brand underline on the bottom\n * edge while the rest of the border stays put, with **no layout shift**. The\n * generic kit focus ring (conventions §4: `ring-2 ring-ring ring-offset-2`)\n * is a poor fit here — an offset ring around a form field reads as floating\n * outside the field rather than \"this field is active,\" which is the Fluent\n * signature. So this component deliberately swaps it for an **inset\n * box-shadow** (`shadow-[inset_0_-2px_0_0_var(--brand-80)]`), documented here\n * as the allowed per-component deviation conventions §4 anticipates:\n * - It paints *inside* the border box, so nothing reflows — no offset ring,\n *   no extra border width.\n * - `border` also switches to `border-primary` on focus so the whole field\n *   reads as active, not just the underline.\n * - `--brand-80`/`--brand-100` are read directly via `var()` (not a Tailwind\n *   `bg-brand-*` utility) because the ramp is global — same hex in light and\n *   dark (tokens.css §brand ramp comment) — so the light/dark split is a\n *   `dark:` override on which stop is used, exactly as the spec prescribes.\n *\n * Invalid — the shadcn `aria-invalid:` treatment from conventions §4\n * (destructive border + destructive ring tint) is declared *after* the focus\n * classes so it wins the border tie-break when a field is both invalid and\n * focused (same declaration order Button already relies on for its own\n * focus/invalid overlap). The bottom-edge accent itself also swaps to\n * `--destructive` in the invalid+focused compound state, so a required field\n * left invalid doesn't show a reassuring brand-blue underline while the rest\n * of the field is screaming destructive-red.\n */\nfunction Input({ className, ...props }: ComponentProps<\"input\">) {\n  return (\n    <input\n      data-slot=\"input\"\n      className={cn(\n        // layout — Fluent medium field, 32px height. The resting bottom edge\n        // is the darker NeutralStrokeAccessible (#616161) while the other three\n        // sides stay border-input (#d1d1d1) — Fluent's signature field accent.\n        // On focus, border-primary paints all sides (and the inset underline\n        // covers this); aria-invalid's border-destructive likewise wins by\n        // specificity, so the darker bottom only shows at rest.\n        \"flex h-8 w-full min-w-0 rounded-md border border-input border-b-stroke-accessible bg-background px-3 py-1 text-sm\",\n        // placeholder / text selection\n        \"placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground\",\n        // file input button (shadcn parity)\n        \"file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground\",\n        // motion — color transitions plus the focus box-shadow accent below\n        \"outline-none transition-[color,box-shadow] duration-fast ease-ease\",\n        // disabled — opacity-based, matches conventions §4 exactly\n        \"disabled:pointer-events-none disabled:opacity-50\",\n        // focus — Fluent bottom brand accent via inset box-shadow, no reflow.\n        // Replaces the generic ring recipe for this component (documented\n        // deviation, conventions §4).\n        \"focus-visible:border-primary focus-visible:shadow-[inset_0_-2px_0_0_var(--brand-80)] dark:focus-visible:shadow-[inset_0_-2px_0_0_var(--brand-100)]\",\n        // invalid — shadcn aria-invalid treatment, conventions §4. Declared\n        // after focus-visible so it wins the border tie when both apply; the\n        // compound aria-invalid+focus-visible rule swaps the underline accent\n        // to destructive too, so an invalid+focused field reads consistently.\n        \"aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40\",\n        \"aria-invalid:focus-visible:shadow-[inset_0_-2px_0_0_var(--destructive)]\",\n        className\n      )}\n      {...props}\n    />\n  );\n}\n\nexport { Input };\n"],"mappings":"AA4CI;AA1CJ,SAAS,UAAU;AAwCnB,SAAS,MAAM,EAAE,WAAW,GAAG,MAAM,GAA4B;AAC/D,SACE;AAAA,IAAC;AAAA;AAAA,MACC,aAAU;AAAA,MACV,WAAW;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,QAOT;AAAA;AAAA,QAEA;AAAA;AAAA,QAEA;AAAA;AAAA,QAEA;AAAA;AAAA,QAEA;AAAA;AAAA;AAAA;AAAA,QAIA;AAAA;AAAA;AAAA;AAAA;AAAA,QAKA;AAAA,QACA;AAAA,QACA;AAAA,MACF;AAAA,MACC,GAAG;AAAA;AAAA,EACN;AAEJ;","names":[]}

package/dist/components/ui/label.d.ts

@@ -0,0 +1,39 @@
+import * as react from 'react';
+import { ComponentProps } from 'react';
+
+/**
+ * Label — Fluent 2-styled, shadcn-API form label.
+ *
+ * A plain native `<label>`. Unlike the current shadcn/ui implementation (which
+ * wraps a Radix/Base UI `Label` primitive), no JS primitive is needed here: the
+ * native element already provides the `htmlFor`/`id` association and
+ * click-to-focus behavior a "Label" primitive exists to simulate. Server-safe:
+ * no `"use client"`, no hooks — the React import is type-only.
+ *
+ * Base classes match current shadcn/ui (`flex items-center text-sm leading-none
+ * select-none`, plus the `peer-disabled`/`group-data-[disabled=true]`
+ * ergonomics). Weight is `font-normal` (Regular 400): Fluent 2's Label defaults
+ * to Regular, with Semibold (600) offered as an explicit `type="Semibold"`
+ * opt-in — confirmed against the Figma Label component set, whose default
+ * variant is literally `Type=Regular (Default)`. (An earlier version of this
+ * file claimed "Fluent 2's Label type ramp is 14px/600 (semibold)" and hard-set
+ * `font-semibold`; that premise was wrong — it made every label render heavier
+ * than the Fluent default.) Consumers wanting the Semibold emphasis pass
+ * `className="font-semibold"`, which wins through `cn`'s tailwind-merge.
+ *
+ * Fluent 2 extension: a `required` prop renders a `text-destructive` asterisk
+ * after the label's children, separated by `gap-1` (4px = Fluent
+ * `spacingHorizontalXS`). The asterisk inherits the label's Regular weight
+ * (matching Fluent, which keeps the asterisk Regular even on Semibold labels)
+ * and stays `text-destructive` per the kit's single-red policy
+ * (tokens-research.md §12.9). It is purely visual — wrapped in
+ * `aria-hidden="true"` so it never pollutes the computed accessible name.
+ * Screen readers announce "required" from the associated form control instead,
+ * so pair `required` here with the real `required`/`aria-required="true"`
+ * attribute on the input/select/textarea this label is for.
+ */
+declare function Label({ className, required, children, ...props }: ComponentProps<"label"> & {
+    required?: boolean;
+}): react.JSX.Element;
+
+export { Label };

package/dist/components/ui/label.js

@@ -0,0 +1,30 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { cn } from "../../lib/utils.js";
+function Label({
+  className,
+  required = false,
+  children,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxs(
+    "label",
+    {
+      "data-slot": "label",
+      className: cn(
+        "flex items-center gap-1 text-sm leading-none font-normal select-none",
+        "group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50",
+        "peer-disabled:cursor-not-allowed peer-disabled:opacity-50",
+        className
+      ),
+      ...props,
+      children: [
+        children,
+        required ? /* @__PURE__ */ jsx("span", { "aria-hidden": "true", className: "text-destructive", children: "*" }) : null
+      ]
+    }
+  );
+}
+export {
+  Label
+};
+//# sourceMappingURL=label.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/ui/label.tsx"],"sourcesContent":["import type { ComponentProps } from \"react\";\n\nimport { cn } from \"../../lib/utils\";\n\n/**\n * Label — Fluent 2-styled, shadcn-API form label.\n *\n * A plain native `<label>`. Unlike the current shadcn/ui implementation (which\n * wraps a Radix/Base UI `Label` primitive), no JS primitive is needed here: the\n * native element already provides the `htmlFor`/`id` association and\n * click-to-focus behavior a \"Label\" primitive exists to simulate. Server-safe:\n * no `\"use client\"`, no hooks — the React import is type-only.\n *\n * Base classes match current shadcn/ui (`flex items-center text-sm leading-none\n * select-none`, plus the `peer-disabled`/`group-data-[disabled=true]`\n * ergonomics). Weight is `font-normal` (Regular 400): Fluent 2's Label defaults\n * to Regular, with Semibold (600) offered as an explicit `type=\"Semibold\"`\n * opt-in — confirmed against the Figma Label component set, whose default\n * variant is literally `Type=Regular (Default)`. (An earlier version of this\n * file claimed \"Fluent 2's Label type ramp is 14px/600 (semibold)\" and hard-set\n * `font-semibold`; that premise was wrong — it made every label render heavier\n * than the Fluent default.) Consumers wanting the Semibold emphasis pass\n * `className=\"font-semibold\"`, which wins through `cn`'s tailwind-merge.\n *\n * Fluent 2 extension: a `required` prop renders a `text-destructive` asterisk\n * after the label's children, separated by `gap-1` (4px = Fluent\n * `spacingHorizontalXS`). The asterisk inherits the label's Regular weight\n * (matching Fluent, which keeps the asterisk Regular even on Semibold labels)\n * and stays `text-destructive` per the kit's single-red policy\n * (tokens-research.md §12.9). It is purely visual — wrapped in\n * `aria-hidden=\"true\"` so it never pollutes the computed accessible name.\n * Screen readers announce \"required\" from the associated form control instead,\n * so pair `required` here with the real `required`/`aria-required=\"true\"`\n * attribute on the input/select/textarea this label is for.\n */\nfunction Label({\n  className,\n  required = false,\n  children,\n  ...props\n}: ComponentProps<\"label\"> & { required?: boolean }) {\n  return (\n    <label\n      data-slot=\"label\"\n      className={cn(\n        \"flex items-center gap-1 text-sm leading-none font-normal select-none\",\n        \"group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50\",\n        \"peer-disabled:cursor-not-allowed peer-disabled:opacity-50\",\n        className\n      )}\n      {...props}\n    >\n      {children}\n      {required ? (\n        <span aria-hidden=\"true\" className=\"text-destructive\">\n          *\n        </span>\n      ) : null}\n    </label>\n  );\n}\n\nexport { Label };\n"],"mappings":"AA0CI,SAYI,KAZJ;AAxCJ,SAAS,UAAU;AAiCnB,SAAS,MAAM;AAAA,EACb;AAAA,EACA,WAAW;AAAA,EACX;AAAA,EACA,GAAG;AACL,GAAqD;AACnD,SACE;AAAA,IAAC;AAAA;AAAA,MACC,aAAU;AAAA,MACV,WAAW;AAAA,QACT;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,MACF;AAAA,MACC,GAAG;AAAA,MAEH;AAAA;AAAA,QACA,WACC,oBAAC,UAAK,eAAY,QAAO,WAAU,oBAAmB,eAEtD,IACE;AAAA;AAAA;AAAA,EACN;AAEJ;","names":[]}

package/dist/components/ui/link.d.ts

@@ -0,0 +1,62 @@
+import * as react from 'react';
+import { ComponentProps } from 'react';
+import * as class_variance_authority_types from 'class-variance-authority/types';
+import { VariantProps } from 'class-variance-authority';
+
+/**
+ * Link — Fluent 2-styled, shadcn-API link.
+ *
+ * shadcn has no Link primitive; this is a Fluent-driven addition that follows
+ * the same authoring pattern as `Button` (cva + `asChild` + `data-slot`) so it
+ * reads as part of the same system. The color ramp matches Fluent's
+ * `BrandForegroundLink` states exactly — one brand-ramp step darker than an
+ * earlier (off-by-one-light) version: rest `brand-70` (`#115ea3`), hover
+ * `brand-60` (`#0f548c`), pressed `brand-50` (`#0c3b5e`) in light; rest
+ * `brand-100`, hover `brand-110`, pressed `brand-120` in dark. Weight is
+ * `font-normal` (Fluent Link is Body 1 / Regular 400, not the medium 500 an
+ * earlier version used). Button's own `link` variant carries the same color
+ * ramp (kept in sync) but keeps the button's `font-semibold` weight.
+ *
+ * Two variants, mapping directly to the two Fluent 2 link usages
+ * (https://storybooks.fluentui.dev/react/?path=/docs/components-link--docs):
+ * - `default` — a standalone link (nav, button-like, card action). No
+ *   underline at rest; underline appears on hover only, matching Button's
+ *   `link` variant so the two read identically.
+ * - `inline` — a link inside a sentence of body text. Fluent requires a
+ *   persistent underline here so the link is distinguishable from surrounding
+ *   text by shape, not color alone (this also keeps it usable for anyone who
+ *   can't perceive the brand-color contrast against body text).
+ *
+ * `asChild` (Radix Slot) exists specifically so this component can wrap a
+ * framework router's own link and still carry Fluent's visual treatment:
+ *
+ *   <Link asChild>
+ *     <NextLink href="/dashboard">Dashboard</NextLink>
+ *   </Link>
+ *
+ * Disabled: anchors have no native `disabled` attribute, so this component
+ * does not invent one (that would break the plain DOM-attribute contract
+ * `ComponentProps<"a">` gives consumers). Instead it styles `aria-disabled`.
+ * Two things consumers must still do themselves, because neither can be
+ * enforced from inside the component:
+ * - Omit `href` on a disabled link where possible — an anchor without `href`
+ *   is not in the tab order and is not exposed as a link by assistive tech,
+ *   which is the most robust "disabled" for a link.
+ * - If `href` must stay (e.g. to preserve layout/routing), pair
+ *   `aria-disabled="true"` with these classes: `pointer-events-none` blocks
+ *   pointer activation and `no-underline`/`opacity-50` give a visible cue.
+ *   This does **not** remove the link from the tab order or stop Enter-key
+ *   activation on its own — add `tabIndex={-1}` too if full keyboard removal
+ *   is required.
+ *
+ * Server-safe: no `"use client"`, no hooks/handlers — the React import is
+ * type-only, so the file can be dropped straight into an RSC tree.
+ */
+declare const linkVariants: (props?: ({
+    variant?: "inline" | "default" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+declare function Link({ className, variant, asChild, ...props }: ComponentProps<"a"> & VariantProps<typeof linkVariants> & {
+    asChild?: boolean;
+}): react.JSX.Element;
+
+export { Link, linkVariants };

package/dist/components/ui/link.js

@@ -0,0 +1,61 @@
+import { jsx } from "react/jsx-runtime";
+import { Slot } from "@radix-ui/react-slot";
+import { cva } from "class-variance-authority";
+import { cn } from "../../lib/utils.js";
+const linkVariants = cva(
+  [
+    // shape + type — Fluent Link is Body 1 / Regular 400
+    "rounded-xs font-normal text-brand-70 underline-offset-4 dark:text-brand-100",
+    // motion — token duration + Fluent easyEase curve; honors prefers-reduced-motion
+    // automatically (the duration tokens collapse to 0.01ms in tokens.css).
+    "outline-none transition-colors duration-fast ease-ease",
+    // interactive state ramp — Fluent BrandForegroundLink, one brand step
+    // darker than the color set above, kept in sync with Button's `link`
+    // variant. rest brand-70 → hover brand-60 → pressed brand-50 (light);
+    // rest brand-100 → hover brand-110 → pressed brand-120 (dark). The brand
+    // ramp is global, so the dark steps are declared explicitly (conventions §4).
+    "hover:text-brand-60 hover:underline active:text-brand-50 dark:hover:text-brand-110 dark:active:text-brand-120",
+    // focus — Fluent double-stroke approximation: 2px brand ring + 2px surface-colored gap
+    "focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background",
+    // disabled — anchors have no native `disabled`; styled off `aria-disabled` instead.
+    // Opacity-based to match the rest of the kit's disabled treatment (see conventions
+    // doc §4); `no-underline` also cancels the `inline` variant's persistent underline.
+    "aria-disabled:pointer-events-none aria-disabled:opacity-50 aria-disabled:no-underline"
+  ],
+  {
+    variants: {
+      variant: {
+        // Standalone link — no underline at rest, only on hover.
+        default: "",
+        // Inline-in-prose link — Fluent requires an always-on underline so the
+        // link reads as a link independent of its brand-color contrast.
+        inline: "underline"
+      }
+    },
+    defaultVariants: {
+      variant: "default"
+    }
+  }
+);
+function Link({
+  className,
+  variant = "default",
+  asChild = false,
+  ...props
+}) {
+  const Comp = asChild ? Slot : "a";
+  return /* @__PURE__ */ jsx(
+    Comp,
+    {
+      "data-slot": "link",
+      "data-variant": variant,
+      className: cn(linkVariants({ variant, className })),
+      ...props
+    }
+  );
+}
+export {
+  Link,
+  linkVariants
+};
+//# sourceMappingURL=link.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/ui/link.tsx"],"sourcesContent":["import { Slot } from \"@radix-ui/react-slot\";\nimport { cva, type VariantProps } from \"class-variance-authority\";\nimport type { ComponentProps } from \"react\";\n\nimport { cn } from \"../../lib/utils\";\n\n/**\n * Link — Fluent 2-styled, shadcn-API link.\n *\n * shadcn has no Link primitive; this is a Fluent-driven addition that follows\n * the same authoring pattern as `Button` (cva + `asChild` + `data-slot`) so it\n * reads as part of the same system. The color ramp matches Fluent's\n * `BrandForegroundLink` states exactly — one brand-ramp step darker than an\n * earlier (off-by-one-light) version: rest `brand-70` (`#115ea3`), hover\n * `brand-60` (`#0f548c`), pressed `brand-50` (`#0c3b5e`) in light; rest\n * `brand-100`, hover `brand-110`, pressed `brand-120` in dark. Weight is\n * `font-normal` (Fluent Link is Body 1 / Regular 400, not the medium 500 an\n * earlier version used). Button's own `link` variant carries the same color\n * ramp (kept in sync) but keeps the button's `font-semibold` weight.\n *\n * Two variants, mapping directly to the two Fluent 2 link usages\n * (https://storybooks.fluentui.dev/react/?path=/docs/components-link--docs):\n * - `default` — a standalone link (nav, button-like, card action). No\n *   underline at rest; underline appears on hover only, matching Button's\n *   `link` variant so the two read identically.\n * - `inline` — a link inside a sentence of body text. Fluent requires a\n *   persistent underline here so the link is distinguishable from surrounding\n *   text by shape, not color alone (this also keeps it usable for anyone who\n *   can't perceive the brand-color contrast against body text).\n *\n * `asChild` (Radix Slot) exists specifically so this component can wrap a\n * framework router's own link and still carry Fluent's visual treatment:\n *\n *   <Link asChild>\n *     <NextLink href=\"/dashboard\">Dashboard</NextLink>\n *   </Link>\n *\n * Disabled: anchors have no native `disabled` attribute, so this component\n * does not invent one (that would break the plain DOM-attribute contract\n * `ComponentProps<\"a\">` gives consumers). Instead it styles `aria-disabled`.\n * Two things consumers must still do themselves, because neither can be\n * enforced from inside the component:\n * - Omit `href` on a disabled link where possible — an anchor without `href`\n *   is not in the tab order and is not exposed as a link by assistive tech,\n *   which is the most robust \"disabled\" for a link.\n * - If `href` must stay (e.g. to preserve layout/routing), pair\n *   `aria-disabled=\"true\"` with these classes: `pointer-events-none` blocks\n *   pointer activation and `no-underline`/`opacity-50` give a visible cue.\n *   This does **not** remove the link from the tab order or stop Enter-key\n *   activation on its own — add `tabIndex={-1}` too if full keyboard removal\n *   is required.\n *\n * Server-safe: no `\"use client\"`, no hooks/handlers — the React import is\n * type-only, so the file can be dropped straight into an RSC tree.\n */\nconst linkVariants = cva(\n  [\n    // shape + type — Fluent Link is Body 1 / Regular 400\n    \"rounded-xs font-normal text-brand-70 underline-offset-4 dark:text-brand-100\",\n    // motion — token duration + Fluent easyEase curve; honors prefers-reduced-motion\n    // automatically (the duration tokens collapse to 0.01ms in tokens.css).\n    \"outline-none transition-colors duration-fast ease-ease\",\n    // interactive state ramp — Fluent BrandForegroundLink, one brand step\n    // darker than the color set above, kept in sync with Button's `link`\n    // variant. rest brand-70 → hover brand-60 → pressed brand-50 (light);\n    // rest brand-100 → hover brand-110 → pressed brand-120 (dark). The brand\n    // ramp is global, so the dark steps are declared explicitly (conventions §4).\n    \"hover:text-brand-60 hover:underline active:text-brand-50 dark:hover:text-brand-110 dark:active:text-brand-120\",\n    // focus — Fluent double-stroke approximation: 2px brand ring + 2px surface-colored gap\n    \"focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background\",\n    // disabled — anchors have no native `disabled`; styled off `aria-disabled` instead.\n    // Opacity-based to match the rest of the kit's disabled treatment (see conventions\n    // doc §4); `no-underline` also cancels the `inline` variant's persistent underline.\n    \"aria-disabled:pointer-events-none aria-disabled:opacity-50 aria-disabled:no-underline\",\n  ],\n  {\n    variants: {\n      variant: {\n        // Standalone link — no underline at rest, only on hover.\n        default: \"\",\n        // Inline-in-prose link — Fluent requires an always-on underline so the\n        // link reads as a link independent of its brand-color contrast.\n        inline: \"underline\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n    },\n  }\n);\n\nfunction Link({\n  className,\n  variant = \"default\",\n  asChild = false,\n  ...props\n}: ComponentProps<\"a\"> &\n  VariantProps<typeof linkVariants> & {\n    asChild?: boolean;\n  }) {\n  const Comp = asChild ? Slot : \"a\";\n\n  return (\n    <Comp\n      data-slot=\"link\"\n      data-variant={variant}\n      className={cn(linkVariants({ variant, className }))}\n      {...props}\n    />\n  );\n}\n\nexport { Link, linkVariants };\n"],"mappings":"AAuGI;AAvGJ,SAAS,YAAY;AACrB,SAAS,WAA8B;AAGvC,SAAS,UAAU;AAmDnB,MAAM,eAAe;AAAA,EACnB;AAAA;AAAA,IAEE;AAAA;AAAA;AAAA,IAGA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA;AAAA;AAAA,IAEA;AAAA;AAAA;AAAA;AAAA,IAIA;AAAA,EACF;AAAA,EACA;AAAA,IACE,UAAU;AAAA,MACR,SAAS;AAAA;AAAA,QAEP,SAAS;AAAA;AAAA;AAAA,QAGT,QAAQ;AAAA,MACV;AAAA,IACF;AAAA,IACA,iBAAiB;AAAA,MACf,SAAS;AAAA,IACX;AAAA,EACF;AACF;AAEA,SAAS,KAAK;AAAA,EACZ;AAAA,EACA,UAAU;AAAA,EACV,UAAU;AAAA,EACV,GAAG;AACL,GAGK;AACH,QAAM,OAAO,UAAU,OAAO;AAE9B,SACE;AAAA,IAAC;AAAA;AAAA,MACC,aAAU;AAAA,MACV,gBAAc;AAAA,MACd,WAAW,GAAG,aAAa,EAAE,SAAS,UAAU,CAAC,CAAC;AAAA,MACjD,GAAG;AAAA;AAAA,EACN;AAEJ;","names":[]}

package/dist/components/ui/multi-select.d.ts

@@ -0,0 +1,115 @@
+import * as react from 'react';
+import { ComponentProps, ReactNode } from 'react';
+import { Combobox } from '@base-ui/react/combobox';
+import { ComboboxContent, ComboboxEmpty, ComboboxGroup, ComboboxItem, ComboboxLabel, ComboboxList, ComboboxSeparator } from './combobox.js';
+
+/**
+ * Multi Select — Fluent 2-styled multiple-selection combobox with a chips field.
+ *
+ * Built DIRECTLY on the kit's `Combobox` reference (`./combobox`). Base UI's
+ * `Combobox.Root` already carries the multiple-selection engine — passing
+ * `multiple` turns `value`/`onValueChange` into arrays and unlocks the chips
+ * parts (`Combobox.Chips`/`Chip`/`ChipRemove`). This file's only NEW surface is
+ * the **chips field** (`MultiSelectInput` + `MultiSelectChip`); everything on the
+ * popup side is re-exported from `combobox.tsx` unchanged.
+ *
+ * ## Reuse model — what is new vs a pass-through
+ * | Exported (kit name)   | Source                                              |
+ * | --------------------- | --------------------------------------------------- |
+ * | `MultiSelect`         | `Combobox.Root` with `multiple` defaulted to `true` |
+ * | `MultiSelectInput`    | **NEW** chips field: `Combobox.Chips` (field chrome) wrapping a `Combobox.Value` chip flow + `Combobox.Input` |
+ * | `MultiSelectChip`     | **NEW** one selected-value chip: `Combobox.Chip` + `Combobox.ChipRemove` |
+ * | `MultiSelectContent`  | pass-through re-export of `ComboboxContent`          |
+ * | `MultiSelectList`     | pass-through re-export of `ComboboxList`             |
+ * | `MultiSelectItem`     | pass-through re-export of `ComboboxItem`             |
+ * | `MultiSelectGroup`    | pass-through re-export of `ComboboxGroup`            |
+ * | `MultiSelectLabel`    | pass-through re-export of `ComboboxLabel`            |
+ * | `MultiSelectEmpty`    | pass-through re-export of `ComboboxEmpty`            |
+ * | `MultiSelectSeparator`| pass-through re-export of `ComboboxSeparator`        |
+ *
+ * ## Divergences (all deliberate)
+ * 1. **The popup parts are literal re-exports, so they keep their
+ *    `data-slot="combobox-…"` values** — they ARE the Combobox parts, aliased for
+ *    a coherent `MultiSelect*` call site. Only the two parts this file owns get
+ *    `data-slot="multi-select-…"` (`multi-select-input-wrapper`,
+ *    `multi-select-input`, `multi-select-chip`, `multi-select-chip-remove`). This
+ *    avoids forking identical popup markup and keeps the registry item lean
+ *    (`registryDependencies: ["utils", "combobox"]`, like `pagination` depends on
+ *    `button`). Selected items still render the right-side `CheckmarkRegular` from
+ *    `ComboboxItem` — in `multiple` mode Base UI mounts the indicator for every
+ *    selected option.
+ * 2. **`MultiSelectInput` is NOT `ComboboxInput`.** `ComboboxInput` is the
+ *    single-line surface (h-8, one `<input>` + Clear + chevron). The chips field
+ *    is a wrapping token field: `min-h-8` + `flex-wrap` + `gap-1` + `py-1` so
+ *    chips reflow to multiple rows, with the text `<input>` sitting inline at the
+ *    end. It reuses `combobox-input-wrapper`'s field-chrome recipe verbatim — the
+ *    `border-input`/`border-b-stroke-accessible` rest edge, the
+ *    `has-[input:focus-visible]` bottom brand accent, the
+ *    `has-[input[aria-invalid]]` destructive form, the `has-[input:disabled]`
+ *    opacity — because focus/invalid/disabled all still land on the inner input.
+ * 3. **No baked-in Clear or chevron `Trigger`.** The single-select field bakes a
+ *    `Combobox.Clear` + chevron in; a tags picker's affordances are the chips
+ *    themselves (each removable) and Backspace-clears-last, so the chips field
+ *    stays chrome-light. Open with focus + type or `ArrowDown`. Consumers who want
+ *    a clear-all/chevron can compose `@base-ui/react/combobox`'s `Clear`/`Trigger`
+ *    directly.
+ * 4. **Chip visuals are Fluent Tag (Small, Filled), Badge-adjacent.** A chip is
+ *    `bg-secondary` `text-foreground-2`, `rounded-md`, `h-6`, `px-1.5`, `text-xs` — the
+ *    neutral filled look of `Badge variant="secondary"` but sized for an inline
+ *    token (Badge is a static 20px caption chip; a removable token needs the extra
+ *    height + a trailing dismiss target). The remove button hover is
+ *    `text-destructive` to signal "this deletes", paired with the `DismissRegular`
+ *    glyph (not color alone — conventions §5).
+ *
+ * ## Chips wiring — what Base UI provides vs what is wired here
+ * The chip flow is rendered from `Combobox.Value`'s render-function child, which
+ * receives the live `selectedValue` array and re-renders on every selection — so
+ * an UNCONTROLLED `MultiSelect` (the preview / RSC case) shows chips without any
+ * consumer `useState`. Base UI owns the keyboard model for free:
+ * - **Backspace on an empty input removes the last chip** (Base UI `ComboboxInput`).
+ * - **ArrowLeft/Right move between chips; Backspace/Delete on a focused chip
+ *   removes it** (Base UI `ComboboxChip`).
+ * - **Clicking a `ChipRemove` deselects that value and refocuses the input**
+ *   (Base UI `ComboboxChipRemove`).
+ * - **The popup stays OPEN after selecting** in `multiple` mode (Base UI default),
+ *   so several tags can be picked in a row.
+ * This file only styles those parts and maps each value to a chip.
+ *
+ * ## `"use client"` — required
+ * `@fluentui/react-icons` forces it (the `DismissRegular` import): the package's
+ * shared icon-sizing module calls `@griffel/react`'s `__styles()` at module scope
+ * without its own directive, so importing an icon into a Server Component breaks
+ * `next build` (conventions §9; same fix as `select.tsx`/`combobox.tsx`).
+ */
+declare function MultiSelect<Value, Multiple extends boolean | undefined = true>({ multiple, ...props }: Combobox.Root.Props<Value, Multiple>): react.JSX.Element;
+/**
+ * Chip — one selected value, rendered from `MultiSelectInput`'s chip flow (or
+ * composed by a caller who passes their own render child). `Combobox.Chip` holds
+ * the label; the trailing `Combobox.ChipRemove` button deselects it. Base UI maps
+ * a chip to `selectedValue[index]` via its composite-list order, so chips must be
+ * rendered in selection order (which `Combobox.Value`'s array is).
+ */
+declare function MultiSelectChip({ className, children, ...props }: ComponentProps<typeof Combobox.Chip>): react.JSX.Element;
+/**
+ * Input — the Fluent chips field (divergence 2). `Combobox.Chips` is the
+ * field-chrome container (flex-wrap token row) holding the chip flow and the
+ * inline text `<input>`. `children`, when given, is a render function
+ * `(value) => ReactNode` that maps each selected value to its chip content —
+ * use it to look up a label for `{ value, label }` items or to style the chip.
+ * With no `children`, each value is rendered as a `MultiSelectChip` showing
+ * `String(value)` (the flat-string case). `className`/`ref`/`...props` forward to
+ * the inner `<input>`; style the field with `wrapperClassName`.
+ */
+declare function MultiSelectInput({ className, wrapperClassName, children, ...props }: Omit<ComponentProps<typeof Combobox.Input>, "children"> & {
+    wrapperClassName?: string;
+    children?: (value: unknown) => ReactNode;
+}): react.JSX.Element;
+declare const MultiSelectContent: typeof ComboboxContent;
+declare const MultiSelectList: typeof ComboboxList;
+declare const MultiSelectItem: typeof ComboboxItem;
+declare const MultiSelectGroup: typeof ComboboxGroup;
+declare const MultiSelectLabel: typeof ComboboxLabel;
+declare const MultiSelectEmpty: typeof ComboboxEmpty;
+declare const MultiSelectSeparator: typeof ComboboxSeparator;
+
+export { MultiSelect, MultiSelectChip, MultiSelectContent, MultiSelectEmpty, MultiSelectGroup, MultiSelectInput, MultiSelectItem, MultiSelectLabel, MultiSelectList, MultiSelectSeparator };

package/dist/components/ui/multi-select.js

@@ -0,0 +1,133 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Combobox as ComboboxPrimitive } from "@base-ui/react/combobox";
+import { DismissRegular } from "@fluentui/react-icons";
+import { cn } from "../../lib/utils.js";
+import {
+  ComboboxContent,
+  ComboboxEmpty,
+  ComboboxGroup,
+  ComboboxItem,
+  ComboboxLabel,
+  ComboboxList,
+  ComboboxSeparator
+} from "./combobox.js";
+function MultiSelect({
+  multiple,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    ComboboxPrimitive.Root,
+    {
+      multiple: multiple ?? true,
+      ...props
+    }
+  );
+}
+function MultiSelectChip({
+  className,
+  children,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxs(
+    ComboboxPrimitive.Chip,
+    {
+      "data-slot": "multi-select-chip",
+      className: cn(
+        // Fluent Tag (Small, Filled): 24px, #f5f5f5 fill, 4px radius
+        // (rounded-md), Caption-1 text in NeutralForeground2 (text-foreground-2)
+        // — exact token values from Figma validation pass 3, node 9112:10360.
+        "inline-flex h-6 items-center gap-1 rounded-md bg-secondary px-1.5 text-xs text-foreground-2 select-none",
+        // highlighted (chip keyboard focus) + disabled
+        "data-[highlighted]:bg-accent data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+        className
+      ),
+      ...props,
+      children: [
+        children,
+        /* @__PURE__ */ jsx(
+          ComboboxPrimitive.ChipRemove,
+          {
+            "data-slot": "multi-select-chip-remove",
+            "aria-label": "Remove",
+            className: cn(
+              "-mr-0.5 flex size-4 shrink-0 items-center justify-center rounded-sm text-muted-foreground outline-none",
+              // hover reads destructive — this action deletes (paired with the glyph, not color alone)
+              "transition-colors duration-fast ease-ease hover:text-destructive",
+              "focus-visible:ring-2 focus-visible:ring-ring",
+              "[&_svg]:pointer-events-none [&_svg]:size-3"
+            ),
+            children: /* @__PURE__ */ jsx(DismissRegular, {})
+          }
+        )
+      ]
+    }
+  );
+}
+function MultiSelectInput({
+  className,
+  wrapperClassName,
+  children,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxs(
+    ComboboxPrimitive.Chips,
+    {
+      "data-slot": "multi-select-input-wrapper",
+      className: cn(
+        // layout — wrapping token field. min-h-8 (chips reflow to rows), flex-wrap,
+        // gap-1, py-1. Resting bottom edge uses NeutralStrokeAccessible; the other
+        // sides stay border-input. Focus + aria-invalid override it (below).
+        "flex min-h-8 w-full flex-wrap items-center gap-1 rounded-md border border-input border-b-stroke-accessible bg-background px-1.5 py-1 text-sm",
+        // motion — color + box-shadow so the focus accent animates (§4)
+        "transition-[color,box-shadow] duration-fast ease-ease",
+        // focus — Fluent bottom brand accent via inset box-shadow, no reflow (§4).
+        // has-[input:focus-visible] because focus is on the inner input.
+        "has-[input:focus-visible]:border-primary has-[input:focus-visible]:shadow-[inset_0_-2px_0_0_var(--brand-80)] dark:has-[input:focus-visible]:shadow-[inset_0_-2px_0_0_var(--brand-100)]",
+        // invalid — shadcn aria-invalid treatment; after focus so it wins the border
+        "has-[input[aria-invalid='true']]:border-destructive has-[input[aria-invalid='true']]:ring-destructive/20 dark:has-[input[aria-invalid='true']]:ring-destructive/40",
+        "has-[input[aria-invalid='true']:focus-visible]:shadow-[inset_0_-2px_0_0_var(--destructive)]",
+        // disabled — opacity read when the whole control is disabled
+        "has-[input:disabled]:pointer-events-none has-[input:disabled]:opacity-50",
+        wrapperClassName
+      ),
+      children: [
+        /* @__PURE__ */ jsx(ComboboxPrimitive.Value, { children: (selected) => (Array.isArray(selected) ? selected : []).map(
+          (value, index) => children ? children(value) : /* @__PURE__ */ jsx(MultiSelectChip, { children: String(value) }, index)
+        ) }),
+        /* @__PURE__ */ jsx(
+          ComboboxPrimitive.Input,
+          {
+            "data-slot": "multi-select-input",
+            className: cn(
+              "h-6 min-w-16 flex-1 bg-transparent px-1 outline-none",
+              "placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground",
+              className
+            ),
+            ...props
+          }
+        )
+      ]
+    }
+  );
+}
+const MultiSelectContent = ComboboxContent;
+const MultiSelectList = ComboboxList;
+const MultiSelectItem = ComboboxItem;
+const MultiSelectGroup = ComboboxGroup;
+const MultiSelectLabel = ComboboxLabel;
+const MultiSelectEmpty = ComboboxEmpty;
+const MultiSelectSeparator = ComboboxSeparator;
+export {
+  MultiSelect,
+  MultiSelectChip,
+  MultiSelectContent,
+  MultiSelectEmpty,
+  MultiSelectGroup,
+  MultiSelectInput,
+  MultiSelectItem,
+  MultiSelectLabel,
+  MultiSelectList,
+  MultiSelectSeparator
+};
+//# sourceMappingURL=multi-select.js.map