@graundtech/fluent2-react-kit 0.5.1

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/ui/card.tsx"],"sourcesContent":["import type { ComponentProps } from \"react\";\n\nimport { cn } from \"../../lib/utils\";\n\n/**\n * Card — Fluent 2-styled, shadcn-API card family.\n *\n * Structure matches shadcn/ui's current Card exactly: seven composable parts\n * (`Card`, `CardHeader`, `CardTitle`, `CardDescription`, `CardAction`,\n * `CardContent`, `CardFooter`), each a plain `<div>` carrying its own\n * `data-slot`. `CardHeader` is a grid so an optional `CardAction` can sit in\n * its own column/row-span without extra markup (shadcn's `has-data-[slot=...]`\n * trick) — see https://ui.shadcn.com/docs/components/card.\n *\n * Fluent 2 aesthetics layered on top of that skeleton:\n * - `rounded-lg` + `border` + `shadow-4` (Fluent's resting elevation for a\n *   filled card — https://storybooks.fluentui.dev/react/?path=/docs/components-card--docs)\n *   instead of shadcn's default `rounded-xl` + `shadow-sm`.\n * - `bg-card text-card-foreground` (shadcn semantic tokens, re-pointed for\n *   dark mode by tokens.css).\n * - `CardTitle` is `font-semibold` (Fluent card titles are weight 600).\n * - Spacing: Fluent's own medium card padding is 12px (`p-3`), noticeably\n *   tighter than shadcn's 24px (`p-6`) default. We split the difference and\n *   land on 16px (`gap-4` / `p-4` / `px-4`) — visibly tighter than shadcn so\n *   the Fluent influence reads, while keeping enough breathing room that the\n *   header/content/footer rhythm still feels like the familiar shadcn\n *   composition (a straight 12px port felt cramped next to Button's 32px\n *   controls). Document this if you change it.\n *\n * No `variant`/`size` props: shadcn's Card ships none, so there is no `cva`\n * table here (unlike Button) — every part is a plain function component.\n *\n * `interactive` (kit extension): Fluent cards have hover/pressed states when\n * clickable; passing `interactive` raises the resting `shadow-4` to `shadow-8`\n * on hover (Fluent's interactive-card elevation step) with a pointer cursor\n * and `data-interactive` hook. Visual-only — semantics/focus come from what\n * you compose it with (wrap in an `<a>`/`<button>` or add role/tabIndex).\n *\n * Server-safe: no `\"use client\"`, no hooks — the React import is type-only.\n */\n\nfunction Card({\n  className,\n  interactive = false,\n  ...props\n}: ComponentProps<\"div\"> & {\n  /** Fluent interactive-card elevation states (hover raises to shadow-8). */\n  interactive?: boolean;\n}) {\n  return (\n    <div\n      data-slot=\"card\"\n      data-interactive={interactive || undefined}\n      className={cn(\n        \"flex flex-col gap-4 rounded-lg border bg-card py-4 text-card-foreground shadow-4\",\n        interactive &&\n          \"cursor-pointer transition-shadow duration-fast ease-ease hover:shadow-8 active:shadow-4\",\n        className\n      )}\n      {...props}\n    />\n  );\n}\n\nfunction CardHeader({ className, ...props }: ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"card-header\"\n      className={cn(\n        \"@container/card-header grid auto-rows-min grid-rows-[auto_auto] items-start gap-1.5 px-4 has-data-[slot=card-action]:grid-cols-[1fr_auto] [.border-b]:pb-4\",\n        className\n      )}\n      {...props}\n    />\n  );\n}\n\nfunction CardTitle({ className, ...props }: ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"card-title\"\n      className={cn(\"font-semibold leading-none\", className)}\n      {...props}\n    />\n  );\n}\n\nfunction CardDescription({ className, ...props }: ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"card-description\"\n      className={cn(\"text-sm text-muted-foreground\", className)}\n      {...props}\n    />\n  );\n}\n\nfunction CardAction({ className, ...props }: ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"card-action\"\n      className={cn(\n        \"col-start-2 row-span-2 row-start-1 self-start justify-self-end\",\n        className\n      )}\n      {...props}\n    />\n  );\n}\n\nfunction CardContent({ className, ...props }: ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"card-content\"\n      className={cn(\"px-4\", className)}\n      {...props}\n    />\n  );\n}\n\nfunction CardFooter({ className, ...props }: ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"card-footer\"\n      className={cn(\"flex items-center px-4 [.border-t]:pt-4\", className)}\n      {...props}\n    />\n  );\n}\n\nexport {\n  Card,\n  CardHeader,\n  CardFooter,\n  CardTitle,\n  CardAction,\n  CardDescription,\n  CardContent,\n};\n"],"mappings":"AAkDI;AAhDJ,SAAS,UAAU;AAuCnB,SAAS,KAAK;AAAA,EACZ;AAAA,EACA,cAAc;AAAA,EACd,GAAG;AACL,GAGG;AACD,SACE;AAAA,IAAC;AAAA;AAAA,MACC,aAAU;AAAA,MACV,oBAAkB,eAAe;AAAA,MACjC,WAAW;AAAA,QACT;AAAA,QACA,eACE;AAAA,QACF;AAAA,MACF;AAAA,MACC,GAAG;AAAA;AAAA,EACN;AAEJ;AAEA,SAAS,WAAW,EAAE,WAAW,GAAG,MAAM,GAA0B;AAClE,SACE;AAAA,IAAC;AAAA;AAAA,MACC,aAAU;AAAA,MACV,WAAW;AAAA,QACT;AAAA,QACA;AAAA,MACF;AAAA,MACC,GAAG;AAAA;AAAA,EACN;AAEJ;AAEA,SAAS,UAAU,EAAE,WAAW,GAAG,MAAM,GAA0B;AACjE,SACE;AAAA,IAAC;AAAA;AAAA,MACC,aAAU;AAAA,MACV,WAAW,GAAG,8BAA8B,SAAS;AAAA,MACpD,GAAG;AAAA;AAAA,EACN;AAEJ;AAEA,SAAS,gBAAgB,EAAE,WAAW,GAAG,MAAM,GAA0B;AACvE,SACE;AAAA,IAAC;AAAA;AAAA,MACC,aAAU;AAAA,MACV,WAAW,GAAG,iCAAiC,SAAS;AAAA,MACvD,GAAG;AAAA;AAAA,EACN;AAEJ;AAEA,SAAS,WAAW,EAAE,WAAW,GAAG,MAAM,GAA0B;AAClE,SACE;AAAA,IAAC;AAAA;AAAA,MACC,aAAU;AAAA,MACV,WAAW;AAAA,QACT;AAAA,QACA;AAAA,MACF;AAAA,MACC,GAAG;AAAA;AAAA,EACN;AAEJ;AAEA,SAAS,YAAY,EAAE,WAAW,GAAG,MAAM,GAA0B;AACnE,SACE;AAAA,IAAC;AAAA;AAAA,MACC,aAAU;AAAA,MACV,WAAW,GAAG,QAAQ,SAAS;AAAA,MAC9B,GAAG;AAAA;AAAA,EACN;AAEJ;AAEA,SAAS,WAAW,EAAE,WAAW,GAAG,MAAM,GAA0B;AAClE,SACE;AAAA,IAAC;AAAA;AAAA,MACC,aAAU;AAAA,MACV,WAAW,GAAG,2CAA2C,SAAS;AAAA,MACjE,GAAG;AAAA;AAAA,EACN;AAEJ;","names":[]}

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

