@graundtech/fluent2-react-kit 0.5.1

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/ui/multi-select.tsx"],"sourcesContent":["\"use client\";\n\nimport { Combobox as ComboboxPrimitive } from \"@base-ui/react/combobox\";\nimport { DismissRegular } from \"@fluentui/react-icons\";\nimport type { ComponentProps, ReactNode } from \"react\";\n\nimport { cn } from \"../../lib/utils\";\nimport {\n  ComboboxContent,\n  ComboboxEmpty,\n  ComboboxGroup,\n  ComboboxItem,\n  ComboboxLabel,\n  ComboboxList,\n  ComboboxSeparator,\n} from \"./combobox\";\n\n/**\n * Multi Select — Fluent 2-styled multiple-selection combobox with a chips field.\n *\n * Built DIRECTLY on the kit's `Combobox` reference (`./combobox`). Base UI's\n * `Combobox.Root` already carries the multiple-selection engine — passing\n * `multiple` turns `value`/`onValueChange` into arrays and unlocks the chips\n * parts (`Combobox.Chips`/`Chip`/`ChipRemove`). This file's only NEW surface is\n * the **chips field** (`MultiSelectInput` + `MultiSelectChip`); everything on the\n * popup side is re-exported from `combobox.tsx` unchanged.\n *\n * ## Reuse model — what is new vs a pass-through\n * | Exported (kit name)   | Source                                              |\n * | --------------------- | --------------------------------------------------- |\n * | `MultiSelect`         | `Combobox.Root` with `multiple` defaulted to `true` |\n * | `MultiSelectInput`    | **NEW** chips field: `Combobox.Chips` (field chrome) wrapping a `Combobox.Value` chip flow + `Combobox.Input` |\n * | `MultiSelectChip`     | **NEW** one selected-value chip: `Combobox.Chip` + `Combobox.ChipRemove` |\n * | `MultiSelectContent`  | pass-through re-export of `ComboboxContent`          |\n * | `MultiSelectList`     | pass-through re-export of `ComboboxList`             |\n * | `MultiSelectItem`     | pass-through re-export of `ComboboxItem`             |\n * | `MultiSelectGroup`    | pass-through re-export of `ComboboxGroup`            |\n * | `MultiSelectLabel`    | pass-through re-export of `ComboboxLabel`            |\n * | `MultiSelectEmpty`    | pass-through re-export of `ComboboxEmpty`            |\n * | `MultiSelectSeparator`| pass-through re-export of `ComboboxSeparator`        |\n *\n * ## Divergences (all deliberate)\n * 1. **The popup parts are literal re-exports, so they keep their\n *    `data-slot=\"combobox-…\"` values** — they ARE the Combobox parts, aliased for\n *    a coherent `MultiSelect*` call site. Only the two parts this file owns get\n *    `data-slot=\"multi-select-…\"` (`multi-select-input-wrapper`,\n *    `multi-select-input`, `multi-select-chip`, `multi-select-chip-remove`). This\n *    avoids forking identical popup markup and keeps the registry item lean\n *    (`registryDependencies: [\"utils\", \"combobox\"]`, like `pagination` depends on\n *    `button`). Selected items still render the right-side `CheckmarkRegular` from\n *    `ComboboxItem` — in `multiple` mode Base UI mounts the indicator for every\n *    selected option.\n * 2. **`MultiSelectInput` is NOT `ComboboxInput`.** `ComboboxInput` is the\n *    single-line surface (h-8, one `<input>` + Clear + chevron). The chips field\n *    is a wrapping token field: `min-h-8` + `flex-wrap` + `gap-1` + `py-1` so\n *    chips reflow to multiple rows, with the text `<input>` sitting inline at the\n *    end. It reuses `combobox-input-wrapper`'s field-chrome recipe verbatim — the\n *    `border-input`/`border-b-stroke-accessible` rest edge, the\n *    `has-[input:focus-visible]` bottom brand accent, the\n *    `has-[input[aria-invalid]]` destructive form, the `has-[input:disabled]`\n *    opacity — because focus/invalid/disabled all still land on the inner input.\n * 3. **No baked-in Clear or chevron `Trigger`.** The single-select field bakes a\n *    `Combobox.Clear` + chevron in; a tags picker's affordances are the chips\n *    themselves (each removable) and Backspace-clears-last, so the chips field\n *    stays chrome-light. Open with focus + type or `ArrowDown`. Consumers who want\n *    a clear-all/chevron can compose `@base-ui/react/combobox`'s `Clear`/`Trigger`\n *    directly.\n * 4. **Chip visuals are Fluent Tag (Small, Filled), Badge-adjacent.** A chip is\n *    `bg-secondary` `text-foreground-2`, `rounded-md`, `h-6`, `px-1.5`, `text-xs` — the\n *    neutral filled look of `Badge variant=\"secondary\"` but sized for an inline\n *    token (Badge is a static 20px caption chip; a removable token needs the extra\n *    height + a trailing dismiss target). The remove button hover is\n *    `text-destructive` to signal \"this deletes\", paired with the `DismissRegular`\n *    glyph (not color alone — conventions §5).\n *\n * ## Chips wiring — what Base UI provides vs what is wired here\n * The chip flow is rendered from `Combobox.Value`'s render-function child, which\n * receives the live `selectedValue` array and re-renders on every selection — so\n * an UNCONTROLLED `MultiSelect` (the preview / RSC case) shows chips without any\n * consumer `useState`. Base UI owns the keyboard model for free:\n * - **Backspace on an empty input removes the last chip** (Base UI `ComboboxInput`).\n * - **ArrowLeft/Right move between chips; Backspace/Delete on a focused chip\n *   removes it** (Base UI `ComboboxChip`).\n * - **Clicking a `ChipRemove` deselects that value and refocuses the input**\n *   (Base UI `ComboboxChipRemove`).\n * - **The popup stays OPEN after selecting** in `multiple` mode (Base UI default),\n *   so several tags can be picked in a row.\n * This file only styles those parts and maps each value to a chip.\n *\n * ## `\"use client\"` — required\n * `@fluentui/react-icons` forces it (the `DismissRegular` import): the package's\n * shared icon-sizing module calls `@griffel/react`'s `__styles()` at module scope\n * without its own directive, so importing an icon into a Server Component breaks\n * `next build` (conventions §9; same fix as `select.tsx`/`combobox.tsx`).\n */\n\nfunction MultiSelect<Value, Multiple extends boolean | undefined = true>({\n  multiple,\n  ...props\n}: ComboboxPrimitive.Root.Props<Value, Multiple>) {\n  return (\n    <ComboboxPrimitive.Root\n      multiple={(multiple ?? true) as Multiple}\n      {...props}\n    />\n  );\n}\n\n/**\n * Chip — one selected value, rendered from `MultiSelectInput`'s chip flow (or\n * composed by a caller who passes their own render child). `Combobox.Chip` holds\n * the label; the trailing `Combobox.ChipRemove` button deselects it. Base UI maps\n * a chip to `selectedValue[index]` via its composite-list order, so chips must be\n * rendered in selection order (which `Combobox.Value`'s array is).\n */\nfunction MultiSelectChip({\n  className,\n  children,\n  ...props\n}: ComponentProps<typeof ComboboxPrimitive.Chip>) {\n  return (\n    <ComboboxPrimitive.Chip\n      data-slot=\"multi-select-chip\"\n      className={cn(\n        // Fluent Tag (Small, Filled): 24px, #f5f5f5 fill, 4px radius\n        // (rounded-md), Caption-1 text in NeutralForeground2 (text-foreground-2)\n        // — exact token values from Figma validation pass 3, node 9112:10360.\n        \"inline-flex h-6 items-center gap-1 rounded-md bg-secondary px-1.5 text-xs text-foreground-2 select-none\",\n        // highlighted (chip keyboard focus) + disabled\n        \"data-[highlighted]:bg-accent data-[disabled]:pointer-events-none data-[disabled]:opacity-50\",\n        className\n      )}\n      {...props}\n    >\n      {children}\n      <ComboboxPrimitive.ChipRemove\n        data-slot=\"multi-select-chip-remove\"\n        aria-label=\"Remove\"\n        className={cn(\n          \"-mr-0.5 flex size-4 shrink-0 items-center justify-center rounded-sm text-muted-foreground outline-none\",\n          // hover reads destructive — this action deletes (paired with the glyph, not color alone)\n          \"transition-colors duration-fast ease-ease hover:text-destructive\",\n          \"focus-visible:ring-2 focus-visible:ring-ring\",\n          \"[&_svg]:pointer-events-none [&_svg]:size-3\"\n        )}\n      >\n        <DismissRegular />\n      </ComboboxPrimitive.ChipRemove>\n    </ComboboxPrimitive.Chip>\n  );\n}\n\n/**\n * Input — the Fluent chips field (divergence 2). `Combobox.Chips` is the\n * field-chrome container (flex-wrap token row) holding the chip flow and the\n * inline text `<input>`. `children`, when given, is a render function\n * `(value) => ReactNode` that maps each selected value to its chip content —\n * use it to look up a label for `{ value, label }` items or to style the chip.\n * With no `children`, each value is rendered as a `MultiSelectChip` showing\n * `String(value)` (the flat-string case). `className`/`ref`/`...props` forward to\n * the inner `<input>`; style the field with `wrapperClassName`.\n */\nfunction MultiSelectInput({\n  className,\n  wrapperClassName,\n  children,\n  ...props\n}: Omit<ComponentProps<typeof ComboboxPrimitive.Input>, \"children\"> & {\n  wrapperClassName?: string;\n  children?: (value: unknown) => ReactNode;\n}) {\n  return (\n    <ComboboxPrimitive.Chips\n      data-slot=\"multi-select-input-wrapper\"\n      className={cn(\n        // layout — wrapping token field. min-h-8 (chips reflow to rows), flex-wrap,\n        // gap-1, py-1. Resting bottom edge uses NeutralStrokeAccessible; the other\n        // sides stay border-input. Focus + aria-invalid override it (below).\n        \"flex min-h-8 w-full flex-wrap items-center gap-1 rounded-md border border-input border-b-stroke-accessible bg-background px-1.5 py-1 text-sm\",\n        // motion — color + box-shadow so the focus accent animates (§4)\n        \"transition-[color,box-shadow] duration-fast ease-ease\",\n        // focus — Fluent bottom brand accent via inset box-shadow, no reflow (§4).\n        // has-[input:focus-visible] because focus is on the inner input.\n        \"has-[input:focus-visible]:border-primary has-[input:focus-visible]:shadow-[inset_0_-2px_0_0_var(--brand-80)] dark:has-[input:focus-visible]:shadow-[inset_0_-2px_0_0_var(--brand-100)]\",\n        // invalid — shadcn aria-invalid treatment; after focus so it wins the border\n        \"has-[input[aria-invalid='true']]:border-destructive has-[input[aria-invalid='true']]:ring-destructive/20 dark:has-[input[aria-invalid='true']]:ring-destructive/40\",\n        \"has-[input[aria-invalid='true']:focus-visible]:shadow-[inset_0_-2px_0_0_var(--destructive)]\",\n        // disabled — opacity read when the whole control is disabled\n        \"has-[input:disabled]:pointer-events-none has-[input:disabled]:opacity-50\",\n        wrapperClassName\n      )}\n    >\n      <ComboboxPrimitive.Value>\n        {(selected: unknown) =>\n          (Array.isArray(selected) ? selected : []).map((value, index) =>\n            children ? (\n              children(value)\n            ) : (\n              <MultiSelectChip key={index}>{String(value)}</MultiSelectChip>\n            )\n          )\n        }\n      </ComboboxPrimitive.Value>\n      <ComboboxPrimitive.Input\n        data-slot=\"multi-select-input\"\n        className={cn(\n          \"h-6 min-w-16 flex-1 bg-transparent px-1 outline-none\",\n          \"placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground\",\n          className\n        )}\n        {...props}\n      />\n    </ComboboxPrimitive.Chips>\n  );\n}\n\n// Popup-side parts are the Combobox parts, aliased for a MultiSelect* call site\n// (divergence 1 — they keep their `data-slot=\"combobox-…\"`).\nconst MultiSelectContent = ComboboxContent;\nconst MultiSelectList = ComboboxList;\nconst MultiSelectItem = ComboboxItem;\nconst MultiSelectGroup = ComboboxGroup;\nconst MultiSelectLabel = ComboboxLabel;\nconst MultiSelectEmpty = ComboboxEmpty;\nconst MultiSelectSeparator = ComboboxSeparator;\n\nexport {\n  MultiSelect,\n  MultiSelectInput,\n  MultiSelectChip,\n  MultiSelectContent,\n  MultiSelectList,\n  MultiSelectItem,\n  MultiSelectGroup,\n  MultiSelectLabel,\n  MultiSelectEmpty,\n  MultiSelectSeparator,\n};\n"],"mappings":";AAqGI,cAoBA,YApBA;AAnGJ,SAAS,YAAY,yBAAyB;AAC9C,SAAS,sBAAsB;AAG/B,SAAS,UAAU;AACnB;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAiFP,SAAS,YAAgE;AAAA,EACvE;AAAA,EACA,GAAG;AACL,GAAkD;AAChD,SACE;AAAA,IAAC,kBAAkB;AAAA,IAAlB;AAAA,MACC,UAAW,YAAY;AAAA,MACtB,GAAG;AAAA;AAAA,EACN;AAEJ;AASA,SAAS,gBAAgB;AAAA,EACvB;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAAkD;AAChD,SACE;AAAA,IAAC,kBAAkB;AAAA,IAAlB;AAAA,MACC,aAAU;AAAA,MACV,WAAW;AAAA;AAAA;AAAA;AAAA,QAIT;AAAA;AAAA,QAEA;AAAA,QACA;AAAA,MACF;AAAA,MACC,GAAG;AAAA,MAEH;AAAA;AAAA,QACD;AAAA,UAAC,kBAAkB;AAAA,UAAlB;AAAA,YACC,aAAU;AAAA,YACV,cAAW;AAAA,YACX,WAAW;AAAA,cACT;AAAA;AAAA,cAEA;AAAA,cACA;AAAA,cACA;AAAA,YACF;AAAA,YAEA,8BAAC,kBAAe;AAAA;AAAA,QAClB;AAAA;AAAA;AAAA,EACF;AAEJ;AAYA,SAAS,iBAAiB;AAAA,EACxB;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAGG;AACD,SACE;AAAA,IAAC,kBAAkB;AAAA,IAAlB;AAAA,MACC,aAAU;AAAA,MACV,WAAW;AAAA;AAAA;AAAA;AAAA,QAIT;AAAA;AAAA,QAEA;AAAA;AAAA;AAAA,QAGA;AAAA;AAAA,QAEA;AAAA,QACA;AAAA;AAAA,QAEA;AAAA,QACA;AAAA,MACF;AAAA,MAEA;AAAA,4BAAC,kBAAkB,OAAlB,EACE,WAAC,cACC,MAAM,QAAQ,QAAQ,IAAI,WAAW,CAAC,GAAG;AAAA,UAAI,CAAC,OAAO,UACpD,WACE,SAAS,KAAK,IAEd,oBAAC,mBAA6B,iBAAO,KAAK,KAApB,KAAsB;AAAA,QAEhD,GAEJ;AAAA,QACA;AAAA,UAAC,kBAAkB;AAAA,UAAlB;AAAA,YACC,aAAU;AAAA,YACV,WAAW;AAAA,cACT;AAAA,cACA;AAAA,cACA;AAAA,YACF;AAAA,YACC,GAAG;AAAA;AAAA,QACN;AAAA;AAAA;AAAA,EACF;AAEJ;AAIA,MAAM,qBAAqB;AAC3B,MAAM,kBAAkB;AACxB,MAAM,kBAAkB;AACxB,MAAM,mBAAmB;AACzB,MAAM,mBAAmB;AACzB,MAAM,mBAAmB;AACzB,MAAM,uBAAuB;","names":[]}

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

