@graundtech/fluent2-react-kit 0.5.1

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/ui/progress.tsx"],"sourcesContent":["import { Progress as ProgressPrimitive } from \"@base-ui/react/progress\";\nimport { cva, type VariantProps } from \"class-variance-authority\";\nimport type { ComponentProps } from \"react\";\n\nimport { cn } from \"../../lib/utils\";\n\n/**\n * Progress — Fluent 2-styled, shadcn-API progress bar.\n *\n * Base UI ships a Progress primitive (`@base-ui/react/progress`, imported as\n * a namespace exposing `Root` / `Track` / `Indicator` / `Label` / `Value`,\n * matching the actual export shape in node_modules — same pattern as\n * `avatar.tsx`). This is the batch's Base UI case (conventions §9): value→\n * percentage math, `role=\"progressbar\"`, `aria-valuemin`/`aria-valuemax`/\n * `aria-valuenow`/`aria-valuetext` wiring, and indeterminate detection\n * (`aria-valuenow` correctly omitted when `value` is `null`/`undefined`) are\n * exactly the kind of genuine behavior a primitive should own rather than\n * hand-rolling ARIA math. `Root`, `Track`, and `Indicator` are composed\n * internally into a single `Progress` export to match shadcn's flat API\n * (`<Progress value={33} />`) — the sub-parts are not re-exported, since the\n * spec calls for one component, not shadcn's newer multi-part variant.\n *\n * `\"use client\"` is intentionally omitted, mirroring `avatar.tsx`'s\n * reasoning: Base UI's Root/Track/Indicator modules each carry their own\n * `'use client'` directive at the source level, so they are already client\n * boundaries on their own. This wrapper file has no hooks/handlers of its\n * own — it only forwards props and branches on a plain value comparison — so\n * it stays a plain (server-renderable) module per conventions §2. Confirmed\n * via `pnpm typecheck` + the test suite.\n *\n * Aesthetics follow Fluent 2's ProgressBar, which is thin — 2px (`h-0.5`),\n * not shadcn's 8px `h-2` default. This is a deliberate, documented deviation\n * from the shadcn reference; consumers who want the shadcn-thick bar (or any\n * other height) can override via `className` (`cn` + tailwind-merge resolve\n * the conflict, last utility wins). Track is `bg-secondary` (flat neutral\n * fill) with `rounded-full overflow-hidden`; the indicator is `bg-primary`,\n * also `rounded-full`.\n *\n * Intent variants: Fluent's ProgressBar ships a `State` axis (Default/Success/\n * Error/Warning), so `Progress` exposes a matching `variant` prop\n * (`default`/`success`/`warning`/`destructive`) via `progressVariants` — a\n * `cva` on the indicator sub-part, the same precedent `spinner.tsx` sets by\n * putting its `cva` on the inner glyph. `success` (`bg-success` `#107c10`) and\n * `warning` (`bg-warning` `#da3b01`) are exact hex matches to Fluent's\n * Success/Warning `State`. `destructive` reuses `bg-destructive` (`#d13438`)\n * rather than Fluent's filled-status `#c50f1f`: this kit standardizes on one\n * destructive red across Badge/Progress/Label per the single-red policy\n * (docs/design/tokens-research.md §12.9), keeping consistency over a one-off\n * fifth red token. The indicator width is driven by Base UI's own computed\n * `style.width` percentage (`ProgressIndicator` reads `value`/`min`/`max`\n * from context and sets `width: ${percent}%` — this is \"the cleaner\" of the\n * two width strategies the spec allows: it needs no manual percent math on\n * our side, unlike shadcn's classic `translateX(-${100 - value}%)` recipe).\n * `transition-[width]` (not `transition-all`/`transform`, since Base UI\n * animates `width` directly) plus the token duration/easing pair animates\n * value changes; reduced motion is handled automatically by the token layer\n * (conventions §3.5) since `duration-normal`/`ease-ease` are token-driven.\n *\n * Indeterminate (`value` is `null`/undefined): Fluent's sliding segment. The\n * indicator renders a `w-1/3` segment driven by the token-layer\n * `--animate-progress-indeterminate` keyframes (tokens.css): it travels from\n * fully off-track left (`translate: -100%` of its own width) to fully\n * off-track right (`300%`), clipped by the root's `overflow-hidden`.\n *\n * Under `prefers-reduced-motion` the slide is fully stopped via\n * `motion-reduce:animate-none` (same call as `skeleton.tsx`, not `spinner.tsx`'s\n * slow-down): the pulse carries no information a reduced-motion user would\n * lose by holding it still — the indeterminate/busy state is conveyed by the\n * `role=\"progressbar\"` + omitted `aria-valuenow` to assistive tech and by the\n * bar's presence to sighted users — and a persistently animating region is\n * exactly what `prefers-reduced-motion` asks apps to avoid. `motion-reduce:\n * animate-none` is a plain Tailwind utility (not a `duration-*` token), so it\n * isn't covered by the automatic duration collapse `tokens.css` applies and\n * has to be declared here explicitly.\n *\n * `role=\"progressbar\"` requires an accessible name; Base UI does not default\n * one. Pass `aria-label` (forwarded straight through to the root via\n * `...props`) or compose Base UI's own `Progress.Label` alongside this\n * component — consumers must supply one or the other.\n */\nconst progressVariants = cva(\n  \"h-full rounded-full transition-[width] duration-normal ease-ease\",\n  {\n    variants: {\n      variant: {\n        default: \"bg-primary\",\n        success: \"bg-success\",\n        warning: \"bg-warning\",\n        destructive: \"bg-destructive\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n    },\n  }\n);\n\nfunction Progress({\n  className,\n  value,\n  variant = \"default\",\n  size = \"default\",\n  ...props\n}: Omit<ComponentProps<typeof ProgressPrimitive.Root>, \"value\"> &\n  VariantProps<typeof progressVariants> & {\n    /**\n     * 0–100 (relative to `min`/`max`, both default 0/100). Omit or pass `null`\n     * for the indeterminate state — Base UI's Root then correctly omits\n     * `aria-valuenow` and this wrapper renders the pulsing stand-in indicator.\n     */\n    value?: number | null;\n    /**\n     * Fluent ProgressBar `Size` axis: `default` = Medium (2px track),\n     * `lg` = Large (4px) — surfaced by the pass-1 Figma validation.\n     */\n    size?: \"default\" | \"lg\";\n  }) {\n  return (\n    <ProgressPrimitive.Root\n      data-slot=\"progress\"\n      data-variant={variant}\n      data-size={size}\n      value={value ?? null}\n      className={cn(\n        \"relative w-full overflow-hidden rounded-full bg-secondary\",\n        size === \"lg\" ? \"h-1\" : \"h-0.5\",\n        className\n      )}\n      {...props}\n    >\n      <ProgressPrimitive.Track\n        data-slot=\"progress-track\"\n        className=\"relative h-full w-full\"\n      >\n        <ProgressPrimitive.Indicator\n          data-slot=\"progress-indicator\"\n          className={cn(\n            progressVariants({ variant }),\n            // Fluent indeterminate: the token-layer keyframes slide the 1/3\n            // segment from off-track left to off-track right (root clips).\n            value == null &&\n              \"w-1/3 animate-progress-indeterminate motion-reduce:animate-none\"\n          )}\n        />\n      </ProgressPrimitive.Track>\n    </ProgressPrimitive.Root>\n  );\n}\n\nexport { Progress, progressVariants };\n"],"mappings":"AAsIQ;AAtIR,SAAS,YAAY,yBAAyB;AAC9C,SAAS,WAA8B;AAGvC,SAAS,UAAU;AA4EnB,MAAM,mBAAmB;AAAA,EACvB;AAAA,EACA;AAAA,IACE,UAAU;AAAA,MACR,SAAS;AAAA,QACP,SAAS;AAAA,QACT,SAAS;AAAA,QACT,SAAS;AAAA,QACT,aAAa;AAAA,MACf;AAAA,IACF;AAAA,IACA,iBAAiB;AAAA,MACf,SAAS;AAAA,IACX;AAAA,EACF;AACF;AAEA,SAAS,SAAS;AAAA,EAChB;AAAA,EACA;AAAA,EACA,UAAU;AAAA,EACV,OAAO;AAAA,EACP,GAAG;AACL,GAaK;AACH,SACE;AAAA,IAAC,kBAAkB;AAAA,IAAlB;AAAA,MACC,aAAU;AAAA,MACV,gBAAc;AAAA,MACd,aAAW;AAAA,MACX,OAAO,SAAS;AAAA,MAChB,WAAW;AAAA,QACT;AAAA,QACA,SAAS,OAAO,QAAQ;AAAA,QACxB;AAAA,MACF;AAAA,MACC,GAAG;AAAA,MAEJ;AAAA,QAAC,kBAAkB;AAAA,QAAlB;AAAA,UACC,aAAU;AAAA,UACV,WAAU;AAAA,UAEV;AAAA,YAAC,kBAAkB;AAAA,YAAlB;AAAA,cACC,aAAU;AAAA,cACV,WAAW;AAAA,gBACT,iBAAiB,EAAE,QAAQ,CAAC;AAAA;AAAA;AAAA,gBAG5B,SAAS,QACP;AAAA,cACJ;AAAA;AAAA,UACF;AAAA;AAAA,MACF;AAAA;AAAA,EACF;AAEJ;","names":[]}

