@arcfusionz/arc-primitive-ui 0.0.0 → 0.2.0

package/dist/components/AILoader/AILoader.d.ts

@@ -0,0 +1,32 @@
+import { ComponentPropsWithoutRef, ReactNode } from "react";
+import { useRender } from "@base-ui/react/use-render";
+//#region src/components/AILoader/AILoader.d.ts
+type AILoaderState = "default" | "processing";
+type AILoaderSize = "sm" | "md" | "lg";
+type AILoaderTone = "brand" | "current";
+interface AILoaderRenderState extends Record<string, unknown> {
+  /** Current visual and semantic state. */
+  state: AILoaderState;
+  /** Whether the indicator represents active work. */
+  processing: boolean;
+}
+interface AILoaderBaseProps extends Omit<ComponentPropsWithoutRef<"span">, "children" | "className"> {
+  /** Ambient AI motion or a rotating indeterminate processing indicator. */
+  state?: AILoaderState;
+  /** Visual scale: `sm` uses a 16px mark/12px plain text, `md` 24px/14px, and `lg` 32px/16px. This is non-interactive, so no target-size floor applies. */
+  size?: AILoaderSize;
+  /** `brand` uses info → primary → hero at rest and primary blue while processing; `current` inherits the surrounding text color. Processing uses `currentColor`, so text-color utilities or `style.color` can override either tone. */
+  tone?: AILoaderTone;
+  /** Optional visible status content beside the mark. Accepts plain text or an inline node such as `<Typography as="span">`; processing adds a reduced-motion-safe shimmer. */
+  text?: ReactNode;
+  /** Accessible label. Defaults to a string `text` value when present, otherwise “AI” at rest and “Processing” while active. When `text` is JSX, set this to override its readable content. */
+  label?: string;
+  /** Replace the rendered `span` or inspect `{ state, processing }` in a render callback. */
+  render?: useRender.RenderProp<AILoaderRenderState>;
+  /** Additional classes merged after the component's layout and spacing classes. */
+  className?: string;
+}
+type AILoaderProps = AILoaderBaseProps;
+declare const AILoader: import("react").ForwardRefExoticComponent<AILoaderBaseProps & import("react").RefAttributes<HTMLSpanElement>>;
+//#endregion
+export { AILoader, AILoaderProps, AILoaderRenderState, AILoaderSize, AILoaderState, AILoaderTone };

package/dist/components/AILoader/AILoader.js

