@fairgarden/design 0.1.0-alpha.0

package/components/Autocomplete/Autocomplete.js

@@ -0,0 +1,116 @@
+'use client';
+import * as React from 'react';
+import { Autocomplete as BaseAutocomplete } from '@base-ui/react/autocomplete';
+import { cva } from 'class-variance-authority';
+import { dangerScale, useFieldInvalid } from '../Field';
+import { Ground } from '../Ground';
+import { Icon, iconHost } from '../Icon';
+import { highlightMatch } from '../../utils/highlightMatch';
+import { StatusGlyph } from '../../utils/StatusGlyph';
+import { OverlayScope, overlayAttributes, overlayScaleClassName } from '../../utils/overlay';
+import { primaryScaleVariants, secondaryScaleVariants } from '../../utils/scales';
+import { useScopeAttributes } from '../../utils/scope';
+import styles from './autocomplete.module.css';
+/*
+ * Autocomplete (§10.6): free text with suggestions (addresses); any value
+ * is valid. Site and collection search compose it in Search (§9.10).
+ *
+ * Implementation (CSS Modules + CVA)
+ * - Module: autocomplete.module.css; CVA function `autocomplete`.
+ * - Axes: `plate` → plate; `primary`, `secondary` → scales module classes.
+ * - Compound variants: none. Defaults: plate false; color axes none.
+ * - Color fallback: the box inherits the scope; while the Field is invalid,
+ *   its danger scale (§10.2) [D129]. Popup: the `white` preset's defaults.
+ * - States: box `:hover` (not disabled) → edge per [D140]; `data-focused` →
+ *   the ring on any focus [D90]; `data-invalid` → error edge;
+ *   `data-disabled` → dotted edge, --role-muted, clear hidden;
+ *   `data-popup-open` → edge --primary12, chevron rotated. Item
+ *   `data-highlighted` → --primary4 plus the start bar [D145];
+ *   `data-disabled` → --role-muted. No ✓: nothing stays selected. Popup
+ *   `data-starting-style` / `data-ending-style` → the clip reveal [D91].
+ * - Parts: base (the box), input, icon, clear, trigger, popup, list, item,
+ *   group, groupLabel, empty, status; plus match.
+ * - Scope: `popup` renders in its Base UI Portal and declares a nested
+ *   `white` page scope, writes no `data-theme`, and takes the [D92] frame
+ *   [D139, D156]. `plate` → the box is a nested `white` Ground.
+ * - Container: none; inherits its context.
+ */
+export const autocomplete = cva(styles.base, {
+    variants: {
+        plate: {
+            true: styles.plate,
+        },
+        // Color axes: never defaulted [D133].
+        primary: primaryScaleVariants,
+        secondary: secondaryScaleVariants,
+    },
+    defaultVariants: {
+        plate: false,
+    },
+});
+function isGroups(items) {
+    return items.length > 0 && 'items' in items[0];
+}
+/**
+ * A Base UI Autocomplete inside a `Field`. The input keeps any text: a
+ * suggestion only fills it, and Enter submits the typed text. No row is
+ * highlighted until the arrow keys move.
+ */
+export function Autocomplete(props) {
+    const { items, value, defaultValue, onValueChange, placeholder, icon, showTrigger = false, emptyText = (query) => `No matches for '${query}'`, loading = false, loadingText = 'Searching…', error, clearLabel = 'Clear', triggerLabel = 'Show suggestions', 'aria-label': ariaLabel, className, plate, primary, secondary, ...rootProps } = props;
+    const scope = useScopeAttributes();
+    const invalid = useFieldInvalid();
+    const resolvedSecondary = invalid ? dangerScale : secondary;
+    // The typed text, for match marking.
+    const [innerQuery, setInnerQuery] = React.useState(String(defaultValue ?? ''));
+    const query = value !== undefined ? String(value) : innerQuery;
+    const handleValueChange = (next, details) => {
+        setInnerQuery(next);
+        onValueChange?.(next, details);
+    };
+    const boxClassName = autocomplete({
+        plate,
+        primary: plate ? undefined : primary,
+        secondary: plate ? undefined : resolvedSecondary,
+        className,
+    });
+    const boxChildren = (React.createElement(React.Fragment, null,
+        React.createElement("svg", { className: styles.edge, "aria-hidden": "true", focusable: "false" },
+            React.createElement("rect", { className: styles.edgeLine, width: "100%", height: "100%" })),
+        icon ? React.createElement(Icon, { name: icon, className: styles.icon }) : null,
+        React.createElement(BaseAutocomplete.Input, { className: styles.input, placeholder: placeholder, "aria-label": ariaLabel }),
+        React.createElement(BaseAutocomplete.Clear, { className: `${styles.clear} ${iconHost}`, "aria-label": clearLabel },
+            React.createElement(Icon, { name: "close", weight: "interactive" })),
+        showTrigger ? (React.createElement(BaseAutocomplete.Trigger, { className: `${styles.trigger} ${iconHost}`, "aria-label": triggerLabel },
+            React.createElement(Icon, { name: "expand_more", weight: "interactive", className: styles.chevron }))) : null));
+    const renderOption = (option) => (React.createElement(BaseAutocomplete.Item, { key: option.value, value: option, disabled: option.disabled, className: styles.item },
+        React.createElement("span", { className: styles.itemText }, highlightMatch(option.label ?? option.value, query, styles.match))));
+    return (React.createElement(BaseAutocomplete.Root, { ...rootProps, 
+        // Groups are accepted at runtime; the flat overload types the value.
+        items: items, value: value, defaultValue: defaultValue, onValueChange: handleValueChange, itemToStringValue: (option) => option.value },
+        plate ? (React.createElement(BaseAutocomplete.InputGroup, { className: boxClassName, render: React.createElement(Ground, { preset: "white", kind: "face", primary: primary ?? undefined, secondary: resolvedSecondary ?? undefined, render: React.createElement("div", null) }) }, boxChildren)) : (React.createElement(BaseAutocomplete.InputGroup, { ...scope, className: boxClassName }, boxChildren)),
+        React.createElement(BaseAutocomplete.Portal, null,
+            React.createElement(BaseAutocomplete.Positioner, { className: styles.positioner, sideOffset: 8, align: "start", collisionPadding: 16 },
+                React.createElement(BaseAutocomplete.Popup, { ...overlayAttributes, className: [styles.popup, overlayScaleClassName].join(' ') },
+                    React.createElement(OverlayScope, null,
+                        React.createElement(AutocompleteStatusRow, { loading: loading, loadingText: loadingText, error: error }),
+                        React.createElement(BaseAutocomplete.Empty, { className: styles.empty }, loading || error ? null : emptyText(query)),
+                        React.createElement(BaseAutocomplete.List, { className: styles.list }, items && isGroups(items)
+                            ? items.map((group, index) => (React.createElement(React.Fragment, { key: group.label },
+                                index > 0 ? (React.createElement(BaseAutocomplete.Separator, { className: styles.separator })) : null,
+                                React.createElement(BaseAutocomplete.Group, { items: group.items, className: styles.group },
+                                    React.createElement(BaseAutocomplete.GroupLabel, { className: styles.groupLabel }, group.label),
+                                    React.createElement(BaseAutocomplete.Collection, null, (option) => renderOption(option))))))
+                            : (option) => renderOption(option))))))));
+}
+/**
+ * The loading row ("Searching…", busy wording [D84]) and the fetch-failure
+ * row, in a polite live region that stays mounted.
+ */
+function AutocompleteStatusRow({ loading, loadingText, error, }) {
+    const scope = useScopeAttributes();
+    return (React.createElement(BaseAutocomplete.Status, { className: styles.status }, loading ? (loadingText) : error ? (React.createElement("span", { ...scope, className: [styles.statusError, secondaryScaleVariants[dangerScale]].join(' ') },
+        React.createElement(StatusGlyph, { status: "danger", className: styles.statusGlyph }),
+        React.createElement("span", null, error))) : null));
+}
+//# sourceMappingURL=Autocomplete.js.map