package/dist/components/ui/radio-group.d.ts

@@ -0,0 +1,94 @@
+import * as react from 'react';
+import { Radio } from '@base-ui/react/radio';
+import { RadioGroup as RadioGroup$1 } from '@base-ui/react/radio-group';
+
+/**
+ * RadioGroup / RadioGroupItem — Fluent 2-styled, shadcn-API radio group.
+ *
+ * This is a Base UI case (conventions §9): roving tabindex, arrow-key
+ * selection and the checked/unchecked state machine are genuine behavior a
+ * `<div>` + `<input type="radio">` can't express on their own without
+ * reimplementing Base UI's composite-focus logic, so the two parts wrap
+ * `@base-ui/react/radio-group` (`RadioGroup`, imported and re-exported as
+ * `RadioGroupPrimitive`) and `@base-ui/react/radio` (`Radio`, imported as a
+ * namespace exposing `Radio.Root` / `Radio.Indicator` — matches the actual
+ * `export * as Radio from "./index.parts.js"` shape in node_modules, same
+ * pattern `avatar.tsx` uses for `@base-ui/react/avatar`). Arrow-key
+ * roving/selection, click-to-select, and the hidden native
+ * `<input type="radio">` (native form participation) all come from Base UI —
+ * none of it is reimplemented here.
+ *
+ * `"use client"` is intentionally omitted here, same reasoning as
+ * `avatar.tsx`: `@base-ui/react/radio-group`'s `RadioGroup` and
+ * `@base-ui/react/radio`'s `Radio.Root` / `Radio.Indicator` each carry their
+ * own `'use client'` directive at the compiled-source level (verified in
+ * `node_modules/@base-ui/react/{radio-group/RadioGroup.js,radio/root/RadioRoot.js,radio/indicator/RadioIndicator.js}`),
+ * so they are already client boundaries on their own. This wrapper file has
+ * no hooks/handlers of its own — it only forwards props into those parts —
+ * so per conventions §2 it can stay a plain (server-renderable) module; a
+ * Server Component tree can render a Client Component child without the
+ * parent re-declaring the directive. Confirmed via `pnpm typecheck` + the
+ * test suite; add the directive here only if that stops holding true.
+ *
+ * Layout: shadcn's reference implementation defaults `RadioGroup` to
+ * `"grid gap-3"`. This kit ships `"grid gap-2"` instead — a deliberate,
+ * spec-directed deviation to match this component family's spacing scale (a
+ * 16px control at `gap-2` == 8px reads as a tighter, denser Fluent list than
+ * shadcn's 12px gap). Callers needing shadcn's exact spacing can override via
+ * `className="gap-3"` (later utility wins through `cn`'s `tailwind-merge`).
+ *
+ * Checked indicator: shadcn fills a `lucide-react` `CircleIcon` positioned
+ * absolutely inside the indicator. Fluent 2's RadioGroup instead shows a
+ * brand-colored **ring** (the whole circle's border turns brand) with a
+ * small brand **dot** centered inside — no checkmark glyph. This
+ * implementation matches that: the item's border switches to
+ * `border-primary` when `data-checked` is present, and the indicator renders
+ * a plain `size-2 rounded-full bg-primary` `<span>` (flex-centered, no icon
+ * import needed — a filled circle needs no glyph, so pulling in
+ * `@fluentui/react-icons` for this would add a dependency for no visual
+ * gain). `Radio.Indicator` only mounts while the radio is checked (Base UI
+ * unmounts it otherwise, per `RadioIndicator.js`'s `shouldRender` check), so
+ * the dot itself needs no extra checked-conditional styling — but it does
+ * ramp its color alongside the ring (see below).
+ *
+ * Borders + interaction ramp: the unchecked ring outlines with Fluent's
+ * `NeutralStrokeAccessible` ramp — rest `#616161` (`border-stroke-accessible`),
+ * hover `#575757`, pressed `#4d4d4d` — the higher-contrast neutral spec for
+ * interactive control outlines (extracted from the Figma radio), NOT the
+ * lighter `border-input` grey the item previously used. When checked, the ring
+ * (border) and dot step through `CompoundBrandStroke`/`CompoundBrandForeground1`
+ * Hover/Pressed (`brand-70`/`brand-60`; dark hover `brand-80`), mirroring
+ * Button's per-theme brand ramp (conventions §4). The ring uses
+ * `data-[checked]:hover:`/`:active:` (which outrank the neutral hover/active
+ * border by specificity); the dot, having no `data-checked` of its own, rides
+ * the root's `group` hover/press instead.
+ *
+ * States: `data-checked`/`data-unchecked` and `data-disabled` are Base UI's
+ * own presence attributes on `Radio.Root`'s rendered `<span>` (see
+ * `RadioRootDataAttributes` in node_modules — boolean presence, not a
+ * `data-state="checked"` value pair like Radix), matched here via Tailwind's
+ * `data-[checked]:` / `data-[disabled]:` arbitrary-attribute variants (there
+ * is no native `:disabled` pseudo-class to reach for — the rendered element
+ * is a `<span role="radio">`, not a real `<input>`/`<button>`, 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 radio is a selectable control, not a typed-into field).
+ * `aria-invalid` is a bare ARIA attribute Base UI passes through untouched,
+ * so the standard `aria-invalid:` recipe applies as-is.
+ *
+ * Typing: Base UI's `RadioGroup`/`Radio.Root` are generic over the radio
+ * value type (`Value = any` upstream). `ComponentProps<typeof X>` on a
+ * generic function component collapses that parameter to `unknown` (it has
+ * no call site to infer from), which would force every consumer to cast in
+ * `onValueChange`. Both parts pin `Value` to `string` instead via each
+ * primitive's own namespace type (`RadioGroupPrimitive.Props<string>`,
+ * `Radio.Root.Props<string>` — available because Base UI declaration-merges
+ * a namespace onto each component, matching shadcn/Radix's own radio API,
+ * which is string-only, not generic) so callers get a plain, un-cast
+ * `value`/`onValueChange: (value: string, …) => void` surface.
+ */
+declare function RadioGroup({ className, ...props }: RadioGroup$1.Props<string>): react.JSX.Element;
+declare function RadioGroupItem({ className, ...props }: Radio.Root.Props<string>): react.JSX.Element;
+
+export { RadioGroup, RadioGroupItem };