@@ -0,0 +1,157 @@
+import { cn } from "../../lib/cn.js";
+import { forwardRef, useId } from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useRender } from "@base-ui/react/use-render";
+//#region src/components/AILoader/AILoader.tsx
+const rootClasses = "relative inline-flex shrink-0 items-center justify-center align-middle select-none";
+const toneClasses = {
+	brand: "text-primary",
+	current: ""
+};
+const SPARKLE_PATH = "M12 1.2C12.58 1.2 12.82 1.58 12.98 2.28C13.72 5.55 14.72 7.38 16.23 8.68C17.57 9.82 19.24 10.33 21.72 11.02C22.42 11.21 22.8 11.42 22.8 12C22.8 12.58 22.42 12.79 21.72 12.98C19.24 13.67 17.57 14.18 16.23 15.32C14.72 16.62 13.72 18.45 12.98 21.72C12.82 22.42 12.58 22.8 12 22.8C11.42 22.8 11.18 22.42 11.02 21.72C10.28 18.45 9.28 16.62 7.77 15.32C6.43 14.18 4.76 13.67 2.28 12.98C1.58 12.79 1.2 12.58 1.2 12C1.2 11.42 1.58 11.21 2.28 11.02C4.76 10.33 6.43 9.82 7.77 8.68C9.28 7.38 10.28 5.55 11.02 2.28C11.18 1.58 11.42 1.2 12 1.2Z";
+const LARGE_SATELLITE_PATH = "M0-2.25C.16-.82.82-.16 2.25 0 .82.16.16.82 0 2.25-.16.82-.82.16-2.25 0-.82-.16-.16-.82 0-2.25Z";
+const SMALL_SATELLITE_PATH = "M0-1.65C.12-.6.6-.12 1.65 0 .6.12.12.6 0 1.65-.12.6-.6.12-1.65 0-.6-.12-.12-.6 0-1.65Z";
+const sizeClasses = {
+	sm: "size-4",
+	md: "size-6",
+	lg: "size-8"
+};
+const gapClasses = {
+	sm: "gap-1.5",
+	md: "gap-2",
+	lg: "gap-2.5"
+};
+const textSizeClasses = {
+	sm: "text-xs",
+	md: "text-sm",
+	lg: "text-base"
+};
+const textClasses = "inline-block whitespace-nowrap font-sans leading-none text-muted-foreground";
+const textShimmerClasses = "bg-[linear-gradient(90deg,transparent_38%,var(--color-secondary)_50%,transparent_62%),linear-gradient(var(--color-muted-foreground),var(--color-muted-foreground))] bg-[length:250%_100%,100%_100%] bg-clip-text [background-repeat:no-repeat,no-repeat] motion-safe:animate-ai-loader-text-shimmer motion-safe:text-transparent motion-safe:[&_*]:!text-inherit motion-safe:will-change-[background-position]";
+const rotationMotionClasses = "motion-safe:animate-ai-loader-rotate motion-safe:will-change-transform";
+const processingPulseMotionClasses = "motion-safe:animate-ai-loader-processing-pulse motion-safe:will-change-transform";
+const coreMotionClasses = "motion-safe:animate-ai-loader-core motion-safe:will-change-transform";
+const facetMotionClasses = "motion-safe:animate-ai-loader-facet motion-safe:will-change-transform";
+const firstSparkMotionClasses = "motion-safe:animate-ai-loader-spark motion-safe:will-change-transform";
+const quarterSparkMotionClasses = "motion-safe:animate-ai-loader-spark motion-safe:[animation-delay:0.6s] motion-safe:will-change-transform";
+const secondSparkMotionClasses = "motion-safe:animate-ai-loader-spark motion-safe:[animation-delay:1.2s] motion-safe:will-change-transform";
+const threeQuarterSparkMotionClasses = "motion-safe:animate-ai-loader-spark motion-safe:[animation-delay:1.8s] motion-safe:will-change-transform";
+const processingSatelliteMotionClasses = "motion-safe:animate-ai-loader-processing-satellite motion-safe:will-change-opacity";
+const AILoader = forwardRef(({ state = "default", size = "md", tone = "brand", text, label, render, className, ...rest }, ref) => {
+	const gradientId = `ai-loader-${useId().replaceAll(":", "")}`;
+	const processing = state === "processing";
+	const hasText = text != null;
+	const accessibleLabel = label ?? (typeof text === "string" ? text : processing ? "Processing" : "AI");
+	const monochrome = processing || tone === "current";
+	const startColor = monochrome ? "currentColor" : "var(--color-info)";
+	const middleColor = monochrome ? "currentColor" : "var(--color-primary)";
+	const endColor = monochrome ? "currentColor" : "var(--color-hero)";
+	return useRender({
+		defaultTagName: "span",
+		render,
+		ref,
+		state: {
+			state,
+			processing
+		},
+		props: {
+			role: processing ? "status" : "img",
+			"aria-label": processing ? hasText ? label : void 0 : accessibleLabel,
+			className: cn(rootClasses, toneClasses[tone], hasText && gapClasses[size], className),
+			children: /* @__PURE__ */ jsxs(Fragment, { children: [
+				/* @__PURE__ */ jsxs("svg", {
+					viewBox: "0 0 24 24",
+					fill: "none",
+					"aria-hidden": "true",
+					className: cn("shrink-0 overflow-visible", sizeClasses[size]),
+					children: [/* @__PURE__ */ jsx("defs", { children: /* @__PURE__ */ jsxs("linearGradient", {
+						id: gradientId,
+						x1: "3",
+						y1: "2",
+						x2: "21",
+						y2: "22",
+						gradientUnits: "userSpaceOnUse",
+						children: [
+							/* @__PURE__ */ jsx("stop", {
+								offset: "0",
+								stopColor: startColor
+							}),
+							/* @__PURE__ */ jsx("stop", {
+								offset: "0.5",
+								stopColor: middleColor
+							}),
+							/* @__PURE__ */ jsx("stop", {
+								offset: "1",
+								stopColor: endColor
+							})
+						]
+					}) }), /* @__PURE__ */ jsxs("g", {
+						className: cn("origin-center [transform-box:view-box]", processing && rotationMotionClasses),
+						children: [
+							!processing && /* @__PURE__ */ jsx("g", {
+								className: cn("origin-center rotate-45 scale-75 opacity-15 [transform-box:fill-box]", facetMotionClasses),
+								children: /* @__PURE__ */ jsx("path", {
+									fill: `url(#${gradientId})`,
+									d: SPARKLE_PATH
+								})
+							}),
+							/* @__PURE__ */ jsx("path", {
+								fill: `url(#${gradientId})`,
+								d: SPARKLE_PATH,
+								className: cn("origin-center opacity-95 [transform-box:fill-box]", processing ? processingPulseMotionClasses : coreMotionClasses)
+							}),
+							/* @__PURE__ */ jsx("g", {
+								transform: "translate(19 4.75)",
+								className: processing ? processingSatelliteMotionClasses : void 0,
+								children: /* @__PURE__ */ jsx("path", {
+									fill: `url(#${gradientId})`,
+									className: cn("origin-center opacity-45 [transform-box:fill-box]", firstSparkMotionClasses),
+									d: LARGE_SATELLITE_PATH
+								})
+							}),
+							processing && /* @__PURE__ */ jsx("g", {
+								transform: "translate(19 19.25)",
+								className: processingSatelliteMotionClasses,
+								children: /* @__PURE__ */ jsx("path", {
+									fill: `url(#${gradientId})`,
+									className: cn("origin-center opacity-45 [transform-box:fill-box]", quarterSparkMotionClasses),
+									d: SMALL_SATELLITE_PATH
+								})
+							}),
+							/* @__PURE__ */ jsx("g", {
+								transform: processing ? "translate(5 19.25)" : "translate(5 18.25)",
+								className: processing ? processingSatelliteMotionClasses : void 0,
+								children: /* @__PURE__ */ jsx("path", {
+									fill: `url(#${gradientId})`,
+									className: cn("origin-center opacity-45 [transform-box:fill-box]", secondSparkMotionClasses),
+									d: processing ? LARGE_SATELLITE_PATH : SMALL_SATELLITE_PATH
+								})
+							}),
+							processing && /* @__PURE__ */ jsx("g", {
+								transform: "translate(5 4.75)",
+								className: processingSatelliteMotionClasses,
+								children: /* @__PURE__ */ jsx("path", {
+									fill: `url(#${gradientId})`,
+									className: cn("origin-center opacity-45 [transform-box:fill-box]", threeQuarterSparkMotionClasses),
+									d: SMALL_SATELLITE_PATH
+								})
+							})
+						]
+					})]
+				}),
+				hasText && /* @__PURE__ */ jsx("span", {
+					className: cn(textClasses, textSizeClasses[size], processing && textShimmerClasses),
+					children: text
+				}),
+				processing && !hasText && /* @__PURE__ */ jsx("span", {
+					className: "sr-only",
+					children: accessibleLabel
+				})
+			] }),
+			...rest
+		}
+	});
+});
+AILoader.displayName = "AILoader";
+//#endregion
+export { AILoader };

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