@@ -0,0 +1,46 @@
+import * as react from 'react';
+import { ComponentProps } from 'react';
+import { VariantProps } from 'class-variance-authority';
+import { buttonVariants } from './button.js';
+import 'class-variance-authority/types';
+
+/**
+ * Pagination — Fluent 2-styled, shadcn-API pagination family.
+ *
+ * Structure matches shadcn/ui's Pagination: `Pagination` (nav landmark),
+ * `PaginationContent` (list), `PaginationItem` (list item), `PaginationLink`
+ * (page control, styled via `buttonVariants`), `PaginationPrevious` /
+ * `PaginationNext` (labeled link + chevron), and `PaginationEllipsis`
+ * (decorative truncation marker). Every part is a plain function component —
+ * there is no open/close or selection state to manage, so this stays pure
+ * markup, same as `Card`.
+ *
+ * `PaginationLink` reuses `Button`'s `buttonVariants` (outline when
+ * `isActive`, ghost otherwise) so page controls read as part of the same
+ * button system instead of a bespoke look.
+ *
+ * Divergence from shadcn: shadcn's chevrons and the ellipsis dots come from
+ * `lucide-react`. This kit uses `@fluentui/react-icons` for iconography
+ * elsewhere, but importing it forces `"use client"` onto every file that
+ * touches it (see `docs/component-conventions.md` §9 — the icon package's
+ * sizing module calls `@griffel/react`'s `__styles()` at module scope without
+ * its own `"use client"`, which breaks `next build`'s RSC graph). Pagination
+ * has no state of its own and should stay a server component, so the
+ * chevrons/dots are inline `<svg>` instead — a deliberate, documented
+ * divergence from both shadcn (lucide) and the rest of this kit (Fluent
+ * icons).
+ *
+ * Server-safe: no `"use client"`, no hooks — the React import is type-only.
+ */
+declare function Pagination({ className, ...props }: ComponentProps<"nav">): react.JSX.Element;
+declare function PaginationContent({ className, ...props }: ComponentProps<"ul">): react.JSX.Element;
+declare function PaginationItem({ ...props }: ComponentProps<"li">): react.JSX.Element;
+type PaginationLinkProps = {
+    isActive?: boolean;
+} & Pick<VariantProps<typeof buttonVariants>, "size"> & ComponentProps<"a">;
+declare function PaginationLink({ className, isActive, size, ...props }: PaginationLinkProps): react.JSX.Element;
+declare function PaginationPrevious({ className, ...props }: ComponentProps<typeof PaginationLink>): react.JSX.Element;
+declare function PaginationNext({ className, ...props }: ComponentProps<typeof PaginationLink>): react.JSX.Element;
+declare function PaginationEllipsis({ className, ...props }: ComponentProps<"span">): react.JSX.Element;
+
+export { Pagination, PaginationContent, PaginationEllipsis, PaginationItem, PaginationLink, PaginationNext, PaginationPrevious };