@@ -0,0 +1,101 @@
+import * as react from 'react';
+import { ComponentProps } from 'react';
+import { Checkbox as Checkbox$1 } from '@base-ui/react/checkbox';
+
+/**
+ * Checkbox — Fluent 2-styled, shadcn-API checkbox.
+ *
+ * This is a Base UI case (conventions §9): the checked/unchecked/indeterminate
+ * state machine, the hidden native `<input type="checkbox">` for real form
+ * participation, and keyboard activation (Space/Enter) are genuine behavior a
+ * styled `<span>` can't express on its own, so this wraps
+ * `@base-ui/react/checkbox` (`Checkbox`, imported as a namespace exposing
+ * `Checkbox.Root` / `Checkbox.Indicator` — matches the actual
+ * `export * as Checkbox from "./index.parts.js"` shape in node_modules, the
+ * same pattern `avatar.tsx` and `radio-group.tsx` use for their own Base UI
+ * subpaths). `Checkbox.Root` renders a `<span role="checkbox">` plus a
+ * visually-hidden native `<input type="checkbox">` sibling for form
+ * submission; none of that is reimplemented here.
+ *
+ * `"use client"` is required here — integration-pass correction of the
+ * original reasoning below. `@base-ui/react/checkbox`'s `CheckboxRoot` and
+ * `CheckboxIndicator` do each carry their own `'use client'` directive, so
+ * *those* parts alone wouldn't force this file to be a client boundary
+ * (same reasoning as `avatar.tsx` / `radio-group.tsx`). But
+ * `CheckmarkFilled`/`SubtractRegular` from `@fluentui/react-icons` don't hold
+ * to that pattern: the package's shared icon-sizing module
+ * (`createFluentIcon.styles.js`) calls `@griffel/react`'s `__styles()` at
+ * module scope *without* its own `'use client'` directive, even though
+ * `__styles` itself is client-only. Rendering either icon 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 confirmed to
+ * affect every route that shares Turbopack's chunk for these icons, not just
+ * this one. `"use client"` here keeps the icon imports inside a client
+ * boundary so they're never evaluated on the server. `select.tsx` carries the
+ * same fix for the same reason.
+ *
+ * Box: Fluent 2's checkbox indicator is 16px square (`size-4`) with
+ * `borderRadius: tokens.borderRadiusSmall` (confirmed against Fluent UI v9's
+ * `useCheckboxStyles.styles.ts` — `indicatorSizeMedium = '16px'`,
+ * `borderRadius: tokens.borderRadiusSmall`, checkmark `fontSize: '12px'`).
+ * `borderRadiusSmall` is Fluent's 2px step, which is exactly this kit's
+ * `rounded-sm` (`--radius-sm: calc(var(--radius) - 4px)` = 6px − 4px = 2px in
+ * `tokens.css`) — no new radius token needed. `aspect-square` guards the box
+ * against flex-row squish when paired with a `Label` (mirrors
+ * `radio-group.tsx`'s `RadioGroupItem`).
+ *
+ * Borders + interaction ramp: the unchecked box outlines with Fluent's
+ * `NeutralStrokeAccessible` ramp — rest `#616161` (`border-stroke-accessible`),
+ * hover `#575757` (`border-stroke-accessible-hover`), pressed `#4d4d4d`
+ * (`border-stroke-accessible-pressed`) — the higher-contrast neutral Fluent
+ * specs for interactive control outlines (extracted from the Figma checkbox),
+ * NOT the lighter `--border`/`border-input` grey the box previously used. When
+ * checked/indeterminate the box fills brand, and its border + fill step
+ * through Fluent's `CompoundBrandBackground` on hover/press (`brand-70` /
+ * `brand-60`; dark hover `brand-80`), mirroring Button's documented per-theme
+ * brand ramp (conventions §4). The `data-[checked]:hover:`/`:active:`
+ * selectors outrank the neutral hover/active border by specificity, so a
+ * checked box stays brand (never the neutral grey) while hovered.
+ *
+ * Checked glyph: `CheckmarkFilled` from `@fluentui/react-icons` at `size-3`
+ * (12px, matching Fluent's checkmark `fontSize`) — a real glyph is
+ * appropriate here (unlike Radio's plain dot) because Fluent's checkbox
+ * indicator specifically shows a checkmark, not just a filled shape.
+ *
+ * Indeterminate: Base UI's `indeterminate` prop (forwarded to `Checkbox.Root`
+ * so it drives `aria-checked="mixed"` and the `data-indeterminate` attribute
+ * Base UI uses for its own state) renders a dash instead of a checkmark. The
+ * spec offered a choice between `SubtractRegular` and a hand-drawn 8×2 bar;
+ * `SubtractRegular` is used since `@fluentui/react-icons` ships that exact
+ * glyph and pulling in an icon dependency is already paid for by the checked
+ * state. Which icon to render is decided from this component's own
+ * `indeterminate` prop (a plain ternary), not a CSS toggle keyed off Base
+ * UI's data attributes — simpler and directly assertable in tests, and
+ * `Checkbox.Indicator` already only mounts while `checked || indeterminate`
+ * (see `CheckboxIndicator.mjs`'s `rendered` check), so no extra
+ * checked-conditional is needed beyond that ternary.
+ *
+ * States: `data-checked`/`data-unchecked`/`data-indeterminate` and
+ * `data-disabled` are Base UI's own presence attributes on `Checkbox.Root`'s
+ * rendered `<span>` (see `CheckboxRootDataAttributes` in node_modules —
+ * boolean presence, not a `data-state="checked"` value pair like Radix),
+ * matched here via Tailwind's `data-[checked]:` / `data-[indeterminate]:` /
+ * `data-[disabled]:` arbitrary-attribute variants — the same convention
+ * `radio-group.tsx` established. There is no native `:disabled` pseudo-class
+ * to reach for (confirmed against `useFocusableWhenDisabled.mjs`: a
+ * non-native-button Base UI root gets `aria-disabled`, not a real `disabled`
+ * DOM attribute, when disabled — and `:disabled` only ever matches elements
+ * that support the HTML `disabled` attribute natively), so the
+ * opacity/pointer-events disabled recipe from conventions §4 is re-expressed
+ * against `data-[disabled]:` instead of `disabled:`. Focus, per conventions
+ * §4, stays the generic offset-ring recipe (not the field bottom-accent
+ * variant — a checkbox is a selectable control, not a typed-into field).
+ * `aria-invalid` is a bare ARIA attribute Base UI passes through untouched
+ * (not in `CheckboxRoot`'s destructured prop list), so the standard
+ * `aria-invalid:` recipe applies as-is.
+ */
+declare function Checkbox({ className, indeterminate, ...props }: ComponentProps<typeof Checkbox$1.Root>): react.JSX.Element;
+
+export { Checkbox };

