@ngrok/mantle 0.82.0 → 0.83.0

package/dist/app-layout.js

@@ -1 +1 @@
-import{t as e}from"./cx-IiQEAKf5.js";import{t}from"./data-slot-EM6s2WEU.js";import{t as n}from"./slot-Dpsqz16D.js";import{jsx as r}from"react/jsx-runtime";const i={Root:({asChild:i,children:a,className:o,"data-slot":s,...c})=>r(i?n:`div`,{"data-slot":t(s,`app-layout`),className:e(`group/app-layout bg-base relative isolate flex h-full w-full flex-col overflow-hidden`,o),...c,children:a}),Notice:({asChild:i,children:a,className:o,"data-slot":s,...c})=>r(i?n:`div`,{"data-slot":t(s,`app-layout-notice`),className:e(`flex w-full shrink-0 flex-col`,o),...c,children:a}),Body:({asChild:i,children:a,className:o,"data-slot":s,...c})=>r(i?n:`div`,{"data-slot":t(s,`app-layout-body`),className:e(`flex min-h-0 flex-1`,o),...c,children:a}),Inset:({asChild:i,children:a,className:o,"data-slot":s,...c})=>r(i?n:`div`,{"data-slot":t(s,`app-layout-inset`),className:e(`flex min-w-0 flex-1 flex-col gap-2 p-2`,o),...c,children:a}),Header:({asChild:i,children:a,className:o,"data-slot":s,...c})=>r(i?n:`header`,{"data-slot":t(s,`app-layout-header`),className:e(`border-card-muted bg-card sticky top-0 z-10 flex h-14 shrink-0 items-center gap-2 border-b px-4`,`group-has-[[data-slot~=sidebar-header]]/app-layout:h-[calc(var(--sidebar-header-height,4.5rem)-1rem-2px)]`,o),...c,children:a}),Content:({asChild:i,children:a,className:o,"data-slot":s,...c})=>r(i?n:`div`,{"data-slot":t(s,`app-layout-content`),className:e(`bg-card border-card-muted scrollbar min-h-0 flex-1 overflow-y-auto overscroll-none rounded-xl border shadow-sm`,o),...c,children:a})};export{i as AppLayout};
+import{t as e}from"./cx-IiQEAKf5.js";import{t}from"./data-slot-EM6s2WEU.js";import{t as n}from"./slot-DpNWVci8.js";import{jsx as r}from"react/jsx-runtime";const i={Root:({asChild:i,children:a,className:o,"data-slot":s,...c})=>r(i?n:`div`,{"data-slot":t(s,`app-layout`),className:e(`group/app-layout bg-base relative isolate flex h-full w-full flex-col`,`overflow-clip`,o),...c,children:a}),Notice:({asChild:i,children:a,className:o,"data-slot":s,...c})=>r(i?n:`div`,{"data-slot":t(s,`app-layout-notice`),className:e(`flex w-full shrink-0 flex-col`,o),...c,children:a}),Workspace:({asChild:i,children:a,className:o,"data-slot":s,...c})=>r(i?n:`div`,{"data-slot":t(s,`app-layout-workspace`),className:e(`flex min-h-0 flex-1`,o),...c,children:a}),Content:({asChild:i,children:a,className:o,"data-slot":s,...c})=>r(i?n:`div`,{"data-slot":t(s,`app-layout-content`),className:e(`bg-card border-card-muted relative flex min-w-0 flex-1 flex-col rounded-xl border shadow-sm`,`m-(--app-layout-card-gutter,0.5rem)`,`overflow-clip`,o),...c,children:a}),Header:({asChild:i,children:a,className:o,"data-slot":s,...c})=>r(i?n:`div`,{"data-slot":t(s,`app-layout-header`),className:e(`border-card-muted flex h-14 shrink-0 items-center gap-2 border-b px-4`,`group-has-data-[slot~=sidebar-header]/app-layout:h-[calc(var(--sidebar-header-height,4.5rem)-2*var(--app-layout-card-gutter,0.5rem)-2px)]`,o),...c,children:a}),Body:({asChild:i,children:a,className:o,"data-slot":s,...c})=>r(i?n:`div`,{"data-slot":t(s,`app-layout-body`),className:e(`scrollbar relative min-h-0 w-full flex-1 overflow-y-auto overscroll-none`,o),...c,children:a})};export{i as AppLayout};

package/dist/area-chart.d.ts

