@graundtech/fluent2-react-kit 0.5.1

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

@@ -0,0 +1,43 @@
+import * as react from 'react';
+import { ComponentProps } from 'react';
+
+/**
+ * Separator — Fluent 2-styled, shadcn-API separator.
+ *
+ * A thin 1px Fluent divider (`bg-border`) that separates content
+ * horizontally or vertically. Implemented natively with a plain `<div>` — no
+ * primitive is needed since the WAI-ARIA "separator" pattern
+ * (https://www.w3.org/WAI/ARIA/apg/patterns/separator/) is trivial: a role
+ * swap plus an orientation attribute.
+ *
+ * Stroke color — deliberate token-consistency deviation: Fluent's Divider uses
+ * its own stroke token (`#e0e0e0`, grey-88), one ramp step lighter than the
+ * generic `--border` (`#d1d1d1`, grey-82) this component reuses. The kit keeps
+ * `bg-border` on purpose: a divider sharing the exact border token used by
+ * inputs/cards is worth more than a one-step-lighter grey, and `--border` is
+ * intentionally NOT re-pointed globally to `#e0e0e0` (that would lighten every
+ * input/card border too). Net effect: the divider reads a hair more prominent
+ * than Fluent's spec — an accepted, single-step fidelity trade for token
+ * cohesion.
+ *
+ * ARIA:
+ * - `decorative` (default `true`) → `role="none"`, removing it from the
+ *   accessibility tree. `aria-orientation` is withheld in this case too —
+ *   ARIA forbids relying on global states/properties alongside `role="none"`.
+ * - non-decorative → `role="separator"`. `aria-orientation="vertical"` is
+ *   emitted only for the vertical case; horizontal is the implicit default
+ *   per the APG, so it is intentionally never set to `"horizontal"`.
+ *
+ * Sizing follows current shadcn: a single 1px stroke that fills the cross
+ * axis, switched by `data-orientation` selectors rather than a cva variant
+ * group (there is only one visual treatment, just two axes).
+ *
+ * Server-safe: no `"use client"`, no hooks — the React import is type-only,
+ * so the file can be dropped straight into an RSC tree.
+ */
+declare function Separator({ className, orientation, decorative, ...props }: ComponentProps<"div"> & {
+    orientation?: "horizontal" | "vertical";
+    decorative?: boolean;
+}): react.JSX.Element;
+
+export { Separator };

package/dist/components/ui/separator.js

@@ -0,0 +1,27 @@
+import { jsx } from "react/jsx-runtime";
+import { cn } from "../../lib/utils.js";
+function Separator({
+  className,
+  orientation = "horizontal",
+  decorative = true,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      role: decorative ? "none" : "separator",
+      "aria-orientation": !decorative && orientation === "vertical" ? "vertical" : void 0,
+      "data-slot": "separator",
+      "data-orientation": orientation,
+      className: cn(
+        "shrink-0 bg-border data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-px",
+        className
+      ),
+      ...props
+    }
+  );
+}
+export {
+  Separator
+};
+//# sourceMappingURL=separator.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/ui/separator.tsx"],"sourcesContent":["import type { ComponentProps } from \"react\";\n\nimport { cn } from \"../../lib/utils\";\n\n/**\n * Separator — Fluent 2-styled, shadcn-API separator.\n *\n * A thin 1px Fluent divider (`bg-border`) that separates content\n * horizontally or vertically. Implemented natively with a plain `<div>` — no\n * primitive is needed since the WAI-ARIA \"separator\" pattern\n * (https://www.w3.org/WAI/ARIA/apg/patterns/separator/) is trivial: a role\n * swap plus an orientation attribute.\n *\n * Stroke color — deliberate token-consistency deviation: Fluent's Divider uses\n * its own stroke token (`#e0e0e0`, grey-88), one ramp step lighter than the\n * generic `--border` (`#d1d1d1`, grey-82) this component reuses. The kit keeps\n * `bg-border` on purpose: a divider sharing the exact border token used by\n * inputs/cards is worth more than a one-step-lighter grey, and `--border` is\n * intentionally NOT re-pointed globally to `#e0e0e0` (that would lighten every\n * input/card border too). Net effect: the divider reads a hair more prominent\n * than Fluent's spec — an accepted, single-step fidelity trade for token\n * cohesion.\n *\n * ARIA:\n * - `decorative` (default `true`) → `role=\"none\"`, removing it from the\n *   accessibility tree. `aria-orientation` is withheld in this case too —\n *   ARIA forbids relying on global states/properties alongside `role=\"none\"`.\n * - non-decorative → `role=\"separator\"`. `aria-orientation=\"vertical\"` is\n *   emitted only for the vertical case; horizontal is the implicit default\n *   per the APG, so it is intentionally never set to `\"horizontal\"`.\n *\n * Sizing follows current shadcn: a single 1px stroke that fills the cross\n * axis, switched by `data-orientation` selectors rather than a cva variant\n * group (there is only one visual treatment, just two axes).\n *\n * Server-safe: no `\"use client\"`, no hooks — the React import is type-only,\n * so the file can be dropped straight into an RSC tree.\n */\nfunction Separator({\n  className,\n  orientation = \"horizontal\",\n  decorative = true,\n  ...props\n}: ComponentProps<\"div\"> & {\n  orientation?: \"horizontal\" | \"vertical\";\n  decorative?: boolean;\n}) {\n  return (\n    <div\n      role={decorative ? \"none\" : \"separator\"}\n      aria-orientation={\n        !decorative && orientation === \"vertical\" ? \"vertical\" : undefined\n      }\n      data-slot=\"separator\"\n      data-orientation={orientation}\n      className={cn(\n        \"shrink-0 bg-border data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-px\",\n        className\n      )}\n      {...props}\n    />\n  );\n}\n\nexport { Separator };\n"],"mappings":"AAgDI;AA9CJ,SAAS,UAAU;AAoCnB,SAAS,UAAU;AAAA,EACjB;AAAA,EACA,cAAc;AAAA,EACd,aAAa;AAAA,EACb,GAAG;AACL,GAGG;AACD,SACE;AAAA,IAAC;AAAA;AAAA,MACC,MAAM,aAAa,SAAS;AAAA,MAC5B,oBACE,CAAC,cAAc,gBAAgB,aAAa,aAAa;AAAA,MAE3D,aAAU;AAAA,MACV,oBAAkB;AAAA,MAClB,WAAW;AAAA,QACT;AAAA,QACA;AAAA,MACF;AAAA,MACC,GAAG;AAAA;AAAA,EACN;AAEJ;","names":[]}

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

