@forte-ui/react 1.0.0-alpha.1

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

@@ -0,0 +1,117 @@
+import { Accordion as BaseAccordion } from '@base-ui/react/accordion';
+import * as React from "react";
+export type AccordionVariant = "divided" | "contained";
+type BaseRootProps<Value> = BaseAccordion.Root.Props<Value>;
+type BaseItemProps = React.ComponentPropsWithoutRef<typeof BaseAccordion.Item>;
+type BaseHeaderProps = React.ComponentPropsWithoutRef<typeof BaseAccordion.Header>;
+type BaseTriggerProps = React.ComponentPropsWithoutRef<typeof BaseAccordion.Trigger>;
+type BasePanelProps = React.ComponentPropsWithoutRef<typeof BaseAccordion.Panel>;
+export interface AccordionRootProps<Value = any> extends Omit<BaseRootProps<Value>, "className" | "orientation" | "loopFocus"> {
+    /**
+     * How much visual weight the set carries. `"divided"` is a flat list with a
+     * hairline between rows; `"contained"` turns every item into a separated
+     * card. Both are the same parts with different knobs — nothing moves.
+     * @default "divided"
+     */
+    variant?: AccordionVariant;
+    /**
+     * Additional class name(s). Applied after the internal styles so consumer
+     * utilities (e.g. Tailwind) win without needing `!important`.
+     */
+    className?: string;
+}
+/**
+ * Groups the items and owns which of them are open.
+ *
+ * `value` and `defaultValue` are **arrays**, even with `multiple` left off —
+ * a single-open accordion is the array-of-one case, and `[]` is the legal
+ * "everything closed" value. Items with no `value` of their own are given a
+ * generated one, so pass `value` on the items you intend to address.
+ *
+ * Base UI's deprecated `orientation` and `loopFocus` props are not forwarded.
+ * The APG dropped roving focus for accordions, so neither one affects
+ * anything any more, and this component styles the vertical stack only.
+ *
+ * The `Value` generic is what an item's `value` is, defaulting to `any` as it
+ * does in Base UI — items accept anything hashable, and most sets mix nothing.
+ * Name it (`<Accordion.Root<string> …>`) to have `value`, `defaultValue` and
+ * `onValueChange` checked against one type.
+ */
+declare function AccordionRoot<Value = any>({ variant, className, dir, children, ...props }: AccordionRootProps<Value>): React.JSX.Element;
+export interface AccordionItemProps extends Omit<BaseItemProps, "className"> {
+    /**
+     * Additional class name(s). Applied after the internal styles so consumer
+     * utilities (e.g. Tailwind) win without needing `!important`.
+     */
+    className?: string;
+}
+export interface AccordionHeaderProps extends Omit<BaseHeaderProps, "className"> {
+    /**
+     * Additional class name(s). Applied after the internal styles so consumer
+     * utilities (e.g. Tailwind) win without needing `!important`.
+     */
+    className?: string;
+}
+export interface AccordionTriggerProps extends Omit<BaseTriggerProps, "className"> {
+    /**
+     * The affordance at the inline-end of the row. Defaults to a chevron that
+     * rotates when the panel opens. Pass your own node to replace it — it is
+     * wrapped in the same rotating, `aria-hidden` box, so a plus or a caret
+     * needs no extra wiring — or `null` to drop it entirely.
+     * @default a chevron
+     */
+    icon?: React.ReactNode;
+    /**
+     * Additional class name(s) for the label box that wraps `children`.
+     * Applied after the internal styles.
+     */
+    labelClassName?: string;
+    /**
+     * Additional class name(s). Applied after the internal styles so consumer
+     * utilities (e.g. Tailwind) win without needing `!important`.
+     */
+    className?: string;
+}
+export interface AccordionPanelProps extends Omit<BasePanelProps, "className"> {
+    /**
+     * Additional class name(s) for the inner element that holds the padding and
+     * the content. Applied after the internal styles.
+     */
+    contentClassName?: string;
+    /**
+     * Additional class name(s). Applied after the internal styles so consumer
+     * utilities (e.g. Tailwind) win without needing `!important`.
+     */
+    className?: string;
+}
+/**
+ * An accordion built on Base UI's unstyled `Accordion` primitive.
+ *
+ * ```tsx
+ * <Accordion.Root defaultValue={["shipping"]}>
+ *   <Accordion.Item value="shipping">
+ *     <Accordion.Header>
+ *       <Accordion.Trigger>When will it ship?</Accordion.Trigger>
+ *     </Accordion.Header>
+ *     <Accordion.Panel>Within two business days.</Accordion.Panel>
+ *   </Accordion.Item>
+ * </Accordion.Root>
+ * ```
+ *
+ * One panel opens at a time unless `multiple` is set. Every trigger is an
+ * ordinary tab stop — the APG dropped roving focus for accordions, so there
+ * are no arrow-key semantics to learn or to get wrong.
+ *
+ * Styling is driven entirely by `data-*` attributes and `--forte-accordion-*`
+ * custom properties, so it can be re-skinned from plain CSS or targeted with
+ * Tailwind arbitrary variants (`data-[variant=contained]:...`) without
+ * wrapping.
+ */
+export declare const Accordion: {
+    Root: typeof AccordionRoot;
+    Item: React.ForwardRefExoticComponent<AccordionItemProps & React.RefAttributes<HTMLDivElement>>;
+    Header: React.ForwardRefExoticComponent<AccordionHeaderProps & React.RefAttributes<HTMLHeadingElement>>;
+    Trigger: React.ForwardRefExoticComponent<AccordionTriggerProps & React.RefAttributes<HTMLButtonElement>>;
+    Panel: React.ForwardRefExoticComponent<AccordionPanelProps & React.RefAttributes<HTMLDivElement>>;
+};
+export {};

