@arcfusionz/arc-primitive-ui 0.1.0 → 0.2.0

package/dist/components/Avatar/Avatar.js

@@ -0,0 +1,216 @@
+import { cn } from "../../lib/cn.js";
+import { Children, createContext, forwardRef, useContext, useMemo } from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useRender } from "@base-ui/react/use-render";
+import { Avatar } from "@base-ui/react/avatar";
+//#region src/components/Avatar/Avatar.tsx
+/** Set by AvatarGroup so member avatars inherit its size/shape and gain the separator ring. */
+const AvatarGroupContext = createContext(null);
+/** Resolved size of the nearest Avatar, so AvatarBadge can scale with it. */
+const AvatarSizeContext = createContext(null);
+const baseClasses = "relative inline-flex shrink-0 select-none items-center justify-center align-middle bg-muted font-sans font-medium text-slate-600 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring [&_svg]:pointer-events-none [&_svg]:shrink-0";
+const sizeClasses = {
+	xs: "size-6 text-xs [&_svg:not([class*='size-'])]:size-3.5",
+	sm: "size-8 text-xs [&_svg:not([class*='size-'])]:size-4",
+	md: "size-10 text-sm [&_svg:not([class*='size-'])]:size-5",
+	lg: "size-12 text-base [&_svg:not([class*='size-'])]:size-6",
+	xl: "size-16 text-xl [&_svg:not([class*='size-'])]:size-8"
+};
+const shapeClasses = {
+	circle: "rounded-full",
+	square: "rounded-md"
+};
+const imageClasses = "size-full rounded-[inherit] object-cover motion-safe:transition-opacity motion-safe:duration-200 data-starting-style:opacity-0 data-ending-style:opacity-0";
+const fallbackClasses = "flex size-full items-center justify-center rounded-[inherit]";
+const badgeSizeClasses = {
+	xs: "size-1.5",
+	sm: "size-2",
+	md: "size-2.5",
+	lg: "size-3",
+	xl: "size-4"
+};
+const groupSpacingClasses = {
+	xs: "-space-x-1.5",
+	sm: "-space-x-2",
+	md: "-space-x-2.5",
+	lg: "-space-x-3",
+	xl: "-space-x-4"
+};
+/**
+* Class list for an element styled as an Avatar box.
+*
+* Use it when the box must stay a foreign element — e.g. a plain anchor
+* around a raw `<img>`, or a static placeholder — so it still matches
+* real avatars in size, shape and fill:
+*
+*   <a href="/profile" className={avatarVariants({ size: "sm" })}>
+*     <img src={photo} alt="Open profile" className="size-full rounded-[inherit] object-cover" />
+*   </a>
+*/
+function avatarVariants({ size = "md", shape = "circle", className } = {}) {
+	return cn(baseClasses, sizeClasses[size], shapeClasses[shape], className);
+}
+/**
+* First code point of the first and last words — "Punyarit Thanyaboon" → "PT",
+* "สมชาย ใจดี" → "สใ". Array.from splits by code point so surrogate-pair
+* characters stay whole; uppercasing is a no-op for caseless scripts.
+*/
+function initialsFromName(name) {
+	const words = name.trim().split(/\s+/);
+	const first = Array.from(words[0] ?? "").slice(0, 1);
+	const last = words.length > 1 ? Array.from(words[words.length - 1] ?? "").slice(0, 1) : [];
+	return first.concat(last).join("").toUpperCase();
+}
+/** Generic person silhouette shown when neither an image nor a name is available. */
+function PersonIcon(props) {
+	return /* @__PURE__ */ jsxs("svg", {
+		viewBox: "0 0 24 24",
+		fill: "none",
+		stroke: "currentColor",
+		strokeWidth: 2,
+		strokeLinecap: "round",
+		strokeLinejoin: "round",
+		"aria-hidden": "true",
+		...props,
+		children: [/* @__PURE__ */ jsx("circle", {
+			cx: "12",
+			cy: "8",
+			r: "4"
+		}), /* @__PURE__ */ jsx("path", { d: "M4 21a8 8 0 0 1 16 0" })]
+	});
+}
+/**
+* Profile picture with automatic fallback, built on Base UI's Avatar.
+*
+* Shorthand props (`src`, `alt`, `name`, `fallback`, `fallbackDelay`) render
+* the image and fallback parts internally; `children` render after them, so
+* an `AvatarBadge` composes on top of the shorthand. When only `children`
+* are passed the root renders them alone — full manual composition with
+* `AvatarImage` / `AvatarFallback` (don't mix that with the shorthand props,
+* or two fallbacks render).
+*
+* Decorative by default. When it stands alone, pass `aria-label` — the root
+* then gets `role="img"` and its internals are hidden from assistive
+* technology, whether the image or the fallback is showing.
+*/
+const Avatar$1 = forwardRef(({ size, shape, src, alt, name, fallback, fallbackDelay, role, className, children, ...rest }, ref) => {
+	const group = useContext(AvatarGroupContext);
+	const resolvedSize = size ?? group?.size ?? "md";
+	const resolvedShape = shape ?? group?.shape ?? "circle";
+	const labelled = rest["aria-label"] != null || rest["aria-labelledby"] != null;
+	const useShorthand = src != null || name != null || fallback != null || children == null;
+	const initials = name == null ? "" : initialsFromName(name);
+	return /* @__PURE__ */ jsx(AvatarSizeContext.Provider, {
+		value: resolvedSize,
+		children: /* @__PURE__ */ jsxs(Avatar.Root, {
+			ref,
+			role: role ?? (labelled ? "img" : void 0),
+			className: cn(avatarVariants({
+				size: resolvedSize,
+				shape: resolvedShape
+			}), group != null && "ring-2 ring-background", className),
+			...rest,
+			children: [useShorthand && /* @__PURE__ */ jsxs(Fragment, { children: [src != null && /* @__PURE__ */ jsx(AvatarImage, {
+				src,
+				alt: alt ?? ""
+			}), /* @__PURE__ */ jsx(AvatarFallback, {
+				delay: src != null ? fallbackDelay : void 0,
+				children: fallback ?? (initials || /* @__PURE__ */ jsx(PersonIcon, {}))
+			})] }), children]
+		})
+	});
+});
+Avatar$1.displayName = "Avatar";
+/**
+* The avatar photo, cropped to fill the box. Base UI keeps it unmounted
+* until the file has actually loaded (the fallback shows meanwhile), then it
+* fades in motion-safe. Defaults to `alt=""` — see `Avatar`'s `alt` docs.
+* `onLoadingStatusChange` reports `idle → loading → loaded | error`.
+*/
+const AvatarImage = forwardRef(({ className, alt = "", ...rest }, ref) => /* @__PURE__ */ jsx(Avatar.Image, {
+	ref,
+	alt,
+	className: cn(imageClasses, className),
+	...rest
+}));
+AvatarImage.displayName = "AvatarImage";
+/**
+* Shown while there is no loaded image: initials, an icon, or any content.
+* Fills the box and inherits the root's muted fill and text styling — set
+* colors via `className` on the root (or here) as a pair, e.g.
+* `bg-primary-100 text-primary-800`. Base UI's `delay` prop postpones it to
+* avoid a flash on fast image loads; only set a delay when an `AvatarImage`
+* sibling exists, otherwise the box just sits empty for that long.
+*/
+const AvatarFallback = forwardRef(({ className, ...rest }, ref) => /* @__PURE__ */ jsx(Avatar.Fallback, {
+	ref,
+	className: cn(fallbackClasses, className),
+	...rest
+}));
+AvatarFallback.displayName = "AvatarFallback";
+/**
+* Corner indicator anchored to the avatar's bottom-right rim, scaled to the
+* avatar's size, with a background-colored ring separating it from the
+* photo. Defaults to the success fill (presence "online"); recolor via
+* `className` — `bg-warning` away, `bg-destructive` busy, `bg-slate-400`
+* offline — and match the ring to the page surface with `ring-*` when the
+* avatar sits on a non-background fill. Compose inside `<Avatar>`, after the
+* shorthand props or parts.
+*/
+const AvatarBadge = forwardRef(({ label, render, className, children, ...rest }, ref) => {
+	const size = useContext(AvatarSizeContext) ?? "md";
+	return useRender({
+		defaultTagName: "span",
+		render,
+		ref,
+		props: {
+			className: cn("absolute end-0 bottom-0 block rounded-full bg-success ring-2 ring-background", badgeSizeClasses[size], className),
+			children: /* @__PURE__ */ jsxs(Fragment, { children: [label != null && /* @__PURE__ */ jsx("span", {
+				className: "sr-only",
+				children: label
+			}), children] }),
+			...rest
+		}
+	});
+});
+AvatarBadge.displayName = "AvatarBadge";
+/**
+* Overlapping stack of avatars ("facepile") with an optional "+N" overflow
+* chip. Members inherit the group's `size`/`shape` and get a
+* background-colored separator ring; later members overlap earlier ones
+* (DOM order). For a custom overflow control — different text, or a chip
+* that opens the full member list — omit `max` and append your own child,
+* e.g. `<Avatar render={<button aria-label="Show all 12 members" />}>+9</Avatar>`.
+* The ring assumes the group sits on `background` — on another surface,
+* override per member (`className="ring-surface"`). Purely visual grouping:
+* give the group an `aria-label` (e.g. "Contributors") when the stack is
+* meaningful, and name each member if avatars are individually meaningful.
+*/
+const AvatarGroup = forwardRef(({ size = "md", shape = "circle", max, total, render, className, children, ...rest }, ref) => {
+	const contextValue = useMemo(() => ({
+		size,
+		shape
+	}), [size, shape]);
+	const items = Children.toArray(children);
+	const count = total ?? items.length;
+	const clampedMax = max === void 0 ? void 0 : Math.max(2, max);
+	const visible = clampedMax !== void 0 && count > clampedMax ? items.slice(0, clampedMax - 1) : items;
+	const surplus = count - visible.length;
+	const element = useRender({
+		defaultTagName: "div",
+		render,
+		ref,
+		props: {
+			className: cn("flex items-center", groupSpacingClasses[size], className),
+			children: /* @__PURE__ */ jsxs(Fragment, { children: [visible, surplus > 0 && /* @__PURE__ */ jsx(Avatar$1, { children: `+${surplus}` })] }),
+			...rest
+		}
+	});
+	return /* @__PURE__ */ jsx(AvatarGroupContext.Provider, {
+		value: contextValue,
+		children: element
+	});
+});
+AvatarGroup.displayName = "AvatarGroup";
+//#endregion
+export { Avatar$1 as Avatar, AvatarBadge, AvatarFallback, AvatarGroup, AvatarImage, avatarVariants };