package/components/Autocomplete/Autocomplete.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Autocomplete.js","sourceRoot":"","sources":["../../src/components/Autocomplete/Autocomplete.tsx"],"names":[],"mappings":"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"}

package/components/Autocomplete/autocomplete.module.css

@@ -0,0 +1,428 @@
+/*
+ * Autocomplete (§10.6). CVA function `autocomplete`, with the Combobox's
+ * axes and parts less the chips and the ✓. Parts: `base` (the field box,
+ * Base UI's InputGroup), `input`, `icon`, `clear`, `trigger` (with
+ * `chevron`), `popup`, `list`, `item`, `itemText`, `match`, `group`,
+ * `groupLabel`, `separator`, `empty`, `status` (the loading and failure
+ * row, with `statusGlyph`); `positioner` places the popup on --layer-3, and
+ * `edge` / `edgeLine` draw the disabled `line-dotted-fine` edge as true dots
+ * [D36, D68]. Colors are role variables only; local custom properties carry
+ * dimensions only. The popup is a portaled `white` page scope framed by
+ * --border-size-2 --primary12 [D92, D139, D156].
+ */
+
+/* Composition sits in top-level rules, outside the layers: Lightning CSS
+ * (Next.js with Turbopack) rejects `composes` inside @layer or any nesting.
+ * The composed classes keep their own layers. */
+.input {
+  composes: typeBodyUi from '../../utils/type.module.css';
+}
+
+.item {
+  composes: typeBodyUi from '../../utils/type.module.css';
+}
+
+.groupLabel {
+  composes: typeLabel from '../../utils/type.module.css';
+}
+
+.empty,
+.status {
+  composes: typeBodyUi typeMuted from '../../utils/type.module.css';
+}
+
+.edgeLine {
+  composes: lineDottedFine from '../../utils/line.module.css';
+}
+
+@layer base {
+  /* The field box (§10.1): --size-px-8, --radius-1, --border-size-1 --role-rule, open. */
+  .base {
+    /* Local dimensions. */
+    --autocomplete-edge: var(--border-size-1);
+    --autocomplete-radius: var(--radius-1);
+
+    position: relative;
+    display: flex;
+    align-items: center;
+    gap: var(--size-px-2);
+    box-sizing: border-box;
+    inline-size: 100%;
+    min-inline-size: 0;
+    block-size: var(--size-px-8);
+    margin: 0;
+    padding-block: 0;
+    padding-inline: calc(var(--ds-space-12) + var(--border-size-1) - var(--autocomplete-edge)) 0;
+    border: var(--autocomplete-edge) solid var(--role-rule);
+    border-radius: var(--autocomplete-radius);
+    background: none;
+    color: var(--primary12);
+    cursor: text;
+  }
+
+  .input {
+    flex: 1 1 auto;
+    align-self: stretch;
+    min-inline-size: 0;
+    margin: 0;
+    padding: 0;
+    border: 0;
+    border-radius: 0;
+    background: none;
+    color: inherit;
+    text-overflow: ellipsis;
+    appearance: none;
+  }
+
+  /* When the box ends with the input, the value keeps the box's --ds-space-12 end padding. */
+  .input:last-child {
+    margin-inline-end: var(--ds-space-12);
+  }
+
+  /* The placeholder: --role-muted, one weight lighter in dark scopes [D170]. */
+  .input::placeholder {
+    color: var(--role-muted);
+    font-weight: max(
+      var(--type-weight-floor, 400),
+      calc(var(--type-weight, 400) - var(--ds-muted-weight-step))
+    );
+  }
+
+  /* Leading icon (search) and the chevron: --primary12, inline tier [D166]. */
+  .icon {
+    flex: none;
+    color: inherit;
+  }
+
+  /* Clear × and the chevron trigger: glyph cells with a --ds-size-hit target. */
+  .clear,
+  .trigger {
+    position: relative;
+    flex: none;
+    display: grid;
+    place-items: center;
+    align-self: stretch;
+    inline-size: var(--ds-size-hit);
+    margin: 0;
+    padding: 0;
+    border: 0;
+    border-radius: var(--autocomplete-radius);
+    background: none;
+    color: inherit;
+    cursor: pointer;
+    appearance: none;
+  }
+
+  .chevron {
+    display: block;
+  }
+
+  .edge {
+    display: none;
+    position: absolute;
+    inset-block-start: calc(var(--ds-dot-fine) / 2);
+    inset-inline-start: calc(var(--ds-dot-fine) / 2);
+    inline-size: calc(100% - var(--ds-dot-fine));
+    block-size: calc(100% - var(--ds-dot-fine));
+    overflow: visible;
+    pointer-events: none;
+  }
+
+  .edgeLine {
+    fill: none;
+    stroke: var(--role-disabled-edge);
+    rx: calc(var(--autocomplete-radius) - var(--ds-dot-fine) / 2);
+  }
+
+  .positioner {
+    z-index: var(--layer-3);
+    outline: 0;
+  }
+
+  /* The overlay face: the white scope's --primary1, the --border-size-2 --primary12 frame, --ds-radius-8. */
+  .popup {
+    /* The clip reveal starts from the trigger side. */
+    --autocomplete-reveal-from: inset(0 0 100% 0);
+
+    box-sizing: border-box;
+    inline-size: var(--anchor-width);
+    max-inline-size: calc(100vw - 2 * var(--ds-space-margin));
+    border: var(--border-size-2) solid var(--primary12);
+    border-radius: var(--ds-radius-8);
+    background-color: var(--primary1);
+    color: var(--primary12);
+    clip-path: inset(0);
+    outline: 0;
+  }
+
+  /* At most 8 rows, then it scrolls; the height stays above the on-screen keyboard. */
+  .list {
+    box-sizing: border-box;
+    max-block-size: min(
+      var(--available-height, 100vh),
+      calc(8 * var(--ds-size-hit) + 2 * var(--size-px-1))
+    );
+    padding: var(--size-px-1);
+    overflow-y: auto;
+    overscroll-behavior: contain;
+    scroll-padding-block: var(--size-px-1);
+    outline: 0;
+  }
+
+  .list:empty {
+    padding: 0;
+  }
+
+  /* Suggestions as Select's items (§10.5), without the ✓: --ds-size-hit rows. */
+  .item {
+    position: relative;
+    display: flex;
+    align-items: center;
+    min-block-size: var(--ds-size-hit);
+    padding-inline: var(--size-px-3);
+    border-radius: calc(var(--ds-radius-8) - var(--size-px-1));
+    color: var(--primary12);
+    cursor: default;
+    outline: 0;
+    user-select: none;
+  }
+
+  .item::before {
+    content: '';
+    display: none;
+    position: absolute;
+    inset-block: 0;
+    inset-inline-start: 0;
+    border-inline-start: var(--ds-stroke-3) solid var(--primary12);
+  }
+
+  .itemText {
+    min-inline-size: 0;
+  }
+
+  /* The matched substring: --primary12 at --font-weight-7; never color or fill (P2). */
+  .match {
+    background: none;
+    color: var(--primary12);
+    font-weight: var(--font-weight-7);
+  }
+
+  .group {
+    display: block;
+  }
+
+  .groupLabel {
+    padding-block: var(--size-px-2) var(--size-px-1);
+    padding-inline: var(--size-px-3);
+    color: var(--role-muted);
+  }
+
+  .separator {
+    margin-block: var(--size-px-1);
+    margin-inline: calc(-1 * var(--size-px-1));
+    border-block-start: var(--border-size-1) solid var(--role-rule);
+  }
+
+  /* The empty and loading rows: type-body-ui italic in --role-muted, live regions that stay mounted. */
+  .empty,
+  .status {
+    font-style: italic;
+  }
+
+  .empty:not(:empty),
+  .status:not(:empty) {
+    display: flex;
+    align-items: flex-start;
+    gap: var(--size-px-2);
+    padding: var(--size-px-3);
+  }
+
+  /* A fetch failure: the danger glyph in --role-status and a --primary12 message. */
+  .statusError {
+    display: contents;
+    color: var(--primary12);
+    font-style: normal;
+  }
+
+  .statusGlyph {
+    flex: none;
+    inline-size: var(--size-px-3);
+    block-size: 1lh;
+    overflow: visible;
+    color: var(--role-status);
+    fill: var(--role-status-fill);
+    stroke: var(--role-status-fill);
+    stroke-width: var(--ds-stroke-1-5);
+    stroke-linecap: round;
+    stroke-linejoin: round;
+  }
+
+  @media (forced-colors: active) {
+    .edgeLine {
+      stroke: currentColor;
+    }
+
+    .statusGlyph {
+      forced-color-adjust: none;
+      color: CanvasText;
+      fill: Canvas;
+      stroke: Canvas;
+    }
+  }
+
+  @media (prefers-reduced-motion: no-preference) {
+    .base {
+      transition-property: border-color, outline-color;
+      transition-duration: var(--ds-duration-quick);
+      transition-timing-function: var(--ease-out-3);
+    }
+
+    .chevron {
+      transition: rotate var(--ds-duration-quick) var(--ease-out-3);
+    }
+
+    /* The clip reveal (the edge wipes open), never a fade [D91]. */
+    .popup {
+      transition: clip-path var(--ds-duration-disclosure) var(--ease-out-3);
+    }
+  }
+
+  /* From --lg-n-above the popup may grow past the field, up to --size-sm. */
+  @media (min-width: 1024px) {
+    .popup {
+      min-inline-size: var(--anchor-width);
+      inline-size: auto;
+      max-inline-size: max(var(--anchor-width), var(--size-sm));
+    }
+  }
+}
+
+@layer variants {
+  /*
+   * Plate: the box face is the nested white scope's --primary1 (§10.1). The
+   * box is also a Ground face, whose own classes share the base layer, so
+   * its display and edge are restated here.
+   */
+  .plate {
+    display: flex;
+    border: var(--autocomplete-edge) solid var(--role-rule);
+    background-color: var(--primary1);
+    color: var(--primary12);
+  }
+}
+
+@layer states {
+  /* Hover (not disabled): the 1 px edge steps to --primary12 at the same weight [D140]. */
+  .base:hover:not([data-disabled], [data-invalid], [data-readonly]) {
+    border-color: var(--primary12);
+  }
+
+  /* Focus: the ring on any focus of the input, outside the box [D90]. */
+  .base[data-focused] {
+    outline: var(--border-size-2) solid var(--primary12);
+    outline-offset: var(--border-size-2);
+  }
+
+  .input:focus-visible {
+    outline: none;
+  }
+
+  /* Open: the box edge goes to --primary12 and the chevron turns. */
+  .base[data-popup-open] {
+    border-color: var(--primary12);
+  }
+
+  .trigger[data-popup-open] .chevron {
+    rotate: 180deg;
+  }
+
+  /* The clear × and the trigger take their own ring. */
+  .clear:focus-visible,
+  .trigger:focus-visible {
+    outline: var(--border-size-2) solid var(--primary12);
+    outline-offset: calc(-1 * var(--border-size-2));
+  }
+
+  /* Pressed: the glyph's cell takes the inverse pair (§10.1 icon states). */
+  .clear:active {
+    background-color: var(--primary12);
+    color: var(--role-inverse);
+  }
+
+  /* Error: the --border-size-2 edge in --role-status (the danger scale) [D141, D155]. */
+  .base[data-invalid] {
+    --autocomplete-edge: var(--border-size-2);
+
+    border-color: var(--role-status);
+  }
+
+  /* Disabled: dotted edge, --role-muted inks, no face, clear hidden; never dimmed [D16]. */
+  .base[data-disabled] {
+    --autocomplete-edge: 0px;
+
+    border-style: none;
+    background: none;
+    color: var(--role-muted);
+    cursor: default;
+  }
+
+  .base[data-disabled] .edge {
+    display: block;
+  }
+
+  .base[data-disabled] .clear {
+    display: none;
+  }
+
+  /* Read-only: the box is removed; a --border-size-1 --role-rule bottom rule remains. */
+  .base[data-readonly] {
+    border-width: 0 0 var(--border-size-1);
+    border-color: var(--role-rule);
+    border-radius: var(--ds-radius-none);
+    background: none;
+  }
+
+  /* Highlighted: --primary4 plus the start-edge bar; focus stays in the input [D145]. */
+  .item[data-highlighted] {
+    background-color: var(--primary4);
+  }
+
+  .item[data-highlighted]::before {
+    display: block;
+  }
+
+  .item[data-disabled] {
+    background: none;
+    color: var(--role-muted);
+  }
+
+  .item[data-disabled]::before {
+    display: none;
+  }
+
+  /* Placement: a popup above the field reveals from its bottom edge. */
+  .popup[data-side='top'] {
+    --autocomplete-reveal-from: inset(100% 0 0 0);
+  }
+
+  /* The clip reveal from the trigger side [D91]; instant under --motionNotOK. */
+  .popup[data-starting-style],
+  .popup[data-ending-style] {
+    clip-path: var(--autocomplete-reveal-from);
+  }
+}
+
+@layer print {
+  @media print {
+    /* The value prints as text in the frame; the popup is never printed. */
+    .clear,
+    .trigger,
+    .positioner {
+      display: none;
+    }
+
+    .input::placeholder {
+      font-size: 0;
+    }
+  }
+}

