@graundtech/fluent2-react-kit 0.5.1

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

@@ -0,0 +1,36 @@
+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';
+
+/**
+ * Badge — Fluent 2-styled, shadcn-API badge.
+ *
+ * Aesthetics follow Fluent 2 (a 4px-radius chip — Fluent's fixed `medium`
+ * corner token, non-scaling, NOT a full pill — compact 20px height, 10px/600
+ * caption-2 label with 4px horizontal padding, flat filled surfaces, brand/
+ * status color tokens); the prop surface (`variant`, `asChild`,
+ * `badgeVariants`) follows shadcn/ui.
+ *
+ * Geometry is spec-exact: `rounded-md` (`--radius-md` = 4px, the Fluent badge
+ * corner token used at every badge size), `px-1` (4px = `spacingHorizontalXS`),
+ * `text-[10px]/[14px]` (Fluent "Caption 2 Strong", == the `--text-caption2`
+ * token value — see the layout comment for why the arbitrary length is used
+ * over the `text-caption2` utility) + `font-semibold` (600), fixed `h-5`
+ * (20px Medium).
+ *
+ * Server-safe: no `"use client"`, no hooks/handlers — the React import is
+ * type-only, so the file can be dropped straight into an RSC tree.
+ *
+ * Hover/active state steps only engage when the badge is rendered as an
+ * interactive element via `asChild` (`[a&]:` targets the case where the
+ * rendered tag is an `<a>`); a plain status label stays static.
+ */
+declare const badgeVariants: (props?: ({
+    variant?: "default" | "destructive" | "success" | "warning" | "secondary" | "outline" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+declare function Badge({ className, variant, asChild, ...props }: ComponentProps<"span"> & VariantProps<typeof badgeVariants> & {
+    asChild?: boolean;
+}): react.JSX.Element;
+
+export { Badge, badgeVariants };

package/dist/components/ui/badge.js

@@ -0,0 +1,81 @@
+import { jsx } from "react/jsx-runtime";
+import { Slot } from "@radix-ui/react-slot";
+import { cva } from "class-variance-authority";
+import { cn } from "../../lib/utils.js";
+const badgeVariants = cva(
+  [
+    // layout — Fluent 4px chip, compact 20px height, centered caption-2 label
+    "inline-flex h-5 w-fit shrink-0 items-center justify-center gap-1 whitespace-nowrap",
+    // Fluent "Caption 2 Strong" = 10px/14px, weight 600. Expressed as the
+    // arbitrary `text-[10px]/[14px]` rather than the `text-caption2` token
+    // utility on purpose: every variant also sets a `text-*` color, and
+    // tailwind-merge (unaware of the custom `caption2` font-size) treats
+    // `text-caption2` as a text-color and drops it behind the variant color;
+    // the `--text-caption2` var also lives in `@theme inline`, which isn't
+    // emitted to :root, so a `text-(length:--text-caption2)` reference would be
+    // undefined at runtime. The arbitrary length is twMerge-safe and resolves
+    // with no runtime var. Values equal the `--text-caption2` token exactly.
+    "rounded-md border px-1 text-[10px]/[14px] font-semibold select-none",
+    // motion — token duration + Fluent easyEase curve; honors prefers-reduced-motion
+    // automatically (the duration tokens collapse to 0.01ms in tokens.css).
+    "outline-none transition-colors duration-fast ease-ease",
+    // focus — Fluent double-stroke approximation: 2px brand ring + 2px surface-colored gap.
+    // Only reachable when the badge is an interactive `asChild` element.
+    "focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background",
+    // invalid — shadcn aria-invalid treatment
+    "aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40",
+    // icon defaults
+    "[&>svg]:pointer-events-none [&>svg]:size-3"
+  ],
+  {
+    variants: {
+      variant: {
+        // Fluent brand filled — flat, full brand state ramp on `asChild` links
+        // (spec §2.5): rest brand-80 → hover brand-70 → pressed brand-60 (light);
+        // rest brand-70 → hover brand-80 → pressed brand-60 (dark).
+        default: "border-transparent bg-primary text-primary-foreground [a&]:hover:bg-brand-70 [a&]:active:bg-brand-60 dark:[a&]:hover:bg-brand-80",
+        // Fluent standard/neutral — filled neutral surface + subtle border.
+        secondary: "border-border bg-secondary text-secondary-foreground [a&]:hover:bg-accent [a&]:active:bg-input dark:[a&]:hover:bg-input",
+        // Fluent danger — red fill. No red ramp is exposed, so hover/pressed
+        // step via opacity; the focus ring switches to destructive.
+        destructive: "border-transparent bg-destructive text-destructive-foreground [a&]:hover:bg-destructive/90 [a&]:active:bg-destructive/80 focus-visible:ring-destructive",
+        // Fluent outline — transparent + border, neutral hover.
+        outline: "border-border bg-transparent text-foreground [a&]:hover:bg-accent [a&]:hover:text-accent-foreground [a&]:active:bg-accent/80 dark:[a&]:hover:bg-input/50",
+        // Fluent success — green fill, AA-safe foreground from the status token pair.
+        success: "border-transparent bg-success text-success-foreground [a&]:hover:bg-success/90 [a&]:active:bg-success/80",
+        // Fluent warning badge — bright orange chip (`#f7630c`) with DARK
+        // static text (`#242424`), the opposite foreground polarity from
+        // --warning's white text. Uses the dedicated `--warning-badge` pair
+        // (~4.98:1 AA), matching Figma's WarningBackground3 + NeutralForeground1
+        // Static, so Alert's darkOrange --warning stays put (single-source
+        // decoupling; see tokens.css + tokens-research.md §12.9).
+        warning: "border-transparent bg-warning-badge text-warning-badge-foreground [a&]:hover:bg-warning-badge/90 [a&]:active:bg-warning-badge/80"
+      }
+    },
+    defaultVariants: {
+      variant: "default"
+    }
+  }
+);
+function Badge({
+  className,
+  variant = "default",
+  asChild = false,
+  ...props
+}) {
+  const Comp = asChild ? Slot : "span";
+  return /* @__PURE__ */ jsx(
+    Comp,
+    {
+      "data-slot": "badge",
+      "data-variant": variant,
+      className: cn(badgeVariants({ variant, className })),
+      ...props
+    }
+  );
+}
+export {
+  Badge,
+  badgeVariants
+};
+//# sourceMappingURL=badge.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/ui/badge.tsx"],"sourcesContent":["import { Slot } from \"@radix-ui/react-slot\";\nimport { cva, type VariantProps } from \"class-variance-authority\";\nimport type { ComponentProps } from \"react\";\n\nimport { cn } from \"../../lib/utils\";\n\n/**\n * Badge — Fluent 2-styled, shadcn-API badge.\n *\n * Aesthetics follow Fluent 2 (a 4px-radius chip — Fluent's fixed `medium`\n * corner token, non-scaling, NOT a full pill — compact 20px height, 10px/600\n * caption-2 label with 4px horizontal padding, flat filled surfaces, brand/\n * status color tokens); the prop surface (`variant`, `asChild`,\n * `badgeVariants`) follows shadcn/ui.\n *\n * Geometry is spec-exact: `rounded-md` (`--radius-md` = 4px, the Fluent badge\n * corner token used at every badge size), `px-1` (4px = `spacingHorizontalXS`),\n * `text-[10px]/[14px]` (Fluent \"Caption 2 Strong\", == the `--text-caption2`\n * token value — see the layout comment for why the arbitrary length is used\n * over the `text-caption2` utility) + `font-semibold` (600), fixed `h-5`\n * (20px Medium).\n *\n * Server-safe: no `\"use client\"`, no hooks/handlers — the React import is\n * type-only, so the file can be dropped straight into an RSC tree.\n *\n * Hover/active state steps only engage when the badge is rendered as an\n * interactive element via `asChild` (`[a&]:` targets the case where the\n * rendered tag is an `<a>`); a plain status label stays static.\n */\nconst badgeVariants = cva(\n  [\n    // layout — Fluent 4px chip, compact 20px height, centered caption-2 label\n    \"inline-flex h-5 w-fit shrink-0 items-center justify-center gap-1 whitespace-nowrap\",\n    // Fluent \"Caption 2 Strong\" = 10px/14px, weight 600. Expressed as the\n    // arbitrary `text-[10px]/[14px]` rather than the `text-caption2` token\n    // utility on purpose: every variant also sets a `text-*` color, and\n    // tailwind-merge (unaware of the custom `caption2` font-size) treats\n    // `text-caption2` as a text-color and drops it behind the variant color;\n    // the `--text-caption2` var also lives in `@theme inline`, which isn't\n    // emitted to :root, so a `text-(length:--text-caption2)` reference would be\n    // undefined at runtime. The arbitrary length is twMerge-safe and resolves\n    // with no runtime var. Values equal the `--text-caption2` token exactly.\n    \"rounded-md border px-1 text-[10px]/[14px] font-semibold select-none\",\n    // motion — token duration + Fluent easyEase curve; honors prefers-reduced-motion\n    // automatically (the duration tokens collapse to 0.01ms in tokens.css).\n    \"outline-none transition-colors duration-fast ease-ease\",\n    // focus — Fluent double-stroke approximation: 2px brand ring + 2px surface-colored gap.\n    // Only reachable when the badge is an interactive `asChild` element.\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\n    \"aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40\",\n    // icon defaults\n    \"[&>svg]:pointer-events-none [&>svg]:size-3\",\n  ],\n  {\n    variants: {\n      variant: {\n        // Fluent brand filled — flat, full brand state ramp on `asChild` links\n        // (spec §2.5): rest brand-80 → hover brand-70 → pressed brand-60 (light);\n        // rest brand-70 → hover brand-80 → pressed brand-60 (dark).\n        default:\n          \"border-transparent bg-primary text-primary-foreground [a&]:hover:bg-brand-70 [a&]:active:bg-brand-60 dark:[a&]:hover:bg-brand-80\",\n        // Fluent standard/neutral — filled neutral surface + subtle border.\n        secondary:\n          \"border-border bg-secondary text-secondary-foreground [a&]:hover:bg-accent [a&]:active:bg-input dark:[a&]:hover:bg-input\",\n        // Fluent danger — red fill. No red ramp is exposed, so hover/pressed\n        // step via opacity; the focus ring switches to destructive.\n        destructive:\n          \"border-transparent bg-destructive text-destructive-foreground [a&]:hover:bg-destructive/90 [a&]:active:bg-destructive/80 focus-visible:ring-destructive\",\n        // Fluent outline — transparent + border, neutral hover.\n        outline:\n          \"border-border bg-transparent text-foreground [a&]:hover:bg-accent [a&]:hover:text-accent-foreground [a&]:active:bg-accent/80 dark:[a&]:hover:bg-input/50\",\n        // Fluent success — green fill, AA-safe foreground from the status token pair.\n        success:\n          \"border-transparent bg-success text-success-foreground [a&]:hover:bg-success/90 [a&]:active:bg-success/80\",\n        // Fluent warning badge — bright orange chip (`#f7630c`) with DARK\n        // static text (`#242424`), the opposite foreground polarity from\n        // --warning's white text. Uses the dedicated `--warning-badge` pair\n        // (~4.98:1 AA), matching Figma's WarningBackground3 + NeutralForeground1\n        // Static, so Alert's darkOrange --warning stays put (single-source\n        // decoupling; see tokens.css + tokens-research.md §12.9).\n        warning:\n          \"border-transparent bg-warning-badge text-warning-badge-foreground [a&]:hover:bg-warning-badge/90 [a&]:active:bg-warning-badge/80\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n    },\n  }\n);\n\nfunction Badge({\n  className,\n  variant = \"default\",\n  asChild = false,\n  ...props\n}: ComponentProps<\"span\"> &\n  VariantProps<typeof badgeVariants> & {\n    asChild?: boolean;\n  }) {\n  const Comp = asChild ? Slot : \"span\";\n\n  return (\n    <Comp\n      data-slot=\"badge\"\n      data-variant={variant}\n      className={cn(badgeVariants({ variant, className }))}\n      {...props}\n    />\n  );\n}\n\nexport { Badge, badgeVariants };\n"],"mappings":"AAuGI;AAvGJ,SAAS,YAAY;AACrB,SAAS,WAA8B;AAGvC,SAAS,UAAU;AAyBnB,MAAM,gBAAgB;AAAA,EACpB;AAAA;AAAA,IAEE;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAUA;AAAA;AAAA;AAAA,IAGA;AAAA;AAAA;AAAA,IAGA;AAAA;AAAA,IAEA;AAAA;AAAA,IAEA;AAAA,EACF;AAAA,EACA;AAAA,IACE,UAAU;AAAA,MACR,SAAS;AAAA;AAAA;AAAA;AAAA,QAIP,SACE;AAAA;AAAA,QAEF,WACE;AAAA;AAAA;AAAA,QAGF,aACE;AAAA;AAAA,QAEF,SACE;AAAA;AAAA,QAEF,SACE;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,QAOF,SACE;AAAA,MACJ;AAAA,IACF;AAAA,IACA,iBAAiB;AAAA,MACf,SAAS;AAAA,IACX;AAAA,EACF;AACF;AAEA,SAAS,MAAM;AAAA,EACb;AAAA,EACA,UAAU;AAAA,EACV,UAAU;AAAA,EACV,GAAG;AACL,GAGK;AACH,QAAM,OAAO,UAAU,OAAO;AAE9B,SACE;AAAA,IAAC;AAAA;AAAA,MACC,aAAU;AAAA,MACV,gBAAc;AAAA,MACd,WAAW,GAAG,cAAc,EAAE,SAAS,UAAU,CAAC,CAAC;AAAA,MAClD,GAAG;AAAA;AAAA,EACN;AAEJ;","names":[]}

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

@@ -0,0 +1,53 @@
+import * as react from 'react';
+import { ComponentProps } from 'react';
+
+/**
+ * Breadcrumb — Fluent 2-styled, shadcn-API breadcrumb family.
+ *
+ * Pure markup, matching shadcn/ui's Breadcrumb structure exactly: `Breadcrumb`
+ * (`<nav aria-label="breadcrumb">`), `BreadcrumbList` (`<ol>`), `BreadcrumbItem`
+ * (`<li>`), `BreadcrumbLink` (`<a>`, `asChild`-capable via Radix `Slot`),
+ * `BreadcrumbPage` (`<span role="link" aria-current="page">` for the
+ * non-interactive current step), `BreadcrumbSeparator` (`<li
+ * role="presentation" aria-hidden="true">`) and `BreadcrumbEllipsis` (same
+ * presentation pattern, for a collapsed run of items) —
+ * https://ui.shadcn.com/docs/components/breadcrumb.
+ *
+ * Two deliberate divergences from shadcn, both driven by this kit's
+ * conventions doc (§9):
+ *
+ * 1. `BreadcrumbSeparator`'s default glyph and `BreadcrumbEllipsis`'s dots are
+ *    inline `<svg>`, not lucide's `ChevronRight`/`MoreHorizontal` (shadcn) or
+ *    `@fluentui/react-icons` (this kit's usual icon source). Importing from
+ *    `@fluentui/react-icons` forces `"use client"` onto the whole file (its
+ *    icon sizing module calls a client-only Griffel API at module scope — see
+ *    conventions §9 / `select.tsx`), which would needlessly turn this static
+ *    markup component into a client boundary. An inline SVG keeps `Breadcrumb`
+ *    a Server Component, matching `Card`/`Separator`.
+ * 2. `BreadcrumbLink`'s hover treatment intentionally mirrors this kit's own
+ *    `Link` component's `default` variant (`hover:text-foreground`, color
+ *    transition only, underline only on hover via the surrounding
+ *    `hover:underline` here is *not* applied — shadcn's breadcrumb link has no
+ *    underline at all, even on hover, since it sits in a compact trail rather
+ *    than prose) rather than inventing a new recipe: `hover:text-foreground
+ *    transition-colors duration-fast ease-ease` plus the standard
+ *    focus-visible ring (conventions §4). Kept text-only (no underline) to
+ *    match shadcn's breadcrumb parity goal; reach for `Link` directly if a
+ *    consumer wants the underlined treatment.
+ *
+ * No `variant`/`size` props and no `cva` table — shadcn's Breadcrumb ships
+ * none, so every part is a plain function component (matches `Card`).
+ *
+ * Server-safe: no `"use client"`, no hooks — the React import is type-only.
+ */
+declare function Breadcrumb({ className, ...props }: ComponentProps<"nav">): react.JSX.Element;
+declare function BreadcrumbList({ className, ...props }: ComponentProps<"ol">): react.JSX.Element;
+declare function BreadcrumbItem({ className, ...props }: ComponentProps<"li">): react.JSX.Element;
+declare function BreadcrumbLink({ asChild, className, ...props }: ComponentProps<"a"> & {
+    asChild?: boolean;
+}): react.JSX.Element;
+declare function BreadcrumbPage({ className, ...props }: ComponentProps<"span">): react.JSX.Element;
+declare function BreadcrumbSeparator({ children, className, ...props }: ComponentProps<"li">): react.JSX.Element;
+declare function BreadcrumbEllipsis({ className, ...props }: ComponentProps<"span">): react.JSX.Element;
+
+export { Breadcrumb, BreadcrumbEllipsis, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator };

package/dist/components/ui/breadcrumb.js

@@ -0,0 +1,149 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Slot } from "@radix-ui/react-slot";
+import { cn } from "../../lib/utils.js";
+function Breadcrumb({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "nav",
+    {
+      "aria-label": "breadcrumb",
+      "data-slot": "breadcrumb",
+      className: cn(className),
+      ...props
+    }
+  );
+}
+function BreadcrumbList({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "ol",
+    {
+      "data-slot": "breadcrumb-list",
+      className: cn(
+        // Trail text is Fluent NeutralForeground2 (#424242), one grey step
+        // darker than muted-foreground (Figma validation pass 2, 9077:5763).
+        "flex flex-wrap items-center gap-1.5 text-sm text-foreground-2 sm:gap-2.5",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function BreadcrumbItem({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "li",
+    {
+      "data-slot": "breadcrumb-item",
+      className: cn("inline-flex items-center gap-1.5", className),
+      ...props
+    }
+  );
+}
+function BreadcrumbLink({
+  asChild = false,
+  className,
+  ...props
+}) {
+  const Comp = asChild ? Slot : "a";
+  return /* @__PURE__ */ jsx(
+    Comp,
+    {
+      "data-slot": "breadcrumb-link",
+      className: cn(
+        // Fluent breadcrumb items are button-like pills — SubtleBackground
+        // hover/pressed fills on a 4px radius (the Figma item symbols are
+        // literally Type=Button; validation pass 2, node 9077:5740). The fill
+        // uses the kit's standard subtle-hover pair (--accent), the same
+        // one-grey-step drift already accepted for Select/Menu highlights.
+        "rounded-md px-1.5 py-0.5 outline-none transition-colors duration-fast ease-ease hover:bg-accent hover:text-foreground active:bg-accent/80",
+        "focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function BreadcrumbPage({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      "data-slot": "breadcrumb-page",
+      role: "link",
+      "aria-disabled": "true",
+      "aria-current": "page",
+      className: cn("px-1.5 py-0.5 font-semibold", className),
+      ...props
+    }
+  );
+}
+function BreadcrumbSeparator({
+  children,
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    "li",
+    {
+      "data-slot": "breadcrumb-separator",
+      role: "presentation",
+      "aria-hidden": "true",
+      className: cn("[&>svg]:size-3.5", className),
+      ...props,
+      children: children ?? /* @__PURE__ */ jsx(
+        "svg",
+        {
+          viewBox: "0 0 16 16",
+          fill: "none",
+          xmlns: "http://www.w3.org/2000/svg",
+          children: /* @__PURE__ */ jsx(
+            "path",
+            {
+              d: "M6 3.5L10 8L6 12.5",
+              stroke: "currentColor",
+              strokeWidth: "1.5",
+              strokeLinecap: "round",
+              strokeLinejoin: "round"
+            }
+          )
+        }
+      )
+    }
+  );
+}
+function BreadcrumbEllipsis({ className, ...props }) {
+  return /* @__PURE__ */ jsxs(
+    "span",
+    {
+      "data-slot": "breadcrumb-ellipsis",
+      role: "presentation",
+      "aria-hidden": "true",
+      className: cn("flex size-6 items-center justify-center", className),
+      ...props,
+      children: [
+        /* @__PURE__ */ jsxs(
+          "svg",
+          {
+            viewBox: "0 0 16 16",
+            fill: "none",
+            className: "size-4",
+            xmlns: "http://www.w3.org/2000/svg",
+            children: [
+              /* @__PURE__ */ jsx("circle", { cx: "2.5", cy: "8", r: "1.25", fill: "currentColor" }),
+              /* @__PURE__ */ jsx("circle", { cx: "8", cy: "8", r: "1.25", fill: "currentColor" }),
+              /* @__PURE__ */ jsx("circle", { cx: "13.5", cy: "8", r: "1.25", fill: "currentColor" })
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx("span", { className: "sr-only", children: "More" })
+      ]
+    }
+  );
+}
+export {
+  Breadcrumb,
+  BreadcrumbEllipsis,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  BreadcrumbList,
+  BreadcrumbPage,
+  BreadcrumbSeparator
+};
+//# sourceMappingURL=breadcrumb.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/ui/breadcrumb.tsx"],"sourcesContent":["import { Slot } from \"@radix-ui/react-slot\";\nimport type { ComponentProps } from \"react\";\n\nimport { cn } from \"../../lib/utils\";\n\n/**\n * Breadcrumb — Fluent 2-styled, shadcn-API breadcrumb family.\n *\n * Pure markup, matching shadcn/ui's Breadcrumb structure exactly: `Breadcrumb`\n * (`<nav aria-label=\"breadcrumb\">`), `BreadcrumbList` (`<ol>`), `BreadcrumbItem`\n * (`<li>`), `BreadcrumbLink` (`<a>`, `asChild`-capable via Radix `Slot`),\n * `BreadcrumbPage` (`<span role=\"link\" aria-current=\"page\">` for the\n * non-interactive current step), `BreadcrumbSeparator` (`<li\n * role=\"presentation\" aria-hidden=\"true\">`) and `BreadcrumbEllipsis` (same\n * presentation pattern, for a collapsed run of items) —\n * https://ui.shadcn.com/docs/components/breadcrumb.\n *\n * Two deliberate divergences from shadcn, both driven by this kit's\n * conventions doc (§9):\n *\n * 1. `BreadcrumbSeparator`'s default glyph and `BreadcrumbEllipsis`'s dots are\n *    inline `<svg>`, not lucide's `ChevronRight`/`MoreHorizontal` (shadcn) or\n *    `@fluentui/react-icons` (this kit's usual icon source). Importing from\n *    `@fluentui/react-icons` forces `\"use client\"` onto the whole file (its\n *    icon sizing module calls a client-only Griffel API at module scope — see\n *    conventions §9 / `select.tsx`), which would needlessly turn this static\n *    markup component into a client boundary. An inline SVG keeps `Breadcrumb`\n *    a Server Component, matching `Card`/`Separator`.\n * 2. `BreadcrumbLink`'s hover treatment intentionally mirrors this kit's own\n *    `Link` component's `default` variant (`hover:text-foreground`, color\n *    transition only, underline only on hover via the surrounding\n *    `hover:underline` here is *not* applied — shadcn's breadcrumb link has no\n *    underline at all, even on hover, since it sits in a compact trail rather\n *    than prose) rather than inventing a new recipe: `hover:text-foreground\n *    transition-colors duration-fast ease-ease` plus the standard\n *    focus-visible ring (conventions §4). Kept text-only (no underline) to\n *    match shadcn's breadcrumb parity goal; reach for `Link` directly if a\n *    consumer wants the underlined treatment.\n *\n * No `variant`/`size` props and no `cva` table — shadcn's Breadcrumb ships\n * none, so every part is a plain function component (matches `Card`).\n *\n * Server-safe: no `\"use client\"`, no hooks — the React import is type-only.\n */\n\nfunction Breadcrumb({ className, ...props }: ComponentProps<\"nav\">) {\n  return (\n    <nav\n      aria-label=\"breadcrumb\"\n      data-slot=\"breadcrumb\"\n      className={cn(className)}\n      {...props}\n    />\n  );\n}\n\nfunction BreadcrumbList({ className, ...props }: ComponentProps<\"ol\">) {\n  return (\n    <ol\n      data-slot=\"breadcrumb-list\"\n      className={cn(\n        // Trail text is Fluent NeutralForeground2 (#424242), one grey step\n        // darker than muted-foreground (Figma validation pass 2, 9077:5763).\n        \"flex flex-wrap items-center gap-1.5 text-sm text-foreground-2 sm:gap-2.5\",\n        className\n      )}\n      {...props}\n    />\n  );\n}\n\nfunction BreadcrumbItem({ className, ...props }: ComponentProps<\"li\">) {\n  return (\n    <li\n      data-slot=\"breadcrumb-item\"\n      className={cn(\"inline-flex items-center gap-1.5\", className)}\n      {...props}\n    />\n  );\n}\n\nfunction BreadcrumbLink({\n  asChild = false,\n  className,\n  ...props\n}: ComponentProps<\"a\"> & { asChild?: boolean }) {\n  const Comp = asChild ? Slot : \"a\";\n\n  return (\n    <Comp\n      data-slot=\"breadcrumb-link\"\n      className={cn(\n        // Fluent breadcrumb items are button-like pills — SubtleBackground\n        // hover/pressed fills on a 4px radius (the Figma item symbols are\n        // literally Type=Button; validation pass 2, node 9077:5740). The fill\n        // uses the kit's standard subtle-hover pair (--accent), the same\n        // one-grey-step drift already accepted for Select/Menu highlights.\n        \"rounded-md px-1.5 py-0.5 outline-none transition-colors duration-fast ease-ease hover:bg-accent hover:text-foreground active:bg-accent/80\",\n        \"focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background\",\n        className\n      )}\n      {...props}\n    />\n  );\n}\n\nfunction BreadcrumbPage({ className, ...props }: ComponentProps<\"span\">) {\n  return (\n    <span\n      data-slot=\"breadcrumb-page\"\n      role=\"link\"\n      aria-disabled=\"true\"\n      aria-current=\"page\"\n      // Current page is emphasized by WEIGHT ONLY (Body 1 -> Body 1 Strong,\n      // same NeutralForeground2 trail color) — Figma validation pass 2, node\n      // 9077:5783. Padding mirrors the link pill so items align.\n      className={cn(\"px-1.5 py-0.5 font-semibold\", className)}\n      {...props}\n    />\n  );\n}\n\nfunction BreadcrumbSeparator({\n  children,\n  className,\n  ...props\n}: ComponentProps<\"li\">) {\n  return (\n    <li\n      data-slot=\"breadcrumb-separator\"\n      role=\"presentation\"\n      aria-hidden=\"true\"\n      className={cn(\"[&>svg]:size-3.5\", className)}\n      {...props}\n    >\n      {children ?? (\n        <svg\n          viewBox=\"0 0 16 16\"\n          fill=\"none\"\n          xmlns=\"http://www.w3.org/2000/svg\"\n        >\n          <path\n            d=\"M6 3.5L10 8L6 12.5\"\n            stroke=\"currentColor\"\n            strokeWidth=\"1.5\"\n            strokeLinecap=\"round\"\n            strokeLinejoin=\"round\"\n          />\n        </svg>\n      )}\n    </li>\n  );\n}\n\nfunction BreadcrumbEllipsis({ className, ...props }: ComponentProps<\"span\">) {\n  return (\n    <span\n      data-slot=\"breadcrumb-ellipsis\"\n      role=\"presentation\"\n      aria-hidden=\"true\"\n      className={cn(\"flex size-6 items-center justify-center\", className)}\n      {...props}\n    >\n      <svg\n        viewBox=\"0 0 16 16\"\n        fill=\"none\"\n        className=\"size-4\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n      >\n        <circle cx=\"2.5\" cy=\"8\" r=\"1.25\" fill=\"currentColor\" />\n        <circle cx=\"8\" cy=\"8\" r=\"1.25\" fill=\"currentColor\" />\n        <circle cx=\"13.5\" cy=\"8\" r=\"1.25\" fill=\"currentColor\" />\n      </svg>\n      <span className=\"sr-only\">More</span>\n    </span>\n  );\n}\n\nexport {\n  Breadcrumb,\n  BreadcrumbList,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n  BreadcrumbEllipsis,\n};\n"],"mappings":"AA+CI,cAoHE,YApHF;AA/CJ,SAAS,YAAY;AAGrB,SAAS,UAAU;AA0CnB,SAAS,WAAW,EAAE,WAAW,GAAG,MAAM,GAA0B;AAClE,SACE;AAAA,IAAC;AAAA;AAAA,MACC,cAAW;AAAA,MACX,aAAU;AAAA,MACV,WAAW,GAAG,SAAS;AAAA,MACtB,GAAG;AAAA;AAAA,EACN;AAEJ;AAEA,SAAS,eAAe,EAAE,WAAW,GAAG,MAAM,GAAyB;AACrE,SACE;AAAA,IAAC;AAAA;AAAA,MACC,aAAU;AAAA,MACV,WAAW;AAAA;AAAA;AAAA,QAGT;AAAA,QACA;AAAA,MACF;AAAA,MACC,GAAG;AAAA;AAAA,EACN;AAEJ;AAEA,SAAS,eAAe,EAAE,WAAW,GAAG,MAAM,GAAyB;AACrE,SACE;AAAA,IAAC;AAAA;AAAA,MACC,aAAU;AAAA,MACV,WAAW,GAAG,oCAAoC,SAAS;AAAA,MAC1D,GAAG;AAAA;AAAA,EACN;AAEJ;AAEA,SAAS,eAAe;AAAA,EACtB,UAAU;AAAA,EACV;AAAA,EACA,GAAG;AACL,GAAgD;AAC9C,QAAM,OAAO,UAAU,OAAO;AAE9B,SACE;AAAA,IAAC;AAAA;AAAA,MACC,aAAU;AAAA,MACV,WAAW;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,QAMT;AAAA,QACA;AAAA,QACA;AAAA,MACF;AAAA,MACC,GAAG;AAAA;AAAA,EACN;AAEJ;AAEA,SAAS,eAAe,EAAE,WAAW,GAAG,MAAM,GAA2B;AACvE,SACE;AAAA,IAAC;AAAA;AAAA,MACC,aAAU;AAAA,MACV,MAAK;AAAA,MACL,iBAAc;AAAA,MACd,gBAAa;AAAA,MAIb,WAAW,GAAG,+BAA+B,SAAS;AAAA,MACrD,GAAG;AAAA;AAAA,EACN;AAEJ;AAEA,SAAS,oBAAoB;AAAA,EAC3B;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAAyB;AACvB,SACE;AAAA,IAAC;AAAA;AAAA,MACC,aAAU;AAAA,MACV,MAAK;AAAA,MACL,eAAY;AAAA,MACZ,WAAW,GAAG,oBAAoB,SAAS;AAAA,MAC1C,GAAG;AAAA,MAEH,sBACC;AAAA,QAAC;AAAA;AAAA,UACC,SAAQ;AAAA,UACR,MAAK;AAAA,UACL,OAAM;AAAA,UAEN;AAAA,YAAC;AAAA;AAAA,cACC,GAAE;AAAA,cACF,QAAO;AAAA,cACP,aAAY;AAAA,cACZ,eAAc;AAAA,cACd,gBAAe;AAAA;AAAA,UACjB;AAAA;AAAA,MACF;AAAA;AAAA,EAEJ;AAEJ;AAEA,SAAS,mBAAmB,EAAE,WAAW,GAAG,MAAM,GAA2B;AAC3E,SACE;AAAA,IAAC;AAAA;AAAA,MACC,aAAU;AAAA,MACV,MAAK;AAAA,MACL,eAAY;AAAA,MACZ,WAAW,GAAG,2CAA2C,SAAS;AAAA,MACjE,GAAG;AAAA,MAEJ;AAAA;AAAA,UAAC;AAAA;AAAA,YACC,SAAQ;AAAA,YACR,MAAK;AAAA,YACL,WAAU;AAAA,YACV,OAAM;AAAA,YAEN;AAAA,kCAAC,YAAO,IAAG,OAAM,IAAG,KAAI,GAAE,QAAO,MAAK,gBAAe;AAAA,cACrD,oBAAC,YAAO,IAAG,KAAI,IAAG,KAAI,GAAE,QAAO,MAAK,gBAAe;AAAA,cACnD,oBAAC,YAAO,IAAG,QAAO,IAAG,KAAI,GAAE,QAAO,MAAK,gBAAe;AAAA;AAAA;AAAA,QACxD;AAAA,QACA,oBAAC,UAAK,WAAU,WAAU,kBAAI;AAAA;AAAA;AAAA,EAChC;AAEJ;","names":[]}

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

@@ -0,0 +1,24 @@
+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';
+
+/**
+ * Button — Fluent 2-styled, shadcn-API button.
+ *
+ * Aesthetics follow Fluent 2 (32px medium height, 14px/600 label, `rounded-md`
+ * = 4px, flat surfaces, brand state ramp for the primary); the prop surface
+ * (`variant`, `size`, `asChild`, `buttonVariants`) follows shadcn/ui.
+ *
+ * Server-safe: no `"use client"`, no hooks/handlers — the React import is
+ * type-only, so the file can be dropped straight into an RSC tree.
+ */
+declare const buttonVariants: (props?: ({
+    variant?: "link" | "default" | "destructive" | "secondary" | "outline" | "ghost" | null | undefined;
+    size?: "default" | "sm" | "lg" | "icon-sm" | "icon" | "icon-lg" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+declare function Button({ className, variant, size, asChild, ...props }: ComponentProps<"button"> & VariantProps<typeof buttonVariants> & {
+    asChild?: boolean;
+}): react.JSX.Element;
+
+export { Button, buttonVariants };

package/dist/components/ui/button.js

@@ -0,0 +1,86 @@
+import { jsx } from "react/jsx-runtime";
+import { Slot } from "@radix-ui/react-slot";
+import { cva } from "class-variance-authority";
+import { cn } from "../../lib/utils.js";
+const buttonVariants = cva(
+  [
+    // layout
+    "inline-flex shrink-0 items-center justify-center gap-2 whitespace-nowrap",
+    "rounded-md font-semibold select-none cursor-pointer",
+    // motion — token duration + Fluent easyEase curve; honors prefers-reduced-motion
+    // automatically (the duration tokens collapse to 0.01ms in tokens.css).
+    "outline-none transition-colors duration-fast ease-ease",
+    // disabled — opacity read (uniform across every variant/component; see conventions doc)
+    "disabled:pointer-events-none disabled:opacity-50",
+    // focus — Fluent double-stroke approximation: 2px brand ring + 2px surface-colored gap
+    "focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background",
+    // invalid — shadcn aria-invalid treatment
+    "aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40",
+    // icon defaults
+    "[&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4"
+  ],
+  {
+    variants: {
+      variant: {
+        // Fluent primary — brand fill, flat, full brand state ramp (spec §2.5).
+        // rest brand-80 → hover brand-70 → pressed brand-60 (light);
+        // rest brand-70 → hover brand-80 → pressed brand-60 (dark).
+        default: "bg-primary text-primary-foreground hover:bg-brand-70 active:bg-brand-60 dark:hover:bg-brand-80",
+        // Fluent danger — red fill. No red ramp is exposed, so hover/pressed
+        // step via opacity; the focus ring switches to destructive.
+        destructive: "bg-destructive text-destructive-foreground hover:bg-destructive/90 active:bg-destructive/80 focus-visible:ring-destructive",
+        // Fluent standard/neutral — filled neutral surface + border.
+        secondary: "border border-border bg-secondary text-secondary-foreground hover:bg-accent active:bg-input dark:hover:bg-input dark:active:bg-input",
+        // Fluent outline — transparent + border, neutral hover.
+        outline: "border border-input bg-transparent hover:bg-accent hover:text-accent-foreground active:bg-accent/80 dark:bg-input/30 dark:hover:bg-input/50 dark:active:bg-input/70",
+        // Fluent subtle — transparent, neutral hover only.
+        ghost: "hover:bg-accent hover:text-accent-foreground active:bg-accent/80 dark:hover:bg-accent/50 dark:active:bg-accent/70",
+        // Fluent link — brand text, underline on hover. Color ramp matches
+        // Fluent BrandForegroundLink (rest brand-70 → hover brand-60 → pressed
+        // brand-50 light; brand-100 → 110 → 120 dark), kept in sync with the
+        // Link component; the button keeps its own font-semibold weight.
+        link: "text-brand-70 underline-offset-4 hover:text-brand-60 hover:underline active:text-brand-50 dark:text-brand-100 dark:hover:text-brand-110 dark:active:text-brand-120"
+      },
+      size: {
+        // Fluent medium (default) — 32px height, 12px horizontal padding, 14px text.
+        default: "h-8 px-3 text-sm has-[>svg]:px-2.5",
+        // Fluent small — 24px height, 8px padding, 12px text, tighter gap.
+        sm: "h-6 gap-1.5 px-2 text-xs has-[>svg]:px-1.5",
+        // Fluent large — 40px height, 16px padding, 16px text.
+        lg: "h-10 px-4 text-base has-[>svg]:px-3.5",
+        // Square icon-only buttons at each height.
+        "icon-sm": "size-6",
+        icon: "size-8",
+        "icon-lg": "size-10"
+      }
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default"
+    }
+  }
+);
+function Button({
+  className,
+  variant = "default",
+  size = "default",
+  asChild = false,
+  ...props
+}) {
+  const Comp = asChild ? Slot : "button";
+  return /* @__PURE__ */ jsx(
+    Comp,
+    {
+      "data-slot": "button",
+      "data-variant": variant,
+      "data-size": size,
+      className: cn(buttonVariants({ variant, size, className })),
+      ...props
+    }
+  );
+}
+export {
+  Button,
+  buttonVariants
+};
+//# sourceMappingURL=button.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/ui/button.tsx"],"sourcesContent":["import { Slot } from \"@radix-ui/react-slot\";\nimport { cva, type VariantProps } from \"class-variance-authority\";\nimport type { ComponentProps } from \"react\";\n\nimport { cn } from \"../../lib/utils\";\n\n/**\n * Button — Fluent 2-styled, shadcn-API button.\n *\n * Aesthetics follow Fluent 2 (32px medium height, 14px/600 label, `rounded-md`\n * = 4px, flat surfaces, brand state ramp for the primary); the prop surface\n * (`variant`, `size`, `asChild`, `buttonVariants`) follows shadcn/ui.\n *\n * Server-safe: no `\"use client\"`, no hooks/handlers — the React import is\n * type-only, so the file can be dropped straight into an RSC tree.\n */\nconst buttonVariants = cva(\n  [\n    // layout\n    \"inline-flex shrink-0 items-center justify-center gap-2 whitespace-nowrap\",\n    \"rounded-md font-semibold select-none cursor-pointer\",\n    // motion — token duration + Fluent easyEase curve; honors prefers-reduced-motion\n    // automatically (the duration tokens collapse to 0.01ms in tokens.css).\n    \"outline-none transition-colors duration-fast ease-ease\",\n    // disabled — opacity read (uniform across every variant/component; see conventions doc)\n    \"disabled:pointer-events-none disabled:opacity-50\",\n    // focus — Fluent double-stroke approximation: 2px brand ring + 2px surface-colored gap\n    \"focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background\",\n    // invalid — shadcn aria-invalid treatment\n    \"aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40\",\n    // icon defaults\n    \"[&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4\",\n  ],\n  {\n    variants: {\n      variant: {\n        // Fluent primary — brand fill, flat, full brand state ramp (spec §2.5).\n        // rest brand-80 → hover brand-70 → pressed brand-60 (light);\n        // rest brand-70 → hover brand-80 → pressed brand-60 (dark).\n        default:\n          \"bg-primary text-primary-foreground hover:bg-brand-70 active:bg-brand-60 dark:hover:bg-brand-80\",\n        // Fluent danger — red fill. No red ramp is exposed, so hover/pressed\n        // step via opacity; the focus ring switches to destructive.\n        destructive:\n          \"bg-destructive text-destructive-foreground hover:bg-destructive/90 active:bg-destructive/80 focus-visible:ring-destructive\",\n        // Fluent standard/neutral — filled neutral surface + border.\n        secondary:\n          \"border border-border bg-secondary text-secondary-foreground hover:bg-accent active:bg-input dark:hover:bg-input dark:active:bg-input\",\n        // Fluent outline — transparent + border, neutral hover.\n        outline:\n          \"border border-input bg-transparent hover:bg-accent hover:text-accent-foreground active:bg-accent/80 dark:bg-input/30 dark:hover:bg-input/50 dark:active:bg-input/70\",\n        // Fluent subtle — transparent, neutral hover only.\n        ghost:\n          \"hover:bg-accent hover:text-accent-foreground active:bg-accent/80 dark:hover:bg-accent/50 dark:active:bg-accent/70\",\n        // Fluent link — brand text, underline on hover. Color ramp matches\n        // Fluent BrandForegroundLink (rest brand-70 → hover brand-60 → pressed\n        // brand-50 light; brand-100 → 110 → 120 dark), kept in sync with the\n        // Link component; the button keeps its own font-semibold weight.\n        link: \"text-brand-70 underline-offset-4 hover:text-brand-60 hover:underline active:text-brand-50 dark:text-brand-100 dark:hover:text-brand-110 dark:active:text-brand-120\",\n      },\n      size: {\n        // Fluent medium (default) — 32px height, 12px horizontal padding, 14px text.\n        default: \"h-8 px-3 text-sm has-[>svg]:px-2.5\",\n        // Fluent small — 24px height, 8px padding, 12px text, tighter gap.\n        sm: \"h-6 gap-1.5 px-2 text-xs has-[>svg]:px-1.5\",\n        // Fluent large — 40px height, 16px padding, 16px text.\n        lg: \"h-10 px-4 text-base has-[>svg]:px-3.5\",\n        // Square icon-only buttons at each height.\n        \"icon-sm\": \"size-6\",\n        icon: \"size-8\",\n        \"icon-lg\": \"size-10\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n      size: \"default\",\n    },\n  }\n);\n\nfunction Button({\n  className,\n  variant = \"default\",\n  size = \"default\",\n  asChild = false,\n  ...props\n}: ComponentProps<\"button\"> &\n  VariantProps<typeof buttonVariants> & {\n    asChild?: boolean;\n  }) {\n  const Comp = asChild ? Slot : \"button\";\n\n  return (\n    <Comp\n      data-slot=\"button\"\n      data-variant={variant}\n      data-size={size}\n      className={cn(buttonVariants({ variant, size, className }))}\n      {...props}\n    />\n  );\n}\n\nexport { Button, buttonVariants };\n"],"mappings":"AA6FI;AA7FJ,SAAS,YAAY;AACrB,SAAS,WAA8B;AAGvC,SAAS,UAAU;AAYnB,MAAM,iBAAiB;AAAA,EACrB;AAAA;AAAA,IAEE;AAAA,IACA;AAAA;AAAA;AAAA,IAGA;AAAA;AAAA,IAEA;AAAA;AAAA,IAEA;AAAA;AAAA,IAEA;AAAA;AAAA,IAEA;AAAA,EACF;AAAA,EACA;AAAA,IACE,UAAU;AAAA,MACR,SAAS;AAAA;AAAA;AAAA;AAAA,QAIP,SACE;AAAA;AAAA;AAAA,QAGF,aACE;AAAA;AAAA,QAEF,WACE;AAAA;AAAA,QAEF,SACE;AAAA;AAAA,QAEF,OACE;AAAA;AAAA;AAAA;AAAA;AAAA,QAKF,MAAM;AAAA,MACR;AAAA,MACA,MAAM;AAAA;AAAA,QAEJ,SAAS;AAAA;AAAA,QAET,IAAI;AAAA;AAAA,QAEJ,IAAI;AAAA;AAAA,QAEJ,WAAW;AAAA,QACX,MAAM;AAAA,QACN,WAAW;AAAA,MACb;AAAA,IACF;AAAA,IACA,iBAAiB;AAAA,MACf,SAAS;AAAA,MACT,MAAM;AAAA,IACR;AAAA,EACF;AACF;AAEA,SAAS,OAAO;AAAA,EACd;AAAA,EACA,UAAU;AAAA,EACV,OAAO;AAAA,EACP,UAAU;AAAA,EACV,GAAG;AACL,GAGK;AACH,QAAM,OAAO,UAAU,OAAO;AAE9B,SACE;AAAA,IAAC;AAAA;AAAA,MACC,aAAU;AAAA,MACV,gBAAc;AAAA,MACd,aAAW;AAAA,MACX,WAAW,GAAG,eAAe,EAAE,SAAS,MAAM,UAAU,CAAC,CAAC;AAAA,MACzD,GAAG;AAAA;AAAA,EACN;AAEJ;","names":[]}

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

@@ -0,0 +1,51 @@
+import * as react from 'react';
+import { ComponentProps } from 'react';
+
+/**
+ * Card — Fluent 2-styled, shadcn-API card family.
+ *
+ * Structure matches shadcn/ui's current Card exactly: seven composable parts
+ * (`Card`, `CardHeader`, `CardTitle`, `CardDescription`, `CardAction`,
+ * `CardContent`, `CardFooter`), each a plain `<div>` carrying its own
+ * `data-slot`. `CardHeader` is a grid so an optional `CardAction` can sit in
+ * its own column/row-span without extra markup (shadcn's `has-data-[slot=...]`
+ * trick) — see https://ui.shadcn.com/docs/components/card.
+ *
+ * Fluent 2 aesthetics layered on top of that skeleton:
+ * - `rounded-lg` + `border` + `shadow-4` (Fluent's resting elevation for a
+ *   filled card — https://storybooks.fluentui.dev/react/?path=/docs/components-card--docs)
+ *   instead of shadcn's default `rounded-xl` + `shadow-sm`.
+ * - `bg-card text-card-foreground` (shadcn semantic tokens, re-pointed for
+ *   dark mode by tokens.css).
+ * - `CardTitle` is `font-semibold` (Fluent card titles are weight 600).
+ * - Spacing: Fluent's own medium card padding is 12px (`p-3`), noticeably
+ *   tighter than shadcn's 24px (`p-6`) default. We split the difference and
+ *   land on 16px (`gap-4` / `p-4` / `px-4`) — visibly tighter than shadcn so
+ *   the Fluent influence reads, while keeping enough breathing room that the
+ *   header/content/footer rhythm still feels like the familiar shadcn
+ *   composition (a straight 12px port felt cramped next to Button's 32px
+ *   controls). Document this if you change it.
+ *
+ * No `variant`/`size` props: shadcn's Card ships none, so there is no `cva`
+ * table here (unlike Button) — every part is a plain function component.
+ *
+ * `interactive` (kit extension): Fluent cards have hover/pressed states when
+ * clickable; passing `interactive` raises the resting `shadow-4` to `shadow-8`
+ * on hover (Fluent's interactive-card elevation step) with a pointer cursor
+ * and `data-interactive` hook. Visual-only — semantics/focus come from what
+ * you compose it with (wrap in an `<a>`/`<button>` or add role/tabIndex).
+ *
+ * Server-safe: no `"use client"`, no hooks — the React import is type-only.
+ */
+declare function Card({ className, interactive, ...props }: ComponentProps<"div"> & {
+    /** Fluent interactive-card elevation states (hover raises to shadow-8). */
+    interactive?: boolean;
+}): react.JSX.Element;
+declare function CardHeader({ className, ...props }: ComponentProps<"div">): react.JSX.Element;
+declare function CardTitle({ className, ...props }: ComponentProps<"div">): react.JSX.Element;
+declare function CardDescription({ className, ...props }: ComponentProps<"div">): react.JSX.Element;
+declare function CardAction({ className, ...props }: ComponentProps<"div">): react.JSX.Element;
+declare function CardContent({ className, ...props }: ComponentProps<"div">): react.JSX.Element;
+declare function CardFooter({ className, ...props }: ComponentProps<"div">): react.JSX.Element;
+
+export { Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader, CardTitle };

package/dist/components/ui/card.js

@@ -0,0 +1,97 @@
+import { jsx } from "react/jsx-runtime";
+import { cn } from "../../lib/utils.js";
+function Card({
+  className,
+  interactive = false,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-slot": "card",
+      "data-interactive": interactive || void 0,
+      className: cn(
+        "flex flex-col gap-4 rounded-lg border bg-card py-4 text-card-foreground shadow-4",
+        interactive && "cursor-pointer transition-shadow duration-fast ease-ease hover:shadow-8 active:shadow-4",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function CardHeader({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-slot": "card-header",
+      className: cn(
+        "@container/card-header grid auto-rows-min grid-rows-[auto_auto] items-start gap-1.5 px-4 has-data-[slot=card-action]:grid-cols-[1fr_auto] [.border-b]:pb-4",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function CardTitle({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-slot": "card-title",
+      className: cn("font-semibold leading-none", className),
+      ...props
+    }
+  );
+}
+function CardDescription({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-slot": "card-description",
+      className: cn("text-sm text-muted-foreground", className),
+      ...props
+    }
+  );
+}
+function CardAction({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-slot": "card-action",
+      className: cn(
+        "col-start-2 row-span-2 row-start-1 self-start justify-self-end",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function CardContent({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-slot": "card-content",
+      className: cn("px-4", className),
+      ...props
+    }
+  );
+}
+function CardFooter({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-slot": "card-footer",
+      className: cn("flex items-center px-4 [.border-t]:pt-4", className),
+      ...props
+    }
+  );
+}
+export {
+  Card,
+  CardAction,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle
+};
+//# sourceMappingURL=card.js.map