@@ -0,0 +1,2 @@
+import { AILoader, AILoaderProps, AILoaderRenderState, AILoaderSize, AILoaderState, AILoaderTone } from "./AILoader.js";
+export { AILoader, type AILoaderProps, type AILoaderRenderState, type AILoaderSize, type AILoaderState, type AILoaderTone };

package/dist/components/AILoader/index.js

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

package/dist/components/Accordion/Accordion.d.ts

@@ -0,0 +1,96 @@
+import { ComponentPropsWithoutRef, ReactNode } from "react";
+import { Accordion } from "@base-ui/react/accordion";
+//#region src/components/Accordion/Accordion.d.ts
+type AccordionVariant = "divided" | "contained" | "separated";
+type AccordionSize = "sm" | "md" | "lg";
+type AccordionChevronPosition = "start" | "end";
+type BaseRootProps = ComponentPropsWithoutRef<typeof Accordion.Root>;
+type AccordionChangeEventDetails = Parameters<NonNullable<BaseRootProps["onValueChange"]>>[1];
+interface AccordionProps extends Omit<BaseRootProps, "className" | "value" | "defaultValue" | "onValueChange"> {
+  /**
+   * Controlled set of open item values — always an array; single mode holds
+   * zero or one entries. Item values are strings in this design system
+   * (Base UI itself allows any value type).
+   */
+  value?: string[];
+  /** Item values open on first render (uncontrolled). */
+  defaultValue?: string[];
+  /** Called with the next open set when an item expands or collapses. */
+  onValueChange?: (value: string[], eventDetails: AccordionChangeEventDetails) => void;
+  /**
+   * Container treatment: `divided` separates full-bleed rows with hairlines,
+   * `contained` wraps all items in one bordered box, `separated` renders each
+   * item as its own bordered card with a gap.
+   */
+  variant?: AccordionVariant;
+  /** Row density. Trigger rows are 36px (`sm`) / 44px (`md`) / 56px (`lg`) tall before wrapping — all clear the WCAG 2.5.8 24px target-size floor. */
+  size?: AccordionSize;
+  /**
+   * Side of the header the expansion icon sits on. `end` is the familiar
+   * default; `start` keeps the icon next to the label, which NN/g found
+   * faster to scan for magnified and low-vision use.
+   */
+  chevronPosition?: AccordionChevronPosition;
+  className?: string;
+}
+/**
+ * Vertically stacked disclosure sections built on Base UI's Accordion.
+ * One panel opens at a time by default (`multiple` lifts that); the open
+ * panel can always be collapsed again.
+ */
+declare const Accordion$1: import("react").ForwardRefExoticComponent<AccordionProps & import("react").RefAttributes<HTMLDivElement>>;
+interface AccordionItemProps extends Omit<ComponentPropsWithoutRef<typeof Accordion.Item>, "className" | "value"> {
+  /**
+   * Identifies the item in the root's `value`/`defaultValue` arrays.
+   * Auto-generated when omitted (fine for purely uncontrolled use).
+   */
+  value?: string;
+  className?: string;
+}
+/**
+ * One disclosure section: a header/trigger pair plus its panel. Give it a
+ * `value` to control or pre-open it; omit the value and Base UI generates one.
+ */
+declare const AccordionItem: import("react").ForwardRefExoticComponent<AccordionItemProps & import("react").RefAttributes<HTMLDivElement>>;
+interface AccordionHeaderProps extends Omit<ComponentPropsWithoutRef<typeof Accordion.Header>, "className"> {
+  className?: string;
+}
+/**
+ * The heading that labels a panel — an `<h3>` by default. Pick the level
+ * from the surrounding document outline via `render`, e.g.
+ * `<AccordionHeader render={<h4 />}>`; the visual style lives on the trigger
+ * either way.
+ */
+declare const AccordionHeader: import("react").ForwardRefExoticComponent<AccordionHeaderProps & import("react").RefAttributes<HTMLHeadingElement>>;
+interface AccordionTriggerProps extends Omit<ComponentPropsWithoutRef<typeof Accordion.Trigger>, "className"> {
+  /**
+   * Replace the default chevron; pass `null` to render no indicator. The
+   * default chevron rotates 180° while open — a custom icon styles its own
+   * open state off the trigger's `group`, e.g.
+   * `className="motion-safe:transition-transform group-data-panel-open:rotate-45"`.
+   */
+  icon?: ReactNode;
+  className?: string;
+}
+/**
+ * The full-width button that toggles its panel. Label and icon are one
+ * target (never split them); long labels wrap.
+ */
+declare const AccordionTrigger: import("react").ForwardRefExoticComponent<AccordionTriggerProps & import("react").RefAttributes<HTMLButtonElement>>;
+interface AccordionPanelProps extends Omit<ComponentPropsWithoutRef<typeof Accordion.Panel>, "className"> {
+  /**
+   * Applied to the content block inside the animated panel — the panel
+   * element itself must keep zero padding and `overflow-hidden` for the
+   * height transition to measure cleanly (customize it via `render`).
+   */
+  className?: string;
+}
+/**
+ * The collapsible content region. Height animates via Base UI's
+ * `--accordion-panel-height` behind `motion-safe:`; with reduced motion it
+ * snaps open. Set `hiddenUntilFound` (here or on the root) so browser
+ * find-in-page can reveal closed panels.
+ */
+declare const AccordionPanel: import("react").ForwardRefExoticComponent<AccordionPanelProps & import("react").RefAttributes<HTMLDivElement>>;
+//#endregion
+export { Accordion$1 as Accordion, AccordionChevronPosition, AccordionHeader, AccordionHeaderProps, AccordionItem, AccordionItemProps, AccordionPanel, AccordionPanelProps, AccordionProps, AccordionSize, AccordionTrigger, AccordionTriggerProps, AccordionVariant };