package/dist/components/ui/checkbox.js

@@ -0,0 +1,57 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import { Checkbox as CheckboxPrimitive } from "@base-ui/react/checkbox";
+import { CheckmarkFilled, SubtractRegular } from "@fluentui/react-icons";
+import { cn } from "../../lib/utils.js";
+function Checkbox({
+  className,
+  indeterminate = false,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    CheckboxPrimitive.Root,
+    {
+      "data-slot": "checkbox",
+      indeterminate,
+      className: cn(
+        // layout — Fluent 16px box, small radius (Fluent borderRadiusSmall)
+        "aspect-square size-4 shrink-0 cursor-pointer rounded-sm border bg-background",
+        "inline-flex items-center justify-center",
+        // motion
+        "outline-none transition-colors duration-fast ease-ease",
+        // unchecked — Fluent NeutralStrokeAccessible rest/hover/pressed ramp
+        "border-stroke-accessible hover:border-stroke-accessible-hover active:border-stroke-accessible-pressed",
+        // checked / indeterminate — brand fill (Base UI presence attributes)
+        "data-[checked]:border-primary data-[checked]:bg-primary data-[checked]:text-primary-foreground",
+        "data-[indeterminate]:border-primary data-[indeterminate]:bg-primary data-[indeterminate]:text-primary-foreground",
+        // checked interaction ramp — Fluent CompoundBrandBackground Hover/
+        // Pressed (border + fill together); dark hover brightens to brand-80
+        // per Button's per-theme ramp. Outranks the neutral hover/active
+        // border above by specificity so the checked box stays brand.
+        "data-[checked]:hover:border-brand-70 data-[checked]:hover:bg-brand-70 data-[checked]:active:border-brand-60 data-[checked]:active:bg-brand-60 dark:data-[checked]:hover:border-brand-80 dark:data-[checked]:hover:bg-brand-80",
+        // disabled — opacity-based (conventions §4), re-expressed against
+        // Base UI's data-disabled presence attribute (this renders a
+        // <span>, not a native disableable element — see doc comment)
+        "data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+        // focus — generic offset-ring recipe (conventions §4)
+        "focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background",
+        // invalid — shadcn aria-invalid treatment (conventions §4)
+        "aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40",
+        className
+      ),
+      ...props,
+      children: /* @__PURE__ */ jsx(
+        CheckboxPrimitive.Indicator,
+        {
+          "data-slot": "checkbox-indicator",
+          className: "flex items-center justify-center",
+          children: indeterminate ? /* @__PURE__ */ jsx(SubtractRegular, { "aria-hidden": "true", className: "size-3" }) : /* @__PURE__ */ jsx(CheckmarkFilled, { "aria-hidden": "true", className: "size-3" })
+        }
+      )
+    }
+  );
+}
+export {
+  Checkbox
+};
+//# sourceMappingURL=checkbox.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/ui/checkbox.tsx"],"sourcesContent":["\"use client\";\n\nimport { Checkbox as CheckboxPrimitive } from \"@base-ui/react/checkbox\";\nimport { CheckmarkFilled, SubtractRegular } from \"@fluentui/react-icons\";\nimport type { ComponentProps } from \"react\";\n\nimport { cn } from \"../../lib/utils\";\n\n/**\n * Checkbox — Fluent 2-styled, shadcn-API checkbox.\n *\n * This is a Base UI case (conventions §9): the checked/unchecked/indeterminate\n * state machine, the hidden native `<input type=\"checkbox\">` for real form\n * participation, and keyboard activation (Space/Enter) are genuine behavior a\n * styled `<span>` can't express on its own, so this wraps\n * `@base-ui/react/checkbox` (`Checkbox`, imported as a namespace exposing\n * `Checkbox.Root` / `Checkbox.Indicator` — matches the actual\n * `export * as Checkbox from \"./index.parts.js\"` shape in node_modules, the\n * same pattern `avatar.tsx` and `radio-group.tsx` use for their own Base UI\n * subpaths). `Checkbox.Root` renders a `<span role=\"checkbox\">` plus a\n * visually-hidden native `<input type=\"checkbox\">` sibling for form\n * submission; none of that is reimplemented here.\n *\n * `\"use client\"` is required here — integration-pass correction of the\n * original reasoning below. `@base-ui/react/checkbox`'s `CheckboxRoot` and\n * `CheckboxIndicator` do each carry their own `'use client'` directive, so\n * *those* parts alone wouldn't force this file to be a client boundary\n * (same reasoning as `avatar.tsx` / `radio-group.tsx`). But\n * `CheckmarkFilled`/`SubtractRegular` from `@fluentui/react-icons` don't hold\n * to that pattern: the package's shared icon-sizing module\n * (`createFluentIcon.styles.js`) calls `@griffel/react`'s `__styles()` at\n * module scope *without* its own `'use client'` directive, even though\n * `__styles` itself is client-only. Rendering either icon from a Server\n * Component pulls that module into the server's RSC graph, and `next build`\n * (Turbopack) fails collecting page data with \"Attempted to call __styles()\n * from the server but __styles is on the client\" — reproduced against\n * `@fluentui/react-icons@2.0.333` / `@griffel/react@1.7.5`, and confirmed to\n * affect every route that shares Turbopack's chunk for these icons, not just\n * this one. `\"use client\"` here keeps the icon imports inside a client\n * boundary so they're never evaluated on the server. `select.tsx` carries the\n * same fix for the same reason.\n *\n * Box: Fluent 2's checkbox indicator is 16px square (`size-4`) with\n * `borderRadius: tokens.borderRadiusSmall` (confirmed against Fluent UI v9's\n * `useCheckboxStyles.styles.ts` — `indicatorSizeMedium = '16px'`,\n * `borderRadius: tokens.borderRadiusSmall`, checkmark `fontSize: '12px'`).\n * `borderRadiusSmall` is Fluent's 2px step, which is exactly this kit's\n * `rounded-sm` (`--radius-sm: calc(var(--radius) - 4px)` = 6px − 4px = 2px in\n * `tokens.css`) — no new radius token needed. `aspect-square` guards the box\n * against flex-row squish when paired with a `Label` (mirrors\n * `radio-group.tsx`'s `RadioGroupItem`).\n *\n * Borders + interaction ramp: the unchecked box outlines with Fluent's\n * `NeutralStrokeAccessible` ramp — rest `#616161` (`border-stroke-accessible`),\n * hover `#575757` (`border-stroke-accessible-hover`), pressed `#4d4d4d`\n * (`border-stroke-accessible-pressed`) — the higher-contrast neutral Fluent\n * specs for interactive control outlines (extracted from the Figma checkbox),\n * NOT the lighter `--border`/`border-input` grey the box previously used. When\n * checked/indeterminate the box fills brand, and its border + fill step\n * through Fluent's `CompoundBrandBackground` on hover/press (`brand-70` /\n * `brand-60`; dark hover `brand-80`), mirroring Button's documented per-theme\n * brand ramp (conventions §4). The `data-[checked]:hover:`/`:active:`\n * selectors outrank the neutral hover/active border by specificity, so a\n * checked box stays brand (never the neutral grey) while hovered.\n *\n * Checked glyph: `CheckmarkFilled` from `@fluentui/react-icons` at `size-3`\n * (12px, matching Fluent's checkmark `fontSize`) — a real glyph is\n * appropriate here (unlike Radio's plain dot) because Fluent's checkbox\n * indicator specifically shows a checkmark, not just a filled shape.\n *\n * Indeterminate: Base UI's `indeterminate` prop (forwarded to `Checkbox.Root`\n * so it drives `aria-checked=\"mixed\"` and the `data-indeterminate` attribute\n * Base UI uses for its own state) renders a dash instead of a checkmark. The\n * spec offered a choice between `SubtractRegular` and a hand-drawn 8×2 bar;\n * `SubtractRegular` is used since `@fluentui/react-icons` ships that exact\n * glyph and pulling in an icon dependency is already paid for by the checked\n * state. Which icon to render is decided from this component's own\n * `indeterminate` prop (a plain ternary), not a CSS toggle keyed off Base\n * UI's data attributes — simpler and directly assertable in tests, and\n * `Checkbox.Indicator` already only mounts while `checked || indeterminate`\n * (see `CheckboxIndicator.mjs`'s `rendered` check), so no extra\n * checked-conditional is needed beyond that ternary.\n *\n * States: `data-checked`/`data-unchecked`/`data-indeterminate` and\n * `data-disabled` are Base UI's own presence attributes on `Checkbox.Root`'s\n * rendered `<span>` (see `CheckboxRootDataAttributes` in node_modules —\n * boolean presence, not a `data-state=\"checked\"` value pair like Radix),\n * matched here via Tailwind's `data-[checked]:` / `data-[indeterminate]:` /\n * `data-[disabled]:` arbitrary-attribute variants — the same convention\n * `radio-group.tsx` established. There is no native `:disabled` pseudo-class\n * to reach for (confirmed against `useFocusableWhenDisabled.mjs`: a\n * non-native-button Base UI root gets `aria-disabled`, not a real `disabled`\n * DOM attribute, when disabled — and `:disabled` only ever matches elements\n * that support the HTML `disabled` attribute natively), so the\n * opacity/pointer-events disabled recipe from conventions §4 is re-expressed\n * against `data-[disabled]:` instead of `disabled:`. Focus, per conventions\n * §4, stays the generic offset-ring recipe (not the field bottom-accent\n * variant — a checkbox is a selectable control, not a typed-into field).\n * `aria-invalid` is a bare ARIA attribute Base UI passes through untouched\n * (not in `CheckboxRoot`'s destructured prop list), so the standard\n * `aria-invalid:` recipe applies as-is.\n */\nfunction Checkbox({\n  className,\n  indeterminate = false,\n  ...props\n}: ComponentProps<typeof CheckboxPrimitive.Root>) {\n  return (\n    <CheckboxPrimitive.Root\n      data-slot=\"checkbox\"\n      indeterminate={indeterminate}\n      className={cn(\n        // layout — Fluent 16px box, small radius (Fluent borderRadiusSmall)\n        \"aspect-square size-4 shrink-0 cursor-pointer rounded-sm border bg-background\",\n        \"inline-flex items-center justify-center\",\n        // motion\n        \"outline-none transition-colors duration-fast ease-ease\",\n        // unchecked — Fluent NeutralStrokeAccessible rest/hover/pressed ramp\n        \"border-stroke-accessible hover:border-stroke-accessible-hover active:border-stroke-accessible-pressed\",\n        // checked / indeterminate — brand fill (Base UI presence attributes)\n        \"data-[checked]:border-primary data-[checked]:bg-primary data-[checked]:text-primary-foreground\",\n        \"data-[indeterminate]:border-primary data-[indeterminate]:bg-primary data-[indeterminate]:text-primary-foreground\",\n        // checked interaction ramp — Fluent CompoundBrandBackground Hover/\n        // Pressed (border + fill together); dark hover brightens to brand-80\n        // per Button's per-theme ramp. Outranks the neutral hover/active\n        // border above by specificity so the checked box stays brand.\n        \"data-[checked]:hover:border-brand-70 data-[checked]:hover:bg-brand-70 data-[checked]:active:border-brand-60 data-[checked]:active:bg-brand-60 dark:data-[checked]:hover:border-brand-80 dark:data-[checked]:hover:bg-brand-80\",\n        // disabled — opacity-based (conventions §4), re-expressed against\n        // Base UI's data-disabled presence attribute (this renders a\n        // <span>, not a native disableable element — see doc comment)\n        \"data-[disabled]:pointer-events-none data-[disabled]:opacity-50\",\n        // focus — generic offset-ring recipe (conventions §4)\n        \"focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background\",\n        // invalid — shadcn aria-invalid treatment (conventions §4)\n        \"aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40\",\n        className\n      )}\n      {...props}\n    >\n      <CheckboxPrimitive.Indicator\n        data-slot=\"checkbox-indicator\"\n        className=\"flex items-center justify-center\"\n      >\n        {indeterminate ? (\n          <SubtractRegular aria-hidden=\"true\" className=\"size-3\" />\n        ) : (\n          <CheckmarkFilled aria-hidden=\"true\" className=\"size-3\" />\n        )}\n      </CheckboxPrimitive.Indicator>\n    </CheckboxPrimitive.Root>\n  );\n}\n\nexport { Checkbox };\n"],"mappings":";AAgJU;AA9IV,SAAS,YAAY,yBAAyB;AAC9C,SAAS,iBAAiB,uBAAuB;AAGjD,SAAS,UAAU;AAgGnB,SAAS,SAAS;AAAA,EAChB;AAAA,EACA,gBAAgB;AAAA,EAChB,GAAG;AACL,GAAkD;AAChD,SACE;AAAA,IAAC,kBAAkB;AAAA,IAAlB;AAAA,MACC,aAAU;AAAA,MACV;AAAA,MACA,WAAW;AAAA;AAAA,QAET;AAAA,QACA;AAAA;AAAA,QAEA;AAAA;AAAA,QAEA;AAAA;AAAA,QAEA;AAAA,QACA;AAAA;AAAA;AAAA;AAAA;AAAA,QAKA;AAAA;AAAA;AAAA;AAAA,QAIA;AAAA;AAAA,QAEA;AAAA;AAAA,QAEA;AAAA,QACA;AAAA,MACF;AAAA,MACC,GAAG;AAAA,MAEJ;AAAA,QAAC,kBAAkB;AAAA,QAAlB;AAAA,UACC,aAAU;AAAA,UACV,WAAU;AAAA,UAET,0BACC,oBAAC,mBAAgB,eAAY,QAAO,WAAU,UAAS,IAEvD,oBAAC,mBAAgB,eAAY,QAAO,WAAU,UAAS;AAAA;AAAA,MAE3D;AAAA;AAAA,EACF;AAEJ;","names":[]}

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

