@acronis-platform/ui-react 0.57.1 → 0.60.0

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

@@ -0,0 +1 @@
+{"version":3,"file":"line-chart.js","sources":["../../../../src/components/ui/line-chart/line-chart.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { cva, type VariantProps } from 'class-variance-authority';\nimport {\n  Area,\n  CartesianGrid,\n  ComposedChart,\n  Line,\n  LineChart as RechartsLineChart,\n  XAxis,\n  YAxis,\n} from 'recharts';\n\nimport { cn } from '@/lib/utils';\nimport {\n  ChartContainer,\n  ChartLegend,\n  ChartLegendContent,\n  ChartTooltip,\n  ChartTooltipContent,\n  resolveAxisDomain,\n  type ChartConfig,\n  type ChartLegendContentProps,\n  type ChartTooltipContentProps,\n  type CartesianChartProps,\n} from '../chart';\n\n// A typed recharts composition over the shared `Chart` primitives. The two CVA\n// axes are the design's Line-chart variant set: `curve` (how the segments\n// interpolate between points — straight, smoothed, or stepped) and `lineStyle`\n// (a solid or dashed stroke). \"single\" vs \"multi\" line is not a variant — it\n// falls out of how many `dataKeys` the caller plots. The classes stay empty\n// because recharts' SVG — not CSS — draws the lines: `curve` drives each\n// `<Line type>` and `lineStyle` drives its `strokeDasharray`. CVA is kept so the\n// variant set is a first-class, spec-conformant part of the API (matched against\n// ui-spec's api.yaml enums) and exposed via `VariantProps`; the resolved values\n// are also mirrored onto `data-curve` / `data-line-style` for styling hooks and\n// tests.\nconst lineChartVariants = cva('', {\n  variants: {\n    curve: {\n      linear: '',\n      monotone: '',\n      step: '',\n    },\n    lineStyle: {\n      solid: '',\n      dashed: '',\n    },\n  },\n  defaultVariants: {\n    curve: 'monotone',\n    lineStyle: 'solid',\n  },\n});\n\n// Reserved field prefix for the synthetic delta-band range series. Each band\n// mints one `__band_<n>` field that feeds an <Area>; it must never surface in\n// the tooltip or legend (those describe only real, caller-supplied series).\nconst BAND_FIELD_PREFIX = '__band_';\n\n/**\n * Drop the synthetic delta-band range series from a recharts tooltip/legend\n * payload, keeping the real series (and their order). recharts already excludes\n * the band via `legendType`/`tooltipType=\"none\"`, so this is a second, explicit\n * guard — hence it's unit-tested rather than relying on that behavior.\n */\nexport function dropBandSeries<T extends { dataKey?: unknown }>(\n  payload: readonly T[] | undefined\n): T[] | undefined {\n  return payload?.filter(\n    (item) => !String(item.dataKey).startsWith(BAND_FIELD_PREFIX)\n  );\n}\n\ntype TooltipContentType = NonNullable<\n  React.ComponentProps<typeof ChartTooltip>['content']\n>;\ntype TooltipContentFn = Extract<TooltipContentType, (...args: never[]) => unknown>;\ntype TooltipRenderProps = Parameters<TooltipContentFn>[0];\n\n/**\n * Wrap a caller-supplied `tooltipContent` so the synthetic delta bands are\n * stripped from the payload before it renders, while preserving recharts' own\n * mount semantics — a function is mounted via `createElement` (its own component\n * identity + hook state), an element via `cloneElement`. This mirrors what the\n * pass-through charts get by handing `content` straight to recharts, so a\n * function-form tooltip keeps its state across re-renders here too. The returned\n * component is a stable content type (memoize it on `tooltipContent`).\n */\nexport function createBandStrippedTooltip(tooltipContent: TooltipContentType) {\n  return function BandStrippedTooltip(props: TooltipRenderProps) {\n    const merged = {\n      ...props,\n      payload: dropBandSeries(props.payload),\n    } as TooltipRenderProps;\n    return typeof tooltipContent === 'function'\n      ? React.createElement(\n          tooltipContent as React.FunctionComponent<TooltipRenderProps>,\n          merged\n        )\n      : React.cloneElement(tooltipContent, merged);\n  };\n}\n\nexport interface LineChartProps\n  extends Omit<React.ComponentProps<'div'>, 'children'>,\n    VariantProps<typeof lineChartVariants>,\n    CartesianChartProps {\n  /** Row-per-point data. Each object holds the category key + one numeric field per series (`null` breaks the line 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 `<Line>` per key. Each must exist in `config` and in every data row. */\n  dataKeys: string[];\n  /**\n   * Subset of `dataKeys` to render as comparison/trend overlays (e.g. a\n   * previous quarter or year) — dashed, dimmed, and dot-less, so they read as\n   * secondary to the current-period lines. Keeps each series' own `config` color.\n   */\n  comparisonKeys?: string[];\n  /**\n   * Pairs of `[currentKey, comparisonKey]` to shade a delta band between — a\n   * dimmed area filling the gap between the two series at each point,\n   * visualizing the QoQ/YoY difference. Tinted with the first key's `config`\n   * color. Rows where either value isn't numeric are left un-banded.\n   *\n   * Each pair mints an internal `__band_<n>` field (kept out of the tooltip and\n   * legend), so avoid data/`config` keys with that reserved prefix.\n   */\n  deltaBands?: Array<[string, string]>;\n  /** Category axis key (the shared dimension across rows, e.g. `\"month\"`). */\n  xKey: string;\n  /** Stroke width of each line. */\n  strokeWidth?: number;\n  /** Render a dot at each data point. */\n  showDots?: boolean;\n  /** Bridge `null` gaps in the data instead of breaking the line. */\n  connectNulls?: boolean;\n  showLegend?: boolean;\n}\n\nconst LineChart = React.forwardRef<HTMLDivElement, LineChartProps>(\n  (\n    {\n      className,\n      config,\n      data,\n      dataKeys,\n      comparisonKeys,\n      deltaBands,\n      xKey,\n      xAxisLabel,\n      yAxisLabel,\n      yUnit,\n      curve = 'monotone',\n      lineStyle = 'solid',\n      strokeWidth = 2,\n      showDots = true,\n      connectNulls = false,\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      ...props\n    },\n    ref\n  ) => {\n    const dashArray = lineStyle === 'dashed' ? '5 5' : undefined;\n    const yDomain = resolveAxisDomain(yAxisDomain);\n\n    // Room for the X tick row: recharts' default 30, plus a rotated tick row\n    // (+20) and/or the axis title (+18). Additive — both can be present at once,\n    // which the old label-or-angle ternary under-allocated.\n    const xAxisHeight =\n      xAxisLabel || xAxisAngle != null\n        ? 30 + (xAxisAngle != null ? 20 : 0) + (xAxisLabel ? 18 : 0)\n        : undefined;\n\n    // Memoized so recharts sees a stable content type across renders — a fresh\n    // wrapper each render would remount the caller's tooltip and reset its state.\n    const customTooltip = React.useMemo(\n      () =>\n        tooltipContent ? createBandStrippedTooltip(tooltipContent) : undefined,\n      [tooltipContent]\n    );\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 = xAxisLabel\n      ? { value: xAxisLabel, position: 'insideBottom' as const, offset: 0 }\n      : undefined;\n    const yAxisTitle = yAxisLabel\n      ? {\n          value: yAxisLabel,\n          angle: -90,\n          position: 'insideLeft' as const,\n          style: { textAnchor: 'middle' as const },\n        }\n      : undefined;\n\n    // Each delta band becomes a synthetic `[min, max]` range field per row that\n    // a recharts <Area> shades. Rows where either series isn't numeric are left\n    // un-banded (the area breaks there).\n    const bands = (deltaBands ?? []).map(([current, comparison], index) => ({\n      field: `${BAND_FIELD_PREFIX}${index}`,\n      current,\n      comparison,\n    }));\n    const chartData = bands.length\n      ? data.map((row) => {\n          const augmented: Record<string, unknown> = { ...row };\n          for (const { field, current, comparison } of bands) {\n            const a = row[current];\n            const b = row[comparison];\n            augmented[field] =\n              typeof a === 'number' && typeof b === 'number'\n                ? [Math.min(a, b), Math.max(a, b)]\n                : undefined;\n          }\n          return augmented;\n        })\n      : data;\n\n    // Only a delta band needs an <Area>, which recharts renders under\n    // ComposedChart, not LineChart. Escalate to ComposedChart only then, so\n    // plain line charts keep the LineChart base (and their baselines) untouched.\n    const RootChart = bands.length > 0 ? ComposedChart : RechartsLineChart;\n\n    return (\n      <div\n        ref={ref}\n        data-curve={curve}\n        data-line-style={lineStyle}\n        className={cn(lineChartVariants({ curve, lineStyle }), className)}\n        {...props}\n      >\n        <ChartContainer\n          config={config}\n          className=\"size-full [&_.recharts-label]:fill-foreground\"\n        >\n          <RootChart data={chartData as readonly unknown[]}>\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={\n                xAxisAngle != null ? (xAxisAngle < 0 ? 'end' : 'start') : undefined\n              }\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              (customTooltip ? (\n                // Strips the synthetic delta bands before the caller's tooltip\n                // sees them — the `__band_*` series feed the Areas, not the\n                // tooltip (a no-op when no bands are configured).\n                <ChartTooltip content={customTooltip} />\n              ) : bands.length > 0 ? (\n                <ChartTooltip\n                  content={(props) => (\n                    <ChartTooltipContent\n                      active={props.active}\n                      label={props.label}\n                      payload={\n                        dropBandSeries(\n                          props.payload\n                        ) as ChartTooltipContentProps['payload']\n                      }\n                    />\n                  )}\n                />\n              ) : (\n                <ChartTooltip content={<ChartTooltipContent />} />\n              ))}\n            {showLegend &&\n              (bands.length > 0 ? (\n                <ChartLegend\n                  content={(props) => (\n                    <ChartLegendContent\n                      verticalAlign={props.verticalAlign}\n                      payload={\n                        dropBandSeries(\n                          props.payload\n                        ) as ChartLegendContentProps['payload']\n                      }\n                    />\n                  )}\n                />\n              ) : (\n                <ChartLegend content={<ChartLegendContent />} />\n              ))}\n            {/* Delta bands render before the lines so the lines draw on top. */}\n            {bands.map(({ field, current }) => (\n              <Area\n                key={field}\n                dataKey={field}\n                type={curve ?? 'monotone'}\n                stroke=\"none\"\n                fill={`var(--color-${current})`}\n                fillOpacity={0.12}\n                connectNulls={connectNulls}\n                dot={false}\n                activeDot={false}\n                isAnimationActive={false}\n                legendType=\"none\"\n                tooltipType=\"none\"\n              />\n            ))}\n            {dataKeys.map((key) => {\n              // Comparison series read as secondary: always dashed, dimmed, and\n              // dot-less, regardless of the global lineStyle / showDots.\n              const isComparison = comparisonKeys?.includes(key);\n              return (\n                <Line\n                  key={key}\n                  type={curve ?? 'monotone'}\n                  dataKey={key}\n                  stroke={`var(--color-${key})`}\n                  strokeWidth={strokeWidth}\n                  strokeDasharray={isComparison ? '5 5' : dashArray}\n                  strokeOpacity={isComparison ? 0.5 : undefined}\n                  dot={!isComparison && showDots ? { r: 3 } : false}\n                  activeDot={!isComparison && showDots ? { r: 5 } : false}\n                  connectNulls={connectNulls}\n                  isAnimationActive={false}\n                />\n              );\n            })}\n          </RootChart>\n        </ChartContainer>\n      </div>\n    );\n  }\n);\nLineChart.displayName = 'LineChart';\n\nexport { LineChart, lineChartVariants };\n"],"names":["lineChartVariants","cva","BAND_FIELD_PREFIX","dropBandSeries","payload","item","createBandStrippedTooltip","tooltipContent","props","merged","React","LineChart","className","config","data","dataKeys","comparisonKeys","deltaBands","xKey","xAxisLabel","yAxisLabel","yUnit","curve","lineStyle","strokeWidth","showDots","connectNulls","showGrid","showTooltip","showLegend","showXAxis","showYAxis","xTickFormatter","yTickFormatter","xAxisAngle","xAxisInterval","yAxisTickCount","yAxisDomain","gridDashed","gridHorizontal","gridVertical","ref","dashArray","yDomain","resolveAxisDomain","xAxisHeight","customTooltip","xAxisTitle","yAxisTitle","bands","current","comparison","index","chartData","row","augmented","field","a","b","RootChart","ComposedChart","RechartsLineChart","jsx","cn","ChartContainer","jsxs","CartesianGrid","XAxis","YAxis","ChartTooltip","ChartTooltipContent","ChartLegend","ChartLegendContent","Area","key","isComparison","Line"],"mappings":"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"}