package/dist/components/Avatar/index.d.ts

@@ -0,0 +1,2 @@
+import { Avatar, AvatarBadge, AvatarBadgeProps, AvatarFallback, AvatarFallbackProps, AvatarGroup, AvatarGroupProps, AvatarImage, AvatarImageProps, AvatarProps, AvatarShape, AvatarSize, AvatarVariantsOptions, avatarVariants } from "./Avatar.js";
+export { Avatar, AvatarBadge, type AvatarBadgeProps, AvatarFallback, type AvatarFallbackProps, AvatarGroup, type AvatarGroupProps, AvatarImage, type AvatarImageProps, type AvatarProps, type AvatarShape, type AvatarSize, type AvatarVariantsOptions, avatarVariants };

package/dist/components/Avatar/index.js

@@ -0,0 +1,2 @@
+import { Avatar, AvatarBadge, AvatarFallback, AvatarGroup, AvatarImage, avatarVariants } from "./Avatar.js";
+export { Avatar, AvatarBadge, AvatarFallback, AvatarGroup, AvatarImage, avatarVariants };

package/dist/components/Badge/Badge.d.ts

@@ -0,0 +1,87 @@
+import { ComponentPropsWithoutRef, ReactNode } from "react";
+import { useRender } from "@base-ui/react/use-render";
+import { Button } from "@base-ui/react/button";
+//#region src/components/Badge/Badge.d.ts
+type BadgeVariant = "neutral" | "primary" | "success" | "warning" | "destructive";
+type BadgeAppearance = "solid" | "soft" | "outline";
+type BadgeSize = "sm" | "md" | "lg";
+interface BadgeVariantsOptions {
+  variant?: BadgeVariant;
+  appearance?: BadgeAppearance;
+  size?: BadgeSize;
+  pill?: boolean;
+  className?: string;
+}
+/**
+ * Class list for an element styled as a Badge.
+ *
+ * Use it to style a plain anchor as a clickable badge while keeping link
+ * semantics (alternatively pass `render={<a href … />}` to `Badge` itself —
+ * badges carry no role, so both are sound):
+ *
+ *   <a href="/releases" className={badgeVariants({ variant: "primary" })}>v2.0</a>
+ */
+declare function badgeVariants({ variant, appearance, size, pill, className }?: BadgeVariantsOptions): string;
+interface BadgeBaseProps extends Omit<ComponentPropsWithoutRef<"span">, "className" | "children"> {
+  /**
+   * Semantic intent. Drives the hue in every appearance. For informational
+   * statuses use `primary` — the palette's `info` alias shares the primary
+   * ramp, so a separate variant would render identically.
+   */
+  variant?: BadgeVariant;
+  /** Emphasis level: `solid` fill, `soft` tint (default), or `outline`. */
+  appearance?: BadgeAppearance;
+  /** Badge height: `sm` 20px · `md` 24px · `lg` 28px. The badge body is non-interactive; the delete button expands its hit area to the WCAG 2.5.8 24px floor. If the badge is made clickable via `render`, provide enough surrounding spacing to reach 24px. */
+  size?: BadgeSize;
+  /** Fully rounded shape for tags and counts. min-width equals the height, so single-digit counts stay compact and centered. */
+  pill?: boolean;
+  /** Badge label; icons ride along as children and inherit sizing. Standalone dots omit children. */
+  children?: ReactNode;
+  /**
+   * Leading status dot (color inherits the label). Per WCAG 1.4.1 the dot
+   * alone must not carry meaning — keep a visible label where state matters.
+   * Without `children` the badge collapses to a bare circular indicator.
+   */
+  dot?: boolean;
+  /** Called when the trailing delete button is activated with pointer, Enter, or Space. Requires `deleteLabel`. */
+  onDelete?: NonNullable<ComponentPropsWithoutRef<typeof Button>["onClick"]>;
+  /** Accessible name for the delete button, e.g. `Remove React filter`. Required when `onDelete` is set. */
+  deleteLabel?: string;
+  /** Decorative replacement for the default close icon. Only rendered when `onDelete` is set. */
+  deleteIcon?: ReactNode;
+  /** Replace the rendered `span`, e.g. `render={<a href="…" />}` for a clickable badge. Unavailable when `onDelete` is set, so interactive elements are never nested. */
+  render?: useRender.RenderProp;
+  /** Additional classes merged after the badge's variant classes. */
+  className?: string;
+}
+/** A badge with no visible label is a bare dot, so an accessible name is required. */
+type BadgeContentProps = {
+  children: ReactNode;
+} | {
+  children?: never;
+  dot: true;
+  "aria-label": string;
+} | {
+  children?: never;
+  dot: true;
+  "aria-labelledby": string;
+};
+/** A static badge may use `render` for semantic composition, including links. */
+type BadgeStaticProps = BadgeContentProps & {
+  render?: useRender.RenderProp;
+  onDelete?: never;
+  deleteLabel?: never;
+  deleteIcon?: never;
+};
+/** Deletable badges need visible content and a unique name for their delete button. */
+type BadgeDeletableProps = {
+  children: ReactNode;
+  onDelete: NonNullable<ComponentPropsWithoutRef<typeof Button>["onClick"]>;
+  deleteLabel: string;
+  deleteIcon?: ReactNode;
+  render?: never;
+};
+type BadgeProps = BadgeBaseProps & (BadgeStaticProps | BadgeDeletableProps);
+declare const Badge: import("react").ForwardRefExoticComponent<BadgeProps & import("react").RefAttributes<HTMLSpanElement>>;
+//#endregion
+export { Badge, BadgeAppearance, BadgeProps, BadgeSize, BadgeVariant, BadgeVariantsOptions, badgeVariants };