@@ -0,0 +1,81 @@
+import * as react from 'react';
+import { ComponentProps } from 'react';
+
+/**
+ * Skeleton — Fluent 2-styled, shadcn-API loading placeholder.
+ *
+ * A single `<div>` with no `cva` table (conventions §2 allows this for
+ * leaf/static components — mirrors `Separator`): there is one visual
+ * treatment, and every shape variation (line, avatar circle, button block,
+ * card) is just a `className` override on width/height/radius, not a prop.
+ *
+ * **Fill color — `bg-secondary`, not `bg-accent`.** Current shadcn ships
+ * `bg-accent animate-pulse rounded-md`
+ * (https://ui.shadcn.com/docs/components/skeleton); this kit deliberately
+ * swaps in `bg-secondary` after weighing all three themes against `tokens.css`:
+ * - Dark theme: `--accent` and `--secondary` are the *same* hex (`#333333`,
+ *   grey[20]) — no visual difference at all.
+ * - Light theme: `--secondary` is grey[96] (`#f5f5f5`) vs. `--accent`'s
+ *   grey[94] (`#f0f0f0`) — a hair lighter, i.e. marginally less contrast
+ *   against the white `--background`. The delta (96 vs 94) is negligible; a
+ *   skeleton still reads clearly as "content pending" at either value.
+ * - High contrast (`.high-contrast`): the deciding case. `--accent` maps to
+ *   the system `Highlight` keyword (selection semantics), so an inert
+ *   placeholder painted in `bg-accent` lights up in the OS *selection* color
+ *   and reads as "this is selected" — wrong. `--secondary` maps to
+ *   `ButtonFace`, a neutral surface, so `bg-secondary` stays a plain neutral
+ *   block in HC. A component can't theme-scope its own class (there's no
+ *   `high-contrast:` variant to swap the fill only in that theme), so the
+ *   right call is the token that stays neutral in *all three* themes —
+ *   `--secondary`, not `--accent`.
+ * `bg-muted` was also considered and rejected: it matches `--secondary` in
+ * light mode but drops to grey[12] (`#1f1f1f`) in dark mode — visibly
+ * dimmer than the `#242424` `--background` it sits on, i.e. *less* visible
+ * exactly where contrast matters most.
+ *
+ * **Animation — the Fluent wave shimmer (`animate-shimmer`).** Fluent 2's
+ * Skeleton uses a moving gradient "wave" sweep
+ * (https://storybooks.fluentui.dev/react/?path=/docs/components-skeleton--docs),
+ * not shadcn's opacity pulse. The keyframes live in the token layer
+ * (`tokens.css` `--animate-shimmer`, sweeping `background-position` across a
+ * 200%-wide gradient); this file paints the gradient — `--secondary` base
+ * with an `--input`-grey crest, both theme-aware (the secondary/accent pair
+ * was rejected for the crest because those two are the SAME hex in dark
+ * mode, which would erase the wave exactly where it's hardest to see).
+ *
+ * **Reduced motion — `motion-reduce:animate-none`, full stop (not a slowed
+ * animation).** This deliberately *contrasts* with `Spinner`, which slows to
+ * `animation-duration: 3s` under `prefers-reduced-motion` instead of
+ * stopping outright. The difference is what each animation communicates:
+ * `Spinner`'s spin is the *only* signal that a background operation is still
+ * in progress — freezing it would erase that information for a
+ * reduced-motion user (its `role="status"` region only helps assistive tech,
+ * not sighted users). `Skeleton` carries no such information: it is a static
+ * placeholder shape whether or not it pulses, and content either has loaded
+ * or hasn't — nothing is lost by holding it still, and a persistently
+ * animating region is exactly what `prefers-reduced-motion` asks apps to
+ * avoid. `motion-reduce:animate-none` is a plain Tailwind utility, not a
+ * `duration-*` token, so it isn't covered by the automatic duration collapse
+ * `tokens.css` already applies — it has to be declared per animated
+ * component (see `Spinner`'s doc comment for the same note).
+ *
+ * **Accessibility — no `aria-hidden` here, by design.** A lone `<Skeleton>`
+ * is inert markup (a styled `<div>`, no text, no role) that assistive tech
+ * already has nothing to announce for, so forcing `aria-hidden="true"` on
+ * every instance would be redundant — and current shadcn doesn't do it
+ * either. Instead, wrap the *loading region* (the parent containing one or
+ * more `Skeleton`s standing in for real content) in `aria-busy="true"` —
+ * optionally with `aria-live="polite"` if the region should announce when
+ * loading completes and real content replaces the skeletons. That's a
+ * consumer-side decision (it depends on what the region becomes once
+ * loaded), so it isn't baked into this component. Verified with axe: a
+ * skeleton "card" composition (avatar circle + text lines) inside an
+ * `aria-busy="true"` wrapper produces no violations — see
+ * `skeleton.test.tsx`.
+ *
+ * Server-safe: no `"use client"`, no hooks — the React import is type-only,
+ * so this drops straight into an RSC tree.
+ */
+declare function Skeleton({ className, ...props }: ComponentProps<"div">): react.JSX.Element;
+
+export { Skeleton };

package/dist/components/ui/skeleton.js