package/dist/components/ui/pagination.js

@@ -0,0 +1,164 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { cn } from "../../lib/utils.js";
+import { buttonVariants } from "./button.js";
+function Pagination({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "nav",
+    {
+      role: "navigation",
+      "aria-label": "pagination",
+      "data-slot": "pagination",
+      className: cn("mx-auto flex w-full justify-center", className),
+      ...props
+    }
+  );
+}
+function PaginationContent({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "ul",
+    {
+      "data-slot": "pagination-content",
+      className: cn("flex flex-row items-center gap-1", className),
+      ...props
+    }
+  );
+}
+function PaginationItem({ ...props }) {
+  return /* @__PURE__ */ jsx("li", { "data-slot": "pagination-item", ...props });
+}
+function PaginationLink({
+  className,
+  isActive = false,
+  size = "icon",
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    "a",
+    {
+      "aria-current": isActive ? "page" : void 0,
+      "data-slot": "pagination-link",
+      "data-active": isActive,
+      className: cn(
+        buttonVariants({
+          variant: isActive ? "outline" : "ghost",
+          size
+        }),
+        className
+      ),
+      ...props
+    }
+  );
+}
+function PaginationPrevious({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxs(
+    PaginationLink,
+    {
+      "aria-label": "Go to previous page",
+      size: "default",
+      className: cn("gap-1 px-2.5 sm:pl-2.5", className),
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx(
+          "svg",
+          {
+            viewBox: "0 0 20 20",
+            fill: "none",
+            "aria-hidden": "true",
+            className: "size-4",
+            children: /* @__PURE__ */ jsx(
+              "path",
+              {
+                d: "M12.5 5L7.5 10L12.5 15",
+                stroke: "currentColor",
+                strokeWidth: "1.5",
+                strokeLinecap: "round",
+                strokeLinejoin: "round"
+              }
+            )
+          }
+        ),
+        /* @__PURE__ */ jsx("span", { className: "hidden sm:block", children: "Previous" })
+      ]
+    }
+  );
+}
+function PaginationNext({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxs(
+    PaginationLink,
+    {
+      "aria-label": "Go to next page",
+      size: "default",
+      className: cn("gap-1 px-2.5 sm:pr-2.5", className),
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx("span", { className: "hidden sm:block", children: "Next" }),
+        /* @__PURE__ */ jsx(
+          "svg",
+          {
+            viewBox: "0 0 20 20",
+            fill: "none",
+            "aria-hidden": "true",
+            className: "size-4",
+            children: /* @__PURE__ */ jsx(
+              "path",
+              {
+                d: "M7.5 5L12.5 10L7.5 15",
+                stroke: "currentColor",
+                strokeWidth: "1.5",
+                strokeLinecap: "round",
+                strokeLinejoin: "round"
+              }
+            )
+          }
+        )
+      ]
+    }
+  );
+}
+function PaginationEllipsis({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxs(
+    "span",
+    {
+      "aria-hidden": "true",
+      "data-slot": "pagination-ellipsis",
+      className: cn("flex size-8 items-center justify-center", className),
+      ...props,
+      children: [
+        /* @__PURE__ */ jsxs(
+          "svg",
+          {
+            viewBox: "0 0 20 20",
+            fill: "none",
+            "aria-hidden": "true",
+            className: "size-4",
+            children: [
+              /* @__PURE__ */ jsx("circle", { cx: "4", cy: "10", r: "1.25", fill: "currentColor" }),
+              /* @__PURE__ */ jsx("circle", { cx: "10", cy: "10", r: "1.25", fill: "currentColor" }),
+              /* @__PURE__ */ jsx("circle", { cx: "16", cy: "10", r: "1.25", fill: "currentColor" })
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx("span", { className: "sr-only", children: "More pages" })
+      ]
+    }
+  );
+}
+export {
+  Pagination,
+  PaginationContent,
+  PaginationEllipsis,
+  PaginationItem,
+  PaginationLink,
+  PaginationNext,
+  PaginationPrevious
+};
+//# sourceMappingURL=pagination.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/ui/pagination.tsx"],"sourcesContent":["import type { VariantProps } from \"class-variance-authority\";\nimport type { ComponentProps } from \"react\";\n\nimport { cn } from \"../../lib/utils\";\nimport { buttonVariants } from \"./button\";\n\n/**\n * Pagination — Fluent 2-styled, shadcn-API pagination family.\n *\n * Structure matches shadcn/ui's Pagination: `Pagination` (nav landmark),\n * `PaginationContent` (list), `PaginationItem` (list item), `PaginationLink`\n * (page control, styled via `buttonVariants`), `PaginationPrevious` /\n * `PaginationNext` (labeled link + chevron), and `PaginationEllipsis`\n * (decorative truncation marker). Every part is a plain function component —\n * there is no open/close or selection state to manage, so this stays pure\n * markup, same as `Card`.\n *\n * `PaginationLink` reuses `Button`'s `buttonVariants` (outline when\n * `isActive`, ghost otherwise) so page controls read as part of the same\n * button system instead of a bespoke look.\n *\n * Divergence from shadcn: shadcn's chevrons and the ellipsis dots come from\n * `lucide-react`. This kit uses `@fluentui/react-icons` for iconography\n * elsewhere, but importing it forces `\"use client\"` onto every file that\n * touches it (see `docs/component-conventions.md` §9 — the icon package's\n * sizing module calls `@griffel/react`'s `__styles()` at module scope without\n * its own `\"use client\"`, which breaks `next build`'s RSC graph). Pagination\n * has no state of its own and should stay a server component, so the\n * chevrons/dots are inline `<svg>` instead — a deliberate, documented\n * divergence from both shadcn (lucide) and the rest of this kit (Fluent\n * icons).\n *\n * Server-safe: no `\"use client\"`, no hooks — the React import is type-only.\n */\n\nfunction Pagination({ className, ...props }: ComponentProps<\"nav\">) {\n  return (\n    <nav\n      role=\"navigation\"\n      aria-label=\"pagination\"\n      data-slot=\"pagination\"\n      className={cn(\"mx-auto flex w-full justify-center\", className)}\n      {...props}\n    />\n  );\n}\n\nfunction PaginationContent({ className, ...props }: ComponentProps<\"ul\">) {\n  return (\n    <ul\n      data-slot=\"pagination-content\"\n      className={cn(\"flex flex-row items-center gap-1\", className)}\n      {...props}\n    />\n  );\n}\n\nfunction PaginationItem({ ...props }: ComponentProps<\"li\">) {\n  return <li data-slot=\"pagination-item\" {...props} />;\n}\n\ntype PaginationLinkProps = {\n  isActive?: boolean;\n} & Pick<VariantProps<typeof buttonVariants>, \"size\"> &\n  ComponentProps<\"a\">;\n\nfunction PaginationLink({\n  className,\n  isActive = false,\n  size = \"icon\",\n  ...props\n}: PaginationLinkProps) {\n  return (\n    <a\n      aria-current={isActive ? \"page\" : undefined}\n      data-slot=\"pagination-link\"\n      data-active={isActive}\n      className={cn(\n        buttonVariants({\n          variant: isActive ? \"outline\" : \"ghost\",\n          size,\n        }),\n        className\n      )}\n      {...props}\n    />\n  );\n}\n\nfunction PaginationPrevious({\n  className,\n  ...props\n}: ComponentProps<typeof PaginationLink>) {\n  return (\n    <PaginationLink\n      aria-label=\"Go to previous page\"\n      size=\"default\"\n      className={cn(\"gap-1 px-2.5 sm:pl-2.5\", className)}\n      {...props}\n    >\n      <svg\n        viewBox=\"0 0 20 20\"\n        fill=\"none\"\n        aria-hidden=\"true\"\n        className=\"size-4\"\n      >\n        <path\n          d=\"M12.5 5L7.5 10L12.5 15\"\n          stroke=\"currentColor\"\n          strokeWidth=\"1.5\"\n          strokeLinecap=\"round\"\n          strokeLinejoin=\"round\"\n        />\n      </svg>\n      <span className=\"hidden sm:block\">Previous</span>\n    </PaginationLink>\n  );\n}\n\nfunction PaginationNext({\n  className,\n  ...props\n}: ComponentProps<typeof PaginationLink>) {\n  return (\n    <PaginationLink\n      aria-label=\"Go to next page\"\n      size=\"default\"\n      className={cn(\"gap-1 px-2.5 sm:pr-2.5\", className)}\n      {...props}\n    >\n      <span className=\"hidden sm:block\">Next</span>\n      <svg\n        viewBox=\"0 0 20 20\"\n        fill=\"none\"\n        aria-hidden=\"true\"\n        className=\"size-4\"\n      >\n        <path\n          d=\"M7.5 5L12.5 10L7.5 15\"\n          stroke=\"currentColor\"\n          strokeWidth=\"1.5\"\n          strokeLinecap=\"round\"\n          strokeLinejoin=\"round\"\n        />\n      </svg>\n    </PaginationLink>\n  );\n}\n\nfunction PaginationEllipsis({\n  className,\n  ...props\n}: ComponentProps<\"span\">) {\n  return (\n    <span\n      aria-hidden=\"true\"\n      data-slot=\"pagination-ellipsis\"\n      className={cn(\"flex size-8 items-center justify-center\", className)}\n      {...props}\n    >\n      <svg\n        viewBox=\"0 0 20 20\"\n        fill=\"none\"\n        aria-hidden=\"true\"\n        className=\"size-4\"\n      >\n        <circle cx=\"4\" cy=\"10\" r=\"1.25\" fill=\"currentColor\" />\n        <circle cx=\"10\" cy=\"10\" r=\"1.25\" fill=\"currentColor\" />\n        <circle cx=\"16\" cy=\"10\" r=\"1.25\" fill=\"currentColor\" />\n      </svg>\n      <span className=\"sr-only\">More pages</span>\n    </span>\n  );\n}\n\nexport {\n  Pagination,\n  PaginationContent,\n  PaginationItem,\n  PaginationLink,\n  PaginationPrevious,\n  PaginationNext,\n  PaginationEllipsis,\n};\n"],"mappings":"AAqCI,cAyDA,YAzDA;AAlCJ,SAAS,UAAU;AACnB,SAAS,sBAAsB;AA+B/B,SAAS,WAAW,EAAE,WAAW,GAAG,MAAM,GAA0B;AAClE,SACE;AAAA,IAAC;AAAA;AAAA,MACC,MAAK;AAAA,MACL,cAAW;AAAA,MACX,aAAU;AAAA,MACV,WAAW,GAAG,sCAAsC,SAAS;AAAA,MAC5D,GAAG;AAAA;AAAA,EACN;AAEJ;AAEA,SAAS,kBAAkB,EAAE,WAAW,GAAG,MAAM,GAAyB;AACxE,SACE;AAAA,IAAC;AAAA;AAAA,MACC,aAAU;AAAA,MACV,WAAW,GAAG,oCAAoC,SAAS;AAAA,MAC1D,GAAG;AAAA;AAAA,EACN;AAEJ;AAEA,SAAS,eAAe,EAAE,GAAG,MAAM,GAAyB;AAC1D,SAAO,oBAAC,QAAG,aAAU,mBAAmB,GAAG,OAAO;AACpD;AAOA,SAAS,eAAe;AAAA,EACtB;AAAA,EACA,WAAW;AAAA,EACX,OAAO;AAAA,EACP,GAAG;AACL,GAAwB;AACtB,SACE;AAAA,IAAC;AAAA;AAAA,MACC,gBAAc,WAAW,SAAS;AAAA,MAClC,aAAU;AAAA,MACV,eAAa;AAAA,MACb,WAAW;AAAA,QACT,eAAe;AAAA,UACb,SAAS,WAAW,YAAY;AAAA,UAChC;AAAA,QACF,CAAC;AAAA,QACD;AAAA,MACF;AAAA,MACC,GAAG;AAAA;AAAA,EACN;AAEJ;AAEA,SAAS,mBAAmB;AAAA,EAC1B;AAAA,EACA,GAAG;AACL,GAA0C;AACxC,SACE;AAAA,IAAC;AAAA;AAAA,MACC,cAAW;AAAA,MACX,MAAK;AAAA,MACL,WAAW,GAAG,0BAA0B,SAAS;AAAA,MAChD,GAAG;AAAA,MAEJ;AAAA;AAAA,UAAC;AAAA;AAAA,YACC,SAAQ;AAAA,YACR,MAAK;AAAA,YACL,eAAY;AAAA,YACZ,WAAU;AAAA,YAEV;AAAA,cAAC;AAAA;AAAA,gBACC,GAAE;AAAA,gBACF,QAAO;AAAA,gBACP,aAAY;AAAA,gBACZ,eAAc;AAAA,gBACd,gBAAe;AAAA;AAAA,YACjB;AAAA;AAAA,QACF;AAAA,QACA,oBAAC,UAAK,WAAU,mBAAkB,sBAAQ;AAAA;AAAA;AAAA,EAC5C;AAEJ;AAEA,SAAS,eAAe;AAAA,EACtB;AAAA,EACA,GAAG;AACL,GAA0C;AACxC,SACE;AAAA,IAAC;AAAA;AAAA,MACC,cAAW;AAAA,MACX,MAAK;AAAA,MACL,WAAW,GAAG,0BAA0B,SAAS;AAAA,MAChD,GAAG;AAAA,MAEJ;AAAA,4BAAC,UAAK,WAAU,mBAAkB,kBAAI;AAAA,QACtC;AAAA,UAAC;AAAA;AAAA,YACC,SAAQ;AAAA,YACR,MAAK;AAAA,YACL,eAAY;AAAA,YACZ,WAAU;AAAA,YAEV;AAAA,cAAC;AAAA;AAAA,gBACC,GAAE;AAAA,gBACF,QAAO;AAAA,gBACP,aAAY;AAAA,gBACZ,eAAc;AAAA,gBACd,gBAAe;AAAA;AAAA,YACjB;AAAA;AAAA,QACF;AAAA;AAAA;AAAA,EACF;AAEJ;AAEA,SAAS,mBAAmB;AAAA,EAC1B;AAAA,EACA,GAAG;AACL,GAA2B;AACzB,SACE;AAAA,IAAC;AAAA;AAAA,MACC,eAAY;AAAA,MACZ,aAAU;AAAA,MACV,WAAW,GAAG,2CAA2C,SAAS;AAAA,MACjE,GAAG;AAAA,MAEJ;AAAA;AAAA,UAAC;AAAA;AAAA,YACC,SAAQ;AAAA,YACR,MAAK;AAAA,YACL,eAAY;AAAA,YACZ,WAAU;AAAA,YAEV;AAAA,kCAAC,YAAO,IAAG,KAAI,IAAG,MAAK,GAAE,QAAO,MAAK,gBAAe;AAAA,cACpD,oBAAC,YAAO,IAAG,MAAK,IAAG,MAAK,GAAE,QAAO,MAAK,gBAAe;AAAA,cACrD,oBAAC,YAAO,IAAG,MAAK,IAAG,MAAK,GAAE,QAAO,MAAK,gBAAe;AAAA;AAAA;AAAA,QACvD;AAAA,QACA,oBAAC,UAAK,WAAU,WAAU,wBAAU;AAAA;AAAA;AAAA,EACtC;AAEJ;","names":[]}

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

@@ -0,0 +1,117 @@
+import * as react from 'react';
+import { ComponentProps } from 'react';
+import { Popover as Popover$1 } from '@base-ui/react/popover';
+
+/**
+ * Popover — Fluent 2-styled, shadcn-API popover (non-modal floating panel
+ * anchored to a trigger, for rich content — forms, menus, previews — that
+ * isn't a single-purpose listbox or tooltip).
+ *
+ * This is the kit's second popup/overlay component; it reuses the
+ * portal → positioner → popup structure and motion recipe `select.tsx`
+ * established (conventions §9) rather than inventing a new shape.
+ *
+ * ## Base UI mapping (conventions §9)
+ * Behavior — focus management, portalling, open/close state, collision-aware
+ * positioning, outside-press/Escape dismissal — genuinely needs a primitive,
+ * so the parts wrap `@base-ui/react/popover` (namespace import, matching the
+ * actual `export * as Popover from "./index.parts.js"` shape in node_modules,
+ * exactly like `select.tsx`). shadcn part names are mapped onto Base UI's
+ * model:
+ *
+ * | Exported (shadcn name) | Base UI primitive                                    |
+ * | ----------------------- | ---------------------------------------------------- |
+ * | `Popover`               | `Popover.Root`                                       |
+ * | `PopoverTrigger`        | `Popover.Trigger`                                    |
+ * | `PopoverContent`        | `Popover.Portal` + `Popover.Positioner` + `Popover.Popup` composed |
+ *
+ * `Popover.Arrow` / `Popover.Title` / `Popover.Description` / `Popover.Close`
+ * / `Popover.Backdrop` / `Popover.Viewport` exist in Base UI but are out of
+ * scope for this thin wrapper (no arrow ships by default per spec, and the
+ * shadcn Popover API itself has no title/description/close parts) — reach
+ * for `@base-ui/react/popover` directly if a consumer needs one of those.
+ *
+ * ## Divergences from the shadcn/Radix Popover API (all deliberate)
+ * 1. **No `PopoverAnchor` export.** Radix ships a dedicated `Popover.Anchor`
+ *    part you wrap around an arbitrary element to anchor the content
+ *    somewhere other than the trigger. Base UI has no equivalent part —
+ *    positioning against a different element is instead a plain `anchor`
+ *    prop on `Popover.Positioner` (`Element | VirtualElement |
+ *    RefObject<Element | null> | (() => Element | VirtualElement | null)`,
+ *    confirmed in `positioner/PopoverPositioner.d.ts` via
+ *    `UseAnchorPositioningSharedParameters`). Re-exposing that as its own
+ *    "Anchor" component would have nothing to render (no DOM wrapper needed
+ *    around the target element), so `PopoverContent` instead accepts an
+ *    `anchor` prop that forwards straight to the `Positioner`: pass a ref to
+ *    the element you want to anchor against instead of wrapping it.
+ * 2. **Composition uses Base UI's `render` prop, not `asChild`.**
+ *    `Popover.Trigger` renders its own `<button>` (Base UI's model — there is
+ *    no Slot-style boolean). `PopoverPrimitive.Trigger.Props` already includes
+ *    Base UI's `render` prop, so no extra plumbing is needed to point the
+ *    trigger at another element (e.g. the kit's `Button`):
+ *    `<PopoverTrigger render={<Button variant="outline">Open</Button>} />`.
+ *    This is the direct Base UI analogue of shadcn's
+ *    `<PopoverTrigger asChild><Button /></PopoverTrigger>`, same reasoning
+ *    `tooltip.tsx` and `dropdown-menu.tsx` document for their own triggers.
+ * 3. **The popup's role is `dialog` (non-modal), not the Radix default.**
+ *    Base UI's `Popover.Popup` always renders `role="dialog"` (confirmed in
+ *    `popup/PopoverPopup.js`) and `Popover.Trigger` sets
+ *    `aria-haspopup="dialog"` + `aria-expanded` + `aria-controls`
+ *    accordingly. `Popover.Root`'s `modal` prop defaults to `false` (no
+ *    `aria-modal`, no scroll lock, outside interaction stays live) and is
+ *    left at that default here — Radix's Popover is non-modal by default
+ *    too, so behavior matches even though this wrapper doesn't set the prop
+ *    itself. Pass `modal` through `<Popover>` (it forwards to `Popover.Root`)
+ *    if a consumer needs modal behavior.
+ * 4. **`sideOffset` defaults to `4`, not Base UI's `0`.** Same shadcn-parity
+ *    override `select.tsx` makes for `SelectContent`; `align="center"` and
+ *    `side="bottom"` are already Base UI's own defaults, restated here as
+ *    explicit defaults for clarity and so `PopoverContent`'s JSDoc is the one
+ *    place all three live.
+ * 5. **`PopoverContent` needs an accessible name from the consumer.** Because
+ *    the popup is forced to `role="dialog"` (divergence 3), axe-core's
+ *    `aria-dialog-name` rule fails if it has neither `aria-label` nor
+ *    `aria-labelledby` — unlike Radix's Popover.Content, which is a plain
+ *    (unroled) div and has no such requirement. This wrapper doesn't ship a
+ *    `PopoverTitle`/heading part (out of scope, matching the shadcn API
+ *    surface), so give `PopoverContent` an explicit `aria-label` (e.g.
+ *    `aria-label="Edit dimensions"`) or point `aria-labelledby` at a heading
+ *    rendered inside it. `popover.test.tsx` and the preview page both do
+ *    this on every example.
+ *
+ * ## `"use client"` — intentionally omitted
+ * Every Base UI Popover part this file uses (`Root`, `Trigger`, `Portal`,
+ * `Positioner`, `Popup`) carries its own `'use client'` directive at the
+ * source level (verified in the compiled package output, same check
+ * `avatar.tsx` documents), so they're already client boundaries on their
+ * own. This wrapper has no hooks/handlers and — unlike `select.tsx` /
+ * `checkbox.tsx` — no `@fluentui/react-icons` import (no arrow renders by
+ * default), so none of the triggers in conventions §2/§9 that would force
+ * `"use client"` apply here. The file stays a plain, server-renderable
+ * module per conventions §2: a Server Component tree can render these
+ * Client Component children without the parent re-declaring the directive.
+ * Confirmed via `pnpm typecheck` + the test suite; add the directive here
+ * only if that stops holding true.
+ *
+ * ## data-slot note
+ * `Popover` (Root) renders no DOM element of its own (same as `Select`) so it
+ * carries no `data-slot`. Every part that renders an element does —
+ * `popover-trigger`, `popover-positioner`, `popover-content` — which is what
+ * tests/consumers hook onto.
+ */
+declare function Popover(props: Popover$1.Root.Props): react.JSX.Element;
+declare function PopoverTrigger({ className, ...props }: Popover$1.Trigger.Props): react.JSX.Element;
+/**
+ * Content — the floating panel: `Portal` → `Positioner` → `Popup`. Surface is
+ * `bg-popover` + `border` + `shadow-16` (Fluent flyout elevation, conventions
+ * §3.6), `rounded-md`, `w-72 p-4` (shadcn parity default size for prose/form
+ * content — override with `className` for a differently sized panel). A
+ * subtle scale+fade open/close animation rides Base UI's
+ * `data-starting-style`/`data-ending-style` hooks with the same token
+ * durations/easings `SelectContent` uses. No arrow by default (divergence
+ * table above) — `origin-[var(--transform-origin)]` keeps the scale
+ * animation's pivot correct regardless of which side the popup lands on.
+ */
+declare function PopoverContent({ className, children, sideOffset, align, side, anchor, ...props }: ComponentProps<typeof Popover$1.Popup> & Pick<ComponentProps<typeof Popover$1.Positioner>, "side" | "align" | "sideOffset" | "anchor">): react.JSX.Element;
+
+export { Popover, PopoverContent, PopoverTrigger };

package/dist/components/ui/popover.js

@@ -0,0 +1,62 @@
+import { jsx } from "react/jsx-runtime";
+import { Popover as PopoverPrimitive } from "@base-ui/react/popover";
+import { cn } from "../../lib/utils.js";
+function Popover(props) {
+  return /* @__PURE__ */ jsx(PopoverPrimitive.Root, { ...props });
+}
+function PopoverTrigger({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    PopoverPrimitive.Trigger,
+    {
+      "data-slot": "popover-trigger",
+      className: cn(className),
+      ...props
+    }
+  );
+}
+function PopoverContent({
+  className,
+  children,
+  sideOffset = 4,
+  align = "center",
+  side = "bottom",
+  anchor,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(PopoverPrimitive.Portal, { children: /* @__PURE__ */ jsx(
+    PopoverPrimitive.Positioner,
+    {
+      "data-slot": "popover-positioner",
+      sideOffset,
+      align,
+      side,
+      anchor,
+      className: "z-50 outline-none",
+      children: /* @__PURE__ */ jsx(
+        PopoverPrimitive.Popup,
+        {
+          "data-slot": "popover-content",
+          className: cn(
+            "w-72 origin-[var(--transform-origin)] rounded-md border bg-popover p-4 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
+        }
+      )
+    }
+  ) });
+}
+export {
+  Popover,
+  PopoverContent,
+  PopoverTrigger
+};
+//# sourceMappingURL=popover.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/ui/popover.tsx"],"sourcesContent":["import { Popover as PopoverPrimitive } from \"@base-ui/react/popover\";\nimport type { ComponentProps } from \"react\";\n\nimport { cn } from \"../../lib/utils\";\n\n/**\n * Popover — Fluent 2-styled, shadcn-API popover (non-modal floating panel\n * anchored to a trigger, for rich content — forms, menus, previews — that\n * isn't a single-purpose listbox or tooltip).\n *\n * This is the kit's second popup/overlay component; it reuses the\n * portal → positioner → popup structure and motion recipe `select.tsx`\n * established (conventions §9) rather than inventing a new shape.\n *\n * ## Base UI mapping (conventions §9)\n * Behavior — focus management, portalling, open/close state, collision-aware\n * positioning, outside-press/Escape dismissal — genuinely needs a primitive,\n * so the parts wrap `@base-ui/react/popover` (namespace import, matching the\n * actual `export * as Popover from \"./index.parts.js\"` shape in node_modules,\n * exactly like `select.tsx`). shadcn part names are mapped onto Base UI's\n * model:\n *\n * | Exported (shadcn name) | Base UI primitive                                    |\n * | ----------------------- | ---------------------------------------------------- |\n * | `Popover`               | `Popover.Root`                                       |\n * | `PopoverTrigger`        | `Popover.Trigger`                                    |\n * | `PopoverContent`        | `Popover.Portal` + `Popover.Positioner` + `Popover.Popup` composed |\n *\n * `Popover.Arrow` / `Popover.Title` / `Popover.Description` / `Popover.Close`\n * / `Popover.Backdrop` / `Popover.Viewport` exist in Base UI but are out of\n * scope for this thin wrapper (no arrow ships by default per spec, and the\n * shadcn Popover API itself has no title/description/close parts) — reach\n * for `@base-ui/react/popover` directly if a consumer needs one of those.\n *\n * ## Divergences from the shadcn/Radix Popover API (all deliberate)\n * 1. **No `PopoverAnchor` export.** Radix ships a dedicated `Popover.Anchor`\n *    part you wrap around an arbitrary element to anchor the content\n *    somewhere other than the trigger. Base UI has no equivalent part —\n *    positioning against a different element is instead a plain `anchor`\n *    prop on `Popover.Positioner` (`Element | VirtualElement |\n *    RefObject<Element | null> | (() => Element | VirtualElement | null)`,\n *    confirmed in `positioner/PopoverPositioner.d.ts` via\n *    `UseAnchorPositioningSharedParameters`). Re-exposing that as its own\n *    \"Anchor\" component would have nothing to render (no DOM wrapper needed\n *    around the target element), so `PopoverContent` instead accepts an\n *    `anchor` prop that forwards straight to the `Positioner`: pass a ref to\n *    the element you want to anchor against instead of wrapping it.\n * 2. **Composition uses Base UI's `render` prop, not `asChild`.**\n *    `Popover.Trigger` renders its own `<button>` (Base UI's model — there is\n *    no Slot-style boolean). `PopoverPrimitive.Trigger.Props` already includes\n *    Base UI's `render` prop, so no extra plumbing is needed to point the\n *    trigger at another element (e.g. the kit's `Button`):\n *    `<PopoverTrigger render={<Button variant=\"outline\">Open</Button>} />`.\n *    This is the direct Base UI analogue of shadcn's\n *    `<PopoverTrigger asChild><Button /></PopoverTrigger>`, same reasoning\n *    `tooltip.tsx` and `dropdown-menu.tsx` document for their own triggers.\n * 3. **The popup's role is `dialog` (non-modal), not the Radix default.**\n *    Base UI's `Popover.Popup` always renders `role=\"dialog\"` (confirmed in\n *    `popup/PopoverPopup.js`) and `Popover.Trigger` sets\n *    `aria-haspopup=\"dialog\"` + `aria-expanded` + `aria-controls`\n *    accordingly. `Popover.Root`'s `modal` prop defaults to `false` (no\n *    `aria-modal`, no scroll lock, outside interaction stays live) and is\n *    left at that default here — Radix's Popover is non-modal by default\n *    too, so behavior matches even though this wrapper doesn't set the prop\n *    itself. Pass `modal` through `<Popover>` (it forwards to `Popover.Root`)\n *    if a consumer needs modal behavior.\n * 4. **`sideOffset` defaults to `4`, not Base UI's `0`.** Same shadcn-parity\n *    override `select.tsx` makes for `SelectContent`; `align=\"center\"` and\n *    `side=\"bottom\"` are already Base UI's own defaults, restated here as\n *    explicit defaults for clarity and so `PopoverContent`'s JSDoc is the one\n *    place all three live.\n * 5. **`PopoverContent` needs an accessible name from the consumer.** Because\n *    the popup is forced to `role=\"dialog\"` (divergence 3), axe-core's\n *    `aria-dialog-name` rule fails if it has neither `aria-label` nor\n *    `aria-labelledby` — unlike Radix's Popover.Content, which is a plain\n *    (unroled) div and has no such requirement. This wrapper doesn't ship a\n *    `PopoverTitle`/heading part (out of scope, matching the shadcn API\n *    surface), so give `PopoverContent` an explicit `aria-label` (e.g.\n *    `aria-label=\"Edit dimensions\"`) or point `aria-labelledby` at a heading\n *    rendered inside it. `popover.test.tsx` and the preview page both do\n *    this on every example.\n *\n * ## `\"use client\"` — intentionally omitted\n * Every Base UI Popover part this file uses (`Root`, `Trigger`, `Portal`,\n * `Positioner`, `Popup`) carries its own `'use client'` directive at the\n * source level (verified in the compiled package output, same check\n * `avatar.tsx` documents), so they're already client boundaries on their\n * own. This wrapper has no hooks/handlers and — unlike `select.tsx` /\n * `checkbox.tsx` — no `@fluentui/react-icons` import (no arrow renders by\n * default), so none of the triggers in conventions §2/§9 that would force\n * `\"use client\"` apply here. The file stays a plain, server-renderable\n * module per conventions §2: a Server Component tree can render these\n * Client Component children without the parent re-declaring the directive.\n * Confirmed via `pnpm typecheck` + the test suite; add the directive here\n * only if that stops holding true.\n *\n * ## data-slot note\n * `Popover` (Root) renders no DOM element of its own (same as `Select`) so it\n * carries no `data-slot`. Every part that renders an element does —\n * `popover-trigger`, `popover-positioner`, `popover-content` — which is what\n * tests/consumers hook onto.\n */\n\nfunction Popover(props: PopoverPrimitive.Root.Props) {\n  return <PopoverPrimitive.Root {...props} />;\n}\n\nfunction PopoverTrigger({\n  className,\n  ...props\n}: PopoverPrimitive.Trigger.Props) {\n  return (\n    <PopoverPrimitive.Trigger\n      data-slot=\"popover-trigger\"\n      className={cn(className)}\n      {...props}\n    />\n  );\n}\n\n/**\n * Content — the floating panel: `Portal` → `Positioner` → `Popup`. Surface is\n * `bg-popover` + `border` + `shadow-16` (Fluent flyout elevation, conventions\n * §3.6), `rounded-md`, `w-72 p-4` (shadcn parity default size for prose/form\n * content — override with `className` for a differently sized panel). A\n * subtle scale+fade open/close animation rides Base UI's\n * `data-starting-style`/`data-ending-style` hooks with the same token\n * durations/easings `SelectContent` uses. No arrow by default (divergence\n * table above) — `origin-[var(--transform-origin)]` keeps the scale\n * animation's pivot correct regardless of which side the popup lands on.\n */\nfunction PopoverContent({\n  className,\n  children,\n  sideOffset = 4,\n  align = \"center\",\n  side = \"bottom\",\n  anchor,\n  ...props\n}: ComponentProps<typeof PopoverPrimitive.Popup> &\n  Pick<\n    ComponentProps<typeof PopoverPrimitive.Positioner>,\n    \"side\" | \"align\" | \"sideOffset\" | \"anchor\"\n  >) {\n  return (\n    <PopoverPrimitive.Portal>\n      <PopoverPrimitive.Positioner\n        data-slot=\"popover-positioner\"\n        sideOffset={sideOffset}\n        align={align}\n        side={side}\n        anchor={anchor}\n        className=\"z-50 outline-none\"\n      >\n        <PopoverPrimitive.Popup\n          data-slot=\"popover-content\"\n          className={cn(\n            \"w-72 origin-[var(--transform-origin)] rounded-md border bg-popover p-4 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          {children}\n        </PopoverPrimitive.Popup>\n      </PopoverPrimitive.Positioner>\n    </PopoverPrimitive.Portal>\n  );\n}\n\nexport { Popover, PopoverTrigger, PopoverContent };\n"],"mappings":"AAwGS;AAxGT,SAAS,WAAW,wBAAwB;AAG5C,SAAS,UAAU;AAoGnB,SAAS,QAAQ,OAAoC;AACnD,SAAO,oBAAC,iBAAiB,MAAjB,EAAuB,GAAG,OAAO;AAC3C;AAEA,SAAS,eAAe;AAAA,EACtB;AAAA,EACA,GAAG;AACL,GAAmC;AACjC,SACE;AAAA,IAAC,iBAAiB;AAAA,IAAjB;AAAA,MACC,aAAU;AAAA,MACV,WAAW,GAAG,SAAS;AAAA,MACtB,GAAG;AAAA;AAAA,EACN;AAEJ;AAaA,SAAS,eAAe;AAAA,EACtB;AAAA,EACA;AAAA,EACA,aAAa;AAAA,EACb,QAAQ;AAAA,EACR,OAAO;AAAA,EACP;AAAA,EACA,GAAG;AACL,GAIK;AACH,SACE,oBAAC,iBAAiB,QAAjB,EACC;AAAA,IAAC,iBAAiB;AAAA,IAAjB;AAAA,MACC,aAAU;AAAA,MACV;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,WAAU;AAAA,MAEV;AAAA,QAAC,iBAAiB;AAAA,QAAjB;AAAA,UACC,aAAU;AAAA,UACV,WAAW;AAAA,YACT;AAAA;AAAA,YAEA;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,UACF;AAAA,UACC,GAAG;AAAA,UAEH;AAAA;AAAA,MACH;AAAA;AAAA,EACF,GACF;AAEJ;","names":[]}

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

@@ -0,0 +1,98 @@
+import * as react from 'react';
+import { ComponentProps } from 'react';
+import * as class_variance_authority_types from 'class-variance-authority/types';
+import { Progress as Progress$1 } from '@base-ui/react/progress';
+import { VariantProps } from 'class-variance-authority';
+
+/**
+ * Progress — Fluent 2-styled, shadcn-API progress bar.
+ *
+ * Base UI ships a Progress primitive (`@base-ui/react/progress`, imported as
+ * a namespace exposing `Root` / `Track` / `Indicator` / `Label` / `Value`,
+ * matching the actual export shape in node_modules — same pattern as
+ * `avatar.tsx`). This is the batch's Base UI case (conventions §9): value→
+ * percentage math, `role="progressbar"`, `aria-valuemin`/`aria-valuemax`/
+ * `aria-valuenow`/`aria-valuetext` wiring, and indeterminate detection
+ * (`aria-valuenow` correctly omitted when `value` is `null`/`undefined`) are
+ * exactly the kind of genuine behavior a primitive should own rather than
+ * hand-rolling ARIA math. `Root`, `Track`, and `Indicator` are composed
+ * internally into a single `Progress` export to match shadcn's flat API
+ * (`<Progress value={33} />`) — the sub-parts are not re-exported, since the
+ * spec calls for one component, not shadcn's newer multi-part variant.
+ *
+ * `"use client"` is intentionally omitted, mirroring `avatar.tsx`'s
+ * reasoning: Base UI's Root/Track/Indicator modules each carry their own
+ * `'use client'` directive at the source level, so they are already client
+ * boundaries on their own. This wrapper file has no hooks/handlers of its
+ * own — it only forwards props and branches on a plain value comparison — so
+ * it stays a plain (server-renderable) module per conventions §2. Confirmed
+ * via `pnpm typecheck` + the test suite.
+ *
+ * Aesthetics follow Fluent 2's ProgressBar, which is thin — 2px (`h-0.5`),
+ * not shadcn's 8px `h-2` default. This is a deliberate, documented deviation
+ * from the shadcn reference; consumers who want the shadcn-thick bar (or any
+ * other height) can override via `className` (`cn` + tailwind-merge resolve
+ * the conflict, last utility wins). Track is `bg-secondary` (flat neutral
+ * fill) with `rounded-full overflow-hidden`; the indicator is `bg-primary`,
+ * also `rounded-full`.
+ *
+ * Intent variants: Fluent's ProgressBar ships a `State` axis (Default/Success/
+ * Error/Warning), so `Progress` exposes a matching `variant` prop
+ * (`default`/`success`/`warning`/`destructive`) via `progressVariants` — a
+ * `cva` on the indicator sub-part, the same precedent `spinner.tsx` sets by
+ * putting its `cva` on the inner glyph. `success` (`bg-success` `#107c10`) and
+ * `warning` (`bg-warning` `#da3b01`) are exact hex matches to Fluent's
+ * Success/Warning `State`. `destructive` reuses `bg-destructive` (`#d13438`)
+ * rather than Fluent's filled-status `#c50f1f`: this kit standardizes on one
+ * destructive red across Badge/Progress/Label per the single-red policy
+ * (docs/design/tokens-research.md §12.9), keeping consistency over a one-off
+ * fifth red token. The indicator width is driven by Base UI's own computed
+ * `style.width` percentage (`ProgressIndicator` reads `value`/`min`/`max`
+ * from context and sets `width: ${percent}%` — this is "the cleaner" of the
+ * two width strategies the spec allows: it needs no manual percent math on
+ * our side, unlike shadcn's classic `translateX(-${100 - value}%)` recipe).
+ * `transition-[width]` (not `transition-all`/`transform`, since Base UI
+ * animates `width` directly) plus the token duration/easing pair animates
+ * value changes; reduced motion is handled automatically by the token layer
+ * (conventions §3.5) since `duration-normal`/`ease-ease` are token-driven.
+ *
+ * Indeterminate (`value` is `null`/undefined): Fluent's sliding segment. The
+ * indicator renders a `w-1/3` segment driven by the token-layer
+ * `--animate-progress-indeterminate` keyframes (tokens.css): it travels from
+ * fully off-track left (`translate: -100%` of its own width) to fully
+ * off-track right (`300%`), clipped by the root's `overflow-hidden`.
+ *
+ * Under `prefers-reduced-motion` the slide is fully stopped via
+ * `motion-reduce:animate-none` (same call as `skeleton.tsx`, not `spinner.tsx`'s
+ * slow-down): the pulse carries no information a reduced-motion user would
+ * lose by holding it still — the indeterminate/busy state is conveyed by the
+ * `role="progressbar"` + omitted `aria-valuenow` to assistive tech and by the
+ * bar's presence to sighted users — 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` applies and
+ * has to be declared here explicitly.
+ *
+ * `role="progressbar"` requires an accessible name; Base UI does not default
+ * one. Pass `aria-label` (forwarded straight through to the root via
+ * `...props`) or compose Base UI's own `Progress.Label` alongside this
+ * component — consumers must supply one or the other.
+ */
+declare const progressVariants: (props?: ({
+    variant?: "default" | "destructive" | "success" | "warning" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+declare function Progress({ className, value, variant, size, ...props }: Omit<ComponentProps<typeof Progress$1.Root>, "value"> & VariantProps<typeof progressVariants> & {
+    /**
+     * 0–100 (relative to `min`/`max`, both default 0/100). Omit or pass `null`
+     * for the indeterminate state — Base UI's Root then correctly omits
+     * `aria-valuenow` and this wrapper renders the pulsing stand-in indicator.
+     */
+    value?: number | null;
+    /**
+     * Fluent ProgressBar `Size` axis: `default` = Medium (2px track),
+     * `lg` = Large (4px) — surfaced by the pass-1 Figma validation.
+     */
+    size?: "default" | "lg";
+}): react.JSX.Element;
+
+export { Progress, progressVariants };

package/dist/components/ui/progress.js

@@ -0,0 +1,67 @@
+import { jsx } from "react/jsx-runtime";
+import { Progress as ProgressPrimitive } from "@base-ui/react/progress";
+import { cva } from "class-variance-authority";
+import { cn } from "../../lib/utils.js";
+const progressVariants = cva(
+  "h-full rounded-full transition-[width] duration-normal ease-ease",
+  {
+    variants: {
+      variant: {
+        default: "bg-primary",
+        success: "bg-success",
+        warning: "bg-warning",
+        destructive: "bg-destructive"
+      }
+    },
+    defaultVariants: {
+      variant: "default"
+    }
+  }
+);
+function Progress({
+  className,
+  value,
+  variant = "default",
+  size = "default",
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    ProgressPrimitive.Root,
+    {
+      "data-slot": "progress",
+      "data-variant": variant,
+      "data-size": size,
+      value: value ?? null,
+      className: cn(
+        "relative w-full overflow-hidden rounded-full bg-secondary",
+        size === "lg" ? "h-1" : "h-0.5",
+        className
+      ),
+      ...props,
+      children: /* @__PURE__ */ jsx(
+        ProgressPrimitive.Track,
+        {
+          "data-slot": "progress-track",
+          className: "relative h-full w-full",
+          children: /* @__PURE__ */ jsx(
+            ProgressPrimitive.Indicator,
+            {
+              "data-slot": "progress-indicator",
+              className: cn(
+                progressVariants({ variant }),
+                // Fluent indeterminate: the token-layer keyframes slide the 1/3
+                // segment from off-track left to off-track right (root clips).
+                value == null && "w-1/3 animate-progress-indeterminate motion-reduce:animate-none"
+              )
+            }
+          )
+        }
+      )
+    }
+  );
+}
+export {
+  Progress,
+  progressVariants
+};
+//# sourceMappingURL=progress.js.map