package/dist/components/Badge/Badge.js

@@ -0,0 +1,118 @@
+import { cn } from "../../lib/cn.js";
+import { forwardRef } from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useRender } from "@base-ui/react/use-render";
+import { Button } from "@base-ui/react/button";
+//#region src/components/Badge/Badge.tsx
+const baseClasses = "inline-flex w-fit shrink-0 items-center justify-center whitespace-nowrap rounded-md border border-transparent font-sans font-medium tabular-nums transition-colors duration-150 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring [&_svg]:pointer-events-none [&_svg]:shrink-0";
+const appearanceClasses = {
+	solid: {
+		neutral: "bg-foreground text-background [a&]:hover:bg-slate-700 [button&]:hover:bg-slate-700",
+		primary: "bg-primary text-primary-foreground [a&]:hover:bg-primary-700 [button&]:hover:bg-primary-700",
+		success: "bg-success-700 text-success-foreground [a&]:hover:bg-success-800 [button&]:hover:bg-success-800",
+		warning: "bg-warning text-warning-950 [a&]:hover:bg-warning-500 [button&]:hover:bg-warning-500",
+		destructive: "bg-destructive text-destructive-foreground [a&]:hover:bg-error-700 [button&]:hover:bg-error-700"
+	},
+	soft: {
+		neutral: "bg-muted text-slate-700 [a&]:hover:bg-slate-200 [button&]:hover:bg-slate-200",
+		primary: "bg-primary-50 text-primary-700 [a&]:hover:bg-primary-100 [button&]:hover:bg-primary-100",
+		success: "bg-success-50 text-success-700 [a&]:hover:bg-success-100 [button&]:hover:bg-success-100",
+		warning: "bg-warning-50 text-warning-800 [a&]:hover:bg-warning-100 [button&]:hover:bg-warning-100",
+		destructive: "bg-error-50 text-error-700 [a&]:hover:bg-error-100 [button&]:hover:bg-error-100"
+	},
+	outline: {
+		neutral: "border-slate-400 text-slate-700 [a&]:hover:bg-muted [button&]:hover:bg-muted",
+		primary: "border-primary-400 text-primary-700 [a&]:hover:bg-primary-50 [button&]:hover:bg-primary-50",
+		success: "border-success-400 text-success-700 [a&]:hover:bg-success-50 [button&]:hover:bg-success-50",
+		warning: "border-warning-400 text-warning-800 [a&]:hover:bg-warning-50 [button&]:hover:bg-warning-50",
+		destructive: "border-error-400 text-error-700 [a&]:hover:bg-error-50 [button&]:hover:bg-error-50"
+	}
+};
+const sizeClasses = {
+	sm: "h-5 min-w-5 gap-1 px-1.5 text-xs [&_svg:not([class*='size-'])]:size-3",
+	md: "h-6 min-w-6 gap-1 px-2 text-xs [&_svg:not([class*='size-'])]:size-3",
+	lg: "h-7 min-w-7 gap-1.5 px-2.5 text-sm [&_svg:not([class*='size-'])]:size-4"
+};
+const dotOnlyBaseClasses = "inline-block shrink-0 rounded-full";
+const dotOnlySizeClasses = {
+	sm: "size-2",
+	md: "size-2.5",
+	lg: "size-3"
+};
+const dotOnlyFillClasses = {
+	neutral: "bg-slate-400",
+	primary: "bg-primary",
+	success: "bg-success",
+	warning: "bg-warning",
+	destructive: "bg-destructive"
+};
+const deleteButtonClasses = "relative -mr-1 inline-flex size-4 shrink-0 cursor-pointer items-center justify-center rounded-full text-current opacity-70 transition-colors duration-150 before:absolute before:-inset-1 hover:bg-current/10 hover:opacity-100 active:bg-current/20 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring disabled:pointer-events-none disabled:opacity-50 data-disabled:pointer-events-none data-disabled:opacity-50";
+function DeleteIcon() {
+	return /* @__PURE__ */ jsx("svg", {
+		viewBox: "0 0 24 24",
+		fill: "none",
+		stroke: "currentColor",
+		strokeWidth: 2.5,
+		"aria-hidden": "true",
+		children: /* @__PURE__ */ jsx("path", {
+			d: "m6 6 12 12M18 6 6 18",
+			strokeLinecap: "round"
+		})
+	});
+}
+/**
+* Class list for an element styled as a Badge.
+*
+* Use it to style a plain anchor as a clickable badge while keeping link
+* semantics (alternatively pass `render={<a href … />}` to `Badge` itself —
+* badges carry no role, so both are sound):
+*
+*   <a href="/releases" className={badgeVariants({ variant: "primary" })}>v2.0</a>
+*/
+function badgeVariants({ variant = "neutral", appearance = "soft", size = "md", pill = false, className } = {}) {
+	return cn(baseClasses, appearanceClasses[appearance][variant], sizeClasses[size], pill && "rounded-full", className);
+}
+const Badge = forwardRef(({ variant = "neutral", appearance = "soft", size = "md", pill = false, dot = false, className, children, render, onDelete, deleteLabel, deleteIcon, ...rest }, ref) => {
+	return useRender({
+		defaultTagName: "span",
+		render,
+		ref,
+		props: dot && children == null ? {
+			role: "img",
+			className: cn(dotOnlyBaseClasses, dotOnlySizeClasses[size], dotOnlyFillClasses[variant], className),
+			...rest
+		} : {
+			className: cn(badgeVariants({
+				variant,
+				appearance,
+				size,
+				pill
+			}), className),
+			children: /* @__PURE__ */ jsxs(Fragment, { children: [
+				dot && /* @__PURE__ */ jsx("span", {
+					"aria-hidden": "true",
+					className: "size-1.5 shrink-0 rounded-full bg-current"
+				}),
+				children,
+				onDelete && /* @__PURE__ */ jsx(Button, {
+					type: "button",
+					"aria-label": deleteLabel,
+					className: deleteButtonClasses,
+					onClick: (event) => {
+						event.stopPropagation();
+						onDelete(event);
+					},
+					children: /* @__PURE__ */ jsx("span", {
+						"aria-hidden": "true",
+						className: "contents",
+						children: deleteIcon ?? /* @__PURE__ */ jsx(DeleteIcon, {})
+					})
+				})
+			] }),
+			...rest
+		}
+	});
+});
+Badge.displayName = "Badge";
+//#endregion
+export { Badge, badgeVariants };

