@fairgarden/design 0.1.0-0.canary.0

package/disclosure/faq/faq.module.css

@@ -0,0 +1,277 @@
+/*
+ * FAQ (§12.5): the §10.13 Ruled accordion with the Strong top rule, set as a
+ * content module. Parts: `base` (the section), `header`, `title`, `intro`,
+ * `list` (Accordion Root), `item`, `heading` (the h3), `trigger` (the row),
+ * `icon` (keyed only), `question`, `glyph` (the disclosure glyph, drawn
+ * by the Collapsible module), `openBar`, `panel`, `answer`, `contact`.
+ * Dense module: line semantics only, never a fill on the open item. Colors
+ * are role variables only; local custom properties carry dimensions only.
+ */
+
+/* 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. The trigger carries the
+ * question's type role so the glyph can align to its first line (1lh). */
+.title {
+  composes: typeH2 from '../../utils/type.module.css';
+}
+
+.intro {
+  composes: typeLead from '../../utils/type.module.css';
+}
+
+.trigger {
+  composes: typeItemhead from '../../utils/type.module.css';
+}
+
+.answer {
+  composes: typeBody from '../../utils/type.module.css';
+}
+
+.contact {
+  composes: typeBodyUi from '../../utils/type.module.css';
+}
+
+.item {
+  composes: lineSolid from '../../utils/line.module.css';
+}
+
+@layer base {
+  .base {
+    --faq-bar-inset: 0px;
+
+    margin: 0;
+    color: var(--primary12);
+  }
+
+  /* Chapter stack (§3.5 Recipe A): H2, then --fgd-space-stack to the first rule. */
+  .header {
+    display: grid;
+    gap: var(--size-px-5);
+    margin-block-end: var(--fgd-space-stack);
+  }
+
+  /* Section head in --role-heading; the item heads below are --primary12 [D60]. */
+  .title {
+    margin: 0;
+    color: var(--role-heading);
+  }
+
+  .intro {
+    margin: 0;
+    max-inline-size: var(--fgd-measure-reading);
+    color: var(--primary12);
+  }
+
+  .list {
+    margin: 0;
+  }
+
+  /* Rules: the first is the Strong top (--border-size-2 --primary12); the rest --role-rule, closing after the last. */
+  .item {
+    border-width: 0;
+    border-block-start-width: var(--border-size-1);
+    border-color: var(--role-rule);
+  }
+
+  .item:first-child {
+    border-block-start-width: var(--border-size-2);
+    border-block-start-color: var(--primary12);
+  }
+
+  .item:last-child {
+    border-block-end-width: var(--border-size-1);
+  }
+
+  .heading {
+    margin: 0;
+  }
+
+  /* The row: ≥ --fgd-size-control-xl tall, --size-px-3 vertical padding. */
+  .trigger {
+    position: relative;
+    display: flex;
+    align-items: flex-start;
+    gap: var(--size-px-3);
+    box-sizing: border-box;
+    inline-size: 100%;
+    min-block-size: var(--fgd-size-control-xl);
+    margin: 0;
+    padding-block: var(--size-px-3);
+    padding-inline: var(--faq-bar-inset) 0;
+    border: 0;
+    background: none;
+    color: var(--primary12);
+    text-align: start;
+    cursor: pointer;
+    appearance: none;
+  }
+
+  .question {
+    flex: 1 1 auto;
+    min-inline-size: 0;
+    text-wrap: balance;
+    /* The bare-text hover underline's color, weight and offset (§10.1) [D181]. */
+    text-decoration-color: var(--role-accent);
+    text-decoration-thickness: var(--border-size-2);
+    text-underline-offset: var(--size-px-1);
+  }
+
+  /* Trailing, top-aligned to the question's first line; it swaps direction, never rotates [D109]. */
+  .glyph {
+    flex: none;
+    margin-block: calc((1lh - var(--size-px-4)) / 2);
+  }
+
+  /* The optional open bar: a --border-size-2-25 line at the row's start edge, shown under `barred`. */
+  .openBar {
+    display: none;
+    position: absolute;
+    inset-block: 0;
+    inset-inline-start: 0;
+    border-inline-start: var(--border-size-2-25) solid var(--primary12);
+  }
+
+  /* The §10.13 clip reveal [D91]: the panel's edge wipes open; never a fade. */
+  .panel {
+    block-size: var(--accordion-panel-height);
+    overflow: hidden;
+    overflow: clip;
+  }
+
+  /* Answers: text serif within the reading measure; --size-px-2-5 below the question, --size-px-5 below. */
+  .answer {
+    max-inline-size: var(--fgd-measure-reading);
+    padding-block: 0 var(--size-px-5);
+    padding-inline-start: var(--faq-bar-inset);
+    color: var(--primary12);
+  }
+
+  .contact {
+    margin: var(--size-px-5) 0 0;
+    color: var(--primary12);
+  }
+
+  @media (prefers-reduced-motion: no-preference) {
+    .panel {
+      transition-property: block-size;
+      transition-duration: var(--fgd-duration-disclosure);
+      transition-timing-function: var(--ease-out-3);
+    }
+
+    /* Hover transition [D181]: --fgd-duration-quick, --ease-out-3. */
+    .question {
+      transition-property: text-decoration-color;
+      transition-duration: var(--fgd-duration-quick);
+      transition-timing-function: var(--ease-out-3);
+    }
+  }
+}
+
+@layer variants {
+  /* Ruled (default) and split rows are bare: no leading icon. */
+  .ruled .icon,
+  .split .icon {
+    display: none;
+  }
+
+  /* Keyed detail: a leading block icon per row; answers indent to the question column. */
+  .keyed .icon {
+    margin-block: calc((1lh - var(--fgd-size-icon-block)) / 2);
+    color: var(--primary12);
+  }
+
+  .keyed .answer {
+    padding-inline-start: calc(var(--faq-bar-inset) + var(--fgd-size-icon-block) + var(--size-px-3));
+  }
+
+  /* Barred: every row keeps the bar's inset, so questions stay aligned open or closed. */
+  .barred {
+    --faq-bar-inset: var(--size-px-2-5);
+  }
+
+  /* Split (§12.5): a page-grid placement from --lg-n-above, header in 4 of 12 columns, the list in 8. */
+  @media (min-width: 1024px) {
+    .split {
+      display: grid;
+      grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
+      column-gap: var(--fgd-space-margin);
+      align-items: start;
+    }
+
+    .split .header {
+      grid-column: 1;
+      grid-row: 1 / span 2;
+      margin-block-end: 0;
+    }
+
+    .split .list,
+    .split .contact {
+      grid-column: 2;
+    }
+  }
+}
+
+@layer states {
+  /* Expanded: the question-to-answer gap closes to --size-px-2-5. */
+  .trigger[data-panel-open] {
+    padding-block-end: var(--size-px-2-5);
+  }
+
+  .barred .trigger[data-panel-open] .openBar {
+    display: block;
+  }
+
+  /*
+   * Hover: the question takes the bare-text underline, --role-accent at
+   * --border-size-2, offset --size-px-1; the glyph does not change
+   * (§12.5, §10.13) [D109, D181].
+   */
+  .trigger:not([data-disabled]):hover .question {
+    text-decoration-line: underline;
+  }
+
+  /* Focus: the ring around the row, inset --border-size-2 from the rules. */
+  .trigger:focus-visible {
+    outline: var(--border-size-2) solid var(--primary12);
+    outline-offset: calc(-2 * var(--border-size-2));
+  }
+
+  .panel[data-starting-style],
+  .panel[data-ending-style] {
+    block-size: 0;
+  }
+}
+
+@layer print {
+  @media print {
+    /* All answers print expanded; glyphs and the open bar hide; each pair stays together (§12.5). */
+    .glyph,
+    .openBar,
+    .barred .trigger[data-panel-open] .openBar {
+      display: none;
+    }
+
+    .item {
+      break-inside: avoid;
+    }
+
+    .trigger,
+    .trigger[data-panel-open] {
+      min-block-size: 0;
+      padding-block-end: var(--size-px-2-5);
+    }
+
+    .panel,
+    .panel[data-starting-style],
+    .panel[data-ending-style] {
+      block-size: auto;
+      overflow: visible;
+    }
+
+    .panel[hidden] {
+      display: block;
+      content-visibility: visible;
+    }
+  }
+}