package/components/Autocomplete/index.d.ts

@@ -0,0 +1,2 @@
+export * from './Autocomplete';
+//# sourceMappingURL=index.d.ts.map

package/components/Autocomplete/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/components/Autocomplete/index.ts"],"names":[],"mappings":"AAAA,cAAc,gBAAgB,CAAA"}

package/components/Autocomplete/index.js

@@ -0,0 +1,2 @@
+export * from './Autocomplete';
+//# sourceMappingURL=index.js.map

package/components/Autocomplete/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/components/Autocomplete/index.ts"],"names":[],"mappings":"AAAA,cAAc,gBAAgB,CAAA"}

package/components/Avatar/Avatar.d.ts

@@ -0,0 +1,97 @@
+import * as React from 'react';
+import { Avatar as BaseAvatar } from '@base-ui/react/avatar';
+import { useRender } from '@base-ui/react/use-render';
+import { type VariantProps } from 'class-variance-authority';
+import { type Status } from '../../utils/StatusGlyph';
+export declare const avatar: (props?: ({
+    size?: "sm" | "md" | "lg" | "xl" | "xs" | null | undefined;
+    primary?: "ruby" | "brown" | "crimson" | "gold" | "gray" | "indigo" | "olive" | "pink" | "plum" | "purple" | "red" | "tomato" | "violet" | "bronze" | "iris" | "mauve" | "sage" | "sand" | "slate" | null | undefined;
+    secondary?: "ruby" | "blue" | "brown" | "crimson" | "cyan" | "gold" | "gray" | "green" | "indigo" | "lime" | "olive" | "orange" | "pink" | "plum" | "purple" | "red" | "teal" | "tomato" | "violet" | "yellow" | "amber" | "bronze" | "grass" | "iris" | "jade" | "mauve" | "mint" | "sage" | "sand" | "sky" | "slate" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+/** The status disc's class. */
+export declare const avatarStatus: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+/** The group's classes: its size publishes the overlap. */
+export declare const avatarGroup: (props?: ({
+    size?: "sm" | "md" | "lg" | "xl" | "xs" | null | undefined;
+    primary?: "ruby" | "brown" | "crimson" | "gold" | "gray" | "indigo" | "olive" | "pink" | "plum" | "purple" | "red" | "tomato" | "violet" | "bronze" | "iris" | "mauve" | "sage" | "sand" | "slate" | null | undefined;
+    secondary?: "ruby" | "blue" | "brown" | "crimson" | "cyan" | "gold" | "gray" | "green" | "indigo" | "lime" | "olive" | "orange" | "pink" | "plum" | "purple" | "red" | "teal" | "tomato" | "violet" | "yellow" | "amber" | "bronze" | "grass" | "iris" | "jade" | "mauve" | "mint" | "sage" | "sand" | "sky" | "slate" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+type AvatarVariants = VariantProps<typeof avatar>;
+export type AvatarSize = NonNullable<AvatarVariants['size']>;
+/** Props for Avatar: Base UI Avatar Root props plus the size and color axes. */
+export type AvatarProps = BaseAvatar.Root.Props & {
+    /**
+     * `xs` 24, `sm` 32, `md` 40 (default), `lg` 64, `xl` 128 px. Up to 40 px
+     * the ring is `--border-size-1` `--role-rule`; from 64 px it is
+     * `--border-size-2` `--primary12`. Sizes are fixed at every width.
+     */
+    size?: AvatarVariants['size'];
+    /**
+     * Primary Radix scale: the ring. Never defaulted; omitted, it inherits
+     * the scope [D133].
+     */
+    primary?: AvatarVariants['primary'];
+    /** Secondary Radix scale, accepted for the shared contract; no part uses it. */
+    secondary?: AvatarVariants['secondary'];
+};
+/**
+ * The circular frame and its ring. Compose `AvatarImage` (a photo or a
+ * seal), `AvatarFallback` (1–2 initials, shown until the image loads or if
+ * it fails) and an optional `AvatarStatus`. Give the image alt text with the
+ * name, or empty alt when the name is adjacent. As a link or menu trigger,
+ * wrap it (or pass `render`): on hover a ring up to 40 px steps to
+ * `--primary12` at the same weight.
+ */
+export declare function Avatar(props: AvatarProps): React.JSX.Element;
+/** Props for AvatarImage: Base UI Avatar Image props. */
+export type AvatarImageProps = BaseAvatar.Image.Props;
+/** The photo or seal, cropped to the circle. Prints in grayscale. */
+export declare function AvatarImage(props: AvatarImageProps): React.JSX.Element;
+/** Props for AvatarFallback: Base UI Avatar Fallback props. */
+export type AvatarFallbackProps = BaseAvatar.Fallback.Props;
+/**
+ * The initials face: a nested white face (`--primary1`) with 1–2 caps
+ * initials in the UI sans at weight 700 and `--primary12`, the same on every
+ * ground. Never color-code initials backgrounds.
+ */
+export declare function AvatarFallback(props: AvatarFallbackProps): React.JSX.Element;
+/** Props for AvatarStatus: `span` props, the status and its word. */
+export type AvatarStatusProps = Omit<React.ComponentPropsWithRef<'span'>, 'children'> & {
+    /** The presence or state: info, success, warning or danger (§1.5.4). */
+    status: Status;
+    /**
+     * The state in words, e.g. "Away": the glyph's accessible name. Show the
+     * word beside the avatar too; presence is never a color dot alone.
+     */
+    label?: string;
+};
+/**
+ * The status glyph (§1.5.4, with its inner mark) on its own white disc at
+ * the frame's bottom end, `--size-px-3`, in `--role-status` of its status
+ * scale.
+ */
+export declare function AvatarStatus(props: AvatarStatusProps): React.JSX.Element;
+/** Props for AvatarGroup: `div` props, `render`, the size, the total and the color axes. */
+export type AvatarGroupProps = useRender.ComponentProps<'div'> & {
+    /** Size of every avatar in the group. Default `md`. */
+    size?: AvatarVariants['size'];
+    /**
+     * How many people the group stands for, when more exist than the avatars
+     * passed. Default: the number of avatars.
+     */
+    total?: number;
+    /** Primary Radix scale for the group's avatars. Never defaulted. */
+    primary?: AvatarVariants['primary'];
+    /** Secondary Radix scale, accepted for the shared contract; no part uses it. */
+    secondary?: AvatarVariants['secondary'];
+    /** Accessible name for the "+N" avatar; receives N. Default "N more". */
+    moreLabel?: (count: number) => string;
+};
+/**
+ * Overlapping avatars (−25%) separated by a `--size-px-1` ring in
+ * `--role-halo`, ending in a "+N" initials avatar: 3 avatars at base, up to
+ * 5 from 1024 px.
+ */
+export declare function AvatarGroup(props: AvatarGroupProps): React.ReactElement<unknown, string | React.JSXElementConstructor<any>>;
+export {};
+//# sourceMappingURL=Avatar.d.ts.map

package/components/Avatar/Avatar.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Avatar.d.ts","sourceRoot":"","sources":["../../src/components/Avatar/Avatar.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,EAAE,MAAM,IAAI,UAAU,EAAE,MAAM,uBAAuB,CAAA;AAC5D,OAAO,EAAE,SAAS,EAAE,MAAM,2BAA2B,CAAA;AAErD,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAA;AAMjE,OAAO,EAA2C,KAAK,MAAM,EAAE,MAAM,yBAAyB,CAAA;AA6B9F,eAAO,MAAM,MAAM;;;;8EAgBjB,CAAA;AAEF,+BAA+B;AAC/B,eAAO,MAAM,YAAY,oFAAqB,CAAA;AAE9C,2DAA2D;AAC3D,eAAO,MAAM,WAAW;;;;8EAetB,CAAA;AAEF,KAAK,cAAc,GAAG,YAAY,CAAC,OAAO,MAAM,CAAC,CAAA;AACjD,MAAM,MAAM,UAAU,GAAG,WAAW,CAAC,cAAc,CAAC,MAAM,CAAC,CAAC,CAAA;AAQ5D,gFAAgF;AAChF,MAAM,MAAM,WAAW,GAAG,UAAU,CAAC,IAAI,CAAC,KAAK,GAAG;IAChD;;;;OAIG;IACH,IAAI,CAAC,EAAE,cAAc,CAAC,MAAM,CAAC,CAAA;IAC7B;;;OAGG;IACH,OAAO,CAAC,EAAE,cAAc,CAAC,SAAS,CAAC,CAAA;IACnC,gFAAgF;IAChF,SAAS,CAAC,EAAE,cAAc,CAAC,WAAW,CAAC,CAAA;CACxC,CAAA;AAED;;;;;;;GAOG;AACH,wBAAgB,MAAM,CAAC,KAAK,EAAE,WAAW,qBAaxC;AAED,yDAAyD;AACzD,MAAM,MAAM,gBAAgB,GAAG,UAAU,CAAC,KAAK,CAAC,KAAK,CAAA;AAErD,qEAAqE;AACrE,wBAAgB,WAAW,CAAC,KAAK,EAAE,gBAAgB,qBAQlD;AAED,+DAA+D;AAC/D,MAAM,MAAM,mBAAmB,GAAG,UAAU,CAAC,QAAQ,CAAC,KAAK,CAAA;AAE3D;;;;GAIG;AACH,wBAAgB,cAAc,CAAC,KAAK,EAAE,mBAAmB,qBAYxD;AAED,qEAAqE;AACrE,MAAM,MAAM,iBAAiB,GAAG,IAAI,CAAC,KAAK,CAAC,qBAAqB,CAAC,MAAM,CAAC,EAAE,UAAU,CAAC,GAAG;IACtF,wEAAwE;IACxE,MAAM,EAAE,MAAM,CAAA;IACd;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAA;CACf,CAAA;AAED;;;;GAIG;AACH,wBAAgB,YAAY,CAAC,KAAK,EAAE,iBAAiB,qBAkBpD;AAED,4FAA4F;AAC5F,MAAM,MAAM,gBAAgB,GAAG,SAAS,CAAC,cAAc,CAAC,KAAK,CAAC,GAAG;IAC/D,uDAAuD;IACvD,IAAI,CAAC,EAAE,cAAc,CAAC,MAAM,CAAC,CAAA;IAC7B;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,oEAAoE;IACpE,OAAO,CAAC,EAAE,cAAc,CAAC,SAAS,CAAC,CAAA;IACnC,gFAAgF;IAChF,SAAS,CAAC,EAAE,cAAc,CAAC,WAAW,CAAC,CAAA;IACvC,yEAAyE;IACzE,SAAS,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,MAAM,CAAA;CACtC,CAAA;AAID;;;;GAIG;AACH,wBAAgB,WAAW,CAAC,KAAK,EAAE,gBAAgB,0EA4DlD"}