@botiverse/raft-ui 0.51.0 → 0.52.0

package/dist/components/app-rail/app-rail.mjs

@@ -0,0 +1,126 @@
+import { Status } from "../status/status.mjs";
+import { appRail } from "./app-rail.recipe.mjs";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { Button } from "@base-ui/react/button";
+import { mergeProps } from "@base-ui/react/merge-props";
+import { useRender } from "@base-ui/react/use-render";
+//#region src/components/app-rail/app-rail.tsx
+function AppRailRoot({ className, render, ...props }) {
+	const { root } = appRail();
+	const defaultProps = {
+		"data-slot": "app-rail-root",
+		className: root({ className })
+	};
+	return useRender({
+		defaultTagName: "div",
+		render,
+		props: mergeProps(defaultProps, props)
+	});
+}
+function AppRailHeader({ className, render, ...props }) {
+	const { header } = appRail();
+	const defaultProps = {
+		"data-slot": "app-rail-header",
+		className: header({ className })
+	};
+	return useRender({
+		defaultTagName: "div",
+		render,
+		props: mergeProps(defaultProps, props)
+	});
+}
+function AppRailNav({ className, render, ...props }) {
+	const { nav } = appRail();
+	const defaultProps = {
+		"data-slot": "app-rail-nav",
+		className: nav({ className })
+	};
+	return useRender({
+		defaultTagName: "nav",
+		render,
+		props: mergeProps(defaultProps, props)
+	});
+}
+function AppRailItem({ nativeButton = true, selected, disabled, className, render, ...props }) {
+	const { item } = appRail();
+	const defaultProps = {
+		type: nativeButton ? "button" : void 0,
+		disabled: nativeButton ? disabled : void 0,
+		"aria-pressed": nativeButton ? selected : void 0,
+		"data-slot": "app-rail-item",
+		"data-selected": selected ? "true" : void 0,
+		"data-disabled": disabled ? "true" : void 0,
+		className: item({ className })
+	};
+	return useRender({
+		render: render ?? /* @__PURE__ */ jsx(Button, {}),
+		props: mergeProps(defaultProps, props)
+	});
+}
+function AppRailItemIcon({ className, render, ...props }) {
+	const { itemIcon } = appRail();
+	const defaultProps = {
+		"data-slot": "app-rail-item-icon",
+		className: itemIcon({ className })
+	};
+	return useRender({
+		defaultTagName: "span",
+		render,
+		props: mergeProps(defaultProps, props)
+	});
+}
+function AppRailItemAttention({ title }) {
+	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(AppRailItemIndicator, { "aria-hidden": true }), title ? /* @__PURE__ */ jsx("span", {
+		className: "sr-only",
+		children: title
+	}) : null] });
+}
+function AppRailItemLabel({ className, render, ...props }) {
+	const { itemLabel } = appRail();
+	const defaultProps = {
+		"data-slot": "app-rail-item-label",
+		className: itemLabel({ className })
+	};
+	return useRender({
+		defaultTagName: "span",
+		render,
+		props: mergeProps(defaultProps, props)
+	});
+}
+function AppRailItemBadge({ className, render, ...props }) {
+	const { itemBadge } = appRail();
+	const defaultProps = {
+		"data-slot": "app-rail-item-badge",
+		className: itemBadge({ className })
+	};
+	return useRender({
+		defaultTagName: "span",
+		render,
+		props: mergeProps(defaultProps, props)
+	});
+}
+function AppRailItemIndicator({ className, size = "sm", variant, ...props }) {
+	const { itemIndicator } = appRail();
+	return /* @__PURE__ */ jsx(Status, {
+		"aria-hidden": true,
+		size,
+		variant: variant ?? "accent",
+		"data-slot": "app-rail-item-indicator",
+		className: itemIndicator({ className }),
+		...props
+	});
+}
+function AppRailFooter({ className, render, ...props }) {
+	const { footer } = appRail();
+	const defaultProps = {
+		"data-slot": "app-rail-footer",
+		className: footer({ className })
+	};
+	return useRender({
+		defaultTagName: "div",
+		render,
+		props: mergeProps(defaultProps, props)
+	});
+}
+//#endregion
+export { AppRailFooter, AppRailHeader, AppRailItem, AppRailItemAttention, AppRailItemBadge, AppRailItemIcon, AppRailItemIndicator, AppRailItemLabel, AppRailNav, AppRailRoot };

