@ngrok/mantle 0.79.3 → 0.81.0

package/dist/area-chart.d.ts

@@ -0,0 +1,504 @@
+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 ChartAccessibleName } from "./chart-BcOC6Qj0.js";
+//#region src/components/area-chart/area-chart.d.ts
+/**
+ * Props for {@link AreaChart.Root}. Areas fill from a shared zero baseline, so
+ * the y domain minimum is fixed at `0` — a truncated-area axis is
+ * unrepresentable.
+ */
+type AreaChartRootProps<TDatum extends ChartDatum = ChartDatum> = Omit<ChartRootBaseProps, "yDomain"> & ChartAccessibleName & {
+  /** Rows of data; each `AreaChart.Area` reads one numeric key per row. */
+  data: readonly TDatum[];
+  /** The key of each row's x value. */
+  xKey: Extract<keyof TDatum, string>;
+  /**
+   * Override the auto-detected x scale (`Date` values → `"time"`, numbers →
+   * `"linear"`, strings → `"point"`).
+   */
+  xScale?: ContinuousXScale;
+  /** Override the automatic y maximum. The minimum is always the zero baseline. */
+  yDomain?: [0, number | "auto"];
+};
+/**
+ * Props for {@link AreaChart.Area}.
+ */
+type AreaChartAreaProps = {
+  /** The row key this series reads its numeric values from. */
+  dataKey: string;
+  /** 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.
+   */
+  color?: SeriesColor;
+  /**
+   * Interpolation between points: `"linear"` (default), `"monotone"`
+   * (smoothed), or `"step"`.
+   */
+  curve?: CurveKind;
+  /**
+   * Join across `null`/missing values instead of leaving gaps. Gaps are the
+   * default and usually correct.
+   */
+  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.
+   */
+  shape?: PointShape;
+};
+/**
+ * Props for {@link AreaChart.Grid}.
+ */
+type AreaChartGridProps = GridPrimitiveProps;
+/**
+ * Props for {@link AreaChart.XAxis}. The tick formatter receives the row's x
+ * value — the category value on point scales, a `Date` on time scales, and a
+ * number on linear scales.
+ */
+type AreaChartXAxisProps = XAxisPrimitiveProps;
+/**
+ * Props for {@link AreaChart.YAxis}.
+ */
+type AreaChartYAxisProps = YAxisPrimitiveProps;
+/**
+ * Props for {@link AreaChart.ReferenceLine}.
+ */
+type AreaChartReferenceLineProps = ReferenceLinePrimitiveProps;
+/**
+ * Props for {@link AreaChart.Tooltip}.
+ */
+type AreaChartTooltipProps = TooltipPrimitiveProps;
+/**
+ * Props for {@link AreaChart.Legend}.
+ */
+type AreaChartLegendProps = LegendPrimitiveProps;
+/**
+ * Props for {@link AreaChart.CopyButton}.
+ */
+type AreaChartCopyButtonProps = CopyButtonPrimitiveProps;
+/**
+ * The root of an area chart: owns the data, the scales, the canvas renderer,
+ * and the entire interaction contract (a crosshair with an every-series
+ * 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.
+ *
+ * @see https://mantle.ngrok.com/components/charts/area-chart#areachartroot
+ *
+ * @example
+ * ```tsx
+ * const data = [
+ *   { date: new Date("2026-07-15"), http: 4200, tcp: 1400 },
+ *   { date: new Date("2026-07-16"), http: 5100, tcp: 1650 },
+ *   { date: new Date("2026-07-17"), http: 4700, tcp: 1500 },
+ * ];
+ *
+ * <AreaChart.Root data={data} xKey="date" stacked aria-label="Traffic by protocol">
+ *   <AreaChart.Grid />
+ *   <AreaChart.XAxis />
+ *   <AreaChart.YAxis />
+ *   <AreaChart.Area dataKey="http" label="HTTP" />
+ *   <AreaChart.Area dataKey="tcp" label="TCP" />
+ *   <AreaChart.Tooltip />
+ *   <AreaChart.Legend />
+ * </AreaChart.Root>
+ * ```
+ */
+declare const Root: <TDatum extends ChartDatum = ChartDatum>(props: AreaChartRootProps<TDatum>) => import("react").JSX.Element;
+/**
+ * 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.
+ *
+ * @see https://mantle.ngrok.com/components/charts/area-chart#areachartarea
+ *
+ * @example
+ * ```tsx
+ * <AreaChart.Root data={data} xKey="date" stacked aria-label="Traffic by protocol">
+ *   <AreaChart.Grid />
+ *   <AreaChart.XAxis />
+ *   <AreaChart.YAxis />
+ *   <AreaChart.Area dataKey="http" label="HTTP" />
+ *   <AreaChart.Area dataKey="tcp" label="TCP" />
+ *   <AreaChart.Tooltip />
+ *   <AreaChart.Legend />
+ * </AreaChart.Root>
+ * ```
+ */
+declare const Area: (props: AreaChartAreaProps) => null;
+/**
+ * Horizontal hairline gridlines behind the areas (renderless; painted on
+ * canvas). Omit the part to omit the grid.
+ *
+ * @see https://mantle.ngrok.com/components/charts/area-chart#areachartgrid
+ *
+ * @example
+ * ```tsx
+ * <AreaChart.Root data={data} xKey="date" stacked aria-label="Traffic by protocol">
+ *   <AreaChart.Grid />
+ *   <AreaChart.XAxis />
+ *   <AreaChart.YAxis />
+ *   <AreaChart.Area dataKey="http" label="HTTP" />
+ *   <AreaChart.Area dataKey="tcp" label="TCP" />
+ *   <AreaChart.Tooltip />
+ *   <AreaChart.Legend />
+ * </AreaChart.Root>
+ * ```
+ */
+declare const Grid: (props: AreaChartGridProps) => null;
+/**
+ * Tick labels along the bottom of the plot (renderless; painted on canvas).
+ * Labels that would collide are skipped, never rotated.
+ *
+ * @see https://mantle.ngrok.com/components/charts/area-chart#areachartxaxis
+ *
+ * @example
+ * ```tsx
+ * <AreaChart.Root data={data} xKey="date" stacked aria-label="Traffic by protocol">
+ *   <AreaChart.Grid />
+ *   <AreaChart.XAxis tickFormat={(date) => new Date(date).toLocaleDateString()} />
+ *   <AreaChart.YAxis />
+ *   <AreaChart.Area dataKey="http" label="HTTP" />
+ *   <AreaChart.Area dataKey="tcp" label="TCP" />
+ *   <AreaChart.Tooltip />
+ *   <AreaChart.Legend />
+ * </AreaChart.Root>
+ * ```
+ */
+declare const XAxis: (props: AreaChartXAxisProps) => null;
+/**
+ * Value tick labels along the left of the plot (renderless; painted on
+ * canvas). Ticks land on clean thousands-separated numbers.
+ *
+ * @see https://mantle.ngrok.com/components/charts/area-chart#areachartyaxis
+ *
+ * @example
+ * ```tsx
+ * <AreaChart.Root data={data} xKey="date" stacked aria-label="Traffic by protocol">
+ *   <AreaChart.Grid />
+ *   <AreaChart.XAxis />
+ *   <AreaChart.YAxis tickFormat={(value) => `${value / 1000}k`} />
+ *   <AreaChart.Area dataKey="http" label="HTTP" />
+ *   <AreaChart.Area dataKey="tcp" label="TCP" />
+ *   <AreaChart.Tooltip />
+ *   <AreaChart.Legend />
+ * </AreaChart.Root>
+ * ```
+ */
+declare const YAxis: (props: AreaChartYAxisProps) => null;
+/**
+ * A dashed horizontal marker at a y value — an SLO threshold, a budget, a
+ * limit (renderless; painted on canvas).
+ *
+ * @see https://mantle.ngrok.com/components/charts/area-chart#areachartreferenceline
+ *
+ * @example
+ * ```tsx
+ * <AreaChart.Root data={data} xKey="date" stacked aria-label="Traffic by protocol">
+ *   <AreaChart.Grid />
+ *   <AreaChart.XAxis />
+ *   <AreaChart.YAxis />
+ *   <AreaChart.Area dataKey="http" label="HTTP" />
+ *   <AreaChart.Area dataKey="tcp" label="TCP" />
+ *   <AreaChart.ReferenceLine y={6000} label="Capacity" />
+ *   <AreaChart.Tooltip />
+ *   <AreaChart.Legend />
+ * </AreaChart.Root>
+ * ```
+ */
+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`.
+ *
+ * @see https://mantle.ngrok.com/components/charts/area-chart#areacharttooltip
+ *
+ * @example
+ * ```tsx
+ * <AreaChart.Root data={data} xKey="date" stacked aria-label="Traffic by protocol">
+ *   <AreaChart.Grid />
+ *   <AreaChart.XAxis />
+ *   <AreaChart.YAxis />
+ *   <AreaChart.Area dataKey="http" label="HTTP" />
+ *   <AreaChart.Area dataKey="tcp" label="TCP" />
+ *   <AreaChart.Tooltip valueFormat={(value) => `${value} requests`} footer="Click to view logs" />
+ *   <AreaChart.Legend />
+ * </AreaChart.Root>
+ * ```
+ */
+declare const Tooltip: (props: AreaChartTooltipProps) => null;
+/**
+ * The legend: series names keyed by color swatches, rendered as real DOM in
+ * flow below the plot. Always compose it on multi-series charts — identity
+ * must never rely on color-matching alone. It renders nothing for a single
+ * series (the chart's title already names it).
+ *
+ * @see https://mantle.ngrok.com/components/charts/area-chart#areachartlegend
+ *
+ * @example
+ * ```tsx
+ * <AreaChart.Root data={data} xKey="date" stacked aria-label="Traffic by protocol">
+ *   <AreaChart.Grid />
+ *   <AreaChart.XAxis />
+ *   <AreaChart.YAxis />
+ *   <AreaChart.Area dataKey="http" label="HTTP" />
+ *   <AreaChart.Area dataKey="tcp" label="TCP" />
+ *   <AreaChart.Tooltip />
+ *   <AreaChart.Legend />
+ * </AreaChart.Root>
+ * ```
+ */
+declare const Legend: (props: AreaChartLegendProps) => import("react").JSX.Element;
+/**
+ * A button that copies the chart's current data to the clipboard as a
+ * markdown table (ISO dates, plain numbers, one column per series) —
+ * pasteable into Slack, issues, docs, spreadsheets, and LLM chats. Renders
+ * in flow where composed (alongside `Legend`, below the plot); `Root` is
+ * relatively positioned, so `className` can dock it over a corner instead
+ * (e.g. `absolute right-0 top-0`).
+ *
+ * @see https://mantle.ngrok.com/components/charts/area-chart#areachartcopybutton
+ *
+ * @example
+ * ```tsx
+ * <AreaChart.Root data={data} xKey="date" stacked aria-label="Traffic by protocol">
+ *   <AreaChart.Area dataKey="http" label="HTTP" />
+ *   <AreaChart.Area dataKey="tcp" label="TCP" />
+ *   <AreaChart.Legend />
+ *   <AreaChart.CopyButton />
+ * </AreaChart.Root>
+ * ```
+ */
+declare const CopyButton: (props: AreaChartCopyButtonProps) => import("react").JSX.Element;
+/**
+ * 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-*`
+ * 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.
+ *
+ * @see https://mantle.ngrok.com/components/charts/area-chart
+ *
+ * @example
+ * Composition:
+ * ```
+ * AreaChart.Root
+ * ├── AreaChart.Grid
+ * ├── AreaChart.XAxis
+ * ├── AreaChart.YAxis
+ * ├── AreaChart.Area (one per series)
+ * ├── AreaChart.ReferenceLine
+ * ├── AreaChart.Tooltip
+ * └── AreaChart.Legend
+ * ```
+ *
+ * @example
+ * ```tsx
+ * const data = [
+ *   { date: new Date("2026-07-15"), http: 4200, tcp: 1400 },
+ *   { date: new Date("2026-07-16"), http: 5100, tcp: 1650 },
+ *   { date: new Date("2026-07-17"), http: 4700, tcp: 1500 },
+ * ];
+ *
+ * <AreaChart.Root data={data} xKey="date" stacked aria-label="Traffic by protocol">
+ *   <AreaChart.Grid />
+ *   <AreaChart.XAxis />
+ *   <AreaChart.YAxis />
+ *   <AreaChart.Area dataKey="http" label="HTTP" />
+ *   <AreaChart.Area dataKey="tcp" label="TCP" />
+ *   <AreaChart.Tooltip />
+ *   <AreaChart.Legend />
+ * </AreaChart.Root>
+ * ```
+ */
+declare const AreaChart: {
+  /**
+   * The root of an area chart: owns the data, the scales, the canvas renderer,
+   * and the entire interaction contract.
+   *
+   * @see https://mantle.ngrok.com/components/charts/area-chart#areachartroot
+   *
+   * @example
+   * ```tsx
+   * <AreaChart.Root data={data} xKey="date" stacked aria-label="Traffic by protocol">
+   *   <AreaChart.Grid />
+   *   <AreaChart.XAxis />
+   *   <AreaChart.YAxis />
+   *   <AreaChart.Area dataKey="http" label="HTTP" />
+   *   <AreaChart.Area dataKey="tcp" label="TCP" />
+   *   <AreaChart.Tooltip />
+   *   <AreaChart.Legend />
+   * </AreaChart.Root>
+   * ```
+   */
+  readonly Root: typeof Root;
+  /**
+   * One area series; registers with the chart and paints on canvas.
+   *
+   * @see https://mantle.ngrok.com/components/charts/area-chart#areachartarea
+   *
+   * @example
+   * ```tsx
+   * <AreaChart.Root data={data} xKey="date" stacked aria-label="Traffic by protocol">
+   *   <AreaChart.Grid />
+   *   <AreaChart.XAxis />
+   *   <AreaChart.YAxis />
+   *   <AreaChart.Area dataKey="http" label="HTTP" />
+   *   <AreaChart.Area dataKey="tcp" label="TCP" />
+   *   <AreaChart.Tooltip />
+   *   <AreaChart.Legend />
+   * </AreaChart.Root>
+   * ```
+   */
+  readonly Area: typeof Area;
+  /**
+   * Hairline gridlines behind the areas.
+   *
+   * @see https://mantle.ngrok.com/components/charts/area-chart#areachartgrid
+   *
+   * @example
+   * ```tsx
+   * <AreaChart.Root data={data} xKey="date" stacked aria-label="Traffic by protocol">
+   *   <AreaChart.Grid />
+   *   <AreaChart.XAxis />
+   *   <AreaChart.YAxis />
+   *   <AreaChart.Area dataKey="http" label="HTTP" />
+   *   <AreaChart.Area dataKey="tcp" label="TCP" />
+   *   <AreaChart.Tooltip />
+   *   <AreaChart.Legend />
+   * </AreaChart.Root>
+   * ```
+   */
+  readonly Grid: typeof Grid;
+  /**
+   * Tick labels along the bottom of the plot.
+   *
+   * @see https://mantle.ngrok.com/components/charts/area-chart#areachartxaxis
+   *
+   * @example
+   * ```tsx
+   * <AreaChart.Root data={data} xKey="date" stacked aria-label="Traffic by protocol">
+   *   <AreaChart.Grid />
+   *   <AreaChart.XAxis tickFormat={(date) => new Date(date).toLocaleDateString()} />
+   *   <AreaChart.YAxis />
+   *   <AreaChart.Area dataKey="http" label="HTTP" />
+   *   <AreaChart.Area dataKey="tcp" label="TCP" />
+   *   <AreaChart.Tooltip />
+   *   <AreaChart.Legend />
+   * </AreaChart.Root>
+   * ```
+   */
+  readonly XAxis: typeof XAxis;
+  /**
+   * Value tick labels along the left of the plot.
+   *
+   * @see https://mantle.ngrok.com/components/charts/area-chart#areachartyaxis
+   *
+   * @example
+   * ```tsx
+   * <AreaChart.Root data={data} xKey="date" stacked aria-label="Traffic by protocol">
+   *   <AreaChart.Grid />
+   *   <AreaChart.XAxis />
+   *   <AreaChart.YAxis tickFormat={(value) => `${value / 1000}k`} />
+   *   <AreaChart.Area dataKey="http" label="HTTP" />
+   *   <AreaChart.Area dataKey="tcp" label="TCP" />
+   *   <AreaChart.Tooltip />
+   *   <AreaChart.Legend />
+   * </AreaChart.Root>
+   * ```
+   */
+  readonly YAxis: typeof YAxis;
+  /**
+   * A dashed horizontal marker at a y value (threshold, budget, limit).
+   *
+   * @see https://mantle.ngrok.com/components/charts/area-chart#areachartreferenceline
+   *
+   * @example
+   * ```tsx
+   * <AreaChart.Root data={data} xKey="date" stacked aria-label="Traffic by protocol">
+   *   <AreaChart.Grid />
+   *   <AreaChart.XAxis />
+   *   <AreaChart.YAxis />
+   *   <AreaChart.Area dataKey="http" label="HTTP" />
+   *   <AreaChart.Area dataKey="tcp" label="TCP" />
+   *   <AreaChart.ReferenceLine y={6000} label="Capacity" />
+   *   <AreaChart.Tooltip />
+   *   <AreaChart.Legend />
+   * </AreaChart.Root>
+   * ```
+   */
+  readonly ReferenceLine: typeof ReferenceLine;
+  /**
+   * Customizes the always-on hover/keyboard tooltip readout.
+   *
+   * @see https://mantle.ngrok.com/components/charts/area-chart#areacharttooltip
+   *
+   * @example
+   * ```tsx
+   * <AreaChart.Root data={data} xKey="date" stacked aria-label="Traffic by protocol">
+   *   <AreaChart.Grid />
+   *   <AreaChart.XAxis />
+   *   <AreaChart.YAxis />
+   *   <AreaChart.Area dataKey="http" label="HTTP" />
+   *   <AreaChart.Area dataKey="tcp" label="TCP" />
+   *   <AreaChart.Tooltip valueFormat={(value) => `${value} requests`} />
+   *   <AreaChart.Legend />
+   * </AreaChart.Root>
+   * ```
+   */
+  readonly Tooltip: typeof Tooltip;
+  /**
+   * The legend; always compose it on multi-series charts. Renders nothing for
+   * a single series.
+   *
+   * @see https://mantle.ngrok.com/components/charts/area-chart#areachartlegend
+   *
+   * @example
+   * ```tsx
+   * <AreaChart.Root data={data} xKey="date" stacked aria-label="Traffic by protocol">
+   *   <AreaChart.Grid />
+   *   <AreaChart.XAxis />
+   *   <AreaChart.YAxis />
+   *   <AreaChart.Area dataKey="http" label="HTTP" />
+   *   <AreaChart.Area dataKey="tcp" label="TCP" />
+   *   <AreaChart.Tooltip />
+   *   <AreaChart.Legend />
+   * </AreaChart.Root>
+   * ```
+   */
+  readonly Legend: typeof Legend;
+  /**
+   * Copies the chart's current data to the clipboard as a markdown table.
+   *
+   * @see https://mantle.ngrok.com/components/charts/area-chart#areachartcopybutton
+   *
+   * @example
+   * ```tsx
+   * <AreaChart.Root data={data} xKey="date" stacked aria-label="Traffic by protocol">
+   *   <AreaChart.Area dataKey="http" label="HTTP" />
+   *   <AreaChart.Area dataKey="tcp" label="TCP" />
+   *   <AreaChart.Legend />
+   *   <AreaChart.CopyButton />
+   * </AreaChart.Root>
+   * ```
+   */
+  readonly CopyButton: typeof CopyButton;
+};
+//#endregion
+export { AreaChart, type AreaChartAreaProps, type AreaChartCopyButtonProps, type AreaChartGridProps, type AreaChartLegendProps, type AreaChartReferenceLineProps, type AreaChartRootProps, type AreaChartTooltipProps, type AreaChartXAxisProps, type AreaChartYAxisProps, type ChartDatumEvent };

