@nadicodeai/ui 12.1.101 → 12.1.103

package/dist/components/alert-dialog.js

@@ -4,19 +4,31 @@ import { AlertDialog as AlertDialogPrimitive } from "@base-ui/react/alert-dialog
 import { cn } from "../lib/utils.js";
 import { modalOverlayMotion, overlayBackdropMotion } from "../lib/motion.js";
 import { Button } from "./button.js";
+import { phoneSheetLayout } from "../internal/phone-sheet.js";
 /**
  * The blocking dialog primitive under `ConfirmDialog`.
  *
  * @family Menus
- * @when Before an action that stops or loses something, through `ConfirmDialog`, which owns the
+ * @when "Confirm destructive actions in a Modal. `Drawer` and `Sheet` don’t fully dim the page, so they read as too soft for a delete or revoke." (https://vercel.com/geist/modal)
+ * Ours: before an action that stops or loses something, through `ConfirmDialog`, which owns the
  * words and the pending state.
- * @instead A product confirms with `ConfirmDialog`, never a hand-built alert dialog. A reversible
- * local change needs no confirmation; give it Undo in a toast.
- * @behaviour No backdrop dismissal; Escape cancels. `AlertDialogAction` closes on press; a confirm
- * that can fail is a plain button so the dialog stays open with the error.
- * @words Title a statement naming the record, never a question. Body the consequence, once.
- * @access `role="alertdialog"`, named by the title and described by the consequence. Focus starts
- * on Cancel, the safe choice.
+ * @instead Ours: a product confirms with `ConfirmDialog`, never a hand-built alert dialog. A
+ * reversible local change needs no confirmation; give it Undo in a toast.
+ * @behaviour "Default focus to `Cancel` on any destructive Modal. Enter must never trigger the destructive action without a typed confirmation." (https://vercel.com/geist/modal)
+ * "Allow Escape and outside-click to dismiss non-destructive Modals; gate dismissal on destructive ones with unsaved input." (https://vercel.com/geist/modal)
+ * Ours: a bottom sheet on a phone, centred from 640 px, 480 px wide with 20 px of padding and a
+ * 20 px column of title, description and body. The footer is a recessed bar that stays at the bottom
+ * while a tall confirmation scrolls, and holds 32 px buttons in one row, also on a phone: Cancel at
+ * the leading edge, the confirm at the trailing edge, a lone button filling the width. All neutral;
+ * red belongs to what `ConfirmDialog` puts inside. A press outside does not close it, because Base UI
+ * fixes that for an alert dialog and a stray click must not discard a typed phrase or an action in
+ * flight; Escape and Cancel close it. `AlertDialogAction` closes on press; a confirm that can fail
+ * is a plain button so the dialog stays open with the error.
+ * @words "`Modal.Title` is a Title Case statement, never a question. `Transfer Project` is correct; `Transfer Project?` is wrong." (https://vercel.com/geist/modal)
+ * "`Modal.P` body is sentence case, 1–3 sentences. State the consequence first, then any cascade." (https://vercel.com/geist/modal)
+ * @access "Set `aria-labelledby` to the `Modal.Title` id so screen readers announce the title on open." (https://vercel.com/geist/modal)
+ * "Keep the Cancel button literally `Cancel` so screen-reader users hear a stable dismissal label across destructive flows." (https://vercel.com/geist/modal)
+ * Ours: `role="alertdialog"`, named by the title and described by the consequence.
  */
 function AlertDialog({ ...props }) {
     return _jsx(AlertDialogPrimitive.Root, { "data-slot": "alert-dialog", ...props });
@@ -30,23 +42,23 @@ function AlertDialogPortal({ ...props }) {
 function AlertDialogOverlay({ className, ...props }) {
     return (_jsx(AlertDialogPrimitive.Backdrop, { "data-slot": "alert-dialog-overlay", className: cn("pointer-events-auto", "fixed inset-0 isolate z-50 bg-scrim/scrim", overlayBackdropMotion, className), ...props }));
 }
-function AlertDialogContent({ className, size = "default", ...props }) {
-    return (_jsxs(AlertDialogPortal, { children: [_jsx(AlertDialogOverlay, {}), _jsx(AlertDialogPrimitive.Popup, { "data-slot": "alert-dialog-content", "data-size": size, className: cn("pointer-events-auto", "group/alert-dialog-content fixed top-1/2 left-1/2 z-50 grid w-full -translate-x-1/2 -translate-y-1/2 gap-nadicode-md rounded-lg border-0 bg-popover p-nadicode-lg text-popover-foreground nc-elevation-modal outline-none data-[size=default]:max-w-xs data-[size=sm]:max-w-xs data-[size=default]:sm:max-w-sm", modalOverlayMotion, className), ...props })] }));
+function AlertDialogContent({ className, ...props }) {
+    return (_jsxs(AlertDialogPortal, { children: [_jsx(AlertDialogOverlay, {}), _jsx(AlertDialogPrimitive.Popup, { "data-slot": "alert-dialog-content", "data-phone-layout": "sheet", className: cn("pointer-events-auto", "group/alert-dialog-content fixed top-1/2 left-1/2 z-50 flex max-h-[min(50rem,80svh)] w-full -translate-x-1/2 -translate-y-1/2 flex-col gap-(--dialog-gap) overflow-y-auto rounded-lg border-0 bg-popover p-(--dialog-padding) [--dialog-gap:var(--dialog-padding)] [--dialog-padding:var(--spacing-nadicode-card-padding)] text-popover-foreground nc-elevation-modal outline-none sm:max-w-120", phoneSheetLayout, modalOverlayMotion, className), ...props })] }));
 }
 function AlertDialogHeader({ className, ...props }) {
-    return (_jsx("div", { "data-slot": "alert-dialog-header", className: cn("grid grid-rows-[auto_1fr] place-items-center gap-1.5 text-center has-data-[slot=alert-dialog-media]:grid-rows-[auto_auto_1fr] has-data-[slot=alert-dialog-media]:gap-x-4 sm:group-data-[size=default]/alert-dialog-content:place-items-start sm:group-data-[size=default]/alert-dialog-content:text-left sm:group-data-[size=default]/alert-dialog-content:has-data-[slot=alert-dialog-media]:grid-rows-[auto_1fr]", className), ...props }));
+    return (_jsx("div", { "data-slot": "alert-dialog-header", className: cn("flex flex-col gap-2", className), ...props }));
 }
-function AlertDialogFooter({ className, ...props }) {
-    return (_jsx("div", { "data-slot": "alert-dialog-footer", className: cn("-mx-nadicode-lg -mb-nadicode-lg flex flex-col-reverse gap-2 rounded-b-lg border-t border-border bg-recessed px-nadicode-lg py-control-padding-inline group-data-[size=sm]/alert-dialog-content:grid group-data-[size=sm]/alert-dialog-content:grid-cols-2 sm:flex-row sm:justify-end", className), ...props }));
+function AlertDialogBody({ className, ...props }) {
+    return (_jsx("div", { "data-slot": "alert-dialog-body", className: cn("flex flex-col gap-nadicode-lg", className), ...props }));
 }
-function AlertDialogMedia({ className, ...props }) {
-    return (_jsx("div", { "data-slot": "alert-dialog-media", className: cn("mb-2 inline-flex size-10 items-center justify-center rounded-md bg-muted sm:group-data-[size=default]/alert-dialog-content:row-span-2 *:[svg:not([class*='size-'])]:size-6", className), ...props }));
+function AlertDialogFooter({ className, ...props }) {
+    return (_jsx("div", { "data-slot": "alert-dialog-footer", className: cn("sticky -bottom-(--dialog-padding) z-10 -mx-(--dialog-padding) -mb-(--dialog-padding) flex shrink-0 flex-row justify-between gap-nadicode-md rounded-b-lg border-t border-border bg-recessed p-nadicode-sm group-data-[phone-layout=sheet]/alert-dialog-content:max-sm:rounded-b-none *:only:w-full [&_[data-slot=button]]:h-nadicode-control-height-sm [&_[data-slot=button]]:min-h-nadicode-control-height-sm [&_[data-slot=button]]:px-button-padding-inline-sm", className), ...props }));
 }
 function AlertDialogTitle({ className, ...props }) {
-    return (_jsx(AlertDialogPrimitive.Title, { "data-slot": "alert-dialog-title", className: cn("min-w-0 text-heading-sm break-words sm:group-data-[size=default]/alert-dialog-content:group-has-data-[slot=alert-dialog-media]/alert-dialog-content:col-start-2", className), ...props }));
+    return (_jsx(AlertDialogPrimitive.Title, { "data-slot": "alert-dialog-title", className: cn("min-w-0 text-heading-sm break-words", className), ...props }));
 }
 function AlertDialogDescription({ className, ...props }) {
-    return (_jsx(AlertDialogPrimitive.Description, { "data-slot": "alert-dialog-description", className: cn("text-body-sm text-balance text-muted-foreground md:text-pretty *:[a]:underline *:[a]:underline-offset-3 *:[a]:hover:text-foreground", className), ...props }));
+    return (_jsx(AlertDialogPrimitive.Description, { "data-slot": "alert-dialog-description", className: cn("text-body-sm text-muted-foreground *:[a]:underline *:[a]:underline-offset-3 *:[a]:hover:text-foreground", className), ...props }));
 }
 // An action is also a Base UI Close so the standard alert-dialog contract
 // dismisses after confirmation while preserving the Button API.
@@ -56,4 +68,4 @@ function AlertDialogAction({ className, variant = "default", size = "default", .
 function AlertDialogCancel({ className, variant = "outline", size = "default", ...props }) {
     return (_jsx(AlertDialogPrimitive.Close, { "data-slot": "alert-dialog-cancel", className: cn(className), render: _jsx(Button, { variant: variant, size: size }), ...props }));
 }
-export { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogMedia, AlertDialogOverlay, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger, };
+export { AlertDialog, AlertDialogAction, AlertDialogBody, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogOverlay, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger, };

package/dist/components/alert.d.ts

@@ -1,7 +1,7 @@
 import * as React from "react";
 import { type VariantProps } from "class-variance-authority";
 declare const alertVariants: (props?: ({
-    variant?: "default" | "destructive" | "info" | "warning" | null | undefined;
+    variant?: "default" | "destructive" | "warning" | "info" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 /**
  * The note primitive under every banner and notice: an icon, a title, a description and an action.

package/dist/components/avatar.d.ts

@@ -1,28 +1,94 @@
 import * as React from "react";
 import { Avatar as AvatarPrimitive } from "@base-ui/react/avatar";
+type AvatarSize = "xs" | "sm" | "default" | "lg";
+/**
+ * The uppercase first letters of a name's first two words; `length` 1 keeps only the first. A name
+ * with nothing to read, such as an emoji alone, gives an empty string.
+ */
+declare function avatarInitials(name: string, length?: 1 | 2): string;
+type AvatarName = {
+    label: string;
+    decorative?: never;
+} | {
+    decorative: true;
+    label?: never;
+};
+type AvatarRootProps = Omit<AvatarPrimitive.Root.Props, "role" | "aria-hidden" | "aria-label" | "aria-labelledby">;
+type AvatarProps = AvatarRootProps & AvatarName & {
+    size?: AvatarSize;
+};
 /**
  * A person or a team: their picture, else their initials.
  *
  * @family Status
- * @when A person or a team: the account at the foot of the sidebar, a member list, who changed
- * something. The picture stands in for a person's own photo.
- * @instead An Agent is always its `AgentOrb`, never an avatar. A company is its initials in a 6 px
- * tile inside `RecordIdentity`.
- * @behaviour A picture that fails falls back to initials, then to the person glyph while the owner
- * is unknown; never blank. A group overlaps 8 px with a 2 px ring of the ground. The profile's 80
- * px upload button is `AvatarUploadButton`.
- * @words Two uppercase initials from the name, else from the email. The overflow is a count: *+2*.
- * @access Beside a visible name it is `aria-hidden`. Alone, its alt is the person's name. A group
- * is labelled: *5 members*.
+ * @when "Use a single `<Avatar>` for one person, team, or organization." (https://vercel.com/geist/avatar)
+ * "For two or more stacked avatars, use `<AvatarGroup>` so the cluster gets correct overlap, sizing, and a single accessible label." (https://vercel.com/geist/avatar)
+ * Ours: a person or a team: the account at the foot of the sidebar, a member list, who changed
+ * something. It always says who it shows: `label` names the entity (*Jane Doe*), and `decorative`
+ * stands for a name beside it that already does. The type asks for one of the two.
+ * "Pass `src` first and fall back to `letter` (1–2 uppercase chars) when the image is missing." (https://vercel.com/geist/avatar)
+ * Ours: the children are an `AvatarImage` and an `AvatarFallback` with the initials.
+ * "Pick a size that matches adjacent type: 20–24px next to `text-label-14`, 32px next to `text-label-16`, 48–64px in headers and onboarding states." (https://vercel.com/geist/avatar)
+ * Ours: `size` follows the type beside it: `xs` (16 px) and `sm` (24 px) next to small labels,
+ * `default` (32 px) next to body text, `lg` (48 px) in a header or an onboarding step.
+ * `AvatarWithIcon` puts a status glyph at the corner of a person's avatar.
+ * @instead Ours: an Agent is always its `AgentOrb`, never an avatar. A company is its initials in a
+ * 6 px tile inside `RecordIdentity`.
+ * @behaviour "By default the first member sits on top of the stack, so the first credited author stays the most prominent." (https://vercel.com/geist/avatar)
+ * "Set `reverse` to flip the order so the last member sits on top instead." (https://vercel.com/geist/avatar)
+ * "The visual left-to-right order is unchanged." (https://vercel.com/geist/avatar)
+ * "By default `overlap="auto"` scales the spacing with `size`, keeping a generous, evenly-spaced cluster at any size." (https://vercel.com/geist/avatar)
+ * "Pass a number to set the overlap in pixels instead." (https://vercel.com/geist/avatar)
+ * "Lower values give more generous spacing; higher values pack tighter for dense, space-constrained UI." (https://vercel.com/geist/avatar)
+ * Ours: `auto` is about 30 % of the size (5, 7, 10 and 14 px), and each member is cut out with a 1
+ * px ring in the page colour. When `limit` cuts the group, the last place is a dark `+N` count that
+ * covers the member it hides.
+ * "Reserve `placeholder` for the loading shell, never as a permanent fallback." (https://vercel.com/geist/avatar)
+ * Ours: there is no `placeholder`; a picture that fails falls back to initials from
+ * `avatarInitials`, set in the neutral accent fill with the text colour on it, in both themes.
+ * For a name with no readable letter the caller passes a glyph, so it is never blank. The picture
+ * is held by a 1 px hairline. The corner glyph of `AvatarWithIcon` is the person's state, in the
+ * muted foreground colour, so its `label` names the person and the state. The profile's upload
+ * button is `AvatarUploadButton`.
+ * @words "Keep `letter` uppercase and derived from the entity name. No emoji, no punctuation, no `?`." (https://vercel.com/geist/avatar)
+ * Ours: the initials come from the name, else from the email; one initial at `xs`. The overflow is
+ * a count: *+2*.
+ * @access "`title` is the literal entity name (`Acme Inc.`, `Jane Doe`)." (https://vercel.com/geist/avatar)
+ * "Geist already prefixes letter avatars with `Avatar with initials:` for screen readers, so don’t hand-write `Avatar of …`." (https://vercel.com/geist/avatar)
+ * Ours: the name is `label`, as it is written (*Jane Doe*, not *Avatar of Jane Doe*), and we add no
+ * prefix. Beside a visible name it is `decorative`. A group carries one label: *5 members*. A
+ * corner glyph is `aria-hidden`; `label` says the state: *Jane Doe, paused*.
  */
-declare function Avatar({ className, size, ...props }: AvatarPrimitive.Root.Props & {
-    size?: "default" | "sm" | "lg";
-}): React.JSX.Element;
+declare function Avatar({ className, size, label, decorative, ...props }: AvatarProps): React.JSX.Element;
 declare function AvatarImage({ className, ...props }: AvatarPrimitive.Image.Props): React.JSX.Element;
 declare function AvatarFallback({ className, ...props }: AvatarPrimitive.Fallback.Props): React.JSX.Element;
-declare function AvatarBadge({ className, ...props }: React.ComponentProps<"span">): React.JSX.Element;
-declare function AvatarGroup({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
-declare function AvatarGroupCount({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
+type AvatarMember = {
+    id: string;
+    name: string;
+    src?: string;
+};
+declare function AvatarGroup({ members, label, limit, size, reverse, overlap, className, ...props }: Omit<React.ComponentProps<"div">, "children" | "aria-label" | "aria-labelledby" | "role"> & {
+    members: readonly AvatarMember[];
+    /** The label of the whole group, in the reader's language: "5 members". */
+    label: string;
+    /** The most places drawn, the count included: the last place is `+N` over the member it hides. */
+    limit?: number;
+    size?: AvatarSize;
+    /** The last member on top instead of the first; the left-to-right order stays. */
+    reverse?: boolean;
+    /** `auto` scales the overlap with `size`; a number sets it in pixels. */
+    overlap?: "auto" | number;
+}): React.JSX.Element;
+type AvatarWithIconProps = Omit<AvatarRootProps, "children"> & AvatarName & {
+    icon: React.ReactElement;
+    /** The person's name: the initials shown while there is no picture. */
+    name: string;
+    src?: string;
+    size?: AvatarSize;
+    /** Draws the page-colour disc behind the glyph, so it reads over the picture. */
+    iconBackground?: boolean;
+};
+declare function AvatarWithIcon({ icon, name, src, size, iconBackground, ...props }: AvatarWithIconProps): React.JSX.Element;
 declare function AvatarUploadButton({ label, pendingLabel, src, fallback, busy, onClick, }: {
     label: string;
     pendingLabel: string;
@@ -31,5 +97,5 @@ declare function AvatarUploadButton({ label, pendingLabel, src, fallback, busy,
     busy?: boolean;
     onClick: () => void;
 }): React.JSX.Element;
-export { Avatar, AvatarImage, AvatarFallback, AvatarGroup, AvatarGroupCount, AvatarBadge, AvatarUploadButton, };
+export { Avatar, AvatarImage, AvatarFallback, AvatarGroup, AvatarUploadButton, AvatarWithIcon, avatarInitials, type AvatarMember, };
 //# sourceMappingURL=avatar.d.ts.map

package/dist/components/avatar.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"avatar.d.ts","sourceRoot":"","sources":["../../src/components/avatar.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,MAAM,IAAI,eAAe,EAAE,MAAM,uBAAuB,CAAC;AAQlE;;;;;;;;;;;;;;GAcG;AACH,iBAAS,MAAM,CAAC,EACd,SAAS,EACT,IAAgB,EAChB,GAAG,KAAK,EACT,EAAE,eAAe,CAAC,IAAI,CAAC,KAAK,GAAG;IAC9B,IAAI,CAAC,EAAE,SAAS,GAAG,IAAI,GAAG,IAAI,CAAC;CAChC,qBAYA;AAED,iBAAS,WAAW,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,eAAe,CAAC,KAAK,CAAC,KAAK,qBAQxE;AAED,iBAAS,cAAc,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,eAAe,CAAC,QAAQ,CAAC,KAAK,qBAW9E;AAED,iBAAS,WAAW,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,MAAM,CAAC,qBAczE;AAED,iBAAS,WAAW,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,qBAYxE;AAED,iBAAS,gBAAgB,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,qBAW7E;AAED,iBAAS,kBAAkB,CAAC,EAC1B,KAAK,EACL,YAAY,EACZ,GAAG,EACH,QAAQ,EACR,IAAY,EACZ,OAAO,GACR,EAAE;IACD,KAAK,EAAE,MAAM,CAAC;IACd,YAAY,EAAE,MAAM,CAAC;IACrB,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB,qBA0BA;AAED,OAAO,EACL,MAAM,EACN,WAAW,EACX,cAAc,EACd,WAAW,EACX,gBAAgB,EAChB,WAAW,EACX,kBAAkB,GACnB,CAAC"}
+{"version":3,"file":"avatar.d.ts","sourceRoot":"","sources":["../../src/components/avatar.tsx"],"names":[],"mappings":"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"}

package/dist/components/avatar.js

@@ -4,42 +4,108 @@ import { CameraIcon } from "lucide-react";
 import { Button } from "./button.js";
 import { WaitingLine } from "./waiting-line.js";
 import { cn } from "../lib/utils.js";
+const AVATAR_SIZE_CLASS = {
+    xs: "size-4",
+    sm: "size-6",
+    default: "size-8",
+    lg: "size-12",
+};
+const AVATAR_COUNT_TEXT_CLASS = {
+    xs: "text-[10px] leading-3",
+    sm: "text-[10px] leading-3",
+    default: "text-[10px] leading-3",
+    lg: "text-xs leading-4",
+};
+const AVATAR_CORNER_ICON_CLASS = {
+    xs: "-start-0.5 -bottom-0.5 size-2 [&>svg]:size-1.5",
+    sm: "-start-0.5 -bottom-1 size-3 [&>svg]:size-2.5",
+    default: "-start-0.75 -bottom-1.25 size-4 [&>svg]:size-3.5",
+    lg: "-start-1 -bottom-2 size-6 [&>svg]:size-5",
+};
+const AVATAR_AUTO_OVERLAP = { xs: 5, sm: 7, default: 10, lg: 14 };
+/**
+ * The uppercase first letters of a name's first two words; `length` 1 keeps only the first. A name
+ * with nothing to read, such as an emoji alone, gives an empty string.
+ */
+function avatarInitials(name, length = 2) {
+    return name
+        .split(/\s+/)
+        .map((word) => word.match(/^[\p{L}\p{N}]/u)?.[0])
+        .filter((initial) => initial !== undefined)
+        .slice(0, length)
+        .join("")
+        .toUpperCase();
+}
 /**
  * A person or a team: their picture, else their initials.
  *
  * @family Status
- * @when A person or a team: the account at the foot of the sidebar, a member list, who changed
- * something. The picture stands in for a person's own photo.
- * @instead An Agent is always its `AgentOrb`, never an avatar. A company is its initials in a 6 px
- * tile inside `RecordIdentity`.
- * @behaviour A picture that fails falls back to initials, then to the person glyph while the owner
- * is unknown; never blank. A group overlaps 8 px with a 2 px ring of the ground. The profile's 80
- * px upload button is `AvatarUploadButton`.
- * @words Two uppercase initials from the name, else from the email. The overflow is a count: *+2*.
- * @access Beside a visible name it is `aria-hidden`. Alone, its alt is the person's name. A group
- * is labelled: *5 members*.
+ * @when "Use a single `<Avatar>` for one person, team, or organization." (https://vercel.com/geist/avatar)
+ * "For two or more stacked avatars, use `<AvatarGroup>` so the cluster gets correct overlap, sizing, and a single accessible label." (https://vercel.com/geist/avatar)
+ * Ours: a person or a team: the account at the foot of the sidebar, a member list, who changed
+ * something. It always says who it shows: `label` names the entity (*Jane Doe*), and `decorative`
+ * stands for a name beside it that already does. The type asks for one of the two.
+ * "Pass `src` first and fall back to `letter` (1–2 uppercase chars) when the image is missing." (https://vercel.com/geist/avatar)
+ * Ours: the children are an `AvatarImage` and an `AvatarFallback` with the initials.
+ * "Pick a size that matches adjacent type: 20–24px next to `text-label-14`, 32px next to `text-label-16`, 48–64px in headers and onboarding states." (https://vercel.com/geist/avatar)
+ * Ours: `size` follows the type beside it: `xs` (16 px) and `sm` (24 px) next to small labels,
+ * `default` (32 px) next to body text, `lg` (48 px) in a header or an onboarding step.
+ * `AvatarWithIcon` puts a status glyph at the corner of a person's avatar.
+ * @instead Ours: an Agent is always its `AgentOrb`, never an avatar. A company is its initials in a
+ * 6 px tile inside `RecordIdentity`.
+ * @behaviour "By default the first member sits on top of the stack, so the first credited author stays the most prominent." (https://vercel.com/geist/avatar)
+ * "Set `reverse` to flip the order so the last member sits on top instead." (https://vercel.com/geist/avatar)
+ * "The visual left-to-right order is unchanged." (https://vercel.com/geist/avatar)
+ * "By default `overlap="auto"` scales the spacing with `size`, keeping a generous, evenly-spaced cluster at any size." (https://vercel.com/geist/avatar)
+ * "Pass a number to set the overlap in pixels instead." (https://vercel.com/geist/avatar)
+ * "Lower values give more generous spacing; higher values pack tighter for dense, space-constrained UI." (https://vercel.com/geist/avatar)
+ * Ours: `auto` is about 30 % of the size (5, 7, 10 and 14 px), and each member is cut out with a 1
+ * px ring in the page colour. When `limit` cuts the group, the last place is a dark `+N` count that
+ * covers the member it hides.
+ * "Reserve `placeholder` for the loading shell, never as a permanent fallback." (https://vercel.com/geist/avatar)
+ * Ours: there is no `placeholder`; a picture that fails falls back to initials from
+ * `avatarInitials`, set in the neutral accent fill with the text colour on it, in both themes.
+ * For a name with no readable letter the caller passes a glyph, so it is never blank. The picture
+ * is held by a 1 px hairline. The corner glyph of `AvatarWithIcon` is the person's state, in the
+ * muted foreground colour, so its `label` names the person and the state. The profile's upload
+ * button is `AvatarUploadButton`.
+ * @words "Keep `letter` uppercase and derived from the entity name. No emoji, no punctuation, no `?`." (https://vercel.com/geist/avatar)
+ * Ours: the initials come from the name, else from the email; one initial at `xs`. The overflow is
+ * a count: *+2*.
+ * @access "`title` is the literal entity name (`Acme Inc.`, `Jane Doe`)." (https://vercel.com/geist/avatar)
+ * "Geist already prefixes letter avatars with `Avatar with initials:` for screen readers, so don’t hand-write `Avatar of …`." (https://vercel.com/geist/avatar)
+ * Ours: the name is `label`, as it is written (*Jane Doe*, not *Avatar of Jane Doe*), and we add no
+ * prefix. Beside a visible name it is `decorative`. A group carries one label: *5 members*. A
+ * corner glyph is `aria-hidden`; `label` says the state: *Jane Doe, paused*.
  */
-function Avatar({ className, size = "default", ...props }) {
-    return (_jsx(AvatarPrimitive.Root, { "data-slot": "avatar", "data-size": size, className: cn("group/avatar relative flex size-8 shrink-0 rounded-full select-none after:absolute after:inset-0 after:rounded-full after:border after:border-border after:mix-blend-darken data-[size=lg]:size-10 data-[size=sm]:size-6", className), ...props }));
+function Avatar({ className, size = "default", label, decorative, ...props }) {
+    return (_jsx(AvatarPrimitive.Root, { "data-slot": "avatar", "data-size": size, "aria-hidden": decorative ? "true" : undefined, "aria-label": label, role: decorative ? undefined : "img", className: cn("group/avatar relative flex shrink-0 rounded-full select-none after:absolute after:inset-0 after:rounded-full after:border after:border-border after:mix-blend-darken", AVATAR_SIZE_CLASS[size], className), ...props }));
 }
 function AvatarImage({ className, ...props }) {
     return (_jsx(AvatarPrimitive.Image, { "data-slot": "avatar-image", className: cn("aspect-square size-full rounded-full object-cover", className), ...props }));
 }
 function AvatarFallback({ className, ...props }) {
-    return (_jsx(AvatarPrimitive.Fallback, { "data-slot": "avatar-fallback", className: cn("flex size-full items-center justify-center rounded-full bg-muted text-sm text-muted-foreground group-data-[size=sm]/avatar:text-xs", className), ...props }));
+    return (_jsx(AvatarPrimitive.Fallback, { "data-slot": "avatar-fallback", className: cn("flex size-full items-center justify-center rounded-full bg-accent text-base font-medium text-foreground group-data-[size=sm]/avatar:text-xs group-data-[size=xs]/avatar:text-xs", className), ...props }));
 }
-function AvatarBadge({ className, ...props }) {
-    return (_jsx("span", { "data-slot": "avatar-badge", className: cn("absolute right-0 bottom-0 z-10 inline-flex items-center justify-center rounded-full bg-primary text-primary-foreground bg-blend-color ring-2 ring-background select-none", "group-data-[size=sm]/avatar:size-2 group-data-[size=sm]/avatar:[&>svg]:hidden", "group-data-[size=default]/avatar:size-2.5 group-data-[size=default]/avatar:[&>svg]:size-2", "group-data-[size=lg]/avatar:size-3 group-data-[size=lg]/avatar:[&>svg]:size-2", className), ...props }));
+function AvatarGroupCount({ className, size, ...props }) {
+    return (_jsx("span", { "data-slot": "avatar-group-count", className: cn("relative flex shrink-0 items-center justify-center overflow-hidden rounded-full border border-nc-dark-line bg-nc-dark-canvas-soft-2 font-semibold text-nc-dark-ink ring-1 ring-background tabular-nums", AVATAR_SIZE_CLASS[size], AVATAR_COUNT_TEXT_CLASS[size], className), ...props }));
 }
-function AvatarGroup({ className, ...props }) {
-    return (_jsx("div", { "data-slot": "avatar-group", className: cn(
-        // eslint-disable-next-line better-tailwindcss/no-restricted-classes -- an avatar group overlaps its members; negative spacing has no gap-* equivalent.
-        "group/avatar-group flex -space-x-2 *:data-[slot=avatar]:ring-2 *:data-[slot=avatar]:ring-background", className), ...props }));
+function AvatarGroup({ members, label, limit, size = "default", reverse = false, overlap = "auto", className, ...props }) {
+    const places = limit === undefined ? members.length : Math.max(0, limit);
+    const drawn = members.length > places ? members.slice(0, Math.max(0, places - 1)) : members;
+    const hidden = members.length - drawn.length;
+    const total = drawn.length + (hidden > 0 ? 1 : 0);
+    const overlapPx = overlap === "auto" ? AVATAR_AUTO_OVERLAP[size] : overlap;
+    const stack = (index) => ({
+        marginInlineStart: index === 0 ? 0 : -overlapPx,
+        zIndex: reverse ? index + 1 : total - index,
+    });
+    return (_jsxs("div", { ...props, "aria-label": label, className: cn("isolate flex items-center", className), "data-slot": "avatar-group", role: "group", children: [drawn.map((member, index) => (_jsxs(Avatar, { className: "ring-1 ring-background", decorative: true, size: size, style: stack(index), children: [member.src ? _jsx(AvatarImage, { alt: "", src: member.src }) : null, _jsx(AvatarFallback, { children: avatarInitials(member.name, size === "xs" ? 1 : 2) })] }, member.id))), hidden > 0 ? (_jsxs(AvatarGroupCount, { "aria-hidden": "true", size: size, style: stack(drawn.length), children: ["+", hidden] })) : null] }));
 }
-function AvatarGroupCount({ className, ...props }) {
-    return (_jsx("div", { "data-slot": "avatar-group-count", className: cn("relative flex size-8 shrink-0 items-center justify-center rounded-full bg-muted text-sm text-muted-foreground ring-2 ring-background group-has-data-[size=lg]/avatar-group:size-10 group-has-data-[size=sm]/avatar-group:size-6 [&>svg]:size-4 group-has-data-[size=lg]/avatar-group:[&>svg]:size-5 group-has-data-[size=sm]/avatar-group:[&>svg]:size-3", className), ...props }));
+function AvatarWithIcon({ icon, name, src, size = "default", iconBackground = false, ...props }) {
+    return (_jsxs(Avatar, { ...props, size: size, children: [src ? _jsx(AvatarImage, { alt: "", src: src }) : null, _jsx(AvatarFallback, { children: avatarInitials(name, size === "xs" ? 1 : 2) }), _jsx("span", { "aria-hidden": "true", className: cn("absolute z-10 inline-flex items-center justify-center rounded-full text-muted-foreground", iconBackground && "border border-background bg-background", AVATAR_CORNER_ICON_CLASS[size]), "data-background": iconBackground || undefined, "data-slot": "avatar-icon", children: icon })] }));
 }
 function AvatarUploadButton({ label, pendingLabel, src, fallback, busy = false, onClick, }) {
-    return (_jsxs("div", { className: "relative inline-flex w-20 shrink-0 flex-col items-center", children: [_jsxs(Button, { "aria-label": busy ? pendingLabel : label, "aria-busy": busy || undefined, disabled: busy, type: "button", variant: "ghost", className: "group/avatar-upload relative size-20 shrink-0 rounded-full p-0", onClick: onClick, children: [_jsxs(Avatar, { "aria-hidden": "true", className: "size-full", children: [_jsx(AvatarImage, { src: src, alt: "" }), _jsx(AvatarFallback, { className: "text-xl", children: fallback })] }), _jsx("span", { "aria-hidden": "true", className: "absolute inset-0 flex items-center justify-center rounded-full bg-background/80 opacity-0 group-hover/avatar-upload:opacity-100 group-focus-visible/avatar-upload:opacity-100 group-aria-busy/avatar-upload:opacity-100", children: _jsx(CameraIcon, { "data-icon": "inline-start", className: "size-5" }) })] }), busy ? _jsx(WaitingLine, { className: "absolute inset-x-0 -bottom-3", decorative: true }) : null] }));
+    return (_jsxs("div", { className: "relative inline-flex w-20 shrink-0 flex-col items-center", children: [_jsxs(Button, { "aria-label": busy ? pendingLabel : label, loading: busy, size: "icon", type: "button", variant: "ghost", className: "group/avatar-upload relative size-20 shrink-0 rounded-full p-0", onClick: onClick, children: [_jsxs(Avatar, { className: "size-full", decorative: true, children: [_jsx(AvatarImage, { src: src, alt: "" }), _jsx(AvatarFallback, { className: "text-xl", children: fallback })] }), _jsx("span", { "aria-hidden": "true", className: "absolute inset-0 flex items-center justify-center rounded-full bg-background/80 opacity-0 group-hover/avatar-upload:opacity-100 group-focus-visible/avatar-upload:opacity-100 group-aria-busy/avatar-upload:opacity-100", children: _jsx(CameraIcon, { className: "size-5" }) })] }), busy ? _jsx(WaitingLine, { className: "absolute inset-x-0 -bottom-3", decorative: true }) : null] }));
 }
-export { Avatar, AvatarImage, AvatarFallback, AvatarGroup, AvatarGroupCount, AvatarBadge, AvatarUploadButton, };
+export { Avatar, AvatarImage, AvatarFallback, AvatarGroup, AvatarUploadButton, AvatarWithIcon, avatarInitials, };

package/dist/components/badge.d.ts

@@ -1,18 +1,69 @@
+import type { ReactNode } from "react";
 import { useRender } from "@base-ui/react/use-render";
 import { type VariantProps } from "class-variance-authority";
 declare const badgeVariants: (props?: ({
-    variant?: "link" | "default" | "outline" | "secondary" | "ghost" | "destructive" | "pink" | "purple" | "teal" | null | undefined;
+    variant?: "default" | "outline" | "secondary" | "pink" | "purple" | "teal" | null | undefined;
+    size?: "sm" | "lg" | "md" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
+type BadgeSize = NonNullable<VariantProps<typeof badgeVariants>["size"]>;
+type BadgeProps = Omit<useRender.ComponentProps<"span">, "onClick" | "children" | "title"> & VariantProps<typeof badgeVariants> & ({
+    children: ReactNode;
+    /** One mark before the word; never a second icon. */
+    icon?: ReactNode;
+    title?: string;
+} | {
+    children?: never;
+    icon: ReactNode;
+    /** What the mark means: an icon alone has no word to name it. */
+    title: string;
+});
 /**
  * Short metadata beside its subject: a role, a plan, "Beta".
  *
  * @family Status
- * @when Short metadata beside its subject: a role ("Owner"), a plan, "Beta". 20 px high, 6 px corners, 12 px label at 500. The category fills (teal, purple, pink) name a kind.
- * @instead For a state use `StatusBadge`, which picks the tone and its mark: the gray, green, red, amber and blue fills are its alone. For one categorical fact in a row use `Tag`. For a change in a figure, `TrendBadge`.
- * @behaviour A static label. It becomes a link only through `render` with a real anchor, which then takes the hover. Never a click handler, never nested, never a paragraph.
- * @words One to three words, sentence case, a noun: "Business plan", not "This is on Business".
- * @access Read in place as text. A coloured variant still carries its word.
+ * @when "Use Badge for short, scannable metadata that sits next to the thing it describes: status, plan tier, environment, or role." (https://vercel.com/geist/badge)
+ * "One badge per row; two side by side is a sign the row needs a second column." (https://vercel.com/geist/badge)
+ * Ours: a state is a `StatusBadge`; a `Badge` is a role (*Owner*), a plan, an environment, *Beta*.
+ * It always has a word, or one `icon` with a `title`, and the type asks for it. `size` follows the
+ * type beside it: `sm` (20 px) next to small labels, `md` (24 px) in a row, `lg` (32 px) in a
+ * header. The category fills (teal, purple, pink) name a kind.
+ * @instead "For a colored dot without text, use `Status Dot`." (https://vercel.com/geist/badge)
+ * Ours: that is `StatusDot`.
+ * "For clickable filter chips that toggle a query, use the `pill` variant or a small `Button`." (https://vercel.com/geist/badge)
+ * Ours: there is no `pill` variant; a filter that toggles a query is a `Button` or
+ * `CollectionFilters`. For a state use `StatusBadge`, which picks the tone and its mark: the gray,
+ * green, red, amber and blue fills, soft or solid, are its alone. One categorical fact in a row is
+ * a `Tag`. A change in a figure is a `TrendBadge`.
+ * @behaviour "Badges are static labels." (https://vercel.com/geist/badge)
+ * "Don’t wire `onClick` onto them; promote to a Button or link if the user can act on the value." (https://vercel.com/geist/badge)
+ * Ours: it takes no `onClick`, no hover and no focus; it becomes a link only through `render` with
+ * a real anchor, and only `outline` takes the hover, a gray fill.
+ * "Keep badge content to text or `icon` + text." (https://vercel.com/geist/badge)
+ * "Never stack two icons or a child Badge inside a Badge." (https://vercel.com/geist/badge) Ours:
+ * never a paragraph either.
+ * "Pair lifecycle badges (`Alpha`, `Beta`, `Early Access`) with a `Tooltip` that names the limit, like `Alpha: API may change before GA`." (https://vercel.com/geist/badge)
+ * Ours: the badge is the `render` of a `TooltipTrigger` with `tabIndex={0}`, so keyboard and touch
+ * users reach the limit it names.
+ * "Don’t add a checkmark icon for success states or an X for errors; the variant carries that signal." (https://vercel.com/geist/badge)
+ * Ours: only `StatusBadge` carries a state, and it always draws its tone's mark.
+ * "Map meaning to color: `green` for healthy, `red` for error, `amber` for warning, `blue` for informational or production, `gray` for neutral." (https://vercel.com/geist/badge)
+ * "The `-subtle` suffix tones any of them down on dense surfaces." (https://vercel.com/geist/badge)
+ * Ours: those fills are `StatusBadge`'s, as the tones `success`, `danger`, `warning`, `info` and
+ * `neutral`, with `emphasis` `subtle` or `solid`. `Badge` is a fixed-height pill (20, 24 or 32 px)
+ * with no border: colour sits on the fill and the word. A soft fill takes its hue's strong shade
+ * for the word, `default` is the foreground colour inverted, and `outline` is neutral, a
+ * page-colour fill held by a 1 px inset ring. With an icon, the left padding is 6, 8 or 12 px, so
+ * the mark and the word look evenly spaced. The icon takes the word's colour.
+ * @words "Title Case, one word when possible, two max: `Active`, `Pending`, `Pro`, `Enterprise Trial`." (https://vercel.com/geist/badge)
+ * Ours: sentence case (*Enterprise trial*).
+ * "Match the canonical API or log term: `Production` not `Prod`, `Deployed` not `Live`, `Canceled` not `Cancelled` (the Vercel API uses one L)." (https://vercel.com/geist/badge)
+ * Ours: the term is our own API's.
+ * "Skip stuffing sentences inside (`Currently Active`, `You are on Pro`); the surrounding row supplies the context." (https://vercel.com/geist/badge)
+ * @access "Set `title` for icon-only or ambiguous badges so screen readers announce the meaning." (https://vercel.com/geist/badge)
+ * Ours: an icon alone must set `title`, and the type asks for it. Read in place as text.
+ * "Don’t rely on color alone; the text has to be readable without it." (https://vercel.com/geist/badge)
+ * Ours: a coloured variant still carries its word.
  */
-declare function Badge({ className, variant, render, ...props }: useRender.ComponentProps<"span"> & VariantProps<typeof badgeVariants>): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
-export { Badge, badgeVariants };
+declare function Badge({ className, variant, size, icon, children, render, ...props }: BadgeProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+export { Badge, badgeVariants, type BadgeProps, type BadgeSize };
 //# sourceMappingURL=badge.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"badge.d.ts","sourceRoot":"","sources":["../../src/components/badge.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,SAAS,EAAE,MAAM,2BAA2B,CAAC;AACtD,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAIlE,QAAA,MAAM,aAAa;;8EAqBlB,CAAC;AAEF;;;;;;;;;GASG;AACH,iBAAS,KAAK,CAAC,EACb,SAAS,EACT,OAAmB,EACnB,MAAM,EACN,GAAG,KAAK,EACT,EAAE,SAAS,CAAC,cAAc,CAAC,MAAM,CAAC,GAAG,YAAY,CAAC,OAAO,aAAa,CAAC,8FAevE;AAED,OAAO,EAAE,KAAK,EAAE,aAAa,EAAE,CAAC"}
+{"version":3,"file":"badge.d.ts","sourceRoot":"","sources":["../../src/components/badge.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvC,OAAO,EAAE,SAAS,EAAE,MAAM,2BAA2B,CAAC;AACtD,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAIlE,QAAA,MAAM,aAAa;;;8EAuBlB,CAAC;AAEF,KAAK,SAAS,GAAG,WAAW,CAAC,YAAY,CAAC,OAAO,aAAa,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC;AAEzE,KAAK,UAAU,GAAG,IAAI,CAAC,SAAS,CAAC,cAAc,CAAC,MAAM,CAAC,EAAE,SAAS,GAAG,UAAU,GAAG,OAAO,CAAC,GACxF,YAAY,CAAC,OAAO,aAAa,CAAC,GAClC,CACI;IACE,QAAQ,EAAE,SAAS,CAAC;IACpB,qDAAqD;IACrD,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,GACD;IACE,QAAQ,CAAC,EAAE,KAAK,CAAC;IACjB,IAAI,EAAE,SAAS,CAAC;IAChB,iEAAiE;IACjE,KAAK,EAAE,MAAM,CAAC;CACf,CACJ,CAAC;AAEJ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8CG;AACH,iBAAS,KAAK,CAAC,EACb,SAAS,EACT,OAAmB,EACnB,IAAW,EACX,IAAI,EACJ,QAAQ,EACR,MAAM,EACN,GAAG,KAAK,EACT,EAAE,UAAU,8FA0BZ;AAED,OAAO,EAAE,KAAK,EAAE,aAAa,EAAE,KAAK,UAAU,EAAE,KAAK,SAAS,EAAE,CAAC"}

package/dist/components/badge.js

@@ -1,45 +1,88 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { mergeProps } from "@base-ui/react/merge-props";
 import { useRender } from "@base-ui/react/use-render";
 import { cva } from "class-variance-authority";
 import { cn } from "../lib/utils.js";
-const badgeVariants = cva("group/badge inline-flex min-h-5 w-fit max-w-full shrink-0 items-center justify-center gap-1 overflow-hidden rounded-sm border border-transparent px-2 py-px text-xs font-medium transition-[background-color,border-color,color,opacity] duration-[var(--nc-duration-confirm)] ease-[var(--nc-ease-out-strong)] has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 aria-invalid:border-destructive [&>svg]:pointer-events-none [&>svg]:size-3!", {
+const badgeVariants = cva("group/badge inline-flex w-fit max-w-full shrink-0 items-center justify-center overflow-hidden rounded-full font-medium whitespace-nowrap tabular-nums transition-[background-color,box-shadow,color,opacity] duration-[var(--nc-duration-confirm)] ease-[var(--nc-ease-out-strong)]", {
     variants: {
         variant: {
-            default: "bg-primary text-primary-foreground [a]:hover:bg-primary-hover",
-            secondary: "bg-secondary text-secondary-foreground [a]:hover:bg-accent",
-            destructive: "bg-destructive-soft text-destructive-soft-foreground [a]:hover:border-destructive-soft-foreground",
-            outline: "border-border text-foreground [a]:hover:bg-muted [a]:hover:text-muted-foreground",
-            ghost: "hover:bg-muted hover:text-muted-foreground",
-            link: "text-(--nc-link) underline-offset-4 hover:underline",
+            default: "bg-primary text-primary-foreground",
+            secondary: "bg-secondary text-secondary-foreground",
+            outline: "bg-background text-foreground ring-1 ring-inset ring-border [a]:hover:bg-accent",
             teal: "bg-category-teal text-category-teal-foreground",
             purple: "bg-category-purple text-category-purple-foreground",
             pink: "bg-category-pink text-category-pink-foreground",
         },
+        size: {
+            sm: "h-5 gap-1 px-2 text-[11px] leading-5 tracking-[0.2px] has-data-[icon=inline-start]:pl-1.5 [&>[data-icon]>svg]:size-3",
+            md: "h-6 gap-1.25 px-3 text-xs leading-6 has-data-[icon=inline-start]:pl-2 [&>[data-icon]>svg]:size-3.5",
+            lg: "h-8 gap-1.5 px-3 text-sm leading-5 [&>[data-icon]>svg]:size-4",
+        },
     },
     defaultVariants: {
         variant: "default",
+        size: "md",
     },
 });
 /**
  * Short metadata beside its subject: a role, a plan, "Beta".
  *
  * @family Status
- * @when Short metadata beside its subject: a role ("Owner"), a plan, "Beta". 20 px high, 6 px corners, 12 px label at 500. The category fills (teal, purple, pink) name a kind.
- * @instead For a state use `StatusBadge`, which picks the tone and its mark: the gray, green, red, amber and blue fills are its alone. For one categorical fact in a row use `Tag`. For a change in a figure, `TrendBadge`.
- * @behaviour A static label. It becomes a link only through `render` with a real anchor, which then takes the hover. Never a click handler, never nested, never a paragraph.
- * @words One to three words, sentence case, a noun: "Business plan", not "This is on Business".
- * @access Read in place as text. A coloured variant still carries its word.
+ * @when "Use Badge for short, scannable metadata that sits next to the thing it describes: status, plan tier, environment, or role." (https://vercel.com/geist/badge)
+ * "One badge per row; two side by side is a sign the row needs a second column." (https://vercel.com/geist/badge)
+ * Ours: a state is a `StatusBadge`; a `Badge` is a role (*Owner*), a plan, an environment, *Beta*.
+ * It always has a word, or one `icon` with a `title`, and the type asks for it. `size` follows the
+ * type beside it: `sm` (20 px) next to small labels, `md` (24 px) in a row, `lg` (32 px) in a
+ * header. The category fills (teal, purple, pink) name a kind.
+ * @instead "For a colored dot without text, use `Status Dot`." (https://vercel.com/geist/badge)
+ * Ours: that is `StatusDot`.
+ * "For clickable filter chips that toggle a query, use the `pill` variant or a small `Button`." (https://vercel.com/geist/badge)
+ * Ours: there is no `pill` variant; a filter that toggles a query is a `Button` or
+ * `CollectionFilters`. For a state use `StatusBadge`, which picks the tone and its mark: the gray,
+ * green, red, amber and blue fills, soft or solid, are its alone. One categorical fact in a row is
+ * a `Tag`. A change in a figure is a `TrendBadge`.
+ * @behaviour "Badges are static labels." (https://vercel.com/geist/badge)
+ * "Don’t wire `onClick` onto them; promote to a Button or link if the user can act on the value." (https://vercel.com/geist/badge)
+ * Ours: it takes no `onClick`, no hover and no focus; it becomes a link only through `render` with
+ * a real anchor, and only `outline` takes the hover, a gray fill.
+ * "Keep badge content to text or `icon` + text." (https://vercel.com/geist/badge)
+ * "Never stack two icons or a child Badge inside a Badge." (https://vercel.com/geist/badge) Ours:
+ * never a paragraph either.
+ * "Pair lifecycle badges (`Alpha`, `Beta`, `Early Access`) with a `Tooltip` that names the limit, like `Alpha: API may change before GA`." (https://vercel.com/geist/badge)
+ * Ours: the badge is the `render` of a `TooltipTrigger` with `tabIndex={0}`, so keyboard and touch
+ * users reach the limit it names.
+ * "Don’t add a checkmark icon for success states or an X for errors; the variant carries that signal." (https://vercel.com/geist/badge)
+ * Ours: only `StatusBadge` carries a state, and it always draws its tone's mark.
+ * "Map meaning to color: `green` for healthy, `red` for error, `amber` for warning, `blue` for informational or production, `gray` for neutral." (https://vercel.com/geist/badge)
+ * "The `-subtle` suffix tones any of them down on dense surfaces." (https://vercel.com/geist/badge)
+ * Ours: those fills are `StatusBadge`'s, as the tones `success`, `danger`, `warning`, `info` and
+ * `neutral`, with `emphasis` `subtle` or `solid`. `Badge` is a fixed-height pill (20, 24 or 32 px)
+ * with no border: colour sits on the fill and the word. A soft fill takes its hue's strong shade
+ * for the word, `default` is the foreground colour inverted, and `outline` is neutral, a
+ * page-colour fill held by a 1 px inset ring. With an icon, the left padding is 6, 8 or 12 px, so
+ * the mark and the word look evenly spaced. The icon takes the word's colour.
+ * @words "Title Case, one word when possible, two max: `Active`, `Pending`, `Pro`, `Enterprise Trial`." (https://vercel.com/geist/badge)
+ * Ours: sentence case (*Enterprise trial*).
+ * "Match the canonical API or log term: `Production` not `Prod`, `Deployed` not `Live`, `Canceled` not `Cancelled` (the Vercel API uses one L)." (https://vercel.com/geist/badge)
+ * Ours: the term is our own API's.
+ * "Skip stuffing sentences inside (`Currently Active`, `You are on Pro`); the surrounding row supplies the context." (https://vercel.com/geist/badge)
+ * @access "Set `title` for icon-only or ambiguous badges so screen readers announce the meaning." (https://vercel.com/geist/badge)
+ * Ours: an icon alone must set `title`, and the type asks for it. Read in place as text.
+ * "Don’t rely on color alone; the text has to be readable without it." (https://vercel.com/geist/badge)
+ * Ours: a coloured variant still carries its word.
  */
-function Badge({ className, variant = "default", render, ...props }) {
+function Badge({ className, variant = "default", size = "md", icon, children, render, ...props }) {
     return useRender({
         defaultTagName: "span",
         props: mergeProps({
-            className: cn(badgeVariants({ variant }), className),
+            className: cn(badgeVariants({ variant, size }), className),
+            children: icon ? (_jsxs(_Fragment, { children: [_jsx("span", { className: "pointer-events-none inline-flex shrink-0", "data-icon": "inline-start", children: icon }), children] })) : (children),
         }, props),
         render,
         state: {
             slot: "badge",
             variant,
+            size,
         },
     });
 }