package/dist/components/ui/radio-group.js

@@ -0,0 +1,65 @@
+import { jsx } from "react/jsx-runtime";
+import { Radio } from "@base-ui/react/radio";
+import { RadioGroup as RadioGroupPrimitive } from "@base-ui/react/radio-group";
+import { cn } from "../../lib/utils.js";
+function RadioGroup({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    RadioGroupPrimitive,
+    {
+      "data-slot": "radio-group",
+      className: cn("grid gap-2", className),
+      ...props
+    }
+  );
+}
+function RadioGroupItem({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    Radio.Root,
+    {
+      "data-slot": "radio-group-item",
+      className: cn(
+        // layout — Fluent 16px circle. `group` lets the checked dot (a child
+        // span) pick up the root's hover/press to ramp alongside the ring.
+        "group aspect-square size-4 shrink-0 cursor-pointer rounded-full border bg-background",
+        // 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 — Fluent brand ring (the dot itself lives in the indicator),
+        // stepping through CompoundBrandStroke Hover/Pressed; dark hover
+        // brightens to brand-80 (Button's per-theme ramp). These outrank the
+        // neutral hover/active border by specificity so the ring stays brand.
+        "data-[checked]:border-primary data-[checked]:hover:border-brand-70 data-[checked]:active:border-brand-60 dark:data-[checked]:hover:border-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)
+        "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(
+        Radio.Indicator,
+        {
+          "data-slot": "radio-group-indicator",
+          className: "flex items-center justify-center",
+          children: /* @__PURE__ */ jsx("span", { className: "size-2 rounded-full bg-primary transition-colors duration-fast ease-ease group-hover:bg-brand-70 group-active:bg-brand-60 dark:group-hover:bg-brand-80" })
+        }
+      )
+    }
+  );
+}
+export {
+  RadioGroup,
+  RadioGroupItem
+};
+//# sourceMappingURL=radio-group.js.map