package/dist/area-chart.js

@@ -0,0 +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-BROa2gqt.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/as-child-D23mGo4f.d.ts

@@ -0,0 +1,49 @@
+import { ReactNode } from "react";
+//#region src/types/as-child.d.ts
+/**
+ * Utility type for adding the optional `asChild` boolean prop to a component.
+ */
+type WithAsChild = {
+  /**
+   * Use the `asChild` prop to compose component functionality onto alternative
+   * element types or your own React components.
+   *
+   * When `asChild` is set to `true`, mantle will not render a default DOM
+   * element, instead cloning the part's child and passing it the props and
+   * behavior required to make it functional.
+   *
+   * `asChild` can be used as deeply as you need to. This means it is a great way
+   * to compose multiple primitive's behavior together.
+   *
+   * @see https://www.radix-ui.com/docs/primitives/guides/composition#composition
+   */
+  asChild?: boolean;
+};
+/**
+ * Utility type for adding the optional `asChild` boolean prop to a component
+ * that is self-closing.
+ * This is useful for components that do not have children, but still need to
+ * support the `asChild` prop.
+ */
+type SelfClosingWithAsChild = {
+  /**
+   * Use the `asChild` prop to compose component functionality onto alternative
+   * element types or your own React components.
+   *
+   * When `asChild` is set to `true`, mantle will not render a default DOM
+   * element, instead cloning the part's child and passing it the props and
+   * behavior required to make it functional.
+   *
+   * `asChild` can be used as deeply as you need to. This means it is a great way
+   * to compose multiple primitive's behavior together.
+   *
+   * @see https://www.radix-ui.com/docs/primitives/guides/composition#composition
+   */
+  asChild: true;
+  children: ReactNode;
+} | {
+  asChild?: false | undefined;
+  children?: undefined;
+};
+//#endregion
+export { WithAsChild as n, SelfClosingWithAsChild as t };