@@ -0,0 +1,24 @@
+import { jsx } from "react/jsx-runtime";
+import { cn } from "../../lib/utils.js";
+function Skeleton({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-slot": "skeleton",
+      className: cn(
+        // Fluent wave: a 200%-wide gradient (secondary base, input-grey crest)
+        // swept by the token-layer shimmer keyframes. bg-secondary stays as
+        // the fallback fill (and the forced-colors surface, where gradients
+        // are stripped by forced-color-adjust).
+        "animate-shimmer rounded-md bg-secondary motion-reduce:animate-none",
+        "bg-[linear-gradient(90deg,var(--secondary)_25%,var(--input)_50%,var(--secondary)_75%)] bg-[length:200%_100%]",
+        className
+      ),
+      ...props
+    }
+  );
+}
+export {
+  Skeleton
+};
+//# sourceMappingURL=skeleton.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/ui/skeleton.tsx"],"sourcesContent":["import type { ComponentProps } from \"react\";\n\nimport { cn } from \"../../lib/utils\";\n\n/**\n * Skeleton — Fluent 2-styled, shadcn-API loading placeholder.\n *\n * A single `<div>` with no `cva` table (conventions §2 allows this for\n * leaf/static components — mirrors `Separator`): there is one visual\n * treatment, and every shape variation (line, avatar circle, button block,\n * card) is just a `className` override on width/height/radius, not a prop.\n *\n * **Fill color — `bg-secondary`, not `bg-accent`.** Current shadcn ships\n * `bg-accent animate-pulse rounded-md`\n * (https://ui.shadcn.com/docs/components/skeleton); this kit deliberately\n * swaps in `bg-secondary` after weighing all three themes against `tokens.css`:\n * - Dark theme: `--accent` and `--secondary` are the *same* hex (`#333333`,\n *   grey[20]) — no visual difference at all.\n * - Light theme: `--secondary` is grey[96] (`#f5f5f5`) vs. `--accent`'s\n *   grey[94] (`#f0f0f0`) — a hair lighter, i.e. marginally less contrast\n *   against the white `--background`. The delta (96 vs 94) is negligible; a\n *   skeleton still reads clearly as \"content pending\" at either value.\n * - High contrast (`.high-contrast`): the deciding case. `--accent` maps to\n *   the system `Highlight` keyword (selection semantics), so an inert\n *   placeholder painted in `bg-accent` lights up in the OS *selection* color\n *   and reads as \"this is selected\" — wrong. `--secondary` maps to\n *   `ButtonFace`, a neutral surface, so `bg-secondary` stays a plain neutral\n *   block in HC. A component can't theme-scope its own class (there's no\n *   `high-contrast:` variant to swap the fill only in that theme), so the\n *   right call is the token that stays neutral in *all three* themes —\n *   `--secondary`, not `--accent`.\n * `bg-muted` was also considered and rejected: it matches `--secondary` in\n * light mode but drops to grey[12] (`#1f1f1f`) in dark mode — visibly\n * dimmer than the `#242424` `--background` it sits on, i.e. *less* visible\n * exactly where contrast matters most.\n *\n * **Animation — the Fluent wave shimmer (`animate-shimmer`).** Fluent 2's\n * Skeleton uses a moving gradient \"wave\" sweep\n * (https://storybooks.fluentui.dev/react/?path=/docs/components-skeleton--docs),\n * not shadcn's opacity pulse. The keyframes live in the token layer\n * (`tokens.css` `--animate-shimmer`, sweeping `background-position` across a\n * 200%-wide gradient); this file paints the gradient — `--secondary` base\n * with an `--input`-grey crest, both theme-aware (the secondary/accent pair\n * was rejected for the crest because those two are the SAME hex in dark\n * mode, which would erase the wave exactly where it's hardest to see).\n *\n * **Reduced motion — `motion-reduce:animate-none`, full stop (not a slowed\n * animation).** This deliberately *contrasts* with `Spinner`, which slows to\n * `animation-duration: 3s` under `prefers-reduced-motion` instead of\n * stopping outright. The difference is what each animation communicates:\n * `Spinner`'s spin is the *only* signal that a background operation is still\n * in progress — freezing it would erase that information for a\n * reduced-motion user (its `role=\"status\"` region only helps assistive tech,\n * not sighted users). `Skeleton` carries no such information: it is a static\n * placeholder shape whether or not it pulses, and content either has loaded\n * or hasn't — nothing is lost by holding it still, and a persistently\n * animating region is exactly what `prefers-reduced-motion` asks apps to\n * avoid. `motion-reduce:animate-none` is a plain Tailwind utility, not a\n * `duration-*` token, so it isn't covered by the automatic duration collapse\n * `tokens.css` already applies — it has to be declared per animated\n * component (see `Spinner`'s doc comment for the same note).\n *\n * **Accessibility — no `aria-hidden` here, by design.** A lone `<Skeleton>`\n * is inert markup (a styled `<div>`, no text, no role) that assistive tech\n * already has nothing to announce for, so forcing `aria-hidden=\"true\"` on\n * every instance would be redundant — and current shadcn doesn't do it\n * either. Instead, wrap the *loading region* (the parent containing one or\n * more `Skeleton`s standing in for real content) in `aria-busy=\"true\"` —\n * optionally with `aria-live=\"polite\"` if the region should announce when\n * loading completes and real content replaces the skeletons. That's a\n * consumer-side decision (it depends on what the region becomes once\n * loaded), so it isn't baked into this component. Verified with axe: a\n * skeleton \"card\" composition (avatar circle + text lines) inside an\n * `aria-busy=\"true\"` wrapper produces no violations — see\n * `skeleton.test.tsx`.\n *\n * Server-safe: no `\"use client\"`, no hooks — the React import is type-only,\n * so this drops straight into an RSC tree.\n */\nfunction Skeleton({ className, ...props }: ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"skeleton\"\n      className={cn(\n        // Fluent wave: a 200%-wide gradient (secondary base, input-grey crest)\n        // swept by the token-layer shimmer keyframes. bg-secondary stays as\n        // the fallback fill (and the forced-colors surface, where gradients\n        // are stripped by forced-color-adjust).\n        \"animate-shimmer rounded-md bg-secondary motion-reduce:animate-none\",\n        \"bg-[linear-gradient(90deg,var(--secondary)_25%,var(--input)_50%,var(--secondary)_75%)] bg-[length:200%_100%]\",\n        className\n      )}\n      {...props}\n    />\n  );\n}\n\nexport { Skeleton };\n"],"mappings":"AAiFI;AA/EJ,SAAS,UAAU;AA6EnB,SAAS,SAAS,EAAE,WAAW,GAAG,MAAM,GAA0B;AAChE,SACE;AAAA,IAAC;AAAA;AAAA,MACC,aAAU;AAAA,MACV,WAAW;AAAA;AAAA;AAAA;AAAA;AAAA,QAKT;AAAA,QACA;AAAA,QACA;AAAA,MACF;AAAA,MACC,GAAG;AAAA;AAAA,EACN;AAEJ;","names":[]}

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

