@photon-ai/pho-ui 2.11.0 → 2.13.0

package/dist/src/components/chart/legend.d.ts

@@ -0,0 +1,26 @@
+import { ComponentProps } from 'react';
+/** A legend or tooltip key mirrors its mark: a square for a bar, a stroke for a line. */
+export type ChartSwatchKind = "rect" | "line";
+export interface ChartSwatchProps {
+    /** A CSS colour value — what `chartColor` returns. */
+    color: string;
+    kind?: ChartSwatchKind;
+    dashed?: boolean;
+}
+export declare function ChartSwatch({ color, kind, dashed, }: ChartSwatchProps): import("react").JSX.Element;
+export interface ChartLegendItem {
+    label: string;
+    /** A CSS colour value — what `chartColor` returns. */
+    color: string;
+    kind?: ChartSwatchKind;
+    dashed?: boolean;
+}
+export interface ChartLegendProps extends Omit<ComponentProps<"ul">, "children"> {
+    items: ReadonlyArray<ChartLegendItem>;
+}
+/**
+ * The legend a chart of two or more series carries below the plot: a key
+ * per series, in series order, wrapping when the row runs out. Text stays
+ * in the UI ink; the swatch alone carries the colour.
+ */
+export declare function ChartLegend({ items, className, ...props }: ChartLegendProps): import("react").JSX.Element;

package/dist/src/components/chart/scale.d.ts

@@ -0,0 +1,34 @@
+/** Epoch milliseconds for a datum's `x`. */
+export declare function toTime(x: Date | number): number;
+/** A linear map from `domain` to `range`; a flat domain maps to its start. */
+export declare function linearScale(domain: readonly [number, number], range: readonly [number, number]): (value: number) => number;
+/**
+ * A y domain on round numbers with three to five ticks, the last tick on
+ * or above the data's high end so the top of the plot is labelled.
+ */
+export declare function niceLinearDomain(min: number, max: number): {
+    domain: [number, number];
+    ticks: number[];
+};
+/** The gap between buckets, in ms — the median step, so one hole doesn't skew it. */
+export declare function bucketSpan(times: ReadonlyArray<number>): number;
+/**
+ * Time ticks for a plot `width` px wide: one every ~96px, on the round
+ * boundaries d3-time picks (5 minutes, an hour, a day, a month…).
+ */
+export declare function timeAxisTicks(start: number, stop: number, width: number): Date[];
+/**
+ * Labels a tick by the boundary it sits on: a time within a day, a date at
+ * midnight, month and year at a new year. `Intl` does the wording, so the
+ * labels follow the locale.
+ */
+export declare function timeTickFormatter(locale?: string): (date: Date) => string;
+/**
+ * The tooltip's heading for a bucket: the date alone when buckets are a
+ * day or longer, date and time below that.
+ */
+export declare function bucketTimeFormatter(locale: string | undefined, span: number): (date: Date) => string;
+/** Keep every nth tick so the labels fit the width without touching. */
+export declare function thinTicks<T>(values: ReadonlyArray<T>, labelOf: (value: T) => string, width: number): T[];
+/** The index of the position nearest `px` in an ascending list. */
+export declare function nearestIndex(positions: ReadonlyArray<number>, px: number): number;

package/dist/src/components/chart/shell.d.ts