package/dist/components/app-rail/app-rail.recipe.mjs

@@ -0,0 +1,47 @@
+import { tv } from "../../lib/tv.mjs";
+//#region src/components/app-rail/app-rail.recipe.ts
+const appRail = tv({ slots: {
+	root: [
+		"flex size-full  flex-col items-center select-none",
+		"w-[calc(var(--shell-header-height,56px)+1px)] border-r border-line-seam",
+		"bg-layer-frame text-foreground-on-frame",
+		"[@media(max-height:600px)]:w-[49px]"
+	],
+	header: [
+		"relative flex w-full shrink-0 items-center justify-center",
+		"h-(--shell-header-height,56px) border-b border-line-seam",
+		"[@media(max-height:600px)]:h-12"
+	],
+	nav: [
+		"flex w-full flex-1 flex-col items-center py-2",
+		"gap-1.5 pt-2.5 pb-2 first:pt-2",
+		"[@media(max-height:600px)]:pt-1.5 [@media(max-height:600px)]:first:pt-1.5",
+		"after:mt-auto after:h-28 after:min-h-0 after:w-12 after:shrink after:content-[''] after:frame-decor-rail"
+	],
+	footer: ["flex w-full shrink-0 flex-col items-center justify-center", "h-auto gap-1.5 pb-2 [@media(max-height:600px)]:pb-1.5"],
+	item: [
+		"relative inline-flex shrink-0 items-center justify-center",
+		"outline-none",
+		"disabled:pointer-events-none disabled:opacity-45",
+		"[&_svg]:shrink-0",
+		"size-10 rounded-control border-[1.5px] border-transparent",
+		"text-foreground-on-frame [&_svg]:size-5",
+		"hover:bg-fill-frame-medium active:bg-fill-frame-medium",
+		"data-[selected=true]:border-line-frame-active data-[selected=true]:bg-layer-frame-active",
+		"data-[selected=true]:ring-[1.5px] data-[selected=true]:ring-sticker-edge",
+		"data-[selected=true]:text-foreground-on-frame-active",
+		"focus-visible:shadow-focus",
+		"[@media(max-height:600px)]:size-9"
+	],
+	itemIcon: ["relative inline-flex items-center justify-center"],
+	itemLabel: ["sr-only"],
+	itemBadge: [
+		"absolute -right-1 -top-1 inline-flex items-center justify-center",
+		"h-4 min-w-4 rounded-sticker px-1",
+		"bg-attention-400 text-sticker-ink inset-ring-[1.5px] inset-ring-sticker-ink ring-[1.5px] ring-sticker-edge",
+		"font-mono text-[10px] font-bold leading-4 tabular-nums"
+	],
+	itemIndicator: ["pointer-events-none absolute", "-top-1 -right-1"]
+} });
+//#endregion
+export { appRail };

package/dist/components/app-rail/index.d.mts

@@ -0,0 +1,2 @@
+import { AppRailFooter, AppRailFooterProps, AppRailHeader, AppRailHeaderProps, AppRailItem, AppRailItemAttention, AppRailItemAttentionProps, AppRailItemBadge, AppRailItemBadgeProps, AppRailItemIcon, AppRailItemIconProps, AppRailItemIndicator, AppRailItemIndicatorProps, AppRailItemLabel, AppRailItemLabelProps, AppRailItemProps, AppRailNav, AppRailNavProps, AppRailRoot, AppRailRootProps } from "./app-rail.mjs";
+export { AppRailFooter, type AppRailFooterProps, AppRailHeader, type AppRailHeaderProps, AppRailItem, AppRailItemAttention, type AppRailItemAttentionProps, AppRailItemBadge, type AppRailItemBadgeProps, AppRailItemIcon, type AppRailItemIconProps, AppRailItemIndicator, type AppRailItemIndicatorProps, AppRailItemLabel, type AppRailItemLabelProps, type AppRailItemProps, AppRailNav, type AppRailNavProps, AppRailRoot, type AppRailRootProps };

package/dist/components/app-shell/app-shell.d.mts