package/dist/components/accordion/Accordion.js

@@ -0,0 +1,3 @@
+"use client";
+import { t as e } from "../../Accordion-9JunkjgY.js";
+export { e as Accordion };

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

@@ -0,0 +1,2 @@
+export { Accordion } from './Accordion';
+export type { AccordionVariant, AccordionRootProps, AccordionItemProps, AccordionHeaderProps, AccordionTriggerProps, AccordionPanelProps, } from './Accordion';

package/dist/components/accordion/index.js

@@ -0,0 +1,2 @@
+import { t as e } from "../../Accordion-9JunkjgY.js";
+export { e as Accordion };

package/dist/components/alert/Alert.d.ts

@@ -0,0 +1,167 @@
+import * as React from "react";
+export type AlertVariant = "soft" | "outline";
+export type AlertTone = "neutral" | "primary" | "secondary" | "success" | "warning" | "danger" | "info";
+export type AlertLive = "off" | "polite" | "assertive";
+export interface AlertRootProps extends Omit<React.ComponentPropsWithoutRef<"div">, "className"> {
+    /**
+     * How loud the card is. `soft` tints the whole surface in the tone and
+     * paints the message in it; `outline` is a neutral panel with a hairline,
+     * where the tone survives only in the glyph.
+     *
+     * Reach for `outline` when several alerts share a screen, or when the alert
+     * sits inside a form beside other bordered controls — a page of tinted
+     * fields has nothing left to emphasise with.
+     * @default "soft"
+     */
+    variant?: AlertVariant;
+    /**
+     * Which semantic colour set the alert draws from, and which glyph
+     * `Alert.Icon` picks when you do not give it one.
+     *
+     * The four status tones are the ones with a glyph — `success`, `warning`,
+     * `danger`, `info`. `neutral`, `primary` and `secondary` are emphasis
+     * rather than status and deliberately have none.
+     * @default "neutral"
+     */
+    tone?: AlertTone;
+    /**
+     * Whether the alert announces itself when it appears, and how urgently.
+     *
+     * `off` is the default because most alerts are in the page from the start,
+     * and a live region only announces a CHANGE — so a server-rendered
+     * `role="alert"` announces nothing while still adding a role to every
+     * screen-reader element list. Set it when the alert is inserted in response
+     * to something the user did.
+     *
+     * `polite` (`role="status"`) waits for a pause and is right for almost
+     * everything — a saved confirmation, a background result. `assertive`
+     * (`role="alert"`) interrupts whatever is being read, so keep it for
+     * failures the user has to act on: a payment that did not go through, work
+     * that is about to be lost.
+     * @default "off"
+     */
+    live?: AlertLive;
+    /**
+     * Whether the alert is in the page. Pass it to take control of dismissal —
+     * `Alert.Close` then reports through `onOpenChange` instead of closing the
+     * card itself.
+     *
+     * Setting it to `false` does not unmount immediately: the card runs its exit
+     * transition first and removes itself when that finishes. Rendering the
+     * alert conditionally — `{open && <Alert.Root>}` — skips the transition
+     * entirely, because React takes the element out of the DOM before any of it
+     * can run. That is the reason this prop exists.
+     */
+    open?: boolean;
+    /**
+     * Whether the alert starts in the page, when it is uncontrolled.
+     * @default true
+     */
+    defaultOpen?: boolean;
+    /**
+     * Called when `Alert.Close` is pressed, with `false`.
+     *
+     * It fires at the START of the exit, not the end — it is a request, and the
+     * card is still on screen when you hear about it. Use `onExitComplete` for
+     * the moment it is actually gone.
+     */
+    onOpenChange?: (open: boolean) => void;
+    /**
+     * Called once the exit transition has finished and the card has removed
+     * itself from the DOM.
+     *
+     * This is where an alert that lives in a list gets spliced out of it.
+     * Removing it in `onOpenChange` instead unmounts the element mid-transition,
+     * which is the bug the two callbacks exist to keep apart.
+     */
+    onExitComplete?: () => void;
+    /**
+     * Additional class name(s). Applied after the internal styles so consumer
+     * utilities (e.g. Tailwind) win without needing `!important`.
+     */
+    className?: string;
+}
+export interface AlertIconProps extends Omit<React.ComponentPropsWithoutRef<"span">, "className"> {
+    /**
+     * The glyph to draw. Defaults to the standard one for the root's `tone`,
+     * and any `svg` passed here is sized to `--forte-alert-icon-size` without
+     * needing a size prop of its own.
+     */
+    children?: React.ReactNode;
+    /**
+     * Additional class name(s). Applied after the internal styles so consumer
+     * utilities (e.g. Tailwind) win without needing `!important`.
+     */
+    className?: string;
+}
+export interface AlertTitleProps extends Omit<React.ComponentPropsWithoutRef<"div">, "className"> {
+    /**
+     * Additional class name(s). Applied after the internal styles so consumer
+     * utilities (e.g. Tailwind) win without needing `!important`.
+     */
+    className?: string;
+}
+export interface AlertDescriptionProps extends Omit<React.ComponentPropsWithoutRef<"div">, "className"> {
+    /**
+     * Additional class name(s). Applied after the internal styles so consumer
+     * utilities (e.g. Tailwind) win without needing `!important`.
+     */
+    className?: string;
+}
+export interface AlertActionProps extends Omit<React.ComponentPropsWithoutRef<"div">, "className"> {
+    /**
+     * Additional class name(s). Applied after the internal styles so consumer
+     * utilities (e.g. Tailwind) win without needing `!important`.
+     */
+    className?: string;
+}
+export interface AlertCloseProps extends Omit<React.ComponentPropsWithoutRef<"button">, "className"> {
+    /**
+     * Additional class name(s). Applied after the internal styles so consumer
+     * utilities (e.g. Tailwind) win without needing `!important`.
+     */
+    className?: string;
+}
+/**
+ * A message about the state of the page, sitting in the page rather than over
+ * it — the persistent counterpart to `Toast`.
+ *
+ * ```tsx
+ * <Alert.Root tone="danger" live="assertive">
+ *   <Alert.Icon />
+ *   <Alert.Title>Payment failed</Alert.Title>
+ *   <Alert.Description>
+ *     Your card was declined. Check the details and try again.
+ *   </Alert.Description>
+ *   <Alert.Action>
+ *     <Button size="sm" variant="outline" tone="danger">Retry</Button>
+ *   </Alert.Action>
+ *   <Alert.Close />
+ * </Alert.Root>
+ * ```
+ *
+ * `Alert.Close` dismisses the card itself, with a transition, needing no state
+ * of yours. Pass `open` and `onOpenChange` to take that over — and note that
+ * a conditional, `{open && <Alert.Root>}`, has no exit at all, because React
+ * removes the element before the transition can start.
+ *
+ * There is no Base UI primitive under it, because there is almost no state to
+ * model — no focus to manage, nothing to position. What it does have is a
+ * layout that has to survive any subset of its five parts, a pair of colour
+ * axes, a live-region decision that is easy to get wrong, and exactly one bit
+ * of state: whether it is still in the page. That last one is owned here only
+ * because React unmounts an element the frame it stops being rendered, so an
+ * alert dismissed by a plain conditional can never animate out.
+ *
+ * Styling is driven by `data-*` attributes and `--forte-alert-*` custom
+ * properties, so it can be re-skinned from plain CSS or targeted with Tailwind
+ * arbitrary variants (`data-[tone=danger]:...`) without wrapping.
+ */
+export declare const Alert: {
+    Root: React.ForwardRefExoticComponent<AlertRootProps & React.RefAttributes<HTMLDivElement>>;
+    Icon: React.ForwardRefExoticComponent<AlertIconProps & React.RefAttributes<HTMLSpanElement>>;
+    Title: React.ForwardRefExoticComponent<AlertTitleProps & React.RefAttributes<HTMLDivElement>>;
+    Description: React.ForwardRefExoticComponent<AlertDescriptionProps & React.RefAttributes<HTMLDivElement>>;
+    Action: React.ForwardRefExoticComponent<AlertActionProps & React.RefAttributes<HTMLDivElement>>;
+    Close: React.ForwardRefExoticComponent<AlertCloseProps & React.RefAttributes<HTMLButtonElement>>;
+};