@@ -0,0 +1,42 @@
+import { ComponentProps, PointerEvent, ReactNode, RefObject } from 'react';
+/** The inner box the marks draw in, once the axes have taken their bands. */
+export interface ChartLayout {
+    width: number;
+    height: number;
+    left: number;
+    top: number;
+    right: number;
+    bottom: number;
+    innerWidth: number;
+    innerHeight: number;
+}
+/** The plot's box for a measured width and the y-axis labels it must fit. */
+export declare function chartLayout(width: number, height: number, yLabels: ReadonlyArray<string>): ChartLayout;
+export interface ChartShellProps extends Omit<ComponentProps<"div">, "children"> {
+    /** The figure's `aria-label`. */
+    label: string;
+    /** The figure's spoken summary. */
+    description: string;
+    height: number;
+    /** The measured width; 0 before the browser has measured. */
+    width: number;
+    containerRef: RefObject<HTMLDivElement | null>;
+    legend?: ReactNode;
+    tooltip?: ReactNode;
+    loading?: boolean;
+    empty?: ReactNode;
+    /** The frame says `empty` instead of drawing. */
+    showEmpty?: boolean;
+    /** The pointer over the plot — the chart snaps to the nearest bucket. */
+    onPlotPointerMove?: (event: PointerEvent<SVGSVGElement>) => void;
+    onPlotPointerLeave?: () => void;
+    children?: ReactNode;
+}
+/**
+ * The frame every chart draws in: a fixed-height plot box holding the
+ * SVG (`role="img"`, labelled and described for assistive tech), the
+ * tooltip layer over it, the legend on its own line below. Width comes
+ * from the parent; `height` covers the plot and the x-axis band, so a
+ * card never grows a nested scroll.
+ */
+export declare function ChartShell({ label, description, height, width, containerRef, legend, tooltip, loading, empty, showEmpty, onPlotPointerMove, onPlotPointerLeave, className, children, ...props }: ChartShellProps): import("react").JSX.Element;

package/dist/src/components/chart/tooltip.d.ts

@@ -0,0 +1,30 @@
+import { ReactNode } from 'react';
+import { ChartSwatchKind } from './legend';
+import { ChartBreakdownItem } from './types';
+export interface ChartTooltipRow {
+    label: string;
+    value: string;
+    color: string;
+    kind?: ChartSwatchKind;
+    dashed?: boolean;
+}
+export interface ChartTooltipProps {
+    /** The snapped x of the hovered bucket, in container px. */
+    x: number;
+    /** The container's width — the tooltip flips to the left past the middle. */
+    width: number;
+    /** Where the tooltip's top sits — the plot's top. */
+    top: number;
+    heading: string;
+    rows: ReadonlyArray<ChartTooltipRow>;
+    breakdown?: ReadonlyArray<ChartBreakdownItem>;
+    breakdownTitle?: ReactNode;
+    valueFormat: (value: number) => string;
+}
+/**
+ * The readout for one bucket: its time, then every series' value (values
+ * lead, in primary ink; labels follow), then the bucket's breakdown when
+ * it carries one. Presentational — the figure's description already
+ * speaks the data — and it never takes the pointer.
+ */
+export declare function ChartTooltip({ x, width, top, heading, rows, breakdown, breakdownTitle, valueFormat, }: ChartTooltipProps): import("react").JSX.Element;

package/dist/src/components/chart/types.d.ts

@@ -0,0 +1,76 @@
+import { ComponentProps, ReactNode } from 'react';
+/**
+ * A series colour: the six ordered categorical slots, the two status
+ * inks (a series that MEANS successful / failed), or the monochrome ink
+ * for a one-series chart on the site's black and white.
+ */
+export type ChartColor = "chart-1" | "chart-2" | "chart-3" | "chart-4" | "chart-5" | "chart-6" | "success" | "error" | "ink";
+/** One line of the per-bucket detail a tooltip lists under the series. */
+export interface ChartBreakdownItem {
+    label: string;
+    value: number;
+}
+/**
+ * One bucket on the time axis. Series values sit beside `x` under the
+ * keys the `series` name — `{ x, inbound: 12, outbound: 4 }`.
+ */
+export interface ChartDatum {
+    /** When the bucket starts: a `Date` or epoch milliseconds. */
+    x: Date | number;
+    /**
+     * Detail for this bucket — errors by route, say — listed in the tooltip
+     * under the series rows.
+     */
+    breakdown?: ReadonlyArray<ChartBreakdownItem>;
+}
+/** The keys of `T` that hold a number (or nothing yet). */
+export type ChartValueKey<T> = {
+    [K in keyof T]-?: K extends "x" | "breakdown" ? never : T[K] extends number | null | undefined ? K : never;
+}[keyof T] & string;
+export interface ChartSeries<T extends ChartDatum = ChartDatum> {
+    /** The field of each datum this series plots. */
+    key: ChartValueKey<T>;
+    /** The name in the legend and the tooltip. */
+    label: string;
+    /** Defaults to the next categorical slot, in series order. */
+    color?: ChartColor;
+    /** Line charts: a dashed stroke — a min / max beside an average. */
+    dashed?: boolean;
+}
+/** What every chart takes, on top of the div it renders. */
+export interface ChartBaseProps<T extends ChartDatum> extends Omit<ComponentProps<"div">, "children"> {
+    /** The buckets, oldest first, evenly spaced in time. */
+    data: ReadonlyArray<T>;
+    /**
+     * One entry per series, in drawing (and legend) order. `T` comes from
+     * `data`; the keys here are checked against it.
+     */
+    series: ReadonlyArray<ChartSeries<NoInfer<T>>>;
+    /** Names the chart for assistive tech — the figure's `aria-label`. */
+    label: string;
+    /**
+     * What the figure says about itself to assistive tech. Generated from
+     * the series (range, totals or extremes, peaks) unless given.
+     */
+    description?: string;
+    /** Plot plus x-axis band, in px; the legend adds its own line below. @default 200 */
+    height?: number;
+    /** A fixed width instead of measuring the parent — SSR renders, tests. */
+    width?: number;
+    /** Formats a value on the y-axis and in the tooltip. */
+    valueFormat?: (value: number) => string;
+    /** Formats a bucket's time in the tooltip heading and the description. */
+    timeFormat?: (date: Date) => string;
+    /** Locale for the default number and time formats. Runtime locale by default. */
+    locale?: string;
+    /** Show the legend. On for two or more series; a lone series is named by its title. */
+    legend?: boolean;
+    /** Where the y-axis starts: at zero, or at the data's low end. @default "zero" */
+    baseline?: "zero" | "auto";
+    /** A heading over a datum's `breakdown` list in the tooltip. */
+    breakdownTitle?: ReactNode;
+    /** Data is on its way: the chart holds its last render at half opacity. */
+    loading?: boolean;
+    /** What the frame says with no buckets to draw. */
+    empty?: ReactNode;
+}