@@ -0,0 +1,212 @@
+import * as react from 'react';
+import { ComponentProps } from 'react';
+import { Combobox as Combobox$1 } from '@base-ui/react/combobox';
+
+/**
+ * Combobox — Fluent 2-styled, composable filterable select built on Base UI.
+ *
+ * This is the REFERENCE for the kit's filter-list family: Multi Select and
+ * Command Menu are built by later agents reading THIS file the way the overlay
+ * batch read `select.tsx`. Read the divergence notes and extension-point notes
+ * below before extending it.
+ *
+ * It is the typed-into sibling of `Select`: the field is the kit's Input recipe
+ * (h-8, `border-input` + `border-b-stroke-accessible`, bottom brand-accent
+ * focus) instead of a button trigger, and the flyout is `SelectContent`'s
+ * validated popup recipe verbatim (`bg-popover`, `border`, `shadow-16`,
+ * `rounded-md`, `min-w-[var(--anchor-width)]`, scale+fade motion on Base UI's
+ * `data-starting-style`/`data-ending-style` hooks). Item rows are `SelectItem`'s
+ * 32px `data-[highlighted]` rows with the right-side check.
+ *
+ * ## Why `@base-ui/react/combobox` and NOT `@base-ui/react/autocomplete`
+ * Base UI ships BOTH. They share the same AriaCombobox engine but draw the line
+ * at *selection*:
+ * - **Combobox** has a selection model — `value`/`onValueChange` (the committed
+ *   selected value, single or `multiple`) that is SEPARATE from
+ *   `inputValue`/`onInputValueChange` (the transient filter text). Picking an
+ *   item commits a discrete value; the input filters the list. This is exactly a
+ *   "filterable select".
+ * - **Autocomplete** is `selectionMode: 'none'` — it deliberately omits
+ *   `selectedValue`/`onValueChange`; the input value IS the only state. It's for
+ *   free-text-with-suggestions (search boxes), where there is no discrete
+ *   committed choice.
+ * The whole filter-list family (this, Multi Select, Command Menu) selects
+ * discrete items, so it wraps **combobox**. A future free-text search field is
+ * the one case that would wrap autocomplete instead.
+ *
+ * ## Base UI mapping (conventions §9)
+ * Namespace import of `@base-ui/react/combobox`, matching the export shape in
+ * node_modules (like `select.tsx`/`avatar.tsx`). shadcn-style part names mapped
+ * onto Base UI's model:
+ *
+ * | Exported (kit name) | Base UI primitive                                          |
+ * | ------------------- | ---------------------------------------------------------- |
+ * | `Combobox`          | `Combobox.Root`                                            |
+ * | `ComboboxInput`     | field wrapper + `Combobox.Input` + `Combobox.Clear` + `Combobox.Trigger` (+ `Combobox.Icon`) |
+ * | `ComboboxContent`   | `Combobox.Portal` + `Combobox.Positioner` + `Combobox.Popup` |
+ * | `ComboboxList`      | `Combobox.List`  ← see divergence 5                        |
+ * | `ComboboxEmpty`     | `Combobox.Empty`                                           |
+ * | `ComboboxItem`      | `Combobox.Item` (+ `Combobox.ItemIndicator`)              |
+ * | `ComboboxGroup`     | `Combobox.Group`                                          |
+ * | `ComboboxLabel`     | `Combobox.GroupLabel`  ← see divergence 1                 |
+ * | `ComboboxSeparator` | `Combobox.Separator`                                      |
+ * | `ComboboxValue`     | `Combobox.Value`  ← see divergence 4                      |
+ *
+ * ## Divergences vs Base UI naming (all deliberate)
+ * 1. **`ComboboxLabel` maps to `Combobox.GroupLabel`, not `Combobox.Label`.**
+ *    Base UI has two label parts: `Combobox.Label` labels the whole control (a
+ *    field `<label>`), `Combobox.GroupLabel` is the heading inside a
+ *    `Combobox.Group`. Like Select, the kit exposes the *group* heading as
+ *    `ComboboxLabel` and does NOT re-export the control-level label — pair
+ *    `ComboboxInput` with the kit's own `Label` component (a separate registry
+ *    item; install it explicitly). Labeling recipe: give `Label` an `id` and set
+ *    `aria-labelledby` on the `ComboboxInput` — but unlike Select's button
+ *    trigger, the input IS a labelable form field, so a plain `htmlFor`/`id`
+ *    pairing works too (the preview uses `htmlFor` + `id`).
+ * 2. **`ComboboxInput` is a composed field, not a bare `<input>`.** It renders a
+ *    field-chrome wrapper (`data-slot="combobox-input-wrapper"`) around the real
+ *    `Combobox.Input` (`data-slot="combobox-input"`), plus a `Combobox.Clear`
+ *    reset button (Base UI auto-unmounts it when the field is empty) and a
+ *    `Combobox.Trigger` chevron that toggles the popup. This is the sibling of
+ *    `SelectTrigger`, which likewise bakes its chevron in. `className`, `ref` and
+ *    all other props forward to the inner `<input>`; the wrapper is styled via
+ *    `wrapperClassName`. The chevron/clear are `tabIndex={-1}` (not extra tab
+ *    stops — the input already owns `role="combobox"` + keyboard control).
+ * 3. **No `Combobox.Arrow`, no scroll buttons.** The popup is a flyout beneath
+ *    the field (not an anchored caret-overlap like a native `<select>`), so the
+ *    positioner arrow and Select's ScrollUp/DownArrow parts are omitted; the
+ *    `List` scrolls with `overflow-y-auto`.
+ * 4. **`ComboboxValue` renders the raw selected value unless `items` is given.**
+ *    Same model as Select's `SelectValue`: `Combobox.Value` shows the raw
+ *    `value` unless `<Combobox items={[{ value, label }]}>` is supplied or a
+ *    render child is used. It is exported for callers who display the selection
+ *    outside the input; the field itself shows the selection as input text (Base
+ *    UI fills the input on select), so most single-select UIs never need it.
+ * 5. **`ComboboxList` is a separate part (Select auto-wraps its `List`).** Base
+ *    UI does the filtering, so the natural API passes `items` to `<Combobox>` and
+ *    renders the list with a render-function child:
+ *    `<ComboboxList>{(item) => <ComboboxItem value={item}>{item.label}</ComboboxItem>}</ComboboxList>`.
+ *    `ComboboxEmpty` is a sibling of `ComboboxList` INSIDE `ComboboxContent` (not
+ *    a `List` child) — it mirrors Base UI's own structure and lets the no-match
+ *    caption sit at the popup level. Static `ComboboxItem` children also work,
+ *    but the built-in filter only runs against the `items` prop, so filtering UIs
+ *    should pass `items` + the render-function form. Unlike `SelectContent`
+ *    (which owns its `List`), keeping `List` explicit is what makes correct
+ *    `Empty` placement and the render-function API possible.
+ *
+ * ## Divergences vs shadcn's Combobox recipe
+ * shadcn has NO Combobox component — its docs "Combobox" is a hand-rolled recipe
+ * composing `Popover` + `Command` (cmdk) with local `useState`, `open`, and a
+ * manually-wired `CommandInput`/`CommandItem`/`onSelect`. This kit instead ships
+ * a real `Combobox*` part family:
+ * - **Filtering is built in.** Base UI's `Combobox.Root` filters `List` items
+ *   against the input value automatically (`mode="list"` default); the shadcn
+ *   recipe leans on cmdk's `Command` to filter. No `cmdk` dependency here.
+ * - **One selection model, not two hooks.** shadcn juggles Popover `open` +
+ *   Command `value` + an external `value` `useState`. Here `value`/`inputValue`
+ *   are one model on the Root — controlled or uncontrolled — exposed honestly.
+ * - **Composable parts, not a monolith.** `Combobox`, `ComboboxInput`,
+ *   `ComboboxContent`, `ComboboxItem`, … read as the sibling of `Select`, not as
+ *   a bespoke Popover+Command assembly the consumer re-wires each time.
+ *
+ * ## Extension points for Multi Select (do NOT style chips here)
+ * `multiple` is passed through UNBLOCKED (`Combobox`'s generic second type param,
+ * exactly like `Select`). When `multiple` is set, Base UI:
+ * - makes `value`/`onValueChange` arrays;
+ * - keeps `Combobox.Clear` clearing to `[]`;
+ * - exposes `Combobox.Chips` / `Combobox.Chip` / `Combobox.ChipRemove` for a
+ *   token field, and `Combobox.Row` for grid layouts.
+ * The Multi Select agent should build its OWN field part (e.g. `MultiSelectInput`
+ * / a chips field) that wraps `Combobox.Chips` around `Combobox.Input` inside the
+ * same field-chrome wrapper this file uses — it must NOT reuse `ComboboxInput`,
+ * which is the single-line surface. This file intentionally leaves chip styling
+ * unspecified; the `combobox-input-wrapper` class string is the shared field
+ * recipe to copy. Everything else (`ComboboxContent`, `ComboboxItem`,
+ * `ComboboxGroup`, `ComboboxLabel`, `ComboboxEmpty`) is reusable as-is.
+ *
+ * ## `"use client"` — required
+ * `@fluentui/react-icons` forces it: the package's shared icon-sizing module
+ * (`createFluentIcon.styles.js`) calls `@griffel/react`'s `__styles()` at module
+ * scope without its own `'use client'`, so importing an icon into a Server
+ * Component makes `next build` (Turbopack) fail collecting page data. Same fix
+ * and root cause as `select.tsx`/`checkbox.tsx` (conventions §9). Every Base UI
+ * Combobox part module already carries its own `'use client'`.
+ *
+ * ## data-slot note
+ * `Combobox` (Root) renders no DOM element and its Base UI props type is strict
+ * (no `data-*` passthrough), so it carries no `data-slot`. Every part that
+ * renders an element does (`combobox-input`, `combobox-content`, `combobox-item`,
+ * …) — the styling/testing hook consumers rely on.
+ */
+declare function Combobox<Value, Multiple extends boolean | undefined = false>(props: Combobox$1.Root.Props<Value, Multiple>): react.JSX.Element;
+/**
+ * Value — displays the selected value (Base UI `Combobox.Value`). Renders the
+ * raw value unless `items` is passed to `<Combobox>` or a render child is used
+ * (divergence 4). Exported for showing the selection outside the input; the
+ * field itself already reflects the selection as input text.
+ */
+declare function ComboboxValue(props: ComponentProps<typeof Combobox$1.Value>): react.JSX.Element;
+/**
+ * Input — the Fluent single-line combobox field (divergence 2). A field-chrome
+ * wrapper holds the real `<input>` (transparent, fills the field), a `Clear`
+ * reset button (auto-unmounts when empty) and a chevron `Trigger`. The wrapper
+ * carries the kit Input recipe: h-8, `rounded-md`, `border-input` +
+ * `border-b-stroke-accessible` at rest, and the Fluent bottom brand accent on
+ * focus via an inset box-shadow (no reflow) — keyed off `has-[input:focus-visible]`
+ * because focus lands on the inner input, not the wrapper. `aria-invalid` on the
+ * input swaps the field to destructive, declared after focus so it wins.
+ * `className`/`ref`/`...props` forward to the inner `<input>`; style the wrapper
+ * with `wrapperClassName`.
+ */
+declare function ComboboxInput({ className, wrapperClassName, ...props }: ComponentProps<typeof Combobox$1.Input> & {
+    wrapperClassName?: string;
+}): react.JSX.Element;
+/**
+ * Content — the floating flyout: `Portal` → `Positioner` → `Popup`. Surface is
+ * `SelectContent`'s validated recipe verbatim: `bg-popover` + `border` +
+ * `shadow-16` (Fluent flyout elevation), `rounded-md`, min-width matched to the
+ * field via Base UI's `--anchor-width`, and the scale+fade open/close animation
+ * on `data-starting-style`/`data-ending-style` with token durations/easings.
+ * `transition-[opacity,scale]` (never transform-based — conventions §3.5).
+ * Children are placed directly in the popup: a `ComboboxEmpty` (no-match
+ * caption) and a `ComboboxList` (the scroll container). See divergence 5.
+ */
+declare function ComboboxContent({ className, children, sideOffset, align, side, ...props }: ComponentProps<typeof Combobox$1.Popup> & Pick<ComponentProps<typeof Combobox$1.Positioner>, "side" | "align" | "sideOffset">): react.JSX.Element;
+/**
+ * List — the scrollable options container (Base UI `Combobox.List`, divergence
+ * 5). `children` may be a render function `(item, index) => …` (the filtering
+ * API: pass `items` to `<Combobox>` and map each) or static `ComboboxItem`
+ * children. Scrolls at `overflow-y-auto`; capped at `--available-height` or 20rem.
+ */
+declare function ComboboxList({ className, ...props }: ComponentProps<typeof Combobox$1.List>): react.JSX.Element;
+/**
+ * Empty — the no-match state (Base UI `Combobox.Empty`). Base UI renders its
+ * children ONLY when the filtered list is empty, and its root element must stay
+ * mounted to announce (it carries `role="presentation"` + a live region), so
+ * always place a `<ComboboxEmpty>` in the content rather than conditionally
+ * rendering it. Muted, centered caption.
+ */
+declare function ComboboxEmpty({ className, ...props }: ComponentProps<typeof Combobox$1.Empty>): react.JSX.Element;
+/**
+ * Item — one option (Base UI `Combobox.Item`, renders a `<div>` with
+ * `role="option"`). `value` selects it; the selected-state check
+ * (`CheckmarkRegular`) is absolutely positioned on the right inside
+ * `ItemIndicator`, which Base UI only mounts for the selected item. 32px row,
+ * 4px list radius, highlight (keyboard focus or hover) via `data-highlighted` →
+ * `bg-accent`, disabled items muted + inert — the `SelectItem` recipe.
+ */
+declare function ComboboxItem({ className, children, ...props }: ComponentProps<typeof Combobox$1.Item>): react.JSX.Element;
+/**
+ * Group — wraps a set of items under a `ComboboxLabel` heading (Base UI
+ * `Combobox.Group`). With Base UI's built-in filtering, pass grouped `items` to
+ * `<Combobox>` so empty groups drop out automatically; see the preview.
+ */
+declare function ComboboxGroup({ className, ...props }: ComponentProps<typeof Combobox$1.Group>): react.JSX.Element;
+/**
+ * Label — a heading for a `ComboboxGroup` (Base UI `Combobox.GroupLabel`), NOT a
+ * control-level field label (divergence 1). Small muted caption, Fluent style.
+ */
+declare function ComboboxLabel({ className, ...props }: ComponentProps<typeof Combobox$1.GroupLabel>): react.JSX.Element;
+declare function ComboboxSeparator({ className, ...props }: ComponentProps<typeof Combobox$1.Separator>): react.JSX.Element;
+
+export { Combobox, ComboboxContent, ComboboxEmpty, ComboboxGroup, ComboboxInput, ComboboxItem, ComboboxLabel, ComboboxList, ComboboxSeparator, ComboboxValue };