@@ -0,0 +1,56 @@
+import * as react from 'react';
+import { ComponentProps } from 'react';
+import * as class_variance_authority_types from 'class-variance-authority/types';
+import { VariantProps } from 'class-variance-authority';
+
+/**
+ * Spinner — Fluent 2-styled, shadcn-API loading indicator.
+ *
+ * Fluent 2's spinner is a rotating brand-colored ARC (not a full ring). It is
+ * drawn as an inline SVG: a faint full-circle "track" plus a shorter,
+ * round-capped arc in `text-primary` (brand). The whole SVG spins via
+ * `animate-spin`; because only the arc has visible stroke, rotating the
+ * (rotationally symmetric) track alongside it is visually inert — only the arc
+ * appears to move.
+ *
+ * Track color: Fluent's Primary spinner track is `BrandStroke2Contrast.Rest`
+ * = `#b4d6fa`, which is this kit's `--brand-140` exactly — a pale *blue* tint,
+ * not the neutral grey an earlier version used. So the track is
+ * `text-brand-140`. Dark: the Figma file had only a light frame, so the dark
+ * pairing is derived — `dark:text-brand-40` (a low, subtle brand stop) keeps
+ * the track a faint blue that reads clearly *behind* the arc without colliding
+ * with the arc's own dark color (`--primary` = `brand-70` in dark).
+ *
+ * Sizes map 1:1 onto Tailwind's `size-*` scale so the numbers in the spec
+ * line up exactly: sm=16px (`size-4`), default=24px (`size-6`), lg=32px
+ * (`size-8`), xl=40px (`size-10`).
+ *
+ * Labeled spinner: when `label` is set, Fluent renders visible text next to
+ * the glyph (default `labelPosition="after"`) — reproduced here as
+ * `text-sm text-foreground` to the right of the arc via `gap-2`. The label
+ * text also becomes the accessible name (see a11y notes on `Spinner` below).
+ *
+ * Reduced motion: `animate-spin` is a CSS animation, not a token-driven
+ * transition, so it does not get the automatic duration collapse tokens.css
+ * applies to `duration-*` utilities. Per spec we deliberately slow rather than
+ * stop the spin under `prefers-reduced-motion` — `motion-reduce:[animation-duration:3s]`
+ * — because hiding the animation entirely would remove the only visual signal
+ * that progress is still happening (the wrapper's `role="status"` covers the
+ * non-visual signal either way).
+ *
+ * Server-safe: no `"use client"`, no hooks/handlers — the React import is
+ * type-only and the animation is pure CSS, so this drops straight into an RSC
+ * tree.
+ */
+declare const spinnerVariants: (props?: ({
+    size?: "default" | "sm" | "lg" | "xl" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+declare function Spinner({ className, size, label, "aria-label": ariaLabel, ...props }: ComponentProps<"span"> & VariantProps<typeof spinnerVariants> & {
+    /**
+     * Visible text rendered beside the arc (Fluent's "labeled spinner").
+     * When set, this text is also the element's accessible name.
+     */
+    label?: string;
+}): react.JSX.Element;
+
+export { Spinner, spinnerVariants };

package/dist/components/ui/spinner.js

@@ -0,0 +1,83 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { cva } from "class-variance-authority";
+import { cn } from "../../lib/utils.js";
+const spinnerVariants = cva(
+  ["shrink-0", "animate-spin", "motion-reduce:[animation-duration:3s]"],
+  {
+    variants: {
+      size: {
+        sm: "size-4",
+        default: "size-6",
+        lg: "size-8",
+        xl: "size-10"
+      }
+    },
+    defaultVariants: {
+      size: "default"
+    }
+  }
+);
+function Spinner({
+  className,
+  size = "default",
+  label,
+  "aria-label": ariaLabel,
+  ...props
+}) {
+  const accessibleName = label || ariaLabel || "Loading";
+  return /* @__PURE__ */ jsxs(
+    "span",
+    {
+      role: "status",
+      "aria-label": accessibleName,
+      "data-slot": "spinner",
+      "data-size": size,
+      className: cn("inline-flex items-center gap-2", className),
+      ...props,
+      children: [
+        /* @__PURE__ */ jsxs(
+          "svg",
+          {
+            viewBox: "0 0 16 16",
+            fill: "none",
+            "aria-hidden": "true",
+            className: spinnerVariants({ size }),
+            children: [
+              /* @__PURE__ */ jsx(
+                "circle",
+                {
+                  cx: "8",
+                  cy: "8",
+                  r: "7",
+                  stroke: "currentColor",
+                  strokeWidth: "2",
+                  className: "text-brand-140 dark:text-brand-40"
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                "circle",
+                {
+                  cx: "8",
+                  cy: "8",
+                  r: "7",
+                  stroke: "currentColor",
+                  strokeWidth: "2",
+                  strokeLinecap: "round",
+                  pathLength: "100",
+                  strokeDasharray: "28 72",
+                  className: "text-primary"
+                }
+              )
+            ]
+          }
+        ),
+        label ? /* @__PURE__ */ jsx("span", { className: "text-sm text-foreground", children: label }) : null
+      ]
+    }
+  );
+}
+export {
+  Spinner,
+  spinnerVariants
+};
+//# sourceMappingURL=spinner.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/ui/spinner.tsx"],"sourcesContent":["import { cva, type VariantProps } from \"class-variance-authority\";\nimport type { ComponentProps } from \"react\";\n\nimport { cn } from \"../../lib/utils\";\n\n/**\n * Spinner — Fluent 2-styled, shadcn-API loading indicator.\n *\n * Fluent 2's spinner is a rotating brand-colored ARC (not a full ring). It is\n * drawn as an inline SVG: a faint full-circle \"track\" plus a shorter,\n * round-capped arc in `text-primary` (brand). The whole SVG spins via\n * `animate-spin`; because only the arc has visible stroke, rotating the\n * (rotationally symmetric) track alongside it is visually inert — only the arc\n * appears to move.\n *\n * Track color: Fluent's Primary spinner track is `BrandStroke2Contrast.Rest`\n * = `#b4d6fa`, which is this kit's `--brand-140` exactly — a pale *blue* tint,\n * not the neutral grey an earlier version used. So the track is\n * `text-brand-140`. Dark: the Figma file had only a light frame, so the dark\n * pairing is derived — `dark:text-brand-40` (a low, subtle brand stop) keeps\n * the track a faint blue that reads clearly *behind* the arc without colliding\n * with the arc's own dark color (`--primary` = `brand-70` in dark).\n *\n * Sizes map 1:1 onto Tailwind's `size-*` scale so the numbers in the spec\n * line up exactly: sm=16px (`size-4`), default=24px (`size-6`), lg=32px\n * (`size-8`), xl=40px (`size-10`).\n *\n * Labeled spinner: when `label` is set, Fluent renders visible text next to\n * the glyph (default `labelPosition=\"after\"`) — reproduced here as\n * `text-sm text-foreground` to the right of the arc via `gap-2`. The label\n * text also becomes the accessible name (see a11y notes on `Spinner` below).\n *\n * Reduced motion: `animate-spin` is a CSS animation, not a token-driven\n * transition, so it does not get the automatic duration collapse tokens.css\n * applies to `duration-*` utilities. Per spec we deliberately slow rather than\n * stop the spin under `prefers-reduced-motion` — `motion-reduce:[animation-duration:3s]`\n * — because hiding the animation entirely would remove the only visual signal\n * that progress is still happening (the wrapper's `role=\"status\"` covers the\n * non-visual signal either way).\n *\n * Server-safe: no `\"use client\"`, no hooks/handlers — the React import is\n * type-only and the animation is pure CSS, so this drops straight into an RSC\n * tree.\n */\nconst spinnerVariants = cva(\n  [\"shrink-0\", \"animate-spin\", \"motion-reduce:[animation-duration:3s]\"],\n  {\n    variants: {\n      size: {\n        sm: \"size-4\",\n        default: \"size-6\",\n        lg: \"size-8\",\n        xl: \"size-10\",\n      },\n    },\n    defaultVariants: {\n      size: \"default\",\n    },\n  }\n);\n\nfunction Spinner({\n  className,\n  size = \"default\",\n  label,\n  \"aria-label\": ariaLabel,\n  ...props\n}: ComponentProps<\"span\"> &\n  VariantProps<typeof spinnerVariants> & {\n    /**\n     * Visible text rendered beside the arc (Fluent's \"labeled spinner\").\n     * When set, this text is also the element's accessible name.\n     */\n    label?: string;\n  }) {\n  // Accessible name precedence: visible label > explicit aria-label override\n  // > default \"Loading\". `aria-label` is pulled out of the rest spread so it\n  // can't be set twice on the root element. Use `||` (not `??`) so an *empty*\n  // string falls through to the next option: an empty `aria-label` is ignored\n  // by the accessible-name computation, which would leave the role=status\n  // region unnamed — `label=\"\"` must still resolve to \"Loading\".\n  const accessibleName = label || ariaLabel || \"Loading\";\n\n  return (\n    <span\n      role=\"status\"\n      aria-label={accessibleName}\n      data-slot=\"spinner\"\n      data-size={size}\n      className={cn(\"inline-flex items-center gap-2\", className)}\n      {...props}\n    >\n      <svg\n        viewBox=\"0 0 16 16\"\n        fill=\"none\"\n        aria-hidden=\"true\"\n        className={spinnerVariants({ size })}\n      >\n        {/* faint full-circle track — Fluent BrandStroke2Contrast (#b4d6fa =\n            brand-140); dark derived to a low brand stop (see doc comment) */}\n        <circle\n          cx=\"8\"\n          cy=\"8\"\n          r=\"7\"\n          stroke=\"currentColor\"\n          strokeWidth=\"2\"\n          className=\"text-brand-140 dark:text-brand-40\"\n        />\n        {/* rotating brand arc — ~100° of the circle, round-capped */}\n        <circle\n          cx=\"8\"\n          cy=\"8\"\n          r=\"7\"\n          stroke=\"currentColor\"\n          strokeWidth=\"2\"\n          strokeLinecap=\"round\"\n          pathLength=\"100\"\n          strokeDasharray=\"28 72\"\n          className=\"text-primary\"\n        />\n      </svg>\n      {label ? <span className=\"text-sm text-foreground\">{label}</span> : null}\n    </span>\n  );\n}\n\nexport { Spinner, spinnerVariants };\n"],"mappings":"AA4FM,SAQE,KARF;AA5FN,SAAS,WAA8B;AAGvC,SAAS,UAAU;AAyCnB,MAAM,kBAAkB;AAAA,EACtB,CAAC,YAAY,gBAAgB,uCAAuC;AAAA,EACpE;AAAA,IACE,UAAU;AAAA,MACR,MAAM;AAAA,QACJ,IAAI;AAAA,QACJ,SAAS;AAAA,QACT,IAAI;AAAA,QACJ,IAAI;AAAA,MACN;AAAA,IACF;AAAA,IACA,iBAAiB;AAAA,MACf,MAAM;AAAA,IACR;AAAA,EACF;AACF;AAEA,SAAS,QAAQ;AAAA,EACf;AAAA,EACA,OAAO;AAAA,EACP;AAAA,EACA,cAAc;AAAA,EACd,GAAG;AACL,GAOK;AAOH,QAAM,iBAAiB,SAAS,aAAa;AAE7C,SACE;AAAA,IAAC;AAAA;AAAA,MACC,MAAK;AAAA,MACL,cAAY;AAAA,MACZ,aAAU;AAAA,MACV,aAAW;AAAA,MACX,WAAW,GAAG,kCAAkC,SAAS;AAAA,MACxD,GAAG;AAAA,MAEJ;AAAA;AAAA,UAAC;AAAA;AAAA,YACC,SAAQ;AAAA,YACR,MAAK;AAAA,YACL,eAAY;AAAA,YACZ,WAAW,gBAAgB,EAAE,KAAK,CAAC;AAAA,YAInC;AAAA;AAAA,gBAAC;AAAA;AAAA,kBACC,IAAG;AAAA,kBACH,IAAG;AAAA,kBACH,GAAE;AAAA,kBACF,QAAO;AAAA,kBACP,aAAY;AAAA,kBACZ,WAAU;AAAA;AAAA,cACZ;AAAA,cAEA;AAAA,gBAAC;AAAA;AAAA,kBACC,IAAG;AAAA,kBACH,IAAG;AAAA,kBACH,GAAE;AAAA,kBACF,QAAO;AAAA,kBACP,aAAY;AAAA,kBACZ,eAAc;AAAA,kBACd,YAAW;AAAA,kBACX,iBAAgB;AAAA,kBAChB,WAAU;AAAA;AAAA,cACZ;AAAA;AAAA;AAAA,QACF;AAAA,QACC,QAAQ,oBAAC,UAAK,WAAU,2BAA2B,iBAAM,IAAU;AAAA;AAAA;AAAA,EACtE;AAEJ;","names":[]}

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

@@ -0,0 +1,60 @@
+import * as react from 'react';
+import { ComponentProps } from 'react';
+import { Switch as Switch$1 } from '@base-ui/react/switch';
+
+/**
+ * Switch — Fluent 2-styled, shadcn-API on/off toggle.
+ *
+ * This is a Base UI case (conventions §9): checked/unchecked state, the
+ * hidden `<input type="checkbox">` + form bridge, and the `role="switch"` +
+ * `aria-checked` wiring are genuine interactive behavior plain markup can't
+ * express, so this wraps `@base-ui/react/switch`'s `Switch.Root`/
+ * `Switch.Thumb` (imported as the `Switch` namespace from the
+ * `@base-ui/react/switch` subpath — that module is literally
+ * `export * as Switch from "./index.parts.js"`, matching Avatar's precedent)
+ * instead of a raw `<button>`/`<span>` pair. `Switch.Root` renders a `<span
+ * role="switch">` (not a native `<button>`/`<input>`) plus a visually-hidden
+ * `<input type="checkbox">` for form submission.
+ *
+ * `"use client"` is intentionally omitted, same reasoning as `avatar.tsx`:
+ * `SwitchRoot`/`SwitchThumb` each carry their own `'use client'` directive at
+ * the source level (verified in the compiled package output under
+ * `@base-ui/react/switch/root/SwitchRoot.mjs` and `.../thumb/SwitchThumb.mjs`),
+ * so they are already client boundaries on their own. This wrapper has no
+ * hooks/handlers of its own — it only forwards props into those parts — so a
+ * Server Component tree can render it unchanged (a Server Component may
+ * render an already-client child without re-declaring the directive itself).
+ * Confirmed via `pnpm typecheck` + the test suite; add the directive here
+ * only if that stops holding true.
+ *
+ * Aesthetics follow Fluent 2's Toggle Switch (verified against the live
+ * Storybook at storybooks.fluentui.dev, DOM-inspected directly since the
+ * docs page itself carries no static spec text): a 40x20px (`h-5 w-10`) pill
+ * track with a circular thumb — Fluent's own thumb measures ~18px against an
+ * 18px content box (nearly flush); this kit intentionally uses the smaller
+ * 14px (`size-3.5`) thumb specified for this component, leaving a visible
+ * ~2px gap, which reads cleanly at this track size. Fluent's *unchecked*
+ * track is outlined + transparent (measured: 1px solid `#616161`, background
+ * transparent) — NOT gray-filled like shadcn's default Radix implementation
+ * (`data-[state=unchecked]:bg-input`). This kit now binds that outline to the
+ * `NeutralStrokeAccessible` ramp (`border-stroke-accessible` = `#616161` rest,
+ * `#575757` hover, `#4d4d4d` pressed): spec-true to the measured Fluent value,
+ * so this is no longer the earlier `border-input` (`#d1d1d1`) substitution —
+ * that documented deviation is retired. The *checked* track measured exactly
+ * `#0f6cbd` — this kit's `--primary`/`bg-primary` token — with a white thumb
+ * (`#ffffff`, this kit's `--primary-foreground` token in both themes); on
+ * hover/press the on-track steps through Fluent's `CompoundBrandBackground`
+ * (border+fill `brand-70`/`brand-60`; dark hover `brand-80`), mirroring
+ * Button's per-theme brand ramp (conventions §4).
+ *
+ * The prop surface (`Switch`, `checked`/`defaultChecked`/`onCheckedChange`,
+ * no `size` prop) follows the classic shadcn/ui switch API. Note Base UI's
+ * state data-attributes differ from Radix's: it emits presence-only
+ * `data-checked`/`data-unchecked` (and `data-disabled`/`data-readonly`/
+ * `data-required`), not Radix's `data-state="checked" | "unchecked"` — the
+ * classes below target Base UI's actual output via Tailwind's presence-based
+ * `data-[checked]:` variant.
+ */
+declare function Switch({ className, ...props }: ComponentProps<typeof Switch$1.Root>): react.JSX.Element;
+
+export { Switch };

package/dist/components/ui/switch.js

@@ -0,0 +1,63 @@
+import { jsx } from "react/jsx-runtime";
+import { Switch as SwitchPrimitive } from "@base-ui/react/switch";
+import { cn } from "../../lib/utils.js";
+function Switch({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    SwitchPrimitive.Root,
+    {
+      "data-slot": "switch",
+      className: cn(
+        // layout — Fluent medium toggle: 40x20 pill track, thumb centered via flex
+        "inline-flex h-5 w-10 shrink-0 cursor-pointer items-center rounded-full border px-0.5",
+        // motion — border/bg color transition on check/uncheck
+        "outline-none transition-colors duration-fast ease-ease",
+        // off (unchecked) — Fluent's outlined/transparent track, bound to the
+        // NeutralStrokeAccessible ramp (spec-true measured #616161 rest ->
+        // #575757 hover -> #4d4d4d pressed), see file header.
+        "border-stroke-accessible bg-transparent hover:border-stroke-accessible-hover active:border-stroke-accessible-pressed",
+        // on (checked) — brand fill (Fluent CompoundBrandBackground), stepping
+        // border+fill through Hover/Pressed; dark hover brightens to brand-80.
+        // The data-[checked]:hover/active selectors outrank the neutral
+        // hover/active border by specificity so the on-track stays brand.
+        "data-[checked]:border-primary data-[checked]:bg-primary 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",
+        // focus — Fluent double-stroke approximation (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); harmless
+        // unless the caller pairs this with a Field/validation integration
+        "aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40",
+        // disabled — opacity read (conventions §4), keyed off Base UI's
+        // `data-disabled` rather than the CSS `disabled:` pseudo-class: this
+        // control renders a <span role="switch">, not a native
+        // <button>/<input>, so `:disabled` never matches it.
+        "data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+        className
+      ),
+      ...props,
+      children: /* @__PURE__ */ jsx(
+        SwitchPrimitive.Thumb,
+        {
+          "data-slot": "switch-thumb",
+          className: cn(
+            "pointer-events-none block size-3.5 rounded-full",
+            "transition-transform duration-fast ease-ease",
+            // off — neutral thumb, matches Fluent's measured `#616161`
+            "bg-muted-foreground",
+            // on — white thumb via the `primary-foreground` token (`#ffffff`
+            // in both themes) rather than a literal `bg-white`, per
+            // conventions §3.7 (never hardcode a color). Travel distance is
+            // the track's content-box width (40 - 2×1px border - 2×2px
+            // padding = 34px) minus the 14px thumb = 20px = `translate-x-5`.
+            "data-[checked]:translate-x-5 data-[checked]:bg-primary-foreground"
+          )
+        }
+      )
+    }
+  );
+}
+export {
+  Switch
+};
+//# sourceMappingURL=switch.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/ui/switch.tsx"],"sourcesContent":["import { Switch as SwitchPrimitive } from \"@base-ui/react/switch\";\nimport type { ComponentProps } from \"react\";\n\nimport { cn } from \"../../lib/utils\";\n\n/**\n * Switch — Fluent 2-styled, shadcn-API on/off toggle.\n *\n * This is a Base UI case (conventions §9): checked/unchecked state, the\n * hidden `<input type=\"checkbox\">` + form bridge, and the `role=\"switch\"` +\n * `aria-checked` wiring are genuine interactive behavior plain markup can't\n * express, so this wraps `@base-ui/react/switch`'s `Switch.Root`/\n * `Switch.Thumb` (imported as the `Switch` namespace from the\n * `@base-ui/react/switch` subpath — that module is literally\n * `export * as Switch from \"./index.parts.js\"`, matching Avatar's precedent)\n * instead of a raw `<button>`/`<span>` pair. `Switch.Root` renders a `<span\n * role=\"switch\">` (not a native `<button>`/`<input>`) plus a visually-hidden\n * `<input type=\"checkbox\">` for form submission.\n *\n * `\"use client\"` is intentionally omitted, same reasoning as `avatar.tsx`:\n * `SwitchRoot`/`SwitchThumb` each carry their own `'use client'` directive at\n * the source level (verified in the compiled package output under\n * `@base-ui/react/switch/root/SwitchRoot.mjs` and `.../thumb/SwitchThumb.mjs`),\n * so they are already client boundaries on their own. This wrapper has no\n * hooks/handlers of its own — it only forwards props into those parts — so a\n * Server Component tree can render it unchanged (a Server Component may\n * render an already-client child without re-declaring the directive itself).\n * Confirmed via `pnpm typecheck` + the test suite; add the directive here\n * only if that stops holding true.\n *\n * Aesthetics follow Fluent 2's Toggle Switch (verified against the live\n * Storybook at storybooks.fluentui.dev, DOM-inspected directly since the\n * docs page itself carries no static spec text): a 40x20px (`h-5 w-10`) pill\n * track with a circular thumb — Fluent's own thumb measures ~18px against an\n * 18px content box (nearly flush); this kit intentionally uses the smaller\n * 14px (`size-3.5`) thumb specified for this component, leaving a visible\n * ~2px gap, which reads cleanly at this track size. Fluent's *unchecked*\n * track is outlined + transparent (measured: 1px solid `#616161`, background\n * transparent) — NOT gray-filled like shadcn's default Radix implementation\n * (`data-[state=unchecked]:bg-input`). This kit now binds that outline to the\n * `NeutralStrokeAccessible` ramp (`border-stroke-accessible` = `#616161` rest,\n * `#575757` hover, `#4d4d4d` pressed): spec-true to the measured Fluent value,\n * so this is no longer the earlier `border-input` (`#d1d1d1`) substitution —\n * that documented deviation is retired. The *checked* track measured exactly\n * `#0f6cbd` — this kit's `--primary`/`bg-primary` token — with a white thumb\n * (`#ffffff`, this kit's `--primary-foreground` token in both themes); on\n * hover/press the on-track steps through Fluent's `CompoundBrandBackground`\n * (border+fill `brand-70`/`brand-60`; dark hover `brand-80`), mirroring\n * Button's per-theme brand ramp (conventions §4).\n *\n * The prop surface (`Switch`, `checked`/`defaultChecked`/`onCheckedChange`,\n * no `size` prop) follows the classic shadcn/ui switch API. Note Base UI's\n * state data-attributes differ from Radix's: it emits presence-only\n * `data-checked`/`data-unchecked` (and `data-disabled`/`data-readonly`/\n * `data-required`), not Radix's `data-state=\"checked\" | \"unchecked\"` — the\n * classes below target Base UI's actual output via Tailwind's presence-based\n * `data-[checked]:` variant.\n */\nfunction Switch({\n  className,\n  ...props\n}: ComponentProps<typeof SwitchPrimitive.Root>) {\n  return (\n    <SwitchPrimitive.Root\n      data-slot=\"switch\"\n      className={cn(\n        // layout — Fluent medium toggle: 40x20 pill track, thumb centered via flex\n        \"inline-flex h-5 w-10 shrink-0 cursor-pointer items-center rounded-full border px-0.5\",\n        // motion — border/bg color transition on check/uncheck\n        \"outline-none transition-colors duration-fast ease-ease\",\n        // off (unchecked) — Fluent's outlined/transparent track, bound to the\n        // NeutralStrokeAccessible ramp (spec-true measured #616161 rest ->\n        // #575757 hover -> #4d4d4d pressed), see file header.\n        \"border-stroke-accessible bg-transparent hover:border-stroke-accessible-hover active:border-stroke-accessible-pressed\",\n        // on (checked) — brand fill (Fluent CompoundBrandBackground), stepping\n        // border+fill through Hover/Pressed; dark hover brightens to brand-80.\n        // The data-[checked]:hover/active selectors outrank the neutral\n        // hover/active border by specificity so the on-track stays brand.\n        \"data-[checked]:border-primary data-[checked]:bg-primary 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        // focus — Fluent double-stroke approximation (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); harmless\n        // unless the caller pairs this with a Field/validation integration\n        \"aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40\",\n        // disabled — opacity read (conventions §4), keyed off Base UI's\n        // `data-disabled` rather than the CSS `disabled:` pseudo-class: this\n        // control renders a <span role=\"switch\">, not a native\n        // <button>/<input>, so `:disabled` never matches it.\n        \"data-[disabled]:pointer-events-none data-[disabled]:opacity-50\",\n        className\n      )}\n      {...props}\n    >\n      <SwitchPrimitive.Thumb\n        data-slot=\"switch-thumb\"\n        className={cn(\n          \"pointer-events-none block size-3.5 rounded-full\",\n          \"transition-transform duration-fast ease-ease\",\n          // off — neutral thumb, matches Fluent's measured `#616161`\n          \"bg-muted-foreground\",\n          // on — white thumb via the `primary-foreground` token (`#ffffff`\n          // in both themes) rather than a literal `bg-white`, per\n          // conventions §3.7 (never hardcode a color). Travel distance is\n          // the track's content-box width (40 - 2×1px border - 2×2px\n          // padding = 34px) minus the 14px thumb = 20px = `translate-x-5`.\n          \"data-[checked]:translate-x-5 data-[checked]:bg-primary-foreground\"\n        )}\n      />\n    </SwitchPrimitive.Root>\n  );\n}\n\nexport { Switch };\n"],"mappings":"AA6FM;AA7FN,SAAS,UAAU,uBAAuB;AAG1C,SAAS,UAAU;AAuDnB,SAAS,OAAO;AAAA,EACd;AAAA,EACA,GAAG;AACL,GAAgD;AAC9C,SACE;AAAA,IAAC,gBAAgB;AAAA,IAAhB;AAAA,MACC,aAAU;AAAA,MACV,WAAW;AAAA;AAAA,QAET;AAAA;AAAA,QAEA;AAAA;AAAA;AAAA;AAAA,QAIA;AAAA;AAAA;AAAA;AAAA;AAAA,QAKA;AAAA;AAAA,QAEA;AAAA;AAAA;AAAA,QAGA;AAAA;AAAA;AAAA;AAAA;AAAA,QAKA;AAAA,QACA;AAAA,MACF;AAAA,MACC,GAAG;AAAA,MAEJ;AAAA,QAAC,gBAAgB;AAAA,QAAhB;AAAA,UACC,aAAU;AAAA,UACV,WAAW;AAAA,YACT;AAAA,YACA;AAAA;AAAA,YAEA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,YAMA;AAAA,UACF;AAAA;AAAA,MACF;AAAA;AAAA,EACF;AAEJ;","names":[]}

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

@@ -0,0 +1,107 @@
+import * as react from 'react';
+import { ComponentProps } from 'react';
+import { Tabs as Tabs$1 } from '@base-ui/react/tabs';
+
+/**
+ * Tabs — Fluent 2-styled, shadcn-API tabs.
+ *
+ * ## Base UI mapping (conventions §9)
+ * Roving-tabindex focus, arrow-key navigation, and (per divergence 3 below)
+ * the sliding active-tab indicator are genuine behavior/layout-measurement
+ * that plain markup can't express, so the four parts wrap `@base-ui/react/tabs`
+ * (namespace import as `TabsPrimitive`, matching the actual
+ * `export * as Tabs from "./index.parts.js"` shape in node_modules — the same
+ * pattern `select.tsx`/`radio-group.tsx` use):
+ *
+ * | Exported (shadcn name) | Base UI primitive     |
+ * | ----------------------- | --------------------- |
+ * | `Tabs`                  | `Tabs.Root`            |
+ * | `TabsList`               | `Tabs.List` (+ `Tabs.Indicator` appended) |
+ * | `TabsTrigger`            | `Tabs.Tab`              |
+ * | `TabsContent`            | `Tabs.Panel`            |
+ *
+ * `"use client"` is required here — unlike `radio-group.tsx`, this wrapper
+ * itself needs it, not just the primitive parts. `Tabs.Indicator` measures the
+ * active tab's DOM layout (`getBoundingClientRect`/`offsetLeft`) inside a
+ * `React.useEffect` to drive the sliding-underline CSS vars (divergence 3), so
+ * the component genuinely participates in client-side behavior beyond just
+ * rendering a client-boundary child — matching the reasoning that already
+ * governs `select.tsx`/`checkbox.tsx` for a different trigger (icons there;
+ * layout measurement here).
+ *
+ * ## Divergences from the shadcn/Radix Tabs API (all deliberate)
+ * 1. **`TabsList` is a transparent underline bar, not a muted pill.** shadcn's
+ *    reference `TabsList` is a segmented control: `bg-muted` rounded box with
+ *    each `TabsTrigger` becoming a filled `bg-background` pill when active.
+ *    Fluent 2's `TabList` has no pill — it's a transparent row of labels over a
+ *    hairline `border-b`, with a 2px brand bar that slides under the active
+ *    label. This implementation follows Fluent, not shadcn's segmented look:
+ *    `TabsList` carries `border-b border-border` (the resting hairline) and no
+ *    background; `TabsTrigger` is unstyled at rest beyond text color (muted →
+ *    foreground on hover, foreground + semibold when active via
+ *    `data-[active]:`), never a filled pill.
+ * 2. **Active state uses Base UI's `data-active`, not shadcn's `data-state`
+ *    value pair.** Radix's `Tabs.Trigger` exposes `data-state="active"|
+ *    "inactive"`; Base UI's `Tabs.Tab` instead exposes `data-active` as a plain
+ *    presence attribute (see `TabsTabDataAttributes` in node_modules — boolean
+ *    presence, not a value pair, the same model `radio-group.tsx`'s
+ *    `data-checked` uses). Styled here via the bracketed
+ *    `data-[active]:` form per conventions §4.
+ * 3. **The sliding indicator uses `Tabs.Indicator`'s CSS-var position API**
+ *    (`--active-tab-left`/`--active-tab-width`, from `TabsIndicatorCssVars` in
+ *    node_modules), not a custom `ref`-measured span. `Tabs.Indicator` renders
+ *    a `<span>` inside `TabsList` with those vars set as inline custom
+ *    properties (re-measured via a `ResizeObserver`-backed listener whenever
+ *    the active tab or list layout changes) and `hidden` until a non-zero size
+ *    is available. This wrapper positions the span with
+ *    `left-[var(--active-tab-left)] w-[var(--active-tab-width)]` and animates
+ *    moves with `transition-[left,width] duration-normal ease-ease` — the
+ *    Fluent sliding-underline motion, confirmed working. **jsdom caveat:**
+ *    jsdom has no layout engine, so `offsetWidth`/`getBoundingClientRect` are
+ *    always `0`; `Tabs.Indicator` treats that as "not yet measured" and stays
+ *    `hidden`, so the indicator element exists in the test DOM
+ *    (`data-slot="tabs-indicator"`) but the sliding motion itself is only
+ *    observable in a real browser (see the Select/Dialog popup-motion note in
+ *    conventions §3.5 for the same class of jsdom limitation applied to
+ *    motion). The component test asserts the indicator renders and tracks
+ *    `data-activation-direction`, not the pixel position.
+ * 4. **Default activation is manual (Enter/Space), not automatic-on-arrow.**
+ *    Radix/shadcn Tabs activates on arrow-key focus move (`automatic`). Base
+ *    UI's `Tabs.List` defaults `activateOnFocus` to `false` — the
+ *    WAI-ARIA-recommended "manual activation" pattern: arrow keys move focus
+ *    among tabs, and the focused tab is only selected on `Enter`/`Space` (or
+ *    click). This wrapper does not override that default, so the kit ships
+ *    Base UI's more accessible default rather than papering over it to match
+ *    Radix bit-for-bit; callers who want automatic activation can pass
+ *    `activateOnFocus` to `TabsList` themselves (it's forwarded straight
+ *    through as an ordinary prop).
+ *
+ * ## data-slot note
+ * Every part renders a real DOM element, so every part gets a `data-slot`:
+ * `tabs`, `tabs-list`, `tabs-indicator`, `tabs-trigger`, `tabs-content`.
+ */
+declare function Tabs({ className, ...props }: ComponentProps<typeof Tabs$1.Root>): react.JSX.Element;
+/**
+ * List — transparent row of tab labels over a hairline bottom border, with
+ * the brand sliding indicator (divergence 3) appended as the last child so it
+ * paints above the hairline.
+ */
+declare function TabsList({ className, children, ...props }: ComponentProps<typeof Tabs$1.List>): react.JSX.Element;
+/**
+ * Trigger — muted label at rest, brand-adjacent foreground + semibold when
+ * active (divergence 2: `data-[active]:`, not shadcn's filled pill). Focus
+ * uses the generic offset-ring recipe (conventions §4) — a tab is a
+ * selectable control, not a typed-into field, so it doesn't get the bottom
+ * brand-accent treatment `Input`/`Select` use.
+ */
+declare function TabsTrigger({ className, ...props }: ComponentProps<typeof Tabs$1.Tab>): react.JSX.Element;
+/**
+ * Content — the panel shown for the active tab. Base UI's `Tabs.Panel`
+ * unmounts inactive panels from the accessibility tree (`hidden`) and only
+ * the active one is focusable/rendered visible, so this wrapper is just
+ * spacing + a focus ring for when a panel itself receives focus (e.g. no
+ * focusable content inside it).
+ */
+declare function TabsContent({ className, ...props }: ComponentProps<typeof Tabs$1.Panel>): react.JSX.Element;
+
+export { Tabs, TabsContent, TabsList, TabsTrigger };