package/dist/components/ui/link/link.js

@@ -1,10 +1,10 @@
-import { jsxs as c, Fragment as s, jsx as d } from "react/jsx-runtime";
-import * as v from "react";
+import { jsxs as c, Fragment as s, jsx as v } from "react/jsx-runtime";
+import * as d from "react";
 import { mergeProps as x } from "@base-ui/react/merge-props";
 import { useRender as m } from "@base-ui/react/use-render";
 import { SquareArrowUpRightIcon as u } from "@acronis-platform/icons-react/stroke-mono";
 import { cn as g } from "../../../lib/utils.js";
-const p = v.forwardRef(
+const p = d.forwardRef(
   ({ className: i, external: o, disabled: e, href: r, children: t, render: a, ...n }, l) => m({
     render: a,
     ref: l,
@@ -12,7 +12,7 @@ const p = v.forwardRef(
     props: x(
       {
         className: g(
-          "inline-flex items-center gap-[var(--ui-link-global-container-gap)] rounded-sm text-sm font-semibold leading-6 outline-none transition-colors [text-underline-position:from-font] [&_svg]:size-4 [&_svg]:shrink-0",
+          "inline-flex items-center gap-[var(--ui-link-global-container-gap)] rounded-sm text-sm font-semibold leading-6 outline-none transition-colors [&_svg]:size-4 [&_svg]:shrink-0",
           "text-[var(--ui-link-normal-text-color-idle)] [text-decoration:var(--ui-link-global-text-decoration-idle)] [&_svg]:text-[var(--ui-link-normal-external-icon-color-idle)]",
           "hover:text-[var(--ui-link-normal-text-color-hover)] hover:[text-decoration:var(--ui-link-global-text-decoration-hover)] hover:[&_svg]:text-[var(--ui-link-normal-external-icon-color-hover)]",
           "active:text-[var(--ui-link-normal-text-color-active)] active:[text-decoration:var(--ui-link-global-text-decoration-active)] active:[&_svg]:text-[var(--ui-link-normal-external-icon-color-active)]",
@@ -25,7 +25,7 @@ const p = v.forwardRef(
         tabIndex: e ? -1 : void 0,
         children: /* @__PURE__ */ c(s, { children: [
           t,
-          o && /* @__PURE__ */ d(u, { size: 16 })
+          o && /* @__PURE__ */ v(u, { size: 16 })
         ] })
       },
       n

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

@@ -1 +1 @@
-{"version":3,"file":"link.js","sources":["../../../../src/components/ui/link/link.tsx"],"sourcesContent":["import * as React from 'react';\nimport { mergeProps } from '@base-ui/react/merge-props';\nimport { useRender } from '@base-ui/react/use-render';\nimport { SquareArrowUpRightIcon } from '@acronis-platform/icons-react/stroke-mono';\n\nimport { cn } from '@/lib/utils';\n\n// Mirrors the Figma \"Link\" component: an inline text link (semibold, 14/24) with an\n// optional trailing external-link icon (`external`). Themed by the `--ui-link-*`\n// tier — each state wires its own text color (`--ui-link-normal-text-color-*`), text\n// decoration (`--ui-link-global-text-decoration-*`; underline on hover only) and\n// external-icon color (`--ui-link-normal-external-icon-color-*`, kept separate from\n// the text per the tier). The tier also exposes an `inverse` set\n// (`--ui-link-inverse-*`) for links on dark/brand surfaces; it is not wired here yet.\n// Focus paints a 3px `--ui-focus-primary` ring. Polymorphic via Base UI `useRender`\n// — pass `render` to render a router `Link` instead of the default `<a>`. `disabled`\n// makes it inert: disabled color, removed from the tab order, no navigation.\n//\n// The Figma container has a fixed 32px height for grid alignment\n// (`--ui-link-global-container-height`); it is intentionally NOT applied here so the\n// link flows inline within prose.\nexport interface LinkProps extends React.AnchorHTMLAttributes<HTMLAnchorElement> {\n  /** Append a trailing external-link icon (e.g. for links that leave the app). */\n  external?: boolean;\n  /** Render the link inert: disabled color, removed from the tab order, no navigation. */\n  disabled?: boolean;\n  /**\n   * Replace the rendered `<a>` with another element or component (Base UI\n   * composition) — e.g. a router `Link`. Props and class names are merged onto it.\n   */\n  render?: useRender.RenderProp;\n}\n\nconst Link = React.forwardRef<HTMLAnchorElement, LinkProps>(\n  ({ className, external, disabled, href, children, render, ...props }, ref) =>\n    useRender({\n      render,\n      ref,\n      defaultTagName: 'a',\n      props: mergeProps<'a'>(\n        {\n          className: cn(\n            'inline-flex items-center gap-[var(--ui-link-global-container-gap)] rounded-sm text-sm font-semibold leading-6 outline-none transition-colors [text-underline-position:from-font] [&_svg]:size-4 [&_svg]:shrink-0',\n            'text-[var(--ui-link-normal-text-color-idle)] [text-decoration:var(--ui-link-global-text-decoration-idle)] [&_svg]:text-[var(--ui-link-normal-external-icon-color-idle)]',\n            'hover:text-[var(--ui-link-normal-text-color-hover)] hover:[text-decoration:var(--ui-link-global-text-decoration-hover)] hover:[&_svg]:text-[var(--ui-link-normal-external-icon-color-hover)]',\n            'active:text-[var(--ui-link-normal-text-color-active)] active:[text-decoration:var(--ui-link-global-text-decoration-active)] active:[&_svg]:text-[var(--ui-link-normal-external-icon-color-active)]',\n            'focus-visible:ring-[3px] focus-visible:ring-[var(--ui-focus-primary)]',\n            'aria-disabled:pointer-events-none aria-disabled:text-[var(--ui-link-normal-text-color-disabled)] aria-disabled:[text-decoration:var(--ui-link-global-text-decoration-disabled)] aria-disabled:[&_svg]:text-[var(--ui-link-normal-external-icon-color-disabled)]',\n            className\n          ),\n          href: disabled ? undefined : href,\n          'aria-disabled': disabled || undefined,\n          tabIndex: disabled ? -1 : undefined,\n          children: (\n            <>\n              {children}\n              {external && <SquareArrowUpRightIcon size={16} />}\n            </>\n          ),\n        },\n        props\n      ),\n    })\n);\nLink.displayName = 'Link';\n\nexport { Link };\n"],"names":["Link","React","className","external","disabled","href","children","render","props","ref","useRender","mergeProps","cn","jsxs","Fragment","jsx","SquareArrowUpRightIcon"],"mappings":";;;;;;AAiCA,MAAMA,IAAOC,EAAM;AAAA,EACjB,CAAC,EAAE,WAAAC,GAAW,UAAAC,GAAU,UAAAC,GAAU,MAAAC,GAAM,UAAAC,GAAU,QAAAC,GAAQ,GAAGC,KAASC,MACpEC,EAAU;AAAA,IACR,QAAAH;AAAA,IACA,KAAAE;AAAA,IACA,gBAAgB;AAAA,IAChB,OAAOE;AAAA,MACL;AAAA,QACE,WAAWC;AAAA,UACT;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACAV;AAAA,QAAA;AAAA,QAEF,MAAME,IAAW,SAAYC;AAAA,QAC7B,iBAAiBD,KAAY;AAAA,QAC7B,UAAUA,IAAW,KAAK;AAAA,QAC1B,UACE,gBAAAS,EAAAC,GAAA,EACG,UAAA;AAAA,UAAAR;AAAA,UACAH,KAAY,gBAAAY,EAACC,GAAA,EAAuB,MAAM,GAAA,CAAI;AAAA,QAAA,EAAA,CACjD;AAAA,MAAA;AAAA,MAGJR;AAAA,IAAA;AAAA,EACF,CACD;AACL;AACAR,EAAK,cAAc;"}
+{"version":3,"file":"link.js","sources":["../../../../src/components/ui/link/link.tsx"],"sourcesContent":["import * as React from 'react';\nimport { mergeProps } from '@base-ui/react/merge-props';\nimport { useRender } from '@base-ui/react/use-render';\nimport { SquareArrowUpRightIcon } from '@acronis-platform/icons-react/stroke-mono';\n\nimport { cn } from '@/lib/utils';\n\n// Mirrors the Figma \"Link\" component: an inline text link (semibold, 14/24) with an\n// optional trailing external-link icon (`external`). Themed by the `--ui-link-*`\n// tier — each state wires its own text color (`--ui-link-normal-text-color-*`), text\n// decoration (`--ui-link-global-text-decoration-*`; underline on hover only) and\n// external-icon color (`--ui-link-normal-external-icon-color-*`, kept separate from\n// the text per the tier). The tier also exposes an `inverse` set\n// (`--ui-link-inverse-*`) for links on dark/brand surfaces; it is not wired here yet.\n// Focus paints a 3px `--ui-focus-primary` ring. Polymorphic via Base UI `useRender`\n// — pass `render` to render a router `Link` instead of the default `<a>`. `disabled`\n// makes it inert: disabled color, removed from the tab order, no navigation.\n//\n// The Figma container has a fixed 32px height for grid alignment\n// (`--ui-link-global-container-height`); it is intentionally NOT applied here so the\n// link flows inline within prose.\nexport interface LinkProps extends React.AnchorHTMLAttributes<HTMLAnchorElement> {\n  /** Append a trailing external-link icon (e.g. for links that leave the app). */\n  external?: boolean;\n  /** Render the link inert: disabled color, removed from the tab order, no navigation. */\n  disabled?: boolean;\n  /**\n   * Replace the rendered `<a>` with another element or component (Base UI\n   * composition) — e.g. a router `Link`. Props and class names are merged onto it.\n   */\n  render?: useRender.RenderProp;\n}\n\nconst Link = React.forwardRef<HTMLAnchorElement, LinkProps>(\n  ({ className, external, disabled, href, children, render, ...props }, ref) =>\n    useRender({\n      render,\n      ref,\n      defaultTagName: 'a',\n      props: mergeProps<'a'>(\n        {\n          className: cn(\n            'inline-flex items-center gap-[var(--ui-link-global-container-gap)] rounded-sm text-sm font-semibold leading-6 outline-none transition-colors [&_svg]:size-4 [&_svg]:shrink-0',\n            'text-[var(--ui-link-normal-text-color-idle)] [text-decoration:var(--ui-link-global-text-decoration-idle)] [&_svg]:text-[var(--ui-link-normal-external-icon-color-idle)]',\n            'hover:text-[var(--ui-link-normal-text-color-hover)] hover:[text-decoration:var(--ui-link-global-text-decoration-hover)] hover:[&_svg]:text-[var(--ui-link-normal-external-icon-color-hover)]',\n            'active:text-[var(--ui-link-normal-text-color-active)] active:[text-decoration:var(--ui-link-global-text-decoration-active)] active:[&_svg]:text-[var(--ui-link-normal-external-icon-color-active)]',\n            'focus-visible:ring-[3px] focus-visible:ring-[var(--ui-focus-primary)]',\n            'aria-disabled:pointer-events-none aria-disabled:text-[var(--ui-link-normal-text-color-disabled)] aria-disabled:[text-decoration:var(--ui-link-global-text-decoration-disabled)] aria-disabled:[&_svg]:text-[var(--ui-link-normal-external-icon-color-disabled)]',\n            className\n          ),\n          href: disabled ? undefined : href,\n          'aria-disabled': disabled || undefined,\n          tabIndex: disabled ? -1 : undefined,\n          children: (\n            <>\n              {children}\n              {external && <SquareArrowUpRightIcon size={16} />}\n            </>\n          ),\n        },\n        props\n      ),\n    })\n);\nLink.displayName = 'Link';\n\nexport { Link };\n"],"names":["Link","React","className","external","disabled","href","children","render","props","ref","useRender","mergeProps","cn","jsxs","Fragment","jsx","SquareArrowUpRightIcon"],"mappings":";;;;;;AAiCA,MAAMA,IAAOC,EAAM;AAAA,EACjB,CAAC,EAAE,WAAAC,GAAW,UAAAC,GAAU,UAAAC,GAAU,MAAAC,GAAM,UAAAC,GAAU,QAAAC,GAAQ,GAAGC,KAASC,MACpEC,EAAU;AAAA,IACR,QAAAH;AAAA,IACA,KAAAE;AAAA,IACA,gBAAgB;AAAA,IAChB,OAAOE;AAAA,MACL;AAAA,QACE,WAAWC;AAAA,UACT;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACAV;AAAA,QAAA;AAAA,QAEF,MAAME,IAAW,SAAYC;AAAA,QAC7B,iBAAiBD,KAAY;AAAA,QAC7B,UAAUA,IAAW,KAAK;AAAA,QAC1B,UACE,gBAAAS,EAAAC,GAAA,EACG,UAAA;AAAA,UAAAR;AAAA,UACAH,KAAY,gBAAAY,EAACC,GAAA,EAAuB,MAAM,GAAA,CAAI;AAAA,QAAA,EAAA,CACjD;AAAA,MAAA;AAAA,MAGJR;AAAA,IAAA;AAAA,EACF,CACD;AACL;AACAR,EAAK,cAAc;"}

package/dist/components/ui/loading/loading.js

@@ -0,0 +1,79 @@
+import { jsxs as d, jsx as r } from "react/jsx-runtime";
+import * as g from "react";
+import { cva as s } from "../../../node_modules/.pnpm/class-variance-authority@0.7.1/node_modules/class-variance-authority/dist/index.js";
+import { cn as e } from "../../../lib/utils.js";
+import { Spinner as u } from "../spinner/spinner.js";
+const m = s("inline-flex items-center", {
+  variants: {
+    variant: {
+      inline: "gap-[var(--ui-loading-inline-container-gap)]",
+      onSurfacePrimary: "flex-col justify-center gap-[var(--ui-loading-element-container-gap)] rounded-lg bg-[var(--ui-loading-element-container-color-primary)] px-[var(--ui-loading-element-container-padding-x)] py-[var(--ui-loading-element-container-padding-y)]",
+      onSurfaceSecondary: "flex-col justify-center gap-[var(--ui-loading-element-container-gap)] rounded-lg bg-[var(--ui-loading-element-container-color-secondary)] px-[var(--ui-loading-element-container-padding-x)] py-[var(--ui-loading-element-container-padding-y)]",
+      onScreen: "flex-col justify-center gap-[var(--ui-loading-screen-container-gap)] rounded-lg bg-[var(--ui-loading-screen-container-color)] px-[var(--ui-loading-screen-container-padding-x)] py-[var(--ui-loading-screen-container-padding-y)]"
+    }
+  },
+  defaultVariants: {
+    variant: "inline"
+  }
+}), p = {
+  inline: "sm",
+  onSurfacePrimary: "lg",
+  onSurfaceSecondary: "lg",
+  onScreen: "xl"
+}, v = {
+  inline: "text-[var(--ui-loading-inline-icon-color)]",
+  onSurfacePrimary: "text-[var(--ui-loading-element-icon-color)]",
+  onSurfaceSecondary: "text-[var(--ui-loading-element-icon-color)]",
+  onScreen: "text-[var(--ui-loading-screen-icon-color)]"
+}, f = {
+  inline: "text-[var(--ui-loading-inline-label-color)]",
+  onSurfacePrimary: "text-[var(--ui-loading-element-label-color)]",
+  onSurfaceSecondary: "text-[var(--ui-loading-element-label-color)]",
+  onScreen: "text-[var(--ui-loading-screen-label-color)]"
+}, x = g.forwardRef(
+  ({
+    className: o,
+    variant: l = "inline",
+    hasLabel: a = !0,
+    label: i = "Data is loading…",
+    ...t
+  }, c) => {
+    const n = l ?? "inline";
+    return /* @__PURE__ */ d(
+      "div",
+      {
+        ref: c,
+        role: "status",
+        "aria-label": a ? void 0 : i,
+        className: e(m({ variant: n }), o),
+        ...t,
+        children: [
+          /* @__PURE__ */ r(
+            u,
+            {
+              "aria-hidden": "true",
+              size: p[n],
+              className: e("shrink-0", v[n])
+            }
+          ),
+          a && /* @__PURE__ */ r(
+            "span",
+            {
+              className: e(
+                "whitespace-nowrap text-sm font-normal leading-6",
+                f[n]
+              ),
+              children: i
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+x.displayName = "Loading";
+export {
+  x as Loading,
+  m as loadingVariants
+};
+//# sourceMappingURL=loading.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"loading.js","sources":["../../../../src/components/ui/loading/loading.tsx"],"sourcesContent":["import * as React from 'react';\nimport { cva, type VariantProps } from 'class-variance-authority';\n\nimport { cn } from '@/lib/utils';\nimport { Spinner } from '../spinner';\n\n// A composite loading indicator (spinner + optional label) for four placement\n// contexts, themed by the `--ui-loading-*` tier. Distinct from the bare `Spinner`\n// primitive (which this component reuses for its icon and which stays an\n// internal-only primitive, not re-exported — see spinner.tsx): `Spinner` is a\n// leaf atom with no label/container of its own, still used as-is by `Toast`'s\n// small inline icon. `inline` sits flush in text flow; `onSurfacePrimary`/\n// `onSurfaceSecondary` are card-like chips for placing over a primary/secondary\n// app surface; `onScreen` is the higher-contrast dark chip for placing over\n// busy/photo/video surfaces. The icon is `aria-hidden` and the root carries\n// `role=\"status\"` so the (visible or, when `hasLabel` is false, only\n// `aria-label`'d) text is the single accessible announcement — avoids double\n// announcement against `Spinner`'s own built-in status role.\nconst loadingVariants = cva('inline-flex items-center', {\n  variants: {\n    variant: {\n      inline: 'gap-[var(--ui-loading-inline-container-gap)]',\n      onSurfacePrimary:\n        'flex-col justify-center gap-[var(--ui-loading-element-container-gap)] rounded-lg bg-[var(--ui-loading-element-container-color-primary)] px-[var(--ui-loading-element-container-padding-x)] py-[var(--ui-loading-element-container-padding-y)]',\n      onSurfaceSecondary:\n        'flex-col justify-center gap-[var(--ui-loading-element-container-gap)] rounded-lg bg-[var(--ui-loading-element-container-color-secondary)] px-[var(--ui-loading-element-container-padding-x)] py-[var(--ui-loading-element-container-padding-y)]',\n      onScreen:\n        'flex-col justify-center gap-[var(--ui-loading-screen-container-gap)] rounded-lg bg-[var(--ui-loading-screen-container-color)] px-[var(--ui-loading-screen-container-padding-x)] py-[var(--ui-loading-screen-container-padding-y)]',\n    },\n  },\n  defaultVariants: {\n    variant: 'inline',\n  },\n});\n\nconst spinnerSizeByVariant = {\n  inline: 'sm',\n  onSurfacePrimary: 'lg',\n  onSurfaceSecondary: 'lg',\n  onScreen: 'xl',\n} as const;\n\nconst iconColorClassByVariant: Record<string, string> = {\n  inline: 'text-[var(--ui-loading-inline-icon-color)]',\n  onSurfacePrimary: 'text-[var(--ui-loading-element-icon-color)]',\n  onSurfaceSecondary: 'text-[var(--ui-loading-element-icon-color)]',\n  onScreen: 'text-[var(--ui-loading-screen-icon-color)]',\n};\n\nconst labelClassByVariant: Record<string, string> = {\n  inline: 'text-[var(--ui-loading-inline-label-color)]',\n  onSurfacePrimary: 'text-[var(--ui-loading-element-label-color)]',\n  onSurfaceSecondary: 'text-[var(--ui-loading-element-label-color)]',\n  onScreen: 'text-[var(--ui-loading-screen-label-color)]',\n};\n\nexport interface LoadingProps\n  extends\n    React.HTMLAttributes<HTMLDivElement>,\n    VariantProps<typeof loadingVariants> {\n  /** Whether the label is rendered. When `false`, `label` is still exposed to assistive tech via `aria-label`. */\n  hasLabel?: boolean;\n  /** The loading message. */\n  label?: string;\n}\n\nconst Loading = React.forwardRef<HTMLDivElement, LoadingProps>(\n  (\n    {\n      className,\n      variant = 'inline',\n      hasLabel = true,\n      label = 'Data is loading…',\n      ...props\n    },\n    ref\n  ) => {\n    const resolvedVariant = variant ?? 'inline';\n    return (\n      <div\n        ref={ref}\n        role=\"status\"\n        aria-label={hasLabel ? undefined : label}\n        className={cn(loadingVariants({ variant: resolvedVariant }), className)}\n        {...props}\n      >\n        <Spinner\n          aria-hidden=\"true\"\n          size={spinnerSizeByVariant[resolvedVariant]}\n          className={cn('shrink-0', iconColorClassByVariant[resolvedVariant])}\n        />\n        {hasLabel && (\n          <span\n            className={cn(\n              'whitespace-nowrap text-sm font-normal leading-6',\n              labelClassByVariant[resolvedVariant]\n            )}\n          >\n            {label}\n          </span>\n        )}\n      </div>\n    );\n  }\n);\nLoading.displayName = 'Loading';\n\nexport { Loading, loadingVariants };\n"],"names":["loadingVariants","cva","spinnerSizeByVariant","iconColorClassByVariant","labelClassByVariant","Loading","React","className","variant","hasLabel","label","props","ref","resolvedVariant","jsxs","cn","jsx","Spinner"],"mappings":";;;;;AAkBA,MAAMA,IAAkBC,EAAI,4BAA4B;AAAA,EACtD,UAAU;AAAA,IACR,SAAS;AAAA,MACP,QAAQ;AAAA,MACR,kBACE;AAAA,MACF,oBACE;AAAA,MACF,UACE;AAAA,IAAA;AAAA,EACJ;AAAA,EAEF,iBAAiB;AAAA,IACf,SAAS;AAAA,EAAA;AAEb,CAAC,GAEKC,IAAuB;AAAA,EAC3B,QAAQ;AAAA,EACR,kBAAkB;AAAA,EAClB,oBAAoB;AAAA,EACpB,UAAU;AACZ,GAEMC,IAAkD;AAAA,EACtD,QAAQ;AAAA,EACR,kBAAkB;AAAA,EAClB,oBAAoB;AAAA,EACpB,UAAU;AACZ,GAEMC,IAA8C;AAAA,EAClD,QAAQ;AAAA,EACR,kBAAkB;AAAA,EAClB,oBAAoB;AAAA,EACpB,UAAU;AACZ,GAYMC,IAAUC,EAAM;AAAA,EACpB,CACE;AAAA,IACE,WAAAC;AAAA,IACA,SAAAC,IAAU;AAAA,IACV,UAAAC,IAAW;AAAA,IACX,OAAAC,IAAQ;AAAA,IACR,GAAGC;AAAA,EAAA,GAELC,MACG;AACH,UAAMC,IAAkBL,KAAW;AACnC,WACE,gBAAAM;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,KAAAF;AAAA,QACA,MAAK;AAAA,QACL,cAAYH,IAAW,SAAYC;AAAA,QACnC,WAAWK,EAAGf,EAAgB,EAAE,SAASa,EAAA,CAAiB,GAAGN,CAAS;AAAA,QACrE,GAAGI;AAAA,QAEJ,UAAA;AAAA,UAAA,gBAAAK;AAAA,YAACC;AAAA,YAAA;AAAA,cACC,eAAY;AAAA,cACZ,MAAMf,EAAqBW,CAAe;AAAA,cAC1C,WAAWE,EAAG,YAAYZ,EAAwBU,CAAe,CAAC;AAAA,YAAA;AAAA,UAAA;AAAA,UAEnEJ,KACC,gBAAAO;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,WAAWD;AAAA,gBACT;AAAA,gBACAX,EAAoBS,CAAe;AAAA,cAAA;AAAA,cAGpC,UAAAH;AAAA,YAAA;AAAA,UAAA;AAAA,QACH;AAAA,MAAA;AAAA,IAAA;AAAA,EAIR;AACF;AACAL,EAAQ,cAAc;"}

package/dist/components/ui/meter/meter.js

@@ -0,0 +1,93 @@
+import { jsxs as n, jsx as e, Fragment as x } from "react/jsx-runtime";
+import * as p from "react";
+import { Meter as t } from "@base-ui/react/meter";
+import { cn as g } from "../../../lib/utils.js";
+import { Tooltip as k, TooltipTrigger as M, TooltipContent as w } from "../tooltip/tooltip.js";
+const y = (a) => a.toLocaleString(), T = p.forwardRef(
+  ({
+    className: a,
+    label: l,
+    value: o,
+    max: r = 100,
+    color: c,
+    valueFormatter: s = y,
+    showTooltip: i = !0,
+    tooltip: f,
+    defaultOpen: h,
+    ...b
+  }, m) => {
+    const d = r > 0 ? Math.round(o / r * 100) : 0, N = r > 0 ? r : 1, u = /* @__PURE__ */ n(
+      t.Root,
+      {
+        value: o,
+        max: N,
+        "aria-valuemax": r,
+        "aria-valuetext": `${s(o)} of ${s(r)} (${d}%)`,
+        tabIndex: i ? 0 : void 0,
+        className: g("flex w-full flex-col gap-1.5", a),
+        ...b,
+        children: [
+          /* @__PURE__ */ n("div", { className: "flex items-baseline justify-between gap-2 text-sm leading-none", children: [
+            /* @__PURE__ */ e(t.Label, { className: "truncate text-muted-foreground", children: l }),
+            /* @__PURE__ */ n("span", { className: "shrink-0 tabular-nums", children: [
+              /* @__PURE__ */ e("span", { className: "font-semibold text-foreground", children: s(o) }),
+              /* @__PURE__ */ n("span", { className: "text-muted-foreground", children: [
+                " · ",
+                d,
+                "%"
+              ] })
+            ] })
+          ] }),
+          /* @__PURE__ */ e(t.Track, { className: "h-2 w-full overflow-hidden rounded-full bg-input", children: /* @__PURE__ */ e(
+            t.Indicator,
+            {
+              className: "rounded-full",
+              style: { backgroundColor: c }
+            }
+          ) })
+        ]
+      }
+    );
+    return i ? /* @__PURE__ */ n(k, { defaultOpen: h, children: [
+      /* @__PURE__ */ e(
+        M,
+        {
+          ref: m,
+          render: u
+        }
+      ),
+      /* @__PURE__ */ e(
+        w,
+        {
+          className: g(
+            "border border-border bg-background text-foreground shadow-md",
+            !f && "flex items-center gap-2"
+          ),
+          children: f ?? /* @__PURE__ */ n(x, { children: [
+            /* @__PURE__ */ e(
+              "span",
+              {
+                className: "size-2.5 shrink-0 rounded-full",
+                style: { backgroundColor: c }
+              }
+            ),
+            /* @__PURE__ */ e("span", { className: "font-semibold", children: l }),
+            /* @__PURE__ */ n("span", { className: "text-muted-foreground", children: [
+              s(o),
+              " of ",
+              s(r),
+              " · ",
+              d,
+              "%"
+            ] })
+          ] })
+        }
+      )
+    ] }) : p.cloneElement(u, { ref: m });
+  }
+);
+T.displayName = "Meter";
+export {
+  T as Meter
+};
+//# sourceMappingURL=meter.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"meter.js","sources":["../../../../src/components/ui/meter/meter.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { Meter as MeterPrimitive } from '@base-ui/react/meter';\n\nimport { cn } from '@/lib/utils';\nimport { Tooltip, TooltipContent, TooltipTrigger } from '../tooltip';\n\n// A meter: a labelled bar showing a scalar value within a known range (a\n// fractional value / share), as opposed to `Progress` which tracks a task over\n// time — hence Base UI's Meter primitive (`role=\"meter\"`, mirroring the HTML\n// `<meter>` element). One row — label + `value · %` over a proportional track\n// bar — designed to be stacked into a ranked breakdown (a \"bar list\"). No new\n// tokens: the track reuses the shared `bg-input`, and the fill color is\n// caller-supplied per row (an existing `--ui-*` token); there is no chart\n// palette tier yet.\n\nconst defaultFormat = (value: number) => value.toLocaleString();\n\nexport interface MeterProps\n  extends Omit<\n    React.ComponentPropsWithoutRef<typeof MeterPrimitive.Root>,\n    'value' | 'color'\n  > {\n  /** Row label shown on the left. */\n  label: string;\n  /** The value this meter represents. */\n  value: number;\n  /** Upper bound of the range — the whole the value is a share of. */\n  max?: number;\n  /** Fill color for the bar — an existing semantic `--ui-*` token (or any CSS color). */\n  color: string;\n  /** Format the numeric value (label + tooltip). Defaults to `toLocaleString()`. */\n  valueFormatter?: (value: number) => string;\n  /** Show the hover tooltip (`label · value of max · %`). */\n  showTooltip?: boolean;\n  /**\n   * Custom tooltip content — replaces the default (dot + label + `value of max\n   * · %`) inside the same chart-style card. Ignored when `showTooltip` is false.\n   */\n  tooltip?: React.ReactNode;\n  /** Render with the tooltip initially open (Base UI `defaultOpen`). */\n  defaultOpen?: boolean;\n}\n\nconst Meter = React.forwardRef<HTMLDivElement, MeterProps>(\n  (\n    {\n      className,\n      label,\n      value,\n      max = 100,\n      color,\n      valueFormatter = defaultFormat,\n      showTooltip = true,\n      tooltip,\n      defaultOpen,\n      ...props\n    },\n    ref\n  ) => {\n    const pct = max > 0 ? Math.round((value / max) * 100) : 0;\n    // Base UI derives the indicator width from value/max; a non-positive max\n    // would divide by zero and leave the fill unspecified, so floor it at 1\n    // (value is 0 for a degenerate row → a 0% fill that matches `pct`).\n    const safeMax = max > 0 ? max : 1;\n\n    const root = (\n      <MeterPrimitive.Root\n        value={value}\n        max={safeMax}\n        // Base UI derives aria-valuemax from the (clamped) max prop; override it\n        // back to the real max so the numeric ARIA triad agrees with the\n        // aria-valuetext / visible text on a degenerate max<=0 row.\n        aria-valuemax={max}\n        aria-valuetext={`${valueFormatter(value)} of ${valueFormatter(max)} (${pct}%)`}\n        // When wrapped in a Tooltip the meter div is the trigger; make it\n        // focusable so keyboard users can open the tooltip (hover-only\n        // otherwise). Without a tooltip there's nothing to reveal on focus.\n        tabIndex={showTooltip ? 0 : undefined}\n        className={cn('flex w-full flex-col gap-1.5', className)}\n        {...props}\n      >\n        <div className=\"flex items-baseline justify-between gap-2 text-sm leading-none\">\n          <MeterPrimitive.Label className=\"truncate text-muted-foreground\">\n            {label}\n          </MeterPrimitive.Label>\n          <span className=\"shrink-0 tabular-nums\">\n            <span className=\"font-semibold text-foreground\">\n              {valueFormatter(value)}\n            </span>\n            <span className=\"text-muted-foreground\"> · {pct}%</span>\n          </span>\n        </div>\n        <MeterPrimitive.Track className=\"h-2 w-full overflow-hidden rounded-full bg-input\">\n          {/* Base UI sizes the indicator from value/max; we only theme it. */}\n          <MeterPrimitive.Indicator\n            className=\"rounded-full\"\n            style={{ backgroundColor: color }}\n          />\n        </MeterPrimitive.Track>\n      </MeterPrimitive.Root>\n    );\n\n    if (!showTooltip) {\n      return React.cloneElement(root, { ref });\n    }\n\n    return (\n      <Tooltip defaultOpen={defaultOpen}>\n        <TooltipTrigger\n          // Base UI's Trigger ref is typed to its default <button>; the trigger\n          // is the meter root (a div), so the runtime ref is that div.\n          ref={ref as React.Ref<HTMLButtonElement>}\n          render={root}\n        />\n        {/* Match the chart tooltip look (light card: border + surface + shadow),\n            not the default dark bubble — this is a data-viz widget. The consumer\n            can replace the inner content via `tooltip`. */}\n        <TooltipContent\n          className={cn(\n            'border border-border bg-background text-foreground shadow-md',\n            !tooltip && 'flex items-center gap-2'\n          )}\n        >\n          {tooltip ?? (\n            <>\n              <span\n                className=\"size-2.5 shrink-0 rounded-full\"\n                style={{ backgroundColor: color }}\n              />\n              <span className=\"font-semibold\">{label}</span>\n              <span className=\"text-muted-foreground\">\n                {valueFormatter(value)} of {valueFormatter(max)} · {pct}%\n              </span>\n            </>\n          )}\n        </TooltipContent>\n      </Tooltip>\n    );\n  }\n);\nMeter.displayName = 'Meter';\n\nexport { Meter };\n"],"names":["defaultFormat","value","Meter","React","className","label","max","color","valueFormatter","showTooltip","tooltip","defaultOpen","props","ref","pct","safeMax","root","jsxs","MeterPrimitive","cn","jsx","Tooltip","TooltipTrigger","TooltipContent","Fragment"],"mappings":";;;;;AAiBA,MAAMA,IAAgB,CAACC,MAAkBA,EAAM,eAAA,GA4BzCC,IAAQC,EAAM;AAAA,EAClB,CACE;AAAA,IACE,WAAAC;AAAA,IACA,OAAAC;AAAA,IACA,OAAAJ;AAAA,IACA,KAAAK,IAAM;AAAA,IACN,OAAAC;AAAA,IACA,gBAAAC,IAAiBR;AAAA,IACjB,aAAAS,IAAc;AAAA,IACd,SAAAC;AAAA,IACA,aAAAC;AAAA,IACA,GAAGC;AAAA,EAAA,GAELC,MACG;AACH,UAAMC,IAAMR,IAAM,IAAI,KAAK,MAAOL,IAAQK,IAAO,GAAG,IAAI,GAIlDS,IAAUT,IAAM,IAAIA,IAAM,GAE1BU,IACJ,gBAAAC;AAAA,MAACC,EAAe;AAAA,MAAf;AAAA,QACC,OAAAjB;AAAA,QACA,KAAKc;AAAA,QAIL,iBAAeT;AAAA,QACf,kBAAgB,GAAGE,EAAeP,CAAK,CAAC,OAAOO,EAAeF,CAAG,CAAC,KAAKQ,CAAG;AAAA,QAI1E,UAAUL,IAAc,IAAI;AAAA,QAC5B,WAAWU,EAAG,gCAAgCf,CAAS;AAAA,QACtD,GAAGQ;AAAA,QAEJ,UAAA;AAAA,UAAA,gBAAAK,EAAC,OAAA,EAAI,WAAU,kEACb,UAAA;AAAA,YAAA,gBAAAG,EAACF,EAAe,OAAf,EAAqB,WAAU,kCAC7B,UAAAb,GACH;AAAA,YACA,gBAAAY,EAAC,QAAA,EAAK,WAAU,yBACd,UAAA;AAAA,cAAA,gBAAAG,EAAC,QAAA,EAAK,WAAU,iCACb,UAAAZ,EAAeP,CAAK,GACvB;AAAA,cACA,gBAAAgB,EAAC,QAAA,EAAK,WAAU,yBAAwB,UAAA;AAAA,gBAAA;AAAA,gBAAIH;AAAA,gBAAI;AAAA,cAAA,EAAA,CAAC;AAAA,YAAA,EAAA,CACnD;AAAA,UAAA,GACF;AAAA,UACA,gBAAAM,EAACF,EAAe,OAAf,EAAqB,WAAU,oDAE9B,UAAA,gBAAAE;AAAA,YAACF,EAAe;AAAA,YAAf;AAAA,cACC,WAAU;AAAA,cACV,OAAO,EAAE,iBAAiBX,EAAA;AAAA,YAAM;AAAA,UAAA,EAClC,CACF;AAAA,QAAA;AAAA,MAAA;AAAA,IAAA;AAIJ,WAAKE,IAKH,gBAAAQ,EAACI,KAAQ,aAAAV,GACP,UAAA;AAAA,MAAA,gBAAAS;AAAA,QAACE;AAAA,QAAA;AAAA,UAGC,KAAAT;AAAA,UACA,QAAQG;AAAA,QAAA;AAAA,MAAA;AAAA,MAKV,gBAAAI;AAAA,QAACG;AAAA,QAAA;AAAA,UACC,WAAWJ;AAAA,YACT;AAAA,YACA,CAACT,KAAW;AAAA,UAAA;AAAA,UAGb,eACC,gBAAAO,EAAAO,GAAA,EACE,UAAA;AAAA,YAAA,gBAAAJ;AAAA,cAAC;AAAA,cAAA;AAAA,gBACC,WAAU;AAAA,gBACV,OAAO,EAAE,iBAAiBb,EAAA;AAAA,cAAM;AAAA,YAAA;AAAA,YAElC,gBAAAa,EAAC,QAAA,EAAK,WAAU,iBAAiB,UAAAf,GAAM;AAAA,YACvC,gBAAAY,EAAC,QAAA,EAAK,WAAU,yBACb,UAAA;AAAA,cAAAT,EAAeP,CAAK;AAAA,cAAE;AAAA,cAAKO,EAAeF,CAAG;AAAA,cAAE;AAAA,cAAIQ;AAAA,cAAI;AAAA,YAAA,EAAA,CAC1D;AAAA,UAAA,EAAA,CACF;AAAA,QAAA;AAAA,MAAA;AAAA,IAEJ,GACF,IAjCOX,EAAM,aAAaa,GAAM,EAAE,KAAAH,GAAK;AAAA,EAmC3C;AACF;AACAX,EAAM,cAAc;"}

package/dist/components/ui/metric/metric.js

@@ -0,0 +1,185 @@
+import { jsxs as t, jsx as e, Fragment as k } from "react/jsx-runtime";
+import * as n from "react";
+import { cva as S } from "../../../node_modules/.pnpm/class-variance-authority@0.7.1/node_modules/class-variance-authority/dist/index.js";
+import { CircleInfoIcon as I } from "@acronis-platform/icons-react/stroke-mono";
+import { cn as a } from "../../../lib/utils.js";
+import { Card as _ } from "../card/card.js";
+import { Tooltip as z, TooltipTrigger as T, TooltipContent as A } from "../tooltip/tooltip.js";
+import { Skeleton as Z } from "../skeleton/skeleton.js";
+const j = S("flex flex-col", {
+  variants: {
+    size: {
+      small: "gap-1",
+      medium: "gap-1.5",
+      large: "gap-2"
+    },
+    // Semantic status — drives the icon badge tint (see STATUS_BADGE). Kept as a
+    // cva axis so the enum is spec-conformant; the tint is applied on the badge.
+    status: {
+      neutral: "",
+      info: "",
+      success: "",
+      warning: "",
+      danger: "",
+      critical: ""
+    }
+  },
+  defaultVariants: {
+    size: "medium",
+    status: "neutral"
+  }
+}), y = {
+  small: "text-[10px]",
+  medium: "text-[11px]",
+  large: "text-xs"
+}, B = {
+  small: "text-2xl",
+  medium: "text-3xl",
+  large: "text-4xl"
+}, C = {
+  small: "text-sm",
+  medium: "text-base",
+  large: "text-lg"
+}, G = {
+  small: "text-xs",
+  medium: "text-xs",
+  large: "text-sm"
+}, L = {
+  small: "size-7",
+  medium: "size-8",
+  large: "size-10"
+}, U = {
+  small: 14,
+  medium: 16,
+  large: 20
+}, V = {
+  small: "h-6 w-16",
+  medium: "h-8 w-20",
+  large: "h-10 w-28"
+}, D = {
+  neutral: "bg-[var(--ui-background-status-neutral-pressed)] text-[var(--ui-text-on-status-neutral)]",
+  info: "bg-[var(--ui-background-status-info-pressed)] text-[var(--ui-text-on-status-info)]",
+  success: "bg-[var(--ui-background-status-success-pressed)] text-[var(--ui-text-on-status-success)]",
+  warning: "bg-[var(--ui-background-status-warning-pressed)] text-[var(--ui-text-on-status-warning)]",
+  danger: "bg-[var(--ui-background-status-danger-pressed)] text-[var(--ui-text-on-status-danger)]",
+  critical: "bg-[var(--ui-background-status-critical-pressed)] text-[var(--ui-text-on-status-critical)]"
+}, M = n.forwardRef(
+  ({
+    className: f,
+    label: p,
+    value: h,
+    unit: l,
+    caption: i,
+    trend: c,
+    supportingText: m,
+    badge: d,
+    icon: r,
+    tooltip: u,
+    tooltipLabel: v = "More information",
+    loading: N = !1,
+    size: o,
+    status: x,
+    children: b,
+    ...w
+  }, E) => {
+    const s = o ?? "medium", g = x ?? "neutral";
+    return /* @__PURE__ */ t(
+      _,
+      {
+        ref: E,
+        "data-size": s,
+        "data-status": g,
+        className: a("flex flex-col p-4", f),
+        ...w,
+        children: [
+          /* @__PURE__ */ t("div", { className: a(j({ size: o, status: x })), children: [
+            /* @__PURE__ */ t("div", { className: "flex items-center justify-between gap-2", children: [
+              /* @__PURE__ */ t("div", { className: "flex min-w-0 items-center gap-1.5", children: [
+                /* @__PURE__ */ e(
+                  "span",
+                  {
+                    className: a(
+                      "min-w-0 truncate font-bold uppercase leading-none tracking-wide text-muted-foreground",
+                      y[s]
+                    ),
+                    children: p
+                  }
+                ),
+                u != null && /* @__PURE__ */ t(z, { children: [
+                  /* @__PURE__ */ e(
+                    T,
+                    {
+                      "aria-label": v,
+                      className: "inline-flex shrink-0 cursor-default appearance-none border-0 bg-transparent p-0 text-muted-foreground",
+                      children: /* @__PURE__ */ e(I, { size: 16, "aria-hidden": !0 })
+                    }
+                  ),
+                  /* @__PURE__ */ e(A, { children: u })
+                ] })
+              ] }),
+              i != null && /* @__PURE__ */ e("div", { className: "shrink-0", children: i })
+            ] }),
+            /* @__PURE__ */ t("div", { className: "flex items-center justify-between gap-3", children: [
+              /* @__PURE__ */ t("div", { className: "flex min-w-0 items-center gap-2", children: [
+                r != null && /* @__PURE__ */ e(
+                  "span",
+                  {
+                    "aria-hidden": !0,
+                    className: a(
+                      "flex shrink-0 items-center justify-center rounded-lg [&_svg]:shrink-0",
+                      L[s],
+                      D[g]
+                    ),
+                    children: n.isValidElement(r) ? n.cloneElement(
+                      r,
+                      { size: U[s] }
+                    ) : r
+                  }
+                ),
+                /* @__PURE__ */ t("div", { className: "flex min-w-0 items-baseline gap-1", children: [
+                  N ? /* @__PURE__ */ e(Z, { className: V[s] }) : /* @__PURE__ */ t(k, { children: [
+                    /* @__PURE__ */ e(
+                      "span",
+                      {
+                        className: a(
+                          "font-bold leading-none tabular-nums text-foreground",
+                          B[s]
+                        ),
+                        children: h
+                      }
+                    ),
+                    l != null && /* @__PURE__ */ e(
+                      "span",
+                      {
+                        className: a(
+                          "font-medium text-muted-foreground",
+                          C[s]
+                        ),
+                        children: l
+                      }
+                    )
+                  ] }),
+                  d != null && /* @__PURE__ */ e("span", { className: "ms-1 self-center", children: d })
+                ] })
+              ] }),
+              c != null && /* @__PURE__ */ e("div", { className: "shrink-0", children: c })
+            ] }),
+            m != null && /* @__PURE__ */ e(
+              "div",
+              {
+                className: a("text-muted-foreground", G[s]),
+                children: m
+              }
+            )
+          ] }),
+          b
+        ]
+      }
+    );
+  }
+);
+M.displayName = "Metric";
+export {
+  M as Metric
+};
+//# sourceMappingURL=metric.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"metric.js","sources":["../../../../src/components/ui/metric/metric.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { cva, type VariantProps } from 'class-variance-authority';\nimport { CircleInfoIcon } from '@acronis-platform/icons-react/stroke-mono';\n\nimport { cn } from '@/lib/utils';\nimport { Card } from '../card';\nimport { Skeleton } from '../skeleton';\nimport { Tooltip, TooltipContent, TooltipTrigger } from '../tooltip';\n\n// A presentational metric / statistic, laid out after the Figma MetricCard node:\n// a label row (label + an optional top-right caption) over a value row (an\n// optional status-tinted icon badge + the value + unit on the left, an optional\n// trend on the right), with optional supporting text below. It owns visual\n// hierarchy and layout only — it never computes or formats the value, converts\n// units, or decides whether a value is good or bad; the consumer passes\n// ready-to-render nodes and a resolved `status`, and composes a `TrendIndicator`\n// into the trend slot. `status` tints the icon badge (a subtle cue, not a full\n// color fill). No dedicated token tier — colors are semantic `--ui-*` tokens and\n// geometry uses the Tailwind scale.\nconst metricVariants = cva('flex flex-col', {\n  variants: {\n    size: {\n      small: 'gap-1',\n      medium: 'gap-1.5',\n      large: 'gap-2',\n    },\n    // Semantic status — drives the icon badge tint (see STATUS_BADGE). Kept as a\n    // cva axis so the enum is spec-conformant; the tint is applied on the badge.\n    status: {\n      neutral: '',\n      info: '',\n      success: '',\n      warning: '',\n      danger: '',\n      critical: '',\n    },\n  },\n  defaultVariants: {\n    size: 'medium',\n    status: 'neutral',\n  },\n});\n\nconst LABEL_SIZE = {\n  small: 'text-[10px]',\n  medium: 'text-[11px]',\n  large: 'text-xs',\n} as const;\n\nconst VALUE_SIZE = {\n  small: 'text-2xl',\n  medium: 'text-3xl',\n  large: 'text-4xl',\n} as const;\n\nconst UNIT_SIZE = {\n  small: 'text-sm',\n  medium: 'text-base',\n  large: 'text-lg',\n} as const;\n\nconst SUPPORTING_SIZE = {\n  small: 'text-xs',\n  medium: 'text-xs',\n  large: 'text-sm',\n} as const;\n\nconst BADGE_SIZE = {\n  small: 'size-7',\n  medium: 'size-8',\n  large: 'size-10',\n} as const;\n\n// icons-react icons size themselves from a `size` prop (which also picks the\n// designed stroke weight) — CSS can't do that reliably — so the badge icon is\n// cloned to the right px for the Metric size.\nconst BADGE_ICON_PX = {\n  small: 14,\n  medium: 16,\n  large: 20,\n} as const;\n\nconst SKELETON_SIZE = {\n  small: 'h-6 w-16',\n  medium: 'h-8 w-20',\n  large: 'h-10 w-28',\n} as const;\n\n// The badge pairs the status \"pressed\" background tint with its matching icon\n// color (the same pairing the design uses for status icon chips).\nconst STATUS_BADGE = {\n  neutral:\n    'bg-[var(--ui-background-status-neutral-pressed)] text-[var(--ui-text-on-status-neutral)]',\n  info: 'bg-[var(--ui-background-status-info-pressed)] text-[var(--ui-text-on-status-info)]',\n  success:\n    'bg-[var(--ui-background-status-success-pressed)] text-[var(--ui-text-on-status-success)]',\n  warning:\n    'bg-[var(--ui-background-status-warning-pressed)] text-[var(--ui-text-on-status-warning)]',\n  danger:\n    'bg-[var(--ui-background-status-danger-pressed)] text-[var(--ui-text-on-status-danger)]',\n  critical:\n    'bg-[var(--ui-background-status-critical-pressed)] text-[var(--ui-text-on-status-critical)]',\n} as const;\n\nexport interface MetricProps\n  extends React.ComponentProps<'div'>,\n    VariantProps<typeof metricVariants> {\n  /** What the value measures — e.g. \"Gross margin\". Rendered as an uppercase note heading. */\n  label: React.ReactNode;\n  /**\n   * The primary value, already formatted (`73`, `\"94%\"`, `\"$72K\"`, `\"2.8\"`).\n   * The kit does not format currency, units, or decimals.\n   */\n  value: React.ReactNode;\n  /** Unit shown next to the value at a smaller, muted size — e.g. `\"%\"`, `\"hours\"`. */\n  unit?: React.ReactNode;\n  /** A top-right caption aligned with the label — e.g. a timeframe `Tag` (\"Last 30 days\"). */\n  caption?: React.ReactNode;\n  /** A trend slot on the right of the value — typically a `TrendIndicator`. */\n  trend?: React.ReactNode;\n  /** Secondary line below the value — e.g. \"Target: 99%\". */\n  supportingText?: React.ReactNode;\n  /** A small badge / metadata slot beside the value — e.g. a `Tag`. */\n  badge?: React.ReactNode;\n  /** Icon rendered in a status-tinted badge before the value. */\n  icon?: React.ReactNode;\n  /** Contextual hint on an info affordance next to the label (Base UI Tooltip). */\n  tooltip?: React.ReactNode;\n  /** Accessible name for the info affordance that reveals `tooltip`. */\n  tooltipLabel?: string;\n  /** Show a skeleton in place of the value, preserving its space. */\n  loading?: boolean;\n  /** Card body below the header — e.g. a chart, a Separator, an insight line. */\n  children?: React.ReactNode;\n}\n\nconst Metric = React.forwardRef<HTMLDivElement, MetricProps>(\n  (\n    {\n      className,\n      label,\n      value,\n      unit,\n      caption,\n      trend,\n      supportingText,\n      badge,\n      icon,\n      tooltip,\n      tooltipLabel = 'More information',\n      loading = false,\n      size,\n      status,\n      children,\n      ...props\n    },\n    ref\n  ) => {\n    const resolvedSize = size ?? 'medium';\n    const resolvedStatus = status ?? 'neutral';\n\n    return (\n      <Card\n        ref={ref}\n        data-size={resolvedSize}\n        data-status={resolvedStatus}\n        className={cn('flex flex-col p-4', className)}\n        {...props}\n      >\n        <div className={cn(metricVariants({ size, status }))}>\n        {/* Label row: label (+ optional info) on the left, caption on the right. */}\n        <div className=\"flex items-center justify-between gap-2\">\n          <div className=\"flex min-w-0 items-center gap-1.5\">\n            <span\n              className={cn(\n                'min-w-0 truncate font-bold uppercase leading-none tracking-wide text-muted-foreground',\n                LABEL_SIZE[resolvedSize]\n              )}\n            >\n              {label}\n            </span>\n            {tooltip != null && (\n              <Tooltip>\n                <TooltipTrigger\n                  aria-label={tooltipLabel}\n                  className=\"inline-flex shrink-0 cursor-default appearance-none border-0 bg-transparent p-0 text-muted-foreground\"\n                >\n                  <CircleInfoIcon size={16} aria-hidden />\n                </TooltipTrigger>\n                <TooltipContent>{tooltip}</TooltipContent>\n              </Tooltip>\n            )}\n          </div>\n          {caption != null && <div className=\"shrink-0\">{caption}</div>}\n        </div>\n\n        {/* Value row: badge + value + unit on the left, trend on the right. */}\n        <div className=\"flex items-center justify-between gap-3\">\n          <div className=\"flex min-w-0 items-center gap-2\">\n            {icon != null && (\n              <span\n                aria-hidden\n                className={cn(\n                  'flex shrink-0 items-center justify-center rounded-lg [&_svg]:shrink-0',\n                  BADGE_SIZE[resolvedSize],\n                  STATUS_BADGE[resolvedStatus]\n                )}\n              >\n                {React.isValidElement(icon)\n                  ? React.cloneElement(\n                      icon as React.ReactElement<{ size?: number }>,\n                      { size: BADGE_ICON_PX[resolvedSize] }\n                    )\n                  : icon}\n              </span>\n            )}\n            <div className=\"flex min-w-0 items-baseline gap-1\">\n              {loading ? (\n                <Skeleton className={SKELETON_SIZE[resolvedSize]} />\n              ) : (\n                <>\n                  <span\n                    className={cn(\n                      'font-bold leading-none tabular-nums text-foreground',\n                      VALUE_SIZE[resolvedSize]\n                    )}\n                  >\n                    {value}\n                  </span>\n                  {unit != null && (\n                    <span\n                      className={cn(\n                        'font-medium text-muted-foreground',\n                        UNIT_SIZE[resolvedSize]\n                      )}\n                    >\n                      {unit}\n                    </span>\n                  )}\n                </>\n              )}\n              {badge != null && <span className=\"ms-1 self-center\">{badge}</span>}\n            </div>\n          </div>\n          {trend != null && <div className=\"shrink-0\">{trend}</div>}\n        </div>\n\n        {supportingText != null && (\n          <div\n            className={cn('text-muted-foreground', SUPPORTING_SIZE[resolvedSize])}\n          >\n            {supportingText}\n          </div>\n        )}\n        </div>\n        {children}\n      </Card>\n    );\n  }\n);\nMetric.displayName = 'Metric';\n\nexport { Metric };\n"],"names":["metricVariants","cva","LABEL_SIZE","VALUE_SIZE","UNIT_SIZE","SUPPORTING_SIZE","BADGE_SIZE","BADGE_ICON_PX","SKELETON_SIZE","STATUS_BADGE","Metric","React","className","label","value","unit","caption","trend","supportingText","badge","icon","tooltip","tooltipLabel","loading","size","status","children","props","ref","resolvedSize","resolvedStatus","jsxs","Card","cn","jsx","Tooltip","TooltipTrigger","CircleInfoIcon","TooltipContent","Skeleton","Fragment"],"mappings":"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"}