package/dist/components/Accordion/Accordion.js

@@ -0,0 +1,149 @@
+import { cn } from "../../lib/cn.js";
+import { createContext, forwardRef, useContext, useMemo } from "react";
+import { Accordion } from "@base-ui/react/accordion";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/Accordion/Accordion.tsx
+const AccordionStyleContext = createContext({
+	variant: "divided",
+	size: "md",
+	chevronPosition: "end"
+});
+const rootVariantClasses = {
+	divided: "",
+	contained: "overflow-hidden rounded-md border border-border",
+	separated: "gap-2"
+};
+const itemVariantClasses = {
+	divided: "border-b border-border",
+	contained: "border-b border-border last:border-b-0",
+	separated: "overflow-hidden rounded-md border border-border"
+};
+const triggerBaseClasses = "group flex w-full cursor-pointer items-center gap-3 text-start font-sans font-medium text-foreground transition-colors duration-150 select-none focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-ring [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 disabled:pointer-events-none disabled:opacity-50 data-disabled:pointer-events-none data-disabled:opacity-50";
+const triggerVariantClasses = {
+	divided: "px-0 hover:underline underline-offset-4",
+	contained: "hover:bg-muted active:bg-slate-200",
+	separated: "hover:bg-muted active:bg-slate-200"
+};
+const triggerSizeClasses = {
+	sm: "px-3 py-2 text-sm",
+	md: "px-4 py-3 text-sm",
+	lg: "px-5 py-4 text-base [&_svg:not([class*='size-'])]:size-5"
+};
+const panelBaseClasses = "h-[var(--accordion-panel-height)] overflow-hidden motion-safe:transition-[height] motion-safe:duration-200 motion-safe:ease-out data-starting-style:h-0 data-ending-style:h-0";
+const panelContentBaseClasses = "font-sans text-muted-foreground";
+const panelContentSizeClasses = {
+	sm: "px-3 pb-2 text-sm",
+	md: "px-4 pb-3 text-sm",
+	lg: "px-5 pb-4 text-base"
+};
+function ChevronDownIcon(props) {
+	return /* @__PURE__ */ jsx("svg", {
+		viewBox: "0 0 24 24",
+		fill: "none",
+		stroke: "currentColor",
+		strokeWidth: 2,
+		strokeLinecap: "round",
+		strokeLinejoin: "round",
+		...props,
+		children: /* @__PURE__ */ jsx("path", { d: "m6 9 6 6 6-6" })
+	});
+}
+/**
+* Vertically stacked disclosure sections built on Base UI's Accordion.
+* One panel opens at a time by default (`multiple` lifts that); the open
+* panel can always be collapsed again.
+*/
+const Accordion$1 = forwardRef(({ variant = "divided", size = "md", chevronPosition = "end", onValueChange, className, ...rest }, ref) => {
+	const styleContext = useMemo(() => ({
+		variant,
+		size,
+		chevronPosition
+	}), [
+		variant,
+		size,
+		chevronPosition
+	]);
+	return /* @__PURE__ */ jsx(AccordionStyleContext.Provider, {
+		value: styleContext,
+		children: /* @__PURE__ */ jsx(Accordion.Root, {
+			ref,
+			onValueChange,
+			className: cn("flex w-full flex-col", rootVariantClasses[variant], className),
+			...rest
+		})
+	});
+});
+Accordion$1.displayName = "Accordion";
+/**
+* One disclosure section: a header/trigger pair plus its panel. Give it a
+* `value` to control or pre-open it; omit the value and Base UI generates one.
+*/
+const AccordionItem = forwardRef(({ className, ...rest }, ref) => {
+	const { variant } = useContext(AccordionStyleContext);
+	return /* @__PURE__ */ jsx(Accordion.Item, {
+		ref,
+		className: cn(itemVariantClasses[variant], className),
+		...rest
+	});
+});
+AccordionItem.displayName = "AccordionItem";
+/**
+* The heading that labels a panel — an `<h3>` by default. Pick the level
+* from the surrounding document outline via `render`, e.g.
+* `<AccordionHeader render={<h4 />}>`; the visual style lives on the trigger
+* either way.
+*/
+const AccordionHeader = forwardRef(({ className, ...rest }, ref) => /* @__PURE__ */ jsx(Accordion.Header, {
+	ref,
+	className: cn("m-0", className),
+	...rest
+}));
+AccordionHeader.displayName = "AccordionHeader";
+/**
+* The full-width button that toggles its panel. Label and icon are one
+* target (never split them); long labels wrap.
+*/
+const AccordionTrigger = forwardRef(({ icon, className, children, ...rest }, ref) => {
+	const { variant, size, chevronPosition } = useContext(AccordionStyleContext);
+	const indicator = icon === void 0 ? /* @__PURE__ */ jsx(ChevronDownIcon, { className: "text-muted-foreground motion-safe:transition-transform motion-safe:duration-200 motion-safe:ease-out group-data-panel-open:rotate-180" }) : icon;
+	const indicatorSlot = indicator != null && /* @__PURE__ */ jsx("span", {
+		"aria-hidden": "true",
+		className: "inline-flex items-center",
+		children: indicator
+	});
+	return /* @__PURE__ */ jsxs(Accordion.Trigger, {
+		ref,
+		className: cn(triggerBaseClasses, triggerSizeClasses[size], triggerVariantClasses[variant], className),
+		...rest,
+		children: [
+			chevronPosition === "start" && indicatorSlot,
+			/* @__PURE__ */ jsx("span", {
+				className: "flex-1",
+				children
+			}),
+			chevronPosition === "end" && indicatorSlot
+		]
+	});
+});
+AccordionTrigger.displayName = "AccordionTrigger";
+/**
+* The collapsible content region. Height animates via Base UI's
+* `--accordion-panel-height` behind `motion-safe:`; with reduced motion it
+* snaps open. Set `hiddenUntilFound` (here or on the root) so browser
+* find-in-page can reveal closed panels.
+*/
+const AccordionPanel = forwardRef(({ className, children, ...rest }, ref) => {
+	const { variant, size } = useContext(AccordionStyleContext);
+	return /* @__PURE__ */ jsx(Accordion.Panel, {
+		ref,
+		className: panelBaseClasses,
+		...rest,
+		children: /* @__PURE__ */ jsx("div", {
+			className: cn(panelContentBaseClasses, panelContentSizeClasses[size], variant === "divided" && "px-0", className),
+			children
+		})
+	});
+});
+AccordionPanel.displayName = "AccordionPanel";
+//#endregion
+export { Accordion$1 as Accordion, AccordionHeader, AccordionItem, AccordionPanel, AccordionTrigger };

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