package/dist/components/alert/Alert.js

@@ -0,0 +1,3 @@
+"use client";
+import { t as e } from "../../Alert-Cn_WUF3L.js";
+export { e as Alert };

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

@@ -0,0 +1,2 @@
+export { Alert } from './Alert';
+export type { AlertVariant, AlertTone, AlertLive, AlertRootProps, AlertIconProps, AlertTitleProps, AlertDescriptionProps, AlertActionProps, AlertCloseProps, } from './Alert';

package/dist/components/alert/index.js

@@ -0,0 +1,2 @@
+import { t as e } from "../../Alert-Cn_WUF3L.js";
+export { e as Alert };

package/dist/components/aspect-ratio/AspectRatio.d.ts

@@ -0,0 +1,128 @@
+import { useRender } from '@base-ui/react/use-render';
+import * as React from "react";
+export type AspectRatioPreset = "square" | "video" | "wide" | "photo" | "portrait" | "story" | "golden";
+export type AspectRatioFit = "cover" | "contain" | "fill" | "scale-down" | "none";
+/**
+ * Everything `ratio` accepts.
+ *
+ * The `(string & {})` arm is what keeps the seven names as autocomplete
+ * suggestions while still allowing any CSS ratio: a bare `string` in the union
+ * would absorb the literals and the editor would offer nothing.
+ */
+export type AspectRatioValue = number | AspectRatioPreset | (string & {});
+export type AspectRatioVariant = "plain" | "outlined" | "filled";
+export type AspectRatioBasis = "inline" | "block";
+export interface AspectRatioProps extends Omit<React.ComponentPropsWithoutRef<"div">, "className"> {
+    /**
+     * The shape to hold. Takes a number (`16 / 9`), a CSS ratio string
+     * (`"16 / 9"`), the spoken form (`"16:9"`), or one of seven names:
+     * `square`, `video` (16:9), `wide` (21:9), `photo` (4:3), `portrait` (3:4),
+     * `story` (9:16), `golden` (1.618:1).
+     *
+     * Prefer the name where one fits — it says what the box is for, where
+     * `0.5625` says only what it measures.
+     * @default 1
+     */
+    ratio?: AspectRatioValue;
+    /**
+     * How direct media children — `img`, `video`, `canvas`, `iframe`, `embed`,
+     * `object`, and the `img` inside a `picture` — fill the box. It is an
+     * `object-fit` value, applied for you: media is stretched to the frame on
+     * both axes first, so without it an image is either letterboxed or
+     * overflowing, and every caller ends up writing the same three declarations
+     * on the child by hand.
+     *
+     * `cover` crops to fill and is what a media slot almost always wants;
+     * `contain` fits the whole image inside and leaves bars, which is right when
+     * the subject must not be cut — a logo, a diagram, a product shot on white.
+     *
+     * To keep an image from being cropped in the wrong place, set
+     * `--forte-aspect-position`.
+     * @default "cover"
+     */
+    fit?: AspectRatioFit;
+    /**
+     * How much chrome the box carries. `plain` is a pure layout box: no
+     * background, no border, no radius. `outlined` adds a hairline frame and a
+     * surface radius, which gives light-on-light media an edge. `filled` adds a
+     * recessed panel instead — and because that panel is visible while the box
+     * is still empty, it doubles as the loading placeholder for the image that
+     * is about to arrive.
+     * @default "plain"
+     */
+    variant?: AspectRatioVariant;
+    /**
+     * Which axis the box measures itself on. `inline` takes the container's
+     * width and derives the height — the usual case, and the only one the
+     * padding-bottom technique can express. `block` does the reverse: it takes a
+     * definite height and derives the width, which is what a media tile in a
+     * fixed-height row or a full-bleed hero needs.
+     *
+     * `block` requires the parent to actually supply a height — a grid row, a
+     * stretched flex cross size, an explicit `height`. Given an indefinite one,
+     * `100%` has nothing to resolve against and the box falls back to sizing
+     * from its content.
+     * @default "inline"
+     */
+    basis?: AspectRatioBasis;
+    /**
+     * Clips content to the box, and to its corner radius.
+     *
+     * On by default, because media that overflows its own frame is a bug rather
+     * than a feature. Turn it off for the overlay that is *meant* to break out —
+     * a badge hanging off a corner, a focus ring on a child, a tooltip anchored
+     * inside.
+     * @default true
+     */
+    clip?: boolean;
+    /**
+     * Replaces the rendered `<div>` with another element or component. This is
+     * how the box becomes a `<figure>` around a caption, or the `<a>` that wraps
+     * a whole thumbnail.
+     */
+    render?: useRender.RenderProp;
+    /**
+     * Additional class name(s). Applied after the internal styles so consumer
+     * utilities (e.g. Tailwind) win without needing `!important`.
+     */
+    className?: string;
+}
+/**
+ * A box that holds its shape, whatever goes in it.
+ *
+ * ```tsx
+ * <AspectRatio ratio="video">
+ *   <img src="/cover.jpg" alt="" />
+ * </AspectRatio>
+ * ```
+ *
+ * The reason to reach for it is layout shift: the box occupies its final size
+ * from the first paint, so an image that arrives half a second later drops
+ * into space that was already reserved instead of shoving the page down.
+ *
+ * Base UI has no aspect-ratio primitive — there is no interaction to model —
+ * so this is built on the CSS property directly rather than on the
+ * `padding-bottom: 56.25%` trick the property replaced. Two things follow from
+ * that, and both are the point:
+ *
+ * - **Children stack.** The box is a one-cell grid and every direct child is
+ *   placed in that cell, in source order, without leaving flow. A caption over
+ *   a photo is two elements and no `position: absolute`:
+ *
+ *   ```tsx
+ *   <AspectRatio ratio="photo" variant="filled">
+ *     <img src="/cover.jpg" alt="" />
+ *     <figcaption style={{ placeSelf: "end start" }}>Lisbon, 2019</figcaption>
+ *   </AspectRatio>
+ *   ```
+ *
+ * - **Either axis can be the measured one.** `basis="block"` takes a definite
+ *   height and derives the width, which a percentage padding cannot do at all.
+ *
+ * Media children are sized and `object-fit` for you — see `fit`. Everything
+ * visual is a `--forte-aspect-*` custom property, and the state is on
+ * `data-variant`, `data-fit` and `data-basis`, so a box can be re-skinned from
+ * plain CSS or targeted with Tailwind arbitrary variants
+ * (`data-[variant=filled]:...`) without wrapping it.
+ */
+export declare const AspectRatio: React.ForwardRefExoticComponent<AspectRatioProps & React.RefAttributes<HTMLDivElement>>;