package/disclosure/faq/index.d.ts

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

package/disclosure/faq/index.d.ts.map

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

package/disclosure/faq/index.js

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

package/disclosure/faq/index.js.map

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

package/feedback/alert/Alert.d.ts

@@ -0,0 +1,38 @@
+import * as React from 'react';
+import { useRender } from '@base-ui/react/use-render';
+import { type VariantProps } from 'class-variance-authority';
+import { type Status } from '../../utils/StatusGlyph';
+declare const alert: (props?: ({
+    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;
+export type AlertStatus = Status;
+/** Props for Alert: `div` props (without `title`), `render`, the status, lead, action and color axes. */
+export type AlertProps = Omit<useRender.ComponentProps<'div'>, 'title'> & VariantProps<typeof alert> & {
+    /**
+     * Required by §10.20 (no default). Optional in the type only so a bare
+     * `<Alert />` compiles; without it nothing renders.
+     */
+    status?: AlertStatus;
+    /** The `type-runin` word lead, e.g. "Couldn't load." It runs into the message. */
+    title?: React.ReactNode;
+    /** An optional action, normally a Retry Button (`variant="outline"`, `size="md"`). */
+    action?: React.ReactNode;
+    /** The glyph's accessible name; defaults to the English status word. */
+    statusLabel?: string;
+};
+/**
+ * The inline status block: start bar, status glyph (custom §1.5.4 shape with
+ * its inner mark), word lead, message and optional action, on the page
+ * ground with no fill.
+ *
+ * `role` defaults to `status` (polite) and to `alert` for danger (§10.20);
+ * pass `role="status"` for a danger notice that does not block the task.
+ *
+ * Renders nothing when `status` is missing, or when there is neither a
+ * `title` nor children: a status block needs a status and words (§1.5.4,
+ * §10.20), and an empty live region must not be announced.
+ */
+export declare function Alert(props: AlertProps): React.ReactElement<unknown, string | React.JSXElementConstructor<any>> | null;
+export {};
+//# sourceMappingURL=Alert.d.ts.map

package/feedback/alert/Alert.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Alert.d.ts","sourceRoot":"","sources":["../../src/feedback/alert/Alert.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,EAAE,SAAS,EAAE,MAAM,2BAA2B,CAAA;AAErD,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAA;AAIjE,OAAO,EAA2C,KAAK,MAAM,EAAE,MAAM,yBAAyB,CAAA;AAmB9F,QAAA,MAAM,KAAK;;;8EAMT,CAAA;AAEF,MAAM,MAAM,WAAW,GAAG,MAAM,CAAA;AAEhC,yGAAyG;AACzG,MAAM,MAAM,UAAU,GAAG,IAAI,CAAC,SAAS,CAAC,cAAc,CAAC,KAAK,CAAC,EAAE,OAAO,CAAC,GACrE,YAAY,CAAC,OAAO,KAAK,CAAC,GAAG;IAC3B;;;OAGG;IACH,MAAM,CAAC,EAAE,WAAW,CAAA;IACpB,kFAAkF;IAClF,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACvB,sFAAsF;IACtF,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACxB,wEAAwE;IACxE,WAAW,CAAC,EAAE,MAAM,CAAA;CACrB,CAAA;AAEH;;;;;;;;;;;GAWG;AACH,wBAAgB,KAAK,CAAC,KAAK,EAAE,UAAU,iFAwDtC"}

package/feedback/alert/Alert.js

@@ -0,0 +1,79 @@
+'use client';
+import * as React from 'react';
+import { useRender } from '@base-ui/react/use-render';
+import { mergeProps } from '@base-ui/react/merge-props';
+import { cva } from 'class-variance-authority';
+import { primaryScaleVariants, secondaryScaleVariants } from '../../utils/scales';
+import { useScopeAttributes } from '../../utils/scope';
+import { StatusGlyph, statusLabels, statusScales } from '../../utils/StatusGlyph';
+import styles from './alert.module.css';
+/*
+ * Alert: the inline status block (§10.20, owner per [D110]).
+ *
+ * Implementation (CSS Modules + CVA)
+ * - Module: alert.module.css; CVA function `alert`.
+ * - Axes: `status` → info | success | warning | danger (selects the glyph,
+ *   the default role and the computed secondary; it carries no class);
+ *   `primary`, `secondary` → scales module classes.
+ * - Compound variants: none. Defaults: none; color axes none.
+ * - Color fallback: secondary = the explicit prop, else the status scale
+ *   (info indigo, success green, warning amber, danger red) [D129].
+ * - States: none (loading → loaded → failed swaps what renders).
+ * - Parts: base (its inline-start border is the bar), glyph, lead, message,
+ *   action.
+ * - Scope: none. Container: none; inherits its context.
+ */
+const alert = cva(styles.base, {
+    variants: {
+        // Color axes: never defaulted [D133]; the component computes secondary from status.
+        primary: primaryScaleVariants,
+        secondary: secondaryScaleVariants,
+    },
+});
+/**
+ * The inline status block: start bar, status glyph (custom §1.5.4 shape with
+ * its inner mark), word lead, message and optional action, on the page
+ * ground with no fill.
+ *
+ * `role` defaults to `status` (polite) and to `alert` for danger (§10.20);
+ * pass `role="status"` for a danger notice that does not block the task.
+ *
+ * Renders nothing when `status` is missing, or when there is neither a
+ * `title` nor children: a status block needs a status and words (§1.5.4,
+ * §10.20), and an empty live region must not be announced.
+ */
+export function Alert(props) {
+    const { render, ref, className, status, title, action, statusLabel, primary, secondary, children, ...rest } = props;
+    const scopeAttributes = useScopeAttributes();
+    const hasTitle = hasContent(title);
+    const hasMessage = hasContent(children);
+    const enabled = status !== undefined && (hasTitle || hasMessage);
+    const content = status ? (React.createElement(React.Fragment, null,
+        React.createElement(StatusGlyph, { status: status, label: statusLabel ?? statusLabels[status], className: styles.glyph }),
+        React.createElement("div", { className: styles.message },
+            hasTitle ? React.createElement("strong", { className: styles.lead }, title) : null,
+            hasTitle && hasMessage ? ' ' : null,
+            children),
+        hasContent(action) ? React.createElement("div", { className: styles.action }, action) : null)) : null;
+    return useRender({
+        enabled,
+        defaultTagName: 'div',
+        render,
+        ref,
+        props: mergeProps({
+            ...scopeAttributes,
+            role: status === 'danger' ? 'alert' : 'status',
+            className: alert({
+                primary,
+                secondary: secondary ?? (status ? statusScales[status] : undefined),
+                className,
+            }),
+            children: content,
+        }, rest),
+    });
+}
+/** True when a node would render something visible. */
+function hasContent(node) {
+    return React.Children.toArray(node).some((child) => child !== '');
+}
+//# sourceMappingURL=Alert.js.map

package/feedback/alert/Alert.js.map

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

package/feedback/alert/alert.module.css

@@ -0,0 +1,99 @@
+/*
+ * Alert: the inline status block (§10.20) [D110]. On the page ground, never a
+ * tinted panel: a --border-size-2-25 start bar and the glyph in --role-status, a
+ * type-runin word lead, the message in type-body-ui --primary12, padding
+ * --size-px-3 from the bar. The secondary is the status scale, so
+ * --role-status resolves to --secondary11 (--primary12 on saturated grounds,
+ * --secondary12 on brick) without the module reading the scope [D141, D155].
+ */
+
+/* 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. */
+.base {
+  composes: typeBodyUi from '../../utils/type.module.css';
+  composes: lineSolid from '../../utils/line.module.css';
+}
+
+.lead {
+  composes: typeRunin from '../../utils/type.module.css';
+}
+
+@layer base {
+  /* The start bar (part `bar`) is the root's inline-start border, so it spans the block and prints as a rule. */
+  .base {
+    display: grid;
+    grid-template-columns: auto minmax(0, 1fr);
+    align-items: start;
+    column-gap: var(--size-px-2);
+    row-gap: var(--size-px-2-5);
+    border-width: 0;
+    border-inline-start-width: var(--border-size-2-25);
+    border-inline-start-color: var(--role-status);
+    padding-inline-start: var(--size-px-3);
+    color: var(--primary12);
+  }
+
+  /*
+   * Custom §1.5.4 glyph at the tag tier: the shape and inner mark in
+   * --role-status (currentColor), knockouts and the outline disc in
+   * --role-status-fill. One line box tall so it sits on the first line.
+   */
+  .glyph {
+    grid-column: 1;
+    grid-row: 1;
+    display: block;
+    inline-size: var(--size-px-4);
+    block-size: var(--size-px-4);
+    block-size: 1lh;
+    overflow: visible;
+    color: var(--role-status);
+    fill: var(--role-status-fill);
+    stroke: var(--role-status-fill);
+    stroke-width: var(--border-size-1-5);
+    stroke-linecap: round;
+    stroke-linejoin: round;
+  }
+
+  .message {
+    grid-column: 2;
+    min-inline-size: 0;
+    margin: 0;
+    color: var(--primary12);
+  }
+
+  /* The status word: --primary12, or the status scale's step 12 on brick [D173]. */
+  .lead {
+    color: var(--role-status-text);
+  }
+
+  .action {
+    grid-column: 2;
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--size-px-2);
+  }
+
+  /* Forced colors: keep the shape and its knockout mark legible. */
+  @media (forced-colors: active) {
+    .glyph {
+      forced-color-adjust: none;
+      color: CanvasText;
+      fill: Canvas;
+      stroke: Canvas;
+    }
+  }
+}
+
+@layer print {
+  @media print {
+    /* A failed module prints its status line; the glyph and bar print black through the remap. */
+    .base {
+      break-inside: avoid;
+    }
+
+    .action {
+      display: none;
+    }
+  }
+}

package/feedback/alert/index.d.ts

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

package/feedback/alert/index.d.ts.map

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

package/feedback/alert/index.js

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

package/feedback/alert/index.js.map

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

package/feedback/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/feedback/avatar/Avatar.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Avatar.d.ts","sourceRoot":"","sources":["../../src/feedback/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"}