@@ -0,0 +1,2 @@
+import { Accordion, AccordionChevronPosition, AccordionHeader, AccordionHeaderProps, AccordionItem, AccordionItemProps, AccordionPanel, AccordionPanelProps, AccordionProps, AccordionSize, AccordionTrigger, AccordionTriggerProps, AccordionVariant } from "./Accordion.js";
+export { Accordion, type AccordionChevronPosition, AccordionHeader, type AccordionHeaderProps, AccordionItem, type AccordionItemProps, AccordionPanel, type AccordionPanelProps, type AccordionProps, type AccordionSize, AccordionTrigger, type AccordionTriggerProps, type AccordionVariant };

package/dist/components/Accordion/index.js

@@ -0,0 +1,2 @@
+import { Accordion, AccordionHeader, AccordionItem, AccordionPanel, AccordionTrigger } from "./Accordion.js";
+export { Accordion, AccordionHeader, AccordionItem, AccordionPanel, AccordionTrigger };

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

@@ -0,0 +1,152 @@
+import { ComponentPropsWithoutRef, ReactNode } from "react";
+import { useRender } from "@base-ui/react/use-render";
+import { Avatar } from "@base-ui/react/avatar";
+//#region src/components/Avatar/Avatar.d.ts
+type AvatarSize = "xs" | "sm" | "md" | "lg" | "xl";
+type AvatarShape = "circle" | "square";
+interface AvatarVariantsOptions {
+  size?: AvatarSize;
+  shape?: AvatarShape;
+  className?: string;
+}
+/**
+ * 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>
+ */
+declare function avatarVariants({ size, shape, className }?: AvatarVariantsOptions): string;
+interface AvatarProps extends Omit<ComponentPropsWithoutRef<typeof Avatar.Root>, "className"> {
+  /**
+   * Box size: `xs` 24px · `sm` 32px · `md` 40px · `lg` 48px · `xl` 64px.
+   * Defaults to the enclosing `AvatarGroup`'s size, then `md`. Avatars are
+   * non-interactive by default; one made clickable via `render` should use
+   * `sm`+ to clear the WCAG 2.5.8 24px target-size floor with room to spare.
+   */
+  size?: AvatarSize;
+  /** `circle` for people (default), `square` (6px radius) for entities like teams, orgs, or apps. Defaults to the enclosing `AvatarGroup`'s shape. */
+  shape?: AvatarShape;
+  /** Image URL. While it loads — and if it fails — the fallback shows instead. */
+  src?: string;
+  /**
+   * Alt text for the image. Defaults to `""` (decorative) because avatars
+   * usually sit next to the visible name. For a standalone avatar put the
+   * name on the root via `aria-label` instead — it also covers the fallback,
+   * which `alt` cannot.
+   */
+  alt?: string;
+  /**
+   * Person or entity name used to derive the fallback initials (first letter
+   * of the first and last words). Used for initials only — pass `aria-label`
+   * when the avatar must be announced.
+   */
+  name?: string;
+  /** Custom fallback content (e.g. an org icon), replacing the derived initials / person icon. */
+  fallback?: ReactNode;
+  /**
+   * Milliseconds to wait before showing the fallback, avoiding a flash of
+   * initials when images load fast. Only applied while `src` is set — the
+   * muted box shows in the meantime. Without `src` the fallback is immediate.
+   */
+  fallbackDelay?: number;
+  className?: string;
+}
+/**
+ * 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.
+ */
+declare const Avatar$1: import("react").ForwardRefExoticComponent<AvatarProps & import("react").RefAttributes<HTMLSpanElement>>;
+interface AvatarImageProps extends Omit<ComponentPropsWithoutRef<typeof Avatar.Image>, "className"> {
+  className?: string;
+}
+/**
+ * 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`.
+ */
+declare const AvatarImage: import("react").ForwardRefExoticComponent<AvatarImageProps & import("react").RefAttributes<HTMLImageElement>>;
+interface AvatarFallbackProps extends Omit<ComponentPropsWithoutRef<typeof Avatar.Fallback>, "className"> {
+  className?: string;
+}
+/**
+ * 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.
+ */
+declare const AvatarFallback: import("react").ForwardRefExoticComponent<AvatarFallbackProps & import("react").RefAttributes<HTMLSpanElement>>;
+interface AvatarBadgeProps extends Omit<ComponentPropsWithoutRef<"span">, "className"> {
+  /**
+   * Screen-reader text for the state the badge conveys (e.g. "Online").
+   * Color alone must not carry meaning (WCAG 1.4.1) — always pass this when
+   * the badge is more than decoration.
+   */
+  label?: string;
+  /** Replace the rendered `span`, e.g. `render={<a href="…" />}`. */
+  render?: useRender.RenderProp;
+  className?: string;
+}
+/**
+ * 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.
+ */
+declare const AvatarBadge: import("react").ForwardRefExoticComponent<AvatarBadgeProps & import("react").RefAttributes<HTMLSpanElement>>;
+interface AvatarGroupProps extends Omit<ComponentPropsWithoutRef<"div">, "className"> {
+  /** Size applied to every member avatar (and the overlap distance). Members can still override it. */
+  size?: AvatarSize;
+  /** Shape applied to every member avatar. Members can still override it. */
+  shape?: AvatarShape;
+  /**
+   * Maximum boxes to render, counting the overflow chip: with 6 children and
+   * `max={4}`, 3 avatars and a "+3" chip show. Values below 2 are treated
+   * as 2. Omit to render every child.
+   */
+  max?: number;
+  /**
+   * Total member count when the children are only a page of the real list —
+   * e.g. 4 fetched collaborators of 12 → `total={12}` renders "+9" after
+   * `max` is applied. Defaults to the number of children.
+   */
+  total?: number;
+  /** Replace the rendered `div`, e.g. `render={<ul />}` with `<li>`-wrapped avatars. */
+  render?: useRender.RenderProp;
+  className?: string;
+}
+/**
+ * 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.
+ */
+declare const AvatarGroup: import("react").ForwardRefExoticComponent<AvatarGroupProps & import("react").RefAttributes<HTMLDivElement>>;
+//#endregion
+export { Avatar$1 as Avatar, AvatarBadge, AvatarBadgeProps, AvatarFallback, AvatarFallbackProps, AvatarGroup, AvatarGroupProps, AvatarImage, AvatarImageProps, AvatarProps, AvatarShape, AvatarSize, AvatarVariantsOptions, avatarVariants };