package/dist/badge.d.ts

@@ -1,4 +1,4 @@
-import { t as WithAsChild } from "./as-child-CYEVu1WY.js";
+import { n as WithAsChild } from "./as-child-D23mGo4f.js";
 import { t as Color } from "./index-DorCusfG.js";
 import { ComponentProps, ReactNode } from "react";
 //#region src/components/badge/badge.d.ts
@@ -18,9 +18,48 @@ type BadgeProps = ComponentProps<"span"> & WithAsChild & {
    */
   appearance: Appearance;
 };
-declare function Badge({ appearance, asChild, children, className, color, icon, ...props }: BadgeProps): import("react").JSX.Element;
-declare namespace Badge {
-  var displayName: string;
-}
+/**
+ * A non-interactive label used to highlight short, scannable information —
+ * a status, a category tag, or a count — in the smallest possible footprint.
+ *
+ * **When to use**
+ * - Status indicators: `Succeeded`, `Failed`, `Pending`, `Beta`.
+ * - Category or tag chips alongside list items, table rows, or cards.
+ * - Counts (e.g. `12 new`) when paired with brief context.
+ *
+ * **When not to use**
+ * - For interactive UI. Badges are not buttons or links — use {@link https://mantle.ngrok.com/components/actions/button Button}
+ *   or {@link https://mantle.ngrok.com/components/navigation/anchor Anchor} (optionally with `asChild` styling) instead.
+ * - For long-form text. Keep labels to one or two short words.
+ * - As the sole signal of meaning. Pair color with a label or icon so the
+ *   distinction works without color (color blindness, monochrome themes).
+ *
+ * **Choosing a `color`.** Prefer functional colors (`success`, `warning`,
+ * `danger`, `info`, `accent`, `neutral`) for status meaning so theming
+ * stays coherent. Reach for named hues only when the badge's semantic role
+ * isn't already covered.
+ *
+ * **Polymorphism.** Pass `asChild` to render the badge as a single child
+ * element — useful when the badge wraps a link or other semantic element
+ * while keeping the badge styling.
+ *
+ * @see https://mantle.ngrok.com/components/data-display/badge
+ *
+ * @example
+ * ```tsx
+ * import { Badge } from "@ngrok/mantle/badge";
+ * import { CheckCircleIcon } from "@phosphor-icons/react/CheckCircle";
+ *
+ * <Badge appearance="muted" color="success" icon={<CheckCircleIcon />}>
+ *   Succeeded
+ * </Badge>
+ *
+ * // Polymorphic — render the badge as a link, preserving its styling.
+ * <Badge appearance="muted" color="info" asChild>
+ *   <a href="/status">Operational</a>
+ * </Badge>
+ * ```
+ */
+declare const Badge: ({ appearance, asChild, children, className, color, icon, ...props }: BadgeProps) => import("react").JSX.Element;
 //#endregion
 export { Badge, type BadgeProps };

package/dist/badge.js

@@ -1 +1 @@
-import{t as e}from"./cx-IiQEAKf5.js";import{t}from"./svg-only-DDx6FtJd.js";import{t as n}from"./slot-DmPrjM7N.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]})};u.displayName=`Badge`;const 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-CDk0Bb9z.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};