@nadicodeai/ui 12.1.102 → 12.1.104

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,
         },
     });
 }

package/dist/components/breadcrumb.d.ts

@@ -1,25 +1,36 @@
 import * as React from "react";
 import { useRender } from "@base-ui/react/use-render";
+type BreadcrumbType = "text" | "menu";
 type BreadcrumbProps = Omit<React.ComponentProps<"nav">, "aria-label"> & {
     /** The path's name in the product's language, such as "Path". */
     "aria-label": string;
+    /** `text` is the line with a chevron between steps; `menu` is a row of small chips. */
+    type?: BreadcrumbType;
 };
 /**
  * The top bar's path to the page.
  *
  * @family Navigation
- * @when The top bar of every product page: the sidebar group or the parents, ending at the destination or the object. An object opened from search still shows its parent.
+ * @when "Navigation aid that shows the user's location within a site's hierarchy, with text and menu variants." (https://vercel.com/geist/breadcrumbs)
+ * Ours: the top bar of every product page: the sidebar group or the parents, ending at the destination or the object. An object opened from search still shows its parent.
  * @instead Never a back button in its place. A return link may remember a visit, beside the path, not instead of it. Sibling views are tabs.
- * @behaviour Ancestors are links in the body colour that turn ink on hover; the current item is ink and not a link. A long path folds its middle into `BreadcrumbEllipsis` and keeps the parent and the current item.
+ * @behaviour Neutral only, one step of grey carries every state. `text` (the default) is a 20 px line of 14 px text with a 16 px chevron between steps and 6 px around each; `menu` is a row of 22 px chips with a rule and no chevrons, each chip cut with an ellipsis past 10 rem and carrying its full name in a tooltip, scrolling sideways when the path is long; a chip's rule darkens a step on hover. Ancestors are links in the body colour that turn ink on hover; the current item is ink and not a link. An ancestor the person may not open is a `BreadcrumbLink` with `disabled`: the placeholder grey, which sits close to the muted grey, so `aria-disabled`, the not-allowed cursor and no hover carry the state, and the type refuses an `href` or a `render` on it, so it cannot navigate. A long path folds its middle into `BreadcrumbEllipsis` and keeps the parent and the current item.
  * @words The groups' and records' own names, exactly as the sidebar and the record write them. The `aria-label` and the ellipsis's `label` come from the product's catalogue: "Path", "More".
- * @access A labelled `nav` with an ordered list; the current item has `aria-current="page"`; the chevrons and the ⋯ glyph are hidden, and the folded middle reads its `label`.
+ * @access A labelled `nav` with an ordered list; the current item has `aria-current="page"`; a disabled ancestor has `aria-disabled`; the chevrons and the ⋯ glyph are hidden, and the folded middle reads its `label`.
  */
-declare function Breadcrumb({ className, ...props }: BreadcrumbProps): React.JSX.Element;
+declare function Breadcrumb({ className, type, ...props }: BreadcrumbProps): React.JSX.Element;
 declare function BreadcrumbList({ className, ...props }: React.ComponentProps<"ol">): React.JSX.Element;
 declare function BreadcrumbItem({ className, ...props }: React.ComponentProps<"li">): React.JSX.Element;