package/dist/src/components/chart/use-measure.d.ts

@@ -0,0 +1,8 @@
+import { RefObject } from 'react';
+/**
+ * The width of the element the ref lands on, kept current through a
+ * ResizeObserver. Nothing runs on the server: the first render is 0 wide
+ * and the plot fills in once the browser has measured. A `fixed` width
+ * skips measuring altogether.
+ */
+export declare function useMeasuredWidth<T extends HTMLElement>(fixed?: number): [RefObject<T | null>, number];

package/dist/src/components/line-chart/index.d.ts

@@ -0,0 +1,2 @@
+export { LineChart, type LineChartProps } from './line-chart';
+export type { ChartBreakdownItem, ChartColor, ChartDatum, ChartSeries, ChartValueKey, } from '../chart/types';

package/dist/src/components/line-chart/line-chart.d.ts

@@ -0,0 +1,11 @@
+import { ChartBaseProps, ChartDatum } from '../chart/types';
+export interface LineChartProps<T extends ChartDatum> extends ChartBaseProps<T> {
+    /** Straight segments, or a monotone curve that never overshoots a sample. @default "linear" */
+    curve?: "linear" | "monotone";
+    /** A soft fill under the first series (a lone one, as a rule). */
+    area?: boolean;
+}
+export declare function LineChart<T extends ChartDatum>({ data, series, label, description, height, width: fixedWidth, valueFormat, timeFormat, locale, legend, baseline, curve, area, breakdownTitle, loading, empty, className, ...props }: LineChartProps<T>): import("react").JSX.Element;
+export declare namespace LineChart {
+    var displayName: string;
+}

package/dist/src/components/stat/index.d.ts

@@ -0,0 +1 @@
+export { Stat, StatGroup, type StatDirection, type StatGroupProps, type StatProps, } from './stat';

package/dist/src/components/stat/stat.d.ts