package/dist/components/aspect-ratio/AspectRatio.js

@@ -0,0 +1,3 @@
+"use client";
+import { t as e } from "../../AspectRatio-gSjpTVk-.js";
+export { e as AspectRatio };

package/dist/components/aspect-ratio/index.d.ts

@@ -0,0 +1,2 @@
+export { AspectRatio } from './AspectRatio';
+export type { AspectRatioProps, AspectRatioPreset, AspectRatioValue, AspectRatioFit, AspectRatioVariant, AspectRatioBasis, } from './AspectRatio';

package/dist/components/aspect-ratio/index.js

@@ -0,0 +1,2 @@
+import { t as e } from "../../AspectRatio-gSjpTVk-.js";
+export { e as AspectRatio };

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

@@ -0,0 +1,176 @@
+import { Avatar as BaseAvatar } from '@base-ui/react/avatar';
+import * as React from "react";
+export type AvatarSize = "xs" | "sm" | "md" | "lg" | "xl";
+export type AvatarShape = "circle" | "rounded" | "square";
+export type AvatarVariant = "soft" | "solid" | "outline";
+export type AvatarTone = "neutral" | "primary" | "secondary" | "danger";
+export type AvatarBadgeTone = AvatarTone | "success" | "warning";
+export type AvatarBadgePlacement = "bottom-end" | "bottom-start" | "top-end" | "top-start";
+type BaseRootProps = React.ComponentPropsWithoutRef<typeof BaseAvatar.Root>;
+type BaseImageProps = React.ComponentPropsWithoutRef<typeof BaseAvatar.Image>;
+type BaseFallbackProps = React.ComponentPropsWithoutRef<typeof BaseAvatar.Fallback>;
+export interface AvatarRootProps extends Omit<BaseRootProps, "className"> {
+    /**
+     * Diameter of the avatar — `1.5rem` through `4rem`. Everything inside is a
+     * fraction of it, so the initials, the icon and the corner radius all follow
+     * without a second prop.
+     * @default "md"
+     */
+    size?: AvatarSize;
+    /**
+     * The silhouette. `circle` is the convention for people; `rounded` and
+     * `square` read as an object — a workspace, a repository, a bot.
+     *
+     * `circle` stays a circle under `data-forte-radius="none"`, because you asked
+     * for one. Only `rounded` follows the radius preset.
+     * @default "circle"
+     */
+    shape?: AvatarShape;
+    /**
+     * How loud the fallback is. `soft` is a tinted disc with tone-coloured
+     * initials, `solid` fills with the tone itself, `outline` is a ring around
+     * nothing.
+     *
+     * This only decides what shows while there is no image — a loaded image
+     * covers the fill entirely. `outline` is the exception: its border sits
+     * outside the picture and stays visible either way.
+     * @default "soft"
+     */
+    variant?: AvatarVariant;
+    /**
+     * Which semantic colour set the fallback draws from. Rotating the tone
+     * across a list is the cheapest way to make initials tell people apart —
+     * but colour is never the only cue, since the initials themselves differ.
+     * @default "neutral"
+     */
+    tone?: AvatarTone;
+    /**
+     * Additional class name(s). Applied after the internal styles so consumer
+     * utilities (e.g. Tailwind) win without needing `!important`.
+     */
+    className?: string;
+}
+export interface AvatarImageProps extends Omit<BaseImageProps, "className"> {
+    /**
+     * What the picture shows. Required, because there is no sensible guess: the
+     * fallback's initials are gone the moment the image loads, so an avatar with
+     * no alt text and no adjacent name leaves the person unidentifiable.
+     *
+     * Pass the person's name when the avatar is the only thing naming them, and
+     * `""` when their name is already written beside it — a photo repeated as
+     * "Jane Doe Jane Doe" is worse than no alt at all.
+     */
+    alt: string;
+    /**
+     * Additional class name(s). Applied after the internal styles so consumer
+     * utilities (e.g. Tailwind) win without needing `!important`.
+     */
+    className?: string;
+}
+export interface AvatarFallbackProps extends Omit<BaseFallbackProps, "className"> {
+    /**
+     * How long to wait before showing the fallback, in milliseconds.
+     *
+     * Left at Base UI's `0`, which is right whenever the fallback IS the avatar:
+     * a non-zero delay withholds it during server rendering too, so an
+     * initials-only avatar would ship as an empty disc and pop in a tenth of a
+     * second later.
+     *
+     * Set it to ~100–150ms when there is an `Avatar.Image` beside it. A cached
+     * image is not decoded until after hydration, so at `0` the initials paint
+     * and are replaced on every load; a short wait swallows that flash, at the
+     * cost of an empty disc for the same span on a slow connection.
+     * @default 0
+     */
+    delay?: number;
+    /**
+     * The person or thing this avatar stands for, for assistive technology only.
+     *
+     * Initials are a visual shorthand and read as noise — "J D" — so passing a
+     * label hides the children from the accessibility tree and announces this
+     * instead. Leave it unset when the name is already written next to the
+     * avatar, or when the fallback is a decorative icon.
+     */
+    label?: string;
+    /**
+     * Additional class name(s). Applied after the internal styles so consumer
+     * utilities (e.g. Tailwind) win without needing `!important`.
+     */
+    className?: string;
+}
+export interface AvatarBadgeProps extends Omit<React.ComponentPropsWithoutRef<"span">, "className"> {
+    /**
+     * Which semantic colour set the badge draws from. `success`, `warning` and
+     * `danger` are the presence set — online, away, do-not-disturb — and the
+     * brand tones suit a count or a verification tick.
+     *
+     * Colour is never the only cue: pass `label`, or write the status out beside
+     * the avatar, so the badge is repeating something rather than saying it.
+     * @default "neutral"
+     */
+    tone?: AvatarBadgeTone;
+    /**
+     * Which corner it sits on.
+     *
+     * `bottom-end` is the convention, and it is also the corner a group covers:
+     * avatars in an `Avatar.Group` overlap toward the inline-start, so every
+     * avatar but the last has its inline-end corner painted over by the next
+     * one. Use `bottom-start` there, or badge only the last avatar.
+     * @default "bottom-end"
+     */
+    placement?: AvatarBadgePlacement;
+    /**
+     * What the badge means, for assistive technology.
+     *
+     * A bare dot is decoration and is hidden from the accessibility tree unless
+     * you pass this. A badge with visible content stays in the tree either way —
+     * `label` then replaces what is announced, the way it does on
+     * `Avatar.Fallback`, so `4` can read as "4 unread messages".
+     *
+     * Leave it unset when the status is already written next to the avatar.
+     */
+    label?: string;
+    /**
+     * Additional class name(s). Applied after the internal styles so consumer
+     * utilities (e.g. Tailwind) win without needing `!important`.
+     */
+    className?: string;
+}
+export interface AvatarGroupProps extends Omit<React.ComponentPropsWithoutRef<"span">, "className"> {
+    /**
+     * Additional class name(s). Applied after the internal styles so consumer
+     * utilities (e.g. Tailwind) win without needing `!important`.
+     */
+    className?: string;
+}
+/**
+ * An avatar built on Base UI's unstyled `Avatar` primitive: a picture of a
+ * person or a thing, with something sensible to show when the picture is
+ * missing, slow or broken.
+ *
+ * ```tsx
+ * <Avatar.Root size="lg">
+ *   <Avatar.Image src={user.photo} alt={user.name} />
+ *   <Avatar.Fallback label={user.name}>{initials}</Avatar.Fallback>
+ *   <Avatar.Badge tone="success" label="Online" />
+ * </Avatar.Root>
+ *
+ * <Avatar.Group>
+ *   <Avatar.Root>…</Avatar.Root>
+ *   <Avatar.Root>…</Avatar.Root>
+ *   <Avatar.Root tone="primary"><Avatar.Fallback label="3 more">+3</Avatar.Fallback></Avatar.Root>
+ * </Avatar.Group>
+ * ```
+ *
+ * Styling is driven by `data-*` attributes and `--forte-avatar-*` custom
+ * properties, so it can be re-skinned from plain CSS or targeted with Tailwind
+ * arbitrary variants (`data-[shape=square]:...`) without wrapping.
+ */
+export declare const Avatar: {
+    Root: React.ForwardRefExoticComponent<AvatarRootProps & React.RefAttributes<HTMLSpanElement>>;
+    Image: React.ForwardRefExoticComponent<AvatarImageProps & React.RefAttributes<HTMLImageElement>>;
+    Fallback: React.ForwardRefExoticComponent<AvatarFallbackProps & React.RefAttributes<HTMLSpanElement>>;
+    Badge: React.ForwardRefExoticComponent<AvatarBadgeProps & React.RefAttributes<HTMLSpanElement>>;
+    Group: React.ForwardRefExoticComponent<AvatarGroupProps & React.RefAttributes<HTMLSpanElement>>;
+};
+export {};

package/dist/components/avatar/Avatar.js

@@ -0,0 +1,3 @@
+"use client";
+import { t as e } from "../../Avatar-BuitDluH.js";
+export { e as Avatar };

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

@@ -0,0 +1,2 @@
+export { Avatar } from './Avatar';
+export type { AvatarSize, AvatarShape, AvatarVariant, AvatarTone, AvatarBadgeTone, AvatarBadgePlacement, AvatarRootProps, AvatarImageProps, AvatarFallbackProps, AvatarBadgeProps, AvatarGroupProps, } from './Avatar';

package/dist/components/avatar/index.js

@@ -0,0 +1,2 @@
+import { t as e } from "../../Avatar-BuitDluH.js";
+export { e as Avatar };