package/dist/components/Badge/index.d.ts

@@ -0,0 +1,2 @@
+import { Badge, BadgeAppearance, BadgeProps, BadgeSize, BadgeVariant, BadgeVariantsOptions, badgeVariants } from "./Badge.js";
+export { Badge, type BadgeAppearance, type BadgeProps, type BadgeSize, type BadgeVariant, type BadgeVariantsOptions, badgeVariants };

package/dist/components/Badge/index.js

@@ -0,0 +1,2 @@
+import { Badge, badgeVariants } from "./Badge.js";
+export { Badge, badgeVariants };

package/dist/components/Breadcrumb/Breadcrumb.d.ts

@@ -0,0 +1,109 @@
+import { ComponentPropsWithoutRef } from "react";
+import { useRender } from "@base-ui/react/use-render";
+//#region src/components/Breadcrumb/Breadcrumb.d.ts
+interface BreadcrumbProps extends Omit<ComponentPropsWithoutRef<"nav">, "className"> {
+  /** Replace the rendered `nav`. Preserve the navigation landmark so screen-reader users can jump to the trail. */
+  render?: useRender.RenderProp;
+  /** Additional classes merged after the root recipe. */
+  className?: string;
+}
+/**
+ * Navigation landmark that holds the trail. It defaults to
+ * `aria-label="Breadcrumb"`; pass a localized `aria-label` (or
+ * `aria-labelledby`) when the page language isn't English.
+ */
+declare const Breadcrumb: import("react").ForwardRefExoticComponent<BreadcrumbProps & import("react").RefAttributes<HTMLElement>>;
+interface BreadcrumbListProps extends Omit<ComponentPropsWithoutRef<"ol">, "className"> {
+  /** Replace the rendered `ol`. Preserve list semantics so assistive technology announces the trail length. */
+  render?: useRender.RenderProp;
+  /** Additional classes merged after the list recipe, e.g. `text-xs` for a denser trail. */
+  className?: string;
+}
+/**
+ * Ordered list of crumbs. It wraps onto new lines on narrow viewports; cap
+ * individual crumbs with a truncation `className` instead of letting the
+ * whole trail overflow.
+ */
+declare const BreadcrumbList: import("react").ForwardRefExoticComponent<BreadcrumbListProps & import("react").RefAttributes<HTMLOListElement>>;
+interface BreadcrumbItemProps extends Omit<ComponentPropsWithoutRef<"li">, "className"> {
+  /** Replace the rendered `li`. Preserve list-item semantics. */
+  render?: useRender.RenderProp;
+  /** Additional classes merged after the item recipe. */
+  className?: string;
+}
+/** One entry in the trail: wraps a link, the current page, or a composed control. */
+declare const BreadcrumbItem: import("react").ForwardRefExoticComponent<BreadcrumbItemProps & import("react").RefAttributes<HTMLLIElement>>;
+interface BreadcrumbLinkVariantsOptions {
+  className?: string;
+}
+/**
+ * Class list for an element styled as a breadcrumb link.
+ *
+ * Use it to give non-anchor crumbs the same resting/hover/focus treatment —
+ * e.g. a Menu trigger button that reveals collapsed levels:
+ *
+ *   <MenuTrigger
+ *     render={<button aria-label="Show hidden levels" className={breadcrumbLinkVariants()} />}
+ *   >
+ *     <BreadcrumbEllipsis />
+ *   </MenuTrigger>
+ */
+declare function breadcrumbLinkVariants({ className }?: BreadcrumbLinkVariantsOptions): string;
+interface BreadcrumbLinkProps extends Omit<ComponentPropsWithoutRef<"a">, "className"> {
+  /** Replace the rendered `a`, e.g. `render={<Link to="…" />}` for a client-side router. Keep it a real link so open-in-new-tab and copy-link work. */
+  render?: useRender.RenderProp;
+  /** Additional classes merged after the link recipe, e.g. `block max-w-40 truncate` to cap a long crumb. */
+  className?: string;
+}
+/**
+ * Ancestor link in the trail. Inline text links are exempt from the WCAG
+ * 2.5.8 target-size floor, but keep the list's default gap so adjacent
+ * targets stay distinguishable on touch screens. For the APG variant where
+ * the current page stays a link, add `aria-current="page"` — the recipe
+ * restyles it to match `BreadcrumbPage`.
+ */
+declare const BreadcrumbLink: import("react").ForwardRefExoticComponent<BreadcrumbLinkProps & import("react").RefAttributes<HTMLAnchorElement>>;
+interface BreadcrumbPageProps extends Omit<ComponentPropsWithoutRef<"span">, "className"> {
+  /** Replace the rendered `span`. Keep it non-interactive — NN/g: the current page must not look or behave like a link. */
+  render?: useRender.RenderProp;
+  /** Additional classes merged after the current-page recipe. */
+  className?: string;
+}
+/**
+ * The current page, rendered as plain text with `aria-current="page"` — an
+ * honest `span`, not a disabled fake link. Use `BreadcrumbLink` with
+ * `aria-current="page"` instead when the current page must stay navigable.
+ */
+declare const BreadcrumbPage: import("react").ForwardRefExoticComponent<BreadcrumbPageProps & import("react").RefAttributes<HTMLSpanElement>>;
+interface BreadcrumbSeparatorProps extends Omit<ComponentPropsWithoutRef<"li">, "className"> {
+  /** Custom separator glyph, e.g. `/` or `·`. Defaults to a chevron. */
+  children?: ComponentPropsWithoutRef<"li">["children"];
+  /** Replace the rendered `li`. Keep it hidden from assistive technology — separators are purely visual. */
+  render?: useRender.RenderProp;
+  /** Additional classes merged after the separator recipe. */
+  className?: string;
+}
+/**
+ * Visual divider between crumbs. It is `aria-hidden` with
+ * `role="presentation"`, so screen readers hear only the crumbs and the
+ * list's item count — never the glyphs.
+ */
+declare const BreadcrumbSeparator: import("react").ForwardRefExoticComponent<BreadcrumbSeparatorProps & import("react").RefAttributes<HTMLLIElement>>;
+interface BreadcrumbEllipsisProps extends Omit<ComponentPropsWithoutRef<"span">, "className"> {
+  /** Custom collapsed-levels glyph. Defaults to a horizontal ellipsis. */
+  children?: ComponentPropsWithoutRef<"span">["children"];
+  /** Replace the rendered `span`. Keep it decorative — an interactive wrapper owns the accessible name. */
+  render?: useRender.RenderProp;
+  /** Additional classes merged after the ellipsis recipe. */
+  className?: string;
+}
+/**
+ * Marker for collapsed levels in a deep trail. It is decorative
+ * (`aria-hidden`); when the hidden levels must stay reachable, wrap it in a
+ * labelled trigger — e.g. a Menu trigger styled with
+ * `breadcrumbLinkVariants()` — so the control, not the glyph, carries the
+ * accessible name.
+ */
+declare const BreadcrumbEllipsis: import("react").ForwardRefExoticComponent<BreadcrumbEllipsisProps & import("react").RefAttributes<HTMLSpanElement>>;
+//#endregion
+export { Breadcrumb, BreadcrumbEllipsis, BreadcrumbEllipsisProps, BreadcrumbItem, BreadcrumbItemProps, BreadcrumbLink, BreadcrumbLinkProps, BreadcrumbLinkVariantsOptions, BreadcrumbList, BreadcrumbListProps, BreadcrumbPage, BreadcrumbPageProps, BreadcrumbProps, BreadcrumbSeparator, BreadcrumbSeparatorProps, breadcrumbLinkVariants };