package/dist/components/ui/combobox.js

@@ -0,0 +1,236 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Combobox as ComboboxPrimitive } from "@base-ui/react/combobox";
+import {
+  CheckmarkRegular,
+  ChevronDownRegular,
+  DismissRegular
+} from "@fluentui/react-icons";
+import { cn } from "../../lib/utils.js";
+function Combobox(props) {
+  return /* @__PURE__ */ jsx(ComboboxPrimitive.Root, { ...props });
+}
+function ComboboxValue(props) {
+  return /* @__PURE__ */ jsx(ComboboxPrimitive.Value, { "data-slot": "combobox-value", ...props });
+}
+function ComboboxInput({
+  className,
+  wrapperClassName,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      "data-slot": "combobox-input-wrapper",
+      className: cn(
+        // layout — Fluent medium field, 32px, matches Input. Resting bottom edge
+        // uses the darker NeutralStrokeAccessible (#616161) accent; the other
+        // sides stay border-input. Focus (border-primary + inset underline) and
+        // aria-invalid (border-destructive) both override it.
+        "flex h-8 w-full items-center rounded-md border border-input border-b-stroke-accessible bg-background 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; text
+        // inputs match :focus-visible on pointer focus too, so this covers both.
+        "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.Input,
+          {
+            "data-slot": "combobox-input",
+            className: cn(
+              "h-full min-w-0 flex-1 bg-transparent px-3 py-1 outline-none",
+              "placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground",
+              className
+            ),
+            ...props
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          ComboboxPrimitive.Clear,
+          {
+            "data-slot": "combobox-clear",
+            "aria-label": "Clear",
+            tabIndex: -1,
+            className: cn(
+              "mr-0.5 flex size-6 shrink-0 items-center justify-center rounded-sm text-muted-foreground outline-none",
+              "transition-colors duration-fast ease-ease hover:text-foreground",
+              "focus-visible:ring-2 focus-visible:ring-ring",
+              "[&_svg]:pointer-events-none [&_svg]:size-4"
+            ),
+            children: /* @__PURE__ */ jsx(DismissRegular, {})
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          ComboboxPrimitive.Trigger,
+          {
+            "data-slot": "combobox-trigger",
+            "aria-label": "Show options",
+            tabIndex: -1,
+            className: cn(
+              "mr-2 flex shrink-0 items-center text-muted-foreground outline-none",
+              "[&_svg]:pointer-events-none [&_svg]:size-4"
+            ),
+            children: /* @__PURE__ */ jsx(ComboboxPrimitive.Icon, { "data-slot": "combobox-icon", children: /* @__PURE__ */ jsx(ChevronDownRegular, {}) })
+          }
+        )
+      ]
+    }
+  );
+}
+function ComboboxContent({
+  className,
+  children,
+  sideOffset = 4,
+  align = "start",
+  side = "bottom",
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(ComboboxPrimitive.Portal, { children: /* @__PURE__ */ jsx(
+    ComboboxPrimitive.Positioner,
+    {
+      "data-slot": "combobox-positioner",
+      sideOffset,
+      align,
+      side,
+      className: "z-50 outline-none",
+      children: /* @__PURE__ */ jsx(
+        ComboboxPrimitive.Popup,
+        {
+          "data-slot": "combobox-content",
+          className: cn(
+            "relative min-w-[var(--anchor-width)] origin-[var(--transform-origin)] overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-16 outline-none",
+            // 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,
+          children
+        }
+      )
+    }
+  ) });
+}
+function ComboboxList({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    ComboboxPrimitive.List,
+    {
+      "data-slot": "combobox-list",
+      className: cn(
+        "max-h-[min(var(--available-height),20rem)] overflow-y-auto overscroll-contain p-1",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function ComboboxEmpty({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    ComboboxPrimitive.Empty,
+    {
+      "data-slot": "combobox-empty",
+      className: cn("py-6 text-center text-sm text-muted-foreground", className),
+      ...props
+    }
+  );
+}
+function ComboboxItem({
+  className,
+  children,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxs(
+    ComboboxPrimitive.Item,
+    {
+      "data-slot": "combobox-item",
+      className: cn(
+        // layout — Fluent 32px row, 4px list radius, room on the right for check
+        "relative flex h-8 w-full cursor-default items-center rounded-md pr-8 pl-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",
+        // icons a consumer puts inside the item text
+        "[&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className
+      ),
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx("span", { className: "absolute right-2 flex size-4 items-center justify-center", children: /* @__PURE__ */ jsx(ComboboxPrimitive.ItemIndicator, { children: /* @__PURE__ */ jsx(CheckmarkRegular, { className: "size-4" }) }) }),
+        children
+      ]
+    }
+  );
+}
+function ComboboxGroup({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    ComboboxPrimitive.Group,
+    {
+      "data-slot": "combobox-group",
+      className: cn(className),
+      ...props
+    }
+  );
+}
+function ComboboxLabel({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    ComboboxPrimitive.GroupLabel,
+    {
+      "data-slot": "combobox-label",
+      className: cn(
+        "px-2 py-1.5 text-xs font-medium text-muted-foreground select-none",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function ComboboxSeparator({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    ComboboxPrimitive.Separator,
+    {
+      "data-slot": "combobox-separator",
+      className: cn("pointer-events-none -mx-1 my-1 h-px bg-border", className),
+      ...props
+    }
+  );
+}
+export {
+  Combobox,
+  ComboboxContent,
+  ComboboxEmpty,
+  ComboboxGroup,
+  ComboboxInput,
+  ComboboxItem,
+  ComboboxLabel,
+  ComboboxList,
+  ComboboxSeparator,
+  ComboboxValue
+};
+//# sourceMappingURL=combobox.js.map