@acronis-platform/ui-react 2.0.0 → 4.0.0

package/dist/components/ui/area-chart/area-chart.js

@@ -1,11 +1,11 @@
-import { jsx as r, jsxs as $ } from "react/jsx-runtime";
-import * as T from "react";
-import { cva as pe } from "../../../node_modules/.pnpm/class-variance-authority@0.7.1/node_modules/class-variance-authority/dist/index.js";
-import { AreaChart as ue, CartesianGrid as ve, XAxis as Le, YAxis as Ce, Area as Ae, LabelList as be, ReferenceLine as Re, Brush as xe } from "recharts";
-import { cn as Te } from "../../../lib/utils.js";
-import { resolveAnimation as $e, resolveCartesianLabelPosition as ye, CHART_LABEL_MARGIN as De, resolveRotatedTickAnchor as Pe, CHART_LABEL_FONT_SIZE as ke, resolveLabelFillClass as Fe, toLabelFormatter as Ne, resolveChartReferenceValue as Oe, resolveReferenceLineProps as _e, resolveBrushProps as Ge, resolveXAxisTitle as Ie, resolveXAxisHeight as we, resolveYAxisTitle as ze, resolveAxisDomain as Be, toReferenceLineList as He } from "../chart/chart-format.js";
-import { ChartContainer as je, ChartTooltip as Ee, ChartTooltipContent as Ve, ChartLegend as Xe, ChartLegendContent as Me } from "../chart/chart.js";
-const We = pe("", {
+import { jsx as r, jsxs as y } from "react/jsx-runtime";
+import * as $ from "react";
+import { cva as ue } from "../../../node_modules/.pnpm/class-variance-authority@0.7.1/node_modules/class-variance-authority/dist/index.js";
+import { AreaChart as ve, CartesianGrid as Le, XAxis as Ce, YAxis as Ae, Area as be, LabelList as Re, ReferenceLine as xe, Brush as Te } from "recharts";
+import { cn as $e } from "../../../lib/utils.js";
+import { resolveAnimation as ye, resolveCartesianLabelPosition as De, CHART_LABEL_MARGIN as Pe, resolveRotatedTickAnchor as ke, CHART_LABEL_FONT_SIZE as Fe, resolveLabelFillClass as Ne, toLabelFormatter as Oe, resolveChartReferenceValue as _e, resolveReferenceLineProps as Ge, resolveBrushProps as Ie, resolveXAxisTitle as we, resolveXAxisHeight as ze, resolveYAxisTitle as Be, resolveAxisDomain as He, toReferenceLineList as je } from "../chart/chart-format.js";
+import { ChartContainer as Ee, ChartTooltip as Ve, ChartTooltipContent as Xe, ChartLegend as Me, ChartLegendContent as We } from "../chart/chart.js";
+const Ye = ue("", {
   variants: {
     layout: {
       single: "",
@@ -21,12 +21,12 @@ const We = pe("", {
     fill: "gradient"
   }
 });
-function Ye({
+function Ke({
   dataKeys: s,
   gradientId: n,
-  colorFor: i
+  colorFor: l
 }) {
-  return /* @__PURE__ */ r("defs", { children: s.map((a) => /* @__PURE__ */ $(
+  return /* @__PURE__ */ r("defs", { children: s.map((a) => /* @__PURE__ */ y(
     "linearGradient",
     {
       id: `${n}-${a}`,
@@ -35,192 +35,194 @@ function Ye({
       x2: "0",
       y2: "1",
       children: [
-        /* @__PURE__ */ r("stop", { offset: "5%", stopColor: i(a), stopOpacity: 0.8 }),
-        /* @__PURE__ */ r("stop", { offset: "95%", stopColor: i(a), stopOpacity: 0.1 })
+        /* @__PURE__ */ r("stop", { offset: "5%", stopColor: l(a), stopOpacity: 0.8 }),
+        /* @__PURE__ */ r("stop", { offset: "95%", stopColor: l(a), stopOpacity: 0.1 })
       ]
     },
     a
   )) });
 }
-const Ke = T.forwardRef(
+const Ze = $.forwardRef(
   ({
     className: s,
     config: n,
-    data: i,
-    dataKeys: a,
-    xKey: p,
-    xAxisLabel: u,
-    yAxisLabel: v,
-    yUnit: y,
-    layout: c = "single",
-    fill: d = "gradient",
-    curve: D = "monotone",
-    strokeWidth: P = 2,
-    fillOpacity: k = 0.4,
-    showDots: F = !1,
-    dotSize: N = 3,
-    showActiveDot: O,
-    connectNulls: _ = !1,
+    palette: l,
+    data: a,
+    dataKeys: c,
+    xKey: u,
+    xAxisLabel: v,
+    yAxisLabel: L,
+    yUnit: D,
+    layout: d = "single",
+    fill: f = "gradient",
+    curve: P = "monotone",
+    strokeWidth: k = 2,
+    fillOpacity: F = 0.4,
+    showDots: N = !1,
+    dotSize: O = 3,
+    showActiveDot: _,
+    connectNulls: G = !1,
     areaSettings: t,
-    referenceLine: G,
-    showGrid: I = !0,
-    showTooltip: w = !0,
-    showLegend: z = !0,
-    showXAxis: B = !0,
-    showYAxis: H = !0,
-    xTickFormatter: L,
-    yTickFormatter: j,
-    xAxisAngle: f,
-    xAxisInterval: E,
-    yAxisTickCount: V,
-    yAxisDomain: X,
-    gridDashed: M,
-    gridHorizontal: W,
-    gridVertical: Y,
-    tooltipContent: K,
-    animate: Z,
-    animationDuration: q,
-    animationBegin: J,
-    animationEasing: Q,
-    showLabels: C = !1,
-    labelPosition: U,
-    labelFormatter: S,
-    showBrush: g = !1,
-    brushHeight: ee,
-    brushAriaLabel: oe,
-    ...re
-  }, ae) => {
-    const te = $e({
-      animate: Z,
-      animationDuration: q,
-      animationBegin: J,
-      animationEasing: Q
-    }), A = c === "stacked", ie = ye({
-      labelPosition: U,
-      isStacked: A
-    }), h = d === "gradient", le = He(G), m = (o) => {
+    referenceLine: I,
+    showGrid: w = !0,
+    showTooltip: z = !0,
+    showLegend: B = !0,
+    showXAxis: H = !0,
+    showYAxis: j = !0,
+    xTickFormatter: C,
+    yTickFormatter: E,
+    xAxisAngle: h,
+    xAxisInterval: V,
+    yAxisTickCount: X,
+    yAxisDomain: M,
+    gridDashed: W,
+    gridHorizontal: Y,
+    gridVertical: K,
+    tooltipContent: Z,
+    animate: q,
+    animationDuration: J,
+    animationBegin: Q,
+    animationEasing: U,
+    showLabels: A = !1,
+    labelPosition: S,
+    labelFormatter: g,
+    showBrush: ee = !1,
+    brushHeight: oe,
+    brushAriaLabel: re,
+    ...ae
+  }, te) => {
+    const ie = ye({
+      animate: q,
+      animationDuration: J,
+      animationBegin: Q,
+      animationEasing: U
+    }), b = d === "stacked", le = De({
+      labelPosition: S,
+      isStacked: b
+    }), m = f === "gradient", se = je(I), p = (o) => {
       var e;
       return ((e = t == null ? void 0 : t[o]) == null ? void 0 : e.color) ?? `var(--color-${o})`;
-    }, se = C || Object.values(t ?? {}).some((o) => o.showLabel), ne = Ie(u), ce = ze(v), de = Be(X), fe = we(u, f), b = `area-gradient-${T.useId().replace(/:/g, "")}`;
+    }, ne = A || Object.values(t ?? {}).some((o) => o.showLabel), ce = we(v), de = Be(L), fe = He(M), he = ze(v, h), R = `area-gradient-${$.useId().replace(/:/g, "")}`;
     return /* @__PURE__ */ r(
       "div",
       {
-        ref: ae,
-        "data-layout": c,
-        "data-fill": d,
-        className: Te(We({ layout: c, fill: d }), s),
-        ...re,
+        ref: te,
+        "data-layout": d,
+        "data-fill": f,
+        className: $e(Ye({ layout: d, fill: f }), s),
+        ...ae,
         children: /* @__PURE__ */ r(
-          je,
+          Ee,
           {
             config: n,
+            palette: l,
             className: "size-full [&_.recharts-label]:fill-foreground",
-            children: /* @__PURE__ */ $(
-              ue,
+            children: /* @__PURE__ */ y(
+              ve,
               {
-                data: i,
-                margin: se ? De : void 0,
+                data: a,
+                margin: ne ? Pe : void 0,
                 children: [
-                  h && /* @__PURE__ */ r(
-                    Ye,
+                  m && /* @__PURE__ */ r(
+                    Ke,
                     {
-                      dataKeys: a,
-                      gradientId: b,
-                      colorFor: m
+                      dataKeys: c,
+                      gradientId: R,
+                      colorFor: p
                     }
                   ),
-                  I && /* @__PURE__ */ r(
-                    ve,
+                  w && /* @__PURE__ */ r(
+                    Le,
                     {
-                      horizontal: W ?? !0,
-                      vertical: Y ?? !1,
-                      strokeDasharray: M ? "3 3" : void 0
+                      horizontal: Y ?? !0,
+                      vertical: K ?? !1,
+                      strokeDasharray: W ? "3 3" : void 0
                     }
                   ),
                   /* @__PURE__ */ r(
-                    Le,
+                    Ce,
                     {
-                      dataKey: p,
+                      dataKey: u,
                       type: "category",
-                      hide: !B,
+                      hide: !H,
                       tickLine: !1,
                       axisLine: !1,
                       tickMargin: 8,
-                      tickFormatter: L,
-                      angle: f,
-                      interval: E,
-                      textAnchor: Pe(f),
-                      height: fe,
-                      label: ne
+                      tickFormatter: C,
+                      angle: h,
+                      interval: V,
+                      textAnchor: ke(h),
+                      height: he,
+                      label: ce
                     }
                   ),
                   /* @__PURE__ */ r(
-                    Ce,
+                    Ae,
                     {
                       type: "number",
-                      hide: !H,
+                      hide: !j,
                       tickLine: !1,
                       axisLine: !1,
-                      unit: y,
-                      tickFormatter: j,
-                      tickCount: V,
-                      domain: de,
-                      width: v ? 72 : void 0,
-                      label: ce
+                      unit: D,
+                      tickFormatter: E,
+                      tickCount: X,
+                      domain: fe,
+                      width: L ? 72 : void 0,
+                      label: de
                     }
                   ),
-                  w && /* @__PURE__ */ r(Ee, { content: K ?? /* @__PURE__ */ r(Ve, {}) }),
-                  z && /* @__PURE__ */ r(Xe, { content: /* @__PURE__ */ r(Me, {}) }),
-                  a.map((o) => {
-                    const e = t == null ? void 0 : t[o], l = (e == null ? void 0 : e.showDots) ?? F, R = (e == null ? void 0 : e.dotSize) ?? N, he = O ?? l, me = (e == null ? void 0 : e.showLabel) ?? C, x = (e == null ? void 0 : e.labelPosition) ?? ie;
+                  z && /* @__PURE__ */ r(Ve, { content: Z ?? /* @__PURE__ */ r(Xe, {}) }),
+                  B && /* @__PURE__ */ r(Me, { content: /* @__PURE__ */ r(We, {}) }),
+                  c.map((o) => {
+                    const e = t == null ? void 0 : t[o], i = (e == null ? void 0 : e.showDots) ?? N, x = (e == null ? void 0 : e.dotSize) ?? O, me = _ ?? i, pe = (e == null ? void 0 : e.showLabel) ?? A, T = (e == null ? void 0 : e.labelPosition) ?? le;
                     return /* @__PURE__ */ r(
-                      Ae,
+                      be,
                       {
-                        type: (e == null ? void 0 : e.curveType) ?? D ?? "monotone",
+                        type: (e == null ? void 0 : e.curveType) ?? P ?? "monotone",
                         dataKey: o,
-                        stackId: A ? "a" : void 0,
-                        stroke: m(o),
-                        strokeWidth: (e == null ? void 0 : e.strokeWidth) ?? P,
+                        stackId: b ? "a" : void 0,
+                        stroke: p(o),
+                        strokeWidth: (e == null ? void 0 : e.strokeWidth) ?? k,
                         strokeDasharray: e != null && e.dashed ? "5 5" : void 0,
-                        fill: h ? `url(#${b}-${o})` : m(o),
-                        fillOpacity: (e == null ? void 0 : e.fillOpacity) ?? (h ? 1 : k),
-                        dot: l ? { r: R } : !1,
-                        activeDot: he ? { r: R + 2 } : !1,
-                        connectNulls: _,
-                        ...te,
-                        children: me && /* @__PURE__ */ r(
-                          be,
+                        fill: m ? `url(#${R}-${o})` : p(o),
+                        fillOpacity: (e == null ? void 0 : e.fillOpacity) ?? (m ? 1 : F),
+                        dot: i ? { r: x } : !1,
+                        activeDot: me ? { r: x + 2 } : !1,
+                        connectNulls: G,
+                        ...ie,
+                        children: pe && /* @__PURE__ */ r(
+                          Re,
                           {
                             dataKey: o,
-                            position: x,
-                            formatter: Ne(S),
-                            className: Fe(x, {
+                            position: T,
+                            formatter: Oe(g),
+                            className: Ne(T, {
                               translucentSeries: !0
                             }),
-                            fontSize: ke
+                            fontSize: Fe
                           }
                         )
                       },
                       o
                     );
                   }),
-                  le.map((o, e) => {
-                    const l = Oe(o, i, a);
-                    return l === void 0 ? null : /* @__PURE__ */ r(
-                      Re,
+                  se.map((o, e) => {
+                    const i = _e(o, a, c);
+                    return i === void 0 ? null : /* @__PURE__ */ r(
+                      xe,
                       {
-                        y: l,
-                        ..._e(o.label, o.labelPosition)
+                        y: i,
+                        ...Ge(o.label, o.labelPosition)
                       },
                       `${o.label ?? "ref"}-${e}`
                     );
                   }),
-                  g && /* @__PURE__ */ r(
-                    xe,
+                  ee && /* @__PURE__ */ r(
+                    Te,
                     {
-                      dataKey: p,
-                      tickFormatter: L,
-                      ...Ge({ brushHeight: ee, brushAriaLabel: oe })
+                      dataKey: u,
+                      tickFormatter: C,
+                      ...Ie({ brushHeight: oe, brushAriaLabel: re })
                     }
                   )
                 ]
@@ -232,9 +234,9 @@ const Ke = T.forwardRef(
     );
   }
 );
-Ke.displayName = "AreaChart";
+Ze.displayName = "AreaChart";
 export {
-  Ke as AreaChart,
-  We as areaChartVariants
+  Ze as AreaChart,
+  Ye as areaChartVariants
 };
 //# sourceMappingURL=area-chart.js.map

package/dist/components/ui/area-chart/area-chart.js.map

@@ -1 +1 @@
-{"version":3,"file":"area-chart.js","sources":["../../../../src/components/ui/area-chart/area-chart.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { cva, type VariantProps } from 'class-variance-authority';\nimport {\n  Area,\n  AreaChart as RechartsAreaChart,\n  Brush,\n  CartesianGrid,\n  LabelList,\n  ReferenceLine,\n  XAxis,\n  YAxis,\n} from 'recharts';\n\nimport { cn } from '@/lib/utils';\nimport {\n  CHART_LABEL_FONT_SIZE,\n  CHART_LABEL_MARGIN,\n  ChartContainer,\n  ChartLegend,\n  ChartLegendContent,\n  ChartTooltip,\n  ChartTooltipContent,\n  resolveAnimation,\n  resolveAxisDomain,\n  resolveBrushProps,\n  resolveCartesianLabelPosition,\n  resolveChartReferenceValue,\n  resolveLabelFillClass,\n  resolveReferenceLineProps,\n  resolveRotatedTickAnchor,\n  resolveXAxisHeight,\n  resolveXAxisTitle,\n  resolveYAxisTitle,\n  toLabelFormatter,\n  toReferenceLineList,\n  type ChartConfig,\n  type CartesianChartProps,\n  type ChartAnimationProps,\n  type ChartBrushProps,\n  type ChartCurveType,\n  type ChartDataLabelProps,\n  type ChartReferenceLine,\n  type CartesianLabelPosition,\n} from '../chart';\n\n// A typed recharts composition over the shared `Chart` primitives. The two CVA\n// axes are the design's Area-chart variant set: `layout` (independent\n// overlapping areas vs summed on a shared stack) and `fill` (a flat translucent\n// fill vs a vertical gradient). The classes stay empty because recharts' SVG —\n// not CSS — draws the areas: `layout` drives each `<Area>`'s `stackId` and `fill`\n// drives whether it paints from a `<linearGradient>` def or a flat token color.\n// CVA is kept so the variant set is a first-class, spec-conformant part of the\n// API (matched against ui-spec's api.yaml enums) and exposed via `VariantProps`;\n// the resolved values are also mirrored onto `data-layout` / `data-fill`.\nconst areaChartVariants = cva('', {\n  variants: {\n    layout: {\n      single: '',\n      stacked: '',\n    },\n    fill: {\n      solid: '',\n      gradient: '',\n    },\n  },\n  defaultVariants: {\n    layout: 'single',\n    fill: 'gradient',\n  },\n});\n\n/**\n * Style override for one series, keyed by its `dataKeys` entry. Anything left\n * unset falls back to the chart-wide prop, so an entry only states what differs\n * — e.g. a projection band that reads fainter than the actuals beside it.\n */\nexport interface AreaChartAreaSettings {\n  /** Stroke and fill color. Defaults to the series' `config` color. */\n  color?: string;\n  /** Width of this series' top border. Defaults to the chart's `strokeWidth`. */\n  strokeWidth?: number;\n  /** Dash this series' top border. */\n  dashed?: boolean;\n  /** Interpolation for this series only. Defaults to the chart's `curve`. */\n  curveType?: ChartCurveType;\n  /**\n   * Fill opacity for this series. Under `fill=\"gradient\"` it scales the\n   * gradient's own alpha rather than replacing it.\n   */\n  fillOpacity?: number;\n  /** Render this series' per-point dots. Defaults to the chart's `showDots`. */\n  showDots?: boolean;\n  /** Dot radius for this series, in px. Defaults to the chart's `dotSize`. */\n  dotSize?: number;\n  /** Show/hide this series' value labels, overriding the chart's `showLabels`. */\n  showLabel?: boolean;\n  /** Position of this series' value labels. Defaults to the chart's `labelPosition`. */\n  labelPosition?: CartesianLabelPosition;\n}\n\nexport interface AreaChartProps\n  extends Omit<React.ComponentProps<'div'>, 'children'>,\n    VariantProps<typeof areaChartVariants>,\n    CartesianChartProps,\n    ChartAnimationProps,\n    ChartBrushProps,\n    ChartDataLabelProps {\n  /** Row-per-point data. Each object holds the category key + one numeric field per series (`null` breaks the area unless `connectNulls`). */\n  data: ReadonlyArray<Record<string, string | number | null>>;\n  /**\n   * Per-series map of `label` / `color` (imported from the shared `Chart`\n   * primitives). Series colors are caller-supplied — reference an existing\n   * semantic `--ui-*` token; there is no chart palette tier yet.\n   */\n  config: ChartConfig;\n  /** Series to plot — one `<Area>` per key. Each must exist in `config` and in every data row. */\n  dataKeys: string[];\n  /** Category axis key (the shared dimension across rows, e.g. `\"month\"`). */\n  xKey: string;\n  /** Interpolation between points. */\n  curve?: ChartCurveType;\n  /** Stroke width of each area's top border. */\n  strokeWidth?: number;\n  /** Flat-fill opacity — used only when `fill=\"solid\"` (gradient controls its own stops). */\n  fillOpacity?: number;\n  /** Render a dot at each data point. */\n  showDots?: boolean;\n  /** Radius of each point's dot, in px. Its hover dot is 2px larger. */\n  dotSize?: number;\n  /**\n   * Enlarge the hovered point's dot. Defaults to following `showDots`, so pass\n   * it explicitly to get hover dots on a dot-less area (`showDots={false}` with\n   * `showActiveDot`) or a static-only area (dots without the hover one).\n   */\n  showActiveDot?: boolean;\n  /** Bridge `null` gaps in the data instead of breaking the area. */\n  connectNulls?: boolean;\n  /**\n   * Per-series style overrides, keyed by `dataKeys` entry. Series with no entry\n   * render from the chart-wide props.\n   */\n  areaSettings?: Record<string, AreaChartAreaSettings>;\n  /**\n   * One or more dashed reference/average lines on the value axis — a target, a\n   * threshold, or a series mean. Pass a single object or an array to draw\n   * several at once. On a stacked chart the value is read against the stack's\n   * axis, not one series.\n   */\n  referenceLine?: ChartReferenceLine | ChartReferenceLine[];\n  showLegend?: boolean;\n  /** Position of the value labels when `showLabels` is on. Defaults to `top`. */\n  labelPosition?: CartesianLabelPosition;\n}\n\n/**\n * One top-to-bottom fade per series, referenced by each `<Area>`'s `fill`.\n *\n * The ids are scoped by `gradientId` because SVG `<defs>` ids are\n * document-global: two AreaCharts on the same page would otherwise share (and\n * silently overwrite) each other's stops.\n */\nfunction AreaFillGradients({\n  dataKeys,\n  gradientId,\n  colorFor,\n}: {\n  dataKeys: string[];\n  gradientId: string;\n  colorFor: (key: string) => string;\n}) {\n  return (\n    <defs>\n      {dataKeys.map((key) => (\n        <linearGradient\n          key={key}\n          id={`${gradientId}-${key}`}\n          x1=\"0\"\n          y1=\"0\"\n          x2=\"0\"\n          y2=\"1\"\n        >\n          <stop offset=\"5%\" stopColor={colorFor(key)} stopOpacity={0.8} />\n          <stop offset=\"95%\" stopColor={colorFor(key)} stopOpacity={0.1} />\n        </linearGradient>\n      ))}\n    </defs>\n  );\n}\n\nconst AreaChart = React.forwardRef<HTMLDivElement, AreaChartProps>(\n  (\n    {\n      className,\n      config,\n      data,\n      dataKeys,\n      xKey,\n      xAxisLabel,\n      yAxisLabel,\n      yUnit,\n      layout = 'single',\n      fill = 'gradient',\n      curve = 'monotone',\n      strokeWidth = 2,\n      fillOpacity = 0.4,\n      showDots = false,\n      dotSize = 3,\n      showActiveDot,\n      connectNulls = false,\n      areaSettings,\n      referenceLine,\n      showGrid = true,\n      showTooltip = true,\n      showLegend = true,\n      showXAxis = true,\n      showYAxis = true,\n      xTickFormatter,\n      yTickFormatter,\n      xAxisAngle,\n      xAxisInterval,\n      yAxisTickCount,\n      yAxisDomain,\n      gridDashed,\n      gridHorizontal,\n      gridVertical,\n      tooltipContent,\n      animate,\n      animationDuration,\n      animationBegin,\n      animationEasing,\n      showLabels = false,\n      labelPosition,\n      labelFormatter,\n      showBrush = false,\n      brushHeight,\n      brushAriaLabel,\n      ...props\n    },\n    ref\n  ) => {\n    const animation = resolveAnimation({\n      animate,\n      animationDuration,\n      animationBegin,\n      animationEasing,\n    });\n    const isStacked = layout === 'stacked';\n    const areaLabelPosition = resolveCartesianLabelPosition({\n      labelPosition,\n      isStacked,\n    });\n    const isGradient = fill === 'gradient';\n    const referenceLines = toReferenceLineList(referenceLine);\n\n    // A series' `color` override has to reach its gradient stops too, or a\n    // gradient-filled chart would keep painting the `config` color.\n    const colorFor = (key: string) =>\n      areaSettings?.[key]?.color ?? `var(--color-${key})`;\n\n    // The plot inset is needed as soon as *any* series carries outside labels —\n    // a per-series `showLabel` counts, not only the chart-wide `showLabels`.\n    const hasLabels =\n      showLabels ||\n      Object.values(areaSettings ?? {}).some((settings) => settings.showLabel);\n\n    // Axis titles: the X title sits below the ticks; the Y title is rotated in\n    // the left gutter. Passed to recharts' native `label` (themed via the\n    // `.recharts-label` fill selector on the container).\n    const xAxisTitle = resolveXAxisTitle(xAxisLabel);\n    const yAxisTitle = resolveYAxisTitle(yAxisLabel);\n\n    const yDomain = resolveAxisDomain(yAxisDomain);\n\n    const xAxisHeight = resolveXAxisHeight(xAxisLabel, xAxisAngle);\n\n    // recharts renders SVG <defs> once per chart; the gradient ids must be unique\n    // across chart instances on the page. useId gives a stable per-instance id;\n    // strip the colons React emits (invalid in a url(#…) reference) — same guard\n    // the shared ChartContainer applies to its chart id.\n    const gradientId = `area-gradient-${React.useId().replace(/:/g, '')}`;\n\n    return (\n      <div\n        ref={ref}\n        data-layout={layout}\n        data-fill={fill}\n        className={cn(areaChartVariants({ layout, fill }), className)}\n        {...props}\n      >\n        <ChartContainer\n          config={config}\n          className=\"size-full [&_.recharts-label]:fill-foreground\"\n        >\n          <RechartsAreaChart\n            data={data as readonly unknown[]}\n            margin={hasLabels ? CHART_LABEL_MARGIN : undefined}\n          >\n            {isGradient && (\n              <AreaFillGradients\n                dataKeys={dataKeys}\n                gradientId={gradientId}\n                colorFor={colorFor}\n              />\n            )}\n            {showGrid && (\n              <CartesianGrid\n                horizontal={gridHorizontal ?? true}\n                vertical={gridVertical ?? false}\n                strokeDasharray={gridDashed ? '3 3' : undefined}\n              />\n            )}\n            <XAxis\n              dataKey={xKey}\n              type=\"category\"\n              hide={!showXAxis}\n              tickLine={false}\n              axisLine={false}\n              tickMargin={8}\n              tickFormatter={xTickFormatter}\n              angle={xAxisAngle}\n              interval={xAxisInterval}\n              textAnchor={resolveRotatedTickAnchor(xAxisAngle)}\n              height={xAxisHeight}\n              label={xAxisTitle}\n            />\n            <YAxis\n              type=\"number\"\n              hide={!showYAxis}\n              tickLine={false}\n              axisLine={false}\n              unit={yUnit}\n              tickFormatter={yTickFormatter}\n              tickCount={yAxisTickCount}\n              domain={yDomain}\n              width={yAxisLabel ? 72 : undefined}\n              label={yAxisTitle}\n            />\n            {showTooltip && (\n              <ChartTooltip content={tooltipContent ?? <ChartTooltipContent />} />\n            )}\n            {showLegend && <ChartLegend content={<ChartLegendContent />} />}\n            {dataKeys.map((key) => {\n              const settings = areaSettings?.[key];\n              const seriesDots = settings?.showDots ?? showDots;\n              const dotRadius = settings?.dotSize ?? dotSize;\n              // The hover dot follows the static dots unless asked otherwise, so\n              // a chart that sets neither renders exactly as before.\n              const activeDot = showActiveDot ?? seriesDots;\n              const seriesLabel = settings?.showLabel ?? showLabels;\n              const seriesLabelPosition =\n                settings?.labelPosition ?? areaLabelPosition;\n              return (\n                <Area\n                  key={key}\n                  type={settings?.curveType ?? curve ?? 'monotone'}\n                  dataKey={key}\n                  stackId={isStacked ? 'a' : undefined}\n                  stroke={colorFor(key)}\n                  strokeWidth={settings?.strokeWidth ?? strokeWidth}\n                  strokeDasharray={settings?.dashed ? '5 5' : undefined}\n                  fill={\n                    isGradient ? `url(#${gradientId}-${key})` : colorFor(key)\n                  }\n                  fillOpacity={\n                    settings?.fillOpacity ?? (isGradient ? 1 : fillOpacity)\n                  }\n                  dot={seriesDots ? { r: dotRadius } : false}\n                  activeDot={activeDot ? { r: dotRadius + 2 } : false}\n                  connectNulls={connectNulls}\n                  {...animation}\n                >\n                  {seriesLabel && (\n                    <LabelList\n                      dataKey={key}\n                      position={seriesLabelPosition}\n                      formatter={toLabelFormatter(labelFormatter)}\n                      className={resolveLabelFillClass(seriesLabelPosition, {\n                        translucentSeries: true,\n                      })}\n                      fontSize={CHART_LABEL_FONT_SIZE}\n                    />\n                  )}\n                </Area>\n              );\n            })}\n            {/* Annotations draw over the series they describe. */}\n            {referenceLines.map((ref, index) => {\n              const value = resolveChartReferenceValue(ref, data, dataKeys);\n              if (value === undefined) return null;\n              return (\n                <ReferenceLine\n                  key={`${ref.label ?? 'ref'}-${index}`}\n                  y={value}\n                  {...resolveReferenceLineProps(ref.label, ref.labelPosition)}\n                />\n              );\n            })}\n            {showBrush && (\n              <Brush\n                dataKey={xKey}\n                tickFormatter={xTickFormatter}\n                {...resolveBrushProps({ brushHeight, brushAriaLabel })}\n              />\n            )}\n          </RechartsAreaChart>\n        </ChartContainer>\n      </div>\n    );\n  }\n);\nAreaChart.displayName = 'AreaChart';\n\nexport { AreaChart, areaChartVariants };\n"],"names":["areaChartVariants","cva","AreaFillGradients","dataKeys","gradientId","colorFor","jsx","key","jsxs","AreaChart","React","className","config","data","xKey","xAxisLabel","yAxisLabel","yUnit","layout","fill","curve","strokeWidth","fillOpacity","showDots","dotSize","showActiveDot","connectNulls","areaSettings","referenceLine","showGrid","showTooltip","showLegend","showXAxis","showYAxis","xTickFormatter","yTickFormatter","xAxisAngle","xAxisInterval","yAxisTickCount","yAxisDomain","gridDashed","gridHorizontal","gridVertical","tooltipContent","animate","animationDuration","animationBegin","animationEasing","showLabels","labelPosition","labelFormatter","showBrush","brushHeight","brushAriaLabel","props","ref","animation","resolveAnimation","isStacked","areaLabelPosition","resolveCartesianLabelPosition","isGradient","referenceLines","toReferenceLineList","_a","hasLabels","settings","xAxisTitle","resolveXAxisTitle","yAxisTitle","resolveYAxisTitle","yDomain","resolveAxisDomain","xAxisHeight","resolveXAxisHeight","cn","ChartContainer","RechartsAreaChart","CHART_LABEL_MARGIN","CartesianGrid","XAxis","resolveRotatedTickAnchor","YAxis","ChartTooltip","ChartTooltipContent","ChartLegend","ChartLegendContent","seriesDots","dotRadius","activeDot","seriesLabel","seriesLabelPosition","Area","LabelList","toLabelFormatter","resolveLabelFillClass","CHART_LABEL_FONT_SIZE","index","value","resolveChartReferenceValue","ReferenceLine","resolveReferenceLineProps","Brush","resolveBrushProps"],"mappings":"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"}
+{"version":3,"file":"area-chart.js","sources":["../../../../src/components/ui/area-chart/area-chart.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { cva, type VariantProps } from 'class-variance-authority';\nimport {\n  Area,\n  AreaChart as RechartsAreaChart,\n  Brush,\n  CartesianGrid,\n  LabelList,\n  ReferenceLine,\n  XAxis,\n  YAxis,\n} from 'recharts';\n\nimport { cn } from '@/lib/utils';\nimport {\n  CHART_LABEL_FONT_SIZE,\n  CHART_LABEL_MARGIN,\n  ChartContainer,\n  ChartLegend,\n  ChartLegendContent,\n  ChartTooltip,\n  ChartTooltipContent,\n  resolveAnimation,\n  resolveAxisDomain,\n  resolveBrushProps,\n  resolveCartesianLabelPosition,\n  resolveChartReferenceValue,\n  resolveLabelFillClass,\n  resolveReferenceLineProps,\n  resolveRotatedTickAnchor,\n  resolveXAxisHeight,\n  resolveXAxisTitle,\n  resolveYAxisTitle,\n  toLabelFormatter,\n  toReferenceLineList,\n  type ChartConfig,\n  type ChartPalette,\n  type CartesianChartProps,\n  type ChartAnimationProps,\n  type ChartBrushProps,\n  type ChartCurveType,\n  type ChartDataLabelProps,\n  type ChartReferenceLine,\n  type CartesianLabelPosition,\n} from '../chart';\n\n// A typed recharts composition over the shared `Chart` primitives. The two CVA\n// axes are the design's Area-chart variant set: `layout` (independent\n// overlapping areas vs summed on a shared stack) and `fill` (a flat translucent\n// fill vs a vertical gradient). The classes stay empty because recharts' SVG —\n// not CSS — draws the areas: `layout` drives each `<Area>`'s `stackId` and `fill`\n// drives whether it paints from a `<linearGradient>` def or a flat token color.\n// CVA is kept so the variant set is a first-class, spec-conformant part of the\n// API (matched against ui-spec's api.yaml enums) and exposed via `VariantProps`;\n// the resolved values are also mirrored onto `data-layout` / `data-fill`.\nconst areaChartVariants = cva('', {\n  variants: {\n    layout: {\n      single: '',\n      stacked: '',\n    },\n    fill: {\n      solid: '',\n      gradient: '',\n    },\n  },\n  defaultVariants: {\n    layout: 'single',\n    fill: 'gradient',\n  },\n});\n\n/**\n * Style override for one series, keyed by its `dataKeys` entry. Anything left\n * unset falls back to the chart-wide prop, so an entry only states what differs\n * — e.g. a projection band that reads fainter than the actuals beside it.\n */\nexport interface AreaChartAreaSettings {\n  /** Stroke and fill color. Defaults to the series' `config` color. */\n  color?: string;\n  /** Width of this series' top border. Defaults to the chart's `strokeWidth`. */\n  strokeWidth?: number;\n  /** Dash this series' top border. */\n  dashed?: boolean;\n  /** Interpolation for this series only. Defaults to the chart's `curve`. */\n  curveType?: ChartCurveType;\n  /**\n   * Fill opacity for this series. Under `fill=\"gradient\"` it scales the\n   * gradient's own alpha rather than replacing it.\n   */\n  fillOpacity?: number;\n  /** Render this series' per-point dots. Defaults to the chart's `showDots`. */\n  showDots?: boolean;\n  /** Dot radius for this series, in px. Defaults to the chart's `dotSize`. */\n  dotSize?: number;\n  /** Show/hide this series' value labels, overriding the chart's `showLabels`. */\n  showLabel?: boolean;\n  /** Position of this series' value labels. Defaults to the chart's `labelPosition`. */\n  labelPosition?: CartesianLabelPosition;\n}\n\nexport interface AreaChartProps\n  extends Omit<React.ComponentProps<'div'>, 'children'>,\n    VariantProps<typeof areaChartVariants>,\n    CartesianChartProps,\n    ChartAnimationProps,\n    ChartBrushProps,\n    ChartDataLabelProps {\n  /**\n   * The dataviz palette this chart's series are painted from. Series that\n   * state no `color` of their own take a stop of it. See `ChartPalette`.\n   */\n  palette?: ChartPalette;\n  /** Row-per-point data. Each object holds the category key + one numeric field per series (`null` breaks the area unless `connectNulls`). */\n  data: ReadonlyArray<Record<string, string | number | null>>;\n  /**\n   * Per-series map of `label` / `icon` / `tone` (from the shared `Chart`\n   * primitives). Series take their colour from the container's `palette`; each\n   * entry maps a key to a `label` and an optional `tone`.\n   */\n  config: ChartConfig;\n  /** Series to plot — one `<Area>` per key. Each must exist in `config` and in every data row. */\n  dataKeys: string[];\n  /** Category axis key (the shared dimension across rows, e.g. `\"month\"`). */\n  xKey: string;\n  /** Interpolation between points. */\n  curve?: ChartCurveType;\n  /** Stroke width of each area's top border. */\n  strokeWidth?: number;\n  /** Flat-fill opacity — used only when `fill=\"solid\"` (gradient controls its own stops). */\n  fillOpacity?: number;\n  /** Render a dot at each data point. */\n  showDots?: boolean;\n  /** Radius of each point's dot, in px. Its hover dot is 2px larger. */\n  dotSize?: number;\n  /**\n   * Enlarge the hovered point's dot. Defaults to following `showDots`, so pass\n   * it explicitly to get hover dots on a dot-less area (`showDots={false}` with\n   * `showActiveDot`) or a static-only area (dots without the hover one).\n   */\n  showActiveDot?: boolean;\n  /** Bridge `null` gaps in the data instead of breaking the area. */\n  connectNulls?: boolean;\n  /**\n   * Per-series style overrides, keyed by `dataKeys` entry. Series with no entry\n   * render from the chart-wide props.\n   */\n  areaSettings?: Record<string, AreaChartAreaSettings>;\n  /**\n   * One or more dashed reference/average lines on the value axis — a target, a\n   * threshold, or a series mean. Pass a single object or an array to draw\n   * several at once. On a stacked chart the value is read against the stack's\n   * axis, not one series.\n   */\n  referenceLine?: ChartReferenceLine | ChartReferenceLine[];\n  showLegend?: boolean;\n  /** Position of the value labels when `showLabels` is on. Defaults to `top`. */\n  labelPosition?: CartesianLabelPosition;\n}\n\n/**\n * One top-to-bottom fade per series, referenced by each `<Area>`'s `fill`.\n *\n * The ids are scoped by `gradientId` because SVG `<defs>` ids are\n * document-global: two AreaCharts on the same page would otherwise share (and\n * silently overwrite) each other's stops.\n */\nfunction AreaFillGradients({\n  dataKeys,\n  gradientId,\n  colorFor,\n}: {\n  dataKeys: string[];\n  gradientId: string;\n  colorFor: (key: string) => string;\n}) {\n  return (\n    <defs>\n      {dataKeys.map((key) => (\n        <linearGradient\n          key={key}\n          id={`${gradientId}-${key}`}\n          x1=\"0\"\n          y1=\"0\"\n          x2=\"0\"\n          y2=\"1\"\n        >\n          <stop offset=\"5%\" stopColor={colorFor(key)} stopOpacity={0.8} />\n          <stop offset=\"95%\" stopColor={colorFor(key)} stopOpacity={0.1} />\n        </linearGradient>\n      ))}\n    </defs>\n  );\n}\n\nconst AreaChart = React.forwardRef<HTMLDivElement, AreaChartProps>(\n  (\n    {\n      className,\n      config,\n      palette,\n      data,\n      dataKeys,\n      xKey,\n      xAxisLabel,\n      yAxisLabel,\n      yUnit,\n      layout = 'single',\n      fill = 'gradient',\n      curve = 'monotone',\n      strokeWidth = 2,\n      fillOpacity = 0.4,\n      showDots = false,\n      dotSize = 3,\n      showActiveDot,\n      connectNulls = false,\n      areaSettings,\n      referenceLine,\n      showGrid = true,\n      showTooltip = true,\n      showLegend = true,\n      showXAxis = true,\n      showYAxis = true,\n      xTickFormatter,\n      yTickFormatter,\n      xAxisAngle,\n      xAxisInterval,\n      yAxisTickCount,\n      yAxisDomain,\n      gridDashed,\n      gridHorizontal,\n      gridVertical,\n      tooltipContent,\n      animate,\n      animationDuration,\n      animationBegin,\n      animationEasing,\n      showLabels = false,\n      labelPosition,\n      labelFormatter,\n      showBrush = false,\n      brushHeight,\n      brushAriaLabel,\n      ...props\n    },\n    ref\n  ) => {\n    const animation = resolveAnimation({\n      animate,\n      animationDuration,\n      animationBegin,\n      animationEasing,\n    });\n    const isStacked = layout === 'stacked';\n    const areaLabelPosition = resolveCartesianLabelPosition({\n      labelPosition,\n      isStacked,\n    });\n    const isGradient = fill === 'gradient';\n    const referenceLines = toReferenceLineList(referenceLine);\n\n    // A series' `color` override has to reach its gradient stops too, or a\n    // gradient-filled chart would keep painting the `config` color.\n    const colorFor = (key: string) =>\n      areaSettings?.[key]?.color ?? `var(--color-${key})`;\n\n    // The plot inset is needed as soon as *any* series carries outside labels —\n    // a per-series `showLabel` counts, not only the chart-wide `showLabels`.\n    const hasLabels =\n      showLabels ||\n      Object.values(areaSettings ?? {}).some((settings) => settings.showLabel);\n\n    // Axis titles: the X title sits below the ticks; the Y title is rotated in\n    // the left gutter. Passed to recharts' native `label` (themed via the\n    // `.recharts-label` fill selector on the container).\n    const xAxisTitle = resolveXAxisTitle(xAxisLabel);\n    const yAxisTitle = resolveYAxisTitle(yAxisLabel);\n\n    const yDomain = resolveAxisDomain(yAxisDomain);\n\n    const xAxisHeight = resolveXAxisHeight(xAxisLabel, xAxisAngle);\n\n    // recharts renders SVG <defs> once per chart; the gradient ids must be unique\n    // across chart instances on the page. useId gives a stable per-instance id;\n    // strip the colons React emits (invalid in a url(#…) reference) — same guard\n    // the shared ChartContainer applies to its chart id.\n    const gradientId = `area-gradient-${React.useId().replace(/:/g, '')}`;\n\n    return (\n      <div\n        ref={ref}\n        data-layout={layout}\n        data-fill={fill}\n        className={cn(areaChartVariants({ layout, fill }), className)}\n        {...props}\n      >\n        <ChartContainer\n          config={config}\n          palette={palette}\n          className=\"size-full [&_.recharts-label]:fill-foreground\"\n        >\n          <RechartsAreaChart\n            data={data as readonly unknown[]}\n            margin={hasLabels ? CHART_LABEL_MARGIN : undefined}\n          >\n            {isGradient && (\n              <AreaFillGradients\n                dataKeys={dataKeys}\n                gradientId={gradientId}\n                colorFor={colorFor}\n              />\n            )}\n            {showGrid && (\n              <CartesianGrid\n                horizontal={gridHorizontal ?? true}\n                vertical={gridVertical ?? false}\n                strokeDasharray={gridDashed ? '3 3' : undefined}\n              />\n            )}\n            <XAxis\n              dataKey={xKey}\n              type=\"category\"\n              hide={!showXAxis}\n              tickLine={false}\n              axisLine={false}\n              tickMargin={8}\n              tickFormatter={xTickFormatter}\n              angle={xAxisAngle}\n              interval={xAxisInterval}\n              textAnchor={resolveRotatedTickAnchor(xAxisAngle)}\n              height={xAxisHeight}\n              label={xAxisTitle}\n            />\n            <YAxis\n              type=\"number\"\n              hide={!showYAxis}\n              tickLine={false}\n              axisLine={false}\n              unit={yUnit}\n              tickFormatter={yTickFormatter}\n              tickCount={yAxisTickCount}\n              domain={yDomain}\n              width={yAxisLabel ? 72 : undefined}\n              label={yAxisTitle}\n            />\n            {showTooltip && (\n              <ChartTooltip content={tooltipContent ?? <ChartTooltipContent />} />\n            )}\n            {showLegend && <ChartLegend content={<ChartLegendContent />} />}\n            {dataKeys.map((key) => {\n              const settings = areaSettings?.[key];\n              const seriesDots = settings?.showDots ?? showDots;\n              const dotRadius = settings?.dotSize ?? dotSize;\n              // The hover dot follows the static dots unless asked otherwise, so\n              // a chart that sets neither renders exactly as before.\n              const activeDot = showActiveDot ?? seriesDots;\n              const seriesLabel = settings?.showLabel ?? showLabels;\n              const seriesLabelPosition =\n                settings?.labelPosition ?? areaLabelPosition;\n              return (\n                <Area\n                  key={key}\n                  type={settings?.curveType ?? curve ?? 'monotone'}\n                  dataKey={key}\n                  stackId={isStacked ? 'a' : undefined}\n                  stroke={colorFor(key)}\n                  strokeWidth={settings?.strokeWidth ?? strokeWidth}\n                  strokeDasharray={settings?.dashed ? '5 5' : undefined}\n                  fill={\n                    isGradient ? `url(#${gradientId}-${key})` : colorFor(key)\n                  }\n                  fillOpacity={\n                    settings?.fillOpacity ?? (isGradient ? 1 : fillOpacity)\n                  }\n                  dot={seriesDots ? { r: dotRadius } : false}\n                  activeDot={activeDot ? { r: dotRadius + 2 } : false}\n                  connectNulls={connectNulls}\n                  {...animation}\n                >\n                  {seriesLabel && (\n                    <LabelList\n                      dataKey={key}\n                      position={seriesLabelPosition}\n                      formatter={toLabelFormatter(labelFormatter)}\n                      className={resolveLabelFillClass(seriesLabelPosition, {\n                        translucentSeries: true,\n                      })}\n                      fontSize={CHART_LABEL_FONT_SIZE}\n                    />\n                  )}\n                </Area>\n              );\n            })}\n            {/* Annotations draw over the series they describe. */}\n            {referenceLines.map((ref, index) => {\n              const value = resolveChartReferenceValue(ref, data, dataKeys);\n              if (value === undefined) return null;\n              return (\n                <ReferenceLine\n                  key={`${ref.label ?? 'ref'}-${index}`}\n                  y={value}\n                  {...resolveReferenceLineProps(ref.label, ref.labelPosition)}\n                />\n              );\n            })}\n            {showBrush && (\n              <Brush\n                dataKey={xKey}\n                tickFormatter={xTickFormatter}\n                {...resolveBrushProps({ brushHeight, brushAriaLabel })}\n              />\n            )}\n          </RechartsAreaChart>\n        </ChartContainer>\n      </div>\n    );\n  }\n);\nAreaChart.displayName = 'AreaChart';\n\nexport { AreaChart, areaChartVariants };\n"],"names":["areaChartVariants","cva","AreaFillGradients","dataKeys","gradientId","colorFor","jsx","key","jsxs","AreaChart","React","className","config","palette","data","xKey","xAxisLabel","yAxisLabel","yUnit","layout","fill","curve","strokeWidth","fillOpacity","showDots","dotSize","showActiveDot","connectNulls","areaSettings","referenceLine","showGrid","showTooltip","showLegend","showXAxis","showYAxis","xTickFormatter","yTickFormatter","xAxisAngle","xAxisInterval","yAxisTickCount","yAxisDomain","gridDashed","gridHorizontal","gridVertical","tooltipContent","animate","animationDuration","animationBegin","animationEasing","showLabels","labelPosition","labelFormatter","showBrush","brushHeight","brushAriaLabel","props","ref","animation","resolveAnimation","isStacked","areaLabelPosition","resolveCartesianLabelPosition","isGradient","referenceLines","toReferenceLineList","_a","hasLabels","settings","xAxisTitle","resolveXAxisTitle","yAxisTitle","resolveYAxisTitle","yDomain","resolveAxisDomain","xAxisHeight","resolveXAxisHeight","cn","ChartContainer","RechartsAreaChart","CHART_LABEL_MARGIN","CartesianGrid","XAxis","resolveRotatedTickAnchor","YAxis","ChartTooltip","ChartTooltipContent","ChartLegend","ChartLegendContent","seriesDots","dotRadius","activeDot","seriesLabel","seriesLabelPosition","Area","LabelList","toLabelFormatter","resolveLabelFillClass","CHART_LABEL_FONT_SIZE","index","value","resolveChartReferenceValue","ReferenceLine","resolveReferenceLineProps","Brush","resolveBrushProps"],"mappings":";;;;;;;AAyDA,MAAMA,KAAoBC,GAAI,IAAI;AAAA,EAChC,UAAU;AAAA,IACR,QAAQ;AAAA,MACN,QAAQ;AAAA,MACR,SAAS;AAAA,IAAA;AAAA,IAEX,MAAM;AAAA,MACJ,OAAO;AAAA,MACP,UAAU;AAAA,IAAA;AAAA,EACZ;AAAA,EAEF,iBAAiB;AAAA,IACf,QAAQ;AAAA,IACR,MAAM;AAAA,EAAA;AAEV,CAAC;AAiGD,SAASC,GAAkB;AAAA,EACzB,UAAAC;AAAA,EACA,YAAAC;AAAA,EACA,UAAAC;AACF,GAIG;AACD,SACE,gBAAAC,EAAC,QAAA,EACE,UAAAH,EAAS,IAAI,CAACI,MACb,gBAAAC;AAAA,IAAC;AAAA,IAAA;AAAA,MAEC,IAAI,GAAGJ,CAAU,IAAIG,CAAG;AAAA,MACxB,IAAG;AAAA,MACH,IAAG;AAAA,MACH,IAAG;AAAA,MACH,IAAG;AAAA,MAEH,UAAA;AAAA,QAAA,gBAAAD,EAAC,QAAA,EAAK,QAAO,MAAK,WAAWD,EAASE,CAAG,GAAG,aAAa,KAAK;AAAA,QAC9D,gBAAAD,EAAC,UAAK,QAAO,OAAM,WAAWD,EAASE,CAAG,GAAG,aAAa,IAAA,CAAK;AAAA,MAAA;AAAA,IAAA;AAAA,IAR1DA;AAAA,EAAA,CAUR,GACH;AAEJ;AAEA,MAAME,KAAYC,EAAM;AAAA,EACtB,CACE;AAAA,IACE,WAAAC;AAAA,IACA,QAAAC;AAAA,IACA,SAAAC;AAAA,IACA,MAAAC;AAAA,IACA,UAAAX;AAAA,IACA,MAAAY;AAAA,IACA,YAAAC;AAAA,IACA,YAAAC;AAAA,IACA,OAAAC;AAAA,IACA,QAAAC,IAAS;AAAA,IACT,MAAAC,IAAO;AAAA,IACP,OAAAC,IAAQ;AAAA,IACR,aAAAC,IAAc;AAAA,IACd,aAAAC,IAAc;AAAA,IACd,UAAAC,IAAW;AAAA,IACX,SAAAC,IAAU;AAAA,IACV,eAAAC;AAAA,IACA,cAAAC,IAAe;AAAA,IACf,cAAAC;AAAA,IACA,eAAAC;AAAA,IACA,UAAAC,IAAW;AAAA,IACX,aAAAC,IAAc;AAAA,IACd,YAAAC,IAAa;AAAA,IACb,WAAAC,IAAY;AAAA,IACZ,WAAAC,IAAY;AAAA,IACZ,gBAAAC;AAAA,IACA,gBAAAC;AAAA,IACA,YAAAC;AAAA,IACA,eAAAC;AAAA,IACA,gBAAAC;AAAA,IACA,aAAAC;AAAA,IACA,YAAAC;AAAA,IACA,gBAAAC;AAAA,IACA,cAAAC;AAAA,IACA,gBAAAC;AAAA,IACA,SAAAC;AAAA,IACA,mBAAAC;AAAA,IACA,gBAAAC;AAAA,IACA,iBAAAC;AAAA,IACA,YAAAC,IAAa;AAAA,IACb,eAAAC;AAAA,IACA,gBAAAC;AAAA,IACA,WAAAC,KAAY;AAAA,IACZ,aAAAC;AAAA,IACA,gBAAAC;AAAA,IACA,GAAGC;AAAA,EAAA,GAELC,OACG;AACH,UAAMC,KAAYC,GAAiB;AAAA,MACjC,SAAAb;AAAA,MACA,mBAAAC;AAAA,MACA,gBAAAC;AAAA,MACA,iBAAAC;AAAA,IAAA,CACD,GACKW,IAAYxC,MAAW,WACvByC,KAAoBC,GAA8B;AAAA,MACtD,eAAAX;AAAA,MACA,WAAAS;AAAA,IAAA,CACD,GACKG,IAAa1C,MAAS,YACtB2C,KAAiBC,GAAoBnC,CAAa,GAIlDxB,IAAW,CAACE,MAAA;;AAChB,eAAA0D,IAAArC,KAAA,gBAAAA,EAAerB,OAAf,gBAAA0D,EAAqB,UAAS,eAAe1D,CAAG;AAAA,OAI5C2D,KACJjB,KACA,OAAO,OAAOrB,KAAgB,EAAE,EAAE,KAAK,CAACuC,MAAaA,EAAS,SAAS,GAKnEC,KAAaC,GAAkBrD,CAAU,GACzCsD,KAAaC,GAAkBtD,CAAU,GAEzCuD,KAAUC,GAAkBjC,CAAW,GAEvCkC,KAAcC,GAAmB3D,GAAYqB,CAAU,GAMvDjC,IAAa,iBAAiBM,EAAM,MAAA,EAAQ,QAAQ,MAAM,EAAE,CAAC;AAEnE,WACE,gBAAAJ;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,KAAAkD;AAAA,QACA,eAAarC;AAAA,QACb,aAAWC;AAAA,QACX,WAAWwD,GAAG5E,GAAkB,EAAE,QAAAmB,GAAQ,MAAAC,EAAA,CAAM,GAAGT,CAAS;AAAA,QAC3D,GAAG4C;AAAA,QAEJ,UAAA,gBAAAjD;AAAA,UAACuE;AAAA,UAAA;AAAA,YACC,QAAAjE;AAAA,YACA,SAAAC;AAAA,YACA,WAAU;AAAA,YAEV,UAAA,gBAAAL;AAAA,cAACsE;AAAAA,cAAA;AAAA,gBACC,MAAAhE;AAAA,gBACA,QAAQoD,KAAYa,KAAqB;AAAA,gBAExC,UAAA;AAAA,kBAAAjB,KACC,gBAAAxD;AAAA,oBAACJ;AAAA,oBAAA;AAAA,sBACC,UAAAC;AAAA,sBACA,YAAAC;AAAA,sBACA,UAAAC;AAAA,oBAAA;AAAA,kBAAA;AAAA,kBAGHyB,KACC,gBAAAxB;AAAA,oBAAC0E;AAAA,oBAAA;AAAA,sBACC,YAAYtC,KAAkB;AAAA,sBAC9B,UAAUC,KAAgB;AAAA,sBAC1B,iBAAiBF,IAAa,QAAQ;AAAA,oBAAA;AAAA,kBAAA;AAAA,kBAG1C,gBAAAnC;AAAA,oBAAC2E;AAAA,oBAAA;AAAA,sBACC,SAASlE;AAAA,sBACT,MAAK;AAAA,sBACL,MAAM,CAACkB;AAAA,sBACP,UAAU;AAAA,sBACV,UAAU;AAAA,sBACV,YAAY;AAAA,sBACZ,eAAeE;AAAA,sBACf,OAAOE;AAAA,sBACP,UAAUC;AAAA,sBACV,YAAY4C,GAAyB7C,CAAU;AAAA,sBAC/C,QAAQqC;AAAA,sBACR,OAAON;AAAA,oBAAA;AAAA,kBAAA;AAAA,kBAET,gBAAA9D;AAAA,oBAAC6E;AAAA,oBAAA;AAAA,sBACC,MAAK;AAAA,sBACL,MAAM,CAACjD;AAAA,sBACP,UAAU;AAAA,sBACV,UAAU;AAAA,sBACV,MAAMhB;AAAA,sBACN,eAAekB;AAAA,sBACf,WAAWG;AAAA,sBACX,QAAQiC;AAAA,sBACR,OAAOvD,IAAa,KAAK;AAAA,sBACzB,OAAOqD;AAAA,oBAAA;AAAA,kBAAA;AAAA,kBAERvC,KACC,gBAAAzB,EAAC8E,IAAA,EAAa,SAASxC,KAAkB,gBAAAtC,EAAC+E,MAAoB,GAAI;AAAA,kBAEnErD,KAAc,gBAAA1B,EAACgF,IAAA,EAAY,SAAS,gBAAAhF,EAACiF,MAAmB,GAAI;AAAA,kBAC5DpF,EAAS,IAAI,CAACI,MAAQ;AACrB,0BAAM4D,IAAWvC,KAAA,gBAAAA,EAAerB,IAC1BiF,KAAarB,KAAA,gBAAAA,EAAU,aAAY3C,GACnCiE,KAAYtB,KAAA,gBAAAA,EAAU,YAAW1C,GAGjCiE,KAAYhE,KAAiB8D,GAC7BG,MAAcxB,KAAA,gBAAAA,EAAU,cAAalB,GACrC2C,KACJzB,KAAA,gBAAAA,EAAU,kBAAiBP;AAC7B,2BACE,gBAAAtD;AAAA,sBAACuF;AAAA,sBAAA;AAAA,wBAEC,OAAM1B,KAAA,gBAAAA,EAAU,cAAa9C,KAAS;AAAA,wBACtC,SAASd;AAAA,wBACT,SAASoD,IAAY,MAAM;AAAA,wBAC3B,QAAQtD,EAASE,CAAG;AAAA,wBACpB,cAAa4D,KAAA,gBAAAA,EAAU,gBAAe7C;AAAA,wBACtC,iBAAiB6C,KAAA,QAAAA,EAAU,SAAS,QAAQ;AAAA,wBAC5C,MACEL,IAAa,QAAQ1D,CAAU,IAAIG,CAAG,MAAMF,EAASE,CAAG;AAAA,wBAE1D,cACE4D,KAAA,gBAAAA,EAAU,iBAAgBL,IAAa,IAAIvC;AAAA,wBAE7C,KAAKiE,IAAa,EAAE,GAAGC,MAAc;AAAA,wBACrC,WAAWC,KAAY,EAAE,GAAGD,IAAY,MAAM;AAAA,wBAC9C,cAAA9D;AAAA,wBACC,GAAG8B;AAAA,wBAEH,UAAAkC,MACC,gBAAArF;AAAA,0BAACwF;AAAA,0BAAA;AAAA,4BACC,SAASvF;AAAA,4BACT,UAAUqF;AAAA,4BACV,WAAWG,GAAiB5C,CAAc;AAAA,4BAC1C,WAAW6C,GAAsBJ,GAAqB;AAAA,8BACpD,mBAAmB;AAAA,4BAAA,CACpB;AAAA,4BACD,UAAUK;AAAA,0BAAA;AAAA,wBAAA;AAAA,sBACZ;AAAA,sBA3BG1F;AAAA,oBAAA;AAAA,kBA+BX,CAAC;AAAA,kBAEAwD,GAAe,IAAI,CAACP,GAAK0C,MAAU;AAClC,0BAAMC,IAAQC,GAA2B5C,GAAK1C,GAAMX,CAAQ;AAC5D,2BAAIgG,MAAU,SAAkB,OAE9B,gBAAA7F;AAAA,sBAAC+F;AAAA,sBAAA;AAAA,wBAEC,GAAGF;AAAA,wBACF,GAAGG,GAA0B9C,EAAI,OAAOA,EAAI,aAAa;AAAA,sBAAA;AAAA,sBAFrD,GAAGA,EAAI,SAAS,KAAK,IAAI0C,CAAK;AAAA,oBAAA;AAAA,kBAKzC,CAAC;AAAA,kBACA9C,MACC,gBAAA9C;AAAA,oBAACiG;AAAA,oBAAA;AAAA,sBACC,SAASxF;AAAA,sBACT,eAAeoB;AAAA,sBACd,GAAGqE,GAAkB,EAAE,aAAAnD,IAAa,gBAAAC,IAAgB;AAAA,oBAAA;AAAA,kBAAA;AAAA,gBACvD;AAAA,cAAA;AAAA,YAAA;AAAA,UAEJ;AAAA,QAAA;AAAA,MACF;AAAA,IAAA;AAAA,EAGN;AACF;AACA7C,GAAU,cAAc;"}

package/dist/components/ui/avatar/avatar.js

@@ -1,9 +1,9 @@
 import { jsx as t } from "react/jsx-runtime";
 import * as o from "react";
 import { Avatar as v } from "@base-ui/react/avatar";
-import { cva as c } from "../../../node_modules/.pnpm/class-variance-authority@0.7.1/node_modules/class-variance-authority/dist/index.js";
+import { cva as d } from "../../../node_modules/.pnpm/class-variance-authority@0.7.1/node_modules/class-variance-authority/dist/index.js";
 import { cn as l } from "../../../lib/utils.js";
-const s = c(
+const g = d(
   "relative inline-flex shrink-0 select-none items-center justify-center overflow-hidden size-[var(--ui-avatar-global-avatar-size)] rounded-[var(--ui-avatar-global-avatar-border-border-radius)] [box-shadow:0_0_0_var(--ui-avatar-global-avatar-border-border-width)_var(--ui-avatar-global-avatar-border-color)] text-xs font-semibold leading-4",
   {
     variants: {
@@ -22,16 +22,7 @@ const s = c(
       color: "teal"
     }
   }
-), b = o.forwardRef(({ className: a, color: r, ...e }, i) => /* @__PURE__ */ t(
-  v.Root,
-  {
-    ref: i,
-    className: l(s({ color: r }), a),
-    ...e
-  }
-));
-b.displayName = "Avatar";
-const u = o.forwardRef(({ className: a, ...r }, e) => /* @__PURE__ */ t(
+), m = o.forwardRef(({ className: a, ...r }, e) => /* @__PURE__ */ t(
   v.Image,
   {
     ref: e,
@@ -39,8 +30,8 @@ const u = o.forwardRef(({ className: a, ...r }, e) => /* @__PURE__ */ t(
     ...r
   }
 ));
-u.displayName = "AvatarImage";
-const n = o.forwardRef(({ className: a, ...r }, e) => /* @__PURE__ */ t(
+m.displayName = "AvatarImage";
+const c = o.forwardRef(({ className: a, ...r }, e) => /* @__PURE__ */ t(
   v.Fallback,
   {
     ref: e,
@@ -48,8 +39,28 @@ const n = o.forwardRef(({ className: a, ...r }, e) => /* @__PURE__ */ t(
     ...r
   }
 ));
-n.displayName = "AvatarFallback";
-const d = o.forwardRef(
+c.displayName = "AvatarFallback";
+const f = o.forwardRef(
+  ({
+    className: a,
+    color: r,
+    variant: e = "text",
+    label: s = "SB",
+    icon: b,
+    children: i,
+    ...u
+  }, n) => /* @__PURE__ */ t(
+    v.Root,
+    {
+      ref: n,
+      className: l(g({ color: r }), a),
+      ...u,
+      children: i !== void 0 ? i : e === "icon" ? b : /* @__PURE__ */ t(c, { children: s })
+    }
+  )
+);
+f.displayName = "Avatar";
+const x = o.forwardRef(
   ({ className: a, ...r }, e) => /* @__PURE__ */ t(
     "div",
     {
@@ -62,12 +73,12 @@ const d = o.forwardRef(
     }
   )
 );
-d.displayName = "AvatarGroup";
+x.displayName = "AvatarGroup";
 export {
-  b as Avatar,
-  n as AvatarFallback,
-  d as AvatarGroup,
-  u as AvatarImage,
-  s as avatarVariants
+  f as Avatar,
+  c as AvatarFallback,
+  x as AvatarGroup,
+  m as AvatarImage,
+  g as avatarVariants
 };
 //# sourceMappingURL=avatar.js.map

package/dist/components/ui/avatar/avatar.js.map

@@ -1 +1 @@
-{"version":3,"file":"avatar.js","sources":["../../../../src/components/ui/avatar/avatar.tsx"],"sourcesContent":["import * as React from 'react';\nimport { Avatar as AvatarPrimitive } from '@base-ui/react/avatar';\nimport { cva, type VariantProps } from 'class-variance-authority';\n\nimport { cn } from '@/lib/utils';\n\n// Wraps Base UI's Avatar primitive (Root / Image / Fallback), themed by the\n// dedicated next-gen `--ui-avatar-*` token tier from @acronis-platform/tokens-pd.\n// A 32px circle (`--ui-avatar-global-avatar-size` / `-border-border-radius`) with a 2px\n// ring (`-border-border-width` / `-border-color`) — the ring is what visually\n// separates avatars when they overlap in an `AvatarGroup`. When no image is set\n// (or it fails to load) the `AvatarFallback` shows initials.\n//\n// The ring is a `box-shadow`, not a CSS `border`: Figma draws the 2px stroke\n// with `strokeAlign: OUTSIDE`, so the 32px is the *colored circle* and the ring\n// sits outside it. A CSS border would be drawn inside the border-box, shrinking\n// the visible circle to 28px (PLTFRM-92393). A box-shadow ring paints outside\n// without inflating the 32px layout box, so the `AvatarGroup` overlap step\n// (32px − 6px gap) still matches the design.\n//\n// It is written as a raw `[box-shadow:…]` arbitrary property, not Tailwind's\n// `shadow-[…]` utility: the utility routes the value through `--tw-shadow-color`\n// (`0 0 0 var(--tw-shadow-color, <spread>) <color>`), which resolves\n// inconsistently for a spread-only ring across engine versions. The raw property\n// emits the literal declaration so every renderer draws the same 2px outset ring.\n//\n// `color` selects one of the eight Figma color schemes; it tints the fallback\n// background (`--ui-avatar-color-<scheme>`) and the initials\n// (`--ui-avatar-label-color-<scheme>`). Initials use the 12px/16px/600 caption\n// style baked into the design (`text-xs font-semibold leading-4`).\nconst avatarVariants = cva(\n  'relative inline-flex shrink-0 select-none items-center justify-center overflow-hidden ' +\n    'size-[var(--ui-avatar-global-avatar-size)] rounded-[var(--ui-avatar-global-avatar-border-border-radius)] ' +\n    '[box-shadow:0_0_0_var(--ui-avatar-global-avatar-border-border-width)_var(--ui-avatar-global-avatar-border-color)] ' +\n    'text-xs font-semibold leading-4',\n  {\n    variants: {\n      color: {\n        teal: 'bg-[var(--ui-avatar-color-teal)] text-[var(--ui-avatar-label-color-teal)]',\n        violet:\n          'bg-[var(--ui-avatar-color-violet)] text-[var(--ui-avatar-label-color-violet)]',\n        red: 'bg-[var(--ui-avatar-color-red)] text-[var(--ui-avatar-label-color-red)]',\n        yellow:\n          'bg-[var(--ui-avatar-color-yellow)] text-[var(--ui-avatar-label-color-yellow)]',\n        orange:\n          'bg-[var(--ui-avatar-color-orange)] text-[var(--ui-avatar-label-color-orange)]',\n        blue: 'bg-[var(--ui-avatar-color-blue)] text-[var(--ui-avatar-label-color-blue)]',\n        gray: 'bg-[var(--ui-avatar-color-gray)] text-[var(--ui-avatar-label-color-gray)]',\n        green:\n          'bg-[var(--ui-avatar-color-green)] text-[var(--ui-avatar-label-color-green)]',\n      },\n    },\n    defaultVariants: {\n      color: 'teal',\n    },\n  }\n);\n\nexport interface AvatarProps\n  extends\n    React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Root>,\n    VariantProps<typeof avatarVariants> {}\n\n/**\n * A user/entity avatar: a colored circle showing an image or initials. Compose\n * `AvatarImage` and/or `AvatarFallback` inside; stack several in `AvatarGroup`.\n */\nconst Avatar = React.forwardRef<\n  React.ElementRef<typeof AvatarPrimitive.Root>,\n  AvatarProps\n>(({ className, color, ...props }, ref) => (\n  <AvatarPrimitive.Root\n    ref={ref}\n    className={cn(avatarVariants({ color }), className)}\n    {...props}\n  />\n));\nAvatar.displayName = 'Avatar';\n\nexport type AvatarImageProps = React.ComponentPropsWithoutRef<\n  typeof AvatarPrimitive.Image\n>;\n\n/** The avatar image; hidden by Base UI until it loads, revealing the fallback. */\nconst AvatarImage = React.forwardRef<\n  React.ElementRef<typeof AvatarPrimitive.Image>,\n  AvatarImageProps\n>(({ className, ...props }, ref) => (\n  <AvatarPrimitive.Image\n    ref={ref}\n    className={cn('size-full object-cover', className)}\n    {...props}\n  />\n));\nAvatarImage.displayName = 'AvatarImage';\n\nexport type AvatarFallbackProps = React.ComponentPropsWithoutRef<\n  typeof AvatarPrimitive.Fallback\n>;\n\n/** Shown when there's no image (or it fails) — typically the user's initials. */\nconst AvatarFallback = React.forwardRef<\n  React.ElementRef<typeof AvatarPrimitive.Fallback>,\n  AvatarFallbackProps\n>(({ className, ...props }, ref) => (\n  <AvatarPrimitive.Fallback\n    ref={ref}\n    className={cn('flex size-full items-center justify-center', className)}\n    {...props}\n  />\n));\nAvatarFallback.displayName = 'AvatarFallback';\n\nexport type AvatarGroupProps = React.HTMLAttributes<HTMLDivElement>;\n\n/**\n * Overlapping stack of avatars. Each avatar after the first is pulled left by\n * `--ui-avatar-global-avatar-group-gap` (a negative offset), so their 2px\n * borders form the layered look; later avatars render above earlier ones.\n */\nconst AvatarGroup = React.forwardRef<HTMLDivElement, AvatarGroupProps>(\n  ({ className, ...props }, ref) => (\n    <div\n      ref={ref}\n      className={cn(\n        'flex items-center [&>*:not(:first-child)]:ms-[var(--ui-avatar-global-avatar-group-gap)]',\n        className\n      )}\n      {...props}\n    />\n  )\n);\nAvatarGroup.displayName = 'AvatarGroup';\n\nexport { Avatar, AvatarImage, AvatarFallback, AvatarGroup, avatarVariants };\n"],"names":["avatarVariants","cva","Avatar","React","className","color","props","ref","jsx","AvatarPrimitive","cn","AvatarImage","AvatarFallback","AvatarGroup"],"mappings":";;;;;AA8BA,MAAMA,IAAiBC;AAAA,EACrB;AAAA,EAIA;AAAA,IACE,UAAU;AAAA,MACR,OAAO;AAAA,QACL,MAAM;AAAA,QACN,QACE;AAAA,QACF,KAAK;AAAA,QACL,QACE;AAAA,QACF,QACE;AAAA,QACF,MAAM;AAAA,QACN,MAAM;AAAA,QACN,OACE;AAAA,MAAA;AAAA,IACJ;AAAA,IAEF,iBAAiB;AAAA,MACf,OAAO;AAAA,IAAA;AAAA,EACT;AAEJ,GAWMC,IAASC,EAAM,WAGnB,CAAC,EAAE,WAAAC,GAAW,OAAAC,GAAO,GAAGC,KAASC,MACjC,gBAAAC;AAAA,EAACC,EAAgB;AAAA,EAAhB;AAAA,IACC,KAAAF;AAAA,IACA,WAAWG,EAAGV,EAAe,EAAE,OAAAK,EAAA,CAAO,GAAGD,CAAS;AAAA,IACjD,GAAGE;AAAA,EAAA;AACN,CACD;AACDJ,EAAO,cAAc;AAOrB,MAAMS,IAAcR,EAAM,WAGxB,CAAC,EAAE,WAAAC,GAAW,GAAGE,EAAA,GAASC,MAC1B,gBAAAC;AAAA,EAACC,EAAgB;AAAA,EAAhB;AAAA,IACC,KAAAF;AAAA,IACA,WAAWG,EAAG,0BAA0BN,CAAS;AAAA,IAChD,GAAGE;AAAA,EAAA;AACN,CACD;AACDK,EAAY,cAAc;AAO1B,MAAMC,IAAiBT,EAAM,WAG3B,CAAC,EAAE,WAAAC,GAAW,GAAGE,EAAA,GAASC,MAC1B,gBAAAC;AAAA,EAACC,EAAgB;AAAA,EAAhB;AAAA,IACC,KAAAF;AAAA,IACA,WAAWG,EAAG,8CAA8CN,CAAS;AAAA,IACpE,GAAGE;AAAA,EAAA;AACN,CACD;AACDM,EAAe,cAAc;AAS7B,MAAMC,IAAcV,EAAM;AAAA,EACxB,CAAC,EAAE,WAAAC,GAAW,GAAGE,EAAA,GAASC,MACxB,gBAAAC;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,KAAAD;AAAA,MACA,WAAWG;AAAA,QACT;AAAA,QACAN;AAAA,MAAA;AAAA,MAED,GAAGE;AAAA,IAAA;AAAA,EAAA;AAGV;AACAO,EAAY,cAAc;"}
+{"version":3,"file":"avatar.js","sources":["../../../../src/components/ui/avatar/avatar.tsx"],"sourcesContent":["import * as React from 'react';\nimport { Avatar as AvatarPrimitive } from '@base-ui/react/avatar';\nimport { cva, type VariantProps } from 'class-variance-authority';\n\nimport { cn } from '@/lib/utils';\n\n// Wraps Base UI's Avatar primitive (Root / Image / Fallback), themed by the\n// dedicated next-gen `--ui-avatar-*` token tier from @acronis-platform/tokens-pd.\n// A 32px circle (`--ui-avatar-global-avatar-size` / `-border-border-radius`) with a 2px\n// ring (`-border-border-width` / `-border-color`) — the ring is what visually\n// separates avatars when they overlap in an `AvatarGroup`. When no image is set\n// (or it fails to load) the `AvatarFallback` shows initials.\n//\n// `variant`/`label`/`icon` are a convenience for the common no-photo case (the\n// Figma component has no \"image\" variant at all — just Text/Icon): with no\n// `children` composed, Avatar auto-renders either `label` (Text) or `icon`\n// (Icon). Composing `AvatarImage`/`AvatarFallback` as `children` — for the real\n// photo-with-fallback case — always takes precedence over both.\n//\n// \"No `children` composed\" means `children === undefined` specifically, not\n// merely falsy. An explicit `null` child is a deliberate \"render nothing\" and\n// has to stay empty: `timeline.tsx`'s marker passes\n// `icon ?? (initials ? <AvatarFallback/> : null)`, so a blank marker resolves to\n// `null`, and a `children ?? …` check would paint the default 'SB' label over\n// what should be an empty dot.\n//\n// The ring is a `box-shadow`, not a CSS `border`: Figma draws the 2px stroke\n// with `strokeAlign: OUTSIDE`, so the 32px is the *colored circle* and the ring\n// sits outside it. A CSS border would be drawn inside the border-box, shrinking\n// the visible circle to 28px (PLTFRM-92393). A box-shadow ring paints outside\n// without inflating the 32px layout box, so the `AvatarGroup` overlap step\n// (32px − 6px gap) still matches the design.\n//\n// It is written as a raw `[box-shadow:…]` arbitrary property, not Tailwind's\n// `shadow-[…]` utility: the utility routes the value through `--tw-shadow-color`\n// (`0 0 0 var(--tw-shadow-color, <spread>) <color>`), which resolves\n// inconsistently for a spread-only ring across engine versions. The raw property\n// emits the literal declaration so every renderer draws the same 2px outset ring.\n//\n// `color` selects one of the eight Figma color schemes; it tints the fallback\n// background (`--ui-avatar-color-<scheme>`) and the initials\n// (`--ui-avatar-label-color-<scheme>`). Initials use the 12px/16px/600 caption\n// style baked into the design (`text-xs font-semibold leading-4`).\nconst avatarVariants = cva(\n  'relative inline-flex shrink-0 select-none items-center justify-center overflow-hidden ' +\n    'size-[var(--ui-avatar-global-avatar-size)] rounded-[var(--ui-avatar-global-avatar-border-border-radius)] ' +\n    '[box-shadow:0_0_0_var(--ui-avatar-global-avatar-border-border-width)_var(--ui-avatar-global-avatar-border-color)] ' +\n    'text-xs font-semibold leading-4',\n  {\n    variants: {\n      color: {\n        teal: 'bg-[var(--ui-avatar-color-teal)] text-[var(--ui-avatar-label-color-teal)]',\n        violet:\n          'bg-[var(--ui-avatar-color-violet)] text-[var(--ui-avatar-label-color-violet)]',\n        red: 'bg-[var(--ui-avatar-color-red)] text-[var(--ui-avatar-label-color-red)]',\n        yellow:\n          'bg-[var(--ui-avatar-color-yellow)] text-[var(--ui-avatar-label-color-yellow)]',\n        orange:\n          'bg-[var(--ui-avatar-color-orange)] text-[var(--ui-avatar-label-color-orange)]',\n        blue: 'bg-[var(--ui-avatar-color-blue)] text-[var(--ui-avatar-label-color-blue)]',\n        gray: 'bg-[var(--ui-avatar-color-gray)] text-[var(--ui-avatar-label-color-gray)]',\n        green:\n          'bg-[var(--ui-avatar-color-green)] text-[var(--ui-avatar-label-color-green)]',\n      },\n    },\n    defaultVariants: {\n      color: 'teal',\n    },\n  }\n);\n\nexport type AvatarImageProps = React.ComponentPropsWithoutRef<\n  typeof AvatarPrimitive.Image\n>;\n\n/** The avatar image; hidden by Base UI until it loads, revealing the fallback. */\nconst AvatarImage = React.forwardRef<\n  React.ElementRef<typeof AvatarPrimitive.Image>,\n  AvatarImageProps\n>(({ className, ...props }, ref) => (\n  <AvatarPrimitive.Image\n    ref={ref}\n    className={cn('size-full object-cover', className)}\n    {...props}\n  />\n));\nAvatarImage.displayName = 'AvatarImage';\n\nexport type AvatarFallbackProps = React.ComponentPropsWithoutRef<\n  typeof AvatarPrimitive.Fallback\n>;\n\n/** Shown when there's no image (or it fails) — typically the user's initials. */\nconst AvatarFallback = React.forwardRef<\n  React.ElementRef<typeof AvatarPrimitive.Fallback>,\n  AvatarFallbackProps\n>(({ className, ...props }, ref) => (\n  <AvatarPrimitive.Fallback\n    ref={ref}\n    className={cn('flex size-full items-center justify-center', className)}\n    {...props}\n  />\n));\nAvatarFallback.displayName = 'AvatarFallback';\n\nexport interface AvatarProps\n  extends\n    React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Root>,\n    VariantProps<typeof avatarVariants> {\n  /**\n   * Selects the auto-rendered fallback content when no `children` are\n   * composed: initials (`label`) or an `icon`. Ignored once `children` (e.g.\n   * `AvatarImage`/`AvatarFallback`) are composed directly — including an\n   * explicit `null`, which renders an empty circle.\n   */\n  variant?: 'text' | 'icon';\n  /**\n   * Initials shown for the `text` variant when no `children` are composed\n   * (i.e. `children` is `undefined`).\n   */\n  label?: string;\n  /**\n   * Icon shown for the `icon` variant when no `children` are composed\n   * (i.e. `children` is `undefined`).\n   */\n  icon?: React.ReactNode;\n}\n\n/**\n * A user/entity avatar: a colored circle showing an image, initials, or an\n * icon. Compose `AvatarImage`/`AvatarFallback` for the photo-with-fallback\n * case, or use `variant`/`label`/`icon` for a quick text or icon badge; stack\n * several in `AvatarGroup`.\n */\nconst Avatar = React.forwardRef<\n  React.ElementRef<typeof AvatarPrimitive.Root>,\n  AvatarProps\n>(\n  (\n    {\n      className,\n      color,\n      variant = 'text',\n      label = 'SB',\n      icon,\n      children,\n      ...props\n    },\n    ref\n  ) => (\n    <AvatarPrimitive.Root\n      ref={ref}\n      className={cn(avatarVariants({ color }), className)}\n      {...props}\n    >\n      {children !== undefined ? (\n        children\n      ) : variant === 'icon' ? (\n        icon\n      ) : (\n        <AvatarFallback>{label}</AvatarFallback>\n      )}\n    </AvatarPrimitive.Root>\n  )\n);\nAvatar.displayName = 'Avatar';\n\nexport type AvatarGroupProps = React.HTMLAttributes<HTMLDivElement>;\n\n/**\n * Overlapping stack of avatars. Each avatar after the first is pulled left by\n * `--ui-avatar-global-avatar-group-gap` (a negative offset), so their 2px\n * borders form the layered look; later avatars render above earlier ones.\n */\nconst AvatarGroup = React.forwardRef<HTMLDivElement, AvatarGroupProps>(\n  ({ className, ...props }, ref) => (\n    <div\n      ref={ref}\n      className={cn(\n        'flex items-center [&>*:not(:first-child)]:ms-[var(--ui-avatar-global-avatar-group-gap)]',\n        className\n      )}\n      {...props}\n    />\n  )\n);\nAvatarGroup.displayName = 'AvatarGroup';\n\nexport { Avatar, AvatarImage, AvatarFallback, AvatarGroup, avatarVariants };\n"],"names":["avatarVariants","cva","AvatarImage","React","className","props","ref","jsx","AvatarPrimitive","cn","AvatarFallback","Avatar","color","variant","label","icon","children","AvatarGroup"],"mappings":";;;;;AA2CA,MAAMA,IAAiBC;AAAA,EACrB;AAAA,EAIA;AAAA,IACE,UAAU;AAAA,MACR,OAAO;AAAA,QACL,MAAM;AAAA,QACN,QACE;AAAA,QACF,KAAK;AAAA,QACL,QACE;AAAA,QACF,QACE;AAAA,QACF,MAAM;AAAA,QACN,MAAM;AAAA,QACN,OACE;AAAA,MAAA;AAAA,IACJ;AAAA,IAEF,iBAAiB;AAAA,MACf,OAAO;AAAA,IAAA;AAAA,EACT;AAEJ,GAOMC,IAAcC,EAAM,WAGxB,CAAC,EAAE,WAAAC,GAAW,GAAGC,EAAA,GAASC,MAC1B,gBAAAC;AAAA,EAACC,EAAgB;AAAA,EAAhB;AAAA,IACC,KAAAF;AAAA,IACA,WAAWG,EAAG,0BAA0BL,CAAS;AAAA,IAChD,GAAGC;AAAA,EAAA;AACN,CACD;AACDH,EAAY,cAAc;AAO1B,MAAMQ,IAAiBP,EAAM,WAG3B,CAAC,EAAE,WAAAC,GAAW,GAAGC,EAAA,GAASC,MAC1B,gBAAAC;AAAA,EAACC,EAAgB;AAAA,EAAhB;AAAA,IACC,KAAAF;AAAA,IACA,WAAWG,EAAG,8CAA8CL,CAAS;AAAA,IACpE,GAAGC;AAAA,EAAA;AACN,CACD;AACDK,EAAe,cAAc;AA+B7B,MAAMC,IAASR,EAAM;AAAA,EAInB,CACE;AAAA,IACE,WAAAC;AAAA,IACA,OAAAQ;AAAA,IACA,SAAAC,IAAU;AAAA,IACV,OAAAC,IAAQ;AAAA,IACR,MAAAC;AAAA,IACA,UAAAC;AAAA,IACA,GAAGX;AAAA,EAAA,GAELC,MAEA,gBAAAC;AAAA,IAACC,EAAgB;AAAA,IAAhB;AAAA,MACC,KAAAF;AAAA,MACA,WAAWG,EAAGT,EAAe,EAAE,OAAAY,EAAA,CAAO,GAAGR,CAAS;AAAA,MACjD,GAAGC;AAAA,MAEH,UAAAW,MAAa,SACZA,IACEH,MAAY,SACdE,IAEA,gBAAAR,EAACG,KAAgB,UAAAI,EAAA,CAAM;AAAA,IAAA;AAAA,EAAA;AAI/B;AACAH,EAAO,cAAc;AASrB,MAAMM,IAAcd,EAAM;AAAA,EACxB,CAAC,EAAE,WAAAC,GAAW,GAAGC,EAAA,GAASC,MACxB,gBAAAC;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,KAAAD;AAAA,MACA,WAAWG;AAAA,QACT;AAAA,QACAL;AAAA,MAAA;AAAA,MAED,GAAGC;AAAA,IAAA;AAAA,EAAA;AAGV;AACAY,EAAY,cAAc;"}