@@ -0,0 +1,61 @@
+import { ComponentProps, ReactNode } from 'react';
+/**
+ * Stat — a figure with its name: a label, a value, and, when it
+ * matters, how the value moved and against what.
+ *
+ * Design notes:
+ * - The value is the loud element: display size, medium weight, the
+ *   font's proportional figures (tabular digits make a big `121` look
+ *   loose). Label and note stay in the UI inks; nothing else competes.
+ * - The delta is a low-contrast `Badge` beside the label, with an arrow so
+ *   the direction never rides on colour alone. Its ink says whether the
+ *   move is good news: `deltaGood` names the good direction, because a
+ *   drop in bounce rate is green and a drop in visitors is red.
+ * - A tile has no chrome of its own. Alone, it sits in whatever card holds
+ *   it; in a `Stat.Group` the tiles share one frame and hairlines.
+ */
+export type StatDirection = "up" | "down" | "flat";
+export interface StatProps extends Omit<ComponentProps<"div">, "children"> {
+    /** What the figure counts — "Visitors", "Active chats". */
+    label: ReactNode;
+    /** The figure, already formatted — "20.8K", "8m 32s", "1:1". */
+    value: ReactNode;
+    /**
+     * How the value moved: a number is a percentage change and renders
+     * signed with one decimal ("−42.0%"); a string renders as written and
+     * its sign sets the direction.
+     */
+    delta?: number | string;
+    /** The delta's direction, when the string can't say. Derived otherwise. */
+    deltaDirection?: StatDirection;
+    /**
+     * Which direction is good news: `up` (visitors, revenue), `down` (bounce
+     * rate, latency), `none` when a move is just information. @default "up"
+     */
+    deltaGood?: "up" | "down" | "none";
+    /** What the delta is against — "vs. 36.2K prior". */
+    note?: ReactNode;
+}
+export declare function Stat({ label, value, delta, deltaDirection, deltaGood, note, className, ...props }: StatProps): import("react").JSX.Element;
+export declare namespace Stat {
+    var displayName: string;
+    var Group: typeof StatGroup;
+}
+export interface StatGroupProps extends ComponentProps<"div"> {
+    /**
+     * `card` frames the row as a card of its own; `plain` keeps only the
+     * hairlines between tiles, for a row inside a card or under a chart.
+     * @default "card"
+     */
+    variant?: "card" | "plain";
+}
+/**
+ * A row of tiles that reads as one card: hairlines between tiles, and
+ * between rows once the tiles wrap on a narrow width. Each tile takes an
+ * equal share of its row, never narrower than 12rem; a tile that wraps
+ * alone stretches across its line, so the frame never shows a hole.
+ */
+export declare function StatGroup({ variant, className, ...props }: StatGroupProps): import("react").JSX.Element;
+export declare namespace StatGroup {
+    var displayName: string;
+}

package/dist/src/components/toggle/toggle.d.ts

@@ -1,6 +1,10 @@
 import { ComponentProps } from 'react';
 import { Toggle as BaseToggle } from '@base-ui/react/toggle';
