@acronis-platform/ui-react 4.0.0 → 4.1.0

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 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":"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"}
+{"version":3,"file":"area-chart.js","names":[],"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"],"mappings":"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"}

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

@@ -1,84 +1,47 @@
-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 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 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: {
-      color: {
-        teal: "bg-[var(--ui-avatar-color-teal)] text-[var(--ui-avatar-label-color-teal)]",
-        violet: "bg-[var(--ui-avatar-color-violet)] text-[var(--ui-avatar-label-color-violet)]",
-        red: "bg-[var(--ui-avatar-color-red)] text-[var(--ui-avatar-label-color-red)]",
-        yellow: "bg-[var(--ui-avatar-color-yellow)] text-[var(--ui-avatar-label-color-yellow)]",
-        orange: "bg-[var(--ui-avatar-color-orange)] text-[var(--ui-avatar-label-color-orange)]",
-        blue: "bg-[var(--ui-avatar-color-blue)] text-[var(--ui-avatar-label-color-blue)]",
-        gray: "bg-[var(--ui-avatar-color-gray)] text-[var(--ui-avatar-label-color-gray)]",
-        green: "bg-[var(--ui-avatar-color-green)] text-[var(--ui-avatar-label-color-green)]"
-      }
-    },
-    defaultVariants: {
-      color: "teal"
-    }
-  }
-), m = o.forwardRef(({ className: a, ...r }, e) => /* @__PURE__ */ t(
-  v.Image,
-  {
-    ref: e,
-    className: l("size-full object-cover", a),
-    ...r
-  }
-));
-m.displayName = "AvatarImage";
-const c = o.forwardRef(({ className: a, ...r }, e) => /* @__PURE__ */ t(
-  v.Fallback,
-  {
-    ref: e,
-    className: l("flex size-full items-center justify-center", a),
-    ...r
-  }
-));
-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",
-    {
-      ref: e,
-      className: l(
-        "flex items-center [&>*:not(:first-child)]:ms-[var(--ui-avatar-global-avatar-group-gap)]",
-        a
-      ),
-      ...r
-    }
-  )
-);
-x.displayName = "AvatarGroup";
-export {
-  f as Avatar,
-  c as AvatarFallback,
-  x as AvatarGroup,
-  m as AvatarImage,
-  g as avatarVariants
-};
-//# sourceMappingURL=avatar.js.map
+import { cn as e } from "../../../lib/utils.js";
+import { cva as t } from "../../../node_modules/.pnpm/class-variance-authority@0.7.1/node_modules/class-variance-authority/dist/index.js";
+import * as n from "react";
+import { jsx as r } from "react/jsx-runtime";
+import { Avatar as i } from "@base-ui/react/avatar";
+//#region src/components/ui/avatar/avatar.tsx
+var a = t("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: { color: {
+		teal: "bg-[var(--ui-avatar-color-teal)] text-[var(--ui-avatar-label-color-teal)]",
+		violet: "bg-[var(--ui-avatar-color-violet)] text-[var(--ui-avatar-label-color-violet)]",
+		red: "bg-[var(--ui-avatar-color-red)] text-[var(--ui-avatar-label-color-red)]",
+		yellow: "bg-[var(--ui-avatar-color-yellow)] text-[var(--ui-avatar-label-color-yellow)]",
+		orange: "bg-[var(--ui-avatar-color-orange)] text-[var(--ui-avatar-label-color-orange)]",
+		blue: "bg-[var(--ui-avatar-color-blue)] text-[var(--ui-avatar-label-color-blue)]",
+		gray: "bg-[var(--ui-avatar-color-gray)] text-[var(--ui-avatar-label-color-gray)]",
+		green: "bg-[var(--ui-avatar-color-green)] text-[var(--ui-avatar-label-color-green)]"
+	} },
+	defaultVariants: { color: "teal" }
+}), o = n.forwardRef(({ className: t, ...n }, a) => /* @__PURE__ */ r(i.Image, {
+	ref: a,
+	className: e("size-full object-cover", t),
+	...n
+}));
+o.displayName = "AvatarImage";
+var s = n.forwardRef(({ className: t, ...n }, a) => /* @__PURE__ */ r(i.Fallback, {
+	ref: a,
+	className: e("flex size-full items-center justify-center", t),
+	...n
+}));
+s.displayName = "AvatarFallback";
+var c = n.forwardRef(({ className: t, color: n, variant: o = "text", label: c = "SB", icon: l, children: u, ...d }, f) => /* @__PURE__ */ r(i.Root, {
+	ref: f,
+	className: e(a({ color: n }), t),
+	...d,
+	children: u === void 0 ? o === "icon" ? l : /* @__PURE__ */ r(s, { children: c }) : u
+}));
+c.displayName = "Avatar";
+var l = n.forwardRef(({ className: t, ...n }, i) => /* @__PURE__ */ r("div", {
+	ref: i,
+	className: e("flex items-center [&>*:not(:first-child)]:ms-[var(--ui-avatar-global-avatar-group-gap)]", t),
+	...n
+}));
+l.displayName = "AvatarGroup";
+//#endregion
+export { c as Avatar, s as AvatarFallback, l as AvatarGroup, o as AvatarImage, a 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// `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;"}
+{"version":3,"file":"avatar.js","names":[],"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"],"mappings":";;;;;;AA2CA,IAAM,IAAiB,EACrB,oVAIA;CACE,UAAU,EACR,OAAO;EACL,MAAM;EACN,QACE;EACF,KAAK;EACL,QACE;EACF,QACE;EACF,MAAM;EACN,MAAM;EACN,OACE;CACJ,EACF;CACA,iBAAiB,EACf,OAAO,OACT;AACF,CACF,GAOM,IAAc,EAAM,YAGvB,EAAE,cAAW,GAAG,KAAS,MAC1B,kBAAC,EAAgB,OAAjB;CACO;CACL,WAAW,EAAG,0BAA0B,CAAS;CACjD,GAAI;AACL,CAAA,CACF;AACD,EAAY,cAAc;AAO1B,IAAM,IAAiB,EAAM,YAG1B,EAAE,cAAW,GAAG,KAAS,MAC1B,kBAAC,EAAgB,UAAjB;CACO;CACL,WAAW,EAAG,8CAA8C,CAAS;CACrE,GAAI;AACL,CAAA,CACF;AACD,EAAe,cAAc;AA+B7B,IAAM,IAAS,EAAM,YAKjB,EACE,cACA,UACA,aAAU,QACV,WAAQ,MACR,SACA,aACA,GAAG,KAEL,MAEA,kBAAC,EAAgB,MAAjB;CACO;CACL,WAAW,EAAG,EAAe,EAAE,SAAM,CAAC,GAAG,CAAS;CAClD,GAAI;CAEH,UAAA,MAAa,KAAA,IAEV,MAAY,SACd,IAEA,kBAAC,GAAD,EAAA,UAAiB,EAAsB,CAAA,IAJvC;AAMkB,CAAA,CAE1B;AACA,EAAO,cAAc;AASrB,IAAM,IAAc,EAAM,YACvB,EAAE,cAAW,GAAG,KAAS,MACxB,kBAAC,OAAD;CACO;CACL,WAAW,EACT,2FACA,CACF;CACA,GAAI;AACL,CAAA,CAEL;AACA,EAAY,cAAc"}