package/dist/components/ui/radio-group.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/ui/radio-group.tsx"],"sourcesContent":["import { Radio } from \"@base-ui/react/radio\";\nimport { RadioGroup as RadioGroupPrimitive } from \"@base-ui/react/radio-group\";\n\nimport { cn } from \"../../lib/utils\";\n\n/**\n * RadioGroup / RadioGroupItem — Fluent 2-styled, shadcn-API radio group.\n *\n * This is a Base UI case (conventions §9): roving tabindex, arrow-key\n * selection and the checked/unchecked state machine are genuine behavior a\n * `<div>` + `<input type=\"radio\">` can't express on their own without\n * reimplementing Base UI's composite-focus logic, so the two parts wrap\n * `@base-ui/react/radio-group` (`RadioGroup`, imported and re-exported as\n * `RadioGroupPrimitive`) and `@base-ui/react/radio` (`Radio`, imported as a\n * namespace exposing `Radio.Root` / `Radio.Indicator` — matches the actual\n * `export * as Radio from \"./index.parts.js\"` shape in node_modules, same\n * pattern `avatar.tsx` uses for `@base-ui/react/avatar`). Arrow-key\n * roving/selection, click-to-select, and the hidden native\n * `<input type=\"radio\">` (native form participation) all come from Base UI —\n * none of it is reimplemented here.\n *\n * `\"use client\"` is intentionally omitted here, same reasoning as\n * `avatar.tsx`: `@base-ui/react/radio-group`'s `RadioGroup` and\n * `@base-ui/react/radio`'s `Radio.Root` / `Radio.Indicator` each carry their\n * own `'use client'` directive at the compiled-source level (verified in\n * `node_modules/@base-ui/react/{radio-group/RadioGroup.js,radio/root/RadioRoot.js,radio/indicator/RadioIndicator.js}`),\n * so they are already client boundaries on their own. This wrapper file has\n * no hooks/handlers of its own — it only forwards props into those parts —\n * so per conventions §2 it can stay a plain (server-renderable) module; a\n * Server Component tree can render a Client Component child without the\n * parent re-declaring the directive. Confirmed via `pnpm typecheck` + the\n * test suite; add the directive here only if that stops holding true.\n *\n * Layout: shadcn's reference implementation defaults `RadioGroup` to\n * `\"grid gap-3\"`. This kit ships `\"grid gap-2\"` instead — a deliberate,\n * spec-directed deviation to match this component family's spacing scale (a\n * 16px control at `gap-2` == 8px reads as a tighter, denser Fluent list than\n * shadcn's 12px gap). Callers needing shadcn's exact spacing can override via\n * `className=\"gap-3\"` (later utility wins through `cn`'s `tailwind-merge`).\n *\n * Checked indicator: shadcn fills a `lucide-react` `CircleIcon` positioned\n * absolutely inside the indicator. Fluent 2's RadioGroup instead shows a\n * brand-colored **ring** (the whole circle's border turns brand) with a\n * small brand **dot** centered inside — no checkmark glyph. This\n * implementation matches that: the item's border switches to\n * `border-primary` when `data-checked` is present, and the indicator renders\n * a plain `size-2 rounded-full bg-primary` `<span>` (flex-centered, no icon\n * import needed — a filled circle needs no glyph, so pulling in\n * `@fluentui/react-icons` for this would add a dependency for no visual\n * gain). `Radio.Indicator` only mounts while the radio is checked (Base UI\n * unmounts it otherwise, per `RadioIndicator.js`'s `shouldRender` check), so\n * the dot itself needs no extra checked-conditional styling — but it does\n * ramp its color alongside the ring (see below).\n *\n * Borders + interaction ramp: the unchecked ring outlines with Fluent's\n * `NeutralStrokeAccessible` ramp — rest `#616161` (`border-stroke-accessible`),\n * hover `#575757`, pressed `#4d4d4d` — the higher-contrast neutral spec for\n * interactive control outlines (extracted from the Figma radio), NOT the\n * lighter `border-input` grey the item previously used. When checked, the ring\n * (border) and dot step through `CompoundBrandStroke`/`CompoundBrandForeground1`\n * Hover/Pressed (`brand-70`/`brand-60`; dark hover `brand-80`), mirroring\n * Button's per-theme brand ramp (conventions §4). The ring uses\n * `data-[checked]:hover:`/`:active:` (which outrank the neutral hover/active\n * border by specificity); the dot, having no `data-checked` of its own, rides\n * the root's `group` hover/press instead.\n *\n * States: `data-checked`/`data-unchecked` and `data-disabled` are Base UI's\n * own presence attributes on `Radio.Root`'s rendered `<span>` (see\n * `RadioRootDataAttributes` in node_modules — boolean presence, not a\n * `data-state=\"checked\"` value pair like Radix), matched here via Tailwind's\n * `data-[checked]:` / `data-[disabled]:` arbitrary-attribute variants (there\n * is no native `:disabled` pseudo-class to reach for — the rendered element\n * is a `<span role=\"radio\">`, not a real `<input>`/`<button>`, 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 radio is a selectable control, not a typed-into field).\n * `aria-invalid` is a bare ARIA attribute Base UI passes through untouched,\n * so the standard `aria-invalid:` recipe applies as-is.\n *\n * Typing: Base UI's `RadioGroup`/`Radio.Root` are generic over the radio\n * value type (`Value = any` upstream). `ComponentProps<typeof X>` on a\n * generic function component collapses that parameter to `unknown` (it has\n * no call site to infer from), which would force every consumer to cast in\n * `onValueChange`. Both parts pin `Value` to `string` instead via each\n * primitive's own namespace type (`RadioGroupPrimitive.Props<string>`,\n * `Radio.Root.Props<string>` — available because Base UI declaration-merges\n * a namespace onto each component, matching shadcn/Radix's own radio API,\n * which is string-only, not generic) so callers get a plain, un-cast\n * `value`/`onValueChange: (value: string, …) => void` surface.\n */\nfunction RadioGroup({\n  className,\n  ...props\n}: RadioGroupPrimitive.Props<string>) {\n  return (\n    <RadioGroupPrimitive\n      data-slot=\"radio-group\"\n      className={cn(\"grid gap-2\", className)}\n      {...props}\n    />\n  );\n}\n\nfunction RadioGroupItem({\n  className,\n  ...props\n}: Radio.Root.Props<string>) {\n  return (\n    <Radio.Root\n      data-slot=\"radio-group-item\"\n      className={cn(\n        // layout — Fluent 16px circle. `group` lets the checked dot (a child\n        // span) pick up the root's hover/press to ramp alongside the ring.\n        \"group aspect-square size-4 shrink-0 cursor-pointer rounded-full border bg-background\",\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 — Fluent brand ring (the dot itself lives in the indicator),\n        // stepping through CompoundBrandStroke Hover/Pressed; dark hover\n        // brightens to brand-80 (Button's per-theme ramp). These outrank the\n        // neutral hover/active border by specificity so the ring stays brand.\n        \"data-[checked]:border-primary data-[checked]:hover:border-brand-70 data-[checked]:active:border-brand-60 dark:data-[checked]:hover:border-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)\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      <Radio.Indicator\n        data-slot=\"radio-group-indicator\"\n        className=\"flex items-center justify-center\"\n      >\n        {/* dot — brand fill, ramping with the ring via the root's `group`\n            hover/press (CompoundBrandForeground1 Hover/Pressed). */}\n        <span className=\"size-2 rounded-full bg-primary transition-colors duration-fast ease-ease group-hover:bg-brand-70 group-active:bg-brand-60 dark:group-hover:bg-brand-80\" />\n      </Radio.Indicator>\n    </Radio.Root>\n  );\n}\n\nexport { RadioGroup, RadioGroupItem };\n"],"mappings":"AAgGI;AAhGJ,SAAS,aAAa;AACtB,SAAS,cAAc,2BAA2B;AAElD,SAAS,UAAU;AAwFnB,SAAS,WAAW;AAAA,EAClB;AAAA,EACA,GAAG;AACL,GAAsC;AACpC,SACE;AAAA,IAAC;AAAA;AAAA,MACC,aAAU;AAAA,MACV,WAAW,GAAG,cAAc,SAAS;AAAA,MACpC,GAAG;AAAA;AAAA,EACN;AAEJ;AAEA,SAAS,eAAe;AAAA,EACtB;AAAA,EACA,GAAG;AACL,GAA6B;AAC3B,SACE;AAAA,IAAC,MAAM;AAAA,IAAN;AAAA,MACC,aAAU;AAAA,MACV,WAAW;AAAA;AAAA;AAAA,QAGT;AAAA;AAAA,QAEA;AAAA;AAAA,QAEA;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,MAAM;AAAA,QAAN;AAAA,UACC,aAAU;AAAA,UACV,WAAU;AAAA,UAIV,8BAAC,UAAK,WAAU,0JAAyJ;AAAA;AAAA,MAC3K;AAAA;AAAA,EACF;AAEJ;","names":[]}

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