-/** Size axis — three square icon sizes. `md` is default. */
+/**
+ * Size axis — three heights. An icon-only toggle is square (the padding
+ * plus the icon add up to the height); one carrying a short label — a
+ * range picker's `7d` — grows to fit it. `md` is default.
+ */
 export declare const TOGGLE_SIZES: {
     sm: {
         classes: string;

package/dist/src/index.d.ts

@@ -16,3 +16,7 @@ export * from './components/status-view';
 export * from './components/error';
 export * from './sections/sidebar';
 export * from './sections/basic-page';
+export * from './components/chart';
+export * from './components/stat';
+export * from './components/bar-chart';
+export * from './components/line-chart';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@photon-ai/pho-ui",
-  "version": "2.11.0",
+  "version": "2.13.0",
   "description": "Pho Design System — Photon's React component library, built on Base UI",
   "license": "UNLICENSED",
   "repository": {
@@ -407,6 +407,22 @@
     "./primitives/tooltip": {
       "types": "./dist/src/primitives/tooltip.d.ts",
       "import": "./dist/primitives/tooltip.js"
+    },
+    "./components/chart": {
+      "types": "./dist/src/components/chart/index.d.ts",
+      "import": "./dist/components/chart.js"
+    },
+    "./components/stat": {
+      "types": "./dist/src/components/stat/index.d.ts",
+      "import": "./dist/components/stat.js"
+    },
+    "./components/bar-chart": {
+      "types": "./dist/src/components/bar-chart/index.d.ts",
+      "import": "./dist/components/bar-chart.js"
+    },
+    "./components/line-chart": {
+      "types": "./dist/src/components/line-chart/index.d.ts",
+      "import": "./dist/components/line-chart.js"
     }
   },
   "peerDependencies": {
@@ -420,6 +436,9 @@
     "@testing-library/jest-dom": "^7.0.1",
     "@testing-library/react": "^16.3.2",
     "@testing-library/user-event": "^14.6.5",
+    "@types/d3-array": "3.2.2",
+    "@types/d3-shape": "3.2.0",
+    "@types/d3-time": "3.0.4",
     "@types/node": "^26.2.0",
     "@types/react": "^19.2.18",
     "@types/react-dom": "^19.2.4",
@@ -442,6 +461,9 @@
     "clsx": "^2.1.1",
     "cmdk": "^1.1.1",
     "country-flag-icons": "^1.6.20",
+    "d3-array": "3.2.4",
+    "d3-shape": "3.2.0",
+    "d3-time": "3.1.0",
     "libphonenumber-js": "^1.13.11",
     "motion": "^13.1.0",
     "tailwind-merge": "^3.6.0"

package/src/styles/theme.css

@@ -436,4 +436,55 @@
       opacity: 0.45;
     }
   }
+
+  /* ============================== Charts ============================== */
+  /* charts — series colours for BarChart / LineChart. An ORDERED set:
+     assign slot 1, 2, 3… in series order and never cycle past 6 (fold the
+     tail into "Other"). Validated with the dataviz six checks in both modes
+     against the card (#111) and page (#000 / #fff) surfaces: lightness band,
+     chroma floor, adjacent-pair CVD ΔE ≥ 8, normal-vision ΔE ≥ 15, 3:1 on
+     the surface. Slots 1–2 are the site's sky and orange (orange stepped
+     from L 0.70 to 0.66 so a bar clears 3:1 on white); 3–6 are purple,
+     olive, magenta, indigo. Dark values are the same hues re-stepped into
+     the dark band (L 0.48–0.67), not a flip. */
+  --color-pho-chart-1: light-dark(
+    oklch(0.6 0.101 239.2),
+    oklch(0.66 0.11 239.2)
+  );
+  --color-pho-chart-2: oklch(0.66 0.15 57.8);
+  --color-pho-chart-3: light-dark(oklch(0.62 0.2 307.5), oklch(0.66 0.2 307.5));
+  --color-pho-chart-4: oklch(0.66 0.14 106);
+  --color-pho-chart-5: light-dark(oklch(0.62 0.2 350), oklch(0.65 0.2 350));
+  --color-pho-chart-6: oklch(0.639 0.146 269.6);
+  /* Status series — successful vs failed. The state text inks, so a failed
+     segment is the same red as a Failed badge. Reserved: a series wears
+     these only when it MEANS good / bad, never as "series 4". */
+  --color-pho-chart-success: light-dark(
+    oklch(0.549 0.136 149.3),
+    oklch(0.735 0.162 150.5)
+  );
+  --color-pho-chart-error: light-dark(
+    oklch(0.565 0.212 20.2),
+    oklch(0.696 0.198 14.9)
+  );
+  /* The monochrome series — a one-series chart on the site's black/white. */
+  --color-pho-chart-ink: light-dark(oklch(0 0 0 / 0.8), oklch(1 0 0 / 0.8));
+  /* Chart furniture: gridlines one step off the surface, the crosshair and
+     baseline a touch stronger. Hairlines, solid, recessive. */
+  --color-pho-chart-grid: light-dark(oklch(0 0 0 / 0.06), oklch(1 0 0 / 0.08));
+  --color-pho-chart-crosshair: light-dark(
+    oklch(0 0 0 / 0.2),
+    oklch(1 0 0 / 0.25)
+  );
+
+  /* ==================== Animation: chart mount ==================== */
+  /* A chart surfaces once on mount — opacity only, nothing moves. The
+     global reduced-motion guard in pho.css collapses it. */
+  --animate-pho-chart-in: pho-chart-in 300ms ease-out both;
+
+  @keyframes pho-chart-in {
+    from {
+      opacity: 0;
+    }
+  }
 }