-declare function BreadcrumbLink({ className, render, ...props }: useRender.ComponentProps<"a">): React.ReactElement<unknown, string | React.JSXElementConstructor<any>>;
-declare function BreadcrumbPage({ className, ...props }: React.ComponentProps<"span">): React.JSX.Element;
-declare function BreadcrumbSeparator({ children, className, ...props }: React.ComponentProps<"li">): React.JSX.Element;
+type BreadcrumbLinkProps = useRender.ComponentProps<"a"> & ({
+    disabled?: false | undefined;
+} | {
+    disabled: true;
+    href?: never;
+    render?: never;
+});
+declare function BreadcrumbLink({ children, className, disabled, render, ...props }: BreadcrumbLinkProps): React.JSX.Element;
+declare function BreadcrumbPage({ children, className, ...props }: React.ComponentProps<"span">): React.JSX.Element;
+declare function BreadcrumbSeparator({ children, className, ...props }: React.ComponentProps<"li">): React.JSX.Element | null;
 declare function BreadcrumbEllipsis({ className, label, ...props }: Omit<React.ComponentProps<"span">, "children"> & {
     /** What the folded middle reads to a screen reader, such as "More". */
     label: string;

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

@@ -1 +1 @@
-{"version":3,"file":"breadcrumb.d.ts","sourceRoot":"","sources":["../../src/components/breadcrumb.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAE,SAAS,EAAE,MAAM,2BAA2B,CAAC;AAKtD,KAAK,eAAe,GAAG,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,EAAE,YAAY,CAAC,GAAG;IACvE,iEAAiE;IACjE,YAAY,EAAE,MAAM,CAAC;CACtB,CAAC;AAEF;;;;;;;;;GASG;AACH,iBAAS,UAAU,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,eAAe,qBAE3D;AAED,iBAAS,cAAc,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,IAAI,CAAC,qBAW1E;AAED,iBAAS,cAAc,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,IAAI,CAAC,qBAQ1E;AAED,iBAAS,cAAc,CAAC,EAAE,SAAS,EAAE,MAAM,EAAE,GAAG,KAAK,EAAE,EAAE,SAAS,CAAC,cAAc,CAAC,GAAG,CAAC,0EAcrF;AAED,iBAAS,cAAc,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,MAAM,CAAC,qBAW5E;AAED,iBAAS,mBAAmB,CAAC,EAAE,QAAQ,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,IAAI,CAAC,qBAYzF;AAED,iBAAS,kBAAkB,CAAC,EAC1B,SAAS,EACT,KAAK,EACL,GAAG,KAAK,EACT,EAAE,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,MAAM,CAAC,EAAE,UAAU,CAAC,GAAG;IAClD,uEAAuE;IACvE,KAAK,EAAE,MAAM,CAAC;CACf,qBAWA;AAED,YAAY,EAAE,eAAe,EAAE,CAAC;AAChC,OAAO,EACL,UAAU,EACV,cAAc,EACd,cAAc,EACd,cAAc,EACd,cAAc,EACd,mBAAmB,EACnB,kBAAkB,GACnB,CAAC"}
+{"version":3,"file":"breadcrumb.d.ts","sourceRoot":"","sources":["../../src/components/breadcrumb.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAE,SAAS,EAAE,MAAM,2BAA2B,CAAC;AAMtD,KAAK,cAAc,GAAG,MAAM,GAAG,MAAM,CAAC;AAItC,KAAK,eAAe,GAAG,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,EAAE,YAAY,CAAC,GAAG;IACvE,iEAAiE;IACjE,YAAY,EAAE,MAAM,CAAC;IACrB,uFAAuF;IACvF,IAAI,CAAC,EAAE,cAAc,CAAC;CACvB,CAAC;AAEF;;;;;;;;;;GAUG;AACH,iBAAS,UAAU,CAAC,EAAE,SAAS,EAAE,IAAa,EAAE,GAAG,KAAK,EAAE,EAAE,eAAe,qBAW1E;AAED,iBAAS,cAAc,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,IAAI,CAAC,qBAW1E;AAED,iBAAS,cAAc,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,IAAI,CAAC,qBAW1E;AA8BD,KAAK,mBAAmB,GAAG,SAAS,CAAC,cAAc,CAAC,GAAG,CAAC,GACtD,CAAC;IAAE,QAAQ,CAAC,EAAE,KAAK,GAAG,SAAS,CAAA;CAAE,GAAG;IAAE,QAAQ,EAAE,IAAI,CAAC;IAAC,IAAI,CAAC,EAAE,KAAK,CAAC;IAAC,MAAM,CAAC,EAAE,KAAK,CAAA;CAAE,CAAC,CAAC;AAExF,iBAAS,cAAc,CAAC,EACtB,QAAQ,EACR,SAAS,EACT,QAAgB,EAChB,MAAM,EACN,GAAG,KAAK,EACT,EAAE,mBAAmB,qBAsBrB;AAED,iBAAS,cAAc,CAAC,EAAE,QAAQ,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,MAAM,CAAC,qBAmBtF;AAED,iBAAS,mBAAmB,CAAC,EAAE,QAAQ,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,IAAI,CAAC,4BAczF;AAED,iBAAS,kBAAkB,CAAC,EAC1B,SAAS,EACT,KAAK,EACL,GAAG,KAAK,EACT,EAAE,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,MAAM,CAAC,EAAE,UAAU,CAAC,GAAG;IAClD,uEAAuE;IACvE,KAAK,EAAE,MAAM,CAAC;CACf,qBAWA;AAED,YAAY,EAAE,eAAe,EAAE,CAAC;AAChC,OAAO,EACL,UAAU,EACV,cAAc,EACd,cAAc,EACd,cAAc,EACd,cAAc,EACd,mBAAmB,EACnB,kBAAkB,GACnB,CAAC"}