@@ -0,0 +1,145 @@
+import * as react from 'react';
+import { ComponentProps } from 'react';
+import { Select as Select$1 } from '@base-ui/react/select';
+
+/**
+ * Select — Fluent 2-styled, shadcn-API select (dropdown listbox).
+ *
+ * This is the kit's first popup/overlay component, so the patterns set here
+ * (portal + positioner + popup surface, `shadow-16` flyout elevation, item
+ * highlight via Base UI `data-highlighted`) are the reference for Dialog,
+ * Tooltip, and Dropdown later.
+ *
+ * ## Base UI mapping (conventions §9)
+ * Behavior — focus management, portalling, open/close state, roving tabindex,
+ * type-ahead, collision-aware positioning — genuinely needs a primitive, so the
+ * parts wrap `@base-ui/react/select` (namespace import, matching the actual
+ * export shape in node_modules, exactly like `avatar.tsx`). shadcn part names
+ * are mapped onto Base UI's model:
+ *
+ * | Exported (shadcn name)  | Base UI primitive                                    |
+ * | ----------------------- | ---------------------------------------------------- |
+ * | `Select`                | `Select.Root`                                        |
+ * | `SelectGroup`           | `Select.Group`                                       |
+ * | `SelectValue`           | `Select.Value`                                       |
+ * | `SelectTrigger`         | `Select.Trigger` (+ `Select.Icon` chevron appended)  |
+ * | `SelectContent`         | `Select.Portal` + `Select.Positioner` + `Select.Popup` + `Select.List` |
+ * | `SelectLabel`           | `Select.GroupLabel`  ← see divergence 1              |
+ * | `SelectItem`            | `Select.Item` (+ `Select.ItemIndicator` + `Select.ItemText`) |
+ * | `SelectSeparator`       | `Select.Separator`                                   |
+ * | `SelectScrollUpButton`  | `Select.ScrollUpArrow`                               |
+ * | `SelectScrollDownButton`| `Select.ScrollDownArrow`                             |
+ *
+ * ## Divergences from the shadcn/Radix Select API (all deliberate)
+ * 1. **`SelectLabel` maps to Base UI `Select.GroupLabel`, not `Select.Label`.**
+ *    Base UI has *two* label parts: `Select.Label` labels the whole control
+ *    (like a field `<label>`), while `Select.GroupLabel` is the heading inside a
+ *    `Select.Group`. shadcn's `SelectLabel` is the group heading, so it maps to
+ *    `GroupLabel`. Base UI's control-level `Select.Label` is intentionally not
+ *    re-exported — pair the trigger with the kit's own `Label` component instead.
+ *    `Label` is a separate registry item (`registry/items/label.json`) and is
+ *    not a `registryDependency` of `select`, so install it explicitly:
+ *    `npx shadcn@latest add <registry-url>/r/label.json`.
+ *
+ *    **Labeling recipe.** Give the `Label` an `id` and the `SelectTrigger` its
+ *    own `id`, then set `aria-labelledby="<label-id> <trigger-id>"` on the
+ *    trigger (referencing *both*). Pointing only at the external label drops
+ *    the chosen value from the accessible name; adding the trigger's own id
+ *    folds the `SelectValue` text (the current selection) back in, so a screen
+ *    reader announces "<label>, <selected value>". `htmlFor`/`for` can't be
+ *    used here — the trigger renders a `<button>`, not a labelable form field —
+ *    which is why the association is `aria-labelledby`, not a wrapping/`for`
+ *    `<label>`. The Select preview page uses this pattern on every example.
+ * 2. **`SelectValue` shows the raw value unless `<Select>` gets an `items` prop.**
+ *    Unlike Radix (where `SelectValue` mirrors the selected `SelectItem`'s text),
+ *    Base UI's `Select.Value` renders the raw `value` by default. To display a
+ *    friendly label, either pass `items` to `<Select>` (Root) — e.g.
+ *    `items={[{ value: "apple", label: "Apple" }]}` — or pass a render function
+ *    as `SelectValue`'s child: `<SelectValue>{(v) => labels[v]}</SelectValue>`.
+ *    This is Base UI's model; the wrapper stays thin and does not paper over it.
+ * 3. **`SelectTrigger` sizes follow the kit's Button scale, not shadcn's.**
+ *    shadcn ships `sm`/`default` at h-8/h-9; this kit maps Fluent's field sizes
+ *    onto the Button height scale instead — `sm` 24px (`h-6`), `default` 32px
+ *    (`h-8`, matches `Input`), `lg` 40px (`h-10`) — surfaced as `data-size`.
+ * 4. **`SelectContent` positions below the trigger (`alignItemWithTrigger=false`).**
+ *    Base UI defaults to overlapping the trigger so the selected item's text lines
+ *    up with the value (native-select behavior). A shadcn-style dropdown that opens
+ *    beneath the field is the expected Fluent flyout, so this is forced off; the
+ *    scroll arrows/`data-[side=none]` overlap edge cases go away with it.
+ *
+ * ## `"use client"` — required (integration-pass correction)
+ * Every Base UI Select part module does carry its own `'use client'`
+ * directive, so on that basis alone this wrapper could stay server-renderable
+ * (same reasoning as `avatar.tsx`). But `CheckmarkRegular`/`ChevronDownRegular`/
+ * `ChevronUpRegular` from `@fluentui/react-icons` break that: 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 any of
+ * these icons from a Server Component pulls that module into the server's
+ * RSC graph, and `next build` (Turbopack) fails collecting page data with
+ * "Attempted to call __styles() from the server but __styles is on the
+ * client" — reproduced against `@fluentui/react-icons@2.0.333` /
+ * `@griffel/react@1.7.5`, and 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. `checkbox.tsx` carries the same fix for the same reason.
+ *
+ * ## data-slot note
+ * `Select` (Root) renders no DOM element of its own and its Base UI props type
+ * is strict (no `data-*` passthrough), so it carries no `data-slot`. Every part
+ * that renders an element does — `select-trigger`, `select-content`,
+ * `select-item`, etc. — which is what tests/consumers hook onto.
+ */
+declare function Select<Value, Multiple extends boolean | undefined = false>(props: Select$1.Root.Props<Value, Multiple>): react.JSX.Element;
+declare function SelectGroup({ className, ...props }: ComponentProps<typeof Select$1.Group>): react.JSX.Element;
+declare function SelectValue({ className, ...props }: ComponentProps<typeof Select$1.Value>): react.JSX.Element;
+/**
+ * Trigger — Fluent field look, styled to match `Input` (h-8, rounded-md,
+ * border-input, px-3, text-sm, flat at rest). Focus uses the sanctioned
+ * per-field deviation from conventions §4: a 2px brand underline painted with
+ * an inset box-shadow (no reflow) plus `border-primary`, and the `aria-invalid`
+ * treatment declared *after* focus so an invalid+focused field shows the
+ * destructive accent. The chevron is appended via `Select.Icon`; the trigger's
+ * `[&_svg]` rules size it (`size-4`) and mute it (`text-muted-foreground`).
+ */
+declare function SelectTrigger({ className, children, size, ...props }: ComponentProps<typeof Select$1.Trigger> & {
+    /** Fluent field sizes on the Button height scale — see divergence 3. */
+    size?: "sm" | "default" | "lg";
+}): react.JSX.Element;
+/**
+ * Content — the floating flyout: `Portal` → `Positioner` → `Popup`, with the
+ * items in a scrollable `List` between hover-scroll arrows. Surface is
+ * `bg-popover` + `border` + `shadow-16` (Fluent flyout elevation, conventions
+ * §3.6), `rounded-md`, `min-w` matched to the trigger via Base UI's
+ * `--anchor-width`. A subtle scale+fade open/close animation rides Base UI's
+ * `data-starting-style`/`data-ending-style` hooks with token durations/easings.
+ */
+declare function SelectContent({ className, children, sideOffset, align, side, ...props }: ComponentProps<typeof Select$1.Popup> & Pick<ComponentProps<typeof Select$1.Positioner>, "side" | "align" | "sideOffset">): react.JSX.Element;
+/**
+ * Label — a heading for a `SelectGroup` (Base UI `Select.GroupLabel`), *not* a
+ * control-level field label (divergence 1). Small muted caption, Fluent style.
+ */
+declare function SelectLabel({ className, ...props }: ComponentProps<typeof Select$1.GroupLabel>): react.JSX.Element;
+/**
+ * Item — one option. Text via `ItemText`; the selected-state check
+ * (`CheckmarkRegular`) is absolutely positioned on the right (shadcn placement)
+ * inside `ItemIndicator`, which Base UI only mounts for the selected item.
+ * `rounded-md` (4px) matches Fluent's `Corner-radius/List/Default`. Highlight
+ * (keyboard focus or hover) uses `data-highlighted` → `bg-accent`
+ * (`#f0f0f0`) `text-accent-foreground`; Fluent's list-hover token is `#f5f5f5`
+ * (one grey step lighter), but the kit keeps `--accent` for token consistency
+ * with every other hover surface — the difference is imperceptible on a 32px
+ * row. Disabled items are muted + inert.
+ */
+declare function SelectItem({ className, children, ...props }: ComponentProps<typeof Select$1.Item>): react.JSX.Element;
+declare function SelectSeparator({ className, ...props }: ComponentProps<typeof Select$1.Separator>): react.JSX.Element;
+/**
+ * ScrollUpButton / ScrollDownButton — Base UI hover-scroll arrows that Base UI
+ * only renders when the list overflows in that direction. Rendered as siblings
+ * of the `List` inside `SelectContent`, so consumers don't place them manually
+ * (shadcn parity — the export exists for API compatibility / manual use).
+ */
+declare function SelectScrollUpButton({ className, ...props }: ComponentProps<typeof Select$1.ScrollUpArrow>): react.JSX.Element;
+declare function SelectScrollDownButton({ className, ...props }: ComponentProps<typeof Select$1.ScrollDownArrow>): react.JSX.Element;
+
+export { Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue };

package/dist/components/ui/select.js