package/dist/components/badge.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"badge.js","names":[],"sources":["../../src/components/badge/badge.tsx"],"sourcesContent":["import { type ComponentProps } from \"react\";\nimport { cn } from \"../../utils/cn\";\nimport { resolveVariant, type VariantMap } from \"../../utils/resolve-variant\";\n\n/**\n * Design notes (Geist-aligned):\n * - ONE color axis, a tight semantic set (`gray` / `muted` / `brand` /\n *   `success` / `warning` / `error`). Untitled UI's `type` triplication\n *   (modern / pill / badge-color) is dropped.\n * - TWO contrasts (`high` / `low`, default `high`). High is the solid state\n *   fill — the site's \"Most Popular\" pill — pairing each color's ink with\n *   flipping on-ink content. Low is the soft accent material: fill and\n *   hairline ring derive from `currentColor` at low opacity, so every color\n *   shares one recipe.\n * - THREE sizes (`xs` / `sm` / `md`, default `md`). A badge is inherently small.\n * - The richer Untitled features (dot, icon, avatar, count, dismiss button) are\n *   deliberately left out — a dismissible or selectable chip is a Tag, not a\n *   Badge, and a badge that triggers an action is a Button.\n */\n\nconst BADGE_BASE =\n  \"inline-flex shrink-0 items-center whitespace-nowrap rounded-full font-medium\";\n\n/** Low-contrast material — tint and hairline derived from the color's text token. */\nconst LOW_MATERIAL = \"bg-current/10 ring-1 ring-current/20 ring-inset\";\n\n/**\n * Size axis — fixed heights on a 4px step (16 / 20 / 24) so the ladder stays\n * proportional. Horizontal padding and type scale with each step; vertical\n * centering comes from `items-center` on the base (no `py`).\n */\nexport const BADGE_SIZES = {\n  xs: {\n    classes: \"h-4 gap-0.5 px-1.5 text-[10px] leading-none\",\n    description: \"Extra small — 16px; inline next to 14px labels (plan chips)\",\n  },\n  sm: {\n    classes: \"h-5 gap-0.5 px-2 text-xs leading-none\",\n    description: \"Small — 20px; dense rows, table cells\",\n  },\n  md: {\n    classes: \"h-6 gap-1 px-2.5 text-xs leading-none\",\n    description: \"Medium — 24px; the default\",\n  },\n} satisfies VariantMap;\n\n/**\n * Color axis — a closed semantic set with one recipe per contrast. `high`\n * fills with the state ink (text flips with it per mode); `low` tints text\n * only and lets `LOW_MATERIAL` derive fill and ring from it.\n */\nexport const BADGE_COLORS = {\n  gray: {\n    high: \"bg-pho-inverse text-pho-inverse\",\n    low: \"text-pho-secondary\",\n    description: \"Neutral — the low-signal default (solid inverse)\",\n  },\n  muted: {\n    high: \"bg-pho-secondary text-pho-primary\",\n    low: \"text-pho-description\",\n    description: \"Muted — soft solid surface for quieter labels (Free, Shared)\",\n  },\n  brand: {\n    high: \"bg-pho-brand-solid text-pho-on-brand\",\n    low: \"text-pho-brand\",\n    description: \"Brand — plan tiers, feature flags, highlights\",\n  },\n  success: {\n    high: \"bg-pho-success-ink text-pho-on-brand\",\n    low: \"text-pho-success\",\n    description: \"Success — healthy, live, complete\",\n  },\n  warning: {\n    high: \"bg-pho-warning-ink text-pho-on-brand\",\n    low: \"text-pho-warning\",\n    description: \"Warning — needs attention, degraded\",\n  },\n  error: {\n    high: \"bg-pho-error-ink text-pho-on-brand\",\n    low: \"text-pho-error\",\n    description: \"Error — failed, blocked, over limit\",\n  },\n} satisfies Record<string, { high: string; low: string; description: string }>;\n\nexport type BadgeSize = keyof typeof BADGE_SIZES;\nexport type BadgeColor = keyof typeof BADGE_COLORS;\nexport type BadgeContrast = \"high\" | \"low\";\n\n/** Compose the full class string for a badge — exported for reuse/testing. */\nexport function badgeVariants(opts?: {\n  color?: BadgeColor;\n  contrast?: BadgeContrast;\n  size?: BadgeSize;\n  className?: string;\n}): string {\n  const {\n    color = \"gray\",\n    contrast = \"high\",\n    size = \"md\",\n    className,\n  } = opts ?? {};\n  const def = BADGE_COLORS[color] as\n    (typeof BADGE_COLORS)[BadgeColor] | undefined;\n  return cn(\n    BADGE_BASE,\n    resolveVariant(BADGE_SIZES, size),\n    contrast === \"low\" ? cn(LOW_MATERIAL, def?.low) : def?.high,\n    className,\n  );\n}\n\ninterface BadgeBaseProps {\n  /** Semantic color. @default \"gray\" */\n  color?: BadgeColor;\n  /** Solid state fill (`high`) or the soft currentColor tint (`low`). @default \"high\" */\n  contrast?: BadgeContrast;\n  /** Size variant. @default \"md\" */\n  size?: BadgeSize;\n}\n\nexport interface BadgeProps\n  extends BadgeBaseProps, Omit<ComponentProps<\"span\">, keyof BadgeBaseProps> {}\n\n/**\n * Badge — a small, non-interactive status label: a plan tier (`Pro`), a state\n * (`Live`, `Failed`), a count. It's a plain `<span>`, so it never takes focus or\n * handles clicks — for a dismissible or selectable chip reach for a `Tag`, and\n * for a standalone action use a `Button`. Let `color` carry the meaning and keep\n * the label to a word or two.\n */\nexport function Badge({\n  color,\n  contrast,\n  size,\n  className,\n  children,\n  ...props\n}: BadgeProps) {\n  return (\n    <span\n      className={cn(badgeVariants({ color, contrast, size }), className)}\n      {...props}\n    >\n      {children}\n    </span>\n  );\n}\n\nBadge.displayName = \"Badge\";\n"],"mappings":";;;;;AAoBA,IAAM,IACJ,gFAGI,IAAe,mDAOR,IAAc;AAAA,EACzB,IAAI;AAAA,IACF,SAAS;AAAA,IACT,aAAa;AAAA,EACf;AAAA,EACA,IAAI;AAAA,IACF,SAAS;AAAA,IACT,aAAa;AAAA,EACf;AAAA,EACA,IAAI;AAAA,IACF,SAAS;AAAA,IACT,aAAa;AAAA,EACf;AACF,GAOa,IAAe;AAAA,EAC1B,MAAM;AAAA,IACJ,MAAM;AAAA,IACN,KAAK;AAAA,IACL,aAAa;AAAA,EACf;AAAA,EACA,OAAO;AAAA,IACL,MAAM;AAAA,IACN,KAAK;AAAA,IACL,aAAa;AAAA,EACf;AAAA,EACA,OAAO;AAAA,IACL,MAAM;AAAA,IACN,KAAK;AAAA,IACL,aAAa;AAAA,EACf;AAAA,EACA,SAAS;AAAA,IACP,MAAM;AAAA,IACN,KAAK;AAAA,IACL,aAAa;AAAA,EACf;AAAA,EACA,SAAS;AAAA,IACP,MAAM;AAAA,IACN,KAAK;AAAA,IACL,aAAa;AAAA,EACf;AAAA,EACA,OAAO;AAAA,IACL,MAAM;AAAA,IACN,KAAK;AAAA,IACL,aAAa;AAAA,EACf;AACF;AAOA,SAAgB,EAAc,GAKnB;AACT,QAAM,EACJ,OAAA,IAAQ,QACR,UAAA,IAAW,QACX,MAAA,IAAO,MACP,WAAA,EAAA,IACE,KAAQ,CAAC,GACP,IAAM,EAAa,CAAA;AAEzB,SAAO,EACL,GACA,EAAe,GAAa,CAAI,GAChC,MAAa,QAAQ,EAAG,GAAc,GAAK,GAAG,IAAI,GAAK,MACvD,CACF;AACF;AAqBA,SAAgB,EAAM,EACpB,OAAA,GACA,UAAA,GACA,MAAA,GACA,WAAA,GACA,UAAA,GACA,GAAG,EAAA,GACU;AACb,SACE,gBAAA,EAAC,QAAD;AAAA,IACE,WAAW,EAAG,EAAc;AAAA,MAAE,OAAA;AAAA,MAAO,UAAA;AAAA,MAAU,MAAA;AAAA,IAAK,CAAC,GAAG,CAAS;AAAA,IACjE,GAAI;AAAA,IAEH,UAAA;AAAA,EACG,CAAA;AAEV;AAEA,EAAM,cAAc"}