@@ -0,0 +1,27 @@
+import { ReactNode } from "react";
+import { useRender } from "@base-ui/react/use-render";
+//#region src/components/app-shell/app-shell.d.ts
+export type AppShellRootProps = useRender.ComponentProps<"div"> & {
+  defaultSidebarOpen?: boolean;
+  onSidebarOpenChange?: (open: boolean) => void;
+  sidebarCollapsible?: boolean;
+  sidebarOpen?: boolean;
+};
+export declare function AppShellRoot({ className, defaultSidebarOpen, onSidebarOpenChange, render, sidebarCollapsible, sidebarOpen: sidebarOpenProp, style, ...props }: AppShellRootProps): import("react").JSX.Element;
+export type AppShellRailSlotProps = useRender.ComponentProps<"aside">;
+export declare function AppShellRailSlot({ className, render, ...props }: AppShellRailSlotProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+export type AppShellSidebarSlotProps = useRender.ComponentProps<"aside">;
+export declare function AppShellSidebarSlot({ className, id: idProp, render, ...props }: AppShellSidebarSlotProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+export type AppShellPanelSlotProps = useRender.ComponentProps<"aside">;
+export declare function AppShellPanelSlot({ className, render, ...props }: AppShellPanelSlotProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+export type AppShellOverlaySlotProps = useRender.ComponentProps<"div">;
+export declare function AppShellOverlaySlot({ className, render, ...props }: AppShellOverlaySlotProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+export type AppShellMainSlotProps = useRender.ComponentProps<"main"> & {
+  overlay?: boolean;
+};
+export declare function AppShellMainSlot({ className, overlay, render, ...props }: AppShellMainSlotProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+export type AppShellSidebarTriggerProps = useRender.ComponentProps<"button"> & {
+  children: ReactNode;
+};
+export declare function AppShellSidebarTrigger(props: AppShellSidebarTriggerProps): import("react").JSX.Element | null;
+//#endregion

package/dist/components/app-shell/app-shell.mjs

@@ -0,0 +1,217 @@
+import { cn } from "../../cn.mjs";
+import { tv } from "../../lib/tv.mjs";
+import { PanelAction } from "../panel/panel-action.mjs";
+import { createContext, useCallback, useContext, useId, useLayoutEffect, useMemo, useRef, useState } from "react";
+import { jsx } from "react/jsx-runtime";
+import { mergeProps } from "@base-ui/react/merge-props";
+import { useRender } from "@base-ui/react/use-render";
+//#region src/components/app-shell/app-shell.tsx
+const appShell = tv({
+	slots: {
+		root: [
+			"flex min-h-0 w-full overflow-visible md:overflow-clip",
+			"max-md:flex-col max-md:pt-[env(safe-area-inset-top,0px)]",
+			"font-sans",
+			"[--shell-header-height:56px] [@media(max-height:600px)]:[--shell-header-height:48px]",
+			"bg-layer-canvas text-foreground"
+		],
+		railSlot: ["hidden h-full shrink-0 flex-col md:flex"],
+		sidebarSlot: ["hidden min-h-0 shrink-0 flex-col md:flex"],
+		mainSlot: ["flex min-h-0 min-w-0 flex-1 flex-col"],
+		panelSlot: ["hidden min-h-0 min-w-0 flex-col md:flex"],
+		overlaySlot: ["absolute inset-0 z-20 flex min-h-0 min-w-0"]
+	},
+	variants: { overlay: {
+		false: {},
+		true: { mainSlot: "relative" }
+	} },
+	defaultVariants: { overlay: false }
+});
+const AppShellSidebarContext = createContext(null);
+function useOptionalAppShellSidebar() {
+	return useContext(AppShellSidebarContext);
+}
+function AppShellRoot({ className, defaultSidebarOpen = true, onSidebarOpenChange, render, sidebarCollapsible = false, sidebarOpen: sidebarOpenProp, style, ...props }) {
+	const { root } = appShell();
+	const [uncontrolledSidebarOpen, setUncontrolledSidebarOpen] = useState(defaultSidebarOpen);
+	const [sidebarWidth, setSidebarWidth] = useState(0);
+	const [sidebarId, setSidebarId] = useState(void 0);
+	const sidebarOpen = sidebarOpenProp ?? uncontrolledSidebarOpen;
+	const setSidebarOpen = useCallback((open) => {
+		if (sidebarOpenProp === void 0) setUncontrolledSidebarOpen(open);
+		onSidebarOpenChange?.(open);
+	}, [onSidebarOpenChange, sidebarOpenProp]);
+	const toggleSidebar = useCallback(() => {
+		setSidebarOpen(!sidebarOpen);
+	}, [setSidebarOpen, sidebarOpen]);
+	const setMeasuredSidebarWidth = useCallback((width) => {
+		if (width <= 0) return;
+		setSidebarWidth((currentWidth) => Math.abs(currentWidth - width) < 1 ? currentWidth : width);
+	}, []);
+	const sidebarContext = useMemo(() => ({
+		collapsible: sidebarCollapsible,
+		open: sidebarOpen,
+		setOpen: setSidebarOpen,
+		sidebarId,
+		setSidebarId,
+		sidebarWidth,
+		setSidebarWidth: setMeasuredSidebarWidth,
+		toggle: toggleSidebar
+	}), [
+		setMeasuredSidebarWidth,
+		setSidebarOpen,
+		sidebarCollapsible,
+		sidebarId,
+		sidebarOpen,
+		sidebarWidth,
+		toggleSidebar
+	]);
+	const rootStyle = sidebarCollapsible ? {
+		...style,
+		"--app-shell-sidebar-width": `${sidebarWidth}px`
+	} : style;
+	const defaultProps = {
+		"data-state": sidebarCollapsible ? sidebarOpen ? "expanded" : "collapsed" : void 0,
+		"data-slot": "app-shell-root",
+		className: root({ className: cn("group/app-shell", className) }),
+		style: rootStyle
+	};
+	const rootElement = useRender({
+		defaultTagName: "div",
+		render,
+		props: mergeProps(defaultProps, props)
+	});
+	return /* @__PURE__ */ jsx(AppShellSidebarContext, {
+		value: sidebarContext,
+		children: rootElement
+	});
+}
+function AppShellRailSlot({ className, render, ...props }) {
+	const { railSlot } = appShell();
+	const defaultProps = {
+		"data-slot": "app-shell-rail-slot",
+		className: railSlot({ className })
+	};
+	return useRender({
+		defaultTagName: "aside",
+		render,
+		props: mergeProps(defaultProps, props)
+	});
+}
+function AppShellSidebarSlot({ className, id: idProp, render, ...props }) {
+	const { sidebarSlot } = appShell();
+	const sidebar = useOptionalAppShellSidebar();
+	const elementRef = useRef(null);
+	const isCollapsible = sidebar?.collapsible ?? false;
+	const collapsed = isCollapsible && !sidebar?.open;
+	const setSidebarWidth = sidebar?.setSidebarWidth;
+	const setSidebarId = sidebar?.setSidebarId;
+	const generatedId = useId();
+	const id = idProp ?? (isCollapsible ? generatedId : void 0);
+	const setElementRef = useCallback((element) => {
+		elementRef.current = element;
+	}, []);
+	useLayoutEffect(() => {
+		if (!isCollapsible || !setSidebarWidth || !elementRef.current) return;
+		const sidebarElement = elementRef.current;
+		const observe = () => setSidebarWidth(sidebarElement.getBoundingClientRect().width);
+		const observer = new ResizeObserver(observe);
+		observe();
+		observer.observe(sidebarElement);
+		return () => observer.disconnect();
+	}, [isCollapsible, setSidebarWidth]);
+	useLayoutEffect(() => {
+		if (!isCollapsible || !setSidebarId) return;
+		setSidebarId(id);
+		return () => setSidebarId(void 0);
+	}, [
+		id,
+		isCollapsible,
+		setSidebarId
+	]);
+	const defaultProps = {
+		"aria-hidden": collapsed ? true : void 0,
+		"data-slot": "app-shell-sidebar-slot",
+		id,
+		inert: collapsed ? true : void 0,
+		className: sidebarSlot({ className: cn(className, sidebar?.collapsible && [
+			"group-data-[state=expanded]/app-shell:relative group-data-[state=expanded]/app-shell:z-1",
+			"group-data-[state=collapsed]/app-shell:pointer-events-none",
+			"group-data-[state=collapsed]/app-shell:opacity-0"
+		]) })
+	};
+	return useRender({
+		defaultTagName: "aside",
+		render,
+		ref: setElementRef,
+		props: mergeProps(defaultProps, props)
+	});
+}
+function AppShellPanelSlot({ className, render, ...props }) {
+	const { panelSlot } = appShell();
+	const defaultProps = {
+		"data-slot": "app-shell-panel-slot",
+		className: panelSlot({ className })
+	};
+	return useRender({
+		defaultTagName: "aside",
+		render,
+		props: mergeProps(defaultProps, props)
+	});
+}
+function AppShellOverlaySlot({ className, render, ...props }) {
+	const { overlaySlot } = appShell();
+	const defaultProps = {
+		"data-slot": "app-shell-overlay-slot",
+		className: overlaySlot({ className })
+	};
+	return useRender({
+		defaultTagName: "div",
+		render,
+		props: mergeProps(defaultProps, props)
+	});
+}
+function AppShellMainSlot({ className, overlay = false, render, ...props }) {
+	const { mainSlot } = appShell({ overlay });
+	const collapsible = useOptionalAppShellSidebar()?.collapsible ?? false;
+	const defaultProps = {
+		"data-slot": "app-shell-main-slot",
+		className: mainSlot({ className: cn(className, collapsible && ["absolute inset-y-0 right-0 left-0", "group-data-[state=collapsed]/app-shell:-left-(--app-shell-sidebar-width)"]) })
+	};
+	return useRender({
+		defaultTagName: "main",
+		render,
+		props: mergeProps(defaultProps, props)
+	});
+}
+function AppShellSidebarTrigger(props) {
+	const sidebar = useOptionalAppShellSidebar();
+	if (!sidebar?.collapsible) return null;
+	return /* @__PURE__ */ jsx(AppShellSidebarTriggerButton, {
+		sidebar,
+		...props
+	});
+}
+function AppShellSidebarTriggerButton({ sidebar, className, children, onClick, render, ...props }) {
+	const label = sidebar.open ? "Collapse Sidebar" : "Expand Sidebar";
+	const defaultProps = {
+		className: cn("group/app-shell-sidebar-trigger max-md:hidden", className),
+		"aria-label": label,
+		"aria-controls": sidebar.sidebarId,
+		"aria-expanded": sidebar.open,
+		"data-state": sidebar.open ? "expanded" : "collapsed",
+		title: label,
+		children,
+		onClick: (event) => {
+			onClick?.(event);
+			if (!event.defaultPrevented) sidebar.toggle();
+		}
+	};
+	return useRender({
+		defaultTagName: "button",
+		render: render ?? /* @__PURE__ */ jsx(PanelAction, {}),
+		props: mergeProps(defaultProps, props)
+	});
+}
+//#endregion
+export { AppShellMainSlot, AppShellOverlaySlot, AppShellPanelSlot, AppShellRailSlot, AppShellRoot, AppShellSidebarSlot, AppShellSidebarTrigger };

package/dist/components/app-shell/index.d.mts

@@ -0,0 +1,2 @@
+import { AppShellMainSlot, AppShellMainSlotProps, AppShellOverlaySlot, AppShellOverlaySlotProps, AppShellPanelSlot, AppShellPanelSlotProps, AppShellRailSlot, AppShellRailSlotProps, AppShellRoot, AppShellRootProps, AppShellSidebarSlot, AppShellSidebarSlotProps, AppShellSidebarTrigger, AppShellSidebarTriggerProps } from "./app-shell.mjs";
+export { AppShellMainSlot, type AppShellMainSlotProps, AppShellOverlaySlot, type AppShellOverlaySlotProps, AppShellPanelSlot, type AppShellPanelSlotProps, AppShellRailSlot, type AppShellRailSlotProps, AppShellRoot, type AppShellRootProps, AppShellSidebarSlot, type AppShellSidebarSlotProps, AppShellSidebarTrigger, type AppShellSidebarTriggerProps };

package/dist/components/avatar/avatar.d.mts

@@ -0,0 +1,169 @@
+import { StyledProps } from "../../lib/styled-props.mjs";
+import { DataAttributes } from "../../lib/data-attributes.mjs";
+import { VariantProps } from "../../lib/tv.mjs";
+import { Presence } from "../../lib/presence.mjs";
+import { ComponentPropsWithRef } from "react";
+import { Button } from "@base-ui/react/button";
+import { useRender } from "@base-ui/react/use-render";
+import { Avatar } from "@base-ui/react";
+//#region src/components/avatar/avatar.d.ts
+declare const avatar: import("tailwind-variants/lite").TVReturnType<{
+  type: {
+    agent: {
+      root: string[];
+    };
+    human: {
+      root: string[];
+    };
+    server: {
+      root: string[];
+    };
+  };
+  size: {
+    xl: {
+      root: string[];
+    };
+    lg: {
+      root: string[];
+    };
+    md: {
+      root: string[];
+    };
+    sm: {
+      root: string[];
+    };
+    xs: {
+      root: string[];
+    };
+    "2xs": {
+      root: string[];
+    };
+    "3xs": {
+      root: string;
+    };
+  };
+}, {
+  root: string[];
+  image: string[];
+  fallback: string[];
+  badge: string[];
+  dot: string[];
+  group: string[];
+  groupButton: string[];
+}, undefined, {
+  type: {
+    agent: {
+      root: string[];
+    };
+    human: {
+      root: string[];
+    };
+    server: {
+      root: string[];
+    };
+  };
+  size: {
+    xl: {
+      root: string[];
+    };
+    lg: {
+      root: string[];
+    };
+    md: {
+      root: string[];
+    };
+    sm: {
+      root: string[];
+    };
+    xs: {
+      root: string[];
+    };
+    "2xs": {
+      root: string[];
+    };
+    "3xs": {
+      root: string;
+    };
+  };
+}, {
+  root: string[];
+  image: string[];
+  fallback: string[];
+  badge: string[];
+  dot: string[];
+  group: string[];
+  groupButton: string[];
+}, import("tailwind-variants/lite").TVReturnTypeLike<{
+  type: {
+    agent: {
+      root: string[];
+    };
+    human: {
+      root: string[];
+    };
+    server: {
+      root: string[];
+    };
+  };
+  size: {
+    xl: {
+      root: string[];
+    };
+    lg: {
+      root: string[];
+    };
+    md: {
+      root: string[];
+    };
+    sm: {
+      root: string[];
+    };
+    xs: {
+      root: string[];
+    };
+    "2xs": {
+      root: string[];
+    };
+    "3xs": {
+      root: string;
+    };
+  };
+}, {
+  root: string[];
+  image: string[];
+  fallback: string[];
+  badge: string[];
+  dot: string[];
+  group: string[];
+  groupButton: string[];
+}>>;
+export type AvatarSize = NonNullable<VariantProps<typeof avatar>["size"]>;
+export type AvatarProps = StyledProps<Avatar.Root.Props> & Required<Pick<VariantProps<typeof avatar>, "size" | "type">>;
+declare function Avatar$1({ size, type, className, children, ...props }: AvatarProps): import("react").JSX.Element;
+export type AvatarImageProps = StyledProps<Avatar.Image.Props>;
+export declare function AvatarImage({ className, ...props }: AvatarImageProps): import("react").JSX.Element;
+export type AvatarFallbackProps = StyledProps<Avatar.Fallback.Props>;
+export declare function AvatarFallback({ className, children, ...props }: AvatarFallbackProps): import("react").JSX.Element;
+export type AvatarBadgeOffset = [x: string | number, y: string | number];
+export type AvatarBadgeProps = useRender.ComponentProps<"span"> & {
+  /** The default dot's status light: online (the default), busy, error,
+   *  offline or external. Ignored when `render` draws its own indicator. */
+  presence?: Presence;
+  /** Where the badge's centre sits, measured from the avatar's top-left:
+   *  `[x, y]`. Numbers are px; strings are any CSS length, and percentages
+   *  are of the avatar's size, so `["100%", 0]` is the top-right corner at
+   *  every size. Omit it to keep the default bottom-right spot. */
+  offset?: AvatarBadgeOffset;
+};
+export declare function AvatarBadge({ className, render, offset, presence, ...props }: AvatarBadgeProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+export type AvatarGroupProps = ComponentPropsWithRef<"div">;
+export declare function AvatarGroup({ className, ...props }: AvatarGroupProps): import("react").JSX.Element;
+export type AvatarGroupButtonProps = StyledProps<Button.Props> & DataAttributes;
+export declare function AvatarGroupButton({ className, render, nativeButton, ...props }: AvatarGroupButtonProps): import("react").JSX.Element;
+export type AvatarGroupCountProps = ComponentPropsWithRef<"span"> & {
+  /** Matches the frame scale of the sibling avatars. */
+  size: AvatarSize;
+};
+export declare function AvatarGroupCount({ size, className, ...props }: AvatarGroupCountProps): import("react").JSX.Element;
+//#endregion
+export { Avatar$1 as Avatar };