@@ -1,4 +1,4 @@
-import { _ as SeriesColor, a as LegendPrimitiveProps, c as XAxisPrimitiveProps, f as ChartDatum, g as PointShape, h as CurveKind, i as GridPrimitiveProps, l as YAxisPrimitiveProps, m as ContinuousXScale, n as ChartRootBaseProps, o as ReferenceLinePrimitiveProps, p as ChartDatumEvent, r as CopyButtonPrimitiveProps, s as TooltipPrimitiveProps, t as ChartAccessibilityProps } from "./chart-1cVjAcj8.js";
+import { _ as PointShape, a as LegendPrimitiveProps, c as XAxisPrimitiveProps, f as ChartDatum, g as CurveKind, h as ContinuousXScale, i as GridPrimitiveProps, l as YAxisPrimitiveProps, m as ChartSeriesSlot, n as ChartRootBaseProps, o as ReferenceLinePrimitiveProps, p as ChartDatumEvent, r as CopyButtonPrimitiveProps, s as TooltipPrimitiveProps, t as ChartAccessibilityProps, v as SeriesColor } from "./chart-0zcFJh4n.js";
 //#region src/components/area-chart/area-chart.d.ts
 /**
  * Props for {@link AreaChart.Root}. Areas fill from a shared zero baseline, so
@@ -27,12 +27,26 @@ type AreaChartAreaProps = {
   /** Display name for the legend, tooltip, and data table. Defaults to `dataKey`. */
   label?: string;
   /**
-   * One of the validated chart tokens (`"chart-1"`…`"chart-8"`, `"chart-other"`)
-   * or any CSS color as an escape hatch. Defaults to the next sticky slot in
-   * mount order. Static colors (raw hex) do not adapt across themes; custom
-   * palettes must be validated for colorblind-safe adjacency and surface
-   * contrast, and a series that carries good/bad meaning should wear the
-   * semantic status colors, never a categorical slot.
+   * A fixed visual identity slot. Slots `1` through `8` select a paired chart
+   * color and point shape. `"other"` selects the shared neutral treatment.
+   *
+   * Series receive unreserved slots in composition order. Set `seriesSlot` to
+   * give a series a fixed visual identity.
+   *
+   * @example
+   * ```tsx
+   * <AreaChart.Area dataKey="errors" seriesSlot={4} />
+   * ```
+   */
+  seriesSlot?: ChartSeriesSlot;
+  /**
+   * Override the color channel with a chart token or any CSS color. This does
+   * not change the series slot or its paired point shape. When omitted, the
+   * series paints the color from its slot.
+   *
+   * A static color (raw hex) cannot follow the four themes, so prefer a
+   * `var(--your-token)` declared per theme. A series that carries good/bad
+   * meaning should wear the semantic status colors, never a categorical slot.
    */
   color?: SeriesColor;
   /**
@@ -46,9 +60,11 @@ type AreaChartAreaProps = {
    */
   connectNulls?: boolean;
   /**
-   * The glyph the hover dot wears: `"circle"` (default), `"square"`,
-   * `"triangle"`, or `"diamond"` — a redundant encoding alongside color that
-   * keeps series distinguishable without color vision.
+   * The glyph the hover dot and the legend key wear: `"circle"`, `"square"`,
+   * `"triangle"`, `"diamond"`, `"triangle-down"`, `"plus"`, `"cross"`, or
+   * `"star"`. Shape is a redundant encoding alongside color that keeps series
+   * distinguishable without color vision. When omitted, the series wears the
+   * glyph paired to its series slot, so both channels name one slot.
    */
   shape?: PointShape;
 };
@@ -88,8 +104,18 @@ type AreaChartCopyButtonProps = CopyButtonPrimitiveProps;
  * tooltip, keyboard stepping with polite announcements, an sr-only data
  * table, Enter/Space + click activation). Areas fill with a 10% wash of the
  * series color plus a 2px band-edge stroke; `stacked` on the Root stacks the
- * composed series, the first series at the baseline. Large datasets decimate
- * before painting on canvas. Compose the chrome and series parts as children.
+ * series in registration order, the first-registered series at the baseline.
+ * Large datasets decimate before painting on canvas. Compose the chrome and
+ * series parts as children.
+ *
+ * The Root's own subtree is addressable by slot: `area-chart` on the wrapper,
+ * then `area-chart-plot`, `area-chart-canvas`, `area-chart-crosshair`,
+ * `area-chart-hover-band`, `area-chart-markers`, `area-chart-tooltip`, and
+ * `area-chart-data-table`. An area chart shows the crosshair and one marker dot
+ * per series, and never the band, but all three layers mount on every kind.
+ * Each hover dot carries `chart-active-point` plus a `data-shape` of
+ * `"circle"`, `"square"`, `"triangle"`, `"diamond"`, `"triangle-down"`,
+ * `"plus"`, `"cross"`, or `"star"`, naming the glyph its series wears.
  *
  * @see https://mantle.ngrok.com/components/charts/area-chart#areachartroot
  *