@@ -0,0 +1,240 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Select as SelectPrimitive } from "@base-ui/react/select";
+import {
+  CheckmarkRegular,
+  ChevronDownRegular,
+  ChevronUpRegular
+} from "@fluentui/react-icons";
+import { cn } from "../../lib/utils.js";
+function Select(props) {
+  return /* @__PURE__ */ jsx(SelectPrimitive.Root, { ...props });
+}
+function SelectGroup({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    SelectPrimitive.Group,
+    {
+      "data-slot": "select-group",
+      className: cn(className),
+      ...props
+    }
+  );
+}
+function SelectValue({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    SelectPrimitive.Value,
+    {
+      "data-slot": "select-value",
+      className: cn(className),
+      ...props
+    }
+  );
+}
+function SelectTrigger({
+  className,
+  children,
+  size = "default",
+  ...props
+}) {
+  return /* @__PURE__ */ jsxs(
+    SelectPrimitive.Trigger,
+    {
+      "data-slot": "select-trigger",
+      "data-size": size,
+      className: cn(
+        // layout — Fluent field on the Button height scale (divergence 3);
+        // default is the 32px medium that matches Input. Resting bottom
+        // edge uses the darker NeutralStrokeAccessible (#616161) accent while
+        // the other sides stay border-input; focus (border-primary + inset
+        // underline) and aria-invalid (border-destructive) both override it.
+        "flex w-full items-center justify-between gap-2 rounded-md border border-input border-b-stroke-accessible bg-background py-1 whitespace-nowrap",
+        size === "sm" && "h-6 px-2 text-xs",
+        size === "default" && "h-8 px-3 text-sm",
+        size === "lg" && "h-10 px-4 text-base",
+        // placeholder text muted (Base UI sets data-placeholder when no value)
+        "data-[placeholder]:text-muted-foreground",
+        // keep a long value on one line, left-aligned
+        "*:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:text-left",
+        // icon defaults — chevron sized + muted unless overridden
+        "[&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 [&_svg:not([class*='text-'])]:text-muted-foreground",
+        // motion — color + box-shadow so the focus accent animates (§4)
+        "outline-none transition-[color,box-shadow] duration-fast ease-ease",
+        // disabled — opacity read; Base UI emits both `disabled` + `data-disabled`
+        "disabled:pointer-events-none disabled:opacity-50 data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+        // focus — Fluent bottom brand accent via inset box-shadow, no reflow (§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; after focus so it wins the border
+        "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,
+      children: [
+        children,
+        /* @__PURE__ */ jsx(SelectPrimitive.Icon, { children: /* @__PURE__ */ jsx(ChevronDownRegular, {}) })
+      ]
+    }
+  );
+}
+function SelectContent({
+  className,
+  children,
+  sideOffset = 4,
+  align = "start",
+  side = "bottom",
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(SelectPrimitive.Portal, { children: /* @__PURE__ */ jsx(
+    SelectPrimitive.Positioner,
+    {
+      "data-slot": "select-positioner",
+      sideOffset,
+      align,
+      side,
+      alignItemWithTrigger: false,
+      className: "z-50 outline-none",
+      children: /* @__PURE__ */ jsxs(
+        SelectPrimitive.Popup,
+        {
+          "data-slot": "select-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: [
+            /* @__PURE__ */ jsx(SelectScrollUpButton, {}),
+            /* @__PURE__ */ jsx(
+              SelectPrimitive.List,
+              {
+                "data-slot": "select-list",
+                className: "max-h-[var(--available-height)] overflow-y-auto overscroll-contain p-1",
+                children
+              }
+            ),
+            /* @__PURE__ */ jsx(SelectScrollDownButton, {})
+          ]
+        }
+      )
+    }
+  ) });
+}
+function SelectLabel({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    SelectPrimitive.GroupLabel,
+    {
+      "data-slot": "select-label",
+      className: cn(
+        "px-2 py-1.5 text-xs font-medium text-muted-foreground select-none",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function SelectItem({
+  className,
+  children,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxs(
+    SelectPrimitive.Item,
+    {
+      "data-slot": "select-item",
+      className: cn(
+        // layout — Fluent 32px row, 4px list radius, px-2 with room on the
+        // right for the 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 that 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(SelectPrimitive.ItemIndicator, { children: /* @__PURE__ */ jsx(CheckmarkRegular, { className: "size-4" }) }) }),
+        /* @__PURE__ */ jsx(SelectPrimitive.ItemText, { children })
+      ]
+    }
+  );
+}
+function SelectSeparator({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    SelectPrimitive.Separator,
+    {
+      "data-slot": "select-separator",
+      className: cn(
+        "pointer-events-none -mx-1 my-1 h-px bg-border",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function SelectScrollUpButton({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    SelectPrimitive.ScrollUpArrow,
+    {
+      "data-slot": "select-scroll-up-button",
+      className: cn(
+        "flex cursor-default items-center justify-center py-1 text-muted-foreground",
+        className
+      ),
+      ...props,
+      children: /* @__PURE__ */ jsx(ChevronUpRegular, { className: "size-4" })
+    }
+  );
+}
+function SelectScrollDownButton({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    SelectPrimitive.ScrollDownArrow,
+    {
+      "data-slot": "select-scroll-down-button",
+      className: cn(
+        "flex cursor-default items-center justify-center py-1 text-muted-foreground",
+        className
+      ),
+      ...props,
+      children: /* @__PURE__ */ jsx(ChevronDownRegular, { className: "size-4" })
+    }
+  );
+}
+export {
+  Select,
+  SelectContent,
+  SelectGroup,
+  SelectItem,
+  SelectLabel,
+  SelectScrollDownButton,
+  SelectScrollUpButton,
+  SelectSeparator,
+  SelectTrigger,
+  SelectValue
+};
+//# sourceMappingURL=select.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/ui/select.tsx"],"sourcesContent":["\"use client\";\n\nimport { Select as SelectPrimitive } from \"@base-ui/react/select\";\nimport {\n  CheckmarkRegular,\n  ChevronDownRegular,\n  ChevronUpRegular,\n} from \"@fluentui/react-icons\";\nimport type { ComponentProps } from \"react\";\n\nimport { cn } from \"../../lib/utils\";\n\n/**\n * Select — Fluent 2-styled, shadcn-API select (dropdown listbox).\n *\n * This is the kit's first popup/overlay component, so the patterns set here\n * (portal + positioner + popup surface, `shadow-16` flyout elevation, item\n * highlight via Base UI `data-highlighted`) are the reference for Dialog,\n * Tooltip, and Dropdown later.\n *\n * ## Base UI mapping (conventions §9)\n * Behavior — focus management, portalling, open/close state, roving tabindex,\n * type-ahead, collision-aware positioning — genuinely needs a primitive, so the\n * parts wrap `@base-ui/react/select` (namespace import, matching the actual\n * export shape in node_modules, exactly like `avatar.tsx`). shadcn part names\n * are mapped onto Base UI's model:\n *\n * | Exported (shadcn name)  | Base UI primitive                                    |\n * | ----------------------- | ---------------------------------------------------- |\n * | `Select`                | `Select.Root`                                        |\n * | `SelectGroup`           | `Select.Group`                                       |\n * | `SelectValue`           | `Select.Value`                                       |\n * | `SelectTrigger`         | `Select.Trigger` (+ `Select.Icon` chevron appended)  |\n * | `SelectContent`         | `Select.Portal` + `Select.Positioner` + `Select.Popup` + `Select.List` |\n * | `SelectLabel`           | `Select.GroupLabel`  ← see divergence 1              |\n * | `SelectItem`            | `Select.Item` (+ `Select.ItemIndicator` + `Select.ItemText`) |\n * | `SelectSeparator`       | `Select.Separator`                                   |\n * | `SelectScrollUpButton`  | `Select.ScrollUpArrow`                               |\n * | `SelectScrollDownButton`| `Select.ScrollDownArrow`                             |\n *\n * ## Divergences from the shadcn/Radix Select API (all deliberate)\n * 1. **`SelectLabel` maps to Base UI `Select.GroupLabel`, not `Select.Label`.**\n *    Base UI has *two* label parts: `Select.Label` labels the whole control\n *    (like a field `<label>`), while `Select.GroupLabel` is the heading inside a\n *    `Select.Group`. shadcn's `SelectLabel` is the group heading, so it maps to\n *    `GroupLabel`. Base UI's control-level `Select.Label` is intentionally not\n *    re-exported — pair the trigger with the kit's own `Label` component instead.\n *    `Label` is a separate registry item (`registry/items/label.json`) and is\n *    not a `registryDependency` of `select`, so install it explicitly:\n *    `npx shadcn@latest add <registry-url>/r/label.json`.\n *\n *    **Labeling recipe.** Give the `Label` an `id` and the `SelectTrigger` its\n *    own `id`, then set `aria-labelledby=\"<label-id> <trigger-id>\"` on the\n *    trigger (referencing *both*). Pointing only at the external label drops\n *    the chosen value from the accessible name; adding the trigger's own id\n *    folds the `SelectValue` text (the current selection) back in, so a screen\n *    reader announces \"<label>, <selected value>\". `htmlFor`/`for` can't be\n *    used here — the trigger renders a `<button>`, not a labelable form field —\n *    which is why the association is `aria-labelledby`, not a wrapping/`for`\n *    `<label>`. The Select preview page uses this pattern on every example.\n * 2. **`SelectValue` shows the raw value unless `<Select>` gets an `items` prop.**\n *    Unlike Radix (where `SelectValue` mirrors the selected `SelectItem`'s text),\n *    Base UI's `Select.Value` renders the raw `value` by default. To display a\n *    friendly label, either pass `items` to `<Select>` (Root) — e.g.\n *    `items={[{ value: \"apple\", label: \"Apple\" }]}` — or pass a render function\n *    as `SelectValue`'s child: `<SelectValue>{(v) => labels[v]}</SelectValue>`.\n *    This is Base UI's model; the wrapper stays thin and does not paper over it.\n * 3. **`SelectTrigger` sizes follow the kit's Button scale, not shadcn's.**\n *    shadcn ships `sm`/`default` at h-8/h-9; this kit maps Fluent's field sizes\n *    onto the Button height scale instead — `sm` 24px (`h-6`), `default` 32px\n *    (`h-8`, matches `Input`), `lg` 40px (`h-10`) — surfaced as `data-size`.\n * 4. **`SelectContent` positions below the trigger (`alignItemWithTrigger=false`).**\n *    Base UI defaults to overlapping the trigger so the selected item's text lines\n *    up with the value (native-select behavior). A shadcn-style dropdown that opens\n *    beneath the field is the expected Fluent flyout, so this is forced off; the\n *    scroll arrows/`data-[side=none]` overlap edge cases go away with it.\n *\n * ## `\"use client\"` — required (integration-pass correction)\n * Every Base UI Select part module does carry its own `'use client'`\n * directive, so on that basis alone this wrapper could stay server-renderable\n * (same reasoning as `avatar.tsx`). But `CheckmarkRegular`/`ChevronDownRegular`/\n * `ChevronUpRegular` from `@fluentui/react-icons` break that: the package's\n * shared icon-sizing module (`createFluentIcon.styles.js`) calls `@griffel/\n * react`'s `__styles()` at module scope *without* its own `'use client'`\n * directive, even though `__styles` itself is client-only. Rendering any of\n * these icons from a Server Component pulls that module into the server's\n * RSC graph, and `next build` (Turbopack) fails collecting page data with\n * \"Attempted to call __styles() from the server but __styles is on the\n * client\" — reproduced against `@fluentui/react-icons@2.0.333` /\n * `@griffel/react@1.7.5`, and confirmed to affect every route that shares\n * Turbopack's chunk for these icons, not just this one. `\"use client\"` here\n * keeps the icon imports inside a client boundary so they're never evaluated\n * on the server. `checkbox.tsx` carries the same fix for the same reason.\n *\n * ## data-slot note\n * `Select` (Root) renders no DOM element of its own and its Base UI props type\n * is strict (no `data-*` passthrough), so it carries no `data-slot`. Every part\n * that renders an element does — `select-trigger`, `select-content`,\n * `select-item`, etc. — which is what tests/consumers hook onto.\n */\n\nfunction Select<Value, Multiple extends boolean | undefined = false>(\n  props: SelectPrimitive.Root.Props<Value, Multiple>\n) {\n  return <SelectPrimitive.Root {...props} />;\n}\n\nfunction SelectGroup({\n  className,\n  ...props\n}: ComponentProps<typeof SelectPrimitive.Group>) {\n  return (\n    <SelectPrimitive.Group\n      data-slot=\"select-group\"\n      className={cn(className)}\n      {...props}\n    />\n  );\n}\n\nfunction SelectValue({\n  className,\n  ...props\n}: ComponentProps<typeof SelectPrimitive.Value>) {\n  return (\n    <SelectPrimitive.Value\n      data-slot=\"select-value\"\n      className={cn(className)}\n      {...props}\n    />\n  );\n}\n\n/**\n * Trigger — Fluent field look, styled to match `Input` (h-8, rounded-md,\n * border-input, px-3, text-sm, flat at rest). Focus uses the sanctioned\n * per-field deviation from conventions §4: a 2px brand underline painted with\n * an inset box-shadow (no reflow) plus `border-primary`, and the `aria-invalid`\n * treatment declared *after* focus so an invalid+focused field shows the\n * destructive accent. The chevron is appended via `Select.Icon`; the trigger's\n * `[&_svg]` rules size it (`size-4`) and mute it (`text-muted-foreground`).\n */\nfunction SelectTrigger({\n  className,\n  children,\n  size = \"default\",\n  ...props\n}: ComponentProps<typeof SelectPrimitive.Trigger> & {\n  /** Fluent field sizes on the Button height scale — see divergence 3. */\n  size?: \"sm\" | \"default\" | \"lg\";\n}) {\n  return (\n    <SelectPrimitive.Trigger\n      data-slot=\"select-trigger\"\n      data-size={size}\n      className={cn(\n        // layout — Fluent field on the Button height scale (divergence 3);\n        // default is the 32px medium that matches Input. Resting bottom\n        // edge uses the darker NeutralStrokeAccessible (#616161) accent while\n        // the other sides stay border-input; focus (border-primary + inset\n        // underline) and aria-invalid (border-destructive) both override it.\n        \"flex w-full items-center justify-between gap-2 rounded-md border border-input border-b-stroke-accessible bg-background py-1 whitespace-nowrap\",\n        size === \"sm\" && \"h-6 px-2 text-xs\",\n        size === \"default\" && \"h-8 px-3 text-sm\",\n        size === \"lg\" && \"h-10 px-4 text-base\",\n        // placeholder text muted (Base UI sets data-placeholder when no value)\n        \"data-[placeholder]:text-muted-foreground\",\n        // keep a long value on one line, left-aligned\n        \"*:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:text-left\",\n        // icon defaults — chevron sized + muted unless overridden\n        \"[&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 [&_svg:not([class*='text-'])]:text-muted-foreground\",\n        // motion — color + box-shadow so the focus accent animates (§4)\n        \"outline-none transition-[color,box-shadow] duration-fast ease-ease\",\n        // disabled — opacity read; Base UI emits both `disabled` + `data-disabled`\n        \"disabled:pointer-events-none disabled:opacity-50 data-[disabled]:pointer-events-none data-[disabled]:opacity-50\",\n        // focus — Fluent bottom brand accent via inset box-shadow, no reflow (§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; after focus so it wins the border\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      {children}\n      <SelectPrimitive.Icon>\n        <ChevronDownRegular />\n      </SelectPrimitive.Icon>\n    </SelectPrimitive.Trigger>\n  );\n}\n\n/**\n * Content — the floating flyout: `Portal` → `Positioner` → `Popup`, with the\n * items in a scrollable `List` between hover-scroll arrows. Surface is\n * `bg-popover` + `border` + `shadow-16` (Fluent flyout elevation, conventions\n * §3.6), `rounded-md`, `min-w` matched to the trigger via Base UI's\n * `--anchor-width`. A subtle scale+fade open/close animation rides Base UI's\n * `data-starting-style`/`data-ending-style` hooks with token durations/easings.\n */\nfunction SelectContent({\n  className,\n  children,\n  sideOffset = 4,\n  align = \"start\",\n  side = \"bottom\",\n  ...props\n}: ComponentProps<typeof SelectPrimitive.Popup> &\n  Pick<\n    ComponentProps<typeof SelectPrimitive.Positioner>,\n    \"side\" | \"align\" | \"sideOffset\"\n  >) {\n  return (\n    <SelectPrimitive.Portal>\n      <SelectPrimitive.Positioner\n        data-slot=\"select-positioner\"\n        sideOffset={sideOffset}\n        align={align}\n        side={side}\n        alignItemWithTrigger={false}\n        className=\"z-50 outline-none\"\n      >\n        <SelectPrimitive.Popup\n          data-slot=\"select-content\"\n          className={cn(\n            \"relative min-w-[var(--anchor-width)] origin-[var(--transform-origin)] overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-16 outline-none\",\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          <SelectScrollUpButton />\n          <SelectPrimitive.List\n            data-slot=\"select-list\"\n            className=\"max-h-[var(--available-height)] overflow-y-auto overscroll-contain p-1\"\n          >\n            {children}\n          </SelectPrimitive.List>\n          <SelectScrollDownButton />\n        </SelectPrimitive.Popup>\n      </SelectPrimitive.Positioner>\n    </SelectPrimitive.Portal>\n  );\n}\n\n/**\n * Label — a heading for a `SelectGroup` (Base UI `Select.GroupLabel`), *not* a\n * control-level field label (divergence 1). Small muted caption, Fluent style.\n */\nfunction SelectLabel({\n  className,\n  ...props\n}: ComponentProps<typeof SelectPrimitive.GroupLabel>) {\n  return (\n    <SelectPrimitive.GroupLabel\n      data-slot=\"select-label\"\n      className={cn(\n        \"px-2 py-1.5 text-xs font-medium text-muted-foreground select-none\",\n        className\n      )}\n      {...props}\n    />\n  );\n}\n\n/**\n * Item — one option. Text via `ItemText`; the selected-state check\n * (`CheckmarkRegular`) is absolutely positioned on the right (shadcn placement)\n * inside `ItemIndicator`, which Base UI only mounts for the selected item.\n * `rounded-md` (4px) matches Fluent's `Corner-radius/List/Default`. Highlight\n * (keyboard focus or hover) uses `data-highlighted` → `bg-accent`\n * (`#f0f0f0`) `text-accent-foreground`; Fluent's list-hover token is `#f5f5f5`\n * (one grey step lighter), but the kit keeps `--accent` for token consistency\n * with every other hover surface — the difference is imperceptible on a 32px\n * row. Disabled items are muted + inert.\n */\nfunction SelectItem({\n  className,\n  children,\n  ...props\n}: ComponentProps<typeof SelectPrimitive.Item>) {\n  return (\n    <SelectPrimitive.Item\n      data-slot=\"select-item\"\n      className={cn(\n        // layout — Fluent 32px row, 4px list radius, px-2 with room on the\n        // right for the check\n        \"relative flex h-8 w-full cursor-default items-center rounded-md pr-8 pl-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        // icons that a consumer puts inside the item text\n        \"[&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4\",\n        className\n      )}\n      {...props}\n    >\n      <span className=\"absolute right-2 flex size-4 items-center justify-center\">\n        <SelectPrimitive.ItemIndicator>\n          <CheckmarkRegular className=\"size-4\" />\n        </SelectPrimitive.ItemIndicator>\n      </span>\n      <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>\n    </SelectPrimitive.Item>\n  );\n}\n\nfunction SelectSeparator({\n  className,\n  ...props\n}: ComponentProps<typeof SelectPrimitive.Separator>) {\n  return (\n    <SelectPrimitive.Separator\n      data-slot=\"select-separator\"\n      className={cn(\n        \"pointer-events-none -mx-1 my-1 h-px bg-border\",\n        className\n      )}\n      {...props}\n    />\n  );\n}\n\n/**\n * ScrollUpButton / ScrollDownButton — Base UI hover-scroll arrows that Base UI\n * only renders when the list overflows in that direction. Rendered as siblings\n * of the `List` inside `SelectContent`, so consumers don't place them manually\n * (shadcn parity — the export exists for API compatibility / manual use).\n */\nfunction SelectScrollUpButton({\n  className,\n  ...props\n}: ComponentProps<typeof SelectPrimitive.ScrollUpArrow>) {\n  return (\n    <SelectPrimitive.ScrollUpArrow\n      data-slot=\"select-scroll-up-button\"\n      className={cn(\n        \"flex cursor-default items-center justify-center py-1 text-muted-foreground\",\n        className\n      )}\n      {...props}\n    >\n      <ChevronUpRegular className=\"size-4\" />\n    </SelectPrimitive.ScrollUpArrow>\n  );\n}\n\nfunction SelectScrollDownButton({\n  className,\n  ...props\n}: ComponentProps<typeof SelectPrimitive.ScrollDownArrow>) {\n  return (\n    <SelectPrimitive.ScrollDownArrow\n      data-slot=\"select-scroll-down-button\"\n      className={cn(\n        \"flex cursor-default items-center justify-center py-1 text-muted-foreground\",\n        className\n      )}\n      {...props}\n    >\n      <ChevronDownRegular className=\"size-4\" />\n    </SelectPrimitive.ScrollDownArrow>\n  );\n}\n\nexport {\n  Select,\n  SelectGroup,\n  SelectValue,\n  SelectTrigger,\n  SelectContent,\n  SelectLabel,\n  SelectItem,\n  SelectSeparator,\n  SelectScrollUpButton,\n  SelectScrollDownButton,\n};\n"],"mappings":"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","names":[]}