@@ -116,8 +142,9 @@ declare const Root: <TDatum extends ChartDatum = ChartDatum>(props: AreaChartRoo
 /**
  * One area series. Renders nothing itself — it registers the series with the
  * chart, which paints it on canvas. Compose one `Area` per series; with
- * `stacked` on the Root, areas stack in composition order with the first
- * series at the baseline.
+ * `stacked` on the Root, areas stack in registration order with the
+ * first-registered series at the baseline, so an `Area` that mounts later
+ * stacks on top whatever its position in the JSX.
  *
  * @see https://mantle.ngrok.com/components/charts/area-chart#areachartarea
  *
@@ -218,9 +245,9 @@ declare const YAxis: (props: AreaChartYAxisProps) => null;
 declare const ReferenceLine: (props: AreaChartReferenceLineProps) => null;
 /**
  * Customizes the hover/keyboard tooltip readout. The tooltip itself is part
- * of `AreaChart.Root`'s interaction contract and renders whether or not this
- * part is composed — compose it to format the label or values, append a
- * footer, or replace the content entirely via the render-prop `children`.
+ * of `AreaChart.Root`'s interaction contract and renders even when this part
+ * is absent — compose it to format the label or values, append a footer, or
+ * replace the content entirely via the render-prop `children`.
  *
  * @see https://mantle.ngrok.com/components/charts/area-chart#areacharttooltip
  *
@@ -244,6 +271,13 @@ declare const Tooltip: (props: AreaChartTooltipProps) => null;
  * must never rely on color-matching alone. It renders nothing for a single
  * series (the chart's title already names it).
  *
+ * **Data attributes:**
+ *
+ * | Data Attribute | Value | Description |
+ * | --- | --- | --- |
+ * | `data-slot` | `"area-chart-legend"` | The legend list. `AreaChart.Legend` renders it in flow below the plot. |
+ * | `data-shape` | `"circle"` \| `"square"` \| `"triangle"` \| `"diamond"` \| `"triangle-down"` \| `"plus"` \| `"cross"` \| `"star"` | On each series' swatch, naming the glyph its `AreaChart.Area` wears — the `shape` it set, else the one paired to its series slot. The swatch clips itself to that glyph, so target this only to restyle a key. |
+ *
  * @see https://mantle.ngrok.com/components/charts/area-chart#areachartlegend
  *
  * @example
@@ -285,14 +319,28 @@ declare const CopyButton: (props: AreaChartCopyButtonProps) => import("react").J
  * A canvas-rendered area chart for showing how values — and, when stacked, a
  * total and its parts — change over a continuous x axis. Each area fills with
  * a 10% wash of the series color plus a 2px band-edge stroke; the Root-level
- * `stacked` prop stacks the composed series in composition order from the
- * baseline. Series colors come from the theme's validated `--color-chart-*`
+ * `stacked` prop stacks the series in registration order from the baseline.
+ * Series colors come from the theme's validated `--color-chart-*`
  * tokens; areas keep a fixed slot color for the chart's lifetime even as
  * other series are filtered in and out. Interaction — a crosshair with an
  * every-series tooltip, keyboard stepping, aria-live announcements, and an
  * sr-only data table — ships with `Root` unconditionally; large datasets
  * decimate before painting on canvas.
  *
+ * **CSS variables (public API):**
+ *
+ * | CSS Variable | Default | Description |
+ * | --- | --- | --- |
+ * | `--color-chart-1` … `--color-chart-8` | per theme | The validated categorical series slots, in assignment order. |
+ * | `--color-chart-other` | `--color-neutral-500` | The neutral overflow slot a series wears once every slot is held. |
+ *
+ * Two ways to change a series color, both public API. The `color` prop on
+ * `AreaChart.Area` sets one series and takes any CSS color. To restyle a slot itself,
+ * redeclare its token on `Root` —
+ * `className="[--color-chart-1:var(--color-brand)]"`. The engine resolves every
+ * token through a probe inside `Root`, so a declaration scoped there wins for
+ * that chart and leaves every other chart on the page alone.
+ *
  * @see https://mantle.ngrok.com/components/charts/area-chart
  *
  * @example

package/dist/area-chart.js

@@ -1 +1 @@
-import{a as e,c as t,i as n,l as r,n as i,o as a,r as o,s,t as c}from"./chart-DdBQ3xwx.js";import{jsx as l}from"react/jsx-runtime";const u={Root:e=>l(o,{kind:`area`,componentName:`AreaChart`,slotName:`area-chart`,...e}),Area:e=>a(`AreaChart.Area`,`area`,e),Grid:e=>n(`AreaChart.Grid`,e),XAxis:e=>t(`AreaChart.XAxis`,e),YAxis:e=>r(`AreaChart.YAxis`,e),ReferenceLine:t=>e(`AreaChart.ReferenceLine`,t),Tooltip:e=>s(`AreaChart.Tooltip`,e),Legend:e=>l(i,{partName:`AreaChart.Legend`,slotName:`area-chart`,...e}),CopyButton:e=>l(c,{partName:`AreaChart.CopyButton`,slotName:`area-chart`,...e})};export{u as AreaChart};
+import{a as e,c as t,i as n,l as r,n as i,o as a,r as o,s,t as c}from"./chart-DBxT9BNl.js";import{jsx as l}from"react/jsx-runtime";const u={Root:e=>l(o,{kind:`area`,componentName:`AreaChart`,slotName:`area-chart`,...e}),Area:e=>a(`AreaChart.Area`,`area`,e),Grid:e=>n(`AreaChart.Grid`,e),XAxis:e=>t(`AreaChart.XAxis`,e),YAxis:e=>r(`AreaChart.YAxis`,e),ReferenceLine:t=>e(`AreaChart.ReferenceLine`,t),Tooltip:e=>s(`AreaChart.Tooltip`,e),Legend:e=>l(i,{partName:`AreaChart.Legend`,slotName:`area-chart`,...e}),CopyButton:e=>l(c,{partName:`AreaChart.CopyButton`,slotName:`area-chart`,...e})};export{u as AreaChart};

package/dist/avatar.d.ts

@@ -0,0 +1,319 @@
+import { n as WithAsChild } from "./as-child-D23mGo4f.js";
+import { t as WithDataSlot } from "./data-slot-CChfb_cv.js";
+import { ComponentProps, ReactEventHandler, ReactNode } from "react";
+//#region src/components/avatar/avatar.d.ts
+/**
+ * The shape an `Avatar.Root` renders as. Circles read as people, rounded
+ * squares as the things people belong to — accounts, workspaces, teams,
+ * organizations. Keeping the two shapes visually distinct is the point: a
+ * switcher row showing both at once stays legible without labels.
+ *
+ * @see https://mantle.ngrok.com/components/data-display/avatar
+ *
+ * @example
+ * ```tsx
+ * <Avatar.Root appearance="square" colorSeed="acc_123">
+ *   <Avatar.Fallback name="Acme Corp" />
+ * </Avatar.Root>
+ * ```
+ */
+type AvatarAppearance = "circle" | "square";
+/**
+ * The props for `Avatar.Root`. A `<span>`'s props — so `className`, `style`,
+ * `ref`, `asChild`, and any `data-*` or `aria-*` reach the rendered element —
+ * plus the shape and swatch this root owns.
+ */
+type AvatarRootProps = ComponentProps<"span"> & WithAsChild & WithDataSlot & {
+  /**
+   * The shape to render. `"circle"` for a person, `"square"` for a rounded
+   * square representing an account, workspace, or team.
+   *
+   * @default "circle"
+   */
+  appearance?: AvatarAppearance;
+  /**
+   * A stable identifier — an account id, a user id — that deterministically
+   * selects a background swatch, so the same subject always gets the same
+   * color with nothing persisted. Omit it for a neutral surface, or set your
+   * own `bg-*` class through `className` to opt out entirely.
+   *
+   * Seed it with an **id, not a display name**: names get edited, and a
+   * rename would silently recolor the avatar.
+   */
+  colorSeed?: string;
+};
+/**
+ * A small image representing a person or an account, with a text or icon
+ * fallback for when there is no picture — or before one loads.
+ *
+ * The root sizes and shapes the avatar and paints the surface behind it. It is
+ * `size-7` and `shrink-0` by default: an avatar is a fixed-size visual, and the
+ * flex rows it usually sits in (a switcher row, a table cell, a comment header)
+ * must not be able to squeeze it. Override the size with `className`, which
+ * merges last and wins.
+ *
+ * It renders a `<span>`, not a `<div>`, so it stays valid inside the `<button>`
+ * of a switcher row.
+ *
+ * @see https://mantle.ngrok.com/components/data-display/avatar#avatarroot
+ *
+ * **Data attributes:**
+ *
+ * | Data Attribute | Value      | Description                                             |
+ * | -------------- | ---------- | ------------------------------------------------------- |
+ * | `data-slot`    | `"avatar"` | Styling and test-targeting hook, with any forwarded chain ahead of it. |
+ *
+ * @example
+ * ```tsx
+ * <Avatar.Root appearance="square" colorSeed="acc_123">
+ *   <Avatar.Image src="https://example.com/acme.png" alt="" />
+ *   <Avatar.Fallback name="Acme Corp" />
+ * </Avatar.Root>
+ * ```
+ */
+declare const Root: ({ appearance, asChild, className, colorSeed, "data-slot": dataSlot, ...props }: AvatarRootProps) => import("react").JSX.Element;
+/**
+ * The props for `Avatar.Image`. An `<img>`'s props — so `srcSet`, `sizes`,
+ * `loading`, `referrerPolicy`, `crossOrigin`, `className`, `style`, `ref`,
+ * `asChild`, and any `data-*` reach the element — with `alt` promoted to
+ * required.
+ */
+type AvatarImageProps = Omit<ComponentProps<"img">, "alt" | "onError"> & WithAsChild & WithDataSlot & {
+  /**
+   * The image's alternative text. **Required**, deliberately stricter than the
+   * `<img>` element: an avatar is the one image a developer reliably forgets,
+   * and an `<img>` with no `alt` announces its URL.
+   *
+   * Pass `alt=""` when adjacent text already names the subject — the common
+   * case, and the reason this is not just "always pass the name". Pass the name
+   * when the avatar stands alone, and name `Avatar.Root` as well (`role="img"`
+   * + `aria-label`) so the label survives the states where the image is gone.
+   */
+  alt: string;
+  /**
+   * Called when the image fails to load, **before** it unmounts itself.
+   * `preventDefault()` keeps it mounted, for a consumer who would rather retry
+   * a URL than fall back.
+   *
+   * Typed against `HTMLElement` rather than `HTMLImageElement`, because
+   * `asChild` means the element that failed may be a consumer's own.
+   */
+  onError?: ReactEventHandler<HTMLElement>;
+};
+/**
+ * The avatar's picture, layered over `Avatar.Fallback` so the fallback shows
+ * through until the image paints. It is a plain `<img>` in the markup, which is
+ * the whole point: the server renders it, the browser starts fetching while it
+ * parses the HTML, and a cached image is *there* on the first frame — no
+ * hydration, no swap, no flash of initials.
+ *
+ * A failed load unmounts the image and leaves the fallback showing. That covers
+ * every failure the client can observe; one it cannot is a load that fails
+ * *before* hydration, where the error event has already come and gone. There the
+ * browser's own rendering stands, which for `alt=""` is nothing at all — the
+ * fallback shows through — and is one more reason to prefer `alt=""`
+ * whenever adjacent text names the subject.
+ *
+ * `onError` runs first and can `preventDefault()` to keep the image mounted, for
+ * a consumer who would rather retry a URL than fall back. Changing `src` is
+ * always a fresh attempt: only the exact URL that failed stays unmounted.
+ *
+ * @see https://mantle.ngrok.com/components/data-display/avatar#avatarimage
+ *
+ * **Data attributes:**
+ *
+ * | Data Attribute | Value            | Description                                             |
+ * | -------------- | ---------------- | ------------------------------------------------------- |
+ * | `data-slot`    | `"avatar-image"` | Styling and test-targeting hook, with any forwarded chain ahead of it. |
+ *
+ * @example
+ * ```tsx
+ * <Avatar.Root appearance="square" colorSeed="acc_123">
+ *   <Avatar.Image src="https://example.com/acme.png" alt="" />
+ *   <Avatar.Fallback name="Acme Corp" />
+ * </Avatar.Root>
+ * ```
+ */
+declare const Image: ({ asChild, className, "data-slot": dataSlot, onError, src, ...props }: AvatarImageProps) => import("react").JSX.Element | null;
+/**
+ * The props for `Avatar.Fallback`. A `<span>`'s props, with the content stated
+ * exactly one way: either `children` you render yourself, or a `name` this part
+ * derives initials from. Passing both would leave the winner to precedence, so
+ * the type forbids it — and `asChild`, which needs a real element to clone,
+ * belongs to the `children` side only.
+ */
+type AvatarFallbackProps = Omit<ComponentProps<"span">, "children"> & WithDataSlot & ({
+  /**
+   * Render this element instead of the fallback's own `<span>`. Only
+   * available beside `children` — there has to be an element to clone.
+   */
+  asChild?: boolean;
+  /**
+   * What to show when there is no image: initials, an icon, anything.
+   * When the content is only the subject's initials, use `name` instead.
+   */
+  children: ReactNode;
+  name?: never;
+} | {
+  asChild?: never;
+  children?: never;
+  /**
+   * The subject's display name, rendered as at most two uppercase
+   * initials — `"Acme Corp"` becomes `"AC"`, a name with no usable
+   * characters becomes `"?"`. Deriving it here keeps one implementation
+   * of a surprisingly fiddly rule (punctuation, code points, and casing
+   * that has to match between server and client).
+   *
+   * Initials derived this way are `aria-hidden`: they abbreviate a name
+   * the page already carries in text beside the avatar. When the avatar
+   * is the only thing naming its subject, name it — `role="img"` plus
+   * `aria-label` on `Avatar.Root` — rather than announcing `"AC"`.
+   */
+  name: string;
+});
+/**
+ * What the avatar shows when there is no picture — initials, an icon, a
+ * monogram. It always renders, sitting *behind* `Avatar.Image`: that is what
+ * makes a loading image show initials instead of an empty box, with no loading
+ * state for anyone to handle. A loaded image covers it, so give a transparent
+ * PNG its own backdrop if you would rather not see initials through it.
+ *
+ * Pass `name` to render the subject's initials, or `children` for anything else.
+ * A fallback is decorative when adjacent text already names the subject, so
+ * unless the avatar is the only label, give an icon child `aria-hidden`.
+ *
+ * @see https://mantle.ngrok.com/components/data-display/avatar#avatarfallback
+ *
+ * **Data attributes:**
+ *
+ * | Data Attribute | Value               | Description                                             |
+ * | -------------- | ------------------- | ------------------------------------------------------- |
+ * | `data-slot`    | `"avatar-fallback"` | Styling and test-targeting hook, with any forwarded chain ahead of it. |
+ *
+ * @example
+ * ```tsx
+ * <Avatar.Root appearance="square" colorSeed="acc_123">
+ *   <Avatar.Image src="https://example.com/acme.png" alt="" />
+ *   <Avatar.Fallback name="Acme Corp" />
+ * </Avatar.Root>
+ * ```
+ */
+declare const Fallback: ({ asChild, children, className, "data-slot": dataSlot, name, ...props }: AvatarFallbackProps) => import("react").JSX.Element;
+/**
+ * A small image representing a person or an account, with a text or icon
+ * fallback for when there is no picture — or before one loads.
+ *
+ * `appearance` carries the meaning: `"circle"` for a person, `"square"` (a
+ * rounded square) for an account, workspace, team, or organization. A row that
+ * shows both — an account switcher with the signed-in user's photo beside it —
+ * stays readable without labels because the shapes differ.
+ *
+ * `colorSeed` gives a subject a stable color derived from its id, so the same
+ * account is the same color on every device with nothing stored. Omit it for a
+ * neutral surface.
+ *
+ * The picture is a plain `<img>` layered over the fallback, so the server
+ * renders it and a cached image is on screen in the first frame. There is no
+ * loading state to handle: the fallback is behind, and shows until the
+ * image paints.
+ *
+ * For a person's name and title beside their avatar, compose it with
+ * [MediaObject](https://mantle.ngrok.com/components/structure/media-object).
+ * For the leading visual of a sidebar switcher row, put it inside
+ * [Sidebar.SwitcherTrigger](https://mantle.ngrok.com/components/navigation/sidebar#sidebarswitchertrigger).
+ *
+ * @see https://mantle.ngrok.com/components/data-display/avatar
+ *
+ * @example
+ * Composition:
+ * ```
+ * Avatar.Root
+ * ├── Avatar.Image
+ * └── Avatar.Fallback
+ * ```
+ *
+ * @example
+ * ```tsx
+ * <Avatar.Root appearance="square" colorSeed="acc_123">
+ *   <Avatar.Image src="https://example.com/acme.png" alt="" />
+ *   <Avatar.Fallback name="Acme Corp" />
+ * </Avatar.Root>
+ * ```
+ */
+declare const Avatar: {
+  /**
+   * A small image representing a person or an account, with a text or icon
+   * fallback for when there is no picture — or before one loads.
+   *
+   * The root sizes and shapes the avatar and paints the surface behind it. It is
+   * `size-7` and `shrink-0` by default: an avatar is a fixed-size visual, and the
+   * flex rows it usually sits in must not be able to squeeze it. Override the
+   * size with `className`, which merges last and wins. It renders a `<span>`, so
+   * it stays valid inside the `<button>` of a switcher row.
+   *
+   * @see https://mantle.ngrok.com/components/data-display/avatar#avatarroot
+   *
+   * **Data attributes:**
+   *
+   * | Data Attribute | Value      | Description                                             |
+   * | -------------- | ---------- | ------------------------------------------------------- |
+   * | `data-slot`    | `"avatar"` | Styling and test-targeting hook, with any forwarded chain ahead of it. |
+   *
+   * @example
+   * ```tsx
+   * <Avatar.Root appearance="square" colorSeed="acc_123">
+   *   <Avatar.Image src="https://example.com/acme.png" alt="" />
+   *   <Avatar.Fallback name="Acme Corp" />
+   * </Avatar.Root>
+   * ```
+   */
+  readonly Root: typeof Root;
+  /**
+   * The avatar's picture, layered over `Avatar.Fallback` so the fallback shows
+   * through until the image paints. A plain `<img>` in the markup: the server
+   * renders it, and a cached image needs no hydration to appear. A failed load
+   * unmounts it and leaves the fallback showing.
+   *
+   * @see https://mantle.ngrok.com/components/data-display/avatar#avatarimage
+   *
+   * **Data attributes:**
+   *
+   * | Data Attribute | Value            | Description                                             |
+   * | -------------- | ---------------- | ------------------------------------------------------- |
+   * | `data-slot`    | `"avatar-image"` | Styling and test-targeting hook, with any forwarded chain ahead of it. |
+   *
+   * @example
+   * ```tsx
+   * <Avatar.Root appearance="square" colorSeed="acc_123">
+   *   <Avatar.Image src="https://example.com/acme.png" alt="" />
+   *   <Avatar.Fallback name="Acme Corp" />
+   * </Avatar.Root>
+   * ```
+   */
+  readonly Image: typeof Image;
+  /**
+   * What the avatar shows when there is no picture — initials, an icon, a
+   * monogram. It always renders, behind `Avatar.Image`, which is what makes a
+   * loading image show initials rather than an empty box. Pass `name` to render
+   * the subject's initials, or `children` for anything else.
+   *
+   * @see https://mantle.ngrok.com/components/data-display/avatar#avatarfallback
+   *
+   * **Data attributes:**
+   *
+   * | Data Attribute | Value               | Description                                             |
+   * | -------------- | ------------------- | ------------------------------------------------------- |
+   * | `data-slot`    | `"avatar-fallback"` | Styling and test-targeting hook, with any forwarded chain ahead of it. |
+   *
+   * @example
+   * ```tsx
+   * <Avatar.Root appearance="square" colorSeed="acc_123">
+   *   <Avatar.Image src="https://example.com/acme.png" alt="" />
+   *   <Avatar.Fallback name="Acme Corp" />
+   * </Avatar.Root>
+   * ```
+   */
+  readonly Fallback: typeof Fallback;
+};
+//#endregion
+export { Avatar, type AvatarAppearance, type AvatarFallbackProps, type AvatarImageProps, type AvatarRootProps };

package/dist/avatar.js

@@ -0,0 +1 @@
+import{t as e}from"./cx-IiQEAKf5.js";import{t}from"./data-slot-EM6s2WEU.js";import{t as n}from"./slot-DpNWVci8.js";import{useState as r}from"react";import{jsx as i}from"react/jsx-runtime";const a={circle:`rounded-full`,square:`rounded-md`},o=[`bg-emerald-500`,`bg-gray-500`,`bg-red-500`,`bg-violet-500`,`bg-cyan-500`,`bg-rose-500`,`bg-purple-500`,`bg-fuchsia-500`,`bg-green-500`,`bg-orange-500`,`bg-indigo-500`,`bg-teal-500`,`bg-yellow-500`,`bg-sky-500`,`bg-pink-500`,`bg-blue-500`,`bg-amber-500`];function s(e){let t=5381;for(let n=0;n<e.length;n+=1)t=t*33^e.charCodeAt(n);return t>>>0}function c(e){let t=s(e)%o.length;return o[t]??`bg-neutral-500`}function l(e){return e.replace(/[\p{P}`~!@#$%^&*+|=<>]/gu,``).trim().split(/\s+/).slice(0,2).map(e=>Array.from(e.toUpperCase())[0]??``).join(``)||`?`}const u={Root:({appearance:r=`circle`,asChild:o,className:s,colorSeed:l,"data-slot":u,...d})=>i(o?n:`span`,{className:e(`text-body bg-neutral-500/15 relative flex size-7 shrink-0 items-center justify-center overflow-hidden text-xs font-medium select-none`,a[r],l!=null&&[`text-static-white`,c(l)],s),"data-slot":t(u,`avatar`),...d}),Image:({asChild:a,className:o,"data-slot":s,onError:c,src:l,...u})=>{let[d,f]=r();return l==null||l===``||l===d?null:i(a?n:`img`,{className:e(`absolute inset-0 size-full object-cover`,o),"data-slot":t(s,`avatar-image`),onError:e=>{c?.(e),e.defaultPrevented||f(l)},src:l,...u})},Fallback:({asChild:r,children:a,className:o,"data-slot":s,name:c,...u})=>i(r?n:`span`,{"aria-hidden":c!=null||void 0,className:e(`flex size-full items-center justify-center`,o),"data-slot":t(s,`avatar-fallback`),...u,children:c==null?a:l(c)})};export{u as Avatar};

package/dist/badge.js

@@ -1 +1 @@
-import{t as e}from"./cx-IiQEAKf5.js";import{t}from"./icon-d-nMCfAI.js";import{t as n}from"./slot-Dpsqz16D.js";import{Children as r,cloneElement as i,isValidElement as a}from"react";import o from"tiny-invariant";import{Fragment as s,jsx as c,jsxs as l}from"react/jsx-runtime";const u=({appearance:u,asChild:d=!1,children:p,className:h,color:g=`neutral`,icon:_,...v})=>{let y=f(g,u),b=m(g,u),x=e(`inline-flex w-fit shrink-0 cursor-default items-center gap-1 rounded px-1.5 py-0.5 font-medium text-xs font-sans`,_&&`ps-1`,y,b,h);if(d){let e=r.only(p);o(a(e),"When using `asChild`, Badge must be passed a single child as a JSX tag.");let u=e.props?.children;return c(n,{"data-slot":`badge`,className:x,...v,children:i(e,{},l(s,{children:[_&&c(t,{className:`size-4`,svg:_}),u]}))})}return l(`span`,{"data-slot":`badge`,className:x,...v,children:[_&&c(t,{className:`size-4`,svg:_}),p]})},d={amber:`bg-amber-500/20`,blue:`bg-blue-500/20`,cyan:`bg-cyan-500/20`,emerald:`bg-emerald-500/20`,fuchsia:`bg-fuchsia-500/20`,gray:`bg-gray-500/20`,green:`bg-green-500/20`,indigo:`bg-indigo-500/20`,lime:`bg-lime-500/20`,orange:`bg-orange-500/20`,pink:`bg-pink-500/20`,purple:`bg-purple-500/20`,red:`bg-red-500/20`,rose:`bg-rose-500/20`,sky:`bg-sky-500/20`,teal:`bg-teal-500/20`,violet:`bg-violet-500/20`,yellow:`bg-yellow-500/20`,accent:`bg-accent-500/20`,danger:`bg-danger-500/20`,important:`bg-important-500/20`,info:`bg-info-500/20`,neutral:`bg-neutral-500/20`,success:`bg-success-500/20`,warning:`bg-warning-500/20`};function f(e,t){switch(t){case`muted`:return d[e];default:o(!1,`Invalid appearance: ${String(t)}`)}}const p={amber:`text-amber-700`,blue:`text-blue-700`,cyan:`text-cyan-700`,emerald:`text-emerald-700`,fuchsia:`text-fuchsia-700`,gray:`text-gray-700`,green:`text-green-700`,indigo:`text-indigo-700`,lime:`text-lime-700`,orange:`text-orange-700`,pink:`text-pink-700`,purple:`text-purple-700`,red:`text-red-700`,rose:`text-rose-700`,sky:`text-sky-700`,teal:`text-teal-700`,violet:`text-violet-700`,yellow:`text-yellow-700`,accent:`text-accent-700`,danger:`text-danger-700`,important:`text-important-700`,info:`text-info-700`,neutral:`text-neutral-700`,success:`text-success-700`,warning:`text-warning-700`};function m(e,t){switch(t){case`muted`:return p[e];default:o(!1,`Invalid appearance: ${String(t)}`)}}export{u as Badge};
+import{t as e}from"./cx-IiQEAKf5.js";import{t}from"./icon-d-nMCfAI.js";import{t as n}from"./slot-DpNWVci8.js";import{Children as r,cloneElement as i,isValidElement as a}from"react";import o from"tiny-invariant";import{Fragment as s,jsx as c,jsxs as l}from"react/jsx-runtime";const u=({appearance:u,asChild:d=!1,children:p,className:h,color:g=`neutral`,icon:_,...v})=>{let y=f(g,u),b=m(g,u),x=e(`inline-flex w-fit shrink-0 cursor-default items-center gap-1 rounded px-1.5 py-0.5 font-medium text-xs font-sans`,_&&`ps-1`,y,b,h);if(d){let e=r.only(p);o(a(e),"When using `asChild`, Badge must be passed a single child as a JSX tag.");let u=e.props?.children;return c(n,{"data-slot":`badge`,className:x,...v,children:i(e,{},l(s,{children:[_&&c(t,{className:`size-4`,svg:_}),u]}))})}return l(`span`,{"data-slot":`badge`,className:x,...v,children:[_&&c(t,{className:`size-4`,svg:_}),p]})},d={amber:`bg-amber-500/20`,blue:`bg-blue-500/20`,cyan:`bg-cyan-500/20`,emerald:`bg-emerald-500/20`,fuchsia:`bg-fuchsia-500/20`,gray:`bg-gray-500/20`,green:`bg-green-500/20`,indigo:`bg-indigo-500/20`,lime:`bg-lime-500/20`,orange:`bg-orange-500/20`,pink:`bg-pink-500/20`,purple:`bg-purple-500/20`,red:`bg-red-500/20`,rose:`bg-rose-500/20`,sky:`bg-sky-500/20`,teal:`bg-teal-500/20`,violet:`bg-violet-500/20`,yellow:`bg-yellow-500/20`,accent:`bg-accent-500/20`,danger:`bg-danger-500/20`,important:`bg-important-500/20`,info:`bg-info-500/20`,neutral:`bg-neutral-500/20`,success:`bg-success-500/20`,warning:`bg-warning-500/20`};function f(e,t){switch(t){case`muted`:return d[e];default:o(!1,`Invalid appearance: ${String(t)}`)}}const p={amber:`text-amber-700`,blue:`text-blue-700`,cyan:`text-cyan-700`,emerald:`text-emerald-700`,fuchsia:`text-fuchsia-700`,gray:`text-gray-700`,green:`text-green-700`,indigo:`text-indigo-700`,lime:`text-lime-700`,orange:`text-orange-700`,pink:`text-pink-700`,purple:`text-purple-700`,red:`text-red-700`,rose:`text-rose-700`,sky:`text-sky-700`,teal:`text-teal-700`,violet:`text-violet-700`,yellow:`text-yellow-700`,accent:`text-accent-700`,danger:`text-danger-700`,important:`text-important-700`,info:`text-info-700`,neutral:`text-neutral-700`,success:`text-success-700`,warning:`text-warning-700`};function m(e,t){switch(t){case`muted`:return p[e];default:o(!1,`Invalid appearance: ${String(t)}`)}}export{u as Badge};